/* Nautical identity layer — the extracted page structures and behavior stay intact. */
.nautical-variant {
  --sea-deep: #0b3447;
  --sea-mid: #176276;
  --sea-light: #dce9e5;
  --chart: #f3f0e5;
  --brass: #bb9864;
  --signal: #d97966;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--chart);
  background-image:
    radial-gradient(ellipse at 82% 13%, rgba(204, 220, 212, .48), transparent 30%),
    radial-gradient(circle at 14% 72%, rgba(206, 219, 207, .2), transparent 25%);
  color: #12384a;
}
.nautical-variant::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .24;
  background-image:
    repeating-radial-gradient(ellipse at 87% 15%, transparent 0 22px, rgba(28, 92, 104, .13) 23px 24px, transparent 25px 42px),
    repeating-linear-gradient(116deg, transparent 0 130px, rgba(150, 132, 93, .08) 131px 132px, transparent 133px 260px);
  mask-image: linear-gradient(130deg, transparent 8%, #000 58%, #000);
}
.nautical-variant .site-shell,
.nautical-variant .host-shell { width: min(1280px, calc(100% - 76px)); }
.nautical-variant .topbar {
  position: relative;
  min-height: 126px;
  border-bottom: 1px solid rgba(227, 230, 213, .25);
}
.nautical-variant .topbar::after {
  content: "N  •  41° 24′  W";
  position: absolute;
  right: 4px;
  bottom: 12px;
  color: rgba(230, 222, 194, .65);
  font: 10px/1 var(--sans);
  letter-spacing: .18em;
}
.nautical-variant .brand {
  gap: 16px;
  align-items: center;
  color: #f4f0e2;
}
.nautical-variant .brand-logo {
  width: 78px;
  height: 78px;
  border: 1px solid rgba(227, 191, 135, .6);
  border-radius: 50%;
  background: #f4f0e2;
  box-shadow: 0 0 0 5px rgba(220, 199, 158, .08), 0 10px 24px rgba(3, 24, 34, .28);
}
.nautical-variant .brand-copy {
  position: relative;
  display: grid;
  gap: 1px;
  padding: 0;
  background: none;
}
.nautical-variant .brand-title {
  color: #faf6e8;
  font: 600 clamp(25px, 3.2vw, 43px)/1 var(--display);
  letter-spacing: -.045em;
}
.nautical-variant .brand-tagline {
  margin-top: 6px;
  color: #c5d9d1;
  font: 500 10px/1.4 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.nautical-variant .topbar-note {
  padding: 9px 13px;
  border: 1px solid rgba(224, 210, 176, .38);
  border-radius: 99px;
  color: #e2d5b9;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.nautical-student { background-color: #f1efe4; }
.nautical-student .topbar {
  min-height: 184px;
  padding: 0 30px 52px;
  border: 0;
  border-radius: 0 0 5px 5px;
  background:
    radial-gradient(ellipse at 79% 25%, rgba(91, 142, 143, .3), transparent 35%),
    linear-gradient(112deg, #0c3548 0%, #104b5c 62%, #1a6571 100%);
  box-shadow: 0 12px 30px rgba(12, 48, 62, .15);
}
.nautical-student .topbar::before,
.nautical-teacher .topbar::before {
  content: "";
  position: absolute;
  right: 5%;
  top: 12px;
  width: 194px;
  height: 108px;
  opacity: .34;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 26px, #d1bb8d 27px 28px, transparent 29px 43px, #d1bb8d 44px 45px, transparent 46px),
    conic-gradient(from 0deg at 50% 50%, transparent 0 7deg, rgba(214, 193, 147, .75) 8deg 9deg, transparent 10deg 82deg, rgba(214, 193, 147, .75) 83deg 84deg, transparent 85deg 172deg, rgba(214, 193, 147, .75) 173deg 174deg, transparent 175deg 262deg, rgba(214, 193, 147, .75) 263deg 264deg, transparent 265deg);
  border-radius: 50%;
}
.nautical-student .topbar::after {
  content: "N  •  41° 24′  W";
  right: 34px;
  bottom: 16px;
}
.nautical-variant .topbar {
  overflow: visible;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='58' viewBox='0 0 260 58'%3E%3Cg fill='none' stroke='%239bb8a9' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' opacity='.88'%3E%3Cpath d='M4 58V39m0 7L-3 38m7 15-8-4m8-2 8-13m-8 9 1-16m-1 13-10-9m10 4 8-12M39 58V33m0 16-11-11m11 6 11-15m-11 8 1-20m-1 14-11-9m11 1 8-9M73 58V39m0 9-9-12m9 8 9-13m-9 4-1-20m1 12 9-11m-9 4-8-7M124 58V33m0 20-12-13m12 8 12-17m-12 9V20m0 15-11-10m11 3 10-13M171 58V39m0 10-9-12m9 7 9-15m-9 7 1-18m-1 11-9-8m9 3 8-10M217 58V34m0 18-12-14m12 8 12-17m-12 8V18m0 16-10-9m10 3 10-13M252 58V40m0 11 9-13m-9 8-9-14m9 4-1-19m1 11 8-9'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse at 79% 25%, rgba(91, 142, 143, .3), transparent 35%),
    linear-gradient(112deg, #0c3548 0%, #104b5c 62%, #1a6571 100%);
  background-repeat: repeat-x, no-repeat, no-repeat;
  background-size: 260px 58px, auto, auto;
  background-position: center bottom, center, center;
}
.nautical-variant .topbar::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 50%;
  right: auto;
  bottom: -23px;
  width: 48px;
  height: 48px;
  transform: translateX(-50%);
  border: 1px solid rgba(187, 152, 100, .72);
  border-radius: 50%;
  background-color: #f3f0e5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23a6804c' stroke-width='1.6'%3E%3Ccircle cx='32' cy='32' r='27'/%3E%3Ccircle cx='32' cy='32' r='22'/%3E%3Cpath d='M32 6v52M6 32h52M13.6 13.6l36.8 36.8m0-36.8L13.6 50.4'/%3E%3C/g%3E%3Cpath fill='%23a6804c' d='m32 9 5 20-5 3-5-3zm23 23-20 5-3-5 3-5zM32 55l-5-20 5-3 5 3zM9 32l20-5 3 5-3 5z'/%3E%3Ccircle cx='32' cy='32' r='4' fill='%23f3f0e5' stroke='%23a6804c' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size: 35px 35px;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 3px 8px rgba(8, 39, 50, .2);
}
.nautical-student .topbar {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='58' viewBox='0 0 260 58'%3E%3Cg fill='none' stroke='%239bb8a9' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' opacity='.88'%3E%3Cpath d='M4 58V39m0 7L-3 38m7 15-8-4m8-2 8-13m-8 9 1-16m-1 13-10-9m10 4 8-12M39 58V33m0 16-11-11m11 6 11-15m-11 8 1-20m-1 14-11-9m11 1 8-9M73 58V39m0 9-9-12m9 8 9-13m-9 4-1-20m1 12 9-11m-9 4-8-7M124 58V33m0 20-12-13m12 8 12-17m-12 9V20m0 15-11-10m11 3 10-13M171 58V39m0 10-9-12m9 7 9-15m-9 7 1-18m-1 11-9-8m9 3 8-10M217 58V34m0 18-12-14m12 8 12-17m-12 8V18m0 16-10-9m10 3 10-13M252 58V40m0 11 9-13m-9 8-9-14m9 4-1-19m1 11 8-9'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse at 79% 25%, rgba(91, 142, 143, .3), transparent 35%),
    linear-gradient(112deg, #0c3548 0%, #104b5c 62%, #1a6571 100%);
}
.nautical-student .topbar::after { right: auto; bottom: -23px; }
.nautical-student .brand-logo { width: 96px; height: 96px; }
.nautical-student .brand-title { font-size: clamp(35px, 5vw, 57px); }
.nautical-student .brand-tagline { font-size: 11px; letter-spacing: .12em; }
.nautical-student .student-layout {
  position: relative;
  grid-template-columns: minmax(0, 1fr) minmax(350px, .76fr);
  gap: clamp(52px, 8vw, 112px);
  min-height: 550px;
  padding: 76px 5vw 72px;
}
.nautical-student .student-layout::before {
  content: "";
  position: absolute;
  left: 5vw;
  bottom: 24px;
  width: 250px;
  height: 110px;
  pointer-events: none;
  opacity: .28;
  background: repeating-radial-gradient(ellipse at 25% 100%, transparent 0 18px, #6b9994 19px 20px, transparent 21px 34px);
}
.nautical-student .student-layout::after,
.nautical-teacher .host-layout::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 8px;
  right: 1%;
  width: clamp(230px, 31vw, 390px);
  aspect-ratio: 1;
  pointer-events: none;
  opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%233d777d' stroke-width='1.5'%3E%3Ccircle cx='150' cy='150' r='134'/%3E%3Ccircle cx='150' cy='150' r='113'/%3E%3Ccircle cx='150' cy='150' r='19'/%3E%3Cpath d='M150 16v268M16 150h268M55 55l190 190m0-190L55 245M150 37l19 96-19 17-19-17zm113 113-96 19-17-19 17-19zm-113 113-19-96 19-17 19 17zM37 150l96-19 17 19-17 19z'/%3E%3Cpath d='M150 64v172M64 150h172M89 89l122 122m0-122L89 211' stroke-dasharray='2 5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
.nautical-student .student-intro { position: relative; z-index: 1; }
.nautical-student .eyebrow { color: #176276; letter-spacing: .17em; }
.nautical-student .eyebrow-dot { background: var(--signal); box-shadow: 0 0 0 4px rgba(217, 121, 102, .14); }
.nautical-student h1 {
  margin: 25px 0 22px;
  color: #10394b;
  font-size: clamp(56px, 6.7vw, 86px);
  line-height: .94;
  letter-spacing: -.065em;
}
.nautical-student h1 em { color: #247782; }
.nautical-student .lede { max-width: 445px; color: #496773; font-size: 16px; }
.nautical-student .intro-rule { width: 152px; height: 2px; margin: 29px 0 17px; background: var(--brass); }
.nautical-student .microcopy-mark { color: #ad735e; }
.nautical-student .join-card {
  position: relative;
  max-width: 440px;
  padding: 38px;
  border-color: rgba(14, 56, 72, .16);
  border-radius: 4px;
  background: rgba(255, 254, 247, .94);
  box-shadow: 0 18px 44px rgba(31, 61, 60, .12), 7px 7px 0 rgba(190, 162, 111, .16);
}
.nautical-student .join-card::before {
  content: "ROOM ENTRY";
  position: absolute;
  top: 0;
  right: 0;
  padding: 9px 12px;
  background: #dce9e5;
  color: #356b72;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .15em;
}
.nautical-student .card-kicker { color: #a77356; }
.nautical-student .join-card h2 { margin-top: 13px; color: #10394b; font-size: 37px; }
.nautical-student .card-copy { margin-bottom: 26px; }
.nautical-student .code-input-wrap input {
  border-color: #bdcbc6;
  border-radius: 3px;
  background: #f7f6ed;
  color: #10394b;
  letter-spacing: .23em;
}
.nautical-student .code-input-wrap input:focus { border-color: #267783; box-shadow: 0 0 0 4px rgba(38, 119, 131, .13); }
.nautical-student .button-primary { border-radius: 3px; background: #176276; box-shadow: 0 6px 14px rgba(23, 98, 118, .16); }
.nautical-student .button-primary:hover { background: #0d485c; }
.nautical-student .card-footnote { padding-top: 3px; }
.nautical-student .site-footer { border-top: 1px solid rgba(29, 80, 92, .14); }
.nautical-student .site-footer a { color: #176276; }
.nautical-student .room-view { padding-top: 40px; }
.nautical-student .subtitle-stage { border-radius: 4px; background-color: #0c3548; }
.nautical-student .card { border-radius: 4px; }
.nautical-teacher {
  background-color: #0b3447;
  background-image:
    radial-gradient(ellipse at 74% 20%, rgba(39, 104, 113, .32), transparent 35%),
    linear-gradient(135deg, #0b3447 0%, #0b3447 52%, #104858 100%);
  color: #f1efe4;
}
.nautical-teacher::before {
  opacity: .15;
  background-image:
    repeating-radial-gradient(ellipse at 82% 8%, transparent 0 26px, rgba(224, 207, 169, .36) 27px 28px, transparent 29px 48px),
    repeating-linear-gradient(116deg, transparent 0 170px, rgba(206, 185, 140, .17) 171px 172px, transparent 173px 340px);
}
.nautical-teacher .topbar { min-height: 154px; padding-bottom: 50px; border-bottom-color: rgba(220, 238, 240, .18); }
.nautical-teacher .topbar {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='58' viewBox='0 0 260 58'%3E%3Cg fill='none' stroke='%239bb8a9' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' opacity='.88'%3E%3Cpath d='M4 58V39m0 7L-3 38m7 15-8-4m8-2 8-13m-8 9 1-16m-1 13-10-9m10 4 8-12M39 58V33m0 16-11-11m11 6 11-15m-11 8 1-20m-1 14-11-9m11 1 8-9M73 58V39m0 9-9-12m9 8 9-13m-9 4-1-20m1 12 9-11m-9 4-8-7M124 58V33m0 20-12-13m12 8 12-17m-12 9V20m0 15-11-10m11 3 10-13M171 58V39m0 10-9-12m9 7 9-15m-9 7 1-18m-1 11-9-8m9 3 8-10M217 58V34m0 18-12-14m12 8 12-17m-12 8V18m0 16-10-9m10 3 10-13M252 58V40m0 11 9-13m-9 8-9-14m9 4-1-19m1 11 8-9'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse at 74% 20%, rgba(39, 104, 113, .32), transparent 35%),
    linear-gradient(135deg, #0b3447 0%, #0b3447 52%, #104858 100%);
  background-repeat: repeat-x, no-repeat, no-repeat;
  background-size: 260px 58px, auto, auto;
  background-position: center bottom, center, center;
}
.nautical-teacher .topbar::after { right: auto; bottom: -23px; background-color: #0b3447; }
.nautical-teacher .brand { color: #f4f0e2; }
.nautical-teacher .brand-copy { padding: 0; background: none; }
.nautical-teacher .brand-logo { width: 70px; height: 70px; }
.nautical-teacher .brand-title { font-size: clamp(27px, 3vw, 39px); }
.nautical-teacher .brand-tagline { color: #bfd7ce; }
.nautical-teacher .host-layout {
  position: relative;
  grid-template-columns: minmax(0, .72fr) minmax(500px, 1.28fr);
  gap: clamp(38px, 6vw, 84px);
  align-items: start;
  padding: 52px 3vw 60px;
}
.nautical-teacher .host-layout > * { position: relative; z-index: 1; }
.nautical-teacher .host-layout::after {
  top: 15px;
  right: 8%;
  opacity: .18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%23d5bf91' stroke-width='1.5'%3E%3Ccircle cx='150' cy='150' r='134'/%3E%3Ccircle cx='150' cy='150' r='113'/%3E%3Ccircle cx='150' cy='150' r='19'/%3E%3Cpath d='M150 16v268M16 150h268M55 55l190 190m0-190L55 245M150 37l19 96-19 17-19-17zm113 113-96 19-17-19 17-19zm-113 113-19-96 19-17 19 17zM37 150l96-19 17 19-17 19z'/%3E%3Cpath d='M150 64v172M64 150h172M89 89l122 122m0-122L89 211' stroke-dasharray='2 5'/%3E%3C/g%3E%3C/svg%3E");
}
.nautical-teacher .host-hero { padding-top: 20px; }
.nautical-teacher .host-hero h1 { margin-top: 24px; font-size: clamp(50px, 5vw, 68px); }
.nautical-teacher .host-hero h1 em { color: #cfb681; }
.nautical-teacher .host-hero .lede { color: #b9d0c8; }
.nautical-teacher .eyebrow-light { color: #bed6cc; }
.nautical-teacher .host-details { gap: 15px; margin-top: 36px; color: #c0d1c8; }
.nautical-teacher .detail-number { color: #e2b687; }
.nautical-teacher .host-console {
  padding: clamp(22px, 2.5vw, 34px);
  border: 1px solid rgba(14, 56, 72, .12);
  border-radius: 4px;
  background: #f8f6ed;
  box-shadow: 10px 12px 0 rgba(4, 26, 36, .19), 0 20px 44px rgba(0, 0, 0, .2);
}
.nautical-teacher .host-console h2 { font-size: 31px; }
.nautical-teacher .room-code-box { border-color: #b9cbc4; border-radius: 3px; background: #dce9e5; }
.nautical-teacher .room-code-label { color: #34727b; }
.nautical-teacher .room-code { color: #0c3548; font-family: var(--sans); font-weight: 800; }
.nautical-teacher .icon-button { border-radius: 3px; }
.nautical-teacher .button-ghost { border-radius: 3px; }
.nautical-teacher .mic-area { padding: 13px 0 23px; }
.nautical-teacher .mic-icon { background: #f0dfd1; color: #a75d50; border-radius: 3px; }
.nautical-teacher .mic-button.is-live .mic-icon { background: #176276; }
.nautical-teacher .transcript-box { border-radius: 3px; background: #e5ebe4; }
.nautical-teacher .questions-panel { border-color: #d9e1db; }
.nautical-teacher .question-preferences,
.nautical-teacher .question-item { border-radius: 3px; }
.nautical-teacher .host-footer { border-top: 1px solid rgba(213, 230, 222, .18); }
.nautical-teacher .host-footer a { color: #d6c39b; }
.nautical-teacher .toast { border-radius: 3px; }
.nautical-variant .button,
.nautical-variant .icon-button,
.nautical-variant .text-button,
.nautical-variant .toggle { transition-duration: .18s; }
.nautical-variant :focus-visible { outline-color: #d97966; }
@media (max-width: 900px) {
  .nautical-student .student-layout { grid-template-columns: 1fr; gap: 28px; padding-top: 48px; }
  .nautical-student .join-card { max-width: 560px; }
  .nautical-teacher .host-layout { grid-template-columns: 1fr; gap: 28px; padding-top: 28px; }
  .nautical-teacher .host-console { width: 100%; }
}
@media (max-width: 620px) {
  .nautical-variant .site-shell,
  .nautical-variant .host-shell { width: calc(100% - 28px); }
  .nautical-variant .topbar { min-height: 100px; background-size: 260px 36px, auto, auto; }
  .nautical-variant .topbar::after { width: 40px; height: 40px; bottom: -18px; background-size: 30px 30px; }
  .nautical-student .topbar {
    width: 100%;
    min-height: 150px;
    padding: 12px 14px 35px;
    border-radius: 0;
  }
  .nautical-student .brand { gap: 11px; }
  .nautical-student .brand-logo { width: 68px; height: 68px; }
  .nautical-student .brand-title { font-size: 34px; }
  .nautical-student .brand-tagline { max-width: 235px; font-size: 8px; letter-spacing: .08em; }
  .nautical-student .topbar-note { display: none; }
  .nautical-student .topbar::before { right: -47px; top: 18px; transform: scale(.78); }
  .nautical-student .topbar::after { right: auto; }
  .nautical-student .student-layout {
    gap: 21px;
    padding: 28px 0 38px;
  }
  .nautical-student .student-intro { order: 2; }
  .nautical-student .join-card {
    order: 1;
    max-width: none;
    padding: 27px 22px 24px;
  }
  .nautical-student .join-card h2 { margin-bottom: 7px; font-size: 32px; }
  .nautical-student .card-copy { margin-bottom: 19px; font-size: 13px; }
  .nautical-student .code-input-wrap input { height: 60px; font-size: 23px; }
  .nautical-student .student-intro h1 { margin: 4px 0 14px; font-size: 48px; }
  .nautical-student .student-intro .lede { font-size: 14px; }
  .nautical-student .intro-rule { margin: 20px 0 15px; }
  .nautical-student .site-footer { padding: 15px 0; }
  .nautical-teacher .topbar { min-height: 115px; padding-bottom: 29px; }
  .nautical-teacher .brand { gap: 10px; }
  .nautical-teacher .brand-logo { width: 57px; height: 57px; }
  .nautical-teacher .brand-title { font-size: 29px; }
  .nautical-teacher .brand-tagline { max-width: 220px; font-size: 8px; letter-spacing: .07em; }
  .nautical-teacher .topbar-note { display: none; }
  .nautical-teacher .host-layout { gap: 18px; padding: 17px 0 35px; }
  .nautical-teacher .host-console { order: 1; padding: 19px 16px; }
  .nautical-teacher .host-hero { order: 2; padding: 11px 2px 0; }
  .nautical-teacher .host-hero h1 { margin: 15px 0 12px; font-size: 43px; }
  .nautical-teacher .host-hero .lede { font-size: 14px; }
  .nautical-teacher .host-details { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
  .nautical-teacher .console-top { gap: 10px; }
  .nautical-teacher .host-console h2 { font-size: 26px; }
  .nautical-teacher .room-code-box { padding: 17px 12px; }
  .nautical-teacher .room-code { font-size: 35px; }
  .nautical-teacher .room-code-actions { gap: 5px; }
  .nautical-teacher .mic-area { gap: 12px; padding: 11px 0 18px; }
  .nautical-teacher .mic-button { grid-template-columns: 46px 1fr; column-gap: 10px; }
  .nautical-teacher .mic-icon { width: 46px; height: 46px; }
  .nautical-teacher .mic-label { font-size: 14px; }
  .nautical-teacher .sound-bars { display: none; }
  .nautical-teacher .transcript-section { padding-top: 21px; }
  .nautical-teacher .transcript-actions { align-items: flex-end; flex-direction: column; gap: 7px; }
  .nautical-teacher .transcript-actions .button-small { width: auto; padding: 0 10px; }
}