/* Shell composition. Typography and composer sizing stay in pearl-composer-v6.css. */
html.loop-page[data-visual-theme] .topbar {
    flex-direction: column;
    min-height: 68px;
}
html.loop-page .brand-caption {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.4;
    text-align: center;
    margin-top: -2px;
}
html.loop-page .message-input {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
}
html.loop-page[data-visual-theme] .message-input #message {
    display: block;
    width: 100%;
}
html.loop-page .message-placeholder {
    position: absolute;
    inset: 0 0 auto;
    pointer-events: none;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--ink);
    font-weight: 500;
    line-height: 1.5;
}
html.loop-page .message-placeholder strong { font-weight: 700; }
html.loop-page .message-input:focus-within .message-placeholder,
html.loop-page .message-input.has-value .message-placeholder { visibility: hidden; }
html.loop-page[data-visual-theme] .message.loop-introduction .message-body {
    font-size: 17px;
    line-height: 1.55;
    text-align: left;
    hyphens: none;
}
html.loop-page .loop-introduction .message-body p { margin: 0 0 12px; }
html.loop-page[data-visual-theme] .message.user .message-body {
    margin-inline: auto 0;
    text-align: right;
    text-align-last: right;
}
html.loop-page[data-visual-theme] .message.assistant {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
}
html.loop-page[data-visual-theme] .message.assistant .message-body {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    background: none;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
html.loop-page[data-visual-theme] .message.assistant .message-meta::before {
    content: none;
    display: none;
}
.intro-reading-list { padding-inline-start: 22px; margin-block: 8px 0; }
.intro-reading-list li { margin-block: 8px; }
.intro-reading { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; text-align: start; text-decoration: underline; cursor: pointer; }
.intro-reading:disabled { cursor: default; opacity: .65; }
html.loop-page .menu-tip { display: none; }
/* Fade the content itself, leaving the shell background and composer untouched. */
html.loop-page[data-visual-theme] .feed {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - clamp(24px, 7%, 48px)), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - clamp(24px, 7%, 48px)), transparent 100%);
    scroll-padding-bottom: 56px;
}
html.loop-page[data-visual-theme] .feed-content { padding-bottom: 56px; }
html.loop-page.loop-entry[data-visual-theme] .feed { mask-image: none; -webkit-mask-image: none; }
html.loop-page .loop-navigation { display: flex; justify-content: center; gap: 24px; }
html.loop-page .loop-navigation button { min-height: 36px; padding: 4px 8px; }
html.loop-page .guest-access { font: 12px/1.5 var(--font, sans-serif); text-align: center; margin: 8px auto 0; max-width: 520px; color: var(--ink); }
html.loop-page .guest-access:empty { display: none; }
html.loop-page .analytics-choice { font-size: 12px; line-height: 1.4; align-items: flex-start; }
html.loop-page .analytics-choice input { flex: none; margin-top: 3px; }
html.loop-page .intro-guide summary, html.loop-page .more-topics summary, html.loop-page .next-options summary { cursor: pointer; min-height: 44px; padding: 10px 0; }
html.loop-page .intro-guide summary { font-size: 14px; }
html.loop-page .intro-guide:not([open]) + button { font-size: 14px; }
html.loop-page .next-options a { display: block; padding-block: 10px; }
html.loop-page .loop-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 18px; font: 13px/1.5 sans-serif; }
html.loop-page .loop-feedback button { min-height: 44px; }
html.loop-page .resume-note { padding-block: 16px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
html.loop-page[data-visual-theme] .welcome-guide {
    padding-top: 0;
    border-top: 0;
}
html.loop-page[data-visual-theme] .welcome-guide[open] {
    min-height: calc(var(--loop-feed-height, 500px) - 18px);
}
html.loop-page .welcome-guide-toggle {
    padding: 10px 0;
    min-height: 44px;
    font-family: var(--pearl-dialogue-font, var(--display-font));
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    list-style-position: inside;
    cursor: pointer;
    color: var(--ink);
}
html.loop-page .welcome-guide-toggle::marker { color: var(--accent); font-size: 12px; }
html.loop-page .welcome-guide[open] > .guide-content { padding-top: 18px; }
html.loop-page[data-visual-theme] .composer-footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: 5px;
}
html.loop-page[data-visual-theme] .composer-tools {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 24px;
    width: 100%;
    overflow: visible;
}
html.loop-page[data-visual-theme] #review-button,
html.loop-page[data-visual-theme] #pdf-button,
html.loop-page[data-visual-theme] #guide-button {
    flex: none;
    white-space: nowrap;
    font-size: 14px;
    line-height: 1.3;
    padding-inline: 0;
}
html.loop-page[data-visual-theme] #composer-hint {
    display: block;
    flex: none;
    min-width: 0;
    margin: 0;
    font-size: 12px;
    text-align: center;
}
html.loop-page[data-visual-theme] #composer-hint:empty { display: none; }
html.loop-page .loop-copyright {
    display: block;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.5;
    text-align: center;
}
@media (max-width: 380px) {
    html.loop-page[data-visual-theme] #review-button,
    html.loop-page[data-visual-theme] #pdf-button,
    html.loop-page[data-visual-theme] #guide-button { font-size: 12px; }
    html.loop-page .brand-caption { font-size: 10px; }
}

html.loop-page[data-visual-theme="pearl"] {
    --pearl-layout: "desktop-1280x720";
    --pearl-scene: url('/shared/theme-assets/pearl/desktop/background.webp');
    --pearl-content: 760px;
    --pearl-gutter: 28px;
    --pearl-welcome-space: 8px;
    --pearl-topic-height: 76px;
    --pearl-grid-gap: 12px;
    --pearl-topic-icon: 30px;
    --pearl-logo-height: 76px;
    --pearl-ornament-size: 52px;
}

html.loop-page[data-visual-theme="pearl"] body {
    background-image: var(--pearl-scene);
    background-size: cover;
    background-position: center;
}

/* Small edge reflections stay behind the conversation and never intercept input. */
html.loop-page .pearl-glints { display: none; }
html.loop-page[data-visual-theme="pearl"] .pearl-glints {
    display: block;
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
html.loop-page[data-visual-theme="pearl"] .app-shell { z-index: 1; }
html.loop-page .pearl-glints__side {
    position: absolute;
    inset: 0 auto 0 0;
    width: clamp(24px, calc((100vw - 800px) / 2), 280px);
}
html.loop-page .pearl-glints__side + .pearl-glints__side {
    left: auto;
    right: 0;
    transform: scaleX(-1);
}
html.loop-page .pearl-glints i {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 11px;
    height: 11px;
    opacity: 0;
    background: linear-gradient(90deg, transparent, #fff 48%, #fff 52%, transparent) center / 100% 1px no-repeat,
                linear-gradient(transparent, #fff 48%, #fff 52%, transparent) center / 1px 100% no-repeat;
    filter: drop-shadow(0 0 2px #538fac99);
    animation: pearl-glint var(--period) ease-in-out infinite;
    animation-delay: var(--delay);
}
html.loop-page .pearl-glints i:nth-child(1) { --x: 26%; --y: 16%; --period: 12s; --delay: -2s; }
html.loop-page .pearl-glints i:nth-child(2) { --x: 65%; --y: 29%; --period: 15s; --delay: -8s; }
html.loop-page .pearl-glints i:nth-child(3) { --x: 42%; --y: 43%; --period: 11s; --delay: -5s; }
html.loop-page .pearl-glints i:nth-child(4) { --x: 18%; --y: 59%; --period: 14s; --delay: -11s; }
html.loop-page .pearl-glints i:nth-child(5) { --x: 71%; --y: 73%; --period: 13s; --delay: -4s; }
html.loop-page .pearl-glints i:nth-child(6) { --x: 35%; --y: 85%; --period: 16s; --delay: -13s; }
html.loop-page .pearl-glints i:nth-child(7) { --x: 82%; --y: 51%; --period: 17s; --delay: -9s; width: 7px; height: 7px; }
html.loop-page .pearl-glints i:nth-child(8) { --x: 48%; --y: 8%; --period: 14s; --delay: -6s; width: 7px; height: 7px; }
html.loop-page .pearl-glints__side + .pearl-glints__side i { animation-delay: calc(var(--delay) - 4s); }
@keyframes pearl-glint {
    0%, 18%, 65%, 100% { opacity: 0; transform: scale(.55) rotate(0deg); }
    39% { opacity: .9; transform: scale(1.15) rotate(12deg); }
}
html.loop-page.loop-background-paused .pearl-glints i { animation-play-state: paused; }
html.loop-page[data-motion="off"] .pearl-glints { display: none; }
@media (max-width: 767px) {
    html.loop-page .pearl-glints i { width: 6px; height: 6px; }
    html.loop-page .pearl-glints i:nth-child(n+4) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    html.loop-page[data-visual-theme="pearl"] .pearl-glints { display: none; }
}

html.loop-page[data-visual-theme] .topbar { height: auto; min-height: 108px; padding-block: 8px 4px; }
html.loop-page[data-visual-theme="pearl"] .topbar,
html.loop-page[data-visual-theme="pearl"] .composer-wrap {
    background: none;
    border-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
html.loop-page[data-visual-theme="pearl"] #composer,
html.loop-page[data-visual-theme="pearl"] #composer:focus-within {
    background: none;
    box-shadow: none;
    border: 2px solid #20262d;
    border-radius: 12px;
}
html.loop-page[data-visual-theme="pearl"] #composer::before,
html.loop-page[data-visual-theme="pearl"] #composer::after {
    content: none;
    display: none;
}
html.loop-page[data-visual-theme="pearl"] .brand__name {
    font-family: var(--pearl-dialogue-font);
    font-weight: 600;
    color: #132d46;
    background: linear-gradient(105deg, #163f59 0%, #28738b 20%, #468aa3 36%, #1d576f 52%, #387d94 72%, #163f59 100%);
    background-size: 280% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    animation: reflecta-shimmer 7s linear infinite;
}
html.loop-page[data-visual-theme="pearl"] .brand__mark span {
    border-color: #326f86;
    background: rgba(237, 247, 250, .65);
    box-shadow: inset 0 0 5px #fff;
}
html.loop-page[data-visual-theme="pearl"] .brand:hover .brand__mark { transform: none; }

html.loop-page[data-visual-theme="pearl"] .feed-content {
    width: 100%;
    max-width: calc(var(--pearl-content) + 2 * var(--pearl-gutter));
    padding-inline: var(--pearl-gutter);
}
html.loop-page[data-visual-theme] .feed-content:has(> .welcome) { padding-top: 32px; }
html.loop-page[data-visual-theme="pearl"] .welcome {
    max-width: var(--pearl-content);
    margin-top: 0;
}
html.loop-page[data-visual-theme] .welcome .welcome-lead {
    max-width: none;
    margin-bottom: 0;
    white-space: nowrap;
    text-wrap: nowrap;
}
html.loop-page[data-visual-theme="pearl"] .welcome .welcome-lead {
    color: #142a43;
    font-weight: 500;
    font-size: 28px;
    line-height: 1.5;
}
html.loop-page[data-visual-theme="pearl"] .topic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
    gap: var(--pearl-grid-gap);
    margin-top: var(--loop-topics-space, 28px);
}
html.loop-page[data-visual-theme="pearl"] .topic-button {
    isolation: isolate;
    min-height: calc(var(--pearl-topic-height) - 16px);
    border-radius: 8px 8px 48% 48% / 8px 8px 28px 28px;
    border: 0;
    background: linear-gradient(to bottom, transparent 25%, rgba(25, 36, 44, .025) 65%, rgba(25, 36, 44, .12) 100%);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 10px 22px;
    gap: 12px;
}
html.loop-page[data-visual-theme="pearl"] .topic-button:hover {
    background: linear-gradient(to bottom, transparent 25%, rgba(25, 36, 44, .045) 65%, rgba(25, 36, 44, .16) 100%);
    box-shadow: 0 3px 9px rgba(25, 36, 44, .04);
}
html.loop-page[data-visual-theme="pearl"] .topic-button::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid #20282e;
    border-top: 0;
    border-radius: inherit;
    background: none;
    box-shadow: none;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 34%);
    mask-image: linear-gradient(to bottom, transparent, #000 34%);
}
html.loop-page[data-visual-theme="pearl"] .topic-button::after {
    content: "";
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 8px;
    border-top: 1px solid rgba(158, 120, 54, .8);
    border-radius: 50%;
    pointer-events: none;
}

/* LOOP mobile geometry and navigation: keep the app anchored to the current visual viewport. */
html.loop-page .app-shell { height: var(--loop-viewport-height, 100dvh); min-height: 0; }
html.loop-page[data-visual-theme] .topbar { flex-direction: row; min-height: 72px; padding-block: calc(4px + env(safe-area-inset-top)) 4px; }
html.loop-page.loop-daily-entry[data-visual-theme] .feed-content { padding-top: 8px; padding-inline: 8px; }
html.loop-page.loop-daily-entry:not(.loop-daily-topics)[data-visual-theme] .feed-content { height: 100%; min-height: 0; padding: 8px 12px calc(12px + env(safe-area-inset-bottom)); }
html.loop-page .latest {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 8px);
    transition: opacity .2s ease, transform .2s ease;
}
html.loop-page .latest.is-visible { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
html.loop-page .latest[aria-hidden="true"] { visibility: hidden; }
html.loop-page .menu-grid { display: grid; grid-template-columns: 1fr; gap: 2px; }
html.loop-page .menu-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-height: 48px;
    padding: 10px 4px;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 45%, transparent);
    border-radius: 0;
}
html.loop-page .menu-item::after { content: "›"; color: var(--muted); font-size: 22px; line-height: 1; }
html.loop-page .menu-item small { display: none; }
html.loop-page .menu-link { display: block; width: 100%; padding: 14px 4px; text-align: left; color: var(--muted); }
html.loop-page .setting-row--binary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding-block: 11px; }
html.loop-page .setting-row--binary .setting-label { margin: 0; }
html.loop-page .setting-row--binary .setting-options { flex-wrap: nowrap; }
html.loop-page .setting-row--binary .setting-options button { min-height: 36px; padding: 6px 10px; }
html.loop-page .theme-option { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; min-width: 64px; }
html.loop-page .theme-option-label { font-size: 10px; color: var(--muted); white-space: nowrap; }
html.loop-page .sheet-heading { padding-block: 16px 12px; }
html.loop-page .sheet-body { max-height: calc(var(--loop-viewport-height, 100dvh) - 76px); overflow-y: auto; padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
html.loop-page .composer-footer { padding-bottom: 2px; }
html.loop-page .composer-tools { gap: 12px; }
html.loop-page .loop-copyright { margin-top: 14px; }
html.loop-page .spread-prompt { margin: 12px 0 20px; padding: 12px 0 0; border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
html.loop-page .spread-prompt strong { display: block; font-size: 13px; font-weight: 600; }
html.loop-page .spread-prompt-controls { display: flex; gap: 8px; margin-top: 8px; }
html.loop-page .spread-system-button { min-width: 56px; min-height: 38px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-size: 11px; }
html.loop-page .spread-system-button:hover { border-color: var(--accent); color: var(--accent); }
html.loop-page .spread-prompt.is-loading { opacity: .65; }
html.loop-page .suggested-spreads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
html.loop-page .suggested-spread { padding: 10px; border: 1px solid color-mix(in srgb, var(--line) 65%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--surface) 72%, transparent); }
html.loop-page .suggested-spread strong { font-size: 13px; }
html.loop-page .suggested-spread p { margin: 5px 0; font-size: 11px; line-height: 1.45; color: var(--muted); }
html.loop-page .clear-trash-button { margin-left: auto; }
html.loop-page .send-button { width: 44px; height: 44px; min-width: 44px; }
@media (max-width: 560px) {
    html.loop-page .suggested-spreads { grid-template-columns: 1fr; }
    html.loop-page .sheet { width: min(94vw, 680px); max-height: calc(var(--loop-viewport-height, 100dvh) - 16px); }
}
html.loop-page[data-visual-theme="pearl"] .topic-text {
    color: #142a43;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.4;
    hyphens: auto;
}
html.loop-page[data-visual-theme="pearl"] .topic-button:nth-child(n) .topic-symbol {
    color: #243f59;
    width: var(--pearl-topic-icon);
    height: var(--pearl-topic-icon);
    border: 0;
    background: none;
    box-shadow: none;
    font-size: 24px;
    line-height: 1;
}

/* Desktop: eight compositions, including the two 1280px screen heights. */
@media (min-width: 1200px) and (min-height: 780px) {
    html.loop-page[data-visual-theme="pearl"] { --pearl-layout: "desktop-1280x800"; --pearl-welcome-space: 14px; --pearl-topic-height: 80px; }
}
@media (min-width: 1320px) {
    html.loop-page[data-visual-theme="pearl"] { --pearl-layout: "desktop-1366x768"; --pearl-content: 780px; --pearl-grid-gap: 14px; --pearl-welcome-space: 8px; --pearl-topic-height: 78px; }
}
@media (min-width: 1400px) {
    html.loop-page[data-visual-theme="pearl"] { --pearl-layout: "desktop-1440x900"; --pearl-content: 800px; --pearl-welcome-space: 20px; --pearl-topic-height: 84px; --pearl-grid-gap: 16px; }
}
@media (min-width: 1500px) {
    html.loop-page[data-visual-theme="pearl"] { --pearl-layout: "desktop-1536x864"; --pearl-content: 820px; --pearl-welcome-space: 16px; --pearl-topic-height: 82px; }
}
@media (min-width: 1580px) {
    html.loop-page[data-visual-theme="pearl"] { --pearl-layout: "desktop-1600x900"; --pearl-content: 840px; --pearl-welcome-space: 22px; --pearl-grid-gap: 18px; }
}
@media (min-width: 1660px) {
    html.loop-page[data-visual-theme="pearl"] { --pearl-layout: "desktop-1680x1050"; --pearl-content: 860px; --pearl-topic-height: 90px; --pearl-welcome-space: 30px; --pearl-logo-height: 82px; }
}
@media (min-width: 1840px) {
    html.loop-page[data-visual-theme="pearl"] { --pearl-layout: "desktop-1920x1080"; --pearl-content: 880px; --pearl-topic-height: 94px; --pearl-grid-gap: 20px; --pearl-welcome-space: 34px; --pearl-ornament-size: 58px; }
}

/* Tablet: five portrait sizes and a dedicated landscape composition. */
@media (min-width: 621px) and (max-width: 1199px) {
    html.loop-page[data-visual-theme="pearl"] .welcome .welcome-lead { font-size: 22px; }
    html.loop-page[data-visual-theme="pearl"] { --pearl-layout: "tablet-768x1024"; --pearl-scene: url('/shared/theme-assets/pearl/tablet/background.webp'); --pearl-content: 660px; --pearl-gutter: 32px; --pearl-topic-height: 88px; --pearl-welcome-space: 28px; --pearl-grid-gap: 16px; }
}
@media (min-width: 800px) and (max-width: 1199px) {
    html.loop-page[data-visual-theme="pearl"] { --pearl-layout: "tablet-820x1180"; --pearl-content: 680px; --pearl-welcome-space: 38px; --pearl-topic-height: 92px; }
}
@media (min-width: 830px) and (max-width: 1199px) {
    html.loop-page[data-visual-theme="pearl"] { --pearl-layout: "tablet-834x1194"; --pearl-content: 700px; --pearl-grid-gap: 18px; --pearl-welcome-space: 42px; }
}
@media (min-width: 900px) and (max-width: 1199px) {
    html.loop-page[data-visual-theme="pearl"] { --pearl-layout: "tablet-912x1368"; --pearl-content: 720px; --pearl-welcome-space: 54px; --pearl-topic-height: 96px; --pearl-logo-height: 82px; }
}
@media (min-width: 1000px) and (max-width: 1199px) {
    html.loop-page[data-visual-theme="pearl"] { --pearl-layout: "tablet-1024x1366"; --pearl-content: 760px; --pearl-welcome-space: 60px; --pearl-grid-gap: 20px; --pearl-topic-icon: 34px; }
}
@media (min-width: 621px) and (max-width: 1199px) and (orientation: landscape) {
    html.loop-page[data-visual-theme="pearl"] { --pearl-layout: "tablet-1024x768"; --pearl-scene: url('/shared/theme-assets/pearl/desktop/background.webp'); --pearl-content: 740px; --pearl-welcome-space: 8px; --pearl-topic-height: 76px; --pearl-grid-gap: 12px; --pearl-logo-height: 68px; --pearl-topic-icon: 28px; }
}

/* Mobile: two columns at every width, with ten size configurations. */
@media (max-width: 620px) {
    html.loop-page[data-visual-theme] .message.loop-introduction .message-body { font-size: 16px; }
    html.loop-page[data-visual-theme] .composer-tools { gap: 8px; }
    html.loop-page[data-visual-theme="pearl"] { --pearl-layout: "mobile-320x568"; --pearl-scene: url('/shared/theme-assets/pearl/mobile/background.webp'); --pearl-content: 480px; --pearl-gutter: 12px; --pearl-welcome-space: 2px; --pearl-topic-height: 92px; --pearl-grid-gap: 8px; --pearl-topic-icon: 22px; --pearl-logo-height: 60px; --pearl-ornament-size: 44px; }
    html.loop-page[data-visual-theme="pearl"] .feed-content { padding-top: 20px; }
    html.loop-page[data-visual-theme] .welcome .welcome-lead {
        font-size: 21px;
        line-height: 1.4;
        margin: 0 -8px;
        text-align: center;
        white-space: normal;
        text-wrap: wrap;
    }
    html.loop-page .welcome-lead > span { display: block; white-space: nowrap; }
    html.loop-page[data-visual-theme="pearl"] .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--loop-topics-space, 20px); }
    html.loop-page[data-visual-theme="pearl"] .topic-button { min-height: 56px; padding: 6px 10px; flex-direction: row; justify-content: center; gap: 6px; text-align: center; }
    html.loop-page[data-visual-theme="pearl"] .topic-text { font-size: 16px; line-height: 1.3; max-width: 100%; }
    html.loop-page[data-visual-theme="pearl"] .topic-button .topic-symbol { font-size: 22px; }
    html.loop-page[data-visual-theme="pearl"] .brand__name { font-size: 27px; }
    html.loop-page[data-visual-theme="pearl"] .welcome-guide { margin-top: 12px; }
    html.loop-page .welcome-guide-toggle { font-size: 15px; }
}
@media (min-width: 340px) and (max-width: 620px) {
    html.loop-page[data-visual-theme="pearl"] { --pearl-layout: "mobile-344x882"; --pearl-gutter: 14px; --pearl-grid-gap: 10px; --pearl-welcome-space: 10px; }
}
@media (min-width: 355px) and (max-width: 620px) {
    html.loop-page[data-visual-theme="pearl"] { --pearl-layout: "mobile-360x780"; --pearl-gutter: 16px; --pearl-topic-height: 94px; --pearl-welcome-space: 6px; }
}
@media (min-width: 355px) and (max-width: 374px) and (min-height: 790px) {
    html.loop-page[data-visual-theme="pearl"] { --pearl-layout: "mobile-360x800"; --pearl-welcome-space: 12px; --pearl-topic-height: 96px; }
}
@media (min-width: 375px) and (max-width: 620px) {
    html.loop-page[data-visual-theme="pearl"] { --pearl-layout: "mobile-375x812"; --pearl-gutter: 18px; --pearl-topic-icon: 24px; --pearl-welcome-space: 10px; --pearl-topic-height: 96px; }
}
@media (min-width: 390px) and (max-width: 620px) {
    html.loop-page[data-visual-theme="pearl"] { --pearl-layout: "mobile-390x844"; --pearl-grid-gap: 12px; --pearl-welcome-space: 12px; --pearl-ornament-size: 48px; }
}
@media (min-width: 393px) and (max-width: 620px) {
    html.loop-page[data-visual-theme="pearl"] { --pearl-layout: "mobile-393x852"; --pearl-gutter: 19px; --pearl-welcome-space: 14px; }
}
@media (min-width: 412px) and (max-width: 620px) {
    html.loop-page[data-visual-theme="pearl"] { --pearl-layout: "mobile-412x915"; --pearl-gutter: 20px; --pearl-welcome-space: 18px; --pearl-topic-height: 100px; }
}
@media (min-width: 414px) and (max-width: 620px) {
    html.loop-page[data-visual-theme="pearl"] { --pearl-layout: "mobile-414x896"; --pearl-grid-gap: 14px; --pearl-welcome-space: 16px; }
}
@media (min-width: 430px) and (max-width: 620px) {
    html.loop-page[data-visual-theme="pearl"] { --pearl-layout: "mobile-430x932"; --pearl-gutter: 22px; --pearl-welcome-space: 20px; --pearl-topic-height: 104px; --pearl-ornament-size: 52px; }
}

/* Short phones keep the conversation visible without shrinking readable text. */
@media (max-width: 620px) and (max-height: 700px) {
    html.loop-page[data-visual-theme="pearl"] { --pearl-logo-height: 52px; --pearl-welcome-space: 0px; }
    html.loop-page[data-visual-theme="pearl"] .feed-content { padding-top: 16px; }
    html.loop-page[data-visual-theme="pearl"] .composer-wrap { padding-bottom: calc(4px + env(safe-area-inset-bottom)); }
    html.loop-page[data-visual-theme="pearl"] #composer { --pearl-height: 68px; --pearl-radius: 28px; padding-block: 6px; }
    html.loop-page[data-visual-theme="pearl"] #message { min-height: 44px; max-height: 80px; padding-block: 6px; }
}

@media (max-height: 500px) {
    html.loop-page[data-visual-theme="pearl"] { --pearl-welcome-space: 0px; --pearl-logo-height: 52px; }
}
@media (max-width: 349px) {
    html.loop-page[data-visual-theme] .welcome .welcome-lead { font-size: 18px; }
}
html.loop-page[data-visual-theme="pearl"] #message:placeholder-shown {
    max-height: min(160px, 20dvh);
}
/* First visit: the question and a few examples, without clipping interactive choices. */
html.loop-page[data-visual-theme] .welcome { max-width: 680px; margin: 24px auto 0; }
html.loop-page[data-visual-theme] .welcome .welcome-lead { white-space: normal; font-size: 28px; line-height: 1.25; }
html.loop-page[data-visual-theme] .welcome .welcome-lead { font-size: 32px; font-weight: 500; margin-bottom: 26px; }
html.loop-page .welcome-lead > span { white-space: normal; }
html.loop-page .welcome-value { text-align: center; font: 16px/1.6 sans-serif; max-width: 480px; margin: 16px auto 28px; }
html.loop-page[data-visual-theme] .welcome .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; gap: 12px; }
html.loop-page[data-visual-theme] .welcome .topic-button { min-height: 64px; height: auto; padding: 12px; }
html.loop-page[data-visual-theme] .welcome .topic-text { font-size: 16px; hyphens: none; word-break: normal; overflow-wrap: normal; }
html.loop-page .more-topics { margin-top: 16px; text-align: center; }
html.loop-page .more-topics summary { font-size: 14px; }
html.loop-page[data-visual-theme="pearl"] #composer { --pearl-height: 80px; min-height: 80px; padding-block: 10px; }
html.loop-page[data-visual-theme="pearl"] #message { min-height: 44px; font-size: 18px; }
html.loop-page[data-visual-theme] .feed-content { padding-bottom: 60px; }
@media (max-width: 620px) {
    html.loop-page[data-visual-theme] .welcome { margin-top: 16px; }
    html.loop-page[data-visual-theme] .welcome .welcome-lead { font-size: 30px; margin-bottom: 22px; }
    html.loop-page .welcome-value { font-size: 15px; margin: 12px auto 24px; }
    html.loop-page[data-visual-theme] .welcome .topic-button { padding: 8px; min-height: 60px; }
    html.loop-page[data-visual-theme] .welcome .topic-text { font-size: 15px; }
    html.loop-page .loop-navigation { gap: 28px; }
}
@media (max-height: 650px) {
    html.loop-page .brand-caption { display: none; }
    html.loop-page[data-visual-theme] .feed-content:has(> .welcome) { padding-top: 8px; }
    html.loop-page[data-visual-theme] .welcome { margin-top: 0; }
    html.loop-page .welcome-value { display: none; }
    html.loop-page[data-visual-theme] .welcome .welcome-lead { font-size: 24px; margin-bottom: 8px; }
    html.loop-page[data-visual-theme] .welcome .topic-button { min-height: 52px; }
    html.loop-page .more-topics { margin-top: 8px; }
}
@media (forced-colors: active) {
    html.loop-page[data-visual-theme] .feed { -webkit-mask-image: none; mask-image: none; }
    html.loop-page[data-visual-theme="pearl"] .topic-button::before,
    html.loop-page[data-visual-theme="pearl"] .topic-button::after { display: none; }
    html.loop-page[data-visual-theme="pearl"] .topic-button { border: 1px solid ButtonText; background: Canvas; }
    html.loop-page[data-visual-theme="pearl"] .topic-text,
    html.loop-page[data-visual-theme="pearl"] .brand__name { color: CanvasText; -webkit-text-fill-color: CanvasText; }
}
html.loop-page[data-visual-theme="pearl"][data-motion="off"] .brand__name { animation: none; }
html.loop-page .draw-block .card-art {
    border: 3px solid #222832;
    box-shadow: 0 0 0 1px rgb(201 221 238 / 60%), 0 0 13px rgb(153 196 224 / 42%), 0 8px 18px rgb(12 18 30 / 18%);
}
html.loop-page #sheet.card-viewer {
    inset: var(--loop-viewport-top, 0px) 0 auto;
    width: 100%;
    max-width: none;
    height: var(--loop-viewport-height, 100dvh);
    max-height: var(--loop-viewport-height, 100dvh);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgb(8 12 20 / 94%);
    box-shadow: none;
    color: #f6f8fb;
}
html.loop-page #sheet.card-viewer::backdrop { background: rgb(8 12 20 / 88%); backdrop-filter: blur(8px); }
html.loop-page #sheet.card-viewer .sheet-heading {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    padding: 6px 16px;
    background: transparent;
    border: 0;
    color: inherit;
}
html.loop-page #sheet.card-viewer .sheet-heading h2 { grid-column: 2; text-align: center; margin: 0; }
html.loop-page #sheet.card-viewer #sheet-close { grid-column: 3; }
html.loop-page #sheet.card-viewer .sheet-body { padding: 12px 16px 28px; color: inherit; }
html.loop-page #sheet.card-viewer .zoom-card { max-width: none; display: flex; justify-content: center; margin: 0 auto 20px; }
html.loop-page #sheet.card-viewer .card-art {
    width: fit-content;
    height: auto;
    aspect-ratio: auto;
    padding: 3px;
    border: 3px solid #222832;
    background: #151b25;
    box-shadow: 0 0 0 1px rgb(210 230 248 / 65%), 0 0 26px rgb(161 205 235 / 35%), 0 24px 48px rgb(0 0 0 / 45%);
    animation: loop-card-float 5s ease-in-out infinite;
}
html.loop-page #sheet.card-viewer .card-art img {
    display: block;
    width: auto;
    height: auto;
    max-width: calc(80vw - 12px);
    max-height: calc(var(--loop-viewport-height, 100dvh) * .8 - 12px);
    object-fit: contain;
    border-radius: 3px;
}
html.loop-page #sheet.card-viewer .card-art.placeholder { width: min(70vw, 400px); height: min(60dvh, 520px); }
html.loop-page #sheet.card-viewer .zoom-caption { max-width: 640px; margin: auto; color: inherit; }
html.loop-page #sheet.card-viewer .zoom-caption p { color: inherit; }
html.loop-page #sheet.card-viewer #sheet-close:focus-visible { outline-color: #f6f8fb; }
@keyframes loop-card-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
html.loop-page[data-motion="off"] #sheet.card-viewer .card-art { animation: none; }
@media (max-width: 360px) {
    html.loop-page[data-visual-theme] .brand__name { font-size: 22px; }
    html.loop-page .brand-controls .brand { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) { html.loop-page #sheet.card-viewer .card-art { animation: none; } }
@media (prefers-reduced-motion: reduce) {
    html.loop-page[data-visual-theme="pearl"] .brand__name { animation: none; }
}