@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,800&display=swap');
:root{--o:#ff7a1a;--o2:#ffa34d;--p:#6d28d9;--p2:#a78bfa;--bg:#140a24;--bg2:#1f1236;--tx:#f6efff;--mut:#b9a8d6;--r:14px}
*{box-sizing:border-box}html{scroll-padding-top:70px}
body{margin:0;font-family:'Bricolage Grotesque',system-ui,sans-serif;background:var(--bg);color:var(--tx);line-height:1.6;min-height:100vh}
a{color:var(--o2)}
header{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:1.2rem;padding:.8rem 1.5rem;background:rgba(20,10,36,.92);backdrop-filter:blur(8px);border-bottom:2px solid var(--p);flex-wrap:wrap}
.logo{font-weight:800;font-size:1.5rem;text-decoration:none;color:var(--o)}.logo b{color:var(--p2)}
nav{display:flex;gap:.3rem;flex-wrap:wrap;margin-left:auto}
nav a{color:var(--tx);text-decoration:none;padding:.4rem .9rem;border-radius:99px;font-weight:600}
nav a:hover,nav a.on{background:var(--p)}nav a.ext{border:1px solid var(--o);color:var(--o2)}
main{max-width:1100px;margin:0 auto;padding:2rem 1.5rem}
h1{font-size:clamp(2.4rem,7vw,5rem);line-height:1;margin:0 0 1rem;font-weight:800}
h2{font-size:1.8rem;margin:2rem 0 1rem}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center;padding:2rem 0}
.hero h1 span{color:var(--o)}.hero h1 em{font-style:normal;color:var(--p2)}
.hero img,.card img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r);display:block}
.hero img{transform:rotate(2deg);box-shadow:-14px 14px 0 var(--p)}
.btn{display:inline-block;border:0;cursor:pointer;font:inherit;font-weight:700;padding:.7rem 1.3rem;border-radius:10px;background:var(--o);color:#1a0b00;text-decoration:none}
.btn:hover{background:var(--o2)}.btn.alt{background:var(--p);color:#fff}.btn.alt:hover{background:#7c3aed}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.2rem}
.card{background:var(--bg2);border:1px solid #3b2468;border-radius:var(--r);padding:1rem;display:flex;flex-direction:column;gap:.6rem}
.card h3{margin:.2rem 0 0}.card p{margin:0;color:var(--mut)}.card .btn{margin-top:auto;text-align:center}
.bar{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0}
input,select,textarea{font:inherit;background:var(--bg2);color:var(--tx);border:2px solid #3b2468;border-radius:10px;padding:.65rem .9rem}
input:focus,select:focus,textarea:focus,.btn:focus-visible,nav a:focus-visible{outline:3px solid var(--o);outline-offset:2px}
.bar input{flex:1;min-width:200px}
.frame{background:#000;border:2px solid var(--p);border-radius:var(--r);overflow:hidden;position:relative}
.frame iframe{width:100%;height:70vh;border:0;display:block;background:#fff}
.frame:fullscreen{border-radius:0;border:0}.frame:fullscreen iframe{height:100vh}
.note{color:var(--mut);font-size:.9rem}
#log{height:55vh;overflow:auto;background:var(--bg2);border:2px solid #3b2468;border-radius:var(--r);padding:1rem;display:flex;flex-direction:column;gap:.7rem}
.msg{max-width:80%;padding:.6rem .9rem;border-radius:12px;white-space:pre-wrap;word-wrap:break-word}
.msg.user{align-self:flex-end;background:var(--p)}.msg.bot{align-self:flex-start;background:#2b1a4d;border-left:4px solid var(--o)}
footer{text-align:center;padding:2rem;color:var(--mut);border-top:1px solid #3b2468;margin-top:2rem}
@media(max-width:760px){.hero{grid-template-columns:1fr}}
@media(prefers-reduced-motion:no-preference){.card{transition:transform .15s}.card:hover{transform:translateY(-4px)}}

.toggle{display:inline-flex;cursor:pointer;position:relative}
.toggle input{position:absolute;opacity:0;width:100%;height:100%;margin:0;padding:0;cursor:pointer}
.toggle span{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.1rem;border-radius:10px;font-weight:700;background:var(--bg2);border:2px solid #3b2468;color:var(--mut);transition:background .15s,border-color .15s,color .15s}
.toggle span::before{content:"";width:.9rem;height:.9rem;border-radius:50%;border:2px solid var(--mut);background:transparent}
.toggle input:checked+span{background:var(--p);border-color:var(--p2);color:#fff}
.toggle input:checked+span::before{background:var(--o);border-color:var(--o)}
.toggle input:focus-visible+span{outline:3px solid var(--o);outline-offset:2px}

.start{height:70vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:1.5rem;background:radial-gradient(circle at 20% 15%,rgba(255,122,26,.28),transparent 45%),radial-gradient(circle at 85% 90%,rgba(109,40,217,.45),transparent 50%),var(--bg2)}
.start[hidden]{display:none}
.start h2{font-size:2.2rem;margin:0 0 .4rem}.start p{color:var(--mut);margin:0 0 1.2rem}
.quick{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}
.frame:fullscreen .start{height:100vh}

.card[hidden],#browse[hidden],#player[hidden]{display:none}
input[type=search]{-webkit-appearance:none;appearance:none}
.toggle[hidden]{display:none}