:root{--bg:#eaf3f1;--card:#fdfefc;--paper:var(--card);--ink:#2a2840;--muted:#585672;--accent:#c73e08;--accent-ink:#fff;--accent-hover:#a93306;--accent-soft:#ffe3d6;--secondary:#1f78c8;--secondary-deep:#14558f;--pick:#1a7f4e;--pick-fill:#ffd23f;--disabled-bg:#d9dde3;--disabled-ink:#4b4f5c;--radius:28px;--wobble-a:26px 40px 24px 42px / 38px 24px 42px 26px;--wobble-b:40px 24px 44px 26px / 24px 40px 26px 44px;--stroke:4px;--shadow-ink:0 5px 0 var(--ink);--spine:linear-gradient(90deg, #2a284000, #2a284033 50%, #2a284000);--tap:64px;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;--font-display:"Jua", "Pretendard Variable", sans-serif;--font-body:"Pretendard Variable", "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;--fs-btn:28px;--fs-ui:16px;--fast:.15s;--turn-dur:.65s;--ease-out:cubic-bezier(.2, .8, .2, 1);--paper-tex:url(/paper.png);font-family:var(--font-body);color:var(--ink);background:var(--bg);-webkit-text-size-adjust:100%}*,:before,:after{box-sizing:border-box}body{background:var(--bg) var(--paper-tex) repeat;min-height:100dvh;font-size:var(--fs-ui);word-break:keep-all;overflow-wrap:break-word;margin:0;line-height:1.6;overflow-x:hidden}#root{display:flow-root}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;border:none}:focus-visible{outline:4px solid var(--secondary);outline-offset:4px}.display{font-family:var(--font-display);font-weight:400}.big-button{justify-content:center;align-items:center;gap:var(--sp-3);min-height:var(--tap);padding:var(--sp-3) var(--sp-6);font-family:var(--font-display);font-size:var(--fs-btn);background:var(--accent);color:var(--accent-ink);border:var(--stroke) solid var(--ink);border-radius:var(--wobble-a);box-shadow:var(--shadow-ink);transition:transform var(--fast) var(--ease-out);line-height:1.2;display:inline-flex}.big-button:active{box-shadow:0 1px 0 var(--ink);transform:translateY(5px)}.big-button.soft{background:var(--paper);color:var(--ink)}.big-button:disabled{background:var(--disabled-bg);color:var(--disabled-ink);box-shadow:none;cursor:not-allowed;border-style:dashed;transform:none}.icon-button{min-width:48px;min-height:48px;padding:0 var(--sp-2);background:var(--paper);border:var(--stroke) solid var(--ink);box-shadow:0 3px 0 var(--ink);transition:transform var(--fast) var(--ease-out);border-radius:50% 44% 52% 46%;flex:none;place-items:center;font-size:22px;line-height:1;display:grid}.icon-button:active{box-shadow:0 1px 0 var(--ink);transform:translateY(3px)}@media (hover:hover){.big-button:not(:disabled):hover{background:var(--accent-hover);transform:translateY(-2px)}.big-button.soft:not(:disabled):hover{background:var(--accent-soft)}.big-button:not(:disabled):active{transform:translateY(5px)}.icon-button:hover{background:var(--accent-soft);transform:translateY(-2px)}}@media (prefers-reduced-motion:reduce){.big-button,.icon-button{transition:none}}.settings-backdrop{z-index:10;background:#2a284099;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.settings{gap:var(--sp-2);width:100%;max-width:560px;max-height:94%;padding:var(--sp-5) var(--sp-4) var(--sp-5);color:var(--ink);background:var(--paper) var(--paper-tex);border:var(--stroke) solid var(--ink);box-shadow:0 -6px 0 var(--ink);animation:sheet-in .25s var(--ease-out);border-bottom:0;border-radius:40px 40px 0 0/28px 28px 0 0;display:grid;overflow-y:auto}@keyframes sheet-in{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}.settings h2{text-align:center;margin:0;font-size:36px;line-height:1.2}.settings-row{gap:var(--sp-2);padding:var(--sp-3) 0;border-bottom:3px dashed #b7bccb;display:grid}.settings-head{justify-content:space-between;align-items:baseline;gap:var(--sp-3);font-size:18px;font-weight:800;line-height:1.4;display:flex}.settings-head output{text-align:right;min-width:3ch;font-size:26px;line-height:1}.settings-hint{font-size:var(--fs-ui);color:var(--muted);font-weight:500;line-height:1.6}.settings-rate{align-items:center;gap:var(--sp-4);display:flex}.settings-rate button{background:var(--paper);border:var(--stroke) solid var(--ink);width:56px;height:56px;box-shadow:0 4px 0 var(--ink);transition:transform var(--fast) var(--ease-out);border-radius:50%;place-items:center;font-size:30px;font-weight:800;line-height:1;display:grid}.settings-rate button:active{box-shadow:0 1px 0 var(--ink);transform:translateY(3px)}.settings-rate span{text-align:center;min-width:4.5ch;font-size:30px}.settings-chips{gap:var(--sp-2);flex-wrap:wrap;display:flex}.settings-chips button{min-height:48px;padding:0 var(--sp-4);background:var(--paper);border:3px solid var(--ink);border-radius:999px;align-items:center;gap:6px;font-size:18px;font-weight:700;line-height:1.2;display:inline-flex}.settings-chips button.on{background:var(--pick-fill)}.settings-chips button.on:before{content:"✔";font-weight:800}.crange{appearance:none;cursor:pointer;background:0 0;width:100%;height:44px;margin:0}.crange::-webkit-slider-runnable-track{border:3px solid var(--ink);background:linear-gradient(90deg, var(--pick-fill) var(--p), var(--paper) var(--p));border-radius:12px;height:20px}.crange::-moz-range-track{box-sizing:border-box;border:3px solid var(--ink);background:linear-gradient(90deg, var(--pick-fill) var(--p), var(--paper) var(--p));border-radius:12px;height:20px}.crange::-webkit-slider-thumb{appearance:none;border:4px solid var(--ink);background:var(--accent);width:36px;height:36px;box-shadow:0 3px 0 var(--ink);border-radius:50% 46% 52% 48%;margin-top:-11px}.crange::-moz-range-thumb{border:4px solid var(--ink);background:var(--accent);width:28px;height:28px;box-shadow:0 3px 0 var(--ink);border-radius:50% 46% 52% 48%}.crange:focus-visible{outline:none}.crange:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--secondary)}.crange:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px var(--secondary)}.settings>.big-button{margin-top:var(--sp-3);width:100%}@media (hover:hover){.settings-chips button:hover{background:var(--accent-soft)}.settings-chips button.on:hover{background:var(--pick-fill)}.settings-rate button:hover{background:var(--accent-soft);transform:translateY(-2px)}}@media (width>=1024px){.settings-backdrop{align-items:center;padding:24px}.settings{width:min(680px,100%);max-width:none;max-height:calc(100dvh - 48px);padding:var(--sp-5) var(--sp-6);border-bottom:var(--stroke) solid var(--ink);border-radius:var(--wobble-a);box-shadow:0 8px 0 var(--ink)}}@media (prefers-reduced-motion:reduce){.settings{animation:none}.settings-rate button{transition:none}}.home{gap:var(--sp-4);min-height:100dvh;padding:var(--sp-5) var(--sp-4) var(--sp-5);grid-template-rows:minmax(0,1fr) auto;max-width:520px;margin:0 auto;display:grid}.home-cover{justify-items:center;gap:var(--sp-2);padding:var(--sp-5) var(--sp-4) var(--sp-4);text-align:center;background:var(--paper) var(--paper-tex);border:var(--stroke) solid var(--ink);border-radius:var(--wobble-a);box-shadow:0 6px 0 var(--ink);grid-template-rows:auto auto auto auto minmax(180px,1fr);display:grid;position:relative}.home-cover:before{content:"";border:3px dashed var(--secondary);border-radius:var(--wobble-b);opacity:.55;pointer-events:none;position:absolute;inset:14px}.home-badge{background:var(--pick-fill);border:var(--stroke) solid var(--ink);border-radius:50% 46% 52% 48%;place-items:center;width:56px;height:56px;font-size:30px;line-height:1;display:grid;transform:rotate(-6deg)}.home-title{color:var(--accent);text-shadow:3px 3px 0 var(--pick-fill);margin:0;font-size:56px;line-height:1.1}.home-squiggle{width:140px;height:14px;color:var(--secondary);display:block}.home-sub{margin:0;font-size:18px;font-weight:700;line-height:1.5}.home-art{width:100%;margin-top:var(--sp-2);background:var(--paper);border:var(--stroke) solid var(--ink);border-radius:var(--wobble-b);box-shadow:0 3px 0 var(--ink);position:relative;overflow:hidden}.home-art img{height:auto;display:block;position:absolute}.home-art .bg{object-fit:cover;width:100%;height:100%;inset:0}.home-art .home-actor{bottom:3%}.home-art .bear{width:22%;left:6%}.home-art .box{width:24%;left:40%}.home-art .fox{width:26%;right:6%}.home-art .moon{width:44px;top:8px;right:12px}.home-art .star{width:30px}.home-art .s1{top:14px;left:18px}.home-art .s2{width:22px;top:40px;left:46%}.twinkle{animation:2.4s ease-in-out infinite twinkle}.twinkle.late{animation-delay:1.2s}@keyframes twinkle{0%,to{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.85)}}.home-actions{gap:var(--sp-2);justify-items:center;display:grid}.home-actions .big-button{width:100%}.home-new{min-height:72px}.home-settings{min-height:48px;padding:var(--sp-2) var(--sp-4);text-underline-offset:5px;background:0 0;border-radius:999px;font-size:20px;font-weight:700;text-decoration:underline}@media (hover:hover){.home-settings:hover{background:var(--accent-soft)}}@media (width>=1024px){.home{grid-template-rows:minmax(0,1fr) auto auto auto auto auto minmax(0,1fr);grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;width:min(100% - 64px,1200px);max-width:none;height:min(100dvh - 64px,700px);min-height:0;margin:32px auto;padding:0;position:relative}.home:before{content:"";background:var(--paper) var(--paper-tex);border:var(--stroke) solid var(--ink);border-radius:var(--wobble-a);box-shadow:0 8px 0 var(--ink);grid-area:1/1/8/3}.home:after{content:"";z-index:2;background:var(--spine);pointer-events:none;grid-area:1/1/8/3;justify-self:center;width:64px}.home-cover{display:contents}.home-cover:before{display:none}.home-art{z-index:1;grid-area:1/1/8/2;margin:44px}.home-art .bear{width:30%;left:4%}.home-art .box{width:26%;left:38%}.home-art .fox{width:34%;right:4%}.home-art .moon{width:76px;top:16px;right:20px}.home-art .star{width:44px}.home-art .s1{top:24px;left:28px}.home-art .s2{width:30px;top:84px;left:44%}.home-badge,.home-title,.home-squiggle,.home-sub{text-align:center;z-index:1;justify-self:center;position:relative}.home-badge{grid-area:2/2;width:72px;height:72px;font-size:40px}.home-title{margin-top:var(--sp-3);grid-area:3/2;font-size:clamp(64px,11vh,104px)}.home-squiggle{margin:var(--sp-2) 0 var(--sp-3);grid-area:4/2;width:180px;height:18px}.home-sub{margin-bottom:var(--sp-6);grid-area:5/2;font-size:26px}.home-actions{justify-self:center;gap:var(--sp-3);z-index:1;grid-area:6/2;width:min(100% - 96px,440px);position:relative}.home-new{min-height:80px;font-size:32px}.home-actions .soft{min-height:72px;font-size:30px}.home-settings{font-size:22px}}@media (prefers-reduced-motion:reduce){.twinkle{animation:none}}.problem{align-content:center;justify-items:center;gap:var(--sp-5);min-height:100dvh;padding:var(--sp-5) var(--sp-4);text-align:center;display:grid}.problem-art span{font-size:120px;line-height:1;animation:2.4s ease-in-out infinite sway;display:block}@keyframes sway{0%,to{transform:translateY(0)rotate(-3deg)}50%{transform:translateY(-8px)rotate(3deg)}}.problem-body{gap:var(--sp-4);justify-items:center;width:100%;display:grid}.problem-title{margin:0;font-size:34px;line-height:1.3}.problem-actions{gap:var(--sp-3);width:min(100%,360px);display:grid}@media (width>=1024px){.problem{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-content:stretch;align-items:center;gap:0;width:min(100% - 48px,1280px);height:min(100dvh - 48px,640px);min-height:0;margin:24px auto;padding:0;position:relative}.problem:before{content:"";background:var(--paper) var(--paper-tex);border:var(--stroke) solid var(--ink);border-radius:var(--wobble-a);box-shadow:0 8px 0 var(--ink);position:absolute;inset:0}.problem:after{content:"";background:var(--spine);pointer-events:none;width:64px;margin-left:-32px;position:absolute;top:0;bottom:0;left:50%}.problem-art,.problem-body{z-index:1;position:relative}.problem-art span{font-size:220px}.problem-body{padding:0 64px}.problem-title{font-size:52px}.problem-actions{width:min(100%,420px);margin-top:var(--sp-4)}.problem-actions .big-button{min-height:72px;font-size:30px}}@media (prefers-reduced-motion:reduce){.problem-art span{animation:none}}.picture{object-fit:contain;width:100%;height:100%;display:block}.picture-emoji{justify-content:center;align-items:center;line-height:1;display:flex}.scene{aspect-ratio:4/3;border-radius:var(--radius);background:#cdeccf;flex-shrink:0;width:100%;max-width:780px;position:relative;overflow:hidden;container-type:inline-size}@media (orientation:portrait){.scene{aspect-ratio:16/9}}.scene.bg-forest{background:#b8dcb0}.scene.bg-sea{background:#bfe3f5}.scene.bg-castle{background:#e6d9f5}.scene.bg-village{background:#f7e3c4}.scene.bg-meadow{background:#cfeab8}.scene-backdrop{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.scene-bg{opacity:.7;font-size:44px;position:absolute;top:10px;right:14px}.actor{aspect-ratio:1;font-size:13cqw;animation:2.4s ease-in-out infinite breathe;position:absolute;translate:-50%}.actor .picture{filter:drop-shadow(0 4px 3px #0000002e)}.state-mark{z-index:2;font-size:7cqw;animation:1s ease-in-out infinite bounce;position:absolute;top:-6%;right:4%}.actor-body{width:100%;height:100%}.flip{transform:scaleX(-1)}.scene-tint{pointer-events:none;background:0 0;position:absolute;inset:0}.scene.time-night .scene-tint{mix-blend-mode:multiply;opacity:.6;background:#22318f}.scene.time-sunset .scene-tint{mix-blend-mode:multiply;opacity:.55;background:#ff9a52}.worn{z-index:1;aspect-ratio:1;position:absolute}.worn.head{width:30%;bottom:93%;left:50%;translate:-50%}.worn.hand{width:34%;bottom:18%}.worn.hand.on-right{right:-10%}.worn.hand.on-left{left:-10%}.sky-item{aspect-ratio:1;width:13%;position:absolute;top:6%;translate:-50%}@keyframes breathe{0%,to{transform:translateY(0)}50%{transform:translateY(-4%)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-30%)}}.reading{align-items:center;gap:var(--sp-3);height:100dvh;padding:var(--sp-3) var(--sp-3) var(--sp-5);flex-direction:column;display:flex}.reading-stage{flex-shrink:0;justify-content:center;width:100%;display:flex;position:relative}.reading-stage .scene{border:var(--stroke) solid var(--ink);border-radius:var(--wobble-b);box-shadow:0 4px 0 var(--ink)}.reading-body{gap:var(--sp-3);flex-direction:column;flex:1;width:100%;max-width:780px;min-height:0;display:flex}.reading-top{justify-content:space-between;align-items:center;gap:var(--sp-2);width:100%;max-width:780px;display:flex}.reading-tools{gap:var(--sp-2);display:flex}.rate{align-items:center;gap:4px;display:flex}.rate .icon-button{min-width:44px;padding:8px 10px;font-weight:700}.rate-value{text-align:center;min-width:42px;color:var(--muted);font-size:16px}.reading-step{white-space:nowrap;font-size:22px}.reading-text{white-space:pre-line;flex:1;width:100%;min-height:0;margin:0;font-size:24px;font-weight:500;line-height:1.7;overflow-y:auto}.reading-text p{margin:0 0 .5em}.reading-text p.now{animation:1.6s ease-out ink-in}@keyframes ink-in{0%{opacity:.1}to{opacity:1}}.reading-text p.past{color:var(--muted);font-weight:400}.reading-text p.voice-note{color:var(--accent);margin-top:.4em;font-size:18px;font-weight:700}.making{z-index:3;justify-content:center;align-items:center;gap:var(--sp-2);border-radius:var(--wobble-b);text-align:center;padding:var(--sp-3);background:#fdfefcd1;flex-direction:column;font-size:28px;line-height:1.3;display:flex;position:absolute;inset:0}.making-emoji{font-size:44px;line-height:1;animation:1.4s ease-in-out infinite bob}.making-dots{gap:var(--sp-2);display:flex}.making-dots i{border:3px solid var(--ink);background:var(--accent);border-radius:50%;width:14px;height:14px;animation:1.2s ease-in-out infinite blink}.making-dots i:nth-child(2){animation-delay:.2s}.making-dots i:nth-child(3){animation-delay:.4s}@keyframes bob{0%,to{transform:translateY(0)rotate(-3deg)}50%{transform:translateY(-8px)rotate(3deg)}}@keyframes blink{0%,to{opacity:.25}50%{opacity:1}}.reading-dock{gap:var(--sp-2);padding:var(--sp-3);background:var(--paper) var(--paper-tex);border:var(--stroke) solid var(--ink);border-radius:var(--wobble-a);box-shadow:var(--shadow-ink);display:grid}.reading-dock:empty{display:none}.reading-dock>.big-button{width:100%}.page-nav{gap:var(--sp-3);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.page-nav .big-button{min-width:0;padding-inline:var(--sp-2);white-space:nowrap}.reading-status{text-align:center;color:var(--muted);margin:0;font-weight:700}.choices{gap:var(--sp-3);padding-top:var(--sp-2);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.choices.phrases{gap:var(--sp-2);grid-template-columns:minmax(0,1fr);padding-top:0}.choices .reading-status{grid-column:1/-1}.choice{justify-content:center;align-items:center;gap:var(--sp-1);min-height:120px;padding:var(--sp-2) var(--sp-1);color:var(--ink);background:var(--paper) var(--paper-tex);border:var(--stroke) solid var(--ink);border-radius:var(--wobble-b);box-shadow:var(--shadow-ink);transition:transform var(--fast) var(--ease-out);flex-direction:column;display:flex;position:relative}.choice:active{box-shadow:0 2px 0 var(--ink);transform:translateY(4px)}.choices.phrases .choice{min-height:var(--tap);padding:var(--sp-2) var(--sp-4);border-radius:var(--wobble-a)}.choice.focus{border-style:dashed;border-color:var(--secondary-deep);transform:rotate(-1.5deg)}.choices.phrases .choice.focus{background:var(--accent-soft);transform:none}.choice-badge{color:#fff;background:var(--secondary);border:var(--stroke) solid var(--ink);border-radius:50%;place-items:center;width:40px;height:40px;font-size:20px;line-height:1;display:grid;position:absolute;top:-14px;right:-8px}.choice-emoji{font-size:52px;line-height:1}.choice-label{font-size:22px;line-height:1.3}.choices.phrases .choice-label{font-size:22px}.ending{gap:var(--sp-2);display:grid}.ending-title{text-align:center;margin:0;font-size:32px}.ending .big-button{width:100%}@media (hover:hover){.choice:hover{box-shadow:0 8px 0 var(--ink);transform:translateY(-3px)}.choice.focus:hover{transform:rotate(-1.5deg)translateY(-3px)}.choice:active{box-shadow:0 2px 0 var(--ink);transform:translateY(3px)}}@media (orientation:landscape) and (width<=1023px){.reading{gap:6px var(--sp-4);height:100dvh;min-height:0;padding:var(--sp-2) var(--sp-5) var(--sp-3);grid-template:"stage top""stage body"minmax(0,1fr)/minmax(0,1fr) clamp(280px,40vw,440px);align-items:stretch;display:grid}.reading-stage{grid-area:stage;align-items:center;height:100%;min-height:0;container-type:size}.reading-stage .scene{aspect-ratio:auto;width:100%;max-width:none;height:100%}.reading-top{grid-area:top}.reading-body{grid-area:body;justify-content:flex-start;min-height:0}.reading-text{font-size:22px;line-height:1.6}.reading-dock{padding:6px var(--sp-2);box-shadow:0 3px 0 var(--ink);border-width:3px;gap:4px}.choice{min-height:96px}.choice-emoji{font-size:40px}.choices.phrases .choice{min-height:48px;padding:4px var(--sp-3);box-shadow:0 3px 0 var(--ink)}.choices.phrases .choice-label{font-size:18px}.reading-dock{min-height:0;overflow-y:auto}}@media (width>=1024px){.reading{--pad:40px;grid-template:"top top""stage body"minmax(0,1fr)/minmax(0,1fr) minmax(0,1fr);align-items:stretch;gap:0;width:min(100% - 48px,1280px);height:min(100dvh - 48px,760px);margin:24px auto;padding:0;display:grid}.reading:before{content:"";background:var(--paper) var(--paper-tex);border:var(--stroke) solid var(--ink);border-radius:var(--wobble-a);box-shadow:0 8px 0 var(--ink);grid-area:2/1/3/3}.reading:after{content:"";z-index:2;background:var(--spine);pointer-events:none;grid-area:2/1/3/3;justify-self:center;width:64px}.reading-top{max-width:none;margin-bottom:var(--sp-4);grid-area:top}.reading-top .icon-button{min-width:56px;min-height:56px;font-size:26px}.reading-step{font-size:32px}.reading-stage{z-index:1;padding:0 var(--pad);grid-area:stage;align-self:center}.reading-stage .scene{aspect-ratio:4/3;max-width:none}.reading-body{z-index:1;max-width:none;min-height:0;padding:40px var(--pad) 28px;grid-area:body;gap:0}.reading-text{padding-bottom:var(--sp-2);font-size:26px}.reading-dock{margin-top:var(--sp-2);padding:var(--sp-4) 0 0;border:0;border-top:3px dashed var(--muted);box-shadow:none;background:0 0;border-radius:0}.page-nav .big-button{font-size:30px}.choices{gap:var(--sp-4)}.choice{min-height:min(170px,20vh)}.choice-emoji{font-size:min(72px,9vh)}.choice-label,.choices.phrases .choice-label{font-size:26px}.reading-status{font-size:18px}.making{font-size:40px}.making-emoji{font-size:64px}.ending-title{font-size:40px}.reading{perspective:1800px}.page-leaf{z-index:4;transform-style:preserve-3d;pointer-events:none;position:relative}.page-leaf.next{transform-origin:0;animation:leaf-turn var(--turn-dur) ease-in-out forwards;grid-area:2/2/3/3}.page-leaf.prev{transform-origin:100%;animation:leaf-turn-back var(--turn-dur) ease-in-out forwards;grid-area:2/1/3/2}.leaf-face{backface-visibility:hidden;background:var(--paper) var(--paper-tex);border:var(--stroke) solid var(--ink);position:absolute;inset:0;overflow:hidden}.leaf-face.back{transform:rotateY(180deg)}.page-leaf.next .front,.page-leaf.prev .back,.page-hold{border-left:0;border-radius:0 40px 24px 0/0 24px 42px 0}.page-leaf.next .back,.page-leaf.prev .front{border-right:0;border-radius:26px 0 0 42px/38px 0 0 26px}.text-face{padding:40px var(--pad) 28px}.text-face .reading-text{flex:none;height:100%;overflow:hidden}.scene-face{padding:0 var(--pad);place-items:center;display:grid}.scene-face .scene{aspect-ratio:4/3;border:var(--stroke) solid var(--ink);border-radius:var(--wobble-b);max-width:none;box-shadow:0 4px 0 var(--ink)}.page-hold{z-index:3;background:var(--paper) var(--paper-tex);border:var(--stroke) solid var(--ink);pointer-events:none;grid-area:2/2/3/3;position:relative;overflow:hidden}.leaf-face:after{content:"";background:var(--ink);opacity:0;pointer-events:none;position:absolute;inset:0}.leaf-face.front:after{animation:shade-front var(--turn-dur) ease-in-out forwards}.leaf-face.back:after{animation:shade-back var(--turn-dur) ease-in-out forwards}}@keyframes leaf-turn{0%{transform:rotateY(0)}to{transform:rotateY(-180deg)}}@keyframes leaf-turn-back{0%{transform:rotateY(0)}to{transform:rotateY(180deg)}}@keyframes shade-front{0%{opacity:0}50%,to{opacity:.35}}@keyframes shade-back{0%,50%{opacity:.35}to{opacity:0}}@media (prefers-reduced-motion:reduce){.making-emoji,.making-dots i{opacity:1;animation:none}.choice{transition:none}}.shelf{gap:var(--sp-3);max-width:560px;min-height:100dvh;padding:var(--sp-4) var(--sp-3) var(--sp-5);grid-template-rows:auto minmax(0,1fr);margin:0 auto;display:grid}.shelf-top{grid-template-columns:64px 1fr 64px;align-items:center;display:grid}.shelf-top h1{text-align:center;margin:0;font-size:30px;line-height:1.2}.shelf-empty{align-content:center;justify-items:center;gap:var(--sp-4);text-align:center;display:grid}.shelf-empty-art{width:140px;height:200px;animation:2.4s ease-in-out infinite bob;display:block}.shelf-empty p{margin:0;font-size:30px;line-height:1.3}.shelf-empty .big-button{min-width:260px}.shelf-books{padding:var(--sp-1) var(--sp-1) var(--sp-2);gap:var(--sp-3);align-content:start;margin:0;list-style:none;display:grid}.book{--off:4px;gap:var(--sp-1) var(--sp-3);width:100%;min-height:120px;padding:var(--sp-2) var(--sp-3);text-align:left;color:var(--ink);background:var(--paper) var(--paper-tex);border:var(--stroke) solid var(--ink);border-radius:var(--wobble-b);box-shadow:var(--shadow-ink);transition:transform var(--fast) var(--ease-out);grid-template-columns:72px minmax(0,1fr);grid-template-areas:"cover meta""cover status";align-items:center;display:grid}.book:active{box-shadow:0 1px 0 var(--ink);transform:translateY(4px)}.book-cover,.book-pages,.book-back{border:3px solid var(--ink);border-radius:8px 14px 14px 8px;grid-area:cover;place-self:center start;width:64px;height:88px}.book-cover{z-index:2;background:var(--c);place-items:end center;padding:8px 4px 6px 12px;display:grid;position:relative;overflow:hidden}.book-cover:before{content:"";border-right:3px solid var(--ink);background:#2a284052;width:10px;position:absolute;top:0;bottom:0;left:0}.book-pages{z-index:1;transform:translate(var(--off), var(--off));background-color:#fff8e7;background-image:linear-gradient(135deg,#78684c00 35%,#78684c66 100%);border-width:2px}.book-back{z-index:0;transform:translate(calc(var(--off) * 2), calc(var(--off) * 2));background:var(--c);box-shadow:inset 0 0 0 100px #2a284047}.book-meta{grid-area:meta;align-self:end;gap:2px;display:grid}.book-title{font-size:20px;font-weight:700;line-height:1.35}.book-date{font-size:var(--fs-ui);color:var(--muted)}.book-status{border:3px solid var(--ink);font-weight:700;font-size:var(--fs-ui);white-space:nowrap;border-radius:999px;grid-area:status;place-self:start;padding:4px 12px;line-height:1.3}.book-status.done{background:var(--paper)}.book-status.go{background:var(--accent);color:#fff}@media (hover:hover){.book:hover{transform:translateY(-3px)}}.book-wrap{position:relative}.book-heart{z-index:4;border:3px solid var(--ink);width:44px;height:44px;box-shadow:0 3px 0 var(--ink);transition:transform var(--fast) var(--ease-out);background:#fff;border-radius:50%;place-items:center;padding:0;display:grid;position:absolute;top:4px;left:4px}.book-heart svg{fill:#fff;width:26px;height:26px;stroke:var(--ink);stroke-width:2px;stroke-linejoin:round}.book-heart.on svg{fill:#ff5c93}.book-heart:active{transform:scale(.9)}.book-heart.on{animation:heart-pop .3s var(--ease-out)}@keyframes heart-pop{0%{transform:scale(.8)}60%{transform:scale(1.15)}to{transform:scale(1)}}@media (hover:hover){.book-heart:hover{transform:scale(1.08)}}.book-dialog-backdrop{z-index:10;background:#2a284099;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.book-dialog{justify-items:center;gap:var(--sp-2);width:100%;max-width:560px;padding:var(--sp-5) var(--sp-4);text-align:center;background:var(--paper) var(--paper-tex);border:var(--stroke) solid var(--ink);box-shadow:0 -6px 0 var(--ink);animation:sheet-in .25s var(--ease-out);border-bottom:0;border-radius:40px 40px 0 0/28px 28px 0 0;display:grid}.book-dialog-art{width:100px;height:120px;display:block}.book-dialog h2{margin:0;font-size:32px;line-height:1.2}.book-dialog-date{color:var(--muted);margin:0;font-weight:700}.book-dialog-ask{margin:var(--sp-2) 0 0;font-size:28px;line-height:1.3}.book-dialog-ask small{font-family:var(--font-body);color:var(--muted);font-size:18px;font-weight:700}.book-dialog-actions{gap:var(--sp-3);width:100%;margin-top:var(--sp-3);display:grid}.book-dialog-actions .big-button{width:100%}.big-button.danger{background:#b3261e}.book-dialog-close{text-underline-offset:5px;background:0 0;min-height:48px;font-size:20px;font-weight:700;text-decoration:underline}@media (hover:hover){.big-button.danger:not(:disabled):hover{background:#8c1d17}.book-dialog-close:hover{background:var(--accent-soft);border-radius:999px}}@media (width>=1024px){.shelf{--wood:#5b7083;--bk-h:max(200px, calc((100dvh - 168px) / 2 - 36px));--bk-w:calc(var(--bk-h) * .72);--row-h:calc(var(--bk-h) + 36px);gap:var(--sp-4);width:min(100% - 48px,1280px);max-width:none;height:100dvh;padding:24px 0}.shelf-top{grid-template-columns:56px 1fr 56px}.shelf-top .icon-button{min-width:56px;min-height:56px;font-size:26px}.shelf-top h1{font-size:40px}.shelf-books{grid-template-columns:repeat(4, var(--bk-w));grid-auto-rows:var(--row-h);padding:0 var(--sp-6);border:8px solid var(--wood);border-radius:var(--wobble-a);box-shadow:0 8px 0 var(--ink);background-color:#d7e7e4;background-image:linear-gradient(to bottom, transparent 0 calc(var(--row-h) - 24px), var(--wood) calc(var(--row-h) - 24px) calc(var(--row-h) - 5px), var(--ink) calc(var(--row-h) - 5px) var(--row-h));background-size:100% var(--row-h);background-attachment:local;justify-content:space-between;gap:0;overflow-y:auto}.shelf-books>li{place-items:end center;padding-bottom:24px;display:grid}.book{--off:8px;width:var(--bk-w);height:calc(var(--bk-h) - 2px);min-height:0;box-shadow:none;background:0 0;border:0;border-radius:10px 18px 18px 10px;grid-template:"c"minmax(0,1fr)/minmax(0,1fr);gap:0;padding:0}.book>*{grid-area:c}.book-cover,.book-pages,.book-back{width:calc(100% - var(--off) * 2);height:calc(100% - var(--off) * 2);border-radius:10px 18px 18px 10px;place-self:start}.book-cover{border-width:4px;place-items:start center;padding:14% 8% 0 16%}.book-cover:before{width:16px}.book-cover .picture{height:60%}.book-pages{border-width:3px}.book-back{border-width:4px}.book-meta{margin:0 calc(var(--off) * 2 + 8px) calc(var(--off) * 2 + 8px) 26px;background:var(--paper);border:3px solid var(--ink);text-align:left;z-index:3;border-radius:8px;align-self:end;padding:6px 8px;position:relative}.book-title{font-size:18px}.book-status{margin:10px calc(var(--off) * 2 + 10px) 0 0;z-index:3;place-self:start end;position:relative}.book:hover{transform:translateY(-6px)}.book-heart{width:48px;height:48px;top:10px;left:24px}.book-heart svg{width:28px;height:28px}.book-wrap:hover .book-heart{transform:translateY(-6px)}.book-dialog-backdrop{align-items:center;padding:24px}.book-dialog{width:min(560px,100%);padding:var(--sp-6);border-bottom:var(--stroke) solid var(--ink);border-radius:var(--wobble-a);box-shadow:0 8px 0 var(--ink)}.book-dialog-art{width:140px;height:170px}.book-dialog h2{font-size:40px}.book-dialog-actions .big-button{min-height:72px;font-size:30px}.shelf-empty{width:min(100%,720px);padding:var(--sp-7);background:var(--paper) var(--paper-tex);border:var(--stroke) solid var(--ink);border-radius:var(--wobble-a);box-shadow:0 8px 0 var(--ink);align-self:center;margin:0 auto}.shelf-empty p{font-size:44px}.shelf-empty .big-button{min-height:80px;font-size:32px}}@media (prefers-reduced-motion:reduce){.shelf-empty-art{animation:none}.book,.book-heart{transition:none}.book-heart.on,.book-dialog{animation:none}}.pick{gap:var(--sp-3);max-width:560px;min-height:100dvh;padding:var(--sp-4) var(--sp-3) var(--sp-5);grid-template:"top""ask""cards"minmax(0,1fr)"hint""actions"/minmax(0,1fr);margin:0 auto;display:grid}.pick-top{justify-content:space-between;align-items:center;gap:var(--sp-2);grid-area:top;display:flex}.pick-dots{align-items:center;gap:22px;margin:0;padding:0;list-style:none;display:flex}.pick-dots li{background:var(--paper);border:3px solid var(--ink);border-radius:50% 45% 52% 48%;place-items:center;width:28px;height:28px;font-size:15px;font-weight:800;line-height:1;display:grid;position:relative}.pick-dots li+li:before{content:"";border-top:3px dashed var(--ink);width:14px;position:absolute;top:50%;right:calc(100% + 4px)}.pick-dots li.done{background:var(--pick);color:#fff}.pick-dots li.now{background:var(--pick-fill);border-width:4px;width:40px;height:40px;font-size:20px;transform:rotate(-6deg)}.pick-ask{grid-area:ask;min-width:0;display:grid}.pick-question{gap:var(--sp-3);width:100%;min-height:88px;padding:var(--sp-3) var(--sp-4);text-align:left;grid-template-columns:auto minmax(0,1fr);font-size:26px;line-height:1.3;display:grid}.pick-question-icon{font-size:34px;line-height:1}.pick-deco{display:none}.pick-cards{gap:var(--sp-4);padding-top:var(--sp-2);grid-area:cards;grid-template-columns:repeat(2,minmax(0,1fr));align-content:center;display:grid}.pick-card{--media-h:110px;justify-items:center;gap:var(--sp-2);min-width:0;padding:var(--sp-2) var(--sp-2) var(--sp-3);color:var(--ink);background:var(--paper) var(--paper-tex);border:var(--stroke) solid var(--ink);border-radius:var(--wobble-b);box-shadow:var(--shadow-ink);transition:transform var(--fast) var(--ease-out);display:grid;position:relative}.pick-card:active{box-shadow:0 2px 0 var(--ink);transform:translateY(4px)}.pick-card.is-first{border-style:dashed;border-color:var(--secondary-deep);transform:rotate(-1.5deg)}.pick-badge{color:#fff;background:var(--secondary);border:var(--stroke) solid var(--ink);border-radius:50%;place-items:center;width:44px;height:44px;font-size:22px;line-height:1;display:grid;position:absolute;top:-14px;right:-10px}.pick-badge:before,.pick-badge:after{content:"";border:3px solid var(--secondary);opacity:0;animation:ripple 1.2s var(--ease-out) infinite;border-radius:50%;position:absolute;inset:-4px}.pick-badge:after{animation-delay:.6s}@keyframes ripple{0%{opacity:.9;transform:scale(.9)}to{opacity:0;transform:scale(1.7)}}.pick-media{width:100%;height:var(--media-h);justify-content:center;align-items:flex-end;display:flex}.pick-media .picture{width:auto;max-width:100%;height:auto;max-height:var(--media-h)}.pick-media.wide{aspect-ratio:16/10;border:3px solid var(--ink);border-radius:12px;align-items:stretch;height:auto;overflow:hidden}.pick-media.wide .picture{object-fit:cover;width:100%;height:100%;max-height:none}.pick-emoji{align-self:center;font-size:72px;line-height:1}.pick-name{font-size:24px;line-height:1.3}.pick-hint{text-align:center;color:var(--muted);grid-area:hint;margin:0;font-weight:700}.pick-actions{gap:var(--sp-3);grid-area:actions;grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.pick-actions .big-button{min-width:0;padding-inline:var(--sp-2);white-space:nowrap;font-size:24px}.big-button.secondary{background:var(--secondary);color:#fff}.pick-wait{grid-template-rows:auto minmax(0,1fr);grid-template-areas:"top""msg"}.pick-msg{align-content:center;justify-items:center;gap:var(--sp-4);text-align:center;grid-area:msg;display:grid}.pick-msg-emoji{font-size:120px;line-height:1;animation:2.4s ease-in-out infinite bob}.pick-msg-title{margin:0;font-size:34px;line-height:1.3}@media (hover:hover){.pick-card:hover{box-shadow:0 8px 0 var(--ink);transform:translateY(-3px)}.pick-card.is-first:hover{transform:rotate(-1.5deg)translateY(-3px)}.pick-card:active{box-shadow:0 2px 0 var(--ink);transform:translateY(3px)}.big-button.secondary:not(:disabled):hover{background:var(--secondary-deep)}}@media (width>=1024px){.pick{--pad:40px;grid-template:"top top""ask cards"minmax(0,1fr)"ask hint""ask actions"/minmax(0,1fr) minmax(0,1fr);gap:0;width:min(100% - 48px,1280px);max-width:none;height:min(100dvh - 48px,712px);min-height:0;margin:24px auto;padding:0}.pick:before{content:"";background:var(--paper) var(--paper-tex);border:var(--stroke) solid var(--ink);border-radius:var(--wobble-a);box-shadow:0 8px 0 var(--ink);grid-area:2/1/5/3}.pick:after{content:"";z-index:2;background:var(--spine);pointer-events:none;grid-area:2/1/5/3;justify-self:center;width:64px}.pick-top{margin-bottom:var(--sp-4)}.pick-top .icon-button{min-width:56px;min-height:56px;font-size:26px}.pick-dots{gap:36px}.pick-dots li+li:before{width:28px}.pick-ask{z-index:1;padding:0 var(--pad);align-content:center;justify-items:center;gap:var(--sp-5);position:relative}.pick-question{text-align:center;min-height:240px;padding:var(--sp-6) var(--sp-5);grid-template-columns:minmax(0,1fr);justify-items:center;font-size:44px}.pick-question-icon{font-size:72px}.pick-deco{justify-content:center;align-items:flex-end;gap:var(--sp-5);display:flex}.pick-deco img{width:auto;height:72px}.pick-cards{z-index:1;padding:var(--sp-5) var(--pad) 0;gap:var(--sp-4);position:relative}.pick-cards.many{grid-template-columns:repeat(3,minmax(0,1fr))}.pick-card{--media-h:min(150px, 16vh)}.pick-cards.many .pick-card{--media-h:min(120px, 13vh)}.pick-name{font-size:28px}.pick-emoji{font-size:min(96px,11vh)}.pick-hint{z-index:1;padding:var(--sp-2) var(--pad) 0;font-size:18px;position:relative}.pick-actions{z-index:1;margin:0 var(--pad) 28px;padding-top:var(--sp-4);border-top:3px dashed var(--muted);position:relative}.pick-actions .big-button{font-size:28px}.pick-wait{grid-template-rows:auto minmax(0,1fr);grid-template-areas:"top top""msg msg"}.pick-wait:before,.pick-wait:after{grid-area:2/1/3/3}.pick-msg{z-index:1;position:relative}.pick-msg-emoji{font-size:180px}.pick-msg-title{font-size:48px}}@media (prefers-reduced-motion:reduce){.pick-badge:before,.pick-badge:after,.pick-msg-emoji{animation:none}.pick-card{transition:none}}.waiting{--bw:min(88vw, 58dvh, 760px);align-content:center;justify-items:center;gap:var(--sp-4);min-height:100dvh;padding:var(--sp-5) var(--sp-4);text-align:center;display:grid}.wait-stage{width:var(--bw);height:calc(var(--bw) * .9);place-items:center;display:grid;position:relative}.wait-book{width:var(--bw);height:calc(var(--bw) * .56);position:relative}.wait-page{background:var(--paper) var(--paper-tex);border:var(--stroke) solid var(--ink);width:50%;box-shadow:0 6px 0 var(--ink);position:absolute;top:0;bottom:0;overflow:hidden}.wait-page.left{border-right-width:2px;border-radius:26px 0 0 42px/38px 0 0 26px;place-items:end center;display:grid;left:0}.wait-page.right{align-content:center;gap:calc(var(--bw) * .035);border-left-width:2px;border-radius:0 40px 24px 0/0 24px 42px 0;padding:0 12%;display:grid;left:50%}.wait-book:after{content:"";background:var(--spine);pointer-events:none;width:10%;position:absolute;top:0;bottom:0;left:45%}.wait-draw{height:82%;animation:6s ease-in-out infinite draw-in;position:absolute;bottom:0;left:0;right:0}.wait-page.right i{height:max(8px, calc(var(--bw) * .025));background:var(--secondary);border-radius:6px;animation:6s ease-in-out infinite pop;display:block}.wait-page.right i:nth-child(2){background:var(--accent);width:82%;animation-delay:.8s}.wait-page.right i:nth-child(3){background:var(--pick);width:90%;animation-delay:1.6s}.wait-page.right i:nth-child(4){width:60%;animation-delay:2.4s}.wait-hero{left:50%;bottom:calc(50% + var(--bw) * .24);width:calc(var(--bw) * .13);height:calc(var(--bw) * .2);margin-left:calc(var(--bw) * -.065);animation:2.6s ease-in-out infinite bob;position:absolute}.wait-card{--ts:clamp(64px, calc(var(--bw) * .22), 112px);z-index:2;width:var(--ts);margin:calc(var(--ts) / -2) 0 0 calc(var(--ts) / -2);background:var(--paper);border:3px solid var(--ink);border-radius:var(--wobble-b);box-shadow:0 3px 0 var(--ink);opacity:0;animation:6s ease-in-out infinite fly;animation-delay:calc(var(--i) * 1.3s);justify-items:center;gap:2px;padding:6px 4px;display:grid;position:absolute;top:50%;left:50%}.wait-card-pic{width:100%;height:calc(var(--ts) * .56);font-size:calc(var(--ts) * .4);border-radius:8px;place-items:center;display:grid;overflow:hidden}.wait-card-name{font-family:var(--font-display);white-space:nowrap;font-size:17px;line-height:1.2}.wait-title{margin:0;font-size:min(9vw,6dvh,56px);line-height:1.2}.wait-sub{max-width:30em;color:var(--muted);margin:0;font-size:20px;font-weight:500;line-height:1.6}.wait-crayons{gap:var(--sp-2);display:flex}.wait-crayons svg{opacity:.15;width:40px;height:20px;animation:4.2s ease-in-out infinite pop}.wait-crayons svg:nth-child(3n+1){color:var(--accent)}.wait-crayons svg:nth-child(3n+2){color:var(--secondary)}.wait-crayons svg:nth-child(3n){color:var(--pick)}.wait-crayons svg:nth-child(2){animation-delay:.5s}.wait-crayons svg:nth-child(3){animation-delay:1s}.wait-crayons svg:nth-child(4){animation-delay:1.5s}.wait-crayons svg:nth-child(5){animation-delay:2s}.wait-crayons svg:nth-child(6){animation-delay:2.5s}.wait-crayons svg:nth-child(7){animation-delay:3s}@keyframes fly{0%{opacity:0;transform:translate(calc(var(--bw) * var(--dx)), calc(var(--bw) * var(--dy))) rotate(var(--r)) scale(1)}12%{opacity:1}62%{opacity:1;transform:translate(0)rotate(0)scale(.38)}76%,to{opacity:0;transform:translate(0)rotate(0)scale(.2)}}@keyframes draw-in{0%,8%{opacity:0}40%,85%{opacity:1}to{opacity:0}}@keyframes pop{0%,6%{opacity:.15}30%,80%{opacity:1}to{opacity:.15}}@media (width>=1024px){.wait-sub{font-size:24px}.wait-card-name{font-size:20px}}@media (prefers-reduced-motion:reduce){.wait-hero,.wait-draw,.wait-page.right i,.wait-crayons svg{opacity:1;animation:none}.wait-card{opacity:1;transform:translate(calc(var(--bw) * var(--dx)), calc(var(--bw) * var(--dy))) rotate(var(--r));animation:none}}