:root{
  color-scheme:dark;
  /* black to match assets/sick7.jpg; the logo carries the only red */
  --bg:#000;--surface:#0e0e0e;--raise:#161616;--ink:#fff;--muted:#a1a1a1;--line:#242424;--on-color:#000;
  --display:'Bricolage Grotesque',system-ui,sans-serif;--body:Inter,system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace;
  --project:#fff;--line-strong:#4a4a4a;--btn:var(--ink);--btn-ink:var(--bg);--hl:var(--muted);--radius:20px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--body);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,dl,dd,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
::selection{background:var(--ink);color:var(--bg)}
h1,h2,h3{font-family:var(--display);font-weight:500;letter-spacing:-.03em;line-height:1.05}
.wrap{width:min(1200px,100% - 32px);margin-inline:auto}
.kicker,.meta,.event,dt,.num,.filters button,.chips li{font:500 12px/1.4 var(--mono);letter-spacing:.03em}
.kicker,.meta,dt{color:var(--muted);text-transform:uppercase}
.arr{display:inline-block;transition:transform .2s}
a:hover .arr{transform:translate(2px,-2px)}
.skip{position:absolute;left:16px;top:-80px;z-index:10;background:var(--ink);color:var(--bg);padding:12px 16px;border-radius:8px}
.skip:focus{top:16px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header & footer */
.top,footer{--ink:#fff;--muted:#a1a1a1;--raise:#1c1c1c;--line:#242424;color-scheme:dark;color:var(--ink);background:#000;box-shadow:0 0 0 100vmax #000;clip-path:inset(0 -100vmax)}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:16px;border-bottom:1px solid var(--line)}
.logo img{height:44px;width:auto}
.top nav,footer nav{display:flex;gap:4px}
.top nav a,footer nav a{padding:8px 14px;border-radius:999px;font-size:15px;font-weight:500;color:var(--muted)}
.top nav a:hover,footer nav a:hover{color:var(--ink);background:var(--raise)}
footer{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;margin-top:64px;padding-block:32px;border-top:1px solid var(--line);color:var(--muted);font-size:14px}
footer .logo img{height:36px}

/* buttons */
.actions{display:flex;flex-wrap:wrap;gap:10px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--btn);color:var(--btn-ink);padding:13px 22px;border-radius:999px;font-weight:600;font-size:15px;transition:opacity .2s}
.button:hover{opacity:.85}
.button.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong)}
.button.ghost:hover{opacity:1;box-shadow:inset 0 0 0 1px var(--ink)}

/* shared bits */
.cover{aspect-ratio:1;border-radius:12px;background:var(--project);color:var(--on-color);position:relative;display:grid;place-items:center;overflow:hidden}
.cover span{font:500 40px/1 var(--display);letter-spacing:-.04em;transition:transform .3s}
.cover.has-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.cover small{position:absolute;left:10px;top:8px;font:500 11px var(--mono);opacity:.55}
.avatar{width:30px;height:30px;border-radius:50%;object-fit:cover;object-position:center 28%;background:var(--line)}
.stack-avatars{display:flex;padding-left:8px}
.stack-avatars .avatar{margin-left:-8px;border:2px solid var(--surface)}
.guest{display:inline-grid;place-items:center;font:500 11px var(--mono);color:var(--ink);background:var(--raise)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips li{border:1px solid var(--line);padding:4px 10px;border-radius:999px;color:var(--ink)}
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:24px}
.section-head h2{font-size:clamp(32px,4.4vw,52px)}
.section-head p{font:500 12px var(--mono);color:var(--muted);text-transform:uppercase}

/* hero */
.hero{display:grid;grid-template-columns:1fr 400px;gap:56px;align-items:stretch;padding-block:clamp(48px,8vw,96px)}
.hero h1{font-size:clamp(46px,7.4vw,104px);letter-spacing:-.05em;line-height:.95;margin:18px 0 28px}
.hero h1 span{color:var(--muted)}
.hero-text{display:flex;flex-direction:column}
.hero-text .actions{margin-top:auto}
.hero-lede{max-width:500px;font-size:clamp(17px,1.5vw,19px);color:var(--muted);margin-bottom:32px}
.latest{display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:24px;background:var(--surface);border:1px solid var(--line);transition:border-color .2s}
.latest:hover{border-color:#4a4a4a}
.latest .cover{aspect-ratio:16/9}
.latest strong{font:500 34px/1 var(--display);letter-spacing:-.03em;margin-top:6px}
.latest .card-foot{margin-top:auto}
.latest-tag{color:var(--muted);font-size:15px}

/* team */
.team{padding-block:40px}
.team-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.member{padding:12px;border-radius:20px;background:var(--surface);border:1px solid var(--line)}
.member .portrait{width:100%;height:auto;aspect-ratio:1;object-fit:cover;object-position:center 28%;border-radius:12px}
.member h3{font-size:18px;letter-spacing:-.02em;margin:14px 4px 4px}
.member .meta{text-transform:none;margin-inline:4px}
.links{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 2px}
.links a{font-size:13px;font-weight:500;padding:5px 10px;border-radius:999px;background:var(--raise)}
.links a:hover{background:var(--ink);color:var(--bg)}

/* projects */
.projects{padding-block:56px 0}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.filters button{border:1px solid var(--line);background:transparent;padding:9px 16px;border-radius:999px;cursor:pointer;color:var(--muted)}
.filters button:hover{color:var(--ink);border-color:#4a4a4a}
.filters button.active{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.filters button span{opacity:.6;margin-left:4px}
.roadmap{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.roadmap-item[hidden]{display:none}
.card{display:flex;flex-direction:column;height:100%;border-radius:20px;background:var(--surface);border:1px solid var(--line);overflow:hidden;transition:border-color .2s,transform .2s}
.card:hover{border-color:#4a4a4a;transform:translateY(-3px)}
.card .cover{aspect-ratio:16/9;border-radius:0}
.card .cover span{font-size:64px}
.card:hover .cover span{transform:scale(1.1) rotate(-4deg)}
.card:hover .cover img,.latest:hover .cover img{transform:scale(1.04)}
.card-body{display:flex;flex-direction:column;gap:8px;padding:20px;flex:1}
.card h3{font-size:28px}
.card-desc{color:var(--muted);font-size:15px}
.card-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
.event{color:var(--ink)}

/* project page */
.back{display:inline-block;margin:28px 0 24px;color:var(--muted);font-weight:500}
.back:hover{color:var(--ink)}
.detail-grid{display:grid;grid-template-columns:380px 1fr;gap:64px;align-items:start}
.side{position:sticky;top:24px;display:grid;gap:14px;padding:20px;border-radius:calc(var(--radius) + 4px);background:var(--surface);border:1px solid var(--line)}
.side .cover{aspect-ratio:16/9}
.side .cover span{font-size:88px}
.side h1{font-size:clamp(40px,4.6vw,56px);letter-spacing:-.04em;overflow-wrap:anywhere}
.tagline{font:500 20px/1.3 var(--display);color:var(--muted);margin-bottom:6px}
.side dl{display:grid;gap:18px;padding-top:18px;margin-top:4px;border-top:1px solid var(--line)}
.side dd{margin-top:8px}
.crew li>*{display:flex;align-items:center;gap:12px;padding:8px 0}
.crew .avatar{width:40px;height:40px;flex-shrink:0}
.crew span:not(.avatar):not(.arr){flex:1;font-weight:500;font-size:15px;line-height:1.3}
.crew small{display:block;font:400 12px var(--mono);color:var(--muted);margin-top:2px}
.crew .arr{color:var(--muted)}
.crew a:hover span:not(.avatar){text-decoration:underline}
.body{padding-top:8px;min-width:0}
.lede{font:500 clamp(24px,2.6vw,34px)/1.3 var(--display);letter-spacing:-.02em;padding-bottom:40px}
.chapter{display:grid;grid-template-columns:44px 1fr;column-gap:12px;padding-block:32px;border-top:1px solid var(--line)}
.num{grid-row:span 2;padding-top:9px;color:var(--hl)}
.chapter h2{font-size:28px;margin-bottom:10px}
.chapter p{color:var(--muted);max-width:65ch}
.next{display:flex;align-items:center;gap:20px;margin-top:24px;padding:16px;border-radius:20px;background:var(--surface);border:1px solid var(--line);transition:border-color .2s}
.next:hover{border-color:#4a4a4a}
.next .cover{width:88px;flex-shrink:0}
.next .cover small{display:none}
.next .cover span{font-size:32px}
.next>span:not(.arr){flex:1;display:grid;gap:4px}
.next strong{font:500 clamp(28px,3.6vw,44px)/1 var(--display);letter-spacing:-.03em}
.next>.arr{font-size:28px;margin-right:8px}

/* project showcases */
.showcase{display:grid;gap:20px;padding-bottom:40px}
.showcase figure{margin:0;display:grid;gap:10px}
.showcase figure img{width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--line)}
.showcase figcaption{font-size:14px;color:var(--muted)}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.stat-row div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:6px;padding:16px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line)}
.stat-row dd{font:600 32px/1 var(--display);letter-spacing:-.03em;color:var(--hl)}
.stat-row dt{text-transform:none;letter-spacing:0;font:400 13px/1.4 var(--body)}

/* PePlus: pastel mint app (src/theme.ts) */
.theme-peplus{color-scheme:light;--bg:#F7F5F8;--surface:#fff;--raise:#F1EEF3;--ink:#2B3348;--muted:#5E6578;--line:#E6E1E9;--line-strong:#2F6B55;--btn:#B5E8D3;--btn-ink:#123B2C;--hl:#2F6B55;--radius:24px;--display:Inter,system-ui,sans-serif}
.theme-peplus h1,.theme-peplus h2,.theme-peplus .lede{font-weight:800;letter-spacing:-.04em}
.theme-peplus .side{background:linear-gradient(170deg,#E3F6EE,#fff 45%)}
.theme-peplus .button:hover{opacity:1;background:#9BDDC2}
.phones{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.phones img{border-radius:28px!important;box-shadow:0 20px 40px -24px #2B334866}

/* BreaQ: matplotlib result palette */
.theme-quantum{color-scheme:light;--bg:#F7F6F2;--surface:#fff;--raise:#EFEDE8;--ink:#24212F;--muted:#5D5866;--line:#E3E1DB;--line-strong:#A7A2B3;--btn:#7555DE;--btn-ink:#fff;--hl:#7555DE;--radius:10px;--display:Inter,system-ui,sans-serif}
.theme-quantum h1,.theme-quantum h2,.theme-quantum .lede{font-weight:600;letter-spacing:-.035em}
.theme-quantum .side .cover{background:linear-gradient(135deg,#AE99E9,#7555DE);color:#fff}
.theme-quantum .chips li{background:#E4DDF7;border-color:#E4DDF7;color:#24212F}

/* Cognitive Reading: editorial page */
.theme-reading{color-scheme:light;--bg:#FAF7F2;--surface:#fff;--raise:#F1ECE3;--ink:#231C33;--muted:#5F5670;--line:#E7E0D6;--line-strong:#4B2E83;--btn:#4B2E83;--btn-ink:#fff;--hl:#6B4BB0;--radius:6px;--display:Newsreader,Georgia,serif}
.theme-reading h1,.theme-reading h2{letter-spacing:-.02em}
.theme-reading .lede{font-style:italic}
.theme-reading .chapter p{font:400 19px/1.65 Newsreader,Georgia,serif;color:#3D3550}
.heat{font:500 clamp(20px,2.2vw,26px)/1.9 Newsreader,Georgia,serif;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.heat span{padding:1px 4px;border-radius:4px;background:rgb(107 75 176 / calc(var(--t) * .6));color:var(--ink)}
.heat .skipped{background:none;color:#8A8099;text-decoration:underline dotted;text-underline-offset:5px}
.legend{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;color:var(--muted)}
.legend span{display:flex;align-items:center;gap:8px}
.legend i{width:22px;height:14px;border-radius:3px;background:rgb(107 75 176 / calc(var(--t) * .6))}
.legend i.skipped{background:none;border-bottom:2px dotted #8A8099;border-radius:0}

/* SideQuestr: mirrors sidequestr.dev (pastel acrylic tiles, ink-outlined "pop" stickers, Fredoka + Nunito) */
.theme-sidequestr{color-scheme:light;--bg:#FFF7F0;--surface:rgba(255,255,255,.55);--raise:#fff;--ink:#2D2A4A;--muted:#6B6788;--line:rgba(45,42,74,.12);--line-strong:#2D2A4A;--btn:#FFC4DC;--btn-ink:#2D2A4A;--hl:#F06AA8;--radius:12px;--display:Fredoka,system-ui,sans-serif;--body:Nunito,system-ui,sans-serif;
  background:radial-gradient(46vmax 46vmax at 0 0,#FFC4DCaa,transparent 70%),radial-gradient(40vmax 40vmax at 100% 40%,#C6E4FFaa,transparent 70%),radial-gradient(34vmax 34vmax at 30% 100%,#FFE9A699,transparent 70%),#FFF7F0}
.theme-sidequestr h1,.theme-sidequestr h2,.theme-sidequestr .lede,.theme-sidequestr strong{font-family:Fredoka,sans-serif;font-weight:700;letter-spacing:-.01em}
.theme-sidequestr .lede{font-weight:600}
.theme-sidequestr .side,.theme-sidequestr .next{background:rgba(255,255,255,.55);border:1.5px solid rgba(255,255,255,.9);backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);box-shadow:0 18px 40px -18px rgba(110,80,170,.35),inset 0 1px 0 #fff}
.theme-sidequestr .button{border-radius:8px;font-family:Fredoka,sans-serif;font-weight:600;border:2px solid #2D2A4A;box-shadow:3px 4px 0 #2D2A4A;transition:transform .15s,box-shadow .15s}
.theme-sidequestr .button:hover{opacity:1;transform:translate(-1px,-2px);box-shadow:4px 6px 0 #2D2A4A}
.theme-sidequestr .button.ghost{background:rgba(255,255,255,.6);box-shadow:3px 4px 0 #2D2A4A}
.theme-sidequestr .chips li{background:#D8CBFF;border:2px solid #2D2A4A;color:#2D2A4A;font-weight:600}
.theme-sidequestr .chips li:nth-child(5n+2){background:#BFF2DA}.theme-sidequestr .chips li:nth-child(5n+3){background:#FFE9A6}.theme-sidequestr .chips li:nth-child(5n+4){background:#C6E4FF}.theme-sidequestr .chips li:nth-child(5n){background:#FFC4DC}
.theme-sidequestr .kicker,.theme-sidequestr dt{color:#6B6788}
.theme-sidequestr .num{font:700 20px Fredoka,sans-serif;color:#F06AA8;padding-top:2px}
.theme-sidequestr .side .cover{border:2px solid #2D2A4A;box-shadow:4px 5px 0 #2D2A4A}
.sticker{display:inline-block;justify-self:start;padding:6px 14px;border-radius:4px;background:#FFE9A6;border:2px solid #2D2A4A;font:600 15px Fredoka,sans-serif;transform:rotate(-3deg);box-shadow:2px 3px 0 #2D2A4A}
.sq-dev{display:grid;gap:14px;padding:32px;border-radius:12px;background:linear-gradient(120deg,#FFC4DC,#D8CBFF 55%,#C6E4FF);border:2px solid #2D2A4A;box-shadow:5px 6px 0 #2D2A4A}
.sq-dev h2{font-size:clamp(28px,3.4vw,40px);line-height:1.1}
.sq-dev h2 a{text-decoration:underline;text-decoration-color:#F06AA8;text-decoration-thickness:5px;text-underline-offset:6px}
.sq-dev p{max-width:60ch;color:#2D2A4A}
.sq-dev .button{justify-self:start;background:#fff}
.tape{overflow:hidden;background:#D8CBFF;border-block:2px solid #2D2A4A;padding:12px 0;transform:rotate(-1.5deg);margin:8px -12px}
.tape-track{display:flex;align-items:center;gap:28px;width:max-content;animation:marquee 28s linear infinite;font:600 26px Fredoka,sans-serif;color:#2D2A4A}
.tape i{width:14px;height:14px;border-radius:50%;background:#F06AA8;border:2px solid #2D2A4A}
.tape i:nth-of-type(3n+2){background:#E8B02A}.tape i:nth-of-type(3n){background:#2FBF86}
@keyframes marquee{to{transform:translateX(-50%)}}
.quests{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.quests li{position:relative;display:grid;gap:6px;padding:24px;border-radius:12px;border:2px solid #2D2A4A;box-shadow:4px 5px 0 #2D2A4A;color:#2D2A4A}
.q-sky{background:#C6E4FF}.q-mint{background:#BFF2DA}.q-lilac{background:#D8CBFF}.q-butter{background:#FFE9A6}
.q-num{font:700 40px/1 Fredoka,sans-serif;color:transparent;-webkit-text-stroke:2px #2D2A4A}
.q-badge{position:absolute;right:18px;top:18px;padding:5px 12px;border-radius:999px;background:#fff;border:2px solid #2D2A4A;font:700 15px Fredoka,sans-serif}
.quests strong{font-size:24px}
.quests p{color:#45416A}
.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
.levels li{display:grid;gap:6px;padding:20px;border-radius:12px;color:#2D2A4A}
.levels li>div{display:flex;justify-content:space-between;align-items:center;gap:8px}
.lvl{padding:3px 10px;border-radius:4px;background:#2D2A4A;color:#fff;font:700 13px Fredoka,sans-serif}
.lvl-state{font:600 13px Nunito,sans-serif;color:#45416A}
.levels strong{font-size:21px}
.levels p{font-size:15px;color:#45416A}
.lvl-done{background:#BFF2DA;border:2px solid #2D2A4A;box-shadow:4px 5px 0 #2D2A4A}
.lvl-now{background:#FFC4DC;border:2px solid #2D2A4A;box-shadow:4px 5px 0 #2D2A4A;transform:translateY(-8px)}
.lvl-next{background:rgba(255,255,255,.6);border:2px dashed #6B6788}
.card-next{font-size:14px;color:var(--muted)}
.card-next b{color:var(--ink);font-weight:600}
@media (max-width:700px){.quests,.levels{grid-template-columns:1fr}.lvl-now{transform:none}}
@media (prefers-reduced-motion:reduce){.tape-track{animation:none}}

/* SocialSync: Tailwind gray-900 / blue / emerald UI */
.theme-socialsync{--bg:#111827;--surface:#1F293780;--raise:#1F2937;--ink:#F3F4F6;--muted:#9CA3AF;--line:#374151;--line-strong:#4B5563;--btn:linear-gradient(90deg,#2563EB,#1D4ED8);--btn-ink:#fff;--hl:#34D399;--radius:16px}
.theme-socialsync .kicker,.theme-socialsync dt{color:#10B981;font-weight:700}
.theme-socialsync .button{transition:transform .2s}
.theme-socialsync .button:hover{opacity:1;transform:scale(1.04)}
.pipeline{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.pipeline li{padding:8px 16px;border-radius:999px;background:#1F2937;border:1px solid #374151;font-size:14px;font-weight:600}
.pipeline li:not(:last-child)::after{content:'\2192';margin-left:12px;color:#34D399}
.events{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.event-card{padding:16px;border-radius:12px;background:#1F293780;border:1px solid #374151;border-left:6px solid #10B981;box-shadow:0 10px 15px -3px #0006}
.event-card h3{font:700 17px/1.3 var(--body);letter-spacing:0;color:#F3F4F6;margin-bottom:12px}
.event-card dl{display:grid;gap:6px;font-size:14px;color:#D1D5DB}
.event-card div{display:flex;gap:8px}
.event-card dt{font:600 14px var(--body);text-transform:none;letter-spacing:0;color:#6B7280;min-width:64px}

/* 404 */
.lost{padding-block:120px 56px;display:grid;gap:20px;justify-items:start}
.lost h1{font-size:clamp(56px,10vw,128px)}
.lost p:not(.kicker){color:var(--muted);font-size:18px}

/* responsive */
@media (max-width:1000px){
  .hero{grid-template-columns:1fr}
  .latest{display:grid;grid-template-columns:120px 1fr;align-items:center;column-gap:20px}

  .latest .kicker{grid-column:1/-1}
  .latest .cover{grid-row:span 3}
  .latest .cover span{font-size:48px}
  .team-grid{grid-template-columns:repeat(3,1fr)}
  .roadmap{grid-template-columns:1fr 1fr}
  .detail-grid{grid-template-columns:1fr;gap:40px}
  .side{position:static}
}
@media (max-width:700px){.phones{grid-template-columns:repeat(3,72%);overflow-x:auto;scroll-snap-type:x mandatory}.phones figure{scroll-snap-align:start}}
@media (max-width:700px){
  .top nav a:not(:last-child){display:none}
  .team-grid,.roadmap{grid-template-columns:1fr 1fr;gap:10px}
  .roadmap{grid-template-columns:1fr}
  .member{padding:8px}
  .member h3{font-size:16px}
  .latest{grid-template-columns:80px 1fr}
  .latest strong{font-size:26px}
  .latest .cover span{font-size:32px}
  footer{grid-template-columns:1fr}
  footer nav{margin-left:-14px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}