/* TopLeft for Mac, 960 × 609 on the MacBook's glass. --mac (0 iPhone → 1 Mac) is interpolated per piece;
   --dk (dark appearance) is set on the app. Colours sampled from the app's own Mac captures. */
.app-mac { --dk: 0; --mac: 1; color: #1d1d1f; font-family: var(--sf); background: transparent; }
.app-mac .mp { font-family: var(--sf); }
.m-desk { background:
  radial-gradient(ellipse 70% 60% at 18% 22%, #cfe9d4 0%, rgba(207, 233, 212, 0) 70%),
  radial-gradient(ellipse 60% 70% at 88% 82%, #f1e3b4 0%, rgba(241, 227, 180, 0) 70%),
  radial-gradient(ellipse 50% 50% at 70% 10%, #dcefe9 0%, rgba(220, 239, 233, 0) 70%),
  linear-gradient(150deg, #bfdcc6, #e2e8d2 52%, #ecdcb6); }
.m-menu { display: flex; align-items: center; gap: 17px; padding: 0 14px; font-size: 12.5px; font-weight: 500; color: #1d1d1f; background: rgba(250, 250, 248, 0.55); box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.1); white-space: nowrap; }
.m-menu b { font-weight: 700; }
.m-menu em { font-style: normal; display: inline-flex; align-items: center; }
.mm-apple { display: inline-flex; margin-right: 2px; }
.mm-x { margin-left: auto; width: 24px; height: 18px; justify-content: center; border-radius: 5px; color: #1d1d1f; }
.mm-batt { width: 22px; height: 11px; border-radius: 3.5px; border: 1.1px solid rgba(0, 0, 0, 0.45); padding: 1.3px; }
.mm-batt i { display: block; width: 80%; height: 100%; border-radius: 1.5px; background: #1d1d1f; }

/* the window: the phone's own background becomes the Mac's window */
.m-win { overflow: hidden; background: color-mix(in oklab, #fdfdfd calc((1 - var(--dk)) * 100%), #262524);
  box-shadow: 0 calc(var(--mac) * 22px) calc(var(--mac) * 54px) rgba(0, 0, 0, calc(var(--mac) * 0.24)), 0 0 0 calc(var(--mac) * 0.6px) rgba(0, 0, 0, 0.3); }
.m-win::before { content: ""; position: absolute; inset: 0; background: linear-gradient(168deg, #d6ebe0 0%, #e6efec 20%, #eef2f5 44%, #f2f1f6 100%); opacity: calc(1 - var(--mac)); }
.m-wash { position: absolute; inset: 0; opacity: 0; }
.m-side { overflow: hidden; border-radius: calc(var(--r1) * 1px) calc(var(--r2) * 1px) calc(var(--r3) * 1px) calc(var(--r4) * 1px);
  background: color-mix(in oklab, color-mix(in oklab, #f9f8fd calc((1 - var(--mac)) * 100%), #efefee) calc((1 - var(--dk)) * 100%), #2c2a29);
  box-shadow: 0 10px 26px rgba(30, 40, 60, calc((1 - var(--mac)) * 0.08)), inset calc(var(--mac) * -0.6px) 0 0 rgba(0, 0, 0, 0.1); }
.m-sb { display: flex; justify-content: space-between; align-items: center; padding: 6px 28px 0 44px; font-size: 16.5px; font-weight: 600; color: #000; }

.ms-lights { display: flex; gap: 8px; align-items: center; }
.ms-lights i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.14); }
.ms-lights i:nth-child(2) { background: #febc2e; }
.ms-lights i:nth-child(3) { background: #28c840; }
.ms-toggle { display: grid; place-items: center; color: color-mix(in oklab, #6b6b70 calc((1 - var(--dk)) * 100%), #c8c8cc); }
.ms-search { display: flex; align-items: center; gap: 6px; padding-left: 8px; font-size: 12.5px; color: color-mix(in oklab, #8a8a8f calc((1 - var(--dk)) * 100%), #a0a0a5); background: color-mix(in oklab, rgba(0, 0, 0, 0.06) calc((1 - var(--dk)) * 100%), rgba(255, 255, 255, 0.1)); }
.ms-map { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; width: 166px; height: 60px; }
.mq { --on: 0; display: grid; place-items: center; font-size: 10.5px; font-weight: 600; color: color-mix(in oklab, rgba(29, 29, 31, 0.8) calc((1 - var(--dk)) * 100%), rgba(240, 240, 242, 0.88)); box-shadow: inset 0 0 0 calc(var(--on) * 2px) #1d1d1f; }
.mq-tl { background: color-mix(in oklab, #a8e3af calc((1 - var(--dk)) * 100%), #2c5d38); font-size: 12px; font-weight: 800; }
.mq-tr, .mq-bl { background: color-mix(in oklab, #fde58f calc((1 - var(--dk)) * 100%), #5a4c1c); }
.mq-br { background: color-mix(in oklab, #f8a3a3 calc((1 - var(--dk)) * 100%), #632b29); font-weight: 500; }
.ms-head { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; white-space: nowrap; color: color-mix(in oklab, #8a8a8f calc((1 - var(--dk)) * 100%), #8f8f94); }
.ms-row { display: flex; align-items: center; justify-content: space-between; padding: 0 8px; font-size: 13px; white-space: nowrap; color: color-mix(in oklab, #1d1d1f calc((1 - var(--dk)) * 100%), #ececee); }
.ms-c { font-weight: 700; font-size: 12px; color: color-mix(in oklab, #8a8a8f calc((1 - var(--dk)) * 100%), #9b9ba0); }
.ms-add { justify-content: flex-start; gap: 9px; }
.ms-add .sf { color: #34c759; }
/* the horizons: chips on the iPhone, rows on the Mac */
.ms-hz { --bump: 0; padding: 0; }
.ms-hz .ms-l { position: absolute; top: 50%; left: calc(var(--mac) * 8px + (1 - var(--mac)) * 50%); height: 20px; transform: translate(calc((1 - var(--mac)) * -50%), -50%); }
.ms-hz .ms-a, .ms-hz .ms-b { position: absolute; left: 0; top: 0; white-space: nowrap; line-height: 20px; font-size: calc(15px - var(--mac) * 2px); letter-spacing: -0.01em; }
.ms-hz .ms-a { position: relative; }
.ms-hz .ms-b { opacity: 0; }
.ms-hz .ms-c { position: absolute; right: 8px; top: 50%; transform: translateY(-50%) scale(calc(1 + var(--bump) * 0.3)); opacity: var(--mac); color: color-mix(in oklab, color-mix(in oklab, #8a8a8f calc((1 - var(--bump)) * 100%), #1f8a3f) calc((1 - var(--dk)) * 100%), #9b9ba0); }
.m-sel { z-index: 7; }

/* the title: big and centred on the iPhone, the toolbar's on the Mac */
.m-title { overflow: visible; }
.m-title span { position: absolute; top: 0; left: calc(var(--lc) * 50%); font-size: 31px; line-height: 40px; font-weight: 700; letter-spacing: -0.012em; white-space: nowrap; color: color-mix(in oklab, #000 calc((1 - var(--dk)) * 100%), #f2f2f4); }
.m-title .mt-b { opacity: 0; }
.m-pro { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; color: color-mix(in oklab, #1d1d1f calc((1 - var(--dk)) * 100%), #f0f0f2);
  background: color-mix(in oklab, #f5f5f6 calc((1 - var(--dk)) * 100%), #3b3a39); box-shadow: inset 0 0 0 0.6px rgba(0, 0, 0, 0.14), 0 1px 2px rgba(0, 0, 0, 0.06); }
.m-tb { display: grid; place-items: center; color: color-mix(in oklab, #4a4a4f calc((1 - var(--dk)) * 100%), #dcdce0); }
.m-gear, .m-moon { background: color-mix(in oklab, rgba(255, 255, 255, calc(var(--gb) * 0.74)) calc((1 - var(--dk)) * 100%), rgba(70, 70, 74, calc(var(--gb) * 0.9)));
  box-shadow: 0 3px 10px rgba(30, 40, 50, calc(var(--gb) * 0.07)), inset 0 0 0 0.6px rgba(0, 0, 0, calc(var(--gb) * 0.09)); color: color-mix(in oklab, #1d1d1f calc((1 - var(--dk)) * 100%), #f0f0f2); }
.m-tb span { display: grid; place-items: center; line-height: 0; }
.m-gear svg, .m-moon svg { width: calc(var(--ic) * 1px); height: calc(var(--ic) * 1px); }
.m-ax { font-size: 13px; line-height: 18px; font-weight: 500; white-space: nowrap; color: #8b8b90; }
.m-axr span { position: absolute; left: 7px; top: 64px; transform: translate(-50%, -50%) rotate(-90deg); }

/* the four corners: the iPhone's pastel tiles become the Mac's, with a hairline */
.mt[data-q="tl"] { --qp: #ccecd1; --qm: #b3e8b9; --qd: #2c5d38; --qs: rgba(52, 140, 70, 0.28); }
.mt[data-q="tr"], .mt[data-q="bl"] { --qp: #fdedb5; --qm: #fcec99; --qd: #5a4c1c; --qs: rgba(170, 140, 30, 0.3); }
.mt[data-q="br"] { --qp: #fcd4cf; --qm: #f2aeac; --qd: #632b29; --qs: rgba(180, 70, 70, 0.28); }
.mt { background: color-mix(in oklab, color-mix(in oklab, var(--qp) calc((1 - var(--mac)) * 100%), var(--qm)) calc((1 - var(--dk)) * 100%), var(--qd));
  box-shadow: inset 0 0 0 calc(var(--mac) * 1px) color-mix(in oklab, var(--qs) calc((1 - var(--dk)) * 100%), rgba(255, 255, 255, 0.06)), 0 calc(5px - var(--mac) * 5px) 8px -3px rgba(20, 40, 30, calc((1 - var(--mac)) * 0.1)); }
.mt-alt { position: absolute; left: 12px; right: 12px; top: 36px; display: flex; flex-direction: column; gap: 6px; }
.ma { position: relative; padding-left: 20px; font-size: 13px; line-height: 17px; white-space: nowrap; color: color-mix(in oklab, #1d1d1f calc((1 - var(--dk)) * 100%), #f1f1f3); }
.ma .mr-dia { top: 4px; }
.mt-title { font-size: 12px; font-weight: 650; white-space: nowrap; }
.mt-title-tl { color: color-mix(in oklab, #2b6e37 calc((1 - var(--dk)) * 100%), #e6f5e6); }
.mt-title-tr, .mt-title-bl { color: color-mix(in oklab, #7a6411 calc((1 - var(--dk)) * 100%), #faf1cf); }
.mt-title-br { color: color-mix(in oklab, #8f3533 calc((1 - var(--dk)) * 100%), #fbe1df); }
.mt-field { --focus: 0; display: flex; align-items: center; padding-left: 10px; font-size: 13px; white-space: nowrap;
  background: color-mix(in oklab, rgba(255, 255, 255, calc(0.55 + var(--focus) * 0.35)) calc((1 - var(--dk)) * 100%), rgba(255, 255, 255, 0.12));
  box-shadow: inset 0 0 0 calc(var(--focus) * 1.5px) rgba(10, 132, 255, 0.85); }
.mf-ph { color: color-mix(in oklab, rgba(60, 60, 67, 0.45) calc((1 - var(--dk)) * 100%), rgba(235, 235, 245, 0.45)); }
.mf-txt { position: absolute; left: 10px; color: #1d1d1f; }
.mf-caret { position: absolute; left: 0; top: 7px; width: 1.5px; height: 15px; background: #0a84ff; opacity: 0; }

/* a task: the narrow, wrapping copy (iPhone) and the one-line copy (Mac), crossfaded in flight */
.mr { --wa: 0; --wb: 1; font-size: 13px; line-height: 17px; }
.mr-dia { position: absolute; left: 1px; top: 4.5px; width: 9px; height: 9px; border-radius: 1.6px; transform: rotate(45deg);
  background: linear-gradient(135deg, #8fd3ff, #1a8cf6 55%, #0a63c6); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.45); }
.mr-chk { position: absolute; left: -1px; top: 2px; line-height: 0; color: #8e8e93; opacity: 0; }
.mr.done .mr-dia { opacity: 0; }
.mr.done .mr-chk { opacity: 1; }
.mr-a { position: absolute; left: 15px; top: 0; width: 149px; font-size: 11.5px; line-height: 16px; opacity: var(--wa); color: var(--tx, #1e4d2b); }
.mr-b { position: absolute; left: 20px; top: 0; white-space: nowrap; opacity: var(--wb); color: color-mix(in oklab, #1d1d1f calc((1 - var(--dk)) * 100%), #f1f1f3); }
.mr[data-q="tl"] { --tx: #1e4d2b; }
.mr[data-q="tr"], .mr[data-q="bl"] { --tx: #5b4810; }
.mr[data-q="br"] { --tx: #7b2f2c; }
.mr.done .mr-a, .mr.done .mr-b { text-decoration: line-through; color: #8e8e93; }

/* the moved task in flight, the pointer, and the menus */
.m-fly { position: absolute; left: 0; top: 0; z-index: 60; visibility: hidden; padding: 2px 10px 2px 26px; border-radius: 6px; font-style: normal; font-size: 13px; line-height: 17px; white-space: nowrap; color: #1d1d1f; transform-origin: 0 50%;
  background: rgba(255, 255, 255, 0.92); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2); }
.m-fly .mr-dia { left: 9px; top: 6.5px; }
.m-cursor { position: absolute; left: 0; top: 0; z-index: 90; visibility: hidden; line-height: 0; transform-origin: 3px 3px; filter: drop-shadow(0 1.5px 2px rgba(0, 0, 0, 0.3)); }
.m-ctx { position: absolute; inset: 0; z-index: 70; visibility: hidden; }
.cm { position: absolute; left: 0; top: 0; width: 196px; padding: 5px; border-radius: 10px; transform-origin: 0 0;
  background: rgba(246, 246, 246, 0.97); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22), 0 0 0 0.6px rgba(0, 0, 0, 0.18); }
.cm-sub { width: 140px; visibility: hidden; }
.cm-i { position: relative; z-index: 1; display: flex; align-items: center; height: 22px; padding: 0 10px 0 24px; font-size: 13px; color: #1d1d1f; white-space: nowrap; }
.cm-i.on { color: #fff; }
.cm-del { color: #d70015; }
.cm-tog { position: absolute; left: 7px; top: 6px; width: 10px; height: 10px; }
.cm-arr { position: absolute; right: 8px; top: 5px; line-height: 0; color: #6e6e73; }
.cm-i.on .cm-arr { color: #fff; }
.cm-sep { display: block; height: 0.6px; margin: 5px 10px; background: rgba(0, 0, 0, 0.14); }
.cm-hi { position: absolute; left: 0; top: 0; width: 186px; height: 22px; border-radius: 5px; background: #0a84ff; z-index: 0; opacity: 0; }
.cm-hi2 { width: 130px; }

/* the mini calendar at the bottom of the sidebar */
.ms-cal { --dim: 0; border-radius: 10px; padding: 6px 7px; background: color-mix(in oklab, rgba(255, 255, 255, 0.55) calc((1 - var(--dk)) * 100%), rgba(255, 255, 255, 0.06)); opacity: calc(1 - var(--dim) * 0.6); }
.mc-shelf { display: flex; align-items: center; gap: 6px; height: 18px; font-size: 11px; color: color-mix(in oklab, #1d1d1f calc((1 - var(--dk)) * 100%), #ececee); }
.mc-shelf b { font-weight: 500; }
.mc-shelf span { margin-left: auto; display: flex; align-items: center; gap: 5px; color: #8a8a8f; line-height: 0; }
.mc-dia { --away: 0; display: inline-flex; line-height: 0; color: color-mix(in oklab, #8a8a8f calc((1 - var(--away)) * 100%), #1d1d1f); }
.mc-days, .mc-months, .mc-years { position: absolute; left: 7px; right: 7px; top: 27px; }
.mc-wd { display: grid; grid-template-columns: repeat(7, 1fr); height: 13px; font-size: 8.5px; color: #9a9aa0; }
.mc-wd i, .mc-grid i { font-style: normal; display: grid; place-items: center; }
.mc-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 16px; font-size: 10px; color: color-mix(in oklab, #1d1d1f calc((1 - var(--dk)) * 100%), #e6e6e8); }
.mc-grid i.out { color: #a8a8ad; }
.mc-ring { position: absolute; left: 3.1px; top: 13px; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px #34c759; background: rgba(52, 199, 89, 0.1); }
.mc-band { position: absolute; left: 0; right: 0; top: 13px; height: 16px; border-radius: 8px; box-shadow: inset 0 0 0 1px #34c759; background: rgba(52, 199, 89, 0.1); opacity: 0; }
.mc-months, .mc-years { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 26px; font-size: 11px; opacity: 0; color: color-mix(in oklab, #1d1d1f calc((1 - var(--dk)) * 100%), #e6e6e8); }
.mc-months i, .mc-years i { font-style: normal; display: grid; place-items: center; }
.mc-box { position: absolute; left: 2px; top: 1px; width: 48px; height: 24px; box-shadow: inset 0 0 0 1px #34c759; background: rgba(52, 199, 89, 0.1); }

/* one corner across every horizon */
.m-focus { position: absolute; left: 198px; top: 80px; width: 750px; height: 522px; z-index: 40; visibility: hidden; overflow: hidden; padding: 6px 16px 0;
  border-radius: 0 0 12px 0; background: color-mix(in oklab, #e3f5e6 calc((1 - var(--dk)) * 100%), #23302a); }
.m-focus section { margin-bottom: 9px; }
.m-focus header { display: flex; justify-content: space-between; align-items: center; height: 22px; padding: 0 4px; font-size: 11.5px; color: #6c7a70; }
.m-focus header b { font-weight: 600; color: #4d5a51; }
.mf-r { display: flex; align-items: center; gap: 9px; height: 25px; padding: 0 9px; font-size: 13px; color: #1d1d1f; background: rgba(52, 199, 89, 0.22); }
.mf-r + .mf-r { margin-top: 1px; }
.mf-r .sf { color: #1d1d1f; flex: none; }
.mf-r.done span { text-decoration: line-through; color: #6b7a70; }
.mf-r.done .sf { color: #34c759; }
.mf-add { height: 22px; padding: 0 9px; display: flex; align-items: center; font-size: 12.5px; color: #7d8a81; background: rgba(52, 199, 89, 0.1); }

/* the menu-bar extra: 250 × 250 under its icon, washed in the corner's colour */
.m-pop { position: absolute; left: 640px; top: 27px; z-index: 75; visibility: hidden; }
.pp-win { position: relative; width: 250px; height: 250px; border-radius: 12px; overflow: hidden; background: color-mix(in oklab, #f7f7f6 calc((1 - var(--dk)) * 100%), #2b2a29);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.24), 0 0 0 0.6px rgba(0, 0, 0, 0.22); }
.pp-wash { position: absolute; inset: 0; }
.pp-qs { position: absolute; left: 40px; right: 0; top: 2px; height: 30px; display: flex; }
.pp-q { --on: 0; flex: 1; display: grid; place-items: center; color: color-mix(in oklab, #1d1d1f calc((1 - var(--on)) * 100%), #1f9e45); opacity: calc(0.9 - var(--on) * 0.15); }
.pp-q[data-q="tr"], .pp-q[data-q="bl"] { color: color-mix(in oklab, #1d1d1f calc((1 - var(--on)) * 100%), #b98c00); }
.pp-q[data-q="br"] { color: color-mix(in oklab, #1d1d1f calc((1 - var(--on)) * 100%), #d1342b); }
.pp-q .sf { stroke-width: calc(1.5px + var(--on) * 0.6px); }
.pp-rail { position: absolute; left: 0; top: 32px; width: 40px; display: flex; flex-direction: column; }
.pp-rail b { --on: 0; height: 38px; display: grid; place-items: center; font-family: var(--sfr); font-size: calc(19px + var(--on) * 6px); font-weight: calc(250 + var(--on) * 500); color: #1d1d1f; }
.pp-c { position: absolute; left: 40px; right: 0; top: 38px; text-align: center; font-size: 12px; color: rgba(29, 29, 31, 0.7); }
.pp-rows { position: absolute; left: 46px; right: 8px; top: 62px; display: flex; flex-direction: column; gap: 7px; }
.pp-rows { --shift: 0; }
.pp-rows p + p { transform: translateY(calc(var(--shift) * -1px)); }
.pp-rows p { --fill: 0; position: relative; display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; line-height: 16px; color: rgba(29, 29, 31, 0.86); }
.pp-rows p .sf { flex: none; margin-top: -0.5px; opacity: 0.72; }
.pp-rows p::before { content: ""; position: absolute; left: 4.6px; top: 4.1px; width: 8px; height: 8px; border-radius: 50%; background: #1d1d1f; opacity: calc(var(--fill) * 0.72); }
.pp-rows p span { text-decoration: line-through; text-decoration-color: rgba(29, 29, 31, var(--fill)); }
.pp-foot { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; padding-left: 13px; display: flex; align-items: center; color: #3a3a3c; box-shadow: inset 0 0.6px 0 rgba(0, 0, 0, 0.14); }

/* Settings ▸ Board */
.m-set { position: absolute; inset: 0; z-index: 80; visibility: hidden; }
.st-win { position: absolute; left: 0; top: 0; width: 460px; padding: 0 18px 16px; border-radius: 12px; transform-origin: 50% 0; font-size: 13px; color: #1d1d1f;
  background: color-mix(in oklab, #ecebea calc((1 - var(--dk)) * 100%), #2a2928); box-shadow: 0 22px 60px rgba(0, 0, 0, 0.3), 0 0 0 0.6px rgba(0, 0, 0, 0.25); }
.st-bar { position: relative; height: 40px; display: grid; place-items: center; font-weight: 650; color: color-mix(in oklab, #1d1d1f calc((1 - var(--dk)) * 100%), #ececee); }
.st-lights { position: absolute; left: -4px; top: 14px; display: flex; gap: 8px; }
.st-lights i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.st-lights i + i { background: color-mix(in oklab, #d6d6d6 calc((1 - var(--dk)) * 100%), #4a4948); }
.st-group { border-radius: 9px; padding: 0 12px; background: color-mix(in oklab, #f7f7f6 calc((1 - var(--dk)) * 100%), #353433); box-shadow: inset 0 0 0 0.6px rgba(0, 0, 0, 0.08); margin-top: 10px; }
.st-group p { display: flex; justify-content: space-between; align-items: center; height: 40px; color: color-mix(in oklab, #1d1d1f calc((1 - var(--dk)) * 100%), #ececee); }
.st-win small { display: block; padding: 5px 4px 0; font-size: 11.5px; color: color-mix(in oklab, #86868b calc((1 - var(--dk)) * 100%), #98989d); }
.st-group em { font-style: normal; display: inline-flex; align-items: center; gap: 5px; color: color-mix(in oklab, #3a3a3c calc((1 - var(--dk)) * 100%), #d0d0d4); }
.st-seg { position: relative; display: flex; padding: 2px; border-radius: 7px; background: color-mix(in oklab, rgba(0, 0, 0, 0.07) calc((1 - var(--dk)) * 100%), rgba(255, 255, 255, 0.1)); }
.st-seg b { --on: 0; position: relative; z-index: 1; width: 62px; height: 22px; display: grid; place-items: center; font-size: 12px; font-weight: calc(400 + var(--on) * 200);
  color: color-mix(in oklab, #1d1d1f calc((1 - var(--dk)) * 100%), #ececee); }
.st-wk b:first-of-type { font-weight: 600; }
.st-thumb { position: absolute; left: 2px; top: 2px; width: 62px; height: 22px; border-radius: 6px; background: color-mix(in oklab, #ffffff calc((1 - var(--dk)) * 100%), #636366); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16); }
.st-wk .st-thumb { transform: none; }
.st-tog { width: 32px; height: 19px; border-radius: 10px; background: #34c759; position: relative; }
.st-tog::after { content: ""; position: absolute; right: 2px; top: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }

/* dark appearance: the desktop dims with the app, the menu bar goes dark */
.app-mac .m-desk::after { content: ""; position: absolute; inset: 0; background: #151917; opacity: calc(var(--dk) * 0.78); }
.app-mac .m-menu { background: color-mix(in oklab, rgba(250, 250, 248, 0.55) calc((1 - var(--dk)) * 100%), rgba(30, 30, 30, 0.6)); color: color-mix(in oklab, #1d1d1f calc((1 - var(--dk)) * 100%), #f2f2f4); }
.mm-batt { border-color: color-mix(in oklab, rgba(0, 0, 0, 0.45) calc((1 - var(--dk)) * 100%), rgba(255, 255, 255, 0.55)); }
.mm-batt i { background: currentColor; }

.m-moon span { grid-area: 1 / 1; }
.m-moon .mo-s { opacity: var(--dk); }
.m-moon .mo-m { opacity: calc(1 - var(--dk)); }

/* the free state: Pro horizons wear a lock instead of a count; choosing one shows what unlocks it */
.ms-hz { --lock: 0; }
.ms-hz .ms-c { opacity: calc(var(--mac) * (1 - var(--lock))); }
.ms-lock { position: absolute; right: 9px; top: 50%; transform: translateY(-50%) scale(calc(0.6 + var(--lock) * 0.4)); line-height: 0; color: #8a8a8f; opacity: var(--lock); }
.m-locked { position: absolute; left: 198px; top: 80px; width: 750px; height: 522px; z-index: 41; visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: color-mix(in oklab, #fdfdfd calc((1 - var(--dk)) * 100%), #262524); border-radius: 0 0 12px 0; color: #1d1d1f; }
.m-locked i { line-height: 0; color: #8a8a8f; }
.ml-t { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.ml-b { margin-top: 4px; padding: 5px 14px; border-radius: 7px; font-size: 13px; font-weight: 500; background: rgba(0, 0, 0, 0.07); box-shadow: inset 0 0 0 0.6px rgba(0, 0, 0, 0.12); }

/* the menu-bar extra's icon arrives with the first purchase */
.app-mac { --mx: 1; }
.mm-x { opacity: var(--mx); transform: scale(calc(0.6 + var(--mx) * 0.4)); }