:root{--mint:#34f5a5;--iris:#8b5cf6}
html{scroll-behavior:smooth;scroll-padding-top:6rem}
body{background:#070b12;color:#cbd5e1;font-family:'Plus Jakarta Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(60rem 40rem at 85% -10%,#8b5cf633,transparent 60%),radial-gradient(50rem 40rem at -10% 30%,#34f5a51f,transparent 60%)}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
.glass{background:#ffffff0d;border:1px solid #ffffff1f;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.card{border-radius:1.25rem;transition:transform .35s,box-shadow .35s,border-color .35s}
.card:hover{transform:translateY(-4px) scale(1.01);border-color:#34f5a566;box-shadow:0 0 40px -8px #34f5a555}
#h .bar{transition:all .35s;padding:.9rem 1.25rem;margin-top:.75rem;border-radius:999px}
#h.sc .bar{padding:.4rem 1rem;margin-top:.35rem;background:#070b12d9}
.nl{padding:.45rem .9rem;border-radius:999px;font-size:.9rem;font-weight:600;color:#94a3b8;transition:.25s}
.nl:hover,.nl.on{color:#fff;background:#ffffff14}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.6rem;border-radius:999px;font-weight:700;color:#04110b;background:linear-gradient(110deg,var(--mint),#22d3ee 50%,var(--iris));background-size:200% 100%;transition:background-position .5s,transform .3s,box-shadow .3s}
.btn:hover{background-position:100% 0;transform:scale(1.05);box-shadow:0 0 36px -4px #34f5a5aa;color:#fff}
.btn2{display:inline-flex;padding:.85rem 1.6rem;border-radius:999px;font-weight:700;color:#fff;border:1px solid #ffffff33;transition:.3s}
.btn2:hover{background:#ffffff14;border-color:var(--mint);transform:scale(1.05)}
[data-r]{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
[data-r].in{opacity:1;transform:none}
.h1{font-weight:800;letter-spacing:-.035em;line-height:1.02;color:#fff}
.grad{background:linear-gradient(100deg,var(--mint),#22d3ee,var(--iris));-webkit-background-clip:text;background-clip:text;color:transparent}
.scene{perspective:900px;height:22rem}
.board{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(calc(58deg + var(--ry,0deg))) rotateZ(calc(-28deg + var(--rx,0deg)));animation:fl 7s ease-in-out infinite;border-radius:1.5rem;border:1px solid #34f5a566;background:linear-gradient(#34f5a514 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,#34f5a514 1px,transparent 1px) 0 0/28px 28px,#0b1220;box-shadow:0 0 80px -10px #8b5cf6aa}
@keyframes fl{50%{translate:0 -14px}}
.chip{position:absolute;border-radius:.5rem;border:1px solid #fff3;background:linear-gradient(135deg,#1e293b,#0f172a);box-shadow:0 18px 0 -2px #0b1220,0 0 30px #34f5a544;display:grid;place-items:center;font:700 .7rem monospace;color:var(--mint);transform:translateZ(18px)}
.chip.a{inset:12% auto auto 10%;width:34%;height:34%;transform:translateZ(34px);color:#fff;box-shadow:0 30px 0 -2px #0b1220,0 0 50px #8b5cf6aa}
.chip.b{inset:auto 10% 14% auto;width:26%;height:22%}.chip.c{inset:20% 12% auto auto;width:16%;height:16%}.chip.d{inset:auto auto 12% 14%;width:20%;height:16%}
.trace{position:absolute;height:3px;background:linear-gradient(90deg,transparent,var(--mint),transparent);background-size:200%;animation:tr 2.4s linear infinite;transform:translateZ(6px)}
@keyframes tr{to{background-position:-200% 0}}
.hero-in>*{opacity:0;transform:translateY(24px);animation:up .9s cubic-bezier(.2,.7,.2,1) forwards}
.hero-in>*:nth-child(2){animation-delay:.12s}.hero-in>*:nth-child(3){animation-delay:.24s}.hero-in>*:nth-child(4){animation-delay:.36s}
@keyframes up{to{opacity:1;transform:none}}
.tab{padding:.6rem 1.2rem;border-radius:999px;font-weight:700;font-size:.9rem;color:#94a3b8;border:1px solid #ffffff1f;transition:.25s}
.tab:hover{color:#fff;border-color:#34f5a566}.tab[aria-selected=true]{color:#04110b;background:var(--mint);border-color:var(--mint)}
.pn{animation:up .5s both}
details.ac{border-radius:1rem}details.ac summary{cursor:pointer;list-style:none;padding:1.15rem 1.4rem;font-weight:700;color:#fff;display:flex;justify-content:space-between;gap:1rem}
details.ac summary::-webkit-details-marker{display:none}details.ac summary:after{content:"+";color:var(--mint);font-size:1.4rem;line-height:1;transition:.3s}
details.ac[open] summary:after{transform:rotate(45deg)}details.ac p{padding:0 1.4rem 1.3rem}details.ac[open]{border-color:#34f5a566}
.car{display:flex;gap:1.25rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:.5rem}.car::-webkit-scrollbar{display:none}
.car>*{flex:0 0 min(86%,26rem);scroll-snap-align:start}
.fl{position:relative}.fl input,.fl textarea{width:100%;padding:1.5rem 1rem .6rem;border-radius:.9rem;background:#ffffff0a;border:1px solid #ffffff26;color:#fff;transition:.25s}
.fl label{position:absolute;left:1rem;top:1rem;color:#94a3b8;pointer-events:none;transition:.2s}
.fl input:focus+label,.fl input:not(:placeholder-shown)+label,.fl textarea:focus+label,.fl textarea:not(:placeholder-shown)+label{top:.4rem;font-size:.7rem;color:var(--mint)}
.fl input:focus,.fl textarea:focus{outline:0;border-color:var(--mint);box-shadow:0 0 0 4px #34f5a51f}
.fl.ok input,.fl.ok textarea{border-color:#34f5a599}.fl.bad input,.fl.bad textarea{border-color:#ff5d73;box-shadow:0 0 0 4px #ff5d7322}
.fl .msg{display:none;font-size:.78rem;color:#ff8fa0;margin:.35rem .4rem 0}.fl.bad .msg{display:block}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}[data-r],.hero-in>*{opacity:1;transform:none}}
/* ===== Sky-blue light theme + left sidebar ===== */
:root{--mint:#0284c7;--iris:#6366f1}
body{background:#e3f3ff;color:#334e68}body:before{display:none}
.bg-anim{position:fixed;inset:0;z-index:-1;overflow:hidden;background:linear-gradient(135deg,#e0f2fe,#f0f9ff 50%,#dbeafe)}
.bg-anim i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;animation:dr 18s ease-in-out infinite alternate}
.bg-anim i:nth-child(1){width:34rem;height:34rem;background:#7dd3fc;left:-8rem;top:-6rem}
.bg-anim i:nth-child(2){width:30rem;height:30rem;background:#a5b4fc;right:-6rem;top:20%;animation-delay:-6s}
.bg-anim i:nth-child(3){width:26rem;height:26rem;background:#99f6e4;left:30%;bottom:-8rem;animation-delay:-12s}
.bg-anim:after{content:"";position:absolute;inset:-40px;background:radial-gradient(#0284c733 1.5px,transparent 1.5px) 0 0/34px 34px;animation:gd 14s linear infinite}
@keyframes dr{to{transform:translate(8rem,5rem) scale(1.2)}}@keyframes gd{to{transform:translate(34px,34px)}}
.glass{background:#ffffffa8;border:1px solid #bae6fd;box-shadow:0 10px 30px -14px #0369a166}
.card:hover{border-color:#38bdf8;box-shadow:0 14px 40px -10px #0284c777}
.text-white{color:#0c2d57!important}.text-slate-100{color:#1e3a5f}.text-rose-300{color:#e11d48}.text-slate-500{color:#64748b}
.h1{color:#0c2d57}.grad{background-image:linear-gradient(100deg,#0ea5e9,#2563eb,#6366f1)}
.btn{color:#fff;background-image:linear-gradient(110deg,#38bdf8,#0284c7 50%,#6366f1)}.btn:hover{box-shadow:0 0 30px -4px #0284c7aa}
.btn2{color:#0369a1;border-color:#7dd3fc}.btn2:hover{background:#fff;border-color:#0284c7}
.nl{color:#475569}.nl:hover,.nl.on{color:#0369a1;background:#fffc}.nl.on{box-shadow:inset 3px 0 #0284c7}
.tab{color:#475569;border-color:#bae6fd}.tab:hover{color:#0369a1;border-color:#0284c7}.tab[aria-selected=true]{color:#fff;background:#0284c7;border-color:#0284c7}
details.ac summary{color:#0c2d57}details.ac[open]{border-color:#38bdf8}
.fl input,.fl textarea{background:#ffffffcc;border-color:#bae6fd;color:#0c2d57}.fl label{color:#64748b}
.fl.ok input,.fl.ok textarea{border-color:#10b981}.fl.bad input,.fl.bad textarea{border-color:#e11d48;box-shadow:0 0 0 4px #e11d4822}.fl .msg{color:#e11d48}
.board{border-color:#38bdf8;background:linear-gradient(#0284c722 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,#0284c722 1px,transparent 1px) 0 0/28px 28px,#f0f9ff;box-shadow:0 0 70px -10px #0284c788}
.chip{background:linear-gradient(135deg,#fff,#bae6fd);border-color:#7dd3fc;box-shadow:0 18px 0 -2px #bae6fd,0 0 30px #38bdf866;color:#0369a1}
.chip.a{color:#0c2d57;box-shadow:0 30px 0 -2px #93c5fd,0 0 50px #6366f188}
.sb{position:fixed;z-index:50;top:.6rem;left:.6rem;right:.6rem;padding:.6rem .9rem;border-radius:1.25rem}
#h.sc .sb{background:#fffffff2}
@media(min-width:768px){.sb{right:auto;top:.75rem;bottom:.75rem;width:15rem;padding:1.25rem;display:flex;flex-direction:column;overflow-y:auto}
body{padding-left:16rem}main>section:first-child{padding-top:4rem!important}.nl{display:block;padding:.7rem 1rem;border-radius:.9rem}}