:root {
  --bg: #050607;
  --panel: rgba(9, 11, 12, 0.84);
  --panel-solid: #0a0c0d;
  --text: #d7d7d7;
  --muted: #777b7e;
  --line: rgba(255,255,255,.16);
  --line-strong: rgba(255,255,255,.3);
  --red: #ff1b1b;
  --red-dark: #8b0000;
  --white: #f4f4f2;
  --mono: "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; color: var(--text); background: var(--bg); font-family: var(--mono); overflow-x: hidden; cursor: crosshair; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
::selection { background: var(--red); color: #fff; }

.noise, .scanlines { position: fixed; inset: 0; pointer-events: none; z-index: 80; }
.noise { opacity: .055; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); mix-blend-mode: screen; }
.scanlines { opacity: .07; background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(255,255,255,.14) 4px); }
.cursor-dot { width: 18px; height: 18px; border: 1px solid rgba(255,255,255,.55); position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; transform: translate(-50%,-50%); transition: width .15s ease, height .15s ease, border-color .15s ease; }
.cursor-dot.is-hover { width: 38px; height: 38px; border-color: var(--red); }

.boot { position: fixed; inset: 0; background: #020303; z-index: 999; display: grid; place-items: center; transition: opacity .55s ease, visibility .55s ease; }
.boot.is-done { opacity: 0; visibility: hidden; }
.boot__box { width: min(520px, 70vw); }
.boot__line { display:flex; justify-content:space-between; align-items:end; font-size: 13px; color: #6c7072; margin-bottom:10px; }
.boot__line b { color: var(--red); font-size: 46px; line-height:1; }
.boot__bar { height: 6px; border: 1px solid #2e3335; padding:1px; }
.boot__bar i { display:block; height:100%; width:0; background: var(--red); animation: bootbar 1.25s steps(9,end) forwards; }
.boot p { font-size: 12px; color:#6d7174; letter-spacing:.08em; }
@keyframes bootbar { to { width: 100%; } }

.topbar { position: fixed; z-index: 60; left:0; right:0; top:0; height:72px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 46px; border-bottom:1px solid rgba(255,255,255,.09); background:linear-gradient(to bottom, rgba(2,3,3,.88), rgba(2,3,3,.24)); backdrop-filter: blur(8px); }
.brand { justify-self:start; font-size:16px; letter-spacing:.08em; }
.brand::first-letter { color: var(--white); }
.nav { display:flex; gap:34px; color:#85898b; font-size:12px; }
.nav a { position:relative; transition:color .2s ease; }
.nav a:hover { color:var(--white); }
.nav a::after { content:""; position:absolute; left:0; right:100%; bottom:-8px; height:1px; background:var(--red); transition:right .2s ease; }
.nav a:hover::after { right:0; }
.status { justify-self:end; font-size:11px; color:#777b7d; display:flex; gap:9px; align-items:center; }
.status__dot { width:6px; height:6px; background:var(--red); box-shadow:0 0 10px var(--red); animation:blink 1.1s steps(2,end) infinite; }
@keyframes blink { 50% { opacity:.15; } }

.hero { min-height: 1080px; height: 100vh; min-height: 860px; position:relative; display:grid; grid-template-columns: 1fr 1.45fr .86fr; gap:18px; padding:110px 46px 92px; align-items:center; overflow:hidden; isolation:isolate; }
.hero__bg { position:absolute; inset:-4%; z-index:-5; background:url('../assets/images/error404-hero.png') center/cover no-repeat; filter:brightness(.28) saturate(.55) contrast(1.18); transform:scale(1.12); }
.hero__bg::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(3,4,4,.96) 0%, rgba(3,4,4,.55) 30%, rgba(3,4,4,.25) 50%, rgba(3,4,4,.62) 72%, rgba(3,4,4,.96) 100%); }
.hero__vignette { position:absolute; inset:0; z-index:-4; background:radial-gradient(circle at 50% 45%, transparent 0 27%, rgba(0,0,0,.28) 54%, rgba(0,0,0,.82) 100%); }
.hero__grid { position:absolute; inset:0; z-index:-3; opacity:.14; background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:64px 64px; mask-image:linear-gradient(to bottom, transparent 3%, #000 25%, #000 88%, transparent); }
.hero-panel { align-self:stretch; display:flex; flex-direction:column; justify-content:center; z-index:3; }
.hero__left { max-width:560px; }
.kicker { color:#8b8f91; font-size:12px; letter-spacing:.11em; margin-bottom:18px; }
.hero__title { font-family:var(--sans); font-weight:750; letter-spacing:-.065em; font-size:clamp(70px,6.8vw,132px); line-height:.82; color:#ececea; margin:0 0 30px; position:relative; }
.hero__title span, h2 span { color:var(--red); }
.glitch-title:hover::before, .glitch-title:hover::after, .glitch-text:hover::before, .glitch-text:hover::after { opacity:1; }
.glitch-title::before, .glitch-title::after, .glitch-text::before, .glitch-text::after { content:attr(data-text); position:absolute; inset:0; pointer-events:none; opacity:0; }
.glitch-title::before, .glitch-text::before { transform:translate(2px,-1px); color:#fff; clip-path:inset(0 0 55% 0); }
.glitch-title::after, .glitch-text::after { transform:translate(-2px,1px); color:var(--red); clip-path:inset(58% 0 0 0); }
.glitch-text { position:relative; }
.hero__lead { max-width:420px; color:#b8bbbc; font-size:17px; line-height:1.7; margin:0 0 6px; }
.hero__lead--muted { color:#777b7d; }
.hero__lead em { color:var(--red); font-style:normal; }

.ca-box { margin-top:38px; border:1px solid var(--line); background:rgba(7,9,10,.68); backdrop-filter:blur(7px); padding:16px; box-shadow:0 20px 50px rgba(0,0,0,.25); }
.ca-box__label { font-size:10px; color:#717679; margin-bottom:10px; letter-spacing:.12em; }
.ca-box__row { display:flex; gap:10px; align-items:center; }
.ca-value { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; color:#c8cacc; font-size:12px; }
.hero__actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.btn { appearance:none; border:1px solid var(--line-strong); color:#d5d7d8; background:#0b0d0e; min-height:42px; padding:0 18px; display:inline-flex; align-items:center; justify-content:center; font-size:11px; letter-spacing:.08em; cursor:pointer; position:relative; overflow:hidden; transition:transform .18s ease,border-color .18s ease,color .18s ease,background .18s ease; }
.btn::before { content:""; position:absolute; inset:0; transform:translateX(-102%); background:var(--red); transition:transform .22s ease; z-index:-1; }
.btn:hover { color:#fff; border-color:var(--red); transform:translateY(-2px); }
.btn:hover::before { transform:translateX(0); }
.btn:active { transform:translateY(1px) scale(.99); }
.btn--primary { background:var(--red); border-color:var(--red); color:#fff; }
.btn--primary::before { background:#fff; }
.btn--primary:hover { color:#050607; border-color:#fff; }
.btn--copy { flex:0 0 auto; }

.hero__center { position:relative; display:grid; place-items:center; height:100%; min-width:0; z-index:1; }
.character-frame { position:relative; width:min(760px,55vw); aspect-ratio:.77; overflow:hidden; filter:drop-shadow(0 34px 50px rgba(0,0,0,.65)); }
.hero-character { width:100%; height:100%; object-fit:cover; object-position:center 46%; clip-path:polygon(24% 0, 76% 0, 93% 100%, 8% 100%); transform:scale(1.18); filter:contrast(1.08) brightness(.92) saturate(.82); animation:characterFloat 6s ease-in-out infinite; }
.character-frame::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(to bottom, rgba(0,0,0,.1), transparent 30%, transparent 70%, rgba(0,0,0,.7)), linear-gradient(90deg, rgba(0,0,0,.7), transparent 28%, transparent 72%, rgba(0,0,0,.7)); }
.face-glitch { position:absolute; left:50%; top:20.8%; transform:translate(-50%,-50%) rotate(-3deg); color:#fff; font-family:var(--mono); font-weight:800; font-size:clamp(32px,3.2vw,64px); text-shadow:-3px 0 0 rgba(255,255,255,.35),3px 0 0 rgba(255,255,255,.3),0 0 18px #fff; animation:faceNoise .23s steps(2,end) infinite; mix-blend-mode:screen; z-index:3; pointer-events:none; }
@keyframes characterFloat { 50% { transform:scale(1.18) translateY(-8px); } }
@keyframes faceNoise { 0%{filter:blur(.2px)} 50%{filter:blur(1.2px); transform:translate(-49%,-51%) rotate(-2deg) skewX(2deg)} }

.hero__right { gap:78px; align-items:stretch; max-width:390px; justify-self:end; }
.terminal-card { border:1px solid var(--line-strong); background:rgba(5,6,7,.82); box-shadow:0 20px 55px rgba(0,0,0,.35); }
.terminal-card__head { height:44px; display:flex; align-items:center; justify-content:space-between; padding:0 14px; border-bottom:1px solid var(--line); color:#b9bbbd; font-size:12px; }
.terminal-card__head button { color:#7f8385; background:none; border:0; font-size:22px; cursor:pointer; }
.terminal-card__body { min-height:150px; display:grid; place-items:center; align-content:center; gap:22px; color:#b8bbbc; }
.terminal-card__body p { margin:0; }
.terminal-choice { display:flex; gap:38px; }
.terminal-choice button { background:none; border:0; color:#c9cbcc; cursor:pointer; font-size:14px; }
.terminal-choice #noBtn { color:var(--red); }
.manifesto { font-family:var(--sans); font-size:clamp(24px,2.1vw,38px); line-height:1.15; color:#969a9c; letter-spacing:.02em; }
.manifesto p { margin:0 0 5px; }
.manifesto span { color:var(--red); }
.hero__ticker { position:absolute; bottom:26px; left:46px; right:46px; display:flex; gap:18px; align-items:center; color:#666b6d; font-size:11px; letter-spacing:.08em; white-space:nowrap; overflow:hidden; }
.hero__ticker span:nth-of-type(3), .hero__ticker b { color:var(--red); }

.section { position:relative; min-height:900px; padding:120px 7vw; overflow:hidden; border-top:1px solid rgba(255,255,255,.07); }
.section__index { position:absolute; left:7vw; top:38px; color:#575c5e; font-size:11px; letter-spacing:.1em; }
.origin { display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:8vw; background:radial-gradient(circle at 74% 46%, rgba(255,25,25,.065), transparent 30%), #070809; }
h2 { font-family:var(--sans); font-size:clamp(62px,6.6vw,128px); line-height:.88; letter-spacing:-.055em; margin:0 0 38px; color:#e4e5e3; }
.origin__copy p { max-width:650px; color:#858a8c; font-size:16px; line-height:1.8; }
.origin__visual { min-height:580px; display:grid; place-items:center; position:relative; }
.error-window { width:min(620px,42vw); background:#090b0c; border:1px solid var(--line-strong); position:relative; z-index:2; box-shadow:0 35px 80px rgba(0,0,0,.5); }
.error-window__top { border-bottom:1px solid var(--line); padding:14px 16px; display:flex; justify-content:space-between; color:var(--red); font-size:12px; }
.error-window__code { font:800 clamp(120px,13vw,260px)/.9 var(--sans); letter-spacing:-.08em; color:#d8d8d5; text-align:center; padding:34px 20px 8px; text-shadow:8px 0 0 rgba(255,255,255,.08),-8px 0 0 rgba(255,255,255,.05); }
.error-window__msg { text-align:center; color:#8c9193; padding-bottom:34px; }
.progress { height:5px; background:#191c1d; margin:0 20px 22px; }
.progress i { display:block; width:24%; height:100%; background:var(--red); animation:progress 3s steps(7,end) infinite; }
@keyframes progress { 0%{width:14%} 55%{width:68%} 70%{width:47%} 100%{width:91%} }
.floating-window { animation:windowFloat 5.2s ease-in-out infinite; }
@keyframes windowFloat { 50%{ transform:translateY(-13px) rotate(.3deg); } }
.ghost-code { position:absolute; font:800 360px/1 var(--sans); color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.04); transform:rotate(-8deg); user-select:none; }

.marquee { height:74px; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#0a0c0d; display:flex; align-items:center; }
.marquee__track { display:flex; width:max-content; align-items:center; gap:34px; animation:marquee 24s linear infinite; white-space:nowrap; }
.marquee__track span { font:700 25px var(--sans); color:#d2d3d2; letter-spacing:-.04em; }
.marquee__track b { color:var(--red); font-size:12px; }
@keyframes marquee { to{ transform:translateX(-50%); } }

.protocol { background:linear-gradient(180deg,#050607,#090a0b); }
.protocol__title { max-width:1100px; }
.rules { margin-top:70px; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; border:1px solid var(--line); background:var(--line); }
.rules article { min-height:260px; background:#080a0b; padding:34px; transition:background .2s ease, transform .2s ease; }
.rules article:hover { background:#0d1011; transform:translateY(-6px); }
.rules article > span { color:var(--red); font-size:11px; }
.rules h3 { font:700 27px var(--sans); margin:52px 0 12px; color:#d7d8d7; }
.rules p { color:#74797b; max-width:260px; line-height:1.65; }
.protocol__quote { margin-top:70px; text-align:right; font:700 clamp(38px,5vw,84px) var(--sans); color:#787d7f; letter-spacing:-.04em; }
.protocol__quote span { color:var(--red); }

.visual-break { min-height:940px; padding:0; display:grid; place-items:center; isolation:isolate; }
.visual-break__image { position:absolute; inset:-3%; z-index:-3; background:url('../assets/images/error404-hero.png') center/cover no-repeat; filter:grayscale(.2) contrast(1.12) brightness(.52); transform:scale(1.08); }
.visual-break__overlay { position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg,rgba(3,4,4,.9),rgba(3,4,4,.15) 50%,rgba(3,4,4,.82)),linear-gradient(to bottom,#050607 0,transparent 17%,transparent 80%,#050607 100%); }
.visual-break__content { width:86%; position:relative; z-index:2; }
.transmission { color:var(--red); font-size:12px; margin-bottom:24px; }
.visual-break h2 { font-size:clamp(74px,9vw,170px); max-width:1300px; text-shadow:0 10px 40px #000; }

.access { min-height:1020px; display:grid; grid-template-columns:.82fr 1.18fr; gap:8vw; align-content:center; background:radial-gradient(circle at 70% 50%, rgba(255,25,25,.045), transparent 35%),#060708; }
.access__left p:last-child { color:#808587; max-width:480px; line-height:1.7; }
.access__right { display:flex; flex-direction:column; gap:18px; }
.final-ca { border:1px solid var(--line-strong); padding:24px; background:#090b0c; }
.final-ca__label { color:#64696b; font-size:10px; letter-spacing:.12em; margin-bottom:16px; }
.final-ca code { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; color:#c6c8c8; padding-bottom:22px; }
.btn--wide { width:100%; }
.link-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.link-grid a { min-height:170px; padding:20px; background:#080a0b; display:flex; flex-direction:column; justify-content:space-between; transition:background .2s ease, transform .2s ease; }
.link-grid a:hover { background:#111415; transform:translateY(-4px); }
.link-grid small { color:var(--red); }
.link-grid strong { font:700 17px var(--sans); }
.link-grid span { color:#74797b; font-size:11px; }
.footer { position:absolute; left:7vw; right:7vw; bottom:38px; border-top:1px solid var(--line); padding-top:22px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; font-size:11px; color:#626769; }
.footer__brand { color:#9a9d9f; position:relative; }
.footer > div:last-child { justify-self:end; }
.footer span { color:var(--red); }
.barcode { width:180px; height:34px; background:repeating-linear-gradient(90deg,#7e8385 0 2px,transparent 2px 5px,#7e8385 5px 8px,transparent 8px 10px); opacity:.7; }

.toast { position:fixed; left:50%; bottom:42px; z-index:120; transform:translate(-50%,24px); opacity:0; pointer-events:none; padding:12px 22px; background:var(--red); color:#fff; border:1px solid #ff5656; font-size:11px; letter-spacing:.14em; transition:opacity .2s ease, transform .2s ease; }
.toast.is-visible { opacity:1; transform:translate(-50%,0); }
.reveal { opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.2,.75,.2,1),transform .8s cubic-bezier(.2,.75,.2,1); }
.reveal--delay { transition-delay:.12s; }
.reveal.is-visible { opacity:1; transform:none; }

@media (max-width: 1500px) {
  .topbar { padding-left:30px; padding-right:30px; }
  .hero { padding-left:30px; padding-right:30px; grid-template-columns:1.05fr 1.25fr .8fr; }
  .hero__right { gap:48px; }
  .hero__lead { font-size:15px; }
  .section { padding-left:5vw; padding-right:5vw; }
  .section__index { left:5vw; }
  .footer { left:5vw; right:5vw; }
}

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

/* V2 — four-screen entity system */
.section{overflow:hidden;isolation:isolate}.section:before,.hero:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.55}
.hero:before{background:radial-gradient(circle at 52% 44%,rgba(255,255,255,.06),transparent 24%),repeating-linear-gradient(90deg,transparent 0 94px,rgba(255,25,25,.035) 95px 96px),repeating-linear-gradient(0deg,transparent 0 63px,rgba(255,255,255,.025) 64px 65px)}
.origin:before{background:linear-gradient(90deg,rgba(255,0,0,.025) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px);background-size:56px 56px;transform:perspective(500px) rotateX(62deg) scale(1.8);transform-origin:50% 80%;animation:gridDrift 9s linear infinite}
.protocol:before{background:repeating-linear-gradient(0deg,transparent 0 28px,rgba(255,0,0,.04) 29px 30px),radial-gradient(circle at 70% 45%,rgba(180,0,0,.14),transparent 30%);animation:bgPulse 4s steps(2) infinite}
.access:before{background:radial-gradient(ellipse at 50% 55%,transparent 0 15%,rgba(255,0,0,.05) 16% 17%,transparent 18% 26%,rgba(255,255,255,.025) 27% 28%,transparent 29% 38%,rgba(255,0,0,.035) 39% 40%,transparent 41%),repeating-linear-gradient(90deg,transparent 0 119px,rgba(255,0,0,.03) 120px 121px);animation:voidZoom 7s linear infinite}
.page-character{position:absolute;z-index:2;pointer-events:none;filter:drop-shadow(0 22px 28px #000) drop-shadow(0 0 18px rgba(255,0,0,.12));transform-origin:center bottom}.page-character img{display:block;width:100%;height:100%;object-fit:contain}.page-character--2{right:5vw;bottom:-8vh;width:min(43vw,760px);height:90vh;transform:rotate(-4deg)}.page-character--3{left:46%;bottom:-21vh;width:min(46vw,820px);height:110vh;transform:scale(1.22) rotate(7deg);opacity:.9}.page-character--4{left:38%;bottom:-20vh;width:min(40vw,720px);height:105vh;transform:rotate(-10deg) scale(1.08)}
.origin__copy,.protocol__title,.rules,.protocol__quote,.access__left,.access__right{position:relative;z-index:4}.origin__visual{z-index:3}.access__right{background:linear-gradient(135deg,rgba(4,5,6,.88),rgba(4,5,6,.58));backdrop-filter:blur(4px)}
.page-character.glitching,.hero-character.glitching{animation:entityGlitch .46s steps(2,end) 1}.page-character.glitching img{animation:rgbSplit .46s steps(2,end) 1}.entity-restored{position:absolute;left:50%;top:24%;transform:translate(-50%,-50%);font:700 13px/1 monospace;letter-spacing:.22em;color:#f22;background:#050505;padding:7px 10px;border:1px solid #5c1111;opacity:0}.page-character.glitching .entity-restored{animation:restoreFlash .46s steps(1) 1}
.page-character:after,.character-frame:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 8px,rgba(255,255,255,.035) 9px,transparent 10px);mix-blend-mode:screen;pointer-events:none;animation:scanDrift 8s linear infinite}
@keyframes entityGlitch{0%,100%{opacity:1;clip-path:inset(0)}12%{opacity:.08;clip-path:inset(8% 0 62% 0);transform:translate(12px,-3px)}25%{opacity:1;clip-path:inset(58% 0 17% 0);transform:translate(-10px,2px)}38%{opacity:0}48%{opacity:.92;clip-path:inset(24% 0 42% 0);transform:translate(8px)}64%{opacity:.15}72%{opacity:1;clip-path:inset(72% 0 5% 0);transform:translate(-5px)}86%{clip-path:inset(0)}}
@keyframes rgbSplit{0%,100%{filter:none}25%{filter:drop-shadow(9px 0 0 rgba(255,0,0,.55)) drop-shadow(-6px 0 0 rgba(0,170,255,.22))}60%{filter:contrast(1.5) brightness(1.2)}}@keyframes restoreFlash{0%,55%{opacity:0}56%,82%{opacity:1}83%,100%{opacity:0}}@keyframes scanDrift{to{background-position:0 120px}}@keyframes gridDrift{to{background-position:112px 112px}}@keyframes bgPulse{0%,91%,100%{opacity:.45}92%{opacity:.9}94%{opacity:.15}96%{opacity:.7}}@keyframes voidZoom{to{transform:scale(1.08) rotate(.4deg)}}
.digital-fragment{position:absolute;z-index:1;font:12px/1 monospace;color:rgba(255,255,255,.16);letter-spacing:.18em;pointer-events:none;animation:fragmentBlink var(--dur,4s) steps(2) infinite}.digital-fragment.red{color:rgba(255,20,20,.38)}@keyframes fragmentBlink{0%,72%,100%{opacity:.15}73%{opacity:.9}76%{opacity:.05}80%{opacity:.45}}

/* V3 — distinct poses, full-frame composition, broken-pixel typography */
.hero,
.origin,
.protocol,
.access { min-height: 100vh; height: 100vh; }

/* Keep every screen visually isolated so art never leaks into the next screen. */
.hero,.origin,.protocol,.access,.visual-break { overflow:hidden !important; contain:paint; }

/* HERO: the original standing PNG is shown in full — no crop. */
.character-frame {
  width:min(34vw, 590px);
  height:calc(100vh - 150px);
  max-height:930px;
  aspect-ratio:auto;
  overflow:visible;
  display:grid;
  place-items:center;
}
.hero-character {
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
  clip-path:none;
  transform:none;
  filter:contrast(1.12) brightness(1.04) saturate(.9) drop-shadow(0 25px 34px rgba(0,0,0,.78));
  animation:characterFloatV3 7s ease-in-out infinite;
}
@keyframes characterFloatV3 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* Three independent pose panels. The black edges of each image dissolve into its screen. */
.page-character {
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  height:100% !important;
  min-width:0;
  transform:none !important;
  opacity:1 !important;
  z-index:3;
  pointer-events:none;
  display:grid;
  place-items:center;
  filter:drop-shadow(0 25px 36px rgba(0,0,0,.8));
}
.pose-visual {
  position:relative;
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  overflow:hidden;
  isolation:isolate;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 10%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 10%,#000 93%,transparent 100%);
}
.pose-visual::after {
  content:"";
  position:absolute;
  inset:4% 0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(5,6,7,.78),transparent 16%,transparent 88%,rgba(5,6,7,.62)),
    linear-gradient(0deg,rgba(5,6,7,.8),transparent 13%,transparent 88%,rgba(5,6,7,.45));
}
.pose-visual img {
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center;
  filter:contrast(1.12) brightness(1.08) saturate(.96);
}

/* SCREEN 2 */
.origin {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:3.5vw;
  align-items:center;
  padding-top:96px;
  padding-bottom:70px;
  background:
    radial-gradient(circle at 73% 50%,rgba(255,24,24,.12),transparent 29%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 7px),
    #060708;
}
.origin__copy { grid-column:1; max-width:720px; }
.origin__character { grid-column:2; height:82vh !important; align-self:center; }
.origin__visual { display:none !important; }
.pose-visual--sitting img { object-position:center 52%; }

/* SCREEN 3 */
.protocol {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  grid-template-rows:auto auto auto;
  column-gap:3.5vw;
  row-gap:16px;
  align-content:center;
  padding-top:94px;
  padding-bottom:72px;
  background:
    radial-gradient(circle at 72% 48%,rgba(255,0,0,.14),transparent 31%),
    repeating-linear-gradient(0deg,transparent 0 21px,rgba(255,0,0,.045) 22px 23px),
    linear-gradient(180deg,#050607,#08090a);
}
.protocol__title { grid-column:1; grid-row:1; max-width:700px; }
.rules {
  grid-column:1; grid-row:2;
  margin-top:8px !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:1px;
  max-width:690px;
}
.rules article {
  min-height:82px !important;
  padding:14px 18px !important;
  display:grid;
  grid-template-columns:42px 180px 1fr;
  align-items:center;
  column-gap:12px;
}
.rules h3 { margin:0 !important; font-size:19px !important; }
.rules p { margin:0; font-size:12px; line-height:1.45; }
.protocol__quote {
  grid-column:1; grid-row:3;
  margin-top:8px !important;
  text-align:left !important;
  font-size:clamp(34px,3.8vw,67px) !important;
  max-width:700px;
}
.protocol__character {
  grid-column:2; grid-row:1 / 4;
  height:84vh !important;
  align-self:center;
}
.pose-visual--reaching img { object-position:center 52%; }

/* The former full page is now a short corrupted transmission divider, not a fifth screen. */
.visual-break { min-height:280px !important; height:280px; }
.visual-break__content { width:86%; }
.visual-break h2 { font-size:clamp(44px,5vw,88px) !important; margin:0; display:flex; gap:.2em; flex-wrap:wrap; }
.visual-break__image { filter:grayscale(.3) contrast(1.2) brightness(.25) !important; }

/* SCREEN 4 */
.access {
  display:grid;
  grid-template-columns:.86fr 1.14fr;
  grid-template-rows:1fr;
  column-gap:3.5vw;
  align-items:stretch;
  padding-top:100px;
  padding-bottom:90px;
  background:
    radial-gradient(ellipse at 75% 52%,rgba(255,0,0,.13),transparent 31%),
    repeating-radial-gradient(ellipse at 75% 52%,rgba(255,255,255,.025) 0 1px,transparent 2px 72px),
    #050607;
}
.access__left {
  grid-column:1; grid-row:1;
  align-self:start;
  max-width:650px;
  z-index:5;
}
.access__right {
  grid-column:1; grid-row:1;
  align-self:end;
  width:100%;
  max-width:690px;
  z-index:5;
  background:linear-gradient(135deg,rgba(4,5,6,.92),rgba(4,5,6,.72)) !important;
}
.access__character {
  grid-column:2; grid-row:1;
  height:84vh !important;
  align-self:center;
}
.pose-visual--running img { object-position:center 50%; }
.footer { z-index:7; }

/* Brighter readable character separation. */
.origin::after,.protocol::after,.access::after {
  content:"";
  position:absolute;
  z-index:1;
  right:0;
  top:0;
  width:57%;
  height:100%;
  pointer-events:none;
  background:radial-gradient(ellipse at 58% 50%,rgba(255,255,255,.055),transparent 36%);
}

/* Broken-pixel live typography. */
.pixel-heading { overflow:visible; }
.pixel-line {
  --glitch-color:#e5e5e2;
  display:block;
  position:relative;
  width:max-content;
  max-width:100%;
  color:var(--glitch-color);
  text-shadow:2px 0 rgba(255,255,255,.08),-2px 0 rgba(255,0,0,.11);
  animation:pixelBaseFlicker 6.8s steps(1,end) infinite;
}
.pixel-line--red { --glitch-color:var(--red); color:var(--red); }
.pixel-line::before,.pixel-line::after {
  content:attr(data-text);
  position:absolute;
  left:0; top:0;
  width:100%;
  color:var(--glitch-color);
  pointer-events:none;
  opacity:0;
  overflow:hidden;
}
.pixel-line::before {
  text-shadow:-5px 0 rgba(255,0,0,.8),4px 0 rgba(255,255,255,.55);
  clip-path:polygon(0 8%,100% 8%,100% 21%,63% 21%,63% 30%,100% 30%,100% 38%,0 38%);
  animation:pixelSliceA 4.7s steps(1,end) infinite;
}
.pixel-line::after {
  text-shadow:5px 0 rgba(255,255,255,.55),-4px 0 rgba(255,0,0,.75);
  clip-path:polygon(0 51%,100% 51%,100% 59%,78% 59%,78% 66%,100% 66%,100% 78%,0 78%);
  animation:pixelSliceB 5.9s steps(1,end) infinite;
}
.pixel-line:nth-child(2)::before { animation-delay:-1.4s; }
.pixel-line:nth-child(2)::after { animation-delay:-2.2s; }
.pixel-line:nth-child(3)::before { animation-delay:-.8s; }
.pixel-line:nth-child(3)::after { animation-delay:-3.1s; }
@keyframes pixelSliceA {
  0%,86%,100%{opacity:0;transform:none}
  87%{opacity:.85;transform:translate(-8px,-1px)}
  89%{opacity:.3;transform:translate(13px,1px)}
  91%{opacity:.9;transform:translate(-4px,0)}
  93%{opacity:0}
}
@keyframes pixelSliceB {
  0%,78%,100%{opacity:0;transform:none}
  79%{opacity:.65;transform:translate(9px,1px)}
  82%{opacity:.22;transform:translate(-15px,-1px)}
  84%{opacity:.85;transform:translate(5px,0)}
  86%{opacity:0}
}
@keyframes pixelBaseFlicker {
  0%,72%,75%,100%{opacity:1;filter:none}
  73%{opacity:.63;filter:contrast(1.5)}
  74%{opacity:.94;transform:translateX(1px)}
}
.pixel-line.text-glitching,
.text-glitching .pixel-line { animation:hardTextBreak .34s steps(2,end) 1; }
@keyframes hardTextBreak {
  0%,100%{opacity:1;transform:none}
  18%{opacity:.15;transform:translateX(7px);clip-path:inset(0 0 62% 0)}
  34%{opacity:1;transform:translateX(-10px);clip-path:inset(44% 0 18% 0)}
  52%{opacity:.45;transform:skewX(8deg)}
  68%{opacity:0}
  82%{opacity:1;transform:translateX(3px);clip-path:none}
}

/* Hero title now glitches by itself, not only on hover. */
.glitch-title::before,.glitch-title::after,.glitch-text::before,.glitch-text::after { opacity:0; }
.glitch-title::before { animation:heroTextSliceA 4.3s steps(1,end) infinite; }
.glitch-title::after { animation:heroTextSliceB 5.1s steps(1,end) infinite; }
@keyframes heroTextSliceA { 0%,83%,100%{opacity:0}84%{opacity:.8;transform:translate(-7px,-1px)}87%{opacity:.25;transform:translate(10px,1px)}90%{opacity:.7;transform:translate(-3px,0)}92%{opacity:0} }
@keyframes heroTextSliceB { 0%,74%,100%{opacity:0}75%{opacity:.7;transform:translate(8px,1px)}78%{opacity:.2;transform:translate(-11px,-1px)}81%{opacity:.75;transform:translate(4px,0)}83%{opacity:0} }

/* More convincing character loss/restoration without leaving the screen empty for long. */
.page-character.glitching { animation:entityGlitchV3 .42s steps(2,end) 1 !important; }
.page-character.glitching .pose-visual { animation:poseRgbBreak .42s steps(2,end) 1; }
.hero-character.glitching { animation:heroEntityGlitchV3 .42s steps(2,end) 1 !important; }
@keyframes entityGlitchV3 {
  0%,100%{opacity:1;transform:none;clip-path:inset(0)}
  14%{opacity:.22;transform:translateX(9px);clip-path:inset(5% 0 68% 0)}
  28%{opacity:1;transform:translateX(-7px);clip-path:inset(57% 0 17% 0)}
  42%{opacity:.04}
  52%{opacity:.88;transform:translateX(5px);clip-path:inset(27% 0 38% 0)}
  68%{opacity:.18}
  78%{opacity:1;transform:translateX(-3px);clip-path:inset(72% 0 4% 0)}
  90%{clip-path:inset(0)}
}
@keyframes poseRgbBreak { 0%,100%{filter:none}25%{filter:drop-shadow(10px 0 rgba(255,0,0,.55)) drop-shadow(-7px 0 rgba(210,220,225,.18))}58%{filter:contrast(1.45) brightness(1.2)} }
@keyframes heroEntityGlitchV3 {
  0%,100%{opacity:1;transform:translateY(0);clip-path:inset(0)}
  20%{opacity:.12;transform:translate(7px,-2px);clip-path:inset(11% 0 61% 0)}
  34%{opacity:1;transform:translate(-6px,0);clip-path:inset(54% 0 23% 0)}
  48%{opacity:0}
  58%{opacity:.8;transform:translate(4px,0);clip-path:inset(29% 0 41% 0)}
  73%{opacity:1;clip-path:inset(0)}
}

/* At 1920×1080 the whole composition remains inside each screen. */
@media (min-width:1501px) {
  .section { padding-left:6vw; padding-right:6vw; }
  .section__index { left:6vw; }
  .footer { left:6vw; right:6vw; }
}

/* V4 — clean image seams and remove stray UI artifacts */
.cursor-dot { display:none !important; }
.hero__actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
.link-grid { grid-template-columns:repeat(2,1fr) !important; }

/* Blend pose artwork into each section instead of showing hard image rectangles. */
.pose-visual {
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 5%, #000 18%, #000 86%, rgba(0,0,0,.72) 94%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 9%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 5%, #000 18%, #000 86%, rgba(0,0,0,.72) 94%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 9%, #000 88%, transparent 100%);
  mask-composite: intersect;
}
.pose-visual::after {
  inset:0;
  background:
    radial-gradient(ellipse at 54% 52%, transparent 40%, rgba(5,6,7,.16) 64%, rgba(5,6,7,.82) 100%),
    linear-gradient(90deg, #050607 0%, rgba(5,6,7,.82) 6%, rgba(5,6,7,.16) 17%, transparent 28%, transparent 76%, rgba(5,6,7,.34) 89%, #050607 100%),
    linear-gradient(180deg, #050607 0%, transparent 12%, transparent 86%, #050607 100%);
  mix-blend-mode:normal;
}

/* Stronger local edge cleanup for the three generated pose panels. */
.pose-visual--sitting::before,
.pose-visual--reaching::before,
.pose-visual--running::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
}
.pose-visual--sitting::before {
  background:linear-gradient(90deg,#060708 0 10%,rgba(6,7,8,.94) 14%,rgba(6,7,8,.42) 21%,transparent 31%);
}
.pose-visual--reaching::before {
  background:
    linear-gradient(90deg,#050607 0 6%,rgba(5,6,7,.86) 11%,rgba(5,6,7,.35) 17%,transparent 27%),
    linear-gradient(180deg,rgba(5,6,7,.58) 0 13%,transparent 31%);
}
.pose-visual--running::before {
  background:linear-gradient(90deg,#050607 0 9%,rgba(5,6,7,.95) 13%,rgba(5,6,7,.42) 20%,transparent 31%);
}

/* Keep characters above their fade overlays where it matters. */
.pose-visual img { position:relative; z-index:1; }

/* Remove accidental small square/marker look from decorative controls. */
.digital-fragment::before,.digital-fragment::after { content:none !important; }