:root {
    color-scheme: light;
    --bg: #f5f1e8;
    --bg-panel: rgba(255, 252, 245, 0.94);
    --bg-panel-strong: rgba(255, 252, 245, 0.98);
    --bg-soft: rgba(140, 29, 24, 0.06);
    --line: rgba(33, 28, 23, 0.16);
    --line-strong: rgba(33, 28, 23, 0.34);
    --text: #171310;
    --muted: #655b53;
    --accent: #8b1e14;
    --accent-soft: #efe0da;
    --accent-contrast: #fff8f4;
    --ink: #202635;
    --gold: #b98933;
    --gold-soft: #ead9b9;
    --stroke-done: #171310;
    --stroke-current: #a22216;
    --stroke-pending: #d4cdc2;
    --stroke-number: rgba(23, 19, 16, 0.55);
    --shadow: 0 18px 50px rgba(38, 26, 20, 0.08);
    --radius: 8px;
    --font-sans: "IBM Plex Sans", "Avenir Next", "Noto Sans", "Noto Sans JP", sans-serif;
    --font-display: "Sora", "Avenir Next", "Noto Sans JP", sans-serif;
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #280806;
    --bg-panel: rgba(11, 11, 13, 0.92);
    --bg-panel-strong: rgba(8, 8, 10, 0.98);
    --bg-soft: rgba(163, 35, 24, 0.2);
    --line: rgba(255, 238, 228, 0.1);
    --line-strong: rgba(255, 238, 228, 0.24);
    --text: #f6ece5;
    --muted: #c8b3a6;
    --accent: #c53a2b;
    --accent-soft: rgba(197, 58, 43, 0.14);
    --accent-contrast: #fff3ee;
    --ink: #f7f1ea;
    --gold: #d59b4d;
    --gold-soft: #5a381c;
    --stroke-done: #f6ece5;
    --stroke-current: #ff6b59;
    --stroke-pending: rgba(246, 236, 229, 0.18);
    --stroke-number: rgba(246, 236, 229, 0.58);
    --shadow: 0 20px 56px rgba(0, 0, 0, 0.42);
  }

  * {
    box-sizing: border-box;
  }

  html {
    background: var(--bg);
  }

  html.has-topbar-dialog,
  html.has-topbar-dialog body {
    overflow: hidden;
  }

  body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    font-family: var(--font-sans);
    background:
      linear-gradient(90deg, rgba(139, 30, 20, 0.05) 0, rgba(139, 30, 20, 0.05) 1px, transparent 1px, transparent 120px),
      linear-gradient(rgba(33, 28, 23, 0.035) 0, rgba(33, 28, 23, 0.035) 1px, transparent 1px, transparent 120px),
      radial-gradient(circle at 85% 12%, rgba(185, 137, 51, 0.15), transparent 18%),
      linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 88%, black 12%) 100%);
  }

  :root[data-theme="dark"] body {
    background:
      linear-gradient(90deg, rgba(197, 58, 43, 0.06) 0, rgba(197, 58, 43, 0.06) 1px, transparent 1px, transparent 120px),
      linear-gradient(rgba(255, 241, 232, 0.03) 0, rgba(255, 241, 232, 0.03) 1px, transparent 1px, transparent 120px),
      radial-gradient(circle at 18% 10%, rgba(197, 58, 43, 0.22), transparent 18%),
      radial-gradient(circle at 88% 14%, rgba(213, 155, 77, 0.14), transparent 16%),
      linear-gradient(180deg, #2b0806 0%, #120304 100%);
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  .skip-link {
    position: fixed;
    left: 12px;
    top: 12px;
    z-index: 1000;
    transform: translateY(-140%);
    padding: 10px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    background: var(--bg-panel-strong);
    color: var(--text);
    font-weight: 800;
    box-shadow: var(--shadow);
    transition: transform 160ms ease;
  }

  .skip-link:focus {
    transform: translateY(0);
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  img {
    max-width: 100%;
  }

  [hidden] {
    display: none !important;
  }

  .shell {
    width: 100%;
  }

.page-content {
 max-width: 1260px;
 margin: 0 auto;
 padding: 24px 20px 40px;
}

.ad-slot {
 width: 100%;
 margin: 16px 0;
 padding: 12px 0;
 display: block;
 overflow: hidden;
 text-align: center;
}

.ad-slot--responsive {
 min-height: 74px;
}

.ad-slot--inline {
 min-height: 274px;
}

.ad-slot--related {
 min-height: 120px;
 margin-top: 24px;
 margin-bottom: 24px;
}

.ad-slot--top {
 margin-top: 6px;
 margin-bottom: 18px;
}

@media (min-width: 768px) {
 .ad-slot--responsive {
  min-height: 114px;
 }
}

@media (max-width: 767px) {
 .ad-slot--responsive,
 .ad-slot--inline {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
 }
}

.topbar {
 position: sticky;
    top: 0;
    z-index: 20;
    width: 100%;
    overflow: clip;
    margin-bottom: 0;
    padding: 0;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg-panel-strong) 96%, white 4%);
    backdrop-filter: blur(14px);
  }

.topbar-track {
 width: 100%;
 max-width: 1440px;
 margin: 0 auto;
 display: flex;
 align-items: center;
 flex-wrap: nowrap;
 gap: 20px;
 padding: 14px 20px;
 min-width: 0;
 overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 20px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .topbar-track::-webkit-scrollbar {
    display: none;
  }

  .panel,
  .hero-panel,
  .stat-card,
  .directory-card,
  .plan-card,
  .feature-card,
  .empty-state {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg-panel);
    box-shadow: var(--shadow);
  }

  .brand-block,
  .nav-strip,
  .action-strip {
    min-height: auto;
    display: flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

.brand-block {
 gap: 10px;
 flex: 0 0 auto;
 min-width: max-content;
}

  .nav-strip,
  .action-strip {
    gap: 8px;
  }

.topbar-nav {
 flex: 1 1 auto;
 min-width: 0;
}

  .action-form {
    margin: 0;
  }

  .utility-strip,
  .account-strip {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: max-content;
    gap: 8px;
  }

  .topbar-search {
    flex: 0 0 auto;
    min-width: max-content;
  }

  .search-summary {
    width: 44px;
    min-width: 44px;
    padding-inline: 0;
    list-style: none;
    gap: 0;
    justify-content: center;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }

  .search-summary::-webkit-details-marker {
    display: none;
  }

  .search-summary[aria-expanded="true"],
  .locale-summary[aria-expanded="true"] {
    border-color: var(--line-strong);
    background: color-mix(in srgb, var(--bg-panel) 78%, var(--accent-soft) 22%);
  }

  .search-toggle-icon {
    width: 20px;
    height: 20px;
    display: block;
    fill: none;
    stroke: currentColor;
  }

  .topbar-search-menu input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 46px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    padding: 0 10px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
  }

  .topbar-search-menu .action-button {
    min-height: 46px;
    padding-inline: 12px;
  }

  .brand-block,
  .nav-link,
  .action-button,
  .theme-toggle,
  .locale-summary,
  .locale-link,
  .progress-link,
  .directory-card {
    cursor: pointer;
  }

.nav-strip {
 justify-content: center;
 flex: 1 1 auto;
 min-width: 0;
 flex-wrap: nowrap;
 overflow-x: auto;
    scrollbar-width: none;
  }

  .nav-strip::-webkit-scrollbar {
    display: none;
  }

.action-strip {
 flex: 0 0 auto;
 min-width: max-content;
 justify-content: flex-end;
 flex-wrap: nowrap;
}

  .progress-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 1 clamp(11rem, 24vw, 17.5rem);
    width: clamp(11rem, 24vw, 17.5rem);
    min-width: 11rem;
    padding: 8px 12px;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: visible;
    background: rgba(104, 97, 88, 0.12);
  }

  .progress-head {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  .progress-name {
    display: block;
    position: relative;
    z-index: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
  }

  .progress-level,
  .progress-foot {
    position: relative;
    z-index: 1;
    color: color-mix(in srgb, var(--text) 78%, var(--muted) 22%);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
  }

  .progress-track {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit;
    background: rgba(104, 97, 88, 0.10);
  }

  .progress-bar {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #1f8f58 0%, #57c883 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  }

  .brand-mark {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-strong);
    color: var(--accent);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.08em;
  }

  .brand-copy strong,
  .section-title,
  h1,
  h2,
  h3 {
    font-family: var(--font-display);
  }

  .brand-copy strong {
    display: block;
    font-size: 0.98rem;
    letter-spacing: 0.04em;
    text-transform: none;
    white-space: nowrap;
  }

  .brand-copy span {
    display: block;
    margin-top: 2px;
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 800;
    white-space: nowrap;
  }

  .nav-link,
  .action-button,
  .theme-toggle,
  .locale-summary,
  .locale-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-weight: 600;
    white-space: nowrap;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
  }

  :where(a, button, summary, input, select, textarea) {
    touch-action: manipulation;
    -webkit-tap-highlight-color: color-mix(in srgb, var(--accent) 18%, transparent);
  }

  :where(a, button, summary, input, select, textarea):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 72%, white 28%);
    outline-offset: 3px;
  }

  :where(h1, h2, h3, h4, h5, h6) {
    scroll-margin-top: 92px;
  }

  .nav-link:hover,
  .action-button:hover,
  .theme-toggle:hover,
  .locale-summary:hover,
  .locale-link:hover {
    border-color: var(--line-strong);
    background: color-mix(in srgb, var(--bg-panel) 78%, var(--accent-soft) 22%);
  }

  .nav-link.is-active {
    border-color: var(--line-strong);
    background: color-mix(in srgb, var(--bg-panel) 80%, var(--accent-soft) 20%);
  }

  @media (pointer: coarse) {
    .brand-block,
    .nav-link,
    .action-button,
    .theme-toggle,
    .locale-summary,
    .progress-link,
    .tag,
    .footer-nav a,
    .breadcrumb a,
    .pagination a {
      min-height: 44px;
    }

    .footer-nav a,
    .breadcrumb a,
    .pagination a {
      display: inline-flex;
      align-items: center;
    }
  }

  .action-button.is-disabled {
    cursor: not-allowed;
    opacity: 0.42;
  }

  .pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    color: var(--muted);
  }

  .pagination-actions {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .pagination-current,
  .pagination-count {
    font-weight: 700;
  }

  .table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-panel) 94%, transparent);
  }

  .table-wrap table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
  }

  .table-wrap th,
  .table-wrap td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
  }

  .table-wrap th {
    color: var(--accent);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .table-wrap tr:last-child td {
    border-bottom: 0;
  }

  .directory-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    padding: 14px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .directory-filters > .section-kicker {
    justify-self: start;
  }

  .filter-row {
    display: flex;
    flex-wrap: wrap;
    grid-column: 2;
    justify-content: center;
    gap: 8px;
  }

  .filter-row .tag {
    text-decoration: none;
  }

  .filter-row .tag.is-active {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--accent-contrast);
  }

  .search-form {
    display: flex;
    gap: 10px;
    margin: 18px 0 0;
  }

  .search-form input {
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    padding: 0 14px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
  }

  .search-form input:focus {
    outline: 2px solid color-mix(in srgb, var(--accent) 42%, transparent);
    outline-offset: 2px;
  }

  .theme-toggle {
    cursor: pointer;
    background: transparent;
    color: var(--text);
    font: inherit;
  }

  .theme-icon-sun,
  .theme-icon-moon {
    width: 18px;
    height: 18px;
    display: block;
    fill: currentColor;
    pointer-events: none;
  }

  .theme-toggle-label-dark {
    display: none;
  }

  :root[data-theme="dark"] .theme-toggle-label-light {
    display: none;
  }

  :root[data-theme="dark"] .theme-toggle-label-dark {
    display: inline;
  }

  :root[data-theme="dark"] .theme-icon-sun {
    display: block;
  }

  :root[data-theme="dark"] .theme-icon-moon {
    display: none;
  }

  :root:not([data-theme="dark"]) .theme-icon-sun {
    display: none;
  }

  :root:not([data-theme="dark"]) .theme-icon-moon {
    display: block;
  }

  .action-primary {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--accent-contrast);
  }

  .action-secondary {
    border-color: var(--line-strong);
    background: color-mix(in srgb, var(--bg-panel) 92%, transparent);
    color: var(--text);
  }

  .action-secondary:hover {
    border-color: var(--line-strong);
    background: color-mix(in srgb, var(--bg-panel) 78%, var(--accent-soft) 22%);
    color: var(--text);
  }

  .action-primary:hover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 88%, black 12%);
  }

  .main-grid,
  .hero-grid,
  .split-grid,
  .directory-grid,
  .plan-grid,
  .stats-grid,
  .language-grid {
    display: grid;
    gap: 16px;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  }

  .split-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .directory-grid,
  .plan-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .language-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  .plans-preview-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
  }

  .sales-compare,
  .sales-steps,
  .faq-list {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .sales-list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding-left: 18px;
  }

  .sales-list li {
    color: var(--muted);
    line-height: 1.7;
  }

  .sales-card,
  .faq-card {
    display: grid;
    gap: 12px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--bg-panel) 96%, transparent);
  }

  .sales-card--contrast {
    background: color-mix(in srgb, var(--accent-soft) 55%, var(--bg-panel));
  }

  .sales-card h3,
  .faq-card h3 {
    margin: 0;
    font-size: clamp(1.12rem, 2vw, 1.4rem);
  }

  .sales-page {
    color-scheme: light;
    --bg: #f5f1e8;
    --bg-panel: rgba(255, 252, 245, 0.94);
    --bg-panel-strong: rgba(255, 252, 245, 0.98);
    --bg-soft: rgba(140, 29, 24, 0.06);
    --line: rgba(33, 28, 23, 0.16);
    --line-strong: rgba(33, 28, 23, 0.34);
    --text: #171310;
    --muted: #655b53;
    --accent: #8b1e14;
    --accent-soft: #efe0da;
    --accent-contrast: #fff8f4;
    --ink: #202635;
    --gold: #b98933;
    --shadow: 0 18px 50px rgba(38, 26, 20, 0.08);
    display: grid;
    gap: 16px;
    color: var(--text);
    font-family: "MuseoSansRounded", "Museo Sans Rounded", "Avenir Next", "Noto Sans Japanese", var(--font-sans);
  }

  @media (prefers-reduced-motion: no-preference) {
    .reveal-ready [data-reveal] {
      opacity: 0;
      transform: translate3d(0, 28px, 0) scale(0.985);
      transition:
        opacity 720ms cubic-bezier(0.2, 1, 0.22, 1),
        transform 720ms cubic-bezier(0.2, 1, 0.22, 1);
      transition-delay: var(--reveal-delay, 0ms);
      will-change: opacity, transform;
    }

    .reveal-ready [data-reveal][data-reveal-direction="left"] {
      transform: translate3d(-42px, 24px, 0) scale(0.98);
    }

    .reveal-ready [data-reveal][data-reveal-direction="right"] {
      transform: translate3d(42px, 24px, 0) scale(0.98);
    }

    .reveal-ready [data-reveal][data-reveal-direction="up"] {
      transform: translate3d(0, 44px, 0) scale(0.98);
    }

    .reveal-ready [data-reveal].is-visible {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
    }
  }

  .sales-hero-redesign {
    position: relative;
    display: grid;
    gap: clamp(24px, 5vw, 44px);
    justify-items: center;
    padding: clamp(32px, 6vw, 70px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background:
      radial-gradient(circle at 20% 12%, color-mix(in srgb, var(--accent-soft) 60%, transparent), transparent 28%),
      radial-gradient(circle at 80% 0%, rgba(255, 189, 90, 0.18), transparent 24%),
      color-mix(in srgb, var(--bg-panel) 96%, transparent);
    overflow: hidden;
  }

  .sales-hero-shell {
    position: relative;
    z-index: 1;
    display: grid;
    gap: clamp(28px, 5vw, 52px);
    grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.9fr);
    align-items: center;
    width: 100%;
  }

  .sales-hero-copy {
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 18px;
    min-width: 0;
    text-align: left;
  }

  .sales-hero-copy h1 {
    margin: 0;
    color: #0d5365;
    font-size: clamp(2.45rem, 6vw, 5.15rem);
    line-height: 0.96;
    letter-spacing: 0;
  }

  .sales-hero-copy .lead {
    margin: 0;
    color: #385963;
    font-size: clamp(1rem, 1.7vw, 1.2rem);
    line-height: 1.62;
  }

  .sales-hero-redesign .cta-row {
    justify-content: flex-start;
  }

  .sales-hero-showcase {
    position: relative;
    min-height: 430px;
    width: 100%;
  }

  .sales-hero-showcase::before,
  .sales-hero-showcase::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(2px);
  }

  .sales-hero-showcase::before {
    inset: 10% auto auto 8%;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(13, 141, 172, 0.14), transparent 70%);
  }

  .sales-hero-showcase::after {
    inset: auto 10% 6% auto;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(224, 123, 52, 0.16), transparent 72%);
  }

  .sales-showcase-layer {
    position: absolute;
    width: min(100%, 290px);
  }

  .sales-showcase-layer--primary {
    inset: 2% auto auto 0;
  }

  .sales-showcase-layer--secondary {
    inset: 20% 0 auto auto;
  }

  .sales-showcase-layer--tertiary {
    inset: auto auto 0 12%;
  }

  .sales-showcase-card {
    --card-rotate: -6deg;
    position: relative;
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(23, 50, 58, 0.14);
    border-radius: 26px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 248, 240, 0.9)),
      color-mix(in srgb, var(--bg-panel) 94%, transparent);
    box-shadow: 0 28px 56px rgba(18, 78, 96, 0.16);
    transform: rotate(var(--card-rotate));
    overflow: hidden;
    backdrop-filter: blur(10px);
  }

  .sales-showcase-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.38), transparent 44%),
      radial-gradient(circle at top right, rgba(13, 141, 172, 0.12), transparent 34%);
    pointer-events: none;
  }

  .sales-showcase-card > * {
    position: relative;
    z-index: 1;
  }

  .sales-showcase-layer--primary .sales-showcase-card {
    --card-rotate: -7deg;
  }

  .sales-showcase-layer--secondary .sales-showcase-card {
    --card-rotate: 6deg;
  }

  .sales-showcase-layer--tertiary .sales-showcase-card {
    --card-rotate: -2.5deg;
  }

  @media (prefers-reduced-motion: no-preference) {
    .sales-showcase-card {
      animation: salesShowcaseFloat 8.8s ease-in-out infinite;
    }

    .sales-showcase-layer--secondary .sales-showcase-card {
      animation-delay: 1.1s;
    }

    .sales-showcase-layer--tertiary .sales-showcase-card {
      animation-delay: 2.1s;
    }
  }

  .sales-showcase-copy {
    display: grid;
    gap: 4px;
  }

  .sales-showcase-copy p {
    margin: 0;
    color: #14353d;
    font-size: 1.1rem;
    font-weight: 900;
    line-height: 1.08;
  }

  .sales-showcase-preview {
    min-height: 168px;
    padding: 14px;
    background:
      radial-gradient(circle at 16% 14%, rgba(13, 141, 172, 0.12), transparent 28%),
      linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(245, 241, 232, 0.86));
  }

  .sales-showcase-preview.dojo-visual--mixed {
    min-height: 168px;
  }

  .sales-showcase-card .dojo-card-meta {
    gap: 6px;
  }

  .sales-showcase-card .dojo-pill {
    min-height: 28px;
    padding: 0 9px;
    font-size: 0.74rem;
  }

  .sales-choice h3,
  .sales-price-panel h3,
  .sales-feature-item h3,
  .sales-path-step h3,
  .sales-proof-item h3 {
    margin: 0;
    color: #14353d;
  }

  .sales-choice p,
  .sales-price-panel p,
  .sales-band p {
    margin: 0;
    color: #44646d;
    line-height: 1.65;
  }

  .sales-proof-grid,
  .sales-path-grid,
  .sales-choice-grid,
  .sales-feature-grid,
  .sales-price-grid {
    display: grid;
    gap: 14px;
  }

  .sales-proof-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sales-path-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sales-choice-grid,
  .sales-price-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sales-feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sales-band {
    position: relative;
    display: grid;
    gap: clamp(22px, 4vw, 38px);
    padding: clamp(28px, 5vw, 54px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--bg-panel) 96%, transparent);
  }

  .sales-proof-item,
  .sales-path-step,
  .sales-feature-item {
    display: grid;
    gap: 10px;
  }

  .sales-proof-number {
    color: #0d8dac;
    font-size: clamp(2.2rem, 5vw, 4.2rem);
    line-height: 1;
    font-weight: 900;
  }

  .sales-path-grid {
    position: relative;
  }

  .sales-path-grid::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 28px;
    bottom: 28px;
    inline-size: 3px;
    border-radius: 999px;
    background: repeating-linear-gradient(180deg, #0d8dac 0 16px, transparent 16px 28px);
  }

  .sales-path-step {
    position: relative;
    padding-inline-start: 54px;
  }

  .sales-path-step .sales-badge {
    position: absolute;
    left: 0;
    top: 0;
  }

  .sales-choice,
  .sales-price-panel {
    display: grid;
    gap: 16px;
  }

  .sales-choice-grid {
    gap: clamp(24px, 5vw, 54px);
    align-items: start;
    padding: clamp(22px, 4vw, 36px);
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.5);
  }

  .sales-choice ul,
  .sales-feature-item ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding-left: 18px;
  }

  .sales-choice li,
  .sales-feature-item li {
    color: #44646d;
    line-height: 1.55;
  }

  .sales-feature-grid {
    gap: clamp(26px, 5vw, 60px);
  }

  .sales-feature-item {
    position: relative;
    padding-block-start: 72px;
  }

  .sales-feature-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    inline-size: 54px;
    block-size: 54px;
    border-radius: 50% 48% 46% 54%;
    background: linear-gradient(145deg, #0d8dac, #64c889);
    box-shadow: 0 14px 28px rgba(13, 141, 172, 0.18);
  }

  .sales-price-grid {
    gap: clamp(18px, 4vw, 28px);
  }

  .sales-price-panel {
    position: relative;
    padding: clamp(24px, 4vw, 34px);
    border: 1px solid rgba(23, 50, 58, 0.16);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 18px 50px rgba(18, 78, 96, 0.09);
    overflow: hidden;
    isolation: isolate;
    transition:
      transform 360ms ease,
      box-shadow 360ms ease,
      border-color 360ms ease;
  }

  .sales-price-panel::before {
    content: "";
    position: absolute;
    inset: auto -14% -24% 42%;
    height: 170px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(13, 141, 172, 0.14), transparent 68%);
    pointer-events: none;
  }

  .sales-price-panel--featured {
    background: linear-gradient(180deg, #fff5d8, #ffffff 64%);
    border-color: rgba(224, 123, 52, 0.42);
  }

  .sales-price-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
  }

  .sales-price-row .price {
    margin: 0;
    color: #0d5365;
    font-size: clamp(2.7rem, 6vw, 4.5rem);
  }

  .sales-price-panel:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 62px rgba(18, 78, 96, 0.14);
    border-color: rgba(13, 141, 172, 0.24);
  }

  .sales-price-panel > * {
    position: relative;
    z-index: 1;
  }

  .sales-badge {
    display: inline-flex;
    justify-self: start;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    min-inline-size: 38px;
    padding: 0 12px;
    border-radius: 999px;
    background: #0d8dac;
    color: white;
    font-size: 0.86rem;
    font-weight: 1000;
  }

  .sales-page .panel-header {
    justify-content: center;
    text-align: center;
  }

  .sales-page .panel-header h2 {
    color: #0d5365;
    font-size: clamp(2.2rem, 5vw, 4.2rem);
    line-height: 0.98;
    letter-spacing: 0;
  }

  .sales-page .section-kicker,
  .sales-page .eyebrow {
    color: #e07b34;
  }

  .sales-page .action-primary {
    border-color: #0d8dac;
    background: linear-gradient(135deg, #0d8dac, #46b978);
    color: white;
    box-shadow: 0 14px 34px rgba(13, 141, 172, 0.18);
  }

  .sales-page .action-secondary {
    border-color: rgba(13, 83, 101, 0.22);
    background: rgba(255, 255, 255, 0.6);
    color: #14353d;
  }

  .sales-page .faq-list {
    grid-template-columns: 1fr;
  }

  .sales-page .faq-card {
    padding: 18px 0;
    border-width: 1px 0 0;
    border-radius: 0;
    background: transparent;
  }

  .sales-hero-points,
  .sales-identification,
  .sales-proof-row {
    display: grid;
    gap: 10px;
  }

  .sales-hero-points {
    margin-top: 18px;
  }

  .sales-hero-point {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: color-mix(in srgb, var(--bg-panel) 92%, transparent);
  }

  .sales-hero-point::before {
    content: "";
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-top: 8px;
    background: var(--accent);
  }

  .sales-identification {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 20px;
  }

  .sales-identification .sales-card {
    min-height: 100%;
  }

  .sales-cta-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 22px;
    padding: 18px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--accent-soft) 48%, var(--bg-panel));
  }

  .sales-cta-strip p {
    margin: 0;
  }

  .sales-plan-card {
    display: grid;
    gap: 16px;
    align-content: start;
    justify-items: center;
    text-align: center;
  }

  .sales-plan-card p {
    margin-inline: auto;
  }

  .sales-plan-card .price {
    font-size: clamp(2.3rem, 5vw, 3.4rem);
  }

  .dojo-showcase-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    align-items: stretch;
  }

  .dojo-arcade-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dojo-card {
    position: relative;
    display: grid;
    gap: 16px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    background:
      radial-gradient(circle at top right, color-mix(in srgb, var(--accent-soft) 40%, transparent), transparent 34%),
      linear-gradient(180deg, color-mix(in srgb, var(--bg-panel) 98%, transparent) 0%, color-mix(in srgb, var(--bg-panel) 92%, var(--accent-soft) 8%) 100%);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
  }

  .dojo-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(120deg, transparent 0 56%, rgba(255, 255, 255, 0.12) 56% 64%, transparent 64% 100%);
    pointer-events: none;
  }

  .dojo-card > * {
    position: relative;
    z-index: 1;
  }

  .dojo-card--spotlight {
    min-height: 100%;
    padding: 24px;
  }

  .dojo-card--course {
    background:
      radial-gradient(circle at top right, rgba(24, 184, 116, 0.18), transparent 34%),
      linear-gradient(180deg, color-mix(in srgb, var(--bg-panel) 98%, transparent) 0%, color-mix(in srgb, var(--bg-panel) 92%, #18b874 8%) 100%);
  }

  .dojo-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
  }

  .dojo-card-title {
    margin: 0;
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
  }

  .dojo-card-body {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
  }

  .dojo-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .dojo-pill {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-panel-strong) 74%, transparent);
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 700;
  }

  .dojo-visual {
    position: relative;
    min-height: 142px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg) 52%, transparent);
    overflow: hidden;
  }

  .dojo-visual--mixed {
    display: grid;
    place-items: center;
    min-height: 210px;
    background:
      radial-gradient(circle at 18% 18%, rgba(24, 184, 116, 0.16), transparent 26%),
      radial-gradient(circle at 82% 78%, rgba(197, 58, 43, 0.18), transparent 28%),
      linear-gradient(135deg, color-mix(in srgb, var(--bg-panel-strong) 92%, transparent), color-mix(in srgb, var(--bg) 58%, transparent));
  }

  .dojo-visual-mixed-stack {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 16px;
  }

  .dojo-visual--fill,
  .dojo-visual--ai-conversation,
  .dojo-visual--builder,
  .dojo-visual--pronunciation,
  .dojo-visual--writing,
  .dojo-visual--flashcards,
  .dojo-visual--image-match,
  .dojo-visual--course {
    display: grid;
    place-items: center;
  }

  .dojo-visual--ai-conversation {
    background:
      radial-gradient(circle at 18% 20%, rgba(197, 58, 43, 0.2), transparent 34%),
      linear-gradient(145deg, color-mix(in srgb, var(--bg-panel-strong) 94%, transparent), color-mix(in srgb, var(--gold-soft) 36%, var(--bg)));
  }

  .dojo-ai-preview {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 8px);
    gap: 7px;
    align-items: center;
    justify-content: start;
    width: calc(100% - 34px);
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
    border-radius: 16px 16px 16px 4px;
    background: color-mix(in srgb, var(--bg-panel) 92%, transparent);
    box-shadow: 0 16px 36px rgba(49, 30, 18, 0.12);
  }

  .dojo-ai-preview span {
    grid-column: 1 / -1;
    color: var(--ink);
    font-family: "Yu Mincho", "Hiragino Mincho ProN", Georgia, serif;
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    font-weight: 800;
  }

  .dojo-ai-preview i {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--accent);
    animation: ai-dot 1.3s ease-in-out infinite;
  }

  .dojo-ai-preview i:nth-of-type(2) { animation-delay: 120ms; }
  .dojo-ai-preview i:nth-of-type(3) { animation-delay: 240ms; }

  @keyframes ai-dot {
    0%, 70%, 100% { opacity: 0.34; transform: translateY(0); }
    35% { opacity: 1; transform: translateY(-3px); }
  }

  .dojo-visual-grid {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 18px 18px;
    opacity: 0.55;
  }

  .dojo-preview-sentence {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 16px;
    color: var(--ink);
    font-size: clamp(1.35rem, 3vw, 1.9rem);
    font-weight: 800;
  }

  .dojo-blank {
    width: 76px;
    height: 22px;
    border-bottom: 4px solid var(--accent);
    border-radius: 4px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent-soft) 45%, transparent), transparent);
  }

  .dojo-block-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 0 18px;
  }

  .dojo-block {
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid var(--line-strong);
    border-bottom-width: 3px;
    border-radius: 10px;
    background: var(--bg-panel);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 800;
    box-shadow: 0 8px 14px rgba(0, 0, 0, 0.08);
  }

  .dojo-wave {
    display: flex;
    align-items: end;
    gap: 8px;
    height: 68px;
  }

  .dojo-wave span {
    width: 10px;
    border-radius: 999px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 74%, white 26%), color-mix(in srgb, var(--accent) 90%, black 10%));
    animation: dojoWave 1.4s ease-in-out infinite;
  }

  .dojo-wave span:nth-child(1) { height: 28px; animation-delay: 0s; }
  .dojo-wave span:nth-child(2) { height: 56px; animation-delay: 0.12s; }
  .dojo-wave span:nth-child(3) { height: 40px; animation-delay: 0.24s; }
  .dojo-wave span:nth-child(4) { height: 62px; animation-delay: 0.36s; }
  .dojo-wave span:nth-child(5) { height: 32px; animation-delay: 0.48s; }

  .dojo-stroke-card {
    position: relative;
    width: auto;
    height: 100%;
    max-height: 100%;
    max-width: none;
    aspect-ratio: 1;
    border: 1px solid var(--line);
    border-radius: 16px;
    background:
      linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px),
      color-mix(in srgb, var(--bg-panel) 92%, transparent);
    background-size: 50% 50%, 50% 50%, auto;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
  }

  .dojo-stroke-card::before {
    content: "語";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(0, 0, 0, 0.16);
    font-size: clamp(4rem, 9vw, 6rem);
    font-weight: 900;
  }

  .dojo-stroke-card::after {
    content: "";
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: 24%;
    height: 4px;
    border-radius: 999px;
    background: var(--accent);
    box-shadow:
      -32px -26px 0 0 var(--accent),
      14px -44px 0 0 var(--accent);
    transform: rotate(-12deg);
  }

  .dojo-flash-stack {
    position: relative;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: 136px;
  }

  .dojo-flash-stack span {
    position: absolute;
    inset: 0;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: color-mix(in srgb, var(--bg-panel) 94%, transparent);
    box-shadow: 0 12px 22px rgba(0,0,0,0.08);
  }

  .dojo-flash-stack span:nth-child(1) { transform: rotate(-8deg) translate(-18px, 10px); opacity: 0.72; }
  .dojo-flash-stack span:nth-child(2) { transform: rotate(5deg) translate(14px, 4px); opacity: 0.82; }
  .dojo-flash-stack span:nth-child(3) {
    display: grid;
    place-items: center;
    font-size: 1.55rem;
    font-weight: 900;
    color: var(--ink);
  }

  .dojo-image-match-preview {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(56px, 1fr));
    gap: 10px;
    width: 86%;
    padding: 12px;
  }

  .dojo-image-match-preview span {
    display: grid;
    place-items: center;
    min-height: 54px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-panel) 94%, transparent);
    color: var(--ink);
    font-size: 1.45rem;
    font-weight: 900;
    box-shadow: 0 10px 18px rgba(0,0,0,0.08);
  }

  .dojo-image-match-preview span:nth-child(1),
  .dojo-image-match-preview span:nth-child(3) {
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 55%, transparent), color-mix(in srgb, var(--gold) 22%, var(--bg-panel) 78%)),
      color-mix(in srgb, var(--bg-panel) 92%, transparent);
  }

  .dojo-image-match-preview span:nth-child(1)::before {
    content: "";
    width: 28px;
    height: 28px;
    border-radius: 50% 50% 48% 52%;
    background: #3c8fd6;
    box-shadow: 0 9px 0 -4px rgba(60,143,214,0.34);
  }

  .dojo-image-match-preview span:nth-child(3)::before {
    content: "";
    width: 34px;
    height: 24px;
    border-radius: 14px 14px 10px 10px;
    background: #7c624d;
    box-shadow: -10px -9px 0 -6px #7c624d, 10px -9px 0 -6px #7c624d;
  }

  .dojo-course-preview {
    position: relative;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: 148px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: color-mix(in srgb, var(--bg-panel) 96%, transparent);
    overflow: hidden;
    box-shadow: 0 14px 24px rgba(0,0,0,0.08);
  }

  .dojo-course-preview::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 44%;
    background: linear-gradient(135deg, rgba(24, 184, 116, 0.24), rgba(24, 184, 116, 0.06));
  }

  .dojo-course-preview::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    height: 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--line) 76%, transparent);
    box-shadow: 0 -18px 0 0 color-mix(in srgb, var(--line) 60%, transparent),
      0 -36px 0 0 color-mix(in srgb, var(--line) 44%, transparent);
  }

  .dojo-course-badge {
    position: absolute;
    left: 18px;
    top: 14px;
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.84);
    color: #18b874;
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .dojo-course-title {
    position: absolute;
    left: 18px;
    right: 18px;
    top: 58px;
    color: var(--ink);
    font-size: 1.18rem;
    font-weight: 900;
    line-height: 1.15;
  }

  .dojo-dashboard {
    position: relative;
    overflow: hidden;
    padding: 28px;
  }

  .dojo-dashboard::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 18% 84%, rgba(173, 112, 54, 0.12), transparent 18%),
      radial-gradient(circle at 82% 18%, rgba(139, 30, 20, 0.08), transparent 20%);
    pointer-events: none;
  }

  .dojo-dashboard > * {
    position: relative;
    z-index: 1;
  }

  .dojo-hero-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.82fr);
    gap: 20px;
    align-items: stretch;
  }

  .dojo-hero-copy {
    display: grid;
    align-content: start;
    gap: 18px;
    min-width: 0;
  }

  .dojo-hero-copy h1 {
    margin: 0;
    font-size: clamp(2.6rem, 5.8vw, 4.6rem);
    line-height: 0.95;
    letter-spacing: -0.05em;
    max-width: 100%;
  }

  .dojo-hero-copy .lead {
    max-width: 100%;
    font-size: 1.12rem;
  }

  .dojo-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  .dojo-hero-art {
    position: relative;
    min-height: 180px;
    border: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
    border-radius: 24px;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--bg-panel) 96%, transparent), color-mix(in srgb, var(--bg-panel) 88%, var(--accent-soft) 12%));
    overflow: hidden;
  }

  .dojo-hero-art::before {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    right: 6%;
    top: 10%;
    border-radius: 50%;
    border: 16px solid rgba(168, 139, 96, 0.12);
    border-left-color: rgba(168, 139, 96, 0.18);
    border-bottom-color: rgba(168, 139, 96, 0.08);
    transform: rotate(-18deg);
  }

  .dojo-hero-art::after {
    content: "";
    position: absolute;
    left: 0;
    right: 26%;
    bottom: 0;
    height: 92px;
    background:
      linear-gradient(180deg, transparent, rgba(155, 121, 72, 0.14)),
      radial-gradient(circle at 8% 110%, rgba(120, 105, 86, 0.22) 0 28%, transparent 29%),
      radial-gradient(circle at 34% 110%, rgba(120, 105, 86, 0.18) 0 24%, transparent 25%),
      radial-gradient(circle at 58% 112%, rgba(120, 105, 86, 0.14) 0 20%, transparent 21%);
    clip-path: polygon(0 100%, 0 54%, 18% 68%, 34% 44%, 52% 64%, 68% 40%, 84% 56%, 100% 100%);
    opacity: 0.9;
  }

  .dojo-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  .dojo-stat-card {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 8px;
    min-height: 188px;
    padding: 22px 16px;
    text-align: center;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: color-mix(in srgb, var(--bg-panel) 97%, transparent);
    box-shadow: 0 12px 26px rgba(38, 26, 20, 0.06);
  }

  .dojo-stat-icon {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 88%, white 12%);
    color: white;
    font-size: 1.55rem;
    font-weight: 900;
    box-shadow: 0 10px 22px rgba(139, 30, 20, 0.18);
  }

  .dojo-stat-value {
    margin: 0;
    font-size: clamp(2rem, 4vw, 2.8rem);
    line-height: 1;
    letter-spacing: -0.05em;
    font-weight: 900;
  }

  .dojo-stat-label {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
  }

  .dojo-stat-note {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
    font-size: 0.95rem;
  }

  .dojo-focus-shell {
    display: grid;
    gap: 16px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background:
      radial-gradient(circle at 88% 50%, rgba(197, 58, 43, 0.12), transparent 24%),
      linear-gradient(180deg, color-mix(in srgb, var(--bg-panel) 98%, transparent), color-mix(in srgb, var(--bg-panel) 90%, var(--accent-soft) 10%));
    box-shadow: 0 16px 36px rgba(38, 26, 20, 0.07);
  }

  .dojo-focus-shell--course {
    background:
      radial-gradient(circle at 14% 48%, rgba(24, 184, 116, 0.13), transparent 25%),
      radial-gradient(circle at 90% 48%, rgba(197, 58, 43, 0.12), transparent 25%),
      linear-gradient(180deg, color-mix(in srgb, var(--bg-panel) 98%, transparent), color-mix(in srgb, var(--bg-panel) 91%, #18b874 9%));
  }

  .dojo-focus-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.18fr) minmax(220px, 0.68fr);
    gap: 18px;
    align-items: center;
  }

  .dojo-focus-copy {
    display: grid;
    gap: 10px;
    align-content: start;
  }

  .dojo-focus-copy h2 {
    margin: 0;
    font-size: clamp(2rem, 3.6vw, 3rem);
    line-height: 0.98;
    letter-spacing: -0.04em;
  }

  .dojo-focus-copy p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
  }

  .dojo-focus-visual {
    display: grid;
    gap: 18px;
    justify-items: center;
    text-align: center;
  }

  .dojo-focus-sentence {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.05em;
  }

  .dojo-focus-course-card {
    width: 100%;
    max-width: none;
    min-height: 120px;
    display: grid;
    align-content: center;
    gap: 10px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background:
      radial-gradient(circle at right, rgba(197, 58, 43, 0.12), transparent 32%),
      color-mix(in srgb, var(--bg-panel-strong) 86%, transparent);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 16px 28px rgba(38, 26, 20, 0.08);
  }

  .dojo-focus-course-title {
    margin: 0;
    color: var(--ink);
    font-size: clamp(1.6rem, 3.8vw, 2.7rem);
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: -0.05em;
  }

  .dojo-focus-course-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--muted);
    font-size: 0.95rem;
    font-weight: 800;
  }

  .dojo-focus-course-line::before,
  .dojo-focus-course-line::after {
    content: "";
    width: 52px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--accent));
  }

  .dojo-focus-course-line::after {
    background: linear-gradient(90deg, var(--accent), transparent);
  }

  .dojo-focus-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  .dojo-focus-side {
    display: grid;
    gap: 12px;
    align-content: center;
    justify-items: start;
  }

  .dojo-focus-side p {
    margin: 0;
    color: var(--muted);
  }

  .dojo-progress-track {
    width: 100%;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--line) 72%, transparent);
  }

  .dojo-progress-fill {
    display: block;
    height: 100%;
    width: 58%;
    border-radius: inherit;
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 92%, black 8%), color-mix(in srgb, var(--accent) 72%, white 28%));
  }

  .dojo-section-shell {
    display: grid;
    gap: 18px;
  }

  .dojo-heading-row {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
  }

  .dojo-heading-copy {
    display: grid;
    gap: 6px;
  }

  .dojo-heading-copy h2 {
    margin: 0;
    font-size: clamp(2rem, 3vw, 2.7rem);
    line-height: 1;
    letter-spacing: -0.04em;
  }

  .dojo-heading-copy p {
    margin: 0;
    color: var(--muted);
  }

  .dojo-activity-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dojo-activity-card {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(176px, 1fr) auto;
    align-content: start;
    gap: 16px;
    height: 100%;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background:
      radial-gradient(circle at top right, color-mix(in srgb, var(--accent-soft) 44%, transparent), transparent 32%),
      linear-gradient(180deg, color-mix(in srgb, var(--bg-panel) 98%, transparent), color-mix(in srgb, var(--bg-panel) 92%, transparent));
    box-shadow: 0 14px 30px rgba(38, 26, 20, 0.07);
    overflow: hidden;
  }

  .dojo-activity-card::before {
    content: "";
    position: absolute;
    inset: auto -12% -32% auto;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(197, 58, 43, 0.12), transparent 60%);
    pointer-events: none;
  }

  .dojo-activity-card > * {
    position: relative;
    z-index: 1;
  }

  .dojo-activity-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    min-height: 118px;
  }

  .dojo-activity-icon {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 88%, white 12%);
    color: white;
    font-size: 1.4rem;
    font-weight: 900;
    box-shadow: 0 10px 20px rgba(139, 30, 20, 0.16);
  }

  .dojo-activity-copy {
    display: grid;
    gap: 6px;
    align-content: start;
    min-width: 0;
  }

  .dojo-activity-copy h3 {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.04;
    letter-spacing: 0;
  }

  .dojo-activity-copy p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
    min-height: 4.8rem;
  }

  .dojo-activity-preview {
    height: 176px;
    min-height: 176px;
    width: 100%;
    border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg) 58%, transparent);
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 16px;
  }

  .dojo-activity-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
  }

  .dojo-activity-footer .dojo-card-meta {
    flex: 1 1 auto;
  }

  .dojo-activity-footer .action-button {
    flex: 0 0 auto;
  }

  @keyframes dojoWave {
    0%, 100% { transform: scaleY(0.82); opacity: 0.72; }
    50% { transform: scaleY(1.08); opacity: 1; }
  }

  @keyframes salesShowcaseFloat {
    0%, 100% { transform: translateY(0) rotate(var(--card-rotate)); }
    50% { transform: translateY(-12px) rotate(var(--card-rotate)); }
  }

  .sales-highlight {
    display: inline-flex;
    justify-content: center;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--muted);
    font-size: 0.92rem;
    font-weight: 600;
  }

  .course-media {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    background: color-mix(in srgb, var(--bg-panel) 82%, black 18%);
  }

  .course-media iframe,
  .course-media img,
  .course-media video {
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
    display: block;
  }

  .course-media-placeholder {
    display: grid;
    height: 100%;
    place-items: center;
    padding: 24px;
    color: var(--muted);
    font-weight: 700;
    text-align: center;
  }

  .course-meta-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
  }

  .course-module-list {
    display: grid;
    gap: 14px;
  }

  .course-overview-shell {
    display: grid;
    gap: 16px;
  }

  .course-overview-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(280px, 0.7fr);
    gap: 16px;
    align-items: stretch;
  }

  .course-hero-panel {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 14px;
    min-height: 210px;
    padding: 28px 30px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background:
      radial-gradient(circle at 76% 22%, rgba(186, 55, 38, 0.12), transparent 18%),
      radial-gradient(circle at 70% 34%, rgba(92, 61, 28, 0.09), transparent 22%),
      linear-gradient(180deg, color-mix(in srgb, var(--bg-panel) 98%, transparent), color-mix(in srgb, var(--bg-panel) 92%, transparent));
    box-shadow: 0 18px 34px rgba(58, 33, 20, 0.08);
  }

  .course-hero-panel::before {
    content: "";
    position: absolute;
    right: 90px;
    top: -18px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    border: 22px solid rgba(114, 79, 40, 0.08);
  }

  .course-hero-panel::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 84px;
    background:
      radial-gradient(circle at 14% 110%, rgba(114, 79, 40, 0.11) 0 18%, transparent 19%),
      radial-gradient(circle at 34% 112%, rgba(114, 79, 40, 0.08) 0 16%, transparent 17%),
      radial-gradient(circle at 50% 115%, rgba(114, 79, 40, 0.06) 0 22%, transparent 23%);
    pointer-events: none;
  }

  .course-hero-art {
    position: absolute;
    right: 32px;
    bottom: 18px;
    width: 230px;
    height: 130px;
    pointer-events: none;
  }

  .course-hero-art::before {
    content: "⛩";
    position: absolute;
    right: 12px;
    bottom: 4px;
    color: rgba(139, 30, 20, 0.22);
    font-size: 5.2rem;
    line-height: 1;
  }

  .course-hero-art::after {
    content: "✿";
    position: absolute;
    right: 0;
    top: 8px;
    color: rgba(197, 58, 43, 0.42);
    font-size: 2rem;
    text-shadow: -24px 18px 0 rgba(197, 58, 43, 0.28), -52px 4px 0 rgba(197, 58, 43, 0.2);
  }

  .course-hero-panel .lead {
    max-width: 62ch;
    margin: 0;
  }

  .course-hero-side {
    display: grid;
    gap: 14px;
    padding: 26px 24px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background:
      radial-gradient(circle at top right, color-mix(in srgb, var(--accent-soft) 34%, transparent), transparent 36%),
      linear-gradient(180deg, color-mix(in srgb, var(--bg-panel) 97%, transparent), color-mix(in srgb, var(--bg-panel) 94%, transparent));
    box-shadow: 0 18px 34px rgba(58, 33, 20, 0.06);
    align-content: start;
  }

  .course-hero-side-icon {
    display: inline-grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 88%, white 12%);
    color: white;
    font-size: 1.5rem;
    box-shadow: 0 12px 24px rgba(139, 30, 20, 0.18);
  }

  .course-hero-side h2 {
    margin: 0;
    font-size: clamp(2rem, 3vw, 2.7rem);
    line-height: 0.95;
    letter-spacing: -0.05em;
  }

  .course-hero-side p {
    margin: 0;
    color: var(--muted);
  }

  .course-overview-panel {
    display: grid;
    gap: 18px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background:
      radial-gradient(circle at top left, color-mix(in srgb, var(--accent-soft) 24%, transparent), transparent 28%),
      linear-gradient(180deg, color-mix(in srgb, var(--bg-panel) 98%, transparent), color-mix(in srgb, var(--bg-panel) 94%, transparent));
    box-shadow: 0 14px 28px rgba(58, 33, 20, 0.06);
  }

  .course-overview-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
  }

  .course-overview-copy {
    display: grid;
    gap: 4px;
  }

  .course-overview-copy h2 {
    margin: 0;
    font-size: clamp(2rem, 3vw, 2.65rem);
    line-height: 1;
    letter-spacing: -0.04em;
  }

  .course-module-stack {
    display: grid;
    gap: 14px;
  }

  .course-module-entry {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-panel) 98%, transparent);
    box-shadow: 0 8px 18px rgba(58, 33, 20, 0.04);
  }

  .course-module-media {
    position: relative;
    min-height: 94px;
    border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
    border-radius: 16px;
    overflow: hidden;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.42)),
      linear-gradient(135deg, rgba(197, 58, 43, 0.12), rgba(197, 58, 43, 0.03));
  }

  .course-module-media::before {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 44px;
    background:
      radial-gradient(circle at 16% 110%, rgba(165, 118, 64, 0.22) 0 18%, transparent 19%),
      radial-gradient(circle at 52% 110%, rgba(165, 118, 64, 0.14) 0 16%, transparent 17%),
      radial-gradient(circle at 84% 112%, rgba(165, 118, 64, 0.1) 0 19%, transparent 20%);
  }

  .course-module-media::after {
    content: "";
    position: absolute;
    inset: 10px 14px auto auto;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    border: 6px solid rgba(139, 30, 20, 0.08);
  }

  .course-module-media--kana {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.74), rgba(255,255,255,0.48)),
      linear-gradient(135deg, rgba(54, 148, 90, 0.16), rgba(54, 148, 90, 0.04));
  }

  .course-module-media--grammar {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.74), rgba(255,255,255,0.48)),
      linear-gradient(135deg, rgba(121, 96, 170, 0.16), rgba(121, 96, 170, 0.04));
  }

  .course-module-media--kanji {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.74), rgba(255,255,255,0.48)),
      linear-gradient(135deg, rgba(91, 104, 150, 0.16), rgba(91, 104, 150, 0.04));
  }

  .course-module-media--culture {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.74), rgba(255,255,255,0.48)),
      linear-gradient(135deg, rgba(182, 115, 62, 0.16), rgba(182, 115, 62, 0.04));
  }

  .course-module-symbol {
    position: absolute;
    left: 16px;
    top: 10px;
    color: rgba(255,255,255,0.9);
    font-size: 2.1rem;
    line-height: 1;
    mix-blend-mode: overlay;
  }

  .course-module-ring {
    position: absolute;
    right: 12px;
    top: 14px;
    display: grid;
    width: 62px;
    height: 62px;
    place-items: center;
    border-radius: 50%;
    background:
      radial-gradient(circle at center, rgba(255,255,255,0.96) 0 54%, transparent 56%),
      conic-gradient(color-mix(in srgb, var(--accent) 90%, white 10%) 0 calc(var(--progress, 0) * 1%), rgba(139, 30, 20, 0.09) calc(var(--progress, 0) * 1%) 100%);
    box-shadow: 0 8px 18px rgba(139, 30, 20, 0.12);
  }

  .course-module-ring span {
    font-size: 0.86rem;
    font-weight: 900;
    color: var(--accent);
  }

  .course-module-content {
    display: grid;
    gap: 10px;
    min-width: 0;
  }

  .course-module-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }

  .course-module-title-row h3 {
    margin: 0;
    font-size: 1.55rem;
    line-height: 1.08;
    letter-spacing: -0.03em;
  }

  .course-level-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-soft) 54%, white 46%);
    color: var(--accent);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .course-module-description,
  .course-module-status {
    margin: 0;
    color: var(--muted);
  }

  .course-module-status strong {
    color: var(--text);
  }

  .course-module-progress {
    display: grid;
    gap: 8px;
  }

  .course-module-actions {
    display: grid;
    justify-items: end;
    gap: 10px;
    min-width: 182px;
  }

  .course-module-favorite {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 0.95rem;
    text-decoration: none;
  }

  .course-module-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 320px) auto;
    align-items: center;
    gap: 18px;
    padding: 20px 22px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--bg-panel) 98%, transparent) 0%, color-mix(in srgb, var(--bg-panel) 94%, var(--accent-soft) 6%) 100%);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.05);
  }

  .course-module-card--lesson {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
    align-items: center;
  }

  .course-module-card--lesson > div:first-child {
    min-width: 0;
  }

  .course-module-card--lesson .meta-row {
    gap: 10px;
  }

  .course-module-card--lesson .cta-row {
    justify-content: flex-end;
    align-self: center;
    margin: 0;
  }

  .course-module-card--lesson h3 {
    margin-bottom: 14px;
    line-height: 1.2;
  }

  .course-module-card--lesson p {
    max-width: none;
  }

  .course-progress-track {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--line) 70%, transparent);
  }

  .course-progress-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #18b874;
  }

  .course-lesson-layout {
    display: grid;
    grid-template-columns: minmax(250px, 330px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
  }

  .course-sidebar {
    position: sticky;
    top: 94px;
    max-height: calc(100vh - 116px);
    overflow-y: auto;
  }

  .course-sidebar-inner {
    display: block;
  }

  .course-sidebar:not([open]) .course-sidebar-inner {
    display: block;
  }

  .course-mobile-summary {
    display: none;
    padding: 0;
    cursor: pointer;
    list-style: none;
    color: var(--text);
    background: transparent;
    border: 0;
  }

  .course-mobile-summary::-webkit-details-marker {
    display: none;
  }

  .course-mobile-summary-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    font-weight: 800;
  }

  .course-mobile-summary-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
  }

  .course-mobile-summary-copy span,
  .course-mobile-summary-copy small {
    display: block;
    min-width: 0;
  }

  .course-mobile-summary-copy span {
    line-height: 1.2;
  }

  .course-mobile-summary-copy small {
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 700;
  }

  .course-mobile-summary-icon {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--accent);
    font-size: 1rem;
    font-weight: 800;
  }

  .course-mobile-summary-icon::before {
    content: "+";
  }

  .course-sidebar[open] .course-mobile-summary-icon::before {
    content: "−";
  }

  .course-sidebar-list {
    display: grid;
    gap: 8px;
    margin-top: 14px;
  }

  .course-sidebar-link {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 12px 13px;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--text);
    text-decoration: none;
    background: color-mix(in srgb, var(--bg-panel) 94%, transparent);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
  }

  .course-sidebar-link:hover,
  .course-sidebar-link[aria-current="page"] {
    border-color: var(--line);
    background: color-mix(in srgb, var(--accent-soft) 64%, transparent);
  }

  .course-status-dot {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border: 2px solid var(--line-strong);
    border-radius: 50%;
    color: transparent;
    font-size: 0.78rem;
    font-weight: 800;
  }

  .course-sidebar-link.is-complete .course-status-dot,
  .course-complete-badge {
    border-color: #18b874;
    background: #18b874;
    color: white;
  }

  .course-content {
    display: grid;
    gap: 16px;
    margin-top: 18px;
    font-size: 1.04rem;
  }

  .course-lesson-title {
    font-size: clamp(2rem, 4.8vw, 3.35rem);
    line-height: 1.06;
    letter-spacing: -0.035em;
  }

  .course-content p,
  .course-content ul,
  .course-content ol,
  .course-content blockquote {
    margin: 0;
  }

  .course-content p {
    color: var(--muted);
    line-height: 1.78;
  }

  .course-content > :first-child {
    margin-top: 0;
  }

  .course-content > :last-child {
    margin-bottom: 0;
  }

  .course-content h2,
  .course-content h3,
  .course-content h4 {
    margin: 8px 0 0;
    color: var(--ink);
    line-height: 1.16;
    letter-spacing: -0.02em;
  }

  .course-content ul,
  .course-content ol {
    padding-left: 1.3rem;
    color: var(--muted);
  }

  .course-content li + li {
    margin-top: 8px;
  }

  .course-content ruby {
    ruby-position: over;
  }

  .course-content rt {
    color: var(--accent);
    font-size: 0.65em;
    font-weight: 700;
  }

  .course-content blockquote,
  .course-content pre {
    overflow-x: auto;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-panel-strong) 76%, transparent);
  }

  .course-phrase-card {
    display: grid;
    gap: 18px;
    padding: 22px;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
    border-radius: 14px;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--bg-panel) 98%, transparent) 0%, color-mix(in srgb, var(--bg-panel) 94%, var(--accent-soft) 6%) 100%);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
  }

  .course-phrase-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
  }

  .course-phrase-text {
    margin: 0;
    color: var(--ink);
    font-size: clamp(1.7rem, 4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.03em;
    text-wrap: balance;
  }

  .course-phrase-translation {
    margin: -6px 0 0;
    color: var(--muted);
    font-size: 1.08rem;
    font-weight: 600;
    line-height: 1.55;
  }

  .course-phrase-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .course-phrase-mini-list {
    display: grid;
    gap: 0;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-panel-strong) 78%, transparent);
  }

  .course-phrase-mini-list .section-kicker {
    margin-bottom: 12px;
  }

  .course-phrase-item {
    display: grid;
    gap: 12px;
    align-items: start;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }

  .course-phrase-mini-list--words .course-phrase-item {
    grid-template-columns: minmax(54px, auto) minmax(0, 1fr);
  }

  .course-phrase-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .course-phrase-term {
    min-width: 0;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.2;
    word-break: break-word;
  }

  .course-phrase-desc {
    min-width: 0;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.5;
    text-align: left;
  }

  .course-phrase-extra {
    display: grid;
    gap: 14px;
  }

  .course-actions-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--bg-panel) 96%, transparent) 0%, color-mix(in srgb, var(--bg-panel) 92%, var(--accent-soft) 8%) 100%);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
  }

  .course-actions-bar .action-secondary,
  .course-module-card--lesson .action-secondary {
    border-color: var(--line-strong);
    background: color-mix(in srgb, var(--bg-panel) 92%, transparent);
    color: var(--text);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
  }

  .course-actions-bar .action-primary,
  .course-module-card--lesson .action-primary {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--accent-contrast);
    box-shadow: 0 10px 24px rgba(139, 30, 20, 0.18);
  }

  .course-actions-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
  }

  .course-actions-status {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
    align-items: center;
  }

  .course-toggle-form {
    margin: 0;
  }

  .course-toggle-form .action-primary[data-state="complete"] {
    background: #18b874;
    border-color: #18b874;
    color: white;
    box-shadow: 0 10px 24px rgba(24, 184, 116, 0.2);
  }

  .sales-panel-center {
    text-align: center;
  }

  .sales-panel-center .panel-header {
    justify-content: center;
    text-align: center;
  }

  .sales-panel-center .lead {
    margin-inline: auto;
  }

  .pricing-grid {
    grid-template-columns: repeat(2, minmax(280px, 380px));
    justify-content: center;
    max-width: 820px;
    margin: 22px auto 0;
  }

  .sales-panel .lead {
    max-width: none;
  }

  .pricing-note {
    margin: 20px auto 0;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-panel) 92%, transparent);
  }

  .pricing-grid .plan-card {
    text-align: center;
  }

  .pricing-grid .meta-row,
  .pricing-grid .cta-row {
    justify-content: center;
  }

  .hero-panel,
  .panel,
  .feature-card,
  .plan-card,
  .directory-card,
  .stat-card,
  .empty-state {
    padding: 22px;
  }

  .hero-panel {
    position: relative;
    overflow: hidden;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--bg-panel-strong) 92%, white 8%) 0%, var(--bg-panel) 100%);
  }

  .hero-panel::after {
    content: "";
    position: absolute;
    right: -40px;
    top: -40px;
    width: 180px;
    height: 180px;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
    border-radius: 50%;
    opacity: 0.45;
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 6px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--accent);
  }

  .hero-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
  }

  .sentence-topbar {
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
  }

  .sentence-topbar .eyebrow {
    margin-bottom: 0;
  }

  .sentence-topbar .meta-row {
    align-items: center;
    gap: 10px;
    margin-top: 0;
  }

  .sentence-reading-meta {
    margin-top: 12px;
  }

  .sentence-meaning-kicker {
    margin-top: 16px;
    margin-bottom: 6px;
  }

  h1,
  h2,
  h3 {
    margin: 0 0 10px;
    line-height: 0.98;
    letter-spacing: -0.03em;
  }

  h1 {
    font-size: clamp(2.7rem, 8vw, 5.6rem);
    max-width: 100%;
  }

  .hero-reading {
    font-size: clamp(2.6rem, 7vw, 4.9rem);
    max-width: none;
    line-height: 1.06;
  }

  .home-hero-title {
    font-size: clamp(2.4rem, 4.8vw, 4rem);
    max-width: none;
    line-height: 1.04;
  }

  .plans-hero-title {
    font-size: clamp(2.35rem, 4.4vw, 3.85rem);
    max-width: 100%;
    line-height: 1.02;
  }

  .hero-translation {
    margin-top: 8px;
    font-size: clamp(1.15rem, 2.4vw, 1.5rem);
    font-weight: 600;
    color: var(--ink);
  }

  :root[data-theme="dark"] .hero-translation {
    color: #f3d8cd;
  }

  h2 {
    font-size: clamp(1.6rem, 4vw, 2.6rem);
  }

  h3 {
    font-size: 1.05rem;
  }

  p {
    margin: 0;
    color: var(--muted);
    line-height: 1.72;
  }

  .lead {
    max-width: 100%;
    font-size: 1.04rem;
  }

  .plans-lead {
    max-width: 100%;
  }

  .cta-row,
  .meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
  }

  .stat-card strong,
  .price,
  .entry-japanese,
  .section-kicker {
    display: block;
  }

  .stat-card strong,
  .price {
    font-family: var(--font-display);
    font-size: 2rem;
    line-height: 1;
  }

  .section-kicker {
    margin-bottom: 10px;
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .kicker-icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .kicker-icon::before {
    content: attr(data-icon);
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
    border-radius: 999px;
    background:
      radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.55), transparent 36%),
      color-mix(in srgb, var(--accent) 10%, var(--bg-panel));
    box-shadow: 0 6px 14px color-mix(in srgb, var(--shadow) 18%, transparent);
    font-size: 0.78rem;
    letter-spacing: 0;
    line-height: 1;
  }

  .tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
  }

  .audio-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--accent);
    border-radius: 6px;
    background: var(--accent);
    color: var(--accent-contrast);
    cursor: pointer;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(139, 30, 20, 0.18);
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
  }

  .audio-chip:hover {
    background: color-mix(in srgb, var(--accent) 88%, black 12%);
    transform: translateY(-1px);
    box-shadow: 0 12px 22px rgba(139, 30, 20, 0.24);
  }

  .audio-chip:active {
    transform: translateY(0);
    box-shadow: 0 6px 14px rgba(139, 30, 20, 0.18);
  }

  .audio-chip[disabled] {
    opacity: 0.5;
    cursor: default;
    transform: none;
    box-shadow: none;
  }

  .audio-chip[data-audio-state="playing"],
  .audio-chip[data-audio-state="speaking"] {
    background: color-mix(in srgb, var(--accent) 84%, black 16%);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
  }

  .game-page-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.38fr);
  }

  [data-mixed-game-host] {
    transition: opacity 160ms ease, transform 160ms ease;
  }

  [data-mixed-game-host].is-loading {
    opacity: 0.58;
    transform: translateY(4px);
    pointer-events: none;
  }

  .game-panel {
    display: grid;
    gap: 18px;
  }

  .game-panel__header,
  .game-toolbar,
  .game-toolbar__stats,
  .game-toolbar__filters,
  .game-panel__meta,
  .game-card__actions,
  .game-custom-builder {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
  }

  .game-panel__header,
  .game-toolbar {
    justify-content: space-between;
  }

  .game-panel__header {
    display: none;
  }

  .game-toolbar__stats,
  .game-toolbar__filters,
  .game-card__actions,
  .game-custom-builder {
    justify-content: center;
  }

  .game-panel__eyebrow,
  .game-filters-label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
  }

  .game-chip {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: color-mix(in srgb, var(--bg-panel) 92%, transparent);
    color: var(--muted);
    font-size: 0.92rem;
    font-weight: 600;
  }

  .game-jlpt-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: color-mix(in srgb, var(--bg-panel) 92%, transparent);
    color: var(--muted);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
  }

  .game-jlpt-pill input {
    margin: 0;
    accent-color: var(--accent);
  }

  .game-card {
    display: grid;
    gap: 16px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-panel) 94%, transparent);
  }

  .game-card__question {
    font-size: clamp(1.4rem, 3.8vw, 2rem);
    line-height: 1.9;
    color: var(--text);
    text-align: center;
  }

  .game-card__question p,
  .game-card__hints p,
  .game-card__feedback {
    margin: 0;
  }

  .game-card__hints {
    display: grid;
    gap: 6px;
    color: var(--muted);
    justify-items: center;
    text-align: center;
  }

  .game-card__feedback {
    min-height: 24px;
    font-weight: 600;
    color: var(--accent);
  }

  .game-builder-card {
    gap: 20px;
  }

  .game-builder-hints,
  .game-builder-zone {
    display: grid;
    gap: 10px;
    justify-items: center;
    text-align: center;
  }

  .game-builder-image {
    width: min(100%, 460px);
    margin: 2px 0 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-panel) 96%, transparent);
    box-shadow: 0 14px 34px rgba(51, 30, 18, 0.11);
  }

  .game-builder-image img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  .game-token-zone {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 76px;
    padding: 12px;
    border: 1px dashed var(--line-strong);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg) 62%, transparent);
  }

  .game-token-zone--answer {
    border-style: solid;
    background: color-mix(in srgb, var(--bg-panel) 94%, transparent);
  }

  .game-token {
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--line-strong);
    border-bottom-width: 3px;
    border-radius: 6px;
    background: var(--bg-panel);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-size: 1.15rem;
    font-weight: 700;
    touch-action: manipulation;
    transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
  }

  .game-token:hover:not(:disabled) {
    transform: translateY(1px);
    border-bottom-width: 2px;
    background: color-mix(in srgb, var(--bg-panel) 82%, var(--accent-soft) 18%);
  }

  .game-token.is-correct {
    border-color: #1f8a4d;
    background: rgba(31, 138, 77, 0.11);
    color: #1f8a4d;
  }

  .game-token.is-wrong {
    border-color: #c53a2b;
    background: rgba(197, 58, 43, 0.10);
    color: #c53a2b;
  }

  .game-token.is-dragging {
    opacity: 0.45;
    transform: scale(0.96);
    border-style: dashed;
  }

  .game-pronunciation-card {
    justify-items: center;
    text-align: center;
  }

  .game-pronunciation-sentence {
    color: var(--text);
    font-size: clamp(2rem, 6vw, 4.6rem);
    font-weight: 800;
    line-height: 1.25;
    text-wrap: balance;
  }

  .game-pronunciation-sentence p,
  .game-pronunciation-romaji,
  .game-voice-feedback {
    margin: 0;
  }

  .game-pronunciation-romaji {
    color: var(--accent);
    font-weight: 700;
    font-size: 1.05rem;
  }

  .game-toolbar--flashcards-score {
    margin-top: 12px;
  }

  .game-flashcard-wrap {
    display: grid;
    gap: 16px;
  }

  .game-flashcard {
    display: grid;
    width: min(100%, 860px);
    height: 340px;
    margin: 0 auto;
    perspective: 1200px;
    transform-style: preserve-3d;
    cursor: pointer;
    outline: none;
    transition: transform 180ms ease;
  }

  .game-flashcard:hover {
    transform: translateY(-2px);
  }

  .game-flashcard:focus-visible {
    border-radius: 10px;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
  }

  .game-flashcard.is-dealing {
    animation: flashcardDeal 260ms ease both;
  }

  @keyframes flashcardDeal {
    from {
      opacity: 0;
      transform: translateY(10px) scale(0.985);
    }

    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .game-flashcard__face {
    position: relative;
    grid-area: 1 / 1;
    display: grid;
    align-content: center;
    gap: 14px;
    height: 100%;
    padding: 34px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--line-strong) 72%, transparent);
    border-radius: 10px;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--bg-panel-strong) 92%, white 8%) 0%, var(--bg-panel) 100%),
      repeating-linear-gradient(0deg, transparent 0, transparent 39px, color-mix(in srgb, var(--line) 35%, transparent) 40px);
    backface-visibility: hidden;
    box-shadow:
      0 18px 42px rgba(38, 26, 20, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: transform 360ms cubic-bezier(0.2, 0.72, 0.2, 1), opacity 220ms ease;
  }

  .game-flashcard__face::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 6px;
    background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--gold) 80%, var(--accent)));
  }

  .game-flashcard__face::after {
    content: "";
    position: absolute;
    right: 22px;
    bottom: 18px;
    width: 42px;
    height: 42px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    opacity: 0.45;
  }

  .game-flashcard__face--front {
    transform: rotateY(0deg);
    opacity: 1;
    pointer-events: auto;
  }

  .game-flashcard__face--back {
    transform: rotateY(180deg);
    opacity: 0;
    pointer-events: none;
  }

  .game-flashcard.is-flipped .game-flashcard__face--front {
    transform: rotateY(180deg);
    opacity: 0;
    pointer-events: none;
  }

  .game-flashcard.is-flipped .game-flashcard__face--back {
    transform: rotateY(360deg);
    opacity: 1;
    pointer-events: auto;
  }

  .game-flashcard-image {
    width: min(100%, 640px);
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--line-strong) 70%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg-panel) 95%, transparent);
    box-shadow: 0 16px 36px rgba(38, 26, 20, 0.12);
  }

  .game-flashcard-image img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  .game-flashcard__sentence,
  .game-flashcard__translation,
  .game-flashcard__kana {
    margin: 0;
    line-height: 1.35;
  }

  .game-flashcard__sentence {
    color: var(--text);
    font-size: clamp(2rem, 3.2rem, 3.7rem);
    font-weight: 800;
    text-align: center;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  .game-flashcard__translation {
    color: var(--text);
    font-size: clamp(1.4rem, 1.8rem, 2rem);
    font-weight: 700;
    text-align: center;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  .game-flashcard__translation-label,
  .game-flashcard__kana-label {
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .game-flashcard__kana {
    color: var(--text);
    font-size: clamp(1.15rem, 1.35rem, 1.55rem);
    text-align: center;
  }

  .game-card__actions--flashcard-top,
  .game-card__actions--flashcard-rating {
    justify-content: center;
    flex-wrap: wrap;
  }

  .game-card__actions--flashcard-rating .game-button {
    color: #fff;
    border-color: transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }

  .game-card__actions--flashcard-rating .game-button--danger {
    background: #a64035;
  }

  .game-card__actions--flashcard-rating .game-button--danger:hover {
    background: #8f281f;
    border-color: transparent;
  }

  .game-card__actions--flashcard-rating .game-button--warning {
    background: #b86a37;
  }

  .game-card__actions--flashcard-rating .game-button--warning:hover {
    background: #9c5023;
    border-color: transparent;
  }

  .game-card__actions--flashcard-rating .game-button--info {
    background: #5f9869;
  }

  .game-card__actions--flashcard-rating .game-button--info:hover {
    background: #427d4f;
    border-color: transparent;
  }

  .game-card__actions--flashcard-rating .game-button--success {
    background: #3f8d5b;
  }

  .game-card__actions--flashcard-rating .game-button--success:hover {
    background: #287342;
    border-color: transparent;
  }

  .game-panel--image-word-match {
    gap: 20px;
  }

  .game-image-match-card {
    gap: 18px;
  }

  .game-image-match-board {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(220px, 0.95fr);
    gap: 18px;
    align-items: start;
  }

  .game-image-match-column {
    display: grid;
    gap: 12px;
    min-width: 0;
  }

  .game-image-match-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .game-image-match-tile {
    position: relative;
    min-height: 148px;
    padding: 0;
    overflow: hidden;
    border: 2px solid var(--line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg-panel) 96%, transparent);
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(38, 26, 20, 0.10);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  }

  .game-image-match-tile:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
    box-shadow: 0 16px 28px rgba(38, 26, 20, 0.14);
  }

  .game-image-match-tile img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  .game-image-match-tile.is-selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-soft) 58%, transparent);
  }

  .game-image-match-tile.is-matched {
    border-color: #3f8d5b;
    box-shadow: 0 0 0 4px rgba(63, 141, 91, 0.18);
  }

  .game-image-match-tile.is-wrong {
    border-color: #a64035;
    box-shadow: 0 0 0 4px rgba(166, 64, 53, 0.18);
  }

  .game-image-match-tile:disabled {
    cursor: default;
  }

  .game-image-match-tile.is-matched::after {
    content: "✓";
    position: absolute;
    right: 10px;
    top: 10px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: #3f8d5b;
    color: #fff;
    font-weight: 900;
  }

  .game-image-match-words {
    display: grid;
    gap: 10px;
  }

  .game-image-word-option {
    display: grid;
    gap: 3px;
    min-height: 58px;
    padding: 10px 14px;
    border: 1px solid var(--line-strong);
    border-bottom-width: 3px;
    border-radius: 8px;
    background: var(--bg-panel);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
  }

  .game-image-word-option:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--accent) 60%, var(--line-strong));
    background: color-mix(in srgb, var(--bg-panel) 82%, var(--accent-soft) 18%);
  }

  .game-image-word-option strong {
    font-size: 1.35rem;
    line-height: 1.15;
  }

  .game-image-word-option span {
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.25;
  }

  .game-image-word-option.is-matched {
    border-color: #3f8d5b;
    background: rgba(63, 141, 91, 0.14);
  }

  .game-image-word-option.is-wrong {
    border-color: #a64035;
    background: rgba(166, 64, 53, 0.12);
  }

  .game-button--danger {
    background: #b42318;
    border-color: #b42318;
    color: #fff;
  }

  .game-button--danger:hover {
    background: #991b1b;
    border-color: #991b1b;
  }

  .game-button--warning {
    background: #d97706;
    border-color: #d97706;
    color: #fff;
  }

  .game-button--warning:hover {
    background: #b45309;
    border-color: #b45309;
  }

  .game-button--info {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
  }

  .game-button--info:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
  }

  .game-button--success {
    background: #1f8f58;
    border-color: #1f8f58;
    color: #fff;
  }

  .game-button--success:hover {
    background: #187046;
    border-color: #187046;
  }

  .game-flashcard__words-label {
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .game-flashcard__words-list {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  .game-flashcard__word-item {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-panel) 92%, transparent);
  }

  .game-flashcard__word-item strong,
  .game-flashcard__word-item span {
    margin: 0;
    line-height: 1.35;
  }

  .game-flashcard__word-meta {
    color: var(--muted);
    font-size: 0.95rem;
  }

  .game-card__actions--flashcard-extra {
    justify-content: center;
  }

  .ai-tutor {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: 22px;
    background:
      radial-gradient(circle at 8% 12%, rgba(197, 58, 43, 0.11), transparent 27%),
      linear-gradient(150deg, color-mix(in srgb, var(--bg-panel) 96%, transparent), color-mix(in srgb, var(--gold-soft) 24%, var(--bg-panel)));
    box-shadow: 0 24px 60px rgba(50, 31, 18, 0.13);
  }

  .ai-tutor__toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 14px 154px 14px 14px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg-panel-strong) 88%, transparent);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .ai-tutor__toolbar::-webkit-scrollbar { display: none; }

  .ai-tutor__identity {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    padding-right: 14px;
    border-right: 1px solid var(--line);
  }

  .ai-tutor__identity > span:last-child {
    display: grid;
    gap: 3px;
  }

  .ai-tutor__identity strong { font-size: 1rem; }

  .ai-tutor__identity small {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    white-space: nowrap;
  }

  .ai-tutor__identity small i {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #2b9b61;
    box-shadow: 0 0 0 4px rgba(43, 155, 97, 0.12);
  }

  .ai-tutor__avatar,
  .ai-message__speaker {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border: 1px solid color-mix(in srgb, var(--accent) 52%, var(--line));
    border-radius: 50% 50% 46% 46%;
    background: var(--accent);
    color: #fff8ef;
    font-family: "Yu Mincho", "Hiragino Mincho ProN", Georgia, serif;
    font-weight: 900;
    box-shadow: inset 0 -4px 0 rgba(68, 15, 10, 0.2);
  }

  .ai-tutor__control {
    display: grid;
    gap: 4px;
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .ai-tutor__control select,
  .ai-tutor__reset,
  .ai-tutor__fullscreen,
  .ai-tutor__close {
    min-height: 38px;
    padding: 0 11px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg-panel);
    color: var(--ink);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 800;
    text-transform: none;
  }

  .ai-tutor__reset,
  .ai-tutor__fullscreen,
  .ai-tutor__close {
    flex: 0 0 auto;
    cursor: pointer;
  }

  .ai-tutor__reset {
    margin-left: auto;
  }

  .ai-tutor__fullscreen {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: 0;
  }

  .ai-tutor__fullscreen > span:first-child {
    font-size: 1.15rem;
    line-height: 1;
  }

  .ai-tutor__close {
    display: grid;
    place-items: center;
    min-width: 38px;
    padding: 0;
    font-size: 1.35rem;
    line-height: 1;
  }

  .ai-tutor__workspace {
    display: grid;
    grid-template-columns: minmax(220px, 0.31fr) minmax(0, 1fr);
    min-height: 640px;
  }

  .ai-tutor__starters {
    position: relative;
    display: grid;
    align-content: start;
    gap: 18px;
    padding: 24px;
    border-right: 1px solid var(--line);
    background:
      linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
      color-mix(in srgb, var(--bg) 70%, transparent);
    background-size: 22px 22px;
  }

  .ai-tutor__starter-list {
    display: grid;
    gap: 9px;
  }

  .ai-tutor__starter-list button {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-panel) 91%, transparent);
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    text-align: left;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
  }

  .ai-tutor__starter-list button:hover:not(:disabled) {
    transform: translateX(3px);
    border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 22%, var(--bg-panel));
  }

  .ai-tutor__starter-list button span {
    color: var(--accent);
    font-family: Georgia, serif;
    font-size: 0.8rem;
  }

  .ai-tutor__seal {
    display: grid;
    place-items: center;
    justify-self: center;
    gap: 4px;
    width: 118px;
    height: 118px;
    margin-top: 18px;
    border: 2px solid color-mix(in srgb, var(--accent) 48%, transparent);
    border-radius: 50%;
    color: color-mix(in srgb, var(--accent) 72%, var(--muted));
    opacity: 0.66;
    transform: rotate(-7deg);
  }

  .ai-tutor__seal span {
    font-family: "Yu Mincho", "Hiragino Mincho ProN", Georgia, serif;
    font-size: 2.6rem;
    font-weight: 900;
    line-height: 0.9;
  }

  .ai-tutor__seal small {
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.08em;
  }

  .ai-tutor__conversation {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto auto;
    min-width: 0;
    min-height: 0;
    background: color-mix(in srgb, var(--bg-panel) 80%, transparent);
  }

  .ai-tutor__messages {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 0;
    max-height: 560px;
    padding: 28px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .ai-message {
    display: flex;
    align-items: flex-end;
    gap: 10px;
  }

  .ai-message--user {
    justify-content: flex-end;
  }

  .ai-message__speaker {
    width: 34px;
    height: 34px;
    font-size: 0.84rem;
  }

  .ai-message__bubble {
    display: grid;
    gap: 12px;
    min-width: 0;
    width: fit-content;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 17px 17px 17px 4px;
    background: var(--bg-panel);
    box-shadow: 0 10px 24px rgba(40, 24, 14, 0.08);
    overflow-wrap: anywhere;
  }

  .ai-message--user .ai-message__bubble {
    border-color: color-mix(in srgb, var(--accent) 62%, var(--line));
    border-radius: 17px 17px 4px 17px;
    background: var(--accent);
    color: #fffaf4;
  }

  .ai-message__bubble p { margin: 0; line-height: 1.62; }

  .ai-message--assistant .ai-message__bubble > p,
  .ai-message__correction p,
  .ai-message__focus p {
    color: var(--text);
  }

  .ai-message--user .ai-message__bubble,
  .ai-message--user .ai-message__bubble p {
    color: #ffffff;
  }

  .ai-message__correction,
  .ai-message__focus {
    display: grid;
    gap: 7px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--gold) 38%, var(--line));
    border-radius: 12px;
    background: color-mix(in srgb, var(--gold-soft) 46%, var(--bg-panel));
  }

  .ai-message__correction > span {
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .ai-message__focus-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .ai-message__focus-heading strong {
    font-family: "Yu Mincho", "Hiragino Mincho ProN", Georgia, serif;
    font-size: clamp(1.35rem, 3vw, 1.8rem);
  }

  .ai-message__focus-heading button,
  .ai-tutor__options button {
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--bg-panel);
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 800;
  }

  .ai-message__reading { color: var(--muted); }

  .ai-message--loading .ai-message__bubble p {
    color: var(--muted);
    animation: ai-loading 1.2s ease-in-out infinite;
  }

  .ai-message--error .ai-message__bubble {
    border-color: #b42318;
    background: color-mix(in srgb, #b42318 8%, var(--bg-panel));
    color: #a7352a;
  }

  @keyframes ai-loading {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
  }

  .ai-tutor__options {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 28px 16px;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .ai-tutor__options[hidden] { display: none; }

  .ai-tutor__options-label {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 800;
  }

  .ai-tutor__options button {
    flex: 0 0 auto;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent-soft) 23%, var(--bg-panel));
  }

  .ai-tutor__options button:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
  }

  .ai-tutor__composer {
    display: grid;
    gap: 7px;
    padding: 16px 20px 20px;
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg-panel-strong) 90%, transparent);
  }

  .ai-tutor__composer > label {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 800;
  }

  .ai-tutor__composer > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: stretch;
  }

  .ai-tutor__composer textarea {
    width: 100%;
    min-height: 58px;
    max-height: 150px;
    resize: vertical;
    padding: 12px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--bg-panel);
    color: var(--ink);
    font: inherit;
    line-height: 1.5;
  }

  .ai-tutor__composer textarea:focus {
    outline: 3px solid color-mix(in srgb, var(--accent) 18%, transparent);
    border-color: var(--accent);
  }

  .ai-tutor__composer button[type="submit"] {
    display: grid;
    place-items: center;
    gap: 3px;
    min-width: 74px;
    padding: 7px 13px;
    border: 1px solid var(--accent);
    border-radius: 12px;
    background: var(--accent);
    color: #fffaf4;
    cursor: pointer;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
  }

  .ai-tutor__composer button[type="submit"] b {
    font-family: "Yu Mincho", "Hiragino Mincho ProN", Georgia, serif;
    font-size: 1rem;
  }

  .ai-tutor button:disabled,
  .ai-tutor textarea:disabled {
    cursor: wait;
    opacity: 0.58;
  }

  html.ai-tutor-fullscreen-lock,
  html.ai-tutor-fullscreen-lock body {
    overflow: hidden;
  }

  .ai-tutor.is-fullscreen {
    position: fixed;
    inset: 12px;
    z-index: 1400;
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 24px);
    border-radius: 18px;
    background: var(--bg);
    box-shadow: 0 30px 90px rgba(21, 8, 4, 0.5);
  }

  .ai-tutor.is-fullscreen .ai-tutor__workspace {
    flex: 1;
    min-height: 0;
  }

  .ai-tutor.is-fullscreen .ai-tutor__messages {
    min-height: 0;
    max-height: none;
  }

  .ai-tutor-widget {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 850;
  }

  .ai-tutor-widget__trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 8px 15px 8px 8px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: #8b1e14;
    color: #ffffff;
    box-shadow: 0 16px 42px rgba(54, 11, 8, 0.34);
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
  }

  .ai-tutor-widget__trigger:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 48px rgba(54, 11, 8, 0.42);
  }

  .ai-tutor-widget__trigger:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--gold) 66%, white);
    outline-offset: 3px;
  }

  .ai-tutor-widget__trigger > span:last-child {
    display: grid;
    gap: 1px;
    color: #ffffff;
  }

  .ai-tutor-widget__trigger small,
  .ai-tutor-widget__trigger strong {
    color: #ffffff;
    line-height: 1.15;
  }

  .ai-tutor-widget__trigger small {
    font-size: 0.68rem;
    opacity: 0.78;
  }

  .ai-tutor-widget__trigger strong {
    font-size: 0.9rem;
  }

  .ai-tutor-widget__mark {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 50%;
    background: #fff7ee;
    color: #8b1e14;
    font-family: "Yu Mincho", "Hiragino Mincho ProN", Georgia, serif;
    font-weight: 900;
  }

  .ai-tutor-widget__panel {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: min(460px, calc(100vw - 36px));
    height: min(640px, calc(100dvh - 36px));
    border-radius: 20px;
    box-shadow: 0 28px 86px rgba(35, 9, 6, 0.48);
  }

  .ai-tutor-widget.is-open .ai-tutor-widget__trigger {
    opacity: 0;
    pointer-events: none;
  }

  .ai-tutor--widget {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 20px;
    background: var(--bg);
  }

  .ai-tutor--widget .ai-tutor__toolbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto 40px;
    grid-template-areas:
      "identity identity identity close ."
      "level mode mode reset .";
    gap: 10px;
    padding: 12px;
    overflow: visible;
  }

  .ai-tutor--widget .ai-tutor__identity {
    grid-area: identity;
    min-width: 0;
    padding-right: 0;
    border-right: 0;
  }

  .ai-tutor--widget .ai-tutor__fullscreen {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    min-width: 40px;
    padding: 0;
    justify-content: center;
  }

  .ai-tutor--widget .ai-tutor__fullscreen > span:last-child {
    display: none;
  }

  .ai-tutor--widget .ai-tutor__close {
    grid-area: close;
    width: 40px;
    min-width: 40px;
    justify-self: end;
  }

  .ai-tutor--widget .ai-tutor__control--level { grid-area: level; }
  .ai-tutor--widget .ai-tutor__control--mode { grid-area: mode; min-width: 0; }

  .ai-tutor--widget .ai-tutor__control select {
    width: 100%;
    min-width: 0;
  }

  .ai-tutor--widget .ai-tutor__reset {
    grid-area: reset;
    margin-left: 0;
    align-self: end;
    white-space: nowrap;
  }

  .ai-tutor--widget .ai-tutor__reset > span:first-child {
    display: none;
  }

  .ai-tutor--widget .ai-tutor__workspace {
    flex: 1;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .ai-tutor--widget .ai-tutor__messages {
    min-height: 0;
    max-height: none;
    padding: 14px;
  }

  .ai-tutor--widget .ai-tutor__options {
    padding-inline: 14px;
  }

  .ai-tutor--widget .ai-tutor__composer {
    padding: 12px;
  }

  .ai-tutor--widget .ai-tutor__composer > div {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  @media (max-width: 840px) {
    .ai-tutor__workspace { grid-template-columns: minmax(0, 1fr); }

    .ai-tutor__starters {
      border-right: 0;
      border-bottom: 1px solid var(--line);
      padding: 18px;
    }

    .ai-tutor__starter-list {
      display: flex;
      gap: 9px;
      overflow-x: auto;
      padding-bottom: 4px;
      scrollbar-width: thin;
    }

    .ai-tutor__starter-list button {
      flex: 0 0 190px;
    }

    .ai-tutor__seal { display: none; }
    .ai-tutor__messages { min-height: 420px; padding: 18px; }
    .ai-tutor__options { padding-inline: 18px; }
  }

  @media (max-width: 560px) {
    .ai-tutor { border-radius: 14px; }
    .ai-tutor__toolbar { padding: 10px 58px 10px 10px; }
    .ai-tutor__fullscreen { top: 10px; right: 10px; }
    .ai-tutor__fullscreen > span:last-child { display: none; }
    .ai-tutor__messages { min-height: 390px; max-height: 520px; padding: 14px; }
    .ai-message__speaker { display: none; }
    .ai-message__bubble { padding: 12px; }
    .ai-tutor__composer { padding: 12px; }
    .ai-tutor__composer > div { grid-template-columns: minmax(0, 1fr); }
    .ai-tutor__composer button[type="submit"] { min-height: 46px; grid-auto-flow: column; }

    .ai-tutor.is-fullscreen {
      inset: 0;
      height: 100dvh;
      border: 0;
      border-radius: 0;
    }

    .ai-tutor.is-fullscreen .ai-tutor__starters {
      display: none;
    }

    .ai-tutor-widget {
      right: 12px;
      bottom: 12px;
    }

    .ai-tutor-widget__trigger {
      min-height: 54px;
      padding: 6px 13px 6px 6px;
    }

    .ai-tutor-widget__mark {
      width: 40px;
      height: 40px;
    }

    .ai-tutor-widget__panel {
      right: 8px;
      bottom: 8px;
      width: calc(100vw - 16px);
      height: min(620px, calc(100dvh - 24px));
      border-radius: 14px;
    }

    .ai-tutor--widget {
      border-radius: 14px;
    }

    .ai-tutor--widget .ai-tutor__identity small,
    .ai-tutor--widget .ai-tutor__fullscreen > span:last-child {
      display: none;
    }

    .ai-tutor--widget .ai-tutor__toolbar {
      grid-template-columns: auto minmax(0, 1fr) auto auto 40px;
      grid-template-areas:
        "identity identity identity close ."
        "level mode mode reset .";
      gap: 8px;
      padding: 10px;
    }

    .ai-tutor--widget .ai-tutor__fullscreen {
      top: 10px;
      right: 10px;
    }

    .ai-tutor--widget .ai-tutor__reset {
      min-height: 36px;
      padding-inline: 7px;
      white-space: normal;
      line-height: 1.1;
    }

    .ai-tutor--widget .ai-tutor__composer > div {
      grid-template-columns: minmax(0, 1fr) auto;
    }

    .ai-tutor--widget .ai-tutor__composer button[type="submit"] {
      min-width: 70px;
      min-height: 58px;
      grid-auto-flow: row;
    }
  }

  @media (max-width: 420px) {
    .ai-tutor--widget .ai-tutor__reset {
      display: grid;
      place-items: center;
      width: 40px;
      min-width: 40px;
      padding: 0;
      font-size: 1.15rem;
    }

    .ai-tutor--widget .ai-tutor__reset > span:first-child { display: inline; }
    .ai-tutor--widget .ai-tutor__reset [data-ai-reset-label] { display: none; }
  }

  .game-panel--writing {
    gap: 20px;
  }

  .game-select {
    min-height: 46px;
    min-width: min(100%, 240px);
    padding: 0 14px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    background: var(--bg-panel);
    color: var(--text);
    font: inherit;
    font-size: 1rem;
  }

  .game-writing-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }

  .game-writing-tabs .game-button.is-active {
    background: color-mix(in srgb, var(--accent) 16%, var(--bg-panel));
    border-color: color-mix(in srgb, var(--accent) 55%, var(--line-strong));
    color: var(--accent);
  }

  .game-writing-tab {
    display: none;
  }

  .game-writing-tab.is-active {
    display: grid;
    gap: 18px;
  }

  .game-writing-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
  }

  .game-writing-score {
    display: inline-flex;
    justify-self: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-panel) 96%, transparent);
    color: var(--text);
    font-size: 1.02rem;
    font-weight: 700;
  }

  .game-writing-score-divider {
    color: color-mix(in srgb, var(--muted) 60%, transparent);
  }

  .game-writing-stage {
    display: grid;
    gap: 16px;
    justify-items: center;
  }

  .game-writing-board,
  .game-writing-stroke-panel {
    display: grid;
    gap: 12px;
    justify-items: center;
    width: 100%;
  }

  .game-writing-canvas-wrap {
    position: relative;
    width: min(100%, 350px);
    aspect-ratio: 1 / 1;
    border: 2px dashed var(--line-strong);
    border-radius: 12px;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--bg-panel) 94%, white 6%) 0%, color-mix(in srgb, var(--bg) 88%, white 12%) 100%);
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
  }

  .game-writing-canvas-wrap::before,
  .game-writing-canvas-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .game-writing-canvas-wrap::before {
    background:
      linear-gradient(to right, transparent calc(50% - 0.5px), color-mix(in srgb, var(--line) 80%, transparent) calc(50% - 0.5px), color-mix(in srgb, var(--line) 80%, transparent) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
      linear-gradient(to bottom, transparent calc(50% - 0.5px), color-mix(in srgb, var(--line) 80%, transparent) calc(50% - 0.5px), color-mix(in srgb, var(--line) 80%, transparent) calc(50% + 0.5px), transparent calc(50% + 0.5px));
  }

  .game-writing-canvas-wrap::after {
    border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
    border-radius: 12px;
  }

  .game-writing-ghost {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(0, 0, 0, 0.08);
    font-family: "Klee One", "Noto Serif JP", serif;
    font-size: clamp(11rem, 28vw, 20.5rem);
    line-height: 1;
    user-select: none;
    pointer-events: none;
  }

  .game-writing-canvas-wrap canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .game-writing-canvas-wrap [data-role="canvas-temp"] {
    cursor: crosshair;
    touch-action: none;
  }

  .game-writing-actions,
  .game-writing-stroke-actions {
    justify-content: center;
  }

  .game-writing-stroke-board {
    display: grid;
    gap: 12px;
    justify-items: center;
    width: min(100%, 280px);
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg-panel) 95%, transparent);
  }

  .game-writing-stroke-viewport {
    display: grid;
    place-items: center;
    width: 150px;
    height: 150px;
    border: 2px solid color-mix(in srgb, var(--accent) 58%, var(--line));
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg) 72%, white 28%);
    overflow: hidden;
  }

  .game-writing-stroke-viewport svg {
    width: 100%;
    height: 100%;
  }

  .game-writing-stroke-viewport text {
    fill: var(--stroke-number);
  }

  .game-writing-stroke-meta {
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
    font-weight: 600;
  }

  .game-writing-help {
    justify-items: start;
    text-align: left;
  }

  .game-writing-help h3,
  .game-writing-help p,
  .game-writing-help ol {
    margin: 0;
  }

  .game-writing-help ol {
    display: grid;
    gap: 8px;
    padding-left: 1.2rem;
  }

  .leaderboard-list {
    display: grid;
    gap: 10px;
    margin-top: 20px;
  }

  .leaderboard-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--bg-panel) 96%, transparent);
  }

  .leaderboard-rank {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 6px;
    background: var(--accent);
    color: var(--accent-contrast);
    font-weight: 800;
  }

  .leaderboard-student strong {
    display: block;
    font-size: 1.05rem;
  }

  .leaderboard-student span {
    color: var(--muted);
    font-size: 0.9rem;
  }

  .game-flashcard-details {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg-panel) 96%, transparent);
  }

  @media (max-width: 640px) {
    .leaderboard-row {
      grid-template-columns: auto minmax(0, 1fr);
    }

    .game-flashcard {
      height: 300px;
    }

    .game-flashcard__face {
      padding: 24px 18px;
    }

    .game-flashcard__words-list {
      grid-template-columns: 1fr;
    }

    .game-image-match-board {
      grid-template-columns: 1fr;
    }

    .game-image-match-grid {
      gap: 10px;
    }

    .game-image-match-tile {
      min-height: 118px;
    }
  }

  .game-button--mic {
    min-height: 58px;
    padding-inline: 26px;
    border-radius: 999px;
    font-size: 1.05rem;
    box-shadow: 0 8px 18px rgba(139, 30, 20, 0.18);
  }

  .game-button--mic.is-listening {
    animation: pulseMic 1.35s infinite;
  }

  @keyframes pulseMic {
    0% {
      box-shadow: 0 0 0 0 rgba(139, 30, 20, 0.38);
    }

    70% {
      box-shadow: 0 0 0 16px rgba(139, 30, 20, 0);
    }

    100% {
      box-shadow: 0 0 0 0 rgba(139, 30, 20, 0);
    }
  }

  .game-voice-feedback {
    min-height: 24px;
    color: var(--muted);
    font-weight: 600;
  }

  .game-accuracy {
    width: min(100%, 560px);
    height: 18px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(104, 97, 88, 0.14);
  }

  .game-accuracy__bar {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #d0a323;
    transition: background 160ms ease;
  }

  .game-accuracy__bar[data-score="high"] {
    background: #1f8f58;
  }

  .game-accuracy__bar[data-score="mid"] {
    background: #d0a323;
  }

  .game-accuracy__bar[data-score="low"] {
    background: #c53a2b;
  }

  .jp-translation-stack {
    display: grid;
    gap: 14px;
  }

  .jp-translation-block {
    display: grid;
    gap: 8px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-panel) 94%, transparent);
  }

  .jp-translation-block h3 {
    margin: 0;
    font-size: clamp(1.05rem, 2vw, 1.35rem);
  }

  .jp-translation-block p {
    margin: 0;
    color: var(--text);
    font-size: clamp(1.2rem, 2.4vw, 1.7rem);
    font-weight: 700;
    line-height: 1.45;
  }

  .game-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid var(--accent);
    border-radius: 6px;
    background: var(--accent);
    color: var(--accent-contrast);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
  }

  .game-button:hover {
    background: color-mix(in srgb, var(--accent) 88%, black 12%);
    border-color: color-mix(in srgb, var(--accent) 88%, black 12%);
    transform: translateY(-1px);
  }

  .game-button--secondary,
  .game-button--ghost {
    background: transparent;
    color: var(--text);
    border-color: var(--line-strong);
  }

  .game-custom-builder input,
  .game-gap-input {
    border: 1px solid var(--line-strong);
    background: color-mix(in srgb, var(--bg-panel) 96%, transparent);
    color: var(--text);
    font: inherit;
  }

  .game-custom-builder input {
    flex: 1 1 280px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 6px;
  }

  .game-gap-input {
    min-height: 40px;
    padding: 0 8px;
    text-align: center;
    border-width: 0 0 2px;
    border-radius: 0;
    background: transparent;
    outline: none;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    max-width: none;
  }

  .game-gap-input.is-correct {
    border-bottom-color: #1f8a4d;
    background: rgba(31, 138, 77, 0.08);
    color: #1f8a4d;
  }

  .game-gap-input.is-wrong {
    border-bottom-color: #c53a2b;
    background: rgba(197, 58, 43, 0.08);
    color: #c53a2b;
  }

  .translation-list {
    display: grid;
    gap: 10px;
    align-content: start;
    max-height: min(72vh, 640px);
    overflow-y: auto;
    padding: 4px 8px 4px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
  }

  .translation-list::-webkit-scrollbar {
    width: 8px;
  }

  .translation-list::-webkit-scrollbar-track {
    background: transparent;
  }

  .translation-list::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--accent) 26%, var(--bg-panel));
    border-radius: 999px;
  }

  .translation-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background:
      radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 42%),
      color-mix(in srgb, var(--bg-panel) 94%, transparent);
    box-shadow: 0 12px 30px color-mix(in srgb, var(--shadow) 36%, transparent);
    min-width: 0;
  }

  .translation-flag {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border: 3px solid color-mix(in srgb, var(--bg-panel) 92%, white 8%);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-panel) 92%, white 8%);
    box-shadow:
      0 0 0 1px var(--line),
      0 8px 18px color-mix(in srgb, var(--shadow) 30%, transparent);
    line-height: 1;
  }

  .translation-flag::before,
  .translation-flag::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  .translation-flag::after {
    background:
      radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.65), transparent 34%),
      linear-gradient(145deg, transparent 58%, rgba(0, 0, 0, 0.15));
    mix-blend-mode: soft-light;
  }

  .flag-pt::before {
    background:
      radial-gradient(circle at 50% 50%, #1f4bb6 0 18%, transparent 19%),
      conic-gradient(from 45deg, transparent 0 25%, #f6d743 0 50%, transparent 0 75%, #f6d743 0),
      #159447;
  }

  .flag-en::before {
    background:
      linear-gradient(90deg, transparent 42%, #c8102e 42% 58%, transparent 58%),
      linear-gradient(0deg, transparent 42%, #c8102e 42% 58%, transparent 58%),
      linear-gradient(32deg, transparent 43%, #fff 43% 48%, #c8102e 48% 52%, #fff 52% 57%, transparent 57%),
      linear-gradient(-32deg, transparent 43%, #fff 43% 48%, #c8102e 48% 52%, #fff 52% 57%, transparent 57%),
      #012169;
  }

  .flag-es::before {
    background: linear-gradient(#aa151b 0 25%, #f1bf00 25% 75%, #aa151b 75%);
  }

  .flag-ko::before {
    background:
      radial-gradient(circle at 50% 44%, #cd2e3a 0 14%, transparent 15%),
      radial-gradient(circle at 50% 56%, #0047a0 0 14%, transparent 15%),
      linear-gradient(90deg, transparent 0 18%, #111 18% 23%, transparent 23% 77%, #111 77% 82%, transparent 82%),
      #fff;
  }

  .flag-fr::before {
    background: linear-gradient(90deg, #0055a4 0 33%, #fff 33% 66%, #ef4135 66%);
  }

  .flag-it::before {
    background: linear-gradient(90deg, #009246 0 33%, #fff 33% 66%, #ce2b37 66%);
  }

  .flag-de::before {
    background: linear-gradient(#000 0 33%, #dd0000 33% 66%, #ffce00 66%);
  }

  .flag-id::before {
    background: linear-gradient(#ce1126 0 50%, #fff 50%);
  }

  .flag-vi::before {
    background: #da251d;
  }

  .flag-vi .flag-mark {
    position: relative;
    z-index: 1;
    color: #ffdd00;
    font-size: 1.35rem;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
  }

  .flag-th::before {
    background: linear-gradient(#a51931 0 16%, #f4f5f8 16% 28%, #2d2a4a 28% 72%, #f4f5f8 72% 84%, #a51931 84%);
  }

  .flag-ja::before {
    background: radial-gradient(circle at 50% 50%, #bc002d 0 30%, transparent 31%), #fff;
  }

  .translation-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
  }

  .translation-copy strong,
  .translation-item > strong {
    font-size: 0.94rem;
    color: var(--text);
    line-height: 1.2;
  }

  .translation-copy span,
  .translation-item > span:not(.translation-flag):not(.translation-copy) {
    display: block;
    color: var(--muted);
    line-height: 1.5;
    text-align: left;
    min-width: 0;
    width: 100%;
    word-break: break-word;
  }

  .word-extra-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
  }

  .word-extra-card {
    display: grid;
    gap: 8px;
    align-content: start;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background:
      radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 44%),
      color-mix(in srgb, var(--bg-panel) 94%, transparent);
  }

  .word-extra-card--wide {
    grid-column: 1 / -1;
  }

  .word-extra-card h3 {
    margin: 0;
    color: var(--accent);
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .word-extra-card p,
  .word-extra-card ul {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
  }

  .word-extra-card ul {
    padding-left: 1.2rem;
  }

  .word-extra-card li + li {
    margin-top: 6px;
  }

  .word-media-grid {
    display: grid;
    gap: 16px;
    margin-top: 18px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: stretch;
  }

  .stroke-player,
  .illustrated-panel {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-panel) 94%, transparent);
  }

  .word-media-grid > .stroke-player,
  .word-media-grid > .illustrated-panel {
    height: 100%;
  }

  .illustrated-panel {
    grid-template-rows: auto 1fr;
  }

  .word-media-grid > .illustrated-panel .illustrated-frame {
    height: 100%;
    min-height: 320px;
  }

  .illustrated-frame {
    overflow: hidden;
    display: flex;
    align-items: stretch;
    border: 1px solid var(--line);
    border-radius: 8px;
    background:
      radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 42%),
      color-mix(in srgb, var(--bg-panel) 92%, transparent);
  }

  .illustrated-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .stroke-word {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }

  .stroke-char,
  .stroke-char-static {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: 42px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: color-mix(in srgb, var(--bg-panel) 92%, transparent);
    font-size: 1.2rem;
    font-weight: 700;
  }

  .stroke-char {
    cursor: pointer;
    color: var(--text);
    font: inherit;
  }

  .stroke-char.is-active {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
  }

  .stroke-char-static {
    color: var(--muted);
    font-weight: 500;
  }

  .stroke-char-inline {
    color: var(--muted);
    font-size: 1.08rem;
    font-weight: 600;
    line-height: 1;
    padding: 0 2px;
  }

  .stroke-stage {
    display: grid;
    grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
    gap: 18px;
    align-items: center;
  }

  .stroke-viewport {
    display: grid;
    place-items: center;
    min-height: 172px;
    padding: 14px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-panel) 90%, transparent);
  }

  .stroke-viewport svg,
  .stroke-viewport img,
  .stroke-viewport object {
    width: 140px;
    height: 140px;
    object-fit: contain;
    border: 0;
  }

  .stroke-meta {
    display: grid;
    gap: 12px;
  }

  .stroke-character {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 5vw, 4rem);
    line-height: 1;
  }

  .stroke-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
  }

  .stroke-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: color-mix(in srgb, var(--bg-panel) 92%, transparent);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
  }

  .stroke-button:disabled {
    opacity: 0.45;
    cursor: default;
  }

  .stroke-count {
    color: var(--muted);
    font-size: 0.92rem;
    font-weight: 600;
  }

  .stroke-progress {
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 600;
  }

  .stroke-error {
    color: var(--muted);
    font-size: 0.92rem;
    text-align: center;
  }

  .stroke-viewport svg {
    width: 140px;
    height: 140px;
    display: block;
  }

  .stroke-viewport text {
    fill: var(--stroke-number);
  }

  .directory-card,
  .feature-card {
    min-height: 100%;
  }

  .entry-japanese {
    margin-bottom: 8px;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.04em;
  }

  .entry-muted {
    display: block;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.45;
  }

  .entry-translation {
    margin-top: 14px;
    font-weight: 600;
  }

  .jp-hover {
    cursor: help;
    border-bottom: 1px dotted color-mix(in srgb, var(--accent) 65%, transparent);
  }

  .panel-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    align-items: end;
    margin-bottom: 16px;
  }

  .price small {
    font-size: 0.9rem;
    color: var(--muted);
  }

  .divider {
    width: 100%;
    height: 1px;
    margin: 24px 0;
    background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
  }

  .footer {
    margin-top: 28px;
    padding: 18px 0 0;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.92rem;
  }

  .footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
  }

  .footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-weight: 700;
  }

  .footer-nav a:hover {
    color: var(--accent);
  }

  .footer p {
    margin: 0;
  }

  .info-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.9fr);
    gap: 16px;
  }

  .info-section + .info-section {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
  }

  .info-section h2,
  .contact-form-panel h2,
  .contact-details-panel h2 {
    margin: 0 0 12px;
    font-size: clamp(1.35rem, 3vw, 1.9rem);
  }

  .info-section p,
  .contact-form-panel p,
  .contact-details-panel p {
    margin: 0 0 12px;
    color: var(--muted);
    line-height: 1.7;
  }

  .info-list {
    margin: 14px 0 0;
    padding-left: 18px;
    color: var(--text);
  }

  .info-list li + li {
    margin-top: 8px;
  }

  .sitemap-link-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
  }

  .sitemap-link-group {
    display: grid;
    gap: 10px;
    align-content: start;
  }

  .sitemap-link-group h2 {
    margin: 0;
    font-size: 1.05rem;
  }

  .sitemap-link-group nav {
    display: grid;
    gap: 8px;
  }

  .sitemap-link-group a {
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
    color: var(--text);
    font-weight: 700;
  }

  .sitemap-link-group a:hover {
    color: var(--accent);
  }

  .info-aside-list {
    margin: 16px 0 0;
    padding-left: 18px;
  }

  .info-aside-list li + li {
    margin-top: 8px;
  }

  .contact-status {
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-weight: 700;
  }

  .contact-status[data-status="success"] {
    border-color: color-mix(in srgb, #137a3d 44%, var(--line));
    background: color-mix(in srgb, #137a3d 14%, var(--bg-panel));
    color: #137a3d;
  }

  .contact-status[data-status="error"] {
    border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
    background: color-mix(in srgb, var(--accent) 10%, var(--bg-panel));
    color: var(--accent);
  }

  .hidden-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  .contact-page-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    gap: 16px;
  }

  .contact-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-top: 18px;
  }

  .contact-detail-card {
    min-height: 100%;
  }

  .contact-detail-card h3 {
    margin: 0 0 8px;
    font-size: 1.05rem;
  }

  .auth-form textarea {
    width: 100%;
    min-height: 180px;
    resize: vertical;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg-panel-strong) 86%, white 14%);
    color: var(--text);
    padding: 13px 14px;
    font: inherit;
  }

  .auth-form textarea:focus {
    outline: 2px solid color-mix(in srgb, var(--accent) 54%, white 46%);
    outline-offset: 2px;
    border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
  }

  .breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 700;
  }

  .breadcrumb a:hover {
    color: var(--accent);
  }

  .breadcrumb-separator {
    color: color-mix(in srgb, var(--muted) 64%, transparent);
  }

  .empty-state {
    text-align: left;
    background: linear-gradient(135deg, var(--bg-panel) 0%, color-mix(in srgb, var(--bg-panel) 86%, var(--accent-soft) 14%) 100%);
  }

  code {
    padding: 1px 5px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: color-mix(in srgb, var(--bg-panel) 80%, black 20%);
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.88em;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .locale-picker {
    flex: 0 0 auto;
  }

  .locale-summary {
    cursor: pointer;
    gap: 10px;
    background: transparent;
  }

  .locale-current {
    font-size: 1.08rem;
  }

  .locale-caret {
    color: var(--muted);
    font-size: 0.8rem;
  }

  .topbar-dialog {
    width: min(420px, calc(100vw - 32px));
    max-height: min(78svh, 640px);
    margin: auto;
    padding: 0;
    overflow: hidden;
    overscroll-behavior: contain;
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    background: var(--bg-panel-strong);
    color: var(--text);
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.32);
  }

  .topbar-dialog[open] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .topbar-dialog::backdrop {
    background: rgba(12, 8, 7, 0.68);
    backdrop-filter: blur(3px);
  }

  .topbar-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 16px 16px 12px;
    border-bottom: 1px solid var(--line);
  }

  .topbar-dialog-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.05rem;
    line-height: 1.3;
  }

  .topbar-dialog-close {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-size: 1.35rem;
  }

  .topbar-dialog-close:hover {
    border-color: var(--line-strong);
    background: var(--accent-soft);
  }

  .locale-menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px 16px 18px;
    overflow-y: auto;
  }

  .locale-option-form {
    margin: 0;
  }

  .locale-link {
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    padding-inline: 12px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
  }

  .locale-link.is-active {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--text);
  }

  .locale-suggestion {
    grid-column: 1 / -1;
    margin: 0 0 4px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent-soft) 58%, var(--bg-panel) 42%);
    color: var(--muted);
    line-height: 1.45;
  }

  .topbar-search-menu {
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding: 16px;
  }

.auth-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
gap: 16px;
}

.auth-layout--center {
grid-template-columns: minmax(0, 1fr);
place-items: center;
min-height: calc(100vh - 190px);
padding: 36px 0 56px;
}

.auth-stack {
display: grid;
gap: 14px;
}

.auth-panel {
position: relative;
overflow: hidden;
width: min(100%, 560px);
padding: 34px;
box-shadow: 0 28px 70px rgba(52, 35, 23, 0.16);
}

.auth-panel::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 6px;
background: linear-gradient(90deg, var(--accent), var(--gold));
}

.auth-panel-head {
display: grid;
gap: 10px;
margin-bottom: 22px;
}

.auth-panel h1 {
margin: 0;
font-size: 2.75rem;
line-height: 0.96;
letter-spacing: 0;
}

.auth-help {
margin: 0;
line-height: 1.65;
}

.auth-help a {
color: var(--accent);
font-weight: 800;
text-decoration: none;
}

.auth-help a:hover {
text-decoration: underline;
}

.auth-form {
display: grid;
gap: 12px;
margin-top: 18px;
}

  .auth-form label {
    display: grid;
    gap: 7px;
    color: var(--muted);
    font-size: 0.92rem;
    font-weight: 600;
  }

  .auth-form input {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: color-mix(in srgb, var(--bg-panel) 92%, transparent);
    color: var(--text);
    font: inherit;
  }

  .auth-form input:focus {
    outline: 2px solid color-mix(in srgb, var(--accent) 36%, transparent);
    outline-offset: 2px;
  }

  .turnstile-wrap {
    display: grid;
    gap: 8px;
  }

  .turnstile-wrap > div[data-turnstile-container] {
    min-height: 65px;
  }

  .auth-note,
  .auth-feedback {
    font-size: 0.92rem;
    color: var(--muted);
  }

  .auth-feedback[data-state="error"] {
    color: #c53a2b;
  }

.auth-feedback[data-state="success"] {
color: #1f8f58;
}

.auth-member-row {
display: grid;
margin-top: 12px;
}

.auth-panel .auth-form .action-button,
.auth-member-row .action-button {
width: 100%;
justify-content: center;
min-height: 46px;
}

.auth-select {
width: 100%;
min-height: 48px;
padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: color-mix(in srgb, var(--bg-panel) 92%, transparent);
    color: var(--text);
    font: inherit;
  }

  @media (max-width: 1060px) {
    .topbar,
    .game-page-grid,
    .course-lesson-layout,
    .course-overview-hero,
    .auth-layout,
    .hero-grid,
    .dojo-showcase-grid,
    .dojo-arcade-grid,
    .dojo-hero-layout,
    .dojo-focus-grid,
    .dojo-activity-grid,
    .sales-hero-redesign,
    .sales-proof-grid,
    .sales-path-grid,
    .sales-choice-grid,
    .sales-feature-grid,
    .sales-price-grid,
    .split-grid,
    .sales-compare,
    .sales-identification,
    .sales-steps,
    .faq-list,
    .directory-grid,
    .plan-grid,
    .stats-grid,
    .dojo-stats-grid {
      grid-template-columns: 1fr;
    }

    .nav-strip {
      justify-content: start;
    }

    .topbar-track {
      padding-inline: 14px;
      gap: 10px;
    }

    .sales-hero-redesign {
      min-height: auto;
    }

    .sales-hero-shell {
      grid-template-columns: 1fr;
    }

    .sales-hero-copy {
      justify-items: center;
      text-align: center;
    }

    .sales-hero-redesign .cta-row {
      justify-content: center;
    }

    .sales-hero-showcase {
      min-height: 390px;
      margin: 0 auto;
    }

    .sales-path-grid {
      grid-template-columns: 1fr;
      gap: 24px;
    }

    .stroke-stage {
      grid-template-columns: 1fr;
    }

    .word-extra-grid {
      grid-template-columns: 1fr;
    }

    .course-sidebar {
      position: static;
      max-height: none;
    }

    .course-module-entry {
      grid-template-columns: 1fr;
    }

    .course-module-actions {
      justify-items: start;
      min-width: 0;
    }
  }

  @media (max-width: 720px) {
    html,
    body {
      overflow-x: hidden;
    }

    .shell {
      width: 100%;
    }

.page-content {
padding-inline: 14px;
overflow-x: clip;
}

    .footer-nav a,
    a.tag,
    .breadcrumb a,
    .pagination a {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
    }

.auth-layout--center {
min-height: auto;
padding: 20px 0 34px;
}

.auth-panel {
padding: 24px;
}

.auth-panel h1 {
font-size: 2.15rem;
line-height: 1;
}

.course-sidebar {
padding: 0;
}

    .course-mobile-summary {
      display: block;
    }

    .course-sidebar:not([open]) .course-sidebar-inner {
      display: none;
    }

    .course-sidebar-inner {
      padding: 0 16px 16px;
    }

    .course-overview-header {
      align-items: start;
      flex-direction: column;
    }

    .course-module-media {
      min-height: 120px;
    }

    .dojo-dashboard {
      padding: 18px;
    }

    .sales-hero-redesign,
    .sales-band {
      padding-inline: 18px;
    }

    .sales-hero-copy h1 {
      font-size: clamp(2.65rem, 14vw, 4rem);
      line-height: 0.94;
    }

    .sales-choice-grid,
    .sales-price-panel {
      padding: 18px;
      border-radius: 22px;
    }

    .sales-hero-showcase {
      min-height: 340px;
    }

    .sales-showcase-layer {
      width: min(100%, 232px);
    }

    .sales-showcase-layer--primary {
      inset: 0 auto auto 0;
    }

    .sales-showcase-layer--secondary {
      inset: 18% 0 auto auto;
    }

    .sales-showcase-layer--tertiary {
      inset: auto auto 0 6%;
    }

    .sales-feature-grid {
      gap: 34px;
    }

    .dojo-hero-copy h1 {
      font-size: clamp(2.15rem, 11vw, 3.5rem);
      max-width: 100%;
    }

    .dojo-hero-copy .lead,
    .dojo-focus-copy p,
    .dojo-heading-copy p {
      max-width: 100%;
    }

    .dojo-hero-art {
      min-height: 150px;
    }

    .dojo-stat-card {
      min-height: auto;
      justify-items: start;
      text-align: left;
    }

    .dojo-focus-shell {
      padding: 18px;
    }

    .dojo-focus-sentence {
      font-size: clamp(1.5rem, 9vw, 2.2rem);
      gap: 12px;
    }

    .dojo-focus-side,
    .dojo-heading-row,
    .dojo-activity-footer {
      align-items: stretch;
      justify-items: stretch;
      flex-direction: column;
    }

    .dojo-activity-card {
      padding: 18px;
      border-radius: 18px;
    }

    .dojo-card,
    .dojo-card--spotlight {
      padding: 16px;
      border-radius: 16px;
    }

    .dojo-visual--mixed {
      min-height: 174px;
    }

    .dojo-visual {
      min-height: 128px;
    }

    .dojo-course-preview,
    .dojo-flash-stack,
    .dojo-stroke-card {
      width: 100%;
      max-width: none;
    }

    .dojo-preview-sentence {
      font-size: 1.2rem;
      gap: 10px;
    }

    .dojo-blank {
      width: 60px;
    }

    .game-toolbar__stats,
    .game-toolbar__filters,
    .game-card__actions,
    .game-custom-builder {
      align-items: stretch;
    }

    .progress-link {
      flex: 0 0 clamp(9rem, 48vw, 11rem);
      min-width: 0;
      width: clamp(9rem, 48vw, 11rem);
      overflow: hidden;
    }

    .progress-foot {
      display: none;
    }

    .topbar {
      padding: 0;
    }

    .topbar-track {
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      gap: 8px;
      overflow-x: auto;
      width: 100%;
      padding-block: 9px;
      padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right));
      scroll-padding-inline: max(12px, env(safe-area-inset-left));
      scroll-snap-type: x proximity;
      scrollbar-width: none;
    }

    .topbar-track::-webkit-scrollbar {
      display: none;
    }

    .brand-block,
    .topbar-nav,
    .topbar-search,
    .nav-strip,
    .utility-strip,
    .account-strip {
      flex: 0 0 auto;
      min-width: max-content;
      border: 0;
      background: transparent;
      box-shadow: none;
      padding: 0;
      min-height: auto;
    }

    .brand-block,
    .utility-strip,
    .topbar-nav,
    .account-strip {
      scroll-snap-align: start;
    }

    .brand-block {
      order: 1;
    }

    .brand-copy > span {
      display: none;
    }

    .utility-strip {
      order: 2;
    }

    .topbar-nav {
      order: 3;
    }

    .account-strip {
      order: 4;
    }

    .topbar-track.is-member .account-strip {
      order: 3;
    }

    .topbar-track.is-member .topbar-nav {
      order: 4;
    }

    .nav-strip {
      justify-content: start;
      flex-wrap: nowrap;
      flex: 0 0 auto;
      min-width: max-content;
      overflow: visible;
    }

    .nav-link {
      flex: 0 0 auto;
      white-space: nowrap;
    }

    .action-strip {
      display: contents;
    }

    .directory-filters {
      grid-template-columns: 1fr;
      justify-items: start;
    }

    .filter-row {
      grid-column: auto;
      width: 100%;
      flex-wrap: nowrap;
      justify-content: flex-start;
      overflow-x: auto;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }

    .filter-row::-webkit-scrollbar {
      display: none;
    }

    .topbar-dialog {
      width: calc(100vw - max(12px, env(safe-area-inset-left)) - max(12px, env(safe-area-inset-right)));
      max-height: min(76svh, 620px);
      margin-block-start: auto;
      margin-block-end: max(12px, env(safe-area-inset-bottom));
      margin-inline-start: max(12px, env(safe-area-inset-left));
      margin-inline-end: max(12px, env(safe-area-inset-right));
      border-radius: 16px;
    }

    .topbar-search-menu {
      flex-direction: column;
    }

    .topbar-search-menu .action-button {
      width: 100%;
    }

    h1 {
      font-size: clamp(2rem, 9.5vw, 3rem);
    }

    .hero-panel,
    .panel,
    .directory-card,
    .plan-card,
    .feature-card,
    .empty-state,
    .translation-item {
      max-width: 100%;
      min-width: 0;
    }

    .hero-header-row {
      gap: 14px;
    }

    .hero-header-row .meta-row {
      width: 100%;
      margin-top: 4px;
      gap: 10px;
      row-gap: 12px;
    }

    .hero-header-row .eyebrow {
      margin-bottom: 0;
    }

    .hero-reading {
      margin-top: 10px;
    }

    .sentence-topbar {
      margin-bottom: 16px;
    }

    .sentence-topbar .meta-row {
      width: auto;
    }

    .tag,
    .action-button,
    .audio-chip {
      max-width: 100%;
    }

    .translation-list {
      max-height: none;
      padding-right: 0;
    }

    .translation-copy,
    .translation-copy strong,
    .translation-copy span {
      min-width: 0;
      word-break: break-word;
    }

    .course-module-card,
    .course-phrase-grid {
      grid-template-columns: 1fr;
    }

    .course-phrase-card {
      padding: 18px;
    }

    .course-phrase-mini-list {
      padding: 14px;
    }

    .course-phrase-mini-list--words .course-phrase-item {
      grid-template-columns: 1fr;
      gap: 6px;
    }
  }

  @media (min-width: 980px) {
    .course-phrase-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* Sales page: cinematic product story */
  .sales-page--cinematic {
    color-scheme: dark;
    --bg: #160b0a;
    --bg-panel: #21100f;
    --bg-panel-strong: #2b1210;
    --bg-soft: rgba(224, 79, 61, 0.12);
    --line: rgba(255, 239, 222, 0.14);
    --line-strong: rgba(255, 239, 222, 0.3);
    --text: #fff7ec;
    --muted: #d8c4b3;
    --accent: #df513f;
    --accent-soft: rgba(223, 81, 63, 0.18);
    --accent-contrast: #fff8ef;
    --ink: #fff7ec;
    --gold: #d6a24e;
    --gold-soft: #4a2e17;
    --sales-night: #160b0a;
    --sales-oxblood: #6f1715;
    --sales-ivory: #fff7ec;
    --sales-ember: #df513f;
    --sales-gold: #d6a24e;
    gap: 12px;
    border-radius: 30px;
    background: var(--sales-night);
    box-shadow: 0 28px 80px rgba(40, 8, 6, 0.24);
    overflow: clip;
    isolation: isolate;
  }

  .sales-page--cinematic .section-kicker:empty,
  .sales-page--cinematic .eyebrow:empty {
    display: none;
  }

  .sales-page--cinematic .sales-hero-redesign {
    min-height: 760px;
    padding: clamp(34px, 6vw, 84px);
    border: 0;
    border-radius: 0;
    background:
      radial-gradient(circle at 72% 34%, rgba(223, 81, 63, 0.28), transparent 27%),
      radial-gradient(circle at 88% 14%, rgba(214, 162, 78, 0.17), transparent 20%),
      linear-gradient(132deg, #130908 0%, #260b0a 52%, #581310 100%);
  }

  .sales-page--cinematic .sales-hero-redesign::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(rgba(255, 247, 236, 0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 247, 236, 0.025) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(90deg, transparent, black 42%, black);
    pointer-events: none;
  }

  .sales-hero-atmosphere {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .sales-hero-atmosphere span {
    position: absolute;
    color: rgba(255, 247, 236, 0.045);
    font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
    font-size: clamp(7rem, 18vw, 18rem);
    font-weight: 900;
    line-height: 1;
    user-select: none;
  }

  .sales-hero-atmosphere span:nth-child(1) {
    left: -3%;
    top: -4%;
    transform: rotate(-9deg);
  }

  .sales-hero-atmosphere span:nth-child(2) {
    right: 32%;
    bottom: -15%;
    transform: rotate(7deg);
  }

  .sales-hero-atmosphere span:nth-child(3) {
    right: -2%;
    top: 8%;
    transform: rotate(12deg);
  }

  .sales-page--cinematic .sales-hero-shell {
    grid-template-columns: minmax(0, 1.04fr) minmax(420px, 0.96fr);
    gap: clamp(36px, 6vw, 86px);
    min-height: 520px;
  }

  .sales-page--cinematic .sales-hero-copy {
    position: relative;
    z-index: 3;
    gap: clamp(18px, 2.5vw, 28px);
  }

  .sales-page--cinematic .sales-hero-copy h1 {
    color: var(--sales-ivory);
    font-family: "MuseoSansRounded", "Museo Sans Rounded", "Avenir Next", "Noto Sans Japanese", sans-serif;
    font-size: clamp(3.2rem, 5.7vw, 5rem);
    line-height: 0.93;
    letter-spacing: -0.035em;
    text-wrap: balance;
  }

  .sales-page--cinematic .sales-hero-copy .lead {
    color: #ead8c7;
    font-size: clamp(1.08rem, 1.65vw, 1.3rem);
    line-height: 1.65;
    text-wrap: pretty;
  }

  .sales-page--cinematic .sales-hero-redesign .cta-row {
    gap: 12px;
  }

  .sales-page--cinematic .action-button {
    min-height: 48px;
    border-radius: 999px;
    padding-inline: 20px;
    transition:
      transform 220ms cubic-bezier(0.2, 1, 0.22, 1),
      box-shadow 220ms ease,
      border-color 220ms ease,
      background 220ms ease;
  }

  .sales-page--cinematic .action-button:hover {
    transform: translateY(-2px);
  }

  .sales-page--cinematic .action-primary {
    border-color: #ef684f;
    background: linear-gradient(135deg, #e95f48, #a92820);
    color: #fffaf3;
    box-shadow: 0 16px 36px rgba(174, 39, 31, 0.34);
  }

  .sales-page--cinematic .action-secondary {
    border-color: rgba(255, 247, 236, 0.28);
    background: rgba(255, 247, 236, 0.07);
    color: var(--sales-ivory);
    box-shadow: none;
  }

  .sales-page--cinematic .sales-hero-showcase {
    --pointer-x: 0deg;
    --pointer-y: 0deg;
    min-height: 530px;
    perspective: 1200px;
    transform: rotateX(var(--pointer-y)) rotateY(var(--pointer-x));
    transform-style: preserve-3d;
    transition: transform 280ms cubic-bezier(0.2, 1, 0.22, 1);
  }

  .sales-showcase-orbit {
    position: absolute;
    inset: 10% 8%;
    border: 1px solid rgba(214, 162, 78, 0.26);
    border-radius: 50%;
    transform: rotate(-18deg);
  }

  .sales-showcase-orbit::before,
  .sales-showcase-orbit::after {
    content: "";
    position: absolute;
    border-radius: 50%;
  }

  .sales-showcase-orbit::before {
    inset: 14%;
    border: 1px dashed rgba(255, 247, 236, 0.12);
  }

  .sales-showcase-orbit::after {
    width: 12px;
    height: 12px;
    right: 14%;
    top: 2%;
    background: var(--sales-gold);
    box-shadow: 0 0 30px rgba(214, 162, 78, 0.9);
  }

  .sales-page--cinematic .sales-showcase-layer {
    width: min(100%, 330px);
    transform-style: preserve-3d;
  }

  .sales-page--cinematic .sales-showcase-layer--primary {
    inset: 0 auto auto 0;
    z-index: 3;
  }

  .sales-page--cinematic .sales-showcase-layer--secondary {
    inset: 18% 0 auto auto;
    z-index: 2;
  }

  .sales-page--cinematic .sales-showcase-layer--tertiary {
    inset: auto auto 0 14%;
    z-index: 4;
  }

  .sales-page--cinematic .sales-showcase-card {
    border: 1px solid rgba(255, 247, 236, 0.24);
    border-radius: 24px;
    background:
      linear-gradient(145deg, rgba(255, 250, 242, 0.98), rgba(239, 222, 205, 0.94));
    box-shadow:
      0 34px 80px rgba(0, 0, 0, 0.42),
      0 0 0 1px rgba(255, 255, 255, 0.14) inset;
    backdrop-filter: none;
  }

  .sales-page--cinematic .sales-showcase-card::before {
    background:
      linear-gradient(125deg, rgba(255, 255, 255, 0.5), transparent 40%),
      radial-gradient(circle at top right, rgba(223, 81, 63, 0.18), transparent 36%);
  }

  .sales-page--cinematic .sales-showcase-copy p {
    color: #2a1210;
  }

  .sales-page--cinematic .sales-showcase-card .section-kicker {
    color: #a52a21;
  }

  .sales-page--cinematic .sales-showcase-preview {
    min-height: 180px;
    border-color: rgba(73, 25, 20, 0.14);
    background:
      radial-gradient(circle at 18% 12%, rgba(223, 81, 63, 0.17), transparent 29%),
      linear-gradient(145deg, #fffaf2, #eadbca);
    --bg: #f4e8da;
    --bg-panel: #fffaf2;
    --bg-panel-strong: #ffffff;
    --line: rgba(46, 17, 14, 0.16);
    --line-strong: rgba(46, 17, 14, 0.34);
    --ink: #24100e;
    --muted: #6f5045;
    --accent: #ad2d23;
    --accent-soft: #f3cec2;
    --gold: #b77b28;
    --gold-soft: #ead6b3;
  }

  .sales-page--cinematic .sales-showcase-card .dojo-pill {
    border-color: rgba(56, 20, 16, 0.16);
    background: rgba(255, 255, 255, 0.64);
    color: #65463d;
  }

  .sales-showcase-status {
    position: absolute;
    right: 2%;
    bottom: 2%;
    display: flex;
    gap: 7px;
  }

  .sales-showcase-status span {
    width: 28px;
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 247, 236, 0.18);
    overflow: hidden;
  }

  .sales-showcase-status span::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: var(--sales-gold);
    transform: scaleX(0);
    transform-origin: left;
  }

  .sales-hero-ribbon {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    border-top: 1px solid rgba(255, 247, 236, 0.16);
  }

  .sales-hero-ribbon > div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 7px 12px;
    padding: 22px 24px 0;
    border-right: 1px solid rgba(255, 247, 236, 0.12);
  }

  .sales-hero-ribbon > div:last-child {
    border-right: 0;
  }

  .sales-hero-ribbon span {
    grid-row: 1 / 3;
    color: var(--sales-gold);
    font-size: 0.78rem;
    font-weight: 900;
  }

  .sales-hero-ribbon strong {
    color: var(--sales-ivory);
    font-size: 1rem;
  }

  .sales-hero-ribbon p {
    margin: 0;
    color: #cdb8a5;
    font-size: 0.88rem;
    line-height: 1.55;
  }

  .sales-page--cinematic .sales-band {
    gap: clamp(28px, 5vw, 60px);
    padding: clamp(42px, 7vw, 90px);
    border: 0;
    border-radius: 0;
    background: var(--sales-night);
  }

  .sales-page--cinematic .sales-band .panel-header {
    justify-content: flex-start;
    text-align: left;
  }

  .sales-page--cinematic .sales-band .panel-header h2 {
    color: var(--text);
    font-size: clamp(2.5rem, 5.7vw, 5.2rem);
    line-height: 0.96;
    letter-spacing: -0.035em;
    text-wrap: balance;
  }

  .sales-page--cinematic .sales-band .panel-header p,
  .sales-page--cinematic .sales-band > .lead {
    color: var(--muted);
    font-size: clamp(1rem, 1.5vw, 1.18rem);
    line-height: 1.75;
    text-wrap: pretty;
  }

  .sales-page--cinematic .sales-story-band {
    background:
      radial-gradient(circle at 94% 18%, rgba(214, 162, 78, 0.14), transparent 24%),
      #1b0d0c;
  }

  .sales-page--cinematic .sales-proof-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--line);
  }

  .sales-page--cinematic .sales-proof-item {
    padding: 28px clamp(18px, 3vw, 38px) 0 0;
    border-right: 1px solid var(--line);
  }

  .sales-page--cinematic .sales-proof-item + .sales-proof-item {
    padding-left: clamp(18px, 3vw, 38px);
  }

  .sales-page--cinematic .sales-proof-item:last-child {
    border-right: 0;
  }

  .sales-page--cinematic .sales-proof-number {
    color: var(--sales-gold);
    font-size: clamp(3rem, 6vw, 5.4rem);
    letter-spacing: -0.05em;
  }

  .sales-page--cinematic .sales-proof-item h3 {
    color: var(--sales-ivory);
    font-size: 1.35rem;
  }

  .sales-page--cinematic .sales-proof-item p {
    color: #cbb6a5;
  }

  .sales-page--cinematic .sales-choice-band {
    --text: #22110f;
    --muted: #6a4e43;
    --line: rgba(54, 21, 17, 0.16);
    --line-strong: rgba(54, 21, 17, 0.32);
    --bg-panel: #fffaf2;
    --bg-panel-strong: #ffffff;
    --accent: #ad2d23;
    --accent-soft: #f2d1c7;
    --ink: #22110f;
    color-scheme: light;
    background:
      radial-gradient(circle at 12% 82%, rgba(214, 162, 78, 0.16), transparent 24%),
      var(--sales-ivory);
  }

  .sales-page--cinematic .sales-choice-grid {
    gap: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.38);
    overflow: hidden;
  }

  .sales-page--cinematic .sales-choice {
    padding: clamp(28px, 4vw, 48px);
  }

  .sales-page--cinematic .sales-choice + .sales-choice {
    border-left: 1px solid var(--line);
  }

  .sales-page--cinematic .sales-choice--premium {
    background:
      radial-gradient(circle at 92% 8%, rgba(173, 45, 35, 0.14), transparent 28%),
      #fffdf8;
  }

  .sales-page--cinematic .sales-choice h3 {
    color: var(--text);
    font-size: clamp(1.7rem, 3vw, 2.5rem);
  }

  .sales-page--cinematic .sales-choice p,
  .sales-page--cinematic .sales-choice li {
    color: var(--muted);
  }

  .sales-page--cinematic .sales-choice li::marker {
    color: var(--accent);
  }

  .sales-page--cinematic .sales-path-band {
    background:
      radial-gradient(circle at 50% -10%, rgba(223, 81, 63, 0.22), transparent 34%),
      linear-gradient(180deg, #2a0e0c, #150a09);
  }

  .sales-page--cinematic .sales-path-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(22px, 4vw, 48px);
  }

  .sales-page--cinematic .sales-path-grid::before {
    left: 3%;
    right: 3%;
    top: 26px;
    bottom: auto;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, var(--sales-ember), var(--sales-gold));
  }

  .sales-page--cinematic .sales-path-step {
    padding: 76px 0 0;
  }

  .sales-page--cinematic .sales-path-step .sales-badge {
    left: 0;
    top: 0;
  }

  .sales-page--cinematic .sales-badge {
    width: 52px;
    min-width: 52px;
    height: 52px;
    padding: 0;
    border: 1px solid rgba(255, 247, 236, 0.22);
    background: #8c211b;
    color: var(--sales-ivory);
    box-shadow: 0 12px 26px rgba(104, 18, 14, 0.36);
  }

  .sales-page--cinematic .sales-path-step h3 {
    color: var(--sales-ivory);
    font-size: clamp(1.25rem, 2vw, 1.65rem);
  }

  .sales-page--cinematic .sales-path-step p {
    color: #cbb5a3;
  }

  .sales-page--cinematic .sales-activities-band {
    background:
      radial-gradient(circle at 80% 12%, rgba(214, 162, 78, 0.18), transparent 23%),
      linear-gradient(145deg, #641411, #2a0c0a 72%);
  }

  .sales-page--cinematic #activities,
  .sales-page--cinematic #pricing {
    scroll-margin-top: 82px;
  }

  .sales-activity-experience {
    display: grid;
    gap: 18px;
  }

  .sales-activity-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 0 8px;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .sales-activity-tabs::-webkit-scrollbar {
    display: none;
  }

  .sales-activity-tab {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 247, 236, 0.16);
    border-radius: 999px;
    background: rgba(255, 247, 236, 0.05);
    color: #d9c4b3;
    cursor: pointer;
    font: inherit;
    text-align: left;
    scroll-snap-align: start;
    transition:
      color 220ms ease,
      background 220ms ease,
      border-color 220ms ease,
      transform 220ms cubic-bezier(0.2, 1, 0.22, 1);
  }

  .sales-activity-tab:hover,
  .sales-activity-tab:focus-visible {
    color: var(--sales-ivory);
    border-color: rgba(255, 247, 236, 0.34);
  }

  .sales-activity-tab.is-active {
    border-color: var(--sales-gold);
    background: var(--sales-ivory);
    color: #3a1310;
    transform: translateY(-2px);
  }

  .sales-activity-tab span {
    color: var(--sales-gold);
    font-size: 0.72rem;
    font-weight: 900;
  }

  .sales-activity-tab.is-active span {
    color: #a62a21;
  }

  .sales-activity-tab strong {
    white-space: nowrap;
  }

  .sales-activity-stage {
    position: relative;
    min-height: 540px;
    border: 1px solid rgba(255, 247, 236, 0.18);
    border-radius: 30px;
    background:
      radial-gradient(circle at 12% 18%, rgba(223, 81, 63, 0.18), transparent 26%),
      rgba(16, 7, 6, 0.72);
    box-shadow: 0 34px 90px rgba(18, 4, 3, 0.38);
    overflow: hidden;
  }

  .sales-activity-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(rgba(255, 247, 236, 0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 247, 236, 0.025) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
  }

  .sales-activity-panel {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.7fr);
    gap: clamp(26px, 5vw, 64px);
    align-items: center;
    padding: clamp(24px, 5vw, 58px);
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 24px, 0) scale(0.975);
    pointer-events: none;
    transition:
      opacity 520ms cubic-bezier(0.2, 1, 0.22, 1),
      transform 620ms cubic-bezier(0.2, 1, 0.22, 1),
      visibility 0s linear 620ms;
  }

  .sales-activity-panel.is-active {
    z-index: 2;
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0) scale(1);
    pointer-events: auto;
    transition-delay: 0s;
  }

  .sales-activity-visual {
    min-height: 400px;
    border-color: rgba(61, 23, 18, 0.14);
    border-radius: 26px;
    background:
      radial-gradient(circle at 18% 18%, rgba(223, 81, 63, 0.17), transparent 27%),
      linear-gradient(145deg, #fffaf2, #ead8c5);
    box-shadow:
      0 28px 68px rgba(0, 0, 0, 0.34),
      0 0 0 1px rgba(255, 255, 255, 0.26) inset;
    --bg: #f2e5d6;
    --bg-panel: #fffaf2;
    --bg-panel-strong: #ffffff;
    --line: rgba(48, 18, 15, 0.16);
    --line-strong: rgba(48, 18, 15, 0.34);
    --ink: #27110f;
    --muted: #6b4d42;
    --accent: #ad2d23;
    --accent-soft: #f0cabe;
    --gold: #b67c2d;
    --gold-soft: #ead5af;
  }

  .sales-activity-visual > :not(.dojo-visual-grid) {
    transform: scale(1.35);
  }

  .sales-activity-copy {
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 18px;
  }

  .sales-activity-copy h3 {
    margin: 0;
    color: var(--sales-ivory);
    font-size: clamp(2rem, 4vw, 3.7rem);
    line-height: 0.98;
    letter-spacing: -0.035em;
    text-wrap: balance;
  }

  .sales-activity-copy p {
    margin: 0;
    color: #d8c2b0;
    font-size: 1.05rem;
    line-height: 1.7;
    text-wrap: pretty;
  }

  .sales-activity-copy .dojo-pill {
    border-color: rgba(255, 247, 236, 0.18);
    background: rgba(255, 247, 236, 0.07);
    color: #e4cfbd;
  }

  .sales-activity-progress {
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 247, 236, 0.12);
    overflow: hidden;
  }

  .sales-activity-progress span {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--sales-ember), var(--sales-gold));
    transform: scaleX(0);
    transform-origin: left;
  }

  .sales-activity-experience.is-playing .sales-activity-progress span {
    animation: salesActivityProgress 6s linear infinite;
  }

  .sales-page--cinematic .sales-pricing-band {
    --text: #22110f;
    --muted: #6a4e43;
    --line: rgba(54, 21, 17, 0.16);
    --line-strong: rgba(54, 21, 17, 0.32);
    --bg-panel: #fffaf2;
    --bg-panel-strong: #ffffff;
    --accent: #ad2d23;
    --accent-soft: #f2d1c7;
    --ink: #22110f;
    color-scheme: light;
    background:
      radial-gradient(circle at 88% 16%, rgba(214, 162, 78, 0.22), transparent 22%),
      var(--sales-ivory);
  }

  .sales-page--cinematic .sales-pricing-band .panel-header {
    justify-content: center;
    text-align: center;
  }

  .sales-page--cinematic .sales-price-grid {
    gap: 18px;
  }

  .sales-page--cinematic .sales-price-panel {
    border: 1px solid var(--line);
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.62);
    box-shadow: 0 18px 44px rgba(58, 22, 17, 0.09);
  }

  .sales-page--cinematic .sales-price-panel--featured {
    border-color: rgba(173, 45, 35, 0.4);
    background:
      radial-gradient(circle at 92% 8%, rgba(173, 45, 35, 0.14), transparent 29%),
      #fffdf8;
  }

  .sales-page--cinematic .sales-price-panel h3,
  .sales-page--cinematic .sales-price-row .price {
    color: var(--text);
  }

  .sales-page--cinematic .sales-price-panel p {
    color: var(--muted);
  }

  .sales-page--cinematic .sales-highlight {
    border-color: var(--line);
    color: #694a40;
  }

  .sales-page--cinematic .pricing-note {
    border-color: var(--line);
    background: rgba(255, 255, 255, 0.46);
    color: #694a40;
  }

  .sales-page--cinematic .sales-faq-band {
    background: #1a0c0b;
  }

  .sales-page--cinematic .sales-faq-band .faq-card {
    border-color: var(--line);
  }

  .sales-page--cinematic .sales-faq-band .faq-card h3 {
    color: var(--sales-ivory);
  }

  .sales-page--cinematic .sales-faq-band .faq-card p {
    color: #cbb6a5;
  }

  .sales-page--cinematic .sales-closing-band {
    min-height: 520px;
    place-content: center;
    background:
      radial-gradient(circle at 50% 112%, rgba(214, 162, 78, 0.34), transparent 34%),
      radial-gradient(circle at 14% 16%, rgba(255, 247, 236, 0.08), transparent 20%),
      linear-gradient(135deg, #8b201b, #3a0d0b);
  }

  .sales-page--cinematic .sales-closing-band .panel-header,
  .sales-page--cinematic .sales-closing-band {
    text-align: center;
  }

  .sales-page--cinematic .sales-closing-band .lead {
    color: #ead7c5;
  }

  .sales-page--cinematic .sales-closing-band .cta-row {
    justify-content: center;
  }

  @keyframes salesActivityProgress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }

  @keyframes salesShowcaseSpotlight {
    0%, 28% {
      opacity: 1;
      filter: saturate(1);
      transform: translate3d(0, -5px, 54px);
    }
    34%, 94% {
      opacity: 0.54;
      filter: saturate(0.72);
      transform: translate3d(0, 7px, 0);
    }
    100% {
      opacity: 1;
      filter: saturate(1);
      transform: translate3d(0, -5px, 54px);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .sales-page--cinematic .sales-showcase-layer {
      animation: salesShowcaseSpotlight 12s cubic-bezier(0.2, 1, 0.22, 1) infinite;
    }

    .sales-page--cinematic .sales-showcase-layer--secondary {
      animation-delay: -8s;
    }

    .sales-page--cinematic .sales-showcase-layer--tertiary {
      animation-delay: -4s;
    }

    .sales-page--cinematic .sales-showcase-card {
      animation: salesShowcaseFloat 7.8s ease-in-out infinite;
    }

    .sales-showcase-status span::before {
      animation: salesActivityProgress 12s linear infinite;
      animation-delay: calc(var(--showcase-order) * 4s);
    }
  }

  @media (max-width: 1060px) {
    .sales-page--cinematic .sales-hero-shell {
      grid-template-columns: 1fr;
    }

    .sales-page--cinematic .sales-hero-copy {
      justify-items: start;
      text-align: left;
    }

    .sales-page--cinematic .sales-hero-redesign .cta-row {
      justify-content: flex-start;
    }

    .sales-page--cinematic .sales-hero-showcase {
      min-height: 520px;
      width: min(100%, 680px);
    }

    .sales-page--cinematic .sales-proof-grid,
    .sales-page--cinematic .sales-path-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sales-page--cinematic .sales-path-grid::before {
      display: none;
    }

    .sales-page--cinematic .sales-path-step {
      padding-top: 68px;
    }

    .sales-activity-stage {
      min-height: 780px;
    }

    .sales-activity-panel {
      grid-template-columns: 1fr;
    }

    .sales-activity-visual {
      min-height: 390px;
    }
  }

  @media (max-width: 720px) {
    .sales-page--cinematic {
      margin-inline: -14px;
      border-radius: 0;
    }

    .sales-page--cinematic .sales-hero-redesign,
    .sales-page--cinematic .sales-band {
      padding: 40px 20px;
    }

    .sales-page--cinematic .sales-hero-redesign {
      min-height: auto;
    }

  .sales-page--cinematic .sales-hero-copy h1 {
    font-size: clamp(2.25rem, 9.5vw, 3rem);
    line-height: 0.98;
  }

    .sales-page--cinematic .sales-hero-redesign .cta-row,
    .sales-page--cinematic .sales-closing-band .cta-row {
      width: 100%;
      align-items: stretch;
    }

    .sales-page--cinematic .sales-hero-redesign .action-button,
    .sales-page--cinematic .sales-closing-band .action-button {
      width: 100%;
      justify-content: center;
    }

    .sales-page--cinematic .sales-hero-showcase {
      min-height: 400px;
    }

    .sales-page--cinematic .sales-showcase-layer {
      width: min(78%, 250px);
    }

    .sales-page--cinematic .sales-showcase-layer--primary {
      inset: 0 auto auto 0;
    }

    .sales-page--cinematic .sales-showcase-layer--secondary {
      inset: 15% 0 auto auto;
    }

    .sales-page--cinematic .sales-showcase-layer--tertiary {
      inset: auto auto 0 8%;
    }

    .sales-page--cinematic .sales-showcase-preview {
      min-height: 132px;
    }

    .sales-showcase-status {
      display: none;
    }

    .sales-hero-ribbon {
      grid-template-columns: 1fr;
    }

    .sales-hero-ribbon > div {
      padding: 18px 0;
      border-right: 0;
      border-bottom: 1px solid rgba(255, 247, 236, 0.12);
    }

    .sales-hero-ribbon > div:last-child {
      border-bottom: 0;
    }

    .sales-page--cinematic .sales-band .panel-header h2 {
      font-size: clamp(2.35rem, 11vw, 3.5rem);
    }

    .sales-page--cinematic .sales-proof-grid,
    .sales-page--cinematic .sales-path-grid,
    .sales-page--cinematic .sales-choice-grid {
      grid-template-columns: 1fr;
    }

    .sales-page--cinematic .sales-proof-item,
    .sales-page--cinematic .sales-proof-item + .sales-proof-item {
      padding: 24px 0;
      border-right: 0;
      border-bottom: 1px solid var(--line);
    }

    .sales-page--cinematic .sales-proof-item:last-child {
      border-bottom: 0;
    }

    .sales-page--cinematic .sales-choice {
      padding: 26px 22px;
    }

    .sales-page--cinematic .sales-choice + .sales-choice {
      border-left: 0;
      border-top: 1px solid var(--line);
    }

    .sales-activity-tab {
      min-height: 48px;
    }

    .sales-activity-stage {
      min-height: 650px;
      border-radius: 22px;
    }

    .sales-activity-panel {
      align-content: start;
      gap: 24px;
      padding: 18px;
    }

    .sales-activity-visual {
      min-height: 300px;
      border-radius: 18px;
    }

    .sales-activity-visual > :not(.dojo-visual-grid) {
      transform: scale(1.08);
    }

    .sales-activity-copy {
      gap: 13px;
    }

    .sales-activity-copy h3 {
      font-size: clamp(1.9rem, 9vw, 2.7rem);
    }

    .sales-activity-copy p {
      font-size: 0.98rem;
      line-height: 1.6;
    }

    .sales-page--cinematic .sales-price-panel {
      padding: 24px 20px;
    }

    .sales-page--cinematic .sales-closing-band {
      min-height: 460px;
    }
  }

  .sales-page--cinematic {
    width: 100vw;
    margin-block: -24px -40px;
    margin-inline: calc(50% - 50vw);
    border-radius: 0;
    box-shadow: none;
  }

  .sales-page--cinematic .sales-hero-redesign,
  .sales-page--cinematic .sales-band {
    padding-inline: max(24px, calc((100vw - 1200px) / 2));
  }

  .sales-page--cinematic .sales-band .panel-header {
    justify-content: center;
    text-align: center;
  }

  .sales-page--cinematic .sales-band .panel-header > div {
    width: min(900px, 100%);
    margin-inline: auto;
  }

  .sales-page--cinematic .sales-games-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }

  .sales-page--cinematic .sales-game-card {
    gap: 18px;
    padding: 22px;
    border: 1px solid rgba(255, 247, 236, 0.16);
    border-radius: 24px;
    background:
      radial-gradient(circle at 92% 4%, rgba(214, 162, 78, 0.1), transparent 25%),
      rgba(19, 8, 7, 0.72);
    box-shadow: 0 22px 54px rgba(20, 3, 2, 0.24);
    transition:
      transform 320ms cubic-bezier(0.2, 1, 0.22, 1),
      border-color 320ms ease,
      box-shadow 320ms ease;
  }

  .sales-page--cinematic .sales-game-card:hover {
    transform: translateY(-7px);
    border-color: rgba(255, 247, 236, 0.3);
    box-shadow: 0 30px 72px rgba(20, 3, 2, 0.34);
  }

  .sales-page--cinematic .sales-game-card .dojo-activity-head {
    min-height: 132px;
  }

  .sales-page--cinematic .sales-game-card .dojo-activity-copy h3 {
    color: var(--sales-ivory);
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    line-height: 1.05;
  }

  .sales-page--cinematic .sales-game-card .dojo-activity-copy p {
    color: #d6bfad;
    min-height: 5.1rem;
  }

  .sales-page--cinematic .sales-game-card .section-kicker {
    color: var(--sales-gold);
  }

  .sales-activity-mark {
    display: grid;
    width: 50px;
    height: 50px;
    place-items: center;
    border: 1px solid rgba(255, 247, 236, 0.2);
    border-radius: 15px;
    background:
      linear-gradient(145deg, rgba(255, 247, 236, 0.98), rgba(233, 213, 194, 0.94));
    color: #9c281f;
    box-shadow:
      0 14px 28px rgba(0, 0, 0, 0.28),
      0 1px 0 rgba(255, 255, 255, 0.72) inset;
  }

  .sales-activity-mark svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .sales-page--cinematic .sales-game-card .dojo-activity-preview {
    height: 222px;
    min-height: 222px;
    padding: 12px;
    border-color: rgba(63, 22, 18, 0.14);
    border-radius: 18px;
    background:
      linear-gradient(145deg, #f8ecdf, #dfc9b4);
    --bg: #f2e5d6;
    --bg-panel: #fffaf2;
    --bg-panel-strong: #ffffff;
    --line: rgba(48, 18, 15, 0.16);
    --line-strong: rgba(48, 18, 15, 0.34);
    --ink: #27110f;
    --muted: #6b4d42;
    --accent: #ad2d23;
    --accent-soft: #f0cabe;
    --gold: #b67c2d;
    --gold-soft: #ead5af;
  }

  .sales-page--cinematic .sales-game-card:hover .dojo-preview-app {
    transform: scale(1.018);
  }

  .sales-page--cinematic .sales-game-card .dojo-pill {
    border-color: rgba(255, 247, 236, 0.16);
    background: rgba(255, 247, 236, 0.07);
    color: #dcc6b4;
  }

  .sales-page--cinematic .sales-game-card .dojo-activity-footer {
    align-items: center;
  }

  .dojo-preview-app {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: 34px minmax(0, 1fr);
    width: 100%;
    height: 100%;
    border: 1px solid rgba(55, 20, 16, 0.16);
    border-radius: 13px;
    background: #fffaf2;
    box-shadow:
      0 16px 34px rgba(57, 22, 16, 0.14),
      0 1px 0 rgba(255, 255, 255, 0.84) inset;
    overflow: hidden;
    transform: scale(1);
    transition: transform 340ms cubic-bezier(0.2, 1, 0.22, 1);
  }

  .dojo-preview-toolbar {
    display: grid;
    grid-template-columns: repeat(3, 7px) minmax(0, 1fr);
    align-items: center;
    gap: 5px;
    padding: 0 11px;
    border-bottom: 1px solid rgba(55, 20, 16, 0.12);
    background: rgba(255, 255, 255, 0.72);
  }

  .dojo-preview-toolbar > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d9b9aa;
  }

  .dojo-preview-toolbar > span:first-child {
    background: #d95a49;
  }

  .dojo-preview-toolbar > strong {
    color: #70483d;
    font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
    font-size: 0.75rem;
    text-align: right;
  }

  .dojo-preview-canvas {
    position: relative;
    display: grid;
    min-height: 0;
    place-items: center;
    overflow: hidden;
  }

  .dojo-preview-chat {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 9px;
    width: 86%;
  }

  .dojo-preview-message {
    padding: 10px 12px;
    border-radius: 13px;
    font-size: 0.82rem;
    font-weight: 750;
    line-height: 1.35;
    box-shadow: 0 8px 18px rgba(66, 25, 19, 0.08);
  }

  .dojo-preview-message--sensei {
    justify-self: start;
    border-bottom-left-radius: 4px;
    background: #fff;
    color: #301613;
  }

  .dojo-preview-message--student {
    justify-self: end;
    border-bottom-right-radius: 4px;
    background: #a92d24;
    color: #fff9f1;
  }

  .dojo-preview-question,
  .dojo-preview-builder,
  .dojo-preview-pronunciation,
  .dojo-preview-writing,
  .dojo-preview-mixed {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 14px;
    justify-items: center;
    width: 90%;
  }

  .dojo-preview-options {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .dojo-preview-options span {
    padding: 6px 10px;
    border: 1px solid rgba(59, 22, 18, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: #5d3c33;
    font-size: 0.72rem;
    font-weight: 800;
  }

  .dojo-builder-target {
    padding: 7px 12px;
    border-radius: 9px;
    background: rgba(173, 45, 35, 0.09);
    color: #4c241e;
    font-weight: 850;
  }

  .dojo-preview-pronunciation strong {
    color: #321613;
    font-size: 1rem;
  }

  .dojo-preview-pronunciation small {
    display: grid;
    place-items: center;
    width: 38px;
    height: 26px;
    border-radius: 999px;
    background: #a92d24;
    color: #fff9f1;
    font-weight: 900;
  }

  .dojo-preview-writing {
    grid-template-columns: minmax(0, 1fr) auto;
    width: 72%;
  }

  .dojo-preview-writing .dojo-stroke-card {
    width: 116px;
    height: 116px;
  }

  .dojo-preview-writing > span {
    color: #7b5145;
    font-size: 0.78rem;
    font-weight: 800;
  }

  .dojo-preview-writing > span strong {
    color: #a92d24;
    font-size: 1.35rem;
  }

  .dojo-flash-stack span:nth-child(3) {
    gap: 4px;
  }

  .dojo-flash-stack span:nth-child(3) strong {
    color: #2d1512;
    font-size: 1.4rem;
  }

  .dojo-flash-stack span:nth-child(3) small {
    color: #795549;
    font-size: 0.72rem;
  }

  .dojo-match-picture::before {
    content: none !important;
  }

  .dojo-match-picture svg {
    width: 42px;
    height: 42px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .dojo-match-picture--water {
    background: linear-gradient(145deg, #c8edff, #e9f8ff) !important;
    color: #287fbd !important;
  }

  .dojo-match-picture--water svg path:first-child {
    fill: rgba(72, 157, 216, 0.24);
  }

  .dojo-match-picture--cat {
    background: linear-gradient(145deg, #efd8c2, #fff5e9) !important;
    color: #75533c !important;
  }

  .dojo-match-picture--cat svg path:first-child {
    fill: rgba(138, 104, 79, 0.2);
  }

  .dojo-preview-mixed {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }

  .dojo-mixed-score {
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: #a92d24;
    color: #fff9f1;
    box-shadow: 0 13px 24px rgba(97, 24, 19, 0.22);
  }

  .dojo-mixed-score strong {
    font-size: 1.35rem;
    line-height: 1;
  }

  .dojo-mixed-score span {
    font-size: 0.6rem;
  }

  @media (min-width: 1061px) {
    .sales-page--cinematic .sales-games-grid {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .sales-page--cinematic .sales-game-card {
      grid-column: span 2;
    }

    .sales-page--cinematic .sales-game-card:nth-last-child(2) {
      grid-column: 2 / span 2;
    }

    .sales-page--cinematic .sales-game-card:last-child {
      grid-column: 4 / span 2;
    }
  }

  @media (max-width: 1060px) {
    .sales-page--cinematic .sales-games-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 720px) {
    .sales-page--cinematic {
      width: 100vw;
      margin-inline: calc(50% - 50vw);
    }

    .sales-page--cinematic .sales-hero-redesign,
    .sales-page--cinematic .sales-band {
      padding-inline: 20px;
    }

    .sales-page--cinematic .sales-games-grid {
      grid-template-columns: 1fr;
    }

    .sales-page--cinematic .sales-game-card {
      padding: 18px;
      border-radius: 20px;
    }

    .sales-page--cinematic .sales-game-card .dojo-activity-head {
      min-height: auto;
    }

    .sales-page--cinematic .sales-game-card .dojo-activity-copy p {
      min-height: auto;
    }

    .sales-page--cinematic .sales-game-card .dojo-activity-preview {
      height: 210px;
      min-height: 210px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .sales-page--cinematic *,
    .sales-page--cinematic *::before,
    .sales-page--cinematic *::after {
      scroll-behavior: auto !important;
      animation: none !important;
      transition-duration: 0.01ms !important;
    }
  }