@font-face{font-family:"Bodoni";src:url(/f/bodonimoda.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Mulish";src:url(/f/mulish.woff2) format("woff2");font-weight:400 700;font-display:swap}
:root{--suit:#2E3038;--suit2:#383B45;--chalk:#F2EFE6;--dim:#C3C1BA;--blue:#8FC1EE;--pink:#F2A7B5;--tape:#E8C547;--tap:44px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--chalk);font:400 1.0625rem/1.65 "Mulish",system-ui,sans-serif;background:var(--suit);
  background-image:repeating-linear-gradient(90deg,transparent 0 22px,rgba(242,239,230,.045) 22px 23px),repeating-linear-gradient(45deg,rgba(0,0,0,.08) 0 2px,transparent 2px 5px)}
h1,h2,h3{font-family:"Bodoni",serif;font-weight:600;line-height:1.05;margin:0 0 .45em}
a{color:var(--chalk);text-underline-offset:.22em;text-decoration-color:var(--pink)}
:focus-visible{outline:3px solid var(--tape);outline-offset:3px}
.skip{position:absolute;left:.5rem;top:-5rem;background:var(--tape);color:var(--suit);padding:.7rem 1rem;z-index:9}.skip:focus{top:.5rem}
.preview{margin:0;padding:.4rem 1rem;background:var(--tape);color:#22242A;font-size:.9375rem;text-align:center}
.top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:0 1.5rem;padding:.4rem clamp(1rem,4vw,3rem);border-bottom:1px dashed rgba(242,239,230,.35)}
.brand{display:inline-flex;align-items:center;min-height:var(--tap);font:italic 600 1.7rem "Bodoni",serif;text-decoration:none}
.top nav{display:flex;flex-wrap:wrap;gap:0 1.25rem}.top nav a{display:inline-flex;align-items:center;min-height:var(--tap);text-decoration:none}.top nav a:hover{text-decoration:underline}
main{padding:0 clamp(1rem,4vw,3rem)}
.hero{display:grid;gap:1.5rem;padding:clamp(1.5rem,4vw,4rem) 0}
h1{font-size:clamp(2.4rem,1.4rem + 4.4vw,5.4rem);max-width:13ch;letter-spacing:-.01em}
.tag{font:italic 400 clamp(1.3rem,1.1rem + .8vw,1.8rem) "Bodoni",serif;color:var(--pink);margin:0 0 1rem}
.lede{max-width:52ch;color:var(--dim);font-size:1.125rem}
.btn{display:inline-flex;align-items:center;min-height:50px;padding:.6rem 1.3rem;background:var(--chalk);color:var(--suit);font-weight:700;text-decoration:none;border-radius:2px;box-shadow:4px 4px 0 var(--pink)}
.btn:hover{box-shadow:6px 6px 0 var(--pink)}.btn:active{box-shadow:1px 1px 0 var(--pink);transform:translate(3px,3px)}
.board{margin:0;justify-self:center;width:min(100%,26rem);padding:1rem;border:1.5px dashed rgba(242,239,230,.4)}
.board figcaption{font-size:.9375rem;color:var(--dim);text-align:center}
svg{display:block;width:100%;height:auto}
.collar{fill:none;stroke:var(--dim);stroke-width:2.2;stroke-linecap:round;opacity:.8}
.n{fill:none;stroke:var(--blue);stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.w{fill:none;stroke:var(--pink);stroke-width:18;stroke-linecap:round;stroke-linejoin:round}
path.w[d$="Z"]{fill:var(--pink);stroke-width:3}
.w.behind{stroke-dasharray:6 6;stroke-width:14;opacity:.85}
.past{opacity:.38}
.arrow{fill:none;stroke:var(--chalk);stroke-width:2.2;stroke-dasharray:3 4}.ahd{fill:var(--chalk)}
.finger{fill:var(--tape)}
.side{fill:var(--dim);font:600 11px "Mulish",sans-serif}
.knots,.mirror{padding:clamp(2rem,5vw,4rem) 0;border-top:1px dashed rgba(242,239,230,.35)}
.knots h2,.mirror h2{font-size:clamp(1.9rem,1.3rem + 2.4vw,3.2rem)}
.tags{list-style:none;padding:0;margin:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr))}
.tags li{position:relative;padding:1.4rem 1.2rem 1.2rem 1.8rem;background:var(--suit2);border-radius:2px 14px 14px 2px;clip-path:polygon(14px 0,100% 0,100% 100%,14px 100%,0 50%)}
.tags li::before{content:"";position:absolute;left:16px;top:calc(50% - 5px);width:10px;height:10px;border-radius:50%;background:var(--suit)}
.tags .name{display:block;font:600 1.5rem "Bodoni",serif}.tags .meta{display:block;font-size:.95rem;color:var(--dim)}
.tags .ready{background:var(--chalk);color:var(--suit)}.tags .ready .meta{color:#4A4C55}
.tags .ready a{color:inherit;text-decoration:none;display:block}.tags .ready a::after{content:"";position:absolute;inset:0}
.tags .go{display:inline-block;margin-top:.6rem;font-weight:700;border-bottom:3px solid var(--pink)}
.tags .ready:hover{box-shadow:inset 0 -4px 0 var(--pink)}
.cols{display:grid;gap:0 2.5rem}.cols p{max-width:58ch}
.knot{padding-top:clamp(1.25rem,3vw,2.5rem);padding-bottom:3rem}
.knot h1{font-size:clamp(2.2rem,1.4rem + 3.4vw,4.4rem);max-width:none}
.view{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .8rem;border:1.5px solid var(--tape);color:var(--tape);font-weight:700}
.steps{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:2rem}
.step{display:grid;gap:1rem;align-items:center}
.step[hidden]{display:none}
.step figure{margin:0;width:min(100%,22rem);justify-self:center;padding:.5rem;border:1.5px dashed rgba(242,239,230,.35)}
.step .n{margin:0;color:var(--tape);font-weight:700;letter-spacing:.02em}
.step h2{font-size:clamp(1.8rem,1.3rem + 2vw,2.8rem)}
.step p{max-width:46ch;font-size:1.125rem}
.live .step.in figure{animation:chalk .35s ease-out}
@keyframes chalk{from{opacity:.2;transform:translateY(6px)}to{opacity:1;transform:none}}
.controls{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:1.5rem;padding-top:1rem;border-top:1px dashed rgba(242,239,230,.35)}
.controls[hidden],.keys-hint[hidden]{display:none}
.controls button,.all{min-height:var(--tap);min-width:var(--tap);padding:0 1rem;background:transparent;color:var(--chalk);border:1.5px solid var(--chalk);border-radius:2px;font:700 1rem "Mulish",sans-serif;cursor:pointer}
.controls .next{background:var(--chalk);color:var(--suit);margin-left:auto}
.controls button:hover{border-color:var(--pink)}.controls button:active{transform:translateY(1px)}
.controls button:disabled{opacity:.4;cursor:default}
.dots{display:flex;flex-wrap:wrap;gap:.35rem}.dots button{padding:0;border-radius:50%;font-size:.95rem}
.dots .done{border-color:var(--pink);color:var(--pink)}.dots [aria-current=step]{background:var(--pink);border-color:var(--pink);color:var(--suit)}
.keys-hint{color:var(--dim);font-size:.95rem}.all{margin-left:.5rem;min-height:40px}
.trouble{margin-top:3rem;padding-top:2rem;border-top:1px dashed rgba(242,239,230,.35)}.trouble h2{font-size:2rem}
.trouble dt{font-weight:700;margin-top:1rem}.trouble dd{margin:.2rem 0 0;color:var(--dim);max-width:58ch}
.foot{padding:2rem clamp(1rem,4vw,3rem) 2.5rem;border-top:1px dashed rgba(242,239,230,.35);font-size:.9375rem;color:var(--dim)}
.foot p{margin:0 0 .5rem;max-width:60ch}.run{color:var(--chalk);font:italic 600 1.15rem "Bodoni",serif}
.foot ul{list-style:none;margin:.5rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:0 1.5rem}.foot li a{display:inline-flex;align-items:center;min-height:var(--tap)}
.doc{max-width:46rem;padding-top:1.5rem;padding-bottom:3rem}.doc h1{font-size:2.6rem}.small{font-size:.9375rem;color:var(--dim)}
.review{position:fixed;right:1rem;bottom:1rem;max-width:22rem;max-height:60vh;overflow:auto;background:var(--chalk);color:var(--suit);padding:1rem;font-size:.875rem;z-index:20}
.reviewing [data-draft]{outline:2px dashed var(--tape);outline-offset:2px}
@media (min-width:64em){
  .hero{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:center}
  .cols{grid-template-columns:1fr 1fr}
  .step{grid-template-columns:minmax(0,24rem) minmax(0,1fr);gap:3rem}
  .live:not(.all-on) .step figure{width:24rem}
}
@media print{.preview,.top,.foot,.controls,.keys-hint{display:none!important}.step{display:grid!important;break-inside:avoid}body{background:#2E3038;-webkit-print-color-adjust:exact;print-color-adjust:exact}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.view svg{width:22px;height:22px;flex:none}
@media (min-width:64em){
  .knot{display:grid;grid-template-columns:minmax(0,21rem) minmax(0,1fr);gap:0 4rem;align-items:start}
  .knot-head{position:sticky;top:1.5rem}
  .knot .trouble{grid-column:2}
  .knot h1{font-size:clamp(2.6rem,1.6rem + 2.2vw,3.8rem)}
}
.nw{white-space:nowrap}