:root{
  --bg:#0a0705; --ink:#f3e7d3; --dim:#b9a58c; --faint:#8a7a66;
  --gold:#ffb454; --line:rgba(255,180,84,.18);
  color-scheme:dark;
}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;
  overflow:hidden;
}
#scene{position:fixed; inset:0; width:100%; height:100%; display:block}

header{position:fixed; top:0; left:0; right:0; z-index:3; display:flex; align-items:flex-start; gap:16px; padding:20px 24px; pointer-events:none}
header>*{pointer-events:auto}
h1{margin:0; font:600 25px/1 ui-serif,Georgia,"Times New Roman",serif; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); text-shadow:0 0 26px rgba(255,150,50,.35)}
.tag{margin:7px 0 0; color:var(--dim); font-size:13px}
.spacer{flex:1}

.btn{appearance:none; border:1px solid var(--line); background:rgba(23,16,9,.75); color:var(--ink);
  padding:9px 16px; border-radius:999px; font:600 13.5px system-ui,sans-serif; cursor:pointer;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.btn:hover{border-color:rgba(255,180,84,.45); background:rgba(38,26,14,.85)}
.btn.primary{background:linear-gradient(180deg,#ffc46a,#e8862f); color:#241203; border-color:transparent; box-shadow:0 2px 18px rgba(232,134,47,.35)}
.btn.primary:hover{filter:brightness(1.07)}
.btn.wide{width:100%; margin-top:14px}
:is(button,input):focus-visible{outline:2px solid #ffd9a0; outline-offset:2px}

#chips{position:fixed; left:0; right:0; bottom:34px; z-index:3; display:flex; gap:8px; padding:8px 20px; overflow-x:auto; scrollbar-width:thin}
.chip{display:inline-flex; align-items:center; gap:8px; white-space:nowrap; flex:0 0 auto;
  border:1px solid var(--line); background:rgba(20,13,7,.7); color:var(--ink); border-radius:999px;
  padding:7px 14px; font:500 13px system-ui,sans-serif; cursor:pointer;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.chip:hover{border-color:rgba(255,180,84,.5)}
.dot{width:9px; height:9px; border-radius:50%; background:var(--c); box-shadow:0 0 8px var(--c); flex:0 0 auto}
.chip .st{color:var(--dim); font-size:12px}
.chip.ember .dot{opacity:.4; box-shadow:0 0 3px var(--c)}

footer{position:fixed; bottom:10px; left:0; right:0; z-index:2; text-align:center; font-size:11.5px; color:var(--faint); pointer-events:none}

#about{position:absolute; left:16px; top:96px; width:250px; z-index:2;
  background:rgba(18,12,7,.74); border:1px solid var(--line); border-radius:18px; padding:24px 22px;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
#about h2{margin:0 0 10px; font:600 20px ui-serif,Georgia,serif; text-wrap:balance}
#about p{margin:0; color:var(--dim); font-size:13.5px}
#about .btn{margin-top:20px}
#about .alt{display:block; margin:14px 0 0; background:none; border:none; color:var(--dim); cursor:pointer;
  font:13px system-ui,sans-serif; text-decoration:underline; text-underline-offset:3px; padding:0}
#about .alt:hover{color:var(--gold)}
#about.lit .btn, #about.lit .alt{display:none}
@media (max-width:719px){
  #about{left:50%; top:50%; transform:translate(-50%,-50%); width:min(440px,calc(100vw - 48px));
    box-sizing:border-box; text-align:center; padding:36px 32px}
  #about .alt{margin:14px auto 0}
  #about.lit{display:none}
}

dialog{border:1px solid var(--line); border-radius:16px; background:linear-gradient(180deg,#1a120a,#120b06);
  color:var(--ink); padding:24px; width:min(432px,calc(100vw - 32px)); max-height:min(82vh,660px);
  overflow:auto; box-shadow:0 24px 80px rgba(0,0,0,.6)}
dialog::backdrop{background:rgba(4,2,1,.55); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px)}
.dlg-head{display:flex; align-items:center; gap:10px}
.dlg-head .dot{width:12px; height:12px}
dialog h2{margin:0; font:600 20px ui-serif,Georgia,serif; overflow-wrap:anywhere}
.x{margin-left:auto; background:none; border:none; color:var(--dim); font-size:22px; line-height:1;
  padding:2px 9px; border-radius:8px; cursor:pointer}
.x:hover{color:var(--ink)}
.sub{margin:4px 0 0; color:var(--dim); font-size:13px}

.stats{display:flex; gap:10px; margin:18px 0 4px}
.stat{flex:1; background:rgba(255,180,84,.06); border:1px solid rgba(255,180,84,.12); border-radius:12px; padding:10px 12px; min-width:0}
.stat b{display:block; font-size:19px; font-weight:650; font-variant-numeric:tabular-nums; white-space:nowrap}
.stat span{font-size:10.5px; color:var(--dim); letter-spacing:.05em; text-transform:uppercase}

.lbl{margin:16px 0 6px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim)}
.days{display:flex; gap:4px}
.days i{flex:1; height:26px; border-radius:4px; min-width:8px}

input[type=text],input[type=number]{background:#0e0906; border:1px solid rgba(255,255,255,.14); color:var(--ink);
  border-radius:10px; padding:9px 12px; font:14px system-ui,sans-serif; width:100%; box-sizing:border-box}
input::placeholder{color:var(--faint)}
.presets{display:flex; gap:6px; align-items:center; margin-bottom:8px; flex-wrap:wrap}
.pre{border:1px solid var(--line); background:rgba(255,180,84,.07); color:var(--ink); border-radius:999px;
  padding:8px 12px; font:600 12.5px system-ui,sans-serif; cursor:pointer}
.pre:hover{border-color:rgba(255,180,84,.5)}
#tMin{width:84px; flex:0 0 auto}

.log{list-style:none; margin:0; padding:0}
.log li{display:flex; gap:10px; padding:9px 2px; border-bottom:1px solid rgba(255,255,255,.06); font-size:13.5px}
.log .when{color:var(--dim); flex:0 0 88px}
.log .m{color:#f0b46a; flex:0 0 52px; text-align:right; font-variant-numeric:tabular-nums}
.log .note{flex:1; overflow-wrap:anywhere}
.log .more{color:var(--faint); border-bottom:none}

.linkish{margin-top:18px; background:none; border:none; color:var(--faint); font:12.5px system-ui,sans-serif;
  cursor:pointer; text-decoration:underline; text-underline-offset:3px; padding:2px}
.linkish:hover{color:#ff9b6a}

.cadences{display:flex; gap:6px}
.cad{position:relative; flex:1; cursor:pointer}
.cad input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
.cad span{display:block; text-align:center; border:1px solid var(--line); background:rgba(255,180,84,.07);
  color:var(--ink); border-radius:999px; padding:8px 0; font:600 12.5px system-ui,sans-serif}
.cad input:checked+span{background:linear-gradient(180deg,#ffc46a,#e8862f); color:#241203; border-color:transparent}
.cad input:focus-visible+span{outline:2px solid #ffd9a0; outline-offset:2px}

.swatches{display:flex; gap:10px; flex-wrap:wrap}
.swatch{position:relative; cursor:pointer}
.swatch input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
.swatch i{display:block; width:26px; height:26px; border-radius:50%; background:var(--c);
  box-shadow:0 0 10px var(--c); border:2px solid transparent}
.swatch input:checked+i{border-color:#fff7e8}
.swatch input:focus-visible+i{outline:2px solid #ffd9a0; outline-offset:2px}