:root{--paper:#eef2f5;--surface:#fff;--ink:#18233a;--muted:#5b6578;--line:#cfd7df;--flag:#d6246e;--ok:#1d7a5a;--yarn-0:#2d3a8c;--yarn-1:#f2e9d8;--display:"Bricolage Grotesque", system-ui, sans-serif;--body:"Atkinson Hyperlegible", system-ui, sans-serif;--radius:6px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}[hidden]{display:none!important}html{background:var(--paper);color:var(--ink);font-family:var(--body);-webkit-text-size-adjust:100%;font-size:106.25%;line-height:1.5}body{margin:0;max-width:1320px;margin-inline:auto;padding:0 clamp(16px,4vw,48px) 64px}body.is-dropping:after{content:"Drop to open the image";border:3px dashed var(--ink);font-family:var(--display);z-index:10;pointer-events:none;background:#eef2f5eb;border-radius:12px;place-items:center;font-size:2rem;font-weight:700;display:grid;position:fixed;inset:12px}h1,h2{font-family:var(--display);margin:0;line-height:1.05}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.masthead{padding:clamp(28px,6vw,64px) 0 28px;position:relative}.masthead:before{content:"";background:repeating-linear-gradient(to bottom, var(--yarn-0) 0 6px, var(--yarn-1) 6px 12px);border-radius:3px;width:min(100%,300px);height:36px;margin-bottom:28px;display:block;box-shadow:inset 0 0 0 1px #18233a26}.masthead h1{letter-spacing:-.035em;font-variation-settings:"opsz" 96;font-size:clamp(2.75rem,7vw,5rem);font-weight:800}.lede{max-width:38em;color:var(--muted);margin:14px 0 24px;font-size:1.125rem}.actions{flex-wrap:wrap;gap:10px;display:flex}.drop-hint{color:var(--muted);margin:10px 0 0;font-size:.875rem}.button{font:inherit;color:var(--ink);background:var(--surface);border:1.5px solid var(--ink);border-radius:var(--radius);cursor:pointer;align-items:center;gap:6px;padding:9px 16px;font-size:.9375rem;font-weight:700;display:inline-flex}.button:hover{background:#e3e9ef}.button.primary{background:var(--ink);color:#fff}.button.primary:hover{background:#2b3a5c}.button.quiet{text-underline-offset:3px;background:0 0;border-color:#0000;text-decoration:underline}.button.quiet:hover{background:#18233a0f}.button.small{border-width:1px;padding:5px 10px;font-size:.8125rem}.button:disabled{opacity:.4;cursor:default}.button:focus-visible,canvas:focus-visible,.row-name:focus-visible,input:focus-visible{outline:3px solid var(--flag);outline-offset:2px}.button:has(input:focus-visible){outline:3px solid var(--flag);outline-offset:2px}.workbench{grid-template-columns:minmax(0,1fr) 300px;align-items:start;gap:24px;display:grid}.chart-area{background:var(--surface);border:1px solid var(--line);border-radius:10px;min-width:0;padding:16px}.chart-scroll{max-width:100%;overflow:auto}canvas{touch-action:none;cursor:crosshair;border-radius:2px;margin-inline:auto;display:block}.hover-note{max-width:60em;min-height:3em;margin:12px 0 8px;font-size:.9375rem}.toolbar{border-top:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:8px 18px;padding-top:12px;display:flex}.tool-group{flex-wrap:wrap;align-items:center;gap:6px;display:inline-flex}.tool-label{color:var(--muted);font-size:.8125rem}.size-note{color:var(--muted);font-variant-numeric:tabular-nums;margin-left:auto;font-size:.8125rem}.panel{gap:18px;display:grid;position:sticky;top:16px}.verdict-block{padding-bottom:6px}.verdict{font-family:var(--display);letter-spacing:-.02em;color:var(--ok);margin:0;font-size:2.125rem;font-weight:800;line-height:1.02}.verdict.is-problem{color:var(--flag)}.verdict-detail{color:var(--muted);margin:8px 0 0}.fixes{flex-wrap:wrap;gap:6px;margin-top:10px;display:flex}.fixes:empty{display:none}.setting{border:0;border-top:1px solid var(--line);gap:6px;margin:0;padding:14px 0 0;display:grid}.setting legend{float:left;width:100%;margin-bottom:4px;padding:0;font-weight:700}.setting-help{color:var(--muted);margin:0;font-size:.875rem}.choice{cursor:pointer;align-items:baseline;gap:8px;display:flex}.choice input{accent-color:var(--ink)}.yarns{gap:16px;display:flex}.yarn{cursor:pointer;align-items:center;gap:8px;display:inline-flex}.yarn input{border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;background:0 0;width:40px;height:32px;padding:0}.field{gap:4px;display:grid}.field input{font:inherit;border:1px solid var(--muted);border-radius:var(--radius);width:8em;padding:6px 8px}.pattern,.rule{margin-top:48px}.pattern-head{align-items:baseline;gap:16px;margin-bottom:14px;display:flex}.pattern h2,.rule h2{letter-spacing:-.02em;font-size:2rem;font-weight:700}.pattern-waiting{color:var(--muted);font-size:1.0625rem}.pattern-intro p{max-width:44em;margin:0 0 12px}.legend{gap:4px;margin:0 0 16px;display:grid}.legend div{gap:10px;display:flex}.legend dt{min-width:2em;font-weight:700}.legend dd{margin:0}.foundation{margin:0 0 8px;font-weight:700}.rows{border-top:1px solid var(--line);margin:0;padding:0;list-style:none}.pattern-row{border-bottom:1px solid var(--line);grid-template-columns:auto 14px 5.5em 3.5em minmax(0,1fr) auto;align-items:center;gap:4px 10px;padding:7px 8px;display:grid}.pattern-row input{accent-color:var(--ok);width:18px;height:18px}.pattern-row.is-selected{background:var(--surface);box-shadow:inset 3px 0 0 var(--ink)}.pattern-row.is-done .steps,.pattern-row.is-done .row-name{color:var(--muted);text-decoration:line-through}.swatch{border-radius:3px;width:14px;height:14px;box-shadow:inset 0 0 0 1px #18233a40}.row-name{font:inherit;text-align:left;color:inherit;cursor:pointer;text-decoration:underline;-webkit-text-decoration-color:var(--line);text-decoration-color:var(--line);text-underline-offset:3px;background:0 0;border:0;padding:0;font-weight:700}.row-yarn,.total{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.875rem}.steps{font-variant-numeric:tabular-nums}.rule-columns{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 40px;margin-top:14px;display:grid}.rule p,.rule li{max-width:36em}.rule p{margin:0 0 12px}.rule ul{margin:0;padding-left:1.2em}.rule li{margin-bottom:6px}.dialog{max-width:360px;color:var(--ink);border:0;border-radius:10px;padding:24px}.dialog::backdrop{background:#18233a66}.dialog form{gap:14px;display:grid}.dialog h2{font-size:1.5rem}.dialog-actions{justify-content:flex-end;gap:8px;display:flex}@media (width<=860px){.workbench{grid-template-columns:minmax(0,1fr)}.panel{position:static}.rule-columns{grid-template-columns:minmax(0,1fr)}.pattern-row{grid-template-columns:auto 14px auto 1fr auto}.pattern-row .steps{grid-column:3/-1}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}@media print{html{background:#fff;font-size:11pt}body{padding:0}.masthead:before,.lede,.actions,.drop-hint,.toolbar,.hover-note,.panel,.rule,#print,.pattern-row input{display:none!important}.masthead{padding:0 0 12px}.masthead h1{font-size:20pt}.workbench{display:block}.chart-area{border:0;padding:0}canvas{max-width:100%;height:auto!important}.pattern{margin-top:16px}.pattern-row{break-inside:avoid;grid-template-columns:14px 5.5em 3.5em minmax(0,1fr) auto;padding:4px 0}*{-webkit-print-color-adjust:exact;print-color-adjust:exact}}