/* The desk, on iPad (1080 × 728, landscape): the PDF on the left, the open-quotes hero and the board. */
.app-desk > * { position: absolute; left: 0; top: 0; }
.dk-bg { width: 1080px; height: 728px; background: radial-gradient(90% 70% at 0% 0%, #e0eee8, rgba(224, 238, 232, 0) 60%), radial-gradient(70% 60% at 100% 100%, #e3ece8, rgba(227, 236, 232, 0) 70%), #eef1ef; }
.dk-sb { width: 1080px; height: 26px; font-size: 13px; font-weight: 600; }
.dk-sb b { position: absolute; left: 22px; top: 6px; }
.dk-sb span { position: absolute; left: 62px; top: 6px; font-weight: 500; }
.dk-sb em { position: absolute; right: 20px; top: 6px; display: flex; gap: 6px; align-items: center; }
.dk-sb em .sg { width: 15px; height: 12px; stroke-width: 2.4; }
.dk-sb em i { width: 23px; height: 11px; border-radius: 3px; box-shadow: inset 0 0 0 1.2px currentColor; position: relative; }
.dk-sb em i::after { content: ""; position: absolute; left: 2px; top: 2px; bottom: 2px; width: 15px; border-radius: 1.5px; background: currentColor; }
.dk-titles { left: 28px; top: 36px; width: 300px; height: 40px; overflow: hidden; }
.dk-t { position: absolute; left: 0; top: 0; font-family: var(--q-serif); font-size: 29px; font-weight: 600; letter-spacing: -0.01em; }
.dk-t2 { opacity: 0; }
.dk-days { left: 386px; top: 30px; width: 308px; height: 56px; border-radius: 18px; display: flex; gap: 4px; padding: 6px; background: rgba(255, 255, 255, 0.78); box-shadow: inset 0 0 0 1px rgba(32, 37, 42, 0.07); }
.dk-days span { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-radius: 12px; }
.dk-days small { font-size: 9px; color: var(--q-muted); }
.dk-days b { font-size: 14px; font-weight: 650; }
.dk-days i { width: 4px; height: 4px; border-radius: 50%; margin-top: 2px; }
.dk-days i.g { background: var(--q-em); }
.dk-days .on { background: var(--q-slate); color: #fff; }
.dk-days .on small { color: rgba(255, 255, 255, 0.7); }
.dk-moon { left: 948px; top: 38px; width: 40px; height: 40px; border-radius: 20px; }
.dk-gear { left: 996px; top: 38px; width: 40px; height: 40px; border-radius: 20px; }
.dk-pvw { left: 214px; top: 90px; z-index: 6; display: flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 11px; background: var(--q-slate); color: #fff; font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; }
.dk-pvw i { width: 5px; height: 5px; border-radius: 50%; background: #6bb894; }
.dk-paper { left: 28px; top: 100px; width: 400px; height: 518px; transform: scale(1.12); transform-origin: 0 0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 12px 28px rgba(0, 0, 0, 0.1); }
.dk-paper-b { visibility: hidden; opacity: 0; }
.dk-hero { left: 500px; top: 100px; width: 552px; height: 148px; border-radius: 20px; background: linear-gradient(150deg, #0e1114 0%, #122421 52%, #235a4b 100%); color: #fff; overflow: hidden; }
.dk-hp { position: absolute; left: 20px; top: 18px; }
.dk-hp2 { opacity: 0; }
.dk-hp small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; color: var(--q-em2); }
.dk-amt { display: block; margin-top: 6px; font-family: var(--q-serif); font-size: 36px; font-weight: 600; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.dk-amt span:last-child { font-size: 0.52em; vertical-align: 0.74em; margin-left: 1px; }
.dk-hp p { margin-top: 10px; font-size: 12.5px; color: rgba(255, 255, 255, 0.72); white-space: nowrap; }
.dk-hp p b { color: #fff; font-weight: 650; }
.dk-pills { display: flex; gap: 6px; margin-top: 10px; }
.dk-pills i { font-style: normal; padding: 4px 9px; border-radius: 10px; font-size: 10.5px; color: rgba(255, 255, 255, calc(0.72 + var(--hl, 0) * 0.28)); background: rgba(255, 255, 255, calc(0.08 + var(--hl, 0) * 0.14)); white-space: nowrap; }
.dk-pills b { color: #fff; }
.dk-spark { position: absolute; right: 20px; top: 20px; width: 170px; height: 110px; }
.dk-spark small { display: block; font-size: 8px; font-weight: 700; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.5); }
.dk-spark .spk { width: 170px; height: 74px; margin-top: 12px; }
.dk-handle { left: 500px; top: 256px; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.dk-handle i { width: 36px; height: 4px; border-radius: 2px; background: rgba(23, 26, 28, 0.25); }
.dk-handle b { font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; color: var(--q-em); }
.dk-handle span { font-size: 10.5px; font-weight: 500; color: var(--q-muted); }
.dk-board { width: 1080px; height: 728px; }
.dk-board > * { position: absolute; }
.dk-col { top: 280px; width: 132px; display: flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; color: var(--q-muted); white-space: nowrap; }
.dk-col i { width: 5px; height: 5px; border-radius: 50%; background: var(--q-faint); }
.dk-col b { color: var(--q-text); margin-left: 2px; }
.dk-est .dk-col:nth-of-type(2) i { background: var(--q-em); } .dk-est .dk-col:nth-of-type(3) i { background: #3b6fd8; }
.dk-inv .dk-col:nth-of-type(1) i { background: var(--q-owing); } .dk-inv .dk-col:nth-of-type(2) i { background: #e8b25c; } .dk-inv .dk-col:nth-of-type(3) i { background: var(--q-em); }
.dk-slot { width: 132px; height: 76px; }
.dk-card { position: absolute; inset: 0; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(32, 37, 42, 0.1), 0 0 0 calc(var(--sel, 0) * 2.5px) rgba(37, 133, 102, 0.6); padding: 8px 10px; overflow: hidden; transform: scale(calc(1 - var(--press, 0) * 0.05)); }
/* Qiv's PAID stamp on a paid card: a plate across the card's diagonal, in stamp-pad green */
.dk-card .dk-stamp { position: absolute; left: 50%; top: 50%; width: 109px; height: 28px; margin: -14px 0 0 -54.5px; display: grid; place-items: center; padding-left: 2.6px; border: 1.6px solid rgba(31, 115, 77, 0.8); border-radius: 3px; font-style: normal; font-family: ui-rounded, var(--sf); font-size: 16px; font-weight: 900; letter-spacing: 2.6px; color: rgba(31, 115, 77, 0.78); text-shadow: 1.2px 1px 0 rgba(31, 115, 77, 0.18), -0.7px 0.4px 0 rgba(31, 115, 77, 0.26); transform: rotate(-29.9deg); }
.dk-card .dk-stamp::after { content: ""; position: absolute; inset: 2.4px; border: 0.8px solid rgba(31, 115, 77, 0.5); border-radius: 1.5px; }
.dk-card b { display: block; font-size: 11.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-card small { display: block; margin-top: 1px; font-size: 9px; color: var(--q-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-card em { display: block; margin-top: 4px; font-style: normal; font-family: var(--q-serif); font-size: 14px; font-weight: 650; }
.dk-strip { position: absolute; left: 6px; right: 6px; bottom: 6px; height: 16px; border-radius: 8px; background: linear-gradient(180deg, #3b3f44, #2b3034); color: #fff; }
.dk-strip span { position: absolute; left: 22px; top: 3px; font-size: 7.5px; font-weight: 650; }
.dk-sk { position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; color: var(--q-slate); padding: 2px; }
.dk-rcv { position: absolute; left: 10px; bottom: 7px; font-size: 8.5px; font-weight: 650; color: #a8741f; }
.dk-new { box-shadow: inset 0 0 0 1.5px rgba(37, 133, 102, 0.55), 0 0 0 calc(var(--sel, 0) * 2.5px) rgba(37, 133, 102, 0.6); background: #f4faf7; }
.dk-landed { visibility: hidden; }
.dk-none { top: 304px; font-size: 11px; color: var(--q-faint); }
.dk-inv { opacity: 0; }
.dk-dots { left: 512px; top: 704px; width: 56px; height: 12px; border-radius: 6px; background: rgba(32, 37, 42, 0.07); }
.dk-dots i { position: absolute; top: 3.5px; width: 5px; height: 5px; border-radius: 50%; background: rgba(32, 37, 42, 0.22); }
.dk-dots i:nth-child(1) { left: 8px; } .dk-dots i:nth-child(2) { left: 19px; } .dk-dots i:nth-child(3) { left: 30px; } .dk-dots i:nth-child(4) { left: 41px; }
.dk-dots b { position: absolute; top: 3.5px; left: calc(6px + var(--act, 0) * 11px); width: 9px; height: 5px; border-radius: 3px; background: var(--q-em); }

/* iPadOS's menu bar, with the app's Go menu */
.dk-menubar { width: 1080px; height: 30px; z-index: 6; display: flex; align-items: center; gap: 4px; padding: 0 14px; background: rgba(250, 250, 250, 0.96); box-shadow: 0 0.6px 0 rgba(0, 0, 0, 0.12); font-size: 13.5px; opacity: 0; }
.dk-menubar b { padding: 4px 10px; font-weight: 700; }
.dk-menubar span { padding: 4px 10px; border-radius: 6px; }
.dk-menu { left: 128px; top: 34px; width: 220px; z-index: 6; padding: 6px; border-radius: 12px; background: rgba(252, 252, 252, 0.98); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.2), 0 0 0 0.5px rgba(0, 0, 0, 0.1); transform-origin: 10% 0; opacity: 0; }
.dk-menu p { position: relative; z-index: 1; display: flex; justify-content: space-between; height: 34px; align-items: center; padding: 0 12px; font-size: 14px; }
.dk-menu p b { font-weight: 400; }
.dk-menu p span { color: #8a8a8e; letter-spacing: 0.04em; }
.dk-menu > i:not(.dk-mhl) { display: block; height: 0.6px; margin: 4px 10px; background: rgba(60, 60, 67, 0.2); }
.dk-mhl { position: absolute; left: 6px; right: 6px; top: 0; height: 34px; border-radius: 8px; background: #3478f6; opacity: 0.16; }

/* the quote card, big in the air while it converts */
.dk-air { position: absolute; left: 0; top: 0; width: 360px; height: 190px; transform-origin: 0 0; visibility: hidden; }
.dk-big { position: absolute; inset: 0; border-radius: 26px; background: #fff; color: #171a1c; font-family: var(--sf); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 calc(14px + var(--lift, 0) * 24px) calc(34px + var(--lift, 0) * 36px) rgba(0, 0, 0, calc(0.2 + var(--lift, 0) * 0.14)); }
.dk-big > * { position: absolute; }
.dk-bav { left: 18px; top: 18px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #4b565d, #20252a); color: #fff; font-size: 18px; font-weight: 700; }
.dk-big > b { left: 76px; top: 21px; font-size: 15.5px; font-weight: 700; white-space: nowrap; }
.dk-bno { left: 76px; top: 43px; height: 17px; overflow: hidden; }
.dk-bno i { display: block; height: 17px; font-style: normal; font-size: 13px; color: #666f73; white-space: nowrap; transform: translateY(calc(var(--flip, 0) * -17px)); }
.dk-bchip { right: 18px; top: 18px; height: 24px; overflow: hidden; border-radius: 10px; }
.dk-bchip i { display: grid; place-items: center; height: 24px; padding: 0 10px; font-style: normal; font-size: 12px; font-weight: 650; transform: translateY(calc(var(--flip, 0) * -24px)); }
.dk-bchip i:first-child { color: #258566; background: rgba(37, 133, 102, 0.12); }
.dk-bchip i:last-child { color: #c74a42; background: rgba(199, 74, 66, 0.1); }
.dk-big > em { left: 18px; top: 78px; font-style: normal; font-family: var(--serif); font-size: 34px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dk-bslide { left: 18px; right: 18px; bottom: 18px; height: 46px; border-radius: 23px; overflow: hidden; background: linear-gradient(180deg, #3b3f44, #2b3034); color: #fff; }
.dk-bfill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--kn, 0) * 100%); background: linear-gradient(180deg, #23926a, #1f734d); }
.dk-blab { position: absolute; inset: 0; display: grid; place-items: center; padding-left: 40px; font-size: 15px; font-weight: 650; opacity: calc(1 - var(--kn, 0) * 1.6); }
.dk-bdone { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 15px; font-weight: 650; opacity: var(--done, 0); }
.dk-bdone .sg { width: 17px; height: 17px; }
.dk-bknob { position: absolute; top: 4px; left: calc(4px + var(--kn, 0) * (100% - 46px)); width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #20252a; opacity: calc(1 - var(--done, 0)); }
.dk-bknob .sg { width: 18px; height: 18px; }