.cb{--cb-dim:color-mix(in srgb, var(--paper) 62%, transparent);--cb-line:color-mix(in srgb, var(--paper) 34%, transparent);--cb-rule:color-mix(in srgb, var(--paper) 20%, transparent);--cb-pad:20px;border:2px solid var(--cb-rule);background:var(--charcoal);max-width:1320px;color:var(--paper);font-family:var(--font-display);grid-template-columns:minmax(0,1fr) clamp(320px,30vw,392px);margin-inline:auto;display:grid}.cb :focus-visible{outline:2px solid var(--yellow);outline-offset:3px}.cb-view{border-right:2px solid var(--cb-rule);grid-template-rows:auto minmax(0,1fr);min-width:0;display:grid}.cb-caption{padding:14px var(--cb-pad);border-bottom:2px solid var(--cb-rule);font:500 clamp(16px, 1.3vw, 18px) / 1.4 var(--font-display);letter-spacing:-.01em;margin:0}.cb-form{width:100%;height:clamp(420px,66svh,640px);min-height:0;position:relative}.cb-form__canvas,.cb-form__marks{width:100%;height:100%;position:absolute;inset:0}.cb-form__canvas{cursor:crosshair;touch-action:none;display:block}.cb-form__marks{pointer-events:none;overflow:visible}.cb-mark__ring{fill:none;stroke:var(--paper);stroke-width:1.5px;stroke-dasharray:3 4;opacity:.8}.cb-mark__warp{stroke:var(--paper);stroke-width:2px}.cb-mark__knob circle{fill:var(--charcoal);stroke:var(--paper);stroke-width:2px}.cb-mark__pin{fill:var(--red);stroke:var(--paper);stroke-width:2px}.cb-hint{left:var(--cb-pad);right:var(--cb-pad);font:400 11px / 1.45 var(--font-mono);letter-spacing:.04em;color:var(--cb-dim);pointer-events:none;margin:0;position:absolute;bottom:12px}.cb-hint__narrow{display:none}.cb-panel{min-width:0;padding:16px var(--cb-pad);grid-template-areas:"table""meters""cloth""actions""cuts";align-content:start;gap:14px;display:grid}.cb-tabs{display:none}.cb-table{grid-area:table;gap:8px;min-width:0;display:grid}.cb-cloth{grid-area:cloth;gap:12px;min-width:0;display:grid}.cb-cuts{grid-area:cuts;min-width:0}.cb-label{font:400 11px / 1.3 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cb-dim);margin:0}.cb-table__canvas{aspect-ratio:4/3;border:2px solid var(--cb-rule);width:100%;display:block}.cb-meters{border:2px solid var(--cb-rule);grid-area:meters;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;display:grid}.cb-meter{border-top:6px solid var(--cb-rule);gap:4px;min-width:0;padding:8px 10px;display:grid}.cb-meter+.cb-meter{border-left:2px solid var(--cb-rule)}.cb-meter[data-done]{border-top-color:var(--yellow)}.cb-meter dd{margin:0}.cb-meter__value{font:600 28px / 1 var(--font-display);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}.cb-forms,.cb-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;display:grid}.cb-actions{grid-area:actions}.cb .cb-chip,.cb .cb-button,.cb .cb-tab{border:1px solid var(--cb-line);min-width:0;min-height:36px;color:var(--paper);font:500 13px / 1 var(--font-display);white-space:nowrap;cursor:pointer;background:0 0;padding:0 10px}.cb .cb-chip[aria-pressed=true]{background:var(--paper);color:var(--charcoal);border-color:var(--paper)}.cb .cb-button[data-main]{background:var(--yellow);border-color:var(--yellow);color:var(--charcoal)}.cb .cb-button:disabled{opacity:.35;cursor:default}.cb .cb-button[data-main]:disabled{color:var(--paper);background:0 0}.cb-slider{grid-template-rows:24px auto;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 12px;display:grid}.cb-slider .cb-label{grid-area:1/1}.cb-slider__value{font:400 12px / 1 var(--font-mono);color:var(--cb-dim);white-space:nowrap;grid-area:1/2;justify-content:flex-end;align-items:center;gap:8px;display:flex}.cb-slider input{grid-area:2/1/3/3;width:100%;min-width:0;margin:0}.cb-slider[data-off]{opacity:.5}.cb-swatch{flex:none}.cb-swatch__gap{fill:var(--charcoal)}.cb-swatch__warp{stroke:var(--red);fill:none}.cb-swatch__weft{stroke:var(--paper);fill:none}.cb-swatch__edge{fill:none;stroke:var(--cb-line);stroke-width:1px}.cb-presets{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.cb-presets .cb-label{width:100%}@media (max-width:1179px){.cb{--cb-pad:16px}.cb-panel{padding:14px var(--cb-pad);gap:12px}.cb-table__canvas{aspect-ratio:16/10}.cb-meter__value{font-size:24px}}.cb-meter__note{font:400 11px / 1.2 var(--font-mono);color:var(--cb-dim);white-space:nowrap}.cb-meter__short{display:none}@media (max-width:1279px){.cb-meter__long{display:none}.cb-meter__short{display:inline}}.cb-forms,.cb-presets{border:0;min-width:0;margin:0;padding:0}.cb-cuts{min-height:98px}
@media (max-width:899px){.cb{--cb-pad:12px;--cb-slot:172px;border-width:0;grid-template-rows:minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);height:min(100svh - 32px,820px);min-height:600px}.cb-view{border-right:0}.cb-caption{padding:8px var(--cb-pad);font-size:15px;line-height:1.35}.cb-form{height:auto;min-height:0}.cb-form__canvas,.cb-form__marks{height:calc(100% - 30px)}.cb-form__canvas{touch-action:pan-y}.cb-hint{white-space:nowrap;text-overflow:ellipsis;font-size:10px;bottom:8px;overflow:hidden}.cb-hint__wide{display:none}.cb-hint__narrow{display:inline}.cb-panel{grid-template-areas:"meters""actions""tabs""slot";grid-template-rows:auto auto auto var(--cb-slot);padding:8px var(--cb-pad) 10px;border-top:2px solid var(--cb-rule);gap:8px}.cb-tabs{border-bottom:2px solid var(--cb-rule);grid-area:tabs;grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.cb .cb-tab{min-height:34px;color:var(--cb-dim);border:0;border-bottom:3px solid #0000;margin-bottom:-2px}.cb .cb-tab[aria-selected=true]{color:var(--paper);border-bottom-color:var(--yellow)}.cb-table,.cb-cloth,.cb-cuts{grid-area:slot;align-content:start;min-height:0;overflow:hidden}.cb-table{grid-template-rows:auto minmax(0,1fr);height:100%}.cb-table__canvas{aspect-ratio:auto;height:100%;min-height:0}.cb-cloth{gap:8px}.cb-meter{border-top-width:4px;gap:2px;padding:5px 10px 6px}.cb-meter .cb-label{font-size:10px}.cb-meter__value{font-size:18px}.cb:not([data-tab=table]) .cb-table,.cb:not([data-tab=cloth]) .cb-cloth,.cb:not([data-tab=cuts]) .cb-cuts{visibility:hidden}.cb-meter__note{display:none}.cb-cuts{min-height:0}}@media (max-width:899px) and (max-height:720px){.cb{--cb-slot:150px;min-height:560px}.cb-caption{font-size:14px}.cb-cloth{gap:4px}}
.cb-notes__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;font-size:15px;line-height:1.6;display:grid}.cb-note{border-top:2px solid var(--ink);min-width:0;padding:16px 0 28px}.cb-note[data-wide]{grid-column:1/-1}.cb-note__title{font:600 18px / 1.3 var(--font-display);margin:0 0 8px}.cb-note__fold{margin:0;display:none}.cb-note__toggle{width:100%;min-height:48px;color:inherit;font:600 17px / 1.3 var(--font-display);text-align:left;cursor:pointer;background:0 0;border:0;justify-content:space-between;align-items:center;gap:16px;padding:0;display:flex}.cb-note__toggle:focus-visible{outline:2px solid var(--blue);outline-offset:3px}.cb-note__sign{flex:none;width:12px;height:12px;position:relative}.cb-note__sign:before,.cb-note__sign:after{content:"";background:currentColor;position:absolute;inset:5px 0}.cb-note__sign:after{transition:rotate var(--dur-2) var(--ease-out);rotate:90deg}.cb-note[data-expanded=true] .cb-note__sign:after{rotate:0deg}.cb-notes p{max-width:68ch;margin:0}.cb-notes p+p{margin-top:12px}.cb-sources{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 48px;margin:0;padding-left:1.2em;font-size:14px;line-height:1.5;display:grid}.cb-out{color:inherit;text-underline-offset:3px;text-decoration:underline}.cb-out__arrow{width:.72em;height:.72em;margin-left:.28em}@media (max-width:900px){.cb-notes__grid,.cb-sources{grid-template-columns:minmax(0,1fr)}}@media (max-width:640px){.cb-note{padding:0}.cb-note__title{display:none}.cb-note__fold{display:block}.cb-note__body{padding-bottom:22px;display:none}.cb-note[data-expanded=true]>.cb-note__body{display:block}}@media (prefers-reduced-motion:reduce){.cb-note__sign:after{transition:none}}