:root{ --bg:#0e0f13; --panel:#171922; --accent:#7dd3fc; --text:#e5e7eb; --muted:#9ca3af; }
  *{box-sizing:border-box}
  html,body{height:100%;margin:0;background:linear-gradient(180deg,#0b0c10 0%,#0e0f13 60%,#0b0c10 100%);color:var(--text);font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif}
  .wrap{display:grid;grid-template-columns: 1fr 360px;gap:14px;height:100%;padding:12px}
  .panel{background:var(--panel);border:1px solid #232636;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.35);overflow:hidden}
  #right{display:flex;flex-direction:column}
#painel-controles{display:flex;flex-direction:column;min-height:0}
#painel-controles header,#painel-controles .footer{flex:0 0 auto}
  header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid #232636}
  header h1{font-size:16px;margin:0;letter-spacing:.2px}
  header small{color:var(--muted)}
  #canvas{width:100%;height:calc(100% - 56px);display:block;background: radial-gradient(1200px 600px at 60% 10%, rgba(125,211,252,.08), transparent 50%)}
  .controls{padding:14px;display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:1 1 auto;overflow-y:auto;min-height:0}
.controls::-webkit-scrollbar{width:10px}
.controls::-webkit-scrollbar-thumb{background:#2a3042;border-radius:999px;border:2px solid #171922}
.controls::-webkit-scrollbar-track{background:transparent}
  .controls label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted)}
  .controls select,.controls input[type="range"], .controls button{width:100%;background:#0f1118;border:1px solid #222638;color:var(--text);border-radius:10px;padding:8px 10px;outline:none}
  .controls button{cursor:pointer}
  .controls .row{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .controls .row3{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
  .check{display:flex;align-items:center;gap:8px;background:#0f1118;border:1px solid #222638;border-radius:10px;padding:8px 10px}
  .legend{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;grid-column:1/-1}
  .pill{display:inline-flex;align-items:center;gap:6px;background:#0f1118;border:1px solid #222638;border-radius:999px;padding:6px 10px;color:var(--muted)}
  .dot{width:10px;height:10px;border-radius:50%}
  .footer{padding:10px 14px;border-top:1px solid #232636;color:var(--muted);font-size:12px}
  .value{font-size:12px;color:#cbd5e1}
  #introBox{display:none;border:1px dashed #2a2f45;border-radius:12px;padding:10px 10px 2px 10px;grid-column:1/-1;margin-top:6px}
  #introBox h3{margin:0 0 8px 0;font-size:12px;color:#cbd5e1;font-weight:600;letter-spacing:.2px}
  .btnRow{display:grid;grid-template-columns:1fr auto auto;gap:10px}
  @media (max-width: 980px){ .wrap{grid-template-columns: 1fr} #canvas{height:50vh} .controls .row3{grid-template-columns:1fr} }


[data-panel="intro"] .seq-row,
[data-panel="intro"] .layers-row,
[data-panel="intro"] .layers-buttons { display:none !important; }



canvas[data-layer="intro"] + .labels .label { transform: translateY(8px); }



#introBox label[for="introSeq"],
#introBox #introSeq,
#introBox label[for="introLayers"],
#introBox #introLayers,
#introBox .btnRow { display:none !important; }



#exportAllTxt{ display:inline-block !important; }

  .alert-steric{
    margin: 6px 0 0 0;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(239,68,68,0.12);
    color: #fecaca;
    font-weight: 600;
    border: 1px solid rgba(239,68,68,0.35);
  }



.controls label:has(#angleX), .controls label:has(#angleY), .controls label:has(#angleZ) { display:flex !important; }