.demo-toolbar{height:44px;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:4px 10px;background:var(--reader-surface);border-bottom:1px solid var(--reader-line);color:var(--reader-ink)}.demo-toolbar button{font:inherit;font-size:12px;min-height:34px;border:1px solid var(--reader-line);border-radius:9px;padding:5px 9px;background:var(--reader-surface-soft);color:var(--reader-ink);cursor:pointer}.demo-toolbar span{font-size:11px;color:var(--reader-muted);white-space:nowrap}.reader-demo .reader-app{height:calc(100dvh - 44px)}.demo-badge{display:inline-block;font-size:10px;line-height:1.3;padding:3px 5px;border-radius:5px;background:#e5c98b;color:#3e3015;margin-left:5px;white-space:normal}.demo-dialog{max-width:min(360px,calc(100vw - 24px));border:1px solid var(--reader-line);border-radius:18px;padding:22px;color:var(--reader-ink);background:var(--reader-surface);box-shadow:0 18px 60px #0004}.demo-dialog::backdrop{background:#08191299}.demo-dialog h2{font-size:21px;margin:0 0 12px}.demo-dialog p{font-size:14px;line-height:1.6}.demo-dialog button,.demo-dialog a{display:block;width:100%;text-align:center;padding:12px;margin-top:10px;border:0;border-radius:10px;font:inherit;cursor:pointer;background:#173f3a;color:#fff;text-decoration:none}.demo-dialog button{background:var(--reader-surface-soft);color:var(--reader-ink)}#demo-notice{position:fixed;bottom:10px;left:10px;right:10px;z-index:10000;background:#173f3a;color:white;border-radius:10px;padding:12px;font-size:13px;pointer-events:none}.reader-demo .reader-library-limit{font-size:12px}
.reader-demo body{height:100dvh;display:grid;grid-template-rows:44px minmax(0,1fr);overflow:hidden}.reader-demo .reader-app{height:100%!important;min-height:0!important;grid-row:2}.demo-toolbar{grid-row:1;position:relative;z-index:200}.reader-demo .skip-link{position:fixed}
.reader-demo body{grid-template-columns:minmax(0,1fr)}.reader-demo .reader-app,.demo-toolbar{min-width:0;max-width:100%}@media(max-width:360px){.demo-toolbar>span{display:none}.demo-toolbar>button{flex:1}.reader-demo #reader-diagram-launch{font-size:0;width:38px;min-width:38px;padding:0}.reader-demo #reader-diagram-launch i{font-size:14px}}
.reader-demo,.reader-demo body{min-width:0}
.reader-demo .demo-example{margin-top:8px;width:auto;max-width:100%;white-space:normal;min-height:42px}

/* Keep the demo navigation usable by touch and keyboard. */
.reader-demo body{grid-template-rows:52px minmax(0,1fr)}
.demo-toolbar{height:52px}.demo-toolbar button{min-height:44px}
.demo-toolbar button:focus-visible,.demo-dialog :is(button,a):focus-visible{outline:3px solid #218978;outline-offset:2px}
.demo-loading{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:24px;background:#f3f8f6;color:#173f3a;font:16px/1.5 system-ui,sans-serif}
.demo-loading[hidden]{display:none}.demo-loading>div{max-width:400px}.demo-loading strong{font-size:21px}.demo-loading a{display:inline-flex;align-items:center;min-height:44px;background:#173f3a;color:white;padding:10px 18px;border-radius:10px;text-decoration:none}
.demo-loading a:focus-visible{outline:3px solid #218978;outline-offset:4px}
.reader-demo .silicio-board-native__board:focus-visible{outline:3px solid #157b69;outline-offset:3px}
.reader-demo .silicio-board-native__board square.keyboard-focus{pointer-events:none;background:transparent;box-shadow:inset 0 0 0 3px white,inset 0 0 0 5px #173f3a;z-index:30}
/* A short desktop window must leave room for the actual PDF and board. */
@media (min-width:641px) and (max-height:600px) and (pointer:fine) {
  .reader-demo .reader-app { --reader-footer-height:0px; }
  .reader-demo .app-footer,.reader-demo .panel-heading,.reader-demo .panel-status,.reader-demo .panel-footnote { display:none; }
  .reader-demo .study-workspace { padding:4px; }
  .reader-demo .study-panel { grid-template-rows:48px minmax(0,1fr); }
  .reader-demo .panel-toolbar { grid-row:1; min-height:48px; padding:2px 4px; }
  .reader-demo .panel-toolbar :is(.icon-button,.text-button,.compact-menu>summary) { min-height:44px; }
  .reader-demo .pdf-reader-body,.reader-demo .chess-workspace { grid-row:2; }
  .reader-demo .chess-workspace { padding:4px; }
  .reader-demo .board-shell { padding:2px; }
  .reader-demo .study-notes { margin-top:8px; }
}
@media (min-width:641px) and (pointer:fine) {
  .reader-demo.is-fullscreen .reader-app .mobile-panel-tabs { display:none; }
  .reader-demo.is-fullscreen .reader-app[data-mobile-layout] { grid-template-rows:0 0 minmax(0,1fr) 0; }
}
@media (max-height:600px) and (pointer:coarse) and (orientation:landscape) {
  .reader-demo.android-reader:not(.reader-tablet) .reader-app[data-mobile-layout] .chess-panel { height:100%; }
  .reader-demo { --demo-fullscreen-tabs:0px; }
  .reader-demo.is-fullscreen { --demo-fullscreen-tabs:46px; }
  .reader-demo.android-reader:not(.reader-tablet) .reader-app[data-mobile-layout=chess] .board-column { width:min(100%,calc(100dvh - 60px - var(--demo-fullscreen-tabs))); }
}
/* Fit the desktop/tablet board to its own panel, even in a vertical split. */
@media (min-width:641px) and (pointer:fine) {
  .reader-demo .chess-workspace { container-type:size; }
  .reader-demo .board-column { width:min(100%,680px,max(100px,calc(100cqh - 78px))); }
}
@media (min-width:641px) and (max-height:800px) and (pointer:fine) {
  .reader-demo .board-column { width:min(100%,680px,max(100px,calc(100cqh - 32px))); }
}
@media (min-width:641px) and (max-width:1024px) and (orientation:portrait) and (pointer:fine) {
  .reader-demo .chess-panel { grid-template-rows:44px 48px minmax(0,1fr) 0; }
  .reader-demo .chess-panel .panel-heading { min-height:44px; padding:0 8px; }
  .reader-demo .chess-panel .panel-kicker,.reader-demo .chess-panel .panel-footnote,.reader-demo .chess-panel .player-label { display:none; }
  .reader-demo .chess-panel .panel-toolbar { min-height:48px; padding-block:2px; }
  .reader-demo .board-column { width:min(100%,680px,max(100px,calc(100cqh - 32px))); }
}