@layer reset, tokens, base, components, scenes, utilities, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { color-scheme: light; scroll-behavior: smooth; }
  body, h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
  button, input, textarea { font: inherit; }
  button { border: 0; }
  img { display: block; max-width: 100%; }
  [hidden] { display: none !important; }
}

@layer tokens {
  :root {
    --cream-0: #fffdf7;
    --cream-1: #fff8e9;
    --cream-2: #f7edda;
    --paper: #fffef9;
    --ink: #37454a;
    --ink-strong: #26363a;
    --ink-soft: #67777a;
    --line: rgba(60, 79, 82, 0.13);
    --mint-1: #dff5ee;
    --mint-2: #b9ebe0;
    --mint-3: #6ccdb7;
    --mint-4: #3c9d89;
    --coral-1: #ffe0d7;
    --coral-2: #ff9a80;
    --coral-3: #f67261;
    --yellow-1: #fff0b8;
    --yellow-2: #f7cb5d;
    --blue-1: #dff1fb;
    --blue-2: #73bee6;
    --violet-1: #ece7fa;
    --violet-2: #927fd0;
    --pink-1: #ffe3ea;
    --pink-2: #eb8498;
    --success: #42986f;
    --danger: #bd4e52;
    --shadow-soft: 0 18px 50px rgba(56, 81, 75, 0.12);
    --shadow-card: 0 12px 0 rgba(78, 95, 90, 0.06), 0 20px 40px rgba(65, 91, 84, 0.1);
    --radius-s: 14px;
    --radius-m: 22px;
    --radius-l: 34px;
    --radius-xl: 50px;
    --font-rounded: ui-rounded, "Arial Rounded MT Bold", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
    --font-body: "Apple SD Gothic Neo", "Noto Sans KR", Pretendard, system-ui, sans-serif;
  }
}

@layer base {
  body {
    min-width: 320px;
    min-height: 100vh;
    overflow-x: hidden;
    background:
      radial-gradient(circle at 8% 12%, rgba(255,255,255,.88) 0 3px, transparent 4px),
      radial-gradient(circle at 87% 23%, rgba(255,255,255,.74) 0 2px, transparent 3px),
      linear-gradient(145deg, #d8f3ed 0%, #edf8e8 48%, #fff4d9 100%);
    color: var(--ink);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .36;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
    mix-blend-mode: multiply;
    z-index: 100;
  }

  button, a, textarea { -webkit-tap-highlight-color: transparent; }
  button { color: inherit; cursor: pointer; }
  button:focus-visible, a:focus-visible, textarea:focus-visible, summary:focus-visible {
    outline: 4px solid rgba(39, 106, 152, .7);
    outline-offset: 4px;
  }
  em { font-style: normal; color: var(--coral-3); }

  .skip-link {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 500;
    transform: translateY(-150%);
    border-radius: 12px;
    background: var(--ink-strong);
    color: #fff;
    padding: 12px 18px;
    font-weight: 800;
    transition: transform .2s ease;
  }
  .skip-link:focus { transform: translateY(0); }

  .app-shell { min-height: 100vh; position: relative; isolation: isolate; }
  .ambient-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; opacity: .78; }
  main { width: 100%; }
  .scene { min-height: calc(100vh - 84px); }
  .scene:focus { outline: none; }

  .eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--mint-4);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .08em;
  }
  .eyebrow > span {
    width: 22px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
  }
}

@layer components {
  .topbar {
    position: relative;
    z-index: 50;
    width: min(1460px, calc(100% - 40px));
    height: 84px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
  }

  .brand-button {
    display: inline-flex;
    width: max-content;
    align-items: center;
    gap: 10px;
    background: transparent;
    border-radius: 18px;
    padding: 6px;
  }
  .brand-button:hover .brand-mark { transform: rotate(-5deg) translateY(-2px); }
  .brand-mark { position: relative; width: 46px; height: 43px; transition: transform .25s cubic-bezier(.2,.8,.2,1.2); }
  .brand-mark::before {
    content: "";
    position: absolute;
    left: 5px;
    right: 5px;
    bottom: 0;
    height: 31px;
    border-radius: 9px 9px 12px 12px;
    background: #fff8e5;
    box-shadow: inset 0 -4px 0 rgba(216,187,113,.18), 0 5px 12px rgba(64,101,91,.14);
  }
  .brand-roof {
    position: absolute;
    z-index: 2;
    left: 3px;
    top: 1px;
    width: 40px;
    height: 26px;
    border-radius: 8px;
    background: var(--coral-2);
    transform: rotate(45deg) scale(.72);
    box-shadow: inset -4px -4px 0 rgba(179,80,63,.13);
  }
  .brand-letter { position: absolute; z-index: 3; inset: 17px 0 0; text-align: center; font-weight: 1000; color: #6d5a4e; font-size: 17px; }
  .brand-text { display: grid; line-height: 1.02; text-align: left; }
  .brand-text strong { color: var(--ink-strong); font-family: var(--font-rounded); font-size: 18px; letter-spacing: -.03em; }
  .brand-text small { margin-top: 3px; color: var(--mint-4); font-size: 12px; font-weight: 900; letter-spacing: .18em; }

  .day-meter {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 250px;
    padding: 9px 14px 9px 10px;
    border: 1px solid rgba(76,118,106,.12);
    border-radius: 18px;
    background: rgba(255,255,255,.58);
    backdrop-filter: blur(14px);
    box-shadow: 0 7px 20px rgba(58,91,82,.06);
  }
  .day-meter-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; background: var(--yellow-1); color: #a56f1d; font-weight: 1000; }
  .day-meter > span:nth-child(2) { display: grid; min-width: 65px; }
  .day-meter strong { color: var(--ink-strong); font-size: 14px; }
  .day-meter small { margin-top: 1px; color: var(--ink-soft); font-size: 10px; font-weight: 700; }
  .day-meter-track { flex: 1; height: 7px; overflow: hidden; border-radius: 99px; background: rgba(61,97,88,.11); }
  .day-meter-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mint-3), #f6ce63); transition: width .6s ease; }

  .top-actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
  .round-action, .parent-action {
    min-height: 46px;
    border: 1px solid rgba(73,99,93,.13);
    background: rgba(255,255,255,.63);
    box-shadow: 0 6px 16px rgba(52,80,72,.06);
    backdrop-filter: blur(10px);
  }
  .round-action { min-width: 54px; border-radius: 16px; padding: 5px 8px; display: grid; place-items: center; line-height: 1; }
  .round-action > span:first-child { font-weight: 1000; font-size: 18px; }
  .round-action .action-label { font-size: 9px; color: var(--ink-soft); font-weight: 800; }
  .round-action[aria-pressed="false"] > span:first-child { opacity: .4; text-decoration: line-through; }
  .parent-action { display: flex; align-items: center; gap: 7px; border-radius: 16px; padding: 0 15px; font-size: 13px; font-weight: 900; }
  .parent-action > span:first-child { color: var(--coral-3); font-size: 18px; }
  .round-action:hover, .parent-action:hover { background: #fff; transform: translateY(-2px); }

  .primary-button, .secondary-button, .danger-button {
    min-height: 52px;
    border-radius: 18px;
    padding: 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-weight: 900;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  }
  .primary-button {
    color: #fff;
    background: linear-gradient(145deg, #f78871, #f06b5d);
    box-shadow: 0 8px 0 #c9574b, 0 14px 25px rgba(198,83,69,.24);
  }
  .primary-button:hover { transform: translateY(-3px); filter: saturate(1.05); box-shadow: 0 11px 0 #c9574b, 0 18px 30px rgba(198,83,69,.25); }
  .primary-button:active { transform: translateY(5px); box-shadow: 0 3px 0 #c9574b, 0 7px 12px rgba(198,83,69,.2); }
  .primary-button i { font-style: normal; font-size: 20px; }
  .primary-button--large { min-height: 64px; border-radius: 21px; padding-inline: 28px; font-size: 17px; }
  .secondary-button { color: var(--ink-strong); border: 2px solid rgba(69,91,86,.13); background: #fffdf7; box-shadow: 0 5px 0 rgba(69,91,86,.11); }
  .secondary-button:hover { transform: translateY(-2px); background: #fff; }
  .secondary-button:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(69,91,86,.11); }
  .text-button, .rest-link, .quiet-link, .danger-text {
    background: transparent;
    text-decoration: underline;
    text-underline-offset: 5px;
    font-weight: 800;
  }
  .text-button { color: var(--ink-soft); padding: 12px; }

  .toast {
    position: fixed;
    z-index: 600;
    left: 50%;
    bottom: 24px;
    transform: translate(-50%, 140%);
    max-width: min(440px, calc(100% - 32px));
    border-radius: 18px;
    background: var(--ink-strong);
    color: #fff;
    padding: 13px 19px;
    box-shadow: 0 16px 44px rgba(29,47,49,.3);
    font-size: 14px;
    font-weight: 800;
    transition: transform .35s cubic-bezier(.2,.8,.2,1.15);
  }
  .toast.is-visible { transform: translate(-50%, 0); }

  .resident-face { position: relative; flex: 0 0 auto; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 48% 52% 44% 56%; background: #bf885c; box-shadow: inset 0 -6px 0 rgba(108,58,36,.13); }
  .resident-face::before, .resident-face::after { content: ""; position: absolute; top: -7px; width: 22px; height: 22px; border-radius: 50%; background: inherit; z-index: -1; }
  .resident-face::before { left: 2px; }
  .resident-face::after { right: 2px; }
  .resident-face i::before, .resident-face i::after { content: ""; position: absolute; top: 21px; width: 5px; height: 7px; border-radius: 50%; background: #3f322d; }
  .resident-face i::before { left: 15px; }
  .resident-face i::after { right: 15px; }
  .resident-face i { width: 9px; height: 7px; margin-top: 11px; border-radius: 60% 60% 75% 75%; background: #594238; }
  .resident-face--chick { width: 62px; height: 62px; background: #f4cf5e; }
  .resident-face--chick::before { left: 22px; top: -6px; width: 9px; height: 17px; border-radius: 80% 20%; transform: rotate(-30deg); }
  .resident-face--chick::after { display: none; }
  .resident-face--chick i { background: #e47b50; clip-path: polygon(0 50%, 100% 0, 100% 100%); }

  .modal {
    width: min(720px, calc(100% - 28px));
    max-height: min(880px, calc(100dvh - 28px));
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 34px;
    background: transparent;
    color: var(--ink);
  }
  .modal:focus { outline: none; }
  .modal::backdrop { background: rgba(37,60,61,.48); backdrop-filter: blur(8px); }
  .modal[open] { animation: modal-in .26s cubic-bezier(.2,.8,.2,1.12); }
  .modal-frame {
    position: relative;
    overflow: auto;
    max-height: min(880px, calc(100dvh - 28px));
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 34px;
    background: var(--paper);
    box-shadow: 0 28px 90px rgba(33,55,57,.28);
    padding: 42px;
  }
  .modal-close {
    position: absolute;
    z-index: 2;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border-radius: 15px;
    background: var(--cream-2);
    color: var(--ink-soft);
    font-size: 25px;
  }
  .modal-frame > h2 { margin-top: 12px; color: var(--ink-strong); font-family: var(--font-rounded); font-size: clamp(28px, 5vw, 40px); line-height: 1.12; letter-spacing: -.045em; }
  .modal-frame > p:not(.eyebrow) { margin-top: 13px; color: var(--ink-soft); line-height: 1.65; }
  .modal-primary { width: 100%; margin-top: 28px; }

  .help-steps { display: grid; gap: 10px; margin-top: 28px; }
  .help-steps article { display: flex; gap: 15px; align-items: center; border-radius: 20px; background: var(--cream-1); padding: 16px; }
  .help-steps article > span { display: grid; place-items: center; flex: 0 0 auto; width: 43px; height: 43px; border-radius: 15px; background: var(--mint-2); color: #347765; font-family: var(--font-rounded); font-size: 18px; font-weight: 1000; box-shadow: inset 0 -4px 0 rgba(52,119,101,.09); }
  .help-steps strong { color: var(--ink-strong); font-size: 15px; }
  .help-steps p { margin-top: 3px; color: var(--ink-soft); font-size: 13px; line-height: 1.45; }
  .help-note { margin-top: 16px; border: 1px dashed rgba(75,123,111,.3); border-radius: 18px; background: var(--mint-1); padding: 15px 17px; }
  .help-note strong { color: #367c69; }
  .help-note p { margin-top: 3px; color: var(--ink-soft); font-size: 13px; }

  @keyframes modal-in { from { opacity: 0; transform: translateY(22px) scale(.96); } to { opacity: 1; transform: none; } }
}

@layer scenes {
  /* Welcome */
  .welcome-scene {
    position: relative;
    width: min(1380px, calc(100% - 64px));
    margin: 0 auto;
    padding: clamp(54px, 8vh, 104px) 3% 42px;
    display: grid;
    grid-template-columns: minmax(440px, .88fr) minmax(520px, 1.12fr);
    grid-template-rows: 1fr auto;
    align-items: center;
    column-gap: clamp(32px, 6vw, 100px);
  }
  .welcome-copy { position: relative; z-index: 4; align-self: center; padding-bottom: 48px; }
  .welcome-copy h1 { margin-top: 17px; max-width: 680px; color: var(--ink-strong); font-family: var(--font-rounded); font-size: clamp(52px, 6vw, 86px); line-height: .99; letter-spacing: -.065em; word-break: keep-all; }
  .welcome-copy h1 em { position: relative; display: inline-block; margin-top: 9px; }
  .welcome-copy h1 em::after { content: ""; position: absolute; left: 2%; right: 0; bottom: -.04em; height: .14em; border-radius: 99px; background: #f4cb5f; opacity: .45; z-index: -1; transform: rotate(-1deg); }
  .welcome-lead { margin-top: 28px; color: var(--ink-soft); font-size: clamp(17px, 1.6vw, 21px); line-height: 1.7; word-break: keep-all; }
  .welcome-lead strong { color: #3d7770; }
  .welcome-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; margin-top: 36px; }
  .trust-list { display: flex; flex-wrap: wrap; gap: 9px 19px; margin-top: 27px; padding: 0; list-style: none; color: var(--ink-soft); font-size: 12px; font-weight: 800; }
  .trust-list li { display: flex; align-items: center; gap: 6px; }
  .trust-list i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(78,158,133,.14); color: var(--mint-4); font-style: normal; font-size: 10px; }

  .welcome-visual { position: relative; align-self: stretch; min-height: 600px; isolation: isolate; }
  .welcome-visual::before {
    content: "";
    position: absolute;
    inset: 7% 4% 10% 7%;
    border-radius: 50% 43% 46% 49%;
    background: linear-gradient(145deg, rgba(255,255,255,.62), rgba(232,248,232,.38));
    border: 1px solid rgba(255,255,255,.7);
    box-shadow: inset -30px -30px 50px rgba(128,189,171,.1), var(--shadow-soft);
    transform: rotate(-3deg);
    z-index: -2;
  }
  .sun-orb { position: absolute; width: 115px; height: 115px; right: 11%; top: 7%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff5bd, #f8d36a 60%, #e9ae42); box-shadow: 0 0 0 18px rgba(255,220,116,.12), 0 0 70px rgba(255,218,101,.34); }
  .welcome-cloud { position: absolute; width: 110px; height: 28px; border-radius: 99px; background: rgba(255,255,255,.76); filter: drop-shadow(0 8px 10px rgba(70,111,100,.06)); }
  .welcome-cloud::before, .welcome-cloud::after { content: ""; position: absolute; bottom: 0; border-radius: 50%; background: inherit; }
  .welcome-cloud::before { left: 19px; width: 44px; height: 44px; }
  .welcome-cloud::after { right: 17px; width: 54px; height: 54px; }
  .welcome-cloud--one { top: 18%; left: 2%; transform: scale(.8); animation: cloud-drift 8s ease-in-out infinite; }
  .welcome-cloud--two { top: 35%; right: -1%; transform: scale(.55); animation: cloud-drift 10s -3s ease-in-out infinite reverse; }
  .speech-bubble--hello { position: absolute; z-index: 5; left: 4%; top: 18%; width: 190px; border-radius: 26px 26px 8px 26px; background: #fffdf8; padding: 18px 20px; box-shadow: 0 15px 38px rgba(61,96,87,.13); transform: rotate(-4deg); }
  .speech-bubble--hello::after { content: ""; position: absolute; right: -19px; bottom: 4px; border: 15px solid transparent; border-left-color: #fffdf8; transform: rotate(20deg); }
  .speech-bubble small { display: block; color: var(--mint-4); font-size: 10px; font-weight: 900; letter-spacing: .08em; }
  .speech-bubble strong { display: block; margin-top: 5px; color: var(--ink-strong); font-family: var(--font-rounded); font-size: 20px; line-height: 1.2; }
  .welcome-crew { position: absolute; z-index: 20; inset: 0; pointer-events: none; }
  .tori-hero { position: absolute; z-index: 25; left: 20%; bottom: 1%; width: min(48%, 365px); max-height: 89%; object-fit: contain; filter: drop-shadow(0 24px 18px rgba(61,79,73,.17)); animation: tori-breathe 3.8s ease-in-out infinite; transform-origin: 50% 100%; }
  .crew-friend { position: absolute; z-index: 22; width: 25%; max-height: 48%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 15px 10px rgba(61,79,73,.15)); transform-origin: 50% 100%; }
  .crew-friend--bami { left: 1%; bottom: 3%; z-index: 24; width: 29%; }
  .crew-friend--pipi { right: 2%; bottom: 5%; z-index: 24; width: 28%; }
  .crew-friend--duri { right: 17%; bottom: 1%; width: 24%; opacity: .98; }
  .crew-friend--nuri { left: 47%; bottom: 0; width: 22%; opacity: .98; }
  .mini-town { position: absolute; z-index: 1; right: 1%; bottom: 5%; width: 62%; height: 39%; transform: perspective(600px) rotateX(16deg) rotateZ(-3deg); }
  .mini-hill { position: absolute; inset: 23% 1% 3%; border-radius: 48% 52% 44% 56%; background: linear-gradient(150deg, #8dd29d, #62ae80); box-shadow: 0 18px 0 #4e8d69, 0 30px 38px rgba(65,96,82,.2); }
  .mini-house { position: absolute; z-index: 2; width: 72px; height: 64px; border-radius: 6px 6px 13px 13px; background: #fff1cf; box-shadow: inset -9px 0 rgba(207,159,100,.15), 9px 12px 15px rgba(62,82,70,.15); }
  .mini-house::before { content: ""; position: absolute; left: -8px; right: -8px; top: -28px; height: 45px; border-radius: 10px 10px 4px 4px; background: #e87565; clip-path: polygon(50% 0, 100% 64%, 90% 100%, 10% 100%, 0 64%); }
  .mini-house::after { content: ""; position: absolute; left: 27px; bottom: 0; width: 19px; height: 30px; border-radius: 8px 8px 0 0; background: #a87655; }
  .mini-house--one { right: 17%; bottom: 29%; transform: scale(.9); }
  .mini-house--two { right: 44%; bottom: 13%; transform: scale(.62); }
  .mini-tree { position: absolute; z-index: 3; width: 27px; height: 45px; border-radius: 50% 50% 44% 44%; background: #4a9f70; box-shadow: inset -7px -6px rgba(37,111,72,.2); }
  .mini-tree::after { content: ""; position: absolute; left: 11px; bottom: -17px; width: 6px; height: 20px; border-radius: 4px; background: #8e6548; }
  .mini-tree--one { right: 6%; bottom: 24%; }
  .mini-tree--two { right: 62%; bottom: 32%; transform: scale(.72); }
  .mini-road { position: absolute; z-index: 2; left: 38%; right: 8%; bottom: 16%; height: 22px; border-radius: 99px; background: #f7dfb8; transform: rotate(-15deg); opacity: .9; }
  .welcome-note { position: absolute; z-index: 6; right: 1%; top: 49%; max-width: 190px; border-radius: 18px; background: rgba(255,255,255,.85); padding: 12px 15px; color: var(--ink-soft); box-shadow: 0 11px 24px rgba(55,90,82,.1); font-size: 12px; font-weight: 800; transform: rotate(3deg); }
  .welcome-note span { color: var(--yellow-2); margin-right: 5px; }

  .parent-promise { grid-column: 1 / -1; justify-self: center; width: min(830px, 92%); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; margin-top: 8px; border-top: 1px solid rgba(68,105,95,.12); padding-top: 24px; }
  .promise-icon { width: 52px; height: 52px; border-radius: 50% 48% 48% 52%; display: grid; place-content: center; text-align: center; background: var(--mint-2); color: #317b67; box-shadow: inset 0 -6px 0 rgba(52,130,106,.1); line-height: .9; }
  .promise-icon span { font-family: var(--font-rounded); font-size: 22px; font-weight: 1000; }
  .promise-icon small { font-size: 9px; font-weight: 900; }
  .parent-promise strong { color: var(--ink-strong); font-size: 14px; }
  .parent-promise p { margin-top: 3px; color: var(--ink-soft); font-size: 12px; }
  .parent-promise button { background: transparent; color: #4a7c70; font-size: 12px; font-weight: 900; }

  @keyframes tori-breathe { 0%, 100% { transform: translateY(0) rotate(.4deg); } 50% { transform: translateY(-6px) rotate(-.4deg); } }
  @keyframes cloud-drift { 0%,100% { margin-left: 0; } 50% { margin-left: 16px; } }

  /* Town */
  .town-scene { width: min(1440px, calc(100% - 48px)); margin: 0 auto; padding: 32px 0 50px; }
  .town-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; padding: 0 2.5% 24px; }
  .town-heading h1 { margin-top: 9px; color: var(--ink-strong); font-family: var(--font-rounded); font-size: clamp(30px, 3.2vw, 49px); line-height: 1.1; letter-spacing: -.045em; }
  .town-heading > div:first-child > p:last-child { margin-top: 8px; color: var(--ink-soft); font-size: 14px; }
  .town-progress { flex: 0 0 250px; border-radius: 20px; background: rgba(255,255,255,.58); border: 1px solid rgba(67,103,94,.12); padding: 13px 15px; box-shadow: 0 8px 20px rgba(51,78,71,.06); }
  .town-progress-copy { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 800; color: var(--ink-soft); }
  .town-progress-copy strong { color: var(--ink-strong); font-size: 13px; }
  .town-progress-track { height: 8px; margin-top: 8px; overflow: hidden; border-radius: 99px; background: rgba(55,90,82,.1); }
  .town-progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mint-3), #f5cf62); transition: width .7s ease; }

  .town-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 20px; align-items: stretch; }
  .town-stage { position: relative; min-height: 675px; border: 1px solid rgba(255,255,255,.65); border-radius: 38px; background: linear-gradient(160deg, rgba(190,233,238,.73), rgba(222,244,232,.8)); box-shadow: var(--shadow-card); overflow: hidden; isolation: isolate; }
  .town-stage::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 47% 18%, rgba(255,255,255,.7), transparent 34%), linear-gradient(to bottom, transparent 63%, rgba(101,186,162,.11)); z-index: -2; }
  .sky-island { position: absolute; inset: 0; pointer-events: none; }
  .island-cloud { position: absolute; width: 120px; height: 31px; border-radius: 99px; background: rgba(255,255,255,.59); filter: blur(.2px); }
  .island-cloud::before, .island-cloud::after { content: ""; position: absolute; bottom: 0; border-radius: 50%; background: inherit; }
  .island-cloud::before { left: 24px; width: 50px; height: 50px; }
  .island-cloud::after { right: 13px; width: 63px; height: 63px; }
  .island-cloud--one { left: 2%; top: 14%; transform: scale(.75); }
  .island-cloud--two { right: 3%; top: 9%; transform: scale(.48); }
  .island-cloud--three { left: 41%; bottom: 5%; transform: scale(.54); opacity: .65; }

  .town-map { position: absolute; left: 50%; top: 46%; width: min(96%, 950px); aspect-ratio: 1.48; transform: translate(-50%, -50%); }
  .map-water { position: absolute; inset: 5% 3% 3%; border-radius: 48% 52% 46% 54%; background: linear-gradient(145deg, rgba(114,198,214,.38), rgba(93,180,197,.2)); box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); transform: rotate(-2deg); }
  .map-island { position: absolute; inset: 10% 8% 9%; border-radius: 47% 53% 48% 52% / 50% 44% 56% 50%; background:
      radial-gradient(circle at 25% 72%, rgba(248,217,151,.65) 0 8%, transparent 8.5%),
      radial-gradient(circle at 68% 18%, rgba(255,255,255,.2) 0 12%, transparent 12.5%),
      linear-gradient(155deg, #a5d49c, #73bc8b 68%, #5fa77c);
    box-shadow: 0 14px 0 #4e9875, 0 25px 0 rgba(55,125,94,.3), 0 38px 50px rgba(52,91,81,.24), inset 0 0 0 5px rgba(255,255,255,.18);
    transform: perspective(900px) rotateX(3deg) rotateZ(-1.5deg);
  }
  .map-island::before { content: ""; position: absolute; inset: 4%; border-radius: inherit; border: 3px dashed rgba(255,255,255,.13); }
  .map-river { position: absolute; left: 35%; top: 12%; width: 17%; height: 77%; background: #74c8d9; border-radius: 54% 43% 58% 39%; transform: rotate(16deg); box-shadow: inset 7px 0 rgba(255,255,255,.17), 3px 5px 0 rgba(47,142,163,.2); opacity: .88; }
  .map-river span { position: absolute; left: -14%; top: 45%; width: 128%; height: 18px; border-radius: 99px; border-top: 3px solid rgba(255,255,255,.35); transform: rotate(-12deg); }
  .road { position: absolute; z-index: 1; height: 25px; border-radius: 99px; background: #f3dab0; box-shadow: inset 0 -5px rgba(181,130,76,.12), 0 3px 0 rgba(111,92,64,.08); transform-origin: left center; }
  .road::after { content: ""; position: absolute; left: 10%; right: 10%; top: 9px; border-top: 2px dashed rgba(152,111,69,.16); }
  .road--one { left: 19%; top: 52%; width: 56%; transform: rotate(-7deg); }
  .road--two { left: 33%; top: 36%; width: 37%; transform: rotate(58deg); }
  .road--three { left: 46%; top: 69%; width: 34%; transform: rotate(8deg); }
  .town-plaza { position: absolute; z-index: 2; left: 46%; top: 47%; width: 94px; height: 67px; border-radius: 50%; display: grid; place-items: center; background: repeating-radial-gradient(circle, #f6ddb3 0 6px, #eccd9e 7px 11px); box-shadow: 0 7px 0 #c49c6d, 0 11px 18px rgba(65,88,71,.2); transform: rotate(-8deg); }
  .town-plaza span { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 50%; background: #82cdbd; color: #fff; font-weight: 1000; transform: rotate(8deg); box-shadow: inset 0 -5px rgba(44,125,107,.15); }

  .district {
    position: absolute;
    z-index: 6;
    left: var(--x);
    top: var(--y);
    width: 148px;
    min-height: 145px;
    background: transparent;
    transform: translate(-50%, -50%);
    transition: transform .28s cubic-bezier(.2,.8,.2,1.2), filter .25s ease;
  }
  .district:hover, .district:focus-visible { transform: translate(-50%, -54%) scale(1.04); z-index: 15; }
  .district:active { transform: translate(-50%, -49%) scale(.98); }
  .district.is-locked { filter: none; }
  .district.is-locked .building, .district.is-locked .district-sign { filter: saturate(.5) brightness(.94); opacity: .82; }
  .district.is-complete .building { filter: drop-shadow(0 0 12px rgba(255,220,103,.75)) drop-shadow(0 13px 11px rgba(44,73,62,.22)); }
  .district.is-complete .district-status { color: var(--success); }
  .district.is-complete .district-status::before { content: "✓ "; }

  .building { position: relative; display: block; width: 88px; height: 82px; margin: 0 auto; filter: drop-shadow(0 13px 10px rgba(44,73,62,.22)); transform: perspective(500px) rotateX(4deg) rotateZ(-2deg); transform-style: preserve-3d; }
  .building-front { position: absolute; left: 10px; top: 34px; width: 65px; height: 47px; border-radius: 5px 5px 9px 9px; background: color-mix(in srgb, var(--district) 78%, #fff); box-shadow: inset -8px 0 rgba(92,57,41,.09), inset 0 -7px rgba(104,72,42,.08); }
  .building-side { position: absolute; left: 74px; top: 39px; width: 13px; height: 37px; background: var(--district-dark); clip-path: polygon(0 0, 100% 14%, 100% 100%, 0 88%); opacity: .84; }
  .building-roof { position: absolute; z-index: 3; left: 2px; top: 2px; width: 82px; height: 47px; display: grid; place-items: center; border-radius: 15px 15px 6px 6px; background: var(--district); clip-path: polygon(50% 0, 100% 54%, 92% 100%, 8% 100%, 0 54%); box-shadow: inset -9px -8px rgba(106,57,40,.08); font-style: normal; }
  .building-roof b { display: grid; place-items: center; min-width: 31px; height: 28px; margin-top: 10px; border-radius: 9px; padding: 0 6px; background: #fff8e7; color: var(--district-dark); font-size: 13px; box-shadow: 0 3px 0 rgba(94,61,41,.1); transform: rotate(2deg); }
  .building-door { position: absolute; z-index: 4; left: 34px; bottom: 1px; width: 18px; height: 27px; border-radius: 8px 8px 2px 2px; background: #835f4a; box-shadow: inset -4px 0 rgba(50,31,23,.17); }
  .building-door::after { content: ""; position: absolute; right: 3px; top: 13px; width: 3px; height: 3px; border-radius: 50%; background: #f6d766; }
  .building--fountain .building-front { border-radius: 45% 45% 10px 10px; background: #d8f3fa; }
  .building--fountain .building-roof { border-radius: 50%; clip-path: none; height: 53px; background: #73c9e6; }
  .building--bakery .building-front::after { content: ""; position: absolute; left: 4px; right: 4px; top: 3px; height: 14px; border-radius: 3px 3px 8px 8px; background: repeating-linear-gradient(90deg, #fff5d8 0 10px, #ed8773 10px 20px); }
  .building--post .building-roof { background: #8b73c7; }
  .building--station .building-front { border-radius: 7px 7px 4px 4px; box-shadow: inset -8px 0 rgba(52,101,92,.1), inset 0 -8px rgba(48,108,96,.09); }
  .building--station .building-door { left: 28px; width: 28px; border-radius: 14px 14px 2px 2px; }
  .building--theater .building-front::before { content: ""; position: absolute; left: 4px; right: 4px; top: 4px; height: 17px; border-radius: 5px; background: #fff3c5; box-shadow: inset 0 0 0 3px #c45b6e; }
  .building--library .building-roof { clip-path: polygon(50% 0, 100% 42%, 92% 100%, 8% 100%, 0 42%); }
  .building--library .building-front::after { content: "✦"; position: absolute; right: 7px; top: 7px; color: #fff2a2; font-style: normal; font-size: 13px; }

  .district-resident { position: absolute; z-index: 42; left: 9px; top: 21px; width: 49px; height: 73px; object-fit: contain; object-position: bottom; filter: drop-shadow(0 7px 4px rgba(39,65,56,.24)); pointer-events: none; }
  .district.is-locked .district-resident { filter: saturate(.82) drop-shadow(0 7px 4px rgba(39,65,56,.2)); opacity: .9; }

  .district-sign { position: relative; z-index: 38; display: block; width: max-content; max-width: 150px; margin: -2px auto 0; border: 2px solid rgba(255,255,255,.9); border-radius: 15px; background: rgba(255,254,248,.94); padding: 7px 12px 8px; box-shadow: 0 7px 0 rgba(67,91,77,.1), 0 10px 20px rgba(60,84,74,.1); text-align: center; }
  .district-sign small { display: block; color: var(--district-dark); font-size: 8px; font-weight: 900; }
  .district-sign strong { display: block; margin-top: 1px; color: var(--ink-strong); font-family: var(--font-rounded); font-size: 13px; white-space: nowrap; }
  .district-sign em { display: block; margin-top: 2px; color: var(--ink-soft); font-size: 8px; font-style: normal; font-weight: 800; white-space: nowrap; }
  .recommend-flag, .lock-bubble { position: absolute; z-index: 20; left: 50%; top: -22px; transform: translateX(-50%); border-radius: 99px; padding: 5px 9px; background: var(--coral-3); color: #fff; box-shadow: 0 5px 0 #c45147; font-size: 9px; font-weight: 1000; white-space: nowrap; animation: recommend-hop 1.6s ease-in-out infinite; }
  .recommend-flag::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -5px; border: 5px solid transparent; border-top-color: #c45147; }
  .lock-bubble { display: none; background: #788380; box-shadow: 0 5px 0 #58615f; }
  .district.is-locked:hover .lock-bubble { display: block; }
  .district.is-recommended::after { content: ""; position: absolute; left: 50%; top: 36%; width: 120px; height: 80px; border: 4px solid rgba(255,225,104,.8); border-radius: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 0 8px rgba(255,229,116,.15); animation: map-pulse 1.8s ease-out infinite; pointer-events: none; }
  @keyframes recommend-hop { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -5px); } }
  @keyframes map-pulse { 0% { opacity: .8; transform: translate(-50%,-50%) scale(.65); } 80%,100% { opacity: 0; transform: translate(-50%,-50%) scale(1.25); } }

  .free-studio { position: absolute; z-index: 8; left: 34%; top: 80%; transform: translate(-50%, -50%); display: grid; grid-template-columns: 32px auto; column-gap: 8px; align-items: center; border: 2px solid rgba(255,255,255,.8); border-radius: 17px; background: rgba(255,254,247,.9); padding: 9px 12px; box-shadow: 0 7px 0 rgba(61,93,80,.12), 0 13px 20px rgba(57,85,74,.12); text-align: left; transition: transform .2s ease; }
  .free-studio:hover { transform: translate(-50%, -56%) rotate(-1deg); }
  .free-studio > span { grid-row: 1 / 3; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 11px; background: var(--violet-1); color: var(--violet-2); font-size: 22px; font-weight: 700; }
  .free-studio strong { color: var(--ink-strong); font-size: 11px; }
  .free-studio small { color: var(--ink-soft); font-size: 8px; }

  .map-tori { position: absolute; z-index: 70; left: 46%; top: 54%; width: 48px; height: 68px; transform: translate(-50%, -50%); transition: left .75s cubic-bezier(.35,.7,.25,1), top .75s cubic-bezier(.35,.7,.25,1); pointer-events: none; }
  .map-tori img { position: relative; z-index: 2; width: 46px; height: 64px; object-fit: contain; filter: drop-shadow(0 7px 4px rgba(44,70,61,.24)); }
  .map-tori span { position: absolute; left: 9px; right: 5px; bottom: -1px; height: 11px; border-radius: 50%; background: rgba(48,89,72,.24); filter: blur(2px); }
  .map-tori.is-walking img { animation: map-walk .27s ease-in-out infinite alternate; }
  @keyframes map-walk { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-5px) rotate(2deg); } }
  .map-sparkles i { position: absolute; z-index: 5; width: 8px; height: 8px; border-radius: 2px; background: #ffe978; transform: rotate(45deg); box-shadow: 0 0 12px rgba(255,226,96,.8); animation: sparkle 2.3s ease-in-out infinite; }
  .map-sparkles i:nth-child(1) { left: 12%; top: 34%; }
  .map-sparkles i:nth-child(2) { right: 14%; top: 20%; animation-delay: -.8s; }
  .map-sparkles i:nth-child(3) { right: 26%; bottom: 13%; animation-delay: -1.3s; }
  .map-sparkles i:nth-child(4) { left: 43%; top: 11%; animation-delay: -.4s; }
  @keyframes sparkle { 0%,100% { opacity: .2; transform: rotate(45deg) scale(.5); } 50% { opacity: 1; transform: rotate(135deg) scale(1); } }
  .map-instruction { position: absolute; z-index: 12; left: 50%; bottom: 16px; transform: translateX(-50%); border-radius: 99px; background: rgba(43,73,71,.78); color: #fff; padding: 8px 14px; font-size: 10px; font-weight: 800; backdrop-filter: blur(8px); white-space: nowrap; }

  .town-side { display: flex; flex-direction: column; gap: 14px; }
  .step-card { position: relative; overflow: hidden; flex: 1; min-height: 410px; border: 1px solid rgba(255,255,255,.8); border-radius: 31px; background: rgba(255,253,246,.87); padding: 25px; box-shadow: var(--shadow-card); }
  .step-card::after { content: "ㅁ"; position: absolute; right: -10px; bottom: -26px; color: rgba(106,201,179,.09); font-family: var(--font-rounded); font-size: 150px; font-weight: 1000; transform: rotate(-12deg); }
  .step-card-top { display: flex; justify-content: space-between; align-items: center; }
  .step-number { color: rgba(67,111,101,.18); font-family: var(--font-rounded); font-size: 40px; font-weight: 1000; letter-spacing: -.08em; }
  .step-time { border-radius: 99px; background: var(--mint-1); color: #397966; padding: 7px 9px; font-size: 9px; font-weight: 900; }
  .step-card > p:first-of-type { margin-top: 28px; color: var(--coral-3); font-size: 11px; font-weight: 900; letter-spacing: .06em; }
  .step-card h2 { margin-top: 7px; color: var(--ink-strong); font-family: var(--font-rounded); font-size: 29px; letter-spacing: -.04em; }
  .step-card h2 + p { margin-top: 10px; color: var(--ink-soft); font-size: 13px; line-height: 1.55; word-break: keep-all; }
  .learn-chips { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 7px; margin-top: 23px; }
  .learn-chips span { display: grid; place-items: center; min-width: 38px; height: 38px; border-radius: 13px; border: 1px solid rgba(73,102,94,.1); background: #fff; color: var(--ink-strong); font-family: var(--font-rounded); font-size: 17px; font-weight: 900; box-shadow: 0 4px 0 rgba(68,94,87,.08); }
  .step-card .primary-button { position: relative; z-index: 2; width: 100%; margin-top: 31px; font-size: 13px; }
  .town-note { display: flex; align-items: center; gap: 12px; border: 1px solid rgba(255,255,255,.68); border-radius: 23px; background: rgba(255,255,255,.62); padding: 14px; box-shadow: 0 10px 24px rgba(53,79,72,.07); }
  .town-note-character { flex: 0 0 70px; width: 70px; height: 82px; object-fit: contain; object-position: bottom; filter: drop-shadow(0 9px 6px rgba(52,76,68,.15)); pointer-events: none; }
  .town-note small { color: #9a664c; font-size: 9px; font-weight: 900; }
  .town-note p { margin-top: 3px; color: var(--ink-soft); font-size: 11px; line-height: 1.45; word-break: keep-all; }
  .quiet-link { min-height: 44px; color: var(--ink-soft); font-size: 11px; }
  .quiet-link span { margin-right: 5px; text-decoration: none; }

  .district-list { position: fixed; z-index: 90; inset: 92px 20px 20px; max-width: 640px; margin-inline: auto; overflow: auto; border-radius: 28px; background: var(--paper); padding: 24px; box-shadow: 0 28px 80px rgba(35,61,61,.28); }
  .district-list::before { content: ""; position: fixed; z-index: -1; inset: 84px 0 0; background: rgba(38,60,61,.4); backdrop-filter: blur(5px); }
  .district-list-head { display: flex; align-items: center; justify-content: space-between; }
  .district-list-head h2 { font-family: var(--font-rounded); font-size: 26px; }
  .district-list-head button { width: 44px; height: 44px; border-radius: 14px; background: var(--cream-2); font-size: 24px; }
  #districtListItems { display: grid; gap: 9px; margin-top: 18px; }
  .district-list-item { width: 100%; min-height: 70px; display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--cream-0); padding: 10px 13px; text-align: left; }
  .district-list-item > span:first-child { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: var(--item-color, var(--mint-1)); font-size: 19px; font-weight: 900; }
  .district-list-item strong { color: var(--ink-strong); }
  .district-list-item small { display: block; margin-top: 2px; color: var(--ink-soft); font-size: 11px; }
  .district-list-item em { color: var(--ink-soft); font-size: 11px; font-style: normal; font-weight: 800; }

  /* Lesson */
  .lesson-scene { width: min(1320px, calc(100% - 48px)); margin: 0 auto; padding: 22px 0 45px; }
  .lesson-topline { min-height: 72px; display: grid; grid-template-columns: 170px 1fr auto 170px; align-items: center; gap: 15px; }
  .back-button, .pause-button { min-height: 46px; display: flex; align-items: center; gap: 8px; border-radius: 16px; background: rgba(255,255,255,.57); border: 1px solid rgba(67,96,89,.12); padding: 0 14px; color: var(--ink-soft); font-size: 12px; font-weight: 900; box-shadow: 0 6px 14px rgba(55,80,74,.05); }
  .back-button { justify-self: start; }
  .pause-button { justify-self: end; }
  .pause-button > span:first-child { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 9px; background: var(--yellow-1); color: #966a21; font-size: 11px; }
  .lesson-identity { justify-self: center; display: flex; align-items: center; gap: 10px; }
  .lesson-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: var(--lesson-color, var(--coral-2)); color: #fff; font-family: var(--font-rounded); font-size: 18px; font-weight: 1000; box-shadow: inset 0 -5px rgba(91,51,41,.12), 0 6px 12px rgba(67,89,79,.1); }
  .lesson-identity small { color: var(--ink-soft); font-size: 9px; font-weight: 900; }
  .lesson-identity h1 { color: var(--ink-strong); font-family: var(--font-rounded); font-size: 18px; letter-spacing: -.03em; }
  .seed-progress { display: flex; gap: 6px; }
  .seed-progress span { position: relative; width: 18px; height: 24px; border-radius: 50% 50% 55% 45%; background: rgba(64,94,84,.13); transform: rotate(35deg); }
  .seed-progress span::after { content: ""; position: absolute; right: 0; top: -2px; width: 7px; height: 7px; border-radius: 80% 20%; background: rgba(64,94,84,.18); }
  .seed-progress span.is-done { background: var(--lesson-color, var(--mint-3)); box-shadow: 0 4px 9px color-mix(in srgb, var(--lesson-color, var(--mint-3)) 45%, transparent); }
  .seed-progress span.is-current { background: var(--yellow-2); animation: seed-bounce 1.1s ease-in-out infinite; }
  @keyframes seed-bounce { 0%,100% { transform: rotate(35deg) translateY(0); } 50% { transform: rotate(35deg) translateY(-4px); } }

  .lesson-world { display: grid; grid-template-columns: 270px minmax(0,1fr); gap: 18px; min-height: 680px; }
  .lesson-story { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.7); border-radius: 32px; background: linear-gradient(170deg, rgba(190,234,228,.9), rgba(242,244,207,.85)); box-shadow: var(--shadow-card); isolation: isolate; }
  .lesson-story::before { content: ""; position: absolute; z-index: -2; left: -25%; right: -25%; bottom: -14%; height: 47%; border-radius: 50%; background: #86c998; box-shadow: inset 0 13px rgba(255,255,255,.15); }
  .lesson-story::after { content: ""; position: absolute; z-index: -3; width: 95px; height: 95px; right: -20px; top: 25px; border-radius: 50%; background: rgba(255,224,118,.65); box-shadow: 0 0 0 14px rgba(255,224,118,.12); }
  .lesson-tori-wrap { position: absolute; z-index: 22; left: 4%; right: 2%; bottom: 1%; height: 64%; pointer-events: none; }
  .lesson-tori-wrap img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 20px 13px rgba(51,81,69,.18)); transform-origin: 50% 100%; }
  .lesson-tori-wrap.is-cheering img { animation: tori-cheer .55s cubic-bezier(.2,.8,.2,1.3); }
  @keyframes tori-cheer { 0%,100% { transform: none; } 45% { transform: translateY(-17px) rotate(-3deg); } }
  .lesson-speech { position: absolute; z-index: 3; left: 16px; right: 16px; top: 19px; border-radius: 22px 22px 9px 22px; background: rgba(255,254,249,.94); padding: 17px 17px 14px; box-shadow: 0 12px 25px rgba(60,91,81,.11); }
  .lesson-speech::after { content: ""; position: absolute; right: 24px; bottom: -16px; border: 10px solid transparent; border-top-color: rgba(255,254,249,.94); transform: rotate(-13deg); }
  .lesson-speech small { color: var(--mint-4); font-size: 9px; font-weight: 900; }
  .lesson-speech p { margin-top: 5px; color: var(--ink-strong); font-family: var(--font-rounded); font-size: 16px; line-height: 1.38; word-break: keep-all; }
  .replay-button { margin-top: 9px; border-radius: 10px; background: var(--mint-1); color: #3b7e6d; padding: 6px 9px; font-size: 9px; font-weight: 900; }
  .lesson-scenery i { position: absolute; bottom: 19%; width: 30px; height: 60px; border-radius: 50% 50% 40% 40%; background: #5ba978; box-shadow: inset -7px -4px rgba(36,110,71,.2); }
  .lesson-scenery i::after { content: ""; position: absolute; left: 13px; bottom: -20px; width: 6px; height: 25px; background: #8d6849; }
  .lesson-scenery i:nth-child(1) { left: 4%; transform: scale(.7); }
  .lesson-scenery i:nth-child(2) { right: 3%; bottom: 12%; transform: scale(.5); }
  .lesson-scenery i:nth-child(3) { left: 12%; bottom: 8%; transform: scale(.35); }

  .practice-panel { border: 1px solid rgba(255,255,255,.85); border-radius: 32px; background: rgba(255,253,247,.93); box-shadow: var(--shadow-card); padding: clamp(18px, 2.5vw, 31px); }
  .practice-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
  .practice-header > div:first-child { display: flex; align-items: center; gap: 12px; }
  .practice-header p { color: var(--ink-soft); font-size: 12px; font-weight: 800; }
  .practice-header span { border-radius: 99px; background: var(--cream-2); color: var(--ink-soft); padding: 5px 8px; font-size: 9px; font-weight: 900; }
  .calm-badge { display: flex; align-items: center; gap: 7px; color: #4f7d73; font-size: 10px; font-weight: 800; }
  .calm-badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--mint-3); box-shadow: 0 0 0 5px rgba(108,205,183,.15); }
  .target-wrap { min-height: 248px; display: grid; place-items: center; align-content: center; padding: 14px 0 10px; }
  .target-word { display: flex; justify-content: center; flex-wrap: wrap; color: rgba(48,64,68,.22); font-family: var(--font-rounded); font-size: clamp(68px, 9vw, 122px); font-weight: 1000; line-height: 1.08; letter-spacing: .015em; text-align: center; word-break: keep-all; }
  .target-word[data-length="medium"] { font-size: clamp(48px, 7vw, 88px); }
  .target-word[data-length="long"] { max-width: 920px; font-size: clamp(31px, 4.5vw, 58px); line-height: 1.2; }
  .target-word .target-char { display: inline-block; position: relative; min-width: .78em; padding: 0 .02em; transition: color .15s ease, transform .18s ease; }
  .target-word .target-char.is-complete { color: var(--lesson-color, var(--mint-4)); text-shadow: 0 8px 18px color-mix(in srgb, var(--lesson-color, var(--mint-4)) 18%, transparent); }
  .target-word .target-char.is-current { color: var(--ink-strong); transform: translateY(-4px); }
  .target-word .target-char.is-current::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -.06em; height: 7px; border-radius: 99px; background: var(--yellow-2); }
  .target-word .target-space { min-width: .45em; }
  .target-jamo { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; min-height: 32px; margin-top: 12px; }
  .target-jamo span { min-width: 31px; height: 31px; display: grid; place-items: center; border-radius: 10px; background: var(--cream-2); color: var(--ink-soft); font-family: var(--font-rounded); font-size: 14px; font-weight: 900; }
  .target-jamo span.is-done { color: #fff; background: var(--lesson-color, var(--mint-3)); }
  .target-jamo span.is-next { color: var(--ink-strong); background: var(--yellow-1); box-shadow: 0 3px 0 #ddba58; transform: translateY(-2px); }
  .feedback-line { min-height: 35px; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; border-radius: 13px; color: var(--ink-soft); font-size: 12px; }
  .feedback-line > span { color: var(--yellow-2); font-size: 9px; }
  .feedback-line strong { color: var(--ink-strong); }
  .feedback-line.is-correct { color: var(--success); }
  .feedback-line.is-correct > span { color: var(--success); }
  .feedback-line.is-wrong { color: #a95c55; }
  .feedback-line.is-wrong > span { color: var(--coral-3); }
  .target-wrap.is-shaking { animation: soft-shake .32s ease; }
  @keyframes soft-shake { 0%,100% { transform: none; } 35% { transform: translateX(-5px); } 70% { transform: translateX(4px); } }

  .finger-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; margin-bottom: 14px; }
  .finger-guide { display: flex; align-items: center; gap: 12px; border-radius: 17px; background: var(--blue-1); padding: 9px 13px; }
  .finger-guide.is-right { background: var(--pink-1); }
  .finger-guide small { display: block; color: var(--ink-soft); font-size: 8px; font-weight: 800; }
  .finger-guide strong { display: block; margin-top: 2px; color: var(--ink-strong); font-size: 12px; }
  .hand-symbol { width: 43px; height: 35px; position: relative; display: flex; align-items: end; gap: 2px; padding: 0 3px 3px; border-radius: 9px 9px 14px 14px; background: #fff; box-shadow: 0 3px 0 rgba(56,99,121,.1); }
  .hand-symbol i { display: block; width: 6px; border-radius: 99px 99px 4px 4px; background: #9bcbe3; transition: background .2s, transform .2s; }
  .hand-symbol i:nth-child(1), .hand-symbol i:nth-child(5) { height: 16px; }
  .hand-symbol i:nth-child(2), .hand-symbol i:nth-child(4) { height: 23px; }
  .hand-symbol i:nth-child(3) { height: 28px; }
  .hand-symbol i.is-active { background: var(--lesson-color, var(--coral-2)); transform: translateY(-4px); }
  .finger-guide.is-right .hand-symbol { transform: scaleX(-1); }
  .finger-guide.is-right .hand-symbol + div { transform: none; }
  .next-key-card { min-width: 118px; height: 58px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; align-items: center; gap: 0 8px; border-radius: 17px; background: var(--yellow-1); padding: 8px 12px; box-shadow: inset 0 -5px rgba(177,129,39,.08); }
  .next-key-card small { grid-column: 1 / -1; color: #96691f; font-size: 8px; font-weight: 900; }
  .next-key-card strong { color: #75501a; font-family: var(--font-rounded); font-size: 20px; }
  .next-key-card span { color: #75501a; font-family: var(--font-rounded); font-size: 16px; font-weight: 900; }

  .keyboard-wrap { position: relative; isolation: isolate; overflow: hidden; border: 1px solid rgba(73,98,90,.08); border-radius: 23px; background: linear-gradient(180deg, #edf3ef, #e2ebe6); padding: 12px 13px 15px; box-shadow: inset 0 5px 0 rgba(255,255,255,.35), inset 0 -6px 0 rgba(54,76,69,.07); }
  .keyboard-toolbar { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; color: var(--ink-soft); font-size: 8px; font-weight: 800; }
  .keyboard-toolbar > span { display: flex; align-items: center; gap: 5px; }
  .keyboard-toolbar i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
  .left-dot { background: var(--blue-2); }
  .right-dot { background: var(--pink-2); }
  .keyboard-hands { position: relative; z-index: 5; height: 64px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 13px; margin: 0 auto 7px; padding-inline: 5%; pointer-events: none; }
  .hand-hint-copy { align-self: center; min-width: 132px; border: 1px solid rgba(68,95,87,.09); border-radius: 15px; background: rgba(255,255,255,.7); padding: 7px 11px; text-align: center; box-shadow: 0 5px 13px rgba(53,76,70,.06); }
  .hand-hint-copy strong { display: block; color: var(--ink-strong); font-size: 11px; }
  .hand-hint-copy small { display: block; margin-top: 2px; color: var(--ink-soft); font-size: 7px; font-weight: 800; }
  .typing-hand { position: relative; width: min(150px, 100%); height: 58px; justify-self: end; transform: rotate(7deg); filter: drop-shadow(0 5px 5px rgba(55,88,102,.1)); }
  .typing-hand--right { justify-self: start; transform: scaleX(-1) rotate(7deg); filter: drop-shadow(0 5px 5px rgba(115,62,79,.09)); }
  .typing-hand__palm { position: absolute; z-index: 1; left: 27px; bottom: 1px; width: 86px; height: 34px; border: 2px solid rgba(80,154,196,.28); border-radius: 45% 42% 32% 36%; background: rgba(115,190,230,.24); }
  .typing-hand--right .typing-hand__palm { border-color: rgba(202,92,119,.26); background: rgba(235,132,152,.22); }
  .typing-hand > i { position: absolute; z-index: 2; bottom: 24px; width: 15px; border: 2px solid rgba(80,154,196,.25); border-radius: 12px 12px 7px 7px; background: rgba(115,190,230,.27); transform-origin: 50% 100%; transition: height .18s ease, transform .18s ease, background .18s ease, border-color .18s ease; }
  .typing-hand--right > i { border-color: rgba(202,92,119,.24); background: rgba(235,132,152,.25); }
  .typing-hand > i:nth-child(1) { left: 22px; height: 22px; transform: rotate(-15deg); }
  .typing-hand > i:nth-child(2) { left: 40px; height: 30px; transform: rotate(-7deg); }
  .typing-hand > i:nth-child(3) { left: 59px; height: 36px; }
  .typing-hand > i:nth-child(4) { left: 79px; height: 31px; transform: rotate(5deg); }
  .typing-hand > i:nth-child(5) { left: 103px; bottom: 9px; width: 19px; height: 28px; transform: rotate(47deg); }
  .typing-hand > i.is-active { height: 45px; border-color: color-mix(in srgb, var(--lesson-color, var(--coral-2)) 75%, #6a5147); background: var(--lesson-color, var(--coral-2)); box-shadow: 0 0 0 5px color-mix(in srgb, var(--lesson-color, var(--coral-2)) 18%, transparent); }
  .typing-hand > i:nth-child(5).is-active { height: 36px; transform: rotate(42deg) translateY(-4px); }
  .finger-guide-lines { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  .finger-guide-lines path { fill: none; stroke: color-mix(in srgb, var(--lesson-color, var(--coral-2)) 72%, #637d76); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 4 7; opacity: .64; filter: drop-shadow(0 2px 1px rgba(255,255,255,.85)); }
  .virtual-keyboard { position: relative; z-index: 3; display: grid; gap: 6px; }
  .key-row { display: flex; justify-content: center; gap: 6px; }
  .key-row:nth-child(2) { padding-inline: 3.5%; }
  .key-row:nth-child(3) { padding-inline: 8%; }
  .key {
    position: relative;
    flex: 1 1 0;
    max-width: 64px;
    min-width: 34px;
    height: 58px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(61,83,76,.1);
    border-radius: 12px;
    background: #fffefa;
    box-shadow: 0 5px 0 #c8d1cd, 0 7px 8px rgba(58,79,72,.08);
    color: var(--ink-strong);
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  }
  .key[data-hand="left"] { border-top: 3px solid rgba(115,190,230,.58); }
  .key[data-hand="right"] { border-top: 3px solid rgba(235,132,152,.55); }
  .key-jamo { font-family: var(--font-rounded); font-size: 19px; font-weight: 1000; line-height: 1; }
  .key-letter { position: absolute; right: 5px; bottom: 4px; color: #8d9996; font-size: 7px; font-weight: 900; }
  .key:hover { transform: translateY(-2px); background: #fff; box-shadow: 0 7px 0 #c8d1cd, 0 10px 12px rgba(58,79,72,.09); }
  .key:active, .key.is-pressed { transform: translateY(4px); box-shadow: 0 1px 0 #b8c3bf; }
  .key.is-next { z-index: 5; background: #fff5b9; border-color: #eabf45; box-shadow: 0 5px 0 #d4a82e, 0 0 0 5px rgba(247,203,93,.25), 0 0 24px rgba(247,203,93,.4); animation: key-glow 1.15s ease-in-out infinite; }
  .key.is-wrong { background: #ffe1da; border-color: #eb907f; box-shadow: 0 5px 0 #ce7161; }
  .key.is-correct { background: #d9f4e9; border-color: #68b99a; box-shadow: 0 5px 0 #459477; }
  .key--shift { flex: 1.35; max-width: 76px; color: var(--ink-soft); }
  .key--shift.is-on { background: var(--violet-1); border-color: var(--violet-2); color: #6d56a7; box-shadow: 0 5px 0 #b2a6d8; }
  .key--space { flex: 0 1 54%; max-width: 370px; height: 43px; margin-top: 1px; }
  .key--space .key-jamo { font-size: 10px; color: var(--ink-soft); }
  @keyframes key-glow { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

  .free-panel { grid-column: 1 / -1; display: grid; grid-template-columns: .7fr 1.3fr; gap: 28px; min-height: 680px; border: 1px solid rgba(255,255,255,.8); border-radius: 32px; background: rgba(255,253,247,.93); box-shadow: var(--shadow-card); padding: clamp(28px, 5vw, 62px); align-items: center; }
  .free-copy h2 { margin-top: 14px; color: var(--ink-strong); font-family: var(--font-rounded); font-size: clamp(34px, 5vw, 56px); line-height: 1.12; letter-spacing: -.05em; }
  .free-copy > p:not(.eyebrow) { margin-top: 18px; color: var(--ink-soft); line-height: 1.65; }
  .free-copy .secondary-button { margin-top: 27px; }
  .free-paper { position: relative; border-radius: 28px; background: #fffef9; padding: 24px; box-shadow: 0 13px 0 #e1d6bf, 0 24px 45px rgba(77,70,53,.12); transform: rotate(1deg); }
  .free-paper::before { content: ""; position: absolute; inset: 15px; pointer-events: none; border-radius: 20px; border: 2px dashed rgba(99,160,143,.2); }
  .free-paper label { position: relative; z-index: 1; color: var(--mint-4); font-size: 11px; font-weight: 900; }
  .free-paper textarea { position: relative; z-index: 1; width: 100%; min-height: 130px; resize: vertical; margin-top: 12px; border: 0; border-radius: 18px; background: var(--cream-1); padding: 17px; color: var(--ink-strong); font-size: 19px; line-height: 1.6; }
  .free-paper textarea::placeholder { color: #a5aaa5; }
  .free-preview { position: relative; z-index: 1; min-height: 155px; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 4px; margin-top: 15px; border-radius: 18px; background: linear-gradient(145deg, var(--mint-1), #fff1cc); padding: 18px; color: var(--ink-soft); text-align: center; overflow-wrap: anywhere; }
  .free-preview span { font-family: var(--font-rounded); font-size: clamp(26px, 5vw, 52px); font-weight: 900; color: var(--ink-strong); }
  .free-paper > small { position: relative; z-index: 1; display: block; margin-top: 11px; color: var(--ink-soft); font-size: 10px; text-align: right; }

  /* Summary */
  .summary-scene { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 35px 0 55px; display: grid; place-items: center; }
  .summary-card { position: relative; width: 100%; min-height: 680px; overflow: hidden; display: grid; grid-template-columns: .9fr 1.1fr; border: 1px solid rgba(255,255,255,.8); border-radius: 44px; background: linear-gradient(145deg, rgba(187,235,229,.96), rgba(255,244,206,.94)); box-shadow: 0 25px 0 rgba(68,111,95,.08), 0 35px 70px rgba(48,79,71,.18); isolation: isolate; }
  .summary-card::before { content: ""; position: absolute; z-index: -1; left: -13%; bottom: -32%; width: 70%; height: 70%; border-radius: 50%; background: #80c595; box-shadow: inset 0 17px rgba(255,255,255,.14); }
  .summary-sky { position: absolute; inset: 0; pointer-events: none; }
  .summary-character { position: relative; z-index: 8; display: flex; align-items: end; justify-content: center; padding: 36px 10px 0; pointer-events: none; }
  .summary-character img { position: relative; z-index: 2; width: min(83%, 410px); max-height: 610px; object-fit: contain; object-position: bottom; filter: drop-shadow(0 28px 17px rgba(54,78,67,.2)); animation: summary-arrive .75s cubic-bezier(.2,.8,.2,1.2); }
  .summary-glow { position: absolute; left: 50%; top: 48%; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(255,241,151,.75), rgba(255,238,135,0) 67%); transform: translate(-50%,-50%); animation: glow-breathe 2s ease-in-out infinite; }
  .summary-copy { align-self: center; padding: 55px 64px 55px 25px; }
  .summary-copy h1 { margin-top: 15px; color: var(--ink-strong); font-family: var(--font-rounded); font-size: clamp(37px, 5vw, 58px); line-height: 1.06; letter-spacing: -.055em; }
  .summary-copy > p:not(.eyebrow) { max-width: 540px; margin-top: 16px; color: var(--ink-soft); line-height: 1.65; word-break: keep-all; }
  .heart-lights { display: flex; gap: 14px; margin-top: 24px; }
  .heart-lights span { display: grid; place-items: center; min-width: 70px; border-radius: 17px; background: rgba(255,255,255,.56); padding: 10px; }
  .heart-lights i { color: var(--coral-3); font-size: 28px; font-style: normal; filter: drop-shadow(0 4px 4px rgba(202,93,78,.15)); }
  .heart-lights small { margin-top: 3px; color: var(--ink-soft); font-size: 9px; font-weight: 900; }
  .summary-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 24px; }
  .summary-stats > div { border-left: 1px solid rgba(67,96,86,.14); padding: 3px 12px; }
  .summary-stats > div:first-child { border-left: 0; padding-left: 0; }
  .summary-stats dt { color: var(--ink-soft); font-size: 9px; font-weight: 800; }
  .summary-stats dd { margin-top: 4px; color: var(--ink-strong); font-size: 15px; font-weight: 1000; }
  .summary-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 33px; }
  .summary-actions .primary-button { flex: 1 1 220px; }
  .summary-actions .secondary-button { flex: 0 1 155px; }
  .rest-link { display: block; margin: 22px auto 0; color: var(--ink-soft); font-size: 11px; }
  .summary-sky i { position: absolute; z-index: -1; width: 10px; height: 10px; border-radius: 2px; background: #fff19a; transform: rotate(45deg); animation: summary-star 1.8s ease-in-out infinite; }
  .summary-sky i:nth-child(1) { left: 7%; top: 15%; }
  .summary-sky i:nth-child(2) { left: 34%; top: 9%; animation-delay: -.4s; }
  .summary-sky i:nth-child(3) { right: 8%; top: 14%; animation-delay: -.9s; }
  .summary-sky i:nth-child(4) { right: 41%; bottom: 11%; animation-delay: -.6s; }
  .summary-sky i:nth-child(5) { left: 45%; top: 42%; animation-delay: -1.2s; }
  @keyframes summary-arrive { from { opacity: 0; transform: translateY(70px) scale(.9); } to { opacity: 1; transform: none; } }
  @keyframes glow-breathe { 0%,100% { opacity: .65; transform: translate(-50%,-50%) scale(.88); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.08); } }
  @keyframes summary-star { 0%,100% { opacity: .2; transform: rotate(45deg) scale(.5); } 50% { opacity: 1; transform: rotate(135deg) scale(1.2); } }

  /* Mission picker */
  .mission-modal { width: min(1080px, calc(100% - 28px)); }
  .mission-frame { min-height: 610px; display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr); gap: 20px; overflow: hidden; padding: 0; background: linear-gradient(145deg, #d7f2eb 0 34%, #fffdf7 34%); }
  .mission-character-stage { position: relative; z-index: 12; min-height: 610px; display: flex; align-items: end; justify-content: center; padding: 42px 12px 0; pointer-events: none; isolation: isolate; }
  .mission-character-stage::before { content: ""; position: absolute; z-index: -2; left: -24%; right: -18%; bottom: -18%; height: 49%; border-radius: 50%; background: linear-gradient(155deg, #8dcf9a, #60ab7a); box-shadow: inset 0 15px rgba(255,255,255,.14); }
  .mission-character-stage img { position: relative; z-index: 4; width: min(100%, 340px); max-height: 560px; object-fit: contain; object-position: bottom; filter: drop-shadow(0 24px 15px rgba(48,76,66,.21)); }
  .mission-character-glow { position: absolute; z-index: -1; left: 50%; top: 33%; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(255,244,172,.82), rgba(255,244,172,0) 69%); transform: translate(-50%,-50%); }
  .mission-picker-copy { align-self: center; padding: 55px 50px 45px 25px; }
  .mission-picker-copy h2 { margin-top: 12px; color: var(--ink-strong); font-family: var(--font-rounded); font-size: clamp(34px, 4vw, 51px); line-height: 1.06; letter-spacing: -.055em; }
  .mission-picker-copy > p:not(.eyebrow, .mission-footnote) { margin-top: 12px; color: var(--ink-soft); font-size: 13px; line-height: 1.55; }
  .mission-grid { display: grid; gap: 10px; margin-top: 26px; }
  .mission-card { position: relative; width: 100%; min-height: 105px; display: grid; grid-template-columns: 47px 1fr auto; align-items: center; gap: 13px; overflow: hidden; border: 1px solid rgba(68,91,84,.1); border-radius: 21px; background: rgba(255,255,255,.85); padding: 13px 15px; text-align: left; box-shadow: 0 7px 0 rgba(59,85,76,.07), 0 13px 28px rgba(53,78,71,.07); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
  .mission-card:hover, .mission-card:focus-visible { transform: translateY(-3px); border-color: color-mix(in srgb, var(--mission-color, var(--mint-3)) 48%, transparent); box-shadow: 0 10px 0 rgba(59,85,76,.07), 0 19px 32px rgba(53,78,71,.1); }
  .mission-card::after { content: ""; position: absolute; right: -21px; top: -25px; width: 77px; height: 77px; border-radius: 50%; background: color-mix(in srgb, var(--mission-color, var(--mint-3)) 10%, transparent); }
  .mission-card-number { display: grid; place-items: center; width: 47px; height: 47px; border-radius: 16px; background: color-mix(in srgb, var(--mission-color, var(--mint-3)) 18%, #fff); color: color-mix(in srgb, var(--mission-color, var(--mint-4)) 75%, #40524d); font-family: var(--font-rounded); font-size: 18px; font-weight: 1000; box-shadow: inset 0 -4px color-mix(in srgb, var(--mission-color, var(--mint-3)) 13%, transparent); }
  .mission-card-copy strong { display: block; color: var(--ink-strong); font-size: 15px; }
  .mission-card-copy small { display: block; margin-top: 3px; color: var(--ink-soft); font-size: 10px; line-height: 1.42; word-break: keep-all; }
  .mission-card-meta { position: relative; z-index: 2; min-width: 88px; display: grid; justify-items: end; gap: 5px; }
  .mission-card-meta span { border-radius: 99px; background: var(--cream-1); padding: 5px 7px; color: var(--ink-soft); font-size: 8px; font-weight: 900; }
  .mission-card-meta b { color: var(--mission-color, var(--mint-4)); font-size: 10px; }
  .mission-card.is-complete .mission-card-number { background: var(--mint-3); color: #fff; }
  .mission-footnote { display: flex; align-items: center; gap: 8px; margin-top: 19px; color: #52736b; font-size: 10px; font-weight: 800; }
  .mission-footnote span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 9px; background: var(--mint-1); color: var(--mint-4); font-size: 14px; }

  /* Parent / other dialogs */
  .parent-modal { width: min(920px, calc(100% - 28px)); }
  .parent-frame { padding: 40px; }
  .parent-head { display: grid; grid-template-columns: 1fr auto; gap: 24px; padding-right: 35px; }
  .parent-head h2 { margin-top: 10px; color: var(--ink-strong); font-family: var(--font-rounded); font-size: clamp(30px, 5vw, 44px); line-height: 1.13; letter-spacing: -.05em; }
  .parent-head p { margin-top: 10px; color: var(--ink-soft); font-size: 13px; }
  .privacy-seal { align-self: start; min-width: 110px; display: grid; place-items: center; border-radius: 22px; background: var(--mint-1); padding: 14px; color: #397d6a; text-align: center; transform: rotate(2deg); }
  .privacy-seal > span { font-size: 25px; }
  .privacy-seal strong { margin-top: 4px; font-size: 11px; }
  .privacy-seal small { margin-top: 2px; font-size: 8px; }
  .parent-summary, .growth-section { margin-top: 28px; border: 1px solid var(--line); border-radius: 24px; background: var(--cream-0); padding: 20px; }
  .section-title { display: flex; justify-content: space-between; align-items: end; gap: 18px; }
  .section-title small { color: var(--coral-3); font-size: 9px; font-weight: 900; }
  .section-title h3 { margin-top: 2px; color: var(--ink-strong); font-size: 17px; }
  .section-title > span { color: var(--ink-soft); font-size: 10px; font-weight: 800; }
  .parent-sentence { margin-top: 14px; border-radius: 16px; background: var(--mint-1); padding: 13px 15px; color: #3d7165; font-size: 13px; line-height: 1.55; }
  .parent-metrics { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 16px; }
  .parent-metrics > div { border-left: 1px solid var(--line); padding: 3px 16px; }
  .parent-metrics > div:first-child { border-left: 0; padding-left: 0; }
  .parent-metrics dt { color: var(--ink-soft); font-size: 9px; font-weight: 800; }
  .parent-metrics dd { margin-top: 3px; color: var(--ink-strong); font-size: 24px; font-weight: 1000; }
  .parent-metrics small { display: block; margin-top: 3px; color: #899390; font-size: 8px; }
  .growth-road { display: grid; grid-template-columns: repeat(8,1fr); gap: 7px; margin-top: 17px; }
  .growth-stop { position: relative; min-width: 0; display: grid; place-items: center; border-radius: 15px; background: var(--cream-2); padding: 12px 5px 9px; text-align: center; }
  .growth-stop::before { content: ""; position: absolute; left: calc(50% + 18px); right: calc(-50% + 18px); top: 25px; height: 4px; background: var(--cream-2); z-index: -1; }
  .growth-stop:last-child::before { display: none; }
  .growth-stop span { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 10px; background: #fff; color: var(--ink-soft); font-weight: 900; }
  .growth-stop strong { overflow: hidden; width: 100%; margin-top: 6px; color: var(--ink-soft); font-size: 8px; white-space: nowrap; text-overflow: ellipsis; }
  .growth-stop.is-complete { background: var(--mint-1); }
  .growth-stop.is-complete span { background: var(--mint-3); color: #fff; }
  .growth-stop.is-current { box-shadow: inset 0 0 0 2px var(--yellow-2); }
  .next-step-section { display: flex; align-items: center; gap: 16px; margin-top: 17px; border-radius: 24px; background: linear-gradient(140deg, var(--yellow-1), #fff7d9); padding: 17px; }
  .parent-next-character { flex: 0 0 72px; width: 72px; height: 78px; object-fit: contain; object-position: bottom; filter: drop-shadow(0 9px 6px rgba(65,74,56,.13)); pointer-events: none; }
  .next-step-section small { color: #9a6c25; font-size: 9px; font-weight: 900; }
  .next-step-section strong { display: block; margin-top: 2px; color: var(--ink-strong); font-size: 15px; }
  .next-step-section p { margin-top: 4px; color: var(--ink-soft); font-size: 11px; line-height: 1.45; }
  .design-details { margin-top: 17px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .design-details summary { display: flex; justify-content: space-between; padding: 16px 3px; color: var(--ink-strong); font-size: 12px; font-weight: 900; cursor: pointer; list-style: none; }
  .design-details summary::-webkit-details-marker { display: none; }
  .design-details[open] summary span { transform: rotate(45deg); }
  .design-details > div { padding: 0 3px 13px; }
  .design-details p { margin-top: 8px; color: var(--ink-soft); font-size: 11px; line-height: 1.55; }
  .design-details strong { color: var(--ink-strong); }
  .parent-controls { display: flex; justify-content: space-between; align-items: center; gap: 13px; margin-top: 20px; }
  .parent-controls .secondary-button { font-size: 11px; }
  .danger-text { color: var(--danger); padding: 12px; font-size: 10px; }

  .pause-frame, .lock-frame, .reset-frame { text-align: center; }
  .pause-frame .eyebrow, .lock-frame .eyebrow, .reset-frame .eyebrow { justify-content: center; }
  .pause-tori { width: 120px; height: 135px; margin: -15px auto 5px; overflow: hidden; }
  .pause-tori img { width: 100%; height: 100%; object-fit: contain; }
  .pause-actions, .reset-actions { display: flex; gap: 10px; justify-content: center; margin-top: 27px; }
  .lock-icon { display: grid; place-items: center; width: 66px; height: 66px; margin: -5px auto 17px; border-radius: 23px; background: var(--yellow-1); color: #9b6a1c; font-size: 28px; box-shadow: inset 0 -7px rgba(167,115,32,.1); }
  .lock-frame .primary-button { width: 100%; margin-top: 25px; }
  .lock-frame .text-button { display: block; margin: 9px auto 0; }
  .danger-button { color: #fff; background: var(--danger); box-shadow: 0 6px 0 #91383c; }
}

@layer utilities {
  .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; }
  body.is-modal-open { overflow: hidden; }
  body.is-high-contrast { --ink: #243134; --ink-soft: #465658; --line: rgba(35,49,52,.25); }
  body.is-high-contrast .scene, body.is-high-contrast .modal-frame { filter: contrast(1.06); }
  body.is-calm .ambient-canvas, body.is-calm .map-sparkles, body.is-calm .welcome-cloud { display: none; }
}

@layer responsive {
  @media (max-width: 1120px) {
    .welcome-scene { grid-template-columns: .9fr 1.1fr; width: min(1000px, calc(100% - 40px)); column-gap: 24px; }
    .welcome-visual { min-height: 540px; }
    .town-layout { grid-template-columns: minmax(0,1fr) 260px; }
    .town-stage { min-height: 620px; }
    .town-map { width: 100%; }
    .district { transform: translate(-50%,-50%) scale(.86); }
    .district:hover, .district:focus-visible { transform: translate(-50%,-54%) scale(.91); }
    .lesson-world { grid-template-columns: 230px minmax(0,1fr); }
    .lesson-topline { grid-template-columns: 140px 1fr auto 140px; }
    .mission-frame { grid-template-columns: minmax(230px, .58fr) minmax(0, 1.42fr); }
    .mission-picker-copy { padding-right: 35px; }
  }

  @media (max-width: 900px) {
    .topbar { width: calc(100% - 24px); grid-template-columns: auto minmax(190px, 1fr) auto; gap: 8px; }
    .day-meter { position: static; z-index: auto; justify-self: center; width: min(250px, 100%); min-width: 190px; transform: none; background: rgba(255,255,255,.72); box-shadow: 0 8px 22px rgba(48,73,68,.1); }
    .brand-text { display: none; }
    .welcome-scene { width: min(720px, calc(100% - 32px)); grid-template-columns: 1fr; grid-template-rows: auto auto auto; padding-top: 35px; }
    .welcome-copy { text-align: center; padding: 20px 0 0; }
    .welcome-copy .eyebrow { justify-content: center; }
    .welcome-copy h1 { margin-inline: auto; font-size: clamp(45px, 9vw, 67px); }
    .welcome-actions, .trust-list { justify-content: center; }
    .welcome-visual { min-height: 560px; }
    .parent-promise { margin-top: 25px; margin-bottom: 90px; }
    .town-scene, .lesson-scene, .summary-scene { width: calc(100% - 24px); }
    .town-layout { grid-template-columns: 1fr; }
    .town-stage { min-height: 650px; }
    .town-side { display: grid; grid-template-columns: 1.3fr 1fr; }
    .step-card { min-height: 300px; }
    .town-note { align-self: stretch; }
    .quiet-link { grid-column: 1 / -1; }
    .lesson-world { grid-template-columns: 1fr; }
    .lesson-story { min-height: 190px; }
    .lesson-tori-wrap { left: auto; right: 1%; bottom: 0; width: 162px; height: 188px; }
    .lesson-speech { right: 155px; top: 28px; }
    .lesson-scenery { display: none; }
    .lesson-topline { grid-template-columns: auto 1fr auto; }
    .lesson-identity { justify-self: start; }
    .seed-progress { display: none; }
    .back-button span + * { display: none; }
    .pause-button span:last-child { display: none; }
    .summary-card { grid-template-columns: .75fr 1.25fr; }
    .summary-copy { padding-right: 35px; }
    .mission-character-stage { min-height: 565px; }
    .mission-character-stage img { max-height: 520px; }
  }

  @media (max-width: 680px) {
    body::before { opacity: .22; }
    .scene { min-height: calc(100dvh - 75px); }
    .topbar { height: 72px; grid-template-columns: auto minmax(70px, 1fr) auto; gap: 5px; }
    .brand-mark { width: 41px; height: 39px; transform: scale(.9); }
    .day-meter { position: static; justify-self: center; width: auto; min-width: 76px; transform: none; padding: 6px 8px; gap: 6px; border-radius: 15px; }
    .day-meter-icon { width: 29px; height: 29px; border-radius: 10px; }
    .day-meter > span:nth-child(2) { min-width: 0; }
    .day-meter strong { font-size: 11px; white-space: nowrap; }
    .day-meter small, .day-meter-track { display: none; }
    .top-actions { gap: 5px; }
    .round-action { min-width: 45px; height: 45px; }
    .round-action .action-label { display: none; }
    .parent-action { width: 45px; padding: 0; justify-content: center; }
    .parent-action > span:last-child { display: none; }
    .welcome-scene { padding: 16px 0 38px; }
    .welcome-copy h1 { font-size: clamp(40px, 12.2vw, 57px); }
    .welcome-lead { font-size: 16px; }
    .welcome-actions { flex-direction: column; }
    .welcome-actions .primary-button { width: min(330px, 100%); }
    .trust-list { gap: 7px 12px; }
    .welcome-visual { min-height: 490px; }
    .welcome-visual::before { inset: 5% 0 10%; }
    .tori-hero { left: 23%; width: 48%; }
    .crew-friend--bami { left: 0; width: 31%; }
    .crew-friend--pipi { right: 0; width: 30%; }
    .crew-friend--duri, .crew-friend--nuri { display: none; }
    .mini-town { right: -7%; width: 67%; }
    .speech-bubble--hello { left: 0; top: 13%; width: 157px; padding: 14px; }
    .speech-bubble strong { font-size: 17px; }
    .welcome-note { right: 0; top: 50%; max-width: 135px; }
    .parent-promise { grid-template-columns: auto 1fr; width: 100%; text-align: left; }
    .parent-promise button { grid-column: 1 / -1; }

    .town-scene { padding-top: 15px; padding-bottom: 100px; }
    .town-heading { align-items: start; padding: 0 4px 16px; }
    .town-heading h1 { font-size: 28px; }
    .town-heading > div:first-child > p:last-child { font-size: 12px; }
    .town-progress { flex-basis: 104px; padding: 10px; }
    .town-progress-copy > span { display: none; }
    .town-progress-track { margin-top: 5px; }
    .town-stage { min-height: 590px; border-radius: 28px; }
    .town-map { width: 125%; top: 46%; transform: translate(-50%,-50%) scale(.88); }
    .district { transform: translate(-50%,-50%) scale(.7); }
    .district:hover, .district:focus-visible { transform: translate(-50%,-54%) scale(.75); }
    .district-sign small { font-size: 10px; }
    .district-sign strong { font-size: 16px; }
    .district-sign em { font-size: 9px; }
    .district--workshop { --x: 14% !important; --y: 58% !important; }
    .district--garden { --x: 20% !important; --y: 27% !important; }
    .district--fountain { --x: 42% !important; --y: 14% !important; }
    .district--bakery { --x: 67% !important; --y: 23% !important; }
    .district--post { --x: 83% !important; --y: 43% !important; }
    .district--station { --x: 79% !important; --y: 73% !important; }
    .district--theater { --x: 57% !important; --y: 82% !important; }
    .district--library { --x: 34% !important; --y: 72% !important; }
    .free-studio { left: 8%; top: 83%; transform: translate(-50%,-50%) scale(.7); }
    .map-tori { transform: translate(-50%,-50%) scale(.82); }
    .town-side { grid-template-columns: 1fr; }
    .step-card { min-height: 340px; }

    .lesson-scene { padding-top: 8px; padding-bottom: 90px; }
    .lesson-world { gap: 10px; }
    .lesson-topline { min-height: 64px; grid-template-columns: 48px 1fr 48px; }
    .back-button, .pause-button { width: 45px; height: 45px; padding: 0; justify-content: center; }
    .back-button { font-size: 0; }
    .back-button span { font-size: 18px; }
    .lesson-icon { width: 40px; height: 40px; }
    .lesson-identity h1 { font-size: 15px; }
    .lesson-story { min-height: 150px; border-radius: 25px; }
    .lesson-speech { left: 12px; right: 120px; top: 16px; padding: 13px; }
    .lesson-speech p { font-size: 13px; }
    .lesson-tori-wrap { width: 124px; height: 180px; }
    .practice-panel { border-radius: 25px; padding: 12px 10px 14px; }
    .practice-header { padding-inline: 4px; }
    .calm-badge { display: none; }
    .target-wrap { min-height: 195px; padding: 8px 0 6px; }
    .target-word { font-size: clamp(56px, 19vw, 82px); }
    .target-word[data-length="medium"] { font-size: clamp(34px, 10vw, 52px); }
    .target-word[data-length="long"] { font-size: clamp(26px, 7.4vw, 39px); line-height: 1.24; }
    .target-jamo span { min-width: 27px; height: 27px; font-size: 12px; }
    .feedback-line { font-size: 11px; }
    .finger-row { grid-template-columns: 1fr 95px; }
    .finger-guide { padding: 8px; }
    .hand-symbol { transform: scale(.85); margin-left: -3px; }
    .finger-guide.is-right .hand-symbol { transform: scaleX(-1) scale(.85); }
    .finger-guide strong { font-size: 10px; }
    .next-key-card { min-width: 90px; }
    .keyboard-wrap { margin: 0 -3px; padding: 9px 5px 12px; border-radius: 18px; }
    .keyboard-toolbar p { display: none; }
    .keyboard-hands { height: 53px; gap: 2px; margin-bottom: 5px; padding-inline: 0; }
    .typing-hand { width: 112px; height: 52px; transform: scale(.78) rotate(7deg); transform-origin: right bottom; }
    .typing-hand--right { transform: scaleX(-1) scale(.78) rotate(7deg); transform-origin: left bottom; }
    .hand-hint-copy { min-width: 84px; padding: 6px 5px; }
    .hand-hint-copy small { display: none; }
    .key-row { gap: 3px; }
    .key { min-width: 0; height: 46px; border-radius: 9px; box-shadow: 0 4px 0 #c8d1cd; }
    .key-jamo { font-size: 16px; }
    .key-letter { right: 3px; bottom: 2px; font-size: 6px; }
    .key--shift { flex: .9; }
    .key--space { height: 34px; }
    .free-panel { grid-template-columns: 1fr; min-height: auto; padding: 26px 18px; }
    .free-copy h2 { font-size: 36px; }
    .free-paper { transform: none; padding: 18px; }

    .summary-scene { padding-top: 12px; padding-bottom: 100px; }
    .summary-card { grid-template-columns: 1fr; border-radius: 30px; }
    .summary-character { height: 290px; overflow: hidden; }
    .summary-character img { width: 235px; height: 350px; object-fit: contain; object-position: top; }
    .summary-card::before { left: -20%; bottom: 47%; width: 140%; height: 36%; }
    .summary-copy { padding: 12px 22px 35px; text-align: center; }
    .summary-copy .eyebrow { justify-content: center; }
    .summary-copy h1 { font-size: 36px; }
    .heart-lights { justify-content: center; }
    .summary-stats { text-align: left; }
    .summary-stats dd { font-size: 12px; }
    .summary-actions { flex-direction: column; }

    .mission-modal { width: calc(100% - 18px); }
    .mission-frame { min-height: 0; grid-template-columns: 1fr; background: var(--paper); }
    .mission-character-stage { min-height: 190px; max-height: 190px; padding-top: 12px; overflow: hidden; background: linear-gradient(145deg, #d6f1ea, #eff7dc); }
    .mission-character-stage::before { bottom: -40%; height: 72%; }
    .mission-character-stage img { width: 170px; height: 235px; object-position: top; }
    .mission-character-glow { width: 170px; height: 170px; }
    .mission-picker-copy { padding: 18px 15px 24px; text-align: center; }
    .mission-picker-copy .eyebrow { justify-content: center; }
    .mission-picker-copy h2 { font-size: 31px; }
    .mission-grid { margin-top: 18px; text-align: left; }
    .mission-card { min-height: 92px; grid-template-columns: 42px 1fr; padding: 11px; }
    .mission-card-number { width: 42px; height: 42px; }
    .mission-card-meta { grid-column: 2; grid-row: 2; min-width: 0; display: flex; justify-content: flex-start; }
    .mission-footnote { justify-content: center; text-align: left; }

    .modal-frame, .parent-frame { padding: 34px 20px 24px; border-radius: 27px; }
    .parent-head { grid-template-columns: 1fr; padding-right: 0; }
    .privacy-seal { display: none; }
    .parent-metrics { gap: 4px; }
    .parent-metrics > div { padding: 3px 8px; }
    .parent-metrics dd { font-size: 19px; }
    .growth-road { grid-template-columns: repeat(3,1fr); }
    .growth-stop::before { display: none; }
    .parent-controls { flex-direction: column; }
    .parent-controls .secondary-button { width: 100%; }
    .pause-actions, .reset-actions { flex-direction: column; }
  }

  @media (max-height: 720px) and (min-width: 681px) {
    .welcome-scene { padding-top: 24px; }
    .welcome-visual { min-height: 480px; }
    .town-stage { min-height: 550px; }
    .lesson-world { min-height: 580px; }
    .target-wrap { min-height: 195px; }
    .key { height: 49px; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    .ambient-canvas, .map-sparkles { display: none; }
    .finger-guide-lines path { stroke-dasharray: none; }
  }

  @media (forced-colors: active) {
    .typing-hand > i.is-active { border: 3px solid Highlight; background: Highlight; }
    .finger-guide-lines path { stroke: CanvasText; }
  }
}