:root { color-scheme: light; --paper:#f2f0e9; --ink:#1c1d1b; --muted:#70716b; --orange:#f25d22; --line:#d4d2c9; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
main { max-width:1456px; margin:auto; padding:30px 48px 26px; }
header { display:flex; align-items:center; justify-content:space-between; padding-bottom:22px; border-bottom:1px solid var(--line); }
.identity { display:flex; align-items:center; gap:26px; }
.identity img { width:118px; height:auto; }
header span, header p { font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; }
header p { color:var(--muted); }
.intro { display:flex; align-items:end; justify-content:space-between; padding:32px 0 28px; }
h1 { margin:0; font-size:clamp(30px,4.1vw,56px); line-height:1; letter-spacing:-2.5px; font-weight:800; }
.intro p { margin:0 0 4px; font-size:15px; line-height:1.55; color:#5b5c55; }
.credits { max-width:760px; padding:32px 0; }
.credits h2 { margin-top:32px; }
.credits p { font-size:15px; line-height:1.6; }
.credits a { color:inherit; text-underline-offset:3px; }
nav { display:flex; border-bottom:1px solid var(--ink); }
.choice-label { margin:0 0 8px; color:var(--muted); font-size:12px; font-weight:700; letter-spacing:.3px; }
.scenario-label { margin-top:18px; }
button { cursor:pointer; font:inherit; border:0; background:none; color:inherit; }
button:focus-visible, a:focus-visible, select:focus-visible { outline:3px solid var(--orange); outline-offset:3px; }
.route { text-align:left; width:33.333%; padding:18px 16px 18px 0; border-top:3px solid transparent; font-size:18px; font-weight:700; }
.route span { color:var(--muted); font-size:12px; margin-right:10px; font-weight:400; }
.route.active { border-top-color:var(--orange); }
.route.active span { color:var(--orange); }
.template-picker { display:flex; align-items:center; gap:6px; padding:0 0 15px; border-bottom:1px solid var(--line); }
.template { padding:9px 14px; font-size:13px; border-radius:2px; }
.template.active { background:var(--ink); color:var(--paper); }
.template:hover:not(.active) { background:#e4e2d9; }
.player { margin-top:18px; }
#stage { display:block; width:min(100%, calc((100svh - 380px) * 16 / 9)); height:auto; aspect-ratio:16/9; background:#000; margin:0 auto; object-fit:contain; }
#player-status { margin:8px 0 0; min-height:0; font-size:12px; color:var(--muted); }
#player-status:empty { display:none; }
button:disabled, select:disabled { opacity:.5; cursor:wait; }
.transport { display:flex; gap:6px; align-items:center; margin-top:12px; }
.transport button { padding:10px 15px; font-size:12px; font-weight:700; min-height:38px; }
.transport .primary { background:var(--ink); color:white; min-width:147px; }
.transport button:hover { background:#deded5; color:var(--ink); }
.transport .primary:hover { background:var(--orange); }
#phase { flex:1; color:var(--muted); text-align:center; font-size:12px; }
.speed-label { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; }
select { border:0; background:transparent; font:inherit; color:var(--ink); padding:8px 4px; }
.timeline { position:relative; height:24px; margin-top:10px; }
.timeline::before { content:""; position:absolute; left:0; right:0; height:4px; background:#d8d7cf; top:10px; }
.cover-window { position:absolute; width:3px; height:12px; top:6px; background:#b78a00; }
input[type=range] { appearance:none; position:relative; width:100%; margin:0; height:24px; background:transparent; cursor:ew-resize; }
input[type=range]::-webkit-slider-thumb { appearance:none; width:10px; height:16px; background:var(--ink); border-radius:0; }
.timeline-caption { display:flex; justify-content:space-between; color:var(--muted); font-size:11px; }
.direction { display:grid; grid-template-columns:1fr 1fr; gap:64px; padding:30px 0; margin-top:18px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
h2 { font-size:30px; letter-spacing:-1px; margin:0 0 12px; }
.direction p { font-size:14px; line-height:1.55; max-width:480px; margin:0; color:#5b5c55; }
dl { margin:0; display:flex; flex-direction:column; gap:17px; }
dl div { display:grid; grid-template-columns:135px 1fr; }
dt { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.7px; padding-top:3px; }
dd { margin:0; font-size:13px; line-height:1.5; }
.strip-heading { display:flex; align-items:center; justify-content:space-between; padding:27px 0 15px; }
h3 { font-size:15px; margin:0; }
.strip-heading span { font-size:11px; color:var(--muted); }
.frames { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.frame { padding:0; text-align:left; min-width:0; }
.frame img { width:100%; height:auto; aspect-ratio:16/9; display:block; }
.frame-caption { display:flex; justify-content:space-between; font-size:11px; padding-top:10px; }
.frame-caption time { color:var(--muted); }
footer { display:flex; gap:24px; justify-content:space-between; align-items:start; margin-top:30px; border-top:1px solid var(--line); padding-top:18px; font-size:11px; color:var(--muted); line-height:1.5; }
footer p { margin:0; max-width:790px; }
a { color:inherit; white-space:nowrap; }
@media(max-width:760px) { main{padding:20px;} header span{display:none;} .intro{padding:25px 0;gap:20px;align-items:start;} h1{letter-spacing:-1px;} .intro p{font-size:12px;max-width:145px;} .route{font-size:14px;} .route span{display:block;margin-bottom:5px;} .transport{flex-wrap:wrap;} #phase{order:2;flex-basis:100%;padding:6px;} .transport button{padding:9px 10px;} .direction{grid-template-columns:1fr;gap:25px;} .frames{grid-template-columns:repeat(2,1fr);gap:20px 12px;} .timeline-caption{font-size:10px;gap:20px;} footer{flex-direction:column;gap:12px;} .strip-heading span{display:none;} }
@media(max-width:760px) {
  .intro { flex-direction:column; gap:12px; }
  .intro p { max-width:none; }
  .template-picker { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }
  .template { padding:10px 5px; font-size:12px; }
  #stage { width:100%; }
  .route { display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; }
  .transport { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
  #sound { grid-row:2; grid-column:3; }
  .transport .primary { min-width:0; }
  #phase { order:0; grid-row:3; grid-column:1 / -1; text-align:center; }
  .speed-label { grid-row:2; grid-column:1 / 3; }
}