/* xTab switching demo, drawn in HTML/CSS and driven by xtab-demo.js. Used on the home page card (.xd-card) and the
   /xtab/ page (.xd-page, inside a drawn MacBook). Sizes are container units of the scene, so it scales like a
   screenshot. The site turns off backdrop blur inside <main>, so glass here is a near-opaque fill. --u scales the desktop, --tile and --fs scale the switcher panel (copied from the app's preview mode:
   190 x 160 pt tiles, 166 x 92 pt previews, 20 pt panel corners). The windows are made up, not anyone's screen. */
.xd { position: absolute; inset: 0; container-type: size; overflow: hidden; --u: 1cqw; --tile: 16.5cqw; --fs: .068;
  --xd-w1: #7fb2ff; --xd-w2: #3a5bf0; --xd-w3: #9b7bff; --xd-w4: #46c1ff; --xd-wbg: #a9c6ff;
  --xd-menu: rgba(255, 255, 255, .32); --xd-menu-ink: #111;
  --xd-win: #fff; --xd-tbbg: #f6f6f7; --xd-side: rgba(236, 236, 240, .92); --xd-line: rgba(0, 0, 0, .08); --xd-bar: rgba(0, 0, 0, .08);
  --xd-ink: #1d1d1f; --xd-sub: #5f5f64; --xd-faint: #76767b; --xd-off: #d4d4d8;
  --xd-glass: rgba(240, 240, 243, .95); --xd-glass-ink: #1d1d1f; --xd-glass-sub: rgba(29, 29, 31, .72);
  --xd-sel: rgba(0, 0, 0, .13); --xd-box: rgba(0, 0, 0, .06); --xd-badge: rgba(0, 0, 0, .12); --xd-dock: rgba(255, 255, 255, .34);
  background: var(--xd-wbg); color: var(--xd-ink); text-align: left; line-height: 1.25;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; -webkit-font-smoothing: antialiased; user-select: none; }
:root[data-theme="dark"] .xd {
  --xd-w1: #2b4fb8; --xd-w2: #142a7a; --xd-w3: #3b1a8f; --xd-w4: #0f5f8f; --xd-wbg: #0c1430;
  --xd-menu: rgba(0, 0, 0, .25); --xd-menu-ink: #f5f5f7;
  --xd-win: #1e1e20; --xd-tbbg: #2a2a2d; --xd-side: rgba(44, 44, 48, .94); --xd-line: rgba(255, 255, 255, .08); --xd-bar: rgba(255, 255, 255, .1);
  --xd-ink: #f5f5f7; --xd-sub: #98989d; --xd-faint: #8e8e93; --xd-off: #4a4a4f;
  --xd-glass: rgba(34, 34, 38, .94); --xd-glass-ink: #f5f5f7; --xd-glass-sub: rgba(245, 245, 247, .74);
  --xd-sel: rgba(255, 255, 255, .16); --xd-box: rgba(255, 255, 255, .07); --xd-badge: rgba(255, 255, 255, .14); --xd-dock: rgba(40, 40, 46, .42); }
.xd *, .xd *::before, .xd *::after { box-sizing: border-box; }
.xd svg { display: block; }
.xd h6, .xd p, .xd ul, .xd ol, .xd li { margin: 0; padding: 0; list-style: none; font: inherit; }
.xd b, .xd strong { font-weight: inherit; }
.xd-card { --u: 1.5cqw; --tile: 28cqw; --fs: .1; }

/* wallpaper */
.xd-wall { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 120%, var(--xd-w3), transparent 60%), var(--xd-wbg); }
.xd-wall i { position: absolute; border-radius: 50%; filter: blur(5cqw); opacity: .9; }
.xd-wall i:nth-child(1) { left: -20%; top: -30%; width: 75%; height: 90%; background: var(--xd-w1); }
.xd-wall i:nth-child(2) { right: -18%; top: -10%; width: 70%; height: 85%; background: var(--xd-w2); }
.xd-wall i:nth-child(3) { right: -5%; bottom: -40%; width: 55%; height: 70%; background: var(--xd-w4); }

/* menu bar */
.xd-mb { position: absolute; inset: 0 0 auto; z-index: 30; display: flex; align-items: center; justify-content: space-between; height: calc(var(--u) * 2.6);
  padding: 0 calc(var(--u) * 1.4) 0 calc(var(--u) * 1.8); font-size: calc(var(--u) * 1.05); color: var(--xd-menu-ink); background: var(--xd-menu); }
.xd-mb-l { display: flex; gap: calc(var(--u) * 1.5); white-space: nowrap; }
.xd-mb-l b { font-weight: 700; }
.xd-mb-r { display: flex; align-items: center; gap: calc(var(--u) * 1.2); white-space: nowrap; }
.xd-mb-r img, .xd-mb-r svg { width: calc(var(--u) * 1.35); height: calc(var(--u) * 1.35); }
.xd-mb-r img { border-radius: 22%; }
.xd-mb-r .xd-batt { width: calc(var(--u) * 2); height: calc(var(--u) * 1); }
.xd-card .xd-mb-l span:nth-child(n+5), .xd-card .xd-mb-r svg { display: none; }
.xd-card .xd-mb { padding: 0 4.5cqw; }

/* windows: inactive ones get grey traffic lights and a softer shadow, like macOS */
.xd-win { position: absolute; display: flex; flex-direction: column; overflow: hidden; border-radius: calc(var(--u) * 1.1); background: var(--xd-win); font-size: calc(var(--u) * 1.05);
  box-shadow: 0 0 0 calc(var(--u) * .07) rgba(0, 0, 0, .2), 0 calc(var(--u) * 1.2) calc(var(--u) * 3) calc(var(--u) * -.6) rgba(10, 20, 60, .35); }
.xd-win.front { box-shadow: 0 0 0 calc(var(--u) * .07) rgba(0, 0, 0, .25), 0 calc(var(--u) * 2.4) calc(var(--u) * 6) calc(var(--u) * -1) rgba(10, 20, 60, .55); }
.xd-win.pop { animation: xd-pop .22s ease-out; }
@keyframes xd-pop { from { transform: scale(.985); } }
.xd-l { flex: none; display: flex; gap: calc(var(--u) * .6); }
.xd-l i { width: calc(var(--u) * 1); height: calc(var(--u) * 1); border-radius: 50%; background: var(--xd-off); }
.front .xd-l i:nth-child(1) { background: #ff5f57; } .front .xd-l i:nth-child(2) { background: #febc2e; } .front .xd-l i:nth-child(3) { background: #28c840; }
.xd-tb { flex: none; display: flex; align-items: center; gap: calc(var(--u) * 1.2); height: calc(var(--u) * 3.2); padding: 0 calc(var(--u) * 1.1); background: var(--xd-tbbg); border-bottom: calc(var(--u) * .08) solid var(--xd-line); }
.xd-bars { display: grid; gap: calc(var(--u) * .6); }
.xd-bars i { display: block; height: calc(var(--u) * .7); border-radius: 99px; background: var(--xd-bar); }

/* browser */
.xd-arr { display: flex; gap: calc(var(--u) * .7); color: var(--xd-sub); }
.xd-arr svg { width: calc(var(--u) * 1.2); height: calc(var(--u) * 1.2); }
.xd-url { flex: 1; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * .4); height: calc(var(--u) * 1.9); margin: 0 calc(var(--u) * 3);
  border-radius: calc(var(--u) * .6); background: var(--xd-bar); color: var(--xd-sub); font-size: calc(var(--u) * .95); white-space: nowrap; }
.xd-url svg { width: calc(var(--u) * .9); height: calc(var(--u) * .9); }
.xd-pg { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 1); padding: calc(var(--u) * 1.6) calc(var(--u) * 2.4); }
.xd-hero { position: relative; flex: none; height: calc(var(--u) * 12); border-radius: calc(var(--u) * .9); overflow: hidden; background: linear-gradient(#ffb36b, #ff6f91 70%, #c86dd7); }
.xd-hero i { position: absolute; border-radius: 50%; }
.xd-hero i:nth-child(1) { left: 62%; top: 22%; width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); background: #fff3c4; }
.xd-hero i:nth-child(2) { left: -10%; right: 30%; bottom: -40%; height: 70%; background: #7a3e8f; opacity: .85; }
.xd-hero i:nth-child(3) { left: 35%; right: -15%; bottom: -50%; height: 75%; background: #5b2a78; }
.xd-pg h6 { font-size: calc(var(--u) * 1.9); font-weight: 700; letter-spacing: -.01em; }
.xd-cards { flex: 1; min-height: calc(var(--u) * 4); display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 1); }
.xd-cards i { border-radius: calc(var(--u) * .7); background: linear-gradient(135deg, #6fd3ff, #3a7bff); }
.xd-cards i:nth-child(2) { background: linear-gradient(135deg, #f7c96b, #f08a4b); }
.xd-cards i:nth-child(3) { background: linear-gradient(135deg, #9be29b, #3fb37f); }

/* notes */
.xd-notes, .xd-music { flex-direction: row; }
.xd-ns, .xd-ms { flex: none; display: flex; flex-direction: column; gap: calc(var(--u) * .7); width: 28%; padding: calc(var(--u) * 1.1) calc(var(--u) * .8); background: var(--xd-side); border-right: calc(var(--u) * .08) solid var(--xd-line); }
.xd-ns .xd-l, .xd-ms .xd-l { margin-bottom: calc(var(--u) * 1.4); }
.xd-ns > i, .xd-ms > i { display: block; height: calc(var(--u) * 1.7); border-radius: calc(var(--u) * .5); background: var(--xd-bar); }
.xd-ns > i.on { background: rgba(255, 204, 0, .45); }
.xd-nb { flex: 1; min-width: 0; padding: calc(var(--u) * 1.4) calc(var(--u) * 2); }
.xd-nb small { display: block; margin-bottom: calc(var(--u) * 1.2); text-align: center; font-size: calc(var(--u) * .85); color: var(--xd-faint); white-space: nowrap; }
.xd-nb h6 { margin-bottom: calc(var(--u) * .9); font-size: calc(var(--u) * 1.9); font-weight: 700; }
.xd-nb li { display: flex; align-items: center; gap: calc(var(--u) * .7); font-size: calc(var(--u) * 1.2); line-height: 2; white-space: nowrap; }
.xd-nb li::before { content: ""; flex: none; width: calc(var(--u) * 1.25); height: calc(var(--u) * 1.25); border-radius: 50%; box-shadow: 0 0 0 calc(var(--u) * .12) var(--xd-faint) inset; }
.xd-nb li.ck { color: var(--xd-sub); }
.xd-nb li.ck::before { background: #f5b800; box-shadow: none; }

/* calendar */
.xd-cal .xd-tb h6 { font-size: calc(var(--u) * 1.35); font-weight: 700; white-space: nowrap; }
.xd-seg { display: flex; margin-left: auto; padding: calc(var(--u) * .15); border-radius: calc(var(--u) * .5); background: var(--xd-bar); }
.xd-seg i { padding: calc(var(--u) * .2) calc(var(--u) * .8); border-radius: calc(var(--u) * .4); font-style: normal; font-size: calc(var(--u) * .85); color: var(--xd-sub); }
.xd-seg i.on { background: var(--xd-win); color: var(--xd-ink); }
.xd-wk { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 calc(var(--u) * 1) calc(var(--u) * 1); }
.xd-dh { display: grid; grid-template-columns: repeat(5, 1fr); padding: calc(var(--u) * .8) 0; font-size: calc(var(--u) * .95); color: var(--xd-sub); white-space: nowrap; }
.xd-dh span { padding-left: calc(var(--u) * .5); }
.xd-dh .on { color: #d70015; font-weight: 600; }
[data-theme="dark"] .xd-dh .on { color: #ff6961; }
.xd-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(8, 1fr); gap: calc(var(--u) * .25);
  background: linear-gradient(var(--xd-line) calc(var(--u) * .08), transparent 0) 0 0 / 100% 12.5%; }
.xd-grid i { overflow: hidden; padding: calc(var(--u) * .2) calc(var(--u) * .45); border-left: calc(var(--u) * .25) solid var(--c); border-radius: calc(var(--u) * .35);
  font-style: normal; font-size: calc(var(--u) * .85); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); }

/* music */
.xd-ms > i.on { background: rgba(250, 45, 72, .35); }
.xd-mm { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 1.2); padding: calc(var(--u) * 1.8) calc(var(--u) * 2); }
.xd-mh { display: flex; align-items: flex-end; gap: calc(var(--u) * 1.4); }
.xd-art { flex: none; width: calc(var(--u) * 8); height: calc(var(--u) * 8); border-radius: calc(var(--u) * .7); background: radial-gradient(circle at 30% 30%, #ff9a8b, transparent 55%), linear-gradient(135deg, #5b2ae0, #ff3d77); }
.xd-mh h6 { font-size: calc(var(--u) * 1.6); font-weight: 700; white-space: nowrap; }
.xd-mh small { display: block; margin: calc(var(--u) * .3) 0 calc(var(--u) * .8); font-size: calc(var(--u) * .9); color: var(--xd-sub); white-space: nowrap; }
.xd-play { display: inline-block; padding: calc(var(--u) * .35) calc(var(--u) * 1.2); border-radius: calc(var(--u) * .5); font-size: calc(var(--u) * .9); font-weight: 600; color: #fff; background: #fa2d48; }
.xd-mm li { display: flex; justify-content: space-between; gap: calc(var(--u) * 1); padding: calc(var(--u) * .5) 0; border-bottom: calc(var(--u) * .08) solid var(--xd-line); font-size: calc(var(--u) * 1); white-space: nowrap; }
.xd-mm li i { font-style: normal; color: var(--xd-sub); }

/* dock and app icons */
.xd-dock { position: absolute; left: 50%; bottom: calc(var(--u) * .7); z-index: 28; display: flex; align-items: flex-end; gap: calc(var(--u) * .5); padding: calc(var(--u) * .5) calc(var(--u) * .55) calc(var(--u) * .7);
  border-radius: calc(var(--u) * 1.5); transform: translateX(-50%); background: var(--xd-dock);
  box-shadow: 0 0 0 calc(var(--u) * .07) rgba(255, 255, 255, .3) inset, 0 0 0 calc(var(--u) * .07) rgba(0, 0, 0, .1), 0 calc(var(--u) * 1) calc(var(--u) * 3) calc(var(--u) * -1) rgba(0, 0, 0, .35); }
.xd-di { position: relative; container-type: inline-size; display: flex; flex-direction: column; align-items: center; justify-content: center; width: calc(var(--u) * 3.8); height: calc(var(--u) * 3.8);
  border-radius: 22.5%; line-height: 1; box-shadow: 0 calc(var(--u) * .2) calc(var(--u) * .5) rgba(0, 0, 0, .18); }
.xd-di svg { width: 100%; height: 100%; }
.xd-di.on::after { content: ""; position: absolute; left: 50%; bottom: calc(var(--u) * -.55); width: calc(var(--u) * .36); height: calc(var(--u) * .36); margin-left: calc(var(--u) * -.18); border-radius: 50%; background: var(--xd-menu-ink); opacity: .65; }
.xd-i-files { background: linear-gradient(#7cc4ff, #2f7df6); }
.xd-i-safari { background: linear-gradient(#4fd1ff, #1166e8); }
.xd-i-mail { background: linear-gradient(#6ab8ff, #1f72e0); }
.xd-i-notes { background: transparent; }
.xd-i-calendar { background: #fff; }
.xd-i-calendar b { font-size: 17cqw; font-weight: 700; letter-spacing: .04em; color: #ff3b30; }
.xd-i-calendar strong { font-size: 50cqw; font-weight: 300; color: #1d1d1f; }
.xd-i-music { background: linear-gradient(#ff6b81, #f0263f); }

/* the xTab panel: popover glass, MRU tiles, selection, number badges */
.xd-panel { position: absolute; left: 50%; top: 48%; z-index: 35; display: flex; padding: calc(var(--tile) * 14 / 190); border-radius: calc(var(--tile) * 20 / 190);
  background: var(--xd-glass); color: var(--xd-glass-ink);
  box-shadow: 0 0 0 .07cqw rgba(0, 0, 0, .16), 0 0 0 .14cqw rgba(255, 255, 255, .1) inset, 0 2cqw 5cqw -1.2cqw rgba(0, 0, 0, .5);
  opacity: 0; transform: translate(-50%, -50%) scale(.985); transition: opacity .09s, transform .09s; pointer-events: none; }
.xd.open .xd-panel { opacity: 1; transform: translate(-50%, -50%); }
.xd-tile { position: relative; flex: none; width: var(--tile); height: calc(var(--tile) * 160 / 190); }
.xd-tile.sel::before { content: ""; position: absolute; inset: calc(var(--tile) * 4 / 190); border-radius: calc(var(--tile) * 12 / 190); background: var(--xd-sel); }
.xd-box { position: absolute; left: calc(var(--tile) * 12 / 190); top: calc(var(--tile) * 12 / 190); width: calc(var(--tile) * 166 / 190); height: calc(var(--tile) * 92 / 190);
  overflow: hidden; border-radius: calc(var(--tile) * 6 / 190); background: var(--xd-box); }
.xd-box > .xd-win { left: 0; top: 0; transform-origin: 0 0; box-shadow: 0 0 0 calc(var(--u) * .1) rgba(0, 0, 0, .15); }
.xd-ico { position: absolute; left: calc(var(--tile) * 16 / 190); top: calc(var(--tile) * 76 / 190); width: calc(var(--tile) * 24 / 190); height: calc(var(--tile) * 24 / 190); }
.xd-ico .xd-di { width: 100%; height: 100%; }
.xd-t, .xd-s { position: absolute; left: calc(var(--tile) * 8 / 190); right: calc(var(--tile) * 8 / 190); overflow: hidden; text-align: center; white-space: nowrap; text-overflow: ellipsis; }
.xd-t { top: calc(var(--tile) * 112 / 190); font-size: calc(var(--tile) * var(--fs)); }
.xd-tile.sel .xd-t { font-weight: 600; }
.xd-s { top: calc(var(--tile) * 112 / 190 + var(--tile) * var(--fs) * 1.4); font-size: calc(var(--tile) * var(--fs) * .9); color: var(--xd-glass-sub); }
.xd-n { position: absolute; left: calc(var(--tile) * 10 / 190); top: calc(var(--tile) * 10 / 190); z-index: 1; display: grid; place-items: center; width: calc(var(--tile) * var(--fs) * 1.1); height: calc(var(--tile) * var(--fs) * 1.1);
  border-radius: calc(var(--tile) * 5 / 190); font-size: calc(var(--tile) * var(--fs) * .62); font-weight: 600; color: var(--xd-glass-sub); background: var(--xd-badge); }

/* keys on the home page card */
.xd-keys { position: absolute; right: 3cqw; bottom: 3.4cqw; z-index: 40; display: flex; gap: 1.2cqw; }
.xd-keys kbd { display: grid; place-items: center; min-width: 8cqw; height: 8cqw; padding: 0 1.8cqw; border-radius: 1.8cqw; font: 600 3.3cqw/1 -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color: #1d1d1f; background: rgba(255, 255, 255, .95); box-shadow: 0 .9cqw 0 rgba(0, 0, 0, .28), 0 1.4cqw 3cqw -1cqw rgba(0, 0, 0, .4); transition: transform .08s, box-shadow .08s; }
.xd-keys kbd.down { transform: translateY(.7cqw); box-shadow: 0 .2cqw 0 rgba(0, 0, 0, .28), 0 .6cqw 1.6cqw -1cqw rgba(0, 0, 0, .4); }

/* /xtab/ page: the scene sits in a drawn MacBook, with the two keys under it */
.xt-wrap { padding: 0 clamp(16px, 3vw, 32px); }
.xt-demo { width: min(100%, 1040px); margin: clamp(48px, 7vw, 88px) auto 0; --alu-a: #e3e4e8; --alu-b: #b9bbc2; --alu-c: #8e9098; }
:root[data-theme="dark"] .xt-demo { --alu-a: #3c3d42; --alu-b: #2a2b2f; --alu-c: #1b1c1f; }
.xt-lid { position: relative; margin: 0 5.5%; padding: 1.3% 1.3% 1.6%; border-radius: 3.2% / 4.8%; background: #0b0b0d;
  box-shadow: 0 0 0 1.5px var(--alu-c), 0 0 0 2.5px rgba(255, 255, 255, .12), 0 50px 90px -50px rgba(10, 20, 60, .6); }
.xt-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 1.1% / 1.7%; background: #0c1430; }
.xt-notch { position: absolute; left: 50%; top: 0; z-index: 50; width: 11%; height: 4.16%; transform: translateX(-50%); border-radius: 0 0 9px 9px / 0 0 7px 7px; background: #0b0b0d; }
.xt-base { position: relative; height: clamp(10px, 2.1vw, 22px); margin-top: -1px; border-radius: 0 0 46% 46% / 0 0 100% 100%;
  background: linear-gradient(var(--alu-a), var(--alu-b) 55%, var(--alu-c)); box-shadow: 0 18px 30px -16px rgba(0, 0, 0, .45); }
.xt-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 15%; height: 42%; transform: translateX(-50%); border-radius: 0 0 12px 12px / 0 0 8px 8px; background: linear-gradient(var(--alu-c), var(--alu-b)); opacity: .55; }
.xt-keys { display: flex; justify-content: center; gap: 10px; margin-top: clamp(26px, 3.4vw, 40px); }
.xt-keys kbd { display: grid; place-items: center; min-width: 56px; height: 56px; padding: 0 16px; border-radius: 14px; font: 600 20px/1 system-ui, -apple-system, sans-serif;
  color: var(--cl-ink); background: var(--cl-bg); box-shadow: 0 0 0 1px var(--cl-line), 0 5px 0 var(--cl-soft); transition: transform .08s, box-shadow .08s; }
.xt-keys kbd.down { transform: translateY(4px); box-shadow: 0 0 0 1px var(--cl-line), 0 1px 0 var(--cl-soft); }
@media (max-width: 700px) {
  .xt-lid { margin: 0 4%; }
  .xd-page { --tile: 22cqw; --fs: .09; }
  .xt-keys kbd { min-width: 46px; height: 46px; font-size: 17px; }
}