:root{--button:#ffd23f;--bezel:#fff6d5;--ratio:.86;--ink:#fff;--ink-shadow:#0006}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{-webkit-user-select:none;user-select:none;background:0 0;height:100%;margin:0;font-family:ui-rounded,SF Pro Rounded,system-ui,sans-serif;overflow:hidden}body.browser{background:radial-gradient(circle at 30% 20%,#ffe3f1,#c9e8ff 60%,#b8f0d0)}#device{width:min(96vw, calc(98vh * var(--ratio)));aspect-ratio:var(--ratio);-webkit-app-region:drag;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@media (display-mode:standalone){#device{top:calc(50% + (env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) / 2);width:min(96vw, calc((98vh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) * var(--ratio)))}}body.typing #device{top:calc(var(--vv-top,0px) + var(--vv-h,100vh) / 2);width:min(96vw, calc(.98 * var(--vv-h,100vh) * var(--ratio)))}#case{pointer-events:none;filter:drop-shadow(var(--case-shadow));position:absolute;inset:0}#case svg{width:100%;height:100%;display:block;overflow:visible}#controls{justify-content:center;gap:6px;display:flex;position:absolute}#controls .dot{cursor:pointer;-webkit-app-region:no-drag;background:#ffffff8c;border:2px solid #00000040;border-radius:50%;width:12px;height:12px;padding:0}#controls .dot[data-win=close]:hover{background:#ff6b6b}#controls .dot[data-win=minimize]:hover{background:#ffd23f}#controls .dot[data-win=pin]:hover,#controls .dot.on{background:#73eff7}body.browser #controls{display:none}#brand{image-rendering:pixelated;position:absolute}#bezel{aspect-ratio:192/160;border-radius:var(--bezel-radius);background:var(--bezel);box-shadow:var(--bezel-shadow);-webkit-app-region:no-drag;justify-content:center;align-items:center;padding:2.4%;display:flex;position:absolute}#bezel:after{content:"";border-radius:inherit;background:var(--bezel-sweep);pointer-events:none;position:absolute;inset:0}#lcd{width:100%;height:100%;position:relative}#lcd:after{content:"";border-radius:var(--lcd-radius);box-shadow:var(--lcd-rim);pointer-events:none;background-image:linear-gradient(#0000 calc(100% - 1px),#0000000f 0),linear-gradient(90deg,#0000 calc(100% - 1px),#0000000f 0);background-size:.520833% .625%;position:absolute;inset:0}body.lcd #lcd:after{display:none}body.lcd #screen{background:#c4cfa1}#screen{width:100%;height:100%;image-rendering:pixelated;touch-action:none;cursor:pointer;background:#1a1c2c;border-radius:4px;position:absolute;inset:0}#buttons{display:contents}.btn{aspect-ratio:1;background:var(--btn-bg,var(--button));box-shadow:var(--btn-shadow);cursor:pointer;-webkit-app-region:no-drag;border:none;border-radius:50%;padding:0;transition:transform 50ms;position:absolute}.btn span{color:var(--button-ink,#00000059);font-size:clamp(10px,3vw,18px);font-weight:900}.btn:active,.btn.pressed{box-shadow:var(--btn-shadow-down);transform:translateY(4px)}#hint{text-align:center;color:var(--ink);text-shadow:0 1px 0 var(--ink-shadow), 0 0 4px var(--ink-shadow);font-size:clamp(8px,2vw,11px);font-weight:700;position:absolute}body:not(.shell-ready) #device{visibility:hidden}#splash{pointer-events:none;justify-content:center;align-items:center;transition:opacity .25s;display:flex;position:fixed;inset:0}body.shell-ready #splash{opacity:0;visibility:hidden}#splash .egg{transform-origin:50% 100%;background:radial-gradient(circle at 35% 28%,#fff 0 10%,#0000 11%),#00b14f;border-radius:50% 50% 46% 46%/58% 58% 42% 42%;width:64px;height:80px;animation:.9s ease-in-out infinite splash-rock;position:relative;box-shadow:inset -6px -8px #0000002e,0 8px 14px #00000040}#splash .egg i{background:#ffd23f;border-radius:50%;width:12px;height:12px;position:absolute;top:46px}#splash .egg i:first-child{left:10px}#splash .egg i:nth-child(2){top:52px;left:26px}#splash .egg i:nth-child(3){left:42px}@keyframes splash-rock{0%,to{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}