:root {
      --color-paper: oklch(97% 0.012 95); --color-paper-2: oklch(94% 0.016 95); --color-paper-3: oklch(91% 0.02 95);
      --color-ink: oklch(20% 0.012 250); --color-ink-2: oklch(34% 0.015 245); --color-muted: oklch(42% 0.014 180);
      --color-rule: oklch(76% 0.025 95); --color-rule-strong: oklch(31% 0.014 245);
      --color-accent: oklch(86% 0.18 95); --color-accent-deep: oklch(70% 0.16 92); --color-accent-cast: oklch(76% 0.2 95 / 0.38); --color-accent-ink: oklch(20% 0.012 250);
      --color-accent-2: oklch(66% 0.18 235); --color-accent-2-soft: oklch(91% 0.055 225); --color-accent-2-deep: oklch(42% 0.12 235);
      --color-accent-3: oklch(68% 0.24 18); --color-accent-3-soft: oklch(92% 0.055 24); --color-accent-3-deep: oklch(44% 0.16 18);
      --color-mint: oklch(80% 0.16 150); --color-mint-soft: oklch(93% 0.045 150);
      --color-lavender: oklch(74% 0.16 305); --color-lavender-soft: oklch(92% 0.04 305);
      --color-focus: oklch(40% 0.15 248); --color-error: oklch(45% 0.18 25); --color-error-soft: oklch(93% 0.045 25); --color-shadow: oklch(20% 0.012 250 / 0.14);
      --font-display: "Plus Jakarta Sans", "Noto Sans KR", Pretendard, sans-serif; --font-body: "Plus Jakarta Sans", "Noto Sans KR", Pretendard, sans-serif; --font-label: "Plus Jakarta Sans", "Noto Sans KR", Pretendard, sans-serif;
      --space-3xs: .125rem; --space-2xs: .25rem; --space-xs: .5rem; --space-sm: .75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem; --space-3xl: 6rem;
      --text-xs: .75rem; --text-sm: .875rem; --text-base: 1rem; --text-md: 1.25rem; --text-lg: 1.5625rem; --text-xl: 1.953rem; --text-2xl: 2.441rem; --text-3xl: 3.052rem; --text-display-s: clamp(2.6rem, 7vw, 4.25rem); --text-display: clamp(3rem, 8vw, 5.25rem);
      --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in: cubic-bezier(.7, 0, .84, 0); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
      --radius-input: .75rem; --radius-card: 1.25rem; --radius-card-lg: 1.75rem; --radius-pill: 999px; --rule-hair: 1px; --rule-bold: 2px;
      --page-max: 74rem; --page-gutter: clamp(1rem, 4vw, 3rem); --z-raised: 10; --z-toast: 500;
    }

    * { box-sizing: border-box; }
    html, body { min-width: 20rem; margin: 0; overflow-x: clip; color: var(--color-ink); background: var(--color-paper); }
    body { min-height: 100dvh; font-family: var(--font-body); font-size: var(--text-base); font-feature-settings: "ss01" on, "cv11" on; font-variant-numeric: tabular-nums; line-height: 1.6; text-rendering: optimizeLegibility; }
    button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
    button { font: inherit; }
    h1, h2, h3, p { margin-block: 0; }
    h1, h2, h3 { min-width: 0; overflow-wrap: anywhere; font-family: var(--font-display); font-style: normal; }

    .skip-link { position: fixed; inset-block-start: var(--space-sm); inset-inline-start: var(--space-sm); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-input); color: var(--color-paper); background: var(--color-ink); transform: translateY(-180%); }
    .skip-link:hover { text-decoration-thickness: var(--rule-bold); }
    .skip-link:focus, .skip-link:focus-visible { outline: 3px solid var(--color-focus); outline-offset: var(--space-2xs); transform: translateY(0); }
    .skip-link:active { transform: translateY(var(--rule-hair)); }
    .skip-link[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
    .skip-link[aria-busy="true"] { cursor: progress; }
    .skip-link[data-state="error"] { color: var(--color-paper); background: var(--color-error); }
    .skip-link[data-state="success"] { color: var(--color-paper); background: var(--color-ink); }

    .nav-slab { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); min-height: 3.75rem; align-items: center; gap: var(--space-md); padding-inline: var(--page-gutter); border-block-end: var(--rule-bold) solid var(--color-rule-strong); background: var(--color-paper); }
    .brand-button { display: inline-flex; min-height: 2.75rem; align-items: center; justify-self: start; gap: var(--space-sm); padding: 0; border: 0; color: var(--color-ink); background: transparent; cursor: pointer; font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; line-height: 1; white-space: nowrap; }
    .brand-button:hover { text-decoration: underline; text-decoration-thickness: var(--rule-bold); text-underline-offset: var(--space-2xs); }
    .brand-button:active { transform: translateY(var(--rule-hair)); }
    .brand-button[disabled], .brand-button[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; transform: none; }
    .brand-button[aria-busy="true"]::after { content: ""; width: 1rem; height: 1rem; border: var(--rule-bold) solid currentColor; border-block-start-color: transparent; border-radius: var(--radius-pill); animation: spin var(--dur-long) linear infinite; }
    .brand-button[data-state="error"] { color: var(--color-error); }
    .brand-button[data-state="success"] { color: var(--color-accent-2-deep); }
    .brand-seed { position: relative; width: 1.25rem; height: 1.25rem; border: var(--rule-bold) solid var(--color-ink); border-radius: 70% 20% 70% 20%; background: var(--color-accent); transform: rotate(-22deg); }
    .brand-seed::after { content: ""; position: absolute; inset-block-end: -.45rem; inset-inline-start: .55rem; width: var(--rule-bold); height: .6rem; background: var(--color-ink); transform: rotate(22deg); }
    .nav-edition, .nav-state, .mono-label { font-family: var(--font-label); font-size: var(--text-xs); font-weight: 500; letter-spacing: .08em; line-height: 1; text-transform: uppercase; }
    .nav-edition { color: var(--color-ink-2); line-height: 1; text-decoration: none; white-space: nowrap; }
    .nav-edition:hover { text-decoration: underline; text-decoration-thickness: var(--rule-bold); text-underline-offset: var(--space-2xs); }
    .nav-edition:active { transform: translateY(var(--rule-hair)); }
    .nav-edition:focus-visible { outline: 3px solid var(--color-focus); outline-offset: var(--space-2xs); }
    .nav-state { justify-self: end; color: var(--color-muted); white-space: nowrap; }
    .nav-state::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-inline-end: var(--space-xs); border-radius: var(--radius-pill); background: var(--color-mint); box-shadow: 0 0 0 var(--space-2xs) var(--color-mint-soft); }
    .page-shell { width: min(var(--page-max), 100%); margin-inline: auto; padding-inline: var(--page-gutter); }
    .screen { display: none; }
    .screen.is-active { display: block; }

    .hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); min-height: clamp(34rem, 75dvh, 48rem); align-items: center; padding-block: var(--space-xl) var(--space-2xl); }
    .hero-copy { display: grid; position: relative; z-index: var(--z-raised); gap: var(--space-lg); align-content: center; }
    .hero-label { color: var(--color-ink-2); }
    .hero-title { max-width: 10ch; color: var(--color-ink); font-size: var(--text-display); font-weight: 700; line-height: 1.02; letter-spacing: -.045em; }
    .highlight { color: inherit; background-image: linear-gradient(180deg, transparent 0 42%, var(--color-accent) 42% 90%, transparent 90%); background-repeat: no-repeat; background-position: 0 0; background-size: 100% 100%; box-decoration-break: clone; -webkit-box-decoration-break: clone; padding-block-end: var(--space-3xs); }
    .hero-lede { max-width: 55ch; color: var(--color-ink-2); font-size: clamp(var(--text-base), 2vw, var(--text-md)); line-height: 1.65; word-break: keep-all; }
    .hero-action { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); }
    .time-note { max-width: 45ch; color: var(--color-muted); font-size: var(--text-sm); line-height: 1.45; }

    .btn { --btn-face: var(--color-accent); --btn-ink: var(--color-accent-ink); --btn-edge: var(--color-accent-deep); --btn-cast: var(--color-accent-cast); display: inline-flex; position: relative; min-height: 3.25rem; align-items: center; justify-content: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-lg); border: 0; border-radius: var(--radius-pill); color: var(--btn-ink); background: var(--btn-face); box-shadow: 0 var(--space-2xs) 0 var(--btn-edge), 0 .375rem .75rem -.1875rem var(--btn-cast); cursor: pointer; font-family: var(--font-body); font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; transform: translateY(0); transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
    @media (hover: hover) and (pointer: fine) { .btn:hover { transform: translateY(-.125rem); } }
    .btn:active { transform: translateY(.1875rem); box-shadow: 0 var(--rule-hair) 0 var(--btn-edge), 0 var(--space-3xs) .375rem -.125rem var(--btn-cast); }
    .btn:focus-visible, .answer-button:focus-visible, .brand-button:focus-visible, .text-button:focus-visible, .back-button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: var(--space-2xs); }
    .btn[disabled], .btn[aria-disabled="true"], .answer-button[disabled], .answer-button[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; transform: none; }
    .btn[aria-busy="true"], .answer-button[aria-busy="true"], .brand-button[aria-busy="true"], .back-button[aria-busy="true"], .text-button[aria-busy="true"] { cursor: progress; }
    .btn[aria-busy="true"]::before, .answer-button[aria-busy="true"]::before { content: ""; width: 1rem; height: 1rem; border: var(--rule-bold) solid currentColor; border-block-start-color: transparent; border-radius: var(--radius-pill); animation: spin var(--dur-long) linear infinite; }
    .btn[data-state="error"], .answer-button[data-state="error"] { --btn-face: var(--color-error-soft); --btn-edge: var(--color-error); color: var(--color-error); }
    .btn[data-state="success"], .answer-button[data-state="success"] { --btn-face: var(--color-mint-soft); --btn-edge: var(--color-mint); }
    @keyframes spin { to { transform: rotate(1turn); } }

    .hero-art { position: relative; min-height: 28rem; overflow: hidden; border: var(--rule-bold) solid var(--color-ink); border-radius: var(--radius-card-lg); background: var(--color-accent-2-soft); transform: rotate(1.2deg) translateX(2%); box-shadow: var(--space-sm) var(--space-sm) 0 var(--color-ink); }
    .hero-art::before { content: "40 SEC"; position: absolute; inset-block-start: var(--space-lg); inset-inline-start: var(--space-lg); font-family: var(--font-label); font-size: var(--text-xs); letter-spacing: .1em; }
    .sprout-character { position: absolute; inset-block-start: 15%; inset-inline-start: 50%; width: min(40vw, 10rem); height: 12rem; transform: translateX(-50%); }
    .sprout-head { position: absolute; inset-block-end: 0; inset-inline-start: 50%; width: 82%; height: 55%; border: var(--rule-bold) solid var(--color-ink); border-radius: 46% 54% 43% 57%; background: var(--color-accent); box-shadow: var(--space-xs) var(--space-xs) 0 var(--color-ink); transform: translateX(-50%) rotate(-2deg); }
    .sprout-eye { position: absolute; inset-block-start: 43%; width: .7rem; height: .85rem; border-radius: var(--radius-pill); background: var(--color-ink); }
    .sprout-eye:first-child { inset-inline-start: 30%; } .sprout-eye:nth-child(2) { inset-inline-end: 30%; }
    .sprout-mouth { position: absolute; inset-block-start: 62%; inset-inline-start: 50%; width: 2rem; height: 1rem; border-block-end: var(--rule-bold) solid var(--color-ink); border-radius: var(--radius-pill); transform: translateX(-50%); }
    .sprout-leaf { position: absolute; inset-block-start: 0; width: 42%; height: 42%; border: var(--rule-bold) solid var(--color-ink); background: var(--color-mint); }
    .sprout-leaf.left { inset-inline-start: 7%; border-radius: 80% 12% 74% 20%; transform: rotate(-35deg); }
    .sprout-leaf.right { inset-inline-end: 7%; border-radius: 12% 80% 20% 74%; transform: rotate(35deg); }
    .qr-band { display: grid; position: absolute; inset-inline: 0; inset-block-end: 0; grid-template-columns: 6rem minmax(0, 1fr); align-items: center; gap: var(--space-md); padding: var(--space-md) var(--space-lg); border-block-start: var(--rule-bold) solid var(--color-ink); color: var(--color-paper); background: var(--color-ink); }
    .qr-box { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); width: 6rem; aspect-ratio: 1; gap: var(--space-3xs); padding: var(--space-xs); border-radius: var(--radius-input); background: var(--color-paper); }
    .qr-cell { border-radius: var(--space-3xs); } .qr-cell.on { background: var(--color-ink); }
    .qr-copy { min-width: 0; } .qr-copy strong { display: block; font-size: var(--text-sm); } .qr-copy span { display: block; margin-block-start: var(--space-2xs); color: var(--color-paper-3); font-size: var(--text-xs); line-height: 1.45; }

    .journey-preview { padding-block: var(--space-lg) var(--space-3xl); border-block-start: var(--rule-bold) solid var(--color-ink); }
    .journey-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
    .journey-item { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-lg); border-block-end: var(--rule-hair) dashed var(--color-rule-strong); }
    .journey-number { font-family: var(--font-label); font-size: var(--text-sm); font-weight: 500; }
    .journey-item:nth-child(1) .journey-number { color: var(--color-accent-3-deep); } .journey-item:nth-child(2) .journey-number { color: var(--color-accent-2-deep); } .journey-item:nth-child(3) .journey-number { color: var(--color-muted); }
    .journey-copy strong { display: block; font-size: var(--text-md); line-height: 1.25; } .journey-copy span { display: block; margin-block-start: var(--space-2xs); color: var(--color-muted); font-size: var(--text-sm); }
    .popular-line { display: flex; align-items: center; gap: var(--space-sm); margin-block-start: var(--space-lg); color: var(--color-ink-2); font-size: var(--text-sm); }
    .popular-line[hidden] { display: none; }
    .popular-mark { display: grid; width: 2rem; height: 2rem; flex: 0 0 auto; place-items: center; border-radius: var(--radius-pill); background: var(--color-accent); }
    .popular-mark svg { width: 1.25rem; height: 1.25rem; }

    .quiz-shell { display: grid; min-height: calc(100dvh - 3.875rem); align-content: center; padding-block: var(--space-xl) var(--space-2xl); }
    .quiz-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-block-end: var(--space-xl); padding-block-end: var(--space-sm); border-block-end: var(--rule-bold) solid var(--color-ink); }
    .back-button, .text-button { min-height: 2.75rem; padding: 0; border: 0; color: var(--color-ink); background: transparent; cursor: pointer; font-family: var(--font-body); font-weight: 600; line-height: 1; text-decoration: underline; text-decoration-thickness: var(--rule-hair); text-underline-offset: var(--space-2xs); white-space: nowrap; }
    .back-button:hover, .text-button:hover { text-decoration-thickness: var(--rule-bold); } .back-button:active, .text-button:active { transform: translateY(var(--rule-hair)); }
    .back-button[disabled], .text-button[disabled], .back-button[aria-disabled="true"], .text-button[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; transform: none; }
    .back-button[aria-busy="true"]::after, .text-button[aria-busy="true"]::after { content: ""; display: inline-block; width: 1rem; height: 1rem; margin-inline-start: var(--space-xs); border: var(--rule-bold) solid currentColor; border-block-start-color: transparent; border-radius: var(--radius-pill); animation: spin var(--dur-long) linear infinite; }
    .back-button[data-state="error"], .text-button[data-state="error"] { color: var(--color-error); } .back-button[data-state="success"], .text-button[data-state="success"] { color: var(--color-accent-2-deep); }
    .step-count { font-family: var(--font-label); font-size: var(--text-sm); font-weight: 500; line-height: 1; }
    .quiz-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
    .step-rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
    .step-dot { display: grid; position: relative; min-width: 0; justify-items: center; gap: var(--space-xs); color: var(--color-muted); font-family: var(--font-label); font-size: var(--text-xs); }
    .step-dot:not(:last-child)::after { content: ""; position: absolute; inset-block-start: .7rem; inset-inline-start: calc(50% + .75rem); width: calc(100% - 1.5rem); border-block-start: var(--rule-bold) solid var(--color-rule); }
    .step-dot span { display: grid; position: relative; z-index: var(--z-raised); width: 1.5rem; height: 1.5rem; place-items: center; border: var(--rule-bold) solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper); font-size: 0; }
    .step-dot.is-done span { border-color: var(--color-ink); background: var(--color-mint); }
    .step-dot.is-done span::after { content: ""; width: .45rem; height: .25rem; border: solid var(--color-ink); border-width: 0 0 var(--rule-bold) var(--rule-bold); transform: rotate(-45deg) translateY(-.08rem); }
    .step-dot.is-current { color: var(--color-ink); } .step-dot.is-current span { border-color: var(--color-ink); background: var(--color-accent); }
    .question-stage { display: grid; min-width: 0; gap: var(--space-xl); }
    .question-copy { display: grid; gap: var(--space-sm); } .question-number { color: var(--color-ink-2); }
    .question-title { max-width: 19ch; font-size: clamp(var(--text-xl), 5vw, var(--text-3xl)); font-weight: 700; line-height: 1.15; letter-spacing: -.035em; word-break: keep-all; }
    .answers { display: grid; gap: var(--space-md); }
    .answer-button { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; min-height: 6rem; align-items: center; gap: var(--space-md); padding: var(--space-md); border: var(--rule-bold) solid var(--color-ink); border-radius: var(--radius-card); color: var(--color-ink); background: var(--color-accent-2-soft); cursor: pointer; text-align: start; box-shadow: var(--space-2xs) var(--space-2xs) 0 var(--color-ink); transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-short) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); }
    .answer-button:nth-child(2) { background: var(--color-accent-3-soft); }
    @media (hover: hover) and (pointer: fine) { .answer-button:hover { background: var(--color-paper-3); } }
    .answer-button:active, .answer-button.is-picked { transform: translate(var(--space-2xs), var(--space-2xs)); box-shadow: 0 0 0 var(--color-ink); } .answer-button.is-picked { background: var(--color-mint-soft); }
    .answer-mark { display: grid; width: 3.5rem; height: 3.5rem; place-items: center; border: var(--rule-hair) solid var(--color-ink); border-radius: 46% 54% 42% 58%; background: var(--color-paper); transform: rotate(-3deg); }
    .answer-mark svg { width: 2rem; height: 2rem; overflow: visible; }
    .answer-copy { min-width: 0; }
    .answer-copy strong { display: block; overflow: hidden; font-size: var(--text-md); font-weight: 700; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
    .answer-copy small { display: block; margin-block-start: var(--space-2xs); color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.45; word-break: keep-all; }
    .answer-arrow { font-family: var(--font-label); font-size: var(--text-lg); font-weight: 500; }
    .quiz-hint { margin-block-start: var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); }

    .result-wrap { padding-block: var(--space-xl) var(--space-3xl); }
    .result-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); align-items: start; margin-block-end: var(--space-xl); padding-block-end: var(--space-lg); border-block-end: var(--rule-bold) solid var(--color-ink); }
    .completion-count { display: flex; align-items: baseline; gap: var(--space-xs); white-space: nowrap; }
    .completion-count strong { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 700; line-height: .9; letter-spacing: -.04em; }
    .completion-count span { color: var(--color-muted); font-family: var(--font-label); font-size: var(--text-xs); text-transform: uppercase; }
    .result-head h1 { justify-self: start; max-width: 15ch; font-size: clamp(var(--text-lg), 4vw, var(--text-2xl)); font-weight: 700; line-height: 1.12; letter-spacing: -.03em; text-align: start; word-break: keep-all; }
    .result-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: center; }
    .story-card { --type-bg: var(--color-mint-soft); --type-accent: var(--color-mint); position: relative; width: min(100%, 26rem); aspect-ratio: 9 / 16; overflow: hidden; padding: var(--space-xl); border: var(--rule-bold) solid var(--color-ink); border-radius: var(--radius-card-lg); color: var(--color-ink); background: var(--type-bg); box-shadow: var(--space-sm) var(--space-sm) 0 var(--color-ink); transform: rotate(-1.2deg); }
    .story-card::before { content: ""; position: absolute; inset-block-start: -4%; inset-inline-end: -8%; width: 38%; aspect-ratio: 1; border: var(--rule-bold) solid var(--color-ink); border-radius: var(--radius-pill); background: var(--type-accent); }
    .story-top { display: flex; position: relative; z-index: var(--z-raised); justify-content: space-between; gap: var(--space-xs); font-family: var(--font-label); font-size: clamp(.625rem, 2.6vw, var(--text-xs)); letter-spacing: .05em; text-transform: uppercase; }
    .character-scene { display: grid; position: relative; z-index: var(--z-raised); width: 50%; aspect-ratio: 1; margin: var(--space-xl) auto var(--space-lg); place-items: center; border: var(--rule-bold) solid var(--color-ink); border-radius: 45% 55% 52% 48%; background: var(--color-paper); box-shadow: var(--space-xs) var(--space-xs) 0 var(--color-ink); transform: rotate(3deg); }
    .character-scene svg { width: 68%; height: 68%; overflow: visible; }
    .result-kicker { position: relative; z-index: var(--z-raised); color: var(--color-ink-2); font-family: var(--font-label); font-size: clamp(.625rem, 2.7vw, var(--text-xs)); font-weight: 500; line-height: 1.4; text-transform: uppercase; }
    .result-name { position: relative; z-index: var(--z-raised); margin-block-start: var(--space-xs); font-size: clamp(1.75rem, 7.5vw, 2.65rem); font-weight: 700; line-height: 1.08; letter-spacing: -.04em; word-break: keep-all; }
    .result-summary { position: relative; z-index: var(--z-raised); margin-block-start: var(--space-md); color: var(--color-ink-2); font-size: clamp(.78rem, 3vw, var(--text-sm)); line-height: 1.55; word-break: keep-all; }
    .role-block { position: relative; z-index: var(--z-raised); margin-block-start: var(--space-md); padding-block-start: var(--space-sm); border-block-start: var(--rule-bold) solid var(--color-ink); }
    .role-label { display: block; font-family: var(--font-label); font-size: clamp(.625rem, 2.5vw, var(--text-xs)); font-weight: 500; text-transform: uppercase; }
    .role-tags { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-xs); margin-block-start: var(--space-xs); }
    .role-tag { font-size: clamp(.7rem, 2.7vw, var(--text-sm)); font-weight: 700; } .role-tag:not(:last-child)::after { content: " ·"; }
    .card-footer { display: flex; position: absolute; inset-inline: clamp(var(--space-lg), 6%, var(--space-xl)); inset-block-end: clamp(var(--space-lg), 5%, var(--space-xl)); z-index: var(--z-raised); align-items: end; justify-content: space-between; gap: var(--space-sm); font-family: var(--font-label); font-size: clamp(.625rem, 2.4vw, var(--text-xs)); font-weight: 500; line-height: 1.45; }
    .card-footer span:last-child { text-align: end; }
    .result-actions { min-width: 0; }
    .result-actions h2 { max-width: 14ch; font-size: clamp(var(--text-xl), 4vw, var(--text-2xl)); font-weight: 700; line-height: 1.12; letter-spacing: -.035em; word-break: keep-all; }
    .result-description { max-width: 60ch; margin-block-start: var(--space-md); color: var(--color-ink-2); word-break: keep-all; }
    .action-stack { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-block-start: var(--space-lg); }
    .btn--soft { --btn-face: var(--color-paper-2); --btn-edge: var(--color-rule-strong); --btn-cast: var(--color-shadow); }
    .btn--cyan { --btn-face: var(--color-accent-2); --btn-edge: var(--color-accent-2-deep); --btn-cast: var(--color-shadow); --btn-ink: var(--color-ink); }
    .event-note { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-sm); max-width: 60ch; margin-block-start: var(--space-lg); padding-block: var(--space-sm); border-block: var(--rule-hair) dashed var(--color-rule-strong); color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.5; }
    .ticket-mark { display: grid; width: 1.75rem; height: 1.75rem; place-items: center; border: var(--rule-bold) solid var(--color-ink); border-radius: var(--radius-input); background: var(--color-accent-3-soft); font-family: var(--font-label); font-size: var(--text-xs); }
    .nest-block { max-width: 60ch; margin-block-start: var(--space-xl); padding-block-start: var(--space-lg); border-block-start: var(--rule-bold) solid var(--color-ink); }
    .nest-block p { margin-block-end: var(--space-md); color: var(--color-ink-2); font-size: var(--text-sm); word-break: keep-all; }
    .restart-row { margin-block-start: var(--space-lg); }

    .foot-stmt { display: grid; gap: var(--space-lg); padding: var(--space-2xl) var(--page-gutter) var(--space-xl); border-block-start: var(--rule-bold) solid var(--color-ink); color: var(--color-ink); background: var(--color-paper-2); }
    body[data-screen="quiz"] .foot-stmt { display: none; }
    .foot-stmt__line { min-width: 0; max-width: 28ch; overflow-wrap: anywhere; font-family: var(--font-display); font-size: clamp(var(--text-xl), 5vw, var(--text-3xl)); font-weight: 700; line-height: 1.08; letter-spacing: -.03em; word-break: keep-all; }
    .foot-stmt__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-lg); padding-block-start: var(--space-sm); border-block-start: var(--rule-hair) solid var(--color-ink); font-family: var(--font-label); font-size: var(--text-xs); letter-spacing: .04em; line-height: 1; text-transform: uppercase; }
    .toast { position: fixed; inset-inline-start: 50%; inset-block-end: max(var(--space-lg), env(safe-area-inset-bottom)); z-index: var(--z-toast); width: max-content; max-width: calc(100% - 2 * var(--space-lg)); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-input); color: var(--color-paper); background: var(--color-error); font-size: var(--text-sm); font-weight: 600; opacity: 0; pointer-events: none; transform: translate(-50%, var(--space-md)); transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
    .toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
    .star-burst { position: fixed; z-index: var(--z-toast); width: 1.5rem; height: 1.5rem; pointer-events: none; animation: burst var(--dur-long) var(--ease-out) forwards; }
    .star-burst::before, .star-burst::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; border-radius: var(--radius-pill); background: var(--color-accent-3); transform: translate(-50%, -50%); }
    .star-burst::before { width: 100%; height: var(--space-2xs); } .star-burst::after { width: var(--space-2xs); height: 100%; }
    @keyframes burst { from { opacity: 1; transform: scale(0) rotate(0); } to { opacity: 0; transform: scale(1.7) rotate(45deg); } }
    .sr-only { position: absolute; width: var(--rule-hair); height: var(--rule-hair); margin: calc(-1 * var(--rule-hair)); padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; white-space: nowrap; }

    @media (min-width: 40rem) {
      .hero { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: var(--space-2xl); }
      .hero-art { min-height: 31rem; }
      .sprout-character { width: 13rem; height: 15rem; }
      .sprout-head { width: 10.5rem; height: 10rem; }
      .sprout-leaf { width: 5.5rem; height: 7rem; }
      .sprout-leaf.left { inset-inline-start: 2rem; }
      .sprout-leaf.right { inset-inline-end: 2rem; }
      .journey-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .journey-item { grid-template-columns: 3rem minmax(0, 1fr); padding-inline-end: var(--space-lg); border-block-end: 0; }
      .journey-item:not(:last-child) { border-inline-end: var(--rule-hair) dashed var(--color-rule-strong); margin-inline-end: var(--space-lg); }
      .question-title { min-height: 2.3em; }
    }
    @media (min-width: 60rem) {
      .hero { gap: var(--space-3xl); } .hero-art { margin-inline-end: calc(-1 * var(--space-xl)); }
      .quiz-layout { grid-template-columns: 8rem minmax(0, 1fr); gap: var(--space-3xl); }
      .step-rail { grid-template-columns: minmax(0, 1fr); align-content: start; }
      .step-dot { grid-template-columns: 2rem minmax(0, 1fr); justify-items: start; align-items: center; min-height: 4rem; }
      .step-dot span { width: 1.75rem; height: 1.75rem; }
      .step-dot:not(:last-child)::after { inset-block-start: calc(50% + .875rem); inset-inline-start: .82rem; width: 0; height: calc(100% - 1.75rem); border-block-start: 0; border-inline-start: var(--rule-bold) solid var(--color-rule); }
      .question-stage { max-width: 46rem; }
      .result-layout { grid-template-columns: minmax(20rem, 27rem) minmax(0, 1fr); gap: var(--space-3xl); }
      .story-card { justify-self: end; margin-inline-end: var(--space-lg); }
    }
    @media (max-width: 24rem) {
      .nav-state { display: none; } .nav-edition { display: inline-flex; align-items: center; justify-self: end; } .nav-slab { grid-template-columns: minmax(0, 1fr) auto; }
      .hero-title { font-size: var(--text-display-s); } .hero-art { min-height: 25rem; transform: rotate(.7deg); }
      .qr-band { grid-template-columns: 5rem minmax(0, 1fr); padding-inline: var(--space-md); } .qr-box { width: 5rem; }
      .answer-button { grid-template-columns: 3rem minmax(0, 1fr) auto; gap: var(--space-sm); } .answer-mark { width: 3rem; height: 3rem; }
      .answer-copy strong { font-size: var(--text-base); } .answer-copy small { font-size: var(--text-xs); }
      .action-stack .btn { width: 100%; } .story-card { box-shadow: var(--space-xs) var(--space-xs) 0 var(--color-ink); }
    }
    @media (hover: none), (pointer: coarse) { .btn, .answer-button, .brand-button, .back-button, .text-button { min-height: 3rem; } }
    @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 150ms !important; animation-iteration-count: 1 !important; transition-duration: 150ms !important; } .star-burst { display: none; } }