/* Hallmark · redesign: v3 · genre: editorial · theme: brand (DESIGN.md 1.11.0, locked) · hero: Stage, three floors with Trio landing on top · signature: the floors drop into place on load */
/* critique: v2 kept a flat cream page and a static header; v3 alternates cream and charcoal sections, adds a glass header with a floating mini nav, a command palette, one copy flow, the guide template and the prompts finder */
/* Hallmark · waive 38iii · DESIGN.md sections 2 and 3 name one accent word per heading · brand rule: every heading carries one accent word, the floors heading and guide covers included */
/* brand note (not a Hallmark waiver, gate 7b is about surfaces): white text on the #A44E2C primary button (brand 1.17.0, was #B4461A) and on the guide closing block is a DESIGN.md section 6 rule; --white is the tinted #FFFDF8, 5.5:1 on #A44E2C */
/* Hallmark · waive 29 · owner decision 31.10.2026, scoped to the website only · glass stays on the header, the mini nav, the menu sheet and the dialogs; never on cards or carousels */
/* Hallmark · waive 12 · DESIGN.md motion list names the spring for the floors · the spring easing belongs to the brand floors dropping into the hero, nowhere else */
/* Hallmark · waive 38ii · DESIGN.md section 3 exception to the Hallmark italic rule · an English word inside a Hebrew heading is set in Instrument Serif italic, as the brand defines it */
/* Hallmark · answered F7 · pill shapes are the glass header's own control language: the nav links, the search key, the menu and the tabs */
/* history: the 1.7.5 Paper and Ink stylesheet below is kept; its literal colours were swept into tokens and its dead home rules removed on 31.10.2026 (v3) */
    :root {
      color-scheme: light;
      --paper: #F9F8F3;
      --ink: #22201E;
      --accent: #C4613A;
      --label: #A44E2C;
      --line: rgba(34, 32, 30, .18);
      --soft: rgba(34, 32, 30, .055);
      --quiet: rgba(34, 32, 30, .68);
      --accent-soft: rgba(196, 97, 58, .12);
      --orb: #DED5DC;
      --green: #2F7D4A;
      --result-bg: #E0EDDE;
      --result-line: rgba(47, 125, 74, .28);
      --chat-bg: #FFFBF5;
      --shadow: 0 20px 55px rgba(34, 32, 30, .12);
      --head: "Assistant", sans-serif;
      --body: "Assistant", sans-serif;
      --mono: "JetBrains Mono", "Assistant", ui-monospace, "SFMono-Regular", monospace; /* Assistant catches any Hebrew letter in a mono block (JetBrains Mono has none), DESIGN §3 */
          --serif: "Instrument Serif", serif;
      /* literals swept into tokens, v3 31.10.2026 */
      --accent-a100: rgba(196, 97, 58, 0.1);
      --accent-a220: rgba(196, 97, 58, 0.22);
      --accent-a240: rgba(196, 97, 58, 0.24);
      --accent-a260: rgba(196, 97, 58, 0.26);
      --accent-a280: rgba(196, 97, 58, 0.28);
      --accent-a300: rgba(196, 97, 58, 0.3);
      --accent-a320: rgba(196, 97, 58, 0.32);
      --accent-a360: rgba(196, 97, 58, 0.36);
      --black: #100F0E;
      --black-a080: rgba(16, 15, 14, 0.08);
      --black-a220: rgba(16, 15, 14, 0.22);
      --black-a240: rgba(16, 15, 14, 0.24);
      --black-a280: rgba(16, 15, 14, 0.28);
      --black-a300: rgba(16, 15, 14, 0.3);
      --black-a380: rgba(16, 15, 14, 0.38);
      --black-a400: rgba(16, 15, 14, 0.4);
      --black-a450: rgba(16, 15, 14, 0.45);
      --black-a500: rgba(16, 15, 14, 0.5);
      --black-a520: rgba(16, 15, 14, 0.52);
      --c-1d5c32: #1D5C32;
      --c-262626: #262626;
      --c-28c840: #28C840;
      --c-2f9e6b: #2F9E6B;
      --c-4f4944: #4F4944;
      --c-6fcf97: #6FCF97;
      --c-7a2f16: #7A2F16;
      --c-c7aaee: #C7AAEE;
      --c-e2f3e4: #E2F3E4;
      --c-fbf6ec: #FBF6EC;
      --c-febc2e: #FEBC2E;
      --c-ff5f57: #FF5F57;
      --c-ffaac0: #FFAAC0;
      --c3a3631-a580: rgba(58, 54, 49, 0.58);
      --c3a3631-a780: rgba(58, 54, 49, 0.78);
      --c492f22-a160: rgba(73, 47, 34, 0.16);
      --c6fcf97-a000: rgba(111, 207, 151, 0);
      --c6fcf97-a550: rgba(111, 207, 151, 0.55);
      --c7a2f16-a180: rgba(122, 47, 22, 0.18);
      --ca45f43-a300: rgba(164, 95, 67, 0.3);
      --cd98a6a-a500: rgba(217, 138, 106, 0.5);
      --cd98a6a-a600: rgba(217, 138, 106, 0.6);
      --cd9a441-a070: rgba(217, 164, 65, 0.07);
      --cd9a441-a100: rgba(217, 164, 65, 0.1);
      --cfffbf5-a420: rgba(255, 251, 245, 0.42);
      --cfffbf5-a550: rgba(255, 251, 245, 0.55);
      --green-a000: rgba(47, 125, 74, 0);
      --green-a080: rgba(47, 125, 74, 0.08);
      --green-a120: rgba(47, 125, 74, 0.12);
      --green-a600: rgba(47, 125, 74, 0.6);
      --ink-a035: rgba(34, 32, 30, 0.035);
      --ink-a045: rgba(34, 32, 30, 0.045);
      --ink-a060: rgba(34, 32, 30, 0.06);
      --ink-a070: rgba(34, 32, 30, 0.07);
      --ink-a090: rgba(34, 32, 30, 0.09);
      --ink-a100: rgba(34, 32, 30, 0.1);
      --ink-a120: rgba(34, 32, 30, 0.12);
      --ink-a140: rgba(34, 32, 30, 0.14);
      --ink-a220: rgba(34, 32, 30, 0.22);
      --ink-a260: rgba(34, 32, 30, 0.26);
      --ink-a320: rgba(34, 32, 30, 0.32);
      --ink-a500: rgba(34, 32, 30, 0.5);
      --ink-a640: rgba(34, 32, 30, 0.64);
      --ink-a720: rgba(34, 32, 30, 0.72);
      --paper-a040: rgba(249, 248, 243, 0.04);
      --paper-a060: rgba(249, 248, 243, 0.06);
      --paper-a120: rgba(249, 248, 243, 0.12);
      --paper-a160: rgba(249, 248, 243, 0.16);
      --paper-a280: rgba(249, 248, 243, 0.28);
      --paper-a300: rgba(249, 248, 243, 0.3);
      --paper-a350: rgba(249, 248, 243, 0.35);
      --paper-a500: rgba(249, 248, 243, 0.5);
      --paper-a620: rgba(249, 248, 243, 0.62);
      --paper-a780: rgba(249, 248, 243, 0.78);
      --paper-a800: rgba(249, 248, 243, 0.8);
      --white: #FFFDF8;
      --white-a050: rgba(255, 253, 248, 0.05);
      --white-a060: rgba(255, 253, 248, 0.06);
      --white-a080: rgba(255, 253, 248, 0.08);
      --white-a100: rgba(255, 253, 248, 0.1);
      --white-a120: rgba(255, 253, 248, 0.12);
      --white-a160: rgba(255, 253, 248, 0.16);
      --white-a220: rgba(255, 253, 248, 0.22);
      --white-a450: rgba(255, 253, 248, 0.45);
      --white-a480: rgba(255, 253, 248, 0.48);
      --white-a500: rgba(255, 253, 248, 0.5);
    }


    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background: var(--paper);
      color: var(--ink);
      font-family: var(--body);
      font-size: 17px;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
      overflow-wrap: anywhere;
    }
    a, button { font: inherit; }
    a { color: inherit; }
    button { color: inherit; }
    img { display: block; max-width: 100%; height: auto; }
    .wrap { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }
    .skip {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      position: fixed;
      inset-block-start: 12px;
      inset-inline-start: 12px;
      z-index: 50;
      transform: translateY(-160%);
      padding: 8px 14px;
      background: var(--ink);
      color: var(--paper);
    }
    .skip:focus { transform: translateY(0); }

    .site-header {
      position: relative;
      min-height: 98px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding-block: 16px 30px;
      border-block-end: 1px solid var(--line);
    }
    .brand {
      width: 168px;
      padding: 5px 8px;
      background: var(--paper);
    }
    .brand-by {
      position: absolute;
      inset-inline-end: 8px;
      inset-block-end: 10px;
      color: var(--ink);
      direction: ltr;
      font-size: .72rem;
      font-weight: 500;
      line-height: 1;
    }
    .header-cta { flex: 0 0 auto; }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      border: 1px solid var(--ink);
      text-decoration: none;
      font-weight: 700;
      line-height: 1.25;
      text-align: center;
      cursor: pointer;
    }
    .btn-primary { background: var(--label); color: var(--white); border-color: var(--label); }
    .btn-secondary { background: transparent; color: var(--ink); }
    @media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 10px 22px var(--ink-a140); } }
    .btn:active { box-shadow: none; }
    .btn svg { inline-size: 18px; block-size: 18px; flex: 0 0 auto; }

    .hero {
      position: relative;
      isolation: isolate;
      min-height: auto;
      display: grid;
      grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr);
      align-items: center;
      gap: clamp(28px, 4vw, 58px);
      margin-block-start: 0;
      padding-block-start: clamp(64px, 8vw, 98px);
      padding-block-end: clamp(77px, 9.6vw, 118px);
    }
    .hero-copy { min-width: 0; }
    .hero-visual { position: relative; display: grid; place-items: center; padding: 24px 12px; }
    .hero-visual[hidden] { display: none; }
    .hero:has(.hero-visual[hidden]) { grid-template-columns: 1fr; }
    .hero-visual::before { content: ""; position: absolute; inset: 12% -4%; border-radius: 50%; background: radial-gradient(ellipse, var(--accent-soft), transparent 70%); }
    .tip-phone { position: relative; width: min(290px, 100%); padding: 12px; border: 1px solid var(--c-4f4944); border-radius: 40px; background: var(--ink); box-shadow: 16px 28px 45px var(--c492f22-a160); transform: rotate(-5deg); }
    .tip-phone-screen { min-height: 430px; padding: 18px 22px 28px; overflow: hidden; border-radius: 29px; background: var(--chat-bg); }
    .tip-phone-camera { width: 64px; height: 16px; margin: 0 auto 30px; border-radius: 20px; background: var(--ink); }
    .tip-phone-brand { display: block; color: var(--label); font-size: 1rem; font-weight: 600; direction: ltr; text-align: right; }
    .tip-phone-label { margin: 8px 0 2px; font-family: var(--head); font-size: 2.6rem; line-height: 1.1; font-weight: 700; }
    .tip-phone-date { display: block; color: var(--quiet); font-size: .75rem; }
    .tip-phone-title { display: block; margin-block-start: 22px; padding-block-start: 20px; border-block-start: 1px solid var(--line); font-size: 1.12rem; line-height: 1.4; }
    .tip-phone-excerpt { margin: 12px 0 0; color: var(--quiet); font-size: .84rem; line-height: 1.8; }
    .tip-phone-lines { width: 58%; margin-block-start: 26px; border-block-start: 3px solid var(--accent); opacity: .35; }
    .hero h1, h2, .closing h2 {
      font-family: var(--head);
      font-weight: 700;
    }
    .hero h1 { margin: 0; }
    .hero-title-line, .hero .accent-line { display: block; }
    .hero .accent-line { color: var(--accent); }
    .motion-ready .hero-title-line { animation: hero-title-in .7s cubic-bezier(.16, 1, .3, 1) .08s both; }
    .motion-ready .hero .accent-line { animation: hero-title-in .78s cubic-bezier(.16, 1, .3, 1) .22s both; }
    .motion-ready .hero .lead,
    .motion-ready .hero .hero-actions,
    .motion-ready .hero .content-tags { animation: hero-support-in .62s cubic-bezier(.16, 1, .3, 1) both; }
    .motion-ready .hero .lead { animation-delay: .38s; }
    .motion-ready .hero .hero-actions { animation-delay: .47s; }
    .motion-ready .hero .content-tags { animation-delay: .54s; }
    @keyframes hero-title-in {
      from { opacity: 0; transform: translateY(22px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes hero-support-in {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .lead {
      max-width: 700px;
      margin: 28px 0 0;
      color: var(--quiet);
      font-size: clamp(1.08rem, 2vw, 1.32rem);
      line-height: 1.7;
    }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 32px; }
    .content-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 24px 0 0;
      padding: 0;
      list-style: none;
    }
    .content-tags li {
      padding: 5px 12px;
      border: 1px solid var(--line);
      background: var(--soft);
      font-size: .9rem;
      font-weight: 700;
      line-height: 1.3;
    }



    .tip-of-day { background: var(--soft); }
    .tip-of-day[hidden] { display: none; }
    .tip-of-day-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px 42px; }
    .tip-of-day h2 { margin: 0; font-size: clamp(3rem, 6vw, 5rem); line-height: .98; }
    .tip-of-day-meta { display: flex; flex-wrap: wrap; gap: 9px 12px; align-items: center; margin: 16px 0 0; color: var(--quiet); font-size: .98rem; }
    .tip-of-day-status { border: 1px solid var(--accent); padding: 3px 9px; color: var(--label); font-weight: 700; }
    .tip-of-day-card { max-width: 860px; margin-block-start: 34px; padding: clamp(24px, 4vw, 42px); border: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadow); }
    .tip-of-day-card h3 { margin: 0; font-family: var(--body); font-size: clamp(1.45rem, 3vw, 2.1rem); line-height: 1.28; }
    .tip-of-day-body { margin-block-start: 24px; color: var(--quiet); font-size: clamp(1.05rem, 2vw, 1.22rem); line-height: 1.72; }
    .tip-of-day-body p { margin: 0 0 18px; max-inline-size: 68ch; }
    .tip-of-day-body ul { margin: 0 0 20px; padding-inline-start: 1.25em; }
    .tip-of-day-body li + li { margin-block-start: 9px; }
    .tip-of-day-body a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 4px; }
    .tip-of-day-card .btn { margin-block-start: 10px; }

    .telegram-updates { padding-block: clamp(42px, 5.4vw, 68px); }
    .telegram-updates[hidden] { display: none; }
    .telegram-updates-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 24px 48px; }
    .telegram-updates h2 { margin: 0; font-family: var(--body); font-size: clamp(1.65rem, 3vw, 2.35rem); line-height: 1.2; }
    .telegram-updates-heading p { margin: 8px 0 0; color: var(--quiet); }
    .telegram-update-list { margin: 28px 0 0; padding: 0; list-style: none; border-block-start: 1px solid var(--line); }
    .telegram-update-item { border-block-end: 1px solid var(--line); }
    .telegram-update-link { display: flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 64px; padding-block: 14px; text-decoration: none; font-weight: 700; }
    .telegram-update-link::after { content: "↗\FE0E"; flex: 0 0 auto; color: var(--label); font-size: 1.3rem; font-weight: 500; }
    @media (hover: hover) and (pointer: fine) { .telegram-update-link:hover { color: var(--label); } }

    section { padding-block: clamp(64px, 8vw, 98px); }
    .rule-top { border-block-start: 1px solid var(--line); }
    .section-grid {
      display: grid;
      grid-template-columns: minmax(180px, .58fr) minmax(0, 1.42fr);
      gap: clamp(28px, 7vw, 92px);
    }
    .section-label {
      margin: 0;
      color: var(--label);
      font-size: clamp(1.22rem, 2.2vw, 1.55rem);
      font-weight: 800;
      line-height: 1.35;
    }
    h2 { margin: 0; }
    .big-copy {
      margin: 24px 0 0;
      max-width: 780px;
      font-size: clamp(1.2rem, 2.4vw, 1.7rem);
      line-height: 1.65;
    }

    .what-list { margin-block-start: 42px; border-block-start: 1px solid var(--line); }
    .what-item {
      display: grid;
      grid-template-columns: 48px minmax(150px, .44fr) minmax(0, 1fr);
      gap: 20px;
      align-items: baseline;
      padding-block: 25px;
      border-block-end: 1px solid var(--line);
    }
    .what-item .no { color: var(--accent); font-weight: 800; }
    .what-item h3 { margin: 0; font-size: 1.3rem; }
    .what-item p { margin: 0; color: var(--quiet); }

    .demo-section { background: var(--paper); overflow: hidden; }
    .demo-intro { max-width: 720px; margin-block-end: 32px; }
    .demo-intro .section-label { width: 100%; text-align: right; }
    .demo-intro > p:last-child { margin: 18px 0 0; color: var(--quiet); }
    .demo-layout {
      display: grid;
      grid-template-columns: minmax(250px, .68fr) minmax(0, 1.32fr);
      gap: clamp(30px, 5vw, 68px);
      align-items: center;
    }
    .assistant-notes { min-width: 0; }
    .assistant-note + .assistant-note { margin-block-start: 28px; padding-block-start: 24px; border-block-start: 1px solid var(--line); }
    .assistant-note h3 { margin: 0; font-size: 1.48rem; }
    .assistant-note ul { margin: 12px 0 0; padding: 0 1.15rem 0 0; }
    .assistant-note li { margin-block-start: 7px; color: var(--quiet); }
    .assistant-note li::marker { color: var(--label); }
    .demo-stage { position: relative; isolation: isolate; min-width: 0; padding: clamp(10px, 2vw, 26px); }
    .demo-shell {
      position: relative;
      min-height: 520px;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 30px;
      box-shadow: var(--shadow);
      background: var(--chat-bg);
    }
    .chat-window { display: flex; flex-direction: column; min-width: 0; min-height: 520px; }
    .chat-head {
      min-height: 78px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 18px 24px;
      border-block-end: 1px solid var(--line);
      background: var(--chat-bg);
    }
    .chat-title { font-size: 1.25rem; font-weight: 800; direction: ltr; }
    .connection { display: flex; align-items: center; gap: 8px; color: var(--quiet); font-size: .92rem; }
    .dot { inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--green); }
    .chat-body {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 14px;
      padding: clamp(24px, 5vw, 54px);
      background-color: var(--chat-bg);
      background-image: radial-gradient(circle, var(--ink-a100) 1px, transparent 1.35px);
      background-size: 18px 18px;
    }
    .chat-panel[hidden] { display: none; }
    .chat-panel { display: flex; flex-direction: column; gap: 14px; }
    .assistant-sequence {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .typing-indicator {
      position: absolute;
      z-index: 1;
      inset-block-start: 0;
      inset-inline-start: 0;
      width: fit-content;
      min-width: 58px;
      height: 46px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      padding-inline: 16px;
      border: 1px solid var(--line);
      border-radius: 18px 18px 18px 6px;
      background: var(--ink);
      box-shadow: 0 8px 20px var(--shadow-s);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
    .typing-dot {
      inline-size: 6px;
      block-size: 6px;
      border-radius: 50%;
      background: var(--paper);
      opacity: .46;
    }
    .chat-panel.is-preparing .message-step { opacity: 0; }
    .chat-panel.is-entering .step-user {
      animation: message-arrive .46s cubic-bezier(.16, 1, .3, 1) both;
    }
    .chat-panel.is-entering .typing-indicator {
      visibility: visible;
      animation: typing-window 1.05s cubic-bezier(.4, 0, .2, 1) .44s both;
    }
    .chat-panel.is-entering .typing-dot {
      animation: typing-bounce .72s cubic-bezier(.45, 0, .55, 1) infinite;
    }
    .chat-panel.is-entering .typing-dot:nth-child(2) { animation-delay: .12s; }
    .chat-panel.is-entering .typing-dot:nth-child(3) { animation-delay: .24s; }
    .chat-panel.is-entering .step-assistant {
      animation: message-arrive .5s cubic-bezier(.16, 1, .3, 1) 1.34s both;
    }
    .chat-panel.is-entering .step-result {
      animation: message-arrive .48s cubic-bezier(.16, 1, .3, 1) 1.96s both;
    }
    @keyframes message-arrive {
      from { opacity: 0; transform: translateY(9px) scale(.988); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    @keyframes typing-window {
      0% { opacity: 0; transform: translateY(7px) scale(.98); }
      14%, 78% { opacity: 1; transform: translateY(0) scale(1); }
      100% { opacity: 0; transform: translateY(-3px) scale(.99); visibility: hidden; }
    }
    @keyframes typing-bounce {
      0%, 60%, 100% { opacity: .46; transform: translateY(0); }
      30% { opacity: 1; transform: translateY(-4px); }
    }
    .bubble {
      width: fit-content;
      max-width: min(88%, 620px);
      padding: 15px 18px;
      line-height: 1.6;
      border: 1px solid var(--line);
      border-radius: 18px 18px 6px 18px;
      box-shadow: 0 8px 20px var(--shadow-s);
    }
    .bubble-user { margin-inline-start: auto; background: var(--accent-soft); }
    .bubble-assistant { margin-inline-end: auto; border-radius: 18px 18px 18px 6px; background: var(--ink); color: var(--paper); }
    .result-card {
      width: min(88%, 620px);
      display: flex;
      align-items: center;
      gap: 14px;
      margin-inline-end: auto;
      padding: 15px 17px;
      border: 1px solid var(--result-line);
      border-radius: 16px;
      background: var(--result-bg);
      color: var(--ink);
      box-shadow: 0 8px 20px var(--green-a080);
    }
    .result-icon {
      position: relative;
      display: grid;
      place-items: center;
      inline-size: 42px;
      block-size: 42px;
      flex: 0 0 auto;
      border-radius: 12px;
      background: var(--green-a120);
      color: var(--green);
    }
    .result-icon > svg { inline-size: 22px; block-size: 22px; }
    .check-badge {
      position: absolute;
      inset-inline-start: -5px;
      inset-block-end: -5px;
      display: grid;
      place-items: center;
      inline-size: 20px;
      block-size: 20px;
      border: 2px solid var(--result-bg);
      border-radius: 50%;
      background: var(--green);
      color: var(--white);
      font-size: .72rem;
      font-weight: 800;
      line-height: 1;
    }
    .result-copy { min-width: 0; }
    .result-copy strong, .result-copy small { display: block; }
    .result-copy strong { font-size: 1.02rem; line-height: 1.35; }
    .result-copy small { margin-block-start: 3px; color: var(--quiet); font-size: .88rem; line-height: 1.45; }
    .composer-wrap { padding: 14px 20px 8px; background: var(--chat-bg); }
    .composer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      min-height: 50px;
      padding: 10px 14px;
      border: 1px solid var(--line);
      border-radius: 16px;
      color: var(--quiet);
      background: var(--soft);
    }
    .composer-icon {
      display: grid;
      place-items: center;
      inline-size: 32px;
      block-size: 32px;
      flex: 0 0 auto;
      border-radius: 50%;
      background: var(--label);
      color: var(--paper);
      font-weight: 800;
    }
    .demo-note { padding: 0 24px 16px; color: var(--quiet); font-size: .86rem; background: var(--chat-bg); }
    .demo-tabs {
      position: relative;
      display: flex;
      justify-content: center;
      gap: 8px;
      width: fit-content;
      max-width: 100%;
      margin: 18px auto 0;
    }
    .demo-tab {
      min-width: 0;
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 1 auto;
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 6px 13px;
      background: var(--ink-a035);
      color: var(--quiet);
      text-align: center;
      font-size: .88rem;
      font-weight: 700;
      line-height: 1.15;
      white-space: nowrap;
      cursor: pointer;
      transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
    }
    @media (hover: hover) and (pointer: fine) { .demo-tab:hover { color: var(--ink); background: var(--white-a480); } }
    .demo-tab[aria-selected="true"] {
      color: var(--ink);
      border-color: var(--ca45f43-a300);
      background: var(--chat-bg);
      box-shadow: 0 4px 12px var(--ink-a100);
    }
    @media (hover: hover) and (pointer: fine) { .demo-tab[aria-selected="true"]:hover { color: var(--ink); background: var(--chat-bg); } }

    .prompt-intro { max-width: 760px; }
    .prompt-intro > p:last-child { margin: 18px 0 0; color: var(--quiet); font-size: 1.08rem; }
    .prompt-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 20px;
      margin-block-start: 38px;
    }
    .prompt-card {
      display: flex;
      flex-direction: column;
      min-width: 0;
      padding: clamp(24px, 4vw, 36px);
      border: 1px solid var(--line);
      background: var(--chat-bg);
    }
    .prompt-card,
    .tool-item,
    .shortcut-item {
      position: relative;
      transition: transform .3s cubic-bezier(.22, .8, .32, 1), box-shadow .3s ease, background-color .3s ease, border-color .3s ease;
    }
    .prompt-card:focus-within, .tool-item:focus-within, .shortcut-item:focus-within {
      z-index: 1;
      transform: translateY(-3px);
      border-color: var(--accent-a240);
      background: var(--chat-bg);
      box-shadow: 0 14px 34px var(--ink-a090);
    }
    @media (hover: hover) and (pointer: fine) { .prompt-card:hover, .tool-item:hover, .shortcut-item:hover {
      z-index: 1;
      transform: translateY(-3px);
      border-color: var(--accent-a240);
      background: var(--chat-bg);
      box-shadow: 0 14px 34px var(--ink-a090);
    } }
    .prompt-card h3 { margin: 0; font-size: clamp(1.3rem, 2.3vw, 1.65rem); line-height: 1.4; }
    .prompt-text { flex: 1; margin: 18px 0 0; color: var(--quiet); white-space: pre-line; }
    .copy-btn { align-self: flex-start; min-height: 44px; margin-block-start: 24px; padding-inline: 18px; }
    .copy-icon {
      position: relative;
      inline-size: 18px;
      block-size: 18px;
      flex: 0 0 auto;
    }
    .copy-icon svg {
      position: absolute;
      inset: 0;
      inline-size: 18px;
      block-size: 18px;
      transition: opacity .2s ease, transform .24s cubic-bezier(.22, .8, .32, 1);
    }
    .js .copy-icon-check { opacity: 0; transform: scale(.55) rotate(-8deg); }
    .is-copied .copy-icon-copy { opacity: 0; transform: scale(.7); }
    .is-copied .copy-icon-check { opacity: 1; transform: scale(1) rotate(0); }
    .copy-label { min-width: 3em; }
    .is-copied { border-color: var(--green); color: var(--green); }
    .copy-status { min-height: 1.5em; margin: 8px 0 0; color: var(--green); font-size: .88rem; font-weight: 700; }

    .work-list, .tool-list { margin-block-start: 38px; }
    .tool-list { display: grid; }
    .work-item {
      display: grid;
      grid-template-columns: 72px minmax(0, 1fr);
      gap: 22px;
      padding-block: 24px;
      border-block-end: 1px solid var(--line);
    }
    .work-item:first-child { border-block-start: 1px solid var(--line); }
    .work-number {
      font-family: var(--head);
      color: var(--accent);
      font-size: 2.4rem;
      line-height: 1;
    }
    .work-item p { margin: 0; font-size: clamp(1.06rem, 2vw, 1.3rem); }
    .tool-item h3 { margin: 0; direction: ltr; text-align: right; }
    .tool-item h3 a { text-decoration-thickness: 1px; text-underline-offset: 5px; }
    @media (hover: hover) and (pointer: fine) { .tool-item h3 a:hover { color: var(--label); } }
    .tool-item p { margin: 0; color: var(--quiet); }

    .tools-layout { display: block; }
    .tools-layout > .section-label { margin-block-end: 14px; }
    .tool-list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; border: 0; }
    .tool-item { display: flex; flex-direction: column; gap: 16px; align-items: stretch; padding: 22px 18px; border: 1px solid var(--line); background: var(--cfffbf5-a420); }
    .tool-item h3 { font-size: 1.12rem; line-height: 1.4; }
    .tool-item h3 a { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; text-decoration: none; }
    .tool-item h3 a::after { content: "↗\FE0E"; position: absolute; inset-inline-end: 18px; inset-block-start: 26px; color: var(--label); font-size: .98rem; }
    .tool-icon { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--accent); }
    .tool-icon svg { width: 26px; height: 26px; }
    .tool-item p { font-size: .94rem; line-height: 1.65; }

    .guide-grid { display: grid; }
    .guide-card { min-width: 0; }
    .guide-card a { height: 100%; display: flex; flex-direction: column; color: inherit; text-decoration: none; }
    .guide-cover { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; border: 1px solid var(--line); }
    .guide-card h3 { margin: 20px 0 8px; font-family: var(--head); font-size: 2.4rem; line-height: 1.1; }
    .guide-card p { margin: 0 0 18px; color: var(--quiet); font-size: 1rem; line-height: 1.6; }
    .guide-link { display: flex; justify-content: space-between; gap: 16px; margin-block-start: auto; padding-block: 12px; color: var(--label); border-block-start: 1px solid var(--line); font-weight: 500; }
    .guide-card a:focus-visible .guide-cover { border-color: var(--accent); }
    @media (hover: hover) and (pointer: fine) { .guide-card a:hover .guide-cover { border-color: var(--accent); } }
    @media (hover: hover) and (pointer: fine) { .guide-card a:hover .guide-link { color: var(--ink); } }
    .guide-card { position: relative; }

    /* Sticker: a small tilted pill, like a label stuck on by hand. */
    .sticker {
      position: absolute;
      z-index: 1;
      inset-block-start: 12px;
      inset-inline-start: 12px;
      padding: 3px 12px;
      border-radius: 999px;
      background: var(--label);
      color: var(--white);
      font-size: .8rem;
      font-weight: 700;
      line-height: 1.5;
      transform: rotate(-3deg);
    }
    /* Tag: a category label. One per card, ink text on a pastel, no outline. */
    .tag {
      display: inline-block;
      align-self: flex-start;
      justify-self: start;
      margin-block-start: 16px;
      padding: 2px 12px;
      border-radius: 999px;
      color: var(--ink);
      font-size: .8rem;
      font-weight: 700;
      line-height: 1.6;
    }
    .tag-mint { background: var(--tag-mint); }
    .tag-sky { background: var(--tag-sky); }
    .tag-lavender { background: var(--tag-lavender); }
    .tag-apricot { background: var(--tag-apricot); }
    .tag-home { background: var(--world-home); }
    .tag-creators { background: var(--world-creators); }
    .tag-business { background: var(--world-business); }

    .shortcut-intro { max-width: 760px; }
    .shortcut-intro > p:last-child { margin: 18px 0 0; color: var(--quiet); font-size: 1.08rem; }
    .shortcut-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-auto-rows: 1fr;
      column-gap: clamp(24px, 4vw, 48px);
      margin-block-start: 38px;
      border-block-start: 1px solid var(--line);
    }
    .shortcut-item {
      min-width: 0;
      height: 100%;
      min-height: 138px;
      display: block;
      padding-inline-start: 112px;
      padding-block: 22px;
      border-block-end: 1px solid var(--line);
    }
    .shortcut-command {
      display: block;
      direction: ltr;
      text-align: right;
      color: var(--label);
      font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
      font-size: clamp(1.02rem, 2vw, 1.2rem);
      font-weight: 800;
      line-height: 1.35;
    }
    .shortcut-description { margin: 7px 0 0; color: var(--quiet); line-height: 1.5; }
    .shortcut-description strong { color: var(--ink); }
    .shortcut-copy {
      position: absolute;
      inset-inline-start: 0;
      inset-block-start: 22px;
      width: 86px;
      min-width: 86px;
      min-height: 44px;
      padding-inline: 12px;
    }
    .shortcut-status { min-height: 1.25em; margin: 7px 0 0; color: var(--green); font-size: .84rem; font-weight: 700; }

    .shortcut-instagram-link {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: var(--ink);
      font-weight: 400;
      text-decoration: none;
    }
    .shortcut-instagram-link svg {
      inline-size: 16px;
      block-size: 16px;
      flex: 0 0 auto;
      stroke: currentColor;
      stroke-width: 1.5;
    }
    @media (hover: hover) and (pointer: fine) { .shortcut-instagram-link:hover { color: var(--label); } }

    .about-box {
      position: relative;
      padding: clamp(32px, 7vw, 78px);
      border: 1px solid var(--line);
      background: var(--ink);
      color: var(--paper);
    }
    .about-box::before {
      content: "3";
      position: absolute;
      inset-block-start: -28px;
      inset-inline-end: 28px;
      color: var(--accent);
      font-family: var(--head);
      font-size: clamp(6rem, 15vw, 12rem);
      line-height: 1;
    }
    .about-content {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) clamp(180px, 22vw, 250px);
      gap: clamp(28px, 6vw, 72px);
      align-items: center;
    }
    .about-copy { min-width: 0; }
    .about-box h2 { position: relative; max-width: 720px; }
    .about-box p { position: relative; max-width: 760px; margin: 30px 0 0; font-size: clamp(1.16rem, 2vw, 1.45rem); }
    .about-portrait {
      inline-size: 100%;
      height: auto;
      aspect-ratio: 1;
      border: 1px solid var(--paper-a280);
      border-radius: 50%;
      object-fit: cover;
      object-position: center;
      box-shadow: 0 18px 38px var(--black-a240);
    }

    .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-block-start: 38px; }
    .step {
      min-width: 0;
      padding: 28px 24px;
      border: 1px solid var(--line);
      background: var(--chat-bg);
    }
    .step-number { display: block; margin-block-end: 24px; color: var(--accent); font-family: var(--head); font-size: 3.6rem; line-height: 1; font-weight: 700; }
    .step h3 { margin: 0; font-size: 1.2rem; line-height: 1.5; }
    .step h3 span { display: block; margin-block-start: 12px; color: var(--quiet); font-size: 1rem; line-height: 1.65; font-weight: 400; }
    .steps-layout { display: block; }
    .steps-layout > .section-label { margin-block-end: 14px; }
    .steps-layout h2 br { display: none; }
    .steps-layout h2 { max-width: 820px; }
    .faq-section { padding-block-end: clamp(34px, 4vw, 48px); }

    .faq { max-width: 860px; margin-block-start: 42px; }
    details { border-block-start: 1px solid var(--line); }
    details:last-child { border-block-end: 1px solid var(--line); }
    summary {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      padding-block: 22px;
      font-weight: 700;
      cursor: pointer;
      list-style: none;
    }
    summary::-webkit-details-marker { display: none; }
    summary::after { content: "+"; color: var(--label); font-size: 1.55rem; line-height: 1; }
    details[open] summary::after { content: "−"; }
    details p { margin: -5px 0 0; padding-block-end: 24px; color: var(--quiet); }

    .closing {
      text-align: center;
      background: var(--ink);
      color: var(--paper);
      padding-block: clamp(52px, 6vw, 76px);
    }
    .closing h2 { max-width: 820px; margin-inline: auto; }
    .closing .btn { margin-block-start: 30px; }
    @media (hover: hover) and (pointer: fine) { .closing .btn:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); } }
    .closing :focus-visible { outline-color: var(--paper); }

    footer {
      padding-block: 32px calc(96px + env(safe-area-inset-bottom));
      background: var(--ink);
      color: var(--paper);
    }
    .footer-row { display: flex; justify-content: space-between; align-items: end; gap: 30px; }
    .signature { direction: ltr; font-family: var(--body); font-size: 1.05rem; font-weight: 500; line-height: 1.4; text-align: right; }
    .signature strong { color: var(--label); }
    .tagline { margin: 2px 0 0; color: var(--paper); font-family: var(--body); font-size: .94rem; line-height: 1.45; opacity: .72; }
    .footer-links { display: flex; flex-wrap: wrap; gap: 10px 24px; font-family: var(--body); font-size: .94rem; font-weight: 400; }
    .footer-links a, .link-button { text-underline-offset: 5px; }
    .link-button {
      border: 0;
      padding: 0;
      background: transparent;
      color: inherit;
      text-decoration: underline;
      cursor: pointer;
    }

    .privacy-dialog {
      width: min(620px, calc(100% - 28px));
      max-height: min(80vh, 680px);
      margin: auto;
      padding: clamp(24px, 5vw, 42px);
      border: 1px solid var(--line);
      border-radius: 24px;
      background: var(--paper);
      color: var(--ink);
      box-shadow: var(--shadow);
    }
    .privacy-dialog::backdrop { background: var(--ink-a640); }
    .privacy-dialog h2 { font-size: clamp(2.8rem, 8vw, 4.4rem); }
    .privacy-dialog p { margin: 18px 0 0; }
    .privacy-dialog .btn { margin-block-start: 24px; }

    .a11y-launcher {
      position: fixed;
      z-index: 45;
      left: max(14px, env(safe-area-inset-left)); /* the empty side of an RTL page: on the right it covered text */
      bottom: max(14px, env(safe-area-inset-bottom));
      inline-size: 52px;
      block-size: 52px;
      display: grid;
      place-items: center;
      border: 2px solid var(--paper);
      border-radius: 50%;
      background: var(--accent);
      color: var(--white);
      box-shadow: 0 8px 24px var(--ink-a260);
      cursor: pointer;
    }
    @media (hover: hover) and (pointer: fine) { .a11y-launcher:hover { background: var(--ink); } }
    .a11y-launcher svg { inline-size: 27px; block-size: 27px; }
    .a11y-dialog {
      width: min(520px, calc(100% - 28px));
      max-height: min(86vh, 720px);
      margin: auto;
      padding: clamp(24px, 5vw, 38px);
      overflow: auto;
      border: 1px solid var(--line);
      border-radius: 22px;
      background: var(--paper);
      color: var(--ink);
      box-shadow: var(--shadow);
    }
    .a11y-dialog::backdrop { background: var(--ink-a720); }
    .a11y-dialog h2 { font-size: clamp(2.8rem, 8vw, 4.2rem); }
    .a11y-dialog-intro { margin: 14px 0 0; color: var(--quiet); }
    .a11y-options {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-block-start: 24px;
    }
    .a11y-option {
      min-height: 54px;
      border: 1px solid var(--line);
      padding: 10px 12px;
      background: var(--chat-bg);
      color: var(--ink);
      font-weight: 700;
      text-align: start;
      cursor: pointer;
    }
    .a11y-option[aria-pressed="true"] {
      border-color: var(--accent);
      background: var(--label);
      color: var(--white);
    }
    .a11y-dialog-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 22px; }
    .a11y-dialog-actions .btn { min-height: 46px; }
    .sr-only {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      white-space: nowrap !important;
      border: 0 !important;
    }

    html.a11y-large-text { font-size: 112.5%; }
    html.a11y-large-text body { font-size: 1.06rem; }
    html.a11y-readable { --head: "Assistant", sans-serif; }
    html.a11y-readable h1,
    html.a11y-readable h2,
    html.a11y-readable .closing h2 { line-height: 1.12; }
    html.a11y-high-contrast {
      --paper: var(--white);
      --ink: var(--black);
      --accent: var(--c-7a2f16);
      --line: var(--black-a520);
      --soft: var(--black-a080);
      --quiet: var(--c-262626);
      --accent-soft: var(--c7a2f16-a180);
      --chat-bg: var(--white);
      --result-bg: var(--c-e2f3e4);
      --result-line: var(--c-1d5c32);
    }
    html.a11y-underline-links a:not(.btn) { text-decoration-thickness: 2px; text-underline-offset: 4px; }
    html.a11y-reduce-motion { scroll-behavior: auto; }
    html.a11y-reduce-motion *,
    html.a11y-reduce-motion *::before,
    html.a11y-reduce-motion *::after { animation: none !important; transition: none !important; }
    html.a11y-reduce-motion .hero-title-line,
    html.a11y-reduce-motion .hero .accent-line,
    html.a11y-reduce-motion .hero .lead,
    html.a11y-reduce-motion .hero .hero-actions,
    html.a11y-reduce-motion .hero .content-tags,
    html.a11y-reduce-motion .reveal-section,
    html.a11y-reduce-motion .message-step { opacity: 1 !important; transform: none !important; visibility: visible; }
    html.a11y-reduce-motion .typing-indicator { opacity: 0 !important; visibility: hidden !important; }
    html.a11y-reduce-motion .prompt-card:hover,
    html.a11y-reduce-motion .prompt-card:focus-within,
    html.a11y-reduce-motion .tool-item:hover,
    html.a11y-reduce-motion .tool-item:focus-within,
    html.a11y-reduce-motion .shortcut-item:hover,
    html.a11y-reduce-motion .shortcut-item:focus-within { transform: none; }

    .reveal-section { opacity: 1; transform: none; }
    .reveal-section.is-revealing {
      animation: section-reveal .64s cubic-bezier(.22, .65, .32, 1) both;
      will-change: opacity, transform;
    }
    @keyframes section-reveal {
      from { opacity: .58; transform: translate3d(0, 14px, 0); }
      to { opacity: 1; transform: translate3d(0, 0, 0); }
    }

    :focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

    @media (max-width: 820px) {
      .hero { min-height: auto; grid-template-columns: 1fr; }
      .hero-visual { display: none; }
      .tip-phone { transform: rotate(-3deg); width: 260px; }
      .tip-phone-screen { min-height: 390px; }
      .section-grid, .demo-layout { grid-template-columns: 1fr; gap: 26px; }
      .prompt-grid { grid-template-columns: 1fr; }
      .steps { grid-template-columns: 1fr; }
      .guide-card a { display: grid; grid-template-columns: minmax(160px, .8fr) minmax(0, 1.2fr); column-gap: 24px; }
      .guide-cover { grid-row: 1 / span 4; align-self: start; }
      .guide-card h3 { margin-block-start: 0; }
      .tag { margin-block-start: 0; }
      .tool-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .about-content { grid-template-columns: minmax(0, 1fr); }
      .about-portrait { inline-size: min(48vw, 240px); justify-self: center; }
      .demo-tab { min-height: 38px; padding-inline: 10px; font-size: clamp(.76rem, 2.35vw, .86rem); }
    }

    @media (min-width: 821px) and (max-width: 1040px) {
      .hero { grid-template-columns: minmax(0, 1.7fr) minmax(230px, 1fr); gap: 22px; }
      .tool-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }

    @media (max-width: 560px) {
      body { font-size: 16px; }
      .wrap { width: min(100% - 28px, 1120px); }
      .site-header { min-height: 76px; padding-block: 10px 24px; }
      .brand { width: 122px; padding: 4px 6px; }
      .brand-by { inset-inline-end: 6px; inset-block-end: 7px; font-size: .64rem; }
      .header-cta { min-height: 44px; max-width: 170px; padding-inline: 12px; font-size: .82rem; }
      .hero { margin-block-start: 0; padding-block-start: 56px; padding-block-end: 67px; }
      .lead { margin-block-start: 18px; font-size: 1rem; line-height: 1.55; }
      .hero-actions { margin-block-start: 22px; flex-direction: column; }
      .hero-actions .btn { width: 100%; min-height: 48px; }
      .content-tags { gap: 6px; }
      .content-tags li { flex: 1 1 auto; text-align: center; padding-inline: 8px; font-size: .84rem; }
      section { padding-block: 56px; }
      .big-copy { font-size: 1.12rem; }
      .tip-of-day-heading { display: block; }
      .tip-of-day-card { margin-block-start: 26px; }
      .telegram-updates-heading { display: block; }
      .telegram-update-link { min-height: 58px; gap: 16px; }
      .what-item { grid-template-columns: 36px 1fr; gap: 8px 12px; }
      .what-item p { grid-column: 2; }
      .demo-intro { margin-block-end: 26px; }
      .demo-stage { padding-inline: 0; }
      .demo-shell { min-height: 500px; border-radius: 22px; }
      .chat-window { min-height: 500px; }
      .chat-head { min-height: 66px; padding: 14px 16px; }
      .chat-title { font-size: 1.05rem; }
      .chat-body { padding: 22px 16px; min-height: 300px; }
      .bubble, .result-card { max-width: 94%; width: auto; padding: 13px 15px; }
      .result-card { width: 94%; }
      .composer-wrap { padding-inline: 12px; }
      .composer { font-size: .84rem; }
      .demo-note { padding-inline: 16px; }
      .demo-tabs { gap: 5px; }
      .demo-tab { min-height: 44px; padding-inline: 7px; font-size: clamp(.68rem, 3vw, .76rem); }
      .a11y-options { grid-template-columns: 1fr; }
      .work-item { grid-template-columns: 48px 1fr; gap: 14px; }
      .tool-list, .shortcut-list { grid-template-columns: 1fr; }
      .tool-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
      .tool-item { padding: 20px 14px; }
      .tool-item h3 a::after { inset-inline-end: 14px; }
      .guide-card a { display: flex; }
      .guide-card h3 { margin-block-start: 18px; }
      .tag { margin-block-start: 16px; }
      .steps { gap: 14px; }
      .step { padding: 24px; }
      .step-number { margin-block-end: 16px; }
      .shortcut-item {
        min-height: 132px;
        padding-inline-start: 102px;
      }
      .shortcut-copy { min-width: 86px; padding-inline: 12px; }
      .about-box::before { inset-inline-end: 18px; }
      .about-content { grid-template-columns: minmax(0, 1fr); }
      .about-portrait { inline-size: min(72vw, 240px); justify-self: center; }
      .footer-row { flex-direction: column; align-items: flex-start; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { animation: none !important; transition: none !important; }
      .hero-title-line,
      .hero .accent-line,
      .hero .lead,
      .hero .hero-actions,
      .hero .content-tags,
      .reveal-section,
      .message-step { opacity: 1 !important; transform: none !important; visibility: visible; }
      .typing-indicator { opacity: 0 !important; visibility: hidden !important; }
      .prompt-card:hover,
      .prompt-card:focus-within,
      .tool-item:hover,
      .tool-item:focus-within,
      .shortcut-item:hover,
      .shortcut-item:focus-within { transform: none; }
    }

    .quick-links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-block-start: 26px; font-size: .92rem; }
    .quick-links a { min-height: 44px; display: inline-flex; align-items: center; color: var(--quiet); text-decoration: none; border-block-end: 1px solid var(--line); }
    @media (hover: hover) and (pointer: fine) { .quick-links a:hover { color: var(--label); border-color: var(--label); } }
    [id$="-title"] { scroll-margin-block-start: 24px; }
    .clipboard-buffer { position: fixed; inset: 0 auto auto 0; opacity: 0; font-size: 16px; }
    .shortcut-status { line-height: 1.5; }
    .demo-tab { min-height: 44px; }
    .footer-row { padding-inline-end: 64px; }
    @media (forced-colors: active) { .btn, .a11y-launcher, .demo-tab { border: 2px solid ButtonText; } }
    @media (max-width: 560px) { .quick-links { gap: 8px 20px; } .footer-row { padding-inline-end: 58px; } }

    /* ===== Paper & Ink layer (2026-10). Brand colors and fonts unchanged; tokens below extend them. ===== */
    :root {
      --paper-deep: #E9E0D1;
      --ink-soft: #3A3631;
      --accent-light: #FFE0CF;
      --ochre: #D9A441;
      --peach: #F2B48C;
      --tag-mint: #BDE9D2;
      --tag-sky: #BBDDF7;
      --tag-lavender: #DDC8F5;
      --tag-apricot: #FFD3B3;
      --world-home: #FFDF9C;
      --world-creators: #FFBFA0;
      --world-business: #D6CFC2;
      --paper-on-ink: rgba(249, 248, 243, .72);
      --line-on-ink: rgba(249, 248, 243, .14);
      --ease-out: cubic-bezier(.16, 1, .3, 1);
      --radius-lg: clamp(26px, 3vw, 40px);
      --radius-md: 24px;
      --stage-gutter: clamp(8px, 1.2vw, 16px);
    }
    html { scroll-padding-block-start: 88px; }
    ::selection { background: var(--accent-a220); }
    h1, h2, h3 { text-wrap: balance; }
    p, li { text-wrap: pretty; }
    [id$="-title"] { scroll-margin-block-start: 12px; }

    /* Header: sticky glass bar with floor navigation and reading progress. */
    .site-header {
      position: sticky;
      inset-block-start: 0;
      z-index: 40;
      min-height: 0;
      display: block;
      padding: 0;
      border: 0;
      background: none;
    }
    /* The glass bar is a taller pseudo-element that slides up 12px when scrolled, so the header keeps one fixed layout height (no reflow). */
    .site-header::before {
      content: "";
      position: absolute;
      inset-inline: 0;
      inset-block: -12px 0;
      z-index: -1;
      background: var(--paper-a800);
      -webkit-backdrop-filter: saturate(1.5) blur(18px);
      backdrop-filter: saturate(1.5) blur(18px);
      transition: transform .4s var(--ease-out), box-shadow .35s ease;
    }
    .site-header.is-scrolled::before { transform: translateY(-12px); box-shadow: 0 1px 0 var(--line), 0 12px 32px var(--ink-a060); }
    .site-header-inner {
      position: relative;
      min-height: 84px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding-block: 10px;
      transition: translate .4s var(--ease-out);
    }
    .site-header.is-scrolled .site-header-inner { translate: 0 -6px; }
    .brand { width: 150px; background: transparent; transform-origin: right center; transition: transform .4s var(--ease-out); }
    .site-header.is-scrolled .brand { transform: scale(.8267); }
    .brand-by { inset-block-end: 6px; font-size: .94rem; transition: opacity .25s ease; }
    .cookie-note { margin: 6px 0 0; color: var(--accent-light); font-size: .9rem; line-height: 1.45; }
    footer :focus-visible { outline-color: var(--accent-light); }
    .site-header.is-scrolled .brand-by { opacity: 0; }
    .floor-nav { display: none; gap: 4px; padding: 4px; border-radius: 999px; background: var(--ink-a045); }
    .floor-nav a {
      min-height: 40px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding-inline: 12px 16px;
      border-radius: 999px;
      color: var(--quiet);
      font-size: .95rem;
      font-weight: 600;
      text-decoration: none;
      transition: background-color .3s ease, color .3s ease, box-shadow .3s ease;
    }
    .floor-nav a span {
      inline-size: 22px;
      block-size: 22px;
      display: inline-grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 50%;
      font-size: .74rem;
      font-weight: 700;
      transition: inherit;
    }
    @media (hover: hover) and (pointer: fine) { .floor-nav a:hover { color: var(--ink); } }
    .floor-nav a[aria-current] { color: var(--ink); background: var(--paper); box-shadow: 0 2px 10px var(--shadow-s); }
    .floor-nav a[aria-current] span { border-color: var(--label); background: var(--label); color: var(--white); }
    .header-cta { min-height: 44px; padding-inline: 20px; }
    .scroll-progress {
      position: absolute;
      inset-inline: 0;
      inset-block-end: 0;
      block-size: 2px;
      background: linear-gradient(to left, var(--accent), var(--ochre));
      transform: scaleX(var(--progress, 0));
      transform-origin: right;
      transition: translate .4s var(--ease-out);
    }
    .site-header.is-scrolled .scroll-progress { translate: 0 -12px; }

    /* Buttons: pills with a real press. */
    .btn {
      min-height: 52px;
      padding-inline: 26px;
      border-radius: 999px;
      transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
    }
    .btn-primary { box-shadow: inset 0 1px 0 var(--white-a160), 0 10px 26px var(--accent-a260); }
    @media (hover: hover) and (pointer: fine) { .btn-primary:hover { background: var(--label); border-color: var(--ink); color: var(--white); box-shadow: 0 16px 34px var(--accent-a320); } }
    .btn:active { transform: translateY(0) scale(.98); }
    .btn svg { transition: transform .2s var(--ease-out); }
    @media (hover: hover) and (pointer: fine) { .btn:hover svg { transform: translateX(3px); } }
    .copy-btn { min-height: 44px; }

    /* Hero: an ink stage with a living three-floor building. */
    .hero { display: block; min-height: 0; padding: var(--stage-gutter) var(--stage-gutter) 0; }
    .hero-stage {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      max-width: 1440px;
      min-height: min(860px, calc(100svh - 100px));
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
      align-items: center;
      gap: clamp(20px, 3vw, 48px);
      margin-inline: auto;
      padding: clamp(48px, 6vw, 88px) clamp(28px, 5.5vw, 84px);
      border-radius: var(--radius-lg);
      background:
        radial-gradient(60% 75% at 24% 52%, var(--accent-a360), transparent 68%),
        radial-gradient(40% 50% at 92% 0%, var(--cd9a441-a100), transparent 62%),
        var(--ink);
      color: var(--paper);
    }
    .hero-stage::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      opacity: .06;
      mix-blend-mode: overlay;
      pointer-events: none;
    }
    .hero-copy { position: relative; z-index: 1; }
    .hero h1 { max-width: none; font-size: clamp(4.6rem, 8.4vw, 8.8rem); line-height: .86; }
    .hero .accent-line { color: var(--accent-light); }
    .hero .lead { max-width: 560px; color: var(--paper-on-ink); font-size: clamp(1.1rem, 1.5vw, 1.32rem); }
    .hero-actions { margin-block-start: 36px; }
    .hero .btn-secondary { color: var(--paper); border-color: var(--paper-a300); background: var(--paper-a040); }
    @media (hover: hover) and (pointer: fine) { .hero .btn-secondary:hover { color: var(--ink); border-color: var(--paper); background: var(--paper); box-shadow: 0 14px 30px var(--black-a300); } }
    .hero .quick-links a { color: var(--paper-a620); border-color: var(--line-on-ink); }
    @media (hover: hover) and (pointer: fine) { .hero .quick-links a:hover { color: var(--accent-light); border-color: var(--accent-light); } }
    .hero :focus-visible, .demo-section :focus-visible, .closing :focus-visible { outline-color: var(--accent-light); }
    .hero-art { position: relative; align-self: stretch; min-height: 540px; }
    .floors-canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; display: block; pointer-events: none; -webkit-mask-image: radial-gradient(closest-side, var(--black) 72%, transparent); mask-image: radial-gradient(closest-side, var(--black) 72%, transparent); }
    .hero-card {
      position: absolute;
      z-index: 2;
      display: block;
      text-align: right;
    }
    .hero-card[hidden] { display: none; }
    .hero-card-tip {
      inset-block-end: 3%;
      inset-inline-end: 0;
      inline-size: min(300px, 74%);
      padding: 18px 20px 20px;
      border-radius: 22px;
      background: var(--chat-bg);
      color: var(--ink);
      box-shadow: 0 30px 70px var(--black-a380), 0 0 0 1px var(--white-a060);
      cursor: pointer;
      transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
    }
    .hero-card-tip::before { content: none; }
    @media (hover: hover) and (pointer: fine) { .hero-card-tip:hover { box-shadow: 0 40px 80px var(--black-a450), 0 0 0 1px var(--cd98a6a-a500); } }
    .hero-card-update {
      inset-block-start: 4%;
      inset-inline-start: 4%;
      inline-size: min(272px, 66%);
      padding: 15px 18px 16px;
      border: 1px solid var(--line-on-ink);
      border-radius: 18px;
      background: var(--c3a3631-a580);
      -webkit-backdrop-filter: blur(14px);
      backdrop-filter: blur(14px);
      color: var(--paper);
      text-decoration: none;
      transition: border-color .3s ease, background-color .3s ease;
    }
    @media (hover: hover) and (pointer: fine) { .hero-card-update:hover { border-color: var(--cd98a6a-a600); background: var(--c3a3631-a780); } }
    .hero-card-kicker { display: flex; align-items: center; gap: 8px; color: var(--label); font-size: .78rem; font-weight: 700; line-height: 1.3; }
    .hero-card-update .hero-card-kicker { color: var(--accent-light); padding-inline-end: 22px; }
    .live-dot { position: relative; inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--green); }
    .live-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--green); opacity: 0; }
    .motion-ready .live-dot::after { animation: live-ping 2.4s var(--ease-out) infinite; }
    .hero-card-date { display: block; margin-block-start: 3px; color: var(--quiet); font-size: .74rem; }
    .hero-card-title { display: -webkit-box; margin-block-start: 10px; overflow: hidden; font-size: 1.02rem; line-height: 1.42; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
    .hero-card-update .hero-card-title { margin-block-start: 8px; font-size: .98rem; -webkit-line-clamp: 2; }
    .hero-card-excerpt { display: -webkit-box; margin: 8px 0 0; overflow: hidden; color: var(--quiet); font-size: .84rem; line-height: 1.65; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
    .hero-card-arrow { position: absolute; inset-block-start: 13px; inset-inline-end: 16px; color: var(--accent-light); transition: transform .25s var(--ease-out); }
    @media (hover: hover) and (pointer: fine) { .hero-card-update:hover .hero-card-arrow { transform: translate(-3px, -3px); } }
    .hero-card-guide {
      inset-block-start: 40%;
      inset-inline-end: 0;
      inline-size: min(236px, 46%);
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px 10px 10px;
      border: 1px solid var(--line-on-ink);
      border-radius: 16px;
      background: var(--c3a3631-a580);
      -webkit-backdrop-filter: blur(14px);
      backdrop-filter: blur(14px);
      color: var(--paper);
      text-decoration: none;
      transition: border-color .3s ease, background-color .3s ease;
    }
    .hero-card-guide[hidden] { display: none; }
    @media (hover: hover) and (pointer: fine) { .hero-card-guide:hover { border-color: var(--cd98a6a-a600); background: var(--c3a3631-a780); } }
    .hero-card-thumb { flex: 0 0 auto; inline-size: 64px; block-size: 40px; object-fit: cover; border-radius: 8px; }
    .hero-card-guide-copy { min-width: 0; }
    .hero-card-guide .hero-card-kicker { color: var(--accent-light); font-size: .72rem; }
    .hero-card-guide .hero-card-title { margin-block-start: 2px; font-size: .9rem; line-height: 1.35; -webkit-line-clamp: 2; }
    .motion-ready .hero-card-guide { animation: card-in .9s var(--ease-out) calc(var(--intro-delay) + .75s) both, card-float 10s ease-in-out calc(var(--intro-delay) + 1.7s) infinite alternate; }
    /* Headline words rise out of a mask, one after another. */
    .hero h1.is-split .hero-title-line, .hero h1.is-split .accent-line { animation: none; }
    .hero-word { display: inline-block; overflow: hidden; padding-block: .14em .2em; margin-block: -.14em -.2em; vertical-align: top; }
    .hero-word > span { display: inline-block; animation: word-rise 1s var(--ease-out) both; animation-delay: calc(var(--intro-delay) + .1s + var(--word-i, 0) * 90ms); }
    @keyframes word-rise { from { transform: translate3d(0, 110%, 0) rotate(3deg); } to { transform: none; } }
    html.a11y-reduce-motion .hero-word > span { animation: none; transform: none; }
    .motion-ready .hero-card-tip { animation: card-in .9s var(--ease-out) calc(var(--intro-delay) + .35s) both, card-float 8s ease-in-out calc(var(--intro-delay) + 1.3s) infinite alternate; }
    .motion-ready .hero-card-update { animation: card-in .9s var(--ease-out) calc(var(--intro-delay) + .55s) both, card-float 9s ease-in-out calc(var(--intro-delay) + 1.5s) infinite alternate-reverse; }
    @keyframes card-in { from { opacity: 0; transform: translate3d(0, 26px, 0) scale(.97); } to { opacity: 1; transform: none; } }
    @keyframes card-float { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -10px, 0); } }
    @keyframes live-ping { 0% { opacity: .9; transform: scale(.6); } 80%, 100% { opacity: 0; transform: scale(1.6); } }

    /* Floors: the brand name becomes the page's structure. */
    .floor-marker { padding-block: clamp(80px, 11vw, 150px) clamp(4px, 1vw, 12px); scroll-margin-block-start: 0; }
    .floor-marker-inner { display: flex; align-items: flex-end; gap: clamp(16px, 2.4vw, 32px); }
    .floor-numeral { color: var(--accent); font-family: var(--head); font-size: clamp(7rem, 15vw, 13rem); font-weight: 700; line-height: .7; }
    .floor-name { display: flex; flex-direction: column; margin: 0; font-family: var(--head); font-size: clamp(2.9rem, 5.4vw, 4.8rem); font-weight: 700; line-height: .9; }
    .floor-line { flex: 1; block-size: 1px; margin-block-end: 1.1rem; background: linear-gradient(to left, var(--line), transparent); transform-origin: right; }
    .rule-top { border-block-start: 0; }
    .floor-marker + section,
    .floor-marker + section[hidden] + section,
    .floor-marker + section[hidden] + section[hidden] + section { padding-block-start: clamp(36px, 4.5vw, 64px); }
    h2 { font-size: clamp(3.4rem, 7vw, 6.2rem); line-height: .9; }
    .section-label { font-size: clamp(1.1rem, 1.8vw, 1.35rem); }

    /* Floor 1. */
    .tip-of-day { margin: clamp(28px, 3vw, 40px) var(--stage-gutter) 0; border-radius: var(--radius-lg); background: var(--paper-deep); }
    .tip-of-day-status { border-radius: 999px; padding-inline: 12px; }
    .tip-of-day { padding-block: clamp(44px, 5.5vw, 76px); }
    .tip-of-day h2 { font-size: clamp(2.6rem, 4.6vw, 3.8rem); }
    .tip-of-day-meta { margin-block-start: 10px; font-size: .92rem; }
    .tip-of-day-card { max-width: 760px; margin-block-start: 26px; padding: clamp(22px, 3vw, 34px); border: 0; border-radius: var(--radius-md); background: var(--chat-bg); box-shadow: 0 1px 0 var(--glass-edge) inset, 0 24px 60px var(--ink-a100); }
    .tip-of-day-card h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
    .tip-of-day-body { margin-block-start: 16px; font-size: 1.02rem; line-height: 1.7; }
    .tip-of-day-body.is-clamped { max-height: 15em; overflow: hidden; -webkit-mask-image: linear-gradient(var(--black) 55%, transparent); mask-image: linear-gradient(var(--black) 55%, transparent); }
    .tip-more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-block-end: 6px; padding: 0; border: 0; background: none; color: var(--label); font-weight: 700; cursor: pointer; }
    .tip-more::after { content: "↓"; transition: transform .25s var(--ease-out); }
    .tip-more[aria-expanded="true"]::after { transform: rotate(180deg); }
    @media (hover: hover) and (pointer: fine) { .tip-more:hover { color: var(--ink); } }
    .telegram-update-link { transition: color .25s ease; }
    .telegram-update-link span { transition: transform .25s var(--ease-out); }
    @media (hover: hover) and (pointer: fine) { .telegram-update-link:hover span { transform: translateX(-12px); } }
    .telegram-update-link::after { transition: transform .25s var(--ease-out); }
    @media (hover: hover) and (pointer: fine) { .telegram-update-link:hover::after { transform: translate(-4px, -4px); } }
    .what-item { transition: background-color .3s ease; }
    .what-item .no { font-family: var(--head); font-size: 2rem; line-height: 1; }

    /* Floor 2: guides first, then the agents on their own stage. */
    .guide-grid { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: clamp(22px, 2.6vw, 34px); margin-block-start: 44px; }
    /* four guides: 4 across on wide screens, 2 by 2 on tablets, never three and one alone */
    @media (min-width: 561px) and (max-width: 1040px) { .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    .guide-cover { border-radius: 18px; transition: border-color .25s ease, transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
    .guide-card a:focus-visible .guide-cover { transform: translateY(-6px); box-shadow: 0 26px 50px var(--shadow-m); }
    @media (hover: hover) and (pointer: fine) { .guide-card a:hover .guide-cover { transform: translateY(-6px); box-shadow: 0 26px 50px var(--shadow-m); } }
    .guide-card h3 { font-size: clamp(2.3rem, 3.2vw, 2.8rem); }
    .guide-link span { transition: transform .25s var(--ease-out); }
    @media (hover: hover) and (pointer: fine) { .guide-card a:hover .guide-link span { transform: translate(-4px, -4px); } }
    .demo-section {
      margin-inline: var(--stage-gutter);
      padding-block: clamp(72px, 9vw, 128px);
      border-radius: var(--radius-lg);
      background:
        radial-gradient(55% 65% at 82% 28%, var(--accent-a300), transparent 70%),
        radial-gradient(45% 55% at 10% 100%, var(--cd9a441-a070), transparent 60%),
        var(--ink);
      color: var(--paper);
    }
    .demo-section .section-label { color: var(--accent-light); }
    .demo-intro > p:last-child { color: var(--paper-on-ink); }
    .demo-section .assistant-note + .assistant-note { border-color: var(--line-on-ink); }
    .demo-section .assistant-note li { color: var(--paper-on-ink); }
    .demo-section .assistant-note li::marker { color: var(--accent-light); }
    .demo-shell { color: var(--ink); border-color: var(--white-a080); box-shadow: 0 40px 100px var(--black-a500), 0 0 0 1px var(--white-a050); }
    .demo-section .demo-tab { border-color: var(--paper-a160); background: var(--paper-a060); color: var(--paper-on-ink); }
    @media (hover: hover) and (pointer: fine) { .demo-section .demo-tab:hover { color: var(--paper); background: var(--paper-a120); } }
    .demo-section .demo-tab[aria-selected="true"] { border-color: transparent; background: var(--chat-bg); color: var(--ink); box-shadow: 0 8px 22px var(--black-a300); }
    .prompt-card { border-radius: var(--radius-md); }
    .tool-list { grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); }
    .tool-item { border-radius: 22px; background: var(--cfffbf5-a550); }
    .tool-icon { border-radius: 12px; transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s var(--ease-out); }
    .tool-item:focus-within .tool-icon { border-color: var(--accent); background: var(--accent); color: var(--white); transform: rotate(-6deg) scale(1.06); }
    @media (hover: hover) and (pointer: fine) { .tool-item:hover .tool-icon { border-color: var(--accent); background: var(--accent); color: var(--white); transform: rotate(-6deg) scale(1.06); } }
    .shortcut-item { transition: background-color .3s ease, transform .3s var(--ease-out); }
    @media (hover: hover) and (pointer: fine) { .spot:hover { background-image: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), var(--accent-a100), transparent 62%); } }

    /* Floor 3. */
    .about-box { border: 0; border-radius: var(--radius-lg); background: radial-gradient(60% 80% at 15% 20%, var(--accent-a280), transparent 70%), var(--ink); }
    .step { border-radius: var(--radius-md); transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
    @media (hover: hover) and (pointer: fine) { .step:hover { transform: translateY(-4px); box-shadow: 0 20px 44px var(--ink-a100); } }
    .step-number { font-size: 4.4rem; }
    details { interpolate-size: allow-keywords; }
    details::details-content { block-size: 0; overflow: clip; transition: block-size .3s var(--ease-out), content-visibility .3s allow-discrete; }
    details[open]::details-content { block-size: auto; }
    summary { transition: color .25s ease; }
    @media (hover: hover) and (pointer: fine) { summary:hover { color: var(--label); } }
    summary::after { transition: transform .25s var(--ease-out); }
    details[open] summary::after { content: "+"; transform: rotate(45deg); }

    /* Closing: the building returns as an echo. */
    .closing {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      margin: clamp(48px, 6vw, 80px) var(--stage-gutter) var(--stage-gutter);
      padding-block: clamp(110px, 15vw, 200px);
      border-radius: var(--radius-lg);
      background: radial-gradient(55% 70% at 50% 60%, var(--accent-a320), transparent 70%), var(--ink);
    }
    .floors-canvas-closing { z-index: -1; opacity: .55; }
    .closing .wrap { position: relative; }
    .closing h2 { max-width: 1000px; font-size: clamp(3.8rem, 8.4vw, 8rem); line-height: .88; }
    .closing .btn { margin-block-start: 40px; }

    /* Elevator: a quiet floor indicator for wide screens. */

    /* Scroll choreography (added by script only when motion is allowed). */
    html.a11y-reduce-motion .floor-line { opacity: 1 !important; transform: none !important; }
    html.a11y-reduce-motion details::details-content { transition: none; }

    @media (min-width: 1000px) { .floor-nav { display: flex; } }
    @media (min-width: 821px) and (max-width: 1040px) {
      .hero-stage { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
      .hero h1 { font-size: 5.6rem; }
      .hero-card-update, .hero-card-guide { display: none; }
    }
    @media (max-width: 820px) {
      .hero-stage { grid-template-columns: 1fr; min-height: 0; padding: 52px 24px 44px; }
      .hero-art { position: absolute; z-index: 0; left: -8%; bottom: -6%; inline-size: 82%; block-size: 62%; min-height: 0; opacity: .38; -webkit-mask-image: linear-gradient(to top, var(--black) 35%, transparent); mask-image: linear-gradient(to top, var(--black) 35%, transparent); }
      .hero-card { display: none; }
      .guide-grid { grid-template-columns: 1fr; }
      .floor-marker { padding-block-start: 72px; }
    }
    @media (max-width: 560px) {
      .site-header-inner { min-height: 70px; }
      .brand { width: 118px; }
      .brand-by { inset-block-end: 5px; font-size: .83rem; }
      .site-header.is-scrolled::before { transform: none; }
      .site-header.is-scrolled .site-header-inner, .site-header.is-scrolled .scroll-progress { translate: none; }
      .site-header.is-scrolled .brand { transform: scale(.8814); }
      .hero h1 { font-size: clamp(3.9rem, 17vw, 5.4rem); }
      .hero-stage { padding: 44px 20px 36px; }
      .tool-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .floor-numeral { font-size: 6.4rem; }
      .closing { padding-block: 96px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .floor-line { opacity: 1 !important; transform: none !important; }
      details::details-content { transition: none; }
    }
    /* Opening screen: the logo's Ɛ draws itself, turns so its curves face up, becomes the mascot, she waves, the curtain lifts.
       The drawing is SVG + SMIL inside the markup (rig: שפת המותג/דמות/הנפשה/demo.html); CSS only places it and lifts the curtain. */
    :root { --intro-delay: 0s; }
    body:has(> .intro) { --intro-delay: 2.9s; }
    body:has(> .intro.is-skipped) { --intro-delay: 0s; }
    .motion-ready body:has(> .intro) .hero .lead { animation-delay: calc(var(--intro-delay) + .38s); }
    .motion-ready body:has(> .intro) .hero .hero-actions { animation-delay: calc(var(--intro-delay) + .47s); }
    .intro {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: grid;
      place-items: center;
      background: var(--ink);
      animation: intro-lift .5s cubic-bezier(.77, 0, .175, 1) 2.8s forwards;
      /* the curtain takes every tap until it has lifted (site.js adds .is-gone), so a skip never clicks what is under it */
      pointer-events: auto;
    }
    .intro.is-skipped { animation: intro-lift .4s cubic-bezier(.77, 0, .175, 1) forwards; }
    .intro.is-gone { pointer-events: none; }
    .intro-mark { inline-size: min(290px, 64vw); display: grid; justify-items: center; gap: 10px; direction: ltr; }
    .intro-flor { display: block; inline-size: 74%; block-size: auto; overflow: visible; }
    /* once she has formed, the wordmark opens under her and the signature follows */
    .intro-logo { inline-size: 100%; block-size: auto; opacity: 0; clip-path: inset(50% 0); animation: intro-logo-open .5s var(--ease-out) 2.05s forwards; }
    .intro-by { justify-self: end; margin-inline-end: 2%; margin-block-start: -4px; font-family: var(--body); font-size: 1.08rem; font-weight: 500; line-height: 1; letter-spacing: .02em; color: var(--paper-a780); opacity: 0; animation: intro-by-in .3s ease 2.45s forwards; }
    @keyframes intro-logo-open { 0% { opacity: 0; clip-path: inset(50% 0); } 15% { opacity: .4; } 100% { opacity: 1; clip-path: inset(0); } }
    @keyframes intro-by-in { to { opacity: 1; } }
    @keyframes intro-lift { to { transform: translate3d(0, -100%, 0); visibility: hidden; } }
    html.a11y-reduce-motion .intro { display: none; }

    /* Instagram strip: the latest covers as cards. Desktop: three, still. Phone: a swipe carousel with arrows and dots. */
    .ig-section { overflow: hidden; }
    .ig-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 20px 32px; }
    .ig-head h2 { font-size: clamp(3rem, 6.4vw, 5.4rem); }
    .hero.is-away *, .hero.is-away *::after { animation-play-state: paused; }
    .tag + h3 { margin-block-start: 10px; }
    @media (prefers-reduced-motion: reduce) {
      .intro { display: none; }
    }
    @media print { .intro { display: none; } }

    /* Phone basics: no grey tap flash, no 300ms tap delay, no selected button labels, no scroll chaining from dialogs. */
    html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
    a, button, summary, [role="button"], [role="tab"] { touch-action: manipulation; }
    .btn, .demo-tab, .tip-more, .link-button, .a11y-launcher, .floor-nav a, .copy-btn { -webkit-user-select: none; user-select: none; }
    .privacy-dialog, .a11y-dialog { overscroll-behavior: contain; }
    /* Press feedback on every pointer type (replaces the tap flash). */
    @media (prefers-reduced-motion: no-preference) {
      html:not(.a11y-reduce-motion) :is(.guide-card a, .tool-item, .telegram-update-link, .demo-tab, .quick-links a, .floor-nav a):active { transform: scale(.98); transition: transform .12s var(--ease-out); }
    }
    /* Touch targets: 44px where the pointer is a finger. */
    @media (pointer: coarse) {
      .footer-links a, .link-button { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
    }

    /* Inner pages: breadcrumb, page head, article, tip list, pager. Same Paper & Ink tokens as the home page. */
    .page { padding-block: clamp(40px, 6vw, 80px) clamp(56px, 7vw, 96px); }
    .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-block-end: clamp(24px, 4vw, 40px); color: var(--quiet); font-size: .92rem; }
    .breadcrumb a { color: inherit; text-underline-offset: 4px; }
    .breadcrumb [aria-current] { color: var(--ink); font-weight: 600; max-width: 42ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .breadcrumb-sep { color: var(--line); }
    .page-head { max-width: 860px; margin-block-end: clamp(28px, 4vw, 44px); }
    .page-head .section-label { margin: 0 0 12px; }
    .page-title { margin: 0; font-family: var(--head); font-weight: 700; font-size: clamp(3.4rem, 7vw, 6.2rem); line-height: .9; text-wrap: balance; }
    .page-lead { max-width: 60ch; margin: 18px 0 0; color: var(--quiet); font-size: clamp(1.05rem, 1.8vw, 1.22rem); line-height: 1.65; text-wrap: pretty; }
    .article-title { margin: 0; font-family: var(--body); font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.75rem); line-height: 1.25; text-wrap: balance; }
    .article-body { max-width: 68ch; font-size: clamp(1.05rem, 1.6vw, 1.15rem); line-height: 1.75; text-wrap: pretty; overflow-wrap: anywhere; }
    .article-body p { margin: 0 0 1.1em; }
    .article-body ul { margin: 0 0 1.2em; padding-inline-start: 1.25em; }
    .article-body li + li { margin-block-start: .45em; }
    .article-body a { color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 4px; }
    .article-source { display: flex; flex-wrap: wrap; gap: 12px; margin: clamp(28px, 4vw, 40px) 0 0; }
    .pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 860px; margin-block-start: clamp(40px, 6vw, 64px); padding-block-start: 24px; border-block-start: 1px solid var(--line); }
    .pager-link { display: grid; gap: 6px; color: var(--ink); font-weight: 700; line-height: 1.4; text-decoration: none; overflow-wrap: anywhere; }
    .pager-link span { color: var(--label); font-size: .85rem; font-weight: 600; }
    .pager-next { text-align: left; }
    .tip-list { max-width: 860px; margin: 0; padding: 0; list-style: none; border-block-start: 1px solid var(--line); }
    .tip-list li { border-block-end: 1px solid var(--line); }
    .tip-list-link { display: grid; gap: 6px; padding-block: 22px; color: var(--ink); text-decoration: none; }
    .tip-list-link time { color: var(--label); font-size: .85rem; font-weight: 600; }
    .tip-list-link strong { font-size: clamp(1.15rem, 2vw, 1.35rem); line-height: 1.35; overflow-wrap: anywhere; }
    .tip-list-link span { color: var(--quiet); line-height: 1.6; }
    .page-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
    @media (hover: hover) and (pointer: fine) {
      .tip-list-link strong, .pager-link { transition: color .25s ease; }
      .tip-list-link:hover strong, .pager-link:hover { color: var(--label); }
    }
    @media (max-width: 560px) {
      .pager { grid-template-columns: 1fr; }
      .pager-next { text-align: right; }
      .breadcrumb [aria-current] { max-width: 24ch; }
    }
    .updates-archive-link { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; color: var(--label); font-weight: 700; text-underline-offset: 5px; }
    .more-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: clamp(16px, 2.4vw, 28px); }
    .more-card { display: grid; gap: 10px; align-content: start; padding: clamp(22px, 3vw, 32px); border: 1px solid var(--line); border-radius: 22px; background: var(--chat-bg); color: var(--ink); text-decoration: none; }
    .more-card .section-label { margin: 0; }
    .more-card strong { font-family: var(--head); font-size: clamp(2.4rem, 4vw, 3.2rem); font-weight: 700; line-height: 1; }
    .more-card span:last-child { color: var(--quiet); line-height: 1.6; }
    .more-card strong::after { content: " ←"; color: var(--label); font-family: var(--body); font-size: 1.4rem; }
    @media (hover: hover) and (pointer: fine) {
      .more-card { transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s ease; }
      .more-card:hover { transform: translateY(-3px); border-color: var(--accent-a320); box-shadow: 0 14px 34px var(--ink-a090); }
    }
    @media (prefers-reduced-motion: no-preference) {
      html:not(.a11y-reduce-motion) .more-card:active { scale: .97; }
    }
    .page-intro { padding-block-end: 0; }
    /* Less transparency when the visitor asks for it: glass surfaces become solid. */
    @media (prefers-reduced-transparency: reduce) {
      .site-header::before { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
      .hero-card-update, .hero-card-guide { background: var(--ink-soft); -webkit-backdrop-filter: none; backdrop-filter: none; }
    }
    /* Arrow glyphs stay text, never emoji (iOS otherwise draws ↗ as a blue emoji tile). */
    .telegram-update-link::after, .tool-item h3 a::after, .hero-card-arrow, .guide-link span { font-variant-emoji: text; }

    /* Signal layer (DESIGN.md v1.6): a mono voice for data, a live signal, keyboard-first search, smooth page changes. */
    .mono { font-family: var(--mono); font-size: .78rem; font-weight: 500; letter-spacing: .02em; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
    .article-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; color: var(--label); }
    .tip-list-meta { color: var(--label); }
    .hero-hud { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 0 0 22px; color: var(--paper-a620); }
    .hero-hud[hidden] { display: none; }
    .hero-hud a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--paper); text-decoration: none; }
    .hud-live { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--c-6fcf97); }
    .hero-hud:not(.is-live) .hud-live { display: none; }
    @media (prefers-reduced-motion: no-preference) {
      html:not(.a11y-reduce-motion) .hud-live { animation: hud-ping 2.4s var(--ease-out) infinite; }
      .hero.is-away .hud-live { animation-play-state: paused; }
    }
    @keyframes hud-ping { 0% { box-shadow: 0 0 0 0 var(--c6fcf97-a550); } 70%, 100% { box-shadow: 0 0 0 9px var(--c6fcf97-a000); } }
    @media (hover: hover) and (pointer: fine) { .hero-hud a:hover { color: var(--accent-light); } }

    .brand-link { display: flex; align-items: center; min-height: 44px; flex: 0 0 auto; line-height: 0; }
    .search-open { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin-inline-start: auto; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--chat-bg); color: var(--quiet); font: 500 .9rem var(--body); cursor: pointer; }
    .search-open svg { inline-size: 18px; block-size: 18px; flex: 0 0 auto; }
    .search-open kbd { direction: ltr; padding: 1px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); font-size: .7rem; }
    .search-open + .header-cta { margin-inline-start: -8px; }
    .floor-nav { margin-inline: auto; }
    @media (hover: hover) and (pointer: fine) { .search-open:hover { color: var(--ink); border-color: var(--ink-a320); } }
    @media (pointer: coarse) { .search-open kbd { display: none; } }
    @media (max-width: 560px) {
      .search-open { inline-size: 44px; min-height: 44px; justify-content: center; padding: 0; }
      .search-open-label { display: none; }
    }

    .search-dialog { inline-size: min(640px, 100% - 24px); max-block-size: min(70vh, 640px); margin: 12vh auto auto; padding: 0; border: 0; border-radius: 20px; background: var(--chat-bg); color: var(--ink); box-shadow: 0 30px 80px var(--black-a280), 0 0 0 1px var(--line); overflow: hidden; }
    .search-dialog[open] { display: flex; flex-direction: column; }
    .search-dialog::backdrop { background: var(--ink-a500); }
    .search-box { display: flex; align-items: center; gap: 12px; padding: 6px 16px; border-block-end: 1px solid var(--line); }
    .search-box svg { inline-size: 20px; block-size: 20px; flex: 0 0 auto; color: var(--quiet); }
    .search-box input { flex: 1; min-width: 0; min-height: 56px; border: 0; background: transparent; color: var(--ink); font: 500 1.08rem var(--body); outline: none; }
    .search-box input::-webkit-search-cancel-button { display: none; }
    .search-close { min-height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--quiet); font: 500 .75rem var(--mono); cursor: pointer; }
    .search-results { flex: 1; margin: 0; padding: 8px; overflow-y: auto; overscroll-behavior: contain; list-style: none; }
    .search-results a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 12px; border-radius: 12px; color: var(--ink); text-decoration: none; }
    .search-results [aria-selected="true"] a { background: var(--paper-deep); }
    .search-kind { flex: 0 0 4.5em; color: var(--label); }
    .search-title { flex: 1; min-width: 0; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
    .search-meta { flex: 0 0 auto; color: var(--quiet); }
    .search-empty { padding: 18px 12px; color: var(--quiet); }
    .search-worlds { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px; border-block-end: 1px solid var(--line); }
    .search-worlds button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1.5px solid currentColor; border-radius: 999px; background: transparent; color: inherit; font-weight: 700; cursor: pointer; }
    .search-worlds button[aria-pressed="true"] { border-color: var(--paper); background: var(--paper); color: var(--ink); }
    @media (max-width: 480px) { .search-worlds { gap: 6px; padding-inline: 12px; } .search-worlds button { gap: 6px; padding: 0 11px; } }
    .search-foot { display: flex; gap: 6px 14px; margin: 0; padding: 10px 16px; border-block-start: 1px solid var(--line); color: var(--quiet); }
    .search-foot span { color: var(--ink); }
    @media (pointer: coarse) { .search-foot { display: none; } }
    @media (max-width: 560px) {
      .search-dialog { inline-size: calc(100% - 16px); margin-block-start: 8px; max-block-size: calc(100dvh - 16px); }
      .search-meta { display: none; }
    }
    @media (prefers-reduced-motion: no-preference) {
      .search-dialog[open] { animation: search-in .2s var(--ease-out); }
    }
    @keyframes search-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }

    /* Page changes cross-fade; the header stays put. */
    @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
    .gnav { view-transition-name: gnav; }
    .dock { view-transition-name: dock; }
    .mini-nav { view-transition-name: mini-nav; }
    ::view-transition-old(root) { animation-duration: .15s; }
    ::view-transition-new(root) { animation-duration: .22s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
    ::view-transition-group(title) { animation-duration: .38s; animation-timing-function: cubic-bezier(.32, .72, 0, 1); }

    /* Content worlds: one tag colour each, the same as Trio's world body (--world-*): בבית = butter, יוצרים = apricot, עסקים = stone. */
    .world-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
    .world-filter[hidden] { display: none; }
    .world-filter button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--chat-bg); color: var(--ink); font: 600 .95rem var(--body); cursor: pointer; }
    .world-filter button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
    .world-filter .mono { opacity: .7; }
    /* The chosen world: a dark pill slides to it under the buttons (the nav's sliding indicator), and the list rows rise in after it. */
    .world-filter { position: relative; }
    .world-filter button { position: relative; z-index: 1; transition: color .25s var(--ease); }
    .world-filter .slide-ind { background: var(--ink); box-shadow: none; }
    .world-filter.has-ind button[aria-pressed="true"] { background: transparent; }
    @keyframes list-in { from { opacity: 0; transform: translateY(10px); } }
    .tip-list.is-in li { animation: list-in .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
    .world-dot { inline-size: 10px; block-size: 10px; border-radius: 50%; }
    .tip-list li[hidden] { display: none; }
    .tip-list-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
    .article-meta .tag, .tip-list-meta .tag { margin: 0; }

    /* Paper & Carousel (DESIGN.md v1.6): cream everywhere, ink only inside "screens", sticker cards with an ink outline, Muse on the roof. */
    :root {
      --band: #F1DCC8;
      --tag-pink: #FFC9D6;
      --card-bg: #FFFDF8;
      --outline: 2px solid var(--ink);
      --hard: 0 4px 0 var(--ink);
      --hard-sm: 0 3px 0 var(--ink);
    }
    .wrap { width: min(1180px, calc(100% - 48px)); }
    .band { display: inline-block; max-width: 36em; margin: 0; padding: 12px 18px; border-radius: 16px; background: var(--band); color: var(--ink); font-weight: 500; line-height: 1.55; }

    /* Header: flat paper, no glass. */
    .site-header::before { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
    .site-header.is-scrolled::before { box-shadow: 0 2px 0 var(--ink); }
    .scroll-progress { background: var(--accent); }
    .search-open { border: var(--outline); background: var(--card-bg); color: var(--ink); box-shadow: var(--hard-sm); }
    .search-open kbd { border: 0; background: var(--ink); color: var(--paper); }
    @media (hover: hover) and (pointer: fine) { .search-open:hover { border-color: var(--ink); transform: translateY(-1px); } }
    .floor-nav { border: var(--outline); background: var(--card-bg); }
    .floor-nav a[aria-current] { box-shadow: none; }
    .floor-nav a span { border-color: var(--ink); }

    /* Buttons and cards: a 2px ink outline and a hard offset shadow, like stickers on the carousel slides. */
    .btn { border: var(--outline); box-shadow: var(--hard-sm); }
    .btn-primary { background: var(--label); border-color: var(--ink); box-shadow: var(--hard-sm); }
    .btn-secondary { background: var(--white-a450); color: var(--ink); }
    @media (hover: hover) and (pointer: fine) {
      .btn:hover, .btn-primary:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 5px 0 var(--ink); }
      .btn-secondary:hover { background: var(--ink); color: var(--paper); }
    }
    .btn:active { transform: translateY(1px) scale(.99); box-shadow: 0 2px 0 var(--ink); }
    .more-card, .prompt-card, .tool-item, .step, .shortcut-item, .guide-cover, .demo-shell, .about-box, .tip-phone { border: var(--outline); background: var(--card-bg); box-shadow: var(--hard); }
    .guide-cover { background: var(--white); mix-blend-mode: multiply; }
    /* The 3floors mascot keeps the closing company (rig: שפת המותג/דמות/הנפשה/demo.html). */
    .closing { overflow: visible; }
    .closing .wrap { position: relative; }
    .closing-mascot { position: absolute; inset-inline-start: 0; inset-block-end: -14%; inline-size: clamp(140px, 16vw, 220px); pointer-events: none; }
    @media (max-width: 1200px) { .closing-mascot { position: static; display: block; inline-size: 140px; margin: -8px auto 8px; } }
    @media (hover: hover) and (pointer: fine) {
      .more-card:hover, .prompt-card:hover, .tool-item:hover, .step:hover, .shortcut-item:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: 0 7px 0 var(--ink); }
      .guide-card a:hover .guide-cover { border-color: var(--ink); transform: translateY(-4px); box-shadow: 0 8px 0 var(--ink); }
    }
    .guide-card a:focus-visible .guide-cover { border-color: var(--ink); }
    .what-item .no { color: var(--accent); }

    /* Hero: paper, not a stage. The building stands in ink on cream and Muse sits on the roof. */
    .hero { padding: 0; }
    .hero-stage {
      max-width: none;
      min-height: 0;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
      align-items: center;
      padding: clamp(24px, 4vw, 56px) 0 clamp(20px, 3vw, 40px);
      border-radius: 0;
      background: none;
      color: var(--ink);
    }
    .hero-stage::after { content: none; }
    .hero h1 { font-size: clamp(4.2rem, 9.5vw, 8rem); line-height: .92; }
    .hero .accent-line { color: var(--accent); }
    .hero .lead { display: inline-block; max-width: 34em; margin-block-start: 22px; padding: 12px 18px; border-radius: 16px; background: var(--band); color: var(--ink); font-weight: 500; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.55; }
    .hero-actions { margin-block-start: 26px; }
    .hero .btn-secondary { color: var(--ink); border-color: var(--ink); background: var(--white-a450); }
    @media (hover: hover) and (pointer: fine) { .hero .btn-secondary:hover { color: var(--paper); border-color: var(--ink); background: var(--ink); box-shadow: 0 5px 0 var(--ink); } }
    .hero .quick-links a { color: var(--quiet); border-color: var(--line); }
    @media (hover: hover) and (pointer: fine) { .hero .quick-links a:hover { color: var(--label); border-color: var(--label); } }
    .hero :focus-visible, .demo-section :focus-visible, .closing :focus-visible { outline-color: var(--accent); }
    .hero-hud { color: var(--quiet); }
    .hero-hud a { color: var(--ink); }
    @media (hover: hover) and (pointer: fine) { .hero-hud a:hover { color: var(--label); } }
    .hud-live { background: var(--c-2f9e6b); }
    .hero-art { position: relative; min-height: 0; inline-size: min(100%, 480px); aspect-ratio: 1; justify-self: center; align-self: center; }
    .floors-canvas { --dot: 34, 32, 30; --dot-glow: 159, 89, 62; -webkit-mask-image: none; mask-image: none; }
    .x-mark, .ig-mark { inline-size: 17px; block-size: 17px; flex: 0 0 auto; }
    .btn .handle { font-weight: 500; }
    /* Trio rides the building: the floors script places it on the top face of the floor it stands on. */
    @keyframes trio-land { 0% { transform: scale(1.12, .84); } 55% { transform: scale(.96, 1.06); } 100% { transform: scale(1, 1); } }
    .chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: var(--outline); border-radius: 999px; color: var(--ink); font-weight: 700; font-size: .95rem; text-decoration: none; box-shadow: var(--hard-sm); transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
    .chip-home { background: var(--world-home); inset-block-start: 8%; inset-inline-end: 2%; rotate: 4deg; }
    .chip-creators { background: var(--world-creators); inset-block-start: 46%; inset-inline-start: 1%; rotate: -5deg; }
    .chip-business { background: var(--world-business); inset-block-end: 14%; inset-inline-start: 0; rotate: -2deg; }
    @media (hover: hover) and (pointer: fine) { .chip:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--ink); } }
    .motion-ready .chip { animation: card-in .9s var(--ease-out) calc(var(--intro-delay) + .9s) both; }
    .motion-ready .chip-creators { animation-delay: calc(var(--intro-delay) + 1.05s); }
    .motion-ready .chip-business { animation-delay: calc(var(--intro-delay) + 1.2s); }

    /* Worlds: three sticker cards, one colour each. */
    .worlds-section { padding-block: clamp(28px, 4vw, 56px) clamp(40px, 5vw, 72px); }
    .worlds-title { font-size: clamp(3rem, 6vw, 4.5rem); line-height: 1; text-align: center; }
    .worlds-title em { font-style: normal; color: var(--accent); }
    .worlds-lead { display: table; margin: 12px auto 28px; }
    .worlds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 24px); }
    .world { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 0 0 16px; border: var(--outline); border-radius: 22px; background: var(--card-bg); color: var(--ink); text-decoration: none; text-align: center; box-shadow: var(--hard); overflow: hidden; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
    .world img { inline-size: 100%; aspect-ratio: 1264 / 848; object-fit: cover; mix-blend-mode: multiply; }
    .world-label { display: grid; gap: 2px; margin-inline: 16px; padding: 8px 10px 10px; border: var(--outline); border-radius: 16px; }
    .world-label strong { font-family: var(--head); font-size: 2.6rem; line-height: 1; font-weight: 700; }
    .world-label span { font-size: .95rem; line-height: 1.4; }
    .world-home .world-label { background: var(--world-home); }
    .world-creators .world-label { background: var(--world-creators); }
    .world-business .world-label { background: var(--world-business); }
    .world-meta { color: var(--quiet); }
    @media (hover: hover) and (pointer: fine) { .world:hover { transition-duration: .08s; box-shadow: 0 8px 0 var(--ink); } }
    .world:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

    /* The tip of the day is a screen: the one place ink is a surface. */
    .tip-of-day { position: relative; margin-inline: 0; padding: 0; border: var(--outline); border-radius: 22px; background: var(--ink); color: var(--paper); box-shadow: 0 6px 0 var(--black-a220); overflow: hidden; }
    .tip-of-day::before { content: ""; display: block; block-size: 40px; border-block-end: 1px solid var(--white-a100); background-color: var(--ink-soft); background-image: radial-gradient(circle, var(--c-ff5f57) 5px, transparent 5.6px), radial-gradient(circle, var(--c-febc2e) 5px, transparent 5.6px), radial-gradient(circle, var(--c-28c840) 5px, transparent 5.6px); background-repeat: no-repeat; background-size: 12px 12px; background-position: 16px 50%, 34px 50%, 52px 50%; }
    .floor-marker + .tip-of-day, .floor-marker + section[hidden] + .tip-of-day { padding-block-start: 0; }
    .tip-of-day > .wrap { inline-size: auto; margin: 0; padding: clamp(22px, 3.5vw, 36px) clamp(20px, 4vw, 40px) clamp(26px, 4vw, 40px); }
    /* Terminal command line in the tip window; LIVE (green dot, slow pulse) only when the tip is from today. */
    .term-cmd { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 14px; margin: 0 0 14px; color: var(--paper-on-ink); text-align: left; }
    .term-live { display: inline-flex; align-items: center; gap: 7px; color: var(--paper); }
    .term-live[hidden] { display: none; }
    .term-live-dot { inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 var(--green-a600); animation: live-pulse 2.4s ease-out infinite; }
    @keyframes live-pulse { 70%, 100% { box-shadow: 0 0 0 7px var(--green-a000); } }
    /* Window name in the title bar (approved 24.10.2026); decorative, so it carries no spoken text. */
    .tip-of-day::before { content: "3floors tip"; content: "3floors tip" / ""; display: flex; align-items: center; justify-content: center; color: var(--paper-on-ink); font: 500 .8rem/1 var(--mono); letter-spacing: .06em; direction: ltr; }
    /* A small terminal window on the page grid (same edge as the headings), not a band across the screen. */
    .tip-of-day { inline-size: min(880px, calc(100% - 48px)); margin-inline: max(24px, calc((100% - 1180px) / 2)) auto; }
    @media (max-width: 820px) { .tip-of-day { inline-size: auto; margin-inline: 16px; } }
    .tip-of-day h2 { color: var(--paper); font-size: clamp(2.4rem, 4.2vw, 3.4rem); }
    .tip-of-day-meta { color: var(--paper-on-ink); }
    .tip-of-day-status { border-color: var(--accent-light); color: var(--accent-light); }
    .tip-of-day-card { max-width: 760px; margin-block-start: 18px; padding: 0; background: transparent; box-shadow: none; }
    .tip-of-day-card h3 { color: var(--paper); }
    .tip-of-day-body, .tip-of-day-body a { color: var(--paper-on-ink); }
    .tip-of-day-body a { color: var(--accent-light); }
    .tip-more { color: var(--accent-light); }
    @media (hover: hover) and (pointer: fine) { .tip-more:hover { color: var(--paper); } }
    .tip-of-day .btn-secondary { color: var(--paper); border-color: var(--paper); background: transparent; box-shadow: 0 3px 0 var(--paper-a350); }
    @media (hover: hover) and (pointer: fine) { .tip-of-day .btn-secondary:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); box-shadow: 0 5px 0 var(--paper-a350); } }
    .tip-of-day :focus-visible { outline-color: var(--accent-light); }

    /* Agents demo, about, closing: paper cards instead of ink stages. */
    .demo-section { margin-inline: 0; padding-block: clamp(56px, 7vw, 96px); border-radius: 0; background: none; color: var(--ink); }
    .demo-section .section-label { color: var(--label); }
    .demo-intro > p:last-child { color: var(--quiet); }
    .demo-section .assistant-note + .assistant-note { border-color: var(--line); }
    .demo-section .assistant-note li { color: var(--quiet); }
    .demo-section .assistant-note li::marker { color: var(--label); }
    .demo-shell { box-shadow: var(--hard); }
    .demo-section .demo-tab { border: 1.5px solid var(--ink); background: var(--card-bg); color: var(--ink); }
    @media (hover: hover) and (pointer: fine) { .demo-section .demo-tab:hover { color: var(--ink); background: var(--band); } }
    .demo-section .demo-tab[aria-selected="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); box-shadow: none; }
    @media (hover: hover) and (pointer: fine) { .demo-section .demo-tab[aria-selected="true"]:hover { color: var(--paper); background: var(--ink); } }
    .about-box { border-radius: 22px; background: var(--card-bg); color: var(--ink); }
    .about-box::before { color: var(--accent); }
    .about-box p { color: var(--ink); }
    .about-portrait { border: var(--outline); box-shadow: var(--hard); }
    .closing { margin-inline: var(--stage-gutter); padding-block: clamp(64px, 9vw, 120px); border: var(--outline); border-radius: 28px; background: var(--tag-apricot); color: var(--ink); box-shadow: var(--hard); }
    .closing h2 { color: var(--ink); font-size: clamp(3.4rem, 7.6vw, 7rem); }
    .closing-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-block-start: 36px; }
    .closing .btn { margin-block-start: 0; }
    .closing .btn-secondary { background: var(--white-a500); }
    @media (hover: hover) and (pointer: fine) {
      .closing .btn:hover { color: var(--paper); background: var(--ink); border-color: var(--ink); }
      .closing .btn-primary:hover { background: var(--label); color: var(--white); }
    }
    .floors-canvas-closing { opacity: .22; }
    footer { background: var(--paper); color: var(--ink); border-block-start: var(--outline); }
    .tagline { color: var(--ink); }
    .cookie-note { color: var(--label); }
    footer :focus-visible { outline-color: var(--accent); }

    /* Search is the other screen. */
    .search-dialog { border: var(--outline); background: var(--ink); color: var(--paper); box-shadow: 0 30px 80px var(--black-a400); }
    .search-box { border-color: var(--white-a120); }
    .search-box svg { color: var(--paper-on-ink); }
    .search-box input { color: var(--paper); }
    .search-box input::placeholder { color: var(--paper-a500); }
    .search-close { border-color: var(--white-a220); background: transparent; color: var(--paper-on-ink); }
    .search-results a { color: var(--paper); }
    .search-results [aria-selected="true"] a { background: var(--ink-soft); }
    .search-kind { color: var(--accent-light); }
    .search-meta, .search-empty, .search-foot { color: var(--paper-on-ink); }
    .search-foot { border-color: var(--white-a120); }
    .search-foot span { color: var(--paper); }
    .search-dialog :focus-visible { outline-color: var(--accent-light); }
    .world-filter button { border: 1.5px solid var(--ink); background: var(--card-bg); }
    .world-filter button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

    /* Tip page: the short answer first, then the honesty line, then the text. Related tips keep readers in their world. */
    .tldr { display: block; max-width: 68ch; margin: 0 0 18px; font-size: clamp(1.05rem, 1.6vw, 1.18rem); }
    .tldr strong { color: var(--label); }
    .honesty { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 22px; padding: 6px 12px; border: 1.5px solid var(--ink); border-radius: 999px; font-size: .95rem; font-weight: 500; }
    .honesty::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--accent); }
    .related { max-width: 860px; margin-block-start: clamp(40px, 6vw, 64px); }
    .related-title { margin: 0 0 14px; font-family: var(--head); font-size: clamp(2.4rem, 4vw, 3.2rem); line-height: 1; }
    .related-title .accent { color: var(--accent); }
    .related-title .mono { font-size: 1rem; vertical-align: middle; color: var(--quiet); }
    .related .page-actions { margin-block-start: 18px; }
    .related .tip-list-link { padding-block: 16px; }
    .article-meta a.tag { text-decoration: none; }
    .world-page .page-lead { display: inline-block; }
    .world-page .related-title { margin-block-start: clamp(28px, 4vw, 44px); }
    .page-head .band { max-width: 60ch; }

    /* One line system: 2px ink + hard shadow for what you press, 1.5px for a static tag, a solid 1px ink rule for lists. */
    .telegram-update-list, .telegram-update-item, .tip-list, .tip-list li, .what-list, .what-item, .faq details, .pager, .guide-link, .assistant-note + .assistant-note, .breadcrumb { border-color: var(--ink); }
    .what-item:nth-child(odd) { background: transparent; }
    .faq details { border-block-end: 1px solid var(--ink); }
    .faq details:first-of-type { border-block-start: 1px solid var(--ink); }
    summary::after { inline-size: 30px; block-size: 30px; display: inline-grid; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; color: var(--ink); font-size: 1.3rem; }
    details[open] summary::after { background: var(--ink); color: var(--paper); }
    .world-filter button, .demo-tab, .copy-btn { border: var(--outline); box-shadow: var(--hard-sm); }
    .world-filter button[aria-pressed="true"], .demo-section .demo-tab[aria-selected="true"] { box-shadow: var(--hard-sm); }
    .telegram-update-link::after, .guide-link span, .tool-item h3 a::after { color: var(--label); }
    /* Demo chat: the bubbles and the composer get the same outline as everything else. */
    .chat-head { border-block-end: 1.5px solid var(--ink); }
    .bubble { border: 1.5px solid var(--ink); }
    .bubble-user { background: var(--band); color: var(--ink); }
    .bubble-assistant { background: var(--ink); color: var(--paper); border-color: var(--ink); }
    .result-card { border: 1.5px solid var(--ink); background: var(--tag-mint); color: var(--ink); }
    .composer-wrap { border: 1.5px solid var(--ink); background: var(--card-bg); }
    /* Elevator and accessibility button: ink outline instead of glass. */
    .a11y-launcher { border: var(--outline); box-shadow: var(--hard-sm); }
    /* Footer: the signature leads, the cookie line stays quiet. */
    .signature strong { color: var(--ink); }
    .cookie-note { color: var(--quiet); }
    /* Tools: readable on a phone. */
    @media (max-width: 560px) {
      .tool-list { grid-template-columns: 1fr; }
      .tool-item { gap: 10px; padding: 16px 18px; }
      .tool-item h3 { font-size: 1.1rem; }
      .tool-item h3 a { flex-direction: row; align-items: center; gap: 12px; }
      .tool-item p { font-size: .98rem; }
      .wrap { width: min(100% - 32px, 1180px); }
    }

    /* No tiny text: 14px is the floor for meta and labels, 15px for anything people read. */
    .mono, .search-kind, .search-meta, .search-close, .world-meta, .hero-hud, .article-meta, .tip-list-meta, .tip-list-link time, .pager-link span, .search-open kbd { font-size: .875rem; }
    .tag, .quick-links, .breadcrumb, .footer-links, .tagline, .cookie-note, .tip-of-day-meta, .guide-link, .tool-item p, .what-item p, .search-foot, .demo-note, .signature, .world-label span, .chip, .assistant-note li, .result-copy small, .hero-card-kicker, .tip-list-link span { font-size: .95rem; }
    .floor-nav a, .search-open { font-size: 1rem; }
    .demo-tab { font-size: .92rem; }
    @media (max-width: 560px) { .demo-tab { min-height: 44px; padding-inline: 10px; font-size: .86rem; } }

    /* Guide pages: headings, callouts, code to copy, to-do lists. */
    .guide-body h2, .guide-body h3, .guide-body h4 { margin: 1.6em 0 .5em; font-family: var(--body); font-weight: 800; line-height: 1.3; text-wrap: balance; }
    .guide-body h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); }
    .guide-body h3 { font-size: clamp(1.25rem, 2vw, 1.45rem); }
    .guide-body h4 { font-size: 1.1rem; }
    /* Steps: big hand-drawn numbers in Earth, like the floor numbers. */
    .guide-body ol { margin: 0 0 1.2em; padding-inline-start: 0; list-style: none; counter-reset: step; }
    .guide-body ol li { position: relative; padding-inline-start: 52px; margin-block-end: .7em; counter-increment: step; }
    .guide-body ol li::before { content: counter(step); position: absolute; inset-inline-start: 0; inset-block-start: -.12em; inline-size: 40px; text-align: center; font: 700 2.2rem/1 var(--head); color: var(--accent); }
    /* Fits / doesn't fit: solid mint card next to a dashed empty one. */
    .guide-body .fit { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 1.4em; }
    .guide-body .fit > div { min-width: 0; padding: 18px 20px; border-radius: 22px; }
    .guide-body .fit-yes { background: var(--tag-mint); border: var(--outline); box-shadow: var(--hard); }
    .guide-body .fit-no { border: 2px dashed var(--ink); }
    .guide-body .fit p { margin: 0; }
    .guide-body .fit .fit-label { margin-block-end: 4px; font: 700 2rem/1.1 var(--head); }
    @media (max-width: 560px) { .guide-body .fit { grid-template-columns: 1fr; } }
    .guide-body ul.todo { list-style: none; padding-inline-start: 0; }
    .guide-body ul.todo li { position: relative; padding-inline-start: 2em; }
    .guide-body ul.todo li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .3em; inline-size: 1.1em; block-size: 1.1em; border: 1.5px solid var(--ink); border-radius: 5px; background: var(--tag-mint); }
    .guide-body blockquote { margin: 0 0 1.2em; padding: 12px 18px; border-inline-start: 4px solid var(--accent); background: var(--band); border-radius: 0 14px 14px 0; }
    .guide-body blockquote p { margin: 0; }
    .guide-body .callout { margin: 0 0 1.2em; padding: 14px 18px; border: 1.5px solid var(--ink); border-radius: 16px; background: var(--tag-apricot); }
    .guide-body .callout p { margin: 0 0 .5em; }
    .guide-body .callout p:last-child { margin: 0; }
    .guide-body pre { margin: 0 0 1.4em; padding: 16px 18px; overflow-x: auto; border: var(--outline); border-radius: 16px; background: var(--ink); color: var(--paper); font: 500 .9rem/1.6 var(--mono); text-align: start; white-space: pre-wrap; overflow-wrap: anywhere; }
    .guide-body .code-block { margin: 0 0 1.4em; }
    .guide-hero { display: block; max-inline-size: 520px; block-size: auto; margin-block: clamp(20px, 3vw, 32px) clamp(24px, 4vw, 40px); }
    .guide-body .code-block pre { margin: 0; }
    .code-block .copy-btn { margin-block-start: 12px; }
    .guide-body code { font-family: var(--mono); font-size: .92em; }
    .guide-body p code { padding: 1px 6px; border-radius: 6px; background: var(--band); }
    .guide-body hr { margin: 2em 0; border: 0; border-block-start: 1px solid var(--ink); }
    .guide-body a { color: var(--label); }
    .guide-body img { max-width: 100%; }

    /* Sparks from the carousels: one per section, always in the same corner. */
    .worlds-section .wrap, .guides-section .wrap, .faq-section .wrap, .ig-head, .page-head, [aria-labelledby="more-title"] .wrap, [aria-labelledby="steps-title"] .wrap, [aria-labelledby="what-title"] .wrap { position: relative; }
    .worlds-section .wrap::before, .guides-section .wrap::before, .faq-section .wrap::before, .ig-head::before, .page-head::before, [aria-labelledby="more-title"] .wrap::before, [aria-labelledby="steps-title"] .wrap::before, [aria-labelledby="what-title"] .wrap::before { content: "✦"; position: absolute; inset-block-start: -4px; inset-inline-end: -6px; color: var(--accent); font-size: 18px; line-height: 1; pointer-events: none; }
    .page-head::before { inset-inline-end: auto; inset-inline-start: -28px; }
    @media (max-width: 820px) { .page-head::before { display: none; } }

    @media (min-width: 821px) and (max-width: 1040px) { .hero-stage { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
    @media (max-width: 820px) {
      .hero-stage { grid-template-columns: 1fr; padding: 16px 0 28px; }
      .hero-art { position: relative; order: -1; inset: auto; inline-size: min(100%, 320px); block-size: auto; opacity: 1; -webkit-mask-image: none; mask-image: none; margin-inline: auto; }
      .hero h1 { text-align: center; }
      .hero .lead, .hero-actions, .quick-links { justify-content: center; }
      .hero .lead { display: block; text-align: center; }
      .worlds { grid-template-columns: 1fr; }
      .world { transform: none; }
      .closing-actions .btn { width: 100%; }
    }
    @media (max-width: 560px) {
      .search-open kbd { display: none; }
      .hero-stage { padding: 8px 0 24px; overflow: hidden; }
      .chip-home { inset-inline-end: 2%; }
      .chip-creators, .chip-business { inset-inline-start: 2%; }
    }
    @media (max-width: 380px) {
      .header-cta { padding-inline: 14px; font-size: .9rem; }
    }
    @media (max-width: 560px) {
      .hero h1 { font-size: clamp(3.6rem, 16vw, 5rem); }
      .closing { padding-block: 64px; }
    }
    @media (prefers-reduced-motion: reduce) { .world { transform: none; } .chip { animation: none; } }
    html.a11y-reduce-motion .world { transform: none; }
    @media (prefers-reduced-transparency: reduce) { .site-header::before { background: var(--paper); } }

    /* Header (v1.6 polish): one row, one height (44px), one outline language. Logo · plain links · search · follow. */
    .site-header-inner { min-height: 76px; gap: 14px; }
    .site-nav { display: none; align-items: center; gap: clamp(18px, 2.4vw, 32px); margin-inline: auto; }
    .site-nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-size: 1.02rem; font-weight: 600; text-decoration: none; }
    .site-nav a::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 6px; block-size: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .25s var(--ease-out); }
    @media (hover: hover) and (pointer: fine) { .site-nav a:hover::after { transform: scaleX(1); } }
    .site-nav a[aria-current]::after { transform: scaleX(1); }
    .site-nav a:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
    @media (min-width: 900px) { .site-nav { display: flex; } }
    .icon-btn { inline-size: 44px; min-height: 44px; block-size: 44px; justify-content: center; margin-inline-start: auto; padding: 0; border: var(--outline); border-radius: 50%; background: var(--card-bg); color: var(--ink); box-shadow: var(--hard-sm); }
    .icon-btn svg { inline-size: 19px; block-size: 19px; }
    /* Search is a pill with ⌘K (DESIGN.md §6); on touch screens and narrow windows the pill keeps only the icon. */
    .search-open.icon-btn { inline-size: auto; min-inline-size: 56px; gap: 8px; padding: 0 14px; border-radius: 999px; }
    .search-open kbd { letter-spacing: .06em; }
    @media (min-width: 900px) { .icon-btn { margin-inline-start: 0; } }
    @media (hover: hover) and (pointer: fine) { .icon-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--ink); } }
    .header-cta { min-height: 44px; padding-inline: 18px; }
    .search-open + .header-cta { margin-inline-start: 0; }
    .brand { width: 132px; }

    /* Hero (v1.6 polish): a balanced pair. The building fills its column; each world label is pinned to its floor. */
    .hero-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 40px); padding-block: clamp(16px, 3vw, 40px); }
    .hero-art { inline-size: min(100%, 600px); }
    .has-floor-labels .chip { inset: 0 auto auto 0; rotate: 0deg; opacity: 0; animation: none; transition: box-shadow .2s var(--ease-out), background-color .2s ease; }
    .has-floor-labels .chip.is-active { box-shadow: 0 5px 0 var(--ink); }
    .has-floor-labels .chip::before { content: ""; inline-size: 8px; block-size: 8px; margin-inline-end: 8px; border-radius: 50%; background: var(--ink); opacity: .25; transition: opacity .2s ease, background-color .2s ease; }
    .has-floor-labels .chip.is-active::before { opacity: 1; background: var(--accent); }
    @media (max-width: 820px) {
      .hero-stage { grid-template-columns: 1fr; }
      /* a wide, short stage: the building keeps its size but takes less height, so the headline and buttons reach the first screen */
      .hero-art { inline-size: min(100%, 340px); aspect-ratio: 3 / 2; }
      .hero-hud { margin-block-end: 12px; }
    }
    .hero-stage { inline-size: min(1180px, calc(100% - 48px)); margin-inline: auto; }
    @media (max-width: 560px) { .hero-stage { inline-size: calc(100% - 32px); } }

    /* ===== mascot rig (copy this block + the <svg> into any page) ===== */
      .mascot{
        --body:var(--c-fbf6ec); --ink:#22201E; --accent:#D2541F;
        --paper:#F4EFE6; --sky:var(--tag-sky); --look-x:0px; --look-y:0px;
        display:block; width:100%; height:auto; overflow:visible;
      }
      /* content worlds */
      .mascot.world-home{--body:var(--world-home)}
      .mascot.world-creators{--body:var(--world-creators)}
      .mascot.world-business{--body:var(--world-business)}
      /* situation colors (only when no world is set) */
      .mascot:not(.world-home,.world-creators,.world-business):is(.is-thinking,.is-loading){--body:var(--c-c7aaee)}
      .mascot:not(.world-home,.world-creators,.world-business).is-happy{--body:var(--c-ffaac0)}
      .mascot.no-ground .m-ground, .mascot.no-sparkles .m-sparkle{display:none}
      .mascot .m-fill{transition:fill .45s ease}
    
      .mascot .m-char{transform-origin:200px 350px}
      .mascot .m-breath{transform-origin:200px 335px; animation:m-breathe 3.6s ease-in-out infinite}
      .mascot .m-eyes-pos{transform:translate(var(--look-x),var(--look-y)); transition:transform .25s ease-out}
      .mascot .m-eyes{transform-box:fill-box; transform-origin:center; animation:m-blink 5.2s infinite}
      .mascot .m-tilt{transition:transform .25s ease-out}
      .mascot .m-iris{rx:9.5px; ry:10.5px; transition:rx .25s ease-out, ry .25s ease-out, opacity .15s}
      .mascot :is(.m-arc,.m-lid,.m-glint){opacity:0; transition:opacity .15s}
      .mascot .m-arm-l{transform-origin:90px 236px; transition:transform .3s cubic-bezier(.3,1.4,.6,1)}
      .mascot .m-arm-r{transform-origin:310px 236px; transition:transform .3s cubic-bezier(.3,1.4,.6,1)}
      .mascot .m-nose{transition:opacity .15s}
      .mascot :is(.m-mouth,.m-smile,.m-o){transform-box:fill-box; transform-origin:center top; opacity:0}
      .mascot .m-lobe{opacity:0}
      .mascot .m-sparkle{transform-box:fill-box; transform-origin:center}
      .mascot .m-zzz,.mascot .m-drop,.mascot .m-card{opacity:0}
      .mascot .m-zzz text{font:700 30px Assistant,Arial,sans-serif; fill:var(--ink)}
    
      @keyframes m-breathe{0%,100%{transform:scale(1,1)} 50%{transform:scale(1.012,1.028)}}
      @keyframes m-blink{0%,93%,100%{transform:scaleY(1)} 96%{transform:scaleY(.08)}}
      @keyframes m-wave{0%,100%{transform:rotate(0)} 25%{transform:rotate(-120deg)} 50%{transform:rotate(-95deg)} 75%{transform:rotate(-125deg)}}
      @keyframes m-tilt{0%,100%{transform:rotate(0)} 50%{transform:rotate(-3deg)}}
      @keyframes m-lobe{0%,100%{opacity:0} 40%{opacity:.6}}
      @keyframes m-talk{from{transform:scaleY(.25)} to{transform:scaleY(1)}}
      @keyframes m-bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)}}
      @keyframes m-jump{0%,100%{transform:translateY(0) scale(1,1)} 18%{transform:translateY(5px) scale(1.07,.9)} 55%{transform:translateY(-38px) scale(.95,1.07)} 85%{transform:translateY(0) scale(1.05,.95)}}
      @keyframes m-twinkle{0%{transform:scale(.3); opacity:0} 40%{transform:scale(1.5); opacity:1} 100%{transform:scale(1); opacity:1}}
      @keyframes m-float{0%{opacity:0; transform:translate(0,0)} 20%{opacity:1} 100%{opacity:0; transform:translate(10px,-40px)}}
      @keyframes m-drip{0%{opacity:0; transform:translateY(-6px)} 20%{opacity:1} 100%{opacity:0; transform:translateY(22px)}}
      @keyframes m-shake{0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)}}
      @keyframes m-read{0%,100%{transform:translate(-5px,8px)} 50%{transform:translate(5px,8px)}}
    
      /* eyes per situation */
      .mascot:is(.is-hello,.is-happy) :is(.m-iris,.m-nose){opacity:0}
      .mascot:is(.is-hello,.is-happy) .m-arc{opacity:1}
      .mascot:is(.is-hello,.is-happy,.is-sleeping,.is-error) .m-eyes{animation:none}
      .mascot.is-thinking .m-eye-r .m-iris{rx:7.5px; ry:8.5px}
      .mascot.is-reading .m-iris{rx:8px; ry:12.5px}
      .mascot.is-loading .m-iris{rx:4.5px; ry:12px}
      .mascot.is-loading .m-eye-l .m-tilt{transform:rotate(22deg)}
      .mascot.is-loading .m-eye-r .m-tilt{transform:rotate(-22deg)}
      .mascot.is-error .m-iris{rx:12.5px; ry:13.5px}
      .mascot.is-error .m-glint{opacity:1}
      .mascot.is-sleeping .m-iris{opacity:0}
      .mascot.is-sleeping .m-lid{opacity:1}
    
      .mascot.is-hello .m-arm-r{animation:m-wave .9s ease-in-out 3}
      .mascot.is-hello .m-char{animation:m-tilt .9s ease-in-out 3}
      .mascot.is-hello .m-smile{opacity:1}
    
      .mascot.is-thinking{--look-x:6px; --look-y:-7px}
      .mascot.is-thinking .m-lobe{animation:m-lobe 1.6s ease-in-out infinite}
      .mascot.is-thinking .m-lobe:nth-child(2){animation-delay:.27s}
      .mascot.is-thinking .m-lobe:nth-child(3){animation-delay:.54s}
    
      .mascot.is-talking .m-nose{opacity:0}
      .mascot.is-talking .m-mouth{opacity:1; animation:m-talk .3s ease-in-out infinite alternate}
      .mascot.is-talking .m-char{animation:m-bob 1.2s ease-in-out infinite}
    
      .mascot.is-happy .m-char{animation:m-jump .75s cubic-bezier(.3,0,.2,1) 2}
      .mascot.is-happy .m-smile{opacity:1}
      .mascot.is-happy .m-sparkle{animation:m-twinkle .75s ease-out 2}
      .mascot.is-happy .m-sparkles > g:nth-child(2) .m-sparkle{animation-delay:.1s}
      .mascot.is-happy .m-sparkles > g:nth-child(3) .m-sparkle{animation-delay:.2s}
    
      .mascot.is-sleeping .m-breath{animation-duration:5.5s}
      .mascot.is-sleeping .m-zzz{opacity:1}
      .mascot.is-sleeping .m-zzz text{animation:m-float 2.6s ease-out infinite}
      .mascot.is-sleeping .m-zzz text:nth-child(2){animation-delay:.85s}
      .mascot.is-sleeping .m-zzz text:nth-child(3){animation-delay:1.7s}
    
      .mascot.is-pointing{--look-x:8px}
      .mascot.is-pointing .m-arm-r{transform:rotate(-84deg)}
      .mascot.is-pointing-left{--look-x:-8px}
      .mascot.is-pointing-left .m-arm-l{transform:rotate(84deg)}
    
      .mascot.is-error .m-nose{opacity:0}
      .mascot.is-error .m-o{opacity:1}
      .mascot.is-error .m-drop{opacity:1; animation:m-drip 1.3s ease-in infinite}
      .mascot.is-error .m-char{animation:m-shake .4s ease-in-out 2}
    
      .mascot.is-reading .m-card{opacity:1}
      .mascot.is-reading .m-arm-l{transform:rotate(-70deg)}
      .mascot.is-reading .m-arm-r{transform:rotate(70deg)}
      .mascot.is-reading .m-eyes-pos{animation:m-read 2.2s ease-in-out infinite}
    
      .mascot.is-loading{--look-y:3px}
      .mascot.is-loading .m-lobe{animation:m-lobe .9s ease-in-out infinite}
      .mascot.is-loading .m-lobe:nth-child(2){animation-delay:.15s}
      .mascot.is-loading .m-lobe:nth-child(3){animation-delay:.3s}
      .mascot.is-loading .m-breath{animation-duration:1.4s}
    
      @media (prefers-reduced-motion:reduce){
        .mascot :is(.m-breath,.m-char,.m-arm-l,.m-arm-r,.m-lobe,.m-sparkle,.m-zzz text,.m-drop,.m-eyes-pos,.m-iris,.m-tilt){animation:none !important; transition:none !important}
        .mascot .m-eyes{animation:m-blink 5.2s infinite !important}
        .mascot:is(.is-hello,.is-happy,.is-sleeping,.is-error) .m-eyes{animation:none !important}
      }
      /* ===== end rig ===== */
    /* the site's own reduce-motion switch stops the mascot too; only the blink stays (DESIGN.md §7) */
    .a11y-reduce-motion .mascot :is(.m-breath,.m-char,.m-arm-l,.m-arm-r,.m-lobe,.m-sparkle,.m-zzz text,.m-drop,.m-eyes-pos,.m-iris,.m-tilt) { animation: none !important; transition: none !important; }
    .a11y-reduce-motion .mascot .m-eyes { animation: m-blink 5.2s infinite !important; }
    .a11y-reduce-motion .mascot:is(.is-hello,.is-happy,.is-sleeping,.is-error) .m-eyes { animation: none !important; }

    /* Small Trio: thinking beside an empty search, happy for a second after a copy. */
    .trio-mini { display: inline-block; flex: 0 0 auto; inline-size: 56px; }
    .trio-mini .mascot { display: block; inline-size: 100%; block-size: auto; }
    .trio-mini .mascot.is-thinking { --body: var(--c-fbf6ec); }
    .search-empty { display: flex; align-items: center; gap: 14px; }
    .search-empty-copy { display: flex; flex-direction: column; gap: 4px; }
    .search-empty-worlds { display: flex; flex-wrap: wrap; gap: 4px 14px; }
    .search-results .search-empty-worlds a { display: inline-flex; align-items: center; min-block-size: 44px; padding: 0; color: var(--accent-light); font-weight: 700; text-underline-offset: 4px; }
    .trio-copy { position: absolute; pointer-events: none; }

    /* Follow nudge right after the tip of the day (on the dark tip band). */
    .tip-follow { margin: 22px 0 0; color: var(--paper); font-weight: 500; }
    .tip-follow a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent-light); font-weight: 700; text-underline-offset: 5px; }

    /* Phones: the four main links sit in a second header row, so tips, guides, worlds and about are one tap away. */
    @media (max-width: 899px) {
      .site-header-inner { flex-wrap: wrap; row-gap: 0; }
      .site-nav { display: flex; order: 3; flex-basis: 100%; justify-content: space-between; gap: 8px; margin: 0; }
      .site-nav a { font-size: .98rem; }
    }

    /* Phones: the accessibility button is smaller and stays clear of full-width buttons' text. */
    @media (max-width: 820px) {
      .a11y-launcher { inline-size: 44px; block-size: 44px; }
      .a11y-launcher svg { inline-size: 23px; block-size: 23px; }
    }

    /* ===== Hallmark redesign (2026-10-30): one row for the tip, the floor nav clear of content, about and questions together. ===== */
    html, body { overflow-x: clip; }

    /* Hero: the latest tip is the foot line, in the body face (was a mono TIP # label above the head). */
    .hero-hud { margin: 22px 0 0; font-size: 1rem; color: var(--quiet); }
    .hero-hud a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 5px; }
    .hero-hud .hud-live { display: none; }
    @media (hover: hover) and (pointer: fine) { .hero-hud a:hover { color: var(--label); } }

    /* Floor 1: the tip screen and the latest list share one row. */
    .tips-row { inline-size: min(1180px, calc(100% - 48px)); margin-inline: auto; }
    .tips-row .tip-of-day { inline-size: auto; margin: 0; }
    .tips-row .tip-of-day-body { max-height: 11em; overflow: hidden; -webkit-mask-image: linear-gradient(var(--black) 60%, transparent); mask-image: linear-gradient(var(--black) 60%, transparent); }
    .tips-row .telegram-updates { padding-block: 32px 0; border: 0; }
    .tips-row .telegram-updates > .wrap { inline-size: auto; margin: 0; }
    .tips-row .telegram-updates-heading { display: block; }
    .tips-row .updates-archive-link { display: inline-block; margin-block-start: 10px; }
    @media (min-width: 1040px) {
      .tips-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; }
      .tips-row .telegram-updates { padding-block: 8px 0; }
    }
    @media (max-width: 820px) { .tips-row { inline-size: auto; } .tips-row .telegram-updates { padding-inline: 16px; } }
    .tips-row + .worlds-section { margin-block-start: clamp(56px, 7vw, 96px); }
    .worlds-title .accent-word { color: var(--accent); }

    /* Floor 2: prompts and tools close the guides section. */
    .guides-section .more-grid { margin-block-start: clamp(32px, 4vw, 48px); }
    .guide-card .tag { align-self: flex-start; margin-block-start: 4px; }

    /* Floor 3: about beside the questions. */
    .meet { display: grid; gap: 48px; align-items: start; }
    .meet .about-box { padding: clamp(28px, 4vw, 44px); }
    .meet .about-box::before { content: none; }
    .meet .about-content { grid-template-columns: minmax(0, 1fr); }
    .meet .about-portrait { inline-size: min(100%, 220px); justify-self: start; }
    .meet .about-box p { font-size: 1.1rem; }
    .meet-faq .faq { max-width: none; margin-block-start: 28px; }
    @media (min-width: 1040px) { .meet { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

    /* The floor nav sits in the gutter only where the gutter is wide enough to hold it. */


    /* ===== Brand 1.9.0 layer (DESIGN.md 1.9.0, 31.10.2026): Amatic SC and Earth left the brand ===== */
    /* headings in Assistant 800; DESIGN §3 sizes for H1 and H2, the rest scaled for Assistant's wider letters */
    .hero h1, h2, .closing h2, .page-title, .tip-phone-label, .floor-name, .guide-card h3, .world-label strong, .related-title, .more-card strong, .guide-body .fit .fit-label { font-weight: 800; letter-spacing: -.01em; }
    .hero h1 { font-size: clamp(4rem, 9vw, 7.5rem); line-height: .95; }
    h2, .page-title { font-size: clamp(3rem, 6vw, 4.5rem); line-height: 1; }
    .tip-of-day h2 { font-size: clamp(1.9rem, 3.3vw, 2.7rem); line-height: 1.05; }
    .telegram-updates h2 { font-size: clamp(1.65rem, 3vw, 2.35rem); }
    .privacy-dialog h2, .a11y-dialog h2 { font-size: clamp(1.9rem, 5.2vw, 2.9rem); }
    .tip-phone-label { font-size: 1.7rem; }
    .floor-name { font-size: clamp(1.9rem, 3.5vw, 3.1rem); line-height: 1; }
    .guide-card h3 { font-size: 1.55rem; line-height: 1.2; }
    .world-label strong { font-size: 1.7rem; }
    .related-title, .more-card strong { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
    .guide-body .fit .fit-label { font-size: 1.3rem; }
    /* numbers in JetBrains Mono 700 (DESIGN §5 floor marker, §6 guide steps) */
    .floor-numeral, .step-number, .what-item .no, .work-number, .about-box::before { font-family: var(--mono); font-weight: 700; letter-spacing: -.04em; }
    .floor-numeral { font-size: clamp(5rem, 11vw, 9.5rem); }
    .about-box::before { font-size: clamp(4.4rem, 11vw, 8.8rem); }
    .step-number { font-size: 2.6rem; }
    .what-item .no { font-size: 1.6rem; }
    .work-number { font-size: 1.8rem; }
    .guide-body ol li::before { font: 700 2.2rem/1 var(--mono); }
    /* an English word inside a Hebrew heading: Instrument Serif italic (DESIGN §3, at least 32px desktop and 28px mobile; build.mjs marks the words) */
    h1 .en, h2 .en, .page-title .en { font-family: var(--serif); font-style: italic; font-synthesis: none; font-weight: 400; letter-spacing: 0; }
    .telegram-updates h2 .en { font: inherit; }
    /* primary button (DESIGN §6): the hover keeps #B4461A (white text 5.48:1); only the lift and the hard shadow change */
    @media (hover: hover) and (pointer: fine) { .btn-primary:hover, .closing .btn-primary:hover { background: var(--label); } }
    /* Hebrew is never in mono and never letter-spaced (DESIGN §3): world tags, the floor kicker, the search hint; the key names stay mono */
    .tag, .search-foot { font-family: var(--body); letter-spacing: 0; }
    .tag { font-weight: 700; }
    .search-foot span { font-family: var(--mono); }
    /* the brand dot texture on the cream page background, never on cards (DESIGN §2) */
    body { background-image: radial-gradient(circle, var(--dot-light) 1.8px, transparent 1.85px); background-size: 40px 40px; }
    html.a11y-high-contrast body { background-image: none; }
    /* Text never sits on the dot grid: beside Hebrew letters a dot reads as nikud. Inner pages lay their content on a plain
       paper sheet (full width on phones) and the dots stay around it. */
    .page > .wrap { background: var(--paper); box-shadow: 0 0 0 clamp(16px, 2vw, 28px) var(--paper); border-radius: 12px; }
    /* Home, light sections and the footer: the same rule for small text. A soft paper halo clears the dots behind the block and
       fades out, so no dot is cut in half. Headlines and cards stay as they are. */
    .hero3-lead, .sec-light .floor-tag, .meet-faq .faq, footer .footer-row { background: var(--paper); box-shadow: 0 0 12px 8px var(--paper); border-radius: 8px; }
    .sec-light .floor-tag { inline-size: fit-content; }
    .sec-light .btn-secondary:not(:hover) { background: linear-gradient(var(--white-a450), var(--white-a450)), var(--paper); } /* same tint, no dots showing through */

    /* ===================== v3 (31.10.2026): shared shell, home, guide skin covers =====================
       Hallmark · genre editorial · system DESIGN.md (locked) · reference: 2026-10-31-site-v3 mockup, approved by Yaroni
       waive 38iii: one accent word per heading (brand rule, DESIGN.md §2-3)
       waive 7b: white text on the #B4461A button (DESIGN.md §6, 5.48:1)
       waive 29: glass on the nav, the menu sheet, the mini nav and the dialogs (owner decision 31.10.2026, website only)
       waive F7: pill shapes in the nav (the glass nav's own control language)
       waive 12: the spring easing on the floors (the brand floor drop) */

    @font-face { font-family: "Assistant"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/fonts/assistant-hebrew.woff2") format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
    @font-face { font-family: "Assistant"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/fonts/assistant-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
    @font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/instrument-serif-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
    @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("/fonts/jetbrains-mono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

    :root {
      --charcoal: #181716; --on-char: #F1ECE3; --ink-2: #1E1C1A; --orange-light: #D97C52; --lime: #C8F04A;
      --floor-1: #FFC23A; --floor-2: #D6EF84; --floor-3: #C9B8FF;
      --world-home: #FFDF9C; --world-creators: #FFBFA0; --world-business: #D6CFC2;
      --dot-light: rgba(30, 28, 26, .32); --dot-dark: rgba(241, 236, 227, .17);
      --line-dark: rgba(241, 236, 227, .16); --card-dark: rgba(241, 236, 227, .05); --spot: rgba(255, 122, 61, .16);
      --glass: rgba(249, 248, 243, .66); --glass-strong: rgba(249, 248, 243, .82); --glass-edge: rgba(255, 255, 255, .6); --glass-dark: rgba(30, 28, 26, .06);
      --scrim: rgba(24, 23, 22, .35); --shadow-s: rgba(34, 32, 30, .08); --shadow-m: rgba(34, 32, 30, .16);
      --ease: cubic-bezier(.16, 1, .3, 1); --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
      /* springs as linear() curves; a browser without linear() keeps the plain ease (below) */
      --spring-drop: var(--ease); --spring-soft: var(--ease); --spring: var(--ease);
      --mono: "JetBrains Mono", "Assistant", ui-monospace, monospace;
    }
    @supports (transition-timing-function: linear(0, 1)) {
      :root {
        --spring-drop: linear(0,.061,.201,.372,.543,.693,.816,.908,.973,1.013,1.036,1.045,1.045,1.04,1.033,1.025,1.018,1.011,1.006,1.003,1); /* 0.66s, for things that land */
        --spring-soft: linear(0,.099,.286,.471,.625,.742,.826,.884,.924,.951,.968,.98,.987,.992,.995,.997,1); /* 0.47s, no overshoot */
        --spring: linear(0,.058,.189,.346,.501,.639,.752,.84,.905,.951,.981,.999,1.01,1.014,1.015,1.014,1.012,1.01,1.007,1.005,1); /* 0.6s, a small bounce */
      }
    }
    html, body { overflow-x: clip; }
    body { background-color: var(--paper); }
    .mono { font-weight: 500; }
    :focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
    .sec-dark :focus-visible { outline-color: var(--orange-light); }
    h1, h2, .skin-title { text-wrap: balance; }
    h3, .guide-card p, .recent a span, .world-tile p, .tip-list-link strong, .tip-list-link span, .more-card span { text-wrap: pretty; }

    /* Sections alternate cream and charcoal; a 40px dot grid on each. */
    .sec-light { background-color: var(--paper); color: var(--ink); background-image: radial-gradient(circle, var(--dot-light) 1.8px, transparent 2.1px); background-size: 40px 40px; }
    .sec-dark { background-color: var(--charcoal); color: var(--on-char); background-image: radial-gradient(circle, var(--dot-dark) 1.3px, transparent 1.6px); background-size: 40px 40px; }
    main > section.sec-light, main > section.sec-dark { margin: 0; border: 0; border-radius: 0; box-shadow: none; padding-block: clamp(64px, 8vw, 112px); }
    .sec-dark h2, .sec-dark h3 { color: var(--on-char); }
    .sec-dark .accent-word { color: var(--orange-light); }
    .sec-light .accent-word { color: var(--accent); }
    .sec-head h2 { margin: 0; font-size: clamp(2.6rem, 5vw, 4rem); font-weight: 800; line-height: 1.05; letter-spacing: -1px; }
    .sec-head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px; }
    .sec-sub { margin: 12px 0 0; font-size: 18px; font-weight: 500; max-width: 46ch; }
    .floor-tag { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; font-weight: 700; font-size: 15px; }
    .floor-n { display: inline-grid; place-items: center; inline-size: 30px; block-size: 30px; border-radius: 8px; font-family: var(--mono); font-weight: 700; font-size: 15px; color: var(--ink-2); }
    #floor-1 .floor-n { background: var(--floor-1); }
    #floor-2 .floor-n { background: var(--floor-2); }
    #floor-3 .floor-n { background: var(--floor-3); }
    .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
    .js .reveal.in { opacity: 1; transform: none; }

    /* Buttons on charcoal */
    .sec-dark .btn-secondary { background: transparent; color: var(--on-char); border-color: var(--line-dark); box-shadow: none; }
    @media (hover: hover) and (pointer: fine) { .sec-dark .btn-secondary:hover { background: var(--on-char); color: var(--ink-2); border-color: var(--on-char); } }

    /* Header: a glass pill in three zones */
    .gnav { position: relative; z-index: 20; margin-block-start: 12px; }
    .gnav-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 8px; padding-inline-start: 20px; border-radius: 999px;
      background: var(--glass); border: 1px solid var(--glass-edge); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); }
    .gnav-logo { display: inline-flex; }
    .gnav-logo img { block-size: 28px; inline-size: auto; }
    .gnav-links { position: relative; display: flex; justify-self: center; gap: 4px; padding: 4px; border-radius: 999px; background: var(--glass-dark); }
    .gnav-links a { position: relative; z-index: 1; display: block; padding: 8px 16px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 15px; line-height: 1.4; }
    .gnav-links a[aria-current] { font-weight: 800; }
    .slide-ind { position: absolute; z-index: 0; inset-block-start: 4px; left: 0; inline-size: 0; border-radius: 999px; background: var(--white); box-shadow: 0 1px 6px var(--shadow-s); transition: transform .35s var(--ease), opacity .2s; pointer-events: none; }
    .js .slide-ind { opacity: 0; }
    .gnav-tools { display: flex; align-items: center; gap: 8px; }
    .gnav-key { display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: transparent; font-weight: 600; font-size: 15px; cursor: pointer; }
    .gnav-key kbd { font-family: var(--mono); font-weight: 500; font-size: 12px; padding: 3px 8px; border-radius: 6px; background: var(--glass-dark); }
    .gnav .btn, .mini-nav .btn { min-block-size: 44px; padding-block: 0; }
    .gnav-menu { display: none; inline-size: 44px; block-size: 44px; place-items: center; border-radius: 999px; border: 1px solid var(--line); background: transparent; cursor: pointer; color: var(--ink); }
    .gnav-menu svg { inline-size: 20px; block-size: 20px; }
    @media (max-width: 860px) {
      .js .gnav-links, .gnav-key { display: none; }
      .js .gnav-menu { display: inline-grid; }
      html:not(.js) .gnav-bar { grid-template-columns: auto auto; border-radius: 28px; }
      html:not(.js) .gnav-links { grid-row: 2; grid-column: 1 / -1; flex-wrap: wrap; justify-self: stretch; }
    }
    .gnav-sheet { position: fixed; z-index: 31; inset-block-start: 76px; inset-inline-end: 16px; inline-size: min(360px, calc(100% - 32px)); padding: 12px; border-radius: 24px;
      background: var(--glass-strong); border: 1px solid var(--glass-edge); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); box-shadow: 0 20px 50px var(--shadow-m);
      opacity: 0; transform: translateY(-8px) scale(.98); pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease); }
    .gnav-sheet.is-open { opacity: 1; transform: none; pointer-events: auto; }
    .gnav-sheet a, .gnav-sheet button { display: block; inline-size: 100%; padding: 14px 16px; border: 0; border-radius: 14px; background: none; text-align: start; font-weight: 700; font-size: 18px; text-decoration: none; cursor: pointer; }
    @media (hover: hover) and (pointer: fine) { .gnav-sheet a:hover, .gnav-sheet button:hover { background: var(--glass-dark); } }
    .mini-nav { position: fixed; z-index: 30; inset-block-start: 16px; inset-inline-end: 16px; display: flex; gap: 8px; padding: 8px; border-radius: 999px;
      background: var(--glass); border: 1px solid transparent; -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); box-shadow: 0 10px 30px var(--shadow-m);
      transform: translateY(-16px) scale(.9); pointer-events: none; transition: opacity .3s var(--ease), transform .47s var(--spring-soft); }
    .mini-nav[hidden] { display: none; }
    /* Phone dock (up to 860px): tips, guides, worlds and search in one glass pill at the bottom, beside the accessibility button. */
    .dock { display: none; }
    @media (max-width: 860px) {
      .js .dock { position: fixed; z-index: 30; inset-block-end: max(14px, env(safe-area-inset-bottom)); right: 14px; left: 70px; max-inline-size: 360px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; padding: 6px; border-radius: 999px;
        background: var(--glass); border: 1px solid var(--glass-edge); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); box-shadow: 0 10px 30px var(--shadow-m); }
      .dock a, .dock button { display: grid; justify-items: center; align-content: center; gap: 2px; min-block-size: 48px; padding: 4px; border: 0; border-radius: 999px; background: none; color: var(--ink); font: 700 12px/1.2 var(--body); text-decoration: none; cursor: pointer; }
      .dock svg { inline-size: 22px; block-size: 22px; }
      .dock [aria-current] { background: var(--white); box-shadow: 0 1px 6px var(--shadow-s); }
      .js body { padding-block-end: 88px; }
      .js .toast { inset-block-end: 92px; }
      .js .a11y-launcher { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 9px); }
    }
    .js .mini-nav { opacity: 0; }
    .mini-nav.is-on { opacity: 1; transform: none; pointer-events: auto; }
    .mini-nav .gnav-menu { display: inline-grid; background: var(--white); border: 0; }
    .gnav-sheet.from-mini { position: fixed; inset-block-start: 76px; }

    /* ⌘K palette: a glass dialog, one input over a list */
    dialog.search-dialog { inline-size: min(560px, calc(100% - 32px)); max-block-size: none; margin: 12svh auto auto; padding: 8px; border: 1px solid var(--glass-edge); border-radius: 24px; color: var(--ink); box-shadow: 0 30px 80px var(--shadow-m);
      background: var(--glass-strong); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); }
    dialog.search-dialog::backdrop { background: var(--scrim); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
    dialog.search-dialog[open] { animation: pal-pop .47s var(--spring-soft); }
    dialog.search-dialog.by-key[open] { animation: v4-fade .12s ease-out; }
    @keyframes v4-fade { from { opacity: 0; } }
    @keyframes pal-pop { from { opacity: 0; transform: translateY(-10px) scale(.97); } }
    .search-dialog .search-box { display: flex; align-items: center; gap: 12px; min-block-size: 56px; padding: 0 16px; border: 0; border-radius: 16px; background: var(--glass-dark); }
    .search-dialog .search-box svg { inline-size: 20px; block-size: 20px; color: var(--ink); flex: none; }
    .search-dialog .search-box input { flex: 1; min-inline-size: 0; border: 0; background: transparent; color: var(--ink); font: 600 19px var(--body); outline: 0; }
    .search-dialog .search-box:focus-within { box-shadow: 0 0 0 2px var(--accent); }
    .search-dialog .search-results { max-block-size: 52svh; margin: 0; padding: 8px 0 0; overflow: auto; list-style: none; }
    .search-dialog .search-results a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 16px; border-radius: 12px; color: var(--ink); text-decoration: none; font-weight: 600; }
    .search-dialog .search-results [aria-selected="true"] a { background: var(--white); }
    .search-dialog .search-kind { flex: none; color: var(--ink); font: 500 14px var(--body); letter-spacing: 0; text-transform: none; }
    .search-dialog .search-empty { padding: 16px; color: var(--ink); font-weight: 500; }

    /* Copy flow: lime "הועתק" for 1.6s and a dark toast */
    .copy-btn.is-copied, .shortcut-copy.is-copied, [data-copy-prompt].is-copied, [data-copy-shortcut].is-copied { background: var(--lime); color: var(--ink-2); border-color: transparent; }
    .toast { position: fixed; z-index: 50; inset-block-end: 24px; inset-inline: 0; inline-size: max-content; max-inline-size: calc(100% - 32px); margin: 0 auto; padding: 12px 20px; border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 700;
      opacity: 0; transform: translateY(16px); transition: opacity .15s var(--ease), transform .15s var(--ease); pointer-events: none; }
    .toast.is-on { opacity: 1; transform: none; transition: opacity .25s var(--ease), transform .47s var(--spring-soft); }

    /* Footer: cream, handles labelled by channel */
    footer { background-color: var(--paper); border-block-start: 0; background-image: radial-gradient(circle, var(--dot-light) 1.8px, transparent 2.1px); background-size: 40px 40px; }
    .footer-links bdi { font-family: var(--mono); font-weight: 500; }

    /* Hero */
    .hero3 { padding-block: 48px 72px !important; }
    .hero3-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: center; min-block-size: min(680px, 80svh); }
    .hero3 h1 { margin: 0; font-size: clamp(4rem, 9vw, 7.5rem); font-weight: 800; line-height: .98; letter-spacing: -2px; }
    .hero3-l2 { color: var(--accent); }
    .hero3-lead { margin: 24px 0 0; font-size: 20px; font-weight: 500; max-width: 30ch; }
    .hero3-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 32px; }
    .floors { position: relative; display: flex; flex-direction: column; gap: 12px; padding-block-start: 128px; }
    .slab { display: flex; align-items: center; justify-content: space-between; border-radius: 18px; padding: 24px 28px; color: var(--ink-2); font-weight: 800; font-size: 28px; line-height: 1.1; }
    .slab small { display: block; margin-block-start: 4px; font-weight: 600; font-size: 15px; }
    .slab-n { font-family: var(--mono); font-weight: 700; font-size: 44px; line-height: 1; }
    .slab-3 { background: var(--floor-3); margin-inline-end: 64px; }
    .slab-2 { background: var(--floor-2); margin-inline: 32px; }
    .slab-1 { background: var(--floor-1); margin-inline-start: 64px; }
    /* z-index: the floors keep a transform after they drop in, which paints them above Trio and hid its feet */
    .hero-trio { position: absolute; z-index: 1; inset-block-start: 0; inset-inline-end: 92px; inline-size: 150px; }
    @media (max-width: 860px) {
      .hero3-grid { grid-template-columns: minmax(0, 1fr); min-block-size: 0; }
      /* phones: headline, sentence and buttons first; Trio and the floors follow and peek into the first screen */
      .hero3 { padding-block-start: 24px !important; }
      .hero3-grid { gap: 20px; }
      .floors { max-inline-size: 420px; padding-block-start: 96px; }
      .hero-trio { inline-size: 120px; }
    }
    .js .hero3 .w { display: inline-block; opacity: 0; filter: blur(8px); transform: translateY(12px); }
    .js.go .hero3 .w { animation: v3-focus .7s var(--ease) forwards; animation-delay: 150ms; }
    .js.go .hero3 .hero3-l2 { animation-delay: 240ms; }
    /* Hero floors in 3D (CSS transforms only): site.js adds .is-3d and the depth layers. The front face keeps the real text. */
    .floors.is-3d { --rx: -11deg; --ry: -24deg; transform: perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; }
    .floors.is-3d { gap: 22px; } /* room for each floor's top face */
    .is-3d .slab { position: relative; transform-style: preserve-3d; }
    .slab-depth { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
    .slab-3 .slab-depth { background: color-mix(in srgb, var(--floor-3) 74%, var(--ink)); }
    .slab-2 .slab-depth { background: color-mix(in srgb, var(--floor-2) 74%, var(--ink)); }
    .slab-1 .slab-depth { background: color-mix(in srgb, var(--floor-1) 74%, var(--ink)); }
    .is-3d .hero-trio { translate: 0 -10px -21px; } /* stands on the top floor's upper face, in the middle of its depth */
    @media (max-width: 860px) { .floors.is-3d { margin-inline-start: 20px; } }
    /* In 3D the floors drop in without fading: an opacity animation flattens the block and its depth layers paint over the text. */
    .js .is-3d .slab { opacity: 1; }
    .js:not(.go) .is-3d .slab { visibility: hidden; }
    .js.go .is-3d .slab { animation-name: v3-drop3d; animation-fill-mode: both; }
    @keyframes v3-drop3d { from { visibility: hidden; transform: translateY(-70px); } 1% { visibility: visible; } to { visibility: visible; transform: none; } }
    @keyframes v3-focus { to { opacity: 1; filter: blur(0); transform: none; } }
    .js .slab, .js .hero-trio { opacity: 0; transform: translateY(-60px); }
    /* the building goes up from the ground: floor 1, then 2, then 3, each landing on a spring; Trio drops last onto the roof */
    .js.go .slab { animation: v3-drop .66s var(--spring-drop) forwards; animation-delay: 540ms; }
    .js.go .slab-2 { animation-delay: 420ms; }
    .js.go .slab-1 { animation-delay: 300ms; }
    .js.go .hero-trio { animation: v3-drop .66s var(--spring-drop) forwards; animation-delay: 1000ms; }
    /* one squash as Trio's feet touch the roof (1.66s), then the wave (site.js, 2.05s) */
    .js.go .hero-trio .mascot { transform-origin: 50% 87.5%; animation: trio-land .34s var(--ease) 1.66s; }
    @keyframes v3-drop { to { opacity: 1; transform: none; } }

    /* Latest tip: spotlight card and a list of three */
    .tipgrid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; margin-block-start: 40px; }
    @media (max-width: 860px) { .tipgrid { grid-template-columns: minmax(0, 1fr); } }
    .spot { position: relative; overflow: hidden; padding: clamp(28px, 4vw, 40px); border-radius: 28px; border: 1px solid var(--line-dark); background-color: var(--card-dark);
      background-image: radial-gradient(420px circle at var(--mx, 70%) var(--my, 30%), var(--spot), transparent 60%); }
    .spot-meta { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
    .spot-meta time { font-size: 14px; }
    .spot h3 { margin: 0; font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 800; line-height: 1.08; }
    .spot p:not(.spot-meta) { margin: 16px 0 0; font-size: 18px; max-width: 40ch; color: var(--on-char); }
    .spot .spot-btn { margin-block-start: 24px; background: var(--orange-light); color: var(--ink-2); border-color: var(--orange-light); box-shadow: none; }
    .recent { margin: 0; padding: 0; list-style: none; border-block-start: 1px solid var(--line-dark); }
    .recent li { border-block-end: 1px solid var(--line-dark); }
    .recent a { display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; align-items: center; gap: 16px; padding: 22px 4px; color: var(--on-char); text-decoration: none; font-weight: 700; font-size: 19px; line-height: 1.35; }
    .recent time { font-size: 14px; }
    .recent svg { inline-size: 18px; block-size: 18px; transition: transform .25s var(--ease); }
    @media (hover: hover) and (pointer: fine) { .recent a:hover { color: var(--orange-light); } .recent a:hover svg { transform: translateX(-6px); } }

    /* This week in AI: four cards in their world colours under the latest tip. 2x2 on desktop, a snap rail on phones. */
    .weekly { margin-block-start: clamp(56px, 7vw, 88px); }
    .weekly-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; }
    .weekly-head h3 { margin: 0; font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 700; line-height: 1; }
    .weekly-range { margin: 0; color: var(--on-char); font-size: 14px; letter-spacing: .06em; }
    .weekly-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 28px 0 0; padding: 0; list-style: none; }
    .week-card { display: flex; flex-direction: column; min-inline-size: 0; overflow: hidden; border-radius: 28px; border: 1px solid var(--line-dark); background-color: var(--card-dark); color: var(--on-char); transition: border-color .25s var(--ease); }
    @media (hover: hover) and (pointer: fine) { .week-card:hover { border-color: var(--on-char); } }
    /* the colour panel: the floor colours plus the orange, one per card, like the stacked cards in the guides */
    .week-visual { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; min-block-size: 150px; padding: 22px clamp(22px, 3vw, 30px); color: var(--ink-2);
      background-image: radial-gradient(circle, var(--dot-light) 1.8px, transparent 2.1px); background-size: 24px 24px; }
    /* colour = world everywhere: each card takes its world's colour, the same as the world tiles and tags */
    .wk-home .week-visual { background-color: var(--world-home); } .wk-creators .week-visual { background-color: var(--world-creators); }
    .wk-business .week-visual { background-color: var(--world-business); }
    .week-n { align-self: flex-start; font-weight: 700; font-size: 15px; letter-spacing: .06em; }
    .week-card .week-product { margin: 0; color: var(--ink-2); font-weight: 800; font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: .95; letter-spacing: -.02em; text-align: right; }
    .week-body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: clamp(22px, 3vw, 30px); }
    .week-body .tag { margin: 0; }
    .sec-dark .week-card h4 { margin: 14px 0 0; color: var(--on-char); font-size: clamp(1.35rem, 2.2vw, 1.65rem); font-weight: 700; line-height: 1.2; text-wrap: balance; }
    .week-card p { margin: 12px 0 0; font-size: 16px; line-height: 1.65; text-wrap: pretty; }
    .week-card .week-do { margin-block-start: 18px; padding-block-start: 16px; border-block-start: 1px solid var(--line-dark); }
    .week-do strong { color: var(--on-char); }
    .week-src { display: inline-flex; align-items: center; min-block-size: 44px; margin-block-start: auto; padding-block-start: 10px; color: var(--on-char); font-weight: 700; font-size: 15px; text-underline-offset: 4px; }
    .weekly-progress { display: none; }
    @media (max-width: 640px) {
      .weekly-list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
      .weekly-list::-webkit-scrollbar { display: none; }
      .week-card { scroll-snap-align: start; }
      .weekly-progress { display: block; }
    }
    @media (pointer: fine) and (max-width: 640px) { .weekly-list { cursor: grab; } }
    .weekly-list.is-drag { cursor: grabbing; scroll-snap-type: none; }

    /* Worlds: a 3-tile bento in the world colors, tilting toward the pointer */
    .bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-block-start: 40px; perspective: 900px; }
    .world-tile { display: flex; flex-direction: column; justify-content: flex-end; min-block-size: 300px; padding: 32px; border-radius: 28px; color: var(--ink-2); text-decoration: none; transition: transform .3s var(--ease); }
    .world-tile h3 { margin: 0; font-size: 48px; font-weight: 800; line-height: 1; }
    .world-tile p { margin: 12px 0 0; font-weight: 500; font-size: 17px; max-width: 28ch; }
    @media (max-width: 860px) { .bento { grid-template-columns: minmax(0, 1fr); } .world-tile { min-block-size: 200px; } }
    .skin-home { background-color: var(--world-home); }
    .skin-creators { background-color: var(--world-creators); }
    .skin-business { background-color: var(--world-business); }
    .skin-none { background-color: var(--band); }
    .world-tile, .guide-skin, .skin-cover { background-image: radial-gradient(circle, var(--dot-light) 1.8px, transparent 2.1px); background-size: 40px 40px; }
    /* World tiles: dark dots on the world colour at the brand token for dark dots on a light background (brand-tokens.json dots.on_light, DESIGN.md section 2: .13). The dark title is needed because the dark-section h3 rule would make it cream on pastel. */
    .world-tile { background-image: radial-gradient(circle, rgba(30, 28, 26, .13) 1.8px, transparent 2.1px); }
    .sec-dark .world-tile h3 { color: var(--ink-2); }

    /* Covers: drag and snap rail with a scaleX progress bar */
    .rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 30%); gap: 16px; margin: 40px 0 0; padding: 0 0 8px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
    .rail::-webkit-scrollbar { display: none; }
    @media (pointer: fine) { .rail { cursor: grab; } }
    .rail.is-drag { cursor: grabbing; scroll-snap-type: none; }
    .rail li { scroll-snap-align: start; }
    .rail a { display: block; border-radius: 18px; overflow: hidden; }
    .rail img { inline-size: 100%; block-size: auto; aspect-ratio: 4 / 5; object-fit: cover; user-select: none; -webkit-user-drag: none; }
    @media (max-width: 640px) { .rail { grid-auto-columns: 78%; } }
    /* Desktop: the five Instagram covers fit the row whole. Before, the fifth was cut and the rail had only 84px to scroll. */
    @media (min-width: 1041px) { .ig-section .rail { grid-auto-columns: calc((100% - 4 * 16px) / 5); cursor: auto; } }
    .rail-progress[hidden] { display: none; }
    .rail-progress { block-size: 3px; margin-block-start: 20px; border-radius: 3px; background: var(--line-dark); overflow: hidden; }
    .sec-light .rail-progress { background: var(--line); } .sec-light .rail-progress i { background: var(--accent); }
    .rail-progress i { display: block; block-size: 100%; background: var(--orange-light); transform-origin: right; transform: scaleX(.3); }

    /* Guides on the home page: a world skin in place of the old illustration */
    .guide-skin { display: flex; justify-content: space-between; align-items: flex-start; aspect-ratio: 8 / 5; padding: 18px; border-radius: 18px; }
    /* Guides on the home page: a notebook sheet with a tab per world (after the "Notebook Tabs" pattern). The chosen tab is
       joined to the sheet and the sheet takes its colour. Each guide is one row: number, title, one line, world, arrow. */
    .binder { --sheet: var(--card-bg); margin-block-start: 44px; }
    .binder[data-world="home"] { --sheet: var(--world-home); }
    .binder[data-world="creators"] { --sheet: var(--world-creators); }
    .binder[data-world="business"] { --sheet: var(--world-business); }
    .binder-tabs { display: flex; gap: 6px; padding-inline: 36px; }
    .binder-tabs[hidden] { display: none; }
    .binder-tab { position: relative; min-block-size: 46px; padding: 0 18px; border: var(--outline); border-block-end: 0; border-radius: 14px 14px 0 0; background: var(--card-bg); color: var(--ink); font: 700 1rem var(--body); cursor: pointer; transform: translateY(8px); transition: transform .2s var(--ease); }
    .binder-tab.tab-home { background: var(--world-home); }
    .binder-tab.tab-creators { background: var(--world-creators); }
    .binder-tab.tab-business { background: var(--world-business); }
    .binder-tab[aria-pressed="true"] { z-index: 2; transform: translateY(2px); }
    .binder-sheet { position: relative; z-index: 1; padding: 6px clamp(10px, 2.4vw, 28px); border: var(--outline); border-radius: 28px; background: var(--sheet); box-shadow: var(--hard); }
    .g-row[hidden] { display: none; }
    .g-row:not([hidden]) ~ .g-row:not([hidden]) { border-block-start: 1px solid var(--ink); }
    .g-row a { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto 46px; align-items: center; gap: 8px 20px; padding: 24px 8px; color: var(--ink); text-decoration: none; }
    .g-num { font: 700 1.5rem/1 var(--mono); }
    .g-text h3 { margin: 0; font-size: clamp(1.3rem, 2.2vw, 1.75rem); font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
    .g-text p { max-inline-size: 62ch; margin: 6px 0 0; color: var(--ink); font-size: 1rem; line-height: 1.55; }
    .g-meta { display: flex; align-items: center; gap: 8px; }
    .g-meta .tag { margin: 0; }
    .g-start { background: var(--label); color: var(--white); }
    .binder:not([data-world=""]) .g-world { display: none; }
    .g-go { display: grid; place-items: center; inline-size: 46px; block-size: 46px; border: var(--outline); border-radius: 50%; background: var(--card-bg); font-size: 1.15rem; transition: transform .25s var(--ease); }
    @media (hover: hover) and (pointer: fine) { .g-row a:hover .g-go { background: var(--ink); color: var(--paper); transform: translateX(-6px); } }
    .binder.is-in .g-row:not([hidden]) { animation: list-in .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 50ms); }
    @media (max-width: 640px) {
      .binder-tabs { gap: 4px; padding-inline: 24px 8px; }
      .binder-tab { padding: 0 12px; font-size: .95rem; }
      .g-row a { grid-template-columns: 34px minmax(0, 1fr) 44px; gap: 8px 12px; padding: 20px 4px; }
      .g-num { font-size: 1.15rem; align-self: start; padding-block-start: 5px; }
      .g-meta { grid-column: 2; grid-row: 2; }
      .g-go { grid-row: 1 / span 2; grid-column: 3; inline-size: 44px; block-size: 44px; }
    }
    .skin-chip { display: inline-flex; align-items: center; min-block-size: 30px; padding: 0 12px; border-radius: 999px; background: var(--paper); color: var(--ink-2); font-weight: 700; font-size: 15px; text-decoration: none; }
    .skin-kind { font-weight: 700; font-size: 15px; color: var(--ink-2); }
    .guide-card .sticker { inset-inline-start: auto; inset-inline-end: 12px; }

    /* Demo and closing on charcoal */
    .sec-dark .demo-intro > p:last-child, .sec-dark .assistant-note li { color: var(--on-char); }
    .sec-dark .assistant-note + .assistant-note { border-color: var(--line-dark); }
    .sec-dark .assistant-note li::marker { color: var(--orange-light); }
    .demo-section.sec-dark .demo-tab { border-color: var(--line-dark); background: transparent; color: var(--on-char); }
    .demo-section.sec-dark .demo-tab[aria-selected="true"] { background: var(--on-char); color: var(--ink-2); border-color: var(--on-char); }
    @media (hover: hover) and (pointer: fine) { .demo-section.sec-dark .demo-tab:hover { background: var(--card-dark); color: var(--on-char); } .demo-section.sec-dark .demo-tab[aria-selected="true"]:hover { background: var(--on-char); color: var(--ink-2); } }
    .demo-shell { box-shadow: none; }
    .closing.sec-dark { text-align: center; }
    .closing.sec-dark h2 { color: var(--on-char); font-size: clamp(3rem, 7vw, 6rem); }

    /* 404: a sleeping Trio, the one place outside the hero */
    .notfound-trio { display: block; inline-size: 140px; margin-block-end: 8px; }

    /* Guide cover in a world skin (replaces the old illustration) */
    .skin-cover { margin-block: 16px 40px; padding: clamp(28px, 5vw, 56px); border-radius: 28px; color: var(--ink-2); }
    .skin-meta { display: flex; align-items: center; gap: 12px; margin: 0; }
    .skin-meta time { font-size: 15px; }
    .skin-title { margin: 20px 0 0; max-width: 18ch; font-size: clamp(1.75rem, 7vw, 4.4rem); font-weight: 800; line-height: 1.06; letter-spacing: -1px; color: var(--ink-2); overflow-wrap: normal; }
    .skin-title .en, .nw { white-space: nowrap; }
    .skin-lede { margin: 20px 0 0; max-width: 44ch; font-size: clamp(18px, 2vw, 21px); font-weight: 500; }

    @media (prefers-reduced-motion: reduce) {
      .js .hero3 .w, .js .slab, .js .hero-trio, .js .reveal { opacity: 1 !important; filter: none !important; transform: none !important; animation: none !important; }
      .floors.is-3d { transition: none !important; }
      .is-3d .slab { visibility: visible !important; }
      .slide-ind, .world-tile, .recent svg, .rail-progress i, .world-filter button, .tip-list.is-in li, .binder-tab, .g-go, .binder.is-in .g-row { transition: none !important; animation: none !important; }
    }
    html.a11y-reduce-motion .hero3 .w, html.a11y-reduce-motion .slab, html.a11y-reduce-motion .hero-trio, html.a11y-reduce-motion .reveal { opacity: 1 !important; filter: none !important; transform: none !important; animation: none !important; }
    html.a11y-reduce-motion .is-3d .slab { visibility: visible !important; }
    html.a11y-reduce-motion .floors.is-3d { transition: none !important; }
    html.a11y-reduce-motion .tip-list.is-in li, html.a11y-reduce-motion .binder.is-in .g-row { animation: none !important; }

    /* ===== v3 guide template ===== */
    .readbar { display: none; }
    .js .readbar { display: block; position: fixed; z-index: 40; inset-block-start: 0; inset-inline: 0; block-size: 4px; background: var(--accent); transform: scaleX(0); transform-origin: right; pointer-events: none; }
    .gwrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 64px; align-items: start; }
    @media (min-width: 960px) { .gwrap { grid-template-columns: minmax(0, 1fr) 240px; } }
    .toc { display: none; }
    @media (min-width: 960px) { .toc { display: block; position: sticky; inset-block-start: 96px; padding-block-start: 8px; } }
    .toc-title { margin: 0 0 12px; font-weight: 700; font-size: 15px; }
    .toc-list { position: relative; border-inline-start: 2px solid var(--line); }
    .toc ol { margin: 0; padding: 0; list-style: none; }
    .toc a { display: block; padding: 8px 16px; font-size: 15px; font-weight: 500; line-height: 1.35; text-decoration: none; color: var(--ink); }
    .toc a.on { color: var(--label); font-weight: 700; }
    .toc-mk { display: none; }
    .js .toc-mk { display: block; position: absolute; inset-inline-start: -2px; inset-block-start: 0; inline-size: 2px; block-size: 0; background: var(--label); transition: transform .35s var(--ease); }
    .guide-body.prose { max-width: 66ch; font-size: 19px; line-height: 1.75; }
    .guide-body.prose p, .guide-body.prose li { font-size: 19px; }
    .guide-body.prose h2 { margin: 72px 0 16px; font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1.15; scroll-margin-block-start: 96px; }
    .guide-body.prose > h2:first-child { margin-block-start: 0; }
    .guide-body.prose .big { margin: 0 0 32px; font-size: clamp(1.9rem, 3.4vw, 2.8rem); font-weight: 800; line-height: 1.2; text-wrap: balance; }
    .js .big .wd { opacity: .18; transition: opacity .2s linear; }
    .js .big .wd.lit { opacity: 1; }
    /* prompt block */
    .guide-body .code3 { margin: 28px 0; border-radius: 18px; background: var(--charcoal); color: var(--on-char); overflow: hidden; }
    .code-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; padding-inline-start: 20px; border-block-end: 1px solid var(--line-dark); }
    .code-top > span { font-weight: 700; font-size: 16px; }
    .code3 .copy-btn { min-block-size: 40px; border-color: var(--line-dark); background: var(--card-dark); color: var(--on-char); box-shadow: none; }
    @media (hover: hover) and (pointer: fine) { .code3 .copy-btn:not(.is-copied):hover { background: var(--on-char); color: var(--ink-2); } }
    .code-clip { position: relative; }
    .guide-body .code3 pre { margin: 0; padding: 20px; border: 0; border-radius: 0; background: none; color: var(--on-char); font: 500 14px/1.7 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; overflow: visible; }
    .code3.is-collapsed .code-clip { max-block-size: 340px; overflow: hidden; }
    .code3.is-collapsed .code-clip::after { content: ""; position: absolute; inset: auto 0 0; block-size: 120px; background: linear-gradient(transparent, var(--charcoal)); pointer-events: none; }
    .code-more { display: block; inline-size: 100%; min-block-size: 52px; border: 0; border-block-start: 1px solid var(--line-dark); background: transparent; color: var(--orange-light); font: 700 16px var(--body); cursor: pointer; }
    .code-more[hidden] { display: none; }
    @media (hover: hover) and (pointer: fine) { .code-more:hover { background: var(--card-dark); } }
    .code3 .copy-status:empty { display: none; }
    .code3 .copy-status { margin: 0; padding: 8px 20px; }
    .guide-body pre.path { display: inline-block; margin: 4px 0 16px; padding: 8px 12px; border: 0; border-radius: 12px; background: var(--white); color: var(--ink); font: 500 15px/1.5 var(--mono); white-space: pre-wrap; }
    /* tabs */
    .tabs3 { margin: 28px 0; }
    .tablist3, .seg3 { position: relative; display: none; flex-wrap: wrap; padding: 4px; border-radius: 999px; background: var(--glass-dark); }
    .js .tablist3, .js .seg3 { display: inline-flex; }
    .tablist3 button, .seg3 button { position: relative; z-index: 1; min-block-size: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: 700 15px var(--body); cursor: pointer; }
    .panel3 { margin-block-start: 16px; padding: 24px; border-radius: 18px; background: var(--white); }
    .js .tabs3 .panel3 { animation: v3-fade .35s var(--ease); }
    @keyframes v3-fade { from { opacity: 0; transform: translateY(6px); } }
    .panel3 > :last-child, .panel3 p:last-child { margin-block-end: 0; }
    .panel3 pre.path { background: var(--paper); }
    .panel-label { display: block; margin: 0 0 8px; font-weight: 800; }
    .js .panel-label { display: none; }
    /* stacking cards */
    .stack3 { display: grid; gap: 24px; margin: 32px 0; padding-block-end: 24px; }
    .band3 { position: sticky; inset-block-start: 96px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: start; min-block-size: 200px; padding: 32px; border-radius: 28px; color: var(--ink-2); box-shadow: 0 -6px 24px var(--shadow-s); }
    .band3:nth-child(2) { inset-block-start: 116px; } .band3:nth-child(3) { inset-block-start: 136px; } .band3:nth-child(4) { inset-block-start: 156px; }
    .band3 .sc { font-family: var(--mono); font-weight: 700; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.15; white-space: nowrap; }
    .guide-body .band3 h3 { margin: 0; font-size: 24px; line-height: 1.25; color: inherit; }
    .guide-body .band3 p { margin: 8px 0 0; }
    .band3.b1 { background: var(--floor-2); } .band3.b2 { background: var(--floor-1); } .band3.b3 { background: var(--floor-3); } .band3.b4 { background: var(--charcoal); color: var(--on-char); }
    @media (max-width: 640px) { .band3 { grid-template-columns: minmax(0, 1fr); gap: 12px; } }
    /* question cards */
    .guide-body ol.qs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 28px 0; counter-reset: q; }
    @media (max-width: 640px) { .guide-body ol.qs { grid-template-columns: minmax(0, 1fr); } }
    .guide-body ol.qs li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; margin: 0; padding: 20px; border-radius: 18px; background: var(--white); font-size: 17px; line-height: 1.5; counter-increment: q; transition: transform .25s var(--ease); }
    .guide-body ol.qs li::before { content: counter(q); position: static; inline-size: auto; text-align: start; font: 700 22px/1.3 var(--mono); color: var(--label); }
    .guide-body ol.qs li b { display: block; font-weight: 800; }
    .guide-body ol.qs li.key { background: var(--ink); color: var(--paper); }
    .guide-body ol.qs li.key::before { color: var(--orange-light); }
    @media (hover: hover) and (pointer: fine) { .guide-body ol.qs li:hover { transform: translateY(-3px); } }
    /* mistakes */
    .guide-body ul.mist { margin: 24px 0; padding: 0; list-style: none; border-block-start: 1px solid var(--line); }
    .guide-body ul.mist li { margin: 0; padding: 20px 0; border-block-end: 1px solid var(--line); }
    .guide-body ul.mist b { font-weight: 800; }
    /* closing block */
    .guide-body .try { margin: 56px 0 0; padding: 32px; border-radius: 28px; background: var(--label); color: var(--white); }
    .guide-body .try h2 { margin: 0 0 12px; color: var(--white); font-size: clamp(1.8rem, 3vw, 2.4rem); }
    .guide-body .try p { margin: 0 0 12px; color: var(--white); }
    .guide-body .try p:last-child { margin: 0; }
    .guide-body .try a { color: var(--white); }
    .guide-body .article-source { margin-block-start: 28px; }
    .guide-body .try :focus-visible { outline-color: var(--white); }
    /* related row inside the charcoal closing */
    .related3 { margin-block-end: clamp(64px, 8vw, 96px); text-align: start; }
    .related3 h2 { margin: 0; font-size: clamp(2.2rem, 4vw, 3.2rem); }
    .rel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-block-start: 32px; }
    @media (max-width: 860px) { .rel-grid { grid-template-columns: minmax(0, 1fr); } }
    .rel { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-block-size: 180px; padding: 28px; border-radius: 28px; border: 1px solid var(--line-dark); background: var(--card-dark); color: var(--on-char); text-decoration: none; transition: transform .3s var(--ease); }
    .rel h3 { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.3; color: var(--on-char); }
    .rel-meta { display: flex; gap: 16px; font-size: 14px; }
    @media (hover: hover) and (pointer: fine) { .rel:hover { transform: translateY(-6px); border-color: var(--orange-light); } }
    /* before / after demo */
    .demo3 { margin: 0 0 56px; padding: 28px; border-radius: 28px; background-color: var(--charcoal); color: var(--on-char); background-image: radial-gradient(circle, var(--dot-dark) 1.3px, transparent 1.6px); background-size: 40px 40px; }
    .demo3-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
    .demo3-top small { font-weight: 500; font-size: 15px; }
    .seg3 { background: var(--card-dark); border: 1px solid var(--line-dark); }
    .seg3 button { color: var(--on-char); }
    .seg3 button[aria-selected="true"] { color: var(--ink-2); }
    .seg3 .slide-ind { background: var(--on-char); box-shadow: none; }
    .bubbles { display: grid; gap: 12px; max-inline-size: 640px; margin-block-start: 24px; }
    .bub { margin: 0; max-inline-size: 90%; padding: 16px 20px; border-radius: 20px; font-size: 18px; line-height: 1.55; }
    .bub.q { justify-self: start; background: var(--orange-light); color: var(--ink-2); border-end-start-radius: 6px; }
    .bub.a { justify-self: end; background: var(--card-dark); border: 1px solid var(--line-dark); border-end-end-radius: 6px; }
    .bub-tag { display: inline-block; margin-block-end: 8px; padding: 2px 8px; border-radius: 6px; background: var(--lime); color: var(--ink-2); font: 500 14px var(--mono); }
    .bub.a .bub-tag + span { display: block; }
    .js .bub.a { transition: opacity .35s var(--ease), transform .35s var(--ease); }
    .js .bub.a.swap { opacity: 0; transform: translateY(8px); }
    @media (prefers-reduced-motion: reduce) {
      .js .big .wd { opacity: 1; transition: none; }
      .toc-mk, .toc a, .js .tabs3 .panel3, .js .bub.a, .band3, .rel, .guide-body ol.qs li { transition: none !important; animation: none !important; }
    }
    html.a11y-reduce-motion .big .wd { opacity: 1 !important; }

    /* ===== v3 prompts page ===== */
    .page-intro.sec-light { padding-block: 24px 56px !important; }
    .finder { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-block-start: 32px; }
    .finder[hidden] { display: none; }
    .finder-search { flex: 1 1 320px; display: flex; align-items: center; gap: 12px; min-block-size: 56px; padding: 0 20px; border-radius: 999px; background: var(--white); box-shadow: 0 1px 0 var(--line), 0 8px 24px var(--shadow-s); }
    .finder-search svg { inline-size: 20px; block-size: 20px; flex: none; }
    .finder-search input { flex: 1; min-inline-size: 0; border: 0; background: transparent; color: var(--ink); font: 600 18px var(--body); outline: 0; }
    .finder-search:focus-within { box-shadow: 0 0 0 3px var(--accent); }
    .finder-filter button { min-block-size: 44px; padding: 0 20px; }
    [data-group-section][hidden] { display: none; }
    .finder-empty { margin-block: 32px; font-size: 19px; font-weight: 600; }
    .finder-empty[hidden] { display: none; }
    .agents3 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-block-start: 40px; }
    @media (max-width: 860px) { .agents3 { grid-template-columns: minmax(0, 1fr); } }
    .prompt-card.agent3 { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 16px; padding: 32px; border-radius: 28px; border: 1px solid var(--line-dark); box-shadow: none; color: var(--on-char);
      background-color: var(--card-dark); background-image: radial-gradient(380px circle at var(--mx, 80%) var(--my, 0%), var(--spot), transparent 60%); }
    .agent3 h3 { margin: 0; font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 800; line-height: 1.15; }
    .agent3 .prompt-text { margin: 0; color: var(--on-char); font-size: 17px; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .agent3-row { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: auto; }
    .agent3 .copy-status:empty, .pm-card .copy-status:empty { display: none; }
    .agent3 .btn-secondary { background: transparent; color: var(--on-char); border-color: var(--line-dark); box-shadow: none; }
    .shorts3 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-block-start: 40px; }
    @media (max-width: 1000px) { .shorts3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 520px) { .shorts3 { grid-template-columns: minmax(0, 1fr); } }
    .shortcut-item.short3 { display: flex; flex-direction: column; gap: 10px; min-block-size: 220px; padding: 24px; border: 0; border-radius: 28px; background: var(--white); box-shadow: 0 1px 0 var(--line); transition: transform .3s var(--ease); }
    @media (hover: hover) and (pointer: fine) { .shortcut-item.short3:hover { transform: translateY(-6px); box-shadow: 0 18px 40px var(--shadow-m); } }
    .short3 .shortcut-command { align-self: flex-end; padding: 4px 12px; border: 0; border-radius: 12px; color: var(--ink-2); font: 700 16px var(--mono); }
    .tint-sun .shortcut-command { background: var(--floor-1); } .tint-lime .shortcut-command { background: var(--floor-2); } .tint-lilac .shortcut-command { background: var(--floor-3); } .tint-cream .shortcut-command { background: var(--paper); }
    .short3 h3 { margin: auto 0 0; font-size: 22px; font-weight: 800; }
    .short3 .shortcut-description { margin: 0; font-size: 16px; line-height: 1.5; }
    .short3 .shortcut-copy { align-self: flex-start; }
    .short3 .shortcut-status:empty { display: none; }
    .shortcut-follow { margin: 0 0 12px; }
    dialog.pm-dialog { inline-size: min(720px, calc(100% - 32px)); margin: 8svh auto auto; padding: 0; border: 1px solid var(--glass-edge); border-radius: 28px; color: var(--ink); box-shadow: 0 30px 80px var(--shadow-m);
      background: var(--glass-strong); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); }
    dialog.pm-dialog::backdrop { background: var(--scrim); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
    dialog.pm-dialog[open] { animation: pal-pop .47s var(--spring-soft); }
    .prompt-card.pm-card { padding: 32px; border: 0; border-radius: 0; background: none; box-shadow: none; }
    .pm-card h2 { margin: 0; font-size: 30px; line-height: 1.15; }
    .pm-card .prompt-text { margin: 16px 0 24px; font-size: 18px; line-height: 1.75; }
    @media (prefers-reduced-motion: reduce) { .shortcut-item.short3 { transition: none !important; animation: none !important; } }
    .agent3-row .btn { min-block-size: 44px; padding-block: 0; }
    .short3 .shortcut-copy { position: static; inset: auto; transform: none; width: auto; min-width: 0; padding-inline: 16px; min-block-size: 44px; margin-block-start: 8px; }
    .pm-card .prompt-text, .pm-card h2 { color: var(--ink); }
    .short3 .shortcut-description { color: var(--ink); }
    @media (prefers-reduced-transparency: reduce) {
      .gnav-bar, .gnav-sheet, .mini-nav, .js .dock, dialog.search-dialog, dialog.pm-dialog { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--paper); }
      dialog.search-dialog::backdrop, dialog.pm-dialog::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
    }

    /* ===================== v4 (11.11.2026): the same look, working better and a little more alive =====================
       Nothing here restyles the v3 page; it adds the elevator, press feedback, chrome that steps aside, and living dots. */

    /* Press feedback on every pressable (scale, so it never fights a tilt or a hover lift): quick down, slower release */
    .btn:active { transition-duration: 60ms; }
    @media (prefers-reduced-motion: no-preference) {
      html:not(.a11y-reduce-motion) :is(.g-row a, .rail a, .recent a, .dock a, .dock button, .gnav-links a, .gnav-key, .gnav-menu, .a11y-launcher) { transition: scale .2s var(--ease); }
      html:not(.a11y-reduce-motion) summary { transition: color .25s ease, scale .2s var(--ease); }
      html:not(.a11y-reduce-motion) :is(.world-tile, .rel) { transition: transform .3s var(--ease), scale .2s var(--ease); }
      html:not(.a11y-reduce-motion) .binder-tab { transition: transform .2s var(--ease), scale .2s var(--ease); }
      html:not(.a11y-reduce-motion) .more-card { transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s ease, scale .2s var(--ease); }
      html:not(.a11y-reduce-motion) :is(.g-row a, .world-tile, .rel, .rail a, .recent a, .binder-tab, .dock a, .dock button, .gnav-links a, .gnav-key, .gnav-menu, .a11y-launcher, .more-card, summary):active { scale: .97; transition-duration: 80ms; }
    }

    /* The menu sheet grows from its button's corner (top left in RTL) */
    .gnav-sheet { transform-origin: top left; }

    /* Craft: one arrow (the SVG of the latest-tip list) everywhere; ↗ only for a link that leaves the site */
    .g-go svg { inline-size: 20px; block-size: 20px; }
    .more-card strong::after { content: none; }
    .more-card strong svg { inline-size: .6em; block-size: .6em; margin-inline-start: .3em; color: var(--label); vertical-align: .04em; }
    /* tip page: the related list follows the source buttons without a dead band */
    .article .related { padding-block: 0; }
    /* prompts page: the two buttons on an agent card are one size */
    .agent3-row { align-items: center; }
    .agent3-row .btn { margin: 0; align-self: auto; }
    /* Hebrew labels with mono digits (was WEEK / TIP / WORLD / GUIDE) */
    .weekly-range { font-size: 15px; font-weight: 600; letter-spacing: 0; }
    .weekly-range .mono, .article-meta .mono { letter-spacing: .02em; }

    /* Hero slabs are elevator buttons: hover or focus pulls a floor toward you; Trio rides floor 3 */
    a.slab { text-decoration: none; }
    .slab, .hero-trio { transition: translate .25s var(--ease); }
    .is-3d .slab:focus-visible { translate: 0 -4px 14px; }
    .floors:not(.is-3d) .slab:focus-visible { translate: 0 -4px; }
    .is-3d:has(.slab-3:focus-visible) .hero-trio { translate: 0 -14px -7px; }
    @media (hover: hover) and (pointer: fine) {
      .is-3d .slab:hover { translate: 0 -4px 14px; }
      .floors:not(.is-3d) .slab:hover { translate: 0 -4px; }
      .is-3d:has(.slab-3:hover) .hero-trio { translate: 0 -14px -7px; }
      .floors:not(.is-3d):has(.slab-3:hover) .hero-trio { translate: 0 -4px; }
    }

    /* Arriving at a floor: its number chip gives one small ding */
    .floor-n.ding { animation: v4-ding .6s var(--spring); }
    @keyframes v4-ding { from { scale: .9; } }

    /* The elevator panel: 1 2 3 in the floor colours, digits in mono. Desktop: the far left edge, outside the column.
       Phone: inside the dock row, next to the accessibility button. Hidden while the hero slabs are on screen. */
    .lift { display: none; }
    .lift[hidden] { display: none !important; }
    .js .lift { position: fixed; z-index: 29; display: flex; gap: 6px; opacity: 0; pointer-events: none; translate: -8px 0;
      transition: opacity .25s var(--ease), translate .47s var(--spring-soft); }
    .lift.is-on { opacity: 1; pointer-events: auto; translate: none; }
    .lift a { position: relative; display: grid; place-items: center; inline-size: 40px; block-size: 40px; overflow: hidden; border: 2px solid transparent; border-radius: 12px; color: var(--ink-2); font: 700 15px/1 var(--mono); text-decoration: none; }
    .lift-1 { background: var(--floor-1); } .lift-2 { background: var(--floor-2); } .lift-3 { background: var(--floor-3); }
    .lift-d { display: block; opacity: .55; }
    .lift a[aria-current] { border-color: var(--ink); box-shadow: var(--hard-sm); }
    .lift a[aria-current] .lift-d { opacity: 1; animation: lift-roll .25s var(--ease); }
    @keyframes lift-roll { from { transform: translateY(calc(var(--dir, 1) * 90%)); opacity: 0; } }
    @media (hover: hover) and (pointer: fine) { .lift a:hover { border-color: var(--ink); } .lift a:hover .lift-d { opacity: 1; } }
    @media (min-width: 861px) {
      .js .lift { inset-inline-end: 16px; inset-block-start: calc(50% - 86px); flex-direction: column-reverse; padding: 6px; border-radius: 18px;
        background: var(--glass); border: 1px solid var(--glass-edge); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); box-shadow: 0 10px 30px var(--shadow-m); }
    }
    /* Desktop chrome steps aside: site.js marks the mini nav or the elevator .is-over while text is under it */
    .mini-nav.is-over:not(:focus-within), .lift.is-over:not(:focus-within) { opacity: 0; pointer-events: none; }

    /* Phone: the dock is the only floating bar. The mini nav stays away, the accessibility button sits in the dock's
       own row (inline end), and on the home page the elevator joins it there. */
    @media (max-width: 860px) {
      .js .mini-nav { display: none; }
      .js .dock { left: 14px; right: 14px; max-inline-size: 420px; padding-inline-end: 58px; }
      .js .dock.has-lift { padding-inline-end: 146px; }
      .js .a11y-launcher { left: calc(100% - 14px - min(100% - 28px, 420px) + 7px); }
      .js .lift { inset-block-end: calc(max(14px, env(safe-area-inset-bottom)) + 9px); left: calc(100% - 14px - min(100% - 28px, 420px) + 57px); z-index: 46; gap: 2px; translate: 0 6px; }
      .lift.is-on { translate: none; }
      .lift a { inline-size: 26px; block-size: 44px; border-radius: 10px; font-size: 14px; }
      .lift a[aria-current] { box-shadow: none; }
    }

    /* The copy toast: a small Trio stands on it and is happy for a moment */
    .toast .trio-copy { position: absolute; inset-inline-start: 16px; inset-block-end: calc(100% - 9px); inline-size: 44px; }
    .toast .toast-text:empty { display: none; }

    /* Living dots: near a fine pointer, the section's dot grid gets a little stronger (--dot-x/--dot-y, the section's own
       pointer position; named apart from the cards' --mx/--my so a card's glow never inherits it). One layer under the content
       (text on its paper halo stays clear), only with motion and transparency allowed. */
    @media (pointer: fine) and (prefers-reduced-motion: no-preference) and (prefers-reduced-transparency: no-preference) {
      main > .sec-light, main > .sec-dark { position: relative; isolation: isolate; }
      main > .sec-light::after, main > .sec-dark::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-size: 40px 40px; opacity: 0; transition: opacity .4s var(--ease);
        -webkit-mask-image: radial-gradient(200px circle at var(--dot-x, -400px) var(--dot-y, -400px), #000, transparent 72%); mask-image: radial-gradient(200px circle at var(--dot-x, -400px) var(--dot-y, -400px), #000, transparent 72%); }
      main > .sec-light::after { background-image: radial-gradient(circle, rgba(30, 28, 26, .6) 1.8px, transparent 2.1px); }
      main > .sec-dark::after { background-image: radial-gradient(circle, rgba(241, 236, 227, .36) 1.3px, transparent 1.6px); }
      main > .dots-on::after { opacity: 1; }
      html.a11y-reduce-motion main > .dots-on::after, html.a11y-high-contrast main > .dots-on::after { opacity: 0; }
    }

    /* Reduced motion (the system setting or the site's own switch): short opacity fades, no movement */
    @media (prefers-reduced-motion: reduce) {
      .gnav-sheet, .mini-nav, .toast, .toast.is-on, .js .lift { transform: none !important; translate: none !important; transition: opacity .15s linear !important; }
      dialog.search-dialog[open], dialog.pm-dialog[open] { animation: v4-fade .15s linear !important; }
      .js.go .hero3-grid { animation: v4-fade .3s ease both !important; }
      .js.go .hero-trio .mascot, .lift a[aria-current] .lift-d { animation: none; }
      .slab, .hero-trio { transition: none; translate: none !important; }
    }
    html.a11y-reduce-motion :is(.gnav-sheet, .mini-nav, .toast, .toast.is-on, .lift) { transform: none !important; translate: none !important; transition: opacity .15s linear !important; }
    html.a11y-reduce-motion :is(dialog.search-dialog, dialog.pm-dialog)[open] { animation: v4-fade .15s linear !important; }
    html.a11y-reduce-motion :is(.hero-trio .mascot, .lift-d, .floor-n) { animation: none !important; }
    html.a11y-reduce-motion :is(.slab, .hero-trio) { transition: none; translate: none !important; }
    html.a11y-reduce-motion .is-3d .hero-trio { translate: 0 -10px -21px !important; }
    @media (prefers-reduced-motion: reduce) { .is-3d .hero-trio { translate: 0 -10px -21px !important; } }