/* JOV Office's windows on its landing page (the stage and chrome are in live.css). Canvas em. */

/* Docs: a lease, a bold phrase, a new line, a table from the table picker. */
.d-page { position: relative; min-height: 46em; }
.lv-page .d-h { margin: 0; font: 400 2.6em/1.3 Georgia, serif; }
.lv-page .d-sub { color: var(--w-mut); font-style: italic; }
.d-phrase { position: relative; z-index: 0; }
.d-phrase::before { content: ""; position: absolute; inset: -0.05em -0.1em; z-index: -1; background: var(--w-sel); transform: scaleX(0); transform-origin: left; transition: transform 300ms ease-out; }
.d-sel .d-phrase::before { transform: none; }
.d-bold .d-phrase { font-weight: 700; }
.d-bold .d-b, .d-pick .d-tb { background: var(--w-sel); color: var(--w-blue); }
.lv-page .d-new { min-height: 1.55em; }
.d-tbl { font-size: 1.2em; }
.d-tbl > div { display: grid; grid-template-columns: 1fr 1fr 1fr; border: 1px solid #8e8e95; border-top: 0; opacity: 0; transform: translateY(-0.4em); transition: opacity var(--m-base), transform var(--m-base) var(--ease-out); }
.d-tbl > div:first-child { border-top: 1px solid #8e8e95; background: rgb(66 99 235 / 0.1); }
.d-tbl > div > * { padding: 0.3em 0.6em; border-right: 1px solid #8e8e95; }
.d-tbl > div > :last-child { border-right: 0; }
.d-rows .d-tbl > div { opacity: 1; transform: none; }
.d-tbl > div:nth-child(2) { transition-delay: 60ms; } .d-tbl > div:nth-child(3) { transition-delay: 120ms; } .d-tbl > div:nth-child(4) { transition-delay: 180ms; }
.d-picker { position: absolute; left: 21em; top: -2.2em; z-index: 6; display: grid; grid-template-columns: repeat(6, 1.6em); gap: 0.3em; padding: 0.9em; border-radius: 0.8em;
  background: var(--w-bg); box-shadow: 0 0 0 1px var(--w-line), 0 1.2em 2.8em -0.8em rgb(0 0 0 / 0.3); opacity: 0; transform: scale(0.94); transform-origin: top left; transition: opacity var(--m-fast), transform var(--m-fast); }
.d-picker i { height: 1.6em; border: 1px solid var(--w-line); border-radius: 0.2em; }
.d-picker small { grid-column: 1 / -1; margin-top: 0.3em; color: var(--w-mut); font-size: 1.05em; text-align: center; }
.d-pick .d-picker { opacity: 1; transform: none; }
.d-g1 .d-picker i:is(:nth-child(6n+1), :nth-child(6n+2)):nth-child(-n+12),
.d-g2 .d-picker i:is(:nth-child(6n+1), :nth-child(6n+2), :nth-child(6n+3)) { border-color: var(--w-blue); background: var(--w-sel); }

/* Sheets: a budget, AutoSum, a chart, and one number changed. */
.lv-fx { display: flex; flex: none; align-items: center; height: 2.4em; border-bottom: 1px solid var(--w-line); font-size: 1.2em; }
.nb { display: flex; align-items: center; width: 6em; height: 100%; padding-left: 0.8em; border-right: 1px solid var(--w-line); }
.nb::before { content: "B2"; }
.x-a7 .nb::before { content: "A7"; } .x-b7 .nb::before { content: "B7"; } .x-fill .nb::before { content: "B7:D7"; } .x-d6s .nb::before { content: "D6"; }
.lv-fx i { padding: 0 0.8em; color: var(--w-mut); font: italic 1em Georgia, serif; }
.lv-sheet { background: var(--w-page); }
.grid { --rh: 2em; --ca: 3.4em; --cb: 9em; --cn: 6.6em; --cd: 7.6em; position: absolute; inset: 0; font-size: 1.2em; }
.gh, .gr { display: grid; grid-template-columns: var(--ca) var(--cb) var(--cn) var(--cn) var(--cd) 6em; }
.gh > *, .gr > * { height: var(--rh); padding: 0 0.5em; overflow: hidden; border: solid var(--w-grid); border-width: 0 1px 1px 0; line-height: var(--rh); white-space: nowrap; font-style: normal; }
.gh { background: var(--w-bar); color: var(--w-mut); text-align: center; }
.gh b { font-weight: 500; }
.gr > i { background: var(--w-bar); color: var(--w-mut); text-align: center; }
.gr > :nth-child(n+3) { text-align: right; font-variant-numeric: tabular-nums; }
.gr.r { opacity: 0; transform: translateX(-0.6em); transition: opacity var(--m-base), transform var(--m-base) var(--ease-out); }
.x-rows .gr.r { opacity: 1; transform: none; }
.gr.r:nth-child(4) { transition-delay: 60ms; } .gr.r:nth-child(5) { transition-delay: 120ms; } .gr.r:nth-child(6) { transition-delay: 180ms; } .gr.r:nth-child(7) { transition-delay: 240ms; }
.tot [data-count] { opacity: 0; }
.x-calc .tot [data-count] { opacity: 1; }
.fml, .v-new, .x-edit .v-old { display: none; }
.x-ants:not(.x-calc) .fml, .x-edit .v-new { display: inline; }
.sel, .ants { position: absolute; left: var(--ca); top: calc(var(--rh) * 7); width: var(--cb); height: var(--rh); opacity: 0; pointer-events: none; }
.sel { border: 2px solid var(--w-blue); }
.x-a7 .sel, .x-b7 .sel, .x-d6s .sel { opacity: 1; }
.x-b7 .sel { left: calc(var(--ca) + var(--cb)); width: var(--cn); }
.x-fill .sel { left: calc(var(--ca) + var(--cb)); width: calc(var(--cn) * 2 + var(--cd)); background: rgb(47 111 222 / 0.08); }
.x-d6s .sel { left: calc(var(--ca) + var(--cb) + var(--cn) * 2); top: calc(var(--rh) * 6); width: var(--cd); background: none; }
.ants { left: calc(var(--ca) + var(--cb)); top: calc(var(--rh) * 2); width: var(--cn); height: calc(var(--rh) * 5); background: linear-gradient(90deg, var(--w-blue) 50%, transparent 0) 0 0 / 0.6em 2px repeat-x, linear-gradient(90deg, var(--w-blue) 50%, transparent 0) 0 100% / 0.6em 2px repeat-x,
  linear-gradient(var(--w-blue) 50%, transparent 0) 0 0 / 2px 0.6em repeat-y, linear-gradient(var(--w-blue) 50%, transparent 0) 100% 0 / 2px 0.6em repeat-y; }
.x-ants .ants { opacity: 1; animation: lv-ants 500ms linear infinite; }
@keyframes lv-ants { to { background-position: 0.6em 0, -0.6em 100%, 0 -0.6em, 100% 0.6em; } }
.chart { position: absolute; left: 49em; top: 2em; width: 32em; height: 30em; padding: 1.4em 1.6em; border: 1px solid var(--w-line); border-radius: 0.4em; background: var(--w-page);
  box-shadow: 0 0.6em 2em -1em rgb(0 0 0 / 0.25); opacity: 0; transform: scale(0.95); transform-origin: top left; transition: opacity var(--m-base), transform var(--m-base) var(--ease-out); }
.x-chart .chart { opacity: 1; transform: none; }
.chart > b { display: block; font-size: 1.5em; text-align: center; }
.plot { display: flex; gap: 2.4em; height: 18em; margin: 1.6em 0 0 3em; border-bottom: 1px solid var(--w-mut); background: repeating-linear-gradient(transparent 0 calc(25% - 1px), var(--w-grid) calc(25% - 1px) 25%); }
.plot > div { position: relative; flex: 1; }
.plot i { position: absolute; left: 12%; right: 12%; bottom: 0; background: #4472c4; transform: scaleY(0); transform-origin: bottom; transition: transform var(--m-slow) var(--ease-out); }
.c-b1 { height: 32%; } .c-b2 { height: 35%; } .c-b3 { height: 86%; }
.x-chart .plot i { transform: none; }
.x-chart:not(.x-re) .plot .c-b3 { transform: scaleY(0.849); }
.plot > div:nth-child(2) i { transition-delay: 60ms; } .plot > div:nth-child(3) i { transition-delay: 120ms; }
.plot small, .plot em { position: absolute; left: -1em; right: -1em; top: 100%; margin-top: 0.4em; color: var(--w-mut); font-size: 1.1em; font-style: normal; text-align: center; }
.plot em { margin-top: 1.8em; color: var(--w-ink); font-variant-numeric: tabular-nums; }
.plot { position: relative; }
.plot::before, .plot::after { content: "66,000"; position: absolute; left: -3.6em; top: -0.6em; color: var(--w-mut); font-size: 1em; }
.plot::after { content: "56,000"; top: auto; bottom: -0.6em; }
.x-d6s .fx-v { display: none; }
.x-d6s .lv-fx::after { content: "8400"; }
.lv-sb .tab { padding: 0.1em 0.8em; border-radius: 0.3em; background: var(--w-hit); color: var(--w-ink); }

/* Slides: a title typed, a Push transition, a slide built, two slides swapped, then Play. */
.k-menu, .c-saveas { position: absolute; left: 33em; top: 3.8em; z-index: 6; display: grid; padding: 0.4em; border-radius: 0.6em; background: var(--w-bg); box-shadow: 0 0 0 1px var(--w-line), 0 1.2em 2.8em -0.8em rgb(0 0 0 / 0.35);
  opacity: 0; transform: translateY(-0.4em); transition: opacity var(--m-fast), transform var(--m-fast); }
.k-menu span, .c-saveas span { padding: 0.3em 1.1em; border-radius: 0.3em; font-size: 1.2em; }
.k-tr .k-menu { opacity: 1; transform: none; }
.k-tr .k-trb, .k-pushd .k-push { background: var(--w-sel); color: var(--w-blue); }
.k-play { margin-left: auto; background: #e0602a; color: #fff; }
.k-body { display: flex; }
.rail { position: relative; display: grid; align-content: start; gap: 1.2em; width: 13em; padding: 1.4em 1.2em; border-right: 1px solid var(--w-line); background: var(--w-bar); }
.th { position: relative; height: 5.8em; transition: transform var(--m-slow) var(--ease-inout); }
.th small { position: absolute; left: 0; top: 0; color: var(--w-mut); font-size: 1.1em; }
.th1 small::before { content: "1"; } .th2 small::before { content: "2"; } .th3 small::before { content: "3"; } .th4 small::before { content: "4"; }
.k-swap .th3 { transform: translateY(7em); } .k-swap .th4 { transform: translateY(-7em); }
.k-swap .th3 small::before { content: "4"; } .k-swap .th4 small::before { content: "3"; }
.th i { display: block; height: 100%; margin-left: 1.4em; border-radius: 0.2em; box-shadow: 0 0 0 1px var(--w-line); transition: box-shadow var(--m-base);
  background: linear-gradient(#10213d 0 0) 0.8em 0.8em / 50% 0.4em no-repeat, linear-gradient(#9aa3b5 0 0) 0.8em 1.8em / 38% 0.3em no-repeat, #fff; }
.th3 i { background: linear-gradient(#10213d 0 0) 0.8em 0.8em / 40% 0.4em no-repeat, linear-gradient(#e0602a 0 0) 70% 75% / 12% 45% no-repeat, linear-gradient(#10213d 0 0) 50% 75% / 12% 30% no-repeat, #fff; }
.th4 i { background: linear-gradient(#fff 0 0) 50% 45% / 50% 0.5em no-repeat, #26314a; }
.th1 i { background: linear-gradient(#fff 0 0) 0.8em 2.2em / 60% 0.5em no-repeat, linear-gradient(#f6a96b 0 0) 0.8em 3.2em / 30% 0.3em no-repeat, #10213d; box-shadow: 0 0 0 0.2em var(--w-blue); }
.k-pushd .th1 i { box-shadow: 0 0 0 1px var(--w-line); } .k-pushd .th2 i { box-shadow: 0 0 0 0.2em var(--w-blue); }
.k-stage { position: relative; z-index: 2; display: grid; flex: 1; place-items: center; }
.slide { position: relative; width: 56em; height: 31.5em; overflow: hidden; background: #fff; box-shadow: 0 0.2em 1em rgb(0 0 0 / 0.18); transition: transform var(--m-slow) var(--ease-inout); }
.s1, .s2 { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 4em 4.8em; transition: transform 600ms var(--ease-inout); }
.s1 { justify-content: center; background: #10213d; color: #fff; }
.s1 small { color: #f6a96b; font-size: 1.2em; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.s1 b { min-height: 2.1em; margin: 0.2em 0 0.3em; font: 700 4em/1.05 var(--display); letter-spacing: -0.02em; }
.s1 span { color: #b9c3d9; font-size: 1.6em; }
.s2 { background: #fff; color: #10213d; transform: translateX(100%); }
.k-pushd .s1 { transform: translateX(-100%); } .k-pushd .s2 { transform: none; }
.s2 b { font: 700 2.6em/1.15 var(--display); }
.s2 ul { margin: 1em 0 0; padding-left: 1.2em; }
.s2 li { font-size: 1.6em; line-height: 1.9; opacity: 0; transform: translateX(-0.6em); transition: opacity var(--m-base), transform var(--m-base); }
.s2 li::marker { color: #e0602a; }
.k-b .s2 li { opacity: 1; transform: none; }
.s2 li:nth-child(2) { transition-delay: 200ms; } .s2 li:nth-child(3) { transition-delay: 400ms; }
.mini { position: absolute; right: 4.8em; bottom: 3.6em; display: flex; align-items: flex-end; gap: 0.8em; height: 10em; }
.mini i { width: 2.2em; height: 40%; border-radius: 0.3em 0.3em 0 0; background: #10213d; transform: scaleY(0); transform-origin: bottom; transition: transform var(--m-slow) var(--ease-out) 300ms; }
.mini i:nth-child(2) { height: 58%; } .mini i:nth-child(3) { height: 72%; } .mini i:nth-child(4) { height: 100%; background: #e0602a; }
.k-b .mini i { transform: none; }
.p-slides::after { content: ""; position: absolute; inset: 0; z-index: 1; background: #000; opacity: 0; pointer-events: none; transition: opacity var(--m-base); }
.k-show .p-slides::after { opacity: 1; }
.k-show .slide { transform: translate(-6.5em, -3.1em) scale(1.45); box-shadow: none; }
.k-n::after { content: "1"; } .k-pushd .k-n::after { content: "2"; }

/* PDF: a sentence highlighted, a note, a name and a signature. */
.f-page { position: relative; min-height: 46em; }
.f-page p { font-family: Georgia, serif; }
.lv-page .f-h { font: 400 2.4em/1.3 Georgia, serif; }
.f-line { background: linear-gradient(#ffe066, #ffe066) 0 0 / 0% 100% no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 700ms var(--ease-inout); }
.f-hl .f-line { background-size: 100% 100%; }
@media (prefers-color-scheme: dark) { .f-hl .f-line { color: #1d1d1f; } }
.f-hlt .f-hlb, .f-sign .f-sb { background: var(--w-sel); color: var(--w-blue); }
.f-sticky { position: absolute; right: -10.4em; top: 9.4em; width: 8em; padding: 0.6em 0.8em; background: #fff1a6; color: #4a3b00; font: 600 1.15em/1.35 var(--font); box-shadow: 0 0.5em 1.2em -0.5em rgb(0 0 0 / 0.4);
  opacity: 0; transform: scale(0.6) rotate(-6deg); transform-origin: top left; transition: opacity var(--m-fast), transform var(--m-base) var(--ease-pop); }
.f-note .f-sticky { opacity: 1; transform: rotate(-1.5deg); }
.f-field { display: grid; gap: 0.2em; margin: 1.8em 0 0; width: 26em; }
.f-field small { color: var(--w-mut); font-size: 1.1em; }
.f-field > span { min-height: 1.8em; border-bottom: 1px solid var(--w-ink); font-size: 1.5em; }
.f-in .f-field > span { box-shadow: 0 0.15em 0 var(--w-blue); }
.lv-cv .f-sig { width: 22em; height: 6em; border-bottom: 1px solid var(--w-ink); }
.f-sig path { fill: none; stroke: #1c3a8a; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1100ms var(--ease-inout); }
.f-sign .f-sig path { stroke-dashoffset: 0; }

/* The Track Changes and CSV windows beside the rows. */
.t-tg { display: inline-flex; align-items: center; gap: 0.5em; margin-right: 0.4em; padding: 0.3em 0.8em 0.3em 0.4em; border-radius: 1em; background: var(--w-sel); color: var(--w-blue); font-size: 1.15em; font-weight: 600; }
.t-tg::before { content: ""; width: 2em; height: 1.1em; border-radius: 1em; background: radial-gradient(circle at 1.45em 50%, #fff 0.38em, transparent 0.42em), var(--w-blue); }
.t-acc .t-acb { background: var(--w-sel); color: var(--w-blue); }
.t-page { width: 32em; margin: 1.6em 0 0 2em; padding: 2.6em 2.8em; }
.lv-page .t-h { color: #4a3fd4; font: 700 1.8em/1.3 var(--font); }
.t-dim { color: var(--w-mut); }
.t-del .t-old { color: #d6336c; text-decoration: line-through; }
.t-ins { color: #2b6cd8; text-decoration: underline; }
.t-acc .t-old { display: none; }
.t-acc .t-ins { color: inherit; text-decoration: none; }
.t-comment { position: absolute; right: 0.8em; top: 4em; width: 12.6em; padding: 0.8em 1em; border-left: 0.3em solid #f0a500; border-radius: 0.5em; background: var(--w-page);
  box-shadow: 0 0.6em 1.6em -0.8em rgb(0 0 0 / 0.35); font-size: 1.2em; opacity: 0; transform: translateX(1em); transition: opacity var(--m-base), transform var(--m-base) var(--ease-out); }
.t-comment b { display: block; }
.t-cmt .t-comment { opacity: 1; transform: none; }
.t-acc .t-comment { opacity: 0.5; }
.c-body { background: var(--w-page); font-size: 1.35em; }
.ch, .cr, .ctot { display: grid; grid-template-columns: 5.4em 1fr 4.6em 4em; align-items: center; height: 2.2em; padding: 0 0.9em; border-bottom: 1px solid var(--w-grid); }
.ch { background: var(--w-bar); color: var(--w-mut); }
.ch b { font-weight: 600; }
.ch > :last-child, .cr > :last-child, .ctot > :last-child { text-align: right; font-variant-numeric: tabular-nums; }
.cr { position: relative; background: var(--w-page); transition: transform 700ms var(--ease-inout); }
.cr em { font-style: normal; border-radius: 0.2em; transition: background-color var(--m-base), color var(--m-base); }
.c-zero .cr em { background: var(--w-sel); color: var(--w-blue); }
.c-sort .to3 { transform: translateY(-4.4em); } .c-sort .to4 { transform: translateY(-2.2em); } .c-sort .to8 { transform: translateY(6.6em); }
.c-sort .c-hd { color: var(--w-blue); }
.c-sort .c-hd::after { content: " ▾"; }
.ctot { font-weight: 700; opacity: 0; transition: opacity var(--m-base); }
.c-tot .ctot { opacity: 1; }
.c-sv { margin-left: auto; border: 1px solid var(--w-line); }
.c-saveas { left: auto; right: 1.2em; }
.c-menu .c-saveas { opacity: 1; transform: none; }
.c-saveas .is-hit { background: var(--w-blue); color: #fff; transform: none; }

@media (max-width: 639px) {
  .lv-office .lv-tabs { display: none; }
  .lv-page { width: 36em; margin-top: 1em; padding: 2.4em 2.6em; }
  .d-picker { left: 14em; top: -0.6em; }
  /* The window is short: documents scroll to the table and the signature, the sheet to its chart. */
  .d-rows .d-page { transform: translateY(-12em); }
  .f-down .f-page { transform: translateY(-11em); }
  .grid { --rh: 1.8em; --ca: 2.4em; --cb: 7em; --cn: 5.4em; --cd: 6.2em; font-size: 1.1em; transition: transform var(--m-base) var(--ease-inout); }
  .x-chart .grid { transform: translateY(-4em); }
  .x-chart .chart { transition-delay: 200ms; }
  .chart { left: 1em; top: 12.2em; width: 36.4em; height: 12.4em; padding: 0.6em 1em; }
  .chart > b { font-size: 1.1em; }
  .plot { height: 5em; margin-top: 0.4em; }
  .plot small { margin-top: 0.2em; }
  .plot em { margin-top: 1.4em; }
  .rail { display: none; }
  .slide { position: absolute; left: 50%; top: 50%; margin: -15.75em 0 0 -28em; transform: scale(0.64); }
  .k-show .slide { transform: translateY(-2em) scale(0.68); }
  .k-menu { left: auto; right: 9em; }
  .f-sticky { right: 0.6em; top: 18.4em; }
  .f-field { width: 18em; }
  .f-sf { width: 22em; }
  .t-page { width: 36em; margin: 1.2em 2em 0; padding: 2em 2.4em; }
  .t-comment { left: 6em; right: auto; top: 19.6em; width: 24em; }
}

/* Beside the PowerPoint row: New Slide, a title, a shape resized, the thumbnail dragged up, Play. */
.sl-body { display: flex; }
.sl-rail { position: relative; flex: none; width: 10em; border-right: 1px solid var(--w-line); background: var(--w-bar); }
.st { position: absolute; left: 0.9em; right: 0.9em; height: 4.4em; transition: transform var(--m-slow) var(--ease-inout), opacity var(--m-base); }
.st1 { top: 1em; } .st2 { top: 6.2em; } .st3 { top: 11.4em; } .st4 { top: 16.6em; }
.st small { position: absolute; left: 0; top: 0; color: var(--w-mut); font-size: 1.05em; }
.st1 small::before { content: "1"; } .st2 small::before { content: "2"; } .st3 small::before { content: "3"; } .st4 small::before { content: "4"; }
.q-move .st2 small::before { content: "3"; } .q-move .st3 small::before { content: "4"; } .q-move .st4 small::before { content: "2"; }
.st i { display: block; height: 100%; margin-left: 1.3em; border-radius: 0.2em; box-shadow: 0 0 0 1px var(--w-line); transition: box-shadow var(--m-base);
  background: linear-gradient(#10213d 0 0) 0.6em 0.6em / 50% 0.35em no-repeat, linear-gradient(#9aa3b5 0 0) 0.6em 1.4em / 60% 0.25em no-repeat, linear-gradient(#9aa3b5 0 0) 0.6em 2em / 45% 0.25em no-repeat, #fff; }
.st1 i { background: linear-gradient(#fff 0 0) 0.6em 1.6em / 60% 0.4em no-repeat, linear-gradient(#f6a96b 0 0) 0.6em 2.4em / 30% 0.25em no-repeat, #10213d; }
.st3 i { background: linear-gradient(#10213d 0 0) 0.6em 0.6em / 40% 0.35em no-repeat, linear-gradient(#e0602a 0 0) 70% 80% / 12% 45% no-repeat, linear-gradient(#10213d 0 0) 50% 80% / 12% 30% no-repeat, #fff; }
.st4 i { background: linear-gradient(#10213d 0 0) 0.6em 0.6em / 50% 0.35em no-repeat, linear-gradient(#e0602a 0 0) 0.6em 1.5em / 45% 0.9em no-repeat, #fff; }
.st4 { opacity: 0; transform: scale(0.7); }
.q-add .st4 { opacity: 1; transform: none; }
.q-lift .st4 { transform: scale(1.06); z-index: 2; }
.q-lift .st4 i { box-shadow: 0 0 0 0.2em var(--w-blue), 0 0.8em 1.6em -0.6em rgb(0 0 0 / 0.5); }
.q-move .st4 { transform: translateY(-10.4em); }
.q-move.q-lift .st4 { transform: translateY(-10.4em) scale(1.06); }
.q-move .st2, .q-move .st3 { transform: translateY(5.2em); }
.lv-cv:not(.q-add) .st1 i, .q-add .st4 i { box-shadow: 0 0 0 0.2em var(--w-blue); }
.sl-n::after { content: "1"; } .q-add .sl-n::after { content: "4"; } .q-move .sl-n::after { content: "2"; }
.sl-of::after { content: "3"; } .q-add .sl-of::after { content: "4"; }
.sl-play { margin-left: auto; background: #e0602a; color: #fff; }
.sl-stage { position: relative; z-index: 2; display: grid; flex: 1; place-items: center; }
.sl-slide { position: relative; width: 38em; height: 21.4em; overflow: hidden; background: #fff; box-shadow: 0 0.2em 1em rgb(0 0 0 / 0.18); transition: transform var(--m-slow) var(--ease-inout); }
.sv-a, .sv-n { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 2.4em 3em; }
.sv-a { justify-content: center; background: #10213d; color: #fff; }
.sv-a small { color: #f6a96b; font-size: 1em; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.sv-a b { margin: 0.2em 0 0.3em; font: 700 3em/1.05 var(--display); }
.sv-a span { color: #b9c3d9; font-size: 1.3em; }
.sv-n { background: #fff; color: #10213d; opacity: 0; transition: opacity var(--m-base); }
.q-add .sv-n { opacity: 1; }
.sl-t { display: block; min-height: 1.2em; font: 700 2.4em/1.2 var(--display); }
.sl-sh { position: absolute; left: 3em; top: 7.6em; display: flex; align-items: center; width: 20em; height: 4em; opacity: 0; transform: scale(0.85); transform-origin: left center;
  transition: opacity var(--m-fast), transform var(--m-base) var(--ease-pop); }
.q-shape .sl-sh { opacity: 1; transform: none; }
.sl-sh i { position: absolute; inset: 0; border-radius: 0.8em; background: #e0602a; transform: scaleX(0.6); transform-origin: left; transition: transform var(--m-slow) var(--ease-out); }
.sl-sh::after { content: ""; position: absolute; inset: -0.35em; border: 1px dashed var(--w-blue); border-radius: 1em; opacity: 0; transform: scaleX(0.62); transform-origin: left; transition: transform var(--m-slow) var(--ease-out), opacity var(--m-fast); }
.q-shape:not(.s-saved) .sl-sh::after { opacity: 1; }
.q-size .sl-sh i, .q-size .sl-sh::after { transform: none; }
.sl-sh span { position: relative; padding-left: 0.9em; color: #fff; font: 600 1.5em/1 var(--font); opacity: 0; transition: opacity var(--m-base) 250ms; }
.q-size .sl-sh span { opacity: 1; }
.sv-n ul { position: absolute; left: 2.2em; top: 9.6em; margin: 0; padding-left: 1.2em; font-size: 1.35em; line-height: 1.8; }
.sv-n li::marker { color: #e0602a; }
.p-deck::after { content: ""; position: absolute; inset: 0; z-index: 1; background: #000; opacity: 0; pointer-events: none; transition: opacity var(--m-base); }
.q-show .p-deck::after { opacity: 1; }
/* Play: the slide is centred on the black window (over the ribbon and status bar). */
.q-show .sl-body { overflow: visible; }
.q-show .sl-slide { transform: translate(-5em, -3.1em) scale(1.38); box-shadow: none; }
.lv-cv.q-show.q-shape .sl-sh::after { opacity: 0; transition: none; }
.lv-cv.q-show .lv-ptr { opacity: 0; }
.q-show .sv-n { animation: q-fade 800ms var(--ease-out); }
.q-show .sv-a { opacity: 0; }
@keyframes q-fade { from { opacity: 0; } }

/* Beside the PDF row: Combine PDFs, a page dragged up, a sideways page turned upright, Save. */
.gm-body { display: flex; }
.gm-strip { position: relative; flex: none; width: 9em; border-right: 1px solid var(--w-line); background: var(--w-bar); }
.pg { position: absolute; left: 2.8em; width: 3.6em; height: 4.6em; opacity: 0; transform: translateX(-1.5em); transition: transform var(--m-slow) var(--ease-inout), opacity var(--m-base); }
.pa1 { top: 0.8em; } .pa2 { top: 6.2em; } .pb1 { top: 11.6em; } .pb2 { top: 17em; } .pb3 { top: 22.4em; }
.pg small { position: absolute; left: -1.6em; top: 0; color: var(--w-mut); font-size: 1.05em; }
.pa1 small::before { content: "1"; } .pa2 small::before { content: "2"; } .pb1 small::before { content: "3"; } .pb2 small::before { content: "4"; } .pb3 small::before { content: "5"; }
.g-move .pa2 small::before { content: "3"; } .g-move .pb1 small::before { content: "2"; }
.pg i { position: absolute; inset: 0; border-radius: 0.15em; box-shadow: 0 0 0 1px var(--w-line); transition: transform var(--m-slow) var(--ease-inout), box-shadow var(--m-base); }
.pg-a { background: linear-gradient(#d93a3a 0 0) 0.4em 0.5em / 60% 0.35em no-repeat, repeating-linear-gradient(transparent 0 0.45em, #c9c9cf 0.45em 0.6em) 0.4em 1.4em / 70% 2.4em no-repeat, #fff; }
.pg-b { background: linear-gradient(#1f9d55 0 0) 0.4em 0.5em / 50% 0.35em no-repeat, repeating-linear-gradient(transparent 0 0.5em, #b7dcc5 0.5em 0.62em) 0.4em 1.3em / 75% 2.6em no-repeat, #fff; }
.pb3 i { transform: rotate(-90deg) scale(0.78); }
.g-rot .pb3 i { transform: none; }
.g-comb .pg { opacity: 1; transform: none; }
.pa2 { transition-delay: 60ms; } .pb1 { transition-delay: 120ms; } .pb2 { transition-delay: 180ms; } .pb3 { transition-delay: 240ms; }
.g-lift .pg, .g-move .pg { transition-delay: 0ms; }
.g-lift .pb1 { transform: scale(1.1); z-index: 2; }
.g-move .pb1 { transform: translateY(-5.4em); }
.g-move.g-lift .pb1 { transform: translateY(-5.4em) scale(1.1); }
.g-move .pa2 { transform: translateY(5.4em); }
.g-lift .pb1 i { box-shadow: 0 0 0 0.2em var(--w-blue), 0 0.8em 1.6em -0.6em rgb(0 0 0 / 0.5); }
.g-comb:not(.g-pick) .pa1 i, .g-pick .pb3 i { box-shadow: 0 0 0 0.2em var(--w-blue); }
.gm-view { position: relative; display: grid; flex: 1; place-items: center; }
.gv { position: absolute; left: 50%; top: 50%; display: grid; align-content: start; gap: 0.9em; width: 18em; height: 23.5em; margin: -11.75em 0 0 -9em; padding: 2em 1.8em; background: #fff; color: #1d1d1f;
  box-shadow: 0 0.2em 1em rgb(0 0 0 / 0.18); opacity: 0; transition: opacity var(--m-base), transform var(--m-slow) var(--ease-inout); }
.gv b { font: 600 1.4em/1.2 Georgia, serif; }
.gv i { height: 0.5em; border-radius: 0.2em; background: #d9d9de; }
.gv i:nth-child(odd) { width: 80%; }
.gv-a b { color: #b42318; }
.gv-b > div { display: grid; gap: 0.9em; }
.gv-b i { height: 1.6em; border-radius: 0; background: repeating-linear-gradient(90deg, transparent 0 3.6em, #c9c9cf 3.6em 3.7em), linear-gradient(#e9f7ef, #e9f7ef); }
.gv-b b { color: #0f6b3a; }
.g-comb:not(.g-pick) .gv-a, .g-pick .gv-b { opacity: 1; }
.gv-b { transform: rotate(-90deg) scale(0.74); }
.g-rot .gv-b { transform: none; }
.gr-rot { border: 1px solid var(--w-line); }
.g-rot .gr-rot { background: var(--w-sel); color: var(--w-blue); }
.gc { position: absolute; left: 50%; top: 1.4em; z-index: 6; display: grid; gap: 0.6em; width: 30em; padding: 1.2em 1.4em; border-radius: 0.9em; background: var(--w-bg);
  box-shadow: 0 0 0 1px var(--w-line), 0 1.4em 3em -1em rgb(0 0 0 / 0.4); opacity: 0; transform: translate(-50%, -1em); transition: opacity var(--m-fast), transform var(--m-base) var(--ease-out); }
.g-sheet .gc { opacity: 1; transform: translate(-50%, 0); }
.gc > b { font-size: 1.4em; }
.gc-f { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.8em; padding: 0.5em 0.6em; border-radius: 0.5em; background: var(--w-bar); font-size: 1.2em; }
.gc-f .lv-ficon { font-size: 0.36em; }
.gc-f small { color: var(--w-mut); }
.gc-foot { display: flex; justify-content: flex-end; gap: 0.5em; margin-top: 0.3em; }
.gc-foot .lv-btn { border: 1px solid var(--w-line); }
.gc-foot .gc-go { border-color: transparent; background: var(--w-blue); color: #fff; }
.p-merge .lv-sb > :first-child { opacity: 0; transition: opacity var(--m-base); }
.g-comb .p-merge .lv-sb > :first-child { opacity: 1; }

@media (max-width: 639px) {
  .sl-rail { width: 8em; }
  .st { left: 0.6em; right: 0.6em; }
  .sl-slide { font-size: 0.78em; }
  .q-show .sl-slide { transform: translate(-6.3em, -4.8em) scale(1.3); }
  .gm-strip { width: 7.6em; }
  .pg { left: 2.4em; }
  .gv { font-size: 0.82em; }
  .gc { width: 34em; }
}