:root{--bg-primary:#0a0a0a;--bg-secondary:#151515;--bg-tertiary:#1a1a1a;--bg-elevated:#202020;--graphite-dark:#2a2a2a;--graphite:#3a3a3a;--graphite-light:#4a4a4a;--orange:#ff6b35;--orange-glow:#ff6b354d;--green:#4ade80;--green-glow:#4ade804d;--blue:#60a5fa;--blue-glow:#60a5fa4d;--text-primary:#fff;--text-secondary:#a0a0a0;--text-tertiary:#606060;--border:#ffffff1a;--border-hover:#fff3;--shadow:#00000080;--glow:#ffffff0d;--glass-bg:#1a1a1ab3;--glass-border:#ffffff14;--transition-fast:.15s cubic-bezier(.4, 0, .2, 1);--transition-normal:.3s cubic-bezier(.4, 0, .2, 1);--transition-slow:.5s cubic-bezier(.4, 0, .2, 1);--ease-out-cubic:cubic-bezier(.33, 1, .68, 1);--ease-in-out-cubic:cubic-bezier(.65, 0, .35, 1);--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px}*{box-sizing:border-box;margin:0;padding:0}html,body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg-primary);width:100%;height:100%;color:var(--text-primary);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;overflow:hidden}#root{width:100%;height:100%;position:relative;overflow:hidden}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--graphite);border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb:hover{background:var(--graphite-light)}::selection{background:var(--orange);color:var(--text-primary)}:focus-visible{outline:2px solid var(--orange);outline-offset:2px}button{all:unset;cursor:pointer;-webkit-user-select:none;user-select:none}.gpu-accelerated{will-change:transform;backface-visibility:hidden;transform:translateZ(0)}.loading-screen{background:var(--bg-primary);z-index:9999;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.loading-content{align-items:center;gap:var(--space-xl);max-width:500px;padding:var(--space-lg);flex-direction:column;display:flex}.loading-logo{text-align:center}.logo-text{letter-spacing:8px;background:linear-gradient(135deg, var(--orange) 0%, var(--blue) 100%);-webkit-text-fill-color:transparent;margin-bottom:var(--space-sm);text-shadow:0 0 40px var(--orange-glow);-webkit-background-clip:text;background-clip:text;font-size:72px;font-weight:700}.logo-subtitle{letter-spacing:2px;text-transform:uppercase;color:var(--text-secondary);font-size:12px;font-weight:500}.waveform{justify-content:center;align-items:center;gap:4px;width:100%;height:60px;display:flex}.waveform-bar{background:linear-gradient(to top, var(--orange), var(--blue));width:4px;box-shadow:0 0 10px var(--orange-glow);border-radius:2px}.loading-steps{gap:var(--space-sm);flex-direction:column;width:100%;display:flex}.loading-step{align-items:center;gap:var(--space-md);padding:var(--space-sm) var(--space-md);background:var(--bg-secondary);border-radius:var(--radius-md);border:1px solid var(--border);transition:all var(--transition-normal);display:flex}.loading-step.active{border-color:var(--orange);box-shadow:0 0 20px var(--orange-glow);background:#ff6b350d}.loading-step.completed{border-color:var(--green);opacity:.6}.step-indicator{justify-content:center;align-items:center;width:24px;height:24px;font-size:14px;font-weight:600;display:flex}.loading-step.active .step-indicator{color:var(--orange);animation:1s ease-in-out infinite pulse}.loading-step.completed .step-indicator{color:var(--green)}.step-text{color:var(--text-secondary);font-family:monospace;font-size:14px}.loading-step.active .step-text{color:var(--text-primary)}.progress-container{gap:var(--space-sm);flex-direction:column;width:100%;display:flex}.progress-bar{background:var(--bg-secondary);border-radius:var(--radius-sm);border:1px solid var(--border);width:100%;height:8px;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--orange) 0%, var(--blue) 100%);height:100%;box-shadow:0 0 20px var(--orange-glow);transition:width .1s linear}.progress-text{text-align:center;color:var(--text-secondary);font-family:monospace;font-size:12px}.loading-complete{color:var(--green);align-items:center;gap:var(--space-sm);font-size:14px;font-weight:500;display:flex}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.1)}}.top-bar{background:var(--bg-secondary);border-bottom:1px solid var(--border);width:100%;height:60px;padding:0 var(--space-lg);z-index:100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);justify-content:space-between;align-items:center;display:flex;position:relative}.top-bar-section{align-items:center;gap:var(--space-lg);display:flex}.top-bar-section.left{flex:1}.top-bar-section.center{flex:none}.top-bar-section.right{flex:1;justify-content:flex-end}.logo{letter-spacing:3px;background:linear-gradient(135deg, var(--orange) 0%, var(--blue) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:24px;font-weight:700}.project-name{color:var(--text-secondary);background:var(--bg-tertiary);border-radius:var(--radius-sm);border:1px solid var(--border);padding:4px 8px;font-family:monospace;font-size:13px}.transport-controls{gap:var(--space-sm);padding:var(--space-xs);background:var(--bg-tertiary);border-radius:var(--radius-md);border:1px solid var(--border);display:flex}.transport-button{background:var(--graphite-dark);border-radius:var(--radius-sm);border:1px solid var(--border);width:36px;height:36px;color:var(--text-secondary);transition:all var(--transition-fast);cursor:pointer;justify-content:center;align-items:center;display:flex}.transport-button:hover{background:var(--graphite);border-color:var(--border-hover);color:var(--text-primary);transform:translateY(-1px)}.transport-button:active{transform:translateY(0)}.transport-button.active{background:var(--orange);border-color:var(--orange);color:var(--text-primary);box-shadow:0 0 20px var(--orange-glow)}.transport-button.active:hover{background:var(--orange);filter:brightness(1.1)}.bpm-display{padding:var(--space-xs) var(--space-md);background:var(--bg-tertiary);border-radius:var(--radius-md);border:1px solid var(--border);cursor:ns-resize;-webkit-user-select:none;user-select:none;min-width:60px;transition:all var(--transition-fast);flex-direction:column;align-items:center;display:flex}.bpm-display:hover{border-color:var(--orange);background:var(--graphite-dark)}.bpm-display.dragging{border-color:var(--orange);background:var(--graphite);box-shadow:0 0 20px var(--orange-glow)}.bpm-display.pulse{border-color:var(--green);box-shadow:0 0 25px var(--green-glow);animation:.1s ease-out bpmPulse}@keyframes bpmPulse{0%{box-shadow:0 0 15px var(--green-glow);transform:scale(1)}50%{box-shadow:0 0 30px var(--green-glow);transform:scale(1.05)}to{box-shadow:0 0 15px var(--green-glow);transform:scale(1)}}.bpm-value{color:var(--text-primary);transition:color var(--transition-fast);font-family:monospace;font-size:18px;font-weight:700}.bpm-display.pulse .bpm-value{color:var(--green)}.bpm-label{color:var(--text-tertiary);letter-spacing:1px;font-size:10px;font-weight:500}.meter{align-items:center;gap:var(--space-sm);font-family:monospace;font-size:11px;display:flex}.meter-label{color:var(--text-tertiary);font-weight:600}.meter-bar{background:var(--bg-tertiary);border-radius:var(--radius-sm);border:1px solid var(--border);width:60px;height:8px;position:relative;overflow:hidden}.meter-fill{background:linear-gradient(90deg, var(--green), var(--orange));height:100%;transition:width var(--transition-normal);box-shadow:0 0 10px var(--green-glow)}.meter-fill.ram{background:linear-gradient(90deg, var(--blue), var(--orange));box-shadow:0 0 10px var(--blue-glow)}.meter-value{color:var(--text-secondary);text-align:right;min-width:32px}.fps-counter{background:var(--bg-tertiary);border-radius:var(--radius-sm);border:1px solid var(--border);flex-direction:column;align-items:center;padding:4px 8px;display:flex}.fps-value{color:var(--green);font-family:monospace;font-size:16px;font-weight:700}.fps-label{color:var(--text-tertiary);font-size:9px;font-weight:600}.audio-status{align-items:center;gap:var(--space-sm);background:var(--bg-tertiary);border-radius:var(--radius-sm);border:1px solid var(--border);color:var(--text-secondary);padding:6px 12px;font-size:11px;font-weight:600;display:flex}.status-indicator{background:var(--green);width:8px;height:8px;box-shadow:0 0 10px var(--green-glow);border-radius:50%;animation:2s ease-in-out infinite pulse-status}.status-indicator.online{background:var(--green)}.time-display{color:var(--text-primary);background:var(--bg-tertiary);border-radius:var(--radius-sm);border:1px solid var(--border);padding:6px 12px;font-family:monospace;font-size:14px;font-weight:600}@keyframes pulse-status{0%,to{opacity:1}50%{opacity:.5}}@media (width<=1200px){.top-bar{padding:0 var(--space-md)}.project-name{display:none}.meter-bar{width:40px}}@media (width<=768px){.top-bar{height:50px}.top-bar-section{gap:var(--space-sm)}.meter,.fps-counter,.audio-status{display:none}}.piano-roll{background:var(--bg-primary);flex-direction:column;width:100%;height:100%;display:flex;overflow:hidden}.piano-roll-grid{background:var(--bg-primary);cursor:default;flex-direction:column;flex:1;display:flex;position:relative;overflow:auto}.piano-roll-grid:active{cursor:grabbing}.piano-roll-grid::-webkit-scrollbar{width:12px;height:12px}.piano-roll-grid::-webkit-scrollbar-track{background:var(--bg-secondary);border:1px solid var(--border)}.piano-roll-grid::-webkit-scrollbar-thumb{background:var(--graphite);border-radius:var(--radius-sm);border:2px solid var(--bg-secondary)}.piano-roll-grid::-webkit-scrollbar-thumb:hover{background:var(--graphite-light)}.piano-roll-grid::-webkit-scrollbar-corner{background:var(--bg-secondary)}.piano-roll-content{display:flex;position:relative}.piano-keyboard{background:var(--bg-secondary);border-right:1px solid var(--border);z-index:10;flex-direction:column;flex-shrink:0;width:120px;display:flex;position:sticky;left:0}.piano-key{padding:0 var(--space-md);border-bottom:1px solid var(--border);cursor:pointer;transition:all var(--transition-fast);-webkit-user-select:none;user-select:none;flex-shrink:0;align-items:center;display:flex}.piano-key.white{background:var(--bg-elevated)}.piano-key.black{background:var(--graphite-dark)}.piano-key:hover{background:var(--graphite)}.key-label{color:var(--text-secondary);font-family:monospace;font-size:11px;font-weight:600}.timeline{background:var(--bg-secondary);border-bottom:1px solid var(--border);z-index:15;flex-shrink:0;height:30px;display:flex;position:sticky;top:0;left:0}.timeline-marker{color:var(--text-tertiary);border-right:1px solid var(--border);-webkit-user-select:none;user-select:none;flex-shrink:0;justify-content:center;align-items:center;font-family:monospace;font-size:10px;display:flex}.timeline-marker.bar-marker{color:var(--text-secondary);background:#ffffff05;font-weight:600}.grid-container{-webkit-user-select:none;user-select:none;position:relative}.grid-row{pointer-events:none;border-bottom:1px solid #ffffff08;position:absolute;left:0;right:0}.grid-row.black-key-row{background:#ffffff03}.beat-lines{pointer-events:none;z-index:1;width:100%;height:100%;position:absolute;top:0;left:0}.beat-line{background:#ffffff0d;width:1px;position:absolute;top:0;bottom:0}.beat-line.strong{background:#ffffff1a;width:2px}.playhead{background:var(--orange);width:2px;box-shadow:0 0 20px var(--orange-glow);z-index:15;pointer-events:none;position:absolute;top:0}.playhead:before{content:"";border-left:6px solid #0000;border-right:6px solid #0000;border-top:8px solid var(--orange);width:0;height:0;position:absolute;top:0;left:50%;transform:translate(-50%)}.piano-note{border-radius:var(--radius-sm);cursor:pointer;padding:0 var(--space-sm);transition:all var(--transition-fast);z-index:2;border:2px solid #fff3;align-items:center;display:flex;position:absolute;overflow:hidden;box-shadow:0 2px 8px #0000004d}.piano-note:hover{z-index:10;border-color:#fff6}.note-content{pointer-events:none;justify-content:space-between;align-items:center;width:100%;display:flex;position:relative}.note-name{color:#fff;text-shadow:0 1px 3px #000c;white-space:nowrap;text-overflow:clip;padding-right:var(--space-sm);font-size:13px;font-weight:600;overflow:visible}.note-tooltip{color:#ffffffb3;border-radius:var(--radius-sm);white-space:nowrap;pointer-events:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0009;padding:4px 8px;font-size:11px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.zoom-controls{gap:var(--space-sm);background:var(--bg-secondary);padding:var(--space-sm);border-radius:var(--radius-md);border:1px solid var(--border);z-index:20;display:flex;position:absolute;bottom:20px;right:20px}.zoom-button{background:var(--graphite-dark);border-radius:var(--radius-sm);border:1px solid var(--border);width:28px;height:28px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);justify-content:center;align-items:center;display:flex}.zoom-button:hover{background:var(--graphite);color:var(--text-primary)}.zoom-level{min-width:50px;color:var(--text-secondary);justify-content:center;align-items:center;font-family:monospace;font-size:11px;display:flex}@media (width<=1024px){.piano-keyboard{width:80px}.key-label,.timeline-marker{font-size:9px}.note-name{font-size:11px}}@media (width<=768px){.piano-keyboard{width:60px}.piano-key{padding:0 var(--space-sm)}.note-tooltip{display:none}.zoom-controls{padding:4px;bottom:10px;right:10px}.zoom-button{width:24px;height:24px}.zoom-level{min-width:40px;font-size:10px}}.plugin-window{background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:var(--radius-lg);min-width:400px;max-width:90vw;min-height:300px;max-height:90vh;transition:border-color var(--transition-fast), box-shadow var(--transition-fast);flex-direction:column;display:flex;position:absolute;overflow:hidden;box-shadow:0 20px 60px #00000080}.plugin-window.focused{border-color:var(--orange);box-shadow:0 0 40px var(--orange-glow), 0 20px 60px #00000080}.plugin-window.minimized{display:none}.plugin-header{padding:var(--space-sm) var(--space-md);background:var(--bg-secondary);border-bottom:1px solid var(--border);cursor:move;-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;display:flex}.plugin-header:active{cursor:grabbing}.plugin-title-section{align-items:center;gap:var(--space-sm);flex:1;display:flex}.plugin-icon{background:var(--graphite);border-radius:var(--radius-sm);justify-content:center;align-items:center;width:24px;height:24px;font-size:12px;display:flex}.plugin-title{color:var(--text-primary);font-family:monospace;font-size:14px;font-weight:600}.plugin-controls{gap:var(--space-xs);display:flex}.control-button{background:var(--graphite-dark);border-radius:var(--radius-sm);border:1px solid var(--border);width:28px;height:28px;color:var(--text-secondary);transition:all var(--transition-fast);cursor:pointer;justify-content:center;align-items:center;display:flex}.control-button:hover{background:var(--graphite);border-color:var(--border-hover);color:var(--text-primary)}.control-button.minimize:hover{background:var(--blue);border-color:var(--blue)}.control-button.close:hover{background:var(--orange);border-color:var(--orange)}.plugin-content{flex:1;position:relative;overflow:hidden auto}.plugin-content::-webkit-scrollbar{width:6px}.resize-handle{cursor:nwse-resize;background:linear-gradient(135deg, transparent 50%, var(--graphite) 50%);border-bottom-right-radius:var(--radius-lg);width:20px;height:20px;position:absolute;bottom:0;right:0}.resize-handle:hover{background:linear-gradient(135deg, transparent 50%, var(--orange) 50%)}@keyframes windowOpen{0%{opacity:0;transform:scale(.95)translateY(10px)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes windowClose{0%{opacity:1;transform:scale(1)translateY(0)}to{opacity:0;transform:scale(.95)translateY(10px)}}.plugin-window.opening{animation:windowOpen .25s var(--ease-out-cubic)}.plugin-window.closing{animation:windowClose .2s var(--ease-in-out-cubic);pointer-events:none}@media (width<=768px){.plugin-window{min-width:300px;max-width:95vw;max-height:85vh}.resize-handle{display:none}}@keyframes pulse-indicator{0%,to{opacity:1}50%{opacity:.5}}@media (width<=768px){.plugin-container{padding:var(--space-md)}.plugin-section{padding:var(--space-lg)}.plugin-grid-2,.plugin-grid-3{grid-template-columns:1fr}}.about-plugin{height:100%;padding:var(--space-lg);flex-direction:column;display:flex;overflow-y:auto}.synth-header{background:var(--bg-secondary);border-radius:var(--radius-md);padding:var(--space-xl);border:2px solid var(--border);gap:var(--space-xl);flex-direction:column;display:flex}.profile-section{gap:var(--space-xl);align-items:flex-start;display:flex}.profile-image{border-radius:var(--radius-md);object-fit:cover;border:3px solid var(--orange);width:100px;height:100px;box-shadow:0 0 20px var(--orange-glow);flex-shrink:0}.profile-info{flex:1;min-width:0}.profile-info h2{color:var(--text-primary);margin-bottom:var(--space-sm);font-size:24px;font-weight:700}.tagline{color:var(--orange);margin-bottom:var(--space-md);font-size:14px;font-weight:600}.profile-info p{color:var(--text-secondary);margin:0;font-size:14px;line-height:1.6}.info-grid{gap:var(--space-md);grid-template-columns:repeat(auto-fit,minmax(150px,1fr));display:grid}.interests-section{gap:var(--space-sm);flex-wrap:wrap;display:flex}.interest-tag{padding:var(--space-sm) var(--space-md);background:var(--graphite-dark);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-secondary);transition:all var(--transition-fast);cursor:default;font-size:12px;font-weight:500}.interest-tag:hover{border-color:var(--orange);color:var(--orange);transform:translateY(-1px)}.button-group{gap:var(--space-md);margin-top:var(--space-md);display:flex}.btn{flex:1}@media (width<=768px){.about-plugin{padding:var(--space-md)}.profile-section{text-align:center;flex-direction:column;align-items:center}.button-group{flex-direction:column}.btn{flex:none;width:100%}}.projects-plugin{gap:var(--space-lg);padding:var(--space-lg);flex-direction:column;height:100%;display:flex;overflow-y:auto}.project-card{background:var(--bg-secondary);border-radius:var(--radius-md);border:2px solid var(--border);transition:all var(--transition-normal);overflow:hidden}.project-card:hover{border-color:var(--orange);box-shadow:0 8px 30px var(--orange-glow)}.project-image{object-fit:cover;background:linear-gradient(135deg, var(--graphite-dark), var(--graphite));border-bottom:2px solid var(--border);width:100%;height:180px}.project-content{padding:var(--space-lg)}.project-header{justify-content:space-between;align-items:flex-start;gap:var(--space-md);margin-bottom:var(--space-md);display:flex}.project-title{color:var(--text-primary);margin-bottom:var(--space-sm);font-size:18px;font-weight:700}.project-description{color:var(--text-secondary);margin:0;font-size:13px;line-height:1.6}.project-status{border-radius:var(--radius-sm);text-transform:uppercase;letter-spacing:1px;white-space:nowrap;flex-shrink:0;padding:4px 10px;font-size:10px;font-weight:700}.project-status.live{color:var(--green);border:1px solid var(--green);background:#4ade8026}.project-status.wip{color:var(--orange);border:1px solid var(--orange);background:#ff6b3526}.tech-stack{gap:var(--space-sm);margin-bottom:var(--space-lg);flex-wrap:wrap;display:flex}.tech-tag{background:var(--graphite-dark);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-secondary);transition:all var(--transition-fast);padding:4px 10px;font-family:monospace;font-size:11px;font-weight:600}.tech-tag:hover{border-color:var(--orange);color:var(--orange)}.project-links{gap:var(--space-md);display:flex}.project-link{padding:var(--space-sm) var(--space-md);background:var(--graphite-dark);border:2px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);transition:all var(--transition-fast);justify-content:center;align-items:center;gap:var(--space-sm);flex:1;font-size:12px;font-weight:600;text-decoration:none;display:flex}.project-link:hover{background:var(--orange);border-color:var(--orange);color:var(--bg-primary);box-shadow:0 0 15px var(--orange-glow);transform:translateY(-2px)}@media (width<=768px){.projects-plugin{padding:var(--space-md)}.project-header,.project-links{flex-direction:column}}.contact-plugin{gap:var(--space-lg);padding:var(--space-lg);flex-direction:column;height:100%;display:flex;overflow-y:auto}.vintage-display{background:var(--bg-secondary);border-radius:var(--radius-md);padding:var(--space-xl);border:2px solid var(--border);gap:var(--space-lg);flex-direction:column;display:flex}.display-header{padding-bottom:var(--space-md);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;display:flex}.display-title{color:var(--orange);letter-spacing:2px;font-family:monospace;font-size:12px;font-weight:700}.display-indicators{gap:var(--space-sm);display:flex}.indicator{background:var(--graphite-dark);border:1px solid var(--border);border-radius:50%;width:8px;height:8px}.indicator.active{background:var(--green);box-shadow:0 0 8px var(--green-glow);animation:2s ease-in-out infinite pulse}.contact-grid{gap:var(--space-md);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));display:grid}.contact-item{gap:var(--space-md);padding:var(--space-md);background:var(--graphite-dark);border-radius:var(--radius-sm);border:2px solid var(--border);transition:all var(--transition-fast);text-decoration:none;display:flex}.contact-item:hover{border-color:var(--orange);background:var(--graphite);transform:translateY(-2px)}.contact-icon{background:var(--bg-secondary);border-radius:var(--radius-sm);width:36px;height:36px;color:var(--orange);flex-shrink:0;justify-content:center;align-items:center;font-size:18px;display:flex}.contact-item:hover .contact-icon{background:var(--orange);color:var(--bg-primary)}.contact-details{flex-direction:column;gap:4px;min-width:0;display:flex}.contact-label{color:var(--text-tertiary);text-transform:uppercase;letter-spacing:1.5px;font-size:10px;font-weight:700}.contact-value{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-family:monospace;font-size:13px;font-weight:600;overflow:hidden}.cta-section{text-align:center;padding:var(--space-xl);background:var(--graphite-dark);border-radius:var(--radius-md);border:2px solid var(--border)}.cta-text{color:var(--text-secondary);margin-bottom:var(--space-lg);font-size:14px;line-height:1.6}.cta-button{padding:var(--space-md) var(--space-xl);background:var(--orange);color:var(--bg-primary);border-radius:var(--radius-sm);border:2px solid var(--orange);transition:all var(--transition-fast);align-items:center;gap:var(--space-sm);box-shadow:0 0 15px var(--orange-glow);font-size:13px;font-weight:700;display:inline-flex}.cta-button:hover{box-shadow:0 0 25px var(--orange-glow);transform:translateY(-2px)}.cta-button:active{transform:translateY(0)}@media (width<=768px){.contact-plugin{padding:var(--space-md)}.contact-grid{grid-template-columns:1fr}}.skills-mixer-plugin{border-radius:var(--radius-lg);background:linear-gradient(135deg,#1a1a1a 0%,#0f0f0f 100%);flex-direction:column;height:100%;padding:0;display:flex;overflow:hidden}.mixer-header{border-bottom:2px solid var(--orange);padding:var(--space-md);background:#0a0a0a;justify-content:space-between;align-items:center;display:flex}.mixer-title{color:var(--orange);letter-spacing:3px;text-transform:uppercase;font-family:Courier New,monospace;font-size:14px;font-weight:700}.mixer-controls{gap:var(--space-sm);display:flex}.mixer-button{background:var(--graphite-dark);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;transition:all var(--transition-fast);padding:4px 12px;font-size:10px;font-weight:600}.mixer-button:hover{background:var(--graphite);color:var(--text-primary);border-color:var(--orange)}.mixer-button.active{background:var(--orange);color:#fff;border-color:var(--orange)}.mixer-channels{padding:var(--space-lg);background:#0f0f0f;flex:1;gap:2px;display:flex;overflow:auto hidden}.mixer-channels::-webkit-scrollbar{height:8px}.mixer-channels::-webkit-scrollbar-track{background:#0a0a0a}.mixer-channels::-webkit-scrollbar-thumb{background:var(--graphite);border-radius:4px}.channel-strip{border:1px solid var(--border);border-radius:var(--radius-md);width:100px;min-width:100px;padding:var(--space-sm);gap:var(--space-sm);transition:all var(--transition-normal);background:linear-gradient(#1a1a1a 0%,#151515 100%);flex-direction:column;display:flex;position:relative;box-shadow:0 4px 10px #00000080}.channel-strip:hover{border-color:var(--orange);transform:translateY(-2px);box-shadow:0 0 20px #ff6b354d}.channel-header{padding-bottom:var(--space-sm);border-bottom:1px solid var(--border);flex-direction:column;gap:4px;display:flex}.channel-name{color:var(--text-primary);text-align:center;white-space:nowrap;text-overflow:ellipsis;font-size:11px;font-weight:600;overflow:hidden}.channel-category{color:var(--text-tertiary);text-align:center;text-transform:uppercase;letter-spacing:.5px;font-size:9px}.vu-meter{border:1px solid var(--border);border-radius:var(--radius-sm);background:#0a0a0a;width:100%;height:150px;position:relative;overflow:hidden;box-shadow:inset 0 2px 8px #00000080}.vu-meter-fill{background:linear-gradient(#ef4444 0% 15%,#f59e0b 15% 40%,#4ade80 40% 100%);transition:height .3s cubic-bezier(.4,0,.2,1);position:absolute;bottom:0;left:0;right:0;box-shadow:0 0 10px #4ade8080}.vu-meter-marks{pointer-events:none;flex-direction:column;justify-content:space-between;padding:4px 0;display:flex;position:absolute;inset:0}.vu-meter-mark{background:#ffffff1a;height:1px;position:relative}.vu-meter-mark:after{content:attr(data-db);color:var(--text-tertiary);font-family:monospace;font-size:8px;position:absolute;top:-6px;right:4px}.skill-percentage{text-align:center;color:var(--green);text-shadow:0 0 10px var(--green-glow);padding:var(--space-xs) 0;font-family:Courier New,monospace;font-size:18px;font-weight:700}.fader-container{padding:var(--space-sm) 0;flex-direction:column;flex:1;align-items:center;display:flex;position:relative}.fader-track{border:1px solid var(--border);cursor:ns-resize;background:#0a0a0a;border-radius:4px;flex:1;width:8px;position:relative;box-shadow:inset 0 2px 4px #00000080}.fader-fill{background:linear-gradient(to top, var(--orange), var(--blue));border-radius:4px;transition:height .2s;position:absolute;bottom:0;left:0;right:0;box-shadow:0 0 10px #ff6b3580}.fader-handle{border:1px solid var(--border);cursor:grab;width:24px;height:12px;transition:all var(--transition-fast);background:linear-gradient(#4a4a4a,#2a2a2a);border-radius:2px;position:absolute;left:50%;transform:translate(-50%);box-shadow:0 2px 4px #00000080}.fader-handle:hover{border-color:var(--orange);background:linear-gradient(#5a5a5a,#3a3a3a);box-shadow:0 0 10px #ff6b354d}.fader-handle:active{cursor:grabbing;background:var(--orange)}.pan-knob{border:2px solid var(--border);cursor:pointer;width:40px;height:40px;transition:all var(--transition-fast);background:radial-gradient(circle at 30% 30%,#3a3a3a,#1a1a1a);border-radius:50%;position:relative;box-shadow:0 2px 6px #00000080}.pan-knob:hover{border-color:var(--orange);box-shadow:0 0 15px #ff6b354d}.pan-knob-indicator{background:var(--orange);width:3px;height:12px;box-shadow:0 0 6px var(--orange-glow);transform-origin:50% 18px;border-radius:2px;position:absolute;top:4px;left:50%;transform:translate(-50%)}.pan-label{text-align:center;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.5px;margin-top:4px;font-size:8px}.channel-controls{padding-top:var(--space-sm);border-top:1px solid var(--border);justify-content:center;gap:4px;display:flex}.channel-control-btn{background:var(--graphite-dark);border:1px solid var(--border);border-radius:var(--radius-sm);width:30px;height:20px;color:var(--text-tertiary);transition:all var(--transition-fast);cursor:pointer;justify-content:center;align-items:center;font-size:9px;font-weight:600;display:flex}.channel-control-btn:hover{background:var(--graphite);color:var(--text-primary)}.channel-control-btn.active{background:var(--orange);color:#fff;border-color:var(--orange);box-shadow:0 0 10px var(--orange-glow)}.channel-strip.master{border:2px solid var(--orange);background:linear-gradient(#2a2a2a 0%,#1a1a1a 100%);width:120px;min-width:120px}.channel-strip.master .channel-name{color:var(--orange);font-size:12px}.channel-strip[data-category=frontend] .vu-meter-fill{box-shadow:0 0 10px #60a5fa80}.channel-strip[data-category=backend] .vu-meter-fill{box-shadow:0 0 10px #4ade8080}.channel-strip[data-category=creative] .vu-meter-fill{box-shadow:0 0 10px #ec489980}@keyframes meter-pulse{0%,to{opacity:1}50%{opacity:.7}}.vu-meter-fill{animation:2s ease-in-out infinite meter-pulse}@media (width<=768px){.channel-strip{width:80px;min-width:80px}.vu-meter{height:120px}.pan-knob{width:35px;height:35px}}.music-plugin{height:100%;padding:var(--space-lg);gap:var(--space-lg);background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%);flex-direction:column;display:flex;overflow-y:auto}.music-plugin-empty{justify-content:center;align-items:center;gap:var(--space-md);height:100%;color:var(--text-secondary);text-align:center;padding:var(--space-xl);flex-direction:column;display:flex}.empty-text{max-width:400px;font-size:13px;line-height:1.6}.empty-text code{background:var(--graphite-dark);border-radius:3px;padding:2px 6px;font-family:monospace;font-size:12px}.music-visualizer{background:var(--bg-secondary);border:2px solid var(--border);border-radius:var(--radius-md);height:200px;position:relative;overflow:hidden}.visualizer-canvas{width:100%;height:100%;display:block}.visualizer-controls{top:var(--space-md);right:var(--space-md);gap:var(--space-sm);display:flex;position:absolute}.viz-btn{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid var(--border);border-radius:var(--radius-sm);width:32px;height:32px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);background:#1a1a2ecc;justify-content:center;align-items:center;font-size:16px;font-weight:700;display:flex}.viz-btn:hover{background:var(--graphite);border-color:var(--orange);color:var(--orange)}.viz-btn.active{background:var(--orange);border-color:var(--orange);color:var(--bg-primary);box-shadow:0 0 15px var(--orange-glow)}.now-playing{gap:var(--space-lg);background:var(--bg-secondary);border:2px solid var(--border);border-radius:var(--radius-md);padding:var(--space-lg);align-items:center;display:flex}.artwork{border-radius:var(--radius-md);background:var(--graphite-dark);flex-shrink:0;justify-content:center;align-items:center;width:100px;height:100px;display:flex;overflow:hidden}.artwork img{object-fit:cover;width:100%;height:100%}.track-info{flex:1;min-width:0}.track-title{color:var(--text-primary);margin-bottom:var(--space-xs);white-space:nowrap;text-overflow:ellipsis;font-size:20px;font-weight:700;overflow:hidden}.track-artist{color:var(--text-secondary);font-size:14px}.progress-section{align-items:center;gap:var(--space-md);display:flex}.time-display{color:var(--text-tertiary);text-align:center;min-width:45px;font-family:monospace;font-size:12px}.progress-bar{background:var(--graphite-dark);cursor:pointer;height:8px;transition:all var(--transition-fast);border-radius:4px;flex:1;position:relative}.progress-bar:hover{height:10px}.progress-fill{background:linear-gradient(to right, var(--orange), var(--orange-glow));height:100%;box-shadow:0 0 10px var(--orange-glow);border-radius:4px;transition:width .1s linear}.playback-controls{justify-content:center;align-items:center;gap:var(--space-md);display:flex}.control-btn{background:var(--graphite-dark);border:2px solid var(--border);width:44px;height:44px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);border-radius:50%;justify-content:center;align-items:center;font-size:16px;display:flex}.control-btn:hover{background:var(--graphite);border-color:var(--orange);color:var(--orange);transform:scale(1.05)}.control-btn.active{background:var(--orange);border-color:var(--orange);color:var(--bg-primary);box-shadow:0 0 15px var(--orange-glow)}.play-btn{background:var(--orange);border-color:var(--orange);width:56px;height:56px;color:var(--bg-primary);box-shadow:0 0 20px var(--orange-glow);font-size:20px}.play-btn:hover{transform:scale(1.1)}.volume-section{align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-lg);background:var(--bg-secondary);border:2px solid var(--border);border-radius:var(--radius-md);display:flex}.volume-icon{color:var(--text-secondary);text-align:center;min-width:24px;font-size:18px}.volume-slider{appearance:none;background:var(--graphite-dark);border-radius:3px;outline:none;flex:1;height:6px}.volume-slider::-webkit-slider-thumb{appearance:none;background:var(--orange);cursor:pointer;width:16px;height:16px;box-shadow:0 0 8px var(--orange-glow);transition:all var(--transition-fast);border-radius:50%}.volume-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.volume-slider::-moz-range-thumb{background:var(--orange);cursor:pointer;width:16px;height:16px;box-shadow:0 0 8px var(--orange-glow);border:none;border-radius:50%}.volume-value{color:var(--text-tertiary);text-align:right;min-width:40px;font-family:monospace;font-size:12px}.queue-section{background:var(--bg-secondary);border:2px solid var(--border);border-radius:var(--radius-md);padding:var(--space-lg)}.section-header{color:var(--text-tertiary);letter-spacing:2px;margin-bottom:var(--space-md);font-size:11px;font-weight:700}.queue-list{gap:var(--space-sm);flex-direction:column;max-height:250px;display:flex;overflow-y:auto}.queue-item{gap:var(--space-md);padding:var(--space-md);background:var(--graphite-dark);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);border:2px solid #0000;grid-template-columns:35px 1fr auto;display:grid}.queue-item:hover{background:var(--graphite);border-color:var(--border);transform:translate(4px)}.queue-item.active{background:linear-gradient(135deg, var(--orange), var(--orange-glow));border-color:var(--orange);box-shadow:0 2px 10px var(--orange-glow)}.queue-item.active .queue-number,.queue-item.active .queue-title,.queue-item.active .queue-artist,.queue-item.active .queue-duration{color:var(--bg-primary);font-weight:600}.queue-number{color:var(--orange);align-items:center;font-family:monospace;font-size:12px;display:flex}.queue-info{flex-direction:column;justify-content:center;gap:2px;min-width:0;display:flex}.queue-title{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:600;overflow:hidden}.queue-artist{color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;font-size:11px;overflow:hidden}.queue-duration{color:var(--text-tertiary);align-items:center;font-family:monospace;font-size:11px;display:flex}.favorites-section{gap:var(--space-lg);flex-direction:column;display:flex}.favorites-group{background:var(--bg-secondary);border:2px solid var(--border);border-radius:var(--radius-md);padding:var(--space-lg)}.favorite-item{padding:var(--space-sm) 0;border-bottom:1px solid var(--border)}.favorite-item:last-child{border-bottom:none}.favorite-text{color:var(--text-secondary);font-size:13px;line-height:1.6}.favorite-text strong{color:var(--text-primary);font-weight:600}.artists-grid{gap:var(--space-sm);flex-wrap:wrap;display:flex}.artist-tag{padding:var(--space-sm) var(--space-md);background:var(--graphite-dark);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);transition:all var(--transition-fast);font-size:12px;font-weight:600}.artist-tag:hover{background:var(--graphite);border-color:var(--orange);color:var(--orange)}.queue-list::-webkit-scrollbar{width:6px}.queue-list::-webkit-scrollbar-track{background:var(--bg-primary)}.queue-list::-webkit-scrollbar-thumb{background:var(--graphite);border-radius:3px}.queue-list::-webkit-scrollbar-thumb:hover{background:var(--graphite-light)}@media (width<=768px){.music-plugin{padding:var(--space-md);gap:var(--space-md)}.music-visualizer{height:150px}.now-playing{text-align:center;flex-direction:column}.artwork{width:120px;height:120px}.control-btn{width:40px;height:40px;font-size:14px}.play-btn{width:50px;height:50px;font-size:18px}.queue-item{grid-template-columns:30px 1fr}.queue-duration{display:none}}.plugin-container{height:100%;padding:var(--space-lg);flex-direction:column;display:flex;overflow-y:auto}.plugin-section{background:var(--bg-secondary);border-radius:var(--radius-md);padding:var(--space-xl);border:2px solid var(--border);transition:border-color var(--transition-fast)}.plugin-section:hover{border-color:var(--border-hover)}.section-header{color:var(--text-tertiary);letter-spacing:2px;text-transform:uppercase;margin-bottom:var(--space-md);font-size:11px;font-weight:700}.info-card{background:var(--graphite-dark);padding:var(--space-md);border-radius:var(--radius-sm);border:1px solid var(--border);transition:all var(--transition-normal);position:relative;overflow:hidden}.info-card:before{content:"";width:100%;height:100%;transition:left .5s var(--ease-out-cubic);background:linear-gradient(90deg,#0000,#ff6b351a,#0000);position:absolute;top:0;left:-100%}.info-card:hover{border-color:var(--orange);transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}.info-card:hover:before{left:100%}.info-label{color:var(--text-tertiary);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:var(--space-sm);font-size:10px;font-weight:700}.info-value{color:var(--text-primary);font-size:13px;font-weight:500}.tag{padding:var(--space-sm) var(--space-md);background:var(--graphite-dark);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-secondary);transition:all var(--transition-fast);cursor:default;font-size:12px;font-weight:500;display:inline-block;position:relative}.tag:after{content:"";background:var(--orange);width:0;height:2px;transition:width var(--transition-normal) var(--ease-out-cubic);position:absolute;bottom:0;left:0}.tag:hover{border-color:var(--orange);color:var(--orange);transform:translateY(-1px);box-shadow:0 2px 8px #0003}.tag:hover:after{width:100%}.plugin-button{padding:var(--space-md) var(--space-lg);border-radius:var(--radius-sm);transition:all var(--transition-fast);justify-content:center;align-items:center;gap:var(--space-sm);border:2px solid var(--border);cursor:pointer;font-size:13px;font-weight:600;display:inline-flex;position:relative;overflow:hidden}.plugin-button:before{content:"";width:0;height:0;transition:width .3s var(--ease-out-cubic), height .3s var(--ease-out-cubic);background:#ffffff1a;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.plugin-button:hover:before{width:300px;height:300px}.plugin-button-primary{background:var(--orange);color:var(--bg-primary);border-color:var(--orange);box-shadow:0 0 15px var(--orange-glow)}.plugin-button-primary:hover{box-shadow:0 4px 20px var(--orange-glow);transform:translateY(-2px)}.plugin-button-primary:active{box-shadow:0 0 10px var(--orange-glow);transform:translateY(0)}.plugin-button-secondary{background:var(--graphite-dark);color:var(--text-primary)}.plugin-button-secondary:hover{background:var(--graphite);border-color:var(--orange);transform:translateY(-2px);box-shadow:0 2px 8px #0000004d}.plugin-button-secondary:active{transform:translateY(0)}.plugin-grid{gap:var(--space-md);display:grid}.plugin-grid-2{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.plugin-grid-3{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.status-indicator{background:var(--graphite-dark);border:1px solid var(--border);border-radius:50%;width:8px;height:8px}.status-indicator.active{background:var(--green);box-shadow:0 0 8px var(--green-glow);animation:2s ease-in-out infinite pulse-indicator}.plugin-empty-state{justify-content:center;align-items:center;gap:var(--space-md);height:100%;color:var(--text-secondary);text-align:center;padding:var(--space-xl);flex-direction:column;display:flex}.plugin-empty-icon{opacity:.3;font-size:64px}.plugin-empty-title{color:var(--text-primary);font-size:18px;font-weight:700}.plugin-empty-text{max-width:400px;font-size:13px;line-height:1.6}@media (width<=768px){.plugin-container{padding:var(--space-md)}.plugin-section{padding:var(--space-lg)}.plugin-grid-2,.plugin-grid-3{grid-template-columns:1fr}}.quotes-plugin{height:100%;padding:var(--space-lg);gap:var(--space-lg);background:linear-gradient(135deg,#1a1a2e 0%,#2d1b2e 100%);flex-direction:column;display:flex;overflow:hidden}.quotes-empty{justify-content:center;align-items:center;gap:var(--space-md);height:100%;color:var(--text-secondary);flex-direction:column;display:flex}.empty-icon{opacity:.3;font-size:64px}.empty-title{color:var(--text-primary);font-size:18px;font-weight:700}.empty-text{color:var(--text-secondary);font-size:13px}.quote-display{min-height:0;padding:var(--space-md);flex:1;justify-content:center;align-items:center;display:flex;position:relative;overflow:visible}.quote-card{justify-content:center;align-items:center;gap:var(--space-lg);text-align:center;width:100%;max-width:700px;padding:var(--space-xl);background:var(--bg-secondary);border:2px solid var(--border);border-radius:var(--radius-lg);flex-direction:column;min-height:fit-content;display:flex;box-shadow:0 8px 32px #0006}.quote-icon{color:var(--orange);opacity:.3;flex-shrink:0;font-size:48px;line-height:1}.quote-text{color:var(--text-primary);word-wrap:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;margin:0;font-size:20px;font-style:italic;font-weight:500;line-height:1.8;position:relative}.quote-author{color:var(--orange);letter-spacing:.5px;margin-top:var(--space-sm);flex-shrink:0;font-size:14px;font-weight:600}.quote-controls{justify-content:space-between;align-items:center;gap:var(--space-lg);padding:var(--space-md);background:var(--bg-secondary);border:2px solid var(--border);border-radius:var(--radius-md);display:flex}.quote-nav-btn{background:var(--graphite-dark);border:2px solid var(--border);width:44px;height:44px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);border-radius:50%;justify-content:center;align-items:center;display:flex}.quote-nav-btn:hover{background:var(--graphite);border-color:var(--orange);color:var(--orange);transform:scale(1.05)}.quote-nav-btn:active{transform:scale(.95)}.quote-info{align-items:center;gap:var(--space-sm);flex-direction:column;display:flex}.quote-counter{color:var(--text-tertiary);letter-spacing:1px;font-family:monospace;font-size:12px;font-weight:600}.quote-random-btn{align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--graphite-dark);border:2px solid var(--border);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);font-size:12px;font-weight:600;display:flex}.quote-random-btn:hover{background:var(--orange);border-color:var(--orange);color:var(--bg-primary);box-shadow:0 0 15px var(--orange-glow);transform:translateY(-2px)}.quote-random-btn:active{transform:translateY(0)}.quote-random-btn svg{width:16px;height:16px}.quote-dots{justify-content:center;gap:var(--space-sm);padding:var(--space-md);display:flex}.quote-dot{background:var(--graphite-dark);border:2px solid var(--border);cursor:pointer;width:10px;height:10px;transition:all var(--transition-fast);border-radius:50%;padding:0}.quote-dot:hover{background:var(--graphite);border-color:var(--orange);transform:scale(1.2)}.quote-dot.active{background:var(--orange);border-color:var(--orange);box-shadow:0 0 10px var(--orange-glow);transform:scale(1.3)}@media (width<=768px){.quotes-plugin,.quote-card{padding:var(--space-lg)}.quote-text{font-size:18px}.quote-author{font-size:13px}.quote-nav-btn{width:40px;height:40px}.quote-random-btn{padding:6px 10px;font-size:11px}.quote-dot{width:8px;height:8px}}.app{background:var(--bg-primary);flex-direction:column;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0;overflow:hidden}.main-container{flex-direction:column;width:100%;height:100%;display:flex;overflow:hidden}.content-area{flex:1;min-height:0;position:relative;overflow:hidden}@media (width<=1024px){.app{font-size:14px}}@media (width<=768px){.app{font-size:13px}}.plugin-placeholder{height:100%;color:var(--text-secondary);text-align:center;padding:var(--space-xl);justify-content:center;align-items:center;font-family:monospace;font-size:16px;display:flex}@media (hover:hover){.app{cursor:default}button,a,.piano-note,.piano-key,.contact-item{cursor:pointer}}