/* ---------- editor chrome ---------- */
:root {
  --ui-bg: #17181c; --ui-panel: #202228; --ui-line: #33363f; --ui-ink: #e8e9ee;
  --ui-dim: #9a9eab; --ui-accent: #6ea8ff;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { display: flex; flex-direction: column; background: var(--ui-bg); color: var(--ui-ink);
  font: 13px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; overflow: hidden; }
button, select, input, textarea { font: inherit; color: inherit; }
button { background: #2b2e36; border: 1px solid var(--ui-line); border-radius: 6px; padding: 5px 10px; cursor: pointer; }
button:hover { background: #353944; }
button:disabled { opacity: .45; cursor: default; }
button.primary { background: var(--ui-accent); border-color: var(--ui-accent); color: #0b1220; font-weight: 600; }
button.small { padding: 2px 7px; font-size: 12px; }
select, input[type=text], input[type=number], input[type=password], input[type=email], textarea { background: #14151a; border: 1px solid var(--ui-line); border-radius: 6px; padding: 5px 7px; }
:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 1px; }

#topbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--ui-line); background: var(--ui-panel); }
.brand { font-weight: 700; }
.brand a { color: inherit; text-decoration: none; }
.brand a:hover { text-decoration: underline; }
.brand span { font-weight: 400; color: var(--ui-dim); margin-left: 8px; }
.spacer { flex: 1; }
#saveState { color: var(--ui-dim); font-size: 12px; min-width: 60px; text-align: right; }

/* versions dialog (the padding lives on .box so a click on the dialog itself is a click outside) */
#versions, #account, #exportDlg, #importDlg, #usersDlg, #mergeDlg { width: 460px; max-width: calc(100vw - 32px); padding: 0; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-panel); color: var(--ui-ink); box-shadow: 0 12px 50px rgba(0,0,0,.6); }
#versions::backdrop, #account::backdrop, #exportDlg::backdrop, #importDlg::backdrop, #usersDlg::backdrop, #mergeDlg::backdrop { background: rgba(0,0,0,.5); }
#versions .box, #account .box, #exportDlg .box, #importDlg .box, #usersDlg .box, #mergeDlg .box { padding: 12px 14px 14px; }
#expForm { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
#versions header, #account header, #exportDlg header, #importDlg header, #usersDlg header, #mergeDlg header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 14px; }
#verForm, #impForm { display: flex; gap: 6px; }
#verForm input, #impForm input { flex: 1; min-width: 0; }
#importDlg .hint { margin: 8px 0 0; }
#importDlg .hint:empty { display: none; }
#impMsg.err { color: #ff8a80; }
#impFile { margin-top: 12px; }
/* the step before an import is applied: the summary, and the sections edited here, to keep or replace */
#mergeDlg { width: 560px; }
#mergeDlg .mrgSum { white-space: pre-wrap; font-size: 13px; line-height: 1.45; max-height: 24vh; overflow-y: auto; }
#mergeDlg .mrgHead { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
#mergeDlg .mrgHead b { flex: 1; }
#mergeDlg .mrgList { max-height: 34vh; overflow-y: auto; margin: 6px 0; border-top: 1px solid var(--ui-line); }
#mergeDlg .mrgList label { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--ui-line); cursor: pointer; }
#mergeDlg .mrgList span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mergeDlg .mrgList i { flex: none; color: var(--ui-dim); font-size: 12px; font-style: normal; }
#mergeDlg .hint { margin: 6px 0 0; }
#mergeDlg .mrgEnd { display: flex; justify-content: flex-end; gap: 6px; margin-top: 12px; }
#impCleanRow { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; }
#verList { max-height: 50vh; overflow-y: auto; margin: 10px 0 0; border-top: 1px solid var(--ui-line); }
#verList .ver { display: flex; align-items: center; gap: 6px; padding: 7px 0; border-bottom: 1px solid var(--ui-line); }
#verList .ver div { flex: 1; min-width: 0; }
#verList .ver b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#verList .ver span, #verList .none { color: var(--ui-dim); font-size: 12px; }
#verList .none { padding: 10px 0; }
#verList .err { color: #ff9a9a; padding: 10px 0; }

main { flex: 1; display: grid; grid-template-columns: 220px minmax(0, 1fr) 340px; min-height: 0; }
#outline { overflow-y: auto; border-right: 1px solid var(--ui-line); padding: 8px 0; background: var(--ui-panel); }
.orow { display: flex; align-items: center; gap: 2px; padding: 0 6px 0 2px; border-top: 2px solid transparent; border-bottom: 2px solid transparent; }
.orow:hover { background: #2b2e36; }
.orow.on { background: #2f3a50; }
.orow.child { padding-left: 16px; }
.orow.child .t { color: var(--ui-dim); }
.orow.on .t { color: #fff; }
.orow.hid .t { text-decoration: line-through; opacity: .5; }
.orow.dragging { opacity: .4; }
.orow.dropB { border-top-color: var(--ui-accent); }
.orow.dropA { border-bottom-color: var(--ui-accent); }
.orow .grip { flex: none; width: 14px; text-align: center; color: #5b6070; cursor: grab; font-size: 11px; letter-spacing: -2px; user-select: none; }
.orow button { background: none; border: 0; border-radius: 4px; padding: 4px 4px; }
.orow .t { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orow .n { color: var(--ui-dim); font-size: 11px; flex: none; }
.orow .ic { flex: none; width: 20px; height: 22px; padding: 0; color: var(--ui-dim); display: none; line-height: 1; }
.orow .ic:hover { color: #fff; background: #3d4250; }
.orow .ic svg { vertical-align: middle; }
.orow:hover .ic, .orow:focus-within .ic, .orow.hid .eye { display: inline-block; }
.orow:hover .n, .orow:focus-within .n { display: none; }
.orow .tag { font-style: normal; font-size: 10px; margin-left: 6px; padding: 1px 5px; border-radius: 8px; background: var(--ui-accent); color: #0b1220; }
#outline .add { display: block; width: calc(100% - 16px); margin: 10px 8px; background: none; border-style: dashed; color: var(--ui-dim); }

#stageWrap { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
#stage { flex: 1; position: relative; overflow: hidden; min-height: 0; }
#notice { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 14px; background: #3a3320; border-bottom: 1px solid #5a4d22; color: #f3e3a8; }
#notice[hidden] { display: none; }
#lockbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 7px 14px; background: #20304a; border-bottom: 1px solid #34507c; color: #d5e4ff; }
#lockbar[hidden] { display: none; }
/* read-only while someone else holds the edit lock */
body.locked #tab-design, body.locked #chatForm, body.locked #chatQuick, body.locked #chatLog button, body.locked #outline .grip, body.locked #outline .ic, body.locked #outline .add,
body.locked #btnUndo, body.locked #btnImport, body.locked #btnHide, body.locked #btnDup, body.locked #btnBrk, body.locked #verForm, body.locked #verList button, body.locked #notice button { pointer-events: none; opacity: .4; }
body.present #lockbar { display: none; }
#account p { margin: 0 0 10px; }
.keyForm { display: flex; gap: 6px; margin-bottom: 8px; }
.keyForm input { flex: 1; min-width: 0; }

/* sign-in and deck list, drawn over the editor */
#gate { position: fixed; inset: 0; z-index: 50; overflow: auto; background: var(--ui-bg); padding: 24px 16px; }
#gate[hidden] { display: none; }
#gate h1 { margin: 0; font-size: 20px; }
#gate .card { width: 320px; max-width: 100%; margin: 12vh auto 0; padding: 22px; display: flex; flex-direction: column; gap: 10px; background: var(--ui-panel); border: 1px solid var(--ui-line); border-radius: 10px; }
#gate .card p { margin: 0; }
#gate .err { color: #ff9c9c; min-height: 1.4em; }
#gate .login.busy { opacity: .6; pointer-events: none; }
#gate .linkBtn { background: none; border: 0; padding: 0; color: var(--ui-accent); font: inherit; text-align: left; cursor: pointer; }
#gate .linkBtn:hover { text-decoration: underline; }
.accForm { display: grid; gap: 7px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--ui-line); }
.accForm label { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 8px; }
.accForm label span { color: var(--ui-dim); }
.accEnd { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.accMsg { color: var(--ui-dim); font-size: 12px; }
.accMsg.bad { color: #ff9c9c; }
#account .accHead { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.accHead span { color: var(--ui-dim); }
#usersDlg { width: 620px; }
#usrList { max-height: 46vh; overflow-y: auto; border-top: 1px solid var(--ui-line); margin-bottom: 12px; }
#usrList .usr { display: flex; align-items: center; gap: 6px; padding: 7px 0; border-bottom: 1px solid var(--ui-line); }
#usrList .usr .who { flex: 1; min-width: 0; }
#usrList .usr .who span { display: block; color: var(--ui-dim); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#usrList .tag { display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px solid var(--ui-line); border-radius: 8px; font-size: 11px; color: var(--ui-dim); font-weight: 400; }
#usrForm { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; align-items: center; }
#usrForm b, #usrForm .wide { grid-column: 1 / -1; }
#usrForm input[type=text], #usrForm input[type=email], #usrForm input[type=password] { width: 100%; box-sizing: border-box; }
#usrMsg { margin: 10px 0 0; font-size: 13px; }
#usrMsg.bad { color: #ff9a9a; }
#usrMsg input { width: 100%; box-sizing: border-box; margin-top: 6px; }
.accFoot { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--ui-line); color: var(--ui-dim); }
#gate input[type=text], #gate input[type=password] { padding: 8px 9px; }
#gate .btn { display: inline-block; text-align: center; text-decoration: none; border: 1px solid var(--ui-line); border-radius: 6px; padding: 5px 10px; background: #2b2e36; color: var(--ui-ink); }
#gate .btn.primary { background: var(--ui-accent); border-color: var(--ui-accent); color: #0b1220; font-weight: 600; }
.home { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.home header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.home .new { display: flex; gap: 6px; margin-bottom: 8px; }
.home .new input { flex: 1; min-width: 0; }
.home .sub, #gate .login .sub { color: var(--ui-dim); font-size: 12px; }
.deck { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 14px; background: var(--ui-panel); border: 1px solid var(--ui-line); border-radius: 8px; }
.deck .info { flex: 1; min-width: 200px; }
.deck .name { font-size: 15px; font-weight: 600; color: var(--ui-ink); text-decoration: none; overflow-wrap: anywhere; }
.deck .name:hover { text-decoration: underline; }
.deck .acts { display: flex; gap: 6px; flex-wrap: wrap; }
.deck .pub { align-self: stretch; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.deck .share > .pub:not(:first-child) { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--ui-line); }
.deck .pubUrl { align-self: stretch; display: flex; gap: 6px; align-items: center; }
.deck .pubUrl input { flex: 1; min-width: 0; }
#gate .btn.small { padding: 2px 8px; font-size: 12px; }
/* a view link's page: only the slide, with buttons in the corners that show on hover or touch */
.viewBtn { position: fixed; z-index: 20; bottom: 14px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(0,0,0,.55); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; opacity: .25; transition: opacity .2s; }
.viewBtn:hover, .viewBtn:focus-visible { opacity: 1; }
.viewBtn.prev { left: 14px; } .viewBtn.next { left: 66px; } .viewBtn.full { right: 14px; }
@media (hover: none) { .viewBtn { opacity: .6; } }
@media print { .viewBtn { display: none; } }
.deck .share { flex: 0 0 100%; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; padding-top: 10px; border-top: 1px solid var(--ui-line); }
#stage.isHidden .slide { opacity: .45; }
#stage .slide { position: absolute; left: 50%; top: 50%; margin: -360px 0 0 -640px; box-shadow: 0 4px 30px rgba(0,0,0,.5); }
#pager { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 8px; color: var(--ui-dim); }
#pager .gap { width: 18px; }
#pageInfo { min-width: 60px; text-align: center; }

#panel { display: flex; flex-direction: column; border-left: 1px solid var(--ui-line); background: var(--ui-panel); min-height: 0; }
.tabs { display: flex; border-bottom: 1px solid var(--ui-line); }
.tabs button { flex: 1; border: 0; border-radius: 0; background: none; padding: 9px; color: var(--ui-dim); border-bottom: 2px solid transparent; }
.tabs button[aria-selected=true] { color: #fff; border-bottom-color: var(--ui-accent); }
.tabBody { flex: 1; overflow-y: auto; min-height: 0; padding: 2px 12px 12px; }
.tabBody[hidden] { display: none; }

details.grp { border-bottom: 1px solid var(--ui-line); }
details.grp > summary { cursor: pointer; list-style: none; padding: 10px 2px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ui-dim); user-select: none; }
details.grp > summary::-webkit-details-marker { display: none; }
details.grp > summary::before { content: "▸"; display: inline-block; width: 14px; }
details.grp[open] > summary::before { content: "▾"; }
details.grp[open] > summary { color: var(--ui-ink); }
.grpBody { padding: 0 0 12px; }
.row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.row > label { flex: 0 0 96px; color: var(--ui-dim); }
.row > .ctl { flex: 1; min-width: 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.row input[type=text], .row select { width: 100%; }
.row input[type=range] { flex: 1; min-width: 60px; }
.row output { flex: 0 0 52px; text-align: right; color: var(--ui-dim); font-size: 12px; font-variant-numeric: tabular-nums; }
/* a slider's readout: click to type the value */
input[type=range]:not(:disabled) + output { cursor: text; }
input[type=range]:not(:disabled) + output:hover { color: var(--ui-ink); text-decoration: underline dotted; }
output[hidden] { display: none; }
input.numEdit { flex: 0 0 60px; width: 60px; padding: 2px 4px; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
input.numEdit::-webkit-inner-spin-button { display: none; }
.row input[type=color] { width: 34px; height: 26px; padding: 0; border: 1px solid var(--ui-line); border-radius: 4px; background: none; }
.thumb { width: 44px; height: 26px; border-radius: 4px; border: 1px solid var(--ui-line); background: #111 center/cover no-repeat; flex: none; }
.thumb.on, button.small.on { outline: 2px solid var(--ui-accent); outline-offset: 1px; }
.focusEd { margin: 6px 0 10px; padding: 8px; border: 1px solid var(--ui-line); border-radius: 6px; background: #1a1c21; }
.focusPic { position: relative; display: block; width: fit-content; max-width: 100%; margin: 0 auto 6px; cursor: crosshair; touch-action: none; user-select: none; line-height: 0; }
.focusPic img { display: block; max-width: 100%; max-height: 240px; border-radius: 4px; pointer-events: none; }
.focusPic .dot { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2px solid #fff; border-radius: 50%; background: color-mix(in srgb, var(--ui-accent) 60%, transparent); box-shadow: 0 0 0 1px #000, 0 0 6px rgba(0,0,0,.7); pointer-events: none; }
/* menu bar names and widths (Design tab) */
.navRow { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.navRow.kid { padding-left: 16px; }
.navRow input[type=text] { flex: 1; min-width: 0; }
.navRow input[type=number] { flex: 0 0 58px; width: 58px; }
.navRow span { flex: 0 0 12px; color: var(--ui-dim); font-size: 12px; }
.row .note { color: var(--ui-dim); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.seg { display: inline-flex; border: 1px solid var(--ui-line); border-radius: 6px; overflow: hidden; }
.seg button { border: 0; border-radius: 0; padding: 4px 9px; background: none; }
.seg button.on { background: var(--ui-accent); color: #0b1220; }
.seg { flex-wrap: wrap; } /* the Layout choices no longer fit on one line */
.posgrid { display: grid; grid-template-columns: repeat(3, 20px); gap: 3px; }
.posgrid button { width: 20px; height: 16px; padding: 0; border-radius: 3px; }
.posgrid button.on { background: var(--ui-accent); border-color: var(--ui-accent); }
.hint { color: var(--ui-dim); font-size: 12px; margin: 4px 0 0; }
.gradBar { height: 22px; border-radius: 4px; border: 1px solid var(--ui-line); margin-bottom: 6px; }
.stop { display: flex; align-items: center; gap: 8px; margin: 5px 0; }
.stop input[type=color] { flex: none; width: 34px; height: 26px; padding: 0; border: 1px solid var(--ui-line); border-radius: 4px; background: none; }
.stop input[type=range] { flex: 1; min-width: 60px; }
.stop output { flex: 0 0 38px; text-align: right; color: var(--ui-dim); font-size: 12px; font-variant-numeric: tabular-nums; }
.iconGrid { display: grid; grid-template-columns: repeat(auto-fill, 28px); gap: 3px; width: 100%; }
.iconGrid button, .hotPick { width: 28px; height: 28px; padding: 4px; border-radius: 4px; flex: none; }
.iconGrid button svg, .hotPick svg { display: block; width: 100%; height: 100%; }
.freePick { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iconGrid button.on, .hotPick.on, .freePick.on { background: var(--ui-accent); border-color: var(--ui-accent); color: #0b1220; }
.popEdit { display: block; width: 100%; margin: 6px 0; resize: vertical; }
.themeForm { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.themeForm input[type=text] { width: 100%; }

/* assistant */
#tab-assistant { display: flex; flex-direction: column; padding: 0; }
#tab-assistant[hidden] { display: none; }
#chatLog { flex: 1; overflow-y: auto; padding: 12px; min-height: 0; }
.msg { margin: 0 0 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.user { background: #2b3550; border-radius: 8px; padding: 7px 10px; margin-left: 28px; }
.msg.err { color: #ff9a9a; }
.msg.note { color: var(--ui-dim); font-style: italic; }
.prop { border: 1px solid var(--ui-line); border-radius: 8px; margin: 0 0 12px; background: #1a1c21; }
.prop header { padding: 8px 10px; border-bottom: 1px solid var(--ui-line); }
.prop header b { display: block; }
.prop header span { color: var(--ui-dim); font-size: 12px; }
.prop .txt { max-height: 220px; overflow-y: auto; padding: 8px 10px; font-size: 12.5px; }
.prop .txt p { margin: 0 0 7px; }
.prop .txt p.li { padding-left: 14px; text-indent: -10px; }
.prop .txt p.li::before { content: "• "; }
.prop footer { display: flex; gap: 6px; align-items: center; padding: 8px 10px; border-top: 1px solid var(--ui-line); }
.prop footer .state { color: var(--ui-dim); font-size: 12px; margin-left: auto; }
.prop header .fit { display: block; color: var(--ui-ink); }
.prop.over { border-color: #b8862b; }
.prop.over header .fit { color: #ffc861; font-weight: 600; }
.batch { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; padding: 8px 10px; border: 1px solid var(--ui-accent); border-radius: 8px; background: #1c2333; }
.batch span { color: var(--ui-dim); font-size: 12px; flex: 1 1 100%; }
#chatQuick .sep { flex: 1 1 100%; margin-top: 2px; color: var(--ui-dim); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
#chatQuick { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px 12px 0; border-top: 1px solid var(--ui-line); }
#chatForm { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 8px 12px 12px; }
#chatForm select { grid-column: 1 / -1; }
#chatForm textarea { resize: vertical; min-height: 54px; }

/* ---------- the slide (1280 x 720, scaled by JS) ---------- */
.slide {
  --bg: #0b1026; --ink: #eef1ff; --accent: #ff4d6d;
  --head: "Bebas Neue"; --body: "Barlow"; --size: 20px; --hscale: 1;
  width: 1280px; height: 720px; position: relative; overflow: hidden;
  background-color: var(--bg); background-image: var(--grad, none); color: var(--ink);
  --hweight: 400; --hcase: none; --htrack: 0em; --hlead: 1.1; --cscale: 1; --kfont: var(--body); --ksize: 16px; --ktrack: .14em; --hword: 0em; --kword: 0em; --word: 0em;
  --bweight: 400; --cgap: 40px; --lead: 1.38; --track: 0em; --pgap: .75em; --indent: 0em; --align: left; --imgw: 380px;
  font-family: var(--body), system-ui, sans-serif; font-size: var(--size); font-weight: var(--bweight); line-height: var(--lead);
}
.slide .bgimg { position: absolute; inset: 0; background: center/cover no-repeat; }
/* the dim layer is the slide's own background again (colour and gradient), part-transparent over the image */
.slide .dim { position: absolute; inset: 0; background-color: var(--bg); background-image: var(--grad, none); }
.slide .logo { position: absolute; object-fit: contain; object-position: center; z-index: 3; }
.slide .logo.t { top: 28px; } .slide .logo.m { top: 50%; transform: translateY(-50%); } .slide .logo.b { bottom: 78px; }
.slide .logo.l { left: 40px; } .slide .logo.c { left: 50%; margin-left: calc(var(--logo) / -2); } .slide .logo.r { right: 40px; }

.slide .kicker { position: absolute; left: 70px; right: 70px; top: 34px; font-family: var(--kfont), system-ui, sans-serif; font-size: var(--ksize); line-height: 1.25; letter-spacing: var(--ktrack); word-spacing: var(--kword); text-transform: uppercase; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slide h2 { position: absolute; left: 70px; right: 70px; top: calc(34px + var(--ksize) * 1.25); margin: 0; font: var(--hweight) calc(64px * var(--hscale))/var(--hlead) var(--head), Impact, sans-serif; letter-spacing: var(--htrack); word-spacing: var(--hword); text-transform: var(--hcase); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; outline: none; text-shadow: var(--hshadow, none); }
.slide.center .kicker, .slide.center h2 { text-align: center; }
.slide .kicker, .slide .cover .sub, .slide .fullTitle .k { text-shadow: var(--hshadow, none); }
.slide .body { text-shadow: var(--bshadow, none); }
.slide.nokicker h2 { top: 40px; }
.slide .count { position: absolute; right: 70px; top: 34px; font-family: var(--kfont), system-ui, sans-serif; font-size: 15px; line-height: 1.25; opacity: .55; }
.slide.center .count { display: none; }

.slide .content { position: absolute; left: 70px; right: 70px; top: 160px; height: 460px; display: flex; gap: var(--cgap); }
.slide .content.right { flex-direction: row-reverse; }
.slide .figure { flex: 0 0 var(--imgw); border-radius: 6px; overflow: hidden; background: center/cover no-repeat; position: relative; }
.slide .figure.empty { border: 2px dashed color-mix(in srgb, var(--ink) 35%, transparent); display: flex; align-items: center; justify-content: center; text-align: center; font-size: 16px; opacity: .7; cursor: pointer; }
.slide .body { flex: 1; min-width: 0; height: 460px; column-gap: var(--cgap); column-fill: auto; overflow: hidden; letter-spacing: var(--track); word-spacing: var(--word); text-align: var(--align); }
.slide .body p { margin: 0 0 var(--pgap); text-indent: var(--indent); outline: none; break-inside: auto; orphans: 2; widows: 2; }
.slide .body p.li { padding-left: 1.1em; text-indent: -1.1em; margin-bottom: calc(var(--pgap) * .45); }
.slide .body p.li::before { content: "•"; display: inline-block; width: 1.1em; text-indent: 0; color: var(--accent); }
.slide .body p:focus, .slide h2:focus { background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 3px; }
.slide .body p:empty::after { content: "…"; opacity: .4; }
/* "Big statement" layout: one column, large, centred both ways. The size is on the paragraphs (em of the
   body) so it composes with the shrink-to-fit font-size on .body; auto margins centre without hiding overflow. */
.slide .body.quote { column-count: 1 !important; display: flex; flex-direction: column; text-align: center; --indent: 0em; }
.slide .body.quote p { flex: none; font: var(--qweight, 400) calc(1em * var(--qscale, 2.2))/1.25 var(--qfont, var(--head)), system-ui, sans-serif; }
.slide .body.quote p:first-child { margin-top: auto; }
.slide .body.quote p:last-child { margin-bottom: auto; }
/* a sub-heading inside the text: the title of a sub-section kept together with its group (three sizes) */
.slide .body p.sub { margin: .7em 0 .3em; text-indent: 0; text-align: left; font: var(--hweight) 1.7em/1.1 var(--head), Impact, sans-serif; letter-spacing: var(--htrack); word-spacing: var(--hword); text-transform: var(--hcase); text-shadow: var(--hshadow, none); break-after: avoid; }
.slide .body p.sub.s2 { font-size: 1.35em; }
.slide .body p.sub.s3 { font-size: 1.1em; }
.slide .body p.sub:first-child { margin-top: 0; }
/* manual slide break marker (edit mode only), out of flow above the text */
.slide .brkMark { all: unset; position: absolute; top: -27px; left: 0; cursor: pointer; font: 13px/20px system-ui, sans-serif; padding: 0 8px; border: 1px dashed color-mix(in srgb, var(--ink) 45%, transparent); border-radius: 10px; opacity: .5; white-space: nowrap; }
.slide .brkMark:hover, .slide .brkMark:focus-visible { opacity: 1; border-color: var(--accent); color: var(--accent); }
.slide .figure ~ .brkMark { left: calc(var(--imgw) + var(--cgap)); }
.slide .content.right .brkMark { left: 0; }
.slide s { opacity: .55; }

.slide .full { position: absolute; inset: 0 0 70px 0; background: center/cover no-repeat; }
.slide .full.empty { display: flex; align-items: center; justify-content: center; font-size: 22px; opacity: .6; cursor: pointer;
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--ink) 6%, transparent) 0 14px, transparent 14px 28px); }
.slide .fullTitle { position: absolute; left: 70px; bottom: 110px; right: 70px; }
.slide .fullTitle .k { color: var(--accent); font-family: var(--kfont), system-ui, sans-serif; letter-spacing: var(--ktrack); word-spacing: var(--kword); text-transform: uppercase; font-size: var(--ksize); }
.slide .fullTitle h2 { position: static; font-size: calc(96px * var(--hscale)); text-shadow: var(--hshadow, 0 2px 18px rgba(0,0,0,.6)); }

.slide .gallery { position: absolute; left: 70px; right: 70px; top: 160px; height: 460px; display: grid; gap: 14px; }
.slide .gallery div { background: center/cover no-repeat; border-radius: 4px; }

.slide .video { margin: 0 auto; height: 100%; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #000 center/cover no-repeat; position: relative; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.slide .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.slide .video .play { width: 96px; height: 96px; border-radius: 50%; background: var(--accent); position: relative; box-shadow: 0 4px 24px rgba(0,0,0,.5); }
.slide .video .play::after { content: ""; position: absolute; left: 37px; top: 28px; border: 20px solid transparent; border-left: 32px solid var(--bg); border-right: 0; }
.slide .video .src { position: absolute; left: 14px; right: 14px; bottom: 10px; font-size: 13px; color: #fff; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 4px #000; }
.slide .video.bad { cursor: default; background: none; border: 2px dashed color-mix(in srgb, var(--ink) 35%, transparent); padding: 0 40px; text-align: center; font-size: 16px; }
/* video options: the video fills the whole slide, behind the title and the menu bar (vfull); nothing but
   the video is drawn (vsolo); the rest goes away while it plays, which is while it holds an iframe (vplay) */
.slide.vfull .content { left: 0; right: 0; top: 0; height: 720px; }
.slide.vfull .video { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.slide.vfull .kicker, .slide.vfull h2, .slide.vfull .count { z-index: 2; text-shadow: var(--hshadow, 0 2px 14px rgba(0,0,0,.75)); }
.slide.vfull .kicker, .slide.vfull .count, .slide.vfull h2:not([contenteditable]) { pointer-events: none; }
.slide.vplay:has(.video iframe) .kicker, .slide.vplay:has(.video iframe) h2, .slide.vplay:has(.video iframe) .count, .slide.vplay:has(.video iframe) .nav, .slide.vplay:has(.video iframe) .logo, .slide.vplay:has(.video iframe) .hot, .slide.vplay:has(.video iframe) .free { display: none; }
/* stop: takes the player away again (the poster and the slide's own things come back). Top centre, clear of
   the players' own buttons in the corners and of the export's "Save as PDF" button. */
.slide .video .vstop { all: unset; display: none; position: absolute; z-index: 2; top: 12px; left: 50%; margin-left: -20px; width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font: 24px/40px system-ui, sans-serif; text-align: center; cursor: pointer; opacity: .55; }
.slide .video .vstop:hover, .slide .video .vstop:focus-visible { opacity: 1; }
.slide .video:has(iframe) .vstop { display: block; }
.slide.vsolo .kicker, .slide.vsolo h2, .slide.vsolo .count, .slide.vsolo .nav, .slide.vsolo .logo, .slide.vsolo .hot, .slide.vsolo .free, .slide.vsolo .bgimg, .slide.vsolo .dim { display: none; }
.slide.vsolo .content { top: 130px; }
.slide.vsolo.vfull .content { top: 0; }
/* the sub-section buttons of a group's first slide: groups (.chipGroup, optional .chipHead) of buttons
   (.chipSet: wrapping rows, a grid or a list); alignment, spacing and size come from design.chips */
.slide .chips { display: flex; flex-direction: column; justify-content: var(--chv, flex-start); gap: calc(var(--chy, 14px) + 18px); width: 100%; min-height: 0; }
.slide .chips.side { flex-direction: row; justify-content: flex-start; align-items: flex-start; align-self: var(--chv, flex-start); gap: calc(var(--chx, 14px) + 26px); }
.slide .chips.side .chipGroup { flex: 1 1 0; min-width: 0; }
.slide .chipHead { margin-bottom: 10px; font-family: var(--kfont), system-ui, sans-serif; font-size: var(--ksize); line-height: 1.25; letter-spacing: var(--ktrack); word-spacing: var(--kword); text-transform: uppercase; color: var(--accent); text-shadow: var(--hshadow, none); }
.slide .chipSet { display: flex; flex-wrap: wrap; justify-content: var(--cha, flex-start); align-content: flex-start; gap: var(--chy, 14px) var(--chx, 14px); }
.slide .chipSet.list { flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: var(--cha, flex-start); }
.slide .chipSet.grid { display: grid; grid-template-columns: repeat(var(--chc, 3), minmax(0, 1fr)); }
.slide .chipSet.grid button { text-align: center; }
.slide .chips button { all: unset; cursor: pointer; border: 2px solid var(--accent); border-radius: 999px; padding: .2em .73em; font: var(--hweight) calc(30px * var(--chs, 1))/1.2 var(--head), Impact, sans-serif; letter-spacing: var(--htrack); word-spacing: var(--hword); text-transform: var(--hcase); }
.slide .chips button:hover { background: var(--accent); color: var(--bg); }

.slide .cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 0 90px 70px; }
.slide .cover h1 { margin: 0; font: var(--hweight) calc(140px * var(--cscale))/1 var(--head), Impact, sans-serif; letter-spacing: var(--htrack); word-spacing: var(--hword); text-transform: var(--hcase); outline: none; text-shadow: var(--hshadow, 0 2px 22px rgba(0,0,0,.5)); }
.slide .cover .sub { font-family: var(--kfont), system-ui, sans-serif; font-size: 34px; color: var(--accent); letter-spacing: var(--ktrack); word-spacing: var(--kword); text-transform: uppercase; outline: none; }
.slide .cover .meta { position: absolute; bottom: 86px; left: 90px; right: 90px; font-size: 13px; opacity: .6; }

.slide .nav { position: absolute; left: 70px; right: 70px; bottom: 22px; height: 30px; display: flex; gap: 5px; z-index: 4; }
.slide .nav button { all: unset; cursor: pointer; box-sizing: border-box; height: 30px; min-width: 0; border: 1.5px solid color-mix(in srgb, var(--ink) 40%, transparent); border-radius: 4px; font-size: 13px; line-height: 27px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 5px; }
.slide .nav button:hover { border-color: var(--accent); }
.slide .nav .detail { display: flex; gap: 3px; border: 1.5px solid var(--accent); border-radius: 6px; padding: 2px; height: 30px; box-sizing: border-box; min-width: 0; }
.slide .nav .detail button { height: 23px; line-height: 20px; border-radius: 3px; border-color: color-mix(in srgb, var(--ink) 25%, transparent); font-size: 12px; padding: 0; text-overflow: clip; }
.slide .nav .detail button.on { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 700; padding: 0 6px; text-overflow: ellipsis; }

/* links: an icon on the slide, and the pop-up it opens (drawn inside the slide, so it scales with it) */
.slide .hot { all: unset; position: absolute; z-index: 5; display: block; width: var(--hs, 56px); height: var(--hs, 56px); transform: translate(-50%, -50%); border-radius: 50%; color: var(--hc, var(--accent)); --hi: var(--bg); cursor: pointer; filter: drop-shadow(0 2px 8px rgba(0,0,0,.35)); }
.slide .hot svg { display: block; width: 100%; height: 100%; }
.slide .hot.pulse { animation: hotPulse 2.6s ease-in-out infinite; }
.slide .hot:hover { animation-play-state: paused; }
.slide .hot:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* text and images placed freely on a slide (itemEl() in app.js) */
.slide .free { position: absolute; z-index: 4; box-sizing: border-box; }
.slide .free.back { z-index: auto; }
.slide .free.text { line-height: 1.2; white-space: pre-wrap; overflow-wrap: break-word; font-family: var(--body), system-ui, sans-serif; }
.slide .free.text.head { font-family: var(--head), Impact, sans-serif; font-weight: var(--hweight); letter-spacing: var(--htrack); word-spacing: var(--hword); text-transform: var(--hcase); line-height: 1.05; }
.slide .free.image img { display: block; width: 100%; height: auto; border-radius: var(--fr, 0); }
.slide .free.image.shadow img { filter: drop-shadow(0 8px 22px rgba(0,0,0,.55)); }
.slide .free.edit { cursor: move; user-select: none; touch-action: none; }
.slide .free.edit:hover { outline: 1px dashed color-mix(in srgb, var(--ink) 55%, transparent); outline-offset: 3px; }
.slide .free.edit.sel { outline: 2px dashed var(--ink); outline-offset: 3px; z-index: 6; }
.slide .free .grip { display: none; position: absolute; right: -10px; bottom: -10px; width: 18px; height: 18px; box-sizing: border-box; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); cursor: ew-resize; }
.slide .free.sel .grip { display: block; }
.slide .hot.sel { outline: 2px dashed var(--ink); outline-offset: 4px; cursor: move; }
@keyframes hotPulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .slide .hot.pulse { animation: none; } }
.slide .pop { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.64); }
.slide .pop[hidden] { display: none; }
.slide .popBox { position: relative; display: flex; flex-direction: column; max-width: 1100px; max-height: 624px; background-color: var(--bg); background-image: var(--grad, none); color: var(--ink); border: 1.5px solid color-mix(in srgb, var(--accent) 65%, transparent); border-radius: 10px; overflow: hidden; box-shadow: 0 20px 70px rgba(0,0,0,.6); }
.slide .popBox.row { flex-direction: row; }
.slide .popBox img { display: block; flex: 0 0 auto; align-self: center; max-width: 100%; max-height: 360px; }
.slide .popBox.pic img { max-height: 560px; }
.slide .popBox.pic img:last-child { max-height: 620px; }
.slide .popBox.row img { max-width: 560px; max-height: 620px; }
.slide .popBody { flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto; padding: 30px 40px 32px; max-width: 700px; font-size: 19px; line-height: 1.5; }
.slide .popBox.col .popBody { align-self: center; }
.slide .popBox.row .popBody { flex: 0 1 500px; }
.slide .popBox.wide .popBody { max-width: 860px; }
.slide .popBox.row.wide .popBody { flex-basis: 540px; }
.slide .popBox.pic .popBody { flex: none; max-width: none; padding: 14px 54px 16px 24px; }
.slide .popBody h3 { margin: 0 34px 14px 0; font: var(--hweight) calc(38px * var(--hscale))/1.1 var(--head), Impact, sans-serif; letter-spacing: var(--htrack); word-spacing: var(--hword); text-transform: var(--hcase); }
.slide .popBox.pic .popBody h3 { margin: 0; font-size: calc(26px * var(--hscale)); }
.slide .popBody h3:last-child { margin-bottom: 0; }
.slide .popText p { margin: 0 0 .75em; }
.slide .popText p:last-child { margin-bottom: 0; }
.slide .popText.mono { margin: 0; font: 16px/1.5 "Courier Prime", "Courier New", Courier, monospace; white-space: pre-wrap; tab-size: 4; }
.slide .popX { all: unset; position: absolute; z-index: 1; top: 8px; right: 10px; width: 34px; height: 34px; border-radius: 50%; text-align: center; font: 26px/32px system-ui, sans-serif; cursor: pointer; background: color-mix(in srgb, var(--bg) 75%, transparent); color: var(--ink); }
.slide .popX:hover, .slide .popX:focus-visible { background: var(--accent); color: var(--bg); }

/* ---------- modes ---------- */
#measure { position: absolute; left: -99999px; top: 0; visibility: hidden; }
#print { display: none; }
body.present #topbar, body.present #outline, body.present #panel, body.present #pager, body.present #notice { display: none; }
body.present main { grid-template-columns: 1fr; }
body.present { background: #000; }
body.present .figure.empty, body.present .full.empty { visibility: hidden; }

@media (max-width: 1100px) { main { grid-template-columns: 0 minmax(0, 1fr) 320px; } #outline { display: none; } }

@media print {
  @page { size: 1280px 720px; margin: 0; }
  html, body { height: auto; overflow: visible; background: #fff; }
  body > *:not(#print) { display: none !important; }
  #print { display: block; }
  #print .slide { break-after: page; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .figure.empty, .full.empty { visibility: hidden; }
}

/* ---- phone layout (phoneEl() in app.js): the view link and the exported file on a phone held upright.
   Every rule starts with ".phone", which is how the export finds them. ---- */
.phone { position: fixed; inset: 0; z-index: 15; overflow-y: auto; background: var(--bg); color: var(--ink); font: 400 17px/1.5 system-ui, sans-serif; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.phone .phNav { position: sticky; top: 0; z-index: 3; display: flex; gap: 6px; padding: 8px 12px; overflow-x: auto; scrollbar-width: none; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-family: var(--body), system-ui, sans-serif; }
.phone .phNav a { flex: none; padding: 4px 12px; border: 1.5px solid color-mix(in srgb, var(--ink) 40%, transparent); border-radius: 999px; color: inherit; text-decoration: none; font-size: 13px; line-height: 20px; white-space: nowrap; }
.phone .phNav a:first-child { border-color: var(--accent); color: var(--accent); }
.phone .phSec { position: relative; overflow: hidden; padding: 34px 22px 42px; scroll-margin-top: 46px; background-color: var(--bg); background-image: var(--grad, none); color: var(--ink); font-family: var(--body), system-ui, sans-serif; font-weight: var(--bweight); letter-spacing: var(--track); word-spacing: var(--word); }
.phone .phSec > * { position: relative; }
.phone .phSec > .phBg, .phone .phSec > .phDim { position: absolute; inset: 0; }
.phone .phBg { background: center/cover no-repeat; }
.phone .phDim { background-color: var(--bg); background-image: var(--grad, none); }
.phone .phKicker { margin-bottom: 6px; font-family: var(--kfont), system-ui, sans-serif; font-size: 12px; line-height: 1.3; letter-spacing: var(--ktrack); word-spacing: var(--kword); text-transform: uppercase; color: var(--accent); }
.phone h1, .phone h2 { margin: 0 0 16px; font: var(--hweight) calc(40px * var(--hscale))/1.05 var(--head), Impact, sans-serif; letter-spacing: var(--htrack); word-spacing: var(--hword); text-transform: var(--hcase); overflow-wrap: anywhere; }
.phone .phCover { min-height: 86vh; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.phone .phCover h1 { font-size: calc(60px * var(--cscale)); margin-bottom: 10px; text-shadow: var(--hshadow, 0 2px 18px rgba(0,0,0,.5)); }
.phone .phSub { font-family: var(--kfont), system-ui, sans-serif; font-size: 17px; letter-spacing: var(--ktrack); word-spacing: var(--kword); text-transform: uppercase; color: var(--accent); }
.phone .phMeta { margin-top: 28px; font-size: 12px; opacity: .6; }
.phone .phChips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.phone .phChips a { padding: 4px 16px; border: 2px solid var(--accent); border-radius: 999px; color: inherit; text-decoration: none; font: var(--hweight) 20px/1.3 var(--head), Impact, sans-serif; letter-spacing: var(--htrack); text-transform: var(--hcase); }
.phone .phPics { display: flex; gap: 10px; margin: 0 -22px 18px; padding: 0 22px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.phone .phPic { flex: 0 0 100%; aspect-ratio: 4 / 3; border-radius: 6px; background: center/cover no-repeat; scroll-snap-align: center; }
.phone .phPics.many .phPic { flex-basis: 86%; }
.phone .phVideo { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; margin-bottom: 18px; border-radius: 6px; background: #000 center/cover no-repeat; }
.phone .phVideo i { position: relative; width: 64px; height: 64px; border-radius: 50%; background: var(--accent); box-shadow: 0 4px 20px rgba(0,0,0,.5); }
.phone .phVideo i::after { content: ""; position: absolute; left: 25px; top: 18px; border: 14px solid transparent; border-left: 22px solid var(--bg); border-right: 0; }
.phone .phBody { line-height: 1.5; text-align: left; text-shadow: var(--bshadow, none); }
.phone h2, .phone .phKicker, .phone .phSub { text-shadow: var(--hshadow, none); }
.phone .phBody p { margin: 0 0 .9em; }
.phone .phBody p.li { padding-left: 1.1em; text-indent: -1.1em; margin-bottom: .4em; }
.phone .phBody p.li::before { content: "•"; display: inline-block; width: 1.1em; text-indent: 0; color: var(--accent); }
.phone .phBody p.sub { margin: 1.2em 0 .4em; font: var(--hweight) 1.6em/1.1 var(--head), Impact, sans-serif; letter-spacing: var(--htrack); text-transform: var(--hcase); }
.phone .phBody p.sub.s2 { font-size: 1.3em; }
.phone .phBody p.sub.s3 { font-size: 1.1em; }
.phone .phBody.quote { text-align: center; padding: 18px 0; }
.phone .phBody.quote p { font: var(--qweight, 400) 27px/1.25 var(--qfont, var(--head)), system-ui, sans-serif; }
.phone .phLinks { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.phone .phLink, .phone .phMore summary { display: block; padding: 10px 14px; border: 1.5px solid var(--accent); border-radius: 8px; color: inherit; text-decoration: none; font-weight: 600; cursor: pointer; }
.phone .phMore[open] summary { border-radius: 8px 8px 0 0; }
.phone .phMore > div { padding: 12px 14px 4px; border: 1.5px solid var(--accent); border-top: 0; border-radius: 0 0 8px 8px; font-size: 15px; }
.phone .phMore img { display: block; max-width: 100%; margin-bottom: 10px; border-radius: 4px; }
.phone .phMore p { margin: 0 0 .8em; }
.phone .phMore pre { margin: 0 0 .8em; white-space: pre-wrap; font: 13px/1.45 ui-monospace, Consolas, monospace; }
.phone s { opacity: .55; }
/* the view link's page while the phone layout is shown */
body.phoneOn main, body.phoneOn .viewBtn { display: none; }