/* Silver Lake in the portal (Oct 8 2026).
   Silver Lake's own identity (ink / lake / brass / mist, Source Serif 4 + Public Sans) is used ONLY where
   Silver Lake appears as the company: its name block and the "see it live" card. Everything else on a
   desk stays in the portal's style. The framed screenshot follows pegasus4i.ai's .shot pattern. */
:root{
  --sl-ink:#0f2337; --sl-lake:#1d5c7a; --sl-brass:#b8893f; --sl-mist:#f1f5f8; --sl-line:#d8e1e8;
  --sl-body:#3c4f60; --sl-muted:#5a6b7a;
  --sl-serif:"Source Serif 4", Georgia, serif; --sl-sans:"Public Sans", "IBM Plex Sans", system-ui, sans-serif;
}

/* the company name block in a desk's top bar */
.slid{display:inline-flex; align-items:center; gap:9px; background:var(--sl-mist); border:1px solid var(--sl-line); border-radius:9px; padding:4px 11px 4px 4px; text-decoration:none; color:var(--sl-ink); flex-shrink:0;}
.slid img{display:block; width:28px; height:28px; border-radius:6px;}
.slwm{display:flex; flex-direction:column; line-height:1;}
.slwm b{font-family:var(--sl-serif); font-weight:600; font-size:16px; letter-spacing:-.005em; color:var(--sl-ink);}
.slwm small{font-family:var(--sl-sans); font-size:7.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--sl-lake); margin-top:3px;}
.sldesk{font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint, #8E8A81); min-width:0;}

/* "See it live at Silver Lake" card at the top of each desk */
.sllive{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,300px); gap:18px 26px; align-items:center; margin:26px 0 0; padding:18px 20px; background:var(--sl-mist); border:1px solid var(--sl-line); border-radius:12px; color:var(--sl-body); font-family:var(--sl-sans);}
.sllive .k{font-family:var(--sl-sans); font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--sl-lake); margin:0 0 6px;}
.sllive h2{font-family:var(--sl-serif); font-weight:600; font-size:21px; line-height:1.2; color:var(--sl-ink); margin:0 0 6px; letter-spacing:-.005em;}
.sllive p{font-size:14px; line-height:1.55; margin:0; color:var(--sl-body);}
.sllive .go{display:inline-block; margin-top:12px; font-family:var(--sl-sans); font-size:14px; font-weight:600; color:#fff; background:var(--sl-lake); border-radius:8px; padding:9px 14px; text-decoration:none;}
.sllive .go:hover{background:var(--sl-ink);}
.sllive .fine{margin-top:10px; font-size:12px; color:var(--sl-muted);}
@media (max-width:720px){ .sllive{grid-template-columns:minmax(0,1fr); padding:16px;} .sllive .shot{max-width:280px;} .sllive h2{font-size:19px;} }

/* framed screenshots (browser bar + 16:10 image). .shot = on the portal's dark ground; .shot.lt = on a light Silver Lake surface */
.shot{display:block; border-radius:10px; overflow:hidden; border:1px solid var(--line-strong, rgba(255,255,255,.15)); background:var(--panel, #141619); text-decoration:none; color:var(--muted, #B4B0A7); transition:border-color .15s, transform .15s; min-width:0;}
a.shot:hover{border-color:rgba(76,184,230,.6); transform:translateY(-2px);}
.shot-bar{display:flex; align-items:center; gap:6px; padding:7px 11px; background:var(--tile, #191C20); border-bottom:1px solid var(--line, rgba(255,255,255,.09));}
.shot-bar i{width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.16); flex-shrink:0;}
.shot-bar em{margin-left:7px; font-style:normal; font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:10.5px; letter-spacing:.02em; color:var(--faint, #8E8A81); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;}
.shot img{display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:top;}
.shot-cap{display:block; padding:10px 13px 12px; font-size:13px; line-height:1.45;}
.shot-cap b{display:block; font-weight:600; font-size:14px; color:var(--text, #ECE9E2); margin-bottom:2px;}
.shot.lt{background:#fff; border-color:var(--sl-line);}
.shot.lt .shot-bar{background:#e8eef3; border-bottom-color:var(--sl-line);}
.shot.lt .shot-bar i{background:#b9c7d2;}
.shot.lt .shot-bar em{color:var(--sl-muted);}
a.shot.lt:hover{border-color:var(--sl-lake);}
@media (prefers-reduced-motion: reduce){ .shot{transition:none;} a.shot:hover{transform:none;} }