/* tour.html: "The app, a tour". A hero with the whole window and numbered pins, the two ways in
   (viewport first, canvas first) around one split screenshot, then ten numbered stops beside a sticky
   rail, each with what you do there, its keys, and big pictures of that part of the app. */

/* hero */
.tour-hero{position:relative;padding-block:calc(var(--barh) + var(--navh) + 44px) 40px;overflow:hidden}
.tour-hero canvas{position:absolute;inset:0;width:100%;height:100%}
.tour-hero .wrap{position:relative}
.tour-hero > .wrap:first-of-type{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,64px);align-items:center}
.tour-hero h1{font-size:clamp(46px,5.8vw,92px);line-height:.94;letter-spacing:-.05em}
.tour-hero h1 i{font-style:normal;color:var(--accent)}
.tour-hero .sub{margin-top:22px;font-size:clamp(18px,1.45vw,21px);line-height:1.42;max-width:440px}
.tour-win{position:relative;margin:0;border:1px solid var(--line-2);border-radius:8px;background:#eff1f5;box-shadow:0 30px 70px rgba(0,0,0,.6)}
.tour-win img{width:100%;height:auto;display:block;border-radius:7px}
.tour-win figcaption{position:absolute;left:0;right:0;top:100%;margin-top:10px;font-family:var(--mono);font-size:11px;color:var(--dim)}
.tour-pin{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);z-index:2;display:flex;align-items:center}
.tour-pin b{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--ink);font:600 13px var(--mono);box-shadow:0 0 0 5px rgba(48,185,254,.28),0 6px 16px rgba(0,0,0,.45);transition:transform .2s}
.tour-pin span{position:absolute;left:38px;white-space:nowrap;font-family:var(--mono);font-size:11.5px;color:var(--fg);background:rgba(6,8,11,.92);padding:5px 8px;border-radius:3px;opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .2s;pointer-events:none}
.tour-pin:hover b,.tour-pin:focus-visible b{transform:scale(1.12)}
.tour-pin:hover span,.tour-pin:focus-visible span{opacity:1;transform:none}
.tour-pin.l span{left:auto;right:38px}
.tour-pin b::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--accent);opacity:0;animation:tour-ping 3.2s ease-out infinite}
.tour-pin:nth-child(3) b::after{animation-delay:.5s}.tour-pin:nth-child(4) b::after{animation-delay:1s}.tour-pin:nth-child(5) b::after{animation-delay:1.5s}
.tour-pin:nth-child(6) b::after{animation-delay:2s}.tour-pin:nth-child(7) b::after{animation-delay:2.5s}.tour-pin:nth-child(8) b::after{animation-delay:3s}
@keyframes tour-ping{0%{opacity:.8;transform:scale(1)}60%,100%{opacity:0;transform:scale(1.9)}}
.tour-chips{position:relative;display:flex;flex-wrap:wrap;gap:6px;margin-top:64px}
.tour-chips a{display:inline-flex;align-items:center;gap:8px;font-size:14px;padding:6px 11px 6px 7px;border:1px solid var(--line-2);border-radius:3px;color:var(--mute);background:rgba(11,15,19,.75);transition:color .2s,border-color .2s}
.tour-chips a i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:2px;padding:1px 4px}
.tour-chips a:hover{color:var(--fg);border-color:var(--accent)}

/* two ways in */
.tour-ways-sec{border-top:1px solid var(--line)}
.tour-ways{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr);gap:clamp(18px,2.4vw,36px);align-items:stretch}
.tour-way{display:flex;flex-direction:column;gap:14px;padding:26px;border:1px solid var(--line);border-radius:8px;background:var(--ink-2);position:relative;min-width:0}
.tour-way.a{align-self:start;--c:var(--create)}
.tour-way.b{align-self:end;--c:var(--simulate)}
.tour-way::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;border-radius:8px 0 0 8px;background:var(--c)}
.tour-way .tag{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--c)}
.tour-way .tag i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.tour-way h3{font-size:clamp(26px,2.4vw,34px);line-height:1.02;letter-spacing:-.035em}
.tour-way p{color:var(--mute);font-size:15.5px;line-height:1.5}
.tour-way .who{color:var(--fg);font-size:15px}
.kline{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:14px;color:var(--mute)}
.tour-split{position:relative;margin:0;border:1px solid var(--line-2);border-radius:8px;background:#eff1f5;box-shadow:0 24px 60px rgba(0,0,0,.5);align-self:center}
.tour-split img{width:100%;height:auto;display:block;border-radius:7px}
.tour-split .lab{position:absolute;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);padding:4px 8px;border-radius:2px}
.tour-split .lab.a{top:15%;left:-10px;background:var(--create)}
.tour-split .lab.b{top:72%;right:-10px;background:var(--simulate);color:#fff}
.tour-split figcaption{margin-top:10px;position:absolute;top:100%;left:0;right:0;font-family:var(--mono);font-size:11px;color:var(--dim)}
.tour-same{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:76px;border-top:1px solid var(--line-2)}
.tour-same div{padding:20px 22px 4px 0;display:flex;flex-direction:column;gap:8px;min-width:0;border-right:1px solid var(--line)}
.tour-same div + div{padding-left:22px}
.tour-same div:last-child{border-right:0}
.tour-same b{font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:-.025em}
.tour-same span{color:var(--mute);font-size:15px}

/* keys and menus */
kbd{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 6px;font:500 12px var(--mono);color:var(--fg);background:var(--ink-3);border:1px solid var(--line-2);border-bottom-width:2px;border-radius:4px;line-height:1}
.kk,.tour-same b{white-space:nowrap}
.kk i,.kline i,.tour-same i,.tour-f1key i{font-style:normal;color:var(--dim);font-family:var(--mono);font-size:11px;margin:0 3px}
.tour-or{color:var(--dim);font-family:var(--mono);font-size:12px;margin:0 6px}
.tour-menu{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px;font-family:var(--mono);font-size:12.5px}
.tour-menu b{font-weight:500;color:var(--fg);background:var(--ink-3);border:1px solid var(--line-2);border-radius:3px;padding:3px 7px}
.tour-menu i{font-style:normal;color:var(--dim)}
.tour-node{font-family:var(--mono);font-size:.86em;color:var(--fg);background:var(--ink-3);border:1px solid var(--line-2);border-radius:3px;padding:1px 5px;white-space:nowrap}

/* the tour: rail + stops */
.tour-body{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:start;border-top:1px solid var(--line)}
.tour-rail{position:sticky;top:calc(var(--barh) + var(--navh) + 32px);padding-top:clamp(48px,5vw,84px)}
.tour-rail .eyebrow{margin-bottom:18px}
.tour-rail ol{list-style:none;padding:0;margin:0;display:grid;gap:2px;position:relative}
.tour-prog{position:absolute;left:13px;width:1px;top:calc(clamp(48px,5vw,84px) + 50px);bottom:16px;background:var(--line-2)}
.tour-prog i{display:block;width:1px;height:0;background:var(--accent);transition:height .3s}
.tour-rail a{position:relative;display:flex;align-items:center;gap:12px;padding:7px 8px 7px 0;font-size:14.5px;color:var(--dim);transition:color .2s}
.tour-rail a i{flex:none;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;font:500 11px var(--mono);font-style:normal;color:var(--mute);background:var(--ink);border:1px solid var(--line-2);transition:background .2s,color .2s,border-color .2s}
.tour-rail a:hover{color:var(--fg)}
.tour-rail a.on{color:var(--fg)}
.tour-rail a.on i{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.tour-stops{min-width:0}
.tour-stop{padding-block:clamp(48px,5vw,84px);border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--barh) + var(--navh) + 8px)}
.tour-stop:last-child{border-bottom:0}
.tour-top{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(22px,3vw,52px);align-items:start;margin-bottom:clamp(26px,3vw,40px)}
.tour-num{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.tour-num span{font:600 15px var(--mono);color:var(--ink);background:var(--accent);border-radius:4px;padding:5px 9px}
.tour-num em{font-style:normal;color:var(--dim);font-size:12px}
.tour-stop h3{font-size:clamp(34px,3.6vw,56px);line-height:.98;letter-spacing:-.045em}
.tour-lede{margin-top:16px;font-size:clamp(18px,1.4vw,21px);line-height:1.4;color:var(--fg);max-width:560px}
.tour-lines{margin-top:18px;display:grid;gap:12px;max-width:600px}
.tour-lines p{color:var(--mute);font-size:16px;line-height:1.55;padding-left:18px;position:relative}
.tour-lines p::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:1.5px;background:var(--accent)}
.tour-side{display:flex;flex-direction:column;gap:18px;padding-top:6px;min-width:0}
.tour-sidepic{grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-bottom:0;align-items:center}
.tour-sidepic .tour-side{margin-top:26px;padding-top:0}
.tour-sidepic .tour-row{max-width:560px;justify-self:end;width:100%}
.tour-keys{border:1px solid var(--line);border-radius:6px;background:var(--ink-2);padding:16px 18px;display:grid;gap:10px}
.tour-keys .eyebrow{margin-bottom:2px}
.tour-keys .k{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;font-size:14.5px;color:var(--mute)}
.tour-keys .k > .tour-menu{grid-column:1/-1}
.tour-note{font-size:13.5px;color:var(--dim)}
.tour-gos{display:flex;flex-direction:column;border-top:1px solid var(--line-2)}
.tour-go{display:flex;justify-content:space-between;gap:12px;padding:11px 2px;border-bottom:1px solid var(--line);font-size:15px;color:var(--fg)}
.tour-go span{color:var(--accent);font-family:var(--mono)}
.tour-go:hover{color:var(--accent)}
.tour-way .tour-gos{margin-top:auto}

/* pictures */
.tour-fig{position:relative;margin:0;border:1px solid var(--line-2);border-radius:8px;background:#eff1f5;min-width:0}
.tour-fig img{width:100%;height:auto;display:block;border-radius:7px 7px 0 0}
.tour-fig figcaption{font-family:var(--mono);font-size:11.5px;line-height:1.5;color:var(--mute);background:var(--ink-2);border-top:1px solid var(--line);padding:9px 12px;border-radius:0 0 7px 7px}
.tour-fig.dark{background:#000}
.tour-fig.dark img{padding:clamp(10px,2vw,26px);background:#05070a}
.tour-row{display:flex;gap:14px;align-items:stretch}
.tour-row > .tour-fig{flex:var(--ar) 1 0;display:flex;flex-direction:column}
.tour-row > .tour-fig figcaption{flex:1}
.tour-stackfig img + img{border-radius:0;border-top:1px solid #d6d9e0}
.tour-f1{align-items:center}
.tour-f1key{flex:none;display:flex;flex-direction:column;align-items:center;gap:8px}
.tour-f1key kbd{height:34px;min-width:44px;font-size:14px;background:var(--accent);color:var(--ink);border-color:var(--accent)}
.tour-f1key i{width:2px;height:28px;margin:0;background:linear-gradient(var(--accent),transparent)}
.tour-cap{margin-top:12px;font-family:var(--mono);font-size:11.5px;color:var(--mute)}
.tour-demos{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(18px,3vw,40px);align-items:start}
.tour-dside{display:flex;flex-direction:column;gap:14px;min-width:0}
.tour-dcards{display:grid;gap:10px}
.tour-dcard{display:grid;grid-template-columns:minmax(0,46%) 1fr;gap:16px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:6px;background:var(--ink-2);transition:border-color .2s}
.tour-dcard:hover{border-color:var(--accent)}
.tour-dcard .th{display:block;overflow:hidden;border-radius:4px;background:#000;aspect-ratio:16/9}
.tour-dcard img{width:100%;height:100%;object-fit:cover;transform:scale(1.045)}
.tour-dcard span{display:flex;flex-direction:column;gap:4px}
.tour-dcard small{font-family:var(--mono);font-size:11px;color:var(--dim)}
.tour-dcard b{font-family:var(--display);font-weight:600;font-size:clamp(18px,1.6vw,22px);letter-spacing:-.025em}

/* themes */
.tour-themes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.tour-theme{display:flex;flex-direction:column;gap:12px;min-width:0}
.tour-theme .sw{position:relative;aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:var(--base);border:1px solid var(--line-2);display:grid;grid-template-columns:24% 1fr;grid-template-rows:14% 1fr}
.tour-theme .bar{grid-column:1/-1;background:var(--crust)}
.tour-theme .side{background:var(--mantle)}
.tour-theme .main{position:relative;padding:12% 10% 10%;display:flex;flex-direction:column;gap:10%}
.tour-theme em{font-style:normal;font-family:var(--display);font-weight:600;font-size:clamp(22px,2.4vw,34px);letter-spacing:-.04em;color:var(--text);line-height:1}
.tour-theme .wires{display:grid;gap:7px}
.tour-theme .wires b{display:block;height:3px;border-radius:2px}
.tour-theme .dots{display:flex;gap:6px;margin-top:auto}
.tour-theme .dots i{width:12px;height:12px;border-radius:50%}
.tour-theme .nm{display:flex;flex-direction:column;gap:2px}
.tour-theme .nm b{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.025em}
.tour-theme .nm span{color:var(--mute);font-size:14px}

/* where next */
.tour-nexts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.tour-next{display:flex;flex-direction:column;gap:10px;padding:20px;border:1px solid var(--line);border-radius:6px;background:var(--ink-2);min-width:0;transition:border-color .2s}
.tour-next:hover{border-color:var(--c)}
.tour-next .w{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.tour-next .w i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.tour-next h3{font-size:22px;letter-spacing:-.03em;line-height:1.08}
.tour-next p{color:var(--mute);font-size:14.5px}
.tour-next .go{margin-top:auto;color:var(--c);font-family:var(--mono);font-size:12px}

@media (max-width:1240px){
  .tour-nexts{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1080px){
  .tour-hero > .wrap:first-of-type{grid-template-columns:1fr}
  .tour-chips{margin-top:58px}
  .tour-ways{grid-template-columns:1fr 1fr}
  .tour-split{grid-column:1/-1;grid-row:1;margin-bottom:34px}
  .tour-way.a,.tour-way.b{align-self:stretch}
  .tour-body{grid-template-columns:minmax(0,1fr);gap:0;padding-top:0}
  .tour-rail,.tour-rail ol{min-width:0}
  .tour-rail{top:calc(var(--barh) + var(--navh) + env(safe-area-inset-top,0px));z-index:20;padding:0;margin-inline:calc(-1 * var(--gut));background:#06080B;border-bottom:1px solid var(--line)}
  .tour-rail .eyebrow,.tour-prog{display:none}
  .tour-rail ol{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:10px var(--gut)}
  .tour-rail ol::-webkit-scrollbar{display:none}
  .tour-rail li{flex:none}
  .tour-rail a{padding:5px 11px 5px 5px;border:1px solid transparent;border-radius:3px;font-size:13.5px;gap:8px}
  .tour-rail a i{width:22px;height:22px;font-size:10px}
  .tour-rail a.on{border-color:var(--line-2)}
  .tour-stop{scroll-margin-top:calc(var(--barh) + var(--navh) + 64px)}
  .tour-top,.tour-sidepic{grid-template-columns:1fr}
  .tour-sidepic .tour-row{justify-self:start}
  .tour-demos{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .tour-themes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .tour-pin b{width:22px;height:22px;font-size:10.5px;box-shadow:0 0 0 3px rgba(48,185,254,.28)}
  .tour-pin span{display:none}
  .tour-ways,.tour-same,.tour-demos,.tour-nexts{grid-template-columns:1fr}
  .tour-split .lab.a{left:8px}.tour-split .lab.b{right:8px}
  .tour-same div,.tour-same div + div{padding:18px 0 16px;border-right:0;border-bottom:1px solid var(--line)}
  .tour-row{flex-direction:column}
  .tour-row > .tour-fig{flex:none;width:100%}
  .tour-sidepic .tour-row{flex-direction:row;justify-self:stretch}
  .tour-sidepic .tour-row > .tour-fig{flex:var(--ar) 1 0;width:auto}
  .tour-f1key{flex-direction:row;align-self:center}
  .tour-f1key i{width:28px;height:2px;background:linear-gradient(90deg,var(--accent),transparent)}
  .tour-demos > .tour-fig{width:min(100%,380px);justify-self:center}
  .tour-dcard{grid-template-columns:42% 1fr;gap:12px}
}
@media (prefers-reduced-motion:reduce){ .tour-pin b::after{display:none} }