/* Shared tokens for the three restyles — the GetLayers "dark SaaS gallery" language:
   near-black ground, white-alpha surfaces, off-white + violet-grey text, pills, light two-tone headlines. */
:root{
  --bg:#060507; --bg-2:#0c0b0f; --panel:#131218; --panel-2:#1b1b22;
  --fg:#f5f4f7; --soft:#a3a1ad; --dim:#6a6873;
  --glass:rgb(255 255 255 / .045); --glass-2:rgb(255 255 255 / .07); --line:rgb(255 255 255 / .08); --line-2:rgb(255 255 255 / .14);
  --warm:linear-gradient(90deg,#ffb27a,#ff7a59); --warm-1:#ff9a6b;
  --r-pill:999px; --r-card:12px; --r-in:9px;
  --sans:Onest,system-ui,sans-serif; --display:'General Sans',Onest,system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:dark;
}
*{ box-sizing:border-box; margin:0; padding:0 }
html{ background:var(--bg) }
body{ background:var(--bg); color:var(--fg); font:400 15px/1.5 var(--sans); -webkit-font-smoothing:antialiased; overflow-x:clip }
a{ color:inherit; text-decoration:none } button,input{ font:inherit; color:inherit } button{ background:none; border:0; cursor:pointer }
img{ display:block; max-width:100% }
:focus-visible{ outline:2px solid #c9c4ff; outline-offset:2px; border-radius:6px }
.sr-only{ position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap }
.mono{ font-family:var(--mono); font-size:11px; letter-spacing:.02em; color:var(--dim) }
.kbd{ display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 6px; border-radius:6px; border:1px solid var(--line-2); font:500 11px/1 var(--mono); color:var(--soft) }
.badge{ display:inline-flex; align-items:center; gap:8px; padding:5px 12px; border:1px solid var(--line-2); border-radius:var(--r-pill); font-size:13px; color:var(--soft) }
.badge i{ width:6px; height:6px; border-radius:50%; background:var(--warm-1) }
/* Two-tone light headline: first part white, the rest violet-grey. */
.tt{ font-family:var(--display); font-weight:300; letter-spacing:-.03em; line-height:1.06 } .tt em{ font-style:normal; color:var(--soft) }
/* Placeholders for links without a screenshot (same idea as the live app). */
.ph{ display:grid; place-items:center; width:100%; height:100%; background:var(--panel-2); color:var(--soft); font:500 13px/1.2 var(--mono); text-align:center; padding:12px }
.ph-ig{ background:linear-gradient(135deg,#feda75,#fa7e1e 30%,#d62976 60%,#962fbf 80%,#4f5bd5); color:#fff }
.ph-x{ background:#000; color:#fff } .ph-be{ background:#0057ff; color:#fff }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ transition:none!important; animation:none!important } }

/* ---------- mobile category sheet (nav.js) ---------- */
.msheet{ position:fixed; inset:0; z-index:2147483100 }
.msheet-scrim{ position:absolute; inset:0; background:rgb(0 0 0 / .55); opacity:0; transition:opacity .3s }
.msheet-panel{ position:absolute; left:0; right:0; bottom:0; max-height:86svh; display:flex; flex-direction:column; background:var(--panel); border-top:1px solid var(--line-2); border-radius:20px 20px 0 0; transform:translateY(100%); transition:transform .38s cubic-bezier(.2,.8,.2,1); padding-bottom:env(safe-area-inset-bottom) }
.msheet.on .msheet-scrim{ opacity:1 } .msheet.on .msheet-panel{ transform:none }
.msheet-head{ display:flex; justify-content:space-between; align-items:center; padding:16px 18px 10px; font:500 15px var(--sans) }
.msheet-head::before{ content:""; position:absolute; left:50%; top:7px; width:36px; height:4px; margin-left:-18px; border-radius:4px; background:var(--line-2) }
.msheet-x{ width:36px; height:36px; border-radius:50%; background:var(--glass-2); font-size:20px; line-height:1 }
.msheet-body{ overflow:auto; padding:4px 10px 24px; overscroll-behavior:contain }
.msheet-body a, .msheet-body summary{ display:flex; justify-content:space-between; align-items:center; gap:10px; min-height:44px; padding:0 10px; border-radius:10px; color:var(--soft); font-size:15px; cursor:pointer }
.msheet-body a span, .msheet-body summary span{ font:11px var(--mono); color:var(--dim) }
.msheet-body a[aria-current]{ background:var(--fg); color:var(--bg) } .msheet-body a[aria-current] span{ color:#55535c }
.msheet-body .ms-top{ color:var(--fg) }
.ms-root{ border-top:1px solid var(--line); margin-top:4px; padding-top:4px }
.ms-root > summary{ list-style:none; color:var(--fg); font-weight:500 } .ms-root > summary::-webkit-details-marker{ display:none }
.ms-root > summary::after{ content:"+"; font:300 20px var(--sans); color:var(--soft); margin-left:6px; transition:transform .25s } .ms-root[open] > summary::after{ transform:rotate(45deg) }
.ms-root > summary span{ margin-left:auto }
.ms-l1{ padding-left:22px!important } .ms-l2{ padding-left:22px!important; color:var(--fg)!important } .ms-l3{ padding-left:40px!important; font-size:14px!important }
.mbtn{ display:none; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; border:1px solid var(--line-2); background:rgb(19 18 24 / .78); font-size:14px }
.mbtn svg{ width:15px; height:15px }
@media (prefers-reduced-motion:reduce){ .msheet-panel, .msheet-scrim{ transition:none } }