:root { color-scheme: light dark; }

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #141113; --card: #211C20; --card2: #2C262A; --ink: #F6F2F4; --ink2: rgba(235,228,236,.7); --ink3: rgba(235,228,236,.44);
    --line: rgba(255,255,255,.08); --pink: #FF375F; --deep: #FF7393; --pinkSoft: #3D1A26; --blue: #172440; --blueInk: #9CC0FF;
    --shadow: 0 18px 40px rgba(0,0,0,.45), 0 3px 10px rgba(0,0,0,.28);
    --rim: inset 0 0 0 1px rgba(255,255,255,.07);
  }
  body { background-image: radial-gradient(rgba(255,255,255,.055) 1.1px, transparent 1.4px); }
  ::selection { background: rgba(255,55,95,.4); }

  .wordmark img:not(:last-child), .intro-word img:not(:last-child) { filter: invert(1) brightness(.97); }
  .friend img { filter: invert(.13) drop-shadow(0 0 1px rgba(255,255,255,.28)); }
  .dr .friend img { filter: none; }

  .btn.white { background: var(--card2); color: var(--ink); box-shadow: var(--shadow), var(--rim); }
  .btn.pink { box-shadow: 0 10px 24px rgba(255,55,95,.28), inset 0 1px 0 rgba(255,255,255,.2); }

  .nav-in { background: rgba(33,28,32,.72); box-shadow: 0 8px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.08); }
  .nav.scrolled .nav-in { box-shadow: 0 12px 40px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.08); }
  .nav .links a:hover { background: rgba(255,255,255,.06); }
  .nav .links a.on { background: rgba(255,255,255,.09); }
  .snd:hover { background: rgba(255,255,255,.08); }
  .nav-cta.spot { background: var(--card2); box-shadow: inset 0 0 0 2px rgba(255,55,95,.45), 0 6px 16px rgba(255,55,95,.12); }
  .nav-cta.spot em { color: #30D158; }

  .eyebrow { background: var(--card); box-shadow: var(--shadow), var(--rim); }
  .wl { background: var(--card); box-shadow: 0 20px 50px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.08); }
  .wl:focus-within { box-shadow: 0 0 0 4px rgba(255,55,95,.2), 0 20px 50px rgba(0,0,0,.45), inset 0 0 0 2px var(--pink); }
  .wl.err { box-shadow: 0 0 0 4px rgba(255,69,58,.18), inset 0 0 0 2px #FF453A; }
  .wl-msg { color: #FF6961; }
  .av { background: var(--card2); box-shadow: 0 0 0 3px var(--paper), 0 4px 10px rgba(0,0,0,.3); }
  .store { box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
  .also { background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }

  .phone { box-shadow: 0 50px 90px rgba(0,0,0,.55), 0 14px 30px rgba(0,0,0,.35), inset 0 0 0 2px #4a4a50; }
  .bubble { background: var(--card2); box-shadow: 0 24px 50px rgba(0,0,0,.45), var(--rim); }
  .q:after { background: var(--card2); }
  .redact { background: rgba(255,255,255,.2); }
  .pback { filter: brightness(.86); box-shadow: 0 22px 44px rgba(0,0,0,.45), 0 4px 10px rgba(0,0,0,.25), inset 0 0 0 10px #F7F5F0; }
  .hush { background: rgba(44,38,42,.86); box-shadow: 0 20px 40px rgba(0,0,0,.45), var(--rim); }
  .say, .say i { background: var(--card2); }
  .say { box-shadow: 0 16px 34px rgba(0,0,0,.45); }
  .tagname { background: var(--card2); color: var(--ink2); box-shadow: 0 8px 18px rgba(0,0,0,.35); }

  .ticker { background: #1A1619; }
  .qchip { background: var(--card); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
  .qchip .qi { color: #FF7393; }

  .clue { background: var(--card); box-shadow: var(--shadow), var(--rim); }
  .clue:not(.locked):hover { box-shadow: 0 30px 60px rgba(0,0,0,.55), var(--rim); }
  .clue.locked { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.14); }
  .clue.locked .no { background: rgba(255,255,255,.08); }
  .clue .ghost i { background: rgba(255,255,255,.3); }
  .clue .lockbox .lk, .cd span { background: var(--card2); box-shadow: 0 4px 12px rgba(0,0,0,.35), var(--rim); }
  .btn.on-state { box-shadow: inset 0 0 0 2px rgba(255,55,95,.4); }

  .meet-card { background: linear-gradient(170deg, #3A1A25, #1F1519 70%); box-shadow: inset 0 0 0 1px rgba(255,55,95,.16); }

  .plat { background: var(--card); box-shadow: var(--shadow), var(--rim); }
  .plat:hover { box-shadow: 0 30px 60px rgba(0,0,0,.55), var(--rim); }
  .plat.first { background: linear-gradient(160deg, #3A1A25, #2A1419); box-shadow: 0 20px 50px rgba(255,55,95,.12), inset 0 0 0 2px rgba(255,55,95,.25); }
  .plat .dev { background: #1A1619 !important; }
  .plat .dev .abs[style*="background:#fff"] { background: #121012 !important; }
  .plat .dev .abs[style*="6px #222"] { box-shadow: 0 0 0 6px #3A3A3E !important; }
  .plat .dev .abs[style*="5px #222"] { box-shadow: 0 0 0 5px #3A3A3E, 0 14px 30px rgba(0,0,0,.4) !important; }
  .plat .dev .abs[style*="left:18px"] { box-shadow: 0 10px 26px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.1) !important; }
  .plat .dev [style*="#F2F0EC"] { background: #2A262A !important; }
  .plat .dev [style*="#F2F0EC"] [style*="background:#fff"] { background: #3A3539 !important; }
  .plat .dev [style*="#cfcfd4"] { background: #4A4A50 !important; }
  .plat .badge { background: rgba(255,255,255,.08); }
  .notify { background: rgba(255,255,255,.07); }
  .notify:hover { background: rgba(255,255,255,.11); }
  .notify.on { background: var(--pinkSoft); }

  .qa { background: var(--card); box-shadow: 0 6px 20px rgba(0,0,0,.3), var(--rim); }
  .qa button i { background: rgba(255,255,255,.08); }

  .follow a { background: var(--card); box-shadow: var(--shadow), var(--rim); }
  .foot { background: #1A1619; }
  .soc { background: rgba(255,255,255,.07); }

  .toast { background: #2C2C2E; box-shadow: 0 20px 40px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.08); }
  .sheet-scrim { background: rgba(0,0,0,.55); }
  .jc { background: var(--card); box-shadow: 0 40px 100px rgba(0,0,0,.6), var(--rim); }
  .jc-top { background: linear-gradient(180deg, #3D1A26, #211C20) !important; }
  .jc-top.blue { background: linear-gradient(180deg, #172440, #211C20) !important; }
  .xbtn { background: rgba(255,255,255,.12); }
  .ticket:before, .ticket:after { background: var(--card); }
  .solo .ticket:before, .solo .ticket:after { background: var(--paper); }
  .jc-sec h4 i { background: rgba(255,255,255,.08); }
  .jc-sec h4 .saved { color: #30D158; background: rgba(48,209,88,.16); }
  .ref { background: var(--paper); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
  .ref[style*="background:#fff"] { background: var(--card) !important; box-shadow: var(--shadow), var(--rim) !important; }
  .share a, .share button { background: rgba(255,255,255,.06); }
  .share a:hover, .share button:hover { background: rgba(255,255,255,.1); }
  .share i[style*="#111"] { background: #3A3A3C !important; }
  .pick { background: var(--card2); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.1); }
  .pick.on { background: var(--pinkSoft); box-shadow: inset 0 0 0 2px var(--pink); }
  .grab:before { background: rgba(255,255,255,.25); }

  .tabs { background: rgba(255,255,255,.07); }
  .tabs a.on { background: var(--card2); box-shadow: 0 2px 8px rgba(0,0,0,.35); }
  .toc, .doc { background: var(--card); box-shadow: var(--shadow), var(--rim); }
  .tldr { background: linear-gradient(135deg, #3A1A25, #2A1E1A); }
  .doc p, .doc li { color: rgba(235,228,236,.8); }

  .intro-ov { background-image: radial-gradient(rgba(255,255,255,.055) 1.1px, transparent 1.4px); }
  .intro-skip { background: rgba(255,255,255,.1); box-shadow: var(--shadow), var(--rim); }
  .intro-sign .card { background: var(--card); box-shadow: 0 30px 60px rgba(0,0,0,.5), var(--rim); }
  .intro-sign .card:before { box-shadow: inset 0 2px 3px rgba(0,0,0,.6); }
  .intro-sign .string { background: linear-gradient(#6a625a, #4c4540); }

  .dr { box-shadow: 0 40px 80px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.06); }

  .hunt-pill, .live-pill { background: rgba(44,38,42,.86); box-shadow: 0 14px 34px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.08); }
  .hunt-pill .hp-dots i { background: rgba(255,255,255,.18); }
  .hunt-pill.done { background: linear-gradient(135deg, #FF2D55, #FF6A8E); }
  .secret-card { background: #2C2430; box-shadow: 0 16px 34px rgba(0,0,0,.4), var(--rim); }

  .qz-card { background: var(--card); box-shadow: 0 30px 70px rgba(0,0,0,.5), var(--rim); }
  .qz-dots i { background: rgba(255,255,255,.14); }
  .qz-opt { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.08); }
  .qz-opt:hover { background: var(--card2); box-shadow: 0 12px 28px rgba(0,0,0,.4), inset 0 0 0 1.5px rgba(255,255,255,.1); }
  .qz-opt.on { background: var(--pinkSoft); box-shadow: inset 0 0 0 2.5px var(--pink); }
  .qz-result { background: linear-gradient(160deg, color-mix(in srgb, var(--c) 30%, #211C20), #211C20 75%) !important; }
  .qz-tr span { background: rgba(255,255,255,.08); color: color-mix(in srgb, var(--c) 45%, #fff); }
  .qz-result .qz-love { color: color-mix(in srgb, var(--c) 45%, #fff); }
  .qz-result h3 { color: color-mix(in srgb, var(--c) 62%, #fff) !important; }

  .seal-count { background: var(--card); box-shadow: var(--shadow), var(--rim); }
  .sl-paper { background-color: #2A2428; box-shadow: 0 24px 50px rgba(0,0,0,.5), var(--rim); background-image: repeating-linear-gradient(transparent 0 37px, rgba(120,170,255,.2) 37px 38px); }
  .sl-paper:before { background: rgba(255,55,95,.35); }
  .sl-paper textarea, .sl-written { color: #F3EEF1; }
  .sl-paper textarea::placeholder { color: rgba(235,228,236,.32); }
  .sl-env .front { box-shadow: 0 20px 40px rgba(0,0,0,.4); }

  .guess-card { background: linear-gradient(170deg, #2A2328, #211C20); box-shadow: 0 30px 70px rgba(0,0,0,.5), var(--rim); }
  .guess-card form { background: var(--paper); box-shadow: 0 16px 40px rgba(0,0,0,.35), inset 0 0 0 1.5px rgba(255,255,255,.09); }
  .guess-card form:focus-within { box-shadow: 0 0 0 4px rgba(255,55,95,.2), inset 0 0 0 2px var(--pink); }
  .guess-card input { color: var(--ink); }
  .guess-card input::placeholder { color: var(--ink3); }
  .gs-say { background: #F6F2F4; color: #111; }
  .gs-prize { background: rgba(255,194,26,.14); color: #FFD36B; }

  .jar-body { background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 8px rgba(255,255,255,.14), inset 0 0 0 9px rgba(255,255,255,.06), 0 30px 60px rgba(0,0,0,.45); }
  .jar-body:after { background: rgba(255,255,255,.12); }
  .jar-label { background: var(--card2); box-shadow: 0 10px 24px rgba(0,0,0,.4), var(--rim); }
  .jar-pct { background: var(--pink); color: #fff; box-shadow: 0 10px 24px rgba(255,55,95,.3); }
  .rung { background: var(--card); box-shadow: var(--shadow), var(--rim); }
  .rung .re { background: var(--card2); }
  .rung .bar { background: rgba(255,255,255,.08); }
  .rung.got { background: linear-gradient(135deg, #3A1A25, #2E161D); }
  .ladder.compact .rung { box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
  .lad-me { background: var(--card2); box-shadow: var(--rim); }

  .ex-img { box-shadow: 0 12px 28px rgba(0,0,0,.45); }
  .shimmer { background: linear-gradient(110deg, #2A2428 30%, #3A3438 50%, #2A2428 70%) 0 0 / 300% 100%; }
}

@media (prefers-color-scheme: dark) and (max-width: 760px) {
  .nav .menu { background: rgba(255,255,255,.08); }
  .mmenu { background: rgba(33,28,32,.96); box-shadow: 0 20px 50px rgba(0,0,0,.5), var(--rim); }
  .mmenu a:active, .mmenu button:active { background: rgba(255,255,255,.07); }
  .dock { background: rgba(33,28,32,.78); box-shadow: 0 16px 40px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.08); }
}