:root{
  --ink:#12101f; --panel:#1a1730; --panel2:#221f3d; --well:#0e0c1a; --line:#332f58; --line2:#46417a;
  --text:#ece8ff; --mute:#9a93c7; --dim:#6b6596;
  --gold:#f5c451; --violet:#8b7bff; --ember:#ff7a45; --arc:#c77dff; --beam:#ffd66b;
  --cyan:#4fd6ff; --rose:#ff5fa2; --blood:#ff4d5e; --moss:#6fe0a0;
  --tlh:230px; --r:5px;
  font-family:"IBM Plex Sans Thai",system-ui,"Segoe UI",Tahoma,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--ink);color:var(--text);font-size:12px;overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
button{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);padding:3px 9px;cursor:pointer;white-space:nowrap}
button:hover{border-color:var(--line2);background:#2a2650}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--violet);outline-offset:1px}
button.primary{background:#3a2f86;border-color:var(--violet)}
button.gold{background:var(--gold);color:#23180a;border-color:var(--gold);font-weight:600}
button.gold:hover{background:#ffd476}
button.tog.on{border-color:var(--gold);color:var(--gold)}
button.mini{padding:1px 7px;font-size:11px}
button.danger{border-color:#6b2a3a;color:#ff9aa6}
input,select,textarea{background:var(--well);border:1px solid var(--line);border-radius:4px;padding:2px 5px;min-width:0}
input[type=number]{width:62px}
input[type=color]{padding:0;width:28px;height:22px;border:1px solid var(--line);background:none}
input[type=range]{accent-color:var(--gold);padding:0}
select{padding:2px 3px}

body{--lw:220px;--rw:300px;display:grid;grid-template-columns:var(--lw) 1fr var(--rw);grid-template-rows:38px 1fr var(--tlh);grid-template-areas:"top top top" "left stage right" "tl tl tl"}
#top{grid-area:top;display:flex;align-items:center;gap:10px;padding:0 10px;background:var(--panel);border-bottom:1px solid var(--line)}
.brand{font-weight:700;font-size:14px;display:flex;align-items:center;gap:7px;letter-spacing:.2px}
.sigil{width:18px;height:18px;border-radius:50%;border:2px solid var(--gold);box-shadow:0 0 10px #f5c45166, inset 0 0 6px #f5c45188;position:relative}
.sigil::after{content:"";position:absolute;inset:3px;border:1px solid var(--violet);transform:rotate(45deg)}
.projname{width:180px;background:transparent;border-color:transparent;font-weight:500}
.projname:hover,.projname:focus{border-color:var(--line)}
.actions{display:flex;gap:5px}
.status{margin-left:auto;color:var(--mute)}

#left,#right{background:var(--panel);display:flex;flex-direction:column;min-height:0}
#left{grid-area:left;border-right:1px solid var(--line)}
#right{grid-area:right;border-left:1px solid var(--line)}
.sec{padding:8px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:6px;min-height:0}
.sec.grow{flex:1}
.sechead{display:flex;align-items:center;justify-content:space-between;color:var(--mute);font-weight:500}
.list{list-style:none;margin:0;padding:0;overflow:auto;display:flex;flex-direction:column;gap:2px}
#skillList{max-height:200px}
.list li{padding:4px 6px;border-radius:4px;cursor:pointer;display:flex;align-items:center;gap:6px;border:1px solid transparent}
.list li:hover{background:var(--panel2)}
.list li.on{background:#2b2560;border-color:var(--violet)}
.list li .dot{width:8px;height:8px;border-radius:2px;flex:none}
.list li .sub{margin-left:auto;color:var(--dim);font-size:11px}
.list li.grp{cursor:default;color:var(--dim);font-size:11px;padding:6px 2px 2px;background:none;border:none}
.addrow{display:flex;flex-wrap:wrap;gap:4px}
.c-ember{border-color:#6b3a2a!important;color:#ffb08f}.c-arc{border-color:#553a78!important;color:#dcb3ff}
.c-beam{border-color:#6b5a2a!important;color:#ffe29a}.c-rose{border-color:#6b2a4d!important;color:#ff9fca}
.c-blood{border-color:#6b2a33!important;color:#ff9aa6}.c-gold{border-color:#6b5a2a!important;color:#ffd97a}
.c-cyan{border-color:#2a5a6b!important;color:#9fe8ff}

#stage{grid-area:stage;position:relative;min-width:0;min-height:0;background:radial-gradient(ellipse at 50% 30%,#1f1b3d,#0c0a16 75%)}
#view{position:absolute;inset:0}
#view canvas{display:block}
.vtools{position:absolute;top:8px;left:8px;display:flex;gap:4px;flex-wrap:wrap}
.vtools button{background:#1a1730d0;backdrop-filter:blur(4px)}
.vinfo{position:absolute;left:8px;bottom:8px;display:flex;gap:12px;align-items:center;color:var(--mute);background:#1a1730c8;padding:3px 8px;border-radius:var(--r)}
.vinfo .pitch{display:flex;align-items:center;gap:5px}
.vinfo .pitch input{width:90px}
.vhint{position:absolute;right:8px;bottom:8px;color:var(--dim);font-size:11px;max-width:48%;text-align:right;pointer-events:none}

.tabs{display:flex;border-bottom:1px solid var(--line)}
.tabs button{flex:1;border:none;border-radius:0;background:none;padding:7px 4px;color:var(--mute);border-bottom:2px solid transparent}
.tabs button.on{color:var(--text);border-bottom-color:var(--gold)}
.panel{overflow:auto;padding:8px;flex:1;display:flex;flex-direction:column;gap:6px}
.panel h4{margin:6px 0 0;font-size:12px;color:var(--gold);font-weight:600}
.panel .empty{color:var(--mute);line-height:1.6;padding:10px 4px}
.row{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:6px}
.row>label{color:var(--mute);font-size:11px}
.row .ctl{display:flex;gap:4px;align-items:center;min-width:0;flex-wrap:wrap}
.row .ctl input[type=text],.row .ctl select,.row .ctl textarea{flex:1;width:100%}
.row .ctl input[type=range]{flex:1;min-width:60px}
.help{color:var(--dim);font-size:11px;line-height:1.5}
.btnrow{display:flex;gap:4px;flex-wrap:wrap}
.grad{display:flex;flex-direction:column;gap:3px;width:100%}
.grad .bar{height:14px;border-radius:3px;border:1px solid var(--line)}
.grad .stop{display:flex;gap:3px;align-items:center}
.grad .stop input[type=number]{width:48px}

#tl{grid-area:tl;background:var(--panel);border-top:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.tlbar{display:flex;align-items:center;gap:6px;padding:4px 8px;border-bottom:1px solid var(--line);flex-wrap:nowrap;overflow:hidden}
.tlbar .play{background:var(--gold);color:#23180a;border-color:var(--gold);font-weight:600;min-width:52px}
.tlbar .tc{font-variant-numeric:tabular-nums;color:var(--mute)}
.tlbar .tc b{color:var(--gold);font-size:13px;display:inline-block;min-width:38px;text-align:right}
.tlbar .tc input{width:54px}
.tlbar .sep{width:1px;height:18px;background:var(--line)}
.tlbar .grow{flex:1}
.tlbar .hint{color:var(--dim);font-size:11px}
#tlc{flex:1;width:100%;min-height:0;display:block;cursor:default}
#tlResize{position:fixed;left:0;right:0;height:6px;cursor:ns-resize;z-index:5;bottom:calc(var(--tlh) - 3px)}

.modal{position:fixed;inset:0;background:#07061099;display:flex;align-items:center;justify-content:center;z-index:20}
.modal.hidden{display:none}
.mbox{background:var(--panel);border:1px solid var(--line2);border-radius:8px;width:min(1100px,94vw);max-height:90vh;display:flex;flex-direction:column;box-shadow:0 20px 60px #000a}
.mhead{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--line)}
.mhead b{font-size:13px}
.mbody{padding:12px;overflow:auto;display:flex;flex-direction:column;gap:8px}
.mbody.painter{padding:0;flex-direction:row;height:78vh}
.ptools{width:230px;padding:10px;display:flex;flex-direction:column;gap:6px;border-right:1px solid var(--line);overflow:auto}
.pwrap{flex:1;position:relative;overflow:hidden;background:repeating-conic-gradient(#1b1830 0 25%,#221f3d 0 50%) 0 0/16px 16px;cursor:crosshair}
.pwrap canvas{position:absolute;left:0;top:0;image-rendering:pixelated;transform-origin:0 0}
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.tools button.on{border-color:var(--gold);color:var(--gold)}
.swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:3px}
.swatches span{height:18px;border-radius:3px;cursor:pointer;border:1px solid #0006}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.card{border:1px solid var(--line);border-radius:6px;padding:10px;background:var(--panel2);display:flex;flex-direction:column;gap:6px}
.card h5{margin:0;font-size:13px}
.card p{margin:0;color:var(--mute);line-height:1.55}
.lesson{display:grid;grid-template-columns:220px 1fr;gap:12px;min-height:60vh}
.lesson ol{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.lesson ol li{cursor:pointer;padding:3px 4px;border-radius:4px;color:var(--mute)}
.lesson ol li.on{color:var(--text);background:#2b2560}
.lesson .body{line-height:1.75;max-width:70ch}
.lesson .body h3{margin:0 0 6px;color:var(--gold)}
.lesson .body code,.mbody code{background:var(--well);padding:1px 5px;border-radius:3px;color:#ffd97a}
.lesson .body li{margin:3px 0}
pre{background:var(--well);border:1px solid var(--line);border-radius:5px;padding:8px;overflow:auto;font-size:11px;line-height:1.5}
table.list2{border-collapse:collapse;width:100%}
table.list2 td,table.list2 th{border-bottom:1px solid var(--line);padding:4px 6px;text-align:left}

#toast{position:fixed;left:50%;top:48px;transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;z-index:30;pointer-events:none}
#toast div{background:#2b2560;border:1px solid var(--violet);padding:6px 12px;border-radius:6px;box-shadow:0 6px 20px #0008;max-width:70vw}
#toast div.err{background:#4a1f2c;border-color:var(--blood)}
#toast div.warn{background:#4a3a1f;border-color:var(--gold)}

.mobile-only{display:none}
#drawerShade{display:none}
.brand{white-space:nowrap}
body.hide-left{--lw:0px} body.hide-left #left{display:none}
body.hide-right{--rw:0px} body.hide-right #right{display:none}
body.hide-tl{--tlh:36px} body.hide-tl #tlc, body.hide-tl #tlResize{display:none}
#view canvas,#tlc{touch-action:none}

/* phones, small tablets, landscape phones */
@media (max-width:900px), (max-height:560px){
  body{grid-template-columns:1fr;grid-template-rows:auto 1fr var(--tlh);grid-template-areas:"top" "stage" "tl"}
  body:not(.hide-tl){--tlh:min(190px,42vh)}
  #top{position:relative;height:40px;gap:6px;padding:0 6px}
  .brand{font-size:13px}
  .projname{width:110px;flex:1;min-width:60px}
  .status{display:none}
  .mobile-only{display:inline-block}
  #menuBtn{margin-left:auto}
  .actions{display:none;position:absolute;top:100%;right:6px;flex-direction:column;align-items:stretch;background:var(--panel);border:1px solid var(--line2);padding:6px;border-radius:8px;z-index:25;box-shadow:0 12px 30px #000a}
  .actions button{padding:9px 12px;text-align:left}
  body.menu-open .actions{display:flex}
  #left,#right{position:fixed;top:40px;bottom:0;z-index:16;width:min(330px,88vw);box-shadow:0 0 40px #000c;transition:transform .2s ease}
  #left{left:0;transform:translateX(-105%)}
  #right{right:0;transform:translateX(105%)}
  body.hide-left #left,body.hide-right #right{display:flex}
  body.show-left #left,body.show-right #right{transform:none}
  body.show-left #drawerShade,body.show-right #drawerShade,body.menu-open #drawerShade{display:block;position:fixed;inset:40px 0 0 0;background:#0007;z-index:14}
  .vtools{right:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .vtools::-webkit-scrollbar{display:none}
  .vtools button{padding:6px 10px}
  .vhint{display:none}
  .vinfo{gap:8px;padding:3px 6px}
  .vinfo #distInfo{display:none}
  .tlbar{overflow-x:auto;scrollbar-width:none;gap:5px}
  .tlbar .hint{display:none}
  .tlbar button,.tlbar select{padding:5px 9px}
  .list li{padding:8px 6px}
  .row{grid-template-columns:84px 1fr}
  .mbox{width:100vw;height:100vh;max-height:100vh;border-radius:0}
  .mbody.painter{flex-direction:column;height:auto;flex:1}
  .ptools{width:100%;max-height:36vh;border-right:none;border-bottom:1px solid var(--line)}
  .pwrap{min-height:45vh}
  .lesson{grid-template-columns:1fr}
  .lesson ol{flex-direction:row;flex-wrap:wrap;padding-left:0;list-style:none}
  input[type=range]{min-height:24px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}