.example-body{height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.example-shell{flex:1;min-height:0;display:flex;flex-direction:column;padding-bottom:var(--space-4)}
.example-intro{padding-block:var(--space-4);flex:none}
.example-intro h1{font:var(--display-weight) var(--text-h3)/var(--leading-heading) var(--font-display);margin:0}
.example-intro p{margin:var(--space-2) 0 0;color:var(--ink-muted)}
.example-layout{flex:1;min-height:0;display:grid;grid-template-columns:var(--example-sidebar-width) minmax(0,1fr);gap:var(--space-8)}
.chapter-nav{min-height:0;overflow:auto;display:flex;flex-direction:column;gap:var(--space-1);font-size:var(--text-small)}
.chapter-nav>a{display:flex;align-items:center;min-height:var(--touch-min);padding:var(--space-2);color:var(--ink-muted);border-bottom:var(--border-card) solid var(--line)}
.chapter-nav>a[aria-current]{color:var(--accent-ink);background:var(--accent-soft)}
.example-reader{min-width:0;min-height:0;display:flex;flex-direction:column;gap:var(--space-3);max-width:var(--example-reader-width)}
.example-stage{flex:1;min-height:0;min-width:0;display:grid;place-items:center;overflow:hidden;contain:size}
.example-page{flex:none;box-sizing:border-box;background:var(--pdf-paper);box-shadow:var(--shadow-book);overflow:hidden}
.example-page svg{display:block;width:100%;height:100%}
.example-page svg text{font-weight:var(--display-weight);font-style:normal;font-synthesis:none;stroke:none;letter-spacing:normal}
#example-enlarge{align-self:center;flex:none}
.example-reading-dialog{width:min(var(--container),calc(100% - var(--space-8)));height:calc(100dvh - var(--space-8));max-height:none;padding:var(--space-6);border:var(--border-card) solid var(--line);border-radius:var(--radius-card);background:var(--surface-raised);color:var(--ink)}
.example-reading-dialog[open]{display:flex;flex-direction:column;gap:var(--space-4)}
.example-reading-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex:none}
.example-reading-header h2{font-size:var(--text-h3);letter-spacing:var(--display-tracking)}
.example-large-text{min-height:0;flex:1;overflow:auto;font:var(--text-lead)/var(--leading-body) var(--font-body);max-width:var(--measure);width:100%;margin-inline:auto}
.example-large-text h3{font:var(--display-weight) var(--text-h3)/var(--leading-heading) var(--font-display);margin-bottom:var(--space-4);color:var(--accent-ink)}
.example-large-text p{margin-bottom:var(--space-4)}
.example-large-text figure{margin:0 0 var(--space-4)}
.example-large-text img{display:block;max-width:100%;height:var(--example-large-photo-height);object-fit:contain;margin-inline:auto}
.example-large-text figcaption{font-size:var(--text-small);color:var(--ink-muted)}
.example-controls{flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--space-3)}
.example-controls button:first-child{justify-self:start}.example-controls button:last-child{justify-self:end}
.example-controls p{font-size:var(--text-small);text-align:center;margin:0}
.example-controls{grid-template-columns:auto minmax(0,1fr) auto}
.example-reader .jp-btn:hover{transform:none}
.example-controls p{font-variant-numeric:tabular-nums}
.example-body{height:auto;min-height:100dvh;overflow:visible}
.example-shell{display:block;min-width:0;max-width:100%;padding-bottom:var(--space-8)}
.example-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6);margin-block:var(--space-4)}
.example-choices .jp-input{width:100%;min-width:0}
#example-style-description{margin-bottom:var(--space-4);font-size:var(--text-body)}
#example-book{margin-block:var(--space-6)}
.example-fixed-spread{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-1);width:100%;max-width:var(--example-fixed-spread-width);margin-inline:auto}
.example-fixed-spread[data-single=true]{grid-template-columns:minmax(0,1fr);max-width:var(--example-fixed-page-width)}
@media(min-width:761px){.example-fixed-spread[data-single=true]{grid-template-columns:repeat(2,minmax(0,1fr));max-width:var(--example-fixed-spread-width)}.example-fixed-spread[data-single=true]>.example-fixed-leaf{grid-column:2}.example-fixed-spread[data-single=true][data-back=true]>.example-fixed-leaf{grid-column:1}}
.example-fixed-leaf{min-width:0;box-shadow:var(--shadow-book);background:var(--surface-raised)}
.example-fixed-leaf img{display:block;width:100%;height:auto;aspect-ratio:148/210}
.example-fixed-controls{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--space-3);align-items:center;margin-block:var(--space-4)}
.example-fixed-controls p{margin:0;text-align:center;font-variant-numeric:tabular-nums}
.example-fixed-reader>button{display:block;margin-inline:auto}
.example-fixed-viewport{width:100%;min-width:0;max-width:100%;overflow:auto;padding:var(--space-2);box-sizing:border-box}
.example-fixed-reader--enlarged .example-fixed-spread[data-single=true]{display:block;width:var(--example-zoom-width);max-width:none;margin-inline:auto}
.example-fixed-reader--enlarged .example-fixed-leaf{width:100%}
.example-fixed-reader--enlarged .example-fixed-controls{position:sticky;bottom:0;background:var(--surface);padding-block:var(--space-2);z-index:var(--layer-book-controls)}
.example-reading-dialog img{display:block;width:100%;max-width:var(--example-fixed-page-width);height:auto;margin-inline:auto}
.example-reading-dialog .example-large-text{flex:none;overflow:visible;white-space:pre-line}
.example-reading-dialog[open]{display:block;overflow:auto}
.example-reading-dialog>button{position:sticky;top:0;margin-bottom:var(--space-4)}
@media(max-width:760px){.example-choices{grid-template-columns:minmax(0,1fr);gap:var(--space-3)}.example-fixed-controls{gap:var(--space-2)}.example-fixed-controls .jp-btn{padding-inline:var(--space-2)}.example-fixed-controls p{font-size:var(--text-small)}}
.example-credits{font-size:var(--text-small);padding:var(--space-2);overflow-wrap:anywhere}
.example-credits summary{min-height:var(--touch-min);cursor:pointer}
.example-credits ul{padding-left:var(--space-4)}.example-credits li{margin-block:var(--space-3)}
@media(max-width:760px){.example-layout{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:var(--space-3)}.chapter-nav{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;max-height:var(--example-mobile-nav-height);align-items:center}.chapter-nav>span,.chapter-nav details,.chapter-nav>a:last-child{display:none}.chapter-nav>a{flex:none;white-space:nowrap}.example-controls .jp-btn{font-size:var(--text-small);padding-inline:var(--space-3)}}