:root {
      --bg:#ffffff; --ink:#1d1d1f; --muted:#6e6e73; --faint:#8a8a8e; --hair:rgba(0,0,0,0.07);
      --yellow:#f5c518; --yellow-2:#f0b90b; --yellow-soft:rgba(245,197,24,0.16);
      --e-blue:#2b7fff; --e-coral:#ef6c3a; --e-rose:#df6f8c;
      /* single source of truth for the 8 event/signal colors (shared by cards, hero widget, demo) */
      --sig-posture:#3b82f6; --sig-eye:#06b6d4; --sig-frame:#94a3b8; --sig-speech:#f97316;
      --sig-hand:#ef4444; --sig-sun:#eab308; --sig-gauge:#22c55e; --sig-volume:#d946ef;
      --w-cool:#f3f6fb; --w-warm:#fbf6ee; --w-rose:#fbf4f6; --w-cream:#fbf6e8; --w-grey:#f5f5f7;
      --font:-apple-system, BlinkMacSystemFont, "SF Pro Display","SF Pro Text","Helvetica Neue", Helvetica, Arial, sans-serif;
      --round:ui-rounded, "SF Pro Rounded", var(--font);
      --maxw:1040px;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
    html, body { margin: 0; padding: 0; }
    body { background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 19px; line-height: 1.47;
      -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; }
    a { color: inherit; text-decoration: none; }
    img, svg, video { display: block; max-width: 100%; }
    p { margin: 0; }
    .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
    .wide { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
    a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--e-blue); outline-offset: 3px; border-radius: 8px; }

    h1,h2,h3 { margin: 0; font-weight: 600; letter-spacing: -0.015em; }
    .t-hero { font-size: clamp(40px, 6.6vw, 80px); line-height: 1.05; font-weight: 600; letter-spacing: -0.02em; }
    .t-head { font-size: clamp(32px, 4.8vw, 56px); line-height: 1.07; font-weight: 600; letter-spacing: -0.016em; }
    .t-sub  { font-size: clamp(21px, 2.6vw, 28px); line-height: 1.28; font-weight: 600; letter-spacing: -0.012em; }
    .intro  { font-size: clamp(19px, 2vw, 23px); line-height: 1.42; color: var(--muted); }
    .eyebrow { font-size: 15px; font-weight: 600; color: var(--muted); }
    .hl-coral { color: var(--e-coral); } .hl-blue { color: var(--e-blue); } .hl-rose { color: var(--e-rose); } .hl-yellow { color: var(--yellow-2); }

    /* buttons */
    .b { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-family: inherit; font-size: 17px; font-weight: 500;
      line-height: 1; border: 0; cursor: pointer; border-radius: 980px; transition: filter .2s ease, background-color .2s ease, border-color .2s ease; white-space: nowrap; }
    .b svg { width: 16px; height: 16px; }
    .b-lg { height: 52px; padding: 0 28px; } .b-sm { height: 34px; padding: 0 17px; font-size: 15px; }
    .b-yellow { background: var(--yellow); color: #1d1d1f; } .b-yellow:hover { filter: brightness(1.05); }
    .b-ghost { background: transparent; color: var(--ink); border: 1px solid rgba(0,0,0,0.22); } .b-ghost:hover { background: rgba(0,0,0,0.04); }
    .b-soft { background: rgba(0,0,0,0.05); color: var(--ink); } .b-soft:hover { background: rgba(0,0,0,0.09); }
    .link { color: var(--ink); font-size: 17px; display: inline-flex; align-items: center; gap: 4px; opacity: .8; } .link:hover { opacity: 1; }
    .link .chev { font-size: 19px; line-height: 0; transition: transform .2s ease; } .link:hover .chev { transform: translateX(2px); }

    /* nav + wordmark */
    ttb-brand { display: contents; }
    .nav { position: fixed; inset: 0 0 auto 0; z-index: 100; height: 76px; }
    /* soft blur that fades to nothing at the bottom, so there is no hard line under the header */
    .nav::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
      background: linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0));
      -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
      -webkit-mask-image: linear-gradient(180deg, #000 56%, transparent); mask-image: linear-gradient(180deg, #000 56%, transparent); }
    .nav.scrolled { }
    .nav-in { height: 76px; display: flex; align-items: center; justify-content: space-between; }
    .wm { display: inline-flex; align-items: center; gap: 0; color: var(--ink); line-height: 1; }
    .wm .wm-name { display: inline-flex; align-items: baseline; font-family: var(--round); white-space: nowrap; }
    .wm .wmico { width: 34px; height: 34px; color: var(--yellow); flex: 0 0 auto; margin-right: 8px; object-fit: contain; }
    .wm--folded-stack .wm-stacked-wordmark { display:inline-flex; align-items:flex-end; color:var(--ink); font-family:var(--font); line-height:1; }
    .wm--folded-stack .wm-tic-stack { display:flex; flex-direction:column; align-items:center; justify-content:center;
      margin-right:3px; transform:translateY(-1px); }
    .wm--folded-stack .wm-tic-line { font-family:"Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size:10px; font-weight:500; line-height:.9; letter-spacing:0; }
    .wm--folded-stack .wm-tic-line:first-child { color:#AAA7AE; font-size:11px; font-weight:400; }
    .wm--folded-stack .wm-tic-line:last-child { color:#66636B; font-size:14px; font-weight:500; }
    .wm--folded-stack .wm-stack-bloom { color:var(--ink); font-size:25px; font-weight:710;
      font-variation-settings:"wght" 710; letter-spacing:-.05em; }
    .nav .wm .wmico { width: 52px; height: 52px; margin-right: 9px; transform: translateY(-1px); }
    .nav .wm--folded-light .wmico,
    .nav .wm--folded-stack .wmico { width: 52px; height: 52px; margin-right: 10px; transform: translateY(-1px); }
    .nav .wm--folded-stack .wmico { margin-right:5px; }
    .nav .wm--folded-stack .wm-stacked-wordmark { align-items:flex-end; }
    .nav .wm--folded-stack .wm-tic-line { line-height:.9; }
    /* The glassy header lightens dark-section backdrops, so DARK text (like bloom)
       stays legible but light-grey text washes out. Darken both "tic" lines toward
       bloom's ink so they hold on white AND dark. Header only. Tune darker/lighter. */
    .nav .wm--folded-stack .wm-tic-line:first-child { color:#6E6B76; }
    .nav .wm--folded-stack .wm-tic-line:last-child { color:#5B5863; }
    .nav .wm--folded-stack .wm-tic-line:first-child { font-size:16px; font-weight:400; }
    .nav .wm--folded-stack .wm-tic-line:last-child { font-size:20px; font-weight:500; }
    .nav .wm--folded-stack .wm-tic-stack { margin-right:2px; transform:translateY(-2px); }
    /* Plain font-weight (no font-variation-settings): iOS Safari drops the weight
       when it can't apply the "wght" axis, rendering bloom un-bold. */
    .nav .wm--folded-stack .wm-stack-bloom { font-size:30px; font-weight:700; font-variation-settings:normal; }
    .nav .wm--folded-light .wm-gradient-text { display:inline-flex; align-items:baseline; color:var(--ink);
      font-family:var(--font); font-size:27px; font-weight:710; font-variation-settings:"wght" 710;
      font-kerning:normal; font-feature-settings:"kern" 1, "liga" 1; letter-spacing:-.045em; }
    .nav .wm--folded-light .wm-tictic-gradient {
      background:linear-gradient(90deg,#B8B5BC 0%,#AAA7AE 42%,#7D7A82 68%,#4D4A52 100%);
      -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
      font-family:"Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-weight:400; font-kerning:none; letter-spacing:0; margin-right:.025em; }
    .nav .wm--folded-light .wm-letter { display:inline-block; }
    .nav .wm--folded-light .wm-letter:nth-child(3),
    .nav .wm--folded-light .wm-letter:nth-child(6) { margin-left:-.03em; }
    .nav .wm--folded-light .wm-letter:nth-child(4) { margin-left:.095em; }
    .nav .wm--folded-light .wm-bloom-ink { color:var(--ink); -webkit-text-fill-color:currentColor; }
    .nav-r { display: flex; align-items: center; gap: 26px; }
    .nav-r a.l { font-size: 14px; color: var(--ink); opacity: .8; } .nav-r a.l:hover { opacity: 1; }
    .nav .nav-r .b-yellow { color:var(--ink); background:transparent; border:1px solid rgba(29,29,31,.24); }
    .nav .nav-r .b-yellow:hover { background:rgba(29,29,31,.04); filter:none; }
    .nav.cta-promoted .nav-r .b-yellow { background:var(--yellow); border-color:transparent; }
    .nav.cta-promoted .nav-r .b-yellow:hover { background:var(--yellow); filter:brightness(1.05); }
    @media (max-width: 720px){ .nav-r a.l { display: none; } }
    @media (max-width: 460px){
      .nav, .nav-in { height: 68px; }
      .nav .wm .wmico { width: 44px; height: 44px; margin-right: 7px; }
      .nav .wm--folded-light .wm-gradient-text { font-size:22px; }
      .nav .wm--folded-stack .wm-tic-line:first-child { font-size:12px; }
      .nav .wm--folded-stack .wm-tic-line:last-child { font-size:15px; }
      .nav .wm--folded-stack .wm-tic-stack { margin-right:2px; transform:translateY(-1px); }
      .nav .wm--folded-stack .wm-stack-bloom { font-size:25px; }
      .nav-r .b-sm { height: 32px; padding: 0 13px; font-size: 13px; }
    }

    /* sections */
    .sec { padding: 128px 0; }
    .sec.cool { background: var(--w-cool); } .sec.warm { background: var(--w-warm); } .sec.rose { background: var(--w-rose); } .sec.cream { background: var(--w-cream); } .sec.grey { background: var(--w-grey); }
    .center { text-align: center; }
    .reveal { opacity: 0; transform: translateY(20px); transition: opacity .9s cubic-bezier(.22,.7,.2,1), transform .9s cubic-bezier(.22,.7,.2,1); }
    .reveal.in { opacity: 1; transform: none; }
    .lead-block { max-width: 760px; }

    /* hero */
    .hero { padding: 144px 0 132px; text-align: center; }
    .hero .t-hero { max-width: 16ch; margin: 0 auto; }
    .hero .intro { margin: 22px auto 0; max-width: 32ch; font-size: clamp(20px, 2.3vw, 26px); color: var(--ink); }
    .hero .cta { margin-top: 28px; display: flex; gap: 24px; align-items: center; justify-content: center; flex-wrap: wrap; }
    .hero .fine { margin-top: 16px; font-size: 13px; color: var(--faint); }

    /* mac desktop */
    .stage { margin-top: 60px; padding: 0 24px; }
    .mac { position: relative; max-width: 1060px; margin: 0 auto; aspect-ratio: 16/9.6; border-radius: 20px; overflow: hidden;
      box-shadow: 0 8px 20px rgba(0,0,0,0.08), 0 60px 100px -54px rgba(0,0,0,0.5); background: #1a2740; }
    .mac .wall { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
    .menubar { position: absolute; inset: 0 0 auto 0; height: 26px; z-index: 6; display: flex; align-items: center; justify-content: space-between; padding: 0 13px;
      font-size: 12.5px; color: rgba(255,255,255,0.95); background: rgba(0,0,0,0.14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
    .menubar .l { display: flex; align-items: center; gap: 16px; } .menubar .l b { font-weight: 600; } .menubar .l span { opacity: .82; }
    .menubar .l .ap { width: 13px; height: 13px; }
    .menubar .r { display: flex; align-items: center; gap: 12px; } .menubar .r svg { width: 15px; height: 15px; opacity: .92; }
    .menubar .r .mbloom { color: rgba(255,255,255,.8); opacity: 1; }
    @media (max-width: 620px){ .menubar .l span { display: none; } }
    .deskicon { position: absolute; z-index: 2; width: 58px; text-align: center; color: #fff; font-size: 11px; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
    .deskicon .ico { width: 44px; height: 36px; margin: 0 auto 4px; border-radius: 7px; background: linear-gradient(180deg,#7fc0ff,#4d9bf0); box-shadow: 0 2px 6px rgba(0,0,0,0.25); }
    .callwin { position: absolute; left: 44%; top: 49%; transform: translate(-50%,-50%); width: min(520px, 60%); border-radius: 12px; overflow: hidden; background: #000; box-shadow: 0 2px 6px rgba(0,0,0,0.2), 0 40px 60px -30px rgba(0,0,0,0.55); }
    .winbar { height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: #2b2b2e; }
    .tl { width: 11px; height: 11px; border-radius: 50%; } .tl.r{background:#ff5f57}.tl.y{background:#febc2e}.tl.g{background:#28c840}
    .wintitle { margin-left: 9px; font-size: 12px; color: rgba(255,255,255,0.6); }
    .rec { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.03em; color: rgba(255,255,255,0.72); font-variant-numeric: tabular-nums; }
    .rec i { width: 6px; height: 6px; border-radius: 50%; background: #ff5f57; box-shadow: 0 0 6px #ff5f57; animation: recPulse 1.7s ease-in-out infinite; }
    @keyframes recPulse { 0%,100%{ opacity: 1; } 50%{ opacity: .3; } }
    .meet { background: #101013; padding: 10px; }
    .mstage { position: relative; border-radius: 9px; overflow: hidden; background: #17171b; aspect-ratio: 16/9; box-shadow: inset 0 0 0 2px #4a90ff, 0 0 15px -2px rgba(74,144,255,0.6); }
    .mstage video { width: 100%; height: 100%; object-fit: cover; }
    .mstage .nm { position: absolute; left: 9px; bottom: 8px; font-size: 11px; font-weight: 600; color: #fff; background: #4a90ff; padding: 2px 10px; border-radius: 6px; }
    .mstrip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 7px; }
    .mstrip .mtile { position: relative; aspect-ratio: 16/10; border-radius: 7px; overflow: hidden; background: #17171b; }
    .mstrip .mtile img { width: 100%; height: 100%; object-fit: cover; }
    .mstrip .mtile .nm { position: absolute; left: 5px; bottom: 4px; font-size: 9px; font-weight: 500; color: #fff; background: rgba(0,0,0,0.5); padding: 1px 6px; border-radius: 4px; }
    .mctrl { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 0 3px; }
    .mc-btn { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,0.14); }
    .mc-btn svg { width: 15px; height: 15px; color: #fff; }
    .mc-btn.end { background: #ef3b3b; width: 44px; border-radius: 15px; }
    .dock { position: absolute; bottom: 9px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; align-items: flex-end; gap: 7px; padding: 6px 9px; border-radius: 18px; background: rgba(255,255,255,0.22); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.35); box-shadow: 0 8px 24px -8px rgba(0,0,0,0.4); }
    .dock .app { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; position: relative;
      background: rgba(255,255,255,0.12);
      box-shadow: inset 0 1px 1px rgba(255,255,255,0.42), inset 0 -1px 2px rgba(0,0,0,0.16), 0 3px 7px rgba(0,0,0,0.26); }
    .dock .app::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,0.22), transparent 50%); pointer-events: none; }
    .dock .app svg { width: 21px; height: 21px; position: relative; z-index: 1; color: rgba(255,255,255,0.92); }
    .dock .ic-bloom svg { color: var(--yellow); }
    @media (max-width: 560px){ .dock, .deskicon { display: none; } }

    /* ===== .tw = the ticticbloom widget. ONE shared component, reused in three places:
       the hero desktop (index.html), the laptop mock (index.html), and the live demo
       (.tw.tryit-tw, styled in demo.css). Terse class legend, used across all three:
         .tw-mini = collapsed pill   .tw-full = expanded rows   .tw-row = one signal row
         .cic = count icon   .lab = label   .spk = sparkline slot   .ct = count/dots
         .mk = mini glyph    .mc = mini count   .grip = drag handle
       Because it's shared, renaming these touches ~60 refs across HTML + JS + demo. ===== */
    .tw { position: absolute; z-index: 8; left: 80%; top: 11%; margin-left: -37px; width: 74px; height: 30px; border-radius: 9px; overflow: hidden;
      background: rgba(20,20,22,0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.1);
      box-shadow: 0 8px 22px -6px rgba(0,0,0,0.55); touch-action: none;
      transition: width .5s cubic-bezier(.33,1,.68,1), height .5s cubic-bezier(.33,1,.68,1), margin-left .5s cubic-bezier(.33,1,.68,1), border-radius .5s ease, transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease; }
    /* Yellow glow only while an event is flashing (a yellow icon is up) — driven by
       runMini toggling .tw-flash. Applies in both collapsed and expanded states. */
    .tw.tw-flash { box-shadow: 0 8px 22px -6px rgba(0,0,0,0.55), 0 0 22px -3px rgba(245,197,24,0.55); }
    .grip { position: absolute; top: 9px; left: 8px; z-index: 5; display: grid; grid-template-columns: 2px 2px; grid-auto-rows: 2px; gap: 2px; cursor: grab; padding: 1px; }
    .grip:active { cursor: grabbing; } .grip i { width: 2px; height: 2px; border-radius: 50%; background: rgba(255,255,255,0.5); }
    .tw-mini { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: opacity .26s ease .26s; }
    .tw-mini .mk { width: 16px; height: 16px; color: var(--yellow); display: grid; place-items: center; } .tw-mini .mk svg { width: 16px; height: 16px; }
    .tw-mini .mk.calm { color: rgba(255,255,255,0.2); animation: calmShimmer 2.8s ease-in-out infinite; }
    .tw-mini .mk.pop { animation: pop .42s cubic-bezier(.2,1.4,.4,1); }
    @keyframes calmShimmer { 0%,38%,100%{ color: rgba(255,255,255,0.15); } 56%{ color: rgba(255,255,255,0.55); } 74%{ color: rgba(255,255,255,0.15); } }
    @keyframes pop { 0%{transform:scale(.4);opacity:0} 60%{transform:scale(1.14)} 100%{transform:scale(1);opacity:1} }
    .tw-mini .mc { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.5); font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .22s ease; }
    .tw-mini .mc.show { opacity: 1; }
    .tw-full { position: absolute; inset: 0; padding: 9px 10px; opacity: 0; pointer-events: none; display: flex; flex-direction: column; gap: 1px; text-align: left; transition: opacity .18s ease; }
    .tw-title { display: flex; align-items: center; gap: 7px; height: 14px; padding: 0 3px; margin-bottom: 9px; font-style: italic; font-weight: 500; font-size: 10px; letter-spacing: -0.01em; color: rgba(255,255,255,0.5); cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; }
    .tw-title:active { cursor: grabbing; }
    .tw-title .grip2 { display: grid; grid-template-columns: 2px 2px; grid-auto-rows: 2px; gap: 2px; padding: 1px; flex: 0 0 auto; }
    .tw-title .grip2 i { width: 2px; height: 2px; border-radius: 50%; background: rgba(255,255,255,0.5); }
    .tw-title .tw-wm { display: inline-flex; align-items: baseline; }
    .tw-title .b { font-style: normal; font-family: var(--round); font-weight: 700; font-size: 12.5px; color: var(--yellow); margin-left: 1.5px; }
    .tw-streak { display: flex; align-items: center; gap: 9px; padding: 0 3px 9px; margin-bottom: 5px; border-bottom: 1px solid rgba(255,255,255,0.1); }
    .tw-streak .fl { width: 16px; height: 16px; color: var(--yellow); flex: 0 0 auto; animation: flamePulse 2.4s ease-in-out infinite; } .tw-streak .fl svg { width: 16px; height: 16px; }
    @keyframes flamePulse { 0%,100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.12); opacity: 1; } }
    .tw-streak .ht { flex: 1; min-width: 0; } .tw-streak .ht .a { font-size: 12.5px; font-weight: 600; color: #fff; } .tw-streak .ht .b2 { font-size: 10.5px; color: rgba(255,255,255,0.5); }
    .tw-streak .rings { display: flex; align-items: center; gap: 3px; flex: 0 0 auto; }
    .tw-streak .rings i { width: 9px; height: 9px; border-radius: 50%; box-sizing: border-box; border: 1.5px solid rgba(255,255,255,0.18); }
    .tw-streak .rings i.on { border: 2px solid var(--yellow); background: rgba(245,197,24,0.22); }
    .tw-row { display: flex; align-items: center; gap: 8px; padding: 3px; }
    .tw-row .cic { width: 16px; height: 16px; color: var(--yellow); flex: 0 0 auto; } .tw-row .cic svg { width: 16px; height: 16px; }
    .tw-row .lab { flex: 1; font-size: 11.5px; color: rgba(255,255,255,0.9); white-space: nowrap; }
    .tw-row .spk { width: 38px; height: 13px; flex: 0 0 auto; } .tw-row .spk svg { width: 38px; height: 13px; overflow: visible; }
    .tw-row .ct { width: 14px; text-align: right; font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.42); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
    .tw-row .ct i.ok { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.42); vertical-align: middle; }
    /* expanded state (hover-open via JS, tap-open on touch, and the intro).
       --hx/--hy is the clip-avoidance nudge so an edge-anchored widget never spills past the frame. */
    .tw.tw-open { width: 218px; height: 288px; margin-left: -109px; border-radius: 15px; transform: translate(var(--hx,0px), var(--hy,0px)); }
    .tw.tw-open .tw-mini { opacity: 0; pointer-events: none; } .tw.tw-open .tw-full { opacity: 1; pointer-events: auto; }
    .tw.tw-open .grip { opacity: 0; }  /* expanded view uses the inline grip inside the title row */
    /* while dragging, inline left/top is the sole positioner: kill the hover nudge and transitions,
       but keep the current size (a header-drag stays expanded, a grip-drag stays a pill). */
    .tw.dragging { transition: none !important; transform: none !important; }
    /* mobile: portrait "vertical monitor"; widget is the pill by default, taps to expand/collapse */
    @media (max-width: 640px) {
      .mac { max-width: 380px; aspect-ratio: 4/5; }
      .callwin { width: 78%; left: 50%; top: 43%; }   /* bigger + centered as the hero of the mock */
      .mstrip, .mctrl { display: none; }
      .tw { left: 50%; margin-left: -37px; top: auto; bottom: 6%; touch-action: manipulation; }
      .tw.tw-open { margin-left: -109px; }   /* stay centered when expanded */
      /* mobile mock is look-don't-touch: menus and the Projects icon are too small
         a hit target here and a stray drag/tap reads as broken rather than playful. */
      .menubar { pointer-events: none; }
      .deskicon { pointer-events: none; touch-action: none; }
    }

    /* full-bleed moment */
    .moment { position: relative; height: clamp(440px, 74vh, 700px); overflow: hidden; background: #000; }
    .moment video { width: 100%; height: 100%; object-fit: cover; }
    .moment .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.12) 0%, transparent 30%, rgba(0,0,0,0.5) 100%); }
    .moment .mc { position: absolute; left: 8%; right: 8%; bottom: 9%; color: #fff; text-align: right; }
    .moment .mc .t-head { color: #fff; max-width: 18ch; margin-left: auto; } .moment .mc .intro { color: rgba(255,255,255,0.86); margin-top: 14px; max-width: 34ch; margin-left: auto; }

    /* take a closer look */
    .closer { position: relative; overflow: hidden; margin-top: 44px; border-radius: 34px; padding: 68px 48px 62px;
      background: radial-gradient(78% 88% at 50% 30%, #fbfcfe 0%, #eef0f5 36%, #d7dae5 74%, #c7cbd7 100%); }
    .closer::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; pointer-events: none;
      background: radial-gradient(70% 120% at 50% 128%, rgba(255,255,255,0.7), transparent 56%); }
    @media (max-width:620px){ .closer { padding: 36px 20px 30px; border-radius: 26px; } }
    .closer-screen { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; aspect-ratio: 16/10; border-radius: 18px; overflow: hidden; background: #000;
      box-shadow: 0 30px 55px -26px rgba(28,32,48,0.42), 0 64px 66px -50px rgba(28,32,48,0.4); }
    .closer-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease-in-out; } .closer-screen video.on { opacity: 1; }
    .closer-screen .cw { position: absolute; right: 16px; bottom: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 13px; border-radius: 11px; background: rgba(22,22,24,0.92); backdrop-filter: blur(12px); color: #fff; box-shadow: 0 8px 20px -6px rgba(0,0,0,0.5), 0 0 18px -2px rgba(245,197,24,0.45); }
    .closer-screen .cw .mk { color: var(--yellow); display: grid; place-items: center; } .closer-screen .cw .mk svg { width: 17px; height: 17px; } .closer-screen .cw .lb { font-size: 13.5px; font-weight: 500; transition: opacity .3s ease; }
    .closer-tabs { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
    .closer-tab { position: relative; overflow: hidden; display: inline-flex; padding: 9px 16px; border-radius: 999px; background: rgba(255,255,255,0.72); cursor: pointer; }
    .closer-tab .tc { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 500; color: var(--muted); }
    .closer-tab .tc svg { width: 16px; height: 16px; }
    .closer-tab .tc.fillc { position: absolute; inset: 0; padding: 9px 16px; border-radius: inherit; background: var(--ink); color: #fff; clip-path: inset(0 100% 0 0); }
    .closer-tab .tc.fillc.run { animation: tabFill 3200ms linear forwards; }
    @keyframes tabFill { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

    /* split layout */
    .split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
    .split.l { grid-template-columns: 0.92fr 1.08fr; }
    @media (max-width: 880px){ .split, .split.l { grid-template-columns: 1fr; gap: 40px; } .split .media-first { order: -1; } }

    /* ===== what it notices: 8-event scroller (apple "why buy" treatment) ===== */
    .ev-scroll { margin-top: 44px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-behavior: smooth; }
    .ev-scroll::-webkit-scrollbar { display: none; }
    .ev-track { display: flex; gap: 22px; padding: 4px 24px 6px max(24px, calc((100vw - 1040px)/2 + 24px)); }
    .ev-card { flex: 0 0 366px; max-width: 88vw; display: flex; flex-direction: column; background: #101114; border-radius: 22px; padding: 34px 34px 30px; box-shadow: 0 26px 58px -32px rgba(0,0,0,0.55); }
    .ev-lead { display: flex; align-items: center; gap: 9px; }
    .ev-lead svg { width: 21px; height: 21px; stroke-width: 1.6; color: var(--c); }
    .ev-label { font-size: 16px; font-weight: 500; color: rgba(255,255,255,0.6); }
    .ev-head { margin-top: 13px; font-size: 25px; line-height: 1.16; font-weight: 600; letter-spacing: -0.021em; color: #fff; max-width: 15ch; }
    .ev-desc { margin-top: 14px; font-size: 15.5px; line-height: 1.58; color: rgba(255,255,255,0.64); }
    .ev-chart { margin-top: auto; padding-top: 28px; width: 100%; height: auto; display: block; }
    .ev-cap { margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--c); }
    .ev-navwrap { display: flex; justify-content: flex-end; margin-top: 30px; }
    .ev-nav { display: flex; gap: 12px; }
    .ev-arrow { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(0,0,0,0.07); color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: background-color .2s, opacity .2s; }
    .ev-arrow svg { width: 17px; height: 17px; }
    .ev-arrow:hover { background: rgba(0,0,0,0.13); }
    .ev-arrow:disabled { opacity: .3; cursor: default; }

    /* --- hover-animated blind-spot charts: a live timeline flowing forward --- */
    /* static setup: hooks that hold even under reduced motion */
    .ev-scan { opacity: 0; }
    .ev-dots circle, .ev-markgrp circle { transform-box: fill-box; transform-origin: center; }
    .ev-bars rect, .ev-stemgrp line { transform-box: fill-box; transform-origin: center bottom; }
    .ev-meter rect { transform-box: fill-box; transform-origin: center; animation-duration: .9s; }
    .ev-needle { transform-box: view-box; transform-origin: 150px 60px; }

    @media (prefers-reduced-motion: no-preference){
      /* Posture + Framing: the whole trace scrolls left — signal streaming in over time */
      .ev-card:hover .ev-wave .ev-flow, .ev-card:focus-within .ev-wave .ev-flow { animation: evScroll 2.8s linear infinite; }
      .ev-card:hover .ev-curve .ev-flow, .ev-card:focus-within .ev-curve .ev-flow { animation: evScroll 3.4s linear infinite; }
      @keyframes evScroll { from { transform: translateX(0); } to { transform: translateX(-100px); } }

      /* Playhead sweep, shared by the discrete-event charts (eye contact, fillers, hands) */
      .ev-card:hover .ev-scan, .ev-card:focus-within .ev-scan { animation: evSweep 3s linear infinite; }
      @keyframes evSweep { 0% { transform: translateX(0); opacity: 0; } 8% { opacity: .3; } 92% { opacity: .3; } 100% { transform: translateX(300px); opacity: 0; } }

      /* Eye contact: each dot appears the instant the playhead reaches it (delay set per-child below) */
      .ev-card:hover .ev-dots circle, .ev-card:focus-within .ev-dots circle { animation-name: evPlot; animation-duration: 3s; animation-timing-function: linear; animation-iteration-count: infinite; animation-fill-mode: backwards; }
      @keyframes evPlot { 0% { opacity: 0; transform: scale(.2); } 3% { opacity: 1; transform: scale(1); } 93% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.2); } }
      .ev-dots circle:nth-child(1){ animation-delay:.16s; } .ev-dots circle:nth-child(2){ animation-delay:.48s; }
      .ev-dots circle:nth-child(3){ animation-delay:.80s; } .ev-dots circle:nth-child(4){ animation-delay:1.12s; }
      .ev-dots circle:nth-child(5){ animation-delay:1.44s; } .ev-dots circle:nth-child(6){ animation-delay:1.76s; }
      .ev-dots circle:nth-child(7){ animation-delay:2.08s; } .ev-dots circle:nth-child(8){ animation-delay:2.40s; }
      .ev-dots circle:nth-child(9){ animation-delay:2.72s; }

      /* Fillers: each bar plots up from the baseline as the playhead reaches it (delay per-child below) */
      .ev-card:hover .ev-bars rect, .ev-card:focus-within .ev-bars rect { animation-name: evRise; animation-duration: 3s; animation-timing-function: linear; animation-iteration-count: infinite; animation-fill-mode: backwards; }
      @keyframes evRise { 0% { transform: scaleY(0); } 3% { transform: scaleY(1); } 93% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
      .ev-bars rect:nth-child(1){ animation-delay:.165s; } .ev-bars rect:nth-child(2){ animation-delay:.425s; }
      .ev-bars rect:nth-child(3){ animation-delay:.685s; } .ev-bars rect:nth-child(4){ animation-delay:.945s; }
      .ev-bars rect:nth-child(5){ animation-delay:1.205s; } .ev-bars rect:nth-child(6){ animation-delay:1.465s; }
      .ev-bars rect:nth-child(7){ animation-delay:1.725s; } .ev-bars rect:nth-child(8){ animation-delay:1.985s; }
      .ev-bars rect:nth-child(9){ animation-delay:2.245s; } .ev-bars rect:nth-child(10){ animation-delay:2.505s; }
      .ev-bars rect:nth-child(11){ animation-delay:2.765s; }

      /* Hands: each stem rises + marker lands as the playhead reaches it (delay per-child below) */
      .ev-card:hover .ev-stemgrp line, .ev-card:focus-within .ev-stemgrp line { animation-name: evRise; animation-duration: 3s; animation-timing-function: linear; animation-iteration-count: infinite; animation-fill-mode: backwards; }
      .ev-card:hover .ev-markgrp circle, .ev-card:focus-within .ev-markgrp circle { animation-name: evPlot; animation-duration: 3s; animation-timing-function: linear; animation-iteration-count: infinite; animation-fill-mode: backwards; }
      .ev-stemgrp line:nth-child(1), .ev-markgrp circle:nth-child(1){ animation-delay:.9s; }
      .ev-stemgrp line:nth-child(2), .ev-markgrp circle:nth-child(2){ animation-delay:1.7s; }
      .ev-stemgrp line:nth-child(3), .ev-markgrp circle:nth-child(3){ animation-delay:2.5s; }

      /* Volume: live VU meter — bars spring from the midline with organic, desynced timing.
         duration comes from the base .ev-meter rect rule + per-child overrides; delay per-child below. */
      .ev-card:hover .ev-meter rect, .ev-card:focus-within .ev-meter rect { animation-name: evVU; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
      @keyframes evVU { 0% { transform: scaleY(.28); } 100% { transform: scaleY(1); } }
      .ev-meter rect:nth-child(3n){ animation-duration: 1.2s; } .ev-meter rect:nth-child(3n+1){ animation-duration: .72s; }
      .ev-meter rect:nth-child(1){ animation-delay:-.05s; } .ev-meter rect:nth-child(2){ animation-delay:-.42s; }
      .ev-meter rect:nth-child(3){ animation-delay:-.19s; } .ev-meter rect:nth-child(4){ animation-delay:-.66s; }
      .ev-meter rect:nth-child(5){ animation-delay:-.31s; } .ev-meter rect:nth-child(6){ animation-delay:-.78s; }
      .ev-meter rect:nth-child(7){ animation-delay:-.11s; } .ev-meter rect:nth-child(8){ animation-delay:-.53s; }
      .ev-meter rect:nth-child(9){ animation-delay:-.24s; } .ev-meter rect:nth-child(10){ animation-delay:-.71s; }
      .ev-meter rect:nth-child(11){ animation-delay:-.37s; } .ev-meter rect:nth-child(12){ animation-delay:-.02s; }
      .ev-meter rect:nth-child(13){ animation-delay:-.60s; } .ev-meter rect:nth-child(14){ animation-delay:-.28s; }
      .ev-meter rect:nth-child(15){ animation-delay:-.83s; } .ev-meter rect:nth-child(16){ animation-delay:-.15s; }
      .ev-meter rect:nth-child(17){ animation-delay:-.48s; } .ev-meter rect:nth-child(18){ animation-delay:-.35s; }

      /* Lighting: level settles toward its reading; handle drifts with it */
      .ev-card:hover .ev-litbar, .ev-card:focus-within .ev-litbar { animation: evLit 2.4s ease-in-out infinite; }
      .ev-card:hover .ev-knob, .ev-card:focus-within .ev-knob { animation: evKnob 2.4s ease-in-out infinite; }
      @keyframes evLit { 0%,100% { opacity: .78; } 50% { opacity: 1; } }
      @keyframes evKnob { 0%,100% { transform: translateX(-5px); } 50% { transform: translateX(5px); } }

      /* Pace: needle drifts and finds steady at center; safe-zone box breathes */
      .ev-card:hover .ev-needle, .ev-card:focus-within .ev-needle { animation: evNeedle 2.8s ease-in-out infinite; }
      .ev-card:hover .ev-zone, .ev-card:focus-within .ev-zone { animation: evZone 2.8s ease-in-out infinite; }
      @keyframes evNeedle { 0%,100% { transform: rotate(0deg); } 28% { transform: rotate(-8deg); } 72% { transform: rotate(8deg); } }
      @keyframes evZone { 0%,100% { opacity: .65; } 50% { opacity: 1; } }

      /* Touch devices have no hover: JS adds .ev-play to whichever card is in view
         (one shows at a time), mirroring every hover trigger above. */
      .ev-card.ev-play .ev-wave .ev-flow { animation: evScroll 2.8s linear infinite; }
      .ev-card.ev-play .ev-curve .ev-flow { animation: evScroll 3.4s linear infinite; }
      .ev-card.ev-play .ev-scan { animation: evSweep 3s linear infinite; }
      .ev-card.ev-play .ev-dots circle { animation-name: evPlot; animation-duration: 3s; animation-timing-function: linear; animation-iteration-count: infinite; animation-fill-mode: backwards; }
      .ev-card.ev-play .ev-bars rect { animation-name: evRise; animation-duration: 3s; animation-timing-function: linear; animation-iteration-count: infinite; animation-fill-mode: backwards; }
      .ev-card.ev-play .ev-stemgrp line { animation-name: evRise; animation-duration: 3s; animation-timing-function: linear; animation-iteration-count: infinite; animation-fill-mode: backwards; }
      .ev-card.ev-play .ev-markgrp circle { animation-name: evPlot; animation-duration: 3s; animation-timing-function: linear; animation-iteration-count: infinite; animation-fill-mode: backwards; }
      .ev-card.ev-play .ev-meter rect { animation-name: evVU; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
      .ev-card.ev-play .ev-litbar { animation: evLit 2.4s ease-in-out infinite; }
      .ev-card.ev-play .ev-knob { animation: evKnob 2.4s ease-in-out infinite; }
      .ev-card.ev-play .ev-needle { animation: evNeedle 2.8s ease-in-out infinite; }
      .ev-card.ev-play .ev-zone { animation: evZone 2.8s ease-in-out infinite; }
    }

    /* ===== goals & streaks (apple fitness / watchos treatment) ===== */
    .goals-sec { background: radial-gradient(130% 100% at 50% -15%, #212c46 0%, #10141f 58%, #0b0e15 100%); color: #fff; overflow: hidden; }
    .goals-sec .t-head { color: #fff; }
    .goals-sec .intro { color: rgba(255,255,255,0.72); }
    .goal-awards { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
    .g-award { display: inline-flex; align-items: center; gap: 14px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09); border-radius: 16px; padding: 12px 20px 12px 12px; }
    .g-award .ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; }
    .g-award .ico.flame { background: rgba(245,197,24,0.16); color: var(--yellow); } .g-award .ico.trend { background: rgba(43,127,255,0.2); color: #6aa5ff; }
    .g-award .ico svg { width: 21px; height: 21px; }
    .g-award .aw-t { font-size: 16px; font-weight: 600; color: #fff; } .g-award .aw-s { font-size: 13.5px; color: rgba(255,255,255,0.58); margin-top: 1px; }
    .goals-rings { display: flex; flex-direction: column; align-items: center; gap: 28px; }
    .goals-rings .rings { width: min(360px, 82%); height: auto; filter: drop-shadow(0 12px 44px rgba(245,197,24,0.16)); }
    .rings-legend { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; }
    .rings-legend span { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: rgba(255,255,255,0.78); }
    .rings-legend i { width: 11px; height: 11px; border-radius: 50%; }

    /* laptop */
    .laptop { width: 100%; max-width: 560px; margin: 0 auto; }
    .laptop .lid { position: relative; border: 9px solid #1c1c1e; border-radius: 20px; background: #000; box-shadow: 0 30px 60px -34px rgba(0,0,0,0.5); }
    .laptop .lid .cam { position: absolute; top: 5px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: #2e2e30; z-index: 4; }
    .laptop .screen { position: relative; aspect-ratio: 16/10; border-radius: 12px; overflow: hidden; background: #000; } .laptop .screen video { width: 100%; height: 100%; object-fit: cover; }
    .laptop .tw { left: auto; right: 7%; top: auto; bottom: 12%; margin-left: 0; pointer-events: none; }
    .laptop .base { position: relative; height: 13px; margin: 0 auto; width: 112%; left: -6%; border-radius: 0 0 13px 13px; background: linear-gradient(180deg,#d6d8dc,#a9acb2); box-shadow: 0 16px 24px -16px rgba(0,0,0,0.4); }
    .laptop .base::after { content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:100px; height:8px; border-radius:0 0 8px 8px; background:#9a9da3; }

    /* app strip */
    .apps { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 40px; }
    .appchip { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; border-radius: 999px; background: #fff; box-shadow: 0 8px 24px -16px rgba(0,0,0,0.25); font-size: 16px; font-weight: 500; color: var(--ink); }
    .appchip .applogo { width: 20px; height: 20px; object-fit: contain; } .appchip svg.applogo { color: var(--ink); }

    /* marquee */
    .marq { overflow: hidden; padding: 8px 0 12px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
    .marq-track { display: flex; gap: 18px; width: max-content; animation: scrollx 50s linear infinite; } .marq:hover .marq-track { animation-play-state: paused; }
    /* goals & streaks: one featured active goal + a scrolling library of goals */
    .goal-feature { margin-top: 34px; max-width: 420px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 18px; padding: 18px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
    .gf-top { display: flex; align-items: center; gap: 13px; }
    .gf-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; background: color-mix(in srgb, var(--c) 22%, transparent); color: var(--c); }
    .gf-ico svg { width: 22px; height: 22px; }
    .gf-head { flex: 1; min-width: 0; }
    .gf-name { font-size: 16px; font-weight: 600; color: #fff; }
    .gf-sub { font-size: 13px; color: rgba(255,255,255,0.55); margin-top: 2px; }
    .gf-pct { font-size: 21px; font-weight: 700; color: var(--c); font-variant-numeric: tabular-nums; }
    .gf-bar { height: 7px; border-radius: 4px; background: rgba(255,255,255,0.1); margin-top: 15px; overflow: hidden; }
    .gf-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 65%, #fff), var(--c)); }
    .gf-foot { display: flex; align-items: center; gap: 12px; margin-top: 15px; }
    .gf-streak { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--yellow); }
    .gf-streak .fl { width: 15px; height: 15px; }
    .gf-dots { display: inline-flex; gap: 4px; }
    .gf-dots i { width: 9px; height: 9px; border-radius: 50%; box-sizing: border-box; border: 1.5px solid rgba(255,255,255,0.22); }
    .gf-dots i.on { border-color: var(--yellow); background: rgba(245,197,24,0.3); }
    .gf-badge { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.82); background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1); border-radius: 999px; padding: 4px 11px; }
    .gf-badge svg { width: 13px; height: 13px; color: var(--yellow); }
    .goal-stack { position: relative; height: 470px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); }
    .gs-track { display: flex; flex-direction: column; align-items: center; gap: 14px; animation: scrolly 34s linear infinite; will-change: transform; }
    .goal-stack:hover .gs-track { animation-play-state: paused; }
    .gpill { display: inline-flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09); border-radius: 999px; padding: 11px 22px 11px 11px; font-size: 16px; font-weight: 500; color: #fff; white-space: nowrap; }
    .gpill .gp-ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; background: color-mix(in srgb, var(--c) 24%, transparent); color: var(--c); }
    .gpill .gp-ico svg { width: 18px; height: 18px; }
    @keyframes scrolly { from { transform: translateY(0); } to { transform: translateY(-50%); } }
    @media (max-width: 880px){ .goal-stack { height: 380px; margin-top: 8px; } }
    @keyframes scrollx { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    .card { flex: 0 0 300px; width: 300px; min-height: 196px; background: #fff; border-radius: 22px; padding: 24px; box-shadow: 0 10px 30px -16px rgba(0,0,0,0.16); display: flex; flex-direction: column; }
    .card .ch { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .card .cstat { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; } .card .cper { font-size: 12.5px; color: var(--faint); white-space: nowrap; }
    .card .clab { margin-top: 5px; font-size: 15px; color: var(--muted); line-height: 1.3; } .card .cviz { margin-top: auto; padding-top: 16px; height: 76px; } .card .cviz svg { width: 100%; height: 100%; overflow: visible; }
    .spark { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .ring-bg { fill: none; stroke: #ececef; stroke-width: 9; } .ring-fg { fill: none; stroke-width: 9; stroke-linecap: round; }

    /* testimonial marquee */
    .tmarq { overflow: hidden; padding: 6px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
    .tmarq-track { display: flex; gap: 18px; width: max-content; animation: scrollx 70s linear infinite reverse; } .tmarq:hover .tmarq-track { animation-play-state: paused; }
    .tcard { flex: 0 0 250px; width: 250px; border-radius: 20px; overflow: hidden; background: #000; box-shadow: 0 16px 40px -24px rgba(0,0,0,0.3); position: relative; }
    .tcard video { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
    .tcard .grad { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 52%, rgba(0,0,0,0.82)); }
    .tcard .meta { position: absolute; left: 16px; right: 14px; bottom: 14px; color: #fff; } .tcard .meta .uc { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; text-shadow: 0 1px 8px rgba(0,0,0,0.4); }

    /* recap note */
    .note { width: 100%; max-width: 540px; background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 24px 60px -34px rgba(0,0,0,0.3); }
    .note-h { padding: 22px 24px 0; } .note-title { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; }
    .note-meta { margin-top: 10px; display: flex; gap: 8px; } .note-meta .pill { font-size: 12.5px; color: var(--muted); background: var(--w-grey); padding: 5px 11px; border-radius: 999px; }
    .note-body { padding: 18px 24px 6px; min-height: 168px; } .note-sec { margin-bottom: 18px; }
    .note-label { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 9px; }
    .note-sec.good .note-label { color: var(--e-coral); } .note-sec.keep .note-label { color: var(--e-blue); }
    .note ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
    .note li { display: flex; align-items: flex-start; gap: 11px; font-size: 16.5px; line-height: 1.45; color: var(--ink); }
    .note li .dot { width: 6px; height: 6px; border-radius: 50%; margin-top: 9px; flex: 0 0 auto; opacity: 0; transition: opacity .3s ease; }
    .note li.shown .dot { opacity: 1; }
    .note-sec.good li .dot { background: var(--e-coral); } .note-sec.keep li .dot { background: var(--e-blue); }
    .note li .tx { flex: 1; min-width: 0; overflow-wrap: break-word; } .note .caret { display: inline-block; width: 2px; height: 1.05em; background: var(--ink); margin-left: 1px; vertical-align: -2px; animation: blink 1s steps(1) infinite; }
    @keyframes blink { 0%,55%{opacity:1} 56%,100%{opacity:0} }
    .note-foot { padding: 4px 24px 20px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--faint); }
    .note-foot .wdot { width: 6px; height: 6px; border-radius: 50%; background: var(--yellow-2); animation: wpulse 1s ease-in-out infinite; }
    .note-foot.done { opacity: 0; height: 0; padding: 0; }
    @keyframes wpulse { 0%,100%{opacity:.3} 50%{opacity:1} }

    /* privacy (designed dark panel) */
    .privacy-panel { background: #1d1d1f; color: #fff; border-radius: 32px; padding: 56px; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
    @media (max-width: 820px){ .privacy-panel { grid-template-columns: 1fr; gap: 36px; padding: 36px; } }
    .privacy-panel .t-head { color: #fff; } .privacy-panel .pe { color: var(--yellow); display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; } .privacy-panel .pe svg { width: 17px; height: 17px; }
    .privacy-panel .pi { color: rgba(255,255,255,0.7); margin-top: 18px; max-width: 38ch; font-size: 18px; line-height: 1.5; }
    .pcard { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; padding: 22px; }
    .pcard .prow { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
    .pcard .prow:last-child { border-bottom: 0; }
    .pcard .prow .ic { width: 34px; height: 34px; border-radius: 9px; background: rgba(255,255,255,0.08); display: grid; place-items: center; flex: 0 0 auto; } .pcard .prow .ic svg { width: 17px; height: 17px; color: #fff; }
    .pcard .prow .tx { flex: 1; } .pcard .prow .tx .a { display: block; font-size: 15px; font-weight: 500; } .pcard .prow .tx .b2 { display: block; margin-top: 1px; font-size: 13px; color: rgba(255,255,255,0.55); }
    .pcard .prow .tag { font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; }
    .pcard .prow .tag.ok { background: var(--yellow); color: #1d1d1f; } .pcard .prow .tag.no { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.7); }

    /* faq */
    .faq { max-width: 760px; }
    .faq details { border-top: 1px solid var(--hair); padding: 6px 0; }
    .faq details:last-child { border-bottom: 1px solid var(--hair); }
    .faq summary { list-style: none; cursor: pointer; padding: 20px 2px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }
    .faq summary::-webkit-details-marker { display: none; }
    .faq .plus { position: relative; width: 18px; height: 18px; flex: 0 0 auto; color: var(--faint); transition: transform .25s ease; }
    .faq .plus::before, .faq .plus::after { content: ""; position: absolute; background: currentColor; border-radius: 2px; }
    .faq .plus::before { left: 0; right: 0; top: 8px; height: 2px; } .faq .plus::after { top: 0; bottom: 0; left: 8px; width: 2px; transition: opacity .2s ease; }
    .faq details[open] .plus { transform: rotate(90deg); } .faq details[open] .plus::after { opacity: 0; }
    .faq .ans { padding: 0 2px 22px; font-size: 17px; line-height: 1.55; color: var(--muted); max-width: 60ch; }

    /* pricing */
    .plans { margin-top: 50px; display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 20px; max-width: 760px; margin-left: auto; margin-right: auto; align-items: start; text-align: left; }
    @media (max-width: 720px){ .plans { grid-template-columns: 1fr; } }
    .plan { border-radius: 24px; padding: 32px; display: flex; flex-direction: column; min-width: 0; }
    .plan.free { background: var(--ink); color: #fff; box-shadow: 0 30px 60px -30px rgba(0,0,0,0.45); } .plan.paid { background: #fff; box-shadow: 0 14px 40px -26px rgba(0,0,0,0.2); }
    .plan .pn { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 10px; } .plan.free .pn { color: #fff; } .plan.paid .pn { color: var(--muted); }
    .plan .pn .tag { font-size: 11px; font-weight: 600; background: var(--yellow); color: #1d1d1f; padding: 4px 9px; border-radius: 999px; }
    .plan .pr { margin-top: 14px; font-size: 48px; font-weight: 600; letter-spacing: -0.02em; } .plan .pr span { font-size: 16px; font-weight: 400; } .plan.free .pr span { color: rgba(255,255,255,0.55); } .plan.paid .pr span { color: var(--faint); }
    .plan ul { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; flex: 1; } .plan li { display: flex; gap: 10px; font-size: 16px; align-items: flex-start; } .plan li svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 3px; }
    .plan.free li { color: #e6e6e8; } .plan.free li svg { color: var(--yellow); } .plan.paid li { color: #3a3a3d; } .plan.paid li svg { color: var(--ink); }
    .plan .b { margin-top: 26px; } .plan .note2 { margin-top: 12px; font-size: 13px; } .plan.free .note2 { color: rgba(255,255,255,0.5); } .plan.paid .note2 { color: var(--faint); }

    .closing { text-align: center; } .closing .t-hero { max-width: 18ch; margin: 0 auto; }
    .wl-form { margin: 28px auto 0; display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; max-width: 460px; }
    .wl-form input { flex: 1 1 240px; min-width: 0; height: 52px; padding: 0 20px; font-family: inherit; font-size: 17px; color: var(--ink); background: #fff; border: 1px solid rgba(0,0,0,0.14); border-radius: 980px; outline: none; transition: border-color .2s ease, box-shadow .2s ease; }
    .wl-form input::placeholder { color: var(--faint); }
    .wl-form input:focus { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(245,197,24,0.25); }
    .wl-form button { flex: 0 0 auto; }
    .wl-ok, .wl-err { margin: 22px auto 0; font-size: 16px; }
    .wl-ok { color: var(--ink); font-weight: 500; } .wl-ok .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); margin-right: 8px; vertical-align: middle; }
    .wl-err { color: var(--e-coral); }
    .wl-done { max-width: 480px; margin: 26px auto 0; text-align: center; }
    .wl-done-head { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--ink); }
    .wl-done-head .chk { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--yellow); color: #1d1d1f; font-size: 12px; font-weight: 700; }
    .wl-pos { margin-top: 12px; }
    .wl-pos-l { font-size: 14px; color: var(--muted); }
    .wl-pos .n { display: inline-block; margin-top: 4px; font-size: 44px; font-weight: 700; color: var(--ink); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; background: linear-gradient(transparent 62%, rgba(245,197,24,0.5) 62%); padding: 0 6px; }
    .wl-invite { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--hair); }
    .wl-invite-h { font-size: 16px; font-weight: 600; color: var(--ink); margin: 0 0 5px; }
    .wl-invite-t { font-size: 15px; color: var(--muted); margin: 0 0 14px; line-height: 1.5; }
    .wl-invite-t b { color: var(--ink); font-weight: 600; }
    .wl-share { display: flex; gap: 8px; }
    .wl-share input { flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 16px; font-family: inherit; font-size: 14px; color: var(--muted); background: #fff; border: 1px solid rgba(0,0,0,0.14); border-radius: 980px; outline: none; }
    .wl-share input:focus { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(245,197,24,0.25); }
    .wl-share button { flex: 0 0 auto; height: 48px; padding: 0 22px; }
    .wl-share-btns { margin-top: 12px; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
    .wl-share-btns a { font-size: 13px; font-weight: 500; color: var(--ink); background: rgba(0,0,0,0.05); padding: 8px 15px; border-radius: 999px; transition: background-color .2s; }
    .wl-share-btns a:hover { background: rgba(0,0,0,0.09); }
    .wl-prog { margin-top: 18px; display: flex; align-items: center; gap: 11px; }
    .wl-prog-bar { flex: 1; height: 7px; border-radius: 999px; background: rgba(0,0,0,0.08); overflow: hidden; }
    .wl-prog-bar i { display: block; height: 100%; width: 0; background: var(--yellow); border-radius: 999px; transition: width .5s cubic-bezier(.33,1,.68,1); }
    .wl-prog-n { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
    .wl-proof { margin: 24px auto 0; display: inline-flex; align-items: center; gap: 13px; }
    .wl-proof .av { display: inline-flex; }
    .wl-proof .av img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; margin-left: -9px; box-shadow: 0 1px 3px rgba(0,0,0,0.18); }
    .wl-proof .av img:first-child { margin-left: 0; }
    .wl-proof .wl-count { display: inline-flex; align-items: baseline; gap: 7px; }
    .wl-proof .wl-count b { font-size: 21px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; background: linear-gradient(transparent 60%, rgba(245,197,24,0.5) 60%); padding: 0 3px; transition: opacity .3s ease; }
    .wl-proof .wl-count .lbl { font-size: 15px; color: var(--muted); }
    .foot { border-top: 1px solid var(--hair); } .foot-in { padding: 34px 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
    @media (max-width: 640px){ .foot-in { padding: 24px 24px 48px; } }  /* restore the side gutter (.foot-in's 0 was overriding .wrap) + bottom room */
    .foot-links { display: flex; gap: 24px; font-size: 14px; } .foot-links a { color: var(--muted); } .foot-links a:hover { color: var(--ink); } .foot-copy { width: 100%; font-size: 12px; color: var(--faint); }

    @media (prefers-reduced-motion: reduce){ *{animation:none!important} html{scroll-behavior:auto} .reveal{opacity:1;transform:none} .marq-track,.tmarq-track{animation:none} .closer-screen video{opacity:1} .note li .dot{opacity:1} }


    /* Try it live — demo modal shell. Always loaded (unlike the lazily-injected demo.css skin)
       so the full-screen overlay + scrim are styled the instant the modal opens, even if a fast
       click beats demo.css loading. The visual skin (.tryit-card, panels, colors) is in demo.css. */
    .tryit{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px}
    .tryit[hidden]{display:none}
    .tryit-scrim{position:absolute;inset:0;background:rgba(10,10,12,.78);backdrop-filter:blur(8px)}

    /* hero "Try it live" button (feature-flagged demo CTA): glassy animated rainbow ring */
    .b-try{position:relative;display:inline-flex;align-items:center;gap:9px;height:52px;padding:0 26px;border-radius:999px;border:0;cursor:pointer;font-family:inherit;font-size:17px;font-weight:600;color:var(--ink);background:rgba(255,255,255,.5);backdrop-filter:blur(12px) saturate(1.5);-webkit-backdrop-filter:blur(12px) saturate(1.5);box-shadow:0 6px 22px -6px rgba(0,0,0,.25);transition:transform .2s ease,box-shadow .2s ease}
    .b-try:hover{transform:translateY(-1px);box-shadow:0 10px 28px -8px rgba(0,0,0,.32)}
    .b-try::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.6px;background:linear-gradient(120deg,#ff5f6d,#ffc371,#47e6b1,#4d9fff,#a56bff,#ff5f6d);background-size:300% 100%;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:tryshimmer 5s linear infinite;pointer-events:none}
    @keyframes tryshimmer{to{background-position:300% 0}}
    .b-try .tryicon{width:19px;height:19px;flex:0 0 auto}
    /* hidden until the demo flag is on (set synchronously by the head gate, before first paint) */
    .b-try{display:none}
    html.demo-on .b-try{display:inline-flex}

    /* Cookie consent banner (EEA/UK/CH only; shown by inline script) */
    .cookiebar { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; margin: 0 auto; max-width: 640px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 16px; background: rgba(20,20,24,0.96); color: #f4f4f5; border-radius: 14px; box-shadow: 0 18px 50px -18px rgba(0,0,0,0.5); font-size: 13.5px; line-height: 1.5; opacity: 0; transform: translateY(8px); transition: opacity .24s ease, transform .24s ease; }
    .cookiebar.in { opacity: 1; transform: none; }
    .cookiebar .cb-txt { flex: 1 1 260px; }
    .cookiebar a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
    .cookiebar .cb-btns { display: inline-flex; gap: 8px; margin-left: auto; }
    .cookiebar .cb-b { border: 0; cursor: pointer; font: inherit; font-weight: 600; padding: 8px 16px; border-radius: 999px; }
    .cookiebar .cb-decline { background: rgba(255,255,255,0.12); color: #f4f4f5; }
    .cookiebar .cb-accept { background: var(--yellow); color: #1d1d1f; }
    @media (prefers-reduced-motion: reduce) { .cookiebar { transition: none; } }

    /* =======================================================================
       HERO DESKTOP  —  interactive macOS mock (behavior in hero-desktop.js).
       Menus, status popovers, Spotlight and the Projects Finder all render
       inside #macFrame, so they clip to the "screen" like the real thing.
       ======================================================================= */

    /* --- menubar items become clickable ------------------------------------ */
    /* Hit-area geometry lives on the menubar children (not on the JS-added
       .mb-hit class) so it is applied at first paint — otherwise the deferred
       script re-sizes the icons after load and they visibly slide into place. */
    .menubar .l > b, .menubar .l > span, .menubar .l > svg,
    .menubar .r > svg { box-sizing: content-box; border-radius: 7px; transition: background .12s ease; -webkit-tap-highlight-color: transparent; }
    .menubar .l > b, .menubar .l > span { padding: 3px 8px; margin: 0 -5px; }
    .menubar .l > svg { padding: 4px 6px; }
    .menubar .r > svg { padding: 5px; margin: 0 -2px; }
    /* Reserve the clock's width so swapping "9:41" for the real local time
       (e.g. "8:19 PM") can't push the other status icons sideways. */
    .menubar #macClock { min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
    .menubar .mb-hit { cursor: default; }
    .menubar .mb-hit:hover { background: rgba(255,255,255,0.16); }
    .menubar .mb-hit.mb-on { background: rgba(255,255,255,0.26); }
    .menubar .mb-hit:focus { outline: none; }
    .menubar .mb-hit:focus-visible { outline: none; background: rgba(255,255,255,0.16); }

    /* --- shared layer + menu panels ---------------------------------------- */
    .mb-layer { position: absolute; z-index: 60; opacity: 0; transform: translateY(-5px) scale(0.97); transform-origin: top center; transition: opacity .13s ease, transform .13s ease; }
    .mb-layer.in { opacity: 1; transform: none; }
    /* text-align:left is required: these render inside .hero, which is centered,
       and menu text would otherwise inherit center alignment and float. */
    .mb-drop, .mb-pop { text-align: left; background: rgba(38,40,47,0.82); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4); border: 0.5px solid rgba(255,255,255,0.16); border-radius: 11px; box-shadow: 0 14px 44px -12px rgba(0,0,0,0.6), inset 0 0.5px 0 rgba(255,255,255,0.14); color: #f2f3f5; font-size: 12.5px; padding: 5px; }
    .mb-drop { width: max-content; min-width: 168px; max-width: 320px; }
    .mb-sep { height: 1px; margin: 5px 8px; background: rgba(255,255,255,0.12); }
    .mb-mi { display: flex; align-items: center; gap: 6px; width: 100%; padding: 4px 9px 4px 6px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; border-radius: 6px; cursor: default; }
    .mb-mi:hover { background: linear-gradient(180deg, #3a7bfd, #2f6ff0); color: #fff; }
    .mb-mi .mi-ck { width: 15px; height: 15px; flex: 0 0 15px; display: inline-flex; }
    .mb-mi .mi-ck svg { width: 13px; height: 13px; }
    .mb-mi .mi-l { flex: 1 1 auto; white-space: nowrap; }
    .mb-mi .mi-sc { opacity: 0.55; letter-spacing: 0.04em; font-size: 12px; }
    .mb-mi:hover .mi-sc { opacity: 0.9; }

    /* --- status popovers (bloom / battery / wifi / control) ---------------- */
    .mb-pop { width: 246px; padding: 11px 12px; }
    .pop-h { font-weight: 600; font-size: 13px; }
    .pop-row { display: flex; align-items: center; justify-content: space-between; }
    .pop-sec { margin: 9px 0 4px; font-size: 11px; color: rgba(255,255,255,0.5); }
    .pop-note { margin-top: 6px; font-size: 11.5px; color: rgba(255,255,255,0.62); }
    .pop-set { padding: 5px 6px; border-radius: 6px; cursor: default; color: rgba(255,255,255,0.86); }
    .pop-set:hover { background: rgba(255,255,255,0.1); }
    .pop-app { display: flex; align-items: center; gap: 8px; padding: 3px 4px; color: rgba(255,255,255,0.78); }
    .pop-app .pa-i { width: 15px; height: 15px; opacity: 0.8; }

    /* bloom status */
    .pb-head { display: flex; align-items: center; gap: 10px; }
    .pb-logo { width: 30px; height: 30px; }
    .pb-name { font-weight: 600; font-size: 13.5px; }
    .pb-streak { display: flex; align-items: center; gap: 7px; margin: 10px 0; padding: 7px 9px; border-radius: 9px; background: rgba(245,197,24,0.12); font-size: 12px; }
    .pb-streak .pb-fl { width: 15px; height: 15px; color: var(--yellow); }
    .pb-streak b { font-weight: 600; } .pb-streak span { margin-left: auto; color: rgba(255,255,255,0.55); font-size: 11px; }

    /* battery */
    .bt-big { font-size: 24px; font-weight: 600; margin: 4px 0 8px; display: flex; align-items: baseline; gap: 8px; }
    .bt-chg { font-size: 11px; font-weight: 500; color: #34d17a; }
    .bt-bar { height: 7px; border-radius: 4px; background: rgba(255,255,255,0.16); overflow: hidden; }
    .bt-bar i { display: block; height: 100%; border-radius: 4px; background: #34d17a; }
    .pop-batt .pop-sec { text-transform: none; }

    /* wifi */
    .wf-body { margin: 2px 0; }
    .wf-net { display: flex; align-items: center; gap: 7px; width: 100%; padding: 5px 6px; border: 0; background: transparent; color: inherit; font: inherit; border-radius: 6px; cursor: default; text-align: left; }
    .wf-net:hover { background: rgba(255,255,255,0.1); }
    .wf-net .wf-ck { width: 14px; height: 14px; flex: 0 0 14px; visibility: hidden; }
    .wf-net.on .wf-ck { visibility: visible; }
    .wf-net .wf-nm { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .wf-net .wf-sig { width: 15px; height: 15px; opacity: 0.85; }
    .wf-net .wf-lock { width: 12px; height: 12px; opacity: 0.55; }
    .pop-wifi.wf-off .wf-body, .pop-wifi.wf-off .pop-sec { opacity: 0.35; pointer-events: none; }
    /* line "Other Networks" / "Wi-Fi Settings…" up with the network names
       (name text sits past the 6px row pad + 14px checkmark gutter + 7px gap). */
    .pop-wifi .pop-set { padding-left: 27px; }
    .pop-set-row { display: flex; align-items: center; }
    .pop-set-row .ps-chev { margin-left: auto; width: 13px; height: 13px; opacity: 0.5; }

    /* control center */
    .cc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
    .cc-tile { display: flex; align-items: center; gap: 8px; padding: 8px 9px; border: 0; border-radius: 11px; background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.9); font: inherit; font-size: 11.5px; cursor: default; text-align: left; }
    .cc-tile .cc-ti { width: 15px; height: 15px; flex: 0 0 15px; }
    .cc-tile.on { background: linear-gradient(180deg, #3a7bfd, #2f6ff0); color: #fff; }
    .cc-cap { margin: 11px 0 5px; font-size: 11px; color: rgba(255,255,255,0.5); }
    .cc-slider { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 11px; background: rgba(255,255,255,0.1); }
    .cc-slider .cc-sic { width: 15px; height: 15px; flex: 0 0 15px; opacity: 0.85; }
    .cc-track { position: relative; flex: 1 1 auto; height: 8px; border-radius: 5px; background: rgba(255,255,255,0.2); cursor: default; touch-action: none; }
    .cc-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: rgba(255,255,255,0.92); }
    .cc-knob { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.4); transform: translate(-50%, -50%); }

    /* toggle rows + pill switches */
    .cc-line { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 6px; border: 0; background: transparent; color: inherit; font: inherit; font-size: 12.5px; border-radius: 7px; cursor: default; text-align: left; }
    .cc-line:hover { background: rgba(255,255,255,0.08); }
    .cc-line .cc-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.3); }
    .cc-line.on .cc-dot { background: #34d17a; box-shadow: 0 0 6px #34d17a; }
    .cc-line span:not(.cc-dot):not(.cc-sw) { flex: 1 1 auto; }
    .cc-sw { width: 34px; height: 20px; border-radius: 11px; background: rgba(255,255,255,0.22); position: relative; flex: 0 0 34px; transition: background .16s ease; cursor: default; }
    .cc-sw i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.35); transition: left .16s ease; }
    .cc-sw.on, .cc-line.on .cc-sw { background: #34c759; } .cc-sw.on i, .cc-line.on .cc-sw i { left: 16px; }

    /* --- overlays (backdrop for Spotlight + About) ------------------------- */
    .hd-back { position: absolute; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; background: rgba(8,10,18,0.22); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity .16s ease; }
    .hd-back.in { opacity: 1; }
    .spot-back { align-items: flex-start; padding-top: 12%; }

    /* Spotlight */
    .spot { text-align: left; width: min(70%, 460px); background: rgba(44,46,54,0.8); backdrop-filter: blur(28px) saturate(1.5); -webkit-backdrop-filter: blur(28px) saturate(1.5); border: 0.5px solid rgba(255,255,255,0.18); border-radius: 14px; box-shadow: 0 24px 70px -18px rgba(0,0,0,0.65); overflow: hidden; transform: translateY(-8px) scale(0.98); transition: transform .16s ease; }
    .hd-back.in .spot { transform: none; }
    .spot-in { display: flex; align-items: center; gap: 11px; padding: 12px 15px; }
    .spot-in .spot-i { width: 20px; height: 20px; color: rgba(255,255,255,0.6); flex: 0 0 20px; }
    .spot-q { flex: 1 1 auto; background: transparent; border: 0; outline: 0; color: #fff; font: inherit; font-size: 20px; }
    .spot-q::placeholder { color: rgba(255,255,255,0.4); }
    .spot-res { max-height: 236px; overflow-y: auto; border-top: 0.5px solid rgba(255,255,255,0.12); padding: 5px; }
    .spot-res:empty { display: none; }
    .spot-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: transparent; color: #eceef2; font: inherit; font-size: 13px; border-radius: 8px; cursor: default; text-align: left; }
    .spot-row .sr-i { width: 17px; height: 17px; flex: 0 0 17px; opacity: 0.82; }
    .spot-row .sr-t { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .spot-row .sr-k { font-size: 11px; color: rgba(255,255,255,0.45); }
    .spot-row.on { background: linear-gradient(180deg, #3a7bfd, #2f6ff0); color: #fff; }
    .spot-row.on .sr-i, .spot-row.on .sr-k { opacity: 1; color: rgba(255,255,255,0.85); }
    .spot-empty { padding: 14px 12px; text-align: center; color: rgba(255,255,255,0.45); font-size: 13px; }

    /* About ticticbloom */
    .about-card { width: 264px; padding: 26px 22px 18px; text-align: center; background: rgba(40,42,49,0.9); backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px); border: 0.5px solid rgba(255,255,255,0.16); border-radius: 16px; box-shadow: 0 24px 70px -18px rgba(0,0,0,0.65); color: #f1f2f5; transform: translateY(-8px) scale(0.98); transition: transform .16s ease; }
    .hd-back.in .about-card { transform: none; }
    .about-card .ab-logo { width: 62px; height: 62px; margin: 0 auto 12px; display: block; }
    .about-card .ab-name { font-size: 19px; font-weight: 600; }
    .about-card .ab-ver { font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 3px; }
    .about-card .ab-tag { font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,0.8); margin: 13px 0; }
    .about-card .ab-copy { font-size: 10.5px; color: rgba(255,255,255,0.4); }

    /* --- Projects Finder --------------------------------------------------- */
    .finder { position: absolute; z-index: 70; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(64%, 430px); display: none; flex-direction: column; background: rgba(30,31,36,0.9); backdrop-filter: blur(24px) saturate(1.3); -webkit-backdrop-filter: blur(24px) saturate(1.3); border: 0.5px solid rgba(255,255,255,0.14); border-radius: 12px; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.68); overflow: hidden; color: #eceef2; }
    .finder.open { display: flex; }
    .finder.dragging { transition: none; user-select: none; }
    .fn-bar { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; background: rgba(255,255,255,0.06); border-bottom: 0.5px solid rgba(255,255,255,0.1); cursor: grab; }
    .finder.dragging .fn-bar { cursor: grabbing; }
    .fn-lights { display: flex; gap: 7px; }
    .fn-lights i { width: 11px; height: 11px; border-radius: 50%; display: block; }
    .fn-lights .l-r { background: #ff5f57; cursor: default; } .fn-lights .l-y { background: #febc2e; } .fn-lights .l-g { background: #28c840; }
    .fn-back { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 22px; border: 0; border-radius: 6px; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.85); cursor: default; }
    .fn-back svg { width: 15px; height: 15px; }
    .fn-back:disabled { opacity: 0.32; cursor: default; }
    .fn-title { font-size: 13px; font-weight: 600; }
    .fn-body { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 14px; min-height: 130px; align-content: start; }
    .fn-item { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 4px; border: 0; background: transparent; color: inherit; font: inherit; border-radius: 8px; cursor: default; }
    .fn-item:hover { background: rgba(255,255,255,0.07); }
    .fn-item.sel { background: rgba(58,123,253,0.32); }
    .fn-ic { width: 42px; height: 42px; display: grid; place-items: center; }
    .fn-ic svg { width: 38px; height: 38px; }
    .fn-ic.folder { color: #6fb6ff; }
    .fn-ic.deck { color: #ff9f6b; } .fn-ic.film { color: #c58bff; } .fn-ic.img { color: #58d0a8; } .fn-ic.doc { color: #cfd6df; }
    .fn-nm { font-size: 11px; line-height: 1.25; text-align: center; word-break: break-word; max-width: 84px; }
    .fn-foot { padding: 6px 12px; font-size: 11px; color: rgba(255,255,255,0.5); border-top: 0.5px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); }

    /* --- desktop icon + dock fisheye --------------------------------------- */
    .deskicon.hd-click { cursor: grab; border-radius: 8px; padding: 5px 3px 4px; transition: background .12s ease; user-select: none; touch-action: none; }
    .deskicon.hd-click:hover .ico { filter: brightness(1.08); }
    .deskicon.dragging { cursor: grabbing; z-index: 8; }
    .deskicon .dlabel { display: inline-block; padding: 0 5px; border-radius: 5px; }
    .deskicon.sel .ico { box-shadow: 0 2px 6px rgba(0,0,0,0.25), 0 0 0 2px rgba(58,123,253,0.95); filter: brightness(0.9); }
    .deskicon.sel .dlabel { background: #3a7bfd; color: #fff; }
    .dock .app { transition: transform .08s ease-out; transform-origin: bottom center; will-change: transform; }
    .dock .app .dock-name { position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%); padding: 3px 9px; border-radius: 7px; background: rgba(40,42,49,0.9); color: #fff; font-size: 11px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s ease; box-shadow: 0 6px 18px -6px rgba(0,0,0,0.5); }
    .dock .app:hover .dock-name { opacity: 1; }
    .dock .app.hop { animation: dockHop 0.5s ease; }
    @keyframes dockHop { 0%,100% { } 18% { transform: translateY(-16px) scale(1.04); } 40% { transform: translateY(0) scale(1); } 56% { transform: translateY(-6px); } 72% { transform: translateY(0); } }

    /* widget attention pulse (from menu "Open ticticbloom") */
    #heroTw.mb-pulse { animation: twPulse 1.1s ease; }
    @keyframes twPulse { 0% { box-shadow: 0 0 0 0 rgba(58,123,253,0.55); } 100% { box-shadow: 0 0 0 22px rgba(58,123,253,0); } }

    @media (max-width: 560px) { .finder { width: 84%; } .spot { width: 86%; } }
    @media (prefers-reduced-motion: reduce) {
      .mb-layer, .hd-back, .hd-back .spot, .hd-back .about-card, .dock .app, #heroTw.mb-pulse { transition: none; animation: none; }
    }