:root,[data-theme=light]{--bg: #EFEAE0;--bg-tile: #F8F4EA;--bg-shade: #E2DCCF;--panel: #F8F4EA;--plastic: #FAF8F4;--plastic-edge: #C9C4BA;--plastic-shade: #A8A39A;--ink: #0A0A0A;--ink-soft: #4A4A47;--ink-faint: #8E8C86;--ink-ghost: rgba(10, 10, 10, .1);--orange: #FF6B1F;--orange-glow: rgba(255, 107, 31, .4);--yellow: #F5C842;--green: #4A7C2A;--red: #C73E2C;--blue: #2D6E78;--dial-bezel-inner: #E5E0D6;--dial-bezel-mid: #C2BCAF;--dial-bezel-outer: #8E8A82;--dial-body: #ECE4D2;--dial-body-light: #F5EFE0;--dial-body-shade: #C9C0AE;--dial-bar: #E8E0CD;--dial-bar-light: #F2EBD9;--dial-bar-shade: #C5BEA8;--dial-dot: #C73E2C;--tile-highlight: rgba(255, 255, 255, .85);--tile-shadow: rgba(80, 75, 65, .1);--tile-shadow-strong: rgba(80, 75, 65, .18)}[data-theme=dark]{--bg: #1A1815;--bg-tile: #232120;--bg-shade: #2A2826;--panel: #232120;--plastic: #2D2B28;--plastic-edge: #3D3B38;--plastic-shade: #4A4845;--ink: #E8E5E0;--ink-soft: #B0ADA8;--ink-faint: #6E6B66;--ink-ghost: rgba(232, 229, 224, .1);--orange: #FF8845;--orange-glow: rgba(255, 136, 69, .5);--yellow: #F5C842;--green: #6BA847;--red: #E04A3C;--blue: #58B0BC;--dial-bezel-inner: #2A2826;--dial-bezel-mid: #4A4845;--dial-bezel-outer: #6E6B66;--dial-body: #1F1D1B;--dial-body-light: #2A2826;--dial-body-shade: #14130F;--dial-bar: #2A2826;--dial-bar-light: #34322F;--dial-bar-shade: #1F1D1B;--dial-dot: #E04A3C;--tile-highlight: rgba(255, 255, 255, .05);--tile-shadow: rgba(0, 0, 0, .45);--tile-shadow-strong: rgba(0, 0, 0, .6)}:root{--shadow-depth: 1;--stroke-alpha: .06}*{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body{margin:0;padding:0;width:100%;height:100dvh;overflow:hidden;background:var(--bg);color:var(--ink);font-family:Inter Tight,Helvetica Neue,sans-serif;overscroll-behavior:none;-webkit-text-size-adjust:100%;transition:background 1.1s cubic-bezier(.4,0,.2,1),color .6s ease}::selection{background:var(--orange);color:var(--bg)}#root{height:100dvh;display:flex}.page{position:relative;flex:1;display:flex;isolation:isolate}.page:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;background:var(--signal-color, transparent);opacity:0;transition:opacity 1.1s cubic-bezier(.4,0,.2,1),background .4s ease}.page[data-signal=orange]{--signal-color: rgba(255, 107, 31, .16)}.page[data-signal=yellow]{--signal-color: rgba(245, 200, 66, .2)}.page[data-signal=green]{--signal-color: rgba(74, 124, 42, .18)}.page[data-signal=red]{--signal-color: rgba(199, 62, 44, .16)}.page[data-signal=blue]{--signal-color: rgba(45, 110, 120, .18)}.page:not([data-signal=none]):before{opacity:1;transition-duration:.18s}.page[data-signal=none]:before{opacity:0}[data-theme=dark] .page[data-signal=orange]{--signal-color: rgba(255, 136, 69, .18)}[data-theme=dark] .page[data-signal=yellow]{--signal-color: rgba(245, 200, 66, .16)}[data-theme=dark] .page[data-signal=green]{--signal-color: rgba(107, 168, 71, .18)}[data-theme=dark] .page[data-signal=red]{--signal-color: rgba(224, 74, 60, .18)}[data-theme=dark] .page[data-signal=blue]{--signal-color: rgba(88, 176, 188, .16)}.grid{position:relative;z-index:1;flex:1;display:grid;width:100vw;height:100dvh;padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));gap:14px;grid-template-columns:1.3fr 1.3fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr;grid-template-areas:"rotary  rotary  sliders  slide   slide" "rotary  rotary  sliders  twin    twin" "dial    logo    sliders  push    mini"}.tile-rotary{grid-area:rotary}.tile-sliders{grid-area:sliders}.tile-slide{grid-area:slide}.tile-twin{grid-area:twin}.tile-dial{grid-area:dial}.tile-logo{grid-area:logo}.tile-push{grid-area:push}.tile-mini{grid-area:mini}button{font-family:inherit;border:0;background:none;padding:0;cursor:pointer;color:inherit}button:focus-visible,[role=slider]:focus-visible,[role=switch]:focus-visible,[role=button]:focus-visible{outline:2px solid var(--orange);outline-offset:4px;border-radius:6px}.tile{position:relative;display:grid;place-items:center;border-radius:22px;background:var(--bg-tile);overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:manipulation;text-decoration:none;color:inherit;isolation:isolate;box-shadow:inset 0 1px 0 var(--tile-highlight),inset 0 0 0 1px rgba(80,75,65,var(--stroke-alpha)),0 1px 2px var(--tile-shadow),0 8px 24px var(--tile-shadow);transition:background .4s ease,transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s ease}@media (hover: hover){.tile:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 var(--tile-highlight),inset 0 0 0 1px rgba(80,75,65,calc(var(--stroke-alpha) + .04)),0 2px 4px var(--tile-shadow),0 14px 32px var(--tile-shadow-strong)}}.tile[data-pressed=true]{transform:scale(.985);box-shadow:inset 0 1px 0 var(--tile-highlight),inset 0 0 0 1px rgba(80,75,65,calc(var(--stroke-alpha) + .06)),0 1px 2px var(--tile-shadow),0 4px 12px var(--tile-shadow);transition-duration:.1s}.tile__ripple{position:absolute;pointer-events:none;z-index:0;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%),var(--orange-glow) 0%,transparent 40%);opacity:0;transition:opacity .9s ease}.tile[data-pressed=true] .tile__ripple{opacity:.6;transition-duration:.05s}.tile-logo{cursor:pointer;display:grid;place-items:center}.tile-logo__img{width:clamp(60px,70%,220px);height:auto;opacity:.75;transition:opacity .4s ease,transform .4s ease,filter .4s ease}@media (hover: hover){.tile-logo:hover .tile-logo__img{opacity:1;transform:scale(1.04)}}[data-theme=dark] .tile-logo__img{filter:invert(1) hue-rotate(180deg) saturate(.6) brightness(.95)}.tile-dial{cursor:pointer}.tile-dial .dial{display:grid;place-items:center}.tile-dial .dial svg{width:clamp(80px,60%,200px);height:auto}@media (max-width: 760px){html,body{overflow-y:auto;height:auto;min-height:100dvh}#root{min-height:100dvh;height:auto}.grid{height:auto;min-height:100dvh;grid-template-columns:1fr 1fr;grid-template-rows:repeat(7,minmax(0,auto));grid-template-areas:"rotary   rotary" "sliders  sliders" "slide    slide" "twin     twin" "dial     push" "mini     mini" "logo     logo";gap:12px}.tile-rotary{aspect-ratio:1.4 / 1}.tile-sliders{aspect-ratio:1.6 / 1;min-height:360px}.tile-slide,.tile-twin{aspect-ratio:3 / 1.1}.tile-dial,.tile-push{aspect-ratio:1.2 / 1}.tile-mini{aspect-ratio:3.4 / 1}.tile-logo{aspect-ratio:4 / 1}}@media (max-width: 380px){.grid{padding:10px;gap:10px}.tile{border-radius:18px}}@keyframes rise{0%{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}.tile{animation:rise .7s cubic-bezier(.16,1,.3,1) both}.tile-rotary{animation-delay:.05s}.tile-sliders{animation-delay:.1s}.tile-slide{animation-delay:.15s}.tile-twin{animation-delay:.2s}.tile-dial{animation-delay:.25s}.tile-logo{animation-delay:.3s}.tile-push{animation-delay:.35s}.tile-mini{animation-delay:.4s}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}:root{--neu-light: rgba(255,255,255,.95);--neu-shade: rgba(80, 75, 65, .18);--neu-shade-strong: rgba(80, 75, 65, .28)}[data-theme=dark]{--neu-light: rgba(255,255,255,.04);--neu-shade: rgba(0, 0, 0, .55);--neu-shade-strong: rgba(0, 0, 0, .7)}.ctrl{position:relative;display:grid;place-items:center;user-select:none;-webkit-user-select:none;touch-action:none}.slide-toggle{width:60%;max-width:280px;aspect-ratio:2.4 / 1;border-radius:999px;background:var(--bg-shade);box-shadow:inset calc(5px * var(--shadow-depth)) calc(5px * var(--shadow-depth)) calc(12px * var(--shadow-depth)) var(--neu-shade),inset calc(-5px * var(--shadow-depth)) calc(-5px * var(--shadow-depth)) calc(12px * var(--shadow-depth)) var(--neu-light);cursor:pointer;transition:background .4s,box-shadow .4s;position:relative}.slide-toggle__knob{position:absolute;top:6%;left:3%;width:42%;height:88%;border-radius:999px;background:linear-gradient(145deg,var(--plastic) 0%,var(--plastic-edge) 100%);box-shadow:calc(-6px * var(--shadow-depth)) calc(-6px * var(--shadow-depth)) calc(14px * var(--shadow-depth)) var(--neu-light),calc(8px * var(--shadow-depth)) calc(8px * var(--shadow-depth)) calc(20px * var(--shadow-depth)) var(--neu-shade);transition:left .45s cubic-bezier(.34,1.56,.64,1),box-shadow .4s,background .4s;display:grid;place-items:center}.slide-toggle[data-on=true] .slide-toggle__knob{left:55%}.slide-toggle__pip{width:26%;aspect-ratio:1;border-radius:50%;background:var(--bg-shade);box-shadow:inset 2px 2px 5px var(--neu-shade),inset -2px -2px 5px var(--neu-light);transition:background .3s,box-shadow .3s}.slide-toggle[data-on=true] .slide-toggle__pip{background:var(--orange);box-shadow:inset 1px 1px 2px #00000040,0 0 12px var(--orange-glow)}.twin{width:70%;max-width:320px;aspect-ratio:3 / 1.1;border-radius:999px;background:var(--bg-shade);box-shadow:inset calc(5px * var(--shadow-depth)) calc(5px * var(--shadow-depth)) calc(12px * var(--shadow-depth)) var(--neu-shade),inset calc(-5px * var(--shadow-depth)) calc(-5px * var(--shadow-depth)) calc(12px * var(--shadow-depth)) var(--neu-light);display:grid;grid-template-columns:1fr 1fr auto;align-items:center;padding:6%;gap:4%;transition:background .4s,box-shadow .4s}.twin__btn{aspect-ratio:1;height:100%;border-radius:50%;background:linear-gradient(145deg,var(--plastic) 0%,var(--plastic-edge) 100%);box-shadow:-3px -3px 8px var(--neu-light),4px 4px 10px var(--neu-shade);cursor:pointer;transition:box-shadow .18s,transform .18s,background .4s;position:relative}.twin__btn:active{box-shadow:inset 4px 4px 8px var(--neu-shade-strong),inset -2px -2px 6px var(--neu-light);transform:translateY(1px)}.twin__btn[data-active=true]{box-shadow:inset 2px 2px 5px var(--neu-shade),inset -1px -1px 3px var(--neu-light),0 0 0 1.5px var(--orange)}.twin__indicator{width:14%;aspect-ratio:1;border-radius:50%;background:var(--bg-shade);box-shadow:inset 2px 2px 5px var(--neu-shade),inset -2px -2px 5px var(--neu-light);margin-right:6%;transition:background .3s,box-shadow .3s}.twin[data-on=true] .twin__indicator{background:var(--orange);box-shadow:inset 1px 1px 2px #00000040,0 0 10px var(--orange-glow)}.rotary{width:min(70%,60vh);min-width:140px;max-width:360px;aspect-ratio:1;position:relative;display:grid;place-items:center}.rotary__ring{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:var(--panel);box-shadow:-3px -3px 8px var(--neu-light),4px 4px 12px var(--neu-shade);transition:background .4s,box-shadow .4s}.rotary__ticks{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.rotary__tick{position:absolute;top:0;left:50%;width:0;height:50%;transform-origin:bottom center}.rotary__tick:before{content:"";position:absolute;top:4%;left:50%;transform:translate(-50%);width:3px;height:3px;border-radius:50%;background:var(--ink);opacity:.7}.rotary__tick--major:before{width:2px;height:9px;border-radius:1px;opacity:.55}.rotary__knob{position:absolute;top:18%;right:18%;bottom:18%;left:18%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#1c1a17,#0a0a0a,#000);cursor:grab;box-shadow:inset 0 2px 4px #ffffff1a,inset 0 -3px 6px #00000080,0 calc(4px * var(--shadow-depth)) calc(14px * var(--shadow-depth)) rgba(0,0,0,calc(.3 * var(--shadow-depth))),0 1px 2px #00000040;transition:transform .05s linear;display:grid;place-items:start center;padding-top:8%}.rotary__knob:active{cursor:grabbing}.rotary__indicator{width:4px;height:32%;background:var(--orange);border-radius:2px;box-shadow:0 0 6px var(--orange-glow)}.sliders{display:flex;gap:clamp(20px,4vw,56px);height:92%;align-items:stretch;justify-content:center}.slider{position:relative;width:32px;height:100%;display:flex;flex-direction:column;align-items:center;cursor:pointer}.slider__top-pip{width:7px;height:7px;border-radius:50%;background:var(--bg-shade);box-shadow:inset 2px 2px 5px var(--neu-shade),inset -2px -2px 5px var(--neu-light);margin-bottom:10px;flex-shrink:0}.slider__track{position:relative;flex:1;width:5px;background:var(--bg-shade);border-radius:3px;box-shadow:inset 1px 1px 2px var(--neu-shade),inset -1px -1px 2px var(--neu-light)}.slider__handle{position:absolute;left:50%;width:34px;height:52px;border-radius:16px;background:linear-gradient(145deg,var(--plastic) 0%,var(--plastic-edge) 100%);box-shadow:-3px -3px 6px var(--neu-light),3px 3px 10px var(--neu-shade),inset 0 1px 1px #ffffffb3;transform:translate(-50%,-50%);cursor:grab;transition:box-shadow .18s,background .4s}.slider__handle:before{content:"";position:absolute;top:50%;left:18%;right:18%;height:1px;background:#504b4138;transform:translateY(-50%);box-shadow:0 -3px #504b4129,0 3px #504b4129}.slider__handle:active{cursor:grabbing}.push{position:relative;width:38%;max-width:130px;aspect-ratio:1;display:grid;place-items:center}.push__pip{position:absolute;top:-22%;width:8px;height:8px;border-radius:50%;background:var(--bg-shade);box-shadow:inset 2px 2px 5px var(--neu-shade),inset -2px -2px 5px var(--neu-light);transition:background .18s,box-shadow .18s}.push[data-pressed=true] .push__pip{background:var(--orange);box-shadow:inset 1px 1px 1px #00000040,0 0 8px var(--orange-glow)}.push__well{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:radial-gradient(circle at 35% 35%,#0e0e0e,#000);box-shadow:inset 0 4px 10px #0009,0 1px 0 var(--neu-light)}.push__cap{position:absolute;top:6%;right:6%;bottom:6%;left:6%;border-radius:50%;background:linear-gradient(160deg,var(--plastic) 0%,var(--plastic-edge) 65%,var(--plastic-shade) 100%);box-shadow:inset 0 2px 2px #fffffff2,inset 0 -3px 4px var(--neu-shade),0 calc(8px * var(--shadow-depth)) calc(14px * var(--shadow-depth)) rgba(0,0,0,calc(.18 * var(--shadow-depth)));cursor:pointer;transition:transform .12s,box-shadow .12s,background .4s}.push__cap:active,.push[data-pressed=true] .push__cap{transform:translateY(4px) scale(.97);box-shadow:inset 0 2px 2px #fffffff2,inset 0 -2px 3px var(--neu-shade),0 2px 4px #00000040}.mini{display:flex;align-items:center;gap:6%;width:70%;max-width:300px}.mini__pill{flex:1;aspect-ratio:2.6 / 1;border-radius:999px;background:var(--bg-shade);box-shadow:inset calc(5px * var(--shadow-depth)) calc(5px * var(--shadow-depth)) calc(12px * var(--shadow-depth)) var(--neu-shade),inset calc(-5px * var(--shadow-depth)) calc(-5px * var(--shadow-depth)) calc(12px * var(--shadow-depth)) var(--neu-light);cursor:pointer;position:relative;transition:background .4s,box-shadow .4s}.mini__knob{position:absolute;top:6%;left:4%;width:44%;height:88%;border-radius:999px;background:linear-gradient(145deg,var(--plastic) 0%,var(--plastic-edge) 100%);box-shadow:-6px -6px 14px var(--neu-light),8px 8px 20px var(--neu-shade);transition:left .45s cubic-bezier(.34,1.56,.64,1),background .4s,box-shadow .4s}.mini__pill[data-on=true] .mini__knob{left:52%}.mini__indicator{width:14px;height:14px;border-radius:50%;background:var(--bg-shade);box-shadow:inset 2px 2px 5px var(--neu-shade),inset -2px -2px 5px var(--neu-light);flex-shrink:0;transition:background .3s,box-shadow .3s}.mini[data-on=true] .mini__indicator{background:var(--orange);box-shadow:inset 1px 1px 1px #00000040,0 0 8px var(--orange-glow)}