(see HERO_HTML in enhance-routes.js for why). The wrapper therefore has to reproduce

's own geometry by hand: desktop main has padding-left:288px for the fixed sidebar, and the content box inside it is inset a further 60px on both sides (measured: content spans x=348..1380 at 1440 wide) <=991px the sidebar is display:none and main drops to padding-left:0, with the content box inset 34px (content spans x=34..) Those numbers come from tools/probe-layout.mjs and tools/probe-hero-placement.mjs, not from guessing. */ #hsh-hero-wrap { padding-left: 288px; } #hsh-hero-wrap > #hsh-hero { margin: 60px 60px 0; } @media (max-width: 991px) { #hsh-hero-wrap { padding-left: 0; } #hsh-hero-wrap > #hsh-hero { margin: 20px 34px 0; } } #hsh-hero { position: relative; padding: 22px; border: 1px solid var(--hsh-border); border-radius: var(--hsh-radius); color: var(--hsh-text); background: radial-gradient(130% 150% at 0% 0%, rgba(129, 140, 248, 0.16), transparent 55%), radial-gradient(110% 130% at 100% 0%, rgba(34, 211, 238, 0.11), transparent 55%), var(--hsh-surface); overflow: hidden; } #hsh-hero[hidden] { display: none; } html.light #hsh-hero { background: radial-gradient(130% 150% at 0% 0%, rgba(79, 70, 229, 0.10), transparent 55%), radial-gradient(110% 130% at 100% 0%, rgba(8, 145, 178, 0.08), transparent 55%), var(--hsh-surface); } #hsh-hero .hsh-eyebrow { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px; padding: 4px 10px; border: 1px solid var(--hsh-border-strong); border-radius: 999px; background: rgba(129, 140, 248, 0.10); color: var(--hsh-text); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } #hsh-hero .hsh-eyebrow .hsh-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hsh-accent-2); box-shadow: 0 0 8px var(--hsh-accent-2); } #hsh-hero h2 { margin: 0 0 8px; font-size: 26px; line-height: 1.25; font-weight: 700; letter-spacing: -0.015em; color: var(--hsh-text); } #hsh-hero h2 .hsh-grad { background: linear-gradient(92deg, var(--hsh-accent), var(--hsh-accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } #hsh-hero p.hsh-lede { margin: 0 0 18px; max-width: 74ch; color: var(--hsh-muted); font-size: 14px; line-height: 1.65; } #hsh-hero .hsh-label { margin: 0 0 9px; color: var(--hsh-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; } #hsh-hero .hsh-calcs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; } #hsh-hero a.hsh-calc { display: block; padding: 13px 14px; border: 1px solid var(--hsh-border); border-radius: 11px; background: var(--hsh-surface-2); color: var(--hsh-text); text-decoration: none; transition: border-color .16s ease, transform .16s ease, background .16s ease; } #hsh-hero a.hsh-calc:hover { border-color: var(--hsh-accent); background: var(--hsh-surface-3); transform: translateY(-2px); } #hsh-hero a.hsh-calc .hsh-calc-name { display: block; font-size: 14px; font-weight: 650; line-height: 1.3; } #hsh-hero a.hsh-calc .hsh-calc-sub { display: block; margin-top: 3px; color: var(--hsh-muted); font-size: 11.5px; line-height: 1.4; } #hsh-hero .hsh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } #hsh-hero .hsh-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--hsh-border-strong); border-radius: 9px; background: var(--hsh-surface-2); color: var(--hsh-text); font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; transition: border-color .16s ease, background .16s ease; } #hsh-hero .hsh-btn:hover { border-color: var(--hsh-accent); background: var(--hsh-surface-3); } #hsh-hero .hsh-btn.hsh-primary { border-color: transparent; background: linear-gradient(92deg, var(--hsh-accent), var(--hsh-accent-2)); color: #0b0b12; } html.light #hsh-hero .hsh-btn.hsh-primary { color: #ffffff; } #hsh-hero .hsh-btn kbd { padding: 1px 5px; border: 1px solid var(--hsh-border-strong); border-radius: 5px; background: rgba(127, 127, 127, 0.18); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; font-weight: 600; } #hsh-hero .hsh-btn.hsh-primary kbd { border-color: rgba(0,0,0,.25); background: rgba(0,0,0,.16); } #hsh-hero .hsh-stats { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--hsh-border); color: var(--hsh-muted); font-size: 12px; line-height: 1.6; } #hsh-hero .hsh-stats b { color: var(--hsh-text); font-weight: 650; } /* ------------------------------------------------------------ palette ---- */ #hsh-palette { position: fixed; inset: 0; z-index: 2147483000; display: none; } #hsh-palette[data-open="true"] { display: block; } #hsh-palette .hsh-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } #hsh-palette .hsh-box { position: relative; width: min(660px, 92vw); margin: 11vh auto 0; border: 1px solid var(--hsh-border-strong); border-radius: var(--hsh-radius); background: var(--hsh-surface); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55); overflow: hidden; } #hsh-palette .hsh-input-row { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--hsh-border); } #hsh-palette .hsh-input-row svg { flex: none; color: var(--hsh-muted); } #hsh-palette input.hsh-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--hsh-text); font-family: inherit; font-size: 15px; } #hsh-palette input.hsh-input::placeholder { color: var(--hsh-muted); } #hsh-palette .hsh-results { max-height: 56vh; overflow-y: auto; padding: 6px; } #hsh-palette .hsh-item { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 9px; color: var(--hsh-text); text-decoration: none; cursor: pointer; } #hsh-palette .hsh-item[data-active="true"] { background: var(--hsh-surface-3); box-shadow: inset 2px 0 0 var(--hsh-accent); } #hsh-palette .hsh-item .hsh-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } #hsh-palette .hsh-item .hsh-item-title { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #hsh-palette .hsh-item .hsh-item-title mark { background: transparent; color: var(--hsh-accent); font-weight: 750; } #hsh-palette .hsh-item .hsh-item-sub { display: block; margin-top: 2px; color: var(--hsh-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #hsh-palette .hsh-item .hsh-item-group { flex: none; padding: 2px 8px; border: 1px solid var(--hsh-border); border-radius: 999px; background: var(--hsh-surface-2); color: var(--hsh-muted); font-size: 10.5px; font-weight: 600; white-space: nowrap; } #hsh-palette .hsh-empty { padding: 26px 16px; color: var(--hsh-muted); font-size: 13px; text-align: center; } #hsh-palette .hsh-foot { display: flex; flex-wrap: wrap; gap: 14px; padding: 9px 16px; border-top: 1px solid var(--hsh-border); background: var(--hsh-surface-2); color: var(--hsh-muted); font-size: 11px; } #hsh-palette .hsh-foot span { display: inline-flex; align-items: center; gap: 5px; } #hsh-palette .hsh-foot kbd { padding: 1px 5px; border: 1px solid var(--hsh-border-strong); border-radius: 5px; background: var(--hsh-surface-3); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; } /* ----------------------------------------------------------------- fab --- */ #hsh-fab { position: fixed; right: 20px; bottom: 20px; z-index: 2147482000; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--hsh-border-strong); border-radius: 999px; background: var(--hsh-surface); color: var(--hsh-text); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.42); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; transition: transform .16s ease, border-color .16s ease; } #hsh-fab:hover { transform: translateY(-2px); border-color: var(--hsh-accent); } #hsh-fab kbd { padding: 1px 5px; border: 1px solid var(--hsh-border-strong); border-radius: 5px; background: var(--hsh-surface-2); color: var(--hsh-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; } /* ----------------------------------------------------------- responsive -- */ @media (max-width: 900px) { #hsh-hero .hsh-calcs { grid-template-columns: repeat(2, minmax(0, 1fr)); } #hsh-hero h2 { font-size: 22px; } } @media (max-width: 560px) { #hsh-hero { padding: 17px; } #hsh-hero .hsh-calcs { grid-template-columns: 1fr; } #hsh-palette .hsh-box { margin-top: 6vh; } #hsh-fab var { display: none; } #hsh-fab kbd { display: none; } } @media (prefers-reduced-motion: reduce) { #hsh-hero a.hsh-calc, #hsh-hero .hsh-btn, #hsh-fab { transition: none; } #hsh-hero a.hsh-calc:hover, #hsh-fab:hover { transform: none; } }