.fabric-explorer{--fx-paper:#f8f5ef;--fx-paper-bright:#fffdf9;--fx-ink:#29231f;--fx-muted:#756b62;--fx-line:#3e332b29;--fx-wine:#733d42;--fx-wine-soft:#f1e4e4;--fx-sage:#66745e;--fx-sage-soft:#e4e9df;box-sizing:border-box;width:100%;color:var(--fx-ink);background:var(--fx-paper);border:1px solid var(--fx-line);padding:clamp(22px,3vw,34px);overflow:hidden}.fabric-explorer *,.fabric-explorer :before,.fabric-explorer :after{box-sizing:border-box}.fx-heading{max-width:720px;margin:0 0 30px}.fx-eyebrow{color:var(--fx-wine);letter-spacing:.14em;text-transform:uppercase;font-size:11px;font-weight:700}.fx-heading h2{font:400 clamp(27px, 3vw, 34px)/1.3 var(--font-prata,Georgia, serif);letter-spacing:-.025em;margin:14px 0 10px}.fx-heading p{color:var(--fx-muted);margin:0;font-size:15px;line-height:1.7}.fx-layout{grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr);align-items:center;gap:clamp(24px,4vw,54px);display:grid}.fx-stage{background:var(--fx-paper-bright);border:1px solid var(--fx-line);min-width:0;padding:20px}.fx-stage-top{color:var(--fx-muted);letter-spacing:.04em;justify-content:space-between;align-items:center;gap:12px;margin-bottom:15px;font-size:11px;display:flex}.fx-scale{color:var(--fx-wine);letter-spacing:.1em;text-transform:uppercase;font-size:10px}.fx-weave-svg,.fx-yarn-svg,.fx-cloth-svg{width:min(100%,440px);height:auto;margin:0 auto;display:block;overflow:visible}.fx-weave-svg{width:min(100%,324px)}.fx-weave-ground{fill:#e8dfd2}.fx-strand{fill:none;stroke-width:20px;stroke-linecap:round;stroke-linejoin:round;transition:opacity .24s,stroke-width .24s}.fx-warp-strand{stroke:url(#fx-weave-warp)}.fx-weft-strand{stroke:url(#fx-weave-weft)}.fx-strand-dim{opacity:.16}.fx-over-segment{fill:none;stroke-width:20px;stroke-linecap:round;transition:opacity .24s}.fx-over-selected{stroke-width:22px}.fx-svg-label{fill:var(--fx-muted);letter-spacing:1.1px;font:700 9px/1 sans-serif}.fx-cloth-warp{fill:none;stroke:#7d6657;stroke-width:3px;stroke-opacity:.62}.fx-cloth-weft{fill:none;stroke:#fff8ed;stroke-width:3.3px;stroke-opacity:.8}.fx-zoom-frame{fill:none;stroke:var(--fx-wine);stroke-width:2px;stroke-dasharray:5 4}.fx-zoom-link{fill:none;stroke:var(--fx-wine);stroke-width:1px;stroke-dasharray:3 4;stroke-opacity:.75}.fx-inset-paper{fill:var(--fx-paper-bright);stroke:var(--fx-line);stroke-width:1px}.fx-inset-thread{fill:none;stroke-width:8px;stroke-linecap:round}.fx-inset-warp{stroke:var(--fx-wine)}.fx-inset-weft{stroke:var(--fx-sage)}.fx-inset-under{stroke:#cbbba8}.fx-axis-labels{color:var(--fx-muted);justify-content:space-between;margin:13px 3px 0;font-size:12px;display:flex}.fx-legend{color:var(--fx-muted);justify-content:center;gap:19px;margin-top:19px;font-size:11px;display:flex}.fx-legend>span{align-items:center;gap:7px;display:inline-flex}.fx-scene-caption{color:var(--fx-muted);margin:16px 0 0;font-size:12px;line-height:1.7}.fx-dot{border-radius:50%;width:9px;height:9px;display:inline-block}.fx-wine-dot{background:var(--fx-wine)}.fx-sage-dot{background:var(--fx-sage)}.fx-controls{min-width:0}.fx-depth{background:#e9e2d7;border-radius:3px;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;max-width:580px;margin-bottom:26px;padding:4px;display:grid}.fx-depth button,.fx-options button,.fx-highlight button{min-width:0;min-height:42px;color:var(--fx-ink);font:inherit;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:2px;padding:9px 11px;font-size:12px;line-height:1.35;transition:background-color .18s,color .18s,border-color .18s}.fx-depth button[aria-pressed=true]{color:#fff;background:var(--fx-wine)}.fx-explanation{padding:24px 0 20px}.fx-step{color:var(--fx-wine);letter-spacing:.14em;font-size:10px;font-weight:700}.fx-explanation h3{font:400 clamp(20px, 2vw, 25px)/1.35 var(--font-prata,Georgia, serif);margin:10px 0}.fx-explanation p,.fx-hint{color:var(--fx-muted);margin:0;font-size:13px;line-height:1.75}.fx-control-label{letter-spacing:.05em;margin:2px 0 10px;font-size:11px;font-weight:700}.fx-options{flex-wrap:wrap;gap:7px;display:flex}.fx-options button,.fx-highlight button{border-color:var(--fx-line);background:var(--fx-paper-bright);text-align:left}.fx-options button[aria-pressed=true],.fx-highlight button[aria-pressed=true]{border-color:var(--fx-wine);color:var(--fx-wine);background:var(--fx-wine-soft)}.fx-hint{margin-top:11px;font-size:11px}.fx-highlight{flex-wrap:wrap;gap:8px;margin-top:17px;display:flex}.fx-highlight button{min-height:38px;font-size:11px}.fx-footnote{border-top:1px solid var(--fx-line);color:var(--fx-muted);margin:20px 0 0;padding-top:13px;font-size:10px;line-height:1.6}.fx-fiber{fill:none;stroke:#fffaf1;stroke-width:4.5px;stroke-linecap:round;opacity:.95;filter:drop-shadow(0 1px 1px #302a2733);transform-box:fill-box;transform-origin:50%;transition:transform .4s}.fx-filament{fill:none;stroke:#fffaf1;stroke-width:1.7px;opacity:.9}.fx-ply{fill:none;stroke-width:8px;stroke-linecap:round}.fx-ply-0{stroke:#733d42}.fx-ply-1{stroke:#66745e}.fx-ply-2{stroke:#b38a63}.fx-ply-shine{fill:none;stroke:#fff8e9;stroke-width:1.4px;stroke-linecap:round;stroke-opacity:.68;transform:translateY(-2px)}.fx-ply-group{transform-box:fill-box;transform-origin:50%;transition:transform .42s}.fx-unravel{border:1px solid var(--fx-wine);color:#fff;background:var(--fx-wine);min-height:40px;font:inherit;cursor:pointer;border-radius:2px;align-items:center;margin-top:13px;padding:9px 14px;font-size:12px;display:inline-flex}.fx-unravel[aria-pressed=true]{color:var(--fx-wine);background:var(--fx-wine-soft)}.fabric-explorer button:hover{border-color:var(--fx-wine)}.fabric-explorer button:focus-visible{outline-offset:2px;outline:3px solid #a97885}@media (width<=760px){.fx-layout{grid-template-columns:minmax(0,1fr)}.fx-stage{width:100%;max-width:520px;margin:0 auto}.fx-controls{width:100%}}@media (width<=390px){.fabric-explorer{padding:18px 14px}.fx-stage{padding:13px}.fx-depth button{padding:8px 4px;font-size:11px}.fx-options button{max-width:100%}.fx-yarn-options button{overflow-wrap:anywhere}.fx-highlight{grid-template-columns:1fr 1fr;display:grid}.fx-highlight button{text-align:center;padding-inline:7px}}@media (prefers-reduced-motion:reduce){.fx-strand,.fx-over-segment,.fx-fiber,.fx-ply-group,.fx-depth button,.fx-options button,.fx-highlight button,.fx-unravel{transition:none}}@media (prefers-reduced-motion:no-preference){.fx-cloth-svg,.fx-weave-svg,.fx-yarn-svg{animation:.3s ease-out fx-reveal}@keyframes fx-reveal{0%{opacity:.25;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}}