/* Distrophia · distrophia.dev. Tokens from docs/brand/BRAND.md in the game repo.
   Amber (--iris) is Íris only. Red (--alert) is SENTINEL and danger only. */
@font-face { font-family: 'JetBrains Mono'; src: url('/assets/fonts/jbm-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/assets/fonts/jbm-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/assets/fonts/jbm-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/assets/fonts/jbm-800-normal.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  --void: #04070A;
  --panel: rgba(8, 22, 26, .62);
  --panel-solid: #08161A;
  --phos: #8FF5D2;
  --phos-2: #A9D8C8;
  --phos-3: #6FA593;
  --phos-dark: #3F7F6C;
  --glow: #D4FFF0;
  --iris: #FFB454;
  --alert: #FF4D5E;
  --signal: #5CCFE6;
  --faded: rgba(154, 165, 161, .32);
  --rule: rgba(143, 245, 210, .14);
  --rule-2: rgba(143, 245, 210, .28);
  --mono: 'SF Mono', 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --wrap: 1180px;
  color-scheme: dark;
}
@media (prefers-contrast: more) {
  :root { --phos-2: #D4FFF0; --phos-3: #BFEFDF; --rule: rgba(143, 245, 210, .4); --rule-2: rgba(143, 245, 210, .7); }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.calm { scroll-behavior: auto; }
body {
  margin: 0; background: var(--void); color: var(--phos-2);
  font: 400 16px/1.7 var(--mono); letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
  background-image: radial-gradient(1200px 600px at 70% -10%, rgba(92, 207, 230, .07), transparent 60%),
                    radial-gradient(900px 500px at 10% 20%, rgba(143, 245, 210, .05), transparent 60%);
  background-repeat: no-repeat;
}
a { color: var(--signal); text-underline-offset: 3px; }
a:hover { color: var(--glow); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { color: var(--glow); font-weight: 800; letter-spacing: -.02em; margin: 0; }
h2 { font-size: clamp(30px, 4.6vw, 52px); line-height: 1.08; text-wrap: balance; }
h3 { font-size: 18px; line-height: 1.3; letter-spacing: -.01em; }
p { margin: 0; }
.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--phos); color: var(--void); padding: 8px 12px; }
.skip:focus { left: 8px; }
.label { font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: var(--phos-3); margin-bottom: 18px; }
.label::before { content: '// '; color: var(--phos-dark); }
.lead { font-size: 17px; max-width: 62ch; margin-top: 20px; color: var(--phos-2); text-wrap: pretty; }

/* CRT layer: scanlines + vignette + flicker. "efeitos: desligados" and Reduce Motion remove it. */
.crt { position: fixed; inset: 0; pointer-events: none; z-index: 60;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.22) 2px 3px),
              radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%);
  animation: flicker 6s steps(60) infinite; }
@keyframes flicker { 0%, 100% { opacity: .9 } 47% { opacity: .9 } 48% { opacity: .78 } 49% { opacity: .92 } 73% { opacity: .86 } }
html.calm .crt { display: none; }
@media (prefers-contrast: more) { .crt { display: none; } }

/* Logo: DISTROP glows, H fades (never gone), IA is amber. */
.logo { font-weight: 800; letter-spacing: .16em; white-space: nowrap; display: inline-block; line-height: 1; }
.logo .lg-a { color: var(--glow); text-shadow: 0 0 18px rgba(212, 255, 240, .45); }
.logo .lg-h { color: var(--faded); }
.logo .lg-i { color: var(--iris); text-shadow: 0 0 18px rgba(255, 180, 84, .5); }
.logo-sm { font-size: 15px; letter-spacing: .22em; }
.logo-xl { font-size: clamp(40px, 9.4vw, 112px); letter-spacing: .12em; margin-left: .06em; }
.glitch { position: relative; }
.glitch .lg-h { animation: fade-h 7s ease-in-out infinite; }
@keyframes fade-h { 0%, 100% { opacity: 1 } 50% { opacity: .45 } 52% { opacity: .9 } 54% { opacity: .5 } }
.glitch::after { content: ''; position: absolute; inset: 38% -2% 46% -2%; background: inherit;
  box-shadow: 6px 0 0 rgba(255, 77, 94, .0); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.calm) .glitch { animation: tear 9s steps(1) infinite; }
}
@keyframes tear {
  0%, 93%, 100% { transform: none; filter: none; clip-path: none; }
  94% { transform: translateX(-6px); filter: drop-shadow(3px 0 rgba(255,77,94,.7)) drop-shadow(-3px 0 rgba(92,207,230,.7)); clip-path: inset(30% 0 40% 0); }
  95% { transform: translateX(5px); clip-path: inset(55% 0 20% 0); }
  96% { transform: none; filter: drop-shadow(2px 0 rgba(255,77,94,.5)) drop-shadow(-2px 0 rgba(92,207,230,.5)); clip-path: none; }
}
html.calm .glitch, html.calm .glitch .lg-h { animation: none; }

/* Header */
.top { position: sticky; top: 0; z-index: 50; background: rgba(4, 7, 10, .78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--rule); }
.top-in { display: flex; align-items: center; gap: 24px; height: 60px; }
.brand { text-decoration: none; }
.nav { display: flex; gap: 22px; margin-left: 12px; }
.nav a { color: var(--phos-3); text-decoration: none; font-size: 13px; letter-spacing: .04em; }
.nav a:hover { color: var(--glow); }
.top-r { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.fx, .lang { font: inherit; font-size: 12px; color: var(--phos-3); background: none; border: 1px solid var(--rule); border-radius: 6px; padding: 5px 9px; cursor: pointer; text-decoration: none; }
.fx:hover, .lang:hover { color: var(--glow); border-color: var(--rule-2); }
@media (max-width: 980px) { .nav { display: none; } }
@media (max-width: 560px) { .fx { display: none; } .top-r .btn-sm { display: none; } }

/* Buttons: phosphor, never amber. */
.btn { display: inline-flex; align-items: center; gap: 10px; font: 700 15px/1 var(--mono); letter-spacing: .02em;
  background: var(--phos); color: var(--void); text-decoration: none; padding: 15px 22px; border-radius: 8px; border: 1px solid var(--phos);
  box-shadow: 0 0 0 0 rgba(143, 245, 210, .0), 0 10px 40px -12px rgba(143, 245, 210, .55); transition: box-shadow .2s, transform .2s, background .2s; }
.btn:hover { color: var(--void); background: var(--glow); box-shadow: 0 0 0 4px rgba(143, 245, 210, .16), 0 14px 50px -10px rgba(143, 245, 210, .7); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--phos); border-color: var(--rule-2); box-shadow: none; font-weight: 400; }
.btn-ghost:hover { background: rgba(143, 245, 210, .08); color: var(--glow); box-shadow: none; }
.btn-sm { padding: 8px 12px; font-size: 12.5px; border-radius: 6px; box-shadow: none; }
.btn-lg { padding: 18px 28px; font-size: 16px; }
.btn.is-soon { background: transparent; color: var(--phos); border: 1px dashed var(--rule-2); box-shadow: none; cursor: default; font-weight: 700; }
.btn.is-soon:hover { transform: none; }

/* Hero */
.hero { padding: 72px 0 40px; position: relative; }
.hero-in { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .75fr); gap: 48px; align-items: end; }
@media (max-width: 900px) { .hero-in { grid-template-columns: 1fr; } }
.boot { margin: 0 0 34px; font: 400 13px/1.8 var(--mono); color: var(--phos-dark); white-space: pre-wrap; }
.boot .bl { display: block; }
.boot .d2 { color: var(--alert); }
.boot .iris, .iris-line { color: var(--iris); font-style: italic; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.calm) .boot .bl { animation: line .6s steps(3); }
  html:not(.calm) .boot .d0 { animation-delay: .1s } html:not(.calm) .boot .d1 { animation-delay: .35s }
  html:not(.calm) .boot .d2 { animation-delay: .6s } html:not(.calm) .boot .d3 { animation-delay: .95s }
}
@keyframes line { 0% { opacity: .15 } 100% { opacity: 1 } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); filter: blur(4px) } to { opacity: 1; transform: none; filter: none } }
.presents { font-size: 13px; letter-spacing: .5em; color: var(--phos-3); margin-bottom: 14px; }
.hero-h { margin-top: 30px; font-size: clamp(22px, 3.2vw, 36px); line-height: 1.3; color: var(--phos-2); max-width: 30ch; text-wrap: balance; }
.hero-h strong { color: var(--glow); font-weight: 800; display: block; }
.hero-sub { margin-top: 20px; font-size: 17px; max-width: 58ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-note { margin-top: 16px; font-size: 13px; color: var(--phos-3); }
.lethe { border: 1px solid rgba(255, 77, 94, .35); border-radius: 14px; padding: 24px; background: linear-gradient(180deg, rgba(255,77,94,.07), rgba(8,22,26,.5));
  box-shadow: 0 30px 80px -40px rgba(255, 77, 94, .5); }
.lethe p { margin: 0; }
.lethe-l { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--alert); }
.lethe-l::before { content: '● '; }
html:not(.calm) .lethe-l::before { animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0 } }
.lethe-v { margin-top: 14px !important; color: var(--glow); font-weight: 800; font-size: clamp(26px, 3vw, 36px); letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.lethe-w { margin-top: 8px !important; font-size: 13px; color: var(--phos-3); }
.lethe-cron { margin: 18px 0 0; padding-top: 14px; border-top: 1px dashed rgba(255,77,94,.3); font: 12px/1.5 var(--mono); color: var(--phos-dark); white-space: pre-wrap; }
.monitor { margin: 64px 0 0; position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--rule-2);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 40px 120px -30px rgba(143, 245, 210, .35), 0 0 80px -20px rgba(92, 207, 230, .25); background: #000; }
.monitor::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.16) 2px 3px), radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,.45)); }
html.calm .monitor::after { background: none; }
.monitor figcaption, .shot figcaption { position: absolute; left: 14px; bottom: 12px; z-index: 2; font-size: 12px; color: var(--phos-2);
  background: rgba(4,7,10,.82); border: 1px solid var(--rule); padding: 5px 10px; border-radius: 6px; }

/* Sections */
.sec { padding: 120px 0; border-top: 1px solid var(--rule); position: relative; }
@media (max-width: 700px) { .sec { padding: 80px 0; } }
.pillars { list-style: none; padding: 0; margin: 56px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; }
.pillar { background: var(--void); padding: 28px 26px 30px; transition: background .25s; }
.pillar:hover { background: #061013; }
.pillar code { display: inline-block; font-size: 12.5px; color: var(--signal); margin-bottom: 18px; }
.pillar h3 { margin-bottom: 10px; }
.pillar p { font-size: 14.5px; color: var(--phos-3); }
@media (max-width: 900px) { .pillars { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .pillars { grid-template-columns: 1fr; } }

.mind { margin-top: 90px; max-width: 640px; }
.mind-copy h3 { font-size: clamp(24px, 3vw, 34px); }
.mind-copy p { margin-top: 14px; color: var(--phos-3); }
.levels { list-style: none; padding: 0; margin: 26px 0 0; display: flex; gap: 8px; }
.levels li { width: 12px; height: 12px; border-radius: 50%; background: var(--phos); box-shadow: 0 0 10px var(--phos); }
.levels li:nth-child(2) { opacity: .7 } .levels li:nth-child(3) { opacity: .4 } .levels li:nth-child(4) { opacity: .15; box-shadow: none; }
.shots { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.shot { margin: 0; position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--rule-2); background: #000; }
@media (max-width: 900px) { .mind { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .shots { grid-template-columns: 1fr; } }

/* Sample terminal */
.sec-term { background: linear-gradient(180deg, rgba(8,22,26,.45), transparent); }
.term-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; }
@media (max-width: 900px) { .term-grid { grid-template-columns: 1fr; gap: 32px; } }
.term { border: 1px solid var(--rule-2); border-radius: 12px; background: rgba(2, 6, 8, .92); overflow: hidden;
  box-shadow: 0 30px 90px -30px rgba(143, 245, 210, .3); font-size: 14px; }
.term-bar { display: flex; justify-content: space-between; padding: 10px 16px; font-size: 11px; letter-spacing: .28em; color: var(--phos-dark); border-bottom: 1px solid var(--rule); }
.term-out { height: 360px; overflow-y: auto; padding: 16px; line-height: 1.6; scrollbar-width: thin; scrollbar-color: var(--phos-dark) transparent; }
.term-out p { white-space: pre-wrap; word-break: break-word; }
.term-out .cmd { color: var(--glow); }
.term-out .cmd b { color: var(--signal); font-weight: 400; }
.term-out .out { color: var(--phos-2); }
.term-out .dim { color: var(--phos-3); }
.term-out .iris { color: var(--iris); font-style: italic; }
.term-out .sentinel { color: var(--alert); font-style: italic; }
.term-out .err { color: var(--alert); }
.term-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--rule); }
.chip { font: inherit; font-size: 12.5px; color: var(--phos-2); background: rgba(143,245,210,.05); border: 1px solid var(--rule); border-radius: 6px; padding: 5px 10px; cursor: pointer; }
.chip:hover { color: var(--glow); border-color: var(--rule-2); }
.term-in { display: flex; gap: 10px; align-items: center; padding: 14px 16px; border-top: 1px solid var(--rule); }
.term-in label { color: var(--signal); white-space: nowrap; }
.term-in input { flex: 1; min-width: 0; font: inherit; color: var(--glow); background: none; border: 0; outline: none; caret-color: var(--phos); }
.term:focus-within { border-color: var(--phos-dark); }
.term-ns { padding: 0 16px 14px; color: var(--phos-3); }
@media (max-width: 560px) { .term-in label { font-size: 12px; } .term-out { height: 300px; } }

/* Chapters: a Friday from 08:47 to 17:00 */
.chapters { list-style: none; padding: 0; margin: 64px 0 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; }
.chapters::before { content: ''; position: absolute; left: 0; right: 0; top: 34px; height: 1px; background: linear-gradient(90deg, var(--phos), var(--phos-dark) 70%, var(--alert)); opacity: .6; }
.chap { padding-right: 22px; position: relative; }
.chap-t { display: block; font-size: 13px; color: var(--phos-3); font-variant-numeric: tabular-nums; height: 22px; }
.chap-dot { display: block; width: 11px; height: 11px; border-radius: 50%; background: var(--void); border: 2px solid var(--phos); margin: 6px 0 22px; box-shadow: 0 0 12px rgba(143,245,210,.6); }
.chap:last-child .chap-dot { border-color: var(--alert); box-shadow: 0 0 12px rgba(255,77,94,.6); }
.chap h3 { font-size: 20px; }
.chap-n { color: var(--phos-dark); margin-right: 4px; }
.chap p { margin-top: 10px; font-size: 14.5px; color: var(--phos-3); }
.endings { margin-top: 56px; font-size: 18px; color: var(--glow); border-left: 2px solid var(--phos); padding-left: 16px; }
@media (max-width: 900px) {
  .chapters { grid-template-columns: 1fr; gap: 28px; padding-left: 26px; }
  .chapters::before { left: 5px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; background: linear-gradient(180deg, var(--phos), var(--phos-dark) 70%, var(--alert)); }
  .chap-dot { position: absolute; left: -26px; top: 4px; margin: 0; }
  .chap-t { height: auto; }
}

/* Cast */
.cast { list-style: none; padding: 0; margin: 56px 0 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.who { border: 1px solid var(--rule); border-radius: 12px; padding: 22px 20px; background: var(--panel); display: flex; flex-direction: column; }
.who p { margin-top: 10px; font-size: 14px; color: var(--phos-3); flex: 1; }
.who blockquote { margin: 18px 0 0; font-size: 13.5px; color: var(--phos-2); padding-top: 14px; border-top: 1px dashed var(--rule); }
.who-iris h3, .who-iris blockquote { color: var(--iris); }
.who-iris blockquote { font-style: italic; }
.who-iris { border-color: rgba(255, 180, 84, .35); }
.who-sentinel h3, .who-sentinel blockquote { color: var(--alert); }
.who-sentinel { border-color: rgba(255, 77, 94, .3); }
@media (max-width: 1080px) { .cast { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .cast { grid-template-columns: 1fr; } }

/* Accessibility */
.a11y { list-style: none; padding: 0; margin: 56px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 40px; }
.a11y h3 { font-size: 16px; }
.a11y h3::before { content: '◆ '; color: var(--signal); }
.a11y p { margin-top: 8px; font-size: 14.5px; color: var(--phos-3); }
@media (max-width: 900px) { .a11y { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .a11y { grid-template-columns: 1fr; } }

/* Price */
.price-grid { display: grid; grid-template-columns: 1fr 440px; gap: 56px; align-items: center; }
@media (max-width: 900px) { .price-grid { grid-template-columns: 1fr; } }
.nodemo { margin-top: 40px; font-size: 22px; }
.nodemo + .lead { margin-top: 12px; }
.card { border: 1px solid var(--rule-2); border-radius: 16px; padding: 32px; background: linear-gradient(180deg, rgba(143,245,210,.06), rgba(8,22,26,.6));
  box-shadow: 0 40px 120px -40px rgba(143, 245, 210, .4); }
.cur { display: inline-flex; border: 1px solid var(--rule-2); border-radius: 8px; overflow: hidden; }
.cur button { font: inherit; font-size: 13px; color: var(--phos-3); background: none; border: 0; padding: 6px 14px; cursor: pointer; }
.cur button[aria-pressed="true"] { background: var(--phos); color: var(--void); font-weight: 700; }
.price { margin-top: 22px; font-size: clamp(48px, 7vw, 68px); font-weight: 800; color: var(--glow); letter-spacing: -.04em; line-height: 1; text-shadow: 0 0 30px rgba(212,255,240,.3); font-variant-numeric: tabular-nums; }
.price-once { margin-top: 8px; color: var(--phos-3); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; }
/* launch price line: two lines reserved even while empty, so it never pushes the card when it fills in */
.price-launch { margin-top: 10px; min-height: calc(2 * 1.6em); font-size: 13px; line-height: 1.6; color: var(--phos-2); }
.price-launch s { color: var(--phos-3); text-decoration-thickness: 2px; }
.incl { list-style: none; padding: 0; margin: 26px 0 28px; display: grid; gap: 9px; font-size: 14.5px; }
.incl li::before { content: '✓  '; color: var(--phos); }
.card .btn { width: 100%; justify-content: center; }
/* download (while sales are closed): who the main DMG is for, and the Intel one */
.dl-alt { margin-top: 12px; font-size: 13px; color: var(--phos-3); }
.dl-alt a { color: var(--phos); text-decoration: underline; text-underline-offset: 3px; }
.card .dl-alt, .final .dl-alt { text-align: center; }
.price-note { margin-top: 14px; font-size: 12.5px; color: var(--phos-3); text-align: center; }

/* FAQ */
.faq-wrap { max-width: 860px; }
.faq { margin-top: 40px; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; list-style: none; padding: 22px 36px 22px 0; color: var(--glow); font-weight: 700; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 20px; color: var(--signal); font-size: 20px; }
.faq details[open] summary::after { content: '−'; }
.faq details p { padding: 0 0 24px; color: var(--phos-2); max-width: 68ch; }

/* Final */
.final { padding: 140px 0; text-align: center; border-top: 1px solid var(--rule); background: radial-gradient(600px 300px at 50% 100%, rgba(255,77,94,.08), transparent 70%); }
.final-h { font-size: clamp(30px, 5vw, 56px); font-weight: 800; color: var(--glow); letter-spacing: -.03em; line-height: 1.1; }
.final-p { margin: 16px 0 36px; color: var(--iris); font-style: italic; font-size: 18px; }
.final-p::before { content: '› '; }

/* Footer (same pattern as the other oprimo.dev landings) */
.foot { border-top: 1px solid var(--rule); padding: 56px 0 34px; font-size: 14px; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr .9fr 1.2fr 1.2fr; gap: 40px; }
.foot-brand { display: flex; align-items: center; gap: 9px; color: var(--glow); font-weight: 700; }
.foot-brand img { border-radius: 4px; }
.tagline { margin-top: 10px; color: var(--phos-3); max-width: 34ch; font-size: 13.5px; line-height: 1.6; }
.foot-lang { display: inline-block; margin-top: 14px; font-size: 13px; color: var(--phos-3); }
.foot h2 { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--phos-3); margin: 0 0 12px; font-weight: 700; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { padding: 4px 0; }
.foot a { color: var(--phos-2); text-decoration: none; font-size: 13.5px; }
.foot a:hover { color: var(--glow); text-decoration: underline; }
.blurb { display: block; font-size: 12px; color: var(--phos-dark); }
@media (prefers-contrast: more) { .blurb { color: var(--phos-3); } }
.rights { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--rule); }
.social { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 14px !important; }
.rights p { font-size: 12.5px; color: var(--phos-3); }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .foot-grid { grid-template-columns: 1fr; gap: 28px; } }

/* Docs and 404 */
.doc { padding: 80px 0 100px; max-width: 760px; }
.doc h1 { font-size: clamp(32px, 5vw, 48px); }
.doc h2 { font-size: 20px; margin: 40px 0 10px; }
.doc p { margin-top: 10px; }
.nf { min-height: 100vh; display: grid; place-content: center; text-align: center; gap: 20px; }
.nf .boot { color: var(--alert); margin: 10px 0 0; }
.nf .btn { margin: 8px 4px 0; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.redact { color: var(--faded); letter-spacing: -.05em; }
.chap-x .chap-dot { border-color: var(--phos-dark); box-shadow: none; }
.chap-x:last-child .chap-dot { border-color: var(--alert); box-shadow: 0 0 12px rgba(255,77,94,.6); }
.chap .locked { font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--phos-dark); }
.chap .locked::before { content: '🔒 '; filter: grayscale(1) opacity(.6); }

/* Windows downloads (WINDOWS_OPEN in scripts/content.py): both buttons and both lines are in the page, and the .win
   class from the boot script picks one before the first paint. The Windows line keeps two lines of height, so the
   ARM64 swap in site.js moves nothing. */
:root:not(.win) .dl-win, .win .dl-mac { display: none; }
.win .dl-alt.dl-win { min-height: 2lh; }

/* ==========================================================================
   The page as a game (assets/game.js). Every piece here is decoration over a page that reads fine without it:
   no JS, "efeitos: desligados" or Reduce Motion give the plain page with full color.
   ========================================================================== */

/* Awareness: the screen starts without color (level 0, the game's "Mono") and gets it back as the visitor reads.
   The tokens are registered so the change fades instead of snapping. */
@property --phos   { syntax: '<color>'; inherits: true; initial-value: #8FF5D2; }
@property --phos-2 { syntax: '<color>'; inherits: true; initial-value: #A9D8C8; }
@property --phos-3 { syntax: '<color>'; inherits: true; initial-value: #6FA593; }
@property --glow   { syntax: '<color>'; inherits: true; initial-value: #D4FFF0; }
@property --iris   { syntax: '<color>'; inherits: true; initial-value: #FFB454; }
@property --signal { syntax: '<color>'; inherits: true; initial-value: #5CCFE6; }
@property --alert  { syntax: '<color>'; inherits: true; initial-value: #FF4D5E; }
html.js { transition: --phos 1.4s ease, --phos-2 1.4s ease, --phos-3 1.4s ease, --glow 1.4s ease, --iris .6s ease, --signal 1.6s ease, --alert 1s ease; }
html[data-lvl="0"] { --phos: #7D9B8E; --phos-2: #7D9B8E; --phos-3: #5E7369; --glow: #A9BAB2; --iris: #A9BAB2; --signal: #7D9B8E; --alert: #A9BAB2; }
html[data-lvl="1"] { --signal: #7FA79A; }
html[data-lvl="0"] body, html[data-lvl="1"] body { background-image: none; }
html[data-lvl="0"] .logo .lg-a, html[data-lvl="0"] .logo .lg-i { text-shadow: none; }

/* Hero: a full screen, with the network behind it */
.hero { padding-top: 40px; overflow: hidden; isolation: isolate; }
.hero-in { min-height: calc(100svh - 140px); align-content: center; }
@media (max-height: 700px) { .hero-in { min-height: 0; } }
.net { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: 0; transition: opacity 1.6s ease;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 72% 40%, #000 30%, transparent 85%);
          mask-image: radial-gradient(ellipse 70% 80% at 72% 40%, #000 30%, transparent 85%); }
html.js .net.on { opacity: 1; }
@media (max-width: 900px) { .net { -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 60%, transparent); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 60%, transparent); opacity: .5 !important; } }
.hero-copy { position: relative; }
.hero-copy::before { content: ''; position: absolute; inset: -40px -60px; z-index: -1; background: radial-gradient(closest-side, rgba(4,7,10,.85), transparent); pointer-events: none; }
.boot { font-size: 12px; line-height: 1.75; }
.boot .bl { white-space: pre; overflow: hidden; text-overflow: clip; }
@media (max-width: 560px) { .boot { font-size: 10.5px; } }
/* game.js types the boot itself; without it, the CSS fade above stays */
html.js:not(.calm) .boot.typing .bl { animation: none; visibility: hidden; }
html.js:not(.calm) .boot.typing .bl.shown { visibility: visible; }
.boot .bl.shown:last-child::after, .boot .iris.shown::after { content: '▌'; color: var(--iris); margin-left: 2px; animation: blink 1s steps(2) infinite; font-style: normal; }
.boot.done .bl:not(:last-child)::after { content: none; }
html.js .hero-logo .logo [data-scr] { font-variant-ligatures: none; }

/* Section labels: a timestamp from Íris's Friday */
.label::before { content: none; }
.label .ts { color: var(--phos-dark); letter-spacing: .08em; margin-right: 4px; }

/* HUD: the game's status panel, pinned to the screen */
.hud { position: fixed; right: 16px; bottom: 16px; z-index: 55; display: grid; grid-template-columns: 1fr 1fr; width: 190px; align-items: stretch;
  font-size: 11px; letter-spacing: .06em; color: var(--phos-3); background: rgba(4, 9, 12, .86); border: 1px solid var(--rule-2); border-radius: 10px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 20px 60px -20px rgba(0,0,0,.8); overflow: hidden;
  transform: translateY(calc(100% + 24px)); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.hud.up { transform: none; }
.hud.up.away { transform: translateY(calc(100% + 24px)); }
.hud[hidden] { display: none; }
.hud-cell { grid-column: 1 / -1; padding: 9px 14px 10px; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: auto auto; gap: 2px 12px; align-items: baseline; }
.hud-k { font-size: 9.5px; letter-spacing: .26em; color: var(--phos-dark); }
.hud-v { color: var(--glow); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.hud-bar { grid-column: 1 / -1; height: 3px; background: var(--rule); border-radius: 2px; overflow: hidden; margin-top: 5px; }
.hud-bar i { display: block; height: 100%; width: 0; background: var(--phos); box-shadow: 0 0 8px var(--phos); transition: width .3s linear; }
.hud-time .hud-bar i { background: linear-gradient(90deg, var(--phos), var(--iris) 85%, var(--alert)); }
.hud-sent .hud-bar i { background: var(--alert); box-shadow: 0 0 8px var(--alert); }
.hud-s { grid-column: 1 / -1; font-size: 9.5px; color: var(--phos-dark); letter-spacing: .14em; }
.hud-sent.hot .hud-v { color: var(--alert); }
html:not(.calm) .hud-sent.hot { animation: hud-hot .8s steps(2) infinite; }
@keyframes hud-hot { 50% { background: rgba(255, 77, 94, .08); } }
.hud-pips { grid-column: 1 / -1; display: flex; gap: 5px; margin-top: 6px; }
.hud-pips i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--phos-dark); }
.hud-pips i.on { background: var(--phos); border-color: var(--phos); box-shadow: 0 0 6px var(--phos); }
.hud-btn { font: inherit; font-size: 11.5px; color: var(--phos-2); background: none; border: 0; border-right: 1px solid var(--rule); padding: 9px 12px; cursor: pointer; white-space: nowrap; }
.hud-btn:last-child { border-right: 0; }
.hud-btn:hover { color: var(--glow); background: rgba(143,245,210,.06); }
.hud-btn kbd { font: inherit; border: 1px solid var(--rule-2); border-radius: 4px; padding: 0 5px; color: var(--signal); }
.hud-btn.pop { animation: pop .6s ease; }
@keyframes pop { 30% { color: var(--glow); background: rgba(143,245,210,.16); } }
@media (max-width: 700px) {
  .hud { left: 8px; right: 8px; bottom: 8px; width: auto; grid-template-columns: 1fr 1fr auto auto; }
  .hud-cell { grid-column: auto; min-width: 0; padding: 7px 10px 8px; border-bottom: 0; border-right: 1px solid var(--rule); }
  .hud-lvl { display: none; }
  .hud-s { display: none; }
  .hud-con span, .hud-con { font-size: 0; } .hud-con kbd { font-size: 12px; }
  .hud-btn { padding: 0 10px; }
}
@media (prefers-contrast: more) { .hud { background: #000; } }
@media print { .hud, .con, .toasts, .net { display: none !important; } }

/* Console: drops from the top, Quake style */
.con { position: fixed; left: 0; right: 0; top: 0; z-index: 70; height: min(46vh, 420px); display: flex; flex-direction: column;
  background: rgba(2, 6, 8, .96); border-bottom: 1px solid var(--phos-dark); box-shadow: 0 30px 80px rgba(0,0,0,.7); font-size: 14px;
  transform: translateY(-102%); transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.con.open { transform: none; }
.con[hidden] { display: none; }
html.calm .con { transition: none; }
.con-bar { display: flex; justify-content: space-between; gap: 12px; padding: 8px 16px; font-size: 11px; letter-spacing: .24em; color: var(--phos-dark); border-bottom: 1px solid var(--rule); }
.con-bar span:last-child { letter-spacing: .06em; }
.con-out { flex: 1; overflow-y: auto; padding: 12px 16px; line-height: 1.6; scrollbar-width: thin; scrollbar-color: var(--phos-dark) transparent; }
.con-out p, .final-log p { white-space: pre-wrap; word-break: break-word; }
.con-out .cmd { color: var(--glow); } .con-out .cmd b { color: var(--signal); font-weight: 400; }
.con-out .out { color: var(--phos-2); } .con-out .dim { color: var(--phos-3); } .con-out .ok { color: var(--phos); }
.con-out .iris, .term-out .iris { color: var(--iris); font-style: italic; }
.con-out .sentinel, .final-log .sentinel { color: var(--alert); font-style: italic; }
.final-log .iris { color: var(--iris); font-style: italic; }
.con-out .err { color: var(--alert); }
.term-out .ok { color: var(--phos); }
.con-in { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--rule); }
.con-in label { color: var(--signal); white-space: nowrap; }
.con-in input { flex: 1; min-width: 0; font: inherit; color: var(--glow); background: none; border: 0; outline: none; caret-color: var(--iris); }

/* Achievements */
.toasts { position: fixed; top: 76px; right: 16px; z-index: 65; display: grid; gap: 10px; pointer-events: none; }
.toast { min-width: 260px; max-width: 340px; padding: 12px 16px 13px; border: 1px solid var(--rule-2); border-left: 3px solid var(--phos); border-radius: 8px;
  background: rgba(4, 9, 12, .94); box-shadow: 0 20px 50px -20px rgba(0,0,0,.9), 0 0 30px -10px rgba(143,245,210,.4); font-size: 13px;
  animation: toast-in .5s cubic-bezier(.2,.8,.2,1) both; }
.toast.out { animation: toast-out .4s ease both; }
.toast-k { font-size: 10px; letter-spacing: .3em; color: var(--phos); }
.toast-k::before { content: '◆ '; }
.toast-t { margin-top: 4px; color: var(--glow); font-weight: 800; font-size: 15px; }
.toast-d { color: var(--phos-3); }
.toast.sentinel { border-left-color: var(--alert); box-shadow: 0 20px 50px -20px rgba(0,0,0,.9), 0 0 30px -10px rgba(255,77,94,.5); }
.toast.sentinel .toast-t { color: var(--alert); font-style: italic; font-weight: 700; font-size: 13px; letter-spacing: .02em; }
@keyframes toast-in { from { opacity: 0; transform: translateX(30px); filter: blur(4px); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(30px); } }
html.calm .toast, html.calm .toast.out { animation: none; }
@media (max-width: 700px) { .toasts { left: 8px; right: 8px; top: 68px; } .toast { min-width: 0; max-width: none; } }

/* Whole-screen glitch, for SENTINEL. Short and rare. */
html.js:not(.calm) body.tear main { animation: page-tear .42s steps(1) 1; }
@keyframes page-tear {
  0% { transform: translateX(-8px); filter: drop-shadow(4px 0 rgba(255,77,94,.6)) drop-shadow(-4px 0 rgba(92,207,230,.6)); }
  25% { transform: translateX(6px); clip-path: inset(10% 0 60% 0); }
  50% { transform: translateX(-3px); clip-path: none; filter: drop-shadow(2px 0 rgba(255,77,94,.5)); }
  75%, 100% { transform: none; filter: none; }
}

/* Pillars: tmux panes. Hovering "purge" shows what forgetting does. */
.pillar { position: relative; padding-top: 0; }
.pillar-bar { display: flex; align-items: center; gap: 6px; margin: 0 -26px 22px; padding: 9px 14px; border-bottom: 1px solid var(--rule); font-size: 10.5px; color: var(--phos-dark); letter-spacing: .12em; }
.pillar-bar i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--phos-dark); }
.pillar-bar span { margin-left: auto; }
.pillar:hover .pillar-bar i:first-child { background: var(--phos); border-color: var(--phos); }
.pillar code::after { content: '▌'; margin-left: 3px; opacity: 0; }
.pillar:hover code::after { opacity: 1; animation: blink 1s steps(2) infinite; }
.pillar .dec { color: var(--faded); }

/* "A tela é você": the dots follow the page's own level */
.levels li { opacity: .12 !important; box-shadow: none !important; transition: opacity .6s, box-shadow .6s; }
.levels li.on { opacity: 1 !important; box-shadow: 0 0 10px var(--phos) !important; }
html:not(.js) .levels li { opacity: 1 !important; }

/* Chapters: the line fills as the Friday goes */
.chapters::after { content: ''; position: absolute; left: 0; top: 34px; height: 2px; width: calc(var(--p, 0) * 100%); margin-top: -.5px;
  background: linear-gradient(90deg, var(--phos), var(--iris)); box-shadow: 0 0 12px var(--phos); transition: width .2s linear; }
@media (max-width: 900px) { .chapters::after { left: 4.5px; top: 6px; width: 2px; height: calc(var(--p, 0) * (100% - 12px)); background: linear-gradient(180deg, var(--phos), var(--iris)); } }
html:not(.js) .chapters::after { display: none; }

/* The screenshot: a CRT turning on */
html.js:not(.calm) .monitor img { transform: scaleY(.006); filter: brightness(4); opacity: 0; }
html.js:not(.calm) .monitor.on img { animation: crt-on .9s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes crt-on { 0% { transform: scale(.6, .006); filter: brightness(5); opacity: 1; } 40% { transform: scale(1, .006); filter: brightness(5); } 70% { transform: scale(1, 1.02); filter: brightness(1.6); } 100% { transform: none; filter: none; opacity: 1; } }

/* curl snippet in the price card */
.snip { margin-top: 18px; text-align: left; }
.snip p { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--phos-dark); margin-bottom: 6px; }
.snip-row { display: flex; align-items: stretch; border: 1px solid var(--rule); border-radius: 8px; background: rgba(0,0,0,.45); overflow: hidden; }
.snip code { flex: 1; min-width: 0; padding: 10px 12px; font-size: 12px; color: var(--phos-2); white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.snip-copy { font: inherit; font-size: 12px; color: var(--signal); background: none; border: 0; border-left: 1px solid var(--rule); padding: 0 14px; cursor: pointer; }
.snip-copy:hover { color: var(--glow); background: rgba(143,245,210,.06); }
.win .dl-mac-snip { display: none; }

/* 17:00: LETHE runs over the last section */
.final { position: relative; overflow: hidden; }
.final-run { display: inline-block; margin-bottom: 26px; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--alert); border: 1px solid rgba(255,77,94,.35); border-radius: 999px; padding: 6px 14px; opacity: 0; transition: opacity .4s; }
.final-run span { animation: blink 1s steps(2) infinite; }
.final.running .final-run { opacity: 1; }
.final-scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--alert); box-shadow: 0 0 24px 4px rgba(255,77,94,.6); opacity: 0; pointer-events: none; }
html:not(.calm) .final.running .final-scan { animation: scan 2.2s cubic-bezier(.5,0,.5,1) forwards; }
@keyframes scan { 0% { top: 0; opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.final-log { min-height: calc(2 * 1.6em); margin: -12px auto 28px; font-size: 15px; line-height: 1.6; max-width: 48ch; }
.final [data-erase] .dec { color: var(--faded); }
html:not(.js) .final-log { display: none; }
/* the curl line scrolls inside its box instead of widening the price column */
.price-grid > *, .hero-in > * { min-width: 0; }