/* Every Apple device: one screen of Qiv pieces, laid out as each platform would lay it out. */
.app-plat { overflow: hidden; }
.pt .mp { overflow: hidden; }
/* the Mac's desktop picture: a smooth sweep, harbour green into evening blue */
.pt-wall { background: linear-gradient(150deg, #2e6b52 0%, #1d5040 22%, #123d2d 46%, #0d2a22 64%, #12304a 84%, #1b4a6b 100%); }
.pt-tvbg { background: linear-gradient(170deg, #17251f 0%, #121618 38%, #0b0d0f 100%); }
.pt-menubar { display: flex; align-items: center; gap: 2px; padding: 0 12px; background: rgba(246, 246, 246, 0.86); color: #1d1d1f; font-size: 13px; box-shadow: 0 0.6px 0 rgba(0, 0, 0, 0.14); }
.pt-menubar b { padding: 0 10px; font-weight: 700; }
.pt-menubar span { padding: 0 9px; }
.pt-menubar em { margin-left: auto; font-style: normal; padding-right: 6px; }
.pt-win { background: #f5f6f5; box-shadow: 0 0 0 0.6px rgba(0, 0, 0, 0.22), 0 18px 36px rgba(0, 0, 0, 0.32); }
.pt-vwin { background: rgba(84, 92, 89, 0.5); box-shadow: inset 0 0 0 1.2px rgba(255, 255, 255, 0.24); }
.pt-mesh { pointer-events: none; }
.pt-sb .sb-ic { right: 30px; }
.pt-sbpad { width: 1080px; height: 26px; font-size: 13px; font-weight: 600; color: var(--q-text); }
.pt-sbpad b { position: absolute; left: 22px; top: 6px; }
.pt-sbpad span { position: absolute; left: 62px; top: 6px; font-weight: 500; }
.pt-sbpad em { position: absolute; right: 20px; top: 6px; display: flex; gap: 6px; align-items: center; }
.pt-sbpad em .sg { width: 15px; height: 12px; stroke-width: 2.4; }
.pt-sbpad em i { width: 23px; height: 11px; border-radius: 3px; box-shadow: inset 0 0 0 1.2px currentColor; }
.pt-dock { box-shadow: inset 0 0 0 1px rgba(32, 37, 42, 0.06), 0 8px 22px rgba(0, 0, 0, 0.08); }
.pt-tab { color: #6b7276; }
/* visionOS: a control lights up while you look at it */
.pt-tab::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(255, 255, 255, calc(var(--look, 0) * 0.26)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, calc(var(--look, 0) * 0.4)); }
.pt-tab .ti { position: absolute; left: calc(var(--ix, 0) * 1px); top: calc(var(--iy, 0) * 1px); width: calc(var(--is, 22) * 1px); height: calc(var(--is, 22) * 1px); opacity: var(--io, 1); }
.pt-tab .tl { position: absolute; left: calc(var(--lx, 0) * 1px); top: calc(var(--ly, 0) * 1px); font-size: calc(var(--fs, 10) * 1px); font-weight: 600; white-space: nowrap; opacity: var(--lo, 1); transform: translateX(calc(var(--lc, 1) * -50%)); }
/* a page dot keeps its own size and is gone early, so a tab growing out of it never shows a grey capsule */
.pt-tab .td { position: absolute; left: 0; top: 0; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: clamp(0, calc((var(--dot, 0) - 0.5) * 2), 1); }
.pt-lights { display: flex; gap: 8px; }
.pt-lights i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 0.6px rgba(0, 0, 0, 0.15); }
.pt-lights i:nth-child(2) { background: #febc2e; } .pt-lights i:nth-child(3) { background: #28c840; }
.pt-title, .pt-titleS, .pt-sub { white-space: nowrap; }
.pt-days { 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); }
.pt-days span { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-radius: 12px; }
.pt-days small { font-size: 9px; color: var(--q-muted); }
.pt-days b { font-size: 14px; font-weight: 650; }
.pt-days i { width: 4px; height: 4px; border-radius: 50%; margin-top: 2px; }
.pt-days i.g { background: var(--q-em); }
.pt-days .on { background: var(--q-slate); color: #fff; }
.pt-days .on small { color: rgba(255, 255, 255, 0.7); }
.pt-search { display: flex; align-items: center; gap: 6px; padding: 0 10px; background: rgba(118, 118, 128, 0.12); color: #8a8a8e; font-size: 13px; }
.pt-search .sg { width: 14px; height: 14px; flex: none; }
.pt-hero .ph-full { position: absolute; left: 0; top: 0; width: 100%; height: 238px; opacity: clamp(0, calc((0.6 - var(--mini, 0)) * 3), 1); }
.pt-hero .ph-full > * { position: absolute; }
.pt-hero .ph-wide { position: absolute; left: 0; top: 0; width: 100%; height: 148px; opacity: clamp(0, calc((var(--mini, 0) - 0.4) * 3), 1); }
.ph-wide > * { position: absolute; }
.ph-wide > small { left: 20px; top: 18px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; color: var(--q-em2); }
.phw-amt { left: 18px; top: 38px; font-family: var(--q-serif); font-size: 36px; font-weight: 600; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.phw-amt span { font-size: 0.52em; vertical-align: 0.74em; margin-left: 1px; }
.ph-wide p { left: 20px; top: 84px; font-size: 12.5px; color: rgba(255, 255, 255, 0.72); white-space: nowrap; }
.ph-wide p b { color: #fff; font-weight: 650; }
.phw-pills { left: 20px; top: 108px; display: flex; gap: 6px; }
.phw-pills i { font-style: normal; padding: 4px 9px; border-radius: 10px; font-size: 10.5px; color: rgba(255, 255, 255, 0.72); background: rgba(255, 255, 255, 0.08); white-space: nowrap; }
.phw-pills b { color: #fff; }
.phw-spark { right: 20px; top: 20px; width: 170px; height: 110px; }
.phw-spark small { display: block; font-size: 8px; font-weight: 700; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.5); }
.phw-spark .spk { width: 170px; height: 74px; margin-top: 12px; }
.pt-handle { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.pt-handle i { width: 36px; height: 4px; border-radius: 2px; background: rgba(23, 26, 28, 0.25); }
.pt-handle b { font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; color: var(--q-em); }
.pt-handle span { font-size: 10.5px; color: var(--q-muted); }
.pt-cols { width: 552px; height: 16px; }
.pt-cols span { position: absolute; top: 0; 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; }
.pt-cols i { width: 5px; height: 5px; border-radius: 50%; background: var(--q-faint); }
.pt-cols span:nth-child(2) i { background: var(--q-em); } .pt-cols span:nth-child(3) i { background: #3b6fd8; }
.pt-cols b { color: var(--q-text); }
.pt-card { background: #fff; box-shadow: inset 0 0 0 2.25px rgba(32, 37, 42, 0.1), 0 0 0 calc(var(--sel, 0) * 3px) rgba(37, 133, 102, 0.45); }
.pt-card .pc-full { position: absolute; inset: 0; opacity: clamp(0, calc((0.6 - var(--mini, 0)) * 3), 1); }
.pt-card .qc { width: 100%; }
.pt-card .pc-mini { position: absolute; left: 0; top: 0; width: 132px; height: 76px; padding: 8px 10px; opacity: clamp(0, calc((var(--mini, 0) - 0.4) * 3), 1); }
.pc-mini b, .pt-bc b { display: block; font-size: 11.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-mini small, .pt-bc small { display: block; margin-top: 1px; font-size: 9px; color: var(--q-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-mini em, .pt-bc em { display: block; margin-top: 4px; font-style: normal; font-family: var(--q-serif); font-size: 14px; font-weight: 650; }
.pt-bc { background: #fff; box-shadow: inset 0 0 0 1.5px rgba(32, 37, 42, 0.1); padding: 8px 10px; }
.pc-plate { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 calc(var(--focus, 0) * 4px) #ffffff, inset 0 0 0 calc(var(--hover, 0) * 2.5px) rgba(37, 133, 102, calc(var(--hover, 0) * 0.5)); background: rgba(37, 133, 102, calc(var(--hover, 0) * 0.06)); opacity: max(var(--focus, 0), min(1, var(--hover, 0))); pointer-events: none; }
.app-plat[data-layout="tv"] .pt-card { box-shadow: 0 calc(var(--focus, 0) * 24px) calc(var(--focus, 0) * 50px) rgba(0, 0, 0, calc(var(--focus, 0) * 0.55)); transform-origin: 50% 50%; }
.app-plat[data-layout="vision"] .pt-rail .qrl-seg { background: rgba(255, 255, 255, 0.16); }
.app-plat[data-layout="vision"] .pt-rail .qrl-seg b:not(.on) { color: rgba(255, 255, 255, 0.72); }
.app-plat[data-layout="vision"] .pt-rail .qcirc { background: rgba(255, 255, 255, 0.16); color: #fff; box-shadow: none; }
.app-plat[data-layout="tv"] .pt-tab .tl { font-weight: 650; }
.pt-new { white-space: nowrap; }
.app-plat[data-layout="mac"] .pt-new, .app-plat[data-layout="ipad"] .pt-new { font-size: 13px; }
.pt-pvw { 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; }
.pt-pvw i { width: 5px; height: 5px; border-radius: 50%; background: #6bb894; }
.pt-paper { width: 400px; height: 518px; border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 8px 18px rgba(0, 0, 0, 0.12); overflow: visible !important; }
/* the window turns to the quote you picked: the next page rises in over the last */
/* (the first page is gone before the next arrives, so no line of text is ever seen twice) */
.pt-paper .pp:not(.pp-b) { opacity: clamp(0, calc(1 - var(--swap, 0) / 0.42), 1); transform: scale(calc(1 - var(--swap, 0) * 0.04)); transform-origin: 50% 40%; }
.pt-paper .pp-b { opacity: clamp(0, calc((var(--swap, 0) - 0.5) / 0.5), 1); transform: translateY(calc((1 - var(--swap, 0)) * 22px)); }
.pt-cursor { width: 24px; height: 24px; overflow: visible !important; }