:root{color-scheme:light;--ink:#182824;--forest:#122822;--muted:#465850;--paper:#f4f7ef;--line:#ccd9cb;--amber:#ffcf69;--orange:#ba5a27;--green:#2c664d;--white:#fff;--gutter:clamp(1.1rem,5vw,4.5rem);font:16px/1.65 system-ui,"PingFang SC","Microsoft YaHei",sans-serif}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;color:var(--ink);background:var(--paper)}
h1,h2,h3,p,figure,ol,ul,dl{margin:0}
a{color:inherit;text-underline-offset:.21em}
a:focus-visible{outline:3px solid #c05120;outline-offset:4px}
img{display:block;max-width:100%}
code{overflow-wrap:anywhere;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.wrap{width:min(100% - var(--gutter)*2,68rem);margin-inline:auto}
.skip{position:absolute;z-index:2;inset:.5rem auto auto .5rem;padding:.5rem 1rem;color:#132a22;background:var(--amber);transform:translateY(-170%)}
.skip:focus{transform:none}
.mast{color:#e5eee3;background:var(--forest);border-bottom:1px solid #ffffff26}
.mast-line{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:64px}
.brand-lock{display:inline-flex;gap:.65rem;align-items:center;color:#fff;text-decoration:none;font-weight:750;white-space:nowrap}
.brand-lock img{width:27px;height:27px}
.mast nav,.site-tail nav{display:flex;flex-wrap:wrap;gap:clamp(.85rem,3vw,1.8rem);font-size:.87rem}
.mast nav a{text-decoration:none;padding-block:.6rem}
.mast nav a:hover{text-decoration:underline}
.arrival{color:#fff;background:var(--forest);padding:clamp(2.4rem,7vw,5.7rem) 0 0}
.overline{display:flex;align-items:center;gap:.5rem;font:700 .77rem/1.4 ui-monospace,SFMono-Regular,monospace;letter-spacing:.11em;text-transform:uppercase}
.overline::before{content:"";width:.5rem;height:.5rem;flex:none;border-radius:2px;background:var(--amber)}
.arrival .overline{color:#bdcec2}
.arrival h1{font-size:clamp(2.2rem,5.1vw,4.2rem);letter-spacing:-.052em;line-height:1.1;margin:.6rem 0 1.2rem}
.arrival h1 span{display:block;color:var(--amber)}
.arrival-layout{display:grid;grid-template-columns:1.25fr .75fr;align-items:end;gap:clamp(1.5rem,7vw,6rem);padding-bottom:clamp(2rem,4vw,3.5rem)}
.arrival-lead{color:#d7e5da;max-width:34em}
.arrival-lead strong{display:block;color:#fff;font-size:clamp(1.02rem,2vw,1.22rem);margin-bottom:.35rem}
.first-action{display:inline-flex;margin-top:1.12rem;background:var(--amber);color:#243027;padding:.64rem 1.12rem;border-radius:8px;text-decoration:none;font-weight:760;align-items:center;gap:.9rem}
.first-action::after{content:"";width:.52rem;height:.52rem;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-2px)}
.first-action:hover{background:#ffe0a0}
.source-slip{display:grid;gap:.34rem;align-self:end;padding:.75rem 0 .75rem 1.15rem;border-left:2px solid #709d83;color:#c6d9c9;font-size:.94rem}
.source-slip b{color:#fff}
.station-menu{display:grid;grid-template-columns:repeat(4,1fr);border:solid #ffffff2d;border-width:1px 1px 0;border-radius:14px 14px 0 0;background:#1d392f}
.station-menu a{display:flex;align-items:center;gap:.65rem;min-height:56px;padding:.6rem .9rem;text-decoration:none;color:#e2eee4}
.station-menu a:not(:last-child){border-right:1px solid #ffffff2d}
.station-menu a:hover,.station-menu a[aria-current]{color:#221c13;background:var(--amber)}
.station-menu a:first-child{border-radius:13px 0 0 0}
.station-menu a:last-child{border-radius:0 13px 0 0}
.station-menu span{font:800 .8rem/1.2 ui-monospace,monospace;color:#ffda85}
.station-menu a:hover span,.station-menu a[aria-current] span{color:#57401c}
.track{position:relative;list-style:none;padding:1.7rem 0;margin:0 auto}
.track::before{content:"";position:absolute;inset:1.7rem auto 1.7rem 50%;width:2px;background:repeating-linear-gradient(180deg,#79a88c 0 6px,transparent 6px 11px);transform:translateX(-50%)}
.checkpoint{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 3.6rem minmax(0,1fr);align-items:center;min-height:210px;padding:1.1rem 0;scroll-margin-top:1.1rem}
.station-medallion{grid-column:2;grid-row:1;position:relative;z-index:1;justify-self:center;display:grid;place-items:center;width:2.5rem;height:2.5rem;border:2px solid #437756;border-radius:50%;background:#edf4e8;color:#254d38;font:750 .84rem ui-monospace,monospace}
.stage-art{grid-column:1;grid-row:1;justify-self:end;display:grid;place-items:center;width:min(100%,20.5rem);min-height:9rem;padding:.9rem;background:linear-gradient(135deg,#e4eee0,#edf3e6);border:1px solid #dbe7d9;border-radius:88px 22px 88px 22px}
.stage-art img{width:clamp(130px,23vw,210px);height:124px;object-fit:contain}
.stage-text{grid-column:3;grid-row:1;max-width:31rem;padding:1.1rem 1.25rem;border-left:3px solid #97b5a3}
.checkpoint:nth-child(even) .stage-art{grid-column:3;justify-self:start;border-radius:22px 88px 22px 88px}
.checkpoint:nth-child(even) .stage-text{grid-column:1;justify-self:end;border-left:0;border-right:3px solid #97b5a3}
.stage-text h2,.briefing h2,.case-sheet h2,.ordinary h2{font-size:clamp(1.28rem,2.4vw,1.72rem);letter-spacing:-.024em;line-height:1.28}
.stage-text p,.stage-text ul{margin-top:.55rem}
.stage-text p,.stage-text li{color:var(--muted)}
.stage-text ul{padding-inline-start:1.15rem}
.stage-text li+li{margin-top:.32rem}
.stage-text a{color:#255740;font-weight:660}
.checkpoint.is-current .station-medallion,.checkpoint:target .station-medallion{background:var(--amber);border-color:#7b531b;color:#32270e}
.checkpoint.is-current .stage-text,.checkpoint:target .stage-text{border-color:var(--orange)}
@media(prefers-reduced-motion:no-preference){
  .stage-art img{transition:transform 420ms cubic-bezier(.19,.75,.22,1)}
  .checkpoint.is-current .stage-art img{transform:translateY(-6px) rotate(-3deg) scale(1.04)}
  .checkpoint.is-current:nth-child(even) .stage-art img{transform:translateY(-6px) rotate(3deg) scale(1.04)}
}
.example-strip{background:#e0eee3;border-radius:.5rem;padding:.55rem .68rem;color:#203d31;overflow-wrap:anywhere}
.example-strip small{display:block;color:#41594e}
.briefing{border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1.85fr;gap:1.2rem;padding:2rem 0 3.5rem}
.briefing .overline{margin-bottom:.55rem;color:#41594e}
.briefing .overline::before,.ordinary .overline::before{background:#bb642e}
.briefing p:not(.overline){margin-top:.5rem;color:var(--muted)}
.reading-tickets{display:grid;gap:.7rem}
.reading-ticket{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.15rem 1rem;border:1px solid var(--line);background:#fff;border-radius:7px;padding:.85rem 1rem}
.reading-ticket b{color:#875019;grid-row:1 / span 2;font:800 .8rem/1.5 ui-monospace,monospace}
.reading-ticket h3{font-size:1rem;line-height:1.4}
.reading-ticket p{color:var(--muted);font-size:.9rem}
.ordinary,.case-main{padding-block:clamp(1.8rem,5vw,4rem) 4rem}
.ordinary{width:min(100% - var(--gutter)*2,51rem)}
.ordinary h1,.case-sheet h1{font-size:clamp(1.95rem,4.5vw,3.25rem);line-height:1.16;letter-spacing:-.045em;margin:.55rem 0 1rem}
.ordinary p+p,.case-reading p+p{margin-top:.8rem}
.ordinary h2,.case-reading h2{margin-top:1.6rem;margin-bottom:.6rem}
.ordinary a,.case-reading a{color:#255740}
.guide-items{margin-top:1.25rem;border-block:1px solid var(--line)}
.guide-items>div{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:1rem;padding:.85rem 0}
.guide-items>div+div{border-top:1px solid var(--line)}
.guide-items dt{font-weight:760}
.guide-items dd{margin:0}
.case-main{width:min(100% - var(--gutter)*2,53rem);margin:auto}
.crumb{display:flex;gap:.9rem;font-size:.86rem;margin-bottom:.8rem;color:#486052}
.case-sheet{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.case-sheet header{padding:clamp(1.2rem,4vw,2.4rem);background:#dfece2;border-bottom:1px solid var(--line)}
.case-sheet time{color:#41594e;font-size:.86rem}
.case-reading{padding:clamp(1.2rem,4vw,2.4rem);overflow-wrap:break-word}
.case-reading .answer{padding:.75rem 1rem;border-left:4px solid #b4642c;background:#fff5dd;font-weight:690}
.case-reading ul{padding-inline-start:1.3rem;margin:.9rem 0}
.case-reading li+li{margin-top:.55rem}
.case-reading code{background:#eef3ee;padding:.09em .2em;border-radius:.2em}
.site-tail{background:var(--forest);color:#e6eee5;padding:1.5rem 0}
.tail-line{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:1rem}
.site-tail nav{justify-self:end;align-self:center}
.site-tail p{max-width:38em;margin-top:.22rem;color:#c8dacd;font-size:.88rem}
@media(max-width:42rem){
  .mast-line{min-height:55px}
  .arrival{padding-top:2rem}
  .arrival-layout{grid-template-columns:1fr;gap:0;padding-bottom:1.3rem}
  .arrival h1{margin-bottom:.95rem}
  .arrival-lead strong{font-size:1rem;text-wrap:balance}
  .example-strip code{font-size:.88rem}
  .source-slip{display:none}
  .station-menu{grid-template-columns:repeat(2,minmax(0,1fr))}
  .station-menu a{min-height:45px;font-size:.9rem;padding:.5rem .65rem}
  .station-menu a:nth-child(2){border-right:0;border-radius:0 13px 0 0}
  .station-menu a:nth-child(n+3){border-top:1px solid #ffffff2d;border-radius:0}
  .track{padding:1.2rem 0}
  .track::before{left:1.03rem;inset-block:1.8rem 2rem}
  .checkpoint,.checkpoint:nth-child(even){grid-template-columns:2.1rem minmax(0,1fr);min-height:0;gap:.45rem .65rem;align-items:start;padding:.7rem 0 1.4rem}
  .checkpoint .station-medallion{grid-column:1;grid-row:1;width:2.03rem;height:2.03rem;margin-top:.25rem}
  .checkpoint .stage-art,.checkpoint:nth-child(even) .stage-art{grid-column:2;grid-row:1;justify-self:stretch;width:100%;min-height:5.5rem;padding:.2rem .45rem;background:linear-gradient(100deg,#e5eee0,#eff4e8);border-radius:17px 48px 48px 17px}
  .stage-art img{width:158px;height:82px}
  .checkpoint .stage-text,.checkpoint:nth-child(even) .stage-text{grid-column:2;grid-row:2;justify-self:stretch;padding:.28rem 0 .35rem .7rem;border-right:0;border-left:3px solid #97b5a3}
  .checkpoint.is-current .stage-text,.checkpoint:target .stage-text{border-color:var(--orange)}
  .briefing,.tail-line{grid-template-columns:1fr}
  .site-tail nav{justify-self:start}
  .guide-items>div{grid-template-columns:1fr;gap:.15rem}
}
