/* The PDF: PDF Preview with its stationery row, Your mark, the share sheet and Messages. */
.app-pdf { background: #1b1e21; }
.app-pdf > * { position: absolute; left: 0; top: 0; }
.pd-prev { top: 54px; width: 393px; height: 832px; border-radius: 12px 12px 0 0; background: #e7ebe9; overflow: hidden; }
.pd-prev > * { position: absolute; }
.pd-prev .qnav-l, .pd-prev .qnav-t { top: 16px; }
.pd-shr { right: 18px; top: 13px; width: 24px; height: 24px; color: var(--q-em); }
.pd-row { left: 0; top: 50px; width: 393px; height: 124px; background: rgba(240, 243, 241, 0.95); overflow: hidden; box-shadow: inset 0 -0.6px 0 rgba(60, 60, 67, 0.16); }
.pd-rowin { position: absolute; left: 0; top: 0; width: 600px; height: 124px; }
.pd-card { position: absolute; top: 10px; width: 84px; }
.pd-card:nth-child(1) { left: 16px; } .pd-card:nth-child(2) { left: 112px; } .pd-card:nth-child(3) { left: 208px; } .pd-card:nth-child(4) { left: 304px; } .pd-card:nth-child(5) { left: 400px; } .pd-card:nth-child(6) { left: 496px; }
.pd-mini { position: relative; display: block; width: 84px; height: 86px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px rgba(32, 37, 42, 0.12); overflow: hidden; }
.pd-mini > * { position: absolute; }
.pd-mb { left: 0; right: 0; top: 0; height: 0; }
.pd-card[data-look="inkBand"] .pd-mb { height: 18px; background: #20252a; box-shadow: 0 1.5px 0 #258566; }
.pd-card[data-look="midnight"] .pd-mb { height: 20px; background: #0e1114; box-shadow: 0 1.5px 0 #6bb894; }
.pd-card[data-look="sand"] .pd-mb { height: 17px; background: #6b4d2e; box-shadow: 0 1.5px 0 #e0ba7a; }
.pd-card[data-look="forge"] .pd-mb { height: 19px; background: #145c47; box-shadow: 0 2px 0 #c7ebd6; }
.pd-card[data-look="harborSerif"] .pd-mini { box-shadow: inset 2px 0 0 rgba(31, 122, 97, 0.55), inset 0 0 0 1px rgba(32, 37, 42, 0.12); }
.pd-ml { left: 10px; right: 26px; top: 32px; height: 4px; border-radius: 2px; background: #e2e6e4; }
.pd-ml.s { top: 42px; right: 40px; } .pd-ml:nth-of-type(4) { top: 52px; }
.pd-mini b { right: 8px; bottom: 8px; font-family: var(--serif); font-size: 12px; font-weight: 600; color: var(--q-text); }
.pd-card small { display: block; margin-top: 7px; text-align: center; font-size: 10.5px; font-weight: 600; color: var(--q-muted); white-space: nowrap; }
.pd-sel { position: absolute; left: 0; top: 7px; width: 90px; height: 92px; margin-left: -3px; border-radius: 13px; box-shadow: inset 0 0 0 2px var(--q-em); }
.pd-page { left: 24px; top: 184px; width: 400px; height: 518px; transform: scale(0.8625); transform-origin: 0 0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 14px 30px rgba(0, 0, 0, 0.12); }
.pd-slot { left: 24px; top: 184px; width: 345px; height: 447px; border-radius: 6px; border: 1.5px dashed rgba(32, 37, 42, 0.2); background: rgba(32, 37, 42, 0.03); opacity: 0; }

/* Your mark */
.pd-mark { width: 393px; height: 886px; background: var(--q-bg); visibility: hidden; }
.pd-mark > * { position: absolute; left: 0; top: 0; }
.pd-mesh { inset: 0; width: 393px; height: 886px; }
.pd-sb { width: 393px; height: 50px; }
.pd-step { left: 28px; top: 70px; display: flex; align-items: center; gap: 5px; }
.pd-step i { width: 18px; height: 4px; border-radius: 2px; background: rgba(32, 37, 42, 0.12); }
.pd-step i.on { width: 30px; background: var(--q-em); }
.pd-step span { margin-left: 10px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; color: var(--q-faint); white-space: nowrap; }
.pd-mt { left: 28px; top: 104px; font-size: 34px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }
.pd-ms { left: 28px; top: 152px; font-size: 15px; color: var(--q-muted); }
.pd-mn { left: 28px; top: 182px; font-size: 12px; font-weight: 500; color: var(--q-faint); }
.pd-lh { left: 28px; top: 210px; width: 337px; height: 150px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px rgba(215, 219, 218, 0.9), 0 8px 20px rgba(0, 0, 0, 0.05); }
.pd-lh > * { position: absolute; }
.pd-lhm { left: 20px; top: 24px; width: 50px; height: 50px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: #0e252d; color: #fff; }
.pd-lhm b { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.pd-lhm svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.pd-lhm[data-mark="teal"], .pd-mcm[data-mark="teal"] { background: #26948c; }
.pd-lhm[data-mark="line"], .pd-mcm[data-mark="line"] { background: #fff; color: #0e252d; box-shadow: inset 0 0 0 2px #0e252d; }
.pd-lhm[data-mark="logo"] svg { opacity: 1; }
.pd-lhm[data-mark="logo"] b { opacity: 0; }
.pd-lhn { left: 84px; top: 26px; }
.pd-lhn b { display: block; font-family: var(--serif); font-size: 18px; font-weight: 600; }
.pd-lhn small { display: block; margin-top: 3px; font-size: 9px; font-weight: 650; letter-spacing: 0.14em; color: var(--q-em); }
.pd-lhn i { display: block; margin-top: 9px; width: 150px; height: 5px; border-radius: 3px; background: #e5e9e7; }
.pd-lhn i + i { width: 110px; margin-top: 6px; }
.pd-lh em { right: 20px; top: 28px; font-style: normal; font-family: var(--serif); font-size: 15px; letter-spacing: 0.16em; color: var(--q-slate); }
.pd-sty { left: 28px; top: 392px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; color: var(--q-faint); }
.pd-mc { top: 416px; width: 105px; height: 104px; border-radius: 22px; background: var(--q-surface); box-shadow: inset 0 0 0 1px #d7dbda; text-align: center; }
.pd-mcm { display: grid; place-items: center; width: 52px; height: 52px; margin: 12px auto 0; border-radius: 12px; background: #0e252d; color: #fff; }
.pd-mcm b { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.pd-mc small { display: block; margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--q-muted); }
.pd-msel { left: 0; top: 416px; width: 105px; height: 104px; border-radius: 22px; box-shadow: inset 0 0 0 1.75px var(--q-em); }
.pd-logo { left: 28px; top: 540px; width: 337px; height: 52px; border-radius: 26px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--q-em); font-size: 15px; transform: scale(calc(1 - var(--down, 0) * 0.04)); }
.pd-logo .sg { width: 18px; height: 18px; }
.pd-logo b { font-weight: 650; }
.pd-cont { left: 28px; top: 790px; width: 337px; height: 54px; border-radius: 27px; }

/* the share sheet */
.pd-dim { width: 393px; height: 886px; background: #000; opacity: 0; }
.pd-share { top: 296px; width: 393px; height: 590px; border-radius: 12px 12px 0 0; visibility: hidden; }
.pd-share > * { position: absolute; }
.pd-sh { left: 16px; right: 16px; top: 16px; height: 52px; }
.pd-thumb { position: absolute; left: 0; top: 0; width: 40px; height: 52px; border-radius: 4px; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16); overflow: hidden; }
.pd-thumb i { position: absolute; left: 0; right: 0; top: 0; height: 10px; background: #145c47; }
.pd-thumb i + i { top: 18px; left: 6px; right: 12px; height: 3px; background: #dfe3e1; }
.pd-thumb i + i + i { top: 26px; right: 18px; }
.pd-sh p { position: absolute; left: 52px; top: 7px; }
.pd-sh p b { display: block; font-size: 16px; font-weight: 600; }
.pd-sh p small { display: block; margin-top: 2px; font-size: 13px; color: #8a8a8e; }
.pd-x { position: absolute; right: 0; top: 8px; width: 30px; height: 30px; border-radius: 50%; background: rgba(118, 118, 128, 0.14); color: #6d6d72; padding: 8px; }
.pd-people { left: 0; top: 88px; width: 393px; height: 96px; display: flex; gap: 20px; padding: 0 20px; box-shadow: inset 0 -0.6px 0 rgba(60, 60, 67, 0.16); }
.pd-p { position: relative; width: 66px; text-align: center; }
.pd-p > b { display: grid; place-items: center; width: 60px; height: 60px; margin: 0 auto; border-radius: 50%; background: linear-gradient(180deg, #a5abb3, #858b94); color: #fff; font-size: 20px; font-weight: 600; }
.pd-pb { position: absolute; right: 2px; top: 40px; width: 22px; height: 22px; border-radius: 6px; padding: 4px; color: #fff; box-shadow: 0 0 0 2px #f2f2f7; }
.pd-pb.message { background: #34c759; } .pd-pb.mail { background: #1a8cff; }
.pd-p small { display: block; margin-top: 6px; font-size: 11px; color: #3c3c43; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-apps { left: 0; top: 200px; width: 393px; height: 104px; box-shadow: inset 0 -0.6px 0 rgba(60, 60, 67, 0.16); }
.pd-app { position: absolute; top: 4px; width: 66px; text-align: center; z-index: 1; }
.pd-app:nth-child(1) { left: 20px; } .pd-app:nth-child(2) { left: 94px; } .pd-app:nth-child(3) { left: 168px; } .pd-app:nth-child(4) { left: 242px; } .pd-app:nth-child(5) { left: 316px; }
.pd-app i { display: grid; place-items: center; width: 60px; height: 60px; margin: 0 auto; border-radius: 14px; padding: 13px; color: #fff; }
.pd-airdrop i { background: linear-gradient(180deg, #3ea3ff, #0a72e8); }
.pd-message i { background: linear-gradient(180deg, #5df27a, #23c44a); }
.pd-mail i { background: linear-gradient(180deg, #4fb2ff, #1a6ff3); }
.pd-folder i { background: #fff; color: #1a8cff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.pd-ellipsis i { background: #e5e5ea; color: #3c3c43; }
.pd-app small { display: block; margin-top: 6px; font-size: 11px; color: #3c3c43; }
.pd-ahl { position: absolute; left: 0; top: 0; width: 70px; height: 92px; border-radius: 16px; background: rgba(0, 0, 0, 0.07); opacity: 0; }
.pd-acts { left: 16px; top: 324px; width: 361px; height: 132px; }
.pd-acts .v { width: 20px; height: 20px; color: #3c3c43; }

/* Messages */
.pd-msg { top: 56px; width: 393px; height: 830px; border-radius: 12px 12px 0 0; visibility: hidden; }
.pd-msg > * { position: absolute; }
.pd-msg .qnav-l, .pd-msg .qnav-t { top: 22px; }
.pd-cancel { color: #007aff !important; }
.pd-to { left: 0; top: 62px; width: 393px; height: 44px; padding: 12px 16px; display: flex; gap: 8px; align-items: center; font-size: 16px; color: #8a8a8e; box-shadow: inset 0 -0.6px 0 rgba(60, 60, 67, 0.2), inset 0 0.6px 0 rgba(60, 60, 67, 0.2); }
.pd-to b { padding: 2px 8px; border-radius: 6px; font-weight: 400; color: #007aff; background: rgba(0, 122, 255, 0.1); }
.pd-thread { left: 0; top: 380px; width: 393px; }
.pd-bub { position: absolute; right: 16px; top: 0; width: 262px; padding: 6px 6px 10px; border-radius: 20px; background: #007aff; color: #fff; transform-origin: 100% 100%; opacity: 0; }
.pd-bub p { padding: 8px 10px 0; font-size: 16px; line-height: 1.3; }
.pd-att { display: block; position: relative; height: 62px; padding: 12px 12px 0 58px; border-radius: 15px; background: #fff; color: #111; }
.pd-attp { position: absolute; left: 12px; top: 8px; width: 36px; height: 46px; border-radius: 3px; background: linear-gradient(#145c47 0 9px, #fff 9px); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); }
.pd-att b { display: block; font-size: 14px; font-weight: 600; }
.pd-att small { display: block; margin-top: 2px; font-size: 12px; color: #8a8a8e; }
.pd-dl { position: absolute; right: 22px; top: 150px; font-size: 11.5px; color: #8a8a8e; opacity: 0; }
.pd-input { left: 0; top: 700px; width: 393px; height: 130px; padding: 10px 12px; }
.pd-in { position: absolute; left: 12px; right: 56px; top: 10px; padding: 8px; border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(60, 60, 67, 0.3); }
.pd-in p { padding: 8px 6px 0; font-size: 16px; color: #111; }
.pd-att-s { height: 54px; padding-top: 9px; }
.pd-att-s .pd-attp { top: 5px; height: 42px; }
.pd-send { position: absolute; right: 12px; top: 92px; width: 34px; height: 34px; border-radius: 50%; background: #007aff; color: #fff; padding: 7px; stroke-width: 2.6; }

/* the page in the air: the last look under, the next one rolling down over it */
.pd-air { position: absolute; left: 0; top: 0; width: 400px; height: 518px; transform-origin: 0 0; visibility: hidden; }
.pd-sheet { position: absolute; inset: 0; border-radius: 4px; overflow: hidden; }
.pd-a { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), 0 calc(14px + var(--lift, 0) * 30px) calc(36px + var(--lift, 0) * 44px) rgba(0, 0, 0, calc(0.26 + var(--lift, 0) * 0.16)); }
.pd-scan { position: absolute; left: 0; right: 0; top: -2px; height: 4px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.95) 20%, rgba(255, 255, 255, 0.95) 80%, rgba(255, 255, 255, 0)); box-shadow: 0 0 12px 3px rgba(255, 255, 255, 0.55); opacity: 0; }