:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);--bg:#e3f1fd;--hd:#ffffff;--hf:#1b2438;--fg:#1b2438;--card:#ffffff;--mut:#5b6478;--ac:#1e3a8a;--nav:#2a2e35;--bd:#c9dbec;--gold:#1f3c88}

:root[data-theme="dark"] .hero{background-color:rgba(12,14,17,.85);background-image:linear-gradient(rgba(31,60,136,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(31,60,136,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(12,14,17,.88) 0%,rgba(12,14,17,.6) 55%,rgba(12,14,17,.35) 100%),url(images/scss-building.jpg)}
:root[data-theme="dark"]{--gold:#7aa7ff;--hd:#0c0e11;--hf:#fff;--bg:#111317;--fg:#e8ecf2;--card:#1b1f25;--mut:#a3abb8;--ac:#7aa7ff;--nav:#0c0e11;--bd:#2d333c}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}*{box-sizing:border-box}
html{background:var(--bg)}#bg{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}body{margin:0;color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.6}
#pb{position:fixed;top:0;left:0;height:3px;width:0;background:var(--gold);z-index:20}
.top{background:var(--hd);color:var(--hf);border-bottom:1px solid var(--bd);position:sticky;top:env(safe-area-inset-top,0px);z-index:10}
.bar{max-width:1100px;margin:auto;padding:10px 20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.brand{font-weight:700;font-size:19px}.brand small{display:block;font-weight:400;font-size:12px;opacity:.75}
nav{display:flex;flex-wrap:wrap;gap:2px;align-items:center}
nav a,.tg{color:var(--hf);text-decoration:none;padding:8px 12px;border-radius:6px;font-size:15px;cursor:pointer;background:none;border:0;font-family:inherit}
nav a:hover,nav a.on,.tg:hover{background:rgba(30,58,138,.14)}
#mb{display:none;font-size:22px}
@media(max-width:760px){#mb{display:block}nav{display:none;width:100%;flex-direction:column;align-items:stretch}nav.open{display:flex}}
.hero{background-color:rgba(255,255,255,.8);background-image:linear-gradient(rgba(31,60,136,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(31,60,136,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.62) 55%,rgba(255,255,255,.3) 100%),url(images/scss-building.jpg);background-size:28px 28px,28px 28px,cover,cover;background-position:0 0,0 0,center,center;background-repeat:repeat,repeat,no-repeat,no-repeat;color:var(--fg);padding:48px 20px}
.hi{max-width:1500px;margin:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:30px}
.ht{flex:1 1 320px}.ht h1{margin:0;font-size:clamp(30px,6vw,48px)}.ht h1 span{color:var(--gold)}.ht p{margin:12px 0 0;opacity:.9;max-width:520px}
.ty{font-size:20px;margin-top:14px;color:var(--gold);min-height:30px;font-family:ui-monospace,Menlo,monospace}.ty::after{content:"▌";animation:bl 1s steps(2) infinite}
@keyframes bl{50%{opacity:0}}
.btn{display:inline-block;margin-top:18px;padding:10px 20px;border-radius:99px;background:var(--gold);color:#fff;font-weight:700;text-decoration:none;cursor:pointer;transition:transform .2s}.btn:hover{transform:translateY(-2px) scale(1.04)}
.chip{flex:0 1 330px;width:100%;max-width:330px;filter:drop-shadow(0 12px 24px rgba(0,0,0,.45));animation:fl 5s ease-in-out infinite}
@keyframes fl{50%{transform:translateY(-10px)}}
.tr path{stroke-dasharray:6 6;animation:fw 1.2s linear infinite}@keyframes fw{to{stroke-dashoffset:-24}}
.dt circle{animation:pl 1.6s ease-in-out infinite}.dt circle:nth-child(2n){animation-delay:.5s}@keyframes pl{50%{opacity:.2}}
main{max-width:1100px;margin:auto;padding:28px 20px 50px}
.pg{display:none}.pg.on{display:block;animation:in .45s ease}@keyframes in{from{opacity:0;transform:translateY(12px)}}
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s,transform .6s}.rv.v{opacity:1;transform:none}
h2{margin:8px 0 6px;font-size:26px}h2::after{content:"";display:block;width:60px;height:3px;background:var(--ac);margin-top:8px}
.sub{margin:30px 0 14px;font-size:19px;border-left:4px solid var(--ac);padding-left:10px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.m,.ac,.f,.st{background:var(--card);border:1px solid var(--bd);border-radius:12px;transition:transform .25s,box-shadow .25s}
.m:hover,.ac:hover{transform:translateY(-4px);box-shadow:0 10px 22px rgba(0,0,0,.18)}
.m{display:flex;gap:14px;padding:14px}.m img{width:96px;height:120px;object-fit:cover;object-position:top;border-radius:8px;flex:none}
.mi{width:96px;height:120px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:700;background:var(--hd);border:2px solid var(--gold);color:var(--ac)}.m p b{color:var(--fg)}.m h4,.ac h4{margin:6px 0 4px;font-size:16px}.m p,.ac p{margin:4px 0;font-size:13.5px;color:var(--mut)}.m .pos{color:var(--fg);font-weight:600}
.ac{padding:18px}.ac .ic{font-size:26px}
.f{display:flex;gap:18px;padding:20px;align-items:center;flex-wrap:wrap;margin-top:22px}
.av{position:relative;overflow:hidden;width:110px;height:110px;border-radius:50%;background:var(--hd);border:3px solid var(--gold);color:var(--ac);display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:700;flex:none}
.av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}.tag{font-size:11.5px;padding:2px 9px;border-radius:99px;background:var(--ac);color:#fff}
:root[data-theme="dark"] .tag{color:#23272e}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;margin:26px 0}
.st{text-align:center;padding:18px 8px}.st b{display:block;font-size:34px;color:var(--ac)}.st span{font-size:13px;color:var(--mut)}
.tabs,.chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.tabs button,.chips button{padding:8px 16px;border-radius:99px;border:1px solid var(--bd);background:var(--card);color:var(--fg);cursor:pointer;font-size:14px;font-family:inherit}
.tabs button.on,.chips button.on{background:var(--ac);color:#fff;border-color:var(--ac)}
:root[data-theme="dark"] .tabs button.on,:root[data-theme="dark"] .chips button.on{color:#23272e}
.tp{display:none}.tp.on{display:block;animation:in .4s}
.tl{border-left:3px solid var(--ac);margin:10px 0 0 8px;padding-left:20px}.tl div{margin-bottom:16px;position:relative}.tl div::before{content:"";position:absolute;left:-28px;top:6px;width:11px;height:11px;border-radius:50%;background:var(--gold);border:2px solid var(--ac)}
.tl b{display:block}.tl span{color:var(--mut);font-size:14px}
ul.pl{padding-left:20px}ul.pl li{margin:8px 0}
.pill{display:inline-block;margin:4px 6px 4px 0;padding:5px 12px;border-radius:99px;background:var(--card);border:1px solid var(--bd);font-size:14px}
input[type=search]{width:100%;max-width:340px;padding:10px 14px;border-radius:99px;border:1px solid var(--bd);background:var(--card);color:var(--fg);font-size:15px}
a{color:var(--ac)}a.nl{color:inherit;text-decoration:none;font-weight:inherit}footer{background:var(--hd);color:var(--hf);border-top:1px solid var(--bd);text-align:center;padding:22px;font-size:14px}
#up{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));width:44px;height:44px;border-radius:50%;border:0;background:var(--gold);color:#fff;font-size:20px;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s}#up.s{opacity:1;pointer-events:auto}
.em{color:var(--mut);padding:24px;border:1px dashed var(--bd);border-radius:12px;text-align:center;display:none}
.ev{padding:18px;display:flex;gap:14px}.ev .d{flex:none;width:62px;text-align:center;border-radius:10px;background:var(--ac);color:#fff;padding:8px 4px;font-weight:700;line-height:1.2}.ev .d small{display:block;font-weight:400;font-size:12px}
.gg{columns:3 220px;column-gap:14px}.gg figure{position:relative;margin:0 0 14px;break-inside:avoid;border-radius:12px;overflow:hidden;border:1px solid var(--bd);cursor:zoom-in;background:var(--card)}.gg img{width:100%;display:block;transition:transform .4s}.gg figure:hover img{transform:scale(1.06)}.gg figcaption{position:absolute;left:0;right:0;bottom:0;padding:30px 12px 10px;font-size:13px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.75))}
#lb{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:30;display:none;flex-direction:column;align-items:center;justify-content:center;padding:20px}#lb.on{display:flex}#lb img{max-width:100%;max-height:78vh;border-radius:8px}#lb p{color:#fff;margin:12px 0 0}#lx{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:16px;background:none;border:0;color:#fff;font-size:26px;cursor:pointer}
#pm{position:fixed;inset:0;background:rgba(10,20,35,.6);z-index:40;display:none;align-items:center;justify-content:center;padding:16px}#pm.on{display:flex}
.pbox{position:relative;background:var(--card);color:var(--fg);border:1px solid var(--bd);border-radius:16px;max-width:680px;width:100%;max-height:88vh;overflow:auto;padding:22px;animation:in .3s}
#px{position:sticky;float:right;top:0;background:none;border:0;font-size:24px;color:var(--fg);cursor:pointer}
.pt{display:flex;gap:18px;flex-wrap:wrap}.pt>img,.pt>.mi{width:150px;height:190px;object-fit:cover;object-position:top;border-radius:12px;flex:none}.pt>.mi{font-size:44px}.pt>div{flex:1 1 240px}
.pt h4{font-size:22px;margin:8px 0}.pt p{margin:6px 0;color:var(--mut)}.pt p b{color:var(--fg)}
.m img,.m .mi{cursor:pointer}.m img:hover{outline:3px solid var(--gold)}
.pn{font-size:12.5px;color:var(--mut)}
:root[data-theme="dark"] .btn,:root[data-theme="dark"] #up{color:#0c0e11}
#mg{grid-template-columns:repeat(2,1fr)}@media(max-width:760px){#mg{grid-template-columns:1fr}}
.uni{font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ac);margin-bottom:6px}
.chip{margin-left:auto}@media(max-width:760px){.chip{margin:0 auto}}
#home.on{display:grid;grid-template-columns:minmax(0,1fr) 340px;column-gap:26px;align-items:start}
main.wide{max-width:1500px}#home>*{grid-column:1}#home>*:not(#tk){max-width:820px}#home>#tk{grid-column:2;grid-row:1/span 8}
.tk{display:block;border:1px solid var(--bd);background:var(--card);border-radius:14px;overflow:hidden;cursor:pointer;position:sticky;top:calc(80px + env(safe-area-inset-top,0px))}
.tk b{display:block;background:var(--ac);color:#fff;padding:12px 16px}
.tr2{height:440px;overflow:hidden;position:relative}
.vl{animation:vs 70s linear infinite}.tk:hover .vl{animation-play-state:paused}
.vl .dup{display:block}
.pi{padding:12px 16px;border-bottom:1px solid var(--bd);font-size:13.5px;line-height:1.45}.pi small{display:block;color:var(--mut);font-size:12px;margin-bottom:2px}
@keyframes vs{to{transform:translateY(-50%)}}
:root[data-theme="dark"] .tk b{color:#0c0e11}
@media(max-width:900px){#home.on{display:block}.tk{position:static;margin-top:22px}.tr2{height:320px}}
.co{margin-top:26px}.cg{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
@media(prefers-reduced-motion:reduce){.vl{animation:none}.tr2{height:320px;overflow:auto}.vl .dup{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}