:root{--page: #eef3f5;--shell-high: #8fdcee;--shell-base: #5bb8d4;--shell-low: #2f87a5;--shell-edge: #1f6d88;--bezel: #1c4f63;--lcd: #c7d3b6;--button: #f2cf45;--button-low: #c9a418;--icon-ink: #0d3f50;--icon-on: #0f4557;--icon-on-ink: #d8f2fb}.device[data-shell=red]{--shell-high: #f7bfb1;--shell-base: #e0786a;--shell-low: #ab4a3d;--shell-edge: #85362b;--bezel: #5a2922;--icon-ink: #521f16;--icon-on: #5a2922;--icon-on-ink: #fbe3dc}.device[data-shell=green]{--shell-high: #b9e6b4;--shell-base: #6bb96a;--shell-low: #3d7f43;--shell-edge: #2c5f33;--bezel: #1f4a2a;--icon-ink: #14381f;--icon-on: #1f4a2a;--icon-on-ink: #e0f4dc}.device[data-shell=amber]{--shell-high: #f8dda9;--shell-base: #e0ab52;--shell-low: #ac7a25;--shell-edge: #845c18;--bezel: #573d12;--icon-ink: #45300c;--icon-on: #573d12;--icon-on-ink: #fbeed2}.device[data-shell=red].is-dark{background:linear-gradient(162deg,#8f6259,#7a4238 52%,#5b2b22)}.device[data-shell=red].is-dark .lcd-bezel{background:#3a1a15}.device[data-shell=green].is-dark{background:linear-gradient(162deg,#5c7f59,#3f6b41 52%,#26472b)}.device[data-shell=green].is-dark .lcd-bezel{background:#163420}.device[data-shell=amber].is-dark{background:linear-gradient(162deg,#93794b,#7b6034 52%,#57411a)}.device[data-shell=amber].is-dark .lcd-bezel{background:#3c2c0e}html,body{margin:0;height:100%;background:var(--page);font-family:Zen Kaku Gothic New,system-ui,sans-serif;overscroll-behavior:none;touch-action:manipulation;-webkit-text-size-adjust:100%}#app{min-height:100dvh;display:grid;place-items:center}.device{position:relative;box-sizing:border-box;width:min(100vw,460px);height:min(100dvh,940px);border:3px solid var(--shell-edge);border-radius:clamp(28px,7vw,54px);background:linear-gradient(162deg,var(--shell-high) 0%,var(--shell-base) 52%,var(--shell-low) 100%);overflow:hidden}.device.is-dark{background:linear-gradient(162deg,#4f7f91,#35697f 52%,#1d5468)}.device.is-dark .gloss{opacity:.25}.device.is-dark .icon-badge,.device.is-dark .icon-label{opacity:.55}.device.is-dark .lcd-bezel{background:#11333f}.device,.icon-badge,.icon-label,.lcd-bezel{transition:background .42s ease,opacity .42s ease}@media(prefers-reduced-motion:reduce){.device,.icon-badge,.icon-label,.lcd-bezel{transition:none}}.egg-hint{position:absolute;inset:5% 6%;border:2px solid rgb(255 255 255 / .2);border-radius:50%/60% 60% 40% 40%;pointer-events:none}.gloss{position:absolute;left:8%;top:3%;width:44%;height:15%;border-radius:50%;background:linear-gradient(118deg,#ffffff4d,#fff0 62%);transform:rotate(-8deg);pointer-events:none}.panel{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,3.6vh,34px);box-sizing:border-box;padding:calc(18px + env(safe-area-inset-top)) 8px calc(18px + env(safe-area-inset-bottom))}.icon-row{display:flex;justify-content:space-around;width:100%;max-width:430px}.icon-cell{display:flex;flex-direction:column;align-items:center;gap:4px}.icon-badge{display:flex;align-items:center;justify-content:center;width:clamp(34px,min(11vw,7vh),50px);aspect-ratio:1;border-radius:30%;color:var(--icon-ink)}.icon-art{width:62%;height:62%}.icon-label{font-size:clamp(10px,min(2.9vw,1.9vh),13px);letter-spacing:.02em;color:var(--icon-ink)}.icon-cell.is-on .icon-badge{background:var(--icon-on);color:var(--icon-on-ink)}.icon-cell.is-on .icon-label{color:var(--icon-on-ink);font-weight:700}.icon-cell.is-blinking .icon-badge{box-shadow:0 0 0 3px var(--button)}.lcd-bezel{width:min(96%,440px,calc((100dvh - 300px)*2));box-sizing:border-box;padding:clamp(10px,3vw,18px);border-radius:clamp(14px,4vw,22px);background:var(--bezel);box-shadow:inset 0 3px 8px #00000073}.lcd{display:block;width:100%;height:auto;pointer-events:none;-webkit-user-select:none;user-select:none}.tri-pad{display:flex;justify-content:center;gap:clamp(22px,8vw,46px);padding-bottom:clamp(22px,3vh,30px)}.tri-button{position:relative;width:clamp(52px,min(17vw,12vh),82px);aspect-ratio:1;padding:0;border:0;border-radius:50%;background:var(--button);box-shadow:0 5px 0 var(--button-low);color:#6b5405;cursor:pointer;touch-action:none}.tri-button-glyph{font:700 clamp(16px,min(4.6vw,3.2vh),24px) / 1 inherit}.tri-button:active{transform:translateY(3px);box-shadow:0 2px 0 var(--button-low)}.tri-button:focus-visible{outline:3px solid var(--bezel);outline-offset:4px}.tri-button-caption{position:absolute;left:50%;top:calc(100% + 7px);transform:translate(-50%);color:var(--icon-ink);font:400 clamp(10px,min(3vw,2vh),14px) / 1 inherit;white-space:nowrap}.icon-cell.is-blinking .icon-badge{animation:blink 2s steps(1,end) infinite}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:.3}}@media(prefers-reduced-motion:reduce){.icon-cell.is-blinking .icon-badge{animation:none}.tri-button:active{transform:none}}.slot-dots{position:absolute;left:50%;bottom:clamp(8px,1.4vh,16px);transform:translate(-50%);display:flex;gap:8px;pointer-events:none}.slot-dot{width:8px;height:8px;border-radius:50%;background:#ffffff52;box-shadow:inset 0 0 0 1px #0000001f}.slot-dot.is-active{background:#ffffffe6}.slot-dot.is-waiting{background:var(--button);animation:blink 2s steps(1,end) infinite}@media(prefers-reduced-motion:reduce){.slot-dot.is-waiting{animation:none}}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}