/* Deliberate, user-driven moments, shared by the two landing pages only. */
.demo-tabs { visibility: hidden; }
.preview-ready .demo-tabs { visibility: visible; }
.demo-tabs button { appearance: none; font: inherit; cursor: pointer; color: var(--home-muted); border: 0; background: transparent; position: relative; }
.demo-tabs button::after { content: ''; position: absolute; inset: auto 0 0; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left; }
.demo-tabs button[aria-selected="true"] { color: var(--blue); font-weight: 600; }
.demo-tabs button[aria-selected="true"]::after { transform: scaleX(1); }
.demo-tabs button:hover { color: var(--blue); }
.home .profile-address { color: var(--ink); text-decoration: none; }
.home .profile-address:hover { color: var(--blue); }
.profile-contents.demo-tabs { gap: 24px; }
.profile-contents button { padding: 10px 0 13px; min-height: 44px; }
.profile-demo-panel { min-height: 210px; padding: 24px 0 12px 150px; }
.profile-demo-panels { display: grid; }
.profile-demo-panel { grid-area: 1 / 1; }
.profile-demo-panel[hidden] { display: block; visibility: hidden; pointer-events: none; }
.mac-workspace[hidden] { display: none; }
.profile-demo-panel p { font-size: 13px; color: var(--home-muted); line-height: 1.55; }
.home .profile-demo-panel h3 { font-size: 20px; letter-spacing: -.02em; line-height: 1.3; margin: 8px 0; }
.profile-demo-panel .profile-course { padding: 0; }
.profile-demo-panel .profile-course-arrow { display: none; }
.demo-source { display: inline-block; margin-left: 8px; padding: 2px 6px; font-size: 12px; background: var(--paper); border-radius: 5px; }
.calendar-demo { order: 2; min-width: 0; padding: 32px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); color: var(--ink); }
.calendar-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.calendar-heading p { font-size: 13px; color: var(--home-muted); margin-bottom: 6px; }
.calendar-heading h4 { margin: 0; font: 700 23px/1.3 var(--font-brand); letter-spacing: -.025em; }
.calendar-heading > svg { color: var(--blue); width: 28px; height: 28px; }
.calendar-clock { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: 12px; margin: 28px 0 10px; font-size: 13px; color: var(--home-muted); }
.calendar-clock > div { display: flex; gap: 4px; padding: 3px; background: var(--paper); border-radius: 8px; }
.calendar-clock [hidden] { display: none; }
.calendar-clock button { border: 0; border-radius: 6px; background: transparent; color: var(--ink-2); cursor: pointer; font: 500 13px/1.4 var(--font-body, 'IBM Plex Sans', sans-serif); min-height: 44px; padding: 8px 12px; font-variant-numeric: tabular-nums; }
.calendar-clock button[aria-pressed="true"] { background: var(--blue); color: var(--white); }
.calendar-clock button:hover:not([aria-pressed="true"]) { background: var(--line); }
.calendar-weeks { padding: 0; margin: 0; list-style: none; }
.calendar-weeks li { display: grid; grid-template-columns: 34px 1fr 22px; align-items: center; gap: 14px; border-top: 1px solid var(--line); padding-block: 22px; }
.calendar-number { font-size: 14px; color: var(--home-muted); font-variant-numeric: tabular-nums; }
.calendar-weeks h5 { margin: 0; font: 600 17px/1.35 var(--font-brand); letter-spacing: -.02em; }
.calendar-weeks p { margin-top: 7px; font-size: 13px; color: var(--home-muted); }
.calendar-weeks .is-open p, .calendar-weeks .is-open > svg { color: var(--blue); }
.calendar-weeks svg { color: var(--home-muted); }
.calendar-check { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.is-open .calendar-check { stroke-dashoffset: 0; opacity: 1; }
.is-open .calendar-lock { opacity: 0; }
.calendar-hint { font-size: 13px; color: var(--home-muted); border-top: 1px solid var(--line); padding-top: 18px; }
.tour-tabs { display: flex; justify-content: center; gap: 40px; margin-bottom: 20px; }
.tour-tabs button { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 15px; padding: 14px 0; min-height: 48px; }
.tour-tabs svg { width: 20px; height: 20px; }
.mac-landing .tour-stage { background: var(--blue); border-radius: 16px; }
.mac-landing .tour-image { aspect-ratio: 2400/1347; position: relative; }
.mac-landing .tour-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; max-height: 100%; }
.mac-landing .mac-workspace { background: transparent; }
.mac-landing .mac-workspace figcaption { min-height: 24px; }
@media (prefers-reduced-motion: no-preference) {
  .demo-tabs button::after { transition: transform 200ms cubic-bezier(.16,1,.3,1); }
  .calendar-check { transition: stroke-dashoffset 360ms cubic-bezier(.16,1,.3,1), opacity 120ms; }
  .calendar-lock { transition: opacity 120ms; }
  .calendar-clock button { transition: background-color 140ms, color 140ms; }
  .home .btn svg { transition: transform 180ms cubic-bezier(.16,1,.3,1); }
  .home .btn:hover svg { transform: translateX(3px); }
  .home .faq summary svg { transition: transform 180ms ease-out; }
}
@media (max-width: 900px) {
  .calendar-demo { order: 2; }
}
@media (max-width: 720px) {
  .profile-demo-panel { padding: 18px 0 12px; min-height: 192px; }
  .home .profile-demo-panel h3 { font-size: 18px; }
  .calendar-demo { padding: 22px 18px; }
  .calendar-heading h4 { font-size: 20px; }
  .calendar-weeks li { grid-template-columns: 24px 1fr 22px; gap: 10px; }
  .calendar-weeks h5 { font-size: 15px; }
  .calendar-clock { margin-top: 22px; }
  .calendar-clock button { padding-inline: 10px; }
  .tour-tabs { gap: 12px; justify-content: space-between; }
  .tour-tabs button { flex: 1; flex-direction: column; font-size: 12px; gap: 8px; text-align: center; }
  .mac-landing .mac-workspace figcaption { min-height: 42px; }
}

/* Feature sandboxes share familiar document surfaces and explicit preview labels. */
.feature-demo, .slide-demo { min-width: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--white); color: var(--ink); overflow: hidden; }
.demo-caption { padding: 16px 24px; font-size: 13px; line-height: 1.5; color: var(--home-muted); border-bottom: 1px solid var(--line); }
.feature-tabs { display: flex; gap: 24px; padding-inline: 24px; border-bottom: 1px solid var(--line); }
.feature-tabs button { min-height: 48px; padding: 12px 0; font-size: 15px; }
.feature-panels { display: grid; }
.feature-panel { grid-area: 1/1; padding: 28px; }
.feature-panel[hidden] { display: block; visibility: hidden; pointer-events: none; }
.feature-panel h4 { margin: 0; font: 700 24px/1.3 var(--font-brand); letter-spacing: -.025em; }
.home .feature-panel p { margin: 12px 0 0; color: var(--ink-2); font-size: 16px; }
.demo-file-list { padding: 0; margin: 24px 0 0; list-style: none; }
.demo-file-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; border-top: 1px solid var(--line); padding: 16px 0; font-size: 15px; }
.demo-file-list b { font-weight: 500; }
.feature-panel blockquote { margin: 24px 0; font-size: 20px; line-height: 1.6; }
.home .feature-panel .demo-citation { color: var(--blue); font-size: 13px; }
.feature-panel pre { overflow-wrap: anywhere; white-space: pre-wrap; font-size: 14px; margin: 24px 0; }
.publication-demo-controls { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 0 20px; font-size: 13px; color: var(--home-muted); }
.publication-demo-controls label { display: flex; gap: 10px; align-items: center; }
.publication-demo-controls select { min-height: 44px; padding: 8px 24px 8px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--white); font: inherit; }
.demo-pin { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/1.4 var(--font-body, 'IBM Plex Sans', sans-serif); color: var(--ink-2); background: var(--paper); border: 0; border-radius: 6px; padding: 8px 12px; min-height: 44px; cursor: pointer; margin-top: 10px; }
.home .demo-pin svg { width: 17px; height: 17px; }
.demo-pin[aria-pressed="true"] { color: var(--blue); background: var(--blue-tint, #dbeafe); }
.demo-footnote { color: var(--home-muted); font-size: 13px; margin-top: 14px; }
.home .gallery #publications { position: relative; }
/* The note belongs inside the preview, so it does not form another gallery column. */
.sample-slides { display: grid; background: var(--white); }
.sample-slide { grid-area: 1/1; aspect-ratio: 16/10; padding: clamp(24px,4vw,48px); display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.sample-slide[hidden] { display: flex; visibility: hidden; pointer-events: none; }
.sample-slide > span { color: var(--home-muted); font-size: 13px; margin-bottom: 24px; }
.sample-slide h4 { margin: 0; font: 700 clamp(26px,3vw,40px)/1.15 var(--font-brand); letter-spacing: -.03em; }
.home .sample-slide p { color: var(--ink-2); font-size: clamp(16px,1.8vw,21px); line-height: 1.55; margin-top: 24px; max-width: 40ch; }
.demo-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); padding: 12px 20px; }
.demo-controls button, .editor-actions button { border: 1px solid var(--line); border-radius: 8px; background: var(--white); color: var(--ink); cursor: pointer; min-width: 44px; min-height: 44px; padding: 8px 12px; font: 500 14px/1.4 var(--font-body, 'IBM Plex Sans', sans-serif); }
.demo-controls button { display: grid; place-items: center; }
.demo-controls button:hover:enabled, .editor-actions button:hover { color: var(--blue); background: var(--paper); }
.demo-controls button:disabled { opacity: .35; cursor: default; }
.demo-controls output { font-size: 14px; font-variant-numeric: tabular-nums; }
.home .gallery .slide-demo { order: 2; }
.editor-demo { margin-top: 32px; }
.app-split > .editor-demo { margin: 0; }
.editor-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.editor-split label { padding: 20px; font-size: 13px; color: var(--home-muted); border-right: 1px solid var(--line); }
.editor-split textarea { display: block; width: 100%; min-height: 200px; resize: vertical; margin-top: 12px; border: 0; padding: 8px; color: var(--ink); background: var(--paper); font: 14px/1.7 var(--font-mono, monospace); border-radius: 6px; caret-color: var(--blue); }
.editor-slide { padding: 28px; align-self: center; min-width: 0; overflow-wrap: anywhere; }
.editor-slide h4 { font: 700 24px/1.25 var(--font-brand); letter-spacing: -.025em; margin: 0; }
.home .editor-slide p { white-space: pre-wrap; color: var(--ink-2); font-size: 15px; margin-top: 18px; }
.editor-actions { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--line); }
.mac-present .slide-demo { width: 100%; margin: 0 auto 48px; }
.sample-notes { border-top: 1px solid var(--line); padding: 18px 24px; background: var(--paper); }
.sample-notes summary { color: var(--ink); font-size: 15px; cursor: pointer; }
.home .sample-notes p { color: var(--ink-2); font-size: 16px; margin-top: 12px; }
[data-demo-controls][hidden], .demo-pin[hidden], .publication-preview article[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .demo-pin { transition: background-color 150ms, color 150ms; }
  .demo-pin svg { transition: transform 180ms cubic-bezier(.16,1,.3,1); }
  .demo-pin[aria-pressed="true"] svg { transform: rotate(-35deg); }
}
@media (max-width: 720px) {
  .editor-split { grid-template-columns: 1fr; }
  .editor-split label { border-right: 0; border-bottom: 1px solid var(--line); }
  .editor-split textarea { min-height: 170px; }
  .editor-slide { min-height: 200px; }
  .feature-panel { padding: 24px 20px; }
  .feature-tabs { gap: 22px; padding-inline: 20px; }
  .feature-tabs button { font-size: 14px; }
  .demo-caption { padding-inline: 20px; }
  .sample-slide { aspect-ratio: auto; min-height: 300px; }
}

/* Demo content must never determine the width of a layout column. */
.home :is(.studio-hero-layout, .student-layout, .app-split, .mac-intro, .mac-section-heading, .mac-feature, .mac-edit, .mac-export, .editor-split) > * { min-width: 0; }
.home :is(.feature-demo, .slide-demo, .calendar-demo, .publication-preview, .mac-tour) { width: 100%; }