header.top{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding-block:6px 14px;display:flex}.tabs{background:var(--panel);border:1px solid var(--line);border-radius:999px;gap:4px;padding:4px;display:flex}.tabs button{color:var(--ink);font:700 15px var(--font-body);cursor:pointer;background:0 0;border:0;border-radius:999px;padding:7px 18px}.tabs button[aria-selected=true]{background:var(--accent);color:var(--accent-ink)}.studio{grid-template-columns:76px minmax(0,1fr) 320px;align-items:start;gap:16px;display:grid}.rail{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);top:calc(env(safe-area-inset-top,0px) + 10px);flex-direction:column;gap:6px;padding:6px;display:flex;position:sticky}.rail hr{border:0;border-top:1px solid var(--line);width:auto;margin:4px 2px}.tool{color:var(--ink);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:8px;flex-direction:column;align-items:center;gap:2px;padding:7px 2px 5px;font-size:12px;font-weight:700;display:flex}.tool svg{width:24px;height:24px}.tool:hover{background:var(--bg)}.tool[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}.tool:disabled{opacity:.35;cursor:default}.board{flex-direction:column;gap:10px;min-width:0;display:flex}.canvas-frame{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);justify-content:center;padding:14px;display:flex}#editor{touch-action:none;cursor:crosshair;border-radius:3px;max-width:100%;display:block;box-shadow:0 1px #0000000f,0 6px 18px -10px #281e3c73}.boardbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 16px;display:flex}.seg{border:1px solid var(--line);background:var(--panel);border-radius:8px;display:inline-flex;overflow:hidden}.seg button{color:var(--ink);cursor:pointer;font-variant-numeric:tabular-nums;background:0 0;border:0;padding:6px 11px;font-size:13px;font-weight:700}.seg button+button{border-left:1px solid var(--line)}.seg button[aria-pressed=true]{background:var(--ink);color:var(--panel)}.lbl{color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-right:6px;font-size:12px;font-weight:700}.btn.danger-armed{background:var(--warn);border-color:var(--warn);color:#fff}.side{flex-direction:column;gap:14px;min-width:0;display:flex}.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);flex-direction:column;gap:10px;min-width:0;padding:14px;display:flex}.card h2{font-family:var(--font-display);letter-spacing:.01em;margin:0;font-size:19px;font-weight:500}.field{flex-direction:column;gap:3px;display:flex}.field label{color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-size:12px;font-weight:700}.field input,.field select{font:16px var(--font-body);border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:7px;width:100%;padding:7px 9px}.current{align-items:center;gap:10px;display:flex}.current .sw{border:1px solid #0000002e;border-radius:6px;flex:none;width:34px;height:34px}.current b{font-variant-numeric:tabular-nums}.current span{color:var(--muted);font-size:13px;display:block}.skeins{grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:6px;display:grid}.skein{cursor:pointer;background-image:repeating-linear-gradient(100deg,#ffffff24 0 2px,#0000000f 2px 4px);border:1px solid #0003;border-radius:6px;height:46px;padding:0;position:relative;overflow:hidden}.skein .band{color:#2a2238;font:700 10px/1.6 var(--font-body);text-align:center;font-variant-numeric:tabular-nums;background:#fdfcf7;border-block:1px solid #0000001f;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}.skein[aria-pressed=true]{outline:3px solid var(--accent);outline-offset:2px}.skein:hover{transform:translateY(-1px)}details.all summary{cursor:pointer;font-size:14px;font-weight:700}details.all .field{margin-block:8px}#allSkeins{max-height:260px;padding:4px;overflow-y:auto}.meter{flex-direction:column;gap:6px;display:flex}.meter .count{font-family:var(--font-display);font-variant-numeric:tabular-nums;font-size:30px;line-height:1}.meter .count small{font-family:var(--font-body);color:var(--muted);margin-left:6px;font-size:14px}.pill{border:1px solid;border-radius:999px;align-self:flex-start;padding:3px 9px;font-size:12px;font-weight:700}.pill.good{color:var(--good)}.pill.warn{color:var(--warn)}.pill.lots{color:var(--accent)}.used{flex-direction:column;gap:2px;display:flex}.used button{color:var(--ink);text-align:left;cursor:pointer;background:0 0;border:0;border-radius:6px;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:8px;padding:4px 6px;font-size:13px;display:grid}.used button:hover,.used button[aria-pressed=true]{background:var(--bg)}.used .dot{border:1px solid #0003;border-radius:4px;width:18px;height:18px}.used .nm{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.used .n{font-variant-numeric:tabular-nums;color:var(--muted)}.starters{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;display:grid}.starter{border:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer;border-radius:8px;flex-direction:column;align-items:center;gap:4px;padding:8px 4px 6px;font-size:12px;font-weight:700;display:flex}.starter img{width:44px;height:44px;image-rendering:pixelated}.starter:hover{border-color:var(--ink)}.saved{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;display:grid}.saved .item{flex-direction:column;align-items:stretch;gap:4px;display:flex}.saved .open{border:1px solid var(--line);background:var(--bg);cursor:pointer;color:var(--ink);border-radius:8px;flex-direction:column;align-items:center;gap:4px;padding:6px;font-size:12px;font-weight:700;display:flex;overflow:hidden}.saved .open img{width:56px;height:56px;image-rendering:pixelated;background:#f8f7f2;border-radius:3px}.saved .open span{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}.saved .del{color:var(--muted);cursor:pointer;background:0 0;border:0;padding:2px;font-size:12px}.saved .del.armed{color:var(--warn);font-weight:700}.empty-note{color:var(--muted);margin:0;font-size:13px}.pattern{grid-template-columns:300px minmax(0,1fr);align-items:start;gap:18px;display:grid}.pattern .side{top:calc(env(safe-area-inset-top,0px) + 10px);position:sticky}.pages{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;display:grid}.page{flex-direction:column;gap:6px;margin:0;display:flex}.page img{background:#fff;border-radius:3px;width:100%;height:auto;box-shadow:0 1px #00000014,0 10px 24px -14px #281e3c8c}.page figcaption{color:var(--muted);font-size:13px;font-weight:700}.howto{flex-direction:column;gap:6px;margin:0;padding-left:20px;font-size:14px;display:flex}.note{color:var(--muted);margin:0;font-size:13px}.statgrid{font-variant-numeric:tabular-nums;grid-template-columns:auto 1fr;gap:4px 12px;font-size:14px;display:grid}.statgrid dt{color:var(--muted)}.statgrid dd{margin:0;font-weight:700}@media (width<=1020px){.studio{grid-template-columns:70px minmax(0,1fr)}.studio>.side{grid-column:1/-1;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));display:grid}}@media (width<=640px){.studio{grid-template-columns:minmax(0,1fr)}.rail{flex-flow:wrap;justify-content:center;position:static}.rail hr{display:none}.tool{min-width:52px}.canvas-frame{padding:8px}.pattern{grid-template-columns:minmax(0,1fr)}.pattern .side{position:static}}@media (prefers-reduced-motion:reduce){.skein:hover{transform:none}}@page{size:letter;margin:0}@media print{header.site,footer.site,header.top,#designTab,.pattern>.side,.page figcaption{display:none!important}body{background:#fff}.wrap{max-width:none;padding:0}.pattern,.pages{display:block}.page{break-after:page}.page img{box-shadow:none;width:100%}}