/* Mac demo (Mac page hero, start page Mac section): an HTML replica of Starrise Contacts for Mac (macOS 26), played by
   assets/mac-hero/mac-hero.js. Built in the app's own points on a 1440 x 900 window (the size of the
   App Store captures) and scaled to its container. Values come from the SwiftUI views
   (Views/macOS/*, ContactProfile, MacProfileTabBar, DetailsSubView, HubListComponents,
   MacGlobalContactSearchPanel, MacMapDetailView, MacMomentsListView) and were checked against the
   2x captures in tools/shots/src. Icons are the app's SF Symbols rendered to PNG (sym/). */
.mh { --a: #fc4d02; --a15: rgba(252,77,2,.15); --a18: rgba(252,77,2,.18); --a30: rgba(252,77,2,.3);
  --ink: #1d1d1f; --sec: rgba(0,0,0,.5); --sep: rgba(0,0,0,.1); --bg: #f2f2f2; --card-line: #e4e4e4;
  --ease: cubic-bezier(.23, 1, .32, 1); --move: cubic-bezier(.45, 0, .2, 1); --sheet: cubic-bezier(.32, .72, 0, 1);
  --sf: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro', Inter, system-ui, sans-serif;
  /* SF Pro Rounded where the browser can reach it (Safari, or installed), else SF Pro; Inter off Apple devices. */
  --sfr: ui-rounded, 'SF Pro Rounded', 'SFProRounded-Regular', -apple-system, BlinkMacSystemFont, Inter, system-ui, sans-serif;
  position: relative; margin: 0 auto; max-width: 1240px; text-align: left; font-family: var(--sf); font-size: 13px; line-height: 1.25;
  color: var(--ink); letter-spacing: 0; -webkit-font-smoothing: antialiased; }
.mh *, .mh *::before, .mh *::after { box-sizing: border-box; }
.mh [hidden] { display: none !important; }
.mh img { display: block; max-width: none; }
.mh-frame { position: relative; width: 100%; }
.mh-stage { position: absolute; left: 0; top: 0; width: 1520px; height: 960px; transform-origin: 0 0; transform: scale(var(--s, 1)); }
/* zoom lays the app out at its final size, so text and icons are drawn sharp (a scale transform blurs composited parts). */
@supports (zoom: 1) { .mh-stage { transform: none; zoom: var(--s, 1); } }
.mh-cam { position: absolute; inset: 0; }
.mh i.sy { display: inline-block; flex: none; background: url(sym.webp) no-repeat; }

/* Before the demo is built (and without JavaScript) the screenshot stands in, in the demo's own box,
   so nothing moves when the live app takes over; then it fades out. */
.mh-poster { position: relative; aspect-ratio: 1520 / 960; margin-bottom: 61px; display: grid; place-items: center; transition: opacity 450ms; }
.mh-poster picture, .mh-poster img { display: block; width: 100%; height: auto; }
.mh.live .mh-poster { position: absolute; left: 0; right: 0; top: 0; margin: 0; pointer-events: none; }
.mh-poster.out { opacity: 0; } .mh-poster.gone { visibility: hidden; }

/* Window */
.mh-win { position: absolute; left: 40px; top: 20px; width: 1440px; height: 900px; border-radius: 26px; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.05), 0 16px 40px rgba(0,0,0,.10), 0 40px 90px rgba(60,30,10,.14); }
.mh-lights { position: absolute; left: 19px; top: 19px; display: flex; gap: 9px; z-index: 6; }
.mh-lights b { width: 14px; height: 14px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.14); }
.mh-lights b:nth-child(2) { background: #febc2e; } .mh-lights b:nth-child(3) { background: #28c840; }

/* Sidebar: the floating macOS 26 panel */
.mh-side { position: absolute; left: 8px; top: 8px; bottom: 8px; width: 220px; border-radius: 18px; background: #f7f7f7; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.05); padding: 51px 8px 8px; z-index: 5; }
.mh-side .tg { position: absolute; left: 186px; top: 11px; }
.mh-nav { display: flex; align-items: center; gap: 12px; height: 30.3px; padding: 0 10px; margin-bottom: 2px; border-radius: 8px; font-size: 14px; transition: background-color 200ms; }
.mh-nav .ic { width: 22px; display: grid; place-items: center; }
.mh-nav.on { background: rgba(0,0,0,.12); }

/* Toolbar (title in the content column, glass buttons on the right) */
.mh-bar { position: absolute; left: 228px; right: 0; top: 0; height: 52px; border-bottom: .5px solid var(--sep); z-index: 4; background: #fff; }
.mh-bar .ttl { position: absolute; left: 24px; top: 15px; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.mh-bar .div { position: absolute; left: 340px; top: 0; bottom: -.5px; width: .5px; background: var(--sep); }
.mh-glass { position: absolute; top: 8px; height: 36px; border-radius: 18px; background: rgba(0,0,0,.045); display: flex; align-items: center; padding: 0 4px; transition: opacity 200ms; }
.mh-glass span { width: 38px; height: 36px; display: grid; place-items: center; border-radius: 18px; }
.mh-tb1 { right: 74px; } .mh-tb2 { right: 14px; padding: 0 10px 0 9px; gap: 5px; }
.mh-tbf { left: 290px; width: 36px; padding: 0; justify-content: center; }
.mh-seg { display: inline-flex; background: rgba(0,0,0,.075); border-radius: 8px; padding: 2px; font-size: 13px; }
.mh-seg span { padding: 3px 16px 4px; border-radius: 6px; } .mh-seg span.on { background: rgba(0,0,0,.12); }

/* Contact list column */
.mh-list { position: absolute; left: 228px; top: 52px; width: 340px; bottom: 0; background: #fff; overflow: hidden; }
.mh-search { position: absolute; left: 10px; right: 10px; top: 8px; height: 31px; border-radius: 7px; background: rgba(0,0,0,.05); display: flex; align-items: center; gap: 6px; padding: 0 10px;
  color: rgba(0,0,0,.4); font-size: 13px; transition: box-shadow 160ms; }
.mh-search.press { box-shadow: 0 0 0 3.5px rgba(252,77,2,.25); }
.mh-sort { position: absolute; left: 14px; top: 44px; font-size: 10.5px; color: var(--sec); display: flex; align-items: center; }
.mh-sort b { color: var(--ink); font-weight: 400; margin: 0 4px 0 3px; }
.mh-scroll { position: absolute; left: 0; right: 0; top: 64px; bottom: 0; overflow: hidden; }
.mh-scroll-in { transition: transform 700ms var(--move); padding-bottom: 40px; }
.mh-sec { height: 28px; margin: 0 10px; padding: 9px 4px 0; font-size: 11px; font-weight: 700; color: var(--sec); border-bottom: .5px solid var(--sep); }
.mh-sec + .mh-row { margin-top: 3px; }
.mh-row + .mh-sec { margin-top: 27px; }
.mh-row { position: relative; display: flex; align-items: center; gap: 10px; height: 40px; margin: 0 8px 4px; padding: 0 10px; border-radius: 8px; transition: background-color 220ms; }
.mh-row::after { content: ''; position: absolute; left: 52px; right: 2px; bottom: -2.5px; border-bottom: .5px solid var(--sep); transition: opacity 200ms; }
.mh-row.on { background: rgba(0,0,0,.1); } .mh-row.on::after, .mh-row:has(+ .mh-row.on)::after { opacity: 0; }
.mh-n { font-size: 13px; font-weight: 500; line-height: 16px; white-space: nowrap; } .mh-c { font-size: 11px; color: var(--sec); line-height: 14px; white-space: nowrap; }
.mh-av { flex: none; position: relative; border-radius: 50%; overflow: hidden; background: rgba(128,128,128,.2); color: var(--ink); display: grid; place-items: center; font-weight: 500;
  box-shadow: inset 0 0 0 .5px rgba(0,0,0,.2); }
.mh-av img { width: 100%; height: 100%; object-fit: cover; }
.mh-av img + i { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.2); }
.mh-row .mh-av { width: 32px; height: 32px; font-size: 12.8px; }

/* Detail column: grey canvas with white cards */
.mh-detail { position: absolute; left: 568px; right: 0; top: 52px; bottom: 0; background: var(--bg); overflow: hidden; }
.mh-detail-in { position: absolute; inset: 0; transition: opacity 240ms var(--ease), transform 240ms var(--ease); }
.mh-detail-in.swap { opacity: 0; transform: translateY(5px); }
.mh-card { background: #fff; box-shadow: inset 0 0 0 .5px var(--card-line); border-radius: 14px; }
.mh-head { position: absolute; left: 16px; right: 16px; top: 14px; height: 144px; border-radius: 20px; display: flex; align-items: center; gap: 18px; padding: 0 18px; }
.mh-head .pic { width: 120px; height: 120px; display: grid; place-items: center; }
.mh-head .mh-av { width: 96px; height: 96px; font-size: 38px; box-shadow: 0 0 0 1px rgba(255,255,255,.6), 0 4px 16px rgba(0,0,0,.18); }
.mh-head h3 { margin: 4px 0 5px; font: 650 27px/31px var(--sfr); letter-spacing: -.01em; color: var(--ink); }
.mh-head .t { font-size: 11px; color: var(--sec); line-height: 15px; display: flex; align-items: center; gap: 5px; }
.mh-head .t + .t { margin-top: 2px; }
.mh-head .st { font-size: 11px; font-weight: 600; line-height: 15px; display: flex; align-items: center; gap: 5px; margin-top: 6px; }
.mh-acts { position: absolute; left: 16px; right: 16px; top: 176px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.mh-act { height: 60px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; font: 600 12px var(--sfr); }
.mh-act .ic { height: 22px; display: grid; place-items: center; }
.mh-tabs { position: absolute; left: 16px; right: 16px; top: 253px; padding: 4px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.mh-tab { height: 31px; border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 6px; font: 500 13px var(--sfr); color: var(--sec);
  transition: background-color 220ms, color 220ms, box-shadow 220ms, transform 120ms; }
.mh-tab.on { background: var(--a15); box-shadow: inset 0 0 0 .5px rgba(252,77,2,.25); color: var(--a); }
.mh-pane { position: absolute; left: 0; right: 0; top: 295px; bottom: 0; }
.mh-fields { padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }
.mh-fcard > div + div { border-top: .5px solid var(--sep); }
.mh-field { display: flex; gap: 12px; padding: 10px 14px; align-items: flex-start; }
.mh-field .ic { width: 22px; height: 22px; display: grid; place-items: center; margin-top: 5px; }
.mh-field .l { font-size: 11px; font-weight: 500; color: var(--sec); line-height: 14px; } .mh-field .v { font-size: 14px; line-height: 18px; margin-top: 1px; } .mh-field .v.o { color: var(--a); }
.mh-field .mp { margin-left: auto; align-self: center; }
.mh-chips { display: flex; gap: 8px; padding: 13px 16px 6px; }
.mh-chips span { height: 27px; padding: 0 14px; border-radius: 14px; background: #fff; display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; }
.mh-chips span b { font-weight: 400; color: var(--sec); }
.mh-chips span.on { background: var(--ink); color: #fff; } .mh-chips span.on b { color: rgba(255,255,255,.7); }
.mh-notes { padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 14px; }
.mh-note { padding: 14px 14px 15px; font-size: 13px; line-height: 18px; }
.mh-note .d { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: var(--sec); margin: 4px 0 8px; }
.mh-note u { text-decoration-thickness: 1px; text-underline-offset: 2px; }
.mh-note.new { animation: mh-new 1.4s var(--ease) both; }
@keyframes mh-new { 0% { opacity: 0; transform: translateY(-10px) scale(.99); box-shadow: inset 0 0 0 1.5px var(--a30); } 30% { opacity: 1; transform: none; } 100% { box-shadow: inset 0 0 0 .5px var(--card-line); } }
.mh-fab { position: absolute; right: 18px; bottom: 14px; height: 40px; min-width: 40px; border-radius: 20px; background: var(--a); color: #fff; display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 14px; font-weight: 600; box-shadow: 0 4px 10px rgba(0,0,0,.22); transition: transform 140ms var(--ease); z-index: 3; }
.mh-fab.t { padding: 0 14.4px 0 13px; }
.mh-fab.press { transform: scale(.94); }

/* Events tab (EventsSubView): Today / Coming Up / Past, glass cards with a calendar tile */
.mh-pane { overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 18px); mask-image: linear-gradient(transparent, #000 18px); }
.mh-evp { padding: 14px 16px 80px; display: flex; flex-direction: column; gap: 10px; transition: transform 800ms var(--move); }
.mh-evh { display: flex; align-items: center; gap: 6px; padding: 6px 4px 0; font-size: 10px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--sec); }
.mh-evh .n { font-weight: 500; }
.mh-er { display: flex; align-items: flex-start; gap: 12px; padding: 12px; }
.mh-evp.in > * { animation: mh-rise 420ms var(--ease) both; }
@keyframes mh-rise { from { opacity: 0; transform: translateY(8px); } }
.mh-tile { flex: none; width: 50px; border-radius: 10px; overflow: hidden; background: #fff; text-align: center; box-shadow: inset 0 0 0 .5px var(--tc25); }
.mh-tile .m { font-size: 10px; font-weight: 600; color: #fff; padding: 3px 0; background: var(--tc); letter-spacing: .02em; }
.mh-tile .d { font: 600 20px/24px var(--sfr); padding: 2px 0 4px; }
.mh-er .tx { flex: 1; min-width: 0; padding-top: 1px; }
.mh-er .tt { font: 600 14px/18px var(--sfr); }
.mh-er .mt { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--sec); margin-top: 3px; }
.mh-er .wh { font-size: 11px; color: var(--sec); margin-top: 3px; }
.mh-er .ln { display: flex; gap: 6px; align-items: flex-start; font-size: 11px; line-height: 14px; margin-top: 8px; }
.mh-er .ln i { margin-top: 2px; }
.mh-kit { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 15px; overflow: hidden; }
.mh-kit::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--a); }
.mh-kit .tx { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.mh-kit .tt { font-size: 13px; font-weight: 700; }
.mh-kit .sb { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--sec); }
.mh-kit .du { font-size: 10px; color: var(--sec); }
.mh-kit .cu { padding: 7px 12px; border-radius: 15px; background: var(--a15); color: var(--a); font-size: 11px; font-weight: 600; white-space: nowrap; }
.mh-kit.flash { animation: mh-flash 1.6s var(--ease); }
@keyframes mh-flash { 0%, 30% { box-shadow: inset 0 0 0 1.5px var(--a30), 0 0 0 4px rgba(252,77,2,.1); } }
.mh-evfoot { align-self: center; display: flex; align-items: center; gap: 6px; margin-top: 4px; padding: 6px 10px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 .5px var(--card-line); font-size: 10px; color: var(--sec); }

/* Keep in Touch sheet (KeepInTouchSheet) */
.mh-sdim { position: absolute; inset: 0; background: rgba(0,0,0,.1); opacity: 0; transition: opacity 260ms; z-index: 11; pointer-events: none; }
.mh-sdim.open { opacity: 1; }
.mh-sheet { position: absolute; left: 470px; top: 58px; width: 500px; height: 612px; border-radius: 26px; background: var(--bg); z-index: 12; overflow: hidden;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.22), 0 18px 50px rgba(0,0,0,.22); opacity: 0; transform: translateY(-18px) scale(.98); transform-origin: 50% 0;
  transition: opacity 240ms var(--sheet), transform 420ms var(--sheet); }
.mh-sheet.open { opacity: 1; transform: none; }
.mh-sheet .hd { position: relative; height: 52px; }
.mh-sheet .hd .nm { position: absolute; left: 22px; top: 16px; font-size: 15px; font-weight: 600; }
.mh-sheet .done { position: absolute; right: 10px; top: 8px; height: 36px; padding: 0 16px; border-radius: 18px; background: rgba(0,0,0,.045); display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--a); transition: background-color 140ms; }
.mh-sheet .done.press { background: rgba(0,0,0,.12); }
.mh-sheet .bd { padding: 2px 16px 14px; display: flex; flex-direction: column; gap: 14px; }
.mh-sheet .st { padding: 14px; }
.mh-sheet .st .row { display: flex; align-items: center; gap: 12px; }
.mh-sheet .st .ic { width: 34px; display: grid; place-items: center; }
.mh-sheet .st .k { font-size: 11px; color: var(--sec); } .mh-sheet .st .v { font-size: 15px; font-weight: 600; margin: 2px 0; transition: opacity 200ms; } .mh-sheet .st .l { font-size: 10px; color: var(--sec); }
.mh-sheet .cu { margin-top: 12px; height: 32px; border-radius: 16px; background: var(--a); color: #fff; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 600; }
.mh-sheet .rh { font-size: 10px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--sec); padding: 0 4px; margin-bottom: -6px; }
.mh-sheet .op { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 16px; font-size: 13px; position: relative; transition: background-color 160ms; }
.mh-sheet .op + .op::before { content: ''; position: absolute; left: 16px; right: 0; top: 0; border-top: .5px solid var(--sep); }
.mh-sheet .op.press { background: rgba(0,0,0,.05); transform: none; }
.mh-sheet .op i.sy { opacity: 0; transition: opacity 160ms; } .mh-sheet .op.on i.sy { opacity: 1; }
.mh-sheet .rm { padding: 12px; text-align: center; color: #ff3b30; font-size: 13px; }

/* Note window (MacNoteWindowView) */
.mh-notewin { position: absolute; left: 870px; top: 128px; width: 630px; height: 480px; border-radius: 26px; background: #fff; z-index: 8; overflow: hidden;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.24), 0 12px 30px rgba(0,0,0,.14), 0 40px 90px rgba(0,0,0,.16);
  opacity: 0; transform: scale(.96); transform-origin: 75% 85%; pointer-events: none; transition: opacity 240ms var(--sheet), transform 360ms var(--sheet); }
.mh-notewin.open { opacity: 1; transform: none; }
.mh-notewin .hd { height: 52px; border-bottom: .5px solid var(--sep); position: relative; }
.mh-notewin .hd .nm { position: absolute; left: 96px; top: 16px; font-size: 15px; font-weight: 600; }
.mh-notewin .grp { position: absolute; top: 8px; height: 36px; border-radius: 18px; background: rgba(0,0,0,.045); display: flex; align-items: center; padding: 0 6px; }
.mh-notewin .grp span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 18px; }
.mh-notewin .g1 { right: 150px; } .mh-notewin .g2 { right: 88px; padding: 0 10px; gap: 5px; }
.mh-notewin .g3 { right: 10px; padding: 0 16px; font-size: 13px; font-weight: 600; transition: background-color 140ms; }
.mh-notewin .g3.press { background: rgba(0,0,0,.12); }
.mh-notewin .body { padding: 14px 24px 4px; }
.mh-notewin .date { text-align: center; font-size: 12px; color: var(--sec); }
.mh-notewin .ph { font-size: 24px; font-weight: 700; color: rgba(0,0,0,.25); margin: 10px 0; line-height: 29px; }
.mh-notewin .who { display: flex; gap: 8px; }
.mh-pchip { height: 23px; border-radius: 12px; background: rgba(0,0,0,.05); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.04); display: flex; align-items: center; gap: 6px; padding: 0 6px 0 10px; font-size: 10.5px; font-weight: 500; }
.mh-pchip.add { gap: 5px; padding: 0 10px; color: var(--a); }
.mh-notewin .txt { margin: 14px -4px 0; padding: 0 4px; font-size: 13px; line-height: 17.5px; white-space: pre-wrap; min-height: 120px; }
.mh-caret { display: inline-block; width: 1.5px; height: 16px; background: var(--ink); vertical-align: -3px; margin-left: .5px; animation: mh-blink 1.05s steps(1) infinite; }
@keyframes mh-blink { 50% { opacity: 0; } }

/* Find Contact panel (MacGlobalContactSearchPanel, ⌘F) */
.mh-dim { position: absolute; inset: 0; background: rgba(0,0,0,.18); opacity: 0; transition: opacity 220ms; z-index: 9; pointer-events: none; }
.mh-dim.open { opacity: 1; }
.mh-pal { position: absolute; left: 420px; top: 96px; width: 600px; border-radius: 20px; z-index: 10; overflow: hidden;
  background: rgba(246,244,242,.9); -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 12px 48px rgba(0,0,0,.28); opacity: 0; transform: scale(.98) translateY(-4px); transition: opacity 180ms var(--ease), transform 240ms var(--ease); }
.mh-pal.open { opacity: 1; transform: none; }
.mh-pal .in { display: flex; align-items: center; gap: 12px; padding: 16px 18px; font-size: 17px; line-height: 22px; border-bottom: .5px solid var(--sep); }
.mh-pal .in .q { flex: 1; } .mh-pal .in .ph { color: rgba(0,0,0,.3); }
.mh-pal .res { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.mh-pal .r { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 8px; animation: mh-fade 160ms var(--ease) both; }
.mh-pal .r .mh-av { width: 32px; height: 32px; font-size: 12.8px; }
.mh-pal .r.on { background: var(--a18); }
.mh-pal mark { background: var(--a30); color: inherit; }
@keyframes mh-fade { from { opacity: 0; } }

/* Map (MacMapDetailView): the list column collapses, the map fills the window */
.mh-map { position: absolute; left: 228px; right: 0; top: 52px; bottom: 0; background: #fff; overflow: hidden; opacity: 0; transition: opacity 300ms; z-index: 3; pointer-events: none; }
.mh-map.on { opacity: 1; }
.mh-map .segw { position: absolute; left: 0; right: 0; top: 0; height: 40px; display: flex; justify-content: center; align-items: center; z-index: 2; background: #fff; }
.mh-mapc { position: absolute; left: 0; top: 40px; width: 1212px; height: 808px; }
.mh-mapc > img { width: 1211px; height: 808px; }
.mh-map .attr { position: absolute; left: 10px; bottom: 8px; font-size: 11px; font-weight: 600; color: #1d1d1f; display: flex; gap: 6px; align-items: baseline; }
.mh-map .attr span { font-weight: 400; font-size: 9px; color: rgba(0,0,0,.55); text-decoration: underline; }
/* Pins (MacMapDetailView): a 36 pt avatar with a 2 pt white ring, anchored at its bottom; the active one has an accent ring. */
.mh-mpin { position: absolute; width: 40px; height: 40px; margin: -40px 0 0 -20px; border-radius: 50%; background: #fff; padding: 2px; box-shadow: 0 1px 1.5px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.12);
  transition: background-color 200ms, transform 200ms var(--ease); }
.mh-mpin .mh-av { width: 36px; height: 36px; font-size: 14.4px; font-weight: 600; box-shadow: none; }
.mh-mpin .mh-av.mono { background: linear-gradient(#a5abb8, #85898f); color: #fff; }
.mh-mpin.active { background: var(--a); }
.mh-map.on .mh-mpin { animation: mh-pin 420ms var(--ease) both; }
@keyframes mh-pin { from { opacity: 0; transform: translateY(-6px) scale(.85); } }
.mh-pop { position: absolute; z-index: 5; margin: 10px 0 0 -160px; width: 320px; padding: 16px; display: flex; flex-direction: column; gap: 12px; border-radius: 14px;
  background: rgba(250,250,250,.97); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: 0 0 0 .5px rgba(0,0,0,.18), 0 10px 32px rgba(0,0,0,.2);
  opacity: 0; transform: translateY(-6px) scale(.97); transform-origin: 50% 0; transition: opacity 180ms var(--ease), transform 280ms var(--ease); }
.mh-pop.open { opacity: 1; transform: none; }
.mh-pop::before { content: ''; position: absolute; left: 152px; top: -8px; border: 8px solid transparent; border-top: 0; border-bottom-color: rgba(250,250,250,.98); }
.mh-pop .ph { display: flex; align-items: center; gap: 12px; } .mh-pop .ph .mh-av { width: 60px; height: 60px; }
.mh-pop .ph .n { font-size: 13px; font-weight: 600; } .mh-pop .ph .c { font-size: 11px; color: var(--sec); margin-top: 2px; }
.mh-pop .ad { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--card-line); color: var(--a); font-size: 13px; line-height: 17px; }
.mh-pop .go { height: 36px; border-radius: 18px; background: var(--a); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700; }

/* Moments column (MacMomentsListView, calendar mode) */
.mh-mom { position: absolute; left: 228px; top: 52px; width: 340px; bottom: 0; background: #fff; opacity: 0; transition: opacity 260ms; z-index: 2; pointer-events: none; }
.mh-mom.on { opacity: 1; }
.mh-mom .segw { height: 40px; display: flex; justify-content: center; align-items: center; border-bottom: .5px solid var(--sep); }
.mh-calh { display: flex; align-items: center; gap: 8px; padding: 8px 16px; height: 36px; }
.mh-calh .m { flex: 1; text-align: center; font-size: 13px; font-weight: 700; } .mh-calh .td { color: #0a7cff; font-size: 13px; }
.mh-wk, .mh-cal { display: grid; grid-template-columns: repeat(7, 1fr); column-gap: 4px; padding: 0 12px; }
.mh-wk { padding-bottom: 4px; font-size: 10px; color: var(--sec); text-align: center; }
.mh-cal { row-gap: 4px; padding-bottom: 8px; }
.mh-cal .d { height: 42px; display: flex; flex-direction: column; align-items: center; padding-top: 3px; gap: 3px; }
.mh-cal .d b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 400; transition: background-color 200ms, color 200ms; }
.mh-cal .d.today b { font-weight: 700; background: rgba(128,128,128,.22); }
.mh-cal .d.sel b { background: var(--a); color: #fff; }
.mh-cal .d .dots { display: flex; gap: 2px; height: 5px; } .mh-cal .d .dots i { width: 4px; height: 4px; border-radius: 50%; }
.mh-evs { border-top: .5px solid var(--sep); padding: 8px 10px; }
.mh-ev { display: flex; align-items: center; gap: 10px; padding: 6px 10px; animation: mh-fade 240ms var(--ease) both; }
.mh-ev .ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; }

/* Cursor */
.mh-cursor { position: absolute; left: 0; top: 0; width: 25px; height: 34px; z-index: 30; pointer-events: none; transform: translate(1300px, 820px); opacity: 0;
  transition: transform var(--dur, 700ms) var(--move), opacity 260ms; filter: drop-shadow(0 1.5px 2px rgba(0,0,0,.35)); }
.mh-cursor.on { opacity: 1; }
.mh-cursor svg { width: 100%; height: 100%; transition: transform 100ms; transform-origin: 3px 3px; display: block; }
.mh-cursor.down svg { transform: scale(.86); }
.mh .press { transform: scale(.97); }

/* Chapter chips below the window */
.mh-chiprow { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.mh-chip { position: relative; overflow: hidden; border: 0; cursor: pointer; font: 600 15px/1 Figtree, Inter, system-ui, sans-serif; color: #55555a; background: #ece9e6; padding: 12px 20px; border-radius: 999px; transition: color 200ms, background-color 200ms; }
.mh-chip:hover { color: var(--ink); background: #e4e0dc; }
.mh-chip.on, .mh-chip.on:hover { color: #fff; background: #1d1d1f; }
.mh-chip .p { position: absolute; left: 20px; right: 20px; bottom: 6px; height: 2px; border-radius: 1px; background: var(--a); transform-origin: 0 0; transform: scaleX(0); }
.mh-chip.on .p { transform: scaleX(var(--prog, 0)); transition: transform 60ms linear; }

@media (max-width: 640px) {
  .mh-chiprow { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin: 16px -16px 0; padding: 0 16px; }
  .mh-chiprow::-webkit-scrollbar { display: none; }
  .mh-chip { flex: none; font-size: 14px; padding: 10px 16px; } .mh-chip .p { left: 16px; right: 16px; }
  .mh-poster { margin-bottom: 50px; }
}
@media (hover: none) { .mh-cursor { display: none; } }
@media (prefers-reduced-motion: reduce) { .mh *, .mh *::before, .mh *::after { transition-duration: 0s !important; animation: none !important; } }