@tailwind base;@tailwind components;@tailwind utilities;:root{--bg: #f0f0ee;--surface: rgba(255,255,254,.78);--surface-hover: rgba(255,255,254,.92);--text: #151515;--muted: #8d8d88;--border: rgba(20,20,18,.11);--gold: #c9a227;--gold-light: #e4ba42;--gold-bg: rgba(201,162,39,.12);--cobalt: #1a56c4;--cobalt-light: #4479dd;--cobalt-bg: rgba(26,86,196,.1);--vermilion: #d93025;--emerald: #1b8754;--purple: #6d28d9;--shadow-tactile: inset 0 1.5px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(0,0,0,.035), 0 1px 1px rgba(0,0,0,.09), 0 4px 7px rgba(0,0,0,.09), 0 9px 17px rgba(0,0,0,.035);--shadow-tactile-hover: inset 0 1.5px 0 #fff, inset 0 -1px 0 rgba(0,0,0,.03), 0 2px 2px rgba(0,0,0,.08), 0 6px 10px rgba(0,0,0,.1), 0 12px 20px rgba(0,0,0,.04);--shadow-tactile-press: inset 0 2px 4px rgba(0,0,0,.12), inset 0 -1px 0 #fff, 0 1px 1px rgba(0,0,0,.05)}@layer base{html{background:#eaeae8}body{color:var(--text);min-height:100vh;background:radial-gradient(circle at 50% -15%,#fff,#f8f8f6 22%,#f1f1ef 58%,#ebebea)}h1,h2,h3,h4,h5,h6{font-family:Plus Jakarta Sans,Battambang,sans-serif;letter-spacing:-.025em}button{-webkit-tap-highlight-color:transparent}*{box-sizing:border-box}}.tactile{position:relative;background:linear-gradient(180deg,#fff,#fdfdfc 42%,#f5f5f3);border:1px solid rgba(22,22,20,.14);box-shadow:var(--shadow-tactile);transition:transform .13s ease,box-shadow .13s ease,background .13s ease;cursor:pointer}.tactile:before{content:"";position:absolute;inset:1px 2px auto 2px;height:42%;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,#ffffffb8,#fff0)}.tactile:hover{transform:translateY(-1px);box-shadow:var(--shadow-tactile-hover)}.tactile:active,.tactile.pressed{transform:translateY(2px);background:linear-gradient(180deg,#f1f1ef,#f9f9f7);box-shadow:var(--shadow-tactile-press)}.tactile-cobalt{position:relative;background:linear-gradient(180deg,var(--cobalt-light) 0%,var(--cobalt) 100%);border:1px solid rgba(10,35,120,.25);color:#fff;box-shadow:inset 0 1px #ffffff47,inset 0 -1px #00001424,0 2px 2px #0000001f,0 6px 10px #1a56c438;transition:transform .13s ease,box-shadow .13s ease;cursor:pointer}.tactile-cobalt:before{content:"";position:absolute;inset:1px 2px auto 2px;height:40%;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.18),transparent)}.tactile-cobalt:hover{transform:translateY(-1px);box-shadow:inset 0 1px #ffffff47,inset 0 -1px #00001424,0 3px 4px #0000001c,0 8px 14px #1a56c442}.tactile-cobalt:active{transform:translateY(1px);box-shadow:inset 0 2px 4px #00000029,inset 0 -1px #ffffff1f,0 1px 1px #0000000f}.tactile-gold{position:relative;background:linear-gradient(180deg,#e4ba42,#c9a227);border:1px solid rgba(90,55,0,.18);color:#1a1200;box-shadow:inset 0 1px #ffffff52,inset 0 -1px #502d001f,0 2px 2px #0000001a,0 5px 9px #b482002e;transition:transform .13s ease,box-shadow .13s ease;cursor:pointer}.tactile-gold:before{content:"";position:absolute;inset:1px 2px auto 2px;height:42%;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.22),transparent)}.tactile-gold:hover{transform:translateY(-1px)}.tactile-gold:active{transform:translateY(1px);box-shadow:inset 0 2px 4px #00000024,0 1px #fff}.recessed{background:linear-gradient(180deg,#e9e9e7,#f4f4f2);border:1px solid rgba(20,20,18,.1);box-shadow:inset 0 2px 5px #0000001a,inset 0 -1px 1px #fffc,0 1px #ffffffe6}.flat-panel{background:#fffffec7;border:1px solid rgba(20,20,18,.09);box-shadow:0 1px #ffffffe6,0 2px 4px #0000000a,0 8px 16px #0000000a}.screen{background:linear-gradient(180deg,#e5e6e2,#eeeeed);border:1px solid rgba(25,25,22,.16);box-shadow:inset 0 2px 6px #00000021,inset 0 -1px #fffc}.hairline{border:1px solid rgba(20,20,18,.09)}.brand-card{background:#fffffec7;border:1px solid rgba(20,20,18,.09);box-shadow:0 1px #ffffffe6,0 2px 4px #0000000a,0 8px 16px #0000000a;transition:all .18s cubic-bezier(.16,1,.3,1)}.brand-card:hover{background:#fffffff2;transform:translateY(-1px);box-shadow:0 1px #ffffffe6,0 4px 8px #0000000f,0 14px 24px #0000000f}.led-green{background:#3ab85a;box-shadow:0 0 0 1px #00000014,0 0 8px #3ab85a73}.led-amber{background:#e8a018;box-shadow:0 0 0 1px #00000014,0 0 8px #e8a01873}.led-red{background:#d93025;box-shadow:0 0 0 1px #00000014,0 0 8px #d9302573}.toggle-track{background:#deded9;border:1px solid rgba(20,20,18,.12);box-shadow:inset 0 2px 4px #0000001c,inset 0 -1px #fffc;transition:background .18s ease}.toggle-track.on{background:linear-gradient(#5a7de8,#1a56c4)}.toggle-dot{background:linear-gradient(#fff,#f0f0ee);border:1px solid rgba(0,0,0,.12);box-shadow:0 2px 4px #00000038,inset 0 1px #fff;transition:left .18s ease}.label-caps{font-size:10px;font-weight:750;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.text-tiny{font-size:11px;color:var(--muted)}@keyframes fadeUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.animate-fade-up{animation:fadeUp .28s cubic-bezier(.16,1,.3,1) forwards}.nav-tab-active{background:linear-gradient(180deg,#f1f1ef,#f9f9f7);border:1px solid rgba(22,22,20,.14);box-shadow:var(--shadow-tactile-press);color:var(--cobalt);font-weight:700}.nav-tab-inactive{border:1px solid transparent;color:var(--muted);transition:all .13s ease}.nav-tab-inactive:hover{background:#ffffff8c;border-color:#14141217;color:var(--text)}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#1414122e;border-radius:9999px}::-webkit-scrollbar-thumb:hover{background:#1a56c461}.scrollbar-none{scrollbar-width:none;-ms-overflow-style:none}.scrollbar-none::-webkit-scrollbar{display:none}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:1rem;background:#0a0a088c;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.bg-dark-grey-gradient{background:linear-gradient(135deg,#fffffee6,#f5f5f3e6,#ebebe9e6)}.perspective-1000{perspective:1000px}.transform-style-3d{transform-style:preserve-3d}.backface-hidden{backface-visibility:hidden;-webkit-backface-visibility:hidden}.rotate-y-180{transform:rotateY(180deg)}.hover\:bg-brand-surfaceHover:hover{background:var(--surface-hover)}.knob{position:relative;border-radius:999px;background:radial-gradient(circle at 40% 30%,#fff 0,#f8f8f6 38%,#e4e4e2);border:1px solid rgba(20,20,18,.15);box-shadow:inset 0 1px 1px #fff,0 2px 2px #0000001f,0 6px 8px #00000014}.knob:after{content:"";position:absolute;width:2px;height:23%;left:50%;top:10%;border-radius:2px;background:#333;transform:translate(-50%)}.wavebar{width:3px;border-radius:5px;background:#777;opacity:.62}select,input[type=range]{background:transparent}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:linear-gradient(#fff,#ededeb);border:1px solid rgba(0,0,0,.16);box-shadow:0 2px 3px #0000002e,0 4px 6px #00000014,inset 0 1px #fff;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{background:#dededb;height:4px;border-radius:4px;box-shadow:inset 0 1px 3px #0000002b,0 1px #fff}