/* AufaOS shared styles for about.html and essays.html. The homepage inlines its own copy. */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --bg:      #06080F;
      --bg-2:    #0A0E1C;
      --surface: #10162B;
      --navy:    #0B2275;
      --cream:   #EFE9DD;
      --muted:   #A8ACBC;
      --dim:     #7C8196;
      --rust:    #7FA0FF;
      --warm:    #E0765A;
      --rule:    rgba(239,233,221,.12);
      --serif: 'Newsreader', Georgia, serif;
      --sans: 'Inter', -apple-system, system-ui, sans-serif;
      --mono: 'JetBrains Mono', ui-monospace, monospace;
      --hand: 'Caveat', cursive;
      --ease: cubic-bezier(.16, 1, .3, 1);
      --gutter: clamp(20px, 5vw, 72px);
    }

    /* section themes: every component reads these tokens */
    .t-black {
      --bg: #05070D; --bg-2: #0B0F1A; --surface: #121829; --cream: #F5F6FA; --muted: #A9AEC0; --dim: #7A8098;
      --rule: rgba(245,246,250,.12); --rule-2: rgba(245,246,250,.3); --rust: #7FA0FF; --ghost: rgba(245,246,250,.14); --field: rgba(245,246,250,.05); --glow: rgba(27,63,209,.45);
    }
    .t-blue {
      --bg: #0B2275; --bg-2: #0E2A8E; --surface: #1333A6; --cream: #FFFFFF; --muted: #CBD5F6; --dim: #A3B3E8;
      --rule: rgba(255,255,255,.2); --rule-2: rgba(255,255,255,.45); --rust: #A9C1FF; --ghost: rgba(255,255,255,.2); --field: rgba(255,255,255,.08); --glow: rgba(255,255,255,.14);
    }
    .t-white {
      --bg: #FFFFFF; --bg-2: #F3F4F8; --surface: #FFFFFF; --cream: #0A0F1F; --muted: #4B5268; --dim: #6B7288;
      --rule: rgba(10,15,31,.12); --rule-2: rgba(10,15,31,.3); --rust: #1B3FD1; --ghost: rgba(10,15,31,.13); --field: #F3F4F8; --glow: rgba(27,63,209,.18);
    }
    .t-black, .t-blue, .t-white { background: var(--bg); color: var(--cream); }

    html { -webkit-text-size-adjust: 100%; }
    body {
      background: var(--bg); color: var(--cream); font-family: var(--sans);
      font-size: 17px; line-height: 1.6; overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }
    img { display: block; max-width: 100%; }
    a { color: inherit; }
    ::selection { background: var(--rust); color: var(--bg); }
    :focus-visible { outline: 2px solid var(--rust); outline-offset: 4px; border-radius: 4px; }
    html { scrollbar-color: #2a3150 var(--bg); }

    .wrap { max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); width: 100%; }
    .mono { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
    .h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(44px, 6.4vw, 96px); line-height: 1; letter-spacing: -.03em; text-wrap: balance; }
    .h2 em { font-style: italic; color: var(--rust); }
    .sub { color: var(--muted); font-size: clamp(17px, 1.4vw, 20px); max-width: 38em; }
    .hand { font-family: var(--hand); color: var(--warm); font-size: 24px; line-height: 1; }

    /* pinned scene scaffold: tall section, sticky 100vh stage, --p = 0→1 progress */
    .scene { position: relative; }
    .pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: center; }

    /* ─── hero ─── */
    .hero { height: 190vh; }
    .hero .pin { perspective: 1400px; }
    .hero .pin::before {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(50% 60% at 72% 48%, rgba(11,34,117,.5), transparent 70%);
    }
    .hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
    .hero-copy { transform: translateY(calc(var(--p, 0) * -90px)); opacity: calc(1 - var(--p, 0) * 1.7); }
    .hero .where { color: var(--rust); margin-bottom: 26px; }
    .hero h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(60px, 9vw, 136px); line-height: .92; letter-spacing: -.04em; }
    .hero h1 em { font-style: italic; color: var(--rust); }
    .typed { margin-top: 22px; font-family: var(--serif); font-weight: 300; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.2; min-height: 2.4em; max-width: 20em; }
    .typed em { font-style: italic; color: var(--muted); }
    .caret { display: inline-block; width: 2px; height: .9em; background: var(--warm); vertical-align: -.1em; margin-left: 3px; animation: blink 1s steps(1) infinite; }
    @keyframes blink { 50% { opacity: 0; } }
    .hero .lede { margin-top: 22px; color: var(--muted); max-width: 36em; font-size: clamp(16px, 1.25vw, 18px); }
    .hero .lede b { color: var(--cream); font-weight: 500; }
    .ctas { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; }
    .pill {
      display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 999px;
      background: var(--cream); color: var(--bg); font: 500 15px var(--sans); text-decoration: none;
      transition: transform .5s var(--ease), background .3s;
    }
    .pill:hover { transform: scale(1.04); }
    .pill.ghost { background: transparent; color: var(--cream); border: 1px solid var(--rule-2); }
    .pill.ghost:hover { background: var(--field); }
    .tlink { font-size: 15px; color: var(--rust); text-decoration: none; }
    .tlink:hover { text-decoration: underline; text-underline-offset: 4px; }

    .shot-wrap { position: relative; justify-self: center; width: min(100%, 440px); transform-style: preserve-3d; }
    .shot-enter { animation: shotIn 1.8s var(--ease) both .15s; transform-style: preserve-3d; }
    @keyframes shotIn { from { opacity: 0; transform: rotateY(-28deg) rotateX(12deg) translateZ(-160px); } }
    .shot {
      position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 3 / 4;
      transform: rotateX(calc(var(--p, 0) * 24deg + var(--ty, 0) * 1deg)) rotateY(calc(var(--tx, 0) * 1deg)) scale(calc(1 - var(--p, 0) * .16)) translateY(calc(var(--p, 0) * 70px));
      box-shadow: 0 50px 90px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(239,233,221,.08);
      will-change: transform; transition: transform .25s linear;
    }
    .shot img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.55); transform-origin: 58% 50%; }
    .shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,.14), transparent 40%); mix-blend-mode: soft-light; pointer-events: none; }
    .shot-note { position: absolute; left: -64px; bottom: 60px; transform: rotate(-6deg); }
    .m-arrow { display: none; }
    .shot-cap { margin-top: 18px; display: flex; justify-content: space-between; color: var(--dim); }
    .cue { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--dim); opacity: calc(1 - var(--p, 0) * 4); }
    .cue span { width: 1px; height: 40px; background: linear-gradient(var(--rust), transparent); animation: cue 2s var(--ease) infinite; transform-origin: top; }
    @keyframes cue { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

    /* ─── split letters (big type) ─── */
    .lt .wd { white-space: nowrap; display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .04em .1em 0; margin-bottom: -.1em; }
    .lt .ch { display: inline-block; transform: translateY(105%) rotate(6deg); transform-origin: 0 100%; transition: transform .95s var(--ease); transition-delay: calc(var(--ci) * 22ms); }
    .lt.in .ch { transform: none; }

    /* ─── chapter screens (full-bleed colour wipe) ─── */
    .chapter { height: 180vh; }
    .chapter .pin { background: var(--bg); }
    .cp-panel {
      position: absolute; inset: 0; background: #1B3FD1; color: #fff; display: flex; align-items: center;
      clip-path: inset(calc((1 - min(var(--p, 0) * 2.2, 1)) * 100%) 0 0 0);
    }
    .cp-meta { display: flex; justify-content: space-between; color: rgba(255,255,255,.75); margin-bottom: clamp(20px, 4vh, 48px); }
    .cp-title { font-family: var(--serif); font-weight: 300; font-size: clamp(88px, 17vw, 260px); line-height: .88; letter-spacing: -.055em; }
    .cp-title em { font-style: italic; color: #C9D6FF; }
    .cp-sub { margin-top: clamp(20px, 4vh, 44px); max-width: 34em; font-size: clamp(17px, 1.5vw, 21px); color: rgba(255,255,255,.82);
      opacity: calc((var(--p, 0) - .45) * 4); transform: translateY(calc((1 - min(max((var(--p, 0) - .45) * 4, 0), 1)) * 20px)); }

    /* ─── page recede (sections push back as the next one rises) ─── */
    main > section, main > .ticker { position: relative; z-index: 1; }
    main > section.receding { z-index: 0; }
    main > section::after { content: ""; position: absolute; inset: 0; background: #000; opacity: calc(var(--x, 0) * .6); pointer-events: none; z-index: 60; }

    /* ═════════════ AufaOS: shared desktop system ═════════════ */
    .sys { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif; }

    /* menu bar (replaces the nav) */
    .menubar {
      position: fixed; inset: 0 0 auto 0; z-index: 100; height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
      padding: 0 12px; font: 500 13.5px/1 -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif; color: #111;
      background: rgba(246,246,248,.74); backdrop-filter: blur(24px) saturate(1.8); -webkit-backdrop-filter: blur(24px) saturate(1.8);
      border-bottom: .5px solid rgba(0,0,0,.1); transition: background .4s, color .4s, border-color .4s;
    }
    .menubar.dark { background: rgba(18,20,28,.62); color: #f2f2f4; border-color: rgba(255,255,255,.08); }
    .mb-left, .mb-right { display: flex; align-items: center; gap: 2px; }
    .mb-logo { width: 22px; height: 22px; border-radius: 6px; background: #1B3FD1; color: #fff; display: grid; place-items: center; font: italic 400 14px var(--serif); margin-right: 8px; text-decoration: none; }
    .mb-app { font-weight: 700; margin-right: 10px; text-decoration: none; }
    .mb-left a.lk, .mb-right .item { padding: 5px 9px; border-radius: 6px; text-decoration: none; transition: background .2s; }
    .mb-left a.lk:hover, .mb-left a.lk.on { background: rgba(0,0,0,.08); }
    .menubar.dark .mb-left a.lk:hover, .menubar.dark .mb-left a.lk.on { background: rgba(255,255,255,.14); }
    .mb-right .item { display: flex; align-items: center; gap: 6px; }
    .mb-right svg { width: 17px; height: 17px; }
    .mb-status i { width: 7px; height: 7px; border-radius: 50%; background: #28C840; box-shadow: 0 0 0 3px rgba(40,200,64,.18); }
    .mb-clock { font-variant-numeric: tabular-nums; }
    .mb-burger { display: none; background: none; border: 0; font: inherit; color: inherit; padding: 5px 9px; border-radius: 6px; cursor: pointer; }
    .osmenu { position: fixed; top: 40px; left: 8px; right: 8px; z-index: 99; border-radius: 12px; padding: 6px; background: rgba(250,250,252,.9); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 30px 60px -20px rgba(0,0,0,.4), 0 0 0 .5px rgba(0,0,0,.15); display: none; }
    .osmenu.open { display: block; }
    .osmenu a { display: block; padding: 10px 12px; border-radius: 7px; color: #111; text-decoration: none; font: 500 16px -apple-system, Inter, sans-serif; }
    .osmenu a:hover { background: #1B3FD1; color: #fff; }

    /* mac window */
    .mw { position: relative; border-radius: 12px; overflow: hidden; background: #fff; color: #1d1d1f; box-shadow: 0 50px 90px -34px rgba(0,0,0,.5), 0 0 0 .5px rgba(0,0,0,.2); font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif; }
    .mw.dark { background: #1c1c1e; color: #ececf0; box-shadow: 0 50px 90px -34px rgba(0,0,0,.7), 0 0 0 .5px rgba(255,255,255,.14); }
    .mw-bar { position: relative; height: 40px; display: flex; align-items: center; gap: 12px; padding: 0 14px; background: linear-gradient(#f8f8f8, #eeeeee); border-bottom: 1px solid #dedede; }
    .mw.dark .mw-bar { background: linear-gradient(#2e2e30, #262628); border-color: #0d0d0e; }
    .lights { display: flex; gap: 8px; position: relative; z-index: 1; }
    .lights i { width: 12px; height: 12px; border-radius: 50%; background: #FF5F57; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.2); }
    .lights i:nth-child(2) { background: #FEBC2E; } .lights i:nth-child(3) { background: #28C840; }
    .mw-title { position: absolute; left: 90px; right: 90px; top: 0; bottom: 0; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: #3b3b3d; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mw.dark .mw-title { color: #c9c9ce; }

    /* big bold wallpaper words, like the hero */
    .desk { position: relative; overflow-x: clip; }
    .bigword { position: absolute; font: 800 var(--bfs, 21vw)/.8 var(--sans); letter-spacing: -.065em; text-transform: uppercase; white-space: nowrap; pointer-events: none; user-select: none; color: var(--cream); margin: 0; }
    .t-white .bigword { color: #0A0F1F; }
    .bigword .ac { color: #1B3FD1; }
    .t-blue .bigword .ac, .t-black .bigword .ac { color: #7FA0FF; }
    .desk-note { font-family: var(--hand); color: var(--warm); font-size: 24px; transform: rotate(-4deg); display: inline-block; }

    /* ═════ MESSAGES ═════ */
    .msgs { height: 280vh; }
    .msgs .pin { justify-content: center; }
    .msgs .bigword { left: var(--gutter); top: 10vh; --bfs: 19vw; transform: translateX(calc(var(--p, 0) * -18vw)); }
    .msgs .bw2 { left: auto; right: var(--gutter); top: auto; bottom: 6vh; transform: translateX(calc(var(--p, 0) * 18vw)); }
    .imsg { width: min(560px, calc(100vw - 32px)); height: min(640px, 80vh); display: flex; flex-direction: column; z-index: 2; margin-top: 28px; }
    .im-head { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0 12px; border-bottom: 1px solid #ececec; background: #fbfbfb; }
    .im-head img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; object-position: 55% 30%; }
    .im-head span { font-size: 12px; color: #6e6e73; }
    .im-feed { flex: 1; overflow-y: auto; padding: 16px 16px 8px; display: flex; flex-direction: column; gap: 5px; scroll-behavior: smooth; overscroll-behavior: contain; }
    .bub { max-width: 76%; padding: 8px 13px; border-radius: 18px; font-size: 15px; line-height: 1.35; opacity: 0; transform: translateY(10px) scale(.96); transform-origin: left bottom; transition: opacity .35s var(--ease), transform .5s cubic-bezier(.34,1.56,.64,1); display: none; }
    .bub.show { display: block; opacity: 1; transform: none; }
    .bub.them { align-self: flex-start; background: #E9E9EB; color: #111; border-bottom-left-radius: 6px; }
    .bub.me { align-self: flex-end; background: #0A84FF; color: #fff; border-bottom-right-radius: 6px; transform-origin: right bottom; }
    .bub.pic { padding: 3px; background: #E9E9EB; }
    .bub.pic img { width: 220px; border-radius: 15px; display: block; }
    .bub a { color: inherit; }
    .bub.typing { display: none; padding: 11px 14px; }
    .bub.typing.show { display: flex; gap: 4px; }
    .bub.typing i { width: 7px; height: 7px; border-radius: 50%; background: #8e8e93; animation: tdot 1s infinite; }
    .bub.typing i:nth-child(2) { animation-delay: .15s; } .bub.typing i:nth-child(3) { animation-delay: .3s; }
    @keyframes tdot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
    .im-meta { align-self: flex-end; font-size: 11px; color: #8e8e93; margin: -1px 4px 4px; display: none; }
    .im-meta.show { display: block; }
    .im-chips { display: flex; gap: 6px; padding: 10px 12px 6px; overflow-x: auto; border-top: 1px solid #ececec; }
    .im-chips button { flex: none; border: 1px solid #d6d6db; background: #fff; color: #0A84FF; border-radius: 99px; padding: 7px 12px; font: 500 13px -apple-system, Inter, sans-serif; cursor: pointer; transition: background .2s; }
    .im-chips button:hover { background: #f0f6ff; }
    .im-input { display: flex; align-items: center; gap: 8px; padding: 6px 12px 12px; }
    .im-input div { flex: 1; border: 1px solid #d6d6db; border-radius: 99px; padding: 7px 14px; font-size: 14px; color: #8e8e93; }
    .im-input b { width: 28px; height: 28px; border-radius: 50%; background: #0A84FF; display: grid; place-items: center; }

    /* ═════ STOCKS ═════ */
    .stocks { height: 300vh; }
    .stocks .pin { justify-content: center; }
    .stocks .bigword { --bfs: 17vw; left: 50%; top: 7vh; transform: translateX(calc(-50% + var(--p, 0) * -12vw)); }
    .stk { width: min(1060px, calc(100vw - 32px)); height: min(600px, 74vh); display: grid; grid-template-rows: 40px 1fr; z-index: 2; margin-top: 12vh; }
    .stk-main { display: grid; grid-template-columns: 330px 1fr; min-height: 0; }
    .stk-list { border-right: 1px solid #2c2c2e; overflow-y: auto; }
    .stk-list button { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 11px 16px; border: 0; border-bottom: 1px solid #2c2c2e; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
    .stk-list button.on { background: #0A84FF22; box-shadow: inset 3px 0 0 #0A84FF; }
    .stk-list b { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
    .stk-list small { font-size: 12px; color: #98989f; grid-column: 1; }
    .stk-list .px { grid-row: 1 / 3; grid-column: 2; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 4px; }
    .stk-list .px span { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
    .stk-list .px em { font-style: normal; font-size: 12px; font-weight: 600; padding: 2px 7px; border-radius: 6px; background: #30D158; color: #04270d; }
    .stk-detail { padding: 22px 26px; display: flex; flex-direction: column; min-width: 0; }
    .stk-detail .sym { font-size: 13px; color: #98989f; font-weight: 600; letter-spacing: .02em; }
    .stk-detail h3 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; letter-spacing: -.02em; margin-top: 2px; }
    .stk-detail .big { font-size: clamp(34px, 4vw, 52px); font-weight: 700; letter-spacing: -.03em; margin-top: 10px; font-variant-numeric: tabular-nums; }
    .stk-detail .chg { color: #30D158; font-weight: 600; font-size: 15px; }
    .stk-chart { flex: 1; min-height: 150px; margin: 14px 0 10px; position: relative; }
    .stk-chart svg { width: 100%; height: 100%; }
    .stk-chart .c { transform-box: fill-box; transform-origin: 50% 100%; animation: cgrow .5s var(--ease) both; animation-delay: calc(var(--i) * 12ms); }
    @keyframes cgrow { from { transform: scaleY(0); opacity: 0; } }
    .stk-detail p { color: #c7c7cc; font-size: 15px; line-height: 1.5; max-width: 46em; }
    .stk-foot { margin-top: 10px; font-size: 11px; color: #6e6e73; }
    .stk-tabs { display: flex; gap: 4px; margin-left: auto; position: relative; z-index: 1; }
    .stk-tabs span { font-size: 12px; padding: 3px 9px; border-radius: 6px; color: #98989f; }
    .stk-tabs span.on { background: #3a3a3c; color: #fff; }

    /* ═════ BADGES (lanyards) ═════ */
    .badges { min-height: 118vh; padding: 0 0 12vh; }
    .badges .bigword { --bfs: 20vw; left: var(--gutter); bottom: 6vh; }
    .bd-wrap { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: start; max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); z-index: 2; }
    .bd-stage { position: relative; height: 92vh; min-height: 640px; }
    .lanyard { position: absolute; top: -8px; width: 260px; transform-origin: 50% 0; will-change: transform; touch-action: none; cursor: grab; }
    .lanyard:active { cursor: grabbing; }
    .lanyard .strap { width: 22px; height: var(--len, 300px); margin: 0 auto; background: repeating-linear-gradient(90deg, var(--s1) 0 11px, var(--s2) 11px 22px); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
    .lanyard .clip { width: 34px; height: 26px; margin: -2px auto 0; border-radius: 6px 6px 10px 10px; background: linear-gradient(135deg, #f3f4f6, #9aa1ad 45%, #eceef1 70%, #7c8391); box-shadow: 0 3px 6px rgba(0,0,0,.25); }
    .card-id { margin-top: -6px; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 40px 70px -30px rgba(10,15,31,.55), 0 0 0 1px rgba(10,15,31,.08); user-select: none; }
    .card-id .hole { width: 46px; height: 9px; border-radius: 9px; background: #d9dce3; margin: 12px auto 0; box-shadow: inset 0 1px 2px rgba(0,0,0,.25); }
    .card-id .band { padding: 14px 18px 12px; color: #fff; }
    .card-id .band small { display: block; font: 600 10px var(--mono); letter-spacing: .14em; opacity: .85; }
    .card-id .band b { display: block; font: 800 24px/1 var(--sans); letter-spacing: -.03em; margin-top: 6px; text-transform: uppercase; }
    .card-id .ph { position: relative; margin: 14px 18px 0; aspect-ratio: 4 / 3.4; border-radius: 10px; overflow: hidden; background: #eef0f5; }
    .card-id .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
    .card-id .ph .ph-empty { position: absolute; inset: 0; display: grid; place-items: center; color: #8a90a2; font: 500 12px var(--sans); text-align: center; padding: 10px; background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(10,15,31,.05) 10px 11px); }
    .card-id .who { padding: 12px 18px 4px; }
    .card-id .who b { display: block; font: 700 17px/1.15 var(--sans); color: #0A0F1F; letter-spacing: -.01em; }
    .card-id .who span { font-size: 13px; color: #4B5268; }
    .card-id .bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 18px 16px; }
    .card-id .barcode { height: 26px; width: 120px; background: repeating-linear-gradient(90deg, #0A0F1F 0 2px, transparent 2px 4px, #0A0F1F 4px 5px, transparent 5px 8px, #0A0F1F 8px 11px, transparent 11px 12px); }
    .card-id .bar span { font: 600 11px var(--mono); color: #4B5268; }
    .bd-copy { padding-top: 22vh; }
    .bd-copy .h2 { font-family: var(--sans); font-weight: 800; letter-spacing: -.045em; text-transform: none; font-size: clamp(40px, 4.8vw, 72px); }
    .bd-copy .h2 em { font-family: var(--serif); font-weight: 300; font-style: italic; letter-spacing: -.02em; }
    .bd-item { margin-top: 30px; border-top: 1px solid var(--rule); padding-top: 16px; }
    .bd-item h3 { font: 700 20px/1.2 var(--sans); letter-spacing: -.01em; }
    .bd-item p { color: var(--muted); margin-top: 6px; font-size: 16px; }
    .bd-hint { margin-top: 26px; }

    /* ═════ GYM: Preview + Safari ═════ */
    .gymd { height: 240vh; }
    .gymd .pin { justify-content: center; }
    .gymd .bigword { --bfs: 19vw; left: var(--gutter); top: 9vh; transform: translateX(calc(var(--p, 0) * -14vw)); }
    .gym-stage { position: relative; width: min(1180px, calc(100vw - 2 * var(--gutter))); height: min(620px, 76vh); margin-top: 40px; }
    .pv { position: absolute; left: 0; top: 0; width: 58%; z-index: 2; transform: translateX(calc((1 - min(var(--p, 0) * 3, 1)) * -40vw)) rotate(calc((1 - min(var(--p, 0) * 3, 1)) * -6deg)); }
    .pv .cmp { position: relative; aspect-ratio: 16 / 11; background: #111; cursor: ew-resize; touch-action: pan-y; }
    .pv .cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
    .pv .cmp .after { clip-path: inset(0 0 0 var(--w, 50%)); }
    .pv .cmp .ln { position: absolute; top: 0; bottom: 0; left: var(--w, 50%); width: 2px; background: #fff; }
    .pv .cmp .kn { position: absolute; top: 50%; left: var(--w, 50%); width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.35); display: grid; place-items: center; }
    .pv .cmp .tag { position: absolute; bottom: 12px; padding: 5px 10px; border-radius: 6px; background: rgba(0,0,0,.6); color: #fff; font: 600 11px var(--mono); letter-spacing: .08em; backdrop-filter: blur(8px); }
    .pv .cmp .tl { left: 12px; } .pv .cmp .tr { right: 12px; }
    .pv .cap { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; font-size: 12px; color: #6e6e73; }
    .sf { position: absolute; right: 0; bottom: 0; width: 50%; z-index: 3; transform: translateX(calc((1 - min(max(var(--p, 0) * 3 - .5, 0), 1)) * 50vw)) rotate(calc((1 - min(max(var(--p, 0) * 3 - .5, 0), 1)) * 5deg)); }
    .sf .url { flex: 1; margin: 0 8px 0 70px; height: 26px; border-radius: 7px; background: #fff; border: 1px solid #dcdcdc; display: flex; align-items: center; gap: 6px; padding: 0 10px; font-size: 12px; color: #3b3b3d; overflow: hidden; white-space: nowrap; position: relative; z-index: 1; }
    .sf .url svg { width: 12px; height: 12px; flex: none; }
    .sf-page { padding: 18px 20px 20px; background: #fff; }
    .sf-mast { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 3px solid #111; padding-bottom: 8px; }
    .sf-mast b { font: 700 28px/1 Georgia, var(--serif); letter-spacing: -.02em; }
    .sf-mast span { font: 600 10px var(--mono); letter-spacing: .08em; color: #666; }
    .sf-page h3 { font: 700 clamp(22px, 2.2vw, 30px)/1.08 Georgia, var(--serif); letter-spacing: -.015em; margin: 12px 0 10px; }
    .sf-page img { width: 100%; aspect-ratio: 16 / 8.5; object-fit: cover; object-position: 50% 30%; border-radius: 4px; }
    .sf-page p { font-size: 13px; color: #555; margin-top: 8px; }
    .sf-page .go { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; background: #0A84FF; color: #fff; text-decoration: none; font: 600 14px -apple-system, Inter, sans-serif; padding: 9px 14px; border-radius: 8px; }
    .gym-facts { position: absolute; left: 0; bottom: 0; width: 45%; z-index: 1; color: var(--cream); opacity: calc(min(max(var(--p, 0) * 3 - 1, 0), 1)); }
    .gym-facts h3 { font: 800 clamp(24px, 2.6vw, 38px)/1.05 var(--sans); letter-spacing: -.035em; }
    .gym-facts p { color: var(--muted); margin-top: 10px; font-size: 16px; max-width: 32em; }

    /* ═════ FLASHSHARE (its own brand: the warm study desk) ═════ */
    .fsx { --cream-fs: #FBF3E1; --card-fs: #FFFBF0; --butter: #F5C842; --marigold: #E8A22E; --ink-fs: #2A2520; --ink-soft-fs: #4A413A; --ink-muted-fs: #6B6057; --gold-lbl: #8A5A00;
      height: 220vh; background: radial-gradient(60% 55% at 70% 38%, #FDE9A6 0%, rgba(253,233,166,0) 70%), var(--cream-fs); color: var(--ink-fs); }
    .fsx .pin { justify-content: center; }
    .fsx-grid { width: min(1240px, calc(100vw - 2 * var(--gutter))); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
    .fs-word { display: flex; align-items: flex-start; gap: 2px; font: 700 34px/1 'Familjen Grotesk', var(--sans); color: var(--butter); -webkit-text-stroke: 2px #C28218; text-shadow: 3px 3px 0 #C28218; letter-spacing: -.02em; }
    .fs-word sup { font-size: 13px; transform: rotate(-12deg) translateY(-6px); display: inline-block; -webkit-text-stroke: 0; text-shadow: none; color: #C28218; font-weight: 700; }
    .fsx h2 { font: italic 400 clamp(56px, 7vw, 108px)/.95 'Instrument Serif', var(--serif); letter-spacing: -.02em; margin-top: 22px; }
    .fsx h2 .mk { background: linear-gradient(transparent 58%, #FBDF7E 58%, #FBDF7E 90%, transparent 90%); padding: 0 .06em; }
    .fsx .lede { font: 400 18px/1.55 'Geist', var(--sans); color: var(--ink-soft-fs); margin-top: 20px; max-width: 30em; }
    .fs-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; max-width: 520px; }
    .fs-nums div { background: var(--card-fs); border-radius: 20px; padding: 16px 18px; box-shadow: 0 1px 0 rgba(42,37,32,.06), 0 12px 24px -18px rgba(42,37,32,.3); }
    .fs-nums b { display: block; font: 700 34px/1 'Familjen Grotesk', var(--sans); letter-spacing: -.03em; }
    .fs-nums span { font: 400 14px/1.35 'Geist', var(--sans); color: var(--ink-muted-fs); }
    .fs-row { display: flex; align-items: center; gap: 16px; margin-top: 26px; flex-wrap: wrap; }
    .fs-gold { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 999px; font: 600 15px 'Geist', var(--sans); color: #3D2A06; text-decoration: none; background: linear-gradient(#FBDF7E, #F5C842 55%, #E8A22E); box-shadow: inset 0 -2px 0 #C28218, 0 2px 4px rgba(61,42,6,.18); }
    .fs-row small { font: 400 14px 'Geist', var(--sans); color: var(--ink-muted-fs); }
    .fs-pitch { display: flex; gap: 12px; align-items: center; margin-top: 22px; font: 400 14px 'Geist', var(--sans); color: var(--ink-muted-fs); }
    .fs-pitch img { width: 96px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
    .phone3d { position: relative; height: min(76vh, 680px); display: grid; place-items: center; perspective: 1600px; }
    .phone3d::before { content: ""; position: absolute; width: 80%; height: 30px; bottom: 2%; border-radius: 50%; background: radial-gradient(closest-side, rgba(42,37,32,.35), transparent); filter: blur(6px); }
    .iphone {
      position: relative; height: 100%; aspect-ratio: 9 / 19.2; border-radius: 13.5% / 6.4%; padding: 3.2%;
      background: linear-gradient(145deg, #3b3f48, #15171c 55%, #2d3038); box-shadow: inset 0 0 0 1.5px #5c616d, inset 0 0 0 4px #0d0e11, 0 60px 90px -40px rgba(42,37,32,.6);
      transform: rotateY(calc(-22deg + var(--p, 0) * 44deg)) rotateX(6deg) rotateZ(calc(-3deg + var(--p, 0) * 6deg)); transform-style: preserve-3d;
    }
    .iphone::after { content: ""; position: absolute; inset: 3.2%; border-radius: 10.5% / 5%; pointer-events: none; background: linear-gradient(calc(115deg + var(--p, 0) * 30deg), rgba(255,255,255,.16), transparent 32%); z-index: 5; }
    .scr { position: relative; width: 100%; height: 100%; border-radius: 10.5% / 5%; overflow: hidden; background: var(--cream-fs); display: flex; flex-direction: column; font-family: 'Geist', var(--sans); color: var(--ink-fs); container-type: inline-size; }
    .island { position: absolute; top: 2.2%; left: 50%; width: 31%; height: 3.6%; transform: translateX(-50%); background: #000; border-radius: 99px; z-index: 4; }
    .sb { display: flex; justify-content: space-between; align-items: center; padding: 3.6cqw 7cqw 0; height: 11cqw; font: 600 4.2cqw/1 -apple-system, Inter, sans-serif; }
    .sb svg { height: 3.6cqw; width: auto; }
    .app-top { padding: 3cqw 6cqw 0; display: flex; justify-content: space-between; align-items: center; }
    .app-top .fs-word { font-size: 7.5cqw; -webkit-text-stroke-width: .5cqw; text-shadow: .8cqw .8cqw 0 #C28218; }
    .app-top .fs-word sup { font-size: 3cqw; }
    .app-top span { font: 500 3.4cqw 'Geist', sans-serif; color: var(--ink-muted-fs); }
    .tonight { padding: 3cqw 6cqw 0; font: italic 400 7cqw/1.1 'Instrument Serif', serif; }
    .prog { margin: 3cqw 6cqw 0; height: 1.4cqw; border-radius: 9px; background: #EFDDA9; overflow: hidden; }
    .prog i { display: block; height: 100%; width: var(--pr, 0%); background: linear-gradient(90deg, #F5C842, #E8A22E); transition: width .5s var(--ease); }
    .deck { flex: 1; position: relative; margin: 5cqw 6cqw 0; perspective: 900px; }
    .fcard { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3,1.3,.5,1), opacity .35s, translate .45s var(--ease); cursor: pointer; }
    .fcard.flip { transform: rotateY(180deg); }
    .fcard.gone { opacity: 0; translate: -120% 0; }
    .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 5.5cqw; background: var(--card-fs); box-shadow: 0 2cqw 5cqw -2cqw rgba(42,37,32,.35), 0 0 0 .3cqw rgba(42,37,32,.06); padding: 6cqw 6cqw 5cqw 9cqw; display: flex; flex-direction: column; overflow: hidden;
      background-image: linear-gradient(90deg, transparent 5.2cqw, rgba(232,162,46,.55) 5.2cqw, rgba(232,162,46,.55) 5.5cqw, transparent 5.5cqw), repeating-linear-gradient(transparent 0 7.4cqw, rgba(76,106,156,.14) 7.4cqw 7.6cqw); }
    .face.back { transform: rotateY(180deg); }
    .face .sub { font: 600 3.1cqw 'Geist Mono', var(--mono); letter-spacing: .08em; color: var(--gold-lbl); text-transform: uppercase; }
    .face .qa { font: italic 400 16cqw/1 'Instrument Serif', serif; color: rgba(42,37,32,.1); position: absolute; right: 5cqw; bottom: 1cqw; }
    .face .q { font: italic 400 8.6cqw/1.12 'Instrument Serif', serif; margin-top: 5cqw; }
    .face .hint { margin-top: auto; font: 400 3.4cqw 'Geist', sans-serif; color: var(--ink-muted-fs); }
    .face .holes { position: absolute; left: 1.6cqw; top: 18%; display: grid; gap: 14cqw; }
    .face .holes i { width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: #EFDDA9; box-shadow: inset 0 .3cqw .5cqw rgba(0,0,0,.15); }
    .keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2cqw; padding: 5cqw 6cqw 3cqw; }
    .keys button { border: 0; border-radius: 3.4cqw; padding: 2.6cqw 0 2cqw; font: 600 3.6cqw 'Geist', sans-serif; color: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .6cqw; transition: transform .15s, opacity .3s; }
    .keys button small { font: 400 2.8cqw 'Geist Mono', monospace; opacity: .85; }
    .keys button:active { transform: scale(.94); }
    .keys:not(.ready) button { opacity: .35; pointer-events: none; }
    .k-again { background: #C25A3A; } .k-hard { background: #C28218; } .k-good { background: #5E9048; } .k-easy { background: #4C6A9C; }
    .sample { text-align: center; font: 400 2.9cqw 'Geist', sans-serif; color: var(--ink-muted-fs); padding-bottom: 5cqw; }
    .done { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 3cqw; padding: 8cqw; }
    .done.show { display: flex; animation: pop .6s cubic-bezier(.34,1.56,.64,1); }
    @keyframes pop { from { transform: scale(.85); opacity: 0; } }
    .done img { width: 36cqw; }
    .done b { font: italic 400 8cqw/1.1 'Instrument Serif', serif; }
    .done span { font: 400 3.6cqw 'Geist', sans-serif; color: var(--ink-muted-fs); }
    .done button { margin-top: 2cqw; border: 0; border-radius: 99px; padding: 3cqw 6cqw; font: 600 3.8cqw 'Geist', sans-serif; color: #3D2A06; background: linear-gradient(#FBDF7E, #F5C842 55%, #E8A22E); box-shadow: inset 0 -.6cqw 0 #C28218; cursor: pointer; }
    .home-ind { width: 34%; height: 1.2cqw; border-radius: 9px; background: #2A2520; opacity: .8; margin: 0 auto 2.4cqw; }
    .kad-peek { position: absolute; width: 110px; right: 4%; top: 12%; transform: rotate(8deg); filter: drop-shadow(0 12px 18px rgba(42,37,32,.25)); animation: kadb 3.5s ease-in-out infinite alternate; }
    @keyframes kadb { to { transform: rotate(2deg) translateY(-10px); } }

    /* ═════ VTOL: window zooms to full screen ═════ */
    .vt { height: 240vh; }
    .vt .pin { justify-content: center; }
    .vt .bigword { --bfs: 22vw; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: calc(1 - var(--p, 0) * 3); }
    .vt-win { position: absolute; z-index: 2; left: 50%; top: 50%;
      width: calc(46vw + min(var(--p, 0) * 1.7, 1) * 54vw); height: calc(52vh + min(var(--p, 0) * 1.7, 1) * 48vh);
      transform: translate(-50%, -50%); border-radius: calc((1 - min(var(--p, 0) * 1.7, 1)) * 12px); display: flex; flex-direction: column; }
    .vt-win .mw-bar { flex: none; margin-top: calc(min(var(--p, 0) * 1.7, 1) * -40px); }
    .vt-view { position: relative; flex: 1; overflow: hidden; background: #0d1422; }
    .vt-view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .8s var(--ease); }
    .vt-view img.cfd { opacity: 0; }
    .vt-view.late img.cfd { opacity: 1; }
    .vt-view::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.85)); opacity: calc((var(--p, 0) - .4) * 2.5); }
    .vt-copy { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 6vh; z-index: 3; color: #fff; opacity: calc((var(--p, 0) - .55) * 3); max-width: 720px; }
    .vt-copy h3 { font: 800 clamp(34px, 4.4vw, 64px)/1 var(--sans); letter-spacing: -.045em; }
    .vt-copy h3 em { font: italic 300 1em var(--serif); color: #7FA0FF; letter-spacing: -.02em; }
    .vt-copy p { color: #d0d4e0; margin-top: 12px; max-width: 34em; }
    .vt-copy a { display: inline-block; margin-top: 16px; color: #7FA0FF; text-decoration: none; }
    .vt-hud { position: absolute; right: 14px; top: 14px; z-index: 3; display: grid; gap: 4px; font: 600 11px var(--mono); color: #fff; background: rgba(0,0,0,.45); padding: 8px 10px; border-radius: 8px; backdrop-filter: blur(8px); }

    /* ═════ PHOTOS + Cover Flow ═════ */
    .photos { height: 300vh; }
    .photos .pin { justify-content: center; }
    .photos .bigword { --bfs: 17vw; left: var(--gutter); top: 7vh; transform: translateX(calc(var(--p, 0) * -16vw)); }
    .ph-win { width: min(1180px, calc(100vw - 32px)); height: min(640px, 78vh); display: grid; grid-template-rows: 40px 1fr; z-index: 2; margin-top: 10vh; }
    .ph-main { display: grid; grid-template-columns: 210px 1fr; min-height: 0; }
    .ph-side { background: #f3f3f5; border-right: 1px solid #e3e3e6; padding: 12px 10px; }
    .ph-side small { display: block; font-size: 11px; font-weight: 600; color: #8e8e93; padding: 8px 8px 6px; }
    .ph-side button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 9px; border: 0; border-radius: 7px; background: none; font: 500 13.5px -apple-system, Inter, sans-serif; color: #1d1d1f; cursor: pointer; text-align: left; }
    .ph-side button span { color: #8e8e93; font-size: 12px; }
    .ph-side button.on { background: #0A84FF; color: #fff; } .ph-side button.on span { color: #dbe9ff; }
    .flow { position: relative; overflow: hidden; background: linear-gradient(#1a1a1c, #000 70%); perspective: 1100px; }
    .flow-track { position: absolute; left: 50%; top: 44%; transform-style: preserve-3d; }
    .cover { position: absolute; width: var(--cw, 300px); aspect-ratio: 1; left: calc(var(--cw, 300px) / -2); top: calc(var(--cw, 300px) / -2); transition: transform .6s cubic-bezier(.2,.9,.25,1), opacity .4s; cursor: pointer; -webkit-box-reflect: below 2px linear-gradient(transparent 62%, rgba(255,255,255,.22)); }
    .cover img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; box-shadow: 0 20px 40px -10px rgba(0,0,0,.6); }
    .flow-cap { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; color: #fff; }
    .flow-cap b { display: block; font-size: 15px; font-weight: 600; }
    .flow-cap span { font-size: 12px; color: #a1a1a6; }
    .flow-nav { position: absolute; bottom: 16px; right: 16px; display: flex; gap: 6px; }
    .flow-nav button { width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; cursor: pointer; font-size: 15px; }

    /* ═════ WRITING desktop ═════ */
    .wdesk { min-height: 100vh; padding: 12vh 0 16vh; }
    .wdesk .bigword { --bfs: 18.5vw; left: var(--gutter); top: 8vh; }
    .wdesk .bw2 { left: auto; right: var(--gutter); top: auto; bottom: 6vh; }
    .icons { position: relative; z-index: 2; width: min(1240px, calc(100vw - 2 * var(--gutter))); height: 80vh; min-height: 640px; margin: 0 auto; }
    .ficon { border: 0; background: none; font: inherit; color: inherit; position: absolute; left: var(--x); top: var(--y); width: 236px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px; border-radius: 8px; cursor: default; user-select: none; touch-action: none; }
    .ficon.sel { background: rgba(255,255,255,.18); }
    .ficon .doc { position: relative; width: 148px; height: 188px; background: #fff; border-radius: 6px; box-shadow: 0 8px 18px -6px rgba(0,0,0,.45); overflow: hidden; }
    .ficon .doc img { width: 100%; height: 62%; object-fit: cover; }
    .ficon .doc::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 18px; height: 36px; background: repeating-linear-gradient(#d7d9df 0 2px, transparent 2px 6px); }
    .ficon .doc em { position: absolute; left: 10px; bottom: 62px; font: 700 13px var(--mono); padding: 3px 7px; border-radius: 3px; background: #E5484D; color: #fff; font-style: normal; }
    .ficon .web { width: 140px; height: 140px; border-radius: 32px; background: linear-gradient(160deg, #fff, #dfe4ee); display: grid; place-items: center; box-shadow: 0 8px 18px -6px rgba(0,0,0,.4); font: 700 22px Georgia, serif; color: #0A0F1F; text-align: center; line-height: 1.05; padding: 12px; }
    .ficon span { font: 500 16px/1.25 -apple-system, Inter, sans-serif; color: #fff; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.6); padding: 1px 5px; border-radius: 4px; }
    .ficon.sel span { background: #0A84FF; text-shadow: none; }
    .widget { position: absolute; right: 0; top: 0; width: 330px; border-radius: 22px; padding: 16px 16px 12px; background: rgba(20,22,30,.55); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); color: #fff; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6), inset 0 0 0 .5px rgba(255,255,255,.2); }
    .widget .top { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; }
    .widget .top span { color: #30D158; }
    .widget .candles { height: 110px; margin: 8px 0 0; }
    .widget small { font-size: 11px; color: #a1a1a6; }
    .candles svg { width: 100%; height: 100%; overflow: visible; }
    .candles .c { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); opacity: 0; transition: transform .5s var(--ease), opacity .3s; }
    .candles .c.on { transform: none; opacity: 1; }
    .candles .up { fill: #30D158; stroke: #30D158; } .candles .dn { fill: #FF453A; stroke: #FF453A; }
    .candles .last { font: 11px var(--mono); fill: #30D158; }
    .ql { position: fixed; inset: 0; z-index: 180; display: grid; place-items: center; background: rgba(0,0,0,.25); opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; padding: 20px; }
    .ql.open { opacity: 1; visibility: visible; transition: opacity .25s; }
    .ql .mw { width: min(620px, 100%); transform: scale(.9); transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
    .ql.open .mw { transform: none; }
    .ql .qimg { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
    .ql .qin { padding: 20px 22px 22px; }
    .ql .qin small { font: 600 11px var(--mono); letter-spacing: .08em; color: #6e6e73; }
    .ql .qin h3 { font: 700 26px/1.1 var(--sans); letter-spacing: -.025em; margin-top: 6px; }
    .ql .qin p { color: #4b4b50; margin-top: 10px; font-size: 15px; }
    .ql .qin .go { display: inline-block; margin-top: 16px; background: #0A84FF; color: #fff; text-decoration: none; font: 600 14px -apple-system, Inter, sans-serif; padding: 9px 14px; border-radius: 8px; }
    .ql .x { width: 12px; height: 12px; border-radius: 50%; background: #FF5F57; border: 0; cursor: pointer; }
    .wd-hint { position: absolute; left: 0; bottom: -40px; }

    /* ═════ NOW: Reminders + About This Mac ═════ */
    .nowd { min-height: 110vh; padding: 14vh 0; }
    .nowd .bigword { --bfs: 30vw; left: 50%; top: 50%; transform: translate(-50%, -50%); }
    .now-grid { position: relative; z-index: 2; width: min(1180px, calc(100vw - 2 * var(--gutter))); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 28px; align-items: start; }
    .rem { transform: rotate(-1.2deg); }
    .rem-body { display: grid; grid-template-columns: 170px 1fr; min-height: 420px; }
    .rem-side { background: #f3f3f5; border-right: 1px solid #e3e3e6; padding: 14px 10px; display: grid; gap: 8px; align-content: start; }
    .rem-side div { background: #fff; border-radius: 10px; padding: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
    .rem-side b { display: block; font-size: 22px; font-weight: 700; }
    .rem-side span { font-size: 12px; color: #6e6e73; }
    .rem-list { padding: 16px 20px; }
    .rem-list h4 { font-size: 22px; font-weight: 700; color: #0A84FF; letter-spacing: -.01em; margin: 4px 0 8px; }
    .rem-list h4.done-h { color: #8e8e93; margin-top: 18px; }
    .rem-list label { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-bottom: 1px solid #f0f0f2; font-size: 14.5px; cursor: pointer; }
    .rem-list input { appearance: none; -webkit-appearance: none; flex: none; width: 19px; height: 19px; border-radius: 50%; border: 1.5px solid #c7c7cc; margin-top: 1px; display: grid; place-items: center; cursor: pointer; transition: all .2s; }
    .rem-list input:checked { border-color: #0A84FF; background: radial-gradient(circle, #0A84FF 45%, transparent 48%); }
    .rem-list input:checked + span { color: #8e8e93; text-decoration: line-through; }
    .rem-list label span small { display: block; color: #8e8e93; font-size: 12px; text-decoration: none; }
    .rem-list a { color: #0A84FF; }
    .about-mac { transform: rotate(1.5deg); margin-top: 60px; }
    .am-body { padding: 26px 26px 22px; display: grid; grid-template-columns: 110px 1fr; gap: 22px; align-items: start; }
    .am-body > img { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; object-position: 55% 30%; box-shadow: 0 10px 20px -8px rgba(0,0,0,.4); }
    .am-body h3 { font: 700 30px/1 var(--sans); letter-spacing: -.03em; }
    .am-body h3 span { font-weight: 300; }
    .am-body .ver { font-size: 12px; color: #6e6e73; margin-top: 4px; }
    .am-spec { margin-top: 12px; display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; font-size: 13px; }
    .am-spec dt { font-weight: 600; text-align: right; }
    .am-spec dd { color: #3b3b3d; }
    .am-btns { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
    .am-btns button { border: 1px solid #d1d1d6; background: #fff; border-radius: 7px; padding: 5px 12px; font: 500 13px -apple-system, Inter, sans-serif; cursor: pointer; }
    .am-btns button:hover { background: #f2f2f7; }
    .am-report { display: none; border-top: 1px solid #e5e5ea; padding: 16px 26px 22px; }
    .am-report.open { display: block; animation: pop .45s cubic-bezier(.34,1.56,.64,1); }
    .am-report h5 { font-size: 13px; font-weight: 700; margin-top: 10px; }
    .am-report h5:first-child { margin-top: 0; }
    .am-report p { font-size: 13px; color: #4b4b50; margin-top: 2px; }
    .chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
    .chips span { font-size: 11.5px; padding: 3px 9px; border-radius: 99px; background: #f2f2f7; color: #1d1d1f; }
    .am-update { font-size: 12.5px; color: #0A84FF; margin-top: 10px; min-height: 1.3em; }

    /* ═════ CONTACT: Mail compose ═════ */
    .mail-desk { min-height: 104vh; padding: 14vh 0 10vh; display: grid; place-items: center; }
    .mail-desk .bigword { --bfs: 26vw; left: 50%; top: 50%; transform: translate(-50%, -50%); }
    .mail { position: relative; z-index: 2; width: min(720px, calc(100vw - 32px)); }
    .mail-bar-actions { display: flex; gap: 8px; margin-left: auto; position: relative; z-index: 1; }
    .mail-bar-actions a, .mail-bar-actions button { display: grid; place-items: center; width: 30px; height: 26px; border-radius: 6px; border: 0; background: none; cursor: pointer; color: #3b3b3d; }
    .mail-bar-actions .send { width: auto; padding: 0 12px; gap: 6px; display: flex; align-items: center; background: #0A84FF; color: #fff; font: 600 13px -apple-system, Inter, sans-serif; }
    .mrow { display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-bottom: 1px solid #ececf0; font-size: 14px; }
    .mrow label { color: #8e8e93; width: 62px; flex: none; }
    .mrow input, .mrow select { flex: 1; border: 0; outline: 0; font: 14px -apple-system, Inter, sans-serif; background: none; color: #1d1d1f; padding: 2px 0; }
    .mrow .to { display: inline-flex; align-items: center; gap: 6px; background: #e8f0ff; color: #0A5BD3; border-radius: 6px; padding: 3px 9px; font-weight: 500; }
    .mail textarea { width: 100%; min-height: 220px; border: 0; outline: 0; padding: 16px 18px; font: 15px/1.55 -apple-system, Inter, sans-serif; resize: vertical; color: #1d1d1f; }
    .mail .sig { padding: 0 18px 18px; font-size: 13px; color: #8e8e93; }
    .mail .err { color: #E5484D; font-size: 12.5px; padding: 0 18px 10px; min-height: 1em; }
    .mail-links { position: relative; z-index: 2; margin-top: 22px; display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
    .mail-links a { color: var(--cream); text-decoration: none; font: 600 15px var(--sans); border-bottom: 1px solid var(--rule-2); padding-bottom: 2px; }

    /* ═════ footer + shut down ═════ */
    .osfoot { padding: 40px 0 34px; }
    .osfoot .row { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
    .osfoot .big { font: 800 clamp(40px, 7vw, 110px)/.85 var(--sans); letter-spacing: -.06em; text-transform: uppercase; }
    .osfoot .acts { display: flex; gap: 10px; flex-wrap: wrap; }
    .osfoot .acts button, .osfoot .acts a { border: 1px solid var(--rule-2); background: none; color: var(--cream); border-radius: 99px; padding: 9px 16px; font: 500 14px var(--sans); cursor: pointer; text-decoration: none; }
    .osfoot .acts button:hover, .osfoot .acts a:hover { background: var(--field); }
    .osfoot .fine { margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font: 11px var(--mono); letter-spacing: .06em; color: var(--dim); }
    .shutdown { position: fixed; inset: 0; z-index: 600; background: #000; color: #8e8e93; display: grid; place-items: center; text-align: center; opacity: 0; visibility: hidden; transition: opacity .8s, visibility 0s .8s; font: 400 15px -apple-system, Inter, sans-serif; }
    .shutdown.on { opacity: 1; visibility: visible; transition: opacity .8s; }
    .shutdown b { display: block; color: #fff; font: 800 44px/1 var(--sans); letter-spacing: -.04em; margin-bottom: 10px; }
    .shutdown button { margin-top: 18px; border: 1px solid #3a3a3c; background: none; color: #fff; border-radius: 99px; padding: 8px 16px; font: inherit; cursor: pointer; }

    /* lightbox */
    .lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.94); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
    .lightbox.open { opacity: 1; visibility: visible; transition: opacity .35s; }
    .lightbox img { max-width: 92vw; max-height: 84vh; border-radius: 10px; }
    .lb-btn { position: absolute; background: rgba(255,255,255,.12); border: 0; color: #fff; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-size: 18px; }
    .lb-close { top: 20px; right: 20px; } .lb-prev { left: 20px; top: 50%; } .lb-next { right: 20px; top: 50%; }
    .lb-cap { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; font-size: 14px; color: #a1a1a6; }

    /* ─── shared page bits for sub-pages ─── */
    .js [data-reveal] { opacity: 0; transform: translateY(26px) scale(.98); transition: opacity .9s var(--ease), transform .9s var(--ease); }
    .js [data-reveal].in { opacity: 1; transform: none; }
    [data-d="1"] { transition-delay: .1s !important; } [data-d="2"] { transition-delay: .2s !important; } [data-d="3"] { transition-delay: .3s !important; }
    body.entered .menubar { animation: barDown .8s cubic-bezier(.16,1,.3,1) both; }
    @keyframes barDown { from { transform: translateY(-100%); } }
    @keyframes popIn { from { opacity: 0; transform: translateY(30px) scale(.94); } }
    @media (max-width: 860px) { .mb-left a.lk, .mb-right .item.hide-m { display: none; } .mb-burger { display: block; } .mb-app { margin-right: 0; } }
    @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .js [data-reveal] { opacity: 1; transform: none; } .lt .ch { transform: none !important; } }