.viewport-gate{min-height:100dvh}.viewport-gate>p[role=status]{min-height:100dvh;padding:var(--space-6);color:var(--color-ink);background:var(--color-bg);font-size:var(--text-instruction);text-align:center;place-items:center;margin:0;font-weight:700;line-height:1.35;display:grid}.lesson-viewport{width:100dvw;height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background-color:var(--color-bg);background-image:radial-gradient(circle at 15% 25%, color-mix(in srgb, var(--color-primary) 10%, transparent) 0 var(--space-1), transparent var(--space-2)), radial-gradient(circle at 82% 70%, color-mix(in srgb, var(--color-mint) 18%, transparent) 0 var(--space-1), transparent var(--space-3));background-size:var(--space-7) var(--space-7), var(--space-8) var(--space-8);place-items:center;display:grid;overflow:hidden}.lesson-stage{width:min(100%, calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 16 / 9));aspect-ratio:16/9;border:var(--stroke-ui) solid var(--color-primary);border-radius:var(--radius-card);background-color:var(--color-surface);max-height:100%;box-shadow:0 var(--space-2) 0 color-mix(in srgb, var(--color-ink) 20%, transparent);isolation:isolate;background-image:url(/assets/images/5-1/candy-workshop.webp);background-position:50%;background-size:cover;position:relative;overflow:hidden}.lesson-guide{z-index:6;top:var(--space-3);border:var(--stroke-ui) solid var(--color-primary);border-radius:var(--radius-control);background:color-mix(in srgb, var(--color-surface) 92%, transparent);grid-template-columns:clamp(88px,11vw,132px) minmax(0,1fr);align-items:center;width:min(78%,900px);min-height:clamp(84px,15%,116px);display:grid;position:absolute;left:50%;transform:translate(-50%)}.lesson-guide__portrait{align-self:stretch;overflow:hidden}.lesson-guide__portrait img{object-fit:contain;object-position:center top;width:100%;height:150%}.lesson-guide__message,.start-panel h1{color:var(--color-ink);font-size:var(--text-instruction);margin:0;font-weight:900;line-height:1.1}.lesson-guide__message{padding:var(--space-2) var(--space-5) var(--space-2) var(--space-3);text-align:left}.start-panel{z-index:3;width:min(68%, calc(100% - var(--space-8)));justify-items:center;gap:var(--space-6);padding:var(--space-6);border:var(--stroke-ui) solid var(--color-primary);border-radius:var(--radius-card);background:color-mix(in srgb, var(--color-surface) 92%, transparent);display:grid;position:absolute;top:18%;left:50%;transform:translate(-50%)}.start-panel h1{font-size:var(--text-title)}.result-stage{gap:var(--space-5);width:min(90%,1080px);padding:var(--space-6);top:7%}.result-stage__stars{justify-content:center;align-items:start;gap:var(--space-6);width:100%;margin:0;display:flex}.result-stage__star{min-width:0;color:var(--color-ink);font-size:var(--text-instruction);text-align:center;flex-direction:column;align-items:center;margin:0;font-weight:900;line-height:1.1;display:flex}.result-stage__star-icon{color:var(--color-gold);-webkit-text-stroke:1px var(--color-gold-outline);text-shadow:0 1px 1px var(--color-gold-outline);font-size:clamp(48px,7vmin,80px);line-height:1}.result-stage__rhyme{color:var(--color-ink);font-size:var(--text-equation);text-align:center;margin:0;font-weight:900;line-height:1.1}.primary-action{min-width:var(--target-min);min-height:var(--target-min);padding:var(--space-3) var(--space-6);border:var(--stroke-ui) solid var(--color-ink);border-radius:var(--radius-control);color:var(--color-bg);background:var(--color-primary);box-shadow:0 var(--space-1) 0 var(--color-ink);font-size:var(--text-control);cursor:pointer;transition:transform var(--motion-press) var(--ease-playful), background-color var(--motion-press) var(--ease-playful);font-weight:700;line-height:1.1}.primary-action:active{transform:translateY(var(--space-1));background:var(--color-primary-pressed);box-shadow:none}.lesson-continue{z-index:5;right:var(--space-6);bottom:var(--space-5);position:absolute}.candy-bag-stage{--table-bag-size:clamp(190px, 22vw, 250px);--candy-art-size:calc(var(--table-bag-size) * .42);--table-bag-half-size:clamp(95px, 11vw, 125px);z-index:3;position:absolute;inset:21% 6% 3%}.candy-tray{z-index:4;justify-content:center;align-items:end;gap:var(--space-2);width:min(68%,700px);min-height:calc(var(--target-min) + var(--space-5));padding:var(--space-2);border:var(--stroke-ui) solid var(--color-primary);border-radius:var(--radius-card);background:color-mix(in srgb, var(--color-surface) 88%, transparent);display:flex;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.candy-button{z-index:5;box-sizing:content-box;width:var(--candy-art-size);height:var(--candy-art-size);border:var(--stroke-ui) solid var(--color-ink);border-radius:var(--radius-control);background:var(--color-surface);cursor:grab;transition:transform var(--motion-snap) var(--ease-playful), box-shadow var(--motion-press) var(--ease-playful);flex:0 auto;place-items:center;padding:0;display:grid;position:relative}.candy-button[aria-pressed=true]{box-shadow:0 0 0 var(--focus-ring) var(--color-mint);border-style:dashed}.candy-button[data-dragging=true]{box-shadow:none;cursor:grabbing;background:0 0;border-color:#0000;outline:none}.candy-button:disabled{visibility:hidden;pointer-events:none}.candy-button img{object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none;width:100%;height:100%}.bag-cluster{z-index:2;bottom:calc(var(--target-min) + var(--space-8) + var(--space-7) + var(--space-2));justify-content:center;align-items:end;gap:var(--space-4);display:flex;position:absolute;left:50%;transform:translate(-50%)}.table-bag{width:var(--table-bag-size);height:var(--table-bag-size);flex:0 0 var(--table-bag-size);position:relative}.bag-mouth,.completed-bag,.fact-bag{background:0 0;border:0;place-items:center;display:grid;position:relative}.bag-mouth{border-radius:var(--radius-card);cursor:pointer;border:0;width:100%;height:100%;padding:0}.bag-mouth[data-selected-target=true]{outline:var(--stroke-ui) dashed var(--color-focus);outline-offset:calc(0px - var(--stroke-ui));box-shadow:inset 0 0 0 var(--focus-ring) var(--color-mint)}.bag-mouth[data-selected-target=true]:focus-visible{outline:var(--focus-ring) solid var(--color-focus);outline-offset:var(--space-1)}.bag-foreground{--bag-rim-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='white' fill-rule='evenodd' d='M0 0H100V100H0Z M13 29C14 14 28 7 50 7C72 7 86 14 87 29C86 38 72 47.5 50 48C28 47.5 14 38 13 29Z'/%3E%3C/svg%3E");clip-path:none;-webkit-mask-image:var(--bag-rim-mask);-webkit-mask-image:var(--bag-rim-mask);mask-image:var(--bag-rim-mask);z-index:3;position:absolute;inset:0;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.bag-backdrop,.bag-foreground{object-fit:contain;pointer-events:none;width:100%;height:100%}.bag-backdrop{z-index:1;position:relative}.candy-pile{z-index:2;pointer-events:none;position:absolute;inset:0}.candy-pile img{width:var(--candy-art-size);height:var(--candy-art-size);object-fit:contain;position:absolute}.fact-bag .candy-pile img{width:42%;height:42%}.bag-count-status{top:calc(100% + var(--space-3));pointer-events:none;padding:var(--space-1) var(--space-3);border-radius:var(--radius-round);color:var(--color-bg);background:var(--color-berry);font-size:var(--text-support);white-space:nowrap;margin:0;font-weight:700;line-height:1.35;position:absolute;bottom:auto;left:50%;transform:translate(-50%)}.tap-bag-cue{bottom:calc(100% + var(--space-2));pointer-events:none;padding:var(--space-2) var(--space-4);border:var(--stroke-ui) solid var(--color-focus);border-radius:var(--radius-control);color:var(--color-ink);background:var(--color-surface);font-size:var(--text-support);white-space:nowrap;margin:0;font-weight:700;line-height:1.35;position:absolute;left:50%;transform:translate(-50%)}.fact-bag{width:min(28%,280px);height:auto;position:absolute;top:28%;left:50%;transform:translate(-50%)}.completed-bags{align-items:start;width:min(56%,560px);height:auto;display:flex;position:absolute;top:28%;left:50%;transform:translate(-50%)}.completed-bags .fact-bag{width:50%;height:auto;position:relative;top:auto;left:auto;transform:none}.equation-reveal{z-index:4;position:absolute;inset:22% 4% 4%}.equation-reveal__bags{z-index:1;opacity:.72;justify-content:center;width:min(50%,500px);display:flex;position:absolute;top:4%;left:50%;transform:translate(-50%)}.equation-reveal__bags .fact-bag{width:50%;max-width:250px;position:relative;top:auto;left:auto;transform:none}.equation-reveal__value{z-index:3;min-width:44%;padding:var(--space-2) var(--space-5);border:var(--stroke-ui) solid var(--color-primary);border-radius:var(--radius-card);color:var(--color-ink);background:color-mix(in srgb, var(--color-surface) 94%, transparent);box-shadow:0 var(--space-2) 0 color-mix(in srgb, var(--color-ink) 18%, transparent);text-align:center;animation:equation-reveal-in var(--motion-feedback) var(--ease-playful) both;margin:0;font-size:clamp(3rem,8vw,7rem);font-weight:900;line-height:1;position:absolute;top:44%;left:50%;transform:translate(-50%,-50%)}.equation-reveal__status{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.lesson-hint-target{outline:var(--focus-ring) solid var(--color-mint);outline-offset:var(--space-1);animation:lesson-hint-pulse var(--motion-celebrate) var(--ease-playful) infinite alternate}.lesson-stage--hint-highlight .candy-button:not(:disabled),.lesson-stage--hint-highlight .bag-mouth{box-shadow:0 0 0 var(--focus-ring) var(--color-mint)}.gesture-hint{z-index:9;aspect-ratio:1;pointer-events:none;opacity:1;place-items:center;width:clamp(72px,7vw,96px);display:grid;position:absolute}.gesture-hint img{width:100%;height:auto;display:block}.gesture-hint--bag-one,.gesture-hint--bag-two{top:calc(100% - var(--target-min) - var(--space-8) - var(--space-7) - var(--space-2) - var(--table-bag-half-size));animation:gesture-to-bag 2.2s var(--ease-playful) infinite}.gesture-hint--bag-one{--gesture-start-x:0px;left:50%}.gesture-hint--bag-two{--gesture-start-x:calc(0px - var(--table-bag-half-size) - var(--space-2));left:calc(50% + var(--table-bag-half-size) + var(--space-2))}.gesture-hint--continue{animation:gesture-to-continue 2.2s var(--ease-playful) infinite;bottom:5%;right:8%}.shield-battle-stage{z-index:4;position:absolute;inset:0;overflow:hidden}.battle-arena{z-index:2;height:49%;transition:opacity var(--motion-feedback) var(--ease-playful);position:absolute;top:17%;left:7%;right:7%}.battle-target-group{aspect-ratio:1;width:clamp(150px,22vw,270px);max-height:100%;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.battle-target-group--showcase{z-index:2}.battle-target-group--capture-card{z-index:3;animation:battle-capture-card-in .9s var(--ease-playful) both}.battle-target-group--capture-flight{z-index:3;animation:battle-capture-flight 1s var(--ease-playful) both}.battle-capture-card{z-index:4;inset:calc(0px - var(--space-2));pointer-events:none;border:var(--stroke-ui) solid var(--color-primary);border-radius:var(--radius-card);background:color-mix(in srgb, var(--color-surface) 12%, transparent);box-shadow:0 var(--space-2) 0 color-mix(in srgb, var(--color-ink) 18%, transparent);position:absolute}.battle-monster{z-index:1;transition:transform var(--motion-celebrate) var(--ease-playful);position:absolute;inset:0}.battle-monster img{object-fit:contain;width:100%;height:100%;transition:filter var(--motion-feedback) var(--ease-playful);display:block}.battle-monster--comeback img{filter:grayscale(.72)saturate(.58)}.battle-monster__stripe{z-index:2;background:repeating-linear-gradient(-32deg, color-mix(in srgb, var(--color-comeback) 88%, transparent) 0 var(--space-2), transparent var(--space-2) var(--space-5));opacity:.72;pointer-events:none;display:block;position:absolute;inset:0;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.battle-monster--escaping{animation:battle-monster-escape var(--motion-celebrate) var(--ease-playful) both}.number-shield{z-index:3;aspect-ratio:627/635;width:62%;color:var(--color-ink);font-size:var(--text-shield);place-items:center;font-weight:900;display:grid;position:absolute;bottom:-4%;left:50%;transform:translate(-50%)}.number-shield__art{object-fit:contain;pointer-events:none;width:100%;height:100%;display:block}.number-shield__value{place-items:center;line-height:1;display:grid;position:absolute;inset:0}.shield-battle-stage[data-feedback-step=shield-crack] .number-shield{animation:battle-shield-crack var(--motion-feedback) var(--ease-playful) both}.battle-skill-flight{z-index:5;top:var(--skill-flight-start-y);left:var(--skill-flight-start-x);min-width:var(--target-min);min-height:var(--target-min);padding:var(--space-2) var(--space-4);border:var(--stroke-ui) solid var(--color-primary);border-radius:var(--radius-control);color:var(--color-ink);background:var(--color-surface);box-shadow:0 0 0 var(--focus-ring) var(--color-mint);font-size:var(--text-control);animation:battle-skill-flight var(--motion-celebrate) var(--ease-playful) both;place-items:center;font-weight:900;display:grid;position:absolute}.battle-skill-cards{z-index:6;justify-content:center;align-items:stretch;gap:var(--space-6);height:29%;display:flex;position:absolute;bottom:3%;left:10%;right:10%}.battle-skill-card{width:min(31%,300px);min-width:calc(var(--target-min) * 2.4);min-height:var(--target-min);padding:var(--space-2) var(--space-4);border:var(--stroke-ui) solid var(--color-primary);border-radius:var(--radius-card);color:var(--color-ink);background:color-mix(in srgb, var(--color-surface) 96%, transparent);box-shadow:0 var(--space-2) 0 color-mix(in srgb, var(--color-ink) 22%, transparent);cursor:pointer;transition:opacity var(--motion-feedback) var(--ease-playful), transform var(--motion-press) var(--ease-playful), box-shadow var(--motion-feedback) var(--ease-playful);grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);place-items:center;display:grid}.battle-skill-card:not(:disabled):active{transform:translateY(var(--space-1));box-shadow:0 var(--space-1) 0 color-mix(in srgb, var(--color-ink) 22%, transparent)}.battle-skill-card:focus-visible{outline:var(--focus-ring) solid var(--color-focus);outline-offset:var(--space-1)}.battle-skill-card--correct{border-style:double;border-color:var(--color-mint);box-shadow:0 0 0 var(--focus-ring) var(--color-mint)}.battle-skill-card--correction{border-style:dashed;border-color:var(--color-comeback);box-shadow:0 0 0 var(--focus-ring) color-mix(in srgb, var(--color-comeback) 56%, transparent)}.battle-skill-card--receded{opacity:.48;transform:scale(.96)}.battle-skill-card--glowing{animation:battle-card-glow var(--motion-feedback) var(--ease-playful) both}.battle-skill-card__name{font-size:var(--text-support);text-align:center;grid-column:1;place-self:end center;font-weight:700;line-height:1.1}.battle-skill-card__bags{grid-area:2/1;justify-content:center;justify-self:center;align-items:center;width:min(100%,210px);height:100%;display:flex}.battle-skill-card__bag{aspect-ratio:1;flex:0 50%;width:50%;margin-inline:-4%;position:relative}.battle-skill-card__bag .candy-pile img{width:42%;height:42%}.battle-skill-card__equation{font-size:var(--text-instruction);text-align:center;grid-area:3/1;place-self:start center;font-weight:900;line-height:1}.battle-equation,.battle-reunion{z-index:8;padding:var(--space-2) var(--space-5);border:var(--stroke-ui) solid var(--color-primary);border-radius:var(--radius-card);color:var(--color-ink);background:var(--color-surface);box-shadow:0 var(--space-2) 0 color-mix(in srgb, var(--color-ink) 18%, transparent);white-space:nowrap;animation:equation-reveal-in var(--motion-feedback) var(--ease-playful) both;margin:0;font-weight:900;line-height:1;position:absolute;left:50%;transform:translate(-50%)}.battle-equation{font-size:var(--text-equation);top:42%;transform:translate(-50%,-50%)}.battle-reunion{bottom:calc(100% + var(--space-3));border-color:var(--color-comeback);font-size:var(--text-instruction)}.battle-correction-bags{z-index:6;justify-content:center;align-items:center;gap:var(--space-3);width:min(40%,420px);height:37%;display:flex;position:absolute;top:23%;left:50%;transform:translate(-50%)}.battle-correction-bag{aspect-ratio:1;width:min(50%,210px);position:relative}.battle-correction-bag .candy-pile img{width:42%;height:42%}.shield-battle-stage--paused *,.shield-battle-stage--paused :before,.shield-battle-stage--paused :after{animation-play-state:paused!important}@keyframes equation-reveal-in{0%{opacity:0;transform:translate(-50%, calc(-50% + var(--space-5)))}to{opacity:1;transform:translate(-50%,-50%)}}@keyframes battle-card-glow{0%{box-shadow:0 0 0 0 var(--color-mint)}to{box-shadow:0 0 var(--space-5) var(--focus-ring) var(--color-mint)}}@keyframes battle-skill-flight{0%{opacity:1;transform:translate(-50%,-50%)rotate(-5deg)}to{opacity:.9;transform:translate(calc(-50% + var(--skill-flight-delta-x)), calc(-50% + var(--skill-flight-delta-y))) rotate(4deg)}}@keyframes battle-shield-crack{0%,to{transform:translate(-50%)}35%{transform:translateX(calc(-50% - var(--space-2)))}68%{transform:translateX(calc(-50% + var(--space-2)))}}@keyframes battle-monster-escape{0%{opacity:1;transform:translate(0)}to{opacity:.2;transform:translateX(calc(0px - var(--space-8)))}}@keyframes battle-capture-card-in{0%{opacity:.65;transform:translate(-50%)scale(.92)}to{opacity:1;transform:translate(-50%)scale(1)}}@keyframes battle-capture-flight{0%{opacity:1;transform:translate(-50%)scale(1)}to{opacity:.8;transform:translate(115%,-88%)scale(.32)}}@keyframes lesson-hint-pulse{0%{outline-color:var(--color-mint)}to{outline-color:var(--color-focus)}}@keyframes gesture-to-bag{0%,14%{opacity:.82;transform:translate(calc(-50% + var(--gesture-start-x)), calc(-50% + var(--table-bag-size))) rotate(-18deg)}28%{opacity:1}82%,to{opacity:.92;transform:translate(-50%,-50%)rotate(0)}}@keyframes gesture-to-continue{0%,14%{opacity:.82;transform:translate(-120%,-100%)rotate(-18deg)}28%,68%{opacity:1}82%,to{opacity:.88;transform:translate(20%,20%)rotate(0)}}@media (width>=1200px){.bag-cluster{bottom:calc(var(--target-min) + var(--space-8) + var(--space-7) + var(--space-2) + var(--space-2))}.gesture-hint--bag-one,.gesture-hint--bag-two{top:calc(100% - var(--target-min) - var(--space-8) - var(--space-7) - var(--space-2) - var(--space-2) - var(--table-bag-half-size))}}@media (prefers-reduced-motion:reduce){:root{--motion-snap:1ms;--motion-feedback:1ms;--motion-celebrate:1ms}.primary-action:active{transform:none}.candy-button{transition-duration:1ms}.equation-reveal__value{animation:none}.lesson-hint-target{animation-duration:1ms}.gesture-hint{opacity:.85;animation:none;transform:none}.battle-skill-card,.battle-monster{transition-duration:1ms}.battle-skill-card--glowing,.number-shield,.battle-monster--escaping,.battle-equation,.battle-reunion{animation:none}.battle-skill-flight{opacity:.9;transform:translate(calc(-50% + var(--skill-flight-delta-x)), calc(-50% + var(--skill-flight-delta-y)));animation:none}.battle-monster--escaping{opacity:.2;transform:translateX(calc(0px - var(--space-8)))}.battle-target-group--capture-card{opacity:1;animation:none;transform:translate(-50%)scale(1)}.battle-target-group--capture-flight{opacity:.8;animation:none;transform:translate(115%,-88%)scale(.32)}}@font-face{font-family:Noto Sans SC;src:url(/assets/fonts/noto-sans-sc-2.004-subset.woff2)format("woff2");font-style:normal;font-weight:500 900;font-display:swap}:root{--font-ui:"Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--color-bg:#fff8e8;--color-surface:#fffdf7;--color-ink:#3f2a22;--color-primary:#a9471f;--color-primary-pressed:#863815;--color-mint:#7dbe99;--color-berry:#73506f;--color-gold:gold;--color-gold-outline:#704000;--color-comeback:#77647b;--color-focus:#1f5fbf;--text-support:clamp(18px, 2.3vmin, 24px);--text-control:clamp(20px, 2.6vmin, 28px);--text-instruction:clamp(26px, 3.4vmin, 40px);--text-title:clamp(36px, 5vmin, 64px);--text-equation:clamp(48px, 7vmin, 88px);--text-shield:clamp(56px, 8vmin, 96px);--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--radius-control:20px;--radius-card:28px;--radius-round:999px;--stroke-ui:3px;--target-min:64px;--focus-ring:4px;--motion-press:.12s;--motion-snap:.25s;--motion-feedback:.4s;--motion-celebrate:.6s;--ease-playful:cubic-bezier(.2, .8, .2, 1)}*,:before,:after{box-sizing:border-box}html,body{min-width:100%;min-height:100%;color:var(--color-ink);background-color:var(--color-bg);font-family:var(--font-ui);margin:0}body,#root{width:100%;min-height:100dvh}button{color:inherit;font:inherit}button:focus-visible{outline:var(--focus-ring) solid var(--color-focus);outline-offset:var(--space-1)}