:root{color-scheme:dark;--bg:#0b1114;--text:#eaf3ec;--muted:#96aca5;--mint:#c8f3dc;--edge:#c8f3dc21;font-family:Arial,Helvetica,sans-serif;font-synthesis:none}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{height:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);height:100%;overflow:hidden;overscroll-behavior:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;touch-action:manipulation;min-height:44px}
button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
button:disabled{cursor:default;opacity:.5}
button svg{width:20px;height:20px;flex-shrink:0}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.experience{position:relative;isolation:isolate;width:100%;max-width:500px;height:100svh;height:100dvh;margin:auto;overflow:hidden;background:radial-gradient(ellipse at 50% 57%,#19332c55,transparent 65%),var(--bg)}
/* All permanent controls live above the scene. The bottom is free for a thumb. */
.masthead{position:absolute;z-index:3;top:max(10px,env(safe-area-inset-top));left:22px;right:22px;min-height:46px;display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none}
.wordmark{font:italic 38px/1 Georgia,serif;letter-spacing:-2.5px;color:#d9e8df;flex:1}
.wordmark span{color:var(--mint)}
.menu-button{pointer-events:auto;display:flex;gap:8px;align-items:center;padding:0 15px;font-size:14px;border:1px solid var(--edge);border-radius:28px;background:#0b1114e8;min-height:46px}
.menu-button:active{background:#20372e}
.progress-indicator{display:flex;align-items:center;gap:3px;color:#a8c3b7;font-size:14px;font-variant-numeric:tabular-nums;opacity:0;transition:opacity .3s}
.peeling .progress-indicator{opacity:1}
.percent-sign{font-size:12px;color:var(--muted)}
.progress-line{display:block;width:24px;height:2px;margin:0 8px;background:#bedacd24}
.progress-line i{display:block;height:100%;width:0;background:var(--mint)}
.active-cue{position:absolute;z-index:2;top:calc(max(10px,env(safe-area-inset-top)) + 64px);left:22px;right:22px;pointer-events:none;text-align:center;color:var(--muted);transition:opacity .3s}
.active-cue p{font-size:14px;line-height:1.45;margin:0 auto;max-width:320px;text-wrap:balance}
.peeling .active-cue #hint,.complete .active-cue{display:none}
.dragging .active-cue{opacity:.55}
.flow-indicator{display:flex;align-items:center;justify-content:center;gap:10px;font-size:13px;line-height:1.4;color:#b0c4b8}
.flow-indicator>i{width:28px;height:2px;background:#bedacd21;flex-shrink:0}
.flow-indicator b{display:block;height:100%;width:0;background:#e3deb0;box-shadow:0 0 8px #f8e4a72d}
.flowing .flow-indicator{color:#e2dfb3}
.stage{position:absolute;inset:0 0 calc(74px + env(safe-area-inset-bottom));margin:0;min-height:0;isolation:isolate}
canvas{display:block;position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.dragging canvas{cursor:grabbing}
.awaiting-sound canvas{opacity:.3;pointer-events:none}
.awaiting-sound .active-cue{visibility:hidden}
.sound-start{position:absolute;z-index:4;inset:100px 18px 12px;display:flex;align-items:center;justify-content:center}
.sound-start-card{width:100%;max-width:310px;max-height:100%;overflow-y:auto;padding:26px 22px 14px;text-align:center;border:1px solid #c8f3dc30;border-radius:26px;background:#10201fed;box-shadow:0 18px 60px #0005;touch-action:pan-y}
.sound-start-card h2{margin:0;font:italic 29px/1.2 Georgia,serif;font-weight:400;text-wrap:balance}
.sound-start-card p{margin:14px 0 22px;font-size:14px;line-height:1.5;color:var(--muted)}
.sound-start-card button{display:block;width:100%;min-height:48px;border-radius:28px;font-size:16px;line-height:1.4;padding:12px}
#begin-sound{background:var(--mint);color:#17352a}
#begin-quiet{margin-top:6px;color:#afc6ba;font-size:14px}
.peel-copy{display:none;position:absolute;z-index:2;inset:118px 18px 20px;align-items:center;justify-content:center;pointer-events:none}
.complete .peel-copy{display:flex;animation:reward-in .6s .2s ease-out both}
canvas{transition:opacity .5s}
.complete canvas{opacity:.38;transition-delay:.45s}
.endless.complete .peel-copy{display:none}
.endless.complete canvas{opacity:1;transition-delay:0s}
.endless.complete .active-cue{display:block}
.completion-card{width:100%;max-width:368px;max-height:100%;display:flex;flex-direction:column;overflow:hidden;border:1px solid #c8f3dc3d;border-radius:28px;background:linear-gradient(145deg,#1a302aef,#101d1ff5 66%);box-shadow:0 20px 65px #0007,inset 0 1px 0 #e1f8e915;backdrop-filter:blur(16px);pointer-events:auto;text-align:center}
.completion-details{padding:24px 20px 20px;min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
.completion-mark{display:grid;place-items:center;width:48px;height:48px;margin:0 auto 14px;color:#c8f3dc;border-radius:50%;background:#c8f3dc09;box-shadow:0 0 32px #c8f3dc12}
.completion-mark svg{width:32px;height:32px}
.completion-eyebrow{color:#97b5a6;font-size:12px;line-height:1.4;letter-spacing:1px;text-transform:uppercase;margin:0 0 8px}
h1{font:italic 32px/1.13 Georgia,serif;letter-spacing:-.8px;font-weight:400;margin:0;text-wrap:balance}
.perfect-release h1{color:#faf0c6}
.perfect-release .completion-mark{color:#e7dfb0;box-shadow:0 0 36px #e7dfb018}
.reward-score{display:flex;align-items:baseline;justify-content:center;gap:9px;margin-top:20px;font-variant-numeric:tabular-nums}
.reward-score b{font-size:40px;line-height:1;font-weight:400;letter-spacing:-1px;color:#d9f5e5}
.reward-score>span{font-size:14px;color:#a7c1b2}
#reward-breakdown{font-size:13px;line-height:1.5;color:#8ea99d;margin:10px 0 0}
#reward-discovery{font-size:14px;line-height:1.4;color:#f2e2a7;padding:12px 0 0;margin:16px 0 0;border-top:1px solid #dece902d}
.peel-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px 12px;margin:22px 0 0;padding-top:18px;border-top:1px solid #c8f3dc20;text-align:left}
.peel-stats div{min-width:0}.peel-stats dt{font-size:14px;line-height:1.35;color:#a6c3b5}.peel-stats dd{font-size:23px;line-height:1.3;color:#e3f3e9;font-variant-numeric:tabular-nums;margin:5px 0 0;overflow-wrap:anywhere}
.stats-explanation{margin-top:18px;text-align:left;font-size:14px;line-height:1.5;color:#a6c3b5}.stats-explanation summary{padding:8px 0;cursor:pointer;color:#cee7da}.stats-explanation p{margin:8px 0 0}
.finish-actions button:disabled{opacity:.55;cursor:default}
.finish-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex-shrink:0;padding:16px;border-top:1px solid #c8f3dc16;background:#10211f80}
.finish-actions button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:104px;padding:12px 8px;border-radius:16px;border:1px solid #c8f3dc35;font-size:16px;color:#deeee5;line-height:1.3}
.finish-actions button svg{width:22px;height:22px;margin-bottom:2px}
.finish-actions button small{font-size:13px;line-height:1.3;color:#94b6a4}
.finish-actions .next-peel{background:var(--mint);border-color:var(--mint);color:#14362a}
.finish-actions .next-peel small{color:#3b6452}
.finish-actions button:active{transform:translateY(1px);filter:brightness(.94)}
@keyframes reward-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
/* One modal, one scroll region. Its heading and return button never scroll away. */
#menu-dialog{position:fixed;inset:max(12px,env(safe-area-inset-top)) 0 calc(84px + env(safe-area-inset-bottom));width:min(94vw,440px);height:min(720px,calc(100svh - 112px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));height:min(720px,calc(100dvh - 112px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));max-height:none;max-width:none;margin:auto;padding:0;border:1px solid #a6d0bb30;border-radius:24px;background:#101c20;color:var(--text);box-shadow:0 22px 80px #0009;overflow:hidden;touch-action:pan-y}
#menu-dialog[open]{display:flex;flex-direction:column}
#menu-dialog::backdrop{background:#030b11ce;backdrop-filter:blur(10px)}
.dialog-heading{display:flex;align-items:center;gap:8px;padding:12px 16px;flex-shrink:0;border-bottom:1px solid var(--edge);background:#101c20}
.dialog-heading h2{font:italic 27px/1.2 Georgia,serif;margin:0;flex:1;min-width:0}
.dialog-heading button{display:grid;place-items:center;min-width:44px;height:44px;border-radius:50%;color:#bdd8ca}
#menu-back{margin-left:-7px}
#close-menu{font:30px/1 Arial,sans-serif;background:#c8f3dc08}
.menu-scroll-frame{position:relative;flex:1;min-height:0;isolation:isolate}
.menu-scroll{height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding:20px;scroll-padding:20px 0 76px;scrollbar-width:none}
.menu-scroll::-webkit-scrollbar{display:none}
.menu-scroll:focus-visible{outline:2px solid var(--mint);outline-offset:-3px}
.menu-scroll-frame::before{content:"";position:absolute;z-index:1;top:0;left:0;right:12px;height:22px;background:linear-gradient(#101c20,transparent);pointer-events:none;opacity:0;transition:opacity .15s}
.menu-scroll-frame[data-scrolled=true]::before{opacity:1}
.menu-scroll-track{position:absolute;z-index:2;right:6px;top:12px;bottom:12px;width:3px;border-radius:3px;background:#c8f3dc14;pointer-events:none}
.menu-scroll-track span{position:absolute;top:0;left:0;width:100%;border-radius:3px;background:#b8decd99}
.menu-scroll-cue{position:absolute;z-index:2;bottom:0;left:0;right:12px;display:flex;justify-content:center;padding:28px 12px 10px;background:linear-gradient(transparent,#101c20e8 35%,#101c20);pointer-events:none}
.menu-scroll-cue button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px;min-height:44px;border:1px solid #b4d8c750;border-radius:24px;background:#20342f;color:#dcf4e7;font-size:14px;box-shadow:0 4px 18px #0004;pointer-events:auto}
.menu-scroll-cue button:active{background:#2b443b}
.menu-scroll-cue svg{width:18px;height:18px}
.menu-panel{width:100%;min-width:0}
.menu-footer{padding:12px 20px;flex-shrink:0;border-top:1px solid var(--edge);background:#101c20}
.menu-footer button{width:100%;border-radius:24px;background:var(--mint);color:#17352a;font-size:16px;min-height:48px}
.eyebrow{font-size:12px;color:var(--muted);letter-spacing:1px;text-transform:uppercase}
.current-object{text-align:center;padding:0 0 18px;border-bottom:1px solid var(--edge)}
.device-control{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
.device-control button{display:grid;place-items:center;width:44px;border-radius:50%;border:1px solid var(--edge);color:#adcabd}
.device-control>div{display:flex;flex-direction:column;gap:5px;font-size:18px}
.device-control small{font-size:12px;color:var(--muted)}
.menu-links{display:grid;margin:8px 0}
.community-total{margin:18px 0 8px;padding:16px;border:1px solid var(--edge);border-radius:16px;background:#192d28}
.community-total>div{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;font-size:16px;color:#cee5d8}
.community-total strong{font-size:24px;line-height:1.3;font-weight:400;color:var(--mint);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;max-width:100%}
.community-total p{font-size:14px;line-height:1.5;margin:8px 0 0;color:var(--muted)}
.community-total>.community-likes{align-items:center;margin-top:16px;padding-top:14px;border-top:1px solid var(--edge);gap:12px}
.like-peel{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:10px 14px;border:1px solid #c8f3dc35;border-radius:26px;background:#10241d;font-size:15px;color:#d7e9df}
.like-heart{display:inline-block;font-size:22px;line-height:1}
.like-peel[aria-pressed=true]{border-color:#ef9bb65c;background:#3a242e;color:#ffdbe6}
.like-peel[aria-pressed=true] .like-heart{animation:like-bloom .4s ease-out}
.like-peel:active{transform:scale(.97)}
.likes-total{display:flex;align-items:baseline;gap:6px;color:var(--muted);font-size:14px;flex-wrap:wrap}
.likes-total strong{color:#f3d4dd;font-size:22px}
#likes-status{font-size:14px;color:#e2cfad}
@keyframes like-bloom{0%{transform:scale(.8)}55%{transform:scale(1.18)}100%{transform:scale(1)}}
.menu-links>button{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:78px;border-bottom:1px solid var(--edge);padding:15px 4px;text-align:left;font-size:17px}
.menu-links>button>span:first-child{display:block;min-width:0}
.menu-links small{display:block;font-size:14px;line-height:1.4;margin-top:5px;color:var(--muted)}
.menu-links>button>span:last-child{font-size:26px;color:#88ab99}
.menu-links>button:active{background:#c8f3dc08}
.reset{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;color:var(--muted);font-size:14px;margin-top:12px;padding:8px}
.section-note,.soundscape-intro,.reward-rules,.save-note,.soundscape-note{font-size:14px;line-height:1.55;color:var(--muted);margin:0 0 14px}
.menu-intro{font:italic 32px/1.2 Georgia,serif;color:#e2f0e7;margin:0 0 18px;text-wrap:balance}
.endless-switch{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:88px;padding:16px;border:1px solid var(--edge);border-radius:16px;background:#192d28;font-size:17px;cursor:pointer}
.endless-switch small{display:block;color:var(--muted);font-size:14px;line-height:1.5;margin-top:6px}
.endless-switch input{width:26px;height:26px;flex-shrink:0;accent-color:var(--mint);cursor:pointer}
.endless-choices{display:grid;gap:10px}
.endless-choices button{display:flex;flex-direction:column;gap:6px;min-height:82px;text-align:left;padding:16px;border:1px solid var(--edge);border-radius:14px;background:#192a294a;font-size:16px}
.endless-choices button small{font-size:14px;line-height:1.5;color:var(--muted)}
.endless-choices button[aria-pressed=true]{border-color:#b0e7ca80;background:#263935}
.endless-note{margin-top:18px}
.support-note{padding:16px;border:1px solid var(--edge);border-radius:16px;background:#192d28;margin:24px 0}
.support-note p{font-size:14px;line-height:1.6;color:var(--muted);margin:8px 0 0}
.support-note p:first-child{font-size:16px;color:#d4e9dc;margin:0}
.support-link{display:flex;justify-content:center;align-items:center;gap:12px;min-height:52px;padding:14px 18px;border-radius:28px;background:var(--mint);color:#17352a;font-size:16px;line-height:1.4;text-decoration:none;text-align:center;touch-action:manipulation}
.support-link:focus-visible{outline:2px solid var(--mint);outline-offset:4px}
.support-caption{margin-top:14px;text-align:center}
.menu-panel h3{font-size:16px;line-height:1.4;font-weight:400;margin:24px 0 12px;color:#deeee6}
.menu-panel h3:first-child{margin-top:0}
.device-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.object-filters{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 12px}
.object-filters button{min-height:44px;padding:8px 12px;border:1px solid var(--edge);border-radius:24px;font-size:14px;background:#142321;color:#bdcec7}
.object-filters button[aria-pressed=true]{background:#c8f3dc;color:#153b2e;border-color:#c8f3dc}
.object-browse{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.object-browse .section-note{margin:0;font-size:13px}
.object-browse button{padding:9px 13px;min-height:44px;border:1px solid var(--edge);border-radius:12px;color:#dbeee3;background:#1b302a;font-size:14px}
.device-choice[hidden]{display:none}
.device-choice{padding:14px 10px;border:1px solid var(--edge);border-radius:14px;text-align:left;display:flex;flex-direction:column;justify-content:center;gap:9px;min-height:100px;background:#192a294a}
.device-choice img{display:block;object-fit:contain;width:100%;height:110px;align-self:center}
.device-choice .piece-count{font-size:12px;line-height:1.4;color:#d2d7b0}.device-choice .object-name{font-size:15px;line-height:1.3;color:#deeee6}
.device-choice small{font-size:12px;line-height:1.45;color:#9ab5a6}
.device-choice[aria-pressed=true]{background:#20382d;border-color:var(--mint)}
.device-choice:disabled{border-style:dashed;background:#0d1618}
.device-choice .mastered{color:#eadcac}
.texture-control{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px}
.texture-control button{min-height:48px;padding:8px 4px;border:1px solid var(--edge);border-radius:12px;font-size:14px;color:#adcbba;background:#172822}
.texture-control button{display:flex;align-items:center;justify-content:center;gap:6px}
.texture-icon{font:26px/1 Georgia,serif}
.texture-control button[aria-pressed=true]{background:var(--mint);color:#143026;border-color:var(--mint)}
.sound-button{display:flex;gap:8px;align-items:center;justify-content:center;border:1px solid var(--edge);border-radius:24px;padding:9px 16px;font-size:14px;margin:0 0 18px;background:#c8f3dc07}
.sound-off{display:none}
.sound-button[aria-pressed=false] .sound-waves{display:none}
.sound-button[aria-pressed=false] .sound-off{display:block}
.sound-button[aria-pressed=false]{color:var(--muted)}
.peel-volume,.ambience-volume{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;font-size:14px;line-height:1.5;min-height:48px;color:#c5dbd0;margin:12px 0}
input[type=range]{width:130px;max-width:100%;min-height:44px;accent-color:var(--mint);touch-action:pan-x;margin:0}
input:disabled{opacity:.4}
#ambience-name{font-size:13px;color:var(--muted);margin-left:9px}
.ambience-choices{display:grid;gap:8px}
.ambience-choices button{position:relative;display:flex;flex-direction:column;gap:5px;min-height:72px;border:1px solid var(--edge);border-radius:12px;padding:13px 36px 13px 14px;text-align:left;font-size:16px;background:#192a294a}
.ambience-choices button small{font-size:13px;line-height:1.5;color:var(--muted)}
.ambience-choices button[aria-pressed=true]{border-color:#b0e7ca80;background:#263935}
.ambience-choices button[aria-pressed=true]::after{content:'✓';position:absolute;right:14px;top:16px;color:var(--mint)}
.journey{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px;padding-bottom:16px;color:#e0dbaf;font-size:17px}
.journey small{font-size:14px;color:var(--muted)}
.unlock-goal{border:1px solid var(--edge);border-radius:12px;padding:14px;margin:0 0 16px;color:#e1eacf;font-size:14px;line-height:1.5}
.unlock-goal progress{display:block;width:100%;height:5px;margin-top:12px;accent-color:#d9e6b9}
.flow-rules{color:#b3cabc;font-size:14px;margin:0 0 12px;line-height:1.55}
.flow-rules summary{cursor:pointer;padding:10px 0;min-height:44px}
.flow-rules p{color:var(--muted);margin:5px 0 14px}
.finish-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.finish-choice{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:94px;padding:12px 5px;border:1px solid var(--edge);border-radius:12px;font-size:14px;background:#192a294a}
.finish-choice::before{content:'';width:25px;height:25px;border-radius:50%;background:linear-gradient(135deg,#f1fff17a,#65857770);border:1px solid #e6f8ed50}
.finish-pearl::before{background:linear-gradient(135deg,#f7e5de,#d5e7ff,#fff1cf)}
.finish-frost::before{background:linear-gradient(135deg,#eef4f6,#dce7ed,#fafcf7)}
.finish-ice::before{background:linear-gradient(135deg,#c9edfa,#e9faff,#b6d8ec)}
.finish-rose::before{background:linear-gradient(135deg,#f4cfce,#fae5d5,#dcbecb)}
.finish-aurora::before{background:linear-gradient(135deg,#79ead0,#aab5ff,#ecd0f5)}
.finish-prism::before{background:linear-gradient(135deg,#edb9e9,#ace8ee,#f2d6a0)}
.finish-gold::before{background:linear-gradient(135deg,#eac477,#fff3bc,#bd9760)}
.finish-choice small{font-size:12px;color:var(--muted)}
.finish-choice[aria-pressed=true]{border-color:#d6e3b799;background:#2d3b30}
.set-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
.set-choice{display:flex;flex-direction:column;text-align:left;gap:8px;border:1px solid var(--edge);border-radius:12px;padding:14px;min-height:82px;font-size:14px;line-height:1.4;background:#192a294a}
.set-choice small{font-size:12px;color:var(--muted)}
.set-choice.collected{border-color:#d6c99160;background:#373b283d}
.set-choice.collected small{color:#e4d7ae}
.save-note,.soundscape-note{font-size:13px}
.sync-line p{font-size:13px;line-height:1.5;color:var(--muted);margin:8px 0}
.retry-load,.retry-sync{font-size:14px;color:#e4d7ae;text-decoration:underline;padding:7px 0}
@media(min-width:700px){body{background:#080e11}.experience{border-inline:1px solid #bce0cf0b}}
@media(max-width:355px){.masthead{left:16px;right:16px;gap:8px}.wordmark{font-size:34px}.menu-button{padding:0 12px}.progress-line{margin-right:0;width:18px}.menu-scroll{padding:16px}.dialog-heading h2{font-size:25px}.device-grid{gap:8px}}
@media(max-height:600px){.peel-copy{top:104px;bottom:12px}.completion-details{padding:16px}.completion-mark{width:36px;height:36px;margin-bottom:8px}.completion-mark svg{width:28px;height:28px}h1{font-size:27px}.reward-score{margin-top:14px}.reward-score b{font-size:34px}.finish-actions{padding:12px;gap:8px}.finish-actions button{min-height:88px}.active-cue{top:calc(max(10px,env(safe-area-inset-top)) + 55px)}.menu-links>button{min-height:68px;padding-block:11px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}