/* PowerPoint Editor: title bar, ribbon, canvas with selection handles, slides pane, notes, task panes, backstage,
   start screen, slide show, printing. Colours follow the site's light/dark theme; slides are always shown as they are. */

:root { --pe-accent: #b7472a; --pe-accent-soft: color-mix(in srgb, #b7472a 14%, var(--surface)); --pe-canvas: #e8e8e8; --pe-sel: #4f6bd1; --pe-ruler-bg: #f4f4f5; --pe-ruler-fg: #6b7280; }
html[data-theme="dark"] { --pe-accent: #f0896b; --pe-accent-soft: color-mix(in srgb, #f0896b 18%, var(--surface)); --pe-canvas: #15171c; --pe-sel: #8ea2ff; --pe-ruler-bg: #1b1e25; --pe-ruler-fg: #9aa3b2; }

.layout-app [data-app-page="powerpoint-editor"] .app-work { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.pe-host { flex: 1; min-height: 0; position: relative; }

/* ---------------------------------------------------------------- title bar (same as the other editors) */
.xr-title { display: flex; align-items: center; gap: .4rem; min-height: 44px; padding: .3rem .75rem; background: var(--surface); border-bottom: 1px solid var(--border); font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif; font-size: 13px; }
.xr-logo { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; background: #b7472a; color: #fff; }
.xr-logo .icon { width: 17px; height: 17px; }
.xr-file { height: 30px; padding: 0 .7rem; border: 0; border-radius: 6px; background: none; color: var(--pe-accent); font: inherit; font-weight: 600; cursor: pointer; }
.xr-file:hover, .xr-btn:hover, .xr-eden:hover { background: var(--surface-2); }
.xr-name { min-width: 6ch; max-width: 40ch; field-sizing: content; padding: .25rem .45rem; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--text); font: inherit; font-size: 14px; font-weight: 600; }
.xr-name:hover { border-color: var(--border); }
.xr-name:focus { outline: none; border-color: var(--pe-accent); }
.xr-saved { color: var(--text-soft); font-size: 12px; white-space: nowrap; }
.xr-grow { flex: 1; }
.xr-btn { display: inline-flex; align-items: center; gap: .35rem; height: 32px; padding: 0 .6rem; border: 0; border-radius: 6px; background: none; color: var(--text); font: inherit; cursor: pointer; }
.xr-btn .icon, .xr-download .icon { width: 17px; height: 17px; }
.xr-download { display: inline-flex; align-items: center; gap: .4rem; height: 32px; padding: 0 .9rem; border: 0; border-radius: 6px; background: #b7472a; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.xr-download:hover { filter: brightness(1.1); }
.xr-eden { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; animation: xr-eden-in .28s ease; }
.xr-eden[hidden] { display: none; }
.xr-eden svg { width: 28px; height: 28px; }
@keyframes xr-eden-in { from { opacity: 0; transform: translateX(-8px); } }
@media (max-width: 1180px) { .pe-col .pe-b-sm .pe-b-label { display: none; } .pe-col .pe-b-sm { min-width: 28px; } }
@media (max-width: 760px) { .xr-btn span, .xr-download span, .xr-saved { display: none; } }

/* focus mode: the site header slides away */
.site-header { transition: margin-top .28s ease, opacity .22s ease; }
.app-frame { transition: height .28s ease, min-height .28s ease; }
html.we-focus .site-header { margin-top: calc(-1 * var(--we-hh, 64px)); opacity: 0; pointer-events: none; }
html.we-focus .app-frame { height: 100dvh !important; min-height: 100dvh !important; }
.site-header .brand:has(+ .we-focus-btn) { margin-right: 0; }
.we-focus-btn { display: inline-grid; flex: none; place-items: center; width: 34px; height: 34px; margin-left: .5rem; margin-right: auto; padding: 7px; border: 0; border-radius: 8px; background: none; color: var(--text-soft); cursor: pointer; }
.we-focus-btn[hidden] { display: none; }
.we-focus-btn:hover { background: var(--surface-2); color: var(--text); }
.we-focus-btn .icon { width: 100%; height: 100%; }

/* ---------------------------------------------------------------- app frame */
.pe-app { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif; font-size: 12px; color: var(--text); background: var(--surface); }
.pe-app .icon { width: 16px; height: 16px; flex: none; }

/* ---------------------------------------------------------------- ribbon */
.pe-ribbon { background: var(--surface); border-bottom: 1px solid var(--border); min-width: 0; }
.pe-tabs { display: flex; align-items: flex-end; gap: 2px; padding: 0 8px; height: 32px; overflow-x: auto; scrollbar-width: none; }
.pe-tabs::-webkit-scrollbar { display: none; }
.pe-tab { position: relative; flex: none; height: 30px; padding: 0 10px; border: 0; background: none; color: var(--text); font: inherit; font-size: 13px; cursor: pointer; border-radius: 4px 4px 0 0; white-space: nowrap; }
.pe-tab:hover { background: var(--surface-2); }
.pe-tab.is-on { color: var(--pe-accent); font-weight: 600; }
.pe-tab.is-on::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 3px; border-radius: 2px; background: var(--pe-accent); }
.pe-tab.is-file { color: var(--pe-accent); font-weight: 600; }
.pe-tab.is-ctx { color: #8a4bb5; }
html[data-theme="dark"] .pe-tab.is-ctx { color: #c79bf0; }
.pe-tabs-grow { flex: 1; }
.pe-panel { height: 98px; overflow: hidden; border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.pe-tab-body { display: flex; align-items: stretch; height: 100%; overflow-x: auto; overflow-y: hidden; padding: 3px 4px 0; scrollbar-width: thin; }
.pe-group { flex: none; display: flex; flex-direction: column; padding: 0 6px; border-right: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.pe-group-body { flex: 1; display: flex; align-items: center; gap: 2px; min-height: 0; }
.pe-group-label { flex: none; height: 17px; color: var(--text-soft); font-size: 11px; text-align: center; white-space: nowrap; }
.pe-col { display: flex; flex-direction: column; justify-content: center; gap: 1px; }
.pe-row { display: flex; align-items: center; gap: 1px; }
.pe-mini-head { color: var(--text-soft); font-size: 11px; padding: 0 4px; }
.pe-mini-l { padding: 0 4px 0 2px; }

.pe-b { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 26px; min-width: 26px; padding: 0 5px; border: 1px solid transparent; border-radius: 4px; background: none; color: var(--text); font: inherit; cursor: pointer; white-space: nowrap; }
.pe-b:hover:not(:disabled) { background: var(--surface-2); }
.pe-b.is-on, .pe-b.is-open { background: var(--pe-accent-soft); border-color: color-mix(in srgb, var(--pe-accent) 35%, transparent); }
.pe-b:disabled { opacity: .42; cursor: default; }
.pe-b-big { flex-direction: column; justify-content: flex-start; gap: 2px; height: 74px; min-width: 46px; max-width: 78px; padding: 5px 4px 2px; }
.pe-b-big .icon { width: 26px; height: 26px; margin-bottom: 2px; }
.pe-b-big .pe-b-label { white-space: normal; text-align: center; line-height: 1.12; font-size: 11.5px; }
.pe-b-big .pe-caret { margin-top: -2px; }
.pe-caret .icon { width: 10px; height: 10px; }
.pe-b-glyph { font: 600 14px/1 Georgia, serif; }
.pe-split { display: inline-flex; align-items: stretch; border-radius: 4px; }
.pe-split > .pe-b-main { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.pe-split > .pe-b-caret { min-width: 14px; width: 14px; padding: 0; justify-content: center; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.pe-split > .pe-b-caret .icon { width: 10px; height: 10px; }
.pe-split.is-big { flex-direction: column; }
.pe-split.is-big > .pe-b-main { height: 52px; border-radius: 4px 4px 0 0; }
.pe-split.is-big > .pe-b-main .pe-b-label { display: none; }
.pe-split.is-big > .pe-b-caret { width: auto; height: 22px; border-radius: 0 0 4px 4px; font-size: 11.5px; }
.pe-split.is-big > .pe-b-caret::before { content: attr(aria-label); content: none; }
.pe-split:hover > .pe-b { border-color: color-mix(in srgb, var(--border) 90%, transparent); }
.pe-swatch { position: absolute; left: 5px; bottom: 2px; width: 16px; height: 4px; border-radius: 1px; }
.pe-split.is-big .pe-b-main::after { content: attr(aria-label); font-size: 11.5px; }

.pe-combo { display: inline-flex; align-items: stretch; height: 24px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); }
.pe-combo:focus-within { border-color: var(--pe-accent); }
.pe-combo input { width: 118px; min-width: 0; padding: 0 5px; border: 0; background: none; color: var(--text); font: inherit; outline: none; }
.pe-combo-size input { width: 36px; }
.pe-combo-b { width: 16px; padding: 0; border: 0; border-left: 1px solid var(--border); background: none; color: var(--text-soft); cursor: pointer; display: grid; place-items: center; }
.pe-combo-b .icon { width: 10px; height: 10px; }
.pe-select { height: 24px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--text); font: inherit; padding: 0 4px; }
.pe-spin { display: inline-flex; align-items: center; gap: 4px; height: 26px; }
.pe-spin-l { color: var(--text); min-width: 0; }
.pe-spin-in { height: 22px; padding: 0 4px; border: 1px solid var(--border); border-radius: 4px 0 0 4px; background: var(--surface); color: var(--text); font: inherit; }
.pe-spin-in:focus { outline: none; border-color: var(--pe-accent); }
.pe-spin-arrows { display: inline-flex; flex-direction: column; margin-left: -4px; }
.pe-spin-b { width: 14px; height: 11px; padding: 0; border: 1px solid var(--border); border-left: 0; background: var(--surface); color: var(--text-soft); display: grid; place-items: center; cursor: pointer; }
.pe-spin-b:first-child { border-radius: 0 4px 0 0; }
.pe-spin-b:last-child { border-top: 0; border-radius: 0 0 4px 0; }
.pe-spin-b .icon { width: 9px; height: 9px; }
.pe-check { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 4px; cursor: pointer; white-space: nowrap; }

/* galleries in the ribbon */
.pe-gallery { display: flex; align-items: stretch; gap: 2px; max-width: min(560px, 46vw); overflow-x: auto; scrollbar-width: thin; padding: 2px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); }
.pe-gal-item { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 62px; height: 62px; padding: 3px; border: 1px solid transparent; border-radius: 4px; background: none; color: var(--text); font: inherit; font-size: 11px; cursor: pointer; line-height: 1.1; text-align: center; }
.pe-gal-item .icon { width: 22px; height: 22px; }
.pe-gal-item:hover { background: var(--surface-2); }
.pe-gal-item.is-on { border-color: var(--pe-accent); background: var(--pe-accent-soft); }
.pe-gallery.is-disabled { opacity: .5; pointer-events: none; }
.pe-anims.is-menu { flex-wrap: wrap; max-width: 470px; max-height: 60vh; overflow: auto; border: 0; }
.pe-anims.is-menu .pe-menu-head { width: 100%; }
.pe-designs { gap: 6px; }
.pe-design { position: relative; flex: none; width: 104px; height: 60px; padding: 0; border: 1px solid var(--border); border-radius: 3px; cursor: pointer; overflow: hidden; }
.pe-design:hover { outline: 2px solid var(--pe-accent); }
.pe-design-aa { position: absolute; left: 10px; top: 8px; font-size: 20px; }
.pe-design-bar { position: absolute; left: 10px; bottom: 8px; display: flex; gap: 2px; }
.pe-design-bar i { width: 12px; height: 6px; }
.pe-design-decor { position: absolute; }
.pe-design-decor.is-edge, .pe-design-decor.is-sunrise { left: 0; top: 0; bottom: 0; width: 3px; }
.pe-design-decor.is-banded, .pe-design-decor.is-ocean { left: 0; right: 0; bottom: 0; height: 4px; }
.pe-design-decor.is-forest { left: 0; right: 0; top: 0; height: 3px; }
.pe-design-decor.is-nightfall { right: 0; top: 0; bottom: 0; width: 2px; }
.pe-design-decor.is-mono { left: 0; top: 0; width: 7px; height: 7px; background: #000 !important; }
.pe-design-decor.is-berry { right: 0; top: 0; width: 30px; height: 2px; }

/* ---------------------------------------------------------------- popups */
.pe-pop { position: fixed; z-index: 1200; min-width: 160px; overflow: auto; padding: 4px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); box-shadow: 0 10px 30px rgb(0 0 0 / .18); font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif; font-size: 12.5px; }
.pe-menu { display: flex; flex-direction: column; min-width: 180px; }
.pe-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 28px; padding: 3px 10px 3px 6px; border: 0; border-radius: 4px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; white-space: nowrap; }
.pe-menu-item:hover, .pe-menu-item:focus-visible { background: var(--surface-2); outline: none; }
.pe-menu-item:disabled { opacity: .45; cursor: default; }
.pe-menu-ic { display: grid; place-items: center; width: 18px; flex: none; }
.pe-menu-tx { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.pe-menu-hint { color: var(--text-soft); font-size: 11px; margin-left: 12px; }
.pe-menu-head { padding: 6px 8px 3px; color: var(--text-soft); font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.pe-menu-sep { height: 1px; margin: 4px 2px; background: var(--border); }
.pe-font-menu { max-height: 60vh; overflow-y: auto; min-width: 220px; }
.pe-font-menu .pe-menu-tx { font-size: 14px; }
.pe-colors { width: 236px; }
.pe-colors-head { padding: 6px 4px 3px; color: var(--text-soft); font-size: 11px; font-weight: 600; }
.pe-colors-grid { display: grid; grid-template-columns: repeat(10, 18px); gap: 0 4px; padding: 0 4px; }
.pe-colors-grid .pe-sw:nth-child(-n + 10) { margin-bottom: 5px; }
.pe-colors-row { display: grid; grid-template-columns: repeat(10, 18px); gap: 4px; padding: 0 4px; }
.pe-sw { width: 18px; height: 18px; padding: 0; border: 1px solid rgb(0 0 0 / .14); cursor: pointer; }
.pe-sw:hover { outline: 2px solid var(--pe-accent); outline-offset: 0; z-index: 1; }
.pe-sw-none { display: inline-block; width: 14px; height: 14px; border: 1px solid var(--border); background: linear-gradient(135deg, transparent 45%, #d33 45%, #d33 55%, transparent 55%); }
.pe-sw-mini { display: inline-block; width: 12px; height: 12px; }
.pe-more { position: relative; }
.pe-color-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pe-shapes { width: 340px; max-height: 66vh; overflow-y: auto; }
.pe-shape-grid { display: grid; grid-template-columns: repeat(12, 26px); gap: 1px; padding: 0 4px 4px; }
.pe-shape { width: 26px; height: 26px; padding: 2px; border: 1px solid transparent; border-radius: 3px; background: none; color: var(--text); cursor: pointer; }
.pe-shape:hover { border-color: var(--pe-accent); background: var(--pe-accent-soft); }
.pe-shape svg { width: 100%; height: 100%; }
.pe-layouts { display: grid; grid-template-columns: repeat(3, 128px); gap: 8px; padding: 6px; max-height: 70vh; overflow: auto; }
.pe-layout { display: flex; flex-direction: column; gap: 4px; padding: 4px; border: 1px solid transparent; border-radius: 4px; background: none; color: var(--text); font: inherit; font-size: 11px; cursor: pointer; text-align: center; }
.pe-layout:hover, .pe-layout.is-on { border-color: var(--pe-accent); background: var(--pe-accent-soft); }
.pe-lp { position: relative; display: block; width: 100%; background: #fff; border: 1px solid #c8c8c8; }
.pe-lp i { position: absolute; border: 1px dashed #9a9a9a; }
.pe-lp-title { background: repeating-linear-gradient(transparent 0 40%, #bdbdbd 40% 60%, transparent 60%) center / 60% 100% no-repeat; }
.pe-lp-body { background: repeating-linear-gradient(#c9c9c9 0 2px, transparent 2px 7px) 12% 12% / 70% 70% no-repeat; }
.pe-lp-pic { background: #eee; }
.pe-tgrid-cells { display: grid; grid-template-columns: repeat(10, 18px); gap: 2px; padding: 4px; }
.pe-tgrid-cells span { width: 18px; height: 18px; border: 1px solid #b9b9b9; background: var(--surface); }
.pe-tgrid-cells span.is-on { border-color: var(--pe-accent); background: var(--pe-accent-soft); }
.pe-line-opts { display: flex; flex-direction: column; padding: 0 2px 4px; }
.pe-line-opt { display: flex; align-items: center; gap: 10px; height: 24px; padding: 0 8px; border: 0; border-radius: 4px; background: none; color: var(--text); font: inherit; cursor: pointer; }
.pe-line-opt:hover { background: var(--surface-2); }
.pe-lw { display: inline-block; width: 60px; border-top: 1px solid currentColor; }
.pe-fx { width: 300px; max-height: 70vh; overflow-y: auto; }
.pe-fx-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; padding: 2px 6px 6px; }
.pe-fx-tile { display: grid; place-items: center; height: 40px; padding: 0; border: 1px solid transparent; border-radius: 4px; background: none; cursor: pointer; color: var(--text-soft); font: inherit; font-size: 10px; }
.pe-fx-tile:hover { border-color: var(--pe-accent); background: var(--pe-accent-soft); }
.pe-fx-sq { display: block; width: 22px; height: 22px; background: #4472c4; }
.pe-fx-refl { -webkit-box-reflect: below 1px linear-gradient(transparent calc(100% - var(--end)), rgb(255 255 255 / .5)); width: 18px; height: 14px; margin-top: -10px; }
.pe-fx-bevel { background: radial-gradient(circle at 35% 30%, #8fb0ff, #3159b8); }
.pe-quick { padding: 4px; }
.pe-quick-grid { display: grid; grid-template-columns: repeat(7, 46px); gap: 6px; padding: 4px; }
.pe-quick-b { height: 32px; border: 2px solid transparent; border-radius: 3px; font: 600 12px var(--font-sans); cursor: pointer; }
.pe-quick-b:hover { outline: 2px solid var(--pe-accent); }
.pe-wordart { display: grid; grid-template-columns: repeat(5, 48px); gap: 6px; padding: 6px; }
.pe-wa { height: 48px; border: 1px solid transparent; border-radius: 4px; background: #fff; font: 700 32px/1 Arial, sans-serif; cursor: pointer; }
.pe-wa:hover { border-color: var(--pe-accent); }
.pe-bullets { display: grid; grid-template-columns: repeat(3, 70px); gap: 6px; padding: 6px; }
.pe-bullet { display: grid; grid-template-columns: 14px 1fr; align-items: center; gap: 3px 5px; height: 60px; padding: 6px; border: 1px solid var(--border); border-radius: 4px; background: #fff; color: #222; cursor: pointer; font-size: 12px; }
.pe-bullet:hover { border-color: var(--pe-accent); }
.pe-bullet i { display: block; height: 2px; background: #9a9a9a; }
.pe-bullet .pe-none { grid-column: 1 / -1; text-align: center; color: #666; }
.pe-num { grid-template-columns: 26px 1fr; font-size: 11px; }
.pe-grads { width: 240px; }
.pe-grad-row { display: flex; gap: 6px; padding: 2px 6px 6px; }
.pe-grad { width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 3px; cursor: pointer; }
.pe-grad:hover { outline: 2px solid var(--pe-accent); }
.pe-tstyles { display: grid; grid-template-columns: repeat(7, 54px); gap: 6px; padding: 6px; max-height: 66vh; overflow: auto; width: 440px; }
.pe-tstyles-head { grid-column: 1 / -1; }
.pe-tstyle { display: grid; grid-template-rows: repeat(4, 1fr); gap: 1px; height: 40px; padding: 2px; border: 1px solid var(--border); border-radius: 3px; background: #fff; cursor: pointer; }
.pe-tstyle:hover, .pe-tstyle.is-on { outline: 2px solid var(--pe-accent); }
.pe-tstyle i { display: block; border-bottom: 1px solid var(--l); }
.pe-tstyle.is-medium i:first-child, .pe-tstyle.is-themed i:first-child { background: var(--c); }
.pe-tstyle.is-medium i:nth-child(even) { background: var(--l); }
.pe-tstyle.is-medium i:nth-child(3) { background: var(--t); }
.pe-tstyle.is-light i:first-child { border-bottom: 2px solid var(--c); }
.pe-tstyle.is-light i:nth-child(even) { background: var(--l); }
.pe-tstyle.is-dark i { background: color-mix(in srgb, var(--c) 70%, #000); }
.pe-tstyle.is-dark i:first-child { background: #111; }
.pe-tstyle.is-themed i { border-bottom-color: var(--c); }
.pe-tstyle.is-plain i { border: 1px solid #555; }
.pe-pal { gap: 10px; }
.pe-pal-sw { display: inline-flex; }
.pe-pal-sw i { width: 12px; height: 16px; }
.pe-fontpair { align-items: center; gap: 10px; height: 46px; }
.pe-fp-aa { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--border); font-size: 16px; }
.pe-fontpair b { display: block; font-weight: 400; font-size: 15px; }
.pe-fontpair small { display: block; color: var(--text-soft); font-size: 12px; }
.pe-bgstyles { display: grid; grid-template-columns: repeat(4, 48px); gap: 6px; padding: 6px; }
.pe-bgstyles .pe-menu { grid-column: 1 / -1; }
.pe-bgstyle { height: 30px; border: 1px solid var(--border); border-radius: 3px; cursor: pointer; }
.pe-bgstyle:hover { outline: 2px solid var(--pe-accent); }
.pe-corr-grid { display: grid; grid-template-columns: repeat(5, 40px); gap: 4px; padding: 4px 6px 6px; }
.pe-corr-b { height: 30px; border: 1px solid var(--border); border-radius: 3px; cursor: pointer; background: linear-gradient(135deg, #6b8fd6, #e9b25b 60%, #4a7b3a); }
.pe-corr-b:hover { outline: 2px solid var(--pe-accent); }

/* dialogs used by the editor */
.pe-chart-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.pe-chart-type { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.pe-chart-type .icon { width: 30px; height: 30px; color: var(--pe-accent); }
.pe-chart-type.is-on { border-color: var(--pe-accent); background: var(--pe-accent-soft); }
.pe-data-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.pe-data-wrap { max-height: 50vh; overflow: auto; border: 1px solid var(--border); border-radius: 6px; }
.pe-data-grid { border-collapse: collapse; }
.pe-data-grid th, .pe-data-grid td { padding: 0; border: 1px solid var(--border); }
.pe-data-grid input { width: 104px; height: 30px; border: 0; border-radius: 0; padding: 0 6px; }
.pe-data-grid thead input { font-weight: 600; }
.pe-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; max-height: 50vh; overflow-y: auto; padding: 2px; }
.pe-icon { height: 44px; padding: 8px; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--text); cursor: pointer; }
.pe-icon:hover { background: var(--surface-2); }
.pe-icon.is-on { border-color: var(--pe-accent); background: var(--pe-accent-soft); }
.pe-icon svg { width: 100%; height: 100%; }
.pe-note { margin: 0; color: var(--text-soft); font-size: .8rem; }
.pe-symbols { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 3px; max-height: 40vh; overflow-y: auto; }
.pe-symbols button { height: 34px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--text); font-size: 17px; cursor: pointer; }
.pe-symbols button.is-on { border-color: var(--pe-accent); background: var(--pe-accent-soft); }
.pe-symbol-preview { min-height: 1.4em; color: var(--text-soft); }
.pe-hf-sub { display: grid; gap: 6px; padding-left: 1.6rem; }
.pe-stats { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.2rem; margin: 0; }
.pe-stats dd { margin: 0; font-weight: 600; }
.pe-find { position: absolute; right: 18px; top: 140px; z-index: 60; display: grid; gap: 8px; width: 290px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: 0 12px 34px rgb(0 0 0 / .2); }
.pe-find-head { display: flex; align-items: center; justify-content: space-between; }
.pe-find-x { width: 28px; height: 28px; border: 0; border-radius: 6px; background: none; color: var(--text); cursor: pointer; display: grid; place-items: center; }
.pe-find-x:hover { background: var(--surface-2); }
.pe-find-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.pe-find-msg { margin: 0; min-height: 1em; color: var(--text-soft); }

/* ---------------------------------------------------------------- body: slides pane | canvas + notes | task pane */
.pe-body { display: grid; grid-template-columns: var(--pe-thumbs, 196px) 5px minmax(0, 1fr) auto; min-height: 0; background: var(--pe-canvas); }
.pe-thumbs { min-height: 0; overflow-y: auto; padding: 8px 6px 24px 0; background: var(--surface-2); outline: none; scrollbar-width: thin; }
.pe-thumb { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: start; padding: 5px 6px 5px 0; cursor: pointer; user-select: none; }
.pe-thumb-num { padding-top: 2px; color: var(--text-soft); font-size: 12px; text-align: right; padding-right: 6px; }
.pe-thumb-box { position: relative; display: block; overflow: hidden; background: #fff; border: 1px solid color-mix(in srgb, var(--border) 80%, #888); border-radius: 2px; }
.pe-thumb-box > .pe-slide, .pe-sorter .pe-thumb-box > .pe-slide { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; }
.pe-thumb:hover .pe-thumb-box { border-color: color-mix(in srgb, var(--pe-accent) 50%, var(--border)); }
.pe-thumb.is-current .pe-thumb-box { outline: 2px solid var(--pe-accent); outline-offset: 1px; }
.pe-thumb.is-current .pe-thumb-num { color: var(--pe-accent); font-weight: 600; }
.pe-thumb.is-picked .pe-thumb-box { outline: 2px solid color-mix(in srgb, var(--pe-accent) 55%, transparent); outline-offset: 1px; }
.pe-thumb.is-hidden .pe-thumb-box { opacity: .45; }
.pe-thumb.is-hidden .pe-thumb-num { text-decoration: line-through; }
.pe-thumb-star { position: absolute; left: 8px; top: 24px; color: var(--text-soft); font-size: 10px; }
.pe-section { padding: 8px 8px 2px 10px; color: var(--text); font-size: 12px; font-weight: 600; }
.pe-drop { height: 2px; margin: 0 6px 0 30px; background: var(--pe-accent); }
.pe-sorter .pe-drop { width: 3px; height: auto; margin: 0; }
.is-dragging { cursor: grabbing; }
.pe-splitter { cursor: col-resize; background: transparent; }
.pe-splitter:hover { background: color-mix(in srgb, var(--pe-accent) 30%, transparent); }
.pe-center { display: grid; grid-template-rows: minmax(0, 1fr) 6px var(--pe-notes, 92px); min-width: 0; min-height: 0; }
.pe-app.no-notes .pe-center { grid-template-rows: minmax(0, 1fr) 0 0; }
.pe-app.no-notes .pe-notes, .pe-app.no-notes .pe-notes-bar { display: none; }
.pe-canvas { position: relative; min-height: 0; overflow: hidden; }
.pe-scroll { position: absolute; inset: 0; overflow: auto; scrollbar-width: thin; }
.pe-has-ruler .pe-scroll { left: 18px; top: 18px; }
.pe-ruler { position: absolute; z-index: 3; }
.pe-ruler-h { left: 18px; top: 0; height: 18px; }
.pe-ruler-v { left: 18px; top: 18px; height: 18px; transform-origin: 0 0; transform: rotate(90deg) scaleY(-1); }
.pe-paper { position: relative; flex: none; touch-action: pinch-zoom; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .25), 0 0 0 1px rgb(0 0 0 / .06); }
.pe-slidebox { position: absolute; inset: 0; overflow: hidden; }
.pe-slidebox > .pe-slide { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.pe-slide [data-bullet] { user-select: none; -webkit-user-select: none; }
.pe-slide .pe-editing { caret-color: auto; cursor: text; }
.pe-slide .pe-editing ::selection { background: rgb(0 120 215 / .35); }
.pe-paper.is-drawing { cursor: crosshair; }
.pe-paper.is-painting { cursor: copy; }
.pe-paper.is-moving { cursor: move; }
.pe-paper.is-copying { cursor: copy; }
.pe-notes-bar { cursor: row-resize; background: var(--surface-2); border-top: 1px solid var(--border); }
.pe-notes { min-height: 0; overflow-y: auto; padding: 8px 14px; background: var(--surface); color: var(--text); font: 14px/1.45 "Segoe UI", system-ui, -apple-system, Arial, sans-serif; outline: none; }
.pe-notes:empty::before { content: attr(data-placeholder); color: var(--text-faint); }
.pe-pane { width: 300px; min-height: 0; overflow: hidden; display: flex; flex-direction: column; border-left: 1px solid var(--border); background: var(--surface); }
.pe-pane[hidden] { display: none; }
.pe-sorter[hidden] { display: none; }
.pe-sorter { grid-column: 1 / -1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); align-content: start; gap: 22px 18px; padding: 22px; outline: none; }
.pe-sorter .pe-thumb { grid-template-columns: 1fr; padding: 0; }
.pe-sorter .pe-thumb-num { order: 2; text-align: center; padding: 4px 0 0; }
.pe-sorter .pe-section { grid-column: 1 / -1; padding: 0; font-size: 13px; }
.pe-app.is-sorter .pe-thumbs, .pe-app.is-sorter .pe-splitter, .pe-app.is-sorter .pe-center { display: none; }

/* overlay: selection, handles, guides */
.pe-overlay { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.pe-paper.pe-grid .pe-overlay { background-image: radial-gradient(circle, rgb(0 0 0 / .32) .8px, transparent 1.2px); background-size: var(--grid) var(--grid); }
.pe-sel { position: absolute; box-sizing: border-box; border: 1px solid var(--pe-sel); transform-origin: center; }
.pe-sel-text { border-style: dashed; }
.pe-sel-inner { border-style: dotted; }
.pe-scope { position: absolute; border: 1px dashed #8a8a8a; transform-origin: center; }
.pe-h { position: absolute; width: 9px; height: 9px; margin: -5px 0 0 -5px; box-sizing: border-box; border: 1px solid #4b4b4b; border-radius: 50%; background: #fff; pointer-events: auto; box-shadow: 0 0 0 1px rgb(255 255 255 / .6); touch-action: none; }
.pe-h-nw { left: 0; top: 0; } .pe-h-n { left: 50%; top: 0; } .pe-h-ne { left: 100%; top: 0; } .pe-h-e { left: 100%; top: 50%; }
.pe-h-se { left: 100%; top: 100%; } .pe-h-s { left: 50%; top: 100%; } .pe-h-sw { left: 0; top: 100%; } .pe-h-w { left: 0; top: 50%; }
.pe-h-rot { left: 50%; top: -24px; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 0; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M21 12a9 9 0 1 1-3-6.7L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3C/svg%3E") center / 12px no-repeat; box-shadow: 0 0 0 1px #6b6b6b; cursor: grab; }
.pe-h-end { width: 10px; height: 10px; }
.pe-ph { position: absolute; box-sizing: border-box; border: 1px dashed #9a9a9a; transform-origin: center; }
.pe-ph-tools { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; grid-template-columns: repeat(2, 34px); gap: 6px; pointer-events: auto; }
.pe-ph-tools:has(> :only-child) { grid-template-columns: 34px; }
.pe-ph-btn { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 6px; background: rgb(255 255 255 / .75); color: #7a7a7a; cursor: pointer; }
.pe-ph-btn:hover { color: #b7472a; background: #fff; }
.pe-ph-btn .icon { width: 22px; height: 22px; }
.pe-ghost { position: absolute; box-sizing: border-box; border: 1px dashed var(--pe-sel); background: color-mix(in srgb, var(--pe-sel) 8%, transparent); transform-origin: center; }
.pe-marquee { position: absolute; border: 1px solid var(--pe-sel); background: color-mix(in srgb, var(--pe-sel) 12%, transparent); }
.pe-snap { position: absolute; pointer-events: none; }
.pe-snap.is-v { top: -2000px; bottom: -2000px; border-left: 1px dashed #e8440e; }
.pe-snap:not(.is-v) { left: -2000px; right: -2000px; border-top: 1px dashed #e8440e; }
.pe-guide { position: absolute; pointer-events: auto; }
.pe-guide.is-v { top: 0; bottom: 0; width: 7px; margin-left: -3px; cursor: ew-resize; background: linear-gradient(90deg, transparent 3px, rgb(80 80 80 / .7) 3px 4px, transparent 4px); }
.pe-guide:not(.is-v) { left: 0; right: 0; height: 7px; margin-top: -3px; cursor: ns-resize; background: linear-gradient(transparent 3px, rgb(80 80 80 / .7) 3px 4px, transparent 4px); }
.pe-crop-full { position: absolute; box-sizing: border-box; border: 1px dashed #fff; background: rgb(255 255 255 / .32); outline: 1px dashed #333; pointer-events: auto; cursor: move; transform-origin: center; }
.pe-crop-view { position: absolute; box-sizing: border-box; border: 1px solid #111; transform-origin: center; pointer-events: none; }
.pe-h-crop { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; background: #111; border: 1px solid #fff; pointer-events: auto; }
.pe-hc-nw { left: 0; top: 0; } .pe-hc-n { left: 50%; top: 0; } .pe-hc-ne { left: 100%; top: 0; } .pe-hc-e { left: 100%; top: 50%; }
.pe-hc-se { left: 100%; top: 100%; } .pe-hc-s { left: 50%; top: 100%; } .pe-hc-sw { left: 0; top: 100%; } .pe-hc-w { left: 0; top: 50%; }
.pe-cellsel { position: absolute; background: rgb(79 107 209 / .22); outline: 1px solid rgb(79 107 209 / .5); }
.pe-preview { position: absolute; inset: 0; z-index: 20; overflow: hidden; background: #000; cursor: pointer; }
.pe-preview > .pe-slide { position: absolute; left: 0; top: 0; }
.pe-preview .ps-layer { position: absolute; inset: 0; overflow: hidden; background: #000; }
.pe-preview .ps-layer > .pe-slide { position: absolute; left: 0; top: 0; }

/* status bar */
.pe-status { display: flex; align-items: center; gap: 2px; height: 26px; padding: 0 8px; border-top: 1px solid var(--border); background: var(--surface); color: var(--text-soft); font-size: 12px; }
.pe-st-grow { flex: 1; }
.pe-st-btn { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 6px; border: 0; border-radius: 4px; background: none; color: var(--text-soft); font: inherit; cursor: pointer; }
.pe-st-btn:hover { background: var(--surface-2); color: var(--text); }
.pe-st-btn.is-on { color: var(--pe-accent); }
.pe-st-btn .icon { width: 14px; height: 14px; }
.pe-status .pe-st-range { flex: none; width: 110px; min-width: 0; margin: 0 2px; accent-color: var(--pe-accent); }
.pe-st-slide { white-space: nowrap; }
.pe-st-pct { min-width: 42px; justify-content: center; }
.pe-st-z { width: 20px; justify-content: center; padding: 0; font-size: 15px; }
@media (max-width: 760px) { .pe-st-range, .pe-st-z { display: none; } .pe-body { grid-template-columns: 0 0 minmax(0, 1fr) auto; } .pe-thumbs { visibility: hidden; } }

/* task panes */
.pe-pane-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 8px 14px; font-size: 14px; }
.pe-pane-x { width: 28px; height: 28px; border: 0; border-radius: 6px; background: none; color: var(--text); cursor: pointer; display: grid; place-items: center; }
.pe-pane-x:hover { background: var(--surface-2); }
.pe-pane-body { flex: 1; overflow-y: auto; padding: 0 12px 20px; }
.pe-pane-empty { color: var(--text-soft); line-height: 1.5; }
.pe-pane-foot { display: flex; gap: 6px; padding-top: 10px; flex-wrap: wrap; }
.pe-sec { border-bottom: 1px solid var(--border); }
.pe-sec > summary { padding: 9px 2px; font-weight: 600; cursor: pointer; }
.pe-sec-body { display: grid; gap: 8px; padding: 2px 2px 12px; }
.pe-f { display: grid; grid-template-columns: 1fr 140px; align-items: center; gap: 8px; }
.pe-f-in { width: 100%; height: 26px; padding: 0 6px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--text); font: inherit; }
textarea.pe-f-in { height: auto; padding: 6px; resize: vertical; }
.pe-f-unit { display: flex; align-items: center; gap: 4px; }
.pe-f-unit small, .pe-f-slider small { color: var(--text-soft); min-width: 28px; }
.pe-f-slider { display: flex; align-items: center; gap: 6px; }
.pe-f-slider input { flex: 1; min-width: 0; accent-color: var(--pe-accent); }
.pe-f-radios { display: grid; gap: 4px; }
.pe-f-radios label, .pe-f-check { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.pe-f-color { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 6px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--text); cursor: pointer; }
.pe-f-color span { width: 22px; height: 14px; border: 1px solid rgb(0 0 0 / .2); }
.pe-f-color .icon { width: 10px; height: 10px; }
.pe-f-stop { display: grid; grid-template-columns: 1fr auto 90px; align-items: center; gap: 6px; }
.pe-f-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-bottom: 8px; }
.pe-icon-b { width: 26px; height: 26px; display: inline-grid; place-items: center; border: 0; border-radius: 4px; background: none; color: var(--text-soft); cursor: pointer; }
.pe-icon-b:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.pe-icon-b:disabled { opacity: .35; }
.pe-icon-b .icon { width: 15px; height: 15px; }
.pe-sel-list, .pe-anim-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pe-sel-item { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 4px 0 6px; border-radius: 4px; cursor: pointer; }
.pe-sel-item:hover { background: var(--surface-2); }
.pe-sel-item.is-on { background: var(--pe-accent-soft); }
.pe-sel-item.is-hidden .pe-sel-name { color: var(--text-faint); }
.pe-sel-kind { display: grid; color: var(--text-soft); }
.pe-sel-kind .icon { width: 14px; height: 14px; }
.pe-sel-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-anim-item { display: grid; grid-template-columns: 16px 16px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: 2px 6px; padding: 6px 4px; border-radius: 6px; cursor: pointer; }
.pe-anim-item:hover { background: var(--surface-2); }
.pe-anim-item.is-on { background: var(--pe-accent-soft); }
.pe-anim-n { color: var(--text-soft); font-size: 11px; text-align: right; }
.pe-anim-name { display: grid; min-width: 0; }
.pe-anim-name b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-anim-name small { color: var(--text-soft); }
.pe-anim-item select { grid-column: 3; height: 24px; width: auto; }
.pe-anim-tools { grid-column: 3; display: flex; gap: 2px; }

/* ---------------------------------------------------------------- backstage */
.pb { position: fixed; inset: 0; z-index: 900; display: flex; background: var(--surface); color: var(--text); animation: pb-in .18s ease-out; font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif; }
@keyframes pb-in { from { opacity: 0; transform: translateX(-12px); } }
.pb-nav { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; width: 200px; padding: .9rem .75rem; background: #b7472a; color: #fff; }
.pb-back { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: #fff; cursor: pointer; }
.pb-back:hover { background: rgb(255 255 255 / .15); }
.pb-back .icon { width: 22px; height: 22px; }
.pb-title { font-size: 1.3rem; padding-left: .5rem; }
.pb-main { flex: 1; overflow: auto; padding: 1.25rem 2rem 3rem; }
.pb-main h2 { margin: 1.25rem 0 .6rem; font-size: 1.05rem; font-weight: 600; }
.pb-main h2:first-child { margin-top: 0; }
.pb-big { display: flex; align-items: center; gap: 1rem; width: 100%; max-width: 560px; margin-bottom: .45rem; padding: .75rem 1rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.pb-big:hover { border-color: #b7472a; background: color-mix(in srgb, #b7472a 8%, var(--surface)); }
.pb-big .icon { width: 24px; height: 24px; color: var(--pe-accent); flex: none; }
.pb-big span { display: flex; flex-direction: column; gap: .1rem; }
.pb-big small { color: var(--text-soft); font-size: .82rem; }
.pb-designs, .pe-start-designs { display: flex; flex-wrap: wrap; gap: 12px; }
.pb-design { display: flex; flex-direction: column; gap: 6px; width: 150px; padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; text-align: center; }
.pb-design-slide { position: relative; display: block; aspect-ratio: 16 / 9; border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 1px 3px rgb(0 0 0 / .1); }
.pb-design:hover .pb-design-slide { outline: 2px solid #b7472a; }
.pb-design-slide b { position: absolute; left: 12px; top: 30%; font-size: 16px; font-weight: 400; }
.pb-design-slide i { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 3px; }
.pb-design-slide s { width: 16px; height: 6px; text-decoration: none; }
.pb-info { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.5rem; margin: 0 0 .8rem; }
.pb-info dt { color: var(--text-soft); }
.pb-info dd { margin: 0; }
@media (max-width: 700px) { .pb { flex-direction: column; } .pb-nav { width: auto; flex-direction: row; align-items: center; } .pb-main { padding: 1rem; } }

/* start screen */
.pe-start { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; margin-top: 1rem; }
.pe-start-designs { justify-content: center; max-width: 820px; }
.pe-start-designs .pb-design { width: 132px; }
.xe-recent { width: min(520px, 100%); }
.xe-recent-title { margin: .25rem 0 .4rem; font-size: .95rem; font-weight: 600; color: var(--text-soft); }
.xe-recent-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.xe-recent-item { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .55rem .75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.xe-recent-item:hover { border-color: var(--primary); background: var(--primary-softer); }
.xe-recent-item span { display: flex; flex-direction: column; min-width: 0; }
.xe-recent-item strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xe-recent-item small { color: var(--text-soft); font-size: .82rem; }

/* ---------------------------------------------------------------- slide show (the PowerPoint Viewer's player) */
.ps-slide { transform-origin: 0 0; color-scheme: light; }
html.ps-open, html.ps-open body { overflow: hidden; }
.ps-show { position: fixed; inset: 0; z-index: 2147483000; background: #000; display: grid; place-items: center; outline: none; user-select: none; -webkit-user-select: none; touch-action: none; cursor: default; }
.ps-show.is-idle { cursor: none; }
.ps-stage { position: relative; overflow: hidden; background: #000; }
.ps-layer { position: absolute; inset: 0; overflow: hidden; background: #000; }
.ps-layer > .ps-slide, .ps-layer > .pe-slide { position: absolute; left: 0; top: 0; }
.ps-blank { position: absolute; inset: 0; z-index: 10; }
.ps-end { position: absolute; inset: 0; z-index: 9; background: #000; color: #d4d4d8; display: grid; place-items: start center; padding-top: 2rem; font: 500 1.1rem/1.4 var(--font-sans); }
.ps-controls { position: absolute; left: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 12; display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: rgb(20 20 24 / .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity .3s; }
.ps-show.is-idle .ps-controls { opacity: 0; pointer-events: none; }
.ps-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: #fff; cursor: pointer; }
.ps-btn:focus-visible { outline: 2px solid #fff; }
@media (hover: hover) { .ps-btn:hover { background: rgb(255 255 255 / .16); } }
@media (pointer: coarse) { .ps-btn { width: 44px; height: 44px; } }
.ps-counter { color: #e4e4e7; font: 500 .85rem var(--font-sans); padding: 0 .5rem; min-width: 4.5em; text-align: center; }
.ps-toast { position: absolute; left: 50%; top: max(18px, env(safe-area-inset-top)); transform: translateX(-50%); z-index: 12; background: rgb(20 20 24 / .8); color: #fff; padding: .5rem .9rem; border-radius: 999px; font: 500 .9rem var(--font-sans); white-space: nowrap; pointer-events: none; }
.ps-laser { position: fixed; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 10px 3px rgb(239 68 68 / .7); z-index: 13; pointer-events: none; }
.ps-grid { position: absolute; inset: 0; z-index: 11; overflow: auto; background: rgb(10 10 12 / .94); padding: 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 14px; align-content: start; touch-action: pan-y; }
.ps-grid-item { border: 0; background: none; padding: 0; color: #d4d4d8; font: 500 .8rem var(--font-sans); cursor: pointer; display: grid; gap: 4px; text-align: left; }
.ps-grid-box { position: relative; display: block; overflow: hidden; background: #fff; border-radius: 3px; }
.ps-grid-box > .ps-slide, .ps-grid-box > .pe-slide { position: absolute; left: 0; top: 0; pointer-events: none; }
.ps-grid-item.is-current .ps-grid-box, .ps-grid-item:focus-visible .ps-grid-box { box-shadow: 0 0 0 3px #fb923c; }
.ps-grid-item.is-hidden .ps-grid-box { opacity: .5; }

/* ---------------------------------------------------------------- printing */
.pe-print { display: none; }
@media print {
  body > *:not(.pe-print) { display: none !important; }
  .pe-print { display: block !important; }
  .pe-print-page { position: relative; overflow: hidden; break-after: page; break-inside: avoid; }
  .pe-print-page:last-child { break-after: auto; }
  .pe-print-page.is-slide > .pe-print-slide { position: absolute; left: 0; top: 0; }
  .pe-print-slide { position: relative; overflow: hidden; background: #fff; }
  .pe-print-slide.is-framed { outline: 1px solid #000; outline-offset: -1px; }
  .pe-print-slide > .pe-slide { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
  .pe-print-page.is-notes { display: flex; flex-direction: column; align-items: center; gap: 24px; }
  .pe-print-page.is-notes .pe-print-slide { outline: 1px solid #999; }
  .pe-print-notes { width: 624px; font: 12pt/1.4 Calibri, Carlito, Arial, sans-serif; color: #000; }
  .pe-print-notes p { margin: 0 0 6pt; }
  .pe-print-page.is-handout { display: grid; justify-content: center; align-content: start; gap: 28px 32px; padding-top: 12px; }
  .pe-print-page.is-handout.n3 .pe-print-cell { display: grid; grid-template-columns: auto 300px; gap: 20px; }
  .pe-print-page.is-handout .pe-print-slide { outline: 1px solid #999; }
  .pe-print-lines { background: repeating-linear-gradient(transparent 0 26px, #999 26px 27px); }
}