@font-face{font-family:Fredoka;src:url('./assets/Fredoka.ttf');font-weight:300 700}*{box-sizing:border-box}html,body,main{margin:0;width:100%;height:100%;overflow:hidden;background:#f3e7bf;color:#39332e;font-family:Fredoka,system-ui,sans-serif}main{position:fixed;inset:0}[hidden]{display:none!important}#still,#opening,#world,#marks{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}#marks{touch-action:none;z-index:2}#words{position:fixed;isolation:isolate;z-index:4;top:clamp(25px,5vh,60px);left:50%;transform:translateX(-50%);width:min(560px,calc(100vw - 64px));padding:24px 32px;text-align:center;pointer-events:none;transition:opacity .7s}#words:before{content:'';position:absolute;z-index:-1;inset:-18px -24px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 180' preserveAspectRatio='none'%3E%3Cpath fill='%23ffe998' d='M66 145C5 145 0 75 61 67C60 23 125 8 161 39C190 0 264 3 284 36C333 0 392 11 409 44C460 19 523 43 525 81C590 74 618 143 551 157C466 181 153 177 66 145Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}#words.quiet{opacity:0}#speech{font-size:clamp(18px,2vw,25px);line-height:1.4;text-wrap:balance;margin:0}#dock{position:fixed;z-index:5;bottom:max(20px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;gap:7px;padding:7px;background:#fff8e7cf;border:1px solid #302a2010;border-radius:30px;backdrop-filter:blur(14px)}button{font:500 16px Fredoka,sans-serif;cursor:pointer;border:0;background:transparent;color:inherit}#dock button{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;font-size:25px}#dock button:hover{background:#e9dfd2}#dock button[aria-pressed=true]{background:#f4cbb6}svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}#tell{position:fixed;z-index:6;right:max(22px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));min-width:44px;height:44px;padding:4px 10px;color:#fff;font-size:28px;font-weight:400;letter-spacing:-3px;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;text-shadow:0 1px 4px #000,0 2px 14px #0008;border-radius:12px;background:#302c253b;backdrop-filter:blur(12px)}#tell:hover,#tell[aria-expanded=true]{background:#302c2566}#ideaForm{position:fixed;z-index:6;left:50%;transform:translateX(-50%);bottom:calc(94px + var(--keyboard-inset,0px));width:min(680px,calc(100vw - 36px));padding:32px 24px 20px;background:linear-gradient(145deg,#302b257a,#201e1abd);border:1px solid #ffffff30;border-radius:18px;box-shadow:0 10px 40px #0002;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);color:#fff}#closeIdea{position:absolute;right:9px;top:3px;width:32px;height:32px;font-size:23px;color:#fff9}#closeIdea:hover{color:#fff}.idea-entry{display:flex;align-items:flex-end;gap:18px;border-bottom:1px solid #ffffff8c;padding:8px 0 12px}.idea-entry:focus-within{border-bottom-color:#fff}#idea{min-width:0;flex:1;resize:none;max-height:120px;border:0;background:transparent;color:#fff;font:400 clamp(20px,2.5vw,25px)/1.4 Fredoka,sans-serif;padding:0;text-shadow:0 1px 8px #0003}#idea::placeholder{color:#ffffffe0}#idea:focus-visible{outline:none}#submit{flex-shrink:0;width:40px;height:40px;border-radius:50%;background:#ffffff17;color:white;font-size:25px}#submit:hover{background:#ffffff30}#options{position:fixed;z-index:6;right:18px;bottom:94px;width:min(400px,calc(100vw - 36px));max-height:60vh;overflow:auto;padding:18px;background:#fff8e7;border-radius:20px;box-shadow:0 8px 30px #33201916;font-size:14px}#options>button{padding:8px 12px;border-radius:20px;background:#eee9df;margin:0 4px 12px 0}summary{cursor:pointer;color:#726a61}pre{font:11px monospace;white-space:pre-wrap;overflow-wrap:anywhere}button:disabled{opacity:.45}button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid #df654b;outline-offset:3px}@keyframes twinkle{50%{opacity:.35;transform:scale(.96)}}@media(max-width:600px){#words{padding:20px 20px}}@media(prefers-reduced-motion:reduce){#words{transition:none}}

#stars{position:fixed;z-index:5;top:max(18px,env(safe-area-inset-top));left:max(18px,env(safe-area-inset-left));display:flex;align-items:center;gap:8px;min-width:62px;padding:8px 13px;border:1px solid #e5bd5526;border-radius:24px;background:#fff8e7d4;backdrop-filter:blur(12px);font-size:20px;pointer-events:none}#stars>span:first-child{color:#d89723;font-size:24px}#stars.earned{animation:star-earned .8s ease-out}@keyframes star-earned{35%{transform:scale(1.3);box-shadow:0 0 32px #ffd65caa}100%{transform:scale(1)}}@media(max-width:700px){#words{top:75px}}@media(prefers-reduced-motion:reduce){#stars.earned{animation:none}}

#drawingTools{position:fixed;z-index:5;left:50%;transform:translateX(-50%);bottom:90px;display:flex;align-items:center;gap:8px;padding:6px 8px;background:#fff8e7e8;border:1px solid #dfc58a66;border-radius:28px;backdrop-filter:blur(14px)}#drawingTools button{min-height:40px;padding:8px 18px;border-radius:22px}#applyDrawing{background:#39332e;color:#fff8e7}#clearDrawing{font-size:25px;padding:4px 10px!important}

#words{width:min(650px,calc(100vw - 52px))}#choices{pointer-events:auto;display:flex;justify-content:center;flex-wrap:wrap;gap:9px;margin-top:16px}#choices:empty{margin-top:0}#choices button{background:#fff8e7d9;border:1px solid #d7ae584d;border-radius:24px;padding:10px 18px;font-size:17px;min-height:42px}button.primary,#choices button.primary{background:#39332e;color:#fff8e7;border:0}#choices button:hover{box-shadow:0 3px 12px #7f642329}#stars{gap:16px}#stars .metric{display:flex;align-items:center;gap:7px;font-size:19px;color:#39332e}#stars .experiment-label{color:#8b6c91;font-size:14px}#stars .star{color:#d89723;font-size:25px}#composerHint{margin:0 16px 10px 0;font-size:15px;color:#fff9}#composerHint:empty{display:none}#verdict{position:fixed;z-index:4;bottom:100px;left:20px;width:min(390px,calc(100vw - 40px));padding:13px 17px;background:#fff8e7e6;backdrop-filter:blur(14px);border-radius:22px;box-shadow:0 4px 20px #46351a0c}.verdict-chips{display:flex;flex-wrap:wrap;gap:8px}.verdict-chips span{padding:6px 9px;border-radius:14px;background:#f4e8ca;font-size:14px}#encouragement{font-size:16px;line-height:1.35;margin:10px 0 0}#intro{position:fixed;z-index:10;inset:0;display:grid;place-items:center;background:#f4e7be66;backdrop-filter:blur(8px);padding:24px}@media(max-width:700px){#words{top:88px;padding:18px 14px}#speech{font-size:19px}#choices{gap:7px}#choices button{font-size:15px;padding:8px 12px}#verdict{bottom:105px}}

#idle,#ripple{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}#idle{z-index:1}#ripple{z-index:3}#ripple{object-fit:fill}

/* A single full-screen statement introduces the technical preview. */
#intro{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f7eac3;backdrop-filter:none;padding:32px;overflow:hidden;gap:clamp(45px,8vh,90px)}.preview-title{font-size:clamp(54px,10vw,148px);font-weight:700;line-height:1.02;letter-spacing:-.04em;text-align:center;margin:0;color:#39332e}#start{padding:15px 29px;border-radius:32px;font-size:21px}#start span{margin-left:14px}@media(max-width:480px){#intro{padding:20px}.preview-title{font-size:clamp(46px,11vw,65px)}#start{font-size:19px}}
#intro{overflow-x:hidden}

.preview-sun{position:absolute;right:6vw;top:7vh;width:clamp(95px,14vw,180px);height:auto;stroke:none;pointer-events:none}.preview-title,#intro>#start{position:relative;z-index:1}@media(max-width:480px){.preview-sun{right:14px;top:35px;width:115px}}

.preview-copy{position:relative;z-index:1;text-align:center}.preview-context{font-size:clamp(23px,3.2vw,44px);font-weight:600;line-height:1.2;margin:30px 0 0;color:#39332e;letter-spacing:-.02em}@media(max-width:480px){.preview-context{font-size:24px;margin-top:24px}}

.preview-sun{animation:sun-float 5s ease-in-out infinite}.preview-sun .sun-rays{transform-box:view-box;transform-origin:90px 90px;animation:sun-turn 45s linear infinite}@keyframes sun-float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(3deg)}}@keyframes sun-turn{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.preview-sun,.preview-sun .sun-rays{animation:none}}

#worldShell{position:fixed;z-index:1;touch-action:none}#worldSurface{position:absolute;inset:0;transform-origin:50% 50%;border-radius:17px;background:#f7eac3;box-shadow:0 8px 35px #6b532923;will-change:transform}#worldSurface>img,#worldSurface>video,#marks{border-radius:13px}#worldFrame{position:absolute;inset:-7px;z-index:6;border:3px solid #fffbec;border-radius:22px;box-shadow:0 0 0 1px #b997585e,inset 0 0 0 1px #b9975838;pointer-events:none;touch-action:none}#worldFrame:focus-visible{outline:3px solid #ce8c40;outline-offset:7px}.frame-edge{position:absolute;pointer-events:auto;cursor:grab;touch-action:none}.frame-edge.top,.frame-edge.bottom{height:24px;left:0;right:0}.frame-edge.top{top:-12px}.frame-edge.bottom{bottom:-12px}.frame-edge.left,.frame-edge.right{width:24px;top:0;bottom:0}.frame-edge.left{left:-12px}.frame-edge.right{right:-12px}.frame-grip{position:absolute;width:13px;height:13px;border:2px solid #d5bb81;border-radius:50%;background:#fff9e8;pointer-events:auto;cursor:grab;touch-action:none}.nw{left:-7px;top:-7px}.ne{right:-7px;top:-7px}.sw{left:-7px;bottom:-7px}.se{right:-7px;bottom:-7px}.frame-turn{position:absolute;left:50%;top:-16px;transform:translateX(-50%);background:#fff9e8;border:1px solid #d8c18f;border-radius:16px;padding:0 10px;font-size:25px;line-height:29px;pointer-events:auto;cursor:grab;touch-action:none;color:#977b43}#tiltBadge{position:absolute;left:50%;bottom:-38px;transform:translateX(-50%);background:#fff8e7dc;padding:4px 10px;border-radius:14px;font-size:14px;opacity:0;transition:opacity .15s}.turning #tiltBadge{opacity:1}.turning .frame-edge,.turning .frame-grip,.turning .frame-turn{cursor:grabbing}.turning #worldFrame{box-shadow:0 0 0 2px #d4a64c88,0 0 30px #ffe49c66}#worldShell[aria-disabled=true] .frame-edge,#worldShell[aria-disabled=true] .frame-grip,#worldShell[aria-disabled=true] .frame-turn{cursor:default}@media(max-width:700px){#worldFrame{inset:-5px;border-width:2px;border-radius:18px}.frame-turn{font-size:22px;top:-15px}.frame-grip{width:12px;height:12px}}@media(prefers-reduced-motion:reduce){#tiltBadge{transition:none}}

.paper-fold{position:absolute;top:4px;left:4px;width:72px;height:72px;border:0;border-radius:0;padding:0;pointer-events:auto;touch-action:none;cursor:grab;background:transparent;filter:drop-shadow(3px 5px 4px #69543955);clip-path:polygon(0 0,100% 0,0 100%);z-index:8}.paper-fold span{position:absolute;inset:0;background:linear-gradient(135deg,#fffdf4 0%,#f5edda 45%,#ded1af 49%,#fffdf4 51%,#fff9e8 100%);clip-path:polygon(0 0,100% 0,0 100%);transition:filter .18s}.paper-fold:hover span,.paper-fold:focus-visible span{filter:brightness(1.07)}.paper-fold:focus-visible{outline:3px solid #d99626}.folding .paper-fold{cursor:grabbing}.folding .paper-fold span{filter:brightness(1.07)}@media(max-width:700px){.paper-fold{width:56px;height:56px}}

/* Keep the world HUD inset from the paper, with space for the fold/turn handles. */
#stars{top:calc(var(--world-top,0px) + 84px);left:calc(var(--world-left,0px) + 16px)}
#dock{left:min(var(--world-center,50%),calc(100vw - var(--world-right,0px) - 152px));bottom:calc(var(--world-bottom,0px) + 16px)}
#tell{right:calc(var(--world-right,0px) + 16px);bottom:calc(var(--world-bottom,0px) + 16px)}
#drawingTools{left:var(--world-center,50%);bottom:calc(var(--world-bottom,0px) + 82px)}
#options{right:calc(var(--world-right,0px) + 16px);bottom:calc(var(--world-bottom,0px) + 82px)}
#ideaForm{bottom:calc(var(--world-bottom,0px) + 90px + var(--keyboard-inset,0px))}
#verdict{bottom:calc(var(--world-bottom,0px) + 96px)}
@media(max-width:700px){#words{top:clamp(25px,5vh,60px)}}

/* Width is a first-class paper manipulation; corner grips retain world turning. */
.narrow-recording{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;border-radius:13px;object-fit:fill}
.paper-width{position:absolute;top:50%;transform:translateY(-50%);width:25px;height:68px;padding:0;z-index:9;pointer-events:auto;touch-action:none;cursor:ew-resize;border:1px solid #b9975866;border-radius:18px;background:#fff9e8e6;box-shadow:0 2px 10px #5d492015;display:grid;place-items:center;transition:background .15s,box-shadow .15s}
.paper-width[data-side=left]{left:-14px}.paper-width[data-side=right]{right:-14px}.paper-width span{width:13px;height:18px;background:linear-gradient(90deg,transparent 2px,#9c845c 2px,#9c845c 4px,transparent 4px,transparent 8px,#9c845c 8px,#9c845c 10px,transparent 10px);opacity:.8}
.paper-width:hover,.paper-width:focus-visible{background:#fffdf4;box-shadow:0 0 0 4px #ffd76a44,0 2px 12px #5d492020}.paper-resizing .paper-width{cursor:ew-resize;background:#fffdf4;box-shadow:0 0 0 4px #ffd76a55}.paper-resizing #worldFrame{box-shadow:0 0 0 1px #d5ae6466,0 0 35px #ffe7a833}
#worldShell[aria-disabled=true] .paper-width{cursor:default;opacity:.5}
.paper-narrow #dock{padding:5px;gap:2px;left:var(--world-center,50%);bottom:calc(var(--world-bottom,0px) + 12px);margin-left:-24px}.paper-narrow #dock button{width:32px;height:34px;font-size:22px}.paper-narrow #tell{right:calc(var(--world-right,0px) + 8px);bottom:calc(var(--world-bottom,0px) + 12px);min-width:34px;width:34px;height:40px;font-size:26px;padding:3px}
.paper-narrow #stars{left:calc(var(--world-left,0px) + 10px);gap:10px;padding:7px 10px}.paper-narrow #stars .metric{font-size:16px;gap:5px}.paper-narrow #stars .experiment-label{font-size:12px}
@media(prefers-reduced-motion:reduce){.paper-width{transition:none}}

.paper-width[aria-disabled=true]{cursor:default;opacity:.45}

/* Keep the child's chosen paper shape when the generated stream takes over. */
.reshaped-world #still,.reshaped-world #world,.reshaped-world #idle{object-fit:cover}
#still,#opening,#world,#idle,#responsivePaper{transition:filter .65s ease,opacity .65s ease}
.scene-thinking #still,.scene-thinking #opening,.scene-thinking #world,.scene-thinking #idle,.scene-thinking #responsivePaper{filter:blur(8px) brightness(1.035)}
/* Moving light stays inside the paper; controls, drawing and frame stay crisp. */
#worldSurface:after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:13px;opacity:0;background:linear-gradient(115deg,transparent 15%,#fff9dc55 43%,#ffffff66 50%,transparent 70%);background-size:250% 100%}
.scene-thinking #worldSurface:after{opacity:.6;animation:paper-dream 4s ease-in-out infinite}
.scene-arriving #worldSurface:after{animation:paper-unveil 1.6s ease-out both}
@keyframes paper-dream{0%,100%{background-position:100% 0;opacity:.15}50%{background-position:0% 0;opacity:.6}}
@keyframes paper-unveil{from{opacity:.45;background-position:100% 0}to{opacity:0;background-position:0% 0}}
@media(prefers-reduced-motion:reduce){#still,#opening,#world,#idle,#responsivePaper{transition:none}.scene-thinking #still,.scene-thinking #opening,.scene-thinking #world,.scene-thinking #idle,.scene-thinking #responsivePaper{filter:blur(4px)}.scene-thinking #worldSurface:after,.scene-arriving #worldSurface:after{animation:none;opacity:0}}