:root {
  --bg1: #09141a;
  --bg2: #10252a;
  --accent: #63e6b3;
  --accent-2: #8ad1ff;
  --muted: rgba(246, 251, 255, .78);
  --panel: rgba(9, 25, 29, .84);
  --rule: rgba(99, 230, 179, .30);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; padding-top: 96px; color: #f6fbff; font-family: 'Manrope', sans-serif; background: radial-gradient(circle at 12% 10%, rgba(138,209,255,.14), transparent 31%), radial-gradient(circle at 88% 24%, rgba(99,230,179,.18), transparent 34%), linear-gradient(145deg, var(--bg1), var(--bg2)); }
.nav-bar { position: fixed; z-index: 100; top: 14px; right: 14px; left: 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: .65rem .9rem; border: 1px solid rgba(99,230,179,.42); border-radius: 14px; background: rgba(9,20,26,.88); box-shadow: 0 10px 28px rgba(0,0,0,.38); backdrop-filter: blur(10px); }
.nav-link { display: inline-flex; gap: .35rem; align-items: center; color: #f7fbff; font-weight: 700; text-decoration: none; }
.project-badge, .tag { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid rgba(99,230,179,.48); color: #eafff7; font-weight: 700; letter-spacing: .06em; }
.project-badge { padding: .35rem .7rem; border-radius: 10px; background: rgba(99,230,179,.14); text-transform: uppercase; }
.lang-switch a { display: inline-block; margin-left: .35rem; padding: .3rem .6rem; border: 1px solid rgba(99,230,179,.34); border-radius: 8px; color: var(--muted); font-weight: 600; text-decoration: none; }
.lang-switch a.active { border-color: rgba(99,230,179,.7); color: #fff; background: rgba(99,230,179,.18); }
header { max-width: 1220px; margin: 0 auto; padding: 1.5rem 1.25rem 0; }
.tag { padding: .35rem .75rem; border-color: rgba(255,255,255,.2); border-radius: 999px; color: var(--muted); font-weight: 600; }
h1, .section-title { font-family: 'Space Grotesk', sans-serif; letter-spacing: -.02em; }
h1 { max-width: 950px; margin: .65rem 0; font-size: clamp(2.3rem, 5vw, 3.6rem); line-height: 1.15; overflow-wrap: normal; hyphens: none; }
.experiment-id { color: var(--accent); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .52em; letter-spacing: .02em; white-space: nowrap; }
.lede { max-width: 900px; margin: 0; color: var(--muted); font-size: 1.08rem; line-height: 1.8; }
.layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 1.2rem; align-items: start; max-width: 1220px; margin: 1.8rem auto 3rem; padding: 0 1.25rem; }
.toc, .article-body { border: 1px solid var(--rule); border-radius: 16px; background: var(--panel); box-shadow: 0 14px 34px rgba(0,0,0,.28); }
.toc { position: sticky; top: 108px; padding: 1rem; }
.toc h3 { margin: 0 0 .65rem; color: var(--accent-2); font-size: .96rem; letter-spacing: .06em; text-transform: uppercase; }
.toc a { display: block; padding: .34rem 0; color: var(--muted); font-size: .94rem; line-height: 1.38; text-decoration: none; }
.toc a:hover { color: #fff; }
.content { display: grid; gap: 1rem; }
.article-body { padding: 1.5rem; }
.article-body + .article-body { position: relative; }
.article-body + .article-body::before { content: ''; position: absolute; top: -.56rem; left: 2rem; width: 54px; height: 1px; background: var(--rule); }
.section-title { margin: 0 0 .7rem; color: var(--accent-2); font-size: 1.42rem; }
.article-body p { margin: 0 0 .95rem; color: var(--muted); font-size: 1rem; line-height: 1.72; }
.article-body p:last-child { margin-bottom: 0; }
.experiment-image { padding: 0; overflow: hidden; }
.experiment-image img { display: block; width: 100%; height: auto; }
.experiment-image figcaption { padding: .75rem 1rem; color: var(--muted); font-size: .88rem; line-height: 1.5; }
.prompt { color: #fff !important; font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.2rem, 2.8vw, 1.8rem) !important; line-height: 1.42 !important; }
.fracture { margin: 1.35rem 0 !important; padding: .95rem 1rem; border-left: 3px solid var(--accent); color: #fff !important; font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.18rem, 2.4vw, 1.55rem) !important; font-weight: 600; line-height: 1.35 !important; }
.before-vote { border-color: rgba(99,230,179,.85); background: linear-gradient(135deg, rgba(99,230,179,.14), rgba(9,25,29,.94) 55%); }
.before-vote .section-title { color: var(--accent); font-size: clamp(1.65rem, 3vw, 2.2rem); }
.before-vote .sequence { margin-bottom: .25rem; color: #fff; font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.12rem, 2.3vw, 1.45rem); line-height: 1.42; }
.before-vote .sequence:last-child { color: var(--accent); }
.rule-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .75rem; margin-top: .85rem; }
.rule-card { padding: .9rem; border: 1px solid var(--rule); border-radius: 12px; background: rgba(138,209,255,.06); }
.rule-card h3 { margin: 0 0 .35rem; color: #f6fbff; font-size: 1rem; }
.rule-card p { margin: 0; font-size: .95rem; line-height: 1.6; }
.break-it { border-color: rgba(99,230,179,.75); background: linear-gradient(135deg, rgba(99,230,179,.12), rgba(138,209,255,.06)); }
.break-it .section-title { color: var(--accent); }
.break-question { margin: 0; color: #fff; font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.35rem, 3vw, 2rem); line-height: 1.35; }
footer { padding: 1rem 1rem 3rem; color: var(--muted); font-size: .95rem; text-align: center; }
@media (max-width: 1024px) { .layout { grid-template-columns: 1fr; } .toc { position: static; } }
@media (max-width: 768px) { body { padding-top: 88px; } .nav-bar { top: 10px; right: 10px; left: 10px; padding: .5rem .65rem; gap: .5rem; } .project-badge { font-size: .72rem; padding: .25rem .45rem; } .nav-link, .lang-switch a { font-size: .82rem; } .lang-switch a { margin-left: 0; padding: .3rem .5rem; } .lang-switch { display: flex; gap: .25rem; } .article-body { padding: 1.15rem; } .article-body + .article-body::before { left: 1.15rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }