:root { color-scheme: dark; --ink:#111629; --panel:#1d2440; --orange:#ff9e28; --lime:#d6ff39; --muted:#b7bdd0; --line:rgba(255,255,255,.14); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:radial-gradient(circle at 90% 0%,#313b6d 0,transparent 30rem),var(--ink); color:#fff; font-family:Inter,Arial,sans-serif; }
.page-shell { width:min(100%,560px); min-height:100svh; margin:auto; padding:24px 20px calc(28px + env(safe-area-inset-bottom)); position:relative; overflow:hidden; }
.page-shell::before { content:""; width:270px; height:270px; border:1px solid rgba(214,255,57,.25); border-radius:50%; position:absolute; right:-150px; top:155px; }
.brand { display:flex; align-items:baseline; gap:7px; font-weight:900; letter-spacing:-.04em; position:relative; z-index:1; }
.brand-mark { color:var(--lime); font-size:30px; font-style:italic; }.brand-city { font-size:16px; }
.intro { padding:clamp(78px,18vh,150px) 0 30px; position:relative; z-index:1; }.eyebrow { margin:0 0 14px; color:var(--orange); font-weight:800; font-size:12px; letter-spacing:.13em; }
h1,h2 { letter-spacing:-.055em; line-height:.98; margin:0; } h1 { font-size:clamp(43px,11vw,62px); } h1 em { color:var(--lime); font-style:normal; } h2 { font-size:clamp(34px,9vw,48px); }
.lead { margin:25px 0 34px; max-width:390px; font-size:18px; line-height:1.45; color:var(--muted); }.button { width:100%; border:0; border-radius:15px; min-height:59px; padding:14px 20px; font-size:17px; font-weight:800; cursor:pointer; transition:transform .18s,opacity .18s; text-decoration:none; }.button:active { transform:scale(.98); }.button-primary,.button-telegram { color:var(--ink); background:var(--lime); display:flex; justify-content:space-between; align-items:center; }.button-telegram { color:#fff; background:#2aabee; margin:0 0 12px; }.button-primary span,.button-telegram span { font-size:25px; line-height:0; }.button[disabled] { opacity:.55; cursor:wait; }
.flow { padding-top:48px; position:relative; z-index:1; }.progress { display:flex; align-items:center; gap:8px; margin-bottom:38px; }.progress-dot { width:9px; height:9px; border-radius:50%; background:#4b5270; }.progress-dot.is-active { background:var(--lime); }.progress-label { margin-left:5px; color:var(--muted); font-size:13px; }.hint { color:var(--muted); line-height:1.4; margin:16px 0 24px; }.direction-grid { display:grid; gap:10px; margin:0 0 20px; }.direction-option { position:relative; overflow:hidden; text-align:left; color:#fff; background:rgba(29,36,64,.86); border:1px solid var(--line); padding:17px 18px; border-radius:14px; cursor:pointer; }.direction-option strong { display:block; font-size:16px; letter-spacing:.01em; position:relative; z-index:1; }.direction-option small { color:var(--muted); display:block; margin-top:5px; font-size:13px; position:relative; z-index:1; }.direction-option.is-selected { border-color:var(--lime); box-shadow:inset 0 0 0 1px var(--lime); background:#27315a; }.direction-icon { position:absolute; width:96px; height:96px; object-fit:cover; right:-14px; bottom:-16px; opacity:.76; mix-blend-mode:screen; pointer-events:none; }.form-error { min-height:20px; margin:0 0 12px; color:#ff8294; font-size:14px; }.field-label { display:block; font-size:14px; font-weight:700; margin:29px 0 9px; }.text-field { width:100%; min-height:58px; border-radius:14px; border:1px solid var(--line); background:#1d2440; color:#fff; padding:0 17px; font:inherit; font-size:18px; outline:none; }.text-field:focus { border-color:var(--lime); box-shadow:0 0 0 3px rgba(214,255,57,.12); }.privacy { margin:17px 4px 0; color:var(--muted); font-size:12px; line-height:1.4; }.back { border:0; padding:0; background:none; color:var(--lime); font-size:15px; cursor:pointer; margin-bottom:30px; }.result { text-align:center; padding:20vh 10px 20px; position:relative; z-index:1; }.result h2 { margin-bottom:18px; }.result p:not(.eyebrow) { color:var(--muted); font-size:18px; line-height:1.45; margin:0 0 34px; }.result-orbit { width:100px; height:100px; border-radius:50%; display:grid; place-items:center; margin:0 auto 32px; border:1px solid var(--lime); color:var(--lime); font-size:38px; box-shadow:0 0 45px rgba(214,255,57,.2); }
.card-preview { display:block; width:100%; margin:0 auto 16px; border-radius:16px; box-shadow:0 18px 38px rgba(0,0,0,.32); }.button-download { display:flex; justify-content:space-between; align-items:center; min-height:118px; color:var(--ink); background:var(--lime); margin:0 0 12px; font-size:21px; }.button-download span { font-size:30px; }
.crop-box { position:relative; width:100%; aspect-ratio:941/1672; overflow:hidden; border-radius:14px; background:#050812; touch-action:none; }.crop-box img { width:100%; height:100%; object-fit:contain; transform-origin:center; user-select:none; pointer-events:none; }.crop-guide { position:absolute; inset:8%; border:1px solid rgba(214,255,57,.8); border-radius:10px; pointer-events:none; }.photo-scale { width:100%; margin:14px 0 8px; accent-color:var(--lime); }
.crop-editor { display:grid; grid-template-columns:minmax(0,1fr) 62px; gap:12px; align-items:start; }.crop-box .template-overlay { position:absolute; inset:0; z-index:2; width:100%; height:100%; object-fit:fill; transform:none; }.crop-guide { z-index:3; }.template-list { display:grid; gap:9px; }.template-choice { width:62px; aspect-ratio:1; padding:0; overflow:hidden; border:2px solid transparent; border-radius:8px; background:#1d2440; cursor:pointer; }.template-choice img { width:100%; height:100%; object-fit:cover; }.template-choice.is-selected { border-color:var(--lime); box-shadow:0 0 0 2px rgba(214,255,57,.2); }
.direction-option strong { text-shadow:0 2px 7px #111629,0 0 12px #111629; }.direction-option small { text-shadow:0 2px 6px #111629,0 0 10px #111629; }
.photo-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:10px 0 8px; }.photo-action { min-height:78px; display:flex; align-items:center; justify-content:space-between; padding:14px; border-radius:14px; background:#303958; color:#fff; font-weight:800; cursor:pointer; }.photo-action:first-child { background:var(--lime); color:var(--ink); }.photo-action span { font-size:25px; }.photo-input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.camera-dialog { width:min(94vw,560px); padding:16px; border:1px solid var(--line); border-radius:16px; background:var(--ink); color:#fff; }.camera-dialog::backdrop { background:rgba(0,0,0,.75); }.camera-dialog video { width:100%; max-height:70vh; object-fit:cover; border-radius:12px; margin-bottom:12px; }
@media (min-width:600px) { .page-shell { padding-top:32px; }.direction-grid { grid-template-columns:1fr 1fr; }.direction-option { min-height:108px; } }