:root { --br: #139340; --br-d: #0f7a35; --brs: #e3f4e9; --ink: #0a0f14; --tx: #111827; --mu: #5b6b7a; --ln: #dde4ea; --bg: #f4f7fa; --card: #fff; --kw: 100vw; font-size: clamp(15px, calc(var(--kw) * 0.026), 22px); }
* { box-sizing: border-box; }
html, body { margin: 0px; height: 100%; }
body { background: var(--bg); color: var(--tx); font-family: "Plus Jakarta Sans", "Noto Sans Georgian", "Noto Sans", system-ui, sans-serif; display: flex; flex-direction: column; user-select: none; }
button { font: inherit; color: inherit; cursor: default; }
.top { background: var(--ink); color: rgb(255, 255, 255); padding: 0.7em 1em; display: flex; align-items: center; gap: 0.6em; flex: 0 0 auto; }
.logo { font-weight: 800; font-size: 1.5em; letter-spacing: -0.03em; }
.logo i { color: rgb(25, 176, 82); font-style: normal; }
.top .sp { margin-left: auto; }
.lang { display: flex; gap: 0.3em; flex: 0 0 auto; }
.lang button { font-size: min(1.125em, calc(var(--kw) * 0.029)); font-weight: 700; padding: 0.5em 0.65em; border-radius: 0.5em; background: rgb(29, 39, 49); color: rgb(196, 206, 217); border: 0px; min-width: 2.8em; display: inline-flex; align-items: center; gap: 0.4em; }
.lang button.on { background: var(--br); color: rgb(255, 255, 255); }
.flag { display: inline-flex; width: 1.5em; height: 1em; border-radius: 0.15em; overflow: hidden; box-shadow: rgba(255, 255, 255, 0.25) 0px 0px 0px 1px; flex: 0 0 auto; }
.flag svg { width: 100%; height: 100%; display: block; }
.steps { display: flex; gap: 0.35em; padding: 0.8em 1.2em 0px; flex: 0 0 auto; }
main { flex: 1 1 0%; min-height: 0px; overflow: hidden; padding: 1em 1.2em; display: flex; flex-direction: column; gap: 0.75em; }
.eyebrow { color: var(--br); font-weight: 700; font-size: 0.75em; letter-spacing: 0.12em; text-transform: uppercase; }
h1 { margin: 0px; font-size: 1.75em; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.sub { color: var(--mu); margin: 0px; }
.tile { border: 0px; border-radius: 1em; padding: 1.2em; display: flex; align-items: center; gap: 0.9em; min-height: 7.5em; color: rgb(255, 255, 255); text-align: left; width: 100%; }
.tile b { display: block; font-size: 1.5em; }
.tile small { opacity: 0.9; font-size: 0.85em; }
.tile .ic { width: 3.4em; height: 3.4em; border-radius: 0.9em; background: rgba(255, 255, 255, 0.15); display: grid; place-items: center; flex: 0 0 auto; }
.tile .ic svg { width: 1.9em; height: 1.9em; }
.t-green { background: linear-gradient(160deg, #19b052, var(--br-d)); }
.t-ink { background: linear-gradient(160deg, #24303b, var(--ink)); }
.card { background: var(--card); border: 1px solid var(--ln); border-radius: 0.9em; padding: 0.9em 1em; }
.foot { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: 0.6em 1em; border-top: 1px solid var(--ln); background: rgb(255, 255, 255); color: var(--mu); font-size: 0.75em; flex: 0 0 auto; }
.help { font-size: 1.35em; font-weight: 700; color: var(--tx); display: flex; flex-wrap: wrap; gap: 0.3em 1em; align-items: center; }
.hide { display: none !important; }
.earlybird { flex: 1 1 0px; display: flex; align-items: center; gap: 1.2em; padding: 1em 1.4em; }
.earlybird b { font-size: 1.25em; }
.keydrop.home { height: 100%; min-height: 10em; max-height: 24em; margin: 0px; contain: size; aspect-ratio: 330 / 840; width: auto; max-width: 100%; display: block; flex: 0 0 auto; }
.kd-lines { fill: none; stroke: var(--mu); stroke-width: 3; stroke-linejoin: round; }
.kd-glow { fill: var(--brs); stroke: var(--br); stroke-width: 4; }
.kd-flap { fill: rgb(255, 255, 255); stroke: var(--br); stroke-width: 3; }
.kd-key { fill: var(--br); opacity: 0; }
.kd-hole { fill: var(--bg); }
.kd-sticker rect { fill: var(--br); }
.kd-sticker .kd-icon { fill: none; stroke: rgb(255, 255, 255); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.kd-sticker text { fill: rgb(255, 255, 255); font-size: 7.5px; font-weight: 800; }