/* curriculus.org. Built from mockup E (plain), approved November 3, 2026. */
@font-face{font-family:Schibsted;src:url('/assets/schibsted-grotesk.woff2') format('woff2');font-weight:400 900;font-display:swap}
:root{
  --black:#0E1116; --text:#1F242B; --grey:#6A7079; --light:#9CA1A8; --hair:#E8E8E6; --wash:#F6F6F4;
  --cherry:#770E36; --citron:#EFEE1B; --warn:#8A5A00; --warn-bg:#FFF8E1; --err:#A3122B; --err-bg:#FDECEE;
  --sans:Schibsted,-apple-system,'Helvetica Neue',Arial,sans-serif; --mono:ui-monospace,'SF Mono',Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:#fff;color:var(--text);font:16px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ol,ul,dl,dd,figure,table,fieldset{margin:0;padding:0}
fieldset{border:0;min-width:0}
a{color:inherit}
.wrap{max-width:1040px;margin:0 auto;padding:0 32px}
.skip{position:absolute;left:-9999px;top:8px;z-index:20;background:var(--black);color:#fff;padding:8px 14px;border-radius:999px;font-size:14px;text-decoration:none}
.skip:focus{left:16px}
:focus-visible{outline:2px solid var(--black);outline-offset:3px}

/* Header */
header.top{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.top .wrap{height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.top img{width:116px;height:auto;display:block}
.top nav{display:flex;align-items:center;gap:28px;font-size:15px}
.top nav a{text-decoration:none;color:var(--text)}
.top nav a:hover{color:var(--black);text-decoration:underline;text-underline-offset:4px}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--black);color:#fff!important;text-decoration:none!important;font:500 14.5px/1 var(--sans);padding:12px 20px;border-radius:999px;border:0;cursor:pointer}
.btn:hover{background:#2A2F37}
.btn[disabled]{opacity:.55;cursor:progress}
.btn.sm{font-size:14px;padding:10px 17px}
/* The form page hides the header button that links to the form page. */
body:has(#req) .top .btn.sm{display:none}
.btn.lg{font-size:17px;padding:16px 30px}
/* Phone menu: a details element, so the menu works without script under the site's security policy. */
.menu-m{display:none;position:relative}
.menu-m summary{list-style:none;cursor:pointer;font-size:14px;padding:9px 14px;border:1px solid var(--hair);border-radius:999px;color:var(--black)}
.menu-m summary::-webkit-details-marker{display:none}
.menu-m[open] summary{border-color:var(--black)}
.top .menu-m{border:0;margin:0}
.top .menu-m summary{font-weight:400;padding:9px 14px}
.top .menu-m summary::after{content:none}
.menu-m div{position:absolute;right:0;top:calc(100% + 8px);min-width:190px;background:#fff;border:1px solid var(--hair);border-radius:10px;box-shadow:0 8px 24px rgba(14,17,22,.08);padding:6px 0;display:grid}

/* Opening: the 2% */
.hero{max-width:860px;margin:0 auto;padding:160px 0 64px}
.hero h1{font:500 32px/1.25 var(--sans);color:var(--black);letter-spacing:-.022em;max-width:800px}
.hero p{margin-top:24px;max-width:780px;color:var(--text)}
.hero p.lede{font-size:19px;line-height:1.6}
.hero p.lede+p.lede{margin-top:16px}
.hero .btn{margin-top:48px}
.eyebrow{font-size:15px;font-weight:500;color:var(--black);margin-bottom:20px}
.hero p.eyebrow{margin-top:0}
.get-block{margin-top:120px}
/* Short homepage (November 9): text beside one real page, then the six outputs and the next step. */
.hero-split{max-width:none;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:72px;align-items:center;padding:128px 0 120px;position:relative;isolation:isolate}
/* The hero's one ambient mark: a faint, blurred glow in the wordmark's citron, with a trace of cherry. Decorative only. */
.orb{position:relative;width:100%;max-width:460px;aspect-ratio:1;justify-self:center;pointer-events:none;opacity:.5}
.orb::before,.orb::after,.orb span{content:"";position:absolute;border-radius:50%}
.orb::before{inset:6%;background:radial-gradient(closest-side,rgba(239,238,27,.30),rgba(239,238,27,.10) 55%,rgba(239,238,27,0) 78%);animation:orb-breathe 9s ease-in-out infinite alternate}
.orb span{inset:27%;background:radial-gradient(circle at 42% 38%,rgba(255,255,255,.95) 0,rgba(247,246,120,.85) 30%,rgba(239,238,27,.6) 58%,rgba(239,238,27,0) 100%);filter:blur(16px);animation:orb-drift 14s ease-in-out infinite alternate}
.orb::after{inset:30%;background:radial-gradient(closest-side,rgba(119,14,54,.13),rgba(119,14,54,0) 100%);filter:blur(18px);transform-origin:38% 38%;animation:orb-turn 28s linear infinite}
@keyframes orb-breathe{from{transform:scale(.9);opacity:.7}to{transform:scale(1.06);opacity:1}}
@keyframes orb-drift{from{transform:translate(-2%,3%) scale(.97)}to{transform:translate(2%,-4%) scale(1.04)}}
@keyframes orb-turn{to{transform:rotate(360deg)}}
.hero-split h1{font-size:44px;line-height:1.12;letter-spacing:-.03em}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:36px}
.hero .actions .btn{margin-top:0}
.btn-line{color:var(--black);font-size:16px;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.btn-line:hover{text-decoration-thickness:2px}
.hero-page{margin:0}
.hero-page figcaption{margin-top:12px;font-size:12.5px;line-height:1.5;color:var(--grey)}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* Home hero: the "Free for colleges and universities" line carries a marker highlight. */
.hero-split .eyebrow{width:fit-content;margin-left:-4px;margin-bottom:24px;padding:3px 9px 4px;border-radius:4px;background:rgba(239,238,27,.42);font-size:16px;line-height:1.3}
/* Home hero: the play link opens the flow video in a dialog (js/site.js). Without scripts, the link opens the video file. */
.play{display:inline-flex;align-items:center;gap:10px;padding:8px 20px 8px 8px;border-radius:999px;color:var(--black);text-decoration:none;font:500 16px/1 var(--sans);box-shadow:inset 0 0 0 1px rgba(14,17,22,.2);transition:box-shadow .25s}
.play:hover{box-shadow:inset 0 0 0 1px rgba(14,17,22,.6)}
.play-disc{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--citron);color:var(--black);box-shadow:0 0 0 1px rgba(14,17,22,.16);transition:transform .5s cubic-bezier(.16,1,.3,1)}
.play-disc svg{display:block;width:14px;height:14px;margin-left:2px;fill:currentColor}
.play:hover .play-disc{transform:scale(1.08)}
.actions:has(.play){gap:14px 16px}
dialog.flow-dlg{width:100%;max-width:min(1180px,94vw);overflow:hidden}
dialog.flow-dlg[open]{animation:flow-in .32s cubic-bezier(.16,1,.3,1)}
dialog.flow-dlg[open]::backdrop{background:rgba(14,17,22,.7);animation:flow-dim .32s ease-out}
.flow-dlg .bar{position:static;font-size:14px;color:var(--black);padding:12px 16px}
.flow-dlg .bar-actions{display:flex;align-items:center;gap:10px}
.flow-dlg .bar .btn.sm{font-size:13px;padding:8px 14px}
.flow-video{display:block;width:100%;height:auto;aspect-ratio:16/9;max-height:calc(92vh - 58px);background:#F3F4EF}
@keyframes flow-in{from{opacity:0;transform:translateY(10px) scale(.985)}}
@keyframes flow-dim{from{opacity:0}}
@media (prefers-reduced-motion:reduce){dialog.flow-dlg[open],dialog.flow-dlg[open]::backdrop{animation:none}}
/* Sub-hero (November 9 design updates): the faculty-and-AI line, then what a course can start with. */
.subhero{padding:88px 0;border-top:1px solid var(--hair);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:72px;align-items:center}
.subhero .hero-page{max-width:380px;justify-self:end;width:100%}
.subhero h2{font:500 34px/1.18 var(--sans);letter-spacing:-.025em;color:var(--black);max-width:820px}
.subhero p{max-width:700px;margin-top:20px;font-size:17px;line-height:1.6;color:var(--text)}
.outputs{padding:80px 0;border-top:1px solid var(--hair)}
.outputs h2,.next h2{font:500 26px/1.3 var(--sans);letter-spacing:-.015em;color:var(--black)}
.outputs .get{grid-template-columns:repeat(3,1fr)}
.next{padding:80px 0 112px;border-top:1px solid var(--hair)}
.next p{max-width:700px;margin-top:16px;font-size:17px;line-height:1.6;color:var(--text)}
/* How it works page opening */
.hero.hiw{padding-bottom:24px}
/* "What review changes": the draft and the fix, side by side in one block. */
.change{margin-top:20px;border-top:1px solid var(--hair)}
.change p{margin:0!important;padding:14px 0;border-bottom:1px solid var(--hair);font-size:17px;line-height:1.5;color:var(--black)}
.change span{display:block;font-size:12px;color:var(--grey);margin-bottom:4px}
.change mark{background:none;border-bottom:2px solid var(--black);color:inherit}
.get-h{font:500 17px/1.4 var(--sans);color:var(--black)}
.get{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:32px 40px;margin-top:24px}
.get li{border-top:2px solid var(--black);padding-top:14px}
.get b{display:block;font-weight:500;color:var(--black)}
.get b{font-size:17px}
.get span{display:block;margin-top:6px;font-size:15px;line-height:1.55;color:var(--text)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:112px}
.stat b{display:block;font:500 42px/1 var(--sans);color:var(--black);letter-spacing:-.03em}
.stat span{display:block;margin-top:10px;font-size:15px;color:var(--grey)}

/* Delight: the nine-step line */
.line9{margin:120px 0 12px;position:relative;height:56px}
.line9 svg{width:100%;height:56px;display:block;overflow:visible}
.line9 .track{stroke:var(--hair);stroke-width:2}
.line9 .done{stroke:var(--black);stroke-width:2}
.line9 circle.stop{fill:#fff;stroke:#C9CBCE;stroke-width:1.5;transition:fill .3s,stroke .3s}
.line9 circle.stop.on{fill:var(--black);stroke:var(--black)}
.line9 circle.stop.gate{stroke-dasharray:2 2}
.line9 circle.stop.gate.on{stroke-dasharray:none}
.line9 .runner{fill:var(--citron);stroke:#C8C700;stroke-width:1}
.line9 text{font:500 10.5px var(--sans);fill:var(--grey)}
.line9 text.on{fill:var(--black)}
.line9-cap{display:flex;justify-content:space-between;gap:16px;font-size:12.5px;color:var(--grey)}
.line9-cap span:last-child{text-align:right}
.line9-key{margin-top:14px;font-size:12.5px;color:var(--grey);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dotkey{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--citron);box-shadow:0 0 0 1px #C8C700}
.replay{all:unset;cursor:pointer;color:var(--black);text-decoration:underline;text-underline-offset:3px}
.replay:focus-visible{outline:2px solid var(--black);outline-offset:2px;border-radius:3px}

/* Pages from a course */
.pages{padding:120px 0 24px}
.pages-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:18px}
.pages-head h2{font:500 15.5px/1.4 var(--sans);color:var(--black)}
.pages-head p{font-size:12.5px;color:var(--grey)}
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.page{all:unset;cursor:zoom-in;display:block}
.page .paper{display:block;aspect-ratio:8.5/11;border:1px solid var(--hair);border-radius:6px;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(14,17,22,.05);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.page .paper img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.page.slide .paper{aspect-ratio:auto}
.page.slide .paper img{height:auto}
.page:hover .paper,.page:focus-visible .paper{transform:translateY(-4px) rotate(-.6deg);box-shadow:0 14px 28px -14px rgba(14,17,22,.3)}
.page:focus-visible{outline:2px solid var(--black);outline-offset:4px;border-radius:6px}
.page .cap{display:block;margin-top:10px;font-size:13px;color:var(--black)}
.page .cap small{display:block;font-size:12px;color:var(--grey)}
dialog{border:0;padding:0;border-radius:10px;max-width:min(860px,94vw);max-height:92vh;box-shadow:0 30px 80px rgba(0,0,0,.35)}
dialog::backdrop{background:rgba(14,17,22,.55)}
dialog img{display:block;width:100%;height:auto}
dialog .bar{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;background:#fff;border-bottom:1px solid var(--hair);font-size:13px}
dialog button{all:unset;cursor:pointer;font-size:13px;padding:6px 10px;border-radius:999px;background:var(--wash)}
dialog button:focus-visible{outline:2px solid var(--black)}

/* Documentation: the 90% */
.docs{display:grid;grid-template-columns:200px 1fr;gap:72px;padding:112px 0 56px;border-top:1px solid var(--hair);margin-top:96px}
.toc{position:sticky;top:84px;align-self:start;font-size:13px}
.toc p{font-weight:500;color:var(--black);margin-bottom:10px}
.toc a{display:block;padding:4px 0 4px 12px;color:var(--grey);text-decoration:none;border-left:1px solid var(--hair)}
.toc a:hover{color:var(--black)}
.toc a.on{color:var(--black);border-left:2px solid var(--black);padding-left:11px}
.toc-m{display:none}
.doc{max-width:700px;min-width:0}
.doc section{padding-bottom:104px}
.doc h2{font:500 26px/1.3 var(--sans);letter-spacing:-.015em;color:var(--black);margin-bottom:18px}
.doc h2 a{text-decoration:none}
.doc h2 a::after{content:" #";color:var(--light);opacity:0;transition:opacity .2s}
.doc h2:hover a::after,.doc h2 a:focus-visible::after{opacity:1}
.doc h3{font:500 15.5px/1.4 var(--sans);color:var(--black);margin:26px 0 6px}
.doc p+p{margin-top:16px}
.doc code{font:13px var(--mono);background:var(--wash);border:1px solid var(--hair);padding:1px 5px;border-radius:4px;color:var(--black)}
.muted{color:var(--grey)}
.doc h3.label,.label{font:500 12.5px/1.4 var(--sans);color:var(--grey);margin:20px 0 0}

.table-scroll{overflow-x:auto;margin-top:20px}
table.steps{width:100%;border-collapse:collapse;font-size:14.5px}
table.steps th{text-align:left;font-weight:500;font-size:12px;color:var(--grey);padding:0 12px 8px 0;border-bottom:1px solid var(--black)}
table.steps td{padding:11px 12px 11px 0;border-bottom:1px solid var(--hair);vertical-align:top}
table.steps td.n{font:13px var(--mono);color:var(--grey);width:30px}
table.steps td.name{font-weight:500;color:var(--black);width:150px}
table.steps td.g{font-size:12.5px;color:var(--grey);min-width:96px}
table.steps td.ins{font-size:13.5px;color:var(--black)}
table.steps td.ins.none{color:var(--grey)}
table.steps td.g .lm{color:var(--black);white-space:nowrap}
table.steps td.g .lm::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--citron);box-shadow:0 0 0 1px #C8C700;margin-right:7px;vertical-align:1px}

dl.roles{margin-top:16px;border-top:1px solid var(--hair)}
dl.roles div{display:grid;grid-template-columns:170px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--hair)}
dl.roles dt{font-weight:500;color:var(--black)}
dl.roles dd{color:var(--text)}
dl.roles dd small{display:block;color:var(--grey);font-size:12.5px;margin-top:2px}

ul.list{list-style:none;margin-top:10px}
ul.list li{position:relative;padding:6px 0 6px 20px}
ul.list li::before{content:"";position:absolute;left:2px;top:15px;width:6px;height:6px;border-radius:50%;background:var(--black)}
ul.list.no li::before{background:#fff;box-shadow:inset 0 0 0 1.5px var(--black)}

pre.term{margin-top:16px;background:var(--black);color:#E6E8EB;border-radius:8px;padding:16px 18px;font:13px/1.7 var(--mono);overflow-x:auto}
pre.term .p{color:#7D848D}
pre.term .c{color:var(--citron)}

ol.join{list-style:none;counter-reset:j;margin-top:16px}
ol.join li{counter-increment:j;display:grid;grid-template-columns:30px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid var(--hair)}
ol.join li::before{content:counter(j);font:13px var(--mono);color:var(--grey);padding-top:2px}
ol.join b{font-weight:500;color:var(--black)}

details{border-bottom:1px solid var(--hair)}
details:first-of-type{border-top:1px solid var(--hair);margin-top:14px}
summary{cursor:pointer;list-style:none;padding:14px 28px 14px 0;font-weight:500;color:var(--black);position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;top:12px;font-weight:400;font-size:18px;color:var(--grey);transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 0 16px;color:var(--text)}

/* Form */
form.req{margin-top:20px;display:grid;gap:16px;padding:24px;border:1px solid var(--hair);border-radius:12px}
form.req legend{float:left;width:100%;font:500 15px/1.4 var(--sans);color:var(--black);padding:0;margin:0}
form.req fieldset{display:grid;gap:16px}
form.req fieldset+fieldset{border-top:1px solid var(--hair);padding-top:20px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label.f{display:grid;gap:6px;font-size:13px;font-weight:500;color:var(--black)}
label.f .opt{font-weight:400;color:var(--grey)}
label.f input,label.f select,label.f textarea{font:15px var(--sans);color:var(--black);background:#fff;border:1px solid #8A8F96;border-radius:8px;padding:10px 12px;min-height:44px;width:100%;appearance:none}
label.f textarea{min-height:88px;resize:vertical;line-height:1.5}
label.f select{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230E1116' stroke-width='1.4'/%3E%3C/svg%3E") right 14px center no-repeat;padding-right:34px}
label.f input:focus,label.f select:focus,label.f textarea:focus{outline:none;border-color:var(--black);box-shadow:0 0 0 3px rgba(239,238,27,.6)}
.hint{font-size:12.5px;font-weight:400;color:var(--grey)}
.note{display:none;font-size:13px;font-weight:400;line-height:1.5;color:var(--warn);background:var(--warn-bg);border-radius:8px;padding:8px 10px}
.note.show{display:block}
.assure{list-style:none;display:grid;gap:6px;font-size:14px;color:var(--text);padding:12px 14px;background:var(--wash);border-radius:8px}
.assure li{position:relative;padding-left:16px}
.assure li::before{content:"";position:absolute;left:2px;top:10px;width:5px;height:5px;border-radius:50%;background:var(--black)}
.agree-links{font-size:14px;color:var(--text)}
.agree{border:1px solid #B9BCC1;border-radius:8px;padding:12px;font-size:14px;line-height:1.55}
.agree:has(input[type=radio]:checked){border-color:var(--black);box-shadow:inset 0 0 0 1px var(--black)}
.agree .pick,.agree .logo-opt{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;cursor:pointer}
.agree input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--black);cursor:pointer}
.agree .inst{font-weight:500;color:var(--black)}
.agree .inst.blank{cursor:pointer;color:var(--grey);letter-spacing:.02em}
.agree .inst.blank:hover{color:var(--black)}
.agree .way{display:block;font-weight:600;color:var(--black);margin-bottom:4px}
.know{list-style:none;display:grid;gap:8px;font-size:15px;line-height:1.55;color:var(--text)}
.know li{position:relative;padding-left:16px}
.know li::before{content:"";position:absolute;left:2px;top:10px;width:5px;height:5px;border-radius:50%;background:var(--black)}
.opts{display:grid;gap:8px}
.opts label{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;padding:10px 12px;border:1px solid #B9BCC1;border-radius:8px;font-size:14px;line-height:1.5;cursor:pointer}
.opts label:has(input:checked){border-color:var(--black);box-shadow:inset 0 0 0 1px var(--black)}
.opts input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--black)}
.opts b{display:block;font-weight:500;color:var(--black)}
.opts small{display:block;font-size:13px;color:var(--grey)}
.opts-err{display:block;font-size:12.5px;color:var(--err)}
.err{display:block;font-size:12.5px;font-weight:400;color:var(--err)}
label.f input[aria-invalid=true]{border-color:var(--err);box-shadow:0 0 0 1px var(--err)}
.accept-line{font-size:14.5px;color:var(--text)}
.send{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.send small{font-size:12.5px;color:var(--grey)}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.msg{display:none;padding:14px 16px;border-radius:8px;font-size:14.5px}
.msg.show{display:block}
.msg.ok{background:var(--wash);color:var(--black)}
.msg.bad{background:var(--err-bg);color:var(--err)}

/* Small pages */
.small{padding:72px 0 80px;max-width:700px}
.small h1{font:500 28px/1.25 var(--sans);letter-spacing:-.02em;color:var(--black)}
.small .meta{margin-top:8px;font-size:13px;color:var(--grey)}
.small h2{font:500 18px/1.35 var(--sans);color:var(--black);margin:36px 0 8px}
.small h3{font:500 15.5px/1.4 var(--sans);color:var(--black);margin:24px 0 6px}
.small p{margin-top:12px}
.small ul,.small ol{margin:10px 0 0 20px}
.small li{padding:3px 0}
.small blockquote{margin:12px 0 0;padding:10px 14px;border-left:2px solid var(--hair);color:var(--grey)}
.small code{font:13px var(--mono);background:var(--wash);border:1px solid var(--hair);padding:1px 5px;border-radius:4px;color:var(--black)}
.small .btn{margin-top:28px}
.small hr{border:0;border-top:1px solid var(--hair);margin:48px 0 0}
.small.wide{max-width:900px}
.wt-jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.wt-jump a{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 13px;border:1px solid var(--hair);border-radius:999px;text-decoration:none;font-size:13px;color:var(--black)}
.wt-jump a span{font-family:var(--mono);color:var(--grey)}
.wt-jump a:hover{border-color:var(--black)}
.wt-step{padding-top:24px}
/* Walkthrough bar (November 9 design updates): stays under the header and names the step and excerpt on screen. js/site.js builds the bar. */
.wt-bar{position:fixed;left:0;right:0;top:76px;z-index:9;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.wt-bar[hidden]{display:none}
.wt-bar .wrap{display:flex;align-items:center;gap:20px;min-height:52px}
.wt-bar-steps{display:flex;gap:5px;flex:none}
.wt-bar-steps a{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:1px solid #C9CBCE;font:500 12.5px var(--mono);color:var(--grey);text-decoration:none}
.wt-bar-steps a:hover{border-color:var(--black);color:var(--black)}
.wt-bar-steps a[aria-current]{background:var(--black);border-color:var(--black);color:#fff}
.wt-bar-where{margin:0;min-width:0;font-size:13.5px;line-height:1.4;color:var(--grey);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wt-bar-where b{font-weight:500;color:var(--black);margin-right:10px}
html:has(.wt-bar){scroll-padding-top:136px}
.wt-step h2 a{text-decoration:none}
.wt-step h2 a::after{content:" #";color:var(--light);opacity:0;transition:opacity .2s}
.wt-step h2:hover a::after,.wt-step h2 a:focus-visible::after{opacity:1}
.rec{margin:20px 0 0;border:1px solid var(--hair);border-radius:10px;overflow:hidden}
.rec figcaption{padding:10px 14px;font-size:13.5px;font-weight:500;color:var(--black);border-bottom:1px solid var(--hair)}
.rec-pre{margin:0;padding:12px 14px;background:var(--wash);font:12.5px/1.6 var(--mono);color:var(--black);white-space:pre-wrap;overflow-wrap:anywhere}
.rec-pre+.rec-pre,.rec-md+.rec-md{border-top:1px solid var(--hair)}
.rec-md{overflow-x:auto;background:var(--wash);padding:4px 14px 10px}
.rec-md p{font:12.5px/1.6 var(--mono);color:var(--black);margin-top:8px}
.rec-md table{border-collapse:collapse;min-width:640px;width:100%;font-size:12.5px;line-height:1.5;margin-top:8px}
.rec-md th{text-align:left;font-weight:500;color:var(--grey);padding:6px 10px 6px 0;border-bottom:1px solid var(--black);vertical-align:bottom}
.rec-md td{padding:8px 10px 8px 0;border-bottom:1px solid var(--hair);vertical-align:top;color:var(--black)}
.rec-md code{font-size:11.5px}
.rec-src{margin:0!important;padding:8px 14px;font-size:12px;color:var(--grey);border-top:1px solid var(--hair)}
.join-btn{margin-top:28px}


.small form.req{margin-top:28px}
.small .send .btn{margin-top:0}
.small form.req p{margin-top:0}
.wt-end{margin-top:56px;padding-top:32px;border-top:1px solid var(--hair)}
/* Examples page: groups of pages that open in the viewer */
.ex{padding-top:24px}
.ex .strip{margin-top:20px;align-items:start}
#viewer .bar-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
dialog button[disabled]{opacity:.4;cursor:default}
@media (max-width:560px){
  #viewer .bar{flex-wrap:wrap}
  #viewer .bar-actions{width:100%;flex-wrap:nowrap;justify-content:space-between}
}
.flag{margin-top:24px;padding:14px 16px;border-radius:8px;background:var(--warn-bg);color:var(--warn);font-size:14px}
.flag b{font-weight:500}

/* Footer */
footer{border-top:1px solid var(--hair);padding:28px 0 40px;font-size:12.5px;color:var(--grey)}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer nav{display:flex;gap:20px;flex-wrap:wrap}
footer a{text-decoration:none}
footer a:hover{color:var(--black);text-decoration:underline;text-underline-offset:3px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media (prefers-reduced-motion:reduce){.orb::before,.orb::after,.orb span{animation:none}}
@media (max-width:860px){
  .docs{grid-template-columns:1fr;gap:0}
  .toc{display:none}
  .toc-m{display:block;margin-bottom:32px;border:1px solid var(--hair);border-radius:10px;font-size:14px}
  .toc-m summary{padding:12px 40px 12px 14px}
  .toc-m summary::after{top:10px;right:14px}
  .toc-m nav{display:grid;padding:0 14px 10px}
  .toc-m a{padding:8px 0;border-top:1px solid var(--hair);text-decoration:none;color:var(--text)}
  .docs{padding-top:40px}
  .strip{grid-template-columns:1fr 1fr}
  .get{grid-template-columns:1fr 1fr;gap:20px 18px}
  .top nav a:not(.btn){display:none}
  .hero-split{grid-template-columns:1fr;gap:40px;padding:72px 0 80px}
  .orb{position:absolute;top:22px;right:-12px;width:130px;z-index:-1}
  .subhero{grid-template-columns:1fr;gap:40px}
  .subhero .hero-page{justify-self:start;max-width:420px}
  .hero-page{max-width:420px}
  .outputs .get{grid-template-columns:1fr 1fr}
  .top nav{gap:10px}
  .menu-m{display:block}
  .top nav .menu-m a{display:block;padding:11px 16px;font-size:15px}
  .wt-bar .wrap{flex-direction:column;align-items:stretch;gap:6px;padding-top:8px;padding-bottom:8px}
  .wt-bar-steps{justify-content:space-between}
  .wt-bar-steps a{width:32px;height:32px}
  .wt-bar-where{white-space:normal;min-height:2.8em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .wt-bar-where b{display:block;margin-right:0}
  html:has(.wt-bar){scroll-padding-top:176px}
}
@media (max-width:560px){
  .wrap{padding:0 16px}
  .stats{grid-template-columns:repeat(3,1fr);gap:12px;margin-top:72px}
  .stat b{font-size:28px}
  .stat span{font-size:13px}
  .line9 text{display:none}
  .row{grid-template-columns:1fr}
  .pages-head{flex-direction:column;gap:4px}
  dl.roles div{grid-template-columns:1fr;gap:2px}
  table.steps thead{display:none}
  table.steps,table.steps tbody,table.steps tr,table.steps td{display:block;width:auto}
  table.steps tr{border:1px solid var(--hair);border-radius:10px;padding:12px 14px;margin-bottom:12px}
  table.steps td{border:0;padding:3px 0}
  table.steps td.n,table.steps td.name{display:inline;font-size:15.5px}
  table.steps td.n::after{content:" "}
  table.steps td.out,table.steps td.g,table.steps td.ins{position:relative;padding-left:112px;margin-top:6px}
  table.steps td.out::before,table.steps td.g::before,table.steps td.ins::before{content:attr(data-label);position:absolute;left:0;top:4px;width:104px;font-size:12px;line-height:1.4;color:var(--grey)}
  table.steps td.g{min-width:0}
  .hero h1{font-size:26px}
  .subhero{padding:56px 0}
  .subhero h2{font-size:24px}
  .hero{padding:80px 0 40px}
  .hero p.lede{font-size:17px}
  .get-block{margin-top:80px}
  .line9{margin-top:80px}
  .pages{padding-top:80px}
  .docs{padding-top:56px;margin-top:64px}
  .doc section{padding-bottom:72px}
  .doc h2{font-size:23px}
  .top .wrap{height:64px}
  .wt-bar{top:64px}
  .get{grid-template-columns:1fr}
  .hero-split h1{font-size:32px}
  .hero-split .orb{top:150px;right:-44px}
  .outputs .get{grid-template-columns:1fr}
  .outputs,.next{padding:56px 0}
  .get-h{margin-top:48px}
  form.req{padding:16px}
  .send{flex-direction:column-reverse;align-items:stretch}
  .send .btn{justify-content:center}
  .small{padding:48px 0 64px}
  .small h1{font-size:24px}
  .rec-md table{min-width:0}
  .rec-md thead{display:none}
  .rec-md table,.rec-md tbody,.rec-md tr,.rec-md td{display:block;width:auto}
  .rec-md tr{padding:8px 0;border-bottom:1px solid var(--hair)}
  .rec-md tr:last-child{border-bottom:0}
  .rec-md td{border:0;padding:3px 0}
  .rec-md td::before{content:attr(data-label);display:block;font-size:11.5px;color:var(--grey)}
  .rec-md td:empty{display:none}
}
[hidden]{display:none!important}
.small a,.small code{overflow-wrap:anywhere}
.small ol.join{margin:16px 0 0;padding:0}
.small ul.assure{margin:0;padding:12px 14px}
.small .assure li{padding:2px 0 2px 16px}
.small .assure li::before{top:12px}
.small ul.know{margin:0;padding:0}
.small .know li{padding:0 0 0 16px}
label.f:has(.err) ~ #email-note{display:none}