/* ─────────────────────────────────────────────────────────────────────────
   TunnlAi design tokens — extracted from the Figma design PDFs (2026-07-21)
   Source of truth: Tunnl Design/Claude Format (vector + raster extraction)
   Type system (from Figma file): DM Sans only.
     Level 1 display: 900 (Black), 28/36, -4% tracking
     Level 5 body:    600 (SemiBold), 16/24, 0
   ───────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "DM Sans";
  src: url("/static/tunnl/fonts/dmsans-var.woff2") format("woff2");
  font-weight: 100 1000;
  font-display: swap;
}

:root {
  /* Light theme — CANONICAL Figma variables (variables_home_light) */
  --t-bg: #FFFFFF;            /* core/surface/surface-default */
  --t-wash: #F2F6FC;          /* buttons/secondary-default-alt */
  --t-card: #FFFFFF;
  --t-ink: #2D3459;           /* core/text/text-default */
  --t-sub: #5D646D;           /* core/text/text-secondary */
  --t-faint: #83879D;
  --t-border: #D9DFE6;        /* core/border/border-default */
  --t-accent: #A0B6D6;        /* selected pills / dark-primary hue */
  --t-accent-ink: #2D3459;
  --t-btn-primary: #2D3459;   /* buttons/primary-default (light = ink) */
  --t-btn-primary-ink: #FFFFFF; /* core/text/text-inverted */
  --t-pos: #1E8E5A;
  --t-neg: #C3181B;           /* Red/600 */
  --t-alert: #2249D8;
  --t-chart: #2D59A0;
  --t-chart-soft: #A5BFE2;
  --t-sheet: #FFFFFF;
  --t-overlay: rgba(28, 28, 29, .55);
  --t-r-xxs: 4px; --t-r-s: 12px; --t-r-m: 16px; --t-r-l: 24px; --t-r-xl: 32px;
  --t-shadow: 0 4px 12px rgba(0,0,0,.05);   /* Effect Level 2 */
}

[data-theme="dark"] {
  /* Dark theme — CANONICAL Figma variables (variables_home_dark) */
  --t-bg: #1C1C1D;            /* core/surface/surface-default */
  --t-wash: #232B36;          /* core/surface/surface-secondary */
  --t-card: #232B36;
  --t-ink: #FFFFFF;
  --t-sub: #C8CDD4;           /* core/text/text-secondary */
  --t-faint: #5D646D;
  --t-border: #5D646D;        /* core/border/border-default */
  --t-accent: #A0B6D6;
  --t-accent-ink: #1C1C1D;    /* core/text/text-inverted */
  --t-btn-primary: #A0B6D6;   /* buttons/primary-default (dark = periwinkle) */
  --t-btn-primary-ink: #1C1C1D;
  --t-btn-secondary: #323942; /* buttons/secondary-default */
  --t-pos: #34C97F;
  --t-neg: #E4696B;
  --t-alert: #4C6EF5;
  --t-chart: #7FA4E8;
  --t-chart-soft: #3C4C66;
  --t-sheet: #232B36;
  --t-overlay: rgba(0, 0, 0, .6);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: var(--t-bg);
  color: var(--t-ink);
  font-family: "DM Sans", system-ui, sans-serif;
  font-weight: 600;                    /* Level 5 body default */
  font-size: 16px;
  line-height: 1.5;                    /* 24px */
  -webkit-font-smoothing: antialiased;
}

/* ── Type levels ── */
.t-display { font-weight: 900; font-size: 28px; line-height: 36px; letter-spacing: -.04em; }
.t-h2      { font-weight: 900; font-size: 22px; line-height: 28px; letter-spacing: -.03em; }
.t-l3      { font-weight: 600; font-size: 20px; line-height: 28px; }   /* Level 3/Semibold */
.t-h3      { font-weight: 700; font-size: 18px; line-height: 24px; }   /* Level 4/Bold */
.t-l6      { font-weight: 700; font-size: 14px; line-height: 20px; }   /* Level 6/Bold */
.t-l7      { font-weight: 700; font-size: 12px; line-height: 18px; }   /* Level 7/Bold */
.t-body    { font-weight: 600; font-size: 16px; line-height: 24px; }
.t-small   { font-weight: 600; font-size: 13px; line-height: 18px; }
.t-micro   { font-weight: 700; font-size: 11px; line-height: 14px; letter-spacing: .04em; text-transform: uppercase; }
.t-sub     { color: var(--t-sub); }
.t-faint   { color: var(--t-faint); }

/* ── Layout ── */
.t-app { max-width: 480px; margin: 0 auto; min-height: 100dvh; position: relative;
         padding-bottom: 96px; }
.t-px  { padding-left: 16px; padding-right: 16px; }

/* ── Header ── */
.t-header { display: flex; align-items: center; justify-content: space-between;
            padding: 12px 16px; position: sticky; top: 0; background: var(--t-bg);
            z-index: 20; }
.t-iconbtn { width: 44px; height: 44px; border-radius: 50%; background: var(--t-wash);
             border: none; color: var(--t-ink); display: flex; align-items: center;
             justify-content: center; cursor: pointer; font-size: 18px; }
.t-logo { display: flex; align-items: center; gap: 8px; font-weight: 900;
          font-size: 20px; letter-spacing: -.02em; }
.t-logo svg { height: 18px; }

/* ── Top pills (Insights / Collection / Market / Discover) ── */
.t-pills { display: flex; gap: 8px; padding: 4px 16px 12px; overflow-x: auto;
           scrollbar-width: none; }
.t-pills::-webkit-scrollbar { display: none; }
.t-pill { border: 1px solid var(--t-border); background: transparent; color: var(--t-ink);
          font: inherit; font-weight: 700; font-size: 14px; padding: 8px 16px;
          border-radius: 999px; cursor: pointer; white-space: nowrap; }
.t-pill.on { background: var(--t-accent); color: var(--t-accent-ink); border-color: var(--t-accent); }

/* ── Cards / sections ── */
.t-section { margin: 24px 16px 0; }
.t-sechead { display: flex; align-items: center; gap: 8px; font-weight: 900;
             font-size: 18px; letter-spacing: -.02em; margin-bottom: 12px; }
.t-card { background: var(--t-card); border: 1px solid var(--t-border);
          border-radius: 16px; padding: 16px; }
[data-theme="dark"] .t-card { border-color: transparent; }
.t-cta  { display: flex; align-items: center; gap: 12px; background: var(--t-card);
          border: 1px solid var(--t-border); border-radius: 16px; padding: 16px;
          cursor: pointer; color: var(--t-ink); width: 100%; text-align: left; font: inherit; }
[data-theme="dark"] .t-cta { border-color: var(--t-border); }
.t-cta b { display: block; font-weight: 700; font-size: 16px; }
.t-cta span { display: block; color: var(--t-sub); font-size: 14px; font-weight: 600; }

/* ── Prompt chips ("Worth Asking Today") ── */
.t-prompt { display: flex; gap: 10px; align-items: flex-start; background: var(--t-wash);
            border: none; border-radius: 14px; padding: 14px; color: var(--t-ink);
            font: inherit; font-weight: 700; font-size: 14.5px; line-height: 20px;
            text-align: left; cursor: pointer; width: 100%; margin-bottom: 10px; }
.t-prompt .spark { flex-shrink: 0; margin-top: 1px; }

/* ── Buttons ── */
.t-btn { display: block; width: 100%; border: none; border-radius: 14px;
         padding: 15px; font: inherit; font-weight: 700; font-size: 16px;
         cursor: pointer; text-align: center; }
.t-btn.primary { background: var(--t-btn-primary); color: var(--t-btn-primary-ink); }
.t-btn.ghost   { background: transparent; border: 1px solid var(--t-border); color: var(--t-ink); }
.t-btn.white   { background: #fff; color: #1B1B1C; }
.t-btn:disabled { opacity: .5; }

/* ── Floating Ask bar ── */
.t-askbar { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
            width: calc(100% - 32px); max-width: 448px; display: flex; gap: 10px;
            align-items: center; z-index: 30; }
.t-ask { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
         background: var(--t-wash); color: var(--t-ink); border: 1px solid var(--t-border);
         border-radius: 999px; padding: 14px 20px; font: inherit; font-weight: 700;
         cursor: pointer; box-shadow: 0 6px 24px var(--t-overlay); }
[data-theme="dark"] .t-ask { border-color: transparent; }
.t-fab { width: 52px; height: 52px; border-radius: 50%; background: var(--t-wash);
         border: 1px solid var(--t-border); color: var(--t-ink); font-size: 20px;
         cursor: pointer; box-shadow: 0 6px 24px var(--t-overlay); }
[data-theme="dark"] .t-fab { border-color: transparent; }

/* ── Sheets ── */
.t-sheetwrap { position: fixed; inset: 0; z-index: 50; }
.t-scrim { position: absolute; inset: 0; background: var(--t-overlay); }
.t-sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--t-sheet);
           border-radius: 24px 24px 0 0; padding: 20px 16px 32px; max-height: 88dvh;
           overflow-y: auto; max-width: 480px; margin: 0 auto; }
.t-grab { width: 44px; height: 4px; border-radius: 2px; background: var(--t-border);
          margin: 0 auto 16px; }

/* ── Onboarding ── */
.t-onb-top { display: flex; align-items: center; justify-content: space-between;
             padding: 16px; }
.t-choice { display: block; width: 100%; text-align: left; background: var(--t-wash);
            border: none; border-radius: 14px; padding: 16px; margin-bottom: 12px;
            color: var(--t-ink); font: inherit; cursor: pointer; position: relative; }
.t-choice b { font-weight: 700; font-size: 16px; display: block; }
.t-choice span { color: var(--t-sub); font-size: 14px; font-weight: 600; }
.t-choice.on { background: var(--t-accent); }
.t-choice.on b, .t-choice.on span { color: var(--t-accent-ink); }
.t-choice.on::after { content: "✓"; position: absolute; right: 16px; top: 16px; font-weight: 900; }
.t-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--t-wash);
          border: none; border-radius: 999px; padding: 12px 18px; color: var(--t-ink);
          font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }
.t-chip.on { background: var(--t-accent); color: var(--t-accent-ink); }

/* ── Chat ── */
.t-chatlog { display: flex; flex-direction: column; gap: 12px; }
.t-msg-u { align-self: flex-end; max-width: 82%; background: var(--t-accent);
           color: var(--t-accent-ink); border-radius: 18px 18px 4px 18px;
           padding: 12px 16px; font-weight: 600; font-size: 15px; line-height: 22px;
           white-space: pre-wrap; }
.t-msg-a { align-self: flex-start; max-width: 92%; color: var(--t-ink);
           font-weight: 600; font-size: 15.5px; line-height: 24px; white-space: pre-wrap; }
.t-input-row { display: flex; gap: 10px; align-items: flex-end; padding: 12px 16px;
               position: sticky; bottom: 0; background: var(--t-bg); }
.t-input { flex: 1; background: var(--t-wash); border: 1px solid var(--t-border);
           border-radius: 22px; padding: 13px 18px; color: var(--t-ink); font: inherit;
           font-weight: 600; font-size: 15px; resize: none; max-height: 120px; }
.t-input:focus { outline: none; border-color: var(--t-accent); }
[data-theme="dark"] .t-input { border-color: transparent; }
.t-send { width: 44px; height: 44px; border-radius: 50%; border: none;
          background: var(--t-btn-primary); color: var(--t-btn-primary-ink); font-size: 17px;
          cursor: pointer; flex-shrink: 0; }

/* ── Shimmer (loading briefing) ── */
.t-shimmer { height: 12px; border-radius: 6px; background: var(--t-wash);
             margin-bottom: 12px; position: relative; overflow: hidden; }
.t-shimmer::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  animation: tsh 1.4s infinite; }
@keyframes tsh { 100% { transform: translateX(100%); } }

/* ── Utility ── */
.t-hide { display: none !important; }
[x-cloak] { display: none !important; }

/* Traced TunnlAi mark — colored via mask so it follows currentColor/theme */
.t-mark { display: inline-block; width: 30px; height: 19px; background: currentColor;
  -webkit-mask: url("/static/tunnl/mark.svg") no-repeat center / contain;
          mask: url("/static/tunnl/mark.svg") no-repeat center / contain; }

/* ── Landing (TunnlAi/Landing 5950:39 — exact Figma layout) ── */
.t-landing { position: relative; width: 100%; max-width: 480px; margin: 0 auto;
  height: 100dvh; overflow: hidden; background: #2F2F41; color: #fff; }
.t-landing .frame { position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 393px; height: 100%; }
.t-lcard { position: absolute; border-radius: 6px; overflow: hidden; }
.t-lcard img { width: 100%; height: 100%; object-fit: cover; display: block; }
.t-ldark { position: absolute; width: 600px; height: 600px; left: -103px;
  background: radial-gradient(circle, rgba(28,28,29,0) 0%, rgba(28,28,29,.82) 72%);
  pointer-events: none; }
.t-l-logo { position: absolute; left: 50%; top: calc(50% - 132px); transform: translate(-50%, -50%);
  width: 160px; height: 29px; }
.t-l-lockup { position: absolute; left: 50%; top: calc(50% + 196px); transform: translate(-50%, -50%);
  width: 290px; text-align: center; display: flex; flex-direction: column; gap: 12px; }
.t-l-title { font-weight: 900; font-size: 24px; line-height: 32px; letter-spacing: -.02em; color: #fff; }
.t-l-sub { font-weight: 600; font-size: 18px; line-height: 24px; color: #92979E; }
.t-l-btnwrap { position: absolute; left: 50%; top: calc(50% + 318px); transform: translate(-50%, -50%);
  width: 393px; max-width: 100%; padding: 16px; }
.t-l-btn { display: block; width: 100%; background: #fff; color: #2D3459; border: none;
  border-radius: 16px; padding: 12px 24px; font: inherit; font-weight: 700;
  font-size: 18px; line-height: 24px; cursor: pointer; text-align: center; }
.t-l-support { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  padding: 16px 24px 32px; font-weight: 700; font-size: 14px; line-height: 20px; color: #92979E; }

/* ══════════ AUTH (exact Figma: New Sign Up 5989:7988 / New Sign In 5989:13972) ══════════ */
:root {
  --t-hint: #92979E;          /* core/text/text-hint (light) */
  --t-link: #4A63E2;          /* core/text/text-link (light, Figma 5989:5588) */
  --t-btn-disabled: #F2F6FC;  /* buttons/disabled (light, Figma 5989:5588) */
  --t-btn-disabled-ink: #C8CDD4; /* core/text/text-disabled (light) */
  --t-err: #D63C3F;           /* border-error / text-destructive */
  --t-focus: #5C73F4;         /* field focus ring (infographics/performance/general) */
}
[data-theme="dark"] {
  --t-hint: #C8CDD4;          /* core/text/text-hint (dark, per 5989:8008) */
  --t-link: #7E9FE6;          /* core/text/text-link (dark, per 5989:17041) */
  --t-btn-disabled: #232B36;  /* buttons/disabled (dark, per 5989:8010) */
  --t-btn-disabled-ink: #92979E;
  --t-err: #D63C3F;
  --t-focus: #5C73F4;
}
.t-auth { position: relative; min-height: 100dvh; background: var(--t-bg); overflow: hidden; }
.t-auth-contents { position: relative; margin: 0 auto; max-width: 393px; padding: 64px 16px 120px;
  display: flex; flex-direction: column; gap: 40px; align-items: center; }
.t-auth-head { display: flex; flex-direction: column; gap: 16px; align-items: center; width: 100%; }
.t-auth-mark { width: 56px; height: 56px; }
.t-auth-title { font-weight: 700; font-size: 28px; line-height: 36px; letter-spacing: -1.12px;
  color: var(--t-ink); text-align: center; width: 100%; }
.t-auth-sub { font-weight: 600; font-size: 18px; line-height: 24px; color: var(--t-sub);
  text-align: center; width: 100%; padding: 0 16px; }
.t-auth-body { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.t-afield { display: flex; gap: 8px; align-items: center; width: 100%; padding: 12px;
  background: var(--t-wash); border: 1px solid var(--t-border); border-radius: 16px; }
.t-afield input { flex: 1; min-width: 0; background: none; border: none; outline: none;
  font: inherit; font-weight: 500; font-size: 16px; line-height: 24px; color: var(--t-ink); }
.t-afield input::placeholder { color: var(--t-hint); }
.t-afield.err { border: 2px solid var(--t-err); background: var(--t-bg); padding: 11px; }
.t-afield.err input { color: var(--t-err); }
.t-afield.err::after { content: ""; width: 20px; height: 20px; flex: none; transform: scaleY(-1);
  background: #A91316; -webkit-mask: url(/static/tunnl/auth/field_error.svg) center/contain no-repeat;
  mask: url(/static/tunnl/auth/field_error.svg) center/contain no-repeat; }
.t-afield:focus-within:not(.err) { border: 2px solid var(--t-focus); background: var(--t-bg); padding: 11px; }
.t-aerr { font-weight: 700; font-size: 14px; line-height: 20px; color: var(--t-err); }
.t-abtn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 12px 24px; border: none; border-radius: 16px; background: var(--t-btn-primary);
  color: var(--t-btn-primary-ink); font: inherit; font-weight: 700; font-size: 18px;
  line-height: 24px; cursor: pointer; }
.t-abtn:disabled { background: var(--t-btn-disabled); color: var(--t-btn-disabled-ink); cursor: default; }
.t-aor { display: flex; gap: 12px; align-items: center; width: 100%; padding: 16px 0; }
.t-aor::before, .t-aor::after { content: ""; flex: 1; height: 1px; background: var(--t-border); }
.t-aor span { font-weight: 900; font-size: 14px; line-height: 20px; color: var(--t-sub); }
.t-asocial { display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 12px 24px; background: var(--t-wash); border: 1px solid var(--t-border);
  border-radius: 16px; font: inherit; cursor: pointer; }
[data-theme="dark"] .t-asocial { background: var(--t-btn-secondary); }
.t-asocial .ico { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.t-asocial .lbl { font-weight: 700; font-size: 18px; line-height: 24px; color: var(--t-ink); }
.t-asocial .bal { width: 24px; height: 24px; }
.t-atert { display: block; width: 100%; padding: 12px 24px; background: none; border: none;
  border-radius: 12px; font: inherit; font-weight: 700; font-size: 18px; line-height: 24px;
  color: var(--t-ink); text-align: center; cursor: pointer; }
.t-alegal { font-weight: 600; font-size: 14px; line-height: 20px; color: var(--t-sub);
  text-align: center; max-width: 268px; margin: 0 auto; }
.t-ahelp { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%;
  max-width: 393px; display: flex; gap: 12px; align-items: center; justify-content: center;
  padding: 24px 24px 32px; font-weight: 700; font-size: 14px; line-height: 20px;
  background: linear-gradient(to top, var(--t-bg) 60%, transparent); }
.t-ahelp .q { color: var(--t-ink); } .t-ahelp a { color: var(--t-link); text-decoration: none; }
.t-areqs { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 4px 4px 0; }
.t-areqs .hd { font-weight: 700; font-size: 14px; line-height: 20px; color: var(--t-ink); }
.t-areq { display: flex; gap: 4px; align-items: center; font-weight: 600; font-size: 12px;
  line-height: 18px; color: var(--t-ink); }
.t-areq .dot { width: 24px; height: 24px; flex: none; background: currentColor;
  -webkit-mask: url(/static/tunnl/auth/check_unmet.svg) center/12px 12px no-repeat;
  mask: url(/static/tunnl/auth/check_unmet.svg) center/12px 12px no-repeat; }
.t-areq.ok .dot {
  -webkit-mask: url(/static/tunnl/auth/check_met.svg) center/15px 11px no-repeat;
  mask: url(/static/tunnl/auth/check_met.svg) center/15px 11px no-repeat; }
.t-aforgot { font-weight: 700; font-size: 18px; line-height: 24px; color: var(--t-ink);
  background: none; border: none; border-radius: 12px; font-family: inherit; cursor: pointer;
  padding: 12px 24px; }
.t-asent-ico { position: relative; width: 56px; height: 56px; border-radius: 50%;
  background: #2C4A73; display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.t-asent-ico::before { content: ""; position: absolute; width: 61px; height: 61px; left: 8px;
  top: 8px; border-radius: 50%; background: #4DAC80; filter: blur(23px); z-index: -1; }
.t-asent-ico::after { content: ""; width: 18px; height: 11px; border-left: 4px solid #fff;
  border-bottom: 4px solid #fff; border-radius: 2px; transform: rotate(-45deg) translate(1px, -3px); }

/* ══════════ ONBOARDING (exact Figma: Refinements Onboarding 5989:53472, light frames 66243-66677) ══════════ */
:root { --t-slider-fill: #1B6EC2; --t-sel-sub: #92979E; }
[data-theme="dark"] { --t-slider-fill: #7FA4E8; --t-sel-sub: rgba(28,28,29,.62); }
.t-ob { position: relative; min-height: 100dvh; background: var(--t-bg); }
.t-ob-head { position: sticky; top: 0; z-index: 5; background: var(--t-bg); padding: 16px;
  display: flex; align-items: center; justify-content: space-between; height: 80px; }
.t-ob-back { width: 48px; height: 48px; border-radius: 24px; border: none; cursor: pointer;
  background: var(--t-wash); display: flex; align-items: center; justify-content: center; }
.t-ob-back::after { content: ""; width: 16px; height: 13px; background: var(--t-ink);
  -webkit-mask: url(/static/tunnl/auth/back_arrow.svg) center/contain no-repeat;
  mask: url(/static/tunnl/auth/back_arrow.svg) center/contain no-repeat; }
.t-ob-step { font-size: 18px; line-height: 24px; color: var(--t-sub); font-weight: 600;
  position: absolute; left: 50%; transform: translateX(-50%); }
.t-ob-step b { font-weight: 900; color: var(--t-ink); }
.t-ob-skip { background: none; border: none; font: inherit; font-weight: 700; font-size: 18px;
  line-height: 24px; color: var(--t-sub); cursor: pointer; padding: 4px 0; }
.t-ob-body { max-width: 393px; margin: 0 auto; padding: 40px 16px 128px; }
.t-ob-title { font-weight: 700; font-size: 28px; line-height: 36px; letter-spacing: -1.12px;
  color: var(--t-ink); text-align: center; padding: 0 24px; }
.t-ob-sub { font-weight: 600; font-size: 18px; line-height: 24px; color: var(--t-sub);
  text-align: center; padding: 8px 24px 12px; }
.t-ob-chips { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; padding: 16px 0; }
.t-ob-chip { display: flex; align-items: center; gap: 12px; padding: 12px 24px; border: none;
  border-radius: 32px; background: var(--t-wash); color: var(--t-ink); font: inherit;
  font-weight: 700; font-size: 18px; line-height: 24px; cursor: pointer; }
.t-ob-chip.on { background: var(--t-btn-primary); color: var(--t-btn-primary-ink);
  box-shadow: 0 4px 6px rgba(0,0,0,.05); }
.t-ob-rows { display: flex; flex-direction: column; gap: 12px; padding: 16px 0; }
.t-ob-row { display: flex; flex-direction: column; gap: 4px; text-align: left; border: none;
  border-radius: 16px; background: var(--t-wash); padding: 8px 12px 8px 16px; cursor: pointer;
  font: inherit; }
.t-ob-row .tt { display: flex; align-items: center; padding-top: 4px; font-weight: 700;
  font-size: 18px; line-height: 24px; color: var(--t-ink); }
.t-ob-row .tt .ck { display: none; width: 24px; height: 24px; margin-left: auto;
  background: var(--t-btn-primary-ink);
  -webkit-mask: url(/static/tunnl/auth/check_met.svg) center/15px 11px no-repeat;
  mask: url(/static/tunnl/auth/check_met.svg) center/15px 11px no-repeat; }
.t-ob-row .dd { font-weight: 600; font-size: 16px; line-height: 24px; color: var(--t-sub);
  padding: 0 40px 8px 0; }
.t-ob-row.on { background: var(--t-btn-primary); }
.t-ob-row.on .tt { color: var(--t-btn-primary-ink); }
.t-ob-row.on .tt .ck { display: block; }
.t-ob-row.on .dd { color: var(--t-sel-sub); }
.t-ob-bigval { font-weight: 900; font-size: 28px; line-height: 36px; letter-spacing: -1.12px;
  color: var(--t-ink); text-align: center; padding: 16px 0 0; }
.t-ob-slider { padding: 16px 0; display: flex; flex-direction: column; gap: 12px; }
.t-ob-track { position: relative; height: 40px; touch-action: none; }
.t-ob-track .rail { position: absolute; top: 16px; left: 0; right: 0; height: 8px;
  border-radius: 4px; background: var(--t-wash); }
.t-ob-track .fill { position: absolute; top: 16px; height: 8px; background: var(--t-slider-fill); }
.t-ob-track .knob { position: absolute; top: 0; width: 40px; height: 40px; border-radius: 50%;
  background: var(--t-bg); border: 8px solid var(--t-btn-primary);
  box-shadow: 0 4px 12px rgba(0,0,0,.05); box-sizing: border-box; cursor: grab; }
.t-ob-minmax { display: flex; justify-content: space-between; font-weight: 700; font-size: 14px;
  line-height: 20px; color: var(--t-sub); }
.t-ob-prefer { align-self: center; margin: 0 auto; display: block; }
.t-ob-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; background: var(--t-bg);
  border-top: 1px solid var(--t-border); padding: 16px 16px 32px; }
.t-ob-cta > div { max-width: 361px; margin: 0 auto; }
.t-ob-next { display: block; width: 100%; padding: 12px 24px; border: none; border-radius: 16px;
  background: var(--t-btn-primary); color: var(--t-btn-primary-ink); font: inherit;
  font-weight: 700; font-size: 18px; line-height: 24px; cursor: pointer; }