:root { --nb-accent: #F1552C; --nb-accent-deep: #B63B1B; --nb-accent-hover: #DA4620; --nb-paper: #F7F5F1; --nb-card: #FCFBF8; --nb-ink: #17120F; --nb-ink-muted: #4B4540; --nb-ink-dim: #6E665E; }
:focus-visible { outline: 3px solid var(--nb-accent-deep); outline-offset: 4px; }
.nb-skip-link { position: absolute; left: 16px; top: -80px; z-index: 200; padding: 12px 18px; background: var(--nb-ink); color: var(--nb-paper); border-radius: 8px; }
.nb-skip-link:focus { top: 12px; }
.nb-migration-notice { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px max(24px, calc((100vw - 1160px)/2)); background: #EFEDE8; border-bottom: 1px solid #D9D3CB; color: #17120F; font-family: var(--nb-font-sans), system-ui, sans-serif; font-size: 14px; line-height: 1.5; }
.nb-migration-notice > div { max-width: 78ch; display: grid; gap: 3px; }
.nb-migration-notice strong { font-size: 14px; font-weight: 650; }
.nb-migration-notice a { flex-shrink: 0; text-decoration: underline; text-underline-offset: 4px; font-weight: 600; }
.nb-migration-notice span { color: #4B4540; }
.nb-migration-page { width: min(100% - 48px, 900px); padding-top: 80px; padding-bottom: 96px; min-height: 55vh; }
.nb-migration-page h1 { max-width: 21ch; font-size: clamp(32px, 5vw, 56px); line-height: 1.12; margin: 18px 0 24px; }
.nb-migration-page p { max-width: 68ch; color: var(--nb-ink-muted); line-height: 1.7; font-family: var(--nb-font-sans), system-ui, sans-serif; }
.nb-migration-page .lede { font-size: 18px; margin-bottom: 24px; }
.nb-migration-page .nb-btn { margin: 20px 12px 0 0; }
.nb-migration-contact { border: 1px solid #D9D3CB; border-radius: 14px; padding: 24px; background: var(--nb-card); }
.nb-migration-contact h2 { font-size: 22px; }
.nb-migration-preview, .nb-migration-docs { font-family: var(--nb-font-sans), system-ui, sans-serif; font-size: 14px; line-height: 1.6; color: #4B4540; background: #EFEDE8; padding: 14px 18px; border: 1px solid #D9D3CB; border-radius: 8px; }
.nb-btn--ember { color: #17120F; }
.nb-btn--ember:hover { background: #B63B1B; color: #F7F5F1; }
@media (max-width: 720px) { .nb-migration-notice { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 24px; } .nb-migration-page { padding-top: 48px; padding-bottom: 64px; } .nb-migration-page .nb-btn { display: flex; width: fit-content; min-height: 44px; } body { overflow-wrap: break-word; } pre { overflow-x: auto; } .nav-links a, .nav-drawer a { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
.nb-migration-record { width: 100%; border: 1px solid #D9D3CB; background: #FCFBF8; border-radius: 22px; padding: clamp(24px, 4vw, 40px); box-shadow: 0 18px 50px rgba(23,18,15,.05); text-align: left; }
.nb-migration-record .nb-label { font-size: 12px; color: #B63B1B; }
.nb-migration-record__title { font-family: var(--nb-font-sans), system-ui, sans-serif; font-size: 22px; font-weight: 600; color: #17120F; margin: 24px 0 32px; }
.nb-migration-record__quote { font-family: var(--nb-font-sans), system-ui, sans-serif; font-size: 18px; line-height: 1.7; color: #4B4540; margin: 22px 0; max-width: 38ch; }
.nb-migration-record__line { width: 80%; height: 7px; background: #E5E1DA; border-radius: 8px; }
.nb-migration-record__line--short { width: 55%; }
.nb-migration-record__caption { font: 13px/1.6 var(--nb-font-sans), system-ui, sans-serif; color: #6E665E; border-top: 1px solid #E5E1DA; padding-top: 22px; margin-top: 32px; }
.nb-migration-records-label { font-size: 14px; color: #4B4540; text-align: center; padding: 20px 0; }
#features .modes { grid-template-columns: repeat(2,minmax(0,1fr)); }
@media (max-width: 720px) { #features .modes { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .hero { padding-top: 44px; } }