@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Bricolage+Grotesque:wght@500;800&family=Cairo:wght@400;700;800&display=swap');
:root{--ink:#F4F0E4;--blue:#FFD21F;--gold:#FFD21F;--mint:#FFD21F;--paper:#0A0A09;--card:#141412;--line:#2c2b27}
html.hc{--ink:#fff;--paper:#000;--card:#000;--line:#fff;--blue:#ffe600;--gold:#ffe600;--mint:#ffe600}
html.big{font-size:125%}html.space body{letter-spacing:.04em;line-height:2}
html.calm *{animation:none!important;transition:none!important}html.calm [data-r]{opacity:1!important;transform:none!important}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:1.05rem/1.65 'Atkinson Hyperlegible',system-ui,sans-serif;overflow-x:hidden}
h1,h2,h3{font-family:'Bricolage Grotesque',sans-serif;line-height:1.05;margin:0 0 .5em;font-weight:800}
h1{font-size:clamp(2.6rem,8vw,6rem)}h2{font-size:clamp(1.8rem,4vw,3rem)}a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.wrap{max-width:1100px;margin:auto;padding:0 1.2rem}section{padding:5rem 0}
#curtain{position:fixed;inset:0;background:var(--blue);z-index:99;transform:translateY(-100%);transition:transform .45s cubic-bezier(.7,0,.2,1);pointer-events:none}
#curtain.in{transform:none}body.ready #curtain:not(.in){transform:translateY(100%)}
nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;gap:1rem;padding-top:.7rem;padding-bottom:.7rem}
.logo{font:800 1.3rem 'Bricolage Grotesque';text-decoration:none;display:flex;gap:.5rem;align-items:center;margin-right:auto}
nav a.l{text-decoration:none;padding:.4rem .7rem;border-radius:99px}nav a.l:hover,nav a.on{background:var(--ink);color:var(--paper)}
.btn{display:inline-block;background:var(--blue);color:#0a0a09;border:0;border-radius:99px;padding:.8rem 1.5rem;font:700 1rem inherit;cursor:pointer;text-decoration:none;transition:transform .2s,box-shadow .2s}
html.hc .btn{color:#000}.btn:hover{transform:translateY(-3px);box-shadow:0 8px 0 var(--gold)}.btn.alt{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.hero{min-height:88vh;display:grid;align-items:center;position:relative;overflow:hidden}
@keyframes up{from{opacity:0;transform:translateY(70px) skewY(4deg)}}
.hero p{max-width:34rem;animation:up 1s .5s both}.hero .acts{display:flex;gap:1rem;flex-wrap:wrap;animation:up 1s .65s both}
#star{position:absolute;right:-12%;top:50%;width:min(80vw,700px);translate:0 -50%;opacity:.9;z-index:-1}
#star polygon{fill:none;stroke-width:2;transform-origin:200px 200px;animation:spin 40s linear infinite}
#star polygon:nth-child(odd){stroke:var(--blue)}#star polygon:nth-child(even){stroke:var(--gold);animation-direction:reverse;animation-duration:30s}
@keyframes spin{to{transform:rotate(360deg)}}
.marq{background:var(--ink);color:var(--paper);overflow:hidden;white-space:nowrap;padding:1rem 0;font:800 1.6rem 'Bricolage Grotesque'}
html.hc .marq{border-block:2px solid #fff}.marq div{display:inline-block;animation:mq 30s linear infinite}@keyframes mq{to{transform:translateX(-50%)}}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem}.stats b{font:800 3.5rem 'Bricolage Grotesque';display:block;color:var(--blue)}
html.hc .stats b{color:var(--gold)}
.pil{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;margin:4rem 0}.pil:nth-child(even) .art{order:2}
.art{font-size:6rem;background:var(--card);border:2px solid var(--ink);border-radius:2rem;aspect-ratio:1.4;display:grid;place-items:center;box-shadow:12px 12px 0 var(--gold)}
[data-r]{opacity:0;transition:opacity .8s,transform .9s cubic-bezier(.2,.8,.2,1)}[data-r=l]{transform:translateX(-120px)}[data-r=r]{transform:translateX(120px)}[data-r=u]{transform:translateY(60px)}[data-r].in{opacity:1;transform:none}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.2rem}
.card{background:var(--card);border:2px solid var(--ink);border-radius:1.3rem;padding:1.4rem;text-decoration:none;display:block;transition:transform .15s,box-shadow .3s}.card:hover{box-shadow:6px 6px 0 var(--blue)}
.card em{font-size:2.2rem;font-style:normal;display:block}.tag{font-size:.8rem;border-radius:99px;padding:.1rem .7rem;background:var(--mint);color:#0a0a09;white-space:nowrap}.tag.soon{background:transparent;color:var(--ink);border:1px solid var(--ink)}
html.hc .tag{color:#000}
.bar{height:8px;background:var(--line);border-radius:9px;overflow:hidden}.bar i{display:block;height:100%;background:var(--mint);width:0;transition:width 1s}
.tools{display:flex;gap:.7rem;flex-wrap:wrap;margin:1.5rem 0}.tools input{flex:1;min-width:200px;padding:.8rem 1.2rem;border-radius:99px;border:2px solid var(--ink);background:var(--card);color:var(--ink);font:inherit}
.chip{border:2px solid var(--ink);background:none;color:var(--ink);border-radius:99px;padding:.4rem 1rem;cursor:pointer;font:inherit}.chip.on{background:var(--ink);color:var(--paper)}
details.dv{border-bottom:2px solid var(--ink);padding:1rem 0}summary{cursor:pointer;font:800 1.4rem 'Bricolage Grotesque';display:flex;gap:1rem;align-items:center}
.cl{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;text-decoration:none;border-top:1px dashed var(--line)}.cl:hover{padding-left:.8rem;transition:.2s}
.les{background:var(--card);border:2px solid var(--ink);border-radius:1.5rem;padding:2rem;margin:1.5rem 0;box-shadow:8px 8px 0 var(--gold)}
.st{display:flex;gap:1.2rem;align-items:center;font-size:1.25rem;margin:1rem 0}.st b{font-size:3rem;background:var(--paper);border-radius:1rem;padding:.3rem .8rem}
.opt{display:block;width:100%;text-align:left;margin:.5rem 0;padding:1rem;border:2px solid var(--ink);background:none;color:var(--ink);border-radius:1rem;font:inherit;cursor:pointer}
.opt.ok{background:var(--mint);color:#0a0a09;animation:pop .4s}.opt.no{background:#c33;color:#0a0a09;animation:shake .4s}@keyframes pop{50%{transform:scale(1.04)}}@keyframes shake{25%{translate:-8px}75%{translate:8px}}
footer{background:var(--ink);color:var(--paper);padding:3rem 0;margin-top:4rem}
html.hc footer{border-top:2px solid #fff}
#bot{position:fixed;right:1rem;bottom:1rem;z-index:60}#bot>button{width:64px;height:64px;border-radius:50%;border:3px solid var(--ink);background:var(--gold);font-size:2rem;cursor:pointer;animation:bob 3s infinite}
@keyframes bob{50%{transform:translateY(-8px)}}
#bp{display:none;position:absolute;right:0;bottom:78px;width:min(340px,88vw);background:var(--card);border:2px solid var(--ink);border-radius:1.3rem;overflow:hidden;box-shadow:8px 8px 0 var(--blue)}#bp.o{display:block;animation:up .4s}
#bm{height:280px;overflow:auto;padding:1rem;font-size:.95rem}.m{margin:.4rem 0;padding:.5rem .8rem;border-radius:1rem;max-width:85%;animation:up .3s}.m.b{background:var(--paper)}.m.u{background:var(--blue);color:#0a0a09;margin-left:auto}
html.hc .m.u{color:#000}#bc{padding:.5rem;display:flex;gap:.4rem;flex-wrap:wrap;border-top:1px solid var(--line)}#bc .chip{font-size:.8rem;padding:.2rem .7rem}
#pp{display:none;position:absolute;right:1.2rem;top:100%;background:var(--card);border:2px solid var(--ink);border-radius:1rem;padding:1rem;width:240px}#pp.o{display:block}
.pf{display:flex;justify-content:space-between;align-items:center;margin:.5rem 0;gap:1rem}
canvas#cf{position:fixed;inset:0;pointer-events:none;z-index:98}
@media(max-width:760px){.pil{grid-template-columns:1fr}.pil:nth-child(even) .art{order:0}nav a.l{padding:.3rem .4rem;font-size:.9rem}}
/* ===== Cygnitron Academy: black & yellow ===== */
::selection{background:var(--blue);color:#0a0a09}
#sp{position:fixed;top:0;inset-inline-start:0;height:4px;background:var(--blue);width:0;z-index:150}
#cg{position:fixed;left:0;top:0;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;background:radial-gradient(#ffd21f22,transparent 65%);pointer-events:none;z-index:1}
#ld{position:fixed;inset:0;background:#0a0a09;z-index:200;display:grid;place-items:center;transition:transform .8s .2s cubic-bezier(.7,0,.2,1)}#ld.x{transform:translateY(-100%)}
#ld svg{width:120px;fill:none;stroke:#FFD21F;stroke-width:2.5}#ld rect,#ld path{stroke-dasharray:300;stroke-dashoffset:300;animation:dr 1.2s forwards}@keyframes dr{to{stroke-dashoffset:0}}
.logo{margin:0}.logo img{border-radius:8px}.logo small{font:500 1em inherit}
.dn{display:flex;gap:.2rem;margin-inline-start:auto}#ls{background:var(--card);color:var(--ink);border:2px solid var(--ink);border-radius:99px;padding:.3rem .6rem;font:inherit}
.bg{display:none;background:none;border:2px solid var(--ink);color:var(--ink);border-radius:12px;width:44px;height:44px;font-size:1.3rem;cursor:pointer}
#mn{display:none}
.marq{background:var(--blue);color:#0a0a09}.marq.r div{animation-direction:reverse}
footer{background:var(--card);color:var(--ink);border-top:4px solid var(--blue)}footer a{color:var(--blue)}
.hero{isolation:isolate}.hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.ln{display:block}.ln:nth-child(2){color:var(--blue)}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em}.w>i{display:inline-block;font-style:normal;transform:translateY(115%);animation:wu .9s both paused cubic-bezier(.2,.8,.2,1);animation-delay:calc(var(--d)*80ms)}
[data-split].in .w>i{animation-play-state:running}@keyframes wu{to{transform:none}}html.calm .w>i{transform:none!important}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(240px at var(--mx,50%) var(--my,50%),#ffd21f26,transparent);opacity:0;transition:.3s;pointer-events:none}.card:hover::before{opacity:1}.card{position:relative;overflow:hidden}
.stats span{display:block}.sep{border:2px dashed var(--blue);border-radius:1rem;padding:1rem 1.4rem;margin:1rem 0}
body.sw main{animation:sw .6s}@keyframes sw{from{opacity:0;filter:blur(8px)}}
.opt{text-align:start}.opt.ok{background:#4be38a}.opt.no{background:#ff6b6b}.m.u{margin-left:0;margin-inline-start:auto}.cl:hover{padding-left:0;padding-inline-start:.8rem}
html[dir=rtl] #star{right:auto;left:-12%}html[dir=rtl] #bot{right:auto;left:1rem}html[dir=rtl] #bp{right:auto;left:0}html[dir=rtl] #pp{right:auto;left:1.2rem}
html[lang=ar] body,html[lang=ar] h1,html[lang=ar] h2,html[lang=ar] h3,html[lang=ar] summary{font-family:'Cairo','Atkinson Hyperlegible',sans-serif}html[lang=ar] h1,html[lang=ar] h2{line-height:1.35}
.fg{display:grid;grid-template-columns:1.2fr .8fr;gap:3rem;align-items:center;padding-block:2rem}
.pt{position:relative;border-radius:2rem;border:2px solid var(--ink);box-shadow:12px 12px 0 var(--blue);animation:bob 6s infinite}.pt img{width:100%;height:auto;display:block;border-radius:inherit}
.orbit{position:absolute;inset:-18px;border:2px dashed var(--blue);border-radius:2.5rem;animation:spin 30s linear infinite;pointer-events:none}
.tg{display:inline-block;border:2px solid var(--blue);color:var(--blue);border-radius:99px;padding:.2rem .9rem;margin:.2rem}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#4be38a;margin-inline-end:.5rem;animation:pulse 1.6s infinite}@keyframes pulse{50%{box-shadow:0 0 0 10px #4be38a00;opacity:.6}}
.proj{display:grid;grid-template-columns:auto 1fr auto;gap:2rem;align-items:center;border:2px solid var(--ink);border-radius:1.5rem;padding:2rem;background:var(--card)}
.pm{font:800 2rem 'Bricolage Grotesque';background:var(--blue);color:#0a0a09;border-radius:1rem;padding:1.2rem}.big1{font:800 4rem 'Bricolage Grotesque';color:var(--blue)}
.tw{overflow-x:auto;border:2px solid var(--ink);border-radius:1.5rem}table{border-collapse:collapse;min-width:680px;width:100%}th,td{padding:1rem;text-align:start;border-bottom:1px solid var(--line);vertical-align:top}th b{display:block;font:800 1.2rem 'Bricolage Grotesque'}.pr{font:800 3rem 'Bricolage Grotesque';color:var(--blue);display:block}
@media(max-width:760px){.dn{display:none}#ls{margin-inline-start:auto}.bg{display:block}.fg,.proj{grid-template-columns:1fr}section{padding:3rem 0}
#mn{display:flex;position:fixed;inset:0;background:var(--paper);flex-direction:column;justify-content:center;align-items:center;gap:1rem;transform:translateY(-105%);transition:transform .6s cubic-bezier(.7,0,.2,1);z-index:45}#mn.o{transform:none}
#mn a.l{font:800 2.2rem 'Bricolage Grotesque';opacity:0;transform:translateY(30px);transition:.5s}#mn.o a.l{opacity:1;transform:none}#mn.o a.l:nth-child(2){transition-delay:.1s}#mn.o a.l:nth-child(3){transition-delay:.2s}#mn.o a.l:nth-child(4){transition-delay:.3s}}
@media(max-width:480px){.logo small{display:none}}
main,footer{overflow-x:clip}html{overflow-x:hidden}
@media(max-width:760px){nav .wrap{gap:.5rem;padding-inline:.8rem}#ls{max-width:104px;font-size:.85rem}.chip#pb{padding:.4rem .7rem}}
.hero>.wrap{width:100%}
.sub{border-bottom:1px solid var(--line);background:var(--card)}.sub .wrap{display:flex;gap:1.2rem;flex-wrap:wrap;align-items:center;padding-block:.5rem}.sub a{text-decoration:none}.sub b,.sub a.on{color:var(--blue)}.sub a:hover{text-decoration:underline}