.offline-page {
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--beige) 68%, transparent), transparent 28rem),
    radial-gradient(circle at 88% 34%, color-mix(in srgb, var(--teal-soft) 66%, transparent), transparent 32rem),
    var(--paper);
}

.offline-page .site-header {
  position: sticky;
  top: 0;
}

.offline-main {
  overflow: hidden;
}

.offline-hero {
  position: relative;
  display: grid;
  min-height: min(760px, calc(100svh - 76px));
  align-items: center;
  padding-block: clamp(5rem, 10vw, 8rem);
}

.offline-hero::before,
.offline-hero::after {
  position: absolute;
  z-index: -1;
  border: 1px solid color-mix(in srgb, var(--teal) 28%, transparent);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.offline-hero::before {
  top: 9%;
  right: -8%;
  width: 32rem;
  aspect-ratio: 1;
  animation: offline-orbit 24s linear infinite;
}

.offline-hero::after {
  top: 18%;
  right: 5%;
  width: 17rem;
  aspect-ratio: 1;
  border-style: dashed;
  animation: offline-orbit 18s linear infinite reverse;
}

.offline-hero-grid,
.offline-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}

.offline-hero h1 {
  max-width: 820px;
  margin-top: 1rem;
  font: var(--display);
  font-size: clamp(3rem, 6vw, 5.8rem);
  line-height: 0.96;
  letter-spacing: -0.055em;
}

.offline-hero h1 em {
  color: var(--teal);
  font-weight: inherit;
}

.offline-hero-copy .section-intro {
  max-width: 700px;
  margin-top: 1.5rem;
}

.offline-meta-row,
.offline-action-row,
.offline-topic-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.7rem;
}

.offline-meta-row span,
.offline-topic-row span,
.offline-status-chip {
  padding: 0.55rem 0.8rem;
  border: 1px solid color-mix(in srgb, var(--teal) 34%, var(--line));
  border-radius: 999px;
  color: var(--teal-deep);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  font: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
}

.offline-cover-card,
.offline-event-card,
.offline-outline-card,
.offline-safety-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 34px 18px 38px 20px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: var(--shadow-card);
}

.offline-cover-card {
  padding: 0.8rem;
  transform: rotate(1.2deg);
}

.offline-cover-card img,
.offline-event-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 26px 14px 30px 15px;
}

.offline-cover-card::after {
  position: absolute;
  right: 1.4rem;
  bottom: 1.3rem;
  display: grid;
  width: 78px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  color: var(--paper);
  background: var(--pink);
  font: var(--mono);
  font-size: 0.72rem;
  font-weight: 800;
  content: "20 SCENES";
  text-align: center;
  transform: rotate(-8deg);
}

.offline-case-cover {
  aspect-ratio: 3 / 2;
  container-type: inline-size;
  color: #245b59;
  background: #f7f5ed;
}

.offline-case-cover img {
  height: 100%;
  object-fit: cover;
  opacity: 1;
}

.offline-case-cover::before {
  position: absolute;
  z-index: 1;
  inset: 0.8rem;
  border-radius: 26px 14px 30px 15px;
  background: linear-gradient(90deg, rgba(247, 245, 237, 0.9) 0%, rgba(247, 245, 237, 0.65) 35%, transparent 58%);
  content: "";
}

.offline-case-cover::after {
  z-index: 3;
  width: 64px;
  color: #245b59;
  background: #dcebe6;
  content: "30 页课件";
}

.offline-case-cover-copy {
  position: absolute;
  z-index: 2;
  top: 13%;
  left: 7%;
  display: flex;
  width: 49%;
  flex-direction: column;
  gap: 3cqw;
}

.offline-case-cover-copy small {
  color: #507e77;
  font: var(--mono);
  font-size: clamp(0.5rem, 1.7cqw, 0.8rem);
  letter-spacing: 0.08em;
}

.offline-case-cover-copy strong {
  color: #245b59;
  font-size: clamp(1rem, 4.3cqw, 2.3rem);
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -0.03em;
}

.offline-case-cover-copy em {
  color: #496e68;
  font-size: clamp(0.6rem, 2.1cqw, 1rem);
  font-style: normal;
  line-height: 1.6;
}

.offline-case-cover-topics {
  color: #7b6661;
  font-size: clamp(0.55rem, 1.8cqw, 0.85rem);
  line-height: 1.8;
}

.offline-section {
  padding-block: clamp(4.5rem, 9vw, 8rem);
}

.offline-section-heading {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 2rem;
  align-items: end;
  margin-bottom: 2.5rem;
}

.offline-section h2 {
  margin-top: 0.65rem;
  font: var(--display);
  font-size: clamp(2.2rem, 5vw, 4.8rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.offline-event-card {
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.05fr);
  gap: 0;
  color: inherit;
  text-decoration: none;
  transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}

.offline-event-card:hover,
.offline-event-card:focus-visible {
  border-color: var(--teal);
  box-shadow: var(--shadow-card), 0 22px 60px color-mix(in srgb, var(--teal) 16%, transparent);
  transform: translateY(-5px);
}

.offline-event-media {
  min-height: 100%;
  padding: 1rem;
  background: color-mix(in srgb, var(--teal-soft) 42%, var(--paper));
}

.offline-event-media img {
  height: 100%;
  object-fit: cover;
}

.offline-event-copy {
  padding: clamp(2rem, 5vw, 4rem);
}

.offline-event-copy h3,
.offline-outline-card h3,
.offline-safety-card h3 {
  margin-top: 0.75rem;
  font: var(--display);
  font-size: clamp(1.7rem, 3vw, 2.7rem);
  line-height: 1.05;
}

.offline-event-copy p,
.offline-outline-card p,
.offline-safety-card p {
  margin-top: 1rem;
  color: var(--muted);
  line-height: 1.75;
}

.offline-outline-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.offline-outline-card,
.offline-safety-card {
  padding: clamp(1.6rem, 3vw, 2.5rem);
}

.offline-outline-number {
  color: var(--pink);
  font: var(--mono);
  font-weight: 800;
  letter-spacing: 0.12em;
}

.offline-stage {
  border-block: 1px solid var(--line);
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, color-mix(in srgb, var(--teal) 7%, transparent) 31px 32px),
    color-mix(in srgb, var(--paper-deep) 42%, var(--paper));
}

.offline-video-poster {
  position: relative;
  display: block;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}

.offline-video-poster::after {
  position: absolute;
  inset: 50% auto auto 50%;
  display: grid;
  width: 88px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 50%;
  color: white;
  background: rgba(15,76,82,.78);
  box-shadow: 0 16px 36px rgba(0,0,0,.24);
  content: "▶";
  font-size: 1.5rem;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(10px);
}

.offline-video-poster img {
  display: block;
  width: 100%;
  height: auto;
}

.offline-back {
  display: inline-flex;
  margin-bottom: 1.4rem;
  color: var(--teal);
  font: var(--mono);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-decoration: none;
}

.offline-footer-note {
  max-width: 720px;
  color: var(--muted);
  line-height: 1.7;
}

@keyframes offline-orbit {
  to { transform: rotate(360deg); }
}

@media (max-width: 960px) {
  .offline-page .main-nav { display: none; }
  .offline-hero-grid,
  .offline-detail-grid,
  .offline-section-heading,
  .offline-event-card { grid-template-columns: 1fr; }
  .offline-outline-grid { grid-template-columns: 1fr; }
  .offline-cover-card { max-width: 720px; }
}

@media (prefers-reduced-motion: reduce) {
  .offline-hero::before,
  .offline-hero::after { animation: none; }
}

.offline-exchange-section {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--line);
  background:
    radial-gradient(circle at 8% 20%, color-mix(in srgb, var(--beige) 54%, transparent), transparent 26rem),
    radial-gradient(circle at 88% 78%, color-mix(in srgb, var(--teal-soft) 62%, transparent), transparent 30rem),
    color-mix(in srgb, var(--paper-deep) 38%, var(--paper));
}

.offline-exchange-grid {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(420px, 1.12fr);
  gap: clamp(2.5rem, 7vw, 6.5rem);
  align-items: center;
}

.offline-exchange-copy h2 {
  max-width: 700px;
  margin-top: .8rem;
  font: 650 clamp(2.5rem, 5.8vw, 5.7rem) / .98 var(--display);
  letter-spacing: -.052em;
}

.offline-exchange-copy .section-intro {
  max-width: 650px;
  margin-top: 1.35rem;
}

.offline-exchange-status,
.offline-exchange-note {
  margin-top: 1rem;
  color: var(--teal-deep);
  font: var(--mono);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .09em;
}

.offline-exchange-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.4rem;
  align-items: center;
  margin-top: 1.8rem;
}

.offline-exchange-visual {
  position: relative;
  display: block;
  color: inherit;
  text-decoration: none;
  transform: rotate(1deg);
  transition: transform 260ms var(--ease);
}

.offline-exchange-visual:hover,
.offline-exchange-visual:focus-visible {
  transform: rotate(0deg) translateY(-5px);
}

.offline-exchange-stamp {
  position: absolute;
  right: -1rem;
  bottom: -1rem;
  display: grid;
  width: 92px;
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid var(--paper);
  border-radius: 50%;
  color: var(--paper);
  background: var(--pink);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--ink) 18%, transparent);
  font: 800 1.2rem/1 var(--mono);
  text-align: center;
  transform: rotate(-9deg);
}

.offline-exchange-stamp small { font-size: .52rem; letter-spacing: .1em; }

@media (max-width: 960px) {
  .offline-exchange-grid { grid-template-columns: 1fr; }
}

/* 通用课件馆：城市与机构属于场次信息，保持统一的课程入口。 */
.course-hub .hub-heading{display:grid;grid-template-columns:1.15fr 1fr;gap:3rem;align-items:end;margin-bottom:3rem}
.course-hub .hub-heading h2{font-family:var(--font-sans, sans-serif);font-size:clamp(2rem,3.6vw,3.8rem);font-weight:600;line-height:1.25;letter-spacing:-.04em;max-width:650px;margin-top:1rem;text-wrap:balance}
.session-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.7rem}
.session-card{min-width:0;display:flex;flex-direction:column;padding:12px;border:1px solid var(--line);border-radius:26px;background:var(--surface);color:var(--ink);text-decoration:none;box-shadow:0 4px 0 color-mix(in srgb,var(--teal) 12%,transparent),0 20px 44px color-mix(in srgb,var(--ink) 9%,transparent),inset 0 1px 0 #ffffff65;transition:transform .3s ease,box-shadow .3s ease}
.session-card:hover{transform:translateY(-6px);box-shadow:0 6px 0 color-mix(in srgb,var(--teal) 16%,transparent),0 26px 48px color-mix(in srgb,var(--ink) 15%,transparent)}
.session-card:focus-visible,.chapter-links a:focus-visible{outline:3px solid var(--teal);outline-offset:5px}
.session-cover{aspect-ratio:16/9;overflow:hidden;border-radius:17px;background:#092128}
.session-cover img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .6s ease}.session-card:hover img{transform:scale(1.035)}
.codex-cover{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(20px,3vw,42px);color:#e8f3e9;background:radial-gradient(ellipse at 100% 100%,#588176 0,transparent 65%),#173c38;font-family:system-ui,sans-serif}
.codex-cover:after{content:"";position:absolute;width:55%;aspect-ratio:1;right:-12%;top:12%;border:1px solid #c2dac15c;border-radius:30%;box-shadow:0 0 0 24px #c2dac108,0 0 0 49px #c2dac108;transform:rotate(24deg);z-index:-1}
.codex-cover>span,.codex-cover>small{font-size:clamp(9px,1vw,12px);letter-spacing:.18em}.codex-cover strong{font-size:clamp(25px,3.5vw,51px);line-height:1.15;font-weight:550;letter-spacing:-.05em}.codex-cover strong span{display:block;font-size:1.2em;color:#d8b693}
.human-model-cover{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(20px,3vw,42px);overflow:hidden;color:#2d443a;background:linear-gradient(135deg,#f3e7cc,#e1e8d9 72%);font-family:var(--display)}
.human-model-cover::before,.human-model-cover::after{content:"";position:absolute;border-radius:50%;z-index:-1}.human-model-cover::before{width:48%;aspect-ratio:1;right:8%;top:12%;border:1px solid #526d5c66;box-shadow:0 0 0 22px #ffffff22,0 0 0 44px #526d5c0b}.human-model-cover::after{width:25%;aspect-ratio:1;right:-5%;bottom:-10%;background:#c9907138}
.human-model-cover>span,.human-model-cover>small{font:700 clamp(9px,1vw,12px)/1.4 var(--mono);letter-spacing:.16em}.human-model-cover strong{font-size:clamp(27px,3.3vw,49px);font-weight:600;line-height:1.12;letter-spacing:-.055em}
.willpower-cover{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(20px,3vw,42px);overflow:hidden;color:#f7eee1;background:radial-gradient(circle at 85% 18%,#c77b5740,transparent 32%),linear-gradient(145deg,#463d34,#744d3c);font-family:var(--display)}
.willpower-cover::before{content:"";position:absolute;z-index:-1;width:48%;aspect-ratio:1;right:-2%;top:12%;border:1px solid #f0d8b866;border-radius:50%;box-shadow:0 0 0 22px #f0d8b811,0 0 0 44px #f0d8b80a}
.willpower-cover::after{content:"→";position:absolute;z-index:-1;right:9%;bottom:4%;color:#e9ba8870;font:300 clamp(70px,9vw,130px)/1 var(--display)}
.willpower-cover>span,.willpower-cover>small{font:700 clamp(9px,1vw,12px)/1.4 var(--mono);letter-spacing:.16em}.willpower-cover strong{font-size:clamp(26px,3.1vw,47px);font-weight:600;line-height:1.13;letter-spacing:-.05em}
.session-copy{padding:clamp(20px,2.5vw,32px);flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:10px}.session-copy p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.65}.session-copy .session-label{color:var(--teal);font-size:.73rem;letter-spacing:.1em;font-weight:750}.session-copy h3{font-family:system-ui,sans-serif;font-size:clamp(1.3rem,2vw,1.9rem);font-weight:600;line-height:1.35;margin:0;letter-spacing:-.02em}.session-link{margin-top:auto;padding-top:20px;font-weight:650;color:var(--teal)}.session-institution{color:var(--muted);line-height:1.6;margin:1rem 0}
.course-library{background:radial-gradient(ellipse at 10% 0%,color-mix(in srgb,var(--teal-soft) 65%,transparent),transparent 50rem),var(--paper)}
.library-hero{padding-block:clamp(65px,9vw,125px) 55px}.library-hero h1,.course-detail h1{font-family:system-ui,sans-serif;font-size:clamp(2.5rem,5.5vw,5.5rem);line-height:1.12;letter-spacing:-.05em;font-weight:600;margin:1.3rem 0}.library-tagline{font-size:clamp(1.2rem,2.2vw,1.65rem);line-height:1.6;margin:1.2rem 0;color:var(--teal)}.library-hero .section-intro{max-width:650px;margin:1rem 0 1.8rem}.library-sessions{padding-bottom:100px;scroll-margin-top:100px}.library-list-heading{display:flex;align-items:center;justify-content:space-between;margin:0 0 25px}.library-list-heading h2{font-size:1.3rem}.library-list-heading>span{font:12px monospace;color:var(--muted)}
.course-detail{padding-block:45px 90px}.course-detail-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:4rem;align-items:center}.detail-cover{aspect-ratio:1.1;transform:rotate(2deg);box-shadow:0 6px 0 #99aa9755,0 28px 60px #123e3822}.detail-cover strong{font-size:clamp(36px,5vw,68px)}.course-outline{margin-top:85px;scroll-margin-top:110px}.course-outline h2{font-size:2rem;margin:1rem 0}.chapter-links{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}.chapter-links a{display:flex;gap:1rem;justify-content:space-between;padding:20px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);text-decoration:none;line-height:1.6}.chapter-links a:hover{border-color:var(--teal);color:var(--teal)}.course-source{border-top:1px solid var(--line);margin-top:60px;padding-top:30px;max-width:800px}.course-source h2{font-size:1.2rem}.course-source p{color:var(--muted);line-height:1.8;margin:1rem 0}
@media(max-width:760px){.course-hub .hub-heading,.session-cards,.course-detail-grid,.chapter-links{grid-template-columns:1fr}.course-hub .hub-heading{gap:1.3rem}.course-detail-grid{gap:2.5rem}.detail-cover{max-width:480px;width:100%;aspect-ratio:16/9;transform:none}.codex-cover strong{font-size:clamp(30px,7vw,48px)}.session-copy{padding:20px}.course-library .brand-name{font-size:10px}.course-library .header-inner{gap:10px}.course-library .theme-toggle{padding:10px}.library-hero{padding-top:65px}}
@media(prefers-reduced-motion:reduce){.session-card,.session-cover img{transition:none}.session-card:hover,.session-card:hover img{transform:none}}

.course-hub .hub-heading h2>span{display:block}
@media(min-width:1180px){.session-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1600px){.session-cards{grid-template-columns:repeat(4,minmax(0,1fr))}}