/* carlomigueldy.dev — ink, hatch and paper. */

/* Fonts are self-hosted (SIL Open Font License 1.1; licences in fonts/OFL-*.txt):
   Archivo (variable width and weight), Archivo Black, Martian Mono (variable weight). */
@font-face { font-family: 'Archivo'; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%; src: url(fonts/archivo-var.woff2) format('woff2-variations'), url(fonts/archivo-var.woff2) format('woff2'); }
@font-face { font-family: 'Archivo Black'; font-style: normal; font-display: swap; font-weight: 400; src: url(fonts/archivo-black.woff2) format('woff2'); }
@font-face { font-family: 'Martian Mono'; font-style: normal; font-display: swap; font-weight: 100 800; src: url(fonts/martian-mono-var.woff2) format('woff2-variations'), url(fonts/martian-mono-var.woff2) format('woff2'); }


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

.r {
  --paper: #F0F1F5;
  --ink: #0D1015;
  --mute: #555B66;
  --hlb: rgba(13, 16, 21, .14);
  --hatch: repeating-linear-gradient(45deg, var(--ink) 0 2px, transparent 2px 7px);
  position: relative;
  height: 100vh;
  height: 100dvh;
  min-height: 640px;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Martian Mono', ui-monospace, monospace;
  --brut: 'Archivo', 'Archivo Black', system-ui, sans-serif;
  cursor: url(assets/cursor-default.svg) 3 2, auto;
}
.r.dark {
  --paper: #0D1015;
  --ink: #F0F1F5;
  --mute: #9AA0AA;
  --hlb: rgba(240, 241, 245, .22);
}
body:has(.r.dark) { background: #0D1015; }
.r.dark .inv { filter: invert(1); }
.r a, .r button { cursor: url(assets/cursor-link.svg) 15 15, pointer; }
.r :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
a { color: var(--ink); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- the rain ---------- */
.rain {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
}
.r.dark .rain { filter: invert(1); }
.storm .rain { filter: contrast(1.4); }
.r.dark.storm .rain { filter: invert(1) contrast(1.4); }

/* ---------- the art ---------- */
.stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.hwrap { position: relative; width: min(1180px, 90vw); margin-top: -4vh; }
.hero { position: relative; width: 100%; aspect-ratio: 2.96 / 1; overflow: hidden; animation: inkin 1.2s steps(14) .15s both; }
.hero img { position: absolute; left: 0; top: -33.4%; width: 100%; height: auto; display: block; }
.hero .base { animation: drift 7s ease-in-out 1.4s infinite; }
/* The slice copy stays clipped to nothing until its glitch keyframes run. */
.hero .slice { clip-path: inset(100% 0 0 0); animation: slice 6.5s steps(1) 2s infinite both; }
/* The @carlomigueldy wordmark only opens the show: it inks in behind the portrait,
   then glitch-steps out to the right once Carlo starts waking up (.wm-out, set by app.js). */
.hero .wm { animation: drift 7s ease-in-out 1.4s infinite; }
.wm-out .hero .wm { animation: wmout 1.15s steps(1) forwards; }
@keyframes wmout {
  0%   { clip-path: inset(0 0 0 0); transform: none; opacity: 1; }
  8%   { clip-path: inset(28% 0 42% 0); transform: translateX(16px) skewX(-6deg); }
  14%  { clip-path: inset(0 0 0 0); transform: translateX(-10px); }
  22%  { clip-path: inset(46% 0 18% 0); transform: translateX(24px) skewX(-10deg); }
  30%  { clip-path: inset(0 0 0 0); transform: none; }
  40%  { clip-path: inset(0 0 0 12%); transform: translateX(30px) skewX(-12deg); }
  55%  { clip-path: inset(0 0 0 38%); transform: translateX(70px) skewX(-16deg); }
  70%  { clip-path: inset(0 0 0 64%); transform: translateX(120px) skewX(-20deg); opacity: .8; }
  85%  { clip-path: inset(0 0 0 88%); transform: translateX(170px) skewX(-24deg); opacity: .5; }
  100% { clip-path: inset(0 0 0 100%); transform: translateX(200px) skewX(-26deg); opacity: 0; visibility: hidden; }
}
.storm .hero .slice { animation-duration: .45s; }
@keyframes inkin { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes slice {
  0%, 86%, 100% { clip-path: inset(100% 0 0 0); transform: translateX(0); }
  87% { clip-path: inset(45.5% 0 51.5% 0); transform: translateX(26px); }
  89% { clip-path: inset(31% 0 64% 0); transform: translateX(-18px); }
  91% { clip-path: inset(58% 0 37% 0); transform: translateX(12px); }
  93% { clip-path: inset(46% 0 50% 0); transform: translateX(30px); }
  95% { clip-path: inset(46% 0 50% 0); transform: translateX(0); }
}

/* ---------- the note (annotation, streaming) ---------- */
.bubw { position: absolute; left: 62%; bottom: 86%; z-index: 6; width: max-content; max-width: min(520px, calc(39vw - 24px)); pointer-events: auto; }
.you { font: 600 10px/1 var(--brut); font-stretch: 125%; text-transform: uppercase; color: var(--mute); letter-spacing: .06em; margin-bottom: 8px; }
.lbl { font: 700 10px/1 var(--brut); font-stretch: 125%; letter-spacing: .1em; color: var(--mute); margin: 0 0 10px; display: flex; gap: 8px; align-items: center; text-transform: uppercase; opacity: 0; transition: opacity .3s; }
.lbl b { font-weight: 700; color: var(--ink); }
.txt { font: 600 15px/2.05 var(--brut); font-stretch: 125%; letter-spacing: -.005em; color: var(--ink); white-space: pre-wrap; opacity: 0; transition: opacity .25s ease .1s; }
.bubw.open .lbl, .bubw.open .txt { opacity: 1; }
.bubw.gl .txt { animation: bshake .11s steps(2) infinite; }
@keyframes bshake { 0% { transform: translate(3px, -1px); } 50% { transform: translate(-4px, 2px); } }
.hl { background: var(--paper); box-shadow: 0 0 0 1px var(--hlb); border-radius: 3px; padding: 3px 7px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hl[hidden] { display: none; }
.tk { animation: tkin .18s ease-out both; }
@keyframes tkin { from { opacity: 0; filter: blur(3px); } to { opacity: 1; filter: none; } }
.caret { display: inline-block; width: .6em; height: 2px; background: var(--ink); vertical-align: -.05em; margin-left: 3px; animation: cblink 1s steps(2) infinite; }
.nocaret .caret { display: none; }
@keyframes cblink { 50% { opacity: 0; } }
.dots { display: inline-flex; gap: 6px; vertical-align: middle; }
.dots i { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); animation: dotp 1.2s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: .15s; }
.dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dotp { 0%, 60%, 100% { opacity: .2; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.lead { position: absolute; left: -100px; top: calc(100% - 8px); width: 120px; height: 76px; overflow: visible; }
.lead path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 160; stroke-dashoffset: 160; transition: stroke-dashoffset .5s ease; }
.lead .halo { stroke: var(--paper); stroke-width: 7; }
.lead .ink { stroke: var(--ink); stroke-width: 2.5; }
.lead circle { fill: var(--paper); stroke: var(--ink); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .25s cubic-bezier(.34, 1.56, .64, 1) .35s; }
.bubw.open .lead path { stroke-dashoffset: 0; }
.bubw.open .lead circle { transform: scale(1); }
.lk { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.lk[hidden] { display: none; }
.lkb { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; box-sizing: border-box; padding: 7px 12px; border: 1px solid var(--ink); border-radius: 999px; background: var(--paper); color: var(--ink); text-decoration: none; font: 700 12px/1 var(--brut); font-stretch: 125%; animation: topen .3s cubic-bezier(.34, 1.56, .64, 1) both; }
.ico { width: 1.05em; height: 1.05em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.arst { display: inline-flex; align-items: center; gap: 5px; }
.skip kbd { font: 500 10px/1 'Martian Mono', ui-monospace, monospace; padding: 2px 5px; margin-left: 4px; border: 1px solid var(--hlb); border-radius: 4px; }
.lkb:hover { background: var(--ink); color: var(--paper); }

/* ---------- terminals ---------- */
.terms { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.term { position: absolute; width: min(380px, 40vw); background: var(--paper); border: 2px solid var(--ink); border-radius: 10px; box-shadow: 6px 6px 0 0 var(--hlb); overflow: hidden; font: 400 12px/1.55 'Martian Mono', ui-monospace, monospace; color: var(--ink); animation: topen .28s cubic-bezier(.34, 1.56, .64, 1) both; }
.term.bg { width: min(350px, 36vw); }
@keyframes topen { from { transform: scale(.86) translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.term.blocked { animation: tshake .09s steps(2) 6; }
@keyframes tshake { 0% { transform: translate(4px, 0); } 50% { transform: translate(-4px, 1px); } }
.term.closing { animation: tclose .36s steps(4) both; }
@keyframes tclose { to { transform: scale(.92); opacity: 0; clip-path: inset(46% 0 46% 0); } }
.tbar { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-bottom: 1.5px solid var(--ink); font-size: 10.5px; letter-spacing: .03em; }
.tdots { display: flex; gap: 5px; }
.tdots i { width: 9px; height: 9px; border: 1.5px solid var(--ink); border-radius: 50%; box-sizing: border-box; }
.ttl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.ttag { color: var(--mute); white-space: nowrap; }
.tbody { padding: 9px 12px 11px; min-height: 56px; }
.tl { white-space: pre-wrap; word-break: break-word; }
.tl.cmd { font-weight: 700; }
.tl.err { background: repeating-linear-gradient(45deg, var(--hlb) 0 2px, transparent 2px 6px); }
.tl.dim { color: var(--mute); }
.tcar { display: inline-block; width: .55em; height: 1em; background: var(--ink); vertical-align: -.15em; margin-left: 1px; animation: cblink 1s steps(2) infinite; }
.stamp { position: absolute; right: 12px; bottom: 10px; padding: 6px 10px; background: var(--ink); color: var(--paper); font: 700 10.5px/1 'Martian Mono', ui-monospace, monospace; letter-spacing: .1em; animation: stampin .22s steps(3) both; }
@keyframes stampin { from { transform: scale(1.9); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- guardrails ---------- */
.guard { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); z-index: 7; display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--paper); font: 700 11px/1 'Martian Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.guard[hidden] { display: none; }
.gdot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); animation: cblink .5s steps(2) infinite; }
.guard.held .gdot { animation: none; }

/* ---------- subagents ---------- */
.agents { position: absolute; left: 40px; top: 92px; z-index: 5; width: 300px; box-sizing: border-box; background: var(--paper); border: 1.5px solid var(--ink); border-radius: 10px; padding: 12px 14px; font: 400 11px/1.4 'Martian Mono', ui-monospace, monospace; box-shadow: 6px 6px 0 0 var(--hlb); animation: topen .3s ease both; }
.agents[hidden] { display: none; }
.ahd { display: flex; justify-content: space-between; color: var(--mute); letter-spacing: .08em; text-transform: uppercase; font-size: 10px; margin-bottom: 10px; }
.arow + .arow { margin-top: 11px; }
.atop { display: flex; justify-content: space-between; gap: 8px; }
.atop span { color: var(--mute); }
.arow.done .atop span { color: var(--ink); font-weight: 700; }
.atask { color: var(--mute); margin: 2px 0 6px; }
.abar { height: 6px; border: 1px solid var(--ink); border-radius: 3px; overflow: hidden; }
.abar i { display: block; width: 0; height: 100%; background: repeating-linear-gradient(45deg, var(--ink) 0 2px, transparent 2px 5px); }

/* ---------- the question card ---------- */
.ask { position: absolute; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom)); z-index: 5; width: min(780px, 92vw); box-sizing: border-box; background: var(--paper); border: 1.5px solid var(--ink); border-radius: 12px; padding: 14px 16px 10px; box-shadow: 8px 8px 0 0 var(--hlb); transform: translateX(-50%); animation: askin .45s cubic-bezier(.34, 1.56, .64, 1) both; }
.ask[hidden] { display: none; }
@keyframes askin { from { opacity: 0; transform: translate(-50%, 18px); } to { opacity: 1; transform: translate(-50%, 0); } }
.aqh { display: flex; align-items: center; gap: 10px; font: 800 15px/1.3 var(--brut); font-stretch: 125%; letter-spacing: -.01em; margin-bottom: 12px; }
.aqi { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 12px; flex: none; }
.aopts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.aopts[hidden] { display: none; }
.aopt { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; text-align: left; min-height: 44px; padding: 10px 12px; border: 1px solid var(--hlb); border-radius: 8px; background: var(--paper); color: var(--ink); font: 500 11px/1.3 var(--brut); font-stretch: 112%; transition: border-color .15s, transform .15s; animation: topen .3s cubic-bezier(.34, 1.56, .64, 1) both; }
.aopt b { font: 800 13.5px/1.15 var(--brut); font-stretch: 125%; text-transform: uppercase; letter-spacing: .01em; }
.aopt span { color: var(--mute); }
.aopt:hover { border-color: var(--ink); transform: translateY(-2px); }
.aopt:active { transform: none; }
.afoot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; font: 500 10px/1 var(--brut); font-stretch: 112%; color: var(--mute); letter-spacing: .04em; }
.arst { border: 0; background: none; color: var(--mute); font: 700 10px/1 var(--brut); font-stretch: 112%; padding: 10px 0; text-decoration: underline; }
.arst:hover { color: var(--ink); }

/* ---------- top bar ---------- */
.ui { position: absolute; left: 0; right: 0; z-index: 8; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 0 max(40px, env(safe-area-inset-right)) 0 max(40px, env(safe-area-inset-left)); box-sizing: border-box; pointer-events: none; }
.ui.top { top: calc(22px + env(safe-area-inset-top)); animation: rise .9s cubic-bezier(.2, .8, .2, 1) .4s both; }
.ui a, .ui button { pointer-events: auto; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.name { display: inline-flex; flex-direction: column; gap: 5px; text-decoration: none; color: var(--ink); font: 400 22px/1 'Archivo Black', sans-serif; letter-spacing: -.01em; text-transform: uppercase; }
.name::after { content: ""; display: block; height: 7px; width: 34%; background-image: var(--hatch); box-shadow: inset 0 0 0 1.5px var(--ink); transition: width .35s cubic-bezier(.2, .8, .2, 1); }
.name:hover::after { width: 100%; }
.skip { border: 1px solid var(--hlb); border-radius: 999px; background: var(--paper); color: var(--mute); font: 500 11px/1 'Martian Mono', ui-monospace, monospace; padding: 9px 14px; min-height: 36px; }
.skip:hover { color: var(--ink); border-color: var(--ink); }
.skip[hidden] { display: none; }
/* The /about link is screen-reader text until it takes keyboard focus. */
.ui .tolink:focus { clip: auto; width: auto; height: auto; overflow: visible; left: max(40px, env(safe-area-inset-left)); top: 40px; padding: 7px 12px; border: 1px solid var(--ink); border-radius: 999px; background: var(--paper); color: var(--ink); font: 700 12px/1 var(--brut); font-stretch: 125%; text-decoration: none; }

.nojs { position: absolute; left: 0; right: 0; bottom: 32px; z-index: 9; padding: 0 24px; text-align: center; font-size: 13px; line-height: 1.7; }

/* ---------- the /about build (build.js) ---------- */
.bx { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; background: color-mix(in srgb, var(--paper) 72%, transparent); animation: bxfade .3s ease both; }
@keyframes bxfade { from { opacity: 0; } }
.bx.closing { animation: bxout .3s ease both; }
@keyframes bxout { to { opacity: 0; transform: scale(.98); } }
.bxp { position: relative; display: grid; grid-template-rows: auto auto minmax(0, 1fr); width: min(1180px, 100%); height: min(780px, 100%); background: var(--paper); border: 2px solid var(--ink); border-radius: 12px; box-shadow: 10px 10px 0 0 var(--hlb); overflow: hidden; font: 400 12px/1.5 'Martian Mono', ui-monospace, monospace; color: var(--ink); animation: topen .38s cubic-bezier(.34, 1.56, .64, 1) both; }
.bxh { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1.5px solid var(--ink); flex-wrap: wrap; }
.bxt { font: 800 14px/1 var(--brut); font-stretch: 125%; text-transform: uppercase; letter-spacing: .02em; }
.bxm { padding: 4px 8px; border: 1px solid var(--ink); border-radius: 999px; font-size: 10.5px; font-weight: 700; }
.bxcwd { color: var(--mute); font-size: 11px; }
.bxff { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.bxclk { font: 700 20px/1 'Martian Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.bx.ff .bxclk, .bx:not(.gated):not(.finished) .bxclk { animation: clkj .16s steps(2) infinite; }
@keyframes clkj { 50% { transform: translateX(1px); text-shadow: -2px 0 0 var(--hlb); } }
.bxrate { min-width: 13ch; color: var(--mute); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.bx:not(.gated):not(.finished) .bxrate { animation: cblink 1s steps(2) infinite; }
.bxchips { display: flex; gap: 6px; }
.bxchip { min-height: 30px; padding: 6px 10px; border: 1px solid var(--hlb); border-radius: 999px; background: var(--paper); color: var(--ink); font: 700 11px/1 'Martian Mono', ui-monospace, monospace; }
.bxchip:hover { border-color: var(--ink); }
.bxchip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.bxskip { border-color: var(--ink); }

.bxr { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 10px 14px 0; list-style: none; }
.bxr li { display: flex; align-items: center; gap: 8px; padding-top: 8px; border-top: 4px solid var(--hlb); color: var(--mute); font: 700 11.5px/1 var(--brut); font-stretch: 125%; text-transform: uppercase; letter-spacing: .03em; transition: color .2s; }
.bxn { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1.5px solid currentColor; border-radius: 50%; font: 700 10px/1 'Martian Mono', ui-monospace, monospace; flex: none; }
.bxr li.on { color: var(--ink); border-top-color: transparent; border-image: repeating-linear-gradient(45deg, var(--ink) 0 2px, transparent 2px 6px) 4; animation: railp 1s linear infinite; }
@keyframes railp { 50% { border-image-source: repeating-linear-gradient(-45deg, var(--ink) 0 2px, transparent 2px 6px); } }
.bxr li.done { color: var(--ink); border-top-color: var(--ink); }
.bxr li.done .bxn { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.bxg { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 14px; padding: 14px; min-height: 0; }
.bxo { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 12px 14px; border: 1.5px solid var(--ink); border-radius: 10px; overflow: hidden auto; scrollbar-width: thin; }
.bxlog { flex: 1 1 auto; min-height: 60px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.bxl { white-space: pre-wrap; word-break: break-word; animation: tkin .2s ease-out both; }
.bxl + .bxl { margin-top: 2px; }
.bxl.tool { font-weight: 700; }
.bxl.dim { color: var(--mute); }
.bxl.ok { font-weight: 700; }
.bxl.me { align-self: flex-start; margin: 4px 0; padding: 6px 10px; border-radius: 8px; background: var(--ink); color: var(--paper); font: 600 12px/1.45 var(--brut); font-stretch: 112%; }
.bxlbl { margin-bottom: 6px; color: var(--mute); font: 700 10px/1 'Martian Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; }
.bxprompt { flex: none; padding: 10px 12px 10px 16px; border: 1px solid var(--hlb); border-radius: 8px; background-image: linear-gradient(var(--paper), var(--paper)), var(--hatch); background-size: calc(100% - 6px) 100%, 6px 100%; background-position: right, left; background-repeat: no-repeat; animation: topen .3s ease both; }
.bxprompt[hidden], .bxplan[hidden], .bxok[hidden], .bxc[hidden], .bxpl li[hidden], .bxtoast[hidden], .bxdone[hidden] { display: none; }
.bxptxt { margin: 0; white-space: pre-wrap; font: 500 11.5px/1.6 'Martian Mono', ui-monospace, monospace; }
.bxplan { flex: none; padding: 10px 12px; border: 1.5px solid var(--ink); border-radius: 8px; animation: topen .3s cubic-bezier(.34, 1.56, .64, 1) both; }
.bxpl { margin: 0; padding: 0 0 0 20px; display: grid; gap: 5px; }
.bxpl li { animation: tkin .25s ease-out both; }
.bxpn { display: inline-flex; gap: 8px; align-items: baseline; margin-right: 8px; }
.bxpt { color: var(--mute); }
.bxplan.collapsed .bxpl { display: none; }
.bxmodel { padding: 2px 6px; border: 1px solid var(--hlb); border-radius: 999px; font-style: normal; font-size: 9.5px; font-weight: 700; color: var(--mute); white-space: nowrap; }
.bxok { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.bxhint { color: var(--mute); font-size: 11px; }
.bxbtn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 10px 18px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--paper); font: 800 13px/1 var(--brut); font-stretch: 125%; text-decoration: none; text-transform: uppercase; letter-spacing: .02em; }
.bxbtn:disabled { background: var(--paper); color: var(--ink); }
.gated .bxok .bxbtn { animation: okp 1.1s ease-in-out infinite; }
@keyframes okp { 0%, 100% { box-shadow: 0 0 0 0 var(--hlb); transform: none; } 50% { box-shadow: 0 0 0 7px var(--hlb); transform: translateY(-1px); } }
.bxghost { min-height: 40px; padding: 10px 16px; border: 1px solid var(--hlb); border-radius: 999px; background: var(--paper); color: var(--ink); font: 700 12px/1 var(--brut); font-stretch: 112%; }
.bxghost:hover { border-color: var(--ink); }

.bxside { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 14px; min-height: 0; }
.bxagg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bxc { position: relative; padding: 8px 10px 9px; border: 1px solid var(--hlb); border-radius: 8px; background: var(--paper); animation: topen .3s cubic-bezier(.34, 1.56, .64, 1) both; }
.bxc.run { border-color: var(--ink); }
.bxc.v { border-style: dashed; }
.bxc.v.run, .bxc.v.done { border-style: solid; }
.bxct { display: flex; justify-content: space-between; gap: 6px; align-items: center; min-width: 0; }
.bxct b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.bxcm { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 4px 0 6px; }
.bxcl { min-width: 0; color: var(--mute); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bxcl.tick { animation: tkin .2s ease-out both; }
.bxst { flex: none; padding: 2px 6px; border-radius: 4px; color: var(--mute); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.bxempty { padding: 12px; border: 1px dashed var(--hlb); border-radius: 8px; color: var(--mute); font-size: 11px; }
.bxempty[hidden] { display: none; }
.bxprompt.collapsed { max-height: 5.4em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.bxc .abar i { transition: width .12s linear; }
.bxc.run .abar i { background-size: 7px 7px; animation: hatchmv .5s linear infinite; }
@keyframes hatchmv { to { background-position: 7px 0; } }
.bxc.run .bxst { color: var(--ink); font-weight: 700; animation: cblink 1s steps(2) infinite; }
.bxc.done .bxst { background: var(--ink); color: var(--paper); font-weight: 700; animation: stampin .22s steps(3) both; }

.bxv { display: flex; flex-direction: column; min-height: 0; border: 1.5px solid var(--ink); border-radius: 10px; overflow: hidden; }
.bxvb { flex: none; display: flex; align-items: center; padding: 6px 10px; border-bottom: 1.5px solid var(--ink); }
.bxurl { padding: 3px 10px; border: 1px solid var(--hlb); border-radius: 999px; font-size: 10.5px; color: var(--mute); }
.bxvp { position: relative; flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 9px; padding: 12px 14px; }
.pvs { display: flex; flex-direction: column; gap: 5px; opacity: .3; transition: opacity .3s; }
.pvs.wip { opacity: .75; }
.pvs.in { opacity: 1; animation: inkin .45s steps(6) both; }
.pvbar { display: block; height: 6px; border-radius: 3px; background: var(--hlb); }
.pvs.wip .pvbar, .pvs.wip .pvcell { background-image: var(--hatch); background-size: 7px 7px; opacity: .45; animation: hatchmv .5s linear infinite; }
.pvs.in .pvbar { background: var(--ink); opacity: .82; }
.w60 { width: 60%; } .w70 { width: 70%; } .w80 { width: 80%; } .w90 { width: 90%; }
.pv-hero { flex-direction: row; align-items: center; gap: 12px; }
.pv-hero > div { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.pvpfp { flex: none; width: 46px; height: 46px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--paper) url(icon-512.png) center / cover no-repeat; view-transition-name: pfp; }
.pvt { font: 400 17px/1 'Archivo Black', sans-serif; text-transform: uppercase; letter-spacing: -.01em; }
.pv-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--ink); border-radius: 6px; overflow: hidden; }
.pvcell { display: block; height: 22px; border-left: 1px solid var(--hlb); background: var(--paper); }
.pvcell:first-child { border-left: 0; }
.pvs.in .pvcell { background: repeating-linear-gradient(var(--paper) 0 7px, var(--hlb) 7px 9px, var(--paper) 9px 13px, var(--hlb) 13px 15px, var(--paper) 15px); }
.pvh { padding-bottom: 3px; border-bottom: 1.5px solid var(--ink); font: 400 10px/1 'Archivo Black', sans-serif; text-transform: uppercase; letter-spacing: .02em; }

.bxtoast { position: absolute; top: 58px; right: 16px; z-index: 3; padding: 11px 16px; border-radius: 10px; background: var(--ink); color: var(--paper); font: 700 12px/1.2 var(--brut); font-stretch: 125%; box-shadow: 6px 6px 0 0 var(--hlb); animation: toastin .45s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes toastin { from { opacity: 0; transform: translateY(-14px) scale(.96); } }
.bxdone { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 16px; background: color-mix(in srgb, var(--paper) 70%, transparent); animation: bxfade .3s ease both; }
.bxdc { width: min(460px, 100%); box-sizing: border-box; padding: 20px 22px; background: var(--paper); border: 2px solid var(--ink); border-radius: 12px; box-shadow: 10px 10px 0 0 var(--hlb); animation: askin2 .45s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes askin2 { from { opacity: 0; transform: translateY(18px); } }
.bxdh { margin: 0 0 8px; font: 400 24px/1.05 'Archivo Black', sans-serif; text-transform: uppercase; letter-spacing: -.01em; }
.bxdp { margin: 0 0 16px; font: 500 14px/1.5 var(--brut); font-stretch: 112%; color: var(--mute); }
.bxdr { display: flex; flex-wrap: wrap; gap: 10px; }
.building .bubw { opacity: .25; transition: opacity .3s; }

/* Opening /about from the build morphs the preview's portrait into the page's. */
@view-transition { navigation: auto; }

@media (max-width: 900px) {
  .bxg { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .bxside { grid-template-rows: auto; }
  .bxv { display: none; }
}
@media (max-width: 720px) {
  .bx { padding: 0; }
  .bxp { width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; }
  .bxh { gap: 8px 10px; padding: calc(10px + env(safe-area-inset-top)) 12px 10px; }
  .bxcwd { display: none; }
  .bxff { width: 100%; margin-left: 0; justify-content: space-between; }
  .bxrate { display: none; }
  .bxclk { font-size: 17px; }
  .bxchip { padding: 6px 8px; font-size: 10px; }
  .bxr { gap: 4px; padding: 8px 12px 0; }
  .bxr li { gap: 4px; font-size: 9px; letter-spacing: 0; }
  .bxr li > span:last-child { display: none; }
  .bxr li.on > span:last-child { display: inline; }
  .bx:not(.dispatched) .bxside { display: none; }
  .bxr li .bxn { width: 16px; height: 16px; font-size: 8.5px; }
  .bxg { gap: 10px; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); }
  .bxo { padding: 10px; font-size: 11px; }
  .bxptxt { font-size: 10.5px; }
  .bxagg { gap: 6px; }
  .bxc { padding: 6px 8px; }
  .bxcl { font-size: 9.5px; margin: 2px 0 5px; }
  .bxmodel { display: none; }
  .bxtoast { top: auto; bottom: calc(16px + env(safe-area-inset-bottom)); left: 12px; right: 12px; text-align: center; }
}

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  .aopts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agents { left: 20px; width: 260px; }
}
@media (max-width: 720px) {
  .ui { padding: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); }
  .name { font-size: 18px; }
  .stage { align-items: flex-start; }
  .hwrap { width: 76vw; margin-top: 64px; }
  .hero { aspect-ratio: .95 / 1; }
  .hero img { width: 260%; left: -80%; top: -20%; }
  .bubw { left: calc(-12vw + 20px); right: calc(-12vw + 20px); bottom: auto; top: 100%; width: auto; max-width: none; margin-top: 8px; }
  .bubw .txt { font-size: 13.5px; line-height: 2.05; }
  .lead { left: 40px; top: auto; bottom: calc(100% - 6px); transform: scale(-1, -1); }
  .term, .term.bg { width: 86vw; }
  .ask { bottom: calc(12px + env(safe-area-inset-bottom)); padding: 12px 12px 4px; }
  .aqh { font-size: 12px; margin-bottom: 10px; }
  .aopts { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 6px; scrollbar-width: none; }
  .aopts::-webkit-scrollbar { display: none; }
  .aopt { flex: none; min-height: 44px; justify-content: center; }
  .aopt span { display: none; }
  .afoot { margin-top: 2px; }
  .agents { top: 70px; }
  .guard { top: 64px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero, .hero .base, .hero .wm, .hero .slice, .tk, .term, .ask, .aopt, .lkb, .ui.top { animation: none !important; }
  .bx, .bx * { animation: none !important; transition: none !important; }
  @view-transition { navigation: none; }
  .hero .slice { display: none; }
  .hero .wm { transition: opacity .4s ease; }
  .wm-out .hero .wm { opacity: 0; }
}