:root{color:#e4e6e8;background:#17191c;font-family:Inter,Noto Sans JP,Hiragino Sans,system-ui,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;--bg: #17191c;--panel: #202226;--panel-raised: #272a2e;--panel-deep: #191b1e;--line: #383b40;--line-soft: #303338;--muted: #979da5;--muted-dim: #747b84;--text: #e4e6e8;--accent: #91be5b;--accent-strong: #a2cf6b;--accent-bg: #293323;--warning: #e6ad58}*{box-sizing:border-box}html,body,#root{min-width:320px;min-height:100%}body{margin:0;min-height:100vh;overflow:hidden;font-size:13px}button,input,select{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible,select:focus-visible{outline:1px solid var(--accent-strong);outline-offset:1px}.checkerboard{background-color:#ededed;background-image:linear-gradient(45deg,#d5d5d5 25%,transparent 25%),linear-gradient(-45deg,#d5d5d5 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d5d5d5 75%),linear-gradient(-45deg,transparent 75%,#d5d5d5 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}.workspace{height:100vh;display:flex;flex-direction:column;background:var(--bg)}.app-header{height:50px;flex:0 0 50px;display:flex;align-items:center;padding:0 14px;gap:14px;border-bottom:1px solid var(--line);background:#222428}.brand{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:650;letter-spacing:-.015em}.brand-mark{width:25px;height:25px;display:grid;place-items:center;color:var(--accent-strong);background:#252b22;border:1px solid #46533c;border-radius:4px}.header-divider{height:23px;width:1px;background:var(--line)}.file-title{min-width:0;display:flex;flex-direction:column;gap:1px}.file-title strong{max-width:42vw;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px;font-weight:600}.file-title span{color:var(--muted-dim);font-family:SFMono-Regular,Consolas,monospace;font-size:10px}.header-actions{margin-left:auto;display:flex;align-items:center;gap:8px}.local-badge{display:flex;align-items:center;gap:6px;color:#a5b798;border:1px solid #404a3a;border-radius:3px;padding:4px 7px;font-family:SFMono-Regular,Consolas,monospace;font-size:10px}.close-file,.modal-footer button,.workbench-drop-actions button{border:1px solid #4a4e54;background:#303338;border-radius:3px;display:inline-flex;gap:7px;align-items:center;justify-content:center;padding:7px 10px;font-size:11px;cursor:pointer}.close-file:hover,.modal-footer button:hover,.workbench-drop-actions button:hover{background:#393d42;border-color:#5b6067}.workbench{flex:1;min-height:0;display:grid;grid-template-columns:292px minmax(340px,1fr) 326px}.panel{min-height:0;background:var(--panel)}.layers-panel{border-right:1px solid var(--line);display:flex;flex-direction:column}.export-panel{border-left:1px solid var(--line);display:flex;flex-direction:column;overflow:auto}.panel-heading{min-height:64px;padding:13px 13px 9px;display:flex;align-items:center;justify-content:space-between}.panel-kicker{display:block;color:var(--muted-dim);font-family:SFMono-Regular,Consolas,monospace;font-size:10px;letter-spacing:.08em;margin-bottom:3px}.panel-heading h2{font-size:14px;font-weight:600;margin:0;letter-spacing:-.01em}.panel-heading h2 em{color:#a7adb4;background:#303338;border-radius:3px;font-family:SFMono-Regular,Consolas,monospace;font-size:10px;font-style:normal;padding:2px 5px;margin-left:4px;vertical-align:1px}.select-all{color:#b1b6bd;border:0;background:transparent;font-size:11px;cursor:pointer;padding:6px}.select-all:hover{color:var(--text)}.search-box{height:34px;margin:0 11px 8px;padding:0 9px;display:flex;align-items:center;gap:7px;border:1px solid #3b3f44;background:#191b1e;border-radius:3px;color:#747b83}.search-box:focus-within{border-color:#69715f}.search-box input{flex:1;min-width:0;border:0;outline:0;color:#d9dcdf;background:transparent;font-size:11px}.search-box input::placeholder{color:#777e86}.search-box button{background:transparent;border:0;padding:2px;color:#888f97;cursor:pointer}.search-box.is-disabled{opacity:.55}.stack-hint{height:25px;display:flex;align-items:center;gap:5px;padding:0 14px;color:#818890;font-size:10px;border-bottom:1px solid var(--line-soft)}.layer-list{flex:1;overflow:auto;padding:4px 6px 10px;scrollbar-width:thin;scrollbar-color:#4a4e54 transparent}.layer-row{--depth: 0;min-height:52px;display:flex;align-items:center;padding:4px 6px 4px calc(3px + var(--depth) * 13px);border:1px solid transparent;border-radius:3px;cursor:default;position:relative}.layer-row:hover{background:#292c30}.layer-row.is-active{background:#30362c;border-color:#46523e}.layer-row.is-dragging{opacity:.42}.layer-row.is-disabled{opacity:.48}.drag-handle{width:17px;height:30px;flex:0 0 17px;display:grid;place-items:center;color:#747a82;cursor:grab}.drag-handle:active{cursor:grabbing}.drag-handle.is-disabled{opacity:.3;cursor:default}.check-button{width:16px;height:16px;padding:0;display:grid;place-items:center;flex:0 0 auto;border:1px solid #626870;border-radius:3px;background:#1b1d20;color:#1e2618;cursor:pointer}.check-button.is-checked{background:var(--accent);border-color:var(--accent)}.check-button:disabled{cursor:not-allowed}.expand-button{width:19px;padding:0;margin:0 2px;background:transparent;border:0;color:#9299a1;display:grid;place-items:center;cursor:pointer}.expand-button.is-placeholder{pointer-events:none}.layer-thumb{width:36px;height:36px;flex:0 0 auto;border:1px solid #4b5056;border-radius:2px;overflow:hidden;display:grid;place-items:center;color:#666d75;background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0}.layer-thumb canvas{width:100%;height:100%;display:block}.layer-copy{min-width:0;margin-left:8px;display:flex;flex-direction:column;gap:2px}.layer-name{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer-kind{color:#9399a1;font-family:SFMono-Regular,Consolas,monospace;font-size:9px;text-transform:uppercase}.visibility{flex:0 0 auto;margin-left:auto;color:#989fa6;padding-left:5px}.visibility.is-off{color:#60666d;opacity:.65}.warning-dot{width:6px;height:6px;flex:0 0 auto;border-radius:50%;background:var(--warning);margin-left:auto}.warning-dot+.visibility{margin-left:3px}.selection-footer{height:36px;flex:0 0 36px;display:flex;align-items:center;justify-content:center;gap:5px;border-top:1px solid var(--line);color:#9299a1;font-family:SFMono-Regular,Consolas,monospace;font-size:10px;text-transform:uppercase;letter-spacing:.04em}.selection-footer span{color:var(--accent-strong)}.panel-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;color:#747b83;font-size:11px}.canvas-area{min-width:0;min-height:0;display:flex;flex-direction:column;background:#141619}.canvas-toolbar{height:40px;flex:0 0 40px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 12px;background:#232529}.preview-label{color:#aeb3ba;display:flex;align-items:center;gap:7px;font-size:11px;max-width:65%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.status-pulse{width:5px;height:5px;border-radius:50%;background:var(--accent)}.zoom-controls{display:flex;align-items:center;gap:2px}.zoom-controls button{width:28px;height:27px;display:grid;place-items:center;border:0;background:transparent;color:#adb2b8;border-radius:2px;cursor:pointer}.zoom-controls button:hover{color:#f0f1f2;background:#34373c}.zoom-controls span:not(.toolbar-separator){width:44px;text-align:center;color:#a7adb4;font-family:SFMono-Regular,Consolas,monospace;font-size:10px}.zoom-controls .toolbar-separator{width:1px;height:16px;background:#45494f;margin:0 4px}.canvas-stage{flex:1;min-height:0;padding:46px;display:flex;justify-content:center;align-items:center;overflow:auto;background-color:#15171a;background-image:radial-gradient(#35383d .7px,transparent .7px);background-size:17px 17px}.artboard{flex:0 0 auto;position:relative;box-shadow:0 12px 38px #00000073,0 0 0 1px #5b6066;overflow:hidden}.artboard canvas{display:block;image-rendering:auto}.empty-canvas{display:flex;flex-direction:column;align-items:center;gap:10px;color:#777e86;font-size:11px}.canvas-statusbar{height:30px;flex:0 0 30px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);background:#232529;color:#9299a1;font-family:SFMono-Regular,Consolas,monospace;font-size:10px}.empty-stage{padding:28px}.empty-stage.is-dragging{background-color:#20251d}.hidden-file-input{display:none}.workbench-drop{width:min(480px,90%);min-height:260px;border:1px dashed #565c63;background:#202226;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.empty-stage.is-dragging .workbench-drop{border-color:var(--accent);background:#252b22}.workbench-drop-icon{width:46px;height:46px;display:grid;place-items:center;color:#b7bdc4;border:1px solid #4a4f55;background:#292c30;margin-bottom:16px}.workbench-drop strong{font-size:14px;font-weight:600}.workbench-drop>span{color:#9299a1;font-size:11px;margin-top:6px}.workbench-drop-actions{display:flex;gap:7px;margin-top:20px}.primary-action{color:#17200f!important;background:var(--accent)!important;border-color:var(--accent)!important;font-weight:650}.primary-action:hover:not(:disabled){background:var(--accent-strong)!important}.primary-action:disabled{opacity:.5;cursor:not-allowed}.upload-error{margin-top:14px;color:#e2a18e;display:flex;align-items:center;gap:7px;font-size:11px}.empty-instructions ol{margin:8px 0 0;padding-left:20px;color:#a8adb4;font-size:11px;line-height:2}.inspector-heading{min-height:59px;border-bottom:1px solid var(--line)}.inspector-heading>svg{color:#8f969e}.inspector-section{padding:14px;border-bottom:1px solid var(--line-soft)}.inspector-section h3,.render-options h3{margin:0 0 10px;color:#aeb4bb;font-size:10px;text-transform:uppercase;letter-spacing:.07em}.inspector-section>p{color:#969ca4;font-size:11px;line-height:1.6;margin:8px 0 0}.document-summary{display:flex;align-items:center;gap:9px}.summary-icon{width:34px;height:34px;border:1px solid #484d53;background:#2b2e32;border-radius:3px;display:grid;place-items:center;color:#a6acb3}.document-summary>div:nth-child(2){display:flex;flex:1;min-width:0;flex-direction:column;gap:2px}.document-summary strong{font-size:12px;font-weight:600}.document-summary span{color:#9299a1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}.compatibility-pill{border-radius:2px;padding:3px 5px;font-family:SFMono-Regular,Consolas,monospace;font-size:9px;text-transform:uppercase}.compatibility-pill.is-review{color:#e0b369;background:#3a3123;border:1px solid #5b482b}.selection-summary dl,.active-details dl,.modal-summary dl{margin:0}.selection-summary dl div,.active-details dl div,.modal-summary dl div{display:flex;justify-content:space-between;padding:6px 0;color:#969da5;font-family:SFMono-Regular,Consolas,monospace;font-size:10px;border-bottom:1px solid #2f3236}.selection-summary dt,.selection-summary dd,.active-details dt,.active-details dd,.modal-summary dt,.modal-summary dd{margin:0}.selection-summary dd,.active-details dd,.modal-summary dd{color:#c7cbd0}.active-details{flex:1}.detail-name{display:flex;align-items:center;gap:9px;margin-bottom:10px}.detail-name .layer-thumb{width:40px;height:40px}.detail-name>span{min-width:0;display:flex;flex-direction:column;gap:3px}.detail-name strong{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.detail-name small{color:#9299a1;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer-compatibility{margin-top:10px;padding:9px;border:1px solid #594629;color:#d8aa60;background:#342c21;display:flex;gap:8px;align-items:flex-start}.layer-compatibility>span{color:#c0b09a;font-size:10px;line-height:1.5}.export-footer{position:sticky;bottom:0;padding:11px 12px 12px;border-top:1px solid var(--line);background:#222428}.export-button{width:100%;min-height:38px;border:1px solid #6d8b49;border-radius:3px;display:flex;align-items:center;justify-content:center;gap:8px;color:#17200f;background:var(--accent);font-size:11px;font-weight:650;cursor:pointer}.export-button:hover:not(:disabled){background:var(--accent-strong)}.export-button:disabled{color:#777e86;border-color:#44484e;background:#303338;cursor:not-allowed}.export-footer>span{display:block;margin-top:7px;color:#858c94;text-align:center;font-family:SFMono-Regular,Consolas,monospace;font-size:9px;text-transform:uppercase}.export-warning,.export-notice{margin-bottom:7px;display:flex;align-items:center;justify-content:center;gap:6px;color:#d5a65a;font-size:10px;line-height:1.4;text-align:center}.export-notice{color:#adc48f}.modal-backdrop{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:#050607b8}.export-modal{width:min(820px,96vw);max-height:calc(100vh - 40px);overflow:hidden;display:flex;flex-direction:column;background:#25272b;border:1px solid #555a60;box-shadow:0 24px 70px #0000008c}.modal-header{min-height:61px;padding:12px 15px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:#2b2e32}.modal-header h2{margin:0;font-size:16px;font-weight:600}.modal-header button{width:30px;height:30px;display:grid;place-items:center;border:0;background:transparent;color:#aeb4ba;cursor:pointer}.modal-body{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 230px;overflow:auto}.modal-main{padding:16px}.modal-summary{padding:16px;border-left:1px solid var(--line);background:#202226}.field-label{display:flex;flex-direction:column;gap:6px;color:#b7bcc2;font-size:11px}.field-label>span{margin-left:auto}.field-label input:not(.quality-range),.field-label select{width:100%;height:34px;border:1px solid #4c5157;border-radius:2px;background:#191b1e;color:#e1e3e5;padding:0 9px;font-size:11px}.modal-field{margin-top:15px}.field-label-text{display:block;color:#b7bcc2;font-size:11px;margin-bottom:6px}.format-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.format-grid button{min-height:55px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;padding:8px 10px;border:1px solid #484d53;border-radius:2px;background:#202226;color:#c6cbd0;cursor:pointer}.format-grid button.is-active{border-color:#718b53;background:#2c3427}.format-grid strong{font-size:12px}.format-grid small{color:#8f969e;font-size:9px}.modal-grid{display:grid;gap:10px;margin-top:14px}.modal-grid.two-columns{grid-template-columns:1fr 1fr}.quality-range{width:100%;accent-color:var(--accent)}.field-note{align-self:end;min-height:34px;display:flex;align-items:center;gap:7px;color:#a9b99a;font-size:10px}.render-options{margin-top:17px;padding-top:14px;border-top:1px solid var(--line)}.switch-row{min-height:45px;display:flex;align-items:center;cursor:pointer}.switch-row+.switch-row{border-top:1px solid #34373c}.switch-row>span{display:flex;flex:1;flex-direction:column;gap:2px}.switch-row strong{color:#d2d5d8;font-size:11px;font-weight:500}.switch-row small{color:#8f969e;font-size:10px}.switch-row input{display:none}.switch-row i{width:30px;height:17px;position:relative;background:#41454a;border:1px solid #50555b;border-radius:9px;transition:.12s}.switch-row i:after{content:"";position:absolute;left:3px;top:3px;width:9px;height:9px;background:#a5abb2;border-radius:50%;transition:.12s}.switch-row input:checked+i{background:#51683a;border-color:#68854a}.switch-row input:checked+i:after{left:16px;background:#d7e8c3}.switch-row input:disabled+i{opacity:.35}.summary-preview{height:132px;display:grid;place-items:center;color:#686f77;border:1px solid #4a4f55;margin-bottom:13px}.modal-summary p{color:#989fa6;font-size:10px;line-height:1.6}.modal-footer{min-height:58px;display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:10px 15px;border-top:1px solid var(--line);background:#2b2e32}.modal-footer button{min-width:92px}.file-title span,.local-badge,.panel-kicker,.panel-heading h2 em,.stack-hint,.layer-kind,.selection-footer,.zoom-controls span:not(.toolbar-separator),.canvas-statusbar,.inspector-section h3,.render-options h3,.document-summary span,.compatibility-pill,.selection-summary dl div,.active-details dl div,.modal-summary dl div,.detail-name small,.layer-compatibility>span,.export-footer>span,.export-warning,.export-notice,.format-grid small,.field-note,.switch-row small,.modal-summary p{font-size:11px}.spin{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:1100px){.workbench{grid-template-columns:258px minmax(310px,1fr) 292px}}@media(max-width:820px){body{overflow:auto}.workspace{min-height:100vh;height:auto}.app-header{position:sticky;top:0;z-index:10}.local-badge,.header-divider{display:none}.close-file{font-size:0}.workbench{grid-template-columns:minmax(0,1fr);grid-template-rows:54vh auto auto}.canvas-area{grid-row:1}.layers-panel{grid-row:2;min-height:440px;border-right:0;border-top:1px solid var(--line)}.export-panel{grid-row:3;min-height:500px;border-left:0;border-top:1px solid var(--line);overflow:visible}.layer-list{max-height:360px}.canvas-stage{padding:28px}.export-footer{position:static}.modal-body{grid-template-columns:1fr}.modal-summary{border-left:0;border-top:1px solid var(--line)}.summary-preview{display:none}}@media(max-width:520px){.file-title span{display:none}.canvas-statusbar span:last-child{display:none}.modal-backdrop{padding:0}.export-modal{width:100vw;max-height:100vh;height:100vh}.modal-grid.two-columns,.format-grid{grid-template-columns:1fr}.format-grid button{min-height:48px}}