:root{--bg:#f6f1ff;--ink:#14101f;--card:#fff;--muted:#5b5270;--pink:#e0006f;--cyan:#00a9c9;--yellow:#ffd400;--lime:#7fcf00;--violet:#7a3dff;
--rb:linear-gradient(90deg,#e40303,#ff8c00,#ffed00,#008026,#24408e,#732982);
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0b0912;--ink:#f3eefc;--card:#16121f;--muted:#a79bc0;--pink:#ff2e93;--cyan:#19e3ff;--yellow:#ffe14d;--lime:#a6ff4d;--violet:#9b6bff;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0b0912;--ink:#f3eefc;--card:#16121f;--muted:#a79bc0;--pink:#ff2e93;--cyan:#19e3ff;--yellow:#ffe14d;--lime:#a6ff4d;--violet:#9b6bff;color-scheme:dark}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(128,128,160,.07) 3px 4px);z-index:50}
a{color:var(--pink);font-weight:600}
.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
.wrap{max-width:980px;margin:0 auto;padding:0 20px;position:relative}
.tape{background:var(--rb);color:#fff;font-weight:900;letter-spacing:.12em;white-space:nowrap;overflow:hidden;transform:rotate(-1.2deg) scale(1.03);padding:8px 0;text-shadow:0 1px 3px #0008;margin-top:10px}
.tape span{display:inline-block;animation:run 24s linear infinite;padding-left:100%}
@keyframes run{to{transform:translateX(-100%)}}
nav{display:flex;gap:10px;flex-wrap:wrap;padding:22px 0 0}
nav a{text-decoration:none;color:var(--ink);border:2px solid var(--ink);padding:3px 12px;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em}
nav a:hover{background:var(--yellow);color:#000}
.hero{padding:50px 0 20px;position:relative}
.glitch{position:relative;display:inline-block;font-size:clamp(5rem,26vw,13rem);font-weight:900;line-height:.9;letter-spacing:-.05em;margin:0}
.glitch::before,.glitch::after{content:attr(data-t);position:absolute;inset:0}
.glitch::before{color:var(--cyan);transform:translate(-4px,0);animation:g1 3.2s infinite steps(1);mix-blend-mode:screen}
.glitch::after{color:var(--pink);transform:translate(4px,0);animation:g2 2.7s infinite steps(1);mix-blend-mode:screen}
@keyframes g1{0%,88%{clip-path:inset(0 0 0 0)}90%{clip-path:inset(10% 0 70% 0);transform:translate(-14px,0)}93%{clip-path:inset(60% 0 12% 0);transform:translate(10px,0)}96%{clip-path:inset(30% 0 40% 0);transform:translate(-6px,0)}100%{clip-path:inset(0)}}
@keyframes g2{0%,80%{clip-path:inset(0 0 0 0)}83%{clip-path:inset(55% 0 20% 0);transform:translate(14px,0)}86%{clip-path:inset(5% 0 80% 0);transform:translate(-9px,0)}90%{clip-path:inset(40% 0 35% 0);transform:translate(7px,0)}100%{clip-path:inset(0)}}
.mirror{display:block;font-size:clamp(5rem,26vw,13rem);font-weight:900;line-height:.9;letter-spacing:-.05em;transform:scaleY(-1) skewX(-8deg);margin-top:-.04em;background:var(--rb);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.55),transparent 65%);mask-image:linear-gradient(to top,rgba(0,0,0,.55),transparent 65%);user-select:none}
.lead{font-size:clamp(1.05rem,3.6vw,1.35rem);max-width:640px;margin:-10px 0 24px}
.lead b{background:var(--yellow);color:#000;padding:0 6px}
.btn{display:inline-block;padding:12px 22px;background:var(--pink);color:#fff;text-decoration:none;font-weight:800;text-transform:uppercase;letter-spacing:.06em;border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);margin:0 10px 12px 0;transition:transform .1s,box-shadow .1s}
.btn:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--ink)}
.btn.alt{background:var(--yellow);color:#000}
.flags{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 4px}
.flag{display:flex;align-items:center;gap:8px;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em}
.flag i{display:block;width:44px;height:28px;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
section{padding:56px 0 20px;position:relative}
.num{position:absolute;right:0;top:6px;font-size:clamp(5rem,20vw,10rem);font-weight:900;line-height:1;color:transparent;-webkit-text-stroke:2px var(--muted);opacity:.35;z-index:0;pointer-events:none}
h2{position:relative;z-index:1;font-size:clamp(1.8rem,6vw,3rem);margin:0 0 16px;text-transform:uppercase;letter-spacing:-.02em;line-height:1.05}
h2 u{text-decoration:none;background:linear-gradient(transparent 60%,var(--pink) 60%)}
p{position:relative;z-index:1;max-width:680px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;position:relative;z-index:1}
.card{background:var(--card);border:3px solid var(--ink);box-shadow:7px 7px 0 var(--violet);padding:16px 18px;transition:transform .15s}
.card:nth-child(odd){transform:rotate(-1.2deg)}.card:nth-child(even){transform:rotate(1deg);box-shadow:7px 7px 0 var(--cyan)}
.card:hover{transform:rotate(0) translateY(-3px)}
.card h3{margin:0 0 6px;font-size:1.1rem;text-transform:uppercase}
.card p{margin:0;color:var(--muted);font-size:.95rem}
.warn{position:relative;z-index:1;border:3px dashed var(--pink);padding:14px 18px;margin:16px 0;max-width:680px;transform:rotate(-.6deg)}
.post .tag{display:inline-block;background:var(--ink);color:var(--bg);padding:1px 10px;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase}
.post .body{margin:12px 0;white-space:pre-line;font-size:.93rem}
.hash{color:var(--pink);font-weight:700}
.post button{background:var(--lime);color:#000;border:3px solid var(--ink);padding:5px 14px;font-weight:800;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
.post button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
ol.rules{list-style:none;counter-reset:r;padding:0;margin:0;display:grid;gap:14px;position:relative;z-index:1}
ol.rules li{counter-increment:r;display:flex;gap:16px;align-items:flex-start;background:var(--card);border:3px solid var(--ink);padding:12px 16px;box-shadow:5px 5px 0 var(--ink)}
ol.rules li::before{content:counter(r,decimal-leading-zero);flex:none;font:900 1.8rem/1 ui-monospace,Menlo,Consolas,monospace;color:var(--pink)}
footer{margin-top:60px;padding:30px 0 50px;border-top:3px solid var(--ink);color:var(--muted);font-size:.9rem;position:relative}
footer .big{display:block;font-size:clamp(1.6rem,8vw,3.4rem);font-weight:900;color:var(--ink);text-transform:uppercase;letter-spacing:-.03em;line-height:1}
footer .big.r{transform:scaleY(-1);opacity:.25;margin:2px 0 14px;-webkit-mask-image:linear-gradient(to top,#000,transparent 70%);mask-image:linear-gradient(to top,#000,transparent 70%)}
@media (prefers-reduced-motion:reduce){.glitch::before,.glitch::after,.tape span{animation:none}.tape span{padding-left:0}}
.f1{background:linear-gradient(#e40303 0 16.6%,#ff8c00 0 33.3%,#ffed00 0 50%,#008026 0 66.6%,#24408e 0 83.3%,#732982 0)}
.f2{background:linear-gradient(#5bcefa 0 20%,#f5a9b8 0 40%,#fff 0 60%,#f5a9b8 0 80%,#5bcefa 0)}
.f3{background:linear-gradient(#d60270 0 40%,#9b4f96 0 60%,#0038a8 0)}
.f4{background:linear-gradient(#d52d00 0 14%,#ef7627 0 28%,#ff9a56 0 42%,#fff 0 57%,#d362a4 0 71%,#b55690 0 85%,#a30262 0)}
.f5{background:linear-gradient(#fcf434 0 25%,#fff 0 50%,#9c59d1 0 75%,#2c2c2c 0)}
.f6{background:linear-gradient(#ff218c 0 33%,#ffd800 0 66%,#21b1ff 0)}
.f7{background:linear-gradient(#000 0 25%,#a3a3a3 0 50%,#fff 0 75%,#800080 0)}
.hint{color:var(--muted);font-size:.85rem;margin-top:22px}
/* --- вход: «Кто ты?» --- */
#gate{display:none}
html.locked body>*:not(#gate){display:none}
html.locked #gate{display:grid;place-items:center;min-height:100vh;min-height:100dvh;padding:24px;text-align:center;position:relative;z-index:10;background:radial-gradient(circle at 20% 15%,rgba(255,46,147,.25),transparent 45%),radial-gradient(circle at 85% 85%,rgba(25,227,255,.22),transparent 45%)}
.gate-box{max-width:620px;width:100%}
.gate-tag{color:var(--cyan);letter-spacing:.15em;text-transform:uppercase;margin:0 0 10px;max-width:none}
.glitch.gate-h{font-size:clamp(3.2rem,18vw,7.5rem);margin-bottom:8px}
.gate-sub{margin:0 auto 28px;font-size:1.1rem}
.gate-btns{display:flex;flex-direction:column}
button.btn{font:inherit;font-weight:800;letter-spacing:.06em;cursor:pointer;margin:0 0 16px}
.btn.out{background:var(--card);color:var(--ink)}
.gate-msg{min-height:1.8em;margin:6px auto 0;color:var(--pink);font-weight:700}