:root{--linen: #efe9dd;--linen-2: #e7dfd0;--card: #faf7f0;--thread: #d8cfbd;--ink: #2e2a24;--ink-dim: #7a7264;--ink-faint: #a99f8c;--accent: #c96f2e;--accent-soft: #f3dfc9;--mono: ui-monospace, "Cascadia Code", Consolas, monospace}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:Segoe UI,system-ui,sans-serif;font-size:13px;color:var(--ink);background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(120,105,80,.02) 2px 3px),repeating-linear-gradient(90deg,transparent 0 2px,rgba(120,105,80,.02) 2px 3px),var(--linen);overflow:hidden}button,input,select,label,[role=slider]{touch-action:manipulation;-webkit-tap-highlight-color:transparent}.wheel{touch-action:none}@media(hover:none){.t-btn:active,.play-btn:active,.chip:active,.seg-btn:active,.cell:active,.pattern-load:active{border-color:var(--accent)}}.app{height:100%;display:flex;flex-direction:column}.topbar{flex:0 0 auto;display:flex;align-items:center;gap:16px;height:54px;padding:0 18px;background:var(--card);border-bottom:1px solid var(--thread)}.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}.brand-mark{width:26px;height:26px;border-radius:6px;background:repeating-linear-gradient(0deg,transparent 0 4px,rgba(46,42,36,.5) 4px 5.5px),repeating-linear-gradient(90deg,transparent 0 7px,rgba(46,42,36,.25) 7px 8px),var(--accent)}.brand-text{display:flex;flex-direction:column;line-height:1.15}.brand-text strong{font-size:14.5px;letter-spacing:.03em}.brand-text span{font-size:10px;color:var(--ink-dim);letter-spacing:.14em;text-transform:uppercase}.toast{position:fixed;top:62px;left:50%;transform:translate(-50%);z-index:50;max-width:min(480px,92vw);background:var(--card);border:1px solid var(--accent);border-radius:999px;padding:9px 20px;font-size:13px;color:var(--ink);text-align:center;box-shadow:0 10px 30px #2e2a2440;animation:toastin .18s ease;pointer-events:none}@keyframes toastin{0%{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%)}}@keyframes fadein{0%{opacity:0}}.top-actions{margin-left:auto;display:flex;gap:7px}.t-btn{font:inherit;font-size:10.5px;letter-spacing:.14em;padding:6px 13px;border-radius:6px;border:1px solid var(--thread);background:var(--card);color:var(--ink);cursor:pointer;transition:all .12s}@media(hover:hover){.t-btn:hover{border-color:var(--accent);color:var(--accent)}}.t-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}.main{flex:1;display:flex;min-height:0}.workbench{flex:1;display:flex;flex-direction:column;min-width:0;padding:18px;gap:12px}.stage{flex:1;display:grid;grid-template-columns:1fr;place-items:center;gap:16px;min-height:0}.stage.split{grid-template-columns:1fr 1fr}.cloth{position:relative;margin:0;max-width:100%;max-height:100%;display:grid;place-items:center;padding:14px;background:var(--card);border:1px solid var(--thread);border-radius:4px;box-shadow:0 10px 30px #3c32231f,0 2px 6px #3c322314}.canvas-wrap{position:relative;display:inline-block;line-height:0}.canvas-wrap.clickable{cursor:crosshair}.overlay-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;image-rendering:pixelated}.loom-canvas{display:block;max-width:min(72vw,100%);max-height:52vh;width:auto;height:auto;image-rendering:pixelated;background:transparent}.stage.split .loom-canvas{max-width:34vw}.cloth-tag{position:absolute;top:-9px;left:14px;padding:2px 10px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;background:var(--ink);color:var(--linen);border-radius:999px}.cloth-tag.control{background:var(--ink-dim)}.fetching{position:absolute;inset:14px;display:grid;place-items:center;font-size:11px;letter-spacing:.2em;color:var(--ink-faint);text-transform:uppercase}.tracks{flex:0 0 auto;display:flex;flex-direction:column;gap:8px;padding:10px 14px 8px;background:var(--card);border:1px solid var(--thread);border-radius:8px}.strip-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}.strip-title{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);font-weight:700}.strip-range{font-family:var(--mono);font-size:10px;color:var(--ink-faint)}.strip-cells{display:flex;gap:3px;overflow:hidden;padding:1px}.strip-empty{font-size:11px;font-style:italic;color:var(--ink-faint);padding:6px 2px}.cell{font:inherit;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:1px;padding:3px 5px 4px;border:1px solid var(--linen-2);border-radius:5px;background:#fff;cursor:pointer;transition:border-color .1s}@media(hover:hover){.cell:hover{border-color:var(--accent)}}.cell.head{border-color:var(--ink-dim)}.cell.selected{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent)}.cell-idx{font-family:var(--mono);font-size:8px;color:var(--ink-faint)}.cell-digits{display:flex;gap:2px;font-family:var(--mono);font-size:11.5px;color:var(--ink)}.dg{padding:0 2px;border-radius:3px}.dg-0{background:#f3dfc9}.dg-1{background:#dcead2}.dg-2{background:#d7e3ee}.dg-3{background:#ecdcec}.dg-4{background:#f0e6c8}.dg-5{background:#dfe8e6}.strip-scrub{width:100%;margin-top:5px}.inspect-line{font-family:var(--mono);font-size:10.5px;color:var(--ink-dim);border-top:1px dashed var(--linen-2);padding-top:6px}.transport{flex:0 0 auto;display:flex;align-items:center;gap:14px;padding:10px 14px;background:var(--card);border:1px solid var(--thread);border-radius:8px}.play-btn{font:inherit;font-size:13px;width:42px;height:42px;border-radius:50%;border:1px solid var(--thread);background:var(--card);color:var(--ink);cursor:pointer;transition:all .12s}@media(hover:hover){.play-btn:hover{border-color:var(--accent);color:var(--accent)}}.play-btn.paused{background:var(--accent);border-color:var(--accent);color:#fff}.frame-readout{font-family:var(--mono);font-size:12px;color:var(--ink-dim);min-width:84px}.scrub,.transport-spacer{flex:1}.follow-rate{display:inline-flex;align-items:center;gap:10px;width:235px}.follow-rate .slider-group{flex:1 1 auto}.follow-rate .check{white-space:nowrap}input[type=range]{appearance:none;-webkit-appearance:none;height:4px;border-radius:2px;background:var(--linen-2);cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);border:2.5px solid var(--card);box-shadow:0 0 0 1px var(--thread)}input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.panel{width:348px;flex:0 0 auto;overflow-y:auto;padding:16px 16px 40px;background:var(--card);border-left:1px solid var(--thread)}.section{margin-bottom:20px}.section-head h2{margin:0 0 8px;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);border-bottom:1px solid var(--linen-2);padding-bottom:5px}.row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 0;min-height:30px}.row.dim .row-label{color:var(--ink-faint);font-size:11px}.row-label{color:var(--ink-dim);font-size:12px;flex:0 0 auto}.row-control{display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:0;flex:1}.x,.unit{color:var(--ink-faint);font-size:11px;white-space:nowrap}.seg{display:inline-flex;background:var(--linen-2);border:1px solid var(--thread);border-radius:6px;padding:2px;gap:2px}.seg-btn{font:inherit;font-size:10.5px;letter-spacing:.08em;border:none;background:transparent;color:var(--ink-dim);padding:4px 10px;border-radius:4px;cursor:pointer}.seg-btn.active{background:var(--card);color:var(--ink);box-shadow:0 1px 2px #3c322326;font-weight:600}.num{font:inherit;font-size:12.5px;width:74px;padding:5px 7px;border:1px solid var(--thread);border-radius:6px;background:#fff;color:var(--ink);font-variant-numeric:tabular-nums}.num:focus{outline:none;border-color:var(--accent)}.source-chips{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}.chip{font-family:Georgia,serif;font-size:13px;padding:4px 11px;border-radius:999px;border:1px solid var(--thread);background:var(--card);color:var(--ink-dim);cursor:pointer;position:relative}.chip-order{position:absolute;top:-5px;right:-5px;min-width:14px;height:14px;border-radius:7px;color:#fff;font-family:inherit;font-size:9px;font-weight:700;line-height:14px;text-align:center;pointer-events:none}.braid-line{font-size:11px;font-style:italic;color:var(--ink-dim);text-align:right;margin:-2px 0 6px}@media(hover:hover){.chip:hover{border-color:var(--accent)}}.chip.active{background:var(--ink);border-color:var(--ink);color:var(--linen)}.dg-digit{font-weight:700}.orch-title{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin:14px 0 6px}.orch-chip{display:inline-block;min-width:30px;padding:3px 9px;border-radius:999px;color:#fff;font-family:Georgia,serif;font-size:12.5px;text-align:center}.patch-select{font:inherit;font-size:12px;padding:5px 8px;border:1px solid var(--thread);border-radius:6px;background:#fff;color:var(--ink);cursor:pointer}.patch-select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.wheel-group{display:inline-flex;align-items:center;gap:7px}.wheel{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--thread);background:radial-gradient(circle at 32% 28%,#fff 0%,var(--linen-2) 78%);box-shadow:0 2px 5px #3c322329,inset 0 -1px 2px #3c32231a;position:relative;cursor:ns-resize;touch-action:none;-webkit-user-select:none;user-select:none;flex:0 0 auto}.wheel:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.wheel-dot{position:absolute;inset:0;pointer-events:none}.wheel-dot:after{content:"";position:absolute;left:50%;top:3px;width:4px;height:10px;margin-left:-2px;border-radius:2px;background:var(--accent)}.wheel-value{font-size:12px;min-width:40px}.check{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-size:12.5px;-webkit-user-select:none;user-select:none}.check input{position:absolute;opacity:0}.check-box{width:15px;height:15px;border-radius:4px;border:1.5px solid var(--ink-dim);background:#fff;position:relative;flex:0 0 auto}.check input:checked+.check-box{background:var(--accent);border-color:var(--accent)}.check input:checked+.check-box:after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)}.check input:focus-visible+.check-box{outline:2px solid var(--accent);outline-offset:2px}.slider-group{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.slider-group input[type=range]{flex:1;min-width:60px}.slider-value{font-variant-numeric:tabular-nums;color:var(--ink-dim);font-size:11.5px;min-width:58px;text-align:right}.prop{border:1px solid var(--linen-2);border-radius:8px;padding:8px 10px 4px;margin-bottom:8px;background:#ffffff80}.prop.disabled{opacity:.45;pointer-events:none}.prop-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:26px}.prop-name{font-size:12.5px;font-weight:600;color:var(--ink);min-width:78px}.prop-hint{font-size:10.5px;font-style:italic;color:var(--ink-faint);padding:3px 0 4px}.budget-card{border:1px solid var(--accent-soft);background:var(--accent-soft);border-radius:8px;padding:10px 12px}.budget-line{font-family:var(--mono);font-size:11.5px;color:var(--ink);line-height:1.5}.budget-sub{margin-top:4px;font-family:var(--mono);font-size:10.5px;color:var(--ink-dim)}.modal-backdrop{position:fixed;inset:0;background:#2e2a2459;display:grid;place-items:center;z-index:30;animation:fadein .15s ease}.modal{width:min(460px,92vw);max-height:72vh;overflow-y:auto;background:var(--card);border:1px solid var(--thread);border-radius:10px;padding:16px 18px;box-shadow:0 24px 60px #2e2a244d}.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.modal-head h2{margin:0;font-size:15px}.modal-empty{color:var(--ink-dim);text-align:center;padding:14px 0 8px}.save-row{display:flex;gap:7px;margin-bottom:12px}.save-row input{flex:1;font:inherit;padding:7px 10px;border:1px solid var(--thread);border-radius:6px}.pattern-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.pattern-list li{display:flex;gap:6px}.pattern-load{flex:1;font:inherit;text-align:left;display:flex;justify-content:space-between;gap:8px;align-items:baseline;background:#fff;border:1px solid var(--linen-2);border-radius:7px;padding:8px 11px;cursor:pointer}@media(hover:hover){.pattern-load:hover{border-color:var(--accent)}}.pattern-meta{font-size:10.5px;color:var(--ink-faint)}.pattern-del{font:inherit;width:30px;border:1px solid var(--linen-2);border-radius:7px;background:transparent;color:var(--ink-faint);cursor:pointer}@media(hover:hover){.pattern-del:hover{color:#b3372a;border-color:#b3372a}}.modal.gate{width:min(400px,90vw);text-align:center;padding:30px 24px 22px}.modal.gate h2{margin:0 0 3px;font-size:17px}.gate-sub{color:var(--ink-dim);font-size:12.5px;margin:0 0 18px}.gate-go{font:inherit;font-size:13px;letter-spacing:.14em;padding:12px 28px;border-radius:999px;border:1px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer}.gate-go:hover{filter:brightness(1.08)}.gate-hint{color:var(--ink-dim);font-size:11px;margin:16px 0 0}.modal.guide{width:min(560px,94vw);max-height:82vh;line-height:1.55;font-size:13.5px}.guide h3{margin:16px 0 5px;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}.guide h3:first-of-type{margin-top:4px}.guide p{margin:0 0 8px}.guide ul,.guide ol{margin:0 0 8px;padding-left:20px}.guide li{margin-bottom:4px}.guide kbd{font:inherit;font-size:11px;font-weight:600;padding:1px 6px;border:1px solid var(--thread);border-bottom-width:2px;border-radius:5px;background:#fff;white-space:nowrap}@media(max-width:900px){body{overflow-y:auto;overflow-x:hidden}.main{flex-direction:column}.panel{width:100%;border-left:none;border-top:1px solid var(--thread)}.loom-canvas{max-width:92vw;max-height:48vh}.stage.split{grid-template-columns:1fr}.stage.split .loom-canvas{max-width:92vw}}@media(max-width:560px){.topbar{height:auto;flex-wrap:wrap;padding:8px 10px;row-gap:6px;column-gap:10px}.top-actions{flex-wrap:wrap;justify-content:flex-end;row-gap:6px}.workbench{padding:10px;gap:10px}.transport{flex-wrap:wrap;gap:10px;row-gap:8px}.follow-rate{width:100%}}