#panel{width:360px;min-width:360px;flex-shrink:0;height:100%;background:var(--sur);border-left:1px solid var(--brd);border-right:none;display:block;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--brd) transparent;order:2;box-sizing:border-box;padding-right:24px;transition:width 0.25s ease,min-width 0.25s ease,padding 0.25s ease,border-left-width 0.25s ease;}
/* Focus mode: collapse the side panel so the canvas reclaims ~280-360px.
   Toolbar (#tb) and status bar (#bar) stay. `overflow:hidden` hides the
   internal contents during the collapse animation so they don't bleed
   into the expanding stage. */
#panel.collapsed{width:0 !important;min-width:0 !important;padding:0 !important;border-left-width:0 !important;overflow:hidden;}
/* Chevron toggle button — anchored fixed at the left edge of #panel.
   When the panel is 360px wide, the button lives at right:360px (i.e.
   the panel's left edge, not overlapping the 44px toolbar which is to
   the left of the panel). When panel.collapsed, the button slides to
   right:0 so it's reachable on-screen. 32x44 for Apple HIG touch minimum. */
/* Anchored at the top-right of the panel (and stays at right:0 whether
   the panel is expanded or collapsed). Sits next to the HELP button
   vertically — top:32px aligns roughly with the SHOWCASE/HELP row. */
#panel-toggle{position:fixed;right:6px;top:32px;width:32px;height:32px;background:#0a0f14;border:2px solid #E8F50A;border-radius:4px;color:#E8F50A;font-family:inherit;font-size:16px;font-weight:700;cursor:pointer;z-index:9999;display:flex;align-items:center;justify-content:center;padding:0;letter-spacing:0;line-height:1;box-shadow:0 0 10px rgba(232,245,10,0.55),inset 0 0 3px rgba(232,245,10,0.15);transition:background 0.15s ease,color 0.15s ease;touch-action:manipulation;animation:panel-toggle-blink 1.2s ease-in-out infinite;}
#panel-toggle:hover{background:rgba(232,245,10,0.15);color:#ffffff;}
@keyframes panel-toggle-blink{
  0%,100% { box-shadow:0 0 12px rgba(232,245,10,0.6),inset 0 0 4px rgba(232,245,10,0.15); border-color:#E8F50A; }
  50%     { box-shadow:0 0 24px rgba(232,245,10,1.0),  inset 0 0 8px rgba(232,245,10,0.4);  border-color:#ffff66; }
}
.sec{padding:11px 13px;border-bottom:1px solid var(--brd);}
.stit{font-size:10px;letter-spacing:.24em;color:var(--dim);text-transform:uppercase;margin-bottom:7px;}
button.eng{display:block;width:100%;text-align:left;background:none;border:1px solid transparent;color:var(--dim);font-family:inherit;font-size:12px;padding:5px 7px;cursor:pointer;letter-spacing:.04em;margin-bottom:2px;transition:all .1s;}
button.eng:hover{color:var(--txt);border-color:var(--brd);}
button.eng.on{color:var(--hot);border-color:var(--acc);background:rgba(232,192,96,.07);}
.pm{margin-bottom:8px;}.pr{display:flex;justify-content:space-between;margin-bottom:3px;}
.pn{color:var(--dim);font-size:11px;}.pv{color:var(--txt);font-size:11px;}
input[type=range]{width:100%;-webkit-appearance:none;height:2px;background:var(--brd);outline:none;cursor:pointer;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:var(--acc);cursor:pointer;}
input[type=range]:hover::-webkit-slider-thumb{background:var(--hot);}
#panel input[type=range]{height:5px;border-radius:3px;margin:4px 0;}
#panel input[type=range]::-webkit-slider-thumb{width:16px;height:16px;box-shadow:0 1px 3px rgba(0,0,0,0.4);}
select{width:100%;background:#000;color:var(--txt);border:1px solid var(--brd);font-family:inherit;font-size:12px;padding:5px 7px;outline:none;cursor:pointer;-webkit-appearance:none;}
.srow{display:flex;gap:5px;margin-top:4px;}
.srow input{flex:1;background:#000;border:1px solid var(--brd);color:var(--dim);font-family:inherit;font-size:11px;padding:4px 7px;outline:none;}
.srow input:focus{border-color:var(--dim);color:var(--txt);}
.slk{background:none;border:1px solid var(--brd);color:var(--dim);font-family:inherit;font-size:10px;padding:4px 9px;cursor:pointer;white-space:nowrap;transition:all .1s;}
.slk:hover,.slk.on{color:var(--hot);border-color:var(--acc);}
#swrow{display:flex;gap:3px;margin-top:7px;height:13px;}.sw{flex:1;border-radius:1px;}
#prog{height:2px;background:var(--acc);width:0%;transition:width .2s;margin-top:9px;}
#gbtn{width:100%;padding:13px;background:var(--acc);color:#000;border:none;font-family:inherit;font-size:14px;font-weight:bold;letter-spacing:.22em;cursor:pointer;text-transform:uppercase;}
#gbtn:hover{background:var(--hot);}
.sbtn{width:100%;padding:8px;background:none;color:var(--dim);border:1px solid var(--brd);font-family:inherit;font-size:11px;letter-spacing:.14em;cursor:pointer;text-transform:uppercase;margin-top:5px;transition:all .1s;}
.sbtn:hover{color:var(--txt);border-color:var(--dim);}
.crow{display:flex;gap:8px;align-items:center;margin-bottom:7px;}
.csw{width:22px;height:22px;border:1px solid var(--brd);cursor:pointer;position:relative;overflow:hidden;flex-shrink:0;border-radius:2px;}
.csw input[type=color]{position:absolute;inset:-4px;width:calc(100%+8px);height:calc(100%+8px);opacity:0;cursor:pointer;}
.ctxt{font-size:10px;color:var(--dim);}.ctxt span{color:var(--txt);}
.br{display:flex;gap:4px;margin-top:6px;}
.bb{flex:1;padding:5px 2px;background:none;color:var(--dim);border:1px solid var(--brd);font-family:inherit;font-size:9px;cursor:pointer;text-transform:uppercase;text-align:center;transition:all .1s;}
.bb:hover{color:var(--txt);border-color:var(--dim);}
.hint{font-size:9px;color:var(--dim);margin-top:6px;line-height:1.7;}
.hint b{color:var(--acc);}
.sp{flex:1;}