:root{
  --pink:#ff7cb4;--pink-deep:#e94f98;--pink-soft:#fff0f7;--purple:#aa67ce;--cream:#fff9fc;--ink:#4f344d;
  --muted:#a9799a;--card:#fff;--line:rgba(121,70,108,.14);--shadow:0 18px 60px rgba(85,43,82,.18);
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#f6eef8;color:var(--ink);font-family:ui-rounded,"Arial Rounded MT Bold",system-ui,-apple-system,"Segoe UI",sans-serif}body{min-height:100svh;overflow-x:hidden}button{font:inherit;-webkit-tap-highlight-color:transparent}.app-shell{min-height:100svh;display:grid;place-items:stretch center;background:radial-gradient(circle at 50% 10%,#fff 0,#faeff8 45%,#efe5f4 100%)}
.phone-stage{position:relative;width:min(100vw,430px);height:100svh;min-height:560px;background:linear-gradient(180deg,#fff9fc 0%,#fff 58%,#fff7fb 100%);overflow:hidden;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;box-shadow:var(--shadow)}.safe-top{height:max(env(safe-area-inset-top),2px)}.safe-bottom{height:max(env(safe-area-inset-bottom),2px)}
.topbar{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:7px;padding:7px 14px 5px;min-height:40px}.brand{font-size:11.5px;font-weight:1000;letter-spacing:.035em;color:#9a5984}.brand-button{border:0;background:transparent;padding:7px 3px 7px 0;text-align:left;cursor:pointer;display:inline-flex;align-items:center;gap:5px;min-height:40px;border-radius:10px}.brand-home-icon{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:#fff;border:1px solid var(--line);box-shadow:0 3px 8px rgba(91,48,85,.06);font-size:14px;line-height:1;color:#a65c8c}.brand-button span:last-child{white-space:nowrap}.brand-button:active .brand-home-icon{transform:scale(.96)}.mode-pill{font-size:9px;font-weight:1000;letter-spacing:.07em;color:#a66592;background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 8px;white-space:nowrap}.progress{font-size:11px;font-weight:1000;background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 8px;white-space:nowrap}
.view{min-height:0}.view[hidden]{display:none!important}.zone-tag{display:none}.eyebrow{font-size:10px;font-weight:1000;letter-spacing:.12em;color:#c0649e}
/* MAP */
.map-view{overflow:auto;padding:14px 14px 20px;scrollbar-width:none}.map-view::-webkit-scrollbar{display:none}.map-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:start;padding:4px 4px 13px}.map-heading h1{font-size:24px;line-height:1.05;margin:5px 0 6px;letter-spacing:-.04em}.map-heading p{margin:0;color:var(--muted);font-size:12px;font-weight:800}.review-button{border:0;border-radius:20px;background:linear-gradient(180deg,#fff,#fff5fa);box-shadow:0 8px 22px rgba(88,48,84,.12);padding:9px 11px;color:#8f567f;font-weight:1000;display:grid;place-items:center;gap:1px;min-width:57px;cursor:pointer}.review-button strong{font-size:18px;color:var(--pink-deep)}.review-button:disabled{opacity:.4}.review-button[hidden]{display:none}.map-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.map-card{position:relative;min-height:68px;border:1px solid var(--line);background:#fff;border-radius:18px;display:grid;place-items:center;align-content:center;gap:2px;box-shadow:0 6px 14px rgba(91,48,85,.07);cursor:pointer;color:var(--ink)}.map-card .map-letter{font-size:26px;font-weight:1000;line-height:1}.map-card .map-word{font-size:8px;color:#a77898;font-weight:900;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 3px}.map-heart{position:absolute;right:7px;top:6px;font-size:12px;color:var(--pink-deep);line-height:1}.map-card.state-supported{background:#fff8fc}.map-card.is-current{border-color:rgba(233,79,152,.5);box-shadow:0 0 0 2px rgba(255,124,180,.12),0 7px 16px rgba(91,48,85,.09)}.map-card.state-independent{background:linear-gradient(180deg,#fff,#fff0f7);border-color:rgba(233,79,152,.24)}.map-card.review-due::after{content:"•";position:absolute;left:7px;top:2px;color:#f1a231;font-size:22px;line-height:1}.map-card:last-child{grid-column:3}.map-footer{padding:14px 2px 2px}
/* LEARN */
.learn-view{display:grid;grid-template-rows:19% minmax(0,1fr) 14% 11%;min-height:0}.letter-zone,.story-zone,.word-zone,.control-zone{position:relative;min-height:0}.letter-zone{display:flex;align-items:center;justify-content:center;padding:4px 68px 2px}.letter-pair{display:flex;align-items:baseline;justify-content:center;gap:8px;line-height:.9;text-shadow:0 4px 0 #fff,0 8px 18px rgba(212,72,143,.16)}#upper{font-size:clamp(64px,22vw,100px);font-weight:1000;color:var(--pink-deep)}#lower{font-size:clamp(40px,13vw,62px);font-weight:1000;color:#ba70d8}.audio-button{position:absolute;right:17px;bottom:9px;width:52px;height:52px;border-radius:50%;border:0;background:#fff;box-shadow:0 8px 20px rgba(95,52,88,.16);font-size:23px;cursor:pointer}.story-zone{padding:2px 14px 4px}.art-frame{position:relative;width:100%;height:100%;padding:0;overflow:hidden;border-radius:30px;background:#f8eaf5;border:3px solid rgba(255,255,255,.95);box-shadow:0 14px 32px rgba(92,52,88,.18);cursor:pointer}.art-frame img{width:100%;height:100%;display:block;object-fit:cover;object-position:var(--art-position,center 55%);transform:scale(var(--art-scale,1));transition:opacity .16s ease,transform .32s cubic-bezier(.2,.8,.2,1)}.art-frame.changing img{opacity:.36}.art-frame.action-jump img{animation:jumpArt .65s cubic-bezier(.25,.7,.28,1)}.art-frame.action-bounce img{animation:bounceArt .55s ease}.art-frame.action-open img{animation:openArt .5s ease}.art-frame.action-rise img{animation:riseArt .65s ease}.art-frame.action-heart img,.art-frame.action-play img,.art-frame.action-splash img,.art-frame.action-run img,.art-frame.action-tap img{animation:pulseArt .5s ease}.art-scrim{position:absolute;inset:auto 0 0;height:20%;background:linear-gradient(transparent,rgba(45,20,45,.15));pointer-events:none}.action-spark{position:absolute;right:18px;top:18px;font-size:27px;opacity:0;transform:scale(.4);pointer-events:none}.art-frame.celebrate .action-spark{animation:sparkPop .75s ease}.guest-chip{position:absolute;left:28px;bottom:18px;background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.92);box-shadow:0 6px 16px rgba(65,35,63,.14);backdrop-filter:blur(8px);padding:7px 12px;border-radius:999px;font-weight:1000;font-size:13px;max-width:calc(100% - 56px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.host-bubble{position:absolute;right:22px;top:12px;z-index:5;display:flex;align-items:center;gap:7px;max-width:72%;background:rgba(255,255,255,.96);border:1px solid rgba(236,127,181,.25);box-shadow:0 8px 22px rgba(85,43,82,.13);border-radius:18px;padding:7px 9px;color:#83516f}.host-bubble[hidden]{display:none}.host-heart{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#ffe7f2;color:var(--pink-deep);font-size:13px}.host-bubble strong{display:block;font-size:10px;color:#c2548d}.host-bubble small{display:block;font-size:10.5px;font-weight:900;line-height:1.2}.word-zone{text-align:center;display:grid;align-content:center;padding:2px 18px}.word{font-size:clamp(34px,10vw,48px);font-weight:1000;letter-spacing:-.035em;color:#50324f;line-height:1;white-space:nowrap}.word.medium{font-size:clamp(31px,9vw,44px)}.word.long{font-size:clamp(28px,8vw,40px)}.cue{margin-top:6px;font-size:13px;font-weight:900;color:#ad6c98;min-height:16px}.action-cue{margin-top:5px;font-size:10.5px;color:#b68ba8;font-weight:800;min-height:14px}.control-zone{display:grid;grid-template-columns:56px minmax(0,1fr) 56px;align-items:center;gap:9px;padding:4px 18px 9px}.round{height:54px;border:0;border-radius:18px;font-size:26px;font-weight:1000;cursor:pointer;box-shadow:0 8px 18px rgba(86,45,80,.12)}.round.secondary{background:#fff;color:#9c6a91;border:1px solid var(--line)}.round.primary{background:linear-gradient(180deg,#ff8dbe,#f55aa0);color:#fff}.round.review-next{font-size:18px;background:linear-gradient(180deg,#ffc469,#f4a53a)}.round:disabled{opacity:.35}.heart-status{height:54px;border:1px solid var(--line);border-radius:18px;background:#fff;display:flex;align-items:center;justify-content:center;gap:9px;font-weight:1000;color:#7d4d72;box-shadow:0 8px 18px rgba(86,45,80,.08)}.heart-status #heartIcon{font-size:27px;color:#f45c9f}.heart-status #heartLabel{font-size:12.5px;white-space:nowrap}
/* RECALL */
.recall-view{display:flex;flex-direction:column;min-height:0;padding:11px 16px 14px;overflow:auto}.recall-top{display:flex;align-items:center;justify-content:space-between}.recall-heart{font-size:25px;color:var(--pink-deep)}.recall-prompt-wrap{text-align:center;padding:4px 4px 11px}.recall-letter{font-size:72px;line-height:1;font-weight:1000;color:var(--pink-deep);text-shadow:0 4px 0 #fff}.recall-prompt-wrap h2{font-size:18px;line-height:1.25;margin:6px 0 9px;letter-spacing:-.03em}.listen-pill{border:1px solid var(--line);border-radius:999px;background:#fff;padding:8px 13px;color:#865573;font-size:12px;font-weight:1000;cursor:pointer}.recall-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;min-height:230px}.recall-option{position:relative;border:3px solid #fff;border-radius:22px;overflow:hidden;background:#f8eaf5;box-shadow:0 10px 24px rgba(83,45,78,.13);padding:0;cursor:pointer;min-width:0}.recall-option img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 56%;transform:scale(1.08)}.recall-option .option-reveal{position:absolute;inset:auto 5px 6px;background:rgba(255,255,255,.94);border-radius:12px;padding:5px 3px;font-size:10px;font-weight:1000;color:#6f4766;opacity:0;transform:translateY(4px);transition:.16s}.recall-option.correct-reveal{border-color:#ff9ac4}.recall-option.correct-reveal .option-reveal{opacity:1;transform:none}.recall-option.hint-gaze::before{content:"👀";position:absolute;z-index:3;right:7px;top:7px;font-size:19px}.recall-option.hint-gesture::before{content:"☝️";position:absolute;z-index:3;right:7px;top:7px;font-size:21px;animation:hintBob .8s ease infinite}.recall-option.hint-highlight{animation:hintGlow .9s ease infinite}.recall-host{margin:9px 2px 0;border-radius:16px;background:#fff5fa;border:1px solid rgba(238,121,179,.2);padding:8px 10px;display:flex;align-items:center;justify-content:center;gap:7px;color:#925d7e;font-size:11.5px;font-weight:900}.recall-host[hidden]{display:none}.recall-host>span:first-child{color:var(--pink-deep)}.recall-result{text-align:center;min-height:31px;padding:8px 4px 3px;font-weight:1000;font-size:13px;color:#8b5c7b}.wide-primary{width:100%;min-height:50px;border:0;border-radius:18px;background:linear-gradient(180deg,#ff87ba,#f3579d);color:#fff;font-weight:1000;box-shadow:0 8px 18px rgba(88,45,82,.13);cursor:pointer}.wide-primary[hidden]{display:none}
.prototype-note{text-align:center;font-size:8px;line-height:1.2;color:#b796ae;padding:2px 16px 4px;letter-spacing:.025em}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}button:focus-visible{outline:4px solid #723eaa;outline-offset:3px}
.phone-stage.booting .view{opacity:0}.phone-stage.booting::after{content:"";position:absolute;z-index:30;left:50%;top:50%;width:34px;height:34px;margin:-17px;border-radius:50%;border:4px solid rgba(233,79,152,.14);border-top-color:var(--pink-deep);animation:spin .7s linear infinite}
.debug-mode .zone-tag{display:block;position:absolute;z-index:8;top:3px;left:6px;padding:2px 5px;border-radius:5px;background:rgba(80,45,80,.75);color:#fff;font-size:8px;font-weight:1000}.debug-mode .letter-zone,.debug-mode .story-zone,.debug-mode .word-zone,.debug-mode .control-zone{outline:1px dashed rgba(101,51,128,.38);outline-offset:-2px}.debug-mode .prototype-note{color:#8d4774;font-weight:1000}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes jumpArt{0%,100%{transform:scale(var(--art-scale,1)) translateY(0)}38%{transform:scale(var(--art-scale,1)) translateY(-12%) rotate(-1deg)}65%{transform:scale(var(--art-scale,1)) translateY(2%)}}@keyframes bounceArt{0%,100%{transform:scale(1)}35%{transform:scale(.97,1.05)}65%{transform:scale(1.035,.98)}}@keyframes openArt{50%{filter:brightness(1.12);transform:scale(1.035)}}@keyframes riseArt{50%{transform:translateY(-5%)}}@keyframes pulseArt{50%{transform:scale(1.035);filter:brightness(1.07)}}@keyframes sparkPop{0%{opacity:0;transform:scale(.4) rotate(-18deg)}45%{opacity:1;transform:scale(1.35) rotate(7deg)}100%{opacity:0;transform:scale(.8) rotate(18deg)}}@keyframes hintBob{50%{transform:translateY(-5px)}}@keyframes hintGlow{0%,100%{box-shadow:0 10px 24px rgba(83,45,78,.13)}50%{box-shadow:0 0 0 6px rgba(255,124,180,.24),0 10px 26px rgba(83,45,78,.15)}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media (max-height:680px){.topbar{min-height:34px;padding-top:4px}.brand{font-size:10px}.mode-pill,.progress{font-size:8.5px}.letter-zone{padding-left:58px;padding-right:58px}#upper{font-size:clamp(56px,19vw,82px)}#lower{font-size:clamp(35px,11vw,50px)}.audio-button{width:46px;height:46px;font-size:20px;right:13px}.story-zone{padding-left:10px;padding-right:10px}.art-frame{border-radius:24px}.word{font-size:clamp(29px,8.2vw,40px)}.word.medium{font-size:clamp(27px,7.7vw,36px)}.word.long{font-size:clamp(24px,7.1vw,32px)}.control-zone{padding-left:13px;padding-right:13px;grid-template-columns:50px minmax(0,1fr) 50px}.round,.heart-status{height:48px}.heart-status #heartLabel{font-size:11.5px}.prototype-note{font-size:7px}.recall-letter{font-size:58px}.recall-options{min-height:190px}.map-card{min-height:61px}.map-heading h1{font-size:21px}}
@media (min-width:431px){.app-shell{place-items:center}.phone-stage{width:min(430px,calc(94svh * 9 / 16));height:min(94svh,764px);min-height:0;aspect-ratio:9/16;border-radius:30px}.safe-top,.safe-bottom{height:4px}}

/* v0.7 stability */
.audio-button.is-speaking,.listen-pill.is-speaking{box-shadow:0 0 0 4px rgba(255,124,180,.18),0 8px 20px rgba(95,52,88,.16);color:var(--pink-deep)}
.audio-button:disabled,.listen-pill:disabled{opacity:.62;cursor:default}
.map-card.review-due{border-color:rgba(241,162,49,.42)}
.map-card.review-due::after{content:"복";left:6px;top:5px;font-size:8px;font-weight:1000;background:#fff2cc;border-radius:999px;padding:2px 4px;color:#a36b09}
.phone-stage[data-letter="H"] .guest-chip{background:rgba(255,242,248,.94)}
.phone-stage[data-letter="O"] .art-frame img{--art-scale:1.02}
.phone-stage[data-letter="U"] .art-frame img{--art-scale:1.01}
.phone-stage[data-letter="Q"] .word-zone,.phone-stage[data-letter="X"] .word-zone{isolation:isolate}