:root {
      --space-blue: #3D6FBE;
      --ice-highlight: #78AEFF;
      --deep-space: #1F416F;
      --graphite: #25292D;
      --silver: #E8EBEF;
      --ink: var(--graphite);
      --muted: var(--deep-space);
      --paper: var(--silver);
      --surface: #ffffff;
      --line: rgba(61, 111, 190, 0.22);
      --berry: var(--space-blue);
      --berry-dark: var(--deep-space);
      --teal: var(--deep-space);
      --teal-soft: rgba(61, 111, 190, 0.12);
      --violet: var(--space-blue);
      --violet-soft: rgba(120, 174, 255, 0.18);
      --coral: var(--deep-space);
      --coral-soft: rgba(232, 235, 239, 0.86);
      --blue: var(--space-blue);
      --blue-soft: rgba(120, 174, 255, 0.20);
      --gold: var(--deep-space);
      --gold-soft: rgba(61, 111, 190, 0.10);
      --success: #246b4b;
      --success-soft: #e1f2e9;
      --error: #a33e47;
      --error-soft: #fbe7e9;
      --shadow: 0 16px 46px rgba(31, 65, 111, 0.14);
      --radius: 22px;
      --display: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
      --body: "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
      --utility: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background:
        linear-gradient(rgba(61, 111, 190, 0.055) 1px, transparent 1px),
        var(--paper);
      background-size: 100% 44px;
      font-family: var(--body);
      font-size: 18px;
      line-height: 1.75;
    }

    button, input, textarea { font: inherit; }
    button { cursor: pointer; }
    a { color: inherit; }
    :focus-visible {
      outline: 4px solid rgba(120, 174, 255, 0.58);
      outline-offset: 3px;
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 20;
      border-bottom: 1px solid rgba(61, 111, 190, 0.22);
      background: rgba(232, 235, 239, 0.94);
      backdrop-filter: blur(14px);
    }
    .topbar-inner {
      width: min(1120px, calc(100% - 40px));
      margin: 0 auto;
      min-height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
    }
    .brand {
      display: inline-flex;
      align-items: baseline;
      gap: 14px;
      color: var(--ink);
      font-family: var(--display);
      font-weight: 700;
      letter-spacing: 0.02em;
      text-decoration: none;
    }
    .brand small {
      display: block;
      font-family: var(--utility);
      color: var(--berry);
      font-size: 11px;
      letter-spacing: 0.16em;
      line-height: 1.2;
      text-transform: uppercase;
    }
    .header-tools { display: flex; align-items: center; gap: 18px; }
    .course-link {
      border-bottom: 1px solid var(--ink);
      font-size: 13px;
      font-weight: 800;
      text-decoration: none;
      white-space: nowrap;
    }
    .progress-wrap { display: flex; align-items: center; gap: 11px; }
    .progress-track {
      width: 190px;
      height: 9px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(120, 174, 255, 0.24);
    }
    .progress-fill {
      width: 0;
      height: 100%;
      border-radius: inherit;
      background: var(--berry);
      transition: width 320ms ease;
    }
    .progress-label {
      color: var(--muted);
      font-size: 14px;
      white-space: nowrap;
    }

    main {
      width: min(1120px, calc(100% - 40px));
      margin: 0 auto;
      padding: 0 0 100px;
    }
    .hero {
      display: grid;
      grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr);
      align-items: center;
      gap: clamp(48px, 6vw, 76px);
      padding: 76px 0 84px;
    }
    .eyebrow {
      margin: 0 0 12px;
      color: var(--berry);
      font-family: var(--utility);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }
    h1, h2, h3 {
      font-family: var(--display);
      line-height: 1.25;
      text-wrap: balance;
    }
    h1 {
      max-width: 610px;
      margin: 0;
      font-size: clamp(48px, 5.3vw, 64px);
      letter-spacing: -0.055em;
    }
    .title-line { display: block; white-space: nowrap; }
    h1 em {
      color: var(--berry);
      font-style: normal;
      box-shadow: inset 0 -0.13em 0 rgba(120, 174, 255, 0.42);
    }
    .hero-copy {
      max-width: 560px;
      margin: 24px 0 30px;
      color: var(--muted);
      font-size: 18px;
    }
    .meta-list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin: 0 0 30px;
      padding: 0;
      list-style: none;
    }
    .meta-list li {
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 7px 13px;
      background: rgba(255,255,255,0.72);
      color: var(--muted);
      font-size: 14px;
    }
    .primary, .secondary, .ghost {
      min-height: 50px;
      border-radius: 13px;
      padding: 11px 20px;
      font-weight: 800;
      transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
    }
    .primary {
      border: 1px solid var(--berry);
      background: var(--berry);
      color: #fff;
      box-shadow: 0 9px 22px rgba(61, 111, 190, 0.28);
    }
    .primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(61, 111, 190, 0.34); }
    .secondary {
      border: 1px solid var(--ink);
      background: var(--ink);
      color: #fff;
    }
    .ghost {
      border: 1px solid var(--line);
      background: #fff;
      color: var(--ink);
    }
    .ghost:hover { background: rgba(120, 174, 255, 0.14); }

    .sentence-machine {
      position: relative;
      padding: 34px 24px 26px;
      border: 1px solid var(--line);
      border-radius: 32px;
      background: rgba(255,255,255,0.88);
      box-shadow: var(--shadow);
      transform: rotate(0.7deg);
    }
    .sentence-machine::before {
      content: "SENTENCE RAIL";
      position: absolute;
      top: -14px;
      left: 28px;
      border-radius: 999px;
      padding: 5px 12px;
      background: var(--ink);
      color: #fff;
      font-family: var(--utility);
      font-size: 11px;
      letter-spacing: 0.14em;
    }
    .machine-note {
      margin: 0 0 22px;
      color: var(--muted);
      font-size: 14px;
    }
    .rail {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }
    .rail-piece {
      min-width: 0;
      min-height: 112px;
      border-radius: 16px;
      padding: 16px 12px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      color: var(--ink);
    }
    .rail-piece span {
      font-family: var(--utility);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.1em;
    }
    .rail-piece strong { font-size: 22px; overflow-wrap: anywhere; }
    .rail-piece.who { background: var(--violet-soft); border-bottom: 5px solid var(--violet); }
    .rail-piece.does { background: var(--coral-soft); border-bottom: 5px solid var(--coral); }
    .rail-piece.what { background: var(--teal-soft); border-bottom: 5px solid var(--teal); }
    .machine-example {
      margin: 18px 0 0;
      font-family: var(--utility);
      font-size: 15px;
      text-align: center;
    }

    .step {
      scroll-margin-top: 92px;
      margin-top: 64px;
      padding: clamp(26px, 5vw, 48px);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--surface);
      box-shadow: 0 10px 32px rgba(31, 65, 111, 0.09);
    }
    .step-header {
      display: grid;
      grid-template-columns: 58px 1fr;
      align-items: start;
      gap: 18px;
      margin-bottom: 28px;
    }
    .step-number {
      width: 58px;
      height: 58px;
      display: grid;
      place-items: center;
      border-radius: 17px;
      background: var(--ink);
      color: #fff;
      font-family: var(--utility);
      font-weight: 900;
    }
    .step h2 { margin: 0 0 5px; font-size: clamp(27px, 4vw, 38px); }
    .step-lead { margin: 0; color: var(--muted); }
    .instruction {
      margin: 0 0 18px;
      font-weight: 800;
    }
    .question-card {
      padding: 24px;
      border: 1px solid var(--line);
      border-radius: 17px;
      background: rgba(232, 235, 239, 0.52);
    }
    .question-card + .question-card { margin-top: 18px; }
    .choice-list {
      display: grid;
      gap: 12px;
      margin-top: 15px;
    }
    .choice {
      width: 100%;
      border: 2px solid var(--line);
      border-radius: 14px;
      padding: 15px 17px;
      background: #fff;
      color: var(--ink);
      text-align: left;
    }
    .choice:hover { border-color: var(--space-blue); }
    .choice.correct { border-color: var(--success); background: var(--success-soft); }
    .choice.wrong { border-color: var(--error); background: var(--error-soft); }
    .feedback {
      min-height: 28px;
      margin: 13px 0 0;
      font-weight: 750;
    }
    .feedback.good { color: var(--success); }
    .feedback.retry { color: var(--error); }

    .dialogue {
      display: grid;
      gap: 12px;
      margin: 24px 0;
    }
    .bubble {
      max-width: 690px;
      border-radius: 18px;
      padding: 14px 18px;
      background: rgba(232, 235, 239, 0.72);
    }
    .bubble.answer {
      margin-left: auto;
      background: var(--violet-soft);
    }
    .sentence-line {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      margin: 18px 0;
    }
    .part {
      border-radius: 9px;
      padding: 6px 10px;
      font-family: var(--utility);
      font-size: 16px;
      font-weight: 800;
    }
    .part.who { background: var(--violet-soft); border-bottom: 3px solid var(--violet); }
    .part.does { background: var(--coral-soft); border-bottom: 3px solid var(--coral); }
    .part.what { background: var(--teal-soft); border-bottom: 3px solid var(--teal); }
    .part.where { background: var(--blue-soft); border-bottom: 3px solid var(--blue); }
    .part.when { background: var(--gold-soft); border-bottom: 3px solid var(--gold); }
    .legend {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 16px;
      color: var(--muted);
      font-size: 14px;
    }
    .listen {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 44px;
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 8px 14px;
      background: #fff;
      color: var(--ink);
      font-weight: 750;
    }

    .rule-box {
      margin: 24px 0;
      border-left: 6px solid var(--berry);
      border-radius: 0 18px 18px 0;
      padding: 20px 24px;
      background: rgba(120, 174, 255, 0.18);
    }
    .rule-box strong { color: var(--berry-dark); }
    .rule-box p { margin: 0; }
    .rule-box p + p { margin-top: 8px; }
    .pattern-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-top: 22px;
    }
    .pattern {
      border: 1px solid var(--line);
      border-radius: 17px;
      padding: 21px;
    }
    .pattern-label {
      color: var(--berry);
      font-family: var(--utility);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.11em;
    }
    .pattern h3 { margin: 8px 0 12px; font-size: 22px; }
    .pattern p { margin: 8px 0; }
    .note {
      margin-top: 20px;
      color: var(--muted);
      font-size: 15px;
    }

    .builder {
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 22px;
      background: rgba(232, 235, 239, 0.42);
    }
    .builder + .builder { margin-top: 22px; }
    .builder-count {
      color: var(--berry);
      font-family: var(--utility);
      font-size: 13px;
      font-weight: 900;
    }
    .answer-rail {
      min-height: 66px;
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
      align-items: center;
      margin: 15px 0;
      border: 2px dashed rgba(61, 111, 190, 0.45);
      border-radius: 14px;
      padding: 12px;
      background: #fff;
    }
    .answer-rail:empty::before {
      content: "下のカードを順番に押してください";
      color: var(--deep-space);
      font-size: 14px;
    }
    .token-bank {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
    }
    .token {
      border: 1px solid rgba(61, 111, 190, 0.45);
      border-radius: 11px;
      padding: 8px 12px;
      background: #fff;
      color: var(--ink);
      font-family: var(--utility);
      font-size: 15px;
      font-weight: 800;
    }
    .token[disabled] { opacity: 0.28; cursor: default; }
    .builder-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 18px;
    }

    .translation-grid { display: grid; gap: 16px; }
    .translation {
      border: 1px solid var(--line);
      border-radius: 17px;
      padding: 20px;
    }
    .translation label { display: block; margin-bottom: 10px; font-weight: 800; }
    .text-answer, .personal-input {
      width: 100%;
      border: 2px solid rgba(61, 111, 190, 0.32);
      border-radius: 12px;
      padding: 12px 14px;
      background: #fff;
      color: var(--ink);
    }
    .text-answer:focus, .personal-input:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 4px rgba(120, 174, 255, 0.30); }
    .model-answer {
      display: none;
      margin: 13px 0 0;
      border-radius: 11px;
      padding: 12px 14px;
      background: var(--success-soft);
      color: var(--success);
      font-family: var(--utility);
      font-weight: 800;
    }
    .model-answer.visible { display: block; }
    .inline-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

    .mission {
      position: relative;
      overflow: hidden;
      border-color: rgba(61, 111, 190, 0.38);
      background: linear-gradient(145deg, #ffffff, rgba(120, 174, 255, 0.12));
    }
    .mission::after {
      content: "USE";
      position: absolute;
      right: -16px;
      top: 12px;
      color: rgba(61, 111, 190, 0.07);
      font-family: var(--utility);
      font-size: 124px;
      font-weight: 900;
      letter-spacing: -0.08em;
      pointer-events: none;
    }
    .personal-grid {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 15px;
      margin: 24px 0;
    }
    .personal-row {
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 17px;
      background: rgba(255,255,255,0.88);
    }
    .personal-row label { display: block; margin-bottom: 8px; font-weight: 800; }
    .hint { color: var(--muted); font-size: 14px; }
    .timer-box {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 110px 1fr;
      align-items: center;
      gap: 20px;
      margin-top: 25px;
      border-radius: 18px;
      padding: 20px;
      background: var(--ink);
      color: #fff;
    }
    .timer {
      font-family: var(--utility);
      font-size: 36px;
      font-weight: 900;
      text-align: center;
    }
    .timer-copy p { margin: 0 0 10px; }
    .timer-box .ghost { border-color: rgba(255,255,255,0.38); background: transparent; color: #fff; }
    .timer-box .ghost:hover { background: rgba(255,255,255,0.1); }

    .summary {
      display: none;
      margin-top: 28px;
      border: 1px solid #a8d0bb;
      border-radius: 18px;
      padding: 24px;
      background: var(--success-soft);
    }
    .summary.visible { display: block; }
    .summary h3 { margin: 0 0 10px; }
    .summary ul { margin: 10px 0 0; padding-left: 1.3em; }
    .next-review {
      margin-top: 24px;
      border-radius: 16px;
      padding: 18px 20px;
      background: var(--blue-soft);
    }
    .next-review strong { color: var(--deep-space); }

    .course-return {
      margin-top: 64px;
      border: 1px solid var(--line);
      border-radius: 22px;
      padding: 28px 30px;
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 28px;
      background: rgba(255,255,255,0.82);
    }
    .course-return h2 { margin: 0 0 6px; font-size: 26px; }
    .course-return p { margin: 0; color: var(--muted); font-size: 15px; }
    .course-return a { white-space: nowrap; text-decoration: none; }

    footer {
      width: min(1120px, calc(100% - 40px));
      margin: 0 auto;
      padding: 0 0 54px;
      color: var(--muted);
      font-size: 14px;
      text-align: center;
    }

    @media (max-width: 820px) {
      .progress-track { width: 120px; }
      .hero { grid-template-columns: 1fr; gap: 42px; padding: 58px 0 68px; }
      .sentence-machine { transform: none; }
      .pattern-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 560px) {
      body { font-size: 17px; }
      main { width: calc(100% - 24px); }
      .topbar-inner { width: calc(100% - 24px); min-height: 62px; gap: 12px; }
      .brand { display: grid; gap: 0; font-size: 15px; line-height: 1.25; }
      .brand small { font-size: 9px; }
      .header-tools { gap: 10px; }
      .course-link { font-size: 11px; }
      .progress-track { display: none; }
      .progress-label { font-size: 12px; }
      .hero { padding: 40px 0 54px; gap: 32px; }
      h1 { font-size: clamp(39px, 10.7vw, 48px); }
      .title-line { white-space: normal; text-wrap: balance; }
      .hero-copy { margin-top: 20px; font-size: 17px; }
      .meta-list { margin-bottom: 24px; }
      .rail { gap: 6px; }
      .rail-piece { min-height: 96px; padding: 12px 8px; }
      .rail-piece strong { font-size: 17px; }
      .step { margin-top: 38px; padding: 24px 18px; border-radius: 18px; }
      .step-header { grid-template-columns: 45px 1fr; gap: 12px; }
      .step-number { width: 45px; height: 45px; border-radius: 13px; }
      .question-card, .builder { padding: 17px; }
      .timer-box { grid-template-columns: 1fr; text-align: center; }
      .mission::after { font-size: 84px; }
      .course-return { grid-template-columns: 1fr; padding: 24px 20px; }
      .course-return > * { min-width: 0; }
      .course-return .inline-actions { width: 100%; display: grid; }
      .course-return a { width: 100%; text-align: center; white-space: normal; overflow-wrap: anywhere; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
    }

/* YUJIEIGO Visual Language · 2026-08-26 */
    :root {
      --white: #FFFFFF;
      --font-ja: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
      --font-latin: Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
      --body: var(--font-ja);
      --display: var(--font-ja);
      --utility: var(--font-latin);
      --text-secondary: rgba(37, 41, 45, 0.76);
      --line: rgba(31, 65, 111, 0.18);
      --shadow: 0 24px 70px rgba(31, 65, 111, 0.15);
      --radius: 22px;
    }

    html { background: var(--silver); }
    body {
      min-width: 320px;
      background: var(--silver);
      color: var(--graphite);
      font-family: var(--font-ja);
      font-size: 18px;
      font-weight: 500;
      line-height: 1.8;
      letter-spacing: 0.01em;
    }
    h1, h2, h3 { font-family: var(--font-ja); letter-spacing: 0; }
    h1 { font-weight: 900; line-height: 1.16; }
    h2, h3 { font-weight: 700; }
    button, input, textarea { font-family: inherit; font-weight: 500; }
    button { font-weight: 700; }
    :focus-visible {
      outline: 4px solid var(--ice-highlight);
      outline-offset: 4px;
      box-shadow: 0 0 0 7px rgba(120, 174, 255, 0.2);
    }
    .skip-link {
      position: fixed;
      top: 10px;
      left: 10px;
      z-index: 100;
      padding: 10px 16px;
      border-radius: 10px;
      background: var(--graphite);
      color: var(--white);
      font-weight: 700;
      text-decoration: none;
      transform: translateY(-160%);
    }
    .skip-link:focus { transform: translateY(0); }

    .topbar {
      border-bottom: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.94);
      box-shadow: 0 8px 30px rgba(31, 65, 111, 0.06);
    }
    .topbar-inner { width: min(1120px, calc(100% - 48px)); min-height: 76px; }
    .brand {
      align-items: center;
      color: var(--graphite);
      font-family: var(--font-ja);
      font-weight: 700;
      letter-spacing: 0;
    }
    .brand small {
      color: var(--deep-space);
      font-family: var(--font-latin);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.15em;
    }
    .course-link {
      border: 0;
      border-radius: 0;
      border-bottom: 3px solid var(--space-blue);
      border-radius: 999px;
      padding: 8px 12px;
      color: var(--deep-space);
      font-size: 13px;
      font-weight: 700;
    }
    .course-link:hover { background: rgba(61, 111, 190, 0.1); }
    .progress-track { height: 10px; background: rgba(31, 65, 111, 0.16); }
    .progress-fill {
      background: linear-gradient(90deg, var(--space-blue), var(--ice-highlight));
      box-shadow: 0 0 14px rgba(120, 174, 255, 0.6);
    }
    .progress-label { color: var(--deep-space); font-family: var(--font-latin); font-weight: 700; }

    main { width: min(1120px, calc(100% - 48px)); padding-bottom: 110px; }
    .hero {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      grid-template-columns: minmax(0, 1.08fr) minmax(350px, 0.92fr);
      gap: clamp(42px, 5vw, 70px);
      margin-top: 30px;
      border-radius: 32px;
      padding: clamp(44px, 5.5vw, 68px);
      background: linear-gradient(135deg, var(--graphite) 0%, var(--deep-space) 100%);
      color: var(--white);
      box-shadow: 0 30px 80px rgba(31, 65, 111, 0.22);
    }
    .hero::before {
      content: "";
      position: absolute;
      z-index: -1;
      width: 390px;
      height: 390px;
      right: -160px;
      top: -220px;
      border: 1px solid rgba(120, 174, 255, 0.32);
      border-radius: 50%;
      box-shadow: 0 0 80px rgba(120, 174, 255, 0.16);
    }
    .eyebrow {
      color: var(--ice-highlight);
      font-family: var(--font-latin);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.16em;
    }
    h1 { max-width: 650px; font-size: clamp(2.65rem, 5.2vw, 4rem); }
    h1 em { color: var(--white); box-shadow: inset 0 -0.12em 0 rgba(120, 174, 255, 0.52); }
    .hero-copy { color: var(--silver); font-size: 18px; font-weight: 500; }
    .meta-list li {
      border-color: rgba(255, 255, 255, 0.24);
      background: rgba(255, 255, 255, 0.08);
      color: var(--silver);
      font-size: 13px;
      font-weight: 500;
    }
    .primary, .secondary, .ghost { min-height: 52px; border-radius: 13px; font-weight: 700; text-decoration: none; }
    .primary {
      border-color: var(--space-blue);
      background: var(--space-blue);
      color: var(--white);
      font-size: 19px;
      box-shadow: 0 0 0 1px rgba(120, 174, 255, 0.42), 0 12px 30px rgba(61, 111, 190, 0.34);
    }
    .secondary { border-color: var(--deep-space); background: var(--deep-space); color: var(--white); }
    .ghost { border-color: rgba(61, 111, 190, 0.4); background: var(--white); color: var(--deep-space); }
    .ghost:hover { background: rgba(61, 111, 190, 0.08); }

    .sentence-machine {
      border: 1px solid rgba(120, 174, 255, 0.48);
      border-radius: 26px;
      background: rgba(37, 41, 45, 0.38);
      box-shadow: 0 0 50px rgba(120, 174, 255, 0.13);
      transform: none;
      backdrop-filter: blur(12px);
    }
    .sentence-machine::before { border: 1px solid rgba(120, 174, 255, 0.5); background: var(--deep-space); font-family: var(--font-latin); font-weight: 700; }
    .machine-note { color: var(--silver); }
    .rail-piece {
      border: 1px solid rgba(120, 174, 255, 0.22);
      color: var(--white);
    }
    .rail-piece span { color: var(--ice-highlight); font-family: var(--font-latin); font-weight: 700; }
    .rail-piece strong { font-family: var(--font-latin); font-weight: 700; }
    .rail-piece.who, .rail-piece.does, .rail-piece.what, .rail-piece.where, .rail-piece.when {
      border-bottom: 4px solid var(--ice-highlight);
      background: rgba(61, 111, 190, 0.18);
    }
    .rail-piece.does { background: rgba(61, 111, 190, 0.34); }
    .rail-piece.what, .rail-piece.where, .rail-piece.when { background: rgba(31, 65, 111, 0.58); }
    .machine-example { color: var(--white); font-family: var(--font-latin); font-weight: 600; }

    .step {
      position: relative;
      margin-top: 44px;
      border: 1px solid var(--line);
      border-left: 6px solid var(--deep-space);
      border-radius: var(--radius);
      background: var(--white);
      box-shadow: 0 16px 48px rgba(31, 65, 111, 0.08);
    }
    .step-header { grid-template-columns: 56px 1fr; }
    .step-number {
      width: 56px;
      height: 56px;
      border-radius: 16px;
      background: var(--deep-space);
      font-family: var(--font-latin);
      font-weight: 700;
    }
    .step h2 { color: var(--deep-space); font-size: clamp(1.75rem, 3.3vw, 2.4rem); }
    .step-lead, .note, .hint { color: var(--text-secondary); }
    .instruction { color: var(--graphite); font-weight: 700; }
    .question-card, .builder { border-color: var(--line); background: rgba(232, 235, 239, 0.62); }
    .choice {
      border-color: rgba(31, 65, 111, 0.2);
      background: var(--white);
      color: var(--graphite);
      font-weight: 500;
    }
    .choice:hover { border-color: var(--space-blue); box-shadow: 0 0 0 3px rgba(120, 174, 255, 0.2); }
    .choice.correct { border-color: var(--success); background: var(--success-soft); }
    .choice.wrong { border-color: var(--error); background: var(--error-soft); }

    .bubble { background: rgba(232, 235, 239, 0.78); color: var(--graphite); }
    .bubble.answer { border-left: 4px solid var(--space-blue); background: rgba(61, 111, 190, 0.1); }
    .listen { border-color: rgba(61, 111, 190, 0.42); background: var(--white); color: var(--deep-space); font-weight: 700; }
    .listen:hover { border-color: var(--space-blue); background: rgba(61, 111, 190, 0.08); }
    .part {
      border: 1px solid rgba(31, 65, 111, 0.16);
      background: var(--silver);
      color: var(--graphite);
      font-family: var(--font-latin);
      font-weight: 700;
    }
    .part.who, .part.does, .part.what, .part.where, .part.when {
      border-bottom: 3px solid var(--space-blue);
      background: rgba(232, 235, 239, 0.9);
    }
    .part.does { background: rgba(120, 174, 255, 0.18); }
    .legend { color: var(--text-secondary); }

    .rule-box { border-left-color: var(--space-blue); background: rgba(120, 174, 255, 0.16); }
    .rule-box strong { color: var(--deep-space); }
    .pattern { border-color: var(--line); background: var(--white); }
    .pattern-label, .builder-count { color: var(--deep-space); font-family: var(--font-latin); font-weight: 700; }
    .pattern h3 { color: var(--deep-space); }
    .answer-rail { border-color: rgba(61, 111, 190, 0.42); background: var(--white); }
    .answer-rail:empty::before { color: var(--text-secondary); }
    .token {
      border-color: rgba(61, 111, 190, 0.34);
      background: var(--white);
      color: var(--deep-space);
      font-family: var(--font-latin);
      font-weight: 700;
    }
    .token:hover { border-color: var(--space-blue); background: rgba(120, 174, 255, 0.13); }

    .translation { border-color: var(--line); background: var(--white); }
    .translation label, .personal-row label { font-weight: 700; }
    .text-answer, .personal-input {
      border-color: rgba(31, 65, 111, 0.24);
      background: var(--white);
      color: var(--graphite);
      font-size: 17px;
      font-weight: 500;
    }
    .text-answer:focus, .personal-input:focus { border-color: var(--space-blue); box-shadow: 0 0 0 4px rgba(120, 174, 255, 0.32); }
    .model-answer { font-family: var(--font-latin); font-weight: 600; }

    .mission {
      border: 1px solid rgba(120, 174, 255, 0.4);
      border-left: 6px solid var(--ice-highlight);
      background: linear-gradient(135deg, var(--graphite), var(--deep-space));
      color: var(--white);
      box-shadow: 0 26px 70px rgba(31, 65, 111, 0.2);
    }
    .mission::after { color: rgba(120, 174, 255, 0.08); font-family: var(--font-latin); }
    .mission .step-number { background: var(--space-blue); box-shadow: 0 0 18px rgba(120, 174, 255, 0.34); }
    .mission h2 { color: var(--white); }
    .mission .step-lead, .mission .hint { color: var(--silver); }
    .personal-row { border-color: rgba(120, 174, 255, 0.24); background: rgba(255, 255, 255, 0.96); color: var(--graphite); }
    .timer-box { border: 1px solid rgba(120, 174, 255, 0.28); background: rgba(37, 41, 45, 0.52); }
    .timer { color: var(--ice-highlight); font-family: var(--font-latin); font-weight: 700; text-shadow: 0 0 18px rgba(120, 174, 255, 0.44); }
    .timer-box .ghost { border-color: rgba(120, 174, 255, 0.48); background: transparent; color: var(--white); }
    .mission .listen { border-color: rgba(120, 174, 255, 0.44); background: rgba(255, 255, 255, 0.08); color: var(--white); }
    .summary { color: var(--graphite); }
    .summary h3 { color: var(--deep-space); }
    .next-review { background: rgba(120, 174, 255, 0.18); }

    .course-return { border-color: var(--line); background: var(--white); box-shadow: 0 14px 42px rgba(31, 65, 111, 0.07); }
    .course-return h2 { color: var(--deep-space); }
    .course-return p { color: var(--text-secondary); }
    footer { color: var(--text-secondary); font-weight: 500; }

    @media (max-width: 820px) {
      .hero { grid-template-columns: 1fr; }
    }
    @media (max-width: 560px) {
      body { font-size: 17px; }
      main, .topbar-inner { width: calc(100% - 24px); }
      .brand small { font-size: 8px; }
      .hero { margin-top: 18px; border-radius: 24px; padding: 36px 22px; }
      .hero::before { right: -280px; }
      h1 { font-size: clamp(2.35rem, 11.5vw, 3rem); }
      .hero-copy { font-size: 17px; }
      .sentence-machine { padding: 30px 18px 22px; }
      .step { border-left-width: 4px; padding: 24px 18px; }
      .step-header { grid-template-columns: 44px 1fr; }
      .step-number { width: 44px; height: 44px; border-radius: 13px; }
      .step h2 { font-size: 1.65rem; }
      .question-card, .builder, .translation { padding: 17px; }
      .primary, .secondary, .ghost { width: 100%; text-align: center; }
      .listen { width: auto; }
      .mission .inline-actions { display: grid; }
      .mission .listen { width: 100%; justify-content: center; }
    }
    @media (prefers-reduced-motion: reduce) {
      .skip-link, .primary, .secondary, .ghost, .choice, .token { transition: none !important; }
    }