/* ============================================================
   NB.OS — styles
   Tokens first; everything derives from them.
   ============================================================ */

:root {
  /* neutrals (blue-tinted, never pure black/white) */
  --bg: #0a0c10;
  --bg-2: #0e1117;
  --surface: #12151d;
  --surface-2: #171b25;
  --surface-3: #1d2230;
  --line: rgba(232, 236, 241, 0.09);
  --line-strong: rgba(232, 236, 241, 0.18);
  --text: #e8ecf1;
  --muted: #8b94a3;
  --faint: #5c6472;

  /* theme accent — swapped at runtime by theme engine */
  --accent: #4cc3ff;
  --accent-2: #2563eb;
  --glow: rgba(76, 195, 255, 0.35);
  --on-accent: #06131c;

  /* type */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* spacing scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  --r-tile: 16px;
  --r-win: 10px;
  --r-btn: 8px;

  --shadow-tile: 0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px rgba(0,0,0,.35);
  --shadow-win: 0 24px 60px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.6, 0, .8, .4);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--accent); color: var(--on-accent); }

a { color: inherit; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* thin dark scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }

.mono { font-family: var(--font-mono); }

.label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============================================================
   LANDING
   ============================================================ */

#landing {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: clamp(14px, 2.2vw, 28px);
  gap: var(--s3);
  position: relative;
  z-index: 1;
}

#landing-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0.5;
}

/* top bar */
.land-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s2) var(--s2) var(--s3);
}

.land-brand {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  color: var(--on-accent);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 24px var(--glow);
}

.brand-text { line-height: 1.2; }
.brand-text strong { font-size: 15px; font-weight: 600; letter-spacing: .01em; }
.brand-text span { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }

.land-status {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 7px 14px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}

/* top-right cluster: lite toggle + status */
.land-topright { display: flex; align-items: center; gap: var(--s3); }

.lite-toggle {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 6px 10px 6px 12px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  transition: border-color .2s, color .2s;
}
.lite-toggle:hover { border-color: var(--line-strong); color: var(--text); }
.lite-toggle svg { width: 13px; height: 13px; stroke: var(--faint); transition: stroke .2s; }
.lite-toggle .lt-label { letter-spacing: .06em; }
.lite-toggle .lt-switch {
  width: 30px; height: 17px;
  border-radius: 99px;
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  position: relative;
  transition: background .2s;
  flex: none;
}
.lite-toggle .lt-switch i {
  position: absolute; top: 1px; left: 1px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform .2s var(--ease-out), background .2s;
}
.lite-toggle.on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.lite-toggle.on svg { stroke: var(--accent); }
.lite-toggle.on .lt-switch { background: color-mix(in srgb, var(--accent) 35%, transparent); border-color: var(--accent); }
.lite-toggle.on .lt-switch i { transform: translateX(13px); background: var(--accent); }

/* keep the top bar tidy on phones — the lite toggle stays, status text drops */
@media (max-width: 560px) {
  .land-status { display: none; }
  .land-top { padding-bottom: var(--s2); }
}

.status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #3ddc97;
  box-shadow: 0 0 10px rgba(61,220,151,.8);
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* bento grid */
.bento {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(148px, auto);
  gap: var(--s3);
}

.tile {
  position: relative;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r-tile);
  box-shadow: var(--shadow-tile);
  padding: var(--s5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(8px);
  transition: border-color .25s var(--ease-out), transform .25s var(--ease-out);
}

.tile-btn { text-align: left; }

.tile-btn:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
}

.tile .label { margin-bottom: var(--s3); display: flex; align-items: center; gap: var(--s2); }
.tile .label svg { width: 13px; height: 13px; stroke: var(--accent); }

/* NB.OS is the main event — the hero slot belongs to the login screen */
.t-os       { grid-column: 1 / 7;  grid-row: 1 / 3; }
.t-travel   { grid-column: 7 / 10; grid-row: 1 / 3; }
.t-hero     { grid-column: 10 / 13; grid-row: 1 / 2; justify-content: flex-end; }
.t-time     { grid-column: 10 / 13; grid-row: 2 / 3; }
.t-theme    { grid-column: 1 / 7;  grid-row: 3 / 4; }
.t-contact  { grid-column: 7 / 13; grid-row: 3 / 4; }

/* tiles glow toward the accent on hover */
.tile:hover { border-color: var(--line-strong); box-shadow: var(--shadow-tile), 0 0 44px -16px var(--glow); }

/* HUD corner brackets + cursor spotlight live in the FX layer (css/fx.css,
   .fx-corners) — attached to the tile box itself so they always align */

/* hero (compact now — NB.OS took the big slot) */
.t-hero h1 {
  margin: 0 0 var(--s2);
  font-size: clamp(26px, 2.4vw, 38px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.03em;
}
.t-hero #hero-tagline { font-size: 13px; }

.t-hero h1 em {
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--accent);
}

.t-hero p { margin: 0; color: var(--muted); max-width: 46ch; }

/* blinking terminal caret now rides the name */
.t-hero h1::after {
  content: '▮';
  color: var(--accent);
  margin-left: 8px;
  font-size: 0.7em;
  vertical-align: 4%;
  animation: caret 1.1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

.hero-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint) !important;
  margin-top: var(--s3) !important;
}

.hero-watermark {
  position: absolute;
  top: -0.18em;
  right: -0.05em;
  font-size: clamp(160px, 22vw, 320px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--accent) 26%, transparent);
  pointer-events: none;
  user-select: none;
}

.hero-grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 85% 10%, black, transparent 70%);
  pointer-events: none;
}

/* travel tile */
.t-travel { padding-bottom: var(--s3); }
.globe-wrap {
  flex: 1;
  position: relative;
  min-height: 0;
  display: grid;
  place-items: center;
}
.globe-wrap canvas { outline: none; }
.travel-count {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  justify-content: space-between;
}
.travel-count strong { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.travel-count span { font-family: var(--font-mono); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }

/* time tile (compact) */
.clock-row { display: flex; flex-direction: column; gap: var(--s2); flex: 1; justify-content: center; }
.clock {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
}
.clock .who {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.clock .who b { color: var(--text); font-weight: 500; display: block; font-size: 10px; margin-top: 2px; }
.clock time {
  font-family: var(--font-mono);
  font-size: clamp(18px, 1.4vw, 22px);
  font-weight: 500;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.clock time small { font-size: 0.5em; color: var(--muted); margin-left: 4px; }
.clock-diff {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: .08em;
}

/* NB.OS tile — a login screen */
.t-os { justify-content: flex-start; cursor: pointer; }
.os-preview {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .85;
  background: var(--bg); /* never flash white if a frame is lost */
}
/* fx chrome (spotlight/corners/wireframe) must keep its own absolute positioning */
.t-os > :not(.os-preview, .fx-spot, .fx-corners, .fx-wire) { position: relative; z-index: 1; }
.login {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
}
.login-avatar {
  width: 88px; height: 88px;
  border-radius: 50%;
  display: grid; place-items: center;
  overflow: hidden;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 26px;
  color: var(--on-accent);
  background: linear-gradient(150deg, var(--accent), var(--accent-2));
  border: 3px solid var(--accent);
  box-shadow: 0 0 48px var(--glow), 0 0 0 1px var(--accent);
  margin-bottom: var(--s2);
  isolation: isolate; /* contain the photo's blend to this circle only */
}
/* the photo multiplies onto the accent background, so a white/light backdrop
   in the headshot turns into the selected theme colour, subject shows through */
.login-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
}
.login-name { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
.login-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.login-btn {
  margin-top: var(--s4);
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  font-size: 14.5px;
  border-radius: 99px;
  padding: 11px 26px;
  transition: transform .2s var(--ease-out), filter .15s;
}
.login-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.t-os:hover .login-btn { filter: brightness(1.12); }
.login-hint {
  margin-top: var(--s3);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--faint);
  letter-spacing: .04em;
}

/* theme tile — mini terminal */
.t-theme { font-family: var(--font-mono); }
.term-lines { font-size: 12.5px; line-height: 1.8; color: var(--muted); }
.term-lines .prompt { color: var(--accent); }
.term-lines .out { color: var(--text); }
.theme-swatches { display: flex; gap: var(--s2); margin: var(--s3) 0; flex-wrap: wrap; }
.swatch {
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  position: relative;
  transition: transform .15s var(--ease-out);
}
.swatch:hover { transform: scale(1.12); }
.swatch[aria-pressed="true"]::after {
  content: '';
  position: absolute;
  inset: -5px;
  border: 1.5px solid var(--accent);
  border-radius: 11px;
}
.theme-input {
  display: flex;
  align-items: center;
  gap: var(--s2);
  border-top: 1px solid var(--line);
  padding-top: var(--s3);
  margin-top: auto;
  font-size: 12.5px;
}
.theme-input input {
  flex: 1;
  background: none;
  border: none;
  color: var(--text);
  font: inherit;
  outline: none;
}
.theme-input input::placeholder { color: var(--faint); }

/* contact tile */
.contact-actions { display: flex; flex-direction: column; gap: var(--s2); flex: 1; justify-content: center; }
.contact-btn {
  display: flex;
  align-items: center;
  gap: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
  transition: border-color .15s, background .15s;
  background: color-mix(in srgb, var(--surface-2) 60%, transparent);
}
.contact-btn:hover { border-color: var(--accent); background: var(--surface-2); }
.contact-btn svg { width: 16px; height: 16px; stroke: var(--accent); flex: none; }
.contact-btn span { font-family: var(--font-mono); font-size: 11px; color: var(--faint); margin-left: auto; letter-spacing: .06em; }

.land-foot {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--faint);
  letter-spacing: .08em;
  padding: var(--s2) var(--s2) 0;
}

/* ============================================================
   BOOT
   ============================================================ */

#boot {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #05070a;
  display: none;
  flex-direction: column;
  justify-content: center;
  padding: 0 clamp(24px, 12vw, 160px);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
}
#boot.on { display: flex; }
#boot .line { line-height: 2; opacity: 0; animation: bootline .18s forwards; }
#boot .line .ok { color: var(--accent); }
@keyframes bootline { to { opacity: 1; } }

/* ============================================================
   DESKTOP (NB.OS)
   ============================================================ */

#desktop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  overflow: hidden;
}
#desktop.on { display: block; }

#wallpaper { position: absolute; inset: 0; }

/* desktop icons */
.desk-icons {
  position: absolute;
  top: 18px;
  left: 14px;
  bottom: 66px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
  z-index: 1;
}

.dicon {
  text-decoration: none;
  width: 92px;
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  border-radius: var(--r-btn);
  border: 1px solid transparent;
}
.dicon:hover { background: rgba(232,236,241,.07); border-color: rgba(232,236,241,.1); }
.dicon:active { background: rgba(232,236,241,.12); }
.dicon .ig {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
  border: 1px solid var(--line);
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
.dicon .ig svg { width: 22px; height: 22px; stroke: var(--accent); }
.dicon .txt {
  font-size: 11.5px;
  line-height: 1.25;
  text-align: center;
  color: var(--text);
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
  font-family: var(--font-mono);
}

/* windows */
.window {
  position: absolute;
  min-width: 320px;
  min-height: 200px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-win);
  box-shadow: var(--shadow-win);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  backdrop-filter: blur(14px);
  animation: winin .22s var(--ease-out);
}
@keyframes winin {
  from { opacity: 0; transform: scale(.96) translateY(8px); }
  to { opacity: 1; transform: none; }
}
.window.closing { animation: winout .16s var(--ease-in) forwards; }
@keyframes winout {
  to { opacity: 0; transform: scale(.97) translateY(6px); }
}
.window.minimized { display: none; }
.window.maxed { border-radius: 0; }

.win-title {
  height: 38px;
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 0 6px 0 14px;
  background: color-mix(in srgb, var(--surface-2) 85%, transparent);
  border-bottom: 1px solid var(--line);
  user-select: none;
  cursor: grab;
  touch-action: none;
}
.win-title:active { cursor: grabbing; }
.win-title svg.wicon { width: 14px; height: 14px; stroke: var(--accent); flex: none; }
.win-title .tname {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.win-ctl { margin-left: auto; display: flex; }
.win-ctl button {
  width: 40px; height: 30px;
  display: grid; place-items: center;
  border-radius: 6px;
  color: var(--muted);
}
.win-ctl button:hover { background: rgba(232,236,241,.09); color: var(--text); }
.win-ctl button.close:hover { background: #e11d48; color: #fff; }
.win-ctl svg { width: 12px; height: 12px; }

.win-body {
  flex: 1;
  overflow: auto;
  position: relative;
  min-height: 0;
  container-type: inline-size;
}

/* app layouts adapt to their window, not the viewport.
   NOTE: selectors are prefixed with .win-body so they outrank the base
   component rules further down the file — without that, the chip stays
   absolutely positioned on phones and sits on top of the hero text. */
@container (max-width: 620px) {
  .win-body .rc-hero { padding: 36px 24px 28px; }
  .win-body .rc-helmet { position: static; translate: none; width: 200px; margin: 20px auto 0; }
  .win-body .rc-stats { grid-template-columns: repeat(2, 1fr); }
  .win-body .rc-stats > div:nth-child(3) { border-left: none; }
  .win-body .rc-stats > div:nth-child(n+3) { border-top: 1px solid color-mix(in srgb, var(--sys, #00e87b) 16%, transparent); }
  .win-body .rc-hall, .win-body .rc-cta { padding-left: 24px; padding-right: 24px; }
  .win-body .rc-tele { grid-template-columns: 1fr 1fr; }
  /* ---- Tools: mobile drill-down — list view <-> full-screen tool view ---- */
  .win-body .app-tools { flex-direction: column; }

  /* LIST VIEW: category pills + full-height scrollable tool grid */
  .win-body .tl-side {
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border-right: none;
  }
  .win-body .app-tools.viewing-tool .tl-side { display: none; }
  .win-body .tl-cats {
    display: flex;
    gap: 8px;
    flex: none;
    overflow-x: auto;
    padding: 12px;
    background: color-mix(in srgb, var(--bg-2) 92%, transparent);
    border-bottom: 1px solid var(--line);
    scrollbar-width: none;
  }
  .win-body .tl-cats::-webkit-scrollbar { display: none; }
  .win-body .tl-cat-pill {
    flex: none;
    font-family: var(--font-mono);
    font-size: 13px;
    padding: 10px 16px;            /* ≥44px tall touch target */
    border-radius: 99px;
    border: 1px solid var(--line-strong);
    color: var(--muted);
    white-space: nowrap;
  }
  .win-body .tl-cat-pill.active {
    background: var(--accent);
    color: var(--on-accent);
    border-color: transparent;
    font-weight: 600;
  }
  .win-body .tl-groups { flex: 1; overflow-y: auto; padding: 12px; }
  .win-body .tl-group { display: none; }
  .win-body .tl-group.active {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-content: start;
  }
  .win-body .tl-group .tl-cat { display: none; }  /* the pill already labels it */
  .win-body .tl-item {
    width: auto;
    min-height: 54px;             /* comfortable, mis-tap-proof target */
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    font-size: 13.5px;
    padding: 12px 10px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-2) 60%, transparent);
    color: var(--text);
  }
  .win-body .tl-item.active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    box-shadow: none;
  }

  /* TOOL VIEW: hidden until you drill in, then full-screen with a back button */
  .win-body .tl-pane { display: none; }
  .win-body .app-tools.viewing-tool .tl-pane {
    display: flex;
    flex-direction: column;
    flex: 1;
    animation: tl-drill .28s var(--ease-out);
  }
  .win-body .tl-back {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
    width: 100%;
    padding: 14px 16px;           /* ≥44px */
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: .04em;
    color: var(--accent);
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg-2) 82%, transparent);
    position: sticky; top: 0; z-index: 2;
  }
  .win-body .tl-back svg { width: 18px; height: 18px; }
  @keyframes tl-drill { from { opacity: 0; transform: translateX(16px); } }

  .win-body .app-travel { flex-direction: column; }
  .win-body .tv-side { border-left: none; border-top: 1px solid var(--line); }
}

/* taskbar */
#taskbar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 52px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 0 var(--s3);
  background: color-mix(in srgb, var(--bg-2) 78%, transparent);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(16px);
}

.tb-start {
  height: 38px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: var(--s2);
  border-radius: var(--r-btn);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--on-accent);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.tb-start:hover { filter: brightness(1.1); }

.tb-apps { display: flex; gap: 4px; flex: 1; overflow-x: auto; padding: 0 var(--s2); }
.tb-app {
  height: 38px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--r-btn);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  border: 1px solid transparent;
  white-space: nowrap;
}
.tb-app svg { width: 14px; height: 14px; stroke: currentColor; }
.tb-app:hover { background: var(--surface-2); color: var(--text); }
.tb-app.active {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--line);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.tb-right {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}
.tb-clock { text-align: right; line-height: 1.3; font-variant-numeric: tabular-nums; }
.tb-clock b { color: var(--text); font-weight: 500; display: block; }
.tb-exit {
  height: 38px; padding: 0 12px;
  border-radius: var(--r-btn);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--muted);
  border: 1px solid var(--line);
}
.tb-exit:hover { color: var(--text); border-color: var(--line-strong); }

/* start menu */
#startmenu {
  position: absolute;
  left: 12px;
  bottom: 62px;
  width: 300px;
  z-index: 60;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-win);
  backdrop-filter: blur(18px);
  padding: var(--s3);
  display: none;
  animation: winin .18s var(--ease-out);
}
#startmenu.on { display: block; }
#startmenu .sm-head {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s2) var(--s3);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s2);
}
#startmenu .sm-head .brand-mark { width: 34px; height: 34px; font-size: 12px; }
#startmenu .sm-head div { line-height: 1.25; }
#startmenu .sm-head strong { font-size: 14px; }
#startmenu .sm-head span { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); display: block; }
.sm-item {
  width: 100%;
  display: flex; align-items: center; gap: var(--s3);
  padding: 9px 10px;
  border-radius: var(--r-btn);
  font-size: 13.5px;
  color: var(--text);
  text-decoration: none;
}
.sm-item:hover { background: var(--surface-2); }
.sm-item svg { width: 16px; height: 16px; stroke: var(--accent); flex: none; }
.sm-item .ext { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--faint); }
.sm-sep { height: 1px; background: var(--line); margin: var(--s2) 0; }

/* ---------- taskbar pins (a shortcut to everything) ---------- */
.tb-pins {
  display: flex;
  gap: 2px;
  padding: 0 var(--s2);
  border-right: 1px solid var(--line);
}
.tb-icon {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: var(--r-btn);
  color: var(--muted);
  position: relative;
  transition: transform .18s var(--ease-out), background .15s, color .15s;
}
.tb-icon svg { width: 17px; height: 17px; stroke: currentColor; }
.tb-icon:hover { background: var(--surface-2); color: var(--text); }
.tb-tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  translate: -50% 0;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text);
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 4px 9px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
}
.tb-icon:hover .tb-tip { opacity: 1; }

/* ---------- tray: colours · wallpaper · skin · tips ---------- */
.tb-tray { display: flex; align-items: center; gap: 2px; position: relative; }
.tray-pop {
  position: absolute;
  bottom: calc(100% + 14px);
  right: 0;
  min-width: 150px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-win);
  backdrop-filter: blur(18px);
  padding: var(--s3);
  display: none;
}
.tray-pop.on { display: block; animation: winin .18s var(--ease-out); }
.pop-label {
  margin: 0 0 var(--s2);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
}
.pop-swatches { display: grid; grid-template-columns: repeat(6, 26px); gap: 7px; }
.pop-swatches .swatch { width: 26px; height: 26px; border-radius: 7px; }
.pop-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border-radius: var(--r-btn);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--muted);
}
.pop-item:hover { background: var(--surface-2); color: var(--text); }
.pop-item[aria-pressed="true"] { color: var(--accent); }
.pop-item[aria-pressed="true"]::after { content: ' ●'; font-size: 9px; }
.skin-seg {
  display: flex;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  overflow: hidden;
  margin: 0 4px;
}
.skin-seg button {
  width: 34px; height: 32px;
  font-size: 14px;
  color: var(--muted);
  display: grid; place-items: center;
}
.skin-seg button:hover { color: var(--text); background: var(--surface-2); }
.skin-seg button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }

/* ---------- guided hints (site-wide bulb + panel) ---------- */
#hint-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 240;
  width: 48px; height: 48px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--on-accent);
  box-shadow: 0 8px 28px rgba(0,0,0,.45), 0 0 24px var(--glow);
  transition: transform .2s var(--ease-out);
}
#hint-fab:hover { transform: translateY(-2px) scale(1.06); }
#hint-fab svg { width: 20px; height: 20px; stroke: currentColor; }
body.os-on #hint-fab { display: none; } /* the taskbar bulb takes over inside NB.OS */

#hint-panel {
  position: fixed;
  right: 18px;
  bottom: 76px;
  z-index: 241;
  display: flex;
  align-items: center;
  gap: var(--s3);
  max-width: min(440px, calc(100vw - 36px));
  padding: 12px 14px;
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-win);
  backdrop-filter: blur(14px);
  font-size: 13px;
  color: var(--muted);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .3s, transform .3s var(--ease-out);
}
#hint-panel.show { opacity: 1; transform: none; pointer-events: auto; }
body.os-on #hint-panel { bottom: 68px; }
body.os-on[data-skin="mac"] #hint-panel { bottom: 84px; }
#hint-panel .tip-ic svg { width: 16px; height: 16px; stroke: var(--accent); display: block; }
#hint-panel .tip-txt { flex: 1; min-width: 120px; }
#hint-panel .tip-txt b { color: var(--accent); font-weight: 600; }
.tip-nav { display: flex; align-items: center; gap: 2px; flex: none; }
.tip-nav button {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 6px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1;
  padding-bottom: 2px;
}
.tip-nav button:hover { background: var(--surface-2); color: var(--text); }
#hint-count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--faint);
  min-width: 28px;
  text-align: center;
}
#hint-panel .tip-x {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 6px;
  color: var(--faint);
  flex: none;
}
#hint-panel .tip-x:hover { background: var(--surface-2); color: var(--text); }
#hint-panel .tip-x svg { width: 11px; height: 11px; }

/* ---------- mac-mode menu bar ---------- */
#menubar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 30px;
  z-index: 55;
  display: none;
  align-items: center;
  gap: 2px;
  padding: 0 10px;
  background: color-mix(in srgb, var(--bg-2) 84%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
}
.mb-item {
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--text);
}
.mb-brand { font-weight: 700; }
button.mb-item:hover { background: var(--surface-2); }
.mb-dim { color: var(--muted); }
.mb-right { margin-left: auto; display: flex; align-items: center; gap: 2px; }
#mb-clock { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }

/* ============================================================
   MAC SKIN — same OS, different outfit
   ============================================================ */

body[data-skin="mac"] #menubar { display: flex; }
body[data-skin="mac"] .desk-icons { top: 44px; left: auto; right: 14px; }

/* taskbar becomes a floating dock */
body[data-skin="mac"] #taskbar {
  left: 50%;
  right: auto;
  bottom: 10px;
  transform: translateX(-50%);
  width: auto;
  max-width: calc(100% - 24px);
  height: 58px;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  padding: 0 10px;
  background: color-mix(in srgb, var(--surface) 74%, transparent);
}
body[data-skin="mac"] .tb-start,
body[data-skin="mac"] .tb-exit,
body[data-skin="mac"] .tb-clock { display: none; }
body[data-skin="mac"] .tb-pins { border-right: none; }
body[data-skin="mac"] .tb-apps { flex: none; border-left: 1px solid var(--line); padding-left: var(--s2); }
body[data-skin="mac"] .tb-app span { display: none; }
body[data-skin="mac"] .tb-app { padding: 0 10px; }
body[data-skin="mac"] .tb-icon:hover { transform: translateY(-8px) scale(1.22); background: transparent; color: var(--accent); }
body[data-skin="mac"] .tb-tip { bottom: calc(100% + 14px); }

/* traffic-light window controls, centered titles */
body[data-skin="mac"] .window { border-radius: 12px; }
body[data-skin="mac"] .win-title { justify-content: center; position: relative; }
body[data-skin="mac"] .win-title svg.wicon { display: none; }
body[data-skin="mac"] .win-ctl {
  position: absolute;
  left: 12px; top: 50%;
  translate: 0 -50%;
  margin: 0;
  gap: 8px;
}
body[data-skin="mac"] .win-ctl button {
  width: 13px; height: 13px;
  border-radius: 50%;
  padding: 0;
}
body[data-skin="mac"] .win-ctl svg { display: none; }
body[data-skin="mac"] .win-ctl [data-act="close"] { background: #ff5f57; order: -3; }
body[data-skin="mac"] .win-ctl [data-act="min"]   { background: #febc2e; order: -2; }
body[data-skin="mac"] .win-ctl [data-act="max"]   { background: #28c840; order: -1; }
body[data-skin="mac"] .win-ctl button:hover { filter: brightness(1.15); }
body[data-skin="mac"] .win-ctl button.close:hover { background: #ff5f57; }

/* maximized windows respect the menubar + floating dock */
body[data-skin="mac"] .window.maxed {
  top: 30px !important;
  height: calc(100% - 108px) !important;
  border-radius: 12px;
}

/* mac-flavoured desktop icons: squircles, system font labels */
body[data-skin="mac"] .dicon .ig {
  border-radius: 15px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--surface-3) 94%, transparent),
    color-mix(in srgb, var(--surface-2) 94%, transparent));
}
body[data-skin="mac"] .dicon .txt { font-family: var(--font-display); font-size: 11.5px; }

/* start menu docks under the  menu */
body[data-skin="mac"] #startmenu { bottom: auto; top: 38px; left: 8px; }

/* ============================================================
   APP CONTENT
   ============================================================ */

.pad { padding: var(--s5); }

/* terminal app */
.app-terminal {
  height: 100%;
  display: flex;
  flex-direction: column;
  font-family: var(--font-mono);
  font-size: 13px;
  background: #07090d;
}
.term-out { flex: 1; overflow: auto; padding: var(--s4); line-height: 1.75; }
.term-out .in-echo { color: var(--muted); }
.term-out .in-echo::before { content: '❯ '; color: var(--accent); }
.term-out .res { color: var(--text); white-space: pre-wrap; }
.term-out .err { color: #ff7a45; }
.term-in {
  display: flex; align-items: center; gap: var(--s2);
  border-top: 1px solid var(--line);
  padding: var(--s3) var(--s4);
}
.term-in .ps1 { color: var(--accent); }
.term-in input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--text); font: inherit;
}

/* resume app */
.app-resume { max-width: 720px; margin: 0 auto; padding: var(--s6) var(--s6) var(--s7); }
.app-resume header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s4); margin-bottom: var(--s5); }
.app-resume h1 { margin: 0; font-size: 30px; letter-spacing: -0.02em; }
.app-resume .r-role { font-family: var(--font-mono); font-size: 12px; color: var(--accent); text-transform: uppercase; letter-spacing: .12em; margin-top: 4px; }
.app-resume .r-meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); text-align: right; line-height: 1.9; }
.app-resume .r-meta a { color: var(--muted); }
.app-resume h2 {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--s2);
  margin: var(--s6) 0 var(--s4);
}
.app-resume .xp { margin-bottom: var(--s4); }
.app-resume .xp-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); }
.app-resume .xp-head strong { font-size: 15px; }
.app-resume .xp-head em { font-style: normal; color: var(--muted); font-size: 13px; }
.app-resume .xp-head span { font-family: var(--font-mono); font-size: 11px; color: var(--faint); white-space: nowrap; }
.app-resume ul { margin: var(--s2) 0 0; padding-left: 18px; color: var(--muted); font-size: 13.5px; }
.app-resume ul li { margin-bottom: 4px; }
.skill-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.skill-chips span {
  font-family: var(--font-mono); font-size: 11.5px;
  border: 1px solid var(--line); border-radius: 99px;
  padding: 5px 12px; color: var(--muted);
}
.btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  background: var(--accent); color: var(--on-accent);
  font-weight: 600; font-size: 13.5px;
  border-radius: var(--r-btn);
  padding: 10px 16px;
  text-decoration: none;
  transition: filter .15s;
}
.btn:hover { filter: brightness(1.12); }
.btn svg { width: 15px; height: 15px; }
.btn.ghost {
  background: transparent; color: var(--text);
  border: 1px solid var(--line-strong);
}
.btn.ghost:hover { border-color: var(--accent); filter: none; }

/* projects app */
.app-projects { padding: var(--s5); }
.app-projects .intro { color: var(--muted); font-size: 14px; margin: 0 0 var(--s5); max-width: 52ch; }
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--s3); }
.proj-card {
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: var(--s4);
  background: var(--surface-2);
  display: flex; flex-direction: column; gap: var(--s2);
  transition: border-color .15s, transform .2s var(--ease-out);
}
.proj-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.proj-card svg { width: 20px; height: 20px; stroke: var(--accent); }
.proj-card strong { font-size: 14.5px; }
.proj-card p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.proj-card .tag { font-family: var(--font-mono); font-size: 10px; color: var(--faint); letter-spacing: .1em; text-transform: uppercase; margin-top: auto; }

/* shape lab */
.app-shapelab { height: 100%; display: flex; flex-direction: column; }
.sl-stage { flex: 1; min-height: 0; position: relative; background: radial-gradient(ellipse at 50% 40%, #10141c, #07090d); }
.sl-stage canvas { display: block; }
.sl-drop {
  position: absolute; inset: 0;
  display: none; place-items: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 2px dashed var(--accent);
  font-family: var(--font-mono); font-size: 13px; color: var(--text);
  z-index: 2;
}
.sl-stage.dragover .sl-drop { display: grid; }
.sl-bar {
  flex: none;
  display: flex; align-items: center; gap: var(--s2);
  flex-wrap: wrap;
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.sl-shapes { display: flex; gap: 4px; flex-wrap: wrap; }
.sl-shape {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--r-btn);
  border: 1px solid var(--line);
  color: var(--muted);
}
.sl-shape svg { width: 16px; height: 16px; stroke: currentColor; fill: none; }
.sl-shape:hover { color: var(--text); border-color: var(--line-strong); }
.sl-shape.active { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.sl-ctl { display: flex; gap: var(--s2); margin-left: auto; align-items: center; }
.sl-btn {
  height: 34px; padding: 0 14px;
  border-radius: var(--r-btn);
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text);
  display: inline-flex; align-items: center; gap: 6px;
}
.sl-btn:hover { border-color: var(--accent); }
.sl-btn.primary { background: var(--accent); color: var(--on-accent); border-color: transparent; font-weight: 600; }
.sl-btn svg { width: 13px; height: 13px; }
.sl-file-name { font-family: var(--font-mono); font-size: 11px; color: var(--faint); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* converter */
.app-convert { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s4); height: 100%; }
.cv-drop {
  border: 1.5px dashed var(--line-strong);
  border-radius: 12px;
  min-height: 150px;
  display: grid; place-items: center;
  text-align: center;
  color: var(--muted);
  font-size: 13.5px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  padding: var(--s4);
}
.cv-drop:hover, .cv-drop.dragover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.cv-drop .big { font-size: 15px; color: var(--text); display: block; margin-bottom: 4px; }
.cv-drop img { max-width: 100%; max-height: 180px; border-radius: 8px; }
.cv-row { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.cv-row .label { margin: 0; }
.seg { display: flex; border: 1px solid var(--line-strong); border-radius: var(--r-btn); overflow: hidden; }
.seg button {
  padding: 8px 16px;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--muted);
}
.seg button + button { border-left: 1px solid var(--line); }
.seg button.active { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.cv-note { font-family: var(--font-mono); font-size: 11px; color: var(--faint); margin-top: auto; }

/* ---------- NB.SYS builder page (fixed phosphor-green PCB palette) ---------- */
.app-system {
  --ln: #00e87b;
  --sys: #00e87b;
  background: #090d0a;
  min-height: 100%;
}
.helmet-glare {
  position: absolute; inset: 0;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.16), transparent 55%);
  pointer-events: none;
}
.rc-hero {
  position: relative;
  padding: 56px 40px 40px;
  overflow: hidden;
  perspective: 900px;
  border-bottom: 1px solid color-mix(in srgb, var(--sys, #00e87b) 18%, transparent);
  background:
    radial-gradient(ellipse at 85% 20%, color-mix(in srgb, var(--sys, #00e87b) 13%, transparent), transparent 55%),
    repeating-linear-gradient(0deg, transparent 0 31px, color-mix(in srgb, var(--sys, #00e87b) 5%, transparent) 31px 32px),
    repeating-linear-gradient(90deg, transparent 0 31px, color-mix(in srgb, var(--sys, #00e87b) 5%, transparent) 31px 32px),
    #090d0a;
}
.rc-kicker {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ln);
  margin: 0 0 14px;
}
.rc-hero h1 {
  margin: 0;
  font-size: clamp(52px, 9vw, 96px);
  line-height: .92;
  letter-spacing: -0.035em;
  font-weight: 700;
  color: #e9f5ec;
  text-transform: uppercase;
}
.rc-sub { color: #8fa596; max-width: 34ch; font-size: 14.5px; }
.rc-helmet {
  position: absolute;
  right: 24px; top: 50%;
  width: min(300px, 38%);
  aspect-ratio: 1;
  translate: 0 -50%;
  transform-style: preserve-3d;
  transition: transform .12s linear;
  filter: drop-shadow(0 22px 34px rgba(0,0,0,.55));
  cursor: pointer;
}

/* two stacked layers: CPU chip and portrait; the swap looks like a BIOS scan */
.sys-layer {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  transition: opacity .16s linear;
}
.sys-layer svg, .sys-layer img { width: 100%; height: 100%; display: block; }
.sys-layer img {
  object-fit: cover;
  border-radius: 14px;
  border: 2px solid color-mix(in srgb, var(--sys, #00e87b) 45%, transparent);
  filter: saturate(.85) contrast(1.06);
}
.sys-layer--face { opacity: 0; }
.sys-layer--face::after { /* CRT scanline texture over the portrait */
  content: '';
  position: absolute; inset: 2px;
  border-radius: 12px;
  background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--sys, #00e87b) 7%, transparent) 0 1px, transparent 1px 4px);
  pointer-events: none;
}
.sys-swap.show-face .sys-layer--face { opacity: 1; }
.sys-swap.show-face .sys-layer--chip { opacity: 0; }

.sys-scan {
  position: absolute; left: -5%; right: -5%; top: 0;
  height: 3px;
  background: var(--sys);
  box-shadow: 0 0 18px 5px color-mix(in srgb, var(--sys, #00e87b) 50%, transparent);
  opacity: 0;
  pointer-events: none;
}
.sys-swap.scanning .sys-scan { animation: sysScan .6s linear; }
.sys-swap.scanning .sys-layer { animation: sysGlitch .6s steps(3); }
@keyframes sysScan {
  0% { top: 0; opacity: 1; }
  100% { top: calc(100% - 3px); opacity: 1; }
}
@keyframes sysGlitch {
  30% { transform: translateX(2px); }
  55% { transform: translateX(-3px); }
  75% { transform: translateX(1px); }
}

/* the chip stays alive: current pulses along the pins + breathing core */
.sys-layer--chip svg g path {
  stroke-dasharray: 3 5;
  animation: sysTrace 1.4s linear infinite;
}
.sys-layer--chip svg > rect + rect { animation: sysCore 2.6s ease-in-out infinite; }
@keyframes sysTrace { to { stroke-dashoffset: -16; } }
@keyframes sysCore { 50% { opacity: .68; } }

@media (prefers-reduced-motion: reduce) {
  .sys-layer--chip svg g path, .sys-layer--chip svg > rect + rect,
  .sys-swap.scanning .sys-scan, .sys-swap.scanning .sys-layer { animation: none; }
}

.rc-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid color-mix(in srgb, var(--sys, #00e87b) 16%, transparent);
}
.rc-stats > div {
  padding: 22px 18px;
  text-align: center;
}
.rc-stats > div + div { border-left: 1px solid color-mix(in srgb, var(--sys, #00e87b) 16%, transparent); }
.rc-stats strong { display: block; font-size: 30px; font-weight: 700; color: var(--ln); letter-spacing: -0.02em; }
.rc-stats span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #8fa596; }

.rc-about {
  padding: 34px 40px 8px;
  max-width: 76ch;
}
.rc-about h2 {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--ln);
}
.rc-about p { margin: 0 0 12px; color: #a8bfae; font-size: 14px; line-height: 1.75; }
.rc-about a { color: var(--ln); text-decoration-color: color-mix(in srgb, var(--sys, #00e87b) 40%, transparent); }

/* ---------- accent picker: green is a default, not a rule ---------- */
.sys-colors {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}
.sys-colors .sc-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .2em;
  color: #8fa596;
}
.sys-colors button {
  width: 20px; height: 20px;
  border-radius: 6px;
  background: var(--c);
  border: 1px solid rgba(255,255,255,.14);
  transition: transform .15s var(--ease-out);
}
.sys-colors button:hover { transform: scale(1.18); }
.sys-colors button[aria-pressed="true"] {
  outline: 2px solid var(--c);
  outline-offset: 3px;
}

/* ---------- live telemetry strip ---------- */
.rc-tele {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 22px;
  padding: 18px 40px;
  border-bottom: 1px solid color-mix(in srgb, var(--sys, #00e87b) 16%, transparent);
  background: #0b100c;
}
.tele-g { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tele-g > span {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  color: #8fa596;
  width: 44px;
  flex: none;
}
.tg-bar {
  flex: 1;
  height: 6px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--sys, #00e87b) 12%, transparent);
  overflow: hidden;
}
.tg-bar i {
  display: block;
  height: 100%;
  width: 20%;
  border-radius: 99px;
  background: var(--sys);
  box-shadow: 0 0 10px color-mix(in srgb, var(--sys, #00e87b) 55%, transparent);
  transition: width 1.1s var(--ease-out);
}
.tele-g b {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ln);
  min-width: 66px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.rc-hall { padding: 36px 40px; }
.rc-hall-sub {
  margin: -16px 0 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8fa596;
}

/* ---------- hall of fame: click a part → spec sheet ---------- */
.rc-hcard { position: relative; overflow: hidden; font: inherit; color: inherit; width: 100%; }
.hc-specs {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px;
  background: color-mix(in srgb, #0a0f0b 88%, transparent);
  backdrop-filter: blur(3px);
  border-radius: inherit;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
  pointer-events: none;
}
.hc-specs b {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ln);
  margin-bottom: 3px;
}
.hc-specs i {
  font-style: normal;
  font-size: 12px;
  line-height: 1.45;
  color: #cfe3d6;
}
.rc-hcard.open .hc-specs { opacity: 1; transform: none; }
.rc-hcard.open svg { filter: blur(2px) brightness(.6) !important; }
.rc-hall h2 {
  margin: 0 0 22px;
  font-size: 26px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: #e9f5ec;
}
.rc-hall-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.rc-hcard {
  background: #0e130f;
  border: 1px solid color-mix(in srgb, var(--sys, #00e87b) 14%, transparent);
  border-radius: 12px;
  padding: 18px 12px 14px;
  text-align: center;
  cursor: pointer;
  transition: transform .22s var(--ease-out), border-color .2s, background .2s;
}
.rc-hcard svg { width: 100%; filter: grayscale(1) brightness(.8); transition: filter .25s var(--ease-out), transform .25s var(--ease-out); }
.rc-hcard span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #8fa596; transition: color .2s; }
.rc-hcard:hover, .rc-hcard:focus-visible {
  transform: translateY(-5px);
  border-color: var(--ln);
  background: #101710;
}
.rc-hcard:hover svg, .rc-hcard:focus-visible svg { filter: none; transform: scale(1.06) rotate(-3deg); }
.rc-hcard:hover span, .rc-hcard:focus-visible span { color: var(--ln); }

.rc-marquee {
  overflow: hidden;
  border-block: 1px solid color-mix(in srgb, var(--sys, #00e87b) 16%, transparent);
  padding: 12px 0;
  background: #0b100c;
}
.rc-track {
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .22em;
  color: var(--ln);
  animation: marquee 24s linear infinite;
  width: max-content;
}
@keyframes marquee { to { transform: translateX(-33.33%); } }

.rc-cta {
  padding: 28px 40px 40px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.rc-cta .btn { background: var(--ln); color: #0e130f; }

/* ---------- RAMPG showcase ---------- */
.app-rampg { display: flex; flex-direction: column; height: 100%; }
.rg-demo {
  position: relative;
  flex: none;
  height: 200px;
  background: radial-gradient(ellipse at 50% 20%, #10141c, #07090d);
  border-bottom: 1px solid var(--line);
}
.rg-demo canvas { display: block; width: 100%; height: 100%; }
.rg-badge {
  position: absolute; top: 12px; right: 12px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 99px;
  padding: 4px 10px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.rg-info { padding: var(--s5) var(--s6); overflow: auto; }
.rg-info h1 { margin: 0; font-size: 30px; letter-spacing: -0.02em; }
.rg-tag { font-family: var(--font-mono); font-size: 12px; color: var(--accent); text-transform: uppercase; letter-spacing: .12em; margin: 4px 0 14px; }
.rg-info p { color: var(--muted); font-size: 14px; }
.rg-info ul { color: var(--muted); font-size: 13.5px; padding-left: 18px; }
.rg-info ul li { margin-bottom: 4px; }
.rg-info .skill-chips { margin-top: var(--s4); }
.rg-cta { margin-top: var(--s5); padding-bottom: var(--s2); }

/* ---------- Tools ---------- */
.tb-pin {
  height: 38px;
  padding: 0 14px;
  display: flex; align-items: center; gap: 8px;
  border-radius: var(--r-btn);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}
.tb-pin svg { width: 14px; height: 14px; stroke: var(--accent); }
.tb-pin:hover { color: var(--text); background: var(--surface-2); border-color: var(--line-strong); }

.app-tools { display: flex; height: 100%; }
.tl-side {
  width: 200px;
  flex: none;
  border-right: 1px solid var(--line);
  overflow-y: auto;
  padding: var(--s3);
  background: color-mix(in srgb, var(--bg-2) 60%, transparent);
}
/* category pills + drill-down back button are mobile affordances;
   desktop shows the sidebar and tool pane side-by-side at all times */
.tl-cats { display: none; }
.tl-back { display: none; }
.tl-cat {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint);
  margin: var(--s4) var(--s2) var(--s1);
}
.tl-cat:first-child { margin-top: var(--s1); }
.tl-item {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 13px;
  color: var(--muted);
  padding: 7px 10px;
  border-radius: var(--r-btn);
}
.tl-item:hover { color: var(--text); background: var(--surface-2); }
.tl-item.active { color: var(--text); background: var(--surface-2); box-shadow: inset 2px 0 0 var(--accent); }

.tl-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.tl-head { padding: var(--s5) var(--s5) 0; }
.tl-head h2 { margin: 0 0 2px; font-size: 20px; letter-spacing: -0.01em; }
.tl-body { padding: var(--s4) var(--s5) var(--s5); overflow-y: auto; display: flex; flex-direction: column; gap: var(--s3); }

.t-row { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.t-field { display: flex; flex-direction: column; gap: 4px; }
.t-field label {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
}
.t-field output { font-family: var(--font-mono); font-size: 13px; color: var(--text); }
.t-in, .t-area {
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-btn);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 9px 12px;
  min-width: 0;
}
.t-in:focus, .t-area:focus { outline: none; border-color: var(--accent); }
/* flex:none + min-height stops the flex column from collapsing the textarea
   to a thin sliver (it has no intrinsic min-height in a flex context) */
.t-area { width: 100%; resize: vertical; line-height: 1.6; flex: none; min-height: 92px; }
.t-chip { width: 38px; height: 38px; border-radius: var(--r-btn); border: 1px solid var(--line-strong); flex: none; }
.t-out-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
.t-big { font-family: var(--font-mono); font-size: 30px; font-weight: 500; color: var(--accent); letter-spacing: -0.01em; }
.t-sample { border-radius: var(--r-btn); border: 1px solid var(--line); padding: var(--s4); font-size: 15px; }
.t-code {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: #07090d;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  padding: var(--s3);
  color: var(--text);
  overflow-x: auto;
  min-height: 20px;
}
.t-code mark { background: var(--accent); color: var(--on-accent); border-radius: 3px; padding: 0 1px; }
.t-pass { font-family: var(--font-mono); font-size: 12px; padding: 5px 12px; border-radius: 99px; border: 1px solid var(--line-strong); }
.t-pass.ok { color: #3ddc97; border-color: rgba(61,220,151,.5); }
.t-pass.no { color: #ff7a45; border-color: rgba(255,122,69,.5); }
.t-palette { display: flex; gap: var(--s2); height: 120px; }
.pl-swatch {
  flex: 1;
  border-radius: var(--r-btn);
  border: 1px solid var(--line);
  position: relative;
  transition: flex .25s var(--ease-out);
}
.pl-swatch:hover { flex: 1.6; }
.pl-swatch span {
  position: absolute; bottom: 8px; left: 50%; translate: -50% 0;
  font-family: var(--font-mono); font-size: 10.5px;
  color: rgba(0,0,0,.75);
  background: rgba(255,255,255,.75);
  padding: 2px 7px; border-radius: 99px;
  opacity: 0; transition: opacity .15s;
}
.pl-swatch:hover span { opacity: 1; }
.df-add { color: #3ddc97; }
.df-del { color: #ff7a45; }

/* travel window */
.app-travel { height: 100%; display: flex; }
.tv-globe { flex: 1.4; min-width: 0; position: relative; background: radial-gradient(ellipse at 50% 50%, #0c1018, #07090d); display: grid; place-items: center; }
.tv-side { flex: 1; border-left: 1px solid var(--line); padding: var(--s5); overflow: auto; min-width: 220px; }
.tv-side h3 { margin: 0 0 4px; font-size: 17px; letter-spacing: -0.01em; }
.tv-side .sub { font-family: var(--font-mono); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; margin-bottom: var(--s4); }
.tv-list { display: flex; flex-direction: column; }
.tv-list li {
  list-style: none;
  display: flex; align-items: center; gap: var(--s3);
  padding: 9px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.tv-list li .fl { font-size: 17px; }
.tv-list li .cc { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--faint); }
.tv-list { padding: 0; margin: 0; }

/* about app */
.app-about { padding: var(--s6); max-width: 620px; }
.app-about h1 { font-size: 26px; margin: 0 0 var(--s3); letter-spacing: -0.02em; }
.app-about p { color: var(--muted); font-size: 14.5px; }
.app-about .sig { font-family: var(--font-mono); color: var(--accent); font-size: 12.5px; margin-top: var(--s5); }

/* generic empty/note */
.note { font-family: var(--font-mono); font-size: 12px; color: var(--faint); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1023px) {
  .bento { grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(140px, auto); }
  .t-os { grid-column: 1 / 7; grid-row: 1 / 3; min-height: 320px; }
  .t-hero { grid-column: 1 / 4; grid-row: 3 / 4; }
  .t-time { grid-column: 4 / 7; grid-row: 3 / 4; }
  .t-travel { grid-column: 1 / 4; grid-row: 4 / 6; min-height: 300px; }
  .t-theme { grid-column: 4 / 7; grid-row: 4 / 5; }
  .t-contact { grid-column: 4 / 7; grid-row: 5 / 6; }
}

@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; }
  .t-hero, .t-travel, .t-time, .t-os, .t-theme, .t-contact { grid-column: 1 / 2; grid-row: auto; }
  .t-os { min-height: 340px; }
  .t-travel { min-height: 340px; }
  .desk-icons { bottom: 120px; }
  .app-travel { flex-direction: column; }
  .tv-side { border-left: none; border-top: 1px solid var(--line); }
  .window { min-width: 0; }

  /* slim taskbar: desktop icons + start menu cover launching */
  .tb-pins { display: none; }
  .tb-clock span { display: none; }
  .tb-start { padding: 0 10px; }
  .skin-seg button { width: 30px; }
  #taskbar { gap: 4px; padding: 0 var(--s2); }
  body[data-skin="mac"] .desk-icons { top: 40px; }
  body[data-skin="mac"] .tb-apps { display: none; }

  #hint-fab { right: 14px; bottom: 14px; }
  #hint-panel { right: 12px; left: 12px; max-width: none; flex-wrap: wrap; }
}

/* fingers need bigger window controls than cursors do */
@media (pointer: coarse) {
  .win-ctl button { width: 46px; height: 36px; }
  .win-title { height: 42px; }
  body[data-skin="mac"] .win-ctl button { width: 16px; height: 16px; }
  .tip-nav button { width: 34px; height: 34px; }
  #hint-panel .tip-x { width: 34px; height: 34px; }

  /* kill the 300ms tap delay + double-tap-zoom hijack on every control */
  button, a, .swatch, .dicon, .tl-item, .rc-hcard, .sl-shape,
  .res-tabs button, .sys-colors button, [data-act], [data-tool] {
    touch-action: manipulation;
  }
  /* dragging these rotates/interacts instead of scrolling the window */
  #sl-stage, #sl-stage canvas, .tv-globe, .tv-globe canvas,
  .rc-helmet, #globe-mini { touch-action: none; }
}

/* ============================================================
   MOBILE PERFORMANCE — the compositor killers (backdrop blur,
   fullscreen grain, perpetual FX) make touch input drop frames
   on real phones. Strip them under ~760px so taps stay snappy.
   ============================================================ */
@media (max-width: 760px) {
  /* backdrop-filter on 13 surfaces is the #1 mobile jank source */
  .tile, .window, #taskbar, #startmenu, #menubar,
  .tray-pop, #hint-panel, .res-tabs, .land-status {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* give the now-unblurred surfaces solid-enough backgrounds */
  .window { background: color-mix(in srgb, var(--surface) 98%, transparent); }
  #taskbar { background: color-mix(in srgb, var(--bg-2) 96%, transparent); }
  #startmenu, .tray-pop, #hint-panel { background: var(--surface); }

  /* stop the perpetual FULLSCREEN repaints (the real jank) — but keep the
     NB.SYS hall-of-fame animations, which only run inside its open window */
  #fx-grain { display: none !important; }
  body.fx-on .t-os::after,          /* rotating border beam (landing)  */
  body.fx-on .t-hero h1,            /* hero RGB glitch (landing)       */
  body.fx-on .login-avatar,        /* avatar radar ping (landing)     */
  body.fx-on .desk-icons .dicon .ig { animation: none !important; } /* 12 idle floats */

  /* FAILSAFE: never let the entrance animation leave content hidden on mobile */
  body.fx-on .tile,
  body.fx-on .tile > *,
  body.fx-on .land-top,
  body.fx-on .land-foot { opacity: 1 !important; transform: none !important; }
  body.fx-on .fx-wire { display: none !important; }

  /* iOS auto-zooms the whole page when focusing an input under 16px — that's
     what blows the layout up. 16px minimum stops it. */
  input, textarea, select, .t-in, .t-area, #theme-cmd, #t-in {
    font-size: 16px !important;
  }

  /* ShapeLab: let the shape row scroll instead of squashing controls */
  .win-body .sl-bar { gap: var(--s3); }
  .win-body .sl-shapes { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .win-body .sl-shape { flex: none; }
  .win-body .sl-ctl { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .win-body .sl-stage { min-height: 240px; }

  /* NB.SYS colour picker: easier taps */
  .win-body .sys-colors button { width: 26px; height: 26px; }
}

/* ---------- "better on desktop" note — non-blocking bottom banner ---------- */
#mobile-note {
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 300;
  pointer-events: none; /* only the card is interactive; never blocks the page */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
#mobile-note.show { opacity: 1; transform: none; }
#mobile-note .mn-card {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 520px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: var(--shadow-win);
}
#mobile-note .mn-txt { font-size: 13px; color: var(--muted); line-height: 1.5; }
#mobile-note .mn-txt strong { color: var(--text); }
#mobile-note button {
  flex: none;
  padding: 10px 16px;
  border-radius: var(--r-btn);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  font-size: 13px;
  touch-action: manipulation;
}

/* ============================================================
   MOTION SAFETY
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   PRINT (resume)
   ============================================================ */

@media print {
  body * { visibility: hidden; }
  .app-resume, .app-resume * { visibility: visible; }
  .app-resume {
    position: fixed; inset: 0;
    background: #fff; color: #111;
    max-width: none;
  }
  .app-resume .r-role, .app-resume h2 { color: #2563eb; }
  .app-resume p, .app-resume ul, .app-resume .xp-head em, .app-resume .r-meta, .app-resume .r-meta a { color: #444; }
  .app-resume .skill-chips span { color: #444; border-color: #ccc; }
  .app-resume .no-print { display: none; }
}

/* ============================================================
   LIGHT THEME

   The landing page follows the system preference. NB.OS does not:
   a window manager sitting on a live canvas wallpaper is a dark
   surface on purpose, the same way a terminal is, so #desktop and
   the boot sequence re-declare the dark tokens for their subtree.

   Only the neutral layer moves. The accent stays whatever theme is
   selected — but a vivid accent that reads fine on #0a0c10 will not
   carry 4.5:1 as text on a light surface, so --accent-ink is the
   darkened form used anywhere the accent is ink rather than paint.
   ============================================================ */

:root {
  --accent-ink: var(--accent);
  /* canvas wallpaper reads these instead of hardcoding its own */
  --wall-1: #0a0d13;
  --wall-2: #07090d;
  --wall-dot: rgba(232, 236, 241, 0.045);
  --wall-vignette: rgba(0, 0, 0, 0.45);
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;

    /* neutrals stay blue-tinted — no pure white, no flat grey */
    --bg: #eef1f6;
    --bg-2: #e6eaf2;
    --surface: #fbfcfe;
    --surface-2: #f2f5fa;
    --surface-3: #e6ebf3;
    --line: rgba(18, 24, 38, 0.13);
    --line-strong: rgba(18, 24, 38, 0.24);
    --text: #141922;
    --muted: #586074;
    --faint: #565f75;

    --accent-ink: color-mix(in srgb, var(--accent) 42%, #0b1220);

    --shadow-tile: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 6px 20px rgba(20, 30, 55, .08);
    --shadow-win: 0 24px 60px rgba(20, 30, 55, .18), 0 2px 8px rgba(20, 30, 55, .10);

    --wall-1: #f1f4fa;
    --wall-2: #e4e9f2;
    --wall-dot: rgba(20, 26, 38, 0.05);
    --wall-vignette: rgba(28, 40, 62, 0.10);
  }

  /* accent as ink, never as a 2:1 tint on paper */
  .tile .label svg,
  .contact-btn svg,
  .lite-toggle.on svg { stroke: var(--accent-ink); }

  .clock-diff,
  .term-lines .prompt,
  .lite-toggle.on,
  .t-hero h1::after { color: var(--accent-ink); }

  .theme-input .prompt { color: var(--accent-ink) !important; }

  .t-hero h1 em { -webkit-text-stroke-color: var(--accent-ink); }

  .hero-watermark { -webkit-text-stroke-color: color-mix(in srgb, var(--accent-ink) 34%, transparent); }

  /* the "open to opportunities" dot needs to read on paper too */
  .status-dot { background: #0f9d63; box-shadow: 0 0 10px rgba(15, 157, 99, .5); }

  /* tiles are paper here, not smoked glass */
  .tile { background: var(--surface); backdrop-filter: none; }
  .land-status, .lite-toggle { background: var(--surface); backdrop-filter: none; }

  /* NB.OS keeps its own weather */
  #desktop, #boot {
    color-scheme: dark;
    --bg: #0a0c10;
    --bg-2: #0e1117;
    --surface: #12151d;
    --surface-2: #171b25;
    --surface-3: #1d2230;
    --line: rgba(232, 236, 241, 0.09);
    --line-strong: rgba(232, 236, 241, 0.18);
    --text: #e8ecf1;
    --muted: #8b94a3;
    --faint: #5c6472;
    --prose: #c3cad6;
    --shadow-tile: 0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px rgba(0,0,0,.35);
    --shadow-win: 0 24px 60px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);
    --wall-1: #0a0d13;
    --wall-2: #07090d;
    --wall-dot: rgba(232, 236, 241, 0.045);
    --wall-vignette: rgba(0, 0, 0, 0.45);
    color: var(--text);
  }
}

/* ============================================================
   BENTO / WORK HANDOFF

   The bento used to stretch to fill the viewport because nothing
   followed it. Now something does: it holds a deliberate height and
   lets the top of the work section show, so the page reads as having
   a second half instead of ending at the fold.
   ============================================================ */

.bento {
  flex: 1 0 auto;
  min-height: min(66dvh, 660px);
}

@media (max-width: 1023px) { .bento { min-height: 0; } }

/* projects app → the real case studies on the landing page */
.proj-cases {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  text-align: left;
  margin: 0 0 var(--s5);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-btn);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out);
}
.proj-cases:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.proj-cases svg { width: 18px; height: 18px; stroke: var(--accent); flex: none; }
.proj-cases span {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; color: var(--muted);
}
.proj-cases strong { font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--text); }
.proj-cases em { margin-left: auto; font-style: normal; color: var(--accent); flex: none; }

/* ============================================================
   TRAVEL TILE — opens in place

   The country list used to launch the NB.OS travel app, which
   meant a full context switch to answer a small question. It now
   opens over the tile it was clicked on: the globe stays behind
   it, the layout never moves, and there is nothing to navigate
   back from. The full 3D app is still one click further in.
   ============================================================ */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.travel-open {
  position: absolute;
  inset: 0;
  border: none;
  background: transparent;
  border-radius: inherit;
  z-index: 2;
}
.travel-open:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.t-travel.is-open .travel-open { pointer-events: none; }

.travel-panel {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s5);
  border-radius: inherit;
  /* the globe stays visible underneath — this reads as a layer on the
     tile rather than a different screen */
  background: color-mix(in srgb, var(--surface) 93%, transparent);
  backdrop-filter: blur(10px);
  transform-origin: 70% 30%;
}
.travel-panel[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .t-travel.is-open .travel-panel { animation: tp-in .26s var(--ease-out); }
  .travel-panel.is-closing { animation: tp-out .16s var(--ease-in) forwards; }
}
@keyframes tp-in  { from { opacity: 0; transform: scale(.94); } }
@keyframes tp-out { to   { opacity: 0; transform: scale(.97); } }

.tp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
}
.tp-head .label { margin: 0; }

.tp-close {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted);
  transition: color .2s var(--ease-out), border-color .2s var(--ease-out), background-color .2s var(--ease-out);
}
.tp-close:hover { color: var(--text); border-color: var(--line-strong); background: color-mix(in srgb, var(--text) 8%, transparent); }
.tp-close svg { width: 15px; height: 15px; }

.tp-list {
  list-style: none;
  margin: 0;
  padding: 0 2px 2px 0;
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(124px, 44%, 168px), 1fr));
  gap: 6px;
  align-content: start;
}

.tp-list li {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
}
.tp-list b {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--accent-ink);
  flex: none;
}
.tp-list span {
  font-size: 12.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* staggered entrance — each chip arrives just after the one before it */
@media (prefers-reduced-motion: no-preference) {
  .t-travel.is-open .tp-list li {
    animation: tp-chip .34s var(--ease-out) backwards;
    animation-delay: calc(var(--i, 0) * 28ms + 60ms);
  }
}
@keyframes tp-chip { from { opacity: 0; transform: translateY(8px); } }

.tp-more {
  flex: none;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 0 0;
  border-top: 1px solid var(--line);
  transition: color .2s var(--ease-out);
}
.tp-more:hover { color: var(--accent-ink); }

/* the tile lifts slightly while its panel is open, so the layer reads */
.t-travel.is-open { border-color: var(--line-strong); box-shadow: var(--shadow-tile), 0 0 60px -20px var(--glow); }

@media (max-width: 760px) {
  .travel-panel { backdrop-filter: none; background: var(--surface); }
}

/* ============================================================
   PROJECTS AS A PANEL

   The work lives off the landing page now: the bento stays a clean
   single screen and the projects open over it from the header. The
   markup stays exactly where it was, so with JavaScript off the
   section simply renders inline further down the page and every
   #work / #case link still resolves. Only .js turns it into a panel.
   ============================================================ */

.js #work {
  position: fixed;
  inset: 0;
  z-index: 400;
  margin: 0;
  padding: clamp(20px, 4vw, 56px) clamp(16px, 4vw, 56px) clamp(32px, 6vw, 72px);
  max-width: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  visibility: hidden;
  opacity: 0;
}

/* the section's own children keep the page's measure inside the panel */
.js #work > * { max-width: 1800px; margin-inline: auto; }

.js #work.is-open { visibility: visible; opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .js #work.is-open { animation: work-in .28s var(--ease-out); }
  .js #work.is-closing { animation: work-out .18s var(--ease-in) forwards; }
}
@keyframes work-in  { from { opacity: 0; transform: translateY(14px); } }
@keyframes work-out { to   { opacity: 0; transform: translateY(8px); } }

body.work-open { overflow: hidden; }

/* ---- close control ---- */
.work-close { display: none; }
.js #work .work-close {
  display: grid;
  place-items: center;
  position: sticky;
  top: 0;
  margin-left: auto;
  margin-bottom: clamp(4px, 1vw, 12px);
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  color: var(--muted);
  z-index: 2;
  transition: color .2s var(--ease-out), border-color .2s var(--ease-out), background-color .2s var(--ease-out);
}
.js #work .work-close:hover { color: var(--text); border-color: var(--line-strong); background: color-mix(in srgb, var(--text) 8%, transparent); }
.work-close svg { width: 18px; height: 18px; }

/* ---- header triggers ---- */
.land-brand {
  text-decoration: none;
  color: inherit;
  border-radius: 12px;
  padding: 4px 8px 4px 4px;
  margin: -4px -8px -4px -4px;
  transition: background-color .2s var(--ease-out);
}
.land-brand:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.brand-text { display: block; }

.brand-go {
  width: 15px; height: 15px;
  color: var(--muted);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .2s var(--ease-out), transform .2s var(--ease-out), color .2s var(--ease-out);
}
.land-brand:hover .brand-go,
.land-brand:focus-visible .brand-go { opacity: 1; transform: none; color: var(--accent-ink); }

.nav-projects {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 40px;
  padding: 0 12px 0 11px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out);
}
.nav-projects:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.nav-projects svg { width: 14px; height: 14px; stroke: var(--accent); flex: none; }
.nav-projects b {
  display: inline-grid;
  place-items: center;
  min-width: 19px; height: 19px;
  padding: 0 5px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--text) 12%, transparent);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
}

@media (max-width: 560px) {
  .nav-projects span { display: none; }
  .nav-projects { padding: 0 10px; }
  .land-brand .brand-go { display: none; }
}

/* ============================================================
   TRAVEL PANEL — the globe opens, the list supports it
   ============================================================ */

.tp-head .label b {
  margin-left: 6px;
  color: var(--accent-ink);
  font-weight: 600;
}

.tp-globe {
  flex: 1;
  min-height: 0;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}
/* the live globe is moved in here on open, so it is the same instance that
   was spinning in the tile — no second WebGL context is ever created */
.tp-globe .globe-wrap { position: absolute; inset: 0; height: 100%; }

/* countries become a single scrolling strip so the globe keeps the room */
.tp-list {
  display: flex;
  flex: none;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  padding-bottom: 2px;
  grid-template-columns: none;
}
.tp-list::-webkit-scrollbar { display: none; }
.tp-list li { flex: none; }

/* Redefines the keyframe from travel.css as transform-only. A staggered
   animation needs a delay, and a delay needs a backwards fill to hold the
   start state — which parks the element on that keyframe permanently if the
   animation never runs. Holding a transform is cosmetic; holding opacity 0
   is a disappeared chip. */
@keyframes tp-chip { from { transform: translateY(8px); } }

@media (prefers-reduced-motion: no-preference) {
  .t-travel.is-open .tp-list li {
    animation: tp-chip .3s var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 22ms + 40ms);
  }
}

/* ============================================================
   TRAVEL PANEL — expands out of the tile

   The first version opened a panel the same size as the tile, which
   left the globe smaller than it had been. It now breaks out to a
   real size and animates from the tile's own rectangle, so it reads
   as that tile opening up rather than a dialog appearing elsewhere.
   ============================================================ */

.travel-panel {
  position: fixed;
  inset: auto;
  top: 50%;
  left: 50%;
  width: min(760px, 92vw);
  height: min(620px, 86dvh);
  transform: translate(-50%, -50%);
  z-index: 420;
  padding: clamp(16px, 2.4vw, 26px);
  gap: var(--s4);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-win);
  backdrop-filter: none;
  /* the FLIP pass in landing.js owns the entrance now */
  animation: none !important;
  transform-origin: 50% 50%;
}

#travel-scrim {
  position: fixed;
  inset: 0;
  z-index: 415;
  background: rgba(4, 6, 10, .64);
  backdrop-filter: blur(5px);
}
@media (prefers-color-scheme: light) {
  #travel-scrim { background: rgba(20, 26, 38, .46); }
}
@media (max-width: 760px) {
  #travel-scrim { backdrop-filter: none; background: rgba(4, 6, 10, .8); }
}

/* the globe is the point of the panel — give it everything left over */
.tp-globe {
  flex: 1 1 auto;
  min-height: 220px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg) 60%, transparent);
}

.tp-head .label { font-size: 12px; }

.tp-close { width: 40px; height: 40px; }

/* a hint that the globe is draggable while it is open */
.tp-hint {
  flex: none;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}

.tp-list { max-height: 34px; }

@media (max-height: 560px) {
  .travel-panel { height: 94dvh; padding: var(--s3); gap: var(--s2); }
  .tp-list, .tp-hint { display: none; }
}

body.travel-open { overflow: hidden; }

/* ============================================================
   HERO TILE — the way into the projects

   Neil's name is the entry point, so the whole tile is the target
   and this line is the affordance that says so. An <a href="#work">
   like every other route into the panel, so it still resolves with
   JavaScript switched off.
   ============================================================ */

.hero-projects {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  align-self: flex-start;
  margin-top: var(--s4);
  padding: 9px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  z-index: 2;
  transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out);
}
/* the whole tile is the hit area, not just the pill */
.hero-projects::after { content: ''; position: absolute; inset: -9999px; z-index: -1; }
.t-hero { position: relative; overflow: hidden; }

.hero-projects svg { width: 14px; height: 14px; stroke: var(--accent); flex: none; }
.hero-projects .hp-go { stroke: currentColor; transition: transform .25s var(--ease-out); }
.t-hero:hover .hero-projects { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .t-hero:hover .hero-projects .hp-go { transform: translateX(3px); }
}
.hero-projects:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (prefers-color-scheme: light) {
  .hero-projects svg { stroke: var(--accent-ink); }
  .hero-projects .hp-go { stroke: currentColor; }
}

/* Belt and braces for the NB.OS preview: whatever the script does, the canvas
   fills its tile. A canvas with no usable size falls back to 300x150, which is
   exactly the dark rectangle this prevents. */
.os-preview, #landing-bg, #wallpaper { width: 100%; height: 100%; }