:root{color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;background:#232323;color:#e8e8e8;font-family:system-ui,-apple-system,sans-serif}#root{height:100%}.app{display:grid;grid-template-columns:1fr 320px;height:100%}.aside-toggle,.aside-backdrop{display:none}@media (max-width: 720px){.aside-backdrop{display:block;position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;z-index:15}}@media (max-width: 720px){.app{grid-template-columns:1fr}.aside{position:fixed;inset:0 0 0 auto;width:min(320px,100vw);transform:translate(100%);transition:transform .2s ease;z-index:20;box-shadow:-8px 0 24px #0006}.app.aside-open .aside{transform:translate(0)}.aside-toggle{display:flex;right:16px!important;transition:transform .2s ease}.app.aside-open .aside-toggle{transform:translate(calc(-1*min(320px,100vw)))}.dev-toggle:not(.aside-toggle){right:auto!important}.app.aside-open .dev-toggle:not(.aside-toggle),.app.aside-open .github-btn{display:none}.github-btn{left:16px!important}.center-btn{left:64px!important}.dev-toggle:not(.aside-toggle):not(.github-btn):not(.center-btn){left:112px!important}}.main{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:0}.main-split .tree-pane{flex:1 1 55%}.main-split .dev{flex:1 1 45%;border-top:1px solid #333}.tree-pane{position:relative;flex:1 1 auto;min-height:0;padding:16px}.canvas{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.canvas:active{cursor:grabbing}.tree-svg{display:block;transform-origin:0 0;will-change:transform}.error{background:#3b1a1a;border:1px solid #7a2b2b;color:#f5b5b5;border-radius:8px;padding:12px 14px;font-size:14px;display:flex;flex-direction:column;gap:4px}.error strong{color:#f87171;font-size:13px;text-transform:uppercase;letter-spacing:.05em}.init-list{font-size:12px;color:#9a9a9a;word-break:break-word;line-height:1.5}.init-list span{color:#b8b8b8;font-weight:600}.checkbox{flex-direction:row!important;align-items:center;gap:8px!important;color:#e8e8e8!important}.checkbox input{width:16px;height:16px;margin:0;accent-color:#2563eb}.dev{display:flex;flex-direction:column;gap:16px;padding:16px;overflow:auto;min-height:0;background:#1b1b1b}.dev section{display:flex;flex-direction:column;gap:6px}.dev h3{margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#9a9a9a}.dev pre{margin:0;background:#141414;border:1px solid #2a2a2a;border-radius:6px;padding:12px;font-size:12px;color:#d4d4d4;overflow:auto}.center-btn{right:384px!important}.github-btn{right:432px!important;text-decoration:none}.dev-toggle{padding:0;overflow:hidden}.dev-toggle img{width:100%;height:100%;display:block;padding:8px;box-sizing:border-box;filter:brightness(0) invert(1);opacity:.75}.dev-toggle:hover img,.dev-toggle.active img{opacity:1}.dev-toggle{position:fixed;bottom:16px;right:336px;width:40px;height:40px;border-radius:50%;border:1px solid #3a3a3a;background:#2c2c2c;color:#9a9a9a;font-family:ui-monospace,monospace;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0006}.dev-toggle:hover{background:#363636;color:#e8e8e8}.dev-toggle.active{background:#2563eb;color:#fff;border-color:#2563eb}.hint{margin:0;font-size:12px;color:#8a8a8a;line-height:1.5}select{background:#2c2c2c;color:#e8e8e8;border:1px solid #3a3a3a;border-radius:6px;padding:8px 10px;font:inherit;font-size:14px}.empty{display:flex;align-items:center;justify-content:center;height:100%;color:#666;font-size:14px}.aside{background:#1b1b1b;border-left:1px solid #333;padding:16px;display:flex;flex-direction:column;gap:24px;overflow:auto}.section{display:flex;flex-direction:column;gap:12px}.section h2{margin:0;font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:#9a9a9a;display:flex;align-items:center;gap:10px}.asterisk{color:#f87171;font-weight:700}.unapplied{font-size:11px;color:#f87171;text-transform:uppercase;letter-spacing:.08em;font-weight:600}.section label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:#b8b8b8}input,textarea{background:#2c2c2c;color:#e8e8e8;border:1px solid #3a3a3a;border-radius:6px;padding:8px 10px;font:inherit;font-size:14px;resize:vertical}input:focus,textarea:focus{outline:none;border-color:#2563eb}.btn{background:#2563eb;color:#fff;border:0;border-radius:8px;padding:14px 16px;font-size:16px;font-weight:600;cursor:pointer}.btn:hover{background:#1d4ed8}.btn:active{background:#1e40af}.btn-secondary{background:#2c2c2c;border:1px solid #3a3a3a}.btn-secondary:hover{background:#363636}.btn-secondary:active{background:#404040}.btn:disabled{background:#2a2a2a;color:#666;cursor:not-allowed}
