:root {
  --bg: #080808;
  --bg-raised: #101010;
  --panel: #141414;
  --text: #f1efe7;
  --muted: #9c9c96;
  --faint: #64645f;
  --line: #2b2b29;
  --accent: #8dff55;
  --danger: #ff6a55;
  --max: 1380px;
  --gutter: clamp(1rem, 4vw, 3.5rem);
  --header-height: 76px;
  --radius: 1rem;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }
html { background: var(--bg); color: var(--text); scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100svh;
  background:
    radial-gradient(circle at 82% 12%, rgba(141,255,85,.07), transparent 22rem),
    var(--bg);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.45;
  overflow-x: hidden;
}
body.nav-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
img, svg, video, canvas { max-width: 100%; }
::selection { background: var(--accent); color: #000; }

.skip-link {
  position: fixed;
  top: .5rem;
  left: .5rem;
  z-index: 1000;
  padding: .75rem 1rem;
  background: var(--text);
  color: var(--bg);
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

.ambient-field {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, #000, transparent 88%);
}
#trace-canvas {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(8,8,8,.82);
  backdrop-filter: blur(18px);
}
.wordmark {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .7rem;
  white-space: nowrap;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
}
.wordmark-mark {
  position: relative;
  width: 1.2rem;
  aspect-ratio: 1;
  border: 1px solid var(--text);
  border-radius: 50%;
}
.wordmark-mark::after {
  content: '';
  position: absolute;
  top: -.15rem;
  right: -.1rem;
  width: .35rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 1rem rgba(141,255,85,.65);
}
.site-nav { display: flex; align-items: center; gap: 1.6rem; }
.site-nav a {
  position: relative;
  padding: .7rem 0;
  color: var(--muted);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.site-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: .25rem;
  height: 1px;
  background: var(--accent);
  transition: right .25s var(--ease);
}
.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a[aria-current="page"] { color: var(--text); }
.site-nav a:hover::after,
.site-nav a:focus-visible::after,
.site-nav a[aria-current="page"]::after { right: 0; }
.nav-toggle {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  gap: .75rem;
  border: 0;
  background: transparent;
  padding: .75rem 0;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .75rem;
}
.nav-toggle-icon,
.nav-toggle-icon::before {
  display: block;
  width: 1.25rem;
  height: 1px;
  background: currentColor;
  transition: transform .25s var(--ease);
}
.nav-toggle-icon::before { content: ''; transform: translateY(.35rem); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::before { transform: rotate(-90deg); }

.hero {
  width: min(var(--max), 100%);
  min-height: calc(100svh - var(--header-height));
  margin: 0 auto;
  padding: clamp(4rem, 10vw, 9rem) var(--gutter) 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-status {
  display: flex;
  align-items: center;
  gap: .65rem;
  color: var(--muted);
  font-size: .72rem;
  letter-spacing: .16em;
}
.live-dot {
  width: .5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 1rem rgba(141,255,85,.65);
  animation: pulse 2s ease-in-out infinite;
}
.hero-title {
  margin: clamp(1.4rem, 4vw, 3rem) 0 0;
  font-size: clamp(2.4rem, 13.4vw, 12rem);
  line-height: .82;
  letter-spacing: -.075em;
  font-weight: 800;
  white-space: nowrap;
  text-wrap: nowrap;
}
.hero-deck {
  max-width: 58rem;
  margin: clamp(2rem, 5vw, 4rem) 0 0;
  color: var(--muted);
  font-size: clamp(1.1rem, 2.2vw, 1.8rem);
  line-height: 1.3;
  text-wrap: balance;
}
.hero-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.hero-meta p { margin: 0; color: var(--muted); font-size: .82rem; }
.meta-label { display: block; margin-bottom: .35rem; color: var(--faint); font-size: .66rem; letter-spacing: .13em; }
.primary-entry {
  position: relative;
  display: grid;
  grid-template-columns: minmax(10rem, .65fr) 1fr auto;
  align-items: center;
  gap: 1rem;
  margin-top: 2.5rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.015);
  overflow: hidden;
  transition: border-color .25s var(--ease), transform .25s var(--ease), background .25s var(--ease);
}
.primary-entry::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateX(-101%);
  transition: transform .4s var(--ease);
  z-index: -1;
}
.primary-entry:hover,
.primary-entry:focus-visible { color: #050505; border-color: var(--accent); transform: translateY(-2px); }
.primary-entry:hover::before,
.primary-entry:focus-visible::before { transform: translateX(0); }
.entry-kicker { color: var(--muted); font-size: .67rem; letter-spacing: .13em; }
.primary-entry:hover .entry-kicker,
.primary-entry:focus-visible .entry-kicker { color: rgba(0,0,0,.65); }
.entry-title { font-size: clamp(.95rem, 2vw, 1.35rem); }
.entry-arrow { font-size: 1.5rem; }
.hero-instruction { margin: 1rem 0 0; color: var(--faint); font-size: .75rem; }

.featured-work,
.archive-preview,
.system-statement,
.closing-field,
.page-shell,
.site-footer {
  width: min(var(--max), 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.featured-work,
.archive-preview { padding-block: clamp(5rem, 10vw, 10rem); }
.section-heading { display: grid; grid-template-columns: minmax(8rem,.35fr) 1fr; gap: 2rem; margin-bottom: 2.5rem; }
.section-heading > p { margin: .35rem 0 0; color: var(--faint); font-size: .7rem; text-transform: uppercase; letter-spacing: .13em; }
.section-heading h2 { max-width: 55rem; margin: 0; font-size: clamp(2rem, 5vw, 4.5rem); line-height: 1; letter-spacing: -.045em; }
.featured-card {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(18rem,.65fr);
  border: 1px solid var(--line);
  background: var(--bg-raised);
}
.featured-visual { min-height: 34rem; border-right: 1px solid var(--line); overflow: hidden; }
.consent-preview {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: clamp(1rem,5vw,5rem);
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--work-accent) 16%, transparent), transparent 45%),
    repeating-linear-gradient(0deg, transparent 0 6px, rgba(255,255,255,.018) 6px 7px),
    #090909;
}
.preview-window {
  position: relative;
  width: min(34rem,100%);
  padding: 4.5rem 2rem 2rem;
  border: 1px solid #3a3a36;
  background: #121212;
  box-shadow: 0 2rem 7rem rgba(0,0,0,.55);
  transition: transform .45s var(--ease), border-color .45s var(--ease);
}
.featured-visual:hover .preview-window,
.featured-visual:focus-visible .preview-window { transform: rotate(-1.4deg) scale(1.02); border-color: var(--work-accent); }
.preview-top { position: absolute; top: 1rem; left: 1rem; display: flex; gap: .45rem; }
.preview-top span { width: .55rem; aspect-ratio: 1; border-radius: 50%; background: #444; }
.preview-window p { margin: 0 0 2rem; font-size: clamp(1.4rem,4vw,2.6rem); line-height: 1.05; letter-spacing: -.035em; }
.preview-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.preview-actions span { padding: 1rem; border: 1px solid var(--work-accent); text-align: center; text-transform: uppercase; font-size: .72rem; letter-spacing: .12em; }
.preview-actions span:first-child { background: var(--work-accent); color: #050505; }
.preview-cursor { position: absolute; right: 22%; bottom: 1.3rem; color: var(--work-accent); font-size: 2rem; animation: cursor-drift 3.2s ease-in-out infinite alternate; }
.featured-copy { padding: clamp(1.5rem,4vw,3rem); display: flex; flex-direction: column; }
.work-line { display: flex; justify-content: space-between; color: var(--faint); font-size: .66rem; letter-spacing: .12em; }
.featured-copy > p { margin: auto 0 2rem; color: var(--muted); font-size: clamp(1rem,2vw,1.25rem); }
.tag-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.tag-list span,.topic-cloud span { padding: .45rem .65rem; border: 1px solid var(--line); color: var(--muted); font-size: .7rem; }
.text-link { display: inline-flex; align-items: center; gap: .5rem; width: fit-content; padding-bottom: .25rem; border-bottom: 1px solid var(--faint); }
.text-link:hover,.text-link:focus-visible { color: var(--accent); border-color: var(--accent); }

.system-statement {
  display: grid;
  grid-template-columns: minmax(8rem,.35fr) 1fr;
  gap: 2rem;
  padding-block: clamp(6rem,12vw,12rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.statement-index { color: var(--faint); font-size: .7rem; letter-spacing: .13em; }
.statement-copy { max-width: 70rem; }
.statement-copy h2 { margin: 0; font-size: clamp(2rem,5vw,5rem); line-height: 1.03; letter-spacing: -.05em; }
.statement-copy p { max-width: 48rem; margin: 2.5rem 0; color: var(--muted); font-size: 1.05rem; }
.archive-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.archive-card { min-height: 22rem; background: var(--bg); }
.archive-card > a { height: 100%; display: flex; flex-direction: column; padding: 1.2rem; transition: background .25s var(--ease), transform .25s var(--ease); }
.archive-card > a:hover,.archive-card > a:focus-visible { background: var(--panel); transform: translateY(-3px); }
.archive-card-top,.archive-card-bottom { display: flex; justify-content: space-between; color: var(--faint); font-size: .66rem; letter-spacing: .1em; }
.archive-card h3 { margin: auto 0 1rem; font-size: clamp(1.35rem,2.5vw,2.3rem); line-height: 1; letter-spacing: -.04em; }
.archive-card p { margin: 0 0 2rem; color: var(--muted); font-size: .9rem; }
.archive-card-bottom { margin-top: auto; }
.visit-state.is-visited { color: var(--accent); }
.archive-card-pending { display: flex; flex-direction: column; justify-content: flex-end; padding: 1.2rem; color: var(--faint); }
.archive-card-pending p { margin: auto 0 1rem; color: var(--muted); font-size: 1.35rem; }
.archive-card-pending > span { font-size: .66rem; letter-spacing: .12em; }
.pending-signal { width: 2rem; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 50%; position: relative; }
.pending-signal::after { content:''; position:absolute; inset: 30%; border-radius:50%; background: var(--accent); animation:pulse 2s infinite; }
.archive-button { display: inline-flex; margin-top: 1.5rem; padding: 1rem 1.2rem; border: 1px solid var(--line); text-transform: uppercase; letter-spacing: .12em; font-size: .7rem; }
.archive-button:hover,.archive-button:focus-visible { background: var(--text); color: var(--bg); }
.closing-field { min-height: 65vh; display: grid; align-content: center; padding-block: 8rem; }
.closing-field p { margin: 0; font-size: clamp(2.4rem,7vw,7rem); line-height: .95; letter-spacing: -.055em; }
.closing-field p:last-child { color: var(--muted); }

.page-shell { padding-top: clamp(4rem,9vw,8rem); padding-bottom: clamp(6rem,10vw,10rem); }
.page-intro { max-width: 75rem; margin-bottom: clamp(4rem,8vw,8rem); }
.eyebrow { margin: 0 0 1.5rem; color: var(--accent); font-size: .7rem; letter-spacing: .14em; }
.page-intro h1 { margin: 0; font-size: clamp(2.8rem,8vw,7.5rem); line-height: .92; letter-spacing: -.06em; }
.page-intro > p:last-child { max-width: 45rem; margin: 2rem 0 0; color: var(--muted); font-size: 1.1rem; }
.filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.filter-button { min-height: 44px; padding: .7rem 1rem; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; }
.filter-button:hover,.filter-button:focus-visible,.filter-button.is-active { color: var(--bg); background: var(--text); border-color: var(--text); }
.archive-list { border-top: 1px solid var(--line); }
.archive-row[hidden] { display: none; }
.archive-row > a { display: grid; grid-template-columns: 5rem 1fr auto 2rem; gap: 1.5rem; align-items: start; padding: 1.5rem 0; border-bottom: 1px solid var(--line); transition: padding .25s var(--ease), color .25s var(--ease); }
.archive-row > a:hover,.archive-row > a:focus-visible { padding-left: 1rem; color: var(--accent); }
.archive-row-id,.archive-row-meta { color: var(--faint); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; }
.archive-row-main p { margin: 0 0 .35rem; font-size: clamp(1.2rem,2.5vw,2rem); }
.archive-row-main span { color: var(--muted); }
.archive-row-meta { display: grid; gap: .35rem; text-align: right; }
.archive-row-arrow { font-size: 1.2rem; }
.empty-archive { padding: 4rem 0; color: var(--muted); }

.prose-grid { display: grid; grid-template-columns: minmax(4rem,.22fr) 1fr; gap: 0 2rem; }
.prose-index,.prose-copy { padding-block: clamp(3rem,6vw,6rem); border-top: 1px solid var(--line); }
.prose-index { color: var(--faint); font-size: .72rem; letter-spacing: .12em; }
.prose-copy { max-width: 66rem; }
.prose-copy h2,.principles h2 { margin: 0 0 2rem; font-size: clamp(2rem,4vw,4rem); line-height: 1; letter-spacing: -.045em; }
.prose-copy p { max-width: 50rem; margin: 0 0 1.25rem; color: var(--muted); font-size: clamp(1rem,1.6vw,1.22rem); }
.topic-cloud { display: flex; flex-wrap: wrap; gap: .6rem; }
.data-levels { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.data-card { min-height: 22rem; padding: clamp(1.3rem,4vw,3rem); background: var(--bg); }
.data-card > span { color: var(--accent); font-size: .68rem; letter-spacing: .13em; }
.data-card h2 { margin: 6rem 0 1rem; font-size: clamp(1.8rem,4vw,3.4rem); letter-spacing: -.04em; }
.data-card p { color: var(--muted); }
.principles { padding-block: 7rem; }
.principles ul { max-width: 60rem; margin: 0; padding: 0; list-style: none; }
.principles li { padding: 1rem 0 1rem 2rem; border-top: 1px solid var(--line); color: var(--muted); position: relative; }
.principles li::before { content: '↳'; position: absolute; left: 0; color: var(--accent); }
.notice { padding: 1.3rem; border: 1px solid var(--line); background: var(--panel); color: var(--muted); }
.notice p { margin: 0; }

.work-shell { width: min(var(--max),100%); margin-inline:auto; padding: clamp(3rem,7vw,7rem) var(--gutter) 8rem; }
.work-intro { display: grid; grid-template-columns: 1fr minmax(18rem,.45fr); gap: 3rem; align-items:end; margin-bottom: 4rem; }
.work-intro h1 { margin:0; max-width:60rem; font-size:clamp(2.7rem,8vw,7rem); line-height:.92; letter-spacing:-.055em; }
.work-intro > p { margin:0; color:var(--muted); }
.prototype-stage { min-height: 65vh; display:grid; place-items:center; gap:2rem; padding:clamp(1rem,5vw,5rem); border:1px solid var(--line); background:radial-gradient(circle at center, rgba(141,255,85,.06), transparent 40%), #0b0b0b; }
.prototype-window { width:min(42rem,100%); border:1px solid #373733; background:#131313; box-shadow:0 3rem 10rem rgba(0,0,0,.65); }
.prototype-browserbar { display:flex; align-items:center; gap:.45rem; padding:.8rem 1rem; border-bottom:1px solid var(--line); }
.prototype-browserbar span { width:.55rem; aspect-ratio:1; border-radius:50%; background:#454541; }
.prototype-browserbar p { margin:0 0 0 1rem; color:var(--faint); font-size:.72rem; }
.prototype-content { padding:clamp(1.4rem,5vw,3.5rem); }
.system-label { color:var(--accent); font-size:.67rem; letter-spacing:.13em; }
.prototype-content h2 { margin:1rem 0; font-size:clamp(1.9rem,5vw,3.6rem); line-height:1; letter-spacing:-.04em; }
.prototype-content > p:not(.system-label):not(.prototype-log) { color:var(--muted); }
.prototype-actions { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-top:2rem; }
.prototype-button { min-height:52px; padding:1rem; border:1px solid var(--accent); cursor:pointer; text-transform:uppercase; letter-spacing:.12em; font-size:.73rem; }
.prototype-button.primary { background:var(--accent); color:#050505; }
.prototype-button.secondary { background:transparent; color:var(--text); }
.prototype-button:hover,.prototype-button:focus-visible { transform:translateY(-2px); }
.prototype-log { margin:1.4rem 0 0; color:var(--faint); font-family:monospace; font-size:.78rem; }
.prototype-note { max-width:42rem; color:var(--muted); }
.prototype-note p { margin:0; }
.work-navigation { display:flex; justify-content:space-between; gap:1rem; margin-top:2rem; padding-top:1rem; border-top:1px solid var(--line); color:var(--muted); }
.work-navigation a:hover,.work-navigation a:focus-visible { color:var(--accent); }

.site-footer { display:flex; justify-content:space-between; gap:2rem; padding-top:2rem; padding-bottom:2rem; border-top:1px solid var(--line); color:var(--faint); font-size:.72rem; }
.site-footer p { margin:0; max-width:42rem; }
.site-footer a { color:var(--muted); }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@keyframes pulse { 0%,100%{opacity:.35;transform:scale(.82)} 50%{opacity:1;transform:scale(1.05)} }
@keyframes cursor-drift { from{transform:translate(-2rem,-1rem)} to{transform:translate(1rem,.5rem)} }

@media (max-width: 900px) {
  :root { --header-height: 68px; }
  .nav-toggle { display:flex; }
  .site-nav {
    position: fixed;
    inset: var(--header-height) 0 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    padding: var(--gutter);
    background: rgba(8,8,8,.98);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .35s var(--ease), visibility .35s;
  }
  .site-nav.is-open { transform: translateX(0); visibility: visible; }
  .site-nav a { padding: 1rem 0; border-bottom: 1px solid var(--line); font-size: clamp(1.4rem,6vw,2.4rem); text-transform:none; letter-spacing:-.03em; }
  .site-nav a::after { display:none; }
  .featured-card { grid-template-columns: 1fr; }
  .featured-visual { min-height: 28rem; border-right:0; border-bottom:1px solid var(--line); }
  .archive-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .work-intro { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  :root { --gutter: 1rem; }
  .hero { min-height: auto; padding-top: 4rem; padding-bottom: 5rem; }
  .hero-title {
    font-size: clamp(2.4rem,13.4vw,5.4rem);
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
  }
  .hero-meta { grid-template-columns: 1fr; }
  .primary-entry { grid-template-columns: 1fr auto; }
  .entry-kicker { grid-column: 1 / -1; }
  .hero-instruction { max-width: 18rem; }
  .section-heading,
  .system-statement { grid-template-columns: 1fr; gap: 1rem; }
  .featured-visual { min-height: 24rem; }
  .preview-window { padding: 3.6rem 1rem 1rem; }
  .preview-actions { grid-template-columns: 1fr; }
  .archive-grid { grid-template-columns: 1fr; }
  .archive-card { min-height: 18rem; }
  .archive-row > a { grid-template-columns: 3.2rem 1fr 1.2rem; gap: .75rem; }
  .archive-row-meta { display:none; }
  .prose-grid { grid-template-columns: 2.6rem 1fr; gap: 0 1rem; }
  .data-levels { grid-template-columns: 1fr; }
  .data-card { min-height: 18rem; }
  .data-card h2 { margin-top:4rem; }
  .prototype-actions { grid-template-columns:1fr; }
  .site-footer { flex-direction:column; }
  .work-navigation { flex-direction:column; }
}


@media (max-width: 380px) {
  :root { --gutter: .85rem; }
  .site-header { column-gap: .7rem; }
  .wordmark { gap: .5rem; font-size: .7rem; letter-spacing: .11em; }
  .wordmark-mark { width: 1.05rem; }
  .nav-toggle { gap: .55rem; font-size: .68rem; letter-spacing: .08em; }
  .hero { padding-top: 3.25rem; }
  .hero-status { font-size: .63rem; letter-spacing: .12em; }
  .hero-title { margin-top: 1.15rem; }
  .hero-deck { margin-top: 1.65rem; font-size: 1rem; }
  .hero-meta { margin-top: 2.25rem; }
  .primary-entry { margin-top: 2rem; padding: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal { opacity:1; transform:none; }
}

/* Work 002 featured preview */
.captcha-preview { width:100%; height:100%; display:grid; place-items:center; padding:clamp(1rem,4vw,3rem); background:radial-gradient(circle at 50% 42%,rgba(158,183,255,.13),transparent 34%),linear-gradient(rgba(158,183,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(158,183,255,.055) 1px,transparent 1px),#090a0d; background-size:auto,40px 40px,40px 40px,auto; }
.captcha-preview-window { position:relative; width:min(35rem,94%); border:1px solid #373b49; background:#0d0f14; box-shadow:0 2.5rem 7rem rgba(0,0,0,.58); }
.captcha-preview-top { min-height:42px; display:grid; grid-template-columns:1fr 6rem auto; align-items:center; gap:.65rem; padding:.65rem .75rem; border-bottom:1px solid #303440; color:#737985; font:700 .55rem/1 ui-monospace,monospace; letter-spacing:.1em; }
.captcha-preview-top i { height:2px; background:linear-gradient(90deg,#9eb7ff 18%,#262a34 18%); }
.captcha-preview-top strong { color:#edf0fa; }
.captcha-preview-body { padding:clamp(1.1rem,4vw,2.5rem); }
.captcha-preview-body small { color:#9eb7ff; font:700 .55rem/1 ui-monospace,monospace; letter-spacing:.12em; }
.captcha-preview-body p { margin:1rem 0; max-width:25rem; color:#edf0fa; font-size:clamp(1.7rem,4vw,3rem); line-height:.95; letter-spacing:-.05em; }
.captcha-preview-body code { display:block; padding:.65rem; border:1px solid #303440; color:#9eb7ff; overflow:hidden; font-size:.67rem; }
.captcha-preview-body div { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; margin-top:1rem; }
.captcha-preview-body div span { min-height:3.6rem; display:flex; align-items:center; padding:.7rem; border:1px solid #343846; color:#b7bac3; font-size:.72rem; }
.captcha-preview-window > b { display:block; padding:.65rem .75rem; border-top:1px solid #303440; color:#ff796d; font:700 .58rem/1 ui-monospace,monospace; letter-spacing:.12em; }
@media (max-width:640px) { .captcha-preview-body div { grid-template-columns:1fr; } .captcha-preview-top { grid-template-columns:1fr 3.5rem auto; } }

@supports (padding: max(0px)) {
  .site-header {
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
  }
  .site-footer { padding-bottom: max(2rem, env(safe-area-inset-bottom)); }
}


/* Work 003 featured preview */
.sr-only { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }
.inferred-preview { position:relative; min-height:100%; overflow:hidden; background:#08090a; }
.inferred-preview img { width:100%; height:100%; min-height:34rem; object-fit:cover; filter:saturate(.9) contrast(1.04); transition:transform .6s var(--ease),filter .6s var(--ease); }
.featured-visual:hover .inferred-preview img,.featured-visual:focus-visible .inferred-preview img { transform:scale(1.025); filter:saturate(1.08) contrast(1.08); }
.inferred-preview::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,transparent 42%,rgba(7,8,9,.78)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.04); }
.inferred-preview-stamp { position:absolute; z-index:2; left:1rem; right:1rem; bottom:1rem; display:flex; justify-content:space-between; gap:1rem; padding:.75rem; border:1px solid rgba(255,255,255,.25); background:rgba(7,8,9,.58); backdrop-filter:blur(12px); font:600 .61rem/1.2 ui-monospace,monospace; letter-spacing:.1em; }
.inferred-preview-stamp span { color:rgba(255,255,255,.52); }
.inferred-preview-stamp strong { color:#ff5a4f; }