/* After hours: the Lock Screen at 10:48 PM, the evening's paperwork in the air, and Qiv's Book. */
.app-tonight > * { position: absolute; left: 0; top: 0; }
.tn-book, .tn-lock { width: 393px; height: 886px; }
.tn-book > *, .tn-lock > * { position: absolute; left: 0; top: 0; }
.tn-book { transform-origin: 50% 40%; }
.tn-mesh { inset: 0; }
.tn-sb { width: 393px; height: 50px; }
.tn-brand { left: 20px; top: 60px; width: 36px; height: 36px; border-radius: 10px; }
.tn-title { left: 64px; top: 57px; }
.tn-sub { left: 65px; top: 86px; }
.tn-gear { left: 290px; top: 58px; width: 40px; height: 40px; border-radius: 20px; }
.tn-moon { left: 337px; top: 58px; width: 40px; height: 40px; border-radius: 20px; }
.tn-dots { left: 172px; top: 104px; width: 49px; height: 12px; border-radius: 6px; }
.tn-hero { left: 16px; top: 120px; width: 361px; height: 268px; border-radius: 26px; background: linear-gradient(150deg, #0e1114 0%, #122421 55%, #235a4b 100%); color: #fff; }
.tn-hero > * { position: absolute; }
.tn-hh { left: 18px; right: 18px; top: 16px; }
.tn-hh small { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; color: var(--q-em2); }
.tn-hh b { display: block; margin-top: 3px; font-size: 17px; font-weight: 650; }
.tn-hh span { position: absolute; right: 0; top: 2px; padding: 4px 8px; border-radius: 9px; font-size: 9px; font-weight: 700; letter-spacing: 0.1em; color: #85dbb3; background: rgba(107, 184, 148, 0.16); }
.tn-tile { padding: 11px 11px; border-radius: 15px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); transform-origin: 50% 50%; }
.tn-tile b { display: block; font-size: 22px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tn-tile small { display: block; margin-top: 6px; font-size: 8.5px; font-weight: 700; letter-spacing: 0.1em; }
.tn-tile em { display: block; margin-top: 2px; font-style: normal; font-size: 9.5px; color: rgba(255, 255, 255, 0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tn-glow { position: absolute; inset: 0; border-radius: inherit; background: rgba(107, 184, 148, 0.16); box-shadow: inset 0 0 0 1.5px #6bb894; opacity: 0; }
.tn-hero { overflow: hidden; }
.tn-list { position: absolute; left: 0; top: 0; width: 393px; height: 886px; }
.tn-list > * { position: absolute; }
.tn-bar { left: 0; right: 0; top: 0; height: 64px; opacity: 0; }
.tn-bar i { position: absolute; left: 18px; top: 18px; width: 4px; height: 28px; border-radius: 2px; background: var(--q-em2); }
.tn-bar small { position: absolute; left: 32px; top: 17px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; color: var(--q-em2); }
.tn-bar b { position: absolute; left: 32px; top: 31px; font-size: 16px; font-weight: 650; }
.tn-bar em { position: absolute; right: 18px; top: 24px; font-style: normal; font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.6); }
.tn-sec { left: 20px; top: 404px; display: flex; align-items: baseline; gap: 8px; }
.tn-sec b { font-size: 15px; font-weight: 700; }
.tn-sec span { font-size: 12px; color: var(--q-muted); }
.tn-row { left: 16px; width: 361px; height: 58px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px rgba(32, 37, 42, 0.08); }
.tn-row small { position: absolute; left: 16px; top: 11px; font-size: 9px; font-weight: 700; letter-spacing: 0.1em; color: var(--q-faint); }
.tn-row b { position: absolute; left: 16px; top: 26px; font-size: 15px; font-weight: 650; white-space: nowrap; }
.tn-row em { position: absolute; right: 16px; top: 13px; display: flex; flex-direction: column; align-items: flex-end; font-style: normal; font-size: 16px; font-weight: 700; color: var(--q-em); }
.tn-row em i { font-style: normal; font-size: 10.5px; font-weight: 500; color: var(--q-muted); }
.tn-add { left: 20px; top: 738px; width: 353px; height: 52px; border-radius: 26px; }
.tn-dock { left: 18px; top: 806px; width: 357px; height: 64px; border-radius: 32px; }
.tn-lens { left: 203px; top: 812px; width: 75px; height: 52px; border-radius: 26px; }
.tn-tab { top: 808px !important; width: 85px; height: 60px; }

/* the Lock Screen */
.tn-lock { z-index: 5; color: #fff; }
.tn-wall { width: 393px; height: 886px; background: linear-gradient(165deg, #1d3444 0%, #121c2a 38%, #151326 70%, #0b0d14 100%); }
.tn-lsb { width: 393px; height: 50px; }
.tn-date { left: 0; right: 0; width: 393px; top: 96px; text-align: center; font-size: 19px; font-weight: 600; color: rgba(255, 255, 255, 0.86); }
.tn-time { left: 0; width: 393px; top: 118px; text-align: center; font-size: 104px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; color: rgba(255, 255, 255, 0.94); font-variant-numeric: tabular-nums; }
.tn-note { left: 12px; top: 300px; width: 369px; height: 92px; border-radius: 22px; background: rgba(62, 70, 84, 0.86); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12); }
.tn-note > * { position: absolute; }
.tn-msg { left: 14px; top: 14px; width: 38px; height: 38px; border-radius: 9px; background: linear-gradient(180deg, #5df27a, #23c44a); color: #fff; padding: 7px; }
.tn-note p { left: 64px; right: 16px; top: 14px; display: flex; justify-content: space-between; font-size: 15px; }
.tn-note p b { font-weight: 650; }
.tn-note p small { font-size: 13px; color: rgba(255, 255, 255, 0.6); }
.tn-body { left: 64px; right: 16px; top: 34px; font-size: 14.5px; line-height: 1.3; color: rgba(255, 255, 255, 0.92); }
.tn-lb { top: 780px; width: 50px; height: 50px; border-radius: 25px; background: rgba(40, 46, 56, 0.72); display: grid; place-items: center; }
.tn-lb svg { width: 22px; height: 22px; color: #fff; }
.tn-torch { left: 46px; } .tn-cam { left: 297px; }
.tn-home { left: 129px; top: 868px; width: 135px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.85); }

/* the evening's paperwork, in the air */
.scrap { position: absolute; left: 0; top: 0; transform-origin: 0 0; visibility: hidden; font-family: var(--hand); }
.scrap > div { position: absolute; inset: 0; }
.sc-pad { background: repeating-linear-gradient(180deg, transparent 0 33px, rgba(70, 110, 170, 0.32) 33px 34px), #f7ea9c; padding: 50px 18px 0 44px; color: #2b3550; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42), 0 2px 4px rgba(0, 0, 0, 0.2); border-radius: 2px 2px 4px 4px; }
.sc-pad::before { content: ""; position: absolute; left: 34px; top: 0; bottom: 0; width: 1.5px; background: rgba(205, 70, 70, 0.55); }
.sc-holes { position: absolute; left: 0; right: 0; top: 0; height: 18px; background: #d8c56c; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12); }
.sc-pad p { font-size: 25px; line-height: 34px; font-weight: 600; white-space: nowrap; transform: rotate(-1.2deg); }
.sc-pad p:nth-child(3) { padding-left: 6px; } .sc-pad p:nth-child(5) { padding-left: 12px; }
.sc-pad s { text-decoration-thickness: 2px; opacity: 0.7; }
.sc-tag { background: #d8b98a; border-radius: 6px 6px 8px 8px; clip-path: polygon(22% 0, 78% 0, 100% 14%, 100% 100%, 0 100%, 0 14%); padding: 54px 14px 0; color: #3a2a14; text-align: center; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.38); }
.sc-hole { position: absolute; left: 50%; top: 18px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #0b120e; box-shadow: 0 0 0 4px #c9a777; }
.sc-tag small { display: block; font-size: 22px; font-weight: 600; line-height: 1; }
.sc-tag b { display: block; margin-top: 10px; font-size: 54px; font-weight: 700; line-height: 1; }
.sc-tag span { display: block; margin-top: 8px; font-size: 18px; }
.sc-card { background: #fbfaf6; border-radius: 6px; padding: 18px 18px; color: #16202a; font-family: var(--sf); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.36); }
.sc-card b { display: block; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.sc-card small { display: block; margin-top: 1px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #6b7a86; }
.sc-card span { display: block; margin-top: 3px; font-size: 12.5px; color: #3c4a55; }
.sc-card span:first-of-type { margin-top: 12px; }
.sc-card em { position: absolute; right: 14px; top: 16px; font-family: var(--hand); font-style: normal; font-size: 22px; font-weight: 700; color: #c43c32; transform: rotate(-8deg); }
.sc-rcpt { background: linear-gradient(180deg, #fbfaf4, #f2efe4); padding: 20px 16px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11.5px; line-height: 1.55; color: #2a2a28; text-align: center; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.36); -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 7px) no-repeat, conic-gradient(from -45deg at 50% 100%, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 7px repeat-x; mask: linear-gradient(#000 0 0) top / 100% calc(100% - 7px) no-repeat, conic-gradient(from -45deg at 50% 100%, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 7px repeat-x; }
.sc-rcpt b { display: block; font-size: 15px; letter-spacing: 0.14em; margin-bottom: 2px; }
.sc-rcpt span { display: block; }
.sc-rcpt i { display: block; height: 0; margin: 10px 0; border-top: 1.5px dashed rgba(0, 0, 0, 0.35); }
.sc-rcpt p { display: flex; justify-content: space-between; }
.sc-rcpt p.t { font-size: 15px; font-weight: 700; }
.sc-thanks { margin-top: 18px; letter-spacing: 0.2em; }
.sc-tally { background: #fffef8; border-radius: 3px; padding: 16px 18px; color: #26324d; background-image: repeating-linear-gradient(90deg, rgba(60, 90, 160, 0.12) 0 1px, transparent 1px 20px), repeating-linear-gradient(180deg, rgba(60, 90, 160, 0.12) 0 1px, transparent 1px 20px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.34); }
.sc-tally p { font-size: 23px; font-weight: 600; line-height: 1.25; white-space: nowrap; }
.sc-marks { font-size: 32px !important; letter-spacing: 0.06em; }
.sc-sticky { background: #ffd96a; padding: 22px 18px; color: #3b2d10; box-shadow: 0 16px 30px rgba(0, 0, 0, 0.34); }
.sc-sticky p { font-size: 25px; font-weight: 700; line-height: 1.2; }
.sc-sticky p:first-child { font-size: 30px; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }