/* =========================================================
   sam — minimal portfolio  (ambient purple background)
   ========================================================= */
:root {
    --bg: #09070F;
    --text-primary: rgba(255, 255, 255, 0.95);
    --text-secondary: rgba(255, 255, 255, 0.46);
    --text-tertiary: rgba(255, 255, 255, 0.26);
    --line-color: rgba(255, 255, 255, 0.14);
    --accent: #9B7DFF;                 /* soft violet */
    --accent-hover: rgba(255, 255, 255, 1);

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    --xs: 4px; --sm: 8px; --md: 16px; --lg: 24px; --xl: 48px;
    --pad: clamp(24px, 4vw, 48px);
}

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

html, body {
    width: 100%; min-height: 100%;
    background-color: var(--bg);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-weight: 400;
    overscroll-behavior-y: none;   /* no pull-to-refresh / rubber-band on touch */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body { overflow-x: hidden; overflow-y: auto; }

a { color: inherit; text-decoration: none; }

/* ---------- ambient background ---------- */
#ambient-canvas {
    position: fixed; inset: 0;
    width: 100%; height: 100%;
    z-index: 0; pointer-events: none;
    display: none;                     /* the desktop page never shows it; without this its purple flashes through while the desktop fades in */
}
.resume-page #ambient-canvas { display: block; }
/* OP-XY canvas — parked hidden until mounted into the Music note */
#object-canvas { display: none; }
#object-canvas.mounted {
    display: block; position: absolute; inset: 0;
    width: 100%; height: 100%; pointer-events: auto; cursor: grab;
    touch-action: none;   /* the drag belongs to the model (orbit), not the page */
}
/* subtle darkening for legibility at the edges (ambient pages only) */
.resume-page::after {
    content: ''; position: fixed; inset: 0; z-index: 2; pointer-events: none;
    background:
        radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(5,4,10,0.6) 100%),
        linear-gradient(to bottom, rgba(5,4,10,0.35), transparent 18%, transparent 78%, rgba(5,4,10,0.55));
}

/* ---------- layout ---------- */
.ui-layer {
    position: relative; z-index: 10;
    width: 100%; min-height: 100vh;
    display: flex; flex-direction: column; justify-content: space-between;
    gap: var(--xl);
    padding: var(--pad);
}

/* ---------- shared type ---------- */
.label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-tertiary); margin-bottom: var(--xs); }
.label.nomargin { margin: 0; }
.title { font-size: 14px; font-weight: 500; color: var(--text-primary); letter-spacing: -0.01em; margin-bottom: 2px; }
.meta { font-size: 12px; color: var(--text-secondary); }
.meta.dim { color: var(--text-tertiary); }
.data-value { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* ---------- header ---------- */
header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--lg); width: 100%; }
.identity-block { display: flex; flex-direction: column; gap: 3px; }
.name { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 6px; }   /* also neutralises the UA h1 margin (the résumé name is the page's h1) */
.system-status { display: flex; align-items: center; gap: var(--sm); margin-top: var(--md); }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 9px rgba(155,125,255,0.7); animation: pulse 2.8s ease-in-out infinite; }
@keyframes pulse { 0%,100%{ opacity: 1; } 50%{ opacity: 0.4; } }

.currently { margin-top: 10px; font-size: 12px; color: var(--text-secondary); }

.nav-links { display: flex; gap: var(--lg); flex-wrap: wrap; justify-content: flex-end; }
.nav-links a {
    color: var(--text-secondary); font-size: 12px; letter-spacing: 0.01em;
    position: relative; transition: color 0.2s ease;
}
.nav-links a:hover { color: var(--accent-hover); }
.nav-links a::after {
    content: ''; position: absolute; left: 0; right: 100%; bottom: -4px; height: 1px;
    background: var(--accent); transition: right 0.25s ease;
}
.nav-links a:hover::after { right: 0; }

/* ---------- shared page furniture (résumé + writing pages) ---------- */

.chevron { stroke: currentColor; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round;
    opacity: 0.85; transition: transform 0.45s cubic-bezier(.2,.8,.2,1); }

.deck-divider { position: relative; width: 100%; height: 1px; background: var(--line-color); margin-bottom: var(--xl); }
.deck-divider::after {
    content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 14%;
    background: var(--accent); box-shadow: 0 0 12px rgba(155,125,255,0.6);
}

/* same minimal treatment as the "Work" toggle, with the chevron pointing right */
.resume-link { display: inline-flex; align-items: center; gap: var(--sm); flex: none; margin-left: auto;
    color: var(--text-secondary); transition: color 0.2s ease; }
.resume-link:hover { color: var(--text-primary); }
.resume-link .label { margin: 0; color: inherit; }
.resume-link .chevron-r { transition: transform 0.2s ease; }
.resume-link:hover .chevron-r { transform: translateX(2px); }

/* ---- writing / essay page ---- */
.writing { max-width: 760px; margin: 0 auto; }
.post-head { margin-top: var(--xl); }
.post-meta { font: 500 11px/1 var(--font-mono); color: var(--accent); letter-spacing: 0.16em; text-transform: uppercase; }
.post-title { font-size: 40px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; color: #fff; margin: 16px 0 10px; }
.post-sub { font-size: 16px; line-height: 1.5; color: var(--text-secondary); max-width: 52ch; }
.post-body { margin-top: 38px; max-width: 65ch; }
.post-body p { font-size: 16.5px; line-height: 1.78; color: rgba(255,255,255,0.82); margin: 0 0 var(--lg); }
.post-body p.lede { font-size: 18.5px; line-height: 1.7; color: rgba(255,255,255,0.92); }
.post-body em { color: rgba(255,255,255,0.95); font-style: italic; }
.post-body h2 { font-size: 22px; font-weight: 700; color: #fff; letter-spacing: -0.01em; margin: 44px 0 16px; }
@media (max-width: 760px), (max-height: 560px) and (pointer: coarse) {
    .post-title { font-size: 29px; }
    .post-body { margin-top: 26px; }
    .post-body p { font-size: 16px; line-height: 1.72; }
    .post-body h2 { font-size: 20px; margin: 34px 0 13px; }
}

/* =========================================================
   hidden retro desktop — a little Mac "monitor" + dock easter egg
   ========================================================= */
.desktop {
    position: fixed; inset: 0; z-index: 60; pointer-events: none;
    opacity: 0; visibility: hidden;             /* hidden = its windows can't intercept clicks while closed */
    transition: opacity 0.5s ease, visibility 0s linear 0.5s;
    font-family: -apple-system, "Lucida Grande", "Helvetica Neue", "Segoe UI", sans-serif;
    background: linear-gradient(rgba(6,5,14,0.14), rgba(6,5,14,0.40)), url('assets/img/aurora.jpg') center/cover no-repeat;
}
.desktop.open { opacity: 1; visibility: visible; transition: opacity 0.5s ease, visibility 0s; }

/* desktop-only: a Dock-style app icon to relaunch Notes once it's closed (the icon IS the affordance, no labels;
   magnifies on hover, name on hover, just like the macOS Dock). Sits just under app windows (z 11+). */
.notes-relaunch { position: absolute; right: 26px; bottom: 24px; z-index: 8; border: 0; background: none; padding: 0;
    cursor: pointer; display: flex; flex-direction: column; align-items: center;
    opacity: 0; transform: translateY(14px) scale(0.9); pointer-events: none; -webkit-tap-highlight-color: transparent;
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(.18,.9,.25,1.1); }
.notes-relaunch.show { opacity: 1; transform: none; pointer-events: auto; }
.np-svg { display: block; width: 58px; height: auto; transform: rotate(-5deg);
    filter: drop-shadow(0 9px 16px rgba(0,0,0,0.34));
    transition: transform 0.26s cubic-bezier(.2,.8,.2,1), filter 0.26s; }
.notes-relaunch:hover .np-svg { transform: rotate(-1deg) translateY(-7px) scale(1.06); filter: drop-shadow(0 16px 26px rgba(0,0,0,0.44)); }
.notes-relaunch:active .np-svg { transform: rotate(-2deg) translateY(-2px) scale(1.02); transition-duration: 0.08s; }
/* (the folded note carries itself; no text label needed) */

/* ---- the shelf: Sam's things embedded directly on the desktop ---- */
.shelf { position: absolute; inset: 0; pointer-events: none; font-family: var(--font-sans); }
.shelf.locked { overflow: hidden !important; }   /* a full-screen app is up: the front door must not scroll underneath */
.shelf > * { pointer-events: auto; }
.shelf-intro { display: none; }   /* mobile-only identity header (desktop has the Notes window) */
.msg-card { display: none; }       /* mobile-only Messages preview in the scroll flow (desktop discovers via the notification) */
/* the desktop MoarMarket "stocks" widget — a live-glance card above the Notes window (same width), opens the case study.
   left/top/width are set in JS (positioned as a stack with Notes); this is the look. */
.mw { position: absolute; display: flex; flex-direction: column; gap: 9px; color: #fff; -webkit-tap-highlight-color: transparent;
    opacity: 0; transform: translateY(-6px); transition: opacity 0.5s 0.25s, transform 0.28s cubic-bezier(.22,.61,.36,1); }
.desktop.open .mw { opacity: 1; transform: none; }
/* the card holds the faces; the switcher lives OUTSIDE it, below */
.mw-stack { position: relative; border-radius: 20px; overflow: hidden; touch-action: pan-y;   /* horizontal swipe = switch faces; vertical still scrolls the page */
    background: linear-gradient(150deg, #191b1f, #101216);
    box-shadow: 0 16px 40px rgba(0,0,0,0.42), inset 0 0 0 1px rgba(255,255,255,0.06);
    transition: transform 0.28s cubic-bezier(.22,.61,.36,1), box-shadow 0.28s; }
.mw-stack:hover { transform: translateY(-3px); box-shadow: 0 26px 60px rgba(0,0,0,0.52), inset 0 0 0 1px rgba(255,255,255,0.18); }
.mw-face { display: none; width: 100%; min-height: 132px; box-sizing: border-box; flex-direction: column; gap: 11px; padding: 14px 17px 13px; border: 0; cursor: pointer; text-align: left; color: inherit;
    background: radial-gradient(130% 150% at 100% 0%, rgba(48,209,88,0.11), transparent 55%);   /* Moar: green glow */
    -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; }
.mw-hub { background: radial-gradient(130% 150% at 100% 0%, rgba(155,125,255,0.14), transparent 55%); }   /* Hubble: purple glow */
.mw-face.sel { display: flex; animation: mwfade 0.32s ease; }
@keyframes mwfade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
/* header: app badge + name, then a "case study" pill on the right */
.mw-head { display: flex; align-items: center; gap: 10px; }
.mw-badge { flex: none; width: 25px; height: 25px; border-radius: 7px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.14); }
.mw-badge img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mw-name { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mw-name b { font: 800 14px/1 var(--font-sans); letter-spacing: -0.01em; }
.mw-name i { font: 500 11.5px/1.2 var(--font-sans); font-style: normal; color: #8a8a90; }
.mw-tag { margin-left: auto; flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; font: 700 10.5px/1 var(--font-sans); color: #34c759;
    padding: 5px 10px; border-radius: 999px; background: rgba(48,209,88,0.14); box-shadow: inset 0 0 0 1px rgba(48,209,88,0.3);
    transition: background 0.2s, color 0.2s, box-shadow 0.2s; }
.mw-tag > i { width: 6px; height: 6px; border-radius: 50%; background: #30d158; animation: mwpulse 2.4s infinite; }
.mw-tag em { font-style: normal; font-size: 12px; color: #34c759; transition: transform 0.2s, color 0.2s; }
.mw-face:hover .mw-tag { background: #30d158; color: #06210f; box-shadow: inset 0 0 0 1px rgba(48,209,88,0.9); }
.mw-face:hover .mw-tag > i { background: #06210f; animation: none; }
.mw-face:hover .mw-tag em { transform: translateX(3px); color: #06210f; }
.mw-badge-round { border-radius: 50%; }
/* Hubble face: purple pill (Hubble's colour, not Moar green) */
.mw-hub .mw-tag { color: #bda9ff; background: rgba(155,125,255,0.16); box-shadow: inset 0 0 0 1px rgba(155,125,255,0.34); }
.mw-hub .mw-tag > i { background: #9b7dff; }
.mw-hub .mw-tag em { color: #bda9ff; }
.mw-hub.mw-face:hover .mw-tag { background: #9b7dff; color: #190a30; box-shadow: inset 0 0 0 1px rgba(155,125,255,0.9); }
.mw-hub.mw-face:hover .mw-tag > i { background: #190a30; }
.mw-hub.mw-face:hover .mw-tag em { color: #190a30; }
/* Hubble face: a clean "Backed by" cluster where the sparkline sits */
.mw-backers { flex: 1; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: 7px; align-self: stretch; padding-bottom: 2px; }
.mw-bk-l { font: 600 9.5px/1 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: #7f8088; }
.mw-bk-logos { display: flex; gap: 6px; }
.mw-bkl { position: relative; display: inline-flex; }
.mw-bkl::after { content: attr(data-name); position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%); z-index: 6;
    background: rgba(0,0,0,0.92); color: #fff; font: 600 10px/1 var(--font-sans); letter-spacing: 0.01em; padding: 5px 8px; border-radius: 7px;
    white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.12s ease; }
@media (hover: hover) { .mw-bkl:hover::after { opacity: 1; } }
.mw-backers img { width: 27px; height: 27px; border-radius: 7px; object-fit: cover; background: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22); }
/* switcher: arrows + dots, OUTSIDE the card (below it, on the wallpaper) */
.mw-nav { display: flex; align-items: center; justify-content: center; gap: 12px; }
/* the case-study switcher: one macOS segmented control, the white fill marks the active segment */
.mw-seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: 999px; background: rgba(10,10,14,0.42);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 8px 22px rgba(0,0,0,0.25);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.mw-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 7px; border: 0; border-radius: 999px;
    background: none; color: rgba(255,255,255,0.66); font: 600 11.5px/1 var(--font-sans); cursor: pointer;
    transition: background 0.18s, color 0.18s; -webkit-tap-highlight-color: transparent; }
.mw-pill img { width: 18px; height: 18px; border-radius: 5px; object-fit: cover; }
.mw-pill:hover { color: #fff; background: rgba(255,255,255,0.09); }
.mw-pill.sel { background: rgba(255,255,255,0.94); color: #111; }
.theme-light .mw-seg { background: rgba(0,0,0,0.07); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.07); }
.theme-light .mw-pill { color: rgba(20,20,28,0.62); }
.theme-light .mw-pill:hover { color: #000; background: rgba(0,0,0,0.08); }
.theme-light .mw-pill.sel { background: #17181c; color: #fff; }
/* a one-time nudge, desktop only: the card slides and settles once so the switcher reads as live */
@media (min-width: 761px) {
    .desktop.open .mw-stack { animation: mwnudge 0.9s 2.6s ease-in-out 1; }
}
@keyframes mwnudge { 0%, 100% { transform: translateX(0); } 35% { transform: translateX(-9px); } 65% { transform: translateX(4px); } }
/* body: metric block on the left, sparkline filling the right */
.mw-head, .mw-body { width: 100%; min-width: 0; }   /* WebKit: button flex content can shrink-wrap; pin both rows to the face */
.mw-body { display: flex; flex: 1; align-items: flex-end; gap: 18px; }
.mw-metric { flex: none; display: flex; flex-direction: column; gap: 5px; }
.mw-k { font: 600 9.5px/1 var(--font-sans); letter-spacing: 0.07em; text-transform: uppercase; color: #7f8088; }
.mw-valrow { display: flex; align-items: baseline; gap: 9px; }
.mw-val { font: 700 27px/1 var(--font-sans); letter-spacing: -0.02em; }
.mw-chg { font: 700 12px/1 var(--font-sans); color: #30d158; padding: 4px 7px; border-radius: 7px; background: rgba(48,209,88,0.16); }
.mw-foot { font: 600 10.5px/1.35 var(--font-sans); color: #9a9aa0; }
.mw-spark { flex: 1; min-width: 70px; max-height: 56px; align-self: stretch; margin-bottom: 2px;
    clip-path: inset(0 100% 0 0); }   /* the chart sweeps in left->right (clip-path, NOT stroke-dash: Safari miscomputes dashes under non-scaling-stroke) */
.desktop.open .mw-spark { animation: mwreveal 1.3s 0.45s cubic-bezier(.22,.61,.36,1) forwards; }
.mw-spark svg { display: block; width: 100%; height: 100%; }
@keyframes mwpulse { 0% { box-shadow: 0 0 0 0 rgba(48,209,88,0.5); } 70% { box-shadow: 0 0 0 6px rgba(48,209,88,0); } 100% { box-shadow: 0 0 0 0 rgba(48,209,88,0); } }
@keyframes mwreveal { to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .mw-tag > i { animation: none; } .mw-spark { clip-path: none; } .desktop.open .mw-spark, .desktop.open .mw-stack { animation: none; } }
/* the "Work" toggle — identical to the top one, just inverted, sliding down to the bottom-left */

.obj { position: absolute; transform: translate(-50%, -50%); background: none; border: 0; padding: 0; cursor: pointer; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.obj:focus { outline: none; }                                            /* no default button focus/active box (esp. iOS on tap) */
.obj:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }   /* keep a ring for keyboard users only */
.obj-img, .obj-still { -webkit-user-drag: none; pointer-events: none; }  /* the button owns the touch; no iOS press-and-hold selection box on the image */
.obj-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; animation: objfloat 6s ease-in-out infinite; will-change: transform; }
/* every object shares a fixed-height media slot with the visual sitting on a common baseline,
   so each one is the same distance from its label and they line up across the grid */
.obj-media { box-sizing: border-box; display: flex; align-items: flex-end; justify-content: center; height: 196px; }
.obj-travels .obj-media { padding-bottom: 10px; }   /* match the synth's baseline */
@keyframes objfloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.obj-flights .obj-inner { animation-duration: 7.2s; }
.obj-maps .obj-inner { animation-duration: 6.6s; animation-delay: -2.2s; }
.obj-notes .obj-inner { animation-duration: 5.6s; animation-delay: -1s; }
.obj-shadow { position: absolute; left: 50%; bottom: 70px; transform: translateX(-50%); width: 50%; height: 20px; z-index: 0;
    background: radial-gradient(closest-side, rgba(0,0,0,0.40), rgba(0,0,0,0)); filter: blur(7px); }
.obj-stage { position: relative; display: block; width: 244px; height: 176px; }
.obj-hit { position: absolute; inset: 0; z-index: 2; display: none; }   /* unused: the canvas owns the drag (orbit) on every device; tap-to-open lives on the button */
.obj-img { display: block; filter: drop-shadow(0 22px 28px rgba(0,0,0,0.5)); transition: filter 0.2s; }
.obj-flights .obj-img { width: 172px; transform: rotate(-7deg); }
.obj-maps .obj-img { width: 150px; }
.obj-icon { display: block; }
.obj-notes .obj-icon svg { display: block; width: 80px; height: 80px; border-radius: 18px; filter: drop-shadow(0 16px 24px rgba(0,0,0,0.42)); }
.obj-notes:hover .obj-icon svg { filter: drop-shadow(0 20px 28px rgba(0,0,0,0.5)) brightness(1.04); }
.obj-label { font: 700 15px/1 var(--font-sans); color: #f1f2f6; text-align: center; opacity: 0.92; transition: opacity 0.2s, transform 0.2s; }
.obj-label small { display: block; font: 500 10px/1 var(--font-mono); color: rgba(255,255,255,0.72); margin-top: 6px; letter-spacing: 0.1em; text-transform: uppercase; }
.obj:hover .obj-label { opacity: 1; color: #fff; transform: translateY(2px); }
.obj:hover .obj-img { filter: drop-shadow(0 26px 34px rgba(0,0,0,0.55)) brightness(1.06); }
.obj.bounce .obj-inner { animation: objbounce 0.45s; }
@keyframes objbounce { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-14px); } }
.obj.running .obj-label::after { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #1fbf6b; margin-left: 8px; vertical-align: middle; }

/* object positions — Notes opens as a wider panel on the left, the things fill the right as a 2x2 */
.obj-music   { left: 58%; top: 45%; }
@media (min-width: 761px) and (max-width: 1200px) { .obj { transform: translate(-50%, -50%) scale(0.72); } }   /* tablet band up to iPad Pro 11" landscape (1194) */
.obj-flights { left: 85%; top: 33%; }
.obj-maps    { left: 57%; top: 77%; }
.obj-travels { left: 84%; top: 72%; }
.obj-notes   { display: none; }                 /* desktop: the Notes app opens itself, no icon needed */

/* the sticky note (Notes / about me) */

  

/* iTunes — interactive player */
.it-xport span, .it-xport button { cursor: pointer; user-select: none; border: 0; background: none; font: inherit; }
.it-xport span:active, .it-xport button:active { color: #000; background: rgba(0,0,0,0.06); }
.it-rows .it-row { cursor: default; }
.it-rows .it-row.current { background: linear-gradient(#5b9bf5, #2f73db); color: #fff; }
.it-rows .it-row.current .c-i, .it-rows .it-row.current .c-t, .it-rows .it-row.current .c-a, .it-rows .it-row.current .c-al { color: rgba(255,255,255,0.92); }
.it-rows .it-row.current .spk { color: #fff; }

/* Maps — route tabs + stylised map + info */

.map-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ===== the Travels desk object — a mini boarding pass ===== */
.obj-travels .bpass-mini { position: relative; display: block; width: 96px; height: 120px; border-radius: 11px; overflow: hidden;
    background: linear-gradient(160deg, #2c7a7b, #1f5a5b); box-shadow: 0 16px 26px rgba(0,0,0,0.42); transition: box-shadow 0.2s; }
.obj-travels .bm-top { position: absolute; top: 12px; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 4px; color: rgba(255,255,255,0.92); }
.obj-travels .bm-top i { font-style: normal; font-size: 9px; }
.obj-travels .bm-top b { font: 800 6.5px/1 var(--font-mono); letter-spacing: 0.08em; }
.obj-travels .bm-route { position: absolute; top: 42px; left: 0; right: 0; text-align: center; color: #fff; font: 800 14px/1 var(--font-sans); letter-spacing: 0.04em; }
.obj-travels .bm-route i { font-style: normal; font-size: 9px; opacity: 0.85; margin: 0 3px; }
.obj-travels .bm-perf { position: absolute; left: 0; right: 0; top: 72px; border-top: 1.5px dashed rgba(255,255,255,0.5); }
.obj-travels .bm-bars { position: absolute; left: 11px; right: 11px; bottom: 11px; height: 24px; border-radius: 3px; background: #fff;
    background-image: repeating-linear-gradient(90deg, #1a1a1a 0 1.5px, transparent 1.5px 4px, #1a1a1a 4px 5px, transparent 5px 7px); }
.obj-travels:hover .bpass-mini { box-shadow: 0 22px 32px rgba(0,0,0,0.5); }

/* ===== Weather — the Cycling app: an iOS Weather list of the cities Sam has cycled in ===== */
.win.weatherapp { width: 326px; height: 560px; max-height: calc(100vh - 56px); border-radius: 17px; overflow: hidden; color: #fff;
    display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 32px 72px rgba(0,0,0,0.62);
    background: linear-gradient(180deg, #1b2233 0%, #10141d 100%);   /* dark always */
    font-family: -apple-system, 'SF Pro Display', var(--font-sans); }
/* sidebar top bar: just the traffic lights, like the macOS Weather sidebar */
.wl-bar { flex: none; height: 44px; display: flex; align-items: center; padding: 0 15px; }
.wl-list { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 16px 4px; display: flex; flex-direction: column; gap: 11px; }
.wl-card { position: relative; flex: none; display: block; text-align: left; border: 0; cursor: pointer; padding: 0;
    height: 105px; border-radius: 21px; overflow: hidden; color: #fff;
    box-shadow: 0 12px 30px rgba(0,0,0,0.42), 0 2px 6px rgba(0,0,0,0.3); }
.wl-card:active { transform: scale(0.99); }
.wl-sky { position: absolute; inset: 0; z-index: 0; }
.wl-sky::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 44%); }
.wl-sky::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(0,0,0,0.28), rgba(0,0,0,0) 60%); }
/* liquid-glass rim: a subtle specular edge + faint outline + inner depth; the selected (home) card gets a brighter ring */
.wl-card::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
    box-shadow: inset 0 1px 0.5px rgba(255,255,255,0.24), inset 0 0 0 1px rgba(255,255,255,0.07), inset 0 -20px 36px rgba(0,0,0,0.22); }
.wl-card.sel::after { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.6), inset 0 1px 1px rgba(255,255,255,0.42); }
.wl-card.wl-next { outline: 1.6px dashed rgba(255,255,255,0.5); outline-offset: -5px; }   /* a place I'm headed, not yet ridden */
.wl-card-in { position: relative; z-index: 1; height: 100%; padding: 13px 17px; display: flex; flex-direction: column;
    justify-content: space-between; text-shadow: 0 1px 3px rgba(0,0,0,0.34); }
.wl-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.wl-name { font-weight: 600; font-size: 23px; line-height: 1.04; }
.wl-sub { font-size: 12px; color: rgba(255,255,255,0.92); margin-top: 3px; }
.wl-temp { font-weight: 300; font-size: 46px; line-height: 0.8; letter-spacing: -0.02em; }
.wl-bot { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.wl-blurb { font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,0.94); display: flex; align-items: center; gap: 5px; min-width: 0; }
.wl-blurb.alert { font-weight: 600; }
.wl-warn { width: 14px; height: 14px; flex: none; }
.wl-hl { font-size: 13px; font-weight: 500; white-space: nowrap; }

.wl-search { flex: none; margin: 0 15px 12px; height: 38px; border-radius: 11px; display: flex; align-items: center; gap: 8px; padding: 0 11px;
    background: rgba(255,255,255,0.09); color: rgba(255,255,255,0.56); font-size: 14px;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); }
.wl-search-i { width: 15px; height: 15px; flex: none; }
.wl-search span { flex: 1; min-width: 0; }

/* atmospheric skies — layered CSS gradients, no photos */
.wl-dusk { background:
    radial-gradient(118% 92% at 80% 2%, rgba(255,200,152,0.88), rgba(255,200,152,0) 50%),
    radial-gradient(92% 86% at 15% 24%, rgba(217,199,233,0.5), rgba(217,199,233,0) 58%),
    linear-gradient(158deg, #566a9e 0%, #8d7da6 46%, #d9a487 100%); }
.wl-rain { background:
    radial-gradient(112% 92% at 26% 10%, rgba(200,213,226,0.42), rgba(200,213,226,0) 58%),
    linear-gradient(160deg, #586977 0%, #7b8997 58%, #95a2af 100%); }
.wl-haze { background:
    radial-gradient(112% 86% at 74% 6%, rgba(249,239,216,0.52), rgba(249,239,216,0) 52%),
    linear-gradient(160deg, #6d85a6 0%, #95a8bd 100%); }
.wl-night { background:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(255,255,255,0.9), transparent 100%),
    radial-gradient(1px 1px at 27% 12%, rgba(255,255,255,0.7), transparent 100%),
    radial-gradient(1.3px 1.3px at 43% 31%, rgba(255,255,255,0.8), transparent 100%),
    radial-gradient(1px 1px at 61% 17%, rgba(255,255,255,0.6), transparent 100%),
    radial-gradient(1.6px 1.6px at 77% 33%, rgba(255,255,255,0.85), transparent 100%),
    radial-gradient(1px 1px at 89% 13%, rgba(255,255,255,0.6), transparent 100%),
    radial-gradient(1.2px 1.2px at 34% 47%, rgba(255,255,255,0.5), transparent 100%),
    radial-gradient(1px 1px at 69% 50%, rgba(255,255,255,0.45), transparent 100%),
    radial-gradient(82% 72% at 82% 6%, rgba(128,148,208,0.42), rgba(128,148,208,0) 56%),
    linear-gradient(165deg, #18213e 0%, #2c3c64 100%); }
.wl-cloudnight { background:
    radial-gradient(96% 82% at 22% 22%, rgba(98,114,160,0.55), rgba(98,114,160,0) 58%),
    radial-gradient(72% 62% at 86% 10%, rgba(72,88,132,0.45), rgba(72,88,132,0) 60%),
    linear-gradient(165deg, #1a2440 0%, #36436d 100%); }
.wl-clearday { background:
    radial-gradient(120% 95% at 82% 0%, rgba(255,236,180,0.7), rgba(255,236,180,0) 46%),
    linear-gradient(160deg, #2f7cc4 0%, #4f97d6 52%, #87bbe6 100%); }
.wl-cloudday { background:
    radial-gradient(110% 90% at 72% 6%, rgba(236,242,248,0.34), rgba(236,242,248,0) 56%),
    linear-gradient(160deg, #5d7790 0%, #8298ac 60%, #a7b7c4 100%); }
.wl-rainnight { background:
    radial-gradient(110% 90% at 26% 12%, rgba(120,140,165,0.34), rgba(120,140,165,0) 58%),
    linear-gradient(162deg, #222b3a 0%, #36465c 100%); }

/* drag-to-resize handle (Notes) */
/* resize from the corner, but no visible grip — macOS doesn't show one */
.win-resize { position: absolute; right: 0; bottom: 0; width: 20px; height: 20px; cursor: nwse-resize; z-index: 6; }

/* ---- the close-friends password dialog (classic Mac auth) ---- */
.authmodal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: flex-start; justify-content: center;
    background: rgba(0,0,0,0.26); opacity: 0; transition: opacity 0.16s; padding-top: 13vh; pointer-events: auto; }
.authmodal.in { opacity: 1; }
.auth-dialog { width: 482px; max-width: 92vw; border-radius: 6px; overflow: hidden; font-family: 'Lucida Grande', var(--font-sans);
    background: #f0f0f0; border: 1px solid #6e6e6e;
    box-shadow: 0 22px 64px rgba(0,0,0,0.5);
    transform: translateY(-10px) scale(0.97); transition: transform 0.16s; }
.authmodal.in .auth-dialog { transform: none; }
.auth-titlebar { height: 24px; background: linear-gradient(#ececec, #d8d8d8); border-bottom: 1px solid #b6b6b6; }
.auth-top { display: flex; gap: 16px; padding: 18px 22px 8px; }
.auth-ico { flex: none; width: 58px; }
.auth-ico .auth-lock { width: 54px; height: auto; display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.32)); }
.auth-msg { flex: 1; min-width: 0; padding-top: 2px; }
.auth-h { margin: 0; font: 700 13px/1.42 'Lucida Grande', var(--font-sans); color: #000; }
.auth-fields { margin: 13px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 9px; align-items: center; }
.auth-lbl { text-align: right; font: 400 13px/1 'Lucida Grande', var(--font-sans); color: #000; }
.auth-pw { width: 100%; font: 400 13px/1.2 'Lucida Grande', var(--font-sans); padding: 3px 5px; border: 1px solid #a7abb1; border-radius: 3px;
    background: #fff; box-shadow: inset 0 1px 2px rgba(0,0,0,0.12); color: #000; }
.auth-pw:focus { outline: none; border-color: #4f8ce8; box-shadow: 0 0 0 3px rgba(74,135,232,0.55), 0 0 5px rgba(74,135,232,0.4); }
.auth-keychain { display: flex; align-items: center; gap: 5px; font: 400 12px/1.3 'Lucida Grande', var(--font-sans); color: #1d1d1f; cursor: default; }
.auth-keychain input { margin: 0; flex: none; }
.auth-bar { display: flex; align-items: center; justify-content: flex-end; padding: 8px 18px 15px; }
.auth-actions { display: flex; gap: 11px; }
.auth-actions button { min-width: 70px; padding: 3px 16px; border-radius: 14px; font: 400 13px/1.5 'Lucida Grande', var(--font-sans); cursor: pointer;
    border: 1px solid #8c8c92; color: #1d1d1f;
    background: linear-gradient(#ffffff 0%, #f4f4f4 47%, #e6e6e6 53%, #ededed 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 1px 1px rgba(0,0,0,0.14); }
.auth-actions button:active { background: linear-gradient(#dcdcdc, #cfcfcf); }
.auth-actions .auth-ok { border-color: #2358b8; color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
    background: linear-gradient(#a6caf6 0%, #5d94ea 46%, #3475df 52%, #2f6ed6 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 1px 2px rgba(0,0,0,0.25); animation: aquapulse 1.9s ease-in-out infinite; }
.auth-actions .auth-ok:active { background: linear-gradient(#6a9be8, #2a64cc); }
.auth-actions .auth-ok:disabled { opacity: 0.55; animation: none; }
@keyframes aquapulse { 0%,100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 1px 2px rgba(0,0,0,0.25); }
    50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 1px 2px rgba(0,0,0,0.25), 0 0 8px 1px rgba(74,144,226,0.8); } }
.auth-dialog.shake { animation: authshake 0.4s; }
@keyframes authshake { 10%,90% { transform: translateX(-2px); } 20%,80% { transform: translateX(4px); } 30%,50%,70% { transform: translateX(-8px); } 40%,60% { transform: translateX(8px); } }
.win.resizing { user-select: none; }

/* ---- the monitor (the size of the old Finder window) ---- */
.monitor {
    position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%) scale(0.96);
    width: 600px; pointer-events: auto; opacity: 0;
    transition: opacity 0.45s ease, transform 0.5s cubic-bezier(.2,.9,.2,1);
    filter: drop-shadow(0 44px 80px rgba(0,0,0,0.6));
}
.desktop.open .monitor { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.monitor::before { content: ''; position: absolute; left: 50%; bottom: -44px; transform: translateX(-50%);
    width: 120px; height: 46px; background: linear-gradient(#26262b, #141417);
    clip-path: polygon(32% 0, 68% 0, 82% 100%, 18% 100%); }
.monitor::after { content: ''; position: absolute; left: 50%; bottom: -56px; transform: translateX(-50%);
    width: 210px; height: 15px; border-radius: 50%; background: linear-gradient(#1d1d20, #0c0c0e);
    box-shadow: 0 10px 22px rgba(0,0,0,0.5); }
.screen { position: relative; height: 400px; border-radius: 16px; overflow: hidden;
    border: 11px solid #161618; background: #0a0813;
    box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(255,255,255,0.05), inset 0 3px 40px rgba(0,0,0,0.55); }
.wallpaper { position: absolute; inset: 0; background: #0a0a14 url('assets/img/aurora.jpg') center/cover no-repeat; }

/* macOS menu bar — translucent, top of the desktop, with a live clock */
.menubar { position: absolute; top: 0; left: 0; right: 0; height: 26px; z-index: 9000;
    display: flex; align-items: center; justify-content: space-between; padding: 0 13px;
    color: rgba(255,255,255,0.92); font: 500 13px/1 -apple-system, 'SF Pro Text', var(--font-sans);
    background: rgba(18,16,28,0.42); -webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6);
    box-shadow: inset 0 -0.5px 0 rgba(255,255,255,0.1);
    opacity: 0; transform: translateY(-100%); transition: opacity 0.4s ease, transform 0.45s cubic-bezier(.2,.9,.3,1.1); }
.desktop.open .menubar { opacity: 1; transform: none; }
.mb-left { display: flex; align-items: center; gap: 18px; }
.mb-logo { width: 14px; height: 16px; cursor: pointer; transition: opacity 0.15s; }
.mb-logo:hover { opacity: 0.65; }
.mb-left .mb-app { font-weight: 700; }
.mb-menu { opacity: 0.82; cursor: default; }
.mb-menu:hover { opacity: 1; }
.mb-right { display: flex; align-items: center; gap: 15px; }
/* the MoarMarket menu-bar extra: the real TVL sparkline + peak, like a third-party stocks ticker in the bar */
.mb-tick { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; margin-right: 1px;
    border: 0; border-radius: 5px; background: none; color: inherit; cursor: pointer; pointer-events: auto;
    font: inherit; -webkit-tap-highlight-color: transparent; transition: background 0.15s; }
.mb-tick:hover { background: rgba(255,255,255,0.16); }
.theme-light .mb-tick:hover { background: rgba(0,0,0,0.09); }
.mb-resume { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 9px; border: 0; border-radius: 5px;
    background: none; color: inherit; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; transition: background 0.15s; }
.mb-resume svg { width: 13px; height: 13px; opacity: 0.9; }
.mb-resume b { font: 600 12px/1 var(--font-sans); letter-spacing: 0; }
.mb-resume:hover { background: rgba(255,255,255,0.16); }
.theme-light .mb-resume:hover { background: rgba(0,0,0,0.09); }
.mb-tick b { font: 600 12px/1 var(--font-sans); letter-spacing: 0; }
.mb-tick i { font: 700 8.5px/1 var(--font-sans); font-style: normal; opacity: 0.55; letter-spacing: 0.06em; }
.mb-tick-spark { display: block; width: 27px; height: 12px; opacity: 0.95; }
.mb-i { height: 15px; width: auto; opacity: 0.95; }
.mb-search { display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; background: none; border: 0; color: inherit; cursor: pointer; pointer-events: auto; }
.mb-search:hover { opacity: 0.7; }
/* Messages menu-bar extra: speech bubble + red count badge (desktop discovery) */
.mb-msg { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 9px; margin: 0; border: 0; border-radius: 5px; background: none; color: inherit; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; transition: background 0.15s; }
.mb-msg:hover { background: rgba(255,255,255,0.16); }
.mb-msg svg { display: block; width: 14px; height: 14px; }
.mb-msg b { font: 600 12px/1 var(--font-sans); }
.mb-msg-badge { min-width: 15px; height: 15px; box-sizing: border-box; padding: 0 4px; border-radius: 7.5px; background: #ff3b30; color: #fff; font: 700 9.5px/15px var(--font-sans); text-align: center; letter-spacing: -0.02em; }
/* "About This Site" — an About-This-Mac riff behind the Apple menu */
.about-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.34); opacity: 0; transition: opacity 0.2s; }
.about-modal.in { opacity: 1; }
.about-panel { width: 322px; max-width: calc(100vw - 40px); padding: 24px 26px 22px; border-radius: 18px; position: relative; text-align: center;
    background: rgba(40,40,44,0.82); -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px);
    border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 30px 80px rgba(0,0,0,0.55); color: #f2f2f5;
    transform: scale(0.96); transition: transform 0.2s; }
.about-modal.in .about-panel { transform: scale(1); }
.about-x { position: absolute; top: 12px; left: 12px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(255,255,255,0.1); color: #d0d0d4; cursor: pointer; font-size: 10px; line-height: 1; }
.about-x:hover { background: rgba(255,255,255,0.18); color: #fff; }
.about-hero { width: 138px; height: 90px; margin: 6px auto 16px; border-radius: 13px; position: relative; overflow: hidden;
    background: linear-gradient(rgba(6,5,14,0.14), rgba(6,5,14,0.42)), url('assets/img/aurora.jpg') center/cover no-repeat;
    box-shadow: 0 10px 26px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.09); }
.about-mbar { position: absolute; top: 0; left: 0; right: 0; height: 9px; background: rgba(18,16,28,0.5); }
.about-dock { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); width: 56px; height: 10px; border-radius: 6px; background: rgba(255,255,255,0.18); }
.about-name { margin: 0; font: 700 22px/1.15 var(--font-sans); letter-spacing: -0.02em; }
.about-tag { margin: 4px 0 18px; font: 500 12.5px/1.3 var(--font-sans); color: #9a9aa0; }
.about-specs { margin: 0 0 15px; display: flex; flex-direction: column; text-align: left; border-top: 1px solid rgba(255,255,255,0.09); }
.about-specs > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 2px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.about-specs dt { margin: 0; font: 500 12px/1.3 var(--font-sans); color: #9a9aa0; }
.about-specs dd { margin: 0; font: 600 12px/1.3 var(--font-sans); color: #f2f2f5; text-align: right; }
.about-note { margin: 0 0 18px; font: 400 11.5px/1.5 var(--font-sans); color: #b0b0b6; text-align: left; }
.about-actions { display: flex; gap: 8px; }
.about-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; height: 33px; border-radius: 9px; border: 0; cursor: pointer; text-decoration: none;
    font: 600 12.5px/1 var(--font-sans); background: rgba(255,255,255,0.12); color: #f2f2f5; }
.about-btn:hover { background: rgba(255,255,255,0.18); }
.about-btn.primary { background: #0a84ff; color: #fff; }
.about-btn.primary:hover { background: #2a95ff; }
.mb-clock { font-variant-numeric: tabular-nums; opacity: 0.96; white-space: nowrap; }

/* ===== Spotlight — app launcher (menubar 🔍 or ⌘K) ===== */
.spotlight { position: fixed; inset: 0; z-index: 5000; display: none; }
.spotlight.on { display: block; }
.sl-panel { position: absolute; top: 18vh; left: 50%; transform: translateX(-50%); width: min(560px, 92vw);
    background: rgba(44,44,46,0.78); -webkit-backdrop-filter: blur(34px) saturate(1.7); backdrop-filter: blur(34px) saturate(1.7);
    border: 1px solid rgba(255,255,255,0.16); border-radius: 14px; box-shadow: 0 32px 80px rgba(0,0,0,0.5), 0 0 0 0.5px rgba(0,0,0,0.4);
    overflow: hidden; animation: sl-in 0.14s ease; }
@keyframes sl-in { from { opacity: 0; transform: translateX(-50%) translateY(-6px); } }
.sl-search { display: flex; align-items: center; gap: 12px; padding: 13px 17px; }
.sl-mag { width: 22px; height: 22px; flex: none; fill: none; stroke: rgba(255,255,255,0.5); stroke-width: 2; stroke-linecap: round; }
.sl-input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: #f3f3f5; font: 400 21px/1 var(--font-sans); }
.sl-input::placeholder { color: rgba(255,255,255,0.34); }
.sl-results { max-height: 46vh; overflow-y: auto; padding: 6px; border-top: 1px solid rgba(255,255,255,0.1); }
.sl-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 11px; border: 0; background: none; border-radius: 8px; cursor: pointer; text-align: left; color: #e9e9ed; }
.sl-row.sel { background: #0a6cff; color: #fff; }
.sl-ic { width: 26px; height: 26px; flex: none; display: flex; align-items: center; justify-content: center; }
.sl-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; opacity: 0.95; }
.sl-name { font: 500 14px/1.2 var(--font-sans); flex: 1; }
.sl-sub { font: 500 11.5px/1 var(--font-sans); opacity: 0.55; white-space: nowrap; }
.sl-empty { padding: 16px 14px; color: rgba(255,255,255,0.4); font: 400 14px/1 var(--font-sans); }
.sl-sec { padding: 9px 11px 4px; font: 700 10.5px/1 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.38); }
.sl-sec + .sl-row { margin-top: 1px; }

/* ---- generic window (apps spill out over the monitor & into the void) ---- */
.win .hub-scroll, .win .nw-scroll, .win .st-body, .win .st-side-in, .win .notes-content, .win .mt-main, .win .as-main, .win .bk-stage, .win .ms-list, .win .ms-thread { overscroll-behavior: contain; }
.win {
    position: absolute; pointer-events: auto;
    background: #ececec; border: 1px solid #5f5f5f; border-radius: 7px;
    box-shadow: 0 28px 70px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.22) inset;
    overflow: hidden; max-width: calc(100vw - 24px);
    opacity: 0; transform: translateY(22px) scale(0.92); transform-origin: bottom center;
    transition: opacity 0.26s ease, transform 0.3s cubic-bezier(.2,.9,.2,1.2);
}
button.light.zoom { cursor: pointer; }
.win.zooming { transition: left 0.3s cubic-bezier(.3,.8,.3,1), top 0.3s cubic-bezier(.3,.8,.3,1), width 0.3s cubic-bezier(.3,.8,.3,1), height 0.3s cubic-bezier(.3,.8,.3,1); }
.win.dragging, .win.resizing { will-change: left, top, width, height; }
.win.dragging { transition: none; }
.win.in { opacity: 1; transform: none; }
.win.out { opacity: 0; transform: translateY(10px) scale(0.96); }
/* pre-warmed window: kept in the DOM (so its iframe loads) but parked off-screen, no transition */
.win.app.prewarm { position: fixed !important; left: -99999px !important; top: 0 !important; opacity: 0 !important; pointer-events: none !important; transform: none !important; transition: none !important; }

/* ---- title bar + traffic lights ---- */
.titlebar { touch-action: none; }
.win-resize { touch-action: none; }
.titlebar {
    height: 36px; display: flex; align-items: center; padding: 0 12px; user-select: none; cursor: default;
    background: linear-gradient(#ececec, #cfcfcf); border-bottom: 1px solid #b0b0b0;
    box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
}
.tb-left, .tb-right { flex: 1 1 0; display: flex; align-items: center; }
.tb-right { justify-content: flex-end; }
.tb-title { font-size: 13px; font-weight: 600; color: #4a4a4a; display: flex; align-items: center; gap: 6px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.7); white-space: nowrap; }
.traffic { display: flex; gap: 8px; align-items: center; }
.light { width: 12px; height: 12px; border-radius: 50%; border: 0; padding: 0; position: relative;
    box-shadow: 0 0 0 0.5px rgba(0,0,0,0.3) inset, 0 1px 1px rgba(0,0,0,0.18); }
.light.close { background: radial-gradient(circle at 35% 30%, #ff8d85, #fb5752); cursor: pointer; }
.light.min   { background: radial-gradient(circle at 35% 30%, #ffd778, #f4b41f); }
.light.zoom  { background: radial-gradient(circle at 35% 30%, #76e27c, #28b53d); }
/* glyphs revealed on hover, like real macOS */
.light::after { position: absolute; inset: -1px 0 0; text-align: center; line-height: 12px; font-weight: 600;
    color: rgba(0,0,0,0.5); opacity: 0; transition: opacity 0.12s; }
.light.close::after { content: '\00d7'; font-size: 11px; font-weight: 400; }
.light.min::after  { content: '\2013'; font-size: 10px; }
.light.zoom::after { content: '\002b'; font-size: 9px; }
.traffic:hover .light::after { opacity: 1; }
/* inactive windows: greyed-out buttons + softer shadow, the macOS background-window look */
.win:not(.active) .light { background: #4b4b50; box-shadow: 0 0 0 0.5px rgba(0,0,0,0.25) inset; }
.win:not(.active) .light::after { opacity: 0 !important; }
.win:not(.active) { box-shadow: 0 18px 44px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.12) inset; }

/* ---- Notes app (dark, modern macOS) ---- */
.notesapp { width: 544px; height: 472px; min-width: 410px; min-height: 320px; display: flex; flex-direction: column; overflow: hidden;
    border: 1px solid #000; border-radius: 10px; background: #1e1e1e;
    box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06) inset; }
.notesapp .titlebar { flex: none; height: 40px; background: #2b2b2d; border-bottom: 1px solid #161617; box-shadow: none; }
.notesapp .tb-title { color: #9a9a9e; }
.notes-body { display: flex; flex: 1; min-height: 0; }
.notes-list { width: 188px; flex: none; background: #252527; border-right: 1px solid #161617;
    padding: 6px 8px; overflow-y: auto; }
.notes-group { font-size: 12px; font-weight: 700; color: #ededf0; padding: 8px 8px 6px; }
.note-item { display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
    padding: 9px 11px; border-radius: 8px; }
.note-item + .note-item { margin-top: 1px; }
.note-item.sel { background: #3a3a3d; }
.ni-title { font-size: 13px; font-weight: 600; color: #f3f3f5; }
.ni-sub { font-size: 12px; color: #8c8c91; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ni-sub b { font-weight: 400; color: #c4c4c9; }
.notes-content { flex: 1; min-width: 0; padding: 18px 30px 24px; overflow-y: auto; background: #1e1e1e; }
.nc-date { text-align: center; font-size: 11px; color: #76767c; margin-bottom: 16px; }
.nc-title { font-size: 19px; font-weight: 700; color: #fff; letter-spacing: -0.01em; margin-bottom: 14px; }

      /* background-less, just a soft shadow */

.spin-hint { position: absolute; bottom: 4px; right: 6px; font-size: 10px; color: rgba(70,74,82,0.45);
    font-family: var(--font-mono); pointer-events: none; }
.nc-body p { font-size: 14px; line-height: 1.62; color: #d7d7db; margin-bottom: 13px; }
.nc-body a { color: #6ea8ff; text-decoration: none; }
.nc-body a:hover { text-decoration: underline; }
/* the three inline links open a live app in-page; a subtle "opens" arrow signals that, so people click with confidence (no preview needed) */
.nc-body .mm-demo::after, .nc-body .mm-tvl::after, .nc-body .mm-console::after,
.si-body .mm-demo::after, .si-body .mm-tvl::after, .si-body .mm-console::after {
    content: '\2197'; display: inline-block; font-size: 0.8em; font-weight: 600; margin-left: 1.5px; vertical-align: 1px;
    opacity: 0.55; transition: transform 0.15s ease, opacity 0.15s ease; }
.nc-body .mm-demo:hover::after, .nc-body .mm-tvl:hover::after, .nc-body .mm-console:hover::after,
.si-body .mm-demo:hover::after, .si-body .mm-tvl:hover::after, .si-body .mm-console:hover::after {
    opacity: 1; transform: translate(1px, -1px); }
.nc-body .nt-links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 10px; }
.nc-body .nt-links a { white-space: nowrap; }
.nc-body b { color: #fff; font-weight: 600; }

/* Pages — a realistic Apple Pages document window */
.pagesapp { position: relative; width: 610px; height: 624px; min-width: 560px; min-height: 440px; display: flex; flex-direction: column; overflow: hidden; }
.pagesapp .titlebar { flex: none; height: 38px; background: #3a3b3d; border-bottom: 1px solid #2a2b2d; box-shadow: none; }
.pagesapp .tb-title { color: #e7e7e9; font-size: 13px; font-weight: 600; }
/* toolbar */
.pg-tools { flex: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 2px; padding: 6px 15px; background: #2f3032; border-bottom: 1px solid #1d1e20; overflow: hidden; }
.pgt { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0; background: none; border: 0; color: #c4c4c8; cursor: default; }
.pgt-ic { height: 22px; display: flex; align-items: center; }
.pgt-ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pgt-lb { font-size: 9.5px; color: #a3a3a7; white-space: nowrap; }
.pgt-zoomwrap { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.pgt-zoom { height: 22px; display: inline-flex; align-items: center; gap: 3px; padding: 0 8px; border: 1px solid #57585b; border-radius: 5px; font-size: 11px; color: #d8d8da; }
.pgt-cv { font-size: 9px; opacity: 0.85; }
.pgt-div { flex: 0 0 auto; width: 1px; align-self: stretch; background: #4c4d50; margin: 3px 4px 8px; }
.pgt-more { flex: 0 0 auto; align-self: center; color: #b8b8bc; font-size: 17px; }
/* the page */
.pages-doc { flex: 1; min-height: 0; overflow-y: auto; background: #fff; }
.pg-page { padding: 8.5% 10% 80px; color: #1d1d1f; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.rsx-name { font-size: 23px; font-weight: 700; color: #141414; letter-spacing: -0.015em; }
.rsx-contact { font-size: 11.5px; color: #717171; margin-top: 5px; }
.rsx-sum { font-size: 12.5px; line-height: 1.56; color: #343434; margin: 17px 0 2px; }
.rsx-sum strong { color: #161616; font-weight: 600; }

.rsx-sec { font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #9b9b9b; margin: 22px 0 11px; padding-bottom: 6px; border-bottom: 1px solid #e7e7e7; }
.rsx-role { margin-bottom: 16px; }
.rsx-rh { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.rsx-co { font-size: 14px; font-weight: 700; color: #161616; }
.rsx-per { font-size: 11px; color: #8b8b8b; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rsx-tt { font-size: 12px; color: #565656; margin-bottom: 6px; }
.rsx-role ul { margin: 0; padding-left: 17px; }
.rsx-role li { font-size: 12px; line-height: 1.5; color: #363636; margin-bottom: 4px; }
.rsx-role li strong { color: #1a1a1a; font-weight: 600; }
.rsx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 2px; }
.rsx-card { border: 1px solid #ececec; border-radius: 8px; padding: 11px 13px; }
.rsx-card-t { font-size: 12.5px; font-weight: 700; color: #1a1a1a; }
.rsx-card-m { font-size: 11.5px; color: #6a6a6a; margin-top: 3px; }
.rsx-ops-lead { font-size: 12px; line-height: 1.55; color: #343434; margin: 0 0 11px; }
.rsx-ops-lead a.mm-console { color: #c26a14; text-decoration: none; cursor: pointer; border-bottom: 1px solid rgba(194,106,20,0.42); }
.rsx-ops-lead a.mm-console:hover { border-bottom-color: #c26a14; }
.rsx-ops { margin: 0; padding-left: 17px; }
.rsx-ops li { font-size: 12px; line-height: 1.5; color: #363636; margin-bottom: 5px; }
.rsx-ops li strong { color: #1a1a1a; font-weight: 600; }
.rsx-foot { margin-top: 20px; display: flex; gap: 16px; flex-wrap: wrap; }
.rsx-foot a { font-size: 11px; font-weight: 600; color: #c26a14; text-decoration: none; }
.rsx-foot a:hover { text-decoration: underline; }
.pg-page a.mm-tvl { color: #c26a14; text-decoration: none; cursor: pointer; border-bottom: 1px solid rgba(194,106,20,0.42); }
.pg-page a.mm-tvl:hover { border-bottom-color: #c26a14; }
/* floating word-count pill */
.pg-wc { position: absolute; bottom: 13px; left: 50%; transform: translateX(-50%); z-index: 5;
    background: rgba(72,72,74,0.94); color: #ededef; font-size: 11px; font-weight: 500;
    padding: 5px 13px; border-radius: 8px; box-shadow: 0 2px 9px rgba(0,0,0,0.32); display: inline-flex; align-items: center; }
.pg-wc-cv { font-size: 8px; opacity: 0.7; line-height: 1; transform: scaleY(1.4); }
.titlebar.dark-bar { background: #2b2b2d; border-bottom: 1px solid #161617; box-shadow: none; }
.dark-bar .tb-title { color: #9a9a9e; text-shadow: none; }

/* (the old route-Maps app was removed — Cycling now opens Weather) */

/* ---- Music = iTunes (2010) ---- */
.itunes { width: 720px; background: #d7dade; }
.it-top { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 12px; cursor: default;
    background: linear-gradient(#eceef1, #c5c8cd); border-bottom: 1px solid #9a9da2; box-shadow: inset 0 1px 0 rgba(255,255,255,0.7); }
.it-top .tb-left { flex: 0 0 auto; }
.it-xport { display: flex; align-items: center; border: 1px solid #9c9fa4; border-radius: 14px; overflow: hidden;
    background: linear-gradient(#fcfcfd, #d9dade); box-shadow: 0 1px 1px rgba(0,0,0,0.12); }
.it-xport span, .it-xport button { padding: 4px 8px; font-size: 11px; color: #44464a; border-left: 1px solid #b6b8bc; }
.it-xport span:first-child, .it-xport button:first-child { border-left: 0; } .it-xport .it-play { padding: 4px 11px; font-size: 13px; }
.it-vol { width: 56px; height: 4px; border-radius: 2px; background: #b4b6ba; position: relative; box-shadow: inset 0 1px 1px rgba(0,0,0,0.2); }
.it-vol i { position: absolute; left: 38%; top: 50%; width: 11px; height: 11px; border-radius: 50%; transform: translate(-50%, -50%);
    background: radial-gradient(circle at 40% 30%, #fff, #c4c6ca); box-shadow: 0 1px 2px rgba(0,0,0,0.35); }
.it-lcd { position: relative; flex: 1; min-height: 44px; border: 1px solid #a6a9ae; border-radius: 7px; padding: 4px 22px 8px 8px;
    background: linear-gradient(#fbfcfd, #e7e9ec); box-shadow: inset 0 1px 3px rgba(0,0,0,0.14); text-align: center; overflow: hidden; }
.lcd-t { font-size: 12px; font-weight: 600; color: #2b2c2f; line-height: 1.1; }
.lcd-s { font-size: 10px; color: #7c7e83; line-height: 1.2; }
.lcd-prog { display: flex; align-items: center; gap: 6px; margin-top: 1px; }
.lcd-prog span { font-size: 9px; color: #8a8c91; font-variant-numeric: tabular-nums; }
.lcd-bar { flex: 1; height: 4px; border-radius: 2px; background: #cdd0d4; position: relative; box-shadow: inset 0 1px 1px rgba(0,0,0,0.15); }
.lcd-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 35%; border-radius: 2px; background: linear-gradient(#7db4f4, #3d82e6); }
.lcd-burst { position: absolute; right: 6px; top: 50%; width: 11px; height: 11px; transform: translateY(-50%); border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, #cfd2d6 30%, transparent 32%), conic-gradient(#aab 0 12.5%, transparent 0 25%) ; opacity: 0.6; }
.it-search { display: flex; align-items: center; gap: 4px; width: 130px; height: 21px; padding: 0 9px; border-radius: 11px;
    background: #fff; border: 1px solid #a8aaae; font-size: 11px; color: #a0a2a6; box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); }
.it-views { display: flex; border: 1px solid #9c9fa4; border-radius: 5px; overflow: hidden; }
.it-views span { width: 22px; height: 20px; background: linear-gradient(#fafafb, #dcdde0); border-left: 1px solid #b6b8bc; }
.it-views span:first-child { border-left: 0; } .it-views span.on { background: linear-gradient(#b9bbbf, #a0a2a6); }

.it-main { display: flex; height: 360px; }
.it-side { width: 180px; flex: none; display: flex; flex-direction: column; padding: 8px 0 0; overflow-y: auto;
    background: linear-gradient(#e0e5eb, #cdd4dd); border-right: 1px solid #b3bac3; }
.it-grp { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: #8a93a0; padding: 8px 11px 3px; }
.it-it { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #2b3039; padding: 3px 11px; cursor: default; }
.it-it.sel { background: linear-gradient(#5b9bf0, #2f73db); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 1px 0 rgba(0,0,0,0.1);
    text-shadow: 0 1px 1px rgba(0,0,0,0.25); }
.it-ico { width: 14px; height: 13px; border-radius: 2px; background: #93b4dd; flex: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.5); }
.it-ico.music { background: #8fb6e6; } .it-ico.store { background: #b18fe0; border-radius: 50%; } .it-ico.dj, .it-ico.list { background: #b6c0cc; }
.it-it.sel .it-ico { background: #dceaff; }
.it-art { position: relative; margin: auto 10px 12px; height: 168px; cursor: grab; background: transparent; }

.it-list { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #fff; }
.it-head { display: flex; align-items: center; height: 19px; font-size: 11px; color: #5a5c60; flex: none;
    background: linear-gradient(#f4f5f6, #e2e3e6); border-bottom: 1px solid #c4c5c8; }
.it-head span { padding: 0 8px; border-right: 1px solid #d4d5d8; }
.it-rows { flex: 1; overflow-y: auto; }
.it-row { display: flex; align-items: center; height: 19px; font-size: 12px; color: #1f2024; }
.it-row:nth-child(even) { background: #eef4fb; }
.it-row > span { padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.it-row.playing { background: linear-gradient(#5b9bf0, #2f73db); color: #fff; }
.c-i { width: 26px; flex: none; text-align: center; color: #9a9ca0; }
.it-row.playing .c-i { color: #fff; } .spk { font-size: 9px; }
.c-n { flex: 1; min-width: 0; font-weight: 500; }
.c-t { width: 48px; flex: none; text-align: right; color: #8a8c90; }
.it-row.playing .c-t, .it-row.playing .c-a, .it-row.playing .c-al { color: rgba(255,255,255,0.9); }
.c-a { width: 88px; flex: none; color: #5a5c60; }
.c-al { width: 130px; flex: none; color: #5a5c60; }
.it-bottom { display: flex; align-items: center; justify-content: space-between; height: 22px; padding: 0 10px; font-size: 11px; color: #62646a;
    background: linear-gradient(#dfe0e3, #cacbce); border-top: 1px solid #aeb0b4; }
.it-btns { display: flex; gap: 10px; color: #6a6c72; }
.it-count { font-variant-numeric: tabular-nums; }

/* ---- Flights app ---- */
.flightsapp { width: 430px; background: #1a1d22; }
.fl-body { padding: 18px 22px 22px; color: #e8e8ea; }
.fl-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fl-port { text-align: center; }
.fl-port b { display: block; font-size: 22px; font-weight: 700; color: #fff; letter-spacing: 0.02em; }
.fl-port span { font-size: 11px; color: #8b9bb3; }
.fl-arc { position: relative; flex: 1; height: 40px; }
.fl-arc svg { width: 100%; height: 100%; }
.fl-plane { position: absolute; top: 2px; right: 8%; color: #cfe0ff; font-size: 15px; transform: rotate(12deg); }
.fl-stage { position: relative; margin: 8px 0 6px; height: 196px; border-radius: 12px; overflow: hidden;
    background: radial-gradient(120% 90% at 50% 28%, #2a3542 0%, #161b22 70%); }
.fl-hint { position: absolute; left: 50%; bottom: 9px; transform: translateX(-50%); z-index: 1; pointer-events: none;
    font: 500 10px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.32); }
#plane-canvas { display: none; }
#plane-canvas.mounted { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; cursor: grab; touch-action: none; }
.plane-fallback { position: absolute; inset: 0; margin: auto; max-width: 86%; max-height: 82%; object-fit: contain; z-index: 1;
    filter: drop-shadow(0 10px 22px rgba(0,0,0,0.5)); pointer-events: none; }
/* live Brompton on the Cycling tile (clamped orbit) */
#bike-canvas { display: none; }
#bike-canvas.mounted { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; cursor: grab; touch-action: none; }
.bike-fallback { position: absolute; inset: 0; margin: auto; max-width: 84%; max-height: 84%; object-fit: contain; z-index: 1;
    filter: drop-shadow(0 12px 24px rgba(0,0,0,0.5)); pointer-events: none; }
/* live SO-101 arm on the Side Projects tile (clamped orbit) */
#arm-canvas { display: none; }
#arm-canvas.mounted { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; cursor: grab; touch-action: none; }
.arm-fallback { position: absolute; inset: 0; margin: auto; max-width: 86%; max-height: 86%; object-fit: contain; z-index: 1;
    filter: drop-shadow(0 12px 24px rgba(0,0,0,0.5)); pointer-events: none; }
/* live Lamy Safari on the Writing tile (clamped orbit) */
#pen-canvas { display: none; }
#pen-canvas.mounted { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; cursor: grab; touch-action: none; }
.pen-fallback { position: absolute; inset: 0; margin: auto; max-width: 92%; max-height: 78%; object-fit: contain; z-index: 1;
    filter: drop-shadow(0 12px 24px rgba(0,0,0,0.5)); pointer-events: none; }
.fl-meta { display: flex; justify-content: center; gap: 8px; font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.08em; color: #7d8aa0; margin-bottom: 12px; }
.fl-blurb { font-size: 13px; line-height: 1.55; color: #c7ccd6; }

/* ---- Travels — a macOS Maps "Pinned places" panel over a dark map ---- */
.win.mapsapp { width: 372px; height: 636px; border-radius: 16px; overflow: hidden; color: #fff;
    border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 32px 72px rgba(0,0,0,0.6);
    background: #27312b; font-family: -apple-system, 'SF Pro Display', var(--font-sans); }
.map-bg { position: absolute; inset: 0; z-index: 0; }
.map-svg { width: 100%; height: 100%; display: block; }
.map-bar { position: absolute; top: 0; left: 0; right: 0; height: 38px; z-index: 3; display: flex; align-items: center; padding: 0 14px; }
.map-panel { position: absolute; left: 10px; right: 10px; top: 40px; bottom: 58px; z-index: 2; overflow-y: auto;
    padding: 14px 14px 16px; border-radius: 16px;
    background: rgba(26,30,32,0.62); -webkit-backdrop-filter: blur(26px) saturate(1.3); backdrop-filter: blur(26px) saturate(1.3);
    border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
.map-phead { display: flex; align-items: center; justify-content: space-between; margin: 2px 4px 12px; }
.map-phead h2 { margin: 0; font-weight: 700; font-size: 26px; letter-spacing: 0.01em; }
.map-x { width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer; flex: none;
    background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.85); display: flex; align-items: center; justify-content: center; }
.map-x svg { width: 15px; height: 15px; }
.map-card { background: rgba(255,255,255,0.06); border-radius: 13px; overflow: hidden; border: 1px solid rgba(255,255,255,0.07); }
.mp-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 0; background: none; cursor: pointer;
    text-align: left; color: #fff; border-bottom: 1px solid rgba(255,255,255,0.08); }
.mp-row:last-child { border-bottom: 0; }
.mp-row:hover { background: rgba(255,255,255,0.05); }
.mp-ic { flex: none; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.mp-ic svg { width: 18px; height: 18px; display: block; }
.mp-teal { background: #2bb6c4; } .mp-red { background: #ec4a5e; } .mp-blue { background: #2f7bf6; } .mp-orange { background: #f2922b; }
.mp-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mp-tx b { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-tx small { font-size: 12.5px; color: rgba(255,255,255,0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-flag { margin-left: 7px; font-size: 14.5px; line-height: 1; vertical-align: -0.5px; }   /* country flag trailing the city */
.mp-act { flex: none; display: flex; align-items: center; }
.mp-act svg { width: 21px; height: 21px; display: block; }
.map-shead { font-weight: 700; font-size: 21px; margin: 18px 4px 9px; }

/* ============ device view (the OP-XY as the hobby selector) ============ */

/* ===== Résumé page — a vertical, scroll-down résumé that keeps the home header on top ===== */
.resume-page { overflow-y: auto; }
.resume { width: 100%; max-width: 860px; }
.resume-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--lg); margin-bottom: var(--md); }
.resume-head-right { display: flex; align-items: center; gap: 16px; }
.resume-pdf { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px; background: rgba(255,255,255,0.06); color: #e8e8ee; font: 600 12px/1 var(--font-sans); cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.resume-pdf:hover { background: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.34); }
.resume-back { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); transition: color 0.2s; }
.resume-back svg { fill: none; stroke: currentColor; stroke-width: 2.4; transition: transform 0.2s; }
.resume-back:hover { color: var(--accent-hover); }
.resume-back:hover svg { transform: translateX(-3px); }
.resume-summary { max-width: 60ch; margin-top: var(--lg); font-size: 15px; line-height: 1.7; color: var(--text-primary); }
.resume-summary strong { font-weight: 600; color: #fff; }

.resume-section { margin-top: var(--xl); }
.resume-section-title { display: flex; align-items: baseline; gap: 10px; font-size: 13px; font-weight: 600;
    letter-spacing: 0.02em; color: var(--text-primary); padding-bottom: var(--md); border-bottom: 1px solid var(--line-color); }
.resume-section-title .label { margin: 0; color: var(--accent); }
.r-job { padding: var(--lg) 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.r-job:last-child { border-bottom: 0; }
.r-job-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--lg); }
.r-role { font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 3px; letter-spacing: -0.01em; }
.r-period { flex: none; font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
/* "Live demo →" — same arrow style as the Writing/Résumé links, accent-tinted */
.r-demo-link { margin-left: 0; margin-top: 10px; color: var(--accent); }
.r-demo-link:hover { color: #c3b0ff; }
.r-points { list-style: none; margin: var(--md) 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.r-points li { position: relative; padding-left: 16px; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,0.82); }
.r-points li::before { content: ''; position: absolute; left: 1px; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: 0.8; }
.r-grid { margin-top: var(--lg); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--md); }
.r-card { padding: var(--md) 18px; border: 1px solid var(--line-color); border-radius: 12px; background: rgba(255,255,255,0.02);
    transition: border-color 0.2s, background 0.2s; }
.r-card:hover { border-color: rgba(155,125,255,0.4); background: rgba(155,125,255,0.05); }
.r-card-title { font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 4px; }
.r-card .meta { font-size: 12.5px; color: var(--text-secondary); }
.r-contact { margin-top: var(--lg); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--md); }
.r-contact a { display: flex; flex-direction: column; gap: 5px; padding: var(--md) 18px; border: 1px solid var(--line-color);
    border-radius: 12px; transition: border-color 0.2s, background 0.2s; }
.r-contact a:hover { border-color: rgba(155,125,255,0.4); background: rgba(155,125,255,0.05); }
.r-contact .label { margin: 0; }
.r-contact .data-value { font-size: 13px; color: var(--text-primary); }
.resume-foot { margin: var(--xl) 0 var(--lg); padding-top: var(--lg); border-top: 1px solid var(--line-color); }
@media (max-width: 760px), (max-height: 560px) and (pointer: coarse) {
    .r-grid, .r-contact { grid-template-columns: 1fr; }
    .r-job-head { flex-direction: column; gap: 4px; }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
    
    
}

@media (max-width: 760px), (max-height: 560px) and (pointer: coarse) {
    .ui-layer { gap: var(--xl); }
    header:not(.titlebar):not(.sf-bar):not(.bk-bar) { flex-direction: column; gap: var(--lg); }   /* page/hero header only — NOT the window chrome bars (titlebar/sf-bar/bk-bar are also <header>), which must stay a row */
    .nav-links { justify-content: flex-start; gap: var(--md) var(--lg); }
    
    
    
    
    #object-canvas { display: none; }   /* keep mobile clean (easter egg is desktop-only) */
}

/* ============ mobile: the desk + its apps ============ */
@media (max-width: 760px), (max-height: 560px) and (pointer: coarse) {
    .menubar { display: none; }                  /* no Mac menu bar on a phone */
    /* Messages on a phone: full-bleed native app, iOS two-screen flow (list → chat, chevron back) */
    .win.app.fs.msgsapp { height: 100dvh; border: 0; border-radius: 0; }
    .msgsapp .ms-side { width: 100%; height: 100%; min-height: 0; border-right: 0; }
    .msgsapp .ms-main { display: none; height: 100%; min-height: 0; }
    .msgsapp.chat .ms-side { display: none; }
    .msgsapp.chat .ms-main { display: flex; }
    /* the list actually scrolls (definite height chain + momentum), clear of the status/home bars */
    .msgsapp .ms-convs { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); }
    .msgsapp .ms-side-top { padding-top: env(safe-area-inset-top, 0px); height: auto; min-height: 48px; box-sizing: content-box; }
    .msgsapp .ms-search { height: 38px; margin: 4px 12px 6px; font-size: 16px; border-radius: 10px; }   /* iOS search field */
    /* iOS large title in place of the tiny section label */
    .msgsapp .ms-sec { font: 800 27px/1.1 var(--font-sans); text-transform: none; letter-spacing: -0.025em; color: #fff; padding: 6px 16px 12px; }
    /* iOS-sized conversation rows */
    .msgsapp .ms-conv { margin: 0 6px; padding: 12px 10px; gap: 13px; }
    .msgsapp .ms-ava { width: 52px; height: 52px; }
    .msgsapp .ms-conv-r b { font-size: 16.5px; }
    .msgsapp .ms-conv-r i { font-size: 13px; }
    .msgsapp .ms-conv-cred { font-size: 12.5px; }
    .msgsapp .ms-conv em { font-size: 14.5px; line-height: 1.4; }
    .msgsapp .ms-head b { font-size: 16px; }
    .msgsapp .ms-ava-sm { width: 34px; height: 34px; }
    /* iOS puts the search at the BOTTOM, with a mic in the field + a compose button beside it */
    .msgsapp .ms-searchbar { order: 5; display: flex; align-items: center; gap: 10px; padding: 6px 12px calc(env(safe-area-inset-bottom, 0px) + 10px); }
    .msgsapp .ms-search { flex: 1; margin: 0; height: 40px; }
    .msgsapp .ms-mic { display: block; margin-left: auto; width: 19px; height: 19px; flex: none; opacity: 0.5; fill: none; stroke: currentColor; }
    .msgsapp .ms-pen { display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #0a84ff; color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .msgsapp .ms-pen svg { width: 21px; height: 21px; }
    /* rows: unread dot, indented divider, no desktop blue highlight */
    .msgsapp .ms-convs { gap: 0; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 4px); }
    .msgsapp .ms-conv { position: relative; margin: 0; border-radius: 0; padding: 12px 14px 12px 24px; gap: 12px; }
    .msgsapp .ms-conv.sel { background: none; }
    .msgsapp .ms-conv::before { content: ''; position: absolute; left: 9px; top: 50%; transform: translateY(-50%); width: 9px; height: 9px; border-radius: 50%; background: #0a84ff; }
    .msgsapp .ms-conv.read::before { display: none; }   /* opened = read: the dot goes away */
    .msgsapp .ms-conv::after { content: ''; position: absolute; left: 88px; right: 0; bottom: 0; height: 1px; background: rgba(255,255,255,0.09); }
    .msgsapp .ms-conv:last-child::after { display: none; }
    .msgsapp .ms-thread { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
    .msgsapp .ms-head { padding-top: calc(env(safe-area-inset-top, 0px) + 4px); box-sizing: content-box; }
    .msgsapp .ms-compose { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); }
    .msgsapp .ms-back { display: inline-flex; align-items: center; border: 0; background: none; padding: 0 4px 0 0;
        color: #0a84ff; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .msgsapp .ms-back svg { width: 26px; height: 26px; }
    /* same aurora wallpaper as desktop (just no live backdrop-filter blur) */
    .desktop { -webkit-backdrop-filter: none; backdrop-filter: none; }

    /* mobile front door: the about-me note IS the first screen; scroll down (or tap the red dot) to the objects */
    .shelf-intro { display: block; grid-column: 1 / -1;
        margin: calc(-1 * (env(safe-area-inset-top, 12px) + 14px)) -14px 6px; }   /* full-bleed: escape the shelf's top + side padding */
    .si-note { min-height: 100dvh; background: #1c1c1e; display: flex; flex-direction: column;
        padding: calc(env(safe-area-inset-top, 12px) + 12px) 20px 16px; }
    .si-bar { display: flex; gap: 8px; margin-bottom: 12px; }
    .si-dot { width: 13px; height: 13px; border-radius: 50%; border: 0; padding: 0; }
    .si-red { background: #ff5f57; cursor: pointer; }
    .si-amber { background: #febc2e; }
    .si-green { background: #28c840; }
    .si-date { text-align: center; font: 400 11.5px/1 var(--font-sans); color: #76767c; margin-bottom: 12px; }
    .si-title { font: 700 22px/1.1 var(--font-sans); color: #fff; letter-spacing: -0.01em; margin: 0 0 10px; }
    .si-body p { font: 400 14.5px/1.55 var(--font-sans); color: #d7d7db; margin: 0 0 10px; }
    @media (max-height: 700px) { .si-body p { font-size: 13.5px; margin-bottom: 8px; } .si-title { font-size: 20px; } }
    .si-body a { color: #6ea8ff; text-decoration: none; }
    .si-body b { color: #fff; font-weight: 600; }
    .si-body .nt-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 8px; }
    .si-body .nt-links a { white-space: nowrap; }
    .si-down { margin-top: auto; align-self: center; display: inline-flex; align-items: center; gap: 7px;
        padding: 14px 8px 2px; border: 0; background: none; cursor: pointer;
        font: 600 11px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
    .si-down svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
        animation: sidown 1.6s ease-in-out infinite; }
    @keyframes sidown { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
    /* iPad-mini-class portrait (wide AND tall phone layout): a full-height note is mostly black void there.
       Cap it so the widget peeks from below, center the text between the bar and the chevron, keep lines readable. */
    @media (min-width: 560px) and (min-height: 900px) {
        .si-note { min-height: min(100dvh, 880px); }
        .si-title { font-size: 26px; }
        .si-body p { font-size: 16px; max-width: 62ch; }
    }
    /* the desk: a compact 2-column grid of tappable object cards (static images, no live 3D) */
    .shelf { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; align-content: start; pointer-events: auto;
        padding: calc(env(safe-area-inset-top, 12px) + 14px) 14px calc(env(safe-area-inset-bottom, 0px) + 36px);
        overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
    
    
    
    .obj { position: static; transform: none; width: 100%; min-height: 168px; padding: 16px 10px 15px;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        background: none; border: 0; border-radius: 0; }   /* objects float on the desk, no card frame */
    .obj:active { opacity: 0.6; }
    .obj-travels:hover .bpass-mini { box-shadow: none; }   /* touch: no sticky-hover shadow box on the boarding pass */
    .obj-inner { gap: 0; width: 100%; }   /* keep the gentle float on mobile too (reduced-motion still disables it globally) */
    .obj-media { height: 108px; display: flex; align-items: center; justify-content: center; }
    .obj-shadow { display: none; }
    .mw { position: static; width: auto; grid-column: 1 / -1; margin: 0 0 6px; padding: 0; opacity: 1; transform: none; }
    /* both case-study cards sit in the scroll flow; the swipe carousel is desktop-only */
    .mw-stack { display: flex; flex-direction: column; gap: 11px; background: none; box-shadow: none; border-radius: 0; overflow: visible; }
    .mw-stack:hover { transform: none; box-shadow: none; }
    .mw-face, .mw-face.sel { display: flex; animation: none; border-radius: 20px;
        background: linear-gradient(150deg, #191b1f, #101216);
        box-shadow: 0 16px 40px rgba(0,0,0,0.42), inset 0 0 0 1px rgba(255,255,255,0.06); }
    .mw-nav { display: none; }
    /* Messages preview card: a native-feeling widget in the scroll flow, tap to open the full app */
    .msg-card { display: flex; flex-direction: column; grid-column: 1 / -1; margin: 0 0 6px; padding: 15px 15px 12px;
        text-align: left; background: rgba(28,28,30,0.72); border: 0.5px solid rgba(255,255,255,0.10); border-radius: 20px;
        -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 12px 34px rgba(0,0,0,0.34);
        cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
    .msg-card:active { opacity: 0.72; }
    .mc-top { display: flex; align-items: center; gap: 11px; margin-bottom: 4px; }
    .mc-ic { flex: none; width: 34px; height: 34px; }
    .mc-ic svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 2px 5px rgba(0,0,0,0.3)); }
    .mc-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .mc-tt b { font: 700 16px/1.1 var(--font-sans); color: #fff; }
    .mc-tt i { font: 400 12.5px/1.2 var(--font-sans); color: rgba(255,255,255,0.5); font-style: normal; }
    .mc-badge { flex: none; min-width: 22px; height: 22px; padding: 0 7px; box-sizing: border-box; border-radius: 11px;
        background: #0a84ff; color: #fff; font: 700 12px/22px var(--font-sans); text-align: center; }
    .mc-rows { display: flex; flex-direction: column; }
    .mc-row { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-top: 0.5px solid rgba(255,255,255,0.08); }
    .mc-row:first-child { border-top: 0; }
    .mc-av { flex: none; width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: #3a3a3c; }
    .mc-rt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .mc-nm { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
    .mc-nm b { flex: none; font: 600 14px/1.2 var(--font-sans); color: #f2f2f7; }
    .mc-nm em { flex: 1; min-width: 0; font: 500 11.5px/1.2 var(--font-sans); font-style: normal; color: rgba(255,255,255,0.44); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mc-rt i { font: 400 13px/1.35 var(--font-sans); color: rgba(255,255,255,0.62); font-style: normal;
        display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
    .mc-cta { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 4px; padding-top: 11px;
        border-top: 0.5px solid rgba(255,255,255,0.08); font: 600 13.5px/1 var(--font-sans); color: #0a84ff; }
    .mc-cta em { font-style: normal; }
    .mw-val { font-size: 28px; }
    .obj-hit { display: none; }
    .obj-stage { width: 150px; height: 106px; }
    .obj-still { max-width: 100%; max-height: 104px; object-fit: contain; filter: drop-shadow(0 8px 18px rgba(0,0,0,0.3)); transition: opacity 0.45s ease; }   /* soft, diffuse: a dense object (folded bike) no longer casts a boxy silhouette shadow */
    .obj.live3d .obj-still { opacity: 0; }   /* fade the static image out once the live 3D mounts on top */
    .obj-stage canvas { pointer-events: none; }   /* mobile: 3D renders + auto-rotates but never captures touch, so swipe-scroll and tap-to-open stay smooth (no drag-orbit here) */
    .obj-travels .bpass-mini { width: 72px; height: 92px; }
    .obj-notes .obj-icon svg { width: 60px; height: 60px; }
    .obj-label { font-size: 13px; margin-top: 12px; }
    .obj-label small { font-size: 9px; margin-top: 4px; letter-spacing: 0.08em; }

    /* the apps: open EDGE-TO-EDGE, full-screen like a native phone app (not a floating sheet) */
    .win.app.fs { position: fixed; top: 0; left: 0; right: 0; width: auto; height: 100vh; height: 100dvh;
        min-width: 0; min-height: 0; max-width: none; max-height: none; border: 0; border-radius: 0; box-shadow: none; overflow: hidden;
        display: flex; flex-direction: column;
        transform: translateY(36px); transition: opacity 0.24s ease, transform 0.32s cubic-bezier(.2,.85,.25,1); }
    .win.app.fs.in { transform: none; }
    .win.app.fs.out { transform: translateY(36px); opacity: 0; }
    /* the scrollable body fills the screen; chrome bars stay pinned */
    .win.app.fs > .titlebar, .win.app.fs > .sf-bar, .win.app.fs > .bk-bar, .win.app.fs > .pg-tools, .win.app.fs > .it-top, .win.app.fs > .as-side { flex: none; }
    .win.app.fs.notesapp { display: flex; flex-direction: column; }
    .win.app.fs .notes-body, .win.app.fs .it-main { flex: 1 1 auto; max-height: none; min-height: 0; height: auto; }
    .win.app.fs .notes-content, .win.app.fs .notes-list { min-width: 0; }
    /* Safari toolbar is too busy for a phone: keep just [close] + the address pill, in one row */
    .safariapp .sf-bar { height: 50px; padding: 0 11px; justify-content: flex-start; }
    .safariapp .sf-nav, .safariapp .sf-act { display: none; }
    .safariapp .sf-bar .tb-left { flex: 0 0 auto; width: auto; }
    .safariapp .sf-url { position: static !important; transform: none !important; left: auto; width: auto;
        flex: 1 1 auto; min-width: 0; max-width: none; margin: 0 0 0 10px; }
    /* touch-friendly window buttons */
    .traffic { gap: 12px; }
    .traffic .light { width: 14px; height: 14px; }
    .traffic .light::after { line-height: 14px; }
    .light.close::before { content: ''; position: absolute; inset: -14px -8px -14px -14px; }   /* enlarge the close tap target */
    .notesapp { width: 92vw; }
    .notes-body { height: auto; max-height: 74vh; }
    .notes-list { display: none; }                /* phone: open the note full-width and scroll, like reading it on desktop */
    .notes-content { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 20px 22px; }
    .itunes { width: 92vw; }
    .it-top { height: auto; flex-wrap: wrap; gap: 8px; padding: 8px; }
    .it-lcd { order: 5; width: 100%; }
    .it-main { height: auto; }
    .it-side { display: none; }                 /* hide the sidebar; show the tracks full-width */
    .it-list { width: 100%; }
    .it-rows { max-height: 56vh; }
    .flightsapp { width: 92vw; }
    
    
    .win.mapsapp { width: 92vw; height: 84vh; }
    
    .win.weatherapp { width: 94vw; height: 86vh; }   /* phones: the iOS Weather list, full height */
    .obj-notes { display: none; }               /* the about-me note is now the front-door intro, so drop the separate tile */
    .notesapp { display: block; width: 92vw; height: auto; }
    .win-resize { display: none; }              /* no corner-resize on touch */

}

/* ===== Side Projects → a realistic macOS App Store (dark) ===== */
.appstore { width: 762px; height: 560px; display: flex; background: #232326; color: #e9e9ec; }
.as-side { flex: none; width: 210px; background: #1b1b1d; border-right: 1px solid rgba(255,255,255,0.07);
    display: flex; flex-direction: column; padding: 0 12px 12px; }
.as-side .tb-left { height: 38px; display: flex; align-items: center; flex: none; }   /* traffic lights live here */
.as-search { display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 9px; margin: 0 0 14px;
    background: rgba(255,255,255,0.08); border-radius: 7px; color: #8e8e94; font: 400 13px/1 var(--font-sans); }
.as-search svg { width: 13px; height: 13px; fill: none; stroke: #8e8e94; stroke-width: 2; }
.as-nav { display: flex; flex-direction: column; gap: 2px; }
.as-nav-i { display: flex; align-items: center; gap: 10px; height: 31px; padding: 0 8px; border: 0; background: none;
    border-radius: 7px; font: 500 13.5px/1 var(--font-sans); color: #e9e9ec; cursor: pointer; text-align: left; }
.as-nav-i:hover { background: rgba(255,255,255,0.06); }
.as-nav-i.sel { background: rgba(255,255,255,0.12); }
.as-nav-ic { flex: none; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; }
.as-nav-ic svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.as-blue { background: #1f8fff; } .as-pink { background: #ff2d76; } .as-orange { background: #ff8a00; }
.as-teal { background: #19c3b2; } .as-indigo { background: #5a6cff; } .as-gray { background: #8a8a8f; } .as-purple { background: #a64bff; }
.as-acct { margin-top: auto; display: flex; align-items: center; gap: 9px; padding-top: 12px; }
.as-acct-av { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
    background: linear-gradient(160deg, #b9a3ff, #7d5cf0); color: #fff; font: 700 13px/1 var(--font-sans); }
.as-acct-tx b { display: block; font: 600 12.5px/1.2 var(--font-sans); color: #e9e9ec; }
.as-acct-tx small { font: 400 11px/1.2 var(--font-sans); color: #8e8e94; }
.as-main { flex: 1; overflow-y: auto; padding: 22px 26px 28px; }
/* ---- Discover (home) ---- */
.as-eyebrow { font: 600 12px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: #8e8e94; margin-bottom: 13px; }
.as-hero { position: relative; border-radius: 16px; overflow: hidden; padding: 22px 24px; min-height: 210px;
    display: flex; flex-direction: column; box-shadow: 0 12px 30px rgba(0,0,0,0.3); }
.as-hero-near { background: radial-gradient(130% 130% at 82% 10%, #0f5b4c 0%, #0b211d 48%, #07070b 100%); color: #fff; }
.as-hero-arm { background: radial-gradient(130% 130% at 80% 12%, #4a515f, #2a2e38 60%, #1a1d24); color: #fff; }
.as-hero-eyebrow { font: 700 11px/1 var(--font-mono); letter-spacing: 0.1em; color: rgba(255,255,255,0.66); }
.as-hero-title { margin: 9px 0 8px; font: 800 27px/1.04 var(--font-sans); letter-spacing: -0.02em; }
.as-hero-sub { margin: 0; max-width: 94%; font: 400 14px/1.5 var(--font-sans); color: rgba(255,255,255,0.82); }
.as-hero-foot { margin-top: auto; padding-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.as-app { display: flex; align-items: center; gap: 11px; min-width: 0; }
.as-app-tx b { display: block; font: 600 14px/1.2 var(--font-sans); }
.as-app-tx small { font: 400 12px/1.2 var(--font-sans); color: rgba(255,255,255,0.66); }
.as-ic { flex: none; width: 46px; height: 46px; border-radius: 11px; display: grid; place-items: center; overflow: hidden;
    box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.12), 0 2px 7px rgba(0,0,0,0.35); }
.as-ic svg, .as-ic img { display: block; width: 100%; height: 100%; }
.as-ic-near { background: radial-gradient(120% 120% at 50% 24%, #14241d, #050a08); }
.as-ic-arm { background: linear-gradient(160deg, #eef1f5, #c8cfd9); }
.as-ic-arm img { object-fit: contain; padding: 4px; }
.as-ic-site { overflow: hidden; }
.as-ic-site img { width: 100%; height: 100%; object-fit: cover; display: block; }
.as-get { flex: none; padding: 7px 22px; border-radius: 999px; background: rgba(255,255,255,0.18); color: #fff;
    font: 700 13px/1 var(--font-sans); letter-spacing: 0.02em; text-decoration: none; -webkit-backdrop-filter: blur(8px); transition: background 0.15s; }
.as-get:hover { background: rgba(255,255,255,0.3); }
.as-get-blue { background: #0a84ff; color: #fff; padding: 7px 28px; }
.as-get-blue:hover { background: #2c93ff; }
.as-sec { margin: 26px 0 6px; font: 700 19px/1 var(--font-sans); letter-spacing: -0.01em; color: #f2f2f4; }
.as-row { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid rgba(255,255,255,0.08); }
.as-row .as-ic { width: 56px; height: 56px; border-radius: 13px; }
.as-row-tx { flex: 1; min-width: 0; }
.as-row-tx b { display: block; font: 600 15px/1.25 var(--font-sans); color: #f2f2f4; }
.as-row-tx small { font: 400 12.5px/1.3 var(--font-sans); color: #8e8e94; }
.as-get-row { background: rgba(255,255,255,0.12); color: #2997ff; }
.as-get-row:hover { background: rgba(255,255,255,0.2); }
.as-hero[data-open], .as-row[data-open] { cursor: pointer; }
.as-hero[data-open]:hover { filter: brightness(1.07); }
.as-row[data-open]:hover { background: rgba(255,255,255,0.03); }

/* ---- product detail page ---- */
.as-d-top { display: flex; justify-content: space-between; margin: -4px -2px 16px; }
.as-circ { width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.1); color: #e9e9ec; cursor: pointer; display: grid; place-items: center; }
.as-circ:hover { background: rgba(255,255,255,0.18); }
.as-circ svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.as-prod-head { display: flex; gap: 20px; align-items: flex-start; }
.as-prodic .as-ic { width: 104px; height: 104px; border-radius: 23px; }
.as-prod-id { flex: 1; min-width: 0; padding-top: 4px; }
.as-prod-id h2 { margin: 0 0 4px; font: 700 23px/1.14 var(--font-sans); letter-spacing: -0.015em; color: #fff; }
.as-prod-sub2 { font: 400 14px/1.35 var(--font-sans); color: #9a9aa0; margin-bottom: 18px; }
.as-prod-cta { display: flex; align-items: center; gap: 13px; }
.as-iap { font: 400 11px/1.3 var(--font-sans); color: #8e8e94; max-width: 92px; }
.as-meta { display: flex; margin: 22px 0 6px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,0.09); border-bottom: 1px solid rgba(255,255,255,0.09); overflow-x: auto; }
.as-mcell { flex: 1; min-width: 80px; padding: 1px 14px; text-align: center; }
.as-mcell-d { border-left: 1px solid rgba(255,255,255,0.09); }
.as-mlabel { display: block; font: 600 9.5px/1.3 var(--font-mono); letter-spacing: 0.07em; text-transform: uppercase; color: #8a8a90; margin-bottom: 6px; }
.as-mcell b { display: block; font: 700 17px/1.1 var(--font-sans); color: #cfcfd4; }
.as-mcell > i { font: 600 9.5px/1.3 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: #8a8a90; font-style: normal; }
.as-mc-ic { display: inline-flex; }
.as-mc-ic svg { width: 21px; height: 21px; fill: none; stroke: #b6b6bc; stroke-width: 1.6; }
.as-stars { display: inline-flex; gap: 1px; }
.as-star { width: 11px; height: 11px; fill: #b6b6bc; }
.as-star.off { fill: rgba(255,255,255,0.22); }
.as-shots { display: flex; gap: 13px; margin: 22px 0 14px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.as-shot { flex: none; width: 304px; height: 190px; border-radius: 13px; overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.08); }
.as-shot-real { background: #0c0c0c; }
.as-shot-real img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.as-shot-arm { background: radial-gradient(circle at 50% 36%, #2a2f3a, #14171d); display: grid; place-items: center; }
.as-shot-arm img { width: 86%; height: 86%; object-fit: contain; }

.as-plat { display: flex; align-items: center; gap: 7px; font: 600 13px/1 var(--font-sans); color: #9a9aa0; margin-bottom: 18px; }
.as-plat svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.as-desc { display: flex; gap: 24px; align-items: flex-start; }
.as-desc-tx { flex: 1; font: 400 13.5px/1.64 var(--font-sans); color: #c4c4ca; }
.as-desc-tx p { margin: 0 0 13px; }
.as-d-side { flex: none; width: 120px; display: flex; flex-direction: column; gap: 11px; text-align: right; padding-top: 2px; }
.as-d-side a, .as-support { font: 500 13px/1.3 var(--font-sans); color: #2997ff; text-decoration: none; cursor: default; }
.as-d-side a:hover { text-decoration: underline; cursor: pointer; }
.as-info { margin-top: 20px; }
.as-info h3 { margin: 8px 0 2px; font: 700 17px/1 var(--font-sans); color: #f2f2f4; }
.as-inforow { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,0.08); text-decoration: none; }
.as-inforow span { font: 400 13px/1.4 var(--font-sans); color: #8e8e94; flex: none; }
.as-inforow b { font: 400 13px/1.4 var(--font-sans); color: #c4c4ca; text-align: right; }
.as-infolink b { color: #2997ff; }

/* ===== Writing → Apple Books (a warm-paper reader; pulls the essay from writing.html) ===== */
.booksapp { width: 560px; height: 600px; background: #f6f1e6; display: flex; flex-direction: column; color: #2b2722; }
.bk-bar { flex: none; height: 44px; display: flex; align-items: center; gap: 12px; padding: 0 14px; position: relative;
    background: #efe8d8; border-bottom: 1px solid rgba(0,0,0,0.08); }
.bk-tool { border: 0; background: none; cursor: pointer; color: #908775; display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 26px; padding: 0; border-radius: 6px; }
.bk-tool:hover { background: rgba(0,0,0,0.06); color: #5a5346; }
.bk-tool svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bk-aa { font: 700 16px/1 Georgia, 'Times New Roman', serif; width: auto; padding: 0 4px; }
.bk-title { position: absolute; left: 50%; transform: translateX(-50%); font: 600 13px/1 var(--font-sans); color: #6b6354;
    max-width: 44%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-right { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.bk-stage { flex: 1; overflow-y: auto; display: flex; justify-content: center; }
.bk-page { width: 100%; max-width: 540px; padding: 40px 48px 64px; }
.bk-load { color: #9a9081; font: 400 16px/1.6 Georgia, serif; padding: 24px 0; }
.bk-err { color: #5a5346; font: 400 16px/1.6 Georgia, serif; }
.bk-err a { color: #c2622f; }
/* lay the fetched essay out as a book page */
.bk-page .post-meta { display: none; }
.bk-page .post-head { margin: 0; }
.bk-page .post-title { font: 700 30px/1.18 'New York', 'Iowan Old Style', Georgia, serif; color: #211e18; letter-spacing: 0; margin: 0 0 12px; }
.bk-page .post-sub { font: italic 400 16.5px/1.5 'New York', Georgia, serif; color: #6f6757; max-width: none; }
.bk-page .post-body { margin-top: 28px; max-width: none; }
.bk-page .post-body p { font: 400 18px/1.66 'New York', 'Iowan Old Style', Georgia, serif; color: #2b2620; margin: 0 0 18px; }
.bk-page .post-body p.lede { font-size: 19px; line-height: 1.6; }
.bk-page .post-body em { color: #2b2620; font-style: italic; }
.bk-page .post-body h2 { font: 700 21px/1.32 'New York', Georgia, serif; color: #211e18; margin: 36px 0 14px; }
.bk-page .post-body > p:first-of-type::first-letter { font-size: 3.1em; line-height: 0.78; float: left; font-weight: 700; margin: 7px 9px 0 0; color: #211e18; }
.bk-foot { flex: none; height: 38px; display: flex; align-items: center; justify-content: center;
    background: #efe8d8; border-top: 1px solid rgba(0,0,0,0.07); position: relative; }
.bk-prog { font: 500 11px/1 var(--font-sans); color: #9a9081; }
.bk-line { position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: rgba(0,0,0,0.06); }
.bk-line i { display: block; height: 100%; width: 0; background: #c2622f; transition: width 0.1s linear; }
.bk-left { display: flex; align-items: center; }
.bk-lib-btn { width: auto; gap: 1px; padding: 0 8px 0 2px; font: 600 13px/1 var(--font-sans); color: #c2622f; }
.bk-lib-btn svg { width: 16px; height: 16px; stroke: currentColor; }
.bk-lib-btn:hover { background: rgba(194,98,47,0.10); color: #a8501f; }
/* Library (cover shelf) */
.bk-stage.is-library { display: block; }
.bk-library { padding: 26px 32px 42px; }
.bk-lib-h { font: 700 25px/1 'New York', Georgia, serif; color: #211e18; margin: 4px 0 22px; }
.bk-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 24px 22px; }
.bk-cover { border: 0; background: none; cursor: pointer; padding: 0; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.bk-cv { aspect-ratio: 5 / 7; border-radius: 7px; padding: 14px 13px; display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 7px 16px rgba(50,35,18,0.26), inset 0 0 0 0.5px rgba(255,255,255,0.14); transition: transform 0.16s ease, box-shadow 0.16s ease; }
.bk-cover:hover .bk-cv { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(50,35,18,0.34), inset 0 0 0 0.5px rgba(255,255,255,0.14); }
.bk-cv-meta { font: 700 8px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.62); }
.bk-cv-title { margin-top: auto; font: 700 15.5px/1.18 'New York', Georgia, serif; color: #fff; }
.bk-cv-cap { font: 500 12px/1.28 var(--font-sans); color: #4a4338; padding: 0 2px; }
.bk-cv-0 { background: linear-gradient(155deg, #46577d, #1d2740); }
.bk-cv-1 { background: linear-gradient(155deg, #7d4646, #3a1d22); }
.bk-cv-2 { background: linear-gradient(155deg, #3f7d63, #1d3a2c); }
.bk-cv-3 { background: linear-gradient(155deg, #654a7d, #2d1d3a); }

/* ===== Safari — latest macOS design; loads the MoarMarket demo ===== */
.safariapp { width: 900px; height: 620px; display: flex; flex-direction: column; background: #fff; }
.sf-bar { flex: none; height: 52px; display: flex; align-items: center; gap: 8px; padding: 0 12px; position: relative;
    background: #e3e3e5; border-bottom: 1px solid rgba(0,0,0,0.1); }
.sf-grp { display: flex; align-items: center; gap: 2px; }
.sf-btn { width: 30px; height: 28px; border: 0; background: none; border-radius: 7px; cursor: pointer; color: #57575b;
    display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.sf-btn:hover { background: rgba(0,0,0,0.07); }
.sf-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sf-off { opacity: 0.34; pointer-events: none; }
.sf-sep { width: 1px; height: 16px; background: rgba(0,0,0,0.14); margin: 0 4px; }
.sf-url { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px;
    width: 42%; min-width: 220px; max-width: 430px; height: 30px; padding: 0 5px 0 11px; background: #f3f3f4; border-radius: 8px;
    box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.07); justify-content: center; }
.sf-lock svg { width: 12px; height: 12px; fill: none; stroke: #8a8a8e; stroke-width: 1.9; }
.sf-host { font: 400 13px/1 var(--font-sans); color: #2b2b2e; }
.sf-rl { border: 0; background: none; cursor: pointer; color: #8a8a8e; width: 22px; height: 22px; padding: 0; border-radius: 5px;
    display: inline-flex; align-items: center; justify-content: center; }
.sf-rl:hover { background: rgba(0,0,0,0.08); }
.sf-rl svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sf-act { margin-left: auto; }
.sf-web { flex: 1; position: relative; background: #fff; overflow: hidden; }
.sf-frame { width: 100%; height: 100%; border: 0; display: block; }
.sf-load { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #fff; }
.sf-logo { width: 84px; height: 84px; border-radius: 19px; animation: sf-logo-pulse 1.5s ease-in-out infinite; }
@keyframes sf-logo-pulse { 0%, 100% { opacity: 0.5; transform: scale(0.97); } 50% { opacity: 1; transform: scale(1); } }

/* ===== Stocks — Apple Stocks look; MoarMarket TVL (real DefiLlama data) ===== */
.stocksapp { width: 440px; height: 600px; background: #000; display: flex; flex-direction: column; color: #fff; transition: width 0.36s cubic-bezier(0.4, 0, 0.2, 1); }
@media (min-height: 820px) and (min-width: 761px) { .stocksapp { height: 680px; } }
.stocksapp.has-side { width: 764px; }
.st-split { flex: 1; display: flex; min-height: 0; position: relative; }
.st-more { position: absolute; left: 0; right: 0; bottom: 0; height: 32px; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.72)); pointer-events: none; z-index: 5; opacity: 1; transition: opacity 0.25s; }
.st-more.off { opacity: 0; }
.st-body { flex: 1; min-width: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 18px 22px 20px; display: flex; flex-direction: column; container-type: inline-size; }
/* zoomed / dragged wide: the 440px layout stops stretching (three stat columns, readable text measure, capped chat) */
@container (min-width: 800px) {
    .st-body .st-stats { grid-template-columns: repeat(3, 1fr); }
    .st-body .st-about-p { max-width: 84ch; }
    .st-body .ag-demo { max-width: 900px; }
}
.st-body > * { flex-shrink: 0; }   /* a scrolling column never compresses its sections (overflow:hidden items collapse to 0 otherwise) */
/* the incident log, fused as a right-hand panel wearing the Console app's own chrome */
.st-side { flex: none; width: 0; overflow: hidden; background: #1d1d1f; border-left: 1px solid #161617; transition: width 0.36s cubic-bezier(0.4, 0, 0.2, 1); }
.stocksapp.has-side .st-side { width: 324px; }
.st-side-in { width: 324px; height: 100%; display: flex; flex-direction: column; overflow: hidden; color: #e6e6ea; opacity: 0; transition: opacity 0.28s 0.06s; }
.stocksapp.has-side .st-side-in { opacity: 1; }
.st-side .cs-tool { flex: none; height: 40px; gap: 7px; padding: 0 10px; }
/* Features | Incidents segmented toggle (present on both logs) */
.st-seg { display: inline-flex; background: #141416; border-radius: 7px; padding: 2px; gap: 2px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05); }
.st-seg-b { border: 0; background: none; color: #a0a0a5; cursor: pointer; height: 24px; padding: 0 13px; border-radius: 5px; font: 600 11.5px/1 var(--font-sans); -webkit-appearance: none; appearance: none; }
.st-seg-b.sel { background: #48484c; color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.35); }
.st-seg-b:not(.sel):hover { color: #e6e6ea; }
.st-side-x { width: 26px; height: 26px; flex: none; border: 0; border-radius: 6px; background: #3a3a3d; color: #d6d6da; cursor: pointer; font-size: 12px; line-height: 1; }
.st-side-x:hover { background: #48484c; color: #fff; }
.st-side .cs-list { flex: 1; overflow-y: auto; }
/* narrow, single-column console rows (mirrors Console's own compact layout) */
.st-side .cs-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 5px; padding: 11px 13px; }
.st-side .cs-type { order: 1; }
.st-side .cs-time { order: 2; }
.st-side .cs-state { order: 3; margin-left: auto; }
.st-side .cs-proc { display: none; }
.st-side .cs-msg { order: 4; flex-basis: 100%; white-space: normal; }
.st-side .cs-detail { padding: 4px 13px 15px; }
.st-side .cs-line { font-size: 12px; line-height: 1.5; margin: 2px 0 11px; max-width: none; }
.st-side .cs-fields { gap: 9px; }
.st-side .cs-f { grid-template-columns: 1fr; gap: 2px; }
.st-side .cs-f dd { max-width: none; font-size: 12px; }
.st-side .cs-meta { margin-top: 11px; font-size: 11px; }
.st-side .cs-foot { flex: none; height: auto; padding: 11px 13px; }
/* feature log: green "shipped" badges, each release expands to its demo video + PM notes */
.st-side .ft-type { background: rgba(48,209,88,0.15); color: #46d968; }
.ft-video { margin: 2px 0 12px; border-radius: 9px; overflow: hidden; background: #000; }
.ft-video video { display: block; width: 100%; max-height: 300px; object-fit: contain; background: #000; }
.ft-noclip { margin: 2px 0 12px; padding: 15px; border: 1px dashed rgba(255,255,255,0.14); border-radius: 9px; text-align: center; font: 500 11px/1.4 var(--font-sans); color: #76767a; }
.ft-hl { margin: 4px 0 0; padding-left: 15px; display: flex; flex-direction: column; gap: 3px; }
.ft-hl li { font: 400 12px/1.42 var(--font-sans); color: #d2d2d6; }
.ft-links { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.ft-link { display: inline-flex; align-items: center; height: 30px; padding: 0 13px; border-radius: 7px; border: 0; cursor: pointer; font: 600 11.5px/1 var(--font-sans); text-decoration: none; }
.ft-link.watch { background: #30d158; color: #06210f; }
.ft-link.watch:hover { background: #46d968; }
.ft-link.demo { background: rgba(255,255,255,0.1); color: #e6e6ea; }
.ft-link.demo:hover { background: rgba(255,255,255,0.16); }
@media (max-width: 760px), (max-height: 560px) and (pointer: coarse) {
    .stocksapp.has-side { width: 100%; }                 /* full-screen app: don't try to widen */
    .st-side { position: absolute; top: 0; right: 0; height: 100%; width: 0; z-index: 6; box-shadow: -14px 0 34px rgba(0,0,0,0.5); }
    .stocksapp.has-side .st-side { width: 100%; }         /* the log slides in over the chart */
    .st-side-in { width: 100%; }
}
.st-head { margin-bottom: 14px; }
.st-name { font: 700 25px/1.12 var(--font-sans); letter-spacing: -0.015em; }
.st-sub { font: 500 13px/1.3 var(--font-sans); color: #8e8e93; margin-top: 4px; }
.st-hero { display: flex; align-items: baseline; gap: 11px; margin-bottom: 14px; }
.st-val { font: 700 33px/1 var(--font-sans); letter-spacing: -0.02em; }
.st-chg { font: 600 14px/1 var(--font-sans); }
.st-chg.up { color: #30d158; }
.st-chg.down { color: #ff453a; }
.st-tabs { display: flex; gap: 3px; }
.st-tab { flex: 1; height: 28px; border: 0; background: none; cursor: pointer; border-radius: 7px;
    font: 600 12.5px/1 var(--font-sans); color: #8e8e93; }
.st-tab:hover { background: rgba(255,255,255,0.06); color: #c7c7cc; }
.st-tab.sel { background: rgba(48,209,88,0.16); color: #30d158; }
.st-chart { position: relative; height: 178px; flex: none; margin: 10px 0 16px; }   /* never flex-shrink: children are absolute, so it would collapse to 0 */
.st-plot { position: absolute; inset: 0; }
.st-svg { width: 100%; height: 100%; display: block; }
/* feature-launch markers mapped onto the curve */
.st-marks { position: absolute; inset: 0; pointer-events: none; }
.st-axis { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; pointer-events: none; }
.st-tick { position: absolute; bottom: 0; font: 600 9.5px/1 var(--font-sans); color: #7c7c80; white-space: nowrap; }
.st-mark { position: absolute; width: 0; height: 0; padding: 0; margin: 0; border: 0; background: none; -webkit-appearance: none; appearance: none; font: inherit; color: inherit; }
.st-dot { position: absolute; left: 0; top: 0; width: 6px; height: 6px; transform: translate(-50%, -50%); border-radius: 50%;
    background: #0a0a0a; border: 1.5px solid #30d158; box-shadow: 0 0 0 2.5px rgba(0,0,0,0.5); pointer-events: auto; cursor: pointer; transition: transform 0.12s; }
.st-mark.key .st-dot { width: 9px; height: 9px; background: #30d158; border-color: #0a0a0a; box-shadow: 0 0 0 2.5px rgba(0,0,0,0.5), 0 0 9px rgba(48,209,88,0.55); }
.st-dot:hover { transform: translate(-50%, -50%) scale(1.45); }
/* incident markers: amber diamonds, distinct from the green feature dots (same hover tooltip) */
.st-mark.inc .st-dot { background: #ff9f0a; border-color: #0a0a0a; border-radius: 1px; width: 7px; height: 7px; transform: translate(-50%, -50%) rotate(45deg); }
.st-mark.inc .st-dot:hover { transform: translate(-50%, -50%) rotate(45deg) scale(1.4); }
/* every marker is clickable: a bigger invisible tap pad, and a soft ping ring on the highlights so it reads as interactive at a glance */
.st-dot::before { content: ''; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%); border-radius: 50%; }
@media (pointer: coarse) { .st-dot::before { width: 28px; height: 28px; } }
.st-dot::after { content: ''; position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; border-radius: 50%;
    border: 1.5px solid rgba(48,209,88,0.7); transform: translate(-50%, -50%); opacity: 0; pointer-events: none; }
.st-mark.key .st-dot::after, .st-mark.inc .st-dot::after { animation: stPing 2.7s var(--pd, 0s) ease-out infinite; }
@media (prefers-reduced-motion: reduce) {
    .st-mark.key .st-dot::after, .st-mark.inc .st-dot::after { animation: none; }
    .ag-tool, .ag-answer.show, .ag-seq.show, .ag-caret { animation: none; }
}
.st-mark.inc .st-dot::after { border-color: rgba(255,159,10,0.78); }
@keyframes stPing { 0% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); } 70%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(3); } }
@media (prefers-reduced-motion: reduce) { .st-dot::after { animation: none !important; } }
.st-legend { display: flex; align-items: center; gap: 14px; margin: 4px 0 12px; font: 600 10.5px/1 var(--font-sans); }
.st-lg { display: inline-flex; align-items: center; gap: 5px; color: #b0b0b5; }
button.st-lg { border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05); border-radius: 999px; padding: 5px 10px; cursor: pointer; font: 600 11px/1 var(--font-sans); -webkit-tap-highlight-color: transparent; }
button.st-lg em { font-style: normal; color: #8e8e93; }
@media (hover: hover) { button.st-lg:hover { color: #fff; border-color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.09); } }
.st-lg i { width: 8px; height: 8px; }
.st-lg.feat i { background: #30d158; border-radius: 50%; }
.st-lg.inc i { background: #ff9f0a; transform: rotate(45deg); }
.st-lg-hint { margin-left: auto; font: 600 9.5px/1 var(--font-sans); color: #6f6f74; white-space: nowrap; }
.st-lg-hint em { font-style: normal; color: #8e8e93; }

.st-cap { position: absolute; right: 1px; bottom: 0; font: 500 9px/1 var(--font-sans); color: #5a5a5e; pointer-events: none; }
.st-tip { position: absolute; z-index: 6; left: 0; top: 0; width: 214px; max-width: 90%; pointer-events: none; opacity: 0; transition: opacity 0.12s;
    background: rgba(30,30,32,0.98); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 8px 10px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.55); display: flex; flex-direction: column; gap: 2px; }
.st-tip.on { opacity: 1; }
.st-tip b { font: 700 12px/1.2 var(--font-sans); color: #fff; }
.st-tip i { font: 600 9.5px/1.2 var(--font-sans); color: #30d158; font-style: normal; }
.st-tip span { font: 400 10.5px/1.34 var(--font-sans); color: #b9b9be; }
.st-tip-go { margin-top: 4px; font: 600 9.5px/1 var(--font-sans); font-style: normal; }
.st-tip-go.inc { color: #ff9f0a; }
.st-tip-go.feat { color: #30d158; }
.st-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,0.09);
    border-radius: 13px; overflow: hidden; margin-top: 16px; }
.st-stat { background: #000; padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; }
.st-stat span { font: 500 12px/1 var(--font-sans); color: #8e8e93; }
.st-stat b { font: 600 16px/1 var(--font-sans); color: #fff; }
/* the "0 Exploits" tile opens the Console incident log */
.st-stat.st-link { -webkit-appearance: none; appearance: none; border: 0; color: inherit; cursor: pointer; text-align: left; transition: background 0.12s; }
.st-stat.st-link:hover { background: #0b1a0e; }
.st-go { font-style: normal; font-weight: 600; font-size: 10.5px; color: #30d158; white-space: nowrap; }
/* "The record": a native Stocks-style About section (no card chrome), tying TVL + features + incidents together */
.st-about { margin-top: 20px; padding-top: 17px; border-top: 1px solid rgba(255,255,255,0.09); }
.st-about-h { margin: 0 0 8px; font: 700 18px/1.2 var(--font-sans); letter-spacing: -0.01em; color: #fff; }
.st-about-p { margin: 0; font: 400 13px/1.55 var(--font-sans); color: #aeaeb2; }
/* Moar Agent: a scripted replay of a real internal session (recreated interface) */
.st-agent { margin-top: 20px; padding-top: 17px; border-top: 1px solid rgba(255,255,255,0.09); }
.ag-demo { margin: 4px 0 12px; border: 1px solid rgba(255,255,255,0.09); border-radius: 12px; background: #0e0f12; overflow: hidden; }
.ag-bar { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.ag-dot { width: 7px; height: 7px; border-radius: 50%; background: #00e08a; box-shadow: 0 0 6px rgba(0,224,138,0.8); }
.ag-bar b { font: 700 12px/1 var(--font-sans); color: #f2f2f4; }
.ag-bar i { font: 500 10px/1 var(--font-sans); font-style: normal; color: #8e8e93; }
.ag-replay { margin-left: auto; border: 1px solid rgba(255,255,255,0.14); background: none; color: #b9b9bf; font: 600 10.5px/1 var(--font-sans); padding: 5px 9px; border-radius: 7px; cursor: pointer; }
.ag-replay:hover { color: #fff; border-color: rgba(255,255,255,0.3); }
.ag-scroll { padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.ag-msg { max-width: 92%; padding: 9px 11px; border-radius: 11px; font: 400 12px/1.5 var(--font-sans); }
.ag-bot { background: #1b1c21; color: #d6d6da; align-self: flex-start; border-bottom-left-radius: 4px; }
.ag-user { position: relative; background: #00e08a; color: #04140c; align-self: flex-end; border-bottom-right-radius: 4px; font-weight: 600; opacity: 0; transition: opacity 0.2s; }
.ag-ghost { visibility: hidden; }   /* full question, invisible: locks the bubble size so typing never reflows */
.ag-live { position: absolute; inset: 9px 11px; }
.ag-user.show { opacity: 1; }
.ag-caret { display: inline-block; width: 7px; height: 12px; margin-left: 2px; background: rgba(4,20,12,0.7); vertical-align: -2px; animation: agblink 0.85s steps(1) infinite; }
.ag-done .ag-caret { display: none; }
@keyframes agblink { 50% { opacity: 0; } }
.ag-think { align-self: center; font: 500 10px/1 var(--font-mono); letter-spacing: 0.06em; color: #8e8e93; border: 1px dashed rgba(255,255,255,0.16); border-radius: 6px; padding: 5px 9px; display: none; }
.ag-think.show { display: block; }
.ag-tools { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.ag-tool { font: 500 9.5px/1.5 var(--font-mono); color: #9a9aa1; border: 1px dashed rgba(255,255,255,0.14); border-radius: 6px; padding: 4px 9px; text-align: center; animation: agin 0.3s ease; }
@keyframes agin { from { opacity: 0; transform: translateY(4px); } }
.ag-answer { display: none; }
.ag-answer b { color: #f2f2f4; }
.ag-answer ol { margin: 8px 0; padding-left: 17px; display: flex; flex-direction: column; gap: 6px; }
.ag-answer.show { display: block; animation: agin 0.4s ease; }
.ag-answer .ag-seq { display: none; }
.ag-answer .ag-seq.show { display: block; animation: agin 0.3s ease; }
.ag-answer li.ag-seq.show { display: list-item; }
.st-int { margin-top: 15px; }
.st-int-l { display: block; font: 800 9.5px/1 var(--font-mono); letter-spacing: 0.07em; text-transform: uppercase; color: #8e8e93; margin-bottom: 9px; }
.st-int-row { display: flex; flex-wrap: wrap; gap: 8px; }
.st-ic { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 7px; border-radius: 10px; background: rgba(255,255,255,0.07); }
.st-ic img { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; }
.st-ic-tx { display: flex; flex-direction: column; gap: 2px; }
.st-ic-tx b { font: 600 12px/1 var(--font-sans); color: #e8e8ea; }
.st-ic-tx i { font: 500 9.5px/1 var(--font-sans); font-style: normal; color: #8e8e93; }
.st-about-links { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 13px; }
.st-about-link { border: 0; background: none; padding: 0; cursor: pointer; font: 600 12.5px/1 var(--font-sans); -webkit-appearance: none; appearance: none; }
.st-about-link.feat { color: #30d158; }
.st-about-link.inc { color: #ff9f0a; }
.st-about-link:hover { text-decoration: underline; }
a.st-about-link { text-decoration: none; }
a.st-about-link:hover { text-decoration: underline; }
/* the operator's liquidity-flow terminal: a dedicated proof-of-work card under The record */
.st-terminal { margin-top: 18px; padding-top: 17px; border-top: 1px solid rgba(255,255,255,0.09); }
.st-term-kicker { display: inline-flex; align-items: center; gap: 6px; font: 700 9px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: #46d968; margin-bottom: 9px; }
.st-term-kicker::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #30d158; box-shadow: 0 0 6px rgba(48,209,88,0.7); }
.st-term-stage { margin: 13px 0 4px; border-radius: 11px; overflow: hidden; background: #000; }
.st-term-stage video { display: block; width: 100%; max-height: 340px; object-fit: contain; background: #000; }
/* ===== Governance — the Hubble Exchange DAO record, modelled on Apple News (light editorial feed) ===== */
.newsapp { width: 724px; height: 646px; min-width: 460px; min-height: 460px; display: flex; flex-direction: column; overflow: hidden;
    background: #fff; color: #1a1a1c; border: 1px solid rgba(0,0,0,0.16); border-radius: 10px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.05) inset; }
.newsapp .titlebar { flex: none; height: 40px; background: #fbfbfb; border-bottom: 1px solid #e8e8e8; box-shadow: none; }
.newsapp .tb-title { color: #6a6a6e; text-shadow: none; }
.nw-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 26px 30px; -webkit-overflow-scrolling: touch; }
/* masthead */
.nw-mast { border-bottom: 1px solid #ececec; padding-bottom: 17px; }
.nw-h1 { margin: 0; font: 800 34px/1.05 var(--font-sans); letter-spacing: -0.025em; color: #0f0f11; }
.nw-lede { margin: 11px 0 0; max-width: 64ch; font: 400 14px/1.55 var(--font-sans); color: #55555a; }
.nw-stats { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 16px; }
.nw-stat { font: 600 11px/1.5 var(--font-sans); color: #86868b; }
.nw-stat b { display: block; font: 800 22px/1.1 var(--font-sans); letter-spacing: -0.02em; color: #0f0f11; }
/* topic pills (Apple News "Following" style) */
.nw-topics { display: flex; flex-wrap: wrap; gap: 8px; margin: 17px 0 2px; }
.nw-topic { height: 30px; padding: 0 14px; border: 1px solid #e4e4e6; border-radius: 15px; background: #fff; color: #333; cursor: pointer; font: 600 12.5px/1 var(--font-sans); transition: background 0.15s, border-color 0.15s; }
@media (hover: hover) { .nw-topic:hover { background: #f4f4f5; } }
.nw-topic.sel { background: #111; border-color: #111; color: #fff; }
/* section kickers */
.nw-kicker { display: flex; align-items: center; gap: 8px; margin: 26px 0 15px; font: 800 15px/1 var(--font-sans); letter-spacing: -0.01em; color: #0f0f11; }
.nw-kicker::before { content: ''; width: 4px; height: 15px; border-radius: 2px; background: #fa2846; }
/* shared byline + meta */
.nw-card { display: block; text-decoration: none; color: inherit; }
.nw-byline { display: flex; align-items: center; gap: 7px; font: 800 11px/1 var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; color: #fa2846; }
.nw-byline em { font-style: normal; color: #c9c9cd; font-weight: 600; }
.nw-sec { font-style: normal; font-weight: 700; color: #86868b; }
.nw-meta { display: block; margin-top: 9px; font: 500 12px/1 var(--font-sans); color: #86868b; }
.nw-pass { font-style: normal; color: #1a8f43; font-weight: 700; margin-left: 9px; }
/* synthesised editorial covers/thumbs (no stock photos) */
.nw-cover { position: relative; display: block; border-radius: 12px; overflow: hidden; }
.nw-cover .nw-cn { position: absolute; left: 18px; bottom: 10px; font: 800 44px/0.85 var(--font-sans); letter-spacing: -0.02em; color: rgba(255,255,255,0.96); }
.nw-cover .nw-ct { position: absolute; right: 15px; top: 14px; font: 800 10px/1 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.92); }
/* lead (hero) story */
.nw-lead .nw-cover { height: 190px; }
.nw-lead-body { padding-top: 13px; }
.nw-lead-hl { display: block; margin-top: 9px; font: 800 25px/1.16 var(--font-sans); letter-spacing: -0.02em; color: #0f0f11; }
.nw-dek { display: block; margin-top: 7px; font: 400 14.5px/1.5 var(--font-sans); color: #55555a; }
@media (hover: hover) { .nw-lead:hover .nw-lead-hl { color: #fa2846; } }   /* real pointers only — on touch, :hover sticks after a tap and the headline stays red */
/* the secondary featured, side by side (2 or 3 fit the row cleanly) */
.nw-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 20px; margin-top: 26px; }
.nw-duo-card .nw-cover { height: 116px; }
.nw-duo-card .nw-byline { margin-top: 12px; }
.nw-duo-body { display: block; min-width: 0; }
.nw-duo-hl { display: block; margin-top: 7px; font: 800 17px/1.22 var(--font-sans); letter-spacing: -0.012em; color: #0f0f11; }
@media (hover: hover) { .nw-duo-card:hover .nw-duo-hl { color: #fa2846; } }
.nw-duo-card .nw-dek { font-size: 13px; margin-top: 6px; }
/* compact list stories */
.nw-list { display: flex; flex-direction: column; }
.nw-item { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; padding: 17px 0; border-top: 1px solid #ececec; }
.nw-item:first-child { border-top: 0; }
.nw-txt { min-width: 0; }
.nw-hl { display: block; margin-top: 8px; font: 700 16px/1.28 var(--font-sans); letter-spacing: -0.01em; color: #0f0f11; }
@media (hover: hover) { .nw-item:hover .nw-hl { color: #fa2846; } }
.nw-thumb { flex: none; width: 78px; height: 78px; border-radius: 11px; display: flex; align-items: center; justify-content: center; }
.nw-thumb b { font: 800 12px/1 var(--font-sans); letter-spacing: 0.02em; color: rgba(255,255,255,0.95); }
/* category gradients (covers + thumbs) */
.c-onboarding { background: linear-gradient(140deg, #0a84ff, #59b0ff); }
.c-incentives { background: linear-gradient(140deg, #12a150, #46d07f); }
.c-treasury   { background: linear-gradient(140deg, #e07b00, #f7b955); }
.c-security   { background: linear-gradient(140deg, #e5333a, #ff7a70); }
.c-dao-ops    { background: linear-gradient(140deg, #6c4ce7, #a08bff); }
.c-protocol   { background: linear-gradient(140deg, #475569, #8a99ad); }
@media (max-width: 760px), (max-height: 560px) and (pointer: coarse) {
    .newsapp { width: 92vw; }
    .nw-scroll { padding: 18px 18px 26px; }
    .nw-h1 { font-size: 27px; }
    /* phones: one scrollable chip row, and featured cards read as compact rows —
       the flat-gradient covers only earn slab size with real imagery */
    .nw-topics { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
        margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px; }
    .nw-topics::-webkit-scrollbar { display: none; }
    .nw-topic { flex: none; }
    .nw-lead, .nw-duo-card { display: flex; flex-direction: row-reverse; gap: 14px; align-items: flex-start; }
    .nw-lead .nw-cover, .nw-duo-card .nw-cover { width: 76px; height: 76px; flex: none; border-radius: 11px; }
    .nw-cover .nw-cn { font-size: 14px; left: 9px; bottom: 8px; }
    .nw-cover .nw-ct { display: none; }
    .nw-lead-body { padding-top: 0; flex: 1; min-width: 0; }
    .nw-duo-body { flex: 1; min-width: 0; }
    .nw-duo-card .nw-byline { margin-top: 0; }
    .nw-lead-hl { font-size: 17px; margin-top: 6px; }
    .nw-duo-hl { font-size: 15.5px; margin-top: 6px; }
    .nw-dek { font-size: 12.5px; margin-top: 5px; }
    .nw-duo { grid-template-columns: 1fr; gap: 0; margin-top: 16px; }
    .nw-duo-card { padding: 15px 0; border-top: 1px solid #ececec; }
}

/* ===== Hubble Exchange — the case study as an Apple Journal (light, reflective entry feed) ===== */
.hubapp { width: 500px; height: 640px; background: #ecebe6; display: flex; flex-direction: column; color: #1c1c1e; }
.hubapp .titlebar { background: #f4f2ed; border-bottom: 1px solid #dddbd4; box-shadow: none; }
.hubapp .tb-title { color: #48484a; text-shadow: none; }
.hub-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 15px 20px; }
/* the cover entry — identity + numbers + backers */
.jr-cover { background: #fff; border-radius: 20px; padding: 20px; margin-bottom: 15px; box-shadow: 0 1px 3px rgba(0,0,0,0.07); }
.jr-cover-id { display: flex; gap: 14px; align-items: center; }
.jr-logo { width: 54px; height: 54px; border-radius: 14px; flex: none; }
.jr-eyebrow { font: 700 10.5px/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: #6c5ce7; }
.jr-name { margin: 5px 0 0; font: 800 22px/1.05 var(--font-sans); letter-spacing: -0.02em; color: #1c1c1e; }
.jr-sub { margin: 4px 0 0; font: 500 12.5px/1.3 var(--font-sans); color: #86868b; }
.jr-role { margin: 15px 0 0; font: 400 14px/1.55 var(--font-sans); color: #3c3c40; }
.jr-stats { display: flex; gap: 24px; margin: 16px 0 15px; }
.jr-stat b { display: block; font: 800 19px/1 var(--font-sans); letter-spacing: -0.02em; color: #1c1c1e; }
.jr-stat span { display: block; font: 500 11px/1 var(--font-sans); color: #86868b; margin-top: 6px; }
.jr-backers { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.jr-bk-lbl { font: 600 11px/1 var(--font-sans); color: #86868b; }
.jr-bk-row { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 13px; }
.jr-bk { display: inline-flex; align-items: center; gap: 7px; font: 600 12.5px/1 var(--font-sans); color: #3c3c44; }
.jr-bk img { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); background: #fff; }
/* journal entries — a dated card feed */
.jr-entry { background: #fff; border-radius: 18px; padding: 16px 18px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.07); }
.jr-eh { display: flex; align-items: center; gap: 8px; }
.jr-dot { width: 9px; height: 9px; border-radius: 50%; background: #4b6bff; }
.jr-growth .jr-dot { background: #30a46c; }
.jr-vid .jr-dot { background: #e8890c; }
.jr-launch .jr-dot { background: #eab308; }
.jr-end .jr-dot { background: #9b7dff; }
.jr-edate { font: 700 11px/1 var(--font-sans); letter-spacing: 0.05em; text-transform: uppercase; color: #86868b; }
/* the track tag: names the lane (marketing / operations / milestone) in the beat header */
/* the lane filters: one tap shows only Operations, Marketing, or Milestones */
.jr-filter { display: flex; flex-wrap: wrap; gap: 7px; margin: 2px 0 14px; }
.jr-flt { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border: 1px solid #e2dfd6; border-radius: 999px;
    background: #fff; color: #55555a; font: 600 11.5px/1 var(--font-sans); cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s; }
.jr-flt i { width: 7px; height: 7px; border-radius: 50%; }
.jr-flt[data-k="gov"] i { background: #4b6bff; }
.jr-flt[data-k="growth"] i { background: #30a46c; }
.jr-flt:hover { border-color: #c9c5b8; color: #17181c; }
.jr-flt.sel { background: #17181c; border-color: #17181c; color: #fff; }

.jr-kind { margin-left: auto; font: 800 8.5px/1 var(--font-mono); letter-spacing: 0.07em; text-transform: uppercase; padding: 4px 7px; border-radius: 6px; background: rgba(75,107,255,0.12); color: #4b6bff; }
.jr-growth .jr-kind, .jr-vid .jr-kind { background: rgba(48,164,108,0.12); color: #238055; }
.jr-launch .jr-kind { background: rgba(234,179,8,0.17); color: #96700a; }
.jr-end .jr-kind { background: rgba(155,125,255,0.15); color: #7a5fe0; }
/* chapter headers: era dividers in the feed */
.jr-chap { display: flex; align-items: center; gap: 10px; margin: 24px 6px 12px; font: 800 10.5px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: #9b9ba1; }
.jr-chap::after { content: ''; flex: 1; height: 1px; background: #dcd9d1; }
.jr-et { margin: 9px 0 0; font: 800 17px/1.25 var(--font-sans); letter-spacing: -0.015em; color: #1c1c1e; }
.jr-ex { margin: 6px 0 0; font: 400 14px/1.55 var(--font-sans); color: #48484c; }
/* films inline */
.jr-media { margin-top: 13px; }
.hub-vstage { position: relative; border-radius: 14px; overflow: hidden; background: #111; }
.hub-vel { display: block; width: 100%; max-height: 360px; object-fit: cover; }
.hub-play { position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; border: 0; border-radius: 50%; cursor: pointer;
    background: rgba(15,17,22,0.7); color: #fff; display: flex; align-items: center; justify-content: center; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.hub-play svg { width: 25px; height: 25px; margin-left: 2px; }
.hub-vstage.playing .hub-play { display: none; }
.jr-vlink { display: inline-block; margin-top: 9px; font: 600 12.5px/1 var(--font-sans); color: #0a84ff; text-decoration: none; }
/* a 3-up gallery of the square feature films (Journal shows multiple attachments as a grid) */
.jr-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 13px; }
.jr-gv .hub-vstage { border-radius: 12px; aspect-ratio: 1 / 1; }
.jr-gv .hub-vel { width: 100%; height: 100%; max-height: none; }
.jr-gv .hub-play { width: 40px; height: 40px; }
.jr-gv .hub-play svg { width: 18px; height: 18px; }
.jr-gv-l { display: block; margin-top: 6px; font: 600 11px/1.2 var(--font-sans); color: #6c6c70; text-align: center; }
/* compact 2-col grid of explainer films: wide videos letterboxed so on-screen text stays intact */
.jr-fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 13px; }
.jr-fg-img { display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #101014; }
.jr-fg-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jr-fg .hub-vstage { border-radius: 11px; aspect-ratio: 16 / 9; background: #0c0c0f; }
.jr-fg .hub-vel { width: 100%; height: 100%; max-height: none; object-fit: contain; }
.jr-fg .hub-play { width: 38px; height: 38px; }
.jr-fg .hub-play svg { width: 17px; height: 17px; }
.jr-fg-l { display: block; margin-top: 6px; font: 600 11px/1.25 var(--font-sans); color: #6c6c70; text-decoration: none; }
@media (hover: hover) { .jr-fg-l:hover { color: #0a84ff; } }
/* stacked wide clips (launch hype + partner banners), each with an attribution footer */
.jr-clips { display: flex; flex-direction: column; gap: 10px; margin-top: 13px; }
/* 3+ clips: a 2-col grid so every film is on screen, no side-scrolling */
.jr-cgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; }
.jr-cgrid .jr-clip { min-width: 0; }
.jr-cgrid .jr-clip:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* odd count: the last one takes the full row, no empty cell */
.jr-cgrid .jr-clip-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* while a video is rolling (muted autoplay), the play overlay gets out of the way */
.hub-vstage.auto .hub-play { opacity: 0; pointer-events: none; }
.jr-clip .hub-vstage { border-radius: 12px; }
.jr-clip .hub-vel { max-height: 240px; }
.jr-clip-ft { display: flex; align-items: center; gap: 8px; margin-top: 7px; text-decoration: none; }
.jr-clip-av { width: 22px; height: 22px; border-radius: 50%; flex: none; }
.jr-clip-l { font: 500 12.5px/1.3 var(--font-sans); color: #6c6c70; min-width: 0; }
.jr-clip-l b { color: #1c1c1e; font-weight: 700; margin-right: 5px; }
.jr-clip-ft i { margin-left: auto; font-style: normal; color: #b2b2b6; }
@media (hover: hover) { .jr-clip-ft:hover .jr-clip-l b { color: #0a84ff; } }
/* an endorsement quote (e.g. Avalanche amplifying the launch) */
.jr-endorse { display: flex; gap: 11px; align-items: flex-start; text-decoration: none; margin-top: 13px; padding: 12px 13px; border-radius: 13px; background: #f4f3ef; }
@media (hover: hover) { .jr-endorse:hover { background: #edece6; } }
.jr-en-av { width: 34px; height: 34px; border-radius: 50%; flex: none; }
.jr-en-tx { min-width: 0; }
.jr-en-h { display: flex; align-items: baseline; gap: 6px; font: 500 11.5px/1 var(--font-sans); color: #86868b; }
.jr-en-h b { font-weight: 800; color: #1c1c1e; }
.jr-en-h i { margin-left: auto; font-style: normal; color: #e0245e; font-weight: 600; }
.jr-en-q { display: block; margin-top: 4px; font: 500 13px/1.4 var(--font-sans); color: #2c2c30; }
/* proposal attachments */
.jr-atts { display: flex; flex-direction: column; gap: 7px; margin-top: 13px; }
.jr-att { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 9px 11px; border-radius: 11px; background: #f4f3ef; color: #3c3c40; font: 500 12.5px/1.35 var(--font-sans); }
.jr-att-ic { flex: none; width: 27px; height: 27px; border-radius: 7px; background: #6c5ce7; display: flex; align-items: center; justify-content: center; color: #fff; }
.jr-att-ic svg { width: 14px; height: 14px; }
.jr-att-tx { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.jr-att-tx b { font: 800 10px/1.2 var(--font-mono); color: #6c5ce7; }
.jr-att i { margin-left: auto; font-style: normal; color: #b2b2b6; }
@media (hover: hover) { .jr-att:hover { background: #edece6; } }
/* Medium/X link chips */
.jr-links { display: flex; flex-direction: column; gap: 7px; margin-top: 13px; }
.jr-link-chip { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 9px 11px; border-radius: 11px; background: #f4f3ef; color: #3c3c40; font: 500 12.5px/1.35 var(--font-sans); }
.jr-lc-ic { flex: none; width: 27px; height: 27px; border-radius: 7px; display: flex; align-items: center; justify-content: center; }
.jr-lc-ic svg { width: 16px; height: 16px; }
.jr-lc-medium .jr-lc-ic { background: #1c1c1e; } .jr-lc-medium .jr-lc-ic svg { fill: #fff; }
.jr-lc-x .jr-lc-ic { background: #1c1c1e; } .jr-lc-x .jr-lc-ic svg { fill: #fff; }
.jr-lc-press .jr-lc-ic { background: #1c1c1e; } .jr-lc-press .jr-lc-ic svg { fill: #fff; }
.jr-lc-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jr-lc-n { flex: none; margin-left: auto; white-space: nowrap; font: 600 11px/1 var(--font-sans); color: #86868b; }
.jr-link-chip .jr-lc-n + i { margin-left: 9px; }   /* one auto margin per row: the count claims the space, the arrow sits at a fixed gap */
.jr-link-chip i { margin-left: auto; font-style: normal; color: #b2b2b6; }
@media (hover: hover) { .jr-link-chip:hover { background: #edece6; } }
/* standalone case study: tag, lede, stat bar, numbered steps, result */
.jr-study { margin-top: 14px; padding: 16px 16px 4px; border-radius: 15px; background: linear-gradient(180deg, #f7f5ff, #f5f4ef); border: 1px solid #e7e3f5; }
.jr-study-tag { display: inline-block; font: 800 9.5px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: #6c5ce7; background: #ece8fb; padding: 5px 8px; border-radius: 6px; }
.jr-study-lede { margin: 11px 0 0; font: 500 13.5px/1.5 var(--font-sans); color: #3c3c40; }
.jr-study-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 14px; }   /* stat rows are always 4 tiles: 2x2 on narrow screens */
@media (min-width: 761px) { .jr-study-stats { grid-template-columns: repeat(4, 1fr); } }
.jr-ss { display: flex; flex-direction: column; gap: 3px; padding: 11px 10px; border-radius: 11px; background: #fff; border: 1px solid #ece9e0; min-width: 0; }
.jr-ss b { font: 800 18px/1 var(--font-sans); letter-spacing: -0.03em; color: #17181c; white-space: nowrap; }
.jr-ss span { font: 500 10px/1.3 var(--font-sans); color: #86868b; }
/* a single artwork post: full-bleed image card, click through to the tweet */
.jr-art { display: block; margin: 12px 0 4px; border-radius: 14px; overflow: hidden; border: 1px solid #ece9e0; background: #f5f3ec; }
.jr-art img { display: block; width: 100%; height: auto; transition: transform 0.28s cubic-bezier(.22,.61,.36,1); }
.jr-art:hover img { transform: scale(1.015); }

.jr-study-facets { display: grid; grid-template-columns: 1fr; gap: 9px; margin: 14px 0; }
@media (min-width: 560px) {
    .jr-study-facets { grid-template-columns: 1fr 1fr; }
    .jr-study-facets .jr-sf:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* odd counts close with a full-width card: no holes */
}
.jr-study-facets:has(.jr-sf-lg) { display: flex; flex-direction: column; }   /* logo'd facets read as vendor rows: full width, no grid holes */
.jr-sf { background: #fff; border: 1px solid #ece9e0; border-radius: 11px; padding: 11px 12px; }
.jr-sf-h { display: block; font: 800 9.5px/1 var(--font-mono); letter-spacing: 0.07em; text-transform: uppercase; color: #6c5ce7; margin-bottom: 6px; }
.jr-sf-b { display: block; font: 400 12.5px/1.5 var(--font-sans); color: #55555a; }
.jr-sf-lg { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; gap: 3px 12px; padding: 12px 13px; align-items: start; }
.jr-sf-lg .jr-sf-logo { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 10px; object-fit: cover; background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); }
.jr-sf-lg .jr-sf-h { margin-bottom: 0; align-self: center; }
/* allocation bar: a segmented split of a token allocation, with legend rows */
.jr-alloc { margin: 14px 0; }
.jr-alloc-t { font: 800 9.5px/1 var(--font-mono); letter-spacing: 0.07em; text-transform: uppercase; color: #86868b; margin-bottom: 9px; }
.jr-alloc-bar { display: flex; height: 38px; border-radius: 10px; overflow: hidden; }
.jr-ab-seg { display: flex; align-items: center; justify-content: center; font: 700 11px/1.2 var(--font-sans); color: #fff; text-align: center; padding: 0 6px; }
.jr-ab-0 { background: #6c5ce7; } .jr-ab-1 { background: #17181c; }
.jr-alloc-rows { display: flex; flex-direction: column; gap: 7px; margin-top: 11px; }
.jr-ar { display: flex; gap: 10px; align-items: baseline; font: 400 12.5px/1.5 var(--font-sans); color: #55555a; }
.jr-ar b { flex: none; min-width: 78px; font: 800 12.5px/1.4 var(--font-sans); color: #17181c; }
.jr-study-steps { list-style: none; margin: 16px 0 0; padding: 0; counter-reset: st; }
.jr-st { position: relative; padding: 0 0 15px 34px; counter-increment: st; }
.jr-st::before { content: counter(st); position: absolute; left: 0; top: 0; width: 23px; height: 23px; border-radius: 50%; background: #6c5ce7; color: #fff; font: 800 11px/23px var(--font-sans); text-align: center; }
.jr-st:not(:last-child)::after { content: ''; position: absolute; left: 11px; top: 26px; bottom: 3px; width: 1.5px; background: #e2ddf3; }
.jr-st-h { display: block; font: 700 13.5px/1.35 var(--font-sans); color: #17181c; }
.jr-st-b { display: block; margin-top: 3px; font: 400 12.5px/1.5 var(--font-sans); color: #55555a; }
.jr-study-res { display: block; margin: 2px 0 14px; padding: 13px 14px; border-radius: 12px; background: #eef7f0; border: 1px solid #d6ecdb; }
.jr-res-l { display: inline-block; font: 800 9.5px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: #2a9d5c; background: #fff; padding: 5px 8px; border-radius: 6px; box-shadow: inset 0 0 0 1px #d6ecdb; }
.jr-res-b { display: block; margin-top: 9px; font: 500 13px/1.55 var(--font-sans); color: #2c4a38; }
/* vendor / provider roster: grouped chips, logo or monogram per firm */
.jr-roster { background: #fff; border-radius: 18px; padding: 16px 18px 18px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.07); }
.jr-roster-t { margin: 0; font: 800 17px/1.2 var(--font-sans); letter-spacing: -0.015em; color: #17181c; }
.jr-roster-lead { margin: 7px 0 0; font: 400 13px/1.5 var(--font-sans); color: #6a6a70; }
.jr-rgrp { margin-top: 16px; }
.jr-rgrp-l { font: 800 9.5px/1 var(--font-mono); letter-spacing: 0.07em; text-transform: uppercase; color: #9b9ba1; margin-bottom: 9px; }
.jr-rgrp-p { margin-left: 9px; font-weight: 700; color: #c26a14; text-decoration: none; white-space: nowrap; }
.jr-rgrp-p:hover { text-decoration: underline; }
.jr-rgrp-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; }
.jr-rc { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 11px; background: #f4f3ef; }
.jr-rc-face { flex: none; width: 30px; height: 30px; border-radius: 8px; }
.jr-rc-logo { object-fit: cover; }
.jr-rc-mono { display: flex; align-items: center; justify-content: center; background: #17181c; color: #fff; font: 800 11px/1 var(--font-sans); letter-spacing: -0.01em; }
.jr-rc-tx { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.jr-rc-tx b { font: 700 12.5px/1.25 var(--font-sans); color: #17181c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jr-rc-tx i { font: 500 10.5px/1.25 var(--font-sans); font-style: normal; color: #86868b; }
/* the closing "MoarMarket case study →" — a dark pill that pops on the light feed */
.hub-ms-link { margin-top: 13px; padding: 11px 16px; border: 0; border-radius: 12px; background: #17181c; color: #fff; font: 700 13px/1 var(--font-sans); cursor: pointer; }
.hub-ms-link:hover { background: #000; }
.hub-govall { display: block; width: 100%; margin: 3px 0 8px; padding: 13px; border: 1px solid #dddbd4; border-radius: 12px; background: #fff; cursor: pointer; color: #0a84ff; font: 600 13px/1 var(--font-sans); }
.hub-govall:hover { background: #faf9f5; }
@media (max-width: 760px), (max-height: 560px) and (pointer: coarse) {
    .win.app.fs.hubapp { height: 100dvh; border: 0; border-radius: 0; }
    .hubapp { width: 96vw; }
    .jr-stats { gap: 20px; }
    /* backers fit one line on a phone: smaller marks, spread across the card */
    .jr-bk { font-size: 11px; gap: 6px; }
    .jr-bk img { width: 18px; height: 18px; border-radius: 5px; }
    .jr-bk-row { width: 100%; justify-content: space-between; gap: 8px 10px; }
}

/* ===== Messages — the receipts (modern two-pane iMessage: glass sidebar, tails, tapbacks) ===== */
.msgsapp { width: 700px; height: 560px; display: flex; overflow: hidden; border: 1px solid #000; border-radius: 12px;
    background: #1c1c1e; box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06) inset; color: #ececf0; }
.win.app.fs.msgsapp { display: flex; }
.ms-side { flex: none; width: 218px; display: flex; flex-direction: column; background: rgba(30,30,33,0.88);
    -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); border-right: 1px solid rgba(0,0,0,0.55); }
.ms-side-top { flex: none; height: 42px; display: flex; align-items: center; padding: 0 14px; }
.ms-search { flex: none; margin: 0 10px 10px; height: 27px; display: flex; align-items: center; gap: 6px; padding: 0 9px;
    border-radius: 8px; background: rgba(255,255,255,0.075); color: #8e8e96; font: 400 12.5px/1 var(--font-sans); }
.ms-search svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ms-mic, .ms-pen { display: none; }   /* desktop: plain search; the mic + pencil are the iOS mobile bottom bar */
.ms-sec { flex: none; padding: 4px 20px 7px; font: 700 10px/1 var(--font-sans); letter-spacing: 0.07em; text-transform: uppercase; color: #77777e; }
.ms-convs { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding-bottom: 6px; }
.ms-conv { flex: none; display: flex; gap: 10px; align-items: center; margin: 0 8px; padding: 10px; border-radius: 11px;
    border: 0; background: none; text-align: left; cursor: pointer; color: inherit; font: inherit; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { .ms-conv:not(.sel):hover { background: rgba(255,255,255,0.06); } }
.ms-conv.sel { background: #0a84ff; }
.ms-mono { background: linear-gradient(180deg, #9aa1ab, #6e7580); display: flex; align-items: center; justify-content: center; }
.ms-mono i { font: 600 15px/1 var(--font-sans); font-style: normal; color: #fff; }
.ms-ava-sm.ms-mono i { font-size: 12.5px; }
.ms-head-ava { display: flex; }
.ms-back { display: none; }
.ms-ava { flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; }
.ms-ava svg { display: block; width: 100%; height: 100%; }
.ms-ava img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ms-conv-tx { flex: 1; min-width: 0; }
.ms-conv-r { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ms-conv-r b { flex: none; font: 600 12.5px/1.2 var(--font-sans); color: #fff; white-space: nowrap; }
.ms-conv-r i { flex: none; font: 400 10.5px/1 var(--font-sans); font-style: normal; color: rgba(255,255,255,0.72); white-space: nowrap; }
.ms-conv-cred { display: block; margin: 2px 0 1px; font: 400 11px/1.2 var(--font-sans); color: rgba(255,255,255,0.42); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-conv em { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
    font: 400 11.5px/1.35 var(--font-sans); font-style: normal; color: rgba(255,255,255,0.72); margin-top: 2px; }
.ms-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #151517; }
.ms-head { flex: none; height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 16px;
    background: rgba(34,34,37,0.92); border-bottom: 1px solid rgba(0,0,0,0.6); }
.ms-ava-sm { width: 32px; height: 32px; }
.ms-who { flex: 1; min-width: 0; }
.ms-who b { display: flex; align-items: center; gap: 4px; font: 600 13px/1.2 var(--font-sans); }
.ms-who b svg { width: 10px; height: 10px; fill: none; stroke: #7c7c84; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ms-who span { display: block; font: 400 10.5px/1.3 var(--font-sans); color: #8a8a90; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-tools { display: flex; align-items: center; gap: 18px; color: #0a84ff; }
.ms-tools svg { width: 21px; height: 21px; fill: currentColor; }
.ms-info { display: inline-flex; color: inherit; -webkit-tap-highlight-color: transparent; }
.ms-info:hover { color: #3f9dff; }
.ms-thread { flex: 1; overflow-y: auto; padding: 16px 16px 8px; display: flex; flex-direction: column; gap: 15px; background: #151517; }
.ms-day { text-align: center; font: 600 10.5px/1 var(--font-sans); color: #77777e; margin: 2px 0; }
.ms-row { display: flex; flex-direction: column; max-width: 78%; text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; }
.ms-row.in { align-self: flex-start; align-items: flex-start; }
.ms-row.out { align-self: flex-end; align-items: flex-end; }
.ms-bubble { position: relative; z-index: 0; display: inline-block; padding: 8px 12px 9px; font: 400 13px/1.45 var(--font-sans); white-space: pre-wrap; border-radius: 18px; }
.ms-row.in .ms-bubble { background: #3b3b3d; color: #f2f2f6; }
@media (hover: hover) { a.ms-row:hover .ms-bubble { background: #48484b; } }
.ms-row.out .ms-bubble { background: linear-gradient(180deg, #2f9bff, #0a84ff); color: #fff; }
/* iMessage tails: a curl in the bubble color, then a cutout in the thread background */
.ms-row.in .ms-bubble::after { content: ''; position: absolute; left: -7px; bottom: 0; width: 18px; height: 19px;
    background: inherit; border-bottom-right-radius: 16px 14px; z-index: -1; }
.ms-row.in .ms-bubble::before { content: ''; position: absolute; left: -10px; bottom: 0; width: 10px; height: 21px;
    background: #151517; border-bottom-right-radius: 10px; }
.ms-row.out .ms-bubble::after { content: ''; position: absolute; right: -7px; bottom: 0; width: 18px; height: 19px;
    background: inherit; border-bottom-left-radius: 16px 14px; z-index: -1; }
.ms-row.out .ms-bubble::before { content: ''; position: absolute; right: -10px; bottom: 0; width: 10px; height: 21px;
    background: #151517; border-bottom-left-radius: 10px; }
/* a tapback from Sam on a received bubble */
.ms-has-img { padding: 4px 4px 8px; overflow: hidden; }
.ms-img { display: block; width: 100%; max-width: 340px; border-radius: 13px; }
.ms-has-img .ms-txt { display: block; padding: 6px 8px 2px; }
.ms-note-in { display: block; padding: 6px 8px 2px; font: 600 11.5px/1.35 var(--font-sans); color: #cfe0ff; }
.ms-has-img .ms-tap { top: -13px; }
.ms-tap { position: absolute; top: -15px; right: -9px; padding: 4px 6px 5px; border-radius: 999px; font-size: 11px; line-height: 1;
    background: linear-gradient(180deg, #2f9bff, #0a84ff); box-shadow: 0 0 0 2.5px #151517; }
.ms-tap::before { content: ''; position: absolute; left: 3px; bottom: -3.5px; width: 7px; height: 7px; border-radius: 50%;
    background: #0a84ff; box-shadow: 0 0 0 2px #151517; }
.ms-row.has-tap { margin-top: 6px; }
.ms-cap { margin: 5px 2px 0 12px; font: 400 10.5px/1.35 var(--font-sans); color: #82828a; }
.ms-cap.out { margin: 4px 6px 0 0; }
.ms-cap .ms-go { font-style: normal; color: #6cb0ff; }
.ms-cap .ms-dm { font-style: normal; color: #9a9aa0; }
.ms-compose { flex: none; display: flex; align-items: center; gap: 9px; padding: 9px 12px 12px; background: #151517; }
.ms-plus { flex: none; width: 27px; height: 27px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: rgba(255,255,255,0.08); color: #9a9aa2; font: 300 18px/1 var(--font-sans); }
.ms-field { flex: 1; height: 31px; display: flex; align-items: center; justify-content: space-between; padding: 0 6px 0 13px;
    border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16); color: #7e7e86; font: 400 13px/1 var(--font-sans); }
.ms-field svg { width: 19px; height: 19px; fill: #7e7e86; }

/* the macOS notification that announces the receipts (once per session) */
.note-banner { position: absolute; top: 36px; right: 14px; z-index: 9500; width: 348px; display: flex; align-items: flex-start; gap: 11px;
    padding: 11px 13px 12px; border: 0; border-radius: 17px; text-align: left; color: #f2f2f6; cursor: pointer;
    background: rgba(44,44,48,0.88); -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px);
    box-shadow: 0 18px 50px rgba(0,0,0,0.45), inset 0 0 0 0.5px rgba(255,255,255,0.12);
    opacity: 0; transform: translateX(26px); transition: opacity 0.4s cubic-bezier(.22,.61,.36,1), transform 0.4s cubic-bezier(.22,.61,.36,1);
    pointer-events: none; -webkit-tap-highlight-color: transparent; font-family: var(--font-sans); }
.note-banner.in { opacity: 1; transform: none; pointer-events: auto; }
.note-banner { touch-action: none; }                     /* the swipe-up dismiss owns touch gestures on the banner */
.note-banner.nb-drag { transition: none; }               /* mid-drag: track the finger 1:1, no easing lag */
.nb-ic { flex: none; width: 36px; height: 36px; margin-top: 1px; }
.nb-ic svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 2px 5px rgba(0,0,0,0.3)); }
.nb-body { flex: 1; min-width: 0; }
.nb-app { display: flex; align-items: baseline; justify-content: space-between; font: 600 11px/1 var(--font-sans); color: #b6b6bc; letter-spacing: 0.01em; }
.nb-app i { font-style: normal; font-size: 10.5px; color: #8a8a90; }
.nb-body b { display: block; font: 600 12.5px/1.3 var(--font-sans); margin-top: 3px; }
.nb-cred { font-weight: 400; color: #9a9aa2; }
.nb-txt { display: block; font: 400 12px/1.4 var(--font-sans); color: #d6d6dc; margin-top: 1px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nb-x { flex: none; align-self: flex-start; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: 10px; color: #c6c6cc; background: rgba(255,255,255,0.1); opacity: 0; transition: opacity 0.15s; }
.note-banner:hover .nb-x { opacity: 1; }
.nb-x:hover { background: rgba(255,255,255,0.2); color: #fff; }
.theme-light .note-banner { background: rgba(246,246,248,0.9); color: #1c1c22; box-shadow: 0 18px 50px rgba(0,0,0,0.22), inset 0 0 0 0.5px rgba(0,0,0,0.08); }
.theme-light .nb-app, .theme-light .nb-app i { color: #6a6a72; }
.theme-light .nb-txt { color: #3c3c44; }
.theme-light .nb-x { background: rgba(0,0,0,0.07); color: #55555c; }
@media (prefers-reduced-motion: reduce) { .note-banner { transition: opacity 0.25s; transform: none; } }
/* phones: iOS-style, drops in from the top edge (must follow the desktop rule — same specificity) */
@media (max-width: 760px), (max-height: 560px) and (pointer: coarse) {
    .note-banner { top: calc(env(safe-area-inset-top, 0px) + 10px); left: 10px; right: 10px; width: auto; transform: translateY(-18px); }
    .note-banner.in { transform: none; }
}

/* ===== the log rows (Console-style) — shared by the Stocks incident/feature sidebar ===== */

.cs-tool { flex: none; height: 42px; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: #2a2a2c; border-bottom: 1px solid #161617; }

.cs-tsp { flex: 1; }

.cs-list { flex: 1; overflow-y: auto; }
.cs-item { border-bottom: 1px solid rgba(255,255,255,0.05); }
.cs-row { display: grid; grid-template-columns: 100px 84px 116px 1fr auto; gap: 10px; align-items: center; width: 100%; padding: 9px 14px; border: 0; background: none; color: #d6d6da; text-align: left; cursor: pointer; }
.cs-row:hover { background: rgba(255,255,255,0.035); }
.cs-item.open .cs-row { background: rgba(255,255,255,0.055); }
.cs-type { justify-self: start; padding: 2px 7px; border-radius: 5px; font: 700 9.5px/1.5 var(--font-mono); text-transform: uppercase; letter-spacing: 0.03em; }
.cs-t-fault { background: rgba(255,69,58,0.16); color: #ff6961; }
.cs-t-dep { background: rgba(255,159,10,0.16); color: #ff9f0a; }
.cs-t-error { background: rgba(255,179,64,0.15); color: #ffb340; }
.cs-t-notice { background: rgba(10,132,255,0.18); color: #4ca3ff; }
.cs-t-ok { background: rgba(48,209,88,0.16); color: #34d65f; }
.cs-time { color: #9a9a9e; font: 400 12px/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.cs-proc { color: #8e8e93; font: 400 11.5px/1 var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cs-msg { color: #ededef; font: 500 12.5px/1.3 var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-state { color: #30d158; font: 600 11px/1 var(--font-sans); white-space: nowrap; }
.cs-detail { display: none; padding: 9px 16px 16px 90px; }
.cs-item.open .cs-detail { display: block; }
.cs-line { font: 400 13px/1.5 var(--font-sans); color: #c4c4c9; margin: 2px 0 13px; max-width: 62ch; }
.cs-fields { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.cs-f { display: grid; grid-template-columns: 76px 1fr; gap: 12px; }
.cs-f dt { font: 600 10.5px/1.5 var(--font-sans); color: #7f7f84; text-transform: uppercase; letter-spacing: 0.04em; }
.cs-f dd { margin: 0; font: 400 12.5px/1.5 var(--font-sans); color: #d2d2d6; max-width: 60ch; }
.cs-meta { margin-top: 13px; display: inline-flex; align-items: center; font: 600 11.5px/1 var(--font-sans); color: #30d158; }
.cs-meta::before { content: '✓'; margin-right: 6px; }
.cs-foot { flex: none; height: 34px; display: flex; align-items: center; justify-content: center; background: #232325; border-top: 1px solid #161617; font: 600 11.5px/1 var(--font-sans); color: #9a9a9e; }

/* App Store on phones: collapse the sidebar to a slim top bar, single column */
@media (max-width: 760px), (max-height: 560px) and (pointer: coarse) {
    .appstore { flex-direction: column; width: auto; height: auto; }
    .as-side { width: auto; flex-direction: row; align-items: center; height: 46px; padding: 0 12px;
        border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
    .as-side .tb-left { height: auto; }
    .as-search, .as-nav, .as-acct { display: none; }   /* drop sidebar chrome; keep the close (traffic) */
    .as-main { padding: 18px 16px 26px; }
    .as-hero { min-height: 180px; }
    .as-hero-title { font-size: 23px; }
    .as-desc { flex-direction: column; gap: 14px; }
    .as-d-side { width: auto; text-align: left; flex-direction: row; gap: 22px; }
    .booksapp { height: 88vh; }
    .bk-page { padding: 28px 22px 50px; }
    .bk-page .post-title { font-size: 26px; }
    .bk-page .post-body p { font-size: 17px; }
    .stocksapp { width: auto; height: 84vh; }
    .rsx-grid { grid-template-columns: 1fr; }
    /* Console on phones: drop the sidebar + process column; each row stacks, details un-indent */
    
    
    
    
    
    
    
    
    
    
    
    
}

/* ===== print / Download PDF — clean black-on-white résumé ===== */
/* the static PDF's contact line: hidden on screen, shown in print (the Contact section folds into the header there) */
.print-contact { display: none; }

@media print {
    @page { size: Letter; margin: 12mm 13mm; }
    #ambient-canvas, .resume-back, .resume-pdf, .resume-foot, .system-status, .nav-links, .r-demo-link, .resume-head, .deck-divider, .sec-contact { display: none !important; }
    html, body, .ui-layer, .resume { background: #fff !important; }
    *, *::before, *::after { background-image: none !important; box-shadow: none !important; text-shadow: none !important; }
    .ui-layer { padding: 0 !important; min-height: 0 !important; display: block !important; }
    body, .resume-page { color: #111 !important; }
    body *, .data-value, .title, .meta, .label, h1, h2, h3, p, li, span, strong, a { color: #111 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    a { text-decoration: none !important; }

    /* one-pager typography */
    header { display: block; margin: 0 0 4.5mm; }
    .identity-block { gap: 1px; }
    .title.name { font-size: 20px; letter-spacing: -0.02em; margin: 0; }
    .identity-block .meta { font-size: 10px !important; color: #555 !important; }
    .print-contact { display: block !important; margin-top: 5px; font: 500 9.5px/1.5 var(--font-mono); color: #333 !important; }

    .resume { max-width: none; }
    .resume-section { margin: 0 0 4.5mm !important; }
    .resume-section-title { font-size: 10px; margin: 0 0 1mm; padding-bottom: 1mm; border-color: #ddd !important; }
    .resume-section-title .label { color: var(--accent) !important; }
    .r-job { padding: 2.2mm 0 !important; border-bottom-color: #e8e8e8 !important; break-inside: avoid; }
    .r-role { font-size: 11.5px; margin-bottom: 1px; }
    .r-job-head .meta { font-size: 9px !important; color: #555 !important; }
    .r-period { font-size: 8px; letter-spacing: 0.04em; }
    .r-points { margin: 1.6mm 0 0; gap: 0; }
    .r-points li { font-size: 9.4px; line-height: 1.45; padding-left: 11px; margin: 0 0 1.2mm; }
    .r-points li::before { top: 4.5px; left: 0; width: 3.5px; height: 3.5px; background: var(--accent) !important; opacity: 1; }
    .r-ops-lead { font-size: 9px !important; color: #555 !important; margin: 0 0 1.4mm; }
    .r-grid { margin-top: 1.6mm; grid-template-columns: repeat(4, 1fr); gap: 2.5mm; }
    .r-card { padding: 2mm 3mm; border-radius: 6px; border-color: #e5e5e5 !important; background: #fff !important; }
    .r-card-title { font-size: 9.5px; margin-bottom: 1px; }
    .r-card .meta { font-size: 8.5px !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* ===== menubar light/dark toggle ===== */
.mb-theme { display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; color: inherit; opacity: 0.9; pointer-events: auto; }
.mb-theme svg { width: 14px; height: 14px; }
.mb-theme:hover { opacity: 1; }

/* ===== light theme (html.theme-light) — toggle from the menubar ===== */
.theme-light .desktop { background: radial-gradient(135% 118% at 50% -14%, #ffffff 0%, #f2f0f8 50%, #e7e3f2 100%); }
.theme-light .menubar { color: rgba(22,22,30,0.84); background: rgba(255,255,255,0.62); box-shadow: inset 0 -0.5px 0 rgba(0,0,0,0.09); }

.theme-light .obj-label { color: #22222a; }
.theme-light .obj-label small { color: #7a7e8b; }
.theme-light .obj-shadow { display: none; }   /* the contact shadow grounds objects on the aurora; on white it reads as a detached smudge */
.theme-light .obj:hover .obj-label { color: #000; }
/* Notes — light */
.theme-light .notesapp { background: #f7f7f5; border-color: rgba(0,0,0,0.12);
    box-shadow: 0 22px 58px rgba(40,30,60,0.22), 0 0 0 1px rgba(0,0,0,0.05) inset; }
.theme-light .notesapp .titlebar { background: #ededeb; border-bottom-color: #dededa; }
.theme-light .notesapp .tb-title { color: #777; }
.theme-light .notes-list { background: #f0f0ec; border-right-color: #e1e1dc; }
.theme-light .notes-group { color: #1b1b1b; }
.theme-light .note-item.sel { background: #ffe6a1; }
.theme-light .ni-title { color: #1a1a1a; }
.theme-light .ni-sub { color: #8a8a8a; }
.theme-light .ni-sub b { color: #555; }
.theme-light .notes-content { background: #fff; }
.theme-light .nc-date { color: #9a9a9a; }
.theme-light .nc-title { color: #1a1a1a; }
.theme-light .nc-body p { color: #353535; }
.theme-light .nc-body b { color: #111; }
.theme-light .nc-body a { color: #c06a16; }
/* Pages — light chrome (the page is already white) */
.theme-light .pagesapp { box-shadow: 0 22px 58px rgba(40,30,60,0.24), 0 0 0 1px rgba(0,0,0,0.06) inset; }
.theme-light .pagesapp .titlebar { background: #e9e9e7; border-bottom-color: #d6d6d2; }
.theme-light .pagesapp .tb-title { color: #444; }
.theme-light .pg-tools { background: #ececea; border-bottom-color: #d3d3cf; }
.theme-light .pgt { color: #555; }
.theme-light .pgt-lb { color: #777; }
.theme-light .pgt-zoom { border-color: #bcbcb8; color: #444; }
.theme-light .pgt-div { background: #cacac6; }
.theme-light .pgt-more { color: #666; }
.theme-light .pg-wc { background: rgba(120,120,124,0.92); }

/* ---- Calendar (book a call): Apple Calendar light chrome, red accent ---- */
.meetapp { width: 640px; height: 540px; background: #fff; color: #1c1c1e; display: flex; flex-direction: column; }
.meetapp .titlebar { background: #f5f4f2; border-bottom: 1px solid #e2e0dc; box-shadow: none; }
.meetapp .tb-title { color: #48484a; text-shadow: none; }
.mt-split { flex: 1; min-height: 0; display: flex; }
.mt-rail { flex: none; width: 190px; border-right: 1px solid #ebe9e5; padding: 16px 14px; display: flex; flex-direction: column; gap: 16px; background: #fafaf8; }
.mt-today b { display: block; font: 700 11px/1 var(--font-sans); letter-spacing: 0.06em; color: #ec4d3d; }
.mt-today span { display: block; font: 300 44px/1.05 var(--font-sans); letter-spacing: -0.02em; color: #1c1c1e; }
.mt-mini-h { font: 700 12px/1 var(--font-sans); color: #1c1c1e; margin-bottom: 8px; }
.mt-mini-dow, .mt-mini-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; }
.mt-mini-dow i { font: 600 8.5px/1 var(--font-sans); color: #a8a8ad; text-align: center; font-style: normal; margin-bottom: 3px; }
.mt-mini-g i { font: 500 9.5px/1 var(--font-sans); color: #6c6c70; text-align: center; font-style: normal; padding: 3px 0; border-radius: 50%; }
.mt-mini-g i.now { background: #ec4d3d; color: #fff; font-weight: 700; }
.mt-meta { margin-top: auto; display: flex; flex-direction: column; gap: 5px; }
.mt-meta b { font: 700 13px/1.2 var(--font-sans); color: #1c1c1e; }
.mt-meta span { font: 500 10.5px/1.4 var(--font-sans); color: #86868b; }
.mt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 16px 18px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mt-embed { flex: 1; border: 0; width: 100%; min-height: 100%; border-radius: 10px; }
.mt-days { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.mt-days::-webkit-scrollbar { display: none; }
.mt-day { flex: none; width: 46px; border: 1px solid #e6e4e0; background: #fff; border-radius: 11px; padding: 7px 0 8px; cursor: pointer; text-align: center; -webkit-tap-highlight-color: transparent; }
.mt-day i { display: block; font: 600 9px/1 var(--font-sans); letter-spacing: 0.05em; text-transform: uppercase; color: #a0a0a5; font-style: normal; margin-bottom: 4px; }
.mt-day b { font: 700 15px/1 var(--font-sans); color: #1c1c1e; }
.mt-day.sel { background: #ec4d3d; border-color: #ec4d3d; }
.mt-day.sel i, .mt-day.sel b { color: #fff; }
.mt-dtitle { font: 700 14px/1.2 var(--font-sans); color: #1c1c1e; margin: 14px 0 9px; }
.mt-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 7px; }
.mt-slot { border: 1px solid #e6e4e0; background: #fff; border-radius: 9px; padding: 9px 0; font: 600 12.5px/1 var(--font-sans); color: #ec4d3d; cursor: pointer; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { .mt-slot:hover { border-color: #ec4d3d; } }
.mt-slot.sel { background: #ec4d3d; border-color: #ec4d3d; color: #fff; }
.mt-sheet { display: none; margin-top: 14px; padding: 13px 14px; border-radius: 12px; background: #f6f5f2; border: 1px solid #eceae5; }
.mt-sheet.on { display: block; animation: agin 0.25s ease; }
.mt-sheet-tx b { display: block; font: 700 13.5px/1.3 var(--font-sans); color: #1c1c1e; }
.mt-sheet-tx span { display: block; font: 500 11px/1.4 var(--font-sans); color: #86868b; margin-top: 2px; }
.mt-book { display: inline-block; margin-top: 10px; padding: 10px 16px; border-radius: 10px; background: #ec4d3d; color: #fff; font: 700 12.5px/1 var(--font-sans); text-decoration: none; }
.mt-book:active { transform: scale(0.98); }
.mt-note { margin: 9px 0 0; font: 400 10.5px/1.5 var(--font-sans); color: #9a9aa0; }
@media (max-width: 760px), (max-height: 560px) and (pointer: coarse) {
    .meetapp { width: 96vw; }
    .mt-rail { display: none; }
}