:root{
  --bg:#000;--p:#0a0a0a;--p2:#141414;--bd:#242424;--mid:#333;
  --tx:#ededed;--mu:#8a8a8a;--ac:#fff;--sel:#1c1c1c;--cl:rgba(255,255,255,.045);--selbg:rgba(255,255,255,.2);
  --k:#fff;--b:#d4d4d4;--f:#fff;--fu:#555;--s:#929292;--n:#bdbdbd;--c:#5c5c5c;--pp:#aaa;
  --fs:14px;--lh:21px;
  --mono:"JetBrains Mono","Cascadia Code",Consolas,"DejaVu Sans Mono",monospace;
  color-scheme:dark
}
:root[data-theme=light]{
  --bg:#fff;--p:#fafafa;--p2:#f0f0f0;--bd:#e3e3e3;--mid:#d0d0d0;
  --tx:#111;--mu:#707070;--ac:#000;--sel:#ececec;--cl:rgba(0,0,0,.04);--selbg:rgba(0,0,0,.16);
  --k:#000;--b:#333;--f:#000;--fu:#bbb;--s:#707070;--n:#444;--c:#a8a8a8;--pp:#555;
  color-scheme:light
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--tx);font:13px/1.4 Inter,system-ui,"Segoe UI",sans-serif;overflow:hidden;-webkit-font-smoothing:antialiased}
button{background:transparent;color:var(--tx);border:1px solid var(--bd);border-radius:6px;padding:5px 11px;cursor:pointer;font:inherit;transition:background .15s,border-color .15s,color .15s}
button:hover{border-color:var(--tx);background:var(--p2)}
button:active{background:var(--tx);color:var(--bg)}
button.ib{padding:5px 9px;min-width:30px}
.sp{flex:1}
.vr{width:1px;height:18px;background:var(--bd);margin:0 4px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--mid);border-radius:6px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--mu);background-clip:content-box;border:2px solid transparent}
::-webkit-scrollbar-corner{background:transparent}

#app{display:grid;height:100%;grid-template-columns:248px 1fr;grid-template-rows:46px 1fr 150px 26px;grid-template-areas:"h h" "a m" "a p" "f f"}
header{grid-area:h;display:flex;gap:6px;align-items:center;padding:0 12px;background:var(--p);border-bottom:1px solid var(--bd)}
.logo{display:flex;align-items:center;gap:9px;margin-right:14px;font-weight:700;letter-spacing:.2px;font-size:14px;color:var(--ac)}
.logo i{width:14px;height:14px;background:var(--ac);clip-path:polygon(0 0,100% 0,100% 100%,60% 100%,60% 40%,0 40%)}
aside{grid-area:a;background:var(--p);border-right:1px solid var(--bd);overflow:auto}
main{grid-area:m;display:flex;flex-direction:column;min-width:0;min-height:0}
#probw{grid-area:p;background:var(--p);border-top:1px solid var(--bd);display:flex;flex-direction:column;min-width:0;min-height:0}
footer{grid-area:f;display:flex;align-items:center;gap:12px;padding:0 12px;background:var(--p);border-top:1px solid var(--bd);color:var(--mu);font-size:12px}
footer label{display:flex;align-items:center;gap:6px;cursor:pointer}
footer input{accent-color:var(--ac)}

.ph{padding:9px 14px;color:var(--mu);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;border-bottom:1px solid var(--bd)}
#pcount{margin-left:6px;padding:1px 7px;border-radius:9px;background:var(--tx);color:var(--bg);font-size:11px;letter-spacing:0}

.grp{display:flex;justify-content:space-between;align-items:center;padding:6px 14px;margin-top:6px;color:var(--mu);font-size:11px;font-weight:600;letter-spacing:.4px}
.grp b{width:20px;height:20px;text-align:center;line-height:19px;border-radius:5px;cursor:pointer;font-weight:400;font-size:15px}
.grp b:hover{background:var(--tx);color:var(--bg)}
.fi{display:flex;align-items:center;gap:8px;padding:5px 14px 5px 24px;cursor:pointer;border-left:2px solid transparent}
.fi:hover{background:var(--p2)}
.fi.on{background:var(--sel);border-left-color:var(--ac)}
.fi span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fi em{display:none;font-style:normal;gap:7px}
.fi:hover em{display:flex}
.fi em a{color:var(--mu);cursor:pointer}
.fi em a:hover{color:var(--tx)}
.ty{display:inline-block;width:16px;height:16px;border-radius:4px;text-align:center;font:700 10px/16px Inter,system-ui,sans-serif;font-style:normal;flex:none}
.ty.Script{background:var(--tx);color:var(--bg)}
.ty.LocalScript{background:transparent;color:var(--tx);box-shadow:inset 0 0 0 1.5px var(--tx);line-height:16px}
.ty.ModuleScript{background:var(--mid);color:var(--tx)}

#tabs{display:flex;overflow-x:auto;background:var(--p);border-bottom:1px solid var(--bd);min-height:36px}
.tab{display:flex;align-items:center;gap:8px;padding:0 12px;border-right:1px solid var(--bd);cursor:pointer;white-space:nowrap;color:var(--mu)}
.tab:hover{color:var(--tx)}
.tab.on{background:var(--bg);color:var(--tx);box-shadow:inset 0 -2px var(--ac)}
.tab a{padding:0 4px;border-radius:4px;font-size:15px;line-height:17px}
.tab a:hover{background:var(--tx);color:var(--bg)}

.ed{flex:1;display:flex;min-height:0}
#gutw{width:56px;overflow:hidden;background:var(--bg);border-right:1px solid var(--bd);flex:none}
#gut{margin:0;padding:10px 12px 0 0;text-align:right;color:var(--mid);font:var(--fs)/var(--lh) var(--mono);will-change:transform}
#code{position:relative;flex:1;overflow:hidden;min-width:0}
#cl{position:absolute;left:0;right:0;top:0;height:var(--lh);background:var(--cl);pointer-events:none;will-change:transform}
#hl,#ta,#meas{margin:0;border:0;font:var(--fs)/var(--lh) var(--mono);letter-spacing:0;tab-size:4;white-space:pre;font-variant-ligatures:none}
#hl,#ta{position:absolute;padding:10px 12px}
#hl{left:0;top:0;pointer-events:none;color:var(--tx);will-change:transform}
#ta{inset:0;width:100%;height:100%;resize:none;outline:0;overflow:auto;background:transparent;color:transparent;-webkit-text-fill-color:transparent;caret-color:var(--ac)}
#ta::selection{background:var(--selbg)}
#meas{position:absolute;visibility:hidden;left:-9999px;top:0}
#hl .k{color:var(--k);font-weight:700}
#hl .s{color:var(--s)}
#hl .n{color:var(--n)}
#hl .c{color:var(--c);font-style:italic}
#hl .b{color:var(--b)}
#hl .f{color:var(--f);text-decoration:underline;text-decoration-color:var(--fu);text-underline-offset:3px}
#hl .p{color:var(--pp)}

#ac{display:none;position:absolute;z-index:5;min-width:240px;max-height:210px;overflow:auto;background:var(--p);border:1px solid var(--mid);border-radius:8px;box-shadow:0 12px 32px rgba(0,0,0,.5);font:13px var(--mono);padding:4px}
.ai{display:flex;align-items:center;gap:9px;padding:4px 10px;cursor:pointer;border-radius:5px}
.ai.sel,.ai:hover{background:var(--tx);color:var(--bg)}
.ai i{width:14px;text-align:center;font-style:normal;color:var(--mu)}
.ai.sel i,.ai:hover i,.ai.sel small,.ai:hover small{color:inherit;opacity:.7}
.ai small{margin-left:auto;padding-left:16px;color:var(--mu);font:11px Inter,system-ui,sans-serif}

#prob{overflow:auto;flex:1}
.pr{padding:5px 14px;cursor:pointer;display:flex;gap:9px}
.pr:hover{background:var(--p2)}
.pr b{width:14px;flex:none}
.pr.e b{color:var(--tx)}.pr.e{color:var(--tx)}
.pr.w,.pr.i{color:var(--mu)}
.pr.w b{color:var(--tx)}
.ok{padding:10px 14px;color:var(--mu)}

#toast{position:fixed;right:16px;bottom:40px;background:var(--tx);color:var(--bg);padding:8px 14px;border-radius:8px;font-weight:500;opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;pointer-events:none}
#toast.on{opacity:1;transform:none}

dialog{background:var(--p);color:var(--tx);border:1px solid var(--mid);border-radius:12px;padding:20px 24px;max-width:520px;box-shadow:0 24px 64px rgba(0,0,0,.6)}
dialog::backdrop{background:rgba(0,0,0,.6);backdrop-filter:blur(2px)}
dialog h3{margin:0 0 12px;font-size:15px}
dialog table{border-collapse:collapse;width:100%}
dialog td{padding:5px 0;border-bottom:1px solid var(--bd)}
dialog td:first-child{white-space:nowrap;padding-right:18px}
dialog p{color:var(--mu);margin:14px 0}
dialog form{text-align:right}
kbd{font:11px var(--mono);padding:2px 6px;border:1px solid var(--mid);border-bottom-width:2px;border-radius:5px;background:var(--bg)}
code{font:12px var(--mono);padding:1px 5px;border-radius:4px;background:var(--p2)}

@media (max-width:900px){header button:not([data-new]):not(.ib){display:none}}
@media (max-width:760px){#app{grid-template-columns:160px 1fr}.logo{display:none}}
@media (prefers-reduced-motion:reduce){#toast,button{transition:none}}

/* ---------- effects ---------- */
#hl .x{color:var(--b);font-style:italic;text-decoration:underline dotted;text-decoration-color:var(--mu);text-underline-offset:3px}
button{position:relative;overflow:hidden}
.rip{position:absolute;border-radius:50%;background:currentColor;opacity:.25;transform:scale(0);animation:rip .6s ease-out forwards;pointer-events:none}
@keyframes rip{to{transform:scale(1);opacity:0}}
@keyframes up{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.96) translateY(-4px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes glow{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes slide{from{transform:scaleX(0)}to{transform:scaleX(1)}}
:root[data-fx=on] button:hover{transform:translateY(-1px)}
:root[data-fx=on] .logo i{animation:glow 3s ease-in-out infinite}
:root[data-fx=on] .fi,:root[data-fx=on] .pr{animation:up .25s ease both}
:root[data-fx=on] .tab.on{animation:fade .25s ease}
:root[data-fx=on] .tab.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ac);transform-origin:left;animation:slide .3s ease}
:root[data-fx=on] .tab{position:relative}
:root[data-fx=on] #code.swap #hl,:root[data-fx=on] #code.swap #gut{animation:up .22s ease}
:root[data-fx=on] #ac{animation:pop .12s ease-out}
:root[data-fx=on] dialog[open]{animation:pop .18s ease-out}
:root[data-fx=on] #cl{transition:transform .08s ease-out}
:root[data-fx=on] #ta{caret-color:var(--ac);animation:none}
:root[data-fx=on] #pcount{transition:transform .2s}
:root[data-fx=on] .fi,:root[data-fx=on] .tab,:root[data-fx=on] .pr{transition:background .15s,color .15s}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}