:root{color-scheme:light;--bg:#f5f5f5;--panel:#fff;--ink:#222;--muted:#616161;--line:#ddd;--control-line:#909090;--accent:#262626;--danger:#a62f2a;--stage:#fcfcfc;--hover:#f0f0f0;--selected:#e8e8e8;--grid:#e3e3e3;--radius-control:6px;--radius-surface:8px;--radius-item:4px;--control-height:36px;--control-padding:7px 12px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px}
*{box-sizing:border-box;scrollbar-color:#b4b4b4 transparent;scrollbar-width:thin}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 ui-sans-serif,system-ui,-apple-system,sans-serif}button,input,select{font:inherit;font-size:13px;line-height:20px;color:inherit;min-height:var(--control-height);padding:var(--control-padding);border:1px solid var(--control-line);border-radius:var(--radius-control);background:var(--panel);min-width:0;max-width:100%;caret-color:var(--accent)}button{cursor:pointer}button:not(:disabled):hover{background:var(--hover);border-color:var(--accent)}button:disabled{opacity:.45;cursor:not-allowed}button.primary{background:var(--accent);color:var(--panel);border-color:var(--accent)}button.primary:not(:disabled):hover{background:#444}button.quiet{border-color:transparent;background:transparent}button[aria-pressed=true],button[aria-current=page]{background:var(--selected);border-color:var(--accent)}input::placeholder{color:var(--muted);opacity:1}input[type=checkbox]{min-height:auto;accent-color:var(--accent)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}::selection{background:#d9d9d9}[hidden]{display:none!important}h1,h2,h3,p{margin:0}h1{font-size:24px;line-height:1.25;font-weight:650;overflow-wrap:anywhere}h2{font-size:13px;font-weight:600}p,small{color:var(--muted)}small{font-size:12px}.workspace-header{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--line);background:var(--panel)}.brand{display:flex;gap:var(--space-4);align-items:baseline;min-width:0}.brand strong{font-size:16px;white-space:nowrap}.brand span{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.utilities{display:flex;gap:var(--space-2);align-items:center}details{position:relative}summary{cursor:pointer;min-height:var(--control-height);padding:var(--control-padding);font-size:13px}.info-panel{position:absolute;right:0;z-index:10;top:100%;width:280px;padding:var(--space-6);background:var(--panel);border-radius:var(--radius-surface);box-shadow:0 8px 28px #22222226;display:grid;gap:var(--space-4)}.workspace-body{display:grid;grid-template-columns:224px minmax(0,1fr);min-height:calc(100dvh - 72px)}#navigation{padding:var(--space-8) var(--space-4);border-right:1px solid var(--line);background:var(--panel)}#navigation h2{min-height:40px;display:flex;align-items:center;margin-bottom:var(--space-3)}#navigation nav{display:grid;gap:var(--space-1)}#navigation button{text-align:left;white-space:normal;border-color:transparent}#navigation .back{margin-bottom:var(--space-4);width:100%}.content{display:flex;min-width:0}main{min-width:0;flex:1;padding:var(--space-8)}.heading{display:flex;align-items:center;justify-content:space-between;min-height:40px;gap:var(--space-4);margin-bottom:var(--space-6)}.filters{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;padding-bottom:var(--space-6);margin-bottom:var(--space-6);border-bottom:1px solid var(--line)}.filters input{width:280px}.filters label{display:flex;align-items:center;gap:var(--space-2)}.count{margin-left:auto;color:var(--muted);font-size:12px}.icon-grid{display:grid;grid-template-columns:repeat(auto-fill,144px);gap:var(--space-2)}.icon-tile{min-height:144px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;white-space:normal;border-color:transparent;border-radius:var(--radius-surface);padding:var(--space-4) var(--space-3);gap:var(--space-1)}.icon-tile strong{font-size:12px;font-weight:550;overflow-wrap:anywhere}.icon-tile small{font-size:11px}.thumbnail{height:48px;display:grid;place-items:center;margin-bottom:var(--space-2)}.thumbnail svg{width:28px;height:28px}.project-list{display:grid;gap:var(--space-2);max-width:900px}.project-row{text-align:left;display:flex;justify-content:space-between;gap:var(--space-4);padding:var(--space-4);border-color:var(--line)}.project-row span{display:grid;gap:var(--space-1)}.empty{padding:var(--space-8) 0;max-width:65ch}.empty h2{font-size:18px;color:var(--ink);margin-bottom:var(--space-2)}.pagination{display:flex;justify-content:center;align-items:center;gap:var(--space-4);margin-top:var(--space-6)}.back{margin-left:-12px;margin-bottom:var(--space-4)}.title{margin-bottom:var(--space-6)}.title small{display:block;margin-top:var(--space-1)}.preview-switch{display:inline-flex;gap:var(--space-1);padding:var(--space-1);border-radius:var(--radius-surface);background:var(--selected);margin-bottom:var(--space-6)}.preview-switch button{background:transparent;border-color:transparent;color:var(--muted)}.preview-switch button[aria-pressed=true]{background:var(--panel);border-color:var(--line);color:var(--ink)}.versions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-6)}.frame{border:1px solid var(--line);background:var(--stage);border-radius:var(--radius-surface);overflow:hidden}.toolbar{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--line)}.toolbar label{display:flex;align-items:center;gap:var(--space-2);font-size:12px}.toolbar label:last-child{margin-left:auto}.canvas{min-height:480px;height:56vh;max-height:760px;display:grid;place-items:center;overflow:auto;padding:var(--space-8)}.canvas>svg{width:min(100%,520px);height:auto;overflow:visible}.grid-line{stroke:var(--grid);stroke-width:.025}.selection-node{fill:var(--panel);stroke:var(--ink);stroke-width:.06;cursor:pointer}.selection-node[aria-pressed=true]{fill:var(--ink)}.handle-line{stroke:var(--muted);stroke-width:.03}.actual{border-top:1px solid var(--line);padding:var(--space-4);display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}.sample{padding:var(--space-4);display:grid;place-items:center;min-height:64px;min-width:64px;background:var(--panel);border-radius:var(--radius-item)}.inverse{background:var(--ink);color:var(--panel)}#inspector{width:280px;flex-shrink:0;background:var(--panel);border-left:1px solid var(--line);padding:var(--space-6) var(--space-4)}#inspector section{display:grid;gap:var(--space-3);padding-bottom:var(--space-6);margin-bottom:var(--space-6);border-bottom:1px solid var(--line)}.layers{display:grid;gap:var(--space-1)}.layers button{border-color:transparent;text-align:left;overflow-wrap:anywhere}.properties{display:grid;grid-template-columns:max-content 1fr;gap:var(--space-2) var(--space-4);font-size:12px}.properties dt{color:var(--muted)}.properties dd{margin:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.scene-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--space-4);margin-top:var(--space-4)}.scene-sample{display:grid;justify-items:center;align-content:center;gap:var(--space-4);min-height:220px;border-color:var(--line)}.scene-sample.inverse:hover{background:#333}.brief{display:grid;gap:var(--space-6);max-width:70ch}.brief h2{margin-bottom:var(--space-2)}.brief p{white-space:pre-wrap}#error,#update{padding:var(--space-3) var(--space-6);border-bottom:1px solid var(--line)}#error{color:var(--danger)}.skip{position:fixed;top:-80px;left:16px;color:var(--ink);background:var(--panel);z-index:100}.skip:focus{top:12px}
@media(max-width:1100px){.content{flex-wrap:wrap}#inspector{width:100%;border-left:0;border-top:1px solid var(--line)}main{flex-basis:100%}.canvas{min-height:360px}}
@media(max-width:700px){.workspace-body{display:block}#navigation{padding:var(--space-3) var(--space-4);border-right:0;border-bottom:1px solid var(--line)}#navigation nav{display:flex;overflow:auto}#navigation h2{min-height:24px;margin:0 0 var(--space-2)}main{padding:var(--space-6) var(--space-4)}.workspace-header{padding:var(--space-3) var(--space-4);gap:var(--space-2)}.brand span{display:none}.icon-grid{grid-template-columns:repeat(auto-fill,minmax(136px,1fr))}.toolbar{flex-wrap:wrap}.canvas{height:400px;padding:var(--space-6)}.filters input{width:100%}.scene-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.scene-sample{padding:var(--space-2);min-height:180px}.heading{margin-bottom:var(--space-4)}}
@media(pointer:coarse){:root{--control-height:44px;--control-padding:11px 12px}}
.scene-section{margin-top:24px;max-width:1000px}.scene-section h2{color:var(--muted)}.scene-section .scene-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}.scene-icon{display:inline-flex;flex:none;max-width:100%}.context-art{display:flex;align-items:center;justify-content:center;min-height:128px}.context-strip{display:flex;align-items:center;justify-content:center;gap:20px;padding:12px;background:var(--hover);border:1px solid var(--line);border-radius:6px;max-width:100%;min-height:48px}.context-placeholder{width:30px;height:5px;background:#bbb;border-radius:2px}.context-placeholder.short{width:20px}.scene-sample small{display:block;margin-top:4px;font-size:11px}.scene-sample.inverse small{color:#ccc}@media(max-width:700px){.scene-section .scene-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.context-strip{gap:8px;padding:8px}.context-placeholder{width:15px}.context-placeholder.short{width:10px}}
.nav-footer{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:16px;margin-top:24px}.selection-node{fill:none;stroke:none;cursor:pointer}.node-hit{fill:transparent;stroke:none}.node-dot{fill:white;stroke:#222;stroke-width:1.5px}.selection-node[aria-pressed=true] .node-dot{fill:#222;stroke:white;stroke-width:2px}.selection-node:focus .node-dot{stroke-width:3px}.scene-sample>span:first-child{max-width:100%}
.workspace-body.is-onboarding{grid-template-columns:224px minmax(0,1fr)}
.brief-onboarding{max-width:760px;margin-inline:auto;--section-gap:calc(var(--space-6) * 2)}
.onboarding-back{margin-bottom:var(--space-6)}
.onboarding-back button{margin-left:calc(-1 * var(--space-3))}
.workflow-progress{display:flex;align-items:center;gap:var(--space-6);padding-bottom:var(--space-6);border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.workflow-steps{display:flex;flex:1;align-items:center;justify-content:space-between;gap:var(--space-4);list-style:none;margin:0;padding:0}
.workflow-steps li{display:flex;align-items:center;gap:var(--space-2);min-width:0}
.step-number{display:grid;place-items:center;flex:none;width:24px;height:24px;border:1px solid var(--control-line);border-radius:50%;font-variant-numeric:tabular-nums;font-size:12px}
.workflow-steps [aria-current=step]{color:var(--ink);font-weight:650}
.workflow-steps [aria-current=step] .step-number{background:var(--ink);color:var(--panel);border-color:var(--ink)}
.brief-intro{text-align:center;margin-block:var(--section-gap) var(--space-8)}
html{scrollbar-gutter:stable}
select{appearance:none;padding-inline-end:calc(var(--space-3) * 3);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23616161' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--space-3) center;background-size:16px 16px}
select:disabled{opacity:.45}
@media(forced-colors:active){select{appearance:auto;background-image:none}}
.detail-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-6);margin-bottom:var(--space-6)}
.detail-heading .title{min-width:0;margin:0}
.detail-heading .preview-switch{flex:none;margin:0}
.actual{justify-content:center}
.actual .sample{min-height:var(--sample-size,64px);min-width:var(--sample-size,64px)}
@media(max-width:700px){.detail-heading{flex-wrap:wrap;gap:var(--space-4)}}
.scene-section{margin-inline:auto}
.geometry-selection{pointer-events:none}
.selection-node:focus{outline:none}
#error{position:fixed;z-index:50;right:var(--space-4);bottom:var(--space-4);max-width:min(440px,calc(100% - var(--space-4) * 2));max-height:calc(100dvh - var(--space-8));overflow:auto;overflow-wrap:anywhere;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-surface);padding:var(--space-3) var(--space-4)}
.geometry-selection path{fill:none;stroke-linejoin:round;stroke-linecap:round}
.selection-halo{stroke:var(--panel);stroke-width:4px}
.selection-contour{stroke:var(--ink);stroke-width:1.5px;stroke-dasharray:5 3}
.properties dd{min-width:0;overflow-wrap:anywhere}
.brief-instruction{margin-top:var(--space-4);line-height:1.75;text-wrap:pretty}
.brief-onboarding .brief{max-width:none;padding-block:var(--space-8);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.brief-onboarding .brief section{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-2)}
.brief-onboarding .brief h2{margin:0;line-height:1.75}
.brief-onboarding .brief p{line-height:1.75;overflow-wrap:anywhere}
.workspace-body{min-height:100dvh}
.sidebar{position:sticky;top:0;height:100dvh;min-width:0;display:flex;flex-direction:column;background:var(--panel);border-right:1px solid var(--line)}
.workspace-header{flex-direction:column;align-items:stretch;gap:var(--space-3);padding:var(--space-4) var(--space-4) var(--space-2);flex-shrink:0;border-bottom:0}
.header-tools{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.header-control{display:inline-flex;align-items:center;justify-content:center;min-width:36px;padding:var(--space-2);border-color:transparent;background:transparent;font-size:12px;font-weight:500;color:var(--muted)}
.header-control:not(:disabled):hover{border-color:transparent;color:var(--ink)}
.header-control svg{width:18px;height:18px}
.skill-brand-row{display:flex;align-items:center;gap:var(--space-3)}
.workspace-header #project-label{padding:var(--space-1) var(--space-3) var(--space-2)}
.project-details{margin-inline:auto}
.project-details .brief{max-width:none}
.project-storage{border-top:1px solid var(--line);margin-top:var(--space-8);padding-top:var(--space-6);display:grid;gap:var(--space-3)}
.project-storage p{overflow-wrap:anywhere}
.storage-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-1)}
.brief-onboarding .project-storage{border-top:0;margin-top:0}
.brand{align-items:center;gap:var(--space-3)}
.skill-mark{width:24px;height:24px;flex:none}
#project-label{display:block;white-space:normal;overflow-wrap:anywhere;font-size:14px;font-weight:600;color:var(--ink)}
.skill-footer{flex-shrink:0;padding:var(--space-4);border-top:1px solid var(--line);display:grid;gap:var(--space-3)}
.skill-identity{display:flex;align-items:center;gap:var(--space-2)}
.skill-identity strong{font-size:13px;font-weight:600}
.skill-wordmark{display:flex;flex-direction:column;gap:0}
.skill-wordmark small{font-size:11px;line-height:16px;white-space:nowrap}
.skill-credit{font-size:11px;line-height:1.5;overflow-wrap:anywhere}
.skill-credit a{display:block;color:var(--muted);text-decoration:underline;text-underline-offset:3px;margin-top:var(--space-1)}
.skill-credit a:hover{color:var(--ink)}
.workspace-body.is-library{display:flex;flex-direction:column}
.is-library>.workspace-header{background:transparent;padding:var(--space-4) var(--space-8) 0;min-height:0}
.is-library>.content{flex:1}
.is-library>.skill-footer{border:0;padding:var(--space-6) var(--space-8);display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-4)}
.is-library .skill-credit a{display:inline;margin:0 0 0 var(--space-2)}
@media(max-width:700px){.is-library>.workspace-header{padding-inline:var(--space-4)}.is-library>.skill-footer{padding-inline:var(--space-4);align-items:flex-start;flex-direction:column;gap:var(--space-2)}.is-library .skill-credit a{display:block;margin:var(--space-1) 0 0}}
.utilities{justify-content:space-between}
.sidebar-sections{overflow:auto;flex:1;min-height:0}
.nav-section{padding:var(--space-2) var(--space-4) 0;border-bottom:0;display:grid;gap:var(--space-1)}
.nav-section>button{text-align:left;border-color:transparent}
#navigation{display:flex;flex-direction:column;flex:1;min-height:0;padding:var(--space-6) var(--space-4) var(--space-4);border:0}
#navigation h2{min-height:24px;padding-inline:var(--space-3);margin-bottom:var(--space-2);font-size:12px;font-weight:500;color:var(--muted)}
#navigation nav{overflow:auto;min-height:0}
.nav-footer{margin-top:auto;padding-top:var(--space-4);flex-shrink:0}
#inspector{position:sticky;top:0;height:100dvh;overflow:auto}
#update{position:fixed;bottom:var(--space-4);left:var(--space-4);max-width:calc(100% - var(--space-8));z-index:40;background:var(--panel)}
@media(max-width:1100px){#inspector{position:static;height:auto}}
@media(max-width:700px){.sidebar{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line)}.workspace-header{padding:var(--space-3) var(--space-4)}.nav-footer{display:flex;margin-top:var(--space-3);gap:var(--space-2)}#navigation nav{flex-wrap:wrap;overflow:visible}}
@media(max-width:700px){.workflow-progress{display:block}.workflow-steps{align-items:flex-start;gap:var(--space-2)}.workflow-steps li{flex:1;flex-direction:column;text-align:center}.brief-intro{margin-top:var(--space-8)}}

#startup{min-height:100dvh;display:grid;place-items:center}
.heading-actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2)}
.heading:has(.heading-actions){flex-wrap:wrap}
.scene-actions{justify-content:flex-end;margin-bottom:var(--space-4)}
#navigation .scheme-link{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}
.scheme-link>span:first-child{min-width:0;overflow-wrap:anywhere}
#navigation .scheme-secondary{color:var(--muted)}
#navigation .scheme-secondary:hover,#navigation .scheme-secondary[aria-current=page]{color:var(--ink)}
.scheme-confirmed{flex:none;font-size:11px;font-weight:500;color:var(--muted);white-space:nowrap}
#handoff-fallback{margin-top:var(--space-4);width:100%;min-width:0}
#handoff-fallback label{display:grid;gap:var(--space-2);font-size:12px;color:var(--muted)}
#handoff-fallback textarea{width:100%;min-height:180px;resize:vertical;padding:var(--space-3);font:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-item)}
/* Shared content rails: centered in the main area, not in the whole window. */
:root{--width-reading:760px;--width-collection:1120px;--width-detail:1000px;--page-gutter:32px}
.page-body{width:100%;max-width:var(--width-collection);margin-inline:auto;min-width:0}
.page-body[data-layout=reading]{max-width:var(--width-reading)}
.page-body[data-layout=detail]{max-width:var(--width-detail)}
/* Optical outer edge: about 16px of visible whitespace, independent of hit areas.
   Heading rows contain ~8px of font/line-box space; links and arrows ~12px. */
:root{--edge-visible:16px;--section-gap:24px;--field-gap:8px}
#main{padding-top:calc(var(--edge-visible) - var(--space-2))}
#main:has(>.page-body[data-layout=detail]){padding-top:calc(var(--edge-visible) - var(--space-3))}
/* Inspector captions have ~4px of font/line-box space above their visible ink. */
#inspector{padding-top:calc(var(--edge-visible) - var(--space-1))}
.sidebar .workspace-header{padding-top:calc(var(--edge-visible) - var(--space-3));gap:var(--space-4)}
.sidebar .skill-footer{padding-bottom:var(--edge-visible)}
.brief{gap:var(--section-gap)}
.brief h2{margin-bottom:var(--field-gap)}
@media(pointer:coarse){.sidebar .workspace-header{padding-top:0}}
.project-list{max-width:none;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),340px));gap:var(--space-4)}
.project-row{flex-direction:column;align-items:flex-start;justify-content:space-between;min-height:140px;padding:var(--space-6);overflow-wrap:anywhere}
.project-row span{gap:var(--space-2)}
.project-row>small{font-variant-numeric:tabular-nums}
.icon-grid{grid-template-columns:repeat(auto-fill,minmax(0,144px))}
.is-library>.workspace-header,.is-library>.skill-footer{width:100%;max-width:calc(var(--width-collection) + var(--page-gutter) * 2);margin-inline:auto}
@media(max-width:700px){:root{--page-gutter:16px}.project-list{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),340px))}}

.web-start .skill-footer{max-width:calc(var(--width-reading) + var(--page-gutter) * 2)}
.web-start .brief section{display:grid;gap:var(--space-2)}
.web-start .brief section h2{margin:0}
.web-start .storage-actions{margin-top:var(--space-2)}
.web-start textarea{display:block;width:100%;min-height:140px;margin-top:var(--space-4);padding:var(--space-3);font:inherit;line-height:1.6;color:var(--ink);background:var(--panel);border:1px solid var(--control-line);border-radius:var(--radius-control);resize:vertical}