:root { --ink:#16181d; --muted:#687181; --line:#dfe4ec; --surface:#fff; --bg:#f5f7fb; font-family:Inter,system-ui,sans-serif; color:var(--ink); background:var(--bg); }
* { box-sizing:border-box; } [hidden] { display:none!important; } body { margin:0; } .shell { width:min(1120px,calc(100% - 32px)); margin:auto; padding:64px 0; } .hero { max-width:720px; margin-bottom:32px; } .hero span { color:var(--muted); font-size:.75rem; font-weight:800; letter-spacing:.12em; } h1 { margin:10px 0; font-size:clamp(2.5rem,7vw,5rem); letter-spacing:-.06em; line-height:.96; } .hero p,.help { color:var(--muted); line-height:1.5; } .workspace { display:grid; grid-template-columns:minmax(0,.9fr) minmax(360px,1.1fr); gap:24px; } .card { min-width:0; padding:26px; border:1px solid var(--line); border-radius:24px; background:var(--surface); box-shadow:0 18px 60px #141d3014; } label { display:block; margin:0 0 8px; font-size:.9rem; font-weight:750; } label em { color:var(--muted); font-size:.75rem; font-style:normal; font-weight:500; } textarea,input[type=password],select { width:100%; border:1px solid var(--line); border-radius:12px; padding:13px; color:var(--ink); background:#fff; font:inherit; } textarea { min-height:190px; resize:vertical; line-height:1.5; } input[type=file] { width:100%; } .counter { margin:6px 2px 20px; color:var(--muted); font-size:.78rem; text-align:right; } .help { margin:7px 0 18px; font-size:.8rem; } .fields { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:20px 0; } .consent { display:flex; gap:10px; align-items:flex-start; margin:22px 0; color:var(--muted); font-size:.82rem; font-weight:500; line-height:1.4; } .consent input { margin-top:3px; } button,#downloadLink { display:flex; min-height:50px; width:100%; align-items:center; justify-content:center; border:0; border-radius:12px; background:#191b22; color:#fff; cursor:pointer; font:inherit; font-weight:800; text-decoration:none; } button:disabled { opacity:.55; cursor:not-allowed; } #status { min-height:22px; margin:14px 2px 0; color:var(--muted); font-size:.85rem; } #status.success { color:#16784a; } #status.error,.alert { color:#b42318; } .alert { margin-bottom:20px; padding:14px; border:1px solid #f1b6b1; border-radius:12px; background:#fff1f0; } .result { padding:0; overflow:hidden; } .preview { display:grid; min-height:590px; place-items:center; padding:30px; background-color:#fff; background-image:linear-gradient(45deg,#e8ebf0 25%,transparent 25%),linear-gradient(-45deg,#e8ebf0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e8ebf0 75%),linear-gradient(-45deg,transparent 75%,#e8ebf0 75%); background-size:28px 28px; background-position:0 0,0 14px,14px -14px,-14px 0; color:var(--muted); text-align:center; } .preview img { display:block; max-width:100%; max-height:540px; filter:drop-shadow(0 15px 25px #191d2620); } #downloadLink { width:auto; margin:16px; } @media(max-width:850px){.shell{padding-top:38px}.workspace{grid-template-columns:1fr}.preview{min-height:420px}} @media(max-width:520px){.shell{width:calc(100% - 20px)}.card{padding:18px}.result{padding:0}.fields{grid-template-columns:1fr}}