/* Maceful Network */
*,*::before,*::after{box-sizing:border-box}

:root{
  --bg:#070708;--bg2:#0D0D10;--bg3:#121216;--plate:#030304;
  --surface:rgba(255,255,255,.035);--surface2:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.14);
  --ink:#F3F3F5;--ink2:#B4B6BE;--ink3:#767881;--silver:#C9CCD3;
  --red:#E10600;--red2:#FF2B2B;
  --acc:#E10600;--acc-ink:#FF3B30;
  --ok:#3DBA4F;--warn:#F5B400;--blue:#5865F2;
  --display:"Sora",system-ui,"Segoe UI",sans-serif;
  --sans:"Inter",system-ui,"Segoe UI",Roboto,sans-serif;
  --mono:"Cascadia Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.77,0,.18,1);
  --wrap:1200px;
  --gutter:clamp(18px,4vw,52px);
  --r:16px;
  color-scheme:dark;
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--bg)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.locked{overflow:hidden}
h1,h2,h3,h4,p,ul,ol,figure,dl{margin:0}
img,svg{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--acc-ink);outline-offset:3px;border-radius:4px}
[hidden]{display:none!important}
.ic{width:1em;height:1em;flex:none}
.emo{width:1em;height:1em;flex:none;display:inline-block;vertical-align:-.15em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.view{opacity:0}
.view.in{opacity:1}
main{position:relative;z-index:1;min-height:70vh}

/* ---------- loader ---------- */
#loader{position:fixed;inset:0;z-index:100;background:var(--plate);display:grid;place-items:center;overflow:hidden;pointer-events:none}
#loader .line{position:absolute;inset:0;margin:auto;display:flex;justify-content:center;align-items:center;height:1em;font:900 clamp(40px,9.5vw,150px)/1 var(--display);letter-spacing:-.03em;text-transform:uppercase;opacity:0;white-space:nowrap}
#loader .line span{display:inline-block;opacity:0;transform-style:preserve-3d;will-change:transform,opacity}
#loader .line .sp{width:.28em}
#loader .line.l1{color:var(--red2)}
#loader .line.l2,#loader .line.l3{color:#fff}
#loader .mark{position:absolute;inset:0;margin:auto;width:clamp(120px,18vw,220px);aspect-ratio:1;opacity:0;transform:scale(.6)}
#loader .ring{position:absolute;inset:0;margin:auto;width:clamp(120px,18vw,220px);aspect-ratio:1;border-radius:50%;border:2px solid var(--red);opacity:0}
.no-loader #loader{display:none}

/* ---------- curtain, progress ---------- */
.curtain{position:fixed;inset:0;z-index:90;pointer-events:none;background:var(--acc);clip-path:inset(100% 0 0 0);display:grid;place-items:center;overflow:hidden}
.curtain b{font:800 clamp(28px,6vw,92px)/1 var(--display);letter-spacing:-.03em;text-transform:uppercase;color:var(--plate);opacity:0;transform:translateY(30px);text-align:center;padding:0 20px}
.progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:60;background:var(--acc-ink);transform:scaleX(0);transform-origin:0 50%;opacity:0;transition:opacity .6s}
.progress.on{opacity:1}

/* ---------- top bar ---------- */
.top{position:sticky;top:0;z-index:50;backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  background:linear-gradient(to bottom,rgba(7,7,8,.92),rgba(7,7,8,.7));border-bottom:1px solid var(--line);opacity:0}
.no-loader .top,.top.in{opacity:1}
.top .in{max-width:var(--wrap);margin:0 auto;padding:10px var(--gutter);display:flex;align-items:center;gap:22px}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:800;letter-spacing:.14em;font-size:12px;text-transform:uppercase;line-height:1.05}
.brand .box{width:46px;height:46px;transition:transform .8s var(--ease)}
.brand .box img{width:100%;height:100%;object-fit:contain}
.brand:hover .box{transform:rotate(-10deg) scale(1.06)}
.brand small{display:block;color:var(--acc-ink);font-weight:700;letter-spacing:.24em}
.top nav{display:flex;gap:4px;margin-left:8px}
.top nav a{position:relative;white-space:nowrap;padding:8px 12px;font-size:13.5px;font-weight:500;color:var(--ink2);border-radius:8px;transition:color .4s,background .4s}
.top nav a:hover,.top nav a.on{color:#fff;background:var(--surface)}
.top nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;background:var(--acc-ink);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease)}
.top nav a.on::after{transform:scaleX(1)}
.top .ext .ic{width:12px;height:12px;margin-left:5px;opacity:.6;display:inline-block;vertical-align:-1px}
.top .sp{flex:1}
.ip{display:flex;align-items:center;gap:9px;padding:8px 12px 8px 14px;border:1px solid var(--line2);border-radius:999px;font-family:var(--mono);font-size:12.5px;color:var(--ink2);transition:border-color .5s,color .5s,background .5s;white-space:nowrap}
.ip .ic{width:14px;height:14px;color:var(--ink3);transition:color .5s,transform .5s var(--ease)}
.ip:hover{border-color:var(--acc-ink);color:#fff;background:var(--surface)}
.ip:hover .ic{color:var(--acc-ink);transform:translateY(-1px)}
.ip.done{border-color:var(--ok);color:var(--ok)}
.ip.done .ic{color:var(--ok)}
.cta{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 18px;border-radius:9px;font-family:var(--display);font-weight:700;font-size:13.5px;letter-spacing:.03em;color:#fff;background:var(--red);
  position:relative;overflow:hidden;transition:color .5s,box-shadow .6s;white-space:nowrap}
.cta::before{content:"";position:absolute;inset:0;background:#fff;transform:translateY(102%);transition:transform .75s var(--ease)}
.cta>*{position:relative}
.cta:hover{color:var(--plate);box-shadow:0 10px 30px rgba(225,6,0,.35)}
.cta:hover::before{transform:translateY(0)}
.cta .ic{width:16px;height:16px;transition:transform .7s var(--ease)}
.cta:hover .ic{transform:translateX(3px)}
.cta.discord{background:var(--blue)}
.cta.discord:hover{box-shadow:0 10px 30px rgba(88,101,242,.4)}
.burger{display:none;width:42px;height:42px;place-items:center;border:1px solid var(--line2);border-radius:9px;color:var(--ink2)}
.burger .ic{width:20px;height:20px}
.account{position:relative;display:flex;align-items:center}
.account .me{display:flex;align-items:center;gap:10px;padding:4px 12px 4px 4px;border:1px solid var(--line2);border-radius:999px;transition:border-color .5s,background .5s}
.account .me:hover,.account .me.open{border-color:var(--acc-ink);background:var(--surface)}
.account .me .av{width:34px;height:34px}
.account .me b{font-size:13.5px;font-weight:600;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account .me .ic{width:14px;height:14px;color:var(--ink3);transition:transform .6s var(--ease)}
.account .me.open .ic{transform:rotate(180deg)}
.account .menu{position:absolute;right:0;top:calc(100% + 10px);min-width:220px;background:var(--bg2);border:1px solid var(--line2);border-radius:14px;padding:8px;box-shadow:0 30px 80px rgba(0,0,0,.6);opacity:0;transform:translateY(-8px) scale(.98);pointer-events:none;transition:opacity .5s var(--ease),transform .6s var(--ease)}
.account .menu.open{opacity:1;transform:none;pointer-events:auto}
.account .menu a,.account .menu button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:9px;font-size:14px;color:var(--ink2);text-align:left;transition:background .3s,color .3s}
.account .menu a:hover,.account .menu button:hover{background:var(--surface2);color:#fff}
.account .menu .ic{width:16px;height:16px;color:var(--ink3)}
.account .menu hr{border:0;border-top:1px solid var(--line);margin:6px 4px}

/* ---------- avatars, names, cosmetics ---------- */
.av{width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--bg3);flex:none;display:block}
.uname{font-weight:600;color:var(--nc,#fff)}
.uname.grad{background:var(--ng);-webkit-background-clip:text;background-clip:text;color:transparent}
.utitle{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;border:1px solid var(--line2);font:600 10.5px/1.5 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);margin-left:8px;vertical-align:middle}
.utitle.staff{border-color:rgba(255,59,48,.5);color:var(--acc-ink);background:rgba(225,6,0,.1)}
.ubadge{display:inline-flex;width:18px;height:18px;color:var(--acc-ink);vertical-align:middle;margin-left:6px}
.ubadge .ic{width:18px;height:18px}

/* ---------- hero (hub) ---------- */
.hero{position:relative;min-height:min(92vh,960px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero .bg{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--plate)}
.hero .bg img{width:100%;height:100%;object-fit:cover;object-position:center 35%;animation:kb 50s ease-in-out infinite alternate;will-change:transform}
@keyframes kb{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.14) translate3d(-2%,-3%,0)}}
.hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,7,8,.25) 0%,rgba(7,7,8,.45) 40%,var(--bg) 100%),linear-gradient(90deg,rgba(7,7,8,.75) 0%,transparent 55%)}
.hero .in{width:100%;padding-top:clamp(120px,20vh,220px);padding-bottom:clamp(44px,8vh,90px)}
.eyebrow{display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ink2)}
.eyebrow i{width:30px;height:2px;background:var(--acc-ink);display:block;transform-origin:0 50%}
.h1{font:800 clamp(40px,7.6vw,112px)/.96 var(--display);letter-spacing:-.04em;margin-top:22px;max-width:13ch;text-shadow:0 10px 40px rgba(0,0,0,.5)}
.h1 em{font-style:normal;color:var(--acc-ink)}
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .06em;margin:0 -.06em;padding-bottom:.08em;margin-bottom:-.08em}
.w>span{display:inline-block;transform:translateY(112%);will-change:transform}
.lead{font-size:clamp(17px,1.6vw,21px);line-height:1.55;color:var(--ink2);max-width:58ch;margin-top:28px}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 26px;border-radius:12px;font-family:var(--display);font-weight:700;font-size:14.5px;letter-spacing:.02em;position:relative;overflow:hidden;transition:color .6s,transform .7s var(--ease),box-shadow .7s;white-space:nowrap}
.btn.pri{background:var(--red);color:#fff;box-shadow:0 12px 34px rgba(225,6,0,.3)}
.btn.pri::before{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:100% 50%;transition:transform .8s var(--ease)}
.btn.pri:hover{color:var(--plate);transform:translateY(-2px)}
.btn.pri:hover::before{transform:scaleX(1);transform-origin:0 50%}
.btn.pri>*{position:relative}
.btn.sec{border:1px solid rgba(255,255,255,.22);color:#fff;background:rgba(7,7,8,.45);backdrop-filter:blur(8px)}
.btn.sec:hover{border-color:var(--acc-ink);background:rgba(225,6,0,.14);transform:translateY(-2px)}
.btn.discord{background:var(--blue);color:#fff;box-shadow:0 12px 34px rgba(88,101,242,.3)}
.btn.discord:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(88,101,242,.45)}
.btn.sm{height:42px;padding:0 18px;font-size:13.5px;border-radius:10px}
.btn .ic{width:16px;height:16px;transition:transform .7s var(--ease)}
.btn:hover .ic{transform:translateX(5px)}
.btn:disabled{opacity:.5;pointer-events:none}
.status{display:inline-flex;align-items:center;gap:12px;margin-top:40px;padding:10px 18px 10px 12px;border-radius:999px;border:1px solid rgba(61,186,79,.4);background:rgba(7,7,8,.6);backdrop-filter:blur(8px);font-size:14px;color:var(--ink)}
.status .emo{width:22px;height:22px}
.status b{font-weight:600;color:var(--ok)}
.status i{display:block;width:6px;height:6px;border-radius:50%;background:var(--ok);animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(61,186,79,.6)}50%{box-shadow:0 0 0 8px transparent}}
.status.off{border-color:var(--line2)}
.status.off b{color:var(--ink2)}
.status.off i{background:var(--ink3);animation:none}

/* ---------- hub tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(28px,5vh,56px)}
.tile{position:relative;display:flex;flex-direction:column;gap:12px;padding:28px;min-height:220px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg2);overflow:hidden;transition:transform .9s var(--ease),border-color .6s}
.tile::before{content:"";position:absolute;inset:0;background:radial-gradient(500px circle at var(--mx,50%) var(--my,0%),rgba(225,6,0,.16),transparent 55%);opacity:0;transition:opacity .8s}
.tile::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--acc-ink);transform:scaleX(0);transform-origin:0 50%;transition:transform 1s var(--ease)}
.tile:hover{transform:translateY(-5px);border-color:rgba(255,43,43,.4)}
.tile:hover::before{opacity:1}
.tile:hover::after{transform:scaleX(1)}
.tile>*{position:relative}
.tile .ico{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:rgba(225,6,0,.12);color:var(--acc-ink)}
.tile .ico .ic{width:22px;height:22px}
.tile.discord .ico{background:rgba(88,101,242,.16);color:#8B95FF}
.tile h3{font:700 22px/1.2 var(--display);letter-spacing:-.02em;margin-top:6px}
.tile p{font-size:14px;color:var(--ink2);line-height:1.55}
.tile .go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;font-size:13.5px;color:#fff}
.tile .go .ic{width:15px;height:15px;color:var(--acc-ink);transition:transform .7s var(--ease)}
.tile:hover .go .ic{transform:translateX(6px)}
.tile.big{grid-column:span 2;min-height:260px}
.tile.big .bgimg{position:absolute;inset:0;z-index:0}
.tile.big .bgimg img{width:100%;height:100%;object-fit:cover;object-position:center 60%;opacity:.55;transition:transform 2.4s var(--ease),opacity .8s}
.tile.big:hover .bgimg img{transform:scale(1.08);opacity:.7}
.tile.big .bgimg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,13,16,.96) 0%,rgba(13,13,16,.6) 50%,rgba(13,13,16,.2) 100%)}
.tile.big>*:not(.bgimg){z-index:1}

/* ---------- section heads ---------- */
.sh{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:clamp(56px,10vh,120px) 0 28px}
.sh.tight{margin-top:clamp(28px,5vh,56px)}
.sh h2{font:800 clamp(28px,3.6vw,48px)/1.05 var(--display);letter-spacing:-.035em}
.sh h2 small{display:block;font:700 12px/1 var(--display);letter-spacing:.24em;text-transform:uppercase;color:var(--acc-ink);margin-bottom:14px}
.sh p{color:var(--ink3);font-size:14px;max-width:44ch}
.sh .more{white-space:nowrap}
.more{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:13.5px;color:#fff}
.more .ic{width:15px;height:15px;color:var(--acc-ink);transition:transform .7s var(--ease)}
.more:hover .ic{transform:translateX(6px)}

/* ---------- stats strip ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:clamp(28px,5vh,56px) 0 0}
.stat{background:var(--bg2);padding:28px 28px 24px;position:relative;overflow:hidden}
.stat::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--acc-ink);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.4s var(--ease)}
.stat.seen::after{transform:scaleX(1)}
.stat b{display:block;font:800 clamp(36px,4.2vw,58px)/1 var(--display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.stat b small{font-size:.5em;color:var(--acc-ink);margin-left:2px}
.stat>span{display:block;margin-top:10px;font-size:13px;color:var(--ink3);letter-spacing:.02em}
.stat .num{display:inline;font:inherit;color:inherit;margin:0}
.stat .ic{position:absolute;right:22px;top:24px;width:22px;height:22px;color:var(--ink3);opacity:.7}

/* ---------- photo band ---------- */
.band-cta{position:relative;overflow:hidden;border-radius:var(--r);border:1px solid var(--line);margin-top:clamp(56px,10vh,120px);min-height:380px;display:grid;align-items:center;isolation:isolate}
.band-cta .bg{position:absolute;inset:0;z-index:-1;background:var(--plate)}
.band-cta .bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%;transform:scale(1.05);transition:transform 3s var(--ease)}
.band-cta:hover .bg img{transform:scale(1.12)}
.band-cta .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,7,8,.95) 0%,rgba(7,7,8,.75) 45%,rgba(7,7,8,.25) 100%)}
.band-cta .txt{padding:clamp(32px,5vw,64px);max-width:640px}
.band-cta h2{font:800 clamp(30px,4.2vw,56px)/1.02 var(--display);letter-spacing:-.04em}
.band-cta p{color:var(--ink2);margin-top:16px;font-size:16px;max-width:50ch}
.band-cta .actions{margin-top:28px}
.tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--c,var(--acc-ink))}
.tag .ic{width:15px;height:15px}

/* ---------- cards (articles) ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.chip{padding:7px 14px;border-radius:999px;border:1px solid var(--line2);font-size:13px;color:var(--ink2);transition:all .5s var(--ease);display:inline-flex;align-items:center;gap:8px}
.chip i{width:7px;height:7px;border-radius:50%;background:var(--c,var(--ink3));display:block}
.chip:hover{border-color:var(--c,var(--acc-ink));color:#fff}
.chip.on{background:color-mix(in srgb,var(--c,var(--acc)) 16%,transparent);border-color:var(--c,var(--acc-ink));color:#fff}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{display:flex;flex-direction:column;gap:14px;padding:28px 28px 24px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg2);position:relative;overflow:hidden;transition:transform .9s var(--ease),border-color .6s;transform:translateZ(0)}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(460px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--c,var(--acc)) 14%,transparent),transparent 55%);opacity:0;transition:opacity .8s}
.card::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--c,var(--acc-ink));transform:scaleX(0);transform-origin:0 50%;transition:transform 1s var(--ease)}
.card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--c,var(--acc)) 45%,var(--line))}
.card:hover::before{opacity:1}
.card:hover::after{transform:scaleX(1)}
.card>*{position:relative}
.card h3{font:700 clamp(18px,1.6vw,21px)/1.25 var(--display);letter-spacing:-.02em}
.card p{font-size:14px;color:var(--ink2);line-height:1.55}
.card .foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:6px}
.card.big{grid-column:span 2}
.card.big h3{font-size:clamp(22px,2.3vw,30px)}
.cards .card.hide{display:none}
.meta{display:flex;gap:16px;font-size:12.5px;color:var(--ink3);align-items:center;flex-wrap:wrap}
.meta>span{white-space:nowrap;display:inline-flex;align-items:center}
.meta .ic{width:13px;height:13px;margin-right:6px}
.feature{display:block;position:relative;min-height:clamp(320px,38vw,520px);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--bg2);isolation:isolate;transition:border-color .6s,transform .9s var(--ease)}
.feature:hover{border-color:rgba(255,43,43,.5);transform:translateY(-3px)}
.feature .bg{position:absolute;inset:0;z-index:-1;background:var(--plate)}
.feature .bg img{width:100%;height:100%;object-fit:cover;object-position:center 55%;transform:scale(1.03);transition:transform 2.4s var(--ease)}
.feature:hover .bg img{transform:scale(1.1)}
.feature .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,7,8,.92) 0%,rgba(7,7,8,.7) 40%,rgba(7,7,8,.15) 100%),linear-gradient(0deg,rgba(7,7,8,.85) 0%,transparent 55%)}
.feature .txt{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(320px,38vw,520px);padding:clamp(28px,4vw,56px);max-width:640px}
.feature h3{font:800 clamp(28px,3.4vw,46px)/1.05 var(--display);letter-spacing:-.035em;margin-top:16px;text-shadow:0 6px 30px rgba(0,0,0,.6)}
.feature p{color:var(--ink2);margin-top:14px;max-width:48ch;font-size:16px}
.feature .more{margin-top:26px}
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative}
.process::before{content:"";position:absolute;left:0;right:0;top:34px;height:1px;background:var(--line)}
.step{position:relative}
.step .dot{position:relative;z-index:1;width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:var(--bg2);border:1px solid var(--line2);color:var(--acc-ink);transition:border-color .6s,box-shadow .8s,background .6s}
.step .dot .ic{width:24px;height:24px}
.step:hover .dot{border-color:var(--acc-ink);box-shadow:0 0 0 6px rgba(225,6,0,.12),0 12px 34px rgba(225,6,0,.25);background:#160404}
.step .n{position:absolute;right:0;top:0;font:800 clamp(40px,4vw,56px)/1 var(--display);letter-spacing:-.05em;color:rgba(255,255,255,.06)}
.step h3{font:700 20px/1.2 var(--display);letter-spacing:-.02em;margin-top:22px}
.step p{font-size:14px;color:var(--ink2);margin-top:10px;line-height:1.6}
.faq{display:grid;gap:10px}
.q{border:1px solid var(--line);border-radius:14px;background:var(--bg2);overflow:hidden;transition:border-color .6s}
.q:hover,.q.open{border-color:rgba(255,43,43,.4)}
.q button{width:100%;display:flex;align-items:center;gap:16px;padding:20px 22px;text-align:left;font:700 16px/1.35 var(--display);letter-spacing:-.01em;color:#fff}
.q button .n{font:700 12px/1 var(--mono);color:var(--acc-ink);letter-spacing:.1em;flex:none}
.q button .ic{margin-left:auto;width:18px;height:18px;color:var(--ink3);transition:transform .8s var(--ease),color .5s}
.q.open button .ic{transform:rotate(180deg);color:var(--acc-ink)}
.q .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .9s var(--ease)}
.q.open .a{grid-template-rows:1fr}
.q .a>div{overflow:hidden}
.q .a p{padding:0 22px 22px 54px;color:var(--ink2);font-size:15px;line-height:1.65}

/* ---------- article ---------- */
.art-head{padding:clamp(44px,8vh,96px) 0 clamp(28px,5vh,52px);border-bottom:1px solid var(--line)}
.back{display:flex;width:fit-content;align-items:center;gap:10px;font-size:13.5px;color:var(--ink3);margin-bottom:34px;transition:color .5s}
.back .ic{width:16px;height:16px;transition:transform .7s var(--ease)}
.back:hover{color:#fff}
.back:hover .ic{transform:translateX(-6px)}
.art-head .tag{margin-bottom:18px}
.art-head .h1{font-size:clamp(32px,5.6vw,78px);max-width:18ch;margin-top:0;text-shadow:none}
.art-head .lead{margin-top:22px;font-size:clamp(16px,1.4vw,19px)}
.art-head .meta{margin-top:26px}
.art-grid{display:grid;grid-template-columns:minmax(0,760px) 1fr;gap:clamp(24px,5vw,80px);align-items:start}
.toc{position:sticky;top:96px;padding:20px 0 0 22px;border-left:1px solid var(--line);margin-top:clamp(28px,5vh,56px)}
.toc h4{font:700 11.5px/1 var(--display);letter-spacing:.22em;text-transform:uppercase;color:var(--ink3);margin-bottom:16px}
.toc a{display:block;padding:7px 0;font-size:14px;color:var(--ink3);transition:color .5s,transform .7s var(--ease);position:relative}
.toc a::before{content:"";position:absolute;left:-23px;top:0;bottom:0;width:2px;background:var(--acc-ink);transform:scaleY(0);transition:transform .7s var(--ease)}
.toc a:hover{color:#fff}
.toc a.on{color:#fff;transform:translateX(4px)}
.toc a.on::before{transform:scaleY(1)}
.toc .apply-side{margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.art-body{padding:clamp(28px,5vh,56px) 0 40px;font-size:17px;line-height:1.72;color:var(--ink2)}
.art-body>*{margin-top:22px}
.art-body>*:first-child{margin-top:0}
.art-body h2{font:800 clamp(22px,2.4vw,30px)/1.2 var(--display);letter-spacing:-.025em;color:#fff;margin-top:46px;padding-top:6px;position:relative;scroll-margin-top:100px}
.art-body h2::before{content:"";position:absolute;left:0;top:-8px;width:36px;height:2px;background:var(--acc-ink)}
.art-body ul,.art-body ol{padding-left:0;list-style:none;display:grid;gap:10px}
.art-body ul li,.art-body ol li{position:relative;padding-left:34px}
.art-body ul li::before{content:"";position:absolute;left:8px;top:.72em;width:9px;height:9px;background:var(--acc-ink);border-radius:2px;transform:rotate(45deg) scale(.75)}
.art-body ol{counter-reset:n}
.art-body ol li{padding-left:48px;counter-increment:n}
.art-body ol li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:.28em;font:700 12px/1 var(--display);color:var(--acc-ink);letter-spacing:.06em;padding:5px 0;border-top:1px solid var(--acc-ink)}
.art-body code,.post-body code{font-family:var(--mono);font-size:.9em;color:#fff;background:var(--surface2);border:1px solid var(--line2);border-radius:5px;padding:1px 6px}
.callout{display:flex;gap:16px;align-items:flex-start;padding:20px 22px;border-radius:12px;border:1px solid var(--line2);background:var(--surface);color:var(--ink);line-height:1.6}
.callout .ic,.callout .emo{width:28px;height:28px;flex:none;margin-top:1px}
.callout.ok{border-color:rgba(61,186,79,.4);background:rgba(61,186,79,.07)}
.callout.warn{border-color:rgba(245,180,0,.4);background:rgba(245,180,0,.07)}
.callout.note{border-color:rgba(255,59,48,.4);background:rgba(225,6,0,.08)}
.callout.note .ic{color:var(--acc-ink)}
.kv{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.kv div{display:grid;grid-template-columns:minmax(120px,.38fr) 1fr;gap:18px;padding:16px 20px;background:var(--bg2);transition:background .5s}
.kv div:hover{background:var(--surface2)}
.kv b{font-family:var(--display);font-weight:700;font-size:14px;color:#fff}
.kv span{font-size:15px;color:var(--ink2)}
.cmd{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:10px;background:var(--plate);border:1px solid var(--line2);font-family:var(--mono);font-size:15px;color:#fff;margin-top:34px}
.cmd .ic{width:16px;height:16px;color:var(--acc-ink)}
.cmd i{font-style:normal;color:var(--ink3)}
.cmd+.tbl{margin-top:12px}
.tbl{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg2)}
.tbl .cap{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;font:700 12px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);border-bottom:1px solid var(--line);background:var(--surface)}
.tbl .cap span{color:var(--acc-ink);white-space:nowrap;margin-left:12px}
.tbl .scroll{overflow-x:auto}
.tbl table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:520px}
.tbl th{text-align:left;padding:10px 18px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);font-weight:600;border-bottom:1px solid var(--line)}
.tbl td{padding:12px 18px;border-top:1px solid var(--line);vertical-align:middle;color:var(--ink2);transition:background .4s}
.tbl tr:first-child td{border-top:0}
.tbl tbody tr:hover td{background:var(--surface)}
.tbl td:first-child{font-family:var(--mono);color:#fff;font-size:13.5px;white-space:nowrap}
.tbl td:last-child{white-space:nowrap}
.dur{display:inline-block;padding:3px 10px;border-radius:999px;font:600 12px/1.4 var(--mono);border:1px solid var(--line2);color:var(--ink)}
.dur.perm{border-color:rgba(255,43,43,.6);color:#FF6B6B;background:rgba(225,6,0,.14)}
.dur.long{border-color:rgba(245,180,0,.45);color:var(--warn)}
.tbl tbody tr{opacity:0;transform:translateX(-10px)}
.tbl.seen tbody tr{animation:rowin .9s var(--ease) both;animation-delay:calc(var(--i)*60ms)}
@keyframes rowin{to{opacity:1;transform:none}}
.status-line{display:flex;align-items:center;gap:14px;padding:18px 22px;border-radius:12px;border:1px solid var(--line2);background:var(--bg2);flex-wrap:wrap}
.status-line .emo{width:28px;height:28px}
.status-line b{font-family:var(--display);font-weight:700;color:#fff}
.status-line span{color:var(--ink2)}
.status-line em{font-style:normal;color:var(--ok);font-weight:600}
.xlink{display:inline-flex;align-items:center;gap:12px;padding:14px 20px;border-radius:11px;border:1px solid var(--line2);color:#fff;font-family:var(--display);font-weight:700;font-size:14px;transition:border-color .5s,background .5s,transform .7s var(--ease)}
.xlink .ic{width:16px;height:16px;color:var(--acc-ink);transition:transform .7s var(--ease)}
.xlink:hover{border-color:var(--acc-ink);background:rgba(225,6,0,.1);transform:translateY(-2px)}
.xlink:hover .ic{transform:translateX(5px)}
.art-body .r{opacity:0;transform:translateY(24px)}
.art-body .r.seen{animation:rise 1.3s var(--ease) both}
@keyframes rise{to{opacity:1;transform:none}}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:16px;border-top:1px solid var(--line);padding:36px 0 clamp(60px,10vh,120px);margin-top:20px}
.pn a{display:flex;flex-direction:column;gap:8px;padding:24px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg2);transition:border-color .6s,transform .8s var(--ease)}
.pn a:hover{border-color:var(--acc-ink);transform:translateY(-3px)}
.pn a.next{text-align:right;align-items:flex-end}
.pn small{font:700 11px/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--ink3);display:flex;align-items:center;gap:8px}
.pn small .ic{width:13px;height:13px;color:var(--acc-ink)}
.pn b{font:700 17px/1.3 var(--display);letter-spacing:-.01em}

/* ---------- page head (rules, forum) ---------- */
.phead{position:relative;padding:clamp(56px,10vh,120px) 0 clamp(28px,5vh,56px);overflow:hidden;isolation:isolate}
.phead.photo{min-height:min(60vh,560px);display:flex;align-items:flex-end}
.phead .bg{position:absolute;inset:0;z-index:-1;background:var(--plate)}
.phead .bg img{width:100%;height:100%;object-fit:cover;object-position:center 50%;animation:kb 50s ease-in-out infinite alternate}
.phead .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,7,8,.3),rgba(7,7,8,.55) 50%,var(--bg) 100%),linear-gradient(90deg,rgba(7,7,8,.75),transparent 60%)}
.phead .in{width:100%}
.subnav{display:flex;gap:6px;flex-wrap:wrap;margin-top:30px}
.subnav a{padding:9px 14px;border-radius:999px;border:1px solid var(--line2);font-size:13.5px;color:var(--ink2);background:rgba(7,7,8,.5);backdrop-filter:blur(6px);transition:all .5s var(--ease)}
.subnav a:hover,.subnav a.on{border-color:var(--acc-ink);color:#fff;background:rgba(225,6,0,.14)}

/* ---------- rules ---------- */
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rcard{padding:28px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg2);transition:border-color .6s,transform .9s var(--ease)}
.rcard:hover{border-color:rgba(255,43,43,.4);transform:translateY(-4px)}
.rcard .rh{display:flex;align-items:center;gap:14px;padding-bottom:18px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.rcard .rh .ico{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:rgba(225,6,0,.12);color:var(--acc-ink);flex:none}
.rcard .rh .ico .ic{width:20px;height:20px}
.rcard .rh h3{font:700 13px/1.2 var(--display);letter-spacing:.18em;text-transform:uppercase}
.rcard ul{list-style:none;padding:0;display:grid;gap:2px}
.rcard li{position:relative;padding:8px 0 8px 24px;font-size:14.5px;color:var(--ink2);line-height:1.5;transition:color .3s,transform .4s var(--ease)}
.rcard li::before{content:"";position:absolute;left:2px;top:15px;width:7px;height:7px;border-radius:50%;background:var(--acc-ink);box-shadow:0 0 10px rgba(255,59,48,.6)}
.rcard li:hover{color:#fff;transform:translateX(3px)}
.rcard .txt{font-size:14px;color:var(--ink2);line-height:1.7;margin-bottom:14px}
.rcard .note{margin-top:18px;padding:12px 14px;border-radius:10px;background:rgba(225,6,0,.08);font-size:13px;color:#EFB6B6;line-height:1.6}
.rcard .foot{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font:700 11.5px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--acc-ink);transition:gap .4s,color .3s}
.rcard .foot .ic{width:14px;height:14px}
.rcard .foot:hover{gap:14px;color:#fff}
.modnote{max-width:900px;margin:0 auto 32px;padding:26px 28px;border-radius:14px;border:1px solid var(--line);border-left:3px solid var(--acc-ink);background:linear-gradient(120deg,rgba(225,6,0,.07),rgba(255,255,255,.015))}
.modnote h4{font:700 12px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;margin-bottom:14px}
.modnote li{position:relative;list-style:none;padding:6px 0 6px 20px;font-size:14.5px;color:var(--ink2)}
.modnote li::before{content:"";position:absolute;left:0;top:15px;width:8px;height:2px;background:var(--acc-ink)}
.modnote ul{padding:0;margin:0}
.modnote p{margin-top:14px;font-size:13.5px;font-weight:600;color:#fff}
.search{display:flex;align-items:center;gap:12px;max-width:560px;margin:0 auto 34px;padding:14px 18px;border-radius:14px;border:1px solid var(--line2);background:var(--surface);color:var(--ink3);transition:border-color .5s,background .5s}
.search:focus-within{border-color:var(--acc-ink);background:var(--surface2);color:var(--acc-ink)}
.search .ic{width:18px;height:18px;flex:none}
.search input{flex:1;border:0;outline:0;background:transparent;color:#fff;font-size:15px}
.search input::placeholder{color:var(--ink3)}
.results{max-width:640px;margin:0 auto;display:grid;gap:10px;list-style:none;padding:0}
.result{display:flex;align-items:center;gap:16px;padding:14px 18px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font-weight:600;animation:rise .6s var(--ease) both}
.result span{flex:1}
.result i{font-style:normal;padding:5px 12px;border-radius:999px;border:1px solid currentColor;font:700 10.5px/1.4 var(--display);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.result.ok{border-color:rgba(61,186,79,.35);background:rgba(61,186,79,.07)}.result.ok i{color:var(--ok)}
.result.no{border-color:rgba(255,43,43,.35);background:rgba(255,43,43,.07)}.result.no i{color:var(--acc-ink)}
.result.risk{border-color:rgba(245,180,0,.35);background:rgba(245,180,0,.07)}.result.risk i{color:var(--warn)}
.noresult{max-width:520px;margin:20px auto 0;padding:24px;text-align:center;border-radius:14px;border:1px dashed var(--line2);font-size:14px;color:var(--ink3)}
.mcard .rh .ico{background:rgba(255,255,255,.05);border:1px solid currentColor}
.mcard.ok .rh .ico{color:var(--ok)}.mcard.no .rh .ico{color:var(--acc-ink)}.mcard.risk .rh .ico{color:var(--warn)}
.mcard .rh small{display:block;margin-top:4px;font:600 11px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.mcard li{padding:7px 10px;border-radius:8px;font-size:13.5px;color:var(--ink2);transition:background .3s,color .3s,transform .4s var(--ease)}
.mcard li::before{display:none}
.mcard.ok li:hover{background:rgba(61,186,79,.1);color:var(--ok)}
.mcard.no li:hover{background:rgba(255,43,43,.1);color:#FF7A7A}
.mcard.risk li:hover{background:rgba(245,180,0,.1);color:var(--warn)}
.mcard .risknote{margin:0 0 8px;padding:12px 14px;border-radius:10px;background:rgba(245,180,0,.08);font-size:12.5px;color:#E3C88A;line-height:1.6}
.updated{margin:40px auto 0;text-align:center;font:700 11px/1 var(--display);letter-spacing:.24em;text-transform:uppercase;color:var(--ink3)}

/* ---------- forum ---------- */
.forum-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start;margin-top:clamp(20px,4vh,40px)}
.side{position:sticky;top:90px;display:grid;gap:14px}
.panel{border:1px solid var(--line);border-radius:14px;background:var(--bg2);padding:18px}
.panel h4{font:700 11.5px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--ink3);margin-bottom:14px}
.panel .row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-top:1px solid var(--line);font-size:14px;color:var(--ink2)}
.panel .row:first-of-type{border-top:0}
.panel .row b{color:#fff;font-variant-numeric:tabular-nums}
.panel .links{display:grid;gap:4px}
.panel .links a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;font-size:14px;color:var(--ink2);transition:background .3s,color .3s}
.panel .links a:hover,.panel .links a.on{background:var(--surface2);color:#fff}
.panel .links .ic{width:16px;height:16px;color:var(--acc-ink)}
.panel .links .cnt{margin-left:auto;font-size:12px;color:var(--ink3)}
.sections{display:grid;gap:12px}
.secrow{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:18px;align-items:center;padding:20px 22px;border:1px solid var(--line);border-radius:14px;background:var(--bg2);transition:border-color .6s,transform .8s var(--ease)}
.secrow:hover{border-color:rgba(255,43,43,.4);transform:translateX(4px)}
.secrow .ico{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;background:rgba(225,6,0,.12);color:var(--acc-ink)}
.secrow .ico .ic{width:24px;height:24px}
.secrow h3{font:700 18px/1.2 var(--display);letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.secrow h3 .lock{font:600 10px/1.4 var(--display);letter-spacing:.14em;text-transform:uppercase;padding:2px 8px;border-radius:999px;border:1px solid rgba(255,59,48,.5);color:var(--acc-ink)}
.secrow p{font-size:13.5px;color:var(--ink2);margin-top:4px}
.secrow .last{font-size:12.5px;color:var(--ink3);margin-top:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(60ch,100%)}
.secrow .last b{color:var(--ink2);font-weight:500}
.secrow .counts{display:flex;gap:18px;text-align:right}
.secrow .counts div{font:800 22px/1 var(--display);letter-spacing:-.03em}
.secrow .counts small{display:block;font:600 10.5px/1.5 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-top:4px}
.threads{display:grid;gap:8px}
.thr{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--bg2);transition:border-color .5s,transform .7s var(--ease),background .5s}
.thr:hover{border-color:rgba(255,43,43,.4);background:var(--bg3);transform:translateX(4px)}
.thr.pinned{border-color:rgba(255,59,48,.3);background:linear-gradient(90deg,rgba(225,6,0,.08),var(--bg2) 40%)}
.thr .av{width:44px;height:44px}
.thr h3{font:600 16px/1.3 var(--display);letter-spacing:-.01em;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.thr h3 .ic{width:15px;height:15px;color:var(--acc-ink)}
.thr .snip{font-size:13.5px;color:var(--ink3);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(70ch,100%)}
.thr .meta{margin-top:6px}
.thr .meta .secchip{color:var(--acc-ink);font-weight:600}
.thr .nums{display:flex;gap:16px;color:var(--ink3);font-size:13px}
.thr .nums span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.thr .nums .ic{width:14px;height:14px}
.thr .nums b{color:var(--ink2);font-weight:600}
.pager{display:flex;justify-content:center;gap:6px;margin-top:24px}
.pager a,.pager span{min-width:38px;height:38px;display:grid;place-items:center;padding:0 10px;border-radius:9px;border:1px solid var(--line2);font-size:13.5px;color:var(--ink2);transition:all .4s}
.pager a:hover{border-color:var(--acc-ink);color:#fff}
.pager .on{background:var(--red);border-color:var(--red);color:#fff}
.empty{padding:40px 20px;text-align:center;border:1px dashed var(--line2);border-radius:14px;color:var(--ink3);font-size:14.5px}
.empty .emo{width:28px;height:28px;display:block;margin:0 auto 12px}
.thead{padding:clamp(36px,6vh,64px) 0 24px;border-bottom:1px solid var(--line)}
.thead h1{font:800 clamp(28px,4vw,50px)/1.08 var(--display);letter-spacing:-.035em;margin-top:14px}
.thead .flags{display:inline-flex;gap:8px;margin-left:12px;vertical-align:middle}
.thead .flags span{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid var(--line2);font:600 11px/1.4 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.thead .flags .ic{width:13px;height:13px;color:var(--acc-ink)}
.thead .meta{margin-top:14px}
.moved{display:flex;gap:12px;align-items:flex-start;margin-top:18px;padding:14px 16px;border-radius:12px;border:1px solid rgba(245,180,0,.4);background:rgba(245,180,0,.07);font-size:14px;color:var(--ink);line-height:1.5}
.moved .emo{width:22px;height:22px;flex:none}
.moved button{margin-left:auto;white-space:nowrap;font-weight:600;color:var(--acc-ink)}
.post{display:grid;grid-template-columns:200px minmax(0,1fr);gap:0;border:1px solid var(--line);border-radius:14px;background:var(--bg2);overflow:hidden;margin-top:14px}
.post.op{border-color:rgba(255,59,48,.35)}
.post .who{padding:22px;border-right:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.post .who .av{width:64px;height:64px}
.post .who .nm{font-size:15px;line-height:1.3}
.post .who .role{font:600 10.5px/1.4 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.post .who .role.staff{color:var(--acc-ink)}
.post .who .cnt{font-size:12px;color:var(--ink3);margin-top:auto}
.post .what{padding:22px 24px;min-width:0}
.post .when{display:flex;align-items:center;gap:14px;font-size:12.5px;color:var(--ink3);margin-bottom:14px;flex-wrap:wrap}
.post .when .n{font-family:var(--mono);margin-left:auto}
.post-body{font-size:15.5px;line-height:1.7;color:var(--ink);word-wrap:break-word;overflow-wrap:anywhere}
.post-body p{margin:0 0 12px}
.post-body p:last-child{margin-bottom:0}
.post-body blockquote{margin:0 0 12px;padding:10px 16px;border-left:3px solid var(--acc-ink);background:var(--surface);border-radius:0 10px 10px 0;color:var(--ink2)}
.post-body a{color:var(--acc-ink);text-decoration:underline;text-decoration-color:rgba(255,59,48,.4);text-underline-offset:3px}
.post-body .mention{color:var(--acc-ink);font-weight:600;text-decoration:none}
.post.deleted .post-body{color:var(--ink3);font-style:italic}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;margin-top:14px}
.gallery a{display:block;aspect-ratio:4/3;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--plate)}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.gallery a:hover img{transform:scale(1.06)}
.post .acts{display:flex;gap:6px;margin-top:16px;flex-wrap:wrap}
.act{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:9px;border:1px solid var(--line);font-size:13px;color:var(--ink2);transition:all .4s var(--ease)}
.act .ic{width:15px;height:15px}
.act:hover{border-color:var(--acc-ink);color:#fff}
.act.on{border-color:rgba(255,59,48,.5);color:var(--acc-ink);background:rgba(225,6,0,.1)}
.act.danger:hover{border-color:#FF5C5C;color:#FF7A7A}
.act.staff{border-style:dashed}
.composer{margin-top:22px;border:1px solid var(--line2);border-radius:14px;background:var(--bg2);overflow:hidden}
.composer.locked{opacity:.6}
.composer .tools{display:flex;gap:4px;padding:10px 12px;border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center}
.composer .tools button{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;color:var(--ink2);transition:background .3s,color .3s}
.composer .tools button:hover{background:var(--surface2);color:#fff}
.composer .tools button .ic{width:17px;height:17px}
.composer .tools .hint{margin-left:auto;font-size:12px;color:var(--ink3)}
.composer textarea,.composer input[type=text]{width:100%;background:transparent;border:0;outline:0;padding:16px 18px;font-size:15px;line-height:1.6;color:#fff;resize:vertical;min-height:140px}
.composer input[type=text]{min-height:0;font:700 20px/1.3 var(--display);letter-spacing:-.02em;border-bottom:1px solid var(--line)}
.composer textarea::placeholder,.composer input::placeholder{color:var(--ink3)}
.drop{margin:0 12px 12px;padding:14px;border:1px dashed var(--line2);border-radius:10px;display:flex;align-items:center;gap:12px;color:var(--ink3);font-size:13.5px;transition:border-color .4s,background .4s,color .4s;cursor:pointer}
.drop:hover,.drop.over{border-color:var(--acc-ink);background:rgba(225,6,0,.06);color:#fff}
.drop .ic{width:18px;height:18px;color:var(--acc-ink)}
.drop b{color:#fff;font-weight:600}
.thumbs{display:flex;gap:8px;flex-wrap:wrap;padding:0 12px 12px}
.thumbs div{position:relative;width:88px;height:66px;border-radius:8px;overflow:hidden;border:1px solid var(--line2);background:var(--plate)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.thumbs button{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:6px;background:rgba(0,0,0,.7);color:#fff;display:grid;place-items:center}
.thumbs button .ic{width:12px;height:12px}
.thumbs .up{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.5);font-size:11px;color:#fff}
.composer .foot{display:flex;align-items:center;gap:12px;padding:12px;border-top:1px solid var(--line);flex-wrap:wrap}
.composer .foot .sel{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink2)}
.composer select{background:var(--plate);border:1px solid var(--line2);border-radius:8px;padding:8px 10px;color:#fff;font-size:14px}
.composer .foot .sp{flex:1}
.composer .err{color:#FF7A7A;font-size:13.5px}
.signin-box{margin-top:22px;padding:22px;border:1px dashed var(--line2);border-radius:14px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;color:var(--ink2)}
.signin-box .emo{width:26px;height:26px}
.signin-box .sp{flex:1}
.mini{display:grid;gap:8px}
.mini a{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:center;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg2);transition:border-color .4s,transform .6s var(--ease)}
.mini a:hover{border-color:var(--acc-ink);transform:translateX(3px)}
.mini .av{width:30px;height:30px}
.mini b{display:block;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini small{display:block;font-size:12px;color:var(--ink3)}

/* ---------- profile ---------- */
.pbanner{position:relative;height:clamp(150px,24vw,260px);border-radius:var(--r) var(--r) 0 0;overflow:hidden;border:1px solid var(--line);border-bottom:0;margin-top:clamp(28px,5vh,56px);background:var(--pb,#111)}
.pbanner::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(13,13,16,.85),transparent 55%)}
.pcard{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:22px;align-items:start;padding:0 clamp(18px,3vw,32px) 26px;border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r) var(--r);background:var(--bg2)}
.pcard .av{width:104px;height:104px;margin-top:-44px;border:4px solid var(--bg2);background:var(--bg2)}
.pcard .names{min-width:0;padding-top:16px}
.pcard .names h1{font:800 clamp(24px,3vw,36px)/1.15 var(--display);letter-spacing:-.03em;display:flex;align-items:center;gap:10px;flex-wrap:wrap;overflow-wrap:anywhere}
.pcard .names .handle{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:13.5px;color:var(--ink3)}
.pcard .names .handle span{display:inline-flex;align-items:center}
.pcard .names .handle span+span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--ink3);margin-right:14px}
.pcard .names .bio{margin-top:14px;color:var(--ink2);font-size:15px;line-height:1.6;max-width:64ch}
.pcard .names .bio.dim{color:var(--ink3)}
.pcard .acts{padding-top:16px;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.pstats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
.pstats div{padding:18px 20px;border:1px solid var(--line);border-radius:12px;background:var(--bg2)}
.pstats b{display:block;font:800 26px/1 var(--display);letter-spacing:-.03em}
.pstats span{display:block;margin-top:6px;font:600 11px/1.4 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.ptwo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:8px}
.ptwo .sh{margin-top:clamp(20px,4vh,36px)}
.mchead{width:64px;height:64px;border-radius:12px;image-rendering:pixelated;border:1px solid var(--line2)}

/* ---------- admin panel, hidden trigger ---------- */
.ghost-wrap{position:relative}
.ghost{position:absolute;inset:-6px -8px;background:transparent;border:0;cursor:default;opacity:0}
.atabs{display:flex;gap:8px;margin:16px 0}
.arow{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--plate);margin-bottom:8px}
.arow .av{width:32px;height:32px}
.arow b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arow small{display:block;font-size:12px;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arow .ab{display:flex;gap:6px;align-items:center}
.arow select{background:var(--bg3);border:1px solid var(--line2);border-radius:8px;padding:6px 8px;font-size:13px;color:#fff}
.modal .box.wide{max-height:calc(100vh - 40px);overflow:auto}

/* ---------- settings ---------- */
.setgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start;margin-top:clamp(28px,5vh,56px)}
.fset{border:1px solid var(--line);border-radius:14px;background:var(--bg2);padding:22px;margin-bottom:16px}
.fset h3{font:700 16px/1.2 var(--display);letter-spacing:-.01em;margin-bottom:6px}
.fset .hint{font-size:13.5px;color:var(--ink3);margin-bottom:16px}
.f{display:grid;gap:14px}
.f .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.f label{display:grid;gap:7px;font:600 12.5px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.f input,.f textarea,.f select{width:100%;background:var(--plate);border:1px solid var(--line2);border-radius:10px;padding:12px 14px;font:400 15px/1.4 var(--sans);color:#fff;letter-spacing:0;text-transform:none;transition:border-color .5s,box-shadow .5s}
.f input:focus,.f textarea:focus,.f select:focus{outline:none;border-color:var(--acc-ink);box-shadow:0 0 0 4px rgba(225,6,0,.15)}
.f textarea{min-height:90px;resize:vertical}
.opts{display:flex;gap:8px;flex-wrap:wrap}
.opt{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--line2);border-radius:10px;font-size:14px;color:var(--ink2);cursor:pointer;transition:all .5s var(--ease);background:var(--plate)}
.opt.on{border-color:var(--acc-ink);background:rgba(225,6,0,.12);color:#fff}
.opt .av{width:28px;height:28px}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.sw{position:relative;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line2);border-radius:10px;font-size:13.5px;color:var(--ink2);cursor:pointer;transition:all .5s var(--ease);background:var(--plate)}
.sw i{width:16px;height:16px;border-radius:50%;background:var(--v);display:block;flex:none}
.sw.on{border-color:var(--acc-ink);background:rgba(225,6,0,.12);color:#fff}
.sw.locked{opacity:.45;cursor:not-allowed}
.sw.locked::after{content:attr(data-lock);position:absolute;right:-4px;top:-8px;font:600 9.5px/1.4 var(--display);letter-spacing:.06em;padding:1px 6px;border-radius:999px;background:var(--bg3);border:1px solid var(--line2);color:var(--ink2)}
.sw .ic{width:15px;height:15px;color:var(--acc-ink)}
.sw.banner i{width:34px;height:20px;border-radius:5px}
.sw.frame i{background:var(--bg3);box-shadow:var(--v)}
.preview{position:sticky;top:90px}
.preview .pv{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--bg2)}
.preview .pv .pb{height:90px;background:var(--pb)}
.preview .pv .body{padding:0 18px 18px;margin-top:-30px}
.preview .pv .av{width:64px;height:64px;border:3px solid var(--bg2)}
.preview .pv .nm{margin-top:10px;font-size:16px}
.preview .pv .sm{font-size:13px;color:var(--ink3);margin-top:6px}

/* ---------- reports ---------- */
.rep{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--bg2);margin-bottom:8px}
.rep .snip{font-size:14px;color:var(--ink);margin-top:4px}
.rep small{font-size:12.5px;color:var(--ink3)}

/* ---------- modal, toasts ---------- */
.modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .6s var(--ease)}
.modal.open{opacity:1;pointer-events:auto}
.modal .shade{position:absolute;inset:0;background:rgba(3,3,4,.8);backdrop-filter:blur(10px)}
.modal .box{position:relative;width:min(520px,100%);background:var(--bg2);border:1px solid var(--line2);border-radius:18px;padding:24px;transform:translateY(30px) scale(.97);transition:transform .8s var(--ease);box-shadow:0 40px 120px rgba(0,0,0,.6)}
.modal.open .box{transform:none}
.modal h3{font:800 20px/1.15 var(--display);letter-spacing:-.02em;margin-bottom:8px}
.modal p{color:var(--ink2);font-size:14.5px}
.modal .f{margin-top:16px}
.modal .acts{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.modal .box.wide{width:min(760px,100%)}
.modal .box.lb{padding:0;background:transparent;border:0;box-shadow:none;width:auto;max-width:min(1100px,100%)}
.modal .box.lb img{max-height:85vh;border-radius:12px}
.toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:95;display:grid;gap:8px;pointer-events:none;width:min(440px,calc(100% - 40px))}
.toast{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;background:var(--bg2);border:1px solid var(--line2);box-shadow:0 20px 60px rgba(0,0,0,.6);font-size:14px;animation:toastin .7s var(--ease) both}
.toast .emo,.toast .ic{width:20px;height:20px;flex:none}
.toast.bad{border-color:rgba(255,59,48,.5)}
.toast.bad .ic{color:var(--acc-ink)}
@keyframes toastin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(32px);transition:opacity 1.3s var(--ease),transform 1.5s var(--ease);transition-delay:var(--d,0s)}
.rv.seen{opacity:1;transform:none}
.spin{width:22px;height:22px;border:2px solid var(--line2);border-top-color:var(--acc-ink);border-radius:50%;animation:spin 1s linear infinite;margin:40px auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- footer ---------- */
footer{position:relative;z-index:1;border-top:1px solid var(--line);margin-top:clamp(60px,12vh,140px);background:linear-gradient(to bottom,transparent,rgba(0,0,0,.45))}
footer .in{max-width:var(--wrap);margin:0 auto;padding:48px var(--gutter) 40px;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px}
footer h4{font:800 12px/1 var(--display);letter-spacing:.22em;text-transform:uppercase;color:var(--ink3);margin:0 0 16px}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
footer li a,footer li button{font-size:14px;color:var(--ink2);display:inline-flex;align-items:center;gap:8px;transition:color .4s}
footer li a:hover,footer li button:hover{color:#fff}
footer p{font-size:14px;color:var(--ink3);max-width:44ch;margin-top:14px;line-height:1.6}
footer .fb{display:flex;align-items:center;gap:16px}
footer .fb .box{width:56px;height:56px;flex:none}
footer .fb .box img{width:100%;height:100%;object-fit:contain}
footer .big{font:800 clamp(28px,4vw,48px)/1 var(--display);letter-spacing:-.04em;color:var(--ink)}
footer .big em{font-style:normal;color:var(--acc-ink)}
footer .ipf{margin-top:16px;display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;color:var(--ink2);padding:8px 12px;border:1px solid var(--line2);border-radius:999px;transition:border-color .4s,color .4s}
footer .ipf:hover{border-color:var(--acc-ink);color:#fff}
footer .ipf .ic{width:14px;height:14px}
footer .copy{grid-column:1/-1;border-top:1px solid var(--line);padding-top:20px;display:flex;justify-content:space-between;gap:16px;font-size:12.5px;color:var(--ink3);flex-wrap:wrap}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .top .ip{display:none}
  .top nav a{padding:8px 9px;font-size:13px}
}
@media (max-width:1000px){
  .grid,.tiles{grid-template-columns:1fr 1fr}
  .card.big,.tile.big{grid-column:span 2}
  .stats{grid-template-columns:1fr 1fr}
  .process{grid-template-columns:1fr 1fr;gap:28px 16px}
  .process::before{display:none}
  .art-grid,.forum-grid,.setgrid{grid-template-columns:1fr}
  .toc{display:none}
  .side{position:static}
  .rgrid{grid-template-columns:1fr 1fr}
  .pstats{grid-template-columns:1fr 1fr}
  .ptwo{grid-template-columns:1fr}
  .preview{position:static}
  footer .in{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .top nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;padding:10px var(--gutter) 16px;background:rgba(7,7,8,.97);border-bottom:1px solid var(--line)}
  .top nav.open{display:flex}
  .top nav a{padding:12px 10px;font-size:15px}
  .burger{display:grid}
  .top .in{gap:10px}
  .brand small{display:none}
  .account .me b{display:none}
  .grid,.tiles{grid-template-columns:1fr}
  .card.big,.tile.big{grid-column:auto}
  .stats{grid-template-columns:1fr 1fr}
  .stat{padding:20px 18px 18px}
  .stat .ic{display:none}
  .process,.rgrid{grid-template-columns:1fr}
  .kv div{grid-template-columns:1fr;gap:6px}
  .pn{grid-template-columns:1fr}
  .pn a.next{text-align:left;align-items:flex-start}
  footer .in{grid-template-columns:1fr}
  .art-body{font-size:16px}
  .sh{flex-direction:column;align-items:flex-start}
  .hero,.band-cta,.phead.photo{min-height:0}
  .q .a p{padding-left:22px}
  .secrow{grid-template-columns:44px minmax(0,1fr)}
  .secrow .ico{width:44px;height:44px}
  .secrow .counts{grid-column:2;text-align:left;margin-top:8px}
  .thr{grid-template-columns:36px minmax(0,1fr)}
  .thr .av{width:36px;height:36px}
  .thr .nums{grid-column:2}
  .post{grid-template-columns:1fr}
  .post .who{flex-direction:row;align-items:center;border-right:0;border-bottom:1px solid var(--line);padding:14px 16px;flex-wrap:wrap}
  .post .who .av{width:44px;height:44px}
  .post .who .cnt{margin-top:0;margin-left:auto}
  .pcard{grid-template-columns:1fr;gap:10px}
  .pcard .av{width:88px;height:88px}
  .pcard .acts{justify-content:flex-start;padding-top:0}
  .arow{grid-template-columns:32px minmax(0,1fr)}
  .arow .ab{grid-column:2}
  .f .row{grid-template-columns:1fr}
}
@media (max-width:420px){
  .brand>span:last-child{display:none}
}
@media (prefers-reduced-motion:reduce){
  .rv,.art-body .r,.tbl tbody tr{opacity:1;transform:none;transition:none;animation:none}
  .hero .bg img,.phead .bg img{animation:none}
  .w>span{transform:none}
  .view{opacity:1}
}