/* ═══════════ Tokens ═══════════ Default palette is warm near black. The warm light palette is the alternate, reached by the system preference or by the masthead toggle. No colour literal appears anywhere outside these three blocks. */ :root{ color-scheme:dark; --oat:#100F0E; /* page ground, warm near black */ --card:#191614; /* panel surface */ --sunk:#221E1B; /* inset wells and tracks */ --ink:#F3EEE5; /* body text, warm off white */ --ash:#A79B8B; /* secondary text */ --rule:#302B26; /* hairlines */ --edge:#6C6158; /* control borders and unfilled tracks */ --model:#B7A8FF; /* the model register */ --model-air:#241F3B; --human:#F2B45E; /* the approving human register */ --human-air:#322313; --machine:#58D3B7; /* controlled code and read only path */ --machine-air:#10302A; --flag:#FF9077; /* mismatch, acceptance blocked */ --flag-air:#391E17; --hi:rgba(255,255,255,.045); --shadow-1:rgba(0,0,0,.44); --shadow-2:rgba(0,0,0,.62); --ring-flag:rgba(255,144,119,.55); --ring-ok:rgba(88,211,183,.42); --glow-flag:rgba(255,144,119,.20); --row-ok:rgba(88,211,183,.07); --row-bad:rgba(255,144,119,.10); --wash-a:rgba(160,100,255,.15); --wash-b:rgba(226,150,50,.15); --wash-c:rgba(60,190,165,.12); --grain-blend:soft-light; --grain-op:.07; --sel-bg:#B7A8FF; --sel-fg:#100F0E; --cta-bg:#EDE7DA; --cta-fg:#17150F; --cta-dim:#5C5445; --cta-btn-bg:#17150F; --cta-btn-fg:#EDE7DA; --cta-btn-hi:#0A0908; --eo:cubic-bezier(.165,.84,.44,1); --ex:cubic-bezier(.19,1,.22,1); --sans:"Figtree",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; --serif:"Instrument Serif",Georgia,"Times New Roman",serif; } /* The page is committed to the dark palette. The light palette below stays in the file and is reachable with data-theme="light" on or , so restoring a system-preference light mode is one block, not a rebuild. */ :root[data-theme="light"],body[data-theme="light"]{ color-scheme:light; --oat:#FBF8F2; --card:#FFFFFF; --sunk:#F5F0E6; --ink:#1D1A16; --ash:#635C50; --rule:#E7DFD0; --edge:#9B9383; --model:#5A3CE8; --model-air:#EFEBFF; --human:#A05704; --human-air:#FBEDD8; --machine:#0A6B60; --machine-air:#E1EFEC; --flag:#BC3722; --flag-air:#FCEAE4; --hi:#FFFFFF; --shadow-1:rgba(60,44,20,.04); --shadow-2:rgba(60,44,20,.30); --ring-flag:rgba(188,55,34,.55); --ring-ok:rgba(10,107,96,.45); --glow-flag:rgba(188,55,34,.34); --row-ok:rgba(10,107,96,.06); --row-bad:#FCEAE4; --wash-a:rgba(90,60,232,.16); --wash-b:rgba(214,138,32,.20); --wash-c:rgba(10,107,96,.13); --grain-blend:multiply; --grain-op:.05; --sel-bg:#5A3CE8; --sel-fg:#FFFFFF; --cta-bg:#1D1A16; --cta-fg:#FBF8F2; --cta-dim:#B8B0A3; --cta-btn-bg:#FBF8F2; --cta-btn-fg:#1D1A16; --cta-btn-hi:#FFFFFF; } /* Explicit dark, and mirrored onto body so an embedding host that also writes data-theme on the root element cannot override the page's own toggle. */ :root[data-theme="dark"],body[data-theme="dark"]{ color-scheme:dark; --oat:#100F0E; /* page ground, warm near black */ --card:#191614; /* panel surface */ --sunk:#221E1B; /* inset wells and tracks */ --ink:#F3EEE5; /* body text, warm off white */ --ash:#A79B8B; /* secondary text */ --rule:#302B26; /* hairlines */ --edge:#6C6158; /* control borders and unfilled tracks */ --model:#B7A8FF; /* the model register */ --model-air:#241F3B; --human:#F2B45E; /* the approving human register */ --human-air:#322313; --machine:#58D3B7; /* controlled code and read only path */ --machine-air:#10302A; --flag:#FF9077; /* mismatch, acceptance blocked */ --flag-air:#391E17; --hi:rgba(255,255,255,.045); --shadow-1:rgba(0,0,0,.44); --shadow-2:rgba(0,0,0,.62); --ring-flag:rgba(255,144,119,.55); --ring-ok:rgba(88,211,183,.42); --glow-flag:rgba(255,144,119,.20); --row-ok:rgba(88,211,183,.07); --row-bad:rgba(255,144,119,.10); --wash-a:rgba(160,100,255,.15); --wash-b:rgba(226,150,50,.15); --wash-c:rgba(60,190,165,.12); --grain-blend:soft-light; --grain-op:.07; --sel-bg:#B7A8FF; --sel-fg:#100F0E; --cta-bg:#EDE7DA; --cta-fg:#17150F; --cta-dim:#5C5445; --cta-btn-bg:#17150F; --cta-btn-fg:#EDE7DA; --cta-btn-hi:#0A0908; --eo:cubic-bezier(.165,.84,.44,1); --ex:cubic-bezier(.19,1,.22,1); --sans:"Figtree",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; --serif:"Instrument Serif",Georgia,"Times New Roman",serif; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;background:var(--oat)} body{ margin:0;background:var(--oat);color:var(--ink); font:400 15.5px/1.6 var(--sans); overflow-x:hidden;-webkit-font-smoothing:antialiased; } h1,h2,h3,h4,p,ol,ul,figure{margin:0} ol,ul{padding:0;list-style:none} a{color:inherit} :focus-visible{outline:2px solid var(--model);outline-offset:3px;border-radius:4px} ::selection{background:var(--sel-bg);color:var(--sel-fg)} .vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip{position:absolute;left:-9999px;top:0;z-index:40;padding:10px 16px;border-radius:0 0 10px 0;background:var(--ink);color:var(--oat);font:600 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;text-decoration:none} .skip:focus{left:0;top:0} /* the one numeric utility: comparable figures line up */ .num{font-variant-numeric:tabular-nums} /* ═══════════ Ambient ground ═══════════ */ .wash{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden} .wash i{position:absolute;display:block;border-radius:50%;filter:blur(70px)} .wash i:nth-child(1){width:min(70vw,900px);height:min(48vw,620px);left:-14vw;top:-16vw;background:radial-gradient(closest-side,var(--wash-a),transparent 70%);animation:drift1 48s ease-in-out infinite alternate} .wash i:nth-child(2){width:min(60vw,760px);height:min(40vw,520px);right:-12vw;top:2vw;background:radial-gradient(closest-side,var(--wash-b),transparent 70%);animation:drift2 57s ease-in-out infinite alternate} .wash i:nth-child(3){width:min(56vw,700px);height:min(36vw,460px);left:28vw;top:52vw;background:radial-gradient(closest-side,var(--wash-c),transparent 70%)} @keyframes drift1{to{transform:translate3d(5%,4%,0) scale(1.08)}} @keyframes drift2{to{transform:translate3d(-6%,5%,0) scale(1.06)}} .grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:var(--grain-op);mix-blend-mode:var(--grain-blend); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")} /* ═══════════ Shell ═══════════ */ .wrap{position:relative;z-index:2;max-width:1320px;margin:0 auto;padding:0 18px} @media(min-width:760px){.wrap{padding:0 32px}} main:focus{outline:0} /* ═══════════ Masthead ═══════════ */ .mast{position:relative;z-index:12} .mast-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px;min-height:62px;padding:11px 0} .lock{display:inline-flex;align-items:center;gap:.55em;text-decoration:none;font-weight:700;font-size:18px;letter-spacing:-.028em} .mark{width:19px;height:19px;fill:currentColor;display:block;flex:none} .mast-r{display:flex;align-items:center;gap:10px} button.chip{cursor:pointer;transition:color .3s var(--eo),border-color .3s var(--eo)} button.chip:hover{color:var(--ink);border-color:var(--ink)} .mail{border-radius:999px;padding:9px 16px;background:var(--ink);color:var(--oat);text-decoration:none;font-weight:600;font-size:13.5px;white-space:nowrap;transition:transform .3s var(--eo),background .3s var(--eo),color .3s var(--eo)} .mail:hover{background:var(--model);color:var(--oat);transform:translateY(-1px)} /* ═══════════ Hero copy ═══════════ */ .hero{padding:10px 0 0} .kick{font-family:var(--serif);font-style:italic;font-size:clamp(18px,2.1vw,24px);color:var(--ash);letter-spacing:-.01em} h1{font-size:clamp(33px,5.3vw,63px);line-height:1.03;letter-spacing:-.036em;font-weight:600;max-width:17ch;margin:.12em 0 0;text-wrap:balance} .sub{margin-top:14px;max-width:60ch;color:var(--ink);font-size:clamp(15px,1.25vw,17.5px);line-height:1.58} /* two tone: the claim in full ink, the elaboration in the same paragraph at reduced weight */ .dim{color:var(--ash)} .hero-top{display:grid;gap:18px;align-items:end} @media(min-width:1000px){.hero-top{grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);gap:48px}} /* ═══════════ Console ═══════════ */ .console{ position:relative;margin:22px 0 0;border-radius:22px;background:var(--card); border:1px solid var(--rule); box-shadow:0 1px 1px var(--shadow-1),0 18px 44px -22px var(--shadow-2),inset 0 1px 0 var(--hi); transition:box-shadow .5s var(--eo),border-color .5s var(--eo); } .console::after{ content:"";position:absolute;inset:-1px;border-radius:23px;pointer-events:none; border:1px solid transparent;transition:border-color .45s var(--eo); } .console[data-state="blocked"]::after{border-color:var(--ring-flag)} .console[data-state="blocked"]{box-shadow:0 1px 1px var(--shadow-1),0 18px 44px -22px var(--glow-flag),inset 0 1px 0 var(--hi)} .console[data-state="accepted"]::after{border-color:var(--ring-ok)} .chead{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:13px 16px} @media(min-width:760px){.chead{padding:14px 22px}} .cid{display:flex;align-items:center;gap:9px;font:600 11px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase} .led{width:8px;height:8px;border-radius:50%;background:var(--ash);flex:none;transition:background .3s var(--eo)} .console[data-run="1"] .led{background:var(--model);animation:led 2.4s ease-in-out infinite} .console[data-state="blocked"] .led{background:var(--flag);animation:none} .console[data-state="accepted"] .led{background:var(--machine);animation:none} @keyframes led{0%,100%{opacity:1}50%{opacity:.3}} .prov{font:400 11.5px/1.45 var(--sans);color:var(--ash)} .chead .grow{flex:1 1 auto;min-width:0} .state{border-radius:999px;padding:6px 12px;font:600 10.5px/1 var(--sans);letter-spacing:.11em;text-transform:uppercase;background:var(--sunk);color:var(--ash);white-space:nowrap;transition:background .35s var(--eo),color .35s var(--eo)} .state[data-k="run"]{background:var(--model-air);color:var(--model)} .state[data-k="blocked"]{background:var(--flag-air);color:var(--flag)} .state[data-k="ok"]{background:var(--machine-air);color:var(--machine)} .clock{font:400 12px/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--ash);min-width:5.6em;text-align:right} /* the one determinate indicator for the whole loop */ .runbar{height:3px;background:var(--edge)} .runbar i{display:block;height:100%;width:0;background:var(--model);transition:width .6s linear,background .4s var(--eo)} .console[data-state="blocked"] .runbar i{background:var(--flag)} .console[data-state="accepted"] .runbar i{background:var(--machine)} .cbody{display:grid;gap:0} @media(min-width:980px){.cbody{grid-template-columns:335px minmax(0,1fr)}} .side{padding:18px 16px;border-bottom:1px solid var(--rule);display:grid;gap:14px;align-content:start} @media(min-width:760px){.side{padding:20px 22px}} @media(min-width:980px){.side{border-bottom:0;border-right:1px solid var(--rule)}} .plab{font:600 10.5px/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--ash);margin-bottom:9px} .brief{border-radius:14px;background:var(--sunk);padding:15px 16px} .brief li{font-family:var(--serif);font-size:19px;line-height:1.34;letter-spacing:-.005em;margin-bottom:7px} .brief li:last-child{margin-bottom:0} .brief li::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--human);vertical-align:.32em;margin-right:9px} /* the audit band. Every line is a checkable claim with a count or a name. */ .think{border-radius:14px;border:1px solid var(--rule);padding:13px 14px;background:var(--card);transition:border-color .4s var(--eo),background .4s var(--eo)} .think[data-on="1"]{border-color:var(--model);background:var(--model-air)} .think[data-reg="human"] .badge{color:var(--human);background:var(--human-air)} .think[data-reg="human"] .step{color:var(--human)} .think[data-reg="code"] .badge{color:var(--machine);background:var(--machine-air)} .think[data-reg="code"] .step{color:var(--machine)} .think-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap} .badge{display:inline-flex;align-items:center;border-radius:999px;padding:4px 10px;font:600 10px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;background:var(--sunk);color:var(--ash)} .think[data-on="1"] .badge{background:var(--card);color:var(--model)} .think-t{font-weight:600;font-size:14px;letter-spacing:-.012em;color:var(--ink)} .steps{position:relative;height:34px;margin-top:8px} .step{position:absolute;inset:0;font-size:13.2px;line-height:1.32;color:var(--model);opacity:0;transform:translateY(4px);transition:opacity .35s var(--eo),transform .35s var(--eo)} .step.on{opacity:1;transform:none} .step.off{opacity:0;transform:translateY(-4px)} .think[data-on="0"] .step{color:var(--ash)} .think[data-on="0"][data-reg="human"] .step{color:var(--human)} .think[data-on="0"][data-reg="code"] .step{color:var(--machine)} .stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .stat{border-radius:12px;background:var(--sunk);padding:10px 11px;min-width:0} .stat b{display:block;font:600 16px/1.15 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:-.02em;transition:color .3s var(--eo)} .stat.hot b{color:var(--flag)} .stat.good b{color:var(--machine)} .stat em{display:block;margin-top:4px;font-style:normal;font-size:10.5px;line-height:1.25;color:var(--ash);letter-spacing:.01em} /* ═══════════ The run log ═══════════ */ .logwrap{position:relative;min-width:0} .log{ position:relative;height:clamp(320px,46vh,438px);overflow-y:auto;overflow-x:hidden; padding:18px 16px 40px; /* an alpha mask: the stop colour is only ever fully opaque, and it is a token */ -webkit-mask-image:linear-gradient(to bottom,transparent 0,var(--ink) 12px,var(--ink) calc(100% - 30px),transparent 100%); mask-image:linear-gradient(to bottom,transparent 0,var(--ink) 12px,var(--ink) calc(100% - 30px),transparent 100%); } @media(min-width:760px){.log{padding:20px 22px 44px}} .log::-webkit-scrollbar{width:8px} .log::-webkit-scrollbar-thumb{background:var(--rule);border-radius:8px} .spine{position:absolute;left:23px;top:14px;bottom:14px;width:1px;background:var(--rule)} @media(min-width:760px){.spine{left:29px}} #blocks{position:relative;padding-left:26px} @media(min-width:760px){#blocks{padding-left:30px}} .blk{position:relative;margin-bottom:20px;opacity:0;transform:translateY(8px); transition:opacity .45s var(--eo),transform .55s var(--ex)} .blk.in{opacity:1;transform:none} .node{position:absolute;left:-30px;top:5px;width:9px;height:9px;border-radius:50%;background:var(--card);border:1.5px solid var(--rule)} @media(min-width:760px){.node{left:-34px}} .blk[data-reg="model"] .node{border-color:var(--model);background:var(--model)} .blk[data-reg="human"] .node{border-color:var(--human);background:var(--human)} .blk[data-reg="code"] .node{border-color:var(--machine);background:var(--machine)} .blk[data-reg="target"] .node{border-color:var(--machine);background:var(--card)} .blk[data-reg="flag"] .node{border-color:var(--flag);background:var(--flag)} .bh{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 9px;margin-bottom:9px} .bn{font:600 10.5px/1 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:.12em;color:var(--ash)} .tag{border-radius:999px;padding:3.5px 9px;font:600 9.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;background:var(--sunk);color:var(--ash)} .blk[data-reg="model"] .tag{background:var(--model-air);color:var(--model)} .blk[data-reg="human"] .tag{background:var(--human-air);color:var(--human)} .blk[data-reg="code"] .tag,.blk[data-reg="target"] .tag{background:var(--machine-air);color:var(--machine)} .blk[data-reg="flag"] .tag{background:var(--flag-air);color:var(--flag)} .bh h3{font-size:15px;font-weight:600;letter-spacing:-.016em} .bb{border-radius:13px;border:1px solid var(--rule);background:var(--card);overflow:hidden} .blk[data-reg="flag"] .bb{border-color:var(--ring-flag)} .hd{display:grid;gap:10px;padding:8px 13px;background:var(--sunk);font:600 9.5px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--ash)} .r{display:grid;gap:10px;padding:9px 13px;border-top:1px solid var(--rule);align-items:center;font-size:13.5px; opacity:0;transform:translateY(5px);transition:opacity .3s var(--eo),transform .35s var(--ex),background .3s var(--eo)} .r.in{opacity:1;transform:none} .hd+.r{border-top:0} .k{color:var(--ash);min-width:0;overflow-wrap:anywhere} .v{font-weight:500;min-width:0;overflow-wrap:anywhere} .v.num{font-weight:400} .v.human{color:var(--human)} .v.ok{color:var(--machine)} .v.bad{color:var(--flag)} .v.sign{color:var(--human);font-weight:600} .typing::after{content:"";display:inline-block;width:.52em;height:1.02em;margin-left:1px;background:var(--model);vertical-align:-.15em;animation:caret .9s steps(1) infinite} @keyframes caret{0%,49%{opacity:1}50%,100%{opacity:0}} .g2 .hd,.g2 .r{grid-template-columns:minmax(88px,.72fr) minmax(0,1.28fr)} .gpack .hd,.gpack .r{grid-template-columns:minmax(146px,1fr) minmax(0,1fr)} .g3 .hd,.g3 .r{grid-template-columns:minmax(0,1fr) 96px 74px} .g5 .hd,.g5 .r{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) 74px} .prog{height:5px;border-radius:99px;background:var(--edge);overflow:hidden} .prog i{display:block;height:100%;width:0;border-radius:99px;background:var(--machine);transition:width .55s linear} .st{font:600 9.5px/1 var(--sans);letter-spacing:.11em;text-transform:uppercase;color:var(--ash);text-align:right} .st[data-s="applied"],.st[data-s="observed"],.st[data-s="match"]{color:var(--machine)} .st[data-s="fail"]{color:var(--flag)} .r.failrow{background:var(--row-bad)} .r.matchrow{background:var(--row-ok)} .g4 .hd{grid-template-columns:minmax(0,1fr) 66px} .g4 .r{grid-template-columns:minmax(0,1fr) 66px;gap:2px 10px} .g4 .r .k{grid-column:1} .g4 .r .cmp{grid-column:1} .g4 .r .st{grid-column:2;grid-row:1/3;align-self:center} .g4 .hd span:nth-child(2){text-align:right} @media(min-width:640px){ .g4 .hd,.g4 .r{grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr) 66px} .g4 .r .cmp{grid-column:2} .g4 .r .st{grid-column:3;grid-row:auto} .g4 .hd span:nth-child(2){text-align:left} .g4 .hd span:nth-child(3){text-align:right} } .cmp{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;font-size:13px} .cmp b{font-weight:500;font-variant-numeric:tabular-nums} .cmp .vs{font:600 9.5px/1 var(--sans);letter-spacing:.11em;text-transform:uppercase;color:var(--ash)} .r[data-s="fail"] .cmp b:last-child{color:var(--flag)} .foot-r{display:flex;flex-wrap:wrap;gap:8px 14px;justify-content:space-between;align-items:center;padding:10px 13px;border-top:1px solid var(--rule);background:var(--sunk);font:400 12px/1.45 var(--sans);color:var(--ash)} .foot-r b{font-weight:600;color:var(--ink)} .foot-r b[data-k="flag"]{color:var(--flag)} .foot-r b[data-k="ok"]{color:var(--machine)} /* ═══════════ Console footer rail ═══════════ */ .cfoot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-top:1px solid var(--rule)} @media(min-width:760px){.cfoot{padding:13px 22px}} .rail{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;min-width:0} .rail li{display:flex;align-items:center;gap:7px;font:600 10px/1 var(--sans);letter-spacing:.11em;text-transform:uppercase;color:var(--ash);transition:color .3s var(--eo)} .pip{display:block;width:6px;height:6px;border-radius:99px;background:var(--edge);transition:width .3s cubic-bezier(.86,0,.07,1),background .3s var(--eo)} .rail li[data-s="now"]{color:var(--ink)} .rail li[data-s="now"] .pip{width:20px;background:var(--model)} .rail li[data-s="done"]{color:var(--ink)} .rail li[data-s="done"] .pip{width:20px;background:var(--machine)} .rail li[data-s="fail"]{color:var(--ink)} .rail li[data-s="fail"] .pip{width:20px;background:var(--flag)} /* found a mismatch and it was corrected: the record survives, the block does not */ .rail li[data-s="fixed"]{color:var(--ink)} .rail li[data-s="fixed"] .pip{width:20px;background:linear-gradient(90deg,var(--flag) 0 7px,var(--machine) 7px)} .btn{display:inline-flex;align-items:center;gap:9px;border-radius:999px;border:1px solid var(--edge);background:var(--card);color:var(--ink); padding:9px 15px;font:600 12.5px/1 var(--sans);cursor:pointer;white-space:nowrap; transition:background .3s var(--eo),border-color .3s var(--eo),transform .3s var(--eo)} .btn:hover{border-color:var(--ink);transform:translateY(-1px)} .btn:active{transform:scale(.98)} .btn .arr{position:relative;display:block;width:13px;height:13px;overflow:hidden;flex:none} .btn .arr svg{position:absolute;top:0;left:0;width:13px;height:13px;fill:currentColor;transition:transform .3s var(--ex)} .btn .arr svg+svg{transform:translateX(-100%)} .btn:hover .arr svg{transform:translateX(100%)} .btn:hover .arr svg+svg{transform:translateX(0)} .figcap{margin-top:13px;font-size:12.5px;line-height:1.6;color:var(--ash);max-width:96ch} /* ═══════════ Sections ═══════════ */ .sec{padding:64px 0 0} @media(min-width:960px){.sec{padding:92px 0 0}} .eyebrow{font:600 10.5px/1 var(--sans);letter-spacing:.17em;text-transform:uppercase;color:var(--ash)} h2{font-size:clamp(25px,3.2vw,40px);line-height:1.08;letter-spacing:-.03em;font-weight:600;max-width:22ch;margin-top:12px;text-wrap:balance} .lede{margin-top:14px;max-width:56ch;color:var(--ash);font-size:16px} /* recognition, stated as facts about the reader's status quo */ .recog{display:grid;gap:14px;margin-top:30px} @media(min-width:880px){.recog{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 28px}} .recog li{border-left:2px solid var(--flag);padding:2px 0 2px 16px;font-size:15.5px;line-height:1.55;color:var(--ink);max-width:52ch} .recog b{font-weight:600} .trio{display:grid;gap:14px;margin-top:30px} @media(min-width:820px){.trio{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}} .role{border-radius:18px;padding:22px 20px;border:1px solid var(--rule);background:var(--card);box-shadow:0 1px 1px var(--shadow-1),0 14px 30px -22px var(--shadow-2)} .role .tag{display:inline-block;margin-bottom:14px} .role h3{font-size:19px;font-weight:600;letter-spacing:-.022em;line-height:1.2} .role p{margin-top:9px;color:var(--ash);font-size:14.5px;line-height:1.58} .role[data-reg="human"] .tag{background:var(--human-air);color:var(--human)} .role[data-reg="code"] .tag{background:var(--machine-air);color:var(--machine)} .mechline{margin-top:20px;border-radius:14px;background:var(--card);border:1px solid var(--rule);padding:16px 18px;display:grid;gap:8px} @media(min-width:900px){.mechline{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}} .mechline div{font-size:13.5px;line-height:1.5;color:var(--ash)} .mechline b{display:block;font:600 10px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--ink);margin-bottom:6px} .two{display:grid;gap:22px;margin-top:28px} @media(min-width:900px){.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}} .card{border-radius:18px;border:1px solid var(--rule);background:var(--card);overflow:hidden;box-shadow:0 1px 1px var(--shadow-1),0 14px 30px -22px var(--shadow-2)} .card .hd,.card .r{grid-template-columns:minmax(88px,.8fr) minmax(0,1.2fr)} .card .r{opacity:1;transform:none} .list{display:grid;gap:9px;margin-top:14px} .list li{position:relative;padding-left:20px;font-size:14.5px;color:var(--ash);line-height:1.5} .list li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:1.5px;background:var(--model)} .cta{margin-top:34px;border-radius:22px;padding:30px 24px;background:var(--cta-bg);color:var(--cta-fg);display:grid;gap:18px} @media(min-width:820px){.cta{padding:40px 38px;grid-template-columns:minmax(0,1.2fr) auto;align-items:center;gap:34px}} .cta h3{font-size:clamp(22px,2.6vw,31px);font-weight:600;letter-spacing:-.028em;line-height:1.14;max-width:22ch} .cta p{margin-top:10px;color:var(--cta-dim);font-size:15px;max-width:48ch} .cta a.mail{background:var(--cta-btn-bg);color:var(--cta-btn-fg);padding:13px 22px;font-size:15px} .cta a.mail:hover{background:var(--cta-btn-hi);color:var(--cta-btn-fg)} .addr{margin-top:8px;font:400 13.5px/1 var(--sans);color:var(--cta-dim)} footer{margin-top:58px;padding:0 0 40px} .fr{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;border-top:1px solid var(--rule);padding-top:24px} .fine{font:400 12.5px/1.6 var(--sans);color:var(--ash);max-width:88ch} /* ═══════════ Reduced motion ═══════════ The finished, accepted state is presented at once and in full. */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} .wash i{animation:none!important} .typing::after{display:none} .log{height:auto;max-height:none;overflow:visible;-webkit-mask-image:none;mask-image:none} .blk{opacity:1;transform:none} .r{opacity:1;transform:none} } .mail.copied{background:var(--machine);color:var(--oat)}