/* =========================================================
   Amaan Vora — portfolio design system
   ========================================================= */
:root {
  --bg: #06080c;
  --bg-2: #0b0f16;
  --panel: #0f141d;
  --panel-2: #141b26;
  --line: #1e2735;
  --line-2: #2a3546;
  --text: #e7ebf2;
  --muted: #8b96a8;
  --dim: #5a6578;
  --accent: #7cffb2;      /* signal green */
  --accent-2: #5ee6ff;    /* cyan */
  --amber: #ffb547;
  --bronze: #c98a4b;
  --rose: #ff6b8b;
  --violet: #a78bfa;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --pixel: 'Press Start 2P', var(--mono);
  --radius: 14px;
  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1200px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--accent); color: #000; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.accent { color: var(--accent); }

/* ---------- nav: logo centred, sections either side ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(10px, 3vw, 36px);
  padding: 12px var(--gutter);
  transition: background .3s, border-color .3s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled { background: rgba(6, 8, 12, .94); border-color: var(--line); }
.nav .brand { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; position: relative; transition: transform .3s; }
.nav .brand::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--line-2); transition: border-color .3s, inset .3s; }
.nav .brand:hover { transform: scale(1.05); }
.nav .brand:hover::after { border-color: var(--accent); inset: -8px; }
.nav .brand img { width: 34px; height: 34px; }
.nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav .nl { justify-content: flex-end; }
.nav .nr { justify-content: flex-start; }
.nav ul a {
  font-family: var(--mono); font-size: 13px; padding: 8px 14px; border-radius: 8px; color: var(--muted);
  transition: color .2s, background .2s; letter-spacing: .04em; position: relative;
}
.nav ul a:hover, .nav ul a.active { color: var(--text); }
.nav ul a::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 1px; background: var(--accent); transform: scaleX(0); transition: transform .25s; }
.nav ul a:hover::after, .nav ul a.active::after { transform: scaleX(1); }
.nav ul a.cv { border: 1px solid var(--line-2); padding: 7px 13px; }
.nav ul a.cv::after { display: none; }
.nav ul a.cv:hover { border-color: var(--accent); color: var(--accent); }
.nav .burger { display: none; background: none; border: 1px solid var(--line-2); border-radius: 8px; width: 40px; height: 36px; cursor: pointer; justify-self: end; }
.nav .burger i { display: block; width: 18px; height: 2px; background: var(--text); margin: 4px auto; }
@media (max-width: 640px) {
  .nav { grid-template-columns: 1fr auto 1fr; }
  .nav .brand { grid-column: 2; grid-row: 1; }
  .nav .burger { display: block; grid-column: 3; grid-row: 1; }
  .nav ul { display: none; }
  .nav.open ul { display: flex; flex-direction: column; position: fixed; left: 12px; right: 12px; background: rgba(11,15,22,.97); border: 1px solid var(--line); padding: 8px; }
  .nav.open .nl { top: 70px; border-radius: 12px 12px 0 0; border-bottom: 0; }
  .nav.open .nr { top: 168px; border-radius: 0 0 12px 12px; border-top: 0; }
  .nav ul a { display: block; padding: 12px; font-size: 15px; }
}


/* ---------- buttons & chips ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: var(--mono); font-size: 14px; padding: 12px 18px; border-radius: 10px;
  border: 1px solid var(--line-2); background: rgba(255,255,255,.02); color: var(--text);
  transition: border-color .2s, background .2s, transform .2s, color .2s;
}
.btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.btn.primary { background: var(--accent); color: #04130a; border-color: var(--accent); font-weight: 600; }
.btn.primary:hover { background: #a6ffcb; color: #04130a; }
.btn.sm { padding: 8px 12px; font-size: 12px; border-radius: 8px; }
.btn .arr { transition: transform .2s; }
.btn:hover .arr { transform: translateX(3px); }
.chip {
  display: inline-block; font-family: var(--mono); font-size: 11.5px; padding: 4px 9px; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--muted); white-space: nowrap;
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- section scaffolding ---------- */
section { position: relative; }
.section { padding: clamp(72px, 10vw, 140px) 0; }
.eyebrow { font-family: var(--mono); font-size: 12.5px; color: var(--accent); letter-spacing: .12em; text-transform: uppercase; margin: 0 0 14px; }
.eyebrow::before { content: '// '; color: var(--dim); }
h1, h2, h3 { line-height: 1.12; margin: 0; letter-spacing: -.02em; }
h2.title { font-size: clamp(30px, 4.6vw, 52px); font-weight: 700; margin-bottom: 18px; }
.lede { font-size: clamp(16px, 1.6vw, 19px); color: var(--muted); max-width: 64ch; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 44px; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); padding: 44px 0 40px; color: var(--muted); font-size: 14px; }
.footer .wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.footer .f-ask { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }
.footer .f-icons { display: flex; gap: 10px; }
.footer .f-icons a { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); color: var(--muted); transition: color .2s, border-color .2s, transform .2s; }
.footer .f-icons a:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
.footer .f-icons svg { width: 18px; height: 18px; fill: currentColor; }
.footer .f-copy { margin: 4px 0 0; font-size: 12px; color: var(--dim); }
.socials { display: flex; gap: 10px; flex-wrap: wrap; }
.social {
  display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px; border-radius: 10px;
  border: 1px solid var(--line-2); font-family: var(--mono); font-size: 13px; color: var(--text);
  background: rgba(6,8,12,.8);
  transition: border-color .2s, color .2s, transform .2s;
}
.social svg { width: 17px; height: 17px; fill: currentColor; }
.social:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.footer .social { padding: 8px; border-radius: 8px; }
.footer .social span { display: none; }

/* =========================================================
   HOME
   ========================================================= */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; }
.hero canvas.bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero .vignette { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 30% 50%, transparent 30%, rgba(6,8,12,.85) 85%); }
/* the hero dissolves into the field below it instead of ending on an edge */
.hero canvas.bg, .hero .vignette { -webkit-mask-image: linear-gradient(#000 55%, transparent 98%); mask-image: linear-gradient(#000 55%, transparent 98%); }
.hero .wrap { position: relative; z-index: 2; width: 100%; padding-top: 80px; padding-bottom: 60px; }
.term-lines { font-family: var(--mono); font-size: clamp(13px, 1.4vw, 15px); color: var(--muted); min-height: 5.2em; margin-bottom: 18px; }
.term-lines .ln { white-space: pre; }
.term-lines .p { color: var(--accent); }
.term-lines .out { color: var(--text); }
.headline {
  font-family: var(--mono); font-weight: 700; font-size: clamp(40px, 8.6vw, 112px);
  line-height: 1.02; letter-spacing: -.04em; margin: 0; min-height: 2.1em;
}
.headline .l2 { color: var(--accent); }
.caret { display: inline-block; width: .55em; height: .95em; background: var(--accent); vertical-align: -0.1em; margin-left: .06em; animation: blink 1s steps(1) infinite; }
.term-lines .caret { width: .6em; height: 1.1em; }
@keyframes blink { 50% { opacity: 0; } }
.hero .sub { font-size: clamp(16px, 1.8vw, 20px); color: var(--muted); max-width: 52ch; margin: 26px 0 32px; opacity: 0; transform: translateY(10px); transition: .8s; }
.hero .socials { opacity: 0; transform: translateY(10px); transition: .8s .15s; }
.hero.done .sub, .hero.done .socials { opacity: 1; transform: none; }
.scroll-cue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 2; font-family: var(--mono); font-size: 11px; color: var(--dim); letter-spacing: .2em; text-align: center; }
.scroll-cue i { display: block; width: 1px; height: 36px; margin: 8px auto 0; background: linear-gradient(var(--accent), transparent); animation: cue 2s infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* about strip */
.about-strip { background: #070a10; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.about-strip canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }
.about-strip .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: center; }
.about-strip p.big { font-size: clamp(18px, 2.1vw, 24px); line-height: 1.55; color: #cfd6e2; margin: 0 0 28px; }
.about-card { border: 1px solid var(--line-2); border-radius: var(--radius); background: rgba(10,14,20,.7); backdrop-filter: blur(8px); padding: 22px; font-family: var(--mono); font-size: 13px; }
.about-card .row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.about-card .row:last-child { border: 0; }
.about-card .k { color: var(--dim); }
.about-card .v { color: var(--text); text-align: right; }
.about-card .v.accent { color: var(--accent); }
@media (max-width: 860px) { .about-strip .wrap { grid-template-columns: 1fr; } }

/* project cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 960px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .cards { grid-template-columns: 1fr; } }
.pcard {
  position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel), var(--bg-2)); overflow: hidden;
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.pcard:hover { border-color: var(--line-2); transform: translateY(-4px); box-shadow: 0 20px 50px -20px rgba(124,255,178,.18); }
.pcard .viz { height: 170px; border-bottom: 1px solid var(--line); position: relative; background: #080b11; }
.pcard .viz canvas { width: 100%; height: 100%; display: block; }
.pcard .viz .tag { position: absolute; top: 12px; left: 12px; font-family: var(--mono); font-size: 11px; color: var(--accent); background: rgba(6,8,12,.75); padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line); }
.pcard .body { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.pcard h3 { font-size: 19px; font-weight: 650; }
.pcard p { margin: 0; color: var(--muted); font-size: 14.5px; flex: 1; }
.pcard .foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pcard .yr { font-family: var(--mono); font-size: 12px; color: var(--dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard .foot .btn { white-space: nowrap; flex-shrink: 0; }

/* work timeline */
.timeline-scroller { overflow-x: auto; overflow-y: hidden; padding: 8px 0 18px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.timeline { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(172px, 1fr); min-width: 100%; padding: 0 4px; }
.timeline .axis { position: absolute; left: 0; right: 0; top: 250px; height: 2px; background: var(--line); }
.timeline .axis i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transform-origin: left; transform: scaleX(0); transition: transform 1.6s cubic-bezier(.6,.1,.2,1); }
.timeline.in .axis i { transform: scaleX(1); }
.timeline .axis::after { content: ''; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left: 8px solid var(--accent); }
.tnode { position: relative; padding: 0 14px; height: 440px; }
.tnode .above { position: absolute; left: 14px; right: 14px; bottom: calc(100% - 250px + 40px); display: flex; flex-direction: column; gap: 4px; }
.tnode .dates { font-family: var(--mono); font-size: 12px; color: var(--accent); }
.tnode .org { font-size: 18px; font-weight: 650; }
.tnode .role { font-size: 13.5px; color: var(--muted); }
.tnode .logo { height: 46px; display: flex; align-items: center; margin-top: 10px; }
.tnode .logo img { max-height: 46px; max-width: 150px; object-fit: contain; filter: drop-shadow(0 0 0 transparent); opacity: .92; }
.tnode .dot { position: absolute; left: 14px; top: 243px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); transform: scale(0); transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.tnode .dot::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px var(--accent); }
.timeline.in .tnode .dot { transform: scale(1); }
.tnode .logo img.plate { background: #fff; padding: 8px 12px; border-radius: 8px; opacity: 1; max-width: 140px; box-sizing: content-box; max-height: 24px; }
.tnode .below p { margin: 0 0 6px; }
.tnode .below p:first-child { color: var(--text); opacity: .8; }
.tnode .below { position: absolute; top: 280px; left: 14px; right: 14px; font-size: 13.5px; color: var(--muted); line-height: 1.55; opacity: 0; transform: translateY(8px); transition: .6s; }
.timeline.in .tnode .below { opacity: 1; transform: none; }
.tnode .stem { position: absolute; left: 21px; top: 214px; width: 2px; height: 29px; background: linear-gradient(transparent, var(--line-2)); }

/* certificates */
.certs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.cert {
  position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #fff;
  aspect-ratio: 1.33; cursor: zoom-in; transform-style: preserve-3d; transition: transform .25s, box-shadow .3s, border-color .3s;
}
.cert img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cert::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%); transform: translateX(-100%); transition: transform .7s; }
.cert:hover::after { transform: translateX(100%); }
.cert:hover { box-shadow: 0 24px 60px -24px rgba(94,230,255,.35); border-color: var(--line-2); }
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(3,4,7,.9); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
.lightbox.on { display: flex; }
.lightbox figure { margin: 0; max-width: min(1100px, 96vw); }
.lightbox img { max-height: 82vh; border-radius: 10px; margin: 0 auto; }
.lightbox figcaption { font-family: var(--mono); font-size: 13px; color: var(--muted); text-align: center; margin-top: 14px; }

/* =========================================================
   PROJECTS
   ========================================================= */
.proj-hero { position: relative; min-height: 78svh; display: flex; align-items: flex-end; overflow: hidden; border-bottom: 1px solid var(--line); }
.proj-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.proj-hero .wrap { position: relative; z-index: 2; padding-top: 120px; padding-bottom: 60px; width: 100%; }
.proj-hero h1 { font-family: var(--mono); font-size: clamp(38px, 7vw, 88px); letter-spacing: -.04em; }
.proj-hero h1 em { font-style: normal; color: var(--accent); }
.proj-hero .lede { margin-top: 16px; }
.proj-hero .fade { position: absolute; inset: 0; background: linear-gradient(to top, var(--bg) 4%, rgba(6,8,12,.55) 45%, rgba(6,8,12,.2)); pointer-events: none; z-index: 1; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 30px; }
.filters button { cursor: pointer; font-family: var(--mono); font-size: 12.5px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--muted); transition: .2s; }
.filters button:hover { color: var(--text); }
.filters button.on { background: var(--accent); border-color: var(--accent); color: #04130a; }
.pcard.hide { display: none; }

/* project detail */
.pd-head { padding: 130px 0 40px; border-bottom: 1px solid var(--line); background: radial-gradient(80% 120% at 85% 0%, rgba(94,230,255,.08), transparent 60%), radial-gradient(60% 80% at 0% 0%, rgba(124,255,178,.06), transparent 60%); }
.crumbs { font-family: var(--mono); font-size: 12.5px; color: var(--dim); margin-bottom: 18px; }
.crumbs a:hover { color: var(--accent); }
.pd-head h1 { font-size: clamp(30px, 5vw, 56px); font-weight: 750; max-width: 22ch; }
.pd-head .lede { margin: 16px 0 24px; }
.pd-head .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-top: 34px; max-width: 760px; }
.metrics div { background: var(--bg-2); padding: 16px 18px; }
.metrics b { display: block; font-family: var(--mono); font-size: clamp(18px, 2.4vw, 26px); color: var(--accent); font-weight: 600; }
.metrics span { font-size: 12.5px; color: var(--muted); }
@media (max-width: 560px) { .metrics { grid-template-columns: 1fr; } }

.lab { margin: 40px 0 10px; border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden; background: var(--bg-2); box-shadow: 0 30px 80px -40px rgba(0,0,0,.9); }
.lab-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #0a0e15; font-family: var(--mono); font-size: 12px; color: var(--dim); }
.lab-bar .dots { display: flex; gap: 6px; margin-right: 8px; }
.lab-bar .dots i { width: 10px; height: 10px; border-radius: 50%; background: #2a3242; }
.lab-bar .dots i:nth-child(1) { background: #ff5f57; } .lab-bar .dots i:nth-child(2) { background: #febc2e; } .lab-bar .dots i:nth-child(3) { background: #28c840; }
.lab-bar .live { margin-left: auto; color: var(--accent); display: flex; align-items: center; gap: 6px; }
.lab-bar .live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: blink 1.6s infinite; }
.lab-body { padding: clamp(14px, 2.4vw, 26px); }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin: calc(-1 * clamp(14px, 2.4vw, 26px)) calc(-1 * clamp(14px, 2.4vw, 26px)) 22px; padding: 0 clamp(10px, 2vw, 20px); background: #0a0e15; overflow-x: auto; }
.tabs button { cursor: pointer; background: none; border: 0; border-bottom: 2px solid transparent; padding: 13px 14px 11px; font-family: var(--mono); font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.tabs button.on { color: var(--text); border-color: var(--accent); }
.tabpane { display: none; } .tabpane.on { display: block; }

.controls { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: flex-end; margin-bottom: 18px; }
.ctl { display: flex; flex-direction: column; gap: 6px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); min-width: 120px; }
.ctl output { color: var(--accent); }
.ctl .lbl { display: flex; justify-content: space-between; gap: 10px; }
select, input[type=text], input[type=number] {
  background: var(--panel); border: 1px solid var(--line-2); color: var(--text); border-radius: 8px; padding: 9px 11px; font-family: var(--mono); font-size: 13px; outline: none; min-width: 0;
}
select:focus, input[type=text]:focus { border-color: var(--accent); }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; min-width: 120px; height: 4px; border-radius: 4px; background: var(--line-2); outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); cursor: pointer; box-shadow: 0 0 0 4px rgba(124,255,178,.15); }
input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--accent); cursor: pointer; }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 9px; overflow: hidden; }
.seg button { cursor: pointer; background: transparent; border: 0; padding: 8px 12px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.seg button + button { border-left: 1px solid var(--line-2); }
.seg button.on { background: var(--accent); color: #04130a; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid-main { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; }
@media (max-width: 860px) { .grid2, .grid3, .grid-main { grid-template-columns: 1fr; } }
.panel { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 14px; min-width: 0; }
.panel h4 { margin: 0 0 10px; font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: .04em; display: flex; justify-content: space-between; gap: 10px; }
.panel h4 b { color: var(--text); font-weight: 500; }
.chart { width: 100%; height: 300px; display: block; }
.chart.sm { height: 180px; } .chart.xs { height: 120px; } .chart.lg { height: 380px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 18px; }
.kpi { border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; background: var(--panel); }
.kpi span { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--dim); text-transform: uppercase; letter-spacing: .08em; }
.kpi b { font-family: var(--mono); font-size: 19px; font-weight: 600; }
.pos { color: var(--accent) !important; } .neg { color: var(--rose) !important; } .warn { color: var(--amber) !important; }
.note { font-size: 12.5px; color: var(--dim); font-family: var(--mono); margin-top: 12px; }
table.tbl { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12.5px; }
table.tbl th, table.tbl td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: right; }
table.tbl th:first-child, table.tbl td:first-child { text-align: left; }
table.tbl th { color: var(--dim); font-weight: 500; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 8px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.legend .off { opacity: .35; }
.legend span { cursor: pointer; }

.story { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 60px 0 30px; }
.story p { color: #c3cbd8; margin: 0 0 16px; }
@media (max-width: 860px) { .story { grid-template-columns: 1fr; gap: 24px; } }
.pipeline { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.pipeline li { counter-increment: s; position: relative; padding: 0 0 18px 42px; font-family: var(--mono); font-size: 13.5px; color: var(--text); }
.pipeline li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 0; color: var(--accent); font-size: 12px; }
.pipeline li::after { content: ''; position: absolute; left: 7px; top: 22px; bottom: 2px; width: 1px; background: var(--line-2); }
.pipeline li:last-child::after { display: none; }
.next-proj { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 30px 0 80px; border-top: 1px solid var(--line); margin-top: 40px; }

/* =========================================================
   ABOUT — opening titles, scenes, comic page, themed buttons
   ========================================================= */
body.about { background: #040507; --cine: 'Cinzel', 'Trajan Pro', Georgia, serif; }

/* ---- CRT turn-on ---- */
.crt { position: fixed; inset: 0; z-index: 200; background: #000; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.crt .beam { width: 100%; height: 2px; background: #fff; box-shadow: 0 0 30px 6px #bfe; transform: scaleX(0); }
.crt.go .beam { animation: crt-on 1.05s cubic-bezier(.2,.8,.2,1) forwards; }
.crt.done { animation: crt-fade .45s forwards; }
@keyframes crt-on { 0% { transform: scaleX(0) scaleY(1); opacity: 1; } 35% { transform: scaleX(1) scaleY(1); opacity: 1; } 60% { transform: scaleX(1) scaleY(200); opacity: .9; background: #dff; } 100% { transform: scaleX(1) scaleY(600); opacity: 0; } }
@keyframes crt-fade { to { opacity: 0; visibility: hidden; } }

/* ---- opening titles ---- */
.mv-hero { position: relative; height: 100svh; min-height: 600px; overflow: hidden; background: #000; display: flex; align-items: center; justify-content: center; text-align: center; }
.mv-hero #reel { position: absolute; inset: 0; width: 100%; height: 100%; }
.mv-hero::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse at 50% 46%, transparent 38%, rgba(0,0,0,.72) 100%); }
.mv-grain { position: absolute; inset: -40px; z-index: 3; pointer-events: none; opacity: .075; will-change: transform; background-image: var(--grain); background-size: 180px; animation: grain .9s steps(5) infinite; }
@keyframes grain { 0% { transform: translate(0,0); } 20% { transform: translate(-22px,14px); } 40% { transform: translate(18px,-26px); } 60% { transform: translate(-12px,30px); } 80% { transform: translate(26px,8px); } 100% { transform: translate(0,0); } }
.mv-scan { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.02) 0 1px, rgba(0,0,0,.22) 1px 3px); }
.mv-scan::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 120% 90% at 50% 50%, transparent 55%, rgba(0,0,0,.85) 100%); box-shadow: inset 0 0 120px rgba(0,0,0,.9); }
.mv-scan::after { content: ''; position: absolute; left: 0; right: 0; height: 22vh; top: 0; transform: translateY(-22vh); will-change: transform; background: linear-gradient(transparent, rgba(190,230,255,.045), transparent); animation: roll 7s linear infinite; }
@keyframes roll { to { transform: translateY(100svh); } }
.mv-shade { position: absolute; inset: 0; z-index: 4; background: #040507; opacity: 0; pointer-events: none; }
/* the reel dissolves into the network below: no edge between the two */
.mv-hero::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; z-index: 4; pointer-events: none; background: linear-gradient(to bottom, rgba(4,5,7,0), rgba(4,5,7,.55) 55%, #040507); }
.mv-hero { background: #040507; }
.mv-titles { position: relative; z-index: 2; padding: 0 16px; transform: translateY(-4vh); }
.mv-title { font-family: var(--cine); font-weight: 700; font-size: clamp(48px, 11vw, 150px); line-height: 1; margin: 0; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  color: #efe2c4; text-shadow: 2px 0 0 rgba(255,70,90,.22), -2px 0 0 rgba(70,210,255,.2), 0 0 26px rgba(255,200,130,.28);
  opacity: 0; transition: opacity 2.2s ease; }
.mv-title.on { opacity: .8; animation: tvflick 5s steps(1) 2.2s infinite; }
@keyframes tvflick { 0%, 92%, 100% { opacity: .8; } 93% { opacity: .64; } 94% { opacity: .82; } 96% { opacity: .72; } }

/* ---- the network stage ---- */
.net { position: relative; height: calc(100vh + 9 * 36vh); margin-top: -1px; }
.net-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.net-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.net-face { position: absolute; left: 0; top: 0; width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(124,255,178,.55); box-shadow: 0 0 30px rgba(124,255,178,.25); filter: grayscale(.15); will-change: transform, opacity; z-index: 2; }
.beat { position: absolute; left: 50%; top: 0; width: min(640px, calc(100% - 32px)); transform: translate(-50%, 12px); text-align: center; opacity: 0; transition: opacity .55s ease, transform .55s ease; pointer-events: none; z-index: 3; }
.beat.on { opacity: 1; transform: translate(-50%, 0); }
.slug { font-family: 'Courier Prime', 'Courier New', monospace; font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #9aa3b2; margin: 0 0 12px; }
.slug.cut { margin: 14px 0 0; color: #6f7a8c; }
.hello { font-family: var(--cine); font-weight: 600; font-size: clamp(28px, 4vw, 46px); letter-spacing: .04em; color: #f1e6cc; margin: 0; }
.line { font-family: 'Courier Prime', 'Courier New', monospace; font-size: clamp(15px, 1.5vw, 18px); line-height: 1.6; color: #e6e2d8; margin: 0; }
.beat .line { text-shadow: 0 2px 18px rgba(4,5,7,.9), 0 0 2px rgba(4,5,7,.9); }

/* ---- credits ---- */
.credits { padding: 170px 0 210px; }
.credits .roll { max-width: 1100px; margin: 0 auto; text-align: center; }
.tbc { display: inline-block; font-family: var(--cine); font-weight: 600; font-size: clamp(22px, 3vw, 34px); letter-spacing: .14em; text-transform: uppercase; color: #e9dcbc; margin: 0 0 18px; }
.edu-line { font-family: var(--mono); font-size: 12.5px; color: var(--muted); letter-spacing: .04em; margin: 0 0 90px; }
.roll-cta { display: flex; gap: 56px; justify-content: center; align-items: center; flex-wrap: wrap; }
.contact-row { display: grid; grid-template-columns: repeat(5, auto); justify-content: center; align-items: center; gap: 44px 52px; margin-top: 56px; }
.talk { margin-top: 110px !important; }
@media (max-width: 860px) { .contact-row { grid-template-columns: repeat(2, auto); gap: 32px 28px; margin-top: 72px; } .roll-cta { gap: 28px; } }

/* the fourth wall */
.glass { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 150; pointer-events: none; }
.companion { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 40; pointer-events: none; }

/* ticket — the projects are "now showing" */
.tkt { --paper: #ffd27a; display: inline-flex; height: 78px; color: #2b1b06; filter: drop-shadow(0 8px 18px rgba(255,180,70,.18)); transition: transform .3s cubic-bezier(.2,.7,.2,1), filter .3s; }
.tkt > span { display: flex; flex-direction: column; justify-content: center; position: relative; }
.tkt-stub { padding: 0 14px 0 16px; border-radius: 6px 0 0 6px; text-align: center; border-right: 2px dashed rgba(43,27,6,.35);
  background: radial-gradient(circle at 100% 0, transparent 8px, var(--paper) 8.5px) top / 100% 51% no-repeat, radial-gradient(circle at 100% 100%, transparent 8px, var(--paper) 8.5px) bottom / 100% 51% no-repeat;
  transform-origin: 100% 100%; transition: transform .35s cubic-bezier(.3,1.4,.5,1); }
.tkt-stub small { font-family: var(--mono); font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; }
.tkt-stub b { font-family: var(--cine); font-size: 19px; line-height: 1; text-transform: uppercase; letter-spacing: .08em; }
.tkt-stub em { font-style: normal; font-family: var(--mono); font-size: 9.5px; opacity: .6; margin-top: 4px; }
.tkt-main { padding: 0 24px 0 20px; border-radius: 0 6px 6px 0; text-align: left;
  background: radial-gradient(circle at 0 0, transparent 8px, var(--paper) 8.5px) top / 100% 51% no-repeat, radial-gradient(circle at 0 100%, transparent 8px, var(--paper) 8.5px) bottom / 100% 51% no-repeat; }
.tkt-main::after { content: ''; position: absolute; inset: 7px 10px 7px 8px; border: 1px solid rgba(43,27,6,.22); border-radius: 3px; pointer-events: none; }
.tkt-main small { font-family: var(--mono); font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase; color: #8a3b12; }
.tkt-main b { font-family: var(--cine); font-weight: 700; font-size: 21px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.15; }
.tkt-main i { font-style: normal; font-family: var(--mono); font-size: 11px; opacity: .75; }
.tkt-main i .arr { display: inline-block; transition: transform .3s; }
.tkt:hover { transform: translateY(-3px); filter: drop-shadow(0 12px 24px rgba(255,180,70,.32)); }
.tkt:hover .tkt-stub { transform: rotate(-7deg) translateX(-3px); }
.tkt:hover .tkt-main i .arr { transform: translateX(4px); }

/* timeline — the work is a career line */
.tl-btn { display: inline-flex; align-items: center; gap: 16px; height: 78px; padding: 0 22px; border: 1px solid var(--line-2); border-radius: 12px; background: #0a0e15; color: var(--text); transition: border-color .3s, background .3s; }
.tl-track { position: relative; width: 96px; height: 14px; }
.tl-track::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, var(--line-2), var(--accent-2)); }
.tl-track i { position: absolute; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #0a0e15; border: 1.5px solid var(--accent-2); transition: background .3s; }
.tl-track i:nth-child(1) { left: 4%; } .tl-track i:nth-child(2) { left: 34%; } .tl-track i:nth-child(3) { left: 62%; } .tl-track i:nth-child(4) { left: 92%; }
.tl-track u { position: absolute; top: 50%; left: 4%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); transition: left 1.1s cubic-bezier(.5,0,.2,1); }
.tl-txt { display: flex; flex-direction: column; text-align: left; }
.tl-txt b { font-family: var(--mono); font-weight: 500; font-size: 16px; }
.tl-txt small { font-family: var(--mono); font-size: 11px; color: var(--dim); }
.tl-btn:hover { border-color: color-mix(in srgb, var(--accent-2) 50%, transparent); background: #0c121b; }
.tl-btn:hover .tl-track u { left: 92%; }
.tl-btn:hover .tl-track i { background: color-mix(in srgb, var(--accent-2) 55%, #0a0e15); }

/* stamp — email gets posted */
.stamp { position: relative; display: inline-block; padding: 0; background: #f3e7c9; border: 6px dotted #040507; color: #3b2a12; transform: rotate(-2deg); transition: transform .3s cubic-bezier(.3,1.4,.5,1); }
.stamp-face { display: flex; flex-direction: column; align-items: center; margin: 3px; padding: 6px 14px 7px; border: 1.5px solid #c2493b; background: linear-gradient(160deg, rgba(194,73,59,.08), rgba(53,120,170,.1)); }
.stamp-face small { font-family: var(--mono); font-size: 8.5px; letter-spacing: .25em; text-transform: uppercase; color: #c2493b; }
.stamp-ico { font-size: 22px; line-height: 1.1; color: #2f6f9e; }
.stamp-face b { font-family: var(--cine); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; }
.postmark { position: absolute; right: -34px; top: -14px; width: 62px; height: 62px; border-radius: 50%; border: 2px solid rgba(225,225,235,.75); display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(1.6) rotate(-25deg); transition: opacity .25s, transform .35s cubic-bezier(.3,1.6,.5,1); pointer-events: none;
 }
.postmark::before { content: ''; position: absolute; left: -26px; right: 50%; top: 22px; height: 18px; background: repeating-linear-gradient(180deg, rgba(225,225,235,.75) 0 2px, transparent 2px 6px); border-radius: 50%; }
.postmark span { font-family: var(--mono); font-size: 7.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(225,225,235,.85); }
.stamp:hover { transform: rotate(1deg) translateY(-2px); }
.stamp:hover .postmark { opacity: 1; transform: scale(1) rotate(-14deg); }

/* social cards */
.soc { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 16px 0 12px; border-radius: 10px; border: 1px solid var(--line-2); background: #0a0e15; color: var(--text); overflow: hidden; transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s; }
.soc .ico svg { width: 20px; height: 20px; fill: currentColor; display: block; }
.soc-txt { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.soc-txt b { font-family: var(--mono); font-weight: 500; font-size: 13.5px; }
.soc-txt small { font-family: var(--mono); font-size: 10.5px; color: var(--dim); }
/* github: a contribution graph fills in */
.gh-grid { display: grid; grid-template-columns: repeat(7, 6px); grid-auto-rows: 6px; gap: 2px; margin-left: 6px; }
.gh-grid i { border-radius: 1.5px; background: #161c26; transition: background .25s; }
.soc.gh:hover { border-color: rgba(57,211,83,.45); }
.soc.gh:hover .gh-grid i, .soc.gh:focus-visible .gh-grid i { background: var(--g); }
/* linkedin: a business card being handed over */
.soc.li { background: linear-gradient(#0a66c2, #0a66c2) top / 100% 3px no-repeat, #0d121a; border-radius: 6px; }
.soc.li .ico { color: #5aa6f0; }
.soc.li:hover { transform: rotate(-2.5deg) translateY(-4px); box-shadow: 6px 10px 0 rgba(10,102,194,.14); border-color: rgba(90,166,240,.4); }
/* kaggle: a leaderboard climbs */
.soc.kg .ico { color: #20beff; }
.kg-bars { display: flex; align-items: flex-end; gap: 3px; height: 22px; margin-left: 6px; }
.kg-bars i { width: 5px; height: 4px; border-radius: 1px; background: #1c2a36; transition: height .4s cubic-bezier(.3,1.5,.5,1), background .3s; }
.soc.kg:hover { border-color: rgba(32,190,255,.45); }
.soc.kg:hover .kg-bars i { background: #20beff; }
.soc.kg:hover .kg-bars i:nth-child(1) { height: 9px; } .soc.kg:hover .kg-bars i:nth-child(2) { height: 14px; transition-delay: .06s; }
.soc.kg:hover .kg-bars i:nth-child(3) { height: 22px; transition-delay: .12s; background: #ffcf5a; } .soc.kg:hover .kg-bars i:nth-child(4) { height: 12px; transition-delay: .18s; }
@media (max-width: 560px) { .tkt-main b { font-size: 18px; } .tl-btn, .tkt { height: 70px; } .postmark { right: -18px; } }

/* =========================================================
   WORK — a first-person walk down a city street
   ========================================================= */
body.work { overflow: hidden; height: 100svh; background: #000; overscroll-behavior: none; touch-action: none; }
.street-wrap { position: fixed; inset: 0; overflow: hidden; }
#street { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #0b0f16; }
.street-fade { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 5; transition: opacity .35s; }
.walk-title { position: fixed; left: 50%; top: 22%; transform: translateX(-50%); z-index: 6; text-align: center; pointer-events: none; transition: opacity .8s, transform .8s; }
.walk-title h1 { font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: clamp(44px, 8vw, 96px); letter-spacing: .14em; text-transform: uppercase; color: #fff8ea; margin: 0; text-shadow: 0 0 2px rgba(0,0,0,.9), 0 0 6px rgba(0,0,0,.75), 0 0 14px rgba(0,0,0,.55), 0 2px 24px rgba(0,0,0,.45); }
.walk-title p { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #fffaf0; margin: 14px 0 0; text-shadow: 0 0 2px rgba(0,0,0,.95), 0 0 6px rgba(0,0,0,.8), 0 0 12px rgba(0,0,0,.6); }
.walk-title .mouse { width: 16px; height: 25px; border: 1.5px solid currentColor; border-radius: 9px; position: relative; }
.walk-title .mouse i { position: absolute; left: 50%; top: 5px; width: 2px; height: 5px; margin-left: -1px; border-radius: 1px; background: currentColor; animation: wheel 1.6s infinite; }
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(8px); opacity: 0; } }
.walk-title.gone { opacity: 0; transform: translate(-50%, -14px); }

/* the door tag: a quiet label pinned above the entrance */
.door-tag { position: fixed; z-index: 7; left: 0; top: 0; --acc: var(--accent); --stem: 50%; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 300px; max-width: min(380px, calc(100vw - 28px)); padding: 14px 18px 14px 20px; text-align: left; color: var(--text); cursor: pointer;
  background: rgba(8, 10, 14, .9); border: 1px solid rgba(255,255,255,.13); border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,.45), inset 3px 0 0 var(--acc);
  opacity: 0; transition: opacity .35s, box-shadow .2s, border-color .2s; will-change: transform; }
.door-tag.show { opacity: 1; }
.door-tag::after { content: ''; position: absolute; top: var(--sy, 50%); height: 1px; width: var(--reach, 40px); }
.door-tag.to-r::after { left: 100%; background: linear-gradient(90deg, rgba(255,255,255,.6), rgba(255,255,255,.15)); }
.door-tag.to-l::after { right: 100%; background: linear-gradient(270deg, rgba(255,255,255,.6), rgba(255,255,255,.15)); }
.door-tag::before { content: ''; position: absolute; top: calc(var(--sy, 50%) - 4px); width: 9px; height: 9px; border-radius: 50%; background: var(--acc); animation: tagPulse 1.8s ease-out infinite; }
.door-tag.to-r::before { left: calc(100% + var(--reach, 40px) - 4px); }
.door-tag.to-l::before { right: calc(100% + var(--reach, 40px) - 5px); }
.door-tag.flat::after, .door-tag.flat::before { display: none; }
@keyframes tagPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acc) 60%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }
.door-tag .dt-k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--acc); }
.door-tag .dt-org { font-family: var(--sans); font-weight: 650; font-size: 19px; letter-spacing: -.01em; line-height: 1.2; }
.door-tag .dt-role { font-family: var(--mono); font-size: 12px; color: #aab4c4; }
.door-tag .dt-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); }
.door-tag .dt-date { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.door-tag .dt-go { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .04em; color: #0b0e14; background: var(--acc); border-radius: 999px; padding: 6px 12px; display: inline-flex; gap: 8px; align-items: center; transition: transform .2s; }
.door-tag .dt-go i { font-style: normal; transition: transform .2s; }
.door-tag:hover { border-color: color-mix(in srgb, var(--acc) 55%, rgba(255,255,255,.2)); }
.door-tag:hover .dt-go i { transform: translateX(3px); }
.door-tag:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.door-tag[hidden] { display: none !important; }
.street-load { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); transition: opacity .5s; }
.gl-ready .street-load { opacity: 0; }
.no-gl .street-load { display: none; }
.wm-logo span { display: none; font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: 30px; color: var(--acc, #fff); }
.wm-logo.none { background: #10141c; border: 1px solid color-mix(in srgb, var(--acc, #fff) 50%, transparent); }
.wm-logo.none span { display: block; }
.walk-pass { position: fixed; left: 50%; bottom: 78px; transform: translateX(-50%); z-index: 6; display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: #fff; text-shadow: 0 0 2px #000, 0 0 6px rgba(0,0,0,.8); }
.walk-pass[hidden] { display: none; }
.walk-pass .ring { --p: 0; width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(var(--accent) calc(var(--p) * 360deg), rgba(255,255,255,.25) 0); -webkit-mask: radial-gradient(circle, transparent 5px, #000 5.5px); mask: radial-gradient(circle, transparent 5px, #000 5.5px); }

/* where everything is on the street */
.work .street-wrap::after { content: ''; position: absolute; inset: auto 0 0 0; height: 140px; background: linear-gradient(transparent, rgba(3,4,7,.7)); pointer-events: none; }
.work .street-wrap::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 110px; background: linear-gradient(rgba(3,4,7,.65), transparent); z-index: 1; pointer-events: none; }
.walk-map { position: fixed; left: 50%; bottom: 22px; padding: 0 0 0; transform: translateX(-50%); z-index: 6; width: min(520px, calc(100% - 140px)); height: 30px; }
.walk-map::before { content: ''; position: absolute; left: 0; right: 0; top: 14px; height: 2px; background: rgba(255,255,255,.18); border-radius: 2px; }
.walk-map .pin { position: absolute; top: 0; transform: translateX(-50%); background: none; border: 0; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.walk-map .pin i { width: 10px; height: 10px; margin-top: 10px; border-radius: 2px; background: #0b0e14; border: 1.5px solid rgba(255,255,255,.6); transform: rotate(45deg); }
.walk-map .pin span { font-family: var(--mono); font-size: 10.5px; color: #fff; white-space: nowrap; text-shadow: 0 0 2px #000, 0 0 5px rgba(0,0,0,.85), 0 0 10px rgba(0,0,0,.6); position: absolute; top: -10px; }
.walk-map .pin.seen i { background: var(--amber); border-color: var(--amber); }
.walk-map .me { position: absolute; top: 9px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); transition: left .2s; }
.walk-list { position: fixed; right: var(--gutter); bottom: 18px; z-index: 6; font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; color: rgba(255,255,255,.8); background: rgba(10,12,16,.55); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 7px 13px; cursor: pointer; backdrop-filter: blur(6px); }
.walk-list:hover { color: #fff; border-color: rgba(255,255,255,.5); }
.walk-end { position: fixed; left: 50%; top: 30%; transform: translateX(-50%); z-index: 6; text-align: center; }
.walk-end p { font-family: 'Cinzel', Georgia, serif; font-size: clamp(20px, 2.6vw, 30px); letter-spacing: .1em; color: #f1e6cc; margin: 0 0 22px; text-shadow: 0 0 2px rgba(0,0,0,.95), 0 0 7px rgba(0,0,0,.8), 0 0 16px rgba(0,0,0,.6); }
.walk-end div { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* inside: the modal */
.wmodal[hidden], .walk-end[hidden] { display: none !important; }
.wmodal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 70px 16px 20px; background: rgba(3,4,6,.88); opacity: 0; transition: opacity .35s; }
.wmodal.show { opacity: 1; }
.wm-card { width: min(940px, 100%); max-height: calc(100svh - 100px); overflow: auto; background: linear-gradient(180deg, #10141c, #0b0e14); border: 1px solid var(--line-2); border-radius: 16px; padding: 28px clamp(20px, 4vw, 36px) 26px; box-shadow: 0 40px 120px rgba(0,0,0,.6); transform: translateY(14px); transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.wmodal.show .wm-card { transform: none; }
.wm-head { display: flex; gap: 18px; align-items: center; margin-bottom: 18px; }
.wm-logo { width: 64px; height: 64px; border-radius: 12px; background: #f4efe6; display: grid; place-items: center; flex: none; }
.wm-logo img { max-width: 48px; max-height: 48px; }
.wm-logo.dark { background: #16181c; border: 1px solid var(--line-2); }
.wm-head h2 { font-size: clamp(22px, 3vw, 30px); margin: 0; }
.wm-head p { font-family: var(--mono); font-size: 12.5px; color: var(--muted); margin: 4px 0 0; }
.wm-body p { color: #cfd6e2; font-size: 15.5px; line-height: 1.7; margin: 0 0 12px; }
.wm-body ul { margin: 6px 0 0; padding-left: 18px; color: #cfd6e2; font-size: 15px; line-height: 1.65; }
.wm-body li { margin-bottom: 8px; }
.wm-list .wm-item { padding: 16px 0; border-bottom: 1px dashed rgba(255,255,255,.08); }
.wm-list .wm-item:last-of-type { border: 0; }
.wm-list h3 { margin: 0; font-size: 18px; } .wm-list .wm-item p { margin: 6px 0 0; }
/* the exit: a lit EXIT sign */
.wm-exit { margin-top: 22px; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-family: var(--mono); font-weight: 600; font-size: 14px; letter-spacing: .22em; color: #9dffb8; background: #06140b; border: 2px solid #1f7a3d; border-radius: 6px; padding: 9px 16px 9px 12px; text-shadow: 0 0 8px rgba(80,255,140,.8); box-shadow: 0 0 18px rgba(40,200,100,.18), inset 0 0 12px rgba(40,200,100,.15); transition: box-shadow .2s, color .2s; }
.wm-exit svg { width: 18px; height: 18px; fill: currentColor; filter: drop-shadow(0 0 4px rgba(80,255,140,.8)); }
.wm-exit:hover { color: #c8ffd6; box-shadow: 0 0 28px rgba(40,200,100,.35), inset 0 0 14px rgba(40,200,100,.25); }
@media (max-width: 560px) { .walk-pass { bottom: 116px; white-space: nowrap; font-size: 11px; } .walk-map { width: calc(100% - 40px); bottom: 64px; } .walk-list { right: 50%; transform: translateX(50%); bottom: 16px; } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- lab explanations & source excerpts ---------- */
.explain { border-left: 2px solid var(--accent); background: linear-gradient(90deg, rgba(124,255,178,.06), transparent 70%); padding: 12px 16px; border-radius: 0 10px 10px 0; margin: 0 0 18px; font-size: 14.5px; color: #c9d1dd; line-height: 1.65; }
.explain b { color: var(--text); font-weight: 600; }
.explain p { margin: 0 0 6px; } .explain p:last-child { margin: 0; }
.explain code, .note code { font-family: var(--mono); font-size: 12.5px; color: var(--accent); background: rgba(124,255,178,.07); padding: 1px 5px; border-radius: 4px; }
.srcs { margin-top: 16px; display: grid; gap: 8px; }
details.src { border: 1px solid var(--line); border-radius: 10px; background: #080b11; overflow: hidden; }
details.src summary { cursor: pointer; list-style: none; padding: 10px 14px; font-family: var(--mono); font-size: 12.5px; color: var(--muted); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
details.src summary::-webkit-details-marker { display: none; }
details.src summary::before { content: '▸'; color: var(--accent); transition: transform .2s; }
details.src[open] summary::before { transform: rotate(90deg); }
details.src summary b { color: var(--text); font-weight: 500; }
details.src summary .file { color: var(--dim); margin-left: auto; font-size: 11.5px; }
details.src summary .tag, .badge { font-size: 10.5px; padding: 2px 7px; border-radius: 999px; border: 1px solid rgba(124,255,178,.35); color: var(--accent); }
details.src pre { margin: 0; padding: 14px 16px; border-top: 1px solid var(--line); overflow-x: auto; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; color: #c9d1dd; max-height: 460px; }
details.src .k { color: #c792ea; } details.src .s { color: #c3e88d; } details.src .c { color: #5a6578; font-style: italic; } details.src .n { color: #f78c6c; } details.src .f { color: #82aaff; }
details.src .gh { display: block; padding: 8px 16px 12px; font-family: var(--mono); font-size: 11.5px; color: var(--accent-2); }
.badge.rec { border-color: rgba(255,181,71,.4); color: var(--amber); }
.badge { display: inline-block; font-family: var(--mono); vertical-align: 1px; }
.log { font-family: var(--mono); font-size: 12px; background: #06080c; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; max-height: 260px; overflow: auto; color: #aab4c3; white-space: pre-wrap; line-height: 1.55; }
.log .hit { color: var(--accent); } .log .miss { color: var(--amber); } .log .dim { color: var(--dim); }

/* ---------- project themes: accent + lab ornament per subject ---------- */
[data-theme="finance"] { --accent: #5fd38d; --accent-2: #f2c14e; }
[data-theme="bank"] { --accent: #6aa8ff; --accent-2: #9fd3c7; }
[data-theme="survey"] { --accent: #5ee6ff; --accent-2: #7cffb2; }
[data-theme="stream"] { --accent: #ff5a5f; --accent-2: #ffb3a7; }
[data-theme="show"] { --accent: #ffb547; --accent-2: #ff6b8b; }
[data-theme="security"] { --accent: #a78bfa; --accent-2: #5ee6ff; }
[data-theme="claims"] { --accent: #4fb3e8; --accent-2: #7fd6c2; }
[data-theme="docs"] { --accent: #e9d8a6; --accent-2: #9ecae1; }
[data-theme="research"] { --accent: #d6b46a; --accent-2: #a3c4f3; }
[data-theme="maritime"] { --accent: #d4b483; --accent-2: #8fb8de; }
[data-theme="realestate"] { --accent: #3ecf8e; --accent-2: #e9d8a6; }
[data-theme="device"] { --accent: #93c5fd; --accent-2: #c4b5fd; }
[data-theme="sports"] { --accent: #4ade80; --accent-2: #facc15; }
[data-theme="world"] { --accent: #60a5fa; --accent-2: #34d399; }
[data-theme="publichealth"] { --accent: #9fb3c8; --accent-2: #c8b6a6; }
[data-theme="social"] { --accent: #38bdf8; --accent-2: #f472b6; }
[data-theme="search"] { --accent: #fbbf24; --accent-2: #5ee6ff; }
[data-theme="cinema"] { --accent: #f59e0b; --accent-2: #fde68a; }
[data-theme="chat"] { --accent: #818cf8; --accent-2: #5ee6ff; }
[data-theme="game"] { --accent: #ef6b5b; --accent-2: #f3d9a4; }
[data-theme="puzzle"] { --accent: #e5e7eb; --accent-2: #93c5fd; }
.pill { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); padding: 4px 10px; border-radius: 999px; }
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.pd-head .plain { font-size: 18px; color: var(--text); max-width: 60ch; margin: 10px 0 6px; }
.pd-head .lede.tech { font-size: 15px; color: var(--muted); font-family: var(--mono); }
.pcard { border-top: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.pcard .body .plain { color: var(--text); }
.pcard .body .tline { font-family: var(--mono); font-size: 12px; color: var(--dim); margin-top: 6px; }
.pcard .viz .tag { color: var(--accent); }
.lab-bar .orn { margin-left: auto; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); opacity: .85; }
.lab-bar .orn b { font-weight: 400; margin-right: 6px; }
body[data-theme] .lab { border-color: color-mix(in srgb, var(--accent) 22%, var(--line)); }
body[data-theme] .lab::before { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: .5;
  background: radial-gradient(1200px 300px at 100% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%); }
.lab { position: relative; }
.mono-logo { display: inline-grid; place-items: center; min-width: 50px; height: 50px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); font-family: var(--sans); font-weight: 800; font-size: 20px; letter-spacing: .04em; color: var(--text); background: rgba(255,255,255,.03); }

/* ---------- work modal: TL;DR, tabs, 2×2 cards, the role in depth ---------- */
.wm-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: -28px calc(-1 * clamp(20px, 4vw, 36px)) 14px; padding: 16px clamp(20px, 4vw, 36px) 12px; position: sticky; top: -28px; z-index: 3; background: linear-gradient(#10141c 75%, rgba(16,20,28,0)); }
.wm-x { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font: 600 13px var(--mono); color: var(--text); background: #0d1118; border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 14px; transition: border-color .2s, color .2s; }
.wm-x:hover { border-color: var(--accent); color: var(--accent); }
.wm-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 480px) { .wm-x span { display: none; } .wm-tldr { font-size: 11.5px; } }
.wm-tldr { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12.5px; color: var(--text); border: 1px solid var(--line-2); border-radius: 999px; padding: 7px 8px 7px 8px; background: #0d1118; transition: border-color .2s, color .2s; }
.wm-tldr b { background: var(--accent); color: #06080c; border-radius: 999px; padding: 2px 9px; font-weight: 700; letter-spacing: .06em; }
.wm-tldr i { font-style: normal; margin-right: 6px; transition: transform .2s; }
.wm-tldr:hover { border-color: var(--accent); color: var(--accent); }
.wm-tldr:hover i { transform: translateY(2px); }
.wm-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 20px; border-bottom: 1px solid var(--line); }
.wm-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); font: 600 14px var(--sans); padding: 8px 12px 10px; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: -1px; }
.wm-tabs button small { font: 400 11px var(--mono); color: var(--dim); }
.wm-tabs button.on { color: var(--text); border-color: var(--accent); }
.wm-head .wm-meta { color: var(--dim); }
.wm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 6px 0 26px; }
.wm-c { background: rgba(255,255,255,.025); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; border-top: 2px solid color-mix(in srgb, var(--acc, var(--accent)) 70%, transparent); }
.wm-c h3 { margin: 0 0 8px; font: 600 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.wm-c p { margin: 0; color: #d3d9e3; font-size: 14.5px; line-height: 1.65; }
.wm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wm-chips span { font-size: 12.5px; color: #d3d9e3; border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 10px; }
.wm-stack { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 13.5px; }
.wm-stack dt { font-family: var(--mono); font-size: 11.5px; color: var(--muted); padding-top: 2px; white-space: nowrap; }
.wm-stack dd { margin: 0; color: #d3d9e3; }
.wm-depth > h3 { font-size: 20px; margin: 0 0 12px; }
.wm-depth h4 { margin: 18px 0 6px; font: 600 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--acc, var(--accent)); }
.wm-depth p { color: #cfd6e2; font-size: 15.5px; line-height: 1.75; margin: 0 0 12px; }
.wm-depth ul { margin: 4px 0 14px; padding-left: 18px; color: #cfd6e2; font-size: 15px; line-height: 1.7; }
.wm-depth li { margin-bottom: 7px; }
.wm-depth li::marker { color: var(--acc, var(--accent)); }
.wm-list .wm-item { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px dashed rgba(255,255,255,.08); color: inherit; cursor: pointer; font: inherit; }
.wm-list .wm-item .mono { font-size: 12.5px; color: var(--muted); }
.wm-list .wm-item p:last-of-type { color: #cfd6e2; }
.wm-more { display: inline-block; margin-top: 8px; font: 600 12px var(--mono); color: var(--accent); }
.wm-back { margin-top: 18px; background: none; border: 1px solid var(--line-2); color: var(--muted); border-radius: 8px; padding: 8px 12px; font: 12.5px var(--mono); cursor: pointer; }
@media (max-width: 680px) { .wm-grid { grid-template-columns: 1fr; } }

/* ---------- about: presenting, hello subtitle, written section, talk ---------- */
.mv-pre { margin: 0 0 14px; font-family: var(--mono); font-size: clamp(11px, 1.2vw, 13px); letter-spacing: .6em; text-transform: uppercase; color: rgba(233,220,188,.7); opacity: 0; animation: preIn 1.6s ease 1.9s forwards; padding-left: .6em; }
@keyframes preIn { to { opacity: 1; } }
.hello-sub { margin: 10px auto 0; max-width: 48ch; font-size: clamp(15px, 1.45vw, 18px); line-height: 1.55; color: #cfd6e2; text-shadow: 0 2px 18px rgba(4,5,7,.9); }
.more { padding: 140px 0 40px; position: relative; }
.more-lead { max-width: 760px; margin: 0 auto 70px; text-align: center; }
.more-lead h2 { font-family: var(--cine); font-weight: 600; font-size: clamp(26px, 3.4vw, 40px); letter-spacing: .04em; color: #f1e6cc; margin: 6px 0 20px; }
.more-lead p:last-child { font-size: clamp(16px, 1.6vw, 18.5px); line-height: 1.8; color: #cfd6e2; }
.more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px); }
.more-col { border-top: 1px solid var(--line-2); padding-top: 20px; }
.more-col h3 { margin: 0 0 12px; font: 600 12px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: #e9dcbc; }
.more-col p, .more-col li { color: #c3cbd8; font-size: 15.5px; line-height: 1.75; }
.more-col p { margin: 0 0 12px; }
.more-col ul { margin: 0; padding-left: 18px; }
.more-col li { margin-bottom: 8px; }
.more-col li b { color: #eef1f6; font-weight: 600; }
@media (max-width: 860px) { .more-grid { grid-template-columns: 1fr; } .more { padding-top: 100px; } }
.talk { margin: 0 auto 10px; max-width: 560px; }
.talk h2 { font-family: var(--cine); font-weight: 600; font-size: clamp(24px, 3vw, 34px); letter-spacing: .06em; color: #f1e6cc; margin: 0 0 8px; }
.talk p { color: var(--muted); margin: 0; }
.soc.cvb .ico svg { width: 20px; height: 20px; fill: currentColor; }
.pd-head .pill { margin-bottom: 14px; }
.lab-body input[type=text], .lab-body input:not([type]), .lab-body textarea { background: #0b0f16; border: 1px solid var(--line-2); color: var(--text); border-radius: 8px; padding: 8px 10px; font: 14px var(--sans); outline: none; box-sizing: border-box; }
.lab-body input:not([type]):focus, .lab-body textarea:focus { border-color: var(--accent); }
.lab-body textarea { font-family: var(--mono); font-size: 12.5px; line-height: 1.6; resize: vertical; }

/* ---------- home: one continuous field, highlight reel ---------- */
body[data-page="home"] .field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; }
body[data-page="home"] .hero { z-index: 2; }
body[data-page="home"] .section, body[data-page="home"] .footer { position: relative; z-index: 1; background: transparent; }
body[data-page="home"] .footer { border-top-color: rgba(30,39,53,.6); }
.hero .headline { min-height: 2.1em; }
.hero.done .socials { margin-top: 34px; }
.hero .socials { margin-top: 34px; }
.home-about .title { margin-bottom: 0; }
.reel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: linear-gradient(90deg, transparent, rgba(42,53,70,.7) 12%, rgba(42,53,70,.7) 88%, transparent); border-top: 1px solid rgba(42,53,70,.55); border-bottom: 1px solid rgba(42,53,70,.55); }
.reel .hl { background: rgba(6,8,12,.9); padding: 26px 22px 24px; display: flex; flex-direction: column; gap: 4px; min-height: 172px; transition: background .3s; }
.reel .hl:hover { background: rgba(12,18,26,.9); }
.reel .hl b { font-family: var(--mono); font-weight: 700; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.02em; color: var(--text); line-height: 1.15; }
.reel .hl:nth-child(4n+1) b { color: var(--accent); }
.reel .hl .rl { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2); }
.reel .hl p { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: #aab4c4; }
@media (max-width: 960px) { .reel { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .reel { grid-template-columns: 1fr; } .reel .hl { min-height: 0; } }

.story-home { max-width: 70ch; }
.story-home p { font-size: clamp(17px, 1.7vw, 20px); line-height: 1.8; color: #c3cbd8; margin: 0 0 22px; }
.story-home p:first-child { color: var(--text); }
.story-home p:last-child { color: var(--text); margin-bottom: 0; }

/* ---------- project pages: the four-step story, folded tech notes, chapters ---------- */
.p-story { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 40px 0 0; border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); border-radius: 14px; overflow: hidden; }
.p-story .ps { padding: 18px 20px 20px; border-right: 1px solid var(--line); position: relative; background: rgba(255,255,255,.015); }
.p-story .ps:last-child { border-right: 0; background: color-mix(in srgb, var(--accent) 7%, transparent); }
.p-story .ps:not(:last-child)::after { content: '→'; position: absolute; right: -9px; top: 18px; color: var(--accent); background: var(--bg); font-size: 13px; line-height: 1; padding: 2px 0; z-index: 1; }
.p-story .ps-n { font-family: var(--mono); font-size: 11px; color: var(--accent); margin-right: 8px; }
.p-story .ps-k { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.p-story p { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--text); }
@media (max-width: 860px) { .p-story { grid-template-columns: 1fr 1fr; } .p-story .ps:nth-child(2) { border-right: 0; } .p-story .ps:nth-child(-n+2) { border-bottom: 1px solid var(--line); } .p-story .ps::after { display: none; } }
@media (max-width: 520px) { .p-story { grid-template-columns: 1fr; } .p-story .ps { border-right: 0; border-bottom: 1px solid var(--line); } }
.explain details.tech { margin-top: 8px; }
.explain details.tech summary { cursor: pointer; list-style: none; font-family: var(--mono); font-size: 11.5px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
.explain details.tech summary::-webkit-details-marker { display: none; }
.explain details.tech summary::before { content: '+'; color: var(--accent); font-weight: 700; }
.explain details.tech[open] summary::before { content: '–'; }
.explain details.tech p { margin-top: 8px; font-size: 13.5px; color: #aab4c4; }
.tabs button .ch-n { display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; border: 1px solid var(--line-2); font-size: 10.5px; margin-right: 8px; color: var(--muted); }
.tabs button.on .ch-n { background: var(--accent); border-color: var(--accent); color: #06080c; font-weight: 700; }
.next-ch { display: flex; margin: 22px 0 0 auto; background: none; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line-2)); color: var(--accent); font: 600 12.5px var(--mono); padding: 9px 14px; border-radius: 999px; cursor: pointer; gap: 8px; }
.next-ch:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* ---------- lab skins: each lab dressed for its domain ---------- */
body[data-theme] .lab { background-color: var(--skin-bg, var(--bg-2)); background-image: var(--skin-tex, none); }
body[data-theme] .lab-bar, body[data-theme] .tabs { background: var(--skin-bar, #0a0e15); }
body[data-theme] .lab .panel, body[data-theme] .lab .kpi { background: var(--skin-panel, var(--panel)); border-color: var(--skin-line, var(--line)); }
body[data-theme] .lab .panel h4 b, body[data-theme] .tabs button { font-family: var(--skin-font, var(--mono)); }
body[data-theme] .lab .explain { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%); }
/* markets: a trading terminal */
body[data-theme="finance"] { --skin-bg: #07090a; --skin-bar: #0b0f0c; --skin-panel: #0b100d; --skin-line: #1b2a20; --skin-tex: linear-gradient(rgba(95,211,141,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(95,211,141,.035) 1px, transparent 1px); }
body[data-theme="finance"] .lab { background-size: 22px 22px; }
body[data-theme="finance"] .lab-bar::after { content: 'AAPL 0.4%  ·  JNJ −0.2%  ·  PFE 1.1%  ·  MRK 0.6%  ·  ABBV −0.3%'; font-size: 11px; color: #5fd38d; opacity: .6; white-space: nowrap; overflow: hidden; max-width: 34%; }
/* banking: a calm risk desk */
body[data-theme="bank"] { --skin-bg: #0a0f1a; --skin-bar: #0c1322; --skin-panel: #0e1626; --skin-line: #1d2a42; --skin-tex: radial-gradient(1200px 400px at 100% 0, rgba(106,168,255,.08), transparent 60%); }
/* deep learning: a topographic survey */
body[data-theme="survey"] { --skin-bg: #070b10; --skin-panel: #0b1118; --skin-tex: repeating-radial-gradient(circle at 80% 10%, rgba(94,230,255,.035) 0 1px, transparent 1px 26px); }
/* streaming catalogue */
body[data-theme="stream"] { --skin-bg: #0b0708; --skin-bar: #120a0b; --skin-panel: #140c0d; --skin-line: #2c1a1c; --skin-tex: linear-gradient(180deg, rgba(255,90,95,.07), transparent 220px); --skin-font: var(--sans); }
/* TV game show: stage lights */
body[data-theme="show"] { --skin-bg: #0d0914; --skin-bar: #130d1d; --skin-panel: #150f20; --skin-line: #2a2040; --skin-tex: radial-gradient(500px 260px at 20% 0, rgba(255,181,71,.12), transparent 70%), radial-gradient(500px 260px at 80% 0, rgba(255,107,139,.1), transparent 70%); --skin-font: var(--sans); }
/* privacy: a secured console */
body[data-theme="security"] { --skin-bg: #08070e; --skin-panel: #0e0c18; --skin-line: #231d3a; --skin-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48'%3E%3Cpath d='M14 0l14 8v16l-14 8-14-8V8z' fill='none' stroke='%23a78bfa' stroke-opacity='.06'/%3E%3C/svg%3E"); }
/* clinical: claims desk and public health — clean slate blue, rounded, sans */
body[data-theme="claims"], body[data-theme="publichealth"] { --skin-bg: #0a1117; --skin-bar: #0d1820; --skin-panel: #0f1a23; --skin-line: #1e3140; --skin-font: var(--sans); --skin-tex: linear-gradient(180deg, rgba(79,179,232,.06), transparent 160px); }
body[data-theme="claims"] .lab-bar::after { content: ''; flex: 0 0 120px; height: 14px; margin-left: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14'%3E%3Cpath d='M0 7h40l5-6 6 12 5-9 4 3h60' fill='none' stroke='%234fb3e8' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat; opacity: .8; }
/* documents: paper on a dark desk */
body[data-theme="docs"] { --skin-bg: #0f0e0c; --skin-bar: #15130f; --skin-panel: #16140f; --skin-line: #2c271d; --skin-font: Georgia, 'Times New Roman', serif; --skin-tex: radial-gradient(900px 300px at 50% 0, rgba(233,216,166,.06), transparent 70%); }
/* research: a library — leather and serif */
body[data-theme="research"] { --skin-bg: #100d0a; --skin-bar: #16110c; --skin-panel: #17120d; --skin-line: #2e2418; --skin-font: Georgia, 'Times New Roman', serif; --skin-tex: repeating-linear-gradient(90deg, rgba(214,180,106,.025) 0 2px, transparent 2px 60px); }
/* maritime: a navy chart table with brass */
body[data-theme="maritime"] { --skin-bg: #08101a; --skin-bar: #0b1522; --skin-panel: #0d1826; --skin-line: #20344c; --skin-font: Georgia, 'Times New Roman', serif; --skin-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='40'%3E%3Cpath d='M0 20q20-10 40 0t40 0 40 0 40 0' fill='none' stroke='%238fb8de' stroke-opacity='.05'/%3E%3C/svg%3E"); }
/* real estate: blueprint */
body[data-theme="realestate"] { --skin-bg: #08121a; --skin-panel: #0b1821; --skin-line: #1a3342; --skin-tex: linear-gradient(rgba(62,207,142,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(62,207,142,.04) 1px, transparent 1px), linear-gradient(rgba(62,207,142,.02) 1px, transparent 1px), linear-gradient(90deg, rgba(62,207,142,.02) 1px, transparent 1px); --skin-font: var(--sans); }
body[data-theme="realestate"] .lab { background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px; }
/* consumer tech: brushed graphite */
body[data-theme="device"] { --skin-bg: #0b0d11; --skin-bar: #101319; --skin-panel: #12151c; --skin-line: #242a36; --skin-font: var(--sans); --skin-tex: repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px); }
/* cricket: floodlit pitch */
body[data-theme="sports"] { --skin-bg: #061109; --skin-bar: #08160c; --skin-panel: #0a1a0f; --skin-line: #173322; --skin-font: var(--sans); --skin-tex: repeating-linear-gradient(90deg, rgba(74,222,128,.035) 0 60px, transparent 60px 120px), radial-gradient(800px 300px at 50% 0, rgba(250,204,21,.08), transparent 70%); }
/* world briefing: map dots */
body[data-theme="world"] { --skin-bg: #070c14; --skin-panel: #0b121d; --skin-line: #1a2738; --skin-tex: radial-gradient(rgba(96,165,250,.08) 1px, transparent 1.4px); }
body[data-theme="world"] .lab { background-size: 14px 14px; }
/* social feed */
body[data-theme="social"] { --skin-bg: #080c12; --skin-panel: #0d141d; --skin-line: #1b2838; --skin-font: var(--sans); --skin-tex: linear-gradient(135deg, rgba(56,189,248,.06), transparent 40%, rgba(244,114,182,.05)); }
/* search console */
body[data-theme="search"] { --skin-bg: #0b0a07; --skin-bar: #11100a; --skin-panel: #12110b; --skin-line: #2a2716; --skin-tex: linear-gradient(rgba(251,191,36,.03) 50%, transparent 50%); }
body[data-theme="search"] .lab { background-size: 100% 4px; }
/* help-desk chat */
body[data-theme="chat"] { --skin-bg: #0a0b14; --skin-panel: #10121e; --skin-line: #20233a; --skin-font: var(--sans); --skin-tex: radial-gradient(700px 300px at 0 100%, rgba(129,140,248,.08), transparent 70%); }
/* board games: felt and wood */
body[data-theme="game"] { --skin-bg: #0b1410; --skin-bar: #2a1d14; --skin-panel: #0f1a14; --skin-line: #23362b; --skin-font: Georgia, 'Times New Roman', serif; --skin-tex: radial-gradient(900px 500px at 50% 40%, rgba(46,120,80,.22), transparent 70%); }
body[data-theme="game"] .lab-bar, body[data-theme="game"] .tabs { color: #e8d5b0; border-color: #3b2a1e; }
body[data-theme="game"] .tabs button { color: #cdb894; }
/* puzzle book */
body[data-theme="puzzle"] { --skin-bg: #0c0d10; --skin-panel: #121317; --skin-line: #2a2d35; --skin-tex: linear-gradient(rgba(229,231,235,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(229,231,235,.03) 1px, transparent 1px); }
body[data-theme="puzzle"] .lab { background-size: 30px 30px; }

/* ---------- project pages: everything laid out, nothing behind menus ---------- */
.metrics.m1 { grid-template-columns: 1fr; max-width: 360px; } .metrics.m2 { grid-template-columns: 1fr 1fr; max-width: 560px; }
.lab-body .tabpane { display: block; }
.lab-body .tabpane + .tabpane { margin-top: 44px; padding-top: 30px; border-top: 1px dashed var(--skin-line, var(--line-2)); }
.ch-h { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; font-family: var(--skin-font, var(--sans)); font-size: clamp(19px, 2vw, 23px); font-weight: 650; text-transform: capitalize; }
.ch-h span { font-family: var(--mono); font-size: 12px; color: var(--accent); }
.explain .tech { margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(255,255,255,.08); }
.explain .tech p { font-size: 13.5px; color: #9aa6b8; margin: 0 0 6px; }
.lab .srcs, .lab .next-ch { display: none; }
.pcard.linked { cursor: pointer; }

/* ---------- whole-page domain themes: the page wears the same skin as its lab ---------- */
body[data-theme][data-page="projects"] { background-color: var(--skin-bg, var(--bg)); background-image: var(--skin-tex, none); }
body[data-theme] .pd-head { border-bottom-color: var(--skin-line, var(--line)); background: transparent; }
body[data-theme] .pd-head h1 { font-family: var(--skin-font, var(--sans)); }
body[data-theme] .metrics { background: var(--skin-line, var(--line)); border-color: var(--skin-line, var(--line)); }
body[data-theme] .metrics div, body[data-theme] .p-story .ps { background: var(--skin-panel, var(--bg-2)); }
body[data-theme] .p-story { border-color: var(--skin-line, var(--line)); }
body[data-theme] .lab { background-color: transparent; background-image: none; border-color: var(--skin-line, var(--line-2)); }
body[data-theme] .lab-bar { background: var(--skin-bar, #0a0e15); }
body[data-theme="finance"] .lab, body[data-theme="realestate"] .lab, body[data-theme="world"] .lab, body[data-theme="search"] .lab, body[data-theme="puzzle"] .lab { background-size: auto; }
body[data-theme="finance"][data-page="projects"] { background-size: 22px 22px; }
body[data-theme="realestate"][data-page="projects"] { background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px; }
body[data-theme="world"][data-page="projects"] { background-size: 14px 14px; }
body[data-theme="search"][data-page="projects"] { background-size: 100% 4px; }
body[data-theme="puzzle"][data-page="projects"] { background-size: 30px 30px; }
/* games: the whole page is the table — felt, wood rails, serif type */
body[data-theme="game"][data-page="projects"] { background: radial-gradient(1200px 900px at 50% 400px, #17402b, #0a1d13 70%); background-color: #0a1d13; }
body[data-theme="game"] .pd-head { border-bottom: 10px solid #3b2a1e; box-shadow: inset 0 -2px 0 #6b4c33; }
body[data-theme="game"] .pd-head h1 { color: #f3e7c9; }
body[data-theme="game"] .lab { border: 8px solid #3b2a1e; border-radius: 10px; }
/* TV game show (La Ghigliottina): studio stage — spotlights, gold, bold type */
body[data-theme="show"][data-page="projects"] { background: radial-gradient(700px 520px at 18% -10%, rgba(255,181,71,.22), transparent 70%), radial-gradient(700px 520px at 82% -10%, rgba(255,107,139,.18), transparent 70%), linear-gradient(#120b1c, #0b0712 900px); background-color: #0b0712; }
body[data-theme="show"] .pd-head h1 { font-weight: 800; letter-spacing: -.01em; background: linear-gradient(180deg, #ffe3a3, #ffb547); -webkit-background-clip: text; background-clip: text; color: transparent; }
body[data-theme="show"] .pd-head { border-bottom: 2px solid transparent; border-image: repeating-linear-gradient(90deg, #ffb547 0 10px, transparent 10px 22px) 1; }
body[data-theme="show"] .lab { border: 2px solid rgba(255,181,71,.45); box-shadow: 0 0 0 6px rgba(255,181,71,.06), 0 40px 120px -40px rgba(255,107,139,.35); }
body[data-theme="puzzle"] .pd-head h1 { font-family: var(--mono); }
/* clinical pages: calm, clean, rounded */
body[data-theme="claims"] .pd-head h1, body[data-theme="publichealth"] .pd-head h1 { font-weight: 600; }

/* ---------- project overview: key points, collapsible ---------- */
.p-ov { margin: 40px 0 0; border: 1px solid var(--skin-line, var(--line)); border-radius: 14px; background: var(--skin-panel, var(--bg-2)); }
.p-ov summary { cursor: pointer; list-style: none; padding: 16px 20px; font-family: var(--skin-font, var(--sans)); font-weight: 650; font-size: 18px; display: flex; align-items: center; gap: 10px; }
.p-ov summary::-webkit-details-marker { display: none; }
.p-ov summary::after { content: '–'; margin-left: auto; font-family: var(--mono); color: var(--accent); }
.p-ov:not([open]) summary::after { content: '+'; }
.p-ov .ov-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 4px 34px; padding: 0 20px 18px; border-top: 1px solid var(--skin-line, var(--line)); }
.p-ov h3 { margin: 16px 0 6px; font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.p-ov ul { margin: 0; padding-left: 16px; }
.p-ov li { font-size: 14.5px; line-height: 1.6; color: #cfd6e2; margin-bottom: 6px; }
html:has(body[data-page="projects"][data-theme]) { background: none; }
.wm-card { overscroll-behavior: contain; }
.wm-logo:has(img) { width: auto; min-width: 64px; padding: 0 12px; } .wm-logo img { max-width: 150px; max-height: 40px; }

.beat .beat-logo { display: inline-block; margin-top: 14px; background: #fff; padding: 8px 12px; border-radius: 8px; }
.beat .beat-logo img { display: block; height: 22px; width: auto; }

/* small screens: nothing in a lab spills past its edge */
.seg { flex-wrap: wrap; max-width: 100%; }
.explain code, .lab-body p code { overflow-wrap: anywhere; }
#labBody .form { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* project pages: hold the space below the lab until it has built itself, so nothing jumps */
.lab-loading #labBody { min-height: 70vh; }
.lab-loading #story, .lab-loading #nextProj, .lab-loading .footer { visibility: hidden; }
.pd-boot .pd-head, .pd-boot .pp-head, .pd-boot main { visibility: hidden; }

/* ---------- about: theme slugs, the final beat, the two sets ---------- */
.slug span { display: inline-block; margin-left: 12px; padding-left: 12px; border-left: 1px solid rgba(154,163,178,.35); font-weight: 400; letter-spacing: .12em; color: #6f7a8c; }
.beat .slug { font-size: 14px; letter-spacing: .22em; color: #d9cfb6; }
.beat.last { width: min(760px, calc(100% - 32px)); }
.ways { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; text-align: left; }
.ways li { font-size: 14px; line-height: 1.55; color: #b9c1ce; border-top: 1px solid rgba(240,230,204,.16); padding-top: 10px; text-shadow: 0 2px 14px rgba(4,5,7,.95); }
.ways b { display: block; font-family: var(--cine); font-weight: 600; letter-spacing: .06em; color: #f1e6cc; font-size: 15px; margin-bottom: 2px; }
@media (max-width: 640px) { .ways { grid-template-columns: 1fr; gap: 8px; } .ways li { font-size: 13px; } .beat .line { font-size: 14.5px; } }
.credits-copy { margin: 70px 0 0; font-family: var(--mono); font-size: 11.5px; color: var(--dim); }
.credits .tbc { font-size: clamp(24px, 3.4vw, 40px); }

/* two old television sets; each switches on like the opening reel */
.tvs { display: flex; justify-content: center; gap: clamp(28px, 6vw, 90px); flex-wrap: wrap; }
.tv { position: relative; display: flex; flex-direction: column; align-items: center; width: min(340px, 86vw); padding-top: 44px; color: inherit; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.tv:hover { transform: translateY(-4px); }
.tv-ant { position: absolute; top: 0; left: 50%; width: 0; height: 48px; }
.tv-ant::before, .tv-ant::after { content: ''; position: absolute; bottom: 0; width: 2px; height: 56px; background: linear-gradient(#cfd6e2, #5d6676); transform-origin: bottom center; border-radius: 2px; }
.tv-ant::before { transform: rotate(-28deg); } .tv-ant::after { transform: rotate(24deg); }
.tv:hover .tv-ant::before { transform: rotate(-34deg); transition: transform .4s; } .tv:hover .tv-ant::after { transform: rotate(30deg); transition: transform .4s; }
.tv-set { position: relative; display: flex; gap: 12px; width: 100%; padding: 14px; border-radius: 18px;
  background: linear-gradient(160deg, #6b4a2e, #3d2716 60%, #2a1a0e); box-shadow: inset 0 2px 0 rgba(255,220,170,.18), inset 0 -3px 0 rgba(0,0,0,.35), 0 26px 50px -18px rgba(0,0,0,.85); }
.tv-set::before { content: ''; position: absolute; left: 50%; top: -8px; width: 34px; height: 12px; margin-left: -17px; border-radius: 8px 8px 0 0; background: #2a1a0e; }
.tv-screen { position: relative; flex: 1; aspect-ratio: 4 / 3; border-radius: 22px / 26px; overflow: hidden; background: #050607; box-shadow: inset 0 0 0 6px #17110b, inset 0 0 30px 10px rgba(0,0,0,.9); }
.tv-pic { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 14px; text-align: center; opacity: 0; transition: opacity .5s ease .75s;
  background: radial-gradient(ellipse at 50% 45%, rgba(110,180,220,.22), rgba(10,18,26,.95) 72%), #08121a; }
.tv-pic::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, rgba(255,255,255,.03) 0 1px, rgba(0,0,0,.28) 1px 3px); pointer-events: none; }
.tv-k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase; color: rgba(233,220,188,.7); }
.tv-t { font-family: var(--cine); font-weight: 700; font-size: clamp(24px, 3vw, 32px); letter-spacing: .12em; text-transform: uppercase; color: #f1e6cc; text-shadow: 2px 0 0 rgba(255,70,90,.25), -2px 0 0 rgba(70,210,255,.22), 0 0 18px rgba(255,200,130,.3); }
.tv-ch { min-height: 2.6em; max-width: 92%; font-family: 'Courier Prime', var(--mono); font-size: 13px; line-height: 1.3; color: #cfe6f0; opacity: 0; transform: translateY(3px); transition: opacity .25s, transform .25s; }
.tv-ch.in { opacity: .9; transform: none; }
.tv-beam { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: #fff; box-shadow: 0 0 18px 4px #bfe; transform: scaleX(0); opacity: 0; }
.tv.on .tv-beam { animation: crt-on 1.05s cubic-bezier(.2,.8,.2,1) forwards; }
.tv.on .tv-pic { opacity: 1; }
.tv.on .tv-t { animation: tvflick 5s steps(1) 2s infinite; }
.tv.blip .tv-pic { animation: blip .32s steps(2); }
@keyframes blip { 0% { filter: brightness(1.9) contrast(1.4); transform: translateY(-2px) skewX(-3deg); } 50% { filter: brightness(.6); transform: translateY(2px); } 100% { filter: none; transform: none; } }
.tv-glass { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(ellipse 70% 50% at 30% 18%, rgba(255,255,255,.13), transparent 60%), radial-gradient(ellipse at 50% 50%, transparent 58%, rgba(0,0,0,.55)); }
.tv-panel { width: 50px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 8px; }
.tv-panel i { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e9d8b8, #8e7651 55%, #4a3923); box-shadow: 0 2px 4px rgba(0,0,0,.6); position: relative; transition: transform .5s; }
.tv-panel i::after { content: ''; position: absolute; left: 50%; top: 3px; width: 2px; height: 8px; margin-left: -1px; background: #3a2c18; border-radius: 1px; }
.tv:hover .tv-panel i:first-child { transform: rotate(60deg); }
.tv-panel u { flex: 1; width: 34px; margin-bottom: 4px; border-radius: 5px; background: repeating-linear-gradient(to bottom, #1d130a 0 2px, #4b3520 2px 5px); }
.tv-feet { display: flex; justify-content: space-between; width: 70%; height: 14px; }
.tv-feet::before, .tv-feet::after { content: ''; width: 10px; height: 14px; background: #24170c; border-radius: 0 0 4px 4px; }
.tv:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 20px; }
@media (max-width: 560px) { .tv-panel { width: 38px; } .tv-panel i { width: 20px; height: 20px; } }

/* =========================================================
   PROJECT PAGES — each page dressed as its domain
   ========================================================= */
body.pp .footer { position: relative; z-index: 1; }
.pp-head { position: relative; overflow: hidden; padding: 128px 0 54px; min-height: min(560px, 74svh); display: flex; align-items: flex-end; border-bottom: 1px solid var(--skin-line, var(--line)); }
.pp-scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pp-scene::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--skin-bg, var(--bg)) 18%, color-mix(in srgb, var(--skin-bg, var(--bg)) 70%, transparent) 46%, transparent 72%), linear-gradient(to top, var(--skin-bg, var(--bg)), transparent 30%); }
.pp-head-in { position: relative; z-index: 1; width: 100%; }
.pp-head-in > * { max-width: 680px; }
.pp-back { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 26px; padding: 9px 16px 9px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line-2)); background: color-mix(in srgb, var(--skin-bg, var(--bg)) 75%, transparent); font: 600 14px var(--sans); color: var(--text); letter-spacing: .01em; transition: border-color .2s, color .2s, transform .2s; }
.pp-back:hover { border-color: var(--accent); color: var(--accent); }
.pp-back:hover .pp-back-arr { transform: translateX(-3px); }
.pp-back-arr { display: inline-block; color: var(--accent); transition: transform .2s; }
.pp-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.pp-kicker .pill { margin: 0; }
.pp-yr { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.pp-head h1, .pp-side h1 { font-family: var(--skin-display, var(--skin-font, var(--sans))); font-size: clamp(32px, 4.8vw, 58px); font-weight: 750; line-height: 1.06; letter-spacing: -.02em; max-width: 18ch; }
.pp-head .plain, .pp-side .plain { font-size: clamp(17px, 1.7vw, 20px); line-height: 1.6; color: var(--text); max-width: 56ch; margin: 18px 0 0; }
.pp-head .metrics { margin-top: 26px; }
.pp-head .actions, .pp-side .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.pp-head .actions:empty, .pp-side .actions:empty { display: none; }

/* the question in four plain steps */
.pp-q { display: grid; grid-template-columns: repeat(4, 1fr); margin: 46px 0 0; border-top: 1px solid var(--skin-line, var(--line)); border-bottom: 1px solid var(--skin-line, var(--line)); }
.pq { padding: 20px 22px 22px 0; }
.pq + .pq { padding-left: 22px; border-left: 1px solid var(--skin-line, var(--line)); }
.pq-k { display: flex; align-items: baseline; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pq-k i { font-style: normal; color: var(--accent); }
.pq p { margin: 10px 0 0; font-size: 16px; line-height: 1.6; color: var(--text); }
.pq:first-child p { font-family: var(--skin-display, var(--skin-font, var(--sans))); font-size: 18px; }
@media (max-width: 900px) { .pp-q { grid-template-columns: 1fr 1fr; } .pq:nth-child(3) { padding-left: 0; border-left: 0; } .pq:nth-child(-n+2) { border-bottom: 1px solid var(--skin-line, var(--line)); } }
@media (max-width: 520px) { .pp-q { grid-template-columns: 1fr; } .pq, .pq + .pq { padding: 16px 0; border-left: 0; } .pq + .pq { border-top: 1px solid var(--skin-line, var(--line)); } .pq:nth-child(-n+2) { border-bottom: 0; } }

/* the work: on the page itself, no window around it */
.pp-body.lab-body { padding: 0; margin: 56px 0 0; }
.pp-body .ch-h { font-family: var(--skin-display, var(--skin-font, var(--sans))); font-size: clamp(23px, 2.6vw, 32px); font-weight: 700; text-transform: none; margin: 0 0 16px; letter-spacing: -.01em; }
.pp-body .tabpane + .tabpane, .pp-body .pp-more { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--skin-line, var(--line-2)); }
.pp-more > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; padding: 18px 22px; border: 1px solid var(--skin-line, var(--line-2)); border-radius: 14px; background: var(--skin-panel, var(--panel)); transition: border-color .2s; }
.pp-more > summary::-webkit-details-marker { display: none; }
.pp-more > summary span { font: 650 17px var(--skin-font, var(--sans)); color: var(--text); }
.pp-more > summary span::after { content: ' +'; color: var(--accent); font-family: var(--mono); }
.pp-more[open] > summary span::after { content: ' –'; }
.pp-more > summary small { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.pp-more > summary:hover { border-color: var(--accent); }
.pp-more[open] > summary { margin-bottom: 34px; }
.pp-more .tabpane + .tabpane { margin-top: 54px; padding-top: 34px; border-top: 1px dashed var(--skin-line, var(--line-2)); }

/* how it was built */
.pp-build { margin-top: 90px; padding-top: 50px; border-top: 1px solid var(--skin-line, var(--line)); }
.pp-h { font-family: var(--skin-display, var(--skin-font, var(--sans))); font-size: clamp(24px, 2.8vw, 34px); font-weight: 700; margin: 0 0 26px; }
.pp-build-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; }
.pp-build-grid p { color: #c3cbd8; margin: 0 0 14px; line-height: 1.7; }
.pp-build-grid .lede.tech { font-family: var(--mono); font-size: 14.5px; color: var(--muted); margin-bottom: 18px; }
.pp-build .p-ov { margin-top: 34px; }
@media (max-width: 860px) { .pp-build-grid { grid-template-columns: 1fr; gap: 24px; } }
body.pp .next-proj { margin-top: 70px; }

/* games: the board is the page, notes beside it */
.pp-play { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; padding-top: 108px; }
.pp-play .pp-body.lab-body { margin: 0; }
.pp-side { position: sticky; top: 96px; display: flex; flex-direction: column; }
.pp-side .pp-back { align-self: flex-start; margin-bottom: 20px; }
.pp-side h1 { font-size: clamp(28px, 3vw, 40px); }
.pp-side .plain { font-size: 16.5px; margin-top: 12px; }
.pp-side .metrics { display: none; }
.pp-side .pp-howto { margin: 20px 0 0; font-size: 14px; }
.pp-howto-k { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent) !important; margin-bottom: 4px !important; }
.pp-side .actions { margin-top: 20px; }
.pp-q.pp-q-side { grid-template-columns: 1fr; margin: 26px 0 0; border: 0; }
.pp-q-side .pq, .pp-q-side .pq + .pq { padding: 12px 0; border-left: 0; border-top: 1px solid var(--skin-line, var(--line)); }
.pp-q-side .pq p, .pp-q-side .pq:first-child p { font-size: 14.5px; font-family: var(--sans); margin-top: 6px; }
@media (min-width: 861px) { .pp-game .pp-body > div > .tabpane:first-of-type > .grid-main { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.pp-body .panel .ctl { min-width: 0 !important; max-width: 100%; }
.pp-body .panel .controls > * { max-width: 100%; }
.pp-game .lab-ck .board, .pp-game .lab-sd .grid9 { width: min(560px, 100%); }
@media (max-width: 980px) { .pp-play { grid-template-columns: 1fr; padding-top: 96px; } .pp-side { position: static; order: -1; } }

/* ---------- scenes ---------- */
.pp-scene svg { position: absolute; }
/* markets */
.sc-tape { position: absolute; left: 0; right: 0; top: 72px; height: 30px; overflow: hidden; background: #040705; border-top: 1px solid #1b2a20; border-bottom: 1px solid #1b2a20; font: 12px var(--mono); color: #b8c9bd; white-space: nowrap; z-index: 2; }
.sc-tape > div { display: inline-flex; gap: 46px; padding: 7px 0 0 20px; animation: tape 38s linear infinite; }
.sc-tape b { color: #e6efe9; font-weight: 600; margin-right: 6px; } .sc-tape i { font-style: normal; margin-left: 6px; } .sc-tape .up { color: #5fd38d; } .sc-tape .dn { color: #e5605f; }
@keyframes tape { to { transform: translateX(-50%); } }
.sc-candles { right: 0; bottom: 0; width: 64%; height: 78%; }
/* banking */
.sc-rosette { right: -40px; top: 30px; width: 520px; height: 520px; }
.sc-card { position: absolute; right: 9%; top: 32%; width: 320px; aspect-ratio: 1.586; border-radius: 16px; padding: 22px; transform: rotate(-8deg); background: linear-gradient(135deg, #1d3a6b, #0f1f3c 60%, #0a1428); border: 1px solid rgba(160,200,255,.25); box-shadow: 0 30px 60px -20px rgba(0,0,0,.8); display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; opacity: .85; }
.sc-card .chip { position: absolute; left: 22px; top: 52px; width: 44px; height: 34px; border-radius: 6px; background: linear-gradient(135deg, #e8cf8a, #a8893f); }
.sc-card .cn { font: 15px var(--mono); letter-spacing: .14em; color: #cfe0ff; } .sc-card .cl { font: 10px var(--mono); letter-spacing: .2em; color: #7f9cc8; }
/* deep learning: a survey map of a loss surface */
.sc-topo { right: 0; top: 0; width: 100%; height: 100%; }
/* streaming: rows of titles */
.sc-rows { position: absolute; right: -40px; top: 104px; width: 60%; display: flex; flex-direction: column; gap: 14px; transform: perspective(900px) rotateY(-14deg); opacity: .8; }
.sc-row { display: flex; gap: 12px; width: max-content; animation: tape 70s linear infinite; animation-delay: calc(var(--o) * -20s); }
.sc-row span { width: 112px; height: 160px; border-radius: 8px; display: flex; align-items: flex-end; padding: 10px; background: linear-gradient(170deg, hsl(var(--h) 45% 32%), hsl(calc(var(--h) + 40) 50% 12%)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.sc-row b { font: 700 13px var(--sans); color: rgba(255,255,255,.85); }
/* game show stage */
.sc-spots i { position: absolute; top: -10%; width: 34%; height: 130%; background: linear-gradient(to bottom, rgba(255,214,140,.28), transparent 75%); clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); transform-origin: top center; animation: sway 7s ease-in-out infinite alternate; }
.sc-spots i:nth-child(1) { left: 6%; } .sc-spots i:nth-child(2) { left: 36%; background: linear-gradient(to bottom, rgba(255,107,139,.22), transparent 75%); animation-delay: -2s; } .sc-spots i:nth-child(3) { left: 64%; animation-delay: -4s; }
@keyframes sway { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
.sc-bulbs { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: radial-gradient(circle, #ffe3a3 0 3px, rgba(255,181,71,.25) 4px, transparent 6px) 0 50% / 26px 14px repeat-x; animation: bulbs 1.2s steps(2) infinite; }
@keyframes bulbs { 50% { background-position: 13px 50%; } }
/* privacy */
.sc-cipher span { position: absolute; font: 11px var(--mono); color: #a78bfa; opacity: .14; animation: ciph 6s ease-in-out infinite; animation-delay: var(--d); }
@keyframes ciph { 50% { opacity: .38; } }
.sc-lock { right: 10%; top: 24%; width: 210px; height: 210px; opacity: .45; filter: drop-shadow(0 0 18px rgba(167,139,250,.5)); }
/* claims desk */
.sc-form { position: absolute; right: 7%; top: 116px; width: 340px; padding: 18px 20px 20px; border-radius: 12px; background: #e9eef2; color: #24313b; box-shadow: 0 30px 60px -24px rgba(0,0,0,.8); transform: rotate(2deg); opacity: .88; }
.sf-h { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid #24313b; padding-bottom: 8px; margin-bottom: 8px; } .sf-h b { font: 700 15px var(--sans); } .sf-h span { font: 10px var(--mono); color: #5b6b78; }
.sf-r { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed #b7c3cc; font-size: 12.5px; } .sf-r span { color: #5b6b78; } .sf-r b { font: 600 12.5px var(--mono); }
.sf-stamp { position: absolute; right: 18px; bottom: 26px; padding: 4px 12px; border: 3px solid #2f7fb8; border-radius: 6px; color: #2f7fb8; font: 800 16px var(--sans); letter-spacing: .14em; text-transform: uppercase; transform: rotate(-12deg); opacity: .75; }
.sc-ecg { left: 0; right: 0; bottom: 10px; width: 100%; height: 120px; }
/* documents */
.sc-paper { position: absolute; right: 8%; top: 100px; width: 300px; height: 380px; }
.sc-paper .pg { position: absolute; inset: 0; border-radius: 3px; background: #efe7d6; box-shadow: 0 20px 40px -16px rgba(0,0,0,.8); }
.sc-paper .p3 { transform: rotate(7deg) translate(18px, 6px); background: #d9d0bd; } .sc-paper .p2 { transform: rotate(3deg) translate(8px, 2px); background: #e4dcc8; }
.sc-paper .p1 { padding: 30px 28px; display: flex; flex-direction: column; gap: 10px; transform: rotate(-2deg); }
.sc-paper .p1 b { font: 700 13px Georgia, serif; color: #2b2418; margin-top: 8px; } .sc-paper .p1 i { display: block; height: 6px; width: 100%; background: #b9ae98; border-radius: 3px; } .sc-paper .p1 i.hl { background: linear-gradient(#f3d36b, #f3d36b); opacity: .9; }
/* research library */
.sc-shelf { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; gap: 3px; padding: 0 2%; border-bottom: 10px solid #3a2a1a; opacity: .7; }
.sc-shelf i { position: relative; flex: none; border-radius: 2px 2px 0 0; box-shadow: inset -3px 0 0 rgba(0,0,0,.3), inset 2px 0 0 rgba(255,255,255,.06); }
.sc-shelf u { position: absolute; left: 2px; right: 2px; height: 3px; background: #c9a75a; opacity: .7; }
/* maritime */
.sc-manifest { position: absolute; right: 7%; top: 112px; width: 360px; padding: 22px 24px; background: #e7dcc2; color: #3a2e1c; border-radius: 4px; box-shadow: 0 30px 50px -20px rgba(0,0,0,.8); transform: rotate(-2deg); font-family: Georgia, serif; opacity: .86; }
.sc-manifest > b { display: block; font-size: 20px; letter-spacing: .04em; } .sc-manifest > span { display: block; font-size: 12px; color: #6a5a3c; margin: 6px 0 12px; font-style: italic; }
.sc-manifest .mf p { margin: 0; padding: 6px 0; border-top: 1px solid rgba(58,46,28,.25); font-size: 13.5px; }
.sc-waves { left: 0; bottom: 0; width: 100%; height: 140px; } .sc-compass { right: 3%; top: 92px; width: 120px; height: 120px; }
/* real estate */
.sc-plan { right: 4%; top: 108px; width: 46%; height: 72%; }
/* consumer tech */
.sc-phone { position: absolute; right: 22%; top: 104px; width: 168px; height: 340px; border-radius: 30px; border: 2px solid #4b5566; background: linear-gradient(160deg, #1c2230, #0b0e14); padding: 16px 12px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.9), inset 0 0 0 6px #10141b; }
.sc-phone .scr { height: 100%; border-radius: 20px; background: radial-gradient(circle at 30% 20%, rgba(147,197,253,.3), rgba(196,181,253,.12) 50%, #0e1220); display: grid; grid-template-columns: repeat(3, 1fr); align-content: start; gap: 14px; padding: 40px 16px; }
.sc-phone .scr i { aspect-ratio: 1; border-radius: 10px; background: rgba(255,255,255,.14); }
.sc-spec { position: absolute; right: 5%; top: 150px; display: grid; grid-template-columns: auto auto; gap: 8px 18px; font: 13px var(--mono); opacity: .8; } .sc-spec dt { color: var(--muted); } .sc-spec dd { margin: 0; color: #c4d6f5; }
/* cricket */
.sc-oval { right: -6%; top: 60px; width: 64%; height: 100%; }
.sc-board { position: absolute; right: 6%; top: 128px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #2a2a20; border: 6px solid #15150f; border-radius: 6px; box-shadow: 0 20px 40px -16px rgba(0,0,0,.8); }
.sc-board div { background: #0b0b07; padding: 10px 16px; display: flex; flex-direction: column; gap: 2px; min-width: 130px; }
.sc-board span { font: 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #9a9378; }
.sc-board b { font: 700 24px var(--mono); color: #facc15; text-shadow: 0 0 10px rgba(250,204,21,.55); }
.sc-lights i { position: absolute; top: 60px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(255,250,220,.22), transparent 65%); } .sc-lights i:first-child { left: 30%; } .sc-lights i:last-child { right: -60px; }
/* world */
.sc-globe { right: 6%; top: 88px; width: 400px; height: 400px; animation: spin 90s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* public health: quiet */
.sc-trend { left: 0; bottom: 30px; width: 100%; height: 220px; }
/* social */
.sc-feed { position: absolute; right: 7%; top: 110px; width: 340px; display: flex; flex-direction: column; gap: 12px; }
.sc-feed .post { display: flex; gap: 12px; padding: 14px; border-radius: 14px; background: #101824; border: 1px solid #1f2d40; opacity: .9; transform: translateX(calc(var(--i) * 18px)); }
.sc-feed .post > i { flex: none; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #38bdf8, #f472b6); }
.sc-feed b { font: 600 13px var(--sans); } .sc-feed p { margin: 4px 0 6px; font-size: 13.5px; color: #c9d4e2; } .sc-feed span { font: 11px var(--mono); color: #f472b6; }
/* search */
.sc-search { position: absolute; right: 7%; top: 130px; width: 420px; }
.sc-search .bar { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-radius: 999px; background: #14130c; border: 1px solid #3a3618; font: 14px var(--mono); color: #f3e3a3; box-shadow: 0 0 0 6px rgba(251,191,36,.05); }
.sc-search .bar b { color: #fbbf24; font-size: 18px; }
.sc-search .res { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; } .sc-search .res i { height: 46px; border-radius: 10px; background: #12110b; border: 1px solid #2a2716; }
.sc-search .lat { display: block; margin-top: 12px; font: 11px var(--mono); color: #5ee6ff; }
/* help-desk chat */
.sc-chat { position: absolute; right: 8%; top: 120px; width: 340px; display: flex; flex-direction: column; gap: 10px; }
.sc-chat p { margin: 0; max-width: 80%; padding: 10px 14px; border-radius: 16px; font-size: 14px; }
.sc-chat .u { align-self: flex-end; background: #4f46e5; color: #fff; border-bottom-right-radius: 4px; }
.sc-chat .b { align-self: flex-start; background: #1a1d2e; color: #d8dcf5; border-bottom-left-radius: 4px; }
.sc-chat .typing { display: flex; gap: 5px; } .sc-chat .typing i { width: 7px; height: 7px; border-radius: 50%; background: #818cf8; animation: blink 1.2s infinite; } .sc-chat .typing i:nth-child(2) { animation-delay: .2s; } .sc-chat .typing i:nth-child(3) { animation-delay: .4s; }
@media (max-width: 860px) { .pp-scene > * { opacity: .14 !important; } .pp-scene::after { background: linear-gradient(to top, var(--skin-bg, var(--bg)), color-mix(in srgb, var(--skin-bg, var(--bg)) 55%, transparent)); } .sc-tape { opacity: 1 !important; } }
@media (prefers-reduced-motion: reduce) { .sc-tape > div, .sc-row, .sc-globe { animation: none; } }

/* ---------- each domain's type and colour, across the whole page ---------- */
body[data-theme="finance"] { --skin-display: var(--mono); }
body[data-theme="finance"] .pp-head h1 { font-weight: 700; letter-spacing: -.04em; }
body[data-theme="bank"] { --skin-display: 'Playfair Display', Georgia, serif; }
body[data-theme="stream"] { --skin-display: var(--sans); }
body[data-theme="stream"] .pp-head h1 { font-weight: 800; letter-spacing: -.03em; }
body[data-theme="show"] { --skin-display: 'Playfair Display', Georgia, serif; }
body[data-theme="docs"] { --skin-display: 'Playfair Display', Georgia, serif; }
body[data-theme="research"] { --skin-display: 'Playfair Display', Georgia, serif; }
body[data-theme="maritime"] { --skin-display: 'Playfair Display', Georgia, serif; }
body[data-theme="maritime"] .pp-head h1 { color: #ead9b6; }
body[data-theme="sports"] { --skin-display: var(--sans); }
body[data-theme="sports"] .pp-head h1 { font-weight: 800; text-transform: uppercase; letter-spacing: .01em; font-size: clamp(30px, 4.4vw, 54px); }
body[data-theme="sports"][data-page="projects"] { background-color: #061109; background-image: radial-gradient(1400px 700px at 70% -10%, rgba(250,250,210,.08), transparent 60%), repeating-linear-gradient(90deg, rgba(74,222,128,.03) 0 90px, transparent 90px 180px); }
body[data-theme="security"] { --skin-display: var(--mono); }
body[data-theme="search"] { --skin-display: var(--mono); }
body[data-theme="puzzle"] { --skin-display: 'Playfair Display', Georgia, serif; }
body[data-theme="puzzle"][data-page="projects"] { background: #0e0f12 radial-gradient(900px 500px at 30% 0, rgba(229,231,235,.06), transparent 70%); }
body[data-theme="game"] { --skin-display: 'Playfair Display', Georgia, serif; }
body[data-theme="game"] .pp-side h1 { color: #f3e7c9; }
body[data-theme="game"] .pp-play { position: relative; }
body[data-theme="game"] .pp-play > .pp-body { padding: 26px; border: 12px solid #3b2a1e; border-radius: 14px; background: radial-gradient(900px 600px at 50% 40%, #1d4d34, #0f2a1c 75%); box-shadow: inset 0 0 0 2px #6b4c33, 0 40px 80px -30px rgba(0,0,0,.9); }
body[data-theme="puzzle"] .pp-play > .pp-body { padding: 26px; border-radius: 6px; background: #121317; border: 1px solid #2a2d35; box-shadow: 0 30px 70px -30px rgba(0,0,0,.9); }
body[data-theme="show"] .pp-play > .pp-body { padding: 26px; border-radius: 16px; border: 2px solid rgba(255,181,71,.45); box-shadow: 0 0 0 6px rgba(255,181,71,.06), 0 40px 120px -40px rgba(255,107,139,.35); background: radial-gradient(700px 400px at 50% 0, rgba(255,181,71,.1), transparent 70%), #120b1c; }
body[data-theme="show"] .pp-side h1 { background: linear-gradient(180deg, #ffe3a3, #ffb547); -webkit-background-clip: text; background-clip: text; color: transparent; }
body[data-theme="claims"], body[data-theme="publichealth"] { --skin-display: var(--sans); }

.pp-body .srcs, .pp-body .next-ch, .pp-body #sbLog { display: none !important; }
.pp-body .explain { font-size: 15.5px; color: var(--text); }
.pp-body .explain > p:first-child { margin-bottom: 0; }
.tech-d { margin-top: 10px; }
.tech-d > summary { cursor: pointer; list-style: none; display: inline-flex; gap: 8px; align-items: center; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--muted); }
.tech-d > summary::-webkit-details-marker { display: none; }
.tech-d > summary::before { content: '+'; color: var(--accent); font-weight: 700; }
.tech-d[open] > summary::before { content: '–'; }
.tech-d > :not(summary) { font-size: 13.5px; color: #9aa6b8; margin: 8px 0 0; }
.pp-intro { font-size: 16.5px !important; }
.pp-side .pp-howto .tech-d { display: none; }

/* ---------- work: the drive ---------- */
.tldr-bar { position: fixed; z-index: 9; top: 84px; right: var(--gutter); display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: 14px; background: rgba(8,10,14,.86); border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 16px 40px rgba(0,0,0,.45), 0 0 0 4px rgba(124,255,178,.06); backdrop-filter: blur(8px); color: var(--text); opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .35s, transform .35s, border-color .2s; }
.tldr-bar.show { opacity: 1; transform: none; pointer-events: auto; }
.tldr-bar b { font: 800 15px var(--mono); letter-spacing: .06em; color: #06080c; background: var(--accent); border-radius: 8px; padding: 8px 10px; }
.tldr-bar span { display: flex; flex-direction: column; font-size: 13.5px; line-height: 1.35; color: #c9d1dd; max-width: 220px; }
.tldr-bar strong { font-weight: 650; color: var(--text); font-size: 14.5px; }
.tldr-bar i { font-style: normal; font: 600 18px var(--mono); color: var(--accent); transition: transform .2s; }
.tldr-bar:hover { border-color: var(--accent); } .tldr-bar:hover i { transform: translateY(3px); }
@media (max-width: 640px) { .tldr-bar { top: 76px; left: 12px; right: 12px; justify-content: center; } .tldr-bar span { max-width: none; } }
.whoosh { position: fixed; inset: 0; z-index: 4; pointer-events: none; opacity: 0;
  background: repeating-conic-gradient(from 0deg at 50% 52%, rgba(255,255,255,.0) 0deg 3deg, rgba(255,255,255,.16) 3.4deg 3.7deg, rgba(255,255,255,0) 4deg 7deg);
  -webkit-mask-image: radial-gradient(circle at 50% 52%, transparent 18%, #000 62%); mask-image: radial-gradient(circle at 50% 52%, transparent 18%, #000 62%); }
.whoosh.go { animation: whoosh .95s cubic-bezier(.5,0,.3,1) forwards; }
@keyframes whoosh { 0% { opacity: 0; transform: scale(1.4) rotate(0deg); } 35% { opacity: .9; } 85% { opacity: .6; transform: scale(.85) rotate(4deg); } 100% { opacity: 0; transform: scale(.8) rotate(5deg); } }
.wm-lead { font-size: 16.5px !important; color: #e3e8ef !important; line-height: 1.75 !important; margin-bottom: 18px !important; }
.wm-depth h4 { margin-top: 26px; }

/* phones: work map labels alternate above and below so neighbours never collide; modal header stacks */
@media (max-width: 700px) {
  .walk-map .pin:nth-child(even) span { top: 26px; }
  .walk-map { bottom: 74px; width: calc(100% - 76px); }
  .wm-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .wm-head h2 { font-size: 24px; }
}
/* games on narrow screens: a compact title above the board, the notes after it */
.pp-gtop { display: none; }
@media (max-width: 980px) {
  .pp-gtop { display: block; padding-top: 92px; }
  .pp-gtop .pp-back { margin-bottom: 14px; }
  .pp-gtop h1 { font-family: var(--skin-display, var(--sans)); font-size: clamp(26px, 6vw, 36px); margin: 0 0 18px; }
  .pp-play { padding-top: 0; }
  .pp-side { order: 2; }
  .pp-side > .pp-back, .pp-side > h1 { display: none; }
  body[data-theme="game"] .pp-play > .pp-body, body[data-theme="puzzle"] .pp-play > .pp-body, body[data-theme="show"] .pp-play > .pp-body { padding: 14px; border-width: 8px; }
}