/* The guide uses Palace's glass surfaces around isolated, native-looking UI. */
@font-face {font-family:PalaceKufam;src:url('../fonts/palace-kufam-black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
.guidebook {
  --g-ink:#173548;--g-muted:#35566a;--g-accent:#0b5b87;--g-line:rgba(37,85,111,.2);
  --g-glass:rgba(234,245,250,.9);--g-card:rgba(240,249,253,.72);--g-nav:rgba(236,246,250,.96);
  --story-ink:var(--g-ink);--story-muted:var(--g-muted);--story-accent:var(--g-accent);
  color:var(--g-ink);
}
[data-theme="dark"] .guidebook {
  --g-ink:#edf6fc;--g-muted:#bdcfdd;--g-accent:#a3e5f2;--g-line:rgba(175,216,239,.2);
  --g-glass:rgba(7,23,37,.9);--g-card:rgba(13,35,52,.74);--g-nav:rgba(9,23,36,.96);
}
.guidebook #stage {--stage-top:var(--header-height);--stage-inline:100vw;--stage-fit-width:min(var(--stage-inline),calc((100dvh - var(--stage-top)) * 1.3333333333));top:var(--stage-top);background:linear-gradient(180deg,#344e60,#53788c 45%,#315e76 65%,#16394e);contain:paint}
.guidebook #stage-wallpaper {position:absolute;inset:-32px;background:url('../images/bg/arcade-1280.webp') center/var(--stage-fit-width) auto repeat-x;filter:blur(18px)}
@media(min-width:1400px){.guidebook #stage-wallpaper{background-image:url('../images/bg/arcade-1920.webp')}}
@media(min-width:2200px){.guidebook #stage-wallpaper{background-image:url('../images/bg/arcade-2560.webp')}}
@media(max-width:700px){.guidebook #stage-wallpaper{background-image:url('../images/bg/arcade-768.webp')}}
.guidebook .header,.guidebook .header.is-scrolled,.guidebook .mobile-nav,.guidebook .site-footer {background:var(--g-nav);border-color:var(--g-line);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)}
.guidebook .header .logo,.guidebook .header .nav-link,.guidebook .header .theme-toggle {color:var(--g-ink)}
.guidebook .header .logo > span {font-family:PalaceKufam,'Inter',sans-serif;letter-spacing:-.04em}
.guidebook .header .nav-link.active {color:var(--g-accent)}
.guidebook .guide-wrapper {padding-top:calc(var(--header-height) + 30px)}
.guidebook .guide-layout {max-width:1680px;grid-template-columns:230px minmax(0,1fr);gap:30px;padding-inline:24px}
.guidebook .guide-section {margin-bottom:34px;scroll-margin-top:calc(var(--header-height) + 28px);border:1px solid var(--g-line);background:var(--g-glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.guidebook .guide-container {padding:clamp(24px,3vw,50px);max-width:none}
.guidebook .guide-container > h1,.guidebook .guide-container > h2 {display:block;font:900 clamp(2rem,3.8vw,3.9rem)/1.12 PalaceKufam,'Inter',sans-serif;letter-spacing:-.04em;color:var(--g-ink);margin:0 0 24px;overflow-wrap:break-word}
.guidebook #welcome h1 {font-size:clamp(2.5rem,4.6vw,4.8rem)}
.guidebook #welcome h1 em {font-style:normal;color:var(--g-accent)}
.guidebook .guide-container > h3 {font:700 clamp(1.3rem,2vw,1.75rem)/1.3 var(--font-display);margin:38px 0 16px;color:var(--g-ink)}
.guidebook .guide-container p,.guidebook .guide-container li {color:var(--g-muted);line-height:1.8}
.guidebook .guide-container > p {max-width:82ch}
.guidebook .guide-container strong {color:var(--g-ink)}
.guidebook .guide-container a:not(.btn):not(.guide-route a):not(.h2-anchor) {color:var(--g-accent)}
.guidebook .guide-container > .guide-lead {font-size:clamp(16px,1.4vw,19px);line-height:1.75;margin:0 0 28px;max-width:70ch}
.guidebook .guide-container .guide-eyebrow {font:700 10px/1.5 var(--font-display);letter-spacing:.18em;color:var(--g-accent);margin:0 0 20px}
.guidebook .guide-hero-actions {display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:26px}
.guidebook #story-motion {display:block;font-size:12px;font-weight:600;color:var(--g-muted);border:1px solid var(--g-line);background:transparent;padding:12px 16px;cursor:pointer}
.guide-route {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:38px}
.guide-route a {display:grid;gap:10px;background:var(--g-card);padding:20px 14px;clip-path:var(--clip-bvl-md);text-decoration:none;color:var(--g-accent);transition:transform .2s}
.guide-route a:hover {transform:translateY(-4px)}
.guide-route a > .material-icon {font-size:26px!important}
.guide-route strong {font-size:14px}
.guide-route a > span:not(.material-icon) {font-size:11px;color:var(--g-muted)}
.guidebook #guide-toc {background:var(--g-glass);border-color:var(--g-line);padding:18px 14px;top:calc(var(--header-height) + 22px);max-height:calc(100dvh - var(--header-height) - 44px);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.guidebook #guide-toc h2,.guidebook #guide-toc a {color:var(--g-muted)}
.guidebook #guide-toc a {font-size:12px;line-height:1.5;padding:9px 10px}
.guidebook #guide-toc a.active {color:var(--g-accent);background:var(--g-card);border-left-color:var(--g-accent)}
.guidebook #guide-search,.guidebook #guide-mobile-search,.guidebook .guide-section-select {width:100%;min-width:0;color:var(--g-ink);background:var(--g-card);border:1px solid var(--g-line);border-radius:0;font:13px/1.5 var(--font-display);padding:11px}
.guidebook #guide-search::placeholder,.guidebook #guide-mobile-search::placeholder {color:var(--g-muted)}
.guidebook #guide-search-status,.guidebook #guide-mobile-search-status {color:var(--g-muted);font-size:11px}
.guidebook #guide-select-host {background:var(--g-nav);border-color:var(--g-line);z-index:45}
.guide-mobile-search {margin-top:8px}
.guide-skip {position:fixed;z-index:10000;top:8px;left:12px;transform:translateY(-150%);background:var(--g-nav);color:var(--g-ink);padding:12px 18px}
.guide-skip:focus {transform:none}
.guidebook :is(button,a,input,select,summary,[tabindex="0"]):focus-visible {outline:2px solid var(--g-accent);outline-offset:4px}
.guidebook [hidden] {display:none!important}
.guidebook .story-figure {margin:28px 0;min-width:0}
.guidebook .story-figure figcaption {font:12px/1.7 var(--font-display);color:var(--g-muted);border-left:2px solid var(--g-accent);padding:12px 16px;margin-top:18px;background:var(--g-card);max-width:none}
.guide-platform-tabs {display:flex;gap:8px;overflow-x:auto;padding:5px 3px 14px;margin-bottom:20px;scrollbar-width:thin;scrollbar-color:var(--g-accent) transparent}
.guide-platform-tabs button {display:flex;gap:9px;align-items:center;justify-content:center;flex:1 0 auto;border:1px solid var(--g-line);background:transparent;color:var(--g-muted);font:600 12px/1.4 var(--font-display);padding:13px 14px;cursor:pointer}
.guide-platform-tabs button[aria-selected="true"] {background:var(--g-accent);color:var(--g-glass);border-color:var(--g-accent)}
.guide-platform-tabs button[aria-selected="true"] {color:#fff;background:#12648e}
[data-theme="dark"] .guide-platform-tabs button[aria-selected="true"] {background:#a3e5f2;color:#0b2b3d}
[data-theme="dark"] .guide-platform-tabs img:is([src$="apple.svg"],[src$="linux.svg"]) {filter:brightness(0) invert(1)}
[data-theme="dark"] .guide-platform-tabs [aria-selected="true"] img:is([src$="apple.svg"],[src$="linux.svg"]) {filter:brightness(0)}
.guide-version-strip {display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:20px;font-size:12px;color:var(--g-accent)}
.guide-version-strip > span,.guide-badge {display:inline-block;background:var(--g-card);border:1px solid var(--g-line);padding:7px 12px;font-size:11px;color:var(--g-accent)}
.guidebook .guide-install-steps {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:0;margin:24px 0;gap:12px;list-style:none}
.guide-install-steps li {min-width:0;padding:24px 18px;background:var(--g-card);border-top:1px solid var(--g-line)}
.guide-step-index {display:block;font-size:11px;letter-spacing:.1em;color:var(--g-accent);margin-bottom:20px}
.guide-install-steps .material-icon {color:var(--g-accent);font-size:27px!important}
.guide-install-steps h3 {font:700 15px/1.5 var(--font-display);color:var(--g-ink);margin:15px 0 10px}
.guide-install-steps p {font-size:13px;margin:0;line-height:1.75}
.guide-callout {padding:22px 24px;margin:24px 0;background:var(--g-card);border-left:2px solid var(--g-accent)}
.guide-callout > strong {font-size:14px}
.guide-callout p {font-size:13px;margin:8px 0 0;line-height:1.8}
.guide-deep {margin:18px 0;border-block:1px solid var(--g-line)}
.guide-deep > summary {padding:18px 4px;cursor:pointer;font:600 14px/1.6 var(--font-display);color:var(--g-ink)}
.guide-deep > div {padding:0 4px 20px;font-size:14px;line-height:1.8;color:var(--g-muted)}
.guide-deep p {margin:0 0 12px}
.guide-explain-pair,.guide-component-pair {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;align-items:center;min-width:0}
.guide-explain-pair > *,.guide-component-pair > * {min-width:0}
.guide-component-pair {align-items:start;margin:28px 0}
.guide-component-pair .story-figure {margin:0}
.guide-explain-pair h3 {font:700 clamp(1.35rem,2.3vw,2rem)/1.3 var(--font-display);color:var(--g-ink);margin:16px 0}
.guide-explain-pair p {font-size:14px;line-height:1.85}
.guidebook .guide-app-panel {--pc-cut:18px}
.guide-app-panel .pc-header {padding:16px 18px;min-height:58px}
.guide-app-panel .pc-header > strong {font-size:17px}
.guide-app-panel .pc-header > .material-icon {font-size:22px!important}
.guide-app-body {padding:16px 18px 20px}
.guide-app-row {display:flex;align-items:center;gap:12px;min-height:65px;padding:12px 0;border-bottom:1px solid #ffffff13;color:#e7eff5}
.guide-app-row > .material-icon {font-size:22px!important;color:#73bbed}
.guide-app-row > div {flex:1;min-width:0}
.guide-app-row strong {display:block;font:500 14px/1.4 PalaceRoboto,sans-serif}
.guide-app-row small {display:block;color:#b0b0b0;font:11px/1.65 PalaceRoboto,sans-serif;margin-top:5px;overflow-wrap:anywhere}
.guide-app-body .guide-app-label {font:11px/1.5 PalaceRoboto,sans-serif;color:#b0b0b0;letter-spacing:.02em;margin:12px 0}
.guide-permission-state {flex-shrink:0;max-width:80px;text-align:right;font-size:10px;line-height:1.5;color:#73bbed}
.guide-dialog-actions {display:flex;align-items:center;justify-content:space-between;gap:15px;padding-top:20px;font-size:11px;color:#b0b0b0}
.guide-dialog-actions > .material-icon {color:#73bbed}
.guide-app-action {background:#0e6ba8;color:#fff;padding:9px 13px;clip-path:var(--clip-bvl-sm)}
.guide-app-switch {display:block;flex-shrink:0;width:36px;height:22px;padding:3px;background:#454545;border:1px solid #757575;border-radius:20px}
.guide-app-switch i {display:block;height:14px;width:14px;background:#aaa;border-radius:50%}
.guide-app-switch.is-on {background:#0e6ba8;border-color:#0e6ba8}
.guide-app-switch.is-on i {background:white;transform:translateX(13px)}
.guide-choice-row,.guide-slot-chips {display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 20px}
.guide-choice-row > span,.guide-slot-chips > span {padding:8px 12px;font-size:12px;color:#b0b0b0;background:#ffffff08;border:1px solid #444;clip-path:var(--clip-bvl-sm)}
.guide-choice-row .is-selected,.guide-slot-chips .is-selected {color:#73bbed;background:#0e6ba833;border-color:#0e6ba8}
.guide-input-label {font-size:11px;color:#b0b0b0;margin-bottom:7px}
.guide-faux-input {padding:14px 12px;border:1px solid #555;font-size:12px;color:#ddd;overflow-wrap:anywhere}
.guide-size-fields {display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
.guide-size-fields > span {display:grid;gap:8px;font-size:11px;color:#b0b0b0}
.guide-size-fields b {font-size:14px;font-weight:400;color:#eee;border:1px solid #555;padding:12px}
.guide-install-path,.guide-job-parts {display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center;font-size:11px;color:#73bbed;margin-top:20px}
.guide-install-path > span,.guide-job-parts > span {padding:8px 10px;border:1px solid #444;background:#ffffff06}
.guide-data-flow {display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:10px;align-items:center;margin:28px 0}
.guide-data-flow > div {min-width:0;display:grid;gap:10px;background:var(--g-card);padding:20px 16px;border-top:1px solid var(--g-line)}
.guide-data-flow strong {font-size:13px;overflow-wrap:anywhere}
.guide-data-flow span {font-size:11px;line-height:1.7;color:var(--g-muted)}
.guide-data-flow > b {color:var(--g-accent)}
.guide-matrix-wrap {overflow:auto;max-width:100%;scrollbar-width:thin;scrollbar-color:var(--g-accent) transparent;border:1px solid var(--g-line);margin:30px 0 36px}
.guide-matrix {width:100%;min-width:960px;border-collapse:collapse;font-size:12px;line-height:1.7}
.guide-matrix caption {text-align:left;color:var(--g-muted);padding:16px;font-size:11px;caption-side:bottom}
.guide-matrix th,.guide-matrix td {padding:18px 16px;border-bottom:1px solid var(--g-line);text-align:left;vertical-align:top}
.guide-matrix th {color:var(--g-ink);background:var(--g-card);font-weight:700}
.guide-matrix td {color:var(--g-muted)}
.guide-matrix tr > :first-child {position:sticky;left:0;background:var(--g-nav);z-index:1;min-width:130px;box-shadow:5px 0 10px #00000010}
.guide-output-screen {position:relative;background:#0a1c29;aspect-ratio:16/10;overflow:hidden;clip-path:var(--clip-bvl-md)}
.guide-output-screen img {width:100%;height:100%;object-fit:cover}
.guide-output-screen > span {position:absolute;bottom:14px;left:14px;right:14px;padding:10px 12px;background:#061624db;font:11px/1.5 PalaceRoboto,sans-serif;color:#edf6fc}
.guide-layer-catalog {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:28px 0}
.guide-layer-catalog > div {display:grid;grid-template-columns:28px 1fr;align-items:start;gap:10px;padding:20px 18px;background:var(--g-card);border-top:1px solid var(--g-line);min-width:0}
.guide-layer-catalog .material-icon {color:var(--g-accent);font-size:24px!important}
.guide-layer-catalog strong {font-size:13px}
.guide-layer-catalog > div > span:not(.material-icon) {grid-column:2;font-size:9px;letter-spacing:.06em;color:var(--g-accent)}
.guide-layer-catalog p {grid-column:1/-1;font-size:12px;margin:0;line-height:1.75}
.guide-engine-tabs {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:28px 0}
.guide-engine-tabs button {padding:16px 10px;color:var(--g-muted);background:var(--g-card);border:1px solid var(--g-line);text-align:left;font:600 12px/1.4 var(--font-display);cursor:pointer;min-width:0}
.guide-engine-tabs button > span {display:block;font-size:10px;margin-bottom:12px;color:var(--g-accent)}
.guide-engine-tabs button[aria-selected="true"] {color:var(--g-ink);border-color:var(--g-accent);box-shadow:inset 0 -3px var(--g-accent)}
.guide-engine-media img {width:100%;aspect-ratio:16/10;object-fit:cover}
.guide-code-label {padding:18px 0;font:11px/1.7 PalaceRoboto,sans-serif;color:#b0b0b0;text-align:center}
.guide-engine-panel .guide-output-screen {margin-top:12px}
.guidebook .pc-editor-cinema {margin:28px 0}
.guidebook .pc-cinema-footer {color:var(--g-ink)}
.guidebook .pc-cinema-counter {color:var(--g-muted)}
.guidebook .pc-cinema-picks button[aria-pressed="true"] {border-color:var(--g-accent)}
.guidebook .pc-location-demo .pc-location-hint {color:#b0b0b0}
.guidebook #sources .pc-selector-compact {display:flex;align-items:flex-start;flex-wrap:wrap;gap:14px;margin:0 0 22px;overflow:visible;padding:0}
.guidebook #sources .pc-selector-search-icon,.guidebook #sources .pc-selector-shuffle {width:40px;height:40px;display:grid;place-items:center;flex-shrink:0}
.guidebook #sources .pc-selector-search-icon {color:#b8cbd8}
.guidebook #sources .pc-selector-shortcuts {margin-left:auto}
.guidebook #sources .pc-collection-chip {color:var(--collection-accent,#b8cbd8);background:color-mix(in srgb,var(--collection-accent,#fff) 8%,transparent);border-color:var(--collection-accent,#555)}
.guidebook #sources .pc-collection-chip.selected {background:color-mix(in srgb,var(--collection-accent,#73bbed) 18%,transparent);color:var(--collection-accent,#73bbed)}
.guidebook #sources .pc-source-branch {flex-basis:100%}
.guidebook #sources .pc-category-parent {width:max-content;max-width:100%}
.guidebook #sources .pc-source-children {display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 0 15px;padding:3px 0 5px 14px;border-left:1px solid #80cbc459}
.guidebook #timers .pc-timer-progress i {width:100%;transform-origin:left;transform:scaleX(var(--timer-progress,0));transition:transform 1s linear}
.guidebook .footer-logo span {background:none;color:var(--g-ink);-webkit-text-fill-color:var(--g-ink)}
.guidebook .footer-col h5,.guidebook .footer-col ul li a,.guidebook .footer-brand-col p,.guidebook .footer-bottom-bar .copy,.guidebook .footer-badge {color:var(--g-muted)}
@media(max-width:1200px) {
 .guidebook .guide-layout {grid-template-columns:210px minmax(0,1fr);gap:22px;padding-inline:18px}
 .guide-explain-pair,.guide-component-pair {grid-template-columns:minmax(0,1fr);gap:24px}
 .guide-component-pair > .story-figure {max-width:none}
 .guide-layer-catalog {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1023px) {
 .guidebook .guide-layout {grid-template-columns:minmax(0,1fr);padding-inline:20px}
 .guidebook .guide-section {scroll-margin-top:calc(var(--header-height) + 154px)}
 .guidebook .guide-wrapper {padding-top:26px}
 .guidebook #guide-select-host {top:var(--header-height);margin-top:var(--header-height)}
}
@media(max-width:600px) {
 .guidebook .guide-layout {padding-inline:12px}
 .guidebook .guide-container {padding:28px 18px}
 .guidebook .guide-container > h2 {font-size:clamp(1.85rem,7.8vw,2.7rem)}
 .guidebook #welcome h1 {font-size:clamp(2rem,9vw,3rem)}
 .guide-route {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .guide-route a:last-child {grid-column:1/-1}
 .guide-route a {padding:18px}
 .guidebook .guide-install-steps {grid-template-columns:minmax(0,1fr)}
 .guide-install-steps li {padding:20px}
 .guide-step-index {display:inline-block;margin:0 16px 0 0}
 .guide-data-flow {grid-template-columns:minmax(0,1fr)}
 .guide-data-flow > b {text-align:center;transform:rotate(90deg)}
 .guide-layer-catalog {grid-template-columns:minmax(0,1fr)}
 .guide-engine-tabs {display:flex;overflow:auto;padding:4px 2px 10px;scrollbar-width:thin}
 .guide-engine-tabs button {flex:1 0 95px}
 .guide-app-body {padding:14px}
 .guide-app-panel .pc-header {padding:14px}
 .guide-permission-state {max-width:62px;font-size:9px}
 .guidebook #sources .pc-selector-compact {gap:8px}
 .guidebook #sources .pc-selector-search-icon,.guidebook #sources .pc-selector-shuffle {width:30px;height:37px}
 .guidebook #sources .pc-selector-shortcuts {gap:6px}
 .guidebook #sources .pc-selector-shortcuts > span > .material-icon {width:30px;height:37px}
 .guidebook #sources .pc-source-children {margin-left:8px;padding-left:8px;gap:8px}
 .guide-callout {padding:18px}
 .guidebook .guide-container pre {max-width:100%;font-size:11px;overflow:auto;white-space:pre}
}
@media(prefers-reduced-motion:reduce) {.guidebook .guide-route a {transition:none}.guidebook #timers .pc-timer-progress i {transition:none}}
/* PermissionOptionTile uses rounded, outlined rows inside the beveled dialog. */
.guide-platform-panel[id^="permissions-panel-"] .guide-app-row {padding:12px;border:1px solid #ffffff28;border-radius:8px;margin-bottom:8px}
.guide-platform-panel[id^="permissions-panel-"] .guide-app-row > .material-icon {color:#b0b0b0}
.guidebook .palace-component p {color:#b0b0b0}
.guidebook .guide-library {background:#1a1a1a;clip-path:var(--clip-bvl-md);overflow:hidden}
.guidebook .guide-library .pc-media-grid {padding:6px;background:#141414;grid-auto-rows:78px;max-height:365px}
.guidebook .guide-category-library {margin-top:24px;padding-bottom:12px}
.guidebook .guide-category-library .pc-category-grid {margin:12px 12px 0}
.guidebook .guide-category-library .pc-category-grid > div {aspect-ratio:16/10}
.guidebook .guide-category-library .pc-category-grid strong {font:900 clamp(15px,2vw,28px)/1.2 PalaceKufam,sans-serif;color:#fff!important}
@media(max-width:600px) {
 .guidebook .guide-library .pc-media-grid {grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:62px;max-height:330px}
 .guidebook .guide-category-library .pc-category-grid {grid-template-columns:minmax(0,1fr)}
 .guidebook .guide-category-library .pc-category-grid > div {aspect-ratio:16/7}
}

/* Fill narrow and portrait screens; fit and repeat only on wide screens. */
@media(max-width:900px), (max-aspect-ratio:1/1) {
 .guidebook #stage-wallpaper {background-size:cover;background-repeat:no-repeat}
}