/* =========================================================================
   Timofey Makhlay — Portfolio
   Modern macOS (Sequoia-era) running on a vintage beige all-in-one.
   The juxtaposition is the joke.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* paper / chassis (unchanged from previous build) */
  --paper: #e8e1d3;
  --paper-shade: #d4cab5;
  --paper-deep: #b8a98a;
  --beige-1: #efe3c8;
  --beige-2: #d8c9a5;
  --beige-3: #b8a578;
  --beige-4: #8a7a52;
  --led: #7fd97f;

  /* macOS light tokens */
  --mac-bg:            #f3f3f3;
  --mac-bg-elev:       rgba(255,255,255,0.72);
  --mac-bg-content:    #ffffff;
  --mac-bg-sidebar:    rgba(246,246,247,0.72);
  --mac-bg-toolbar:    rgba(246,246,247,0.78);
  --mac-bg-hover:      rgba(0,0,0,0.05);
  --mac-bg-row-alt:    rgba(0,0,0,0.025);

  --mac-text:          #1d1d1f;
  --mac-text-2:        rgba(60,60,67,0.85);
  --mac-text-3:        rgba(60,60,67,0.60);
  --mac-text-4:        rgba(60,60,67,0.35);

  --mac-stroke:        rgba(0,0,0,0.10);
  --mac-stroke-2:      rgba(0,0,0,0.06);
  --mac-stroke-strong: rgba(0,0,0,0.16);

  --mac-accent:        #0a84ff;
  --mac-accent-hover:  #0070e0;
  --mac-accent-tint:   rgba(10,132,255,0.16);
  --mac-selection:     rgba(10,132,255,0.85);

  --mac-red:    #ff5f57;
  --mac-yellow: #febc2e;
  --mac-green:  #28c840;

  --mac-radius-window: 10px;
  --mac-radius-card:   8px;
  --mac-radius-pill:   999px;

  --mac-shadow-window:
    0 0 0 0.5px rgba(0,0,0,0.16),
    0 12px 40px rgba(0,0,0,0.22),
    0 2px 6px rgba(0,0,0,0.08);

  --mac-font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text',
              system-ui, ui-sans-serif, sans-serif;
  --mac-font-display: 'Inter', -apple-system, BlinkMacSystemFont,
              'SF Pro Display', system-ui, sans-serif;
  --mac-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
}

[data-theme="dark"] {
  --mac-bg:            #1e1e1e;
  --mac-bg-elev:       rgba(40,40,42,0.78);
  --mac-bg-content:    #2a2a2c;
  --mac-bg-sidebar:    rgba(36,36,38,0.78);
  --mac-bg-toolbar:    rgba(36,36,38,0.84);
  --mac-bg-hover:      rgba(255,255,255,0.07);
  --mac-bg-row-alt:    rgba(255,255,255,0.025);

  --mac-text:          #f5f5f7;
  --mac-text-2:        rgba(235,235,245,0.78);
  --mac-text-3:        rgba(235,235,245,0.55);
  --mac-text-4:        rgba(235,235,245,0.30);

  --mac-stroke:        rgba(255,255,255,0.10);
  --mac-stroke-2:      rgba(255,255,255,0.06);
  --mac-stroke-strong: rgba(255,255,255,0.20);

  --mac-shadow-window:
    0 0 0 0.5px rgba(255,255,255,0.10),
    0 16px 50px rgba(0,0,0,0.55),
    0 2px 8px rgba(0,0,0,0.40);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

::selection {
  background: color-mix(in srgb, var(--mac-accent) 85%, transparent);
  color: #fff;
}
::-moz-selection {
  background: color-mix(in srgb, var(--mac-accent) 85%, transparent);
  color: #fff;
}

html, body {
  background: var(--paper);
  color: #1d1d1f;
  font-family: var(--mac-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, #f1ead8 0%, var(--paper) 55%, #ddd2bb 100%),
    var(--paper);
  min-height: 100vh;
  overflow: hidden;
}

/* ===== Stage / chassis (unchanged in spirit) ============================= */
.stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  overflow: hidden;
}
.stage::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.018) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse 70% 50% at 50% 95%, rgba(0,0,0,0.18), transparent 60%);
  z-index: 0;
}
.stage::after {
  content: "";
  position: absolute; left:0; right:0; bottom:0;
  height: 38vh;
  background: linear-gradient(180deg, rgba(120,90,50,0) 0%, rgba(120,90,50,0.10) 30%, rgba(80,55,25,0.20) 100%);
  z-index: 0;
}

.chassis-wrap {
  position: relative;
  width: 720px;
  aspect-ratio: 720 / 820;
  /* Origin = the center of the CRT bezel, so scaling keeps the screen centered */
  transform-origin: 50% 35%;
  transition: transform 1180ms cubic-bezier(.5,.0,.2,1);
  pointer-events: auto;
  z-index: 2;
  filter: drop-shadow(0 38px 26px rgba(50,30,10,0.28));
}
.chassis {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--beige-1) 0%, var(--beige-2) 38%, var(--beige-3) 88%, var(--beige-4) 100%);
  border-radius: 22px 22px 14px 14px;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.45),
    inset -3px -3px 0 rgba(80,55,15,0.35),
    inset 0 -22px 30px rgba(80,55,15,0.20);
}
.chassis-face {
  position: absolute;
  left: 6%; right: 6%; top: 5%;
  height: 62%;
  background: linear-gradient(180deg, var(--beige-2), var(--beige-3));
  border-radius: 14px;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.30),
    inset -2px -2px 0 rgba(60,40,10,0.45),
    inset 0 0 0 2px rgba(80,55,15,0.18);
}
.crt-bezel {
  position: absolute;
  left: 50%; top: 7%;
  transform: translateX(-50%);
  width: 78%; height: 56%;
  background: radial-gradient(ellipse 95% 80% at 50% 50%, #3a342a 0%, #1f1a12 70%, #0d0a06 100%);
  border-radius: 18px;
  padding: 14px;
  box-shadow:
    inset 0 0 0 2px #0a0805,
    inset 2px 2px 6px rgba(0,0,0,0.7),
    0 1px 0 rgba(255,255,255,0.15);
}
.crt-screen {
  position: absolute;
  inset: 14px;
  background: var(--mac-bg);
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    inset 0 0 22px rgba(0,0,0,0.18),
    inset 0 0 2px rgba(0,0,0,0.6);
}
.chassis-nameplate {
  position: absolute;
  left: 8%; right: 8%; top: 70%;
  height: 6%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px;
  font-family: var(--mac-font);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em;
  color: rgba(40,28,8,0.55);
  text-transform: uppercase;
}
.chassis-nameplate .led {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #d6ffd6, var(--led) 60%, #2f8a2f 100%);
  box-shadow: 0 0 6px rgba(127,217,127,0.6);
}
.chassis-vents {
  position: absolute;
  left: 12%; right: 12%; top: 78%;
  height: 8%;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.chassis-vents > div {
  background: repeating-linear-gradient(90deg, rgba(40,28,8,0.55) 0 2px, transparent 2px 6px);
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.20);
}
.chassis-floppy {
  position: absolute;
  left: 50%; top: 89%;
  transform: translateX(-50%);
  width: 38%; height: 4.5%;
  background: linear-gradient(180deg, #1d1810, #2c241a 40%, #1a160f);
  border-radius: 3px;
  box-shadow:
    inset 0 1px 0 rgba(0,0,0,0.7),
    inset 0 -1px 0 rgba(255,255,255,0.05),
    0 1px 0 rgba(255,255,255,0.25);
}
.chassis-floppy::after {
  content: ""; position: absolute;
  left: 14px; right: 14px; top: 50%;
  height: 2px; background: #0a0805;
  transform: translateY(-50%);
}

/* Power on button */
.power-btn {
  position: fixed;
  right: 24px; top: 24px;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mac-font);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2a1f08;
  background: var(--paper);
  border: 1.5px solid #2a1f08;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  z-index: 6;
  box-shadow: 0 6px 18px rgba(80,55,15,0.30);
  transition: transform .12s, box-shadow .12s, background .12s, color .12s;
}
.power-btn:hover {
  background: #2a1f08; color: var(--paper);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(80,55,15,0.40);
}
.power-btn:active { transform: translateY(1px); }

/* version pill on desk */
.version-pill {
  position: fixed;
  left: 18px; bottom: 18px;
  font-family: var(--mac-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(40,28,8,0.55);
  z-index: 6;
}

/* =========================================================================
   THE OS — modern macOS surface
   ========================================================================= */
.screen-root {
  position: absolute; inset: 0;
  background: var(--mac-bg);
  color: var(--mac-text);
  font-family: var(--mac-font);
  font-size: 13px;
  user-select: none;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* === Wallpaper: makOS desktop photo ====================================== */
.wallpaper {
  position: absolute; inset: 0;
  background: #000 url('img/mac-wallpaper-dark.jpg') center/cover no-repeat;
}
[data-theme="dark"] .wallpaper {
  background: #000 url('img/mac-wallpaper-dark.jpg') center/cover no-repeat;
}

/* === Top menu bar ======================================================== */
.menubar {
  position: relative;
  z-index: 100;
  height: 26px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 13px;
  background: var(--mac-bg-toolbar);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-bottom: 0.5px solid var(--mac-stroke);
  color: var(--mac-text);
}
.menubar .mb-apple {
  display: flex; align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: default;
}
.menubar .mb-app {
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}
.menubar .mb-item {
  padding: 2px 9px;
  border-radius: 4px;
  cursor: default;
  font-weight: 400;
}
.menubar .mb-item:hover, .menubar .mb-item.open,
.menubar .mb-apple:hover, .menubar .mb-apple.open,
.menubar .mb-app:hover, .menubar .mb-app.open {
  background: var(--mac-bg-hover);
}
.menubar .mb-spacer { flex: 1; }
.menubar .mb-right {
  display: flex; align-items: center; gap: 4px;
}
.menubar .mb-right .mb-icon {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 4px;
  cursor: default;
  color: var(--mac-text);
}
.menubar .mb-right .mb-icon:hover { background: var(--mac-bg-hover); }
.menubar .mb-clock {
  padding: 2px 8px;
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
}

/* Apple-style logo (NOT Apple's actual mark — a simple monogram glyph) */
.brand-mark {
  width: 13px; height: 13px;
  display: grid; place-items: center;
  font-family: var(--mac-font-display);
  font-weight: 800;
  font-size: 12px;
  color: currentColor;
}

/* === Menu dropdowns ====================================================== */
.menu-dropdown {
  position: absolute;
  top: 28px;
  background: var(--mac-bg-elev);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 0.5px solid var(--mac-stroke);
  border-radius: 8px;
  min-width: 220px;
  padding: 5px;
  z-index: 200;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.08);
  font-size: 13px;
  color: var(--mac-text);
}
.menu-dropdown .item {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: default;
}
.menu-dropdown .item:hover { background: var(--mac-accent); color: #fff; }
.menu-dropdown .item.disabled { color: var(--mac-text-4); pointer-events: none; }
.menu-dropdown .item .shortcut {
  font-size: 12.5px;
  color: var(--mac-text-3);
  font-variant-numeric: tabular-nums;
}
.menu-dropdown .item:hover .shortcut { color: rgba(255,255,255,0.85); }
.menu-dropdown .sep {
  height: 0.5px;
  background: var(--mac-stroke);
  margin: 4px 0;
}

/* === Desktop icons ======================================================= */
.desktop-area {
  position: absolute; inset: 26px 0 0 0;
}
.desktop-icons {
  position: absolute;
  top: 14px; right: 14px;
  display: flex; flex-direction: column;
  gap: 18px;
}
.desktop-icon {
  width: 86px;
  display: flex; flex-direction: column; align-items: center;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}
.desktop-icon:hover { background: color-mix(in srgb, var(--mac-accent) 18%, transparent); }
.desktop-icon.selected {
  background: color-mix(in srgb, var(--mac-accent) 38%, transparent);
  outline: 1px solid color-mix(in srgb, var(--mac-accent) 70%, transparent);
}
.desktop-icon .icon-label {
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  margin-top: 6px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
  line-height: 1.15;
  word-wrap: break-word;
  max-width: 100%;
}
.desktop-icon .pix-icon {
  width: 48px; height: 48px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.30));
}
.desktop-drag-circle {
  position: absolute;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--mac-accent) 85%, transparent);
  background: color-mix(in srgb, var(--mac-accent) 18%, transparent);
  pointer-events: none;
  box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.18);
}

/* === Windows ============================================================ */
.window {
  position: absolute;
  background: var(--mac-bg-content);
  color: var(--mac-text);
  border-radius: var(--mac-radius-window);
  box-shadow: var(--mac-shadow-window);
  display: flex;
  flex-direction: column;
  min-width: 320px;
  min-height: 180px;
  overflow: hidden;
  opacity: 1;
}
.window.opening {
  /* No @keyframes — iframe rAF can be throttled. Windows just appear. */
}
.window.closing { opacity: 0; transform: scale(0.96) translateY(8px); transition: opacity .18s, transform .18s; }
.window.inactive { box-shadow: 0 0 0 0.5px rgba(0,0,0,0.16), 0 8px 24px rgba(0,0,0,0.14); }
.window.inactive .traffic-light { filter: saturate(0.15) opacity(0.6); }
.window.inactive .traffic-light .glyph { opacity: 0; }

/* Title bar / unified toolbar */
.titlebar {
  height: 38px;
  display: flex; align-items: center;
  padding: 0 12px;
  background: var(--mac-bg-toolbar);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-bottom: 0.5px solid var(--mac-stroke);
  cursor: grab;
  user-select: none;
  gap: 8px;
  position: relative;
}
.titlebar:active { cursor: grabbing; }
.titlebar.no-border { border-bottom: none; }

.traffic-lights {
  display: flex; gap: 8px; align-items: center;
}
.traffic-light {
  width: 12px; height: 12px;
  border-radius: 50%;
  display: grid; place-items: center;
  cursor: default;
  position: relative;
  box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.10);
}
.traffic-light.red    { background: var(--mac-red); }
.traffic-light.yellow { background: var(--mac-yellow); }
.traffic-light.green  { background: var(--mac-green); }
.traffic-light .glyph {
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  color: rgba(0,0,0,0.55);
  opacity: 0;
  transition: opacity 80ms;
  pointer-events: none;
  font-family: var(--mac-font-mono);
}
.traffic-lights:hover .traffic-light .glyph { opacity: 1; }

.titlebar-title {
  font-family: var(--mac-font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--mac-text);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  max-width: 50%;
  text-overflow: ellipsis;
}

.titlebar-actions {
  margin-left: 6px;
  display: flex; align-items: center; gap: 4px;
}
.tb-btn {
  width: 28px; height: 22px;
  display: grid; place-items: center;
  border-radius: 5px;
  color: var(--mac-text-2);
  cursor: default;
}
.tb-btn:hover:not(.disabled) { background: var(--mac-bg-hover); color: var(--mac-text); }
.tb-btn.disabled { color: var(--mac-text-4); }

.titlebar-spacer { flex: 1; }

.tb-search {
  display: flex; align-items: center; gap: 6px;
  background: var(--mac-bg-hover);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 12px;
  color: var(--mac-text-3);
  width: 160px;
}
.tb-search input {
  background: transparent; border: 0; outline: 0;
  color: var(--mac-text);
  font-family: var(--mac-font);
  font-size: 12px;
  width: 100%;
}

.window-body {
  flex: 1;
  background: var(--mac-bg-content);
  display: flex;
  overflow: hidden;
  min-height: 0;
}

/* macOS scrollbars (overlay style) */
.scrollable {
  overflow: auto;
  scrollbar-width: thin;
}
.scrollable::-webkit-scrollbar { width: 8px; height: 8px; }
.scrollable::-webkit-scrollbar-track { background: transparent; }
.scrollable::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.18);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
[data-theme="dark"] .scrollable::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.20);
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* === Finder two-pane layout ============================================== */
.finder-sidebar {
  width: 200px;
  background: var(--mac-bg-sidebar);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-right: 0.5px solid var(--mac-stroke);
  padding: 8px 8px;
  overflow-y: auto;
  flex-shrink: 0;
  font-size: 13px;
}
.finder-sidebar .sb-section {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mac-text-3);
  padding: 8px 8px 4px;
}
.finder-sidebar .sb-item {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px;
  border-radius: 5px;
  cursor: default;
  color: var(--mac-text-2);
  font-weight: 500;
  font-size: 13px;
}
.finder-sidebar .sb-item .sb-ico {
  width: 16px; height: 16px;
  display: grid; place-items: center;
  color: var(--mac-text-3);
  flex-shrink: 0;
}
.finder-sidebar .sb-item:hover { background: var(--mac-bg-hover); }
.finder-sidebar .sb-item.active {
  background: var(--mac-accent);
  color: #fff;
}
.finder-sidebar .sb-item.active .sb-ico { color: #fff; }

.finder-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.finder-main-scroll {
  flex: 1;
  overflow: auto;
  scrollbar-width: thin;
}

/* List view (Finder) */
.list-view { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.list-view thead th {
  position: sticky; top: 0; z-index: 1;
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  color: var(--mac-text-3);
  background: var(--mac-bg-content);
  border-bottom: 0.5px solid var(--mac-stroke);
  padding: 4px 10px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.list-view tbody tr { cursor: default; }
.list-view tbody tr:nth-child(even) { background: var(--mac-bg-row-alt); }
.list-view tbody tr:hover { background: var(--mac-bg-hover); }
.list-view tbody tr.selected,
.list-view tbody tr.selected:hover { background: var(--mac-accent); color: #fff; }
.list-view tbody tr.selected td { color: #fff; }
.list-view td {
  padding: 5px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 0.5px solid var(--mac-stroke-2);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
}
.list-view td:first-child {
  display: flex; align-items: center; gap: 8px;
  font-weight: 500;
  font-size: 13px;
  color: var(--mac-text);
}
.list-view tbody tr.selected td:first-child { color: #fff; }
.list-view .tiny-icon {
  width: 18px; height: 18px;
  flex-shrink: 0;
}

/* Detail content */
.detail-pane {
  padding: 26px 32px 32px;
  font-size: 14px;
  color: var(--mac-text);
  line-height: 1.55;
  text-wrap: pretty;
  user-select: text;
}
.detail-pane h1 {
  font-family: var(--mac-font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 4px;
  line-height: 1.15;
}
.detail-pane .subhead {
  font-size: 13px;
  color: var(--mac-text-3);
  font-weight: 500;
  margin-bottom: 16px;
}
.detail-pane h2 {
  font-family: var(--mac-font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 22px 0 8px;
}
.detail-pane h3 {
  font-family: var(--mac-font-display);
  font-size: 15px;
  font-weight: 600;
  margin: 14px 0 4px;
}
.detail-pane p { margin-bottom: 10px; }
.detail-pane ul { margin: 4px 0 12px 20px; }
.detail-pane li { margin-bottom: 4px; }
.detail-pane code, .detail-pane kbd {
  font-family: var(--mac-font-mono);
  font-size: 12.5px;
  background: var(--mac-bg-hover);
  padding: 1px 6px;
  border-radius: 4px;
}
.detail-pane blockquote {
  border-left: 3px solid var(--mac-accent);
  padding: 4px 14px;
  margin: 10px 0;
  color: var(--mac-text-2);
  font-style: italic;
}
.detail-pane a {
  color: var(--mac-accent);
  text-decoration: none;
}
.detail-pane a:hover { text-decoration: underline; }

.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--mac-bg-hover);
  color: var(--mac-text-2);
  padding: 2px 9px;
  border-radius: var(--mac-radius-pill);
  font-size: 11.5px;
  font-weight: 500;
}
.tag.accent {
  background: var(--mac-accent-tint);
  color: var(--mac-accent);
}

.meta-row {
  display: flex; flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  color: var(--mac-text-3);
  border-top: 0.5px solid var(--mac-stroke);
  border-bottom: 0.5px solid var(--mac-stroke);
  padding: 8px 0;
  margin: 8px 0 14px;
}
.meta-row span { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.meta-row .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--mac-text-4); }

/* Browser toolbar inside browser window */
.browser-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--mac-bg-toolbar);
  border-bottom: 0.5px solid var(--mac-stroke);
}
.browser-pill {
  flex: 1;
  display: flex; align-items: center; gap: 8px;
  background: var(--mac-bg-hover);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12.5px;
  color: var(--mac-text-2);
  font-family: var(--mac-font);
  font-weight: 500;
}

/* Address book card */
.contact-hero {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 18px;
  align-items: center;
  margin-bottom: 8px;
}
.contact-avatar {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff7da8 0%, #b37dff 50%, #4ea7ff 100%);
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--mac-font-display);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.02em;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.contact-hero h1 { margin-bottom: 2px; }

.kv-list { display: flex; flex-direction: column; }
.kv-row {
  display: grid; grid-template-columns: 110px 1fr;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 0.5px solid var(--mac-stroke-2);
  font-size: 13px;
}
.kv-row:last-child { border-bottom: 0; }
.kv-row .k { color: var(--mac-text-3); font-weight: 500; }
.kv-row .v { color: var(--mac-text); }

.rate-card {
  background: var(--mac-bg-hover);
  border-radius: var(--mac-radius-card);
  padding: 14px 16px;
  margin-bottom: 8px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}
.rate-card .who {
  font-family: var(--mac-font-display);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
}
.rate-card .desc {
  font-size: 13px; color: var(--mac-text-2);
  line-height: 1.45;
}
.rate-card .price {
  font-family: var(--mac-font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: right;
}
.rate-card .unit {
  font-size: 11px; color: var(--mac-text-3);
  text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 600;
  text-align: right;
}

/* === Buttons (macOS) ===================================================== */
.mac-btn {
  font-family: var(--mac-font);
  font-size: 13px;
  font-weight: 500;
  background: var(--mac-bg-content);
  color: var(--mac-text);
  border: 0.5px solid var(--mac-stroke-strong);
  border-radius: 6px;
  padding: 4px 14px;
  cursor: default;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 0.5px 1px rgba(0,0,0,0.04);
}
.mac-btn:hover { background: var(--mac-bg-hover); }
.mac-btn.primary {
  background: var(--mac-accent);
  color: #fff;
  border-color: rgba(0,0,0,0.20);
}
.mac-btn.primary:hover { background: var(--mac-accent-hover); }

/* === Dock =============================================================== */
.dock-wrap {
  position: absolute;
  left: 50%; bottom: 8px;
  transform: translateX(-50%);
  z-index: 80;
  display: flex; align-items: center; gap: 4px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.36);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 0.5px solid rgba(255,255,255,0.45);
  border-radius: 18px;
  box-shadow:
    0 6px 24px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.45);
}
[data-theme="dark"] .dock-wrap {
  background: rgba(40,40,42,0.55);
  border-color: rgba(255,255,255,0.10);
  box-shadow:
    0 8px 28px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.10);
}
.dock-item {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  cursor: pointer;
  position: relative;
  transition: transform .15s cubic-bezier(.2,.7,.2,1);
  border-radius: 10px;
}
.dock-item:hover { transform: translateY(-8px) scale(1.18); }
.dock-item .dock-ico {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.30));
  background: transparent;
}
.dock-item .dock-ico > svg { display: block; }
.dock-tooltip {
  position: absolute; bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%);
  background: rgba(40,40,42,0.85);
  color: #fff;
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 12px; font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s;
  letter-spacing: 0;
}
.dock-item:hover .dock-tooltip { opacity: 1; }
.dock-running-dot {
  position: absolute;
  bottom: -1px; left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
}
[data-theme="dark"] .dock-running-dot { background: rgba(255,255,255,0.65); }
.dock-sep {
  width: 0.5px;
  align-self: stretch;
  background: rgba(0,0,0,0.20);
  margin: 4px 4px;
}
[data-theme="dark"] .dock-sep { background: rgba(255,255,255,0.20); }

/* === Spotlight =========================================================== */
.spotlight-overlay {
  position: absolute; inset: 0;
  z-index: 200;
  display: grid; place-items: start center;
  padding-top: 16vh;
  background: rgba(0,0,0,0.20);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.spotlight {
  width: min(560px, 88%);
  background: var(--mac-bg-elev);
  backdrop-filter: blur(40px) saturate(200%);
  -webkit-backdrop-filter: blur(40px) saturate(200%);
  border: 0.5px solid var(--mac-stroke);
  border-radius: 14px;
  box-shadow: 0 24px 72px rgba(0,0,0,0.40);
  overflow: hidden;
}
.spotlight-input {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 0.5px solid var(--mac-stroke-2);
}
.spotlight-input input {
  flex: 1;
  border: 0; outline: 0; background: transparent;
  font-family: var(--mac-font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--mac-text);
}
.spotlight-input input::placeholder { color: var(--mac-text-3); }
.spotlight-results { max-height: 360px; overflow-y: auto; }
.spotlight-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 16px;
  cursor: default;
}
.spotlight-row:hover, .spotlight-row.active { background: var(--mac-accent); color: #fff; }
.spotlight-row .sp-ico { width: 24px; height: 24px; flex-shrink: 0; }
.spotlight-row .sp-title { font-weight: 500; font-size: 14px; }
.spotlight-row .sp-sub { font-size: 12px; color: var(--mac-text-3); }
.spotlight-row.active .sp-sub,
.spotlight-row:hover .sp-sub { color: rgba(255,255,255,0.85); }
.spotlight-section {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mac-text-3);
  padding: 8px 16px 4px;
}

/* === Notification Center ================================================= */
.nc-overlay {
  position: absolute; top: 26px; right: 8px; bottom: 8px;
  width: 320px;
  display: flex; flex-direction: column;
  gap: 10px;
  z-index: 90;
  pointer-events: none;
}
.nc-card {
  background: var(--mac-bg-elev);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 0.5px solid var(--mac-stroke);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.20);
  pointer-events: auto;
}
.nc-card .nc-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--mac-text-3);
  margin-bottom: 4px;
}
.nc-card .nc-title { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.nc-card .nc-body  { font-size: 12.5px; color: var(--mac-text-2); line-height: 1.4; }

/* === CRT power off ======================================================= */
.crt-poweroff {
  position: absolute; inset: 0;
  background: #000;
  z-index: 999;
  pointer-events: none;
}
.crt-poweroff .collapse {
  position: absolute;
  left: 0; right: 0; top: 50%;
  background: #fff;
  transform: translateY(-50%);
  height: 100%;
  animation: crt-collapse 700ms cubic-bezier(.4,.05,.6,1) forwards;
}
@keyframes crt-collapse {
  0%   { height: 100%; width: 100%; opacity: 1; }
  35%  { height: 2px; width: 100%; opacity: 1; }
  78%  { height: 2px; width: 6px; opacity: 1; }
  92%  { height: 2px; width: 2px; opacity: 1; }
  100% { height: 0; width: 0; opacity: 0; }
}

/* === CRT power ON ========================================================
   The reverse of power-off: a hot dot expands to a horizontal line,
   the line expands vertically to fill, a bloom flashes, then it fades.
   Uses CSS *transitions* (driven by state class changes) instead of
   @keyframes so it works in throttled iframe rAF.
   ========================================================================= */
.crt-poweron {
  position: absolute; inset: 0;
  background: #000;
  z-index: 998;
  pointer-events: none;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.crt-poweron .beam {
  background: #fff;
  width: 2px;
  height: 2px;
  border-radius: 1px;
  box-shadow:
    0 0 8px 2px rgba(255,255,255,0.85),
    0 0 24px 6px rgba(180,220,255,0.55);
  transition:
    width  280ms cubic-bezier(.2,.8,.3,1) 60ms,
    height 360ms cubic-bezier(.6,.0,.4,1) 360ms,
    box-shadow 360ms ease-out 360ms,
    border-radius 100ms linear 60ms,
    background 200ms ease-out 360ms,
    opacity 220ms ease-out 720ms;
}
/* state: line — beam expands horizontally first */
.crt-poweron.state-line .beam {
  width: 100%;
  height: 2px;
  border-radius: 0;
}
/* state: full — beam fills vertically into a glowing rect */
.crt-poweron.state-full .beam {
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: #ffffff;
  box-shadow: 0 0 0 0 rgba(255,255,255,0);
}
/* state: fade — bloom dies away */
.crt-poweron.state-fade .beam {
  width: 100%;
  height: 100%;
  background: #ffffff;
  opacity: 0;
}

/* phosphor scanline flicker overlay during warmup */
.crt-poweron .scanlines {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,0.0)   0px,
      rgba(0,0,0,0.0)   2px,
      rgba(0,0,0,0.35)  2px,
      rgba(0,0,0,0.35)  3px
    );
  opacity: 0;
  mix-blend-mode: multiply;
  transition: opacity 220ms ease-out;
}
.crt-poweron.state-full .scanlines { opacity: 0.55; }
.crt-poweron.state-fade .scanlines { opacity: 0; }

/* === Boot splash ========================================================= */
.boot-splash {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: #000;
  color: #fff;
  text-align: center;
  font-family: var(--mac-font);
}
.boot-splash .boot-mark {
  font-family: var(--mac-font-display);
  font-size: 38px; font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.boot-splash .boot-progress {
  width: 140px; height: 3px;
  background: rgba(255,255,255,0.20);
  border-radius: 2px;
  overflow: hidden;
  margin: 0 auto;
}
.boot-splash .boot-progress::after {
  content: "";
  display: block;
  height: 100%;
  width: 60%;
  background: #fff;
  animation: boot-bar 1.6s ease-in-out infinite;
}
@keyframes boot-bar {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(260%); }
}
.boot-hint { color: rgba(255,255,255,0.55); font-size: 12px; margin-top: 14px; }

/* === Screensaver: looping landscape video + macOS-style clock ============
   Lives inside the chassis CRT (rendered at scale 0.62 during the intro
   phase), so sizes are picked in native chassis pixels — they get visually
   scaled down with the chassis. */
.screensaver {
  position: absolute;
  inset: 0;
  background: #000;
  overflow: hidden;
  -webkit-user-select: none;
          user-select: none;
}
.screensaver-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  display: block;
}
.screensaver-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.40) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.45) 100%);
}
.screensaver-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 42px;
  pointer-events: none;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,0.55);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
}
.screensaver-date {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.01em;
  opacity: 0.95;
  margin-bottom: 4px;
}
.screensaver-time {
  font-size: 96px;
  font-weight: 200;
  letter-spacing: -0.04em;
  line-height: 0.95;
}

/* =========================================================================
   CASSETTE PICKER  +  NOW PLAYING
   ========================================================================= */
/* Stage is anchored just to the right of the (centered) chassis, so the
   composition reads as a centered computer with the tape rack tucked
   alongside it — instead of the rack drifting to the viewport's edge.
   Cassettes are positioned by transform inside an arc that bows outward
   (away from the chassis). */
.cassette-stage {
  position: fixed;

    right: 130px;
  top: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  /* Above the iPhone peek overlay (z-200) so the cassette arc stays visible
     and clickable through the dark backdrop and the phone transitions. */
  z-index: 300;
}
.cassette-arc {
  position: absolute;
  left: 0; top: 0;
  width: 0; height: 0;
  pointer-events: none;
}
.cassette-slot {
  position: absolute;
  left: 0; top: 0;
  margin-left: -75px;   /* center the cassette around (0,0) */
  margin-top: -48px;
  width: 150px;
  height: 96px;
  pointer-events: auto;
  transform-origin: 50% 50%;
  transition:
    transform 520ms cubic-bezier(.22,.65,.25,1),
    opacity 320ms ease,
    filter 280ms ease;
  cursor: pointer;
  filter: drop-shadow(0 10px 12px rgba(40,25,8,0.35));
  will-change: transform;
}
.cassette-slot.dim {
  opacity: 0.78;
  filter: drop-shadow(0 6px 8px rgba(40,25,8,0.25)) saturate(0.85);
}
.cassette-slot:hover {
  filter: drop-shadow(0 18px 20px rgba(40,25,8,0.45));
}

/* Loaded state: cassette uses an inline transform (computed in JS) to slide
   into the chassis floppy slot. We just lengthen the transition timing here. */
.cassette-slot.loaded {
  transition:
    transform 800ms cubic-bezier(.45,.04,.30,1),
    opacity 240ms ease 700ms;
  opacity: 0;
  pointer-events: none;
  z-index: 200;
  transform-origin: 50% 100%;   /* slide-in collapses toward the bottom */
}

.cassette {
  position: relative;
  width: 100%; height: 100%;
  background:
    linear-gradient(180deg, var(--cs-color) 0%, color-mix(in oklab, var(--cs-color), black 22%) 100%);
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -2px 0 rgba(0,0,0,0.25),
    inset 0 0 0 1px rgba(0,0,0,0.18);
  color: var(--cs-ink);
  overflow: hidden;
}
/* paper label across top half */
.cs-label {
  position: absolute;
  left: 6px; right: 6px; top: 5px;
  height: 38px;
  background: #fbf6e8;
  border-radius: 2px;
  padding: 4px 32px 0 6px; /* extra right pad so sticker doesn't cover the title */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: #1a120a;
  display: flex; flex-direction: column;
}
/* Album-art sticker stuck on the top-right of the cassette (a la mixtape) */
.cs-sticker {
  position: absolute;
  top: 2px; right: 4px;
  width: 30px; height: 30px;
  border-radius: 3px;
  background-color: #1a120a;
  background-size: cover;
  background-position: center;
  box-shadow:
    0 1.5px 0 rgba(0,0,0,0.35),
    0 3px 6px rgba(0,0,0,0.45),
    inset 0 0 0 1.5px #fbf6e8,
    inset 0 0 0 2px rgba(0,0,0,0.18);
  transform: rotate(-7deg);
  z-index: 5;
  pointer-events: none;
}
.cs-label-head {
  display: flex; justify-content: space-between;
  font-size: 6px; font-weight: 700; letter-spacing: 0.08em;
  color: rgba(40,25,8,0.65);
  text-transform: uppercase;
}
.cs-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: -0.01em;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-artist {
  font-size: 6.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(40,25,8,0.7);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* lower window with reels */
.cs-window {
  position: absolute;
  left: 14px; right: 14px;
  bottom: 12px; height: 32px;
  background: linear-gradient(180deg, #1a1410 0%, #0a0805 100%);
  border-radius: 3px;
  box-shadow:
    inset 0 1px 0 rgba(0,0,0,0.8),
    inset 0 -1px 0 rgba(255,255,255,0.06),
    inset 0 0 0 1px rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 6px;
}
.cs-tape {
  position: absolute;
  left: 18px; right: 18px;
  top: 50%;
  height: 6px;
  background: linear-gradient(180deg, #4a3a28 0%, #2a1f10 50%, #4a3a28 100%);
  transform: translateY(-50%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5);
}
.cs-reel {
  position: relative;
  width: 18px; height: 18px;
  border-radius: 50%;
  background:
    radial-gradient(circle, #d6c79c 0%, #a89464 60%, #6e5c34 100%);
  box-shadow:
    inset 0 0 0 1px #2a1f10,
    inset 0 0 0 4px rgba(0,0,0,0.25),
    0 0 0 1px #2a1f10;
  z-index: 1;
}
.cs-reel-spokes {
  position: absolute; inset: 4px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, transparent 0deg, rgba(0,0,0,0.6) 8deg, transparent 16deg,
                   transparent 60deg, rgba(0,0,0,0.6) 68deg, transparent 76deg,
                   transparent 120deg, rgba(0,0,0,0.6) 128deg, transparent 136deg,
                   transparent 180deg, rgba(0,0,0,0.6) 188deg, transparent 196deg,
                   transparent 240deg, rgba(0,0,0,0.6) 248deg, transparent 256deg,
                   transparent 300deg, rgba(0,0,0,0.6) 308deg, transparent 316deg);
}
/* screws in corners */
.cs-screw {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #d8d4cc, #6a6358 70%, #2a2620);
  box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.4);
}
.cs-screw.tl { top: 4px; left: 4px; }
.cs-screw.tr { top: 4px; right: 4px; }
.cs-screw.bl { bottom: 4px; left: 4px; }
.cs-screw.br { bottom: 4px; right: 4px; }
/* drive-spindle holes at bottom */
.cs-holes {
  position: absolute;
  left: 0; right: 0; bottom: 1px;
  display: flex; justify-content: center; gap: 38px;
  pointer-events: none;
}
.cs-holes span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.7);
}

.cassette-name {
  position: absolute;
  left: 50%; bottom: -28px;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: #2a1f08;
  background: var(--paper);
  padding: 3px 10px;
  border-radius: 3px;
  border: 1px solid #2a1f08;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 200ms ease, transform 200ms ease;
  pointer-events: none;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cassette-name.show { opacity: 1; transform: translateX(-50%) translateY(2px); }

.cassette-hint {
  position: fixed;
  left: 50%; bottom: 14px;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: rgba(40,28,8,0.55);
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 6;
}
.cassette-hint .ch-line {
  width: 60px; height: 1px;
  background: rgba(40,28,8,0.30);
}

/* loaded floppy slot — slightly recessed when a tape is in */
.chassis-floppy.loaded::before {
  content: "";
  position: absolute;
  left: 8px; right: 8px;
  top: 50%;
  transform: translateY(-50%);
  height: 4px;
  background: linear-gradient(180deg, var(--cs-loaded-color, #f4b860), color-mix(in oklab, var(--cs-loaded-color, #f4b860), black 25%));
  border-radius: 1px;
}

/* =========================================================================
   NOW PLAYING (rendered on the small CRT screen)
   ========================================================================= */
.now-playing {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(255,255,255,0.06), transparent 60%),
    linear-gradient(180deg, #0e0e10 0%, #050507 100%);
  color: #f3eedc;
  font-family: 'JetBrains Mono', monospace;
  display: flex;
  flex-direction: column;
  padding: 14px 18px;
  gap: 10px;
  overflow: hidden;
}
.now-playing::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.0) 0 2px, rgba(0,0,0,0.18) 2px 3px);
  pointer-events: none;
  mix-blend-mode: multiply;
}
.np-header {
  display: flex; align-items: center; gap: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(243,238,220,0.65);
}
.np-header .np-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--np-color);
  box-shadow: 0 0 8px var(--np-color);
}
.np-header .np-dot.pulse { animation: np-pulse 1.4s ease-in-out infinite; }
@keyframes np-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.55; transform: scale(0.85); }
}
.np-header .np-spacer { flex: 1; }
.np-header .np-side-pill {
  border: 1px solid rgba(243,238,220,0.30);
  padding: 1px 6px;
  border-radius: 2px;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--np-color);
}

.np-cover {
  position: relative;
  height: 80px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--np-color), black 40%) 0%, color-mix(in oklab, var(--np-color), black 70%) 100%);
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 0 30px rgba(0,0,0,0.45);
  display: grid; place-items: center;
}
.np-reels { display: flex; gap: 22px; }
.np-reel {
  width: 38px; height: 38px;
  border-radius: 50%;
  background:
    radial-gradient(circle, #2a1f10 0%, #0a0805 70%);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.08),
    inset 0 0 12px rgba(0,0,0,0.6);
  position: relative;
}
.np-reel > div {
  position: absolute; inset: 6px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      var(--np-color) 0deg, transparent 30deg,
      var(--np-color) 60deg, transparent 90deg,
      var(--np-color) 120deg, transparent 150deg,
      var(--np-color) 180deg, transparent 210deg,
      var(--np-color) 240deg, transparent 270deg,
      var(--np-color) 300deg, transparent 330deg);
  opacity: 0.65;
  mask: radial-gradient(circle, transparent 35%, black 36%);
  -webkit-mask: radial-gradient(circle, transparent 35%, black 36%);
}
.np-reel.spin > div { animation: np-spin 1.8s linear infinite; }
@keyframes np-spin { to { transform: rotate(360deg); } }

.np-meta {
  display: flex; flex-direction: column; gap: 2px;
}
.np-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.np-sub {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: rgba(243,238,220,0.55);
  text-transform: uppercase;
}

.np-progress { display: flex; flex-direction: column; gap: 4px; }
.np-bar {
  height: 4px;
  background: rgba(243,238,220,0.14);
  border-radius: 2px;
  overflow: hidden;
}
.np-bar-fill {
  height: 100%;
  background: var(--np-color);
  box-shadow: 0 0 8px var(--np-color);
  transition: width 250ms linear;
}
.np-times {
  display: flex; justify-content: space-between;
  font-size: 9.5px;
  color: rgba(243,238,220,0.65);
  letter-spacing: 0.10em;
  font-variant-numeric: tabular-nums;
}

.np-controls {
  display: flex; gap: 6px;
  margin-top: auto;
}
.np-btn {
  flex: 1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  background: rgba(243,238,220,0.08);
  color: #f3eedc;
  border: 1px solid rgba(243,238,220,0.25);
  border-radius: 3px;
  padding: 6px 8px;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.np-btn:hover { background: var(--np-color); color: #0a0805; border-color: var(--np-color); }
.np-eject:hover { background: #c44a5e; color: #fff; border-color: #c44a5e; }

/* === Resize grip ========================================================= */
.grow-box {
  position: absolute;
  right: 0; bottom: 0;
  width: 14px; height: 14px;
  cursor: nwse-resize;
  z-index: 5;
}

/* =========================================================================
   IN-OS MUSIC INDICATOR (menu-bar widget)
   ========================================================================= */
.music-indicator-wrap {
  position: relative;
  margin-right: 4px;
}
.music-indicator {
  display: flex; align-items: center; gap: 6px;
  height: 22px;
  padding: 0 8px 0 6px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--mac-text-1, #1d1d1f);
  cursor: pointer;
  transition: background 120ms ease;
  max-width: 160px;
}
.music-indicator:hover {
  background: rgba(0,0,0,0.06);
}
[data-theme="dark"] .music-indicator { color: rgba(255,255,255,0.92); }
[data-theme="dark"] .music-indicator:hover { background: rgba(255,255,255,0.10); }

.music-indicator .mi-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 110px;
}

.mi-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}
.mi-bars span {
  width: 2px;
  background: var(--mac-accent, #0a84ff);
  border-radius: 1px;
  height: 4px;
  transform-origin: bottom;
}
.music-indicator.playing .mi-bars span:nth-child(1) { animation: mi-bar1 0.9s ease-in-out infinite; }
.music-indicator.playing .mi-bars span:nth-child(2) { animation: mi-bar2 1.1s ease-in-out infinite; }
.music-indicator.playing .mi-bars span:nth-child(3) { animation: mi-bar3 0.7s ease-in-out infinite; }
@keyframes mi-bar1 { 0%,100%{height:4px} 50%{height:10px} }
@keyframes mi-bar2 { 0%,100%{height:6px} 50%{height:12px} }
@keyframes mi-bar3 { 0%,100%{height:3px} 50%{height:9px} }

/* Popover */
.music-indicator-pop {
  position: absolute;
  top: 28px;
  right: 0;
  width: 300px;
  background: var(--mac-window-bg, rgba(255,255,255,0.96));
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.10);
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  z-index: 9999;
  font-family: var(--mac-font, -apple-system, BlinkMacSystemFont, 'Inter', sans-serif);
}
[data-theme="dark"] .music-indicator-pop {
  background: rgba(40,40,42,0.92);
  border-color: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.94);
}

.mip-row { display: flex; align-items: center; gap: 12px; }
.mip-art {
  width: 44px; height: 44px;
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -2px 0 rgba(0,0,0,0.20),
    0 2px 6px rgba(0,0,0,0.20);
  flex-shrink: 0;
}
.mip-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mip-title {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mip-sub {
  font-size: 10.5px;
  color: var(--mac-text-3, rgba(0,0,0,0.55));
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mip-bar {
  height: 4px;
  background: rgba(0,0,0,0.10);
  border-radius: 2px;
  overflow: hidden;
}
[data-theme="dark"] .mip-bar { background: rgba(255,255,255,0.12); }
.mip-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 250ms linear;
}

.mip-times {
  display: flex; justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--mac-text-3, rgba(0,0,0,0.55));
  letter-spacing: 0.06em;
}

.mip-controls { display: flex; gap: 6px; }
.mip-btn {
  flex: 1;
  font-family: var(--mac-font);
  font-size: 12px;
  font-weight: 500;
  background: rgba(0,0,0,0.06);
  color: inherit;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 6px;
  padding: 6px 8px;
  cursor: pointer;
  transition: background 120ms;
}
.mip-btn:hover { background: rgba(0,0,0,0.10); }
[data-theme="dark"] .mip-btn { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14); }
[data-theme="dark"] .mip-btn:hover { background: rgba(255,255,255,0.14); }
.mip-eject:hover { background: #ff453a; color: #fff; border-color: #ff453a; }



/* =========================================================================
   PLATFORM SCOPING — hide Mac chassis bits when running iOS, and vice versa
   ========================================================================= */
[data-platform="ios"] .stage,
[data-platform="ios"] .cassette-stage,
[data-platform="ios"] .version-pill { display: none !important; }

[data-platform="mac"] .phone-stage { display: none !important; }

[data-platform="ios"] body {
  background: radial-gradient(ellipse 80% 60% at 50% 40%, #2a2a32 0%, #14141a 80%);
}

/* =========================================================================
   iPhone 3GS chassis
   Body 320 × 620 at native size; transform scale drives intro → fullscreen.
   ========================================================================= */
.phone-stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: auto;
  overflow: hidden;
  z-index: 1;
}
.phone-wrap {
  position: relative;
  width: 320px;
  height: 620px;
  transform-origin: 50% 50%;
  transition: transform 800ms cubic-bezier(.5,0,.2,1);
  filter: drop-shadow(0 30px 28px rgba(0,0,0,0.55));
  z-index: 2;
}
/* Locked: chassis is small (but big enough to read the lock screen + drag
   the slider comfortably). Unlocking + home: chassis grows past the strict
   viewport-fit by ~8% so the unlock zoom reads as a real "into the device"
   move; the small overflow is clipped by .phone-stage's overflow:hidden.
   The CSS transition on .phone-wrap animates the scale change when phase
   flips from locked → unlocking — that's the "zoom on unlock" effect. */
.phone-wrap.phase-locked { transform: scale(0.78); }
.phone-wrap.phase-unlocking,
.phone-wrap.phase-home {
  transform: scale(min(calc((100vw - 4px) / 296), calc((100vh - 4px) / 574)));
}

.phone-body {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, #18181c 0%, #2a2a30 8%, #1a1a1e 50%, #0e0e12 100%);
  border-radius: 38px;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.10),
    inset -2px -2px 0 rgba(0,0,0,0.40),
    inset 0 0 0 1px rgba(70,70,80,0.6);
  cursor: inherit;
}
.phone-bezel {
  position: absolute;
  inset: 6px;
  border-radius: 32px;
  background:
    radial-gradient(ellipse 110% 80% at 50% 0%, #1a1a1e 0%, #050509 70%);
  box-shadow:
    inset 0 0 0 1.5px rgba(40,40,50,0.7),
    inset 0 1px 0 rgba(255,255,255,0.06);
  pointer-events: none;
}
.phone-earpiece {
  position: absolute;
  left: 50%;
  top: 5.6%;
  transform: translateX(-50%);
  width: 17%;
  height: 0.9%;
  border-radius: 4px;
  background: linear-gradient(180deg, #050509 0%, #1c1c22 100%);
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.6);
  pointer-events: none;
}
.phone-camera {
  position: absolute;
  left: 36%;
  top: 5.0%;
  width: 1.4%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #444 0%, #0a0a0c 100%);
  pointer-events: none;
}

.phone-screen {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 10.5%;
  bottom: 16%;
  background: #c8c8d0;
  border-radius: 4px;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1.5px rgba(0,0,0,0.85),
    inset 0 0 24px rgba(0,0,0,0.5);
}

.phone-home {
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  width: 11.5%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 40%, #1c1c22 0%, #050509 80%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.16),
    inset 0 -1px 2px rgba(0,0,0,0.5),
    inset 0 0 0 1px rgba(60,60,70,0.55);
  cursor: pointer;
  display: grid; place-items: center;
}
.phone-home:active {
  background: radial-gradient(circle at 50% 40%, #0a0a0d 0%, #050509 80%);
}
.phone-home-glyph {
  width: 36%; height: 36%;
  border-radius: 5px;
  border: 1.5px solid rgba(180,180,190,0.45);
  pointer-events: none;
}

.phone-wake {
  position: absolute;
  right: -3px;
  top: 12%;
  width: 7px;
  height: 9%;
  border-radius: 1px 0 0 1px;
  background: linear-gradient(180deg, #050509 0%, #20202a 50%, #050509 100%);
  cursor: pointer;
  box-shadow: inset 1px 0 0 rgba(255,255,255,0.05);
  z-index: 5;
}
.phone-wake:active { background: #0a0a0d; }

.phone-ringer {
  position: absolute;
  left: -3px; top: 14%;
  width: 7px; height: 4.5%;
  border-radius: 0 1px 1px 0;
  background: linear-gradient(180deg, #050509, #20202a, #050509);
  pointer-events: none;
}
.phone-vol-up {
  position: absolute;
  left: -3px; top: 21%;
  width: 7px; height: 4%;
  border-radius: 0 1px 1px 0;
  background: linear-gradient(180deg, #050509, #20202a, #050509);
  pointer-events: none;
}
.phone-vol-down {
  position: absolute;
  left: -3px; top: 27%;
  width: 7px; height: 4%;
  border-radius: 0 1px 1px 0;
  background: linear-gradient(180deg, #050509, #20202a, #050509);
  pointer-events: none;
}

/* =========================================================================
   iOS — lock screen (clock, date, slide-to-unlock) + boot splash
   ========================================================================= */
.ios-lock {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  color: #fff;
  background-color: #0a0a0e;
  background-image:
    linear-gradient(180deg,
      rgba(0,0,0,0.32) 0%,
      rgba(0,0,0,0.10) 22%,
      rgba(0,0,0,0)    55%,
      rgba(0,0,0,0.55) 100%),
    url('img/lock-portrait.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
  user-select: none;
  -webkit-user-select: none;
}
.ios-lock-clock {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 16px 0;
  flex-shrink: 0;
}
.ios-lock-time {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  font-weight: 200;
  font-size: 78px;
  line-height: 1;
  letter-spacing: -0.03em;
}
.ios-lock-date {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.01em;
  margin-top: 8px;
  opacity: 0.95;
}
.ios-lock-spacer { flex: 1; min-height: 24px; }

.ios-slide-track {
  position: relative;
  height: 56px;
  margin: 0 18px 22px;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.32) 100%);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow:
    inset 0 1px 0 rgba(0,0,0,0.5),
    inset 0 -1px 0 rgba(255,255,255,0.06);
  overflow: hidden;
  touch-action: none;
}
.ios-slide-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  pointer-events: none;
  background: linear-gradient(110deg,
    rgba(255,255,255,0.18) 0%,
    rgba(255,255,255,0.18) 38%,
    rgba(255,255,255,1)    50%,
    rgba(255,255,255,0.18) 62%,
    rgba(255,255,255,0.18) 100%) 200% 0 / 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: ios-slide-shimmer 2.6s linear infinite;
  transition: opacity 240ms;
}
.ios-slide-track.dragging .ios-slide-text { opacity: 0.55; }
.ios-slide-track.unlocked .ios-slide-text { opacity: 0; }

@keyframes ios-slide-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -100% 0; }
}

.ios-slide-knob {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 64px;
  height: 48px;
  border-radius: 24px;
  background: linear-gradient(180deg, #fafbff 0%, #c5cad2 100%);
  display: grid;
  place-items: center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 -1px 0 rgba(0,0,0,0.10),
    0 2px 8px rgba(0,0,0,0.45);
  cursor: grab;
  transition: transform 240ms cubic-bezier(.25,.0,.2,1);
  z-index: 2;
  touch-action: none;
}
.ios-slide-track.dragging .ios-slide-knob {
  transition: none;
  cursor: grabbing;
}
.ios-slide-arrow {
  width: 12px;
  height: 12px;
  border-top: 2px solid #6a7080;
  border-right: 2px solid #6a7080;
  transform: rotate(45deg);
  margin-left: -3px;
  pointer-events: none;
}

.ios-boot-splash {
  position: absolute; inset: 0;
  background: #fff;
  display: grid; place-items: center;
  animation: ios-boot-fade 600ms ease-out;
}
@keyframes ios-boot-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.ios-boot-mark {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: #000;
  letter-spacing: -0.02em;
}

/* =========================================================================
   iOS — screen canvas + status bar
   ========================================================================= */
.ios-screen-canvas {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #c8c8d0;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Inter', sans-serif;
  color: #000;
  overflow: hidden;
}

.ios-statusbar {
  height: 20px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #1a1a1c 0%, #0a0a0c 100%);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  z-index: 100;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
}
.ios-statusbar .ios-sb-left,
.ios-statusbar .ios-sb-right {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
}
.ios-statusbar .ios-sb-right { justify-content: flex-end; }
.ios-statusbar .ios-sb-center { font-weight: 700; padding: 0 4px; }

.ios-sig {
  display: inline-flex;
  align-items: flex-end;
  gap: 1px;
  height: 9px;
}
.ios-sig-bar {
  display: inline-block;
  width: 2px;
  background: #fff;
  border-radius: 0.5px;
}
.ios-sig-bar:nth-child(1) { height: 3px; }
.ios-sig-bar:nth-child(2) { height: 5px; }
.ios-sig-bar:nth-child(3) { height: 6px; }
.ios-sig-bar:nth-child(4) { height: 7px; }
.ios-sig-bar:nth-child(5) { height: 9px; }

.ios-carrier { font-weight: 600; }
.ios-batt-pct { font-size: 10px; font-weight: 600; }
.ios-batt-icon {
  display: inline-block;
  width: 18px; height: 9px;
  border: 1px solid #fff;
  border-radius: 2px;
  position: relative;
  padding: 1px;
}
.ios-batt-icon i {
  display: block;
  width: 100%; height: 100%;
  background: #fff;
  border-radius: 1px;
}
.ios-batt-icon::after {
  content: "";
  position: absolute;
  right: -3px; top: 2px;
  width: 2px; height: 3px;
  background: #fff;
  border-radius: 0 1px 1px 0;
}

/* =========================================================================
   iOS — home screen, dock, app icons
   ========================================================================= */
.ios-home {
  flex: 1;
  position: relative;
  background: #000 url('img/mac-wallpaper-dark.jpg') center/cover no-repeat;
  display: flex;
  flex-direction: column;
}
.ios-home-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 4px;
  padding: 14px 8px;
  align-content: start;
}
.ios-app-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.ios-app-icon:active .ios-app-tile { transform: scale(0.94); opacity: 0.85; }
.ios-app-tile {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 12px;
  overflow: hidden;
  background: transparent;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  transition: transform .12s, opacity .12s;
}
.ios-app-glyph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.ios-app-glyph svg {
  width: 100%;
  height: 100%;
  display: block;
  transform: scale(1.2);
}
.ios-app-gloss {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.55) 0%,
    rgba(255,255,255,0.22) 45%,
    rgba(255,255,255,0.05) 49%,
    rgba(255,255,255,0) 50%);
}
.ios-app-label {
  font-size: 11px;
  font-weight: 500;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,0.85);
  margin-top: 4px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  letter-spacing: 0;
}

.ios-page-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 4px 0 8px;
}
.ios-page-dots span {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.30);
}
.ios-page-dots span.active { background: rgba(255,255,255,0.95); }

.ios-dock {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  gap: 6px;
  padding: 10px 22px 14px;
  background: rgba(255,255,255,0.20);
  border-top: 1px solid rgba(255,255,255,0.20);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}
.ios-dock .ios-app-icon { flex: 0 0 auto; }
.ios-dock .ios-app-tile {
  width: 50px; height: 50px;
  border-radius: 10px;
}

/* =========================================================================
   iOS — stage, springboard and app shell (icon → fullscreen open animation)
   .ios-stage holds two siblings: the springboard (in flow) and, when an
   app is active, the app frame (absolutely positioned overlay). During the
   open / close transition both layers render and animate in opposite ways.
   ========================================================================= */
.ios-stage {
  flex: 1;
  position: relative;
  display: flex;
  min-height: 0;
}
.ios-springboard {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.ios-springboard.is-opening,
.ios-springboard.is-closing {
  pointer-events: none;
  transform-origin: 50% 50%;
}
.ios-springboard.is-opening { animation: ios-spring-recede 320ms cubic-bezier(.18,.7,.22,1) both; }
.ios-springboard.is-closing { animation: ios-spring-return 260ms cubic-bezier(.18,.7,.22,1) both; }
@keyframes ios-spring-recede {
  from { transform: scale(1);    opacity: 1; }
  to   { transform: scale(0.94); opacity: 0.55; }
}
@keyframes ios-spring-return {
  from { transform: scale(0.94); opacity: 0.55; }
  to   { transform: scale(1);    opacity: 1; }
}

.ios-app-frame {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 5;
  transform-origin: var(--app-orig-x, 50%) var(--app-orig-y, 50%);
  will-change: transform, opacity;
}
.ios-app-frame.is-opening {
  animation: ios-app-pop-in 320ms cubic-bezier(.18,.7,.22,1) both;
  pointer-events: none;
}
.ios-app-frame.is-closing {
  animation: ios-app-pop-out 260ms cubic-bezier(.4,0,.85,.4) both;
  pointer-events: none;
}
@keyframes ios-app-pop-in {
  from { opacity: 0; transform: scale(0.16); }
  55%  { opacity: 1; }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes ios-app-pop-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.16); }
}

.ios-app-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #c8c8d0;
  min-height: 0;
}

/* iOS 6-style nav bar — silver/blue gradient with embossed title */
.ios-navbar {
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 8px;
  background:
    linear-gradient(180deg, #b8becb 0%, #8993a8 50%, #6c7894 100%);
  border-bottom: 1px solid rgba(0,0,0,0.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.18);
  color: #fff;
  position: relative;
  z-index: 10;
}
[data-theme="dark"] .ios-navbar {
  background: linear-gradient(180deg, #3a3e4c 0%, #2a2e3c 50%, #1c2030 100%);
  border-bottom-color: rgba(0,0,0,0.7);
}
.ios-nav-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.55);
  pointer-events: none;
  white-space: nowrap;
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ios-nav-back {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 8px 4px 14px;
  background: linear-gradient(180deg, #aab2c2 0%, #8893a8 100%);
  border: 1px solid rgba(0,0,0,0.45);
  border-radius: 4px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
  cursor: pointer;
  position: relative;
  margin-left: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    0 1px 0 rgba(0,0,0,0.10);
}
.ios-nav-back:active {
  background: linear-gradient(180deg, #8893a8 0%, #6c7894 100%);
}
.ios-nav-back-arrow {
  position: absolute;
  left: -7px;
  top: 50%;
  width: 13px; height: 13px;
  background: inherit;
  border-left: 1px solid rgba(0,0,0,0.45);
  border-bottom: 1px solid rgba(0,0,0,0.45);
  transform: translateY(-50%) rotate(45deg);
  border-radius: 1px;
  box-shadow: inset 1px -1px 0 rgba(255,255,255,0.4);
}
.ios-nav-right {
  margin-left: auto;
}
.ios-nav-right-btn {
  padding: 4px 10px;
  border: 1px solid rgba(0,0,0,0.45);
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(180deg, #aab2c2 0%, #8893a8 100%);
  text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
}

.ios-app-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(180deg, #d3d4dc 0%, #c8c8d0 100%);
}
[data-theme="dark"] .ios-app-body { background: #1c1c1e; color: #f0f0f5; }

/* =========================================================================
   iOS — grouped list (UITableViewStyleGrouped)
   ========================================================================= */
.ios-grouped-list {
  padding: 14px 10px 24px;
}
.ios-group-section { margin-bottom: 18px; }
.ios-group-section:last-child { margin-bottom: 0; }
.ios-group-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(60,60,67,0.6);
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
  padding: 0 12px 6px;
}
[data-theme="dark"] .ios-group-header {
  color: rgba(235,235,245,0.55);
  text-shadow: none;
}
.ios-group-footer {
  font-size: 11px;
  color: rgba(60,60,67,0.55);
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  padding: 6px 12px 0;
  line-height: 1.4;
}
[data-theme="dark"] .ios-group-footer {
  color: rgba(235,235,245,0.45);
  text-shadow: none;
}
.ios-group {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.20);
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 1px 0 rgba(255,255,255,0.4);
}
[data-theme="dark"] .ios-group {
  background: #2a2a2c;
  border-color: rgba(255,255,255,0.08);
}

.ios-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  cursor: default;
  transition: background .12s;
  min-height: 44px;
}
[data-theme="dark"] .ios-row {
  background: #2a2a2c;
  border-bottom-color: rgba(255,255,255,0.06);
}
.ios-row:last-child { border-bottom: 0; }
.ios-row.tappable { cursor: pointer; }
.ios-row.tappable:active { background: rgba(0,122,255,0.12); }
.ios-row-text { flex: 1; min-width: 0; }
.ios-row-primary {
  font-size: 15px;
  font-weight: 600;
  color: #000;
  line-height: 1.25;
  word-wrap: break-word;
}
[data-theme="dark"] .ios-row-primary { color: #f0f0f5; }
.ios-row-secondary {
  font-size: 12px;
  color: rgba(60,60,67,0.6);
  margin-top: 2px;
  line-height: 1.35;
  word-wrap: break-word;
}
[data-theme="dark"] .ios-row-secondary { color: rgba(235,235,245,0.55); }
.ios-row-icon {
  width: 32px; height: 32px;
  border-radius: 5px;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 0 0 0.5px rgba(0,0,0,0.15);
}
.ios-row-chevron {
  flex-shrink: 0;
  width: 9px; height: 14px;
  background: rgba(60,60,67,0.45);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='14' viewBox='0 0 9 14'><path d='M1 1l6 6-6 6' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='14' viewBox='0 0 9 14'><path d='M1 1l6 6-6 6' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
}
[data-theme="dark"] .ios-row-chevron { background: rgba(235,235,245,0.4); }
.ios-row-aux {
  font-size: 14px;
  color: rgba(60,60,67,0.6);
}
[data-theme="dark"] .ios-row-aux { color: rgba(235,235,245,0.55); }

/* iOS toggle switch */
.ios-toggle {
  position: relative;
  width: 50px; height: 28px;
  border-radius: 999px;
  border: 0;
  background: rgba(0,0,0,0.18);
  transition: background .18s;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.ios-toggle[data-on="1"] { background: #34c759; }
.ios-toggle i {
  position: absolute;
  top: 2px; left: 2px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.25), 0 0 0 0.5px rgba(0,0,0,0.06);
  transition: transform .18s;
}
.ios-toggle[data-on="1"] i { transform: translateX(22px); }

/* iOS settings — accent swatches row */
.ios-accent-row { display: flex; gap: 6px; flex-shrink: 0; }
.ios-accent-swatch {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.25);
  cursor: pointer;
  padding: 0;
}
.ios-accent-swatch.on {
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(0,0,0,0.6);
}

/* =========================================================================
   iOS — Music app
   ========================================================================= */
.ios-music-art {
  width: 32px; height: 32px;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    inset 0 -2px 4px rgba(0,0,0,0.30),
    inset 0 0 0 0.5px rgba(0,0,0,0.20);
}
.ios-music-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}
.ios-music-bars i {
  display: inline-block;
  width: 2.5px;
  height: 5px;
  border-radius: 1px;
  background: var(--mac-accent, #0a84ff);
}
.ios-music-bars.on i:nth-child(1) { animation: mi-bar1 0.9s ease-in-out infinite; }
.ios-music-bars.on i:nth-child(2) { animation: mi-bar2 1.1s ease-in-out infinite; }
.ios-music-bars.on i:nth-child(3) { animation: mi-bar3 0.7s ease-in-out infinite; }

.ios-player {
  position: relative;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 100%;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,0.45);
}
.ios-player::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.10) 2px 3px);
  pointer-events: none;
  mix-blend-mode: multiply;
}
.ios-player-art {
  aspect-ratio: 1;
  border-radius: 8px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(255,255,255,0.18), transparent 70%),
    rgba(0,0,0,0.30);
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -2px 8px rgba(0,0,0,0.45),
    0 8px 22px rgba(0,0,0,0.35);
  position: relative;
  overflow: hidden;
}
/* When a cover is loaded, the album art is the hero — fade the cassette reels
   to a translucent overlay so the cassette identity stays without obscuring it. */
.ios-player-art.has-cover .ios-player-reels { opacity: 0.42; mix-blend-mode: screen; }
.ios-player-art.has-cover::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
}
.ios-player-reels {
  display: flex;
  gap: 28px;
  position: relative;
  z-index: 1;
}
.ios-player-reel {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle, #1a1208 0%, #050300 80%);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.10),
    inset 0 0 18px rgba(0,0,0,0.6);
  position: relative;
}
.ios-player-reel.spin > div { animation: ios-reel-spin 2.4s linear infinite; }
@keyframes ios-reel-spin { to { transform: rotate(360deg); } }
.ios-player-reel > div {
  position: absolute; inset: 8px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      rgba(255,255,255,0.7) 0deg, transparent 30deg,
      rgba(255,255,255,0.7) 60deg, transparent 90deg,
      rgba(255,255,255,0.7) 120deg, transparent 150deg,
      rgba(255,255,255,0.7) 180deg, transparent 210deg,
      rgba(255,255,255,0.7) 240deg, transparent 270deg,
      rgba(255,255,255,0.7) 300deg, transparent 330deg);
  opacity: 0.3;
  -webkit-mask: radial-gradient(circle, transparent 35%, black 36%);
          mask: radial-gradient(circle, transparent 35%, black 36%);
}

.ios-player-meta { text-align: center; padding: 4px 0; }
.ios-player-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.ios-player-sub {
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.10em;
  color: rgba(255,255,255,0.7);
  margin-top: 2px;
}

.ios-player-progress { display: flex; flex-direction: column; gap: 4px; }
.ios-player-bar {
  height: 4px;
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
  overflow: hidden;
}
.ios-player-fill {
  height: 100%;
  background: var(--np-color, var(--mac-accent, #0a84ff));
  box-shadow: 0 0 8px var(--np-color, var(--mac-accent, #0a84ff));
  transition: width 250ms linear;
}
.ios-player-times {
  display: flex; justify-content: space-between;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', monospace;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.05em;
}

.ios-player-controls {
  display: flex;
  gap: 8px;
}
.ios-player-btn {
  flex: 1;
  height: 44px;
  background: linear-gradient(180deg, rgba(255,255,255,0.20) 0%, rgba(0,0,0,0.20) 100%);
  border: 1px solid rgba(255,255,255,0.30);
  border-radius: 8px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.30);
}
.ios-player-btn:active {
  background: linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(255,255,255,0.10) 100%);
}
.ios-player-btn-big { flex: 2; font-size: 22px; }

/* =========================================================================
   Mac — Music app (sidebar library + reused IOSPlayerView on the right)
   ========================================================================= */
.music-mac {
  display: flex;
  flex: 1;
  height: 100%;
  width: 100%;
  min-width: 0;
  min-height: 0;
}
.music-mac-sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--mac-bg-sidebar);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-right: 0.5px solid var(--mac-stroke);
  padding: 8px 6px 12px;
  overflow-y: auto;
}
.music-mac-sidebar .sb-section {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mac-text-3);
  padding: 8px 10px 6px;
}
.music-mac-rows { display: flex; flex-direction: column; gap: 1px; }
.music-track {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: default;
  color: var(--mac-text-1);
}
.music-track:hover { background: var(--mac-bg-hover); }
.music-track.selected {
  background: var(--mac-accent);
  color: #fff;
}
.music-track.selected .music-track-artist,
.music-track.selected .music-track-dur { color: rgba(255,255,255,0.85); }
.music-track-art {
  width: 36px; height: 36px;
  border-radius: 5px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    inset 0 -2px 4px rgba(0,0,0,0.30),
    inset 0 0 0 0.5px rgba(0,0,0,0.20);
}
.music-track-text { flex: 1; min-width: 0; overflow: hidden; }
.music-track-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.music-track-artist {
  font-size: 11px;
  color: var(--mac-text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.music-track-dur {
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  color: var(--mac-text-3);
  flex-shrink: 0;
}
.music-mac-player {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
  background: #0a0a0c;
}
/* Tame the iOS player inside a wide Mac window: cap art + center the stack. */
.music-mac-player .ios-player {
  flex: 1;
  padding: 28px 24px;
  gap: 18px;
  align-items: center;
  justify-content: center;
}
.music-mac-player .ios-player-art {
  width: 100%;
  max-width: 320px;
}
.music-mac-player .ios-player-meta,
.music-mac-player .ios-player-progress,
.music-mac-player .ios-player-controls {
  width: 100%;
  max-width: 360px;
}

/* =========================================================================
   iOS — Mobile Safari toolbar
   ========================================================================= */
.ios-safari-bar {
  background: linear-gradient(180deg, #d8dbe2 0%, #a8aeb8 100%);
  border-bottom: 1px solid rgba(0,0,0,0.35);
  padding: 6px 8px;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}
.ios-safari-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  color: rgba(60,60,67,0.75);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* =========================================================================
   iOS — Contacts
   ========================================================================= */
.ios-contact { padding-bottom: 24px; }
.ios-contact-hero {
  padding: 18px 16px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, transparent 100%);
}
.ios-contact-avatar {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff7da8 0%, #b37dff 50%, #4ea7ff 100%);
  color: #fff;
  display: grid; place-items: center;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  box-shadow: 0 6px 14px rgba(0,0,0,0.20);
  margin-bottom: 10px;
}
.ios-contact-name {
  font-size: 19px;
  font-weight: 700;
  color: #000;
}
[data-theme="dark"] .ios-contact-name { color: #f0f0f5; }
.ios-contact-role {
  font-size: 13px;
  color: rgba(60,60,67,0.6);
  margin-top: 2px;
}
.ios-contact-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.ios-contact-btn {
  background: linear-gradient(180deg, #f8f8fb, #c8cdd6);
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #1d1d1f;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}
.ios-rate-price {
  text-align: right;
  flex-shrink: 0;
}
.ios-rate-num {
  font-size: 16px;
  font-weight: 700;
  color: #000;
}
[data-theme="dark"] .ios-rate-num { color: #f0f0f5; }
.ios-rate-unit {
  font-size: 10px;
  color: rgba(60,60,67,0.6);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

/* =========================================================================
   iOS — overrides for shared .detail-pane components
   ========================================================================= */
[data-platform="ios"] .detail-pane {
  padding: 14px 16px 24px;
  font-size: 14px;
  line-height: 1.5;
  background: #fff;
  color: #000;
}
[data-theme="dark"][data-platform="ios"] .detail-pane {
  background: #1c1c1e;
  color: #f0f0f5;
}
[data-platform="ios"] .detail-pane h1 {
  font-size: 22px;
  letter-spacing: -0.01em;
}
[data-platform="ios"] .detail-pane h2 {
  font-size: 16px;
  margin-top: 18px;
}
[data-platform="ios"] .detail-pane h3 { font-size: 14px; margin: 10px 0 4px; }
[data-platform="ios"] .detail-pane .subhead { font-size: 13px; }
[data-platform="ios"] .detail-pane .meta-row { font-size: 11.5px; }
[data-platform="ios"] .detail-pane ul { margin-left: 18px; }
.ios-detail { /* explicit class also used inline by IOSResumeApp */ }

/* The iOS .ios-app-body forces the detail-pane to stretch. */
[data-platform="ios"] .ios-app-body > .detail-pane { min-height: 100%; }

/* Make tags + cards on iOS read better */
[data-platform="ios"] .tag {
  background: rgba(0,0,0,0.06);
  font-size: 11px;
}
[data-theme="dark"][data-platform="ios"] .tag { background: rgba(255,255,255,0.10); }
[data-platform="ios"] .tag.accent {
  background: var(--mac-accent-tint);
  color: var(--mac-accent);
}

/* Hide the Tweaks panel from getting pushed off-screen on small mobile */
@media (max-width: 480px) {
  .twk-panel { right: 8px !important; bottom: 8px !important; width: 240px !important; }
}


/* =========================================================================
   iOS — slide-to-unlock crossfade
   The chassis CSS-transitions from .phase-locked → .phase-unlocking (small
   to fullscreen) over 800ms. In sync, the lock screen layer scales up +
   fades + blurs out while the home layer zooms in from slightly larger.
   ========================================================================= */
.ios-home-direct,
.ios-lock-direct {
  position: absolute;
  inset: 0;
}
.ios-unlock-home {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  animation: ios-home-zoom-in 800ms cubic-bezier(.18,.7,.2,1) forwards;
  transform-origin: 50% 50%;
}
.ios-unlock-lock {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  animation: ios-lock-leave 800ms cubic-bezier(.4,.0,.2,1) forwards;
  transform-origin: 50% 50%;
}
@keyframes ios-home-zoom-in {
  from { transform: scale(1.20); opacity: 0; }
  55%  { opacity: 1; }
  to   { transform: scale(1.00); opacity: 1; }
}
@keyframes ios-lock-leave {
  from { transform: scale(1.00); opacity: 1; filter: blur(0); }
  to   { transform: scale(1.14); opacity: 0; filter: blur(3px); }
}

/* =========================================================================
   iPhone peek overlay — desktop-only floating phone summoned over the Mac.
   Layout / cosmetics only. The actual transform driving peek/focused/hidden
   is computed in JS and applied as inline style on .phone-overlay-host —
   that side-steps a browser quirk where `scale(min(calc(...)))` silently
   invalidates the whole transform property and pins the chassis to top-left.
   ========================================================================= */
.phone-overlay-root {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
}

.phone-overlay-backdrop {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 40%, #2a2a32 0%, #14141a 80%);
  opacity: 0;
  transition: opacity 420ms ease;
  pointer-events: none;
}
.phone-overlay-backdrop[data-active="true"] {
  opacity: 1;
  pointer-events: auto;
}

.phone-overlay-host {
  position: absolute;
  top: 0;
  left: 0;
  width: 320px;
  height: 620px;
  z-index: 2;
  pointer-events: auto;
  transform-origin: 50% 50%;
  transition: transform 700ms cubic-bezier(.18, .8, .25, 1),
              opacity   500ms ease;
  will-change: transform, opacity;
  filter: drop-shadow(0 30px 38px rgba(0, 0, 0, 0.55));
}
.phone-overlay-host.dragging {
  transition: none;
  cursor: grabbing;
}
.phone-overlay-host.peek { cursor: pointer; }

/* Neutralise the nested PhoneShell layout so it sits at native 320×620 and
   our outer transform alone drives sizing/position. The `display: block
   !important` override is load-bearing — there's a global rule that hides
   `.phone-stage` whenever the document is in mac mode, and PhoneShell's
   chassis lives inside that mac document here. */
.phone-overlay-host .phone-stage {
  position: absolute;
  inset: 0;
  display: block !important;
  overflow: visible;
  pointer-events: auto;
  z-index: auto;
}
.phone-overlay-host .phone-wrap {
  position: absolute;
  inset: 0;
  width: 320px;
  height: 620px;
  transform: none !important;
  transition: none !important;
  filter: none;
}

/* In peek state, swallow all clicks inside the chassis — only the host's
   onClick handler should fire (to focus the phone). */
.phone-overlay-host.peek .phone-stage,
.phone-overlay-host.peek .phone-stage * {
  pointer-events: none !important;
}

/* Drag handles cover the chassis bezels above the screen and below the
   screen (without overlapping the home button at bottom 4%). */
.phone-drag-handle {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 5;
  pointer-events: none;
  touch-action: none;
}
.phone-overlay-host.focused .phone-drag-handle {
  pointer-events: auto;
  cursor: grab;
}
.phone-overlay-host.focused.dragging .phone-drag-handle {
  cursor: grabbing;
}
/* The bottom drag strip lives in the bezel gap between the screen end
   (~y=521) and the home button top (~y=558) — clear of both so the home
   button stays clickable for "go to springboard". */
.phone-drag-top    { top: 0;       height: 60px; }
.phone-drag-bottom { bottom: 65px; height: 32px; }