@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}
/* Keep a template name on one line, with the export's existing ellipsis for
   long saved names. The full name remains available on hover. */
[data-screener-template-label=true]{white-space:nowrap}
@media(max-width:600px){
  /* The fixed search field previously squeezed Templates into two lines and
     its neighbouring 32px clear control below 24px. Wrap whole controls instead.
     Anchor the popup below this bounded toolbar, including its wrapped search. */
  [data-screener-tools=true]{position:relative;flex-wrap:wrap;min-width:0;max-width:100%}
  [data-screener-tools=true]>*{flex-shrink:0;max-width:100%}
  [data-screener-tools=true]>[data-menu]{position:static!important}
  [data-screener-template-popup=true]{max-width:100%;box-sizing:border-box}
  [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;
}