/* brain-damaged.com — "the website that forgets what it looks like".
   One DOM, five skins (html[data-skin]) that the JS swaps during strobe seizures,
   plus short-lived effects (html.fx-*).
   Flash safety: JS spaces every full-screen change >= 340 ms apart (max 3 per second). */

/* ============ tokens (default skin: SEIZURE) ============ */
:root {
  --bg: #000;
  --fg: #fff;
  --muted: #8a8a8a;
  --acc: #ff0022;
  --acc-fg: #000;
  --line: #ffffff22;
  --card: transparent;
  --flash: #fff;
  --radius: 0px;
  --shadow: none;
  --display: "Anton", Impact, sans-serif;
  --body: "Inter", system-ui, sans-serif;
  --case: uppercase;
  --track: -.01em;
  --tilt: 0deg;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
@media (pointer: fine) { body, button, a, summary { cursor: none; } }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-weight: 400; margin: 0; }

/* ============ overlays ============ */
#strobe { position: fixed; inset: 0; z-index: 90; background: var(--flash); opacity: 0; pointer-events: none; }
#strobe.on { opacity: 1; }
#crt {
  position: fixed; inset: 0; z-index: 80; pointer-events: none; display: none;
  background: repeating-linear-gradient(0deg, #0000 0 2px, #0000006b 2px 4px);
}
html.fx-crt #crt, html[data-skin="terminal"] #crt { display: block; }

#cursor, .ghost {
  position: fixed; left: 0; top: 0; z-index: 101; pointer-events: none;
  width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
  background: #fff; mix-blend-mode: difference;
  transition: width .2s, height .2s, margin .2s;
}
#cursor.big { width: 70px; height: 70px; margin: -35px 0 0 -35px; }
.ghost { width: 14px; height: 14px; margin: -7px 0 0 -7px; opacity: .45; }
@media (pointer: coarse) { #cursor, .ghost { display: none; } }

/* ============ gate ============ */
#gate {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: #000; color: #fff; padding: 16px;
}
.gate-inner { max-width: 820px; width: 100%; text-align: center; }
.gate-big { font-family: "Anton", Impact, sans-serif; font-size: clamp(3.2rem, 13vw, 9rem); line-height: .9; margin: 0 0 .35em; }
.gate-big span { color: #ff0022; }
.gate-btn {
  font-family: "Anton", Impact, sans-serif; font-size: clamp(20px, 4vw, 30px); letter-spacing: .02em;
  background: #ff0022; color: #000; padding: 14px 34px;
  transition: transform .15s, background .15s;
}
.gate-btn:hover { background: #fff; transform: scale(1.06) rotate(-2deg); }

/* ============ base layout ============ */
#page { transform-origin: 50% 40vh; }
html.fx-mirror #page { transform: scaleX(-1); }
html.fx-flip #page { transform: rotate(180deg); }
html.fx-tilt #page { transform: rotate(-4deg) scale(.96); }
html.fx-rgb h1, html.fx-rgb h2, html.fx-rgb .iq-num { text-shadow: -5px 0 #ff0022, 5px 0 #00e5ff; }
html.fx-zoom #page { transform: scale(1.35); }

section, .nav, .foot { padding-left: clamp(16px, 4vw, 64px); padding-right: clamp(16px, 4vw, 64px); }

.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding-top: 20px; padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  position: relative; z-index: 2;
}
.logo { font-family: var(--display); font-size: 24px; text-transform: var(--case); letter-spacing: var(--track); display: inline-flex; }
.logo-dash { color: var(--acc); display: inline-block; animation: dent 2.4s steps(1) infinite; }
.logo-dmg { display: inline-block; transform: translateY(3px) rotate(4deg); }
@keyframes dent { 50% { transform: translateY(6px) rotate(70deg); } }
.links { display: flex; gap: 26px; font-size: 13px; letter-spacing: .14em; }
.links a:hover { color: var(--acc); }
.skin-label { margin: 0; font-family: "Space Mono", monospace; font-size: 12px; color: var(--muted); }
.skin-label b { color: var(--acc); }

.hero { position: relative; min-height: min(94vh, 980px); display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 48px; overflow: hidden; }
#particles { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-bottom { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; pointer-events: none; }
.hero-bottom > * { pointer-events: auto; }
h1 {
  font-family: var(--display); text-transform: var(--case); letter-spacing: var(--track);
  font-size: clamp(3rem, 9vw, 9.5rem); line-height: .92; max-width: 9em;
  transform: rotate(var(--tilt));
}
h1 span { white-space: nowrap; }
.hero-side { max-width: 420px; }
.sub { margin: 0 0 22px; font-size: 19px; }
.sub small { color: var(--muted); }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
  font-family: var(--display); text-transform: var(--case); letter-spacing: .02em;
  font-size: 22px; padding: 12px 26px;
  background: var(--acc); color: var(--acc-fg);
  border-radius: var(--radius); box-shadow: var(--shadow);
  transition: transform .15s;
}
.btn:hover { transform: scale(1.08) rotate(-2deg); }
.btn.alt { background: transparent; color: var(--fg); outline: 2px solid var(--fg); outline-offset: -2px; }
.btn.small { font-size: 16px; padding: 8px 18px; }

.ticker { overflow: hidden; white-space: nowrap; background: var(--acc); color: var(--acc-fg); padding: 10px 0; }
.ticker-track { display: inline-block; animation: tick 22s linear infinite; font-family: var(--display); font-size: 26px; text-transform: var(--case); }
@keyframes tick { to { transform: translateX(-50%); } }

.sec-title {
  font-family: var(--display); text-transform: var(--case); letter-spacing: var(--track);
  font-size: clamp(2.6rem, 7vw, 6.5rem); line-height: .95; margin-bottom: 36px;
}
.sec-title small { font-size: .3em; color: var(--acc); vertical-align: top; }
section { padding-top: 110px; }

.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--line); border: 2px solid var(--line); }
.feat { background: var(--bg); padding: 28px; border-radius: var(--radius); transition: background .2s, color .2s; }
.feat i { font-style: normal; font-size: 30px; display: block; margin-bottom: 18px; }
.feat h3 { font-family: var(--display); text-transform: var(--case); font-size: 34px; letter-spacing: var(--track); margin-bottom: 6px; }
.feat p { margin: 0; color: var(--muted); }
.feat:hover { background: var(--acc); color: var(--acc-fg); }
.feat:hover p { color: var(--acc-fg); }

.brainstats { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 40px; align-items: end; }
.mini { font-family: "Space Mono", monospace; font-size: 12px; letter-spacing: .1em; color: var(--muted); margin: 0 0 8px; }
.iq-num, .cells-num { font-family: var(--display); font-size: clamp(4rem, 12vw, 11rem); line-height: .85; margin: 0 0 16px; font-variant-numeric: tabular-nums; color: var(--acc); }
.bar { height: 46px; border: 2px solid var(--fg); border-radius: var(--radius); overflow: hidden; }
.bar-fill { height: 100%; width: 0; background: var(--acc); transition: width .25s; }
.bar-txt { font-family: "Space Mono", monospace; margin: 10px 0 0; }

.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
blockquote { margin: 0; padding: 26px 0; border-top: 2px solid var(--acc); }
blockquote p { font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1.05; margin: 0 0 12px; text-transform: var(--case); }
cite { font-style: normal; color: var(--muted); font-family: "Space Mono", monospace; font-size: 14px; }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.plan { border: 2px solid var(--line); padding: 30px; border-radius: var(--radius); box-shadow: var(--shadow); background: var(--card); position: relative; }
.plan.hot { border-color: var(--acc); }
.plan .tag { position: absolute; top: -14px; left: -60px; background: var(--acc); color: var(--acc-fg); margin: 0; padding: 2px 10px; font-size: 12px; font-weight: 800; transform: rotate(-8deg); }
.plan-name { font-family: "Space Mono", monospace; letter-spacing: .1em; color: var(--muted); margin: 0; }
.plan-price { font-family: var(--display); font-size: 56px; line-height: 1; margin: 10px 0; }
.plan p:not(.plan-name):not(.plan-price):not(.tag) { margin: 0 0 22px; }

.faq details { border-top: 1px solid var(--line); padding: 20px 0; max-width: 900px; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { font-family: var(--display); text-transform: var(--case); font-size: clamp(1.4rem, 3vw, 2.2rem); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: " +"; color: var(--acc); }
.faq details[open] summary::after { content: " –"; }
.faq details p { margin: 10px 0 0; color: var(--muted); font-size: 19px; }

.foot { padding-top: 120px; padding-bottom: 30px; }
.foot-big { font-family: var(--display); text-transform: var(--case); font-size: clamp(3rem, 11vw, 11rem); line-height: .85; margin: 0 0 40px; color: var(--acc); }
.foot-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; font-family: "Space Mono", monospace; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 18px; margin: 0; }
.foot-row button { color: var(--acc); text-decoration: underline; }

/* "forgetting": text of an element temporarily replaced by JS */
.forgot { opacity: .5; font-style: italic; }

/* ============ toasts ============ */
#toasts { position: fixed; right: 16px; bottom: 16px; z-index: 85; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; max-width: calc(100vw - 32px); }
.toast {
  background: var(--acc); color: var(--acc-fg); padding: 12px 18px; max-width: 340px;
  font-family: var(--display); text-transform: var(--case); font-size: 20px; line-height: 1.1;
  border-radius: var(--radius); box-shadow: var(--shadow);
  animation: pop .3s cubic-bezier(.3, 1.6, .5, 1);
}
@keyframes pop { from { transform: scale(0) rotate(-20deg); } }

/* ============ SKIN: CORPORATE ============ */
html[data-skin="corporate"] {
  --bg: #ffffff; --fg: #121212; --muted: #6b6b6b; --acc: #ff2d3d; --acc-fg: #fff;
  --line: #e9e9e9; --card: #fff; --flash: #ff2d3d;
  --radius: 18px; --shadow: 0 10px 40px -10px #0000002e;
  --display: "Inter", system-ui, sans-serif; --case: none; --track: -.045em;
}
html[data-skin="corporate"] h1, html[data-skin="corporate"] .sec-title, html[data-skin="corporate"] .feat h3,
html[data-skin="corporate"] .foot-big, html[data-skin="corporate"] .plan-price, html[data-skin="corporate"] .iq-num { font-weight: 800; }
html[data-skin="corporate"] h1 { background: linear-gradient(90deg, #121212, #ff2d3d); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-skin="corporate"] .feat-grid { background: none; border: 0; gap: 20px; }
html[data-skin="corporate"] .feat { box-shadow: var(--shadow); border: 1px solid var(--line); }
html[data-skin="corporate"] .btn { font-weight: 600; font-size: 17px; border-radius: 999px; padding: 14px 28px; }
html[data-skin="corporate"] .ticker { background: #121212; color: #fff; }
html[data-skin="corporate"] .ticker-track { font-weight: 600; font-size: 18px; }
html[data-skin="corporate"] blockquote { border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); }
html[data-skin="corporate"] .faq summary, html[data-skin="corporate"] blockquote p, html[data-skin="corporate"] .feat h3 { font-weight: 600; letter-spacing: -.02em; }

/* ============ SKIN: TERMINAL ============ */
html[data-skin="terminal"] {
  --bg: #050000; --fg: #ff2a2a; --muted: #a01818; --acc: #ff2a2a; --acc-fg: #050000;
  --line: #ff2a2a44; --flash: #ff2a2a;
  --display: "Space Mono", monospace; --body: "Space Mono", monospace; --case: lowercase; --track: -.04em;
}
html[data-skin="terminal"] body { text-shadow: 0 0 6px #ff2a2a88; font-size: 15px; }
html[data-skin="terminal"] h1, html[data-skin="terminal"] .sec-title, html[data-skin="terminal"] .foot-big { font-weight: 700; }
html[data-skin="terminal"] h1::before, html[data-skin="terminal"] .sec-title::before { content: "> "; color: var(--muted); }
html[data-skin="terminal"] h1 { font-size: clamp(2.4rem, 7vw, 7rem); }
html[data-skin="terminal"] .feat-grid { border-style: dashed; }
html[data-skin="terminal"] .feat i { filter: grayscale(1) brightness(.6) sepia(1) hue-rotate(-50deg) saturate(6); }
html[data-skin="terminal"] .plan, html[data-skin="terminal"] .bar { border-style: dashed; }
html[data-skin="terminal"] .btn::before { content: "["; } html[data-skin="terminal"] .btn::after { content: "]"; }
html[data-skin="terminal"] .ticker { border-top: 1px dashed var(--fg); border-bottom: 1px dashed var(--fg); background: none; color: var(--fg); }

/* ============ SKIN: CRAYON (made by a child, on paper) ============ */
html[data-skin="crayon"] {
  --bg: #fffdf3; --fg: #1d1d1d; --muted: #5d5d5d; --acc: #e3101e; --acc-fg: #fffdf3;
  --line: #1d1d1d; --flash: #e3101e;
  --radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  --display: "Gochi Hand", "Comic Sans MS", cursive; --body: "Gochi Hand", "Comic Sans MS", cursive;
  --case: none; --track: 0; --tilt: -3deg;
}
html[data-skin="crayon"] body {
  font-size: 21px;
  background-image: repeating-linear-gradient(0deg, #0000 0 31px, #8fb8ff55 31px 32px);
}
html[data-skin="crayon"] .feat-grid { background: none; border: 0; gap: 26px; }
html[data-skin="crayon"] .feat, html[data-skin="crayon"] .plan, html[data-skin="crayon"] blockquote { border: 3px solid var(--fg); border-radius: var(--radius); }
html[data-skin="crayon"] .feat:nth-child(odd) { transform: rotate(-2deg); }
html[data-skin="crayon"] .feat:nth-child(even) { transform: rotate(1.5deg); }
html[data-skin="crayon"] blockquote { padding: 22px; }
html[data-skin="crayon"] .sec-title { text-decoration: underline wavy var(--acc); text-underline-offset: 10px; }
html[data-skin="crayon"] .btn { border: 3px solid var(--fg); }
html[data-skin="crayon"] .ticker { background: #ffe14d; color: var(--fg); transform: rotate(-1.5deg); }

/* ============ SKIN: SWISS (strict red poster) ============ */
html[data-skin="swiss"] {
  --bg: #ff0022; --fg: #000; --muted: #4d0009; --acc: #000; --acc-fg: #ff0022;
  --line: #000; --flash: #000;
  --display: "Archivo Black", "Arial Black", sans-serif; --case: lowercase; --track: -.06em;
}
html[data-skin="swiss"] .nav, html[data-skin="swiss"] section { border-bottom: 3px solid #000; }
html[data-skin="swiss"] section { padding-bottom: 60px; }
html[data-skin="swiss"] h1 { font-size: clamp(3rem, 11vw, 12rem); line-height: .8; }
html[data-skin="swiss"] .feat-grid { background: #000; border-color: #000; }
html[data-skin="swiss"] .feat { counter-increment: f; }
html[data-skin="swiss"] .feat i { display: none; }
html[data-skin="swiss"] .feat::before { content: "0" counter(f); font-family: var(--display); font-size: 70px; line-height: 1; display: block; margin-bottom: 14px; }
html[data-skin="swiss"] .feat-grid { counter-reset: f; }

/* ============ SKIN: WINDOWS 95 ============ */
html[data-skin="win95"] {
  --bg: #008080; --fg: #000; --muted: #222; --acc: #000080; --acc-fg: #fff;
  --line: #808080; --card: #c0c0c0; --flash: #fff; --radius: 0;
  --shadow: inset -2px -2px #404040, inset 2px 2px #fff, inset -4px -4px #808080, inset 4px 4px #dfdfdf;
  --display: Tahoma, "MS Sans Serif", Verdana, sans-serif; --body: Tahoma, "MS Sans Serif", Verdana, sans-serif;
  --case: none; --track: 0;
}
html[data-skin="win95"] body { font-size: 15px; }
html[data-skin="win95"] .nav { background: #c0c0c0; box-shadow: var(--shadow); border: 0; }
html[data-skin="win95"] h1, html[data-skin="win95"] .sec-title, html[data-skin="win95"] .sub,
html[data-skin="win95"] .foot-big, html[data-skin="win95"] .iq-num, html[data-skin="win95"] .cells-num { color: #fff; font-weight: 700; text-shadow: 2px 2px 0 #000; }
html[data-skin="win95"] .sub small, html[data-skin="win95"] .mini, html[data-skin="win95"] cite, html[data-skin="win95"] .foot-row, html[data-skin="win95"] .bar-txt { color: #e0ffff; }
html[data-skin="win95"] .feat-grid { background: none; border: 0; gap: 18px; }
html[data-skin="win95"] .feat, html[data-skin="win95"] .plan, html[data-skin="win95"] blockquote, html[data-skin="win95"] .faq details {
  background: #c0c0c0; box-shadow: var(--shadow); border: 0; padding: 4px 4px 14px;
}
html[data-skin="win95"] .faq details { margin-bottom: 8px; padding: 6px 10px; }
html[data-skin="win95"] .faq summary { font-size: 17px; font-weight: 700; }
html[data-skin="win95"] .feat h3, html[data-skin="win95"] blockquote cite, html[data-skin="win95"] .plan-name {
  display: block; background: linear-gradient(90deg, #000080, #1084d0); color: #fff; padding: 3px 8px; font-size: 15px; font-weight: 700; text-shadow: none;
}
html[data-skin="win95"] .feat i, html[data-skin="win95"] .feat p, html[data-skin="win95"] blockquote p, html[data-skin="win95"] .plan > p:not(.plan-name):not(.tag) { padding: 0 10px; }
html[data-skin="win95"] .feat p, html[data-skin="win95"] .faq details p { color: #000; }
html[data-skin="win95"] blockquote p { font-size: 22px; font-weight: 700; margin-top: 14px; }
html[data-skin="win95"] blockquote { display: flex; flex-direction: column-reverse; }
html[data-skin="win95"] .plan .btn { margin-left: 10px; }
html[data-skin="win95"] .btn { background: #c0c0c0; color: #000; box-shadow: var(--shadow); font-size: 15px; padding: 8px 22px; }
html[data-skin="win95"] .btn.alt { outline: 0; }
html[data-skin="win95"] .bar { background: #fff; border: 0; box-shadow: inset 2px 2px #808080, inset -2px -2px #fff; }
html[data-skin="win95"] .bar-fill { background: repeating-linear-gradient(90deg, #000080 0 14px, #0000 14px 17px); }
html[data-skin="win95"] .ticker { background: #000080; color: #fff; }

/* ============ SKIN: VAPORWAVE ============ */
html[data-skin="vapor"] {
  --bg: #2b0040; --fg: #fff; --muted: #ffd3f5; --acc: #00fff0; --acc-fg: #2b0040;
  --line: #ffffff55; --card: #ffffff14; --flash: #ff6ad5; --radius: 0;
  --display: Georgia, "Times New Roman", serif; --body: Georgia, serif; --case: uppercase; --track: .14em;
}
html[data-skin="vapor"] body { background: linear-gradient(180deg, #1a0033 0%, #6b1e8f 40%, #ff6ad5 75%, #ffcf6a 100%) fixed; }
html[data-skin="vapor"] h1, html[data-skin="vapor"] .sec-title, html[data-skin="vapor"] .foot-big {
  font-style: italic; text-shadow: 3px 3px 0 #ff6ad5, 6px 6px 0 #00fff0;
}
html[data-skin="vapor"] h1 { font-size: clamp(2.2rem, 5.6vw, 5.8rem); }
html[data-skin="vapor"] .hero::after {
  content: ""; position: absolute; left: -50%; right: -50%; bottom: 0; height: 45%; pointer-events: none;
  background: linear-gradient(#ff6ad5 2px, #0000 2px) 0 0 / 100% 40px, linear-gradient(90deg, #ff6ad5 2px, #0000 2px) 0 0 / 60px 100%;
  transform: perspective(300px) rotateX(60deg); transform-origin: bottom; opacity: .55;
}
html[data-skin="vapor"] .hero-bottom { z-index: 1; }
html[data-skin="vapor"] .feat-grid { background: none; border: 0; gap: 16px; }
html[data-skin="vapor"] .feat, html[data-skin="vapor"] .plan, html[data-skin="vapor"] blockquote { background: var(--card); border: 1px solid #ffffff55; padding: 24px; backdrop-filter: blur(4px); }
html[data-skin="vapor"] .ticker { background: #00fff0; color: #2b0040; }

/* ============ SKIN: MICROSOFT WORD (every word is a typo) ============ */
html[data-skin="word"] {
  --bg: #fff; --fg: #000; --muted: #444; --acc: #0000ee; --acc-fg: #fff;
  --line: #d0d0d0; --flash: #2b579a; --radius: 0;
  --display: "Times New Roman", Times, serif; --body: "Times New Roman", Times, serif; --case: none; --track: 0;
}
html[data-skin="word"] body { background: #ababab; font-size: 18px; }
html[data-skin="word"] #page { background: #fff; max-width: 980px; margin: 36px auto; box-shadow: 0 0 12px #0006; }
html[data-skin="word"] .nav { background: #2b579a; color: #fff; }
html[data-skin="word"] .skin-label, html[data-skin="word"] .skin-label b { color: #fff; }
html[data-skin="word"] h1, html[data-skin="word"] .sec-title, html[data-skin="word"] .feat h3, html[data-skin="word"] blockquote p, html[data-skin="word"] .faq summary {
  font-weight: 700; text-decoration: underline wavy #ff0000; text-decoration-thickness: 2px; text-underline-offset: 6px;
}
html[data-skin="word"] h1 { font-size: clamp(2.4rem, 6vw, 5rem); }
html[data-skin="word"] .sec-title { font-size: clamp(2rem, 4vw, 3.4rem); }
html[data-skin="word"] .feat-grid { background: none; border: 0; gap: 0 30px; }
html[data-skin="word"] .feat { padding: 10px 0; }
html[data-skin="word"] .btn { background: #ece9d8; color: #000; border: 1px solid #003c74; border-radius: 3px; font-family: Tahoma, Verdana, sans-serif; font-size: 14px; padding: 6px 16px; }
html[data-skin="word"] .btn.alt { outline: 0; }
html[data-skin="word"] .ticker { background: #f3f3f3; color: #000; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; }
html[data-skin="word"] .ticker-track { font-style: italic; font-size: 20px; }
html[data-skin="word"] .iq-num, html[data-skin="word"] .cells-num, html[data-skin="word"] .foot-big { color: #000; }

/* ============ SKIN: NEWSPAPER ============ */
html[data-skin="newspaper"] {
  --bg: #f4efe1; --fg: #1b1b1b; --muted: #555; --acc: #1b1b1b; --acc-fg: #f4efe1;
  --line: #1b1b1b; --flash: #1b1b1b; --radius: 0;
  --display: "Playfair Display", Georgia, serif; --body: Georgia, "Times New Roman", serif; --case: none; --track: -.02em;
}
html[data-skin="newspaper"] .logo { font-family: "UnifrakturMaguntia", serif; font-size: 34px; }
html[data-skin="newspaper"] .nav { border-bottom: 5px double #1b1b1b; }
html[data-skin="newspaper"] h1, html[data-skin="newspaper"] .sec-title, html[data-skin="newspaper"] .foot-big, html[data-skin="newspaper"] .feat h3 { font-weight: 900; }
html[data-skin="newspaper"] section:not(.hero) { border-top: 5px double #1b1b1b; margin-top: 60px; padding-top: 50px; }
html[data-skin="newspaper"] .feat-grid { background: none; border: 0; gap: 0; }
html[data-skin="newspaper"] .feat { border-right: 1px solid #1b1b1b; padding: 10px 22px; }
html[data-skin="newspaper"] .feat i { display: none; }
html[data-skin="newspaper"] .feat p { text-align: justify; color: #1b1b1b; }
html[data-skin="newspaper"] blockquote p { font-style: italic; text-transform: none; }
html[data-skin="newspaper"] .ticker { background: #1b1b1b; color: #f4efe1; }
html[data-skin="newspaper"] .ticker-track { font-family: Georgia, serif; font-style: italic; font-size: 20px; }
html[data-skin="newspaper"] .hero { filter: grayscale(1); }

/* ============ SKIN: GEOCITIES 1998 ============ */
html[data-skin="geocities"] {
  --bg: #000033; --fg: #ffff00; --muted: #00ff00; --acc: #ff00ff; --acc-fg: #fff;
  --line: #00ffff; --flash: #ff00ff; --radius: 0;
  --display: "Comic Sans MS", "Comic Sans", "Chalkboard", cursive; --body: "Comic Sans MS", "Comic Sans", cursive; --case: none; --track: 0;
}
html[data-skin="geocities"] body {
  background: radial-gradient(#fff 1px, #0000 1.5px) 0 0 / 40px 40px, radial-gradient(#ff0 1px, #0000 1.5px) 20px 20px / 70px 70px, #000033;
}
html[data-skin="geocities"] h1, html[data-skin="geocities"] .foot-big {
  background: linear-gradient(90deg, red, orange, yellow, lime, cyan, blue, magenta); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700;
}
html[data-skin="geocities"] .sec-title { color: #00ffff; text-shadow: 3px 3px 0 #ff00ff; font-weight: 700; }
html[data-skin="geocities"] .sec-title small { animation: caret 1s steps(1) infinite; }
html[data-skin="geocities"] .links::after { content: "🚧 UNDER CONSTRUCTION 🚧"; color: #ff0; }
html[data-skin="geocities"] .feat-grid { background: none; border: 0; gap: 14px; }
html[data-skin="geocities"] .feat, html[data-skin="geocities"] .plan, html[data-skin="geocities"] blockquote { background: #000066; border: 4px ridge #c0c0c0; padding: 20px; }
html[data-skin="geocities"] .btn { background: #c0c0c0; color: #000; border: 3px outset #fff; font-size: 17px; }
html[data-skin="geocities"] .ticker { background: #000; color: #0f0; border: 3px ridge #c0c0c0; }

/* ============ SKIN: CSS FAILED TO LOAD ============ */
html[data-skin="unstyled"] {
  --bg: #fff; --fg: #000; --muted: #000; --acc: #0000ee; --acc-fg: #000;
  --line: #0000; --flash: #000; --radius: 0;
  --display: "Times New Roman", Times, serif; --body: "Times New Roman", Times, serif; --case: none; --track: 0;
}
html[data-skin="unstyled"] body { font-size: 16px; }
html[data-skin="unstyled"] h1 { font-size: 2em; font-weight: 700; max-width: none; }
html[data-skin="unstyled"] .sec-title { font-size: 1.5em; font-weight: 700; margin-bottom: .5em; }
html[data-skin="unstyled"] .feat h3, html[data-skin="unstyled"] .faq summary, html[data-skin="unstyled"] blockquote p { font-size: 1.17em; font-weight: 700; }
html[data-skin="unstyled"] .logo { font-size: 16px; color: #0000ee; text-decoration: underline; }
html[data-skin="unstyled"] .links a { color: #0000ee; text-decoration: underline; letter-spacing: 0; }
html[data-skin="unstyled"] section { padding-top: 24px; }
html[data-skin="unstyled"] .hero { min-height: 60vh; }
html[data-skin="unstyled"] .feat-grid, html[data-skin="unstyled"] .quote-grid, html[data-skin="unstyled"] .plans, html[data-skin="unstyled"] .brainstats { display: block; background: none; border: 0; }
html[data-skin="unstyled"] .feat, html[data-skin="unstyled"] .plan, html[data-skin="unstyled"] blockquote { padding: 0; margin: 0 0 1em; border: 0; }
html[data-skin="unstyled"] .feat:hover { background: none; color: inherit; }
html[data-skin="unstyled"] .feat p, html[data-skin="unstyled"] .mini, html[data-skin="unstyled"] cite { color: #000; }
html[data-skin="unstyled"] .btn { background: #efefef; color: #000; border: 1px solid #767676; border-radius: 3px; font: 13px Arial, sans-serif; padding: 2px 8px; }
html[data-skin="unstyled"] .btn.alt { outline: 0; }
html[data-skin="unstyled"] .ticker { background: none; color: #000; }
html[data-skin="unstyled"] .ticker-track { font-size: 16px; }
html[data-skin="unstyled"] .iq-num, html[data-skin="unstyled"] .cells-num, html[data-skin="unstyled"] .foot-big { font-size: 2em; color: #000; font-weight: 700; }
html[data-skin="unstyled"] .bar { border: 1px solid #000; height: 16px; }
html[data-skin="unstyled"] .nav { border: 0; }

/* ============ SKIN: LUXURY ============ */
html[data-skin="luxury"] {
  --bg: #0b0b0b; --fg: #e9dcc0; --muted: #8c7f66; --acc: #c9a54c; --acc-fg: #0b0b0b;
  --line: #c9a54c33; --flash: #c9a54c; --radius: 0;
  --display: "Cormorant Garamond", Georgia, serif; --body: "Cormorant Garamond", Georgia, serif; --case: uppercase; --track: .16em;
}
html[data-skin="luxury"] body { font-size: 19px; }
html[data-skin="luxury"] h1 { font-weight: 300; font-size: clamp(2.2rem, 5.4vw, 5.6rem); line-height: 1.05; }
html[data-skin="luxury"] .sec-title, html[data-skin="luxury"] .foot-big { font-weight: 300; text-align: center; }
html[data-skin="luxury"] .feat-grid { background: none; border: 0; gap: 0; }
html[data-skin="luxury"] .feat { text-align: center; border-top: 1px solid var(--line); padding: 40px 24px; }
html[data-skin="luxury"] .feat h3 { font-weight: 300; font-size: 26px; }
html[data-skin="luxury"] .btn { background: transparent; color: var(--acc); border: 1px solid var(--acc); font-size: 14px; letter-spacing: .3em; padding: 14px 30px; }
html[data-skin="luxury"] .btn.alt { outline: 0; border-color: var(--line); color: var(--fg); }
html[data-skin="luxury"] .ticker { background: none; color: var(--acc); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
html[data-skin="luxury"] .ticker-track { font-size: 18px; letter-spacing: .3em; font-weight: 300; }

/* ============ SKIN: NEON / CYBER ============ */
html[data-skin="neon"] {
  --bg: #07001a; --fg: #fff; --muted: #a59bd6; --acc: #ff2bd6; --acc-fg: #07001a;
  --line: #00f0ff55; --flash: #00f0ff; --radius: 6px;
  --display: "Orbitron", "Arial Black", sans-serif; --case: uppercase; --track: .03em;
}
html[data-skin="neon"] h1 { font-weight: 900; font-size: clamp(2.2rem, 6vw, 6rem); text-shadow: 0 0 10px #ff2bd6, 0 0 40px #ff2bd6; }
html[data-skin="neon"] .sec-title, html[data-skin="neon"] .foot-big { font-weight: 900; color: #00f0ff; text-shadow: 0 0 14px #00f0ff; }
html[data-skin="neon"] .iq-num, html[data-skin="neon"] .cells-num { text-shadow: 0 0 20px #ff2bd6; }
html[data-skin="neon"] .feat-grid { background: none; border: 0; gap: 14px; }
html[data-skin="neon"] .feat, html[data-skin="neon"] .plan { border: 1px solid #00f0ff66; box-shadow: inset 0 0 24px #00f0ff22, 0 0 18px #00f0ff22; }
html[data-skin="neon"] .feat h3 { font-weight: 700; font-size: 24px; }
html[data-skin="neon"] .btn { box-shadow: 0 0 24px #ff2bd6; font-size: 16px; font-weight: 700; }
html[data-skin="neon"] .ticker { box-shadow: 0 0 30px #ff2bd6; }
html[data-skin="neon"] .ticker-track { font-size: 20px; font-weight: 700; }

/* ============ SKIN: BLUEPRINT ============ */
html[data-skin="blueprint"] {
  --bg: #0b3d91; --fg: #fff; --muted: #b9d1ff; --acc: #fff; --acc-fg: #0b3d91;
  --line: #ffffff88; --flash: #fff; --radius: 0;
  --display: "Space Mono", monospace; --body: "Space Mono", monospace; --case: uppercase; --track: .02em;
}
html[data-skin="blueprint"] body {
  font-size: 15px;
  background:
    linear-gradient(#ffffff33 1px, #0000 1px) 0 0 / 120px 120px,
    linear-gradient(90deg, #ffffff33 1px, #0000 1px) 0 0 / 120px 120px,
    linear-gradient(#ffffff14 1px, #0000 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, #ffffff14 1px, #0000 1px) 0 0 / 24px 24px,
    #0b3d91;
}
html[data-skin="blueprint"] h1, html[data-skin="blueprint"] .sec-title, html[data-skin="blueprint"] .foot-big { font-weight: 700; }
html[data-skin="blueprint"] h1 { font-size: clamp(2.2rem, 6vw, 6rem); }
html[data-skin="blueprint"] .sec-title::after { content: " [FIG. 1]"; font-size: .3em; color: var(--muted); }
html[data-skin="blueprint"] .feat-grid { background: none; border: 0; gap: 18px; }
html[data-skin="blueprint"] .feat, html[data-skin="blueprint"] .plan, html[data-skin="blueprint"] blockquote { background: none; border: 1px dashed #fff; padding: 22px; }
html[data-skin="blueprint"] .feat h3 { font-weight: 700; font-size: 22px; }
html[data-skin="blueprint"] .btn { background: none; color: #fff; outline: 2px solid #fff; outline-offset: -2px; font-size: 15px; }
html[data-skin="blueprint"] .ticker { background: none; color: #fff; border-top: 1px dashed #fff; border-bottom: 1px dashed #fff; }
html[data-skin="blueprint"] .ticker-track { font-size: 16px; }

/* ============ SKIN: SPREADSHEET ============ */
html[data-skin="excel"] {
  --bg: #fff; --fg: #000; --muted: #555; --acc: #217346; --acc-fg: #fff;
  --line: #d4d4d4; --flash: #217346; --radius: 0;
  --display: Calibri, Carlito, "Segoe UI", Arial, sans-serif; --body: Calibri, Carlito, "Segoe UI", Arial, sans-serif; --case: none; --track: 0;
}
html[data-skin="excel"] body {
  background: linear-gradient(#d4d4d4 1px, #0000 1px) 0 0 / 100% 22px, linear-gradient(90deg, #d4d4d4 1px, #0000 1px) 0 0 / 80px 100%, #fff;
  font-size: 15px;
}
html[data-skin="excel"] .nav { background: #217346; color: #fff; border: 0; }
html[data-skin="excel"] .skin-label, html[data-skin="excel"] .skin-label b { color: #fff; }
html[data-skin="excel"] h1, html[data-skin="excel"] .sec-title, html[data-skin="excel"] .foot-big { font-weight: 700; }
html[data-skin="excel"] h1 { font-size: clamp(2.2rem, 5.5vw, 5.2rem); }
html[data-skin="excel"] .sec-title { font-size: clamp(1.8rem, 3.6vw, 3rem); }
html[data-skin="excel"] .sec-title::before { content: "fx  ="; color: #217346; font-style: italic; margin-right: .3em; }
html[data-skin="excel"] .feat-grid { background: #d4d4d4; border: 2px solid #217346; gap: 1px; }
html[data-skin="excel"] .feat { padding: 10px 12px; }
html[data-skin="excel"] .feat i { display: none; }
html[data-skin="excel"] .feat h3 { font-size: 18px; font-weight: 700; }
html[data-skin="excel"] .btn { font-size: 15px; font-weight: 600; padding: 6px 16px; border-radius: 2px; }
html[data-skin="excel"] .ticker { background: #f3f3f3; color: #c00; border-top: 1px solid #d4d4d4; border-bottom: 1px solid #d4d4d4; }
html[data-skin="excel"] .ticker-track { font-family: Consolas, "Space Mono", monospace; font-size: 15px; }
html[data-skin="excel"] .ticker-track::before { content: "#DIV/0!  "; }
html[data-skin="excel"] .iq-num { color: #c00; }

/* ============ SKIN: RECEIPT ============ */
html[data-skin="receipt"] {
  --bg: #fbfbf7; --fg: #222; --muted: #666; --acc: #222; --acc-fg: #fbfbf7;
  --line: #222; --flash: #222; --radius: 0;
  --display: "Space Mono", monospace; --body: "Space Mono", monospace; --case: uppercase; --track: 0;
}
html[data-skin="receipt"] body { background: #d9d6cf; font-size: 14px; }
html[data-skin="receipt"] #page { max-width: 440px; margin: 30px auto; background: #fbfbf7; box-shadow: 0 10px 30px #0003; }
html[data-skin="receipt"] .links { display: none; }
html[data-skin="receipt"] .nav { flex-direction: column; text-align: center; border-bottom: 2px dashed #222; }
html[data-skin="receipt"] .hero { min-height: 60vh; }
html[data-skin="receipt"] .hero-bottom { flex-direction: column; align-items: center; text-align: center; }
html[data-skin="receipt"] h1 { font-size: 2rem; font-weight: 700; }
html[data-skin="receipt"] section { border-top: 2px dashed #222; padding-top: 30px; margin-top: 30px; }
html[data-skin="receipt"] .sec-title { font-size: 1.4rem; text-align: center; font-weight: 700; }
html[data-skin="receipt"] .feat-grid, html[data-skin="receipt"] .quote-grid, html[data-skin="receipt"] .plans, html[data-skin="receipt"] .brainstats { grid-template-columns: 1fr; background: none; border: 0; gap: 10px; }
html[data-skin="receipt"] .feat { padding: 4px 0; display: grid; grid-template-columns: 1fr auto; }
html[data-skin="receipt"] .feat i { display: none; }
html[data-skin="receipt"] .feat h3 { font-size: 15px; font-weight: 700; }
html[data-skin="receipt"] .feat h3::after { content: " ...... 0.00"; }
html[data-skin="receipt"] .feat p { grid-column: 1 / -1; font-size: 12px; }
html[data-skin="receipt"] blockquote p { font-size: 15px; }
html[data-skin="receipt"] .plan { border: 1px dashed #222; padding: 14px; }
html[data-skin="receipt"] .plan .tag { left: 10px; }
html[data-skin="receipt"] .plan-price { font-size: 28px; }
html[data-skin="receipt"] .iq-num, html[data-skin="receipt"] .cells-num { font-size: 3.4rem; }
html[data-skin="receipt"] .faq summary { font-size: 15px; }
html[data-skin="receipt"] .foot-big { font-size: 1.6rem; text-align: center; }
html[data-skin="receipt"] .foot-big::after { content: "\A ||| |||| | || ||||| | |||"; white-space: pre; display: block; font-size: 2rem; letter-spacing: -.1em; margin-top: 10px; }
html[data-skin="receipt"] .btn { font-size: 14px; padding: 6px 14px; }
html[data-skin="receipt"] .ticker-track { font-size: 15px; }

/* ============ SKIN: GAME BOY ============ */
html[data-skin="gameboy"] {
  --bg: #9bbc0f; --fg: #0f380f; --muted: #306230; --acc: #0f380f; --acc-fg: #9bbc0f;
  --line: #306230; --flash: #0f380f; --radius: 0; --shadow: 4px 4px 0 #306230;
  --display: "Press Start 2P", monospace; --body: "Press Start 2P", monospace; --case: uppercase; --track: 0;
}
html[data-skin="gameboy"] body { font-size: 11px; line-height: 1.9; }
html[data-skin="gameboy"] .logo { font-size: 14px; }
html[data-skin="gameboy"] .links { font-size: 10px; }
html[data-skin="gameboy"] h1 { font-size: clamp(1.5rem, 4.2vw, 3.8rem); line-height: 1.25; }
html[data-skin="gameboy"] .sec-title { font-size: clamp(1.3rem, 3.2vw, 2.8rem); line-height: 1.3; }
html[data-skin="gameboy"] .sub { font-size: 12px; }
html[data-skin="gameboy"] .feat-grid { background: none; border: 0; gap: 16px; }
html[data-skin="gameboy"] .feat, html[data-skin="gameboy"] .plan, html[data-skin="gameboy"] blockquote { border: 4px solid #0f380f; padding: 18px; box-shadow: var(--shadow); }
html[data-skin="gameboy"] .feat h3 { font-size: 15px; }
html[data-skin="gameboy"] .feat i { filter: grayscale(1) contrast(2); }
html[data-skin="gameboy"] blockquote p { font-size: 14px; line-height: 1.6; }
html[data-skin="gameboy"] .faq summary { font-size: 13px; }
html[data-skin="gameboy"] .faq details p { font-size: 11px; }
html[data-skin="gameboy"] .iq-num, html[data-skin="gameboy"] .cells-num { font-size: clamp(2.4rem, 6vw, 5rem); }
html[data-skin="gameboy"] .plan-price { font-size: 24px; }
html[data-skin="gameboy"] .btn { font-size: 12px; padding: 12px 18px; }
html[data-skin="gameboy"] .ticker-track { font-size: 14px; }
html[data-skin="gameboy"] .foot-big { font-size: clamp(1.5rem, 4.6vw, 4.4rem); line-height: 1.2; }
html[data-skin="gameboy"] #page { image-rendering: pixelated; }

/* ============ SKIN: BUBBLEGUM ============ */
html[data-skin="bubblegum"] {
  --bg: #ffd6ec; --fg: #5b1a4a; --muted: #a0527f; --acc: #ff4fa3; --acc-fg: #fff;
  --line: #ff4fa355; --card: #fff; --flash: #ff4fa3; --radius: 32px; --shadow: 0 8px 0 #e23d8c;
  --display: "Fredoka", "Arial Rounded MT Bold", sans-serif; --body: "Fredoka", sans-serif; --case: none; --track: -.01em;
}
html[data-skin="bubblegum"] body { background: radial-gradient(#fff 3px, #0000 3.5px) 0 0 / 34px 34px, #ffd6ec; }
html[data-skin="bubblegum"] h1, html[data-skin="bubblegum"] .sec-title, html[data-skin="bubblegum"] .foot-big { font-weight: 700; color: #ff4fa3; text-shadow: 4px 4px 0 #fff, 7px 7px 0 #5b1a4a22; }
html[data-skin="bubblegum"] .feat-grid { background: none; border: 0; gap: 20px; }
html[data-skin="bubblegum"] .feat, html[data-skin="bubblegum"] .plan, html[data-skin="bubblegum"] blockquote { background: #fff; border: 0; box-shadow: var(--shadow); padding: 26px; transition: transform .25s cubic-bezier(.3, 1.8, .5, 1); }
html[data-skin="bubblegum"] .feat:hover { transform: rotate(-3deg) scale(1.04); }
html[data-skin="bubblegum"] .feat h3 { font-weight: 700; }
html[data-skin="bubblegum"] .btn { font-weight: 700; border-radius: 999px; font-size: 19px; }
html[data-skin="bubblegum"] .ticker { background: #8fe3ff; color: #5b1a4a; }
html[data-skin="bubblegum"] .ticker-track { font-weight: 700; }

/* ============ SKIN: HAZARD ============ */
html[data-skin="hazard"] {
  --bg: #ffd000; --fg: #111; --muted: #3a3000; --acc: #111; --acc-fg: #ffd000;
  --line: #111; --flash: #111; --radius: 0;
  --display: "Anton", Impact, sans-serif; --body: "Archivo Black", "Arial Black", sans-serif; --case: uppercase; --track: 0;
}
html[data-skin="hazard"] body { font-size: 15px; }
html[data-skin="hazard"] .nav { background: #111; color: #ffd000; }
html[data-skin="hazard"] .skin-label, html[data-skin="hazard"] .skin-label b { color: #ffd000; }
html[data-skin="hazard"] h1 { font-size: clamp(3.2rem, 10vw, 10rem); }
html[data-skin="hazard"] .ticker { border-top: 18px solid; border-bottom: 18px solid; border-image: repeating-linear-gradient(45deg, #111 0 20px, #ffd000 20px 40px) 18; }
html[data-skin="hazard"] .feat-grid { background: #111; border: 4px solid #111; gap: 4px; }
html[data-skin="hazard"] .feat::before { content: "⚠"; font-size: 30px; display: block; }
html[data-skin="hazard"] .feat i { display: none; }
html[data-skin="hazard"] .feat p { color: #111; }
html[data-skin="hazard"] .plan, html[data-skin="hazard"] blockquote { border: 4px solid #111; padding: 22px; }
html[data-skin="hazard"] .sec-title::before { content: "⚠ "; }

/* ============ SKIN: TABLOID ============ */
html[data-skin="tabloid"] {
  --bg: #fff; --fg: #000; --muted: #333; --acc: #e10600; --acc-fg: #fff;
  --line: #000; --flash: #e10600; --radius: 0;
  --display: "Anton", Impact, sans-serif; --case: uppercase; --track: 0;
}
html[data-skin="tabloid"] .logo { background: #e10600; color: #fff; padding: 2px 10px; }
html[data-skin="tabloid"] .logo-dash { color: #fff; }
html[data-skin="tabloid"] h1 { transform: rotate(-2deg); margin-bottom: 34px; line-height: 1.08; }
html[data-skin="tabloid"] h1 span { background: #e10600; color: #fff; padding: 0 .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
html[data-skin="tabloid"] .sec-title { color: #e10600; text-shadow: 4px 4px 0 #ffe600; }
html[data-skin="tabloid"] .sec-title::before { content: "SHOCKING: "; color: #000; text-shadow: none; }
html[data-skin="tabloid"] .feat h3 { display: inline; background: #ffe600; padding: 0 6px; }
html[data-skin="tabloid"] .feat p { margin-top: 8px; color: #000; font-weight: 600; }
html[data-skin="tabloid"] .feat-grid { background: #000; border: 3px solid #000; gap: 3px; }
html[data-skin="tabloid"] blockquote p::before { content: "EXCLUSIVE: "; color: #e10600; }
html[data-skin="tabloid"] .ticker { background: #ffe600; color: #000; }
html[data-skin="tabloid"] .iq-num::after { content: "!!"; }

/* ============ calm mode: skins fade instead of snapping ============ */
html.calm body, html.calm .feat, html.calm .ticker { transition: background-color 1.2s, color 1.2s; }

/* ============ responsive ============ */
@media (max-width: 900px) {
  .links { display: none; }
  .feat-grid, .quote-grid, .plans { grid-template-columns: 1fr; }
  .brainstats { grid-template-columns: 1fr; gap: 50px; }
  .plan .tag { left: 10px; }
  h1 span { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track, .logo-dash { animation: none; }
}