/* vas.sh preview v3 · parts: products, research, chippy, book, footer, notebook, notes */

/* products bento */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(15.5rem,auto);gap:14px;grid-auto-flow:dense}
.tile{position:relative;isolation:isolate;border-radius:24px;padding:1.2rem 1.25rem 1.25rem;display:flex;flex-direction:column;gap:.45rem;overflow:hidden;background:var(--white);border:1px solid var(--rule);transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .4s}
.tile::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),rgba(196,242,58,.32),transparent 62%);opacity:0;transition:opacity .4s}
.tile:hover{transform:translateY(-5px);border-color:var(--rule-2);box-shadow:0 34px 60px -32px rgba(21,22,19,.35)}
.tile:hover::after{opacity:1}
.tile.big{grid-column:span 2;grid-row:span 2}
.tile.wide{grid-column:span 2}
.tile .art{flex:1;min-height:6.5rem;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-bottom:.4rem}
.tile .top{display:flex;justify-content:space-between;align-items:center;gap:.6rem}
.tile h3{font-size:1.14rem}
.tile a.stretch{color:inherit;text-decoration:none}
.tile a.stretch::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.tile:has(a.stretch){cursor:pointer}
.tile.big h3{font-size:clamp(1.7rem,2.8vw,2.4rem);font-weight:760;font-stretch:114%;letter-spacing:-.035em}
.tile p{margin:0;font-size:.87rem;line-height:1.45;color:var(--slate)}
.tile.big p{font-size:1rem;max-width:36ch}
.tile .sub{font:500 .62rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.tile.paused .art{opacity:.5;filter:grayscale(1)}
.tile.dead{background:rgba(255,255,255,.45)}
.tile.dead h3{text-decoration:line-through;text-decoration-color:var(--slate);color:var(--slate)}
@media (max-width:980px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.bento{grid-template-columns:minmax(0,1fr)}.tile.big,.tile.wide{grid-column:auto;grid-row:auto}}

/* tile art */
.a-net{width:100%}
.a-net svg{width:100%;height:auto;max-height:250px;overflow:visible}
.a-net line{stroke:var(--ink);stroke-opacity:.13;stroke-width:1.2}
.a-net line.f{stroke-opacity:.7;stroke-dasharray:3 9;animation:dash 1.1s linear infinite}
@keyframes dash{to{stroke-dashoffset:-24}}
.a-net circle{fill:#fff;stroke:var(--ink);stroke-opacity:.35;stroke-width:1.2;transform-box:fill-box;transform-origin:center;animation:pop 2.6s var(--ease) infinite;animation-delay:var(--dl,0s)}
.a-net circle.hub{fill:var(--lime);stroke:var(--ink);stroke-opacity:1;stroke-width:1.5}
.a-net circle.ring2{fill:none;stroke:var(--lime-deep);stroke-opacity:1;stroke-width:1.5;animation:ripple 2.6s ease-out infinite}
.a-net text{font:500 8.5px var(--f-mono);fill:var(--slate);letter-spacing:.1em}
@keyframes pop{50%{transform:scale(1.22)}}
.a-wave{display:flex;align-items:center;gap:4px;height:58px}
.a-wave i{width:4px;height:var(--h);border-radius:3px;background:var(--ink);animation:wave 1.1s ease-in-out infinite;animation-delay:calc(var(--i)*-85ms)}
.a-wave i:nth-child(4n+2){background:var(--lime-deep)}
@keyframes wave{50%{transform:scaleY(.3);opacity:.5}}
.a-lines{display:grid;gap:6px;width:68%;margin-top:12px}
.a-lines i{height:5px;border-radius:3px;background:var(--ink);opacity:.14;transform-origin:left;animation:type 3.4s var(--ease) infinite;animation-delay:var(--dl,0s)}
@keyframes type{0%{transform:scaleX(0)}40%,100%{transform:scaleX(1)}}
.a-braid svg{width:100%;height:84px}
.a-braid path{fill:none;stroke-width:3;stroke-linecap:round;animation:braid 3.4s linear infinite}
.a-braid g:nth-child(1) path{stroke:var(--ink)}
.a-braid g:nth-child(2) path{stroke:var(--slate-2)}
.a-braid g:nth-child(3) path{stroke:var(--lime-deep)}
@keyframes braid{to{transform:translateX(-100px)}}
.a-chat{display:flex;flex-direction:column;gap:6px;width:86%}
.a-chat i{display:block;font:500 .64rem/22px var(--f-mono);font-style:normal;padding:0 .65rem;border-radius:12px;white-space:nowrap;opacity:0;animation:chat 6s var(--ease) infinite;animation-delay:var(--dl,0s)}
.a-chat i.in{align-self:flex-start;background:var(--porcelain);border:1px solid var(--rule);color:var(--ink)}
.a-chat i.out{align-self:flex-end;background:var(--ink);color:var(--lime)}
@keyframes chat{0%{opacity:0;transform:translateY(8px) scale(.96)}8%,82%{opacity:1;transform:none}94%,100%{opacity:0}}
.a-ring svg{width:96px;height:96px}
.a-ring .bg{fill:none;stroke:var(--ink);stroke-opacity:.08;stroke-width:8}
.a-ring .fg{fill:none;stroke:var(--lime-deep);stroke-width:8;stroke-linecap:round;stroke-dasharray:251;stroke-dashoffset:251;transform:rotate(-90deg);transform-origin:50% 50%;animation:ringfill 4.2s var(--ease) infinite}
.a-ring text{font:500 9px var(--f-mono);fill:var(--slate);letter-spacing:.12em}
@keyframes ringfill{0%{stroke-dashoffset:251}55%,82%{stroke-dashoffset:40}100%{stroke-dashoffset:251}}
.a-swap{display:flex;align-items:center;gap:10px}
.a-swap .b{position:relative;width:86px;height:32px;border-radius:16px;overflow:hidden;background:var(--ink);color:#fff}
.a-swap .b.r{background:var(--lime);color:var(--ink)}
.a-swap .b span{position:absolute;inset:0;display:grid;place-items:center;font:600 .78rem/1 var(--f-sans);opacity:0;animation:words 7.5s var(--ease) infinite}
.a-swap .b span:nth-child(2){animation-delay:2.5s}.a-swap .b span:nth-child(3){animation-delay:5s}
.a-swap svg{width:22px;height:22px;color:var(--slate);animation:spin 7.5s var(--ease-io) infinite}
@keyframes words{0%{transform:translateY(100%);opacity:0}5%,30%{transform:none;opacity:1}35%,100%{transform:translateY(-100%);opacity:0}}
.a-loop svg{width:104px;height:104px}
.a-loop .arc{fill:none;stroke:var(--lime-deep);stroke-width:3;stroke-linecap:round;stroke-dasharray:58 20;transform-origin:52px 52px;animation:spin 9s linear infinite}
.a-loop .arc2{fill:none;stroke:var(--ink);stroke-opacity:.2;stroke-width:1.2;stroke-dasharray:2 6;transform-origin:52px 52px;animation:spin 14s linear infinite reverse}
.a-loop .leaf{fill:var(--ink);transform-origin:52px 52px;animation:pop 3s var(--ease) infinite}
.a-grid{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:8px;width:100%}
.a-grid i{aspect-ratio:1;border-radius:10px;background:var(--ink);opacity:.07;animation:app 4.6s var(--ease) infinite;animation-delay:calc(var(--i)*.24s)}
@keyframes app{0%,8%{opacity:.07;transform:scale(.88)}20%,70%{opacity:1;background:var(--lime);box-shadow:inset 0 0 0 1.5px var(--ink);transform:none}86%,100%{opacity:.07;transform:scale(.88)}}
.a-mic{position:relative;width:92px;height:92px;display:grid;place-items:center}
.a-mic i{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--ink);opacity:0;animation:ripple 2.7s ease-out infinite;animation-delay:calc(var(--i)*.9s)}
.a-mic b{width:22px;height:34px;border-radius:12px;background:var(--ink)}
.a-panes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:88%}
.a-panes i{position:relative;height:36px;border-radius:7px;background:var(--ink);overflow:hidden}
.a-panes i::before{content:"";position:absolute;left:6px;top:7px;width:var(--w,60%);height:3px;border-radius:2px;background:rgba(255,255,255,.35);box-shadow:0 7px 0 rgba(255,255,255,.2),0 14px 0 rgba(255,255,255,.12)}
.a-panes i::after{content:"";position:absolute;left:6px;bottom:6px;width:6px;height:3px;background:var(--lime);animation:blink 1s steps(1) infinite;animation-delay:var(--dl,0s)}
.a-flat svg{width:100%;height:60px}
.a-flat path{fill:none;stroke:var(--slate);stroke-width:2;stroke-dasharray:440;stroke-dashoffset:440;animation:flat 5s linear infinite}
@keyframes flat{to{stroke-dashoffset:0}}

/* research */
.helix-stage{position:relative;height:clamp(300px,36vw,440px);border-radius:30px;border:1px solid var(--rule);background:radial-gradient(var(--rule) 1px,transparent 1.2px) 0 0/22px 22px,var(--white);overflow:hidden}
.helix-stage canvas{position:absolute;inset:0;width:100%;height:100%}
.gap-tag{position:absolute;left:0;top:0;transform:translate(calc(var(--x,0px) - 50%),calc(var(--y,0px) - 100%));display:flex;flex-direction:column;align-items:center;pointer-events:none;opacity:0;transition:opacity .8s}
.ready .gap-tag{opacity:1}
.gap-tag .hand{font-size:1.45rem;white-space:nowrap}
.gap-tag svg{width:22px;height:30px;color:var(--ink-2);overflow:visible}
.rcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}
.rcard{position:relative;border-radius:22px;padding:1.4rem;display:flex;flex-direction:column;gap:.9rem;background:var(--white);border:1px solid var(--rule);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.rcard:hover{transform:translateY(-4px);box-shadow:0 30px 56px -34px rgba(21,22,19,.35)}
.rcard .tag{display:flex;justify-content:space-between;align-items:center;gap:.5rem;font:500 .62rem/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.rcard h3{font-size:1.16rem}
.rcard dl{margin:0;display:grid;grid-template-columns:4.4rem minmax(0,1fr);gap:.5rem .8rem;font-size:.9rem;line-height:1.45}
.rcard dt{font:500 .6rem/1.9 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.rcard dd{margin:0}
.rcard.secret{background:var(--ink);border-color:var(--ink);color:#fff}
.rcard.secret h3{color:#fff}
.rcard.secret .tag{color:rgba(255,255,255,.6)}
.rcard.secret .pill{border-color:var(--lime);color:var(--lime)}
.rcard.secret p{margin:0;color:rgba(255,255,255,.66);font-size:.92rem}
.redact{display:grid;gap:.55rem;margin:.2rem 0}
.redact i{position:relative;display:block;height:.82rem;width:var(--w,80%);border-radius:4px;background:rgba(255,255,255,.14);overflow:hidden}
.redact i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(196,242,58,.55),transparent);transform:translateX(-100%);animation:redact 2.8s var(--ease-io) infinite;animation-delay:var(--dl,0s)}
@keyframes redact{60%,100%{transform:translateX(100%)}}
@media (max-width:980px){.rcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.rcards{grid-template-columns:minmax(0,1fr)}}

/* chippy and the fleet */
.swarm-stage{position:relative;height:clamp(440px,46vw,600px);border-radius:32px;border:1px solid var(--rule);background:radial-gradient(var(--rule) 1px,transparent 1.2px) 0 0/22px 22px,var(--white);overflow:hidden}
.swarm-stage canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y}
.nameplate{position:absolute;left:0;top:0;transform:translate(calc(var(--x,0px) - 50%),calc(var(--y,0px) - 100%));display:flex;align-items:center;gap:.4rem;font:500 .68rem/1 var(--f-mono);letter-spacing:.06em;padding:.42rem .62rem;border-radius:999px;background:var(--ink);color:#fff;pointer-events:none;opacity:0;transition:opacity .6s;white-space:nowrap}
.nameplate i{width:6px;height:6px;border-radius:50%;background:var(--lime);animation:blink 1.6s infinite}
.ready .nameplate{opacity:1}
.swarm-note{position:absolute;right:clamp(1rem,3vw,2.2rem);top:clamp(1rem,2.6vw,1.8rem);display:flex;flex-direction:column;align-items:flex-end;gap:.1rem;max-width:15rem;text-align:right;pointer-events:none}
.swarm-note .hand{font-size:1.45rem;transform:rotate(-2deg)}
.swarm-note svg{width:56px;height:48px;margin-right:4.5rem;color:var(--ink-2);overflow:visible}
.swarm-log{position:absolute;left:1rem;bottom:1rem;right:1rem;display:flex;align-items:center;gap:.6rem;font:500 .74rem/1.3 var(--f-mono);color:var(--ink-2);pointer-events:none;min-width:0}
.swarm-log b{flex:none;font-weight:500;padding:.38rem .6rem;border-radius:999px;background:var(--lime);box-shadow:inset 0 0 0 1px var(--ink);color:var(--ink)}
.swarm-log span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.swarm-log span::after{content:"";display:inline-block;width:.5em;height:1em;margin-left:2px;background:var(--ink);vertical-align:-.15em;animation:blink 1s steps(1) infinite}
@media (max-width:700px){.swarm-note{max-width:11rem}.swarm-note .hand{font-size:1.25rem}.swarm-note svg{display:none}}
.oss{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:1.6rem}
.oss-k{font:500 .66rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin-right:.5rem}
.oss a{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem .85rem;border-radius:999px;background:var(--white);border:1px solid var(--rule);text-decoration:none;font-size:.88rem;font-weight:600;font-stretch:104%;transition:background .3s,color .3s,border-color .3s,transform .45s var(--ease)}
.oss a em{font:500 .68rem/1 var(--f-mono);font-style:normal;color:var(--slate)}
.oss a:hover{background:var(--ink);border-color:var(--ink);color:#fff;transform:translateY(-2px)}
.oss a:hover em{color:var(--lime)}

/* book */
.book-panel{position:relative;isolation:isolate;overflow:hidden;border-radius:36px;padding:clamp(2.2rem,6vw,5rem);background:var(--lime);color:var(--ink)}
.book-panel::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(420px circle at var(--mx,70%) var(--my,30%),rgba(255,255,255,.55),transparent 65%)}
.book-panel::after{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(rgba(21,22,19,.16) 1px,transparent 1.3px) 0 0/22px 22px}
.book-panel .eyebrow{color:var(--ink-2)}
.book-panel .eyebrow::before{background:#fff}
.book-panel h2{max-width:13ch}
.book-panel .lede{color:var(--ink-2);margin-top:1.2rem}
.book-panel .btn:not(.primary):hover{background:var(--ink);color:var(--lime)}
.minis{position:absolute;right:clamp(1rem,6vw,5rem);top:50%;width:min(34vw,320px);height:300px;transform:translateY(-50%);pointer-events:none;z-index:-1}
.minis i{position:absolute;width:var(--s,56px);height:var(--s,56px);border-radius:16px;background:#fff;box-shadow:0 18px 30px -16px rgba(21,22,19,.45),inset 0 -3px 0 rgba(21,22,19,.08);left:var(--x);top:var(--y);animation:mini 7s ease-in-out infinite;animation-delay:var(--dl,0s)}
.minis i::after{content:"";position:absolute;left:28%;right:28%;top:40%;height:14%;border-radius:3px;background:var(--ink)}
.minis i.c{--s:92px;border-radius:26px;background:var(--ink)}
.minis i.c::before,.minis i.c::after{content:"";position:absolute;top:36%;width:9px;height:18px;border-radius:5px;background:var(--lime);left:32%;right:auto}
.minis i.c::after{left:auto;right:32%}
@keyframes mini{50%{transform:translateY(-14px) rotate(6deg)}}
@media (max-width:820px){.minis{display:none}}

/* footer */
.foot{position:relative;background:var(--porcelain);border-top:1px solid var(--rule);padding:clamp(3rem,6vw,5rem) 0 2.4rem;overflow:hidden}
.foot-word{display:flex;align-items:baseline;font-size:clamp(4.4rem,17vw,15rem);line-height:.8;font-weight:800;letter-spacing:-.06em;user-select:none;-webkit-user-select:none}
.foot-word span{font-stretch:var(--fs,110%);font-weight:var(--fw,780);transition:font-stretch .6s var(--ease),font-weight .6s var(--ease)}
.foot-word .dot{width:.2em;height:.2em;animation:dotPulseLg 2.6s ease-out infinite}
@keyframes dotPulseLg{0%{box-shadow:inset 0 0 0 .012em var(--ink),0 0 0 0 rgba(196,242,58,.85)}70%{box-shadow:inset 0 0 0 .012em var(--ink),0 0 0 .09em rgba(196,242,58,0)}100%{box-shadow:inset 0 0 0 .012em var(--ink),0 0 0 0 rgba(196,242,58,0)}}
.foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem;margin-top:2.6rem;max-width:60rem}
.foot-cols b{display:block;font:500 .66rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin-bottom:.8rem}
.foot-cols a{display:block;width:fit-content;text-decoration:none;padding:.2rem 0;background:linear-gradient(var(--lime),var(--lime)) no-repeat 0 85%/0% 35%;transition:background-size .45s var(--ease)}
.foot-cols a:hover{background-size:100% 35%}
.foot-base{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:3rem;padding-top:1.2rem;border-top:1px solid var(--rule);font:500 .72rem/1.4 var(--f-mono);color:var(--slate)}
@media (max-width:640px){.foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* the artefact: a dog-ear on the footer's corner. hard to spot, easy to open */
.dogear{position:absolute;right:0;bottom:0;z-index:5;width:var(--ear,22px);height:var(--ear,22px);padding:0;border:0;background:none;cursor:pointer;transition:width .55s var(--ease),height .55s var(--ease);animation:peek 14s var(--ease) infinite 6s}
.dogear::before{content:"";position:absolute;inset:0;clip-path:polygon(100% 0,100% 100%,0 100%);background:repeating-linear-gradient(-45deg,transparent 0 7px,rgba(21,22,19,.08) 7px 8px),var(--mist);transition:background-color .4s}
.dogear:hover::before,.dogear:focus-visible::before,.nb-open .dogear::before{background-color:var(--lime)}
.dogear::after{content:"";position:absolute;inset:0;clip-path:polygon(0 0,100% 0,0 100%);background:linear-gradient(135deg,#FFFFFF 0%,#EDEDE7 48%,#D6D6CE 50%);filter:drop-shadow(-3px -3px 4px rgba(21,22,19,.18))}
.dogear .hand{position:absolute;right:6px;bottom:4px;font-size:1.05rem;line-height:1;color:var(--ink);opacity:0;transform:rotate(-45deg) translate(2px,4px);transition:opacity .3s .15s;pointer-events:none;white-space:nowrap}
.dogear:hover,.dogear:focus-visible{--ear:104px}
.dogear:hover .hand,.dogear:focus-visible .hand{opacity:1}
.nb-open .dogear{--ear:104px;animation:none}
.nb-open .dogear .hand{opacity:1}
@keyframes peek{0%,92%,100%{width:var(--ear,22px);height:var(--ear,22px)}95%{width:34px;height:34px}}

/* the notebook (shipped as real HTML under the footer, hidden until found) */
.nb{position:relative;background:repeating-linear-gradient(transparent 0 31px,rgba(21,22,19,.06) 31px 32px),#FBFBF7;border-top:1px solid var(--rule);padding:clamp(4rem,8vw,6.5rem) 0}
.nb::before{content:"";position:absolute;top:0;bottom:0;left:clamp(10px,3vw,40px);width:2px;background:var(--lime-deep);opacity:.6}
#notebook.open .nb{animation:nbIn 1.2s var(--ease) both}
@keyframes nbIn{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.nb-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem 2rem;align-items:end}
.nb-head .hand{font-size:1.6rem;transform:rotate(-2deg);max-width:18rem}
.nb-grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(2rem,5vw,4.5rem);margin-top:clamp(2rem,4vw,3rem)}
.nb-tl{list-style:none;margin:0;padding:0;position:relative}
.nb-tl::before{content:"";position:absolute;left:4.6rem;top:.6rem;bottom:.6rem;width:1px;background:var(--rule-2)}
.nb-tl li{position:relative;display:grid;grid-template-columns:4.2rem minmax(0,1fr);gap:1.4rem;padding:.5rem 0;line-height:1.45}
.nb-tl li::before{content:"";position:absolute;left:calc(4.6rem - 3.5px);top:1.05rem;width:8px;height:8px;border-radius:50%;background:#FBFBF7;border:1.5px solid var(--ink)}
.nb-tl li.hi::before{background:var(--lime)}
.nb-tl time{font:500 .72rem/1.9 var(--f-mono);color:var(--slate)}
.nb-tl q{grid-column:2;display:block;margin-top:.3rem;font-family:var(--f-hand);font-weight:600;font-size:1.35rem;line-height:1.1;color:var(--ink-2);quotes:"\201C" "\201D"}
.nb-essays{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-content:start}
.nb-essays article{border-radius:22px;padding:1.4rem 1.45rem;background:var(--white);border:1px solid var(--rule);transition:transform .5s var(--ease)}
.nb-essays article:hover{transform:translateY(-3px) rotate(-.3deg)}
.nb-essays .k{font:500 .62rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.nb-essays h3{margin:.6rem 0 .7rem;font-size:clamp(1.3rem,2vw,1.6rem);font-weight:760;font-stretch:112%;letter-spacing:-.03em}
.nb-essays p{margin:0;font-size:.95rem;color:var(--ink-2)}
.nb-essays blockquote{margin:1rem 0 0;padding:.1rem 0 .1rem .9rem;border-left:3px solid var(--lime);font-weight:500;line-height:1.45}
.nb-essays cite{display:block;margin-top:.45rem;font:500 .62rem/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;font-style:normal;color:var(--slate)}
.nb-foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:2.6rem}
@media (max-width:900px){.nb-grid,.nb-essays{grid-template-columns:minmax(0,1fr)}.nb-head{grid-template-columns:minmax(0,1fr)}}

/* notes for you (not part of the site) */
.notes{background:var(--white);border-top:2px dashed var(--rule-2);padding:clamp(4rem,8vw,6rem) 0 7rem;font-size:.97rem}
.stamp{display:inline-block;font:600 .68rem/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;padding:.5rem .7rem;border:1.5px solid var(--ink);border-radius:8px;transform:rotate(-2deg)}
.notes h2{margin-top:1.2rem}
.notes-head p{margin-top:1rem;color:var(--slate);max-width:56ch}
.ngrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:2.4rem}
.ncard{border:1px solid var(--rule);border-radius:22px;padding:1.4rem 1.5rem;background:var(--porcelain)}
.ncard.full{grid-column:1/-1}
.ncol{display:grid;gap:14px;align-content:start}
.ncard h3{margin-bottom:.9rem}
.ncard p{margin:0 0 .7rem}
.ncard ul,.ncard ol{margin:0;padding-left:1.15rem}
.ncard li+li{margin-top:.45rem}
.ncard code{font:500 .82em var(--f-mono);background:var(--white);border:1px solid var(--rule);padding:.08rem .35rem;border-radius:6px}
.checks{list-style:none;padding:0!important;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem 2rem}
.checks li{position:relative;padding-left:1.7rem;margin:0!important}
.checks li::before{content:"";position:absolute;left:0;top:.28em;width:1.05rem;height:1.05rem;border-radius:5px;background:var(--lime);box-shadow:inset 0 0 0 1.5px var(--ink)}
.checks li::after{content:"";position:absolute;left:.36rem;top:.42em;width:.3rem;height:.55rem;border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
.sws{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:1rem}
.sws div{border-radius:14px;border:1px solid var(--rule);overflow:hidden;background:var(--white)}
.sws i{display:block;height:3rem}
.sws span{display:block;padding:.45rem .6rem .55rem;font:500 .64rem/1.35 var(--f-mono);color:var(--slate)}
.sws b{display:block;font:650 .86rem/1.3 var(--f-sans);color:var(--ink)}
.types{display:grid;gap:.5rem;margin-bottom:1rem}
.types div{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.55rem .8rem;border-radius:12px;background:var(--white);border:1px solid var(--rule)}
.types small{font:500 .64rem/1 var(--f-mono);color:var(--slate);text-transform:uppercase;letter-spacing:.1em}
.phases{display:grid;gap:.7rem}
.phases div{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:1rem}
.phases b{font:500 .68rem/1.9 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.qs-list{counter-reset:q;list-style:none;padding:0!important}
.qs-list li{counter-increment:q;display:grid;grid-template-columns:1.8rem minmax(0,1fr);gap:.6rem}
.qs-list li::before{content:counter(q,decimal-leading-zero);font:500 .78rem/1.75 var(--f-mono);color:var(--slate)}
.qs-list span{display:block;color:var(--slate);font-size:.9rem}
@media (max-width:820px){.ngrid,.checks{grid-template-columns:minmax(0,1fr)}.phases div{grid-template-columns:minmax(0,1fr);gap:.1rem}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}