:root{color-scheme:light;--bg: #f6f1ea;--surface: #fffdf9;--surface-2: #f3ece2;--surface-sunken: #efe7dc;--text: #2f2621;--text-muted: #6f625a;--border: #e3d8ca;--border-strong: #cdbfae;--accent: #b5543a;--accent-hover: #9c4630;--accent-soft: #f6e1d9;--on-accent: #ffffff;--success: #2f7d4f;--warning: #a86412;--danger: #b33a3a;--info: #2f6f9f;--stage-top: #f7f0e7;--stage-bottom: #e4d6c4;--font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;--font-display: "Fraunces", Georgia, serif;--font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;--fs-xs: .75rem;--fs-sm: .8125rem;--fs-md: .875rem;--fs-lg: 1.0625rem;--fs-xl: 1.25rem;--sp-1: .25rem;--sp-2: .5rem;--sp-3: .75rem;--sp-4: 1rem;--sp-6: 1.5rem;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-pill: 999px;--shadow-1: 0 1px 2px rgba(60, 40, 25, .06);--shadow-2: 0 2px 6px rgba(60, 40, 25, .08);--shadow-3: 0 10px 24px rgba(60, 40, 25, .14);--panel-left: 340px;--panel-right: 340px;--topbar: 56px}@media (prefers-color-scheme: dark){:root{color-scheme:dark;--bg: #1b1714;--surface: #24201c;--surface-2: #2c2723;--surface-sunken: #1f1b18;--text: #f1e9e1;--text-muted: #b4a69a;--border: #3a332d;--border-strong: #4d443c;--accent: #e08a6c;--accent-hover: #ea9e83;--accent-soft: #3b2a23;--on-accent: #1b1714;--success: #7cc79a;--warning: #e6b35e;--danger: #ec8a8a;--info: #8ab9e0;--stage-top: #2b2521;--stage-bottom: #1a1613;--shadow-1: 0 1px 2px rgba(0, 0, 0, .3);--shadow-2: 0 2px 6px rgba(0, 0, 0, .35);--shadow-3: 0 10px 24px rgba(0, 0, 0, .45)}}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:var(--fs-md);line-height:1.5;-webkit-font-smoothing:antialiased}#app{display:grid;grid-template-columns:var(--panel-left) minmax(0,1fr) var(--panel-right);grid-template-rows:var(--topbar) minmax(0,1fr);grid-template-areas:"top top top" "editor stage panel";height:100vh;width:100vw}#topbar{grid-area:top;display:flex;align-items:center;justify-content:space-between;padding:0 var(--sp-4);background:var(--surface);border-bottom:1px solid var(--border)}.brand{display:flex;align-items:center;gap:var(--sp-3)}.brand-mark{width:30px;height:30px;fill:var(--accent-soft);stroke:var(--accent);stroke-width:1.6;stroke-linecap:round}.brand-mark path{fill:none}.brand-name{margin:0;font-family:var(--font-display);font-size:var(--fs-lg);font-weight:600;line-height:1.2}.brand-tagline{margin:0;font-size:var(--fs-xs);color:var(--text-muted)}#editor-panel,#panel{overflow-y:auto;background:var(--surface);padding:var(--sp-4)}#editor-panel{grid-area:editor;border-right:1px solid var(--border)}#panel{grid-area:panel;border-left:1px solid var(--border)}.panel-title{display:flex;align-items:center;gap:var(--sp-2);margin:0 0 var(--sp-3);font-family:var(--font-display);font-size:var(--fs-xl);font-weight:600}.step{display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:var(--radius-pill);background:var(--accent);color:var(--on-accent);font-family:var(--font-body);font-size:var(--fs-sm);font-weight:600}h2{margin:0 0 var(--sp-2);font-size:var(--fs-sm);font-weight:600;letter-spacing:.02em;color:var(--text)}h3{margin:var(--sp-4) 0 var(--sp-2);font-size:var(--fs-sm);font-weight:600}section+section,.tab-panel>section+section,.tab-panel>section+details{margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--border)}#editor-panel>div>section,#editor-panel>div>.status+section{margin-top:var(--sp-4)}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}label{display:block;margin-top:var(--sp-3);font-size:var(--fs-sm);color:var(--text-muted)}label.check{display:flex;align-items:center;gap:var(--sp-2);color:var(--text)}label.check input{width:1rem;height:1rem;margin:0;accent-color:var(--accent)}textarea,select,input[type=number],input[type=text]{width:100%;margin-top:var(--sp-1);padding:var(--sp-2) var(--sp-3);background:var(--surface-sunken);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);font:inherit}textarea{font-family:var(--font-mono);font-size:var(--fs-sm);line-height:1.6;resize:vertical}#pattern-source{min-height:200px}input[type=file]{width:100%;margin-top:var(--sp-1);font-size:var(--fs-sm)}input[type=range]{width:100%;margin-top:var(--sp-1);accent-color:var(--accent)}textarea:hover,select:hover,input[type=number]:hover,input[type=text]:hover{border-color:var(--border-strong)}button{padding:var(--sp-2) var(--sp-3);background:var(--surface-2);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);font:inherit;font-size:var(--fs-sm);font-weight:500;cursor:pointer;transition:background-color .12s ease,border-color .12s ease}button:hover{background:var(--surface-sunken);border-color:var(--border-strong)}button:disabled{opacity:.55;cursor:not-allowed}button.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}button.primary:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}button.ghost{background:transparent;border-color:transparent;color:var(--text-muted)}button.ghost:hover{background:var(--surface-2);color:var(--text)}button[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}.button-row{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}.button-row button{flex:1 1 auto}.button-row.compact{gap:var(--sp-1);margin-top:var(--sp-2)}.button-row.compact button{padding:var(--sp-1) var(--sp-2);font-size:var(--fs-xs)}.segmented{display:flex;padding:3px;gap:3px;background:var(--surface-sunken);border:1px solid var(--border);border-radius:var(--radius-md)}.segmented button{flex:1;border:none;background:transparent;color:var(--text-muted)}.segmented button[aria-selected=true]{background:var(--surface);color:var(--text);box-shadow:var(--shadow-1)}.range-with-number{display:flex;gap:var(--sp-2);align-items:center}.range-with-number input[type=number]{width:5rem;flex:none}.hint{margin:var(--sp-2) 0 0;font-size:var(--fs-xs);color:var(--text-muted)}code{font-family:var(--font-mono);font-size:.92em;padding:0 .25em;background:var(--surface-sunken);border-radius:4px}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.disclosure{margin-top:var(--sp-4);border:1px solid var(--border);border-radius:var(--radius-md);padding:0 var(--sp-3)}.disclosure>summary{padding:var(--sp-2) 0;cursor:pointer;font-size:var(--fs-sm);font-weight:500;color:var(--text-muted);list-style-position:inside}.disclosure[open]{padding-bottom:var(--sp-3)}.disclosure[open]>summary{color:var(--text)}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--sp-3) var(--sp-4);box-shadow:var(--shadow-1)}#editor-panel .card{margin-top:var(--sp-3)}.status{min-height:1.4em;margin:var(--sp-3) 0 0;font-size:var(--fs-sm)}.status:empty{display:none}.status[data-status]{padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm);background:var(--surface-2)}.status[data-status=compiling],.status[data-status=analysing]{color:var(--info)}.status[data-status=success],.status[data-status=compiled],.status[data-status=analysed]{color:var(--success)}.status[data-status=validation_error],.status[data-status=network_error],.status[data-status=internal_error]{color:var(--danger)}dl{margin:0;font-size:var(--fs-sm)}dt{margin-top:var(--sp-2);color:var(--text-muted)}dd{margin:0;word-break:break-word}.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:var(--sp-2)}.stat-grid dt,.stat-grid dd{margin:0}.stat-grid>div{padding:var(--sp-2) var(--sp-3);background:var(--surface-2);border-radius:var(--radius-sm)}.stat-grid dt{font-size:var(--fs-xs)}.stat-grid dd{font-size:var(--fs-lg);font-weight:600}.diagnostic-list{list-style:none;margin:0;padding:0;font-size:var(--fs-sm)}.diagnostic-list li{margin-bottom:var(--sp-2);padding:var(--sp-2) var(--sp-3);background:var(--surface-2);border-left:3px solid var(--text-muted);border-radius:0 var(--radius-sm) var(--radius-sm) 0}.diagnostic-list li[data-severity=error]{border-left-color:var(--danger)}.diagnostic-list li[data-severity=warning]{border-left-color:var(--warning)}.diagnostic-list li[data-severity=info]{border-left-color:var(--info)}.diagnostic-location{color:var(--text-muted);font-size:var(--fs-xs)}.legend,#path-role-legend,#graph-overlay-legend{list-style:none;margin:var(--sp-2) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3);font-size:var(--fs-xs)}.legend[hidden],#graph-overlay-legend[hidden]{display:none}.legend-swatch{display:inline-block;width:.75rem;height:.75rem;margin-right:var(--sp-1);vertical-align:middle;border-radius:3px;border:1px solid rgba(0,0,0,.15)}#stage{grid-area:stage;position:relative;min-width:0;min-height:0;overflow:hidden;background:radial-gradient(ellipse at 50% 38%,var(--stage-top) 0%,transparent 70%),linear-gradient(180deg,var(--stage-top) 0%,var(--stage-bottom) 100%)}#viewport{display:block;width:100%;height:100%;cursor:grab}#viewport:active{cursor:grabbing}.stage-floating{position:absolute;z-index:2}.stage-floating[hidden]{display:none}.stage-chip{position:absolute;bottom:4.75rem;left:50%;transform:translate(-50%);z-index:2;margin:0;padding:var(--sp-1) var(--sp-3);border-radius:var(--radius-pill);background:color-mix(in srgb,var(--surface) 82%,transparent);box-shadow:var(--shadow-1);font-size:var(--fs-xs);color:var(--text-muted);pointer-events:none;white-space:nowrap;transition:opacity .4s ease}.stage-chip[data-faded=true]{opacity:0}#stage-toolbar{top:var(--sp-3);right:var(--sp-3)}#stage-toolbar .button-row{margin:0;padding:var(--sp-1);background:color-mix(in srgb,var(--surface) 88%,transparent);border-radius:var(--radius-md);box-shadow:var(--shadow-2)}#stage-toolbar button{border-color:transparent;background:transparent}#stage-toolbar button:hover{background:var(--surface-2)}#onboarding{top:3.5rem;left:var(--sp-4);width:min(320px,calc(100% - 2rem));box-shadow:var(--shadow-3)}#onboarding h2{font-family:var(--font-display);font-size:var(--fs-lg)}#onboarding ol{margin:0 0 var(--sp-3);padding-left:1.2rem;font-size:var(--fs-sm)}#onboarding li+li{margin-top:var(--sp-1)}#player{left:50%;bottom:var(--sp-4);transform:translate(-50%);display:flex;align-items:center;gap:var(--sp-2);width:min(620px,calc(100% - 2rem));padding:var(--sp-2) var(--sp-3);background:color-mix(in srgb,var(--surface) 92%,transparent);border:1px solid var(--border);border-radius:var(--radius-pill);box-shadow:var(--shadow-3)}#player button{flex:none;min-width:2rem;padding:var(--sp-1) var(--sp-2);border-radius:var(--radius-pill)}#player button.primary{min-width:4rem}#player label{margin:0;font-size:var(--fs-xs)}.player-track{flex:1 1 auto;min-width:0}.player-speed{flex:0 0 90px}#viewer-error{display:none;position:absolute;top:var(--sp-4);left:var(--sp-4);right:var(--sp-4);z-index:10;padding:var(--sp-3) var(--sp-4);background:var(--accent-soft);color:var(--danger);border:1px solid var(--danger);border-radius:var(--radius-md)}#selection-card h2{margin-bottom:var(--sp-1)}#inspector-headline{margin:0;font-size:var(--fs-md)}#inspector-headline strong{font-family:var(--font-display);font-size:var(--fs-lg);font-weight:600}.badge{display:inline-block;margin-left:var(--sp-1);padding:0 var(--sp-2);border-radius:var(--radius-pill);font-size:var(--fs-xs);font-weight:600;vertical-align:middle}.badge.increase{background:#fbe7c8;color:#7a4a06}.badge.decrease{background:#f8d6d6;color:#862b2b}#inspector-details{margin-top:var(--sp-2)}.tabs{position:sticky;top:calc(-1 * var(--sp-4));z-index:1;display:flex;gap:2px;margin:var(--sp-4) calc(-1 * var(--sp-4)) var(--sp-4);padding:var(--sp-2) var(--sp-4) 0;background:var(--surface);border-bottom:1px solid var(--border)}.tabs button{flex:1;padding:var(--sp-2) var(--sp-1);background:transparent;border:none;border-bottom:2px solid transparent;border-radius:0;color:var(--text-muted)}.tabs button:hover{background:transparent;color:var(--text)}.tabs button[aria-selected=true]{color:var(--accent);border-bottom-color:var(--accent)}.swatches{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-1)}.swatches button{width:2rem;height:2rem;padding:0;border-radius:var(--radius-pill);border:2px solid var(--surface);box-shadow:0 0 0 1px var(--border-strong)}.swatches button[aria-checked=true]{box-shadow:0 0 0 2px var(--accent)}#component-toggles label{display:flex;align-items:center;gap:var(--sp-2);color:var(--text)}#component-toggles input{width:auto;margin:0;accent-color:var(--accent)}#yarn-warnings,#measurement-list,#annotation-list,#diagram-symbol-list{list-style:none;margin:var(--sp-2) 0 0;padding:0;font-size:var(--fs-sm)}#yarn-warnings li{margin-bottom:var(--sp-1);padding:var(--sp-1) var(--sp-2);color:var(--warning);border-left:3px solid var(--warning);background:var(--surface-2);border-radius:0 var(--radius-sm) var(--radius-sm) 0}#measurement-list li,#annotation-list li{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-1);padding:var(--sp-2) var(--sp-3);background:var(--surface-2);border-radius:var(--radius-sm)}#measurement-list button,#annotation-list button{flex:none;padding:var(--sp-1) var(--sp-2);font-size:var(--fs-xs)}#annotation-list li span{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}#annotation-remaining{margin:var(--sp-1) 0 0;font-size:var(--fs-xs);color:var(--text-muted)}#diagram-symbol-list{max-height:180px;overflow-y:auto}#diagram-symbol-list button{width:100%;margin-bottom:2px;text-align:left;font-size:var(--fs-xs)}#diagram-preview{margin-top:var(--sp-2);min-height:240px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}@media (max-width: 1100px){:root{--panel-left: 300px;--panel-right: 300px}#stage-toolbar .button-row button:not([data-preset=front]):not([data-preset=top]):not([data-preset=reset]){display:none}}@media (max-width: 1100px) and (min-width: 861px){.player-speed,#stage-hint{display:none}}#player label{white-space:nowrap}@media (max-width: 860px){#app{grid-template-columns:minmax(0,1fr);grid-template-rows:var(--topbar) auto 62vh auto;grid-template-areas:"top" "editor" "stage" "panel";height:auto;min-height:100vh}#editor-panel,#panel{border:none;border-top:1px solid var(--border);overflow:visible}.brand-tagline,.player-speed{display:none}}@media (prefers-reduced-motion: reduce){*{scroll-behavior:auto!important;transition:none!important}}