/* VOLUX Classroom: only what the studio does not already have. The studio's own rules are in studio-ui.css (copied verbatim). */
:root{--left-panel-w:0px}
html,body{touch-action:none}
#shell{display:grid !important}
#viewport{background:var(--bg);overflow:hidden}
#gl{width:100%;height:100%;display:block;touch-action:none}
.hidden{display:none !important}
.menu-cap{font-family:'DM Mono',monospace;font-size:7px;letter-spacing:2px;color:var(--t4);text-transform:uppercase;padding:6px 14px 4px}
#file-name{max-width:200px}
.tb-file .tb-btn{height:22px}

/* viewport furniture */
#hint{position:absolute;left:12px;bottom:10px;color:var(--t4);font:8px 'DM Mono',monospace;letter-spacing:1px;text-transform:uppercase;pointer-events:none}
#fps{position:absolute;right:12px;bottom:10px;color:var(--t4);font:8px 'DM Mono',monospace;letter-spacing:1px;pointer-events:none}
#cam-controls{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:6px;z-index:7}
.cam-btn{font:8px 'DM Mono',monospace;letter-spacing:1.5px;text-transform:uppercase;padding:6px 12px;border-radius:14px;cursor:pointer;background:rgba(12,11,9,.82);border:1px solid rgba(240,236,228,.18);color:rgba(240,236,228,.6);backdrop-filter:blur(6px)}
.cam-btn:hover{color:rgba(240,236,228,.95);border-color:rgba(240,236,228,.35)}

/* lamp orbs: the studio's make. Drawn only for a lamp that is ON, always lit in its own colour; the selected one has the dashed grab ring. */
#orbs{position:absolute;inset:0;pointer-events:none;z-index:6}
.orb{position:absolute;width:46px;height:46px;margin:-23px 0 0 -23px;display:none;pointer-events:auto;cursor:grab;touch-action:none;--c:#ffd080}
.orb.on{display:block}
.orb-glow{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,var(--c) 0%,transparent 68%);opacity:.5}
.orb-core{position:absolute;left:50%;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:#fff;box-shadow:0 0 9px 3px var(--c)}
.orb-ring{position:absolute;inset:5px;border:1.5px dashed rgba(240,236,228,.6);border-radius:50%;opacity:0;transition:opacity .15s}
.orb.active .orb-ring{opacity:1}
.orb-n{position:absolute;left:62%;top:2px;font:500 8px 'DM Mono',monospace;letter-spacing:1px;color:rgba(240,236,228,.75);text-shadow:0 0 4px #000}
.orb.edge{width:36px;height:36px;margin:-18px 0 0 -18px}
.orb.edge .orb-glow{opacity:.7}
.orb.held{cursor:grabbing}

/* the light pad (studio's #lp box, a flat azimuth/elevation map) */
#lp{aspect-ratio:8/5;cursor:crosshair;margin-bottom:10px}
#lp canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block}
.lc-sw{position:relative}
#compass{margin:2px 0 12px;background:#0a0908;border:1px solid var(--line);border-radius:2px;padding:6px 4px}
#compass svg{display:block;width:100%;height:auto}
#compass .cmp-num{display:flex;justify-content:space-between;font:8px 'DM Mono',monospace;letter-spacing:1px;color:var(--t3);padding:4px 6px 0;text-transform:uppercase}
#compass .cmp-num b{color:var(--teal);font-weight:500}

/* lesson panel */
#lesson .nlab{font:500 7.5px 'DM Mono',monospace;letter-spacing:2px;text-transform:uppercase;color:var(--lux);margin-bottom:4px}
#lesson h2{font:italic 300 19px/1.2 'Cormorant Garamond',serif;margin:0 0 3px;color:var(--t1)}
#lesson .sub{font:11px/1.45 'DM Sans',sans-serif;color:var(--t3);margin-bottom:8px}
#lesson p,#lesson li{font:12.5px/1.55 'DM Sans',sans-serif;color:rgba(240,236,228,.78)}
#lesson p{margin:6px 0} #lesson ul{margin:6px 0;padding-left:16px} #lesson li{margin:4px 0}
#lesson h3{font:500 8px 'DM Mono',monospace;letter-spacing:2px;text-transform:uppercase;color:var(--teal);margin:14px 0 6px}
#lesson details summary{cursor:pointer;font:8px 'DM Mono',monospace;letter-spacing:1.5px;text-transform:uppercase;color:var(--t3)}
#lesson .les-back{display:flex;gap:6px;margin-bottom:10px}
#lesson .les-back button{flex:1}
#lesson .pgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:6px 0}
#lesson .pcard{background:var(--raised);border:1px solid var(--line);border-radius:4px;overflow:hidden;cursor:pointer;padding:0;text-align:left;color:var(--t2)}
#lesson .pcard:hover{border-color:rgba(42,196,162,.5)} #lesson .pcard.active{border-color:var(--teal);box-shadow:0 0 0 1px rgba(42,196,162,.3)}
#lesson .pcard img{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:#0a0908}
#lesson .pcard span{display:block;font:8px 'DM Mono',monospace;letter-spacing:.8px;text-transform:uppercase;padding:5px 6px 6px}
#lesson .nav{display:flex;justify-content:space-between;gap:8px;margin-top:12px} #lesson .nav button{background:none;border:0;color:var(--teal);font:8px 'DM Mono',monospace;letter-spacing:1.2px;text-transform:uppercase;cursor:pointer;padding:0;text-align:left}
#lesson .lnk{margin-top:12px;font:8px 'DM Mono',monospace;letter-spacing:1px;text-transform:uppercase} #lesson .lnk a{color:var(--teal);text-decoration:none}

/* overlay (Lessons / Shapes) in the Gallery's make */
#ov-cats{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
#gal-grid.lessons{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
#gal-grid.lessons .gal-thumb{aspect-ratio:8/5;background-size:cover}
#gal-grid.shapes .gal-thumb{aspect-ratio:1;background-size:cover}
.gal-card.on{border-color:var(--teal)}
.gal-sub{font:9px/1.4 'DM Sans',sans-serif;color:var(--t3);margin-top:4px;white-space:normal}
.gal-name{white-space:normal}
#drop{position:fixed;inset:44px 252px 0 48px;z-index:6;background:rgba(42,196,162,.1);border:2px dashed var(--teal);display:none;align-items:center;justify-content:center;font:11px 'DM Mono',monospace;letter-spacing:2px;text-transform:uppercase;color:#fff;pointer-events:none}
#drop.on{display:flex}
#bb-ldots .bb-ldot{opacity:.35} #bb-ldots .bb-ldot.on{opacity:1;box-shadow:0 0 6px currentColor}
.lt-tab .lt-dot{background:var(--lux)}
.vx-toast{z-index:600}
@media (max-width:900px){:root{--panel-w:220px}}

/* lesson guide: numbered steps, previous / next pinned at the top */
#lesson .les-top{position:sticky;top:-10px;z-index:6;display:flex;align-items:center;gap:8px;margin:-10px -12px 12px;padding:10px 12px;background:var(--panel);border-bottom:1px solid var(--line)}
#lesson .les-top button{flex:1;min-height:36px;background:var(--raised);border:1px solid var(--line);border-radius:4px;color:var(--t2);font:8.5px 'DM Mono',monospace;letter-spacing:1.4px;text-transform:uppercase;cursor:pointer}
#lesson .les-top button:disabled{opacity:.3;cursor:default} #lesson .les-top button:not(:disabled):hover{border-color:rgba(42,196,162,.5);color:var(--teal)}
#lesson .les-top .cnt{font:9px 'DM Mono',monospace;letter-spacing:1px;color:var(--t3);white-space:nowrap}
#lesson .les-head{margin-bottom:6px} #lesson h2{font-size:22px}
#lesson .step{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
#lesson .step .k{display:flex;align-items:center;gap:9px;font:500 8.5px 'DM Mono',monospace;letter-spacing:2px;text-transform:uppercase;color:var(--teal);margin-bottom:10px}
#lesson .step .k i{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;border:1px solid rgba(42,196,162,.5);font-style:normal;font-size:9px;letter-spacing:0}
#lesson p,#lesson li{font-size:13.5px;line-height:1.7} #lesson li{margin:7px 0} #lesson ul{padding-left:18px}
#lesson .hint{font-size:12px;color:var(--t3);margin-top:10px}
#lesson .pgrid{gap:8px}
#lesson details.more{margin-top:6px} #lesson details.more summary{padding:6px 0;color:var(--teal)}
#lesson .les-actions{display:flex;gap:8px;margin-top:10px} #lesson .les-actions button{flex:1;min-height:38px;background:var(--raised);border:1px solid var(--line);border-radius:4px;color:var(--t1);font:9px 'DM Mono',monospace;letter-spacing:1.2px;text-transform:uppercase;cursor:pointer} #lesson .les-actions button:hover{border-color:rgba(42,196,162,.5);color:var(--teal)}
#lesson .les-end{margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
#lesson .les-next{display:block;width:100%;min-height:54px;text-align:left;padding:10px 14px;background:var(--teal);border:0;border-radius:6px;color:#06130f;font:500 13px 'DM Sans',sans-serif;cursor:pointer} #lesson .les-next small{display:block;font:8px 'DM Mono',monospace;letter-spacing:1.6px;text-transform:uppercase;opacity:.65;margin-bottom:3px}
#lesson .les-done{font-size:13px;color:var(--t2)} #lesson .lnk{margin-top:16px;line-height:2} #lesson .linkbtn{background:none;border:0;padding:0;color:var(--teal);font:8px 'DM Mono',monospace;letter-spacing:1px;text-transform:uppercase;cursor:pointer}

/* lesson buttons live in the bottom bar, only while a lesson is open */
body:not(.lesson-mode) .les-only{display:none!important}
#bottombar .bnb-next{border:1px solid rgba(42,196,162,.55);border-radius:14px;padding:0 14px;color:var(--teal);margin:0 2px}
#bottombar .bnb-next svg{stroke:var(--teal)}
#bottombar .les-only:disabled{opacity:.3;pointer-events:none}
#lesson .les-top,#lesson .les-end .lnk{display:none}
@media (max-width:960px){
  #bottombar .bnb-left{display:none}
  #bottombar .bnb-centre{gap:2px;padding:0 8px}
  #bottombar .bnb-tool{min-width:36px;padding:0 5px}
  #bottombar .bnb-next{padding:0 10px}
  #bottombar .bnb-view-btn{padding:0 9px}
  .tb-plan-center{display:none}
}
@media (max-width:760px){ #bottombar .bnb-divider{display:none} #status-text,#file-name{display:none} }

#lesson .les-actions button.on{background:var(--teal);border-color:var(--teal);color:#06130f}