:root{--primary: #2b2b2b;--accent: #9a4a2f;--text: #1a1a1a;--muted: #585856;--border-strong: #82827e;--grid: #dcdcd8;--bg: #f5f5f3;--surface: #ffffff;--field: #efeee8;--field-hover: #e3e2da;--font-size: 16px;--line-height: 1.7}*,*:before,*:after{box-sizing:border-box}html,body{margin:0}body{background:var(--bg);color:var(--text);font-size:var(--font-size);line-height:var(--line-height);font-family:system-ui,-apple-system,Hiragino Sans,Noto Sans JP,Yu Gothic UI,sans-serif;overflow-x:hidden}button,input,select{font:inherit;color:inherit}button{background:var(--surface);border:1px solid var(--border-strong);border-radius:4px;padding:2px 10px;cursor:pointer}button[aria-pressed=true],button[aria-selected=true]{background:var(--primary);color:var(--surface)}button:disabled{color:var(--muted);cursor:default;opacity:.6}button.accent{border-color:var(--accent);color:var(--accent)}:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.app{display:flex;flex-direction:column;min-height:100vh}.toolbar{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px 16px;padding:8px 16px;background:var(--surface);border-bottom:1px solid var(--border-strong)}.toolbar h1{grid-row:span 2;font-size:1.1rem;margin:0 8px 0 0;color:var(--primary);letter-spacing:.1em}.toolbar-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;min-width:0}.row-label{width:3.5em;font-size:.75rem;color:var(--muted);letter-spacing:.1em}.toolbar .group{display:flex;align-items:center;gap:4px}.group-label{color:var(--muted);font-size:.875rem}.status{min-height:1.7em;margin:0;padding:0 16px;color:var(--muted);font-size:.875rem}.body{display:flex;flex:1;min-width:0;gap:16px;padding:0 16px 16px}.panel-left .body{flex-direction:row-reverse}.workspace{flex:1;min-width:0;overflow:auto}.panes{--cell: 14px;--gap: 16px;--pad: 6px;--ruler: 30px;--band-gap: 4px;--band: calc(var(--cell) + var(--band-gap));display:grid;grid-template-columns:max-content max-content;grid-template-areas:"tieup threading" "treadling drawdown" ". preview";gap:var(--gap);align-items:end;width:max-content;padding:var(--band) var(--ruler) var(--ruler) var(--band)}.pane-tieup{grid-area:tieup;justify-self:end}.pane-threading{grid-area:threading}.pane-treadling{grid-area:treadling;align-self:start;justify-self:end;display:flex}.pane-drawdown{grid-area:drawdown;align-self:start}.pane-preview{grid-area:preview;align-self:start}.layout-below .pane-preview{margin-left:calc(-1 * var(--band))}.layout-side .panes{grid-template-columns:max-content max-content max-content;grid-template-areas:"tieup threading ." "treadling drawdown preview"}.layout-side .pane-preview{margin-top:calc(-1 * var(--band))}.layout-tab .pane-preview{grid-area:drawdown;margin:calc(-1 * var(--band)) 0 0 calc(-1 * var(--band))}.tab-structure .pane-preview{display:none}.tab-preview .pane-tieup,.tab-preview .pane-threading,.tab-preview .pane-treadling,.tab-preview .pane-drawdown{visibility:hidden}.tabs{display:flex;gap:4px;margin-bottom:8px}.hint{margin:0 0 4px;color:var(--muted);font-size:.8125rem}.shed-warning{margin:0 0 8px;padding:2px 10px;border-left:3px solid var(--accent);color:var(--accent);font-size:.875rem}.shed-warning p{margin:0}.label.unbalanced{color:var(--accent);font-weight:700;box-shadow:inset 0 -2px 0 var(--accent)}.tieup-legend{display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px;margin:0 0 4px;font-size:.75rem;line-height:1.3;color:var(--muted)}.tieup-legend .swatch{display:inline-block;width:10px;height:10px;border:1px solid var(--border-strong);background:var(--surface)}.tieup-legend .swatch.on{background:var(--primary)}.legend-sep{margin:0 2px}.pane{background:var(--surface);border:1px solid var(--border-strong);padding:var(--pad)}.cells{position:relative}.cells-visible{position:absolute;display:grid}.grid-canvas{position:relative}.grid-canvas canvas{position:absolute;display:block}.tieup-grid{display:grid}.pane-tieup .tieup-grid{width:max-content;margin-left:auto}.cell{width:var(--cell);height:var(--cell);padding:0;border:0;border-radius:0;background:var(--surface);display:block}.cell.on{background:var(--primary)}.grid-on .cell{box-shadow:inset -1px -1px 0 var(--grid)}.grid-on .cell.on{box-shadow:inset -1px -1px 0 var(--muted)}.cell:focus-visible{outline-offset:-2px}.label,.corner{display:flex;align-items:center;justify-content:center;font-size:clamp(6px,calc(var(--cell) * .72),14px);line-height:1;color:var(--muted);font-variant-numeric:tabular-nums}.strip-top,.strip-left{position:relative}.tick{position:absolute;display:flex;align-items:flex-end;justify-content:center;line-height:1;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}.strip-top,.strip-left{-webkit-user-select:none;user-select:none;cursor:default}.tick.selected{background:var(--primary);color:var(--surface)}.strip-top .tick.gap-before{border-left:3px double var(--muted)}.strip-top .tick.gap-after{border-right:3px double var(--muted)}.strip-left .tick.gap-before{border-top:3px double var(--muted)}.strip-left .tick.gap-after{border-bottom:3px double var(--muted)}.thread-menu{position:fixed;z-index:10;display:flex;flex-direction:column;min-width:12em;background:var(--surface);border:1px solid var(--border-strong);border-radius:6px;padding:4px;box-shadow:0 4px 12px #00000026}.thread-menu button{border:0;text-align:left;padding:4px 10px;border-radius:4px}.thread-menu button:not(:disabled):hover,.thread-menu button:focus-visible{background:var(--bg)}.strip-top .tick{bottom:2px;overflow:visible}.strip-top .tick{writing-mode:vertical-rl;text-orientation:upright;letter-spacing:-.1em;align-items:center}.strip-left .tick{right:3px;align-items:center;justify-content:flex-end}.preview-inner{position:relative;width:max-content;padding:var(--band) var(--ruler) var(--ruler) var(--band)}.band,.band input[type=color]{position:absolute}.band-warp{top:0;left:var(--band)}.band-weft{top:var(--band);left:0}.number-strip{position:relative}.number-strip input{position:absolute}.number-strip-row{border-top:1px solid var(--border-strong)}.number-strip-column{border-left:1px solid var(--border-strong)}.number-strip input{padding:0;border:0;border-radius:0;text-align:center;background:var(--field);color:var(--text);font-size:clamp(8px,calc(var(--cell) * .65),14px);font-variant-numeric:tabular-nums}.number-strip{box-sizing:content-box}.number-strip-row{border-left:1px solid var(--border-strong);margin-left:-1px}.number-strip-column{border-top:1px solid var(--border-strong);margin-top:-1px}.number-strip input{box-shadow:inset -1px -1px 0 var(--border-strong);cursor:text}.number-strip input:hover{background:var(--field-hover)}.number-strip input.selected{background:var(--grid)}.number-strip input:focus{outline:2px solid var(--accent);outline-offset:-2px;background:var(--bg)}.ruler{position:absolute;color:var(--muted);font-size:11px;line-height:1;font-variant-numeric:tabular-nums}.ruler-horizontal{left:var(--band);bottom:0;height:calc(var(--ruler) - 4px);border-top:1px solid var(--border-strong)}.ruler-vertical{top:var(--band);right:0;width:calc(var(--ruler) - 4px);border-left:1px solid var(--border-strong)}.ruler-tick{position:absolute}.ruler-horizontal .ruler-tick{top:0;height:6px;border-left:1px solid var(--border-strong)}.ruler-vertical .ruler-tick{left:0;width:6px;border-top:1px solid var(--border-strong)}.ruler-horizontal .ruler-num{position:absolute;top:8px;left:0;transform:translate(-50%)}.ruler-vertical .ruler-num{position:absolute;left:8px;top:0;transform:translateY(-50%)}.ruler-unit{position:absolute;white-space:nowrap}.ruler-horizontal .ruler-unit{right:0;top:8px;transform:translate(calc(100% + 4px))}.ruler-vertical .ruler-unit{left:0;top:0;transform:translateY(calc(-100% - 4px))}.band input[type=color]{padding:0;border:0;border-radius:0;cursor:pointer;background:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.band input[type=color]::-webkit-color-swatch-wrapper{padding:0}.band input[type=color]::-webkit-color-swatch{border:0}.band input[type=color]::-moz-color-swatch{border:0}.zoom-value{min-width:4.2em;font-variant-numeric:tabular-nums}.inspector{flex:0 0 260px;align-self:flex-start;position:sticky;top:8px;background:var(--surface);border:1px solid var(--border-strong);border-radius:6px;padding:8px 12px;font-variant-numeric:tabular-nums}.inspector.collapsed{flex-basis:2.5em;padding:4px}.inspector-edge{display:flex;justify-content:flex-end}.panel-left .inspector-edge{justify-content:flex-start}.inspector.collapsed .inspector-edge{justify-content:center}.inspector-edge button{min-width:2em;padding:0 4px;line-height:1.6}.inspector h2{font-size:.875rem;color:var(--muted);margin:8px 0 4px;letter-spacing:.2em;border-bottom:1px solid var(--grid)}.field{display:grid;grid-template-columns:4.2em auto 1fr;align-items:center;gap:6px;margin:4px 0}.field select{grid-column:2 / 4;border:1px solid var(--border-strong);border-radius:4px;background:var(--surface)}.stepper{display:flex}.stepper button{padding:0 6px;border-radius:0}.stepper input{width:3.2em;text-align:right;border:1px solid var(--border-strong);border-left:0;border-right:0}.suffix{font-size:.875rem;color:var(--muted);white-space:nowrap}.finished-size dl{display:grid;grid-template-columns:4.2em 1fr;gap:2px 6px;margin:4px 0 0}.finished-size dt{color:var(--text)}.finished-size dd{margin:0;font-variant-numeric:tabular-nums}.finished-size p{margin:4px 0 0;font-variant-numeric:tabular-nums}.finished-size h3{margin:10px 0 0;font-size:.875rem}.finished-size h3 .note{margin:0 0 0 4px;font-weight:400}.note{font-size:.8125rem;color:var(--muted);margin:8px 0 0}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000059;display:grid;place-items:center;padding:16px}.dialog{background:var(--surface);border:1px solid var(--border-strong);border-radius:8px;padding:16px 20px;max-width:480px;width:100%;max-height:calc(100vh - 32px);overflow-y:auto}.initial-values h2{font-size:.875rem;color:var(--muted);margin:8px 0 4px;letter-spacing:.2em;border-bottom:1px solid var(--grid)}.dialog h2{margin:0 0 8px;font-size:1.1rem}.dialog fieldset{border:0;padding:0;margin:0 0 12px}.dialog legend{font-weight:700;margin-bottom:4px}.dialog label{margin-right:16px}.dialog .actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.candidate-window{max-width:720px}.candidate-rules{display:flex;flex-wrap:wrap;align-items:center;gap:4px 24px}.candidate-rules fieldset{margin:0}.candidate-rules .field{grid-template-columns:auto auto auto;margin:0}.candidate-rules .field .suffix:empty{display:none}.candidates{list-style:none;padding:0;margin:12px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.candidates li{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}.candidate-pick{padding:4px;line-height:0;background:var(--surface);border:1px solid var(--border-strong)}.candidate-pick:hover,.candidate-pick:focus-visible{outline:2px solid var(--text);outline-offset:1px}.candidate-picture{display:block}.candidate-label{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.8125rem;font-variant-numeric:tabular-nums;color:var(--muted)}.tieup-mini{display:inline-flex;flex-direction:column;border:1px solid var(--border-strong)}.tieup-mini-row{display:flex}.tieup-mini-cell{width:10px;height:10px;background:#fff;box-shadow:inset -1px -1px 0 var(--grid)}.tieup-mini-cell.on{background:#000}.dialog .candidate-keep{margin:0;font-size:.875rem}.shelf{position:sticky;bottom:0;display:flex;align-items:center;gap:12px;padding:6px 16px;background:var(--surface);border-top:1px solid var(--border-strong)}.shelf h2{margin:0;font-size:.875rem;color:var(--muted);white-space:nowrap;letter-spacing:.1em}.shelf ol{list-style:none;display:flex;gap:8px;margin:0;padding:0;overflow-x:auto;flex:1;min-width:0}.shelf li{position:relative;flex:none}.shelf-pick{padding:2px;line-height:0;border:1px solid var(--border-strong)}.shelf-pick:hover,.shelf-pick:focus-visible{outline:2px solid var(--text);outline-offset:1px}.shelf-remove{position:absolute;top:-4px;right:-4px;width:18px;height:18px;padding:0;line-height:16px;font-size:12px;border-radius:9px}.shelf-clear{flex:none}.flipbook{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;overflow:auto;background:var(--bg);padding:12px 16px 24px}.flipbook-bar{display:flex;align-items:center;justify-content:space-between;gap:12px}.flipbook-bar h2{margin:0;font-size:1.1rem}.flipbook-controls,.flipbook-rules{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:12px}.flipbook-rules .field{grid-template-columns:auto auto auto;margin:0}.flipbook-rules .field .suffix:empty{display:none}.flipbook-frame{font-variant-numeric:tabular-nums;color:var(--muted)}.flipbook-seq{font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:.1em}.flipbook-seq-pair,.flipbook-interval{display:inline-flex;align-items:center;gap:8px}.flipbook-grid{list-style:none;padding:0;margin:16px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.flipbook-grid li{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}.flipbook-actions{display:flex;gap:8px}.flipbook-unusable{margin-top:24px}@media (max-width: 720px){.body{flex-direction:column;padding:0 8px 16px}.panel-left .body{flex-direction:column}.workspace{overflow:visible}.panes,.layout-side .panes,.layout-tab .panes{display:flex;flex-direction:column;align-items:stretch;width:100%;padding:0}.pane{overflow-x:auto;max-width:100%;order:0}.pane-threading{order:1}.pane-tieup{order:2;justify-self:auto}.pane-treadling{order:3;justify-self:auto}.pane-drawdown{order:4}.pane-preview,.layout-below .pane-preview,.layout-side .pane-preview,.layout-tab .pane-preview{order:5;margin:0}.tab-preview .pane-tieup,.tab-preview .pane-threading,.tab-preview .pane-treadling,.tab-preview .pane-drawdown{display:none}.inspector{position:static;flex-basis:auto;width:100%}.candidates,.flipbook-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.toolbar{grid-template-columns:1fr}.toolbar h1{grid-row:auto}}