:root{--bg:#0e1014;--panel:#161a21;--panel-2:#1d222b;--border:#2a303b;--text:#e6e9ef;--muted:#8a93a3;--accent:#4f9dff;--warn:#ffb547;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font:13px/1.4 system-ui,sans-serif}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0}button,input,select{font:inherit;color:inherit}button{background:var(--panel-2);border:1px solid var(--border);cursor:pointer;border-radius:6px;padding:5px 10px}button:hover:not(:disabled){border-color:var(--accent)}button:disabled{opacity:.35;cursor:default}button.active,button.primary{background:var(--accent);border-color:var(--accent);color:#fff}input:not([type=checkbox]):not([type=range]):not([type=color]),select{background:var(--bg);border:1px solid var(--border);border-radius:4px;width:100%;padding:4px 6px}input[type=color]{border:1px solid var(--border);background:0 0;width:40px;height:26px;padding:0}.app{grid-template:"top top top""left stage right"1fr/260px 1fr 300px;height:100vh;display:grid}.toolbar{background:var(--panel);border-bottom:1px solid var(--border);grid-area:top;align-items:center;gap:8px;padding:8px 12px;display:flex}.toolbar .devices{gap:4px;display:flex}.toolbar .face-name{max-width:220px}.toolbar .toggle{color:var(--muted);align-items:center;gap:4px;display:flex}.spacer{flex:1}.panel{background:var(--panel);padding:0 12px 16px;overflow-y:auto}.panel.left{border-right:1px solid var(--border);grid-area:left}.panel.right{border-left:1px solid var(--border);grid-area:right}.panel h2{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:16px 0 8px;font-size:11px}.stage{grid-area:stage;min-width:0;min-height:0}.canvas-wrap{background:radial-gradient(circle at center, #1a1e26 0%, var(--bg) 70%);place-items:center;height:100%;display:grid;position:relative}.canvas-meta{color:var(--muted);font-size:11px;position:absolute;bottom:8px;left:12px}.layers{margin:0;padding:0;list-style:none}.layers li{cursor:pointer;border-radius:6px;align-items:center;gap:6px;padding:5px 6px;display:flex}.layers li:hover{background:var(--panel-2)}.layers li.selected{background:#1f3350}.layers .name{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.layers .dim{color:var(--muted);text-decoration:line-through}.layers .actions{gap:2px;display:flex}.layers .actions button{background:0 0;border:none;padding:0 4px;font-size:12px}.tag{background:var(--panel-2);color:var(--muted);text-align:center;border-radius:3px;width:40px;padding:1px 4px;font-size:9px}.tag-text{color:#9fd3ff}.tag-arc{color:#ffb36b}.tag-img{color:#a6e3a1}.tag-hands{color:#e5a8ff}.group{border:1px solid var(--border);border-radius:6px;margin:0 0 10px;padding:4px 8px 0}.group legend{padding:0 4px}.field{flex-direction:column;gap:3px;margin-bottom:8px;display:flex}.field>span{color:var(--muted);font-size:11px}.grid2{grid-template-columns:1fr 1fr;gap:0 8px;display:grid}.row{align-items:center;gap:8px;display:flex}.kind{color:var(--muted);margin-bottom:8px;font-size:11px}.hint{color:var(--muted);font-size:12px}.warn{color:var(--warn);font-size:12px}.presets{gap:4px;margin:-4px 0 10px;display:flex}.presets button{padding:2px 8px;font-size:11px}.modal{z-index:10;background:#0009;place-items:center;display:grid;position:fixed;inset:0}.modal-body{background:var(--panel);border:1px solid var(--border);border-radius:10px;flex-direction:column;width:min(900px,92vw);height:min(700px,86vh);display:flex}.modal-head{border-bottom:1px solid var(--border);gap:6px;padding:10px;display:flex}.modal pre{flex:1;margin:0;padding:12px;font:12px/1.5 ui-monospace,monospace;overflow:auto}.tag-ticks{color:#ffe08a}.tag-numbers{color:#ffd0a8}.tag-background{color:#9aa4b5}.modal-body.library{height:auto;max-height:86vh}.library-hint{margin:10px 12px 0}.library-grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;padding:12px;display:grid;overflow-y:auto}.library-item{flex-direction:column;align-items:center;gap:6px;padding:8px;display:flex}.library-item img{border-radius:50%}.library-item span{color:var(--muted);font-size:11px}.font-actions{flex-wrap:wrap;margin:-4px 0 8px}.font-actions button{padding:2px 8px;font-size:11px}a.button{background:var(--panel-2);border:1px solid var(--border);color:inherit;border-radius:6px;padding:5px 10px;text-decoration:none}a.button:hover{border-color:var(--accent)}.inspector .row>.field{flex:1}.inspector .row>button{margin-top:8px}
