:root{
  --navy:#012169; --navy-2:#1d4ed8; --ink:#0f172a; --muted:#64748b; --line:#e2e8f0;
  --bg:#f4f6f9; --card:#fff; --oral:#9a3412;
  --shadow:0 18px 50px -28px rgba(1,33,105,.45);
  --radius:18px;
  --gutter:clamp(16px, 3.5vw, 32px);
  --tap:44px;
  --shell:min(1040px, 100%);
}
*{box-sizing:border-box}
html{overflow-x:hidden}
html,body{
  margin:0;min-height:100%;background:var(--bg);color:var(--ink);
  font-family:"Noto Sans SC",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  padding-bottom:env(safe-area-inset-bottom, 0px);
  padding-left:env(safe-area-inset-left, 0px);
  padding-right:env(safe-area-inset-right, 0px);
}
button{font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
a{color:inherit}
img{max-width:100%;height:auto}
.shell{
  width:var(--shell);max-width:1040px;margin:0 auto;
  padding:0 0 calc(72px + env(safe-area-inset-bottom, 0px));
}
.top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(10px + env(safe-area-inset-top, 0px)) var(--gutter) 10px;
  position:sticky;top:0;z-index:20;
  background:color-mix(in srgb, var(--bg) 88%, transparent);backdrop-filter:blur(10px);
}
.back{
  display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-weight:650;
  color:var(--muted);min-height:var(--tap);padding:8px 12px;border-radius:999px;
}
.back:hover{color:var(--navy);background:#fff}
.date-pill{
  font-size:.78rem;font-weight:700;letter-spacing:.04em;color:var(--navy);
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:8px 12px;min-height:var(--tap);display:inline-flex;align-items:center;
}
.hero{
  position:relative;margin:4px var(--gutter) 0;border-radius:var(--radius);overflow:hidden;
  min-height:clamp(200px, 36vh, 380px);box-shadow:var(--shadow);background:#0b1b3a;
}
.hero img{
  display:block;width:100%;height:clamp(200px, 36vh, 380px);
  object-fit:cover;object-position:center;
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 32%,rgba(2,12,36,.82) 100%);
}
.hero-copy{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:clamp(16px, 2.5vw, 28px);color:#fff;
}
.kicker{margin:0 0 6px;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.hero h1{
  margin:0;font-family:"Source Serif 4",serif;font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.45rem, 2.8vw + .6rem, 2.55rem);line-height:1.15;
  overflow-wrap:anywhere;
}
.hero .sub{
  margin:8px 0 0;font-size:clamp(.9rem, 1.1vw + .7rem, 1.05rem);
  line-height:1.55;opacity:.92;max-width:40rem;
}
.progress{display:flex;gap:6px;padding:16px var(--gutter) 0}
.progress i{flex:1;height:4px;border-radius:99px;background:#dbe3f0;overflow:hidden}
.progress i b{display:block;height:100%;width:0;background:var(--navy);border-radius:inherit;transition:width .35s ease}
.progress i.on b{width:100%}
.progress i.now b{width:55%}

.panel{padding:18px var(--gutter) 0}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:clamp(16px, 2vw, 28px);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset;
  max-width:720px;
}
.meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 14px}
.badge{
  display:inline-flex;align-items:center;gap:4px;font-size:.72rem;font-weight:750;
  letter-spacing:.04em;border-radius:999px;padding:6px 10px;border:1px solid var(--line);
}
.badge.oral{color:var(--oral);background:#fff7ed;border-color:#fed7aa}
.badge.step{color:var(--navy);background:#eff4ff;border-color:#c7d7fe}
.en{
  margin:0;font-family:"Source Serif 4",Georgia,serif;
  font-size:clamp(1.25rem, 1.6vw + .85rem, 1.9rem);
  line-height:1.35;letter-spacing:-.02em;font-weight:700;
  overflow-wrap:anywhere;
}
.zh{margin:10px 0 0;color:var(--muted);font-size:clamp(.95rem, .4vw + .9rem, 1.05rem);line-height:1.55}
.ipa{
  margin:12px 0 0;font-family:ui-monospace,Menlo,monospace;font-size:.86rem;color:#475569;
  line-height:1.5;word-break:break-word;
}
.stress{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.stress span{
  min-width:1.5rem;text-align:center;font-size:.72rem;font-weight:700;color:var(--muted);
  border-bottom:2px solid transparent;padding-bottom:2px;
}
.stress span.on{color:var(--navy);border-bottom-color:var(--navy)}
.note{margin:12px 0 0;font-size:.9rem;color:#475569;line-height:1.55}

.actions{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px;
}
.actions .wide{grid-column:1 / -1}
.btn{
  appearance:none;border:1px solid var(--line);background:#fff;color:var(--ink);
  border-radius:12px;min-height:var(--tap);padding:12px 16px;font-weight:700;letter-spacing:-.01em;
  transition:transform .15s ease, border-color .15s, background .15s, color .15s;
}
.btn:hover{border-color:#94a3b8}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.primary:hover{background:var(--navy-2);border-color:var(--navy-2)}
.btn.ghost{background:transparent}
.btn.on{outline:2px solid color-mix(in srgb, var(--navy) 35%, transparent);outline-offset:2px}
.btn:disabled{opacity:.45;cursor:not-allowed}

.phase{margin-top:16px;padding-top:16px;border-top:1px dashed var(--line)}
.phase h2{
  margin:0 0 10px;font-size:.78rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);
}
.variants{display:flex;flex-direction:column;gap:8px}
.v{
  border:1px solid var(--line);border-radius:12px;padding:14px 14px;background:#fafbfd;
  min-height:var(--tap);
}
.v strong{display:block;font-size:clamp(1rem, .5vw + .9rem, 1.08rem);letter-spacing:-.015em;overflow-wrap:anywhere}
.v small{display:block;margin-top:4px;color:var(--muted);line-height:1.45}
.say-prompt{
  font-size:clamp(1rem, .4vw + .92rem, 1.08rem);line-height:1.55;margin:0;padding:14px 14px;
  background:#f8fafc;border-radius:12px;border:1px solid var(--line);
}
.say-ans{
  margin-top:10px;padding:14px;border-radius:12px;background:#ecfdf5;border:1px solid #a7f3d0;
  font-family:"Source Serif 4",serif;font-size:clamp(1.1rem, 1vw + .85rem, 1.28rem);
  font-weight:700;color:#065f46;overflow-wrap:anywhere;
}
.hint{margin:8px 0 0;font-size:.85rem;color:var(--muted)}
.shadow-status{
  display:none;margin-top:12px;padding:12px 14px;border-radius:10px;
  background:#eff6ff;color:#1e3a8a;font-size:.9rem;font-weight:650;line-height:1.45;
}
.shadow-status.show{display:block}
.navrow{display:flex;justify-content:space-between;gap:10px;margin-top:16px}
.navrow .btn{flex:1;max-width:220px}
.done{text-align:center;padding:clamp(22px, 3vw, 36px) 18px;max-width:720px}
.done h2{
  margin:0;font-family:"Source Serif 4",serif;
  font-size:clamp(1.5rem, 2vw + .8rem, 1.95rem);letter-spacing:-.03em;
}
.done p{color:var(--muted);line-height:1.6}
.done .actions a.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}

/* Desktop wide: hero fuller, card sits in readable column under wide hero */
@media (min-width:900px){
  .hero{min-height:min(42vh, 420px)}
  .hero img{height:min(42vh, 420px)}
  .panel{display:flex;justify-content:center}
  .actions{grid-template-columns:repeat(3, minmax(0, 1fr));gap:12px}
  .actions .wide{grid-column:auto} /* 听 / 影子 / 再听 同一行 */
}

/* Tablet */
@media (max-width:899.98px){
  .card{max-width:none}
  .navrow .btn{max-width:none}
}

/* Phone: stack controls, large taps, tighter hero, no horizontal overflow */
@media (max-width:640px){
  :root{--gutter:16px;--radius:14px}
  .shell{padding-bottom:calc(88px + env(safe-area-inset-bottom, 0px))}
  .hero{min-height:200px;border-radius:14px}
  .hero img{height:200px}
  .hero-copy{padding:16px}
  .hero .sub{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .actions{grid-template-columns:1fr;gap:8px}
  .actions .wide{grid-column:auto}
  .btn{width:100%;padding:14px 16px;font-size:1rem}
  .navrow{flex-direction:column-reverse}
  .navrow .btn{width:100%;max-width:none}
  .date-pill{font-size:.72rem;padding:6px 10px}
  .ipa{font-size:.8rem}
}

@media (max-width:380px){
  .hero h1{font-size:1.35rem}
  .en{font-size:1.2rem}
}