/* Landing hero chrome + Atticus phone component */

.hero.hero-cinematic {
    min-height: 100vh;
    padding-top: 108px;
    padding-bottom: 56px;
    color: #f4ecdc;
}
.hero.hero-cinematic::before { display: none; }
.hero-atmosphere {
    position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #1a211c;
}
.hero-atmosphere img,
.hero-atmosphere video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: 62% 50%;
}
.hero-atmosphere img { animation: atmosphere-drift 28s ease-in-out infinite alternate; }
.hero-atmosphere video { display: none; }
.hero-atmosphere.has-video video { display: block; }
.hero-atmosphere.has-video img { display: none; animation: none; }
.hero-scrim {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        linear-gradient(90deg, rgba(14, 18, 15, 0.72) 0%, rgba(14, 18, 15, 0.38) 42%, rgba(14, 18, 15, 0.18) 100%),
        linear-gradient(180deg, rgba(14, 18, 15, 0.35) 0%, transparent 28%, rgba(14, 18, 15, 0.28) 100%);
}
.hero.hero-cinematic > .container { position: relative; z-index: 2; }
.hero.hero-cinematic .hero-content { gap: 48px; min-height: calc(100vh - 164px); }
.hero.hero-cinematic .hero-description { color: rgba(244, 236, 220, 0.9); max-width: 680px; }
.hero.hero-cinematic .hero-description .text-accent { color: #d4b072; }
.hero.hero-cinematic .rotator-word { color: #edcf8f; font-weight: 600; }
.hero.hero-cinematic .hero-note { color: rgba(244, 236, 220, 0.8); }
.hero.hero-cinematic .hero-badge { background: rgba(244, 236, 220, 0.12); color: #f4ecdc; }
.hero.hero-cinematic .btn-primary { background: #f4ecdc; color: #1f3329; }
.hero.hero-cinematic .btn-primary:hover { background: #fff8ea; color: #1f3329; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28); }
.hero.hero-cinematic .hero-visual { display: flex; justify-content: center; align-items: center; }
.header:not(.scrolled) .logo-ink { display: none; }
.header.scrolled .logo-cream { display: none; }
.header:not(.scrolled) .nav-links a { color: rgba(244, 236, 220, 0.78); }
.header:not(.scrolled) .nav-links a:hover,
.header:not(.scrolled) .nav-links a.active { color: #f4ecdc; }
.header:not(.scrolled) .nav-links a::after { background: #f4ecdc; }
.header:not(.scrolled) .btn-primary { background: #f4ecdc; color: #1f3329; }
.header:not(.scrolled) .mobile-menu-btn span { background: #f4ecdc; }
@keyframes atmosphere-drift { from { transform: scale(1); } to { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .hero-atmosphere img { animation: none; } }

/* Smaller laptops: keep the two-column hero, tighten the gap so copy still fits three lines. */
@media (max-width: 1280px) {
    .hero.hero-cinematic .hero-content { gap: 32px; }
    .ahp-stage { --w: min(clamp(300px, 26vw, 380px), calc((100vh - 88px) / 2.35)); }
}

/* Tablet and below: copy first, phone scales down, no 100vh stretch gap. */
@media (max-width: 1100px) {
    .hero.hero-cinematic {
        min-height: 0;
        padding-top: 96px;
        padding-bottom: 40px;
    }
    .hero.hero-cinematic .hero-content {
        grid-template-columns: 1fr;
        gap: 28px;
        min-height: 0;
        align-content: start;
    }
    .hero.hero-cinematic .hero-content > * { min-width: 0; }
    .hero.hero-cinematic .hero-text { text-align: center; }
    .hero.hero-cinematic .hero-description { max-width: min(42rem, 100%); margin-left: auto; margin-right: auto; }
    .hero.hero-cinematic .hero-buttons { justify-content: center; }
    .hero.hero-cinematic .hero-visual { order: 0; }
    .ahp-stage {
        --w: clamp(240px, 42vw, 320px);
        width: calc(var(--w) + 36px);
        min-height: calc(var(--w) * 2.24 + 32px);
    }
}

@media (max-width: 760px) {
    .hero.hero-cinematic { padding-top: 88px; padding-bottom: 32px; }
    .hero.hero-cinematic > .container { max-width: 100%; }
    .hero.hero-cinematic .hero-content { width: 100%; max-width: 100%; }
    .hero.hero-cinematic h1 { font-size: clamp(2.75rem, 13vw, 3.5rem); line-height: 1.06; }
    .hero.hero-cinematic .rotator-word { display: block; }
    .hero.hero-cinematic .hero-text {
        width: 100%;
        max-width: calc(100vw - 48px);
        padding: 0;
        box-sizing: border-box;
    }
    .hero.hero-cinematic .hero-description,
    .hero.hero-cinematic .hero-note {
        width: 100%;
        max-width: calc(100vw - 48px);
        box-sizing: border-box;
        overflow-wrap: break-word;
        font-size: 1.0625rem;
    }
    .hero.hero-cinematic .hero-description br { display: none; }
    .ahp-stage {
        --w: clamp(220px, 64vw, 300px);
        width: calc(var(--w) + 24px);
        min-height: calc(var(--w) * 2.24 + 24px);
    }
}

/* Below-fold: same cream-on-forest as the hero header */
.header.scrolled {
    background: rgba(244, 236, 220, 0.92);
}

.books-strip {
    border-top: none;
}

.how-it-works .section-header h2,
.for-authors-text h2 {
    color: #f4ecdc;
}

.how-it-works .section-header p,
.for-authors-text p,
.how-it-works .step p {
    color: rgba(244, 236, 220, 0.72);
}

.how-it-works .step h3 {
    color: #f4ecdc;
}

.for-authors-cta .btn-accent {
    background: #f4ecdc;
    color: #1f3329;
}

.for-authors-cta .btn-accent:hover {
    background: #fff8ea;
    color: #1f3329;
}

.footer {
    background: #1a211c;
}

.prompt-card {
    background: #f4ecdc;
}

@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll {
        opacity: 1;
        transform: none;
    }
}

/* ATTICUS PHONE — shared component styles. Every class prefixed .ahp-
   Geometry measured off 1320×2868 captures (iPhone 16 Pro Max, 440×956pt):
   1cqw = 1% of screen width, 1cqh = 1% of screen height. */

/* ── stage / device (transparent outside the phone) ─────────────────────── */
.ahp-stage{--w:min(clamp(340px,29vw,440px),calc((100vh - 96px) / 2.3));position:relative;isolation:isolate;display:grid;place-items:center;width:calc(var(--w) + 60px);min-height:calc(var(--w) * 2.24 + 48px);perspective:2000px;font-family:"Merriweather Sans",system-ui,sans-serif}
.ahp-stage *{box-sizing:border-box;margin:0;padding:0}
/* localized forest pillow so the window light does not melt the right rail */
.ahp-stage::before{content:"";position:absolute;z-index:-1;left:4%;top:3%;width:92%;height:94%;border-radius:46% / 40%;background:radial-gradient(ellipse at 54% 44%,rgb(8 18 14 / 86%) 0%,rgb(12 24 18 / 62%) 34%,rgb(14 28 20 / 28%) 58%,transparent 74%);filter:blur(28px);pointer-events:none}
.ahp-ground{position:absolute;z-index:-2;left:8%;bottom:.6%;width:84%;height:12%;border-radius:50%;background:radial-gradient(ellipse,rgb(6 14 11 / 62%) 0 18%,rgb(10 20 16 / 32%) 46%,transparent 76%);filter:blur(18px)}
/* titanium: dark body for separation; sunlight is a thin warm rim on the window-facing right edge */
.ahp-phone{position:relative;width:var(--w);padding:calc(var(--w) * .021);border-radius:calc(var(--w) * .156);transform-style:preserve-3d;background:linear-gradient(90deg,#5e605a 0%,#d4cec0 1.5%,#efe8d8 3.4%,#8e8e86 8%,#3d3f3b 18%,#323430 48%,#2a2c28 82%,#232522 91%,#3a382f 95%,#f2ddb0 97.6%,#e8c98a 99.2%,#4a4638 100%);box-shadow:0 2px 3px rgb(0 0 0 / 30%),0 12px 22px rgb(8 16 12 / 32%),0 36px 70px rgb(8 16 12 / 46%),22px 6px 48px rgb(6 16 12 / 48%),inset 1px 1px 0 rgb(255 255 255 / 42%),inset -1.5px 0 0 rgb(255 230 186 / 62%),inset -1px -1px 0 rgb(0 0 0 / 48%);animation:ahp-breathe 10s ease-in-out infinite}
.ahp-phone::before{content:"";position:absolute;z-index:80;inset:-1px;border-radius:inherit;padding:1.2px;background:linear-gradient(90deg,rgb(255 248 236 / 42%) 0%,rgb(255 255 255 / 10%) 10%,transparent 26%,transparent 78%,rgb(255 228 176 / 55%) 92%,rgb(255 244 214 / 92%) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.ahp-btn{position:absolute;z-index:-1;width:3px;border-radius:3px;background:linear-gradient(#d8d3c8,#5c5d58 18% 82%,#a4a096);box-shadow:0 0 0 1px rgb(0 0 0 / 26%)}
.ahp-btn--a{left:-3px;top:19%;height:5%}.ahp-btn--u{left:-3px;top:27%;height:8%}.ahp-btn--d{left:-3px;top:37%;height:8%}
.ahp-btn--p{right:-3px;top:29%;height:13%;background:linear-gradient(#8a8a82,#3f403c 18% 82%,#6d6d66)}
.ahp-screen{position:relative;container-type:size;width:100%;aspect-ratio:440/956;overflow:hidden;border-radius:calc(var(--w) * .135);background:#f3ebe0;color:#171310;box-shadow:inset 0 0 0 1.5px rgb(0 0 0 / 88%),inset 0 0 0 3px rgb(255 255 255 / 8%),0 0 0 1px rgb(255 255 255 / 18%)}
.ahp-app{position:absolute;inset:0;overflow:hidden;background:#f3ebe0}
.ahp-warm{position:absolute;z-index:60;inset:0;pointer-events:none;background:linear-gradient(200deg,rgb(255 236 197 / 22%),rgb(255 244 224 / 6%) 46%,rgb(255 228 186 / 14%));mix-blend-mode:soft-light}
.ahp-glass{position:absolute;z-index:95;inset:0;pointer-events:none;background:linear-gradient(118deg,rgb(255 255 255 / 9%),transparent 22% 100%);mix-blend-mode:screen}
.ahp-island{position:absolute;z-index:75;top:1.15cqh;left:50%;width:28.4cqw;height:3.8cqh;border-radius:999px;background:#030404;transform:translateX(-50%)}

/* status bar (x-demo only) */
.ahp-status{position:absolute;z-index:70;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;height:5.9cqh;padding:0 5.4cqw 0 5cqw;color:#05080d;font-family:-apple-system,"SF Pro Text",system-ui,sans-serif;font-size:3.9cqw;font-weight:600;letter-spacing:-.01em;pointer-events:none;transition:color 300ms ease}
.ahp-app[data-view="player"] .ahp-status{color:#fff}
.ahp-time{width:28cqw;text-align:center}
.ahp-sicons{display:flex;align-items:center;gap:1.4cqw}
.ahp-sicons svg{height:2.6cqw;width:auto;display:block}
.ahp-stage[data-mode="hero"] .ahp-status{display:none}
.ahp-stage[data-mode="hero"] .ahp-sugg{display:none}

/* ── screens ─────────────────────────────────────────────────────────────── */
.ahp-library,.ahp-chat{position:absolute;inset:0;transform-origin:50% 42%}
.ahp-library{z-index:4;transition:opacity 420ms cubic-bezier(.4,0,.6,1) 60ms,transform 650ms cubic-bezier(.2,.85,.25,1)}
.ahp-app:not([data-view="library"]) .ahp-library{opacity:.55;transform:scale(.955);pointer-events:none}
.ahp-chat{z-index:12;background:#f3ebe0;opacity:0;transform:scale(1.035);pointer-events:none;transition:opacity 420ms ease 40ms,transform 650ms cubic-bezier(.2,.85,.25,1)}
.ahp-app[data-view="chat"] .ahp-chat{opacity:1;transform:none;pointer-events:auto}
.ahp-app:not([data-view="chat"]) .ahp-chat{transition:opacity 320ms ease,transform 0s 320ms}
.ahp-app.returning .ahp-chat{transform:scale(.985);transition:opacity 480ms cubic-bezier(.4,0,.6,1) 60ms,transform 720ms cubic-bezier(.25,.9,.25,1)}
.ahp-app.returning .ahp-library{transition:opacity 480ms cubic-bezier(.4,0,.6,1) 120ms,transform 720ms cubic-bezier(.25,.9,.25,1)}
.ahp-chat.ahp-mute{visibility:hidden}

/* ── library ─────────────────────────────────────────────────────────────── */
.ahp-lhead{position:absolute;top:5.9cqh;left:0;right:0;display:flex;align-items:center;justify-content:space-between;height:6.6cqh;padding:0 5cqw}
.ahp-brand{display:flex;align-items:center;gap:2cqw}
.ahp-mark{width:10cqw;height:10cqw;display:block;object-fit:contain}
.ahp-word{display:block;height:5.8cqw;width:auto}
.ahp-beta{margin-left:.6cqw;padding:.55cqh 1.6cqw;border-radius:1.4cqw;color:#4a90f8;background:#e3eefe;font-size:2.5cqw;font-weight:700;letter-spacing:.04em}
.ahp-tools{display:flex;gap:2.8cqw}
.ahp-tool{display:grid;place-items:center;width:7.3cqw;aspect-ratio:1;border-radius:50%;color:#5f5749;background:#efe6d6}
.ahp-tool svg{width:58%;height:58%}
.ahp-tool--me{overflow:hidden;background:#dfe7f5;box-shadow:0 0 0 .4cqw rgb(15 23 42 / 8%)}
.ahp-tool--me img{width:100%;height:100%;object-fit:cover}
.ahp-h2{position:absolute;left:4.7cqw;font-size:6.36cqw;line-height:1;font-weight:800;letter-spacing:-.035em;color:#0f172a}
.ahp-h2--cr{top:13.9cqh}.ahp-h2--ml{top:64.4cqh}
.ahp-rail{position:absolute;top:18.4cqh;left:0;right:0;display:flex;gap:3.4cqw;padding-left:4.9cqw;overflow:hidden}
.ahp-card{flex:0 0 60cqw;width:60cqw;min-width:0;display:flex;flex-direction:column;height:43.8cqh;padding:2.5cqw 2.7cqw 3.6cqw;border-radius:5.45cqw;color:#fff}
.ahp-card--purple{background:linear-gradient(163deg,#b45fe6 0%,#9046cd 26%,#7229a4 56%,#4d0f74 84%,#3d0a5c 100%);box-shadow:0 12px 26px rgb(61 7 92 / 24%)}
.ahp-card--blue{background:linear-gradient(163deg,#5b9df0 0%,#3f6fd0 34%,#22409e 72%,#152a72 100%);box-shadow:0 12px 26px rgb(21 42 114 / 22%)}
.ahp-card--orange{background:linear-gradient(163deg,#e07a3a 0%,#c4582a 30%,#933a16 66%,#5c2109 100%);box-shadow:0 12px 26px rgb(92 33 9 / 26%)}
.ahp-coverwrap{flex:0 0 54.6cqw;width:54.6cqw;height:54.6cqw;overflow:hidden;border-radius:3.64cqw;background:#fff;transition:background 200ms ease;box-shadow:0 8px 14px rgb(0 0 0 / 36%),0 3px 5px rgb(0 0 0 / 26%)}
.ahp-cover{display:block;width:100%;height:100%;object-fit:cover}
.ahp-coverwrap.ahp-hollow,.ahp-pwrap.ahp-hollow{background:transparent}
.ahp-track{height:.9cqw;margin:5cqw 0 1.8cqw;overflow:hidden;border-radius:999px;background:rgb(255 255 255 / 22%)}
.ahp-track i{display:block;height:100%;border-radius:inherit;background:#fff}
.ahp-plabel{color:rgb(255 255 255 / 88%);font-size:2.5cqw;font-weight:500;letter-spacing:.27cqw}
.ahp-btitle{margin-top:2cqw;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:4.09cqw;line-height:1.2;font-weight:800;letter-spacing:-.02em}
.ahp-bauthor{margin-top:.6cqw;overflow:hidden;color:rgb(255 255 255 / 90%);white-space:nowrap;text-overflow:ellipsis;font-size:3.18cqw;font-weight:400}
.ahp-acts{display:grid;grid-template-columns:1fr 1fr;gap:2.3cqw;margin-top:auto}
.ahp-acts--one{grid-template-columns:1fr}
.ahp-pill{position:relative;display:flex;align-items:center;justify-content:center;gap:1.3cqw;height:8.6cqw;border:0;border-radius:999px;color:#0f172a;background:#fff;font:inherit;font-size:3.18cqw;font-weight:700;letter-spacing:-.01em;box-shadow:0 4px 9px rgb(0 0 0 / 15%)}
.ahp-pill svg{width:2.9cqw;height:2.9cqw}
.ahp-ask{color:#fff;background:#3b82f6;box-shadow:0 4px 12px rgb(59 130 246 / 46%)}
/* one gentle invitation before the tap */
.ahp-ask.ahp-invite{animation:ahp-invite 900ms cubic-bezier(.3,.7,.3,1) 1}
@keyframes ahp-invite{0%,100%{box-shadow:0 4px 12px rgb(59 130 246 / 46%)}45%{box-shadow:0 4px 12px rgb(59 130 246 / 46%),0 0 0 1.6cqw rgb(59 130 246 / 28%)}}
.ahp-grid{position:absolute;top:68.3cqh;left:4.7cqw;right:4.7cqw;display:grid;grid-template-columns:1fr 1fr;gap:4cqw}
.ahp-tile{aspect-ratio:1;overflow:hidden;border-radius:2.73cqw;background:#fff;box-shadow:0 6px 14px rgb(15 23 42 / 12%)}
.ahp-tile img{width:100%;height:100%;object-fit:cover}
.ahp-tabs{position:absolute;z-index:31;left:6.8cqw;right:6.8cqw;bottom:2.6cqh;display:grid;grid-template-columns:repeat(3,1fr);align-items:center;height:5.9cqh;padding:.4cqh 1.4cqw;border-radius:999px;background:rgb(247 239 226 / 86%);box-shadow:0 8px 24px rgb(15 23 42 / 12%),0 0 0 .5px rgb(15 23 42 / 6%);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2)}
.ahp-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35cqh;height:100%;border-radius:999px;color:#2c3646;font-size:2.73cqw;font-weight:500}
.ahp-tab svg{width:5.9cqw;height:5.9cqw}
.ahp-tab.on{color:#3b82f6;background:#d8e7fb;font-weight:600}
/* hero: no tags tab, no mini player — but a full shelf under the rail */
.ahp-stage[data-mode="hero"] .ahp-mini,.ahp-stage[data-mode="hero"] .ahp-tab--tags{display:none}
.ahp-stage[data-mode="hero"] .ahp-tabs{grid-template-columns:1fr 1fr;left:22cqw;right:22cqw}
.ahp-stage[data-mode="hero"] .ahp-h2--cr{top:13.2cqh}
.ahp-stage[data-mode="hero"] .ahp-rail{top:17.8cqh}
.ahp-stage[data-mode="hero"] .ahp-h2--ml{top:65.4cqh}
.ahp-stage[data-mode="hero"] .ahp-grid{top:70.3cqh;bottom:5.1cqh;overflow:hidden;grid-template-columns:repeat(3,1fr);grid-auto-rows:max-content;align-content:start;gap:3cqw}
/* x-demo: the hero's three-up shelf with a partial second row, but the rail is
   1.6cqh shorter to buy the peek back from the mini player, and the shelf runs
   under the mini bar so the clip line is hidden behind it */
.ahp-stage[data-mode="x-demo"] .ahp-h2--cr{top:13.8cqh}
.ahp-stage[data-mode="x-demo"] .ahp-rail{top:18.4cqh}
.ahp-stage[data-mode="x-demo"] .ahp-card{height:43cqh}
.ahp-stage[data-mode="x-demo"] .ahp-h2--ml{top:65cqh}
.ahp-stage[data-mode="x-demo"] .ahp-grid{top:69.8cqh;bottom:0;overflow:hidden;grid-template-columns:repeat(3,1fr);grid-auto-rows:max-content;align-content:start;gap:3cqw}

/* ── mini player (x-demo) ────────────────────────────────────────────────── */
.ahp-mini{position:absolute;z-index:34;left:6.8cqw;right:6.8cqw;bottom:9.7cqh;display:flex;align-items:center;gap:2.6cqw;height:4.9cqh;padding:0 2.4cqw;border-radius:999px;background:rgb(247 239 226 / 86%);box-shadow:0 6px 20px rgb(15 23 42 / 14%),0 0 0 .5px rgb(15 23 42 / 6%);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);transition:opacity 300ms ease,transform 460ms cubic-bezier(.2,.85,.25,1)}
.ahp-app[data-view="player"] .ahp-mini,.ahp-app[data-view="chat"] .ahp-mini{opacity:0;transform:translateY(3cqh) scale(.96);pointer-events:none}
.ahp-mcover{flex:0 0 auto;width:7.3cqw;aspect-ratio:1;border-radius:1.36cqw;object-fit:cover;box-shadow:0 2px 5px rgb(15 23 42 / 20%)}
.ahp-mcopy{flex:1;min-width:0}
.ahp-mtitle{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:3.4cqw;font-weight:700;letter-spacing:-.02em;color:#111827}
.ahp-msub{display:flex;gap:.8cqw;margin-top:.2cqh;color:#3f4a5a;font-size:2.95cqw}
.ahp-msub i{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-style:normal}
.ahp-msub b{flex:0 0 auto;font-weight:400;font-variant-numeric:tabular-nums}
.ahp-mctrl{display:flex;align-items:center;gap:1.6cqw;color:#111827}
.ahp-mctrl svg{display:block}
.ahp-c15,.ahp-c30{width:6.6cqw;height:6.6cqw}
.ahp-cpause{width:9.6cqw;height:9.6cqw}

/* ── full player sheet ───────────────────────────────────────────────────── */
.ahp-player{position:absolute;z-index:8;inset:0;display:flex;flex-direction:column;padding:6.9cqh 4.64cqw 2.6cqh;color:#fff;background:linear-gradient(#4a8bf5 0%,#3b74ea 16%,#2c58cd 36%,#1e3d99 58%,#14265c 80%,#0c1430 100%);transform:translateY(100%);transition:transform 660ms cubic-bezier(.2,.85,.25,1);box-shadow:0 -12px 40px rgb(4 10 30 / 40%)}
.ahp-app[data-view="player"] .ahp-player,.ahp-app[data-view="chat"] .ahp-player{transform:none}
/* hero: the chat sits on the library, so the sheet only rises when it is the view */
.ahp-stage[data-mode="hero"] .ahp-app[data-view="chat"] .ahp-player{transform:translateY(100%)}
.ahp-stage[data-mode="hero"] .ahp-app[data-view="player"] .ahp-player{transform:none}
/* the chat is opaque, so it must cover before the sheet slides off the shelf */
.ahp-stage[data-mode="hero"] .ahp-app[data-view="chat"] .ahp-chat{transition:opacity 200ms ease,transform 650ms cubic-bezier(.2,.85,.25,1)}
.ahp-pgrab{flex:0 0 auto;width:9.9cqw;height:.52cqh;margin:0 auto;border-radius:999px;background:rgb(255 255 255 / 62%)}
.ahp-phead{flex:0 0 auto;display:flex;align-items:flex-start;gap:3cqw;margin-top:2cqh}
.ahp-pwrap{flex:0 0 auto;width:22.8cqw;aspect-ratio:1;overflow:hidden;border-radius:2.73cqw;background:#fff;transition:background 200ms ease;box-shadow:0 6px 16px rgb(4 10 30 / 34%)}
.ahp-pcover{display:block;width:100%;height:100%;object-fit:cover}
.ahp-pmeta{flex:1;min-width:0;padding-top:1.6cqh}
.ahp-ptitle{font-size:5.2cqw;line-height:1.1;font-weight:800;letter-spacing:-.03em}
.ahp-pauth{margin-top:.4cqh;color:rgb(255 255 255 / 88%);font-size:4cqw;font-weight:400}
.ahp-pchap{margin-top:.35cqh;overflow:hidden;color:rgb(255 255 255 / 78%);white-space:nowrap;text-overflow:ellipsis;font-size:3.3cqw;font-weight:400}
.ahp-queue{flex:0 0 auto;display:grid;place-items:center;width:9.4cqw;aspect-ratio:1;margin-top:1.9cqh;border-radius:50%;background:rgb(255 255 255 / 18%)}
.ahp-queue svg{width:52%;height:52%}
.ahp-seg{flex:0 0 auto;display:grid;grid-template-columns:1fr 1fr;gap:.6cqw;margin-top:2.6cqh;padding:.9cqw;border-radius:999px;background:rgb(255 255 255 / 14%)}
.ahp-segb{display:flex;align-items:center;justify-content:center;gap:1.6cqw;height:4cqh;border-radius:999px;color:rgb(255 255 255 / 70%);font-size:4cqw;font-weight:500;transition:background 320ms ease,color 320ms ease}
.ahp-segb svg{width:4cqw;height:4cqw}
.ahp-app[data-tab="ask"] .ahp-segb--a,.ahp-app[data-tab="transcript"] .ahp-segb--t{color:#fff;background:rgb(255 255 255 / 26%);font-weight:600}
.ahp-panel{position:relative;flex:1;min-height:0;margin-top:4.8cqh;overflow:hidden}
.ahp-pane{position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none;transition:opacity 300ms ease,transform 460ms cubic-bezier(.2,.85,.25,1)}
.ahp-pane--a{transform:translateX(-4cqw)}
.ahp-pane--t{transform:translateX(4cqw)}
.ahp-app[data-tab="ask"] .ahp-pane--a,.ahp-app[data-tab="transcript"] .ahp-pane--t{opacity:1;transform:none;pointer-events:auto}
.ahp-prow{display:flex;align-items:center;gap:2.2cqw;height:4.5cqh;padding:0 3.2cqw;border-radius:2.4cqw;background:rgb(255 255 255 / 15%);font-size:4.2cqw;font-weight:400;white-space:nowrap}
.ahp-prow+.ahp-prow{margin-top:1.1cqh}
.ahp-prow svg{flex:0 0 auto;width:4cqw;height:4cqw}
.ahp-ptime{margin-left:auto;color:rgb(255 255 255 / 80%);font-size:3.6cqw;font-variant-numeric:tabular-nums}
.ahp-tagb{display:flex;align-items:center;gap:1.2cqw;height:3.1cqh;padding:0 2.4cqw;border-radius:999px;background:rgb(255 255 255 / 22%);font-size:3.6cqw;font-weight:500}
.ahp-tagb svg{width:3.2cqw;height:3.2cqw}
.ahp-rel{display:flex;align-items:center;margin:3.1cqh 0 .4cqh}
.ahp-rel span{color:rgb(255 255 255 / 66%);font-size:2.95cqw;font-weight:600;letter-spacing:.14em}
.ahp-refresh{display:grid;place-items:center;width:6.4cqw;aspect-ratio:1;margin-left:auto;border-radius:50%;background:rgb(255 255 255 / 16%)}
.ahp-refresh svg{width:52%;height:52%}
.ahp-pitem{display:flex;align-items:flex-start;gap:2.4cqw;padding:1.9cqh .6cqw;border-top:.5px solid rgb(255 255 255 / 16%);font-size:4.2cqw;font-weight:300;line-height:1.3;opacity:0;transform:translateY(1.6cqh);transition:transform 420ms cubic-bezier(.2,.9,.3,1.1),opacity 300ms ease}
.ahp-pitem:first-of-type{border-top:0}
.ahp-pitem svg{flex:0 0 auto;width:3.6cqw;height:3.6cqw;margin-top:.6cqw;opacity:.9}
.ahp-plist.on .ahp-pitem{opacity:1;transform:none}
.ahp-plist.on .ahp-pitem:nth-of-type(2){transition-delay:60ms}
.ahp-plist.on .ahp-pitem:nth-of-type(3){transition-delay:120ms}
.ahp-plist.on .ahp-pitem:nth-of-type(4){transition-delay:180ms}
.ahp-plist.on .ahp-pitem:nth-of-type(5){transition-delay:240ms}

/* transcript: muted except what the audio has reached */
.ahp-tscript{position:absolute;inset:0;overflow:hidden;-webkit-mask:linear-gradient(transparent,#000 2cqh,#000 calc(100% - 7cqh),transparent);mask:linear-gradient(transparent,#000 2cqh,#000 calc(100% - 7cqh),transparent)}
.ahp-tinner{padding:1.4cqh .4cqw 8cqh;transition:transform 700ms cubic-bezier(.2,.85,.25,1)}
.ahp-tp{margin:0 0 1.5cqh;color:rgb(255 255 255 / 34%);font-size:4.5cqw;line-height:1.45;font-weight:300;text-wrap:pretty;transition:color 400ms ease,opacity 240ms ease}
.ahp-w{font-weight:inherit;transition:color 300ms ease,text-shadow 300ms ease}
.ahp-lv:not(.ahp-kara).on .ahp-w{color:#fff;text-shadow:0 0 12px rgb(255 255 255 / 22%);transition-delay:calc(var(--i) * var(--step,40ms))}
.ahp-lv.ahp-said .ahp-w{color:rgb(255 255 255 / 56%);transition-delay:0s}
/* karaoke: words lit individually by the clock, no staggered delay */
.ahp-lv.ahp-kara .ahp-w{transition:color 180ms ease,text-shadow 180ms ease;transition-delay:0s}
.ahp-lv.ahp-kara .ahp-w.lit{color:#fff;text-shadow:0 0 12px rgb(255 255 255 / 22%)}
/* only the word being spoken carries weight; heard words return to normal */
.ahp-lv.ahp-kara .ahp-w.now{font-weight:600}
.ahp-stage[data-mode="hero"] .ahp-tp{font-size:4.7cqw;line-height:1.48}
.ahp-app.menu .ahp-pane--t{z-index:31}
.ahp-app.menu .ahp-tp:not(.ahp-sel){opacity:.45}
.ahp-tp.ahp-sel .ahp-lv{background:rgb(4 14 48 / 34%);border-radius:2.05cqw;box-shadow:0 0 0 1.2cqw rgb(4 14 48 / 34%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* the passage under the finger is the brightest thing on the screen */
.ahp-tp.ahp-sel .ahp-lv .ahp-w{color:#fff}
.ahp-tpills{position:absolute;z-index:3;left:0;right:0;bottom:1.2cqh;display:flex;justify-content:center;gap:2cqw}
.ahp-tpill{flex:0 0 auto;display:flex;align-items:center;gap:1.2cqw;height:3.5cqh;padding:0 3.2cqw;white-space:nowrap;border-radius:999px;background:rgb(255 255 255 / 20%);font-size:3.6cqw;font-weight:500;backdrop-filter:blur(10px)}
.ahp-tpill--h{background:#3b82f6;box-shadow:0 3px 10px rgb(11 32 92 / 40%)}
.ahp-tpill svg{flex:0 0 auto;width:3.2cqw;height:3.2cqw}
.ahp-stage[data-mode="hero"] .ahp-tpills{display:none}

/* long-press menu (x-demo) */
.ahp-scrim{position:absolute;z-index:30;inset:0;background:rgb(8 20 60 / 22%);opacity:0;pointer-events:none;transition:opacity 220ms ease}
.ahp-app.menu .ahp-scrim{opacity:1}
.ahp-menu{position:absolute;z-index:40;left:22cqw;top:25.6cqh;width:56cqw;will-change:transform;padding:1.15cqh 0;border-radius:3.86cqw;background:linear-gradient(rgb(216 230 253 / 94%),rgb(199 218 250 / 94%));backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);color:#0d1b34;opacity:0;transform:scale(.9);transform-origin:16% 0;pointer-events:none;box-shadow:0 18px 40px rgb(4 10 30 / 30%),0 2px 6px rgb(4 10 30 / 16%),inset 0 0 0 .5px rgb(255 255 255 / 80%);transition:opacity 170ms ease,transform 260ms cubic-bezier(.2,1.06,.3,1)}
.ahp-app.menu .ahp-menu{opacity:1;transform:none}
.ahp-mrow{display:flex;align-items:center;gap:3.4cqw;padding:1.35cqh 6cqw;font-size:4.1cqw;font-weight:500;transition:background 160ms ease}
.ahp-mrow svg{width:4.8cqw;height:4.8cqw}
.ahp-mrow.ahp-hot{background:rgb(10 60 160 / 14%)}

/* transport */
.ahp-foot{flex:0 0 auto;margin-top:1.6cqh}
.ahp-pbar{position:relative;height:.42cqh;border-radius:999px;background:rgb(255 255 255 / 26%)}
.ahp-pbar i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:#fff;transition:width 900ms linear}
.ahp-pbar b{position:absolute;top:50%;width:3.1cqw;aspect-ratio:1;border-radius:50%;background:#fff;transform:translate(-50%,-50%);transition:left 900ms linear}
.ahp-app.kara .ahp-pbar i,.ahp-app.kara .ahp-pbar b{transition:none}
.ahp-ptimes{display:flex;justify-content:space-between;margin-top:1.1cqh;color:rgb(255 255 255 / 82%);font-size:3.2cqw;font-variant-numeric:tabular-nums}
.ahp-pctrl{display:flex;align-items:center;justify-content:space-between;margin-top:2.2cqh;padding:0 .8cqw}
.ahp-pctrl svg{display:block}
.ahp-rate{font-size:4.2cqw;font-weight:600}
.ahp-skip{width:9cqw;height:9cqw}
.ahp-play{width:11cqw;height:11cqw}
.ahp-pctrl .ahp-pa{display:none}
.ahp-app.playing .ahp-pctrl .ahp-pi{display:none}
.ahp-app.playing .ahp-pctrl .ahp-pa{display:block}
.ahp-air{width:7.8cqw;height:7.8cqw}

/* ── chat ────────────────────────────────────────────────────────────────── */
.ahp-chead{position:absolute;z-index:20;top:5.9cqh;left:0;right:0;display:flex;align-items:center;gap:3cqw;height:8.4cqh;padding:0 5cqw;background:rgb(243 235 224 / 96%);border-bottom:.5px solid rgb(15 23 42 / 10%);backdrop-filter:blur(12px)}
.ahp-cthumb{flex:0 0 auto;width:10.6cqw;aspect-ratio:1;border-radius:1.82cqw;object-fit:cover;box-shadow:0 1px 4px rgb(15 23 42 / 22%)}
.ahp-cmeta{min-width:0;opacity:0;transform:translateX(-2.4cqw);transition:opacity 360ms ease,transform 520ms cubic-bezier(.2,.85,.25,1)}
.ahp-app[data-view="chat"] .ahp-cmeta{opacity:1;transform:none;transition-delay:640ms}
.ahp-ctitle{font-size:4.6cqw;line-height:1.1;font-weight:800;letter-spacing:-.025em;color:#111827}
.ahp-cauthor{margin-top:.2cqh;overflow:hidden;color:#6b6353;white-space:nowrap;text-overflow:ellipsis;font-size:3.1cqw}
.ahp-cbody{position:absolute;top:14.3cqh;left:0;right:0;bottom:15.8cqh;overflow:hidden;-webkit-mask:linear-gradient(transparent,#000 2.2cqh,#000 calc(100% - 4.6cqh),transparent);mask:linear-gradient(transparent,#000 2.2cqh,#000 calc(100% - 4.6cqh),transparent)}
.ahp-stage[data-mode="hero"] .ahp-cbody{bottom:11cqh}
.ahp-scroll{padding:3.6cqh 5.9cqw 6cqh;transition:transform 640ms cubic-bezier(.2,.85,.25,1)}
.ahp-q{width:86%;margin:0 0 0 auto;padding:3.2cqw 4cqw;border-radius:4.55cqw 4.55cqw .91cqw 4.55cqw;background:linear-gradient(135deg,#f6eee0,#efe4d2);box-shadow:0 2px 4px rgb(0 0 0 / 5%);color:#0f172a;font-size:4.2cqw;line-height:1.32}
.ahp-q--wide{width:100%;margin:0;border-radius:4.55cqw}
.ahp-q strong{font-weight:700}
.ahp-q i{display:block;margin-top:1.1cqh;padding-left:2.4cqw;border-left:.6cqw solid rgb(59 52 39 / 18%);font-family:"Source Serif 4",Georgia,serif;font-optical-sizing:auto;color:#4b4234;font-size:3.75cqw;line-height:1.4}
.ahp-q.typing::after,.ahp-nfield.typing::after{content:"";display:inline-block;width:.45cqw;height:1em;margin-left:.3cqw;vertical-align:-.15em;background:#3b82f6;animation:ahp-caret 700ms steps(1) infinite}
@keyframes ahp-caret{50%{opacity:0}}
.ahp-think{display:flex;align-items:center;gap:2cqw;height:0;margin-top:2.4cqh;color:#6b6455;font-size:3.9cqw;overflow:visible}
.ahp-think.on{height:auto}
.ahp-tmark{width:7.2cqw;height:7.2cqw;object-fit:contain;animation:ahp-pulse 2s ease-in-out infinite}
.ahp-ans{margin-top:2.4cqh}
.ahp-ans h3{margin:0 0 .85cqh;font-size:4.7cqw;line-height:1.25;font-weight:700;letter-spacing:-.015em;color:#0f172a}
.ahp-ans p{margin:0 0 1.5cqh;font-family:"Source Serif 4",Georgia,serif;font-optical-sizing:auto;color:#1e293b;font-size:4.5cqw;line-height:1.42;text-wrap:pretty}
.ahp-ans p:last-child{margin-bottom:0}
.ahp-ans em{font-style:italic}
.ahp-ans strong{font-weight:600;color:#0f172a}
/* hero: the app sans carries the answer; serif is reserved for the book's own words */
.ahp-stage[data-mode="hero"] .ahp-ans p{font-family:"Merriweather Sans",system-ui,sans-serif;font-size:4.3cqw;line-height:1.5;color:#26221c}
.ahp-stage[data-mode="hero"] .ahp-ans strong{font-weight:700;color:#0f172a}
.ahp-stage[data-mode="hero"] .ahp-ans h3{font-size:4.9cqw}
.ahp-stage[data-mode="hero"] .ahp-q{font-size:4.4cqw}
.ahp-quote{margin:1.6cqh 0 0;padding:.4cqh 0 .4cqh 2.73cqw;border-left:.68cqw solid #ddd5c5;font-family:"Source Serif 4",Georgia,serif;font-optical-sizing:auto;color:#475569;font-style:italic;font-size:4.5cqw;line-height:1.36;text-wrap:pretty}
.ahp-stage[data-mode="hero"] .ahp-quote{font-size:4.3cqw;line-height:1.5;color:#3d3628;border-left-color:#d6ccb8}
.ahp-cite{display:inline-block;margin-left:1cqw;padding:.36cqh 1.8cqw;border-radius:.91cqw;background:#e9e4d6;color:#17429c;font-family:"Merriweather Sans",system-ui,sans-serif;font-style:normal;font-size:3.4cqw;line-height:1.3;font-weight:600;box-shadow:inset 0 0 0 .5px rgb(23 66 156 / 26%);white-space:nowrap;vertical-align:.1em;opacity:0;transform:translateY(.4cqh) scale(.94);transition:opacity 260ms ease,transform 420ms cubic-bezier(.2,1.2,.3,1),background 260ms ease,color 260ms ease,box-shadow 260ms ease}
.ahp-cite.on{opacity:1;transform:none}
/* the citation lights just before it is tapped */
.ahp-cite.lit{background:#3b82f6;color:#fff;box-shadow:0 2px 8px rgb(59 130 246 / 40%)}
.ahp-sugg{display:flex;flex-direction:column;gap:2.2cqw;margin-top:2.4cqw;padding-top:1.2cqh}
.ahp-sp{display:flex;align-items:flex-start;gap:2.1cqw;width:100%;padding:3.4cqw 4cqw;border-radius:2.73cqw;background:#fffdf8;color:#2f6fe0;font:inherit;font-size:3.75cqw;line-height:1.3;font-weight:500;text-align:left;box-shadow:0 2px 4px rgb(0 0 0 / 6%);opacity:0;transform:translateY(2cqh);transition:transform 400ms cubic-bezier(.2,.9,.3,1.15),opacity 300ms ease}
.ahp-sugg.on .ahp-sp{opacity:1;transform:none}
.ahp-sugg.on .ahp-sp:nth-child(2){transition-delay:80ms}
.ahp-sugg.on .ahp-sp:nth-child(3){transition-delay:160ms}
.ahp-sp svg{flex:0 0 auto;width:3.4cqw;height:3.4cqw;margin-top:.6cqw}
.ahp-conv{display:none}
.ahp-chat[data-conv="1"] .ahp-conv--1,.ahp-chat[data-conv="2"] .ahp-conv--2,.ahp-chat[data-conv="3"] .ahp-conv--3{display:block}
.ahp-composer{position:absolute;z-index:33;left:6.36cqw;right:6.36cqw;bottom:2.6cqh;display:flex;align-items:center;gap:2.7cqw;height:5.4cqh;padding:0 1cqw 0 4.4cqw;border-radius:999px;background:rgb(255 255 255 / 66%);box-shadow:0 4px 14px rgb(15 23 42 / 8%),inset 0 0 0 .5px rgb(255 255 255 / 70%);backdrop-filter:blur(16px);color:#6b6353;font-size:3.5cqw;font-weight:400;opacity:0;transform:translateY(1.6cqh);transition:opacity 320ms ease,transform 560ms cubic-bezier(.2,.85,.25,1)}
.ahp-app[data-view="chat"] .ahp-composer{opacity:1;transform:none;transition-delay:560ms}
.ahp-voice{display:flex;align-items:center;gap:1.4cqw;height:3.35cqh;padding:0 2.73cqw;border-radius:4.55cqw;color:#fff;background:linear-gradient(135deg,#3b82f6,#2563eb);box-shadow:0 2px 4px rgb(59 130 246 / 20%);font-size:3.3cqw;font-weight:500}
.ahp-voice svg{width:3.6cqw;height:3.6cqw}
/* answer speed, sitting in the bar with the mic */
.ahp-mode{display:flex;align-items:center;gap:1.1cqw;margin-left:auto;height:3.35cqh;padding:0 2.4cqw;border-radius:4.55cqw;color:#5c6b7f;background:rgb(15 23 42 / 6%);box-shadow:inset 0 0 0 .5px rgb(15 23 42 / 8%);font-size:3.1cqw;font-weight:600;letter-spacing:-.01em}
.ahp-mode svg{width:3cqw;height:3cqw;color:#f0a02a}

/* reveal + shared element */
.ahp-r{opacity:0;transform:translateY(1.2cqh);transition:opacity 300ms ease,transform 420ms cubic-bezier(.2,.85,.25,1)}
.ahp-r.on{opacity:1;transform:none}
.ahp-think.ahp-r{transition:opacity 220ms ease,transform 320ms ease}
.ahp-tap{transform:scale(.94);opacity:.72;transition:transform 210ms cubic-bezier(.2,.9,.3,1.2),opacity 210ms ease}
/* a fingertip: a solid dot that lands, plus a ring that expands from it */
.ahp-ripple{position:absolute;z-index:88;width:16cqw;aspect-ratio:1;margin:-8cqw 0 0 -8cqw;border-radius:50%;background:radial-gradient(circle,rgb(255 255 255 / 92%) 0 22%,rgb(255 255 255 / 34%) 23% 40%,transparent 41%);pointer-events:none;animation:ahp-ripple 760ms cubic-bezier(.22,.9,.3,1) forwards}
.ahp-ripple::after{content:"";position:absolute;inset:0;border-radius:50%;border:.7cqw solid rgb(255 255 255 / 75%);animation:ahp-ring 760ms cubic-bezier(.2,.8,.3,1) forwards}
.ahp-ripple--d{background:radial-gradient(circle,rgb(23 66 156 / 62%) 0 22%,rgb(23 66 156 / 22%) 23% 40%,transparent 41%)}
.ahp-ripple--d::after{border-color:rgb(23 66 156 / 55%)}
@keyframes ahp-ripple{0%{opacity:0;transform:scale(.6)}14%{opacity:1;transform:scale(.9)}60%{opacity:1}100%{opacity:0;transform:scale(1)}}
@keyframes ahp-ring{0%{transform:scale(.5);opacity:0}20%{opacity:1}100%{transform:scale(1.7);opacity:0}}
.ahp-fly{position:absolute;z-index:90;display:none;overflow:hidden;transform-origin:0 0;pointer-events:none;backface-visibility:hidden;will-change:transform}
.ahp-fly img{display:block;width:100%;height:100%;object-fit:cover}

/* nearly frontal, ≤3px of drift */
@keyframes ahp-breathe{0%,100%{transform:perspective(2000px) rotateY(-1.6deg) rotateX(.5deg) translate3d(0,0,0)}50%{transform:perspective(2000px) rotateY(-1.3deg) rotateX(.4deg) translate3d(0,-3px,0)}}
@keyframes ahp-pulse{0%,100%{opacity:.7;filter:drop-shadow(0 0 2px rgb(59 130 246 / .3))}50%{opacity:1;filter:drop-shadow(0 0 7px rgb(59 130 246 / .8))}}
@media (max-width:760px){.ahp-phone{animation:none;transform:perspective(2000px) rotateY(-1deg)}}
@media (prefers-reduced-motion:reduce){.ahp-phone{animation:none;transform:perspective(2000px) rotateY(-1.4deg)}.ahp-library{display:none}.ahp-chat,.ahp-cmeta,.ahp-composer{opacity:1;transform:none}.ahp-r,.ahp-cite{opacity:1;transform:none;transition:none}.ahp-ripple{display:none}.ahp-think{display:none}.ahp-tmark{animation:none}.ahp-ask.ahp-invite{animation:none}}

/* ── tags screen + toast (x-demo) ────────────────────────────────────────── */
.ahp-tags{position:absolute;z-index:16;inset:0;background:#f3ebe0;opacity:0;transform:translateY(2.4cqh);pointer-events:none;transition:opacity 300ms ease,transform 520ms cubic-bezier(.2,.85,.25,1)}
.ahp-app[data-view="tags"] .ahp-tags{opacity:1;transform:none;pointer-events:auto}
.ahp-tagshead{position:absolute;top:7.4cqh;left:4.7cqw;right:4.7cqw}
.ahp-tagshead .ahp-h2{position:static}
.ahp-tagsub{margin-top:1cqh;color:#6b6353;font-size:3.3cqw;font-weight:400}
.ahp-tlist{position:absolute;top:17.4cqh;left:4.7cqw;right:4.7cqw;display:flex;flex-direction:column;gap:3cqw}
.ahp-titem{display:flex;align-items:flex-start;gap:3.2cqw;padding:3.4cqw;border-radius:4cqw;background:#fffdf8;box-shadow:0 4px 12px rgb(15 23 42 / 8%);opacity:0;transform:translateY(2cqh);transition:opacity 300ms ease,transform 460ms cubic-bezier(.2,.9,.3,1.1)}
.ahp-titem.on{opacity:1;transform:none}
.ahp-tthumb{flex:0 0 auto;width:12cqw;aspect-ratio:1;border-radius:2cqw;object-fit:cover;box-shadow:0 2px 6px rgb(15 23 42 / 18%)}
.ahp-tbody{min-width:0}
.ahp-tquote{font-family:"Source Serif 4",Georgia,serif;font-optical-sizing:auto;color:#2b2620;font-size:3.9cqw;line-height:1.36;text-wrap:pretty}
.ahp-tmeta{display:flex;align-items:center;gap:1.8cqw;margin-top:1.3cqh;color:#17429c;font-size:3.1cqw;font-weight:600}
.ahp-tmeta i{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-style:normal;color:#6b6353;font-weight:400}
.ahp-tnew{flex:0 0 auto;padding:.34cqh 1.7cqw;border-radius:1cqw;background:#e3eefe;font-size:2.7cqw;letter-spacing:.03em}
/* the highlighted passage keeps its wash after the pill is tapped */
.ahp-tp.ahp-hl .ahp-lv{background:rgb(255 202 96 / 40%);border-radius:1.6cqw;box-shadow:1cqw 0 0 rgb(255 202 96 / 40%),-1cqw 0 0 rgb(255 202 96 / 40%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ahp-tp.ahp-hl .ahp-w{color:#fff}
.ahp-toast{position:absolute;z-index:44;left:50%;bottom:12.4cqh;display:flex;align-items:center;gap:2cqw;padding:1.5cqh 4.4cqw;border-radius:999px;background:rgb(10 26 20 / 88%);color:#fff;font-size:3.5cqw;font-weight:600;white-space:nowrap;opacity:0;transform:translate(-50%,1.6cqh);pointer-events:none;backdrop-filter:blur(10px);transition:opacity 240ms ease,transform 420ms cubic-bezier(.2,.9,.3,1.1)}
.ahp-toast.on{opacity:1;transform:translate(-50%,0)}
.ahp-toast svg{flex:0 0 auto;width:4cqw;height:4cqw}

/* ── x-demo: passage card, chat selection, back chevron, mini in chat ─────── */
.ahp-q--passage{padding:3.6cqw 4cqw}
.ahp-qlead{display:block;margin-bottom:.9cqh;font-weight:600}
.ahp-q--passage i{margin-top:0;padding-left:2.6cqw;font-size:4.1cqw;line-height:1.4;color:#2b2620}
.ahp-q--passage small{display:block;margin-top:1.1cqh;color:#6b6353;font-size:3.1cqw;font-weight:500}
.ahp-cback{flex:0 0 auto;display:grid;place-items:center;width:7cqw;height:7cqw;margin-left:-1.6cqw;color:#17429c}
.ahp-cback svg{width:5.4cqw;height:5.4cqw}
.ahp-menu--c{z-index:40}
.ahp-app.cmenu .ahp-menu--c{opacity:1;transform:none}
/* everything but the pressed sentence steps back */
.ahp-app.cmenu .ahp-conv--3>.on:not(:has(.ahp-csel)),.ahp-app.cmenu .ahp-ans:has(.ahp-csel) h3,.ahp-app.cmenu .ahp-chead,.ahp-app.cmenu .ahp-composer{opacity:.38;transition:opacity 200ms ease}
.ahp-csel{border-radius:.9cqw;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background 220ms ease,box-shadow 220ms ease}
.ahp-csel.ahp-sel{background:rgb(59 130 246 / 20%);box-shadow:0 0 0 .7cqw rgb(59 130 246 / 20%)}
.ahp-csel.ahp-hl{background:rgb(255 202 96 / 48%);box-shadow:0 0 0 .7cqw rgb(255 202 96 / 48%)}
/* the mini player rides along everywhere but the full player */
.ahp-stage[data-mode="x-demo"] .ahp-app[data-view="chat"] .ahp-mini{opacity:1;transform:none;bottom:9.4cqh;transition-delay:560ms}
.ahp-stage[data-mode="x-demo"] .ahp-app[data-view="chat"] .ahp-cbody{bottom:22cqh}
.ahp-stage[data-mode="x-demo"] .ahp-app[data-view="chat"] .ahp-menu--c{z-index:40}
.ahp-stage[data-mode="x-demo"] .ahp-toast{bottom:16.4cqh}
.ahp-stage[data-mode="x-demo"] .ahp-tlist{bottom:16cqh;overflow:hidden}
.ahp-stage[data-mode="x-demo"] .ahp-tdbody{bottom:16cqh;overflow:hidden}
/* the book's own voice carries the question too */
.ahp-stage[data-mode="x-demo"] .ahp-q{font-family:"Source Serif 4",Georgia,serif;font-optical-sizing:auto;font-size:4.4cqw;line-height:1.38;font-weight:500}
.ahp-stage[data-mode="x-demo"] .ahp-q strong{font-weight:700}
.ahp-tnote{display:flex;align-items:center;gap:1.2cqw;margin:1cqh 0 0;color:#8a8170;font-size:3cqw;font-weight:500}
.ahp-tnote svg{width:3cqw;height:3cqw}
/* tag detail */
.ahp-tagd{position:absolute;z-index:17;inset:0;background:#f3ebe0;opacity:0;transform:translateX(6cqw);pointer-events:none;transition:opacity 260ms ease,transform 480ms cubic-bezier(.2,.85,.25,1)}
.ahp-app[data-view="tagd"] .ahp-tagd{opacity:1;transform:none;pointer-events:auto}
.ahp-tdhead{position:absolute;top:6.4cqh;left:0;right:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:5.2cqh;padding:0 3.6cqw}
.ahp-tdback{display:flex;align-items:center;gap:.6cqw;color:#17429c;font-size:3.9cqw;font-weight:500}
.ahp-tdback svg{width:5.2cqw;height:5.2cqw;margin-left:-1cqw}
.ahp-tdtitle{font-size:3.9cqw;font-weight:700;color:#111827;letter-spacing:-.01em}
.ahp-tdbody{position:absolute;top:13.4cqh;left:5.9cqw;right:5.9cqw}
.ahp-tdquote{margin:0;font-family:"Source Serif 4",Georgia,serif;font-optical-sizing:auto;color:#1e293b;font-size:4.9cqw;line-height:1.4;text-wrap:pretty}
.ahp-tdquote mark{background:rgb(255 202 96 / 48%);box-shadow:0 0 0 .7cqw rgb(255 202 96 / 48%);border-radius:.9cqw;color:inherit;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ahp-tdmeta{display:flex;align-items:center;gap:3cqw;margin-top:3cqh;padding-bottom:2.4cqh;border-bottom:.5px solid rgb(15 23 42 / 12%)}
.ahp-tdmeta div{display:flex;flex-direction:column;gap:.2cqh;min-width:0}
.ahp-tdmeta b{font-size:3.9cqw;font-weight:700;color:#111827;letter-spacing:-.01em}
.ahp-tdmeta span{color:#6b6353;font-size:3.1cqw}
.ahp-tdlabel{margin:2.6cqh 0 1cqh;color:#8a8170;font-size:2.8cqw;font-weight:700;letter-spacing:.08em}
.ahp-tdsrc{margin:0;padding:.3cqh 0 .3cqh 2.73cqw;border-left:.68cqw solid #ddd5c5;font-family:"Source Serif 4",Georgia,serif;font-optical-sizing:auto;color:#475569;font-style:italic;font-size:3.9cqw;line-height:1.42}
.ahp-tdsrc .ahp-cite{margin-left:1cqw}
.ahp-nfield{min-height:9.6cqh;padding:2.8cqw 3.6cqw;border-radius:3.2cqw;background:#fffdf8;box-shadow:inset 0 0 0 .5px rgb(15 23 42 / 12%);color:#1e293b;font-size:3.9cqw;line-height:1.42;text-wrap:pretty;transition:box-shadow 200ms ease}
.ahp-nfield.on{box-shadow:inset 0 0 0 1.5px #3b82f6}
.ahp-nfield:empty::before{content:attr(data-ph);color:#9a9282}
.ahp-nrow{display:flex;justify-content:flex-end;margin-top:1.4cqh}
.ahp-nsave{position:relative;display:grid;place-items:center;height:4.4cqh;padding:0 5cqw;border-radius:999px;background:#3b82f6;color:#fff;font-size:3.6cqw;font-weight:600;box-shadow:0 2px 6px rgb(59 130 246 / 30%);transition:background 220ms ease}
.ahp-nsave>span{grid-area:1/1;display:flex;align-items:center;gap:1.2cqw;transition:opacity 200ms ease}
.ahp-nsave .ahp-ns2{opacity:0}.ahp-nsave .ahp-ns2 svg{width:3.6cqw;height:3.6cqw}
.ahp-nsave.saved{background:#1f7a4d}.ahp-nsave.saved .ahp-ns1{opacity:0}.ahp-nsave.saved .ahp-ns2{opacity:1}

/* scrubbing: jump to a moment without replaying every transition */
.ahp-app.ahp-jump,.ahp-app.ahp-jump *{transition:none!important;animation:none!important}

/* x-demo: the app's surfaces are white, not cream */
.ahp-stage[data-mode="x-demo"] .ahp-screen,.ahp-stage[data-mode="x-demo"] .ahp-app,.ahp-stage[data-mode="x-demo"] .ahp-chat,.ahp-stage[data-mode="x-demo"] .ahp-tags,.ahp-stage[data-mode="x-demo"] .ahp-tagd{background:#fff}
.ahp-stage[data-mode="x-demo"] .ahp-warm{display:none}
.ahp-stage[data-mode="x-demo"] .ahp-chead{background:rgb(255 255 255 / 96%)}
.ahp-stage[data-mode="x-demo"] .ahp-mini,.ahp-stage[data-mode="x-demo"] .ahp-tabs{background:rgb(255 255 255 / 86%)}
.ahp-stage[data-mode="x-demo"] .ahp-sp,.ahp-stage[data-mode="x-demo"] .ahp-titem,.ahp-stage[data-mode="x-demo"] .ahp-nfield{background:#f6f4ef}
.ahp-stage[data-mode="x-demo"] .ahp-cite{background:#eeebe3}
.ahp-stage[data-mode="x-demo"] .ahp-q{background:linear-gradient(135deg,#f3eee3,#ebe4d6)}
.ahp-stage[data-mode="x-demo"] .ahp-composer{background:#f6f4ef;box-shadow:0 4px 14px rgb(15 23 42 / 8%),0 0 0 .5px rgb(15 23 42 / 8%)}
.ahp-stage[data-mode="x-demo"] .ahp-ans p{text-wrap:wrap}
.ahp-stage[data-mode="x-demo"] .ahp-msub b{display:none}
/* streaming answers */
.ahp-ans.stream .ahp-sw{opacity:0}
.ahp-ans .ahp-sw{transition:opacity 160ms ease}
.ahp-ans.stream .ahp-sw.on{opacity:1}

/* the reader: a photo beside their message (images/ahp/reader.jpg; a glyph until one lands) */
.ahp-qrow{display:flex;align-items:flex-end;justify-content:flex-end;gap:2.2cqw}
.ahp-qrow .ahp-q{margin:0}
.ahp-qrow--wide{display:block}
.ahp-avatar{display:none;position:relative;flex:0 0 auto;width:8.2cqw;aspect-ratio:1;overflow:hidden;border-radius:50%;background:#dfe7f5;color:#5b6b85;box-shadow:0 1px 3px rgb(15 23 42 / 18%);opacity:0;transform:scale(.7);transition:opacity 260ms ease 120ms,transform 420ms cubic-bezier(.2,.9,.3,1.2) 120ms}
.ahp-stage[data-mode="x-demo"] .ahp-avatar{display:block}
.ahp-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.ahp-avatar svg{position:absolute;inset:14% 14% 8%;width:72%;height:auto}
.ahp-qrow:has(.ahp-q.on) .ahp-avatar{opacity:1;transform:none}
.ahp-stage[data-mode="x-demo"] .ahp-q:not(.ahp-q--wide){width:auto;max-width:82%}

/* a follow-up question stands apart from the answer above it */
.ahp-conv>.ahp-qrow:not(:first-child){margin-top:3cqh}

/* ═══ x-demo polish: one type ramp, one spring, iOS materials ═══════════════ */
.ahp-stage[data-mode="x-demo"]{--cap:2.73cqw;--foot:2.95cqw;--sub:3.41cqw;--body:3.86cqw;--t3:4.55cqw;--t2:5cqw;--t1:6.36cqw;--spr:linear(0,.006,.025 2.8%,.101 6.1%,.539 18.9%,.721 25.3%,.849 31.5%,.937 38.1%,.968 41.8%,.991 45.7%,1.006 50.1%,1.015 55%,1.017 63.9%,1.001);--ink:#111827;--ink2:rgb(17 24 39 / 62%);--ink3:rgb(17 24 39 / 45%);--hair:rgb(17 24 39 / 12%)}
/* type ramp */
.ahp-stage[data-mode="x-demo"] .ahp-status{font-size:var(--body)}
.ahp-stage[data-mode="x-demo"] .ahp-h2{font-size:var(--t1);letter-spacing:-.03em;font-weight:700}
.ahp-stage[data-mode="x-demo"] .ahp-beta,.ahp-stage[data-mode="x-demo"] .ahp-plabel,.ahp-stage[data-mode="x-demo"] .ahp-tab,.ahp-stage[data-mode="x-demo"] .ahp-ptimes,.ahp-stage[data-mode="x-demo"] .ahp-tnew,.ahp-stage[data-mode="x-demo"] .ahp-tdlabel,.ahp-stage[data-mode="x-demo"] .ahp-rel span{font-size:var(--cap)}
.ahp-stage[data-mode="x-demo"] .ahp-bauthor,.ahp-stage[data-mode="x-demo"] .ahp-pill,.ahp-stage[data-mode="x-demo"] .ahp-msub,.ahp-stage[data-mode="x-demo"] .ahp-cauthor,.ahp-stage[data-mode="x-demo"] .ahp-cite,.ahp-stage[data-mode="x-demo"] .ahp-voice,.ahp-stage[data-mode="x-demo"] .ahp-mode,.ahp-stage[data-mode="x-demo"] .ahp-tmeta,.ahp-stage[data-mode="x-demo"] .ahp-tnote,.ahp-stage[data-mode="x-demo"] .ahp-tdmeta span,.ahp-stage[data-mode="x-demo"] .ahp-q--passage small,.ahp-stage[data-mode="x-demo"] .ahp-from{font-size:var(--foot)}
.ahp-stage[data-mode="x-demo"] .ahp-btitle,.ahp-stage[data-mode="x-demo"] .ahp-mtitle,.ahp-stage[data-mode="x-demo"] .ahp-pchap,.ahp-stage[data-mode="x-demo"] .ahp-ptime,.ahp-stage[data-mode="x-demo"] .ahp-tpill,.ahp-stage[data-mode="x-demo"] .ahp-rate,.ahp-stage[data-mode="x-demo"] .ahp-sp,.ahp-stage[data-mode="x-demo"] .ahp-tagsub,.ahp-stage[data-mode="x-demo"] .ahp-tdsrc,.ahp-stage[data-mode="x-demo"] .ahp-nsave,.ahp-stage[data-mode="x-demo"] .ahp-toast{font-size:var(--sub)}
.ahp-stage[data-mode="x-demo"] .ahp-pauth,.ahp-stage[data-mode="x-demo"] .ahp-segb,.ahp-stage[data-mode="x-demo"] .ahp-prow,.ahp-stage[data-mode="x-demo"] .ahp-pitem,.ahp-stage[data-mode="x-demo"] .ahp-mrow,.ahp-stage[data-mode="x-demo"] .ahp-q,.ahp-stage[data-mode="x-demo"] .ahp-q--passage i,.ahp-stage[data-mode="x-demo"] .ahp-think,.ahp-stage[data-mode="x-demo"] .ahp-ans p,.ahp-stage[data-mode="x-demo"] .ahp-quote,.ahp-stage[data-mode="x-demo"] .ahp-composer,.ahp-stage[data-mode="x-demo"] .ahp-tquote,.ahp-stage[data-mode="x-demo"] .ahp-tdback,.ahp-stage[data-mode="x-demo"] .ahp-tdtitle,.ahp-stage[data-mode="x-demo"] .ahp-tdmeta b,.ahp-stage[data-mode="x-demo"] .ahp-nfield{font-size:var(--body)}
.ahp-stage[data-mode="x-demo"] .ahp-ctitle,.ahp-stage[data-mode="x-demo"] .ahp-ans h3,.ahp-stage[data-mode="x-demo"] .ahp-tp,.ahp-stage[data-mode="x-demo"] .ahp-tdquote,.ahp-stage[data-mode="x-demo"] .ahp-titem:first-child .ahp-tquote{font-size:var(--t3)}
.ahp-stage[data-mode="x-demo"] .ahp-ptitle{font-size:var(--t2)}
.ahp-stage[data-mode="x-demo"] .ahp-ans p{line-height:1.45}
.ahp-stage[data-mode="x-demo"] .ahp-ans h3{font-weight:600;letter-spacing:-.01em;margin-bottom:.7cqh}
.ahp-stage[data-mode="x-demo"] .ahp-q{line-height:1.36}
.ahp-stage[data-mode="x-demo"] .ahp-tp{line-height:1.42;font-family:"Source Serif 4",Georgia,serif;font-optical-sizing:auto;font-weight:400}
.ahp-stage[data-mode="x-demo"] .ahp-tp .ahp-w{font-weight:400}
.ahp-stage[data-mode="x-demo"] .ahp-lv.on .ahp-w,.ahp-stage[data-mode="x-demo"] .ahp-lv.ahp-kara .ahp-w.lit{font-weight:500}
/* one spring */
.ahp-stage[data-mode="x-demo"] .ahp-library,.ahp-stage[data-mode="x-demo"] .ahp-chat,.ahp-stage[data-mode="x-demo"] .ahp-player,.ahp-stage[data-mode="x-demo"] .ahp-pane,.ahp-stage[data-mode="x-demo"] .ahp-tags,.ahp-stage[data-mode="x-demo"] .ahp-tagd,.ahp-stage[data-mode="x-demo"] .ahp-mini,.ahp-stage[data-mode="x-demo"] .ahp-composer,.ahp-stage[data-mode="x-demo"] .ahp-scroll,.ahp-stage[data-mode="x-demo"] .ahp-tinner,.ahp-stage[data-mode="x-demo"] .ahp-cmeta{transition-timing-function:var(--spr);transition-duration:520ms}
.ahp-stage[data-mode="x-demo"] .ahp-library,.ahp-stage[data-mode="x-demo"] .ahp-chat,.ahp-stage[data-mode="x-demo"] .ahp-pane,.ahp-stage[data-mode="x-demo"] .ahp-tags,.ahp-stage[data-mode="x-demo"] .ahp-tagd,.ahp-stage[data-mode="x-demo"] .ahp-mini,.ahp-stage[data-mode="x-demo"] .ahp-composer{transition-property:opacity,transform;transition-duration:260ms,520ms}
.ahp-stage[data-mode="x-demo"] .ahp-app:not([data-view="chat"]) .ahp-chat{transition:opacity 240ms ease,transform 0s 240ms}
.ahp-stage[data-mode="x-demo"] .ahp-r,.ahp-stage[data-mode="x-demo"] .ahp-cite,.ahp-stage[data-mode="x-demo"] .ahp-sp,.ahp-stage[data-mode="x-demo"] .ahp-pitem,.ahp-stage[data-mode="x-demo"] .ahp-titem,.ahp-stage[data-mode="x-demo"] .ahp-toast,.ahp-stage[data-mode="x-demo"] .ahp-avatar,.ahp-stage[data-mode="x-demo"] .ahp-menu{transition-timing-function:ease,var(--spr);transition-duration:220ms,360ms}
/* 3 · replies read as messages from Atticus */
.ahp-from{display:flex;align-items:center;gap:1.6cqw;margin-bottom:1cqh;color:#0c2e26;font-weight:600;letter-spacing:-.01em}
.ahp-from img{width:5cqw;height:5cqw;object-fit:contain}
.ahp-stage[data-mode="x-demo"] .ahp-ans{margin-top:1.2cqh}
.ahp-stage[data-mode="x-demo"] .ahp-ans--first{margin-top:2.6cqh}
.ahp-stage[data-mode="x-demo"] .ahp-think{margin-top:2.6cqh}
.ahp-stage[data-mode="x-demo"] .ahp-quote{margin-top:1.2cqh;color:#3a4150;border-left-color:rgb(17 24 39 / 14%)}
/* 4 · chat header: live chapter line, hairline only once content is under it, more button */
.ahp-stage[data-mode="x-demo"] .ahp-chead{border-bottom-color:transparent;transition:border-color 200ms ease}
.ahp-stage[data-mode="x-demo"] .ahp-chat.scrolled .ahp-chead{border-bottom-color:var(--hair)}
.ahp-cchap{color:var(--ink3)}
.ahp-cmore{flex:0 0 auto;display:grid;place-items:center;width:7.3cqw;aspect-ratio:1;margin-left:auto;border-radius:50%;color:#17429c;background:rgb(17 24 39 / 5%)}
.ahp-cmore svg{width:60%;height:60%}
/* 5 · selection looks like iOS selection: blue tint, sharp edges, grab handles */
.ahp-stage[data-mode="x-demo"] .ahp-csel.ahp-sel{background:rgb(0 122 255 / 20%);box-shadow:0 0 0 .5cqw rgb(0 122 255 / 20%);border-radius:.4cqw}
.ahp-stage[data-mode="x-demo"] .ahp-csel.ahp-sel::before,.ahp-stage[data-mode="x-demo"] .ahp-csel.ahp-sel::after,.ahp-stage[data-mode="x-demo"] .ahp-tp.ahp-sel .ahp-lv::before,.ahp-stage[data-mode="x-demo"] .ahp-tp.ahp-sel .ahp-lv::after{content:"";display:inline-block;width:2.2cqw;height:1.15em;vertical-align:-.22em;background:linear-gradient(currentColor,currentColor) 50% 0/.5cqw 100% no-repeat,radial-gradient(circle at 50% 0,currentColor 1.05cqw,transparent 1.15cqw) 50% 0/100% 100% no-repeat;color:#007aff}
.ahp-stage[data-mode="x-demo"] .ahp-csel.ahp-sel::before{margin:0 .5cqw 0 -1.2cqw}
.ahp-stage[data-mode="x-demo"] .ahp-csel.ahp-sel::after,.ahp-stage[data-mode="x-demo"] .ahp-tp.ahp-sel .ahp-lv::after{margin:0 -1.2cqw 0 .5cqw;background:linear-gradient(currentColor,currentColor) 50% 0/.5cqw 100% no-repeat,radial-gradient(circle at 50% 100%,currentColor 1.05cqw,transparent 1.15cqw) 50% 0/100% 100% no-repeat}
.ahp-stage[data-mode="x-demo"] .ahp-tp.ahp-sel{line-height:1.72}
.ahp-stage[data-mode="x-demo"] .ahp-tp.ahp-sel .ahp-lv{background:rgb(255 255 255 / 22%);box-shadow:1.1cqw 0 0 rgb(255 255 255 / 22%),-1.1cqw 0 0 rgb(255 255 255 / 22%);border-radius:.4cqw}
.ahp-stage[data-mode="x-demo"] .ahp-tp.ahp-sel .ahp-lv::before{margin:0 .5cqw 0 -1.2cqw;color:#fff}
.ahp-stage[data-mode="x-demo"] .ahp-tp.ahp-sel .ahp-lv::after{color:#fff}
/* 6 · context menu is system material */
.ahp-stage[data-mode="x-demo"] .ahp-menu{width:58cqw;padding:0;border-radius:3.2cqw;background:rgb(250 250 250 / 78%);backdrop-filter:blur(30px) saturate(1.6);-webkit-backdrop-filter:blur(30px) saturate(1.6);color:var(--ink);box-shadow:0 16px 40px rgb(0 0 0 / 22%),0 1px 3px rgb(0 0 0 / 10%),inset 0 0 0 .5px rgb(255 255 255 / 60%)}
.ahp-stage[data-mode="x-demo"] .ahp-mrow{flex-direction:row-reverse;justify-content:space-between;padding:1.25cqh 4.2cqw;font-weight:400;letter-spacing:-.01em}
.ahp-stage[data-mode="x-demo"] .ahp-mrow+.ahp-mrow{box-shadow:inset 0 .5px 0 var(--hair)}
.ahp-stage[data-mode="x-demo"] .ahp-mrow svg{width:4.4cqw;height:4.4cqw;color:var(--ink2)}
.ahp-stage[data-mode="x-demo"] .ahp-mrow.ahp-hot{background:rgb(17 24 39 / 9%)}
/* 8 · transport: play is the center of gravity */
.ahp-stage[data-mode="x-demo"] .ahp-pctrl{position:relative;justify-content:center;gap:6.4cqw;height:10cqw;margin-top:1.8cqh}
.ahp-stage[data-mode="x-demo"] .ahp-play{width:10cqw;height:10cqw}
.ahp-stage[data-mode="x-demo"] .ahp-skip{width:6.6cqw;height:6.6cqw}
.ahp-stage[data-mode="x-demo"] .ahp-rate,.ahp-stage[data-mode="x-demo"] .ahp-air{position:absolute;top:50%;transform:translateY(-50%);opacity:.62}
.ahp-stage[data-mode="x-demo"] .ahp-rate{left:1.2cqw;font-weight:600}
.ahp-stage[data-mode="x-demo"] .ahp-air{right:.6cqw;width:6cqw;height:6cqw}
.ahp-stage[data-mode="x-demo"] .ahp-pbar{height:.55cqh;background:rgb(255 255 255 / 22%)}
.ahp-stage[data-mode="x-demo"] .ahp-pbar b{opacity:0}
.ahp-stage[data-mode="x-demo"] .ahp-ptimes{color:rgb(255 255 255 / 62%);margin-top:.9cqh}
/* 9 · tags hierarchy */
.ahp-stage[data-mode="x-demo"] .ahp-tmeta{color:var(--ink2);font-weight:400}
.ahp-stage[data-mode="x-demo"] .ahp-tmeta i{color:inherit}
.ahp-stage[data-mode="x-demo"] .ahp-tnew{color:#17429c;font-weight:700}
.ahp-stage[data-mode="x-demo"] .ahp-tdlabel{color:var(--ink3);letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.ahp-stage[data-mode="x-demo"] .ahp-tdmeta span{color:var(--ink2)}
.ahp-stage[data-mode="x-demo"] .ahp-tagsub{color:var(--ink2)}
/* 10 · the target answers the finger: a one-frame dip and a brightness lift */
@keyframes ahp-hit{0%{transform:scale(1);filter:brightness(1)}35%{transform:scale(.9);filter:brightness(1.16)}100%{transform:scale(.94);filter:brightness(1)}}
.ahp-stage[data-mode="x-demo"] .ahp-hit{animation:ahp-hit 200ms cubic-bezier(.2,.8,.3,1) both}

/* ship polish */
.ahp-stage[data-mode="x-demo"] .ahp-cback{width:7.3cqw;height:7.3cqw;margin-left:-.6cqw;border-radius:50%;background:rgb(17 24 39 / 5%)}
.ahp-stage[data-mode="x-demo"] .ahp-cback svg{width:4.6cqw;height:4.6cqw;stroke-width:2.6}
/* 5 · pills sit on the fade, not on the type */
.ahp-stage[data-mode="x-demo"] .ahp-tinner{padding-bottom:12cqh;transition:transform 420ms cubic-bezier(.3,.9,.3,1)}
.ahp-stage[data-mode="x-demo"] .ahp-app.kara .ahp-tinner{transition:none}
.ahp-stage[data-mode="x-demo"] .ahp-tscript{-webkit-mask:linear-gradient(transparent,#000 2cqh,#000 calc(100% - 9cqh),transparent);mask:linear-gradient(transparent,#000 2cqh,#000 calc(100% - 9cqh),transparent)}
/* 6 · composer and mini player share a height */
.ahp-stage[data-mode="x-demo"] .ahp-composer{height:4.9cqh;box-sizing:border-box}