@font-face{font-family:Pretendard;font-weight:400;font-display:swap;src:url(/fonts/Pretendard-Regular.subset.woff2)format("woff2")}@font-face{font-family:Pretendard;font-weight:700;font-display:swap;src:url(/fonts/Pretendard-Bold.subset.woff2)format("woff2")}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background-color:var(--color-bg);background-image:var(--gradient-sky);color:var(--color-ink);font-family:var(--font-family);font-size:var(--font-size-body);font-weight:var(--font-weight-normal);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;background-attachment:fixed;line-height:1.4;overflow:hidden}button{font:inherit;color:inherit;touch-action:manipulation}:focus-visible{outline:var(--size-stroke) solid var(--color-ink);outline-offset:2px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important}}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.btn{--btn-bg:var(--color-primary);--btn-fg:var(--color-onPrimary);--btn-edge:var(--color-primaryDeep);justify-content:center;align-items:center;gap:var(--space-1);min-width:var(--size-touchMin);min-height:var(--size-touchMin);padding:0 var(--space-4);border-radius:var(--radius-pill);background:var(--btn-bg);color:var(--btn-fg);font-size:var(--font-size-button);font-weight:var(--font-weight-bold);white-space:nowrap;cursor:pointer;box-shadow:inset 0 calc(var(--depth) * -1) 0 var(--btn-edge), var(--shadow);padding-bottom:calc(var(--depth) / 2);transition:transform var(--motion-fast) var(--ease-soft), box-shadow var(--motion-fast) var(--ease-soft);border:0;line-height:1.2;display:inline-flex;position:relative}.btn svg{width:var(--size-icon);height:var(--size-icon);stroke-width:2.5px;flex:none}.btn:active:not(:disabled){transform:translateY(calc(var(--depth) / 2));box-shadow:inset 0 calc(var(--depth) / -2) 0 var(--btn-edge), var(--shadow)}.btn--secondary{--btn-bg:var(--color-surface);--btn-fg:var(--color-ink);--btn-edge:var(--color-primaryLine)}.btn--secondary svg{color:var(--color-primary)}.btn--sunny{--btn-bg:var(--color-secondary);--btn-fg:var(--color-ink);--btn-edge:var(--color-secondaryDeep)}.btn--icon{width:var(--size-touchMin);padding:0 0 calc(var(--depth) / 2)}.btn--ghost{--btn-bg:transparent;--btn-fg:var(--color-ink);box-shadow:none}.btn--ghost:active:not(:disabled){box-shadow:none}.btn:disabled,.btn--secondary:disabled{--btn-bg:var(--color-surfaceDeep);--btn-fg:var(--color-disabled);cursor:default;box-shadow:inset 0 0 0 var(--size-stroke) var(--color-disabled);padding-bottom:0}.btn:disabled svg{color:var(--color-disabled)}.card{background:var(--color-surface);border-radius:var(--radius-card);box-shadow:var(--shadow);padding:var(--space-3)}.topbar{align-items:center;gap:var(--space-2);height:var(--size-topBar);padding:0 var(--space-3);grid-template-columns:1fr auto 1fr;grid-template-areas:"left title right";display:grid}.topbar__left{min-width:var(--size-touchMin);grid-area:left;justify-content:flex-start;display:flex}.topbar__title{align-items:center;gap:var(--space-1);font-size:var(--font-size-title);font-weight:var(--font-weight-bold);text-align:center;white-space:nowrap;grid-area:title;margin:0;line-height:1.2;display:inline-flex}.topbar__right{justify-content:flex-end;align-items:center;gap:var(--space-2);grid-area:right;display:flex}.stars{gap:var(--space-1);display:inline-flex}.stars svg{width:var(--size-icon);height:var(--size-icon);stroke:var(--color-primary);stroke-width:2px;stroke-linejoin:round;fill:var(--color-surfaceDeep)}.stars svg.star--on{stroke:var(--color-ink);fill:var(--color-secondary)}.frame{--frame-topbar:var(--size-topBar);--answers-height:calc(100dvh - var(--frame-topbar) - var(--question-height));z-index:1;grid-template-rows:var(--frame-topbar) var(--question-height) 1fr;background:var(--gradient-sky);grid-template-columns:minmax(0,1fr);height:100dvh;display:grid;position:relative;overflow:hidden}.frame__sky{z-index:-1;pointer-events:none;position:absolute;inset:0}.frame__question{padding:var(--space-1) var(--space-6);justify-content:center;align-items:center;min-height:0;display:flex}.frame__answers{justify-content:center;align-items:center;gap:var(--space-2);min-width:0;padding:var(--space-1) var(--space-4) var(--space-2);flex-wrap:wrap;min-height:0;display:flex}.rotate-notice{z-index:100;justify-content:center;align-items:center;gap:var(--space-3);padding:var(--space-4);background:var(--gradient-sky);text-align:center;font-size:var(--font-size-title);font-weight:var(--font-weight-bold);flex-direction:column;display:none;position:fixed;inset:0}.rotate-notice__mascot{width:calc(var(--space-8) * 4);height:auto}.rotate-notice>svg:not(.mascot){width:calc(var(--size-icon) * 3);height:calc(var(--size-icon) * 3);stroke:var(--color-primary)}.rotate-notice__tablet{animation:rotate-hint calc(var(--motion-slow) * 8) ease-in-out infinite}@keyframes rotate-hint{0%,20%{transform:rotate(0)}60%,to{transform:rotate(-90deg)}}@media (orientation:portrait) and (width<=351px){.rotate-notice{display:flex}}.result-mark{width:var(--size-touchMin);height:var(--size-touchMin);border:var(--size-stroke) solid var(--color-surface);border-radius:var(--radius-pill);color:var(--color-onPrimary);box-shadow:var(--shadow);justify-content:center;align-items:center;display:inline-flex}.result-mark svg{width:var(--size-icon);height:var(--size-icon);stroke-width:4px}.result-mark--correct{background:var(--color-correct);animation:pop var(--motion-slow) var(--ease-bounce)}.result-mark--wrong{background:var(--color-wrong)}@keyframes pop{0%{transform:scale(.6)}70%{transform:scale(1.15)}to{transform:scale(1)}}.spin{animation:spin calc(var(--motion-slow) * 4) linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.mascot{display:block;overflow:visible}.mascot--bob{animation:mascot-bob var(--ambient-bob) ease-in-out infinite}.mascot__wave{transform-box:fill-box;transform-origin:20% 80%;animation:mascot-wave calc(var(--ambient-bob) / 2) ease-in-out infinite}.mascot__note{animation:twinkle var(--ambient-twinkle) ease-in-out infinite;transform-box:fill-box;transform-origin:50%}@keyframes mascot-bob{0%,to{transform:translateY(0)rotate(-2deg)}50%{transform:translateY(calc(var(--space-2) * -1)) rotate(2deg)}}@keyframes mascot-wave{0%,to{transform:rotate(0)}50%{transform:rotate(-24deg)}}@keyframes twinkle{0%,to{opacity:.7;transform:scale(.9)rotate(-6deg)}50%{opacity:1;transform:scale(1.1)rotate(6deg)}}@media (prefers-reduced-motion:reduce){.mascot--bob,.mascot__wave,.mascot__note{animation:none}}.topbar__title>svg:not(.mascot){width:var(--size-icon);height:var(--size-icon);stroke:var(--color-primary);stroke-width:2.5px}.btn:focus-visible,.choice:focus-visible,.game-card:focus-visible{outline:var(--size-stroke) solid var(--color-ink);outline-offset:var(--size-stroke)}@media (width<=639px){.topbar{grid-template-columns:var(--size-touchMin) 1fr var(--size-touchMin);gap:var(--space-1);padding:0 var(--space-2)}.topbar__title{font-size:var(--font-size-button);white-space:normal;word-break:keep-all;text-wrap:balance;justify-content:center}.frame{--frame-topbar:calc(var(--size-topBar) + var(--space-5));--question-height:34dvh}.frame .topbar{grid-template-rows:var(--size-topBar) var(--space-5);height:var(--frame-topbar);grid-template-areas:"left title right""extra extra extra"}.frame .topbar__right{display:contents}.frame .topbar__right>:last-child{grid-area:right}.frame .topbar__right>:not(:last-child){grid-area:extra;justify-self:center}.frame:has(.result) .topbar__right>:not(:last-child){visibility:hidden}.frame__question{padding:var(--space-4) var(--space-2) var(--space-1)}.frame__answers{padding:var(--space-1) var(--space-1) var(--space-2)}}@media (height<=519px){.topbar{height:var(--size-touchMin)}.frame{--frame-topbar:var(--size-touchMin);--question-height:40dvh}.frame__question{padding-top:var(--space-3)}}@media (width<=639px){.frame--compact-answers{--question-height:calc(100dvh - var(--frame-topbar) - var(--size-choice) * 2 - var(--space-2) - var(--space-4))}}@media (height<=519px){.frame--compact-answers{--question-height:calc(100dvh - var(--frame-topbar) - var(--size-choice) - var(--space-4))}.frame--side-answers{grid-template-columns:minmax(0,3fr) minmax(0,2fr);grid-template-rows:var(--frame-topbar) minmax(0, 1fr)}.frame--side-answers>.topbar{grid-column:1/-1}.frame--side-answers .frame__question{padding:var(--space-3) var(--space-1) var(--space-2) var(--space-4)}.frame--side-answers .frame__answers{padding:var(--space-2) var(--space-4) var(--space-2) var(--space-1)}.frame--compact-answers:not(.frame--side-answers) .frame__question{padding-top:var(--space-1)}}.frame__cloud{height:auto;fill:var(--color-surface);opacity:.85;animation:cloud-drift var(--ambient-drift) ease-in-out infinite alternate;position:absolute}.frame__cloud--a{top:20%;left:calc(var(--space-6) * -1);width:calc(var(--space-8) * 3)}.frame__cloud--b{top:60%;right:calc(var(--space-6) * -1);width:calc(var(--space-8) * 2.5);animation-direction:alternate-reverse}@keyframes cloud-drift{0%{transform:translateX(calc(var(--space-4) * -1))}to{transform:translateX(var(--space-4))}}.frame__question{padding-top:var(--space-4)}.qcard{width:100%;max-width:calc(var(--space-8) * 14);border:var(--size-stroke) solid var(--color-primaryLine);border-radius:var(--radius-card);background:var(--color-surface);height:100%;box-shadow:var(--shadow);animation:rise-in var(--motion-slow) var(--ease-bounce) backwards;flex-direction:column;display:flex;position:relative}.qcard__label{top:calc(var(--space-3) * -1);align-items:center;gap:var(--space-1);min-height:var(--space-6);padding:0 var(--space-3) calc(var(--depth) / 2);border-radius:var(--radius-pill);background:var(--color-primary);color:var(--color-onPrimary);font-size:var(--font-size-body);font-weight:var(--font-weight-bold);white-space:nowrap;box-shadow:inset 0 calc(var(--depth) * -1) 0 var(--color-primaryDeep);display:inline-flex;position:absolute;left:50%;transform:translate(-50%)}.qcard__label svg{width:var(--size-icon);height:var(--size-icon)}.qcard__body{justify-content:center;align-items:center;gap:var(--space-3);min-height:0;padding:var(--space-5) var(--space-4) var(--space-3);font-size:var(--font-size-display);font-weight:var(--font-weight-bold);text-align:center;flex-wrap:wrap;flex:1;line-height:1.2;display:flex}.qcard__mark{top:calc(var(--space-2) * -1);right:calc(var(--space-2) * -1);position:absolute}.qcard--correct{border-color:var(--color-correct);animation:pop-soft var(--motion-slow) var(--ease-bounce)}.qcard--wrong{border-color:var(--color-wrong);animation:wobble var(--motion-shake) ease-in-out}.choice-grid{justify-content:center;align-items:center;gap:var(--space-3);flex-wrap:wrap;width:100%;display:flex}.choice{justify-content:center;align-items:center;gap:var(--space-1);min-width:calc(var(--space-8) * 3);min-height:var(--size-choice);padding:0 var(--space-5) calc(var(--depth) / 2);border:var(--size-stroke) solid var(--color-primaryLine);border-radius:var(--radius-pill);background:var(--color-surface);color:var(--color-ink);font-size:var(--font-size-title);font-weight:var(--font-weight-bold);cursor:pointer;box-shadow:inset 0 calc(var(--depth) * -1) 0 var(--color-primaryLine), var(--shadow);transition:transform var(--motion-fast) var(--ease-soft), background-color var(--motion-fast) ease, box-shadow var(--motion-fast) var(--ease-soft);animation:rise-in var(--motion-slow) var(--ease-bounce) backwards;line-height:1.2;display:inline-flex;position:relative}.choice:active:not(:disabled){transform:translateY(calc(var(--depth) / 2));box-shadow:inset 0 calc(var(--depth) / -2) 0 var(--color-primaryLine), var(--shadow)}.choice:disabled{border-color:var(--color-disabled);background:var(--color-surfaceDeep);color:var(--color-disabled);cursor:default;box-shadow:none}.choice--selected{border-color:var(--color-primary);background:var(--color-primarySoft);transform:translateY(calc(var(--depth) / -2));box-shadow:inset 0 calc(var(--depth) * -1) 0 var(--color-primary), var(--shadow)}.choice__mark{width:var(--size-icon);height:var(--size-icon);stroke-width:4px}.choice--correct{border-color:var(--color-correct);background:var(--color-correct);color:var(--color-onPrimary);box-shadow:inset 0 calc(var(--depth) * -1) 0 var(--color-correctDeep), var(--shadow);animation:pop-soft var(--motion-slow) var(--ease-bounce)}.choice--wrong{border-color:var(--color-wrong);background:var(--color-wrong);color:var(--color-onPrimary);box-shadow:inset 0 calc(var(--depth) * -1) 0 var(--color-wrongDeep), var(--shadow);animation:wobble var(--motion-shake) ease-in-out}.progress-dots{align-items:center;gap:var(--space-1);display:inline-flex}.progress-dots__dot{width:var(--space-2);height:var(--space-2);border:var(--size-stroke) solid var(--color-primaryLine);border-radius:var(--radius-pill);background:var(--color-surface);transition:background-color var(--motion-normal) ease, transform var(--motion-normal) var(--ease-bounce)}.progress-dots__dot.is-done{border-color:var(--color-primary);background:var(--color-primary)}.progress-dots__dot.is-now{width:var(--space-3);height:var(--space-3);border-color:var(--color-ink);background:var(--color-secondary);animation:dot-breathe var(--ambient-breathe) ease-in-out infinite}.progress-bar{width:calc(var(--space-8) * 4);height:var(--space-3);border:var(--size-stroke) solid var(--color-primaryLine);border-radius:var(--radius-pill);background:var(--color-surface);display:inline-block;overflow:hidden}.progress-bar__fill{border-radius:var(--radius-pill);background:var(--color-primary);height:100%;transition:width var(--motion-normal) var(--ease-soft);display:block}.frame>.topbar{z-index:11;position:relative}.result{z-index:10;overscroll-behavior:contain;padding:var(--frame-topbar) var(--space-4) var(--space-4);background:color-mix(in srgb, var(--color-bgEnd) 85%, transparent);animation:fade-in var(--motion-normal) ease-out;grid-template-columns:minmax(0,1fr);place-items:start center;display:grid;position:absolute;inset:0;overflow-y:auto}.result__card{align-items:center;gap:var(--space-2);width:min(calc(var(--space-8) * 11), 100%);padding:0 var(--space-6) var(--space-4);border-radius:var(--radius-card);background:var(--color-surface);box-shadow:var(--shadow);text-align:center;animation:rise-in var(--motion-slow) var(--ease-bounce);flex-direction:column;margin-block:auto;display:flex}.result__mascot{width:min(calc(var(--space-8) * 3), 26dvh);height:auto;margin-top:calc(min(calc(var(--space-8) * 3), 26dvh) * -.4)}.result__title{color:var(--color-primary);font-size:var(--font-size-display);font-weight:var(--font-weight-bold);word-break:keep-all;text-wrap:balance;margin:0;line-height:1.2}.result__stars{align-items:flex-end;gap:var(--space-3);display:flex}.result__star{--size:min(calc(var(--space-8) * 1.5), 13dvh, 22vw);--delay:calc(var(--i) * var(--star-stagger) + var(--motion-slow));width:var(--size);height:var(--size);place-items:center;display:grid;position:relative}.result__star:nth-child(2){--size:min(calc(var(--space-8) * 2), 17dvh, 28vw);margin-bottom:var(--space-2)}.result__star svg{width:100%;height:100%;fill:var(--color-surfaceDeep);stroke:var(--color-primaryLine);stroke-width:1.5px;stroke-linejoin:round}.result__star.is-on svg{fill:var(--color-secondary);stroke:var(--color-ink);animation:star-pop var(--motion-slow) var(--ease-bounce) backwards;animation-delay:var(--delay)}.result__star .burst__bit{animation-delay:var(--delay)}.result__score{font-size:var(--font-size-body);margin:0}.result__score strong{color:var(--color-primary);font-size:var(--font-size-title)}.result__actions{justify-content:center;gap:var(--space-2);margin-top:var(--space-1);flex-wrap:wrap;display:flex}.burst{pointer-events:none;position:absolute;inset:0}.burst__bit{width:calc(var(--space-1) * 1.5);height:calc(var(--space-1) * 1.5);margin:calc(var(--space-1) * -.75);border-radius:var(--radius-pill);background:var(--color-secondary);opacity:0;animation:burst var(--motion-slow) ease-out both;position:absolute;top:50%;left:50%}.burst__bit:nth-child(2n){background:var(--color-primaryLight)}@keyframes burst{0%{opacity:1;transform:rotate(calc(var(--n) * 60deg)) translateY(0) scale(1)}to{opacity:0;transform:rotate(calc(var(--n) * 60deg)) translateY(calc(var(--space-8) * -1)) scale(.4)}}@keyframes rise-in{0%{opacity:0;transform:translateY(var(--space-3)) scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes pop-soft{0%{transform:scale(.96)}60%{transform:scale(1.04)}to{transform:scale(1)}}@keyframes star-pop{0%{opacity:0;transform:scale(.3)rotate(-30deg)}to{opacity:1;transform:scale(1)rotate(0)}}@keyframes wobble{0%,to{transform:translate(0)}25%{transform:translateX(calc(var(--space-1) * -1))}75%{transform:translateX(var(--space-1))}}@keyframes fade-in{0%{opacity:0}}@keyframes dot-breathe{0%,to{transform:scale(1)}50%{transform:scale(1.12)}}@media (prefers-reduced-motion:reduce){.frame__cloud,.progress-dots__dot.is-now{animation:none}.burst{display:none}}.choice-grid{counter-reset:choice}.choice{counter-increment:choice}@media (hover:hover) and (pointer:fine){.choice:before{content:counter(choice);width:var(--space-5);height:var(--space-5);margin-right:var(--space-1);border-radius:var(--radius-pill);background:var(--color-primarySoft);color:var(--color-primary);font-size:var(--font-size-body);place-items:center;display:inline-grid}.choice-grid:not([data-key-start])>.choice:nth-child(n+10):before,.choice-grid[data-key-start="5"]>.choice:nth-child(n+6):before{content:none}.choice--correct:before,.choice--wrong:before{background:var(--color-surface);color:var(--color-ink)}}@media (width<=639px){.qcard__body{row-gap:var(--space-1);padding:var(--space-4) var(--space-2) var(--space-1);font-size:var(--font-size-title)}.choice-grid{gap:var(--space-2);grid-template-columns:repeat(2,1fr);display:grid}.choice{width:100%;min-width:0;padding:0 var(--space-2) calc(var(--depth) / 2)}.result{padding:calc(var(--size-topBar) + min(var(--space-6), 4dvh)) var(--space-2) var(--space-1)}.result__card{gap:var(--space-1);padding:0 var(--space-2) var(--space-2)}.result__mascot{width:min(calc(var(--space-8) * 2), 15dvh);margin-top:calc(min(calc(var(--space-8) * 2), 15dvh) * -.4)}.result__title{font-size:clamp(var(--font-size-button), 6dvh, var(--font-size-title));line-height:1.15}.result__star{--size:min(calc(var(--space-8) * 1.5), 9dvh, 22vw)}.result__star:nth-child(2){--size:min(calc(var(--space-8) * 2), 12dvh, 28vw);margin-bottom:var(--space-1)}.result__actions{grid-template-columns:1fr;width:100%;margin-top:0;display:grid}.qcard__mark{right:calc(var(--space-1) * -1)}.choice:last-child:nth-child(odd){width:calc(50% - var(--space-1));grid-column:1/-1;justify-self:center}}@media (height<=519px){.qcard__body{padding:var(--space-3) var(--space-3) var(--space-1);row-gap:var(--space-1);font-size:var(--font-size-title)}.result{padding:var(--frame-topbar) var(--space-4) var(--space-1)}.result__card{gap:var(--space-1);padding:var(--space-1) var(--space-4) var(--space-2);position:relative}.result__title{line-height:1.1}.result__actions{margin-top:0}.result__mascot{top:var(--space-1);left:var(--space-2);width:min(calc(var(--space-8) * 2), 24dvh);margin:0;position:absolute}.result__title{font-size:var(--font-size-title)}.result__star{--size:min(calc(var(--space-8) * 1.5), 14dvh)}.result__star:nth-child(2){--size:min(calc(var(--space-8) * 2), 18dvh);margin-bottom:var(--space-1)}}.levels{z-index:1;grid-template-rows:var(--size-topBar) minmax(0, 1fr);background:var(--gradient-sky);grid-template-columns:minmax(0,1fr);height:100dvh;display:grid;position:relative;overflow:hidden}.levels__body{--levels-pad-top:var(--space-3);--levels-pad-bottom:var(--space-4);--levels-gap:var(--space-3);justify-content:safe center;align-items:center;gap:var(--space-3);min-height:0;padding:var(--levels-pad-top) var(--space-4) var(--levels-pad-bottom);overscroll-behavior:contain;flex-direction:column;display:flex;overflow-y:auto}.levels__grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:max(var(--size-touchMin), min(calc((100dvh - var(--size-topBar) - var(--levels-pad-top) - var(--levels-pad-bottom) - var(--levels-gap) * 2) / 3), calc(var(--space-8) * 3)));gap:var(--levels-gap);width:100%;max-width:calc(var(--space-8) * 17);display:grid}.level-card{justify-content:center;align-items:center;gap:var(--space-1);min-width:0;min-height:var(--size-touchMin);padding:var(--space-2) var(--space-2) calc(var(--space-2) + var(--depth) / 2);border:var(--size-stroke) solid var(--color-primaryLine);border-radius:var(--radius-card);background:var(--color-surface);color:var(--color-ink);font:inherit;font-size:var(--font-size-body);font-weight:var(--font-weight-bold);cursor:pointer;box-shadow:inset 0 calc(var(--depth) * -1) 0 var(--color-primaryLine), var(--shadow);transition:transform var(--motion-fast) var(--ease-soft), box-shadow var(--motion-fast) var(--ease-soft);animation:rise-in var(--motion-slow) var(--ease-bounce) backwards;animation-delay:calc(var(--i) * var(--motion-fast) / 4);flex-direction:column;line-height:1.2;display:flex;position:relative}.level-card:active{transform:translateY(calc(var(--depth) / 2));box-shadow:inset 0 calc(var(--depth) / -2) 0 var(--color-primaryLine), var(--shadow)}.level-card:focus-visible{outline:var(--size-stroke) solid var(--color-ink);outline-offset:var(--size-stroke)}.level-card__num{width:var(--size-touchMin);height:var(--size-touchMin);padding-bottom:calc(var(--depth) / 2);border-radius:var(--radius-pill);background:var(--color-primary);color:var(--color-onPrimary);font-size:var(--font-size-button);box-shadow:inset 0 calc(var(--depth) / -2) 0 var(--color-primaryDeep);flex:none;place-items:center;display:inline-grid}.level-card__title{text-align:center;word-break:keep-all;text-wrap:balance;min-width:0;max-width:100%}.level-card__stars{display:inline-flex}.levels__pager{align-items:center;gap:var(--space-3);padding:0 var(--space-1);border-radius:var(--radius-pill);background:var(--color-surface);font-weight:var(--font-weight-bold);box-shadow:var(--shadow);display:flex}@media (orientation:portrait){.levels__grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(calc(var(--space-8) * 2.5), auto)}}@media (width<=639px),(height<=519px){.levels__body{--levels-pad-top:var(--space-2);--levels-pad-bottom:var(--space-3);--levels-gap:var(--space-2);padding-inline:var(--space-1)}.levels__grid{grid-auto-rows:minmax(var(--size-touchMin), auto)}.level-card{place-items:center start;gap:var(--space-1);padding:var(--space-1) var(--space-1) calc(var(--space-1) + var(--depth) / 2);border-radius:var(--radius-inner);grid-template-columns:auto 1fr;grid-template-areas:"num stars""title title";display:grid}.level-card__num{width:var(--space-6);height:var(--space-6);grid-area:num}.level-card__title{text-align:left;grid-area:title;justify-self:stretch}.level-card__stars{grid-area:stars}.level-card__stars .stars svg{width:var(--space-3);height:var(--space-3)}}@media (width<=639px){.levels__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (height<=519px){.levels{grid-template-rows:var(--size-touchMin) minmax(0, 1fr)}.levels__body{padding-inline:var(--space-2)}.frame--side-answers .choice-grid{gap:var(--space-2);grid-template-columns:repeat(2,minmax(0,1fr));width:100%;display:grid}.frame--side-answers .choice{width:100%;min-width:0;padding:0 var(--space-2) calc(var(--depth) / 2)}.frame--side-answers .choice:last-child:nth-child(odd){width:calc(50% - var(--space-1));grid-column:1/-1;justify-self:center}.frame--compact-answers:not(.frame--side-answers) .qcard{flex-direction:row;align-items:stretch}.frame--compact-answers:not(.frame--side-answers) .qcard__label{margin:var(--space-1) 0 0 var(--space-1);flex:none;align-self:flex-start;position:static;transform:none}.frame--compact-answers:not(.frame--side-answers) .qcard__body{min-width:0;padding:var(--space-1) var(--space-2)}}.ambient{z-index:0;pointer-events:none;position:fixed;inset:0;overflow:hidden}.ambient__sun{top:calc(var(--space-8) * -2.5);right:calc(var(--space-8) * -1.5);width:calc(var(--space-8) * 7);height:calc(var(--space-8) * 7);border-radius:var(--radius-pill);background:radial-gradient(circle, var(--color-secondarySoft) 0%, transparent 65%);animation:sun-glow var(--ambient-float) ease-in-out infinite;position:absolute}.ambient__cloud{height:auto;fill:var(--color-surface);opacity:.9;animation:cloud-float var(--ambient-drift) ease-in-out infinite alternate;position:absolute}.ambient__cloud--0{width:calc(var(--space-8) * 2.5);top:4%;left:6%}.ambient__cloud--1{width:calc(var(--space-8) * 2);opacity:.75;animation-direction:alternate-reverse;top:9%;left:70%}.ambient__cloud--2{width:calc(var(--space-8) * 2);animation-duration:calc(var(--ambient-drift) * .8);opacity:.7;top:44%;left:-3%}.ambient__item{width:var(--size-icon);height:var(--size-icon);stroke:var(--ambient-color,var(--color-primary));stroke-width:2.5px;opacity:.55;animation:ambient-float var(--ambient-float) ease-in-out infinite;position:absolute}.ambient__item--0{--ambient-color:var(--game-primary-note-star);animation-delay:-2s;top:24%;left:3%}.ambient__item--1{--ambient-color:var(--game-primary-rhythm-bakery);animation-delay:-7s;top:16%;left:20%}.ambient__item--2{--ambient-color:var(--game-primary-key-treasure);animation-delay:-4s;top:19%;right:22%}.ambient__item--3{--ambient-color:var(--game-primary-symbol-match);animation-delay:-9s;top:30%;right:3%}.ambient__item--4{--ambient-color:var(--game-primary-key-treasure);animation-delay:-1s;top:70%;left:2%}.ambient__item--5{--ambient-color:var(--game-primary-rhythm-bakery);animation-delay:-6s;top:66%;right:2%}.ambient__ground{right:0;bottom:calc(var(--space-8) * -1.5);height:calc(var(--space-8) * 2);position:absolute;left:0}.ambient__puff{bottom:0;left:calc(var(--p) * 12.5% - 6%);width:calc(var(--space-8) * 3);height:calc(var(--space-8) * 3);border-radius:var(--radius-pill);background:var(--color-surface);opacity:.85;position:absolute}.ambient__puff:nth-child(2n){bottom:calc(var(--space-2) * -1)}@keyframes ambient-float{0%,to{transform:translateY(0)rotate(-8deg)}50%{transform:translateY(calc(var(--space-2) * -1)) rotate(8deg)}}@keyframes cloud-float{0%{transform:translateX(calc(var(--space-6) * -1))}to{transform:translateX(var(--space-6))}}@keyframes sun-glow{0%,to{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}@media (prefers-reduced-motion:reduce){.ambient__sun,.ambient__cloud,.ambient__item{animation:none}}.screen,.start{z-index:1;position:relative}.screen{grid-template-rows:var(--size-topBar) 1fr;height:100dvh;display:grid;overflow:hidden}.screen__body{justify-content:safe center;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-4) var(--space-6);flex-direction:column;min-height:0;display:flex}.empty-note{padding:var(--space-2) var(--space-4);border-radius:var(--radius-pill);background:var(--color-surface);text-align:center;word-break:keep-all;margin:0}.load-error__actions{justify-content:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.title-note{width:var(--size-icon);height:var(--size-icon);stroke:var(--color-primary);stroke-width:2.5px;animation:note-bob var(--ambient-twinkle) ease-in-out infinite}.title-mascot{width:calc(var(--space-8) * 1.25);height:auto}@keyframes note-bob{0%,to{transform:translateY(0)rotate(-8deg)}50%{transform:translateY(calc(var(--space-1) * -.5)) rotate(8deg)}}.start{--hero:min(calc(var(--space-8) * 5), 36dvh, 56vw);justify-content:center;align-items:center;gap:var(--space-2);height:100dvh;padding-bottom:var(--space-4);flex-direction:column;display:flex}.start__hero{width:calc(var(--hero) * 1.6);height:var(--hero);place-items:end center;display:grid;position:relative}.start__rainbow{animation:rise-in var(--motion-slow) var(--ease-bounce) backwards;position:absolute;inset:0;overflow:hidden}.start__rainbow span{aspect-ratio:1;border:calc(var(--hero) * .16) solid;border-radius:var(--radius-pill);position:absolute;top:100%;left:50%;transform:translate(-50%,-50%)}.start__rainbow span:first-child{border-color:var(--game-light-rhythm-bakery);width:100%}.start__rainbow span:nth-child(2){border-color:var(--color-secondarySoft);width:75%}.start__rainbow span:nth-child(3){border-color:var(--game-light-key-treasure);width:50%}.start__rainbow span:nth-child(4){border-color:var(--game-light-note-star);width:25%}.start__mascot{width:calc(var(--hero) * 1.05);height:auto;position:relative}.start__brand{padding:0 var(--space-3);border-radius:var(--radius-pill);background:var(--color-surface);color:var(--color-primary);font-size:var(--font-size-body);font-weight:var(--font-weight-bold);box-shadow:var(--shadow);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;margin:0;line-height:1.6}.start__title{padding:0 var(--space-1);font-size:min(var(--font-size-hero), 13dvh, 18vw);font-weight:var(--font-weight-bold);color:var(--color-primary);animation:rise-in var(--motion-slow) var(--ease-bounce) backwards;animation-delay:var(--motion-fast);margin:0;line-height:1.15;display:inline-block}@supports ((-webkit-background-clip:text) or (background-clip:text)){.start__title{background-image:var(--gradient-title);-webkit-text-fill-color:transparent;color:#0000;filter:drop-shadow(0 calc(var(--depth) / 2) 0 var(--color-surface));-webkit-background-clip:text;background-clip:text}}.start__button{min-width:calc(var(--space-8) * 4);min-height:calc(var(--space-8) * 1.5);margin-top:var(--space-1);padding:0 var(--space-6) calc(var(--depth) / 2);font-size:var(--font-size-title);animation:breathe var(--ambient-breathe) ease-in-out infinite}.start__button svg{width:var(--font-size-title);height:var(--font-size-title);fill:var(--color-ink)}.start__button .spin{fill:none}.start__button:active,.start__button:disabled{animation:none}.start__button:disabled{--btn-bg:var(--color-secondary);--btn-fg:var(--color-ink);box-shadow:inset 0 calc(var(--depth) * -1) 0 var(--color-secondaryDeep), var(--shadow)}.start__button:disabled svg{color:var(--color-ink)}.start__credit{right:var(--space-3);bottom:var(--space-1);left:var(--space-3);font-size:var(--size-caption);text-align:center;margin:0;position:absolute}.start__licenses{padding:var(--space-5) var(--space-2) var(--space-1);color:var(--color-ink);font-weight:var(--font-weight-bold);text-underline-offset:calc(var(--space-1) / 2);text-decoration:underline}.student-grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:calc(var(--space-8) * 1.25);gap:var(--space-3);width:100%;max-width:calc(var(--space-8) * 17);display:grid}.student-grid .student-btn{--btn-bg:var(--color-surface);--btn-fg:var(--color-ink);--btn-edge:var(--game-line);justify-content:flex-start;gap:var(--space-2);width:100%;min-width:0;padding:0 var(--space-3) calc(var(--depth) / 2) var(--space-1);border:var(--size-stroke) solid var(--game-line);white-space:nowrap;animation:pop-in var(--motion-normal) var(--ease-bounce) backwards;animation-delay:calc(var(--i) * 40ms);overflow:hidden}.student-btn__icon{width:var(--space-8);height:var(--space-8);margin:calc(var(--space-1) * -.5) 0;border:var(--size-stroke) solid var(--color-surface);border-radius:var(--radius-pill);background:var(--game-color);color:var(--color-onPrimary);flex:none;justify-content:center;align-items:center;display:inline-flex}.student-grid .student-btn .student-btn__icon svg{width:var(--size-icon);height:var(--size-icon);color:var(--color-onPrimary)}.student-btn__name{text-align:center;text-overflow:ellipsis;flex:1;min-width:0;overflow:hidden}.student-actions{justify-content:center;align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.pager{align-items:center;gap:var(--space-3);padding:0 var(--space-1);border-radius:var(--radius-pill);background:var(--color-surface);font-weight:var(--font-weight-bold);box-shadow:var(--shadow);display:flex}@keyframes breathe{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}@keyframes pop-in{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.game-grid{gap:var(--space-3);width:100%;max-width:calc(var(--space-8) * 20);grid-template-columns:repeat(4,1fr);display:grid}.game-card{height:min(var(--home-card-height), calc(var(--space-8) * 8));padding:var(--space-1) var(--space-1) 0;border-radius:var(--radius-card);background:var(--color-surface);color:var(--color-ink);font:inherit;text-align:center;cursor:pointer;box-shadow:inset 0 calc(var(--depth) * -1) 0 var(--game-to), var(--shadow);transition:transform var(--motion-fast) var(--ease-soft);animation:card-in var(--motion-slow) var(--ease-bounce) backwards;animation-delay:calc(var(--i) * var(--card-stagger));border:0;flex-direction:column;display:flex;position:relative;overflow:hidden}.game-card:active{transform:scale(.96)}.game-card__window{border-radius:var(--radius-inner);background:linear-gradient(180deg, var(--game-from) 0%, var(--game-to) 100%);flex:62%;place-items:center;min-height:0;display:grid;position:relative;overflow:hidden}.game-card__art{aspect-ratio:1;width:82%;max-height:100%;animation:art-bob var(--ambient-bob) ease-in-out infinite;animation-delay:calc(var(--i) * -800ms);place-items:center;display:grid}.game-card__art>svg{width:100%;height:100%}.game-card__art>svg:not(.game-art){width:55%;height:55%;stroke:var(--game-color)}.game-card__clouds{right:0;bottom:calc(var(--space-2) * -1);height:var(--space-6);background:radial-gradient(circle at 12% 100%, var(--color-surface) 0 var(--space-4), transparent calc(var(--space-4) + 1px)), radial-gradient(circle at 42% 100%, var(--color-surface) 0 var(--space-5), transparent calc(var(--space-5) + 1px)), radial-gradient(circle at 74% 100%, var(--color-surface) 0 var(--space-4), transparent calc(var(--space-4) + 1px)), radial-gradient(circle at 98% 100%, var(--color-surface) 0 var(--space-4), transparent calc(var(--space-4) + 1px));position:absolute;left:0}.game-card__info{align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2) var(--space-3);flex-direction:column;flex:none;display:flex}.game-card__name{font-size:var(--font-size-body);font-weight:var(--font-weight-bold);word-break:keep-all;text-wrap:balance;line-height:1.25}.game-card__soon{white-space:nowrap;padding:0 var(--space-2);border-radius:var(--radius-pill);background:var(--color-surfaceDeep);font-size:var(--font-size-body);line-height:1.5}.game-card--bump{animation:card-bump var(--motion-normal) ease-out}.game-card--shake{animation:card-shake var(--motion-shake) ease-in-out}@keyframes card-in{0%{opacity:0;transform:translateY(var(--space-4)) scale(.85)}60%{opacity:1;transform:translateY(calc(var(--space-1) * -1)) scale(1.04)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes card-bump{0%{transform:scale(.95)}60%{transform:scale(1.06)}to{transform:scale(1)}}@keyframes card-shake{0%,to{transform:translate(0)rotate(0)}20%{transform:translateX(calc(var(--space-1) * -1)) rotate(-2deg)}40%{transform:translateX(var(--space-1)) rotate(2deg)}60%{transform:translateX(calc(var(--space-1) * -.75)) rotate(-1deg)}80%{transform:translateX(calc(var(--space-1) * .5)) rotate(1deg)}}@keyframes art-bob{0%,to{transform:translateY(0)}50%{transform:translateY(calc(var(--space-1) * -1))}}@media (prefers-reduced-motion:reduce){.title-note,.start__button,.game-card__art{animation:none}}@media (orientation:portrait){.game-grid{gap:var(--space-3);max-width:calc(var(--space-8) * 12);grid-template-columns:repeat(2,1fr)}.game-card{height:min(calc((100dvh - var(--size-topBar) - var(--space-2) - var(--space-6) - var(--space-3)) / 2), calc(var(--space-8) * 8))}.student-grid{grid-template-columns:repeat(3,1fr)}}@media (width<=639px){.student-actions--paged .trial-btn{width:var(--size-touchMin);padding:0 0 calc(var(--depth) / 2)}.student-actions--paged .trial-btn__text{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.screen__body{gap:var(--space-2);padding:var(--space-2) var(--space-1) var(--space-4);overflow-y:auto}.game-grid{gap:var(--space-2)}.game-card__info{padding:var(--space-1) var(--space-1) var(--space-2)}.student-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:var(--size-touchMin);gap:var(--space-2)}.student-grid .student-btn{gap:var(--space-1);padding:0 var(--space-1) calc(var(--depth) / 2) var(--space-1)}.student-btn__icon{width:var(--space-5);height:var(--space-5);margin:0}.student-grid .student-btn .student-btn__icon svg{width:var(--space-3);height:var(--space-3)}.title-mascot{width:var(--space-8)}}@media (height<=519px){.screen{grid-template-rows:var(--size-touchMin) 1fr}.screen__body{gap:var(--space-1);padding:var(--space-1) var(--space-4) var(--space-2);overflow-y:auto}.game-card{height:calc(100dvh - var(--size-touchMin) - var(--space-1) - var(--space-3))}.game-card__info{padding:0 var(--space-1) var(--space-2);gap:0}.student-grid{grid-auto-rows:var(--size-touchMin);gap:var(--space-2)}.student-grid .student-btn{gap:var(--space-1);padding:0 var(--space-2) calc(var(--depth) / 2) var(--space-1)}.student-btn__icon{width:var(--space-5);height:var(--space-5);margin:0}.student-grid .student-btn .student-btn__icon svg{width:var(--space-3);height:var(--space-3)}.title-mascot{width:var(--space-8)}.start{--hero:min(calc(var(--space-8) * 5), 52dvh, 36vw);place-content:center;justify-items:center;column-gap:var(--space-6);row-gap:var(--space-1);padding-bottom:var(--space-5);grid-template-columns:auto auto;grid-template-areas:"hero brand""hero title""hero button";display:grid}.start__hero{grid-area:hero}.start__brand{grid-area:brand;align-self:end}.start__title{font-size:min(var(--font-size-hero), 20dvh);grid-area:title}.start__button{min-height:calc(var(--space-8) * 1.25);grid-area:button;align-self:start}}@media (height<=400px) and (orientation:landscape){.screen__body:has(>.student-grid){align-content:safe center;place-items:center;column-gap:var(--space-2);padding:var(--space-1);grid-template-columns:minmax(0,1fr) auto;display:grid}.student-grid .student-btn{padding:0 var(--space-1) calc(var(--depth) / 2)}.student-btn__icon{width:var(--space-4);height:var(--space-4)}.student-grid .student-btn .student-btn__icon svg{width:var(--space-2);height:var(--space-2)}.screen__body>.empty-note{grid-column:1/-1}.student-actions{gap:var(--space-2);flex-flow:column}.pager{gap:var(--space-1);padding:var(--space-1) 0;flex-direction:column}.student-actions--paged .trial-btn{width:var(--size-touchMin);padding:0 0 calc(var(--depth) / 2)}.student-actions--paged .trial-btn__text{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}}