/* SpaceSift design language: the platform strip, mode banner and result components shared by every page.
   Two fonts (Syncopate for labels, Comfortaa for everything else) and one palette. */
:root {
  --ss-bg:#04060d; --ss-panel:#0b1020; --ss-card:#10162a; --ss-ink:#eef2fc; --ss-body:#c9d0e4; --ss-dim:#7f88a6;
  --ss-line:rgba(140,160,220,.16); --ss-acc:#7aa2ff;
  --ss-exp:#7aa2ff; --ss-live:#4ade80; --ss-report:#b79cff; --ss-warn:#fbbf24;
  --ss-title:"Syncopate",ui-sans-serif,sans-serif; --ss-sub:"Comfortaa",ui-sans-serif,system-ui,sans-serif;
}

/* ---------------------------------------------------------------- platform strip */
.ss-strip { position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:18px; padding:9px clamp(14px,3vw,28px);
            background:rgba(4,6,13,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--ss-line);
            font:13px/1.2 var(--ss-sub); }
.ss-strip a { color:var(--ss-body); text-decoration:none; }
.ss-strip .ss-brand { display:flex; align-items:center; gap:9px; white-space:nowrap; }
.ss-strip .ss-brand b { font:700 11.5px var(--ss-title); letter-spacing:.18em; color:var(--ss-ink); }
.ss-strip .ss-brand span { color:var(--ss-dim); font-size:12px; }
.ss-strip nav { margin-left:auto; display:flex; align-items:center; gap:4px; }
.ss-strip nav a { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; white-space:nowrap; }
.ss-strip nav a i { font-style:normal; color:var(--ss-dim); font-size:11px; }
.ss-strip nav a:hover { color:var(--ss-ink); background:rgba(122,162,255,.1); }
.ss-strip nav a.on { color:var(--ss-ink); background:rgba(122,162,255,.16); }
.ss-strip nav .ss-live-dot { width:7px; height:7px; border-radius:50%; background:var(--ss-live); box-shadow:0 0 8px var(--ss-live); }
.ss-strip nav .ss-sep { width:1px; height:18px; background:var(--ss-line); margin:0 6px; }
.ss-strip nav a.ev { border:1px solid rgba(183,156,255,.5); color:var(--ss-ink); }
.ss-strip nav a.ev.on { background:var(--ss-report); color:var(--ss-bg); border-color:var(--ss-report); }
@media (max-width:980px) { .ss-strip .ss-brand span { display:none; } }
@media (max-width:760px) { .ss-strip nav a .t { display:none; } .ss-strip nav a i { font-size:12px; color:inherit; } .ss-strip { gap:8px; } .ss-strip nav .ss-sep { margin:0 2px; } }
@media (max-width:380px) { .ss-strip .ss-brand b { display:none; } }

/* ---------------------------------------------------------------- mode banner: what kind of page this is */
.ss-mode { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; padding:10px clamp(14px,3vw,28px);
           border-bottom:1px solid var(--ss-line); background:linear-gradient(90deg, rgba(122,162,255,.07), transparent 70%);
           font:13.5px/1.5 var(--ss-sub); color:var(--ss-body); }
.ss-mode.live { background:linear-gradient(90deg, rgba(74,222,128,.08), transparent 70%); }
.ss-mode.report { background:linear-gradient(90deg, rgba(183,156,255,.09), transparent 70%); }
.ss-mode b { color:var(--ss-ink); font-weight:700; }
.ss-pill { display:inline-flex; align-items:center; gap:7px; font:700 9.5px var(--ss-title); letter-spacing:.24em; padding:5px 10px; border-radius:6px; white-space:nowrap; }
.ss-pill.exp { background:rgba(122,162,255,.16); color:var(--ss-exp); }
.ss-pill.live { background:rgba(74,222,128,.14); color:var(--ss-live); }
.ss-pill.live::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--ss-live); animation:ss-ping 2s infinite; }
.ss-pill.report { background:rgba(183,156,255,.16); color:var(--ss-report); }
.ss-mode a { color:var(--ss-acc); margin-left:auto; white-space:nowrap; }
@keyframes ss-ping { 0% { box-shadow:0 0 0 0 rgba(74,222,128,.6); } 70% { box-shadow:0 0 0 8px rgba(74,222,128,0); } 100% { box-shadow:0 0 0 0 rgba(74,222,128,0); } }
@media (prefers-reduced-motion: reduce) { .ss-pill.live::before { animation:none; } }

/* ---------------------------------------------------------------- result components */
.ss-kicker { font:700 10px var(--ss-title); letter-spacing:.3em; color:var(--ss-acc); }
.ss-plain { border:1px solid var(--ss-line); border-radius:14px; padding:16px 18px; background:rgba(122,162,255,.06); color:var(--ss-body); font:15px/1.7 var(--ss-sub); }
.ss-plain h4, .ss-limits h4 { margin:0 0 8px; font:700 9.5px var(--ss-title); letter-spacing:.28em; color:var(--ss-acc); }
.ss-plain b, .ss-limits b { color:var(--ss-ink); }
.ss-plain p { margin:0 0 8px; } .ss-plain p:last-child { margin:0; }
.ss-plain a.ss-more { display:inline-block; margin-top:6px; color:var(--ss-acc); font-weight:700; text-decoration:none; }
.ss-limits { border:1px solid rgba(251,191,36,.28); border-left:3px solid var(--ss-warn); border-radius:12px; padding:14px 16px; background:rgba(251,191,36,.05); color:var(--ss-body); font:14px/1.65 var(--ss-sub); }
.ss-limits h4 { color:var(--ss-warn); }
.ss-limits ul { margin:0; padding-left:18px; } .ss-limits li { margin-bottom:5px; } .ss-limits li:last-child { margin-bottom:0; }
.ss-btn { display:inline-flex; align-items:center; gap:10px; padding:11px 20px; border-radius:999px; border:none; background:var(--ss-acc); color:var(--ss-bg);
          font:700 14px var(--ss-sub); text-decoration:none; cursor:pointer; }
.ss-btn.ghost { background:none; border:1px solid var(--ss-line); color:var(--ss-ink); }
.ss-btn:hover { filter:brightness(1.08); }

/* ---------------------------------------------------------------- page shell: one sky behind every page */
/* nav.js adds .ss-page to <body> on every page except the home page, which draws its own animated sky. */
body.ss-page { background:
    radial-gradient(1100px 520px at 78% -8%, rgba(54,82,170,.30), transparent 62%),
    radial-gradient(900px 600px at -10% 105%, rgba(110,70,170,.14), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='%23dfe6ff'%3E%3Ccircle cx='12' cy='30' r='.7' opacity='.5'/%3E%3Ccircle cx='71' cy='9' r='.5' opacity='.35'/%3E%3Ccircle cx='140' cy='52' r='.8' opacity='.45'/%3E%3Ccircle cx='205' cy='21' r='.5' opacity='.3'/%3E%3Ccircle cx='38' cy='118' r='.6' opacity='.35'/%3E%3Ccircle cx='181' cy='131' r='.9' opacity='.5'/%3E%3Ccircle cx='103' cy='170' r='.5' opacity='.3'/%3E%3Ccircle cx='226' cy='199' r='.6' opacity='.4'/%3E%3Ccircle cx='59' cy='214' r='.8' opacity='.45'/%3E%3Ccircle cx='150' cy='228' r='.5' opacity='.3'/%3E%3C/g%3E%3C/svg%3E"),
    var(--ss-bg) !important;
  background-attachment:fixed !important; }

/* Page header: kicker, title, one-line question, optional actions. Same on every tool. */
.ss-head { max-width:1180px; margin:0 auto; padding:clamp(26px,4vw,46px) clamp(16px,3vw,28px) 6px; }
.ss-head .ss-kicker { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.ss-head .ss-kicker::before { content:""; width:28px; height:1px; background:var(--ss-acc); }
.ss-head-row { display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px 24px; }
.ss-head h1 { margin:0; font:700 clamp(28px,4.2vw,50px)/1.08 var(--ss-sub); letter-spacing:-.015em; color:var(--ss-ink); }
.ss-head .ss-q { margin:12px 0 0; max-width:760px; color:var(--ss-body); font:clamp(15px,1.4vw,17.5px)/1.7 var(--ss-sub); }
.ss-head .ss-q b { color:var(--ss-ink); }
.ss-tabs { margin-left:auto; display:flex; flex-wrap:wrap; gap:4px; padding:4px; border:1px solid var(--ss-line); border-radius:999px; background:rgba(11,16,32,.6); }
.ss-tabs button, .ss-tabs a { border:none; background:none; color:var(--ss-dim); padding:7px 14px; border-radius:999px; cursor:pointer; font:600 13px var(--ss-sub); text-decoration:none; white-space:nowrap; }
.ss-tabs button:hover, .ss-tabs a:hover { color:var(--ss-ink); }
.ss-tabs button.on, .ss-tabs a.on { background:rgba(122,162,255,.18); color:var(--ss-ink); }

/* "Start here": a first experiment anyone can run in one click. The first card is the recommended one. */
.ss-start-head { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 14px; margin:26px 0 12px; }
.ss-start-head h2 { margin:0; font:700 9.5px var(--ss-title); letter-spacing:.3em; color:var(--ss-acc); }
.ss-start-head span { color:var(--ss-dim); font:13.5px var(--ss-sub); }
.ss-starts { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap:12px; }
.ss-start { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:6px; text-align:left; cursor:pointer; text-decoration:none;
            padding:18px 18px 16px; border-radius:18px; border:1px solid var(--ss-line); color:var(--ss-ink); font:inherit;
            background:linear-gradient(160deg, rgba(122,162,255,.08), rgba(255,255,255,.012) 55%, rgba(4,6,13,.4)); transition:border-color .2s, transform .2s, background .2s; }
.ss-start:hover { border-color:rgba(122,162,255,.55); transform:translateY(-2px); }
.ss-start .n { font:700 9px var(--ss-title); letter-spacing:.26em; color:var(--ss-dim); }
.ss-start b { font:700 16.5px/1.35 var(--ss-sub); }
.ss-start span.d { color:var(--ss-body); font:13.5px/1.55 var(--ss-sub); }
.ss-start svg { width:100%; height:34px; margin:4px 0 2px; overflow:visible; }
.ss-start .go { margin-top:auto; padding-top:8px; color:var(--ss-acc); font:700 13.5px var(--ss-sub); }
.ss-start.primary { border-color:rgba(122,162,255,.6); background:linear-gradient(160deg, rgba(122,162,255,.2), rgba(122,162,255,.04) 60%, rgba(4,6,13,.4)); box-shadow:0 10px 40px rgba(60,90,200,.18); }
.ss-start.primary .n { color:var(--ss-acc); }
.ss-start.done::after { content:"✓ done"; position:absolute; top:14px; right:14px; font:700 11px var(--ss-sub); color:var(--ss-live); }
.ss-start:focus-visible, .ss-tabs button:focus-visible { outline:2px solid var(--ss-acc); outline-offset:2px; }

/* Home variant of the strip: floats over the hero until you scroll. */
.ss-strip.over { position:fixed; left:0; right:0; background:linear-gradient(rgba(4,6,13,.8), rgba(4,6,13,0)); border-bottom-color:transparent; backdrop-filter:none; transition:background .3s, border-color .3s; }
.ss-strip.over.scrolled { background:rgba(4,6,13,.92); border-bottom-color:var(--ss-line); backdrop-filter:blur(8px); }
@media (max-width:600px) { .ss-tabs { margin-left:0; max-width:100%; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; } .ss-tabs::-webkit-scrollbar { display:none; } }

/* Freshness of live data, shown next to the LIVE DATA pill. */
.ss-fresh { font:600 12px var(--ss-sub); color:var(--ss-live); white-space:nowrap; }
.ss-fresh.late { color:var(--ss-warn); }

/* Loading states: one spinner and one placeholder shimmer for every page. */
.ss-spinner { display:inline-block; width:14px; height:14px; border:2px solid var(--ss-line); border-top-color:var(--ss-acc); border-radius:50%;
              animation:ss-spin .8s linear infinite; vertical-align:-2px; }
@keyframes ss-spin { to { transform:rotate(360deg); } }
.ss-skel { display:block; border-radius:8px; background:linear-gradient(90deg, rgba(140,160,220,.08) 25%, rgba(140,160,220,.16) 50%, rgba(140,160,220,.08) 75%);
           background-size:200% 100%; animation:ss-shimmer 1.4s ease-in-out infinite; }
.ss-skel.line { height:.9em; margin:.45em 0; } .ss-skel.line.short { width:60%; }
.ss-skel.block { height:160px; }
@keyframes ss-shimmer { 0% { background-position:100% 0; } 100% { background-position:-100% 0; } }
@media (prefers-reduced-motion: reduce) { .ss-spinner, .ss-skel { animation:none; } }