/* ============================================================
   Hx — "GitHub for your health"  ·  design system
   white · mint green · ocean blue
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* brand */
  --blue-700:#1c648a; --blue-600:#2784AD; --blue-500:#3a9bc9; --blue-400:#6cb9d9;
  --blue-100:#d7ecf5; --blue-50:#eaf6fb;
  --green-700:#0b8563; --green-600:#1fa873; --green-500:#36cf90; --green-400:#5CDDA2;
  --green-200:#bdf0d6; --green-100:#dbf7e9; --green-50:#ecfbf3;
  --mint:#5CDDA2;

  /* ink / neutrals */
  --ink-900:#0d1b22; --ink-800:#16272f; --ink-700:#2f3f48; --ink-600:#475761;
  --ink-500:#677782; --ink-400:#8a99a3; --ink-300:#aeb9c0;
  --line:#e7edf0; --line-2:#eef3f5;
  --surface:#ffffff; --surface-2:#f6fafb; --surface-3:#f0f6f8;

  /* status */
  --danger-700:#b5271e; --danger-600:#d8453b; --danger-100:#fbded9; --danger-50:#fdeeec;
  --amber-600:#e0972b; --amber-100:#fbeccb;

  /* radii */
  --r-xs:7px; --r-sm:10px; --r:14px; --r-lg:18px; --r-xl:24px; --r-2xl:32px; --pill:999px;

  /* shadow */
  --sh-xs:0 1px 2px rgba(13,27,34,.05);
  --sh-sm:0 1px 2px rgba(13,27,34,.06), 0 1px 1px rgba(13,27,34,.04);
  --sh:0 6px 20px -8px rgba(13,27,34,.12), 0 2px 6px -2px rgba(13,27,34,.07);
  --sh-md:0 14px 34px -14px rgba(13,27,34,.18), 0 4px 10px -6px rgba(13,27,34,.08);
  --sh-lg:0 30px 70px -28px rgba(13,27,34,.30), 0 10px 26px -14px rgba(39,132,173,.16);
  --glow:0 30px 90px -30px rgba(39,132,173,.45);

  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--surface); color:var(--ink-700);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:16px; line-height:1.6; letter-spacing:-0.006em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ color:var(--ink-900); margin:0; line-height:1.1; letter-spacing:-0.025em; font-weight:800; }
p{ margin:0; }
::selection{ background:var(--green-200); color:var(--ink-900); }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px; }
.mono{ font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; }
.muted{ color:var(--ink-500); }
.center{ text-align:center; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:.78rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--blue-600);
}
.eyebrow.green{ color:var(--green-700); }
.gradient-text{ background:linear-gradient(100deg,var(--blue-600),var(--green-600)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-weight:600; font-size:.95rem; line-height:1; white-space:nowrap;
  padding:13px 20px; border-radius:var(--pill); border:1px solid transparent;
  transition:transform .15s var(--ease), box-shadow .2s var(--ease), background .2s, border-color .2s, color .2s;
  cursor:pointer; user-select:none;
}
.btn svg{ width:18px; height:18px; }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--blue-600); color:#fff; box-shadow:0 8px 22px -10px rgba(39,132,173,.7); }
.btn-primary:hover{ background:var(--blue-700); box-shadow:0 12px 26px -10px rgba(39,132,173,.75); transform:translateY(-1px); }
.btn-accent{ background:var(--green-500); color:#06321f; box-shadow:0 8px 22px -10px rgba(54,207,144,.7); }
.btn-accent:hover{ background:var(--green-400); transform:translateY(-1px); }
.btn-dark{ background:var(--ink-900); color:#fff; }
.btn-dark:hover{ background:var(--ink-800); transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--ink-800); border-color:var(--line); }
.btn-ghost:hover{ background:var(--surface-2); border-color:var(--ink-300); }
.btn-soft{ background:var(--blue-50); color:var(--blue-700); }
.btn-soft:hover{ background:var(--blue-100); }
.btn-sm{ padding:9px 14px; font-size:.86rem; }
.btn-lg{ padding:16px 26px; font-size:1.02rem; }
.btn-block{ width:100%; }

/* ---------- top nav (marketing) ---------- */
.nav{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.78); backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid transparent; transition:border-color .25s, box-shadow .25s; }
.nav.scrolled{ border-color:var(--line); box-shadow:var(--sh-xs); }
.nav-inner{ display:flex; align-items:center; gap:28px; height:70px; }
.brand{ display:inline-flex; align-items:center; gap:10px; font-weight:800; color:var(--ink-900); font-size:1.4rem; letter-spacing:-.04em; }
.brand img{ width:34px; height:34px; }
.nav-links{ display:flex; align-items:center; gap:30px; margin-inline:auto; }
.nav-links a{ font-size:.95rem; font-weight:500; color:var(--ink-600); transition:color .15s; }
.nav-links a:hover{ color:var(--ink-900); }
.nav-actions{ display:flex; align-items:center; gap:10px; }
.nav-actions .signin{ font-weight:600; color:var(--ink-700); padding:10px 12px; }
.nav-actions .signin:hover{ color:var(--ink-900); }

/* ---------- page backdrop ---------- */
.bg-aura{ position:fixed; inset:0; z-index:-2; background:
   radial-gradient(900px 520px at 82% -6%, rgba(54,207,144,.16), transparent 60%),
   radial-gradient(820px 560px at 6% 4%, rgba(39,132,173,.14), transparent 58%),
   #fff; }
.bg-dots{ position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.85;
  background-image:radial-gradient(circle, rgba(39,132,173,.10) 1px, transparent 1.7px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(130% 80% at 72% 0%, #000, transparent 72%);
  mask-image:radial-gradient(130% 80% at 72% 0%, #000, transparent 72%); }

/* ---------- hero ---------- */
.hero{ position:relative; padding-block:clamp(56px,8vw,104px) clamp(40px,6vw,72px); }
.hero-grid{ display:grid; grid-template-columns:1.04fr .96fr; gap:48px; align-items:center; }
.hero h1{ font-size:clamp(2.7rem,5.6vw,4.5rem); font-weight:900; letter-spacing:-.04em; line-height:1.02; color:var(--ink-900); }
.hero .lead{ margin-top:22px; font-size:clamp(1.08rem,1.5vw,1.28rem); color:var(--ink-600); max-width:35ch; }
.hero-cta{ margin-top:32px; display:flex; flex-wrap:wrap; gap:12px; }
.hero-trust{ margin-top:22px; display:flex; align-items:center; gap:9px; font-size:.84rem; color:var(--ink-500); }
.hero-trust .dot{ width:7px;height:7px;border-radius:50%; background:var(--green-500); box-shadow:0 0 0 4px var(--green-50); }

.hero-stage{ position:relative; min-height:440px; display:grid; place-items:center; }
.hero-stage .glow{ position:absolute; width:78%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(54,207,144,.30), rgba(39,132,173,.16) 45%, transparent 70%); filter:blur(8px); }
.hero-art{ position:relative; width:min(100%,520px); filter:drop-shadow(0 30px 60px rgba(39,132,173,.28)); animation:floaty 7s var(--ease) infinite; }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }

.vtag{ position:absolute; display:flex; align-items:center; gap:10px; padding:9px 13px; background:rgba(255,255,255,.92); backdrop-filter:blur(8px); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-md); font-size:.8rem; }
.vtag b{ display:block; color:var(--ink-900); font-size:.86rem; font-weight:700; letter-spacing:-.01em; }
.vtag span{ color:var(--ink-400); font-size:.72rem; }
.vtag .vdot{ width:9px;height:9px;border-radius:50%; flex:0 0 auto; }
.vtag.v1{ top:6%; right:-2%; } .vtag.v2{ top:40%; right:-6%; } .vtag.v3{ bottom:12%; left:-3%; }
.vtag.float{ animation:floaty 7s var(--ease) infinite; } .vtag.v2.float{ animation-delay:.6s; } .vtag.v3.float{ animation-delay:1.1s; }

/* ---------- generic section ---------- */
.section{ padding-block:clamp(64px,9vw,116px); }
.section-head{ max-width:680px; }
.section-head.center{ margin-inline:auto; }
.section-head h2{ font-size:clamp(1.9rem,3.6vw,2.85rem); font-weight:850; margin-top:14px; }
.section-head .lead{ margin-top:16px; font-size:1.12rem; color:var(--ink-600); }
.divider{ height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent); }

/* ---------- trust strip ---------- */
.strip{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 30px; color:var(--ink-400); font-weight:600; font-size:.92rem; }
.strip .lbl{ color:var(--ink-500); font-weight:600; font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; }
.strip .chip{ display:inline-flex; align-items:center; gap:8px; }

/* ---------- feature cards ---------- */
.features{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:52px; }
.feature{ position:relative; padding:30px 26px 28px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-sm); transition:transform .25s var(--ease), box-shadow .25s, border-color .25s; overflow:hidden; }
.feature::after{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--blue-500),var(--green-400)); opacity:0; transition:opacity .25s; }
.feature:hover{ transform:translateY(-5px); box-shadow:var(--sh-md); border-color:var(--blue-100); }
.feature:hover::after{ opacity:1; }
.feature .ico{ width:84px; height:84px; margin-bottom:8px; object-fit:contain; filter:drop-shadow(0 10px 18px rgba(39,132,173,.18)); }
.feature h3{ font-size:1.18rem; margin-top:10px; }
.feature p{ margin-top:9px; color:var(--ink-600); font-size:.97rem; }
.feature .cmd{ margin-top:16px; font-size:.8rem; color:var(--blue-700); background:var(--blue-50); border:1px solid var(--blue-100); padding:6px 10px; border-radius:var(--r-xs); display:inline-block; }

/* ---------- browser frame (product shot) ---------- */
.showcase{ position:relative; margin-top:48px; }
.browser{ border-radius:var(--r-lg); border:1px solid var(--line); background:#fff; box-shadow:var(--sh-lg); overflow:hidden; }
.browser-bar{ display:flex; align-items:center; gap:8px; padding:12px 16px; background:var(--surface-2); border-bottom:1px solid var(--line); }
.browser-bar .dots{ display:flex; gap:7px; }
.browser-bar .dots i{ width:12px;height:12px;border-radius:50%; display:block; }
.browser-bar .url{ margin-left:14px; flex:1; max-width:420px; background:#fff; border:1px solid var(--line); border-radius:var(--pill); padding:6px 14px; font-size:.8rem; color:var(--ink-500); display:flex; align-items:center; gap:8px; }
.browser-bar .url svg{ width:13px; height:13px; color:var(--green-600); }
.browser img{ width:100%; display:block; }
.showcase .float-badge{ position:absolute; bottom:-26px; right:-10px; display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:13px 16px; box-shadow:var(--sh-md); }
.showcase .float-badge img{ width:48px; height:40px; }
.showcase .float-badge b{ color:var(--ink-900); display:block; font-size:.9rem; } .showcase .float-badge span{ font-size:.78rem; color:var(--ink-500); }

/* ---------- safety highlight (the wow) ---------- */
.safety{ background:linear-gradient(180deg,var(--surface-2),#fff); border-block:1px solid var(--line); }
.safety-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:54px; align-items:center; }
.safety-emblem{ display:flex; align-items:center; gap:16px; }
.safety-emblem img{ width:88px; height:72px; }
.alert-card{ background:#fff; border:1px solid var(--danger-100); border-radius:var(--r-lg); box-shadow:var(--sh-md); overflow:hidden; }
.alert-top{ display:flex; gap:13px; padding:18px 20px; background:var(--danger-50); border-bottom:1px solid var(--danger-100); }
.alert-top .badge{ flex:0 0 auto; width:38px; height:38px; border-radius:10px; background:var(--danger-600); color:#fff; display:grid; place-items:center; box-shadow:0 6px 14px -6px rgba(216,69,59,.7); }
.alert-top h3{ color:var(--danger-700); font-size:1.06rem; }
.alert-top p{ color:var(--danger-600); font-size:.88rem; margin-top:2px; }
.alert-body{ padding:18px 20px; }
.med-rows{ display:flex; flex-direction:column; gap:10px; }
.med-row{ display:flex; align-items:center; gap:12px; padding:11px 13px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); }
.med-row .pill-dot{ width:30px;height:30px;border-radius:8px; display:grid; place-items:center; flex:0 0 auto; font-size:.95rem; }
.med-row b{ color:var(--ink-900); font-size:.95rem; }
.med-row .prov{ font-size:.78rem; color:var(--ink-500); }
.med-row .arm{ margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:.72rem; color:var(--ink-400); }
.alert-foot{ padding:14px 20px; border-top:1px dashed var(--line); display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--surface-2); }
.alert-foot .who{ font-size:.82rem; color:var(--ink-600); }

.checklist{ list-style:none; padding:0; margin:18px 0 0; display:flex; flex-direction:column; gap:13px; }
.checklist li{ display:flex; gap:12px; align-items:flex-start; font-size:1rem; color:var(--ink-700); }
.checklist li svg{ width:22px; height:22px; flex:0 0 auto; color:var(--green-600); margin-top:1px; }

/* ---------- interfaces ---------- */
.iface{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:52px; }
.iface-card{ display:flex; flex-direction:column; padding:28px 24px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-sm); transition:transform .25s var(--ease), box-shadow .25s; }
.iface-card:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); }
.iface-card .tag{ font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--green-700); }
.iface-card h3{ margin-top:8px; font-size:1.22rem; }
.iface-card p{ margin-top:8px; color:var(--ink-600); font-size:.95rem; }
.iface-card .body{ margin-top:18px; flex:1; display:flex; align-items:flex-end; }

/* terminal */
.terminal{ width:100%; border-radius:var(--r); overflow:hidden; border:1px solid #16323e; box-shadow:var(--sh-md); background:#0c1a21; }
.term-bar{ display:flex; align-items:center; gap:7px; padding:10px 13px; background:#0a161c; border-bottom:1px solid #16323e; }
.term-bar i{ width:11px; height:11px; border-radius:50%; display:block; }
.term-bar .t{ margin-left:8px; color:#5f7682; font-size:.74rem; font-family:'JetBrains Mono',monospace; }
.term-body{ padding:15px 16px; font-family:'JetBrains Mono',monospace; font-size:.78rem; line-height:1.7; color:#cfe8df; overflow-x:auto; white-space:pre; }
.term-body .pr{ color:var(--green-400); } .term-body .cm{ color:#7fb5d6; } .term-body .mut{ color:#5f7682; } .term-body .ok{ color:var(--green-400); } .term-body .warn{ color:#ffcf7a; }

.phone-ui{ width:100%; border-radius:var(--r); border:1px solid var(--line); background:linear-gradient(180deg,var(--green-50),#fff); padding:16px; box-shadow:var(--sh-sm); }
.phone-ui .bubble{ background:#fff; border:1px solid var(--line); border-radius:14px 14px 14px 4px; padding:10px 13px; font-size:.85rem; color:var(--ink-700); margin-bottom:9px; max-width:88%; }
.phone-ui .bubble.me{ margin-left:auto; border-radius:14px 14px 4px 14px; background:var(--blue-600); color:#fff; border-color:var(--blue-600); }
.phone-ui .lang{ font-size:.72rem; color:var(--green-700); display:flex; align-items:center; gap:6px; }

.app-peek{ width:100%; border:1px solid var(--line); border-radius:var(--r); background:#fff; box-shadow:var(--sh-sm); padding:14px; }
.app-peek .vrow{ display:flex; gap:11px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line-2); }
.app-peek .vrow:last-child{ border-bottom:0; }
.app-peek .vrow .av{ width:30px; height:30px; border-radius:50%; flex:0 0 auto; }
.app-peek .vrow b{ font-size:.84rem; color:var(--ink-900); display:block; } .app-peek .vrow span{ font-size:.74rem; color:var(--ink-500); }

/* ---------- CTA band ---------- */
.cta-band{ position:relative; overflow:hidden; border-radius:var(--r-2xl); padding:clamp(40px,6vw,72px); background:linear-gradient(120deg,var(--blue-600),var(--green-600)); color:#fff; box-shadow:var(--sh-lg); }
.cta-band::before{ content:""; position:absolute; inset:0; background-image:radial-gradient(circle, rgba(255,255,255,.22) 1.2px, transparent 1.8px); background-size:22px 22px; opacity:.55; }
.cta-band > *{ position:relative; }
.cta-band h2{ color:#fff; font-size:clamp(2rem,4vw,3rem); font-weight:900; letter-spacing:-.03em; max-width:18ch; }
.cta-band p{ margin-top:14px; color:rgba(255,255,255,.9); font-size:1.1rem; max-width:46ch; }
.cta-form{ margin-top:28px; display:flex; gap:10px; flex-wrap:wrap; }
.cta-form input{ flex:1; min-width:240px; border:0; border-radius:var(--pill); padding:15px 20px; font-size:1rem; background:rgba(255,255,255,.95); color:var(--ink-800); box-shadow:var(--sh-sm); }
.cta-form input::placeholder{ color:var(--ink-400); }

/* ---------- footer ---------- */
.footer{ border-top:1px solid var(--line); background:var(--surface-2); padding-block:56px 34px; }
.footer-grid{ display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:32px; }
.footer .brand{ font-size:1.25rem; }
.footer .blurb{ margin-top:14px; color:var(--ink-500); font-size:.9rem; max-width:30ch; }
.footer h5{ color:var(--ink-900); font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; font-weight:700; margin:0 0 14px; }
.footer ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.footer ul a{ color:var(--ink-600); font-size:.92rem; } .footer ul a:hover{ color:var(--ink-900); }
.footer-bot{ margin-top:40px; padding-top:22px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; font-size:.84rem; color:var(--ink-500); }
.footer-bot .synth{ display:inline-flex; align-items:center; gap:8px; color:var(--green-700); font-weight:600; }

/* ============================================================
   APP — health record rendered as a repository
   ============================================================ */
.appbar{ position:sticky; top:0; z-index:40; background:#fff; border-bottom:1px solid var(--line); }
.appbar-inner{ display:flex; align-items:center; gap:16px; height:64px; max-width:1280px; margin-inline:auto; padding-inline:22px; }
.app-search{ flex:1; max-width:480px; display:flex; align-items:center; gap:9px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:9px 13px; color:var(--ink-400); font-size:.9rem; transition:border-color .15s, background .15s; }
.app-search:focus-within{ background:#fff; border-color:var(--blue-400); box-shadow:0 0 0 3px var(--blue-50); }
.app-search input{ border:0; outline:0; background:transparent; flex:1; font-size:.9rem; color:var(--ink-800); }
.app-search kbd{ font-family:'JetBrains Mono',monospace; font-size:.72rem; border:1px solid var(--line); border-radius:6px; padding:2px 6px; color:var(--ink-400); background:#fff; }
.app-actions{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.icon-btn{ width:38px; height:38px; border-radius:var(--r-sm); border:1px solid var(--line); background:#fff; display:grid; place-items:center; color:var(--ink-600); position:relative; transition:background .15s,border-color .15s,color .15s; }
.icon-btn:hover{ background:var(--surface-2); color:var(--ink-900); }
.icon-btn .ndot{ position:absolute; top:-3px; right:-3px; width:16px; height:16px; border-radius:50%; background:var(--danger-600); color:#fff; font-size:.62rem; font-weight:700; display:grid; place-items:center; border:2px solid #fff; }

/* avatars */
.av{ border-radius:50%; object-fit:cover; background:var(--surface-3); flex:0 0 auto; }
.av-mono{ border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:700; flex:0 0 auto; letter-spacing:-.02em; }
.av-ring{ box-shadow:0 0 0 2px #fff, 0 0 0 3px var(--line); }

/* repo header */
.repo-shell{ max-width:1280px; margin-inline:auto; padding-inline:22px; }
.repo-header{ padding-top:22px; }
.repo-titlebar{ display:flex; align-items:center; flex-wrap:wrap; gap:14px; }
.repo-path{ display:flex; align-items:center; gap:10px; font-size:1.5rem; letter-spacing:-.02em; }
.repo-path .lock{ width:30px; height:30px; border-radius:9px; background:var(--green-50); color:var(--green-700); display:grid; place-items:center; }
.repo-path .owner{ color:var(--blue-600); font-weight:600; }
.repo-path .slash{ color:var(--ink-300); font-weight:400; }
.repo-path .name{ color:var(--blue-600); font-weight:800; }
.vis-pill{ font-size:.74rem; font-weight:600; color:var(--green-700); border:1px solid var(--green-200); background:var(--green-50); border-radius:var(--pill); padding:4px 11px; }
.repo-actions{ margin-left:auto; display:flex; gap:9px; }
.gh-btn{ display:inline-flex; align-items:stretch; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; background:#fff; box-shadow:var(--sh-xs); font-size:.85rem; font-weight:600; color:var(--ink-700); transition:border-color .15s; }
.gh-btn:hover{ border-color:var(--ink-300); }
.gh-btn .lab{ display:inline-flex; align-items:center; gap:7px; padding:8px 12px; }
.gh-btn .lab svg{ width:16px; height:16px; color:var(--ink-500); }
.gh-btn .cnt{ padding:8px 11px; border-left:1px solid var(--line); background:var(--surface-2); color:var(--ink-600); font-variant-numeric:tabular-nums; }
.gh-btn.accent .lab{ color:var(--green-700); } .gh-btn.accent .lab svg{ color:var(--green-600); }

/* repo tabs */
.repo-tabs{ display:flex; gap:4px; margin-top:20px; border-bottom:1px solid var(--line); overflow-x:auto; }
.repo-tabs a{ position:relative; display:inline-flex; align-items:center; gap:8px; padding:11px 14px; font-size:.92rem; font-weight:500; color:var(--ink-600); border-bottom:2px solid transparent; white-space:nowrap; transition:color .15s; }
.repo-tabs a svg{ width:17px; height:17px; color:var(--ink-400); }
.repo-tabs a:hover{ color:var(--ink-900); }
.repo-tabs a.active{ color:var(--ink-900); font-weight:600; border-bottom-color:var(--green-500); }
.repo-tabs a.active svg{ color:var(--blue-600); }
.repo-tabs .tabnum{ font-size:.72rem; background:var(--surface-3); color:var(--ink-600); border-radius:var(--pill); padding:1px 8px; font-weight:600; }
.repo-tabs a.danger .tabnum{ background:var(--danger-600); color:#fff; }

/* safety banner */
.repo-banner{ display:flex; align-items:center; gap:14px; margin-top:22px; padding:14px 18px; background:var(--danger-50); border:1px solid var(--danger-100); border-left:4px solid var(--danger-600); border-radius:var(--r); }
.repo-banner .ico{ width:34px; height:34px; border-radius:9px; background:var(--danger-600); color:#fff; display:grid; place-items:center; flex:0 0 auto; }
.repo-banner b{ color:var(--danger-700); }
.repo-banner p{ color:var(--danger-600); font-size:.9rem; }
.repo-banner a{ margin-left:auto; color:var(--danger-700); font-weight:700; font-size:.88rem; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }

/* layout */
.repo-layout{ display:grid; grid-template-columns:1fr 308px; gap:26px; margin-top:22px; padding-bottom:60px; }

/* subbar */
.repo-subbar{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.branch-btn{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); background:#fff; border-radius:var(--r-sm); padding:8px 13px; font-size:.86rem; font-weight:600; color:var(--ink-800); }
.branch-btn svg{ width:16px; height:16px; color:var(--ink-500); }
.repo-subbar .commits{ font-size:.86rem; color:var(--ink-500); display:inline-flex; align-items:center; gap:7px; }
.repo-subbar .commits b{ color:var(--ink-800); }
.repo-subbar .right{ margin-left:auto; display:flex; gap:9px; }

/* file list */
.filelist{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:#fff; }
.filelist .fl-head{ display:flex; align-items:center; gap:12px; padding:11px 16px; background:var(--surface-2); border-bottom:1px solid var(--line); font-size:.84rem; }
.filelist .fl-head .av{ width:22px; height:22px; }
.filelist .fl-head b{ color:var(--ink-800); } .filelist .fl-head span{ color:var(--ink-500); }
.filelist .fl-head .age{ margin-left:auto; color:var(--ink-400); }
.file-row{ display:flex; align-items:center; gap:13px; padding:12px 16px; border-bottom:1px solid var(--line-2); transition:background .12s; }
.file-row:last-child{ border-bottom:0; }
.file-row:hover{ background:var(--blue-50); }
.file-row .fico{ width:18px; height:18px; flex:0 0 auto; color:var(--ink-400); }
.file-row .fico.folder{ color:var(--blue-500); }
.file-row .fname{ font-size:.94rem; color:var(--ink-800); font-weight:500; }
.file-row:hover .fname{ color:var(--blue-700); }
.file-row .fmsg{ margin-left:18px; font-size:.86rem; color:var(--ink-500); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-row .fmsg .hash{ font-family:'JetBrains Mono',monospace; font-size:.78rem; color:var(--ink-400); }
.file-row .fage{ font-size:.84rem; color:var(--ink-400); white-space:nowrap; }

/* readme */
.readme{ margin-top:24px; border:1px solid var(--line); border-radius:var(--r); background:#fff; }
.readme-head{ display:flex; align-items:center; gap:10px; padding:12px 18px; border-bottom:1px solid var(--line); font-size:.86rem; font-weight:600; color:var(--ink-700); position:sticky; }
.readme-head svg{ width:16px; height:16px; color:var(--ink-500); }
.readme-body{ padding:26px 26px 30px; }
.readme-body h2{ font-size:1.5rem; display:flex; align-items:center; gap:12px; }
.readme-body h2 .em{ width:50px; height:42px; }
.readme-body .summary{ margin-top:14px; font-size:1.05rem; color:var(--ink-700); max-width:62ch; }
.readme-body h4{ color:var(--ink-800); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; margin:26px 0 12px; font-weight:700; }
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.stat{ border:1px solid var(--line); border-radius:var(--r-sm); padding:14px; background:var(--surface-2); }
.stat .n{ font-size:1.5rem; font-weight:800; color:var(--ink-900); letter-spacing:-.02em; }
.stat .l{ font-size:.78rem; color:var(--ink-500); margin-top:2px; }

/* activity heatmap */
.activity{ margin-top:24px; border:1px solid var(--line); border-radius:var(--r); background:#fff; padding:18px 20px 16px; }
.activity .ah-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; }
.activity h4{ font-size:.98rem; color:var(--ink-900); font-weight:700; }
.activity .ah-head .sub{ font-size:.82rem; color:var(--ink-500); }
.cal{ display:flex; gap:8px; }
.cal-days{ display:grid; grid-template-rows:repeat(7,13px); gap:3px; font-size:.64rem; color:var(--ink-400); padding-top:18px; }
.cal-days span{ line-height:13px; }
.cal-main{ flex:1; overflow-x:auto; }
.cal-months{ display:flex; font-size:.7rem; color:var(--ink-400); margin-bottom:5px; }
.heatmap{ display:grid; grid-auto-flow:column; grid-template-rows:repeat(7,13px); gap:3px; }
.sq{ width:13px; height:13px; border-radius:3px; background:var(--surface-3); }
.sq.l1{ background:var(--green-100); } .sq.l2{ background:var(--green-200); } .sq.l3{ background:var(--green-400); } .sq.l4{ background:var(--green-600); }
.cal-legend{ display:flex; align-items:center; gap:6px; justify-content:flex-end; margin-top:12px; font-size:.74rem; color:var(--ink-400); }
.cal-legend .sq{ width:11px; height:11px; }

/* sidebar */
.side-block{ padding-bottom:22px; margin-bottom:22px; border-bottom:1px solid var(--line); }
.side-block:last-child{ border-bottom:0; }
.side-title{ display:flex; align-items:center; justify-content:space-between; font-size:.96rem; font-weight:700; color:var(--ink-900); margin-bottom:12px; }
.side-title a{ font-size:.8rem; font-weight:600; color:var(--blue-600); }
.side-block .desc{ font-size:.92rem; color:var(--ink-600); }
.about-list{ list-style:none; padding:0; margin:14px 0 0; display:flex; flex-direction:column; gap:11px; }
.about-list li{ display:flex; align-items:center; gap:10px; font-size:.88rem; color:var(--ink-700); }
.about-list li svg{ width:16px; height:16px; color:var(--ink-400); flex:0 0 auto; }
.topics{ display:flex; flex-wrap:wrap; gap:8px; }
.topic{ display:inline-flex; align-items:center; gap:7px; font-size:.82rem; font-weight:600; color:var(--green-700); background:var(--green-50); border:1px solid var(--green-200); border-radius:var(--pill); padding:5px 12px; }
.topic .d{ width:8px; height:8px; border-radius:50%; }
.team-row{ display:flex; align-items:center; gap:11px; padding:8px 0; }
.team-row .av,.team-row .av-mono{ width:38px; height:38px; }
.team-row b{ font-size:.88rem; color:var(--ink-900); display:block; }
.team-row span{ font-size:.78rem; color:var(--ink-500); }
.meds-line{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line-2); font-size:.88rem; }
.meds-line:last-child{ border-bottom:0; }
.meds-line .md{ width:9px; height:9px; border-radius:50%; background:var(--green-500); flex:0 0 auto; }
.meds-line .md.flag{ background:var(--danger-600); }
.meds-line b{ color:var(--ink-900); } .meds-line .dose{ color:var(--ink-500); font-weight:500; }
.meds-line .by{ margin-left:auto; font-size:.74rem; color:var(--ink-400); }

.app-foot{ border-top:1px solid var(--line); background:var(--surface-2); padding:22px; text-align:center; font-size:.82rem; color:var(--ink-500); }
.app-foot .synth{ color:var(--green-700); font-weight:600; }

/* back link */
.backlink{ display:inline-flex; align-items:center; gap:7px; color:var(--blue-600); font-weight:600; font-size:.9rem; margin-top:20px; }
.backlink:hover{ color:var(--blue-700); }

/* prose for safety page */
.prose-card{ border:1px solid var(--line); border-radius:var(--r); background:#fff; padding:24px; box-shadow:var(--sh-sm); }
.prose-card + .prose-card{ margin-top:18px; }
.prose-card h3{ font-size:1.1rem; display:flex; align-items:center; gap:10px; }
.prose-card .say{ margin-top:14px; background:var(--blue-50); border:1px solid var(--blue-100); border-radius:var(--r-sm); padding:14px 16px; color:var(--blue-700); font-style:italic; }
.prose-card .say .k{ font-style:normal; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:var(--blue-600); display:block; margin-bottom:6px; }

/* blame graph */
.blamewrap{ display:grid; grid-template-columns:1fr; gap:0; }
.blame-row{ display:grid; grid-template-columns:130px 1fr; gap:16px; align-items:center; padding:14px 0; position:relative; }
.blame-row .when{ font-family:'JetBrains Mono',monospace; font-size:.78rem; color:var(--ink-500); text-align:right; }
.blame-node{ position:relative; padding-left:30px; }
.blame-node::before{ content:""; position:absolute; left:9px; top:-22px; bottom:-22px; width:2px; background:var(--line); }
.blame-row:first-child .blame-node::before{ top:50%; }
.blame-row:last-child .blame-node::before{ bottom:50%; }
.blame-node .nd{ position:absolute; left:2px; top:50%; transform:translateY(-50%); width:16px; height:16px; border-radius:50%; border:3px solid #fff; box-shadow:0 0 0 1.5px var(--blue-400); background:var(--blue-500); }
.blame-node.green .nd{ background:var(--green-500); box-shadow:0 0 0 1.5px var(--green-400); }
.blame-node.danger .nd{ background:var(--danger-600); box-shadow:0 0 0 1.5px var(--danger-100); }
.blame-node b{ color:var(--ink-900); font-size:.95rem; } .blame-node span{ display:block; font-size:.8rem; color:var(--ink-500); }

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .repo-layout{ grid-template-columns:1fr; }
  .repo-layout .sidebar{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 28px; margin-top:10px; }
  .side-block{ border-bottom:1px solid var(--line); }
}
@media (max-width:920px){
  .hero-grid{ grid-template-columns:1fr; gap:14px; }
  .hero-stage{ min-height:340px; order:-1; }
  .safety-grid{ grid-template-columns:1fr; gap:32px; }
  .features,.iface{ grid-template-columns:1fr; }
  .nav-links{ display:none; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:28px; }
  .stat-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:620px){
  .wrap,.appbar-inner,.repo-shell{ padding-inline:16px; }
  .app-search{ display:none; }
  .repo-actions{ width:100%; } .gh-btn{ flex:1; } .gh-btn .lab{ flex:1; justify-content:center; }
  .repo-banner{ flex-wrap:wrap; align-items:flex-start; }
  .repo-banner a{ margin-left:46px; }
  .repo-layout .sidebar{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .stat-grid{ grid-template-columns:repeat(2,1fr); }
  .hero-cta .btn{ flex:1; }
}

/* ---------- coming soon ---------- */
.soon{ position:relative; pointer-events:none !important; user-select:none; isolation:isolate; }
.soon::after{
  content:"Coming soon";
  position:absolute; inset:0; z-index:3;
  display:grid; place-items:center;
  font-family:'Inter',system-ui,sans-serif;
  font-size:.64rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-700);
  background:rgba(247,251,253,.5);
  -webkit-backdrop-filter:blur(2.6px) saturate(.9);
  backdrop-filter:blur(2.6px) saturate(.9);
  border-radius:inherit; white-space:nowrap;
}
.soon.mini::after{ content:"Soon"; font-size:.56rem; -webkit-backdrop-filter:blur(2px) saturate(.9); backdrop-filter:blur(2px) saturate(.9); }
.soon.on-dark::after{ color:#fff; background:rgba(12,26,33,.42); }
.soon-tag{ display:inline-block; margin-left:8px; font-size:.58rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--blue-700); background:var(--blue-50); border:1px solid var(--blue-100); border-radius:var(--pill); padding:1px 8px; vertical-align:middle; }
.soon-col ul{ pointer-events:none; opacity:.5; filter:blur(.6px); }