/* Compact interactive previews, following Vesper's native design tokens. */
.ritual { transform:none; }
.ritual-welcome h2 { font-size:30px; font-weight:700; letter-spacing:-.012em; }
.writing-card { transform:none; box-shadow:none; border-radius:12px; }
.dashboard-metrics { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(0,1fr); gap:10px; margin-top:12px; }
.dashboard-card { padding:18px 20px; border:1px solid var(--border); background:var(--card); border-radius:12px; text-align:left; min-width:0; }
.dashboard-label,.constellation .dashboard-label { color:var(--muted); margin:0 0 12px; font-size:9px; font-weight:500; line-height:1.4; text-transform:uppercase; letter-spacing:.035em; }
.dashboard-figure { display:flex; align-items:baseline; gap:7px; white-space:nowrap; }
.dashboard-figure strong { font-size:30px; font-weight:650; line-height:1.2; letter-spacing:-.012em; font-variant-numeric:tabular-nums; }
.dashboard-figure span { font-size:10px; color:var(--muted); }
.constellation svg { display:block; height:64px; margin-top:8px; }
.constellation .past-stars,.ritual.is-lit .past-stars { fill:var(--faint); opacity:.55; }
.tonight-star { fill:transparent; transform-origin:320px 24px; stroke-width:1; stroke-dasharray:2 2; }
.ritual.is-lit .tonight-star { r:4; }
.constellation .streak-caption { font-size:9px; line-height:1.5; margin:4px 0 0; color:var(--faint); }
.dashboard-progress { height:2px; background:var(--border); border-radius:2px; margin:18px 0 14px; }
.dashboard-progress span { display:block; width:0; height:100%; background:var(--accent); transition:width .4s ease; }
.tonight-card #writing-hint { font-size:10px; color:var(--muted); line-height:1.6; margin:0; }
.phone-reader { width:310px; padding:21px 22px 30px; background:var(--surface); }
.reader-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 -3px 36px; }
.reader-toolbar .phone-title { font-size:12px; margin:0; flex:1; padding-left:30px; }
.reader-toolbar button { background:var(--card); border:1px solid var(--border); border-radius:30px; padding:6px 10px; font-size:18px; letter-spacing:-.07em; }
.phone-reader .phone-chapter { font-size:9px; font-weight:500; letter-spacing:2px; margin-bottom:19px; }
.phone-reader h3 { font-size:28px; line-height:1.2; letter-spacing:0; font-weight:400; margin:0 0 22px; }
.phone-reader .reader-rule { width:28px; margin-bottom:31px; }
.phone-reader p { font-size:18px; line-height:1.55; margin:0 0 20px; }
.phone-reader.large-text p { font-size:21px; }
.reader-endmark { display:block; text-align:center; font-size:9px; color:var(--faint); margin-top:24px; }
@media(max-width:760px) {
  .ritual-welcome h2 { font-size:25px; }
  .dashboard-card { padding:16px 14px; }
  .dashboard-figure strong { font-size:27px; }
  .dashboard-figure span { font-size:9px; white-space:normal; }
  .constellation svg { height:52px; }
  .phone-reader { width:min(310px,100%); }
}

/* The shipped Vesper preset: 5.5 × 8.5 in, EB Garamond 11/14.52 pt,
   22/16 mm inside/outside margins, chapter drop 30%, first-line small caps.
   Container units preserve the relationship between type and paper at every size. */
.vesper-book-stage {
  min-height: 620px;
  padding: 28px 40px 35px;
}

.vesper-manuscript {
  width: min(100%, 410px);
  min-height: 485px;
  padding: 32px 35px 38px;
}

.vesper-manuscript .draft-heading {
  font-size: 10px;
  letter-spacing: 0;
  margin-bottom: 36px;
}

.vesper-manuscript > .manuscript-chapter-label {
  color: var(--muted);
  font: 10px/1.4 -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: .08em;
  margin-bottom: 10px;
}

.vesper-manuscript h3 {
  font: 500 26px/1.2 'Vesper Prose', Georgia, serif;
  letter-spacing: 0;
  margin: 0 0 25px;
}

.vesper-manuscript > p:not(.manuscript-chapter-label) {
  font: 15px/1.55 'Vesper Prose', Georgia, serif;
  margin: 0 0 .85em;
}

.vesper-template {
  width: min(100%, 800px);
}

.template-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 0 0 17px;
  font-size: 10px;
  line-height: 1.4;
  color: var(--muted);
}

.template-name {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  font-weight: 500;
}

.template-name svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}

.template-caption i {
  font-style: normal;
  margin: 0 6px;
}

.vesper-template .vesper-spread {
  width: 100%;
  min-height: 0;
  gap: 2px;
  background: #d9d9d9;
  border: 1px solid #e3e3e3;
  box-shadow: 0 18px 35px -25px #14141445;
  transform: none;
  perspective: none;
  animation: panel-in .65s both;
}

.vesper-template .book-page {
  aspect-ratio: 5.5 / 8.5;
  container-type: inline-size;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #000;
  background: #fff;
  overflow: hidden;
  font-family: 'Vesper Prose', Georgia, serif;
  font-weight: 400;
}

.vesper-page-content {
  position: absolute;
  top: 32%;
  left: 15.748%;
  right: 11.453%;
  max-height: 58%;
  overflow: hidden;
  font-size: 2.7778cqw;
  line-height: 1.32;
}

.vesper-template .chapter-number {
  margin: 0;
  font-size: 1em;
  line-height: 1.32;
  font-weight: 400;
  font-variant-caps: all-small-caps;
  letter-spacing: .12em;
  text-align: center;
}

.vesper-template .book-page h3 {
  width: 80%;
  margin: .7333em auto 1.32em;
  font: 400 1.8em/1.15 'Vesper Prose', Georgia, serif;
  letter-spacing: 0;
  text-align: center;
}

.vesper-template .printed-prose {
  padding: 0;
  font-size: 1em;
  line-height: 1.32;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  text-wrap: pretty;
}

.vesper-template .printed-prose p {
  margin: 0;
  orphans: 2;
  widows: 2;
}

.vesper-template .printed-prose p + p {
  text-indent: 1.2em;
}

.vesper-template .printed-prose .small-caps-opening {
  display: block;
  max-height: 6.6em;
  overflow: hidden;
  text-indent: 0;
  overflow-wrap: break-word;
}

.vesper-template .small-caps-opening::first-line {
  font-variant-caps: small-caps;
}

.vesper-template .folio {
  left: 15.748%;
  right: 11.453%;
  bottom: 6.45%;
  font-size: 2.2727cqw;
  line-height: 1;
}

.template-detail {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.vesper-book-stage .book-companion {
  right: -20px;
  bottom: 5px;
  width: 150px;
}

@media (max-width: 760px) {
  .vesper-book-stage {
    padding: 25px 0 35px;
    min-height: 530px;
  }
  .vesper-template {
    width: min(100%, 370px);
  }
  .vesper-template .vesper-spread {
    display: block;
  }
  .vesper-template .vesper-verso {
    display: none;
  }
  .template-caption {
    flex-wrap: wrap;
    gap: 5px 12px;
    font-size: 9px;
  }
  .template-detail {
    padding: 0 12px;
    font-size: 10px;
  }
  .vesper-book-stage .book-companion {
    width: 100px;
    right: -9px;
    bottom: -12px;
  }
  .vesper-manuscript {
    width: min(100%, 330px);
    min-height: 435px;
    padding: 25px 28px;
  }
  .vesper-manuscript > p:not(.manuscript-chapter-label) {
    font-size: 13px;
  }
  .vesper-manuscript h3 {
    font-size: 25px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vesper-template .vesper-spread {
    animation: none;
  }
}

/* An illustrated reading invitation. Place inside .share-copy or across the share section. */
.share-journey {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 32px auto 0;
  isolation: isolate;
  color: var(--ink);
}
.journey-steps {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr .7fr 1fr;
  gap: 0;
  padding: 0;
  margin: 0;
}
.journey-steps > li { min-width: 0; text-align: center; }
.journey-steps > li > svg {
  display: block;
  width: 100%;
  height: auto;
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.journey-body, .journey-paper { fill: var(--surface); }
.journey-warm { fill: color-mix(in srgb, #efaa72 32%, var(--surface)); }
.journey-green { fill: color-mix(in srgb, #8fcbb2 35%, var(--surface)); }
.journey-doodle { stroke: var(--faint); stroke-width: 1.5; }
.journey-accent { stroke: var(--accent); stroke-width: 1.8; }
.journey-arm-outline { stroke-width: 13; }
.journey-arm { stroke: var(--surface); stroke-width: 8.6; }
.journey-leg-outline { stroke-width: 15; }
.journey-leg { stroke: var(--surface); stroke-width: 10.6; }
.journey-device-line { stroke-width: 1.2; }
.journey-tap { stroke-width: 1.5; }
.journey-connection {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: auto;
  inset: 0 0 auto;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.journey-thread { stroke-dasharray: 2 6; opacity: .32; }
.journey-arrow { opacity: .6; }
.journey-travelling-page { opacity: 0; }
.journey-sharing { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.journey-share-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 68px;
  min-width: 74px;
  margin: auto 0;
  padding: 10px 8px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  line-height: 1.2;
  transition: border-color .2s, transform .2s;
}
.journey-share-button > svg { width: 27px; height: 27px; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.journey-share-button:hover { border-color: var(--ink); transform: translateY(-2px) rotate(-3deg); }
.journey-share-button:active { transform: translateY(0) scale(.96); }
.journey-share-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.journey-step { display: grid; grid-template-columns: auto auto; justify-content: center; gap: 4px; align-items: baseline; font-size: 12px; line-height: 1.4; }
.journey-number { color: var(--faint); font-size: 9px; font-variant-numeric: tabular-nums; }
.journey-step strong { font-weight: 600; }
.journey-step > span:last-child { grid-column: 1/-1; font-size: 10px; color: var(--muted); }
.journey-caption { margin: 20px 0 0; text-align: center; color: var(--muted); font: italic 16px/1.4 'Vesper Prose', Georgia, serif; }
.share-journey[data-state="read"] .journey-thread { opacity: .65; }
.share-journey[data-state="read"] .journey-share-button { border-color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .share-journey.is-sharing .journey-travelling-page { animation: journey-delivery 1.2s cubic-bezier(.33, 1, .68, 1) both; }
  .share-journey.is-sharing .journey-reader-spark { transform-origin: center; transform-box: fill-box; animation: journey-delight .6s ease-out .75s both; }
  .share-journey.is-sharing .journey-reader-device { transform-origin: 110px 135px; animation: journey-settle .7s ease-in-out .7s both; }
  @keyframes journey-delivery {
    0% { opacity: 0; transform: translate(184px, 80px) rotate(-14deg); }
    12% { opacity: 1; }
    45% { opacity: 1; transform: translate(278px, 18px) rotate(13deg); }
    82% { opacity: 1; transform: translate(395px, 52px) rotate(-8deg); }
    100% { opacity: 0; transform: translate(431px, 80px) rotate(0); }
  }
  @keyframes journey-delight { from { opacity: 0; transform: scale(.5); } 65% { transform: scale(1.15); } to { opacity: 1; transform: scale(1); } }
  @keyframes journey-settle { 45% { transform: rotate(-5deg); } }
}
@media (max-width: 480px) {
  .share-journey { margin-top: 28px; }
  .journey-steps { grid-template-columns: 1fr .66fr 1fr; }
  .journey-share-button { min-height: 56px; min-width: 62px; padding: 7px 5px; border-radius: 13px; font-size: 10px; }
  .journey-share-button > svg { width: 23px; height: 23px; }
  .journey-step { font-size: 11px; column-gap: 3px; }
  .journey-step > span:last-child { max-width: 100px; font-size: 9px; padding: 0 3px; }
  .journey-caption { font-size: 15px; margin-top: 17px; }
}

.share-copy .reader-toggle-link { margin-top:24px; font-size:12px; }
.share-section { column-gap:10%; }

/* Native Mac preview: geometry and hierarchy from BookSidebar, ChapterEditor,
   PlotBoard, WikiEntryPage and NotePage. Mobile keeps the same surfaces in a stack. */
#studio-demo { background:var(--surface); }
#studio-demo .studio-chrome { background:var(--surface); border-bottom:0; }
#studio-demo .studio-layout { grid-template-columns:205px minmax(0,1fr); min-height:590px; }
#studio-demo .studio-sidebar { display:flex; flex-direction:column; padding:0 10px 0; background:color-mix(in srgb,var(--neutral) 78%,var(--surface)); border-right:1px solid var(--border); }
#studio-demo .native-book-heading { padding:14px 10px 22px; }
#studio-demo .mark.small { padding:0; font-size:13px; gap:6px; }
#studio-demo .mark.small .ring { width:12px; height:12px; }
#studio-demo .book-name { font-size:20px; line-height:1.15; margin:12px 0 0; padding:0; white-space:normal; }
#studio-demo .studio-tabs { display:flex; flex-direction:column; gap:1px; }
#studio-demo .native-sidebar-label { display:flex; justify-content:space-between; padding:0 10px 6px; color:var(--faint); font-size:10px; font-weight:500; letter-spacing:.09em; }
#studio-demo .native-chapters-label { padding-top:24px; padding-bottom:10px; }
#studio-demo .studio-tab, #studio-demo .native-nav-placeholder { display:flex; align-items:center; gap:9px; min-height:31px; padding:6px 10px; color:var(--muted); font-size:12px; font-weight:400; border-radius:7px; }
#studio-demo .studio-tab span { color:inherit; font-size:inherit; width:auto; }
#studio-demo .studio-tab svg, #studio-demo .native-nav-placeholder svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; flex:none; color:var(--faint); }
#studio-demo .studio-tab[aria-selected=true] { background:color-mix(in srgb,var(--ink) 7%,transparent); color:var(--ink); }
#studio-demo .studio-tab[aria-selected=true] svg { color:var(--accent); }
#studio-demo .native-chapter-tab[aria-selected=true] { color:var(--surface); background:var(--ink); }
#studio-demo .native-chapter-tab { font-size:11px; padding-right:6px; gap:8px; }
#studio-demo .native-chapter-short { display:none; }
#studio-demo .native-storyline, #studio-demo .native-chapter { display:flex; align-items:center; gap:9px; padding:8px 10px; color:var(--muted); font-size:11px; white-space:nowrap; }
#studio-demo .native-storyline { font-size:9px; font-weight:500; letter-spacing:.04em; padding-top:13px; }
#studio-demo .native-storyline small, #studio-demo .native-chapter small { margin-left:auto; color:var(--faint); font-size:9px; }
#studio-demo .native-storyline i, #studio-demo .native-chapter i, #studio-demo .native-status { display:inline-block; width:5px; height:5px; background:var(--faint); border-radius:50%; flex:none; }
#studio-demo .native-status { vertical-align:middle; }
#studio-demo .native-status.planned, #studio-demo .native-chapter i.planned { background:transparent; border:1px dotted var(--faint); width:6px; height:6px; }
#studio-demo .native-chapter-tab[aria-selected=true] .native-status { background:var(--surface); opacity:.65; }
#studio-demo .sidebar-bottom { position:static; display:block; margin:20px -10px 0; padding:14px 20px; border-top:1px solid var(--border); font-size:10px; margin-top:auto; }
#studio-demo .studio-panel { min-height:590px; }
#studio-demo .native-toolbar { height:45px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 24px; font-size:11px; letter-spacing:0; color:var(--muted); }
#studio-demo .native-toolbar>strong { font-size:12px; color:var(--muted); font-weight:600; }
#studio-demo .native-toolbar-detail { font-size:10px; color:var(--faint); }
#studio-demo .native-formatting { display:flex; align-items:center; gap:5px; }
#studio-demo .native-formatting>span { display:flex; gap:13px; background:var(--neutral); border:1px solid var(--border); border-radius:99px; padding:6px 11px; font:11px/1.1 -apple-system,BlinkMacSystemFont,sans-serif; }
#studio-demo .editor-tools { padding-top:0; }
#studio-demo .editor-tools select { background:var(--neutral); font-size:10px; padding:6px 10px; }
#studio-demo .editor-prose { max-width:660px; padding:0 30px; margin:37px auto 30px; font-size:19px; line-height:1.55; }
#studio-demo .editor-prose h3 { font-size:32px; font-weight:600; line-height:1.2; margin-bottom:21px; }
#studio-demo .editor-prose p { margin-bottom:.85em; }
#studio-demo .editor-prose .native-scene-label { font:9px/1.3 -apple-system,BlinkMacSystemFont,sans-serif; color:var(--faint); letter-spacing:.06em; margin:0 0 19px; }
#studio-demo .your-opening::before { display:none; }
#studio-demo .inline-discovery { font:11px/1.6 -apple-system,BlinkMacSystemFont,sans-serif; margin-top:9px; color:var(--accent); border-bottom:0; }
#studio-demo .panel-foot { justify-content:flex-end; padding:4px 25px 22px; gap:14px; font-size:10px; color:var(--faint); }
#studio-demo .panel-foot .native-status { margin-right:4px; }
#studio-demo.focused .studio-layout { grid-template-columns:0 minmax(0,1fr); }
#studio-demo.focused .studio-sidebar { padding-inline:0; visibility:hidden; }
#studio-demo .native-segment { display:flex; background:var(--neutral); border:1px solid var(--border); padding:3px; border-radius:99px; font-size:11px; }
#studio-demo .native-segment span, #studio-demo .native-segment b { padding:4px 11px; font-weight:500; }
#studio-demo .native-segment b { color:var(--ink); background:var(--card); border-radius:99px; }
#studio-demo .native-board { padding:12px 24px 0; }
#studio-demo .native-board-count { font-size:10px; color:var(--muted); display:flex; gap:8px; margin-bottom:24px; }
#studio-demo .native-board-count>span { color:var(--faint); }
#studio-demo .native-board-hint { margin-left:auto; }
#studio-demo .native-board-columns { display:grid; grid-template-columns:115px 1fr 1fr; gap:14px; font-size:9px; letter-spacing:.04em; color:var(--muted); margin-bottom:18px; }
#studio-demo .native-board-columns>span:first-child { font-size:8px; }
#studio-demo .native-board-columns i { display:inline-block; width:5px; height:5px; background:var(--faint); border-radius:50%; margin-right:7px; }
#studio-demo .native-board-grid { display:grid; grid-template-columns:115px minmax(0,1fr); gap:14px; }
#studio-demo .native-spine { position:relative; border-left:1px solid color-mix(in srgb,var(--accent) 45%,var(--border)); padding-left:13px; font-size:10px; color:var(--muted); margin-left:4px; }
#studio-demo .native-act { font-size:9px; font-weight:600; margin:0 0 21px; }
#studio-demo .native-beat { position:absolute; line-height:1.5; }
#studio-demo .native-beat i, #studio-demo .native-here i { position:absolute; top:5px; left:-17px; width:7px; height:7px; border-radius:50%; background:var(--surface); border:1px dotted var(--accent); }
#studio-demo .native-beat small { font-size:9px; color:var(--faint); }
#studio-demo .beat-one { top:29px; }
#studio-demo .beat-two { top:158px; }
#studio-demo .beat-three { top:271px; }
#studio-demo .native-here { position:absolute; bottom:0; font-size:9px; }
#studio-demo .native-here i { background:var(--accent); border:0; box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 9%,transparent); top:4px; }
#studio-demo .plot-cards { display:grid; grid-template-columns:1fr 1fr; gap:13px; margin:0; }
#studio-demo .plot-card { display:block; min-height:105px; transform:none; padding:13px; border-radius:12px; border:1px solid var(--border); background:var(--card); position:relative; }
#studio-demo .plot-card:nth-child(1) { grid-column:1; grid-row:1; }
#studio-demo .plot-card:nth-child(2) { grid-column:2; grid-row:2; transform:none; }
#studio-demo .plot-card:nth-child(3) { grid-column:1; grid-row:3; transform:none; }
#studio-demo .plot-card.native-planned { border-style:dashed; background:var(--surface); }
#studio-demo .plot-card:hover { transform:none; border-color:var(--muted); }
#studio-demo .plot-card[aria-pressed=true] { transform:none; border-color:var(--muted); box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 7%,transparent); }
#studio-demo .plot-card[aria-pressed=true]::before { display:none; }
#studio-demo .plot-card strong { display:flex; gap:7px; font-size:12px; font-weight:500; line-height:1.35; letter-spacing:0; }
#studio-demo .plot-card strong>span { color:var(--faint); font-size:11px; font-weight:400; }
#studio-demo .plot-card p { font-size:11px; color:var(--muted); line-height:1.5; margin:7px 0; }
#studio-demo .plot-card small { display:flex; align-items:center; gap:5px; margin-top:9px; font-size:9px; color:var(--faint); }
#studio-demo .plot-detail { margin:23px 24px 0; padding-bottom:20px; max-width:none; font-size:11px; line-height:1.6; gap:8px; }
#studio-demo .plot-detail p { margin:0; }
#studio-demo .native-split { display:grid; grid-template-columns:205px minmax(0,1fr); min-height:545px; }
#studio-demo .native-index { background:var(--card); border-right:1px solid var(--border); min-width:0; }
#studio-demo .native-kind-bar { display:flex; gap:14px; margin:0 15px 8px; border-bottom:1px solid var(--border); font-size:10px; color:var(--muted); white-space:nowrap; overflow:hidden; }
#studio-demo .native-kind-bar>* { padding:12px 0 8px; font-weight:400; }
#studio-demo .native-kind-bar b { color:var(--ink); border-bottom:2px solid var(--ink); }
#studio-demo .wiki-choices { display:flex; flex-direction:column; gap:3px; margin:0; padding:0 7px; }
#studio-demo .wiki-choice { border:0; background:transparent; border-radius:7px; text-align:left; gap:9px; padding:10px 8px; font-size:12px; }
#studio-demo .wiki-choice[aria-pressed=true] { background:var(--neutral); }
#studio-demo .wiki-choice>span:last-child { min-width:0; }
#studio-demo .wiki-choice strong { display:block; font-size:11px; line-height:1.4; font-weight:500; }
#studio-demo .wiki-choice small { display:block; font-size:9px; color:var(--muted); margin-top:3px; }
#studio-demo .avatar { width:32px; height:32px; flex:none; border:1px solid var(--border); color:var(--muted); font-size:12px; font-weight:600; }
#studio-demo .wiki-entry { margin:0; padding:34px 32px; border:0; max-width:none; min-width:0; }
#studio-demo .native-wiki-identity { display:flex; align-items:flex-start; gap:13px; }
#studio-demo .native-large-avatar { width:48px; height:48px; font-size:17px; }
#studio-demo .wiki-entry h4 { font-size:27px; line-height:1.1; letter-spacing:-.035em; margin:1px 0 9px; }
#studio-demo #wiki-kind { color:var(--muted); font-size:10px; margin:0; line-height:1.5; }
#studio-demo .native-wiki-section { display:flex; justify-content:space-between; gap:10px; margin:28px 0 9px; }
#studio-demo .native-section-label { font-size:9px; color:var(--faint); letter-spacing:.06em; font-weight:500; }
#studio-demo .native-file-label { font-size:9px; color:var(--faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#studio-demo .native-wiki-notes { padding:18px; border:1px solid var(--border); border-radius:12px; background:var(--card); font:16px/1.5 'Vesper Prose',Georgia,serif; color:var(--ink); }
#studio-demo .native-wiki-notes p { margin:0 0 12px; font:inherit; }
#studio-demo .native-wiki-notes p:last-child { margin-bottom:0; }
#studio-demo .wiki-detail { border:0; padding:0; }
#studio-demo .native-found { margin-top:28px; }
#studio-demo .native-found>p { font-size:11px; line-height:1.6; color:var(--muted); margin:8px 0 15px; }
#studio-demo .native-found>div { border-top:1px solid var(--border); display:flex; justify-content:space-between; gap:10px; padding:10px 0; font-size:10px; color:var(--muted); }
#studio-demo .native-found>div:last-child { border-bottom:1px solid var(--border); }
#studio-demo .native-found small { font-size:9px; color:var(--faint); white-space:nowrap; }
#studio-demo .notes-layout { gap:0; padding:0; }
#studio-demo .note-list { display:flex; flex-direction:column; gap:3px; margin:0; padding:10px 7px; }
#studio-demo .note-list button { padding:13px 11px; border:0; border-radius:7px; gap:5px; }
#studio-demo .note-list button[aria-pressed=true] { background:var(--neutral); }
#studio-demo .note-list strong { font-size:11px; font-weight:500; }
#studio-demo .note-list span, #studio-demo .note-list small { display:block; font-size:9px; color:var(--muted); line-height:1.5; }
#studio-demo .note-list small { color:var(--faint); }
#studio-demo .note-paper { border:0; padding:36px 34px; transform:none; min-height:0; }
#studio-demo .note-paper h4 { font-size:24px; font-weight:600; letter-spacing:-.02em; line-height:1.2; margin:0 0 14px; }
#studio-demo .note-paper .native-note-link { display:table; font-size:10px; line-height:1.4; padding:5px 10px; border-radius:99px; background:var(--neutral); color:var(--muted); }
#studio-demo .native-note-rule { height:1px; background:var(--border); margin:20px 0 23px; }
#studio-demo #note-copy { font:15px/1.5 -apple-system,BlinkMacSystemFont,sans-serif; color:var(--ink); }
#studio-demo .note-paper .native-note-footer { font-size:10px; line-height:1.6; color:var(--faint); margin-top:30px; }
@media (max-width:1000px) and (min-width:761px) {
  #studio-demo .studio-layout { grid-template-columns:185px minmax(0,1fr); }
  #studio-demo .native-split { grid-template-columns:170px minmax(0,1fr); }
  #studio-demo .native-board-columns { grid-template-columns:90px 1fr 1fr; gap:10px; }
  #studio-demo .native-board-grid { grid-template-columns:90px minmax(0,1fr); gap:10px; }
  #studio-demo .native-board-hint { display:none; }
  #studio-demo .wiki-entry, #studio-demo .note-paper { padding:30px 23px; }
  #studio-demo .native-large-avatar { width:35px; height:35px; font-size:14px; }
  #studio-demo .wiki-entry h4 { font-size:23px; }
  #studio-demo .native-formatting>span:last-child { display:none; }
}
@media (max-width:760px) {
  #studio-demo .studio-layout { grid-template-columns:1fr; min-height:0; }
  #studio-demo .studio-sidebar { padding:8px; display:block; border-right:0; border-bottom:1px solid var(--border); }
  #studio-demo .native-book-heading, #studio-demo .native-static, #studio-demo .sidebar-bottom { display:none; }
  #studio-demo .studio-tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
  #studio-demo .studio-tab { padding:8px 3px; justify-content:center; font-size:10px; gap:5px; min-height:34px; }
  #studio-demo .studio-tab svg { display:none; }
  #studio-demo .studio-tab span { display:inline; }
  #studio-demo .studio-tab .native-chapter-long, #studio-demo .native-chapter-tab .native-status { display:none; }
  #studio-demo #tab-write { order:-4; }
  #studio-demo #tab-plot { order:-3; }
  #studio-demo #tab-wiki { order:-2; }
  #studio-demo #tab-notes { order:-1; }
  #studio-demo .studio-panel { min-height:0; }
  #studio-demo .native-toolbar { height:48px; padding:0 16px; font-size:10px; gap:8px; }
  #studio-demo .native-toolbar-detail { display:none; }
  #studio-demo .native-formatting { gap:3px; }
  #studio-demo .native-formatting>span { padding:6px 9px; gap:9px; }
  #studio-demo .native-formatting>span:not(:first-child) { display:none; }
  #studio-demo .editor-tools>div { gap:5px; }
  #studio-demo .editor-tools select { max-width:110px; padding:5px 7px; font-size:9px; }
  #studio-demo .editor-prose { padding:0 25px; margin:25px auto; font-size:18px; }
  #studio-demo .editor-prose h3 { font-size:29px; }
  #studio-demo .panel-foot { padding:4px 25px 25px; }
  #studio-demo.focused .studio-layout { grid-template-columns:1fr; }
  #studio-demo.focused .studio-sidebar { display:none; }
  #studio-demo .native-board { padding:13px 15px 0; }
  #studio-demo .native-board-count { margin-bottom:20px; }
  #studio-demo .native-board-hint { display:none; }
  #studio-demo .native-board-columns { grid-template-columns:64px 1fr 1fr; gap:8px; font-size:7px; }
  #studio-demo .native-board-columns>span:first-child { font-size:7px; }
  #studio-demo .native-board-columns i { width:3px; height:3px; margin-right:3px; }
  #studio-demo .native-board-grid { grid-template-columns:64px minmax(0,1fr); gap:8px; }
  #studio-demo .native-spine { padding-left:10px; font-size:8px; }
  #studio-demo .native-beat small { font-size:7px; }
  #studio-demo .native-beat i, #studio-demo .native-here i { left:-14px; }
  #studio-demo .native-here { font-size:7px; }
  #studio-demo .beat-one { top:25px; }
  #studio-demo .beat-two { top:155px; }
  #studio-demo .beat-three { top:294px; }
  #studio-demo .plot-cards { grid-template-columns:1fr 1fr; gap:12px 8px; }
  #studio-demo .plot-card { grid-column:1 / -1!important; width:88%; padding:12px; min-height:116px; display:block; }
  #studio-demo .plot-card:nth-child(2) { justify-self:end; }
  #studio-demo .plot-card strong { font-size:11px; }
  #studio-demo .plot-card p { font-size:10px; }
  #studio-demo .plot-card small { max-width:none; font-size:8px; }
  #studio-demo .plot-detail { margin:22px 20px 0; padding-bottom:26px; }
  #studio-demo .native-split { display:block; min-height:0; }
  #studio-demo .native-index { border-right:0; border-bottom:1px solid var(--border); }
  #studio-demo .native-kind-bar { margin:0 15px 7px; }
  #studio-demo .wiki-choices { flex-direction:row; gap:4px; padding:0 8px 10px; }
  #studio-demo .wiki-choice { flex:1; min-width:0; padding:9px 6px; gap:5px; align-items:flex-start; }
  #studio-demo .wiki-choice .avatar { width:22px; height:22px; font-size:9px; }
  #studio-demo .wiki-choice strong { font-size:9px; line-height:1.4; }
  #studio-demo .wiki-choice small { display:none; }
  #studio-demo .wiki-entry { padding:28px 24px; }
  #studio-demo .wiki-entry h4 { font-size:26px; }
  #studio-demo .native-large-avatar { width:44px; height:44px; font-size:15px; }
  #studio-demo .native-wiki-notes { font-size:17px; }
  #studio-demo .native-found>p { font-size:11px; }
  #studio-demo .note-list { flex-direction:row; padding:4px 8px 10px; gap:4px; }
  #studio-demo .note-list button { padding:10px 7px; flex:1; min-width:0; }
  #studio-demo .note-list strong { font-size:9px; }
  #studio-demo .note-list span, #studio-demo .note-list small { display:none; }
  #studio-demo .note-paper { padding:30px 25px; min-height:350px; }
  #studio-demo .note-paper h4 { font-size:24px; }
  #studio-demo .note-paper .native-note-link { font-size:9px; }
}
@media (prefers-reduced-motion:reduce) { #studio-demo * { animation:none!important; transition:none!important; } }

#studio-demo .plot-card:nth-child(2) { grid-column:1; grid-row:2; }
#studio-demo .plot-card:nth-child(3) { grid-column:2; grid-row:3; }
#studio-demo .plot-card:nth-child(4) { grid-column:1; grid-row:4; }
#studio-demo .native-board-grid .native-spine { margin-bottom:0; }
#studio-demo .beat-two { top:205px; }
#studio-demo .beat-three { top:390px; }
@media(max-width:760px) {
  #studio-demo .plot-card:nth-child(2) { justify-self:start; }
  #studio-demo .plot-card:nth-child(3) { justify-self:end; }
  #studio-demo .beat-two { top:204px; }
  #studio-demo .beat-three { top:392px; }
}

/* Continuation pages mirror the shipped preset: author/title running heads,
   8.5 pt small caps with .12em tracking, 11/14.52 pt prose and 1.2em indents. */
.vesper-template .vesper-continuation-content {
  position: absolute;
  top: 8.337%;
  left: 15.748%;
  right: 11.453%;
  max-height: 82.4%;
  overflow: hidden;
  padding: 0;
  font-size: 2.7778cqw;
  line-height: 1.32;
}

.vesper-template .vesper-continuation-content p {
  text-indent: 1.2em;
}

.vesper-template .vesper-continuation .running-head {
  position: absolute;
  top: 4.1%;
  left: 15.748%;
  right: 11.453%;
  padding: 0;
  font-size: 2.1465cqw;
  line-height: 1.1;
  font-weight: 400;
  font-style: normal;
  font-variant-caps: all-small-caps;
  letter-spacing: .12em;
  text-align: center;
}

.vesper-template .vesper-continuation .left-page .vesper-continuation-content,
.vesper-template .vesper-continuation .left-page .running-head,
.vesper-template .vesper-continuation .left-page .folio {
  left: 11.453%;
  right: 15.748%;
}

.book-page-navigation {
  display: none;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 19px;
  position: relative;
  z-index: 1;
}

.js .book-page-navigation {
  display: grid;
}

.book-page-navigation button {
  font-size: 11px;
  min-height: 36px;
  padding-block: 7px;
}

.book-page-navigation button:first-child {
  justify-self: start;
}

.book-page-navigation button:last-child {
  justify-self: end;
}

.book-page-navigation button:disabled {
  opacity: .32;
  cursor: default;
}

.book-page-position {
  color: var(--muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

@media (max-width: 760px) {
  .vesper-continuation [data-preview-page] {
    display: none;
  }
  .vesper-continuation[data-current-page="2"] [data-preview-page="2"],
  .vesper-continuation[data-current-page="3"] [data-preview-page="3"] {
    display: block;
  }
  .book-page-navigation {
    gap: 8px;
  }
  .book-page-navigation button {
    font-size: 10px;
  }
  .book-page-position {
    font-size: 9px;
  }
}

/* A single native window toolbar; content surfaces stay quiet and flat. */
#studio-demo { --sidebar-width:224px; --chrome:color-mix(in srgb,var(--neutral) 65%,var(--surface)); border-radius:13px; box-shadow:0 22px 50px -32px #0005; }
#studio-demo .studio-chrome { display:grid; grid-template-columns:var(--sidebar-width) minmax(0,1fr); height:52px; padding:0; gap:0; position:relative; z-index:5; overflow:visible; }
#studio-demo .native-window-controls { display:flex; align-items:center; justify-content:space-between; padding:0 11px 0 18px; height:100%; background:var(--chrome); }
#studio-demo .window-dots { gap:7px; width:auto; }
#studio-demo .window-dots i { width:10px; height:10px; opacity:1; border:1px solid #00000012; }
#studio-demo .window-dots i:nth-child(1) { background:#ff5f57; }
#studio-demo .window-dots i:nth-child(2) { background:#febc2e; }
#studio-demo .window-dots i:nth-child(3) { background:#28c840; }
#studio-demo .native-window-toolbar { display:flex; align-items:center; gap:14px; height:100%; padding:0 11px 0 18px; min-width:0; }
#studio-demo .native-window-title { display:flex; flex-direction:column; justify-content:center; min-width:60px; flex:1; line-height:1.3; }
#studio-demo .native-window-title strong { font-size:12px; font-weight:600; color:var(--ink); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#studio-demo .native-window-title span { font-size:10px; color:var(--muted); margin-top:2px; }
#studio-demo .native-toolbar-actions,#studio-demo .native-write-tools,#studio-demo .native-plot-tools { display:flex; align-items:center; gap:8px; min-width:0; }
#studio-demo .native-glass-group { display:inline-flex; align-items:center; justify-content:center; gap:0; min-height:32px; border:1px solid color-mix(in srgb,var(--ink) 10%,transparent); border-radius:30px; background:linear-gradient(180deg,color-mix(in srgb,var(--card) 90%,transparent),color-mix(in srgb,var(--neutral) 55%,var(--surface))); box-shadow:inset 0 1px 0 color-mix(in srgb,var(--card) 80%,transparent),0 2px 5px #00000003; white-space:nowrap; }
#studio-demo .native-icon-button { display:inline-grid; place-items:center; width:31px; height:31px; padding:6px; background:none; border-radius:50%; color:var(--ink); flex:none; }
#studio-demo .native-icon-button:hover { background:color-mix(in srgb,var(--ink) 7%,transparent); }
#studio-demo .native-icon-button[aria-pressed=true] { background:var(--ink); color:var(--surface); }
#studio-demo .native-icon-button svg,#studio-demo .native-draft-status svg,#studio-demo .native-structure-choice svg,#studio-demo .native-segment svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; }
#studio-demo .native-format-tools { gap:13px; padding:0 11px; font-size:12px; color:var(--muted); }
#studio-demo .native-heading-tools { gap:11px; padding:0 10px; font-size:11px; color:var(--muted); }
#studio-demo .native-toolbar-wordcount { color:var(--muted); font-size:10px; white-space:nowrap; }
#studio-demo .native-draft-status { gap:5px; padding:0 9px; color:var(--muted); font-size:10px; }
#studio-demo .native-draft-status svg { width:10px; }
#studio-demo .native-type-settings { position:relative; }
#studio-demo .native-type-settings summary { display:grid; place-items:center; width:32px; height:31px; list-style:none; cursor:pointer; font-size:13px; color:var(--ink); border-radius:50%; }
#studio-demo .native-type-settings summary::-webkit-details-marker { display:none; }
#studio-demo .native-type-settings summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
#studio-demo .native-type-settings[open] summary { background:color-mix(in srgb,var(--ink) 8%,transparent); }
#studio-demo .native-type-popover { position:absolute; right:0; top:42px; width:215px; padding:17px; white-space:normal; background:var(--card); border:1px solid var(--border); box-shadow:0 8px 25px #0002; border-radius:12px; }
#studio-demo .native-type-popover label { display:block; font-size:11px; color:var(--ink); font-weight:500; margin-bottom:8px; }
#studio-demo .native-type-popover select { width:100%; min-height:30px; font-size:12px; border:1px solid var(--border); border-radius:7px; background:var(--surface); color:var(--ink); padding:4px 7px; }
#studio-demo .native-type-popover p { margin:12px 0 0; font-size:10px; line-height:1.5; color:var(--muted); }
#studio-demo .native-notes-tools { gap:15px; padding:0 14px; color:var(--muted); }
#studio-demo .native-structure-choice { gap:8px; padding:0 12px; font-size:11px; }
#studio-demo .native-preview-caption { font-size:10px; color:var(--faint); padding:0 10px; }
#studio-demo .native-segment { padding:2px; height:32px; }
#studio-demo .native-segment>span,#studio-demo .native-segment>b { display:grid; place-items:center; padding:3px 10px; }
#studio-demo .studio-layout { grid-template-columns:var(--sidebar-width) minmax(0,1fr); min-height:620px; }
#studio-demo .studio-sidebar { background:var(--chrome); }
#studio-demo .native-book-heading { border-bottom:1px solid color-mix(in srgb,var(--border) 65%,transparent); margin:0 -10px; padding:14px 20px 22px; }
#studio-demo .book-name { font-size:20px; font-weight:700; letter-spacing:-.012em; }
#studio-demo .studio-tabs { padding-top:14px; }
#studio-demo .studio-tab,#studio-demo .native-nav-placeholder { gap:10px; font-size:12px; min-height:29px; line-height:1.3; }
#studio-demo .studio-tab svg,#studio-demo .native-nav-placeholder svg { width:16px; height:16px; }
#studio-demo .native-chapter,#studio-demo .native-storyline,#studio-demo .native-chapter-tab { gap:10px; }
#studio-demo .native-chapter { font-size:11px; }
#studio-demo .native-chapter-tab[aria-selected=true] { font-weight:500; }
#studio-demo .native-storyline>i,#studio-demo .native-chapter>i,#studio-demo .native-chapter-tab>.native-status { width:16px; height:16px; position:relative; background:none; border:0; opacity:1; }
#studio-demo .native-chapter-tab[aria-selected=true]>.native-status,#studio-demo .native-chapter>i.planned { width:16px; height:16px; background:transparent; border:0; opacity:1; }
#studio-demo .native-storyline>i::before,#studio-demo .native-chapter>i::before,#studio-demo .native-chapter-tab>.native-status::before { content:''; position:absolute; width:5px; height:5px; left:5px; top:5px; border-radius:50%; background:var(--faint); }
#studio-demo .native-chapter>i.planned::before { background:transparent; border:1px dotted var(--faint); }
#studio-demo .native-chapter-tab[aria-selected=true]>.native-status::before { background:var(--surface); opacity:.65; }
#studio-demo .native-storyline { padding-block:8px; }
#studio-demo .native-chapters-label { padding-top:22px; padding-bottom:14px; }
#studio-demo .native-sidebar-label { letter-spacing:.08em; font-size:9px; }
#studio-demo .studio-panel { min-height:620px; }
#studio-demo .editor-prose { margin:43px auto 45px; font-size:18px; line-height:1.55; }
#studio-demo .editor-prose h3 { letter-spacing:-.012em; margin-bottom:30px; }
#studio-demo .editor-prose .native-scene-label { font-size:10px; letter-spacing:.02em; margin-bottom:14px; }
#studio-demo .native-split { min-height:620px; }
#studio-demo .native-board { padding-top:25px; }
#studio-demo .native-here { bottom:auto; top:calc(50% - 4px); white-space:nowrap; }
#studio-demo .beat-two { top:162px; }
#studio-demo .beat-three { top:365px; }
#studio-demo .native-kind-bar { gap:15px; margin-bottom:12px; padding-top:8px; }
#studio-demo .native-kind-bar button { background:none; padding:12px 0 8px; color:var(--muted); font-size:10px; border-bottom:2px solid transparent; cursor:pointer; }
#studio-demo .native-kind-bar button[aria-pressed=true] { color:var(--ink); border-bottom-color:var(--ink); }
#studio-demo .wiki-choice .avatar { width:36px; height:36px; font-size:13px; }
#studio-demo .wiki-entry { padding:40px 36px; }
#studio-demo .native-wiki-identity { gap:18px; align-items:center; }
#studio-demo .native-large-avatar { width:56px; height:56px; font-size:19px; }
#studio-demo .wiki-entry h4 { font-size:30px; font-weight:700; letter-spacing:-.012em; }
#studio-demo .native-wiki-aliases { display:flex; gap:10px; align-items:center; margin-top:22px; font-size:10px; color:var(--muted); }
#studio-demo #wiki-alias { border:1px solid var(--border); border-radius:20px; padding:3px 9px; background:var(--card); color:var(--ink); }
#studio-demo .native-wiki-section { margin-top:28px; }
#studio-demo .note-list { padding:16px 7px; }
#studio-demo .note-list button { position:relative; padding-right:38px; text-align:left; }
#studio-demo .note-list button small { position:absolute; top:50%; transform:translateY(-50%); right:11px; display:flex; align-items:center; gap:3px; font-size:9px; line-height:1.3; }
#studio-demo .note-list button small svg { width:10px; height:10px; fill:none; stroke:currentColor; stroke-width:1.2; }
#studio-demo .note-list button strong,.note-list button span { display:block; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
#studio-demo .note-paper { padding:40px 40px; background:var(--surface); }
#studio-demo .note-paper h4 { letter-spacing:-.012em; }
#studio-demo .note-paper .native-note-link { border:1px solid var(--border); background:var(--card); }
.simulator-live-dot { display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--accent); margin-right:6px; vertical-align:middle; }
#studio-demo.focused .studio-chrome { grid-template-columns:90px minmax(0,1fr); }
#studio-demo.focused .native-window-controls { background:var(--surface); padding-right:5px; padding-left:12px; }
#studio-demo.focused .window-dots { gap:4px; }
#studio-demo.focused .window-dots i { width:8px; height:8px; }
@media(max-width:1120px) {
  #studio-demo .native-format-tools,#studio-demo .native-heading-tools { display:none; }
  #studio-demo .native-window-toolbar { gap:10px; }
}
@media(max-width:1000px) and (min-width:761px) {
  #studio-demo { --sidebar-width:205px; }
  #studio-demo .native-split { grid-template-columns:180px minmax(0,1fr); }
  #studio-demo .wiki-entry { padding:32px 24px; }
  #studio-demo .native-large-avatar { width:44px; height:44px; font-size:17px; }
  #studio-demo .wiki-entry h4 { font-size:26px; }
  #studio-demo .native-wiki-identity { gap:13px; }
  #studio-demo .note-paper { padding:35px 28px; }
  #studio-demo .native-inspector-tools { display:none; }
}
@media(max-width:760px) {
  #studio-demo .studio-chrome,#studio-demo.focused .studio-chrome { grid-template-columns:48px minmax(0,1fr); height:48px; }
  #studio-demo .native-window-controls,#studio-demo.focused .native-window-controls { padding:0 0 0 12px; background:var(--surface); }
  #studio-demo .window-dots { gap:4px; }
  #studio-demo .window-dots i { width:6px; height:6px; }
  #studio-demo #sidebar-toggle { display:none; }
  #studio-demo .native-window-toolbar { padding:0 8px 0 6px; gap:7px; }
  #studio-demo .native-window-title { min-width:25px; }
  #studio-demo .native-window-title strong { font-size:10px; }
  #studio-demo .native-window-title span { display:none; }
  #studio-demo .native-toolbar-actions,#studio-demo .native-write-tools { gap:4px; }
  #studio-demo .native-icon-button { width:27px; height:29px; padding:6px; }
  #studio-demo .native-glass-group { min-height:29px; }
  #studio-demo .native-type-settings summary { width:27px; height:29px; font-size:11px; }
  #studio-demo .native-type-popover { right:-30px; }
  #studio-demo .native-toolbar-wordcount,#studio-demo .native-draft-status,#studio-demo .native-inspector-tools,#studio-demo .native-preview-caption,#studio-demo .native-structure-choice,#studio-demo .native-notes-tools,#studio-demo #studio-export { display:none; }
  #studio-demo .studio-layout,#studio-demo .native-split,#studio-demo .studio-panel { min-height:0; }
  #studio-demo .studio-layout { grid-template-columns:1fr; }
  #studio-demo .studio-tabs { display:flex; flex-direction:row; padding-top:0; gap:3px; }
  #studio-demo .studio-tab { min-width:0; flex:1; padding:8px 4px; font-size:9px; line-height:1.35; }
  #studio-demo #tab-write { order:-5; }
  #studio-demo #tab-dashboard { order:-4; }
  #studio-demo .studio-tab .native-tab-label { white-space:normal; }
  #studio-demo .native-chapter-tab>.native-status { display:none; }
  #studio-demo .editor-prose { margin:32px auto; padding:0 24px; font-size:18px; }
  #studio-demo .editor-prose h3 { font-size:29px; margin-bottom:27px; }
  #studio-demo .native-kind-bar { padding-top:0; }
  #studio-demo .wiki-choice .avatar { width:32px; height:32px; font-size:12px; }
  #studio-demo .wiki-choice { flex:1; padding:9px 10px; align-items:center; gap:9px; }
  #studio-demo .wiki-choice strong { font-size:12px; }
  #studio-demo .wiki-choice small { display:block; font-size:9px; }
  #studio-demo .wiki-entry { padding:30px 24px; }
  #studio-demo .wiki-entry h4 { font-size:27px; }
  #studio-demo .native-large-avatar { width:44px; height:44px; font-size:16px; }
  #studio-demo .native-wiki-identity { gap:12px; }
  #studio-demo .native-wiki-aliases { flex-wrap:wrap; }
  #studio-demo .note-list { padding:10px 8px; }
  #studio-demo .note-list button { padding:10px 7px; }
  #studio-demo .note-list button span,#studio-demo .note-list button small { display:none; }
  #studio-demo .note-paper { padding:30px 24px; min-height:350px; }
}

/* The app's DashboardView: centered 760pt column, 22pt cards, 12pt gaps. */
#studio-demo #panel-dashboard .native-dashboard { padding:40px 40px 48px; }
#studio-demo #panel-dashboard .native-dashboard-inner { width:100%; max-width:760px; margin:0 auto; }
#studio-demo #panel-dashboard .native-dashboard-welcome { display:flex; align-items:center; gap:32px; margin-bottom:28px; }
#studio-demo #panel-dashboard .native-dashboard-greeting { flex:1; max-width:420px; min-width:0; }
#studio-demo #panel-dashboard .native-dashboard-welcome>img { width:252px; height:180px; flex:none; }
#studio-demo #panel-dashboard .native-dashboard-label { color:var(--muted); font:500 11px/1.4 -apple-system,BlinkMacSystemFont,sans-serif; letter-spacing:.3px; text-transform:uppercase; margin:0 0 14px; }
#studio-demo #panel-dashboard .native-dashboard-greeting>.native-dashboard-label { color:var(--faint); margin-bottom:12px; }
#studio-demo #panel-dashboard h3 { color:var(--ink); font:700 32px/1.18 -apple-system,BlinkMacSystemFont,sans-serif; letter-spacing:-.012em; margin:0 0 10px; }
#studio-demo #panel-dashboard .native-dashboard-message { color:var(--muted); font:400 16px/1.55 -apple-system,BlinkMacSystemFont,sans-serif; margin:0; }
#studio-demo #panel-dashboard .native-dashboard-continue { margin-top:24px; padding:10px 16px; border:1px solid var(--ink); border-radius:8px; background:var(--ink); color:var(--surface); font:500 13px/1.4 -apple-system,BlinkMacSystemFont,sans-serif; cursor:pointer; transition:opacity .15s; }
#studio-demo #panel-dashboard .native-dashboard-continue:hover { opacity:.82; }
#studio-demo #panel-dashboard .native-dashboard-continue:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
#studio-demo #panel-dashboard .native-dashboard-place { display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-size:12px; line-height:1.5; color:var(--faint); margin:12px 0 0; }
#studio-demo #panel-dashboard .native-dashboard-top-cards { display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:12px; }
#studio-demo #panel-dashboard .native-dashboard-card { padding:22px; border:1px solid var(--border); border-radius:12px; background:var(--card); min-width:0; }
#studio-demo #panel-dashboard .native-dashboard-figure { display:flex; align-items:baseline; gap:8px; }
#studio-demo #panel-dashboard .native-dashboard-figure strong { color:var(--ink); font:700 32px/1.2 -apple-system,BlinkMacSystemFont,sans-serif; font-variant-numeric:tabular-nums; letter-spacing:-.012em; }
#studio-demo #panel-dashboard .native-dashboard-figure>span { color:var(--muted); font-size:14px; line-height:1.4; }
#studio-demo #panel-dashboard .native-dashboard-caption { font-size:12px; line-height:1.5; color:var(--faint); margin:10px 0 0; }
#studio-demo #panel-dashboard .native-dashboard-constellation { display:block; width:100%; height:76px; overflow:visible; margin-top:10px; }
#studio-demo #panel-dashboard .native-dashboard-past-stars { color:var(--faint); }
#studio-demo #panel-dashboard .native-dashboard-star-line { fill:none; stroke:var(--accent); stroke-opacity:.55; stroke-width:1; }
#studio-demo #panel-dashboard .native-dashboard-tonight-line { stroke-dasharray:2 3; }
#studio-demo #panel-dashboard .native-dashboard-lit-stars { fill:var(--accent); }
#studio-demo #panel-dashboard .native-dashboard-tonight-star { fill:none; stroke:var(--accent); stroke-width:1; stroke-dasharray:2 2; }
#studio-demo #panel-dashboard .native-dashboard-constellation text { fill:var(--faint); font:11px -apple-system,BlinkMacSystemFont,sans-serif; }
#studio-demo #panel-dashboard .native-dashboard-progress { height:2px; border-radius:2px; background:var(--border); margin:14px 0; overflow:hidden; }
#studio-demo #panel-dashboard .native-dashboard-progress>span { display:block; height:100%; border-radius:inherit; background:var(--accent); }
#studio-demo #panel-dashboard .native-dashboard-whole-book { margin-top:12px; }
#studio-demo #panel-dashboard .native-dashboard-total { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
#studio-demo #panel-dashboard .native-dashboard-percent { color:var(--muted); font-size:20px; font-weight:600; font-variant-numeric:tabular-nums; }
#studio-demo #panel-dashboard .native-dashboard-whole-book .native-dashboard-progress { margin:12px 0; }
#studio-demo #panel-dashboard .native-dashboard-whole-book .native-dashboard-progress>span { background:var(--ink); }
#studio-demo #panel-dashboard .native-dashboard-stage { margin:0; font-size:13px; font-weight:500; color:var(--ink); line-height:1.5; }
#studio-demo #panel-dashboard .native-dashboard-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; border-top:1px solid var(--border); margin-top:18px; padding-top:18px; }
#studio-demo #panel-dashboard .native-dashboard-facts .native-dashboard-label { margin-bottom:6px; color:var(--faint); }
#studio-demo #panel-dashboard .native-dashboard-facts .native-dashboard-figure strong { font-size:20px; font-weight:600; letter-spacing:-.006em; }
#studio-demo #panel-dashboard .native-dashboard-facts .native-dashboard-figure>span { font-size:13px; }
#studio-demo #panel-dashboard .native-dashboard-chapters { margin-top:12px; }
#studio-demo #panel-dashboard .native-dashboard-status-track { display:grid; grid-template-columns:1fr 1fr; gap:6px; height:8px; }
#studio-demo #panel-dashboard .native-dashboard-draft { background:var(--faint); border-radius:3px; }
#studio-demo #panel-dashboard .native-dashboard-planned { border:1px dashed var(--faint); border-radius:3px; }
#studio-demo #panel-dashboard .native-dashboard-status-legend { display:flex; gap:16px; color:var(--faint); margin-top:8px; font-size:11px; }
#studio-demo #panel-dashboard .native-dashboard-status-legend>span { display:inline-flex; align-items:center; gap:6px; }
#studio-demo #panel-dashboard .native-dashboard-status-legend i { display:inline-block; width:10px; height:10px; border-radius:2px; }
@media(max-width:1100px) and (min-width:761px) {
  #studio-demo #panel-dashboard .native-dashboard { padding:32px 26px 36px; }
  #studio-demo #panel-dashboard .native-dashboard-welcome { gap:20px; }
  #studio-demo #panel-dashboard .native-dashboard-welcome>img { width:180px; height:auto; }
  #studio-demo #panel-dashboard .native-dashboard-top-cards { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); }
  #studio-demo #panel-dashboard .native-dashboard-card { padding:18px; }
  #studio-demo #panel-dashboard .native-dashboard-figure strong { font-size:28px; }
  #studio-demo #panel-dashboard .native-dashboard-figure>span { font-size:12px; }
}
@media(max-width:760px) {
  #studio-demo #panel-dashboard .native-dashboard { padding:24px 18px 28px; }
  #studio-demo #panel-dashboard .native-dashboard-welcome { display:block; position:relative; margin-bottom:24px; }
  #studio-demo #panel-dashboard .native-dashboard-greeting { max-width:none; position:relative; z-index:1; }
  #studio-demo #panel-dashboard .native-dashboard-welcome>img { display:none; }
  #studio-demo #panel-dashboard h3 { font-size:28px; }
  #studio-demo #panel-dashboard .native-dashboard-message { font-size:14px; }
  #studio-demo #panel-dashboard .native-dashboard-place { font-size:10px; }
  #studio-demo #panel-dashboard .native-dashboard-top-cards { grid-template-columns:minmax(0,1fr); }
  #studio-demo #panel-dashboard .native-dashboard-card { padding:18px; }
  #studio-demo #panel-dashboard .native-dashboard-figure strong { font-size:28px; }
  #studio-demo #panel-dashboard .native-dashboard-figure>span { font-size:12px; }
  #studio-demo #panel-dashboard .native-dashboard-facts { gap:8px; }
  #studio-demo #panel-dashboard .native-dashboard-facts .native-dashboard-label { font-size:9px; }
  #studio-demo #panel-dashboard .native-dashboard-facts .native-dashboard-figure { gap:4px; flex-wrap:wrap; }
  #studio-demo #panel-dashboard .native-dashboard-facts .native-dashboard-figure>span { font-size:10px; }
  #studio-demo #panel-dashboard .native-dashboard-percent { font-size:16px; }
  #studio-demo #panel-dashboard .native-dashboard-total .native-dashboard-figure { flex-wrap:wrap; gap:4px 8px; }
}

/* Illustration polish follows Illustration.swift: exact pastel/tone pairs,
   paper-filled 2.4 pt outlines, double-curve smiles and restrained ultramarine. */
.share-journey {
  --journey-apricot: #F6C49A;
  --journey-apricot-line: #EFAA72;
  --journey-mint: #BDE3D3;
  --journey-mint-line: #8FCBB2;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .share-journey {
    --journey-apricot: #543B2A;
    --journey-apricot-line: #B88560;
    --journey-mint: #2E4840;
    --journey-mint-line: #6FA48E;
  }
}
html[data-theme="dark"] .share-journey {
  --journey-apricot: #543B2A;
  --journey-apricot-line: #B88560;
  --journey-mint: #2E4840;
  --journey-mint-line: #6FA48E;
}
.journey-steps > li > svg { stroke-width: 2.4; }
.journey-warm { fill: var(--journey-apricot); }
.journey-green { fill: var(--journey-mint); }
.journey-doodle { stroke-width: 2.4; }
.journey-author .journey-doodle { stroke: var(--journey-apricot-line); }
.journey-reader .journey-doodle { stroke: var(--journey-mint-line); }
.journey-arm-outline { stroke-width: 13.4; }
.journey-leg-outline { stroke-width: 15.4; }
.journey-mark { stroke-width: 1.8; }
.journey-face { stroke-width: 2; }
.journey-thread { stroke-dasharray: 1 7; opacity: .38; }
.journey-share-button { border-radius: 15px; }
.journey-reader-spark { opacity: .55; }
.share-journey[data-state="read"] .journey-reader-spark { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .journey-warm, .journey-green {
    transform-box: fill-box;
    transform-origin: center;
    animation: journey-breathe 9s ease-in-out infinite;
  }
  .journey-green { animation-delay: -4.5s; }
  @keyframes journey-breathe { 50% { transform: scale(1.025); } }
}

#studio-demo #panel-dashboard .native-dashboard-continue { border-radius:999px; }
@media(min-width:761px) {
  #studio-demo .studio-content { height:660px; }
  #studio-demo .studio-panel { height:660px; min-height:660px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
  #studio-demo .native-split { min-height:660px; }
}