:root{
  --bg:#131B26; --bg2:#0F1620; --panel:#18212E; --line:#26323F; --line2:#33404f;
  --text:#EDE7DB; --dim:#8A97A6; --faint:#5B6877;
  --warm:#E8A13C; --hot:#E0713C; --cold:#7CC8EA; --ice:#CDEFFF; --water:#37A3E4; --ref:#3FBF8A; --comp:#D2A6FF;
  --chip:#1E2937;
}
*{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%}
body{
  background:var(--bg2); color:var(--text);
  font-family:"Bricolage Grotesque", system-ui, sans-serif;
  font-size:14px; overflow:hidden; -webkit-user-select:none; user-select:none;
}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer}

/* ---------- top bar ---------- */
header{
  height:58px; display:flex; align-items:center; gap:14px; padding:0 18px;
  background:var(--bg); border-bottom:1px solid var(--line);
}
.mark{display:flex; align-items:center; gap:10px}
.mark svg{display:block}
.wordmark{font-weight:750; font-size:20px; letter-spacing:-.02em}
.wordmark em{font-style:normal; color:var(--warm)}
.scene-tag{
  font-size:12px; color:var(--dim); border:1px solid var(--line2); border-radius:999px;
  padding:3px 10px; margin-left:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:34vw;
}
header .spacer{flex:1}
.demo-pick{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--dim); margin-left:6px}
.demo-pick select{
  font:inherit; font-weight:600; color:var(--text); background:var(--chip); border:1px solid var(--line2); border-radius:9px;
  padding:7px 30px 7px 12px; cursor:pointer; appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, var(--dim) 50%), linear-gradient(135deg, var(--dim) 50%, transparent 50%);
  background-position:calc(100% - 16px) 55%, calc(100% - 11px) 55%; background-size:5px 5px; background-repeat:no-repeat;
}
.demo-pick select:hover{border-color:var(--warm)}
.demo-pick select option{background:var(--bg); color:var(--text)}
.tagline{color:var(--faint); font-size:13px; margin-right:10px}
.tb{
  display:flex; align-items:center; gap:7px; padding:8px 14px; border-radius:9px;
  border:1px solid var(--line2); color:var(--text); font-weight:600; font-size:13px;
}
.tb:hover{background:var(--chip)}
.tb.primary{background:var(--warm); border-color:var(--warm); color:#1B1408}
.tb.primary:hover{filter:brightness(1.06)}
.tb.icon{padding:8px 9px}

/* ---------- layout ---------- */
main{display:flex; height:calc(100% - 58px - 40px)}
#rail{
  width:60px; background:var(--bg); border-right:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; padding:10px 0; gap:3px; overflow-y:auto;
}
#rail::-webkit-scrollbar{width:0}
.tool{
  width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  color:var(--dim); position:relative; border:1px solid transparent;
}
.tool:hover{color:var(--text); background:var(--chip)}
.tool.active{color:var(--warm); background:var(--chip); border-color:var(--line2)}
.tool .key{position:absolute; right:4px; bottom:3px; font-size:9px; color:var(--faint); font-weight:600}
.tool.active .key{color:var(--warm)}
.rail-gap{height:1px; width:34px; background:var(--line); margin:4px 0}

/* stage */
#stage{flex:1; position:relative; background:var(--bg2); min-width:0}
canvas{position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none}
#hint{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  background:rgba(24,33,46,.92); border:1px solid var(--line2); border-radius:999px;
  padding:8px 16px; font-size:13px; color:var(--dim); pointer-events:none; white-space:nowrap;
}
#hint b{color:var(--text); font-weight:600}
#scene-title{position:absolute; top:16px; left:22px; pointer-events:none; max-width:460px}
#scene-title .live{display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--dim); letter-spacing:.06em}
#scene-title .dot{width:7px; height:7px; border-radius:50%; background:var(--warm); box-shadow:0 0 8px var(--warm)}
#scene-title h1{font-size:21px; font-weight:700; letter-spacing:-.01em; margin-top:4px}
#scene-title p{font-size:12.5px; color:var(--dim); line-height:1.45; margin-top:4px; text-shadow:0 1px 2px rgba(0,0,0,.6)}

/* right panel */
#panel{
  width:300px; background:var(--bg); border-left:1px solid var(--line);
  overflow-y:auto; padding:18px 20px 26px;
}
#panel::-webkit-scrollbar{width:8px}
#panel::-webkit-scrollbar-thumb{background:var(--line2); border-radius:4px}
.p-head{font-size:16px; font-weight:700; margin-bottom:14px}
.eyebrow{font-size:11.5px; color:var(--faint); letter-spacing:.05em; margin-bottom:8px}
.sec{border-top:1px solid var(--line); padding:16px 0}
.sec h3{font-size:13.5px; font-weight:700; margin-bottom:12px; display:flex; align-items:center; justify-content:space-between}
.active-tool-name{display:flex; align-items:center; gap:9px; color:var(--warm); font-weight:700; font-size:16px; margin-bottom:7px}
.active-tool-desc{color:var(--dim); font-size:13px; line-height:1.5}
.opt{display:none; margin-top:12px}

.row{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px}
.row label{font-size:13px; color:var(--text)}
.row .val{font-size:12px; color:var(--dim); background:var(--chip); border:1px solid var(--line); border-radius:6px; padding:2px 8px; min-width:44px; text-align:center}
.minmax{display:flex; justify-content:space-between; font-size:11.5px; color:var(--faint); margin:3px 0 14px}
input[type=range]{width:100%; accent-color:var(--warm); height:22px}
input[type=range].coldrange{accent-color:var(--cold)}

.seg{display:flex; gap:5px; margin-bottom:4px}
.seg button{
  flex:1; padding:7px 3px; border:1px solid var(--line2); border-radius:8px; font-size:12px;
  color:var(--dim); display:flex; align-items:center; justify-content:center; gap:5px; font-weight:600; min-width:0;
}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--chip); color:var(--text); border-color:var(--warm)}
.seg button .sw{width:8px; height:8px; border-radius:50%; flex:none}
.seg-note{font-size:12px; color:var(--faint); margin-top:8px; line-height:1.45}

.switch{position:relative; width:38px; height:21px; background:var(--line2); border-radius:999px; transition:background .15s; cursor:pointer}
.switch::after{content:""; position:absolute; top:2.5px; left:3px; width:16px; height:16px; border-radius:50%; background:var(--dim); transition:all .15s}
.switch.on{background:var(--warm)}
.switch.on::after{left:19px; background:#1B1408}

.wide-btn{
  width:100%; padding:10px; border:1px solid var(--line2); border-radius:9px; font-weight:600; font-size:13px;
  display:flex; align-items:center; justify-content:center; gap:8px; margin-top:8px;
}
.wide-btn:hover{background:var(--chip)}
.note{font-size:12px; color:var(--faint); line-height:1.5; margin-top:8px}


.kv{display:flex; justify-content:space-between; font-size:12.5px; color:var(--dim); padding:3px 0}
.kv b{color:var(--text); font-weight:600}

/* footer */
footer{
  height:40px; background:var(--bg); border-top:1px solid var(--line);
  display:flex; align-items:center; padding:0 18px; gap:18px; font-size:12px; color:var(--dim); white-space:nowrap; overflow:hidden;
}
footer .stat b{color:var(--text); font-weight:600}
footer .spacer{flex:1}
.legend{display:flex; align-items:center; gap:8px}
.legend .bar{width:120px; height:8px; border-radius:4px; background:linear-gradient(90deg,#37A3E4,#3FB7C9,#E8A13C,#E0713C)}
.legend .chip{display:flex; align-items:center; gap:5px}
.legend .sw{width:9px; height:9px; border-radius:3px}
@media (max-width:1250px){ .tagline{display:none} .scene-tag{display:none} }
@media (max-width:1000px){ #panel{display:none} }

/* help overlay */
#help[hidden]{display:none}
#help{position:fixed; inset:0; background:rgba(8,12,18,.72); display:flex; align-items:center; justify-content:center; z-index:50; padding:24px}
.help-card{
  position:relative; width:min(760px, 100%); max-height:100%; overflow-y:auto; background:var(--bg); border:1px solid var(--line2);
  border-radius:16px; padding:28px 32px 30px; font-size:13.5px; line-height:1.55; color:var(--text); -webkit-user-select:text; user-select:text;
}
.help-card h2{font-size:22px; font-weight:750; margin-bottom:10px}
.help-card h3{font-size:14.5px; font-weight:700; margin:18px 0 6px; color:var(--warm)}
.help-card p{color:var(--dim); margin-bottom:8px}
.help-card ul, .help-card ol{margin:0 0 6px 20px; color:var(--dim)}
.help-card li{margin-bottom:5px}
.help-card b{color:var(--text)}
.help-card em{font-style:normal; color:var(--comp)}
.help-card table{width:100%; border-collapse:collapse; margin-top:16px; font-size:12.5px}
.help-card th{text-align:left; color:var(--faint); font-weight:600; padding:4px 6px; border-bottom:1px solid var(--line)}
.help-card td{padding:4px 6px; border-bottom:1px solid var(--line); color:var(--dim)}
.help-card td:first-child{color:var(--text); font-weight:600}
.help-card .fine{font-size:12px; color:var(--faint); margin-top:10px}
.help-x{position:absolute; top:12px; right:14px; font-size:24px; color:var(--dim); width:32px; height:32px; border-radius:8px}
.help-x:hover{background:var(--chip); color:var(--text)}