:root{--font:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--backdrop-1:#f1f0ea;--backdrop-2:#cfccc3;--hint-ink:#6b685f;--body-hi:#e3ead6;--body-mid:#cfdbbf;--body-lo:#b9c9a6;--body-edge:#8fa47c;--body-ink:#55684a;--bezel-hi:#35514a;--bezel-lo:#243c36;--bezel-ink:#cfe0c4;--window:#474e43;--window-off:#3a4036;--label-ink:#2e4a2a;--brand-ink:#24502a;--brand-ink-2:#4f7a3e;--leaf:#e08a2c;--leaf-vein:#ffd79a;--dpad:#2c332c;--dpad-hi:#3e483e;--ab:#d9792a;--ab-hi:#f2a058;--ab-lo:#9c4f12;--pill:#6f7f68;--pill-lo:#4f5d4a;--led-off:#5b5a3c;--led-on:#ffc24a;--led-glow:#ffba3ca6;--grille:#8f9a80;--focus:#2f6bff;--panel-bg:#fbfaf6;--panel-ink:#23242a;--panel-line:#dcd8cc;--toast-bg:#1e1f26eb;--toast-ink:#f4f3ee}@media (prefers-color-scheme:dark){:root{--backdrop-1:#2c2d32;--backdrop-2:#18191c;--hint-ink:#a5a39c}}*,:before,:after{box-sizing:border-box}html,body{overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;height:100%;margin:0;overflow:hidden}body{height:100dvh;font-family:var(--font);background:radial-gradient(circle at 50% 30%, var(--backdrop-1), var(--backdrop-2) 75%);background-color:var(--backdrop-2);color:var(--hint-ink);position:fixed;inset:0}#root{height:100%}.app{height:100%;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);flex-direction:column;justify-content:center;align-items:center;gap:12px;display:flex}.console{aspect-ratio:.6;touch-action:none;width:min(60dvh - 38.4px,540px,96vw);font-family:var(--font);--screen-w:66cqw;--dpad-size:34cqw;--ab-size:15cqw;--pill-w:11cqw;--pill-h:3cqw;--label:2.6cqw;--tool:max(40px, 8cqw);flex:none;position:relative;container-type:size}.console__body{background:linear-gradient(90deg, #ffffff59, transparent 8%, transparent 92%, #0000000f), linear-gradient(170deg, var(--body-hi), var(--body-mid) 45%, var(--body-lo));box-shadow:inset 0 .5cqw .4cqw #ffffffb3, inset 0 -.8cqw 1.2cqw #0000001f, 0 0 0 1px var(--body-edge), 0 1.2cqw 2cqw #0000002e, 0 4cqw 8cqw #00000038;border-radius:3cqw 3cqw 17cqw;grid-template:"top top""bezel bezel""brand brand""dpad action"1fr"meta meta"/1fr 1fr;padding:0 6cqw 6cqw;display:grid;position:absolute;inset:0}.console__top{grid-area:top;justify-content:space-between;align-items:center;height:max(48px,10cqw);margin:0 -2cqw;display:flex;position:relative}.console__top:after{content:"";pointer-events:none;border-top:1px solid #00000021;border-bottom:1px solid #fff9;height:.6cqw;position:absolute;bottom:1.2cqw;left:-4cqw;right:-4cqw}.console__status{align-items:center;gap:2cqw;display:flex}.pwr{color:var(--body-ink);font:700 max(9px, 1.8cqw) / 1 var(--font);letter-spacing:.12em;align-items:center;gap:1cqw;display:flex}.power{min-height:44px;color:var(--body-ink);font:700 max(10px, 2cqw) / 1 var(--font);letter-spacing:.08em;cursor:pointer;background:0 0;border:0;align-items:center;gap:1.2cqw;padding:0 1cqw;display:flex}.power__track{background:linear-gradient(#9d9888,#b9b5a6);border-radius:1.5cqw;width:9cqw;height:3cqw;position:relative;box-shadow:inset 0 .4cqw .6cqw #00000059}.power__knob{background:repeating-linear-gradient(90deg,#77746b 0 .3cqw,#8e8b81 .3cqw .7cqw);border-radius:1cqw;width:4cqw;height:2.3cqw;transition:left .12s ease-out;position:absolute;top:.35cqw;left:.4cqw;box-shadow:0 .2cqw .3cqw #00000059}.power[aria-checked=true] .power__knob{left:calc(100% - 4.4cqw)}.toolbar{gap:1cqw;display:flex}.toolbar__btn{width:var(--tool);height:var(--tool);color:var(--body-ink);cursor:pointer;background:0 0;border:0;border-radius:50%;place-items:center;padding:0;display:grid}.toolbar__btn:hover,.toolbar__btn[aria-expanded=true]{background:#00000012}.toolbar__btn svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:55%;height:55%}.bezel{background:linear-gradient(175deg, var(--bezel-hi), var(--bezel-lo));border-radius:4cqw;flex-direction:column;grid-area:bezel;justify-self:center;align-items:flex-end;gap:1.4cqw;margin-top:1.5cqw;padding:4.5cqw 5cqw 2.4cqw;display:flex;box-shadow:inset 0 .5cqw .8cqw #00000059,inset 0 -.3cqw .4cqw #ffffff1f,0 .3cqw #ffffff8c}.bezel__caption{color:var(--bezel-ink);opacity:.75;font:600 1.8cqw / 1 var(--font);letter-spacing:.12em;white-space:nowrap}.led{background:radial-gradient(circle at 35% 35%, #8c8a62, var(--led-off));border-radius:50%;flex:none;width:2cqw;min-width:8px;height:2cqw;min-height:8px;box-shadow:inset 0 .2cqw .3cqw #00000080,0 .15cqw #fff9}.led[data-on=true]{background:radial-gradient(circle at 35% 35%, #fff4cf, var(--led-on) 50%, #c77d12);box-shadow:0 0 1.2cqw .3cqw var(--led-glow), inset 0 -.2cqw .3cqw #00000040}.screen{width:var(--screen-w);aspect-ratio:10/9;background:var(--window);border-radius:.6cqw;min-height:0;position:relative;overflow:hidden;box-shadow:inset 0 .5cqw 1cqw #00000073,0 0 0 .3cqw #00000040}.screen[data-powered=off]{background:var(--window-off)}.screen__frame{--lcd-scale:1;--lcd-line:max(.5px, calc(var(--lcd-scale) * .14px));width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;margin:auto;position:absolute;inset:0}.screen__canvas{image-rendering:crisp-edges;image-rendering:pixelated;display:block}.screen__lcd{pointer-events:none;box-shadow:inset 0 0 calc(var(--lcd-scale) * 7px) #00000047;background:radial-gradient(#0000 62%,#00000024 100%);position:absolute;inset:0}.screen__frame[data-grid=on] .screen__lcd:before{content:"";background-image:repeating-linear-gradient(90deg, #0000001a 0 var(--lcd-line), transparent var(--lcd-line) calc(var(--lcd-scale) * 1px)), repeating-linear-gradient(180deg, #0000001a 0 var(--lcd-line), transparent var(--lcd-line) calc(var(--lcd-scale) * 1px));position:absolute;inset:0}.screen__lcd:after{content:"";opacity:.07;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.2 0'/%3E%3C/filter%3E%3Crect width='96' height='96' filter='url(%23n)'/%3E%3C/svg%3E");background-size:96px 96px;animation:.5s steps(4,end) infinite lcd-grain;position:absolute;inset:0}@keyframes lcd-grain{0%{background-position:0 0}25%{background-position:-31px 17px}50%{background-position:23px -41px}75%{background-position:-47px -13px}to{background-position:0 0}}.brand{color:var(--brand-ink);font:800 5.2cqw / 1 "Avenir Next", "Nunito", "Varela Round", var(--font);letter-spacing:.14em;text-shadow:0 .15cqw #fff9;grid-area:brand;justify-self:center;align-items:baseline;margin:3cqw 0 0;display:flex}.brand__leafword{color:var(--brand-ink-2)}.brand__leaf{align-self:center;width:4.4cqw;height:4.4cqw;margin-left:.2cqw;transform:translateY(-1.2cqw)rotate(-8deg)}.brand__leaf path{fill:var(--leaf)}.brand__leaf .brand__vein{fill:none;stroke:var(--leaf-vein);stroke-width:1.2px;stroke-linecap:round}.dpad__arm,.action__btn,.meta__btn{-webkit-tap-highlight-color:transparent;touch-action:none;cursor:pointer}.dpad__arm:focus-visible,.action__btn:focus-visible,.meta__btn:focus-visible,.toolbar__btn:focus-visible,.power:focus-visible,.settings :focus-visible{outline:3px solid var(--focus);outline-offset:2px}.dpad__arm:focus:not(:focus-visible),.action__btn:focus:not(:focus-visible),.meta__btn:focus:not(:focus-visible){outline:none}.dpad{width:var(--dpad-size);aspect-ratio:1;grid-area:dpad;place-self:center start;margin-left:1cqw;position:relative}.dpad:before{content:"";background:radial-gradient(circle,#0000001a 55%,#00000005 70%,#0000 71%);border-radius:50%;position:absolute;inset:-6%}.dpad__cross{filter:drop-shadow(0 .8cqw .6cqw #00000059);transition:transform 40ms linear;position:absolute;inset:0}.dpad__cross:before,.dpad__cross:after{content:"";background:linear-gradient(160deg, var(--dpad-hi), var(--dpad));border-radius:1cqw;position:absolute}.dpad__cross:before{width:33.34%;height:100%;top:0;left:33.33%}.dpad__cross:after{width:100%;height:33.34%;top:33.33%;left:0}.dpad__hub{z-index:1;background:radial-gradient(circle at 50% 40%,#1d1d22,#34343c);border-radius:50%;width:18%;height:18%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.dpad:has([data-testid=btn-up][data-pressed=true]) .dpad__cross{transform:perspective(40cqw)rotateX(9deg)}.dpad:has([data-testid=btn-down][data-pressed=true]) .dpad__cross{transform:perspective(40cqw)rotateX(-9deg)}.dpad:has([data-testid=btn-left][data-pressed=true]) .dpad__cross{transform:perspective(40cqw)rotateY(-9deg)}.dpad:has([data-testid=btn-right][data-pressed=true]) .dpad__cross{transform:perspective(40cqw)rotateY(9deg)}.dpad__arm{z-index:2;background:0 0;border:0;border-radius:1cqw;place-items:center;padding:0;transition:background-color 40ms linear,transform 40ms linear;display:grid;position:absolute}.dpad__arm--up{width:33.34%;height:36%;top:0;left:33.33%}.dpad__arm--down{width:33.34%;height:36%;bottom:0;left:33.33%}.dpad__arm--left{width:36%;height:33.34%;top:33.33%;left:0}.dpad__arm--right{width:36%;height:33.34%;top:33.33%;right:0}.dpad__arm[data-pressed=true]{background:#00000052;transform:translateY(.3cqw)}.dpad__arrow{border:1.2cqw solid #0000;border-bottom:1.6cqw solid #55555f;width:0;height:0;transform:translateY(-.6cqw)}.dpad__arm--down .dpad__arrow{transform:translateY(.6cqw)rotate(180deg)}.dpad__arm--left .dpad__arrow{transform:translate(-.6cqw)rotate(-90deg)}.dpad__arm--right .dpad__arrow{transform:translate(.6cqw)rotate(90deg)}.action{grid-area:action;place-self:center end;align-items:flex-start;gap:3.4cqw;margin-right:1cqw;display:flex;position:relative}.action__slot{flex-direction:column;align-items:center;gap:2.6cqw;display:flex;position:relative}.action__slot--b{margin-top:7cqw}.action__slot:before{content:"";top:calc(var(--ab-size) * -.11);width:calc(var(--ab-size) * 1.22);aspect-ratio:1;background:#0000000f;border-radius:50%;min-width:58.56px;position:absolute;left:50%;transform:translate(-50%);box-shadow:inset 0 .35cqw .5cqw #00000029,0 .2cqw #ffffff8c}.action__btn{width:var(--ab-size);aspect-ratio:1;background:radial-gradient(circle at 38% 32%, var(--ab-hi), var(--ab) 55%, var(--ab-lo));min-width:48px;box-shadow:0 .8cqw 0 var(--ab-lo), 0 1.4cqw 1.6cqw #00000059;border:0;border-radius:50%;padding:0;transition:transform 40ms linear,box-shadow 40ms linear;position:relative}.action__btn[data-pressed=true]{box-shadow:0 .2cqw 0 var(--ab-lo), 0 .4cqw .6cqw #00000059;transform:translateY(.6cqw)}.action__label,.meta__label{color:var(--label-ink);font:700 var(--label) / 1 var(--font);letter-spacing:.1em}.meta{grid-area:meta;justify-content:center;gap:1cqw;padding-bottom:2cqw;display:flex}.meta__btn{background:0 0;border:0;flex-direction:column;justify-content:center;align-items:center;gap:1.8cqw;min-width:max(48px,15cqw);min-height:max(48px,11cqw);padding:0;display:flex}.meta__pill{width:var(--pill-w);height:var(--pill-h);background:linear-gradient(var(--pill), var(--pill-lo));box-shadow:0 0 0 .6cqw #00000012, 0 .45cqw 0 var(--pill-lo), 0 .7cqw .8cqw #00000047;border-radius:999px;transition:transform 40ms linear,box-shadow 40ms linear}.meta__btn[data-pressed=true] .meta__pill{box-shadow:0 0 0 .6cqw #00000012, 0 .1cqw 0 var(--pill-lo), 0 .2cqw .3cqw #00000047;transform:translateY(.35cqw)}.speaker{aspect-ratio:1;opacity:.55;pointer-events:none;background:radial-gradient(circle at 50% 45%,#0000008c 0 .55cqw,#ffffff80 .6cqw .8cqw,#0000 .85cqw) 50%/3cqw 3cqw;border-radius:50%;width:15cqw;position:absolute;bottom:8cqw;right:8cqw;-webkit-mask-image:radial-gradient(circle,#000 68%,#0000 69%);mask-image:radial-gradient(circle,#000 68%,#0000 69%)}.settings{z-index:10;background:var(--panel-bg);width:min(300px,88cqw);color:var(--panel-ink);font:15px / 1.3 var(--font);box-shadow:0 0 0 1px var(--panel-line), 0 12px 32px #00000047;touch-action:auto;-webkit-user-select:auto;user-select:auto;border-radius:12px;padding:16px;position:absolute;top:11cqw;right:4cqw}.settings__title{margin:0 0 10px;font-size:16px;font-weight:700}.settings__row{border-top:1px solid var(--panel-line);justify-content:space-between;align-items:center;gap:12px;min-height:44px;display:flex}.settings__row--stack{border-top:0;flex-direction:column;justify-content:center;align-items:stretch;gap:4px;padding:8px 0}.settings__row--stack label{justify-content:space-between;display:flex}.settings input[type=range]{width:100%;accent-color:var(--ab)}.settings input[type=checkbox]{width:22px;height:22px;accent-color:var(--ab)}.settings select{min-height:34px;font:inherit}.settings__done{background:var(--brand-ink);color:#fff;width:100%;min-height:40px;font:600 15px var(--font);cursor:pointer;border:0;border-radius:8px;margin-top:8px}.toast-region{z-index:20;top:max(12px, env(safe-area-inset-top));pointer-events:none;justify-content:center;display:flex;position:fixed;left:0;right:0}.toast{background:var(--toast-bg);color:var(--toast-ink);font:600 14px / 1.2 var(--font);border-radius:999px;margin:0;padding:8px 16px;box-shadow:0 6px 18px #00000040}.hint{max-width:calc(100vw - 32px);font:13px / 1.4 var(--font);color:var(--hint-ink);flex-wrap:wrap;flex:none;justify-content:center;gap:6px 24px;margin:0;padding:0;list-style:none;display:flex}.hint__item{white-space:nowrap;align-items:center;gap:8px;display:flex}.hint__keys{gap:4px;display:flex}.hint kbd{min-width:22px;font:inherit;text-align:center;border:1px solid;border-bottom-width:2px;border-radius:5px;padding:2px 6px;font-size:12px;font-weight:600}.hint__action{letter-spacing:.02em}@media (hover:none),(pointer:coarse){.hint{display:none}}@media (max-width:600px) and (orientation:portrait){.app{padding:0}.console{aspect-ratio:auto;--screen-w:80cqw;--dpad-size:40cqw;--ab-size:17cqw;--pill-w:13cqw;--pill-h:3.6cqw;--label:3.2cqw;--tool:48px;width:100vw;height:100dvh}.console__body{padding:env(safe-area-inset-top) calc(4cqw + env(safe-area-inset-right)) calc(4cqw + env(safe-area-inset-bottom)) calc(4cqw + env(safe-area-inset-left));border-radius:0 0 14cqw;grid-template-rows:auto auto auto 1fr auto}.bezel{padding:3.5cqw 3.5cqw 2.4cqw}.speaker{bottom:5cqw;right:5cqw}.action{gap:2.6cqw;margin-right:2.5cqw}}@media (orientation:landscape) and (max-height:500px){.app{padding:0}.console{aspect-ratio:auto;--screen-w:62cqh;--dpad-size:46cqh;--ab-size:20cqh;--pill-w:9cqh;--pill-h:2.6cqh;--label:3.4cqh;--tool:44px;width:100vw;height:100dvh}.console__body{padding:3cqh calc(4cqw + env(safe-area-inset-right)) env(safe-area-inset-bottom) calc(4cqw + env(safe-area-inset-left));border-radius:0;grid-template:"dpad bezel action"1fr"dpad meta action"/1fr auto 1fr}.console__top{top:0;left:calc(3cqw + env(safe-area-inset-left));right:calc(3cqw + env(safe-area-inset-right));height:auto;margin:0;position:absolute}.console__top:after,.brand,.speaker{display:none}.power{font-size:2.8cqh}.power__track{width:9cqh;height:3.4cqh}.power__knob{width:4.2cqh;height:2.6cqh;top:.4cqh}.power[aria-checked=true] .power__knob{left:calc(100% - 4.6cqh)}.bezel{border-radius:3cqh;align-self:start;gap:1.2cqh;margin-top:0;padding:2.6cqh 2.6cqh 1.6cqh}.bezel__caption{font-size:2.2cqh}.pwr{gap:1cqh;font-size:2.4cqh}.led{width:2.4cqh;height:2.4cqh}.dpad{justify-self:center;margin:0}.action{justify-self:center;gap:4cqh;margin:0}.action__slot{gap:3cqh}.action__slot--b{margin-top:10cqh}.meta{padding:0 0 5cqh}.meta__btn{gap:1.6cqh;min-width:max(48px,14cqh);min-height:48px}.settings{max-height:84cqh;top:12cqh;right:3cqw;overflow:auto}}@media (prefers-reduced-motion:reduce){.screen__lcd:after{animation:none}.power__knob,.dpad__cross,.dpad__arm,.action__btn,.meta__pill{transition:none}}