:root{color-scheme:light;--bg:#f6f7f9;--fg:#15171a;--mut:#5d6572;--bd:color-mix(in srgb,var(--fg) 11%,transparent);--glass:color-mix(in srgb,var(--fg) 4%,transparent);--accent:#2563eb}
@media(prefers-color-scheme:dark){:root[data-theme=auto]{color-scheme:dark;--bg:#0e1014;--fg:#ececf0;--mut:#9aa2b0}}
:root[data-theme=dark]{color-scheme:dark;--bg:#0e1014;--fg:#ececf0;--mut:#9aa2b0}
*{box-sizing:border-box}
body{margin:0;font:1rem/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--fg);-webkit-font-smoothing:antialiased;
background:radial-gradient(900px 520px at 12% -8%,color-mix(in srgb,var(--accent) 20%,transparent),transparent),radial-gradient(700px 480px at 95% 8%,color-mix(in srgb,var(--accent) 11%,transparent),transparent),var(--bg);background-attachment:fixed}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;background-image:radial-gradient(color-mix(in srgb,var(--fg) 12%,transparent) 1px,transparent 1px);background-size:26px 26px;mask-image:linear-gradient(#000,transparent 70%)}
::selection{background:color-mix(in srgb,var(--accent) 45%,transparent)}
a{color:color-mix(in srgb,var(--accent) 65%,var(--fg))}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
nav{position:sticky;top:0;z-index:10;display:flex;gap:1.5rem;align-items:center;padding:.8rem max(1.25rem,calc((100vw - 920px)/2));background:color-mix(in srgb,var(--bg) 70%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--bd);overflow-x:auto;white-space:nowrap}
body.editing nav{position:static}
nav a{text-decoration:none;color:var(--mut);font-size:.95rem;transition:color .2s}
nav a:hover{color:var(--fg)}
nav button{margin-left:auto;border-radius:99px;width:2.2rem;height:2.2rem;padding:0;line-height:1}
main{max-width:920px;margin:0 auto;padding:0 1.25rem 4rem}
section{padding:2.75rem 0 .5rem;scroll-margin-top:4rem}
h1{font-size:clamp(2.2rem,6vw,3.4rem);line-height:1.05;letter-spacing:-.03em;margin:0 0 .6rem}
h2{display:flex;align-items:center;gap:.65rem;font-size:1.3rem;font-weight:650;letter-spacing:-.01em;margin:0 0 1.1rem}
h2::before{content:"";width:4px;height:1.1em;border-radius:4px;background:var(--accent)}
.sub{color:var(--mut);font-size:1.15rem;margin:0 0 1rem}
.hero{display:flex;gap:2rem;align-items:center;flex-wrap:wrap-reverse;justify-content:space-between;padding-top:2rem}
.hero>div{flex:1 1 320px}
.avatar{width:200px;height:200px;border-radius:50%;object-fit:cover;border:3px solid color-mix(in srgb,var(--accent) 60%,transparent)}
.btn{display:inline-block;padding:.65rem 1.3rem;border-radius:10px;background:var(--accent);color:#fff;text-decoration:none;font-weight:600;box-shadow:0 6px 20px color-mix(in srgb,var(--accent) 35%,transparent);transition:transform .2s}
.btn:hover{transform:translateY(-2px)}
.grid{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.card{display:flex;flex-direction:column;gap:.15rem;padding:1.05rem 1.25rem;border-radius:18px;background:var(--glass);border:1px solid var(--bd);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .25s,border-color .25s,background .25s}
.card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 7%,var(--glass))}
.card h3{margin:0;font-size:1.05rem;font-weight:600}
.card p{margin:0;font-size:.92rem}
.card img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px}
.mut{color:var(--mut)}
.tags{display:flex;gap:.4rem;flex-wrap:wrap}
.tags span{font-size:.8rem;padding:.1rem .6rem;border-radius:99px;border:1px solid var(--bd);color:var(--mut)}
ul.list{list-style:none;margin:0;padding:0;display:flex;gap:.6rem;flex-wrap:wrap}
ul.list li{background:var(--glass);border:1px solid var(--bd);border-radius:99px;padding:.25rem 1rem}
button{font:inherit;cursor:pointer;border:1px solid var(--bd);background:var(--glass);color:var(--fg);border-radius:8px;padding:.25rem .7rem;transition:border-color .2s}
button:hover{border-color:var(--accent)}
#bar{position:sticky;top:0;z-index:20;display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;padding:.5rem 1rem;background:#1f2937;color:#fff;font-size:.9rem}
#bar[hidden]{display:none}
#bar button,#bar select{background:#374151;color:#fff;border-color:#4b5563}
#bar details{position:relative}#bar summary{cursor:pointer}
#bar details label{display:block;white-space:nowrap}
#st{opacity:.8;margin-left:auto}
[contenteditable]{outline:1px dashed var(--accent);outline-offset:2px;min-height:1em}
img[data-img]{cursor:pointer;outline:2px dashed var(--accent);min-height:60px;background:#8883}
.ctl{display:flex;gap:.25rem;margin-top:.4rem}.add{align-self:flex-start;margin-top:.7rem}
.off{opacity:.4}
@media(prefers-reduced-motion:no-preference){
html{scroll-behavior:smooth}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@supports(animation-timeline:view()){#about p,.card,h2{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 35%}}
}
/* Editor polish */
:root{--cols:2;--radius:18px}
.grid{grid-template-columns:repeat(var(--cols),minmax(0,1fr))}
@media(max-width:640px){.grid{grid-template-columns:1fr}}
.card,#about p{border-radius:var(--radius)}
[contenteditable]{outline:1px dashed transparent;border-radius:4px;transition:outline-color .15s,background .15s}
[contenteditable]:hover{outline-color:color-mix(in srgb,var(--accent) 60%,transparent);background:color-mix(in srgb,var(--accent) 6%,transparent)}
[contenteditable]:focus{outline:2px solid var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
#bar{display:block;padding:0;background:#11141a;border-bottom:1px solid #2a303a}
#bar .row{display:flex;gap:.4rem;align-items:center;padding:.55rem 1rem;flex-wrap:wrap}
#bar .sp{flex:1}
#bar button{padding:.35rem .8rem;border-radius:8px;font-size:.88rem;background:#232833;color:#e8eaee;border:1px solid #333a47}
#bar button:hover{background:#2c3340}
#bar button.pri{background:var(--accent);border-color:transparent;color:#fff;font-weight:600}
#st{font-size:.82rem;color:#aab0bb;margin:0 0 0 .5rem}
#st::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:.4rem;background:#888}
#st.ok::before{background:#34d399}#st.dirty::before{background:#fbbf24}
#dr{position:fixed;top:0;right:0;bottom:0;width:320px;max-width:92vw;overflow:auto;padding:1rem 1.1rem;background:#12151b;color:#e8eaee;border-left:1px solid #2a303a;display:none;z-index:30;font-size:.9rem}
#dr.open{display:block;animation:drin .25s ease;box-shadow:-20px 0 50px rgba(0,0,0,.4)}
@keyframes drin{from{transform:translateX(105%)}to{transform:none}}
#dr header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
#dr h4{margin:1.2rem 0 .5rem;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:#8b93a1}
#dr label{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin:.5rem 0;flex-wrap:wrap}
#dr label>span{min-width:0}
#dr select,#dr input[type=text]{background:#1c212a;color:#e8eaee;border:1px solid #333a47;border-radius:8px;padding:.3rem .5rem;font:inherit}
#dr input[type=range]{flex:1}
.sw{display:flex;gap:.45rem;align-items:center;flex-wrap:wrap}
.sw button{width:26px;height:26px;padding:0;border-radius:50%;border:2px solid #12151b!important;box-shadow:0 0 0 1px #444}
.sw input{width:34px;height:28px;border:0;padding:0;background:none}
.srow{display:flex;gap:.35rem;align-items:center;margin:.35rem 0}
.srow input[type=text]{flex:1;min-width:0}
.hint{color:#8b93a1;font-size:.8rem;margin-top:1rem}
#toast{position:fixed;left:50%;bottom:1.5rem;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#1f2937;color:#fff;padding:.65rem 1.1rem;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:.25s;z-index:40;max-width:90vw}
#toast.show{opacity:1;transform:translate(-50%,0)}
.ctl button{padding:.1rem .45rem;font-size:.8rem}
/* v3: designs, effects, animations */
:root{--glow:.6;--gx:50%;--gy:15%}
body{background:radial-gradient(900px 520px at 12% -8%,color-mix(in srgb,var(--accent) calc(var(--glow)*30%),transparent),transparent),radial-gradient(700px 480px at 95% 8%,color-mix(in srgb,var(--accent) calc(var(--glow)*16%),transparent),transparent),var(--bg);background-attachment:fixed}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(520px circle at var(--gx) var(--gy),color-mix(in srgb,var(--accent) calc(var(--glow)*20%),transparent),transparent 70%)}
html[data-spot=off] body::after{display:none}
#about p,.card,h2{animation:none!important}
html.js[data-anim=on] .rv{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
html.js[data-anim=on] .rv.in{opacity:1;transform:none}
.grid>.rv:nth-child(3n+2){transition-delay:.08s}.grid>.rv:nth-child(3n){transition-delay:.16s}
body.editing .rv{opacity:1!important;transform:none!important}
#prog{position:fixed;top:0;left:0;right:0;height:3px;z-index:50;background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}
main{max-width:1100px}
html[data-width=narrow] main{max-width:780px}html[data-width=wide] main{max-width:1300px}
section{padding:4.5rem 0 1rem}
h1{font-size:clamp(2.6rem,8vw,5.6rem);line-height:.98;letter-spacing:-.045em;font-weight:700;margin:0 0 1rem}
h2{display:block;font-size:clamp(2rem,5vw,3.4rem);line-height:1;letter-spacing:-.04em;font-weight:700;margin:0}
h2::before{display:none}
html[data-head=normal] h1,html[data-head=normal] h2{letter-spacing:-.01em;font-weight:650}
em{font-family:"Instrument Serif","Playfair Display",Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;letter-spacing:-.02em;color:color-mix(in srgb,var(--accent) 80%,#fff)}
.hd{margin-bottom:2rem}
.eye,.hero .sub{font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-weight:600;margin:0 0 .9rem}
.eye:empty::before{content:"EYEBROW LABEL";opacity:.35}
.hero{padding-top:3rem}
.hero>div{display:flex;flex-direction:column;align-items:flex-start}
.hero .sub{order:-1}
.hero p:not(.sub){color:var(--mut);font-size:1.2rem;max-width:34rem;margin:0 0 1.6rem}
.btn{border-radius:999px;padding:.8rem 1.6rem}
nav{gap:1rem}
.logo{font-size:1.15rem;letter-spacing:-.03em}
.nl{flex:1;display:flex;gap:1.4rem;justify-content:center;min-width:0;overflow-x:auto;scrollbar-width:none}
.nl::-webkit-scrollbar{display:none}
.nl a,.navl{white-space:nowrap;flex:0 0 auto}
.pill{padding:.45rem 1rem;border-radius:99px;border:1px solid var(--bd);text-decoration:none;color:var(--fg);font-size:.9rem;white-space:nowrap;transition:background .2s,color .2s}
.pill:hover{background:var(--accent);color:#fff;border-color:transparent}
nav button{margin-left:0}
html[data-nav=pill] nav{top:.8rem;width:min(1100px,calc(100% - 2rem));margin:.8rem auto 0;padding:.55rem .6rem .55rem 1.4rem;border:1px solid var(--bd);border-radius:999px;box-shadow:0 10px 40px rgba(0,0,0,.25)}
body.editing[data-x] nav{top:0}
.card{position:relative;overflow:hidden;padding:1.3rem 1.4rem;gap:.35rem}
.card h3{font-size:1.3rem;letter-spacing:-.02em;font-weight:650}
.card small{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.badge{align-self:flex-start;padding:.1rem .7rem;border:1px solid var(--bd);border-radius:99px}
.role{color:color-mix(in srgb,var(--accent) 75%,var(--fg));margin:0}
.go{margin-top:.6rem;font-size:.9rem}
html[data-card=solid] .card{background:color-mix(in srgb,var(--fg) 7%,var(--bg));backdrop-filter:none}
html[data-card=outline] .card{background:transparent;backdrop-filter:none;border-color:color-mix(in srgb,var(--fg) 24%,transparent)}
html[data-spot=on] .card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--accent) 24%,transparent),transparent 70%)}
html[data-spot=on] .card:hover::before{opacity:1}
.x .card{min-height:170px;justify-content:space-between}
.mq{overflow:hidden;border-block:1px solid var(--bd);padding:1.3rem 0;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.mt{display:flex;width:max-content;animation:mq 40s linear infinite}
.mt span{display:flex;align-items:center;gap:3rem;padding-right:3rem;font-size:1.25rem;color:var(--mut);white-space:nowrap}
.mt span::after{content:"•";color:var(--accent);opacity:.7}
.mq:hover .mt{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
html[data-anim=off] .mt{animation:none}
@media(prefers-reduced-motion:reduce){.mt{animation:none}}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));border-block:1px solid var(--bd)}
.stat{padding:2rem 1.4rem;display:flex;flex-direction:column;gap:.4rem;border-right:1px solid var(--bd)}
.stat:last-child{border-right:0}
.stat b{font-size:clamp(2.2rem,5vw,3.6rem);letter-spacing:-.045em;line-height:1;color:color-mix(in srgb,var(--accent) 70%,var(--fg))}
/* v4: blocks and editor */
.blk{position:relative}.blk.off{opacity:.45}
.strip{position:sticky;top:3.6rem;z-index:5;display:flex;gap:.35rem;align-items:center;flex-wrap:wrap;margin:0 0 1.2rem;padding:.35rem .5rem;background:#1b1f27;color:#e8eaee;border:1px solid #333a47;border-radius:10px;font-size:.8rem;width:max-content;max-width:100%}
.strip b{margin-right:.3rem;color:var(--accent)}
.strip select,.strip input{background:#12151b;color:#e8eaee;border:1px solid #333a47;border-radius:6px;padding:.15rem .4rem;font:inherit;width:auto}
.strip input{width:8.5rem}
.strip button{padding:.15rem .5rem;font-size:.8rem;background:#232833;color:#e8eaee;border-color:#333a47}
#mn{display:none;position:fixed;inset:0;z-index:45;background:rgba(4,6,10,.7);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);overflow-y:auto;padding:2.5rem 1rem 1.5rem}
#mn.open{display:block}
.mnbox{max-width:720px;margin:0 auto;background:#12151c;border:1px solid #2a303a;border-radius:16px;box-shadow:0 30px 90px rgba(0,0,0,.6);overflow:hidden}
#mn header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.2rem;border-bottom:1px solid #232833;gap:1rem}
#mn header div span{display:block;color:#8b93a1;font-size:.78rem;margin-top:.1rem}
#mn header>div>button,#mn header button{background:none;border:0;color:#8b93a1;font-size:1.05rem;padding:.2rem .45rem;cursor:pointer}
#mn header button:hover{color:#fff}
.mnsrch{display:block;width:calc(100% - 2.4rem);margin:.9rem 1.2rem .4rem;background:#1a1e26;border:1px solid #2c3340;border-radius:10px;color:#e8eaee;padding:.5rem .8rem;font:inherit;font-size:.88rem}
.mnsrch:focus{outline:none;border-color:var(--accent)}
.mncats{display:flex;gap:.3rem;padding:.4rem 1.2rem .6rem;flex-wrap:wrap}
.mncats button{background:#1a1e26;color:#9aa2b0;border:1px solid #2c3340;border-radius:99px;padding:.3rem .85rem;font-size:.8rem;cursor:pointer;font-family:inherit}
.mncats button.on{background:var(--accent);color:#fff;border-color:transparent}
.mngrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:.6rem;padding:.5rem 1.2rem 1.2rem}
.mngrid button{display:flex;flex-direction:column;align-items:stretch;text-align:left;background:#171b23;border:1px solid #2c3340;border-radius:12px;padding:.75rem;transition:transform .13s,border-color .13s,background .13s;cursor:pointer;font:inherit;color:inherit}
.mngrid button:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:#1c2129}
.mngrid b{color:#fff;font-size:.9rem;display:flex;align-items:center;gap:.35rem;font-weight:600}
.mngrid .chk{color:#34d399;font-style:normal;font-size:.85rem}
.mngrid .xs{color:#8b93a1;font-size:.75rem;margin-top:.15rem}
#mn .wf{display:flex;flex-direction:column;gap:5px;height:66px;padding:8px;border:1px solid #2c3340;border-radius:10px;background:#171b23;margin-bottom:.65rem;overflow:hidden;position:relative;justify-content:center}
#mn .wf i{display:block;border-radius:3px;background:#3a4252;flex:0 0 auto}
.w-tt{width:58%;height:9px;background:#4a5468}
.w-ll{width:82%;height:6px}
.w-bb{width:36%;height:12px;border-radius:6px;background:color-mix(in srgb,var(--accent) 45%,#3a4252)}
.w-av{width:16px;height:16px;border-radius:50%;background:#4a5468}
.w-bn{width:100%;height:18px;border-radius:5px;background:color-mix(in srgb,var(--accent) 22%,#2a3140)}
.w-pp{width:32%;height:10px;border-radius:99px;background:#2f3644}
.w-mq{width:100%;height:10px;border-radius:99px;background:linear-gradient(90deg,#2f3644 60%,transparent)}
.w-c3,.w-c3b{width:100%;height:30px;border-radius:5px;background:#242a35;flex:1}
.w-c3b{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 25%,#242a35),#242a35)}
.w-rw{width:100%;height:13px;border-radius:4px;background:#242a35}
.w-bx{width:100%;flex:1;border-radius:6px;background:linear-gradient(135deg,#2a3140,#22262f)}
.w-g4{width:100%;height:30px;border-radius:5px;background:repeating-linear-gradient(90deg,#242a35 0 21%,transparent 21% 25%)}
.w-fm{width:68%;height:12px;border-radius:4px;border:1px solid #3a4252;background:none}
.w-vd,.w-im{width:100%;flex:1;border-radius:6px;background:#242a35}
.w-sp{width:100%;flex:1;border-radius:6px;border:1px dashed #3a4252;background:none}
.w-t1,.w-t2,.w-t3{width:52%;height:13px;border-radius:5px;background:linear-gradient(135deg,#2a3140,#22262f);transform:rotate(-4deg)}
.w-t2{transform:rotate(3deg)}.w-t3{transform:rotate(-1deg)}
@media(max-width:560px){.mngrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}
#dr input[type=text]{background:#1c212a;color:#e8eaee;border:1px solid #333a47;border-radius:8px;padding:.3rem .5rem;font:inherit;width:11rem}
.hero-in{display:flex;flex-direction:column;align-items:flex-start}
.hero p.eye{color:var(--accent);font-size:.76rem;max-width:none}
.chip{display:inline-flex;align-items:center;gap:.7rem;padding:.4rem 1.1rem .4rem .4rem;border:1px solid var(--bd);border-radius:99px;background:var(--glass);margin-bottom:1.6rem}
.chip small{color:var(--mut)}
.av{width:44px;height:44px;border-radius:50%;object-fit:cover}
.addimg{font-size:.75rem;padding:.15rem .6rem;align-self:flex-start}
.btns{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
.btn.ghost{background:transparent;color:var(--fg);border:1px solid var(--bd);box-shadow:none}
.lead{color:var(--mut);font-size:1.2rem;max-width:36rem;margin:0 0 1.6rem}
.split{display:grid;grid-template-columns:1fr 1.1fr;gap:3rem;align-items:start}
@media(max-width:800px){.split{grid-template-columns:1fr;gap:1.5rem}}
.body{white-space:pre-line;color:var(--mut);font-size:1.15rem;margin:0}
.sub2{color:var(--mut);font-size:1.1rem;margin:1rem 0 0}
.eye.mid{text-align:center;margin-bottom:1rem}
.chead{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap}
.acts{display:flex;gap:.4rem;margin-bottom:2rem}.acts button{border-radius:99px}
.grid.car{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.grid.car>.card{flex:0 0 min(380px,85%);scroll-snap-align:start}
.grid.car.all{display:grid;overflow:visible}
.card.big{padding:2.2rem}.card.big h2{font-size:clamp(2rem,5vw,3.4rem)}
.dot::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:.6rem}
.foot{display:flex;align-items:baseline;gap:.6rem;margin-top:auto;padding-top:1rem;border-top:1px solid var(--bd)}
.foot b{font-size:1.5rem;letter-spacing:-.03em}
.cimg{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;margin-bottom:.5rem}
.rows{border-top:1px solid var(--bd)}
.rowi{display:grid;grid-template-columns:1fr 1.5fr auto;gap:1.5rem;align-items:center;padding:1.4rem 0;border-bottom:1px solid var(--bd)}
.rowi h3,.rowi p{margin:0}.rowi h3{font-size:1.25rem}
@media(max-width:700px){.rowi{grid-template-columns:1fr;gap:.5rem}}
.panel{padding:1.2rem;border:1px solid var(--bd);border-radius:var(--radius);background:var(--glass)}
.gal{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:.8rem}
.tile{margin:0;aspect-ratio:1;border:1px solid var(--bd);border-radius:calc(var(--radius)*.7);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.8rem;background:var(--glass);overflow:hidden;gap:.3rem}
.tile img{max-width:100%;max-height:78%;object-fit:contain}.tile figcaption{font-size:.75rem}
.note{color:var(--mut);font-size:.85rem}
.crows{border-top:1px solid var(--bd);margin-top:2rem}
.crow{display:flex;justify-content:space-between;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--bd);text-decoration:none;color:var(--fg);flex-wrap:wrap}
.form{display:flex;flex-direction:column;gap:1rem;padding:1.6rem;border:1px solid var(--bd);border-radius:var(--radius);background:var(--glass)}
.form label,.lab{display:flex;flex-direction:column;gap:.4rem;font-size:.9rem}
.form input,.form textarea{background:color-mix(in srgb,var(--bg) 60%,transparent);color:var(--fg);border:1px solid var(--bd);border-radius:12px;padding:.8rem 1rem;font:inherit}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}.chips button{border-radius:99px;padding:.45rem 1rem}
.chips button.on{background:var(--accent);color:#fff;border-color:transparent}
.form .btn{align-self:flex-start;border:0;cursor:pointer;font:inherit;font-weight:600}
footer{padding:3rem 0;text-align:center}
.t-hero{padding-top:3rem}
/* v5: every part editable */
.tkedit{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.5rem 0 1rem}
.tki{display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .5rem .25rem .9rem;border:1px solid var(--bd);border-radius:99px;background:var(--glass)}
.tki .ctl{margin:0}.tkedit .add{margin:0}
.fld{display:flex;flex-direction:column;gap:.4rem;font-size:.9rem}
.navl{color:var(--mut);font-size:.95rem}
nav .pill [contenteditable]{min-width:3rem;display:inline-block}
/* v6: everything editable */
html{font-size:calc(var(--fs,16)*1px);--mw:1100px}
html[data-width=narrow]{--mw:780px}html[data-width=wide]{--mw:1300px}
main{max-width:var(--mw)!important}
:root{--h1:clamp(2.6rem,8vw,5.6rem);--h2:clamp(2rem,5vw,3.4rem)}
body{overflow-x:clip;font-family:var(--bf,system-ui,sans-serif);background:radial-gradient(900px 520px at 12% -8%,color-mix(in srgb,var(--accent) calc(var(--glow)*30%),transparent),transparent),radial-gradient(700px 480px at 95% 8%,color-mix(in srgb,var(--accent) calc(var(--glow)*16%),transparent),transparent),var(--bg);background-attachment:fixed}
#bgfx{position:fixed;inset:0;z-index:-2;pointer-events:none;background-image:var(--bgimg);background-size:var(--bgsz,cover);background-position:var(--bgpos,center);background-repeat:no-repeat}
#bgfx::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,var(--dim,0))}
@keyframes bgzoom{from{transform:scale(1)}to{transform:scale(var(--bi,1.15))}}
@keyframes bgpan{from{transform:scale(var(--bi,1.15)) translateX(calc(var(--bp,2.5%)*-1))}to{transform:scale(var(--bi,1.15)) translateX(var(--bp,2.5%))}}
@keyframes bgfade{from{opacity:.55}to{opacity:1}}
@keyframes bgdrift{from{transform:scale(var(--bi,1.15)) translate(calc(var(--bp,2.5%)*-1),calc(var(--bp,2.5%)*-1))}to{transform:scale(calc(var(--bi,1.15) + .05)) translate(var(--bp,2.5%),var(--bp,2.5%))}}
#amb{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
html:not([data-ambient=on]) #amb{display:none}
#amb i{position:absolute;width:46vmax;height:46vmax;border-radius:50%;filter:blur(90px);opacity:.15;background:radial-gradient(circle,var(--accent),transparent 65%)}
#amb i:first-child{top:-16vmax;left:-12vmax;animation:ambf1 26s ease-in-out infinite alternate}
#amb i:last-child{bottom:-18vmax;right:-14vmax;animation:ambf2 32s ease-in-out infinite alternate}
@keyframes ambf1{to{transform:translate(9vmax,7vmax) scale(1.12)}}
@keyframes ambf2{to{transform:translate(-8vmax,-6vmax) scale(.94)}}
@media(prefers-reduced-motion:reduce){#bgfx{animation:none!important}#amb i{animation:none!important}}
h1,h2,.card h3,.rowi h3,.stat b{font-family:var(--hf,inherit)}
h1,h2{font-weight:var(--hw,700)}
h1{font-size:calc(var(--h1)*var(--hs,1)*var(--sz,1))}h2{font-size:calc(var(--h2)*var(--hs,1)*var(--sz,1))}
.card.big h2{font-size:calc(var(--h2)*var(--hs,1))}
em{font-family:var(--ef,Georgia,serif)}
section[data-sz=s]{--sz:.7}section[data-sz=l]{--sz:1.25}section[data-sz=xl]{--sz:1.5}
section.blk{padding-block:calc(4.5rem*var(--sp,1)*var(--pd,1)) calc(1rem*var(--sp,1))}
section[data-pd=none]{--pd:0}section[data-pd=s]{--pd:.5}section[data-pd=l]{--pd:1.6}
.grid{gap:calc(var(--gp,14)*1px)}
section[data-bg=panel],section[data-bg=accent],section[data-bg=custom]{padding-inline:clamp(1rem,3vw,2.5rem);margin-block:1rem;border-radius:var(--radius);border:1px solid var(--bd)}
section[data-bg=panel]{background:var(--glass)}section[data-bg=accent]{background:color-mix(in srgb,var(--accent) 14%,transparent)}section[data-bg=custom]{background:var(--bgc)}
section[data-dv=on]{border-top:1px solid var(--bd)}
section[data-al=center]{text-align:center}
section[data-al=center] .hero-in,section[data-al=center] .btns{align-items:center;justify-content:center}
section[data-al=center] .chead{justify-content:center}
section[data-w=narrow]{max-width:720px;margin-inline:auto}
section[data-w=full]{width:100vw;margin-left:calc(50% - 50vw);padding-inline:max(1.25rem,calc((100vw - var(--mw))/2))}
.split[data-r="1:1"]{grid-template-columns:1fr 1fr}.split[data-r="1:2"]{grid-template-columns:1fr 2fr}.split[data-r="2:1"]{grid-template-columns:2fr 1fr}.split[data-r="1:3"]{grid-template-columns:1fr 3fr}
@media(max-width:800px){.split[data-r]{grid-template-columns:1fr}}
[data-tc="2"] .body{columns:2;column-gap:2.5rem}[data-tc="3"] .body{columns:3;column-gap:2rem}
@media(max-width:800px){[data-tc] .body{columns:1}}
html[data-smooth=off]{scroll-behavior:auto!important}
html[data-prog=off] #prog{display:none}
html[data-sticky=off] nav{position:static}
html[data-spot=off] body::after{display:block}html[data-cursor=off] body::after{display:none}
html[data-hover=none] .card:hover{transform:none;border-color:var(--bd);background:var(--glass)}
html[data-hover=glow] .card:hover{transform:none;box-shadow:0 0 44px color-mix(in srgb,var(--accent) 35%,transparent)}
html.js[data-anim=on] section[data-fx] .rv{opacity:0;transition:opacity var(--dur,900ms) cubic-bezier(.2,.7,.2,1) var(--delay,0ms),transform var(--dur,900ms) cubic-bezier(.2,.7,.2,1) var(--delay,0ms),filter var(--dur,900ms) ease var(--delay,0ms)}
html.js[data-anim=on] section[data-fx=rise] .rv{transform:translateY(26px)}
html.js[data-anim=on] section[data-fx=fade] .rv{transform:none}
html.js[data-anim=on] section[data-fx=left] .rv{transform:translateX(-44px)}
html.js[data-anim=on] section[data-fx=zoom] .rv{transform:scale(.9)}
html.js[data-anim=on] section[data-fx=blur] .rv{transform:none;filter:blur(14px)}
html.js[data-anim=on] section[data-fx] .grid>.rv:nth-child(3n+2){transition-delay:calc(var(--st,80ms) + var(--delay,0ms))}
html.js[data-anim=on] section[data-fx] .grid>.rv:nth-child(3n){transition-delay:calc(var(--st,80ms)*2 + var(--delay,0ms))}
html.js[data-anim=on] section[data-fx] .rv.in{opacity:1;transform:none;filter:none}
html.js[data-anim=on] section[data-fx=none] .rv{opacity:1;transform:none;filter:none;transition:none}
body.editing .rv{filter:none!important}
.emb{width:100%;border:1px solid var(--bd);border-radius:var(--radius);background:#000;display:block;margin-top:1rem}
.src{display:block;white-space:pre-wrap;word-break:break-all;font-size:.85rem;padding:.5rem .7rem;border:1px solid var(--bd);border-radius:8px;min-height:2.2rem}
.spanel{display:flex;flex-wrap:wrap;gap:.6rem 1rem;padding:.7rem;margin:-.6rem 0 1.2rem;background:#1b1f27;border:1px solid #333a47;border-radius:10px;color:#e8eaee;font-size:.8rem}
.spanel label{display:flex;flex-direction:column;gap:.2rem}
.spanel select,.spanel input{background:#12151b;color:#e8eaee;border:1px solid #333a47;border-radius:6px;padding:.2rem .4rem;font:inherit}
.spanel input[type=color]{padding:0;height:1.8rem;width:3rem}.spanel input[type=number]{width:5rem}.spanel input[type=text]{width:8rem}
#dr{width:370px}
#dr details{border-top:1px solid #2a303a;padding:.3rem 0}
#dr summary{cursor:pointer;font-weight:600;padding:.45rem 0}
#dr label>span{display:flex;gap:.4rem;align-items:center}
#dr textarea{width:100%;background:#1c212a;color:#e8eaee;border:1px solid #333a47;border-radius:8px;padding:.5rem;font:12px/1.4 ui-monospace,monospace}
#dr input[type=text]{width:12rem}
/* v6 additions: rich text, new blocks, per-section font/colour/visibility */
mark{background:color-mix(in srgb,var(--accent) 35%,transparent);color:inherit;padding:0 .2em;border-radius:4px}
.blk{color:var(--tc,inherit);font-family:var(--sf,inherit)}
@media(max-width:700px){.blk[data-hide=mobile]{display:none}}
@media(min-width:701px){.blk[data-hide=desktop]{display:none}}
body.editing .blk[data-hide=mobile],body.editing .blk[data-hide=desktop]{display:block!important;opacity:.55}
.shot{margin:0}.bigimg{width:100%;aspect-ratio:var(--ar);object-fit:var(--fit);border-radius:var(--radius);display:block}
.t-spacer{padding-top:0!important;padding-bottom:0!important}
.btn.pill{border-radius:99px;background:var(--glass);color:var(--fg);border:1px solid var(--bd);box-shadow:none}
.bedit{display:inline-flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:.3rem 1rem .3rem 0}
.bedit select{background:#12151b;color:#e8eaee;border:1px solid #333a47;border-radius:6px;padding:.15rem .4rem;font:inherit}
#ft{position:fixed;z-index:60;display:none;gap:2px;padding:4px;background:#1b1f27;border:1px solid #333a47;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.4)}
#ft.on{display:flex}
#ft button{padding:.2rem .55rem;font-size:.8rem;background:transparent;color:#e8eaee;border:0}
#ft button:hover{background:#2c3340}

/* ===== v7: admin panel v3 + editor polish ===== */
body{transition:padding-right .3s cubic-bezier(.2,.8,.2,1)}
@media(min-width:1000px){body.adm{padding-right:400px}}
#adm{position:fixed;top:0;right:0;bottom:0;width:400px;max-width:100vw;z-index:38;display:flex;flex-direction:column;background:linear-gradient(180deg,#12151c 0%,#0f1217 100%);color:#e8eaee;border-left:1px solid #2a303a;box-shadow:-30px 0 70px rgba(0,0,0,.55);font-size:.85rem}
#adm[hidden]{display:none}
#adm:not([hidden]){animation:admslide .3s cubic-bezier(.2,.8,.2,1)}
@keyframes admslide{from{transform:translateX(60px);opacity:0}to{transform:none;opacity:1}}
#adm .hd2{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.85rem 1rem .65rem;border-bottom:1px solid #232833;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent)}
#adm .ht{display:flex;align-items:baseline;gap:.55rem;min-width:0}
#adm .ht b{font-size:.95rem;letter-spacing:-.01em}
#adm .ctx{font-size:.74rem;color:#8b93a1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#adm .hd2>span{display:flex;gap:.3rem;flex-shrink:0}
#adm .srch{margin:.6rem 1rem 0;width:calc(100% - 2rem);background:#1a1e26;border:1px solid #2c3340;border-radius:10px;color:#e8eaee;padding:.45rem .7rem;font:inherit;font-size:.83rem;transition:border-color .15s,box-shadow .15s}
#adm .srch::placeholder{color:#5f6673}
#adm .srch:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
#adm .tabs{display:flex;gap:2px;padding:.55rem .75rem;border-bottom:1px solid #232833;overflow-x:auto;scrollbar-width:none;flex-shrink:0}
#adm .tabs::-webkit-scrollbar{display:none}
#adm .tabs button{white-space:nowrap;background:transparent;border:1px solid transparent;color:#9aa2b0;font-size:.76rem;padding:.4rem .55rem;border-radius:9px;transition:background .15s,color .15s}
#adm .tabs button:hover{color:#e8eaee;background:#1a1e26}
#adm .tabs button.on{background:color-mix(in srgb,var(--accent) 20%,#1a1e26);color:#fff;border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
#adm .pb{flex:1;overflow-y:auto;padding:.65rem 1rem 2rem;scrollbar-width:thin;scrollbar-color:#2c3340 transparent}
#adm .pb::-webkit-scrollbar{width:8px}
#adm .pb::-webkit-scrollbar-thumb{background:#2c3340;border-radius:99px}
#adm details{border:1px solid #262c37;border-radius:12px;margin:.45rem 0;background:#141821;overflow:hidden}
#adm summary{cursor:pointer;font-weight:600;font-size:.83rem;padding:.6rem .85rem;color:#d7dae0;user-select:none;list-style:none;display:flex;align-items:center;gap:.5rem;transition:background .15s}
#adm summary::-webkit-details-marker{display:none}
#adm summary::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.75;flex-shrink:0}
#adm summary:hover{background:rgba(255,255,255,.025)}
#adm details[open]>summary{border-bottom:1px solid #262c37;background:rgba(255,255,255,.02)}
#adm details>*:not(summary){padding:.5rem .9rem}
#adm details>*:not(summary):last-child{padding-bottom:.75rem}
#adm .fr{display:flex;justify-content:space-between;align-items:center;gap:.8rem;padding:.42rem 0}
#adm .fr>span:first-child{color:#aab0bb;flex-shrink:0;font-size:.82rem}
#adm .fr.w{flex-direction:column;align-items:stretch;gap:.35rem}
#adm .fr.w>span:first-child{color:#aab0bb}
#adm input[type=text],#adm select,#adm textarea{background:#1a1e26;color:#e8eaee;border:1px solid #2c3340;border-radius:8px;padding:.36rem .55rem;font:inherit;font-size:.82rem;width:100%;transition:border-color .15s,box-shadow .15s}
#adm input[type=text]:focus,#adm select:focus,#adm textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
#adm input[type=color]{background:#1a1e26;border:1px solid #2c3340;border-radius:7px;width:36px;height:27px;padding:2px;cursor:pointer;flex-shrink:0}
#adm .rg{display:flex;align-items:center;gap:.55rem;flex:1;max-width:210px;justify-content:flex-end}
#adm .rg input[type=range]{flex:1;accent-color:var(--accent);min-width:90px}
#adm .rg output{font-size:.72rem;color:#8b93a1;min-width:3em;text-align:right;font-variant-numeric:tabular-nums}
#adm .cl{display:flex;gap:.4rem;align-items:center;flex:1;justify-content:flex-end;min-width:0}
#adm .cl input[type=text]{flex:1;min-width:0}
#adm .seg{display:flex;gap:2px;background:#1a1e26;border:1px solid #2c3340;border-radius:9px;padding:2px;flex-wrap:wrap;justify-content:flex-end;max-width:230px}
#adm .seg button{background:transparent;border:0;color:#9aa2b0;font-size:.73rem;padding:.26rem .55rem;border-radius:7px;transition:background .12s,color .12s}
#adm .seg button:hover{color:#e8eaee}
#adm .seg button.on{background:var(--accent);color:#fff}
#adm .tg{position:relative;display:inline-flex;flex-shrink:0}
#adm .tg input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
#adm .tg i{width:36px;height:20px;border-radius:99px;background:#2a3140;position:relative;transition:background .2s;display:block}
#adm .tg i::after{content:"";position:absolute;top:2.5px;left:3px;width:15px;height:15px;border-radius:50%;background:#8b93a1;transition:left .2s,background .2s}
#adm .tg input:checked+i{background:var(--accent)}
#adm .tg input:checked+i::after{left:18px;background:#fff}
#adm .sws{display:flex;gap:.35rem;align-items:center;flex-wrap:wrap;justify-content:flex-end;flex:1}
#adm .sws button{width:22px;height:22px;padding:0;border-radius:50%;border:2px solid #12151c!important;box-shadow:0 0 0 1px #3a4150;transition:transform .12s}
#adm .sws button:hover{transform:scale(1.18)}
#adm .fp{font-size:.8rem;color:#9aa2b0;margin-top:.3rem;padding-left:.2rem}
#adm .bselrow{padding:.15rem 0 .35rem}
#adm .bsel{width:100%;background:#1a1e26;color:#e8eaee;border:1px solid #2c3340;border-radius:9px;padding:.42rem .55rem;font:inherit;font-size:.83rem}
#adm .qk{display:flex;gap:.3rem;align-items:center;padding:.5rem 0;flex-wrap:wrap}
#adm .qk .sp{flex:1}
#adm .qk button,#adm .icts button{background:#1d222c;color:#c3c8d1;border:1px solid #2c3340;border-radius:7px;padding:.28rem .6rem;font-size:.76rem;transition:background .12s,border-color .12s,color .12s}
#adm .qk button:hover,#adm .icts button:hover{background:#262d3a;border-color:color-mix(in srgb,var(--accent) 50%,transparent);color:#fff}
#adm .icts{display:inline-flex;gap:2px;margin-left:.45rem;vertical-align:middle}
#adm fieldset{border:1px solid #262c37;border-radius:10px;margin:.45rem 0;padding:.45rem .7rem .55rem}
#adm legend{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:#8b93a1;padding:0 .3rem}
#adm .add{margin:.45rem 0 0;align-self:flex-start}
#adm .pre{display:flex;flex-wrap:wrap;gap:.4rem}
#adm .pre button{display:inline-flex;align-items:center;gap:.45rem;background:#1a1e26;border:1px solid #2c3340;border-radius:99px;padding:.38rem .85rem;font-size:.79rem;color:#d7dae0;transition:border-color .12s,transform .12s}
#adm .pre button i{width:10px;height:10px;border-radius:50%;display:inline-block}
#adm .pre button:hover{border-color:var(--accent);transform:translateY(-1px)}
#adm .hint{color:#8b93a1;font-size:.76rem;margin:.5rem 0;line-height:1.55}
#adm .hint b{color:#c3c8d1}
#adm .big{width:100%;min-height:340px;background:#10131a;color:#c9d4e3;font:12px/1.55 ui-monospace,"SF Mono",Menlo,Consolas,monospace;border:1px solid #2c3340;border-radius:10px;padding:.7rem;resize:vertical}
#adm .big:focus{outline:none;border-color:var(--accent)}
#adm .jrow{display:flex;gap:.4rem;align-items:center;margin:.55rem 0;flex-wrap:wrap}
#adm .jrow .hint{margin:0 0 0 .4rem}
#adm .dgr{color:#f87171!important}
#adm .dgr:hover{border-color:#f87171!important}
#adm button{cursor:pointer;font:inherit;background:#1d222c;color:#d7dae0;border:1px solid #2c3340;border-radius:8px;padding:.34rem .7rem;font-size:.78rem;transition:background .12s,border-color .12s,color .12s}
#adm button:hover{background:#262d3a;color:#fff;border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
#adm button.pri{background:var(--accent);color:#fff;border-color:transparent;font-weight:600;box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 30%,transparent)}
#adm button.pri:hover{filter:brightness(1.1)}
#pv{position:fixed;inset:0;z-index:46;background:rgba(4,6,10,.74);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);display:flex;flex-direction:column;align-items:center;padding:4.5rem 1rem 1.5rem}
#pv[hidden]{display:none}
#pv .pvt{display:flex;gap:.3rem;background:#141821;border:1px solid #2c3340;border-radius:12px;padding:.4rem;box-shadow:0 12px 40px rgba(0,0,0,.5);flex-wrap:wrap;justify-content:center}
#pv .pvt button{background:transparent;border:1px solid transparent;color:#c3c8d1;border-radius:8px;padding:.35rem .75rem;font-size:.82rem}
#pv .pvt button:hover{background:#232936;color:#fff}
#pv .pvf{flex:1;display:flex;justify-content:center;width:100%;min-height:0}
#pv .pvf iframe{background:#fff;border-radius:14px;box-shadow:0 30px 90px rgba(0,0,0,.65);width:390px;max-width:100%;height:100%;border:1px solid #2c3340}
/* --- editor chrome polish --- */
#bar{background:rgba(13,15,20,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid #232833;box-shadow:0 6px 24px rgba(0,0,0,.3)}
#bar .row{gap:.4rem;padding:.5rem .9rem}
#bar button{display:inline-flex;align-items:center;gap:.42rem;background:#1a1e26;color:#d7dae0;border:1px solid #2c3340;border-radius:9px;padding:.4rem .8rem;font-size:.82rem;transition:background .13s,border-color .13s,transform .13s,color .13s}
#bar button svg{opacity:.85;flex-shrink:0}
#bar button:hover{background:#242a37;border-color:#3d4557;color:#fff;transform:translateY(-1px)}
#bar button:active{transform:translateY(0)}
#bar button.pri{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 68%,#000));border-color:transparent;color:#fff;font-weight:600;box-shadow:0 4px 16px color-mix(in srgb,var(--accent) 32%,transparent)}
#bar button.pri:hover{filter:brightness(1.12)}
#mn{background:rgba(4,6,10,.7);border-top:0;padding:2.5rem 1rem 1.5rem}
#mn button{background:#171b23;border:1px solid #2c3340;border-radius:12px;transition:transform .13s,border-color .13s,background .13s}
#mn button:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:#1c2129}
#mn button b{color:#fff}
#dr{background:linear-gradient(180deg,#12151c,#0f1217);border-left:1px solid #2a303a;box-shadow:-30px 0 70px rgba(0,0,0,.5)}
#dr.open{box-shadow:-30px 0 70px rgba(0,0,0,.5)}
#dr header{padding-bottom:.7rem;border-bottom:1px solid #232833;margin-bottom:.4rem}
#dr summary{border-radius:8px;padding:.5rem .35rem;transition:background .12s}
#dr summary:hover{background:rgba(255,255,255,.03)}
#dr label{font-size:.83rem}
#dr input[type=text],#dr select,#dr input[type=range]{accent-color:var(--accent)}
.strip{background:rgba(19,22,29,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid #2c3340;border-radius:11px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.strip button{background:#1d222c;color:#c3c8d1;border:1px solid #2c3340;border-radius:7px;padding:.22rem .6rem;font-size:.76rem;transition:background .12s,color .12s,border-color .12s}
.strip button:hover{background:#262d3a;color:#fff;border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.spanel{background:rgba(19,22,29,.97);border:1px solid #2c3340;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.spanel label{font-size:.74rem;color:#aab0bb}
.ctl button{background:#1d222c;border:1px solid #2c3340;border-radius:6px;color:#c3c8d1;padding:.12rem .5rem;font-size:.76rem;transition:background .12s,border-color .12s,color .12s}
.ctl button:hover{background:#262d3a;color:#fff;border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.add{border:1px dashed color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 7%,transparent);color:color-mix(in srgb,var(--accent) 75%,#fff);border-radius:8px;padding:.28rem .85rem;font-size:.78rem;font-weight:500;transition:background .12s,transform .12s}
.add:hover{background:color-mix(in srgb,var(--accent) 15%,transparent);transform:translateY(-1px)}
.addimg{border:1px dashed color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 7%,transparent);color:color-mix(in srgb,var(--accent) 75%,#fff);border-radius:7px;font-size:.74rem}
#ft{background:rgba(19,22,29,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid #2c3340;border-radius:11px;padding:3px;gap:2px;box-shadow:0 12px 34px rgba(0,0,0,.5)}
#ft button{padding:.32rem .6rem;font-size:.8rem;background:transparent;color:#d7dae0;border:0;border-radius:8px;transition:background .12s,color .12s}
#ft button:hover{background:#262d3a;color:#fff}
#toast{background:rgba(19,22,29,.96);backdrop-filter:blur(12px);border:1px solid #2c3340;border-radius:12px;box-shadow:0 14px 44px rgba(0,0,0,.5)}
@media(max-width:520px){#bar button span{display:none}#bar button{padding:.45rem .6rem}}
@media(prefers-reduced-motion:reduce){#adm:not([hidden]),body{animation:none;transition:none}}

/* mobile nav: keep links at natural width so the whole sticky nav scrolls together */
@media(max-width:640px){.nl{flex:0 0 auto}nav{gap:.9rem}}

/* ===== v8: loader, section backgrounds, profile / presence / new sections ===== */
/* Visitor loader */
#ld{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.7rem;background:color-mix(in srgb,var(--bg) 88%,#000);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:opacity .6s ease,visibility .6s}
#ld.done{opacity:0;visibility:hidden;pointer-events:none}
html.ld-on{overflow:hidden}
.ld-orb{width:74px;height:74px;border-radius:50%;background:radial-gradient(circle at 34% 30%,color-mix(in srgb,var(--accent) 55%,#fff),var(--accent) 55%,color-mix(in srgb,var(--accent) 40%,#000));filter:blur(1px);animation:ldorb 1.6s ease-in-out infinite;box-shadow:0 0 60px color-mix(in srgb,var(--accent) 45%,transparent)}
#ld.bar .ld-orb{display:none}
@keyframes ldorb{0%,100%{transform:scale(.82)}50%{transform:scale(1.06)}}
.ld-in{display:flex;flex-direction:column;align-items:center;gap:.75rem;min-width:min(320px,80vw)}
.ld-brand{font-size:1.05rem;letter-spacing:.02em;color:var(--fg);font-weight:650;max-width:80vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ld-line{width:100%;height:3px;border-radius:99px;background:color-mix(in srgb,var(--fg) 12%,transparent);overflow:hidden}
.ld-line i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 40%,#fff));border-radius:99px;box-shadow:0 0 14px color-mix(in srgb,var(--accent) 60%,transparent);transition:width .18s ease}
.ld-meta{display:flex;justify-content:space-between;width:100%;font-size:.66rem;letter-spacing:.18em;color:var(--mut);text-transform:uppercase}
.ld-meta b{font-variant-numeric:tabular-nums;color:var(--fg);letter-spacing:0}
@media(prefers-reduced-motion:reduce){#ld{transition:none}.ld-orb{animation:none}}
/* Per-section background image */
.blk.hasbgi{position:relative;isolation:isolate}
.blk.hasbgi{text-shadow:0 1px 6px rgba(0,0,0,.4)}
.blk.hasbgi .pcard{background:color-mix(in srgb,var(--bg) 88%,transparent)}
.blk.hasbgi .pcard .pmeta,.blk.hasbgi .pcard .pstats{background:color-mix(in srgb,var(--bg) 70%,transparent)}
.blk.hasbgi::before{content:"";position:absolute;inset:-6%;z-index:-1;background-image:var(--bgi);background-size:var(--bgisz,cover);background-position:center;background-repeat:no-repeat}
.blk[data-bgip=top]::before{background-position:top}.blk[data-bgip=bottom]::before{background-position:bottom}
.blk[data-bgip=left]::before{background-position:left}.blk[data-bgip=right]::before{background-position:right}
.blk.hasbgi::after{content:"";position:absolute;inset:-6%;z-index:-1;background:rgba(0,0,0,var(--bgid,0));pointer-events:none}
body:not(.editing) .blk.hasbgi{overflow:hidden}
.blk.bgi-zoom::before{animation:bgzoom var(--bgis,16s) ease-in-out infinite alternate}
.blk.bgi-pan::before{animation:bgpan var(--bgis,16s) ease-in-out infinite alternate}
.blk.bgi-fade::before{animation:bgfade var(--bgis,16s) ease-in-out infinite alternate}
.blk.bgi-drift::before{animation:bgdrift var(--bgis,16s) ease-in-out infinite alternate}
@media(prefers-reduced-motion:reduce){.blk.hasbgi::before{animation:none!important}}
/* Profile card */
.pcard{border:1px solid var(--bd);border-radius:calc(var(--radius) + 6px);background:var(--glass);overflow:hidden;transition:border-color .2s,box-shadow .2s}
.pcard:hover{box-shadow:0 12px 44px color-mix(in srgb,var(--accent) 14%,transparent)}
.pbanner{position:relative;height:132px;overflow:hidden;background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 55%,transparent),color-mix(in srgb,var(--accent) 12%,transparent) 60%,transparent)}
.pbanner .pbn{position:absolute;inset:-6%;background-size:var(--bszb,cover);background-position:center;background-repeat:no-repeat}
.pbanner::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,var(--bnd,0))}
.pbanner.bni-zoom .pbn{animation:bgzoom var(--bns,20s) ease-in-out infinite var(--bdir,alternate)}
.pbanner.bni-pan .pbn{animation:bgpan var(--bns,20s) ease-in-out infinite var(--bdir,alternate)}
.pbanner.bni-fade .pbn{animation:bgfade var(--bns,20s) ease-in-out infinite var(--bdir,alternate)}
.pbanner.bni-drift .pbn{animation:bgdrift var(--bns,20s) ease-in-out infinite var(--bdir,alternate)}
@media(prefers-reduced-motion:reduce){.pbanner .pbn{animation:none!important}}
.pbody{display:flex;gap:1rem;align-items:flex-end;padding:0 1.4rem;margin-top:0;position:relative}
.pav{width:92px;height:92px;border-radius:50%;object-fit:cover;border:4px solid var(--bg);background:var(--glass);flex:0 0 auto;margin-top:-40px}
.pnames{padding-bottom:.35rem;min-width:0;text-shadow:0 1px 10px rgba(0,0,0,.35)}
.pnames h3{margin:0;font-size:1.35rem;letter-spacing:-.02em}
.pnames p{margin:0}
.pcard>.mut.bio,.pcard .pbio{padding:.95rem 1.4rem 0}
.pbadges{display:flex;flex-wrap:wrap;gap:.45rem;padding:.85rem 1.4rem 0}
.pbadge,.bpill{padding:.24rem .78rem;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--bd));border-radius:99px;font-size:.8rem;color:color-mix(in srgb,var(--accent) 70%,var(--fg));background:color-mix(in srgb,var(--accent) 8%,transparent);transition:border-color .15s,transform .15s,box-shadow .15s}
.pbadge:hover,.bpill:hover{transform:translateY(-1px);box-shadow:0 0 18px color-mix(in srgb,var(--accent) 25%,transparent)}
.pmeta{display:flex;gap:1.15rem;flex-wrap:wrap;padding:.85rem 1.4rem 0;color:var(--mut);font-size:.85rem;align-items:center}
.pmeta .st{color:#2fbf71;font-weight:600}
.pmeta .st i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#2fbf71;margin-right:.4rem;box-shadow:0 0 10px #2fbf7188;animation:ldpulse 2s infinite}
@keyframes ldpulse{50%{opacity:.45}}
.pstats{display:flex;border-top:1px solid var(--bd);margin-top:1.15rem}
.pstat{flex:1;display:flex;flex-direction:column;gap:.1rem;padding:1.05rem 1.4rem;border-right:1px solid var(--bd);min-width:0}
.pstat:last-child{border-right:0}
.pstat .pv{font-size:1.6rem;letter-spacing:-.03em;line-height:1.1}
.pstat .pl{font-size:.78rem}
.pstat .pic{font-style:normal;font-size:1rem;margin-right:.3rem}
.pcard.rbx .pbanner.rb{background:linear-gradient(120deg,#e2262f40,#e2262f14 60%,transparent)}
.rbxmark{position:absolute;right:1.1rem;top:1.1rem;color:#fff;background:#e2262f;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:.8rem;z-index:1}
.pcard .go{margin:1rem 1.4rem 1.1rem;align-self:flex-start}
/* Discord presence card */
.dcard{display:flex;align-items:center;gap:.9rem;padding:1rem 1.2rem;border:1px solid var(--bd);border-radius:var(--radius);background:var(--glass);text-decoration:none;color:var(--fg);transition:border-color .2s,transform .2s,box-shadow .2s;position:relative}
.dcard:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent);transform:translateY(-2px);box-shadow:0 10px 34px color-mix(in srgb,var(--accent) 22%,transparent)}
.davw{position:relative;flex:0 0 auto}
.dav{width:52px;height:52px;border-radius:50%;object-fit:cover;background:#313338;display:block}
.ddot{position:absolute;right:-2px;bottom:-2px;width:16px;height:16px;border-radius:50%;border:3px solid var(--bg);background:#80848e}
.ddot.online{background:#23a55a}.ddot.idle{background:#f0b232}.ddot.dnd{background:#f23f43}
.dcopy{min-width:0;flex:1;display:flex;flex-direction:column;gap:.08rem}
.dtop{display:flex;align-items:baseline;gap:.55rem;min-width:0}
.dname{font-size:1.02rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dst{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);white-space:nowrap}
.dhandle,.dcustom{color:var(--mut);font-size:.85rem}
.dcustom{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcustom:empty{display:none}
.darrow{color:var(--mut);flex:0 0 auto}
.dact{display:flex;gap:.6rem;align-items:flex-start;margin-top:.6rem;padding:.68rem .95rem;border:1px solid var(--bd);border-radius:calc(var(--radius)*.8);background:var(--glass);font-size:.88rem;max-width:460px}
.dact i{width:9px;height:9px;border-radius:50%;background:#80848e;flex:0 0 auto;margin-top:.42rem}
.dact i.on{background:#23a55a;box-shadow:0 0 8px #23a55a}
.dact span{display:flex;flex-direction:column;gap:.08rem;min-width:0}
.dact b{font-size:.92rem}
.dact small{color:var(--mut);font-size:.79rem}
.dcwrap .note{margin-top:.7rem}
.dcwrap.dcfail .dcard{opacity:.75}
.dcwrap.dcstale .dst{font-style:italic}
.dcwrap.dcempty .dcard{opacity:.75}
/* Rates */
.rrows{border-top:1px solid var(--bd)}
.rrow{padding:1.3rem 0;border-bottom:1px solid var(--bd);display:flex;flex-direction:column;gap:.35rem}
.rhead{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.rhead h3{margin:0}
.rprice{font-weight:650;color:color-mix(in srgb,var(--accent) 75%,var(--fg));white-space:nowrap}
.rpnote{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--mut)}
/* FAQ */
.faqs{display:flex;flex-direction:column;gap:.6rem}
.faq{border:1px solid var(--bd);border-radius:calc(var(--radius)*.8);background:var(--glass);overflow:hidden}
.faq summary{cursor:pointer;padding:.95rem 1.2rem;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center;transition:background .15s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--mut);font-size:1.25rem;transition:transform .2s;flex:0 0 auto}
.faq[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.fa{padding:0 1.2rem 1rem}
/* Testimonials */
.tgrid{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:var(--gp)}
@media(max-width:700px){.tgrid{grid-template-columns:1fr}}
.tcard{margin:0;border:1px solid var(--bd);border-radius:var(--radius);background:var(--glass);padding:1.3rem 1.4rem;display:flex;flex-direction:column;gap:.7rem}
.tstars{color:#f5b942;font-size:.9rem;letter-spacing:.15em}
.tstars .off{color:color-mix(in srgb,var(--fg) 18%,transparent)}
.tcard blockquote{margin:0;font-size:1.05rem;line-height:1.55}
.tcard figcaption{display:flex;gap:.7rem;align-items:center;margin-top:auto}
.tcard figcaption b{display:block}
.tcard figcaption small{display:block}
.tav{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:0 0 auto}
/* CTA banner */
.ctacard{border:1px solid var(--bd);border-radius:calc(var(--radius) + 8px);padding:2.6rem 2.2rem;text-align:center;background:radial-gradient(600px 240px at 50% -40%,color-mix(in srgb,var(--accent) 22%,transparent),transparent),var(--glass);display:flex;flex-direction:column;align-items:center;gap:.8rem}
.ctacard h2{margin:0}
.ctacard .btns{justify-content:center}
/* Badges */
.brow{display:flex;flex-wrap:wrap;gap:.55rem}
.bpillw{display:inline-flex;align-items:center}
.bpill{display:inline-flex;align-items:center;gap:.4rem;font-size:.9rem;color:var(--fg)}
.bpill i{font-style:normal;color:var(--accent);font-size:.95rem}
/* Showcase */
.scrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.5rem;perspective:1000px}
.scard{display:flex;flex-direction:column;gap:.5rem;text-decoration:none;color:var(--fg);border:1px solid var(--bd);border-radius:var(--radius);background:var(--glass);padding:.8rem;transform:rotate(var(--rot,0deg));transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .2s,box-shadow .2s}
.scard:hover{transform:rotate(0) translateY(-6px) scale(1.02);border-color:color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:0 18px 50px color-mix(in srgb,var(--accent) 20%,transparent);z-index:2}
.scard b{font-size:1.05rem}
.simg{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:calc(var(--radius)*.7);background:color-mix(in srgb,var(--fg) 8%,transparent)}
/* Webhook message preview (Discord look) */
.wprev{margin-top:.6rem}
.wpc{background:#2b2d31;border-radius:8px;padding:.7rem .9rem;font-size:.85rem;color:#dbdee1;white-space:pre-wrap;word-break:break-word;line-height:1.5}
.wpc i{color:#949ba4}
.wpe{background:#2b2d31;border-radius:8px;padding:.8rem .9rem;margin-top:.5rem;border-left:4px solid var(--wec,#5865f2);display:flex;flex-direction:column;gap:.35rem}
.wpe b{color:#fff;font-size:.88rem}
.wpe p{margin:0;font-size:.82rem;color:#dbdee1}
.wpfs{display:grid;grid-template-columns:1fr 1fr;gap:.4rem .9rem;margin-top:.3rem}
.wpf.block{grid-column:1/-1}
.wpf b{display:block;font-size:.76rem;color:#fff}
.wpf span{font-size:.78rem;color:#dbdee1}
.wpft{font-size:.72rem;color:#949ba4;margin-top:.3rem;border-top:1px solid #3f4147;padding-top:.35rem}
.wprev .warn{margin-top:.5rem;font-size:.78rem;color:#f2c94c}
@media(max-width:480px){.wpfs{grid-template-columns:1fr}}
.pcard>p.mut{padding:.95rem 1.4rem 0;margin:0}