/* Layout: a working "director" console on top (phone preview + transcript), then a filterable wall of looping 9:16 stages. */
:root {
  --bg: #EEF0F5;
  --surface: #FFFFFF;
  --ink: #12141C;
  --muted: #586074;
  --line: #D9DDE7;
  --accent: #3446F0;
  --accent-ink: #FFFFFF;
  --soft: #E3E7FF;
  /* video-screen palette: always dark, it is footage */
  --screen: #10131B;
  --cap: #FFD60A;
  --hot: #FF4D6D;
  --mint: #34E3B0;
  --sky: #5CC8FF;
  --f-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --f-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --f-hand: "Caveat", "Comic Sans MS", cursive;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B0D12; --surface: #151821; --ink: #ECEEF5; --muted: #9AA2B6; --line: #262B38;
    --accent: #8E9BFF; --accent-ink: #0B0D12; --soft: #1E2340; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0B0D12; --surface: #151821; --ink: #ECEEF5; --muted: #9AA2B6; --line: #262B38;
  --accent: #8E9BFF; --accent-ink: #0B0D12; --soft: #1E2340; color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { background: var(--bg); color: var(--ink); font: 15px/1.55 var(--f-body); }
.legal { text-align: center; padding: 24px 16px 40px; font-size: 13px; color: var(--muted); display: grid; gap: 8px; justify-items: center; } .legal p { margin: 0; max-width: 680px; line-height: 1.5; } .legal b { color: var(--ink); } .legal a { color: var(--muted); }
.wrap { max-width: 1200px; margin: 0 auto; padding-inline: 20px; padding-block: 40px 72px; display: grid; gap: 56px; }

/* ---------- header ---------- */
header { display: grid; gap: 14px; }
.eyebrow { font: 600 12px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
h1 { margin: 0; font: 850 clamp(2.2rem, 5.2vw, 3.6rem)/.95 var(--f-display); font-stretch: 125%; letter-spacing: -.02em; text-wrap: balance; }
h1 .y { background: var(--cap); color: #12141C; padding: 0 .12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.lede { margin: 0; max-width: 62ch; font-size: 17px; color: var(--muted); }
.facts { display: flex; flex-wrap: wrap; gap: 8px 22px; font: 500 13px/1.4 var(--f-mono); color: var(--ink); }
.facts span::before { content: "■ "; color: var(--accent); }

h2 { margin: 0; font: 800 26px/1.1 var(--f-display); font-stretch: 112%; text-wrap: balance; }
.sec-head { display: grid; gap: 6px; margin-bottom: 20px; }
.sec-head p { margin: 0; color: var(--muted); max-width: 70ch; }

/* ---------- stage (shared by demo + gallery) ---------- */
.stage { position: relative; aspect-ratio: 9 / 16; width: 100%; max-width: 100%; container-type: size; overflow: hidden; background: var(--screen); border-radius: 14px; isolation: isolate; font-family: var(--f-display); }
/* placeholder footage: a backlit interview shot with window light, bokeh, vignette and grain */
.footage { position: absolute; inset: 0; overflow: hidden; background:
  radial-gradient(44% 30% at 16% 20%, rgba(255,186,120,.42), transparent 70%),
  radial-gradient(40% 34% at 92% 34%, rgba(96,128,255,.30), transparent 72%),
  radial-gradient(80% 40% at 50% 104%, rgba(255,120,90,.18), transparent 70%),
  linear-gradient(180deg, #232A3D 0%, #1A1F2E 52%, #10131B 100%); }
div.footage::before { content: ""; position: absolute; inset: 0; filter: blur(.45cqmin); background:
  radial-gradient(2.6cqmin 2.6cqmin at 12% 14%, rgba(255,214,150,.9), transparent 70%),
  radial-gradient(4.2cqmin 4.2cqmin at 25% 31%, rgba(255,170,110,.5), transparent 70%),
  radial-gradient(3cqmin 3cqmin at 79% 12%, rgba(150,180,255,.75), transparent 70%),
  radial-gradient(5.4cqmin 5.4cqmin at 88% 27%, rgba(120,150,255,.38), transparent 70%),
  radial-gradient(2cqmin 2cqmin at 66% 21%, rgba(255,222,180,.7), transparent 70%),
  radial-gradient(3.6cqmin 3.6cqmin at 7% 45%, rgba(255,150,100,.42), transparent 70%),
  radial-gradient(2.3cqmin 2.3cqmin at 94% 51%, rgba(160,190,255,.55), transparent 70%),
  radial-gradient(1.6cqmin 1.6cqmin at 36% 9%, rgba(255,236,200,.65), transparent 70%),
  linear-gradient(90deg, transparent 60%, rgba(255,255,255,.035) 60% 76%, transparent 76%); }
div.footage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(130% 85% at 50% 42%, transparent 52%, rgba(0,0,0,.6) 100%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E"); }
.fg-head { position: absolute; left: 50%; top: 59%; width: 31cqmin; height: 36cqmin; translate: -50% -50%; border-radius: 50% 50% 46% 46% / 50% 50% 50% 50%;
  background: radial-gradient(70% 60% at 50% 30%, #3A3443, #1C1922 72%), linear-gradient(#1A171F, #1A171F);
  box-shadow: inset 1.5cqmin .6cqmin 1.6cqmin -.8cqmin rgba(255,196,140,.8), inset -1.3cqmin .4cqmin 1.6cqmin -.8cqmin rgba(130,160,255,.6), 0 0 7cqmin rgba(255,170,120,.14); }
.fg-body { position: absolute; left: 50%; bottom: -12cqmin; width: 98cqmin; height: 54cqmin; translate: -50% 0; border-radius: 50% 50% 0 0 / 40% 40% 0 0;
  background: linear-gradient(180deg, #2A2633, #14121A 70%);
  box-shadow: inset 2.2cqmin 1.4cqmin 2cqmin -1.2cqmin rgba(255,196,140,.6), inset -2cqmin 1.4cqmin 2cqmin -1.2cqmin rgba(130,160,255,.45); }
.fg-body::before { content: ""; position: absolute; left: 50%; top: -12cqmin; width: 15cqmin; height: 14cqmin; translate: -50% 0; border-radius: 30% 30% 0 0; background: linear-gradient(90deg, #2B2430, #1A171F 55%, #221F2C); box-shadow: inset .8cqmin 0 1cqmin -.5cqmin rgba(255,196,140,.45); }
.footage.live .fg-head, .footage.live .fg-body { animation: breathe 4.2s ease-in-out infinite; }
@keyframes breathe { 50% { transform: translateY(.6cqmin) scale(1.006); } }
.layer, .caps { position: absolute; inset: 0; pointer-events: none; }
.ov { position: absolute; inset: 0; }
.zone { position: absolute; left: 8%; right: 8%; top: 6%; height: 37%; display: grid; place-items: center; }
.panel { background: rgba(12, 14, 22, .8); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.09); border-radius: 4cqmin; padding: 4.5cqmin 5cqmin; color: #fff; width: 100%; }
.pt { font: 700 4.2cqmin/1.2 var(--f-display); color: rgba(255,255,255,.75); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3cqmin; }
.shadowtxt { text-shadow: 0 .7cqmin 0 rgba(0,0,0,.85), 0 0 3cqmin rgba(0,0,0,.55); }

/* captions */
.cap { position: absolute; left: 6%; right: 6%; top: 72%; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 2.2cqmin; font: 900 8.6cqmin/1.08 var(--f-display); text-transform: uppercase; color: #fff; text-align: center; text-shadow: 0 .7cqmin 0 rgba(0,0,0,.9), 0 0 2.4cqmin rgba(0,0,0,.7); }
.cap .w { display: inline-block; animation: wIn .3s cubic-bezier(.34,1.56,.64,1) var(--t) both, wHi .34s linear var(--t) none; }
.cap .w.em { color: var(--cap); font-size: 1.1em; }
@keyframes wIn { from { opacity: 0; transform: translateY(30%) scale(.7); } to { opacity: 1; transform: none; } }
@keyframes wHi { 0%, 85% { color: var(--cap); transform: scale(1.08); } 100% { color: inherit; } }

/* templates */
.t-stat { display: grid; justify-items: center; gap: 1.5cqmin; color: #fff; }
.t-stat .chip { font: 800 3.6cqmin/1 var(--f-display); background: var(--mint); color: #08241B; padding: 1.4cqmin 2.6cqmin; border-radius: 99px; text-transform: uppercase; }
.t-stat .big { font: 900 26cqmin/1 var(--f-display); color: var(--cap); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.t-stat .lbl { font: 800 5.4cqmin/1.1 var(--f-display); text-transform: uppercase; }
.t-bars .bars { display: flex; gap: 3cqmin; height: 30cqmin; }
.t-bars .bc { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1cqmin; }
.t-bars .tr { flex: 1; width: 100%; position: relative; }
.t-bars .bar { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 1.6cqmin 1.6cqmin 0 0; background: rgba(255,255,255,.28); transform-origin: bottom; }
.t-bars .bar.hi { background: var(--cap); }
.t-bars .bv { font: 800 3.6cqmin/1 var(--f-display); font-variant-numeric: tabular-nums; }
.t-bars .bl { font: 600 3.2cqmin/1 var(--f-mono); color: rgba(255,255,255,.6); }
.t-line .row { display: flex; align-items: baseline; justify-content: space-between; gap: 2cqmin; }
.t-line .big { font: 900 13cqmin/1 var(--f-display); color: var(--mint); font-variant-numeric: tabular-nums; }
.t-line .sub { font: 600 3.4cqmin/1.2 var(--f-mono); color: rgba(255,255,255,.65); text-align: right; }
.t-line svg { width: 100%; height: 30cqmin; display: block; margin-top: 2cqmin; overflow: visible; }
.draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.t-ring { display: grid; justify-items: center; gap: 2cqmin; color: #fff; }
.t-ring .rw { position: relative; width: 44cqmin; aspect-ratio: 1; }
.t-ring svg { width: 100%; height: 100%; display: block; }
.t-ring .rn { position: absolute; inset: 0; display: grid; place-items: center; font: 900 12cqmin/1 var(--f-display); font-variant-numeric: tabular-nums; }
.t-ring .lbl { font: 800 5cqmin/1.1 var(--f-display); text-transform: uppercase; text-align: center; }
.t-price { display: grid; justify-items: center; gap: 1cqmin; color: #fff; }
.t-price .old { position: relative; font: 800 12cqmin/1 var(--f-display); color: rgba(255,255,255,.6); }
.t-price .strike { position: absolute; left: -6%; right: -6%; top: 50%; height: 1.6cqmin; background: var(--hot); border-radius: 1cqmin; transform-origin: left; rotate: -8deg; }
.t-price .new { font: 900 26cqmin/1 var(--f-display); color: var(--mint); }
.t-price .note { font: 700 4.4cqmin/1 var(--f-display); text-transform: uppercase; letter-spacing: .06em; }
.t-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.6cqmin; }
.t-list li { display: flex; align-items: center; gap: 3cqmin; font: 800 5.4cqmin/1.15 var(--f-display); }
.t-list .ck { flex: none; width: 7cqmin; height: 7cqmin; border-radius: 50%; background: var(--cap); display: grid; place-items: center; }
.t-list .ck svg { width: 60%; height: 60%; }
.t-list .pt { color: var(--cap); font-size: 6.4cqmin; }
.t-vs { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4cqmin; width: 100%; }
.t-vs .side { border-radius: 4cqmin; padding: 6cqmin 3cqmin; text-align: center; display: grid; gap: 2cqmin; justify-items: center; font: 800 5cqmin/1.1 var(--f-display); text-transform: uppercase; }
.t-vs .a { background: rgba(30,33,45,.9); color: rgba(255,255,255,.6); }
.t-vs .b { background: #fff; color: #12141C; box-shadow: 0 0 0 1.2cqmin var(--cap); }
.t-vs .ic { font-size: 11cqmin; line-height: 1; }
.t-vs .a .ic { color: var(--hot); } .t-vs .b .ic { color: #0E9F6E; }
.t-vs .badge { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 14cqmin; height: 14cqmin; border-radius: 50%; background: var(--hot); color: #fff; display: grid; place-items: center; font: 900 5.4cqmin/1 var(--f-display); box-shadow: 0 0 0 1.2cqmin var(--screen); }
.t-flow { display: flex; align-items: center; justify-content: center; gap: 1.5cqmin; width: 100%; }
.t-flow .bx { flex: 1; min-width: 0; background: #fff; color: #12141C; border-radius: 3cqmin; padding: 5cqmin 1cqmin; text-align: center; font: 800 4.6cqmin/1.1 var(--f-display); text-transform: uppercase; }
.t-flow .bx:last-child { background: var(--cap); }
.t-flow .bx b { display: block; font: 600 3cqmin/1 var(--f-mono); color: #586074; margin-bottom: 1.6cqmin; }
.t-flow svg { flex: none; width: 7cqmin; overflow: visible; }
.t-time { width: 100%; color: #fff; }
.t-time .track { position: relative; height: 34cqmin; }
.t-time .ln { position: absolute; left: 4%; right: 4%; top: 50%; height: 1.2cqmin; background: rgba(255,255,255,.35); border-radius: 1cqmin; transform-origin: left; }
.t-time .nd { position: absolute; top: 50%; translate: -50% -50%; display: grid; justify-items: center; }
.t-time .dot { width: 6cqmin; height: 6cqmin; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.4cqmin rgba(255,255,255,.18); }
.t-time .nd.hi .dot { background: var(--cap); box-shadow: 0 0 0 1.6cqmin rgba(255,214,10,.3); }
.t-time .yr { position: absolute; bottom: 9cqmin; font: 900 7cqmin/1 var(--f-display); white-space: nowrap; }
.t-time .nd.hi .yr { color: var(--cap); }
.t-time .tl { position: absolute; top: 9cqmin; font: 700 3.6cqmin/1.1 var(--f-display); text-transform: uppercase; white-space: nowrap; color: rgba(255,255,255,.75); }
.t-map { position: relative; height: 34cqmin; padding: 0; overflow: hidden; background-color: rgba(12,14,22,.85); background-image: radial-gradient(rgba(255,255,255,.22) .5cqmin, transparent .6cqmin); background-size: 4cqmin 4cqmin; }
.t-map .pinw { position: absolute; left: 50%; top: 22%; translate: -50% 0; display: grid; justify-items: center; }
.t-map .pin { width: 9cqmin; height: 9cqmin; background: var(--hot); border-radius: 50% 50% 50% 0; rotate: -45deg; display: grid; place-items: center; }
.t-map .pin::after { content: ""; width: 3.4cqmin; height: 3.4cqmin; border-radius: 50%; background: #fff; }
.t-map .rip { position: absolute; left: 50%; top: 52%; width: 18cqmin; height: 6cqmin; translate: -50% -50%; border-radius: 50%; border: .8cqmin solid var(--hot); }
.t-map .city { position: absolute; left: 50%; bottom: 8%; translate: -50% 0; background: #fff; color: #12141C; font: 900 5.4cqmin/1 var(--f-display); text-transform: uppercase; padding: 1.8cqmin 3.4cqmin; border-radius: 99px; white-space: nowrap; }
.t-lower { position: absolute; left: 6%; right: 10%; top: 70%; display: grid; gap: 1.2cqmin; }
.t-lower .nm { justify-self: start; background: var(--cap); color: #12141C; font: 900 7cqmin/1 var(--f-display); text-transform: uppercase; padding: 2cqmin 3.4cqmin; transform-origin: left; }
.t-lower .rl { justify-self: start; background: rgba(12,14,22,.88); color: #fff; font: 600 3.8cqmin/1 var(--f-mono); padding: 1.8cqmin 3.4cqmin; }
.t-circle { position: absolute; inset: 0; }
.t-circle svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.t-circle .lab { position: absolute; right: 6%; top: 22%; font: 700 10cqmin/1 var(--f-hand); color: var(--cap); rotate: -6deg; text-shadow: 0 .5cqmin 0 rgba(0,0,0,.6); }
.t-zoom { position: absolute; inset: 0; overflow: hidden; }
.t-zoom .footage { transform-origin: 50% 58%; }
.t-zoom .flash { position: absolute; inset: 0; background: #fff; opacity: 0; }
.t-zoom .br { position: absolute; width: 9cqmin; height: 9cqmin; border: 1.2cqmin solid var(--cap); }
.t-emoji { position: relative; display: grid; justify-items: center; gap: 1cqmin; }
.t-emoji .em { font-size: 26cqmin; line-height: 1; filter: drop-shadow(0 1cqmin 1.6cqmin rgba(0,0,0,.5)); }
.t-emoji .pt2 { position: absolute; left: 50%; top: 34%; width: 3cqmin; height: 3cqmin; margin: -1.5cqmin; border-radius: 50%; }
.t-emoji .wd { font: 900 10cqmin/1 var(--f-display); color: #fff; text-transform: uppercase; }
.t-stamp { padding: 3cqmin 5cqmin; border: 1.2cqmin solid var(--hot); border-radius: 3cqmin; color: var(--hot); background: rgba(10,10,14,.7); font: 900 11cqmin/1 var(--f-display); text-transform: uppercase; text-align: center; rotate: -8deg; }
.t-stamp small { display: block; font: 700 4cqmin/1.2 var(--f-mono); letter-spacing: .12em; margin-top: 1.4cqmin; }
.t-slam { display: grid; justify-items: center; gap: 1cqmin; }
.t-slam .sw { font: 900 24cqmin/.95 var(--f-display); font-stretch: 80%; color: var(--cap); text-transform: uppercase; text-shadow: 0 1.2cqmin 0 #000, 0 0 4cqmin rgba(0,0,0,.6); }
.t-slam .ul { width: 70%; height: 2cqmin; background: #fff; border-radius: 2cqmin; transform-origin: left; }
.t-mark { background: #fff; color: #12141C; border-radius: 3cqmin; padding: 5cqmin; font: 800 7.4cqmin/1.15 var(--f-display); text-transform: uppercase; width: 100%; }
.t-mark .hl { position: relative; isolation: isolate; white-space: nowrap; }
.t-mark .mk { position: absolute; left: -2%; right: -2%; top: 18%; bottom: 4%; background: var(--cap); z-index: -1; transform-origin: left; border-radius: 1cqmin; }
.t-quote .qm { font: 900 22cqmin/.6 var(--f-display); color: var(--cap); height: 9cqmin; }
.t-quote .qt { font: 800 6.2cqmin/1.2 var(--f-display); min-height: 15cqmin; }
.t-quote .by { font: 600 3.6cqmin/1.2 var(--f-mono); color: rgba(255,255,255,.65); margin-top: 2.4cqmin; }
.t-quote .cur { display: inline-block; width: .5cqmin; height: 1em; background: var(--cap); vertical-align: -.12em; margin-left: .4cqmin; animation: blink .8s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.t-question { display: grid; justify-items: center; gap: 3cqmin; }
.t-question .qb { width: 24cqmin; height: 24cqmin; border-radius: 50%; background: var(--hot); color: #fff; display: grid; place-items: center; font: 900 17cqmin/1 var(--f-display); box-shadow: 0 0 0 1.6cqmin rgba(255,77,109,.3); }
.t-question .qq { font: 900 7cqmin/1.1 var(--f-display); color: #fff; text-transform: uppercase; text-align: center; }
.t-notif { position: absolute; left: 5%; right: 5%; top: 5%; background: rgba(250,250,252,.96); color: #12141C; border-radius: 4.5cqmin; padding: 3.4cqmin; display: grid; grid-template-columns: auto 1fr; gap: 1cqmin 3cqmin; align-items: center; box-shadow: 0 2cqmin 6cqmin rgba(0,0,0,.4); font-family: var(--f-body); }
.t-notif .ap { grid-row: span 2; width: 10cqmin; height: 10cqmin; border-radius: 2.6cqmin; background: linear-gradient(#4ADE80, #16A34A); display: grid; place-items: center; }
.t-notif .ap svg { width: 60%; }
.t-notif .hd { display: flex; justify-content: space-between; font: 700 3.6cqmin/1 var(--f-body); }
.t-notif .hd span { color: #6B7280; font-weight: 500; }
.t-notif .bd { position: relative; font: 500 4cqmin/1.25 var(--f-body); min-height: 5cqmin; }
.t-notif .dots { position: absolute; left: 0; top: 0; display: flex; gap: 1cqmin; padding-top: 1cqmin; }
.t-notif .dots i { width: 1.8cqmin; height: 1.8cqmin; border-radius: 50%; background: #9CA3AF; animation: dot 1s ease-in-out infinite; }
.t-notif .dots i:nth-child(2) { animation-delay: .15s; } .t-notif .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 50% { transform: translateY(-1cqmin); opacity: .5; } }
.t-chapter { position: absolute; left: 0; right: 0; top: 16%; padding: 6cqmin 8cqmin; background: var(--cap); color: #12141C; display: grid; gap: 1cqmin; }
.t-chapter small { font: 700 4cqmin/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
.t-chapter strong { font: 900 15cqmin/.95 var(--f-display); font-stretch: 85%; text-transform: uppercase; }
.t-progress { position: absolute; left: 6%; right: 6%; top: 4%; display: grid; gap: 2cqmin; }
.t-progress .pb { position: relative; height: 2.4cqmin; border-radius: 2cqmin; background: rgba(255,255,255,.22); overflow: hidden; }
.t-progress .pf { position: absolute; inset: 0; background: var(--cap); transform-origin: left; }
.t-progress .tk { position: absolute; top: 0; bottom: 0; width: .8cqmin; background: var(--screen); }
.t-progress .pl { justify-self: start; background: rgba(12,14,22,.85); color: #fff; font: 800 4cqmin/1 var(--f-display); text-transform: uppercase; padding: 1.8cqmin 3cqmin; border-radius: 99px; }
.t-cta { position: relative; display: grid; justify-items: center; gap: 4cqmin; }
.t-cta .av { width: 18cqmin; height: 18cqmin; border-radius: 50%; background: linear-gradient(135deg, var(--sky), var(--accent, #3446F0)); box-shadow: 0 0 0 1.2cqmin #fff; }
.t-cta .btn { position: relative; display: grid; place-items: center; min-width: 50cqmin; padding: 3.6cqmin 6cqmin; border-radius: 99px; background: var(--hot); color: #fff; font: 900 6cqmin/1 var(--f-display); text-transform: uppercase; transition: background .25s; }
.t-cta .btn > span { grid-area: 1 / 1; transition: opacity .2s, transform .25s; }
.t-cta .btn .b2 { opacity: 0; transform: scale(.6); }
.t-cta .btn.on { background: #fff; color: #12141C; }
.t-cta .btn.on .b1 { opacity: 0; transform: scale(.6); }
.t-cta .btn.on .b2 { opacity: 1; transform: none; }
.t-cta .cursor { position: absolute; width: 11cqmin; left: 60%; top: 72%; filter: drop-shadow(0 .6cqmin .8cqmin rgba(0,0,0,.5)); }

/* kinetic type */
.k-stack { display: grid; justify-items: center; gap: .5cqmin; width: 100%; font-family: var(--f-display); text-transform: uppercase; }
.k-stack span { display: block; font-weight: 900; line-height: .92; white-space: nowrap; color: #fff; }
.k-stack span:nth-child(2) { color: var(--cap); font-stretch: 75%; }
.k-scr { font: 900 15cqmin/1 var(--f-display); color: #fff; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.k-scr i { font-style: normal; color: var(--mint); }
.k-flip { display: grid; justify-items: center; gap: 1cqmin; perspective: 60cqmin; font: 900 8cqmin/1 var(--f-display); color: #fff; text-transform: uppercase; }
.k-flip .fw { position: relative; height: 17cqmin; width: 84cqmin; }
.k-flip .fw span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15cqmin; color: var(--cap); backface-visibility: hidden; transform-origin: 50% 50% -8cqmin; opacity: 0; }
.k-wave { font: 900 17cqmin/1 var(--f-display); color: #fff; text-transform: uppercase; white-space: nowrap; }
.k-wave span { display: inline-block; }
.k-wave span:nth-child(odd) { color: var(--cap); }
.k-out { position: relative; font: 900 19cqmin/1 var(--f-display); text-transform: uppercase; white-space: nowrap; }
.k-out .o { color: transparent; -webkit-text-stroke: .6cqmin #fff; }
.k-out .f { position: absolute; inset: 0; color: var(--cap); -webkit-text-stroke: .6cqmin var(--cap); }
.k-zt { position: relative; width: 100%; height: 40cqmin; }
.k-zt span { position: absolute; inset: 0; display: grid; place-items: center; font: 900 17cqmin/1 var(--f-display); color: #fff; text-transform: uppercase; opacity: 0; }
.k-zt span:nth-child(2) { color: var(--cap); }
.k-mask { position: relative; display: grid; justify-items: start; gap: 1cqmin; }
.k-mask .ln { position: relative; overflow: hidden; padding: .5cqmin 1.5cqmin; }
.k-mask .tx { font: 900 11cqmin/1 var(--f-display); color: #fff; text-transform: uppercase; white-space: nowrap; opacity: 0; }
.k-mask .ln:nth-child(2) .tx { color: var(--cap); font-size: 14cqmin; }
.k-mask .bar { position: absolute; inset: 0; background: var(--cap); transform: scaleX(0); transform-origin: left; }
.k-mask .ln:nth-child(2) .bar { background: #fff; }

/* motion graphics */
.m-c { position: relative; width: 100%; height: 60cqmin; display: grid; place-items: center; }
.m-c > .lbl { position: relative; z-index: 2; font: 900 13cqmin/1 var(--f-display); color: #fff; text-transform: uppercase; white-space: nowrap; }
.m-shape { position: absolute; left: 50%; top: 50%; }
.m-tri { width: 0; height: 0; border-left: 2.6cqmin solid transparent; border-right: 2.6cqmin solid transparent; border-bottom: 4.6cqmin solid var(--sky); }
.m-blob { position: absolute; width: 58cqmin; height: 46cqmin; background: linear-gradient(135deg, var(--hot), #8B5CF6 60%, var(--sky)); filter: saturate(1.1); }
.m-ring { position: absolute; left: 50%; top: 50%; width: 22cqmin; height: 22cqmin; margin: -11cqmin; border-radius: 50%; border: 1.2cqmin solid var(--hot); }
.m-live { position: relative; z-index: 2; display: flex; align-items: center; gap: 2cqmin; background: var(--hot); color: #fff; font: 900 7cqmin/1 var(--f-display); padding: 2.4cqmin 4cqmin; border-radius: 2cqmin; }
.m-live i { width: 3cqmin; height: 3cqmin; border-radius: 50%; background: #fff; }
.m-conf { position: absolute; top: 0; width: 2.2cqmin; height: 3.6cqmin; border-radius: .4cqmin; }
.m-star { position: absolute; width: 9cqmin; height: 9cqmin; background: var(--cap); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.m-rays { position: absolute; width: 130cqmin; height: 130cqmin; border-radius: 50%; background: repeating-conic-gradient(rgba(255,214,10,.42) 0 10deg, transparent 10deg 20deg); -webkit-mask: radial-gradient(closest-side, #000 20%, transparent 100%); mask: radial-gradient(closest-side, #000 20%, transparent 100%); }
.m-badge { position: relative; z-index: 2; background: var(--cap); color: #12141C; font: 900 10cqmin/1 var(--f-display); text-transform: uppercase; padding: 4cqmin 6cqmin; border-radius: 3cqmin; rotate: -4deg; }
.m-doodle { position: relative; z-index: 2; font: 900 12cqmin/1 var(--f-display); color: #fff; text-transform: uppercase; }
.m-c svg.ov2 { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 3; }
.m-hand { position: absolute; z-index: 3; font: 700 8cqmin/1 var(--f-hand); color: var(--cap); }
.m-orb { position: absolute; width: 56cqmin; height: 56cqmin; border-radius: 50%; border: .5cqmin dashed rgba(255,255,255,.4); }
.m-orb span { position: absolute; width: 12cqmin; height: 12cqmin; margin: -6cqmin; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 6.4cqmin; }
.m-core { position: relative; z-index: 2; width: 22cqmin; height: 22cqmin; border-radius: 50%; background: var(--cap); color: #12141C; display: grid; place-items: center; font: 900 4.6cqmin/1 var(--f-display); text-transform: uppercase; text-align: center; }
.m-speed { position: absolute; inset: 0; background: repeating-conic-gradient(from 0deg at 50% 58%, rgba(255,255,255,.75) 0 1.2deg, transparent 1.2deg 7deg); -webkit-mask: radial-gradient(circle at 50% 58%, transparent 30%, #000 62%); mask: radial-gradient(circle at 50% 58%, transparent 30%, #000 62%); }
.m-speedw { position: absolute; left: 0; right: 0; top: 14%; text-align: center; font: 900 17cqmin/1 var(--f-display); color: var(--cap); text-transform: uppercase; }

/* transitions */
.x-wrap { position: absolute; inset: 0; overflow: hidden; }
.x-b { position: absolute; inset: 0; overflow: hidden; opacity: 0; color: #fff; background: radial-gradient(.3cqmin .3cqmin at 20% 12%, #fff, transparent), radial-gradient(.25cqmin .25cqmin at 72% 8%, #fff, transparent), radial-gradient(.3cqmin .3cqmin at 46% 20%, rgba(255,255,255,.8), transparent), radial-gradient(.25cqmin .25cqmin at 86% 24%, rgba(255,255,255,.7), transparent), linear-gradient(180deg, #070B26 0%, #24195A 32%, #8E3A76 56%, #FF9A5A 72%, #FFC27A 78%); }
.x-b .sun { position: absolute; left: 50%; top: 60%; width: 50cqmin; height: 50cqmin; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, #FFF1C9 0 26%, rgba(255,186,110,.65) 42%, transparent 70%); animation: xbSun 4s cubic-bezier(.2,.7,.2,1) both; }
.x-b .city, .x-b .city2 { position: absolute; left: -6%; right: -6%; bottom: 0; transform-origin: 50% 100%; animation: xbPush 4s linear both; }
.x-b .city2 { height: 52%; background: #4A2C5E; opacity: .75; clip-path: polygon(0 34%, 6% 34%, 6% 20%, 13% 20%, 13% 30%, 19% 30%, 19% 12%, 27% 12%, 27% 28%, 35% 28%, 35% 18%, 42% 18%, 42% 6%, 49% 6%, 49% 24%, 57% 24%, 57% 14%, 66% 14%, 66% 30%, 73% 30%, 73% 9%, 81% 9%, 81% 26%, 89% 26%, 89% 16%, 100% 16%, 100% 100%, 0 100%); }
.x-b .city { height: 36%; background: linear-gradient(transparent 20%, #0A0710 88%), radial-gradient(rgba(255,206,130,.9) .38cqmin, transparent .58cqmin) 1.5cqmin 2cqmin / 7.4cqmin 6.6cqmin, radial-gradient(rgba(255,180,110,.6) .34cqmin, transparent .54cqmin) 4.6cqmin 4.4cqmin / 9.8cqmin 8.2cqmin, linear-gradient(#1B1328, #0A0710); clip-path: polygon(0 30%, 8% 30%, 8% 12%, 16% 12%, 16% 26%, 22% 26%, 22% 4%, 30% 4%, 30% 22%, 38% 22%, 38% 14%, 44% 14%, 44% 0, 52% 0, 52% 18%, 60% 18%, 60% 8%, 68% 8%, 68% 24%, 76% 24%, 76% 10%, 84% 10%, 84% 28%, 92% 28%, 92% 16%, 100% 16%, 100% 100%, 0 100%); }
.x-b .lbl { position: absolute; left: 8%; right: 8%; bottom: 17%; display: grid; justify-items: start; gap: 2.4cqmin; font: 850 9cqmin/1 var(--f-display); font-stretch: 112%; text-shadow: 0 .8cqmin 3cqmin rgba(0,0,0,.5); animation: xbLbl .7s .25s cubic-bezier(.2,.8,.2,1) both; }
.x-b .lbl b { font: 700 3.4cqmin/1 var(--f-mono); letter-spacing: .14em; background: var(--cap); color: #12141C; padding: 1.2cqmin 2.2cqmin; border-radius: 1cqmin; text-shadow: none; }
@keyframes xbSun { from { translate: -50% -36%; } }
@keyframes xbPush { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes xbLbl { from { opacity: 0; transform: translateY(30%); } }
.x-streak { position: absolute; top: -10%; bottom: -10%; width: 220%; left: -60%; background: repeating-linear-gradient(90deg, rgba(255,255,255,.0) 0 3cqmin, rgba(255,255,255,.55) 3cqmin 4cqmin, rgba(180,200,255,.25) 4cqmin 9cqmin); filter: blur(1.4cqmin); }
.x-iris { position: absolute; inset: 0; background: var(--cap); }
.x-bar { position: absolute; top: -20%; bottom: -20%; width: 70%; transform: skewX(-18deg); }
.x-slice { position: absolute; left: 0; right: 0; overflow: hidden; }
.x-slice .footage { inset: auto; left: 0; right: 0; height: 100cqh; }
.x-rgb { position: absolute; inset: 0; mix-blend-mode: screen; }
.x-tile { position: absolute; background: var(--hot); }
.x-leak { position: absolute; inset: -20%; background: radial-gradient(40% 50% at 30% 40%, rgba(255,170,60,.95), transparent 70%), radial-gradient(35% 45% at 70% 60%, rgba(255,80,120,.85), transparent 70%), radial-gradient(30% 30% at 50% 50%, rgba(255,255,230,1), transparent 70%); mix-blend-mode: screen; }
.x-half { position: absolute; left: 0; right: 0; height: 50.5%; background: #fff; }

/* camera & frame */
.c-wrap { position: absolute; inset: 0; overflow: hidden; }
.c-bg { position: absolute; inset: 0; background: linear-gradient(170deg, #1F2A4A, #0E1220); }
.c-win { position: absolute; overflow: hidden; }
.c-win .footage { inset: auto; left: 0; top: 0; width: 100cqw; height: 100cqh; transform-origin: 0 0; }
.c-panel { position: absolute; left: 7%; right: 7%; top: 8%; display: grid; gap: 3cqmin; color: #fff; }
.c-panel b { font: 900 8cqmin/1 var(--f-display); text-transform: uppercase; }
.c-sk { height: 4.4cqmin; border-radius: 2cqmin; background: rgba(255,255,255,.18); transform-origin: left; }
.c-sk.y { background: var(--cap); width: 60%; }
.c-vig { position: absolute; inset: 0; background: radial-gradient(closest-side at 50% 58%, transparent 55%, rgba(0,0,0,.75)); }
.c-spot { position: absolute; left: 50%; top: 58%; width: 46cqmin; height: 52cqmin; margin: -26cqmin 0 0 -23cqmin; border-radius: 50%; box-shadow: 0 0 0 220cqmin rgba(4,5,10,.82), inset 0 0 6cqmin rgba(4,5,10,.6); }
.c-freeze .footage { filter: grayscale(1) contrast(1.25) brightness(1.05); }
.c-freeze:has(video)::after { content: ""; position: absolute; inset: 4cqmin; border: 1.8cqmin solid #fff; border-radius: 1.2cqmin; box-shadow: 0 0 0 40cqmin rgba(0,0,0,.22), 0 2cqmin 6cqmin rgba(0,0,0,.5); }
.c-freeze .fg-head, .c-freeze .fg-body { filter: drop-shadow(0 0 0 #fff) drop-shadow(.8cqmin 0 0 #fff) drop-shadow(-.8cqmin 0 0 #fff) drop-shadow(0 -.8cqmin 0 #fff); }
.c-note { position: absolute; font: 700 10cqmin/1 var(--f-hand); color: #fff; text-shadow: 0 .5cqmin 0 rgba(0,0,0,.7); rotate: -6deg; }
.c-split-line { position: absolute; left: 0; right: 0; top: 50%; height: 1cqmin; background: var(--cap); transform-origin: left; z-index: 2; }
.c-shk .fg-head, .c-shk .fg-body { filter: drop-shadow(1.6cqmin 0 0 rgba(255,40,90,.7)) drop-shadow(-1.6cqmin 0 0 rgba(0,220,255,.7)); }
.c-tag { position: absolute; left: 8%; top: 7%; background: var(--hot); color: #fff; font: 900 5cqmin/1 var(--f-display); text-transform: uppercase; padding: 2cqmin 3.4cqmin; border-radius: 1.6cqmin; }

/* icons */
.i-c { display: grid; justify-items: center; gap: 2cqmin; color: #fff; }
.i-c svg { width: 44cqmin; height: 44cqmin; overflow: visible; }
.i-c .lbl { font: 900 7cqmin/1 var(--f-display); text-transform: uppercase; text-align: center; }
.i-c .lbl em { font-style: normal; color: var(--cap); }

/* ui & social */
.u-card { background: #fff; color: #12141C; border-radius: 4cqmin; padding: 4cqmin; width: 100%; font-family: var(--f-body); box-shadow: 0 2cqmin 6cqmin rgba(0,0,0,.4); }
.u-search { display: flex; align-items: center; gap: 2.4cqmin; border: .6cqmin solid #E5E7EB; border-radius: 99px; padding: 2.6cqmin 3.6cqmin; font: 500 4.6cqmin/1.2 var(--f-body); }
.u-search svg { width: 5cqmin; flex: none; }
.u-res { display: grid; gap: 2cqmin; margin-top: 3cqmin; }
.u-res div { display: grid; gap: 1cqmin; }
.u-res i { display: block; height: 2.6cqmin; border-radius: 2cqmin; background: #E5E7EB; }
.u-res i:first-child { background: #3446F0; width: 70%; opacity: .7; }
.u-cur { display: inline-block; width: .5cqmin; height: 1.1em; background: #12141C; vertical-align: -.2em; animation: blink .8s steps(1) infinite; }
.u-bar { display: flex; align-items: center; gap: 1.4cqmin; padding-bottom: 2.6cqmin; border-bottom: .4cqmin solid #E5E7EB; }
.u-bar b { width: 2.4cqmin; height: 2.4cqmin; border-radius: 50%; background: #F87171; }
.u-bar b:nth-child(2) { background: #FBBF24; } .u-bar b:nth-child(3) { background: #34D399; }
.u-bar span { flex: 1; margin-left: 2cqmin; background: #F3F4F6; border-radius: 99px; padding: 1.4cqmin 3cqmin; font: 500 3.6cqmin/1 var(--f-mono); }
.u-pg { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqmin; margin-top: 3cqmin; }
.u-pg i { display: block; height: 12cqmin; border-radius: 2cqmin; background: #E5E7EB; }
.u-pg i:first-child { grid-column: span 2; height: 14cqmin; background: linear-gradient(120deg, #FFD60A, #FF4D6D); }
.u-reply { display: grid; gap: 1.6cqmin; background: #fff; color: #12141C; border-radius: 3.4cqmin; padding: 3.4cqmin 4cqmin; max-width: 80cqmin; font-family: var(--f-body); box-shadow: 0 2cqmin 6cqmin rgba(0,0,0,.4); position: relative; }
.u-reply::after { content: ""; position: absolute; left: 7cqmin; bottom: -2.4cqmin; border: 1.4cqmin solid transparent; border-top-color: #fff; border-left-color: #fff; }
.u-reply small { display: flex; align-items: center; gap: 1.6cqmin; font: 500 3.4cqmin/1 var(--f-body); color: #6B7280; }
.u-reply small i { width: 5cqmin; height: 5cqmin; border-radius: 50%; background: linear-gradient(135deg, var(--sky), var(--mint)); }
.u-reply b { font: 700 5.2cqmin/1.2 var(--f-body); }
.u-post .hd { display: flex; gap: 2.4cqmin; align-items: center; font: 700 4cqmin/1.2 var(--f-body); }
.u-post .hd i { width: 9cqmin; height: 9cqmin; border-radius: 50%; background: linear-gradient(135deg, var(--hot), var(--cap)); }
.u-post .hd span { display: block; font-weight: 400; color: #6B7280; font-size: 3.4cqmin; }
.u-post p { margin: 2.4cqmin 0; font: 500 4.6cqmin/1.3 var(--f-body); }
.u-post .ft { display: flex; gap: 6cqmin; font: 600 3.8cqmin/1 var(--f-mono); color: #6B7280; }
.u-post .ft .lk { color: #E11D48; }
.u-poll b { display: block; font: 800 5cqmin/1.2 var(--f-display); margin-bottom: 3cqmin; text-transform: uppercase; }
.u-opt { position: relative; border-radius: 2cqmin; background: #F3F4F6; padding: 2.8cqmin 3cqmin; margin-top: 2cqmin; display: flex; justify-content: space-between; font: 700 4.2cqmin/1 var(--f-body); overflow: hidden; }
.u-opt i { position: absolute; inset: 0; background: #C7D2FE; transform-origin: left; }
.u-opt.win i { background: var(--cap); }
.u-opt span { position: relative; }
.u-btn { position: relative; display: grid; place-items: center; width: 60cqmin; height: 15cqmin; border-radius: 3cqmin; background: #3446F0; color: #fff; font: 800 5.4cqmin/1 var(--f-display); text-transform: uppercase; overflow: hidden; }
.u-btn .rp { position: absolute; width: 10cqmin; height: 10cqmin; border-radius: 50%; background: rgba(255,255,255,.5); }
.u-flood { position: absolute; left: 5%; right: 5%; top: 4%; display: grid; gap: 1.6cqmin; }
.u-n { display: flex; align-items: center; gap: 2.4cqmin; background: rgba(250,250,252,.96); color: #12141C; border-radius: 3cqmin; padding: 2.4cqmin 3cqmin; font: 600 3.6cqmin/1.2 var(--f-body); box-shadow: 0 1cqmin 3cqmin rgba(0,0,0,.35); }
.u-n i { flex: none; width: 6.4cqmin; height: 6.4cqmin; border-radius: 1.8cqmin; display: grid; place-items: center; font-style: normal; font-size: 3.6cqmin; }
.u-count { justify-self: end; background: var(--hot); color: #fff; font: 900 6cqmin/1 var(--f-display); padding: 2cqmin 3.4cqmin; border-radius: 99px; }
.u-tog { display: flex; align-items: center; justify-content: space-between; gap: 4cqmin; font: 800 5.4cqmin/1.1 var(--f-display); text-transform: uppercase; }
.u-sw { position: relative; flex: none; width: 22cqmin; height: 12cqmin; border-radius: 99px; background: #D1D5DB; transition: background .25s; }
.u-sw i { position: absolute; left: 1.2cqmin; top: 1.2cqmin; width: 9.6cqmin; height: 9.6cqmin; border-radius: 50%; background: #fff; box-shadow: 0 .6cqmin 1.4cqmin rgba(0,0,0,.3); }
.u-sw.on { background: #22C55E; }

/* data extras */
.d-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 1cqmin 3cqmin; font: 700 3.6cqmin/1.2 var(--f-display); text-transform: uppercase; }
.d-legend i { display: inline-block; width: 2.6cqmin; height: 2.6cqmin; border-radius: .6cqmin; margin-right: 1cqmin; vertical-align: -.2cqmin; }
.d-cd { position: relative; width: 48cqmin; height: 48cqmin; display: grid; place-items: center; }
.d-cd span { position: absolute; font: 900 30cqmin/1 var(--f-display); color: #fff; opacity: 0; }
.d-cd span:last-of-type { color: var(--cap); font-size: 20cqmin; }
.d-cd svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.d-lb { display: grid; gap: 1.6cqmin; position: relative; }
.d-row { display: flex; align-items: center; gap: 3cqmin; background: rgba(255,255,255,.1); border-radius: 2cqmin; padding: 2.2cqmin 3cqmin; font: 800 4.4cqmin/1 var(--f-display); text-transform: uppercase; }
.d-row b { width: 7cqmin; color: rgba(255,255,255,.55); font-variant-numeric: tabular-nums; }
.d-row.you { background: var(--cap); color: #12141C; position: relative; z-index: 2; }
.d-row.you b { color: #12141C; }

/* atmosphere */
.a-wrap { position: absolute; inset: 0; overflow: hidden; }
.a-lb { position: absolute; left: 0; right: 0; height: 12%; background: #000; z-index: 3; }
.a-grain { position: absolute; inset: -50%; opacity: .22; background-image: radial-gradient(rgba(255,255,255,.6) .3cqmin, transparent .4cqmin), radial-gradient(rgba(0,0,0,.7) .3cqmin, transparent .4cqmin); background-size: 3.1cqmin 2.9cqmin, 2.3cqmin 2.7cqmin; background-position: 0 0, 1.2cqmin 1.7cqmin; }
.a-date { position: absolute; left: 7%; bottom: 15%; z-index: 4; font: 600 5cqmin/1 var(--f-mono); color: #FFB547; text-shadow: 0 0 2cqmin rgba(255,181,71,.7); }
.a-scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 .5cqmin, transparent .5cqmin 1.2cqmin); z-index: 2; }
.a-vhs { position: absolute; left: 7%; top: 7%; z-index: 4; font: 600 6.4cqmin/1.4 var(--f-mono); color: #fff; text-shadow: .5cqmin 0 0 rgba(255,0,80,.8), -.5cqmin 0 0 rgba(0,220,255,.8); }
.a-band { position: absolute; left: 0; right: 0; height: 7%; background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.35), rgba(255,255,255,0)); z-index: 3; }
.a-dot { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255,240,200,.95), rgba(255,214,10,.0) 70%); }

/* premium fx */
video.footage { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.fx-canvas { display: block; width: 100%; height: 62cqmin; }
.fx-full { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fx-neon { font: 900 16cqmin/1 var(--f-display); font-stretch: 85%; color: #FFF5FD; text-transform: uppercase; text-shadow: 0 0 .8cqmin #fff, 0 0 2.4cqmin var(--hot), 0 0 5cqmin var(--hot), 0 0 9cqmin var(--hot); white-space: nowrap; }
.fx-neon small { display: block; font-size: .36em; letter-spacing: .3em; color: #E6FBFF; text-shadow: 0 0 .8cqmin #fff, 0 0 2.4cqmin var(--sky), 0 0 5cqmin var(--sky); margin-top: 2cqmin; text-align: center; }
.fx-chrome { perspective: 80cqmin; }
.fx-chrome div { font: 900 20cqmin/1 var(--f-display); font-stretch: 80%; text-transform: uppercase; white-space: nowrap; background: linear-gradient(100deg, #8A93A6 0%, #F4F6FA 22%, #6C7486 40%, #FFFFFF 50%, #7D8597 62%, #E9ECF2 80%, #9AA2B3 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 .5cqmin 0 #4B5263) drop-shadow(0 .5cqmin 0 #3A404E) drop-shadow(0 .5cqmin 0 #2A2F3A) drop-shadow(0 2cqmin 2.4cqmin rgba(0,0,0,.6)); }
.fx-glass { position: relative; width: 100%; height: 56cqmin; perspective: 120cqmin; }
.fx-glass .gc { position: absolute; left: 50%; top: 50%; width: 40cqmin; height: 50cqmin; margin: -25cqmin 0 0 -20cqmin; border-radius: 4cqmin; background: linear-gradient(150deg, rgba(255,255,255,.32), rgba(255,255,255,.06)); border: .4cqmin solid rgba(255,255,255,.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 3cqmin 8cqmin rgba(0,0,0,.35); display: grid; align-content: space-between; padding: 4cqmin; color: #fff; }
.fx-glass .gc b { font: 900 6cqmin/1 var(--f-display); text-transform: uppercase; }
.fx-glass .gc span { font-size: 10cqmin; line-height: 1; }
.fx-glass .gc i { font: 600 3.2cqmin/1 var(--f-mono); font-style: normal; opacity: .8; }
.fx-holo { width: 70cqmin; aspect-ratio: 1.6; border-radius: 4cqmin; padding: 5cqmin; display: grid; align-content: space-between; color: #12141C; position: relative; overflow: hidden; background: linear-gradient(115deg, #FFD1F0, #C7F5FF, #FFF3B8, #D6C8FF, #B8FFE6, #FFD1F0); background-size: 300% 300%; box-shadow: 0 3cqmin 8cqmin rgba(0,0,0,.5), inset 0 0 0 .4cqmin rgba(255,255,255,.7); }
.fx-holo b { font: 900 7cqmin/1 var(--f-display); text-transform: uppercase; }
.fx-holo span { font: 600 3.6cqmin/1 var(--f-mono); letter-spacing: .14em; }
.fx-holo .sh { position: absolute; inset: -40%; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.85) 50%, transparent 60%); }
.fx-cube { width: 84cqmin; height: 18cqmin; perspective: 100cqmin; }
.fx-cube .cb { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform-origin: 50% 50% -9cqmin; }
.fx-cube .cb span { position: absolute; inset: 0; display: grid; place-items: center; font: 900 13cqmin/1 var(--f-display); text-transform: uppercase; color: #12141C; background: var(--cap); backface-visibility: hidden; transform-origin: 50% 50% -9cqmin; }
.fx-cube .cb span:nth-child(2) { transform: rotateX(-90deg); background: #fff; }
.fx-cube .cb span:nth-child(3) { transform: rotateX(-180deg); background: var(--hot); color: #fff; }
.fx-cube .cb span:nth-child(4) { transform: rotateX(-270deg); background: var(--sky); }
.fx-sweep { font: 900 15cqmin/1 var(--f-display); font-stretch: 110%; text-transform: uppercase; text-align: center; background: linear-gradient(100deg, #fff 0 40%, var(--cap) 48%, #fff 56% 100%); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 .7cqmin 0 rgba(0,0,0,.8)); }
.fx-sweep small { display: block; font: 700 4cqmin/1.4 var(--f-mono); letter-spacing: .3em; color: rgba(255,255,255,.8); -webkit-text-fill-color: rgba(255,255,255,.8); }
.fx-gt { position: relative; font: 900 18cqmin/1 var(--f-display); text-transform: uppercase; color: #fff; white-space: nowrap; }
.fx-gt span { position: absolute; inset: 0; }
.fx-gt .r { color: #FF2D6F; mix-blend-mode: screen; }
.fx-gt .c { color: #2DE6FF; mix-blend-mode: screen; }
.fx-bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 17cqmin; gap: 2cqmin; width: 100%; }
.fx-bento div { border-radius: 3cqmin; background: rgba(20,24,36,.85); border: .3cqmin solid rgba(255,255,255,.12); color: #fff; padding: 2.4cqmin; display: grid; align-content: space-between; font: 800 3.6cqmin/1.1 var(--f-display); text-transform: uppercase; }
.fx-bento div b { font-size: 7cqmin; color: var(--cap); }
.fx-bento .w2 { grid-column: span 2; } .fx-bento .h2 { grid-row: span 2; background: linear-gradient(160deg, var(--hot), #7C3AED); }
.fx-bento .h2 b { color: #fff; font-size: 11cqmin; }
.fx-goo { position: relative; width: 100%; height: 56cqmin; }
.fx-goo .gw { position: absolute; inset: 0; }
.fx-goo .gw i { position: absolute; left: 50%; top: 50%; width: 16cqmin; height: 16cqmin; margin: -8cqmin; border-radius: 50%; background: var(--cap); }
.fx-goo .lbl { position: absolute; inset: 0; display: grid; place-items: center; font: 900 9cqmin/1 var(--f-display); color: #12141C; text-transform: uppercase; }
.fx-lens { position: absolute; width: 44cqmin; height: 44cqmin; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1.4cqmin #fff, 0 2cqmin 6cqmin rgba(0,0,0,.6); }
.fx-lens .footage { inset: auto; width: 100cqw; height: 100cqh; transform: scale(2); transform-origin: 0 0; }
.fx-odo { display: grid; justify-items: center; gap: 2cqmin; color: #fff; }
.fx-odo .digs { display: flex; font: 900 20cqmin/1 var(--f-display); font-variant-numeric: tabular-nums; color: var(--cap); text-shadow: 0 1cqmin 0 rgba(0,0,0,.8); }
.fx-odo .col { height: 1em; overflow: hidden; }
.fx-odo .col > div { display: flex; flex-direction: column; }
.fx-odo .lbl { font: 800 5cqmin/1 var(--f-display); text-transform: uppercase; }
.fx-ticker { position: absolute; left: 0; right: 0; top: 7%; display: flex; height: 9cqmin; font: 800 4.6cqmin/9cqmin var(--f-display); text-transform: uppercase; overflow: hidden; box-shadow: 0 1cqmin 3cqmin rgba(0,0,0,.5); }
.fx-ticker b { flex: none; background: var(--hot); color: #fff; padding: 0 3cqmin; z-index: 1; }
.fx-ticker .tr { flex: 1; background: #fff; color: #12141C; overflow: hidden; white-space: nowrap; }
.fx-ticker .tr span { display: inline-block; padding-left: 4cqmin; }
.fx-aurora i { position: absolute; width: 90cqmin; height: 90cqmin; border-radius: 50%; filter: blur(14cqmin); mix-blend-mode: screen; opacity: .6; }
.fx-grade .footage { filter: contrast(1.18) saturate(1.25) brightness(.95); }
.fx-grade .tint { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,150,170,.35), rgba(255,140,40,.3)); mix-blend-mode: overlay; }
.fx-grade .ttl { position: absolute; left: 0; right: 0; bottom: 19%; text-align: center; color: #F5E9D0; font: 600 4.4cqmin/1 var(--f-display); font-stretch: 125%; letter-spacing: .5em; text-transform: uppercase; z-index: 4; }
.fx-burn { position: absolute; inset: -30%; background: radial-gradient(30% 30% at 60% 40%, #FFFBE6, #FFB13B 35%, #E8420C 60%, rgba(120,20,0,0) 75%); mix-blend-mode: screen; filter: blur(3cqmin); }
.fx-shard { position: absolute; inset: 0; overflow: hidden; }
.fx-ink { position: absolute; inset: 0; }
.fx-ink i { position: absolute; border-radius: 50%; background: #0B0D12; }

/* ---------- batch 5 templates ---------- */
.n-kara { position: relative; font: 900 12cqmin/1.05 var(--f-display); text-transform: uppercase; text-align: center; color: rgba(255,255,255,.38); text-shadow: 0 .7cqmin 0 rgba(0,0,0,.6); }
.n-kara .f { position: absolute; inset: 0; color: var(--cap); text-shadow: 0 .7cqmin 0 rgba(0,0,0,.85), 0 0 3cqmin color-mix(in srgb, var(--cap) 45%, transparent); clip-path: inset(0 100% 0 0); }
.n-trail { display: grid; place-items: end center; padding-top: .95em; font-family: var(--f-display); font-weight: 900; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.n-trail span { grid-area: 1 / 1; }
.n-trail .e { color: transparent; -webkit-text-stroke: .32cqmin var(--cap); }
.n-trail .m { color: #fff; text-shadow: 0 .8cqmin 0 rgba(0,0,0,.85); }
.n-rot { display: grid; justify-items: center; gap: 1cqmin; font: 900 12cqmin/1.15 var(--f-display); text-transform: uppercase; color: #fff; text-align: center; }
.n-rot .pre { font-size: 6.6cqmin; }
.n-rot .slot { display: block; height: 1.15em; overflow: hidden; }
.n-rot .reel { display: block; }
.n-rot .reel b { display: block; height: 1.15em; color: var(--cap); white-space: nowrap; text-shadow: 0 .8cqmin 0 rgba(0,0,0,.85); }
.n-split { display: grid; place-items: center; padding-block: .78em; font-family: var(--f-display); font-weight: 900; line-height: 1; text-transform: uppercase; }
.n-split span { grid-area: 1 / 1; white-space: nowrap; text-shadow: 0 .8cqmin 0 rgba(0,0,0,.8); }
.n-split .t, .n-split .u { color: #fff; }
.n-split .t { clip-path: inset(0 0 50% 0); }
.n-split .u { clip-path: inset(50% 0 0 0); }
.n-split .b { color: var(--cap); }
.n-streak { display: grid; justify-items: center; gap: 3cqmin; }
.n-streak .g { display: grid; grid-template-columns: repeat(14, 4.6cqmin); gap: .9cqmin; padding: 2.4cqmin; background: rgba(12,14,22,.74); border: 1px solid rgba(255,255,255,.08); border-radius: 3cqmin; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.n-streak .g i { aspect-ratio: 1; border-radius: .9cqmin; background: rgba(255,255,255,.14); }
.n-streak .lbl { font: 800 5.2cqmin/1 var(--f-display); text-transform: uppercase; color: #fff; }
.n-streak .lbl b { color: var(--cap); font-size: 1.5em; }
.n-chat { width: 100%; display: grid; gap: 2cqmin; font: 500 4.1cqmin/1.25 var(--f-body); }
.n-chat .row { display: flex; align-items: flex-end; gap: 2cqmin; }
.n-chat .row.r { justify-content: flex-end; }
.n-chat .av { flex: none; width: 8cqmin; height: 8cqmin; border-radius: 50%; background: linear-gradient(135deg, #FF9F1C, #FF4D6D); box-shadow: 0 0 0 .5cqmin rgba(255,255,255,.15); }
.n-chat .stk { display: grid; }
.n-chat .stk > * { grid-area: 1 / 1; justify-self: start; }
.n-chat .bub { display: inline-block; max-width: 72cqmin; padding: 2.2cqmin 3.6cqmin; border-radius: 5cqmin; color: #fff; box-shadow: 0 1cqmin 3cqmin rgba(0,0,0,.35); transform-origin: 0 100%; }
.n-chat .bi, .n-chat .typing { background: #2C2F3A; border-bottom-left-radius: 1.2cqmin; }
.n-chat .bo { background: #2F7CF6; border-bottom-right-radius: 1.2cqmin; transform-origin: 100% 100%; }
.n-chat .typing { display: inline-flex; gap: 1.2cqmin; padding: 3.6cqmin 4.2cqmin; }
.n-chat .typing i { width: 1.8cqmin; height: 1.8cqmin; border-radius: 50%; background: rgba(255,255,255,.6); }
.n-chat .rd { justify-self: end; font: 500 3cqmin/1 var(--f-body); color: rgba(255,255,255,.75); }
.n-stars { display: grid; justify-items: center; gap: 3cqmin; }
.n-stars .row { display: flex; gap: 1.6cqmin; }
.n-stars .st { position: relative; display: block; width: 13cqmin; height: 13cqmin; }
.n-stars svg { display: block; width: 13cqmin; height: 13cqmin; fill: rgba(255,255,255,.22); }
.n-stars .f { position: absolute; left: 0; top: 0; height: 100%; overflow: hidden; transform-origin: 0 50%; }
.n-stars .f svg { fill: var(--cap); filter: drop-shadow(0 0 1.6cqmin color-mix(in srgb, var(--cap) 55%, transparent)); }
.n-stars .sc { display: flex; align-items: baseline; gap: 2.4cqmin; color: #fff; font: 700 4.6cqmin/1 var(--f-body); }
.n-stars .sc b { font: 900 12cqmin/1 var(--f-display); color: var(--cap); }
.n-ok { display: grid; justify-items: center; gap: 3cqmin; }
.n-ok .bdg { position: relative; width: 30cqmin; height: 30cqmin; }
.n-ok .bdg > * { position: absolute; inset: 0; }
.n-ok .disc { border-radius: 50%; background: rgba(52,227,176,.2); }
.n-ok .ring { border-radius: 50%; border: 1cqmin solid #34E3B0; opacity: 0; }
.n-ok svg { width: 100%; height: 100%; fill: none; stroke: #34E3B0; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 2cqmin rgba(52,227,176,.6)); }
.n-ok .lbl { font: 900 9cqmin/1 var(--f-display); text-transform: uppercase; color: #fff; }
.n-sale { width: 100%; display: grid; gap: 2cqmin; }
.n-sale .cd { display: grid; grid-template-columns: 9cqmin minmax(0, 1fr) auto; align-items: center; gap: 3cqmin; padding: 3cqmin 3.6cqmin; border-radius: 4cqmin; background: rgba(245,246,250,.94); color: #12141C; box-shadow: 0 2cqmin 5cqmin rgba(0,0,0,.35); }
.n-sale .ic { width: 9cqmin; height: 9cqmin; border-radius: 2.4cqmin; background: #34E3B0; color: #08241B; display: grid; place-items: center; font: 900 5cqmin/1 var(--f-display); font-style: normal; }
.n-sale .tx b { display: block; font: 700 3.7cqmin/1.2 var(--f-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-sale .tx small { font: 500 3.1cqmin/1.2 var(--f-body); color: #586074; }
.n-sale .amt { font: 900 5cqmin/1 var(--f-display); color: #0E9F6E; }
.n-cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.n-bill { position: absolute; top: -14cqmin; width: 17cqmin; height: 8.4cqmin; border-radius: 1cqmin; background: linear-gradient(135deg, #7BE8A9, #2E9E5E 60%, #23864E); box-shadow: inset 0 0 0 .6cqmin rgba(255,255,255,.35), 0 1cqmin 2cqmin rgba(0,0,0,.35); display: grid; place-items: center; }
.n-bill b { width: 5.4cqmin; height: 5.4cqmin; border-radius: 50%; border: .4cqmin solid rgba(10,60,30,.5); display: grid; place-items: center; font: 900 3.6cqmin/1 var(--f-display); color: #0E5A31; }
.n-flash { position: absolute; inset: 0; background: #EAF2FF; opacity: 0; mix-blend-mode: screen; }
.n-bolt { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 1.2cqmin #8EC5FF) drop-shadow(0 0 4cqmin #5CC8FF); }
.n-bolt path { fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.n-bolt path.br { stroke-width: .9; }
.n-below { display: grid; justify-items: center; gap: 2cqmin; }
.n-below .lb { background: var(--cap); color: #12141C; font: 900 7.2cqmin/1 var(--f-display); text-transform: uppercase; padding: 2.6cqmin 4.6cqmin; border-radius: 99px; box-shadow: 0 1.5cqmin 4cqmin rgba(0,0,0,.4); white-space: nowrap; }
.n-below svg { width: 13cqmin; height: 22cqmin; overflow: visible; }
.n-below path { fill: none; stroke: var(--cap); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 .8cqmin 0 rgba(0,0,0,.6)); }
.n-strike { display: grid; justify-items: center; gap: 1cqmin; }
.n-strike .a { position: relative; font: 900 12cqmin/1 var(--f-display); text-transform: uppercase; color: #fff; white-space: nowrap; }
.n-strike .ln { position: absolute; left: -5%; right: -5%; top: 46%; height: 1.8cqmin; border-radius: 1cqmin; background: var(--hot); transform-origin: 0 50%; box-shadow: 0 .5cqmin 0 rgba(0,0,0,.5); }
.n-strike .b { font: 700 17cqmin/1 var(--f-hand); color: var(--cap); text-shadow: 0 .8cqmin 0 rgba(0,0,0,.7); white-space: nowrap; }
.n-tier { width: 100%; display: grid; gap: 1.2cqmin; }
.n-tier .r { display: grid; grid-template-columns: 12cqmin minmax(0, 1fr); align-items: center; background: rgba(12,14,22,.8); border-radius: 2cqmin; overflow: hidden; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.n-tier .r b { height: 11cqmin; display: grid; place-items: center; font: 900 7cqmin/1 var(--f-display); color: #12141C; }
.n-tier .it { justify-self: start; margin-left: 2.4cqmin; background: #fff; color: #12141C; font: 800 4.4cqmin/1 var(--f-display); text-transform: uppercase; padding: 2cqmin 3.2cqmin; border-radius: 1.6cqmin; }
.n-tier .it:empty { display: none; }
.n-check .ci { display: flex; align-items: center; gap: 3cqmin; font: 700 4.8cqmin/1.25 var(--f-body); color: #fff; padding: 1.4cqmin 0; }
.n-check .bx { flex: none; width: 6.4cqmin; height: 6.4cqmin; border-radius: 1.6cqmin; border: .5cqmin solid rgba(255,255,255,.5); display: grid; place-items: center; }
.n-check .bx svg { width: 82%; height: 82%; }
.n-check .bx path { fill: none; stroke: #08241B; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.n-flake { position: absolute; top: -3%; border-radius: 50%; background: #fff; box-shadow: 0 0 1cqmin rgba(255,255,255,.6); }
.n-cool { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(150,190,255,.3), rgba(150,190,255,.05) 60%, rgba(220,235,255,.22)); mix-blend-mode: screen; opacity: 0; }
.n-gloom { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(40,60,90,.55), rgba(20,30,50,.35)); opacity: 0; backdrop-filter: saturate(.55); -webkit-backdrop-filter: saturate(.55); }
.n-streak-r { position: absolute; top: 0; width: .28cqmin; background: linear-gradient(transparent, rgba(220,235,255,.85)); border-radius: 1cqmin; }
.n-bead { position: absolute; border-radius: 50% 50% 46% 46%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.85) 0 12%, rgba(200,220,255,.18) 32%, rgba(30,40,60,.25) 72%); box-shadow: inset 0 -.3cqmin .5cqmin rgba(255,255,255,.35), 0 .3cqmin .6cqmin rgba(0,0,0,.35); }
.n-clone .s { position: absolute; top: 0; bottom: 0; width: 33.4%; overflow: hidden; box-shadow: 0 0 0 .4cqmin #0B0D12; }
.n-clone .s0 { left: 0; } .n-clone .s1 { left: 33.3%; } .n-clone .s2 { left: 66.6%; }
.n-clone .s .footage { position: absolute; inset: auto; left: 50%; top: 0; width: 100cqw; height: 100cqh; translate: -50% 0; }
.n-clone .s1 .footage { filter: saturate(1.3) hue-rotate(-25deg); }
.n-clone .s2 .footage { filter: saturate(1.25) hue-rotate(35deg); }
.n-clone b { position: absolute; left: 0; right: 0; top: 22%; text-align: center; font: 900 6cqmin/1 var(--f-display); text-transform: uppercase; color: #fff; text-shadow: 0 .6cqmin 0 rgba(0,0,0,.85); }
.n-lb { position: absolute; left: 0; right: 0; height: 12%; background: #000; z-index: 2; }
.n-lb.t { top: 0; } .n-lb.b { bottom: 0; }
.n-streakh { position: absolute; left: -40%; right: -40%; top: 34%; height: 1cqmin; background: linear-gradient(90deg, transparent, rgba(90,150,255,.55) 30%, #DDEBFF 50%, rgba(90,150,255,.55) 70%, transparent); filter: blur(.25cqmin); mix-blend-mode: screen; box-shadow: 0 0 3cqmin rgba(90,150,255,.8); opacity: 0; }
.n-glow { position: absolute; left: 50%; top: 34%; width: 36cqmin; height: 36cqmin; margin: -18cqmin; border-radius: 50%; background: radial-gradient(circle, rgba(230,240,255,.95), rgba(110,160,255,.35) 35%, transparent 70%); mix-blend-mode: screen; opacity: 0; }

/* ---------- batch 6: effects that transform the footage itself ---------- */
.n-rgb .lay { position: absolute; inset: 0; mix-blend-mode: screen; }
.n-rgb .base { position: absolute; inset: 0; background: #000; }
.n-mir .mh { position: absolute; inset: 0; clip-path: inset(0 0 0 100%); }
.n-mir .mh .footage { transform: scaleX(-1); }
.n-mir .seam { position: absolute; left: 50%; top: 0; bottom: 0; width: .5cqmin; margin-left: -.25cqmin; background: rgba(255,255,255,.85); box-shadow: 0 0 3cqmin rgba(255,255,255,.6); transform-origin: 50% 0; }
.n-duo .dt { position: absolute; inset: 0; isolation: isolate; clip-path: inset(0 100% 0 0); }
.n-duo .dt .footage { filter: grayscale(1) contrast(1.25) brightness(1.05); }
.n-duo .d1 { position: absolute; inset: 0; background: #1B1464; mix-blend-mode: lighten; }
.n-duo .d2 { position: absolute; inset: 0; background: var(--cap); mix-blend-mode: multiply; }
.n-duo .edge { position: absolute; top: 0; bottom: 0; left: 0; width: .8cqmin; background: #fff; box-shadow: 0 0 4cqmin #fff; }
.n-dim { position: absolute; inset: 0; background: rgba(5,6,10,.55); opacity: 0; }
.n-pol { position: absolute; left: 50%; top: 8%; width: 62cqmin; margin-left: -31cqmin; padding: 3cqmin 3cqmin 14cqmin; background: #FAF7F0; border-radius: .8cqmin; box-shadow: 0 3cqmin 8cqmin rgba(0,0,0,.55); }
.n-pol .ph { position: relative; aspect-ratio: 1; overflow: hidden; background: #111; }
.n-pol .ph .footage { inset: auto; left: 50%; top: 50%; width: 100cqw; height: 100cqh; translate: -50% -58cqh; }
.n-pol b { position: absolute; left: 0; right: 0; bottom: 3.2cqmin; text-align: center; font: 700 8cqmin/1 var(--f-hand); color: #23212A; }
.n-film { position: absolute; left: 13%; right: 13%; top: 0; display: grid; gap: 3cqmin; padding: 3cqmin 8.5cqmin; background: #0C0C0E; box-shadow: 0 0 6cqmin rgba(0,0,0,.6); }
.n-film::before, .n-film::after { content: ""; position: absolute; top: 0; bottom: 0; width: 4cqmin; background: repeating-linear-gradient(180deg, transparent 0 2cqmin, #E9E4D8 2cqmin 4.6cqmin, transparent 4.6cqmin 6.6cqmin); }
.n-film::before { left: 2.2cqmin; } .n-film::after { right: 2.2cqmin; }
.n-film .fr { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: .6cqmin; background: #222; }
.n-film .fr .footage { inset: auto; left: 50%; top: 50%; width: 100cqw; height: 100cqh; translate: -50% -56cqh; filter: sepia(.35) contrast(1.1); }
.n-dev { position: absolute; left: 50%; top: 50%; width: 58cqmin; height: 103cqmin; margin: -51.5cqmin 0 0 -29cqmin; border-radius: 8cqmin; background: #0B0C10; padding: 2.2cqmin; box-shadow: 0 0 0 .5cqmin #3A3D48, 0 4cqmin 10cqmin rgba(0,0,0,.6); }
.n-dev .scr { position: relative; width: 100%; height: 100%; border-radius: 6cqmin; overflow: hidden; container-type: size; background: #111; }
.n-dev .notch { position: absolute; left: 50%; top: 3.6cqmin; width: 14cqmin; height: 3.6cqmin; margin-left: -7cqmin; border-radius: 99px; background: #000; }
.n-chip { position: absolute; display: inline-flex; align-items: center; gap: 1.6cqmin; padding: 2.2cqmin 3.4cqmin; border-radius: 99px; background: rgba(255,255,255,.95); color: #12141C; font: 800 4cqmin/1 var(--f-display); box-shadow: 0 1.5cqmin 4cqmin rgba(0,0,0,.4); white-space: nowrap; }
.n-chip.a { left: 4%; top: 22%; } .n-chip.b { right: 4%; top: 64%; }
.n-chip i { font-style: normal; color: #FF4D6D; }
.n-comic .footage { filter: contrast(1.55) saturate(1.8) brightness(1.05); }
.n-halftone { position: absolute; inset: 0; background: radial-gradient(rgba(0,0,0,.42) 28%, transparent 31%) 0 0 / 2.1cqmin 2.1cqmin; mix-blend-mode: multiply; opacity: 0; }
.n-panel { position: absolute; inset: 4cqmin; border: 1.6cqmin solid #111; border-radius: .8cqmin; box-shadow: 0 0 0 30cqmin #F6F0E1; }
.n-pow { position: absolute; left: 6%; top: 8%; width: 50cqmin; height: 40cqmin; display: grid; place-items: center; }
.n-pow svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.n-pow polygon { fill: var(--cap); stroke: #111; stroke-width: 2.4; stroke-linejoin: round; }
.n-pow b { position: relative; max-width: 34cqmin; text-align: center; font: 900 7.4cqmin/.95 var(--f-display); color: #111; text-transform: uppercase; transform: rotate(-8deg); }
.n-therm .tw { position: absolute; inset: 0; clip-path: inset(0 0 100% 0); }
.n-therm .scan { position: absolute; left: 0; right: 0; top: 0; height: .6cqmin; background: #fff; box-shadow: 0 0 4cqmin #FFB347; }
.n-therm .lines { position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(0,0,0,.18) 0 .3cqmin, transparent .3cqmin .9cqmin); }
.n-hud { position: absolute; inset: 6% 7% 16%; --c: rgba(255,255,255,.85); background: linear-gradient(var(--c), var(--c)) top left / 12% .5cqmin no-repeat, linear-gradient(var(--c), var(--c)) top left / .5cqmin 8% no-repeat, linear-gradient(var(--c), var(--c)) top right / 12% .5cqmin no-repeat, linear-gradient(var(--c), var(--c)) top right / .5cqmin 8% no-repeat, linear-gradient(var(--c), var(--c)) bottom left / 12% .5cqmin no-repeat, linear-gradient(var(--c), var(--c)) bottom left / .5cqmin 8% no-repeat, linear-gradient(var(--c), var(--c)) bottom right / 12% .5cqmin no-repeat, linear-gradient(var(--c), var(--c)) bottom right / .5cqmin 8% no-repeat; }
.n-read { position: absolute; left: 9%; top: 8%; font: 700 4.2cqmin/1.3 var(--f-mono); color: #fff; text-shadow: 0 0 2cqmin rgba(0,0,0,.8); }
.n-read b { color: #FFD60A; font-size: 1.4em; }
.n-crt { position: absolute; inset: 0; background: #000; opacity: 0; }
.n-crt-f { position: absolute; inset: 0; overflow: hidden; transform-origin: 50% 50%; }
.n-crt-dot { position: absolute; left: 50%; top: 50%; width: 3cqmin; height: 3cqmin; margin: -1.5cqmin; border-radius: 50%; background: #fff; box-shadow: 0 0 4cqmin 1.5cqmin #CFE3FF; opacity: 0; }
.n-grid .t { position: absolute; width: 50%; height: 50%; overflow: hidden; container-type: size; box-shadow: 0 0 0 .4cqmin #0B0D12; }
.n-grid .t .footage { inset: 0; width: 100%; height: 100%; }
.n-grid .t0 { left: 0; top: 0; } .n-grid .t1 { left: 50%; top: 0; } .n-grid .t2 { left: 0; top: 50%; } .n-grid .t3 { left: 50%; top: 50%; }
.n-grid .t1 .footage { filter: sepia(.5) saturate(1.4) hue-rotate(-12deg); }
.n-grid .t2 .footage { filter: grayscale(1) contrast(1.3); }
.n-grid .t3 .footage { filter: saturate(1.3) hue-rotate(160deg); }
.n-grid .t b { position: absolute; left: 5cqmin; bottom: 5cqmin; font: 800 11cqmin/1 var(--f-display); color: #fff; text-transform: uppercase; text-shadow: 0 .6cqmin 0 rgba(0,0,0,.8); }
.n-echo .gh { position: absolute; inset: 0; mix-blend-mode: lighten; }
.n-pix canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
/* ---------- batch 7: topic graphics ---------- */
.t7-stk { display: grid; justify-items: center; gap: 1cqmin; }
.t7-stk .e { font-size: 26cqmin; line-height: 1; filter: drop-shadow(.9cqmin 0 0 #fff) drop-shadow(-.9cqmin 0 0 #fff) drop-shadow(0 .9cqmin 0 #fff) drop-shadow(0 -.9cqmin 0 #fff) drop-shadow(0 2cqmin 2.5cqmin rgba(0,0,0,.45)); }
.t7-stk .w { background: #fff; color: #12141C; font: 900 5.6cqmin/1 var(--f-display); text-transform: uppercase; padding: 1.8cqmin 3.4cqmin; border-radius: 1.6cqmin; box-shadow: 0 1.5cqmin 3cqmin rgba(0,0,0,.35); }
.t7-ut { font: 900 11cqmin/1.05 var(--f-display); text-transform: uppercase; color: #fff; text-align: center; text-wrap: balance; }
.t7-hook { display: grid; justify-items: center; gap: 2cqmin; text-align: center; }
.t7-hook .e { font-size: 13cqmin; line-height: 1; }
.t7-hook .t { font: 900 10.5cqmin/1.02 var(--f-display); font-stretch: 112%; text-transform: uppercase; color: #fff; text-wrap: balance; text-shadow: 0 .8cqmin 0 rgba(0,0,0,.85), 0 0 4cqmin rgba(0,0,0,.5); }
.t7-hook .u { width: 46cqmin; height: 1.6cqmin; border-radius: 1cqmin; background: var(--cap); transform-origin: left; }
.t7-hook .tag { font: 700 3.4cqmin/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: #12141C; background: #fff; padding: 1.4cqmin 2.6cqmin; border-radius: 99px; }
.t7-rec .pt { display: flex; justify-content: space-between; align-items: center; gap: 2cqmin; }
.t7-rec .tm { font: 700 3.4cqmin/1 var(--f-mono); color: #12141C; background: var(--cap); padding: 1.2cqmin 2cqmin; border-radius: 99px; text-transform: none; letter-spacing: 0; }
.t7-rec .ri { display: grid; grid-template-columns: 8cqmin 1fr auto; align-items: center; gap: 2.4cqmin; padding: 1.4cqmin 0; border-top: 1px solid rgba(255,255,255,.08); font: 700 4.8cqmin/1.2 var(--f-body); }
.t7-rec .ic { font-size: 6cqmin; text-align: center; }
.t7-rec .ck { font-style: normal; width: 5.6cqmin; height: 5.6cqmin; border-radius: 50%; background: #34E3B0; color: #08241B; display: grid; place-items: center; font: 900 3.4cqmin/1 var(--f-display); }
.ring { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ring circle { fill: none; stroke-linecap: round; }
.ring .bg { stroke: rgba(255,255,255,.14); }
.ring .fg { stroke: var(--c, var(--cap)); stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 1.4cqmin var(--c, var(--cap))); }
.t7-rep { display: flex; align-items: center; gap: 5cqmin; }
.t7-rep .rg { position: relative; width: 34cqmin; height: 34cqmin; --c: #34E3B0; }
.t7-rep .c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: #fff; }
.t7-rep .c b { font: 900 13cqmin/1 var(--f-display); }
.t7-rep .c span { font: 700 3.2cqmin/1 var(--f-mono); letter-spacing: .14em; color: rgba(255,255,255,.75); }
.t7-rep .side { display: grid; gap: 2.4cqmin; }
.t7-rep .lbl { font: 900 7cqmin/1 var(--f-display); text-transform: uppercase; color: #fff; }
.t7-rep .hr { display: inline-flex; align-items: center; gap: 1.6cqmin; background: rgba(12,14,22,.78); color: #fff; padding: 2cqmin 3cqmin; border-radius: 99px; font: 700 4cqmin/1 var(--f-mono); }
.t7-rep .hr i { font-style: normal; color: #FF4D6D; display: inline-block; }
.t7-rep .hr b { font-size: 1.3em; }
.t7-cdl .pt { display: flex; justify-content: space-between; align-items: baseline; }
.t7-cdl .pt b { color: #34E3B0; font: 900 6cqmin/1 var(--f-display); letter-spacing: 0; }
.t7-cdl svg { display: block; width: 100%; height: 34cqmin; overflow: visible; }
.t7-cdl .cd { transform-origin: 50% 100%; transform-box: fill-box; }
.t7-cdl .pl { fill: none; stroke: #fff; stroke-width: .9; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 1.2cqmin rgba(255,255,255,.8)); vector-effect: non-scaling-stroke; }
.t7-bp { width: 100%; background: #FBFAF6; color: #12141C; border-radius: 3cqmin; overflow: hidden; box-shadow: 0 3cqmin 7cqmin rgba(0,0,0,.45); font-family: var(--f-body); }
.t7-bp .top { display: flex; justify-content: space-between; padding: 2.4cqmin 4cqmin; background: #2F7CF6; color: #fff; font: 800 3.6cqmin/1 var(--f-mono); letter-spacing: .12em; }
.t7-bp .rt { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 3cqmin; padding: 3.6cqmin 4cqmin 2cqmin; }
.t7-bp small { display: block; font: 600 2.8cqmin/1 var(--f-mono); color: #6B7286; letter-spacing: .1em; margin-bottom: 1cqmin; }
.t7-bp .rt b { font: 900 11cqmin/1 var(--f-display); }
.t7-bp .ln { position: relative; height: 6cqmin; border-top: .5cqmin dashed #9AA2B6; margin-top: 3cqmin; }
.t7-bp .pl { position: absolute; top: -3.6cqmin; left: 0; translate: -50% 0; font-style: normal; font-size: 6cqmin; color: #2F7CF6; }
.t7-bp .ft { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqmin; padding: 2.4cqmin 4cqmin 3.4cqmin; border-top: .5cqmin dashed #D9DDE7; font: 800 4.4cqmin/1 var(--f-display); }
.t7-term { width: 100%; border-radius: 2.4cqmin; overflow: hidden; background: #0D1117; box-shadow: 0 3cqmin 7cqmin rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.1); font: 500 4cqmin/1.5 var(--f-mono); color: #C9D1D9; }
.t7-term .bar { display: flex; align-items: center; gap: 1.4cqmin; padding: 2cqmin 3cqmin; background: #161B22; }
.t7-term .bar i { width: 2.4cqmin; height: 2.4cqmin; border-radius: 50%; background: #FF5F57; } .t7-term .bar i:nth-child(2) { background: #FEBC2E; } .t7-term .bar i:nth-child(3) { background: #28C840; }
.t7-term .bar span { margin-left: 2cqmin; font-size: 3cqmin; color: #8B949E; }
.t7-term .body { padding: 3cqmin 3.6cqmin 4cqmin; min-height: 30cqmin; }
.t7-term .cmd b { color: #34E3B0; }
.t7-term .cur { display: inline-block; width: 2cqmin; height: 4.4cqmin; vertical-align: -0.8cqmin; background: #C9D1D9; margin-left: .4cqmin; }
.t7-term .o.ok { color: #34E3B0; }
.t7-lvl { display: grid; justify-items: center; gap: 3cqmin; width: 100%; }
.t7-lvl .row { display: flex; align-items: center; gap: 3cqmin; width: 100%; background: rgba(12,14,22,.8); padding: 3cqmin 3.6cqmin; border-radius: 3cqmin; border: 1px solid rgba(255,255,255,.1); }
.t7-lvl .lv { font: 900 5.6cqmin/1 var(--f-display); color: var(--cap); white-space: nowrap; }
.t7-lvl .xp { flex: 1; height: 4cqmin; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; }
.t7-lvl .xp i { display: block; height: 100%; background: linear-gradient(90deg, #A78BFA, #5CC8FF, #34E3B0); transform-origin: left; box-shadow: 0 0 3cqmin #5CC8FF; }
.t7-lvl .up { font: 900 13cqmin/1 var(--f-display); color: var(--cap); text-shadow: 0 .9cqmin 0 rgba(0,0,0,.85), 0 0 5cqmin color-mix(in srgb, var(--cap) 55%, transparent); white-space: nowrap; }
.t7-prop { position: relative; width: 100%; background: #fff; color: #12141C; border-radius: 3cqmin; overflow: hidden; box-shadow: 0 3cqmin 7cqmin rgba(0,0,0,.45); }
.t7-prop .img { position: relative; height: 26cqmin; background: linear-gradient(180deg, #8EC5FF, #D7ECFF 70%, #8FD19E 70%); }
.t7-prop .img i { position: absolute; }
.t7-prop .rf { left: 28%; width: 44%; bottom: 46%; height: 30%; background: #B5483B; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.t7-prop .bd { left: 32%; width: 36%; bottom: 14%; height: 33%; background: #F3E6D0; }
.t7-prop .dr { left: 46%; width: 8%; bottom: 14%; height: 18%; background: #6B4A34; }
.t7-prop .wn { left: 36%; width: 7%; bottom: 30%; height: 8%; background: #8EC5FF; box-shadow: 13.5cqmin 0 0 #8EC5FF; }
.t7-prop .tx { padding: 3cqmin 4cqmin 3.6cqmin; display: grid; gap: 1cqmin; }
.t7-prop .tx b { font: 900 9cqmin/1 var(--f-display); }
.t7-prop .tx > span { font: 600 3.8cqmin/1.2 var(--f-body); color: #586074; }
.t7-prop .stamp { position: absolute; right: 5cqmin; top: 6cqmin; font: 900 8cqmin/1 var(--f-display); text-transform: uppercase; color: #E8364F; border: 1cqmin solid #E8364F; padding: 1.4cqmin 3cqmin; border-radius: 1.6cqmin; background: rgba(255,255,255,.85); opacity: 0; }
.t7-ba .af { position: absolute; inset: 0; clip-path: inset(0 0 0 96%); }
.t7-ba .hd { position: absolute; top: 0; bottom: 0; left: 96%; width: .8cqmin; margin-left: -.4cqmin; background: #fff; box-shadow: 0 0 3cqmin rgba(0,0,0,.5); }
.t7-ba .hd b { position: absolute; left: 50%; top: 58%; width: 10cqmin; height: 10cqmin; margin: -5cqmin; border-radius: 50%; background: #fff; color: #12141C; display: grid; place-items: center; font: 900 5cqmin/1 var(--f-display); box-shadow: 0 1cqmin 3cqmin rgba(0,0,0,.4); }
.t7-ba .lb { position: absolute; top: 9%; font: 800 4.4cqmin/1 var(--f-display); text-transform: uppercase; letter-spacing: .08em; color: #fff; background: rgba(0,0,0,.55); padding: 1.6cqmin 2.8cqmin; border-radius: 99px; }
.t7-ba .lb.l { left: 6%; } .t7-ba .lb.r { right: 6%; background: var(--cap); color: #12141C; }
.t7-quiz .op { display: flex; align-items: center; gap: 2.6cqmin; margin-top: 1.6cqmin; padding: 2.2cqmin 2.6cqmin; border-radius: 2cqmin; background: rgba(255,255,255,.08); font: 700 4.4cqmin/1.2 var(--f-body); transition: background .25s; }
.t7-quiz .op b { flex: none; width: 6.4cqmin; height: 6.4cqmin; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.16); font: 900 3.6cqmin/1 var(--f-display); }
.t7-quiz .op.ok.on { background: rgba(52,227,176,.22); box-shadow: inset 0 0 0 .5cqmin #34E3B0; }
.t7-quiz .op.ok.on b { background: #34E3B0; color: #08241B; }
.t7-score { display: grid; justify-items: center; gap: 2.4cqmin; }
.t7-score .tag { font: 800 3.4cqmin/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; background: #FF4D6D; color: #fff; padding: 1.4cqmin 2.6cqmin; border-radius: 1cqmin; }
.t7-score .row { display: flex; align-items: center; gap: 3cqmin; background: rgba(12,14,22,.84); padding: 3cqmin 5cqmin; border-radius: 3cqmin; border: 1px solid rgba(255,255,255,.1); }
.t7-score .tm { display: flex; align-items: center; gap: 3cqmin; font: 800 4.6cqmin/1 var(--f-display); text-transform: uppercase; color: rgba(255,255,255,.85); }
.t7-score .tm b { font: 900 14cqmin/1 var(--f-display); color: #fff; font-variant-numeric: tabular-nums; }
.t7-score .tm b.win { color: var(--cap); text-shadow: 0 0 4cqmin color-mix(in srgb, var(--cap) 60%, transparent); }
.t7-score .row > i { font: 900 10cqmin/1 var(--f-display); color: rgba(255,255,255,.5); font-style: normal; }
.t7-wx { display: flex; align-items: center; gap: 4cqmin; background: linear-gradient(160deg, rgba(92,200,255,.35), rgba(47,124,246,.25)); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 4cqmin 6cqmin; border-radius: 5cqmin; color: #fff; }
.t7-wx .e { font-size: 18cqmin; line-height: 1; display: inline-block; }
.t7-wx .tx b { display: block; font: 900 16cqmin/1 var(--f-display); }
.t7-wx .tx > span { font: 700 4.2cqmin/1.2 var(--f-body); }
.t7-mac { display: grid; justify-items: center; gap: 3cqmin; }
.t7-mac .rgs { display: flex; gap: 3.4cqmin; }
.t7-mac .m { position: relative; width: 24cqmin; display: grid; justify-items: center; gap: 1cqmin; }
.t7-mac .m svg { width: 24cqmin; height: 24cqmin; }
.t7-mac .m b { position: absolute; top: 8.4cqmin; left: 0; right: 0; text-align: center; font: 900 5cqmin/1 var(--f-display); color: #fff; }
.t7-mac .m small { font: 700 3.2cqmin/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.t7-mac .kc { font: 800 5cqmin/1 var(--f-display); color: #fff; background: rgba(12,14,22,.8); padding: 2cqmin 4cqmin; border-radius: 99px; }
.t7-mac .kc b { color: var(--cap); }

/* ---------- template families ---------- */
.ch { display: inline-block; }
.g-ti { display: grid; justify-items: center; gap: 1.4cqmin; text-align: center; color: #fff; font-family: var(--f-display); font-weight: 900; line-height: 1; text-transform: uppercase; }
.g-ti .t { text-wrap: balance; text-shadow: 0 .8cqmin 0 rgba(0,0,0,.8), 0 0 3cqmin rgba(0,0,0,.45); }
.g-ti .t.s, .g-ti .t.c { color: var(--cap); }
.g-ti .sb { font: 700 4.4cqmin/1.2 var(--f-body); text-transform: none; color: rgba(255,255,255,.9); text-shadow: 0 .4cqmin 1.6cqmin rgba(0,0,0,.8); }
.g-bar { grid-template-columns: auto 1fr; justify-items: start; text-align: left; align-items: stretch; gap: 3cqmin; }
.g-bar .br { width: 1.8cqmin; border-radius: 1cqmin; background: var(--cap); transform-origin: 50% 0; }
.g-under .ul { width: 60%; height: 1.6cqmin; border-radius: 1cqmin; background: var(--cap); transform-origin: 0 50%; }
.g-box { background: var(--cap); padding: 2.4cqmin 4cqmin; border-radius: 1.6cqmin; box-shadow: 0 2cqmin 5cqmin rgba(0,0,0,.4); }
.g-box .t { color: #12141C; text-shadow: none; }
.g-split { grid-auto-flow: row; gap: .4cqmin; }
.g-outl { display: grid; }
.g-outl .t { grid-area: 1 / 1; }
.g-outl .t.o { color: transparent; -webkit-text-stroke: .35cqmin var(--cap); translate: 1.6cqmin 1.6cqmin; text-shadow: none; }
.g-tag .tg { font: 800 3.6cqmin/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #12141C; background: var(--cap); padding: 1.4cqmin 2.6cqmin; border-radius: 99px; }
.g-frame { position: relative; padding: 4cqmin 6cqmin; }
.g-frame i { position: absolute; width: 7cqmin; height: 7cqmin; border: 1.2cqmin solid var(--cap); }
.g-frame .c1 { left: 0; top: 0; border-right: 0; border-bottom: 0; } .g-frame .c2 { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.g-lt { display: flex; align-items: center; gap: 2.6cqmin; color: #fff; max-width: 100%; }
.g-lt .av { flex: none; width: 10cqmin; height: 10cqmin; border-radius: 50%; background: var(--cap); color: #12141C; display: grid; place-items: center; font: 900 5cqmin/1 var(--f-display); box-shadow: 0 1cqmin 3cqmin rgba(0,0,0,.4); }
.g-lt .tx { display: grid; gap: .8cqmin; }
.g-lt .nm { font: 900 6.4cqmin/1 var(--f-display); text-transform: uppercase; white-space: nowrap; }
.g-lt .rl { font: 600 3.6cqmin/1.2 var(--f-body); color: rgba(255,255,255,.85); }
.g-lt-bar .tx { border-left: 1.4cqmin solid var(--cap); padding: 1.6cqmin 3cqmin; background: rgba(10,10,14,.82); }
.g-lt-pill .tx { background: rgba(255,255,255,.95); color: #12141C; padding: 2cqmin 4.4cqmin; border-radius: 99px; } .g-lt-pill .rl { color: #586074; }
.g-lt-split .tx { display: flex; align-items: stretch; gap: 0; } .g-lt-split .nm { background: var(--cap); color: #12141C; padding: 2.2cqmin 3cqmin; } .g-lt-split .rl { background: rgba(10,10,14,.85); padding: 2.2cqmin 3cqmin; display: flex; align-items: center; }
.g-lt-glass .tx { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 2cqmin 3.6cqmin; border-radius: 2.4cqmin; }
.g-lt-line .tx { padding-bottom: 1.6cqmin; border-bottom: 1cqmin solid var(--cap); text-shadow: 0 .5cqmin 2cqmin rgba(0,0,0,.7); }
.g-lt-tab .tx { background: rgba(10,10,14,.85); padding: 2cqmin 3.4cqmin; border-radius: 0 2cqmin 2cqmin 2cqmin; position: relative; } .g-lt-tab .tx::before { content: ""; position: absolute; left: 0; top: -2.2cqmin; width: 14cqmin; height: 2.4cqmin; background: var(--cap); border-radius: 1cqmin 1cqmin 0 0; }
.g-co { display: flex; align-items: center; gap: 2cqmin; }
.g-co-down, .g-co-up { flex-direction: column; } .g-co-up { flex-direction: column-reverse; } .g-co-left { flex-direction: row-reverse; }
.g-co .lb.pill { background: var(--cap); color: #12141C; font: 900 5.6cqmin/1 var(--f-display); text-transform: uppercase; padding: 2.2cqmin 3.8cqmin; border-radius: 99px; white-space: nowrap; box-shadow: 0 1.5cqmin 4cqmin rgba(0,0,0,.4); }
.g-co .lb.hand { font: 700 9cqmin/1 var(--f-hand); color: var(--cap); text-shadow: 0 .6cqmin 0 rgba(0,0,0,.7); white-space: nowrap; }
.g-co svg { width: 26cqmin; height: 11cqmin; overflow: visible; }
.g-co path { fill: none; stroke: var(--cap); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 .6cqmin 0 rgba(0,0,0,.6)); }
.g-co path.bd { stroke-width: 6; }
.g-co-down svg, .g-co-up svg { margin: 7.5cqmin 0; }
.g-re { position: relative; display: grid; place-items: center; width: 40cqmin; height: 40cqmin; }
.g-re .e { font-size: 28cqmin; line-height: 1; filter: drop-shadow(0 2cqmin 3cqmin rgba(0,0,0,.45)); }
.g-re .rg { position: absolute; inset: 0; border-radius: 50%; border: 1.2cqmin solid var(--cap); opacity: 0; }
.g-ref { position: relative; width: 100%; height: 60cqmin; }
.g-ref span { position: absolute; bottom: 0; line-height: 1; filter: drop-shadow(0 1cqmin 1.5cqmin rgba(0,0,0,.4)); }
.g-nc { display: grid; justify-items: center; gap: 2cqmin; color: #fff; }
.g-nc .num { font: 900 20cqmin/1 var(--f-display); color: var(--c); font-variant-numeric: tabular-nums; text-shadow: 0 1cqmin 0 rgba(0,0,0,.75); }
.g-nc .lb { font: 800 5cqmin/1 var(--f-display); text-transform: uppercase; text-shadow: 0 .6cqmin 0 rgba(0,0,0,.75); }
.g-nc-pill { grid-auto-flow: column; align-items: center; gap: 3cqmin; background: rgba(10,10,14,.82); padding: 3cqmin 5cqmin; border-radius: 99px; } .g-nc-pill .num { font-size: 12cqmin; text-shadow: none; }
.g-nc-ring .rg { position: relative; width: 38cqmin; height: 38cqmin; --c: inherit; } .g-nc-ring .ring .fg { stroke: var(--c); filter: drop-shadow(0 0 1.4cqmin var(--c)); } .g-nc-ring .num { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10cqmin; }
.g-nc-bar { width: 100%; } .g-nc-bar .num { font-size: 14cqmin; } .g-nc-bar .tr { width: 100%; height: 4cqmin; border-radius: 99px; background: rgba(255,255,255,.15); overflow: hidden; } .g-nc-bar .tr i { display: block; height: 100%; background: var(--c); transform-origin: left; box-shadow: 0 0 3cqmin var(--c); }
.g-nc-card { grid-template-columns: auto auto; align-items: center; background: rgba(10,10,14,.84); padding: 4cqmin 6cqmin; border-radius: 4cqmin; border: 1px solid rgba(255,255,255,.1); gap: 1cqmin 3cqmin; } .g-nc-card .dl { color: var(--c); font-size: 8cqmin; } .g-nc-card .num { font-size: 15cqmin; text-shadow: none; } .g-nc-card .lb { grid-column: 1 / -1; }
.g-nc-badge { width: 44cqmin; height: 44cqmin; border-radius: 50%; background: var(--c); align-content: center; box-shadow: 0 0 0 2cqmin rgba(255,255,255,.15), 0 3cqmin 7cqmin rgba(0,0,0,.45); } .g-nc-badge .num { color: #12141C; font-size: 14cqmin; text-shadow: none; } .g-nc-badge .lb { color: #12141C; font-size: 3.6cqmin; text-shadow: none; }
.g-wp { position: absolute; left: 50%; top: 50%; width: 220cqmin; height: 220cqmin; margin: -110cqmin 0 0 -110cqmin; }
.g-wp .pn { position: absolute; left: 0; width: 100%; background: var(--c); transform: translateX(-112%); }
.g-wp .pn.zigzag { clip-path: polygon(0 0, 92% 0, 100% 10%, 92% 20%, 100% 30%, 92% 40%, 100% 50%, 92% 60%, 100% 70%, 92% 80%, 100% 90%, 92% 100%, 0 100%, 8% 90%, 0 80%, 8% 70%, 0 60%, 8% 50%, 0 40%, 8% 30%, 0 20%, 8% 10%); }
.g-wp .pn.chevron { clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%, 12% 50%); }
.g-wp .dt { position: absolute; width: 26%; aspect-ratio: 1; border-radius: 50%; background: var(--c); transform: scale(0); }
.g-bd { mix-blend-mode: screen; opacity: .85; }
.g-bd-orbs .ob { position: absolute; width: 60cqmin; height: 60cqmin; border-radius: 50%; filter: blur(12cqmin); opacity: .55; }
.g-bd-sweep { background: linear-gradient(115deg, transparent 20%, var(--a) 40%, var(--b) 60%, transparent 80%) 0 50% / 300% 100%; opacity: .45; }
.g-bd-dots { background: radial-gradient(var(--a) 18%, transparent 22%) 0 0 / 6cqmin 6cqmin; opacity: .35; mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); }
.g-bd-grid { background: linear-gradient(var(--a) 1px, transparent 1px) 0 0 / 100% 12cqmin, linear-gradient(90deg, var(--b) 1px, transparent 1px) 0 0 / 12cqmin 100%; opacity: .35; mask-image: linear-gradient(transparent 40%, #000); -webkit-mask-image: linear-gradient(transparent 40%, #000); }
.g-bd-rays { inset: -40%; background: repeating-conic-gradient(from 0deg at 50% 0%, var(--a) 0 3deg, transparent 3deg 12deg, var(--b) 12deg 14deg, transparent 14deg 24deg); opacity: .25; filter: blur(.6cqmin); }
.g-bd-bokeh .bk { position: absolute; aspect-ratio: 1; border-radius: 50%; filter: blur(.5cqmin); opacity: 0; }
.g-bd-waves svg { position: absolute; inset: 0; width: 100%; height: 100%; } .g-bd-waves path { fill: none; stroke-width: .9; opacity: .7; }
.g-bd-flicker { background: linear-gradient(160deg, var(--a), var(--b)); opacity: 0; }
.g-bg { position: relative; display: grid; place-items: center; transform: rotate(var(--tl)); min-width: 30cqmin; min-height: 22cqmin; padding: 4cqmin 6cqmin; }
.g-bg b { position: relative; font: 900 8.4cqmin/1 var(--f-display); text-transform: uppercase; color: #12141C; white-space: nowrap; }
.g-bg .sh { position: absolute; inset: -18% -10%; width: 120%; height: 136%; fill: var(--cap); filter: drop-shadow(0 1.4cqmin 0 rgba(0,0,0,.35)); }
.g-bg-seal { width: 40cqmin; height: 40cqmin; border-radius: 50%; background: var(--cap); box-shadow: inset 0 0 0 1.6cqmin var(--cap), inset 0 0 0 2.2cqmin #12141C, 0 2cqmin 5cqmin rgba(0,0,0,.4); }
.g-bg-ribbon { background: var(--cap); clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%, 8% 50%); padding-inline: 10cqmin; }
.g-bg-tag { background: var(--cap); clip-path: polygon(14% 0, 100% 0, 100% 100%, 14% 100%, 0 50%); padding-left: 10cqmin; border-radius: 0 2cqmin 2cqmin 0; }
.g-bg-speech { background: #fff; border-radius: 6cqmin; box-shadow: 0 2cqmin 5cqmin rgba(0,0,0,.35); } .g-bg-speech::after { content: ""; position: absolute; left: 18%; bottom: -4cqmin; border: 2.4cqmin solid transparent; border-top: 3cqmin solid #fff; }
.g-bg-thought { background: #fff; border-radius: 50%; padding: 6cqmin 9cqmin; box-shadow: 0 2cqmin 5cqmin rgba(0,0,0,.35); } .g-bg-thought::after { content: ""; position: absolute; left: 20%; bottom: -5cqmin; width: 4cqmin; height: 4cqmin; border-radius: 50%; background: #fff; box-shadow: -3cqmin 3cqmin 0 -1cqmin #fff; }
.g-bg-arrow { background: var(--cap); clip-path: polygon(0 0, 84% 0, 100% 50%, 84% 100%, 0 100%); padding-right: 12cqmin; }
.g-bg-ticket { background: var(--cap); border-radius: 2cqmin; -webkit-mask: radial-gradient(circle at 0 50%, transparent 3cqmin, #000 3.1cqmin) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 3cqmin, #000 3.1cqmin) right / 51% 100% no-repeat; mask: radial-gradient(circle at 0 50%, transparent 3cqmin, #000 3.1cqmin) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 3cqmin, #000 3.1cqmin) right / 51% 100% no-repeat; }
.g-ls .it { display: flex; align-items: center; gap: 3cqmin; padding: 1.6cqmin 0; font: 700 4.8cqmin/1.25 var(--f-body); }
.g-ls .mk { flex: none; display: grid; place-items: center; width: 7cqmin; height: 7cqmin; font: 900 4cqmin/1 var(--f-display); color: #12141C; background: var(--cap); }
.g-ls-circles .mk, .g-ls-dots .mk { border-radius: 50%; } .g-ls-squares .mk { border-radius: 1.4cqmin; }
.g-ls-numerals .mk { background: none; color: var(--cap); font-size: 9cqmin; width: 9cqmin; }
.g-ls-emoji .mk { background: none; font-size: 6cqmin; }
.g-ls-dots .mk { width: 3.6cqmin; height: 3.6cqmin; box-shadow: 0 0 0 1.2cqmin rgba(255,255,255,.12); }
.g-ls-cards .it { background: rgba(255,255,255,.08); border-radius: 2cqmin; padding: 2cqmin 2.6cqmin; margin-top: 1.2cqmin; } .g-ls-cards .mk { border-radius: 1.2cqmin; }
.g-ls-ticks .mk, .g-ls-strike .mk { background: none; border: .5cqmin solid rgba(255,255,255,.55); border-radius: 1.4cqmin; width: 6cqmin; height: 6cqmin; transition: background .2s, border-color .2s; }
.g-ls-ticks .it.on .mk, .g-ls-strike .it.on .mk { background: #34E3B0; border-color: #34E3B0; } .g-ls-ticks .it.on .mk::after, .g-ls-strike .it.on .mk::after { content: "✓"; color: #08241B; }
.g-ls-strike .it.on .tx { text-decoration: line-through 2px var(--cap); color: rgba(255,255,255,.6); }
.g-ls-steps .mk { border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; transition: background .2s; } .g-ls-steps .it.on .mk { background: var(--cap); color: #12141C; }
.g-ls-toggles .mk { width: 10cqmin; height: 5.6cqmin; border-radius: 99px; background: rgba(255,255,255,.2); position: relative; transition: background .25s; } .g-ls-toggles .mk::after { content: ""; position: absolute; left: .6cqmin; top: .6cqmin; width: 4.4cqmin; height: 4.4cqmin; border-radius: 50%; background: #fff; transition: transform .25s; } .g-ls-toggles .it.on .mk { background: #34E3B0; } .g-ls-toggles .it.on .mk::after { transform: translateX(4.4cqmin); }
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.g-fr i { position: absolute; pointer-events: none; }
.g-fr .f1 { inset: 4cqmin; }
.g-fr-corners .f1 { background: linear-gradient(var(--c), var(--c)) top left / 14cqmin 1.2cqmin no-repeat, linear-gradient(var(--c), var(--c)) top left / 1.2cqmin 14cqmin no-repeat, linear-gradient(var(--c), var(--c)) top right / 14cqmin 1.2cqmin no-repeat, linear-gradient(var(--c), var(--c)) top right / 1.2cqmin 14cqmin no-repeat, linear-gradient(var(--c), var(--c)) bottom left / 14cqmin 1.2cqmin no-repeat, linear-gradient(var(--c), var(--c)) bottom left / 1.2cqmin 14cqmin no-repeat, linear-gradient(var(--c), var(--c)) bottom right / 14cqmin 1.2cqmin no-repeat, linear-gradient(var(--c), var(--c)) bottom right / 1.2cqmin 14cqmin no-repeat; }
.g-fr-border .f1 { border: 1.6cqmin solid var(--c); border-radius: 2cqmin; }
.g-fr-glow .f1 { inset: 0; box-shadow: inset 0 0 6cqmin 1.6cqmin var(--c); }
.g-fr-double .f1 { border: .8cqmin solid var(--c); } .g-fr-double .f2 { inset: 6.6cqmin; border: .4cqmin solid var(--c); }
.g-fr-dashed .f1 { border: 1cqmin dashed var(--c); border-radius: 3cqmin; }
.g-fr-film .f1 { inset: 0 auto 0 0; width: 7cqmin; background: #0B0C10 repeating-linear-gradient(180deg, transparent 0 2.6cqmin, var(--c) 2.6cqmin 5.2cqmin, transparent 5.2cqmin 7.6cqmin) 1.8cqmin 0 / 3.4cqmin 100% no-repeat; } .g-fr-film .f2 { inset: 0 0 0 auto; width: 7cqmin; background: #0B0C10 repeating-linear-gradient(180deg, transparent 0 2.6cqmin, var(--c) 2.6cqmin 5.2cqmin, transparent 5.2cqmin 7.6cqmin) 1.8cqmin 0 / 3.4cqmin 100% no-repeat; }
.g-fr-rec .f1 { inset: 6cqmin; background: linear-gradient(var(--c), var(--c)) top left / 9cqmin .7cqmin no-repeat, linear-gradient(var(--c), var(--c)) top left / .7cqmin 9cqmin no-repeat, linear-gradient(var(--c), var(--c)) top right / 9cqmin .7cqmin no-repeat, linear-gradient(var(--c), var(--c)) top right / .7cqmin 9cqmin no-repeat, linear-gradient(var(--c), var(--c)) bottom left / 9cqmin .7cqmin no-repeat, linear-gradient(var(--c), var(--c)) bottom left / .7cqmin 9cqmin no-repeat, linear-gradient(var(--c), var(--c)) bottom right / 9cqmin .7cqmin no-repeat, linear-gradient(var(--c), var(--c)) bottom right / .7cqmin 9cqmin no-repeat; }
.g-fr .rec { position: absolute; left: 10cqmin; top: 10cqmin; font: 700 3.8cqmin/1 var(--f-mono); color: #FF4D6D; } .g-fr .tcd2 { position: absolute; right: 10cqmin; top: 10cqmin; font: 600 3.4cqmin/1 var(--f-mono); color: var(--c); }
.g-fr-polaroid .f1 { inset: 0; border: 4cqmin solid #FAF7F0; border-bottom-width: 22cqmin; }
.g-fr-torn .f1 { inset: 0; background: var(--c); clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 3% 4%, 6% 2.4%, 9% 4%, 12% 2.4%, 15% 4%, 18% 2.4%, 21% 4%, 24% 2.4%, 27% 4%, 30% 2.4%, 33% 4%, 36% 2.4%, 39% 4%, 42% 2.4%, 45% 4%, 48% 2.4%, 51% 4%, 54% 2.4%, 57% 4%, 60% 2.4%, 63% 4%, 66% 2.4%, 69% 4%, 72% 2.4%, 75% 4%, 78% 2.4%, 81% 4%, 84% 2.4%, 87% 4%, 90% 2.4%, 93% 4%, 96% 2.4%, 97% 96%, 3% 96%, 3% 4%); }
.g-fr-gradient .f1 { inset: 0; padding: 1.4cqmin; border-radius: 3cqmin; background: conic-gradient(from var(--ang), var(--c), #fff, var(--c), transparent, var(--c)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.g-nt { display: flex; align-items: center; gap: 3cqmin; width: 100%; padding: 3cqmin 3.6cqmin; border-radius: 4cqmin; font: 500 4cqmin/1.3 var(--f-body); box-shadow: 0 2cqmin 6cqmin rgba(0,0,0,.4); }
.g-nt .ic { flex: none; width: 10cqmin; height: 10cqmin; border-radius: 50%; display: grid; place-items: center; font-size: 5.4cqmin; background: rgba(127,127,127,.18); }
.g-nt .tx b { font-weight: 800; } .g-nt small { display: block; font-size: 3cqmin; opacity: .6; margin-top: .6cqmin; }
.g-nt-light { background: rgba(250,250,252,.96); color: #12141C; }
.g-nt-dark { background: rgba(20,22,30,.94); color: #fff; border: 1px solid rgba(255,255,255,.08); }
.g-nt-glass { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.g-pt i { position: absolute; display: grid; place-items: center; font-style: normal; color: var(--c); line-height: 1; }
.g-pt-dots i { width: 2.4cqmin; height: 2.4cqmin; border-radius: 50%; background: var(--c); }
.g-pt-stars i, .g-pt-hearts i { font-size: 5cqmin; text-shadow: 0 0 2cqmin var(--c); }
.g-pt-strips i { width: 1.6cqmin; height: 4cqmin; background: var(--c); border-radius: .4cqmin; }
.g-pt-sparks i { width: .7cqmin; height: 6cqmin; border-radius: 1cqmin; background: linear-gradient(var(--c), transparent); box-shadow: 0 0 1.4cqmin var(--c); }
.g-pt-bubbles i { width: 4.4cqmin; height: 4.4cqmin; border-radius: 50%; border: .5cqmin solid var(--c); background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.6), transparent 40%); }
.g-cd { position: relative; display: grid; place-items: center; min-width: 40cqmin; min-height: 40cqmin; }
.g-cd .num { font: 900 26cqmin/1 var(--f-display); color: #fff; text-shadow: 0 1.2cqmin 0 rgba(0,0,0,.8), 0 0 5cqmin color-mix(in srgb, var(--cap) 60%, transparent); }
.g-cd-ring .ring { position: absolute; inset: 0; } .g-cd-ring .ring .fg { stroke-dashoffset: 0; } .g-cd-ring .num { font-size: 18cqmin; }
.g-cd-card .num { background: #16181F; color: var(--cap); padding: 3cqmin 6cqmin; border-radius: 3cqmin; box-shadow: inset 0 -1.4cqmin 0 rgba(0,0,0,.4), 0 3cqmin 6cqmin rgba(0,0,0,.45); text-shadow: none; font-size: 22cqmin; }
.g-cd-bar { gap: 3cqmin; width: 70cqmin; } .g-cd-bar .tr { width: 100%; height: 3.6cqmin; border-radius: 99px; background: rgba(255,255,255,.15); overflow: hidden; } .g-cd-bar .tr i { display: block; height: 100%; background: var(--cap); transform-origin: left; }
.g-hl { display: grid; justify-items: center; gap: 1.6cqmin; text-align: center; }
.g-hl .pre { font: 800 6cqmin/1.1 var(--f-display); color: #fff; text-transform: uppercase; }
.g-hl .w { position: relative; display: inline-grid; padding: 0 2cqmin; }
.g-hl .w b { position: relative; font: 900 11cqmin/1.05 var(--f-display); color: #fff; text-transform: uppercase; text-shadow: 0 .6cqmin 0 rgba(0,0,0,.6); }
.g-hl .mk { position: absolute; inset: 8% -2%; background: var(--c); transform-origin: 0 50%; border-radius: .8cqmin; }
.g-hl-marker .mk { inset: 45% -3% 2%; opacity: .9; rotate: -1.5deg; }
.g-hl-box .w b { color: #12141C; text-shadow: none; }
.g-hl-scribble .mk { display: none; } .g-hl-scribble svg { position: absolute; left: -4%; right: -4%; bottom: -2.6cqmin; width: 108%; height: 5cqmin; overflow: visible; }
.g-hl-scribble path { fill: none; stroke: var(--c); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.gtools { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 14px; }
.gtools input { flex: 1 1 320px; min-width: 0; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 15px/1.3 var(--f-body); }
.gmore { display: flex; justify-content: center; margin-top: 24px; }

.vwrap { display: grid; place-items: center; width: 100%; height: 100%; }
.vwrap.full { position: absolute; inset: 0; display: block; }
/* ---------- more categories ---------- */
.h-ch .pie { position: relative; width: 40cqmin; height: 40cqmin; margin: 1cqmin auto 2cqmin; }
.h-ch .pie svg, .h-ch .rad svg { width: 100%; height: 100%; display: block; }
.h-ch .ctr { position: absolute; inset: 0; display: grid; place-items: center; font: 900 8cqmin/1 var(--f-display); }
.h-ch .rad { width: 40cqmin; height: 40cqmin; margin: 1cqmin auto 2cqmin; }
.h-ch .lg { display: flex; flex-wrap: wrap; gap: 1.2cqmin 3cqmin; font: 600 3.3cqmin/1.2 var(--f-body); color: rgba(255,255,255,.9); }
.h-ch .lg i { display: inline-block; width: 2.4cqmin; height: 2.4cqmin; border-radius: .6cqmin; margin-right: 1.2cqmin; vertical-align: -.2cqmin; }
.h-ch .cols { display: flex; align-items: flex-end; gap: 3cqmin; height: 36cqmin; }
.h-ch .cols .c { flex: 1; display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 1.2cqmin; text-align: center; }
.h-ch .cols .bw { position: relative; display: flex; align-items: flex-end; justify-content: center; }
.h-ch .cols i { display: block; width: 100%; background: var(--k); border-radius: 1.2cqmin 1.2cqmin .3cqmin .3cqmin; transform-origin: 50% 100%; }
.h-ch .cols.lolli i { width: 1cqmin; border-radius: 1cqmin; position: relative; }
.h-ch .cols.lolli i::after { content: ""; position: absolute; left: 50%; top: -2.6cqmin; width: 5.2cqmin; height: 5.2cqmin; margin-left: -2.6cqmin; border-radius: 50%; background: var(--k); box-shadow: 0 0 2cqmin var(--k); }
.h-ch .cols span { font: 600 3cqmin/1.1 var(--f-body); color: rgba(255,255,255,.85); }
.h-ch .hb .r { display: grid; grid-template-columns: 18cqmin 1fr 8cqmin; align-items: center; gap: 2cqmin; margin-top: 1.6cqmin; font: 600 3.4cqmin/1 var(--f-body); }
.h-ch .hb b { font: 900 4cqmin/1 var(--f-display); text-align: right; }
.h-ch .hb .tr { height: 4cqmin; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.h-ch .hb i { display: block; height: 100%; border-radius: 99px; transform-origin: left; }
.h-ch .ar { display: block; width: 100%; height: 30cqmin; margin-bottom: 2cqmin; overflow: visible; }
.h-ch .ln { stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; }
.h-ch .sk { display: flex; height: 8cqmin; border-radius: 2cqmin; overflow: hidden; gap: .6cqmin; margin: 2cqmin 0 3cqmin; }
.h-ch .sk i { transform-origin: left; }
.h-cm { display: flex; align-items: stretch; gap: 2.4cqmin; width: 100%; color: #fff; }
.h-cm .cd { flex: 1; background: rgba(12,14,22,.84); border: 1px solid rgba(255,255,255,.1); border-radius: 3cqmin; padding: 3cqmin; }
.h-cm .cd.b { border-color: var(--cap); box-shadow: 0 0 4cqmin color-mix(in srgb, var(--cap) 30%, transparent); }
.h-cm .cd b { display: block; font: 900 5cqmin/1.05 var(--f-display); text-transform: uppercase; margin-bottom: 1.6cqmin; }
.h-cm .cd.b b { color: var(--cap); }
.h-cm ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2cqmin; font: 600 3.4cqmin/1.25 var(--f-body); }
.h-cm li i { font-style: normal; margin-right: 1.4cqmin; opacity: .8; }
.h-cm-pros .a li i { color: #FF4D6D; opacity: 1; } .h-cm-pros .b li i { color: #34E3B0; opacity: 1; }
.h-cm .vsb, .h-cm .arw { align-self: center; flex: none; display: grid; place-items: center; width: 11cqmin; height: 11cqmin; border-radius: 50%; background: var(--cap); color: #12141C; font: 900 4.4cqmin/1 var(--f-display); }
.h-cm .old { filter: grayscale(1); opacity: .75; }
.h-cm-myth { flex-direction: column; }
.h-cm .mf { position: relative; padding: 3cqmin 3.6cqmin; border-radius: 3cqmin; font: 800 5cqmin/1.15 var(--f-display); }
.h-cm .mf .tg { display: inline-block; font: 800 3cqmin/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; padding: 1cqmin 1.8cqmin; border-radius: 99px; margin-right: 2cqmin; vertical-align: .6cqmin; }
.h-cm .m { background: rgba(12,14,22,.84); color: rgba(255,255,255,.7); } .h-cm .m .tg { background: #FF4D6D; color: #fff; }
.h-cm .m .x { position: absolute; left: 4%; right: 4%; top: 52%; height: 1.2cqmin; background: #FF4D6D; transform-origin: left; border-radius: 1cqmin; }
.h-cm .f { background: #fff; color: #12141C; } .h-cm .f .tg { background: #34E3B0; color: #08241B; }
.h-cm-thumbs { flex-direction: column; }
.h-cm .th { display: flex; align-items: center; gap: 3cqmin; padding: 2.6cqmin 3.4cqmin; border-radius: 3cqmin; font: 800 5cqmin/1.1 var(--f-display); }
.h-cm .th span { font-size: 8cqmin; } .h-cm .th.a { background: rgba(255,77,109,.2); } .h-cm .th.b { background: rgba(52,227,176,.22); }
.h-cm-scale { justify-content: center; }
.h-cm .bal { position: relative; width: 80cqmin; height: 34cqmin; }
.h-cm .beam { position: absolute; left: 0; right: 0; top: 4cqmin; height: 1.4cqmin; background: #fff; border-radius: 1cqmin; }
.h-cm .beam span { position: absolute; top: 2.6cqmin; padding: 2cqmin 3cqmin; border-radius: 2cqmin; font: 800 4.2cqmin/1 var(--f-display); white-space: nowrap; }
.h-cm .pa { left: 0; background: rgba(12,14,22,.88); } .h-cm .pb { right: 0; background: var(--cap); color: #12141C; }
.h-cm .post { position: absolute; left: 50%; top: 4cqmin; width: 1.4cqmin; height: 28cqmin; margin-left: -.7cqmin; background: #fff; border-radius: 1cqmin; }
.h-cm table { width: 100%; border-collapse: collapse; background: rgba(12,14,22,.86); border-radius: 3cqmin; overflow: hidden; font: 600 3.6cqmin/1.2 var(--f-body); }
.h-cm th { font: 800 3.8cqmin/1 var(--f-display); text-transform: uppercase; padding: 2.4cqmin; } .h-cm th:last-child { color: var(--cap); }
.h-cm td { padding: 2cqmin 2.4cqmin; border-top: 1px solid rgba(255,255,255,.08); } .h-cm td.no { color: #FF4D6D; text-align: center; } .h-cm td.ok { color: #34E3B0; text-align: center; font-weight: 900; }
.h-cm .sp { display: flex; width: 100%; height: 14cqmin; border-radius: 3cqmin; overflow: hidden; }
.h-cm .sp i { flex: 1; display: grid; place-items: center; font: 900 4.6cqmin/1 var(--f-display); text-transform: uppercase; font-style: normal; }
.h-cm .sa { background: rgba(12,14,22,.86); } .h-cm .sb { background: var(--cap); color: #12141C; }
.h-qt { width: 100%; color: #fff; }
.h-qt .qt { margin: 0; font: 700 5.4cqmin/1.3 var(--f-body); }
.h-qt small.by { display: block; margin-top: 2cqmin; font: 600 3.4cqmin/1.2 var(--f-mono); opacity: .8; }
.h-qt-marks { text-align: center; } .h-qt-marks .mk { display: block; font: 900 22cqmin/.6 var(--f-display); color: var(--cap); } .h-qt-marks .qt { font: 900 6.4cqmin/1.15 var(--f-display); text-transform: uppercase; text-shadow: 0 .6cqmin 0 rgba(0,0,0,.7); }
.h-qt-post { background: #fff; color: #12141C; border-radius: 4cqmin; padding: 4cqmin; box-shadow: 0 3cqmin 7cqmin rgba(0,0,0,.45); }
.h-qt-post .hd { display: flex; align-items: center; gap: 2.4cqmin; margin-bottom: 2cqmin; } .h-qt-post .av { width: 9cqmin; height: 9cqmin; border-radius: 50%; background: linear-gradient(135deg, var(--cap), #FF4D6D); }
.h-qt-post .hd b { display: block; font: 800 4cqmin/1.1 var(--f-body); } .h-qt-post .hd small { font: 500 3.2cqmin/1 var(--f-body); color: #586074; } .h-qt-post .ft { margin-top: 2.4cqmin; font: 600 3.2cqmin/1 var(--f-body); color: #586074; }
.h-qt-review { background: rgba(12,14,22,.86); border: 1px solid rgba(255,255,255,.1); border-radius: 4cqmin; padding: 4cqmin; } .h-qt-review .st { color: var(--cap); font-size: 6cqmin; letter-spacing: .1em; margin-bottom: 1.6cqmin; }
.h-qt-note { position: relative; background: #FFE66D; color: #2B2400; padding: 5cqmin 4.4cqmin 4cqmin; rotate: -3deg; box-shadow: 0 2.4cqmin 5cqmin rgba(0,0,0,.4); } .h-qt-note .qt { font: 700 7cqmin/1.15 var(--f-hand); } .h-qt-note .tape { position: absolute; left: 50%; top: -2.6cqmin; width: 20cqmin; height: 5cqmin; margin-left: -10cqmin; background: rgba(255,255,255,.55); rotate: 2deg; }
.h-qt-bubble { position: relative; background: #fff; color: #12141C; border-radius: 5cqmin; padding: 4cqmin 4.6cqmin; box-shadow: 0 2cqmin 5cqmin rgba(0,0,0,.35); } .h-qt-bubble::after { content: ""; position: absolute; left: 14%; bottom: -4cqmin; border: 2.6cqmin solid transparent; border-top: 3.4cqmin solid #fff; }
.h-qt-serif { text-align: center; } .h-qt-serif .qt { font: italic 700 7cqmin/1.2 "Playfair Display", Georgia, serif; text-shadow: 0 .5cqmin 2cqmin rgba(0,0,0,.7); } .h-qt-serif .rl { display: block; width: 30cqmin; height: .5cqmin; margin: 2.4cqmin auto; background: var(--cap); transform-origin: center; } .h-qt-serif .by { letter-spacing: .2em; text-transform: uppercase; }
.h-ct { display: flex; align-items: center; justify-content: center; gap: 2.6cqmin; padding: 3cqmin 4cqmin; border-radius: 99px; background: rgba(12,14,22,.86); border: 1px solid rgba(255,255,255,.12); color: #fff; font: 800 4.6cqmin/1.15 var(--f-display); box-shadow: 0 2cqmin 5cqmin rgba(0,0,0,.4); text-align: left; }
.h-ct-follow .av { width: 10cqmin; height: 10cqmin; border-radius: 50%; background: linear-gradient(135deg, var(--k), #FF4D6D); flex: none; }
.h-ct .btn { display: grid; padding: 2cqmin 3.6cqmin; border-radius: 99px; background: var(--k); color: #12141C; font: 900 3.8cqmin/1 var(--f-display); } .h-ct .btn span { grid-area: 1 / 1; } .h-ct .btn .t2 { opacity: 0; }
.h-ct-follow.on .btn { background: rgba(255,255,255,.18); color: #fff; } .h-ct-follow.on .t1 { opacity: 0; } .h-ct-follow.on .t2 { opacity: 1; }
.h-ct-likesub { border-radius: 4cqmin; gap: 4cqmin; } .h-ct .ic { display: grid; justify-items: center; gap: 1cqmin; font-size: 8cqmin; line-height: 1; } .h-ct .ic small { font: 800 3cqmin/1 var(--f-display); text-transform: uppercase; }
.h-ct .ic.sub small { background: #FF2D55; color: #fff; padding: 1cqmin 2cqmin; border-radius: 1cqmin; } .h-ct .ic.sub.on small { background: rgba(255,255,255,.2); }
.h-ct .big { font-size: 8cqmin; } .h-ct .ar { color: var(--k); font-size: 9cqmin; }
.h-ct-swipe { flex-direction: column; border-radius: 4cqmin; } .h-ct .chev { display: grid; gap: 0; } .h-ct .chev { display: grid; justify-items: center; } .h-ct .chev i { display: block; width: 6cqmin; height: 6cqmin; border-left: 1.2cqmin solid var(--k); border-top: 1.2cqmin solid var(--k); transform: rotate(45deg); margin-top: -2.4cqmin; }
.h-ct .bm { width: 8cqmin; height: 10cqmin; border: 1cqmin solid var(--k); border-bottom: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 75%, 0 100%); } .h-ct .bm.on { background: var(--k); }
.h-ct .cb { background: #fff; color: #12141C; padding: 2.2cqmin 3.4cqmin; border-radius: 99px; font: 700 4.2cqmin/1 var(--f-body); } .h-ct .cb b { color: #E8364F; } .h-ct .cur { display: inline-block; width: .6cqmin; height: 4.4cqmin; background: #12141C; vertical-align: -.6cqmin; margin-left: .6cqmin; } .h-ct .snd { color: var(--k); font-size: 7cqmin; }
.h-ct .pl { font-size: 9cqmin; color: var(--k); }
.h-ct-part2 { flex-direction: column; border-radius: 4cqmin; } .h-ct .p2 { font: 900 12cqmin/1 var(--f-display); color: var(--k); text-transform: uppercase; }
.h-dd { display: grid; justify-items: center; gap: 1cqmin; }
.h-dd svg { width: 44cqmin; height: 44cqmin; overflow: visible; }
.h-dd path { fill: none; stroke: var(--k); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 .6cqmin 0 rgba(0,0,0,.5)); }
.h-dd span { font: 700 9cqmin/1 var(--f-hand); color: var(--k); text-shadow: 0 .6cqmin 0 rgba(0,0,0,.6); margin-top: -4cqmin; }
.h-tx { font-family: var(--f-display); font-weight: 900; line-height: 1; text-transform: uppercase; color: var(--k); text-align: center; white-space: nowrap; }
.h-tx-extrude { color: var(--k); text-shadow: .3cqmin .3cqmin 0 color-mix(in srgb, var(--k) 70%, #000), .6cqmin .6cqmin 0 color-mix(in srgb, var(--k) 62%, #000), .9cqmin .9cqmin 0 color-mix(in srgb, var(--k) 54%, #000), 1.2cqmin 1.2cqmin 0 color-mix(in srgb, var(--k) 46%, #000), 1.5cqmin 1.5cqmin 0 color-mix(in srgb, var(--k) 38%, #000), 1.8cqmin 1.8cqmin 0 color-mix(in srgb, var(--k) 30%, #000), 2.4cqmin 2.4cqmin 2cqmin rgba(0,0,0,.5); }
.h-tx-long { color: #fff; text-shadow: .4cqmin .4cqmin 0 var(--k), .8cqmin .8cqmin 0 var(--k), 1.2cqmin 1.2cqmin 0 var(--k), 1.6cqmin 1.6cqmin 0 var(--k), 2cqmin 2cqmin 0 var(--k), 2.4cqmin 2.4cqmin 0 var(--k), 2.8cqmin 2.8cqmin 0 var(--k), 3.2cqmin 3.2cqmin 0 var(--k); }
.h-tx-gradient { color: transparent; background: linear-gradient(90deg, var(--k), #fff, var(--k), #fff) 0 50% / 300% 100%; -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 .8cqmin 0 rgba(0,0,0,.6)); }
.h-tx-sticker { color: var(--k); -webkit-text-stroke: 1.6cqmin #fff; paint-order: stroke fill; filter: drop-shadow(0 1.2cqmin 1.6cqmin rgba(0,0,0,.5)); }
.h-tx-rgb { color: #fff; text-shadow: .8cqmin 0 0 #FF2D55, -.8cqmin 0 0 #00E5FF; }
.h-tx-tube { color: transparent; -webkit-text-stroke: .5cqmin var(--k); filter: drop-shadow(0 0 1.2cqmin var(--k)) drop-shadow(0 0 3cqmin var(--k)); }
.h-rt { font: 900 10cqmin/1.05 var(--f-mono); text-transform: uppercase; text-align: center; white-space: nowrap; letter-spacing: .04em; }
.h-rt-pixel { color: #FFD60A; text-shadow: .7cqmin .7cqmin 0 #E8364F, 1.4cqmin 1.4cqmin 0 #12141C; font-size: 9cqmin; }
.h-rt-neon { color: #fff; text-shadow: 0 0 1cqmin #FF00E5, 0 0 2.6cqmin #FF00E5, 0 0 5cqmin #00F0FF; font-family: var(--f-display); font-style: italic; }
.h-rt-chrome { font-family: var(--f-display); font-style: italic; color: transparent; background: linear-gradient(180deg, #EAF2FF 0%, #9AB2D6 45%, #2A3550 50%, #DDE7FF 60%, #FFFFFF 100%) 0 0 / 100% 200%; -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: .25cqmin #1B2240; filter: drop-shadow(0 1cqmin 0 #FF00E5); }
.h-vap .sun { position: absolute; left: 50%; top: 16%; width: 60cqmin; height: 60cqmin; margin-left: -30cqmin; border-radius: 50%; background: linear-gradient(var(--b), var(--a)); -webkit-mask: repeating-linear-gradient(180deg, #000 0 5cqmin, transparent 5cqmin 6.4cqmin); mask: repeating-linear-gradient(180deg, #000 0 5cqmin, transparent 5cqmin 6.4cqmin); opacity: .9; mix-blend-mode: screen; }
.h-vap .grid { position: absolute; left: -50%; right: -50%; bottom: 0; height: 45%; background: linear-gradient(var(--a) 2px, transparent 2px) 0 0 / 100% 12cqmin, linear-gradient(90deg, var(--b) 2px, transparent 2px) 0 0 / 10cqmin 100%; transform: perspective(40cqmin) rotateX(60deg); transform-origin: 50% 100%; opacity: .6; -webkit-mask: linear-gradient(transparent, #000 60%); mask: linear-gradient(transparent, #000 60%); }
.h-hp { display: flex; align-items: center; gap: 1.4cqmin; background: rgba(0,0,0,.75); padding: 2.4cqmin 3.4cqmin; border: .8cqmin solid #fff; font: 900 5cqmin/1 var(--f-mono); color: #fff; }
.h-hp i { width: 7cqmin; height: 6cqmin; background: var(--k); clip-path: polygon(20% 0, 40% 0, 50% 15%, 60% 0, 80% 0, 100% 20%, 100% 45%, 50% 100%, 0 45%, 0 20%); transition: background .2s; }
.h-hp i.lost { background: rgba(255,255,255,.18); }
.h-pl { display: flex; align-items: center; gap: 2.4cqmin; color: #fff; font-family: var(--f-display); }
.h-pl b { display: block; font: 900 7cqmin/1 var(--f-display); text-transform: uppercase; } .h-pl small { display: block; font: 600 3.4cqmin/1.2 var(--f-body); opacity: .85; }
.h-pl-pin { background: rgba(12,14,22,.84); padding: 2.6cqmin 4cqmin 2.6cqmin 3cqmin; border-radius: 99px; border: 1px solid rgba(255,255,255,.14); } .h-pl-pin .pi { font-size: 8cqmin; }
.h-pl-stamp .sr { display: grid; justify-items: center; gap: .8cqmin; width: 40cqmin; height: 40cqmin; align-content: center; border-radius: 50%; border: 1.2cqmin double var(--k); color: var(--k); text-align: center; background: rgba(255,255,255,.06); } .h-pl-stamp .sr b { font-size: 6.6cqmin; } .h-pl-stamp .sr small { font: 800 2.8cqmin/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
.h-pl-postcard { flex-direction: column; gap: 1cqmin; background: #FBF6EC; color: #23212A; padding: 4cqmin 6cqmin; border-radius: 1.6cqmin; border: 1cqmin solid var(--k); box-shadow: 0 2cqmin 5cqmin rgba(0,0,0,.4); } .h-pl-postcard small { font: 700 7cqmin/1 var(--f-hand); opacity: 1; } .h-pl-postcard b { font-size: 11cqmin; color: var(--k); -webkit-text-stroke: .25cqmin #23212A; }
.h-pl-road { flex-direction: column; align-items: flex-start; gap: 1cqmin; background: #0E7A47; padding: 3cqmin 5cqmin; border-radius: 2cqmin; border: .8cqmin solid #fff; box-shadow: 0 0 0 .8cqmin #0E7A47, 0 2cqmin 5cqmin rgba(0,0,0,.4); }
.h-pl-metro .m { display: grid; place-items: center; width: 11cqmin; height: 11cqmin; border-radius: 50%; background: var(--k); color: #12141C; font: 900 6cqmin/1 var(--f-display); } .h-pl-metro { background: rgba(12,14,22,.88); padding: 2.4cqmin 4.4cqmin 2.4cqmin 2.4cqmin; border-radius: 2cqmin; }
.h-pl-coords { flex-direction: column; align-items: flex-start; gap: 1.2cqmin; text-shadow: 0 .6cqmin 2cqmin rgba(0,0,0,.7); } .h-pl-coords small { font: 600 3.4cqmin/1 var(--f-mono); color: var(--k); opacity: 1; } .h-pl-coords .ln { display: block; width: 40cqmin; height: .6cqmin; background: var(--k); transform-origin: left; }
.h-sh { position: relative; width: 50cqmin; height: 50cqmin; display: grid; place-items: center; }
.h-sh > i { position: absolute; }
.h-sh svg { width: 100%; height: 100%; overflow: visible; } .h-sh path { fill: none; stroke: var(--k); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 1.4cqmin var(--k)); }
.h-sh-rings i { inset: 0; border-radius: 50%; border: 1cqmin solid var(--k); opacity: 0; }
.h-sh-squares i { inset: 10%; border: 1cqmin solid var(--k); } .h-sh-squares i + i { inset: 22%; }
.h-sh-lock i { width: 12cqmin; height: 12cqmin; border: 1cqmin solid var(--k); } .h-sh-lock .c1 { left: 0; top: 0; border-right: 0; border-bottom: 0; } .h-sh-lock .c2 { right: 0; top: 0; border-left: 0; border-bottom: 0; } .h-sh-lock .c3 { left: 0; bottom: 0; border-right: 0; border-top: 0; } .h-sh-lock .c4 { right: 0; bottom: 0; border-left: 0; border-top: 0; } .h-sh-lock .dot { width: 4cqmin; height: 4cqmin; border: 0; border-radius: 50%; background: var(--k); box-shadow: 0 0 3cqmin var(--k); }
.h-sh-orbit i { left: 50%; top: 50%; width: 4cqmin; height: 4cqmin; margin: -2cqmin; border-radius: 50%; background: var(--k); transform-origin: 2cqmin 2cqmin; translate: 0 -20cqmin; box-shadow: 0 0 2cqmin var(--k); }
.h-sh-orbit i { transform-origin: 50% calc(50% + 20cqmin); }
.h-sh-nest i { border: .9cqmin solid var(--k); } .h-sh-nest i:nth-child(1) { inset: 0; } .h-sh-nest i:nth-child(2) { inset: 12%; } .h-sh-nest i:nth-child(3) { inset: 24%; } .h-sh-nest i:nth-child(4) { inset: 36%; background: var(--k); }
.h-sh-rays i { left: 50%; top: 0; width: .8cqmin; height: 50%; margin-left: -.4cqmin; background: linear-gradient(transparent 30%, var(--k)); transform-origin: 50% 100%; border-radius: 1cqmin; }
.h-sh > b { position: relative; font: 900 8cqmin/1 var(--f-display); text-transform: uppercase; color: #fff; text-shadow: 0 .6cqmin 0 rgba(0,0,0,.7); }
.h-st { display: grid; justify-items: center; gap: 2cqmin; color: #fff; text-align: center; }
.h-st b { font: 900 7cqmin/1.05 var(--f-display); text-transform: uppercase; text-shadow: 0 .6cqmin 0 rgba(0,0,0,.7); }
.h-st-chip .k { font: 800 3.4cqmin/1 var(--f-mono); letter-spacing: .14em; background: var(--k); color: #12141C; padding: 1.6cqmin 3cqmin; border-radius: 99px; }
.h-st .ds { display: flex; align-items: center; } .h-st .ds i { display: grid; place-items: center; width: 9cqmin; height: 9cqmin; border-radius: 50%; border: .8cqmin solid rgba(255,255,255,.4); font: 900 4cqmin/1 var(--f-display); font-style: normal; } .h-st .ds i.on { background: var(--k); border-color: var(--k); color: #12141C; } .h-st .ds span { width: 8cqmin; height: .8cqmin; background: rgba(255,255,255,.3); }
.h-st-bar { width: 70cqmin; } .h-st .tr { width: 100%; height: 3.6cqmin; border-radius: 99px; background: rgba(255,255,255,.15); overflow: hidden; } .h-st .tr i { display: block; height: 100%; background: var(--k); transform-origin: left; } .h-st small { font: 700 3.4cqmin/1 var(--f-mono); }
.h-st .pth { position: relative; width: 70cqmin; height: 6cqmin; } .h-st .pth::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: .8cqmin; margin-top: -.4cqmin; background: rgba(255,255,255,.25); } .h-st .pth .ln { position: absolute; left: 0; top: 50%; width: var(--w); height: .8cqmin; margin-top: -.4cqmin; background: var(--k); transform-origin: left; } .h-st .cp { position: absolute; top: 50%; width: 5cqmin; height: 5cqmin; margin: -2.5cqmin 0 0 -2.5cqmin; border-radius: 50%; background: #2A2E3A; border: .7cqmin solid rgba(255,255,255,.4); } .h-st .cp.on { background: var(--k); border-color: var(--k); }
.h-st .tb { display: flex; background: rgba(12,14,22,.84); border-radius: 99px; padding: 1cqmin; } .h-st .tb span { padding: 2cqmin 3.4cqmin; border-radius: 99px; font: 800 3.6cqmin/1 var(--f-display); text-transform: uppercase; color: rgba(255,255,255,.6); } .h-st .tb span.on { background: var(--k); color: #12141C; }
.h-st-loader { display: flex; align-items: center; gap: 3cqmin; text-align: left; background: rgba(12,14,22,.84); padding: 3cqmin 5cqmin 3cqmin 3cqmin; border-radius: 99px; } .h-st .spn { width: 9cqmin; height: 9cqmin; border-radius: 50%; border: 1.2cqmin solid rgba(255,255,255,.2); border-top-color: var(--k); }
.h-rv { position: relative; display: grid; justify-items: center; gap: 1.6cqmin; padding: 6cqmin 8cqmin; text-align: center; color: #fff; }
.h-rv .bg { position: absolute; inset: 0; border-radius: 3cqmin; background: rgba(12,14,22,.88); border: 1px solid rgba(255,255,255,.12); }
.h-rv .nm { position: relative; font: 900 11cqmin/1 var(--f-display); text-transform: uppercase; color: var(--k); white-space: nowrap; }
.h-rv small { position: relative; font: 600 3.8cqmin/1.2 var(--f-body); color: rgba(255,255,255,.85); }
.h-rv-box .bg { background: none; border: .8cqmin solid var(--k); }
.h-rv-shine .nm { color: transparent; background: linear-gradient(110deg, var(--k) 40%, #fff 50%, var(--k) 60%) 150% 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; }
.h-rv-stamp .bg { background: var(--k); } .h-rv-stamp .nm, .h-rv-stamp small { color: #12141C; }
.h-rv-curtain .bg { background: var(--k); } .h-rv-curtain .nm { color: #12141C; } .h-rv-curtain small { color: #12141C; }

.sws { display: flex; flex-wrap: wrap; gap: 6px; }
.swt { width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid var(--line); background: var(--sw); box-shadow: inset 0 0 0 2px var(--surface); cursor: pointer; }
.swt[data-col=""] { background: conic-gradient(#FFD60A 0 25%, #34E3B0 0 50%, #FF4D6D 0 75%, #5CC8FF 0); }
.swt[aria-checked="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--surface), 0 0 0 2px var(--accent); }
.sws.sm .swt { width: 18px; height: 18px; border-width: 1.5px; }
/* ---------- batch 9 styles ---------- */
.k-ic { display: grid; justify-items: center; gap: 2cqmin; }
.k-ic .e { font-size: 24cqmin; line-height: 1; filter: drop-shadow(0 2cqmin 3cqmin rgba(0,0,0,.45)); display: inline-block; }
.k-ic b { font: 900 5.6cqmin/1 var(--f-display); text-transform: uppercase; color: #12141C; background: var(--cap); padding: 1.8cqmin 3.4cqmin; border-radius: 99px; }
.k-me { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 3cqmin; width: 100%; background: rgba(12,14,22,.84); border: 1px solid rgba(255,255,255,.1); padding: 3cqmin 3.6cqmin; border-radius: 3cqmin; color: #fff; }
.k-me .e { font-size: 9cqmin; } .k-me b { font: 800 4cqmin/1 var(--f-display); text-transform: uppercase; } .k-me .num { font: 900 6.4cqmin/1 var(--f-display); color: var(--cap); }
.k-me .tr { margin-top: 1.6cqmin; height: 3.6cqmin; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; display: flex; gap: .6cqmin; }
.k-me .tr .f { display: block; height: 100%; background: var(--cap); border-radius: 99px; box-shadow: 0 0 2cqmin var(--cap); }
.k-me-seg .tr { background: none; } .k-me-seg .tr i { flex: 1; background: rgba(255,255,255,.14); border-radius: .6cqmin; transition: background .15s; } .k-me-seg .tr i.on { background: var(--cap); }
.k-ga { display: grid; justify-items: center; gap: 1cqmin; color: #fff; } .k-ga svg { width: 60cqmin; height: 36cqmin; overflow: visible; }
.k-ga .bg, .k-ga .fg { fill: none; stroke-width: 9; stroke-linecap: round; } .k-ga .bg { stroke: rgba(255,255,255,.15); } .k-ga .fg { stroke: var(--cap); stroke-dasharray: 0 100; }
.k-ga .nd { stroke: #fff; stroke-width: 2.4; stroke-linecap: round; transform-origin: 50px 55px; } .k-ga b { font: 900 5.6cqmin/1 var(--f-display); text-transform: uppercase; }
.k-st { display: grid; justify-items: center; gap: 1.4cqmin; color: #fff; } .k-st .e { font-size: 10cqmin; } .k-st .num { font: 900 15cqmin/1 var(--f-display); color: var(--cap); text-shadow: 0 1cqmin 0 rgba(0,0,0,.7); font-variant-numeric: tabular-nums; } .k-st .lb { font: 800 4.4cqmin/1 var(--f-display); text-transform: uppercase; }
.k-st-pill { grid-auto-flow: column; align-items: center; background: rgba(12,14,22,.86); padding: 3cqmin 5cqmin; border-radius: 99px; gap: 2.4cqmin; } .k-st-pill .num { font-size: 9cqmin; text-shadow: none; }
.k-st-card { background: rgba(12,14,22,.86); border: 1px solid rgba(255,255,255,.1); padding: 4cqmin 6cqmin; border-radius: 4cqmin; } .k-st-card .num { text-shadow: none; }
.k-st-neon .num { color: #fff; text-shadow: 0 0 2cqmin var(--cap), 0 0 5cqmin var(--cap); }
.k-ch { display: flex; flex-wrap: wrap; justify-content: center; gap: 2cqmin; } .k-ch span { font: 800 4.8cqmin/1 var(--f-display); padding: 2.2cqmin 3.6cqmin; border-radius: 99px; background: #fff; color: #12141C; box-shadow: 0 1.4cqmin 3cqmin rgba(0,0,0,.35); }
.k-ch-hash span { background: none; color: var(--cap); font-size: 7cqmin; box-shadow: none; text-shadow: 0 .6cqmin 0 rgba(0,0,0,.7); padding: 0; } .k-ch-key span { background: linear-gradient(#F2F3F7, #C9CDD8); border-radius: 1.6cqmin; box-shadow: 0 1.2cqmin 0 #8A90A0, 0 2cqmin 3cqmin rgba(0,0,0,.4); min-width: 12cqmin; text-align: center; font-family: var(--f-mono); }
.k-ch-tag span { border-radius: 1.4cqmin; background: var(--cap); }
.k-cd { display: flex; align-items: center; gap: 3cqmin; width: 100%; padding: 3.4cqmin 3.6cqmin; border-radius: 4cqmin; box-shadow: 0 2cqmin 6cqmin rgba(0,0,0,.4); font-family: var(--f-body); }
.k-cd .ic { flex: none; font-size: 8cqmin; width: 12cqmin; height: 12cqmin; display: grid; place-items: center; border-radius: 3cqmin; background: rgba(127,127,127,.16); }
.k-cd .tx { flex: 1; min-width: 0; } .k-cd b { display: block; font: 800 4.4cqmin/1.15 var(--f-body); } .k-cd small { display: block; font: 500 3.4cqmin/1.25 var(--f-body); opacity: .7; margin-top: .6cqmin; }
.k-cd .ac { flex: none; font: 800 3.6cqmin/1 var(--f-display); padding: 2cqmin 3cqmin; border-radius: 99px; background: var(--cap); color: #12141C; transition: transform .2s; } .k-cd .ac.on { box-shadow: 0 0 0 1cqmin color-mix(in srgb, var(--cap) 35%, transparent); }
.k-cd-light { background: rgba(250,250,252,.97); color: #12141C; } .k-cd-dark { background: rgba(18,20,28,.94); color: #fff; border: 1px solid rgba(255,255,255,.08); } .k-cd-glass { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.k-to { display: inline-flex; align-items: center; gap: 2.4cqmin; padding: 2.6cqmin 4.4cqmin; border-radius: 99px; font: 800 4.4cqmin/1.1 var(--f-body); box-shadow: 0 2cqmin 5cqmin rgba(0,0,0,.4); }
.k-to .ic { font-size: 6cqmin; display: inline-block; } .k-to-dark { background: rgba(18,20,28,.94); color: #fff; } .k-to-light { background: #fff; color: #12141C; } .k-to-glass { background: rgba(255,255,255,.16); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.k-sp { display: grid; justify-items: center; gap: .6cqmin; padding: 3cqmin 5cqmin; border: 1.2cqmin solid var(--cap); color: var(--cap); transform: rotate(var(--rt)); background: rgba(0,0,0,.25); }
.k-sp b { font: 900 8cqmin/1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; } .k-sp small { font: 800 3.4cqmin/1 var(--f-mono); letter-spacing: .12em; }
.k-sp-round { width: 46cqmin; height: 46cqmin; border-radius: 50%; border-style: double; border-width: 1.6cqmin; align-content: center; text-align: center; } .k-sp-round b { font-size: 6.6cqmin; }
.k-sp-tag { border-radius: 2cqmin; background: var(--cap); color: #12141C; border-color: #12141C; } .k-sp-ribbon { background: var(--cap); color: #12141C; border: 0; clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%); padding-inline: 9cqmin; }
.k-tk { display: flex; width: 100%; height: 10cqmin; overflow: hidden; border-radius: 1cqmin; font: 800 4.6cqmin/10cqmin var(--f-display); text-transform: uppercase; box-shadow: 0 1.4cqmin 3cqmin rgba(0,0,0,.4); }
.k-tk b { flex: none; padding: 0 3cqmin; background: var(--cap); color: #12141C; z-index: 1; } .k-tk .mq { flex: 1; background: #fff; color: #12141C; overflow: hidden; white-space: nowrap; } .k-tk .mq span { display: inline-block; padding-left: 3cqmin; }
.k-eq { display: flex; align-items: center; gap: 2.4cqmin; font-size: 15cqmin; line-height: 1; } .k-eq i { font: 900 9cqmin/1 var(--f-display); color: #fff; font-style: normal; } .k-eq .r { filter: drop-shadow(0 0 3cqmin var(--cap)); }
.k-sk { position: relative; width: 70cqmin; height: 34cqmin; } .k-sk .cd { position: absolute; left: 12%; right: 12%; top: 10%; padding: 4cqmin; border-radius: 3cqmin; background: #fff; color: #12141C; font: 800 5cqmin/1.15 var(--f-display); text-align: center; box-shadow: 0 2cqmin 5cqmin rgba(0,0,0,.4); } .k-sk .cd span { display: block; font-size: 7cqmin; } .k-sk .cd:nth-child(2) { background: var(--cap); }
.k-tm { position: relative; display: grid; justify-items: center; gap: 1cqmin; color: #fff; } .k-tm-ring .ring { width: 40cqmin; height: 40cqmin; } .k-tm-ring .ring .fg { stroke-dashoffset: 0; } .k-tm-ring .num { position: absolute; top: 13cqmin; } .k-tm .num { font: 900 9cqmin/1 var(--f-mono); color: var(--cap); } .k-tm small { font: 800 4cqmin/1 var(--f-display); text-transform: uppercase; }
.k-tm-digital { background: #0B0C10; border: 1px solid rgba(255,255,255,.12); border-radius: 3cqmin; padding: 3cqmin 6cqmin; } .k-tm-digital .e { font-size: 8cqmin; } .k-tm-digital .num { font-size: 13cqmin; text-shadow: 0 0 2cqmin var(--cap); }
.k-siren { display: grid; justify-items: center; gap: 1cqmin; position: relative; } .k-siren span { font-size: 20cqmin; } .k-siren i { position: absolute; top: 0; width: 40cqmin; height: 30cqmin; border-radius: 50%; filter: blur(5cqmin); } .k-siren .l { left: -18cqmin; background: #FF2D55; } .k-siren .r { right: -18cqmin; background: #2F7CF6; } .k-siren b { position: relative; font: 900 9cqmin/1 var(--f-display); text-transform: uppercase; color: #fff; text-shadow: 0 .8cqmin 0 rgba(0,0,0,.8); }
.k-pt { display: flex; align-items: center; gap: 2cqmin; } .k-pt .h { font-size: 12cqmin; display: inline-block; } .k-pt b { font: 900 8cqmin/1 var(--f-display); text-transform: uppercase; color: var(--cap); text-shadow: 0 .8cqmin 0 rgba(0,0,0,.8); white-space: nowrap; }
.k-br { display: flex; align-items: center; gap: 2cqmin; } .k-br i { width: 4cqmin; height: 18cqmin; border: 1.2cqmin solid var(--cap); } .k-br .a { border-right: 0; } .k-br .b { border-left: 0; } .k-br b { font: 900 8cqmin/1 var(--f-display); text-transform: uppercase; color: #fff; text-shadow: 0 .8cqmin 0 rgba(0,0,0,.8); white-space: nowrap; }
.k-db { display: flex; align-items: center; gap: 2cqmin; } .k-db span { font: 900 18cqmin/1 var(--f-display); color: var(--cap); display: inline-block; text-shadow: 0 1cqmin 0 rgba(0,0,0,.7); } .k-db b { font: 900 9cqmin/1 var(--f-display); text-transform: uppercase; color: #fff; text-shadow: 0 .8cqmin 0 rgba(0,0,0,.8); }
.k-sn { position: relative; background: #FFE66D; color: #2B2400; padding: 6cqmin 6cqmin 5cqmin; box-shadow: 0 2cqmin 5cqmin rgba(0,0,0,.4); font: 700 8cqmin/1.1 var(--f-hand); } .k-sn .pin { position: absolute; left: 50%; top: -2cqmin; width: 5cqmin; height: 5cqmin; margin-left: -2.5cqmin; border-radius: 50%; background: #E8364F; box-shadow: 0 .8cqmin 1cqmin rgba(0,0,0,.4); }
.k-pg { position: relative; display: grid; justify-items: center; gap: 4cqmin; } .k-pg i { position: absolute; top: 0; width: 10cqmin; height: 10cqmin; border-radius: 50%; border: .8cqmin solid var(--cap); } .k-pg span { width: 10cqmin; height: 10cqmin; border-radius: 50%; background: var(--cap); box-shadow: 0 0 3cqmin var(--cap); } .k-pg b { font: 900 7cqmin/1 var(--f-display); text-transform: uppercase; color: #fff; text-shadow: 0 .8cqmin 0 rgba(0,0,0,.8); }
.k-fb { padding: 4cqmin 7cqmin; border: 1cqmin solid var(--cap); border-radius: 2cqmin; background: rgba(0,0,0,.4); } .k-fb b { font: 900 9cqmin/1 var(--f-display); text-transform: uppercase; color: #fff; }
.k-ct { position: relative; width: 100%; height: 34cqmin; } .k-ct .tp { position: absolute; left: -20%; right: -20%; top: 30%; height: 9cqmin; background: repeating-linear-gradient(45deg, #FFD60A 0 5cqmin, #12141C 5cqmin 10cqmin); overflow: hidden; } .k-ct .tp.b { top: 50%; } .k-ct .tp span { display: block; font: 900 4.6cqmin/9cqmin var(--f-display); color: #12141C; text-transform: uppercase; white-space: nowrap; background: #FFD60A; width: max-content; padding: 0 3cqmin; margin: 0 auto; }
.k-mg { display: flex; align-items: center; gap: 2cqmin; } .k-mg span { font-size: 16cqmin; } .k-mg b { font: 900 12cqmin/1 var(--f-display); text-transform: uppercase; color: var(--cap); text-shadow: 0 1cqmin 0 rgba(0,0,0,.8); }
.k-ey { display: grid; justify-items: center; gap: 3cqmin; } .k-ey .eyes { display: flex; gap: 3cqmin; } .k-ey .eyes i { width: 16cqmin; height: 20cqmin; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 1cqmin 3cqmin rgba(0,0,0,.4); } .k-ey s { width: 7cqmin; height: 7cqmin; border-radius: 50%; background: #12141C; } .k-ey b { font: 900 7cqmin/1 var(--f-display); text-transform: uppercase; color: #fff; text-shadow: 0 .8cqmin 0 rgba(0,0,0,.8); }
.k-sh { position: relative; display: grid; justify-items: center; } .k-sh span { font-size: 22cqmin; } .k-sh i { position: absolute; top: -4cqmin; left: 50%; width: 1.2cqmin; height: 8cqmin; background: var(--cap); border-radius: 1cqmin; transform-origin: 50% 300%; } .k-sh b { font: 900 8cqmin/1 var(--f-display); text-transform: uppercase; color: #fff; text-shadow: 0 .8cqmin 0 rgba(0,0,0,.8); }
.k-cw { position: relative; padding: 3cqmin 6cqmin; } .k-cw b { font: 900 9cqmin/1 var(--f-display); text-transform: uppercase; color: #fff; text-shadow: 0 .8cqmin 0 rgba(0,0,0,.8); white-space: nowrap; } .k-cw svg { position: absolute; inset: -20% -8%; width: 116%; height: 140%; overflow: visible; } .k-cw path { fill: none; stroke: var(--cap); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.k-sw { position: relative; display: grid; place-items: center; width: 70cqmin; height: 50cqmin; } .k-sw .rays { position: absolute; inset: -20%; background: repeating-conic-gradient(var(--cap) 0 8deg, transparent 8deg 20deg); border-radius: 50%; -webkit-mask: radial-gradient(circle, #000 20%, transparent 70%); mask: radial-gradient(circle, #000 20%, transparent 70%); } .k-sw b { position: relative; font: 900 11cqmin/1 var(--f-display); text-transform: uppercase; color: #fff; text-shadow: 0 1cqmin 0 rgba(0,0,0,.8); }
.k-xm { display: grid; justify-items: center; } .k-xm svg { width: 34cqmin; height: 34cqmin; } .k-xm path { fill: none; stroke: #FF2D55; stroke-width: 12; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 1cqmin 0 rgba(0,0,0,.5)); } .k-xm b { font: 900 8cqmin/1 var(--f-display); text-transform: uppercase; color: #fff; text-shadow: 0 .8cqmin 0 rgba(0,0,0,.8); }
.k-ty { display: inline-flex; gap: 1.6cqmin; padding: 4cqmin 5cqmin; border-radius: 6cqmin 6cqmin 6cqmin 1.4cqmin; background: #2C2F3A; } .k-ty i { width: 3cqmin; height: 3cqmin; border-radius: 50%; background: rgba(255,255,255,.7); }
.k-dm { display: flex; align-items: center; gap: 3cqmin; padding: 3cqmin 4cqmin; border-radius: 99px; background: #fff; transition: background .4s; font-size: 7cqmin; } .k-dm .sw { width: 18cqmin; height: 9cqmin; border-radius: 99px; background: #C9CDD8; position: relative; transition: background .4s; } .k-dm .sw b { position: absolute; left: 1cqmin; top: 1cqmin; width: 7cqmin; height: 7cqmin; border-radius: 50%; background: #fff; box-shadow: 0 .6cqmin 1cqmin rgba(0,0,0,.3); transition: transform .4s; } .k-dm.on { background: #12141C; } .k-dm.on .sw { background: var(--cap); } .k-dm.on .sw b { transform: translateX(9cqmin); }
.k-pc { display: grid; justify-items: center; gap: 2.4cqmin; color: #fff; } .k-pc .ppl { display: flex; flex-wrap: wrap; justify-content: center; gap: 1cqmin; max-width: 80cqmin; } .k-pc i { font-style: normal; font-size: 8cqmin; filter: grayscale(1) brightness(.6); } .k-pc i.on { filter: drop-shadow(0 0 2cqmin var(--cap)); } .k-pc b { font: 900 7cqmin/1 var(--f-display); color: var(--cap); text-transform: uppercase; } .k-pc b span { color: #fff; font-size: .6em; }
.k-fn { display: grid; justify-items: center; gap: 1cqmin; width: 80cqmin; } .k-fn div { width: calc(100% - var(--i) * 18%); padding: 2.6cqmin; text-align: center; font: 800 4.2cqmin/1 var(--f-display); color: #12141C; background: var(--cap); clip-path: polygon(0 0, 100% 0, 94% 100%, 6% 100%); } .k-fn div:nth-child(2) { background: #5CC8FF; } .k-fn div:nth-child(3) { background: #34E3B0; }
.k-ab { width: 100%; background: rgba(12,14,22,.86); padding: 3.6cqmin; border-radius: 3cqmin; color: #fff; display: grid; gap: 2cqmin; } .k-ab .r { display: grid; grid-template-columns: 16cqmin 1fr 12cqmin; align-items: center; gap: 2cqmin; font: 700 3.8cqmin/1 var(--f-body); } .k-ab .tr { height: 5cqmin; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; } .k-ab i { display: block; height: 100%; background: rgba(255,255,255,.4); transform-origin: left; border-radius: 99px; } .k-ab .b i { background: var(--cap); } .k-ab b { font: 900 5cqmin/1 var(--f-display); text-align: right; }
.k-sf { display: flex; gap: 1.2cqmin; } .k-sf span { width: 14cqmin; height: 20cqmin; display: grid; place-items: center; background: linear-gradient(#22252E 50%, #1A1C23 50%); color: #F2F3F7; font: 900 14cqmin/1 var(--f-mono); border-radius: 1.6cqmin; box-shadow: inset 0 -.3cqmin 0 rgba(0,0,0,.5), 0 1.4cqmin 3cqmin rgba(0,0,0,.45); position: relative; } .k-sf span::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: .3cqmin; background: rgba(0,0,0,.6); }
.k-vt { display: grid; gap: 2.4cqmin; border-left: .8cqmin solid rgba(255,255,255,.3); padding-left: 4cqmin; } .k-vt div { position: relative; font: 800 4.8cqmin/1.1 var(--f-display); color: #fff; text-shadow: 0 .6cqmin 0 rgba(0,0,0,.7); } .k-vt i { position: absolute; left: -6.6cqmin; top: .4cqmin; width: 4.4cqmin; height: 4.4cqmin; border-radius: 50%; background: var(--cap); box-shadow: 0 0 2cqmin var(--cap); }
.k-mm { position: relative; width: 76cqmin; height: 50cqmin; } .k-mm b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 3cqmin 4cqmin; border-radius: 99px; background: var(--cap); color: #12141C; font: 900 5cqmin/1 var(--f-display); text-transform: uppercase; } .k-mm span { position: absolute; font: 800 4cqmin/1 var(--f-display); color: #fff; background: rgba(12,14,22,.86); padding: 2cqmin 3cqmin; border-radius: 99px; } .k-mm span:nth-of-type(1) { left: 0; top: 0; } .k-mm span:nth-of-type(2) { right: 0; top: 0; } .k-mm span:nth-of-type(3) { left: 0; bottom: 0; } .k-mm span:nth-of-type(4) { right: 0; bottom: 0; }
.k-vn { position: relative; width: 74cqmin; height: 46cqmin; } .k-vn i { position: absolute; top: 0; width: 46cqmin; height: 46cqmin; border-radius: 50%; display: grid; place-items: center; mix-blend-mode: screen; font-style: normal; } .k-vn .l { left: 0; background: rgba(92,200,255,.55); justify-items: start; padding-left: 7cqmin; } .k-vn .r { right: 0; background: rgba(255,77,109,.55); justify-items: end; padding-right: 7cqmin; } .k-vn span { font: 800 4.4cqmin/1 var(--f-display); color: #fff; } .k-vn b { position: absolute; left: 50%; top: 92%; transform: translate(-50%, -50%); font: 900 4.6cqmin/1 var(--f-display); color: #12141C; background: var(--cap); padding: 1.6cqmin 2.4cqmin; border-radius: 99px; text-transform: uppercase; }
.k-py { display: grid; justify-items: center; gap: 1cqmin; width: 76cqmin; } .k-py div { width: calc(40% + var(--i) * 30%); padding: 2.6cqmin; text-align: center; font: 800 4.4cqmin/1 var(--f-display); text-transform: uppercase; color: #12141C; background: var(--cap); clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%); } .k-py div:nth-child(2) { background: #5CC8FF; } .k-py div:nth-child(3) { background: #34E3B0; }
.k-qd { position: relative; width: 60cqmin; height: 50cqmin; background: rgba(12,14,22,.8); border-radius: 3cqmin; } .k-qd .ax { position: absolute; left: 50%; top: 6%; bottom: 6%; width: .5cqmin; background: rgba(255,255,255,.4); } .k-qd .ay { position: absolute; top: 50%; left: 6%; right: 6%; height: .5cqmin; background: rgba(255,255,255,.4); } .k-qd small { position: absolute; font: 700 3cqmin/1 var(--f-mono); color: rgba(255,255,255,.7); } .k-qd .lx { right: 6%; bottom: 4%; } .k-qd .ly { left: 4%; top: 4%; } .k-qd .dot { position: absolute; left: 22%; top: 18%; width: 6cqmin; height: 6cqmin; border-radius: 50%; background: var(--cap); box-shadow: 0 0 3cqmin var(--cap); } .k-qd b { position: absolute; left: 10%; top: 32%; font: 800 3.8cqmin/1 var(--f-display); color: var(--cap); text-transform: uppercase; }
.k-fl { display: flex; align-items: center; gap: 2cqmin; } .k-fl span { padding: 3cqmin 3.6cqmin; border-radius: 2cqmin; background: #fff; color: #12141C; font: 800 4.4cqmin/1 var(--f-display); text-transform: uppercase; } .k-fl span:last-child { background: var(--cap); } .k-fl i { font: 900 6cqmin/1 var(--f-display); color: #fff; font-style: normal; }
.k-cy { position: relative; width: 56cqmin; height: 56cqmin; } .k-cy .rg { position: absolute; inset: 12%; border-radius: 50%; border: 1cqmin dashed rgba(255,255,255,.5); } .k-cy span { position: absolute; padding: 2cqmin 3cqmin; border-radius: 99px; background: var(--cap); color: #12141C; font: 800 4cqmin/1 var(--f-display); text-transform: uppercase; } .k-cy span:nth-of-type(1) { left: 50%; top: 0; transform: translateX(-50%); } .k-cy span:nth-of-type(2) { right: 0; bottom: 12%; } .k-cy span:nth-of-type(3) { left: 0; bottom: 12%; }
.k-dtr { display: grid; justify-items: center; gap: 3cqmin; color: #fff; } .k-dtr b { padding: 3cqmin 4cqmin; border-radius: 2cqmin; background: #fff; color: #12141C; font: 800 4.8cqmin/1 var(--f-display); } .k-dtr div { display: flex; gap: 3cqmin; } .k-dtr span { padding: 2.4cqmin 3cqmin; border-radius: 99px; font: 800 4cqmin/1 var(--f-display); } .k-dtr .y { background: #34E3B0; color: #08241B; } .k-dtr .n { background: #FF4D6D; }
.k-ag .it { padding: 1.8cqmin 0; border-top: 1px solid rgba(255,255,255,.08); font: 700 4.6cqmin/1.2 var(--f-mono); }
.k-dd { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqmin; width: 100%; } .k-dd div { padding: 3.4cqmin; border-radius: 3cqmin; display: grid; gap: 1.4cqmin; color: #fff; font: 700 4.2cqmin/1.2 var(--f-body); } .k-dd b { font: 900 5cqmin/1 var(--f-display); text-transform: uppercase; } .k-dd .d { background: rgba(52,227,176,.24); border: .6cqmin solid #34E3B0; } .k-dd .x { background: rgba(255,77,109,.22); border: .6cqmin solid #FF4D6D; }
.k-3c { display: flex; align-items: flex-end; gap: 2.4cqmin; height: 40cqmin; } .k-3c div { width: 22cqmin; height: 100%; display: grid; align-content: center; justify-items: center; gap: 1.6cqmin; background: rgba(12,14,22,.86); border-top: 1.4cqmin solid var(--cap); border-radius: 2cqmin; transform-origin: 50% 100%; } .k-3c i { font: 900 9cqmin/1 var(--f-display); color: var(--cap); font-style: normal; } .k-3c span { font: 800 4.2cqmin/1 var(--f-display); color: #fff; text-transform: uppercase; }
.k-spc { width: 80cqmin; display: grid; gap: 2cqmin; } .k-spc .bar { position: relative; height: 3cqmin; border-radius: 99px; background: linear-gradient(90deg, rgba(255,255,255,.2), var(--cap)); } .k-spc .dot { position: absolute; top: 50%; width: 7cqmin; height: 7cqmin; margin: -3.5cqmin 0 0 -3.5cqmin; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1cqmin var(--cap), 0 1cqmin 3cqmin rgba(0,0,0,.5); } .k-spc .lb { display: flex; justify-content: space-between; font: 800 4cqmin/1 var(--f-display); color: #fff; text-transform: uppercase; }
.k-fo { display: grid; justify-items: center; gap: 2cqmin; } .k-fo div { display: flex; align-items: center; gap: 2cqmin; } .k-fo span { width: 13cqmin; height: 13cqmin; display: grid; place-items: center; border-radius: 50%; background: var(--cap); color: #12141C; font: 900 7cqmin/1 var(--f-display); } .k-fo i { font: 900 8cqmin/1 var(--f-display); color: #fff; font-style: normal; } .k-fo b { font: 800 5cqmin/1 var(--f-display); color: #fff; text-transform: uppercase; text-shadow: 0 .6cqmin 0 rgba(0,0,0,.7); }
.k-ld { display: flex; align-items: flex-end; gap: 1.6cqmin; height: 44cqmin; } .k-ld div { width: 15cqmin; height: calc(25% + var(--i) * 25%); display: grid; place-items: start center; padding-top: 2cqmin; background: var(--cap); color: #12141C; font: 900 4.6cqmin/1 var(--f-display); border-radius: 1.6cqmin 1.6cqmin 0 0; transform-origin: 50% 100%; }
.k-tb { display: flex; gap: 1cqmin; padding: 1.2cqmin; border-radius: 99px; background: rgba(12,14,22,.86); } .k-tb span { padding: 2.4cqmin 3.6cqmin; border-radius: 99px; font: 800 4cqmin/1 var(--f-display); color: rgba(255,255,255,.6); text-transform: uppercase; } .k-tb span.on { background: var(--cap); color: #12141C; }
.k-qa { width: 100%; display: grid; gap: 2cqmin; } .k-qa div { display: flex; gap: 2.6cqmin; align-items: flex-start; padding: 3.2cqmin; border-radius: 3cqmin; font: 700 4.6cqmin/1.25 var(--f-body); } .k-qa b { flex: none; width: 8cqmin; height: 8cqmin; display: grid; place-items: center; border-radius: 50%; font: 900 4.4cqmin/1 var(--f-display); } .k-qa .q { background: #fff; color: #12141C; } .k-qa .q b { background: #12141C; color: #fff; } .k-qa .a { background: rgba(12,14,22,.88); color: #fff; } .k-qa .a b { background: var(--cap); color: #12141C; }
.k-y { position: relative; display: grid; justify-items: center; gap: 1.4cqmin; text-align: center; color: #fff; padding: 3cqmin 6cqmin; }
.k-y b { font: 900 9cqmin/1.05 var(--f-display); text-transform: uppercase; text-shadow: 0 .8cqmin 0 rgba(0,0,0,.8); } .k-y small { font: 700 4cqmin/1 var(--f-mono); letter-spacing: .14em; color: var(--cap); }
.k-y .dec { position: absolute; left: 10%; right: 10%; bottom: 0; height: 1cqmin; background: var(--cap); transform: scaleX(0); transition: transform .5s cubic-bezier(.7,0,.2,1); } .k-y .dec.on { transform: scaleX(1); }
.k-y-prev b, .k-y-tbc b { font-style: italic; } .k-y-tbc { background: rgba(0,0,0,.7); clip-path: polygon(0 0, 92% 0, 100% 50%, 92% 100%, 0 100%); padding-right: 12cqmin; } .k-y-end b { font-family: "Playfair Display", Georgia, serif; font-style: italic; text-transform: none; font-size: 13cqmin; }
.k-y-mean b { font-family: var(--f-hand); text-transform: none; font-size: 12cqmin; color: var(--cap); } .k-y-skip { background: #FFE66D; color: #2B2400; padding: 5cqmin 7cqmin; rotate: -3deg; } .k-y-skip b { color: #2B2400; text-shadow: none; font-family: var(--f-hand); text-transform: none; font-size: 11cqmin; }
.k-y-day b { font-family: var(--f-mono); } .k-y-day { background: rgba(12,14,22,.86); border-radius: 3cqmin; } .k-y-ep { background: var(--cap); border-radius: 99px; } .k-y-ep b { color: #12141C; text-shadow: none; font-size: 7cqmin; }
.k-y-spoil { background: #FF2D55; border-radius: 2cqmin; rotate: -4deg; } .k-y-spoil b::before { content: "⚠ "; } .k-y-bts { border: .8cqmin dashed var(--cap); } .k-y-story b { font-size: 12cqmin; color: var(--cap); } .k-y-story b::before { content: "📖 "; }
.k-y-pov { background: rgba(0,0,0,.6); border-radius: 2cqmin; } .k-y-pov b { text-transform: none; font-size: 6.4cqmin; } .k-y-ff b::before { content: "⏩ "; } .k-y-rew b::before { content: "⏪ "; } .k-y-pause b::before { content: "⏸ "; }
.k-y-cred b { font-family: "Playfair Display", Georgia, serif; text-transform: none; font-weight: 700; } .k-y-roman b { font-family: "Playfair Display", Georgia, serif; font-size: 22cqmin; color: var(--cap); } .k-y-moral { background: #fff; border-radius: 3cqmin; } .k-y-moral b { color: #12141C; text-shadow: none; font-size: 7cqmin; }
.k-y-twist b { font-style: italic; color: var(--cap); font-size: 12cqmin; } .k-y-origin b { font-family: "Playfair Display", Georgia, serif; text-transform: none; } .k-y-finale b { font-size: 13cqmin; background: linear-gradient(var(--cap), #fff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.k-n { position: relative; display: grid; justify-items: center; gap: 1cqmin; color: #fff; } .k-n .num { font: 900 22cqmin/1 var(--f-display); color: var(--cap); text-shadow: 0 1cqmin 0 rgba(0,0,0,.7); } .k-n small { font: 800 3.6cqmin/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; } .k-n svg { position: absolute; inset: -10%; width: 120%; height: 120%; overflow: visible; } .k-n path { fill: none; stroke: var(--cap); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.k-n-led .num { font-family: var(--f-mono); color: #FF4D6D; text-shadow: 0 0 2cqmin #FF4D6D; background: #0B0C10; padding: 2cqmin 5cqmin; border-radius: 2cqmin; } .k-n-ticket { background: #FBF6EC; color: #23212A; padding: 4cqmin 9cqmin; border-radius: 2cqmin; -webkit-mask: radial-gradient(circle at 0 50%, transparent 3cqmin, #000 3.1cqmin) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 3cqmin, #000 3.1cqmin) right / 51% 100% no-repeat; mask: radial-gradient(circle at 0 50%, transparent 3cqmin, #000 3.1cqmin) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 3cqmin, #000 3.1cqmin) right / 51% 100% no-repeat; } .k-n-ticket .num { color: #E8364F; text-shadow: none; }
.k-n-sticky { background: #FFE66D; padding: 4cqmin 8cqmin; rotate: -4deg; box-shadow: 0 2cqmin 4cqmin rgba(0,0,0,.4); } .k-n-sticky .num { color: #2B2400; text-shadow: none; font-family: var(--f-hand); } .k-n-sticky small { color: #2B2400; } .k-n-jersey { background: var(--cap); padding: 4cqmin 9cqmin 5cqmin; clip-path: polygon(20% 0, 35% 8%, 65% 8%, 80% 0, 100% 15%, 88% 30%, 88% 100%, 12% 100%, 12% 30%, 0 15%); } .k-n-jersey .num { color: #12141C; text-shadow: none; } .k-n-jersey small { color: #12141C; }
.k-n-pricetag { background: var(--cap); padding: 4cqmin 7cqmin 4cqmin 10cqmin; clip-path: polygon(14% 0, 100% 0, 100% 100%, 14% 100%, 0 50%); } .k-n-pricetag .num { color: #12141C; text-shadow: none; font-size: 15cqmin; } .k-n-pricetag .hole { position: absolute; left: 6cqmin; top: 50%; width: 3cqmin; height: 3cqmin; margin-top: -1.5cqmin; border-radius: 50%; background: #12141C; }
.k-n-receipt { background: #FBFBF8; color: #23212A; padding: 4cqmin 6cqmin; font-family: var(--f-mono); } .k-n-receipt .num { font: 800 7cqmin/1 var(--f-mono); color: #23212A; text-shadow: none; } .k-n-receipt .ln { width: 100%; border-top: .5cqmin dashed #9AA2B6; }
.k-n-bulbs .num { font-family: var(--f-mono); color: #FFD60A; text-shadow: 0 0 1.4cqmin #FFD60A; background: #111; padding: 3cqmin 5cqmin; border-radius: 2cqmin; letter-spacing: .1em; } .k-n-outline .num { color: transparent; -webkit-text-stroke: .7cqmin var(--cap); font-size: 34cqmin; text-shadow: none; }
.k-n-stars .st { color: var(--cap); font-size: 6cqmin; letter-spacing: .3em; } .k-n-shield { width: 40cqmin; height: 46cqmin; place-content: center; background: var(--cap); clip-path: polygon(50% 0, 100% 15%, 92% 70%, 50% 100%, 8% 70%, 0 15%); } .k-n-shield .num { color: #12141C; text-shadow: none; font-size: 18cqmin; }
.k-n-bubble { background: #fff; padding: 4cqmin 9cqmin; border-radius: 6cqmin; } .k-n-bubble .num { color: #12141C; text-shadow: none; } .k-n-bubble::after { content: ""; position: absolute; left: 20%; bottom: -4cqmin; border: 2.6cqmin solid transparent; border-top: 3.6cqmin solid #fff; }
.k-n-calendar { background: #fff; border-radius: 3cqmin; overflow: hidden; gap: 0; width: 36cqmin; } .k-n-calendar small { width: 100%; text-align: center; background: #FF4D6D; color: #fff; padding: 1.8cqmin 0; } .k-n-calendar .num { color: #12141C; text-shadow: none; padding: 2cqmin 0; }
.k-n-medal .rb { width: 14cqmin; height: 12cqmin; background: linear-gradient(90deg, #FF4D6D 50%, #2F7CF6 50%); clip-path: polygon(0 0, 100% 0, 75% 100%, 25% 100%); } .k-n-medal .num { width: 30cqmin; height: 30cqmin; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #FFF1C9, var(--cap) 60%); color: #12141C; text-shadow: none; font-size: 14cqmin; margin-top: -2cqmin; }
.k-n-coins .cs { display: grid; gap: 0; } .k-n-coins .cs i { width: 20cqmin; height: 4.4cqmin; border-radius: 50%; background: linear-gradient(#FFE38A, #E0A84F); margin-top: -1.6cqmin; box-shadow: 0 .4cqmin 0 #B07A20; }
.k-n-neonsign .num { color: #fff; text-shadow: 0 0 1.2cqmin var(--cap), 0 0 3cqmin var(--cap), 0 0 6cqmin var(--cap); font-family: var(--f-display); font-style: italic; } .k-n-dice .num { width: 30cqmin; height: 30cqmin; display: grid; place-items: center; background: #fff; color: #12141C; border-radius: 5cqmin; text-shadow: none; box-shadow: inset 0 -2cqmin 0 #C9CDD8, 0 2cqmin 4cqmin rgba(0,0,0,.4); font-size: 16cqmin; }
.k-n-stamped { border: 1cqmin solid var(--cap); padding: 3cqmin 7cqmin; rotate: -8deg; } .k-n-stamped .num, .k-n-stamped small { color: var(--cap); text-shadow: none; } .k-n-split { grid-template-columns: auto auto; align-items: center; gap: 0; background: rgba(12,14,22,.88); border-radius: 3cqmin; overflow: hidden; } .k-n-split .num { background: var(--cap); color: #12141C; text-shadow: none; padding: 3cqmin 5cqmin; font-size: 15cqmin; } .k-n-split small { padding: 0 5cqmin; }
.k-p { display: grid; justify-items: center; gap: 2cqmin; color: #fff; text-align: center; } .k-p > span, .k-p > b { font: 900 6cqmin/1.1 var(--f-display); text-transform: uppercase; text-shadow: 0 .6cqmin 0 rgba(0,0,0,.7); } .k-p .big { font: 900 24cqmin/1 var(--f-display); color: var(--cap); }
.k-p i { font-style: normal; } .k-p-roman .big { font-family: "Playfair Display", Georgia, serif; } .k-p-recipe .ph { width: 54cqmin; height: 26cqmin; display: grid; place-items: center; border-radius: 3cqmin; background: linear-gradient(135deg, var(--cap), #FF4D6D); color: #12141C; font: 900 7cqmin/1 var(--f-display); text-transform: uppercase; }
.k-p .sc, .k-p .ht, .k-p .cb, .k-p .bl, .k-p .lm { display: flex; align-items: flex-end; gap: 1.6cqmin; } .k-p .sc i { width: 10cqmin; height: calc(5cqmin + var(--n, 0) * 1cqmin); background: rgba(255,255,255,.2); display: grid; place-items: center; font: 800 3.6cqmin/1 var(--f-display); } .k-p .sc i:nth-child(1) { height: 8cqmin; } .k-p .sc i:nth-child(2) { height: 13cqmin; } .k-p .sc i:nth-child(3) { height: 18cqmin; } .k-p .sc i:nth-child(4) { height: 23cqmin; } .k-p .sc i.on, .k-p .ht i.on, .k-p .cb i.on, .k-p .bl i.on, .k-p .lm i.on, .k-p .cv i.on, .k-p .ms i.on { background: var(--cap); color: #12141C; }
.k-p .ht i, .k-p .cb i, .k-p .bl i, .k-p .lm i { width: 9cqmin; height: 9cqmin; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.2); font: 800 3.6cqmin/1 var(--f-display); } .k-p .cb i { border-radius: 1.4cqmin; } .k-p .lm i:nth-child(odd) { margin-bottom: 5cqmin; }
.k-p .fp { position: relative; display: flex; gap: 3cqmin; padding-right: 8cqmin; } .k-p .fp i.d { width: 5cqmin; height: 5cqmin; border-radius: 50%; background: rgba(255,255,255,.3); font-size: 0; } .k-p .fp i.d.on { background: var(--cap); } .k-p .flag { position: absolute; right: 0; top: -6cqmin; font-size: 8cqmin; }
.k-p .tk { display: flex; align-items: center; } .k-p .tk i { width: 6cqmin; height: 6cqmin; border-radius: 50%; background: rgba(255,255,255,.3); } .k-p .tk i.on { background: #34E3B0; box-shadow: 0 0 2cqmin #34E3B0; } .k-p .tk u { width: 10cqmin; height: .8cqmin; background: rgba(255,255,255,.3); }
.k-p-wizard { background: #fff; color: #12141C; padding: 4cqmin 6cqmin; border-radius: 3cqmin; } .k-p-wizard b { color: #12141C; text-shadow: none; } .k-p-wizard small { font: 700 3.4cqmin/1 var(--f-mono); color: #586074; } .k-p-wizard em { font: 800 3.6cqmin/1 var(--f-display); font-style: normal; background: var(--cap); padding: 2cqmin 3cqmin; border-radius: 99px; }
.k-p .bd { position: relative; width: 16cqmin; height: 16cqmin; display: grid; place-items: center; border-radius: 50%; background: var(--cap); color: #12141C; font: 900 9cqmin/1 var(--f-display); } .k-p .kc { width: 18cqmin; height: 18cqmin; display: grid; place-items: center; border-radius: 3cqmin; background: linear-gradient(#F2F3F7, #C9CDD8); color: #12141C; box-shadow: 0 1.6cqmin 0 #8A90A0; font: 900 10cqmin/1 var(--f-mono); }
.k-p .cv { display: flex; } .k-p .cv i { padding: 2.4cqmin 4cqmin 2.4cqmin 5cqmin; background: rgba(255,255,255,.2); clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%, 15% 50%); font: 800 4cqmin/1 var(--f-display); margin-left: -1.6cqmin; }
.k-p .vs { display: grid; gap: 1.6cqmin; text-align: left; } .k-p .vs div { display: flex; align-items: center; gap: 2.4cqmin; font: 800 4.6cqmin/1 var(--f-display); color: rgba(255,255,255,.5); text-transform: uppercase; } .k-p .vs i { width: 8cqmin; height: 8cqmin; display: grid; place-items: center; border-radius: 50%; border: .6cqmin solid currentColor; } .k-p .vs .on { color: #fff; } .k-p .vs .on i { background: var(--cap); border-color: var(--cap); color: #12141C; }
.k-p .ms { display: flex; gap: 3cqmin; } .k-p .ms i { font-size: 8cqmin; color: rgba(255,255,255,.3); background: none !important; } .k-p .ms i.on { color: var(--cap) !important; } .k-p-phasetab { background: rgba(12,14,22,.88); border-top: 1.4cqmin solid var(--cap); padding: 4cqmin 6cqmin; border-radius: 2cqmin; } .k-p-phasetab small { font: 800 3.6cqmin/1 var(--f-mono); letter-spacing: .14em; color: var(--cap); text-transform: uppercase; }
.k-p .rs { position: relative; width: 32cqmin; height: 32cqmin; } .k-p .rs b { position: absolute; inset: 0; display: grid; place-items: center; font: 900 8cqmin/1 var(--f-display); } .k-p .cf { width: 24cqmin; height: 30cqmin; display: grid; place-items: center; border-radius: 3cqmin; background: var(--cap); color: #12141C; font: 900 16cqmin/1 var(--f-display); }
.k-l { position: relative; display: grid; justify-items: center; gap: 1cqmin; color: #fff; text-align: center; padding: 4cqmin 6cqmin; border-radius: 3cqmin; background: rgba(12,14,22,.86); border: 1px solid rgba(255,255,255,.12); }
.k-l b { font: 900 7.4cqmin/1.05 var(--f-display); text-transform: uppercase; } .k-l small { font: 700 3.4cqmin/1.2 var(--f-mono); letter-spacing: .08em; color: var(--cap); }
.k-l-skyline .sk { width: 60cqmin; height: 18cqmin; background: var(--cap); clip-path: polygon(0 100%, 0 60%, 8% 60%, 8% 30%, 16% 30%, 16% 50%, 24% 50%, 24% 10%, 30% 10%, 30% 45%, 40% 45%, 40% 25%, 48% 25%, 48% 0, 54% 0, 54% 40%, 64% 40%, 64% 20%, 74% 20%, 74% 55%, 84% 55%, 84% 35%, 92% 35%, 92% 65%, 100% 65%, 100% 100%); }
.k-l-compass .rose { font-size: 18cqmin; color: var(--cap); display: inline-block; } .k-l-departures { background: #111; font-family: var(--f-mono); } .k-l-departures .row { display: flex; gap: 5cqmin; font: 800 5cqmin/1 var(--f-mono); color: #FFD60A; } .k-l-trainticket { background: #F3EEE2; color: #23212A; border-left: 2cqmin solid var(--cap); } .k-l-trainticket b { font-size: 5cqmin; }
.k-l-hotelkey { background: linear-gradient(135deg, #2A2F45, #12141C); width: 60cqmin; align-items: start; justify-items: start; text-align: left; } .k-l-hotelkey .chip { width: 9cqmin; height: 7cqmin; border-radius: 1.2cqmin; background: linear-gradient(135deg, #F2C879, #B88A3E); }
.k-l-foldmap .fm { display: flex; width: 54cqmin; height: 26cqmin; } .k-l-foldmap .fm i { flex: 1; background: linear-gradient(135deg, #8FD19E, #5CC8FF); } .k-l-foldmap .fm i:nth-child(2) { filter: brightness(.8); } .k-l-eusign { background: #1E4FA8; border: .8cqmin solid #fff; border-radius: 2cqmin; } .k-l-eusign small { color: #fff; }
.k-l-skisign { background: #111; border: .8cqmin solid #fff; } .k-l-timezones .tz { display: flex; gap: 6cqmin; } .k-l-timezones span { display: grid; font: 700 3.6cqmin/1.2 var(--f-mono); } .k-l-timezones span b { font-size: 9cqmin; color: var(--cap); }
.k-l-distance .num { font: 900 14cqmin/1 var(--f-display); color: var(--cap); } .k-l-youarehere .dot { width: 6cqmin; height: 6cqmin; border-radius: 50%; background: #2F7CF6; box-shadow: 0 0 0 2cqmin rgba(47,124,246,.35); }
.k-l-checkin .pin { width: 10cqmin; height: 10cqmin; border-radius: 50% 50% 50% 0; rotate: -45deg; background: var(--cap); } .k-l-landmark .lm { font-size: 14cqmin; } .k-l-welcome { background: #F2EEDD; color: #C2185B; border-radius: 50% / 30%; border: 1cqmin solid #E8364F; } .k-l-welcome b { color: #E8364F; font-family: var(--f-hand); text-transform: none; font-size: 11cqmin; } .k-l-welcome small { color: #23212A; }
.k-l-visa { background: #E9F1E3; color: #23212A; text-align: left; justify-items: start; } .k-l-visa small { color: #4A6B3D; } .k-l-visa .mrz { font: 600 2.8cqmin/1 var(--f-mono); font-style: normal; color: #23212A; }
.k-l-metroline .ml { display: flex; align-items: center; } .k-l-metroline .ml i { width: 5cqmin; height: 5cqmin; border-radius: 50%; background: #fff; border: 1cqmin solid var(--cap); } .k-l-metroline .ml i + i { margin-left: 10cqmin; position: relative; } .k-l-metroline .ml i.on { background: var(--cap); }
.k-l-gps { background: #1E8E3E; } .k-l-gps small { color: #fff; } .k-l-luggage { background: #F2C879; color: #23212A; border-radius: 3cqmin 3cqmin 3cqmin 10cqmin; } .k-l-luggage .hole { width: 4cqmin; height: 4cqmin; border-radius: 50%; background: #12141C; } .k-l-luggage small { color: #23212A; }
.k-l-polaroidmap { background: #FAF7F0; color: #23212A; padding-bottom: 6cqmin; rotate: -4deg; } .k-l-polaroidmap .pm { width: 46cqmin; height: 34cqmin; background: linear-gradient(160deg, #5CC8FF, #8FD19E 60%, #F2C879); } .k-l-polaroidmap b { font-family: var(--f-hand); text-transform: none; }
.k-c { position: relative; display: grid; justify-items: center; gap: 2cqmin; color: #fff; } .k-c .num { font: 900 22cqmin/1 var(--f-display); text-shadow: 0 1cqmin 0 rgba(0,0,0,.7); color: #fff; } .k-c .e { font-size: 16cqmin; display: inline-block; } .k-c small { font: 800 4cqmin/1 var(--f-display); text-transform: uppercase; }
.k-c .lt { display: flex; gap: 2cqmin; background: #111; padding: 2.4cqmin; border-radius: 3cqmin; } .k-c .lt i { width: 10cqmin; height: 10cqmin; border-radius: 50%; background: #333; transition: background .15s; } .k-c-traffic .lt { flex-direction: column; } .k-c-traffic .lt i.on:nth-child(1) { background: #FF2D55; } .k-c-traffic .lt i.on:nth-child(2) { background: #FFD60A; } .k-c-traffic .lt i.on:nth-child(3) { background: #34E3B0; } .k-c-racelights .lt i.on { background: #FF2D55; box-shadow: 0 0 3cqmin #FF2D55; }
.k-c .sg, .k-c .dt { display: flex; gap: 1.6cqmin; } .k-c .sg i { width: 8cqmin; height: 3cqmin; background: var(--cap); border-radius: 1cqmin; transition: opacity .2s; } .k-c .sg i.on, .k-c .dt i.on { opacity: .15; } .k-c .dt i { width: 5cqmin; height: 5cqmin; border-radius: 50%; background: var(--cap); }
.k-c .br { width: 60cqmin; height: 3cqmin; border-radius: 99px; background: rgba(255,255,255,.15); overflow: hidden; } .k-c .br i { display: block; height: 100%; background: var(--cap); transform-origin: left; } .k-c-fuse .br i { background: linear-gradient(90deg, #8A6A3A, #FF9F1C); }
.k-c-splitflap .num { background: linear-gradient(#22252E 50%, #1A1C23 50%); padding: 2cqmin 6cqmin; border-radius: 2cqmin; font-family: var(--f-mono); } .k-c-leader .num { width: 36cqmin; height: 36cqmin; display: grid; place-items: center; border-radius: 50%; border: 1cqmin solid #fff; background: repeating-conic-gradient(rgba(255,255,255,.12) 0 10deg, transparent 10deg 20deg); }
.k-c-analog .num { width: 36cqmin; height: 36cqmin; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #12141C; text-shadow: none; box-shadow: inset 0 0 0 1.6cqmin var(--cap); } .k-c-flipcal .num { background: #fff; color: #12141C; text-shadow: none; padding: 2cqmin 8cqmin; border-radius: 2cqmin; border-top: 4cqmin solid #FF4D6D; }
.k-c-daysleft .num { color: var(--cap); } .k-c-segments .num, .k-c-dots .num { color: var(--cap); }
.k-h { display: grid; justify-items: center; gap: 1.6cqmin; text-align: center; } .k-h .pre { font: 800 6cqmin/1.1 var(--f-display); color: #fff; text-transform: uppercase; }
.k-h .w { position: relative; display: inline-flex; align-items: center; gap: 1.4cqmin; padding: 0 2cqmin; } .k-h .w b { position: relative; z-index: 1; font: 900 11cqmin/1.05 var(--f-display); color: #fff; text-transform: uppercase; text-shadow: 0 .6cqmin 0 rgba(0,0,0,.6); transition: color .4s, background .4s, text-shadow .4s, transform .4s; }
.k-h svg { position: absolute; left: -4%; width: 108%; bottom: -3cqmin; height: 5cqmin; overflow: visible; } .k-h-circle svg, .k-h-boxdraw svg, .k-h-cross svg { inset: -18% -6%; width: 112%; height: 136%; } .k-h path { fill: none; stroke: var(--cap); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.k-h-dotted path { stroke-dasharray: .02 .03; stroke-dashoffset: 0; } .k-h-cross path { stroke: #FF2D55; } .k-h-cross .w b { opacity: .7; }
.k-h .bk { font: 900 12cqmin/1 var(--f-display); color: var(--cap); font-style: normal; } .k-h .em, .k-h .ar { font-style: normal; font-size: 10cqmin; } .k-h .ar { color: var(--cap); position: absolute; top: -10cqmin; left: 40%; } .k-h .sp { position: absolute; font-style: normal; color: var(--cap); font-size: 7cqmin; } .k-h .sp.a { left: -6cqmin; top: -4cqmin; } .k-h .sp.b { right: -6cqmin; bottom: -2cqmin; }
.k-h-glow.on .w b { text-shadow: 0 0 2cqmin var(--cap), 0 0 6cqmin var(--cap); } .k-h-swap.on .w b { color: var(--cap); } .k-h-spot.on .w { background: radial-gradient(closest-side, rgba(255,255,255,.35), transparent); } .k-h-lens.on .w b { transform: scale(1.25); } .k-h-lift.on .w b { transform: translateY(-8%); text-shadow: 0 2.4cqmin 1.6cqmin rgba(0,0,0,.6); }
.k-h-tiltlabel.on .w { background: var(--cap); rotate: -4deg; } .k-h-tiltlabel.on .w b { color: #12141C; text-shadow: none; } .k-h-pill.on .w { background: var(--cap); border-radius: 99px; } .k-h-pill.on .w b { color: #12141C; text-shadow: none; } .k-h-blob.on .w { background: var(--cap); border-radius: 40% 60% 55% 45% / 60% 40% 60% 40%; } .k-h-blob.on .w b { color: #12141C; text-shadow: none; }
.k-h-diagonal.on .w { background: linear-gradient(100deg, transparent 2%, var(--cap) 2% 98%, transparent 98%); padding: 0 4cqmin; } .k-h-diagonal.on .w b { color: #12141C; text-shadow: none; } .k-h-gradientword.on .w b { background: linear-gradient(90deg, var(--cap), #FF4D6D, #5CC8FF); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; } .k-h-neonline.on .w { box-shadow: 0 1.6cqmin 0 -.6cqmin var(--cap), 0 2cqmin 3cqmin -1cqmin var(--cap); }
.k-k { font-family: var(--f-display); font-weight: 900; line-height: 1; text-transform: uppercase; color: #fff; text-shadow: 0 .8cqmin 0 rgba(0,0,0,.8); white-space: nowrap; }
.k-t { display: grid; justify-items: center; gap: 1.6cqmin; text-align: center; color: #fff; max-width: 100%; } .k-t span, .k-t b { text-wrap: balance; }
.k-t-subtitle span { background: rgba(0,0,0,.75); padding: 1.6cqmin 3cqmin; font: 600 5cqmin/1.25 var(--f-body); } .k-t-chyron { display: flex; width: 100%; } .k-t-chyron b { background: #E8364F; padding: 2cqmin 3cqmin; font: 900 4cqmin/1 var(--f-display); } .k-t-chyron span { flex: 1; background: #fff; color: #12141C; padding: 2cqmin 3cqmin; font: 800 4cqmin/1 var(--f-display); text-align: left; }
.k-t-kicker small { font: 800 3.6cqmin/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cap); } .k-t-kicker b { font: 900 8cqmin/1.05 var(--f-display); text-transform: uppercase; text-shadow: 0 .6cqmin 0 rgba(0,0,0,.7); }
.k-t-handnote span { font: 700 10cqmin/1.1 var(--f-hand); color: var(--cap); text-shadow: 0 .6cqmin 0 rgba(0,0,0,.6); rotate: -3deg; } .k-t-bracket span { font: 800 7cqmin/1.1 var(--f-mono); } .k-t-sandwich span { font: 900 7cqmin/1.1 var(--f-display); text-transform: uppercase; text-shadow: 0 .6cqmin 0 rgba(0,0,0,.7); }
.k-t-question { grid-auto-flow: column; align-items: center; gap: 3cqmin; } .k-t-question b { font: 900 20cqmin/1 var(--f-display); color: var(--cap); } .k-t-question span { font: 800 6cqmin/1.1 var(--f-display); text-align: left; text-transform: uppercase; }
.k-t-whisper span { font: italic 500 5.4cqmin/1.2 var(--f-body); color: rgba(255,255,255,.85); text-shadow: 0 .4cqmin 1.4cqmin rgba(0,0,0,.8); } .k-t-shout span { font: 900 12cqmin/.95 var(--f-display); font-stretch: 125%; color: var(--cap); text-shadow: 0 1cqmin 0 rgba(0,0,0,.8); }
.k-t-definition { background: #FBF6EC; color: #23212A; padding: 4cqmin 6cqmin; border-radius: 2cqmin; justify-items: start; text-align: left; } .k-t-definition b { font: italic 900 9cqmin/1 "Playfair Display", Georgia, serif; } .k-t-definition small { font: 500 3.8cqmin/1.3 var(--f-body); }
.k-t-timestamp small, .k-t-dateline small { font: 800 3.6cqmin/1 var(--f-mono); letter-spacing: .12em; color: var(--cap); } .k-t-timestamp span, .k-t-dateline span { font: 800 6.4cqmin/1.1 var(--f-display); text-shadow: 0 .6cqmin 0 rgba(0,0,0,.7); }
.k-t-label span { background: #fff; color: #12141C; padding: 2cqmin 3.6cqmin; border-radius: 1.4cqmin; font: 800 5cqmin/1.1 var(--f-display); text-transform: uppercase; } .k-t-marquee span { background: var(--cap); color: #12141C; padding: 2.4cqmin 5cqmin; font: 900 6cqmin/1 var(--f-display); text-transform: uppercase; clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%); }
.k-t-typewriter { grid-auto-flow: column; align-items: center; gap: .6cqmin; } .k-t-typewriter span { font: 700 6cqmin/1.2 var(--f-mono); } .k-t-typewriter .cur { width: 1cqmin; height: 6cqmin; background: var(--cap); }
.k-t-tweet { background: #fff; color: #12141C; padding: 4cqmin; border-radius: 3cqmin; justify-items: start; text-align: left; } .k-t-tweet span { font: 700 5.4cqmin/1.25 var(--f-body); } .k-t-tweet small { font: 500 3.2cqmin/1 var(--f-body); color: #586074; }
.k-t-caps span { font: 800 5.4cqmin/1.2 var(--f-display); letter-spacing: .3em; text-shadow: 0 .6cqmin 2cqmin rgba(0,0,0,.7); } .k-t-stack2 .l { font: 500 6cqmin/1 var(--f-body); } .k-t-stack2 b { font: 900 12cqmin/1 var(--f-display); text-transform: uppercase; color: var(--cap); }
.k-t-serif span { font: italic 700 8cqmin/1.15 "Playfair Display", Georgia, serif; text-shadow: 0 .6cqmin 2cqmin rgba(0,0,0,.7); } .k-t-mono span { font: 600 5.4cqmin/1.2 var(--f-mono); color: #34E3B0; background: rgba(0,0,0,.7); padding: 2cqmin 3cqmin; border-radius: 1.4cqmin; }
.k-x { font-family: var(--f-display); font-weight: 900; line-height: 1; text-transform: uppercase; text-align: center; white-space: nowrap; color: #fff; }
.k-x-liquid { color: transparent; background: linear-gradient(transparent 50%, var(--cap) 50%) 0 100% / 100% 200%; -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: .35cqmin #fff; }
.k-x-fire { color: transparent; background: linear-gradient(0deg, #FF2D00, #FF9F1C 40%, #FFE66D 70%, #fff) 0 0 / 100% 200%; -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 2cqmin #FF6B00); }
.k-x-ice { color: #E6F7FF; text-shadow: 0 0 1cqmin #9EE3FF, 0 .6cqmin 0 #5CC8FF, 0 1.2cqmin 2cqmin rgba(92,200,255,.6); -webkit-text-stroke: .2cqmin #fff; }
.k-x-foil { color: transparent; background: linear-gradient(110deg, #B88A3E, #FFF1C9 30%, #E0A84F 50%, #FFF1C9 70%, #B88A3E) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 .8cqmin 0 rgba(0,0,0,.6)); }
.k-x-holo { color: transparent; background: linear-gradient(120deg, #FF9ECD, #A0E7FF, #C5FFB0, #FFE59E, #D4A5FF, #FF9ECD) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 1.4cqmin rgba(255,255,255,.5)); }
.k-x-emboss { color: #3A3D48; text-shadow: -.4cqmin -.4cqmin 0 rgba(255,255,255,.35), .4cqmin .4cqmin .6cqmin rgba(0,0,0,.8); }
.k-x-balloon { color: var(--cap); -webkit-text-stroke: .3cqmin rgba(255,255,255,.6); text-shadow: 0 1.4cqmin 0 color-mix(in srgb, var(--cap) 55%, #000), 0 2cqmin 3cqmin rgba(0,0,0,.4); font-stretch: 125%; }
.k-x-papercut { color: #fff; text-shadow: .7cqmin .7cqmin 0 var(--cap), 1.4cqmin 1.4cqmin 0 #FF4D6D, 2.1cqmin 2.1cqmin 0 #5CC8FF; }
.k-x-mirror { color: #fff; -webkit-box-reflect: below .4cqmin linear-gradient(transparent 40%, rgba(255,255,255,.35)); }
.k-x-textring { position: relative; width: 52cqmin; height: 52cqmin; display: grid; place-items: center; } .k-x-textring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .k-x-textring text { font: 900 7.4px/1 var(--f-display); fill: var(--cap); letter-spacing: 2px; text-transform: uppercase; } .k-x-textring b { font-size: 14cqmin; color: var(--cap); }
.k-x-spotlight { color: transparent; background: radial-gradient(circle 12cqmin at center, #fff, rgba(255,255,255,.12) 70%) -60% 50% / 60% 200% no-repeat, rgba(255,255,255,.12); -webkit-background-clip: text; background-clip: text; }
.k-x-smoke { color: #fff; text-shadow: 0 0 3cqmin rgba(255,255,255,.6); }
.k-x-glitter { color: transparent; background: radial-gradient(circle, #fff 18%, transparent 22%) 0 0 / 1.4cqmin 1.4cqmin, linear-gradient(var(--cap), var(--cap)); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 1.2cqmin var(--cap)); }
.k-x-plasma { color: transparent; background: linear-gradient(90deg, #FF00E5, #00F0FF, #FFE600, #FF00E5) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; }
.k-x-stencil { color: var(--cap); letter-spacing: .06em; filter: drop-shadow(0 0 .6cqmin var(--cap)) blur(.15cqmin); -webkit-mask: repeating-linear-gradient(90deg, #000 0 3cqmin, transparent 3cqmin 3.6cqmin); mask: repeating-linear-gradient(90deg, #000 0 3cqmin, transparent 3cqmin 3.6cqmin); }
.k-x-embroider { color: var(--cap); -webkit-text-stroke: .3cqmin #fff; text-shadow: 0 .6cqmin 0 rgba(0,0,0,.5); letter-spacing: .04em; font-family: var(--f-mono); }
.k-x-glassword { padding: 3cqmin 6cqmin; border-radius: 4cqmin; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; }
.k-x-electric { color: transparent; -webkit-text-stroke: .45cqmin #7DF9FF; }
.k-x-candy { color: transparent; background: repeating-linear-gradient(45deg, #FF4D6D 0 3cqmin, #fff 3cqmin 6cqmin) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: .25cqmin #fff; filter: drop-shadow(0 .8cqmin 0 rgba(0,0,0,.5)); }
.k-x-lava { color: transparent; background: radial-gradient(circle at 30% 40%, #FF9F1C, transparent 40%), radial-gradient(circle at 70% 60%, #FF2D55, transparent 45%), linear-gradient(#5A0E2A, #B8233A) 0 0 / 200% 200%; -webkit-background-clip: text; background-clip: text; }
.k-e { font-family: var(--f-display); font-weight: 900; line-height: 1; text-transform: uppercase; text-align: center; white-space: nowrap; color: var(--cap); }
.k-e-letterpress { color: rgba(255,255,255,.12); text-shadow: 0 .3cqmin .2cqmin rgba(255,255,255,.25), 0 -.3cqmin .2cqmin rgba(0,0,0,.8); } .k-e-double { color: transparent; -webkit-text-stroke: .4cqmin var(--cap); text-shadow: 0 0 0 transparent, 1.4cqmin 1.4cqmin 0 rgba(255,255,255,.0); filter: drop-shadow(1.2cqmin 1.2cqmin 0 #fff); }
.k-e-dotted { color: transparent; -webkit-text-stroke: .5cqmin var(--cap); filter: url(#none); stroke-dasharray: 2 2; } .k-e-comic { color: #FFE600; -webkit-text-stroke: .9cqmin #12141C; paint-order: stroke fill; text-shadow: 1.2cqmin 1.2cqmin 0 #12141C; font-style: italic; }
.k-e-glossy { color: var(--cap); background: linear-gradient(rgba(255,255,255,.75) 0 40%, transparent 40%), linear-gradient(var(--cap), var(--cap)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 1cqmin 0 color-mix(in srgb, var(--cap) 50%, #000)); }
.k-e-slices { color: #fff; clip-path: polygon(0 0, 100% 0, 100% 30%, 0 30%, 0 34%, 100% 34%, 100% 66%, 0 66%, 0 70%, 100% 70%, 100% 100%, 0 100%); text-shadow: 1cqmin 0 0 var(--cap); } .k-e-wavefill { color: transparent; background: linear-gradient(transparent 45%, var(--cap) 45%) 0 100% / 100% 220%; -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: .3cqmin var(--cap); }
.k-e-hardshadow { color: #fff; text-shadow: 1.6cqmin 1.6cqmin 0 var(--cap); } .k-e-blurglow { color: #fff; text-shadow: 0 0 2cqmin var(--cap), 0 0 5cqmin var(--cap), 0 0 9cqmin var(--cap); } .k-e-inline { color: var(--cap); background: linear-gradient(transparent 46%, #12141C 46% 54%, transparent 54%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; background-color: var(--cap); }
.k-e-wobble3d { color: var(--cap); text-shadow: .5cqmin .5cqmin 0 #fff, 1cqmin 1cqmin 0 #12141C; } .k-e-shadowstack { color: #fff; text-shadow: .6cqmin .6cqmin 0 #FF4D6D, 1.2cqmin 1.2cqmin 0 #FFD60A, 1.8cqmin 1.8cqmin 0 #34E3B0, 2.4cqmin 2.4cqmin 0 #5CC8FF; }
.k-e-knockout { color: #12141C; background: var(--cap); padding: 1cqmin 4cqmin; } .k-e-underlay { color: #fff; background: linear-gradient(transparent 60%, var(--cap) 60% 90%, transparent 90%); padding: 0 2cqmin; } .k-e-chalk { color: rgba(255,255,255,.9); font-family: var(--f-hand); text-transform: none; filter: url(#none) blur(.1cqmin); text-shadow: 0 0 .4cqmin rgba(255,255,255,.6); letter-spacing: .04em; }
.k-e-marker { color: var(--cap); font-family: "Permanent Marker", var(--f-hand); text-transform: none; } .k-e-pixel { color: var(--cap); font-family: var(--f-mono); text-shadow: .7cqmin .7cqmin 0 #12141C; letter-spacing: .1em; } .k-e-striped { color: transparent; background: repeating-linear-gradient(180deg, var(--cap) 0 1.4cqmin, #fff 1.4cqmin 2.8cqmin); -webkit-background-clip: text; background-clip: text; }
.k-e-halftone { color: transparent; background: radial-gradient(var(--cap) 40%, transparent 44%) 0 0 / 1.6cqmin 1.6cqmin; -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: .25cqmin var(--cap); } .k-e-outline3d { color: transparent; -webkit-text-stroke: .35cqmin #fff; text-shadow: .6cqmin .6cqmin 0 var(--cap), 1.2cqmin 1.2cqmin 0 var(--cap); }
.k-r { position: relative; display: grid; justify-items: center; gap: 1.6cqmin; padding: 6cqmin 8cqmin; text-align: center; color: #fff; } .k-r .bg { position: absolute; inset: 0; border-radius: 3cqmin; background: rgba(12,14,22,.9); border: 1px solid rgba(255,255,255,.12); } .k-r .nm { position: relative; font: 900 11cqmin/1 var(--f-display); text-transform: uppercase; color: var(--cap); white-space: nowrap; } .k-r small { position: relative; font: 600 3.8cqmin/1.2 var(--f-body); color: rgba(255,255,255,.85); }
.k-r-neonon .nm { color: #fff; text-shadow: 0 0 1cqmin var(--cap), 0 0 3cqmin var(--cap); } .k-r-typedot .dot { position: absolute; right: 6cqmin; top: 40%; width: 3cqmin; height: 3cqmin; border-radius: 50%; background: var(--cap); } .k-r-badge .bg { border-radius: 50%; inset: -12% 6%; border: 1cqmin dashed var(--cap); }
.k-r-spot { -webkit-mask: radial-gradient(circle 40cqmin, #000 60%, transparent 100%) 50% 50% / 300% 300% no-repeat; mask: radial-gradient(circle 40cqmin, #000 60%, transparent 100%) 50% 50% / 300% 300% no-repeat; } .k-r-ribbon .bg { background: var(--cap); border: 0; } .k-r-ribbon .nm, .k-r-ribbon small { color: #12141C; }
.k-r-underline .ul { position: relative; width: 70%; height: 1.2cqmin; background: var(--cap); transform-origin: left; } .k-r-bracketlock .ba, .k-r-bracketlock .bb { position: absolute; top: 10%; bottom: 10%; width: 5cqmin; border: 1cqmin solid var(--cap); } .k-r-bracketlock .ba { left: 0; border-right: 0; } .k-r-bracketlock .bb { right: 0; border-left: 0; } .k-r-bracketlock .bg { opacity: 0; }
.k-m { position: relative; width: 60cqmin; height: 44cqmin; display: flex; align-items: center; justify-content: center; gap: 1.4cqmin; }
.k-m-equalizer i { width: 4cqmin; height: 100%; background: var(--cap); border-radius: 1cqmin; transform-origin: 50% 100%; } .k-m-waveform i { width: 1.4cqmin; height: var(--h); background: var(--cap); border-radius: 1cqmin; } .k-m-loading i { width: 6cqmin; height: 6cqmin; border-radius: 50%; background: var(--cap); }
.k-m-radar { border-radius: 50%; width: 44cqmin; border: .6cqmin solid color-mix(in srgb, var(--cap) 60%, transparent); background: radial-gradient(circle, rgba(52,227,176,.08), transparent 70%); } .k-m-radar .sw { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, color-mix(in srgb, var(--cap) 70%, transparent), transparent 25%); } .k-m-radar .r1, .k-m-radar .r2 { position: absolute; border-radius: 50%; border: .3cqmin solid color-mix(in srgb, var(--cap) 40%, transparent); } .k-m-radar .r1 { inset: 20%; } .k-m-radar .r2 { inset: 38%; } .k-m-radar .bl { position: absolute; left: 66%; top: 30%; width: 3cqmin; height: 3cqmin; border-radius: 50%; background: var(--cap); box-shadow: 0 0 2cqmin var(--cap); }
.k-m-planets .sun { width: 12cqmin; height: 12cqmin; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFF1C9, #FF9F1C); box-shadow: 0 0 5cqmin #FF9F1C; } .k-m-planets .o1, .k-m-planets .o2 { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: .3cqmin dashed rgba(255,255,255,.3); } .k-m-planets .o1 { width: 30cqmin; height: 30cqmin; margin: -15cqmin; } .k-m-planets .o2 { width: 42cqmin; height: 42cqmin; margin: -21cqmin; } .k-m-planets s { position: absolute; left: 50%; top: -2cqmin; width: 4cqmin; height: 4cqmin; margin-left: -2cqmin; border-radius: 50%; background: var(--cap); } .k-m-planets .o2 s { background: #5CC8FF; width: 5cqmin; height: 5cqmin; }
.k-m-helix i { position: absolute; left: 50%; top: calc(var(--i) * 3.4cqmin + 2cqmin); width: 3.4cqmin; height: 3.4cqmin; border-radius: 50%; background: var(--cap); } .k-m-helix i:nth-child(even) { background: #5CC8FF; }
.k-m-pendulum i { width: 6cqmin; height: 6cqmin; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #9AA2B6); position: relative; transform-origin: 50% -20cqmin; margin-top: 10cqmin; } .k-m-pendulum i::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: .3cqmin; height: 20cqmin; background: rgba(255,255,255,.5); }
.k-m-ball .b { width: 10cqmin; height: 10cqmin; border-radius: 50%; background: var(--cap); position: absolute; bottom: 6cqmin; } .k-m-ball .sh { position: absolute; bottom: 4cqmin; width: 12cqmin; height: 2cqmin; border-radius: 50%; background: rgba(0,0,0,.4); }
.k-m-dominoes i { width: 3cqmin; height: 16cqmin; background: #fff; border-radius: .6cqmin; transform-origin: 100% 100%; box-shadow: 0 1cqmin 1cqmin rgba(0,0,0,.4); } .k-m-dotwave i { width: 3.6cqmin; height: 3.6cqmin; border-radius: 50%; background: var(--cap); } .k-m-arcs i { position: absolute; border-radius: 50%; border: 1cqmin solid transparent; border-top-color: var(--cap); border-right-color: var(--cap); } .k-m-arcs i:nth-child(1) { width: 40cqmin; height: 40cqmin; } .k-m-arcs i:nth-child(2) { width: 30cqmin; height: 30cqmin; border-top-color: #5CC8FF; border-right-color: #5CC8FF; } .k-m-arcs i:nth-child(3) { width: 20cqmin; height: 20cqmin; border-top-color: #FF4D6D; border-right-color: #FF4D6D; }
.k-m-gridpop { display: grid; grid-template-columns: repeat(4, 8cqmin); gap: 2cqmin; width: auto; height: auto; } .k-m-gridpop i { width: 8cqmin; height: 8cqmin; border-radius: 1.6cqmin; background: var(--cap); }
.k-m-ribbon b { background: var(--cap); color: #12141C; font: 900 7cqmin/1 var(--f-display); padding: 3cqmin 9cqmin; clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%, 8% 50%); } .k-m-starbadge .st { position: absolute; width: 40cqmin; height: 40cqmin; background: var(--cap); clip-path: polygon(50% 0, 61% 12%, 75% 6%, 79% 21%, 94% 25%, 88% 39%, 100% 50%, 88% 61%, 94% 75%, 79% 79%, 75% 94%, 61% 88%, 50% 100%, 39% 88%, 25% 94%, 21% 79%, 6% 75%, 12% 61%, 0 50%, 12% 39%, 6% 25%, 21% 21%, 25% 6%, 39% 12%); } .k-m-starbadge b { position: relative; font: 900 8cqmin/1 var(--f-display); color: #12141C; }
.k-m-gears i { font-style: normal; font-size: 22cqmin; color: var(--cap); line-height: 1; } .k-m-gears .g2 { font-size: 15cqmin; color: #9AA2B6; margin: 8cqmin 0 0 -3cqmin; } .k-m-heartbeat svg { width: 70cqmin; height: 28cqmin; overflow: visible; } .k-m-heartbeat path { fill: none; stroke: var(--cap); stroke-width: 2.4; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 1.4cqmin var(--cap)); }
.k-m-fireworkone i { position: absolute; left: 50%; top: 50%; width: .8cqmin; height: 6cqmin; margin-left: -.4cqmin; background: linear-gradient(var(--cap), transparent); border-radius: 1cqmin; transform-origin: 50% 0; } .k-m-metaballs { filter: blur(2.4cqmin) contrast(8); background: transparent; } .k-m-metaballs i { position: absolute; width: 16cqmin; height: 16cqmin; border-radius: 50%; background: var(--cap); }
.k-m-progressring .ring { width: 40cqmin; height: 40cqmin; } .k-m-hourglassflip span { font-size: 24cqmin; display: inline-block; }
.k-s { position: relative; width: 50cqmin; height: 50cqmin; display: grid; place-items: center; } .k-s > i { position: absolute; } .k-s svg { width: 100%; height: 100%; overflow: visible; } .k-s path { fill: none; stroke: var(--cap); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 1.2cqmin var(--cap)); }
.k-s-hexspin i { inset: calc(var(--i) * 10%); background: transparent; border: .9cqmin solid var(--cap); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); } .k-s-hexspin i { background: var(--cap); -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); padding: 1cqmin; border: 0; }
.k-s-dotring i { inset: 0; border-radius: 50%; border: 1.2cqmin dotted var(--cap); } .k-s-tritunnel i { inset: 0; background: var(--cap); clip-path: polygon(50% 0, 100% 100%, 0 100%, 50% 0, 50% 8%, 6% 96%, 94% 96%, 50% 8%); opacity: 0; }
.k-s-plus i { width: 6cqmin; height: 6cqmin; background: linear-gradient(var(--cap), var(--cap)) 50% 0 / 30% 100% no-repeat, linear-gradient(var(--cap), var(--cap)) 0 50% / 100% 30% no-repeat; } .k-s-squaregrid { grid-template-columns: repeat(4, 1fr); gap: 2cqmin; } .k-s-squaregrid > i { position: static; width: 9cqmin; height: 9cqmin; background: var(--cap); border-radius: 1cqmin; }
.k-s-arcset i { inset: calc(var(--i) * 6%); border-radius: 50%; border: 1cqmin solid transparent; border-top-color: var(--cap); } .k-s-trio { display: flex; gap: 3cqmin; } .k-s-trio > i { position: static; width: 9cqmin; height: 9cqmin; border-radius: 50%; background: var(--cap); }
.k-s-lines { display: flex; gap: 3cqmin; } .k-s-lines > i { position: static; width: 1.2cqmin; height: 30cqmin; background: var(--cap); border-radius: 1cqmin; transform-origin: 50% 0; } .k-s-morph i { width: 30cqmin; height: 30cqmin; background: var(--cap); } .k-s-diamond i { width: calc(40cqmin - var(--i) * 12cqmin); height: calc(40cqmin - var(--i) * 12cqmin); border: 1cqmin solid var(--cap); rotate: 45deg; }
.k-s-halfmoons i { width: 30cqmin; height: 15cqmin; border-radius: 30cqmin 30cqmin 0 0; background: var(--cap); top: calc(var(--i) * 8cqmin); opacity: calc(1 - var(--i) * .2); transform-origin: 50% 100%; } .k-s-ripplesq i { inset: 10%; border: .8cqmin solid var(--cap); border-radius: 2cqmin; opacity: 0; }
.k-s-gyro { perspective: 80cqmin; } .k-s-gyro i { inset: 10%; border-radius: 50%; border: .8cqmin solid var(--cap); } .k-s-gyro i:nth-child(2) { border-color: #5CC8FF; } .k-s-gyro i:nth-child(3) { border-color: #FF4D6D; }
.k-s-crosshatch i { inset: 0; background: repeating-linear-gradient(45deg, var(--cap) 0 .6cqmin, transparent .6cqmin 4cqmin); -webkit-mask: radial-gradient(circle, #000 50%, transparent 70%); mask: radial-gradient(circle, #000 50%, transparent 70%); } .k-s-crosshatch i + i { background: repeating-linear-gradient(-45deg, #fff 0 .4cqmin, transparent .4cqmin 4cqmin); opacity: .5; }
.k-s-sunflower i { width: 1.8cqmin; height: 1.8cqmin; margin: -.9cqmin; border-radius: 50%; background: var(--cap); } .k-s-sinedots { display: flex; gap: 1cqmin; } .k-s-sinedots > i { position: static; width: 2.4cqmin; height: 2.4cqmin; border-radius: 50%; background: var(--cap); }
.k-ch3-gauge .cv, .k-ch3-halfdonut .cv { height: 32cqmin; } .h-ch .cv { display: block; width: 100%; height: 34cqmin; overflow: visible; }
.h-ch .tmap { display: flex; height: 30cqmin; gap: .8cqmin; } .h-ch .tmap i { display: grid; place-items: center; border-radius: 1.4cqmin; transform-origin: left; } .h-ch .tmap span { font: 900 4cqmin/1 var(--f-display); color: #12141C; }
.h-ch .bul { position: relative; height: 10cqmin; margin: 4cqmin 0; } .h-ch .bul .r { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.08) 0 50%, rgba(255,255,255,.16) 50% 80%, rgba(255,255,255,.24) 80%); border-radius: 1cqmin; } .h-ch .bul .v { position: absolute; left: 0; top: 30%; bottom: 30%; background: var(--cap); transform-origin: left; } .h-ch .bul .t { position: absolute; top: 10%; bottom: 10%; width: .8cqmin; background: #fff; }
.h-ch .spg { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqmin; } .h-ch .spg div { background: rgba(255,255,255,.06); border-radius: 2cqmin; padding: 2cqmin; } .h-ch .spg svg { width: 100%; height: 8cqmin; overflow: visible; } .h-ch .spg b { font: 900 4.6cqmin/1 var(--f-display); }
.h-ch .pyr { display: grid; gap: .8cqmin; } .h-ch .pyr div { display: flex; justify-content: center; gap: .8cqmin; } .h-ch .pyr i { height: 4cqmin; display: block; } .h-ch .pyr .l { background: #5CC8FF; transform-origin: right; } .h-ch .pyr .r { background: var(--cap); transform-origin: left; }
.h-ch .icb { display: grid; gap: 1.6cqmin; } .h-ch .icb div { display: flex; align-items: center; gap: 2cqmin; } .h-ch .icb span { font-size: 6cqmin; } .h-ch .icb i { display: block; height: 4.4cqmin; border-radius: 99px; transform-origin: left; }
.h-ch .waf { display: grid; grid-template-columns: repeat(10, 1fr); gap: .6cqmin; } .h-ch .waf i { aspect-ratio: 1; border-radius: .6cqmin; background: rgba(255,255,255,.14); } .h-ch .waf i.on { background: var(--cap); }
.k-a { position: relative; display: grid; justify-items: center; gap: 1.6cqmin; color: #fff; font-family: var(--f-mono); text-transform: uppercase; } .k-a b { font: 900 9cqmin/1 var(--f-mono); color: #FFD60A; text-shadow: .7cqmin .7cqmin 0 #E8364F; } .k-a small { font: 800 3.6cqmin/1 var(--f-mono); letter-spacing: .14em; }
.k-a-vhslabel { background: #F2EEDD; color: #23212A; padding: 4cqmin 6cqmin; border-left: 3cqmin solid #E8364F; } .k-a-vhslabel b { color: #23212A; text-shadow: none; font-family: var(--f-hand); text-transform: none; font-size: 8cqmin; }
.k-a-cassette { width: 64cqmin; height: 40cqmin; background: linear-gradient(#2A2E3A, #1A1C23); border-radius: 3cqmin; align-content: center; border: .8cqmin solid #3A3E4A; } .k-a-cassette i { position: absolute; top: 40%; width: 12cqmin; height: 12cqmin; border-radius: 50%; border: 1.6cqmin dashed #fff; } .k-a-cassette .r1 { left: 14%; } .k-a-cassette .r2 { right: 14%; } .k-a-cassette b { position: absolute; top: 12%; font-size: 5cqmin; color: #fff; text-shadow: none; }
.k-a-floppy { width: 40cqmin; height: 40cqmin; background: #2F5DC9; border-radius: 2cqmin; align-content: end; padding-bottom: 4cqmin; } .k-a-floppy .sh { position: absolute; top: 0; left: 25%; width: 50%; height: 30%; background: #C9CDD8; } .k-a-floppy b { color: #fff; text-shadow: none; font-size: 6cqmin; }
.k-a-handheld { background: #C9C9C0; padding: 5cqmin; border-radius: 3cqmin 3cqmin 10cqmin 3cqmin; } .k-a-handheld .scr { background: #9BBC0F; color: #0F380F; padding: 6cqmin 8cqmin; font: 900 6cqmin/1 var(--f-mono); box-shadow: inset 0 0 0 1cqmin #306230; }
.k-a-crton b { color: #fff; text-shadow: 0 0 2cqmin #fff; } .k-a-coin .cn { width: 18cqmin; height: 18cqmin; border-radius: 50%; display: grid; place-items: center; background: #FFD60A; color: #B07A20; font: 900 10cqmin/1 var(--f-mono); font-style: normal; box-shadow: inset -1cqmin -1cqmin 0 #E0A84F; }
.k-a-invader .iv { width: 30cqmin; height: 22cqmin; background: #34E3B0; clip-path: polygon(20% 0, 30% 0, 30% 15%, 70% 15%, 70% 0, 80% 0, 80% 15%, 90% 15%, 90% 35%, 100% 35%, 100% 70%, 90% 70%, 90% 85%, 75% 85%, 75% 100%, 60% 100%, 60% 85%, 40% 85%, 40% 100%, 25% 100%, 25% 85%, 10% 85%, 10% 70%, 0 70%, 0 35%, 10% 35%, 10% 15%, 20% 15%, 20% 0, 20% 0, 20% 45%, 35% 45%, 35% 55%, 20% 55%, 20% 45%, 65% 45%, 80% 45%, 80% 55%, 65% 55%, 65% 45%); }
.k-a-chomper { display: flex; gap: 4cqmin; align-items: center; } .k-a-chomper .pm { width: 16cqmin; height: 16cqmin; border-radius: 50%; background: #FFD60A; } .k-a-chomper s { width: 3cqmin; height: 3cqmin; border-radius: 50%; background: #fff; }
.k-a-explosion i { position: absolute; left: 50%; top: 40%; width: 3cqmin; height: 3cqmin; margin-left: -1.5cqmin; background: #FF9F1C; box-shadow: 0 0 0 1cqmin #FF2D55; } .k-a-sword span { font-size: 18cqmin; } .k-a-win95 { background: #C3C3C3; color: #000; border: .6cqmin outset #fff; width: 66cqmin; text-transform: none; gap: 0; } .k-a-win95 .tb { width: 100%; display: flex; justify-content: space-between; background: linear-gradient(90deg, #000080, #1084D0); color: #fff; padding: 1.4cqmin 2cqmin; font: 700 3.6cqmin/1 var(--f-mono); } .k-a-win95 p { margin: 4cqmin; font: 600 4.2cqmin/1.2 var(--f-mono); } .k-a-win95 .ok { margin-bottom: 3cqmin; padding: 1.4cqmin 6cqmin; border: .5cqmin outset #fff; font: 700 3.6cqmin/1 var(--f-mono); }
.k-a-dialup { background: #111; padding: 4cqmin 6cqmin; border-radius: 2cqmin; } .k-a-dialup b { font-size: 5.4cqmin; color: #34E3B0; text-shadow: none; } .k-a-dialup .br { width: 56cqmin; height: 4cqmin; border: .5cqmin solid #34E3B0; } .k-a-dialup .br i { display: block; height: 100%; background: repeating-linear-gradient(90deg, #34E3B0 0 3cqmin, transparent 3cqmin 4cqmin); width: 0; }
.k-a-trophy8 span { font-size: 22cqmin; filter: drop-shadow(.8cqmin .8cqmin 0 #E8364F); } .k-a-oneup b { color: #34E3B0; text-shadow: .7cqmin .7cqmin 0 #0E5A31; font-size: 14cqmin; } .k-a-combo .num { font-size: 16cqmin; color: #FF9F1C; } .k-a-ko b { font: 900 26cqmin/1 var(--f-display); font-style: italic; color: #FF2D55; text-shadow: 1.2cqmin 1.2cqmin 0 #FFD60A; }
.k-a-fight b { font: 900 16cqmin/1 var(--f-display); font-style: italic; color: #FFD60A; text-shadow: 1cqmin 1cqmin 0 #E8364F; } .k-a-newrecord b { font-size: 8cqmin; color: #FFD60A; } .k-a-boombox { width: 66cqmin; height: 34cqmin; background: #2A2E3A; border-radius: 3cqmin; border-top: 3cqmin solid #3A3E4A; } .k-a-boombox .sp { position: absolute; top: 25%; width: 20cqmin; height: 20cqmin; border-radius: 50%; background: radial-gradient(circle, #111 30%, #555 32%, #111 60%); } .k-a-boombox .a { left: 8%; } .k-a-boombox .b { right: 8%; } .k-a-boombox b { font-size: 10cqmin; color: var(--cap); text-shadow: none; }
.k-a-joystick { width: 40cqmin; height: 30cqmin; } .k-a-joystick .st { position: absolute; left: 30%; bottom: 20%; width: 3cqmin; height: 18cqmin; background: #333; transform-origin: 50% 100%; border-radius: 1cqmin; } .k-a-joystick .st::before { content: ""; position: absolute; left: 50%; top: -5cqmin; width: 9cqmin; height: 9cqmin; margin-left: -4.5cqmin; border-radius: 50%; background: #FF2D55; } .k-a-joystick .bt { position: absolute; right: 18%; bottom: 25%; width: 9cqmin; height: 9cqmin; border-radius: 50%; background: #FFD60A; box-shadow: 0 1cqmin 0 #B07A20; }
.k-quad .q { position: absolute; width: 50%; height: 50%; overflow: hidden; container-type: size; } .k-quad .q0 { left: 0; top: 0; } .k-quad .q1 { left: 50%; top: 0; } .k-quad .q2 { left: 0; top: 50%; } .k-quad .q3 { left: 50%; top: 50%; } .k-quad .q .footage { inset: 0; width: 100%; height: 100%; }
.k-tun .t { position: absolute; inset: 0; overflow: hidden; box-shadow: 0 0 0 1cqmin #fff, 0 0 5cqmin rgba(0,0,0,.6); container-type: size; } .k-tun .t .footage { inset: 0; width: 100%; height: 100%; }
.k-ci > i, .k-ci > div { position: absolute; pointer-events: none; }
.k-ci-halation .hal { inset: 0; filter: blur(3cqmin) brightness(1.4); mix-blend-mode: screen; opacity: .55; } .k-ci-dreamglow .dg { inset: 0; filter: blur(2cqmin) brightness(1.2); mix-blend-mode: screen; opacity: .6; }
.k-ci-grain .gr { inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); mix-blend-mode: overlay; } .k-ci-grain .sc { top: 0; bottom: 0; left: 30%; width: .3cqmin; background: rgba(255,255,255,.6); } .k-ci-grain .sc.b { left: 62%; width: .2cqmin; }
.k-ci-godrays .gd { inset: -20% -20% 30%; background: repeating-conic-gradient(from 160deg at 70% -10%, rgba(255,236,190,.35) 0 4deg, transparent 4deg 11deg); mix-blend-mode: screen; transform-origin: 70% 0; -webkit-mask: linear-gradient(#000, transparent); mask: linear-gradient(#000, transparent); }
.k-ci-dust .ds { width: .8cqmin; height: .8cqmin; border-radius: 50%; background: rgba(255,240,210,.8); box-shadow: 0 0 1cqmin rgba(255,240,210,.8); }
.k-ci-prism .pr { inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,0,128,.25) 40%, rgba(255,230,0,.2) 46%, rgba(0,255,200,.22) 52%, rgba(80,120,255,.25) 58%, transparent 68%) 0 0 / 200% 200%; mix-blend-mode: screen; }
.k-ci-vigpulse .vg { inset: 0; background: radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0,0,0,.85) 100%); }
.k-ci-nightvision .nv { inset: 0; background: rgba(40,255,90,.35); mix-blend-mode: multiply; backdrop-filter: grayscale(1) contrast(1.4) brightness(1.3); -webkit-backdrop-filter: grayscale(1) contrast(1.4) brightness(1.3); } .k-ci-nightvision .scope { inset: 0; background: radial-gradient(circle at 50% 50%, transparent 46%, #000 48%), repeating-linear-gradient(transparent 0 .4cqmin, rgba(0,0,0,.25) .4cqmin .8cqmin); }
.k-ci-tiltshift .ts { left: 0; right: 0; height: 32%; backdrop-filter: blur(1.6cqmin); -webkit-backdrop-filter: blur(1.6cqmin); } .k-ci-tiltshift .t { top: 0; -webkit-mask: linear-gradient(#000 40%, transparent); mask: linear-gradient(#000 40%, transparent); } .k-ci-tiltshift .b { bottom: 0; -webkit-mask: linear-gradient(transparent, #000 60%); mask: linear-gradient(transparent, #000 60%); }
.k-ci-shutter .fl { inset: 0; background: #fff; opacity: 0; } .k-ci-shutter .cr { inset: 4cqmin; border: .6cqmin solid rgba(255,255,255,.8); }
.k-ci-focusbox .fb { left: 30%; top: 44%; width: 40%; height: 26%; border: .6cqmin solid #34E3B0; border-radius: 1cqmin; } .k-ci-focusbox .af { position: absolute; left: 8%; top: 8%; font: 700 3.6cqmin/1 var(--f-mono); color: #34E3B0; }
.k-ci-lensdirt .ld { aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%); } .k-ci-lensdirt .lf { left: 0; right: 0; top: 30%; height: 20%; background: radial-gradient(ellipse at 50% 50%, rgba(255,220,170,.45), transparent 60%); mix-blend-mode: screen; }
.k-ci-smoke .sm { width: 80cqmin; height: 60cqmin; border-radius: 50%; background: radial-gradient(circle, rgba(220,220,230,.35), transparent 65%); filter: blur(4cqmin); } .k-ci-smoke .a { left: -20%; top: 50%; } .k-ci-smoke .b { right: -30%; top: 30%; } .k-ci-smoke .c { left: 10%; top: 10%; }
.k-ci-leader .ldr { left: 50%; top: 40%; width: 46cqmin; height: 46cqmin; margin-left: -23cqmin; border-radius: 50%; border: 1cqmin solid #fff; display: grid; place-items: center; overflow: hidden; background: rgba(0,0,0,.4); } .k-ci-leader .sw { position: absolute; inset: 0; background: conic-gradient(rgba(255,255,255,.35) 0 90deg, transparent 90deg); } .k-ci-leader .num { position: relative; font: 900 20cqmin/1 var(--f-display); color: #fff; }
.k-ci-diopter .dp { inset: 0 50% 0 0; overflow: hidden; } .k-ci-diopter .dp .footage { inset: 0 -100% 0 0; width: auto; }
.k-ci-speedstreaks .st { left: 0; width: 60%; height: .5cqmin; background: linear-gradient(90deg, transparent, rgba(255,255,255,.8)); }
.k-ci-slowshutter .ss { inset: 0; opacity: .35; mix-blend-mode: screen; }
.k-ci-iris .ir { left: 50%; top: 56%; width: 140cqmin; height: 140cqmin; margin: -70cqmin; border-radius: 50%; }
.k-ci-credits .cr2 { left: 0; right: 0; top: 20%; display: grid; justify-items: center; gap: 4cqmin; color: #fff; text-align: center; } .k-ci-credits small { font: 600 3.4cqmin/1 var(--f-mono); letter-spacing: .2em; } .k-ci-credits b { font: italic 700 8cqmin/1 "Playfair Display", Georgia, serif; }
.k-at i { position: absolute; font-style: normal; pointer-events: none; }
.k-at-fog i, .k-at-mist i { left: -30% !important; width: 160%; height: 40%; border-radius: 50%; background: radial-gradient(ellipse, rgba(230,235,245,.35), transparent 70%); filter: blur(3cqmin); } .k-at-mist i { top: 65% !important; }
.k-at-fireflies i { width: 1.6cqmin; height: 1.6cqmin; border-radius: 50%; background: #FFF6A0; box-shadow: 0 0 2cqmin 1cqmin rgba(255,240,120,.6); }
.k-at-embers i, .k-at-sparks i { width: 1cqmin; height: 1cqmin; border-radius: 50%; background: #FF9F1C; box-shadow: 0 0 1.6cqmin #FF6B00; top: 100% !important; } .k-at-sparks i { background: #FFE66D; width: .6cqmin; height: 2cqmin; }
.k-at-petals i, .k-at-leaves i, .k-at-hearts i, .k-at-lanterns i, .k-at-balloons i, .k-at-seeds i { font-size: calc(5cqmin * var(--s)); top: -10% !important; } .k-at-hearts i, .k-at-lanterns i, .k-at-balloons i { top: 100% !important; color: #FF4D6D; } .k-at-seeds i { color: #fff; top: 80% !important; left: 0 !important; }
.k-at-twinkle i, .k-at-galaxy i { width: calc(.8cqmin * var(--s)); height: calc(.8cqmin * var(--s)); border-radius: 50%; background: #fff; box-shadow: 0 0 1cqmin #fff; } .k-at-galaxy { background: radial-gradient(ellipse at 50% 40%, rgba(160,100,255,.25), transparent 60%); }
.k-at-shooting i { width: 18cqmin; height: .5cqmin; background: linear-gradient(90deg, #fff, transparent); rotate: -34deg; top: calc(var(--i) * 12%) !important; left: 70% !important; }
.k-at-bubbles i { width: calc(6cqmin * var(--s)); height: calc(6cqmin * var(--s)); border-radius: 50%; border: .3cqmin solid rgba(255,255,255,.7); background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.6), transparent 40%); top: 100% !important; }
.k-at-ash i { width: calc(1.2cqmin * var(--s)); height: calc(1.2cqmin * var(--s)); background: #BFBFBF; border-radius: 30%; top: -10% !important; }
.k-at-sunbeam { background: linear-gradient(120deg, rgba(255,230,170,.35), transparent 50%); } .k-at-sunbeam i { width: .7cqmin; height: .7cqmin; border-radius: 50%; background: rgba(255,240,200,.9); }
.k-at-caustics i { inset: 0 !important; left: 0 !important; top: 0 !important; background: radial-gradient(ellipse 20px 10px at 50% 50%, rgba(160,230,255,.35), transparent 70%) 0 0 / 40px 30px; mix-blend-mode: screen; } .k-at-caustics { background: linear-gradient(rgba(0,90,160,.3), rgba(0,40,90,.45)); }
.k-at-clouds i { width: 50cqmin; height: 18cqmin; border-radius: 50%; background: radial-gradient(ellipse, rgba(255,255,255,.6), transparent 70%); filter: blur(1.4cqmin); top: calc(var(--i) * 10%) !important; }
.k-at-storm i { inset: 0 !important; left: 0 !important; top: 0 !important; background: #E8F0FF; opacity: 0; } .k-at-storm { background: rgba(10,15,30,.35); }
.k-tr .cvr { position: absolute; inset: 0; pointer-events: none; } .k-tr .cvr i { position: absolute; background: var(--c); } .k-tr .cv { inset: 0; } .k-tr .ff { position: absolute; inset: 0; overflow: hidden; }
.k-tr-pixels .cvr i { width: 16.8%; height: 10.2%; opacity: 0; } .k-tr-barn .l, .k-tr-barn .r { top: 0; bottom: 0; width: 50.5%; } .k-tr-barn .l { left: 0; } .k-tr-barn .r { right: 0; }
.k-tr-diagonal .a, .k-tr-diagonal .b { inset: 0; } .k-tr-diagonal .a { clip-path: polygon(0 0, 100% 0, 0 100%); } .k-tr-diagonal .b { clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.k-tr-venetian .cvr { display: flex; flex-direction: column; } .k-tr-venetian .cvr i { position: static; flex: 1; transform-origin: 50% 0; } .k-tr-rings .cvr i { left: 50%; top: 50%; width: 220cqmin; height: 220cqmin; margin: -110cqmin; border-radius: 50%; border: 18cqmin solid var(--c); background: none; } .k-tr-rings .cvr i:last-child { background: var(--c); width: 60cqmin; height: 60cqmin; margin: -30cqmin; border: 0; }
.k-tr-strip .fs { left: 0; right: 0; height: 100%; background: #0C0C0E repeating-linear-gradient(180deg, transparent 0 2cqmin, #E9E4D8 2cqmin 4.6cqmin, transparent 4.6cqmin 6.6cqmin) 2cqmin 0 / 4cqmin 100% no-repeat; box-shadow: inset 0 0 0 0 transparent; } .k-tr-heart .cv, .k-tr-star .cv { inset: 30%; }
.k-fr > * { position: absolute; pointer-events: none; } .k-fr .edge { inset: 0; }
.k-fr-phone .edge { border: 4cqmin solid #0B0C10; border-radius: 9cqmin; box-shadow: inset 0 0 0 .6cqmin #3A3D48; } .k-fr-phone .nt { left: 50%; top: 4cqmin; width: 26cqmin; height: 6cqmin; margin-left: -13cqmin; border-radius: 99px; background: #0B0C10; z-index: 1; }
.k-fr-browser .bar { left: 0; right: 0; top: 0; height: 10cqmin; background: #E8EAF0; display: flex; align-items: center; gap: 1.4cqmin; padding: 0 3cqmin; } .k-fr-browser .bar i { width: 2.6cqmin; height: 2.6cqmin; border-radius: 50%; background: #FF5F57; } .k-fr-browser .bar i:nth-child(2) { background: #FEBC2E; } .k-fr-browser .bar i:nth-child(3) { background: #28C840; } .k-fr-browser .bar span { margin-left: 3cqmin; flex: 1; background: #fff; border-radius: 99px; padding: 1.2cqmin 3cqmin; font: 500 3cqmin/1 var(--f-body); color: #586074; } .k-fr-browser .edge { border: .6cqmin solid #E8EAF0; }
.k-fr-tvset .edge { border: 6cqmin solid #5A3B22; border-radius: 6cqmin; box-shadow: inset 0 0 0 1.4cqmin #2A1B10, inset 0 0 8cqmin rgba(0,0,0,.6); } .k-fr-tvset .ant { left: 50%; top: -2cqmin; width: 30cqmin; height: 12cqmin; margin-left: -15cqmin; border-left: .6cqmin solid #999; border-right: .6cqmin solid #999; transform: perspective(10cqmin) rotateX(-20deg); } .k-fr-tvset .knob { right: 8cqmin; bottom: 8cqmin; width: 6cqmin; height: 6cqmin; border-radius: 50%; background: #C9A15A; z-index: 1; }
.k-fr-monitor .edge { border: 3cqmin solid #1A1C23; border-bottom-width: 10cqmin; border-radius: 2cqmin; } .k-fr-monitor .stand { left: 40%; right: 40%; bottom: 0; height: 4cqmin; background: #3A3D48; z-index: 1; }
.k-fr-slate .sl { left: 6%; right: 6%; bottom: 14%; padding: 3cqmin; background: #111; color: #fff; font: 800 4cqmin/1 var(--f-mono); } .k-fr-slate .clap { position: absolute; left: 0; right: 0; top: -5cqmin; height: 5cqmin; background: repeating-linear-gradient(135deg, #fff 0 4cqmin, #111 4cqmin 8cqmin); transform-origin: 0 100%; }
.k-fr-stamped .edge { border: 3cqmin solid #FBF6EC; -webkit-mask: radial-gradient(circle at 50% 50%, #000 70%, transparent 72%) 0 0 / 5cqmin 5cqmin, linear-gradient(#000 0 0) content-box; mask: radial-gradient(circle at 50% 50%, #000 70%, transparent 72%) 0 0 / 5cqmin 5cqmin, linear-gradient(#000 0 0) content-box; } .k-fr-sticker .edge { inset: 3cqmin; border: 2.4cqmin solid #fff; border-radius: 6cqmin; box-shadow: 0 0 0 .4cqmin rgba(0,0,0,.2), 0 2cqmin 5cqmin rgba(0,0,0,.4); }
.k-fr-photocorners .c { width: 12cqmin; height: 12cqmin; background: #12141C; } .k-fr-photocorners .a { left: 3cqmin; top: 3cqmin; clip-path: polygon(0 0, 100% 0, 0 100%); } .k-fr-photocorners .b { right: 3cqmin; top: 3cqmin; clip-path: polygon(0 0, 100% 0, 100% 100%); } .k-fr-photocorners .c2 { left: 3cqmin; bottom: 3cqmin; clip-path: polygon(0 0, 100% 100%, 0 100%); } .k-fr-photocorners .d { right: 3cqmin; bottom: 3cqmin; clip-path: polygon(100% 0, 100% 100%, 0 100%); } .k-fr-photocorners .edge { border: 3cqmin solid #F2EEDD; }
.k-fr-neontube .edge { inset: 4cqmin; border: 1cqmin solid var(--cap); border-radius: 5cqmin; box-shadow: 0 0 2cqmin var(--cap), inset 0 0 2cqmin var(--cap); } .k-fr-chalk .edge { inset: 4cqmin; border: 1.2cqmin dashed rgba(255,255,255,.75); border-radius: 3cqmin; filter: blur(.15cqmin); }
.k-fr-tapecorners .tp { width: 22cqmin; height: 6cqmin; background: rgba(255,240,200,.75); } .k-fr-tapecorners .a { left: -3cqmin; top: 4cqmin; rotate: -35deg; } .k-fr-tapecorners .b { right: -3cqmin; bottom: 8cqmin; rotate: -35deg; } .k-fr-wood .edge { border: 6cqmin solid #6B4A2E; box-shadow: inset 0 0 0 1.4cqmin #C9A15A, inset 0 0 0 2.4cqmin #6B4A2E, inset 0 0 6cqmin rgba(0,0,0,.6); }
.k-fr-magazine .mast { left: 0; right: 0; top: 4cqmin; text-align: center; font: italic 900 14cqmin/1 "Playfair Display", Georgia, serif; color: #fff; text-shadow: 0 1cqmin 2cqmin rgba(0,0,0,.5); } .k-fr-magazine .cl { left: 6cqmin; bottom: 22%; font: 800 4cqmin/1 var(--f-display); color: var(--cap); } .k-fr-magazine .bc { right: 6cqmin; bottom: 16%; width: 12cqmin; height: 7cqmin; background: repeating-linear-gradient(90deg, #000 0 .4cqmin, #fff .4cqmin .8cqmin, #000 .8cqmin 1.4cqmin, #fff 1.4cqmin 1.7cqmin); }
.k-fr-broadcast .lv { left: 5cqmin; top: 6cqmin; background: #E8364F; color: #fff; padding: 1.4cqmin 2.6cqmin; font: 800 3.6cqmin/1 var(--f-display); } .k-fr-broadcast .tk2 { left: 0; bottom: 16%; white-space: nowrap; background: #fff; color: #12141C; padding: 2cqmin 4cqmin; font: 800 4cqmin/1 var(--f-display); }
.k-fr-security { background: repeating-linear-gradient(transparent 0 .4cqmin, rgba(0,0,0,.2) .4cqmin .8cqmin); filter: grayscale(.3); } .k-fr-security .cam, .k-fr-security .ts { font: 700 3.6cqmin/1 var(--f-mono); color: #fff; text-shadow: 0 0 .6cqmin #000; } .k-fr-security .cam { left: 5cqmin; top: 6cqmin; } .k-fr-security .ts { right: 5cqmin; bottom: 16%; } .k-fr-security .rec { right: 6cqmin; top: 6cqmin; width: 4cqmin; height: 4cqmin; border-radius: 50%; background: #FF2D55; }
.k-fr-videocall .nm { left: 4cqmin; bottom: 16%; background: rgba(0,0,0,.6); color: #fff; padding: 1.4cqmin 3cqmin; border-radius: 1.4cqmin; font: 700 3.6cqmin/1 var(--f-body); } .k-fr-videocall .mic { left: 22cqmin; bottom: 16%; font-size: 5cqmin; } .k-fr-videocall .tiles { right: 4cqmin; top: 6cqmin; display: grid; gap: 2cqmin; } .k-fr-videocall .tiles i { width: 22cqmin; height: 30cqmin; border-radius: 2cqmin; background: linear-gradient(160deg, #3A4A6A, #1A2235); border: .5cqmin solid rgba(255,255,255,.3); }
.k-fr-gamehud .hp { left: 5cqmin; top: 6cqmin; width: 40cqmin; height: 4cqmin; border: .6cqmin solid #fff; } .k-fr-gamehud .hp i { display: block; width: 70%; height: 100%; background: #34E3B0; } .k-fr-gamehud .mini { right: 5cqmin; top: 5cqmin; width: 20cqmin; height: 20cqmin; border-radius: 50%; border: .6cqmin solid #fff; background: rgba(0,0,0,.4); } .k-fr-gamehud .xp { left: 5cqmin; top: 12cqmin; font: 800 3.6cqmin/1 var(--f-mono); color: #FFD60A; }
.k-fr-onair .oa { left: 50%; top: 6cqmin; transform: translateX(-50%); padding: 2cqmin 5cqmin; border-radius: 1.4cqmin; background: #FF2D55; color: #fff; font: 900 5cqmin/1 var(--f-display); box-shadow: 0 0 3cqmin #FF2D55; } .k-fr-instax .edge { border: 4cqmin solid #FAF7F0; border-bottom-width: 26cqmin; border-top-width: 6cqmin; }
.k-fr-blueprint { background: linear-gradient(rgba(47,124,246,.25) 1px, transparent 1px) 0 0 / 6cqmin 6cqmin, linear-gradient(90deg, rgba(47,124,246,.25) 1px, transparent 1px) 0 0 / 6cqmin 6cqmin; } .k-fr-blueprint .ruler { left: 0; right: 0; top: 0; height: 4cqmin; background: repeating-linear-gradient(90deg, #fff 0 .3cqmin, transparent .3cqmin 3cqmin); opacity: .7; } .k-fr-blueprint .edge { border: .6cqmin solid rgba(255,255,255,.7); inset: 4cqmin; }
.k-bd { mix-blend-mode: screen; opacity: .8; } .k-bd i { position: absolute; }
.k-bd-stripes { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--cap) 40%, transparent) 0 20px, transparent 20px 40px); opacity: .5; } .k-bd-checker { background: conic-gradient(color-mix(in srgb, var(--cap) 50%, transparent) 25%, transparent 0 50%, color-mix(in srgb, var(--cap) 50%, transparent) 0 75%, transparent 0) 0 0 / 12cqmin 12cqmin; opacity: .3; }
.k-bd-concentric { background: repeating-radial-gradient(circle, color-mix(in srgb, var(--cap) 45%, transparent) 0 1cqmin, transparent 1cqmin 5cqmin); opacity: .4; } .k-bd-sunburst { inset: -40%; background: repeating-conic-gradient(color-mix(in srgb, var(--cap) 35%, transparent) 0 10deg, transparent 10deg 20deg); opacity: .5; }
.k-bd-halftone { background: radial-gradient(var(--cap) 30%, transparent 34%) 0 0 / 3cqmin 3cqmin; -webkit-mask: linear-gradient(#000, transparent 70%); mask: linear-gradient(#000, transparent 70%); opacity: .4; } .k-bd-blobs { background: radial-gradient(circle at center, var(--cap), transparent 40%) 0 0 / 120% 120% no-repeat, radial-gradient(circle at center, #FF4D6D, transparent 40%) 100% 100% / 120% 120% no-repeat; filter: blur(4cqmin); opacity: .55; }
.k-bd-triangles { background: linear-gradient(60deg, color-mix(in srgb, var(--cap) 30%, transparent) 25%, transparent 25.5% 75%, color-mix(in srgb, var(--cap) 30%, transparent) 75.5%) 0 0 / 40px 70px; opacity: .45; } .k-bd-hexagons { background: radial-gradient(circle farthest-side at 0% 50%, transparent 23.5%, color-mix(in srgb, var(--cap) 40%, transparent) 24% 26%, transparent 27%) 0 0 / 40px 70px, radial-gradient(circle farthest-side at 100% 50%, transparent 23.5%, color-mix(in srgb, var(--cap) 40%, transparent) 24% 26%, transparent 27%) 20px 35px / 40px 70px; }
.k-bd-starfield { background: rgba(5,6,20,.35); } .k-bd-starfield i { left: 50%; top: 50%; width: .8cqmin; height: .8cqmin; border-radius: 50%; background: #fff; } .k-bd-polka { background: radial-gradient(color-mix(in srgb, var(--cap) 55%, transparent) 20%, transparent 22%) 0 0 / 6cqmin 6cqmin; opacity: .45; }
.k-bd-scanbeam { background: linear-gradient(transparent 45%, color-mix(in srgb, var(--cap) 60%, transparent) 50%, transparent 55%) 0 0 / 100% 200% no-repeat; } .k-bd-streaks i { height: .6cqmin; width: 50cqmin; background: linear-gradient(90deg, transparent, var(--cap), transparent); rotate: -20deg !important; }
.k-bd-topo { background: repeating-radial-gradient(ellipse at 30% 40%, transparent 0 3cqmin, color-mix(in srgb, var(--cap) 45%, transparent) 3cqmin 3.3cqmin); opacity: .5; } .k-bd-zigwaves { background: linear-gradient(135deg, color-mix(in srgb, var(--cap) 45%, transparent) 25%, transparent 25%) -30px 0 / 60px 60px, linear-gradient(225deg, color-mix(in srgb, var(--cap) 45%, transparent) 25%, transparent 25%) -30px 0 / 60px 60px; opacity: .35; }
.k-bd-spotlights i { top: -20%; width: 40cqmin; height: 160cqmin; background: linear-gradient(color-mix(in srgb, var(--cap) 60%, transparent), transparent); clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); transform-origin: 50% 0; opacity: .5; } .k-bd-spotlights i:first-child { left: 0 !important; } .k-bd-spotlights i:last-child { left: 55% !important; }
.k-bd-kaleido { inset: -30%; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--cap) 45%, transparent) 0 15deg, transparent 15deg 30deg, rgba(92,200,255,.3) 30deg 45deg, transparent 45deg 60deg); opacity: .45; } .k-bd-noisegrad { background: linear-gradient(135deg, var(--cap), #FF4D6D, #5CC8FF) 0 0 / 200% 200%; opacity: .35; }
.k-bd-plaid { background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--cap) 30%, transparent) 0 6px, transparent 6px 30px), repeating-linear-gradient(90deg, rgba(255,77,109,.25) 0 6px, transparent 6px 30px); opacity: .5; } .k-bd-diamonds { background: linear-gradient(45deg, transparent 47%, color-mix(in srgb, var(--cap) 50%, transparent) 48% 52%, transparent 53%) 0 0 / 30px 30px, linear-gradient(-45deg, transparent 47%, color-mix(in srgb, var(--cap) 50%, transparent) 48% 52%, transparent 53%) 0 0 / 30px 30px; opacity: .5; }
.k-bd-confettistill i { width: 1.4cqmin; height: 3.4cqmin; border-radius: .4cqmin; background: var(--cap); } .k-bd-confettistill i:nth-child(3n) { background: #FF4D6D; } .k-bd-confettistill i:nth-child(3n+1) { background: #5CC8FF; }


/* ---------- picked color: recolor accents of templates that use fixed colors (only when a color is chosen) ---------- */
.ov[data-col] { --hot: var(--cap); --mint: var(--cap); --sky: var(--cap); }
/* text */
.ov[data-col] .t7-ut:not([style*="color"]) { color: var(--cap); }
.ov[data-col] .k-t-subtitle span { box-shadow: inset 0 -.8cqmin 0 var(--cap); }
.ov[data-col] .k-t-chyron b { background: var(--cap); color: #12141C; }
.ov[data-col] .k-t-bracket span, .ov[data-col] .k-t-sandwich span, .ov[data-col] .k-t-whisper span, .ov[data-col] .k-t-caps span, .ov[data-col] .k-t-serif span { color: var(--cap); }
.ov[data-col] .k-t-definition { border-left: 1.6cqmin solid var(--cap); } .ov[data-col] .k-t-definition b { color: color-mix(in srgb, var(--cap) 70%, #000); }
.ov[data-col] .k-t-label span { background: var(--cap); } .ov[data-col] .k-t-tweet { box-shadow: inset 0 1.2cqmin 0 var(--cap); } .ov[data-col] .k-t-mono span { color: var(--cap); }
.ov[data-col] .k-scr, .ov[data-col] .k-k { color: var(--cap); }
/* premium fx */
.ov[data-col] .fx-neon { text-shadow: 0 0 .8cqmin #fff, 0 0 2.4cqmin var(--cap), 0 0 5cqmin var(--cap), 0 0 9cqmin var(--cap); }
.ov[data-col] .fx-neon small { text-shadow: 0 0 .8cqmin #fff, 0 0 2.4cqmin var(--cap), 0 0 5cqmin var(--cap); }
.ov[data-col] .fx-chrome div { background-image: linear-gradient(100deg, color-mix(in srgb, var(--cap) 55%, #333) 0%, #fff 22%, color-mix(in srgb, var(--cap) 70%, #222) 40%, #fff 50%, color-mix(in srgb, var(--cap) 60%, #333) 62%, color-mix(in srgb, var(--cap) 25%, #fff) 80%, color-mix(in srgb, var(--cap) 55%, #444) 100%); }
.ov[data-col] .fx-glass .gc { background: linear-gradient(150deg, color-mix(in srgb, var(--cap) 45%, transparent), rgba(255,255,255,.06)); border-color: var(--cap); }
.ov[data-col] .fx-holo { background-image: linear-gradient(115deg, color-mix(in srgb, var(--cap) 45%, #fff), #C7F5FF, color-mix(in srgb, var(--cap) 30%, #fff), #D6C8FF, color-mix(in srgb, var(--cap) 55%, #fff)); }
.ov[data-col] .fx-gt { color: var(--cap); } .ov[data-col] .fx-lens { box-shadow: 0 0 0 1.4cqmin var(--cap), 0 2cqmin 6cqmin rgba(0,0,0,.6); }
.ov[data-col] .k-x-fire { background-image: linear-gradient(0deg, color-mix(in srgb, var(--cap) 60%, #000), var(--cap) 40%, color-mix(in srgb, var(--cap) 40%, #fff) 70%, #fff); filter: drop-shadow(0 0 2cqmin var(--cap)); }
.ov[data-col] .k-x-ice { text-shadow: 0 0 1cqmin var(--cap), 0 .6cqmin 0 var(--cap), 0 1.2cqmin 2cqmin color-mix(in srgb, var(--cap) 60%, transparent); }
.ov[data-col] .k-x-foil, .ov[data-col] .k-x-holo, .ov[data-col] .k-x-plasma, .ov[data-col] .k-x-lava { background-image: linear-gradient(110deg, color-mix(in srgb, var(--cap) 55%, #000), color-mix(in srgb, var(--cap) 30%, #fff) 30%, var(--cap) 50%, color-mix(in srgb, var(--cap) 30%, #fff) 70%, color-mix(in srgb, var(--cap) 55%, #000)); }
.ov[data-col] .k-x-emboss { color: color-mix(in srgb, var(--cap) 45%, #2A2D36); } .ov[data-col] .k-x-mirror, .ov[data-col] .k-x-smoke, .ov[data-col] .k-x-glassword { color: var(--cap); }
.ov[data-col] .k-x-smoke { text-shadow: 0 0 3cqmin var(--cap); } .ov[data-col] .k-x-glassword { border-color: var(--cap); }
.ov[data-col] .k-x-spotlight { background-image: radial-gradient(circle 12cqmin at center, var(--cap), color-mix(in srgb, var(--cap) 15%, transparent) 70%), linear-gradient(color-mix(in srgb, var(--cap) 15%, transparent), color-mix(in srgb, var(--cap) 15%, transparent)); }
.ov[data-col] .k-x-electric { -webkit-text-stroke-color: var(--cap); } .ov[data-col] .k-x-candy { background-image: repeating-linear-gradient(45deg, var(--cap) 0 3cqmin, #fff 3cqmin 6cqmin); }
/* kinetic / highlights / text effects */
.ov[data-col] .k-h .w b { color: var(--cap); } .ov[data-col] .k-h-swap.on .w b { color: #fff; text-shadow: 0 0 2cqmin var(--cap); }
.ov[data-col] :is(.k-h-tiltlabel, .k-h-pill, .k-h-blob, .k-h-diagonal).on .w b { color: #12141C; }
.ov[data-col] .k-h-cross path { stroke: var(--cap); } .ov[data-col] .k-h-spot.on .w { background: radial-gradient(closest-side, color-mix(in srgb, var(--cap) 45%, transparent), transparent); }
.ov[data-col] .k-h-gradientword.on .w b { background-image: linear-gradient(90deg, var(--cap), #fff, var(--cap)); }
.ov[data-col] .k-e-letterpress { color: color-mix(in srgb, var(--cap) 35%, transparent); } .ov[data-col] .k-e-comic { color: var(--cap); }
.ov[data-col] .k-e-shadowstack { text-shadow: .6cqmin .6cqmin 0 var(--cap), 1.2cqmin 1.2cqmin 0 color-mix(in srgb, var(--cap) 70%, #000), 1.8cqmin 1.8cqmin 0 color-mix(in srgb, var(--cap) 45%, #000), 2.4cqmin 2.4cqmin 0 color-mix(in srgb, var(--cap) 25%, #000); }
.ov[data-col] .k-e-chalk { color: var(--cap); text-shadow: 0 0 .4cqmin var(--cap); }
.ov[data-col] .h-tx-rgb { text-shadow: .8cqmin 0 0 var(--cap), -.8cqmin 0 0 color-mix(in srgb, var(--cap) 40%, #00E5FF); }
.ov[data-col] .h-rt-pixel { color: var(--cap); } .ov[data-col] .h-rt-neon { text-shadow: 0 0 1cqmin var(--cap), 0 0 2.6cqmin var(--cap), 0 0 5cqmin var(--cap); }
.ov[data-col] .h-rt-chrome { background-image: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--cap) 60%, #fff) 45%, color-mix(in srgb, var(--cap) 50%, #000) 50%, color-mix(in srgb, var(--cap) 30%, #fff) 60%, #fff 100%); }
/* motion graphics, data */
.ov[data-col] .m-blob { background: linear-gradient(135deg, var(--cap), color-mix(in srgb, var(--cap) 50%, #000)); }
.ov[data-col] .k-m-pendulum i { background: radial-gradient(circle at 35% 35%, #fff, var(--cap)); } .ov[data-col] .k-m-dominoes i { background: var(--cap); }
.ov[data-col] .k-m-hourglassflip span, .ov[data-col] .t-emoji .em, .ov[data-col] .i-c > span:first-child, .ov[data-col] .k-c .e, .ov[data-col] .k-ic .e, .ov[data-col] .t7-wx .e, .ov[data-col] .t7-stk .e { filter: drop-shadow(0 0 2.4cqmin var(--cap)) drop-shadow(0 0 1cqmin var(--cap)); }
.ov[data-col] .t-ring .rn, .ov[data-col] .t-ring .lbl, .ov[data-col] .i-c .lbl { color: var(--cap); }
.ov[data-col] .t-price .new { color: var(--cap); } .ov[data-col] .k-sf span { color: var(--cap); }
.ov[data-col] .n-tier .r b { background: var(--cap) !important; } .ov[data-col] .n-check .ci { color: #fff; } .ov[data-col] .n-check .bx { border-color: var(--cap); background: color-mix(in srgb, var(--cap) 25%, transparent); }
.ov[data-col] .t-map .pin, .ov[data-col] .t-map .city { background: var(--cap); } .ov[data-col] .t-map .rip { border-color: var(--cap); }
.ov[data-col] .k-ch-pill span, .ov[data-col] .k-ch-key span { background: var(--cap); } .ov[data-col] .k-dtr .y { background: var(--cap); }
.ov[data-col] .k-ag .it { color: var(--cap); } .ov[data-col] .k-dd .d { border-color: var(--cap); background: color-mix(in srgb, var(--cap) 24%, transparent); }
.ov[data-col] .panel:has(.num) .num, .ov[data-col] .panel .pt { color: var(--cap); }
/* UI & social */
.ov[data-col] .u-reply { box-shadow: inset 1.4cqmin 0 0 var(--cap), 0 2cqmin 6cqmin rgba(0,0,0,.4); } .ov[data-col] .u-reply small i { background: var(--cap); }
.ov[data-col] .u-flood * { color: var(--cap); } .ov[data-col] .t-notif .ap { background: var(--cap); } .ov[data-col] .t-notif { box-shadow: inset 0 0 0 .6cqmin var(--cap), 0 2cqmin 6cqmin rgba(0,0,0,.4); }
.ov[data-col] .u-search { border-color: var(--cap); } .ov[data-col] .u-card:has(.u-bar) { box-shadow: 0 0 0 .8cqmin var(--cap), 0 2cqmin 6cqmin rgba(0,0,0,.4); } .ov[data-col] .u-bar span { background: color-mix(in srgb, var(--cap) 25%, #fff); }
.ov[data-col] .u-btn { background: var(--cap); color: #12141C; } .ov[data-col] .u-tog .u-sw { background: var(--cap) !important; }
.ov[data-col] .n-chat .bo { background: var(--cap); color: #12141C; } .ov[data-col] .n-chat .av { background: var(--cap); }
.ov[data-col] .n-ok .disc { background: color-mix(in srgb, var(--cap) 22%, transparent); } .ov[data-col] .n-ok .ring { border-color: var(--cap); } .ov[data-col] .n-ok svg { stroke: var(--cap); filter: drop-shadow(0 0 2cqmin var(--cap)); }
.ov[data-col] .n-sale .ic { background: var(--cap); } .ov[data-col] .n-sale .amt { color: color-mix(in srgb, var(--cap) 75%, #000); }
.ov[data-col] .n-dev { box-shadow: 0 0 0 .8cqmin var(--cap), 0 4cqmin 10cqmin rgba(0,0,0,.6); }
.ov[data-col] .k-cd .ic { background: color-mix(in srgb, var(--cap) 35%, transparent); } .ov[data-col] .k-cd { box-shadow: inset 1.2cqmin 0 0 var(--cap), 0 2cqmin 6cqmin rgba(0,0,0,.4); }
.ov[data-col] .k-ty { background: var(--cap); } .ov[data-col] .k-ty i { background: rgba(0,0,0,.55); } .ov[data-col] .k-dm .sw { box-shadow: 0 0 0 .6cqmin var(--cap); }
.ov[data-col] .t7-stk .w { background: var(--cap); }
.ov[data-col] .t7-rep .rg { --c: var(--cap); } .ov[data-col] .t7-rep .lbl { color: var(--cap); }
.ov[data-col] .t7-bp .top { background: var(--cap); color: #12141C; } .ov[data-col] .t7-bp .pl { color: var(--cap); }
.ov[data-col] .t7-term .cmd b, .ov[data-col] .t7-term .ok { color: var(--cap); } .ov[data-col] .t7-term .cur { background: var(--cap); } .ov[data-col] .t7-term { border-color: var(--cap); }
.ov[data-col] .t7-prop .rf { background: var(--cap); } .ov[data-col] .t7-prop .stamp { background: var(--cap); border-color: var(--cap); }
.ov[data-col] .t7-quiz .op.ok.on { background: color-mix(in srgb, var(--cap) 22%, transparent); box-shadow: inset 0 0 0 .5cqmin var(--cap); } .ov[data-col] .t7-quiz .op.ok.on b, .ov[data-col] .t7-quiz .pt { background: var(--cap); color: #12141C; }
.ov[data-col] .t7-score .tag { background: var(--cap); color: #12141C; } .ov[data-col] .t7-score .row { border-color: var(--cap); }
.ov[data-col] .t7-wx { background: linear-gradient(160deg, color-mix(in srgb, var(--cap) 45%, transparent), color-mix(in srgb, var(--cap) 20%, transparent)); border-color: var(--cap); }
/* emphasis, icons */
.ov[data-col] .t-emoji .wd, .ov[data-col] .t-question .qq { color: var(--cap); }
.ov[data-col] .k-siren .l, .ov[data-col] .k-siren .r { background: var(--cap); } .ov[data-col] .k-siren b { color: var(--cap); }
.ov[data-col] .k-sn { background: var(--cap); } .ov[data-col] .k-ct .tp { background: repeating-linear-gradient(45deg, var(--cap) 0 5cqmin, #12141C 5cqmin 10cqmin); } .ov[data-col] .k-ct .tp span { background: var(--cap); }
.ov[data-col] .k-ey .eyes i { box-shadow: 0 0 0 .8cqmin var(--cap), 0 1cqmin 3cqmin rgba(0,0,0,.4); } .ov[data-col] .k-ey b { color: var(--cap); } .ov[data-col] .k-xm path { stroke: var(--cap); }
.ov[data-col] .g-ref span { filter: drop-shadow(0 0 2.4cqmin var(--cap)) drop-shadow(0 0 .8cqmin var(--cap)); }
/* camera, cinematic, atmosphere: a color grade over the footage + recolored light */
.ov[data-col] .c-wrap:has(> .footage, > .fg-head, .fg-head)::after, .ov[data-col] .a-wrap:has(.fg-head)::after { content: ""; position: absolute; inset: 0; background: var(--cap); mix-blend-mode: soft-light; opacity: .55; pointer-events: none; z-index: 5; }
.ov[data-col] .c-tag, .ov[data-col] .c-note { background: var(--cap); color: #12141C; }
.ov[data-col] .c-freeze:has(video)::after { border-color: var(--cap); } .ov[data-col] .n-pol { background: color-mix(in srgb, var(--cap) 18%, #FAF7F0); }
.ov[data-col] .k-quad .q, .ov[data-col] .k-tun .t { box-shadow: inset 0 0 0 .6cqmin var(--cap); } .ov[data-col] .k-tun .t { box-shadow: 0 0 0 1cqmin var(--cap), 0 0 5cqmin rgba(0,0,0,.6); }
.ov[data-col] .a-vhs { color: var(--cap); } .ov[data-col] .a-dot { background: radial-gradient(circle, var(--cap), transparent 70%); }
.ov[data-col] .k-at i { background-color: var(--cap); color: var(--cap); box-shadow: 0 0 2cqmin var(--cap); }
.ov[data-col] :is(.k-at-petals, .k-at-leaves, .k-at-hearts, .k-at-lanterns, .k-at-balloons, .k-at-seeds) i { background: none; box-shadow: none; filter: drop-shadow(0 0 1.4cqmin var(--cap)); }
.ov[data-col] :is(.k-at-fog, .k-at-mist, .k-at-clouds) i { background: radial-gradient(ellipse, color-mix(in srgb, var(--cap) 45%, transparent), transparent 70%); box-shadow: none; }
.ov[data-col] .k-at-bubbles i { background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.6), color-mix(in srgb, var(--cap) 30%, transparent) 60%); border-color: var(--cap); box-shadow: none; }
.ov[data-col] .k-at-caustics i { background: radial-gradient(ellipse 20px 10px at 50% 50%, color-mix(in srgb, var(--cap) 50%, transparent), transparent 70%) 0 0 / 40px 30px; box-shadow: none; }
.ov[data-col] .k-at-storm i { background: color-mix(in srgb, var(--cap) 40%, #fff); box-shadow: none; } .ov[data-col] .k-at-sunbeam { background: linear-gradient(120deg, color-mix(in srgb, var(--cap) 45%, transparent), transparent 50%); }
.ov[data-col] .k-at-galaxy { background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--cap) 35%, transparent), transparent 60%); } .ov[data-col] .k-at-shooting i { background: linear-gradient(90deg, var(--cap), transparent); box-shadow: none; }
.ov[data-col] .k-ci > i, .ov[data-col] .k-ci > div:not(.cr2) { --ci: var(--cap); }
.ov[data-col] .k-ci-godrays .gd { background: repeating-conic-gradient(from 160deg at 70% -10%, color-mix(in srgb, var(--cap) 40%, transparent) 0 4deg, transparent 4deg 11deg); }
.ov[data-col] .k-ci-dust .ds { background: var(--cap); box-shadow: 0 0 1cqmin var(--cap); } .ov[data-col] .k-ci-prism .pr { background-image: linear-gradient(115deg, transparent 30%, color-mix(in srgb, var(--cap) 40%, transparent) 46%, transparent 62%); }
.ov[data-col] .k-ci-vigpulse .vg { background: radial-gradient(ellipse at 50% 50%, transparent 40%, color-mix(in srgb, var(--cap) 45%, #000) 100%); }
.ov[data-col] .k-ci-nightvision .nv { background: color-mix(in srgb, var(--cap) 40%, transparent); } .ov[data-col] .k-ci-shutter .cr, .ov[data-col] .k-ci-focusbox .fb { border-color: var(--cap); } .ov[data-col] .k-ci-focusbox .af { color: var(--cap); }
.ov[data-col] .k-ci-lensdirt .lf { background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--cap) 55%, transparent), transparent 60%); } .ov[data-col] .k-ci-smoke .sm { background: radial-gradient(circle, color-mix(in srgb, var(--cap) 40%, transparent), transparent 65%); }
.ov[data-col] .k-ci-leader .ldr { border-color: var(--cap); } .ov[data-col] .k-ci-leader .sw { background: conic-gradient(color-mix(in srgb, var(--cap) 55%, transparent) 0 90deg, transparent 90deg); }
.ov[data-col] .k-ci-speedstreaks .st { background: linear-gradient(90deg, transparent, var(--cap)); } .ov[data-col] .k-ci-iris .ir { box-shadow: 0 0 0 200cqmin color-mix(in srgb, var(--cap) 30%, #000) !important; } .ov[data-col] .k-ci-credits b { color: var(--cap); }
.ov[data-col] .k-ci-grain .sc { background: var(--cap); } .ov[data-col] .fx-grade .tint { background: linear-gradient(180deg, color-mix(in srgb, var(--cap) 45%, transparent), color-mix(in srgb, var(--cap) 25%, transparent)); } .ov[data-col] .fx-grade .ttl { color: var(--cap); }
.ov[data-col] .n-film, .ov[data-col] .c-bg { --c: var(--cap); }
.ov[data-col] .n-glow, .ov[data-col] .n-streakh { background-color: var(--cap) !important; }
/* story, lower thirds, badges, lists, notifications */
.ov[data-col] .t-cta .btn { background: var(--cap); color: #12141C; } .ov[data-col] .fx-ticker b { background: var(--cap); color: #12141C; }
.ov[data-col] .g-lt-pill .tx, .ov[data-col] .g-lt-tab .tx { box-shadow: inset 1.4cqmin 0 0 var(--cap); } .ov[data-col] .g-lt .nm { color: var(--cap); } .ov[data-col] .g-lt-pill .nm { color: color-mix(in srgb, var(--cap) 70%, #000); }
.ov[data-col] .g-lt-glass .tx, .ov[data-col] .g-lt-line .tx { border-color: var(--cap) !important; }
.ov[data-col] .g-bg-speech .sh, .ov[data-col] .g-bg-thought .sh, .ov[data-col] .g-bg svg :is(path, circle, ellipse) { fill: var(--cap); }
.ov[data-col] .g-ls .mk { border-color: var(--cap) !important; color: var(--cap); } .ov[data-col] .g-ls .it.on .mk, .ov[data-col] .g-ls .mk.on { background: var(--cap) !important; color: #12141C; }
.ov[data-col] .g-ls-emoji .mk { background: none; filter: drop-shadow(0 0 1.4cqmin var(--cap)); } .ov[data-col] .g-ls .pt { color: var(--cap); }
.ov[data-col] .g-nt .ic { background: var(--cap); } .ov[data-col] .g-nt { box-shadow: inset 1.2cqmin 0 0 var(--cap), 0 2cqmin 6cqmin rgba(0,0,0,.4); }
/* number cards, countdowns */
.ov[data-col] .k-n .num, .ov[data-col] .k-c .num { color: var(--cap) !important; } .ov[data-col] .k-n-led .num, .ov[data-col] .k-n-bulbs .num { text-shadow: 0 0 2cqmin var(--cap); }
.ov[data-col] .k-n-sticky { background: var(--cap); } .ov[data-col] .k-n-sticky .num { color: #2B2400 !important; } .ov[data-col] .k-n-bubble { background: var(--cap); } .ov[data-col] .k-n-bubble .num { color: #12141C !important; } .ov[data-col] .k-n-bubble::after { border-top-color: var(--cap); }
.ov[data-col] .k-n-calendar small { background: var(--cap); color: #12141C; } .ov[data-col] .k-n-calendar .num, .ov[data-col] .k-n-dice .num { color: #12141C !important; } .ov[data-col] .k-n-dice .num { background: var(--cap); box-shadow: inset 0 -2cqmin 0 color-mix(in srgb, var(--cap) 60%, #000), 0 2cqmin 4cqmin rgba(0,0,0,.4); }
.ov[data-col] .k-n-ticket, .ov[data-col] .k-n-receipt { box-shadow: inset 0 1.2cqmin 0 var(--cap); } .ov[data-col] .k-n-ticket .num, .ov[data-col] .k-n-receipt .num { color: color-mix(in srgb, var(--cap) 75%, #000) !important; }
.ov[data-col] .k-c-splitflap .num, .ov[data-col] .k-c-flipcal .num { color: var(--cap) !important; } .ov[data-col] .k-c-flipcal .num { border-top-color: var(--cap); color: #12141C !important; }
.ov[data-col] .k-c-traffic .lt i.on, .ov[data-col] .k-c-racelights .lt i.on { background: var(--cap) !important; box-shadow: 0 0 3cqmin var(--cap); } .ov[data-col] .k-c-leader .num { border-color: var(--cap); }
/* frames, comparisons, quotes, CTA, steps, places, retro */
.ov[data-col] .g-fr-polaroid .f1 { border-color: color-mix(in srgb, var(--cap) 35%, #FAF7F0) !important; }
.ov[data-col] .k-fr .edge { border-color: var(--cap) !important; } .ov[data-col] .k-fr-phone .nt, .ov[data-col] .k-fr-slate .sl, .ov[data-col] .k-fr-broadcast .lv, .ov[data-col] .k-fr-onair .oa, .ov[data-col] .k-fr-photocorners .c, .ov[data-col] .k-fr-tapecorners .tp, .ov[data-col] .k-fr-security .rec, .ov[data-col] .k-fr-tvset .knob { background-color: var(--cap) !important; }
.ov[data-col] .k-fr-onair .oa, .ov[data-col] .k-fr-broadcast .lv { color: #12141C; box-shadow: 0 0 3cqmin var(--cap); } .ov[data-col] .k-fr-browser .bar, .ov[data-col] .k-fr-gamehud .hp i { background: var(--cap); } .ov[data-col] .k-fr-gamehud .xp, .ov[data-col] .k-fr-security .cam, .ov[data-col] .k-fr-security .ts { color: var(--cap); }
.ov[data-col] .k-fr-videocall .tiles i { border-color: var(--cap); } .ov[data-col] .k-fr-videocall .nm { background: var(--cap); color: #12141C; } .ov[data-col] .k-fr-blueprint { background-image: linear-gradient(color-mix(in srgb, var(--cap) 35%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--cap) 35%, transparent) 1px, transparent 1px); }
.ov[data-col] .k-fr-wood .edge { box-shadow: inset 0 0 0 1.4cqmin var(--cap), inset 0 0 6cqmin rgba(0,0,0,.6); }
.ov[data-col] .k-bd-starfield i { background: var(--cap); box-shadow: 0 0 1cqmin var(--cap); }
.ov[data-col] .h-cm .x, .ov[data-col] .h-cm .tg { background: var(--cap) !important; color: #12141C !important; } .ov[data-col] .h-cm .cd, .ov[data-col] .h-cm .mf { border-color: var(--cap) !important; } .ov[data-col] .h-cm .th { filter: drop-shadow(0 0 2cqmin var(--cap)); }
.ov[data-col] .h-qt-note { background: var(--cap) !important; } .ov[data-col] .h-qt-note .tape { background: color-mix(in srgb, var(--cap) 40%, #fff) !important; } .ov[data-col] .h-qt-bubble { background: var(--cap) !important; color: #12141C; } .ov[data-col] .h-qt-bubble::after { border-top-color: var(--cap) !important; border-left-color: var(--cap) !important; }
.ov[data-col] .h-ct .ic.sub small { background: var(--cap); color: #12141C; } .ov[data-col] .h-ct-likesub { border-color: var(--cap); }
.ov[data-col] .k-to .ic { filter: drop-shadow(0 0 1.6cqmin var(--cap)); } .ov[data-col] .k-to { box-shadow: inset 0 0 0 .6cqmin var(--cap), 0 2cqmin 5cqmin rgba(0,0,0,.4); }
.ov[data-col] .k-p .tk i.on { background: var(--cap); box-shadow: 0 0 2cqmin var(--cap); } .ov[data-col] .k-p .kc { background: linear-gradient(color-mix(in srgb, var(--cap) 30%, #fff), var(--cap)); box-shadow: 0 1.6cqmin 0 color-mix(in srgb, var(--cap) 55%, #000); }
.ov[data-col] .h-pl-pin { border-color: var(--cap); } .ov[data-col] .h-pl-pin b { color: var(--cap); } .ov[data-col] .h-pl-road { background: color-mix(in srgb, var(--cap) 65%, #000); box-shadow: 0 0 0 .8cqmin color-mix(in srgb, var(--cap) 65%, #000), 0 2cqmin 5cqmin rgba(0,0,0,.4); }
.ov[data-col] .k-l-foldmap .fm i { background: linear-gradient(135deg, var(--cap), color-mix(in srgb, var(--cap) 40%, #fff)); } .ov[data-col] .k-l-eusign, .ov[data-col] .k-l-gps { background: color-mix(in srgb, var(--cap) 70%, #000); }
.ov[data-col] .k-l-welcome { border-color: var(--cap); } .ov[data-col] .k-l-welcome b { color: color-mix(in srgb, var(--cap) 75%, #000); } .ov[data-col] .k-l-visa { background: color-mix(in srgb, var(--cap) 25%, #fff); }
.ov[data-col] .k-l-luggage { background: var(--cap); } .ov[data-col] .k-l-polaroidmap .pm { background: linear-gradient(160deg, var(--cap), color-mix(in srgb, var(--cap) 40%, #fff)); }
.ov[data-col] .k-a b, .ov[data-col] .k-a .num { color: var(--cap) !important; } .ov[data-col] .k-a-vhslabel { border-left-color: var(--cap); } .ov[data-col] .k-a-vhslabel b, .ov[data-col] .k-a-win95 p { color: #23212A !important; }
.ov[data-col] .k-a-cassette i { border-color: var(--cap); } .ov[data-col] .k-a-floppy { background: var(--cap); } .ov[data-col] .k-a-floppy b { color: #12141C !important; }
.ov[data-col] .k-a-handheld .scr { background: var(--cap); } .ov[data-col] .k-a-coin .cn { background: var(--cap); } .ov[data-col] .k-a-invader .iv, .ov[data-col] .k-a-chomper .pm { background: var(--cap); }
.ov[data-col] .k-a-explosion i { background: var(--cap); } .ov[data-col] .k-a-sword span, .ov[data-col] .k-a-trophy8 span { filter: drop-shadow(0 0 2cqmin var(--cap)); }
.ov[data-col] .k-a-win95 .tb { background: linear-gradient(90deg, color-mix(in srgb, var(--cap) 60%, #000), var(--cap)); } .ov[data-col] .k-a-dialup .br { border-color: var(--cap); } .ov[data-col] .k-a-dialup .br i { background: repeating-linear-gradient(90deg, var(--cap) 0 3cqmin, transparent 3cqmin 4cqmin); }
.ov[data-col] .k-a-joystick .bt, .ov[data-col] .k-a-joystick .st::before { background: var(--cap); }
.ov[data-col] .g-bg-speech, .ov[data-col] .g-bg-thought { background: var(--cap); } .ov[data-col] .g-bg-speech::after { border-top-color: var(--cap); }
.ov[data-col] .g-bg-thought::after { background: var(--cap); box-shadow: -3cqmin 3cqmin 0 -1cqmin var(--cap); }

.ov[data-col] .n-bead { background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.85) 0 12%, color-mix(in srgb, var(--cap) 45%, transparent) 40%, transparent 72%); } .ov[data-col] .n-gloom { background-color: color-mix(in srgb, var(--cap) 20%, rgba(10,15,30,.4)) !important; }
.ov[data-col] .c-spot { box-shadow: 0 0 0 220cqmin color-mix(in srgb, var(--cap) 22%, rgba(4,5,10,.82)), inset 0 0 6cqmin var(--cap); }

/* studio: upload → working → result */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.studio { display: grid; grid-template-columns: minmax(250px, 330px) minmax(0, 1fr); gap: 24px 28px; align-items: start; }
.pane { display: none; min-width: 0; }
.studio[data-state="upload"] .p-up, .studio[data-state="working"] .p-work, .studio[data-state="result"] .p-res { display: grid; }
.studio:not([data-state="result"]) .ed, .studio:not([data-state="result"]) .pctl { display: none; }
.player { display: grid; gap: 10px; min-width: 0; }
.phone { position: relative; }
.badge { position: absolute; left: 22px; top: 22px; z-index: 8; font: 600 10.5px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .07em; background: rgba(0,0,0,.62); color: #fff; padding: 6px 9px; border-radius: 99px; pointer-events: none; }
.hit { position: absolute; inset: 9px; z-index: 7; border-radius: 22px; background: none; border: 0; padding: 0; display: grid; place-items: center; cursor: pointer; }
.hit .pp { width: 68px; height: 68px; border-radius: 50%; background: rgba(8,10,16,.6); color: #fff; display: grid; place-items: center; opacity: 0; transform: scale(.85); transition: opacity .18s, transform .18s; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hit .pp .i { width: 30px; height: 30px; margin-left: 4px; }
#asrSkip { margin-top: 14px; } .wsteps small { overflow-wrap: anywhere; }
.zone[data-pos="free"] { right: auto; width: 84%; height: 34%; translate: -50% -50%; }
.mvbox { position: absolute; z-index: 8; border: 1.5px dashed var(--accent); border-radius: 6px; pointer-events: none; box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
.mvbox[hidden] { display: none; }
.mvbox .rs { position: absolute; right: -8px; bottom: -8px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); pointer-events: auto; cursor: nwse-resize; touch-action: none; }
.mvbox .tg { position: absolute; left: -1px; top: -22px; font: 600 10.5px/1 var(--f-body); background: var(--accent); color: var(--accent-ink); padding: 4px 6px; border-radius: 4px; white-space: nowrap; }
.mvguide { position: absolute; z-index: 8; background: #FF4FD8; pointer-events: none; }
.mvguide.v { top: 0; bottom: 0; width: 1px; } .mvguide.h { left: 0; right: 0; height: 1px; }
.hit.canmove { cursor: move; } .studio[data-state="result"] .hit { touch-action: none; }
.studio[data-orient="land"] { grid-template-columns: minmax(0, 1fr); }
.studio[data-orient="land"] .player { width: min(100%, 860px); justify-self: center; }
.studio[data-orient="land"] .phone { border-radius: 18px; padding: 8px; }
.studio[data-orient="land"] .stage { border-radius: 10px; }
.studio[data-orient="square"] { grid-template-columns: minmax(260px, 420px) minmax(0, 1fr); }
@media (max-width: 760px) { .studio[data-state="result"][data-orient="land"] .phone { width: 100%; } .studio[data-state="result"][data-orient="square"] .phone { width: min(70vw, 300px); } }
.sizerow { display: flex; align-items: center; gap: 10px; } .sizerow input { flex: 1; } .sizerow output { font: 600 12px/1 var(--f-mono); min-width: 42px; }

.hit.paused .pp, .hit:focus-visible .pp { opacity: 1; transform: none; }
.hit:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.scanbar { position: absolute; inset: 9px; border-radius: 22px; overflow: hidden; pointer-events: none; z-index: 6; display: none; }
.scanbar i { position: absolute; left: 0; right: 0; height: 22%; top: -22%; background: linear-gradient(transparent, rgba(142,155,255,.45), transparent); }
.studio[data-state="working"] .scanbar { display: block; }
.studio[data-state="working"] .scanbar i { animation: scan 1.5s linear infinite; }
.studio[data-state="working"] .stage { filter: blur(5px) brightness(.65) saturate(.8); transition: filter .4s; }
@keyframes scan { to { top: 100%; } }
.dropveil { position: absolute; inset: 9px; border-radius: 22px; z-index: 9; display: none; place-items: center; text-align: center; padding: 20px; background: rgba(52,70,240,.82); color: #fff; font: 800 20px/1.2 var(--f-display); border: 3px dashed #fff; pointer-events: none; }
.studio.over .dropveil { display: grid; }
.pctl { display: grid; gap: 4px; }
.pctl input { width: 100%; accent-color: var(--accent); margin: 0; }
.ptime { display: flex; justify-content: space-between; gap: 8px; align-items: center; font: 500 12px/1.2 var(--f-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.now { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font: 600 12px/1.2 var(--f-body); min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.now i { flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--g); }

/* upload */
.drop { border: 2px dashed var(--line); border-radius: 20px; background: var(--surface); padding: clamp(28px, 5vw, 56px) clamp(18px, 4vw, 40px); display: grid; gap: 14px; justify-items: center; align-content: center; text-align: center; min-height: min(560px, 80vh); transition: border-color .2s, background .2s; }
.studio.over .drop { border-color: var(--accent); background: var(--soft); }
.drop-ic { width: 76px; height: 76px; border-radius: 22px; background: var(--soft); color: var(--accent); display: grid; place-items: center; }
.drop-ic svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.drop h3 { margin: 0; font: 850 clamp(30px, 4.4vw, 44px)/1 var(--f-display); font-stretch: 118%; letter-spacing: -.01em; }
.drop p { margin: 0; color: var(--muted); max-width: 48ch; }
.btn-p.big { padding: 15px 30px; font-size: 16px; border-radius: 12px; box-shadow: 0 10px 28px -12px var(--accent); }
.up-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; }
.lnk { background: none; border: 0; padding: 0; color: var(--accent); font: 600 14px/1.4 var(--f-body); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; }
.lnk:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.paste { width: min(100%, 520px); }
.paste textarea, .cust textarea, .out { width: 100%; min-height: 120px; resize: vertical; font: 14px/1.45 var(--f-body); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.out { font: 12px/1.4 var(--f-mono); min-height: 160px; }
.drop .fine { font-size: 12.5px; max-width: 54ch; margin-top: 6px; }
.file-btn { position: relative; overflow: hidden; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.status { font: 500 13px/1.5 var(--f-mono); color: var(--muted); }
.status b { color: var(--ink); }
.drop-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }

/* working */
.work { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: clamp(24px, 4vw, 44px); min-height: min(560px, 80vh); display: grid; gap: 18px; align-content: center; }
.work h3 { margin: 0; font: 850 clamp(24px, 3.2vw, 34px)/1.05 var(--f-display); font-stretch: 115%; }
.wbar { height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; }
.wbar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .45s cubic-bezier(.2,.8,.2,1); }
.wsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.wsteps li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: center; color: var(--muted); opacity: .45; transition: opacity .3s; font-weight: 600; }
.wsteps li small { display: block; font: 500 12px/1.4 var(--f-mono); color: var(--muted); }
.wsteps .ic { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 800; }
.wsteps li.run, .wsteps li.done { opacity: 1; color: var(--ink); }
.wsteps li.run .ic { border-color: var(--accent); border-top-color: transparent; animation: spin .8s linear infinite; }
.wsteps li.done .ic { background: #16A34A; border-color: #16A34A; }
.wsteps li.done .ic::after { content: "✓"; }
@keyframes spin { to { transform: rotate(360deg); } }

/* result */
.p-res { gap: 12px; align-content: start; }
.rbar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.ttl { display: grid; gap: 2px; min-width: 0; flex: 1 1 260px; }
.ttl b { font: 800 20px/1.15 var(--f-display); font-stretch: 110%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ttl .status { font-size: 12px; }
.acts { display: flex; gap: 8px; position: relative; flex-wrap: wrap; }
.menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: min(300px, 86vw); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 22px 50px -18px rgba(0,0,0,.5); padding: 6px; display: grid; }
.menu button { text-align: left; background: none; border: 0; color: var(--ink); padding: 10px 12px; border-radius: 9px; font: 700 14px/1.25 var(--f-body); }
.menu button:hover, .menu button:focus-visible { background: var(--soft); }
.menu small { display: block; margin-top: 2px; font-weight: 400; font-size: 12.5px; color: var(--muted); }
.menu .note { padding: 10px 12px 6px; margin-top: 4px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.msg { min-height: 1.5em; color: var(--ink); }
.msg:empty { min-height: 0; }
.cust { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: grid; gap: 16px; }
.opt { display: grid; gap: 6px; min-width: 0; }
.opt label, .opt .lab { font: 600 11.5px/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.opt .why { text-transform: none; letter-spacing: 0; font-weight: 500; }
.opt select, .opt input[type=text] { font: 14px/1.4 var(--f-body); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; width: 100%; min-width: 0; }
.opt input[type=range] { width: 100%; max-width: 320px; accent-color: var(--accent); }
.packs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pk { border: 2px solid var(--line); background: var(--bg); border-radius: 12px; padding: 6px 6px 8px; display: grid; gap: 7px; color: var(--ink); font: 700 13px/1.2 var(--f-body); text-align: center; }
.pk[aria-pressed="true"] { border-color: var(--accent); background: var(--soft); }
.pk .stage { display: block; aspect-ratio: 2 / 1; border-radius: 8px; }
.pk .stage .cap { top: 50%; translate: 0 -50%; left: 4%; right: 4%; font-size: 15cqmin; gap: 0 3cqmin; }
.mo-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 4px; }
.mo-head h3 { margin: 0; font: 800 17px/1.2 var(--f-display); font-stretch: 110%; }
.moments { position: relative; list-style: none; margin: 0; padding: 0 4px 0 0; display: grid; gap: 6px; max-height: 520px; overflow: auto; overscroll-behavior: contain; }
.mo { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); transition: border-color .2s, box-shadow .2s; }
.mo.on { box-shadow: inset 3px 0 0 var(--accent); }
.mo.sel { border-color: var(--accent); }
.mo-b { width: 100%; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 6px 10px; padding: 10px 12px; background: none; border: 0; color: var(--ink); text-align: left; border-radius: 12px; }
.mo-b:hover { background: color-mix(in srgb, var(--soft) 55%, transparent); }
.tcd { font: 500 12px/1.6 var(--f-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.mo-t { font-size: 14px; line-height: 1.45; }
.mo-t mark { background: none; color: inherit; font-weight: 700; text-decoration: underline 2px var(--accent); text-underline-offset: 3px; }
.mo-t em { color: var(--muted); }
.mo-fx { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--f-body); padding: 5px 9px 5px 7px; border-radius: 99px; background: var(--soft); color: var(--ink); }
.chip i { width: 8px; height: 8px; border-radius: 2px; background: var(--g); }
.chip.none { background: none; border: 1px dashed var(--line); color: var(--muted); padding-left: 9px; }
.chip.tr { background: var(--ink); color: var(--bg); padding-left: 9px; }
.mo-x { display: grid; gap: 14px; padding: 2px 12px 14px 62px; }
.alts { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 8px; scroll-snap-type: x proximity; }
.alt { flex: none; width: 88px; display: grid; gap: 6px; color: var(--ink); font: 600 12px/1.25 var(--f-body); cursor: pointer; scroll-snap-align: start; border-radius: 10px; }
.alt .stage { display: block; border-radius: 10px; outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .15s; }
.alt:hover .stage { outline-color: var(--line); }
.alt[aria-pressed="true"] .stage { outline-color: var(--accent); }
.alt[aria-pressed="true"] { color: var(--accent); }
.alt:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.alt .nonebox { display: grid; place-items: center; color: rgba(255,255,255,.7); font: 800 26px/1 var(--f-display); }
.mo-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }

/* editor */
.ed { grid-column: 1 / -1; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; min-width: 0; }
.transport, .tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.tools { background: color-mix(in srgb, var(--bg) 45%, var(--surface)); }
.i { width: 18px; height: 18px; fill: currentColor; flex: none; }
.i.s, .i .s { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ib { width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 8px; border: 0; background: none; color: var(--ink); padding: 0; }
.ib:hover:not(:disabled), .tb:hover:not(:disabled) { background: var(--soft); }
.ib[aria-pressed="true"] { color: var(--accent); background: var(--soft); }
.ib:disabled, .tb:disabled { opacity: .35; cursor: not-allowed; }
.ib.play { width: 42px; height: 42px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); margin: 0 4px; }
.ib.play .i { width: 20px; height: 20px; }
.tb { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: 600 13px/1 var(--f-body); }
.tb .i { width: 16px; height: 16px; }
.sep { width: 1px; height: 22px; background: var(--line); margin: 0 6px; }
.grow { flex: 1; }
.tcode { font: 600 14px/1 var(--f-mono); font-variant-numeric: tabular-nums; padding: 0 10px; color: var(--muted); white-space: nowrap; }
.tcode b { color: var(--ink); }
.spd select { font: 600 13px/1 var(--f-mono); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
.zm { display: inline-flex; align-items: center; gap: 2px; }
.zm input { width: 110px; accent-color: var(--accent); }
.selinfo { font: 500 12px/1.3 var(--f-mono); color: var(--muted); padding: 0 6px; }
.tlw { display: grid; grid-template-columns: 92px minmax(0, 1fr); }
.tll { border-right: 1px solid var(--line); font: 600 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.tll div { display: flex; align-items: center; padding-left: 12px; border-bottom: 1px solid var(--line); }
.l-ru, .ruler { height: 26px; } .l-v, .vrow { height: 50px; } .l-c, .crow, .l-a, .arow { height: 38px; } .l-x, .xrow { height: 30px; }
.tls { overflow-x: auto; overflow-y: hidden; }
.tli { position: relative; min-width: 100%; touch-action: none; user-select: none; -webkit-user-select: none; }
.trow { position: relative; border-bottom: 1px solid var(--line); }
.ruler { background: var(--bg); cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='28' viewBox='0 0 24 28'><path d='M5 1.5h14v7l-7 6.5-7-6.5z' fill='%23FF4D6D' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/><path d='M12 15v11' stroke='%23fff' stroke-width='4' stroke-linecap='round'/><path d='M12 15v11' stroke='%23FF4D6D' stroke-width='2' stroke-linecap='round'/></svg>") 12 14, pointer; }
.ruler span { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--muted); padding: 4px 0 0 4px; font: 500 10px/1 var(--f-mono); color: var(--muted); white-space: nowrap; pointer-events: none; }
.ruler span.mi { top: 18px; border-color: var(--line); }
.thumbs { position: absolute; inset: 5px 0; border-radius: 6px; overflow: hidden; background: #141823; }
.thumbs.fake { background: repeating-linear-gradient(90deg, #2B3756 0 54px, #232B44 54px 56px), #141823; }
.thumbs i { position: absolute; top: 0; bottom: 0; background-size: cover; background-position: center; border-right: 1px solid rgba(0,0,0,.4); }
.trim-out { position: absolute; top: 0; bottom: 0; background: rgba(5,6,10,.62); pointer-events: none; z-index: 1; }
.th { position: absolute; top: 3px; bottom: 3px; width: 12px; padding: 0; border: 0; border-radius: 4px; background: var(--cap); cursor: col-resize; z-index: 2; }
.th.in { margin-left: 0; } .th.out { margin-left: -12px; }
.th::after { content: ""; position: absolute; left: 4px; right: 4px; top: 35%; bottom: 35%; border-left: 1.5px solid #12141C; border-right: 1.5px solid #12141C; }
.blk { position: absolute; top: 5px; bottom: 5px; border-radius: 6px; padding: 0 9px; font: 600 11.5px/28px var(--f-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: grab; touch-action: none; }
.blk.cc { background: var(--soft); color: var(--ink); cursor: pointer; }
.blk.cc.on { box-shadow: inset 0 -2px 0 var(--accent); }
.blk.cl { background: color-mix(in srgb, var(--g) 34%, var(--surface)); color: var(--ink); box-shadow: inset 3px 0 0 var(--g); }
.blk.sel { outline: 2px solid var(--hot); outline-offset: 0; z-index: 3; }
.blk .hd { position: absolute; top: 0; bottom: 0; width: 6px; cursor: ew-resize; }
.blk .hd.l { left: 0; } .blk .hd.r { right: 0; }
.blk.sel .hd { background: color-mix(in srgb, var(--hot) 45%, transparent); }
.dia { position: absolute; top: 7px; width: 16px; height: 16px; margin-left: -8px; padding: 0; border: 0; border-radius: 3px; background: var(--ink); transform: rotate(45deg); cursor: pointer; }
.dia.sel { background: var(--hot); outline: 2px solid var(--hot); outline-offset: 2px; }
.phd { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--hot); z-index: 5; pointer-events: none; }
.phd::before { content: ""; position: absolute; top: 0; left: -6px; width: 14px; height: 13px; background: var(--hot); clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%); }
.keys { padding: 9px 12px; font: 500 11.5px/1.9 var(--f-body); color: var(--muted); }
kbd { font: 600 11px/1 var(--f-mono); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 2px 5px; margin-right: 2px; }
.phone:fullscreen { display: grid; place-items: center; background: #000; padding: 0; border-radius: 0; }
.phone:fullscreen .stage { width: auto; height: 100vh; border-radius: 0; }
.phone:fullscreen .hit, .phone:fullscreen .scanbar { inset: 0; border-radius: 0; }
.stage[data-pack="clean"] { --cap: #5CC8FF; }
.stage[data-pack="cinema"] { --cap: #F2C879; }
.stage[data-pack="neon"] { --cap: #FF4FD8; }
.stage[data-pack="neon"] .cap .w.em { text-shadow: 0 0 2cqmin #FF4FD8, 0 .7cqmin 0 rgba(0,0,0,.9); }
.stage[data-pack="cinema"] .cap { font-weight: 700; font-stretch: 110%; text-transform: none; font-size: 7cqmin; }
.stage[data-pack="clean"] .cap { font-weight: 800; text-transform: none; font-size: 7.6cqmin; }
.pk .stage[data-pack] .cap { font-size: 12cqmin; }

/* customize tabs, audio row, AI director, + Add, stage extras */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-top: -4px; overflow-x: auto; }
.tabs button { flex: none; background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px; font: 700 13px/1 var(--f-body); color: var(--muted); }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.tp { display: grid; gap: 14px; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.chk { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1.3 var(--f-body); cursor: pointer; }
.chk input { width: 16px; height: 16px; accent-color: var(--accent); }
.cust input[type=color] { width: 46px; height: 32px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.note2 { margin: 0; font-size: 12.5px; color: var(--muted); }
.btn-s.ai { border: 0; background: linear-gradient(135deg, #8E9BFF, #C084FC); color: #0B0D12; }
.btn-s.ai:disabled { opacity: .6; }
.aibox { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--soft); font: 600 13px/1.4 var(--f-body); }
.aibox span { flex: 1; }
.spin { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--accent); border-top-color: transparent; animation: spin .8s linear infinite; }
.tpc { color: var(--ink); font-weight: 600; }
.tools { position: relative; }
.addpop { position: absolute; left: 10px; top: calc(100% - 4px); z-index: 30; width: min(340px, 88vw); display: grid; gap: 10px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 20px 40px -16px rgba(0,0,0,.5); }
.addpop form { display: flex; gap: 6px; }
.addpop input { flex: 1; min-width: 0; font: 14px/1.3 var(--f-body); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.emg { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; }
.emg button { border: 0; background: none; font-size: 20px; line-height: 1; padding: 5px 0; border-radius: 6px; }
.emg button:hover, .emg button:focus-visible { background: var(--soft); }
.addsty select { flex: 1; font: 14px/1.3 var(--f-body); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
.addsty input[type=color], .mo-x input[type=color] { width: 40px; height: 32px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.addpop p { margin: 0; font-size: 12px; color: var(--muted); }
.row2 { display: flex; gap: 6px; } .row2 select { flex: 1; }
.l-au, .aurow { height: 36px; }
.aurow .mus { position: absolute; left: 0; right: 0; top: 4px; height: 12px; border-radius: 4px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, transparent) 0 2px, transparent 2px 5px); }
.aurow .mus b { position: absolute; left: 6px; top: -1px; font: 600 9.5px/14px var(--f-mono); color: var(--ink); background: var(--surface); padding: 0 5px; border-radius: 3px; }
.sfxm { position: absolute; top: 19px; height: 14px; padding: 0 5px; border: 0; border-radius: 4px; font: 600 9.5px/14px var(--f-mono); background: color-mix(in srgb, var(--accent) 24%, var(--surface)); color: var(--ink); white-space: nowrap; cursor: pointer; }
.sfxm.tr { background: var(--ink); color: var(--bg); padding: 0 4px; }
.sndcats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.sndcats button { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 99px; padding: 5px 11px; font: 600 12px/1 var(--f-body); cursor: pointer; }
.sndcats button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.sndlib { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.snd { display: flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: var(--surface); }
.snd button { border: 0; background: none; color: var(--ink); font: 600 12.5px/1.2 var(--f-body); padding: 8px 10px; cursor: pointer; }
.snd .sp { flex: 1; text-align: left; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .snd .sp:hover { background: var(--soft); }
.snd .sa { flex: none; width: 34px; border-left: 1px solid var(--line); font-size: 16px; color: var(--accent); } .snd .sa:hover { background: var(--accent); color: var(--accent-ink); }
.sndadded { display: flex; flex-wrap: wrap; gap: 6px; } .sndi { display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 10px; border-radius: 99px; background: var(--soft); font: 500 12.5px/1 var(--f-body); }
.sndi b { font: 600 11.5px/1 var(--f-mono); } .sndi button { border: 0; background: var(--surface); color: var(--ink); width: 22px; height: 22px; border-radius: 50%; cursor: pointer; }
.sfxm.free { background: color-mix(in srgb, #FF9F1C 40%, var(--surface)); }

.pbar { position: absolute; left: 0; right: 0; top: 0; height: 1.1cqmin; background: rgba(255,255,255,.2); z-index: 4; pointer-events: none; }
.pbar i { display: block; height: 100%; width: 0; background: var(--cap); box-shadow: 0 0 2cqmin var(--cap); }
.handle { position: absolute; right: 4%; top: 6.5%; z-index: 4; font: 700 3.4cqmin/1 var(--f-body); color: rgba(255,255,255,.9); background: rgba(0,0,0,.38); padding: 1.3cqmin 2.4cqmin; border-radius: 99px; pointer-events: none; }
.stage[data-look="warm"] > .footage { filter: sepia(.22) saturate(1.25) hue-rotate(-6deg) brightness(1.04); }
.stage[data-look="cool"] > .footage { filter: saturate(1.05) hue-rotate(14deg) brightness(1.02) contrast(1.05); }
.stage[data-look="vivid"] > .footage { filter: saturate(1.6) contrast(1.12); }
.stage[data-look="teal"] > .footage { filter: contrast(1.18) saturate(1.3) hue-rotate(-12deg) sepia(.12); }
.stage[data-look="vintage"] > .footage { filter: sepia(.45) contrast(.92) brightness(1.05) saturate(.85); }
.stage[data-look="fade"] > .footage { filter: contrast(.84) brightness(1.1) saturate(.78); }
.stage[data-look="mono"] > .footage { filter: grayscale(1) contrast(1.15); }
.stage .cap { scale: var(--cz, 1); transform-origin: 50% 0; }
.stage[data-cp="top"] .cap { top: 11%; }
.stage[data-cp="bottom"] .cap { top: 79%; }
.stage[data-cu="0"] .cap { text-transform: none; }
.stage[data-cs="box"] .cap { gap: 1.2cqmin; text-shadow: none; }
.stage[data-cs="box"] .cap .w { background: rgba(10,10,14,.88); padding: .5cqmin 1.8cqmin; border-radius: 1.2cqmin; }
.stage[data-cs="box"] .cap .w.em { background: var(--cap); color: #12141C; }
.stage[data-cs="karaoke"] .cap { gap: .6cqmin .6cqmin; }
.stage[data-cs="karaoke"] .cap .w { padding: .2cqmin 1.4cqmin; border-radius: 1.4cqmin; animation: wIn .25s ease-out both, kHi var(--d, .5s) linear var(--t) none; }
@keyframes kHi { 0% { background: var(--cap); color: #12141C; text-shadow: none; transform: scale(1.08); } 100% { background: var(--cap); color: #12141C; text-shadow: none; transform: scale(1.04); } }
/* highlight: bordered text (white with a thick black outline); the whole line stays up and the word being said
   turns the highlight color, outline kept, and pops out. paint-order puts the stroke behind the fill, so it borders the letters without thinning them */
.stage[data-cs="highlight"] .cap { gap: 0 3.4cqmin; -webkit-text-stroke: 1.8cqmin #000; paint-order: stroke fill; text-shadow: 0 1cqmin 0 #000, 0 0 2.4cqmin rgba(0,0,0,.6); }
.stage[data-cs="highlight"] .cap .w { animation: wIn .25s ease-out both, hHi var(--d, .4s) cubic-bezier(.34,1.56,.64,1) var(--t) none; }
.stage[data-cs="highlight"] .cap .w.em { color: inherit; font-size: 1em; }
@keyframes hHi { 0% { color: var(--cap); transform: scale(1); } 12%, 100% { color: var(--cap); transform: scale(1.14) translateY(-4%); } }
/* more caption styles. --t is when a word is said, --d how long it lasts (see captionEl) */
/* bounce: each word drops in with a bounce as it is said, and is the highlight color while it lasts */
.stage[data-cs="bounce"] .cap .w { animation: bIn .55s cubic-bezier(.3,1.8,.5,1) var(--t) both, cAct var(--d, .4s) linear var(--t) none; }
@keyframes bIn { 0% { opacity: 0; transform: translateY(-70%) scale(.8); } 55% { opacity: 1; transform: translateY(10%) scale(1.04); } 100% { opacity: 1; transform: none; } }
@keyframes cAct { from, to { color: var(--cap); } }
/* typewriter: words appear the instant they are said, with a cursor after the word being said */
.stage[data-cs="typewriter"] .cap { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 800; gap: 0 1.8cqmin; }
.stage[data-cs="typewriter"] .cap .w { position: relative; animation: tIn 1ms steps(1) var(--t) both; }
.stage[data-cs="typewriter"] .cap .w::after { content: ''; position: absolute; right: -1.3cqmin; top: 10%; bottom: 10%; width: .9cqmin; background: var(--cap); opacity: 0; animation: tCaret var(--d, .4s) steps(1) var(--t) none; }
@keyframes tIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes tCaret { from, to { opacity: 1; } }
/* underline: the whole line is up; a bar sweeps under each word as it is said and stays */
.stage[data-cs="underline"] .cap { gap: 0 2.6cqmin; }
.stage[data-cs="underline"] .cap .w { position: relative; animation: wIn .25s ease-out both, cAct var(--d, .4s) linear var(--t) none; }
.stage[data-cs="underline"] .cap .w::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3%; height: 1cqmin; border-radius: .5cqmin; background: var(--cap); transform-origin: 0 50%; box-shadow: 0 .4cqmin 0 rgba(0,0,0,.6); animation: uSweep var(--d, .4s) ease-out var(--t) both; }
@keyframes uSweep { from { transform: scaleX(0); } 35%, to { transform: scaleX(1); } }
/* gradient: words filled with a gradient from the highlight color */
.stage[data-cs="gradient"] .cap .w { background: linear-gradient(100deg, var(--cap), #FF4FD8 60%, #7A5CFF); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 .6cqmin 0 rgba(0,0,0,.85)); padding: 0 .2em; margin: 0 -.2em; animation: wIn .3s cubic-bezier(.34,1.56,.64,1) var(--t) both; }
.stage[data-cs="gradient"] .cap .w.em { color: transparent; }
/* neon: the line waits unlit and each word flickers on, like a sign, as it is said */
.stage[data-cs="neon"] .cap { color: #fff; }
.stage[data-cs="neon"] .cap .w { animation: nOn .45s linear var(--t) both; }
.stage[data-cs="neon"] .cap .w.em { color: #fff; }
@keyframes nOn { 0% { opacity: .22; text-shadow: none; } 20%, 45%, 60%, 100% { opacity: 1; text-shadow: 0 0 .8cqmin #fff, 0 0 2.6cqmin var(--cap), 0 0 6cqmin var(--cap); } 33% { opacity: .35; text-shadow: none; } 52% { opacity: .6; } }
/* sticker: white tilted labels that slap on as each word is said */
.stage[data-cs="sticker"] .cap { gap: 2cqmin 2.6cqmin; }
.stage[data-cs="sticker"] .cap .w { background: #fff; color: #12141C; padding: .3cqmin 1.8cqmin; border-radius: 1.6cqmin; text-shadow: none; box-shadow: 0 .9cqmin 0 rgba(0,0,0,.4); rotate: -3deg; animation: sIn .4s cubic-bezier(.34,1.56,.64,1) var(--t) both; }
.stage[data-cs="sticker"] .cap .w:nth-child(even) { rotate: 2.5deg; }
.stage[data-cs="sticker"] .cap .w:nth-child(3n) { rotate: -1deg; }
.stage[data-cs="sticker"] .cap .w.em { background: var(--cap); color: #12141C; }
@keyframes sIn { from { opacity: 0; transform: scale(.3); } 70% { opacity: 1; transform: scale(1.12); } to { opacity: 1; transform: none; } }
/* two-tone: one key word big in the highlight color, the rest smaller */
.stage[data-cs="twotone"] .cap { align-items: baseline; gap: 0 1.8cqmin; }
.stage[data-cs="twotone"] .cap .w { font-size: .74em; animation: wIn .3s cubic-bezier(.34,1.56,.64,1) var(--t) both; }
.stage[data-cs="twotone"] .cap .w.em { color: inherit; font-size: .74em; }
.stage[data-cs="twotone"] .cap .w.k { font-size: 1.5em; color: var(--cap); line-height: .95; }
/* glass: the line sits on a frosted panel; the word being said is the highlight color */
.stage[data-cs="glass"] .cap { left: 0; right: 0; width: fit-content; max-width: 86%; margin: 0 auto; padding: 1.4cqmin 3.2cqmin; background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(2.2cqmin) saturate(1.5); backdrop-filter: blur(2.2cqmin) saturate(1.5); border: .3cqmin solid rgba(255,255,255,.3); border-radius: 3cqmin; box-shadow: 0 1.5cqmin 4cqmin rgba(0,0,0,.25); text-shadow: 0 .3cqmin 1cqmin rgba(0,0,0,.45); }
.stage[data-cs="glass"] .cap .w { animation: wIn .25s ease-out both, cAct var(--d, .4s) linear var(--t) none; }
.stage[data-cs="glass"] .cap .w.em { color: inherit; font-size: 1em; }
.stage[data-cs="outline"] .cap { color: transparent; -webkit-text-stroke: .45cqmin #fff; text-shadow: none; }
.stage[data-cs="outline"] .cap .w.em { color: var(--cap); -webkit-text-stroke: 0; text-shadow: 0 .7cqmin 0 rgba(0,0,0,.9); }
.stage[data-cs="minimal"] .cap { font: 600 5.6cqmin/1.25 var(--f-body); text-transform: none; text-shadow: 0 .3cqmin 1.2cqmin rgba(0,0,0,.85); gap: 0 1.2cqmin; }
.stage[data-cs="minimal"] .cap .w { animation: mIn .3s ease-out var(--t) both; }
.stage[data-cs="minimal"] .cap .w.em { color: #fff; font-weight: 800; font-size: 1em; }
@keyframes mIn { from { opacity: 0; } }

/* 3x3 positions */
.zone[data-pos] { left: 5%; right: 5%; height: 34%; }
.zone[data-pos^="t"] { top: 6%; } .zone[data-pos^="m"] { top: 31%; } .zone[data-pos^="b"] { top: 50%; }
.zone[data-pos$="l"] { right: 32%; justify-items: start; } .zone[data-pos$="r"] { left: 32%; justify-items: end; }
.zone[data-pos$="l"] > * { transform-origin: 0 50%; } .zone[data-pos$="r"] > * { transform-origin: 100% 50%; }
.stage[data-cp^="t"] .cap { top: 10%; } .stage[data-cp^="m"] .cap { top: 44%; } .stage[data-cp^="b"] .cap { top: 72%; }
.stage[data-cp$="l"] .cap { right: 28%; justify-content: flex-start; text-align: left; transform-origin: 0 0; }
.stage[data-cp$="r"] .cap { left: 28%; justify-content: flex-end; text-align: right; transform-origin: 100% 0; }
.pgw { display: flex; align-items: center; gap: 12px; }
.pgrid { display: grid; grid-template-columns: repeat(3, 26px); grid-auto-rows: 30px; gap: 3px; padding: 4px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); width: max-content; }
.pgrid button { border: 0; border-radius: 5px; background: none; display: grid; place-items: center; padding: 0; }
.pgrid button i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: transform .15s; }
.pgrid button:hover:not(:disabled) i { background: var(--muted); }
.pgrid button[aria-checked="true"] { background: var(--soft); }
.pgrid button[aria-checked="true"] i { background: var(--accent); transform: scale(1.7); }
.pgrid button:disabled { cursor: not-allowed; opacity: .4; }
.pgw .pv { font: 600 13px/1.3 var(--f-body); color: var(--ink); }
.pgw .pv small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
/* caption text styling */
.seg.fonts .btn-s { font-size: 15px; padding: 6px 11px; }
.stage[data-cf] .cap { font-family: var(--cf); }
.stage[data-cw] .cap { font-weight: var(--cw); }
.stage[data-ci] .cap { font-style: italic; }
.stage[data-ctx] .cap { color: var(--ctx); }
.stage[data-ctx][data-cs="outline"] .cap { color: transparent; -webkit-text-stroke-color: var(--ctx); }
.stage .cap { letter-spacing: calc(var(--cls, 0) * .01em); }
.stage[data-cfx="none"] .cap, .stage[data-cfx="none"] .cap .w { text-shadow: none; }
.stage[data-cfx="outline"] .cap .w { -webkit-text-stroke: .55cqmin var(--cst, #000); paint-order: stroke fill; text-shadow: none; }
.stage[data-cfx="glow"] .cap .w { text-shadow: 0 0 1.4cqmin var(--cap), 0 0 4cqmin var(--cap); }
.stage[data-cfx="heavy"] .cap .w { text-shadow: 0 1.1cqmin 0 var(--cst, #000), .6cqmin 1.1cqmin 0 var(--cst, #000), 0 0 3cqmin rgba(0,0,0,.5); }
.t7-ut.bg { background: var(--utb, rgba(10,10,14,.85)); padding: 2cqmin 4cqmin; border-radius: 2.4cqmin; text-shadow: none; }
@media (max-width: 860px) {
  .studio { grid-template-columns: minmax(0, 1fr); }
  .studio[data-state="upload"] .p-up, .studio[data-state="working"] .p-work { order: -1; }
  .player { width: min(100%, 300px); justify-self: center; }
  .studio[data-state="result"] .player { position: sticky; top: 0; z-index: 12; width: 100%; justify-items: center; background: var(--bg); padding-block: 8px; border-bottom: 1px solid var(--line); }
  .studio[data-state="result"] .phone { width: min(42vw, 180px); padding: 6px; border-radius: 22px; }
  .studio[data-state="result"] .phone .stage { border-radius: 16px; }
  .studio[data-state="result"] .pctl { width: min(100%, 420px); }
  .studio[data-state="result"] .hit, .studio[data-state="result"] .scanbar { inset: 6px; border-radius: 16px; }
  .studio[data-state="result"] .badge { left: 14px; top: 14px; }
  .drop, .work { min-height: 0; }
  .moments { max-height: none; overflow: visible; }
  .mo-x { padding-left: 12px; }
  .packs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tlw { grid-template-columns: 70px minmax(0, 1fr); }
  .tll div { padding-left: 8px; font-size: 10px; }
  .tcode { font-size: 12px; padding: 0 4px; }
  .zm input { width: 70px; }
  .keys { display: none; }
}

/* gallery groups */
.grp { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 12px; border-top: 2px solid var(--ink); padding-top: 10px; margin-top: 8px; }
.grp h3 { margin: 0; font: 800 20px/1.1 var(--f-display); font-stretch: 112%; }
.grp span { font: 500 12px/1.3 var(--f-mono); color: var(--muted); }

/* safe zones */
.safe { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.safe div { position: absolute; background: repeating-linear-gradient(135deg, rgba(255,77,109,.28) 0 6px, rgba(255,77,109,.1) 6px 12px); border: 1px dashed rgba(255,77,109,.9); }
.safe .face { background: none; border: 2px dashed rgba(92,200,255,.95); border-radius: 46%; }
.safe span { position: absolute; font: 600 10px/1 var(--f-mono); color: #fff; background: rgba(0,0,0,.65); padding: 3px 5px; border-radius: 3px; white-space: nowrap; }

/* ---------- director console ---------- */
.console { display: grid; grid-template-columns: minmax(240px, 330px) minmax(0, 1fr); gap: 32px; align-items: start; }
.phone { background: #05060A; padding: 9px; border-radius: 30px; box-shadow: 0 24px 60px -24px rgba(10,14,40,.45); }
.phone .stage { border-radius: 22px; }
.ph-ctrl { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
button { font: inherit; cursor: pointer; }
.btn-s { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 8px; padding: 7px 12px; font: 600 13px/1.2 var(--f-body); }
.btn-s[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-p { border: 0; background: var(--accent); color: var(--accent-ink); border-radius: 8px; padding: 10px 16px; font: 700 14px/1.2 var(--f-body); }
button:focus-visible, input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.side { display: grid; gap: 28px; min-width: 0; }
.script { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.script li { border-bottom: 1px solid var(--line); }
.script button { width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 8px; background: none; border: 0; color: var(--ink); text-align: left; border-radius: 6px; }
.script button:hover { background: var(--soft); }
.script li.on button { background: var(--soft); box-shadow: inset 3px 0 0 var(--accent); }
.tc { font: 500 12px/1 var(--f-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.ln-t { min-width: 0; }
.ln-t mark { background: none; color: inherit; font-weight: 700; text-decoration: underline 2px var(--accent); text-underline-offset: 3px; }
.ln-sig { display: block; font: 400 12px/1.3 var(--f-mono); color: var(--muted); margin-top: 2px; }
.pill { font: 600 12px/1 var(--f-body); padding: 6px 9px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); white-space: nowrap; }

.try-g { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; align-items: start; }
.try-g > div:last-child { display: grid; gap: 12px; min-width: 0; }
.phone.sm { padding: 6px; border-radius: 22px; }
.phone.sm .stage { border-radius: 16px; }
@media (max-width: 560px) { .try-g { grid-template-columns: 1fr; } .phone.sm { width: 170px; justify-self: center; } }
.try { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px; margin-bottom: 24px; }
.try h3 { margin: 0; font: 800 17px/1.2 var(--f-display); font-stretch: 110%; }
.try p { margin: 0; color: var(--muted); font-size: 14px; }
.try form { display: flex; flex-wrap: wrap; gap: 8px; }
.try input { flex: 1 1 240px; min-width: 0; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: 15px/1.3 var(--f-body); }
.ex { display: flex; flex-wrap: wrap; gap: 6px; }
.ex button { border: 1px dashed var(--line); background: none; color: var(--muted); border-radius: 99px; padding: 5px 10px; font: 13px/1.2 var(--f-body); }
.ex button:hover { color: var(--ink); border-color: var(--accent); }
.matches { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.matches li { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 8px; background: var(--bg); }
.matches .mn { font-weight: 700; }
.matches .why { display: block; font: 400 12px/1.35 var(--f-mono); color: var(--muted); }
.meter { height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--accent); }
.matches .sc { font: 600 11px/1 var(--f-mono); color: var(--muted); margin-top: 4px; text-align: right; }

/* ---------- gallery ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 28px 20px; }
.card { display: grid; gap: 10px; align-content: start; min-width: 0; }
.card .stage { box-shadow: 0 1px 0 var(--line); }
.card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.card h3 { margin: 0; font: 800 16px/1.2 var(--f-display); font-stretch: 108%; }
.tag { font: 600 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); white-space: nowrap; }
.tag.core { color: var(--accent); }
.say { margin: 0; font-style: italic; font-size: 14px; }
.fires { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.vtag { justify-self: start; font: 600 11px/1 var(--f-mono); letter-spacing: .03em; color: var(--accent); background: var(--soft); padding: 5px 8px; border-radius: 99px; }
.card .replay { justify-self: start; border: 0; background: none; color: var(--accent); padding: 0; font: 600 13px/1.2 var(--f-body); }

.rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px 32px; }
.rules div { border-top: 2px solid var(--ink); padding-top: 10px; }
.rules h3 { margin: 0 0 4px; font: 800 15px/1.2 var(--f-display); font-stretch: 108%; }
.rules p { margin: 0; color: var(--muted); font-size: 14px; }

@media (max-width: 760px) {
  .console { grid-template-columns: 1fr; }
  .phone { max-width: 320px; width: 100%; margin-inline: auto; }
  .matches li { grid-template-columns: minmax(0, 1fr) auto; }
  .matches li .mtr { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .stage *, .stage { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; }
}

/* projects, autosave and rendering */
.restore { display: grid; gap: 2px; justify-items: center; margin-top: 10px; }
.restore small { font-weight: 400; font-size: 12px; color: var(--muted); }
.menu .mchk { padding: 0 12px 8px; font-size: 13px; color: var(--muted); }
.menu button:disabled { opacity: .5; cursor: not-allowed; }
.menu button:disabled:hover { background: none; }
body.rendering { overflow: hidden; }
body.rendering .hit, body.rendering .badge, body.rendering .mvbox, body.rendering .mvguide, body.rendering .scanbar, body.rendering .dropveil { display: none !important; }
.rnd { position: fixed; inset: 0; z-index: 1000; background: #05060A; }
.rnd[hidden] { display: none; }
.rnd-hud { position: absolute; left: 16px; right: 16px; bottom: 16px; max-width: 640px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center; color: #ECEEF5; font: 500 14px/1.3 var(--f-body); }
.rnd-hud .rnd-t { display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.rnd-hud .rnd-t span { color: #9AA2B6; font-size: 13px; }
.rnd-hud .wbar { grid-column: 1; }
.rnd-hud .btn-s { grid-row: 1 / span 2; grid-column: 2; }
.aikey { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font: 14px/1.4 var(--f-body); }
.aikey[hidden] { display: none; }
.aikey input[type="password"] { font: 14px/1.3 var(--f-mono); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.aikey p { margin: 0; font-size: 12.5px; color: var(--muted); }
.acts label.btn-s { display: inline-flex; align-items: center; }
.brief { display: grid; gap: 6px; text-align: left; width: 100%; max-width: 460px; margin: 14px auto 0; font: 600 13.5px/1.3 var(--f-body); }
.tp .brief { max-width: none; margin: 0; }
.brief textarea { font: 400 14px/1.4 var(--f-body); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; resize: vertical; min-height: 54px; }
.brief .why, .opt small.why { font-weight: 400; font-size: 12.5px; color: var(--muted); }
.opt small.why { display: block; margin-top: 4px; }
.menu .msel { display: flex; align-items: center; gap: 8px; font: 600 13px/1.2 var(--f-body); }
.menu .msel select { font: 13px var(--f-body); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; }

/* multi-select: the drag box on the timeline, and the panel that edits every selected moment at once */
.mq { position: absolute; z-index: 6; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); border-radius: 3px; pointer-events: none; }
.bulk { display: grid; gap: 12px; margin: 0 0 10px; padding: 12px 14px; border: 1px solid var(--accent); border-radius: 12px; background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.bulk[hidden] { display: none; }
.bk-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.bk-h b { font: 700 15px/1.2 var(--f-body); }
.bk-h .why { font-size: 12.5px; color: var(--muted); }
.btn-s.danger { color: var(--hot); border-color: color-mix(in srgb, var(--hot) 45%, var(--line)); }

/* pause cuts: striped in the video row (click one to keep that pause), a faint band down every track */
.cut { position: absolute; top: 0; bottom: 0; z-index: 2; padding: 0; border: 0; border-left: 1px solid var(--hot); border-right: 1px solid var(--hot); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--hot) 55%, transparent) 0 4px, rgba(5,6,10,.7) 4px 8px); cursor: pointer; }
.cut:hover, .cut:focus-visible { background: repeating-linear-gradient(135deg, var(--hot) 0 4px, rgba(5,6,10,.5) 4px 8px); }
.cutband { position: absolute; top: 76px; bottom: 0; z-index: 0; background: color-mix(in srgb, var(--hot) 9%, transparent); pointer-events: none; }
.pz { display: inline-flex; align-items: center; gap: 4px; }
.pz select { font: 600 12px/1 var(--f-body); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 7px; padding: 5px 4px; }
.tb[aria-pressed="true"] { color: var(--hot); }

/* timeline: one cursor per action. Arrow on empty space, playhead on the ruler, bracket on the trim handles,
   hand on what can be moved, pointer on what can be selected, resize arrows only on block edges, razor in the split tool */
.tli { cursor: default; }
.th.in { cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M14 3H8v18h6' fill='none' stroke='%23fff' stroke-width='5' stroke-linejoin='round'/><path d='M14 3H8v18h6' fill='none' stroke='%23111' stroke-width='2.5'/><path d='M16 12h6m-2.5-3 2.5 3-2.5 3M2 12h4m-2-2-2 2 2 2' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/><path d='M16 12h6m-2.5-3 2.5 3-2.5 3M2 12h4m-2-2-2 2 2 2' fill='none' stroke='%23111' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") 8 12, col-resize; }
.th.out { cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M10 3h6v18h-6' fill='none' stroke='%23fff' stroke-width='5' stroke-linejoin='round'/><path d='M10 3h6v18h-6' fill='none' stroke='%23111' stroke-width='2.5'/><path d='M8 12H2m2.5-3L2 12l2.5 3M22 12h-4m2-2 2 2-2 2' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/><path d='M8 12H2m2.5-3L2 12l2.5 3M22 12h-4m2-2 2 2-2 2' fill='none' stroke='%23111' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") 16 12, col-resize; }
.blk.cl, .sfxm.free { cursor: grab; }
.blk.cc, .dia, .sfxm, .mus, .cut, .vclip { cursor: pointer; }
.tli.dragging, .tli.dragging * { cursor: grabbing !important; }
.tli.razor .trow:not(.ruler), .tli.razor .trow:not(.ruler) * { cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='28' viewBox='0 0 24 28'><path d='M12 10v17' stroke='%23fff' stroke-width='4' stroke-linecap='round'/><path d='M12 10v17' stroke='%23111' stroke-width='2' stroke-linecap='round'/><path d='M4.5 1.5h15l-3.5 8.5h-8z' fill='%23FF4D6D' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/><path d='M9.5 5h5' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/></svg>") 12 16, crosshair !important; }
.rzl { position: absolute; top: 26px; bottom: 0; width: 0; border-left: 2px dashed var(--hot); z-index: 6; pointer-events: none; margin-left: -1px; }
.rzl[hidden] { display: none; }
/* the video row: pieces between split points, selectable */
.vclip { position: absolute; top: 0; bottom: 0; z-index: 1; border-radius: 4px; }
.vclip:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 45%, transparent); }
.vclip.sel { box-shadow: inset 0 0 0 2px var(--hot); background: color-mix(in srgb, var(--hot) 14%, transparent); }
.vsplit { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ink); z-index: 2; pointer-events: none; box-shadow: 0 0 0 1px var(--bg); }
.sfxm.sel, .cut.sel, .mus.sel { outline: 2px solid var(--hot); outline-offset: 1px; z-index: 3; }
.aurow .mus { border: 0; padding: 0; display: block; text-align: left; }
.tools { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 10px; margin-right: 6px; }
.tools .ib[aria-pressed="true"] { background: var(--ink); color: var(--bg); }