.kernel-hero { padding-block: 68px 42px; }
.kernel-hero h1 { max-width: 980px; font-size: clamp(36px, 4.5vw, 64px); line-height: 1.08; }
.kernel-intro { max-width: 870px; font-size: 20px; line-height: 1.6; }
.kernel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 22px 0; }
.kernel-state, .kernel-demo-note { max-width: 960px; color: var(--ink-soft); line-height: 1.6; }
.kernel-demo { padding-block: 30px; background: #e2f0ec; border-block: 1px solid var(--line); }
.kernel-demo .site-shell { padding-block: 12px; }
.kernel-frame { display: block; width: calc(100% - 32px); height: min(820px, 88dvh); min-height: 650px; margin: 14px 16px; border: 1px solid var(--line-strong); border-radius: 12px; background: #edf7f2; }
.nautical-views { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 12px; }
.nautical-views button { font: inherit; padding: 9px 13px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fafbf4; cursor: pointer; }
.nautical-views button[aria-pressed="true"] { background: #c2e5d6; border-color: #3a6f60; }
.nautical-views button:disabled { opacity: .55; cursor: wait; }
.nautical-views button:focus-visible { outline: 3px solid #217664; outline-offset: 3px; }
.nautical-status { color: var(--ink-soft); }
.kernel-reading { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; padding-block: 48px; }
.kernel-section p { font-size: 17px; line-height: 1.7; }
.kernel-next { padding-block: 10px 60px; }
.kernel-next p { max-width: 870px; line-height: 1.7; }
body[data-surface="kernel-nautico"] .kernel-hero { padding-block: 40px 28px; }
body[data-surface="kernel-nautico"] .kernel-hero h1 { font-size: clamp(36px, 4vw, 54px); margin-bottom: 8px; }
.kernel-subtitle { max-width: 980px; font-size: clamp(23px, 2.3vw, 32px); line-height: 1.2; font-weight: 600; margin: 0 0 22px; }
body[data-surface="kernel-nautico"] .kernel-intro { font-size: 18px; line-height: 1.55; margin-block: 14px; }
body[data-surface="kernel-nautico"] .kernel-actions { margin-block: 18px; }
body[data-surface="kernel-nautico"] .kernel-demo { padding-block: 20px; }
body[data-surface="kernel-nautico"] .kernel-demo h2,
body[data-surface="kernel-nautico"] .kernel-section h2,
body[data-surface="kernel-nautico"] .kernel-next h2 { font-size: clamp(25px, 2.5vw, 34px); line-height: 1.18; letter-spacing: -.025em; margin: 0 0 12px; }
.kernel-shortcuts { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-block: 18px 12px; }
.kernel-shortcut-group { flex: 1 1 auto; }
.kernel-shortcut-label { font-size: 12px; color: var(--ink-soft); }
.kernel-shortcuts .nautical-views { margin: 6px 0 0; }
body[data-surface="kernel-nautico"] .nautical-views button { padding: 7px 10px; font-size: 14px; min-height: 36px; }
body[data-surface="kernel-nautico"] .nautical-status { font-size: 14px; margin-block: 8px 0; }
body[data-surface="kernel-nautico"] .kernel-frame { height: calc(100dvh - var(--kernel-header-height, 72px) - 10px); min-height: 0; max-height: 960px; scroll-margin-top: calc(var(--kernel-header-height, 72px) + 8px); }
.kernel-resources { display: grid; grid-template-columns: 1fr 1fr; max-width: 1240px; margin-inline: auto; padding-block: 30px 0; gap: 24px; }
.kernel-resources .site-shell { width: 100%; }
.kernel-public-horizon { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.65; }
.kernel-public-horizon summary { cursor: pointer; font-weight: 600; }
.kernel-public-horizon summary:focus-visible { outline: 3px solid #217664; outline-offset: 4px; }
.kernel-public-horizon p { max-width: 68ch; margin-block: 12px 0; }
body[data-surface="kernel-nautico"] .kernel-reading { padding-block: 34px; }
@media (max-width: 760px) {
  .kernel-hero { padding-block: 38px 24px; }
  .kernel-intro { font-size: 18px; }
  .kernel-reading { grid-template-columns: 1fr; gap: 12px; padding-block: 28px; }
  .kernel-frame { width: calc(100% - 16px); margin-inline: 8px; border-radius: 8px; min-height: 620px; }
  .nautical-views { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 10px; }
  .nautical-views button { flex: 0 0 auto; }
  body[data-surface="kernel-nautico"] .kernel-hero { padding-block: 28px 20px; }
  body[data-surface="kernel-nautico"] .kernel-intro { font-size: 17px; }
  body[data-surface="kernel-nautico"] .nautical-views { flex-wrap: wrap; overflow: visible; padding-bottom: 0; }
  .kernel-shortcuts { gap: 12px; }
  .kernel-resources { grid-template-columns: 1fr; gap: 16px; }
}