@font-face{font-family:'Commissioner Variable';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/commissioner-latin-wght-normal-e3d539b9.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inconsolata Variable';font-style:normal;font-weight:200 900;font-display:swap;src:url(/fonts/inconsolata-latin-wght-normal-4914e68b.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ink:#13171C; --ink2:#38414C; --mute:#5B6570; --faint:#66707B;
  --paper:#FFFFFF; --ground:#F2F0EB; --band:#EAE7E0; --panel:#F8F7F3;
  --rule:#DEDAD1; --rule-strong:#13171C;
  --accent:#0E8F84; --accent-deep:#0A6B61; --wash:#E2F3F0;
  --amber:#E39A2D; --amber-deep:#95580B; --amber-wash:#FBEEDA; --coral:#D8553C; --cblue:#3A69B8;
  --code:#12171D; --code2:#1A2129; --code-ink:#DDE6EE; --code-key:#7FD6C9; --code-str:#F2C97D; --code-mute:#8391A0;
  --side:15.5rem;
  --sans:"Commissioner Variable","Commissioner","Helvetica Neue",Arial,sans-serif;
  --mono:"Inconsolata Variable","Inconsolata",ui-monospace,Menlo,monospace;
  --serif:var(--sans);
  --frame:70rem; --pad:2.4rem; --measure:44rem;
  --banner:url(/decor/banner-home-55591fad.webp); --block:var(--amber);
}

body:has(.crumbs a[href="/toolkit/"]),body:has(.mh-nav a[aria-current][href="/toolkit/"]){--banner:url(/decor/banner-toolkit-8a643d37.webp);--block:var(--accent)}
body:has(.crumbs a[href="/hooks/"]),body:has(.mh-nav a[aria-current][href="/hooks/"]){--banner:url(/decor/banner-hooks-f28475c2.webp);--block:var(--amber)}
body:has(.crumbs a[href="/toolkit-pairs/"]),body:has(.mh-nav a[aria-current][href="/toolkit-pairs/"]){--banner:url(/decor/banner-toolkit-pairs-3eb89919.webp);--block:var(--coral)}
body:has(.crumbs a[href="/pipeline-questions/"]),body:has(.mh-nav a[aria-current][href="/pipeline-questions/"]){--banner:url(/decor/banner-pipeline-questions-f2a55e6e.webp);--block:var(--cblue)}
body:has(.crumbs a[href="/pipeline-terms/"]),body:has(.mh-nav a[aria-current][href="/pipeline-terms/"]){--banner:url(/decor/banner-pipeline-terms-5ac46c89.webp);--block:var(--amber)}
body:has(.crumbs a[href="/pipeline-notes/"]),body:has(.mh-nav a[aria-current][href="/pipeline-notes/"]){--banner:url(/decor/banner-pipeline-notes-803d0c6f.webp);--block:var(--accent)}
body:has(.crumbs a[href="/how-hooks-are-read/"]),body:has(.mh-nav a[aria-current][href="/how-hooks-are-read/"]){--banner:url(/decor/banner-method-448af6d6.webp);--block:var(--coral)}
body:has(.crumbs a[href="/datasets/"]),body:has(.mh-nav a[aria-current][href="/datasets/"]){--banner:url(/decor/banner-datasets-1901727c.webp);--block:var(--cblue)}

:root:has(link[rel="canonical"][href*="/toolkit/"]:is([href$="d/"],[href$="n/"],[href$="o/"],[href$="r/"],[href$="u/"],[href$="v/"],[href$="z/"],[href$="0/"],[href$="1/"],[href$="2/"],[href$="3/"])){--banner-v:url(/decor/banner-toolkit-b-4b124c63.webp);--bpos:50% 40%}
:root:has(link[rel="canonical"][href*="/toolkit/"]:is([href$="e/"],[href$="x/"],[href$="g/"],[href$="s/"],[href$="k/"],[href$="i/"],[href$="f/"],[href$="p/"],[href$="m/"],[href$="w/"],[href$="b/"],[href$="4/"],[href$="5/"],[href$="6/"],[href$="7/"],[href$="8/"],[href$="9/"])){--banner-v:url(/decor/banner-toolkit-c-9d491e40.webp);--bpos:50% 55%}
:root:has(link[rel="canonical"][href*="/hooks/"]:is([href$="d/"],[href$="n/"],[href$="o/"],[href$="r/"],[href$="u/"],[href$="v/"],[href$="z/"],[href$="0/"],[href$="1/"],[href$="2/"],[href$="3/"])){--banner-v:url(/decor/banner-hooks-b-03d0a25e.webp);--bpos:50% 45%}
:root:has(link[rel="canonical"][href*="/hooks/"]:is([href$="e/"],[href$="x/"],[href$="g/"],[href$="s/"],[href$="k/"],[href$="i/"],[href$="f/"],[href$="p/"],[href$="m/"],[href$="w/"],[href$="b/"],[href$="4/"],[href$="5/"],[href$="6/"],[href$="7/"],[href$="8/"],[href$="9/"])){--banner-v:url(/decor/banner-hooks-c-a05f7a2b.webp);--bpos:50% 50%}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:1.5rem}
body{margin:0;overflow-x:clip;color:var(--ink);font:400 16.5px/1.7 var(--sans);font-variant-numeric:tabular-nums;background-color:var(--ground);
  background-image:radial-gradient(circle,rgba(19,23,28,.13) 1.1px,transparent 1.6px);background-size:22px 22px;background-position:11px 11px}
a{color:inherit;text-decoration:none}
p a,li a,td a,dd a{color:var(--accent-deep);text-decoration:underline;text-decoration-color:rgba(14,143,132,.4);text-decoration-thickness:1.5px;text-underline-offset:3px}
p a:hover,li a:hover,td a:hover,dd a:hover{text-decoration-color:var(--accent);color:var(--ink)}
::selection{background:var(--amber);color:var(--ink)}
code,.asof,.stamp,caption,thead th,.tag,.meta,.crumbs,.eyebrow{font-family:var(--mono)}

.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:#fff;padding:.5rem .8rem;z-index:50}
.skip:focus{left:.5rem}

.masthead{position:fixed;top:0;left:0;bottom:0;width:var(--side);z-index:20;overflow-y:auto;color:var(--code-ink);
  background:linear-gradient(90deg,transparent calc(100% - 14px),rgba(0,0,0,.35) calc(100% - 14px) calc(100% - 13px),#0C1014 calc(100% - 13px)),
    radial-gradient(circle at 50% 50%,#050709 0 2.4px,#2A333D 2.8px 3.6px,transparent 4px) calc(100% - 7px) 18px/10px 36px repeat-y,
    linear-gradient(180deg,#171D24,#101419)}
.mh{display:flex;flex-direction:column;align-items:stretch;gap:1.1rem;padding:1.4rem 1.9rem 2rem 1.2rem}
.brand{display:flex;align-items:center;gap:.6rem;font:750 1.12rem/1 var(--sans);letter-spacing:-.02em;color:#FFFFFF}
.mark{display:inline-flex;width:2rem;height:2rem;border-radius:.5rem;background:var(--amber);color:var(--code);align-items:center;justify-content:center;box-shadow:0 0 0 3px rgba(227,154,45,.18)}
.mark svg{width:1.3rem;height:1.3rem}
.mh-tag{margin:0;font:400 .8rem/1.5 var(--sans);color:#9AA7B4}
.mh-nav{display:flex;flex-direction:column;gap:.15rem;font:500 .92rem/1.2 var(--sans);border-top:1px solid #26303A;padding-top:1rem}
.mh-nav a{position:relative;display:flex;align-items:center;gap:.7rem;padding:.5rem .6rem;border-radius:7px;color:#C6D0DA;transition:background .2s,color .2s}
.mh-nav a::before{content:"";flex:none;width:.8rem;height:.8rem;border-radius:50%;background:radial-gradient(circle,#05070A 0 32%,#3A4652 38% 62%,#20272F 68%);box-shadow:0 0 0 1px #0B0E12;transition:background .2s,box-shadow .2s}
.mh-nav a:hover{background:#1E262F;color:#FFFFFF}
.mh-nav a:hover::before{background:radial-gradient(circle,var(--amber) 0 30%,#3A4652 36% 62%,#20272F 68%)}
.mh-nav a[aria-current=page],body:has(.crumbs a[href="/toolkit/"]) .mh-nav a[href="/toolkit/"],body:has(.crumbs a[href="/hooks/"]) .mh-nav a[href="/hooks/"],body:has(.crumbs a[href="/toolkit-pairs/"]) .mh-nav a[href="/toolkit-pairs/"],body:has(.crumbs a[href="/pipeline-questions/"]) .mh-nav a[href="/pipeline-questions/"],body:has(.crumbs a[href="/pipeline-terms/"]) .mh-nav a[href="/pipeline-terms/"],body:has(.crumbs a[href="/pipeline-notes/"]) .mh-nav a[href="/pipeline-notes/"],body:has(.crumbs a[href="/how-hooks-are-read/"]) .mh-nav a[href="/how-hooks-are-read/"],body:has(.crumbs a[href="/datasets/"]) .mh-nav a[href="/datasets/"]{background:#212A33;color:#FFFFFF;font-weight:600}
.mh-nav a[aria-current=page]::before,body:has(.crumbs a[href="/toolkit/"]) .mh-nav a[href="/toolkit/"]::before,body:has(.crumbs a[href="/hooks/"]) .mh-nav a[href="/hooks/"]::before,body:has(.crumbs a[href="/toolkit-pairs/"]) .mh-nav a[href="/toolkit-pairs/"]::before,body:has(.crumbs a[href="/pipeline-questions/"]) .mh-nav a[href="/pipeline-questions/"]::before,body:has(.crumbs a[href="/pipeline-terms/"]) .mh-nav a[href="/pipeline-terms/"]::before,body:has(.crumbs a[href="/pipeline-notes/"]) .mh-nav a[href="/pipeline-notes/"]::before,body:has(.crumbs a[href="/how-hooks-are-read/"]) .mh-nav a[href="/how-hooks-are-read/"]::before,body:has(.crumbs a[href="/datasets/"]) .mh-nav a[href="/datasets/"]::before{background:radial-gradient(circle,#FFE7B8 0 22%,var(--amber) 28% 60%,#8A5A12 66%);box-shadow:0 0 0 1px #0B0E12,0 0 10px 2px rgba(227,154,45,.55)}

.masthead::after{content:"";position:absolute;left:1.2rem;width:198px;bottom:1.2rem;height:min(30vh,14.9rem);pointer-events:none;
  background:radial-gradient(circle,#FFE0A3 0 1.4px,var(--amber) 2px 3.4px,transparent 3.9px) 11px 0/88px 66px,radial-gradient(circle,#BFF3EA 0 1.4px,var(--accent) 2px 3.4px,transparent 3.9px) 22px 11px/110px 88px,
    radial-gradient(circle,#05070A 0 3.1px,#333D48 3.7px 5.1px,transparent 5.7px) 0 0/22px 22px;background-origin:content-box;
  -webkit-mask-image:linear-gradient(0deg,#000 35%,transparent);mask-image:linear-gradient(0deg,#000 35%,transparent)}
@media (max-height:40rem){.masthead::after{display:none}}

.sheet{margin-left:var(--side);max-width:calc(var(--frame) + 2 * var(--pad));padding:2.2rem var(--pad) 4.4rem;display:grid;grid-template-columns:minmax(0,1fr) 12.5rem;gap:3rem;
  background:repeating-linear-gradient(180deg,transparent 0 17rem,#2A323B 17rem 17.55rem,#13171C 17.55rem 17.9rem,transparent 17.9rem) right calc(var(--pad) + 5.35rem) top 22rem/1.9rem calc(100% - 26rem) no-repeat,
    linear-gradient(90deg,var(--accent) 0 4px,transparent 4px 7px,var(--amber) 7px 11px,transparent 11px 14px,var(--cblue) 14px 18px) right calc(var(--pad) + 5.3rem) top 6rem/18px 100% no-repeat}
.sheet:has(.hero){background:none}
.column{min-width:0;order:1}

.rail{order:2;position:sticky;top:1.6rem;align-self:start;margin-top:.4rem;padding:1.35rem 1.05rem 1.1rem;font:400 .84rem/1.5 var(--sans);color:#C6D0DA;border-radius:10px;
  background:radial-gradient(circle,#4A5561 0 2.2px,#252D36 2.6px 3.4px,transparent 3.8px) 8px 8px/10px 10px no-repeat,radial-gradient(circle,#4A5561 0 2.2px,#252D36 2.6px 3.4px,transparent 3.8px) right 8px top 8px/10px 10px no-repeat,
    radial-gradient(circle,#4A5561 0 2.2px,#252D36 2.6px 3.4px,transparent 3.8px) left 8px bottom 8px/10px 10px no-repeat,radial-gradient(circle,#4A5561 0 2.2px,#252D36 2.6px 3.4px,transparent 3.8px) right 8px bottom 8px/10px 10px no-repeat,
    linear-gradient(180deg,#1A2128,#11161B);
  box-shadow:0 0 0 1px #0B0E12,0 22px 36px -24px rgba(13,17,22,.75),inset 0 1px 0 rgba(255,255,255,.06);animation:rise .8s .45s cubic-bezier(.2,.7,.2,1) both}
.rail::before{content:"";display:block;height:4px;margin:-.55rem 0 .8rem;border-radius:2px;background:linear-gradient(90deg,var(--accent) 0 25%,var(--amber) 0 50%,var(--coral) 0 75%,var(--cblue) 0)}
.rl{display:grid;grid-template-columns:minmax(0,1fr);gap:.05rem;padding:.45rem 0;border-bottom:1px dashed #2C3640}
.rl span{font:600 .64rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#8391A0}
.rl b{font:600 .9rem/1.35 var(--mono);color:var(--code-str)}
.rl-figs{display:flex;flex-wrap:wrap;gap:.3rem;padding-top:.15rem}
.rl-figs a{display:inline-flex;align-items:center;justify-content:center;min-width:1.6rem;height:1.4rem;padding:0 .35rem;border-radius:4px;background:#26303A;color:var(--code-key);font:700 .72rem/1 var(--mono);text-decoration:none;box-shadow:inset 0 -2px 0 var(--block)}
.rl-figs a:hover{background:var(--block);color:var(--code)}
.secnav{margin-top:1rem}
.rl-h{display:block;font:700 .68rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--amber);margin:0 0 .7rem}
.secnav ol{list-style:none;margin:0;padding:0 0 0 1rem;position:relative}
.secnav ol::before{content:"";position:absolute;left:.28rem;top:.55rem;bottom:.55rem;width:3px;border-radius:3px;background:var(--block);opacity:.9}
.secnav li{margin:0;position:relative}
.secnav a{display:block;padding:.3rem 0 .3rem .55rem;color:#C6D0DA;transition:color .2s,transform .2s}
.secnav a::before{content:"";position:absolute;left:-.95rem;top:.72rem;width:.62rem;height:.62rem;border-radius:50%;background:radial-gradient(circle,#05070A 0 30%,#3A4652 38%);border:2px solid #0B0E12;box-shadow:0 0 0 1px #3A4652}
.secnav a:hover::before{background:radial-gradient(circle,#FFE7B8 0 22%,var(--amber) 30%)}
.secnav a i{display:none}
.secnav a:hover{color:#FFFFFF;transform:translateX(3px)}
.rail::after{content:"";display:block;height:44px;margin:1rem -.15rem 0;border-radius:6px;background:
    radial-gradient(circle,#BFF3EA 0 1.4px,var(--accent) 2px 3.6px,transparent 4.1px) 117px 10px/24px 24px no-repeat,
    radial-gradient(circle,#FFE0A3 0 1.4px,var(--amber) 2px 3.6px,transparent 4.1px) 51px 10px/24px 24px no-repeat,
    radial-gradient(circle,#05070A 0 3.2px,#333D48 3.8px 5.2px,transparent 5.8px) 8px 10px/22px 24px repeat-x,
    #0D1115;box-shadow:inset 0 0 0 1px #242C35}

.crumbs{font-size:.8rem;color:var(--mute);margin:0 0 1.3rem;letter-spacing:.02em}
.crumbs a{color:var(--ink2);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px}
.crumbs a:hover{color:var(--accent-deep)}

main#doc>*{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
main#doc>:nth-child(1){animation-delay:.2s} main#doc>:nth-child(2){animation-delay:.28s} main#doc>:nth-child(3){animation-delay:.36s}
main#doc>:nth-child(n+4){animation-delay:.44s}
main#doc>p,main#doc>ul:not(.hookgrid):not(.toolgrid):not(.entries):not(.facts),main#doc>ol,main#doc>blockquote,main#doc>.clause{max-width:var(--measure)}

main#doc:not(:has(.hero))::before{content:"";float:left;width:clamp(10.5rem,18vw,14.5rem);aspect-ratio:4/5;margin:.45rem 2.8rem 1.8rem 0;
  background:var(--banner-v,var(--banner)) var(--bpos,center)/cover no-repeat,var(--code);border-radius:3px;box-shadow:16px 16px 0 0 var(--block),0 0 0 1px rgba(19,23,28,.12);
  animation:frame .9s cubic-bezier(.2,.8,.2,1) both}
main#doc>h1,main#doc>.answer{display:flow-root}
main#doc>.answer+*{clear:left}

h1{font:800 clamp(2rem,3.4vw,2.9rem)/1.14 var(--sans);letter-spacing:-.018em;margin:0 0 1.1rem;max-width:26ch;text-wrap:balance}
h2{display:flex;align-items:center;gap:.75rem;font:700 1.42rem/1.25 var(--sans);letter-spacing:-.02em;margin:3.1rem 0 1rem;padding-top:1.5rem;clear:both;
  background:linear-gradient(90deg,var(--ink) 0 2.2rem,var(--rule) 2.2rem) top/100% 2px no-repeat}
h2 .secno{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:1.6rem;padding:0 .45rem;border-radius:5px;background:var(--code);color:var(--code-str);
  font:700 .78rem/1 var(--mono);text-decoration:none;box-shadow:inset 0 -3px 0 var(--block)}
h2 a.secno:hover{background:var(--block);color:var(--code)}
h3{font:700 1.06rem/1.4 var(--sans);margin:1.9rem 0 .55rem}
p{margin:0 0 1rem}
ul,ol{margin:0 0 1.1rem;padding-left:1.25rem}
li{margin:.3rem 0}
main#doc>ul:not([class]){list-style:none;padding-left:0}
main#doc>ul:not([class])>li{position:relative;padding-left:2rem}
main#doc>ul:not([class])>li::before{content:"";position:absolute;left:0;top:.72em;width:.95rem;height:3px;border-radius:3px;background:var(--block)}
main#doc>ul:not([class])>li::after{content:"";position:absolute;left:.72rem;top:calc(.72em - 3px);width:9px;height:9px;border-radius:50%;background:var(--paper);border:2px solid var(--ink)}
code{font-size:.9em;background:var(--band);border-radius:4px;padding:.08rem .32rem}

.answer{margin:0 0 1.7rem;padding:1.05rem 1.25rem 1.05rem 1.3rem;max-width:var(--measure);background:var(--paper);border:1px solid var(--rule);border-left:5px solid var(--block);
  border-radius:4px 10px 10px 4px;font:400 1.06rem/1.66 var(--sans);color:var(--ink);box-shadow:0 14px 26px -22px rgba(19,23,28,.4)}
.asof{display:inline-block;margin-left:.4rem;padding:.02rem .45rem;border-radius:4px;background:var(--band);font-size:.74rem;color:var(--mute)}

.sheet:has(.hero){grid-template-columns:minmax(0,1fr)}
.sheet:has(.hero) .rail{display:none}
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(19rem,.95fr);gap:3.2rem;align-items:center;padding:.6rem 0 1.4rem}
.hero .answer{background:none;border:0;border-left:5px solid var(--amber);border-radius:0;box-shadow:none;padding:.1rem 0 .1rem 1.1rem;font-size:1.1rem;color:var(--ink2)}
.hero h1{font-size:clamp(2.4rem,4.2vw,3.5rem);max-width:none;letter-spacing:-.022em}
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;font:600 .8rem/1.3 var(--mono);color:var(--amber-deep);margin:0 0 .9rem;letter-spacing:.04em}
.eyebrow::before{content:"";width:.7rem;height:.7rem;border-radius:50%;background:var(--amber);box-shadow:0 0 0 3px var(--amber-wash)}
.hero-art{position:relative;padding:0 1.2rem 0 0;min-height:34rem;display:flex;align-items:flex-end}
.hero-art::before{content:"";position:absolute;top:0;right:1.2rem;width:80%;aspect-ratio:4/5;max-height:calc(100% - 1.2rem);background:var(--banner) center/cover no-repeat,var(--code);border-radius:4px;
  box-shadow:18px 18px 0 0 var(--amber),0 0 0 1px rgba(19,23,28,.15);animation:frame 1s cubic-bezier(.2,.8,.2,1) both}
.cta{display:flex;flex-wrap:wrap;gap:.6rem;margin:.3rem 0 0}
.btn{display:inline-block;padding:.78rem 1.15rem;border-radius:8px;background:var(--ink);color:#fff !important;font:650 .92rem/1 var(--sans);text-decoration:none !important;box-shadow:4px 4px 0 var(--amber);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--amber)}
.btn.ghost{background:var(--paper);color:var(--ink) !important;box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink),4px 4px 0 var(--accent)}
.codewin{position:relative;z-index:1;width:64%;margin:0 0 -1.4rem -1.6rem;background:var(--code);border-radius:12px;box-shadow:0 24px 50px -18px rgba(13,17,22,.6);overflow:hidden;
  animation:rise .8s .35s cubic-bezier(.2,.7,.2,1) both}
.cw-bar{display:flex;align-items:center;gap:.4rem;padding:.6rem .8rem;background:var(--code2);border-bottom:1px solid #26303A}
.cw-bar i{width:.62rem;height:.62rem;border-radius:50%;background:#2E3946}
.cw-bar i:first-child{background:var(--coral)} .cw-bar i:nth-child(2){background:var(--amber)} .cw-bar i:nth-child(3){background:var(--accent)}
.cw-bar span{margin-left:.5rem;font:500 .76rem/1 var(--mono);color:var(--code-mute)}
.codewin pre{margin:0;padding:.85rem 1rem 1rem;font:500 .74rem/1.62 var(--mono);color:var(--code-ink);white-space:pre;overflow-x:auto}
.codewin .k{color:var(--code-key)}
.codewin .v{color:var(--code-str)}
.codewin .n{color:var(--code-mute)}

ul.hookgrid,ul.toolgrid{list-style:none;padding:0;margin:1.3rem 0 1.2rem;display:grid;gap:.8rem}
ul.hookgrid{grid-template-columns:repeat(auto-fill,minmax(14.5rem,1fr))}
ul.toolgrid{grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr))}
ul.hookgrid li,ul.toolgrid li{margin:0}
ul.hookgrid a,ul.toolgrid a{position:relative;display:flex;flex-direction:column;gap:.25rem;height:100%;padding:1rem 1.05rem 1.05rem;background:var(--paper);border:1px solid var(--rule);border-radius:10px;
  text-decoration:none;overflow:hidden;transition:transform .18s,box-shadow .18s,border-color .18s}
ul.hookgrid a::before,ul.toolgrid a::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:var(--cable,var(--accent))}
ul.hookgrid li:nth-child(4n+2),ul.toolgrid li:nth-child(4n+2){--cable:var(--amber)}
ul.hookgrid li:nth-child(4n+3),ul.toolgrid li:nth-child(4n+3){--cable:var(--coral)}
ul.hookgrid li:nth-child(4n),ul.toolgrid li:nth-child(4n){--cable:var(--cblue)}
ul.hookgrid a:hover,ul.toolgrid a:hover{transform:translateY(-3px);border-color:var(--ink);box-shadow:5px 5px 0 var(--cable,var(--accent))}
.hookgrid code{align-self:flex-start;background:var(--code);color:var(--code-key);font-weight:600;margin-bottom:.3rem;padding:.12rem .45rem}
.hookgrid .nm,.toolgrid .nm{font:650 1rem/1.3 var(--sans);color:var(--ink)}
.hookgrid .kd,.toolgrid .kd{font-size:.82rem;color:var(--mute)}
.toolgrid .kd::first-letter{text-transform:uppercase}
.toolgrid .mono{width:2.4rem;height:2.4rem;border-radius:50%;background:var(--code);color:var(--code-key);display:flex;align-items:center;justify-content:center;
  font:700 .86rem/1 var(--mono);margin-bottom:.4rem;box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--cable,var(--accent))}
.badges{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.55rem}
.badges i{font:600 .7rem/1.2 var(--mono);font-style:normal;padding:.22rem .45rem;border-radius:4px;background:var(--band);color:var(--ink2)}
.badges i.none{background:none;color:var(--faint);padding-left:0}

.statusbox{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:.6rem;margin:1.4rem 0}
.sb-row{padding:.75rem .95rem;background:var(--paper);border:1px solid var(--rule);border-top:3px solid var(--block);border-radius:6px}
.statusbox dt{font:600 .7rem/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.statusbox dd{margin:.3rem 0 0;font:650 .98rem/1.35 var(--sans)}
ul.facts{list-style:none;padding:0;margin:1.2rem 0 1.9rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:.8rem}
li.fact{display:flex;flex-direction:column;gap:.3rem;margin:0;padding:.95rem 1.05rem .9rem 1.2rem;background:var(--paper);border:1px solid var(--rule);border-left:5px solid var(--cable,var(--accent));border-radius:4px 10px 10px 4px;
  transition:transform .18s,box-shadow .18s}
li.fact:nth-child(4n+2){--cable:var(--amber)} li.fact:nth-child(4n+3){--cable:var(--coral)} li.fact:nth-child(4n){--cable:var(--cblue)}
li.fact:hover{transform:translateY(-2px);box-shadow:0 16px 24px -20px rgba(19,23,28,.5)}
li.fact .tag{align-self:flex-start;font-size:.76rem;line-height:1.5;font-weight:700;letter-spacing:.03em;color:var(--ink2);background:var(--band);padding:.05rem .45rem;border-radius:4px}
li.fact .fv{display:flex;flex-direction:column;gap:.14rem}
li.fact .val{font-weight:650;font-size:.99rem;line-height:1.45}
li.fact .note{font-size:.88rem;color:var(--ink2)}
li.fact .meta{margin-top:auto;padding-top:.4rem;border-top:1px dashed var(--rule);font-size:.74rem;color:var(--faint)}
li.fact .meta .sep{margin:0 .3rem;color:var(--rule)}

blockquote{position:relative;margin:1.3rem 0 1.4rem;padding:1rem 1.15rem 1rem 1.3rem;background:var(--code);color:var(--code-ink);border-radius:10px;font:500 .9rem/1.65 var(--mono);box-shadow:0 18px 30px -24px rgba(13,17,22,.7)}
blockquote::before{content:"";position:absolute;left:0;top:.9rem;bottom:.9rem;width:3px;border-radius:0 3px 3px 0;background:var(--block)}
blockquote p{margin:0 0 .45rem}
blockquote p::before{content:"> ";color:var(--code-key)}
blockquote cite{font:normal 500 .74rem/1.3 var(--mono);color:var(--code-mute)}
blockquote cite a{color:var(--code-key)}

.tablewrap{overflow-x:auto;margin:1.4rem 0 .5rem;background:var(--paper);border:1px solid var(--rule);border-radius:10px;box-shadow:0 16px 28px -26px rgba(19,23,28,.45)}
table{width:100%;border-collapse:collapse;font-size:.9rem}
caption{caption-side:top;text-align:left;padding:.8rem 1rem .6rem;font-size:.78rem;font-weight:500;color:var(--ink2);background:var(--panel);border-bottom:1px solid var(--rule)}
thead th{text-align:left;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--code-str);padding:.6rem 1rem;background:var(--code);border-bottom:3px solid var(--block)}
tbody td{padding:.6rem 1rem;border-bottom:1px solid var(--rule);vertical-align:top}
tbody td:first-child{font-weight:650}
tbody tr:nth-child(even){background:#FAF9F6}
tbody tr:hover{background:var(--wash)}
tbody tr:last-child td{border-bottom:0}
tr.is-current{background:var(--amber-wash)!important;box-shadow:inset 4px 0 0 var(--amber)}
tr.is-current td{font-weight:700}
.rule{font-size:.8rem;color:var(--mute);margin:.55rem 0 1.7rem;max-width:var(--measure)}
.rule b{font:700 .72rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--amber-deep)}
.clause{font-size:.9rem;color:var(--ink2)}

main ul.entries{list-style:none;padding:0;margin:1.2rem 0 2rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.7rem}
ul.entries li{position:relative;margin:0;padding:.95rem 1rem .95rem 2.6rem;background:var(--paper);border:1px solid var(--rule);border-radius:10px;font-size:.85rem;color:var(--mute);transition:transform .18s,box-shadow .18s,border-color .18s}
ul.entries li::before{content:"";position:absolute;left:1rem;top:1.25rem;width:.72rem;height:.72rem;border-radius:50%;background:var(--paper);border:2.5px solid var(--cable,var(--accent))}
ul.entries li::after{content:"";position:absolute;left:1.3rem;top:2.2rem;bottom:1rem;width:2px;background:linear-gradient(var(--cable,var(--accent)),transparent);opacity:.5}
ul.entries li:nth-child(4n+2){--cable:var(--amber)} ul.entries li:nth-child(4n+3){--cable:var(--coral)} ul.entries li:nth-child(4n){--cable:var(--cblue)}
ul.entries li:hover{transform:translateY(-2px);border-color:var(--ink);box-shadow:4px 4px 0 var(--cable,var(--accent))}
ul.entries a{display:block;font:650 .98rem/1.3 var(--sans);color:var(--ink);margin-bottom:.2rem;text-decoration:none}
ul.entries a:hover{color:var(--accent-deep)}

.stamp{font-size:.74rem;color:var(--faint)}
li.fact .meta a[href^="http"]{color:var(--mute)}

.chart,.fig{margin:1.8rem 0 1.2rem;padding:1.25rem 1.35rem 1rem;border:1px solid var(--rule);border-radius:10px;clear:both;
  background:radial-gradient(circle,#C9C4B9 0 2.6px,#9E988C 3px 3.6px,transparent 4px) 9px 9px/12px 12px no-repeat,
    radial-gradient(circle,#C9C4B9 0 2.6px,#9E988C 3px 3.6px,transparent 4px) right 9px top 9px/12px 12px no-repeat,
    radial-gradient(circle,#C9C4B9 0 2.6px,#9E988C 3px 3.6px,transparent 4px) left 9px bottom 9px/12px 12px no-repeat,
    radial-gradient(circle,#C9C4B9 0 2.6px,#9E988C 3px 3.6px,transparent 4px) right 9px bottom 9px/12px 12px no-repeat,var(--paper);
  box-shadow:0 16px 28px -26px rgba(19,23,28,.45)}
.chart svg{display:block;max-width:100%;overflow:visible;margin:0 auto;height:auto}
.ch-matrix svg{max-width:100%}
.ch-matrix svg[width^="1"] .ch-lab{font-size:1.14rem}
.ch-matrix svg[width^="1"] .ch-col{font-size:.98rem}
.ch-matrix svg[width^="1"] .ch-title{font-size:.98rem}
.ch-bars svg{max-width:min(100%,50rem)}
.ch-timeline svg{max-width:min(100%,56rem)}
.chart figcaption,.fig figcaption{max-width:var(--measure);margin-top:.75rem;font:400 .8rem/1.5 var(--sans);color:var(--mute)}
.fign{float:left;margin:.1rem .55rem 0 0;padding:0 .4rem;border-radius:4px;background:var(--code);font:700 .7rem/1.5 var(--mono);color:var(--code-str)}
a.fign:hover{background:var(--block);color:var(--code)}
.ch-title{font:700 .7rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;fill:var(--ink)}
.ch-lab{font:500 .84rem/1 var(--sans);fill:var(--ink2);text-anchor:end}
.ch-lab2{font:400 .8rem/1 var(--sans);fill:var(--ink2)}
.ch-col{font:600 .68rem/1 var(--mono);text-transform:uppercase;fill:var(--mute);text-anchor:middle}
.ch-val{font:700 .76rem/1 var(--mono);fill:var(--ink);dominant-baseline:middle}
.ch-na{font:400 .72rem/1 var(--sans);fill:var(--faint);dominant-baseline:middle}
.ch-bar{fill:var(--accent)}
.ch-val-in{text-anchor:end;fill:#FFFFFF}
.ch-hl .ch-bar{opacity:.25}
.ch-hl .ch-hi{opacity:1;fill:var(--amber)}
.ch-lab-hi{font-weight:700;fill:var(--ink)}
.ch-a{opacity:1}
.ch-b{opacity:.4}
.ch-keyt{font:600 .72rem/1 var(--sans);fill:var(--ink2)}
.ch-gap{fill:none;stroke:var(--rule);stroke-dasharray:4 3}
.ch-cell{fill:var(--band);stroke:none}
.ch-cell.ch-cur{fill:var(--amber-wash);stroke:var(--amber);stroke-width:1.2}
.ch-mark{stroke:var(--accent);stroke-width:1.6}
.ch-m-yes{fill:var(--accent)}
.ch-m-part{fill:none}
.ch-m-none{fill:none;stroke:var(--mute);stroke-width:1.2;opacity:.6}
.ch-half{fill:var(--accent)}
.ch-axis,.ch-drop{stroke:var(--rule)}
.ch-dot{fill:var(--accent)}
.ch-date{font:400 .72rem/1 var(--mono);fill:var(--faint);text-anchor:end}
.ch-track{fill:var(--band)}
.ch-span{fill:var(--accent)}

.fig img{display:block;width:100%;height:auto;background:var(--band);border-radius:6px}
.fig .credit{display:block;margin-top:.3rem;font:400 .7rem/1.4 var(--mono);color:var(--faint)}
.figs{display:grid;grid-template-columns:repeat(var(--figcols,3),1fr);gap:.5rem}
.fig-dia{overflow-x:auto}
.fig-dia svg{display:block;max-width:min(100%,46rem);min-width:34rem;overflow:visible;height:auto;margin:0 auto}
.dg-band{fill:var(--panel)}
.dg-head{font:700 10.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;fill:var(--amber-deep)}
.dg-box{fill:var(--wash);stroke:var(--accent);stroke-width:1}
.dg-store{font:500 13px/1 var(--sans);fill:var(--ink)}
.dg-arrow{stroke:var(--accent);stroke-width:1.8;fill:none}
.dg-head-tip{fill:var(--accent)}
.dg-travels{font:400 10.5px/1 var(--sans);fill:var(--mute)}
.dg-bar{fill:var(--code)}
.dg-bartext{font:700 12px/1 var(--mono);fill:var(--code-key)}
.dg-rule{stroke:var(--rule);stroke-width:1}
.dg-footlab{font:700 9px/1 var(--mono);fill:var(--mute);letter-spacing:.05em;text-transform:uppercase}
.dg-after{font:400 11px/1 var(--sans);fill:var(--ink2)}

.site-foot{margin-left:var(--side);background:linear-gradient(90deg,#0C1014 0 3px,transparent 3px),linear-gradient(180deg,#171D24,#101419);color:#C6D0DA;border-top:4px solid var(--amber)}
.sf{max-width:calc(var(--frame) + 2 * var(--pad));padding:2.6rem var(--pad) 1.6rem}
.sf-id{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.55rem .6rem;margin-bottom:1.7rem}
.sf-id .mark{width:1.8rem;height:1.8rem}
.sf-id .mark svg{width:1.15rem;height:1.15rem}
.sf-name{font:750 1.05rem/1 var(--sans);color:#FFFFFF}
.sf-note{grid-column:1/-1;font-size:.86rem;color:#9AA7B4;max-width:44rem;margin:0}
.sf-map{display:block;columns:4 11.5rem;column-gap:1.8rem}
.sfc{display:block;break-inside:avoid;margin:0 0 1.4rem}
.sfc ul{list-style:none;margin:0;padding:0}
.sfc li{margin:.22rem 0;font-size:.82rem}
.sfc a{color:#C6D0DA;text-decoration:none}
.sfc a:hover{color:#FFFFFF;text-decoration:underline;text-decoration-color:var(--amber)}
.sfh{display:block;font:700 .7rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--code-str);margin:0 0 .6rem;padding-bottom:.45rem;border-bottom:1px solid #26303A}
details.sfc>summary.sfh{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:.4rem;padding:.55rem .65rem .5rem;margin:0;border:1px solid #2A343E;border-left:3px solid var(--amber);border-radius:6px;background:#161C22;transition:background .2s}
details.sfc>summary.sfh:hover{background:#1D252D}
details.sfc>summary.sfh::-webkit-details-marker{display:none}
details.sfc>summary.sfh::after{content:"+";margin-left:auto;font-weight:700;opacity:.8}
details.sfc[open]>summary.sfh::after{content:"\2212"}
.sfh .sfn{font-weight:400;opacity:.6}
details.sfc[open]{column-span:all}
details.sfc[open]>summary.sfh{margin-bottom:.7rem}
details.sfc[open]>ul{columns:4 11rem;column-gap:1.6rem}
details.sfc[open]>ul li{break-inside:avoid}
.sf-bar{max-width:calc(var(--frame) + 2 * var(--pad));display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;border-top:1px solid #26303A;margin:.6rem 0 0;padding:1rem var(--pad) 1.6rem;font:400 .74rem/1.4 var(--mono);color:#8391A0}
.site-foot .stamp{color:#8391A0}

h2:target,li.fact:target{background:var(--amber-wash)}
a:focus-visible,summary:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

@keyframes rise{from{opacity:0;translate:0 14px}to{opacity:1;translate:none}}
@keyframes frame{0%{opacity:0;box-shadow:0 0 0 0 var(--block),0 0 0 1px rgba(19,23,28,.12)}45%{opacity:1;box-shadow:0 0 0 0 var(--block),0 0 0 1px rgba(19,23,28,.12)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

@media (max-width:72rem){
  .sheet{grid-template-columns:minmax(0,1fr)}
  .rail{order:2;position:static;margin-top:.5rem}
  .sheet{background:none}
}
@media (max-width:62rem){
  .hero{grid-template-columns:1fr;gap:2rem}
  .hero-art{min-height:0;display:block;padding:0}
  .hero-art::before{position:relative;display:block;right:auto;width:62%;max-width:20rem;margin:0 0 -3.2rem auto}
  .codewin{width:92%;margin-top:0}
}

@media (max-width:52rem){
  .masthead::after{display:none}
  .masthead{position:static;width:auto;overflow:visible;background:linear-gradient(180deg,#171D24,#101419);border-bottom:4px solid var(--amber)}
  .mh{flex-direction:row;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;padding:.65rem 1rem}
  .mh-tag{display:none}
  .mh-nav{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;border-top:0;padding-top:0;gap:.1rem .2rem;font-size:.8rem;width:100%}
  .mh-nav a{padding:.3rem .5rem;gap:.4rem}
  .mh-nav a::before{width:.55rem;height:.55rem}
  .sheet,.site-foot{margin-left:0}
  .sheet{padding:1.2rem 1rem 2.6rem}
  .sf{padding:2rem 1rem 1.4rem}
  h1{font-size:1.85rem}
  h2{margin-top:2.4rem;padding-top:1.2rem}
}
@media (max-width:48rem){
  main#doc:not(:has(.hero))::before{float:none;display:block;width:auto;max-width:none;aspect-ratio:16/9;margin:0 16px 2rem 0;box-shadow:12px 12px 0 0 var(--block),0 0 0 1px rgba(19,23,28,.12)}
  .hero-art::before{box-shadow:12px 12px 0 0 var(--amber),0 0 0 1px rgba(19,23,28,.15)}
  ul.facts{grid-template-columns:1fr}
  .answer{font-size:1rem;padding:.95rem 1rem .95rem 1.05rem}
  .codewin{width:100%;margin:0}
  .codewin pre{font-size:.7rem}
  .tablewrap table:has(thead th:nth-child(3)){min-width:32rem}
  .tablewrap,.fig-dia,.chart.ch-matrix,.chart.ch-timeline{overflow-x:auto}
  .tablewrap{background:linear-gradient(90deg,#FFFFFF 30%,rgba(255,255,255,0)) 0 0/2rem 100% no-repeat local,linear-gradient(270deg,#FFFFFF 30%,rgba(255,255,255,0)) 100% 0/2rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(19,23,28,.3),transparent) 0 0/1rem 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(19,23,28,.3),transparent) 100% 0/1rem 100% no-repeat scroll,#FFFFFF}
  .chart.ch-matrix svg,.chart.ch-timeline svg{max-width:none;margin:0}
  .chart.ch-matrix,.chart.ch-timeline,.fig-dia{background:linear-gradient(90deg,#FFFFFF 30%,rgba(255,255,255,0)) 0 0/2rem 100% no-repeat local,linear-gradient(270deg,#FFFFFF 30%,rgba(255,255,255,0)) 100% 0/2rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(19,23,28,.32),transparent) 0 0/1rem 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(19,23,28,.32),transparent) 100% 0/1rem 100% no-repeat scroll,#FFFFFF}
  .chart figcaption,.fig-dia figcaption{position:sticky;left:0;max-width:calc(100vw - 4.8rem)}
  .fig-dia svg{margin:0}
  .rail::after{display:none}
  blockquote{font-size:.84rem}
}

@media (max-width:48rem){
  .mh{padding:.55rem .85rem;gap:.35rem .6rem}
  .brand{font-size:1.02rem}
  .mark{width:1.7rem;height:1.7rem}
  .mh-nav{font-size:.74rem;gap:0 .1rem}
  .mh-nav a{padding:.28rem .45rem}
  .mh-nav a::before{display:none}
}

.rankwrap table :is(th,td):nth-child(5){white-space:nowrap}
.rankwrap table :is(th,td):nth-child(4){min-width:15em}
