.page-hero{position:relative;overflow:clip;background:var(--tint,var(--accent-soft));background:linear-gradient(180deg,color-mix(in srgb,var(--tint,var(--accent-soft)) 55%,#ffffff),var(--tint,var(--accent-soft)));border-radius:0 0 var(--r-xl) var(--r-xl);padding-block:18px 40px}
.page-hero .wrap{display:grid;grid-template-columns:1fr;gap:8px 32px;align-items:center}
.page-hero__text{position:relative;z-index:1}
.crumbs{display:flex;flex-wrap:wrap;gap:4px 8px;margin:0 0 14px;padding:0;list-style:none;font-size:var(--step--1);color:var(--muted)}
.crumbs li + li::before{content:"/";margin-right:8px;color:rgb(100 116 139 / .6)}
.crumbs a{color:var(--muted);font-weight:650;text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.page-hero h1{font-size:var(--step-4);margin-bottom:14px}
.page-hero .summary{font-size:var(--step-1);line-height:1.5;color:#334155;max-width:36rem;margin-bottom:12px}
.page-hero .also{font-size:var(--step--1);color:var(--muted);margin:0}
.page-hero .emblem{justify-self:end;order:-1;width:min(34vw,150px)}
@media (min-width:760px){.page-hero{padding-block:24px 56px}
.page-hero .wrap{grid-template-columns:1fr 240px}
.page-hero .emblem{order:0;width:240px}
}
.toc-wrap{position:relative}
.toc{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:18px var(--gutter) 6px;margin:0;list-style:none;max-width:var(--wide);margin-inline:auto}
.toc::-webkit-scrollbar{display:none}
.toc li{flex:none}
.toc a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 12px;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink);font-size:.95rem;font-weight:700;text-decoration:none;white-space:nowrap}
.toc a .icon{width:20px;height:20px;color:var(--deep,var(--accent-deep))}
.toc a:hover{background:color-mix(in srgb,var(--tint,var(--accent-soft)) 60%,#FFFFFF)}
.article{padding-top:8px}
.article .measure{margin-inline:auto}
.article section{margin-block:48px;scroll-margin-top:24px}
.section-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.section-head .badge{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;background:var(--tint,var(--accent-soft));color:var(--deep,var(--accent-deep));flex:none}
.article h2{font-size:var(--step-2);margin:0}
.article h3{font-size:var(--step-1);margin:1.7em 0 .5em;color:#334155}
.article ul,.article ol{padding-left:1.3em;margin:0 0 1em}
.article li{margin-bottom:.55em;padding-left:.2em}
.article li::marker{color:var(--deep,var(--accent))}
.talk{background:var(--accent-soft);border-radius:var(--r-l);padding:24px 22px 14px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent-deep) 16%,transparent)}
.talk .section-head .badge{background:var(--surface)}
.talk ul{list-style:none;padding:0}
.talk li{position:relative;padding-left:30px;margin-bottom:.8em;font-weight:560}
.talk li::before{content:"";position:absolute;left:4px;top:.62em;width:12px;height:12px;border-radius:50% 50% 50% 2px;background:var(--accent);opacity:.7}
.routing{margin-block:40px 0;padding:22px;border-radius:var(--r-m);background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line)}
.routing p{margin:0}
.routing p + p{margin-top:.6em;color:var(--muted);font-size:var(--step--1)}
.more{margin-top:64px}
.more h2{font-size:var(--step-2)}
.more-grid{list-style:none;padding:0;margin:0 0 18px;border-top:1.5px solid var(--line)}
.more-grid>li{border-bottom:1.5px solid var(--line)}
.more-grid .card--row{--deep:var(--accent-deep)}
.pager{display:grid;gap:12px;grid-template-columns:1fr;margin-top:18px}
@media (min-width:640px){.pager{grid-template-columns:1fr 1fr}
}
.pager a{display:flex;flex-direction:column;gap:2px;padding:16px 20px;border-radius:var(--r-m);background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line);text-decoration:none;color:var(--ink);min-height:44px}
.pager a:hover{background:var(--paper);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent-deep) 35%,var(--line))}
.pager a span{font-size:var(--step--1);color:var(--muted);font-weight:650}
.pager a strong{font-weight:760}
.pager .next{text-align:right}
.guide-steps{list-style:none;padding:0;margin:0;counter-reset:step}
.guide-steps>li{position:relative;padding:0 0 8px 62px;counter-increment:step}
.guide-steps>li::before{content:counter(step);position:absolute;left:0;top:0;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-deep);font-weight:800}
.guide-steps>li::after{content:"";position:absolute;left:21px;top:50px;bottom:6px;width:2px;background:var(--line);border-radius:2px}
.guide-steps>li:last-child::after{display:none}
.review-panel{margin-top:64px;padding:24px 20px;border-radius:var(--r-l);background:#FBF1DC;box-shadow:inset 0 0 0 1px #E8CF9C}
.review-panel h2{font-size:var(--step-2);margin-bottom:8px}
.review-panel>p{color:var(--honey-ink)}
.review-list{list-style:none;margin:0;padding:0}
.review-item{padding:14px 12px;border-top:1.5px solid #EED9A8;border-radius:10px;scroll-margin-top:24px;font-size:.98rem}
.review-item:target{background:var(--honey)}
.review-item .meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:6px}
.review-item q{quotes:"\201C" "\201D";display:block;margin-bottom:6px}
.review-item .srcs,.review-item .why{margin:0;font-size:.92rem;color:#5A4A30}
.pill{display:inline-block;padding:1px 9px;border-radius:999px;font-size:.78rem;font-weight:800;background:var(--honey);color:var(--honey-ink);line-height:1.7}
.pill--id{background:#fff8e8;box-shadow:inset 0 0 0 1px #E6CC93;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700}
.pill--flag{background:#F3DDD0;color:#7A3E24}
.pill--ok{background:var(--accent-soft);color:var(--accent-deep)}
.review-item a.back{font-size:.85rem;font-weight:700}
.review-sources{margin-top:28px}
.review-sources li{margin-bottom:.8em;font-size:.95rem}
@media (prefers-reduced-motion:no-preference){.page-hero__text>*{animation:nonop-rise var(--t-enter) var(--ease-out) both}
.page-hero__text>:nth-child(2){animation-delay:60ms}
.page-hero__text>:nth-child(3){animation-delay:120ms}
.page-hero__text>:nth-child(4){animation-delay:180ms}
.page-hero .emblem{animation:nonop-fade var(--t-enter) var(--ease-out) 120ms both}
.toc li{animation:nonop-rise 700ms var(--ease-out) both;animation-delay:calc(200ms + var(--i,0) * 45ms)}
@supports (animation-timeline:view()){.article section{animation:nonop-soft-in linear both;animation-timeline:view();animation-range:entry 0% entry 38%}
}
}
@keyframes nonop-rise{from{opacity:0;transform:translateY(14px)}
}
@keyframes nonop-fade{from{opacity:0;transform:scale(.96)}
}
@keyframes nonop-soft-in{from{opacity:.35;transform:translateY(18px)}
}