/* Layout: a dark desktop with a grid wallpaper. A menu bar on top, one main window
   on the left that changes with the menu, and two small windows on the right
   (latest updates and "now"). On phones everything stacks into one column. */
:root {
  color-scheme: dark;
  --desk: #0f1216;
  --grid: #1a1f25;
  --win: #1e232a;
  --bar: #2b313a;
  --text: #e8eaed;
  --soft: #b7bcc4;
  --dim: #8a919b;
  --line: #343b45;
  --accent: #ffb547;
  --accent-ink: #1b1306;
  --f-sans: "Chivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Chivo Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
html { background: var(--desk); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font: 16px/1.55 var(--f-sans);
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--desk);
}
a { color: var(--accent); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Menu bar */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--bar); }
.menubar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px;
  background: color-mix(in oklab, var(--bar), transparent 6%);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  padding-block: 8px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  font: 13px var(--f-mono);
}
.menubar .name { font: 900 15px var(--f-sans); letter-spacing: -.01em; text-decoration: none; color: var(--text); }
.menubar nav { display: flex; gap: 16px; }
.menubar nav a { color: var(--soft); text-decoration: none; padding: 2px 0; }
.menubar nav a:hover, .menubar nav a[aria-current="page"] { color: var(--accent); }
.say-hi { margin-left: auto; display: flex; align-items: center; gap: 8px; padding: 4px 12px; border: 1px solid color-mix(in oklab, var(--accent), transparent 55%); border-radius: 999px; color: var(--accent); text-decoration: none; }
.say-hi:hover, .say-hi[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.say-hi:hover .dot, .say-hi[aria-current="page"] .dot { background: var(--accent-ink); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 75%); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent), transparent 90%); } }

/* Desktop */
.desk {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; align-items: start;
  padding-block: 32px 64px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.side { display: grid; gap: 24px; }

.win { background: var(--win); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); min-width: 0; }
.tbar { display: flex; align-items: center; gap: 7px; background: var(--bar); padding: 8px 12px; font: 12px var(--f-mono); color: var(--dim); }
.tbar .light { width: 11px; height: 11px; border-radius: 50%; background: #4a525e; border: 0; padding: 0; flex: none; }
.tbar .light.close { background: var(--accent); }
.tbar button.light { cursor: pointer; }
.tbar .title { margin-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wbody { padding: 24px clamp(18px, 3vw, 32px) 30px; display: grid; gap: 16px; }

h1, h2, h3 { margin: 0; text-wrap: balance; }
h1 { font: 900 clamp(32px, 5vw, 54px)/1 var(--f-sans); letter-spacing: -.035em; }
h2 { font: 900 clamp(26px, 3.6vw, 38px)/1.05 var(--f-sans); letter-spacing: -.03em; }
h3 { font: 700 18px/1.25 var(--f-sans); }
p { margin: 0; max-width: 64ch; }
.lede { color: var(--soft); font-size: 17px; }
.label { font: 600 11.5px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }

/* App icons */
/* Home intro, with an optional photo (intro.feature) to its right. */
.intro { display: grid; gap: 16px; }
.intro-head { display: grid; gap: 16px; }
.intro.with-feature { grid-template-columns: minmax(0, 1fr) clamp(150px, 32%, 220px); grid-template-areas: "head feature" "lede feature"; grid-template-rows: auto 1fr; column-gap: 28px; }
.intro.with-feature .intro-head { grid-area: head; }
.intro.with-feature .lede { grid-area: lede; margin: 0; }
.feature { grid-area: feature; align-self: start; color: var(--soft); font: 13px/1.4 var(--f-mono); text-decoration: none; }
.feature img { display: block; width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover; border: 1px solid var(--line); border-radius: 10px; }
.feature span { display: block; margin-top: 8px; }
.feature:hover span { color: var(--accent); }
.feature:hover img { border-color: var(--accent); }
.apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 18px 10px; margin-top: 6px; }
.app { display: grid; justify-items: center; gap: 8px; text-align: center; text-decoration: none; color: var(--text); font: 12px/1.25 var(--f-mono); padding: 6px 2px; border-radius: 8px; }
.app .tile { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; background: var(--bar); border: 1px solid var(--line); color: var(--accent); font: 900 19px var(--f-sans); letter-spacing: -.02em; transition: transform .15s, background .15s; }
.app[data-kind="hardware"] .tile { border-radius: 50%; }
.app[data-kind="game"] .tile { border-radius: 6px; transform: rotate(-4deg); }
.app:hover .tile { transform: translateY(-3px); background: color-mix(in oklab, var(--bar), var(--accent) 14%); }
.app.system .tile { color: var(--text); background: transparent; border-style: dashed; }

/* Lists */
.plist { display: grid; gap: 2px; }
.prow { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 10px; border-radius: 8px; text-decoration: none; color: var(--text); }
.prow:hover { background: color-mix(in oklab, var(--win), white 4%); }
.prow .tile { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; background: var(--bar); color: var(--accent); font: 900 15px var(--f-sans); }
.prow[data-kind="hardware"] .tile { border-radius: 50%; }
.prow p { color: var(--soft); font-size: 14.5px; }
.chip { font: 12px var(--f-mono); color: var(--accent); border: 1px solid color-mix(in oklab, var(--accent), transparent 60%); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags span { font: 12px var(--f-mono); color: var(--soft); border: 1px solid var(--line); border-radius: 4px; padding: 2px 8px; }
.tags .chip { color: var(--accent); border-color: color-mix(in oklab, var(--accent), transparent 60%); border-radius: 999px; text-decoration: none; }
.btn { justify-self: start; display: inline-block; background: var(--accent); color: var(--accent-ink); text-decoration: none; font: 700 15px var(--f-sans); padding: 10px 16px; border-radius: 7px; }
.btn:hover { background: color-mix(in oklab, var(--accent), white 15%); }
.btn.ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.btn.ghost:hover { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.links { justify-self: start; display: flex; flex-wrap: wrap; gap: 10px; }
.back { justify-self: start; font: 13px var(--f-mono); color: var(--dim); text-decoration: none; }
.back:hover { color: var(--accent); }

.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filters button { background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font: 13px var(--f-mono); color: var(--soft); cursor: pointer; }
.filters button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.post { display: grid; gap: 4px; padding: 14px 0; border-top: 1px solid var(--line); }
.post .meta { font: 12.5px var(--f-mono); color: var(--dim); display: flex; gap: 10px; }
.post .meta b { color: var(--accent); font-weight: 600; }
.post p { color: var(--soft); font-size: 15px; }

/* Side windows */
.log { margin: 0; padding: 16px 18px; list-style: none; display: grid; gap: 12px; font: 13px/1.5 var(--f-mono); }
.log li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; }
.log time { color: var(--accent); }
.log a { color: var(--text); text-decoration: none; }
.log a:hover { color: var(--accent); }
.now { margin: 0; padding: 16px 18px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; font: 13px/1.5 var(--f-mono); }
.now dt { color: var(--dim); }
.now dd { margin: 0; }

/* Project story pages: the window opens maximized and reads top to bottom */
.desk.max { grid-template-columns: minmax(0, 1fr); max-width: 1080px; }
.desk.max .side { display: none; }
.story { display: grid; gap: clamp(56px, 8vw, 96px); }
.story-head { display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; }
.story-head.with-hero { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); }
.head-copy { display: grid; gap: 16px; align-content: center; min-width: 0; }
.story-head h1 { font-size: clamp(36px, 6vw, 68px); line-height: .98; max-width: 14ch; }
.story-head .lede { font-size: clamp(17px, 1.8vw, 20px); max-width: 60ch; }
.chapter { display: grid; gap: 22px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: center; }
.chapter h2 { font-size: clamp(26px, 3.4vw, 40px); max-width: 22ch; }
.copy { display: grid; gap: 14px; align-content: start; min-width: 0; }
.copy p { color: var(--soft); }
.note { color: var(--dim); font-size: 14.5px; }

/* Photos and videos */
.media { margin: 0; display: grid; gap: 8px; align-content: start; min-width: 0; }
.media video, .media img { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; background: var(--bar); }
.media.portrait { justify-items: center; }
/* --ar is the item's aspect (set inline), so a tall item shrinks whole on narrow screens instead of being cropped */
.media.portrait video, .media.portrait img { width: min(100%, calc(min(620px, 74vh) * (var(--ar)))); height: auto; }
.media.portrait figcaption { align-self: start; justify-self: center; }
.media figcaption, .model figcaption, .tree figcaption { font: 12.5px var(--f-mono); color: var(--dim); }
.media.inset { max-width: 640px; }
.media.hero video, .media.hero img { box-shadow: 0 24px 60px rgba(0, 0, 0, .5); border: 1px solid var(--line); }
.gallery { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.gallery .media.portrait video, .gallery .media.portrait img { width: 100%; height: auto; }
.slot-box {
  aspect-ratio: 16 / 9; max-width: 100%;
  display: grid; place-content: center; gap: 8px; padding: 20px; text-align: center;
  border: 1.5px dashed color-mix(in oklab, var(--accent), transparent 55%); border-radius: 8px;
  background: repeating-linear-gradient(135deg, transparent 0 12px, color-mix(in oklab, var(--accent), transparent 95%) 12px 24px);
}
.slot-box .label { color: var(--accent); }
.slot-box p { color: var(--soft); font-size: 14.5px; max-width: 44ch; margin: 0 auto; }

/* Steps, and the soul loop */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 14px; counter-reset: step; }
.steps li { position: relative; display: grid; gap: 8px; align-content: start; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in oklab, var(--win), white 3%); counter-increment: step; }
.steps li b { font: 600 13px var(--f-mono); color: var(--accent); letter-spacing: .04em; text-transform: uppercase; }
.steps li b::before { content: counter(step) " \00b7  "; color: var(--dim); }
.steps li p { font-size: 14.5px; color: var(--soft); }
.steps li:not(:last-child)::after { content: "\2192"; position: absolute; right: -12px; top: 50%; translate: 0 -50%; z-index: 1; padding: 2px 0; background: var(--win); color: var(--accent); font: 14px/1 var(--f-mono); }
.loop-note { display: flex; gap: 12px; align-items: baseline; max-width: none; padding: 14px 16px; border: 1px dashed color-mix(in oklab, var(--accent), transparent 50%); border-radius: 10px; color: var(--text); font-size: 15px; }
.loop-note span { color: var(--accent); font: 20px/1 var(--f-mono); }

/* Memory */
.memory { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tier { display: grid; gap: 8px; align-content: start; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in oklab, var(--win), white 3%); }
.tier b { font: 600 13px var(--f-mono); color: var(--accent); letter-spacing: .04em; text-transform: uppercase; }
.tier p { font-size: 14.5px; color: var(--soft); }
.tree { margin: 0; display: grid; gap: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--desk); }
.tree ul { list-style: none; margin: 0; padding: 14px 16px 16px; display: grid; gap: 6px; font: 13px/1.5 var(--f-mono); }
.tree li { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 12px; padding-left: calc(var(--depth, 0) * 18px); }
.tree code { font: inherit; color: var(--text); }
.tree li span { color: var(--dim); }
.tree figcaption { padding: 12px 16px 14px; border-top: 1px solid var(--line); }

/* Experiments */
.ideas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.idea { display: grid; gap: 8px; align-content: start; padding: 18px; border-top: 2px solid var(--accent); background: color-mix(in oklab, var(--win), white 3%); border-radius: 0 0 10px 10px; }
.idea p { font-size: 14.5px; color: var(--soft); }

/* Measured results */
.numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; }
.num { display: grid; gap: 6px; align-content: start; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in oklab, var(--win), white 3%); }
.num b { font: 900 clamp(26px, 3.2vw, 36px)/1.05 var(--f-sans); color: var(--accent); letter-spacing: -.02em; }
.num span { font-size: 14.5px; color: var(--soft); }

/* 3D model */
.model { margin: 0; display: grid; gap: 8px; min-width: 0; }
.stage {
  position: relative; aspect-ratio: 4 / 3; max-width: 100%; overflow: hidden;
  border: 1px solid var(--line); border-radius: 10px; cursor: grab; touch-action: pan-y;
  background: radial-gradient(circle at 50% 40%, color-mix(in oklab, var(--win), white 7%), var(--desk) 75%);
}
.stage:active { cursor: grabbing; }
.stage canvas { display: block; width: 100%; height: 100%; }
.model-hint { position: absolute; left: 12px; bottom: 10px; font: 12px var(--f-mono); color: var(--dim); pointer-events: none; transition: opacity .4s; }

.next { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 64ch; }
.next li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; color: var(--soft); }
.next li::before { content: "\25CB"; color: var(--accent); font-family: var(--f-mono); }
.specs dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 24px; padding-top: 16px; border-top: 1px solid var(--line); font: 13.5px var(--f-mono); }
.specs dt { color: var(--dim); }
.specs dd { margin: 0; }
.specs dl + .label { margin-top: 14px; }

footer { grid-column: 1 / -1; font: 12px var(--f-mono); color: var(--dim); display: flex; flex-wrap: wrap; gap: 8px 18px; }
footer a { color: var(--dim); }

/* Text Tom form */
.contact { position: relative; display: grid; gap: 14px; max-width: 640px; }
.contact label { display: grid; gap: 6px; font: 13px var(--f-mono); color: var(--soft); }
.contact label em { font-style: normal; color: var(--dim); }
.contact input, .contact textarea { width: 100%; font: 16px/1.5 var(--f-sans); color: var(--text); background: var(--desk); border: 1px solid var(--line); border-radius: 7px; padding: 10px 12px; }
.contact textarea { resize: vertical; min-height: 130px; }
.contact input:focus, .contact textarea:focus { outline: none; border-color: var(--accent); }
.contact input::placeholder { color: var(--dim); }
.contact .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact .trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact .btn { border: 0; cursor: pointer; }
.contact .btn[disabled] { opacity: .6; cursor: wait; }
.form-status { min-height: 1.5em; margin: 0; font: 13px var(--f-mono); color: var(--soft); }
.form-status.warn { color: var(--accent); }
.post .soon { font: 13px var(--f-mono); color: var(--dim); }
.sent { color: var(--accent); }

@media (max-width: 820px) {
  .desk { grid-template-columns: minmax(0, 1fr); padding-top: 20px; }
  .prow { grid-template-columns: 40px minmax(0, 1fr); }
  .prow .chip { grid-column: 2; justify-self: start; }
  .split, .story-head.with-hero, .memory { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps li::after { display: none; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery .media:first-child { grid-column: 1 / -1; }
  .media.portrait video, .media.portrait img { width: min(100%, calc(min(560px, 70vh) * (var(--ar)))); }
}
@media (max-width: 480px) {
  .say-hi { order: 1; }
  .intro.with-feature { grid-template-columns: minmax(0, 1fr) 132px; grid-template-areas: "head feature" "lede lede"; grid-template-rows: auto auto; column-gap: 16px; }
  .intro.with-feature .intro-head { align-self: end; }
  .menubar nav { order: 2; flex-basis: 100%; }
  .contact .row { grid-template-columns: 1fr; }
  .steps, .tiers { grid-template-columns: minmax(0, 1fr); }
  .specs dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .specs dd { margin-bottom: 10px; }
  .slot-box { aspect-ratio: auto; min-height: 180px; }
}
@media (prefers-reduced-motion: reduce) {
  .dot { animation: none; }
  .app .tile { transition: none; }
}