/* Logic of Logic — prototype design system
   Layout: full-bleed editorial dark surface, 12-col max 1200px, data in mono, display in Syne.
   Color tokens: ink (bg), panel, line, fg, mute, signal (amber), logic (blue), ok/warn/crit (semantic). */
:root{
  --ink:#0a0c10; --ink-2:#0f121a; --panel:#141822; --panel-2:#1a1f2b; --line:rgba(228,233,245,.10); --line-2:rgba(228,233,245,.18);
  --fg:#e9edf5; --mute:#97a0b4; --dim:#6b7488;
  --signal:#f4b650; --signal-2:#ffd58a; --logic:#7b8cff; --logic-2:#a9b5ff; --ok:#49d4a0; --warn:#f2a94a; --crit:#f26d6d;
  --glow-s:rgba(244,182,80,.28); --glow-l:rgba(123,140,255,.30);
  --font-d:"Syne",ui-sans-serif,system-ui,sans-serif; --font-b:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif; --font-m:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:14px; --r-s:8px; --max:1200px; --gut:clamp(16px,4vw,40px);
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --ink:#f6f4ee; --ink-2:#efece4; --panel:#ffffff; --panel-2:#f3f0e8; --line:rgba(20,24,40,.10); --line-2:rgba(20,24,40,.2);
    --fg:#151826; --mute:#525a6e; --dim:#7b8296; --signal:#b7780f; --signal-2:#8f5d08; --logic:#4a5de0; --logic-2:#2f3fb8;
    --glow-s:rgba(183,120,15,.18); --glow-l:rgba(74,93,224,.18); color-scheme:light;
  }
}
:root[data-theme="light"]{
  --ink:#f6f4ee; --ink-2:#efece4; --panel:#ffffff; --panel-2:#f3f0e8; --line:rgba(20,24,40,.10); --line-2:rgba(20,24,40,.2);
  --fg:#151826; --mute:#525a6e; --dim:#7b8296; --signal:#b7780f; --signal-2:#8f5d08; --logic:#4a5de0; --logic-2:#2f3fb8;
  --glow-s:rgba(183,120,15,.18); --glow-l:rgba(74,93,224,.18); color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--ink);color:var(--fg);font-family:var(--font-b);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,canvas,svg{max-width:100%}
a{color:inherit;text-decoration:none}
a:hover{color:var(--signal-2)}
:focus-visible{outline:2px solid var(--logic);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--font-d);letter-spacing:-.01em;text-wrap:balance;margin:0;line-height:1.08}
h1{font-size:clamp(2.2rem,5vw,4.2rem);font-weight:800}
h2{font-size:clamp(1.6rem,3.4vw,2.6rem);font-weight:700}
h3{font-size:1.2rem;font-weight:700}
p{margin:0}
.mono{font-family:var(--font-m);font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--font-m);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--signal)}
.mute{color:var(--mute)}
.dim{color:var(--dim)}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.section{padding-block:clamp(48px,8vw,96px)}
.section-h{display:flex;align-items:end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:28px}
.section-h p{max-width:62ch;color:var(--mute)}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px;min-width:0}
.panel.hover{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.panel.hover:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:0 20px 50px -30px rgba(0,0,0,.6)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--fg);font-family:var(--font-b);font-weight:600;font-size:.95rem;cursor:pointer;transition:all .2s ease}
.btn:hover{border-color:var(--signal);color:var(--signal-2);transform:translateY(-1px)}
.btn.primary{background:var(--signal);color:#111;border-color:var(--signal)}
.btn.primary:hover{background:var(--signal-2);color:#111}
.btn.sm{padding:8px 12px;font-size:.82rem}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid var(--line-2);font-family:var(--font-m);font-size:.7rem;letter-spacing:.04em;color:var(--mute);white-space:nowrap}
.pill.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 50%,transparent)}
.pill.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 50%,transparent)}
.pill.crit{color:var(--crit);border-color:color-mix(in srgb,var(--crit) 50%,transparent)}
.pill.signal{color:var(--signal);border-color:color-mix(in srgb,var(--signal) 55%,transparent);background:color-mix(in srgb,var(--signal) 10%,transparent)}
.pill.logic{color:var(--logic-2);border-color:color-mix(in srgb,var(--logic) 55%,transparent);background:color-mix(in srgb,var(--logic) 10%,transparent)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 var(--ok);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%,transparent)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* NAV */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:color-mix(in srgb,var(--ink) 78%,transparent);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:22px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-d);font-weight:800;font-size:1.05rem;letter-spacing:-.01em}
.brand .tri{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--signal),var(--logic));color:#0a0c10;font-size:1.05rem;font-weight:900}
.nav-links{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.nav-links a{padding:8px 12px;border-radius:999px;font-size:.9rem;color:var(--mute);transition:all .2s}
.nav-links a:hover,.nav-links a.active{color:var(--fg);background:color-mix(in srgb,var(--fg) 7%,transparent)}
.nav-cta{margin-left:6px}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line-2);color:var(--fg);border-radius:10px;padding:8px 10px;cursor:pointer}
@media (max-width:900px){
  .nav-links{display:none;position:absolute;left:0;right:0;top:64px;flex-direction:column;background:var(--ink);padding:12px var(--gut) 18px;border-bottom:1px solid var(--line)}
  .nav-links.open{display:flex}
  .nav-toggle{display:inline-flex}
  .nav-cta{display:none}
}

/* TICKER */
.ticker{border-block:1px solid var(--line);background:var(--ink-2);overflow:hidden;white-space:nowrap;position:relative}
.ticker:before,.ticker:after{content:"";position:absolute;top:0;bottom:0;width:60px;z-index:2;pointer-events:none}
.ticker:before{left:0;background:linear-gradient(90deg,var(--ink-2),transparent)}
.ticker:after{right:0;background:linear-gradient(270deg,var(--ink-2),transparent)}
.ticker-track{display:inline-flex;gap:40px;padding:10px 0;animation:marquee 60s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-item{display:inline-flex;align-items:center;gap:10px;font-size:.86rem;color:var(--mute)}
.ticker-item b{color:var(--fg);font-weight:600}
.ticker-item .t{font-family:var(--font-m);font-size:.72rem;color:var(--signal)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* HERO */
.hero{position:relative;overflow:hidden;min-height:560px;display:grid;align-items:center;border-bottom:1px solid var(--line)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero .wrap{position:relative;z-index:2;padding-block:72px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}}
.hero h1 span{background:linear-gradient(90deg,var(--signal-2),var(--signal) 40%,var(--logic-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lede{font-size:1.15rem;color:var(--mute);max-width:58ch;margin-top:18px}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hero-label{position:absolute;z-index:3;pointer-events:none;transform:translate(-50%,-130%);padding:6px 10px;border-radius:8px;background:var(--panel);border:1px solid var(--line-2);font-family:var(--font-m);font-size:.72rem;color:var(--fg);white-space:nowrap;opacity:0;transition:opacity .15s}
.hero-label.on{opacity:1}
.hero-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.stat{padding:18px;border-radius:var(--r);background:color-mix(in srgb,var(--panel) 80%,transparent);border:1px solid var(--line);backdrop-filter:blur(8px)}
.stat .n{font-family:var(--font-d);font-size:2rem;font-weight:800;line-height:1;letter-spacing:-.02em}
.stat .l{font-size:.8rem;color:var(--mute);margin-top:6px}
.hero-hint{font-family:var(--font-m);font-size:.7rem;color:var(--dim);margin-top:14px;letter-spacing:.06em}

/* STORY */
.story{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;padding:18px 0;border-top:1px solid var(--line)}
.story:first-child{border-top:0}
.story .time{font-family:var(--font-m);font-size:.78rem;color:var(--signal);padding-top:4px}
.story h3{font-size:1.1rem;line-height:1.3;font-family:var(--font-b);font-weight:600}
.story .meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}
.story .src{font-family:var(--font-m);font-size:.74rem;color:var(--mute)}
.story .why{margin-top:10px;color:var(--mute);font-size:.95rem;max-width:70ch}
.story .act{margin-top:10px;padding:10px 12px;border-left:2px solid var(--logic);background:color-mix(in srgb,var(--logic) 8%,transparent);border-radius:0 8px 8px 0;font-size:.92rem}
.story .act b{color:var(--logic-2);font-family:var(--font-m);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:4px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--panel);width:max-content;max-width:100%}
.tab{padding:9px 16px;border-radius:999px;background:transparent;border:0;color:var(--mute);font-family:var(--font-b);font-weight:600;font-size:.88rem;cursor:pointer;transition:all .2s}
.tab.active{background:var(--signal);color:#111}
.tab:hover:not(.active){color:var(--fg)}

/* LEADERBOARD */
.lb{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel)}
.lb-row{display:grid;grid-template-columns:44px minmax(0,1.6fr) 120px 120px 150px;gap:14px;align-items:center;padding:14px 18px;border-top:1px solid var(--line);transition:background .2s}
.lb-row:first-child{border-top:0}
.lb-row:hover{background:var(--panel-2)}
.lb-head{font-family:var(--font-m);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.lb-row .rank{font-family:var(--font-d);font-weight:800;font-size:1.3rem;color:var(--dim)}
.lb-row:nth-child(2) .rank{color:var(--signal)}
.lb-row .name{font-weight:600;min-width:0}
.lb-row .name small{display:block;color:var(--mute);font-weight:400;font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-row .num{font-family:var(--font-m);font-size:.92rem;font-variant-numeric:tabular-nums}
.lb-row .up{color:var(--ok)}
.spark{width:150px;height:36px;display:block}
@media (max-width:760px){.lb-row{grid-template-columns:34px minmax(0,1fr) 90px}.lb-row .c3,.lb-row .spark{display:none}}

/* CARDS */
.card-platform{position:relative;overflow:hidden;padding:22px;border-radius:var(--r);border:1px solid var(--line);background:var(--panel);min-width:0;transition:transform .25s,border-color .25s}
.card-platform:hover{transform:translateY(-3px);border-color:var(--line-2)}
.card-platform .orb{position:absolute;right:-40px;top:-40px;width:140px;height:140px;border-radius:50%;filter:blur(30px);opacity:.5}
.card-platform h3{font-size:1.15rem}
.card-platform .n{font-family:var(--font-m);font-size:.78rem;color:var(--mute);margin-top:6px}
.card-platform .bar{height:4px;border-radius:2px;background:var(--line);margin-top:16px;overflow:hidden}
.card-platform .bar i{display:block;height:100%;width:0;transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.repo-card{display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:var(--r);border:1px solid var(--line);background:var(--panel);min-width:0;transition:transform .25s,border-color .25s}
.repo-card:hover{transform:translateY(-3px);border-color:var(--line-2)}
.repo-card .top{display:flex;justify-content:space-between;gap:10px;align-items:start}
.repo-card h3{font-size:1.02rem;font-family:var(--font-b);font-weight:700;word-break:break-word}
.repo-card p{color:var(--mute);font-size:.9rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.repo-card .foot{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:auto}
.lang{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-m);font-size:.72rem;color:var(--mute)}
.lang i{width:8px;height:8px;border-radius:50%;background:var(--logic)}

/* SEARCH */
.search{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--line-2);border-radius:12px;background:var(--panel);min-width:0;width:100%}
.search input{flex:1;background:none;border:0;color:var(--fg);font-family:var(--font-b);font-size:1rem;min-width:0;outline:none}
.search kbd{font-family:var(--font-m);font-size:.68rem;border:1px solid var(--line-2);border-radius:6px;padding:2px 6px;color:var(--dim)}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:7px 12px;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--mute);font-size:.82rem;cursor:pointer;font-family:var(--font-b)}
.chip.active{border-color:var(--logic);color:var(--logic-2);background:color-mix(in srgb,var(--logic) 12%,transparent)}

/* TIMELINE */
.tl-wrap{overflow-x:auto;padding-bottom:12px}
.tl{position:relative;display:flex;gap:0;min-width:900px;padding:30px 0 10px}
.tl:before{content:"";position:absolute;left:0;right:0;top:46px;height:2px;background:linear-gradient(90deg,var(--line-2),var(--logic),var(--signal))}
.tl-item{position:relative;flex:1;min-width:150px;padding:34px 12px 0 0}
.tl-item:before{content:"";position:absolute;left:0;top:11px;width:12px;height:12px;border-radius:50%;background:var(--ink);border:2px solid var(--logic);box-shadow:0 0 0 4px color-mix(in srgb,var(--logic) 20%,transparent)}
.tl-item.major:before{border-color:var(--signal);box-shadow:0 0 0 6px color-mix(in srgb,var(--signal) 25%,transparent)}
.tl-item .d{font-family:var(--font-m);font-size:.7rem;color:var(--signal);letter-spacing:.06em}
.tl-item .t{font-weight:700;margin-top:4px}
.tl-item .n{font-size:.84rem;color:var(--mute);margin-top:4px}

/* CODE */
.code{position:relative;background:#0b0e14;color:#e6edf3;border:1px solid var(--line);border-radius:10px;padding:14px 48px 14px 16px;font-family:var(--font-m);font-size:.84rem;overflow-x:auto;white-space:pre}
:root[data-theme="light"] .code{background:#1a1e29}
.copy{position:absolute;right:8px;top:8px;background:var(--panel-2);border:1px solid var(--line-2);color:var(--fg);border-radius:6px;padding:4px 8px;font-family:var(--font-m);font-size:.68rem;cursor:pointer}
.copy.done{color:var(--ok);border-color:var(--ok)}

/* TERMINAL MOTION */
.term{background:#0b0e14;border:1px solid var(--line-2);border-radius:12px;overflow:hidden;font-family:var(--font-m);font-size:.82rem;color:#d7dee9}
.term .bar{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.06)}
.term .bar i{width:10px;height:10px;border-radius:50%;background:#3a4050}
.term .bar i:nth-child(1){background:#f26d6d}.term .bar i:nth-child(2){background:#f4b650}.term .bar i:nth-child(3){background:#49d4a0}
.term pre{margin:0;padding:14px 16px;white-space:pre-wrap;min-height:150px}
.term .cur{display:inline-block;width:8px;height:1em;background:var(--signal);vertical-align:-2px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* FAQ */
.faq details{border-top:1px solid var(--line);padding:14px 0}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:10px}
.faq summary:after{content:"+";color:var(--signal);font-family:var(--font-m)}
.faq details[open] summary:after{content:"–"}
.faq p{color:var(--mute);margin-top:8px;max-width:70ch}

/* FOOTER */
footer{border-top:1px solid var(--line);padding-block:40px;color:var(--mute);font-size:.88rem}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px}
@media (max-width:760px){footer .cols{grid-template-columns:1fr 1fr}}
footer h4{font-family:var(--font-m);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:10px}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.newsletter{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.newsletter input{flex:1;min-width:200px;padding:12px 14px;border-radius:999px;border:1px solid var(--line-2);background:var(--panel);color:var(--fg);font-family:var(--font-b)}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--panel);border:1px solid var(--line-2);padding:10px 16px;border-radius:999px;font-size:.9rem;opacity:0;transition:all .3s;z-index:99;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* REVEAL (visible at rest; animates only once observed) */
.rv{opacity:1}
.rv.in{animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}.ticker-track{animation:none!important}}

/* MISC */
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:.9rem}
.kv dt{color:var(--dim);font-family:var(--font-m);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;padding-top:3px}
.kv dd{margin:0}
.badge-wrap{display:flex;gap:10px;align-items:center;padding:10px 14px;border-radius:10px;border:1px solid var(--line-2);background:var(--panel-2);width:max-content;max-width:100%}
.badge{display:inline-flex;align-items:stretch;border-radius:6px;overflow:hidden;font-family:var(--font-m);font-size:.72rem;line-height:1}
.badge span{padding:6px 8px}
.badge .k{background:#2b3140;color:#fff}
.badge .v{background:var(--signal);color:#111;font-weight:700}
.prose{max-width:68ch;color:var(--mute)}
.prose h3{color:var(--fg);margin:24px 0 8px;font-family:var(--font-b)}
.prose p{margin-bottom:12px}
.prose ol,.prose ul{padding-left:20px;margin:0 0 12px}
.ill{aspect-ratio:16/9;border-radius:12px;border:1px solid var(--line);background:radial-gradient(120% 90% at 20% 10%,var(--glow-l),transparent 50%),radial-gradient(90% 80% at 90% 90%,var(--glow-s),transparent 50%),var(--panel-2);display:grid;place-items:center;overflow:hidden}
.ill svg{width:88%;height:auto}
.note{padding:12px 14px;border-radius:10px;border:1px dashed var(--line-2);color:var(--mute);font-size:.84rem;font-family:var(--font-m)}
.chart{width:100%;height:280px;display:block}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--font-m);font-size:.72rem;color:var(--mute)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.page-h{padding-block:clamp(40px,7vw,80px) 0}
.page-h h1{font-size:clamp(2rem,5vw,3.6rem)}
.page-h p{color:var(--mute);max-width:64ch;margin-top:14px;font-size:1.05rem}
.two{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:28px}
@media (max-width:900px){.two{grid-template-columns:1fr}}
.sticky{position:sticky;top:84px}