:root { --bg:#080b12; --panel:#101827; --panel2:#0d1320; --text:#e7f3ff; --muted:#8da2b8; --accent:#6fffe9; --hot:#ff4ecd; --line:#253348; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; color:var(--text); background:radial-gradient(circle at 20% 0%, #26315a 0, transparent 34rem), radial-gradient(circle at 90% 10%, #4b1648 0, transparent 26rem), var(--bg); }
.shell { width:min(1180px, calc(100% - 32px)); margin:0 auto; padding:48px 0; }
.hero { display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:center; margin-bottom:28px; }
.eyebrow { color:var(--accent); text-transform:uppercase; letter-spacing:.18em; font-size:.78rem; font-weight:800; }
h1 { font-size:clamp(3rem, 8vw, 7rem); line-height:.86; margin:0; letter-spacing:-.08em; } h1 span { color:var(--hot); text-shadow:0 0 28px #ff4ecd99; }
.tagline { max-width:58ch; color:var(--muted); font-size:1.15rem; }
.hero-card, .output-panel, .controls { border:1px solid var(--line); background:linear-gradient(180deg, #121c2d, #0b111d); box-shadow:0 24px 80px #0008; border-radius:24px; }
.hero-card { padding:22px; overflow:auto; } .hero-card pre { margin:0; color:var(--accent); font-size:12px; line-height:1.05; }
.workspace { display:grid; grid-template-columns:390px 1fr; gap:24px; }
.controls { padding:22px; } label { display:grid; gap:8px; color:#c9d9ea; font-weight:700; font-size:.92rem; } textarea, select, input { width:100%; border:1px solid #2a3a51; border-radius:14px; background:#080d17; color:var(--text); padding:12px 14px; font:inherit; outline:none; } textarea:focus, select:focus, input:focus { border-color:var(--accent); box-shadow:0 0 0 3px #6fffe922; }
.grid { display:grid; gap:14px; margin-top:14px; } .two { grid-template-columns:1fr 1fr; }
.toggles { display:grid; gap:10px; margin:18px 0; color:var(--muted); } .toggles label { display:flex; gap:10px; align-items:center; font-weight:600; }
.actions { display:flex; flex-wrap:wrap; gap:10px; } button { border:0; border-radius:999px; padding:12px 16px; font-weight:900; color:#061016; background:linear-gradient(135deg, var(--accent), #8aff80); cursor:pointer; } button.ghost { color:var(--text); background:#172235; border:1px solid #334660; } button:hover { transform:translateY(-1px); }
#status { min-height:1.4em; color:var(--accent); font-weight:700; }
.output-panel { overflow:hidden; min-height:520px; display:flex; flex-direction:column; } .output-header { display:flex; gap:8px; align-items:center; padding:14px 18px; border-bottom:1px solid var(--line); background:#0a0f19; color:var(--muted); }
.dot { width:12px; height:12px; border-radius:50%; display:inline-block; } .red{background:#ff5f57}.yellow{background:#ffbd2e}.green{background:#28c840}
.preview { margin:0; padding:22px; overflow:auto; flex:1; font:700 13px/1.05 "SFMono-Regular", Consolas, "Liberation Mono", monospace; white-space:pre; color:#e7f3ff; text-shadow:0 0 18px currentColor; }
@media (max-width:900px){ .hero,.workspace{grid-template-columns:1fr}.two{grid-template-columns:1fr}.shell{padding:28px 0} }

.content-layout { display:grid; grid-template-columns:minmax(0, 1fr); gap:24px; }
.creator-column { min-width:0; }
.ad-slot { contain:content; margin:30px auto; max-width:760px; min-height:0; }
.ad-slot:empty { display:none; }
.ad-slot-inline { padding:18px; border:1px solid rgba(141,162,184,.22); border-radius:22px; background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)); box-shadow:0 18px 60px #0004; backdrop-filter:blur(10px); }
.ad-slot-secondary { margin-top:26px; }
.sponsor-label { display:block; margin-bottom:10px; color:#8da2b8; font-size:.68rem; font-weight:900; letter-spacing:.18em; text-transform:uppercase; }
.sponsor-card { display:block; color:var(--text); text-decoration:none; border:1px solid rgba(111,255,233,.14); border-radius:18px; padding:18px; background:rgba(8,13,23,.48); transition:border-color .2s ease, transform .2s ease, background .2s ease; }
.sponsor-card:hover, .sponsor-card:focus-visible { border-color:rgba(111,255,233,.45); background:rgba(16,24,39,.78); transform:translateY(-1px); outline:none; }
.sponsor-card span { color:var(--accent); font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.sponsor-card strong { display:block; margin-top:8px; font-size:1rem; }
.sponsor-card p { margin:.45rem 0 0; color:var(--muted); line-height:1.55; font-size:.92rem; }
.ad-sidebar { display:none; }
.site-footer { margin-top:48px; padding:30px; border:1px solid var(--line); border-radius:28px; background:linear-gradient(180deg, rgba(18,28,45,.78), rgba(11,17,29,.86)); box-shadow:0 24px 80px #0006; }
.site-footer h2 { margin:.2rem 0 .4rem; font-size:clamp(1.6rem, 4vw, 2.6rem); letter-spacing:-.04em; }
.footer-copy { margin:0; max-width:62ch; color:var(--muted); line-height:1.6; }
.ad-slot-footer { max-width:none; margin:22px 0 0; }
.sponsor-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; }
.sponsor-card.compact { min-height:150px; }
@media (min-width:1180px){ .shell { width:min(1360px, calc(100% - 40px)); } .content-layout { grid-template-columns:minmax(0, 1fr) 300px; align-items:start; } .ad-sidebar { display:block; position:sticky; top:24px; } .ad-slot-sidebar { max-width:300px; margin:0; padding:16px; border:1px solid rgba(141,162,184,.2); border-radius:22px; background:rgba(13,19,32,.72); box-shadow:0 18px 60px #0004; } .ad-slot-sidebar .sponsor-card { padding:16px; } }
@media (max-width:900px){ .ad-slot-inline { margin:24px 0; } .ad-slot-primary, .ad-slot-secondary { display:none; } .sponsor-grid { grid-template-columns:1fr; } .site-footer { padding:22px; margin-top:30px; } }