html.intro-on,html.intro-on body{overflow:hidden;overscroll-behavior:none;height:100%}
html.intro-on .mast{visibility:hidden}
.stage{position:fixed;inset:0;z-index:60;--glass:rgb(20 23 26 / .78);--glass-edge:rgb(255 255 255 / .10);touch-action:none;color:#eceef0}
.stage[hidden]{display:none}
.stage-bg{position:absolute;inset:0;background:#0e1012;will-change:transform}
.intro-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.stage-title{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 var(--s4);pointer-events:none;padding-bottom:28vh}
.stage-title h1{font-size:var(--t44);font-weight:800;line-height:1.2;margin-bottom:var(--s2);color:#fff}
.stage-title .lede{font-size:var(--t16);color:#c9ced3}
.scroll-hint{margin-top:var(--s5);font-size:var(--t13);color:#8a939b;animation:hint 2.4s ease-in-out infinite}
@keyframes hint{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(6px);opacity:1}}

.hint-gesture{position:relative;display:block;width:18px;height:30px;margin-top:44px;border:1.5px solid #6f7880;border-radius:9px;opacity:.7}
.hint-gesture::after{content:"";position:absolute;left:50%;top:18px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#c9ced3;animation:swipe 2s ease-in-out infinite}
@keyframes swipe{0%{top:18px;opacity:0}20%{opacity:1}70%{top:5px;opacity:1}100%{top:5px;opacity:0}}
@media (prefers-reduced-motion:reduce){.scroll-hint,.hint-gesture::after{animation:none}}
.steps{position:absolute;left:0;right:0;bottom:calc(56px + env(safe-area-inset-bottom));padding:0 var(--s3);pointer-events:none}
.step-card{position:absolute;left:var(--s3);right:var(--s3);bottom:0;max-width:560px;background:var(--glass);border:1px solid var(--glass-edge);border-radius:var(--r-pane);padding:var(--s4);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transform:translateY(70vh);transition:opacity .9s,transform .9s cubic-bezier(.2,.7,.2,1)}
.step-card.on{opacity:1;transform:none}
.step-card.out{opacity:0;transform:translateY(-60vh)}
.stage-logo{position:absolute;inset:0;display:grid;place-items:center;background:#0e1012;opacity:0;pointer-events:none;transition:opacity .25s;z-index:3}
.stage-logo.on{opacity:1}
.stage-logo img{width:min(60vw,300px)}
@media (prefers-reduced-motion:reduce){.step-card{transition:none}}
.step-kick{font-size:var(--t13);font-weight:700;color:var(--accent);margin-bottom:var(--s1)}
.step-h{font-size:22px;font-weight:800;line-height:1.3;margin-bottom:var(--s2);color:#fff}
.step-n{font-size:var(--t20);font-weight:800;color:var(--accent);margin:calc(var(--s1) * -1) 0 var(--s2)}
.step-b{font-size:var(--t15);color:#c9ced3}
.step-src{font-size:var(--t13);color:#a2a9b0;margin-top:var(--s3)}
.step-src:empty{display:none}
@media (max-width:639px) and (max-height:650px){.step-card[data-i="6"]{padding:var(--s2)}.step-card[data-i="6"] .step-h{font-size:var(--t15);line-height:1.25;margin-bottom:var(--s1)}.step-card[data-i="6"] .step-n{font-size:var(--t15);margin:0 0 var(--s1)}.step-card[data-i="6"] .step-b{font-size:var(--t12);line-height:1.4}}
.stage-ctl{position:absolute;top:calc(var(--s3) + 28px + env(safe-area-inset-top));right:var(--s3);display:flex;gap:var(--s2);align-items:center;z-index:2}
.stage-nav{position:absolute;right:var(--s3);bottom:calc(var(--s3) + env(safe-area-inset-bottom));display:flex;gap:var(--s2);z-index:2}
.stage.off .stage-ctl,.stage.off .stage-nav,.stage.off .stage-dots,.stage.off .steps{opacity:0;pointer-events:none;transition:opacity .3s}
.stage .btn{background:rgb(14 16 18 / .6);color:#eceef0;border-color:#4a525a}
.stage .btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent-edge)}

.stage #intro-skip{min-height:calc(var(--tap) + 8px);min-width:var(--tap);padding:0 var(--s4);font-size:var(--t16);font-weight:650;background:#eceef0;color:#14161a;border-color:#eceef0}
.stage #intro-skip:hover{background:#fff;border-color:#fff}
.stage-ctl kbd{display:none;font:inherit;font-size:var(--t12);border:1px solid currentColor;padding:0 4px;border-radius:3px;margin-left:4px;opacity:.7}
.stage-dots{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:none;flex-direction:column;z-index:2}
@media (min-width:640px){.stage-dots{display:flex}}
.stage-dots button{width:var(--tap);height:28px;border:0;background:none;padding:0;display:grid;place-items:center;cursor:pointer}
.stage-dots button::before{content:'';width:6px;height:6px;border-radius:50%;background:#5a636b;transition:transform .2s,background .2s}
.stage-dots button[aria-selected=true]::before{background:#eceef0;transform:scale(1.4)}
.main-head{padding-top:var(--s6)}
.main-title{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.main-h{font-size:var(--t24);font-weight:800;line-height:1.2}
.main-lede{font-size:var(--t16);line-height:1.6;max-width:36em;text-wrap:pretty;margin:var(--s3) 0 0}
.map-sec{padding-top:var(--s5)}

.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:var(--s2)}
.cards>li:nth-child(n+5){display:none}
.card{--tc:var(--rule-2);display:flex;flex-direction:column;gap:var(--s1);height:100%;background:radial-gradient(120% 100% at 100% 100%,color-mix(in srgb,var(--tc) 26%,transparent),transparent 62%),color-mix(in srgb,var(--tc) 6%,var(--surface));padding:var(--s3);text-decoration:none;border:1px solid transparent;min-width:0;transition:border-color var(--motion)}
a.card:hover{border-color:var(--tc)}
a.card:hover .card-h{text-decoration:underline}
.cards .card{position:relative;padding-top:var(--s8)}
.card-status{position:absolute;top:var(--s2);right:var(--s2);padding:2px var(--s1);font-size:var(--t12);line-height:1.4;color:var(--sub);background:var(--surface-2);border:1px solid var(--rule-2);white-space:nowrap}
.card-h{font-size:var(--t15);font-weight:750;line-height:1.35}
.card-d{font-size:var(--t13);color:var(--sub);display:none}
.card-dots{display:block;width:100%;height:40px;margin-top:auto;padding-top:var(--s3);fill:var(--tc);fill-opacity:.9;box-sizing:content-box}
.card-n{font-size:var(--t12);color:var(--meta);font-variant-numeric:tabular-nums}
.card-blur{display:flex;flex-direction:column;gap:var(--s1);flex:1;filter:blur(4px);opacity:.75;user-select:none}
.card-bar{display:block;width:62%;height:1.2em;background:var(--ink);opacity:.35;border-radius:2px}
.card-bar.sm{width:48%;height:.8em;opacity:.2}

.card.soon{overflow:hidden;cursor:default;outline-offset:2px;transition:border-color var(--motion),transform 300ms var(--ease)}
.card.soon :is(.card-blur,.card-h,.card-dots,.card-n){transition:filter 400ms var(--ease),opacity 400ms var(--ease),transform 600ms var(--ease)}
.soon-msg{position:absolute;inset:0;display:grid;place-items:center;margin:0;font-size:var(--t15);font-weight:750;color:var(--ink);opacity:0;transform:translateY(8px);transition:opacity 300ms var(--ease),transform 300ms var(--ease);pointer-events:none}
.card.soon::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,color-mix(in srgb,var(--tc) 30%,transparent) 50%,transparent 65%);transform:translateX(-100%);pointer-events:none}
.card.soon:focus{outline:none}
.card.soon:focus-visible{outline:2px solid var(--tc)}
.card.soon:is(:focus,:focus-visible){border-color:var(--tc);transform:translateY(-2px)}
.card.soon:is(:focus,:focus-visible) :is(.card-blur,.card-h,.card-dots,.card-n){filter:blur(9px);opacity:.45;transform:translateX(6%) scale(1.06)}
.card.soon:is(:focus,:focus-visible) .soon-msg{opacity:1;transform:none}
.card.soon:is(:focus,:focus-visible)::after{transform:translateX(100%);transition:transform 700ms var(--ease)}
@media (hover:hover){
  .card.soon:hover{border-color:var(--tc);transform:translateY(-2px)}
  .card.soon:hover :is(.card-blur,.card-h,.card-dots,.card-n){filter:blur(9px);opacity:.45;transform:translateX(6%) scale(1.06)}
  .card.soon:hover .soon-msg{opacity:1;transform:none}
  .card.soon:hover::after{transform:translateX(100%);transition:transform 700ms var(--ease)}
}
.examples{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--s2);margin:var(--s2) calc(var(--pad) * -1) 0;padding:0 var(--pad);overflow-x:auto;scrollbar-width:none;font-size:var(--t13);color:var(--meta);white-space:nowrap}
.examples::-webkit-scrollbar{display:none}
.results{margin-top:var(--s2)}
.results:empty{margin:0}
.results li a{display:grid;grid-template-columns:auto 1fr;gap:2px var(--s3);padding:var(--s3) 0;border-top:1px solid var(--rule);text-decoration:none;min-height:var(--tap)}
.results li a:hover b{text-decoration:underline}
.results .tag{grid-row:1/3;align-self:start;margin-top:2px}
.results b{font-size:var(--t15)}
.results span.cap{grid-column:2}
.results li.cap{padding-top:var(--s2)}

.map-wrap{background:var(--surface);border-radius:var(--r-pane);padding:var(--s2) var(--s3) var(--s3);position:relative;margin-inline:calc(var(--gutter) * -1)}
.map-wrap svg{display:block;width:100%;height:auto;touch-action:pan-y}
.map-cols{position:sticky;top:calc(var(--mast) + env(safe-area-inset-top));z-index:2;display:grid;grid-template-columns:var(--yl,34px) repeat(5,minmax(0,1fr));background:var(--surface);border-bottom:1px solid var(--rule-2);margin:0 calc(var(--s3) * -1);padding:0 var(--s3)}
.map-cols a{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:var(--tap);padding:var(--s1) 0;font-size:var(--t12);font-weight:700;line-height:1.2;text-align:center;text-decoration:none;color:var(--ink)}
.map-cols a span{font-weight:500;color:var(--meta);font-variant-numeric:tabular-nums}
.map-wrap .lane-hit{cursor:pointer}
.map-wrap .lane-name{font-size:13px;font-weight:700;fill:var(--ink)}
.map-wrap .lane-n{font-size:12px;fill:var(--meta)}
.map-wrap .rec{fill:var(--c,var(--ink));fill-opacity:.85}
.map-wrap .rec.on{fill:var(--accent);fill-opacity:1;stroke:var(--ink);stroke-width:1.5}
.map-wrap .lane-bg{fill:transparent}
.map-wrap .lane-line{stroke:var(--rule)}
.map-wrap .lane-hit:hover .lane-bg,.map-wrap .lane-hit:focus .lane-bg{fill:var(--surface-2)}
.map-wrap .lane-hit:focus{outline:none}
.map-wrap .lane-hit:focus-visible .lane-bg{stroke:var(--accent);stroke-width:2}
.map-wrap .yr-band{fill:var(--accent-soft)}
.map-wrap .yr-tick{stroke:var(--rule)}
.map-wrap .col-line{stroke:var(--rule)}
.map-read{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s1) var(--s3);min-height:28px;font-size:var(--t13);color:var(--sub);padding:var(--s2) 2px 0}
.map-read b{color:var(--ink)}
.map-hint{font-size:var(--t13);color:var(--meta);margin-bottom:var(--s2)}

dialog.yr-dlg .dlg-head{flex-direction:row;align-items:center;justify-content:space-between}
dialog.yr-dlg .lane-group+.lane-group{margin-top:var(--s4)}
dialog.yr-dlg h3{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--t15);padding-bottom:var(--s1);border-bottom:1px solid var(--rule-strong)}
dialog.yr-dlg h3 a{font-size:var(--t13);font-weight:600}
dialog.yr-dlg li a{display:flex;align-items:center;min-height:var(--tap);padding:var(--s1) 0;border-bottom:1px solid var(--rule);font-size:var(--t14);text-decoration:none}
dialog.yr-dlg li a:hover{text-decoration:underline}
dialog.yr-dlg li.cap{padding-top:var(--s2)}
@media (max-width:599px){
  dialog.yr-dlg{margin:auto 0 0;width:100vw;max-width:none;max-height:78dvh;border-radius:12px 12px 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom)}
  @media (prefers-reduced-motion:no-preference){dialog.yr-dlg[open]{animation:rise var(--motion) var(--ease)}}
}
@keyframes rise{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}

@media (min-width:600px){
  .stage-ctl kbd{display:inline}
  .step-card{left:max(var(--s5),calc((100% - var(--width))/2));padding:var(--s5) var(--s6);max-width:600px}
  .step-h{font-size:clamp(22px,2.6vw,30px)}
  .step-b{font-size:var(--t16)}
  .map-wrap{margin-inline:0}
  .examples{flex-wrap:wrap;overflow:visible;margin-inline:0;padding:0}
  .cards{gap:var(--s3)}
  .card{padding:var(--s4)}
  .card-h{font-size:var(--t18)}
  .card-d{display:block;font-size:var(--t14)}
  .main-lede{font-size:var(--t18)}
  .map-wrap{padding:var(--s3) var(--s4) var(--s2)}
}
@media (min-width:1024px){
  .stage-title h1{font-size:44px}
  .stage-title .lede{font-size:var(--t18)}
  .cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}
  .cards>li:nth-child(n+5){display:revert}
}