@tailwind base;@tailwind components;@tailwind utilities;@font-face{font-family:TurnKey;src:url(/assets/Fontspring-DEMO-turnkeysoft-bolditalic-CVpqAOYf.otf);font-weight:400 900;font-style:normal}:root{--bg-color: #030109;--bg-secondary: #0a0a0f;--bg-tertiary: #111118;--accent: #007BFF;--accent-hover: #3395FF;--accent-glow: rgba(0, 123, 255, .4);--accent-dim: rgba(0, 123, 255, .12);--accent-soft: rgba(0, 123, 255, .06);--text-primary: #ffffff;--text-secondary: #a0a0a0;--text-muted: #475569;--border-subtle: rgba(255, 255, 255, .05);--glass-bg: rgba(255, 255, 255, .03);--glass-border: rgba(255, 255, 255, .06);--font-brand: "TurnKey", "Bebas Neue", "Anton", "Oswald", "Impact", "Arial Black", sans-serif;--font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-tech: "Space Mono", "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace;--ease-out-expo: cubic-bezier(.16, 1, .3, 1);--ease-smooth: cubic-bezier(.4, 0, .2, 1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;background-color:var(--bg-color);-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}body{background-color:var(--bg-color);color:var(--text-primary);font-family:var(--font-body);font-weight:400;font-size:16px;overflow-x:hidden;line-height:1.6;text-rendering:optimizeLegibility;min-height:100vh;font-display:swap}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--accent-dim);border-radius:2px}::-webkit-scrollbar-thumb:hover{background:var(--accent);box-shadow:0 0 15px var(--accent-glow)}*{scrollbar-width:thin;scrollbar-color:var(--accent-dim) transparent}::selection{background:var(--accent-dim);color:var(--text-primary)}:focus-visible{outline:1px solid var(--accent);outline-offset:2px}.panel{width:100%;max-width:1400px;margin:0 auto;padding:0 clamp(1rem,5vw,3rem)}.section-header{margin-bottom:clamp(2rem,6vw,5rem);text-align:center;position:relative;display:flex;flex-direction:column;align-items:center}.section-header:before{content:"";position:absolute;top:-25px;left:50%;transform:translate(-50%);width:1px;height:30px;background:linear-gradient(180deg,transparent,var(--accent),transparent);opacity:.4}.section-title{font-family:var(--font-brand);font-size:clamp(1.75rem,5vw,4rem);font-weight:400;letter-spacing:clamp(.02em,.05vw,.1em);line-height:1.1;margin-bottom:1rem;text-transform:uppercase;color:var(--text-primary);position:relative;text-shadow:0 0 40px rgba(0,123,255,.15);overflow-wrap:break-word;word-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;text-rendering:geometricPrecision;-webkit-font-feature-settings:"kern" 1;font-feature-settings:"kern" 1}@supports (font-style: italic){.section-title{font-style:italic;font-weight:700;letter-spacing:-.02em}}.section-title-long{font-size:clamp(1.25rem,4vw,2.5rem);letter-spacing:clamp(.02em,.05vw,.1em);line-height:1.2}.title-separator{color:var(--accent);margin:0 .3em;text-shadow:0 0 10px var(--accent-glow)}.section-meta{font-family:var(--font-tech);color:var(--accent);font-size:clamp(.6rem,1.2vw,.75rem);letter-spacing:clamp(.2em,.5vw,.4em);text-transform:uppercase;display:block;margin-bottom:1rem;font-weight:500;opacity:.9;text-shadow:0 0 8px var(--accent-glow)}.section-desc{font-family:var(--font-body);max-width:min(650px,90vw);margin-top:1.5rem;color:var(--text-secondary);font-size:clamp(.875rem,1.5vw,1.05rem);line-height:1.7;font-weight:400;letter-spacing:.01em;padding:0 1rem}.rage-logo-text{font-family:var(--font-brand);font-size:clamp(2.5rem,10vw,8rem);font-weight:400;font-style:normal;letter-spacing:.02em;line-height:.9;text-transform:uppercase;background:linear-gradient(165deg,#fff,silver,gray);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 40px var(--accent-glow));position:relative;display:inline-block;transform:skew(-8deg);transition:filter .4s var(--ease-out-expo);max-width:100%;overflow-wrap:break-word;text-rendering:geometricPrecision;-webkit-font-feature-settings:"kern" 1;font-feature-settings:"kern" 1;font-display:swap}@supports (font-family: "TurnKey"){.rage-logo-text{font-weight:700;font-style:italic;letter-spacing:-.03em;text-transform:none;transform:skew(-8deg)}}@supports not (-webkit-background-clip: text){.rage-logo-text{color:#fff;-webkit-text-fill-color:#ffffff;background:none}}@supports not (background-clip: text){.rage-logo-text{color:#fff;background:none}}.rage-logo-text:hover{filter:drop-shadow(0 0 60px var(--accent-glow))}.rage-logo-text:after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;height:100%;background:linear-gradient(180deg,transparent 0%,var(--accent) 150%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:blur(10px);opacity:.25;z-index:-1;transform:translateY(4px);pointer-events:none}.logo-tagline{font-family:var(--font-tech);font-size:clamp(.6rem,1.5vw,.75rem);letter-spacing:clamp(.3em,.5vw,.5em);color:var(--text-muted);text-transform:uppercase;margin-top:1rem;opacity:.6}.marquee{overflow:hidden;white-space:nowrap;position:relative;mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent)}.marquee-content{display:inline-flex;gap:clamp(2rem,5vw,5rem);padding-left:100%;animation:marquee 35s linear infinite;font-family:var(--font-tech);font-weight:400;letter-spacing:clamp(.1em,.3vw,.3em);font-size:clamp(.65rem,1.2vw,.8rem);color:var(--text-muted);text-transform:uppercase;will-change:transform}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(-100%)}}.marquee:hover .marquee-content{animation-play-state:paused}.ui-card{background:var(--glass-bg);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border:1px solid var(--glass-border);border-radius:16px;transition:all .5s var(--ease-out-expo);position:relative;overflow:hidden}.ui-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,.03) 50%,transparent 60%);opacity:0;transition:opacity .5s ease}.ui-card:hover{background:#ffffff0a;border-color:#007bff40;box-shadow:0 20px 50px #0006,0 0 40px #007bff14;transform:translateY(-4px)}.ui-card:hover:before{opacity:1}.perspective-3000{perspective:3000px}.transform-style-3d{transform-style:preserve-3d}.hardware-body{background:linear-gradient(145deg,#0c0c12,#15151c,#0c0c12);box-shadow:0 30px 80px #0009,0 0 0 1px #007bff14,inset 0 1px #ffffff08;border-radius:32px;position:relative;border:1px solid rgba(0,123,255,.1);transition:all .6s var(--ease-out-expo)}.hardware-body:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:32px;padding:1px;background:linear-gradient(135deg,rgba(0,123,255,.12),transparent 40%,transparent 60%,rgba(0,123,255,.08));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.floating-piano{animation:float-piano 12s ease-in-out infinite;transform-origin:center center}@keyframes float-piano{0%,to{transform:translateY(0) rotateX(8deg) rotateY(0)}25%{transform:translateY(-12px) rotateX(6deg) rotateY(3deg)}50%{transform:translateY(-24px) rotateX(5deg) rotateY(0)}75%{transform:translateY(-12px) rotateX(6deg) rotateY(-3deg)}}.keys-container{background:linear-gradient(180deg,#13131a,#0c0c12);box-shadow:inset 0 2px 10px #00000080,0 2px 10px #0000004d;border:1px solid rgba(255,255,255,.03);border-radius:20px;padding:clamp(.75rem,2vw,1.25rem);position:relative}.keys-container:after{content:"";position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(0,123,255,.15),transparent)}.white-key{background:linear-gradient(180deg,#f0f0f0,#d8d8d8 90%,#c8c8c8);box-shadow:0 2px 4px #0003,0 4px 8px #00000026,inset 0 -1px 2px #00000014,inset 0 1px 2px #fffc;border:none;border-bottom:2px solid rgba(0,0,0,.12);border-radius:0 0 4px 4px;transition:all .1s ease}.white-key:hover{background:linear-gradient(180deg,#f5f5f5,#e0e0e0);transform:translateY(-1px);box-shadow:0 4px 8px #0003,0 0 20px #007bff1a,inset 0 -1px 2px #0000000d,inset 0 1px 2px #ffffffe6}.white-key:active{transform:translateY(2px) rotateX(-2deg);box-shadow:0 1px 2px #0000004d,inset 0 2px 4px #0000001f}.black-key{background:linear-gradient(180deg,#2d2d3a,#1a1a22);box-shadow:0 4px 8px #0006,0 8px 16px #0000004d,inset 0 1px 1px #ffffff0f,inset 0 -2px 4px #00000080;border:1px solid rgba(0,123,255,.12);border-radius:0 0 3px 3px;transition:all .1s ease}.black-key:hover{background:linear-gradient(180deg,#353545,#22222c);border-color:#007bff40;box-shadow:0 6px 12px #00000080,0 0 20px #007bff1f,inset 0 1px 1px #ffffff14,inset 0 -2px 4px #0009}.black-key:active{transform:translateY(3px) rotateX(-3deg);box-shadow:0 2px 4px #0006,inset 0 3px 6px #0009}.nav-label{writing-mode:vertical-rl;text-orientation:mixed;font-family:var(--font-brand);font-size:clamp(.65rem,1.5vw,.75rem);font-weight:400;letter-spacing:clamp(.1em,.3vw,.2em);text-transform:uppercase;color:var(--text-muted);transition:all .4s var(--ease-out-expo);padding:clamp(.5rem,2vw,1rem) 0;position:relative}.nav-label:before{content:"";position:absolute;left:50%;top:0;transform:translate(-50%) scaleY(0);width:1px;height:100%;background:var(--accent);opacity:.4;transition:transform .4s var(--ease-out-expo);transform-origin:top}.nav-label:hover{color:var(--accent);letter-spacing:clamp(.15em,.4vw,.25em);transform:scale(1.05)}.nav-label:hover:before{transform:translate(-50%) scaleY(1)}.nav-label.active{color:var(--accent)}.nav-label.active:before{transform:translate(-50%) scaleY(1);opacity:.6;box-shadow:0 0 10px var(--accent-glow)}.led-indicator{width:clamp(4px,1vw,6px);height:clamp(4px,1vw,6px);border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent),0 0 16px var(--accent-glow);animation:pulse-led 3s ease-in-out infinite}@keyframes pulse-led{0%,to{opacity:.8;transform:scale(1);box-shadow:0 0 8px var(--accent),0 0 16px var(--accent-glow)}50%{opacity:.4;transform:scale(.85);box-shadow:0 0 12px var(--accent),0 0 24px var(--accent-glow)}}.watermark{font-family:var(--font-tech);font-size:clamp(.6rem,1.2vw,.65rem);font-weight:400;letter-spacing:clamp(.2em,.4vw,.3em);color:var(--text-muted);text-transform:uppercase;opacity:.15}.reflection{position:absolute;bottom:-20%;left:5%;right:5%;height:25%;background:linear-gradient(180deg,rgba(0,123,255,.03) 0%,transparent 80%);filter:blur(40px);transform:scaleY(-1);opacity:.3;pointer-events:none}.dj-crossfader{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:2px;background:transparent;cursor:pointer;position:relative}.dj-crossfader::-webkit-slider-runnable-track{height:2px;border-radius:1px;background:linear-gradient(90deg,transparent 0%,var(--accent-dim) 20%,var(--accent) 50%,var(--accent-dim) 80%,transparent 100%);box-shadow:0 0 8px var(--accent-glow)}.dj-crossfader::-moz-range-track{height:2px;border-radius:1px;background:linear-gradient(90deg,transparent 0%,var(--accent-dim) 20%,var(--accent) 50%,var(--accent-dim) 80%,transparent 100%)}.dj-crossfader::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:clamp(16px,4vw,18px);height:clamp(16px,4vw,18px);border-radius:50%;background:radial-gradient(circle at 30% 30%,#2a2a35,var(--bg-color));border:2px solid var(--accent);margin-top:-8px;box-shadow:0 0 0 3px var(--bg-color),0 0 15px var(--accent-glow),0 4px 10px #0000004d;transition:all .2s var(--ease-out-expo)}.dj-crossfader::-moz-range-thumb{width:clamp(16px,4vw,18px);height:clamp(16px,4vw,18px);border-radius:50%;background:radial-gradient(circle at 30% 30%,#2a2a35,var(--bg-color));border:2px solid var(--accent);box-shadow:0 0 0 3px var(--bg-color),0 0 15px var(--accent-glow),0 4px 10px #0000004d;transition:all .2s var(--ease-out-expo)}.dj-crossfader::-webkit-slider-thumb:hover,.dj-crossfader::-moz-range-thumb:hover{transform:scale(1.15);border-color:var(--accent-hover);box-shadow:0 0 0 3px var(--bg-color),0 0 25px var(--accent-glow),0 6px 15px #0006}#interactive-midi{background:linear-gradient(145deg,var(--bg-secondary),var(--bg-color));border-radius:24px;border:1px solid var(--border-subtle);box-shadow:0 20px 60px #0006,inset 0 1px #ffffff08;position:relative;overflow:hidden}#interactive-midi:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.3}#interactive-midi canvas{border-radius:16px;filter:drop-shadow(0 0 30px rgba(0,123,255,.12))}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.shimmer-effect{background:linear-gradient(90deg,transparent 0%,rgba(0,123,255,.08) 50%,transparent 100%);background-size:200% 100%;animation:shimmer 8s infinite linear}.bg-grid{background-image:linear-gradient(rgba(0,123,255,.015) 1px,transparent 1px),linear-gradient(90deg,rgba(0,123,255,.015) 1px,transparent 1px);background-size:clamp(40px,8vw,80px) clamp(40px,8vw,80px);mask-image:radial-gradient(ellipse at center,black 30%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse at center,black 30%,transparent 80%)}.vignette{position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,.5) 100%);pointer-events:none;z-index:100}.noise{position:fixed;top:0;right:0;bottom:0;left:0;opacity:.025;pointer-events:none;z-index:99;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")}.text-gradient-animated{background:linear-gradient(90deg,var(--accent),#00d4ff,var(--accent));background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:gradient-shift 8s ease infinite}@keyframes gradient-shift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.font-brand{font-family:var(--font-brand)}.font-body{font-family:var(--font-body)}.font-tech{font-family:var(--font-tech)}main{display:flex;flex-direction:column;gap:clamp(3rem,8vw,8rem);padding-top:2rem;padding-bottom:4rem}main>section{position:relative;width:100%}main>section:not(:last-child):after{content:"";position:absolute;bottom:calc(clamp(3rem,8vw,8rem)/-2);left:50%;transform:translate(-50%);width:1px;height:clamp(20px,4vw,60px);background:linear-gradient(180deg,var(--accent-dim),transparent);opacity:.5}@media(max-width:1024px){.hardware-body{transform:scale(.95)}.section-title{letter-spacing:.05em}}@media(max-width:768px){.hardware-body{transform:scale(.85);transform-origin:center top;border-radius:24px}.hardware-body:before{border-radius:24px}.nav-label{font-size:.7rem;letter-spacing:.15em}.section-title{font-size:1.5rem;letter-spacing:.05em;line-height:1.2}.section-title-long{font-size:1.1rem;letter-spacing:.05em}.rage-logo-text{font-family:Bebas Neue,Anton,Oswald,Impact,sans-serif;font-size:clamp(2rem,12vw,4rem);letter-spacing:.05em;transform:skew(-3deg);line-height:1;font-weight:400;font-style:normal;text-transform:uppercase}.rage-logo-text{transform:skew(-2deg)}}@media(max-width:480px){.hardware-body{transform:scale(.75)}.rage-logo-text{font-size:clamp(1.75rem,10vw,2.5rem);letter-spacing:.08em;transform:skew(-2deg)}.section-title{font-size:1.25rem;letter-spacing:.05em}.section-meta{font-size:.55rem;letter-spacing:.25em}.panel{padding:0 .75rem}.logo-tagline{font-size:.55rem;letter-spacing:.3em}}@media(max-width:360px){.section-title{font-size:1.1rem;letter-spacing:.05em}.rage-logo-text{font-size:1.5rem;letter-spacing:.1em}}@supports (font-style: italic) and (font-weight: 700){.rage-logo-text,.section-title{font-weight:700;font-style:italic;letter-spacing:-.02em;text-transform:none}}@supports not (font-family: "TurnKey"){.rage-logo-text,.section-title{font-family:Bebas Neue,Anton,sans-serif;font-weight:400;font-style:normal;letter-spacing:.05em;text-transform:uppercase}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.marquee-content,.floating-piano{animation:none}.rage-logo-text{filter:none}}@supports (-webkit-touch-callout: none){.rage-logo-text,.section-title{-webkit-font-smoothing:antialiased;font-synthesis:none;text-rendering:optimizeLegibility}}@supports not (-webkit-touch-callout: none){.rage-logo-text,.section-title{text-rendering:optimizeLegibility;font-feature-settings:"kern" 1}}@media screen and (-webkit-min-device-pixel-ratio:0)and (min-resolution:.001dpcm){.rage-logo-text{font-family:Bebas Neue,Anton,sans-serif}}@media(prefers-color-scheme:light){:root{color-scheme:dark}}.fonts-loading{font-family:Impact,Arial Black,sans-serif;opacity:.9}.fonts-loaded{opacity:1;transition:opacity .3s ease}