/* ROUTE — the full-bleed cover and the three interactive blocks (v1).
   Kept in its own file: assets/route.css belongs to another session.
   Everything here must work from file:// — no masks, no external fetches.
   Explicit top/right/bottom/left before every inset, vh before svh. */

/* ============================== 1 · the cover ============================== */
.rt-story{position:relative}
.rt-frame{position:relative;overflow:hidden;background:var(--bg,#fff)}
.rt-frame img{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 100%;opacity:0;transition:opacity .75s ease}
/* every render stands on a floor with empty wall above it, so anchoring to the bottom
   keeps the subject whole and leaves the top band clear for the type */
.rt-frame img:nth-child(1){object-position:52% 100%}
.rt-frame img.is-on{opacity:1}
.rt-story.is-still .rt-frame img{transition:none}

@media(min-width:901px){
  /* the page's generic section padding would push the image off the first screen */
  .rt-hero{margin:0 0 clamp(40px,6vw,76px);padding:0;max-width:none}
  .rt-hero .rt-frame{height:min(calc(100svh - var(--nav,56px)),64vw);min-height:560px}
  /* the scenes are light and the subject sits low, so the type is ink on a white veil */
  /* The veil exists only so the type reads. It has to be gone before the robot starts
     (~43% down the frame) or it washes the render out — that is what "有点模糊" was. */
  .rt-hero .rt-frame::before{content:"";position:absolute;top:0;right:0;left:0;height:42%;
    background:linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.78) 38%,
      rgba(255,255,255,.34) 72%,rgba(255,255,255,0) 100%);
    z-index:1;pointer-events:none;transition:opacity .6s ease}
  .rt-hero .rt-frame::after{content:"";position:absolute;right:0;bottom:0;left:0;height:26%;
    background:linear-gradient(0deg,rgba(255,255,255,.96) 10%,rgba(255,255,255,.74) 42%,rgba(255,255,255,0));
    z-index:1;pointer-events:none}
  .rt-hero[data-step="1"] .rt-frame::before,
  .rt-hero[data-step="2"] .rt-frame::before{opacity:.45}
  .rt-hero .rt-top{position:absolute;top:0;right:0;left:0;z-index:2;padding-top:clamp(14px,2vw,24px)}
  .rt-hero .cs-hero{padding-top:clamp(6px,1.4vw,18px);padding-bottom:0}
  .rt-hero h1{margin-bottom:.14em;font-size:clamp(2.1rem,5.4vw,3.9rem)}
  .rt-hero .cs-tagline{font-size:clamp(15px,1.32vw,19px);line-height:1.45}
  .rt-hero .cs-chips span{font-size:12.5px}
  /* the Red Dot art sits in the corner of the image, like UOSON's seal */
  .rt-hero .rt-seal{position:absolute;top:clamp(14px,2vw,24px);
    right:max(22px,calc((100% - 1100px) / 2 + 22px));margin:0;z-index:3;transition:opacity .6s ease}
  .rt-hero .rt-seal img{height:62px}
  /* the cover image is light in both themes, so the seal on it keeps the dark-text art */
  .rt-hero .rt-seal .on-page{display:none}
  .rt-hero[data-step="1"] .rt-seal,
  .rt-hero[data-step="2"] .rt-seal{opacity:0;pointer-events:none}
  .rt-hero .cs-hero{transition:opacity .6s ease,transform .6s ease}
  .rt-hero[data-step="1"] .cs-hero,
  .rt-hero[data-step="2"] .cs-hero{opacity:0;transform:translateY(-14px);pointer-events:none}
  .rt-hero .cs-tagline{max-width:30ch;margin-left:auto;margin-right:auto}
  .rt-hero .rt-tabs{position:absolute;right:0;bottom:0;left:0;z-index:2}
  .rt-hero .rt-tab{flex:0 1 clamp(260px,32%,380px)}
  .rt-hero .rt-cap{display:none}
}
/* dark mode: the renders stay light, so the veil does too — the type inverts instead */
:root[data-theme="dark"] .rt-hero .rt-frame::before{
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.6) 52%,rgba(255,255,255,0))}
:root[data-theme="dark"] .rt-hero .rt-frame::after{
  background:linear-gradient(0deg,rgba(255,255,255,.9),rgba(255,255,255,0))}
@media(min-width:901px){
  :root[data-theme="dark"] .rt-hero .rt-top,
  :root[data-theme="dark"] .rt-hero .rt-tabs{color:#1d1d1f}
  :root[data-theme="dark"] .rt-hero h1,
  :root[data-theme="dark"] .rt-hero .cs-tagline,
  :root[data-theme="dark"] .rt-hero .rt-tab b{color:#1d1d1f}
  :root[data-theme="dark"] .rt-hero .cs-tagline,
  :root[data-theme="dark"] .rt-hero .rt-tab span{color:#55555a}
  :root[data-theme="dark"] .rt-hero .cs-chips span{border-color:rgba(0,0,0,.16);color:#3a3a3e;background:rgba(255,255,255,.5)}
  :root[data-theme="dark"] .rt-hero .cs-back__btn{border-color:rgba(0,0,0,.14);background:rgba(255,255,255,.72);color:#1d1d1f}
}

/* the step row */
.rt-tabs{display:flex;gap:0;padding:0 max(22px,calc((100% - 1100px)/2));
  border-top:1px solid var(--line,rgba(0,0,0,.09))}
.rt-hero .rt-tabs{border-top:0}
.rt-tab{flex:1 1 0;min-width:0;display:block;text-align:left;border:0;background:none;cursor:pointer;
  font:inherit;color:inherit;padding:16px 18px 18px 0;position:relative;opacity:.46;
  transition:opacity .3s ease}
.rt-tab.is-on{opacity:1}
.rt-tab:hover{opacity:.8}
.rt-tab.is-on:hover{opacity:1}
.rt-tab i{display:block;font-style:normal;font-size:11.5px;letter-spacing:.14em;font-weight:600;
  color:var(--rt-accent,#0e9b6c);margin-bottom:5px}
.rt-tab b{display:block;font-size:16px;font-weight:650;letter-spacing:-.01em;line-height:1.2}
.rt-tab span{display:block;margin-top:4px;font-size:13px;line-height:1.45;color:var(--ink-2,#6b6b70);
  max-width:28ch}
/* the progress hairline under the running step */
.rt-tab::after{content:"";position:absolute;top:0;left:0;height:2px;width:0;background:var(--rt-accent,#0e9b6c)}
.rt-story.is-auto .rt-tab.is-on::after{width:100%;transition:width 3.6s linear}
.rt-tab:focus-visible{outline:2px solid var(--rt-accent,#0e9b6c);outline-offset:-3px;border-radius:4px}

@media(max-width:900px){
  .rt-hero{padding:0;max-width:none}
  .rt-hero .rt-frame{aspect-ratio:3/2}
  .rt-hero .rt-frame::before,.rt-hero .rt-frame::after{display:none}
  .rt-hero .rt-top{padding:22px 0 0}
  .rt-hero .rt-seal{position:static;margin:20px 0 0}
  .rt-hero .rt-seal img{height:58px}
  .rt-hero .rt-seal .on-image{display:none}
  .rt-hero .rt-seal .on-page{display:block}
  .rt-hero[data-step="1"] .rt-seal,
  .rt-hero[data-step="2"] .rt-seal{opacity:1;pointer-events:auto}
  .rt-tabs{padding:0 20px;gap:2px}
  .rt-tab{padding:13px 10px 14px 0}
  .rt-tab b{font-size:14px}
  .rt-tab span{display:none}
  .rt-cap{margin:12px 20px 0;font-size:13.5px;line-height:1.5;color:var(--ink-2,#6b6b70)}
}
@media(max-width:640px){
  /* a 16:9 scene in a tall frame loses the robot's head — stay near the source aspect
     and shift the crop onto the robot and the suitcase */
  .rt-hero .rt-frame{aspect-ratio:4/3}
  .rt-frame img{object-position:44% 100%}
  .rt-frame img:nth-child(1){object-position:40% 100%}
}
@media(min-width:901px){.rt-cap{display:none}}
@supports not (aspect-ratio: 1/1){
  @media(max-width:900px){.rt-hero .rt-frame::after{content:"";display:block;padding-top:66.6%}}
}

/* ===================== 2 · the terminal wayfinding demo ==================== */
.rt-demo{--rt-accent:#0e9b6c;--rt-lime:#c6f32a;margin:clamp(34px,5vw,64px) auto 0;
  width:min(1180px,100% - 48px)}
:root[data-theme="dark"] .rt-demo{--rt-accent:#3fd69f}
.rt-demo__head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.rt-demo__head h3{margin:0;font-size:clamp(19px,2vw,23px);font-weight:650;letter-spacing:-.02em}
.rt-demo__head p{margin:0;font-size:14px;color:var(--ink-2,#6b6b70)}
.rt-demo__grid{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:20px;align-items:start}
@media(max-width:940px){.rt-demo__grid{grid-template-columns:minmax(0,1fr)}}

.rt-plan{position:relative;border:1px solid var(--line,rgba(0,0,0,.09));border-radius:18px;overflow:hidden;
  background:var(--bg-alt,#fff)}
:root[data-theme="dark"] .rt-plan{background:#141416}
.rt-plan svg{display:block;width:100%;height:auto}
.rt-plan__hint{position:absolute;top:12px;left:14px;font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2,#86868b);pointer-events:none}

/* plan furniture */
.rtp-floor{fill:rgba(0,0,0,.028)}
.rtp-area{fill:rgba(0,0,0,.045);stroke:rgba(0,0,0,.08);stroke-width:1}
.rtp-wall{stroke:rgba(0,0,0,.16);stroke-width:2;fill:none;stroke-linecap:round}
.rtp-label{font-size:13px;font-weight:600;fill:var(--ink,#1d1d1f);letter-spacing:-.01em}
.rtp-sub{font-size:10.5px;fill:var(--ink-2,#86868b);letter-spacing:.04em}
:root[data-theme="dark"] .rtp-floor{fill:rgba(255,255,255,.035)}
:root[data-theme="dark"] .rtp-area{fill:rgba(255,255,255,.055);stroke:rgba(255,255,255,.09)}
:root[data-theme="dark"] .rtp-wall{stroke:rgba(255,255,255,.2)}
:root[data-theme="dark"] .rtp-label{fill:#f5f5f7}
/* a destination you can tap */
.rtp-pin{cursor:pointer}
.rtp-pin .hit{fill:transparent}
.rtp-pin .ring{fill:none;stroke:rgba(0,0,0,.2);stroke-width:1.5;transition:stroke .25s ease,fill .25s ease}
.rtp-pin .dot{fill:rgba(0,0,0,.28);transition:fill .25s ease}
:root[data-theme="dark"] .rtp-pin .ring{stroke:rgba(255,255,255,.26)}
:root[data-theme="dark"] .rtp-pin .dot{fill:rgba(255,255,255,.34)}
.rtp-pin:hover .ring,.rtp-pin:focus-visible .ring{stroke:var(--rt-accent)}
.rtp-pin:hover .dot,.rtp-pin:focus-visible .dot{fill:var(--rt-accent)}
.rtp-pin.is-target .ring{stroke:var(--rt-accent);fill:rgba(14,155,108,.12)}
.rtp-pin.is-target .dot{fill:var(--rt-accent)}
.rtp-pin:focus{outline:none}
.rtp-pin:focus-visible .hit{stroke:var(--rt-accent);stroke-width:2;rx:10}
/* the route it will take, and the arrows it throws on the floor */
.rtp-route{fill:none;stroke:var(--rt-accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:7 9;opacity:.5}
.rtp-arrow{fill:var(--rt-accent);opacity:0}
.rtp-crowd{fill:rgba(0,0,0,.18)}
:root[data-theme="dark"] .rtp-crowd{fill:rgba(255,255,255,.22)}
/* the robot, the line and the traveler */
.rtp-bot .body{fill:#fff;stroke:rgba(0,0,0,.34);stroke-width:1.6}
:root[data-theme="dark"] .rtp-bot .body{fill:#f2f2f4;stroke:rgba(0,0,0,.5)}
.rtp-bot .screen{fill:#1b1b1d}
.rtp-bot .eye{fill:var(--rt-lime)}
.rtp-bot .bag{fill:rgba(0,0,0,.3)}
.rtp-line{stroke:var(--ink,#1d1d1f);stroke-width:2.4;opacity:.55;fill:none;stroke-linecap:round}
:root[data-theme="dark"] .rtp-line{stroke:#f5f5f7}
.rtp-user{fill:var(--ink,#1d1d1f)}
:root[data-theme="dark"] .rtp-user{fill:#f5f5f7}

/* the panel beside the plan */
.rt-panel{border:1px solid var(--line,rgba(0,0,0,.09));border-radius:18px;padding:18px;
  background:var(--bg-alt,#fff);display:flex;flex-direction:column;gap:16px}
:root[data-theme="dark"] .rt-panel{background:#141416}
.rt-panel__eyebrow{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2,#86868b)}
.rt-dests{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rt-dest{font:inherit;font-size:14px;font-weight:550;text-align:left;cursor:pointer;
  padding:11px 12px;border-radius:12px;border:1px solid var(--line,rgba(0,0,0,.1));
  background:transparent;color:var(--ink,#1d1d1f);transition:background-color .2s ease,border-color .2s ease}
.rt-dest:hover{background:rgba(0,0,0,.035)}
:root[data-theme="dark"] .rt-dest:hover{background:rgba(255,255,255,.06)}
.rt-dest.is-on{border-color:var(--rt-accent);background:rgba(14,155,108,.1);color:var(--rt-accent)}
.rt-dest small{display:block;margin-top:2px;font-size:11.5px;font-weight:400;color:var(--ink-2,#86868b)}
.rt-dest.is-on small{color:inherit;opacity:.75}
.rt-dest:focus-visible{outline:2px solid var(--rt-accent);outline-offset:1px}

/* a strip along the bottom of the plan, so the two columns end level */
.rt-read{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--line,rgba(0,0,0,.09));border-top:1px solid var(--line,rgba(0,0,0,.09))}
.rt-read div{background:var(--bg-alt,#fff);padding:11px 16px}
:root[data-theme="dark"] .rt-read div{background:#141416}
.rt-read b{display:block;font-size:17px;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rt-read span{display:block;margin-top:2px;font-size:11px;color:var(--ink-2,#86868b)}

/* ROUTE's own screen, live */
.rt-face{display:flex;align-items:center;gap:14px}
.rt-screen{width:104px;height:72px;flex:none;border-radius:20px 20px 17px 17px;background:#1b1b1d;
  position:relative;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.09)}
.rt-screen i{position:absolute;top:50%;width:13px;height:26px;border-radius:7px;background:var(--rt-lime);
  margin-top:-13px;transition:height .22s ease,margin-top .22s ease,border-radius .22s ease,
    transform .32s cubic-bezier(.34,1.3,.5,1),opacity .2s ease;
  box-shadow:0 0 10px 1px rgba(198,243,42,.45)}
.rt-screen i.l{left:30px}
.rt-screen i.r{right:30px}
.rt-screen.blink i{height:3px;margin-top:-1.5px}
/* states */
.rt-screen[data-face="listen"] i.r{height:13px;margin-top:-6.5px;border-radius:50%}
.rt-screen[data-face="guide"] i{transform:translateX(5px)}
.rt-screen[data-face="turn-l"] i{transform:translateX(-7px) rotate(-12deg)}
.rt-screen[data-face="turn-r"] i{transform:translateX(7px) rotate(12deg)}
.rt-screen[data-face="arrived"] i{height:13px;margin-top:0;border-radius:0 0 13px 13px;
  box-shadow:0 3px 10px 1px rgba(198,243,42,.4)}
.rt-screen[data-face="stop"] i{height:22px;width:5px;border-radius:2px;transform:rotate(45deg)}
.rt-screen[data-face="stop"] i.r{transform:rotate(-45deg)}
.rt-face p{margin:0;font-size:13px;line-height:1.5;color:var(--ink-2,#6b6b70)}
.rt-face p b{display:block;color:var(--ink,#1d1d1f);font-weight:600;font-size:13.5px;margin-bottom:1px}

/* the pull-ring and its cue */
.rt-cue{display:flex;align-items:center;gap:13px;padding-top:2px}
.rt-ring{position:relative;width:52px;height:52px;flex:none;border-radius:50%;cursor:pointer;
  border:4px solid var(--ink,#1d1d1f);background:transparent;transition:transform .18s ease}
:root[data-theme="dark"] .rt-ring{border-color:#f5f5f7}
.rt-ring:active{transform:scale(.93)}
.rt-ring span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:8.5px;
  font-weight:700;letter-spacing:.06em;color:var(--ink,#1d1d1f)}
:root[data-theme="dark"] .rt-ring span{color:#f5f5f7}
.rt-ring::after{content:"";position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;inset:-4px;
  border-radius:50%;border:2px solid var(--rt-accent);opacity:0;transform:scale(1)}
.rt-ring.buzz::after{animation:rt-buzz .5s ease-out}
@keyframes rt-buzz{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}
.rt-ring:focus-visible{outline:2px solid var(--rt-accent);outline-offset:3px}
.rt-cue__t{font-size:12.5px;line-height:1.45;color:var(--ink-2,#6b6b70)}
.rt-cue__t b{display:block;color:var(--ink,#1d1d1f);font-size:13px;font-weight:600}

.rt-note{margin:14px 0 0;padding:0;border:0;background:none;max-width:76ch;
  font-size:12.5px;line-height:1.55;color:var(--ink-2,#86868b)}
@media(prefers-reduced-motion:reduce){
  .rt-frame img{transition:none}
  .rt-story.is-auto .rt-tab.is-on::after{transition:none;width:100%}
  .rt-ring.buzz::after{animation:none}
  .rt-screen i{transition:none}
}