/* Okay Paper: real pages (Letter, 8.5 × 11) on a desk, the history of versions on the right, editing
   right on the page. Pages scale with their width (container units), so a layout made at one width
   holds at every width and prints one sheet per page. */

.has-paper .s-main { max-width: 1240px; }
/* The paper's layout follows the room it has (the sidebar may take some), not the window */
.s-main { container: page / inline-size; }
/* With a paper open the big logo and box step aside (New job in the sidebar brings them back); the job,
   the panda's reply and the reply box sit at the top of the right column, above questions and history */
.has-paper .s-hero { display: none; }
.has-paper .s-answer { margin-top: 8px; }
.s-jobcard { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; padding: 16px; border-radius: 22px; background: var(--surface); box-shadow: 0 1px 2px #0000000d, 0 14px 34px -20px #00000040; }
.s-jobcard .s-who { gap: 8px; font-size: 13px; }
.s-jobcard .s-who .pd { width: 28px; }
.s-jobcard .s-who p { min-width: 0; overflow-wrap: anywhere; }
.s-jobcard .s-job { font-size: 22px; line-height: 1.15; letter-spacing: -.025em; overflow-wrap: anywhere; }
.s-jobcard .s-job[contenteditable] { margin: -4px -6px; padding: 4px 6px; border-radius: 10px; outline: none; cursor: text; transition: background .2s, box-shadow .2s; }
.s-jobcard .s-job[contenteditable]:hover { background: var(--hover); }
.s-jobcard .s-job[contenteditable]:focus { background: #fff; box-shadow: 0 0 0 2px #f0883e; }
.s-jobcard .s-job mark.blank { font-size: .8em; vertical-align: .08em; }
.s-jobcard .s-reply { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); overflow-wrap: anywhere; }
.s-jobcard .s-reply:empty { display: none; }
.s-jobcard .s-reply-box { height: 46px; padding: 0 4px 0 14px; box-shadow: none; background: var(--bg); }
.s-jobcard .s-reply-box input { font-size: 15px; min-width: 0; }
.s-jobcard > *, .s-jobcard .s-reply-box { min-width: 0; }
.s-jobcard .s-files { padding: 0; margin: 0; }
.s-jobcard .s-fcard { width: 100%; }
.s-jobcard .s-reply-box .s-go { width: 36px; height: 36px; }
.s-jobcard .s-save { display: grid; gap: 8px; padding: 14px; border-radius: 16px; background: var(--bg); box-shadow: none; }
.s-jobcard .s-save p { font-size: 13.5px; padding-right: 26px; }
.s-jobcard .s-save a { height: 38px; font-size: 14px; }
.s-jobcard .s-save-x { top: 8px; right: 8px; width: 26px; height: 26px; }
.s-jobcard .s-next { gap: 8px; padding: 12px 14px; border-radius: 16px; background: var(--bg); font-size: 13.5px; }

/* Taps are taps: no double-tap zoom on the paper or its sheets */
.pp, .pp-panel, .pp-menu { touch-action: manipulation; }
.pp-view, .pp-kb-only { display: none; }
.pp { display: grid; grid-template-columns: minmax(0, 1fr) 272px; gap: 20px; align-items: start; }
.pp-main { position: relative; min-width: 0; }
.pp-bar { position: sticky; top: 8px; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 10px 8px 16px; margin-bottom: 14px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4); box-shadow: 0 1px 2px #0000000f, 0 8px 24px -14px #00000040; font-size: 14px; }
.pp-brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); }
.pp-brand b { color: var(--ink); }
.pp-tools { display: flex; align-items: center; gap: 6px; flex: none; }
.pp-pages-n { font-size: 12px; color: var(--ink-4); margin-right: 2px; }
.pp-tools button, .pp-old button { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); font-size: 13px; font-weight: 500; color: var(--ink); }
.pp-tools button:hover { background: var(--hover); }
/* Okay: the orange check, like Done in Pages */
.pp-okay { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 16px 0 10px; border: 0; border-radius: 999px; background: #f0883e; color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 6px 16px -8px #f0883ecc; animation: pp-pulse 1.8s var(--a-ease) infinite; }
.pp-okay[hidden] { display: none; }
.pp-okay svg { width: 18px; height: 18px; }
.pp-okay:active { transform: scale(.96); }
@keyframes pp-pulse { 50% { box-shadow: 0 0 0 6px #f0883e2e; } }
/* Undo, Templates, Format: one pill of icons */
.pp-pill { display: inline-flex; align-items: center; height: 34px; padding: 0 3px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); }
.pp-tools .pp-pill button { width: 38px; height: 30px; padding: 0; border: 0; display: grid; place-items: center; background: none; color: var(--ink); }
.pp-tools .pp-pill button:hover { background: var(--hover); }
.pp-tools .pp-pill button:disabled { color: var(--ink-4); opacity: .5; background: none; }
.pp-tools .pp-pill button[aria-expanded="true"] { background: var(--ink); color: #fff; }
.pp-pill svg { width: 20px; height: 20px; }
#ppLookBtn { color: #8b5cf6; }
.pp-ph { display: none !important; }
.ic-tool { background: #e9e9ee; color: #1d1d1f; }
.pp-old { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; padding: 10px 14px; border-radius: 14px; background: #fff3c4; color: #7a5a00; font-size: 14px; }

/* Save: PDF, Word, to OkayPanda, copy, print */
.pp-save { position: relative; }
.pp-tools #ppSave { background: var(--ink); border-color: var(--ink); color: #fff; padding: 0 16px; }
.pp-menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 20; display: grid; gap: 8px; width: 320px; padding: 8px; border-radius: 22px; background: #f2f2f7f0; backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); box-shadow: 0 0 0 .5px #0000001a, 0 24px 60px -20px #00000059; animation: pp-pop .22s var(--a-ease); transform-origin: top right; }
@keyframes pp-pop { from { opacity: 0; transform: scale(.96); } }
.pp-menu-head { display: none; }
.pp-menu-list { display: grid; gap: 6px; }
.pp-menu-list button { display: grid !important; grid-template-columns: 38px 1fr 16px; align-items: center; gap: 12px; height: auto !important; padding: 10px 12px !important; border: 0 !important; border-radius: 16px !important; background: #fff !important; text-align: left; font-weight: 400 !important; color: var(--ink); transition: transform .15s var(--a-ease), background .2s; }
.pp-menu-list button:hover { background: #fafafa !important; }
.pp-menu-list button:active { transform: scale(.985); }
.pp-menu-list span { display: grid; gap: 1px; min-width: 0; }
.pp-menu-list b { font-size: 15px; font-weight: 600; }
.pp-menu-list small { font-size: 12.5px; color: #8a8a8e; }
.pp-menu-list em { color: #c4c4c7; display: grid; }
.pp-menu-list em svg { width: 16px; height: 16px; }
.ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; }
.ic svg { width: 24px; height: 24px; }
.ic-pdf { background: #e5484d; }
.ic-word { background: #2b6fd6; }
.ic-deck { background: #1d1d1f; }
.ic-panda { background: color-mix(in srgb, #4f8a3b 16%, #fff); }
.ic-panda .pd { width: 30px; }
.pp-x { width: 30px; height: 30px; border-radius: 50%; border: 0; display: grid; place-items: center; background: #e3e3e8; color: #3c3c43; }
.pp-x svg { width: 14px; height: 14px; }

/* The desk and the sheets */
.pp-pages { display: grid; gap: 22px; padding: 26px clamp(10px, 3vw, 34px); border-radius: 22px; background: #e6e3dc; box-shadow: inset 0 1px 3px #0000000f; }
.pp-sheet { position: relative; width: 100%; max-width: 816px; margin: 0 auto; aspect-ratio: 8.5 / 11; background: var(--pp-bg, #fff); -webkit-print-color-adjust: exact; print-color-adjust: exact; border-radius: 3px; box-shadow: 0 1px 2px #0000001f, 0 12px 30px -12px #0000003a; container-type: inline-size; }
.pp-body { position: absolute; inset: 9cqw 11cqw 10cqw; overflow: hidden; font-family: var(--pp-font, inherit); font-size: calc(1.96cqw * var(--pp-scale, 1)); line-height: 1.55; color: #1d1b16; outline: none; overflow-wrap: anywhere; }
.pp-body[contenteditable="true"] { cursor: text; }
.pp-body[contenteditable="true"]:focus { outline: none; box-shadow: none; }
.pp-break { height: 0; margin: 0 !important; }
.pp-body > .pp-break + * { margin-top: 0; }
/* Each page's tools, kept quiet: a small pill in the page's bottom corner, on hover (computer) or only on
   the page you're editing (touch) */
.pp-pgtools { position: absolute; right: 3cqw; bottom: 2.4cqw; z-index: 2; display: flex; gap: 2px; padding: 2px; border-radius: 999px; background: #fffffff2; box-shadow: 0 0 0 1px #0000001a, 0 4px 12px -6px #0004; opacity: 0; pointer-events: none; transition: opacity .2s; }
.pp-sheet:hover .pp-pgtools { opacity: 1; pointer-events: auto; }
@media (hover: none) { .pp-sheet:hover .pp-pgtools { opacity: 0; pointer-events: none; } .pp-sheet:focus-within .pp-pgtools { opacity: 1; pointer-events: auto; } }
.pp-pgtools button { height: 24px; padding: 0 9px; border: 0; border-radius: 999px; background: none; color: var(--ink-3); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.pp-pgtools button:hover { background: var(--hover); color: var(--ink); }
.pp-pgtools button[data-pg="del"]:hover { color: #c0392b; }
/* All pages: every page as a thumbnail, tap one to go to it */
.pp-pages.is-thumbs { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; }
.pp-pages.is-thumbs .pp-sheet { max-width: none; cursor: pointer; transition: transform .2s var(--a-ease), box-shadow .2s; }
.pp-pages.is-thumbs .pp-sheet:hover { transform: translateY(-3px); box-shadow: 0 0 0 2px #f0883e, 0 14px 30px -14px #0006; }
.pp-pages.is-thumbs .pp-body, .pp-pages.is-thumbs .pp-pgtools { pointer-events: none; }
.pp-pages.is-thumbs .pp-pgtools { display: none; }
.pp-pages.is-thumbs .pp-num { bottom: -2.2em; font-size: 12px; color: var(--ink-3); }
.pp-pages-n { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 8px; border: 0; border-radius: 999px; background: none; cursor: pointer; }
.pp-pages-n:hover { background: var(--hover); color: var(--ink); }
.pp-pages-n svg { width: 14px; height: 14px; }
.pp-num { position: absolute; bottom: 4.6cqw; left: 0; right: 0; text-align: center; font-size: 1.4cqw; color: #9c9588; }
.pp-body > * + * { margin-top: .75em; }
.pp-body h2 { font-size: 2.15em; line-height: 1.1; letter-spacing: -.025em; }
.pp-body h3 { font-size: 1.22em; letter-spacing: -.01em; margin-top: 1.2em; padding-bottom: .3em; border-bottom: 1px solid #e4ded1; }
.pp-body h4 { font-size: 1.02em; margin-top: 1em; }
.pp-body ul, .pp-body ol { padding-left: 1.3em; }
.pp-body li + li { margin-top: .25em; }
.pp-body a { color: #0066cc; }
.pp-body blockquote { padding-left: .9em; border-left: .2em solid #d3cbba; color: #4a453b; }
.pp-body hr { border: 0; border-top: 1px solid #e4ded1; }
.pp-body table { border-collapse: collapse; width: 100%; font-size: .9em; }
.pp-body th, .pp-body td { text-align: left; padding: .45em .6em; border-bottom: 1px solid #e4ded1; vertical-align: top; }
.pp-body th { background: #f6f3ec; font-weight: 600; }
/* The page's furniture: letterhead on page 1, a header and footer on every page, a cover page */
.pp-lh { position: absolute; top: 7cqw; left: 11cqw; right: 11cqw; display: grid; gap: .5cqw; padding-bottom: 1.6cqw; border-bottom: .3cqw solid var(--pp-accent, #1d1b16); font-family: var(--pp-font, inherit); }
.pp-lh b { font-size: calc(3.1cqw * var(--pp-scale, 1)); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: var(--pp-accent, #1d1b16); }
.pp-lh span { font-size: calc(1.5cqw * var(--pp-scale, 1)); color: #6b6458; }
.pp-lh .pp-ph-text { opacity: .35; }
.pp-sheet.has-lh .pp-body { top: 20cqw; }
.pp-sheet.has-lh .pp-head { display: none; }
[data-align="center"] .pp-lh { text-align: center; }
.pp-head { position: absolute; top: 4.4cqw; left: 11cqw; right: 11cqw; padding-bottom: .8cqw; border-bottom: 1px solid color-mix(in srgb, var(--pp-accent, #1d1b16) 22%, transparent); font-family: var(--pp-font, inherit); font-size: 1.35cqw; letter-spacing: .04em; color: #8a8378; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.has-foot .pp-num { left: 11cqw; right: 11cqw; display: flex; justify-content: space-between; gap: 2cqw; padding-top: .8cqw; border-top: 1px solid color-mix(in srgb, var(--pp-accent, #1d1b16) 22%, transparent); font-family: var(--pp-font, inherit); }
.pp-cover { overflow: hidden; }
.pp-cover::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16cqw; background: var(--pp-accent, #1d1b16); }
.pp-cover-in { position: absolute; left: 11cqw; right: 11cqw; top: 34%; display: grid; gap: 2cqw; font-family: var(--pp-font, inherit); }
.pp-cover-in h1 { font-size: calc(6.2cqw * var(--pp-scale, 1)); line-height: 1.04; letter-spacing: -.035em; font-weight: 800; color: #1d1b16; }
.pp-cover-k { font-size: 1.6cqw; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pp-accent, #1d1b16); }
.pp-cover-k:empty { display: none; }
.pp-cover-in p { font-size: 1.8cqw; color: #6b6458; }
[data-align="center"] .pp-cover-in { text-align: center; }
/* Switches, like Settings */
.pp-tog { position: relative; flex: none; width: 51px; height: 31px; padding: 0; border: 0; border-radius: 999px; background: #e9e9eb; transition: background .2s; }
.pp-tog::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px #0000002e; transition: transform .22s var(--a-ease); }
.pp-tog[aria-checked="true"] { background: #34c759; }
.pp-tog[aria-checked="true"]::after { transform: translateX(20px); }
.pp-sub { display: grid; gap: 6px; padding: 0 0 10px; }
.pp-sub[hidden] { display: none; }
.pp-sub input { height: 40px; padding: 0 12px; border: 0; border-radius: 12px; background: #f2f2f7; font-size: 16px; color: #1d1d1f; outline: none; }
.pp-sub input:focus { box-shadow: inset 0 0 0 1.5px #f0883e; background: #fff; }

/* Templates: each one a set of rules on the page (also drawn small in the picker) */
[data-align="center"] .pp-body > h2:first-child, [data-align="center"] .pp-body > h2:first-child + p { text-align: center; }
[data-t="report"] .pp-body h2 { font-weight: 800; letter-spacing: -.035em; }
[data-t="report"] .pp-body h3 { color: var(--pp-accent); border-bottom-color: color-mix(in srgb, var(--pp-accent) 30%, #fff); }
[data-t="report"] .pp-body li::marker { color: var(--pp-accent); }
[data-t="invite"] .pp-body { text-align: center; }
[data-t="invite"] .pp-body h2 { font-weight: 400; font-size: 2.6em; color: var(--pp-accent); }
[data-t="invite"] .pp-body h3 { font-weight: 500; font-variant: small-caps; letter-spacing: .08em; color: var(--pp-accent); border: 0; padding: 0; }
[data-t="invite"] .pp-body ul, [data-t="invite"] .pp-body ol { list-style-position: inside; padding-left: 0; }
[data-t="invite"] .pp-sheet::before { content: ""; position: absolute; inset: 3.4cqw; border: .25cqw solid color-mix(in srgb, var(--pp-accent) 45%, transparent); border-radius: 1cqw; pointer-events: none; }
[data-t="modern"] .pp-body h2 { font-weight: 800; letter-spacing: -.035em; padding-bottom: .3em; border-bottom: .14em solid var(--pp-accent); }
[data-t="modern"] .pp-body h3 { color: var(--pp-accent); text-transform: uppercase; font-size: .82em; letter-spacing: .12em; border: 0; padding: 0; }
[data-t="modern"] .pp-body li::marker { color: var(--pp-accent); }
[data-t="elegant"] .pp-body h2 { font-weight: 400; font-size: 2.4em; letter-spacing: -.01em; }
[data-t="elegant"] .pp-body h3 { font-weight: 500; text-align: center; font-variant: small-caps; letter-spacing: .08em; color: var(--pp-accent); border: 0; padding: 0; }
[data-t="elegant"] .pp-body h3::after { content: ""; display: block; width: 3em; margin: .35em auto 0; border-top: 1px solid var(--pp-accent); }
[data-t="elegant"] .pp-body hr { border-top-color: var(--pp-accent); width: 30%; margin-inline: auto; }
[data-t="bold"] .pp-sheet::before { content: ""; position: absolute; inset: 0 0 auto; height: 2.6cqw; background: var(--pp-accent); border-radius: 3px 3px 0 0; }
[data-t="bold"] .pp-body h2 { font-size: 2.6em; font-weight: 900; letter-spacing: -.045em; color: var(--pp-accent); line-height: 1; }
[data-t="bold"] .pp-body h3 { font-weight: 800; border-bottom: .16em solid var(--pp-accent); }
[data-t="fresh"] .pp-body h2 { color: var(--pp-accent); font-weight: 800; }
[data-t="fresh"] .pp-body h3 { display: table; padding: .2em .75em; border: 0; border-radius: 99em; background: color-mix(in srgb, var(--pp-accent) 14%, #fff); color: var(--pp-accent); font-size: 1em; }
[data-t="fresh"] .pp-body li::marker { color: var(--pp-accent); }
[data-t="minimal"] .pp-body { color: #3a3a3c; }
[data-t="minimal"] .pp-body h2 { font-weight: 300; letter-spacing: -.03em; color: #1d1d1f; }
[data-t="minimal"] .pp-body h3 { font-weight: 600; font-size: .86em; letter-spacing: .04em; color: var(--pp-accent); border: 0; padding: 0; margin-top: 1.6em; }
[data-t="letter"] .pp-body h2 { font-size: 1.8em; font-weight: 600; color: var(--pp-accent); letter-spacing: -.01em; padding-bottom: .4em; border-bottom: 1px solid color-mix(in srgb, var(--pp-accent) 35%, #fff); }
[data-t="letter"] .pp-body h3 { color: var(--pp-accent); border-bottom-color: color-mix(in srgb, var(--pp-accent) 25%, #fff); }

/* The Templates and Format sheets: a popover on a computer, a sheet above the keyboard on a phone */
.pp-panel { position: fixed; z-index: 55; top: 76px; right: max(16px, calc((100vw - 1240px) / 2)); width: 372px; max-height: calc(100dvh - 96px); display: grid; grid-template-rows: auto minmax(0, 1fr); border-radius: 26px; background: #f2f2f7f5; backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); box-shadow: 0 0 0 .5px #0000001a, 0 30px 70px -24px #00000066; animation: pp-pop .24s var(--a-ease); font-size: 15px; color: #1d1d1f; }
.pp-panel[hidden] { display: none; }
.pp-panel-head { display: grid; grid-template-columns: 30px 1fr 30px; align-items: center; justify-items: center; padding: 14px 14px 8px; }
.pp-panel-head b { grid-column: 2; font-size: 17px; font-weight: 600; }
.pp-panel-head .pp-x { grid-column: 3; }
.pp-panel-body { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; gap: 12px; align-content: start; padding: 4px 14px 16px; overflow: auto; overscroll-behavior: contain; }
.pp-group { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 6px 12px; border-radius: 18px; background: #fff; }
.pp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; }
.pp-row + .pp-row { border-top: .5px solid #3c3c4326; }
.pp-row > span { flex: none; color: #1d1d1f; }
.pp-row > div { min-width: 0; }
.pp-chips { display: flex; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.pp-chips button { flex: none; height: 30px; padding: 0 10px; border-radius: 999px; border: 0; background: #f2f2f7; font-size: 14px; color: #1d1d1f; }
.pp-chips button[aria-pressed="true"] { background: #1d1d1f; color: #fff; }
.pp-sws { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; min-width: 0; }
.pp-sw { flex: none; }
.pp-sw { position: relative; width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 0; background: var(--c); box-shadow: inset 0 0 0 .5px #0000002e; cursor: pointer; }
.pp-sw[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1d1d1f; }
.pp-sw-none { background: #fff; box-shadow: inset 0 0 0 1px #d1d1d6; overflow: hidden; }
.pp-sw-none::after { content: ""; position: absolute; left: 50%; top: 2px; bottom: 2px; width: 1.5px; background: #ff3b30; transform: rotate(45deg); }
.pp-sw-pick { background: conic-gradient(#ff3b30, #ff9500, #ffcc00, #34c759, #007aff, #af52de, #ff3b30); overflow: hidden; }
.pp-sw-pick input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.pp-step { display: flex; align-items: center; gap: 10px; }
.pp-step b { min-width: 52px; height: 30px; display: grid; place-items: center; border-radius: 999px; background: #f2f2f7; font-size: 14px; font-weight: 500; }
.pp-seg { display: inline-flex; padding: 2px; border-radius: 999px; background: #f2f2f7; }
.pp-seg button { min-width: 44px; height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: none; font-size: 15px; color: #1d1d1f; }
.pp-seg button[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 3px #0000001f; font-weight: 600; }
.pp-thumbs { display: grid; grid-auto-flow: column; grid-auto-columns: 96px; gap: 10px; overflow-x: auto; padding: 4px 2px 6px; scroll-snap-type: x proximity; scrollbar-width: none; }
.pp-thumb { display: grid; gap: 6px; justify-items: center; padding: 0; border: 0; background: none; scroll-snap-align: start; font-size: 12.5px; color: #3c3c43; }
.pp-mini { display: block; width: 96px; border-radius: 6px; box-shadow: 0 0 0 .5px #00000026, 0 6px 14px -8px #00000059; transition: box-shadow .2s, transform .2s var(--a-ease); pointer-events: none; }
.pp-mini .pp-sheet { display: block; max-width: none; border-radius: 6px; box-shadow: none; }
.pp-mini .pp-body { display: block; }
.pp-thumb[aria-pressed="true"] .pp-mini { box-shadow: 0 0 0 2.5px #f0883e, 0 8px 18px -8px #f0883e99; transform: translateY(-1px); }
.pp-thumb[aria-pressed="true"] b { color: #1d1d1f; }
.pp-ai { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 5px 0 12px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #e5e5ea; }
.pp-ai:focus-within { box-shadow: inset 0 0 0 1.5px #af52de; }
.pp-ai i { display: grid; color: #af52de; }
.pp-ai i svg { width: 20px; height: 20px; }
.pp-ai input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 16px; color: #1d1d1f; }
.pp-ai button { height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #af52de, #f0883e); color: #fff; font-size: 14px; font-weight: 600; }
.pp-ai button:disabled { opacity: .7; }
.pp-ai-note { padding: 0 8px; font-size: 13px; color: #6e6e73; }
.pp-hint { padding: 10px 12px; border-radius: 14px; background: #fff; font-size: 13.5px; color: #6e6e73; }
.pp-hint.pp-nudge { animation: pp-nudge .4s; color: #1d1d1f; }
@keyframes pp-nudge { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.pp-styles { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.pp-styles button { flex: none; height: 40px; padding: 0 14px; border: 0; border-radius: 12px; background: #fff; color: #1d1d1f; font-size: 15px; }
.pp-styles button[aria-pressed="true"] { box-shadow: 0 0 0 2px #f0883e; }
.pp-styles .st-title { font-size: 18px; font-weight: 800; }
.pp-styles .st-head { font-weight: 700; }
.pp-styles .st-sub { font-weight: 600; color: #3c3c43; }
.pp-styles .st-quote { font-style: italic; color: #6e6e73; }
.pp-biu { display: grid; grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)); gap: 2px; padding: 4px; }
.pp-biu button { height: 40px; border: 0; border-radius: 10px; background: none; display: grid; place-items: center; font-size: 17px; color: #1d1d1f; font-family: Georgia, serif; }
.pp-biu button:hover { background: #f2f2f7; }
.pp-biu button[aria-pressed="true"] { background: #1d1d1f14; }
.pp-biu svg { width: 22px; height: 22px; }
.pp-group .pp-biu { padding: 4px 0; border-bottom: .5px solid #3c3c4326; }
/* Writing Tools */
.pp-wt { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.pp-wt button { grid-column: span 2; display: grid; justify-items: center; gap: 4px; padding: 12px 6px; border: 0; border-radius: 18px; background: #fff; color: #1d1d1f; font-size: 13.5px; font-weight: 500; }
.pp-wt .pp-wt-big { grid-column: span 3; padding: 16px 8px; font-size: 15.5px; }
.pp-wt button:active { transform: scale(.97); background: #ececf1; }
.pp-wt button:disabled { opacity: .45; }
.pp-wt svg { width: 22px; height: 22px; }
.pp-wt-big svg { width: 26px; height: 26px; }
.pp-wt-for { padding: 0 6px; font-size: 13px; color: #6e6e73; overflow-wrap: anywhere; }
.pp-sel .pp-wt-btn { color: #c38bff !important; }
.pp-clear { height: 44px; border: 0; border-radius: 14px; background: #fff; color: #ff3b30; font-size: 15px; }

.pp-busy .pp-pages { opacity: .55; filter: saturate(.7); transition: opacity .3s; pointer-events: none; }
.pp-busy .pp-pages::after { content: ""; }

/* While the pandas write: just the pages (and the view switch), a caret where the words arrive */
.pp-writing .pp-tools, .pp-writing .pp-q, .pp-writing .pp-hist, .pp-writing .pp-okay { display: none !important; }
.pp-caret { display: inline-block; width: .5em; height: 1em; margin-left: 2px; vertical-align: -.12em; border-radius: 2px; background: #f0883e; animation: pp-blink 1s steps(2) infinite; }
@keyframes pp-blink { 50% { opacity: 0; } }

/* "Okay, rewrite this" */
.pp-sel { position: absolute; z-index: 8; display: flex; gap: 6px; max-width: 100%; padding: 6px; border-radius: 999px; background: #1c1c1e; box-shadow: 0 16px 40px -14px #000a; }
.pp-sel[hidden], .pp-sel [hidden] { display: none !important; }
.pp-sel-fmt, .pp-sel-ai { display: flex; gap: 4px; min-width: 0; }
.pp-sel-ai { flex: 1; width: 320px; max-width: 100%; }
.pp-sel-fmt + .pp-sel-ai { padding-left: 6px; border-left: 1px solid #ffffff26; }
.pp-sel .pp-sel-fmt button { width: 34px; padding: 0; background: none; color: #fff; font-size: 15px; font-family: Georgia, serif; display: grid; place-items: center; }
.pp-sel .pp-sel-fmt button:hover { background: #3a3a3c; }
.pp-sel-fmt svg { width: 18px; height: 18px; }
.pp-sel input { flex: 1; min-width: 0; height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: #2c2c2e; color: #fff; font-size: 13px; outline: none; }
.pp-sel button { height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: #fff; color: #111; font-size: 13px; font-weight: 600; white-space: nowrap; }

/* Questions, like a conversation: the panda asks, you answer or skip */
.pp-q { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 12px; padding: 16px; border-radius: 22px; background: var(--surface); box-shadow: 0 1px 2px #0000000d, 0 14px 34px -20px #00000040; }
.pp-q-head { display: flex; align-items: center; gap: 10px; }
.pp-q-head .pd { width: 40px; flex: none; }
.pp-q-head p { display: grid; line-height: 1.25; }
.pp-q-head b { font-size: 15px; }
.pp-q-head span { font-size: 12.5px; color: var(--ink-3); }
.pp-q-bar { height: 4px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.pp-q-bar i { display: block; height: 100%; border-radius: 99px; background: var(--bamboo); transition: width .5s var(--a-ease); }
.pp-q-thread { display: grid; gap: 8px; max-height: 220px; overflow: auto; }
.pp-q-thread:empty { display: none; }
.pp-q-past { display: grid; gap: 4px; animation: pp-q-in .35s var(--a-ease); }
.pp-q-asked { justify-self: start; max-width: 92%; padding: 7px 11px; border-radius: 14px 14px 14px 4px; background: var(--surface-2); font-size: 12.5px; color: var(--ink-3); }
.pp-q-you, .pp-q-skip-chip { justify-self: end; max-width: 92%; padding: 7px 12px; border: 0; border-radius: 14px 14px 4px 14px; font-size: 13.5px; text-align: left; cursor: pointer; }
.pp-q-you { background: var(--ink); color: #fff; }
.pp-q-skip-chip { background: none; color: var(--ink-4); border: 1px dashed var(--line-2); }
.pp-q-now { display: grid; gap: 10px; animation: pp-q-in .4s var(--a-ease); }
@keyframes pp-q-in { from { opacity: 0; transform: translateY(8px); } }
.pp-q-ask { justify-self: start; max-width: 100%; padding: 11px 14px; border-radius: 18px 18px 18px 6px; background: color-mix(in srgb, var(--bamboo) 12%, var(--surface)); font-size: 16px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; }
.pp-q-why { margin-top: -4px; padding-left: 4px; font-size: 12.5px; color: var(--ink-3); }
.pp-q-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-q-opts button { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); font-size: 13.5px; color: var(--ink); transition: background .2s, border-color .2s, transform .15s; }
.pp-q-opts button:hover { background: var(--hover); border-color: var(--ink-4); }
.pp-q-opts button:active { transform: scale(.97); }
.pp-q-form { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 5px 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg); transition: border-color .2s, box-shadow .2s; }
.pp-q-form:focus-within { border-color: var(--ink-4); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a-sel) 16%, transparent); background: var(--surface); }
.pp-q-form input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 15px; color: var(--ink); }
.pp-q-form button { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--ink); color: #fff; }
.pp-q-form button svg { width: 16px; height: 16px; }
.pp-q-foot { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--ink-4); }
.pp-q-link { border: 0; background: none; padding: 4px 2px; font-size: 13.5px; font-weight: 600; color: var(--a-link); cursor: pointer; }
.pp-q-end { display: grid; gap: 10px; animation: pp-q-in .4s var(--a-ease); }
.pp-q-end p { font-size: 14.5px; color: var(--ink-2); line-height: 1.45; }
.pp-q-ok { height: 44px; border-radius: 999px; border: 0; background: var(--ink); color: #fff; font-size: 15px; font-weight: 600; }
.pp-q-ok:hover { background: #33332f; }
.pp-q-end .pp-q-link { justify-self: center; }

/* Nothing in the side column may be wider than it (Safari sizes a text field's minimum wider than Chrome) */
.pp-side { overflow-x: hidden; }
.pp-q-now, .pp-q-thread, .pp-q-end, .pp-q-past, .pp-hist ol { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.pp-q-form, .pp-q-head, .pp-q-foot, .pp-hist, .pp-hist li, .pp-hist li button { min-width: 0; }
.pp-q-form input { width: 100%; min-width: 0; }
.pp-q-ask, .pp-q-asked, .pp-q-why, .pp-q-head p { overflow-wrap: anywhere; }

/* History */
.pp-side { position: sticky; top: 8px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; max-height: calc(100vh - 16px); overflow: auto; }
.pp-hist { padding: 12px; border-radius: 20px; background: var(--surface); box-shadow: 0 1px 2px #0000000d, 0 10px 30px -18px #00000040; }
.pp-hist-top { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 10px; font-size: 14px; }
.pp-hist-top span { display: flex; gap: 4px; }
.pp-hist-top button { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--bg); font-size: 16px; line-height: 1; }
.pp-hist-top button:disabled { opacity: .35; }
.pp-hist ol { list-style: none; display: grid; gap: 4px; }
.pp-hist li button { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 10px 12px; border: 0; border-radius: 12px; background: none; text-align: left; font-size: 13px; color: var(--ink-2); }
.pp-hist li button:hover { background: var(--hover); }
.pp-hist li button[aria-current="true"] { background: var(--ink); color: #fff; }
.pp-hist li b { font-size: 13px; }
.pp-hist li span { grid-column: 1 / -1; color: inherit; opacity: .75; line-height: 1.35; }
.pp-hist li time { font-size: 11px; opacity: .6; grid-row: 1; grid-column: 2; }

/* Continue where you left off: a card with the paper's title */

@container page (max-width: 780px) {
  /* One column held to the screen: the job, questions, then the paper, then the history (a swipeable row) */
  .pp { grid-template-columns: minmax(0, 1fr); }
  .pp-side { display: contents; }
  .s-jobcard { order: -2; }
  .pp-q { order: -1; min-width: 0; }
  .pp-main { order: 0; }
  .pp-hist { order: 1; min-width: 0; padding: 12px 12px 10px; }
  .pp-hist ol { display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .pp-hist li { flex: none; scroll-snap-align: start; }
  .pp-hist li button { width: 160px; padding: 9px 11px; }
  .pp-hist li span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .pp-q-form, .pp-q-now, .pp-q-thread { min-width: 0; }
}
@container page (max-width: 600px) {
  /* Copy, Print and Discard move into the Save sheet */
  .pp-wide { display: none !important; }
  .pp-ph:not([hidden]) { display: grid !important; }
}
@media (max-width: 640px) {
  /* Templates and Format: a sheet from the bottom, just above the keyboard when it's up */
  .pp-panel { top: auto; left: 8px; right: 8px; bottom: calc(var(--pp-kb, 0px) + max(8px, env(safe-area-inset-bottom))); width: auto; max-height: min(58vh, calc(100dvh - var(--pp-kb, 0px) - 110px)); border-radius: 32px; background: #f2f2f7; animation: pp-sheet .36s cubic-bezier(.2, .9, .25, 1); }
  /* Format and Writing Tools stay short (the words you style sit just above them); Templates is taller */
  #ppFmt, #ppWT { max-height: min(42vh, calc(100dvh - var(--pp-kb, 0px) - 200px)); border-radius: 26px; }
  #ppFmt .pp-panel-head, #ppWT .pp-panel-head { padding: 8px 12px 4px; }
  #ppFmt .pp-panel-body, #ppWT .pp-panel-body { gap: 8px; padding: 2px 10px 12px; }
  #ppFmt .pp-styles button { height: 36px; padding: 0 12px; }
  #ppFmt .pp-row { min-height: 42px; }
  /* Room under the paper so its last lines can scroll up above a sheet */
  html.pp-panel-up .pp-main { padding-bottom: 45vh; }
  .pp-thumbs { grid-auto-columns: 84px; }
  .pp-sws { gap: 6px; }
  .pp-sw { width: 24px; height: 24px; }
  .pp-seg button { min-width: 38px; padding: 0 10px; }
  .pp-mini { width: 84px; }
  /* Save is an Apple-style sheet on phones: floating, inset, a title and a round close button */
  .pp-menu { position: fixed; z-index: 60; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); top: auto; width: auto; gap: 14px; padding: 18px 16px 16px; border-radius: 38px; background: #f2f2f7; box-shadow: 0 20px 50px -18px #000a; animation: pp-sheet .38s cubic-bezier(.2, .9, .25, 1); transform-origin: bottom center; }
  .pp-menu-head { display: grid; grid-template-columns: 30px 1fr 30px; align-items: center; justify-items: center; gap: 6px; padding: 0 2px; }
  .pp-menu-head b { grid-column: 2; grid-row: 1; font-size: 17px; font-weight: 600; }
  .pp-menu-head span { grid-column: 1 / -1; grid-row: 2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: #8a8a8e; }
  .pp-menu-head span:empty { display: none; }
  .pp-menu-head .pp-x { grid-column: 3; grid-row: 1; }
  .pp-menu-list { gap: 10px; }
  .pp-menu-list button { grid-template-columns: 44px 1fr 18px; padding: 14px 16px !important; border-radius: 20px !important; }
  .ic { width: 44px; height: 44px; }
  .pp-menu-list b { font-size: 17px; }
  .pp-menu-list small { font-size: 14px; }
  /* Questions on a phone: full width, big tap targets, 16px fields so iPhone doesn't zoom in */
  .pp-q { padding: 16px; border-radius: 24px; }
  .pp-q-ask { font-size: 17px; padding: 12px 15px; }
  .pp-q-why { font-size: 13.5px; }
  .pp-q-opts { gap: 8px; }
  .pp-q-opts button { padding: 10px 15px; font-size: 15px; }
  .pp-q-form { height: 52px; }
  .pp-q-form input { font-size: 16px; }
  .pp-q-form button { width: 40px; height: 40px; }
  .pp-q-thread { max-height: 170px; }
  .pp-q-you, .pp-q-skip-chip { font-size: 14.5px; padding: 9px 13px; }
  .pp-q-link { padding: 10px 8px; font-size: 15px; }
  .pp-q-foot { font-size: 13.5px; }
  .pp-q-ok { height: 50px; font-size: 16px; }
  /* Screen view: one continuous page, text at 16px so editing never zooms in */
  .pp-view { display: flex; width: max-content; margin: 0 auto 10px; padding: 2px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
  .pp-view button { height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: none; font-size: 14px; color: var(--ink-2); }
  .pp-view button[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px #0000001f; }
  .pp-pages.is-flow { padding: 0; background: none; box-shadow: none; }
  .pp-pages.is-flow { margin-bottom: 72px; }
  .pp-pages.is-flow .pp-sheet { aspect-ratio: auto; max-width: none; border-radius: 18px; box-shadow: 0 1px 2px #0000000f, 0 10px 30px -18px #00000040; }
  .pp-pages.is-flow .pp-body { position: static; overflow: visible; min-height: 40vh; padding: 26px 20px 32px; font-size: calc(16px * var(--pp-scale, 1)); line-height: 1.5; -webkit-user-select: text; user-select: text; }
  .pp-pages.is-flow .pp-body[contenteditable="true"]:focus { box-shadow: none; }
  .pp-pages.is-flow .pp-num, .pp-pages.is-flow .pp-head, .pp-pages.is-flow .pp-pgtools { display: none; }
  .pp-pages.is-flow .pp-break { height: auto; margin: 1.4em 0 !important; border-top: 1.5px dashed #d8d2c4; }
  .pp-pages.is-flow .pp-break::after { content: "Page break"; display: block; width: max-content; margin: -.75em auto 0; padding: 0 .6em; background: var(--pp-bg, #fff); font-size: 12px; color: #a39c8f; }
  .pp-pages.is-thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; }
  .pp-pages.is-flow .pp-lh { position: static; margin: 24px 20px 0; padding-bottom: 12px; border-bottom-width: 3px; }
  .pp-pages.is-flow .pp-lh b { font-size: calc(24px * var(--pp-scale, 1)); }
  .pp-pages.is-flow .pp-lh span { font-size: 13px; }
  .pp-pages.is-flow .pp-sheet.has-lh .pp-body { padding-top: 18px; }
  .pp-pages.is-flow .pp-cover { aspect-ratio: 8.5 / 11; margin-bottom: 12px; }
  .pp-pages.is-flow .pp-body h2 { font-size: 1.75em; }
  /* The keyboard toolbar, like Pages on iPhone: it sits on top of the keyboard while you type */
  .pp-sel { position: fixed; z-index: 56; top: auto !important; left: 8px !important; right: 8px; bottom: calc(var(--pp-kb, 0px) + 8px); width: auto; flex-direction: column; align-items: stretch; gap: 6px; padding: 6px; border-radius: 24px; background: #f9f9fbf2; backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); box-shadow: 0 0 0 .5px #0000001f, 0 12px 30px -14px #00000059; animation: pp-pop .2s var(--a-ease); }
  .pp-kb-only { display: grid; }
  .pp-sel-fmt { justify-content: space-between; }
  .pp-sel .pp-sel-fmt button { width: 42px; height: 40px; border-radius: 12px; color: #1d1d1f; font-size: 18px; }
  .pp-sel .pp-sel-fmt button:active { background: #e5e5ea; }
  .pp-sel-fmt svg { width: 21px; height: 21px; }
  .pp-sel .pp-wt-btn { color: #af52de !important; }
  .pp-sel .pp-sel-fmt .pp-kb-done { background: #f0883e; color: #fff; border-radius: 50%; }
  .pp-sel .pp-sel-fmt .pp-kb-done:active { background: #e07a30; }
  .pp-sel-ai { order: -1; width: auto; }
  .pp-sel-fmt + .pp-sel-ai { padding-left: 0; border-left: 0; }
  .pp-sel input { height: 40px; font-size: 16px; background: #fff; color: #1d1d1f; box-shadow: inset 0 0 0 1px #e5e5ea; }
  .pp-sel button#ppSelGo { height: 40px; background: #1d1d1f; color: #fff; }
}
@keyframes pp-sheet { from { transform: translateY(100%); } }
@media (max-width: 560px) {
  /* The bar, like Pages on iPhone: the orange Okay on the left, the icons and Save on the right */
  .pp-bar { top: 6px; gap: 8px; padding: 6px 6px 6px 14px; }
  .pp-bar.is-dirty { padding-left: 6px; }
  .pp-bar.is-dirty .pp-brand { display: none; }
  .pp-bar.is-dirty .pp-tools { margin-left: auto; }
  .pp-pages-n { display: none; }
  .pp-okay { height: 40px; padding: 0 16px 0 12px; font-size: 16px; }
  .pp-pill { height: 40px; }
  .pp-tools .pp-pill button { width: 42px; height: 36px; }
  .pp-tools #ppSave { height: 40px; padding: 0 16px; font-size: 15px; }
  .pp-pages { padding: 12px 6px; gap: 12px; border-radius: 14px; }
}

@media print {
  .has-paper .s-main { max-width: none; }
  .pp { display: block; }
  .pp-side, .pp-bar, .pp-old, .pp-sel, .pp-num, .pp-menu, .pp-panel { display: none !important; }
  .pp-pages { display: block; padding: 0; background: none; box-shadow: none; }
  .pp-sheet { max-width: none; width: 8.5in; height: 11in; aspect-ratio: auto; box-shadow: none; border-radius: 0; margin: 0; break-after: page; }
  .pp-body { inset: .95in 1.15in 1.05in; font-size: 11.5pt; }
}

/* While the Save sheet is open on a phone, the page behind it stays put */
html.pp-sheet-open, html.pp-sheet-open body { overflow: hidden; }
html.pp-sheet-open body::after { content: ""; position: fixed; inset: 0; z-index: 59; background: #0000004d; animation: pp-dim .3s ease; }
@keyframes pp-dim { from { opacity: 0; } }

/* Find in the paper: a slim bar under the toolbar; every match highlighted, the current one in orange */
.pp-find { position: sticky; top: 62px; z-index: 6; display: flex; align-items: center; gap: 2px; width: min(440px, 100%); margin: -4px auto 12px; padding: 4px 4px 4px 14px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line-2), 0 12px 30px -16px #0006; animation: pp-pop .18s var(--a-ease); }
.pp-find[hidden] { display: none; }
.pp-find svg { flex: none; width: 16px; height: 16px; color: var(--ink-4); }
.pp-find input { flex: 1; min-width: 0; height: 34px; padding: 0 8px; border: 0; outline: 0; background: none; font-size: 15px; color: var(--ink); }
.pp-find-n { flex: none; padding: 0 6px; font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pp-find button { flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; font-size: 18px; color: var(--ink-2); }
.pp-find button:hover { background: var(--hover); }
::highlight(pp-find) { background-color: #ffe58a; color: inherit; }
::highlight(pp-find-now) { background-color: #f0883e; color: #fff; }
@keyframes pp-flash-k { 0%, 60% { background: #fff1b8; box-shadow: 0 0 0 6px #fff1b8; } }
.pp-flash { animation: pp-flash-k 1.8s ease-out; border-radius: 4px; }
@media (max-width: 560px) { .pp-find { top: 58px; } .pp-find input { font-size: 16px; } }
/* Sideways rows: a thin scrollbar on a computer while you hover, and they can be dragged (paper.js HROWS) */
@media (pointer: fine) {
  .pp-thumbs, .pp-chips, .pp-styles { scrollbar-width: thin; scrollbar-color: transparent transparent; cursor: grab; }
  .pp-thumbs:hover, .pp-chips:hover, .pp-styles:hover { scrollbar-color: #0000002e transparent; }
  .pp-thumbs::-webkit-scrollbar, .pp-chips::-webkit-scrollbar, .pp-styles::-webkit-scrollbar { height: 6px; }
  .pp-thumbs:hover::-webkit-scrollbar-thumb, .pp-chips:hover::-webkit-scrollbar-thumb, .pp-styles:hover::-webkit-scrollbar-thumb { background: #0000002e; border-radius: 3px; }
  .is-dragging { cursor: grabbing; scroll-snap-type: none !important; user-select: none; }
}