* { box-sizing: border-box; }
body { margin: 0; background: #f5f7fb; color: #18243b; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.site-picker { max-width: 780px; margin: 0 auto; padding: 96px 24px 48px; }
.site-picker-label { color: #2563eb; font-size: 15px; font-weight: 700; margin: 0 0 16px; }
h1 { font-size: clamp(26px, 4vw, 36px); letter-spacing: -1px; line-height: 1.4; margin: 0 0 16px; word-break: keep-all; }
.site-picker-description { color: #526079; line-height: 1.7; word-break: keep-all; }
.site-picker-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 36px 0 24px; }
.site-picker-card { display: flex; flex-direction: column; gap: 24px; padding: 32px 24px; background: white; border: 1px solid #dce3ef; border-top: 4px solid #2563eb; border-radius: 16px; color: #34445d; text-decoration: none; line-height: 1.6; }
.site-picker-card--living { border-top-color: #0f766e; }
.site-picker-card:hover { border-color: #2563eb; background: #eff6ff; }
.site-picker-card--living:hover { border-color: #0f766e; background: #f0fdfa; }
.site-picker-card:focus-visible { outline: 3px solid #18243b; outline-offset: 4px; }
.site-picker-name { font-size: 26px; font-weight: 750; color: #18243b; }
.site-picker-note { font-size: 14px; line-height: 1.7; color: #64748b; word-break: keep-all; }
@media (max-width: 560px) { .site-picker { padding-top: 56px; } .site-picker-options { grid-template-columns: 1fr; gap: 16px; } }