@charset "UTF-8";
:root { font-family: Arial, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; color: #343630; background: #060b18; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; min-height: 100svh; background: radial-gradient(ellipse at 18% 12%, #16243a88, transparent 48%), radial-gradient(ellipse at 82% 70%, #26234155, transparent 50%), linear-gradient(155deg, #050a16, #0d172a 60%, #080d1c); }
#night-sky { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 3px solid #bf704f; outline-offset: 5px; }
.main-layout { position: relative; display: grid; place-items: center; min-height: 100svh; padding: 24px 20px; }
.console-area { width: min(382px, calc(100vw - 40px), calc((100svh - 48px) * .49)); }
.device{--shell-light:#e8e4d7;--shell-mid:#d8d4c6;--shell-dark:#c3bead;--shell-ink:#66685c;position:relative;isolation:isolate;container-type:inline-size;width:382px;max-width:100%;padding:6.7% 6.1% 6%;border-radius:40px 40px 66px 66px;background:linear-gradient(107deg,#fff5 0%,transparent 25%,#8f88751a 100%),linear-gradient(160deg,var(--shell-light),var(--shell-mid) 50%,var(--shell-dark));border:1px solid #a5a190;box-shadow:inset 2px 2px 2px #fff9,inset -3px 0 4px #635f4240,inset 0 -7px 2px #8b877661,inset 0 -11px 7px #a59f8038,6px 12px 0 -5px #a5a18f,9px 20px 22px -10px #625d4759,22px 29px 45px -15px #514d3638;transition:background .3s}
.device[data-color=yellow]{--shell-light:#e0c779;--shell-mid:#d2b35b;--shell-dark:#bfa049;--shell-ink:#756536;border-color:#a38742}
.device[data-color=slate]{--shell-light:#81918f;--shell-mid:#63777d;--shell-dark:#4c6068;--shell-ink:#d1d9ce;border-color:#45555a}
.shell-grain{position:absolute;z-index:-1;inset:0;border-radius:inherit;opacity:.25;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23s)' opacity='.5' d='M0 0h150v150H0z'/%3E%3C/svg%3E")}
.device-brand{display:flex;align-items:center;justify-content:space-between;margin:0 1cqw 5cqw;color:var(--shell-ink)}
.device-brand>span:first-child{font-size:5.5cqw;font-style:italic;font-weight:800;letter-spacing:-.5px;text-shadow:0 1px #fff6}
.device-brand b{font-weight:400}
.device-brand small{font-size:2.2cqw;margin-left:2px}
.model-badge{border:1px solid #8d907640;border-radius:3px;box-shadow:inset 0 1px 1px #6e715514,0 1px #fff4;padding:1.2cqw 1.8cqw;font-family:Arial,sans-serif;font-weight:600;font-size:3.5cqw;letter-spacing:.2px}
.model-badge small{font-weight:400;font-size:2cqw;margin:0 .5cqw}
.bezel{background:linear-gradient(145deg,#5b5b4f,#41443d 70%,#55564a);border:1px solid #747265;border-radius:10px 10px 23px 23px;padding:3.7cqw 3.9cqw 2.9cqw;box-shadow:0 1px 1px #fff9,inset 1px 2px 4px #292b2680,0 -1px 2px #68604b}
.bezel-heading{display:flex;justify-content:space-between;margin:0 0 2.6cqw;color:#c0c1a7;font:1.8cqw "Courier New",monospace;letter-spacing:.6px}
.bezel-heading span:first-child{font-weight:bold}
.lcd{position:relative;background:#a4af8d;border:2px solid #272e26;border-radius:4px;overflow:hidden;box-shadow:inset 4px 5px 8px #2532195c,0 1px 0 #939780}
.lcd canvas{display:block;width:100%;height:auto;aspect-ratio:1;position:relative;z-index:1;filter:contrast(.97)}
.lcd:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 20% 10%,#c4cca766,transparent 60%),linear-gradient(130deg,#8c987000,transparent 70%,#68765226)}
.screen-glass{position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(125deg,#eef3cb18,transparent 35%,transparent 52%,#ffffff0a 52.3%,transparent 78%),repeating-linear-gradient(0deg,transparent 0px,transparent 2px,#2d3e1b04 3px);box-shadow:inset 3px 4px 9px #29352245,inset -1px -1px 3px #deebbc50;border-radius:2px}
.bezel-footer{display:flex;justify-content:space-between;align-items:center;color:#b9bba1;font:1.9cqw "Courier New",monospace;letter-spacing:1px;margin:3cqw .4cqw 0}
.power-mark{display:flex;align-items:center;gap:5px}
.power-mark i{width:4px;height:4px;background:#789463;border-radius:50%;box-shadow:0 0 2px #92ad7866}
.power-mark i.playing{background:#c6dd8c;box-shadow:0 0 4px #d1e495a0}
.utility-controls{display:flex;justify-content:space-between;gap:6cqw;padding:5.4cqw 6cqw 0}
.utility{display:flex;flex-direction:column;align-items:center;gap:2.3cqw;flex:1;white-space:nowrap}
.utility>span{font-size:2.05cqw;color:var(--shell-ink);font-weight:600;letter-spacing:.35px}
.utility-button{height:6.3cqw;width:12.2cqw;background:linear-gradient(#777a70,#4b5048);border:1px solid #494e43;border-radius:20px;box-shadow:0 3px 0 #3b4037,0 4px 3px #605d4670,inset 0 1px 1px #bcc1b177;display:grid;place-items:center;padding:0;transition:transform .06s,box-shadow .06s}
.utility-button svg{height:3.5cqw;width:3.5cqw;stroke:#c7cbb8;stroke-width:1.8;fill:none;stroke-linejoin:round;stroke-linecap:round}
.start-button{background:linear-gradient(#bb664b,#a24b35);border-color:#87432f;box-shadow:0 3px 0 #773f2c,0 4px 3px #66513e70,inset 0 1px 1px #efac8a80}
.start-button svg{fill:#dfb393;stroke:none}
.utility-button[aria-pressed=false]{opacity:.65}
.utility-button:active,.utility-button.is-pressed{transform:translateY(2px);box-shadow:0 1px 0 #3b4037,inset 0 1px 2px #0004}
.play-controls{display:flex;align-items:center;justify-content:space-between;padding:5.5cqw 1.5cqw 0}
.dpad{position:relative;width:44cqw;height:43cqw;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:4cqw;isolation:isolate}
.dpad-well{position:absolute;inset:0;border-radius:50%;background:linear-gradient(150deg,#aaa38b55,#e9e3d43b);box-shadow:inset 1px 2px 3px #726b4d3b,0 1px 1px #fff6;z-index:-2}
.dpad-base{position:absolute;inset:4cqw;background:#3a3e35;clip-path:polygon(33% 0,67% 0,67% 33%,100% 33%,100% 67%,67% 67%,67% 100%,33% 100%,33% 67%,0 67%,0 33%,33% 33%);transform:translateY(4px);z-index:-1}
.direction,.dpad-center{background:linear-gradient(145deg,#65695e,#4d5348);border:0;display:grid;place-items:center;padding:0;color:#b5b8a7;text-shadow:0 -1px #272d21;font-size:3.7cqw}
.direction{touch-action:none;box-shadow:inset 0 1px 0 #b1b2a45c}
.direction.up{grid-area:1/2;border-radius:6px 6px 0 0}
.direction.left{grid-area:2/1;border-radius:6px 0 0 6px;box-shadow:inset 1px 1px 0 #b1b2a44c}
.direction.right{grid-area:2/3;border-radius:0 6px 6px 0;box-shadow:inset -1px 1px 0 #b1b2a44c}
.direction.down{grid-area:3/2;border-radius:0 0 6px 6px;box-shadow:inset 1px 0 0 #b1b2a42c}
.dpad-center{grid-area:2/2;position:relative;background:#585e51;z-index:1}
.dpad-center:before{content:"";height:5.5cqw;width:5.5cqw;border-radius:50%;background:radial-gradient(circle at 70% 70%,#686e60,#454c3f);box-shadow:0 1px 1px #9da58a70,inset 0 1px 2px #363e3066}
.direction:active,.direction.is-pressed{filter:brightness(.85);transform:translateY(2px)}
.direction span{pointer-events:none}
.action-control{position:relative;width:34cqw;height:43cqw;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:5cqw}
.rotate-button{height:23cqw;width:23cqw;border-radius:50%;background:radial-gradient(circle at 35% 22%,#c76f51,#b4573d 62%,#a64a34);border:1px solid #995139;box-shadow:0 5px 0 #84442d,0 7px 5px #4f3c2c5c,inset 0 2px 2px #eeb5968f,inset -2px -2px 2px #97452e77,0 0 0 5px #aba18755,0 0 0 6px #c8bea04d;display:grid;place-items:center;color:#e4a382;font-size:11cqw;text-shadow:0 -1px 0 #7e3f2c;transition:transform .06s,box-shadow .06s}
.rotate-button:active,.rotate-button.is-pressed{transform:translateY(4px);box-shadow:0 1px 0 #84442d,0 2px 3px #4f3c2c5c,inset 0 1px 4px #893c3055,0 0 0 5px #aba18755,0 0 0 6px #c8bea04d}
.rotate-label{color:var(--shell-ink);font-weight:600;font-size:2.3cqw;letter-spacing:1.2px;margin-top:4cqw;transform:rotate(-10deg)}
.rotate-orbit{position:absolute;color:var(--shell-ink);top:0;right:1cqw;font-size:8cqw;opacity:.5;transform:rotate(-25deg)}
.device-bottom{display:flex;align-items:center;justify-content:space-between;padding:7cqw 3cqw 1.5cqw}
.device-serial{font:1.7cqw/1.8 "Courier New",monospace;color:var(--shell-ink);letter-spacing:.7px;opacity:.7}
.speaker{display:flex;gap:1.5cqw;transform:rotate(-18deg);padding-right:3cqw}
.speaker i{width:1.5cqw;height:10cqw;border-radius:5px;background:#777567;box-shadow:inset 1px 2px 1px #3c3c3299,1px 1px 0 #f5f0dba6}
.speaker i:first-child,.speaker i:last-child{height:7cqw;margin-top:1.5cqw}
.shell-seam{position:absolute;inset:auto 8% 13px;height:1px;background:#837d5915;border-bottom:1px solid #fff2;border-radius:50%;pointer-events:none}
.device { width: 100%; padding: 6.7% 6.1% 6%; box-shadow: inset 2px 2px 2px #fff9, inset -3px 0 4px #635f4240, inset 0 -7px 2px #8b877661, inset 0 -11px 7px #a59f8038, 6px 12px 0 -5px #8e8a7c, 0 28px 70px #0009, 0 0 80px #7e96ff10; }
.utility-button { position: relative; }
.utility-button::after { content: ""; position: absolute; inset: -10px -4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 620px) { .device { border-radius: 35px 35px 59px 59px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }