:root{
  --bg:#061016;
  --panel:rgba(10,23,31,.82);
  --panel-solid:#0b1820;
  --line:rgba(159,190,205,.18);
  --text:#f3f7f8;
  --muted:#8fa2aa;
  --accent:#7db4ec;
  --accent2:#a8cef7;
  --danger:#c9d8ea;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);font-family:Inter,Arial,Helvetica,sans-serif;color:var(--text)}
body{background:
  radial-gradient(circle at 55% 25%,rgba(45,101,112,.18),transparent 34%),
  linear-gradient(160deg,#08131a 0%,#040a0e 70%);
}
#app{position:relative;width:100%;height:100%;min-height:520px}
#stage{position:absolute;inset:0}
canvas{display:block;width:100%;height:100%}
.topbar{
  position:absolute;z-index:10;left:22px;right:22px;top:20px;
  display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  pointer-events:none;
}
.brand{pointer-events:auto}
.brand .eyebrow{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);font-weight:800}
.brand h1{font-size:28px;letter-spacing:.18em;margin:4px 0 2px}
.brand p{margin:0;color:var(--muted);font-size:12px}
.controls{
  pointer-events:auto;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;
}
button{
  appearance:none;border:1px solid var(--line);background:var(--panel);color:var(--text);
  border-radius:999px;padding:10px 14px;font-size:11px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;cursor:pointer;backdrop-filter:blur(14px);
}
button:hover,button.active{border-color:var(--accent);color:var(--accent2)}
.bottom{
  position:absolute;z-index:12;left:22px;right:22px;bottom:18px;
  display:grid;grid-template-columns:1fr minmax(330px,760px) 1fr;align-items:end;gap:18px;
}
.hint{
  color:var(--muted);font-size:11px;line-height:1.5;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;padding:11px 13px;backdrop-filter:blur(14px);
}
.explode-panel{
  background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:14px 18px 12px;
  backdrop-filter:blur(18px);box-shadow:0 16px 60px rgba(0,0,0,.20);
}
.explode-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:8px}
.explode-head span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
#stateLabel{color:var(--accent2);font-weight:800}
input[type=range]{
  width:100%;accent-color:var(--accent);cursor:pointer;
}
.labels{
  align-self:stretch;justify-self:end;width:min(270px,30vw);
  background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:12px;
  backdrop-filter:blur(16px);max-height:300px;overflow:auto;
  transition:opacity .25s ease, transform .25s ease;
}
.labels.hidden{opacity:0;transform:translateY(8px);pointer-events:none}
.labels h3{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 9px}
.part{
  display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:10px;
  cursor:pointer;border:1px solid transparent;font-size:12px;color:#dce7ea;
}
.part:hover,.part.active{border-color:var(--line);background:rgba(135,212,157,.08);color:var(--accent2)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px rgba(135,212,157,.55)}
.detail{
  position:absolute;z-index:15;left:50%;top:90px;transform:translateX(-50%);
  width:min(420px,80vw);background:var(--panel-solid);border:1px solid var(--line);
  border-radius:15px;padding:14px 16px;box-shadow:0 16px 55px rgba(0,0,0,.32);
  opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.detail.show{opacity:1}
.detail .title{font-weight:800;color:var(--accent2);margin-bottom:4px}
.detail .copy{font-size:12px;color:var(--muted);line-height:1.45}
.disclaimer{
  position:absolute;z-index:8;right:22px;top:82px;color:rgba(219,232,236,.48);
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;
}
@media(max-width:850px){
  .topbar{left:14px;right:14px;top:13px}
  .brand h1{font-size:22px}
  .brand p{display:none}
  .bottom{left:14px;right:14px;bottom:12px;grid-template-columns:1fr;gap:8px}
  .hint{display:none}
  .labels{position:absolute;right:0;bottom:78px;width:min(280px,88vw);max-height:220px}
  .disclaimer{right:14px;top:72px}
}

/* ============================================================
   Mobile layout — added when integrating into the MAC4 theme
   ============================================================
   The original UI assumes desktop width. Inside the theme's
   responsive frame it drops to ~341px on a phone, where the
   brand block, the control buttons and the component panel all
   overlapped and left almost no visible canvas.

   Below 760px: stack the top bar, shrink the controls, and turn
   the component list into a compact strip pinned above the
   slider instead of a panel floating over the model.
   ============================================================ */
@media (max-width: 760px){
  .topbar{
    flex-direction:column;align-items:flex-start;gap:10px;
    padding:12px 14px;
  }
  .brand h1{font-size:1.15rem;letter-spacing:.16em;}
  .brand .eyebrow{font-size:.58rem;letter-spacing:.16em;}
  .brand p{display:none;}

  .controls{width:100%;display:flex;flex-wrap:wrap;gap:6px;}
  .controls button{
    flex:1 1 auto;min-width:0;
    font-size:.62rem;padding:8px 10px;letter-spacing:.08em;
    min-height:36px;
  }

  .disclaimer{display:none;}
  .hint{display:none;}

  /* the component list was covering the model */
  .labels{
    position:static;width:auto;max-height:none;
    margin:0 10px 8px;padding:10px 12px;
    display:flex;flex-wrap:wrap;gap:6px 10px;
  }
  .labels h3{width:100%;margin:0 0 2px;font-size:.58rem;}
  .part{
    flex:0 0 auto;padding:5px 8px;font-size:.66rem;
    border-radius:980px;background:rgba(255,255,255,.05);
  }
  .detail{display:none;}

  .bottom{padding:0 10px 10px;}
  .explode-head span{font-size:.6rem;}
  .explode-panel input[type=range]{height:24px;}
}

/* Very narrow: drop the component strip entirely and give the
   canvas everything. The labels button still toggles in-scene text. */
@media (max-width: 420px){
  .labels{display:none;}
  .controls button{font-size:.58rem;padding:7px 8px;}
}