:root { --ink:#eff2ff; --muted:#a8b0c9; --line:#29324c; --surface:#141a2d; --surface-2:#1d2540; --accent:#a7f36e; --accent-ink:#132309; --danger:#ffaf99; }
* { box-sizing:border-box; }
body { margin:0; background:#0b1020; color:var(--ink); font:16px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
.shell { width:min(1120px,calc(100% - 32px)); margin:0 auto; padding:42px 0 64px; }
.site-nav,.site-footer { display:flex; justify-content:space-between; gap:18px; align-items:center; padding:0 4px 20px; color:var(--muted); font-size:.9rem; }.site-nav a,.site-footer a { color:var(--muted); text-decoration:none; }.site-nav a:hover,.site-footer a:hover { color:var(--accent); }.site-nav .brand { color:var(--ink); font-weight:800; letter-spacing:-.02em; }.site-nav div,.site-footer div { display:flex; flex-wrap:wrap; gap:16px; }.site-footer { padding:28px 4px 0; }
.tool,.details,.faq { border:1px solid var(--line); border-radius:22px; background:linear-gradient(145deg,#151c32,#101627); box-shadow:0 18px 50px #0004; }
.tool { padding:clamp(22px,4vw,46px); }
.eyebrow { margin:0 0 8px; color:var(--accent); font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; } h1 { max-width:650px; margin-bottom:8px; font-size:clamp(2.25rem,6vw,4.8rem); line-height:.98; letter-spacing:-.055em; } h2 { font-size:clamp(1.45rem,3vw,2.2rem); line-height:1.05; letter-spacing:-.03em; } h3 { font-size:1rem; }
.lede { max-width:650px; color:var(--muted); font-size:1.05rem; }
.controls { display:grid; grid-template-columns:minmax(240px,.9fr) 1.1fr; gap:16px; margin-top:30px; }
.dropzone,.field { min-height:154px; border:1px dashed #657196; border-radius:16px; background:#0b1122; padding:22px; display:flex; flex-direction:column; justify-content:center; gap:5px; transition:.18s ease; }
.dropzone { align-items:center; text-align:center; cursor:pointer; } .dropzone:hover,.dropzone.is-dragover { border-color:var(--accent); background:#172237; } .dropzone input { position:absolute; width:1px; height:1px; opacity:0; }
.dropzone-icon { width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:var(--accent); color:var(--accent-ink); font-size:1.25rem; font-weight:900; }.dropzone span,.field span,.status,small { color:var(--muted); }.field { align-items:stretch; }.field span { font-weight:700; }.field input { width:100%; border:0; border-bottom:1px solid #58637f; outline:0; background:transparent; color:var(--ink); font:inherit; padding:10px 0; }.field input:focus { border-color:var(--accent); }
.status { margin:14px 2px 0; min-height:24px; }.status.error { color:var(--danger); }
.results { margin-top:44px; border-top:1px solid var(--line); padding-top:30px; }.section-heading { display:flex; gap:18px; align-items:end; justify-content:space-between; }.section-heading h2 { margin-bottom:0; }.copy-button { border:0; border-radius:999px; background:var(--accent); color:var(--accent-ink); padding:10px 15px; font-weight:800; white-space:nowrap; cursor:pointer; }.copy-button:focus-visible,.dropzone:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.preview-grid { display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:16px; margin-top:24px; }.placement { min-width:0; border:1px solid var(--line); border-radius:15px; padding:13px; background:#090e1c; overflow:hidden; }.placement-label { margin-bottom:10px; color:var(--accent); font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.thumbnail-image { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background:#26304a; border-radius:8px; }.meta-row,.side-card,.search-card { display:flex; gap:10px; padding-top:10px; }.avatar { flex:0 0 29px; height:29px; border-radius:50%; background:#7783a8; }.meta-row strong,.side-card strong,.search-card strong { display:block; font-size:.88rem; line-height:1.25; }.meta-row small,.side-card small,.search-card small { display:block; font-size:.75rem; }.side-card img { width:46%; height:min-content; }.side-card { align-items:start; }.search-card img { width:45%; height:min-content; }.search-card p { margin:6px 0 0; color:var(--muted); font-size:.72rem; }
.checks { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:16px; }.checks article { min-width:0; min-height:132px; padding:16px; border-radius:14px; background:var(--surface-2); }.check-label { display:block; color:var(--muted); font-size:.8rem; }.checks strong { display:block; margin:7px 0; font-size:1rem; line-height:1.2; }.checks small { display:block; font-size:.75rem; }
.details,.faq { margin-top:22px; padding:clamp(22px,4vw,38px); }.details-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }.details-grid p { color:var(--muted); }.limits { margin-top:14px; border-left:3px solid var(--accent); padding:12px 14px; background:#0c1426; color:var(--muted); }.limits strong { color:var(--ink); }.faq details { border-top:1px solid var(--line); padding:14px 0; }.faq summary { cursor:pointer; font-weight:750; }.faq details p { margin:10px 0 0; color:var(--muted); }
@media (max-width:760px) { .shell { width:min(100% - 20px,620px); padding-top:10px; }.site-nav,.site-footer { align-items:flex-start; flex-direction:column; }.tool,.details,.faq { border-radius:16px; }.controls,.preview-grid,.details-grid { grid-template-columns:1fr; }.preview-grid { gap:12px; }.checks { grid-template-columns:1fr 1fr; }.section-heading { align-items:start; flex-direction:column; }.copy-button { width:100%; }.side-card img,.search-card img { width:40%; }.dropzone,.field { min-height:130px; } }
@media (max-width:390px) { .checks { grid-template-columns:1fr; } h1 { font-size:2.45rem; } }