:root{
  --bg:#0a0d16; --bg2:#0e1320; --panel:rgba(18,24,40,.72);
  --line:rgba(120,150,200,.16); --line2:rgba(120,150,200,.28);
  --txt:#e8eefc; --dim:#93a3c4; --dim2:#6c7d9e;
  --emas:#f5c451; --emas2:#ffdf94; --biru:#59d0f0; --ungu:#a78bfa;
  --hijau:#4ade80; --merah:#f87171; --jingga:#fb923c;
  --r:14px; --mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1200px 700px at 78% -12%, rgba(89,208,240,.10), transparent 60%),
    radial-gradient(900px 600px at 8% 8%, rgba(245,196,81,.09), transparent 55%),
    linear-gradient(180deg,var(--bg2),var(--bg) 45%);
  color:var(--txt); font:15px/1.55 system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  min-height:100vh;
}

/* ---------- kepala ---------- */
.top{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 18px; border-bottom:1px solid var(--line);
  background:rgba(10,13,22,.6); backdrop-filter:blur(10px);
  position:sticky; top:0; z-index:20; flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:12px}
.logo{display:grid; place-items:center; width:44px; height:44px; border-radius:12px;
  background:linear-gradient(150deg, rgba(245,196,81,.16), rgba(89,208,240,.12));
  border:1px solid var(--line2)}
.brand-txt h1{margin:0; font-size:17px; letter-spacing:.14em; font-weight:800}
.brand-txt p{margin:2px 0 0; font-size:12px; color:var(--dim)}
.hud{display:flex; gap:16px}
.hud-unit{display:flex; align-items:baseline; gap:5px}
.hud-unit b{font:700 17px var(--mono); color:var(--emas)}
.hud-unit small{font-size:10.5px; color:var(--dim2); text-transform:uppercase; letter-spacing:.08em}

/* ---------- susun atur ---------- */
main{
  display:grid; grid-template-columns:minmax(0,1fr) 372px; gap:14px;
  padding:14px; align-items:start;
}
@media (max-width:1080px){ main{grid-template-columns:1fr} }

.stage{
  position:relative; border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:radial-gradient(700px 420px at 50% 62%, #131a2c, #0a0e18 72%);
  min-height:clamp(340px,54vh,560px);
}
#kanvas{display:block; width:100%; height:clamp(340px,54vh,560px); touch-action:none; cursor:grab}

/* telefon: adegan di atas, panel sisip di bawah garis tanah -> kanvas lebih tinggi */
@media (max-width:640px){
  .stage{min-height:clamp(470px,74vh,620px)}
  #kanvas{height:clamp(470px,74vh,620px)}
  .top{padding:11px 13px}
  .brand-txt h1{font-size:15px; letter-spacing:.10em}
  .brand-txt p{font-size:11px}
  main{padding:10px; gap:10px}
  .grid-bacaan{grid-template-columns:1fr 1fr; gap:7px}
  .grid-bacaan dd{font-size:14px}
  .legenda{grid-template-columns:1fr 1fr}
  .hud-unit b{font-size:15px}
  .lajur-segmen .seg{font-size:10.5px; padding:8px 2px}
  .petunjuk{left:10px; right:10px; transform:none; max-width:none; font-size:11.5px; bottom:auto; top:52px}
}
.overlay-atas{position:absolute; top:10px; left:10px; display:flex; gap:8px; flex-wrap:wrap}
.pil{
  font:600 11.5px/1 var(--mono); padding:6px 11px; border-radius:999px;
  background:rgba(10,14,24,.72); border:1px solid var(--line2); color:var(--dim); letter-spacing:.04em;
}
.pil.nyala{color:var(--emas); border-color:rgba(245,196,81,.45); background:rgba(245,196,81,.10)}
.pil-amaran{color:var(--merah); border-color:rgba(248,113,113,.5); background:rgba(248,113,113,.12)}
.petunjuk{
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  font-size:12.5px; color:var(--dim); background:rgba(10,14,24,.8);
  border:1px solid var(--line); padding:7px 14px; border-radius:999px;
  transition:opacity .6s; pointer-events:none; text-align:center; max-width:92%;
}

/* ---------- panel ---------- */
.panel{display:flex; flex-direction:column; gap:12px}
.kumpulan{
  border:1px solid var(--line); border-radius:var(--r); padding:14px;
  background:var(--panel);
}
.kumpulan h2, .bar-tenaga h2{margin:0 0 11px; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim2); font-weight:700}

.lajur-slider label{display:flex; align-items:baseline; gap:6px; font-size:13px; color:var(--dim); margin-bottom:7px}
.lajur-slider label b{font:700 21px var(--mono); color:var(--emas)}
.lajur-slider label span{font-size:11.5px; color:var(--dim2)}
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:999px;
  background:linear-gradient(90deg, var(--emas) 0%, var(--emas) 30%, rgba(120,150,200,.22) 30%);
  outline:none; margin:0 0 4px; cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:19px; height:19px; border-radius:50%;
  background:#fff; border:3px solid var(--emas); box-shadow:0 2px 8px rgba(0,0,0,.5); cursor:grab;
}
input[type=range]::-moz-range-thumb{
  width:15px; height:15px; border-radius:50%; background:#fff; border:3px solid var(--emas); cursor:grab;
}

.lajur-btn{display:flex; gap:8px; margin-top:11px; flex-wrap:wrap}
button{
  font:600 12.5px system-ui,sans-serif; color:var(--txt);
  background:rgba(120,150,200,.10); border:1px solid var(--line2);
  border-radius:10px; padding:9px 13px; cursor:pointer; transition:.15s;
  display:inline-flex; align-items:center; gap:6px; flex:1; justify-content:center;
}
button:hover{background:rgba(120,150,200,.18); border-color:rgba(120,150,200,.42)}
button:active{transform:translateY(1px)}
button.utama{background:rgba(245,196,81,.14); border-color:rgba(245,196,81,.42); color:var(--emas2)}
button.utama:hover{background:rgba(245,196,81,.22)}
button.aktif, button[aria-pressed=true]{
  background:rgba(245,196,81,.16); border-color:rgba(245,196,81,.5); color:var(--emas2);
}
.lajur-segmen{display:flex; gap:0; margin-top:11px; border:1px solid var(--line2); border-radius:10px; overflow:hidden}
.lajur-segmen .seg{
  border:0; border-radius:0; flex:1; padding:9px 4px; font-size:11.5px;
  background:transparent; border-right:1px solid var(--line);
}
.lajur-segmen .seg:last-child{border-right:0}
.seg-kecil{font-size:11.5px; padding:8px 10px}

.nota{margin:11px 0 0; font-size:12px; color:var(--dim); line-height:1.5}
.nota b{color:var(--emas2)}

/* ---------- bacaan ---------- */
.grid-bacaan{margin:0; display:grid; grid-template-columns:1fr 1fr; gap:9px}
.grid-bacaan > div{
  border:1px solid var(--line); border-radius:10px; padding:8px 10px;
  background:rgba(10,14,24,.42);
}
.grid-bacaan dt{font-size:10.5px; color:var(--dim2); text-transform:uppercase; letter-spacing:.07em; margin-bottom:2px}
.grid-bacaan dd{margin:0; font:700 15.5px var(--mono); color:var(--txt); display:flex; align-items:baseline; gap:4px}
.grid-bacaan dd small{font:400 10.5px var(--mono); color:var(--dim2)}
.grid-bacaan dd.sorot{color:var(--emas2)}

/* ---------- bar tenaga ---------- */
.bar-tenaga{border:1px solid var(--line); border-radius:var(--r); padding:14px; background:var(--panel)}
.bar{display:flex; height:16px; border-radius:999px; overflow:hidden; background:rgba(120,150,200,.10); border:1px solid var(--line)}
.bar span{display:block; height:100%; width:0; transition:width .18s}
.seg-cahaya{background:linear-gradient(90deg,#f5c451,#ffdf94)}
.seg-filamen{background:linear-gradient(90deg,#e11d48,#fb7185)}
.seg-gegelung{background:linear-gradient(90deg,#b45309,#f59e0b)}
.seg-teras{background:linear-gradient(90deg,#7c3aed,#a78bfa)}
.seg-geseran{background:linear-gradient(90deg,#0e7490,#59d0f0)}
.seg-gelincir{background:linear-gradient(90deg,#9f1239,#f87171)}
.legenda{list-style:none; margin:11px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:5px 12px}
.legenda li{display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--dim)}
.legenda i{width:9px; height:9px; border-radius:3px; flex:none}
.legenda b{margin-left:auto; font:700 11.5px var(--mono); color:var(--txt)}
.w-cahaya{background:#f5c451} .w-filamen{background:#fb7185} .w-gegelung{background:#f59e0b} .w-teras{background:#a78bfa}
.w-geseran{background:#59d0f0} .w-gelincir{background:#f87171}

/* ---------- tab ---------- */
.tabs{padding:0 14px 20px}
.tab-nav{display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:16px; flex-wrap:wrap}
.tab-nav button{
  flex:0 0 auto; border:0; border-bottom:2px solid transparent; border-radius:0;
  background:transparent; color:var(--dim); padding:11px 14px; font-size:13px;
}
.tab-nav button:hover{color:var(--txt); background:rgba(120,150,200,.07)}
.tab-nav button.aktif, .tab-nav button[aria-selected=true]{color:var(--emas); border-bottom-color:var(--emas)}
.tab-panel{display:none}
.tab-panel.aktif{display:block}

/* penjelasan */
.langkah{list-style:none; margin:0; padding:0; display:grid; gap:11px;
  grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}
.langkah li{
  border:1px solid var(--line); border-left:3px solid var(--emas); border-radius:11px;
  padding:13px 15px; background:rgba(18,24,40,.5);
}
.langkah h3{margin:0 0 6px; font-size:13.5px; color:var(--emas2); letter-spacing:.02em}
.langkah p{margin:0; font-size:13px; color:var(--dim); line-height:1.6; text-align:justify}
.langkah b{color:var(--txt)}
code{font:600 12px var(--mono); background:rgba(120,150,200,.14); padding:1px 5px; border-radius:5px; color:var(--biru)}

/* graf */
.grid-graf{display:grid; gap:13px; grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.grid-graf figure{margin:0; border:1px solid var(--line); border-radius:12px; padding:13px; background:rgba(18,24,40,.5)}
.grid-graf figcaption{font-size:12.5px; color:var(--emas2); font-weight:600; margin-bottom:9px}
.grid-graf canvas{display:block; width:100%; height:190px}
.cetusan{margin:9px 0 0; font-size:11.5px; color:var(--dim2); line-height:1.55}

/* jadual */
.balut-jadual{overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:rgba(18,24,40,.5)}
table{border-collapse:collapse; width:100%; font:13px var(--mono); min-width:820px}
th,td{padding:8px 11px; text-align:right; border-bottom:1px solid var(--line); white-space:nowrap}
th{position:sticky; top:0; background:#121a2b; color:var(--dim); font-size:10.5px;
  text-transform:uppercase; letter-spacing:.06em; cursor:pointer; user-select:none}
th:first-child, td:first-child{text-align:left}
th:hover{color:var(--emas)}
tbody tr:hover{background:rgba(120,150,200,.07)}
tbody tr.putus td{color:var(--merah)}
td.sorot{color:var(--emas2); font-weight:700}

/* eksperimen */
.kad-eks{border:1px solid var(--line); border-radius:12px; padding:16px; background:rgba(18,24,40,.5); max-width:900px}
.kad-eks h3{margin:0 0 10px; font-size:14px; color:var(--emas2)}
.kad-eks ol{margin:0; padding-left:20px}
.kad-eks li{font-size:13px; color:var(--dim); line-height:1.65; margin-bottom:9px; text-align:justify}
.kad-eks b{color:var(--txt)}
.kad-eks i{color:var(--biru); font-style:normal}
.kecil{color:var(--dim2); font-size:11.5px}

/* kaki */
footer{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  padding:14px 18px; border-top:1px solid var(--line);
  font-size:11.5px; color:var(--dim2);
}
footer .dot{color:var(--emas)}