@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap";:root{--bg-base:#000;--bg-panel:#141414;--bg-elevated:#1a1a1a;--bg-card:#111;--bg-hover:#222;--bg-active:#2a2a2a;--border-subtle:#ffffff14;--border-medium:#ffffff1f;--text-primary:#f5f5f5;--text-secondary:#ffffff8c;--text-muted:#ffffff59;--accent:#ff3c00;--accent-export:#ff3c00;--accent-export-hover:#ff5520;--accent-glow:#ff3c0040;--accent-muted:#ff3c001f;--accent-border:#ff3c0073;--radius-panel:16px;--radius-card:12px;--radius-sm:8px;--font-sans:"Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;--sidebar-width:250px;--right-panel-width:250px;--app-padding:16px;--panel-gap:16px;--section-gap:32px;--btn-main-height:56px;--btn-input-height:48px;--btn-small-height:40px;--btn-icon-size:40px}*,:before,:after{box-sizing:border-box}html{scrollbar-width:none;-ms-overflow-style:none}html::-webkit-scrollbar{width:0;height:0;display:none}html,body,#root{height:100%;margin:0}body{font-family:var(--font-sans);color:var(--text-primary);background:var(--bg-base);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:14px;line-height:1.5;overflow:hidden}button{cursor:pointer;font-family:inherit}button:disabled{cursor:not-allowed}button:disabled:not(.btn--placement){opacity:.4}input[type=range]{accent-color:var(--accent-export)}input[type=range]:disabled{opacity:.4}.scroll-panel{scrollbar-width:none;-ms-overflow-style:none}.scroll-panel::-webkit-scrollbar{width:0;height:0;display:none}.app{height:100%;padding:var(--app-padding);background:var(--bg-base)}.app__workspace{grid-template-columns:var(--sidebar-width) 1fr var(--right-panel-width);gap:var(--panel-gap);height:100%;min-height:0;display:grid}.app__right-column{gap:var(--panel-gap);flex-direction:column;min-height:0;display:flex}.panel{border:1px solid var(--border-subtle);border-radius:var(--radius-panel);background:var(--bg-panel);padding:var(--app-padding);min-height:0}.sidebar-section{flex-direction:column;gap:12px;display:flex}.sidebar-section--divider,.panel-section--divider{margin-top:var(--section-gap);border-top:1px solid var(--border-subtle);padding-top:12px}.panel-section{flex-direction:column;gap:12px;display:flex}.panel-field{flex-direction:column;gap:8px;display:flex}.sidebar-title{color:var(--text-secondary);letter-spacing:-.01em;margin:0;font-size:14px;font-weight:500}.section-label{color:var(--text-muted);margin:0;font-size:12px;font-weight:500}.btn{border-radius:var(--radius-card);border:1px solid #0000;justify-content:center;align-items:center;gap:8px;font-size:14px;font-weight:500;transition:background .15s,border-color .15s,color .15s;display:inline-flex}.btn--small,.btn--control{height:var(--btn-input-height);background:var(--bg-hover);color:var(--text-primary);border:1px solid var(--border-subtle);border-radius:var(--radius-card);width:100%;padding:0 14px}.btn--small:hover:not(:disabled),.btn--control:hover:not(:disabled){background:var(--bg-active);border-color:var(--border-medium)}.btn--ghost-small{height:auto;color:var(--text-muted);background:0 0;border:none;padding:4px 0;font-size:12px;font-weight:400}.btn--ghost-small:hover:not(:disabled){color:var(--text-secondary)}.btn--icon{width:var(--btn-icon-size);height:var(--btn-icon-size);background:var(--bg-hover);color:var(--text-secondary);border:1px solid var(--border-subtle);padding:0}.btn--icon:hover:not(:disabled){background:var(--bg-active);color:var(--text-primary)}.btn--export{height:var(--btn-main-height);border-radius:var(--radius-panel);background:var(--accent-export);color:#fff;width:100%;box-shadow:0 2px 12px var(--accent-glow);border:none;flex-shrink:0;font-size:14px;font-weight:500}.btn--export:hover:not(:disabled){background:var(--accent-export-hover)}.left-sidebar{flex-direction:column;padding:0;display:flex;overflow:hidden}.left-sidebar__scroll{min-height:0;padding:var(--app-padding);scrollbar-width:none;-ms-overflow-style:none;flex:1;overflow-y:auto}.left-sidebar__scroll::-webkit-scrollbar{width:0;height:0;display:none}.left-sidebar__placement{padding:12px var(--app-padding) var(--app-padding);border-top:1px solid var(--border-subtle);background:var(--bg-panel);flex-shrink:0}.scene-gallery{flex-direction:column;gap:4px;display:flex}.scene-card{border-radius:var(--radius-card);height:52px;min-height:48px;color:var(--text-secondary);text-align:left;background:0 0;border:1px solid #0000;align-items:center;gap:10px;padding:4px 8px;transition:border-color .15s,background .15s;display:flex}.scene-card:hover{color:var(--text-primary);background:#ffffff0a}.scene-card--active{color:var(--text-primary);background:#ffffff0f;border-color:#ffffff1f}.scene-card__thumb{background:var(--bg-elevated);border-radius:6px;flex-shrink:0;width:40px;height:40px;overflow:hidden}.scene-card__thumb-image{object-fit:cover;width:100%;height:100%;display:block}.scene-card__thumb-fallback{background:var(--bg-elevated);width:100%;height:100%}.scene-card__name{white-space:nowrap;text-overflow:ellipsis;font-size:12px;font-weight:500;overflow:hidden}.upload-btn{width:100%;height:var(--btn-input-height);border-radius:var(--radius-card);color:#000;background:#fff;border:1px solid #0000;justify-content:center;align-items:center;margin-top:4px;font-size:14px;font-weight:500;transition:background .15s,opacity .15s;display:flex}.upload-btn:hover:not(:disabled){background:#f0f0f0}.upload-btn--active{background:#e8e8e8}.upload-btn--has-file{background:var(--bg-hover);color:var(--text-primary);border-color:var(--border-subtle)}.upload-btn--has-file:hover:not(:disabled){background:var(--bg-active)}.upload-btn:disabled{opacity:.45;cursor:not-allowed}.screen-color-control__row{align-items:center;gap:8px;display:flex}.screen-color-control__picker{width:40px;height:var(--btn-input-height);border:1px solid var(--border-subtle);border-radius:var(--radius-card);background:var(--bg-hover);cursor:pointer;padding:2px}.screen-color-control__picker:disabled{opacity:.45;cursor:not-allowed}.screen-color-control__hex{height:var(--btn-input-height);border:1px solid var(--border-subtle);border-radius:var(--radius-card);background:var(--bg-hover);color:var(--text-primary);letter-spacing:.04em;flex:1;padding:0 10px;font-family:ui-monospace,monospace;font-size:13px}.screen-color-control__hex:disabled{opacity:.45;cursor:not-allowed}.toggle-row{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:10px;margin-top:4px;display:flex}.toggle-row--flat{margin-top:8px}.toggle-row__input{opacity:0;width:0;height:0;position:absolute}.toggle-row__switch{background:var(--bg-hover);border:1px solid var(--border-subtle);border-radius:10px;flex-shrink:0;width:36px;height:20px;transition:background .15s;position:relative}.toggle-row__switch:after{content:"";background:var(--text-muted);border-radius:50%;width:14px;height:14px;transition:transform .15s,background .15s;position:absolute;top:2px;left:2px}.toggle-row__input:checked+.toggle-row__switch{background:var(--accent-muted);border-color:var(--accent-border)}.toggle-row__input:checked+.toggle-row__switch:after{background:var(--accent-export);transform:translate(16px)}.toggle-row__text{color:var(--text-secondary);font-size:12px}.zoom-controls{flex-direction:column;gap:6px;display:flex}.zoom-controls__row{gap:6px;display:flex}.btn--placement{width:50%;min-width:0;height:var(--btn-input-height);border-radius:var(--radius-card);border:1px solid var(--border-subtle);background:var(--bg-hover);color:var(--text-primary);flex:1;padding:0 10px;font-size:13px;font-weight:500}.btn--placement:hover:not(:disabled){background:var(--bg-active);border-color:var(--border-medium)}.btn--placement:disabled{opacity:.55}.btn--placement-full{flex:none;width:100%}.btn--placement-active{background:var(--accent-muted);border-color:var(--accent-border);color:var(--text-primary)}.canvas-area{padding:var(--app-padding);background-color:#0a0a0a;background-image:radial-gradient(circle,#ffffff0d 1px,#0000 1px);background-size:14px 14px;flex-direction:column;display:flex;position:relative;overflow:hidden}.chroma-warning{border-radius:var(--radius-card);color:#ff8a66;background:#ff3c001a;border:1px solid #ff3c0059;margin-bottom:10px;padding:10px 12px;font-size:13px;line-height:1.4}.canvas-area__stage{flex:1;justify-content:center;align-items:center;width:100%;min-height:0;display:flex;position:relative}.canvas-area__frame{width:fit-content;max-width:100%;height:fit-content;max-height:100%;line-height:0;display:inline-block;position:relative}.canvas-area__canvas{max-width:100%;max-height:calc(100vh - var(--app-padding) * 4 - 32px);touch-action:none;width:auto;height:auto;display:block}.canvas-area__interaction{pointer-events:none;position:absolute;inset:0}.canvas-reset-fab{z-index:6;color:#000;cursor:pointer;background:#fff;border:none;border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;transition:transform .18s,box-shadow .18s;display:flex;position:absolute;bottom:24px;left:24px;box-shadow:0 4px 20px #0006}.canvas-reset-fab:hover{transform:scale(1.04);box-shadow:0 6px 24px #00000080}.screen-upload-zone{z-index:4;pointer-events:auto;cursor:pointer;touch-action:none;justify-content:center;align-items:center;display:flex;position:absolute;overflow:hidden}.screen-upload-zone:before{content:"";border-radius:inherit;pointer-events:none;background:0 0;transition:background .15s;position:absolute;inset:0}.screen-upload-zone:hover:before,.screen-upload-zone--dragging:before{background:#0003}.screen-upload-zone__fab{z-index:1;color:#000;cursor:pointer;background:#fff;border:none;border-radius:50%;justify-content:center;align-items:center;width:52px;height:52px;transition:transform .18s,box-shadow .18s;display:flex;position:relative;box-shadow:0 4px 20px #00000059}.screen-upload-zone:hover .screen-upload-zone__fab,.screen-upload-zone--dragging .screen-upload-zone__fab{transform:scale(1.05);box-shadow:0 6px 24px #00000073}.perspective-overlay{z-index:4;pointer-events:none;position:absolute;inset:0}.perspective-overlay__svg{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.perspective-overlay__quad{fill:#ffffff0a;stroke:#ffffffbf;stroke-width:1.5px;vector-effect:non-scaling-stroke}.perspective-overlay__handle{cursor:grab;pointer-events:auto;touch-action:none;background:#fff;border:1.5px solid #ffffffe6;border-radius:50%;width:10px;height:10px;padding:0;transition:transform .12s;position:absolute;transform:translate(-50%,-50%);box-shadow:0 1px 3px #00000059}.perspective-overlay__handle:hover,.perspective-overlay__handle--active{transform:translate(-50%,-50%)scale(1.2)}.perspective-overlay__handle--active{cursor:grabbing}.transform-box{pointer-events:auto;touch-action:none;z-index:3;position:absolute}.transform-box--dragging{cursor:grabbing!important}.transform-box__outline{pointer-events:none;border:1.5px solid #ffffffb3;border-radius:1px;position:absolute;inset:0;box-shadow:0 0 0 1px #00000059}.transform-box__handle{background:#fff;border:1.5px solid #ffffffd9;border-radius:1px;width:8px;height:8px;padding:0;transition:transform .12s;position:absolute;transform:translate(-50%,-50%);box-shadow:0 1px 3px #00000059}.transform-box__handle:hover{transform:translate(-50%,-50%)scale(1.2)}.transform-box__handle--corner{border-radius:50%}.transform-box__handle--nw{top:0;left:0}.transform-box__handle--n{top:0;left:50%}.transform-box__handle--ne{top:0;left:100%}.transform-box__handle--e{top:50%;left:100%}.transform-box__handle--se{top:100%;left:100%}.transform-box__handle--s{top:100%;left:50%}.transform-box__handle--sw{top:100%;left:0}.transform-box__handle--w{top:50%;left:0}.right-panel{scrollbar-width:none;-ms-overflow-style:none;flex-direction:column;flex:1;min-height:0;display:flex;overflow-y:auto}.right-panel::-webkit-scrollbar{width:0;height:0;display:none}.right-panel__header{margin-bottom:var(--section-gap);justify-content:space-between;align-items:center;display:flex}.blend-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.blend-chip{height:var(--btn-small-height);border-radius:var(--radius-sm);border:1px solid var(--border-subtle);background:var(--bg-elevated);color:var(--text-secondary);text-align:center;padding:0 10px;font-size:12px;font-weight:500;transition:background .15s,border-color .15s,color .15s}.blend-chip:hover:not(:disabled){background:var(--bg-hover);color:var(--text-primary)}.blend-chip--active{background:var(--bg-hover);color:var(--text-primary);border-color:#fff3}.option-grid{gap:8px;display:flex}.option-chip{height:var(--btn-input-height);border-radius:var(--radius-card);border:1px solid var(--border-subtle);background:var(--bg-elevated);color:var(--text-secondary);text-align:center;flex:1;padding:0 12px;font-size:14px;font-weight:500;transition:background .15s,border-color .15s,color .15s}.option-chip:hover:not(:disabled){background:var(--bg-hover);color:var(--text-primary)}.option-chip--active{border-color:var(--accent-border);background:var(--accent-muted);color:var(--text-primary)}.slider-control{margin-bottom:14px}.slider-control:last-child{margin-bottom:0}.slider-control__header{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.slider-control__label{color:var(--text-secondary);font-size:12px}.slider-control__value{color:var(--text-muted);font-variant-numeric:tabular-nums;font-size:11px}.slider-control__input{cursor:pointer;width:100%;height:4px}.slider-control__input:disabled{cursor:not-allowed;opacity:.4}@media (width<=1000px){.app__workspace{grid-template-columns:220px 1fr 220px}}@media (width<=800px){.app{overflow-y:auto}body{overflow:auto}.app__workspace{grid-template-rows:auto 1fr auto;grid-template-columns:1fr;height:auto;min-height:100%}.left-sidebar,.right-panel{max-height:none}.canvas-area{min-height:50vh}}