/* 1. Scroll-driven animations */
.sn-scroller{position:relative;height:190px;overflow-y:auto;padding:0 1rem 1rem;border:1px solid var(--rule);background:color-mix(in srgb,var(--fg) 3%,transparent);scroll-timeline:--sn-read block;overscroll-behavior:contain}
.sn-scroller p{margin:.75rem 0 0}
.sn-bar{position:sticky;top:0;z-index:1;margin:0 -1rem;padding-top:0;height:4px;background:var(--rule)}
.sn-bar i{display:block;height:100%;background:var(--redline);transform-origin:0 50%;transform:scaleX(0)}
@keyframes sn-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@supports (animation-timeline: scroll()){
  .sn-bar i{animation:sn-grow linear both;animation-timeline:--sn-read}
}

/* 2. Container style queries */
.sn-wrap{container-name:sn-card}
.sn-card{padding:.8rem .9rem;border:1px solid var(--rule);border-left-width:4px;transition:border-color 160ms ease-out,background-color 160ms ease-out}
.sn-card p{margin:0}
.sn-card-head{display:flex;align-items:center;gap:.5rem}
.sn-card-body{margin-top:.3rem!important;color:var(--muted)}
.sn-badge{padding:.05rem .4rem;border:1px solid var(--rule);color:var(--muted);font-size:.85em}
.sn-badge::before{content:"Healthy"}
@container sn-card style(--tone: warning){
  .sn-card{border-left-color:#e8a33d}
  .sn-badge{border-color:#e8a33d;color:#b7791f}
  .sn-badge::before{content:"Slow"}
}
@container sn-card style(--tone: urgent){
  .sn-card{border-color:var(--redline);background:color-mix(in srgb,var(--redline) 8%,transparent)}
  .sn-badge{border-color:var(--redline);background:var(--redline);color:var(--bg)}
  .sn-badge::before{content:"Failing"}
  .sn-card-body{color:var(--fg)}
}
/* Fallback when style queries are missing: the script mirrors --tone into data-tone. */
.sn-wrap[data-tone=warning] .sn-card{border-left-color:#e8a33d}
.sn-wrap[data-tone=warning] .sn-badge{border-color:#e8a33d;color:#b7791f}
.sn-wrap[data-tone=warning] .sn-badge::before{content:"Slow"}
.sn-wrap[data-tone=urgent] .sn-card{border-color:var(--redline);background:color-mix(in srgb,var(--redline) 8%,transparent)}
.sn-wrap[data-tone=urgent] .sn-badge{border-color:var(--redline);background:var(--redline);color:var(--bg)}
.sn-wrap[data-tone=urgent] .sn-badge::before{content:"Failing"}
@media (prefers-color-scheme:dark){@container sn-card style(--tone: warning){.sn-badge{color:#f0b45a}}.sn-wrap[data-tone=warning] .sn-badge{color:#f0b45a}}

/* 3. text-box */
.sn-trim-stage{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem;padding:1.25rem 1rem;background:color-mix(in srgb,var(--fg) 4%,transparent)}
.sn-pill{display:inline-flex;padding:8px 14px;border-radius:999px;background:var(--fg);color:var(--bg);font-weight:500}
.sn-pill-text,.sn-big-text{display:block;line-height:1.5}
.sn-big{display:inline-flex;font-size:3.25rem;font-weight:600;letter-spacing:-.02em;outline:1px dashed var(--redline);outline-offset:0}
.sn-big-text{background:color-mix(in srgb,var(--redline) 12%,transparent)}
.sn-trimmed .sn-pill-text,.sn-trimmed .sn-big-text{text-box:trim-both cap alphabetic}
@media (max-width:420px){.sn-big{font-size:2.5rem}}

/* 4. sibling-index() / sibling-count() */
.sn-sibs{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.sn-sibs li{margin:0;padding:.3rem .55rem;color:#111;
  width:calc(35% + 65% * sibling-index() / sibling-count());
  background:oklch(82% .1 calc(360deg * sibling-index() / sibling-count()));
  transition:opacity 260ms ease-out,translate 260ms ease-out;
  transition-delay:calc((sibling-index() - 1) * 40ms)}
.sn-sim .sn-sibs li{width:calc(35% + 65% * var(--i) / var(--n));background:oklch(82% .1 calc(360deg * var(--i) / var(--n)));transition-delay:calc((var(--i) - 1) * 40ms)}
.sn-sibs li.sn-in{opacity:0;translate:-12px 0;transition:none}
@media (prefers-reduced-motion:reduce){.sn-sibs li,.sn-sim .sn-sibs li{transition:none!important}}

/* 5. shape() */
.sn-range{display:flex;align-items:center;gap:.6rem;margin-bottom:.9rem}
.sn-range input{flex:1;min-width:0}
.sn-range output{min-width:3ch;font-variant-numeric:tabular-nums;color:var(--muted)}
.sn-shape-stage{padding:1rem;background:color-mix(in srgb,var(--fg) 4%,transparent)}
.sn-bubble{box-sizing:border-box;padding:.9rem 1rem calc(.9rem + 12px);background:var(--fg);color:var(--bg);
  clip-path:shape(from 12px 0, hline to calc(100% - 12px), arc to 100% 12px of 12px cw, vline to calc(100% - 24px), arc to calc(100% - 12px) calc(100% - 12px) of 12px cw, hline to calc(50% + 10px), line to 50% 100%, line to calc(50% - 10px) calc(100% - 12px), hline to 12px, arc to 0 calc(100% - 24px) of 12px cw, vline to 12px, arc to 12px 0 of 12px cw, close)}
.sn-shape-stage .sn-bubble{margin-inline:auto}
.sn-sim .sn-bubble{clip-path:none;border-radius:12px;padding-bottom:.9rem}

/* 6. command / commandfor */
.sn-target{display:grid;place-items:center;width:72px;height:72px;border:1px solid var(--rule);font-size:.8rem;color:var(--muted);transition:rotate 300ms cubic-bezier(.2,.8,.2,1)}
.sn-dialog{margin:auto;max-width:min(320px,calc(100vw - 2rem));padding:1rem;border:1px solid var(--rule);background:var(--bg);color:var(--fg)}
.sn-dialog p{margin:0 0 .75rem}
.sn-dialog::backdrop{background:rgba(0,0,0,.35)}
@media (prefers-reduced-motion:reduce){.sn-target{transition:none}}
.sn-range input{accent-color:var(--fg)}