:root{color-scheme:dark;--bg:#0c1014;--line:#29323a;--text:#e4eced;--muted:#84969f;--accent:#b1dbe2;font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);background-image:radial-gradient(ellipse at 65% 30%,#17242c77,transparent 60%)}
header,footer{display:flex;align-items:center;justify-content:space-between;padding:25px 5vw;font-size:10px;letter-spacing:1.8px}header{border-bottom:1px solid var(--line)}a{color:inherit;text-decoration:none}.brand{font-size:12px;font-weight:650}.mark{font-size:25px;vertical-align:middle;margin-right:12px;color:var(--accent)}.edition{color:var(--muted)}.edition b{color:var(--text);margin-left:30px;font-weight:400}
main{max-width:1440px;margin:auto;padding:70px 5vw 28px;display:grid;grid-template-columns:0.75fr 1.6fr;column-gap:6vw}.intro{padding-top:36px}.eyebrow{font:10px monospace;letter-spacing:2px;color:var(--accent)}.eyebrow span{display:inline-block;width:6px;height:6px;background:var(--accent);margin-right:9px}h1{font-size:clamp(34px,4.3vw,62px);line-height:1.28;letter-spacing:-2px;font-weight:550;margin:33px 0 24px}h1 em{font-style:normal;color:var(--accent)}.description{color:var(--muted);font-size:12px;line-height:2.1}
.stage{height:470px;position:relative;background:linear-gradient(#10192088,#10192022);background-image:radial-gradient(#7c959d24 0.65px,transparent 0.65px);background-size:18px 18px;border:1px solid #25323b66}#particles{position:absolute;inset:28px 0 26px}.stage-top,.stage-bottom{position:absolute;left:20px;right:20px;display:flex;justify-content:space-between;font:9px monospace;color:var(--muted);letter-spacing:1px;pointer-events:none}.stage-top{top:17px}.stage-top b{color:var(--accent);font-weight:400}.stage-bottom{bottom:14px}.badge{border:1px solid var(--line);padding:3px 6px;margin-top:-4px}.corner{position:absolute;width:13px;height:13px;border-color:#86a5b1;border-style:solid;z-index:1;pointer-events:none}.tl{top:-1px;left:-1px;border-width:1px 0 0 1px}.tr{top:-1px;right:-1px;border-width:1px 1px 0 0}.bl{bottom:-1px;left:-1px;border-width:0 0 1px 1px}.br{bottom:-1px;right:-1px;border-width:0 1px 1px 0}
.scenes{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}button{font:inherit;color:inherit;cursor:pointer;background:transparent;border:1px solid var(--line)}button:focus-visible,a:focus-visible,input:focus-visible,.upload:focus-within{outline:2px solid var(--accent);outline-offset:5px}.scenes button{display:flex;align-items:center;text-align:left;padding:20px 18px;gap:20px;border-width:1px 0 0}.scenes button[aria-pressed=true]{border-color:var(--accent);background:linear-gradient(#add8e60c,transparent)}.num{font:10px monospace;color:var(--muted)}strong{display:block;font-size:17px;font-weight:500}small{display:block;font:9px monospace;letter-spacing:1.5px;color:var(--muted);margin-top:9px}.arrow{margin-left:auto;color:var(--muted);font-size:22px}.scenes button[aria-pressed=true] .arrow{color:var(--accent)}.scenes button:hover{background:#add8e608}
.controls{grid-column:1/-1;display:flex;align-items:center;gap:22px;border-top:1px solid var(--line);margin-top:30px;padding-top:23px;font-size:11px;color:var(--muted)}.upload{position:relative;cursor:pointer;color:var(--accent)}.upload input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}.controls button{padding:7px 12px;font-size:11px}.density{display:flex;gap:12px;align-items:center;margin-left:auto}input[type=range]{width:90px;accent-color:var(--accent)}output{min-width:28px;font:10px monospace}.color{display:flex;align-items:center;gap:12px}input[type=color]{background:none;border:0;width:24px;height:24px;padding:0;cursor:pointer}#status{grid-column:1/-1;font-size:11px;color:var(--muted);min-height:16px}footer{border-top:1px solid var(--line);font-size:9px;color:var(--muted);letter-spacing:1px}
@media(max-width:760px){header{padding:20px 6vw}.edition{display:none}main{padding:28px 6vw 15px;grid-template-columns:1fr;gap:20px}.intro{padding-top:0}h1{font-size:38px;margin:20px 0 12px}.description{margin-bottom:0}.stage{height:360px}.scenes{margin-top:6px;gap:10px}.scenes button{padding:15px 2px;gap:10px}.scenes strong{font-size:15px}.scenes small{font-size:8px;letter-spacing:0}.arrow{display:none}.controls{margin-top:0;flex-wrap:wrap;gap:18px}.density{margin-left:0}footer{gap:12px;line-height:1.8}footer span:last-child{display:none}}
.controls{flex-wrap:wrap}.tuning{display:flex;align-items:center;gap:10px}.tuning input[type=range]{width:75px}.tuning select{background:#111b22;color:var(--text);border:1px solid var(--line);padding:5px;font:inherit}