/* Material study: a dark viewing room and quiet editorial controls */
:root { --y:#f3f2ed; --k:#141414; --r:#707069; --line:rgba(20,20,20,.18); --acid:#e7ff00; }
html,body { background:var(--y); }
.hdr { min-height:54px; border-bottom:1px solid var(--line); }
.brand { border-right:0; padding:0 20px; font-size:16px; font-weight:600; letter-spacing:-.07em; }
.brand:hover { background:radial-gradient(ellipse at center,var(--acid),transparent 76%); }
.hdr-mid { border-right:0; padding:0 20px; }
.hdr-title { font-size:11px; font-weight:400; letter-spacing:0; color:var(--r); }
.hdr-btn { border-left:0; padding:0 12px; font-size:10px; font-weight:400; letter-spacing:0; }
.hdr-btn:hover { background:radial-gradient(ellipse at center,var(--acid),transparent 78%); color:var(--k); }
.main { grid-template-columns:minmax(0,1fr) 342px; }
.stage { background:#242521; padding:35px; }
.stage::before { content:"03 / ENSAYO DE MATERIAL"; position:absolute; top:17px; left:20px; color:#d7d7cc; font-size:10px; letter-spacing:.07em; }
canvas#view { border:0; box-shadow:0 8px 30px rgba(0,0,0,.2); }
.drop-hint { color:#dadad0; }
.transp-tag { border:0; background:rgba(243,242,237,.92); }
.side { border-left:1px solid var(--line); background:var(--y); }
.sec { border-bottom:1px solid var(--line); padding:16px 19px; }
.sec-t { margin-bottom:12px; font-size:10px; font-weight:400; letter-spacing:.06em; color:var(--r); }
.etabs { border:0; display:flex; flex-wrap:wrap; gap:5px 12px; }
.etab,.etab:nth-child(2n),.etab:nth-child(7) { width:auto; flex:0 0 auto; grid-column:auto; border:0; padding:6px 0; background:transparent; }
.etab .t { font-size:11px; font-weight:400; letter-spacing:0; }
.etab .d { display:none; }
.etab.on { background:radial-gradient(ellipse at center,var(--acid),transparent 80%); }
.etab.on .t { color:var(--k); text-decoration:underline; text-underline-offset:4px; }
.etab:hover,.pchip:hover,.chip:hover,.btn:hover { background:radial-gradient(ellipse at center,var(--acid),transparent 78%); color:var(--k); }
.chip,.pchip,.btn { border:0; border-radius:0; background:transparent; font-weight:400; letter-spacing:0; }
.chip.on,.pchip.on { background:var(--k); color:var(--y); }
.btn.full { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:11px 4px; text-align:left; }
.pchips { gap:7px; }
.pchip { border:1px solid var(--line); }
.row label,.col-row label,.mini-t,.tgl { font-size:10px; letter-spacing:0; }
.lib { gap:6px; }
.lthumb { border:1px solid var(--line); background:transparent; }
.lthumb:hover,.lthumb.on { border-color:var(--k); background:radial-gradient(ellipse at center,var(--acid),transparent 80%); }
input[type=range]::-webkit-slider-thumb { background:var(--k); border:0; width:12px; height:12px; margin-top:-5px; }
@media(max-width:820px) {
  .main { grid-template-columns:1fr; grid-template-rows:minmax(260px,42vh) minmax(0,1fr); }
  .stage { padding:28px 10px 12px; }
  .stage::before { top:10px; left:12px; font-size:9px; }
  .side { border-left:0; border-top:1px solid var(--line); }
  .brand { padding:8px 10px; font-size:11px; }
  .hdr-mid { padding:8px; }
  .hdr-right { border-top:1px solid var(--line); }
  .hdr-btn { padding:9px 2px; }
}

.brand { font-size:12px; font-weight:400; letter-spacing:0; }

.brand { font-size:12px; font-weight:400; letter-spacing:0; }

/* Library thumbnails use one ink color; source SVGs remain available for editing. */
.lthumb img { filter: grayscale(1) brightness(0) !important; }