:root{color-scheme:dark;--bg:#0b0b0c;--panel:#121213;--line:#2a2a2e;--muted:#99999f;--text:#f1f1f3;--accent:#0071e3;--dark:#071a35}
header{background:#101011}.brand span{border-color:#37373b}.project-name{color:#aaaab0}.status-dot{box-shadow:0 0 0 3px #0071e318}.badge{color:#2997ff;border-color:#304d79}
button:hover{background:#252527;border-color:#626269}button.active,.tabs button.active,.inspector-tabs button.active{background:#192e4d;color:#2997ff;border-color:#365d94}.primary,.reference-panel button.primary{background:var(--accent);border-color:var(--accent);color:#071a35}.primary:hover{background:#0077ed}
.eyebrow,.preview-tag,.asset-caption,.hint,.small-note,.local-note{color:var(--muted)}.stage-wrap{background:#161617;border-color:#303034}.preset-card{background:#151516;border-color:var(--line)}.preset-card.active{border-color:#0071e3;background:#172840}.preset-icon{color:var(--accent)}
.asset-card{display:grid;grid-template-columns:minmax(0,1fr) 80px;grid-template-rows:auto auto 1fr auto;column-gap:3px;min-height:174px;padding:17px 12px 0;margin-bottom:12px;border:1px solid #303034;border-radius:12px;background:linear-gradient(145deg,#202022,#161617);box-shadow:0 3px 12px #00000020;cursor:default;isolation:isolate}
.asset-card:hover{border-color:#365d94;background:linear-gradient(145deg,#242426,#191919)}.asset-preview{grid-column:2;grid-row:1/4;display:flex;align-items:center;justify-content:center;height:112px;margin:-5px -4px 0 0;pointer-events:none}.asset-preview img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 9px 7px #0008)}
.asset-title{grid-column:1;grid-row:1;font-size:23px;line-height:1.15;font-weight:700;letter-spacing:.5px;margin-top:2px}.asset-subtitle{grid-column:1;grid-row:2;font-size:10px;line-height:1.6;color:#aaaab1;max-width:108px;margin:7px 0 10px}.asset-options{grid-column:1;grid-row:3;align-self:end;padding-bottom:12px}.asset-options .swatch-row{gap:9px;margin:0 0 7px}.swatch{width:16px;height:16px;min-width:16px;padding:0;border:1px solid #ffffff45;box-shadow:none}.swatch.selected{outline:1.5px solid var(--accent);outline-offset:3px;box-shadow:none}.asset-color{display:block;font-size:9px;letter-spacing:.4px;color:#93939b}
.asset-add{grid-column:1/-1;grid-row:4;width:calc(100% + 24px);margin:0 -12px;border:0;border-top:1px solid #333336;border-radius:0;padding:10px 12px;font-size:11px;font-weight:550;text-align:left;color:#2997ff;background:#ffffff02;cursor:pointer}.asset-add:hover{background:#0071e315;border-color:#365d94;color:#b3ceff}.asset-card:has(.asset-add:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
input,select{accent-color:var(--accent)}input[type=number],select{background:#111112;border-color:#353539}input[type=range]{accent-color:var(--accent)}.object-row button.active{background:#192e4d;border-color:#365d94;color:#2997ff}.control-section{border-color:#2c2c30}.color-button.active{outline-color:var(--accent)}
.reference-panel,.reference-panel .ref-note,.reference-panel .ref-result,.reference-panel .ref-status{color:#b2b2b9}.reference-panel .ref-upload{background:#192b46;border-color:#365d94;color:#2997ff}.reference-panel .ref-status,.reference-panel .ref-result{border-color:#0071e3}.reference-panel .ref-point.active{background:#192e4d;color:#2997ff}.reference-panel input[type=checkbox]{accent-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}::selection{background:#0071e345;color:white}
.reference-import>button{background:#192b46;border-color:#365d94;color:#2997ff}.reference-corners>span.is-next{border-color:#0071e3;color:#2997ff}.reference-corners>span.is-done{background:#192e4d;color:#c2d8ff}.reference-corners>span.is-done b{background:var(--accent);color:#071a35}.reference-overlay-controls input[type=checkbox],.reference-opacity input[type=range]{accent-color:var(--accent)}.reference-result{border-left-color:#0071e3}.reference-fit-line{stroke:#2997ff}.reference-target-dimensions{background:#182335;border-color:#365071}.reference-click-layer:focus-visible{outline-color:var(--accent)}
@media(max-width:700px){.asset-card{min-width:190px;min-height:172px}.asset-preview{height:108px}.asset-title{font-size:22px}}

.brand-logo{display:block;width:118px;height:40px;object-fit:contain;filter:invert(1);flex-shrink:0}@media(max-width:700px){.brand-logo{width:90px;height:31px}}

#stage.dark-background .canvas-corner,#stage.dark-background .canvas-bottom,#stage.dark-background #axis-label{color:#c2c5cb}

.primary,.reference-panel button.primary{color:#fff}.primary:hover{background:#0077ed;border-color:#0077ed}
.object-row button.active,.object-row button.active:hover{background:#0071e3;color:#fff;border-color:transparent;box-shadow:none}

.transform-toolbar{display:flex;align-items:center;gap:6px;margin:0 0 10px;flex-wrap:wrap}.transform-toolbar button{font-size:11px;padding:8px 12px}.transform-toolbar button.active{background:#0071e3;color:white;border-color:transparent}.transform-status{font-size:10px;color:#a9a9b1;margin-left:8px}@media(max-width:700px){.transform-status{flex-basis:100%;margin:4px 0}}

/* Compact working layout. */
header{height:60px;padding:0 22px}.workspace{min-height:calc(100vh - 60px)}.brand{gap:12px}.brand-logo{width:88px;height:30px}.brand span{padding-left:12px;font-size:8px;letter-spacing:1.5px}.header-actions{margin-left:auto}.stage-column{padding-top:20px}.transform-toolbar{margin-bottom:12px;min-height:32px}.library,.inspector{padding-top:20px}.inspector-tabs{margin-top:0}@media(max-width:700px){header{height:56px;padding:0 14px;gap:12px}.brand-logo{width:72px;height:25px}.header-actions{gap:5px}.header-actions button{padding:8px;font-size:10px}.stage-column{padding-top:14px}}

/* Named, generous color targets in the object inspector. */
.inspector .swatch-row:has(.object-color-option){display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 18px}.object-color-option{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-width:65px;min-height:76px;padding:10px 9px;border:1px solid #3b3b40;border-radius:10px;background:#1b1b1d;color:#c5c5cc;font-size:11px}.object-color-dot{display:grid;place-items:center;width:30px;height:30px;border:1px solid #ffffff55;border-radius:50%;color:white;font-size:18px;line-height:1;text-shadow:0 1px 3px #000,0 0 3px #000}.object-color-option:hover{background:#242933;border-color:#2997ff}.object-color-option.selected{background:#142a44;border:2px solid #0071e3;padding:9px 8px;color:#fff}.object-color-option:focus-visible{outline:2px solid #2997ff;outline-offset:3px}

.quick-presets{display:flex;align-items:center;gap:12px;margin-bottom:12px}.quick-presets>span{font-size:11px;color:#99999f;white-space:nowrap}.quick-presets .preset-grid{display:flex;gap:8px;margin:0}.quick-presets .preset-card{min-height:34px;padding:8px 12px;font-size:11px;display:inline-flex;align-items:center;gap:7px}.quick-presets .preset-card .preset-icon{display:none}.quick-presets .preset-card small{display:none}.quick-presets .preset-card.active{background:#0071e3;color:white;border-color:transparent}.local-note{display:none}.hint{margin:10px 0 0;font-size:10px}
@media(min-width:821px){.stage-column{padding-top:16px;padding-bottom:12px}.quick-presets{margin-bottom:10px}.transform-toolbar{margin-bottom:10px}#stage{max-width:min(100%,calc(100dvh - 240px))}.view-toolbar{margin-top:10px}.workspace{min-height:calc(100dvh - 60px)}}
@media(max-width:700px){.quick-presets{gap:8px;flex-wrap:wrap;margin-bottom:10px}.quick-presets .preset-card{padding:8px 10px;font-size:10px;min-height:32px}.quick-presets .preset-grid{gap:6px}.hint{line-height:1.7}}

.quick-presets{gap:16px;margin-bottom:14px}.quick-presets>span{color:#e8e8ed;font-size:13px;font-weight:600}.quick-presets .preset-grid{gap:10px}.quick-presets .preset-card{min-height:62px;min-width:190px;padding:9px 14px;gap:10px;background:#202024;border:1px solid #53535b;border-radius:10px;font-size:13px;font-weight:600;text-align:left}.quick-presets .preset-card:hover{background:#29313d;border-color:#2997ff}.preset-product{display:block;width:30px;height:40px;object-fit:contain;filter:drop-shadow(0 2px 3px #0006)}.preset-name{display:flex;flex-direction:column;gap:5px}.quick-presets .preset-card small{display:block;margin:0;font-size:10px;line-height:1.2;font-weight:400;color:#b3b3bd}.preset-check{margin-left:auto;min-width:14px;font-size:17px}.quick-presets .preset-card.active{background:#0071e3;border-color:#2997ff;box-shadow:0 0 0 1px #2997ff30;color:white}.quick-presets .preset-card.active small{color:#ffffffd9}
@media(min-width:821px){#stage{max-width:min(100%,calc(100dvh - 276px))}}
@media(max-width:700px){.quick-presets{gap:9px}.quick-presets>span{flex-basis:100%;font-size:12px}.quick-presets .preset-grid{width:100%;gap:8px}.quick-presets .preset-card{min-width:0;flex:1;min-height:58px;padding:8px 10px;font-size:11px;gap:7px}.preset-product{width:24px;height:34px}.quick-presets .preset-card small{font-size:9px}.preset-check{font-size:14px;min-width:10px}}

/* DOM-only controls: excluded from the WebGL PNG export. */
#stage .transform-toolbar{position:absolute;z-index:8;top:48px;left:18px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0;max-width:calc(100% - 36px);min-height:0;pointer-events:none}
#stage .transform-toolbar button{pointer-events:auto;width:54px;height:54px;min-width:54px;border-radius:50%;padding:5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:#171719df;border:1px solid #77777f;color:#f5f5f7;box-shadow:0 2px 8px #0003;backdrop-filter:blur(8px);font-size:22px;line-height:1}
#stage .transform-toolbar button small{font-size:9px;line-height:1.25;font-weight:500}#stage .transform-toolbar button:hover{background:#333338;border-color:#aaaab0}#stage .transform-toolbar button.active{background:#0071e3;border-color:#0071e3;color:white}#stage .transform-status{flex-basis:100%;margin:0;color:#fff;background:#171719e6;border-radius:6px;padding:7px 10px;font-size:10px;line-height:1.5}#stage .transform-status:empty{display:none}
@media(max-width:700px){#stage .transform-toolbar{top:39px;left:12px;gap:7px;max-width:calc(100% - 24px)}#stage .transform-toolbar button{width:44px;height:44px;min-width:44px;font-size:19px}#stage .transform-toolbar button small{font-size:8px}}

#stage .transform-toolbar{top:44px;left:16px;gap:6px;padding:5px;border-radius:30px;background:#202023b8;backdrop-filter:blur(12px);width:fit-content;max-width:calc(100% - 32px)}
#stage .transform-toolbar button{width:44px;height:44px;min-width:44px;gap:3px;border:0;background:transparent;box-shadow:none;backdrop-filter:none;color:#d4d4dc;padding:6px}
#stage .transform-toolbar button svg{width:19px;height:19px;flex-shrink:0}#stage .transform-toolbar button small{font-size:8px;font-weight:400}
#stage .transform-toolbar button:hover{background:#ffffff12;color:white}#stage .transform-toolbar button.active{background:#0071e3;color:white;border:0;box-shadow:none}
#stage .transform-status{position:absolute;top:calc(100% + 8px);left:0;white-space:nowrap;max-width:calc(100vw - 70px)}
#export[aria-busy=true]{opacity:.8;cursor:progress}
@media(max-width:700px){#stage .transform-toolbar{top:35px;left:10px;padding:4px;gap:3px}#stage .transform-toolbar button{width:40px;height:40px;min-width:40px}#stage .transform-toolbar button svg{width:18px;height:18px}}

.object-row .visibility-toggle{width:32px;height:34px;flex-shrink:0;padding:7px;display:grid;place-items:center;color:#c5c5ce}.visibility-toggle svg{width:17px;height:17px}.object-row.is-hidden>button:first-child{opacity:.48}.object-row.is-hidden .visibility-toggle{color:#888894;background:#1b1b1e}.object-row .visibility-toggle:hover{color:#2997ff;border-color:#2997ff}

.history-actions{display:flex;align-items:center;gap:5px;margin-right:9px}.history-actions button{font-size:21px;width:34px;height:34px;display:grid;place-items:center;padding:0}.autosave-status{font-size:10px;color:#8e939d;min-width:60px;margin:0 5px}.export-label{display:flex;flex-direction:column;gap:8px;margin:18px 0;font-size:12px}.export-label input,.export-label select{width:100%;padding:10px;border:1px solid #42424b;border-radius:6px;background:#151518;color:#eee}.export-check{padding:12px;background:#152735;border-radius:7px;font-size:12px;line-height:1.7}.export-check.warning{background:#382d1c;color:#f6d5a1}#confirm-export{width:100%;margin-top:12px}#modal{max-width:min(540px,94vw)}@media(max-width:700px){.autosave-status{display:none}.history-actions{margin-right:0;gap:2px}.history-actions button{width:27px;height:30px}.header-actions{flex-wrap:wrap;justify-content:flex-end}header{height:auto;min-height:56px;padding-block:8px}}
.header-actions{min-width:0}@media(max-width:700px){html,body{max-width:100%;overflow-x:clip}header{gap:8px}.header-actions{gap:4px}.header-actions .history-actions{gap:2px;margin-right:0}.header-actions .history-actions button{padding:0;width:25px;min-width:25px}.workspace{min-width:0;max-width:100%}}