:root,:root[data-theme=dark]{color-scheme:dark;--base: #151919;--surface: #202623;--raised: #303c34;--selected: #35432d;--text: #e1e6df;--muted: #a6b4aa;--line: #4b5a4f;--accent: #d7bd83;--accent-text: #ead6a2;--accent-hover: #ead5a6;--on-accent: #20251f;--danger: #ffb79c;--danger-surface: #512e25;--warning: #e0b76d;--success: #95b79c;--teal: #88c9bf}:root[data-theme=light]{color-scheme:light;--base: #e7ece5;--surface: #f8faf4;--raised: #dce5d9;--selected: #e4ead3;--text: #24332a;--muted: #526357;--line: #a7b7a5;--accent: #3c633e;--accent-text: #4f5a26;--accent-hover: #2e5031;--on-accent: #ffffff;--danger: #963e24;--danger-surface: #fbe7dc;--warning: #805211;--success: #3c7048;--teal: #246e66}:root{font-family:PingFang TC,Noto Sans TC,sans-serif;color:var(--text);background:var(--base);font-synthesis:none;font-size:12px}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer;border:1px solid transparent;background:none;color:inherit;border-radius:4px;padding:7px 10px;white-space:nowrap}button:hover{background:var(--raised)}button:disabled{opacity:.3;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}input:not([type=range]):not([type=checkbox]):not([type=color]),select{background:var(--surface);border:1px solid var(--line);color:var(--text);border-radius:4px;padding:8px;min-width:0}input[type=range]{width:100%;accent-color:var(--accent);margin:12px 0}input[type=checkbox]{accent-color:var(--accent);vertical-align:middle}input[type=color]{cursor:pointer}small{font-size:10px;color:var(--muted)}.app{min-width:940px;height:100dvh;min-height:640px;display:flex;flex-direction:column}.app>header{height:78px;display:flex;align-items:center;gap:30px;padding:0 24px;border-bottom:1px solid var(--line);background:var(--surface)}.brand{display:flex;gap:12px;align-items:center;min-width:218px;font-size:18px}.brand b{font-weight:500;font-family:Georgia,serif;letter-spacing:-.3px}.brand small{display:block;font-size:8px;letter-spacing:3.5px;margin-top:6px}.brand-mark{font-size:38px;color:var(--accent)}.project-name{display:flex;align-items:center;gap:12px;flex:1}.project-name input{width:160px;border:0!important;background:transparent!important}.project-name span{font-size:10px;color:var(--muted);white-space:nowrap}.project-name .unsaved{color:var(--accent)}.header-actions{display:flex;gap:7px}.header-actions button{border-color:var(--line)}button.primary{background:var(--accent);color:var(--on-accent);font-weight:600;padding:10px 16px}.primary:hover{background:var(--accent-hover)}.commandbar{height:48px;display:flex;border-bottom:1px solid var(--line);background:var(--surface);align-items:center}.mode{width:160px;padding-left:20px;white-space:nowrap}.mode i,.local-note i,.local-dot:before{display:inline-block;background:var(--success);width:5px;height:5px;border-radius:50%;margin-right:6px}.mode span{font:8px monospace;color:var(--muted);display:block;margin-left:12px;margin-top:3px;letter-spacing:1px}.commands{display:flex;align-items:center;gap:5px}.commands button{font-size:11px}.commands button[aria-label=復原],.commands button[aria-label=重做]{font-size:24px;line-height:24px;padding:2px 10px}.divider{height:18px;width:1px;background:var(--line);margin:0 8px}main{display:flex;flex:1;min-height:0}.tool-panel{width:150px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--line);padding:22px 16px;display:flex;flex-direction:column;overflow:auto}.section-title{font-size:10px;letter-spacing:1px;color:var(--muted);margin-bottom:13px;display:flex;justify-content:space-between}.section-title span{font:10px monospace;color:var(--muted)}.tools{display:grid;grid-template-columns:1fr 1fr;gap:6px}.tools button{height:43px;position:relative;border:1px solid var(--line);border-radius:4px}.tools button>span{font-size:25px;line-height:25px}.tools button small{position:absolute;right:4px;bottom:3px;font:8px monospace}.tools .selected{background:var(--raised);color:var(--muted);border-color:var(--line)}.tools .selected small{color:var(--muted)}.tool-name{text-align:center;color:var(--accent);font-size:10px;margin:11px 0 25px}.stack{display:block;position:relative;font-size:10px}.stack output{float:right;color:var(--muted);font-family:monospace}.color-preview{height:42px;border:4px solid var(--line);border-radius:5px;display:block;overflow:hidden;margin-bottom:8px}.color-preview input{opacity:0;width:100%;height:100%}code{display:block;font:10px monospace;text-align:center;color:var(--muted);margin-bottom:18px}.mini-palette{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:5px}.mini-palette button{height:22px;padding:0;border:1px solid #ffffff18}.local-note{margin-top:auto;padding-top:30px;font-size:10px;line-height:1.9}.local-note span{font-size:9px;color:var(--muted)}.workspace{flex:1;display:flex;flex-direction:column;min-width:0}.workspace-bar{height:48px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:var(--surface);gap:12px}.workspace-bar b{font-size:11px;font-weight:500}.workspace-bar>div{display:flex;align-items:center;gap:14px;font-size:10px}.workspace-bar select{padding:5px}.viewport{flex:1;position:relative;min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center;touch-action:none;user-select:none;background-color:var(--base);background-image:radial-gradient(#3a433933 .8px,transparent .8px);background-size:12px 12px;overscroll-behavior:contain}.canvas-wrap{position:relative;flex-shrink:0;box-shadow:0 12px 60px #0007,0 0 0 1px #708176;cursor:crosshair;background:conic-gradient(#404943 25%,#343b36 0 50%,#404943 0 75%,#343b36 0);background-size:16px 16px}.canvas-wrap canvas{width:100%;height:100%;display:block;image-rendering:pixelated}.overlay{position:absolute;inset:0;pointer-events:none}.pixel-grid{background-image:linear-gradient(to right,#0a120f30 1px,transparent 1px),linear-gradient(to bottom,#0a120f30 1px,transparent 1px)}.tile-grid{background-image:linear-gradient(to right,#d7bd8390 1px,transparent 1px),linear-gradient(to bottom,#d7bd8390 1px,transparent 1px)}.selection{position:absolute;border:1px dashed white;outline:1px solid var(--line);pointer-events:none;background:#e3d2a514}.canvas-label{position:absolute;top:20px;left:22px;z-index:1;color:var(--muted);font:10px monospace;letter-spacing:1px}.canvas-label span{color:var(--muted);margin-left:12px;letter-spacing:0}.viewport-hint{position:absolute;bottom:18px;font-size:10px;color:var(--muted);pointer-events:none}.viewport-hint span{margin:0 12px;color:var(--muted)}.state-strip{height:100px;display:flex;gap:22px;align-items:center;padding:16px 22px;border-top:1px solid var(--line);background:var(--surface)}.state-caption{font-size:11px}.state-caption small{display:block;font-size:9px;margin-top:8px}.state-card{display:flex;gap:12px;align-items:center;border:1px solid var(--line);background:var(--raised);min-width:164px;text-align:left;padding:12px}.state-card small{display:block;margin-top:5px}.state-card i{width:5px;height:5px;background:var(--accent);border-radius:50%;margin-left:auto}.state-icon{font-size:30px;color:var(--muted)}.coming{font-size:10px;color:var(--muted);line-height:1.8;border-left:1px solid var(--line);padding-left:20px}.coming span{color:var(--muted)}.inspector{width:280px;min-width:240px;max-width:420px;resize:horizontal;overflow:auto;border-left:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column}.tabs{display:flex;border-bottom:1px solid var(--line);height:48px;flex-shrink:0}.tabs button{flex:1;border-radius:0;color:var(--muted);font-size:11px}.tabs button.active{color:var(--accent);border-bottom:2px solid var(--accent)}.panel-heading{display:flex;justify-content:space-between;align-items:center;padding:18px 16px 10px}.panel-heading small{margin-left:8px}.panel-heading button{font-size:20px;padding:0 8px}.layer-list{max-height:240px;overflow:auto}.layer-row{display:flex;align-items:center;padding:8px;border-left:2px solid transparent;gap:2px}.layer-row.active{border-left-color:var(--accent);background:var(--raised)}.layer-row button{padding:5px}.layer-row .visibility{color:var(--muted)}.layer-select{display:flex;text-align:left;align-items:center;gap:9px;flex:1;min-width:0}.layer-select>span:last-child{overflow:hidden;text-overflow:ellipsis;font-size:11px}.layer-select small{display:block;font:8px monospace;margin-top:5px}.layer-thumb{font-size:25px;color:var(--muted);background:repeating-conic-gradient(#525e4e 0% 25%,#3f4c3d 0% 50%) 50%/8px 8px;width:35px;height:35px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line)}.layer-number{font:8px monospace;color:var(--muted)}.layer-actions{display:flex;border-bottom:1px solid var(--line);padding:10px 10px 15px;gap:2px}.layer-actions button{font-size:10px;padding:6px}.panel-section{padding:22px 18px}.panel-section h3{font-size:12px;font-weight:500;margin:0 0 16px}.panel-section label{display:block;font-size:10px;margin-bottom:22px;color:var(--text)}.panel-section input:not([type=range]){display:block;width:100%;margin-top:10px}.muted{font-size:10px;line-height:1.9;color:var(--muted)}.palette{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:20px 0}.palette button{height:38px}.inspector-footer{margin-top:auto;padding:30px 20px;border-top:1px solid var(--line)}.inspector-footer>span{font-family:serif;font-size:16px;color:var(--text)}.inspector-footer p{font-size:10px;line-height:1.9;color:var(--muted)}.inspector-footer b{display:block;font:8px monospace;letter-spacing:1.5px;margin-top:20px;color:var(--muted)}dl{display:grid;grid-template-columns:85px 1fr;gap:20px 0;font-size:10px}dt{color:var(--muted)}dd{margin:0}.app>footer{height:32px;display:flex;align-items:center;border-top:1px solid var(--line);background:var(--surface);padding:0 18px;gap:24px;font-size:9px;color:var(--muted)}footer .status{flex:1;color:var(--muted)}footer b{font:10px monospace;color:var(--text)}.local-dot{font:9px monospace;letter-spacing:1px}.local-dot:before{content:""}.modal-backdrop{position:fixed;inset:0;background:#07110ccc;display:grid;place-items:center;z-index:20;backdrop-filter:blur(5px)}.modal{width:460px;padding:36px;background:var(--raised);border:1px solid var(--line);box-shadow:0 25px 80px #0006;border-radius:10px}.eyebrow{font:9px monospace;color:var(--accent);letter-spacing:2px}.modal h2{font-family:serif;font-size:27px;font-weight:500;margin:20px 0 10px}.modal p{font-size:11px;color:var(--muted);line-height:1.9}.modal label{display:block;margin-top:22px;font-size:11px}.modal select,.modal input{display:block;width:100%;margin-top:10px}.dimensions{display:flex;align-items:center;gap:20px}.dimensions label{flex:1}.dimensions>span{margin-top:40px;color:var(--muted)}.modal-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:28px}@media(max-width:1120px){header{gap:12px;padding:0 16px}.brand{min-width:195px}.project-name input{width:110px}.project-name span{display:none}.tool-panel{width:124px;padding:18px 12px}.inspector{width:250px}.workspace-bar{padding:0 12px}.workspace-bar>div{gap:5px}.coming{display:none}.state-strip{gap:18px}.viewport-hint{font-size:9px}.header-actions{gap:3px}}.layer-row{user-select:none;touch-action:none}.autosave-bar{height:29px;display:flex;gap:14px;align-items:center;padding:0 20px;background:var(--selected);font-size:10px;color:var(--text);flex-shrink:0}.autosave-bar small{margin-left:auto}.save-error{background:var(--danger-surface);color:var(--danger)}.autosave-bar button{padding:2px 8px;text-decoration:underline}.recent-row{display:block;text-align:left;width:100%;padding:15px;border-bottom:1px solid var(--line)}.recent-row small{display:block;margin-top:6px}.import-dialog{width:min(1200px,96vw);height:min(900px,94vh);display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 25px 80px #0009;overflow:hidden}.import-heading{display:flex;justify-content:space-between;align-items:center;padding:22px 28px;border-bottom:1px solid var(--line)}.import-heading h2{font:24px Georgia,PingFang TC,serif;margin:10px 0}.import-heading p{color:var(--muted);font-size:11px;margin:0}.import-body{display:grid;grid-template-columns:1fr 340px;flex:1;min-height:0}.preview-area{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:24px;align-content:start;overflow:auto;background:var(--base)}.preview-area figure{margin:0;min-width:0}.preview-area figcaption{display:flex;justify-content:space-between;font-size:10px;color:var(--text);margin-bottom:12px;gap:8px}.preview-area figcaption span{font:10px monospace;color:var(--muted)}.image-stage{height:360px;display:flex;align-items:center;justify-content:center;background:conic-gradient(#404943 25%,#343b36 0 50%,#404943 0 75%,#343b36 0) 50% / 16px 16px;border:1px solid var(--line);overflow:hidden}.image-stage canvas{image-rendering:pixelated;object-fit:contain;width:100%;height:100%;max-width:100%;max-height:100%;cursor:crosshair}.preview-note{grid-column:1 / -1;font-size:11px;color:var(--muted);line-height:1.9;padding:16px;border-left:2px solid var(--accent);background:var(--surface)}.processing-controls{overflow:auto;padding:18px 24px;border-left:1px solid var(--line)}.processing-controls fieldset{border:0;border-bottom:1px solid var(--line);margin:0 0 22px;padding:0 0 12px}.processing-controls legend{color:var(--accent);font-size:11px;margin-bottom:15px}.processing-controls label{display:block;font-size:10px;color:var(--text);margin-bottom:14px}.processing-controls input:not([type=checkbox]),.processing-controls select,.processing-controls textarea{display:block;width:100%;margin-top:7px}.processing-controls textarea{background:var(--base);border:1px solid var(--line);color:var(--text);padding:8px;min-height:64px;font:11px monospace;resize:vertical}.processing-controls input[type=color]{height:32px;background:transparent;border:0;padding:0}.fields-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}.processing-controls .check{display:flex;align-items:center;gap:6px}.import-footer{border-top:1px solid var(--line);padding:18px 24px;display:flex;align-items:center;gap:12px}.import-footer>span{flex:1;font-size:11px;color:var(--muted)}.source-edit{width:100%;border:1px solid var(--line);color:var(--accent);margin-bottom:20px}.header-actions button{padding-left:7px;padding-right:7px}.project-name{gap:4px}.project-name input{width:135px}.header-actions{gap:3px}@media(max-width:1200px){.project-name span{display:none}.import-body{grid-template-columns:1fr 300px}.preview-area{grid-template-columns:1fr}.preview-note{grid-column:1}.image-stage{height:240px}}.state-cards{display:flex;gap:10px;overflow:auto;min-width:0;flex:1;padding:2px}.state-strip{gap:12px;padding:12px 18px}.state-card{min-width:135px;border-color:var(--line);background:var(--raised);flex-shrink:0;padding:7px 10px}.state-card.is-active{border-color:var(--accent);background:var(--selected)}.state-image{image-rendering:pixelated;background:repeating-conic-gradient(#354538 0% 25%,#2b382f 0% 50%) 50%/12px 12px;object-fit:contain}.state-card .state-image{width:38px;height:50px}.state-card>span{font-size:10px;max-width:135px;text-overflow:ellipsis;overflow:hidden}.state-card small{font-size:9px}.state-caption{flex-shrink:0}.states-panel select,.panel-section select{display:block;width:100%;margin-top:8px}.preset-states{display:flex;gap:3px;flex-wrap:wrap;margin-bottom:16px}.preset-states button{font-size:10px;border:1px solid var(--line);padding:6px}.states-panel .check,.panel-section .check{display:flex;align-items:center;gap:6px}.states-panel .check input,.panel-section .check input{width:auto!important;margin:0!important}.states-panel hr{border:0;border-top:1px solid var(--line);margin:20px 0}.panel-error{font-size:11px;color:var(--danger);line-height:1.7}.comparison-dialog{width:min(1000px,95vw);max-height:92vh;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:10px}.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px;padding:25px}.compare-grid>div{display:flex;flex-direction:column;gap:15px}.compare-grid canvas{width:100%;height:400px;object-fit:contain}.geometry-dialog,.simulator-dialog{width:min(1240px,96vw);height:min(940px,94vh);background:var(--surface);border:1px solid var(--line);border-radius:10px;display:flex;flex-direction:column;overflow:hidden}.geometry-body,.simulator-body{display:grid;grid-template-columns:1fr 340px;min-height:0;flex:1}.geometry-stage,.simulation-stage{min-width:0;padding:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:auto;background:var(--base)}.geometry-stage canvas{max-width:100%;max-height:calc(100% - 155px);object-fit:contain;image-rendering:pixelated;touch-action:none;cursor:crosshair;width:auto;height:auto;min-height:120px}.geometry-tools{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px;flex-shrink:0}.geometry-tools button,.shape-list button{border:1px solid var(--line);font-size:11px}.geometry-tools .selected,.shape-list .selected{background:var(--accent);color:var(--on-accent)}.geometry-stage p{font-size:10px;margin:10px 0;flex-shrink:0}.legend-anchor{color:var(--accent-text)}.legend-collision{color:var(--danger)}.legend-trigger{color:var(--teal)}.geometry-controls{overflow:auto;padding:22px;border-left:1px solid var(--line)}.geometry-controls fieldset{border:0;border-bottom:1px solid var(--line);padding:0 0 20px;margin-bottom:24px}.geometry-controls legend{color:var(--accent);font-size:12px;margin-bottom:15px}.geometry-controls label{display:block;font-size:10px;margin-top:15px;color:var(--text)}.geometry-controls select,.geometry-controls input:not([type=checkbox]){display:block;width:100%;margin-top:8px}.geometry-controls .check{display:flex;align-items:center;gap:6px}.geometry-controls h4{font-size:11px;font-weight:400;margin-top:18px;color:var(--accent)}.shape-list{display:flex;flex-wrap:wrap;gap:5px;margin:15px 0}.geometry-controls>fieldset>button{margin-top:12px}.simulation-stage canvas{width:100%;height:auto;max-height:100%;object-fit:contain;image-rendering:pixelated;touch-action:none;outline:none}.simulation-stage canvas:focus-visible{outline:1px solid var(--accent)}.simulation-inspector{border-left:1px solid var(--line);padding:24px;overflow:auto}.simulation-inspector label{font-size:11px;display:block;margin:17px 0;color:var(--muted)}.simulation-inspector select{display:block;width:100%;margin-top:8px}.simulation-inspector .check{display:flex;gap:7px;align-items:center}.simulation-state{padding:18px;background:var(--selected);border-left:2px solid var(--accent);margin-bottom:24px}.simulation-state>span{font:10px monospace;color:var(--text)}.simulation-state strong{display:block;font:19px Georgia,PingFang TC,serif;color:var(--accent-text);margin-top:10px}.simulation-state small{display:block;margin-top:10px;line-height:1.7}.simulation-inspector dl{grid-template-columns:74px 1fr;font-size:10px;gap:16px 0}.simulation-inspector dd{color:var(--text)}.simulation-hints{display:flex;gap:16px;font-size:10px;color:var(--text);margin-top:16px;flex-shrink:0}.direction-pad{text-align:center;margin:20px 0}.direction-pad button{font-size:22px;border:1px solid var(--line);width:48px;margin:3px}.commands{gap:1px}.commands button,.tabs button{padding-left:7px;padding-right:7px}.inspector-footer{padding:20px}.geometry-stage{justify-content:flex-start}.geometry-stage canvas{flex:1;min-height:0}.simulation-stage{justify-content:flex-start}.simulation-stage canvas{flex:1;min-height:0}.export-panel{width:min(1120px,94vw);max-height:92vh;overflow:auto;padding:28px}.export-panel header,.export-panel footer{display:flex;justify-content:space-between;align-items:center;gap:24px}.export-panel header h2{font-size:28px;margin:12px 0}.export-panel p{color:var(--muted);line-height:1.65}.export-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}.export-card{display:flex;gap:20px;padding:20px;background:var(--surface);border:1px solid var(--line)}.export-card canvas{width:112px;height:144px;object-fit:contain;image-rendering:pixelated;background:repeating-conic-gradient(#354439 0% 25%,#2b382f 0% 50%) 0 / 16px 16px}.export-card h3{color:var(--accent-text);margin:0 0 8px}.export-card small{color:var(--muted);overflow-wrap:anywhere}.export-card ul{padding:0;list-style:none;font-size:12px;line-height:1.9}.export-card li[data-level=warning]{color:var(--warning)}.export-card li[data-level=error]{color:var(--danger)}.export-note{padding:18px 22px;border-left:3px solid var(--line);background:var(--selected);font-size:12px}.export-note a{color:var(--accent-text)}.export-panel footer{padding-top:20px;font-size:12px}.export-panel header{height:auto;min-height:100px;padding:0 20px}.export-panel footer{height:auto;min-height:52px}.theme-control{margin-left:auto;padding:0 16px;flex-shrink:0}.theme-control label{display:flex;align-items:center;gap:8px;color:var(--muted)}.theme-control select{padding:5px 8px}.theme-control [role=status]{position:absolute;right:16px;top:130px;z-index:60;padding:12px;background:var(--danger-surface);color:var(--danger);border:1px solid var(--line)}.app>header{height:auto;min-height:78px;flex-wrap:wrap;padding:14px 24px;gap:12px 24px}.header-actions{flex-wrap:wrap}.commandbar{min-height:48px;height:auto;flex-wrap:wrap;gap:6px 0;padding:6px 0}button:disabled{opacity:.5}@media(max-width:1200px){.header-actions{width:100%}.brand{min-width:190px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}.tool-panel>*,.inspector>*{flex-shrink:0}.layer-list{min-height:48px}.reset-view{position:absolute;top:12px;right:16px;z-index:5;background:var(--surface);border:1px solid var(--line);color:var(--text);font-size:11px}