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

  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.18),rgba(255,255,255,0.18)) !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{background:rgba(255,69,58,0.12) !important;color:light-dark(rgba(162,67,60,1),#ff6b61) !important}
.scp1g:hover{color:light-dark(rgb(30,33,38),#f5f5f7) !important}
.scp1h:hover{background:light-dark(rgba(28,31,36,0.075),rgba(255,255,255,0.075)) !important}
.scp1i:hover{background:light-dark(rgba(28,31,36,0.11),rgba(255,255,255,0.11)) !important}
.scp1j: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}
.scp1k: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}
.scp1l:hover{background:light-dark(rgba(28,31,36,0.08),rgba(255,255,255,0.08)) !important;color:light-dark(#17202e,#f0f0f2) !important}
.scp1m:hover{{{ v.hover }} !important}
.scp1n:hover{background:light-dark(rgb(226,229,234),#262e3d) !important}
.scp1o: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}
.scp1p:hover{border-color:light-dark(rgba(28,31,36,0.1),rgba(255,255,255,0.1)) !important}
.scp1q: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}
.scp1r:hover{background:light-dark(#ffffff,#0d121b) !important}
.scp1s: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}
.scp1t:hover{filter:brightness(1.3) !important;cursor:default !important}
.scp1u:hover{filter:brightness(1.22) !important}
.scp1v:hover{z-index:3 !important;filter:brightness(1.35) drop-shadow(0 0 6px rgba(240,240,242,0.6)) !important}
.scp1w: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}
.scp1x:hover{border-color:light-dark(rgba(28,31,36,0.12),rgba(255,255,255,0.12)) !important}
.scp1y: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}
.scp1z: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}
.scp20:hover{background:light-dark(rgba(28,31,36,0.025),rgba(255,255,255,0.025)) !important}
.scp21: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}
.scp22: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}
.scp23:hover{background:light-dark(rgba(28,31,36,0.1),rgba(255,255,255,0.1)) !important;color:light-dark(#17202e,#f0f0f2) !important}
.scp24: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}
.scp25:hover{background:#ff5b51 !important}
.scp26:hover{opacity:0.88 !important}
.scp27:hover{background:light-dark(rgba(28,31,36,0.09),rgba(255,255,255,0.09)) !important;color:light-dark(#17202e,#f0f0f2) !important}
.scp28: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}
.scp29:active{transform:scale(.94) !important}
.scp2a:hover{color:light-dark(#17202e,#f0f0f2) !important;background:light-dark(rgba(28,31,36,0.045),rgba(255,255,255,0.045)) !important}
.scp2b:hover{border-color:light-dark(rgba(28,31,36,0.2),rgba(255,255,255,0.2)) !important}
.scp2c:hover{background:rgba(255,69,58,0.14) !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:anywhere}
.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:anywhere;line-height:1.25!important}
.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}

.sl-account-fallback{position:fixed;z-index:10000;inset:16px 16px auto auto;width:min(440px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;padding:16px;box-sizing:border-box;background:light-dark(rgb(240,243,248),#101723);color:light-dark(rgb(33,36,41),#e8edf7);border:1px solid light-dark(rgb(214,217,222),#344052);border-radius:12px;font:14px/1.5 system-ui,sans-serif}

/* 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}
}

/* 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; }
.sl-market-status > button { border: 0; 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/skeleton.css */
/* THE SHAPE OF THE INTERFACE WHILE IT HAS NOTHING TO PUT IN IT.
 *
 * The export cannot be mounted before a real row exists - it reads the first
 * row of its universe unguarded on every screen - so the wait was the design's
 * 140x3 loading bar over an empty page. This draws the layout underneath it,
 * which is what the wait is actually for: a reader learns where the watchlist,
 * the header and the cards will be before the first number arrives.
 *
 * IT SPEAKS THE EXPORT'S MATERIAL AND NOT A SECOND ONE. Every value below is
 * read out of `Terminal v2.dc.html`: surface rgba(255,255,255,0.045) over
 * #0a0e16, hairline 1px rgba(255,255,255,0.09), the light edge
 * inset 0 1px 0 rgba(255,255,255,0.09), radii 9 to 14px, and the dominant
 * easing cubic-bezier(.2,.8,.2,1). A skeleton in some other grey would be a
 * second drawing of the same product.
 *
 * NOTHING HERE MAY LOOK LIKE A VALUE. The blocks are bars, never digits and
 * never a chart line: a placeholder shaped like a price is a number nobody
 * reported, which is the one thing this interface must not draw.
 *
 * TWO MEASURED RULES FROM THIS REPOSITORY'S OWN HISTORY.
 *
 * A hidden document runs no animations, so a skeleton whose first frame is
 * invisible stays invisible in a background tab. The sweep therefore moves a
 * highlight ACROSS an already-visible surface rather than fading the surface
 * in: paused, it is a plain card, which is a usable thing to look at.
 *
 * And `prefers-reduced-motion` stops the sweep rather than slowing it. The
 * surface keeps its own colour, so the skeleton still reads as a skeleton with
 * no movement at all. */

.sl-skel {
  position: fixed;
  inset: 0;
  /* UNDER the export's loading bar, which sits at 99999. The bar is rendered
   * BEFORE this in the DOM on purpose - it carries the main landmark, and the
   * loading state's own regression asserts that the landmark is the first
   * element - so the stacking here is what puts the bar on top, not the order. */
  z-index: 9000;
  background: light-dark(#f5f7fb,#0a0e16);
  overflow: hidden;
}

.sl-skel-art {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 232px 1fr;
  gap: 14px;
  padding: 14px;
  box-sizing: border-box;
}

/* One surface, used for every block, so the whole screen is one material. */
.sl-skel-card,
.sl-skel-bar {
  position: relative;
  overflow: hidden;
  background: light-dark(rgba(28,31,36,0.045),rgba(255, 255, 255, 0.045));
  box-shadow: inset 0 1px 0 light-dark(rgba(28,31,36,0.09),rgba(255, 255, 255, 0.09));
}

.sl-skel-card {
  border: 1px solid light-dark(rgba(28,31,36,0.09),rgba(255, 255, 255, 0.09));
  border-radius: 13px;
}

.sl-skel-bar {
  border-radius: 6px;
  /* A bar is a placeholder for a LABEL, not for a figure: the widths below are
   * deliberately uneven so the block never resolves into a column of numbers. */
  height: 11px;
}

.sl-skel-rail { display: grid; grid-template-rows: 44px 1fr; gap: 10px; min-height: 0; }
.sl-skel-main { display: grid; grid-template-rows: 44px 1fr; gap: 14px; min-height: 0; }
.sl-skel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); grid-auto-rows: minmax(120px, 1fr); gap: 14px; min-height: 0; }

/* The rows inside the rail card: a watchlist is a column of names, so the
 * placeholder is a column of two bars per row and nothing that could read as a
 * price. */
.sl-skel-rows { display: grid; gap: 14px; padding: 14px; }
.sl-skel-row { display: grid; grid-template-columns: 1fr 52px; gap: 10px; align-items: center; }

.sl-skel-lines { display: grid; gap: 10px; padding: 14px; align-content: start; }

/* THE SWEEP. One animation on a pseudo-element, so it composites on its own
 * layer and never changes the geometry of the card it crosses. */
.sl-skel-card::after,
.sl-skel-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    light-dark(rgba(28,31,36,0),rgba(255, 255, 255, 0)) 20%,
    light-dark(rgba(28,31,36,0.055),rgba(255, 255, 255, 0.055)) 50%,
    light-dark(rgba(28,31,36,0),rgba(255, 255, 255, 0)) 80%);
  /* 220% wide and travelling a fixed -60% to 160%: the position stays inside
   * the element at every frame. A gradient parked outside its own box was a
   * real defect in this repository once - the AI working line was invisible
   * for half its cycle - so the travel is written as a transform over a
   * known-size layer rather than as a background-position percentage. */
  width: 220%;
  transform: translate3d(-60%, 0, 0);
  /* INVISIBLE UNTIL THE ANIMATION RAISES IT, and that is the load-bearing
   * part rather than a nicety. A hidden document runs no animations at all -
   * measured in this repository's own browser pane: five samples, one single
   * frame - so whatever the first frame looks like is what a background tab
   * shows for as long as it stays in the background. With the highlight
   * parked at full strength it would sit as a bright band across every card;
   * at zero the card is simply a card, which is the usable thing to look at.
   * The same line is what `prefers-reduced-motion` falls back to. */
  opacity: 0;
  animation: sl-skel-sweep 1.5s cubic-bezier(.2, .8, .2, 1) infinite;
  will-change: transform, opacity;
}

@keyframes sl-skel-sweep {
  from { transform: translate3d(-60%, 0, 0); opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  to { transform: translate3d(160%, 0, 0); opacity: 0; }
}

/* Stop moving, stay readable. Not `animation: none` on the surface itself:
 * the card keeps its colour and its light edge, so the screen still shows the
 * shape of the interface - only without the sweep. */
@media (prefers-reduced-motion: reduce) {
  /* `animation: none` alone is enough now: the base state of the highlight is
   * already invisible, so stopping the animation leaves a plain card rather
   * than a frozen band. The opacity is restated anyway, because relying on
   * two rules agreeing is how a frozen bright band would come back. */
  .sl-skel-card::after,
  .sl-skel-bar::after { animation: none; opacity: 0; }
}

/* The one line a screen reader gets, because the design draws no text at all
 * during the wait and "nothing" is not an answer to "what is happening". Not a
 * visible addition: it is clipped to a single pixel. */
.sl-skel-say {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Below the export's own breakpoint the rail is not on screen, so neither is
 * its placeholder: a skeleton that promises a panel the interface will not
 * show is a worse answer than one that shows less. */
@media (max-width: 767px) {
  .sl-skel-art { grid-template-columns: 1fr; }
  .sl-skel-rail { display: none; }
}

/* THE ONE VISIBLE SENTENCE, and only when the wait has stopped being a wait.
 *
 * While a row is still on its way the line above is clipped to a pixel,
 * because the design draws no text during the wait and an added paragraph
 * would be a second interface. Once the source has ANSWERED with a failure
 * there is no row coming, so the bar overhead runs for ever: the reader is
 * looking at an empty interface with no way to learn why, which is the state
 * this notice exists for and the only state it appears in.
 *
 * It sits above the skeleton art in the same material - surface
 * rgba(255,255,255,0.045) over #0a0e16, hairline 0.09, light edge, radius 13 -
 * so it reads as part of the design rather than as a browser error. No icon,
 * no colour of alarm: the sentence is the content, and red here would claim a
 * severity this screen cannot judge. */
.sl-skel-note {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  max-width: min(440px, calc(100% - 28px));
  margin: 0;
  display: grid;
  gap: 8px;
  box-sizing: border-box;
  padding: 16px 18px;
  background: light-dark(rgba(28,31,36,0.045),rgba(255, 255, 255, 0.045));
  border: 1px solid light-dark(rgba(28,31,36,0.09),rgba(255, 255, 255, 0.09));
  border-radius: 13px;
  box-shadow: inset 0 1px 0 light-dark(rgba(28,31,36,0.09),rgba(255, 255, 255, 0.09)), 0 12px 30px light-dark(rgba(15,23,42,0.1125),rgba(0, 0, 0, 0.45));
  text-align: center;
  font: 13px/1.5 ui-sans-serif, system-ui, sans-serif;
}

/* #f0f0f2 and #8e8e96: the design's own foreground and the lowest muted step
 * this repository's contrast floor admits ON THIS SURFACE. A raised card is
 * lighter than the page, which is exactly where muted text drifts under
 * 4.5:1 - measured once already and recorded. */
.sl-skel-note strong { color: light-dark(#17202e,#f0f0f2); font-weight: 600; }
.sl-skel-note span { color: light-dark(rgb(56,59,64),#8e8e96); }

/* 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}

/* 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 SKELETON IS OURS, NOT THE EXPORT'S, WHICH IS EXACTLY WHY THE RULE ABOVE
 * MISSES IT. Every selector up to here reads an INLINE style attribute,
 * because that is how the export writes its fixed layers. `.sl-skel` is a
 * class in `desktop/skeleton.css`, so none of them can match it -- and it is
 * `position: fixed; inset: 0` at z-index 9000. While the first quote row is in
 * flight it therefore covered the caption completely, and the three native
 * buttons stayed on top of it because Windows draws them over all web content:
 * a dark strip carrying the buttons and nothing else, over empty card
 * outlines, which is exactly what the owner photographed.
 *
 * MEASURED RATHER THAN INFERRED, in the PACKAGED window with no market key:
 * `elementFromPoint` at the centre of the caption returned `.sl-skel-card`,
 * while the caption itself reported `visibility: visible` and carried the text
 * `StockLife Terminal`. In the same capture the export's own loading bar sat
 * at the centre of 36..960 rather than of 0..960 -- so the inline rule above
 * was working the whole time, and the skeleton was the single layer of that
 * state which escaped it.
 *
 * NO `!important`, and that is the difference from its neighbours: they
 * override an inline attribute, this one overrides an ordinary class rule, and
 * `.sl-shell .sl-skel` already outranks `.sl-skel` on specificity. */
.sl-shell .sl-skel { top: var(--sl-titlebar-height); }

/* AND ITS SIBLING IN THAT STATE WAS WORSE, because this one takes CLICKS.
 * `.sl-account-fallback` is the card the loading state pins at the top right
 * so that signing in stays reachable while no quote row has arrived -- also
 * ours, also a class, so the inline rules above miss it for the same reason
 * the skeleton did. It is `position: fixed; inset: 16px 16px auto auto` at
 * z-index 10000, which is sixteen pixels from the VIEWPORT top, and in this
 * shell the first thirty-six of those belong to the caption.
 *
 * MEASURED IN THE RUNNING WINDOW rather than read off the rule: at 1440 the
 * card occupies x 984..1423 and its top twenty rows (y 16..35) were drawn
 * inside the caption. The three native buttons cover the rightmost 138
 * pixels, so 122 PIXELS OF A VISIBLE, CLICKABLE CARD SAT UNDER MINIMISE,
 * MAXIMISE AND CLOSE -- and Windows gives those priority over all web
 * content, so a click aimed at the card operated the window instead. That is
 * the owner's second report: the window disappears while the application
 * keeps running, which is what minimise looks like. The earlier capture of
 * the loaded interface has no such card, so only this one state could do it.
 *
 * THE HEIGHT MOVES WITH THE TOP. `max-height: calc(100vh - 32px)` is measured
 * against the viewport as well; pushed down by the caption and left alone it
 * would reach exactly one caption past the bottom of the frame, and a card
 * that scrolls internally would hide its last row off the window. */
.sl-shell .sl-account-fallback {
  top: calc(16px + var(--sl-titlebar-height));
  max-height: calc(100vh - 32px - var(--sl-titlebar-height));
}

/* 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;
}