/* arq-kit: shared look for every arquestra.dev tool. Inherits the simulator: paper and ink,
   Hanken Grotesk light, IBM Plex Mono labels, blue for the active state, coral for the one call to action. */
:root{--paper:#F2F3F0;--card:#FFFFFF;--ink:#0F1214;--muted:#5B6166;--line:#0F1214;--soft:#D9DBD6;--blue:#1B36C4;--blue-soft:#E2E6FA;--coral:#E8775A;
  --shadow:0 6px 0 -2px rgba(15,18,20,.18);--sans:'Hanken Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;--mono:'IBM Plex Mono',ui-monospace,Consolas,monospace}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#0F1214;--card:#171B1E;--ink:#F2F3F0;--muted:#A3A9AD;--line:#F2F3F0;--soft:#2C3236;--blue:#9DAAF2;--blue-soft:#1F2647;--coral:#E8775A;--shadow:0 6px 0 -2px rgba(0,0,0,.6);color-scheme:dark}}
:root[data-theme="dark"]{--paper:#0F1214;--card:#171B1E;--ink:#F2F3F0;--muted:#A3A9AD;--line:#F2F3F0;--soft:#2C3236;--blue:#9DAAF2;--blue-soft:#1F2647;--coral:#E8775A;--shadow:0 6px 0 -2px rgba(0,0,0,.6);color-scheme:dark}
.arq{background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:300;min-height:100%}
.arq *{box-sizing:border-box}
.arq-mono{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.arq-wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:28px 56px}
.arq-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.arq-top a{text-decoration:none;color:var(--muted)}.arq-top a:hover{color:var(--blue)}
.arq-h1{font-weight:200;font-size:clamp(2rem,5vw,3.6rem);line-height:1.04;letter-spacing:-.03em;margin:18px 0 0;text-wrap:balance}
.arq-lede{color:var(--muted);font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.5;max-width:60ch;margin:14px 0 0}
.arq-bar{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:28px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:sticky;top:env(safe-area-inset-top,0px);background:var(--paper);z-index:3}
.arq-ctl{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.arq-ctl>.arq-mono{color:var(--muted);margin-right:4px}
.arq-chip{font:400 13px var(--sans);border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:999px;padding:5px 12px;cursor:pointer}
.arq-chip[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:var(--paper)}
.arq-chip:focus-visible,.arq-row:focus-visible{outline:2px dashed var(--blue);outline-offset:3px}
.arq-search{font:400 13px var(--sans);border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:999px;padding:5px 12px;min-width:0;flex:1 1 180px}
.arq-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px;margin-top:24px;align-items:start}
@media (max-width:860px){.arq-grid{grid-template-columns:minmax(0,1fr)}}
.arq-card{background:var(--card);border:1px solid var(--line);border-radius:6px;box-shadow:var(--shadow);padding:18px}
.arq-count{color:var(--muted);margin-bottom:10px}
.arq-row{display:grid;grid-template-columns:minmax(110px,32%) 1fr 3.2em;gap:10px;align-items:center;padding:5px 0;cursor:pointer;border-radius:4px}
.arq-row:hover .arq-fill{background:var(--blue)}
.arq-row .lab{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.arq-track{height:14px;background:var(--soft);border-radius:2px;overflow:hidden}
.arq-fill{height:100%;background:var(--ink);transition:width .5s cubic-bezier(.2,.7,.2,1)}
.arq-row.on .arq-fill{background:var(--blue)}
.arq-row .n{font:500 13px var(--mono);font-variant-numeric:tabular-nums;text-align:right}
.arq-items{margin-top:16px;border-top:1px solid var(--soft);max-height:300px;overflow:auto}
.arq-item{display:grid;grid-template-columns:1fr auto;gap:8px;padding:7px 0;border-bottom:1px solid var(--soft);font-size:13px}
.arq-item .m{color:var(--muted);font-family:var(--mono);font-size:11px}
.arq-side{display:grid;gap:14px}
.arq-side h2{font-weight:400;font-size:15px;margin:0}
.arq-rule{animation:arqrise .6s cubic-bezier(.2,.7,.2,1) both}
.arq-rule .live{font:500 clamp(28px,4vw,40px) var(--mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}
.arq-rule .live small{font-size:12px;color:var(--muted);letter-spacing:.06em;margin-left:6px}
.arq-rule .txt{font-size:17px;line-height:1.4;margin:10px 0 0}
.arq-rule .who{margin-top:10px;color:var(--muted)}
.arq-rule .src{margin-top:8px;font-size:13px;color:var(--muted)}
.arq-rule .src a{color:inherit;text-underline-offset:2px}
.arq-tag{display:inline-block;padding:2px 6px;border:1px solid currentColor;border-radius:3px}
.arq-hint{color:var(--muted);font-size:14px;line-height:1.5}
.arq-sources{margin-top:32px;border-top:1px solid var(--line);padding-top:14px}
.arq-sources ol{padding-left:20px;color:var(--muted);font-size:14px;line-height:1.6}
.arq-sources a{color:inherit;text-underline-offset:2px}
.arq-cta{display:inline-block;margin-top:14px;padding:10px 14px;background:var(--coral);color:#0F1214;text-decoration:none;border-radius:4px;font-weight:400}
@keyframes arqrise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.arq-rule{animation:none}.arq-fill{transition:none}}
.arq-dots{display:grid;grid-template-columns:repeat(20,1fr);gap:3px;margin-top:12px;max-width:260px}
.arq-dots i{aspect-ratio:1;border-radius:50%;border:1px solid var(--muted);max-width:100%}
.arq-dots i.on{background:var(--blue);border-color:var(--blue);animation:arqdot .35s ease-out both}
@keyframes arqdot{from{transform:scale(.2);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.arq-dots i.on{animation:none}}