/* Mobi: an illustrated notebook story, scoped away from other articles. */
.app--article-mobi { --mobi-night: var(--ink-900); --mobi-light: var(--paper-100); --mobi-muted-light: var(--paper-400); --mobi-link: var(--ai-deep); }
.theme-dark .app--article-mobi, .app--article-mobi.theme-dark { --mobi-night: var(--paper-100); --mobi-light: var(--ink-900); --mobi-muted-light: var(--ink-700); --mobi-link: var(--ai-soft); }
.app--article-mobi .breadcrumb { line-height: 1.5; font-size: var(--fs-body-sm); text-transform: none; letter-spacing: 0; }
.app--article-mobi .breadcrumb__current { max-width: 36ch; }
.mobi-hero { position: relative; isolation: isolate; min-height: 680px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; border-radius: var(--radius-xl); background: var(--mobi-night); color: var(--mobi-light); }
.mobi-hero__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% center; z-index: -2; }
.mobi-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb,var(--mobi-night) 92%,transparent) 0%, color-mix(in srgb,var(--mobi-night) 68%,transparent) 36%, transparent 66%); z-index: -1; }
.mobi-hero__copy { padding: 64px; max-width: 650px; box-sizing: border-box; }
.mobi-label { font: 500 var(--fs-body-sm)/1.5 var(--font-body); letter-spacing: .04em; color: var(--mobi-link); margin: 0 0 24px; }
.mobi-hero .mobi-label { color: var(--ai-soft); margin-bottom: 40px; }
.mobi-hero__name { font: 500 var(--fs-h3)/1.5 var(--font-display); color: var(--mobi-light); margin: 0 0 8px; }
.mobi-hero h1 { white-space: pre-line; font: 800 var(--fs-display-xl)/1.02 var(--font-display); letter-spacing: var(--tracking-tight); color: var(--mobi-light); margin: 0 0 24px; }
.mobi-hero__intro { color: var(--mobi-light); max-width: 34ch; font-size: var(--fs-h4); line-height: 1.6; margin-bottom: 32px; }
.mobi-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 32px; padding: 16px 24px; border: 1px solid var(--ai-soft); border-radius: var(--radius-pill); background: var(--ai-tint); color: var(--ai-ink); font: 700 var(--fs-body-sm)/1.5 var(--font-body); text-decoration: none; transition: background .2s, transform .2s; }
.mobi-button:hover { background: var(--ai-soft); transform: translateY(-2px); }
.mobi-hero__foot { display: flex; justify-content: space-between; gap: 16px; padding: 24px 64px; border-top: 1px solid color-mix(in srgb,var(--mobi-light) 24%,transparent); color: var(--mobi-muted-light); font-size: var(--fs-body-sm); }
.mobi-story { max-width: 1200px; margin: 0 auto; }
.mobi-story h2 { font: 700 var(--fs-display-m)/1.14 var(--font-display); letter-spacing: var(--tracking-tight); white-space: pre-line; margin: 0 0 24px; text-wrap: balance; }
.mobi-story h3 { font: 600 var(--fs-h3)/1.3 var(--font-display); margin: 0 0 16px; }
.mobi-story p { line-height: 1.7; }
.mobi-scene { margin-top: 112px; scroll-margin-top: 112px; }
.mobi-story figure { margin: 0; min-width: 0; }
.mobi-story figcaption { color: var(--fg-muted); font-size: var(--fs-body-sm); line-height: 1.6; margin-top: 16px; }
.mobi-story figcaption a { display: block; margin-top: 8px; }
.mobi-story a:not(.mobi-button) { color: var(--mobi-link); text-underline-offset: 4px; }
.mobi-story a:not(.mobi-button):hover { text-decoration-thickness: 2px; }
.mobi-story button, .mobi-story summary { -webkit-tap-highlight-color: transparent; }
.mobi-story button:focus-visible, .mobi-story summary:focus-visible, .mobi-story a:focus-visible, .mobi-hero a:focus-visible { outline: 3px solid var(--ai-base); outline-offset: 5px; }
.mobi-opening { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); align-items: center; gap: 80px; }
.mobi-opening__copy { max-width: 58ch; }
.mobi-opening__aside { border-left: 3px solid var(--ai-base); padding-left: 24px; margin-top: 32px; font-weight: 500; font-size: var(--fs-h4); }
.mobi-field-photo img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }
.mobi-opening .mobi-field-photo { max-width: 448px; justify-self: end; transform: rotate(2deg); }
.mobi-section-head { max-width: 720px; }
.mobi-instruction { font-size: var(--fs-body-sm); color: var(--fg-muted); margin: 32px 0 16px; }
.mobi-bot { border-top: 1px solid var(--border); padding-top: 64px; }
.mobi-bot__layout { display: grid; grid-template-columns: minmax(0,.75fr) minmax(0,1.25fr); gap: 48px; }
.mobi-bot__choices { display: flex; flex-direction: column; }
.mobi-bot__choices button { display: flex; align-items: center; gap: 24px; padding: 24px 16px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--fg-muted); text-align: left; font: 500 var(--fs-h3)/1.3 var(--font-display); cursor: pointer; }
.mobi-bot__choices button>span:last-child { margin-left: auto; }
.mobi-bot__choices button[aria-pressed="true"] { color: var(--mobi-link); border-color: var(--ai-base); background: color-mix(in srgb,var(--ai-base) 8%,transparent); }
.mobi-bot__choices button:hover { color: var(--mobi-link); background: color-mix(in srgb,var(--ai-base) 12%,transparent); }
.mobi-number { font: 500 var(--fs-body-sm)/1.5 var(--font-body); color: var(--mobi-link); }
.mobi-bot__detail { padding: 40px; display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 24px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); min-height: 240px; }
.mobi-bot__icon { width: 64px; height: 64px; color: var(--mobi-link); }
.mobi-bot__detail .mobi-label { margin-bottom: 8px; }
.mobi-bot__detail p:last-child { margin-bottom: 0; }
.mobi-bot__takeaway { max-width: 72ch; margin: 32px 0 0; }
.mobi-local { border-radius: var(--radius-xl); padding: 48px; background: var(--mobi-night); color: var(--mobi-light); --mobi-link: var(--ai-soft); }
.mobi-local h2, .mobi-local h3, .mobi-local p { color: var(--mobi-light); }
.mobi-local .mobi-label { color: var(--ai-soft); }
.mobi-local__intro { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 48px; align-items: center; }
.mobi-local__intro img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); }
.mobi-local figcaption, .mobi-local .mobi-instruction { color: var(--mobi-muted-light); }
.mobi-route { margin-top: 40px; }
.mobi-route__nodes { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; }
.mobi-route__nodes button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 16px; border: 1px solid color-mix(in srgb,var(--mobi-light) 30%,transparent); border-radius: var(--radius-lg); background: transparent; color: var(--mobi-light); cursor: pointer; font: 400 var(--fs-body-sm)/1.5 var(--font-body); }
.mobi-route__nodes button:not(:last-child)::after { content: "↔"; position: absolute; right: -28px; top: 40%; color: var(--ai-soft); font-size: var(--fs-h3); }
.mobi-route__nodes button[aria-pressed="true"], .mobi-route__nodes button:hover { border-color: var(--ai-soft); background: color-mix(in srgb,var(--ai-base) 18%,transparent); }
.mobi-route__nodes svg { width: 40px; height: 40px; margin-bottom: 8px; color: var(--ai-soft); }
.mobi-route__nodes strong { font-weight: 700; }
.mobi-route__nodes button>span { color: var(--mobi-muted-light); }
.mobi-route__detail { max-width: 72ch; padding-top: 32px; min-height: 160px; }
.mobi-local__note { border-top: 1px solid color-mix(in srgb,var(--mobi-light) 24%,transparent); margin-top: 24px; padding-top: 32px; }
.mobi-local__note p { color: var(--mobi-muted-light); margin-bottom: 0; max-width: 85ch; }
.mobi-flow__steps { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); padding: 0; margin: 24px 0 0; list-style: none; border-bottom: 1px solid var(--border); }
.mobi-flow__steps button { width: 100%; display: flex; flex-direction: column; gap: 8px; padding: 16px 8px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--fg-muted); font: 500 var(--fs-body)/1.5 var(--font-body); cursor: pointer; }
.mobi-flow__steps button span { font-size: var(--fs-body-sm); }
.mobi-flow__steps button[aria-pressed="true"], .mobi-flow__steps button:hover { color: var(--mobi-link); border-bottom-color: var(--ai-base); background: color-mix(in srgb,var(--ai-base) 8%,transparent); }
.mobi-flow__stage { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 48px; padding: 48px; background: color-mix(in srgb,var(--ai-base) 8%,var(--bg)); border-radius: 0 0 var(--radius-xl) var(--radius-xl); align-items: center; }
.mobi-flow__illustration { min-height: 300px; position: relative; display: grid; place-items: center; color: var(--mobi-link); }
.mobi-flow__orbit { position: absolute; width: 248px; height: 248px; border: 1px dashed var(--ai-base); border-radius: 50%; transform: rotate(-20deg) scaleX(1.1); }
.mobi-flow__device { position: relative; width: 144px; height: 224px; border: 3px solid var(--mobi-link); border-radius: 32px; background: var(--bg-elevated); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; transform: rotate(-8deg); box-shadow: 16px 16px 0 color-mix(in srgb,var(--ai-base) 15%,transparent); }
.mobi-flow__device::before { content: ""; position: absolute; top: 12px; width: 40px; height: 4px; border-radius: var(--radius-pill); background: var(--mobi-link); }
.mobi-flow__device svg { width: 64px; height: 64px; }
.mobi-flow__device span { font: 700 var(--fs-h2)/1 var(--font-display); }
.mobi-flow__spark { position: absolute; font-size: var(--fs-display-m); font-weight: 400; }
.mobi-flow__spark--one { top: 8px; right: 16%; }
.mobi-flow__spark--two { bottom: 16px; left: 12%; }
.mobi-flow__copy { min-height: 260px; }
.mobi-flow__copy h3 { font-size: var(--fs-h2); }
.mobi-flow__detail { font-weight: 500; color: var(--mobi-link); }
.mobi-flow__controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; font-size: var(--fs-body-sm); color: var(--fg-muted); }
.mobi-flow__controls>div { display: flex; gap: 8px; }
.mobi-flow__controls button { min-width: 48px; min-height: 48px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--fg); cursor: pointer; font-size: var(--fs-h3); }
.mobi-flow__controls button:hover:not(:disabled) { border-color: var(--mobi-link); color: var(--mobi-link); }
.mobi-flow__controls button:disabled { opacity: .35; cursor: not-allowed; }
.mobi-evidence { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 80px; align-items: center; }
.mobi-evidence .mobi-field-photo { max-width: 448px; }
.mobi-evidence__changes { list-style: none; margin: 32px 0 0; padding: 0; }
.mobi-evidence__changes li { display: flex; gap: 24px; padding: 24px 0; border-top: 1px solid var(--border); }
.mobi-evidence__changes h3 { font-size: var(--fs-h4); margin: 0 0 4px; }
.mobi-evidence__changes p { font-size: var(--fs-body-sm); margin: 0; color: var(--fg-muted); }
.mobi-mark-legend { margin-top: 40px; padding: 32px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: color-mix(in srgb,var(--ai-base) 5%,var(--bg-elevated)); }
.mobi-mark-legend h3 { font-size: var(--fs-h4); margin-bottom: 8px; }
.mobi-mark-legend>p { max-width: 62ch; font-size: var(--fs-body-sm); color: var(--fg-muted); margin-bottom: 24px; }
.mobi-mark-legend ul { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px 28px; list-style: none; padding: 0; margin: 0; }
.mobi-mark-legend__item { display: grid; grid-template-columns: 14px minmax(0,1fr); align-items: start; gap: 10px; min-width: 0; }
.mobi-mark-legend__swatch { width: 12px; height: 12px; flex: 0 0 12px; margin-top: 5px; border-radius: 50%; background: var(--mobi-mark-color); box-shadow: 0 0 0 3px color-mix(in srgb,var(--mobi-mark-color) 18%,transparent); }
.mobi-mark-legend__item>span:last-child { display: flex; flex-direction: column; gap: 3px; }
.mobi-mark-legend strong { font: 700 var(--fs-body-sm)/1.3 var(--font-body); }
.mobi-mark-legend small { font: 400 var(--fs-body-sm)/1.4 var(--font-body); color: var(--fg-muted); }
.mobi-mark-legend__item--critical { --mobi-mark-color: var(--danger); }
.mobi-mark-legend__item--improve { --mobi-mark-color: var(--warn); }
.mobi-mark-legend__item--communication { --mobi-mark-color: var(--ux-blue); }
.mobi-mark-legend__item--new { --mobi-mark-color: color-mix(in srgb,var(--ux-base) 55%,var(--ai-base)); }
.mobi-mark-legend__item--move { --mobi-mark-color: var(--play-green); }
.mobi-reflection { border-top: 1px solid var(--border); padding-top: 64px; }
.mobi-reflection blockquote { max-width: 22ch; margin: 40px 0 64px; font: 700 var(--fs-display-l)/1.15 var(--font-display); color: var(--mobi-link); letter-spacing: var(--tracking-tight); }
.mobi-reflection__body { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 80px; }
.mobi-avatar { margin-top: 48px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.mobi-avatar summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; font: 600 var(--fs-h4)/1.5 var(--font-body); cursor: pointer; }
.mobi-avatar summary::-webkit-details-marker { display: none; }
.mobi-avatar summary:hover { color: var(--mobi-link); }
.mobi-avatar summary>span { font-size: var(--fs-h2); }
.mobi-avatar[open] summary>span { transform: rotate(45deg); }
.mobi-avatar img { width: 100%; height: auto; max-width: 880px; display: block; margin: 24px auto; border-radius: var(--radius-lg); }
.mobi-invitation { margin-top: 64px; padding: 48px; border-radius: var(--radius-xl); background: color-mix(in srgb,var(--ai-base) 10%,var(--bg)); display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.mobi-invitation h3 { max-width: 28ch; font-size: var(--fs-h2); margin: 0; }
.mobi-invitation .mobi-button { flex-shrink: 0; }
.mobi-further { margin-top: 64px; max-width: 76ch; }
.mobi-further h2 { font-size: var(--fs-h3); margin-bottom: 16px; }
.mobi-further p, .mobi-further a { font-size: var(--fs-body-sm); }
.mobi-further ul { padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 16px 32px; }
.app--article-mobi .art-read-also { margin-top: 64px; }
.app--article-mobi .art-author-box img { border-color: var(--ai-base) !important; }
.app--article-mobi .art-read-also span, .app--article-mobi .art-author-box p, .app--article-mobi .art-author-box>div>div { font-size: var(--fs-body-sm) !important; line-height: 1.5 !important; }
.app--article-mobi .art-read-also>span, .app--article-mobi .art-read-also__card>span:last-child { color: var(--mobi-link) !important; }
@media (max-width: 1100px) {
  .mobi-hero__copy { padding: 48px; max-width: 580px; }
  .mobi-hero__foot { padding: 24px 48px; }
  .mobi-opening, .mobi-evidence, .mobi-reflection__body { gap: 48px; }
  .mobi-local { padding: 32px; }
  .mobi-local__intro { grid-template-columns: 1fr; }
  .mobi-local__intro>div { max-width: 70ch; }
  .mobi-bot__detail { padding: 32px; grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .mobi-hero { min-height: 0; }
  .mobi-hero__art { position: relative; inset: auto; order: 2; height: auto; aspect-ratio: 16/9; object-fit: cover; z-index: 0; }
  .mobi-hero::after { display: none; }
  .mobi-hero__copy { max-width: 100%; padding: 40px 32px 16px; }
  .mobi-hero h1 { font-size: var(--fs-display-l); }
  .mobi-hero__intro { max-width: 46ch; }
  .mobi-hero__foot { order: 3; padding: 24px 32px; flex-wrap: wrap; }
  .mobi-hero .mobi-label { margin-bottom: 24px; }
  .mobi-scene { margin-top: 72px; }
  .mobi-opening, .mobi-evidence, .mobi-reflection__body { grid-template-columns: 1fr; gap: 32px; }
  .mobi-opening .mobi-field-photo { justify-self: center; transform: none; }
  .mobi-evidence .mobi-field-photo { order: 2; justify-self: center; }
  .mobi-mark-legend ul { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .mobi-bot__layout { grid-template-columns: 1fr; gap: 24px; }
  .mobi-bot__detail { grid-template-columns: 56px minmax(0,1fr); min-height: 0; }
  .mobi-bot__icon { width: 48px; height: 48px; }
  .mobi-flow__stage { gap: 24px; padding: 32px 24px; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); }
  .mobi-flow__orbit { width: 176px; height: 224px; }
  .mobi-flow__spark { display: none; }
  .mobi-flow__device { width: 120px; height: 200px; }
  .mobi-invitation { flex-direction: column; align-items: flex-start; padding: 32px; }
}
@media (max-width: 550px) {
  .mobi-hero__copy { padding: 32px 24px 8px; }
  .mobi-hero__foot { padding: 24px; }
  .mobi-hero h1 { font-size: var(--fs-display-m); }
  .mobi-hero__intro { font-size: var(--fs-body); }
  .mobi-hero .mobi-label { font-size: var(--fs-body-sm); letter-spacing: 0; }
  .mobi-label { letter-spacing: 0; margin-bottom: 16px; }
  .mobi-story h2 { font-size: var(--fs-h2); white-space: normal; }
  .mobi-scene { margin-top: 64px; }
  .mobi-bot, .mobi-reflection { padding-top: 40px; }
  .mobi-bot__choices button { padding: 24px 8px; font-size: var(--fs-h4); }
  .mobi-bot__detail { padding: 24px; grid-template-columns: 1fr; gap: 16px; }
  .mobi-local { padding: 32px 24px; }
  .mobi-local__intro { gap: 24px; }
  .mobi-route__nodes { grid-template-columns: 1fr; gap: 24px; }
  .mobi-route__nodes button { display: grid; grid-template-columns: 40px minmax(0,1fr); column-gap: 16px; text-align: left; padding: 16px; }
  .mobi-route__nodes svg { grid-row: span 2; margin: 0; }
  .mobi-route__nodes button:not(:last-child)::after { content: "↕"; top: auto; bottom: -25px; right: 50%; }
  .mobi-route__detail { min-height: 0; }
  .mobi-flow__steps { grid-template-columns: repeat(3,minmax(0,1fr)); row-gap: 8px; }
  .mobi-flow__stage { grid-template-columns: 1fr; padding: 24px; }
  .mobi-flow__illustration { min-height: 240px; }
  .mobi-flow__copy { min-height: 0; }
  .mobi-flow__copy h3 { font-size: var(--fs-h3); }
  .mobi-flow__controls { align-items: flex-start; }
  .mobi-flow__controls>span { max-width: 20ch; }
  .mobi-reflection blockquote { font-size: var(--fs-display-m); margin: 32px 0 40px; }
  .mobi-invitation { padding: 24px; }
  .mobi-invitation h3 { font-size: var(--fs-h3); }
}
@media (prefers-reduced-motion: reduce) { .mobi-button { transition: none; } .mobi-button:hover { transform: none; } }