﻿@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
:root{--ink:#09090b;--ink2:#111114;--paper:#efe9dd;--mute:#8d887d;--line:rgba(239,233,221,.12);--hot:#ff4d2e;--ok:#7fd6a0;--serif:'Instrument Serif',serif;--sans:'Inter Tight',sans-serif;--mono:'JetBrains Mono',monospace}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--ink);color:var(--paper);font:400 15px/1.5 var(--sans);overflow-x:hidden;min-height:100vh}
body::before{content:"";position:fixed;inset:0;z-index:50;pointer-events:none;background:radial-gradient(520px circle at var(--mx,70%) var(--my,20%),rgba(255,177,153,.09),transparent 60%)}
body::after{content:"";position:fixed;inset:-50%;z-index:60;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
header{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;gap:30px;padding:16px 36px;background:linear-gradient(var(--ink),transparent);backdrop-filter:blur(6px)}
.wm{font-family:var(--serif);font-size:32px;font-style:italic;line-height:1;display:flex;align-items:center;gap:8px;cursor:pointer}
.wm i{width:9px;height:9px;border-radius:50%;background:var(--hot);animation:rec 1.8s ease-in-out infinite}
@keyframes rec{50%{opacity:.2}}
nav{display:flex;gap:26px;flex:1}
nav a{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);position:relative;transition:.3s;padding:6px 0}
nav a:hover,nav a.on{color:var(--paper)}
nav a.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--hot);box-shadow:0 0 10px var(--hot)}
.who{display:flex;align-items:center;gap:10px}
select{all:unset;cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);padding:7px 14px;border-radius:99px;background:var(--ink2)}
.av{width:34px;height:34px;border-radius:50%;background:conic-gradient(var(--hot),#ffb199,var(--hot));display:grid;place-items:center;color:#16100e;font-weight:600;font-size:13px}
main{padding:104px 36px 130px;max-width:1320px;margin:0 auto;animation:pg .6s both}
@keyframes pg{from{opacity:0;transform:translateY(14px)}}
h1.t{font-family:var(--serif);font-weight:400;font-size:clamp(44px,7vw,96px);line-height:.95;letter-spacing:-.02em}
h1.t em,h2 em{color:var(--hot)}
h2{font-family:var(--serif);font-weight:400;font-size:36px;line-height:1;margin:46px 0 18px;display:flex;align-items:baseline;gap:16px}
h2::after{content:"";flex:1;height:1px;background:var(--line)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0}
.chip{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:7px 14px;border-radius:99px;border:1px solid var(--line);cursor:pointer;transition:.3s}
.chip.on,.chip:hover{background:var(--paper);color:var(--ink)}
.b{all:unset;box-sizing:border-box;cursor:pointer;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;padding:13px 24px;border-radius:99px;border:1px solid var(--line);transition:.35s;display:inline-block}
.b:hover{border-color:var(--paper)}
.b.p{background:var(--hot);border-color:var(--hot);color:#16100e}.b.p:hover{box-shadow:0 0 36px rgba(255,77,46,.6)}
.b.off{opacity:.4;cursor:not-allowed}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:20px}
.pc{cursor:pointer;perspective:700px}
.po{aspect-ratio:2/3;border-radius:14px;position:relative;overflow:hidden;border:1px solid var(--line);padding:12px;display:flex;align-items:flex-end;transition:transform .2s,box-shadow .3s;background:linear-gradient(160deg,var(--c1),var(--c2))}
.po::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 15%,rgba(255,255,255,.3),transparent 50%)}
.po::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(0,0,0,.8))}
.po span{position:relative;z-index:1;font-family:var(--serif);font-size:22px;line-height:1}
.pc:hover .po{box-shadow:0 0 30px rgba(255,77,46,.35);border-color:var(--hot)}
.pc .m{display:flex;justify-content:space-between;margin-top:8px}
.hero{position:relative;border-radius:26px;overflow:hidden;padding:64px 48px;border:1px solid var(--line);min-height:360px;display:flex;flex-direction:column;justify-content:flex-end}
.hero::before{content:"";position:absolute;inset:0;background:var(--bg)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,9,11,.92),rgba(9,9,11,.2) 70%),linear-gradient(transparent 40%,var(--ink))}
.hero>*{position:relative;z-index:1}
.rows a{display:grid;grid-template-columns:60px 1fr auto 36px;gap:18px;align-items:center;padding:24px 0;border-top:1px solid var(--line);position:relative;transition:padding .4s}
.rows a:last-child{border-bottom:1px solid var(--line)}
.rows a::before{content:"";position:absolute;inset:0;background:var(--hot);transform:scaleY(0);transform-origin:bottom;transition:transform .4s;z-index:-1}
.rows{position:relative;z-index:0}
.rows a:hover{padding-inline:20px;color:#16100e}.rows a:hover::before{transform:scaleY(1)}.rows a:hover .mono{color:#16100e}
.rows h3{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4.4vw,54px);line-height:1}
.card{border:1px solid var(--line);border-radius:20px;background:linear-gradient(160deg,rgba(255,255,255,.04),transparent);padding:24px;position:relative}
.two{display:grid;grid-template-columns:1.4fr 1fr;gap:18px}
.det{display:grid;grid-template-columns:300px 1fr;gap:44px;align-items:start}
.det .po{aspect-ratio:2/3}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;padding:5px 10px;border:1px solid var(--line);border-radius:6px;color:var(--mute)}
.tag.h{color:var(--hot);border-color:var(--hot)}
.screen{aspect-ratio:16/8;border-radius:20px;border:1px solid var(--line);position:relative;overflow:hidden;background:radial-gradient(circle at 50% 40%,#2a1710,#0b0a0a 70%)}
.screen .pl{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px;border-radius:50%;background:var(--hot);display:grid;place-items:center;color:#16100e;font-size:26px;cursor:pointer;box-shadow:0 0 50px rgba(255,77,46,.6);animation:pulse 2.4s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 18px transparent,0 0 50px rgba(255,77,46,.6)}}
.tl{position:absolute;left:22px;right:22px;bottom:22px;height:6px;background:rgba(255,255,255,.18);border-radius:6px;cursor:pointer}
.tl i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:var(--hot);box-shadow:0 0 12px var(--hot);transition:width .5s}
.tl u{position:absolute;top:-5px;width:3px;height:16px;border-radius:2px;background:var(--paper);cursor:pointer;transition:.2s}
.tl u:hover{background:var(--hot);height:22px;top:-8px}
.chap{display:flex;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line);cursor:pointer;transition:.3s}
.chap:hover{color:var(--hot);padding-left:8px}
.chap b{font-family:var(--mono);font-weight:400;font-size:12px;color:var(--mute);min-width:52px}
.match{display:grid;grid-template-columns:90px 1fr auto auto;gap:22px;align-items:center;padding:22px 0;border-top:1px solid var(--line);cursor:pointer;transition:.3s}
.match:hover{padding-inline:14px;background:rgba(255,255,255,.03)}
.sc{font-family:var(--serif);font-size:44px;line-height:1}
.w{color:var(--ok)}.l{color:var(--hot)}
.pho{columns:4 190px;column-gap:14px}
.ph{break-inside:avoid;margin-bottom:14px;border-radius:16px;border:1px solid rgba(255,255,255,.14);cursor:pointer;transition:transform .35s,box-shadow .35s;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:10px;background:radial-gradient(circle at 25% 20%,var(--c2),transparent 55%),radial-gradient(circle at 80% 85%,var(--c1),transparent 60%),linear-gradient(150deg,var(--c1),var(--c2))}
.ph::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-120%);transition:transform .9s}
.ph:hover::before{transform:translateX(120%)}
.ph:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 18px 40px rgba(0,0,0,.5),0 0 28px rgba(255,77,46,.28)}
.glass{background:rgba(255,255,255,.09);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 24px rgba(0,0,0,.25)}
.ph .gl{position:relative;z-index:1;width:100%;border-radius:11px;padding:8px 11px;display:flex;justify-content:space-between;align-items:center;font:10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#fff;opacity:0;transform:translateY(10px);transition:.35s}
.ph:hover .gl{opacity:1;transform:none}
.bar-g{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 12px;border-radius:99px;margin:18px 0 8px;width:fit-content}
.bar-g .chip{border-color:transparent}
.lb{position:fixed;inset:0;z-index:100;background:rgba(5,5,6,.6);display:none;place-items:center;backdrop-filter:blur(22px) saturate(1.3)}
.lb.on{display:grid}.lb .im{width:min(84vw,980px);aspect-ratio:3/2;border-radius:22px;border:1px solid rgba(255,255,255,.18);position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:18px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb .info{width:100%;border-radius:16px;padding:14px 18px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;color:#fff}
.lb .info b{font:500 17px var(--serif);display:block}.lb .info .mono{color:rgba(255,255,255,.7)}
.lb .acts{display:flex;gap:8px}.lb .acts span{padding:9px 16px;border-radius:99px;font:11px var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:.3s}.lb .acts span:hover{background:rgba(255,255,255,.22)}
.mod{position:fixed;inset:0;z-index:100;background:rgba(5,5,6,.8);display:none;place-items:center;backdrop-filter:blur(6px)}.mod.on{display:grid}
.mod .card{width:min(460px,92vw);background:var(--ink2)}
.opt{display:flex;justify-content:space-between;padding:13px 14px;border:1px solid var(--line);border-radius:12px;margin:8px 0;cursor:pointer;transition:.3s}
.opt:hover,.opt.on{border-color:var(--hot);background:rgba(255,77,46,.07)}
.plan{height:330px;position:relative;margin-top:14px}
.plan svg{position:absolute;inset:0;width:100%;height:100%}
.room{position:absolute;transform:translate(-50%,-50%);text-align:center;cursor:pointer}
.room u{display:block;width:16px;height:16px;border-radius:50%;margin:0 auto 8px;border:1.5px solid var(--mute);position:relative}
.room.on u{background:var(--hot);border-color:var(--hot);box-shadow:0 0 18px var(--hot)}
.room.on u::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1px solid var(--hot);animation:ping 2s ease-out infinite}
@keyframes ping{from{transform:scale(.5);opacity:1}to{transform:scale(1.8);opacity:0}}
.room span{font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase}.room small{display:block;font:10px var(--mono);color:var(--mute)}
input[type=range]{accent-color:var(--hot);width:100%}
.vol{display:flex;align-items:center;gap:14px;padding:10px 0;border-top:1px solid var(--line)}.vol span{min-width:90px}
.vis{display:flex;align-items:flex-end;gap:3px;height:42px}.vis i{flex:1;background:var(--hot);border-radius:2px;height:20%;animation:eq 1.1s ease-in-out infinite alternate}
@keyframes eq{to{height:100%}}
.disc{width:150px;height:150px;border-radius:50%;margin:0 auto;background:conic-gradient(from 20deg,#ff4d2e,#3a1208,#ffb199,#240c06,#ff4d2e);position:relative;animation:spin 18s linear infinite}
.disc::after{content:"";position:absolute;inset:36%;border-radius:50%;background:var(--ink);border:1px solid var(--line)}
@keyframes spin{to{transform:rotate(360deg)}}
table{width:100%;border-collapse:collapse}th{font:400 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);text-align:left;padding:10px 8px}
td{padding:14px 8px;border-top:1px solid var(--line);font-size:14px}
.sw{width:38px;height:20px;border-radius:20px;background:var(--line);position:relative;cursor:pointer;transition:.3s;display:inline-block}.sw::after{content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:var(--paper);transition:.3s}.sw.on{background:var(--hot)}.sw.on::after{left:21px}
.ban{border:1px solid rgba(127,214,160,.4);background:rgba(127,214,160,.07);color:var(--ok);border-radius:12px;padding:12px 16px;font:12px var(--mono);letter-spacing:.06em;margin-bottom:20px}
.al{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--line)}.dot{width:9px;height:9px;border-radius:50%;margin-top:7px;flex:none}
.login{min-height:84vh;display:grid;place-items:center}.login .card{width:min(420px,92vw);padding:36px}
.login input{all:unset;box-sizing:border-box;width:100%;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:8px 0 14px;background:var(--ink2);transition:.3s}.login input:focus{border-color:var(--hot);box-shadow:0 0 0 3px rgba(255,77,46,.15)}
.toast{position:fixed;left:50%;bottom:90px;transform:translate(-50%,30px);background:var(--paper);color:var(--ink);padding:12px 22px;border-radius:99px;font:500 12px var(--mono);letter-spacing:.06em;opacity:0;transition:.4s;z-index:120;pointer-events:none}.toast.on{opacity:1;transform:translate(-50%,0)}
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:0;view-transition-name:gl}
body[data-cat=photos]{--hot:#36d6c8}body[data-cat=matchs]{--hot:#6cb4ff}body[data-cat=musique]{--hot:#ff3fbf}body[data-cat=regie]{--hot:#ffb02e}body[data-cat=admin]{--hot:#5fe08f}
body[data-cat=admin] td,body[data-cat=admin] th,body[data-cat=admin] h1.t{font-family:var(--mono)}
body[data-cat=admin] h1.t{font-size:clamp(34px,5vw,64px);letter-spacing:-.04em}
.b.p{color:#0b0b0d}
#cat{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
#cat s{display:block;position:absolute;text-decoration:none}
#cat .perf{position:absolute;top:-34px;bottom:0;width:20px;background:repeating-linear-gradient(180deg,rgba(239,233,221,.11) 0 18px,transparent 18px 34px);border-radius:3px;animation:perf 1.3s linear infinite}
@keyframes perf{to{transform:translateY(34px)}}
.bk{border-radius:50%;background:radial-gradient(circle,rgba(120,240,230,.24),rgba(120,240,230,.05) 60%,transparent 70%);filter:blur(6px);animation:bk linear infinite}
@keyframes bk{50%{transform:translate(40px,-60px) scale(1.25)}}
.sn{top:-10px;border-radius:50%;background:#dff0ff;opacity:.7;animation:sn linear infinite}
@keyframes sn{to{transform:translate(-70px,110vh)}}
.sk{left:-40%;width:40%;height:2px;background:linear-gradient(90deg,transparent,rgba(160,210,255,.75),transparent);transform:skewX(-30deg);animation:sk 5s ease-in infinite}
@keyframes sk{to{left:130%}}
.eb{bottom:0;width:1.6%;height:8%;background:linear-gradient(var(--hot),transparent);opacity:.35;border-radius:4px 4px 0 0;animation:eq2 1s ease-in-out infinite alternate}
@keyframes eq2{to{height:34%}}
.so{left:50%;bottom:-200px;width:400px;height:400px;margin-left:-200px;border-radius:50%;border:1px solid var(--hot);opacity:0;animation:so 6s ease-out infinite}
@keyframes so{from{transform:scale(.2);opacity:.55}to{transform:scale(4);opacity:0}}
.sc2{left:0;right:0;top:-10%;height:90px;background:linear-gradient(transparent,rgba(95,224,143,.13),transparent);animation:sc 6s linear infinite}
@keyframes sc{to{top:110%}}
#cat:has(.sc2){background:linear-gradient(rgba(95,224,143,.045) 1px,transparent 1px) 0 0/100% 32px,linear-gradient(90deg,rgba(95,224,143,.045) 1px,transparent 1px) 0 0/32px 100%}
.du{width:3px;height:3px;border-radius:50%;background:#ffd9bd;opacity:0;animation:du linear infinite}
@keyframes du{0%{opacity:0}20%{opacity:.8}100%{opacity:0;transform:translate(30px,-220px)}}
html[data-vt=films]::view-transition-new(root){animation:vtFilms 1s cubic-bezier(.7,0,.2,1) both}
html[data-vt=photos]::view-transition-new(root){animation:vtIris 1.1s cubic-bezier(.6,0,.2,1) both}
html[data-vt=matchs]::view-transition-new(root){animation:vtSkate .6s cubic-bezier(.2,.9,.2,1) both}
html[data-vt=musique]::view-transition-new(root){animation:vtPulse .9s cubic-bezier(.2,.8,.2,1) both}
html[data-vt=regie]::view-transition-new(root){animation:vtSonar 1.1s cubic-bezier(.5,0,.2,1) both}
html[data-vt=admin]::view-transition-new(root){animation:vtScan .7s linear both}
@keyframes vtFilms{from{clip-path:inset(50% 0 50% 0)}to{clip-path:inset(0)}}
@keyframes vtIris{from{clip-path:circle(0% at 50% 50%)}to{clip-path:circle(150% at 50% 50%)}}
@keyframes vtSkate{from{opacity:0;transform:translateX(110px) skewX(-14deg)}}
@keyframes vtPulse{from{opacity:0;transform:scale(1.12);filter:blur(16px)}}
@keyframes vtSonar{from{clip-path:circle(0% at 50% 100%)}to{clip-path:circle(160% at 50% 100%)}}
@keyframes vtScan{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
body[data-cat=matchs] .match.rv.in{animation-name:rvSlide}
body[data-cat=photos] .ph.rv.in{animation-name:rvIris}
body[data-cat=musique] .pc.rv.in{animation-name:rvPop}
@keyframes rvSlide{from{opacity:0;translate:-70px 0;filter:blur(6px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes rvIris{from{opacity:0;scale:.55;filter:blur(12px)}to{opacity:1;scale:1;filter:blur(0)}}
@keyframes rvPop{from{opacity:0;scale:.6;rotate:-7deg}to{opacity:1;scale:1;rotate:0deg}}
.tl u{animation:mk 1.8s ease-in-out infinite}
@keyframes mk{50%{box-shadow:0 0 14px var(--hot);background:var(--hot)}}
@media(max-width:860px){#cat .perf{display:none}}
main{position:relative;z-index:2}
header{view-transition-name:hd}
#cur{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid #fff;border-radius:50%;z-index:300;pointer-events:none;mix-blend-mode:difference;opacity:0;transition:width .3s,height .3s,margin .3s,background .3s,opacity .3s;view-transition-name:cur}
#cur.on{opacity:1}#cur.hv{width:74px;height:74px;margin:-37px 0 0 -37px;background:#fff}
html.cc,html.cc *{cursor:none!important}
#cv{position:fixed;inset:0;z-index:200;pointer-events:none;display:grid;place-items:center}
#cv i{position:absolute;top:0;bottom:0;width:50.4%;transition:transform 1s cubic-bezier(.7,0,.2,1);background:repeating-linear-gradient(90deg,rgba(0,0,0,.4) 0 7px,transparent 7px 44px,rgba(255,255,255,.05) 44px 52px),linear-gradient(#5e130a,#2a0905);box-shadow:0 0 60px rgba(0,0,0,.8)}
#cv i:nth-child(1){left:0;transform:translateX(-102%)}#cv i:nth-child(2){right:0;transform:translateX(102%)}
#cv b{position:relative;font:italic 400 clamp(60px,12vw,150px) var(--serif);color:#f3dcc0;opacity:0;transition:opacity .5s;text-shadow:0 0 40px rgba(255,77,46,.6)}
#cv.close i{transform:none}#cv.close b{opacity:1;transition-delay:.55s}
::view-transition-old(root){animation:vtOut .4s cubic-bezier(.4,0,.2,1) both}
::view-transition-new(root){animation:vtIn .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes vtOut{to{opacity:0;filter:blur(10px);transform:scale(.985)}}
@keyframes vtIn{from{opacity:0;filter:blur(14px);transform:translateY(26px) scale(1.01)}}
.rv{opacity:0}.rv.in{animation:rvIn .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0ms)}
@keyframes rvIn{from{opacity:0;translate:0 38px;filter:blur(6px)}to{opacity:1;translate:0 0;filter:blur(0)}}
h1.t{animation:tIn 1.1s cubic-bezier(.2,.8,.2,1) both}
@keyframes tIn{from{opacity:0;translate:0 40px;filter:blur(14px)}}
@keyframes chIn{from{opacity:0;translate:0 .55em;filter:blur(10px)}}
#cft{animation:none}
.cfw{margin:-10px -36px 0;padding-top:6px;overflow:hidden}
.cft{text-align:center;margin-bottom:6px}
.cf{height:430px;position:relative;perspective:1500px;touch-action:pan-y;user-select:none}
.cfi{position:absolute;left:50%;top:14px;width:240px;margin-left:-120px;transform:translateZ(-700px) scale(.5);opacity:0;transition:transform 1s cubic-bezier(.2,.8,.2,1),opacity .8s,filter .8s;transform-style:preserve-3d;cursor:pointer}
.cfi .po{-webkit-box-reflect:below 8px linear-gradient(transparent 72%,rgba(255,255,255,.22));box-shadow:0 30px 60px rgba(0,0,0,.55)}
.cfi.c .po{border-color:rgba(255,255,255,.5);box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 60px color-mix(in srgb,var(--c2) 45%,transparent)}
.cfi .po::before{background:radial-gradient(circle at var(--gx,30%) var(--gy,15%),rgba(255,255,255,.4),transparent 52%)}
.cfinfo{text-align:center;margin-top:34px}
.cfinfo h1.t{font-size:clamp(42px,7vw,92px)}
.cfinfo .tags{justify-content:center}
.stats2{display:flex;justify-content:center;gap:clamp(24px,6vw,80px);margin:46px 0 0;flex-wrap:wrap}
.stats2 b{display:block;font:400 clamp(38px,5vw,60px)/1 var(--serif)}
.stats2 small{font:10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.tabs{display:none}
@media(max-width:860px){.cfw{margin:-10px -16px 0}.cf{height:400px}.cfi{width:200px;margin-left:-100px}}
@media(max-width:860px){header{padding:12px 16px}nav{display:none}.who select{display:none}main{padding:84px 16px 120px}.two,.det{grid-template-columns:1fr}.det .po{max-width:220px}.match{grid-template-columns:70px 1fr auto}.match .b{display:none}.rows a{grid-template-columns:40px 1fr 24px}.rows a .mono:nth-child(3){display:none}.hero{padding:34px 22px}
.tabs{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:45;background:rgba(9,9,11,.92);backdrop-filter:blur(14px);border-top:1px solid var(--line);justify-content:space-around;padding:10px 4px calc(10px + env(safe-area-inset-bottom))}.tabs a{font:10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);padding:6px 10px}.tabs a.on{color:var(--hot)}}
.err{color:#ff8a75;font:12px var(--mono);letter-spacing:.04em;min-height:18px;margin:-4px 0 10px}
.who-n{white-space:nowrap}
.who{gap:12px}
.b.sm{padding:8px 14px;font-size:10.5px}
.qr{background:#fff;padding:14px;border-radius:14px;width:210px;margin:6px 0 14px}
.qr svg{display:block;width:100%;height:auto}
.sec{font-family:var(--mono);font-size:13px;letter-spacing:.12em;word-break:break-all;padding:10px 12px;border:1px solid var(--line);border-radius:10px;margin:8px 0 14px;user-select:all}
.inp{all:unset;box-sizing:border-box;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--ink2);min-width:0;transition:.3s}
.inp:focus{border-color:var(--hot)}
form.inv{display:grid;grid-template-columns:1.6fr 1fr auto auto;gap:12px;align-items:center;margin:12px 0 18px}
.ban.demo{border-color:rgba(255,176,46,.4);background:rgba(255,176,46,.07);color:#ffb02e}
td select{font-size:10.5px}
@media(max-width:860px){form.inv{grid-template-columns:1fr}.who-n{display:none}.who .b.sm{padding:6px 10px}}

.addgrid{display:grid;grid-template-columns:1fr 1.4fr auto;gap:12px;margin:14px 0 4px}
.permgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.pc-row{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.lnk{cursor:pointer;color:var(--hot)}.lnk:hover{text-decoration:underline}.lnk.bad{color:#ff8a75}
.field{display:block;width:100%}
@media(max-width:860px){.addgrid{grid-template-columns:1fr}}
@media(max-width:860px){.tabs{overflow-x:auto;justify-content:flex-start;gap:2px;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tabs a{white-space:nowrap;flex:none}}
.crumbs{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:14px 0 6px;font:11px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.crumbs span{cursor:pointer;color:var(--hot)}.crumbs span:hover{text-decoration:underline}.crumbs i{color:var(--mute);font-style:normal}
.fsrow{display:flex;align-items:center;gap:12px;padding:13px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.fsname{flex:1;cursor:pointer;font-size:17px;min-width:140px}.fsname:hover{color:var(--hot)}.fsname.dim{cursor:default;color:var(--mute)}.fsname.dim:hover{color:var(--mute)}
.pickbox{border:1px solid var(--hot);border-radius:14px;padding:16px 18px;margin:12px 0 8px;background:rgba(255,255,255,.03)}
.dirgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:16px 0 8px}
.dircard{display:block;border:1px solid var(--line);border-radius:16px;padding:18px 20px;cursor:pointer;background:linear-gradient(160deg,rgba(255,255,255,.05),transparent);transition:.3s;color:inherit;text-decoration:none}
.dircard:hover{border-color:var(--hot);transform:translateY(-3px);box-shadow:0 0 28px rgba(255,255,255,.04)}
.dn{font-family:var(--serif);font-size:26px;line-height:1.1;margin-bottom:6px;word-break:break-word}
.filelist{margin-top:18px}
.frow{display:flex;align-items:center;gap:16px;padding:14px 4px;border-top:1px solid var(--line);flex-wrap:wrap}
.fmain{flex:1;min-width:200px}.ftitle{font-size:18px}.fmeta{margin-top:2px;text-transform:none}
.facts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mod.wide .card{width:min(1000px,96vw);max-height:90vh;overflow:auto}
.pvhead{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.ptitle{font-family:var(--serif);font-size:30px;line-height:1.1}
.pv{display:block;width:100%;max-height:70vh;border-radius:14px;background:#000}
.accbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:12px 0;font-size:14px}
.accbar select{margin-left:auto}
