@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');

:root { color-scheme:dark; --bg:#060b16; --panel:#0d1628; --panel-2:#111d33; --line:#22304a; --muted:#94a3b8; --text:#e5eefc; --cyan:#22d3ee; --blue:#3b82f6; --green:#34d399; --pink:#fb7185; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; background:radial-gradient(circle at 50% -10%,#18345c 0,#060b16 38rem); color:var(--text); font-family:Inter,system-ui,sans-serif; }
body::before { content:""; position:fixed; z-index:-1; inset:0; opacity:.18; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:64px 64px; mask-image:linear-gradient(to bottom,black,transparent 75%); }
a { color:inherit; text-decoration:none; } button,input,select,textarea { font:inherit; } button { cursor:pointer; }
.container { width:min(1180px,calc(100% - 2rem)); margin:auto; }
.site-header { position:sticky; top:0; z-index:20; background:rgba(6,11,22,.78); border-bottom:1px solid rgba(148,163,184,.16); backdrop-filter:blur(18px); box-shadow:0 10px 35px #0003; }
.navbar { min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand { display:flex; align-items:center; gap:.75rem; font-weight:800; letter-spacing:.02em; }
.brand-mark { display:grid; place-items:center; width:42px; height:42px; border-radius:14px; background:linear-gradient(135deg,#2563eb,#06b6d4); box-shadow:0 8px 28px #0ea5e955; animation:float 5s ease-in-out infinite; }
.brand small { display:block; color:var(--cyan); font-size:.7rem; margin-top:.25rem; font-weight:500; }
.nav-links { display:flex; align-items:center; gap:.25rem; }
.nav-links a { padding:.55rem .55rem; border-radius:9px; color:#cbd5e1; font-size:.78rem; font-weight:600; transition:.2s; white-space:nowrap; }
.nav-links a:hover,.nav-links a:focus-visible { color:#fff; background:#17243b; transform:translateY(-1px); }
.menu-toggle { display:none; border:1px solid var(--line); color:#dbeafe; background:#101b30; border-radius:10px; padding:.65rem .75rem; }
.hero { position:relative; padding:7.5rem 0 5.5rem; border-bottom:1px solid var(--line); isolation:isolate; overflow:hidden; }
.hero::after { content:""; position:absolute; width:30rem; height:30rem; right:-8rem; top:1rem; z-index:-1; border-radius:50%; background:radial-gradient(circle,#0ea5e933,transparent 67%); filter:blur(6px); animation:drift 10s ease-in-out infinite alternate; }
.eyebrow { color:var(--cyan); font:600 .72rem 'JetBrains Mono',monospace; letter-spacing:.14em; text-transform:uppercase; }
h1 { max-width:920px; font-size:clamp(2.3rem,6vw,5.1rem); line-height:1.03; letter-spacing:-.06em; margin:1rem 0 1.3rem; animation:rise .7s ease both; }
h1 span { background:linear-gradient(90deg,#60a5fa,#67e8f9,#34d399,#60a5fa); background-size:220% auto; -webkit-background-clip:text; color:transparent; animation:gradient 7s linear infinite; }
h2 { font-size:clamp(1.65rem,3vw,2.5rem); letter-spacing:-.04em; margin:.4rem 0; }
h3 { margin:.2rem 0 .55rem; }
.lead { max-width:760px; color:#bac7da; font-size:1.05rem; line-height:1.75; }
.section { padding:5rem 0; border-bottom:1px solid var(--line); }
.section-head { max-width:760px; margin-bottom:2rem; }
.muted { color:var(--muted); line-height:1.7; }
.grid { display:grid; gap:1rem; } .grid-4 { grid-template-columns:repeat(4,1fr); } .grid-3 { grid-template-columns:repeat(3,1fr); } .grid-2 { grid-template-columns:repeat(2,1fr); }
.card { position:relative; overflow:hidden; background:linear-gradient(145deg,rgba(17,29,51,.86),rgba(10,18,34,.94)); border:1px solid var(--line); border-radius:20px; padding:1.25rem; box-shadow:0 15px 45px #00000025; transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease; }
.card::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(120deg,transparent 25%,rgba(255,255,255,.05) 50%,transparent 75%); transform:translateX(-110%); transition:transform .7s ease; }
.card:hover { border-color:#3970ab; transform:translateY(-4px); box-shadow:0 20px 55px #0005; } .card:hover::before { transform:translateX(110%); }
.badge { display:inline-flex; padding:.35rem .6rem; border:1px solid #2563eb66; border-radius:999px; color:#93c5fd; background:#1d4ed81a; font:600 .7rem 'JetBrains Mono',monospace; }
.sim-tabs { display:flex; flex-wrap:wrap; gap:.55rem; margin:1.5rem 0; }
.sim-tab,.primary,.secondary { border:1px solid var(--line); border-radius:11px; padding:.7rem .85rem; color:#cbd5e1; background:#101b30; font-weight:700; font-size:.78rem; transition:.2s; }
.sim-tab:hover,.secondary:hover { background:#17243b; color:#fff; border-color:#3b597e; transform:translateY(-1px); }
.sim-tab.active,.primary { color:white; border-color:#3b82f6; background:linear-gradient(135deg,#2563eb,#0891b2); box-shadow:0 9px 25px #0891b244; }
.sim-content[hidden] { display:none; } .sim-layout { display:grid; grid-template-columns:290px 1fr; gap:1rem; } .controls { display:flex; flex-direction:column; gap:1rem; }
.control { display:grid; gap:.4rem; color:#cbd5e1; font-size:.78rem; font-weight:600; } .control output { color:var(--cyan); font-family:'JetBrains Mono',monospace; }
input[type=range] { width:100%; accent-color:var(--cyan); } select,input[type=text],textarea { width:100%; border:1px solid var(--line); border-radius:10px; color:#e5eefc; background:#081121; padding:.65rem .7rem; } textarea { min-height:110px; resize:vertical; font-family:'JetBrains Mono',monospace; font-size:.75rem; }
.canvas-card { min-width:0; } canvas { display:block; width:100%; height:auto; min-height:280px; border-radius:14px; background:#030712; border:1px solid #1e293b; box-shadow:inset 0 0 35px #0008; } .canvas-card canvas { aspect-ratio:16/8; }
.toolbar { display:flex; justify-content:space-between; align-items:center; gap:.75rem; margin-bottom:.7rem; color:#cbd5e1; font-size:.8rem; font-weight:700; } .stat { color:var(--cyan); font:600 .72rem 'JetBrains Mono',monospace; } .actions { display:flex; flex-wrap:wrap; gap:.6rem; }
.prompt-output { min-height:120px; white-space:pre-wrap; overflow:auto; color:#c4b5fd; font:.74rem 'JetBrains Mono',monospace; background:#060b16; border:1px solid var(--line); border-radius:12px; padding:.8rem; }
.score-row { display:grid; grid-template-columns:1fr auto; gap:.35rem .8rem; align-items:center; margin:1rem 0; color:#cbd5e1; font-size:.8rem; } .score-row input { grid-column:1/-1; }
.footer { padding:2.5rem 0; color:var(--muted); text-align:center; font-size:.8rem; }
:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} } @keyframes drift { from{transform:translate(0,0) scale(1)} to{transform:translate(-4rem,2rem) scale(1.15)} } @keyframes rise { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} } @keyframes gradient { to{background-position:220% center} }
@media(max-width:1240px) { .nav-links { display:none; position:absolute; top:68px; left:1rem; right:1rem; padding:.65rem; flex-direction:column; align-items:stretch; background:#0b1426; border:1px solid var(--line); border-radius:14px; box-shadow:0 20px 50px #0008; } .nav-links.open { display:flex; } .menu-toggle { display:block; } }
@media(max-width:980px) { .grid-4 { grid-template-columns:repeat(2,1fr); } .grid-3 { grid-template-columns:repeat(2,1fr); } }
@media(max-width:700px) { .container { width:min(100% - 1.1rem,1180px); } .hero { padding:4rem 0 3.5rem; } .section { padding:3.5rem 0; } .grid-4,.grid-3,.grid-2,.sim-layout { grid-template-columns:1fr; } .brand small { display:none; } .brand { font-size:.82rem; } .canvas-card canvas { min-height:220px; } .toolbar { align-items:flex-start; flex-direction:column; } }
@media(max-width:480px) { .card { padding:1rem; border-radius:14px; } .section { padding:2.5rem 0; } .hero { padding:3rem 0 2.5rem; } .lead { font-size:.95rem; } .canvas-card canvas { min-height:170px; aspect-ratio:16/10; } .sim-tab,.primary,.secondary { padding:.6rem .7rem; font-size:.72rem; } .badge { font-size:.65rem; padding:.3rem .5rem; } }
.katex-display { max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.katex { max-width:100%; }
pre, code { max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; } }

/* Muallif bo'limi */
.author-card { display:grid; grid-template-columns:220px minmax(0,1fr); gap:1.75rem; align-items:center; }
.author-photo { width:100%; height:auto; aspect-ratio:714/842; object-fit:cover; border-radius:16px; border:1px solid var(--line); box-shadow:0 12px 30px #0006; }
.author-info h2 { margin:.35rem 0 .5rem; }
.author-role { color:#e2e8f0; font-weight:700; margin:0 0 .35rem; }
.footer a { color:var(--cyan); text-decoration:none; } .footer a:hover { text-decoration:underline; }
@media(max-width:640px) { .author-card { grid-template-columns:1fr; text-align:center; } .author-photo { max-width:220px; margin:0 auto; } }