.home-hero { padding-right: clamp(310px, 31vw, 500px); }
.hero-portrait { position: absolute; right: clamp(35px, 7vw, 110px); bottom: 11%; z-index: 2; width: clamp(220px, 23vw, 340px); margin: 0; }
.hero-portrait::before { content: ""; position: absolute; inset: 16px -16px -16px 16px; border: 1px solid var(--rose); border-radius: 48% 48% 18px 18px; }
.hero-portrait img { display: block; position: relative; width: 100%; max-height: 440px; object-fit: cover; object-position: center top; border-radius: 48% 48% 18px 18px; filter: grayscale(.15) sepia(.08); background: var(--paper2); }
.hero-portrait figcaption { position: relative; margin-top: 18px; font: 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: center; }
@media (max-width: 1100px) { .home-hero { padding-right: clamp(240px, 31vw, 340px); } .hero-portrait { right: 30px; width: 220px; } }
@media (max-width: 720px) { .home-hero { padding-right: 24px; padding-bottom: 390px; align-items: flex-start; } .hero-portrait { left: 24px; right: auto; bottom: 70px; width: 210px; } .home-hero .network { bottom: 0; top: auto; } }

html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; --paper:#191719; --paper2:#242024; --ink:#f1e9e5; --muted:#b8aaae; --pink:#d89bb0; --rose:#805a68; --wine:#bc7f94; --line:#40373b; }
html[data-theme="dark"] body::before { opacity:.22; }
html[data-theme="dark"] .rail,
html[data-theme="dark"] .mobile-head { background:rgba(25,23,25,.92); }
html[data-theme="dark"] .card { background:#1d1a1c; }
html[data-theme="dark"] .card:hover { background:#292327; box-shadow:0 18px 45px rgba(0,0,0,.25); }
html[data-theme="dark"] .terminal { background:#0e0d0e; color:#e6bdcb; }
html[data-theme="dark"] .button.primary { color:#1a1517; }
html[data-theme="dark"] .hero-portrait img { filter:grayscale(.1) brightness(.88); }
.rail-bottom { display:grid; gap:22px; }
.theme-toggle { display:inline-flex; align-items:center; gap:9px; width:max-content; border:1px solid var(--line); background:transparent; color:var(--ink); padding:8px 11px; cursor:pointer; font:12px var(--mono); transition:.25s; }
.theme-toggle:hover { background:var(--ink); color:var(--paper); transform:translateY(-2px); }
.theme-toggle b { font:inherit; text-transform:uppercase; letter-spacing:.08em; }
.mobile-actions { display:flex; align-items:center; gap:8px; }
.mobile-head .theme-toggle { padding:8px 10px; }
@media (min-width:901px) { .mobile-head .theme-toggle { display:none; } }
@media (max-width:900px) { .rail > .rail-bottom .theme-toggle { display:none; } }