/* GULPY. Locked dark single theme (brand exception: a pond at night). Radius 0 everywhere. */
@font-face { font-family: "Pixelify Sans"; src: url(/fonts/pixelify-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "VT323"; src: url(/fonts/vt323.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url(/fonts/atkinson-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url(/fonts/atkinson-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(/fonts/plexmono-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }

:root {
  color-scheme: dark;
  --ink: #071A1C; --surface: #0B2224; --chipfill: #10292B; --line: #1E3A3C; --shadow: #021012;
  --text: #E8F1EE; --dim: #7FA3A6; --lime: #C8F25A; --dot: #0D2A2D;
  --gut: 16px; --navh: 56px;
  --f-pix: "Pixelify Sans", ui-monospace, monospace;
  --f-vt: "VT323", ui-monospace, monospace;
  --f-body: "Atkinson Hyperlegible", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;
}
@media (min-width: 768px) { :root { --gut: 24px; } }
:root { --edge: max(var(--gut), calc((100vw - 1200px) / 2 + var(--gut))); }
@media (min-width: 1024px) { :root { --gut: 40px; } }

*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--navh) + 8px); }
body { margin: 0; background: var(--ink); color: var(--text); font: 400 16px/1.55 var(--f-body); overflow-x: hidden; }
img, canvas { display: block; }
.px, canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
a { color: var(--text); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--lime); }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
h1, h2, h3 { margin: 0; font-weight: 600; }
p { margin: 0; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--gut); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 30; background: var(--text); color: var(--ink); padding: 8px 12px; font-weight: 700; }
.skip:focus { top: 8px; }
.lbl { font: 500 11px/1.2 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.panel { background: var(--surface); border: 1px solid var(--line); box-shadow: 4px 4px 0 var(--shadow); }

/* buttons: press = translate 2px, shadow shrinks, steps(1) */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; font: 500 13px/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; text-decoration: none; white-space: nowrap; border: 2px solid var(--text); box-shadow: 4px 4px 0 var(--shadow); transition: transform 60ms steps(1), box-shadow 60ms steps(1); }
.btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--shadow); }
.btn-out { background: var(--ink); color: var(--text); }
.btn-out:hover { background: var(--chipfill); color: var(--text); }
.btn-lime { background: var(--lime); color: var(--ink); border-color: var(--lime); font-weight: 500; }
.btn-lime:hover { background: #d6f77c; color: var(--ink); }

/* nav */
.nav { position: sticky; top: 0; z-index: 20; height: var(--navh); background: var(--ink); border-bottom: 1px solid var(--line); }
.nav-in { height: 100%; display: flex; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 600 22px/1 var(--f-pix); letter-spacing: -0.02em; color: var(--lime); }
.brand:hover { color: var(--lime); }
.nav-links { display: flex; gap: 22px; margin-left: auto; }
.nav-links a { font: 500 12px/1 var(--f-mono); letter-spacing: 0.08em; text-decoration: none; color: var(--text); padding: 12px 0; }
.nav-links a:hover { color: var(--lime); }
.slot { font: 400 20px/1 var(--f-vt); color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.menu-btn { display: none; min-height: 36px; padding: 0 12px; box-shadow: 2px 2px 0 var(--shadow); }
@media (max-width: 767px) {
  .nav-in { gap: 12px; }
  .slot { margin-left: auto; font-size: 18px; }
  .menu-btn { display: inline-flex; }
  .nav-links { display: none; position: absolute; left: 0; right: 0; top: var(--navh); flex-direction: column; gap: 0; background: var(--ink); border-bottom: 1px solid var(--line); padding: 8px var(--gut) 16px; margin: 0; }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 14px 0; font-size: 14px; border-bottom: 1px solid var(--line); }
}

/* hero = the product */
.hero { position: relative; min-height: clamp(560px, calc(100dvh - var(--navh) - 72px), 780px); overflow: hidden; background: var(--ink); isolation: isolate; }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(ellipse 75% 70% at 40% 50%, transparent 55%, rgba(2, 16, 18, 0.75) 100%); }
#pond { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero-id { position: absolute; z-index: 2; left: var(--edge); top: 28px; max-width: 360px; pointer-events: none; }
.wordmark { font: 600 clamp(48px, 7vw, 96px)/0.9 var(--f-pix); letter-spacing: -0.02em; color: var(--lime); }
.sub { margin-top: 12px; font-size: 17px; line-height: 1.45; color: var(--text); max-width: 32ch; }
.hud { position: absolute; z-index: 2; right: var(--edge); top: 28px; width: min(470px, 40vw); padding: 18px 20px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.hud, .feedhim, .still { background: var(--surface); border: 1px solid var(--line); box-shadow: 4px 4px 0 var(--shadow); }
.hud-stomach { grid-column: 1 / -1; position: relative; display: flex; flex-direction: column; min-width: 0; }
.big { font: 400 clamp(64px, 11vw, 168px)/0.82 var(--f-vt); color: var(--lime); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; display: block; min-height: 0.82em; white-space: nowrap; overflow: hidden; }
.hud .big { font-size: clamp(64px, 8.6vw, 128px); }
.big .dg { display: inline-block; height: 0.82em; overflow: hidden; vertical-align: top; }
.big .dg > span { display: block; transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1); }
.big .dg > span > span { display: block; height: 0.82em; }
.hatch { margin-top: 6px; font: 500 11px/1.3 var(--f-mono); letter-spacing: 0.08em; color: var(--dim); }
.offscreen { position: absolute; right: 0; top: 0; font: 400 22px/1 var(--f-vt); color: var(--dim); opacity: 0; transition: opacity 300ms; }
.offscreen.on { opacity: 1; }
.hud-cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mid { font: 400 40px/0.9 var(--f-vt); color: var(--text); font-variant-numeric: tabular-nums; }
.moodrow { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.ticks { display: inline-flex; gap: 2px; align-items: center; height: 22px; }
.ticks i { display: block; width: 3px; height: 14px; background: var(--line); }
.ticks i[data-i="0"] { height: 22px; background: var(--dim); }
.ticks i.pos { background: var(--lime); }
.ticks i.neg { background: rgba(232, 241, 238, 0.7); }
.moodval { font: 400 26px/1 var(--f-vt); color: var(--text); font-variant-numeric: tabular-nums; }
.state { font: 600 20px/1.1 var(--f-pix); color: var(--text); padding-top: 6px; }
.hud.is-paused .state { color: var(--dim); }

.feedhim { position: absolute; z-index: 2; left: var(--edge); bottom: 28px; width: min(400px, calc(100% - 2 * var(--gut))); padding: 14px 16px 12px; }
.feedhim label, .chat-form label { display: block; font-size: 14px; margin-bottom: 8px; color: var(--text); }
.fh-row, .chat-row { display: flex; gap: 10px; }
input[type="text"] { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; background: #0B2224; color: var(--text); border: 2px solid var(--text); font: 500 15px/1 var(--f-mono); letter-spacing: 0.04em; }
input[type="text"]::placeholder { color: var(--dim); opacity: 1; }
input[type="text"]:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.fh-msg { min-height: 1.5em; margin-top: 8px; font-size: 14px; color: var(--text); }

.still { position: absolute; z-index: 2; left: var(--edge); top: 200px; padding: 16px; display: flex; gap: 20px; align-items: center; max-width: calc(100% - 2 * var(--gut)); }
.still[hidden] { display: none; }
.still-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 56px); grid-auto-rows: 66px; gap: 8px; }
.still-grid li { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.still-grid .tk { font: 500 10px/1.2 var(--f-mono); color: var(--text); background: var(--shadow); padding: 1px 3px; max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.chip { width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--text); background: var(--chipfill); overflow: hidden; }
.chip img { width: 100%; height: 100%; object-fit: cover; }
.chip-fb { font: 400 20px/1 var(--f-vt); color: var(--text); }

/* responsive hero */
@media (max-width: 1023px) {
  .hud { width: 240px; grid-template-columns: 1fr; gap: 12px; padding: 14px 16px; }
  .hud .big { font-size: 72px; }
}
@media (max-width: 767px) {
  .hero { display: flex; flex-direction: column; min-height: 0; overflow: visible; }
  .hero::after { display: none; }
  .hero-id { position: static; order: 1; padding: 16px var(--gut) 0; max-width: none; pointer-events: auto; }
  .wordmark { font-size: 40px; }
  .hero-id .wordmark { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sub { margin-top: 0; font-size: 15px; }
  .hud { position: static; order: 2; width: auto; margin: 12px var(--gut) 0; grid-template-columns: 1fr 1fr; gap: 10px 12px; padding: 12px; }
  .hud .big { font-size: 64px; }
  .hud-cell:nth-child(4) { grid-column: 1 / -1; }
  .ticks { gap: 1px; }
  #pond { position: relative; order: 3; height: 62dvh; min-height: 320px; margin-top: 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .still { position: static; order: 3; margin: 12px var(--gut) 0; flex-direction: column; align-items: flex-start; }
  .still-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 64px; width: 100%; }
  .feedhim { position: static; order: 4; width: auto; margin: 12px var(--gut) 0; }
}

/* sections */
.sec { padding: 88px 0; border-top: 1px solid var(--line); }
.sec h2 { font: 600 32px/1.1 var(--f-pix); letter-spacing: -0.01em; color: var(--text); }
@media (max-width: 767px) { .sec { padding: 56px 0; } .sec h2 { font-size: 28px; } }

/* diary: full-width feed column with a time rail */
.diary-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.diary-box { height: 560px; overflow-y: auto; overscroll-behavior: contain; padding: 18px 0; }
@media (max-width: 767px) { .diary-box { height: 420px; } }
.diary-list { list-style: none; margin: 0; padding: 0 18px; display: flex; flex-direction: column; gap: 12px; position: relative; }
.diary-list::before { content: ""; position: absolute; left: 31px; top: 0; bottom: 0; width: 1px; background: var(--line); }
.drow { display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start; position: relative; }
.drow .chip { width: 28px; height: 28px; border-width: 2px; }
.drow .chip-fb { font-size: 14px; }
.drow-body { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; min-width: 0; }
.drow-text { font-size: 16px; color: var(--text); overflow-wrap: anywhere; flex: 1 1 320px; }
.tag { font: 500 11px/1 var(--f-mono); letter-spacing: 0.04em; background: var(--shadow); color: var(--text); padding: 3px 5px; margin-right: 6px; vertical-align: 2px; }
.drow time { font: 500 12px/1.4 var(--f-mono); color: var(--dim); white-space: nowrap; }
.drow.enter { animation: drop 180ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes drop { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } }
.empty { padding: 32px 18px; color: var(--dim); }
.older { margin: 18px 18px 0; }

/* talk */
.talk-wrap { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 1024px) { .talk-wrap { grid-template-columns: 300px 1fr; gap: 56px; align-items: start; } }
.portrait { display: none; padding: 32px; justify-content: center; }
@media (min-width: 1024px) { .portrait { display: flex; position: sticky; top: calc(var(--navh) + 24px); } }
.portrait canvas { width: 168px; height: 144px; }
.chat h2 { margin-bottom: 20px; }
.chat-log { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; max-width: 720px; }
.chat-log li { padding: 10px 14px; max-width: 85%; border: 1px solid var(--line); overflow-wrap: anywhere; }
.chat-log .me { align-self: flex-end; background: var(--ink); color: var(--dim); }
.chat-log .him { align-self: flex-start; background: var(--surface); box-shadow: 4px 4px 0 var(--shadow); }
.chat-log .him b { font: 600 13px/1 var(--f-pix); color: var(--lime); display: block; margin-bottom: 4px; }
.chew { display: flex; align-items: center; gap: 10px; color: var(--dim); margin-bottom: 14px; font-size: 14px; }
.chew[hidden] { display: none; }
.chew canvas { width: 56px; height: 48px; }
.chat-form { max-width: 720px; }
.chat-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font: 500 12px/1.4 var(--f-mono); color: var(--dim); }
.note { margin-top: 14px; font-size: 14px; color: var(--dim); max-width: 60ch; }

/* vitals */
#vitals h2 { margin-bottom: 24px; }
.chart { padding: 18px 18px 14px; }
.chart-top { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; margin-bottom: 10px; font: 500 12px/1.3 var(--f-mono); color: var(--dim); }
.legend { display: inline-flex; align-items: center; gap: 8px; }
.lg-line { width: 18px; height: 2px; background: var(--text); }
.lg-bar { width: 6px; height: 12px; background: rgba(200, 242, 90, 0.5); }
.since { margin-left: auto; }
.chart-cv { position: relative; height: 300px; }
@media (max-width: 767px) { .chart-cv { height: 220px; } }
#chart { width: 100%; height: 100%; cursor: crosshair; }
.tip { position: absolute; top: 6px; pointer-events: none; background: var(--shadow); border: 1px solid var(--line); padding: 6px 8px; font: 500 12px/1.3 var(--f-mono); color: var(--text); white-space: nowrap; }
.tbl { margin-top: 14px; }
.tbl summary { cursor: pointer; font: 500 12px/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); padding: 12px 0; min-height: 44px; display: flex; align-items: center; }
.tbl-scroll { overflow-x: auto; }
.tbl table { border-collapse: collapse; font: 500 13px/1.4 var(--f-mono); min-width: 320px; }
.tbl th, .tbl td { text-align: left; padding: 4px 24px 4px 0; }
.tbl th { color: var(--dim); font-weight: 500; }
.formula { margin-top: 24px; display: grid; gap: 8px; font: 500 13px/1.5 var(--f-mono); color: var(--text); overflow-wrap: anywhere; }
.formula code { font: inherit; }
.formula p:last-child { color: var(--dim); }

/* how */
#how h2 { margin-bottom: 20px; }
.how { max-width: 65ch; font-size: 18px; line-height: 1.6; }
.sprites { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.sprites li { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--dim); font-size: 14px; }
.spr { background: none; border: 1px solid var(--line); padding: 12px; cursor: default; width: 100%; display: flex; justify-content: center; }
.spr:hover, .spr:focus-visible { border-color: var(--text); }
.spr canvas { width: 112px; height: 96px; max-width: 100%; height: auto; aspect-ratio: 112 / 96; }
@media (max-width: 767px) { .sprites { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* $GULPY: the only centered block */
.tok { max-width: 640px; margin: 0 auto; padding: 40px 28px; text-align: center; }
.tok-h { font: 600 40px/1 var(--f-pix) !important; margin-bottom: 24px; color: var(--text); }
.ca { display: flex; align-items: stretch; justify-content: center; max-width: 100%; border: 1px solid var(--line); background: var(--ink); }
.ca-lbl { display: flex; align-items: center; padding: 0 12px; background: var(--lime); color: var(--ink); font: 500 13px/1 var(--f-mono); letter-spacing: 0.08em; }
.ca-addr { flex: 1; min-width: 0; display: flex; align-items: center; padding: 0 12px; font: 500 13px/1.3 var(--f-mono); color: var(--text); white-space: nowrap; overflow: hidden; }
.ca-copy { border-width: 0 0 0 1px; border-color: var(--line); box-shadow: none; min-width: 92px; }
.ca-copy:active { box-shadow: none; }
.tok-links { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 24px; }
.tok-links a { display: inline-flex; min-height: 44px; align-items: center; font-weight: 700; }
.tok-soon { margin-top: 20px; color: var(--text); }
.tok-note { margin-top: 20px; color: var(--dim); font-size: 15px; }
.tok-title { font: 600 24px/1.2 var(--f-pix); color: var(--text); }

/* footer */
.foot { background: var(--shadow); border-top: 1px solid var(--line); padding: 48px 0 56px; }
.foot-in { display: grid; gap: 20px; }
.honest { max-width: 62ch; font-size: 16px; }
.foot-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font: 500 13px/1 var(--f-mono); }
.foot-links a { display: inline-flex; min-height: 32px; align-items: center; }
.toggles { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; font-size: 15px; color: var(--text); }
.tg { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.tg input { width: 20px; height: 20px; accent-color: var(--text); margin: 0; }
.feedstate { font: 500 13px/1 var(--f-mono); color: var(--dim); }

/* brand + 404 */
.brand-main { padding-top: 48px; padding-bottom: 80px; display: grid; gap: 48px; }
.brand-main h2 { font: 600 24px/1.2 var(--f-pix); margin-bottom: 16px; }
.brand-main h3 { font: 600 18px/1.2 var(--f-pix); margin-bottom: 8px; }
.b-marks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.b-marks figure { margin: 0; padding: 20px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.b-marks img { max-width: 100%; height: auto; }
.lockup { display: flex; align-items: center; gap: 12px; }
.wm-sm { font-size: 44px; }
.favs { display: flex; gap: 16px; align-items: flex-end; }
figcaption { color: var(--dim); font-size: 14px; }
.swatches { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.swatches li { display: grid; grid-template-columns: 40px 1fr; gap: 2px 12px; align-items: center; font-size: 14px; }
.swatches .sw { grid-row: span 3; width: 40px; height: 56px; border: 1px solid var(--line); }
.swatches .dim { color: var(--dim); font-size: 13px; }
.sw-071A1C { background: #071A1C; } .sw-0B2224 { background: #0B2224; } .sw-10292B { background: #10292B; } .sw-1E3A3C { background: #1E3A3C; }
.sw-021012 { background: #021012; } .sw-E8F1EE { background: #E8F1EE; } .sw-7FA3A6 { background: #7FA3A6; } .sw-C8F25A { background: #C8F25A; }
.specimens { display: grid; gap: 12px; }
.sp-pix { font: 600 32px/1.2 var(--f-pix); color: var(--lime); }
.sp-vt { font: 400 40px/1 var(--f-vt); }
.sp-atk { font-size: 18px; }
.sprites.big { grid-template-columns: 1fr; gap: 18px; margin-top: 0; }
.sprites.big li { flex-direction: row; justify-content: flex-start; gap: 16px; }
.sheet { display: block; max-width: 100%; overflow-x: auto; border: 1px solid var(--line); }
.sheet canvas { width: 448px; height: 96px; }
.rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.rules .panel { padding: 20px; }
.rules ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.nf-main { min-height: calc(100dvh - var(--navh)); display: flex; flex-direction: column; justify-content: center; gap: 18px; padding-top: 40px; padding-bottom: 40px; }
.nf-main canvas { width: 168px; height: 144px; }

@media (prefers-reduced-motion: reduce) {
  .big .dg > span, .offscreen { transition: none; }
  .drow.enter { animation: none; }
  html { scroll-behavior: auto; }
}

/* audit: comfortable tap targets for small text links (44px rows) */
.brand { display: inline-flex; align-items: center; min-height: 44px; }
.formula a { display: inline-block; padding: 12px 0; margin: -12px 0; }
.foot-links a { min-height: 44px; }