/* the devices on the desk (mac.js): .os-mac = the iMac desktop (1344x720 on the glass), .os-ipad / .os-iphone = iPadOS / iOS shells
   (lock screen, home screen, full-screen apps; .compact = the narrow iPhone content layout). Everything is scoped to .mac */
.mac {
  --acc: #2f6fe4; --win: #fbfbfd; --fg: #1d1d1f; --fg2: #3a3a3c; --mut: #86868b; --line: #dcdce1; --side: #eeeef2; --nside: #f3f0e6;
  --tb: linear-gradient(#f5f4f8, #e9e8ed); --tbline: #d3d2d8; --card: #fff; --hov: rgba(0, 0, 0, .06); --hov2: rgba(0, 0, 0, .1); --chip: #eceaf3;
  --field: #fff; --menu: rgba(244, 244, 247, .97); --menufg: #1d1d1f; --tile: rgba(255, 255, 255, .8); --paper: #fffef9; --pvbg: #e4e4e9;
  --webbg: #fff; --setbg: #f5f5f7; --stripe: rgba(0, 0, 0, .025); --kbg: #e9e9ee; --kside: #dcdce2; --top: 28px;
  --wp-dusk: radial-gradient(60% 80% at 20% 90%, #f3a35f 0, transparent 60%), radial-gradient(55% 70% at 85% 20%, #6d5bd0 0, transparent 60%),
    radial-gradient(70% 90% at 60% 75%, #d0567b 0, transparent 65%), linear-gradient(160deg, #23234a, #3a2f6b 45%, #b34d6a 80%, #f0a15e);
  --wp-ocean: radial-gradient(60% 80% at 15% 85%, #3fd0c9 0, transparent 60%), radial-gradient(55% 70% at 85% 15%, #2b6fd8 0, transparent 60%),
    radial-gradient(70% 90% at 65% 80%, #1f9bb8 0, transparent 65%), linear-gradient(160deg, #0b1d3d, #123a6b 50%, #1b7f9a 85%, #6fe0c8);
  --wp-aurora: radial-gradient(50% 60% at 25% 30%, #46e0a0 0, transparent 60%), radial-gradient(55% 70% at 80% 25%, #8a5cf0 0, transparent 60%),
    radial-gradient(70% 80% at 55% 95%, #2a3f8f 0, transparent 70%), linear-gradient(170deg, #071425, #10284a 50%, #1c1240);
  --wp-graphite: radial-gradient(60% 80% at 25% 80%, #6b6f7a 0, transparent 60%), radial-gradient(55% 70% at 80% 20%, #9aa0ab 0, transparent 60%),
    linear-gradient(160deg, #1d1f24, #3a3d45 55%, #5d616b);
  --wallpaper: var(--wp-dusk);
  position: absolute; inset: 0; overflow: hidden; font: 400 14px/1.4 Inter, -apple-system, system-ui, sans-serif; color: var(--fg);
  user-select: none; -webkit-user-select: none; cursor: default; outline: none; -webkit-tap-highlight-color: transparent;
}
.mac.wp-ocean { --wallpaper: var(--wp-ocean); } .mac.wp-aurora { --wallpaper: var(--wp-aurora); } .mac.wp-graphite { --wallpaper: var(--wp-graphite); }
.mac.dark {
  --win: #262629; --fg: #ececf0; --fg2: #cfcfd4; --mut: #98989f; --line: #3a3a3f; --side: #2c2c30; --nside: #2a2925; --tb: linear-gradient(#3a3a3e, #323236);
  --tbline: #1e1e21; --card: #323236; --hov: rgba(255, 255, 255, .07); --hov2: rgba(255, 255, 255, .13); --chip: #3a3946; --field: #1e1e21;
  --menu: rgba(42, 42, 46, .97); --menufg: #f2f2f5; --tile: rgba(255, 255, 255, .08); --paper: #1f1f22; --pvbg: #1c1c1f; --webbg: #1e1e21;
  --setbg: #232326; --stripe: rgba(255, 255, 255, .03); --kbg: #1f1f22; --kside: #2a2a2e;
}
.mac *, .mac *::before, .mac *::after { box-sizing: border-box; }
.mac * { margin: 0; }
.mac .selectable, .mac .selectable * { user-select: text; -webkit-user-select: text; }
.mac svg.g { display: block; fill: currentColor; }
.mac button { font: inherit; color: inherit; }
.mac .dim { color: var(--mut); }
.mac .wall { position: absolute; inset: 0; background: var(--wallpaper); }
.mac .glass { position: absolute; inset: 0; z-index: 960; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .07), transparent 35%, transparent 70%, rgba(255, 230, 200, .05)); }
.mac > .dim { position: absolute; inset: 0; z-index: 950; background: #000; opacity: 0; pointer-events: none; transition: opacity .15s; }
.mac > .night { position: absolute; inset: 0; z-index: 940; background: rgba(255, 150, 60, .18); mix-blend-mode: multiply; opacity: 0; pointer-events: none; transition: opacity .6s; }
.mac > .night.on { opacity: 1; }

/* ---------- menu bar ---------- */
.mac .menubar { position: absolute; left: 2px; right: 2px; top: 2px; height: 28px; border-radius: 4px; display: flex; align-items: center; padding: 0 6px; z-index: 510; color: #fff; font-size: 13.5px;
  background: rgba(30, 24, 48, .38); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); transition: transform .25s, opacity .2s; }
.mac .ml, .mac .mr { display: flex; align-items: center; height: 100%; }
.mac .mr { margin-left: auto; }
.mac .mt, .mac .mx { height: 22px; display: flex; align-items: center; padding: 0 9px; border-radius: 5px; white-space: nowrap; }
.mac .mt.on, .mac .mx.on, .mac .mx:active { background: rgba(255, 255, 255, .24); }
.mac .mt.app b { font-weight: 700; }
.mac .mt.logo { padding: 0 10px; } .mac .mt.logo .g { width: 21px; height: 14px; }
.mac .mx .g { width: 16px; height: 13px; }
.mac .mx.off .g { opacity: .4; }
.mac .batt { display: block; width: 23px; height: 11px; border: 1.5px solid #fff; border-radius: 3px; position: relative; opacity: .92; }
.mac .batt::after { content: ''; position: absolute; inset: 1.5px 2px 1.5px 1.5px; background: #fff; border-radius: 1px; }
.mac .batt.low::after { background: #ffd60a; }
.mac .clock { font-variant-numeric: tabular-nums; }
.mac.fsm .menubar { transform: translateY(calc(-100% - 2px)); }
.mac.fsm .menubar.peek { transform: none; }
.mac.busy .menubar { opacity: 0; pointer-events: none; }

/* dropdown menus, context menus */
.mac .drop { position: absolute; left: 0; right: 0; top: 30px; height: 0; z-index: 600; }
.mac .ctx { position: absolute; inset: 0; z-index: 610; display: none; pointer-events: none; }
.mac .mnu { position: absolute; top: 2px; min-width: 230px; padding: 5px; border-radius: 9px; background: var(--menu); color: var(--menufg); font-size: 13.5px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .32), 0 0 0 .5px rgba(0, 0, 0, .25); pointer-events: auto; }
.mac .ctx .mnu { top: 0; min-width: 210px; }
.mac .mi { position: relative; display: flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px 0 4px; border-radius: 5px; white-space: nowrap; }
.mac .mi .ck { width: 16px; flex: none; font-style: normal; text-align: center; font-size: 12px; }
.mac .mi span { flex: 1; }
.mac .mi kbd { font: inherit; font-size: 12.5px; color: var(--mut); margin-left: 24px; }
.mac .mi:not(.dis):hover { background: var(--acc); color: #fff; }
.mac .mi:not(.dis):hover kbd { color: rgba(255, 255, 255, .85); }
.mac .mi.dis { color: var(--mut); }
.mac .mi .arr { font-weight: 400; margin-left: 16px; }
.mac .mnu hr { border: 0; height: 1px; background: var(--line); margin: 5px 8px; }
.mac .mlbl { font-size: 11.5px; font-weight: 600; color: var(--mut); padding: 5px 10px 2px 20px; }
.mac .mnu .sub { display: none; left: calc(100% - 4px); top: -5px; }
.mac .mi.hassub:hover > .sub { display: block; }
.mac .mi.hassub:hover { background: var(--hov2); color: inherit; }
.mac .hsearch { display: flex; align-items: center; gap: 6px; margin: 2px 4px 4px; padding: 0 8px; height: 26px; border-radius: 6px; background: var(--field); border: 1px solid var(--line); color: var(--mut); }
.mac .hsearch input { all: unset; flex: 1; font-size: 13px; color: var(--menufg); }
.mac .hsearch .g { width: 12px; height: 12px; }
.mac .sw { all: unset; flex: none; display: inline-block; position: relative; width: 32px; height: 19px; border-radius: 10px; background: rgba(120, 120, 128, .32); transition: background .2s; }
.mac .sw::after { content: ''; position: absolute; left: 2px; top: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: left .2s; }
.mac .sw.on { background: var(--acc); } .mac .sw.on::after { left: 15px; }

/* Control Centre, Notification Centre */
.mac .ccp { position: absolute; top: 4px; width: 330px; padding: 10px; border-radius: 16px; background: var(--menu); color: var(--menufg); display: grid; gap: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35), 0 0 0 .5px rgba(0, 0, 0, .2); }
.mac .ccg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mac .cct { background: var(--tile); border-radius: 12px; padding: 9px 10px; display: grid; gap: 7px; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08); }
.mac .cct > b { font-size: 12.5px; }
.mac .ccr { all: unset; display: flex; align-items: center; gap: 8px; }
.mac .ccr i { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(120, 120, 128, .2); }
.mac .ccr.on i { background: var(--acc); color: #fff; }
.mac .ccr .g { width: 14px; height: 14px; }
.mac .ccr span { display: grid; line-height: 1.2; min-width: 0; } .mac .ccr b { font-size: 12.5px; }
.mac .ccr em { font-style: normal; font-size: 11px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mac .rng { display: flex; align-items: center; gap: 8px; color: var(--mut); } .mac .rng .g { width: 14px; height: 14px; flex: none; } .mac .rng input { flex: 1; }
.mac input[type=range] { accent-color: var(--acc); margin: 0; }
.mac .np { grid-template-columns: 40px 1fr auto; align-items: center; }
.mac .np .art { width: 40px; height: 40px; border-radius: 8px; background: linear-gradient(135deg, #f3a35f, #d0567b 55%, #6d5bd0); }
.mac .np span { display: grid; line-height: 1.25; } .mac .np b { font-size: 12.5px; } .mac .np em { font-style: normal; font-size: 11.5px; color: var(--mut); }
.mac .ncp { position: absolute; top: 4px; width: 340px; display: grid; gap: 10px; animation: ncin .28s cubic-bezier(.2, .9, .3, 1); }
@keyframes ncin { from { transform: translateX(40px); opacity: 0; } }
.mac .nw { border-radius: 16px; padding: 12px 14px; background: var(--menu); color: var(--menufg); box-shadow: 0 8px 30px rgba(0, 0, 0, .28); display: grid; gap: 3px; }
.mac .nw:active { filter: brightness(.96); }
.mac .nw em { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--mut); }
.mac .nw p { font-size: 12.5px; }
.mac .nw-cal b { font: 300 34px/1 Inter, sans-serif; color: #f2453d; }
.mac .nw-cal .ev { margin-top: 3px; }
.mac .nw-wx { background: linear-gradient(160deg, #3d8bff, #74bcff); color: #fff; }
.mac .nw-wx em, .mac .nw-wx .dim { color: rgba(255, 255, 255, .88); } .mac .nw-wx b { font: 300 38px/1 Inter, sans-serif; }
.mac .nw-note b, .mac .nw-tip b { font-size: 15px; }

/* ---------- desktop icons ---------- */
.mac .desk { position: absolute; inset: 0; z-index: 1; }
.mac .dicons { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.mac .di { position: absolute; width: 96px; display: grid; justify-items: center; align-content: start; gap: 4px; padding: 4px 0; pointer-events: auto; color: #fff;
  font-size: 12.5px; text-align: center; text-shadow: 0 1px 3px rgba(0, 0, 0, .65); }
.mac .di .ic { pointer-events: none; }
.mac .di span { max-width: 94px; padding: 1px 5px; border-radius: 4px; line-height: 1.3; overflow-wrap: anywhere; }
.mac .di.sel::before { content: ''; position: absolute; top: 0; left: 50%; width: calc(var(--s, 54px) + 12px); height: calc(var(--s, 54px) + 10px); transform: translateX(-50%); border-radius: 8px; background: rgba(0, 0, 0, .24); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.mac .di.sel span { background: var(--acc); text-shadow: none; }
.mac .di .ren { width: 92px; font: inherit; text-align: center; border-radius: 4px; border: 0; outline: 2px solid var(--acc); padding: 1px 3px; color: #1d1d1f; background: #fff; text-shadow: none; user-select: text; }
.mac .dicons.is-s { --s: 44px; } .mac .dicons.is-l { --s: 68px; }
.mac .dicons.is-s .ic { --s: 44px; } .mac .dicons.is-m .ic { --s: 54px; } .mac .dicons.is-l .ic { --s: 68px; }
.mac.dragging .di.sel { opacity: .85; }
.mac .band { position: absolute; display: none; z-index: 3; border: 1px solid rgba(255, 255, 255, .8); background: rgba(160, 190, 255, .2); border-radius: 2px; pointer-events: none; }

/* ---------- Dock ---------- */
.mac .dock { position: absolute; left: 0; right: 0; bottom: 6px; margin: 0 auto; width: max-content; display: flex; align-items: flex-end; gap: 8px; padding: 6px 10px 7px; z-index: 500; }
.mac .dbg { position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--gl, 0px)); right: calc(-1 * var(--gr, 0px)); z-index: -1; border-radius: 20px; transition: left .18s, right .18s;
  background: rgba(255, 255, 255, .22); border: 1px solid rgba(255, 255, 255, .3); backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5); }
.mac .dk { all: unset; position: relative; display: block; transform-origin: 50% 100%; transition: transform .18s; }
.mac .dock.mag .dk, .mac .dock.mag .sep, .mac .dock.mag .dbg { transition: none; }
.mac .dk .dot { position: absolute; left: 50%; bottom: -5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: rgba(20, 20, 30, .8); opacity: 0; }
.mac .dk.running .dot { opacity: 1; }
.mac .dk .tip { position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%); padding: 3px 10px; border-radius: 6px; white-space: nowrap; pointer-events: none;
  font: 500 12.5px/1.4 Inter, system-ui, sans-serif; color: #1d1d1f; background: rgba(240, 240, 244, .95); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); opacity: 0; transition: opacity .12s; }
.mac .dk:hover .tip { opacity: 1; }
.mac .dk:active .ic { filter: brightness(.75); }
.mac .dk.bounce .ic { animation: bounce 1.2s cubic-bezier(.3, .6, .4, 1); }
@keyframes bounce { 0%, 100% { transform: none; } 18% { transform: translateY(-20px); } 36% { transform: none; } 54% { transform: translateY(-11px); } 72% { transform: none; } }
.mac .sep { width: 1px; height: 50px; align-self: center; background: rgba(255, 255, 255, .45); margin: 0 3px; transition: transform .18s; }
.mac .dmins { display: contents; }
.mac .mthumb { display: block; position: relative; width: 54px; height: 54px; }
.mac .mthumb::before { content: ''; position: absolute; inset: 9px 1px 8px; border-radius: 4px; background: linear-gradient(#e9e8ed 0 7px, #fbfbfd 7px); box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.mac .mthumb.k-terminal::before { background: linear-gradient(#3a3a40 0 7px, #1c1c20 7px); }
.mac .mthumb .ic { position: absolute; right: 2px; bottom: 2px; }

/* ---------- app icons (drawn, no trademarks); 1em = --s / 5.4 ---------- */
.mac .ic { --s: 54px; display: block; flex: none; width: var(--s); height: var(--s); font-size: calc(var(--s) / 5.4); border-radius: 23%; position: relative; box-shadow: 0 .2em .6em rgba(0, 0, 0, .25); font-style: normal; }
.mac .ic.lg { --s: 76px; } .mac .ic.sm, .mac .ic.badge { --s: 24px; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); } .mac .ic.xs { --s: 18px; box-shadow: none; }
.mac .ic::before, .mac .ic::after { content: ''; position: absolute; }
.mac .ic-finder { background: linear-gradient(90deg, #6fb6ff 50%, #eaf4ff 50%); }
.mac .ic-finder::before { left: 1.55em; top: 1.5em; width: .38em; height: 1em; border-radius: .2em; background: #1f3b6b; box-shadow: 1.95em 0 0 #1f3b6b; }
.mac .ic-finder::after { left: 1.3em; right: 1.3em; top: 2.9em; height: .9em; border-bottom: .28em solid #1f3b6b; border-radius: 0 0 50% 50%; }
.mac .ic-notes { background: linear-gradient(#ffd54a 0 26%, #fffdf3 26%); }
.mac .ic-notes::after { left: 1em; right: 1em; top: 2.4em; height: 2em; background: repeating-linear-gradient(transparent 0 .5em, #d9d3c0 .5em .6em); }
.mac .ic-keynote { background: linear-gradient(160deg, #3d8bff, #1d55d6); }
.mac .ic-keynote::after { left: 1.3em; right: 1.3em; top: 1.3em; height: 1.8em; background: #fff; border-radius: .3em; }
.mac .ic-keynote::before { left: 2.45em; top: 3em; width: .5em; height: 1em; background: #fff; box-shadow: -.9em .8em 0 -.05em #fff, .9em .8em 0 -.05em #fff; border-radius: .1em; }
.mac .ic-terminal { background: linear-gradient(#2a2b31, #1a1b1f); box-shadow: 0 .2em .6em rgba(0, 0, 0, .25), inset 0 0 0 .08em rgba(255, 255, 255, .12); }
.mac .ic-terminal::after { content: '>_'; left: .8em; top: .7em; font: 700 1.7em/1 'JetBrains Mono', ui-monospace, monospace; color: #e6e6e6; }
.mac .ic-preview { background: linear-gradient(160deg, #f7f9fc, #dfe6f0); }
.mac .ic-preview::after { left: 1.2em; top: 1.2em; width: 3em; height: 2.4em; border-radius: .3em; background: linear-gradient(160deg, #7ec8ff, #2f7bd6); box-shadow: .4em .5em 0 -.1em #b9c6d8; }
.mac .ic-mail { background: linear-gradient(#57b8ff, #1a7fe8); }
.mac .ic-mail::after { left: 1.1em; right: 1.1em; top: 1.7em; height: 2em; background: #fff; clip-path: polygon(0 0, 50% 55%, 100% 0, 100% 100%, 0 100%); }
.mac .ic-safari { background: linear-gradient(#f6f7fa, #dde2ea); }
.mac .ic-safari::before { inset: .55em; border-radius: 50%; background: radial-gradient(circle, #64b8ff, #1f6fe0 72%); box-shadow: inset 0 0 0 .14em rgba(255, 255, 255, .55); }
.mac .ic-safari::after { left: 50%; top: 50%; width: .62em; height: 3.4em; margin: -1.7em 0 0 -.31em; background: linear-gradient(#ff4d4d 50%, #fff 50%); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); transform: rotate(45deg); }
.mac .ic-launchpad { background: linear-gradient(#5d616d, #3a3d45); }
.mac .ic-launchpad::after { inset: .95em; background: radial-gradient(circle, #f6f6f8 0 .36em, transparent .42em) 0 0 / 33.333% 33.333%; }
.mac .ic-calendar { background: #fff; overflow: hidden; display: grid; grid-template-rows: 1.55em 1fr; text-align: center; }
.mac .ic-calendar b { background: #f2453d; color: #fff; font: 700 .95em/1.65em Inter, sans-serif; letter-spacing: .05em; }
.mac .ic-calendar i { font: 400 2.6em/1.35 Inter, sans-serif; font-style: normal; color: #1d1d1f; }
.mac .ic-settings { background: linear-gradient(#a2a2a9, #6c6c73); }
.mac .ic-settings::before { inset: .55em; border-radius: 50%; background: repeating-conic-gradient(#e8e8ed 0 11deg, transparent 11deg 22.5deg);
  -webkit-mask: radial-gradient(circle, transparent 0 1.55em, #000 1.6em); mask: radial-gradient(circle, transparent 0 1.55em, #000 1.6em); }
.mac .ic-settings::after { inset: 1.15em; border-radius: 50%; border: .55em solid #e8e8ed; background: radial-gradient(circle, #8e8e93 0 .5em, #d6d6db .55em); }
.mac .ic-trash { background: none; box-shadow: none; }
.mac .ic-trash::before { left: 1.2em; right: 1.2em; top: 1.3em; bottom: .3em; border-radius: 0 0 .6em .6em; border: .1em solid rgba(255, 255, 255, .8);
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .5) 0 .5em, rgba(150, 160, 180, .45) .5em .62em), rgba(230, 234, 242, .55); }
.mac .ic-trash::after { left: .85em; right: .85em; top: .7em; height: .5em; border-radius: .2em; background: rgba(245, 246, 250, .92); box-shadow: 0 .1em .2em rgba(0, 0, 0, .2); }
.mac .ic-trash.full::before { background: radial-gradient(circle at 40% 18%, #fff 0 .9em, transparent .95em), radial-gradient(circle at 65% 22%, #f2f2f2 0 .7em, transparent .75em),
  repeating-linear-gradient(90deg, rgba(255, 255, 255, .5) 0 .5em, rgba(150, 160, 180, .45) .5em .62em), rgba(230, 234, 242, .55); }
.mac .ic-folder-big { background: linear-gradient(#7cc3ff, #3d9bf2); border-radius: 9% 9% 12% 12%; height: calc(var(--s) * .82); margin-top: calc(var(--s) * .12); }
.mac .ic-folder-big::before { left: .4em; top: -.5em; width: 2.2em; height: .9em; border-radius: .4em .4em 0 0; background: #6ab7fb; }
.mac .ic-doc { background: #fff; width: calc(var(--s) * .78); margin: 0 auto; border-radius: .25em; box-shadow: inset 0 0 0 .08em #d5d8df, 0 .15em .4em rgba(0, 0, 0, .2);
  clip-path: polygon(0 0, 70% 0, 100% 22%, 100% 100%, 0 100%); }
.mac .ic-doc::before { right: 0; top: 0; width: 30%; height: 22%; background: linear-gradient(225deg, transparent 50%, #d9dce3 50%); }
.mac .ic-doc::after { left: .7em; right: .7em; top: 1.3em; height: 1.4em; background: repeating-linear-gradient(#e2e4ea 0 .18em, transparent .18em .45em); }
.mac .ic-doc em { position: absolute; left: .35em; right: .35em; bottom: .55em; border-radius: .2em; background: var(--dc); color: #fff; font: 700 .85em/1.6 Inter, sans-serif; font-style: normal; text-align: center; letter-spacing: .04em; }
.mac .ic-music { background: linear-gradient(160deg, #ff6b8b, #d0336a); }
.mac .ic-music::after { content: '♪'; inset: 0; display: grid; place-items: center; color: #fff; font: 700 3em/1 Inter, sans-serif; }

/* ---------- windows ---------- */
.mac .wl { position: absolute; inset: 0; pointer-events: none; }
.mac .win { position: absolute; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: var(--win); color: var(--fg); pointer-events: auto;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .38), 0 0 0 .5px rgba(0, 0, 0, .3); animation: pop .26s cubic-bezier(.2, .9, .3, 1.15); }
.mac .win:not(.front) { box-shadow: 0 12px 34px rgba(0, 0, 0, .26), 0 0 0 .5px rgba(0, 0, 0, .25); }
@keyframes pop { from { transform: scale(.94); opacity: 0; } }
.mac .win.closing { animation: unpop .2s ease-in forwards; pointer-events: none; }
@keyframes unpop { to { transform: scale(.94); opacity: 0; } }
.mac .win.anim { transform-origin: 0 0; transition: left .3s cubic-bezier(.3, .8, .3, 1), top .3s cubic-bezier(.3, .8, .3, 1), width .3s cubic-bezier(.3, .8, .3, 1), height .3s cubic-bezier(.3, .8, .3, 1), transform .42s cubic-bezier(.5, 0, .3, 1), opacity .42s; }
.mac .win.mini { transform: var(--mt); opacity: 0; pointer-events: none; transform-origin: 0 0; }
.mac .win.hid { display: none; }
.mac .win.max { border-radius: 10px; }
.mac .win.fs { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; border-radius: 0; }
.mac .tb { position: relative; height: 36px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: var(--tb); border-bottom: 1px solid var(--tbline); }
.mac .win.uni .tb { height: 48px; }
.mac .lights { display: flex; gap: 8px; flex: none; position: relative; z-index: 1; }
.mac .lights i { width: 12px; height: 12px; border-radius: 50%; display: grid; place-items: center; font: 700 10px/1 system-ui, sans-serif; color: rgba(70, 0, 0, .6); box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .2); }
.mac .lights .l-cl { background: #ee6a5f; } .mac .lights .l-mn { background: #f5bf4f; } .mac .lights .l-zm { background: #61c554; }
.mac .win:not(.front) .lights i { background: #cfced4; }
.mac.dark .win:not(.front) .lights i { background: #4a4a50; }
.mac .win .lights:hover .l-cl { background: #ee6a5f; } .mac .win .lights:hover .l-mn { background: #f5bf4f; } .mac .win .lights:hover .l-zm { background: #61c554; }
.mac .lights:hover .l-cl::after { content: '×'; } .mac .lights:hover .l-mn::after { content: '−'; } .mac .lights:hover .l-zm::after { content: '+'; }
.mac .win .lights i[data-dis] { background: #cfced4 !important; } .mac .lights:hover i[data-dis]::after { content: ''; }
.mac .tt { position: absolute; left: 84px; right: 84px; text-align: center; font-weight: 600; font-size: 13px; color: var(--fg2); pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mac .win:not(.front) .tt, .mac .win:not(.front) .tools { opacity: .6; }
.mac .tools { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; }
.mac .tools:empty { display: none; }
.mac .tools .ttl { font-size: 14.5px; font-weight: 700; margin: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mac .ttl2 { display: grid; line-height: 1.15; margin: 0 6px; min-width: 0; white-space: nowrap; } .mac .ttl2 b { font-size: 13.5px; } .mac .ttl2 em { font-style: normal; font-size: 11.5px; color: var(--mut); }
.mac .tools .sp { flex: 1; }
.mac .tbtn { all: unset; height: 28px; min-width: 28px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border-radius: 6px; color: var(--fg2); font-size: 12.5px; white-space: nowrap; }
.mac .tbtn:hover:not([disabled]) { background: var(--hov); }
.mac .tbtn:active:not([disabled]) { background: var(--hov2); }
.mac .tbtn.on { background: var(--hov2); }
.mac .tbtn[disabled] { opacity: .35; }
.mac .tbtn .g { width: 15px; height: 15px; flex: none; }
.mac .tbtn.txt { padding: 0 10px; }
.mac .tbtn.pri, .mac .tbtn.pri:hover:not([disabled]) { background: var(--acc); color: #fff; }
.mac .tbtn.pri:hover { filter: brightness(1.08); }
.mac .tbtn.zl { min-width: 48px; font-variant-numeric: tabular-nums; }
.mac .nav { display: flex; }
.mac .seg { display: inline-flex; background: var(--hov); border-radius: 7px; padding: 2px; gap: 2px; }
.mac .seg .tbtn { height: 24px; } .mac .seg .tbtn.on { background: var(--card); box-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
.mac .seg.big { flex-wrap: wrap; }
.mac .tsearch, .mac .addr { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px; border-radius: 7px; background: var(--hov); color: var(--mut); }
.mac .tsearch { width: 150px; margin-left: 4px; }
.mac .addr { flex: 1; max-width: 560px; margin: 0 auto; }
.mac .tsearch input, .mac .addr input { all: unset; flex: 1; min-width: 0; color: var(--fg); font-size: 13px; user-select: text; }
.mac .addr input { text-align: center; } .mac .addr input:focus { text-align: left; }
.mac .tsearch .g, .mac .addr .g { width: 12px; height: 12px; flex: none; }
.mac .wc { flex: 1; min-height: 0; overflow: auto; position: relative; }
.mac .rz { position: absolute; z-index: 5; }
.mac .rz-n { top: 0; left: 10px; right: 10px; height: 5px; cursor: ns-resize; } .mac .rz-s { bottom: 0; left: 10px; right: 10px; height: 6px; cursor: ns-resize; }
.mac .rz-e { right: 0; top: 10px; bottom: 10px; width: 6px; cursor: ew-resize; } .mac .rz-w { left: 0; top: 10px; bottom: 10px; width: 6px; cursor: ew-resize; }
.mac .rz-ne { right: 0; top: 0; width: 12px; height: 12px; cursor: nesw-resize; } .mac .rz-sw { left: 0; bottom: 0; width: 12px; height: 12px; cursor: nesw-resize; }
.mac .rz-nw { left: 0; top: 0; width: 10px; height: 10px; cursor: nwse-resize; } .mac .rz-se { right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize; }
.mac .win.max .rz, .mac .win.fs .rz { display: none; }

/* shared content bits */
.mac .split { display: flex; height: 100%; }
.mac .side { width: 190px; flex: none; overflow: auto; background: var(--side); padding: 8px; }
.mac .split.noside .side { display: none; }
.mac .sli { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px; border-radius: 6px; font-size: 13px; white-space: nowrap; }
.mac .sli:hover { background: var(--hov); } .mac .sli.on { background: var(--hov2); font-weight: 500; }
.mac .sg { display: grid; place-items: center; width: 16px; color: var(--acc); font-style: normal; } .mac .sg .g { width: 15px; height: 15px; }
.mac .h { font: 600 11px/1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); margin: 16px 0 7px; }
.mac .chips { display: flex; flex-wrap: wrap; gap: 6px; } .mac .chips span { font-size: 12px; padding: 4px 9px; border-radius: 999px; background: var(--chip); }
.mac .linkb { all: unset; color: var(--acc); } .mac .linkb:hover { text-decoration: underline; }
.mac .pbtn { all: unset; display: inline-block; padding: 7px 14px; border-radius: 8px; background: var(--acc); color: #fff; font-size: 13px; font-weight: 500; text-decoration: none; }
.mac .pbtn:hover { filter: brightness(1.08); }
.mac .ghost { all: unset; display: inline-block; padding: 7px 14px; border-radius: 8px; background: var(--hov2); font-size: 13px; }
.mac .empty { padding: 70px 0; text-align: center; color: var(--mut); }
.mac .kk { font: 600 12px/1 Inter, sans-serif; letter-spacing: .26em; text-transform: uppercase; color: #b8860b; margin-bottom: 12px; }

/* Finder */
.mac .fside b { display: block; font-size: 11px; font-weight: 600; color: var(--mut); padding: 10px 8px 4px; }
.mac .fside b:first-child { padding-top: 2px; }
.mac .fmain { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mac .fbody { flex: 1; overflow: auto; }
.mac .fgrid { padding: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 8px; align-content: start; }
.mac .fi { display: grid; justify-items: center; align-content: start; text-align: center; gap: 5px; padding: 10px 4px 8px; border-radius: 10px; font-size: 12.5px; }
.mac .fi span { line-height: 1.25; } .mac .fi em { font-style: normal; font-size: 11px; color: var(--mut); line-height: 1.2; }
.mac .fi:hover { background: var(--hov); } .mac .fi.sel { background: color-mix(in srgb, var(--acc) 20%, transparent); }
.mac .flist { padding: 4px 10px; }
.mac .fh, .mac .fr { display: grid; grid-template-columns: 20px minmax(0, 1fr) 160px 80px; align-items: center; gap: 8px; padding: 0 8px; height: 28px; font-size: 13px; border-radius: 5px; }
.mac .fh { color: var(--mut); font-size: 11.5px; font-weight: 600; border-bottom: 1px solid var(--line); border-radius: 0; } .mac .fh span:first-child { grid-column: 1 / 3; }
.mac .fr span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mac .fr span + span { color: var(--mut); }
.mac .fr:nth-child(even) { background: var(--stripe); } .mac .fr.sel { background: var(--acc); color: #fff; } .mac .fr.sel span + span { color: rgba(255, 255, 255, .8); }
.mac .fstat { flex: none; height: 26px; display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 11.5px; color: var(--mut); border-top: 1px solid var(--line); }

/* case study */
.mac .case2 { padding: 22px 28px; } .mac .case2 .kind { font-size: 12px; color: var(--mut); } .mac .case2 h4 { font: 700 26px/1.1 Inter, sans-serif; margin: 4px 0 14px; }
.mac .cc { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; } .mac .cc p { color: var(--fg2); }
.mac .arch { width: 100%; height: 190px; border-radius: 10px; background: #0f1b2b; display: block; }
.mac .arch .e { fill: none; stroke: #5fb4ff; stroke-width: .45; } .mac .arch .n rect { fill: #13263c; stroke: #6fa8d8; stroke-width: .35; }
.mac .arch .n text { fill: #e6f2ff; font: 500 2.5px Inter, sans-serif; text-anchor: middle; }
.mac .arch .pk { fill: #bfe6ff; offset-distance: 0%; animation: travel 1.6s linear infinite; animation-delay: calc(var(--i) * -.37s); }
@keyframes travel { to { offset-distance: 100%; } }
.mac .mrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.mac .mrow b { display: block; font: 700 22px/1 Inter, sans-serif; } .mac .mrow i { font-style: normal; font-size: 11.5px; color: var(--mut); }
.mac .clinks { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
.mac .clinks a, .mac .clinks button:not(.ghost) { all: unset; font-size: 13px; color: #fff; background: var(--acc); padding: 7px 14px; border-radius: 8px; text-decoration: none; }

/* Notes */
.mac .notes .nside { width: 200px; background: var(--nside); }
.mac .nh { font-size: 11px; font-weight: 600; color: var(--mut); padding: 4px 10px 6px; }
.mac .nli { padding: 7px 10px; border-radius: 7px; display: grid; line-height: 1.25; }
.mac .nli b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mac .nli em { font-style: normal; font-size: 11.5px; color: var(--mut); }
.mac .nli:hover { background: var(--hov); } .mac .nli.on { background: #f7d64a; color: #1d1d1f; } .mac .nli.on em { color: rgba(0, 0, 0, .55); }
.mac .nbody { flex: 1; min-width: 0; overflow: auto; padding: 20px 26px; background: var(--paper); }
.mac .nbody h4 { font: 700 24px/1.1 Inter, sans-serif; margin-bottom: 10px; } .mac .nbody p + p { margin-top: 8px; }
.mac .checks { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
.mac .checks li::before { content: '✓'; color: var(--acc); font-weight: 700; margin-right: 8px; }
.mac .ntext { all: unset; display: block; width: 100%; height: 100%; white-space: pre-wrap; font-size: 15px; line-height: 1.5; color: var(--fg); user-select: text; }
.mac .crows { margin: 4px 0 14px; }
.mac .crow { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; align-items: baseline; }
.mac .crow > span:first-child { width: 80px; flex: none; color: var(--mut); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.mac .crow a { color: var(--acc); text-decoration: none; } .mac .crow a:hover { text-decoration: underline; }

/* Keynote */
.mac .keynote { background: var(--kbg); }
.mac .kside { width: 160px; background: var(--kside); padding: 10px; display: grid; align-content: start; gap: 10px; }
.mac .kt { display: flex; gap: 6px; align-items: flex-start; font-size: 10.5px; color: var(--mut); }
.mac .kt i { font-style: normal; width: 14px; text-align: right; }
.mac .kt span { flex: 1; aspect-ratio: 16 / 10; border-radius: 4px; background: #fff; color: #1d1d1f; padding: 6px; overflow: hidden; border: 2px solid transparent; font-size: 8.5px; line-height: 1.2; box-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
.mac .kt span.ks-dark { background: linear-gradient(140deg, #141a2a, #2b2550); color: #fff; } .mac .kt span.ks-warm { background: linear-gradient(140deg, #fff8ec, #f7e2c4); }
.mac .kt.on span { border-color: #f0a030; } .mac .kt:hover span { border-color: rgba(240, 160, 48, .5); }
.mac .kmain { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 18px; gap: 12px; }
.mac .kslides { position: relative; flex: 1; border-radius: 6px; overflow: hidden; box-shadow: 0 6px 22px rgba(0, 0, 0, .2); background: #fff; }
.mac .ks { position: absolute; inset: 0; padding: 44px 56px; opacity: 0; transform: translateX(26px); transition: opacity .45s, transform .45s; display: flex; flex-direction: column; justify-content: center; background: #fff; color: #1d1d1f; pointer-events: none; }
.mac .ks.on { opacity: 1; transform: none; }
.mac .ks h5 { font: 600 46px/1.05 'Cormorant Garamond', Georgia, serif; } .mac .ks .kk { margin-bottom: 12px; }
.mac .ks .kx { font-size: 18px; color: #444; margin-top: 14px; max-width: 34em; } .mac .ks ul { margin: 18px 0 0 20px; padding: 0; font-size: 18px; color: #333; display: grid; gap: 8px; }
.mac .ks-dark { background: linear-gradient(140deg, #141a2a, #2b2550); color: #fff; } .mac .ks-dark .kx, .mac .ks-dark ul { color: #d5d9ea; }
.mac .ks-warm { background: linear-gradient(140deg, #fff8ec, #f7e2c4); }
.mac .kbar { display: flex; justify-content: center; align-items: center; gap: 16px; font-size: 13px; color: var(--mut); font-variant-numeric: tabular-nums; }
.mac .kp { all: unset; width: 30px; height: 26px; border-radius: 6px; background: var(--card); color: var(--fg); text-align: center; font-size: 18px; line-height: 24px; box-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
.mac .kp:active { filter: brightness(.92); }
.mac .tbtn.play .g { width: 12px; height: 12px; }

/* Terminal */
.mac .k-terminal { background: #1c1c20; }
.mac .wdark .tb { background: linear-gradient(#3a3a40, #2e2e33); border-color: #1a1a1d; } .mac .wdark .tt { color: #ddd; }
.mac .term { height: 100%; overflow: auto; padding: 10px 14px 14px; font: 400 13px/1.5 'JetBrains Mono', ui-monospace, Menlo, monospace; color: #d6f5d6; white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; }
.mac .tout > div { min-height: 1.5em; }
.mac .term .cmd { color: #fff; } .mac .term .dim { color: #8b9a8b; } .mac .term .err { color: #ff8a80; } .mac .term .ok { color: #8be28b; }
.mac .term .hl, .mac .term .dir, .mac .term .c1 { color: #7cc3ff; } .mac .term b { color: #9ecbff; font-weight: 600; }
.mac .term [class^="sw"] { display: inline-block; width: 26px; height: 12px; margin: 4px 2px 0 0; }
.mac .term .sw1 { background: #ff6b6b; } .mac .term .sw2 { background: #8be28b; } .mac .term .sw3 { background: #ffd166; } .mac .term .sw4 { background: #7cc3ff; } .mac .term .sw5 { background: #c792ea; } .mac .term .sw6 { background: #89ddff; }
.mac .tline { display: flex; } .mac .tps { white-space: pre; color: #fff; }
.mac .tin { all: unset; flex: 1; min-width: 0; color: #fff; caret-color: #8be28b; font: inherit; white-space: pre; user-select: text; }

/* Preview: certificates and the résumé */
.mac .pside { width: 170px; display: grid; gap: 12px; align-content: start; padding: 12px; }
.mac .pt { display: grid; justify-items: center; gap: 4px; }
.mac .pt .mini { width: 130px; aspect-ratio: 4 / 3; background: linear-gradient(160deg, #fffdf7, #efe4cc); border: 2px solid transparent; border-radius: 3px; padding: 10px 8px;
  font: 600 9px/1.2 'Cormorant Garamond', Georgia, serif; color: #3b2f22; text-align: center; display: grid; place-items: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .2), inset 0 0 0 5px #fffdf7, inset 0 0 0 6px #c8a868; }
.mac .pt.on .mini { border-color: var(--acc); } .mac .pt em { font-style: normal; font-size: 11px; color: var(--mut); }
.mac .pvmain { flex: 1; min-width: 0; height: 100%; overflow: auto; background: var(--pvbg); padding: 24px; display: flex; }
.mac .cpaper { --u: calc(var(--z, 1) * var(--pu, 1px)); position: relative; margin: auto; flex: none; width: calc(var(--u) * 560); aspect-ratio: 4 / 3; padding: calc(var(--u) * 40) calc(var(--u) * 60);
  color: #2f2214; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(130% 100% at 35% 20%, #fffdf7, #f8f1e2 60%, #ece0c6); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.mac .cpaper::before { content: ''; position: absolute; inset: calc(var(--u) * 16); border: calc(var(--u) * 1.5) solid #b8914a; outline: calc(var(--u) * .6) solid #d9bd85; outline-offset: calc(var(--u) * -6); pointer-events: none; }
.mac .cpaper .k { font: 600 calc(var(--u) * 11)/1.2 Inter, sans-serif; letter-spacing: .28em; text-transform: uppercase; color: #8a6a3a; }
.mac .cpaper .t { font: 600 calc(var(--u) * 30)/1.1 'Cormorant Garamond', Georgia, serif; margin-top: calc(var(--u) * 10); }
.mac .cpaper .p { font: italic 500 calc(var(--u) * 14)/1.2 'Cormorant Garamond', Georgia, serif; margin-top: calc(var(--u) * 16); opacity: .8; }
.mac .cpaper .n { font: 400 calc(var(--u) * 38)/1.15 'Pinyon Script', cursive; margin-top: calc(var(--u) * 4); white-space: nowrap; }
.mac .cpaper .i { font: 500 calc(var(--u) * 12)/1.3 Inter, sans-serif; letter-spacing: .06em; margin-top: calc(var(--u) * 12); opacity: .8; }
.mac .cpaper .d { font: 500 calc(var(--u) * 11)/1.3 Inter, sans-serif; margin-top: calc(var(--u) * 4); opacity: .65; }
.mac .cpaper .medal { position: absolute; right: calc(var(--u) * 42); bottom: calc(var(--u) * 36); width: calc(var(--u) * 50); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff1c4, #d8ae52 35%, #9c7024 70%, #6e4d17); box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 6) rgba(0, 0, 0, .3), inset 0 0 0 calc(var(--u) * 3) rgba(255, 236, 190, .45); }
.mac .cv { --u: calc(var(--z, 1) * var(--pu, 1px)); margin: auto; flex: none; width: calc(var(--u) * 540); min-height: calc(var(--u) * 763); background: #fff; color: #1d1d1f;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25); padding: calc(var(--u) * 38) calc(var(--u) * 42); font-size: calc(var(--u) * 11.5); line-height: 1.45; }
.mac .cv h1 { font: 600 calc(var(--u) * 30)/1.05 'Cormorant Garamond', Georgia, serif; }
.mac .cv .role { color: #8a6a3a; letter-spacing: .14em; text-transform: uppercase; font-size: calc(var(--u) * 9.5); font-weight: 600; margin-top: .5em; }
.mac .cv .cline { color: #666; margin-top: .4em; }
.mac .cv h3 { font-size: calc(var(--u) * 9.5); letter-spacing: .2em; text-transform: uppercase; color: #8a6a3a; margin: 1.5em 0 .5em; border-bottom: 1px solid #e6dcc8; padding-bottom: .3em; }
.mac .cv p + p { margin-top: .35em; } .mac .cv .cvj { margin-bottom: .7em; } .mac .cv .cvj i { color: #888; font-style: normal; } .mac .cv .st { color: #6b6b70; } .mac .cv ul { padding-left: 1.2em; margin: 0; }

/* Safari */
.mac .web { height: 100%; overflow: auto; background: var(--webbg); }
.mac .wpage { max-width: 780px; margin: 0 auto; padding: 26px 32px 40px; }
.mac .wpage.center { text-align: center; padding-top: 90px; display: grid; gap: 12px; justify-items: center; }
.mac .wpage h2 { font: 600 32px/1.1 'Cormorant Garamond', Georgia, serif; margin: 4px 0 12px; } .mac .wpage h3 { font-size: 16px; margin: 20px 0 12px; }
.mac .wpage p + p { margin-top: 8px; }
.mac .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 16px 12px; }
.mac .tile { all: unset; display: grid; justify-items: center; gap: 5px; text-align: center; text-decoration: none; color: var(--fg); min-width: 0; }
.mac .tile i { width: 60px; height: 60px; border-radius: 14px; display: grid; place-items: center; font: 600 26px/1 Inter, sans-serif; color: #fff; font-style: normal; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
.mac .tile:hover i { filter: brightness(1.08); }
.mac .tile b { font-size: 12px; font-weight: 500; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mac .tile em { font-style: normal; font-size: 10.5px; color: var(--mut); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mac .hero { padding: 26px 28px; border-radius: 16px; background: linear-gradient(140deg, #141a2a, #2b2550); color: #fff; } .mac .hero .dim { color: #c9cbe0; margin-top: 10px; } .mac .hero h2 { color: #fff; }
.mac .wcards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.mac .wcard { all: unset; display: grid; gap: 4px; align-content: start; padding: 14px; border-radius: 12px; background: var(--card); box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 .5px var(--line); }
.mac .wcard:hover { box-shadow: 0 3px 10px rgba(0, 0, 0, .15), 0 0 0 1px var(--acc); }
.mac .wcard em { font-style: normal; font-size: 11px; color: var(--mut); } .mac .wcard span { font-size: 12.5px; color: var(--fg2); }
.mac .wrow { all: unset; display: grid; padding: 10px 12px; border-radius: 10px; } .mac .wrow:hover { background: var(--hov); } .mac .wrow em { font-style: normal; font-size: 12px; color: var(--mut); }

/* Mail */
.mac .mail { display: flex; flex-direction: column; height: 100%; }
.mac .mail.mnone { justify-content: space-between; } .mac .mail.mnone p { padding: 18px 16px; font-size: 14px; line-height: 1.5; color: var(--fg); }
.mac .mlr { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.mac .mlr span { color: var(--mut); width: 62px; } .mac .mlr input { all: unset; flex: 1; color: var(--fg); user-select: text; }
.mac .mail textarea { all: unset; flex: 1; padding: 14px 16px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; color: var(--fg); user-select: text; }
.mac .mail textarea::placeholder, .mac .mlr input::placeholder { color: var(--mut); }
.mac .mfoot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--mut); }

/* Calendar */
.mac .cal { display: flex; height: 100%; }
.mac .cgrid { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.mac .cwk { display: grid; grid-template-columns: repeat(7, 1fr); font-size: 11.5px; color: var(--mut); text-align: right; padding: 6px 10px 5px; border-bottom: 1px solid var(--line); }
.mac .cdays { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(6, minmax(0, 1fr)); }
.mac .cd { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 3px 5px; display: flex; flex-direction: column; gap: 2px; overflow: hidden; min-height: 0; }
.mac .cd:hover { background: var(--hov); }
.mac .cd b { align-self: flex-end; font-weight: 500; font-size: 12.5px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.mac .cd.out { color: var(--mut); background: var(--stripe); } .mac .cd.today b { background: #f2453d; color: #fff; }
.mac .cd.sel { background: color-mix(in srgb, var(--acc) 13%, transparent); }
.mac .cd .dot { display: none; }
.mac .ev { font-size: 10.5px; border-radius: 4px; padding: 1px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none; }
.mac .ev-g { background: rgba(58, 166, 85, .18); color: #23753a; } .mac .ev-b { background: rgba(47, 111, 228, .16); color: #2459b8; }
.mac .ev-o { background: rgba(240, 138, 36, .18); color: #a85a0c; } .mac .ev-p { background: rgba(142, 91, 216, .18); color: #6a3fb0; }
.mac.dark .ev-g { color: #7fdc97; } .mac.dark .ev-b { color: #8fb5ff; } .mac.dark .ev-o { color: #ffb36b; } .mac.dark .ev-p { color: #c7a5ff; }
.mac .cside { width: 230px; flex: none; border-left: 1px solid var(--line); padding: 4px 14px 14px; overflow: auto; }
.mac .cev { padding: 8px 10px; border-radius: 8px; margin-bottom: 8px; display: grid; gap: 2px; } .mac .cev b { font-weight: 600; font-size: 13px; } .mac .cev em { font-style: normal; font-size: 11.5px; opacity: .85; }
.mac .cev[data-act]:hover { filter: brightness(.95); }

/* System Settings */
.mac .sside { width: 215px; }
.mac .sacct { display: flex; gap: 10px; align-items: center; padding: 6px 8px 12px; }
.mac .av { flex: none; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(140deg, #6d5bd0, #f3a35f); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 14px; }
.mac .sacct span { display: grid; line-height: 1.25; min-width: 0; } .mac .sacct b { font-size: 13px; } .mac .sacct em { font-style: normal; font-size: 11px; color: var(--mut); }
.mac .pi { flex: none; width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; color: #fff; font-style: normal; } .mac .pi .g { width: 12px; height: 12px; }
.mac .smain { flex: 1; min-width: 0; overflow: auto; padding: 18px 22px; background: var(--setbg); }
.mac .sgrp { background: var(--card); border-radius: 10px; box-shadow: 0 0 0 .5px var(--line); margin-bottom: 14px; }
.mac .srow { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding: 6px 14px; font-size: 13.5px; }
.mac .sgrp .srow + .srow { border-top: 1px solid var(--line); }
.mac .srow em { font-style: normal; color: var(--mut); font-size: 13px; text-align: right; }
.mac .srow.click:hover { background: var(--hov); }
.mac .srow input[type=range] { width: 230px; }
.mac .apps { display: flex; gap: 14px; }
.mac .apt { all: unset; display: grid; justify-items: center; gap: 4px; font-size: 12px; }
.mac .apt i { width: 66px; height: 44px; border-radius: 7px; border: 2px solid transparent; box-shadow: 0 0 0 .5px var(--line); }
.mac .apt-light i { background: linear-gradient(#fff 32%, #e8e8ee 32%); } .mac .apt-dark i { background: linear-gradient(#3a3a40 32%, #1f1f23 32%); }
.mac .apt.on i { border-color: var(--acc); }
.mac .accs { display: flex; gap: 8px; }
.mac .acc { all: unset; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.mac .acc.on { outline: 2px solid var(--fg); outline-offset: 2px; }
.mac .wpg { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.mac .wpt { all: unset; display: grid; gap: 6px; font-size: 12.5px; text-align: center; }
.mac .wpt i { aspect-ratio: 16 / 10; border-radius: 10px; border: 3px solid transparent; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); }
.mac .wpt.on i { border-color: var(--acc); }
.mac .wpt .wp-dusk { background: var(--wp-dusk); } .mac .wpt .wp-ocean { background: var(--wp-ocean); } .mac .wpt .wp-aurora { background: var(--wp-aurora); } .mac .wpt .wp-graphite { background: var(--wp-graphite); }
.mac .sabout { display: grid; justify-items: center; gap: 2px; padding: 4px 0 18px; } .mac .sabout b { font-size: 16px; margin-top: 8px; } .mac .sabout em { font-style: normal; color: var(--mut); font-size: 12.5px; }

/* About This Mac, About <App>, Get Info, View Options */
.mac .amac, .mac .aapp, .mac .ginfo { display: grid; justify-items: center; text-align: center; padding: 16px 22px 18px; gap: 4px; }
.mac .amac h3, .mac .aapp h3, .mac .ginfo h3 { font-size: 20px; margin-top: 6px; }
.mac .aapp .dim { font-size: 12px; max-width: 220px; }
.mac .amimg { position: relative; width: 112px; height: 92px; }
.mac .amimg i { position: absolute; left: 0; right: 0; top: 0; height: 74px; border-radius: 6px; background: var(--wallpaper); border: 4px solid #e6e6ea; border-bottom-width: 14px; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.mac .amimg::after { content: ''; position: absolute; left: 38px; right: 38px; top: 74px; height: 16px; background: linear-gradient(#cfcfd4, #b8b8be); clip-path: polygon(15% 0, 85% 0, 100% 100%, 0 100%); }
.mac .amac dl, .mac .ginfo dl { display: grid; grid-template-columns: auto auto; gap: 3px 12px; margin: 10px 0 12px; font-size: 12.5px; text-align: left; }
.mac .amac dt, .mac .ginfo dt { color: var(--mut); text-align: right; } .mac .amac dd, .mac .ginfo dd { margin: 0; }
.mac .vopts { padding: 6px 18px 18px; } .mac .vopts .srow { padding: 6px 0; margin-top: 10px; }

/* ---------- notifications ---------- */
.mac .banners { position: absolute; top: 38px; right: 10px; width: 340px; z-index: 650; display: grid; gap: 8px; pointer-events: none; }
.mac .ban { pointer-events: auto; position: relative; display: flex; gap: 10px; align-items: center; padding: 10px 34px 10px 12px; border-radius: 14px; background: var(--menu); color: var(--menufg);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .3), 0 0 0 .5px rgba(0, 0, 0, .15); animation: banin .4s cubic-bezier(.2, .9, .3, 1.05); }
.mac .ban .ic { --s: 34px; }
.mac .ban span { display: grid; line-height: 1.3; min-width: 0; } .mac .ban b { font-size: 13px; } .mac .ban em { font-style: normal; font-size: 12.5px; color: var(--fg2); }
.mac .bx { all: unset; position: absolute; top: 7px; right: 8px; width: 18px; height: 18px; border-radius: 50%; font-size: 10px; display: grid; place-items: center; color: var(--mut); background: var(--hov2); opacity: 0; }
.mac .ban:hover .bx { opacity: 1; }
@keyframes banin { from { transform: translateX(110%); } }

/* ---------- Spotlight ---------- */
.mac .spot { position: absolute; inset: 0; z-index: 700; display: none; pointer-events: none; }
.mac .spot.on { display: block; }
.mac .sbox { pointer-events: auto; position: absolute; left: 50%; top: 140px; width: 640px; margin-left: -320px; border-radius: 14px; background: var(--menu); color: var(--menufg); overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45), 0 0 0 .5px rgba(0, 0, 0, .2); animation: spin .18s ease-out; }
@keyframes spin { from { transform: scale(.97); opacity: 0; } }
.mac .sin { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 18px; }
.mac .sin .g { width: 20px; height: 20px; color: var(--mut); flex: none; }
.mac .sin input { all: unset; flex: 1; min-width: 0; font-size: 22px; font-weight: 300; color: var(--menufg); user-select: text; }
.mac .sin input::placeholder { color: var(--mut); }
.mac .sres:not(:empty) { border-top: 1px solid var(--line); padding: 4px 6px 6px; max-height: 360px; overflow: auto; }
.mac .scat { font-size: 11px; font-weight: 600; color: var(--mut); padding: 7px 10px 3px; }
.mac .sr { display: flex; align-items: center; gap: 10px; padding: 5px 10px; border-radius: 8px; }
.mac .sr span { display: grid; line-height: 1.25; min-width: 0; }
.mac .sr b { font-weight: 500; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mac .sr em { font-style: normal; font-size: 11.5px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mac .sr:hover { background: var(--hov2); }
.mac .sr.on { background: var(--acc); color: #fff; } .mac .sr.on em { color: rgba(255, 255, 255, .82); }
.mac .snone { padding: 16px; color: var(--mut); text-align: center; }

/* ---------- Launchpad ---------- */
.mac .lp { position: absolute; inset: 0; z-index: 480; display: none; padding: 54px 120px 110px; background: linear-gradient(rgba(22, 18, 40, .62), rgba(22, 18, 40, .62)), var(--wallpaper); }
.mac .lp.on { display: block; animation: lpin .25s ease-out; }
@keyframes lpin { from { opacity: 0; transform: scale(1.05); } }
.mac .lpq { display: flex; align-items: center; gap: 6px; width: 240px; height: 30px; margin: 0 auto 46px; padding: 0 10px; border-radius: 8px; background: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .75); border: 1px solid rgba(255, 255, 255, .25); }
.mac .lpq input { all: unset; flex: 1; min-width: 0; color: #fff; font-size: 13.5px; user-select: text; } .mac .lpq input::placeholder { color: rgba(255, 255, 255, .6); } .mac .lpq .g { width: 13px; height: 13px; }
.mac .lpg { display: grid; grid-template-columns: repeat(5, 1fr); gap: 40px 20px; max-width: 860px; margin: 0 auto; }
.mac .lpi { display: grid; justify-items: center; gap: 9px; color: #fff; font-size: 13px; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.mac .lpi .ic { --s: 80px; } .mac .lpi:active .ic { filter: brightness(.8); }

/* ---------- slideshow ---------- */
.mac .show { position: absolute; inset: 0; z-index: 800; background: #000; display: none; }
.mac .show.on { display: block; animation: fadein .3s; }
@keyframes fadein { from { opacity: 0; } }
.mac .shs { position: absolute; inset: 0; }
.mac .show .ks { padding: 70px 120px; } .mac .show .ks h5 { font-size: 86px; } .mac .show .ks .kk { font-size: 16px; margin-bottom: 18px; }
.mac .show .ks .kx, .mac .show .ks ul { font-size: 28px; } .mac .show .ks ul { gap: 14px; margin-left: 32px; }
.mac .shint { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: rgba(255, 255, 255, .85);
  font-size: 13px; white-space: nowrap; pointer-events: none; animation: hintout 4.5s forwards; }
@keyframes hintout { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }
.mac .shx { all: unset; position: absolute; top: 14px; right: 16px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .45); color: #fff; font-size: 13px; opacity: 0; transition: opacity .2s; }
.mac .show:hover .shx { opacity: 1; }

/* ---------- sleep / boot / shut down / lock ---------- */
.mac .sys { position: absolute; inset: 0; z-index: 900; background: #000; color: #fff; opacity: 0; pointer-events: none; transition: opacity .45s; display: grid; place-items: center; }
.mac .sys.on { opacity: 1; pointer-events: auto; }
.mac .sys.k-sleep { transition: opacity 1.4s ease-in; }
.mac .boot { display: grid; justify-items: center; gap: 48px; transition: opacity .3s; }
.mac .boot .g { width: 92px; height: 62px; }
.mac .bar { width: 210px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .22); overflow: hidden; } .mac .bar i { display: block; height: 100%; width: 0; background: #fff; border-radius: 3px; }
.mac .sys.pre .boot { opacity: 0; }
.mac .offh { position: absolute; bottom: 36px; left: 0; right: 0; text-align: center; color: rgba(255, 255, 255, .28); font-size: 12px; }
/* ---------- lock screen (all devices) ---------- */
.mac .lockv { position: absolute; inset: 0; z-index: 890; overflow: hidden; color: #fff; opacity: 0; visibility: hidden; pointer-events: none; transform: scale(1.05);
  transition: opacity .5s ease, transform .55s cubic-bezier(.3, .7, .3, 1), visibility 0s linear .55s; }
.mac .lockv.on { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity .35s ease, transform .35s ease, visibility 0s; }
/* a zoomed copy of the wallpaper reads as the blurred one (no CSS blur: the screen re-rasterises while the camera moves) */
.mac .lbg { position: absolute; inset: -32%; background: var(--wallpaper); }
.mac .lbg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(90% 70% at 50% 40%, rgba(255, 255, 255, .1), rgba(12, 8, 30, .38)); }
.mac .lk { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; text-shadow: 0 1px 12px rgba(0, 0, 0, .25); }
.mac .ldate { margin-top: 56px; font-size: 19px; font-weight: 500; opacity: .94; }
.mac .ltime { font: 200 116px/1.02 Inter, sans-serif; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mac .lnote { position: absolute; top: 46px; right: 18px; width: 340px; display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; text-shadow: none;
  background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .24); color: #fff; animation: lnin .6s .7s both cubic-bezier(.2, .9, .3, 1.05); }
.mac .lnote .ic { --s: 32px; }
.mac .lnote .lnt { display: grid; line-height: 1.3; flex: 1; min-width: 0; } .mac .lnote b { font-size: 13px; } .mac .lnote em { font-style: normal; font-size: 12.5px; opacity: .92; }
.mac .lnote > i { font-style: normal; font-size: 11px; opacity: .75; align-self: flex-start; }
@keyframes lnin { from { opacity: 0; transform: translateY(-14px); } }
.mac .luser { margin-top: auto; margin-bottom: 56px; display: grid; justify-items: center; gap: 7px; }
.mac .lav { width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; font-weight: 600; background: linear-gradient(140deg, #6d5bd0, #f3a35f);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .3), inset 0 0 0 2px rgba(255, 255, 255, .25); }
.mac .luser b { font-size: 16px; font-weight: 600; }
.mac .lhint { display: flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 4px 13px; border-radius: 999px; background: rgba(255, 255, 255, .17); animation: lpulse 2.4s ease-in-out infinite; }
.mac .lhint .g { width: 12px; height: 8px; }
@keyframes lpulse { 0%, 100% { opacity: .62; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }
.mac .lbar { position: absolute; left: 50%; bottom: 8px; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: #fff; opacity: .9; }
/* the desktop wakes up behind it */
.mac .dicons, .mac .hs { transition: transform .55s cubic-bezier(.2, .8, .3, 1), opacity .45s; }
.mac.locked .dicons, .mac.locked .hs { transform: scale(1.06); opacity: 0; }
.mac .dock { transition: transform .5s cubic-bezier(.2, .8, .3, 1), opacity .4s; } .mac.locked .dock { transform: translateY(24px); opacity: 0; }

/* the "it is interactive" wave: Dock icons bounce left to right; home-screen icons pop in */
.mac .dock.wave .dk .ic { animation: dwave .62s cubic-bezier(.3, .6, .4, 1) both; animation-delay: calc(.4s + var(--wi, 0) * 60ms); }
@keyframes dwave { 0%, 100% { transform: none; } 30% { transform: translateY(-18px); } 55% { transform: none; } 76% { transform: translateY(-5px); } }
.mac .hs.wave .hgrid .ic, .mac .hs.wave .wid { animation: hwave .55s cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: calc(.3s + var(--wi, 0) * 35ms); }
.mac .hs.wave .hdock .ic { animation: dwave .62s cubic-bezier(.3, .6, .4, 1) both; animation-delay: calc(.5s + var(--wi, 0) * 40ms); }
@keyframes hwave { from { transform: scale(.5); opacity: 0; } }

/* the welcome card (first window after the visitor unlocks) */
.mac .welc { padding: 20px 28px 24px; display: grid; justify-items: center; text-align: center; gap: 9px; }
.mac .wav { flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 22px; color: #fff;
  background: linear-gradient(140deg, #6d5bd0, #f3a35f); box-shadow: 0 4px 12px rgba(0, 0, 0, .2); }
.mac .welc h3 { font-size: 20px; line-height: 1.25; }
.mac .welc p { color: var(--fg2); max-width: 470px; }
.mac .wq { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; margin-top: 8px; }
.mac .wq button { all: unset; display: grid; justify-items: center; gap: 6px; padding: 11px 6px 10px; border-radius: 11px; background: var(--hov); font-size: 12.5px; font-weight: 500; }
.mac .wq button:hover { background: color-mix(in srgb, var(--acc) 16%, transparent); }
.mac .wq .ic { --s: 32px; }
.mac .ic-card { background: linear-gradient(160deg, #fbf4e4, #e7d4ad); }
.mac .ic-card::after { left: .75em; right: .75em; top: 1.55em; height: 2.3em; border-radius: .22em; background: linear-gradient(#fffdf7 0 62%, #fffdf7 62%); box-shadow: 0 .12em .35em rgba(0, 0, 0, .28), inset 0 -.55em 0 -.45em #b8914a, inset .5em .55em 0 -.32em #3b2f22; }
.mac .ic-cv { background: linear-gradient(#ffffff, #eeeef2); }
.mac .ic-cv::after { content: 'CV'; inset: 0; display: grid; place-items: center; font: 800 1.9em/1 Inter, sans-serif; color: #e2483d; letter-spacing: -.02em; }
.mac .ic-files { background: linear-gradient(#ffffff, #e9eef6); }
.mac .ic-files::before { left: 1em; top: 1.35em; width: 1.6em; height: .7em; border-radius: .3em .3em 0 0; background: #2f86f6; }
.mac .ic-files::after { left: 1em; right: 1em; top: 1.8em; height: 2.3em; border-radius: .2em .3em .35em .35em; background: linear-gradient(#5aa9ff, #2f86f6); }

/* ---------- iPad / iPhone shells ---------- */
.mac.mobile { --sb: 24px; --hb: 18px; --navh: 50px; }
.mac.os-iphone { --sb: 40px; --hb: 22px; --navh: 46px; --pu: .58px; font-size: 13px; }
.mac .mback { display: none; }
.mac .sbar { position: absolute; left: 0; right: 0; top: 0; height: var(--sb); z-index: 510; display: flex; align-items: center; justify-content: space-between; padding: 0 14px;
  color: #fff; font-size: 13px; font-weight: 600; transition: color .2s; }
.mac.os-iphone .sbar { padding: 0 22px 0 26px; font-size: 15px; }
.mac.appfg .sbar { color: var(--fg); }
.mac .sbl, .mac .sbr { display: flex; align-items: center; gap: 6px; height: calc(100% - 4px); padding: 0 6px; border-radius: 7px; font-variant-numeric: tabular-nums; }
.mac .sbl.on, .mac .sbr.on { background: rgba(128, 128, 128, .25); }
.mac .sbr .g { width: 16px; height: 12px; } .mac .sbr em { font-style: normal; font-size: 12px; } .mac .sbr .m-wifi.off { opacity: .4; }
.mac .sbar .batt { border-color: currentColor; } .mac .sbar .batt::after { background: currentColor; } .mac .sbar .batt.low::after { background: #ffd60a; }
.mac .hs { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; padding: calc(var(--sb) + 18px) 20px calc(var(--hb) + 2px); }
.mac .hgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 6px; align-content: start; }
.mac .ha { display: grid; justify-items: center; align-content: start; gap: 6px; color: #fff; font-size: 12px; text-align: center; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); min-width: 0; }
.mac .ha .hn { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mac .ha .ic { --s: 60px; } .mac .ha:active .ic { filter: brightness(.72); }
.mac .wid { grid-column: span 4; border-radius: 22px; padding: 14px 16px; display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center; align-content: start;
  background: rgba(255, 255, 255, .22); border: 1px solid rgba(255, 255, 255, .26); color: #fff; }
.mac .wid:active { filter: brightness(.92); }
.mac .wid-me .wav { width: 52px; height: 52px; font-size: 18px; box-shadow: none; }
.mac .wid-me .wn { display: grid; line-height: 1.25; min-width: 0; } .mac .wid-me b { font-size: 15px; } .mac .wid-me em { font-style: normal; font-size: 12px; opacity: .92; }
.mac .wid-me p { grid-column: 1 / -1; font-size: 12.5px; opacity: .96; }
.mac .wid-cal { grid-template-columns: 1fr; background: #fff; color: #1d1d1f; gap: 4px; }
.mac .wid-cal em { font-style: normal; color: #f2453d; font-size: 11px; font-weight: 700; letter-spacing: .04em; } .mac .wid-cal b { font: 300 44px/1 Inter, sans-serif; }
.mac .hsrch { all: unset; align-self: center; margin-top: auto; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; padding: 6px 15px; border-radius: 999px;
  background: rgba(255, 255, 255, .22); color: #fff; font-size: 12.5px; font-weight: 500; }
.mac .hsrch .g { width: 11px; height: 11px; }
.mac .hdock { align-self: center; display: flex; align-items: center; gap: 18px; padding: 12px 16px; border-radius: 32px; background: rgba(255, 255, 255, .26); border: 1px solid rgba(255, 255, 255, .26); }
.mac .hdock .ha .hn { display: none; }
.mac .hsep { width: 1px; align-self: stretch; margin: 6px 0; background: rgba(255, 255, 255, .45); }
.mac.os-iphone .hs { padding: calc(var(--sb) + 12px) 16px calc(var(--hb) + 2px); }
.mac.os-iphone .hdock { align-self: stretch; justify-content: space-around; padding: 13px 10px; }
.mac.os-ipad .hs { padding: calc(var(--sb) + 30px) 70px calc(var(--hb) + 4px); }
.mac.os-ipad .hgrid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 112px; gap: 22px 18px; }
.mac.os-ipad .wid { grid-column: span 2; grid-row: span 2; padding: 18px 20px; }
.mac.os-ipad .wid-me p { font-size: 14px; } .mac.os-ipad .wid-me b { font-size: 17px; }
.mac.os-ipad .ha { font-size: 13px; } .mac.os-ipad .ha .ic { --s: 74px; } .mac.os-ipad .hdock .ic { --s: 66px; } .mac.os-ipad .hdock { padding: 12px 18px; border-radius: 30px; }
.mac.os-ipad.portrait .hs { padding-left: 46px; padding-right: 46px; } .mac.os-ipad.portrait .hgrid { grid-template-columns: repeat(4, 1fr); }
.mac .hind { position: absolute; left: 50%; bottom: 0; width: 220px; height: var(--hb); margin-left: -110px; z-index: 515; display: none; place-items: center; }
.mac .hind i { width: 134px; height: 5px; border-radius: 3px; background: var(--fg); opacity: .5; } .mac.os-ipad .hind i { width: 190px; }
.mac.inapp .hind { display: grid; }
.mac.inapp.wterm .hind i { background: #fff; }
.mac.mobile .drop { top: var(--sb); }
.mac.mobile .banners { top: calc(var(--sb) + var(--navh) + 6px); }   /* below an app's nav bar, so Home / Back stay reachable */
.mac.os-iphone .banners { left: 8px; right: 8px; width: auto; }
.mac.os-ipad .banners { left: 50%; right: auto; width: 380px; margin-left: -190px; top: calc(var(--sb) + 4px); }   /* iPadOS: top centre, clear of the nav-bar buttons */
.mac.mobile .sbox { top: calc(var(--sb) + 46px); }
.mac.os-iphone .sbox { left: 8px; right: 8px; width: auto; margin: 0; } .mac.os-iphone .sin input { font-size: 18px; }
.mac.os-iphone .ccp, .mac.os-iphone .ncp { width: calc(100% - 12px); }
/* apps: one at a time, full screen, under the status bar */
.mac.mobile .win { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; border-radius: 0; box-shadow: none; display: none; padding: var(--sb) 0 var(--hb); animation: none; }
.mac.mobile .win.cur, .mac.mobile .win.leaving { display: flex; }
.mac.mobile .win.cur { animation: appin .34s cubic-bezier(.2, .8, .3, 1); }
.mac.mobile .win.leaving, .mac.mobile .win.closing.cur { display: flex; animation: appout .26s ease-in forwards; pointer-events: none; z-index: 300 !important; }
@keyframes appin { from { transform: scale(.84); opacity: 0; border-radius: 28px; } }
@keyframes appout { to { transform: scale(.8); opacity: 0; border-radius: 28px; } }
.mac.mobile .lights, .mac.mobile .rz { display: none; }
.mac.mobile .tb, .mac.mobile .win.uni .tb { height: var(--navh); background: var(--win); padding: 0 10px; gap: 4px; }
.mac.mobile .mback { all: unset; display: inline-flex; align-items: center; gap: 3px; height: 32px; padding: 0 8px 0 2px; color: var(--acc); font-size: 15px; flex: none; position: relative; z-index: 1; }
.mac.mobile .mback .g { width: 11px; height: 17px; }
.mac.mobile .wdark .tb { background: #26262a; } .mac.mobile .wdark .mback { color: #7cc3ff; }
.mac.mobile .tt { left: 96px; right: 96px; font-size: 15px; color: var(--fg); }
.mac.mobile .wdark .tt { color: #eee; }
.mac.mobile .win:not(.front) .tt, .mac.mobile .win:not(.front) .tools { opacity: 1; }
.mac.os-ipad .tools .ttl { font-size: 16px; }
/* the welcome card is a sheet over the home screen, not a full-screen app */
.mac.mobile .win.k-welcome { left: 50% !important; top: 50% !important; width: min(560px, calc(100% - 28px)) !important; height: auto !important; padding: 0; border-radius: 20px;
  transform: translate(-50%, -50%); box-shadow: 0 24px 70px rgba(0, 0, 0, .45); }
.mac.mobile .win.k-welcome.cur { animation: cardin .42s cubic-bezier(.2, .9, .3, 1.1) both; }
.mac.mobile .win.k-welcome.leaving { animation: cardout .24s ease-in forwards; }
@keyframes cardin { from { opacity: 0; transform: translate(-50%, -42%) scale(.94); } }
@keyframes cardout { to { opacity: 0; transform: translate(-50%, -50%) scale(.94); } }
.mac.mobile .k-welcome .tb { height: 46px; } .mac.mobile .k-welcome .tt { left: 70px; right: 70px; }
.mac.os-iphone .wq { grid-template-columns: repeat(2, 1fr); } .mac.os-iphone .welc { padding: 16px 16px 18px; } .mac.os-iphone .welc h3 { font-size: 18px; }
/* iPhone (narrow) content layout */
.mac.compact .tsearch, .mac.compact .tools .seg, .mac.compact .tools .nav + .tbtn, .mac.compact .tools [data-act="side"], .mac.compact .tbtn.zl, .mac.compact .ttl2 em { display: none; }
.mac.compact .tools { overflow: hidden; }
.mac.compact .tools .ttl { font-size: 13.5px; }
.mac.compact .tbtn.txt { padding: 0 8px; }
.mac.compact .split { flex-direction: column; }
.mac.compact .side { width: auto !important; flex: none; display: flex; align-items: center; overflow-x: auto; overflow-y: hidden; gap: 6px; padding: 7px 8px; border-bottom: 1px solid var(--line); }
.mac.compact .fside b, .mac.compact .nh, .mac.compact .sacct, .mac.compact .pt em, .mac.compact .nli em { display: none; }
.mac.compact .sli, .mac.compact .nli { flex: none; height: 28px; padding: 0 11px; display: flex; align-items: center; border-radius: 14px; background: var(--hov); }
.mac.compact .sli.on, .mac.compact .nli.on { background: var(--acc); color: #fff; }
.mac.compact .sli.on .sg, .mac.compact .sli.on .pi { color: #fff; }
.mac.compact .fgrid { grid-template-columns: repeat(3, 1fr); padding: 10px; gap: 4px; }
.mac.compact .fh, .mac.compact .fr { grid-template-columns: 20px minmax(0, 1fr) 100px; } .mac.compact .fh span:last-child, .mac.compact .fr span:last-child { display: none; }
.mac.compact .case2 { padding: 16px; } .mac.compact .case2 h4 { font-size: 21px; }
.mac.compact .cc { grid-template-columns: 1fr; gap: 14px; }
.mac.compact .nbody { padding: 14px 16px; } .mac.compact .checks { grid-template-columns: 1fr; }
.mac.compact .kt { flex: none; } .mac.compact .kt i { display: none; } .mac.compact .kt span { flex: none; width: 92px; }
.mac.compact .kmain { padding: 10px; }
.mac.compact .ks { padding: 22px; } .mac.compact .ks h5 { font-size: 30px; } .mac.compact .ks .kx, .mac.compact .ks ul { font-size: 14px; }
.mac.compact .show .ks { padding: 30px 24px; } .mac.compact .show .ks h5 { font-size: 42px; } .mac.compact .show .ks .kx, .mac.compact .show .ks ul { font-size: 18px; }
.mac.compact .term { font-size: 11.5px; padding: 8px 10px; }
.mac.compact .pt .mini { width: 88px; }
.mac.compact .pvmain { padding: 12px; }
.mac.compact .wpage { padding: 18px 16px 30px; } .mac.compact .wcards { grid-template-columns: 1fr; } .mac.compact .tiles { grid-template-columns: repeat(4, 1fr); }
.mac.compact .tile i { width: 52px; height: 52px; }
.mac.compact .addr input { text-align: left; }
.mac.compact .cal { flex-direction: column; } .mac.compact .cside { width: auto; border-left: 0; border-top: 1px solid var(--line); max-height: 34%; }
.mac.compact .cd { padding: 2px; align-items: center; } .mac.compact .cd .ev { display: none; } .mac.compact .cd b { align-self: center; }
.mac.compact .cd .dot { display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--mut); }
.mac.compact .smain { padding: 12px; } .mac.compact .srow input[type=range] { width: 140px; } .mac.compact .accs { gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.mac.compact .sin input { font-size: 18px; }
.mac.compact .ccp, .mac.compact .ncp { width: calc(100% - 12px); }
.mac.compact .amac, .mac.compact .aapp, .mac.compact .ginfo { padding: 12px; }
/* iOS lock screen: date over a big bold time, the notification lower down, slide up to unlock */
.mac.mobile .lockv { transform: translateY(-100%); transition: opacity .45s ease, transform .5s cubic-bezier(.5, 0, .3, 1), visibility 0s linear .5s; }
.mac.mobile .lockv.on { transform: none; transition: opacity .3s ease, transform .4s ease, visibility 0s; }
.mac.mobile .lk { padding-top: var(--sb); }
.mac.mobile .ldate { margin-top: 22px; font-size: 18px; font-weight: 600; }
.mac.mobile .ltime { font: 600 96px/1 Inter, sans-serif; letter-spacing: -.03em; }
.mac.mobile .lnote { position: static; width: calc(100% - 28px); max-width: 440px; margin-top: auto; }
.mac.mobile .luser { margin-top: 18px; margin-bottom: 30px; }
.mac.os-iphone .ltime { font-size: 84px; } .mac.os-iphone .lav { width: 58px; height: 58px; font-size: 21px; } .mac.os-iphone .luser b { font-size: 15px; }
.mac.os-ipad .ltime { font-size: 120px; }