:root { --bg:#0b0d10; --card:#14171c; --card2:#0f1216; --line:#23272e; --text:#eef1f5; --muted:#9aa3ae; --accent:#FFD400; --ok:#5ee0b0; --err:#ff7a6b; }
* { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); color:var(--text); font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
a { color:var(--accent); }
.wrap { max-width:1180px; margin:0 auto; padding:0 20px; }
main.wrap { padding-block:36px 64px; min-height:70vh; }
.top { border-bottom:1px solid var(--line); background:#0d1014; position:sticky; top:0; z-index:5; }
.bar { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; flex-wrap:wrap; }
.brand { color:var(--text); text-decoration:none; font-size:19px; display:flex; align-items:center; gap:10px; }
.brand b { color:var(--accent); }
.dot { width:12px; height:12px; border-radius:50%; background:var(--accent); box-shadow:0 0 14px var(--accent); }
nav { display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
nav a { color:var(--muted); text-decoration:none; font-weight:600; }
nav a:hover { color:var(--text); }
.tag { display:inline-block; background:var(--accent); color:#111; font-weight:800; font-size:13px; letter-spacing:.06em; padding:5px 10px; border-radius:4px; }
h1 { font-size:clamp(30px,5vw,52px); line-height:1.08; margin:14px 0 12px; letter-spacing:-.02em; }
h1 em { font-style:normal; color:var(--accent); }
h2.sec { font-size:clamp(22px,3vw,32px); margin:48px 0 16px; }
.lead { color:var(--muted); font-size:18px; max-width:780px; }
.muted { color:var(--muted); } .small { font-size:13px; }
.hero { padding:20px 0 10px; }
.cta { display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin:22px 0; }
.btn { display:inline-block; background:var(--accent); color:#111; font-weight:800; border:0; border-radius:10px; padding:13px 22px; font-size:16px; text-decoration:none; cursor:pointer; }
.btn:hover { filter:brightness(1.08); }
.btn.sm { padding:7px 12px; font-size:14px; border-radius:8px; }
.btn.ghost { background:transparent; color:var(--text); border:1px solid var(--line); }
.btn.ghost:hover { border-color:var(--accent); }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin:26px 0; }
.stats div { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; }
.stats b { display:block; font-size:30px; color:var(--accent); }
.stats span { color:var(--muted); font-size:14px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:20px; }
.grid.three { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.card { display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; color:inherit; text-decoration:none; }
a.card:hover, .card.on { border-color:var(--accent); }
.card img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; background:#000; }
.card .body { padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.card h3 { margin:0; font-size:19px; } .card p { margin:0; color:var(--muted); font-size:15px; }
.pad { padding:20px 22px; }
.meta { display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; padding-top:6px; }
.meta span, .pill { font-size:12px; border:1px solid var(--line); border-radius:999px; padding:3px 9px; color:var(--muted); }
.meta span.go { color:#111; background:var(--accent); border-color:var(--accent); font-weight:700; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:14px 0; }
.band { margin-top:56px; background:linear-gradient(120deg,#1a1d10,#14171c); border:1px solid #3a3510; border-radius:16px; padding:28px; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.band h2 { margin:0 0 6px; }
.narrow { max-width:620px; margin:0 auto; }
.form { display:flex; flex-direction:column; gap:14px; margin:20px 0; }
.form label { display:flex; flex-direction:column; gap:6px; font-weight:600; }
.form label.check { flex-direction:row; gap:10px; font-weight:400; color:var(--muted); align-items:flex-start; }
.form label.check input { margin-top:5px; }
input, select { background:var(--card2); color:var(--text); border:1px solid var(--line); border-radius:9px; padding:12px; font-size:16px; }
input:focus { outline:2px solid var(--accent); border-color:transparent; }
.flash { border-radius:10px; padding:12px 16px; margin:14px 0; border:1px solid; }
.flash.ok { border-color:#245b49; background:#0f221c; color:var(--ok); }
.flash.err { border-color:#5b2a24; background:#26120f; color:var(--err); }
.plan .price { font-size:48px; font-weight:800; color:var(--accent); }
.plan .price span { font-size:18px; color:var(--muted); font-weight:500; }
.ticks { padding-left:0; list-style:none; } .ticks li { padding:4px 0 4px 28px; position:relative; }
.ticks li::before { content:"✓"; position:absolute; left:4px; color:var(--accent); font-weight:800; }
.crumbs { color:var(--muted); font-size:14px; } .crumbs a { color:var(--muted); }
.tabs { display:flex; gap:8px; margin:20px 0 0; flex-wrap:wrap; }
.tabs a { border:1px solid var(--line); border-radius:999px; padding:6px 14px; color:var(--text); text-decoration:none; }
.prompt { margin-bottom:16px; } .phead { display:flex; justify-content:space-between; gap:10px; align-items:center; }
.prompt h3 { margin:0; }
pre { background:var(--card2); border:1px solid var(--line); border-radius:10px; padding:14px; white-space:pre-wrap; word-break:break-word; font:14px/1.55 ui-monospace,Consolas,monospace; color:#d8dde3; max-height:520px; overflow:auto; }
pre.code { white-space:pre; max-height:none; overflow-x:auto; }
.ln { display:inline-block; width:4.2em; color:#5a626d; user-select:none; text-align:right; padding-right:1em; }
.prose h2 { margin-top:28px; } .prose code { background:var(--card2); padding:1px 5px; border-radius:4px; }
.player video { width:100%; border-radius:12px; background:#000; aspect-ratio:16/9; }
.tablewrap { overflow-x:auto; } table { width:100%; border-collapse:collapse; font-size:14px; }
th, td { text-align:left; padding:10px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
td.actions form { display:inline-flex; gap:6px; margin:0 6px 6px 0; }
.okc { color:var(--ok); }
.foot { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; color:var(--muted); font-size:14px; padding-block:24px 40px; border-top:1px solid var(--line); }
.foot a { color:var(--muted); }
@media (max-width:640px) { nav { gap:12px; } .band { padding:20px; } }