/* The look of the TV app (src/styles.css): black stage with drifting colour, glass cards, mint. */
:root {
  --mint: #00c7be; --mint-soft: rgba(0, 199, 190, 0.18);
  --text: #fff; --text-2: rgba(235, 235, 245, 0.66); --text-3: rgba(235, 235, 245, 0.38);
  --glass: rgba(36, 36, 44, 0.58); --glass-2: rgba(255, 255, 255, 0.07); --line: rgba(255, 255, 255, 0.11);
  --radius: 20px;
  --font: -apple-system, BlinkMacSystemFont, 'SamsungOne', 'Helvetica Neue', Roboto, 'Segoe UI', Arial, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: #05060a; }
body { margin: 0; background: transparent; color: var(--text); font: 17px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: #05060a; }
.bg i { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; animation: drift 18s ease-in-out infinite alternate; }
.bg i:nth-child(1) { width: 62vmax; height: 62vmax; left: -18vmax; top: -22vmax; background: #00968c; }
.bg i:nth-child(2) { width: 56vmax; height: 56vmax; right: -20vmax; top: 4vmax; background: #5a3cbe; animation-duration: 24s; }
.bg i:nth-child(3) { width: 58vmax; height: 58vmax; left: 18vmax; bottom: -34vmax; background: #145aaa; animation-duration: 30s; }
@keyframes drift { to { transform: translate(6vmax, 5vmax) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .bg i { animation: none; } }
main { max-width: 780px; margin: 0 auto; padding: 48px 16px 72px; }
.brand { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; }
.brand img { width: 72px; height: 72px; border-radius: 18px; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
h1 { font-size: 34px; line-height: 1.15; margin: 0; font-weight: 800; letter-spacing: -0.01em; }
.brand p { margin: 2px 0 0; color: var(--text-2); }
h2 { font-size: 21px; font-weight: 750; margin: 38px 0 14px; }
.glass { background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius);
         -webkit-backdrop-filter: blur(26px) saturate(1.4); backdrop-filter: blur(26px) saturate(1.4); }
.hero { padding: 26px 26px 22px; }
.btn { display: inline-flex; align-items: center; gap: 10px; background: #fff; color: #000; font-weight: 750; font-size: 19px;
       text-decoration: none; padding: 15px 30px; border-radius: 999px; border: 0; cursor: pointer; font-family: var(--font);
       transition: transform .15s ease, box-shadow .15s ease; }
.btn:hover, .btn:focus-visible { transform: scale(1.04); box-shadow: 0 0 0 4px var(--mint-soft), 0 0 0 2px var(--mint); outline: none; }
.btn.quiet { background: var(--glass-2); color: var(--text); border: 1px solid var(--line); }
.meta { color: var(--text-3); font-size: 15px; margin: 14px 0 0; }
.kicker { color: var(--mint); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 6px; }
ol.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: 12px; }
ol.steps > li { counter-increment: s; position: relative; padding: 18px 20px 18px 66px; }
ol.steps > li::before { content: counter(s); position: absolute; left: 18px; top: 16px; width: 32px; height: 32px; border-radius: 50%;
                        background: var(--mint); color: #001b19; font-weight: 800; display: grid; place-items: center; font-size: 16px; }
b, strong { font-weight: 700; }
.address { display: block; margin: 10px 0 4px; padding: 13px 16px; background: rgba(0, 0, 0, .35); border: 1px solid var(--line);
           border-left: 3px solid var(--mint); border-radius: 12px; font: 600 18px/1.35 ui-monospace, Menlo, Consolas, monospace;
           overflow-wrap: anywhere; color: #fff; }
.note { padding: 18px 20px; color: var(--text-2); font-size: 15.5px; }
.note p { margin: 0 0 10px; } .note p:last-child { margin: 0; }
.note b { color: var(--text); }
.warn { border-color: rgba(255, 196, 0, .35); }
a { color: var(--mint); }
@media (max-width: 520px) { h1 { font-size: 28px; } .hero { padding: 20px; } ol.steps > li { padding-left: 60px; } }