:root{
  color-scheme:dark;
  --accent:#ead9a5;
  --gold:#d8c793;
  --gold-soft:#b7aa7a;
  --text:#f7f3e7;
  --muted:#8e897b;
  --bg:#070707;
  --ring-speed:2.2s;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;min-height:100%;background:var(--bg);overflow:hidden}
body{
  height:100vh;
  height:100svh;
  min-height:100vh;
  min-height:100svh;
  overflow:hidden;
  color:var(--text);
  background:
    radial-gradient(circle at 50% 27%,rgba(185,179,132,.07) 0%,rgba(7,7,7,0) 34%),
    linear-gradient(180deg,#050505 0%,#090909 55%,#070707 100%);
}
button,a,summary{-webkit-tap-highlight-color:transparent}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
main{width:min(600px,100%);height:100vh;height:100svh;margin:0 auto;padding:14px 20px 20px;text-align:center;overflow:hidden}
.page-title{margin:0;font-size:42px;font-weight:760;line-height:1.02;letter-spacing:-.035em;color:var(--text);text-shadow:0 2px 1px rgba(0,0,0,.72),0 0 28px rgba(185,179,132,.12)}
.page-title .username{display:block;margin-top:1px;color:var(--accent);font-size:.82em;font-weight:680;letter-spacing:-.025em}
.eta-ring{position:relative;width:min(54vh,500px);aspect-ratio:1;margin:8px auto 6px;filter:drop-shadow(0 0 20px rgba(216,199,147,.08))}
.eta-ring svg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible}
.ring-track-soft,.ring-track,.ring-active-path{fill:none;vector-effect:non-scaling-stroke}
.ring-track-soft{stroke:rgba(234,217,165,.045);stroke-width:20}
.ring-track{stroke:rgba(234,217,165,.15);stroke-width:14}
.ring-spinner{transform-origin:100px 100px;animation:ringSpin var(--ring-speed) linear infinite}
@keyframes ringSpin{to{transform:rotate(360deg)}}
.ring-active-path{stroke:var(--accent);stroke-width:14;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px rgba(234,217,165,.44))}
.eta-ring.ready .ring-spinner{animation:none}
.eta-center{position:absolute;inset:13%;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;padding:12px}
.eta-label-row{display:inline-flex;align-items:center;justify-content:center;gap:7px;color:#b7b1a4;font-size:14px;font-weight:470;line-height:1.25}
.eta-info{position:relative;display:inline-flex}
.eta-info summary{display:grid;place-items:center;width:22px;height:22px;border:1px solid rgba(234,217,165,.72);border-radius:50%;color:var(--accent);font-size:13px;font-weight:750;line-height:1;list-style:none;cursor:pointer}
.eta-info summary::-webkit-details-marker{display:none}
.eta-tooltip{position:absolute;z-index:5;left:50%;top:calc(100% + 10px);width:min(250px,72vw);padding:11px 13px;transform:translateX(-50%);border:1px solid rgba(234,217,165,.28);border-radius:11px;background:rgba(20,19,16,.98);box-shadow:0 12px 32px rgba(0,0,0,.48);color:#bdb6a5;font-size:12px;font-weight:430;line-height:1.4;text-align:left}
.eta-value{margin-top:6px;color:var(--text);font-size:68px;font-weight:760;line-height:.9;letter-spacing:-.065em;font-variant-numeric:tabular-nums;text-shadow:0 0 28px rgba(234,217,165,.08)}
.eta-unit{min-height:21px;margin-top:3px;color:#c5bda9;font-size:18px;font-weight:620;line-height:1}
.ring-stage{width:100%;margin-top:10px;color:#c8c0ad;font-size:14px;line-height:1.25}
.ring-stage-label,.ring-stage-count{display:block}
.ring-stage-count{margin-top:4px;color:var(--accent);font-size:19px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.eta-ring.queue-waiting .ring-stage-label{color:var(--accent);font-size:15px;font-weight:680;line-height:1.3}
.eta-ring.queue-waiting .ring-stage-count{margin-top:5px;color:#c8c0ad;font-size:14px;font-weight:520;letter-spacing:0}
.status-detail{width:min(430px,100%);margin:0 auto 10px;padding:9px 12px;border:1px solid rgba(234,217,165,.18);border-radius:10px;background:rgba(234,217,165,.04);color:#b6ae99;font-size:13px;line-height:1.4}
.status-detail[hidden]{display:none}
.steps{width:min(390px,100%);margin:8px auto 0;padding:0;list-style:none;text-align:left}
.step{position:relative;min-height:31px;padding-left:39px;color:#625f58;font-size:14px;font-weight:470;line-height:1.2}
.step::before{content:"";position:absolute;left:4px;top:0;width:18px;height:18px;border:2px solid #4b4944;border-radius:50%;background:var(--bg)}
.step:not(:last-child)::after{content:"";position:absolute;left:12px;top:20px;width:2px;height:13px;background:#35322c}
.step.done{color:#a9a28f}
.step.done::before{content:"✓";display:grid;place-items:center;border-color:var(--gold-soft);background:var(--gold-soft);color:#17150f;font-size:10px;font-weight:900}
.step.done:not(:last-child)::after{background:rgba(183,170,122,.55)}
.step.active{color:var(--accent);font-weight:680}
.step.active::before{border-color:var(--accent);background:#181710;box-shadow:0 0 0 4px rgba(234,217,165,.12),0 0 12px rgba(234,217,165,.22)}
.meta{display:grid;gap:4px;margin-top:6px;color:#7f7a6f;font-size:13px}
#elapsedMeta{color:#aaa291}
#elapsedMeta::before{content:"◷";margin-right:7px;color:var(--gold)}
.leave-note{width:min(500px,100%);margin:8px auto 0;color:#8d887d;font-size:12px;line-height:1.3}
.actions{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(150px,.75fr);gap:11px;width:min(520px,100%);margin:9px auto 0}
button,.secondary{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:12px;font:inherit;font-size:14px;font-weight:680;text-decoration:none;cursor:pointer;transition:transform 150ms ease,border-color 150ms ease,background-color 150ms ease}
#notifyButton{border:1px solid rgba(234,217,165,.36);background:#0d0d0d;color:#d8c793}
#notifyButton:hover{border-color:rgba(234,217,165,.68);background:#111;color:var(--text)}
#notifyButton[disabled]{opacity:.62;cursor:default}
.secondary{border:1px solid rgba(234,217,165,.28);background:#0d0d0d;color:#c4bca8}
.secondary:hover{border-color:rgba(234,217,165,.62);color:var(--text)}
@media(max-height:900px) and (min-width:521px){main{padding:8px 20px 10px}.page-title{font-size:36px}.eta-ring{width:min(48vh,390px);margin:2px auto 0}.eta-value{font-size:58px}.eta-unit{font-size:16px}.ring-stage{margin-top:7px}.steps{margin-top:2px}.step{min-height:27px}.meta{gap:2px;margin-top:2px}.leave-note{margin-top:4px}.actions{margin-top:5px}button,.secondary{min-height:42px}}
@media(max-width:520px){main{padding:25px 16px 28px}.page-title{font-size:clamp(30px,10vw,43px)}.eta-ring{width:min(88vw,350px);margin-top:27px}.eta-center{inset:12%;padding:10px}.eta-value{font-size:clamp(66px,21vw,86px)}.actions{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.ring-spinner{animation-duration:8s!important}*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important}}

/* RESPONSIVE_RING_V2 — keep all dynamic status content inside the ring. */
html,body{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto}
body{height:auto;min-height:100vh;min-height:100dvh;overflow-x:hidden;overflow-y:auto}
main{width:min(640px,100%);height:auto;min-height:100vh;min-height:100dvh;padding:12px 20px max(22px,env(safe-area-inset-bottom));overflow:visible}
.page-title{font-size:clamp(34px,4vw,44px)}
.page-title .username{max-width:100%;overflow-wrap:anywhere;text-wrap:balance}
.eta-ring{container-type:inline-size;container-name:eta-ring;width:clamp(360px,32vw,410px);max-width:calc(100vw - 40px);min-width:0;margin:8px auto 8px}
.eta-center{inset:15%;padding:0;display:grid;grid-template-columns:1fr;grid-auto-rows:max-content;align-content:center;justify-items:center;gap:clamp(2px,1.4cqi,6px);overflow:visible}
.eta-label-row{max-width:64cqi;gap:clamp(5px,1.6cqi,7px);font-size:clamp(.78rem,3.7cqi,.93rem);line-height:1.18;white-space:normal;text-wrap:balance}
#etaLabel{min-width:0;text-align:center;text-wrap:balance}
.eta-info summary{width:clamp(20px,5.4cqi,23px);height:clamp(20px,5.4cqi,23px);font-size:clamp(12px,3.2cqi,13px)}
.eta-value{max-width:78cqi;margin-top:clamp(1px,1cqi,5px);font-size:clamp(3.55rem,18cqi,4.75rem);line-height:.88;letter-spacing:-.06em;white-space:nowrap}
.eta-ring.eta-wide .eta-value{font-size:clamp(3.1rem,15.8cqi,4.15rem);letter-spacing:-.045em}
.eta-unit{min-height:0;margin-top:0;font-size:clamp(.98rem,4.7cqi,1.18rem);line-height:1.05;white-space:nowrap}
.ring-stage{width:auto;max-width:68cqi;margin-top:clamp(4px,2cqi,9px);font-size:clamp(.78rem,3.7cqi,.92rem);line-height:1.18;text-wrap:balance}
.ring-stage-label,.ring-stage-count{display:block;max-width:100%;margin-inline:auto;overflow-wrap:normal;word-break:normal;text-wrap:balance}
.ring-stage-count{max-width:58cqi;margin-top:clamp(2px,1.1cqi,4px);font-size:clamp(.98rem,4.9cqi,1.22rem);line-height:1.12}
.eta-ring.queue-waiting .ring-stage{max-width:62cqi}
.eta-ring.queue-waiting .ring-stage-label{font-size:clamp(.8rem,3.9cqi,.96rem);line-height:1.18;text-wrap:balance}
.eta-ring.queue-waiting .ring-stage-count{margin-top:clamp(2px,1cqi,4px);font-size:clamp(.76rem,3.5cqi,.88rem);line-height:1.15}
.eta-ring.ring-dense .eta-center{gap:1px}
.eta-ring.ring-dense .eta-value{margin-top:1px}
.eta-ring.ring-dense .ring-stage{margin-top:3px;line-height:1.14}
.eta-ring.ring-extra-dense .eta-center{inset:14.5%}
.eta-ring.ring-extra-dense .eta-label-row{font-size:clamp(.74rem,3.45cqi,.86rem)}
.eta-ring.ring-extra-dense .eta-value{font-size:clamp(3.25rem,16.8cqi,4.35rem)}
.eta-ring.ring-extra-dense.eta-wide .eta-value{font-size:clamp(2.95rem,14.9cqi,3.9rem)}
.eta-ring.ring-extra-dense .eta-unit{font-size:clamp(.9rem,4.3cqi,1.08rem)}
.eta-ring.ring-extra-dense .ring-stage{max-width:66cqi;margin-top:2px;font-size:clamp(.73rem,3.4cqi,.84rem);line-height:1.11}
.eta-ring.ring-extra-dense .ring-stage-count{font-size:clamp(.9rem,4.45cqi,1.08rem);line-height:1.08}
@media(max-width:520px){
  main{padding:clamp(18px,4dvh,26px) 12px max(28px,env(safe-area-inset-bottom))}
  .page-title{font-size:clamp(30px,9.5vw,42px)}
  .page-title .username{font-size:.8em}
  .eta-ring{width:min(calc(100vw - 24px),382px);max-width:none;margin:18px auto 8px}
  .eta-center{inset:15%}
  .steps{width:min(360px,100%)}
}
@media(min-width:521px) and (max-height:620px){
  main{padding-top:8px;padding-bottom:16px}
  .eta-ring{margin-top:4px}
}