:root{--bg:#f4efe6;--panel:#fbf8f2;--ink:#2a2522;--muted:#7a7169;--line:#e2dacc;--accent:#9a5b3c;--accent-ink:#fff;color:var(--ink);background:var(--bg);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-family:-apple-system,SF Pro Text,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;line-height:1.45}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg)}h1{letter-spacing:.01em;margin:0;font-size:16px;font-weight:600}h2{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 10px;font-size:11px;font-weight:600}.hint{color:var(--muted);margin:6px 0 0;font-size:12px}.app{flex-direction:column;height:100%;display:flex}.topbar{border-bottom:1px solid var(--line);background:var(--panel);justify-content:space-between;align-items:center;padding:10px 16px;display:flex}.topbar-right{align-items:center;gap:12px;display:flex}.filename{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;max-width:240px;font-size:12px;overflow:hidden}.empty{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:16px;padding:24px;display:flex}.empty .hint{max-width:420px}.drop{border:1.5px dashed var(--line);background:var(--panel);cursor:pointer;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:min(520px,90vw);padding:48px 24px;transition:border-color .12s,background .12s;display:flex}.drop:hover,.drop.over{border-color:var(--accent);background:#fff}.drop span{color:var(--muted);font-size:12px}.drop.compact{border-style:solid;border-radius:6px;width:auto;padding:5px 10px}.drop.compact span{color:var(--ink)}.workspace{flex:1;grid-template-columns:280px 1fr 260px;min-height:0;display:grid}.sidebar{background:var(--panel);border-right:1px solid var(--line);padding:16px;overflow-y:auto}.sidebar.right{border-right:0;border-left:1px solid var(--line)}.controls section{border-bottom:1px solid var(--line);margin-bottom:16px;padding-bottom:16px}.row2{grid-template-columns:1fr 1fr;gap:10px;display:grid}.field{flex-direction:column;gap:4px;margin-bottom:10px;display:flex}.field>span{color:var(--muted);justify-content:space-between;font-size:12px;display:flex}.field>span em{color:var(--ink);font-style:normal}.field-input{align-items:center;gap:6px;display:flex}.field-input input{flex:1;min-width:0}.field-input em{color:var(--muted);font-size:11px;font-style:normal}input[type=number]{border:1px solid var(--line);width:100%;color:var(--ink);font:inherit;background:#fff;border-radius:6px;padding:6px 8px}input[type=range]{width:100%;accent-color:var(--accent)}.check{align-items:center;gap:8px;margin:8px 0;font-size:13px;display:flex}.check input{accent-color:var(--accent)}.segmented{border:1px solid var(--line);background:#fff;border-radius:6px;display:flex;overflow:hidden}.segmented button{color:var(--ink);font:inherit;cursor:pointer;background:0 0;border:0;flex:1;padding:6px 4px;font-size:12px}.segmented button+button{border-left:1px solid var(--line)}.segmented button.on{background:var(--accent);color:var(--accent-ink)}button.link{color:var(--accent);font:inherit;cursor:pointer;background:0 0;border:0;padding:0;font-size:12px;text-decoration:underline}.preview-scroll{background:var(--bg);place-items:start center;padding:24px;display:grid;overflow:auto}.preview{image-rendering:pixelated;background:#fff;box-shadow:0 1px #0000000f,0 8px 24px #281e141f}.key .swatches{flex-direction:column;gap:8px;margin:12px 0 0;padding:0;list-style:none;display:flex}.key li{align-items:center;gap:10px;display:flex}.swatch{border:1px solid #0000001f;border-radius:5px;flex-shrink:0;width:36px;height:28px}.swatch-meta{color:var(--muted);gap:8px;font-size:12px;display:flex}.swatch-meta strong{color:var(--ink);min-width:14px}@media (width<=900px){.workspace{grid-template-rows:auto auto auto;grid-template-columns:1fr}.sidebar,.sidebar.right{border:0;border-bottom:1px solid var(--line)}}.banner{justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;font-size:13px;display:flex}.banner.error{color:#7a2e1a;background:#fbe9e4;border-bottom:1px solid #f0cfc4}.banner.error .link{color:#7a2e1a}.error-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;flex-direction:column;align-items:flex-start;gap:10px;max-width:440px;padding:20px 24px;display:flex}.error-card code{color:var(--muted);white-space:pre-wrap;font-size:12px}.btn{background:var(--accent);color:var(--accent-ink);font:inherit;cursor:pointer;border:0;border-radius:6px;padding:7px 12px;font-size:13px}.drop.busy{opacity:.7;cursor:progress}.preview-area{min-width:0;min-height:0;display:flex;position:relative}.preview-area .preview-scroll{flex:1}.zoombar{background:var(--panel);border:1px solid var(--line);border-radius:8px;align-items:stretch;display:flex;position:absolute;bottom:16px;left:50%;overflow:hidden;transform:translate(-50%);box-shadow:0 4px 14px #281e141f}.zoombar button{color:var(--ink);font:inherit;cursor:pointer;background:0 0;border:0;min-width:36px;padding:6px 12px;font-size:13px}.zoombar button+button{border-left:1px solid var(--line)}.zoombar button:hover{background:#fff}.zoombar button.on{background:var(--accent);color:var(--accent-ink)}.zoombar .zoom-value{font-variant-numeric:tabular-nums;min-width:60px}.printview{background:#ddd6c8;flex:1;padding:16px 24px 48px;overflow:auto}.print-toolbar{justify-content:space-between;align-items:center;gap:16px;margin-bottom:8px;display:flex}.print-options{align-items:center;gap:12px;display:flex}.print-options .segmented{width:auto}.print-options .segmented button{flex:none;padding:6px 12px}.print-options .check{margin:0}.print-note{max-width:720px;margin:0 0 16px}.page{break-after:page;page-break-after:always;background:#fff;width:fit-content;min-width:4in;margin:0 auto 24px;padding:0;position:relative;box-shadow:0 2px 12px #0000002e}.tile-canvas{display:block}.page-footer{color:#333;white-space:nowrap;justify-content:space-between;align-items:center;gap:12px;height:.3in;padding:0 2px;font-size:8pt;display:flex}.scale-check{align-items:center;gap:4px;display:inline-flex}.scale-check i{box-sizing:border-box;border:1px solid #000;border-top:0;width:1in;height:.12in;display:inline-block}.key-page{width:7in;padding:.4in}.key-page h2{text-transform:none;letter-spacing:0;color:#000;margin:0 0 6pt;font-size:14pt}.key-page p{color:#333;margin:0 0 12pt;font-size:9.5pt}.key-page table{border-collapse:collapse;width:100%;font-size:10pt}.key-page th{text-align:left;border-bottom:1px solid #000;padding:4pt 6pt;font-weight:600}.key-page td{border-bottom:1px solid #ccc;padding:5pt 6pt}.key-page .yarn-blank{width:2.2in}.key-swatch{vertical-align:middle;border:1px solid #000;width:.45in;height:.3in;display:inline-block}.calib{align-items:center;gap:12pt;margin-top:18pt;display:flex}.calib-box{border:1px solid #000;flex-shrink:0;width:1in;height:1in}.calib p{margin:0}@media print{html,body,#root,.app{background:#fff;height:auto}.no-print,.topbar,.banner{display:none!important}.printview{background:#fff;padding:0;overflow:visible}.page{box-shadow:none;min-width:0;margin:0}.page:last-child{break-after:auto;page-break-after:auto}.key-page{width:auto;padding:0}.key-swatch,.calib-box,.scale-check i,.tile-canvas{-webkit-print-color-adjust:exact;print-color-adjust:exact}}.controls select{border:1px solid var(--line);width:100%;font:inherit;background:#fff;border-radius:6px;padding:6px 8px}.flag-note{color:#a8322a}.flag-tip{z-index:5;pointer-events:none;color:#fff;background:#2b2420;border-radius:6px;flex-direction:column;gap:3px;max-width:280px;padding:8px 10px;font-size:12px;line-height:1.4;display:flex;position:absolute;box-shadow:0 6px 18px #00000040}.flag-tip strong{color:#ffb3ad}.zoombar .flag-toggle{margin-left:6px}.save{position:relative}.btn.secondary{color:var(--accent);border:1px solid var(--accent);background:0 0;padding:6px 11px}.btn.secondary:hover{background:#fff}.save-panel{z-index:10;background:var(--panel);border:1px solid var(--line);text-align:left;border-radius:10px;flex-direction:column;gap:10px;width:320px;padding:14px 16px;display:flex;position:absolute;top:calc(100% + 8px);right:0;box-shadow:0 8px 24px #281e1429}.save-panel p{margin:0;font-size:13px}.save-panel .save-done{color:var(--accent)}.save-row{gap:8px;display:flex}.save-row input{border:1px solid var(--line);min-width:0;color:var(--ink);font:inherit;background:#fff;border-radius:6px;flex:1;padding:6px 8px}.save-row input:disabled{background:var(--bg);color:var(--muted)}.save-panel .link{align-self:flex-start}.swatch{justify-content:center;align-items:center;display:inline-flex}.swatch-symbol{font-family:Helvetica,Arial,sans-serif;font-size:13px;font-weight:700}.swatch-meta.thread{flex-direction:column;gap:0;min-width:0;line-height:1.3}.swatch-meta.thread strong{color:var(--ink)}.swatch-meta.thread .thread-name{white-space:nowrap;text-overflow:ellipsis;max-width:130px;overflow:hidden}.paper-pick{width:auto}.paper-pick button{flex:none;padding:5px 10px}.btn:disabled{opacity:.6;cursor:default}.btn.busy{cursor:progress}.interest{border-top:1px solid var(--line);margin-top:20px;padding-top:14px}.interest-body{flex-direction:column;gap:6px;display:flex}.interest-form{flex-direction:column;gap:8px;margin-top:4px;display:flex}.interest-form input[type=email]{border:1px solid var(--line);width:100%;color:var(--ink);font:inherit;background:#fff;border-radius:6px;padding:6px 8px}.btn.small{padding:5px 10px;font-size:12px}.flag-block .btn{margin-top:6px}.wraps{margin-top:10px}.wraps .field-input input{max-width:90px}.key li{flex-wrap:wrap}.key select.recipe{border:1px solid var(--line);width:100%;min-width:0;font:inherit;color:var(--ink);background:#fff;border-radius:6px;flex-basis:100%;padding:3px 6px;font-size:12px}.key select.recipe.overridden{border-color:var(--accent)}.yarns{border-top:1px solid var(--line);margin-top:20px;padding-top:14px}.yarn-list{flex-direction:column;gap:6px;margin:10px 0;padding:0;list-style:none;display:flex}.yarn-row{border-bottom:1px solid var(--line);flex-direction:column;gap:4px;padding-bottom:6px;display:flex}.yarn-main,.yarn-meta{align-items:center;gap:6px;display:flex}.yarn-meta{margin-left:34px}.yarn-row input[type=color]{border:1px solid var(--line);background:0 0;border-radius:5px;flex-shrink:0;width:28px;height:26px;padding:0}.yarn-row input[type=text],.yarn-row input[type=number]{border:1px solid var(--line);min-width:0;font:inherit;color:var(--ink);background:#fff;border-radius:5px;flex:1;padding:4px 6px;font-size:12px}.yarn-row input[type=number]{flex:0 0 52px}.yarn-meta em{color:var(--muted);font-size:11px;font-style:normal}.yarn-row .link{flex-shrink:0;font-size:11px}.landing{flex-direction:column;flex:1;align-items:center;gap:28px;padding:40px 24px 48px;display:flex;overflow-y:auto}.landing-intro{text-align:center;max-width:560px}.landing-lead{letter-spacing:-.01em;margin:0 0 10px;font-size:22px;font-weight:600;line-height:1.25}.landing-sub{color:var(--muted);margin:0;font-size:14px}.landing-crafts{flex-direction:column;align-items:center;gap:12px;width:100%;max-width:640px;display:flex}.craft-tiles{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.craft-tile{border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit;cursor:pointer;border-radius:999px;padding:7px 14px}.craft-tile:hover{border-color:var(--accent)}.craft-tile.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.craft-blurb{text-align:center;flex-direction:column;align-items:center;gap:10px;display:flex}.craft-blurb p{max-width:520px;margin:0}.landing .drop{width:100%;max-width:560px}.landing-steps ol{counter-reset:step;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:760px;margin:0;padding:0;list-style:none;display:grid}.landing-steps li{counter-increment:step;border:1px solid var(--line);background:var(--panel);border-radius:10px;flex-direction:column;gap:4px;padding:14px 16px;font-size:13px;display:flex}.landing-steps li:before{content:counter(step);color:var(--accent);letter-spacing:.08em;font-size:11px;font-weight:600}.landing-steps li span{color:var(--muted)}.landing-foot{color:var(--muted);flex-direction:column;align-items:center;gap:6px;margin-top:8px;font-size:12px;display:flex}.landing-foot nav{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.landing-foot a{color:var(--accent);text-decoration:none}.landing-foot a:hover{text-decoration:underline}.banner.note{background:var(--panel);border-bottom:1px solid var(--line)}.note-actions{align-items:center;gap:10px;display:flex}