/* runnn.ing gym demo: shared design tokens and components
   Dark-only by design: black canvas, white type, electric cobalt accent.
   Display: Syne 700/900 uppercase · Labels: monospace uppercase with an accent index number · Body: Inter */
@import url("https://fonts.googleapis.com/css2?family=Syne:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root{
  color-scheme:dark;
  --bg:#000000;            /* --w-background */
  --card:#0f0f0f;          /* --w-card 0 0% 6% */
  --card-2:#161616;
  --muted:#262626;         /* --w-muted 0 0% 15% */
  --border:#2e2e2e;        /* --w-border 0 0% 18% */
  --fg:#ffffff;            /* --w-foreground */
  --fg-2:rgba(255,255,255,.8);
  --muted-fg:#9e9e9e;      /* --w-muted-foreground 0 0% 62% */
  --faint:rgba(255,255,255,.05);
  --accent:#3d7bff;        /* Electric cobalt */
  --accent-hover:#2a5fd6;
  --accent-soft:rgba(61,123,255,.16);
  --accent-line:rgba(61,123,255,.35);
  --accent-light:#8fb0ff;
  --ok:#3ccf7a; --warn:#ffc107; --bad:#ff4d4f;
  --ok-soft:rgba(60,207,122,.14); --warn-soft:rgba(255,193,7,.14); --bad-soft:rgba(255,77,79,.14);
  --f-display:"Syne","Arial Black",Arial,sans-serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease-expo:cubic-bezier(.19,1,.22,1);
  --ease-smooth:cubic-bezier(.25,.1,.25,1);
  --radius-pill:999px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:var(--fg);background:var(--card);border:1px solid var(--border);padding:12px 14px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
img{max-width:100%}

/* Type */
.display{font-family:var(--f-display);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:.95}
.h1{font-family:var(--f-display);font-weight:800;font-size:clamp(2.6rem,7vw,5.2rem);letter-spacing:-.02em;line-height:.95;text-transform:uppercase;text-wrap:balance}
.h2{font-family:var(--f-display);font-weight:700;font-size:clamp(1.8rem,4vw,2.6rem);letter-spacing:-.02em;line-height:1;text-wrap:balance}
.h3{font-family:var(--f-display);font-weight:700;font-size:1.35rem;line-height:1.15}
.mono{font-family:var(--f-mono)}
.muted{color:var(--muted-fg)}
.num{font-variant-numeric:tabular-nums}

/* Kicker: "01  OUR NETWORK" */
.kicker{display:inline-flex;gap:.75rem;align-items:baseline;font-family:var(--f-mono);font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted-fg)}
.kicker b{font-weight:400;color:var(--accent);letter-spacing:0}

/* Buttons: pill, white primary, outline secondary, arrow circle */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.75rem;padding:.9rem 1.6rem;border-radius:var(--radius-pill);font-weight:600;font-size:.92rem;transition:transform .2s var(--ease-smooth),background .2s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--fg);color:var(--bg)}
.btn-accent{background:var(--accent);color:#000}
.btn-accent:hover{background:var(--accent-light)}
.btn-outline{border:1px solid rgba(255,255,255,.2);color:var(--fg)}
.btn-outline:hover{border-color:var(--fg)}
.btn-sm{padding:.5rem 1rem;font-size:.82rem}
.arrow{width:1.5rem;height:1.5rem;border-radius:999px;display:inline-grid;place-items:center;background:rgba(0,0,0,.12);color:var(--accent);transition:transform .3s var(--ease-expo);font-size:.9rem}
.btn-outline .arrow{background:var(--accent-soft)}
.btn:hover .arrow{transform:rotate(45deg)}

/* Surfaces */
.card{background:var(--card);border:1px solid var(--border);position:relative}
.card-pad{padding:24px}
.ghost-num{position:absolute;top:.6rem;right:1rem;font-family:var(--f-display);font-weight:700;font-size:3.5rem;line-height:1;color:var(--faint);pointer-events:none}
.idx{position:absolute;top:1rem;right:1.25rem;font-family:var(--f-mono);font-size:.72rem;color:rgba(255,255,255,.35)}
.tag{display:inline-block;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent-line);padding:.2rem .65rem}
.chip{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;padding:.3rem .8rem;border:1px solid var(--border);border-radius:var(--radius-pill);color:var(--fg-2);white-space:nowrap}
.chip.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.pill-ok,.pill-warn,.pill-bad,.pill-neutral{display:inline-block;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;padding:.18rem .55rem;border-radius:var(--radius-pill)}
.pill-ok{background:var(--ok-soft);color:var(--ok)} .pill-warn{background:var(--warn-soft);color:var(--warn)} .pill-bad{background:var(--bad-soft);color:var(--bad)} .pill-neutral{background:var(--muted);color:var(--fg-2)}
.divider{height:1px;background:var(--border)}

/* Grid-line backdrop  */
.gridlines{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(to right,rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.05) 1px,transparent 1px);background-size:16.66% 12.5%;mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%)}

/* Concept banner: required on every page */
.concept-bar{position:sticky;top:0;z-index:100;display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap;align-items:center;padding:6px 16px;background:var(--accent);color:#000;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;text-align:center}
.concept-bar a{text-decoration:underline}

/* Toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);opacity:0;background:var(--fg);color:var(--bg);padding:.7rem 1.2rem;border-radius:var(--radius-pill);font-size:.85rem;font-weight:600;transition:all .35s var(--ease-expo);z-index:200;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Logo */
.logo{font-family:var(--f-display);font-weight:800;letter-spacing:-.03em;font-size:1.5rem;display:inline-flex;align-items:baseline;gap:.15rem}
.logo i{font-style:normal;color:var(--accent)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Concept bar: compact single line on phones */
@media (max-width:640px){
  .concept-bar{font-size:.6rem;letter-spacing:.06em;padding:5px 12px;gap:.4rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
}