:root { color-scheme: dark; --blue:#1fa4ff; --ink:#f6f9ff; --muted:#9db0d1; --line:rgba(69,145,236,.32); }
* { box-sizing:border-box; }
html, body { min-height:100%; }
body.tl { margin:0; font-family:Inter,system-ui,sans-serif; color:var(--ink); background:#030a1d; }
body.tl::before { content:""; position:fixed; inset:0; z-index:-1; background:linear-gradient(rgba(34,96,170,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(34,96,170,.08) 1px,transparent 1px),radial-gradient(circle at 50% 15%,rgba(26,121,244,.25),transparent 38%),radial-gradient(circle at 85% 90%,rgba(222,34,48,.12),transparent 30%); background-size:48px 48px,48px 48px,auto,auto; }
.tl__wrap { width:min(100%,600px); min-height:100vh; margin:auto; padding:clamp(18px,5vw,48px) 16px; display:grid; place-content:center; }
.tl__card { padding:clamp(25px,6vw,50px); border:1px solid var(--line); border-radius:24px; background:linear-gradient(145deg,rgba(13,38,87,.95),rgba(3,11,32,.97)); box-shadow:0 28px 80px rgba(0,0,0,.45),inset 0 1px rgba(255,255,255,.06); }
.tl__brand { display:inline-flex; align-items:center; gap:12px; color:#fff; text-decoration:none; font:700 1.55rem Oswald,sans-serif; letter-spacing:.04em; }
.tl__brand img { width:52px; height:52px; object-fit:cover; border-radius:50%; border:1px solid rgba(78,174,255,.6); }
.tl__eyebrow { margin:32px 0 8px; color:#53b6ff; font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.tl h1 { margin:0; font:700 clamp(2.1rem,8vw,3.5rem)/1 Oswald,sans-serif; letter-spacing:.015em; }
.tl__lead { max-width:460px; margin:17px 0 28px; color:#c7d5ed; font-size:1rem; line-height:1.55; }
.tl__button { width:100%; min-height:60px; margin:0 0 12px; border:0; border-radius:14px; display:flex; align-items:center; justify-content:center; gap:12px; color:white; font:700 1rem Inter,sans-serif; cursor:pointer; box-shadow:0 12px 28px rgba(0,0,0,.22); }
.tl__button:disabled { opacity:.55; cursor:wait; }
.tl__button--max { background:linear-gradient(135deg,#3158df,#7049d7); }
.tl__icon { width:25px; font-size:1.25rem; }
.tl__hint { margin:16px 8px 0; color:var(--muted); font-size:.9rem; line-height:1.55; text-align:center; }
.tl__progress { padding:24px 10px 8px; text-align:center; }
.tl__progress h2 { margin:14px 0 7px; font-size:1.2rem; }
.tl__progress p { color:var(--muted); line-height:1.5; }
.tl__spinner { display:block; width:34px; height:34px; margin:auto; border:3px solid rgba(255,255,255,.16); border-top-color:var(--blue); border-radius:50%; animation:tl-spin .8s linear infinite; }
.tl__spinner[hidden] { display:none; }
@keyframes tl-spin { to { transform:rotate(360deg); } }
.tl__code { margin:18px auto; padding:13px 18px; border:1px solid var(--line); border-radius:14px; display:grid; gap:3px; background:rgba(0,0,0,.2); }
.tl__code span { color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; }
.tl__code strong { font-size:1.65rem; letter-spacing:.18em; }
.tl__open,.tl__retry { min-height:48px; padding:13px 20px; border:1px solid var(--line); border-radius:12px; display:inline-flex; align-items:center; justify-content:center; color:#fff; background:rgba(29,119,232,.18); text-decoration:none; font:600 .92rem Inter,sans-serif; cursor:pointer; }
.tl__notice { margin-top:28px; padding:17px 18px; border-left:3px solid #ffd04b; display:grid; gap:7px; background:rgba(255,208,75,.07); color:#dbe5f6; font-size:.88rem; line-height:1.45; }
.tl__notice strong { color:#fff; }
.tl footer { margin-top:28px; padding-top:20px; border-top:1px solid rgba(124,157,213,.2); display:flex; justify-content:space-between; gap:14px; }
.tl footer a { color:#7fc5ff; font-size:.85rem; }
.tl__powered { margin:18px 0 0; color:#536887; font:600 .65rem Inter,sans-serif; letter-spacing:.16em; text-align:center; text-transform:uppercase; }
@media (max-width:430px) { .tl__wrap { display:block; padding:12px; } .tl__card { min-height:calc(100vh - 44px); padding:25px 20px; border-radius:18px; } .tl__eyebrow { margin-top:26px; } }