@font-face{font-family:Arial Narrow Local;src:url(/fonts/arialnarrow.ttf) format("truetype");font-weight:400;font-style:normal;font-display:block}@font-face{font-family:Arial Narrow Local;src:url(/fonts/arialnarrow_bold.ttf) format("truetype");font-weight:700;font-style:normal;font-display:block}@font-face{font-family:Arial Narrow Local;src:url(/fonts/arialnarrow_italic.ttf) format("truetype");font-weight:400;font-style:italic;font-display:block}@font-face{font-family:Arial Narrow Local;src:url(/fonts/arialnarrow_bolditalic.ttf) format("truetype");font-weight:700;font-style:italic;font-display:block}:root{--bg: #f7f7f5;--surface: #ffffff;--surface-2: #f4f4f2;--border: #e7e7e4;--border-strong: #d6d6d2;--text: #18181b;--text-2: #52525b;--muted: #71717a;--accent: #18181b;--accent-hover: #3f3f46;--accent-soft: #f0f0ee;--accent-border: #d6d6d2;--accent-ring: rgba(24, 24, 27, .18);--danger: #dc2626;--radius-sm: 6px;--radius: 8px;--radius-lg: 12px;--shadow-sm: 0 1px 2px rgba(24, 24, 27, .06);--shadow-md: 0 4px 12px rgba(24, 24, 27, .08), 0 1px 3px rgba(24, 24, 27, .06);--shadow-lg: 0 12px 32px rgba(24, 24, 27, .12), 0 2px 6px rgba(24, 24, 27, .06);--font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;color-scheme:light}*,*:before,*:after{box-sizing:border-box}html,body,#root{margin:0;height:100%}body{background:var(--bg);color:var(--text);font:13px/1.4 var(--font);-webkit-font-smoothing:antialiased}button,input,select{font:inherit;color:inherit}button{cursor:pointer}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}::selection{background:var(--accent-soft)}kbd{display:inline-block;min-width:18px;padding:1px 5px;text-align:center;font:500 10.5px/1.5 var(--font);color:var(--text-2);background:var(--surface);border:1px solid var(--border-strong);border-bottom-width:2px;border-radius:4px}.app{--rule: #18181b;--narrow: "Arial Narrow Local", "Arial Narrow", Arial, sans-serif;display:grid;height:100vh;height:100dvh;background:var(--surface);grid-template-columns:56px minmax(0,1fr) 28px 400px 56px;grid-template-rows:76px minmax(0,1fr);grid-template-areas:"x1 bar x2 brand x3" "g1 stage g2 panel g3"}.spacer{flex:1}.grow{flex:1;min-width:0}.row{display:flex;gap:8px}.gutter{background:var(--surface)}.g-left{border-right:1px solid var(--rule)}.g-mid{border-left:1px solid var(--rule);border-right:1px solid var(--rule)}.g-right{border-left:1px solid var(--rule)}.x-cell{border-bottom:1px solid var(--rule)}.x-cell svg{display:block;width:100%;height:100%;stroke:var(--rule);stroke-width:1}.toolbar{grid-area:bar;display:flex;align-items:flex-start;gap:clamp(16px,calc(5vw - 30px),72px);padding:14px 16px 0 4px;background:var(--surface);border-bottom:1px solid var(--rule);overflow-x:auto;scrollbar-width:none;white-space:nowrap}.toolbar::-webkit-scrollbar{display:none}.tb-link,.tb-label{font:700 19px/1.15 var(--narrow);letter-spacing:.01em;text-transform:uppercase;color:var(--text)}.tb-link{padding:0;border:none;background:none;cursor:pointer;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}.tb-link:hover{text-decoration-thickness:3px}.tb-link:active{opacity:.55}.tb-group{display:flex;flex-direction:column;gap:1px}.tb-sub{display:flex;align-items:flex-end;gap:10px;padding-left:2px}.elbow{position:relative;flex:none;width:var(--elbow, 100px);height:13px;margin:0 -2px 7px 0;border-left:1px solid var(--rule);border-bottom:1px solid var(--rule)}.elbow:after{content:"";position:absolute;right:-1px;bottom:-4px;border-left:7px solid var(--rule);border-top:3.5px solid transparent;border-bottom:3.5px solid transparent}.tb-sep{font:700 19px/1.15 var(--narrow);color:var(--text)}.brand{grid-area:brand;display:block;overflow:hidden;padding:6px 0 0 2px;font:700 54px/1 var(--narrow);letter-spacing:-.005em;white-space:nowrap;color:var(--text);text-decoration:none;background:var(--surface);border-bottom:1px solid var(--rule)}.studio-loading{display:grid;place-items:center;align-content:center;gap:14px;height:100vh;color:var(--muted);font-size:13px}.studio-loading span{width:28px;height:28px;border-radius:50%;border:2.5px solid var(--border);border-top-color:var(--accent);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.logo{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--text);color:#fff;transition:transform .2s}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 12px;border-radius:var(--radius);border:1px solid transparent;background:transparent;font-weight:500;font-size:13px;white-space:nowrap;transition:background .15s,border-color .15s,color .15s,box-shadow .15s}.btn-ghost{color:var(--text-2);height:30px;padding:0 10px;border-radius:7px}.btn-ghost:hover{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}.btn-ghost:active{background:var(--border)}.btn-primary{background:var(--accent);color:#fff;box-shadow:var(--shadow-sm)}.btn-primary:hover{background:var(--accent-hover)}.btn-primary:active{transform:translateY(.5px)}.btn-outline{background:var(--surface);border-color:var(--border-strong);color:var(--text-2);height:30px;font-size:12px}.btn-outline:hover{border-color:var(--muted);color:var(--text)}.flip{transform:rotate(180deg)}.btn svg,.flip{transition:transform .15s}.icon-btn{display:grid;place-items:center;width:28px;height:28px;margin-left:auto;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--muted)}.icon-btn:hover{background:#fee2e2;color:var(--danger)}[data-tip]{position:relative}[data-tip]:hover:after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%);padding:5px 8px;border-radius:6px;background:var(--text);color:#fff;font-size:11px;font-weight:500;white-space:nowrap;pointer-events:none;z-index:20;animation:fade-in .12s .35s both}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.stage{grid-area:stage;position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;background:#18181b;color:#a1a1aa}.canvas-wrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:24px}.canvas-wrap canvas{display:block;touch-action:none}.drop-overlay{position:absolute;top:10px;right:10px;bottom:10px;left:10px;display:grid;place-items:center;z-index:4;pointer-events:none;border:2px dashed #fff;border-radius:4px;background:#18181b99;animation:fade-in .12s}.drop-card{display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 30px;background:#fff;color:var(--text);font:700 20px/1 var(--narrow);text-transform:uppercase}.statusbar{display:flex;align-items:center;gap:10px;flex:none;height:34px;padding:0 14px;font-size:12px;color:#a1a1aa;font-variant-numeric:tabular-nums;border-top:1px solid #3f3f46}.chip{padding:1px 8px;border-radius:999px;background:#27272a;border:1px solid #3f3f46;color:#e4e4e7;font-weight:500}.dot{width:3px;height:3px;border-radius:50%;background:#52525b}.hint{display:flex;align-items:center;gap:4px}.statusbar kbd{background:#27272a;border-color:#52525b;color:#e4e4e7}.panel{grid-area:panel;overflow-y:auto;background:#fff;color:var(--text);font-family:var(--narrow);scrollbar-width:thin;scrollbar-color:var(--rule) transparent}.section{border-bottom:1px solid var(--rule)}.section summary{display:flex;align-items:center;justify-content:center;gap:10px;padding:24px 16px 18px;list-style:none;cursor:pointer;-webkit-user-select:none;user-select:none;font:700 25px/1 var(--narrow);letter-spacing:.01em;text-transform:uppercase}.section summary::-webkit-details-marker{display:none}.sec-mark{width:12px;font-size:18px}.sec-mark:before{content:"+"}.section[open]>summary .sec-mark:before{content:"−"}.section summary:hover>span:first-child{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}.section-body{display:flex;flex-direction:column;gap:14px;padding:6px 16px 26px}.field{display:grid;grid-template-columns:136px minmax(0,1fr);align-items:center;column-gap:12px;min-height:30px}.field.stack{grid-template-columns:minmax(0,1fr);row-gap:8px}.field.stack>.field-ctl{display:block}.field-label{font:700 16.5px/1.1 var(--narrow);letter-spacing:.01em;text-transform:uppercase}.field-ctl{display:flex;align-items:center;gap:10px;min-width:0}.slider-row{grid-template-columns:136px minmax(0,1fr) 46px}.color-row{grid-template-columns:136px auto auto minmax(0,1fr) 46px}.value{font:400 13px/1 var(--narrow);color:#52525b;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.row{display:flex;gap:18px}.row>.field{flex:1;grid-template-columns:auto minmax(0,1fr)}.note{margin:0;font:400 13.5px/1.4 var(--narrow);color:#52525b}.cable-range{position:relative;height:34px;min-width:60px}.cable-range svg{position:absolute;top:0;right:0;bottom:0;left:0;overflow:visible;pointer-events:none}.cable-range path{fill:none;stroke:var(--rule);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}.cable-range circle{fill:var(--rule);transition:r .12s}.cable-range:hover circle{r:6.5}.cable-range:active circle{r:7.5}.cable-range:has(input:focus-visible) circle{fill:#fff;stroke:var(--rule);stroke-width:2.5}.cable-range input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.cable-range input::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:34px}.cable-range input::-moz-range-thumb{width:11px;height:34px;border:none}.raw-select{position:relative;display:inline-flex;align-items:center;gap:4px;max-width:100%;font:700 16.5px/1.1 var(--narrow);text-transform:uppercase}.raw-select-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}.raw-select svg{flex:none}.raw-select select{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px}.raw-select:hover .raw-select-text{text-decoration-thickness:3px}.raw-select:has(select:focus-visible){outline:2px solid var(--rule);outline-offset:3px}.raw-link{padding:0;border:none;background:none;cursor:pointer;color:var(--text);font:700 16.5px/1.1 var(--narrow);letter-spacing:.01em;text-transform:uppercase;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}.raw-link:hover{text-decoration-thickness:3px}.raw-link:active{opacity:.55}.link-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px}.link-row .sep{font:700 16px/1 var(--narrow)}.upload-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px;padding:4px 0;outline:1.5px dashed transparent;outline-offset:5px}.upload-row.over{outline-color:var(--rule)}.upload-hint{font:400 13px/1 var(--narrow);color:#71717a;text-transform:uppercase;letter-spacing:.02em}.check-row{cursor:pointer}.check-row input{position:absolute;opacity:0;width:0;height:0}.box{display:inline-block;width:17px;height:17px;border:1.5px solid var(--rule);background:#fff}.check-row input:checked+.box{background:var(--rule);box-shadow:inset 0 0 0 2.5px #fff}.check-row input:focus-visible+.box{outline:2px solid var(--rule);outline-offset:2px}.swatch{position:relative;display:inline-block;flex:none;width:46px;height:32px;padding:3px;border:1px solid var(--rule);background:#fff}.swatch:before{content:"";display:block;width:100%;height:100%;background:var(--c)}.swatch input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;padding:0;border:0;opacity:0;cursor:pointer}.swatch:has(input:focus-visible){outline:2px solid var(--rule);outline-offset:2px}.line-input{display:inline-flex;align-items:baseline;gap:4px;width:100%;max-width:150px;border-bottom:1.5px solid var(--rule)}.line-input input{width:100%;min-width:0;padding:3px 0;border:none;background:none;outline:none;font:700 16.5px/1.2 var(--narrow);font-variant-numeric:tabular-nums;-moz-appearance:textfield}.line-input input::-webkit-inner-spin-button{display:none}.line-input:focus-within{box-shadow:0 1.5px 0 var(--rule)}.affix{font:400 12px/1 var(--narrow);color:#71717a;text-transform:uppercase}.line-area{width:100%;min-height:84px;padding:8px 10px;resize:vertical;border:1px solid var(--rule);border-radius:0;background:#fff;outline:none;font:400 18px/1.3 var(--narrow)}.line-area:focus{box-shadow:inset 0 0 0 1px var(--rule)}.quality{font:700 15.5px/1.2 var(--narrow);text-transform:uppercase}.quality small{display:block;margin-top:2px;font-weight:400;font-size:12.5px;color:#71717a;text-transform:none}.quality.low{padding:2px 6px;background:var(--rule);color:#fff}.quality.low small{color:#d4d4d8}.layer-list{list-style:none;margin:-4px 0 0;padding:0}.layer-list button{display:flex;align-items:baseline;justify-content:space-between;gap:10px;width:100%;padding:7px 0;border:none;border-bottom:1px solid var(--rule);background:none;text-align:left;cursor:pointer;font:700 16.5px/1.1 var(--narrow);text-transform:uppercase;color:var(--text)}.layer-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer-list button:hover .layer-name,.layer-list button.active .layer-name{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}.layer-list button.active:before{content:"→";margin-right:6px}.layer-meta{font:400 13px/1 var(--narrow);color:#52525b;font-variant-numeric:tabular-nums}.texture-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule);border-left:1px solid var(--rule)}.texture-tile{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border:none;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);background:#fff;cursor:pointer;font:700 13.5px/1.1 var(--narrow);text-transform:uppercase;color:var(--text)}.texture-tile canvas{display:block;max-width:100%}.texture-tile:hover{background:#f4f4f2}.texture-tile.active{box-shadow:inset 0 0 0 3px var(--rule)}.texture-tile:focus-visible{outline:2px solid var(--rule);outline-offset:-5px}.chips{display:flex;flex-wrap:wrap;gap:8px 16px}.chip-toggle{display:inline-flex;align-items:center;gap:6px;padding:0;border:none;background:none;cursor:pointer;font:700 14.5px/1 var(--narrow);text-transform:uppercase;color:#71717a}.chip-toggle.on{color:var(--text)}.box-mark{width:12px;height:12px;border:1.5px solid currentColor}.chip-toggle.on .box-mark{background:var(--rule);border-color:var(--rule)}@media(max-width:1500px){.toolbar{--elbow: 56px}.tb-link,.tb-label,.tb-sep{font-size:17px}}@media(max-width:1360px){.toolbar{--elbow: 34px;gap:22px}}@media(max-width:1020px){.hint{display:none}}@media(max-width:760px){.app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) minmax(0,46%);grid-template-areas:"brand" "bar" "stage" "panel"}.gutter{display:none}.brand{padding:8px 12px 6px;font-size:30px}.toolbar{padding:10px 12px 12px;gap:28px}.tb-link,.tb-label,.tb-sep{font-size:17px}.canvas-wrap{padding:12px}.panel{border-top:1px solid var(--rule)}[data-tip]:hover:after{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}