@font-face{font-family:"Instrument Sans";src:url("/assets/fonts/InstrumentSans.woff2") format("woff2");font-style:normal;font-weight:400 700;font-display:swap}

  :root { --t-bg:#0a0e16;--t-bg2:#0a0e15;--t-card:#10151f;--t-head:#0d121b;--t-input:#0b1019;--t-sunk:#0b0f17;--t-sunk2:#0f141d;--t-deep:#04060a;--t-deep2:#05070b;--t-blk:#0b0b0b;--t-blk2:#0a0a0a;--t-blk3:#1b1c20;--t-blk4:#1c1919;--t-r1:#141a26;--t-r2:#1a2130;--t-r3:#1a2231;--t-r4:#18202d;--t-r5:#151b27;--t-r6:#1c2330;--t-r7:#151c28;--t-r8:#1d2534;--t-r9:#2a3343;--t-r10:#3a4558;--t-fg0:#f5f5f7;--t-fg:#f0f0f2;--t-fg2:#ebebed;--t-fg3:#dcdcde;--t-fg4:#d6d6da;--t-fg5:#c9c9ce;--t-mut:#bfbfc4;--t-mut2:#a5a5ab;--t-mut2b:#a4a4ab;--t-mut3:#a1a1a8;--t-mut4:#9a9aa2;--t-mut4b:#9a9aa1;--t-mut5:#95959c;--t-sub:#8b8b92;--t-sub2:#828289;--t-sub3:#7c7c83;--t-sub4:#727279;--t-dim:#6a6a72;--t-dim2:#63636a;--t-dim3:#55555c;--t-fg6:#c4c4cb;--t-wfg:#ffffff;--t-logo:#f0f0f2;--t-logo-fg:#0a0e16;--t-link:#5a8dee;--t-pos:#30d158;--t-neg:#ff453a;--t-pos-rgb:48,209,88;--t-neg-rgb:255,69,58;--t-new:rgba(255,107,90,0.7);--h121823:#121823;--h252e40:#252e40;--h121824:#121824;--h0a0b0d:#0a0b0d;--h0b101a:#0b101a;--h101622:#101622;--h141a25:#141a25;--h100d0e:#100d0e;--h262e3d:#262e3d;--h070a11:#070a11;--h121925:#121925;--h080b12:#080b12;--h1c212b:#1c212b;--h161d2a:#161d2a;--h08090e:#08090e;--h121926:#121926;--h04130d:#04130d;--h131926:#131926;--h08080a:#08080a;--h0f2a1c:#0f2a1c;--h040605:#040605;--h020302:#020302;--h0a1a13:#0a1a13;--h06110c:#06110c;--h0f0a1c:#0f0a1c;--h170f2c:#170f2c;--h1a0504:#1a0504;--h232a38:#232a38;--h121722:#121722;--h070a10:#070a10;--h111215:#111215;--h252e3e:#252e3e;--h1b2230:#1b2230;--h060a13:#060a13;--h12080b:#12080b;--h041320:#041320;--h02070f:#02070f;--h1b0f2a:#1b0f2a;--h0c0714:#0c0714;--h0d1320:#0d1320;--h05070c:#05070c;--h10161f:#10161f;--h070a0f:#070a0f;--h030407:#030407;--h262b34:#262b34;--h171a20:#171a20;--h0b0d11:#0b0d11;--h2a3446:#2a3446;--h0f1420:#0f1420;--h4b5363:#4b5363;--h39414f:#39414f;--h30353f:#30353f;--h23272f:#23272f;--h0b0d10:#0b0d10;--h1c2027:#1c2027;--h15181d:#15181d;--h1e2635:#1e2635;--h0f131b:#0f131b;--h1a0a0d:#1a0a0d;--h0c121b:#0c121b;--h131a27:#131a27;--h0f1520:#0f1520;--h0b0e14:#0b0e14;--h1c2434:#1c2434;--h1a2232:#1a2232;--h20252e:#20252e;--h1c212a:#1c212a;--h161b24:#161b24;--h161b25:#161b25;--h454b57:#454b57;--h20293a:#20293a;--h1a2230:#1a2230;--h242b39:#242b39;--h171e2a:#171e2a;--h0d141f:#0d141f;--h0c111a:#0c111a;--h4c5569:#4c5569;--r24-31-45:24,31,45;--r40-50-70:40,50,70;--r20-27-40:20,27,40;--r22-28-40:22,28,40;--r118-118-128:118,118,128;--r11-16-25:11,16,25;--r13-18-28:13,18,28;--r245-245-247:245,245,247;--r161-161-168:161,161,168;--r4-3-3:4,3,3;--r16-21-31:16,21,31;--r10-14-21:10,14,21;--r17-23-35:17,23,35;--r32-40-56:32,40,56;--r150-150-158:150,150,158;--r128-128-136:128,128,136;--r36-40-50:36,40,50;--r20-30-50:20,30,50;--r22-27-37:22,27,37;--r244-241-239:244,241,239;--r160-151-147:160,151,147;--r165-165-171:165,165,171;--r235-235-237:235,235,237;--r13-17-26:13,17,26;--r28-34-46:28,34,46;--r207-201-197:207,201,197;--r14-19-30:14,19,30;--r2-12-28:2,12,28;--r22-29-42:22,29,42;--g6b6b72:#6b6b72;--gf5f4f1:#f5f4f1;--g8a8a85:#8a8a85;--ga9a7a1:#a9a7a1;--gd4d7d9:#d4d7d9;--g6b6b66:#6b6b66;--gc8c8ce:#c8c8ce;--g5f5f66:#5f5f66;--ga8a8b0:#a8a8b0;--ge6e6e9:#e6e6e9;--g98989f:#98989f;--g8e8e93:#8e8e93;--g1c1c1e:#1c1c1e;--ge4e4e7:#e4e4e7;--g6a6360:#6a6360;--gdcdce0:#dcdce0;--g6d6d74:#6d6d74;--gb8b1ad:#b8b1ad;--gd4d4d8:#d4d4d8;--gf6f0dd:#f6f0dd;--gececee:#ececee;--g3e3e45:#3e3e45;--g4a4a51:#4a4a51;--g4a4a52:#4a4a52;--gc9ced6:#c9ced6;--g7d8594:#7d8594;--gaab1bd:#aab1bd;--ge6e9ee:#e6e9ee;--g8b93a0:#8b93a0;--g9aa2ae:#9aa2ae;--gc2c0ba:#c2c0ba;--gfbfbfb:#fbfbfb;--gc7cbcd:#c7cbcd;--g1a1a1d:#1a1a1d;--g0e0e10:#0e0e10;--gf4f4f5:#f4f4f5;--g232327:#232327;--geeebe4:#eeebe4;--g111111:#111111;--gc9c4b8:#c9c4b8;--gdcffe8:#dcffe8;--g6d7078:#6d7078;--gc9ccd2:#c9ccd2;--g7f828a:#7f828a;--gdcdee3:#dcdee3;--g5c5f66:#5c5f66;--g17181b:#17181b;--g505258:#505258;--geaf6ef:#eaf6ef;--gefe6d4:#efe6d4;--g151515:#151515;--g232323:#232323;--g1b1b1b:#1b1b1b;--g1d1d1d:#1d1d1d;--g1a1a1a:#1a1a1a;--g262626:#262626;--g131313:#131313;--gf2f2f2:#f2f2f2;--g040404:#040404;--gfff1ea:#fff1ea;--gf6f6f8:#f6f6f8;--gc3c6cd:#c3c6cd;--geceef2:#eceef2;--ga3a7b0:#a3a7b0;--gf4f4f6:#f4f4f6;--g6a6a71:#6a6a71;--gf2f2f4:#f2f2f4;--gd9d9de:#d9d9de;--gc9c9cf:#c9c9cf;--g2a2b30:#2a2b30;--g44454b:#44454b;--g34353a:#34353a;--g55565c:#55565c;--g0b0b0c:#0b0b0c;--g3a3a40:#3a3a40;--g48484e:#48484e;--gf6efe9:#f6efe9;--gf7f1e6:#f7f1e6;--ge9dfcf:#e9dfcf;--ge6e9ef:#e6e9ef;--ga5acb8:#a5acb8;--gc3c9d4:#c3c9d4;--ge6e8ea:#e6e8ea;--g010101:#010101;--g97968f:#97968f;--gcfd3d5:#cfd3d5;--gdfe3ea:#dfe3ea;--g6b7280:#6b7280;--g141518:#141518;--g131417:#131417;--g5a5a62:#5a5a62;--gd8d8de:#d8d8de;--g6b7080:#6b7080;--ge9d3df:#e9d3df;--g121110:#121110;--g5a606c:#5a606c;--gcfcfd3:#cfcfd3;--ga7a09c:#a7a09c;--g9a9390:#9a9390;--gc7c7cc:#c7c7cc;--g6e6a68:#6e6a68;--g0b0a0a:#0b0a0a;--g0e0c0c:#0e0c0c;--g4f4f56:#4f4f56;--t-ink:255,255,255;--t-shd:0,0,0;--t-headrgb:13,18,27;--t-bgrgb:10,14,22;--t-fgrgb:240,240,242;--t-scrim:4,6,10 }

  html, body { margin: 0; padding: 0; height: 100%; background: light-dark(#f5f7fb,#0a0e16); overflow: hidden; }
  * { box-sizing: border-box; }
  [data-hide-sb] { scrollbar-width: none; -ms-overflow-style: none; }
  [data-hide-sb]::-webkit-scrollbar { width: 0; height: 0; display: none; }
  ::selection { background: light-dark(rgba(28,31,36,0.2),rgba(255,255,255,0.2)); }
  [data-side-sb] { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.22) rgba(255,255,255,0.03); }
  [data-side-sb]::-webkit-scrollbar { width: 8px; }
  [data-side-sb]::-webkit-scrollbar-track { background: light-dark(rgba(28,31,36,0.03),rgba(255,255,255,0.03)); border-radius:4px; }
  [data-side-sb]::-webkit-scrollbar-thumb { background: light-dark(rgba(28,31,36,0.2),rgba(255,255,255,0.2)); border-radius:4px; }
  [data-side-sb]::-webkit-scrollbar-thumb:hover { background: light-dark(rgba(28,31,36,0.26),rgba(255,255,255,0.26)); }
  a { color: light-dark(#17202e,#f0f0f2); text-decoration: none; }
  a:hover { color: light-dark(rgb(54,57,62),#95959c); }
  @property --sla { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
  @keyframes sl-ai-spin { to { --sla: 360deg; } }
  @keyframes sl-blob { 0%, 100% { border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%; transform: rotate(0deg) scale(1); } 33% { border-radius: 58% 42% 45% 55% / 55% 58% 42% 45%; transform: rotate(10deg) scale(1.04); } 66% { border-radius: 47% 53% 60% 40% / 42% 50% 50% 58%; transform: rotate(-8deg) scale(0.97); } }
  @keyframes sl-blob-swirl { to { transform: rotate(360deg); } }
  @keyframes sl-blob-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
  [data-wlm-sb]::-webkit-scrollbar { width: 10px; }
  [data-wlm-sb]::-webkit-scrollbar-track { background: transparent; margin: 6px 0; }
  [data-wlm-sb]::-webkit-scrollbar-thumb { background: light-dark(rgb(222,225,230),#2a3343); border-radius: 999px; border: 3px solid light-dark(rgb(242,245,250),#0f141d); }
  [data-wlm-sb]::-webkit-scrollbar-thumb:hover { background: light-dark(rgb(211,214,219),#3a4558); }
  @property --slg { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
  @keyframes sl-glow-spin { to { --slg: 360deg; } }
  @keyframes sl-fade-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes sl-sum-in { from { opacity: 0; transform: scale(.94) translateY(14px); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
  @keyframes sl-sec-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @keyframes sl-word-in { from { opacity: 0; filter: blur(6px); transform: translateY(3px); } to { opacity: 1; filter: none; transform: none; } }
  @keyframes sl-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
  @keyframes sl-sum-draw { to { stroke-dashoffset: 0; } }
  @keyframes sl-sum-draw2 { to { stroke-dashoffset: 0; } }
  @keyframes sl-fade-in2 { from { opacity: 0; } to { opacity: 1; } }
  @keyframes sl-grok-in { 0% { opacity: 0; filter: blur(10px); color: light-dark(rgb(28,31,36),#ffffff); text-shadow: 0 0 14px rgba(255,255,255,0.7); transform: translateY(2px); } 35% { opacity: 1; filter: blur(0); color: light-dark(rgb(28,31,36),#ffffff); text-shadow: 0 0 10px rgba(255,255,255,0.35); transform: none; } 100% { opacity: 1; filter: none; color: light-dark(rgb(43,46,51),#c4c4cb); text-shadow: none; transform: none; } }
  @keyframes sl-grok-dot { 0%, 100% { transform: scale(.55); opacity: .45; } 50% { transform: scale(1); opacity: 1; } }
  @keyframes sl-rd-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes sl-menu-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
  @keyframes sl-shock { from { transform: scale(0); opacity: 1; } to { transform: scale(14); opacity: 0; } }
  @keyframes sl-flash { 0% { transform: scale(0); opacity: 1; } 40% { opacity: .9; } 100% { transform: scale(18); opacity: 0; } }
  @keyframes sl-cf { 0% { transform: translate(-50%,0) rotate(0); opacity: 1; } 22% { transform: translate(calc(-50% + var(--x1)), var(--y1)) rotate(calc(var(--r) * .3)); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(calc(-50% + var(--x2)), var(--y2)) rotate(var(--r)); opacity: 0; } }
  @keyframes sl-ob-in { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } }
  @keyframes sl-stk { from { transform: rotate(9deg) scale(.4); opacity: 0; } to { transform: rotate(9deg); opacity: 1; } }
  @keyframes sl-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes sl-spin { to { transform: rotate(360deg); } }
  @keyframes sl-upd-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
  @keyframes sl-hub-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @keyframes sl-hub-pop { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
  @keyframes sl-shot-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
  @keyframes sl-load { 0% { transform: translateX(-100%) scaleX(.6); } 50% { transform: translateX(60%) scaleX(1); } 100% { transform: translateX(260%) scaleX(.6); } }
  @keyframes sl-ai-breathe { 0%, 100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.18); opacity: .9; } }
  input::placeholder { color: var(--ph, #6b6b72); opacity: 1; }

.scp0:hover{background:light-dark(rgba(28,31,36,0.07),rgba(255,255,255,0.07)) !important}
.scp1:hover{filter:brightness(1.05) !important}
.scp2:hover{color:light-dark(rgb(28,31,36),#ffffff) !important}
.scp3:hover{background:light-dark(rgb(28,31,36),#ffffff) !important}
.scp4:hover{background:light-dark(rgba(28,31,36,0.05),rgba(255,255,255,0.05)) !important;color:light-dark(#17202e,#f0f0f2) !important}
.scp5:hover{color:light-dark(#17202e,#f0f0f2) !important}
.scp6:hover{background:#2b95ff !important}
.scp7:hover{background:light-dark(rgba(28,31,36,0.12),rgba(255,255,255,0.12)) !important}
.scp8:hover{background:light-dark(rgba(28,31,36,0.1),rgba(255,255,255,0.1)) !important}
.scp9:hover{background:rgba(255,69,58,0.1) !important}
.scpa:hover{background:light-dark(rgba(28,31,36,0.15),rgba(255,255,255,0.15)) !important;color:light-dark(rgb(28,31,36),#ffffff) !important}
.scpb:hover{background:light-dark(rgba(28,31,36,0.06),rgba(255,255,255,0.06)) !important;color:light-dark(rgb(33,36,41),#ebebed) !important}
.scpc:hover{background:light-dark(rgba(28,31,36,0.06),rgba(255,255,255,0.06)) !important;color:light-dark(#17202e,#f0f0f2) !important}
.scpd:hover{{{ s.hover }} !important}
.scpe:hover{background:light-dark(rgb(238,241,246),#141a26) !important}
.scpf:hover{background:light-dark(rgb(235,238,243),#18202d) !important}
.scpg:hover{background:light-dark(rgba(223,226,231,0.85),rgba(40,50,70,0.85)) !important;border-color:light-dark(rgba(28,31,36,0.1),rgba(255,255,255,0.1)) !important}
.scph:hover{background:light-dark(rgba(28,31,36,0.08),rgba(255,255,255,0.08)) !important}
.scpi:hover{background:light-dark(rgb(226,229,234),#252e40) !important}
.scpj:hover{background:light-dark(rgba(28,31,36,0.06),rgba(255,255,255,0.06)) !important}
.scpk:hover{filter:brightness(1.15) !important}
.scpl:hover{filter:brightness(1.1) !important}
.scpm:hover{background:light-dark(rgba(28,31,36,0.14),rgba(255,255,255,0.14)) !important}
.scpn:hover{background:light-dark(rgba(28,31,36,0.05),rgba(255,255,255,0.05)) !important}
.scpo:hover{background:light-dark(rgba(28,31,36,0.04),rgba(255,255,255,0.04)) !important;color:light-dark(rgb(28,31,36),#ffffff) !important}
.scpp:hover{background:rgba(255,69,58,0.12) !important}
.scpq:hover{background:light-dark(rgba(62,65,70,0.26),rgba(118,118,128,0.26)) !important}
.scpr:hover{color:light-dark(rgb(33,36,41),#ebebed) !important}
.scps:hover{transform:scale(1.12) !important}
.scpt:hover{background:light-dark(rgba(28,31,36,0.04),rgba(255,255,255,0.04)) !important;color:light-dark(#17202e,#f0f0f2) !important}
.scpu:hover{background:light-dark(rgba(28,31,36,0.05),rgba(255,255,255,0.05)) !important;transform:translateX(-5px) !important}
.scpv:hover{transform:scale(1.14) translateY(-1px) !important;box-shadow:0 0 0 1px light-dark(rgba(28,31,36,0.22),rgba(255,255,255,0.22)),0 6px 16px light-dark(rgba(15,23,42,0.1375),rgba(0,0,0,0.55)) !important}
.scpw:hover{background:light-dark(rgb(233,236,241),#1c2330) !important}
.scpx:hover{background:light-dark(rgb(238,241,246),#141a26) !important;border-color:light-dark(rgba(28,31,36,0.18),rgba(255,255,255,0.18)) !important}
.scpy:hover{filter:brightness(1.08) !important}
.scpz:hover{background:light-dark(rgb(237,240,245),#1b1c20) !important;color:light-dark(#17202e,#f0f0f2) !important;box-shadow:inset 0 1px 0 light-dark(rgba(28,31,36,0.07),rgba(255,255,255,0.07)),inset 0 0 0 1px light-dark(rgba(28,31,36,0.04),rgba(255,255,255,0.04)) !important}
.scp10:hover{background:light-dark(rgba(28,31,36,0.045),rgba(255,255,255,0.045)) !important}
.scp11:hover{transform:translateY(-2px) !important;border-color:light-dark(rgba(28,31,36,0.1),rgba(255,255,255,0.1)) !important}
.scp12:hover{{{ t.hover }} !important}
.scp13:hover{{{ c.hover }} !important}
.scp14:hover{background:light-dark(rgba(28,31,36,0.035),rgba(255,255,255,0.035)) !important}
.scp15:hover{{{ p.hover }} !important}
.scp16:hover{border-color:light-dark(rgba(28,31,36,0.16),rgba(255,255,255,0.16)) !important;background:radial-gradient(light-dark(rgba(28,31,36,0.1),rgba(255,255,255,0.1)) 0.8px,transparent 1px) 0 0/5px 5px,light-dark(rgb(241,244,249),#101622) !important}
.scp17:hover{background:light-dark(rgba(28,31,36,0.1),rgba(255,255,255,0.1)) !important;color:light-dark(rgb(33,36,41),#ebebed) !important}
.scp18:hover{{{ r.hover }} !important}
.scp19:hover{background:light-dark(rgba(28,31,36,0.03),rgba(255,255,255,0.03)) !important}
.scp1a:hover{background:light-dark(rgba(28,31,36,0.08),rgba(255,255,255,0.08)) !important;color:light-dark(rgb(33,36,41),#ebebed) !important}
.scp1b:hover{background:light-dark(rgba(28,31,36,0.055),rgba(255,255,255,0.055)) !important}
.scp1c:hover{background:light-dark(rgba(28,31,36,0.07),rgba(255,255,255,0.07)) !important;color:light-dark(#17202e,#f0f0f2) !important}
.scp1d:hover{background:light-dark(rgba(28,31,36,0.09),rgba(255,255,255,0.09)) !important}
.scp1e:hover{background:light-dark(rgba(28,31,36,0.04),rgba(255,255,255,0.04)) !important}
.scp1f:hover{border-bottom-color:light-dark(#17202e,#f0f0f2) !important}
.scp1g:hover{background:rgba(255,69,58,0.12) !important;color:light-dark(rgba(162,67,60,1),#ff6b61) !important}
.scp1h:hover{color:light-dark(rgb(30,33,38),#f5f5f7) !important}
.scp1i:hover{background:light-dark(rgba(28,31,36,0.075),rgba(255,255,255,0.075)) !important}
.scp1j:hover{background:light-dark(rgba(28,31,36,0.11),rgba(255,255,255,0.11)) !important}
.scp1k:hover{background:light-dark(rgba(28,31,36,0.07),rgba(255,255,255,0.07)) !important;color:light-dark(rgb(33,36,41),#ebebed) !important}
.scp1l:hover{background:light-dark(rgba(28,31,36,0.05),rgba(255,255,255,0.05)) !important;color:light-dark(rgb(33,36,41),#ebebed) !important}
.scp1m:hover{background:light-dark(rgba(28,31,36,0.08),rgba(255,255,255,0.08)) !important;color:light-dark(#17202e,#f0f0f2) !important}
.scp1n:hover{{{ v.hover }} !important}
.scp1o:hover{background:light-dark(rgb(226,229,234),#262e3d) !important}
.scp1p:hover{background:light-dark(rgba(28,31,36,0.035),rgba(255,255,255,0.035)) !important;box-shadow:inset 0 0 0 1px light-dark(rgba(28,31,36,0.28),rgba(255,255,255,0.28)) !important}
.scp1q:hover{border-color:light-dark(rgba(28,31,36,0.1),rgba(255,255,255,0.1)) !important}
.scp1r:hover{fill:light-dark(rgba(28,31,36,0.06),rgba(255,255,255,0.06)) !important}
.scp1s:hover{filter:brightness(1.12) !important}
.scp1t:hover{background:light-dark(rgba(28,31,36,0.045),rgba(255,255,255,0.045)) !important;border-radius:5px !important;box-shadow:-8px 0 0 light-dark(rgba(28,31,36,0.045),rgba(255,255,255,0.045)),8px 0 0 light-dark(rgba(28,31,36,0.045),rgba(255,255,255,0.045)) !important}
.scp1u:hover{border-color:rgba(90,141,238,0.3) !important}
.scp1v:hover{background:light-dark(#ffffff,#0d121b) !important}
.scp1w:hover{background:light-dark(rgba(28,31,36,0.085),rgba(255,255,255,0.085)) !important;border-color:light-dark(rgba(28,31,36,0.07),rgba(255,255,255,0.07)) !important}
.scp1x:hover{filter:brightness(1.3) !important;cursor:default !important}
.scp1y:hover{filter:brightness(1.22) !important}
.scp1z:hover{z-index:3 !important;filter:brightness(1.35) drop-shadow(0 0 6px rgba(240,240,242,0.6)) !important}
.scp20:hover{border-color:light-dark(rgba(32,35,40,0.6),rgba(240,240,242,0.6)) !important;background:light-dark(rgba(32,35,40,0.05),rgba(240,240,242,0.05)) !important}
.scp21:hover{border-color:light-dark(rgba(28,31,36,0.12),rgba(255,255,255,0.12)) !important}
.scp22:hover{background:light-dark(rgb(238,241,246),#141a26) !important;border-color:light-dark(rgba(28,31,36,0.14),rgba(255,255,255,0.14)) !important}
.scp23:hover{border-color:light-dark(rgba(28,31,36,0.16),rgba(255,255,255,0.16)) !important;background:light-dark(rgb(239,242,247),#121925) !important}
.scp24:hover{border-color:light-dark(rgba(28,31,36,0.2),rgba(255,255,255,0.2)) !important;background:light-dark(rgba(28,31,36,0.045),rgba(255,255,255,0.045)) !important}
.scp25:hover{background:light-dark(rgba(28,31,36,0.025),rgba(255,255,255,0.025)) !important}
.scp26:hover{background:light-dark(rgba(28,31,36,0.06),rgba(255,255,255,0.06)) !important;color:light-dark(rgb(28,31,36),#ffffff) !important}
.scp27:hover{background:light-dark(rgba(28,31,36,0.08),rgba(255,255,255,0.08)) !important;color:light-dark(rgb(28,31,36),#ffffff) !important}
.scp28:hover{background:light-dark(rgba(28,31,36,0.1),rgba(255,255,255,0.1)) !important;color:light-dark(#17202e,#f0f0f2) !important}
.scp29:hover{background:light-dark(rgba(28,31,36,0.05),rgba(255,255,255,0.05)) !important;color:light-dark(rgb(28,31,36),#ffffff) !important}
.scp2a:hover{background:#2b96fa !important}
.scp2b:hover{background:#ff5b51 !important}
.scp2c:hover{opacity:0.88 !important}
.scp2d:hover{background:light-dark(rgba(28,31,36,0.09),rgba(255,255,255,0.09)) !important;color:light-dark(#17202e,#f0f0f2) !important}
.scp2e:hover{background:light-dark(rgba(229,232,237,0.96),rgba(32,40,56,0.96)) !important;border-color:light-dark(rgba(28,31,36,0.18),rgba(255,255,255,0.18)) !important}
.scp2f:active{transform:scale(.94) !important}
.scp2g:hover{color:light-dark(#17202e,#f0f0f2) !important;background:light-dark(rgba(28,31,36,0.045),rgba(255,255,255,0.045)) !important}
.scp2h:hover{border-color:light-dark(rgba(28,31,36,0.2),rgba(255,255,255,0.2)) !important}
.scp2i:hover{background:rgba(255,69,58,0.14) !important}
.scp2j:focus{border-color:#5a8dee !important}

  html, body { margin:0; background:light-dark(#f5f7fb,#0a0e16); }
  a { color:light-dark(#17202e,#f0f0f2); text-decoration:none; }
  a:hover { color:light-dark(rgb(28,31,36),#ffffff); }
  @keyframes ob-hello { 0% { opacity:0; transform:translateY(10px); filter:blur(6px); } 18% { opacity:1; transform:none; filter:blur(0); } 82% { opacity:1; transform:none; filter:blur(0); } 100% { opacity:0; transform:translateY(-8px); filter:blur(4px); } }
  @keyframes ob-in { from { opacity:0; transform:translateY(10px); filter:blur(4px); } to { opacity:1; transform:none; filter:blur(0); } }
  @keyframes ob-tip { from { opacity:0; transform:translate(-50%,-4px); } to { opacity:1; transform:translate(-50%,0); } }
  @keyframes ob-toast { from { opacity:0; transform:translate(-50%,-8px); } to { opacity:1; transform:translate(-50%,0); } }
  @keyframes ob-pulse { 0%, 100% { box-shadow:0 0 0 1px light-dark(rgba(28,31,36,0.22),rgba(255,255,255,0.22)),0 0 0 5px light-dark(rgba(28,31,36,0.03),rgba(255,255,255,0.03)),0 0 40px light-dark(rgba(28,31,36,0.05),rgba(255,255,255,0.05)); } 50% { box-shadow:0 0 0 1px light-dark(rgba(28,31,36,0.32),rgba(255,255,255,0.32)),0 0 0 7px light-dark(rgba(28,31,36,0.045),rgba(255,255,255,0.045)),0 0 54px light-dark(rgba(28,31,36,0.08),rgba(255,255,255,0.08)); } }

.sc-host{overflow-wrap:break-word}
.sc-host [data-ui-flow]{flex-wrap:wrap}
.sc-host [data-ui-flow]>*{min-inline-size:0;max-inline-size:100%}
.sc-host [data-ui-value]{min-inline-size:0;max-inline-size:100%;white-space:normal!important;overflow-wrap:break-word;line-height:1.25!important}
.sc-host header [data-ui-value]{white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis}
.sc-host [data-ui-text-control]{height:auto!important;min-height:var(--sl-control-height);max-inline-size:100%;white-space:normal!important;overflow-wrap:anywhere;padding-block:6px!important}
.sc-host [data-ui-text-control]>*{min-inline-size:0}
.sc-host button[data-hd-direction]:disabled{opacity:.35;cursor:default}
.sc-host [role=button]:focus-visible,.sc-host button:focus-visible,.sc-host a:focus-visible,
.sc-host input:focus-visible,.sc-host textarea:focus-visible,.sc-host select:focus-visible,
.sc-host [tabindex]:focus-visible{outline:1px solid light-dark(#596579,#8b8b92)!important;outline-offset:3px!important}
.sc-host input:focus-visible,.sc-host textarea:focus-visible,.sc-host [contenteditable=true]:focus-visible{outline:none!important}
@media(prefers-reduced-motion:reduce){.sc-host *,.sc-host *::before,.sc-host *::after{
  animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* src/desktop/account-feedback.css */
/* FeedbackComposer */
.sl-feedback-form{padding:22px;max-height:calc(100dvh - 44px);overflow-y:auto;color:light-dark(#293346,#dcdcde);font-size:14px;line-height:1.6}
.sl-feedback-form h2{margin:0;font-size:18px}
.sl-feedback-form header{display:flex;align-items:center;justify-content:space-between;gap:16px}
.sl-feedback-form label{display:flex;flex-direction:column;gap:6px;margin:14px 0}
.sl-feedback-form input,.sl-feedback-form textarea{box-sizing:border-box;width:100%;padding:10px;border:1px solid light-dark(rgb(220,223,228),#303746);border-radius:7px;background:light-dark(rgb(245,248,253),#0b1019);color:light-dark(#17202e,#f0f0f2);font:inherit}
.sl-feedback-form textarea{resize:vertical;min-height:130px}
.sl-feedback-form button{margin:5px 8px 5px 0;padding:8px 12px;border:1px solid light-dark(rgb(220,223,228),#303746);border-radius:7px;background:light-dark(rgb(237,240,245),#151c28);color:light-dark(#17202e,#f0f0f2);font:inherit;cursor:pointer}
.sl-feedback-form button:disabled{opacity:.6;cursor:default}
.sl-feedback-form p{overflow-wrap:anywhere}

/* FeedbackBoard */
.sl-feedback-board{max-width:1120px;margin:auto;padding:24px clamp(16px,3vw,36px) 80px;color:light-dark(#293346,#dcdcde);font-size:14px;line-height:1.6}
.sl-feedback-board header,.sl-feedback-board nav{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.sl-feedback-board header{justify-content:space-between}
.sl-feedback-board h2{font-size:24px}
.sl-feedback-board h3{margin:0;font-size:17px}
.sl-feedback-board button,.sl-feedback-board input{font:inherit;color:light-dark(#17202e,#f0f0f2);background:light-dark(rgb(237,240,245),#151c28);border:1px solid light-dark(rgb(213,216,221),#384255);border-radius:8px;padding:8px 12px}
.sl-feedback-board button{cursor:pointer;margin:4px 8px 4px 0}
.sl-feedback-board button:disabled{opacity:.6;cursor:default}
.sl-feedback-board button[aria-pressed=true]{border-color:#92c7ff}
.sl-feedback-board label{display:flex;flex-direction:column;gap:6px;margin:16px 0}
.sl-feedback-board p,.sl-feedback-board h3{overflow-wrap:anywhere}
.sl-feedback-card{border:1px solid light-dark(rgb(220,223,228),#303746);border-radius:12px;background:light-dark(#ffffff,#10151f);padding:18px;margin:14px 0}
.sl-feedback-card time{display:block;font-size:12px;color:light-dark(rgb(50,53,58),#a5a5b0)}
.sl-feedback-card a{display:block;color:light-dark(#0060ad,#92c7ff)}
.sl-feedback-board .sl-feedback-form{max-height:none;padding:18px;border:1px solid light-dark(rgb(220,223,228),#303746);border-radius:12px}

/* CreditsPanel */
.sl-credits{color:light-dark(#293346,#dcdcde);font-size:14px;line-height:1.6}
.sl-credits button,.sl-credits a{display:inline-block;margin:6px 8px 6px 0;padding:8px 12px;border:1px solid light-dark(rgb(220,223,228),#303746);border-radius:7px;background:light-dark(rgb(237,240,245),#151c28);color:light-dark(#17202e,#f0f0f2);font:inherit;cursor:pointer}
.sl-credits button:disabled{opacity:.6;cursor:default}
.sl-credits dt{color:light-dark(#596579,#9a9aa2)}
.sl-credits dd{margin:0 0 12px}
.sl-credits label{display:flex;gap:10px;align-items:flex-start}
.sl-credits input{margin-top:6px}
.sl-credits fieldset{border:0;padding:0}

/* BillingPanel */
.sl-billing-panel{font-size:14px;line-height:1.6;color:light-dark(#293346,#dcdcde)}
.sl-billing-panel h2{font-size:18px;margin:0 0 14px;color:light-dark(#17202e,#f0f0f2)}
.sl-billing-panel h3{font-size:16px;color:light-dark(#17202e,#f0f0f2)}
.sl-billing-panel dl{display:grid;grid-template-columns:minmax(120px,1fr) minmax(120px,2fr);gap:10px 18px}
.sl-billing-panel dt{color:light-dark(#596579,#9a9aa2)}
.sl-billing-panel dd{margin:0;overflow-wrap:anywhere}
.sl-billing-panel button,.sl-billing-panel a{display:inline-block;padding:8px 12px;margin:4px 8px 4px 0;border:1px solid light-dark(rgb(220,223,228),#303746);border-radius:7px;background:light-dark(rgb(237,240,245),#151c28);color:light-dark(#17202e,#f0f0f2);font:inherit;cursor:pointer}
.sl-billing-panel button:disabled{opacity:.6;cursor:default}
.sl-billing-actions{margin-top:24px;padding-top:16px;border-top:1px solid light-dark(rgb(220,223,228),#303746)}

/* src/desktop/desktop.css */
@media(max-width:700px){
  [data-shot-ui]{padding:8px!important}
  [data-shot-ui] [data-shot-menu]{right:8px!important;max-width:calc(100vw - 48px);max-height:60dvh;overflow:auto}
  [data-shot-ui] [data-shot-layout]{flex-direction:column;overflow:auto}
  [data-shot-ui] [data-shot-preview]{flex:none!important;padding:16px!important}
  [data-shot-ui] [data-side-sb]{width:auto!important;flex:none!important;overflow:visible!important;border-left:0!important;border-top:1px solid light-dark(rgba(28,31,36,0.07),rgba(255,255,255,.07))}
}
[data-shot-ui] [aria-disabled=true]{opacity:.45;cursor:progress!important;pointer-events:none}
[data-snapshot-controls]::backdrop{background:none;pointer-events:none}
[data-snapshot-controls] button:focus-visible{outline:2px solid #92c7ff;outline-offset:2px}
@media(prefers-reduced-motion:reduce){[data-snapshot-controls] button{transition:none!important}}
/* The source watchlist becomes a bounded drawer on phones. Keep currency,
   absolute change and percentage visible in two rows instead of clipping them. */
[data-wl-side][data-source-open]{max-width:100vw;box-sizing:border-box}
/* Avatar clipping must not hide keyboard selection feedback. */
.sc-host button[data-watchlist-stock]:focus-visible{outline:2px solid #92c7ff!important;outline-offset:-3px!important}
.sc-host button[data-watchlist-stock]:focus-visible::after{content:"";position:absolute;inset:1px;border:2px solid #92c7ff;border-radius:inherit;pointer-events:none;z-index:1}
/* Right-align complete source prices inside the chart. A fixed 62px rail cannot
   contain a currency code plus micro-price precision. Wide labels may extend
   over the plot, but never beyond the card or beneath the watchlist. */
[data-source-chart-axis=true]{width:100%!important}
[data-source-chart-axis=true]>span{left:auto!important;right:4px;max-width:calc(100% - 8px);box-sizing:border-box;white-space:normal!important;overflow-wrap:anywhere;text-align:right;font-variant-numeric:tabular-nums;background:light-dark(#eef2f7,#161b25)}
[data-source-chart-price=true]{max-width:100%;overflow-wrap:anywhere}
[data-source-chart-ranges=true]{max-width:100%;min-width:0;box-sizing:border-box;flex-wrap:wrap}
@media(max-width:600px){
  [data-source-chart-frame=true],[data-source-chart-dates=true]{padding-right:0!important}
  [data-source-chart-dates=true]>span:not(:first-child):not(:last-child){display:none}
  /* A frozen 220px company column otherwise covers most of a phone's table.
     Scroll it with the data so complete source values can enter the viewport. */
  [data-source-screener=true] [data-screener-name],
  [data-source-screener=true] [data-screener-head]>:first-child{position:relative!important;left:auto!important}
  [data-wl-side][data-source-open][data-source-open=open] [data-source-row],
  [data-wl-side][data-source-open][data-source-open=open] [data-source-columns]{
    grid-template-columns:30px minmax(0,1fr) minmax(0,1fr)!important;gap:6px 10px!important
  }
  [data-wl-side][data-source-open][data-source-open=open] [data-source-row]{padding:10px 12px!important;margin:0 4px!important}
  [data-wl-side][data-source-open][data-source-open=open] [data-source-row]>span:nth-child(1){grid-column:1;grid-row:1/3;align-self:center}
  [data-wl-side][data-source-open][data-source-open=open] [data-source-row]>span:nth-child(2){grid-column:2;grid-row:1}
  [data-wl-side][data-source-open][data-source-open=open] [data-source-row]>span:nth-child(2)>span{white-space:normal!important;overflow-wrap:anywhere}
  [data-wl-side][data-source-open][data-source-open=open] [data-source-row]>span:nth-child(3){grid-column:3;grid-row:1;font-size:14px!important;white-space:normal!important;overflow-wrap:anywhere;min-width:0}
  [data-wl-side][data-source-open][data-source-open=open] [data-source-row]>span:nth-child(4){grid-column:2;grid-row:2;text-align:left!important;font-size:13px!important}
  [data-wl-side][data-source-open][data-source-open=open] [data-source-row]>span:nth-child(5){grid-column:3;grid-row:2}
  [data-wl-side][data-source-open][data-source-open=open] [data-source-columns]{padding:0 16px 10px!important;font-size:12px!important}
  [data-wl-side][data-source-open][data-source-open=open] [data-source-columns]>span:nth-child(3){grid-column:2;grid-row:2;text-align:left!important}
  [data-wl-side][data-source-open][data-source-open=open] [data-source-columns]>span:nth-child(4){grid-column:3;grid-row:2}
}

/* DialogFocus pauses the tour while a modal owns interaction. Its high stacking
   layer must also stop painting, without unmounting or resetting tour progress. */
[data-sc-name="Terminal Onboarding"][inert]{visibility:hidden!important}


/* Source values keep their full precision, including at phone widths. */
[data-source-chart-price=true]{min-width:0;white-space:normal!important;line-height:1.15!important}
[data-source-chart-price=true] [style*="white-space"]{white-space:normal!important}
[data-source-number],[data-source-chart-price=true],[data-source-chart-axis=true],[data-source-chart-dates=true]{direction:ltr;unicode-bidi:isolate}

/* Translated tour text must stay inside the viewport, independent of the
   target's position and of the width used when the tour first measured it. */
[data-tour-copy],[data-tour-dismiss],[data-tour-toast]{max-width:calc(100vw - 32px);overflow-wrap:anywhere}
[data-tour-dismiss],[data-tour-toast]{flex-wrap:wrap}
[data-tour-toast]{height:auto!important;min-height:46px;padding-block:6px!important}
@media(max-width:700px){
  [data-tour-copy]{left:20px!important;top:clamp(80px,30dvh,240px)!important;width:calc(100vw - 40px)!important;max-height:calc(100dvh - 320px);overflow-y:auto;pointer-events:auto;transition:none!important}
  [data-tour-copy] p{white-space:normal!important}
}
/* The image supplies the brand ground. Monogram tiles underneath a round
   image otherwise paint a second pale antialiased edge in every theme. */
.sc-host :is(span,div,button):has(> img[data-stocklife-logo]),
.sc-host :is(span,div):has(> button > img[data-stocklife-logo]) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* src/desktop/market-status.css */
.sl-market-status {
  position: fixed;
  z-index: 8000;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(620px, calc(100% - 32px));
  box-sizing: border-box;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid light-dark(rgba(28,31,36,0.12),rgba(255,255,255,0.12));
  border-radius: 9px;
  background: light-dark(rgb(238,241,246),#151b27);
  color: light-dark(rgb(33,36,41),#ebebed);
  font: 12px/1.5 system-ui, sans-serif;
  pointer-events: none;
}
.sl-market-status strong, .sl-market-status span { display: block; }
.sl-market-status button { pointer-events: auto; cursor: pointer; font: inherit; }
/* A 24px minimum target. This collapsed line used to be reachable only after
 * dismissing the dialog; it is now the ordinary shape of an outage over
 * prices that already arrived, so its one control is pressed routinely and has
 * to be as reachable as every other control here. Measured 87x22 before.
 * A minimum rather than a fixed height: a longer translation still grows it. */
.sl-market-status > button { border: 0; min-height: 24px; padding: 4px 0 0; background: none; color: light-dark(#293346,#dcdcde); text-decoration: underline; }
.sl-market-error {
  z-index: 200000;
  inset: 0;
  transform: none;
  width: auto;
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: light-dark(#f5f7fb,#0a0e16);
  color: light-dark(#17202e,#f0f0f2);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  pointer-events: auto;
  font-family: 'Instrument Sans', Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.sl-shell .sl-market-error { top: var(--sl-titlebar-height, 32px); }
.sl-market-error-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px clamp(18px,3.8vw,54px); }
.sl-market-error-brand { display: flex; align-items: center; gap: 10px; border: 0; padding: 0; background: none; color: light-dark(#17202e,#f0f0f2); font-size: 15px !important; font-weight: 700 !important; letter-spacing: -.03em; }
.sl-market-error .sl-market-error-status { display: flex; align-items: center; gap: 8px; padding: 7px 13px 7px 11px; border-radius: 999px; background: light-dark(rgb(238,241,246),#151b27); border: 1px solid light-dark(rgba(28,31,36,0.08),rgba(255,255,255,.08)); font-size: 12.5px; font-weight: 600; color: light-dark(#293346,#dcdcde); }
.sl-market-error-status i { width: 7px; height: 7px; border-radius: 999px; background: #ff9f0a; flex-shrink: 0; }
.sl-market-error-main { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 40px 0 64px; }
.sl-market-error-code { text-align: center; font-size: clamp(120px,18vw,220px); font-weight: 600; letter-spacing: -.06em; line-height: .9; color: light-dark(rgb(30,33,38),#f5f5f7); font-variant-numeric: tabular-nums; }
.sl-market-error-offline { font-size: clamp(72px,11vw,150px); }
.sl-market-error-copy { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; width: min(460px,100%); margin: 28px auto 0; padding: 0 clamp(18px,4vw,48px); text-align: center; }
.sl-market-error-copy h1 { margin: 0; font-size: clamp(24px,2.6vw,30px); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; color: light-dark(rgb(30,33,38),#f5f5f7); text-wrap: balance; }
.sl-market-error-copy p { margin: 12px 0 0; max-width: 380px; font-size: 15px; line-height: 1.55; color: light-dark(#596579,#8b8b92); text-wrap: pretty; }
.sl-market-error-copy small { margin-top: 16px; font-size: 11.5px; color: light-dark(#596579,#8b8b92); }
.sl-market-error-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 28px; }
.sl-market-error-actions button { display: flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 9px; font-size: 13.5px; font-weight: 600; transition: background .15s; }
.sl-market-error-primary { color: light-dark(#f5f7fb,#0a0e16); background: light-dark(#17202e,#f0f0f2); border: 0; box-shadow: inset 0 -1px 0 light-dark(rgba(15,23,42,0.0375),rgba(0,0,0,.15)); }
.sl-market-error-primary:hover { background: light-dark(rgb(28,31,36),#fff); }
.sl-market-error-secondary { color: light-dark(#293346,#dcdcde); background: light-dark(#ffffff,#0d121b); border: 1px solid light-dark(rgba(28,31,36,0.1),rgba(255,255,255,.1)); }
.sl-market-error-secondary:hover { background: light-dark(rgb(238,241,246),#141a26); }

/* src/desktop/referrals.css */
.sl-referral-invitation{position:fixed;z-index:10000;inset:auto 16px 16px auto;max-width:520px;max-height:80vh;overflow:auto;padding:24px;background:var(--bg,#15191f);color:var(--text,#f1f4f7);border:1px solid light-dark(rgb(63,66,71),#687785);border-radius:12px;box-shadow:0 8px 40px light-dark(rgba(15,23,42,0.13333333333333333),#0008);font:14px/1.6 system-ui,sans-serif}
.sl-referral-invitation h2{font-size:19px;margin:0 0 12px}.sl-referral-invitation button{padding:8px 12px;margin:6px 8px 6px 0;cursor:pointer}.sl-referral-invitation label{display:block;margin:12px 0}.sl-referral-invitation input{margin-right:8px}.sl-referral-terms{margin:14px 0}.sl-referral-terms summary{cursor:pointer}.sl-referral-terms p{font-size:13px;line-height:1.6}.sl-referral-invitation button:disabled{opacity:.55;cursor:default}
@media(max-width:600px){.sl-referral-invitation{inset:auto 8px 8px;max-width:none;padding:16px}}

/* src/desktop/service-panels.css */
.sl-service-panel{max-width:680px;color:light-dark(#293346,#dcdcde);font-size:14px;line-height:1.65}
.sl-service-panel h2{margin:0 0 14px;font-size:19px;color:light-dark(#17202e,#f0f0f2)}
.sl-service-panel h3{margin:24px 0 8px;font-size:16px;color:light-dark(#17202e,#f0f0f2)}
.sl-service-panel a{display:inline-block;color:light-dark(#0060ad,#92c7ff);padding:7px 0;margin-right:16px;overflow-wrap:anywhere}
.sl-service-panel button,.sl-service-panel input{font:inherit;color:light-dark(#17202e,#f0f0f2);background:light-dark(rgb(237,240,245),#151c28);border:1px solid light-dark(rgb(213,216,221),#384255);border-radius:8px;padding:8px 12px}
.sl-service-panel button{cursor:pointer;margin:4px 8px 4px 0}
.sl-service-panel button:disabled{opacity:.6;cursor:default}
.sl-service-panel label{display:flex;flex-direction:column;gap:6px;margin:16px 0}
.sl-service-panel input{width:100%;box-sizing:border-box;min-width:0}
.sl-service-panel details{border-bottom:1px solid light-dark(rgb(220,223,228),#303746);padding:12px 0}
.sl-service-panel summary{cursor:pointer;color:light-dark(#17202e,#f0f0f2)}
.sl-service-panel summary:focus-visible{outline:2px solid #92c7ff;outline-offset:4px}
.sl-settings-mobile-nav{display:none}
@media(max-width:640px){
  [data-settings-rail],[data-settings-rail]+div{display:none!important}
  [data-settings-content]{padding:20px 16px 40px!important}
  .sl-settings-mobile-nav{display:flex;gap:8px;align-items:center;flex-shrink:0;padding:12px 16px;border-bottom:1px solid light-dark(rgb(220,223,228),#303746)}
  .sl-settings-mobile-nav label{display:flex;flex:1;min-width:0;flex-direction:column;gap:4px;font-size:12px;color:light-dark(#49556a,#bfbfc4)}
  .sl-settings-mobile-nav select,.sl-settings-mobile-nav button{font:inherit;min-height:44px;color:light-dark(#17202e,#f0f0f2);background:light-dark(rgb(237,240,245),#151c28);border:1px solid light-dark(rgb(213,216,221),#384255);border-radius:8px;padding:8px;max-width:100%}
  .sl-settings-mobile-nav button{align-self:flex-end;font-size:12px;cursor:pointer}
  [data-modal="settings"]>div:last-child{height:100dvh!important}
}

/* src/desktop/theme.css */
:root{color-scheme:dark}
:root[data-sl-theme=light]{color-scheme:light}
:root[data-sl-theme=dark]{color-scheme:dark}
[data-theme-preview]{color-scheme:dark}
/* Windows owns the caption buttons and currently paints their white glyphs
   on a dark native overlay. Keep the adjacent title strip in that scheme. */
.sl-titlebar{color-scheme:dark}
/* Native date fields and other form controls follow the same preference. */
:root[data-sl-theme] input,:root[data-sl-theme] select,:root[data-sl-theme] textarea{color-scheme:inherit!important}
/* Decimal digits carry part of the return, and every news choice remains
   readable/selectable. Whole-group alpha otherwise defeats the text palette,
   including the alpha already present on the news publisher/timestamp. */
.sc-host [data-compare-tail]{opacity:.85!important}
.sc-host [data-news-choice]{opacity:1!important}

/* src/styles/desktop-titlebar.css */
/* The desktop window's caption strip.
 *
 * WHY THIS SHELL DRAWS A SURFACE AT ALL, when it deliberately draws none
 * anywhere else: on Windows the caption is painted by the system, in the
 * system's colours and the system's font, and it is the one band of this
 * product that CSS cannot reach. Above an interface that is #0a0e16 from edge
 * to edge it read as a different application's chrome -- and until the icon
 * landed it said "Electron" in so many words. The owner asked for that strip
 * to carry this product's mark, its name and its colours, so the native
 * caption is switched off in the shell (`titleBarStyle: 'hidden'`) and this
 * replaces it. The three window buttons stay NATIVE and are only tinted.
 *
 * NOTHING HERE APPLIES IN A BROWSER TAB. Every rule is scoped to `.sl-shell`,
 * which only the desktop surface renders -- `data/site.ts` isDesktop(), the
 * one place that asks which surface this is.
 *
 * EVERY VALUE IS READ OFF THE EXPORT, not chosen, so the strip is the same
 * material as the interface under it rather than this shell's opinion about
 * it. Measured in the browser on 2026-10-15 against the export's own sticky
 * header, and each one is pinned from the compiled design by
 * tools/desktop-titlebar.test.mjs:
 *
 *   surface   #080b11 -- THE ONE VALUE HERE THAT IS NOT THE EXPORT'S. The
 *             owner supplied it as a screenshot on 2026-10-15 and asked for
 *             exactly it; read out of that image's pixels rather than guessed
 *             from how it looks, and the export does not contain it (zero
 *             occurrences in the compiled design, counted).
 *
 *             IT EXISTS TO SEPARATE TWO SURFACES THAT WERE ONE. The strip used
 *             to be rgb(13,18,27), which is the export's own sticky header
 *             (rgba(13,18,27,0.96) over #0a0e16, composited) made opaque -- so
 *             caption and header were the same colour and the window frame
 *             dissolved into the page. Measured in the owner's image the two
 *             are 4 to 10 steps apart per channel, with the header still at
 *             its own #0c121b: the caption went darker, the interface did not
 *             move. A frame that cannot be told from its contents is the thing
 *             that image was sent to fix.
 *   hairline  1px solid rgba(255,255,255,0.06) -- the header's own bottom rule,
 *             unchanged. Over the darker surface it composites to about
 *             #171a1f; the owner's image reads #15171d at that row, which is
 *             the same line once the border mixes with what is under it. A
 *             third hand-picked colour here would be one more value nobody can
 *             trace to a source.
 *   text      #ffffff -- white, and the export's own white: it appears 75
 *             times in the compiled design. Measured as the brightest pixel of
 *             the label in the image, which under antialiasing is the text
 *             colour itself. The previous #f0f0f2 is the header's colour and
 *             reads grey against this darker strip.
 *   face      "Instrument Sans", Helvetica, sans-serif -- the header's own
 */

.sl-shell {
  /* THE HEIGHT IS THE SHELL'S, NOT THIS FILE'S. `titleBarOverlay.height` in
   * apps/terminal-desktop/src/main.mjs decides how tall the native buttons are
   * drawn, and Chromium reports that same box back through the Window Controls
   * Overlay environment variables. Reading it back is what keeps the strip and
   * the buttons the same height without a second copy of the number to drift.
   * The fallback is only ever used where there is no overlay to ask. */
  --sl-titlebar-height: env(titlebar-area-height, 36px);
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.sl-titlebar {
  flex: 0 0 var(--sl-titlebar-height);
  display: flex;
  align-items: center;
  gap: 9px;
  padding-inline: 14px;
  background: light-dark(rgb(248,251,255),#080b11);
  border-bottom: 1px solid light-dark(rgba(28,31,36,0.06),rgba(255, 255, 255, 0.06));
  color: light-dark(rgb(28,31,36),#ffffff);
  font: 600 12.5px/1 "Instrument Sans", Helvetica, sans-serif;
  letter-spacing: 0.01em;
  user-select: none;
  /* The whole strip drags the window, which is also what gives Windows back
   * its double-click-to-maximise and its right-click system menu. Nothing in
   * here is interactive, so nothing needs to opt out with `no-drag`. */
  -webkit-app-region: drag;
}

/* macOS draws its traffic lights over the top left of the content, so the mark
 * starts to their right. NOT MEASURED -- there is no Mac on this machine, and
 * macOS keeps `hiddenInset` rather than a tinted overlay. */
.sl-titlebar-mac {
  padding-inline-start: 78px;
}

.sl-frame {
  flex: 1 1 auto;
  min-height: 0;
}

/* NO `transform` ON THIS WRAPPER, and the reason is measured rather than
 * inherited from motion.css.
 *
 * A transform makes its element the containing block for every
 * `position: fixed` descendant, which looks like exactly the tool for this
 * job: the export's ten fixed layers would fill the window below the caption
 * in one declaration. It was built that way first, and the first-run tour
 * stopped responding to the mouse entirely.
 *
 * WHY: the tour measures the interface with `getBoundingClientRect()`, which
 * is in VIEWPORT coordinates, and then draws its spotlight and -- this is the
 * part that bites -- four `pointer-events: auto` blocks that catch every click
 * OUTSIDE the highlighted control. Inside a transformed ancestor those are
 * laid out from the wrapper's origin instead, so the hole sat one caption too
 * low: clicking the search bar the tour was pointing at landed on a blocking
 * pane, which nudges rather than advances. Nothing threw, nothing was red, and
 * the first-run experience was simply stuck.
 *
 * So the fixed layers are moved by hand below, where the one that does its own
 * viewport arithmetic can be left out of it. */

/* The export anchors nine layers to the top of the window -- the watchlist
 * rail, every scrim, the command palette and the full-screen sheets -- and
 * without this they would start behind the caption, where the top of a sheet
 * would also collide with the window buttons the system draws there.
 *
 * ONLY THE TOP-ANCHORED ONES. The dock and the toasts are fixed to the BOTTOM
 * and carry no `top` of their own; giving them one would stretch them across
 * the whole window, which is why this matches on the two ways the export
 * writes a top anchor rather than on `position: fixed` alone.
 *
 * THE TOUR IS LEFT OUT, host and contents both. It is the one layer that does
 * its own viewport arithmetic, so moving it reintroduces exactly the bug
 * described above -- by the height of the caption rather than by the height of
 * a wrapper, but through the same mechanism. It therefore keeps the whole
 * window and covers the caption for as long as a first run lasts, which is the
 * right trade for an overlay that exists to point at things by coordinate. */
.sl-frame [style*="position: fixed"][style*="inset: 0px"]:not([data-sc-name="Terminal Onboarding"]):not([data-sc-name="Terminal Onboarding"] *),
.sl-frame [style*="position: fixed"][style*="top: 0px"]:not([data-sc-name="Terminal Onboarding"]):not([data-sc-name="Terminal Onboarding"] *) {
  top: var(--sl-titlebar-height) !important;
}

/* THE LOADING SKELETON AND ITS ACCOUNT CARD ARE GONE, so the two rules that
 * pushed them clear of the caption are gone with them. Both were OURS and both
 * carried their geometry in a CLASS, which is why none of the inline-style
 * selectors above could reach them and why each needed a line of its own.
 * `87c93294` took them out of the render on 2026-10-18, and
 * `Workspace.test.tsx` now asserts that neither class appears in the tree. A
 * later hand-written fixed layer needs its own line here for the same reason;
 * the selectors above keep covering every layer the export writes itself. */

/* THE EXPORT MEASURES ITSELF AGAINST THE WHOLE WINDOW, and the caption takes a
 * slice of it. `height: 100vh` is written into INLINE style attributes (the
 * scrolling root and one full-height screen container), an inline style
 * outranks any ordinary rule, and `vh` keeps meaning the whole window even
 * inside a shorter box -- so without this both stand one caption too tall and
 * the last 36px of a scrolled page sit under the bottom edge of the window.
 * Same mechanism, same `!important` and the same reason as the reduced-motion
 * contract in motion.css: the export writes inline styles, so a polite
 * declaration would be silently ignored.
 *
 * THE TWO FORMS ARE THE WHOLE POINT OF THE PAIR, and a plain `*="100vh"`
 * would be WRONG: the export also writes `max-height: calc(100vh - 240px)` and
 * four more like it, and a substring match would hand each of those a fixed
 * height they never had. Anchored to the start of the attribute, or to the
 * `; ` that separates declarations, `max-height` cannot match -- it carries a
 * `-` where the pattern needs a boundary.
 *
 * A SELECTOR CANNOT FAIL LOUDLY when its anchor moves -- it just stops
 * matching, and the only symptom would be a strip of content under the window
 * edge. tools/desktop-titlebar.test.mjs builds the attribute of every style
 * the export interns and checks this pair against all of them: at least one
 * must match, and none of the `calc(100vh ...)` ones may. */
.sl-frame [style^="height: 100vh"],
.sl-frame [style*="; height: 100vh"] {
  height: calc(100vh - var(--sl-titlebar-height)) !important;
}

/* src/styles/header-actions.css */
/* Long translated labels share the fixed-width launcher with its badge. */
.sc-host [data-ai-open] > span:nth-child(2) > span:first-child {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
}

/* src/styles/motion.css */
/* What the design does not carry itself, and nothing more than that.
 *
 * This file used to add two animations as well: a 280ms entrance for the whole
 * interface and a 180ms cross-fade on every screen change, picked by parity
 * between two identical keyframes because a CSS animation only restarts when its
 * name changes. Both are gone. The export is already richly animated - eight
 * @keyframes, a registered @property, its own cubic-bezier transition on most
 * interactive surfaces, and the sweeping bar of its loading screen - and a screen
 * change in the file lands instantly. An added fade there was this shell's
 * opinion about how the design should feel, which is exactly what this pass
 * removes everywhere else.
 *
 * WHAT STAYS IS NOT UI. A reduced-motion contract and a visible keyboard focus
 * ring are not surfaces the design could have drawn: one answers an operating
 * system setting, the other decides whether the interface can be operated
 * without a mouse at all. Neither adds anything to look at.
 *
 * ONE MEASURED RULE SURVIVES FROM THE DELETED HALF, because it will be needed
 * again the moment anyone animates this interface: NO `transform` ON AN ANCESTOR
 * OF THE DESIGN. A transform makes its element the containing block for every
 * position:fixed descendant, and the design has ten of them - the dock, the
 * screenshot button, each menu and overlay. Measured in the browser: a 40px
 * translate on the wrapper moved NINE of those ten by 34px. Animate opacity.
 */

/* The reduced-motion contract, which the export has none of.
 *
 * `!important` is load-bearing, not laziness: the export sets `animation` and
 * `transition` in INLINE style attributes, which outrank any ordinary rule in a
 * stylesheet, so a polite declaration would be silently ignored and this whole
 * block would be a comment that looks like a feature.
 *
 * Durations collapse to 1ms rather than to `none`, and iteration counts to 1
 * rather than 0, for a reason: an animation or transition that is removed never
 * fires `animationend` or `transitionend`, and a surface waiting for one would
 * hang. At 1ms the event still arrives, in the same order, one frame later. Each
 * of the export's eight keyframes ends at its visible state (`to { opacity: 1 }`,
 * `transform: none`) with no `forwards` fill needed, so collapsing them leaves
 * content shown and not hidden - which is the failure this kind of rule usually
 * has. */
@media (prefers-reduced-motion: reduce) {
  .sc-host, .sc-host *, .sc-host *::before, .sc-host *::after {
    animation-delay: 0ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
  html, body, [data-app-scroll] { scroll-behavior: auto !important; }
}

/* Neutral keyboard focus follows the terminal palette, including text inputs. */
:focus-visible {
  outline: 1px solid light-dark(#596579,#8b8b92);
  outline-offset: 2px;
  border-radius: inherit;
}

/* Text entry draws NO focus frame at all, by the owner's decision of
 * 2026-10-22: the caret says where typing goes, and the inset line this used
 * to draw read as a stray border round the search and the AI box. The field's
 * own styling stays exactly as the design draws it. Buttons and links keep the
 * keyboard ring above. */
input:focus, textarea:focus, select:focus, [contenteditable="true"]:focus {
  outline: none !important;
}
