:root{--cream:#fff6e8;--ink:#4a2a1a;--orange:#ff8a3d;--gold:#ffc94d;--glass:#ffeed829;--edge:#fff6e861;--shadow:0 2px 18px #7a463c47;--display:"Fraunces", Georgia, "Times New Roman", serif;--ui:"Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body{height:100%;color:var(--cream);font-family:var(--ui);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none;overscroll-behavior:none;background:#ffd9a8;margin:0;overflow:hidden}#app,#app canvas{width:100%;height:100%;display:block;position:fixed;inset:0}[hidden]{display:none!important}.screen{padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));z-index:10;place-items:center;animation:.6s both fade-in;display:grid;position:fixed;inset:0}#start{background:radial-gradient(at 50% 60%,#ffbe8200 30%,#a05a6e59 100%)}#over{background:#78465a2e}#settings{z-index:12;background:#6e3c5073}.card{text-align:center;background:var(--glass);border:1px solid var(--edge);-webkit-backdrop-filter:blur(14px)saturate(1.2);text-shadow:0 1px 12px #8c463259;border-radius:28px;max-width:min(560px,100%);padding:28px 36px;box-shadow:0 20px 60px #6e3c4638}.title-card{box-shadow:none;-webkit-backdrop-filter:none;background:0 0;border:none}.kicker{font-family:var(--display);letter-spacing:.02em;opacity:.92;margin:0 0 4px;font-size:clamp(15px,2.4vw,20px);font-style:italic;font-weight:300}h1{font-family:var(--display);letter-spacing:-.02em;text-shadow:0 4px 40px #aa462873;margin:0 0 22px;font-size:clamp(64px,14vw,132px);font-weight:400;line-height:.95}h2{font-family:var(--display);margin:0 0 14px;font-size:32px;font-weight:400}.btn{font-family:var(--ui);letter-spacing:.02em;color:var(--ink);background:linear-gradient(135deg, #ffe39a, var(--gold) 40%, var(--orange));cursor:pointer;border:none;border-radius:999px;padding:16px 44px;font-size:19px;font-weight:800;transition:transform .15s,box-shadow .15s;box-shadow:0 10px 30px #c85a2866,inset 0 1px #fff9}.btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px #c85a287a,inset 0 1px #fff9}.btn:active{transform:scale(.97)}.btn:focus-visible,.icon-btn:focus-visible{outline-offset:3px;outline:3px solid #fff}.btn.ghost{color:var(--cream);box-shadow:inset 0 0 0 1px var(--edge);background:#fff6e82e}.how{opacity:.9;margin-top:26px;font-size:14px;line-height:1.6}.how p{margin:0}.how b{font-weight:800}body.touch .how .keys,body:not(.touch) .how .phone{display:none}.best{font-family:var(--display);opacity:.9;margin:14px 0 0;font-style:italic}#calib .big{font-family:var(--display);margin:16px 0 8px;font-size:clamp(22px,4vw,30px);line-height:1.25}#calib .small{opacity:.8;margin:0;font-size:14px}.phone-icon{border:3px solid var(--cream);border-radius:10px;width:84px;height:46px;margin:0 auto;animation:2.6s ease-in-out infinite rock;position:relative}.phone-icon span{background:var(--cream);border-radius:2px;width:4px;height:12px;margin-top:-6px;position:absolute;top:50%;right:5px}.over-card .time{font-family:var(--display);margin:0;font-size:clamp(64px,12vw,104px);line-height:1}.best-line{font-style:italic;font-family:var(--display);opacity:.9;margin:6px 0 14px}.catches{justify-content:center;gap:18px;margin:0 0 22px;padding:0;font-weight:700;list-style:none;display:flex}.catches li{align-items:center;gap:6px;display:flex}.catches svg,.tag svg{fill:currentColor;width:18px;height:18px}.settings-card{text-align:left;min-width:min(380px,100%)}.settings-card label{margin:12px 0;font-weight:700;display:block}.settings-card label.row{justify-content:space-between;align-items:center;display:flex}.settings-card input[type=range]{width:100%;accent-color:var(--orange);margin-top:6px;display:block}.settings-card input[type=checkbox]{width:22px;height:22px;accent-color:var(--orange)}.settings-card .buttons{flex-wrap:wrap;justify-content:flex-end;gap:12px;margin-top:18px;display:flex}.settings-card .btn{padding:12px 24px;font-size:16px}.settings-card output{float:right;opacity:.85;font-weight:600}.settings-card{max-height:calc(100vh - 32px);overflow-y:auto}@media (height<=460px){.settings-card{grid-template-columns:1fr 1fr;column-gap:28px;min-width:min(620px,100%);padding:16px 24px;display:grid}.settings-card h2,.settings-card .buttons{grid-column:1/-1}.settings-card h2{margin-bottom:4px;font-size:24px}.settings-card label{margin:8px 0}}#hud{z-index:5;pointer-events:none;width:120px;height:120px;padding:env(safe-area-inset-top) 0 0 env(safe-area-inset-left);position:fixed;top:0;left:0}#hud .arc{filter:drop-shadow(0 1px 6px #8c3c2859);width:100%;height:100%;overflow:visible}#hud path{fill:none;stroke-linecap:round;stroke-width:5px}#hud .track{stroke:#fff6e859}#hud .fill{stroke:url(#arcGrad);transition:stroke .4s}#hud.full .fill{stroke:#fff2c4}#hud.starving .fill{stroke:#ff7a7a;animation:.9s ease-in-out infinite pulse}#hud .full{left:calc(34px + env(safe-area-inset-left));top:calc(34px + env(safe-area-inset-top));letter-spacing:.12em;text-transform:uppercase;color:#fff2c4;text-shadow:0 1px 8px #a0502899;font-size:12px;font-weight:800;position:absolute}.icon-btn{top:max(12px, env(safe-area-inset-top));right:max(12px, env(safe-area-inset-right));border:1px solid var(--edge);background:var(--glass);-webkit-backdrop-filter:blur(8px);z-index:6;cursor:pointer;opacity:.75;border-radius:50%;place-items:center;width:44px;height:44px;display:grid;position:fixed}.icon-btn svg{width:22px;height:22px;fill:var(--cream)}.thumb-btn{bottom:max(22px, env(safe-area-inset-bottom));border:2px solid var(--edge);-webkit-backdrop-filter:blur(8px);z-index:6;width:88px;height:88px;color:var(--cream);font:800 11px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;touch-action:none;cursor:pointer;background:#ffecd233;border-radius:50%;place-content:center;justify-items:center;gap:2px;padding:0;transition:transform .1s,background .1s;display:grid;position:fixed}.thumb-btn svg{width:38px;height:38px;fill:var(--cream)}.thumb-btn.on{background:#ffaa5a80;transform:scale(.9)}#flapbtn{left:max(22px, env(safe-area-inset-left));width:100px;height:100px}#flapbtn svg{width:46px;height:46px}#tuck{right:max(22px, env(safe-area-inset-right))}#tags{pointer-events:none;z-index:4;position:fixed;inset:0;overflow:hidden}.tag{color:#5a2e14;white-space:nowrap;will-change:transform, opacity;background:linear-gradient(135deg,#fff1c4,#ffc94d);border-radius:999px;align-items:center;gap:5px;padding:5px 11px 5px 8px;font-size:15px;font-weight:800;display:flex;position:absolute;top:0;left:0;box-shadow:0 4px 16px #c8642873}.tag.float{box-shadow:none;color:#fff4d6;text-shadow:0 2px 12px #c85a1ecc;background:0 0;font-size:22px}#hint{left:50%;bottom:max(28px, env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(8px);opacity:0;pointer-events:none;z-index:5;white-space:nowrap;text-overflow:ellipsis;background:#5a323c47;border-radius:999px;max-width:calc(100vw - 32px);padding:10px 22px;font-size:16px;font-weight:700;transition:opacity .6s;position:fixed;overflow:hidden;transform:translate(-50%)}#hint.show{opacity:1}#vignette{pointer-events:none;z-index:3;opacity:0;-webkit-backdrop-filter:grayscale()brightness(.85);transition:opacity 1.2s;position:fixed;inset:0;-webkit-mask-image:radial-gradient(#0000 45%,#000 100%);mask-image:radial-gradient(#0000 45%,#000 100%)}body.starving #vignette{opacity:1}#portrait{display:none}@media (orientation:portrait) and (pointer:coarse){#portrait{z-index:50;font-family:var(--display);text-align:center;background:linear-gradient(#ffb27a,#ffd9a8);place-content:center;justify-items:center;gap:22px;padding:16px;font-size:22px;display:grid;position:fixed;inset:0}#portrait p{margin:0}#portrait .rotate{border:3px solid var(--cream);border-radius:10px;width:46px;height:80px;animation:2.4s ease-in-out infinite turn}}#debug{color:#fff;z-index:7;pointer-events:none;background:#28141e73;border-radius:8px;margin:0;padding:8px 10px;font:11px/1.45 ui-monospace,Menlo,Consolas,monospace;position:fixed;top:64px;right:12px}.lil-gui.root.autoPlace{z-index:20;right:64px}@keyframes fade-in{0%{opacity:0}}@keyframes rock{0%,to{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}@keyframes turn{0%,20%{transform:rotate(0)}60%,to{transform:rotate(-90deg)}}@keyframes pulse{50%{opacity:.45}}@media (height<=420px){.card{padding:18px 26px}h1{margin-bottom:14px}.how{margin-top:16px}}@media (prefers-reduced-motion:reduce){.screen,.phone-icon,#portrait .rotate{animation:none}}