:root { color-scheme: dark; --ink:#f4f2eb; --muted:#aaa9a1; --canvas:#101512; --panel:#18221d; --line:#34433a; --lime:#d9ff6b; --orange:#ff9364; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); background:radial-gradient(circle at 80% 0%, #2d4639 0, transparent 30rem), var(--canvas); font:16px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.shell { width:min(860px, calc(100% - 32px)); margin:0 auto; padding:72px 0 48px; }
.hero { margin:0 0 34px; }
.eyebrow { letter-spacing:.15em; font-size:.73rem; font-weight:800; color:var(--lime); margin:0 0 10px; }
h1 { margin:0; font-size:clamp(2.6rem, 8vw, 5.7rem); letter-spacing:-.065em; line-height:.9; }
h1 em { color:var(--lime); font-family:Georgia, serif; font-weight:400; }
.lede { max-width:610px; color:#ced0c5; font-size:1.15rem; margin:22px 0 10px; }
.privacy { color:var(--muted); margin:0; font-size:.9rem; }
.privacy span { color:var(--lime); font-size:1.2rem; vertical-align:-.04em; }
.desktop-link { display:inline-block; margin-top:12px; color:var(--lime); font-weight:750; text-underline-offset:3px; }
.card { border:1px solid var(--line); border-radius:18px; padding:25px; background:linear-gradient(120deg, rgba(32,45,38,.96), rgba(20,28,23,.94)); margin:14px 0; }
.card-title { display:flex; align-items:center; gap:12px; }
.card-title span { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--lime); color:#1c251e; font-size:.78rem; font-weight:900; }
h2 { margin:0; font-size:1.1rem; letter-spacing:-.02em; }
.fields { display:grid; grid-template-columns:1fr 160px; gap:16px; margin-top:21px; }
label { display:grid; gap:7px; color:#d0d2c9; font-size:.88rem; }
input[type="text"], input[type="number"] { width:100%; min-height:44px; padding:0 12px; border:1px solid #4c5b50; border-radius:9px; background:#111914; color:var(--ink); font:inherit; outline:none; }
input:focus { border-color:var(--lime); box-shadow:0 0 0 3px rgba(217,255,107,.13); }
.drop-zone { display:grid; place-items:center; min-height:172px; border:1.5px dashed #68756a; border-radius:13px; margin-top:20px; cursor:pointer; text-align:center; transition:.15s; }
.drop-zone:hover, .drop-zone.is-dragging { border-color:var(--lime); background:rgba(217,255,107,.06); }
.drop-zone input { position:absolute; inline-size:1px; block-size:1px; opacity:0; overflow:hidden; }
.drop-zone strong { font-size:1.08rem; color:var(--lime); }
.drop-zone small { color:var(--muted); }
.file-list { display:grid; gap:8px; margin-top:15px; }
.file-row { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; padding:10px 12px; border-radius:9px; background:#111914; font-size:.86rem; }
.role { padding:3px 7px; border-radius:99px; background:#26342b; color:var(--lime); font-size:.72rem; font-weight:700; }
.file-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-size { color:var(--muted); }
.remove { border:0; background:transparent; color:var(--orange); cursor:pointer; font:inherit; padding:2px 0 2px 8px; }
.explain, .status { color:var(--muted); margin:16px 0; font-size:.92rem; }
.build-button { min-height:47px; border:0; border-radius:9px; padding:0 18px; color:#152017; background:var(--lime); font:800 1rem/1 Inter, ui-sans-serif, sans-serif; cursor:pointer; }
.build-button:hover:not(:disabled) { filter:brightness(1.06); transform:translateY(-1px); }
.build-button:disabled { cursor:not-allowed; opacity:.42; }
.result { margin-top:15px; padding:16px; border:1px solid #6a813b; border-radius:10px; background:rgba(217,255,107,.08); }
.result p { margin:0 0 12px; }
.links { display:flex; flex-wrap:wrap; gap:10px; }
.link { display:inline-block; padding:8px 10px; border:1px solid var(--lime); border-radius:7px; color:var(--lime); font-weight:750; text-decoration:none; }
.how { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin:32px 4px 0; color:var(--muted); font-size:.9rem; }
.how b { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; color:#111914; background:var(--orange); }
.how p { margin:8px 0; }
@media (max-width:560px) { .shell { padding-top:45px; } .card { padding:19px; } .fields, .how { grid-template-columns:1fr; } .how { gap:4px; } .how div { display:flex; gap:10px; align-items:center; } .how p { margin:0; } }