/* ============================================================
   Phrasy — 公式サイト 共通スタイル
   ============================================================ */

:root {
  /* Surface */
  --paper:      #F7F3EC;   /* warm cream page background */
  --paper-deep: #EFE9DD;   /* slightly deeper cream for bands */
  --card:       #FFFFFF;
  --ink:        #1C1916;   /* near-black text / primary */
  --ink-soft:   #4A443D;
  --muted:      #6E655A;   /* secondary text (AA on cream) */
  --line:       #E4DDD0;   /* hairline */

  /* Accents (from the app) */
  --amber:      #D97706;   /* primary accent — 学習中 / CTA highlight */
  --amber-text: #A85A05;   /* darker amber for small text on cream (AA) */
  --amber-bright:#F59E0B;
  --amber-wash: #FBEFD9;
  --green:      #5E8A6E;   /* 習得 / 覚えた */
  --green-wash: #E4EDE5;
  --coral:      #D7544F;   /* まだ */
  --coral-wash: #F8E3E1;

  /* Type */
  --sans: "Noto Sans JP", system-ui, sans-serif;
  --display: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;

  /* Geometry */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(28,25,22,.05), 0 4px 14px rgba(28,25,22,.04);
  --shadow-md: 0 8px 30px rgba(28,25,22,.09);
  --shadow-phone: 0 24px 60px -12px rgba(28,25,22,.28), 0 6px 18px rgba(28,25,22,.12);

  --maxw: 1160px;
  --gutter: clamp(20px, 5vw, 56px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.75;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  line-height: 1.28;
  letter-spacing: .01em;
  font-weight: 700;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip link for accessibility */
.skip-link {
  position: absolute;
  left: 12px; top: -100px;
  background: var(--ink);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  z-index: 200;
  font-weight: 700;
  transition: top .2s ease;
}
.skip-link:focus { top: 12px; }

.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;
}

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { position: relative; }

.band-deep { background: var(--paper-deep); }
.band-ink  { background: var(--ink); color: #F1ECE3; }
.band-ink h1, .band-ink h2, .band-ink h3 { color: #fff; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247,243,236,.92); /* fallback */
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background .25s ease;
}
.site-header[data-scrolled="true"] {
  border-bottom-color: var(--line);
}
.nav {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 72px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .01em;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
  line-height: 1.15;
}
.brand > span { white-space: nowrap; }
.brand .mark {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  display: grid;
  place-items: center;
  flex: none;
}
.brand .mark svg { width: 19px; height: 19px; display: block; }
.mark.mark-img { background: #fff; overflow: hidden; }
.mark.mark-img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.brand small {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: .04em;
  line-height: 1;
  margin-top: 2px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-links a {
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 500;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  transition: background .18s ease, color .18s ease;
}
.nav-links a:hover { background: rgba(28,25,22,.06); color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--ink); font-weight: 700; }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Buttons */
.btn {
  --bg: var(--ink);
  --fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--r-pill);
  background: var(--bg);
  color: var(--fg);
  text-decoration: none;
  border: 1.5px solid var(--bg);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-amber { --bg: var(--amber); --fg: #fff; }
.btn-ghost {
  --bg: transparent; --fg: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { background: rgba(28,25,22,.04); }
.btn-sm { padding: 10px 16px; font-size: 14px; }
.btn-lg { padding: 17px 30px; font-size: 17px; }
.btn-on-ink { --bg:#fff; --fg: var(--ink); border-color:#fff; }

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 12px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.menu-toggle svg { width: 22px; height: 22px; }

/* Mobile drawer */
.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--paper);
  padding: 88px var(--gutter) 40px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform .32s cubic-bezier(.4,0,.1,1), opacity .25s ease, visibility .32s;
  overflow-y: auto;
}
.mobile-drawer[data-open="true"] { transform: translateY(0); opacity: 1; visibility: visible; }
.mobile-drawer a {
  text-decoration: none;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 26px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mobile-drawer a span { font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--muted); }
.mobile-drawer .btn { margin-top: 24px; font-size: 17px; padding: 16px; }

/* ---------- Eyebrow / section heads ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--amber-text);
}
.eyebrow::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--amber);
  display: inline-block;
}
.band-ink .eyebrow { color: var(--amber-bright); }
.band-ink .eyebrow::before { background: var(--amber-bright); }

.section-head { max-width: 680px; }
.section-head .eyebrow { margin-bottom: 18px; }
.section-head h2 {
  font-size: clamp(28px, 4.4vw, 46px);
  letter-spacing: -0.01em;
}
.section-head p {
  margin-top: 18px;
  color: var(--ink-soft);
  font-size: clamp(16px, 2vw, 19px);
}
.band-ink .section-head p { color: #C9C2B6; }

/* ---------- Phone mockup ---------- */
.phone {
  position: relative;
  width: 100%;
  max-width: 290px;
  aspect-ratio: 1080 / 2424;
  background: #111;
  border-radius: 38px;
  padding: 9px;
  box-shadow: var(--shadow-phone);
  border: 1px solid #2a2a2a;
}
.phone::before { /* status-bar area, painted out */
  content: "";
  position: absolute;
  z-index: 2;
  top: 9px; left: 9px; right: 9px;
  height: calc((100% - 18px) * .062);
  background: #FAFAF9;
  border-radius: 30px 30px 0 0;
}
.phone::after { /* notch / camera */
  content: "";
  position: absolute;
  top: 16px; left: 50%; transform: translateX(-50%);
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #000;
  border: 2px solid #1d1d1d;
  z-index: 3;
}
.phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 30px;
  display: block;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: #C9C2B6;
  padding: 72px 0 40px;
}
.site-footer a { color: #C9C2B6; text-decoration: none; }
.site-footer a:hover { color: #fff; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 40px;
}
.footer-brand .brand { color: #fff; margin-bottom: 16px; }
.footer-brand .brand small { color: #948C80; }
.footer-brand p { color: #948C80; font-size: 14px; max-width: 280px; }
.footer-col h3 {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #948C80;
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.footer-col a { font-size: 15px; }
.footer-bottom {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #847C70;
}
.footer-bottom .store-badges { display: flex; gap: 12px; }

/* ---------- Store badges ---------- */
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  background: var(--ink);
  color: #fff;
  border: 1px solid #34302b;
  border-radius: 14px;
  padding: 10px 18px;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .2s ease;
  min-height: 56px;
}
.store-badge:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.store-badge svg { width: 26px; height: 26px; flex: none; }
.store-badge .sb-text { line-height: 1.2; text-align: left; }
.store-badge .sb-text small { display: block; font-size: 11px; color: #B9B1A5; letter-spacing: .03em; }
.store-badge .sb-text b { display: block; font-size: 16px; font-weight: 700; }
.store-badges-row { display: flex; gap: 14px; flex-wrap: wrap; }
.band-deep .store-badge, .band-light .store-badge { background: var(--ink); }

/* ---------- Utility chips / pills ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink-soft);
}
.chip .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dot-gray  { background: #B5ABA0; }
.dot-amber { background: var(--amber); }
.dot-green { background: var(--green); }

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- App-launch toast (PRO is in-app only) ---------- */
.app-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 18px);
  max-width: min(440px, calc(100vw - 32px));
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--ink);
  color: #F1ECE3;
  padding: 16px 18px;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  font-size: 14.5px;
  line-height: 1.6;
  z-index: 300;
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, transform .28s ease, visibility .28s;
}
.app-toast[data-show="true"] { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.app-toast-ico { color: var(--amber-bright); flex: none; margin-top: 1px; }
.app-toast-ico svg { width: 22px; height: 22px; display: block; }
.app-toast-x {
  background: none; border: none; color: #948C80; cursor: pointer;
  font-size: 22px; line-height: 1; padding: 0 2px; flex: none; margin-top: -2px;
}
.app-toast-x:hover { color: #fff; }

/* ---------- Responsive footer ---------- */
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 920px) {
  .brand small { display: none; }
  .nav { gap: 12px; }
  .nav-links { gap: 0; }
  .nav-links a { font-size: 14px; padding: 8px 10px; }
  .nav-cta .btn-desktop { display: none; }
}
@media (max-width: 760px) {
  .nav-links { display: none; }
  .menu-toggle { display: inline-flex; }
}
@media (min-width: 761px) {
  .mobile-drawer { display: none; }
}
@media (max-width: 540px) {
  body { font-size: 16px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}


/* ---------- Onboarding scenes — animated recreations of the in-app tutorial ---------- */
.osc{position:relative;container-type:inline-size;aspect-ratio:5/4;border-radius:16px;border:1px solid var(--line);background:var(--paper);overflow:hidden;display:grid;place-items:center;align-content:center;gap:3.4cqw;padding:7cqw 6cqw 6cqw}
.band-deep .osc{background:var(--paper)}
@keyframes osc-pop{from{opacity:0;transform:scale(.94) translateY(3cqw)}to{opacity:1;transform:none}}

/* 1 — concept: rotating arc + crossfading quotes */
.osc-ring{position:relative;display:grid;place-items:center;width:66cqw;height:66cqw}
.osc-arc{position:absolute;inset:0;width:100%;height:100%;animation:osc-spin 26s linear infinite}
@keyframes osc-spin{to{transform:rotate(360deg)}}
.osc-card{position:relative;z-index:2;display:grid;background:#fff;border-radius:3.4cqw;box-shadow:0 2cqw 5cqw rgba(28,25,22,.10);padding:4.4cqw 5cqw;width:74cqw;min-height:26cqw;align-content:center;text-align:left}
.osc-q{grid-area:1/1;opacity:0;animation:osc-q 10.5s infinite}
.osc-q:nth-child(2){animation-delay:3.5s}
.osc-q:nth-child(3){animation-delay:7s}
@keyframes osc-q{0%,2%{opacity:0;transform:translateY(2cqw)}7%,27%{opacity:1;transform:none}33%,100%{opacity:0;transform:translateY(-1.6cqw)}}
.osc-q .k{color:var(--amber);font-size:3.1cqw;font-weight:700;letter-spacing:.1em;line-height:1.2}
.osc-q .en{font-size:5cqw;font-weight:800;margin-top:2cqw;line-height:1.25;font-family:var(--display)}
.osc-q .ja{font-size:3.2cqw;color:var(--muted);margin-top:1.4cqw;line-height:1.2}

/* 2 — record: pulsing mic, live wave, transcript pops in */
.osc-mic{position:relative;width:26cqw;height:26cqw;border-radius:50%;background:var(--ink);display:grid;place-items:center}
.osc-mic svg{width:11cqw;height:11cqw;color:var(--paper);display:block}
.osc-mic::before,.osc-mic::after{content:"";position:absolute;inset:0;border-radius:50%;border:.6cqw solid var(--amber);animation:osc-ping 2.4s ease-out infinite}
.osc-mic::after{animation-delay:1.2s}
@keyframes osc-ping{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.8);opacity:0}}
.osc-wave{display:flex;align-items:center;gap:1.1cqw;height:9cqw}
.osc-wave i{width:1.3cqw;border-radius:99px;background:var(--amber);display:block;animation:osc-bar 1s ease-in-out infinite alternate}
@keyframes osc-bar{from{height:2cqw}to{height:9cqw}}
.osc-out{width:78cqw;background:#fff;border:1px solid var(--line);border-radius:3cqw;box-shadow:0 1.6cqw 4cqw rgba(28,25,22,.08);padding:3.6cqw 4.2cqw;text-align:left;opacity:0;animation:osc-out 5s cubic-bezier(.2,1.4,.4,1) infinite}
@keyframes osc-out{0%,14%{opacity:0;transform:scale(.94) translateY(3cqw)}24%,88%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.osc-out b{display:block;font-size:4.2cqw;font-weight:800;font-family:var(--display);line-height:1.2}
.osc-out span{display:block;font-size:3.1cqw;color:var(--muted);margin-top:1.2cqw;line-height:1.2}
.osc-out em{display:flex;align-items:center;gap:1.4cqw;font-style:normal;font-size:2.8cqw;font-weight:700;color:var(--amber);margin-top:2.4cqw;letter-spacing:.05em}
.osc-out em svg{width:3cqw;height:3cqw;flex:none}

/* 3 — listen: word-by-word highlight + playhead */
.osc-line{font-size:5.6cqw;font-weight:800;font-family:var(--display);line-height:1.4;display:flex;flex-wrap:wrap;justify-content:center;gap:.28em}
.osc-line b{border-radius:1.4cqw;padding:0 1cqw;margin:0 -1cqw;animation:osc-hl 4.4s infinite}
.osc-line b:nth-child(2){animation-delay:.75s}
.osc-line b:nth-child(3){animation-delay:1.5s}
.osc-line b:nth-child(4){animation-delay:2.25s}
@keyframes osc-hl{0%,15%{background:var(--amber-wash)}17%,100%{background:transparent}}
.osc-sub{font-size:3.3cqw;color:var(--muted);line-height:1.2}
.osc-track{height:1.1cqw;border-radius:99px;background:var(--line);width:62cqw;overflow:hidden}
.osc-track i{display:block;height:100%;background:var(--amber);border-radius:99px;transform-origin:left;animation:osc-fill 4.4s linear infinite}
@keyframes osc-fill{from{transform:scaleX(0)}68%,100%{transform:scaleX(1)}}
.osc-pills{display:flex;gap:2.2cqw;align-items:center}
.osc-pill{font-size:3.1cqw;font-weight:700;padding:1.8cqw 3.4cqw;border-radius:99px;background:var(--paper-deep);color:var(--ink-soft);white-space:nowrap}
.osc-pill.on{background:var(--ink);color:#fff}

/* 4 — speak: card swipes, stamp lands, score appears */
.osc-stampcard{position:relative;width:88cqw;display:grid;place-items:center;background:#fff;border-radius:3.4cqw;box-shadow:0 2cqw 5cqw rgba(28,25,22,.10);padding:6.4cqw 5cqw;animation:osc-swipe 4.6s ease-in-out infinite}
@keyframes osc-swipe{0%,52%,100%{transform:none}66%,80%{transform:translateX(6cqw) rotate(3deg)}}
.osc-stampcard .en{font-size:5cqw;font-weight:800;font-family:var(--display);line-height:1}
.osc-stamp{position:absolute;right:6cqw;top:50%;border:.8cqw solid var(--green);color:var(--green);font-weight:800;font-size:3.6cqw;letter-spacing:.06em;padding:1.2cqw 3cqw;border-radius:2cqw;background:rgba(255,255,255,.88);font-family:var(--display);opacity:0;animation:osc-stamp 4.6s infinite}
@keyframes osc-stamp{0%,58%{opacity:0;transform:translateY(-50%) rotate(-12deg) scale(1.6)}64%,84%{opacity:1;transform:translateY(-50%) rotate(-12deg) scale(1)}92%,100%{opacity:0;transform:translateY(-50%) rotate(-12deg) scale(1)}}
.osc-judge{display:flex;gap:2.6cqw;width:88cqw}
.osc-judge span{flex:1;display:flex;align-items:center;justify-content:center;gap:1.4cqw;font-size:3.3cqw;font-weight:700;padding:2.4cqw 1cqw;border-radius:99px;line-height:1}
.osc-judge svg{width:3cqw;height:3cqw;flex:none}
.osc-judge .no{background:#fff;border:1px solid #EBCFCC;color:var(--coral)}
.osc-judge .yes{background:var(--green);color:#fff;animation:osc-ok 4.6s infinite}
@keyframes osc-ok{0%,58%,94%,100%{transform:none;filter:none}70%,84%{transform:scale(1.05);filter:brightness(1.07)}}
.osc-score{display:flex;align-items:center;gap:2cqw;width:88cqw;background:var(--amber-wash);border:1px solid #EBD6AF;border-radius:2.6cqw;padding:2.4cqw 3cqw;font-size:3.1cqw;font-weight:700;line-height:1;opacity:0;animation:osc-score 4.6s cubic-bezier(.2,1.4,.4,1) infinite}
@keyframes osc-score{0%,66%{opacity:0;transform:scale(.94) translateY(2cqw)}76%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.osc-score svg{width:3.6cqw;height:3.6cqw;color:var(--amber);flex:none}
.osc-score b{margin-left:auto;background:#fff;border-radius:99px;padding:1.2cqw 2.6cqw;color:var(--green)}

/* 5 — suggest: today's picks slide in */
.osc-list{width:90cqw;background:#fff;border-radius:3.4cqw;box-shadow:0 2cqw 5cqw rgba(28,25,22,.10);padding:4.2cqw 4.6cqw}
.osc-list .lh{display:flex;align-items:center;gap:2.2cqw;font-size:3.9cqw;font-weight:800;font-family:var(--display);line-height:1}
.osc-list .lh em{font-style:normal;font-size:2.6cqw;background:var(--amber-wash);color:var(--amber-text);padding:1cqw 2.2cqw;border-radius:99px;font-weight:700;font-family:var(--sans);letter-spacing:.08em}
.osc-list ul{list-style:none;margin:2.6cqw 0 0;padding:0}
.osc-list li{display:flex;align-items:center;gap:2.2cqw;font-size:3.3cqw;font-weight:700;padding:2.4cqw 0;border-top:1px solid var(--line);line-height:1;opacity:0;animation:osc-row 6s infinite}
.osc-list li:nth-child(2){animation-delay:.24s}
.osc-list li:nth-child(3){animation-delay:.48s}
@keyframes osc-row{0%,3%{opacity:0;transform:translateX(4cqw)}10%,90%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.osc-list li .d{width:1.8cqw;height:1.8cqw;border-radius:50%;background:var(--amber);flex:none}
.osc-list li .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.osc-list li .s{font-size:2.6cqw;padding:1cqw 2.2cqw;border-radius:99px;font-weight:700;flex:none;white-space:nowrap}
.osc-list li .s.learn{background:var(--amber-wash);color:var(--amber-text)}
.osc-list li .s.new{background:#fff;border:1px solid var(--line);color:var(--muted)}
.osc-note{display:flex;align-items:center;gap:1.8cqw;font-size:2.9cqw;color:var(--muted);line-height:1.2}
.osc-note svg{width:3.2cqw;height:3.2cqw;color:var(--amber);flex:none;animation:osc-spin 6s linear infinite}
@media (prefers-reduced-motion:reduce){.osc *{animation-duration:.01s!important;animation-delay:0s!important;animation-iteration-count:1!important}.osc-q,.osc-out,.osc-score,.osc-list li{opacity:1!important}.osc-q:nth-child(2),.osc-q:nth-child(3){display:none}}

/* ---------- Focus visibility & anchor offsets ---------- */
a:focus-visible, button:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
main [id], section[id] { scroll-margin-top: 90px; }
@media (max-width: 1020px) {
  .nav-links { gap: 0; }
  .nav-links a { padding: 8px 9px; font-size: 14px; }
}