/* Original miniature, editorial composition and interaction depth. */
.hero { min-height: 740px; padding-top: 70px; }
.hero-copy { transform-style: preserve-3d; }
.hero-copy .eyebrow { max-width: 340px; line-height: 1.7; }
.hero h1 { font-size: clamp(63px,6.2vw,94px); }
.hero-visual { perspective: 1100px; }
.castle-image { transform: translate3d(var(--scene-x,0px),var(--scene-y,0px),0); }
.floating-session { transform: rotate(-3deg); }
.visual-annotation { top: 17%; }
.scroll-cue { display: inline-block; }
.spec-strip { margin-inline: auto; max-width: 1392px; border-bottom: 1px solid var(--line); }
.spec-inner { min-height: 110px; }
.intro { padding-top: 112px; padding-bottom: 110px; }
.intro .section-heading { margin-bottom: 44px; }
.intro .section-heading h2 { font-size: clamp(42px,4.6vw,66px); }
.how { padding-top: 110px; padding-bottom: 90px; }
.steps { gap: 18px; perspective: 1200px; }
.steps article { position: relative; display: flex; flex-direction: column; padding: 29px 28px 23px; min-height: 345px; border: 1px solid #d5bc91; border-radius: 14px; background: #fff7e7; box-shadow: 0 4px 0 #decaab; transform: perspective(900px) rotateX(var(--card-x,0deg)) rotateY(var(--card-y,0deg)); transition: transform .3s var(--ease),box-shadow .3s; }
.steps article:nth-child(2) { background: #f1e5c9; }
.steps article:nth-child(3) { background: #e8edda; border-color: #b7c9a4; box-shadow: 0 4px 0 #c5d2b4; }
.step-top { align-items: flex-start; margin-bottom: 36px; }
.step-top > span { font-size: 10px; }
.step-top svg { width: 42px; height: 42px; padding: 8px; box-sizing: content-box; background: #e7d3ac; border-radius: 13px; stroke: #8b6539; }
.steps article:nth-child(3) .step-top svg { background: #d0dfbd; stroke: #53765b; }
.steps h3 { font-size: 29px; font-weight: 650; margin-bottom: 18px; }
.steps p { font-size: 14px; line-height: 1.75; }
.step-end { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-top: 26px; margin-top: auto; font-size: 11px; font-weight: 600; color: #917144; }
.step-end > span { font-size: 23px; }
.companion-callout { padding-bottom: 100px; }
.companion-card { border-radius: 22px; }
.workspace-section { padding-top: 90px; padding-bottom: 80px; }
.dashboard-shell { border-radius: 18px; box-shadow: 0 6px 0 #b9b796,0 25px 60px #314c3420; }
.dashboard-sidebar { border-right: 1px solid #d8cbb0; }
.remote { padding-top: 95px; padding-bottom: 90px; gap: 65px; }
.phone-scene { perspective: 1200px; }
.phone { transform: rotate(-5deg) rotateY(-7deg); transform-style: preserve-3d; box-shadow: 9px 10px 0 #b7af95,25px 35px 65px #3f4c3026; }
.phone-callout { transform: rotate(3deg); }
.control-section { padding-block: 90px; }
.control-grid { gap: 20px; }
.control-card { border-radius: 16px; box-shadow: 0 4px 0 #d9c5a3; }
.control-card h3 { font-size: 29px; }
.plan-section { padding-block: 100px; }
.price-card { border-radius: 19px; transform: rotate(1.3deg); transition: transform .4s var(--ease); }
.faq-section { padding-block: 105px; }
.faq-list details { border-color: #d7c19a; }
.faq-list summary { padding-block: 25px; }
.closing { border-radius: 24px 24px 0 0; }
.closing h2 { font-weight: 650; }
@media(hover:hover) and (pointer:fine) {
  .steps article:hover { box-shadow: 0 6px 0 #c3ad82,0 15px 35px #84633312; }
  .price-card:hover { transform: rotate(0); }
}
@media(min-width:1500px) { .hero-visual { width: 63%; } }
@media(max-width:1150px) {
  .hero { min-height: 690px; padding-top: 58px; }
  .hero h1 { font-size: 71px; }
  .steps article { padding: 25px 22px 20px; }
  .steps h3 { font-size: 26px; }
  .remote { gap: 35px; }
  .control-card h3 { font-size: 25px; }
}
@media(max-width:900px) {
  .hero { min-height: 650px; padding-top: 45px; }
  .hero h1 { font-size: 63px; }
  .hero .visual-annotation { display: none; }
  .intro,.how { padding-top: 80px; padding-bottom: 75px; }
  .steps { gap: 12px; }
  .steps article { padding-inline: 19px; }
  .step-top { display: grid; gap: 15px; margin-bottom: 23px; }
  .steps h3 { font-size: 24px; }
  .steps p { font-size: 13px; }
  .step-end { font-size: 10px; }
  .remote { padding-block: 65px; }
  .phone { transform: rotate(-3deg); }
  .control-grid { gap: 17px; }
}
@media(max-width:700px) {
  .hero { min-height: 0; padding-top: 35px; }
  .hero h1 { font-size: clamp(53px,12vw,78px); }
  .hero-visual { perspective: none; }
  .floating-session { transform: rotate(-2deg); }
  .hero-bottom { margin-top: 17px; }
  .hero-bottom > span { max-width: 150px; }
  .hero-bottom a { white-space: normal; max-width: 115px; font-size: 8px; }
  .spec-inner { min-height: 0; }
  .intro,.how { padding-top: 65px; padding-bottom: 65px; }
  .intro .section-heading h2 { font-size: clamp(36px,8.2vw,54px); }
  .steps { grid-template-columns: minmax(0,1fr); gap: 17px; }
  .steps article { padding: 26px; min-height: 0; }
  .step-top { display: flex; align-items: center; margin-bottom: 20px; }
  .step-top svg { width: 34px; height: 34px; }
  .steps h3 { font-size: 30px; }
  .steps h3 br { display: none; }
  .steps p { font-size: 14px; max-width: 100%; }
  .step-end { padding-top: 23px; font-size: 11px; }
  .companion-callout { padding-top: 20px; padding-bottom: 65px; }
  .workspace-section { padding-block: 65px; }
  .dashboard-shell { border-radius: 12px; }
  .remote { padding-block: 65px 50px; gap: 20px; }
  .phone-scene { min-height: 720px; }
  .phone { transform: rotate(-2deg); }
  .phone-callout { transform: rotate(2deg); }
  .control-section { padding-block: 65px; }
  .control-card h3 { font-size: 29px; }
  .plan-section { padding-block: 65px; }
  .price-card { transform: none; }
  .faq-section { padding-block: 65px; }
  .faq-list summary { padding-block: 23px; }
}
@media(prefers-reduced-motion:reduce) {
  .castle-image,.floating-session,.phone,.phone-callout,.price-card,.steps article { transform: none; transition: none; }
}

/* Size the composition to the available window, including short laptop screens.
   Keep this after the theme and scene rules so all sections share one scale. */
:root {
  --page-max: 1680px;
  --gutter: clamp(20px, 4vw, 80px);
  --section-space: clamp(56px, 8svh, 112px);
  --nav-height: 80px;
}
.wrap { width: 100%; max-width: var(--page-max); }
.nav { height: var(--nav-height); }
.hero, .manifesto { width: calc(100% - 2 * clamp(12px, 2vw, 32px)); max-width: calc(var(--page-max) - 48px); }
.hero {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  column-gap: clamp(16px, 2vw, 40px);
  min-height: clamp(560px, calc(100svh - 120px), 800px);
  padding: clamp(28px, 5svh, 64px) clamp(24px, 4vw, 64px) 20px;
}
.hero-copy { min-width: 0; padding-top: 0; align-self: center; }
.hero h1 { font-size: clamp(46px, 4.9vw, 86px); white-space: normal; }
.hero-copy .eyebrow { margin-bottom: clamp(16px, 3svh, 30px); }
.hero-lead { font-size: clamp(15px, 1.1vw, 18px); max-width: 48ch; margin-top: 22px; line-height: 1.65; }
.hero-actions { flex-wrap: wrap; gap: 14px 22px; margin-top: 24px; }
.hero-meta { flex-wrap: wrap; margin-top: 22px; }
.hero-visual { position: relative; inset: auto; width: 100%; min-width: 0; min-height: 430px; align-self: stretch; }
.castle-image { width: 100%; height: 100%; left: 0; top: -3%; }
.visual-top { top: 0; left: 0; right: 0; }
.visual-annotation { display: none; }
.floating-session { width: min(365px, 94%); right: 3%; bottom: 18px; }
.hero-bottom { margin-top: 24px; flex-wrap: wrap; }
.spec-strip { max-width: var(--page-max); }
.intro, .how, .workspace-section, .control-section, .plan-section, .faq-section { padding-block: var(--section-space); }
.companion-callout { padding-bottom: var(--section-space); }
.remote { padding-block: var(--section-space); }
.section-heading { flex-wrap: wrap; gap: 24px 48px; margin-bottom: clamp(28px, 4vw, 50px); }
.section-heading > *, .steps > *, .control-grid > *, .plan-layout > *,
.remote > *, .faq-section > *, .companion-card > *, .footer-main > *, .session-overview > *,
.session-metrics > *, .session-form > *, .progress-summary > div { min-width: 0; }
h2 { font-size: clamp(34px, 4.1vw, 66px); }
.steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.remote, .plan-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
 .dash-topline, .dash-bottom, .panel-heading { flex-wrap: wrap; }
.dashboard { min-height: 0; }
.dashboard-tabs button { white-space: normal; }
.session-form input, .session-form select, .access-form select { font-size: 16px; }
.button, .panel-action { max-width: 100%; }
.phone-callout { right: 0; max-width: 100%; }
.phone-orbit { width: min(470px, 100%); }
.footer-word { font-size: clamp(48px, 13vw, 220px); }

@media (min-width: 1001px) and (max-height: 800px) {
  :root { --nav-height: 68px; --section-space: clamp(52px, 8svh, 72px); }
  .hero { min-height: 0; margin-top: 14px; padding-block: 26px 16px; }
  .hero h1 { font-size: clamp(44px, min(4.5vw, 9svh), 68px); }
  .hero-copy .eyebrow { margin-bottom: 16px; }
  .hero-lead { margin-top: 18px; font-size: 15px; line-height: 1.6; }
  .hero-actions { margin-top: 20px; }
  .hero-actions .button { min-height: 48px; padding-block: 12px; }
  .hero-meta { margin-top: 18px; }
  .hero-visual { min-height: 380px; }
  .hero-bottom { margin-top: 20px; padding-top: 10px; }
  .spec-inner { min-height: 0; padding-block: 22px; }
}
@media (max-width: 1000px) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 32px; }
  .hero::after { display: none; }
  .hero-copy { width: 100%; max-width: 650px; }
  .hero h1 { font-size: clamp(42px, 7.8vw, 72px); }
  .hero-lead { font-size: 16px; }
  .hero-visual { width: 100%; height: clamp(340px, 52vw, 480px); min-height: 0; margin: 20px 0 0; }
  .castle-image { width: 100%; left: 0; top: 0; height: 100%; object-fit: contain; }
  .visual-top { top: 14px; right: 12px; }
  .floating-session { right: 4%; bottom: 10px; }
  .hero-bottom { grid-column: 1; }
  .companion-card { gap: 24px; padding-inline: 24px; }
}
@media (max-width: 900px) {
  :root { --nav-height: 74px; }
  .mobile-menu { top: var(--nav-height); max-height: calc(100dvh - var(--nav-height)); }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .steps article { min-height: 0; padding: 26px; }
  .steps h3 { font-size: 28px; }
  .steps p { font-size: 15px; max-width: 65ch; }
  .step-top { display: flex; margin-bottom: 22px; }
  .step-end { padding-top: 20px; font-size: 12px; }
  .remote, .plan-layout, .faq-section { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .remote-copy > p { max-width: 60ch; }
  .phone-scene { width: 100%; max-width: 480px; justify-self: center; }
  .price-card { width: 100%; max-width: 580px; justify-self: center; transform: none; }
  .companion-card { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
}
@media (max-width: 700px) {
  :root { --nav-height: 68px; }
  .nav { gap: 12px; }
  .nav-cta { margin-left: auto; }
  .hero { display: grid; padding-inline: 22px; }
  .hero h1 { font-size: clamp(36px, 9.6vw, 64px); }
  .hero-actions { gap: 14px 20px; }
  .hero-meta { font-size: 11px; gap: 10px; }
  .hero-visual { height: clamp(300px, 82vw, 430px); }
  .hero-bottom > span, .hero-bottom a { max-width: none; }
  .hero-bottom { gap: 8px 16px; }
  .hero-bottom a { min-height: 44px; }
  .floating-session { width: min(340px, 100%); right: 0; }
  .floating-session .micro { font-size: 9px; }
  .floating-session strong { font-size: 13px; }
  .floating-sub { font-size: 11px; }
  .spec-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .spec-inner > div { min-width: 0; padding: 0; border: 0; justify-content: flex-start; font-size: 12px; }
  .spec-inner > div:last-child { justify-content: flex-start; }
  .spec-inner b, .spec-inner svg { flex-shrink: 0; }
  .closing-star { position: static; display: inline-block; margin-left: 8px; font-size: .65em; }
  .dashboard-sidebar { flex-wrap: wrap; gap: 12px; }
  .dashboard-tabs { flex-basis: 100%; justify-content: stretch; }
  .dashboard-tabs button { flex: 1; min-width: 0; padding-inline: 6px; }
  .session-overview, .session-form { grid-template-columns: minmax(0, 1fr); }
  .panel-heading { gap: 14px; }
  .control-card { display: flex; padding: 24px; }
  .control-preview { width: 100%; margin-top: 24px; }
  .companion-card { grid-template-columns: minmax(0, 1fr); padding-inline: 22px; }
  .phone { width: min(298px, calc(100% - 16px)); transform: none; }
  .phone-callout { transform: none; }
  .closing-bottom { flex-wrap: wrap; gap: 24px; }
  .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .footer-identity { grid-column: 1 / -1; }
}
@media (max-width: 390px) {
  .nav { gap: 8px; }
  .brand { font-size: 23px; }
  .nav-cta { display: none; }
  .menu-toggle { flex-shrink: 0; margin-inline: auto -10px; }
  .hero { padding-inline: 18px; }
  .hero-copy .eyebrow { font-size: 10px; letter-spacing: 0; }
  .hero-actions .button { width: 100%; }
  .hero-meta .meta-divider { display: none; }
  .floating-session { gap: 8px; padding: 10px; }
  .floating-session .session-symbol, .floating-plus { display: none; }
  .spec-inner > div { font-size: 11px; gap: 8px; }
  .companion-copy h2 { font-size: 30px; }
  .session-metrics { grid-template-columns: minmax(0, 1fr); }
  .session-metrics > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .progress-summary { flex-wrap: wrap; }
}

/* Activity composition: one compact selector, a real viewport and adjacent copy.
   All scene layout lives here; the canvas never shares space with its controls. */
body.fantasy-theme { background-image: none; }
.header { border-bottom: 1px solid #ded5c2; box-shadow: none; }
.brand { font-weight: 650; }
.brand .brand-logo { width: 180px; height: 60px; max-width: none; object-fit: contain; }
.footer-identity .brand .brand-logo { width: 210px; height: 70px; }
.dash-brand .brand-logo { width: 135px; height: 45px; object-fit: contain; }
.phone-nav .brand-logo { width: 120px; height: 40px; object-fit: contain; }
.nav-cta { min-height: 44px; border-color: #c5c6b1; border-radius: 8px; background: transparent; box-shadow: none; color: #345343; }
.nav-cta:hover { background: #eaf0e4; }
.intro .section-heading { align-items: center; margin-bottom: 28px; }
.intro .section-heading h2 { font-size: clamp(32px, 3.1vw, 48px); line-height: 1.08; }
.intro .section-heading .eyebrow { margin-bottom: 14px; }
.intro .section-heading > p { font-size: 15px; max-width: 38ch; }
.activity-stage { display: block; border: 1px solid #d6c9ae; border-radius: 18px; overflow: hidden; background: #fffbf2; box-shadow: 0 18px 48px #49352f08; }
.activity-menu { position: static; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; width: 100%; padding: 0; border-bottom: 1px solid #ded5c2; background: #f6f0e3; overflow: visible; }
.activity-menu button, .activity-menu button:nth-child(n), .activity-menu [aria-selected=true] {
  position: relative; display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
  min-height: 60px; padding: 16px 20px; gap: 13px; border: 0; border-radius: 0;
  background: transparent; box-shadow: none; text-align: left; transition: background .2s;
}
.activity-menu button > span { min-width: 0; }
.activity-menu button:nth-child(n + 2) { border-left: 1px solid #ded5c280; }
.activity-menu b { display: block; font: 600 clamp(16px, 1.25vw, 20px)/1.25 var(--display); letter-spacing: -.025em; white-space: normal; color: #4e5141; }
.activity-menu small { display: block; max-width: none; margin-top: 4px; font-size: 11px; line-height: 1.4; color: #716957; }
.activity-menu .activity-number { display: block; align-self: center; padding: 0; font-size: 10px; color: #84765c; }
.activity-menu .activity-arrow { display: none; }
.activity-menu button[aria-selected=true] { background: #eaf0e4; }
.activity-menu [aria-selected=true]::after { content: ''; position: absolute; inset: auto 20px -1px; height: 3px; background: #2b6659; border-radius: 3px 3px 0 0; }
.activity-menu [aria-selected=true] b, .activity-menu [aria-selected=true] .activity-number { color: #245b4e; }
.activity-menu button:focus-visible { outline-offset: -5px; z-index: 1; }
.activity-panel {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: stretch;
  width: 100%; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; overflow: visible;
}
.activity-panel::before { display: none; }
.activity-visual { min-width: 0; padding: 22px clamp(18px, 2vw, 32px); border-right: 1px solid #ded5c280; background: radial-gradient(ellipse at 50% 50%, #f0f0df, #fffbf2 72%); }
.activity-editorial { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 30px clamp(24px, 3vw, 48px); }
.activity-panel-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; color: #776a54; }
.activity-panel-top .micro { max-width: none; font-size: 10px; line-height: 1.5; letter-spacing: .12em; }
.activity-panel .outline-pill { font-size: 10px; padding: 4px 8px; border-color: #c5d2bb; background: #edf2e8; color: #345f4d; }
.activity-description { display: block; padding: 0; border: 0; }
.activity-description h3 { margin-top: 0; font-size: clamp(30px, 2.7vw, 44px); font-weight: 600; line-height: 1.08; letter-spacing: -.045em; color: #294d40; }
.activity-description p { margin-top: 20px; max-width: 42ch; font-size: 16px; line-height: 1.75; color: #645b4d; }
.activity-description .activity-detail { display: block; margin-top: 20px; padding-top: 18px; border-top: 1px solid #e1d8c6; font-size: 13px; line-height: 1.65; color: #3d6452; }
.activity-route { display: flex; align-items: center; gap: 9px; margin: 24px 0 0; font-size: 11px; line-height: 1.5; color: #71634b; }
.activity-route i { flex: 1; min-width: 8px; max-width: 32px; height: 1px; background: #c7bda7; }
.realm-scene-note { margin: 22px 0 0; max-width: 44ch; font-size: 11px; line-height: 1.6; text-align: left; color: #746b5d; }
.realm-stage { position: relative; display: grid; grid-template-rows: auto minmax(280px, 1fr) auto auto auto; gap: 12px; width: 100%; height: auto; min-width: 0; min-height: 650px; margin: 0; isolation: isolate; }
.realm-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.realm-caption { position: static; display: grid; gap: 4px; min-width: 0; text-align: left; pointer-events: none; }
.realm-caption > span { font: 600 16px/1.3 var(--display); color: #405a48; }
.realm-caption small { font-size: 11px; line-height: 1.4; letter-spacing: 0; color: #746c5b; }
.realm-expand { position: static; display: none; flex-shrink: 0; align-items: center; justify-content: center; gap: 9px; min-height: 40px; padding: 0 12px; border: 1px solid #d2c8b1; border-radius: 8px; background: #fffcf5; color: #405e4c; font-size: 12px; box-shadow: none; }
.realm-expand span { font-size: 19px; }
[data-realm-state=ready] .realm-expand { display: inline-flex; }
.realm-viewport { position: relative; min-width: 0; min-height: 0; isolation: isolate; }
.realm-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; pointer-events: none; cursor: grab; touch-action: pan-y; transition: opacity .4s; }
.realm-canvas:active { cursor: grabbing; }
.realm-grid { position: absolute; inset: 35% 12% 4%; z-index: -1; border-radius: 50%; opacity: .3; background: radial-gradient(ellipse, #c4c7a660, transparent 70%); }
.realm-fallback { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; transition: opacity .4s; }
.realm-fallback > img { width: 100%; height: 100%; object-fit: contain; }
.realm-fallback .activity-art { position: absolute; width: 80px; height: 90px; right: 4%; bottom: 16px; margin: 0; transform: none; }
.realm-fallback .arena-symbol { width: 65px; height: 72px; top: 0; left: 0; border-radius: 14px; }
.realm-fallback .arena-symbol svg { width: 46px; height: 46px; }
[data-realm-state=ready] .realm-canvas { opacity: 1; pointer-events: auto; }
[data-realm-state=ready] .realm-fallback { opacity: 0; }
.realm-toolbar { position: static; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 0; padding-top: 12px; border-top: 1px solid #d8d0bc; }
.realm-toolbar[hidden] { display: none; }
.realm-turn-controls { display: flex; gap: 6px; }
.realm-toolbar button { min-height: 40px; border: 1px solid #d0c7b3; border-radius: 8px; background: #fffcf5; box-shadow: none; color: #3e5b48; transition: background .2s; }
.realm-turn-controls button { width: 40px; font-size: 23px; }
.realm-toolbar [data-realm-pause] { padding: 0 12px; font-size: 12px; font-weight: 500; }
.realm-toolbar [data-realm-closeup] { padding: 0 12px; font-size: 12px; font-weight: 500; margin-left: auto; }
.realm-toolbar [data-realm-replay] { padding: 0 10px; font-size: 12px; font-weight: 500; }
.realm-toolbar [data-realm-closeup][aria-pressed=true] { background: #eaf0e4; border-color: #91aa83; }
.realm-toolbar [data-realm-closeup][hidden] { display: none; }
.realm-toolbar [data-realm-pause] > span { margin-left: 7px; }
.realm-toolbar button:disabled { opacity: .6; cursor: default; }
.realm-director { display: grid; gap: 9px; padding-top: 13px; border-top: 1px solid #d8d0bc; min-width: 0; }
.realm-director[hidden] { display: none; }
.realm-chapter { display: flex; align-items: center; gap: 9px; min-width: 0; color: #294d40; font: 600 13px/1.4 var(--text); }
.realm-chapter-index { flex-shrink: 0; color: #9a6d36; font: 500 10px/1.4 var(--text); letter-spacing: .04em; }
.realm-time { margin-left: auto; flex-shrink: 0; color: #81715a; font: 500 10px/1.4 var(--text); font-variant-numeric: tabular-nums; }
.realm-chapter-detail,.realm-entity-detail { margin: 0; color: #6b6656; font: 400 11px/1.6 var(--text); min-height: 2.6em; }
.realm-scrubber { display: flex; align-items: center; min-height: 28px; }
.realm-scrubber input { width: 100%; margin: 0; height: 24px; accent-color: #32675a; cursor: ew-resize; }
.realm-cues { display: flex; flex-wrap: wrap; gap: 6px; }
.realm-cues button,.realm-explore button { border: 1px solid #c9ceb7; border-radius: 7px; min-height: 34px; padding: 6px 10px; color: #355b49; background: #f3f5e9; font: 500 11px/1.3 var(--text); box-shadow: none; }
.realm-cues button:hover,.realm-explore button[aria-pressed=true] { background: #e2ebd9; border-color: #a9bea0; }
.realm-cues button:focus-visible,.realm-explore button:focus-visible,.realm-explore select:focus-visible,.realm-scrubber input:focus-visible { outline: 2px solid #387365; outline-offset: 3px; }
.realm-explore { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; padding-top: 3px; }
.realm-explore label { display: grid; gap: 4px; color: #7a705d; font: 500 10px/1.3 var(--text); min-width: 0; }
.realm-explore label:first-child { flex: 1; min-width: 145px; }
.realm-explore select { width: 100%; max-width: 100%; min-width: 0; height: 34px; padding: 0 22px 0 8px; color: #3a5846; background: #fffcf5; border: 1px solid #c9ceb7; border-radius: 7px; font: 500 11px var(--text); }
.realm-explore button { height: 34px; }
@media(max-width:480px) { .realm-cues button { flex: 1; padding-inline: 5px; min-height: 40px; } .realm-explore button { flex: 1; } .realm-explore select { height: 40px; } .realm-caption small { max-width: 28ch; } .realm-chapter { font-size: 12px; } }
.realm-status { position: static; display: block; font-size: 11px; line-height: 1.4; letter-spacing: 0; text-align: left; color: #6b725e; }
body.realm-view-open { overflow: hidden; }
.realm-viewer { width: min(1180px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; overflow-y: auto; overscroll-behavior: contain; border: 1px solid #b9bca5; border-radius: 18px; background: #fffbf2; color: #345343; box-shadow: 0 30px 100px #142d2440; }
.realm-viewer::backdrop { background: #142d24b3; backdrop-filter: blur(10px); }
.realm-viewer-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 16px 24px; border-bottom: 1px solid #ddd5c2; font-size: 10px; line-height: 1.5; letter-spacing: .08em; }
.realm-viewer-head button { min-width: 90px; min-height: 40px; padding: 0 12px; border: 1px solid #c5c6b1; border-radius: 8px; background: #f5f5e9; color: inherit; font: inherit; letter-spacing: 0; }
.realm-viewer-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; padding: 10px 20px; border-bottom: 1px solid #ddd5c2; }
.realm-viewer-nav button { min-height: 40px; padding: 0 18px; border: 1px solid transparent; border-radius: 8px; background: transparent; font: 500 13px var(--text); color: #506550; }
.realm-viewer-nav button[aria-pressed=true] { background: #eaf0e4; border-color: #c4d0b9; }
.realm-viewer .realm-stage { height: auto; min-height: 650px; grid-template-rows: auto minmax(340px, 52dvh) auto auto auto; margin: 0; padding: 20px 28px; }
.realm-viewer .realm-expand { display: none; }
@media (hover: hover) {
  .activity-menu button:hover { background: #eef0e2; }
  .realm-toolbar button:not(:disabled):hover, .realm-expand:hover { background: #eaf0e4; }
}
@media (max-width: 1100px) {
  .activity-panel { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .activity-menu button, .activity-menu button:nth-child(n) { gap: 10px; padding-inline: 16px; }
  .activity-menu small { font-size: 10px; }
  .activity-editorial { padding: 24px; }
  .activity-description h3 { font-size: 32px; }
  .activity-description p { font-size: 15px; }
}
@media (min-width: 901px) and (max-height: 800px) {
  .intro { padding-block: 36px 48px; }
  .intro .section-heading h2 { font-size: 36px; }
  .intro .section-heading { margin-bottom: 22px; }
  .activity-menu button, .activity-menu button:nth-child(n) { min-height: 64px; padding-block: 12px; }
  .activity-visual { padding-block: 18px; }
  .activity-description p, .activity-description .activity-detail { margin-top: 16px; }
  .activity-route, .realm-scene-note { margin-top: 18px; }
}
@media (max-width: 900px) {
  .activity-panel { grid-template-columns: minmax(0, 1fr); }
  .activity-visual { border-right: 0; border-bottom: 1px solid #ded5c280; padding: 20px 24px; }
  .activity-editorial { padding: 28px; }
  .activity-menu button, .activity-menu button:nth-child(n) { min-height: 64px; padding: 14px 12px; gap: 8px; }
  .activity-menu b { font-size: 16px; }
  .activity-menu small { display: none; }
  .realm-stage { height: auto; min-height: 660px; }
  .activity-description p { max-width: 65ch; }
  .activity-route { max-width: 400px; }
}
@media (max-width: 520px) {
  .brand .brand-logo { width: 150px; height: 50px; }
  .activity-stage { border-radius: 12px; }
  .activity-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .activity-menu button, .activity-menu button:nth-child(n) { min-height: 52px; padding: 12px 16px; }
  .activity-menu button:nth-child(n + 3) { border-top: 1px solid #ded5c280; }
  .activity-menu [aria-selected=true]::after { inset-inline: 16px; height: 2px; }
  .activity-visual { padding: 18px 16px; }
  .activity-editorial { padding: 24px 20px; }
  .activity-description h3 { font-size: 32px; }
  .activity-description p { font-size: 15px; }
  .realm-stage { height: auto; min-height: 660px; gap: 10px; grid-template-rows: auto minmax(245px, 1fr) auto auto auto; }
  .realm-heading { align-items: flex-start; }
  .realm-caption > span { font-size: 15px; }
  .realm-caption small { font-size: 10px; }
  .realm-expand { min-height: 36px; padding-inline: 8px; gap: 5px; font-size: 11px; }
  .realm-turn-controls { gap: 4px; }
  .realm-turn-controls button { width: 36px; }
  .realm-toolbar [data-realm-pause] { padding-inline: 8px; font-size: 11px; }
  .realm-viewer-head { padding: 12px 16px; }
  .realm-viewer-nav { padding: 8px; gap: 0; }
  .realm-viewer-nav button { flex: 1; padding-inline: 6px; font-size: 12px; }
  .realm-viewer .realm-stage { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .realm-canvas, .realm-fallback { transition: none; }
}

/* The film owns the full panel width; its controls sit below the world. */
.activity-panel { grid-template-columns: minmax(0,1fr); }
.activity-visual { border-right: 0; border-bottom: 1px solid #ded5c280; padding: 24px clamp(16px,3vw,40px); background: radial-gradient(ellipse at 50% 40%,#edeacf,#fffbf2 72%); }
[data-scene=dungeons] .activity-visual { background: radial-gradient(ellipse at 50% 40%,#e0dfed,#f8f5ed 72%); }
[data-scene=invasions] .activity-visual { background: radial-gradient(ellipse at 50% 40%,#e1ead3,#fffbf2 72%); }
[data-scene=castle] .activity-visual { background: radial-gradient(ellipse at 50% 40%,#efe0cc,#fffbf2 72%); }
.realm-stage { grid-template-rows: auto clamp(300px,42vw,530px) auto auto auto; min-height: 0; }
.realm-director { width: 100%; max-width: 940px; margin-inline: auto; }
.realm-chapter-detail,.realm-entity-detail { min-height: 1.6em; }
.realm-caption > span { font-size: clamp(18px,2.1vw,27px); }
.realm-caption small { font-size: 12px; }
.activity-editorial { padding: 26px clamp(24px,3vw,40px); flex-direction: row; gap: 35px; align-items: center; justify-content: space-between; }
.activity-description h3 { font-size: clamp(25px,3vw,36px); }
.activity-description p { max-width: 68ch; margin-top: 12px; font-size: 14px; }
.realm-scene-note { flex: 0 1 230px; margin: 0; }
.realm-scrubber .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media(pointer:coarse) { .realm-cues button,.realm-explore select,.realm-explore button,.realm-toolbar button { min-height: 44px; } .realm-turn-controls button { width: 44px; } .realm-scrubber input { height: 32px; } }
@media(max-width:700px) {
  .realm-stage { grid-template-rows: auto clamp(265px,77vw,420px) auto auto auto; }
  .realm-caption small { max-width: 30ch; font-size: 10px; }
  .activity-editorial { flex-direction: column; align-items: flex-start; gap: 18px; }
  .realm-scene-note { flex: auto; }
  .realm-viewer .realm-stage { grid-template-rows: auto minmax(280px,42dvh) auto auto auto; min-height: 0; }
}

/* The inline phone is a compact native preview: every gesture scrolls the site. */
.workspace-section { padding-block:clamp(48px,7vw,96px); }
.mobile-workspace { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); max-width:1000px; margin-inline:auto; gap:clamp(32px,6vw,96px); align-items:center; }
.mobile-workspace-copy { max-width:460px; }
.mobile-workspace-copy .eyebrow { font-size:10px; letter-spacing:.11em; margin-bottom:24px; }
.mobile-workspace-copy h2 { font-size:clamp(36px,4.6vw,66px); line-height:1.04; }
.mobile-workspace-lead { margin-top:24px; font-size:17px; line-height:1.75; color:#645f50; }
.mobile-workspace-copy .button { margin-top:30px; }
.mobile-workspace-note { margin-top:18px; font-size:12px; line-height:1.75; color:#776f5e; }
.mobile-device-stage { display:grid; place-items:center; min-width:0; padding:12px 6px 24px; touch-action:pan-y pinch-zoom; }
.mobile-demo-shell { position:relative; width:min(100%,350px); padding:9px; border:1px solid #788774; border-radius:46px; background:linear-gradient(140deg,#85917b,#2a3d34 28%,#17291f 70%,#7a886e); box-shadow:0 24px 60px #26382b20,0 6px 12px #26382b18,inset 0 0 0 2px #b6bda350; }
.mobile-demo-shell::before,.mobile-demo-shell::after { content:''; position:absolute; width:3px; border-radius:2px; background:#52634f; }
.mobile-demo-shell::before { left:-4px; top:105px; height:28px; box-shadow:0 42px #52634f; }
.mobile-demo-shell::after { right:-4px; top:145px; height:55px; }
.mobile-device-screen { display:flex; flex-direction:column; min-width:0; border:1px solid #18271f; border-radius:37px; padding-inline:16px; background:radial-gradient(ellipse at 50% 30%,#263b33,#14251f 75%); color:#f6f2df; }
.mobile-device-status { display:grid; grid-template-columns:1fr 84px 1fr; align-items:center; flex:0 0 40px; gap:8px; padding-inline:6px; font-size:11px; font-weight:600; }
.mobile-device-status > span:last-child { text-align:right; font-size:10px; letter-spacing:.02em; }
.mobile-device-island { width:84px; height:23px; border:1px solid #304236; border-radius:20px; background:#0b1712; }
.peek-brand { display:flex; align-items:center; gap:8px; min-height:54px; padding-block:6px 10px; border-bottom:1px solid #adbc9d24; }
.peek-brand img { width:32px; height:32px; padding:3px; border-radius:10px; background:#f5efd9; object-fit:contain; }
.peek-brand strong { font:550 21px/1.1 var(--display); letter-spacing:-.04em; }
.peek-brand > span { margin-left:auto; color:#b0bca4; font-size:8px; letter-spacing:.12em; }
.mobile-preview { display:flex; flex-direction:column; justify-content:space-between; gap:14px; min-height:450px; padding:18px 2px 20px; }
.mobile-preview[hidden] { display:none; }
.peek-status { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:10px; color:#b3c1ae; }
.peek-status > span:first-child { display:inline-flex; align-items:center; gap:5px; color:#d1deb9; }
.peek-status i { width:5px; height:5px; border-radius:50%; background:#b6cf8f; box-shadow:0 0 0 4px #c7e5a010; }
.peek-emblem { display:grid; place-items:center; width:84px; height:84px; align-self:center; border:1px solid #c6d8a333; border-radius:50%; background:radial-gradient(circle,#b7ca7f18,#b7ca7f00 72%); box-shadow:0 0 0 9px #b6cf8f05; }
.peek-emblem img { width:64px; height:64px; object-fit:contain; filter:drop-shadow(0 5px 6px #07140d55); }
.mobile-preview h3 { font:500 25px/1.13 var(--display); text-align:center; letter-spacing:-.035em; color:#f5efd9; }
.peek-rounds { display:flex; justify-content:center; gap:9px; }
.peek-rounds > span { display:grid; place-items:center; width:30px; height:30px; border:1px solid #b1c2a52b; border-radius:50%; color:#7e9483; font-size:11px; }
.peek-rounds .done { color:#c5d5b2; background:#b0ca8c14; }
.peek-rounds .current { color:#203b2e; border-color:#d6dba5; background:#d6dba5; box-shadow:0 0 0 4px #d6dba510; font-weight:700; }
.peek-metrics { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding-top:16px; border-top:1px solid #adbc9d24; }
.peek-metrics > div { display:grid; gap:5px; text-align:center; }
.peek-metrics > div + div { border-left:1px solid #adbc9d24; }
.peek-metrics span { color:#aebba6; font-size:10px; }
.peek-metrics strong { font:500 25px/1.1 var(--display); letter-spacing:-.04em; }
.peek-route { display:flex; justify-content:center; align-items:center; gap:7px; font-size:10px; color:#d4ddc4; }
.peek-route b { font-weight:400; color:#899d7a; }
.peek-stock { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.peek-stock > div { display:grid; justify-items:center; gap:5px; padding:15px 6px; border:1px solid #b3c49f20; border-radius:14px; background:#b2ca8d08; }
.peek-stock img { width:32px; height:32px; object-fit:contain; margin-bottom:3px; }
.peek-stock strong { font:500 23px/1.1 var(--display); letter-spacing:-.035em; }
.peek-stock span { font-size:10px; color:#b1bfa5; }
.mobile-demo-nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-inline:-6px; padding:10px 0 0; border-top:1px solid #adbc9d24; }
.mobile-demo-nav button { display:grid; place-items:center; align-content:center; gap:5px; min-height:58px; padding:8px 4px; border:1px solid transparent; border-radius:12px; background:transparent; color:#9fb19f; font-size:10px; }
.mobile-demo-nav img { width:22px; height:22px; object-fit:contain; opacity:.65; }
.mobile-demo-nav button[aria-pressed=true] { background:#c2d29612; border-color:#c2d29618; color:#e1e7bf; }
.mobile-demo-nav button[aria-pressed=true] img { opacity:1; }
.mobile-demo-nav button:focus-visible { outline:2px solid #d6dba5; outline-offset:0; }
.mobile-device-home { display:grid; place-items:center; height:22px; }
.mobile-device-home > span { width:88px; height:3px; border-radius:4px; background:#d5dec27a; }
/* The full application gets an unscaled viewport only when explicitly opened. */
.panel-demo-dialog { width:min(520px,calc(100% - 32px)); height:min(880px,calc(100dvh - 32px)); max-width:none; max-height:calc(100dvh - 32px); margin:auto; padding:0; overflow:hidden; border:1px solid #536651; border-radius:20px; background:#121a24; color:#f4f0e6; }
.panel-demo-dialog[open] { display:flex; flex-direction:column; }
.panel-demo-heading { display:flex; flex:0 0 auto; align-items:center; justify-content:space-between; gap:12px; padding:16px; border-bottom:1px solid #465142; background:#203027; }
.panel-demo-heading h3 { font:500 20px/1.2 var(--display); letter-spacing:-.025em; }
.panel-demo-heading p { margin-top:5px; font-size:11px; line-height:1.5; color:#bdc9b2; }
.panel-demo-heading button { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; gap:8px; min-height:44px; padding:8px 12px; border:1px solid #8b9d7950; border-radius:9px; background:#c2d29610; color:#e8edda; font-size:12px; }
.panel-demo-heading button > span { font-size:22px; line-height:1; }
#mobile-demo { display:block; flex:1 1 0; width:100%; min-height:0; border:0; background:#121a24; color-scheme:dark; }
@media(hover:hover) and (pointer:fine) {
  .mobile-demo-nav button:hover { background:#c2d29612; color:#edf1da; }
  .panel-demo-heading button:hover { background:#c2d29620; }
}
@media(prefers-reduced-motion:no-preference) {
  .mobile-preview:not([hidden]) { animation:peek-in .22s var(--ease); }
  @keyframes peek-in { from { opacity:.5; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
}
@media(max-width:700px) {
  .mobile-workspace { grid-template-columns:minmax(0,1fr); gap:32px; }
  .mobile-workspace-copy { max-width:440px; }
  .mobile-workspace-copy .eyebrow { margin-bottom:18px; font-size:9px; }
  .mobile-workspace-copy h2 { font-size:clamp(36px,9vw,54px); }
  .mobile-workspace-lead { margin-top:18px; font-size:15px; }
  .mobile-workspace-copy .button { margin-top:22px; }
  .mobile-workspace-note { font-size:11px; margin-top:14px; }
  .mobile-device-stage { padding:0 4px 8px; }
}
@media(max-width:600px) {
  .panel-demo-dialog { width:100%; height:100dvh; max-height:100dvh; margin:0; border:0; border-radius:0; }
  .panel-demo-heading { padding-top:max(14px,env(safe-area-inset-top)); }
}
@media(max-width:380px) {
  .mobile-demo-shell { border-radius:39px; padding:7px; }
  .mobile-device-screen { border-radius:32px; padding-inline:12px; }
  .mobile-preview h3 { font-size:23px; }
  .peek-route { gap:5px; font-size:9px; }
  .panel-demo-heading { gap:8px; padding-inline:12px; }
  .panel-demo-heading h3 { font-size:18px; }
}

/* One message, one illustration. Keep the time metaphor free of UI chrome. */
.manifesto {
  position: relative; overflow: hidden; margin-inline: auto;
  width: calc(100% - 2 * clamp(12px, 2vw, 32px));
  max-width: calc(var(--page-max) - 48px);
  padding-block: clamp(48px, 5.5vw, 84px);
  border: 1px solid #c6aa6b55; border-radius: 24px;
  color: #fff1d0; background: #304c41;
}
.manifesto .wrap {
  width: 100%; padding-inline: clamp(24px, 5vw, 80px);
}
.manifesto-layout {
  display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(240px, 1fr);
  align-items: center; gap: clamp(32px, 5vw, 80px);
}
.manifesto .eyebrow { display: block; color: #d8c498; font-size: 11px; line-height: 1.7; letter-spacing: .08em; }
.manifesto h2 {
  margin-top: 30px; font: 550 clamp(40px, 5.8vw, 88px)/1.04 var(--display);
  letter-spacing: -.055em; text-wrap: initial;
}
.manifesto h2 span { color: #f2cc83; }
.manifesto .manifesto-lead {
  margin-top: 28px; font-size: 16px; line-height: 1.65; color: #dfd7bf;
}
.manifesto .link-arrow {
  display: inline-flex; min-height: 44px; margin-top: 22px;
  align-items: center; gap: 24px; font-size: 14px; color: #f2cc83;
}
.manifesto .link-arrow:hover { color: #fff1d0; }
.manifesto-time { margin: 0; text-align: center; color: #f2cc83; }
.manifesto-hourglass { display: block; width: clamp(180px, 17vw, 250px); height: auto; margin: 0 auto 14px; }
.manifesto-time figcaption { display: grid; gap: 7px; font-size: 15px; line-height: 1.5; }
.manifesto-time strong { font-weight: 500; color: #fff1d0; }
.manifesto-time figcaption > span { color: #c9c9b5; }
@media (max-width: 900px) and (min-width: 701px) {
  .manifesto-layout { grid-template-columns: minmax(0, 1.8fr) minmax(180px, 1fr); gap: 24px; }
  .manifesto h2 { font-size: clamp(38px, 5.5vw, 50px); }
}
@media (max-width: 700px) {
  .manifesto { border-radius: 18px; padding-block: 38px; }
  .manifesto-layout { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .manifesto .eyebrow { max-width: 30ch; font-size: 10px; }
  .manifesto h2 { margin-top: 24px; font-size: clamp(34px, 8vw, 54px); }
  .manifesto .manifesto-lead { margin-top: 22px; font-size: 14px; }
  .manifesto .link-arrow { margin-top: 14px; }
  .manifesto-time { display: flex; align-items: center; gap: 22px; text-align: left; }
  .manifesto-hourglass { flex: 0 0 82px; width: 82px; margin: 0; }
  .manifesto-time figcaption { font-size: 14px; gap: 4px; }
}

/* Keep the introduction below the opening viewport. Let content grow on short
   screens and at increased text sizes rather than clipping or trapping scroll. */
.opening {
  --opening-gap: clamp(14px, 2vh, 24px);
  min-height: calc(100vh - var(--nav-height) - 1px);
  min-height: calc(100svh - var(--nav-height) - 1px);
  display: flex; flex-direction: column; padding-top: var(--opening-gap);
}
.opening .hero {
  flex: 1 0 auto; min-height: 0; margin: 0 auto;
  padding-block: clamp(22px, 4vh, 54px);
}
.opening .hero-visual { width: 100%; height: auto; min-height: 0; margin: 0; }
.opening .castle-image { inset: 0; width: 100%; height: 100%; object-fit: contain; }
.opening .spec-strip { flex: 0 0 auto; width: 100%; margin-top: var(--opening-gap); }
.opening .spec-inner { min-height: 96px; padding-block: 22px; }
@media (min-width: 1001px) and (max-height: 680px) {
  .opening .hero { padding-block: 20px; }
  .opening .hero h1 { font-size: clamp(38px, 8vh, 58px); }
  .opening .hero-lead { margin-top: 16px; }
  .opening .hero-meta { margin-top: 16px; }
  .opening .spec-inner { min-height: 80px; padding-block: 16px; }
}
@media (max-width: 1000px) {
  .opening .hero { grid-template-rows: auto minmax(180px, 1fr); row-gap: 14px; }
  .opening .hero-visual { min-height: clamp(180px, min(55vw, 32svh), 340px); }
}
@media (max-width: 700px) {
  .opening .hero { padding-block: 22px 12px; }
  .opening .hero-visual { min-height: clamp(180px, min(62vw, 28svh), 280px); }
  .opening .spec-inner { min-height: 0; padding-block: 20px; gap: 16px 12px; }
}