:root{
  --bg:#17110e;
  --ink:#f7ece2;
  --muted:#a68d7a;
  --orange:#f2762a;
  --orange-lt:#ff9a52;
  --line:rgba(255,220,190,.11);
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Courier New",monospace;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:"PingFang SC","HarmonyOS Sans SC","MiSans","Source Han Sans SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);
  background:radial-gradient(120% 72% at 50% 16%,#3c2113 0%,#24170f 44%,#17110e 74%),var(--bg);
  overflow:hidden;
  overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
  user-select:none;-webkit-user-select:none;
}
body::before{
  content:"";position:fixed;left:50%;top:33%;width:min(128vw,820px);aspect-ratio:1;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(255,124,34,.3),rgba(255,124,34,0) 62%);
  filter:blur(8px);
}
body::after{
  content:"";position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

.stage{
  position:fixed;inset:0 0 clamp(100px,14vh,150px) 0;z-index:1;
  perspective:1400px;
}
.stage canvas{display:block;width:100%;height:100%;outline:none;touch-action:none!important}

.bar{
  position:fixed;inset:0 0 auto 0;z-index:6;display:flex;align-items:center;justify-content:space-between;
  padding:calc(15px + env(safe-area-inset-top)) 20px 0;pointer-events:none;
}
.bar>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:9px;font-size:13.5px;letter-spacing:.06em;color:#f3e7dc;opacity:.92}
.brand b{font-weight:600;letter-spacing:.09em}
.brand span{font-size:10px;color:var(--muted);letter-spacing:.2em;padding-left:10px;border-left:1px solid var(--line)}

.pill{
  display:flex;align-items:center;gap:7px;height:30px;padding:0 12px;border-radius:999px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,228,205,.1);
  color:#d6c3b3;font-size:10.5px;letter-spacing:.08em;font-family:inherit;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;
  transition:border-color .25s,color .25s;
}
.pill:hover{border-color:rgba(255,228,205,.22);color:#f3e2d4}
.pill i{width:6px;height:6px;border-radius:50%;background:#8a7565;transition:.3s}
.pill.on i{background:#5ec98a;box-shadow:0 0 0 3px rgba(94,201,138,.12),0 0 10px rgba(94,201,138,.55)}
.pill.off i{background:#d2664f;box-shadow:0 0 0 3px rgba(210,102,79,.12)}
.pill.demo i{background:#e6a73c;box-shadow:0 0 0 3px rgba(230,167,60,.12),0 0 10px rgba(230,167,60,.4)}

.bottom{
  position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;flex-direction:column;
  align-items:center;gap:9px;text-align:center;
  padding:0 24px calc(21px + env(safe-area-inset-bottom));
}
.meter{width:86px;height:3px;border-radius:99px;background:rgba(255,220,190,.13);overflow:hidden;
  opacity:0;transition:opacity .28s}
.meter.on{opacity:1}
.meter i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--orange-lt),var(--orange));
  box-shadow:0 0 10px rgba(242,118,42,.65);transition:width .06s linear}
.state{display:flex;align-items:center;gap:8px;font-size:16.5px;font-weight:600;letter-spacing:.03em;
  color:var(--ink);transition:color .3s}
.state .dot{width:6px;height:6px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 0 4px rgba(242,118,42,.12);transition:.3s}
.state.open{color:#ffb277}
.state.open .dot{box-shadow:0 0 0 4px rgba(242,118,42,.2),0 0 14px rgba(242,118,42,.8)}
.state.off{color:#d8bba9}
.state.off .dot{background:#c2684f;box-shadow:0 0 0 4px rgba(194,104,79,.12)}
.hint{font-size:11.5px;letter-spacing:.1em;color:var(--muted);min-height:17px;transition:color .25s}
.hint.ready{color:#ffab6b}

.toast{
  position:fixed;left:50%;bottom:calc(136px + env(safe-area-inset-bottom));z-index:20;
  display:flex;align-items:center;gap:10px;padding:12px 18px 12px 13px;border-radius:15px;
  background:linear-gradient(135deg,#f7822f,#dd5a0d);color:#fff;white-space:nowrap;
  box-shadow:0 20px 44px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.22);
  opacity:0;transform:translate(-50%,14px) scale(.96);pointer-events:none;
  transition:opacity .3s,transform .42s cubic-bezier(.2,.9,.3,1.15);
}
.toast.show{opacity:1;transform:translate(-50%,0) scale(1)}
.toast.warn{background:linear-gradient(135deg,#8a705c,#5f4a3a);box-shadow:0 20px 44px rgba(0,0,0,.5)}
.toast.err{background:linear-gradient(135deg,#c85a48,#9c382c);box-shadow:0 20px 44px rgba(0,0,0,.5)}
.toast .tick{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.2);
  display:grid;place-items:center;flex:none}
.toast .tick svg{width:12px;height:12px;display:block}
.toast b{font-size:14px;font-weight:600;letter-spacing:.05em}
.toast em{font-style:normal;font-size:10.5px;opacity:.78;padding-left:10px;border-left:1px solid rgba(255,255,255,.3)}
.toast em:empty{display:none}


.scrim{position:fixed;inset:0;z-index:15;background:rgba(8,5,4,.62);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.show{opacity:1;pointer-events:auto}

.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:16;width:100%;max-width:520px;margin:0 auto;
  border-radius:22px 22px 0 0;border-top:1px solid rgba(255,222,195,.13);
  background:linear-gradient(180deg,#261a14 0%,#1a1210 100%);
  padding:16px 20px calc(22px + env(safe-area-inset-bottom));
  transform:translateY(104%);transition:transform .44s cubic-bezier(.2,.9,.25,1);
  box-shadow:0 -30px 70px rgba(0,0,0,.5);
}
.sheet.open{transform:translateY(0)}
.sheetHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.sheetHead h2{font-size:14px;font-weight:600;letter-spacing:.1em;color:#f3e4d7}
.sheetHead button{background:none;border:0;color:var(--orange-lt);font-size:12.5px;
  letter-spacing:.08em;font-family:inherit;cursor:pointer;padding:4px 0}

.input{width:100%;height:46px;border-radius:12px;border:1px solid rgba(255,222,195,.14);
  background:rgba(255,255,255,.045);color:var(--ink);padding:0 14px;
  font-family:var(--mono);font-size:13px;outline:none;transition:border-color .25s,box-shadow .25s}
.input::placeholder{color:#7b6656}
.input:focus{border-color:rgba(242,118,42,.62);box-shadow:0 0 0 3px rgba(242,118,42,.13)}

.tip{margin-top:10px;font-size:11px;line-height:1.65;color:#9c8472;letter-spacing:.02em}
.tip b{color:#e2b18b;font-weight:600}

.btn{margin-top:12px;width:100%;height:42px;border-radius:11px;border:0;font-family:inherit;
  font-size:12.5px;font-weight:600;letter-spacing:.05em;cursor:pointer;
  background:linear-gradient(135deg,#f7822f,#e2610f);color:#fff;
  box-shadow:0 10px 24px rgba(226,97,15,.3)}
.btn:active{transform:translateY(1px)}

.diag{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr auto;gap:8px 14px;font-size:11.5px;color:var(--muted)}
.diag b{color:#e8d7c7;font-weight:500}
.diag b.bad{color:#e28a75}

@media (max-height:640px){
  .bar{padding-top:calc(10px + env(safe-area-inset-top))}
  .bottom{gap:7px;padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  .state{font-size:15px}
}
@media (min-width:700px){
  .bar{padding-left:28px;padding-right:28px}
}
@media (min-width:900px){
  .bar{padding:24px 34px 0}
  .brand{font-size:15px}
  .brand span{font-size:10.5px}
  .state{font-size:19px}
  .hint{font-size:12.5px}
  .bottom{padding-bottom:30px}
}