.tufting{--cloth:#edf0ea;--surface:#fff;--ink:#1c2320;--muted:#56615b;--line:#c8d1ca;--grid:#bcd5c2;--accent:#2547c4;--accent-ink:#fff;--frame:#c49a5c;--display:var(--font-heading),system-ui,sans-serif;--body:var(--font-sans),system-ui,sans-serif;--mono:var(--font-geist-mono),ui-monospace,Consolas,monospace;background:var(--cloth);color:var(--ink);font:16px/1.5 var(--body);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));flex:1;padding-block:20px 40px}.dark .tufting{--cloth:#151917;--surface:#1e2421;--ink:#e7ece9;--muted:#9ba6a0;--line:#323b36;--grid:#26362b;--accent:#93a8ff;--accent-ink:#0d1431;--frame:#8a6b3e;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}.tufting .wrap{gap:16px;max-width:1560px;margin:0 auto;display:grid}.tufting header h1{font:800 clamp(28px,4vw,40px)/1.05 var(--display);letter-spacing:-.01em;text-wrap:balance;margin:0}.tufting header p{color:var(--muted);max-width:62ch;margin:6px 0 0}.tufting .app{grid-template-columns:minmax(0,1fr);align-items:start;gap:20px;display:grid}.tufting .panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;align-content:start;gap:14px;padding:14px;display:grid}.tufting .pane{gap:14px;min-width:0;display:grid}.tufting .pane[hidden]{display:none}.tufting .panes{z-index:1;grid-template-columns:repeat(3,minmax(0,1fr));display:grid;position:sticky;top:0}.tufting .panel .legend{background:0 0;border:0;border-radius:0;padding:0}.tufting .panel th,.tufting .panel td{padding:6px 5px}.tufting .help summary{cursor:pointer;font-size:14px;font-weight:700}.tufting .help ul{color:var(--muted);gap:4px;margin:8px 0 0;padding-left:18px;font-size:13px;display:grid}@media (min-width:1000px){.tufting{padding-block:20px 12px}.tufting header{display:none}.tufting .app{grid-template-columns:minmax(0,1fr) 480px}.tufting .stage,.tufting .panel{height:calc(100dvh - 97px);position:sticky;top:85px}.tufting .stage{flex-direction:column;gap:10px;display:flex}.tufting .stage .frame{border-width:10px;flex:1;min-height:0;padding:10px;display:flex}.tufting .stage .vp{flex:1;height:auto}.tufting .panel{overflow:auto}}.tufting .field{gap:4px;display:grid}.tufting .field label:not(.btn),.tufting .lbl{letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-size:12px;font-weight:700}.tufting .row{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.tufting output,.tufting .num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:14px}.tufting input[type=range]{width:100%;accent-color:var(--accent)}.tufting input[type=number]{font:500 16px var(--mono);border:1px solid var(--line);background:var(--cloth);width:100%;color:var(--ink);border-radius:6px;padding:8px 10px}.tufting .hint{color:var(--muted);margin:0;font-size:13px}.tufting .btn{font:700 15px var(--body);border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);cursor:pointer;border-radius:7px;justify-content:center;align-items:center;gap:6px;padding:10px 14px;display:inline-flex}.tufting .btn.ghost{color:var(--ink);border-color:var(--line);background:0 0}.tufting .btn:focus-visible,.tufting .tab:focus-visible,.tufting input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.tufting .check{align-items:center;gap:8px;font-size:15px;display:flex}.tufting .check input{accent-color:var(--accent);width:18px;height:18px}.tufting main{gap:10px;min-width:0;display:grid}.tufting .bar{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.tufting .tabs{background:var(--surface);border:1px solid var(--line);border-radius:9px;flex-wrap:wrap;gap:4px;padding:4px;display:flex}.tufting .tab{font:700 14px var(--body);color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:6px;padding:8px 12px}.tufting .tab[aria-pressed=true]{background:var(--ink);color:var(--surface)}.tufting .acts{flex-wrap:wrap;gap:8px;margin-left:auto;display:flex}.tufting .pages{display:none}.tufting td input[type=number]{text-align:right;width:72px;padding:4px 6px;font-size:14px}.tufting select{font:500 14px var(--mono);border:1px solid var(--line);background:var(--cloth);color:var(--ink);border-radius:5px;padding:4px 6px}.tufting select:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.tufting .frame{border:12px solid var(--frame);background-color:var(--surface);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:22px 22px;border-radius:6px;padding:18px}.tufting .frame.drag{outline:4px dashed var(--accent);outline-offset:-20px}.tufting .vp{touch-action:none;cursor:grab;width:100%;height:420px;position:relative;overflow:hidden}.tufting .vp[data-tool=pen],.tufting .vp[data-tool=line],.tufting .vp[data-tool=crop]{cursor:crosshair}.tufting .tab:disabled{opacity:.45;cursor:default}.tufting .vp[data-tool=crop]{cursor:grab}.tufting .cropbox{border:2px dashed var(--accent);pointer-events:none;box-sizing:border-box;position:absolute;box-shadow:0 0 0 9999px #00000059}.tufting .cropbox .h{background:var(--surface);border:2px solid var(--accent);border-radius:2px;width:12px;height:12px;position:absolute;transform:translate(-50%,-50%)}.tufting .cropbox .nw{top:0;left:0}.tufting .cropbox .n{top:0;left:50%}.tufting .cropbox .ne{top:0;left:100%}.tufting .cropbox .e{top:50%;left:100%}.tufting .cropbox .se{top:100%;left:100%}.tufting .cropbox .s{top:100%;left:50%}.tufting .cropbox .sw{top:100%;left:0}.tufting .cropbox .w{top:50%;left:0}.tufting .vp[data-tool=erase]{cursor:cell}.tufting .vp[data-tool=fill]{cursor:copy}.tufting .swatches{flex-wrap:wrap;gap:6px;display:flex}.tufting .sw{border:2px solid var(--line);width:34px;height:34px;font:700 14px var(--mono);cursor:pointer;border-radius:50%}.tufting .sw[aria-pressed=true],.tufting .sw:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.tufting .sw.hatch{background:repeating-linear-gradient(45deg,#f1eee6 0 5px,#968f84 5px 7px)}.tufting .sw.mini{vertical-align:middle;cursor:default;width:30px;height:30px;display:inline-block}.tufting tfoot th{text-transform:none;letter-spacing:0;color:var(--ink);font-size:15px}.tufting tfoot td{font-weight:700}.tufting .ipgrid{grid-template-columns:repeat(2,minmax(0,170px));gap:12px;margin-top:12px;display:grid}.tufting .sw.add{background:var(--surface);color:var(--ink);border-style:dashed;place-items:center;font-size:20px;display:inline-grid;position:relative}.tufting .sw.add input{opacity:0;cursor:pointer;border:0;width:100%;height:100%;padding:0;position:absolute;inset:0}.tufting .sw.add:focus-within{outline:3px solid var(--accent);outline-offset:2px}.tufting #out{transform-origin:0 0;max-width:none;box-shadow:0 1px 0 var(--line),0 6px 20px #0000001f;background:#fff;position:absolute;top:0;left:0}.tufting #out:fullscreen{object-fit:contain;box-shadow:none;image-rendering:auto!important;width:100vw!important;height:100vh!important;transform:none!important}.tufting .tab[data-t][aria-pressed=true]{background:var(--accent);color:var(--accent-ink)}.tufting .sep{background:var(--line);align-self:stretch;width:1px;margin:2px 4px}.tufting #zv{text-align:center;align-self:center;min-width:4.5ch}.tufting .status{font-family:var(--mono);color:var(--muted);margin:0;font-size:13px}.tufting .note{color:var(--ink);margin:0;font-size:14px}.tufting .note b{color:var(--accent)}.tufting .legend{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px;overflow-x:auto}.tufting .legend h2{font:700 20px var(--display);margin:0 0 10px}.tufting table{border-collapse:collapse;width:100%;min-width:360px;font-size:15px}.tufting th{letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:left;font-size:12px;font-weight:700}.tufting th,.tufting td{border-bottom:1px solid var(--line);padding:7px 8px}.tufting td.n{font:500 15px var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}.tufting td.r,.tufting th.r{text-align:right}.tufting input[type=color]{border:1px solid var(--line);cursor:pointer;vertical-align:middle;background:0 0;border-radius:5px;width:44px;height:30px;padding:0}@media (prefers-reduced-motion:reduce){.tufting *{transition:none!important}}.tufting .legend h3{font:700 16px var(--display);margin:18px 0 6px}.tufting .thumb{border:1px solid var(--line);background:#fff;border-radius:4px;width:72px;height:auto;display:block}.tufting td input.name{font:500 15px var(--body);border:1px solid var(--line);background:var(--cloth);width:100%;min-width:10ch;color:var(--ink);border-radius:5px;padding:4px 6px}.tufting #cart tr.cur td{background:color-mix(in srgb,var(--accent) 12%,transparent)}.tufting #cart .tabs{display:inline-flex}