:root {
  color-scheme: dark;
  --ink: #14141A;
  --cream: #F5F1EB;
  --cream-soft: rgba(245,241,235,.72);
  --cream-mute: rgba(245,241,235,.56);
  --hair: rgba(245,241,235,.14);
  --coral: #E97B6A;
  --pad: clamp(20px,3.2vw,48px);
  --font-wordmark: 'Space Grotesk',sans-serif;
  --font-display: 'JetBrains Mono',monospace;
  --font-body: Inter,system-ui,sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin:0; color:var(--cream); background:var(--ink); font:400 16px/1.6 var(--font-body); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
[hidden] { display:none !important; }
::selection { background:rgba(245,241,235,.22); }
.sw-page { max-width:1440px; min-height:100dvh; padding:40px var(--pad); margin:0 auto; }
.sw-catalog { max-width:1080px; margin:0 auto; }
.sw-intro { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; align-items:end; padding:64px 0 42px; }
.sw-intro h1 { margin:0; font:600 clamp(36px,4.6vw,48px)/1.05 var(--font-display); }
.sw-intro p { margin:0; font-size:17px; color:var(--cream-soft); max-width:37ch; }
.sw-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px 32px; }
.sw-project { min-width:0; display:flex; flex-direction:column; }
.sw-preview { position:relative; margin:0 0 22px; aspect-ratio:4/3; overflow:hidden; }
.sw-preview > a { position:absolute; inset:0; display:flex; justify-content:center; align-items:center; height:100%; }
.sw-preview img { display:block; max-width:100%; }
.sw-hardware { background:#FAFAF5; }
.sw-hardware img { width:100%; height:100%; object-fit:cover; }
.sw-mobile { background:#16415A; }
.sw-mobile img { height:calc(100% - 44px); width:auto; border-radius:18px; }
.sw-controls { background:#2E2A5A; }
.sw-controls img { width:132px; height:132px; }
.sw-blinddrop { background:#1F3D2C; }
.sw-blinddrop img { width:100%; height:100%; object-fit:contain; }
.sw-wiki { background:#FAFAF5; color:#14141A; }
.sw-code-preview { width:100%; padding:24px; }
.sw-wiki .sw-code-preview { max-width:340px; }
.sw-preview-label { font:400 11px/1.5 var(--font-display); opacity:.56; margin-bottom:22px; }
.sw-code-preview pre { margin:0; padding:0; font:400 clamp(11px,1.4vw,14px)/1.8 var(--font-display); white-space:pre-wrap; overflow-wrap:anywhere; }
.sw-code-preview code { font:inherit; }
.sw-title { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sw-title h2 { margin:0; font:600 23px/1.25 var(--font-display); letter-spacing:-.03em; }
.sw-open { display:grid; place-items:center; width:30px; height:30px; color:var(--cream-soft); font-size:21px; }
.sw-title a:hover { color:var(--coral); }
.sw-description { margin:12px 0 20px; color:var(--cream-soft); max-width:49ch; }
.sw-meta { margin-top:auto; border-top:1px solid var(--hair); padding-top:13px; display:flex; align-items:center; flex-wrap:wrap; gap:10px 16px; color:var(--cream-mute); font:400 12px/1.5 var(--font-display); }
.sw-meta a { display:inline-flex; align-items:center; gap:5px; }
.sw-meta svg { width:14px; height:14px; flex:none; }
.sw-meta a:hover { color:var(--cream); }
.sw-meta .sw-repo { margin-left:auto; color:var(--cream-soft); }
.site-footer { display:flex; justify-content:flex-end; align-items:center; padding-top:22px; margin-top:56px; }
.site-footer-inner { font-size:14.5px; letter-spacing:.01em; color:var(--cream-mute); }
@media (max-width:760px) {
  .sw-intro { grid-template-columns:1fr; gap:20px; padding-top:48px; padding-bottom:32px; }
  .sw-intro p { max-width:54ch; }
  .sw-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:42px 24px; }
  .sw-code-preview { padding:20px 16px; }
  .sw-title h2 { font-size:21px; }
  .sw-meta .sw-repo { margin-left:0; }
}
@media (max-width:580px) {
  .sw-page { padding-top:26px; padding-bottom:30px; }
  .sw-grid { grid-template-columns:minmax(0,1fr); gap:40px; }
  .sw-code-preview { padding:24px; }
  .sw-code-preview pre { font-size:clamp(11px,3.3vw,14px); }
  .sw-meta .sw-repo { margin-left:auto; }
  .sw-intro h1 { font-size:36px; }
  .site-footer { margin-top:40px; }
}