html.loop-page *{box-sizing:border-box}html.loop-page,html.loop-page body{margin:0;width:100%;height:100%;overflow:hidden}html.loop-page body{background:var(--bg);color:var(--ink);font-family:var(--body-font);font-size:15px;line-height:1.6;letter-spacing:0}html.loop-page button,html.loop-page input,html.loop-page textarea,html.loop-page select{font:inherit;color:inherit}html.loop-page button{cursor:pointer}html.loop-page button:disabled{cursor:default;opacity:.45}html.loop-page button,html.loop-page input,html.loop-page textarea,html.loop-page select{touch-action:manipulation}html.loop-page button{border:0;background:none}html.loop-page button:focus-visible,html.loop-page input:focus-visible,html.loop-page textarea:focus-visible,html.loop-page select:focus-visible,html.loop-page summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}html.loop-page a{color:var(--accent)}html.loop-page .hidden{display:none!important}html.loop-page .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}html.loop-page .app-shell{height:100dvh;height:100svh;display:flex;flex-direction:column;position:relative}html.loop-page .topbar{flex:none;display:flex;align-items:center;justify-content:center;height:76px;padding-top:env(safe-area-inset-top);z-index:2}html.loop-page .brand{display:flex;align-items:center;gap:9px;padding:10px 16px;letter-spacing:0;font-family:var(--display-font);font-size:25px;font-weight:400}html.loop-page .brand-mark{font-size:32px;line-height:1}html.loop-page .brand-dot{font-size:18px;opacity:.4;margin-left:2px}html.loop-page .brand:hover .brand-dot{opacity:1}html.loop-page .feed{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent;outline:none}html.loop-page .feed-content{width:min(100%,780px);margin:auto;padding:22px 28px 50px;min-height:100%}html.loop-page .welcome{max-width:570px;margin:5vh auto 40px;text-align:center}html.loop-page .welcome-symbol{width:72px;height:72px;display:grid;place-items:center;margin:0 auto 24px;border:1px solid var(--line);border-radius:50%;font-size:42px;color:var(--accent);background:var(--surface);position:relative}html.loop-page .welcome-symbol:before,html.loop-page .welcome-symbol:after{content:"";position:absolute;inset:7px;border:1px solid var(--line);border-radius:50%}html.loop-page .welcome-symbol:after{inset:-9px;border-style:dotted;opacity:.6}html.loop-page .eyebrow{font-size:10px;letter-spacing:0;color:var(--muted);margin:0 0 14px}html.loop-page .welcome h1,html.loop-page .age-dialog h1{font-family:var(--display-font);font-weight:400;font-size:32px;line-height:1.22;letter-spacing:0;margin:0 0 18px}html.loop-page .welcome p{color:var(--muted);max-width:440px;margin:0 auto 24px}html.loop-page .topic-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;text-align:left;margin:30px auto 16px}html.loop-page .topic-button{padding:15px 17px;border:1px solid var(--line);border-radius:8px;display:flex;gap:12px;align-items:center;background:var(--surface);transition:transform .15s,border-color .15s}html.loop-page .topic-button:hover{border-color:var(--accent);transform:translateY(-2px)}html.loop-page .topic-symbol{font-size:21px;color:var(--accent);flex:none}html.loop-page .topic-text{font-size:13px}html.loop-page .demo-badge{display:inline-block;color:var(--muted);border:1px dashed var(--line);border-radius:8px;padding:6px 11px;font-size:11px;max-width:430px;margin-top:18px}html.loop-page .message{margin:0 0 28px;animation:arrive .2s ease-out}html.loop-page .message-meta{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:10px;letter-spacing:0;margin-bottom:8px}html.loop-page .message-meta time{letter-spacing:0;opacity:.65;font-size:10px}html.loop-page .message.assistant .message-meta:before{content:"✧";font-size:15px;color:var(--accent)}html.loop-page .message.user{display:flex;flex-direction:column;align-items:flex-end}html.loop-page .message.user .message-body{background:var(--user);border-radius:8px 8px 4px 8px;padding:14px 19px;max-width:86%}html.loop-page .message.user .message-meta{padding-right:7px}html.loop-page .message-body{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.85;font-size:15px}html.loop-page .message-body p{margin:0 0 14px}html.loop-page .message-body.is-skipped{color:var(--muted);opacity:.65}html.loop-page .message.system{margin:20px 0}html.loop-page .message.system .message-body{font-size:12px;color:var(--muted);padding-left:12px;border-left:2px solid var(--line)}html.loop-page .message.warning{padding:18px;border:1px solid var(--danger);background:var(--alert);border-radius:8px}html.loop-page .message.warning .message-meta{color:var(--danger)}html.loop-page .message.warning .message-body{font-size:14px}html.loop-page .message-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}html.loop-page .action-button,html.loop-page .chip{border:1px solid var(--line);border-radius:8px;padding:8px 13px;font-size:12px;line-height:1.3;background:var(--surface);text-align:left}html.loop-page .action-button:hover,html.loop-page .chip:hover,html.loop-page .chip.selected{border-color:var(--accent);color:var(--accent);background:var(--soft)}html.loop-page .action-button.muted-action{border-color:transparent;background:none;color:var(--muted);padding-left:5px;padding-right:5px}html.loop-page .action-button.is-skipped{text-decoration:line-through;opacity:.5}html.loop-page .animation-skip{color:var(--muted);font-size:11px;margin-top:8px;padding:3px 0}html.loop-page .event-more{font-size:10px;margin-top:9px;color:var(--muted)}html.loop-page .event-more summary{cursor:pointer;display:inline-block}html.loop-page .event-more button{font-size:11px;display:block;padding:6px 0;color:var(--muted)}html.loop-page .event-more button:hover{color:var(--ink)}html.loop-page .draw-block{margin:12px 0 35px}html.loop-page .draw-heading{font-family:var(--display-font);font-weight:400;font-size:22px;margin:0 0 8px}html.loop-page .draw-question{font-size:12px;color:var(--muted);margin:0 0 18px;white-space:pre-wrap;overflow-wrap:anywhere}html.loop-page .cards{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 13px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--line) transparent}html.loop-page .card{width:150px;flex:none;scroll-snap-align:start;padding:0;text-align:left}html.loop-page .card-art{height:220px;border-radius:8px;background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;box-shadow:0 5px 16px #24322207;transition:transform .2s}html.loop-page .card:hover .card-art{transform:translateY(-3px)}html.loop-page .card-art img{width:100%;height:100%;object-fit:contain}html.loop-page .card-art.reversed img{transform:rotate(180deg)}html.loop-page .card-art.placeholder:before{content:"";inset:9px;border:1px solid var(--line);border-radius:6px;position:absolute}html.loop-page .card-art.placeholder:after{content:"";width:75px;height:110px;border:1px solid var(--accent);border-radius:50%;position:absolute;opacity:.35;transform:rotate(25deg)}html.loop-page .card-glyph{font-family:var(--display-font);font-size:50px;color:var(--accent);z-index:1}html.loop-page .card-position{font-size:10px;color:var(--muted);margin:10px 0 4px;display:block}html.loop-page .card-name{font-size:13px;line-height:1.5;display:block}html.loop-page .card-orientation{font-size:10px;color:var(--muted)}html.loop-page .zoom-card{max-width:280px;margin:0 auto}html.loop-page .zoom-card .card-art{height:400px}html.loop-page .zoom-caption{text-align:center}html.loop-page .zoom-caption h3{font-family:var(--display-font);font-size:26px;font-weight:400;margin-bottom:4px}html.loop-page .zoom-caption p{white-space:pre-wrap;overflow-wrap:anywhere}html.loop-page .composer-wrap{flex:none;padding:0 24px calc(14px + env(safe-area-inset-bottom));background:linear-gradient(to bottom,transparent,var(--bg) 22px)}html.loop-page .composer-inner{max-width:724px;margin:auto}html.loop-page .composer-context{display:flex;justify-content:space-between;align-items:center;min-height:30px;padding:0 2px 8px;gap:15px}html.loop-page .context-button{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--muted);max-width:85%;padding:2px 0}html.loop-page .context-button span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}html.loop-page .context-button:hover{color:var(--ink)}html.loop-page #composer{display:flex;align-items:flex-end;padding:9px 10px 9px 18px;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 4px 26px #26312204}html.loop-page #composer:focus-within{border-color:var(--accent)}html.loop-page #message{background:none;resize:none;border:0;outline:none;box-shadow:none;padding:8px 0;max-height:160px;min-height:39px;line-height:1.6;flex:1;min-width:0;font-size:14px}html.loop-page #message::placeholder{color:var(--muted);opacity:.85}html.loop-page .send-button{width:39px;height:39px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--accent);color:var(--accent-ink)}html.loop-page .send-button svg{width:22px;height:22px}html.loop-page .composer-footer{display:flex;justify-content:space-between;align-items:center;padding:8px 5px 0;font-size:10px;color:var(--muted);min-height:23px}html.loop-page .sound-toggle{padding:0 3px;line-height:1;font-size:16px}html.loop-page .quiet-button{color:var(--muted);font-size:11px;padding:3px 0}html.loop-page .quiet-button:hover{color:var(--ink)}html.loop-page .latest{position:absolute;bottom:170px;left:50%;transform:translateX(-50%);background:var(--surface);color:var(--ink);padding:8px 14px;border:1px solid var(--line);border-radius:8px;font-size:11px;box-shadow:0 4px 15px #0001;white-space:nowrap;z-index:2}html.loop-page .conversation-banner{padding:10px 24px;max-width:772px;width:100%;margin:auto;color:var(--danger);font-size:12px;text-align:center}html.loop-page .conversation-banner button{font-size:12px;text-decoration:underline}html.loop-page .load-earlier{display:block;margin:0 auto 30px;color:var(--muted);font-size:11px;padding:8px 12px;border:1px solid var(--line);border-radius:8px}html.loop-page .busy-row{display:flex;gap:12px;align-items:center;color:var(--muted);font-size:12px;margin:12px 0 28px}html.loop-page .busy-orbit{width:24px;height:24px;border:1px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:orbit 1.5s linear infinite}html.loop-page .busy-row span{max-width:80%;white-space:pre-wrap}html.loop-page .sheet,html.loop-page .prompt-dialog,html.loop-page .age-dialog{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);padding:0;max-height:min(86dvh,850px);width:min(92vw,680px)}html.loop-page dialog::backdrop{background:#18221b60;backdrop-filter:blur(6px)}html.loop-page .sheet-heading{display:flex;align-items:center;justify-content:space-between;padding:23px 25px 15px;position:sticky;top:0;background:var(--surface);z-index:2;border-bottom:1px solid var(--line)}html.loop-page h2{font-size:23px;font-family:var(--display-font);font-weight:400;line-height:1.3;margin:0}html.loop-page .icon-button{font-size:25px;width:32px;height:32px;line-height:1;color:var(--muted);border-radius:50%}html.loop-page .icon-button:hover{background:var(--soft)}html.loop-page .sheet-body{padding:22px 25px 28px;overflow-wrap:anywhere}html.loop-page .menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}html.loop-page .menu-item{border:1px solid var(--line);border-radius:8px;padding:18px;text-align:left;display:flex;flex-direction:column;gap:4px}html.loop-page .menu-item:hover{background:var(--soft)}html.loop-page .menu-item span{font-size:13px}html.loop-page .menu-item small{font-size:11px;color:var(--muted)}html.loop-page .menu-current{display:flex;align-items:center;gap:10px;padding:0 0 22px;margin:0 0 18px;border-bottom:1px solid var(--line)}html.loop-page .menu-current p{margin:0;color:var(--muted);font-size:11px}html.loop-page .menu-current strong{font-weight:500;display:block;font-size:14px}html.loop-page .menu-status{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}html.loop-page .menu-footer{display:flex;gap:15px;flex-wrap:wrap;justify-content:space-between;border-top:1px solid var(--line);padding-top:17px;margin-top:20px}html.loop-page .menu-footer button{font-size:11px;color:var(--muted);padding:0}html.loop-page .primary-button,html.loop-page .secondary-button,html.loop-page .danger-button{padding:11px 17px;border-radius:8px;font-size:13px;line-height:1.4;text-align:center}html.loop-page .primary-button{background:var(--accent);color:var(--accent-ink)}html.loop-page .secondary-button{border:1px solid var(--line);background:var(--surface)}html.loop-page .secondary-button:hover{background:var(--soft)}html.loop-page .danger-button{border:1px solid var(--danger);color:var(--danger)}html.loop-page .full-width{width:100%}html.loop-page .text-button{display:block;color:var(--muted);font-size:12px;margin:15px auto 0}html.loop-page .muted{color:var(--muted);font-size:13px}html.loop-page .empty{text-align:center;color:var(--muted);padding:32px 15px;font-size:13px}html.loop-page .notice{font-size:12px;padding:13px 15px;border:1px solid var(--line);border-radius:8px;background:var(--soft);white-space:pre-wrap}html.loop-page .error-notice{color:var(--danger);background:var(--alert)}html.loop-page .sheet-toolbar{display:flex;gap:9px;align-items:center;margin-bottom:17px;flex-wrap:wrap}html.loop-page .sheet-toolbar .primary-button{margin-left:auto}html.loop-page .search-input,html.loop-page .field-input{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:11px 13px;min-width:0;font-size:14px}html.loop-page .filters{display:flex;gap:7px;flex-wrap:wrap;margin:13px 0 18px}html.loop-page .catalog-list{display:grid;gap:10px}html.loop-page .catalog-item{padding:16px;border:1px solid var(--line);border-radius:8px;text-align:left;width:100%;background:var(--surface)}html.loop-page .catalog-item:hover{border-color:var(--accent);background:var(--soft)}html.loop-page .catalog-item strong{font-family:var(--display-font);font-size:20px;font-weight:400;display:block;margin:5px 0 7px;line-height:1.3}html.loop-page .catalog-item p{font-size:12px;color:var(--muted);margin:0}html.loop-page .catalog-item small{font-size:10px;text-transform:uppercase;letter-spacing:0;color:var(--accent)}html.loop-page .catalog-item .catalog-positions{font-size:10px;margin-top:10px;color:var(--muted)}html.loop-page .catalog-count{font-size:11px;color:var(--muted);margin:0 0 15px}html.loop-page .section-label{font-size:10px;letter-spacing:0;color:var(--muted);text-transform:uppercase;margin:24px 0 9px}html.loop-page .list-card{border-bottom:1px solid var(--line);padding:16px 0}html.loop-page .list-card:first-child{padding-top:0}html.loop-page .list-card:last-child{border-bottom:0}html.loop-page .list-card h3{font-weight:500;font-size:14px;margin:0 0 5px;line-height:1.5}html.loop-page .list-card p{font-size:12px;color:var(--muted);margin:4px 0;white-space:pre-wrap}html.loop-page .list-card-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}html.loop-page .list-card-actions button{padding:2px 0;font-size:11px;color:var(--accent)}html.loop-page .list-card-actions button.danger{color:var(--danger)}html.loop-page .conversation-open{padding:0;text-align:left;width:100%}html.loop-page .conversation-open:hover h3{color:var(--accent)}html.loop-page .memory-content{white-space:pre-wrap;font-size:13px}html.loop-page .memory-source{font-size:10px;color:var(--muted);margin-top:6px}html.loop-page .memory-rejected{opacity:.6}html.loop-page .setting-row{padding:17px 0;border-bottom:1px solid var(--line)}html.loop-page .setting-row:first-child{padding-top:0}html.loop-page .setting-row:last-child{border:0}html.loop-page .setting-row label,html.loop-page .setting-label{display:block;font-size:13px;margin-bottom:9px}html.loop-page .setting-row p{font-size:11px;color:var(--muted);margin:8px 0 0}html.loop-page .setting-options{display:flex;gap:7px;flex-wrap:wrap}html.loop-page .setting-options button{font-size:12px;border:1px solid var(--line);border-radius:8px;padding:8px 12px}html.loop-page .setting-options button.selected{background:var(--soft);border-color:var(--accent)}html.loop-page .music-controls{display:flex;gap:8px;margin-top:10px}html.loop-page .music-controls button{flex:1}html.loop-page .music-volume{width:100%;accent-color:var(--accent)}html.loop-page .prompt-dialog{width:min(92vw,520px);padding:27px}html.loop-page .prompt-dialog h2{margin-bottom:13px}html.loop-page .prompt-dialog p{white-space:pre-wrap;margin:0 0 18px}html.loop-page .prompt-dialog label{display:block;font-size:12px;color:var(--muted);margin-bottom:7px}html.loop-page .prompt-dialog textarea{resize:vertical;max-height:36dvh;min-height:100px;width:100%;padding:13px;border:1px solid var(--line);border-radius:8px;background:var(--bg);font-size:14px;line-height:1.6}html.loop-page .dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}html.loop-page .age-dialog{width:min(92vw,490px);padding:38px 34px;text-align:center}html.loop-page .entry-symbol{font-size:48px;color:var(--accent);line-height:1.2;margin-bottom:18px}html.loop-page .age-dialog h1{font-size:34px}html.loop-page .age-dialog>p:not(.eyebrow){font-size:13px;color:var(--muted)}html.loop-page .age-note{text-align:left;padding:16px 0 20px;margin-top:19px;border-top:1px solid var(--line)}html.loop-page .age-note p{font-size:11px;color:var(--muted);line-height:1.75;margin:0 0 16px}html.loop-page .check-row{display:flex;align-items:flex-start;gap:11px;font-size:13px;cursor:pointer}html.loop-page .check-row input{accent-color:var(--accent);margin:4px 0 0;width:16px;height:16px;flex:none}html.loop-page .pair-code{font-size:30px;letter-spacing:0;text-align:center;font-family:var(--body-font);padding:22px;background:var(--soft);border-radius:8px;user-select:all}html.loop-page .toast{position:fixed;left:50%;bottom:calc(26px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:100;background:var(--ink);color:var(--bg);border-radius:8px;padding:12px 17px;font-size:12px;max-width:min(88vw,510px);box-shadow:var(--shadow);white-space:pre-wrap}html.loop-page .timeline-item{padding:14px 0;border-bottom:1px solid var(--line)}html.loop-page .timeline-item .check-row span{white-space:pre-wrap;font-size:12px}html.loop-page .appeal-explanation{min-height:100px;resize:vertical}html.loop-page .inline-error{font-size:12px;color:var(--danger);margin-top:10px}html.loop-page .inline-loading{color:var(--muted);font-size:12px;padding:18px;text-align:center}@keyframes orbit{to{transform:rotate(360deg)}}@keyframes arrive{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1100px){html.loop-page .topbar{height:86px}html.loop-page .feed-content{padding-top:28px}html.loop-page .welcome{margin-top:7vh}html.loop-page .composer-wrap{padding-bottom:19px}html.loop-page .message-body{font-size:16px}html.loop-page .welcome p{font-size:14px}}
@media(max-width:620px){html.loop-page .topbar{height:calc(61px + env(safe-area-inset-top))}html.loop-page .brand{font-size:23px}html.loop-page .brand-mark{font-size:29px}html.loop-page .feed-content{padding:20px 20px 35px}html.loop-page .welcome{margin:3vh auto 30px}html.loop-page .welcome-symbol{width:59px;height:59px;font-size:34px;margin-bottom:25px}html.loop-page .welcome p{font-size:13px}html.loop-page .topic-grid{gap:8px;margin-top:25px}html.loop-page .topic-button{padding:13px 12px;gap:9px}html.loop-page .topic-text{font-size:12px}html.loop-page .topic-symbol{font-size:19px}html.loop-page .composer-wrap{padding:0 14px calc(8px + env(safe-area-inset-bottom))}html.loop-page .composer-footer{font-size:9px}html.loop-page #message{font-size:16px}html.loop-page #composer{border-radius:8px;padding-left:14px}html.loop-page .composer-context{padding:0 4px 7px}html.loop-page .context-button{font-size:10px}html.loop-page .message{margin-bottom:25px}html.loop-page .message-body{font-size:14px}html.loop-page .message.user .message-body{max-width:90%;padding:12px 15px}html.loop-page .message-actions{gap:7px}html.loop-page .action-button{font-size:11px;padding:8px 11px}html.loop-page .card{width:131px}html.loop-page .card-art{height:193px}html.loop-page .cards{gap:12px}html.loop-page .draw-heading{font-size:21px}html.loop-page .sheet{width:100%;max-width:100%;max-height:90dvh;border-radius:8px 8px 0 0;margin:auto 0 0;border-bottom:0}html.loop-page .sheet-heading{padding:22px 20px 15px}html.loop-page .sheet-body{padding:20px 20px calc(25px + env(safe-area-inset-bottom))}html.loop-page .menu-item{padding:15px}html.loop-page .age-dialog{padding:30px 26px}html.loop-page .age-dialog h1{font-size:31px}html.loop-page .latest{bottom:155px}html.loop-page .conversation-banner{padding:8px 20px;font-size:11px}html.loop-page .prompt-dialog{padding:23px}html.loop-page .zoom-card{max-width:238px}html.loop-page .zoom-card .card-art{height:352px}}
@media(prefers-reduced-motion:reduce){html.loop-page *,html.loop-page *:before,html.loop-page *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}html.loop-page[data-motion=off] *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html.loop-page .pair-code{overflow-wrap:anywhere;letter-spacing:0;font-size:23px;line-height:1.8}html.loop-page .catalog-item.selected{border-color:var(--accent);background:var(--soft)}html.loop-page .sheet-body>.secondary-button.full-width{margin-top:15px}html.loop-page .catalog-list+div>.full-width{margin-top:16px}
html.loop-page .catalog-inline{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:25px 0;margin:18px 0 30px;scroll-margin-top:18px}html.loop-page .catalog-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}html.loop-page .catalog-heading h2{font-size:25px}html.loop-page .catalog-inline>.muted{font-size:12px;margin-bottom:18px}html.loop-page .catalog-inline .catalog-list{grid-template-columns:1fr 1fr}html.loop-page .catalog-inline .catalog-item:last-child:nth-child(odd){grid-column:1/-1}html.loop-page .catalog-inline .catalog-item strong{font-size:19px}html.loop-page .catalog-inline .search-input{background:var(--surface)}@media(max-width:500px){html.loop-page .catalog-inline .catalog-list{grid-template-columns:1fr}html.loop-page .catalog-inline .catalog-item{padding:13px 15px}html.loop-page .catalog-inline .catalog-item strong{font-size:19px}html.loop-page .catalog-heading h2{font-size:23px}}
html.loop-page .app-shell{height:100vh;height:var(--loop-viewport-height,100dvh)}
/* The feed scrolls independently; keyboard and composer resizing must not anchor it to the last row. */
html.loop-page .feed{overflow-anchor:none}

/* Compact account form within the existing Loop sheet. */
html.loop-page .loop-account-form { max-width: 380px; margin: 0 auto; display: grid; gap: 14px; text-align: left; }
html.loop-page .loop-account-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
html.loop-page .loop-account-tabs button { min-height: 44px; font-size: 15px; padding: 8px; }
html.loop-page .loop-account-tabs [aria-selected="true"] { border-bottom: 2px solid currentColor; font-weight: 700; }
html.loop-page .loop-account-copy { font-size: 15px; line-height: 1.5; margin: 0; }
html.loop-page .loop-account-field { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
html.loop-page .loop-account-field input { width: 100%; min-width: 0; height: 46px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 16px; font-weight: 400; }
html.loop-page .loop-account-field small { font-size: 12px; font-weight: 400; }
html.loop-page .loop-account-remember { display: flex; gap: 8px; align-items: center; font-size: 14px; min-height: 32px; }
html.loop-page .loop-account-remember input { width: 18px; height: 18px; }
html.loop-page .loop-account-error { color: var(--danger, #942e45); font-size: 14px; margin: 0; overflow-wrap: anywhere; }
html.loop-page .loop-account-error:empty { display: none; }
html.loop-page .loop-account-links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
html.loop-page .loop-account-links button { min-height: 44px; font-size: 14px; }
html.loop-page .loop-account-form > .primary-button { min-height: 46px; font-size: 16px; }
html.loop-page .account-invite { margin: 24px 0; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 15px; }
html.loop-page .account-invite > .icon-button { float: right; }
html.loop-page .account-invite p { margin: 8px 0; }
@media (max-width: 420px) { html.loop-page .loop-account-form { gap: 10px; } }
html.loop-page #sheet:has(.loop-account-form) { max-height: calc(var(--loop-viewport-height, 100dvh) - 12px); }
@media (max-height: 650px) {
  html.loop-page #sheet:has(.loop-account-form) .sheet-body { padding-top: 12px; padding-bottom: 12px; }
  html.loop-page .loop-account-copy { font-size: 14px; line-height: 1.4; }
}

html.loop-page .expired-drafts{text-align:left;border:1px solid var(--line);border-radius:8px;padding:15px;margin:18px 0}html.loop-page .expired-drafts h2{font-size:15px;margin:0 0 8px}html.loop-page .expired-drafts p{font-size:12px;line-height:1.6}html.loop-page .expired-drafts textarea{min-height:100px;max-height:28dvh;resize:vertical}html.loop-page .expired-drafts .field-input{margin-bottom:10px;width:100%}html.loop-page .age-dialog{max-height:92dvh;overflow-y:auto}

html.loop-page .topbar{position:relative}html.loop-page .menu-tip{position:absolute;top:calc(100% - 7px);font-size:10px;color:var(--muted);pointer-events:none;text-align:center;max-width:90vw}html.loop-page .reply-context{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 3px 8px;padding:8px 11px;border-left:2px solid var(--accent);background:var(--soft);border-radius:0 8px 8px 0}html.loop-page .reply-context>div{min-width:0}html.loop-page .reply-context span{font-size:11px;color:var(--accent)}html.loop-page .reply-context p{margin:0;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}html.loop-page .reply-context .icon-button{flex:none}html.loop-page .shuffle-pause{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:16px 0;margin-bottom:24px}html.loop-page .shuffle-pause p{flex:1;min-width:160px;margin:0}html.loop-page .shuffle-pause .busy-orbit{flex:none}html.loop-page .menu-footer a{font-size:11px;color:var(--muted);text-decoration:none}html.loop-page .memory-page,html.loop-page .chapter-page{min-width:0}

html.loop-page .sheet-brand{font-family:var(--display-font);font-size:17px;color:var(--accent);padding:0;text-align:left;flex:none}html.loop-page .sheet-heading{flex-wrap:wrap;gap:8px}html.loop-page .sheet-heading h2{flex:1;min-width:0;font-size:20px}html.loop-page .sheet-brand+h2{border-left:1px solid var(--line);padding-left:12px}@media(max-width:620px){html.loop-page .sheet-brand{font-size:15px}html.loop-page .sheet-heading h2{font-size:17px}html.loop-page .sheet-brand+h2{padding-left:8px}}

html.loop-page .message.event-restored{animation:none}

html.loop-page {
  --ink: var(--text);
  --soft: var(--surface-3);
  --user: color-mix(in srgb, var(--accent) 9%, var(--surface-solid));
  --alert: color-mix(in srgb, var(--danger) 8%, var(--surface-solid));
  --font: var(--body-font);
}
html.loop-page body::before, html.loop-page body::after { display: none; }
html.loop-page * { letter-spacing: 0; }
html.loop-page .app-shell { --loop-daily-card-width: min(560px, calc(var(--loop-viewport-height, 100dvh) * .65 * 15 / 22)); width: 100%; max-width: none; min-height: 0; margin: 0; padding: 0; background: none; }
html.loop-page body { position: fixed; inset: var(--loop-viewport-top, 0px) 0 auto; height: var(--loop-viewport-height, 100dvh); }
html.loop-page[data-theme] .toast { background: var(--surface-solid); color: var(--text); border: 1px solid var(--line-strong); bottom: calc(var(--loop-composer-height, 145px) + 16px); }
html.loop-page .toast::before, html.loop-page .toast::after { display: none; }
html.loop-page .topbar { border: 0; background: none; box-shadow: none; padding-inline: max(8px, env(safe-area-inset-left), env(safe-area-inset-right)); }
html.loop-page .menu-tip { top: auto; bottom: 0; }
html.loop-page .brand { gap: 10px; margin: 0; width: auto; min-width: 0; min-height: 44px; border-radius: 8px; }
html.loop-page .brand__name { font-size: 25px; }
html.loop-page .brand-controls { position: relative; flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; width: min(100%, max(360px, var(--loop-daily-card-width))); }
html.loop-page .brand-controls .brand { grid-column: 2; padding-inline: 2px; }
html.loop-page .header-actions { grid-column: 3; display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 0; min-width: 0; }
html.loop-page .brand-controls .sound-toggle, html.loop-page .brand-controls .menu-toggle { flex: none; position: static; transform: none; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; color: var(--accent); border-radius: 50%; }
html.loop-page .brand-controls .sound-toggle:hover, html.loop-page .brand-controls .menu-toggle:hover { background: var(--soft); }
html.loop-page .menu-symbol { display: block; width: 22px; height: 22px; background: currentColor; mask: url('./icons/settings.svg') center / contain no-repeat; -webkit-mask: url('./icons/settings.svg') center / contain no-repeat; }
html.loop-page .sound-symbol { display: block; width: 22px; height: 22px; background: currentColor; mask: url('./icons/volume-x.svg?v=1427d51ef005ca1732ef5924') center / contain no-repeat; -webkit-mask: url('./icons/volume-x.svg?v=1427d51ef005ca1732ef5924') center / contain no-repeat; }
html.loop-page .sound-toggle[data-playing=true] .sound-symbol { mask-image: url('./icons/volume-2.svg?v=547980257f1cd41ff643c8e7'); -webkit-mask-image: url('./icons/volume-2.svg?v=547980257f1cd41ff643c8e7'); }
html.loop-page .feed { padding: 0; width: 100%; }
html.loop-page .feed-content { max-width: 780px; }
html.loop-page .welcome { margin-top: 36px; }
html.loop-page .welcome .welcome-lead { font-size: 17px; line-height: 1.7; color: var(--ink); max-width: 520px; }
html.loop-page .topic-grid { gap: 0 20px; }
html.loop-page .topic-button { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; padding: 15px 0; min-height: 60px; }
html.loop-page .topic-button:hover { transform: none; color: var(--accent); }
html.loop-page .welcome-guide { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); text-align: left; }
html.loop-page .welcome-guide h2 { margin: 0 0 20px; font-family: var(--display-font); font-size: 22px; font-weight: 400; line-height: 1.3; }
html.loop-page .welcome-guide-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; margin: 0; }
html.loop-page .welcome-guide-item { min-width: 0; overflow-wrap: anywhere; }
html.loop-page .welcome-guide-item dt { margin: 0 0 6px; font-size: 14px; font-weight: 600; line-height: 1.5; }
html.loop-page .welcome-guide-item dd { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; text-align: justify; hyphens: auto; }
html.loop-page .guide-content .welcome-guide-notice { max-width: none; margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; text-align: justify; hyphens: auto; }
html.loop-page .welcome-guide-notice strong { color: var(--ink); font-weight: 600; }
html.loop-page .sheet .welcome-guide-list { grid-template-columns: minmax(0, 1fr); }
html.loop-page .card { background: none; border: 0; border-radius: 0; overflow: visible; box-shadow: none; transform: none; }
html.loop-page .card-position, html.loop-page .card-name, html.loop-page .card-orientation { padding-inline: 4px; overflow-wrap: anywhere; }
html.loop-page .card-art { aspect-ratio: 15 / 22; border-radius: 8px; overflow: hidden; }
html.loop-page .draw-block { min-width: 0; max-width: 100%; }
html.loop-page .draw-block .cards {
  max-width: 100%;
  min-width: 0;
  align-items: flex-start;
  padding: 6px 4px 14px;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--muted) transparent;
}
html.loop-page .draw-block .cards::-webkit-scrollbar { height: 6px; }
html.loop-page .draw-block .cards::-webkit-scrollbar-track { background: transparent; }
html.loop-page .draw-block .cards::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 3px; }
html.loop-page .draw-block .cards > .card { width: 300px; flex: 0 0 300px; }
html.loop-page .draw-block .cards .card-art { height: auto; aspect-ratio: 15 / 22; }
@media (max-width: 620px) {
  html.loop-page .draw-block .cards > .card { width: 262px; flex-basis: 262px; }
  html.loop-page .draw-block .cards .card-art { aspect-ratio: 131 / 193; }
}
html.loop-page .catalog-item { background: var(--surface-solid); }
html.loop-page .message.user .message-body { box-shadow: none; }
html.loop-page .message.assistant .message-body { font-size: 16px; text-align: justify; text-align-last: start; hyphens: auto; }
html.loop-page .answer-paragraph:last-child { margin-bottom: 0; }
html.loop-page .message-continuation { margin-top: 18px; }
html.loop-page .continuation-practices { display: flex; flex-wrap: wrap; gap: 8px; }
html.loop-page .continuation-question { display: block; width: 100%; margin-top: 12px; padding: 6px 0; color: var(--accent); text-align: left; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
html.loop-page .continuation-question-text { display: block; margin-top: 4px; font-weight: 500; }
html.loop-page .reply-context p { white-space: normal; overflow-wrap: anywhere; }
html.loop-page .paragraph-enter { animation: arrive .5s ease-out both; }
html.loop-page .message.is-revealing > .message-actions, html.loop-page .message.is-revealing > .message-continuation, html.loop-page .message.is-revealing > .event-more { display: none; }
html.loop-page .composer-wrap { background: var(--bg); }
html.loop-page .composer-footer { gap: 8px 16px; flex-wrap: wrap; align-items: baseline; }
html.loop-page .composer-tools { display: flex; flex-wrap: wrap; gap: 0 14px; align-items: center; min-width: 0; max-width: 100%; }
html.loop-page #review-button, html.loop-page #pdf-button, html.loop-page #guide-button { min-height: 44px; min-width: 0; max-width: 100%; color: var(--accent); font-weight: 700; text-align: left; text-decoration: underline; text-underline-offset: 3px; }
html.loop-page #pdf-button:disabled { opacity: .45; cursor: not-allowed; }
html.loop-page #composer-hint { flex: 1; min-width: 160px; text-align: right; overflow-wrap: anywhere; }
html.loop-page .composer-context { flex-wrap: wrap; }
html.loop-page .composer-context .context-button { flex: 1; min-width: 130px; max-width: 100%; }
html.loop-page #catalog-button {
  min-height: 44px;
  flex: none;
  order: 1;
  margin-inline-start: auto;
  padding: 8px 14px;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  box-shadow: none;
}
html.loop-page #catalog-button:hover:not(:disabled) {
  text-decoration: underline;
  text-underline-offset: 4px;
}
html.loop-page #catalog-button:active:not(:disabled) { color: var(--accent); }
html.loop-page #catalog-button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
html.loop-page .busy-row:has(> .busy-orbit) > span:not(.busy-orbit) {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
}
html.loop-page .busy-row > .busy-orbit {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-width: 2px;
  border-top-color: var(--ink);
  animation: orbit 1s linear infinite;
}
html.loop-page[data-motion="off"] .busy-row > .busy-orbit { animation: none; }
@media (prefers-reduced-motion: reduce) {
  html.loop-page .busy-row > .busy-orbit { animation: none; }
}
html.loop-page #composer { border-radius: 8px; background: var(--surface-solid); }
html.loop-page .sheet, html.loop-page .prompt-dialog, html.loop-page .age-dialog { background: var(--surface-solid); }
html.loop-page .sheet { position: fixed; top: calc(var(--loop-viewport-top, 0px) + 76px); bottom: auto; margin: 0 auto; width: min(540px, calc(100% - 40px)); max-height: calc(var(--loop-viewport-height, 100dvh) - 100px); }
html.loop-page .sheet::backdrop { backdrop-filter: none; background: rgb(0 0 0 / 12%); }
html.loop-page .sheet-heading { background: var(--surface-solid); }
html.loop-page .icon-button { width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; flex: none; }
html.loop-page .menu-grid { grid-template-columns: 1fr; gap: 0; }
html.loop-page .context-choice { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); min-height: 44px; }
html.loop-page .context-choice input { flex: none; width: 20px; height: 20px; margin: 3px 0; }
html.loop-page .context-choice span { min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
html.loop-page .context-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 20px 0 8px; border-bottom: 1px solid var(--line); }
html.loop-page .context-tabs button { min-height: 44px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; }
html.loop-page .context-tabs button[aria-selected=true] { border-bottom-color: var(--accent); color: var(--accent); }
html.loop-page .menu-item { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 13px 8px; }
html.loop-page .theme-swatches { display: flex; gap: 12px; flex-wrap: wrap; }
html.loop-page .theme-swatch { width: 44px; height: 44px; min-width: 44px; min-height: 44px; border: 2px solid var(--line-strong); border-radius: 50%; padding: 0; }
html.loop-page .theme-swatch[aria-pressed=true] { outline: 2px solid var(--accent); outline-offset: 3px; }
html.loop-page .theme-swatch--cream { background: #fbf8f1; }
html.loop-page .theme-swatch--premium { background: #232429; }
html.loop-page .theme-swatch--sky { background: #bfe4f6; }
html.loop-page .theme-swatch--pearl { background: radial-gradient(circle at 28% 24%, rgba(255,255,255,.95), transparent 22%), linear-gradient(135deg, #fff7f7 0%, #eef3f8 34%, #fffefb 62%, #dde8ef 100%); }
html.loop-page .theme-swatch--sage { background: #d5dfce; }
html.loop-page .theme-swatch--cosmos { background: #716f96; }
@media (min-width: 1100px) {
  html.loop-page .message.assistant .message-body { font-size: 17px; }
}
@media (max-width: 620px) {
  html.loop-page .sheet { inset: auto 0 calc(100% - var(--loop-viewport-top, 0px) - var(--loop-viewport-height, 100dvh)); margin: 0; width: 100%; max-height: calc(var(--loop-viewport-height, 100dvh) * .88); }
  html.loop-page .welcome { margin-top: 16px; }
  html.loop-page .welcome .welcome-lead { font-size: 16px; }
  html.loop-page .welcome-guide-list { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  html.loop-page .message.assistant .message-body { font-size: 15px; }
  html.loop-page .brand__name { font-size: 22px; }
}

/* Keep touch targets usable while leaving room for the conversation above the keyboard. */
html.loop-page button, html.loop-page summary, html.loop-page .check-row { min-height: 44px; }
html.loop-page button, html.loop-page summary { min-width: 44px; }
html.loop-page .send-button { width: 44px; height: 44px; }
html.loop-page .context-button, html.loop-page .quiet-button, html.loop-page .text-button,
html.loop-page .action-button, html.loop-page .chip, html.loop-page .list-card-actions button,
html.loop-page .event-more button, html.loop-page .event-more summary { font-size: 14px; }
html.loop-page #review-button { min-height: 44px; }
html.loop-page #message, html.loop-page .field-input, html.loop-page .search-input,
html.loop-page #prompt-input { font-size: 16px; }
html.loop-page #message::placeholder { opacity: 1; }
html.loop-page .character-current { display: flex; justify-content: center; align-items: baseline; gap: 10px; padding: 4px 0 8px; font-size: 14px; line-height: 1.5; }
html.loop-page .character-current span { min-width: 0; overflow-wrap: anywhere; font-weight: 700; }
html.loop-page .character-current button { flex: none; text-decoration: underline; }
html.loop-page .character-sheet { width: min(1120px, 96vw); }
html.loop-page .character-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
html.loop-page .character-card { display: flex; flex-direction: column; min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); overflow-wrap: anywhere; }
html.loop-page .character-card.is-selected { border-color: var(--accent); }
html.loop-page .character-card h3, html.loop-page .character-description h3 { font-family: var(--display-font); font-size: 22px; line-height: 1.3; font-weight: 500; margin: 10px 0; }
html.loop-page .character-card p, html.loop-page .character-description p { font-size: 15px; line-height: 1.7; }
html.loop-page .character-subtitle { color: var(--muted); font-size: 13px; }
html.loop-page .character-notice { font-size: 13px; line-height: 1.6; color: var(--muted); }
html.loop-page .character-badges { min-height: 22px; display: flex; flex-wrap: wrap; gap: 8px; font-size: 11px; font-weight: 600; }
html.loop-page .character-topics { padding-left: 18px; font-size: 13px; }
html.loop-page .character-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: auto; padding-top: 12px; }
html.loop-page .character-description { max-width: 760px; margin: 22px auto; }
html.loop-page .character-description h3 { margin-top: 26px; }
html.loop-page .message-meta { flex-wrap: wrap; }
@media (max-width: 1000px) { html.loop-page .character-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  html.loop-page .character-grid { grid-template-columns: minmax(0, 1fr); }
  html.loop-page .character-card { padding: 16px; }
}
html.loop-page .composer-wrap { min-height: 0; max-height: calc(var(--loop-viewport-height, 100dvh) - 132px); overflow-y: auto; }
html.loop-page .composer-footer { align-items: center; gap: 0 12px; }
html.loop-page #composer-hint { font-size: 12px; }
html.loop-page .sheet, html.loop-page .prompt-dialog { overflow-y: auto; }
html.loop-page .prompt-dialog, html.loop-page .age-dialog {
  top: var(--loop-viewport-top, 0px);
  bottom: calc(100% - var(--loop-viewport-top, 0px) - var(--loop-viewport-height, 100dvh));
  max-height: calc(var(--loop-viewport-height, 100dvh) - 16px);
}
html.loop-page .sheet-heading h2, html.loop-page #prompt-title { min-width: 0; overflow-wrap: anywhere; }
html.loop-page .sheet-brand { min-width: 0; }
html.loop-page .conversation-open h3, html.loop-page .conversation-preview {
  overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
html.loop-page .conversation-open[aria-current=true] { border-left: 3px solid var(--accent); padding-left: 12px; }
html.loop-page .image-error { padding: 6px; font-size: 12px; line-height: 1.4; color: var(--ink); text-align: center; }
html.loop-page .card-art.placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; }
html.loop-page .card-art.placeholder .card-glyph { flex: none; }
html.loop-page .card-art.placeholder::before { pointer-events: none; }
html.loop-page .card-art.placeholder::after { display: none; }
html.loop-page .card-art.placeholder.reversed { transform: none; }
html.loop-page .event-more summary { display: flex; align-items: center; width: fit-content; }
html.loop-page .check-row { align-items: center; }
html.loop-page .age-dialog[open] { display: flex; flex-direction: column; overflow: hidden; }
html.loop-page .age-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
html.loop-page .age-actions { flex: none; padding-top: 8px; }
html.loop-page .age-actions #entry-language { margin: 4px 0 0; }
html.loop-page .language-select { width: min(100%, 18rem); min-width: 0; max-width: 100%; }
html.loop-page #age-description { font-size: 14px; color: var(--muted); }
@media (max-width: 360px) {
  html.loop-page .age-dialog { padding: 20px; }
  html.loop-page .age-dialog h1 { font-size: 26px; }
}
@media (max-height: 500px) {
  html.loop-page .topbar { height: 52px; min-height: 52px; padding-top: 0; padding-bottom: 0; }
  html.loop-page .composer-wrap { padding-bottom: calc(4px + env(safe-area-inset-bottom)); }
  html.loop-page .composer-context, html.loop-page .composer-footer { margin-top: 0; margin-bottom: 0; }
  html.loop-page #composer-hint { display: none; }
  html.loop-page .sheet { top: calc(var(--loop-viewport-top, 0px) + 8px); bottom: auto; max-height: calc(var(--loop-viewport-height, 100dvh) - 16px); }
  html.loop-page .age-dialog { padding-top: 12px; padding-bottom: 12px; }
  html.loop-page .age-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; align-items: center; }
  html.loop-page .age-actions .check-row { grid-column: 1 / -1; margin: 0; }
}


html.loop-page[data-visual-theme="pearl"] {
  --soft: #edf2f7;
  --user: linear-gradient(145deg, rgba(231, 238, 246, .96), rgba(244, 248, 251, .98));
  --alert: linear-gradient(145deg, rgba(252, 241, 243, .98), rgba(255, 251, 251, .98));
}

html.loop-page[data-visual-theme="pearl"] body {
  background:
    radial-gradient(120% 95% at 15% 18%, rgba(255,255,255,.9) 0%, rgba(255,255,255,.18) 34%, transparent 52%),
    radial-gradient(90% 70% at 78% 14%, rgba(196, 227, 232, .36) 0%, rgba(196, 227, 232, .08) 38%, transparent 60%),
    radial-gradient(75% 62% at 32% 74%, rgba(241, 220, 231, .28) 0%, rgba(241, 220, 231, .08) 32%, transparent 58%),
    radial-gradient(70% 55% at 84% 76%, rgba(210, 226, 238, .22) 0%, rgba(210, 226, 238, .06) 36%, transparent 64%),
    conic-gradient(from 198deg at 42% 42%, rgba(255,255,255,.22) 0deg, rgba(196, 229, 234, .12) 34deg, rgba(251, 232, 240, .18) 76deg, rgba(255,255,255,.08) 118deg, rgba(210, 228, 236, .1) 172deg, rgba(255,255,255,.18) 235deg, rgba(239, 220, 230, .16) 294deg, rgba(255,255,255,.22) 360deg),
    linear-gradient(180deg, #efe7e3 0%, #ebe6e7 24%, #e5e8ec 58%, #dde3e9 100%);
  background-attachment: fixed;
}

html.loop-page[data-visual-theme="pearl"] body::before,
html.loop-page[data-visual-theme="pearl"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

html.loop-page[data-visual-theme="pearl"] body::before {
  background:
    radial-gradient(100% 70% at 50% 10%, rgba(255,255,255,.52), transparent 60%),
    linear-gradient(120deg, rgba(255,255,255,.18) 8%, rgba(255,255,255,0) 24%, rgba(173, 224, 228, .1) 41%, rgba(255,255,255,0) 53%, rgba(255, 227, 239, .1) 66%, rgba(255,255,255,0) 78%),
    linear-gradient(300deg, rgba(255,255,255,.14) 6%, rgba(255,255,255,0) 21%, rgba(202, 229, 237, .08) 37%, rgba(255,255,255,0) 53%, rgba(255, 235, 242, .08) 67%, rgba(255,255,255,0) 82%);
  opacity: .95;
  mix-blend-mode: screen;
}

html.loop-page[data-visual-theme="pearl"] body::after {
  background:
    radial-gradient(circle at 22% 20%, rgba(255,255,255,.42) 0 1px, transparent 2px 100%),
    radial-gradient(circle at 77% 28%, rgba(255,255,255,.26) 0 1px, transparent 2px 100%),
    radial-gradient(circle at 62% 72%, rgba(255,255,255,.22) 0 1px, transparent 2px 100%),
    radial-gradient(circle at 34% 62%, rgba(255,255,255,.18) 0 1px, transparent 2px 100%);
  background-size: 340px 340px, 420px 420px, 520px 520px, 460px 460px;
  opacity: .65;
}

html.loop-page[data-visual-theme="pearl"] .app-shell,
html.loop-page[data-visual-theme="pearl"] .feed,
html.loop-page[data-visual-theme="pearl"] .composer-wrap {
  position: relative;
  z-index: 1;
}

html.loop-page[data-visual-theme="pearl"] .topbar {
  background: linear-gradient(to bottom, rgba(245,238,236,.92), rgba(245,238,236,0));
}

html.loop-page[data-visual-theme="pearl"] .brand {
  color: #22354b;
  text-shadow: 0 10px 24px rgba(116, 184, 191, .12);
}

html.loop-page[data-visual-theme="pearl"] .brand-mark,
html.loop-page[data-visual-theme="pearl"] .brand-name,
html.loop-page[data-visual-theme="pearl"] .brand__name {
  background: linear-gradient(96deg, #183047 0%, #34536f 28%, #5e98a6 52%, #7dc6c0 63%, #2b4761 84%, #183047 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: loop-pearl-tide 9s ease-in-out infinite;
}

html.loop-page[data-visual-theme="pearl"] .welcome {
  max-width: 830px;
}

html.loop-page[data-visual-theme="pearl"] .welcome p,
html.loop-page[data-visual-theme="pearl"] .welcome .welcome-lead,
html.loop-page[data-visual-theme="pearl"] .welcome-guide-item dd,
html.loop-page[data-visual-theme="pearl"] .guide-content .welcome-guide-notice {
  color: #52657a;
}

html.loop-page[data-visual-theme="pearl"] .welcome-guide,
html.loop-page[data-visual-theme="pearl"] .catalog-inline {
  border-top-color: rgba(94, 113, 132, .12);
  border-bottom-color: rgba(94, 113, 132, .12);
}

html.loop-page[data-visual-theme="pearl"] .topic-grid {
  gap: 16px 20px;
  margin-top: 36px;
}

html.loop-page[data-visual-theme="pearl"] .topic-button,
html.loop-page[data-visual-theme="pearl"] .catalog-item,
html.loop-page[data-visual-theme="pearl"] .menu-item,
html.loop-page[data-visual-theme="pearl"] .sheet,
html.loop-page[data-visual-theme="pearl"] .prompt-dialog,
html.loop-page[data-visual-theme="pearl"] .age-dialog,
html.loop-page[data-visual-theme="pearl"] .notice,
html.loop-page[data-visual-theme="pearl"] .message.assistant .message-body,
html.loop-page[data-visual-theme="pearl"] .message.user .message-body,
html.loop-page[data-visual-theme="pearl"] .action-button,
html.loop-page[data-visual-theme="pearl"] .chip,
html.loop-page[data-visual-theme="pearl"] .secondary-button,
html.loop-page[data-visual-theme="pearl"] .search-input,
html.loop-page[data-visual-theme="pearl"] .field-input,
html.loop-page[data-visual-theme="pearl"] .prompt-dialog textarea {
  position: relative;
  border-radius: 28px;
  border: 1px solid rgba(193, 162, 126, .34);
  background:
    linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,0) 26%),
    linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.34) 16%, rgba(170, 225, 228, .08) 30%, rgba(255,255,255,.04) 42%, rgba(255, 225, 236, .1) 55%, rgba(255,255,255,.02) 68%, rgba(195, 222, 231, .08) 82%, rgba(255,255,255,.12) 100%),
    linear-gradient(145deg, rgba(255,251,249,.92), rgba(245,239,238,.96) 34%, rgba(237,239,243,.96) 67%, rgba(251,248,247,.9) 100%);
  box-shadow:
    0 12px 28px rgba(94, 103, 118, .08),
    inset 0 1px 0 rgba(255,255,255,.88),
    inset 0 -1px 0 rgba(208, 183, 154, .16),
    0 0 0 1px rgba(255,255,255,.45);
  overflow: hidden;
}

html.loop-page[data-visual-theme="pearl"] .topic-button::before,
html.loop-page[data-visual-theme="pearl"] .catalog-item::before,
html.loop-page[data-visual-theme="pearl"] .sheet::before,
html.loop-page[data-visual-theme="pearl"] .prompt-dialog::before,
html.loop-page[data-visual-theme="pearl"] .age-dialog::before,
html.loop-page[data-visual-theme="pearl"] .message.assistant .message-body::before,
html.loop-page[data-visual-theme="pearl"] .message.user .message-body::before,
html.loop-page[data-visual-theme="pearl"] .action-button::before,
html.loop-page[data-visual-theme="pearl"] .chip::before,
html.loop-page[data-visual-theme="pearl"] .secondary-button::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,.44), rgba(255,255,255,0) 24%),
    linear-gradient(108deg, rgba(255,255,255,0) 4%, rgba(255,255,255,.26) 20%, rgba(147, 217, 221, .06) 38%, rgba(255,255,255,0) 48%, rgba(255, 221, 234, .08) 64%, rgba(255,255,255,0) 78%, rgba(180, 224, 230, .08) 90%, rgba(255,255,255,.14) 100%);
  pointer-events: none;
}

html.loop-page[data-visual-theme="pearl"] .topic-button > *,
html.loop-page[data-visual-theme="pearl"] .catalog-item > *,
html.loop-page[data-visual-theme="pearl"] .menu-item > *,
html.loop-page[data-visual-theme="pearl"] .sheet > *,
html.loop-page[data-visual-theme="pearl"] .prompt-dialog > *,
html.loop-page[data-visual-theme="pearl"] .age-dialog > *,
html.loop-page[data-visual-theme="pearl"] .message.assistant .message-body > *,
html.loop-page[data-visual-theme="pearl"] .message.user .message-body > * {
  position: relative;
  z-index: 1;
}

html.loop-page[data-visual-theme="pearl"] .topic-button {
  min-height: 112px;
  padding: 24px 24px;
  gap: 16px;
  align-items: center;
}

html.loop-page[data-visual-theme="pearl"] .topic-button:hover,
html.loop-page[data-visual-theme="pearl"] .catalog-item:hover,
html.loop-page[data-visual-theme="pearl"] .menu-item:hover {
  transform: translateY(-2px);
  border-color: rgba(189, 160, 129, .46);
  box-shadow:
    0 16px 36px rgba(94, 103, 118, .11),
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -1px 0 rgba(208, 183, 154, .22),
    0 0 0 1px rgba(255,255,255,.55),
    0 0 18px rgba(255, 229, 205, .24);
}

html.loop-page[data-visual-theme="pearl"] .topic-symbol,
html.loop-page[data-visual-theme="pearl"] .welcome-symbol,
html.loop-page[data-visual-theme="pearl"] .entry-symbol {
  color: #40556d;
}

html.loop-page[data-visual-theme="pearl"] .topic-symbol {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,0) 28%),
    linear-gradient(145deg, rgba(255,251,249,.96), rgba(241,236,235,.98) 44%, rgba(232,236,242,.94) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 8px 18px rgba(95, 118, 142, .09), 0 0 0 1px rgba(206, 183, 154, .18);
}

html.loop-page[data-visual-theme="pearl"] .topic-text {
  font-size: 14px;
  color: #2a4057;
}

html.loop-page[data-visual-theme="pearl"] .welcome-symbol {
  background:
    linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,255,255,0) 28%),
    linear-gradient(145deg, rgba(255,251,249,.96), rgba(241,236,235,.98) 44%, rgba(232,236,242,.94) 100%);
  box-shadow: 0 16px 34px rgba(67, 84, 105, .10), inset 0 1px 0 rgba(255,255,255,.88), 0 0 0 1px rgba(208,183,154,.18);
}

html.loop-page[data-visual-theme="pearl"] .welcome-symbol::before,
html.loop-page[data-visual-theme="pearl"] .welcome-symbol::after {
  border-color: rgba(193, 162, 126, .26);
}

html.loop-page[data-visual-theme="pearl"] .message.assistant .message-body {
  padding: 18px 22px;
}

html.loop-page[data-visual-theme="pearl"] .message.user .message-body {
  border-radius: 28px 28px 14px 28px;
}

html.loop-page[data-visual-theme="pearl"] .action-button:hover,
html.loop-page[data-visual-theme="pearl"] .chip:hover,
html.loop-page[data-visual-theme="pearl"] .chip.selected,
html.loop-page[data-visual-theme="pearl"] .secondary-button:hover {
  color: #26435c;
  border-color: rgba(189, 160, 129, .4);
}

html.loop-page[data-visual-theme="pearl"] .composer-wrap {
  background: linear-gradient(to bottom, rgba(239,231,227,0), rgba(239,231,227,.74) 20px, rgba(239,231,227,.96));
}

html.loop-page[data-visual-theme="pearl"] .composer-context,
html.loop-page[data-visual-theme="pearl"] .composer-footer {
  color: #6e7d8b;
}

html.loop-page[data-visual-theme="pearl"] #composer {
  position: relative;
  padding: 16px 16px 16px 26px;
  gap: 16px;
  min-height: 76px;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(196, 166, 133, .42);
  background:
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,0) 22%),
    linear-gradient(118deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.38) 14%, rgba(177, 228, 230, .12) 30%, rgba(255,255,255,.04) 43%, rgba(255, 225, 236, .12) 55%, rgba(255,255,255,.04) 69%, rgba(179, 221, 228, .14) 84%, rgba(255,255,255,.22) 100%),
    linear-gradient(145deg, rgba(255,251,249,.96), rgba(244,239,238,.98) 35%, rgba(235,238,243,.98) 67%, rgba(251,248,247,.95) 100%);
  box-shadow:
    0 18px 40px rgba(97, 105, 119, .10),
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -1px 0 rgba(209, 183, 155, .2),
    0 0 0 1px rgba(255,255,255,.55),
    0 0 26px rgba(255, 234, 213, .28);
}

html.loop-page[data-visual-theme="pearl"] #composer::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0) 24%),
    linear-gradient(108deg, rgba(255,255,255,0) 5%, rgba(255,255,255,.28) 18%, rgba(147, 217, 221, .08) 34%, rgba(255,255,255,0) 46%, rgba(255, 220, 235, .1) 61%, rgba(255,255,255,0) 76%, rgba(180, 224, 230, .08) 90%, rgba(255,255,255,.14) 100%);
  pointer-events: none;
}

html.loop-page[data-visual-theme="pearl"] #composer::after {
  content: none;
}

html.loop-page[data-visual-theme="pearl"] #message,
html.loop-page[data-visual-theme="pearl"] #composer > * {
  position: relative;
  z-index: 1;
}

html.loop-page[data-visual-theme="pearl"] #message {
  padding: 10px 0;
  color: #5f605d;
  font-size: 20px;
  line-height: 1.45;
}

html.loop-page[data-visual-theme="pearl"] #message::placeholder {
  color: #9c958d;
}

html.loop-page[data-visual-theme="pearl"] .send-button,
html.loop-page[data-visual-theme="pearl"] .primary-button {
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,0) 18%),
    linear-gradient(145deg, rgba(255,250,247,.97), rgba(241,236,235,.98) 42%, rgba(231,235,241,.96) 100%);
  color: #bc9b7f;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -1px 0 rgba(206, 183, 154, .28),
    0 8px 20px rgba(95, 103, 117, .10),
    0 0 0 1px rgba(201, 175, 145, .38),
    0 0 18px rgba(255, 228, 198, .26);
}

html.loop-page[data-visual-theme="pearl"] .send-button {
  width: 52px;
  height: 52px;
  min-width: 52px;
  min-height: 52px;
}

html.loop-page[data-visual-theme="pearl"] .send-button svg {
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 0 8px rgba(255, 223, 189, .55));
}

html.loop-page[data-visual-theme="pearl"] .send-button:hover,
html.loop-page[data-visual-theme="pearl"] .primary-button:hover {
  filter: brightness(1.02);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.94),
    inset 0 -1px 0 rgba(206, 183, 154, .32),
    0 10px 24px rgba(95, 103, 117, .12),
    0 0 0 1px rgba(201, 175, 145, .42),
    0 0 22px rgba(255, 228, 198, .34);
}

html.loop-page[data-visual-theme="pearl"] .sheet,
html.loop-page[data-visual-theme="pearl"] .prompt-dialog,
html.loop-page[data-visual-theme="pearl"] .age-dialog {
  backdrop-filter: blur(12px) saturate(118%);
  -webkit-backdrop-filter: blur(12px) saturate(118%);
}

html.loop-page[data-visual-theme="pearl"] .sheet::backdrop {
  background: rgba(33, 48, 69, .12);
  backdrop-filter: blur(8px);
}

html.loop-page[data-visual-theme="pearl"] .sheet-heading {
  border-bottom-color: rgba(193, 162, 126, .14);
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.76));
}

html.loop-page[data-visual-theme="pearl"] .menu-item,
html.loop-page[data-visual-theme="pearl"] .catalog-item,
html.loop-page[data-visual-theme="pearl"] .setting-options button,
html.loop-page[data-visual-theme="pearl"] .theme-swatch {
  border-radius: 24px;
}

html.loop-page[data-visual-theme="pearl"] .theme-swatch {
  border-color: rgba(193, 162, 126, .24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.84), 0 8px 18px rgba(84,97,118,.06);
}

html.loop-page[data-visual-theme="pearl"] .theme-swatch[aria-pressed=true] {
  outline-color: #c8a98f;
}

html.loop-page[data-visual-theme="pearl"] .quiet-button,
html.loop-page[data-visual-theme="pearl"] #review-button,
html.loop-page[data-visual-theme="pearl"] #pdf-button,
html.loop-page[data-visual-theme="pearl"] #guide-button,
html.loop-page[data-visual-theme="pearl"] .continuation-question,
html.loop-page[data-visual-theme="pearl"] .list-card-actions button {
  color: #42576d;
}

html.loop-page[data-visual-theme="pearl"] .prompt-dialog textarea,
html.loop-page[data-visual-theme="pearl"] .search-input,
html.loop-page[data-visual-theme="pearl"] .field-input {
  padding-inline: 18px;
}

@keyframes loop-pearl-tide {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@media (max-width: 620px) {
  html.loop-page[data-visual-theme="pearl"] .topic-grid {
    gap: 12px;
  }

  html.loop-page[data-visual-theme="pearl"] .topic-button {
    min-height: 96px;
    padding: 18px 18px;
  }

  html.loop-page[data-visual-theme="pearl"] #composer {
    min-height: 68px;
    padding: 12px 12px 12px 20px;
  }

  html.loop-page[data-visual-theme="pearl"] #message {
    font-size: 18px;
  }

  html.loop-page[data-visual-theme="pearl"] .send-button {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
  }
}

html.loop-page[data-visual-theme="pearl"] body {
  background-color: #f3eeec;
  background-image: url('/shared/theme-assets/pearl-flow-background.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

html.loop-page[data-visual-theme="pearl"] .feed {
  overscroll-behavior: contain;
}

html.loop-page[data-visual-theme="pearl"] .feed-content {
  width: min(100%, 860px);
  padding-top: 18px;
}

html.loop-page[data-visual-theme="pearl"] .welcome {
  max-width: 760px;
  margin-top: 4vh;
}

html.loop-page[data-visual-theme="pearl"] .topic-grid {
  max-width: 640px;
  gap: 14px 18px;
}

html.loop-page[data-visual-theme="pearl"] .topic-button {
  min-height: 98px;
  border-radius: 30px;
  border: 1px solid rgba(212, 186, 150, .75);
  background:
    linear-gradient(180deg, rgba(255,255,255,.44), rgba(255,255,255,0) 26%),
    linear-gradient(112deg, rgba(255,255,255,.14), rgba(188,235,238,.08) 35%, rgba(255,222,235,.09) 67%, rgba(255,255,255,.14)),
    rgba(255, 248, 245, .76);
  backdrop-filter: blur(10px) saturate(122%);
  -webkit-backdrop-filter: blur(10px) saturate(122%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.76),
    0 10px 24px rgba(122, 120, 136, .09),
    0 0 18px rgba(255, 227, 201, .18);
}

html.loop-page[data-visual-theme="pearl"] .topic-button:hover {
  border-color: rgba(220, 190, 149, .96);
}

html.loop-page[data-visual-theme="pearl"] .topic-symbol {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,250,247,.56);
  border: 1px solid rgba(228, 211, 193, .68);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88);
}

html.loop-page[data-visual-theme="pearl"] .composer-wrap {
  background: linear-gradient(to bottom, rgba(243,238,236,0), rgba(243,238,236,.72) 18px, rgba(243,238,236,.94));
}

html.loop-page[data-visual-theme="pearl"] .composer-inner {
  max-width: 860px;
}

html.loop-page[data-visual-theme="pearl"] #composer {
  position: relative;
  min-height: 90px;
  padding: 17px 22px 17px 32px;
  gap: 18px;
  border: 0;
  border-radius: 999px;
  background: transparent url('/shared/theme-assets/pearl-composer-pill.png') center / 100% 100% no-repeat;
  box-shadow: none;
}

html.loop-page[data-visual-theme="pearl"] #composer:focus-within {
  border-color: transparent;
}

html.loop-page[data-visual-theme="pearl"] #message {
  min-height: 46px;
  max-height: 132px;
  padding: 12px 0;
  font-size: 18px;
  line-height: 1.45;
  color: #6c655d;
}

html.loop-page[data-visual-theme="pearl"] #message::placeholder {
  color: #a39a91;
  opacity: 1;
}

html.loop-page[data-visual-theme="pearl"] .send-button {
  width: 58px;
  height: 58px;
  min-width: 58px;
  min-height: 58px;
  background: transparent;
  color: transparent;
  box-shadow: none;
  border: 0;
}

html.loop-page[data-visual-theme="pearl"] .send-button svg {
  opacity: 0;
}

html.loop-page[data-visual-theme="pearl"] .message.assistant .message-body,
html.loop-page[data-visual-theme="pearl"] .message.user .message-body,
html.loop-page[data-visual-theme="pearl"] .action-button,
html.loop-page[data-visual-theme="pearl"] .chip,
html.loop-page[data-visual-theme="pearl"] .secondary-button,
html.loop-page[data-visual-theme="pearl"] .search-input,
html.loop-page[data-visual-theme="pearl"] .field-input,
html.loop-page[data-visual-theme="pearl"] .prompt-dialog textarea,
html.loop-page[data-visual-theme="pearl"] .sheet,
html.loop-page[data-visual-theme="pearl"] .prompt-dialog,
html.loop-page[data-visual-theme="pearl"] .age-dialog,
html.loop-page[data-visual-theme="pearl"] .menu-item,
html.loop-page[data-visual-theme="pearl"] .catalog-item {
  border-color: rgba(212, 186, 150, .58);
  background:
    linear-gradient(180deg, rgba(255,255,255,.40), rgba(255,255,255,0) 24%),
    linear-gradient(112deg, rgba(255,255,255,.12), rgba(188,235,238,.08) 36%, rgba(255,222,235,.08) 68%, rgba(255,255,255,.12)),
    rgba(255,248,245,.76);
  backdrop-filter: blur(9px) saturate(120%);
  -webkit-backdrop-filter: blur(9px) saturate(120%);
}

html.loop-page[data-visual-theme="pearl"] .message.user .message-body {
  border-radius: 24px 24px 14px 24px;
}

html.loop-page[data-visual-theme="pearl"] .sheet::backdrop {
  background: rgba(37, 45, 58, .16);
}

@media (max-width: 620px) {
  html.loop-page[data-visual-theme="pearl"] .feed-content {
    padding-top: 8px;
  }

  html.loop-page[data-visual-theme="pearl"] .topic-grid {
    max-width: none;
    gap: 12px;
  }

  html.loop-page[data-visual-theme="pearl"] .topic-button {
    min-height: 90px;
    border-radius: 26px;
  }

  html.loop-page[data-visual-theme="pearl"] #composer {
    min-height: 78px;
    padding: 12px 16px 12px 22px;
    background-size: 100% 100%;
  }

  html.loop-page[data-visual-theme="pearl"] #message {
    font-size: 17px;
  }

  html.loop-page[data-visual-theme="pearl"] .send-button {
    width: 52px;
    height: 52px;
    min-width: 52px;
    min-height: 52px;
  }
}
.loop-daily-entry:not(.loop-daily-topics) .composer-wrap { display: none; }
.daily-card { width: min(100%, 560px); margin: 0 auto; padding: 12px 12px 24px; text-align: center; }
.loop-daily-entry .daily-card { padding: 4px 0 24px; }
html.loop-page.loop-daily-entry:not(.loop-daily-topics) .daily-card { display: grid; grid-template-rows: minmax(80px, 1fr) auto auto; gap: 12px; height: 100%; padding: 0; }
.daily-card-visual { display: grid; place-items: center; min-width: 0; min-height: 0; container-type: size; }
.daily-card h1 { font: inherit; font-size: 24px; font-weight: 600; margin: 0 0 16px; }
.daily-card-image { display: block; width: min(180px, 46vw, calc(var(--loop-viewport-height, 100dvh) * .18)); margin: 0 auto; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
html.loop-page .daily-card-image .card-art { width: 100%; height: auto; aspect-ratio: 15 / 22; background: transparent; border: 0; }
html.loop-page .daily-card-image img { width: 100%; height: 100%; object-fit: contain; }
.daily-card-image.daily-card-reveal { position: relative; width: min(100%, var(--loop-daily-card-width), calc(100cqh * 15 / 22)); aspect-ratio: 15 / 22; border-radius: 8px; perspective: 1200px; }
.daily-card-reveal .reading-card-inner { transition: transform .82s ease-in-out .16s; box-shadow: 0 24px 44px #06091250, 0 8px 18px #04061045, 0 0 12px #03050a35; }
.daily-card-reveal.is-revealed .reading-card-inner { transform: rotateY(180deg); }
/* WebKit can paint descendants through a hidden backface. Swap visibility at
   the edge-on midpoint of the symmetric turn (.16s delay + .41s half-turn). */
.daily-card-reveal .reading-card-front { visibility: hidden; }
.daily-card-reveal.is-revealed .reading-card-front { visibility: visible; transition: visibility 0s .57s; }
.daily-card-reveal.is-revealed .reading-card-back { visibility: hidden; transition: visibility 0s .57s; }
.daily-card-reveal.daily-card-still .reading-card-inner,
.daily-card-reveal.daily-card-still .reading-card-face { transition: none; }
.daily-card-reveal .reflecta-card-back__name { font-size: 20px; letter-spacing: 0; }
.daily-card-reveal .reading-card-front { padding: 7px; border: 0; background: #090a0d; }
.daily-card-reveal .reading-card-front::after { content: none; }
html.loop-page .daily-card-reveal .reading-card-front .card-art { height: 100%; aspect-ratio: auto; border-radius: 3px; }
.daily-card-reveal .reading-card-front img { transform: none; }
.daily-card--compact .daily-card-image { width: min(120px, 30vw); }
.daily-card-text { margin: 16px auto; max-width: 42ch; font-size: 16px; line-height: 1.5; }
.loop-daily-entry .daily-card-text { width: min(100%, 480px); margin: 0 auto; font-weight: 500; color: var(--ink); text-align: justify; text-align-last: center; hyphens: auto; }
.daily-card-actions { display: flex; align-items: stretch; justify-content: center; width: 100%; margin: 0 auto; }
html.loop-page .daily-card-actions .daily-action { flex: 1 1 auto; position: relative; min-height: 44px; min-width: min-content; padding: 8px 10px; white-space: normal; overflow-wrap: normal; font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--ink); border: 0; background: none; box-shadow: none; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.daily-card-actions .daily-action + .daily-action::before { content: ''; position: absolute; inset-inline-start: 0; top: calc(50% - 8px); height: 16px; border-inline-start: 1px solid currentColor; opacity: .5; }
html.loop-page .daily-card-actions .daily-action:hover { text-decoration-thickness: 2px; }
html.loop-page .daily-card-actions .daily-action:active { color: var(--accent); }
.daily-topics-back { display: block; margin: 0 auto 12px; min-height: 44px; }
@media (max-width: 620px) {
  html.loop-page .brand-controls { width: 100%; }
  html.loop-page .daily-card-actions .daily-action { font-size: 13px; padding-inline: 4px; }
}
@media (max-width: 380px) {
  html.loop-page .daily-card-actions .daily-action { font-size: 12px; padding-inline: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .daily-card-reveal .reading-card-inner, .daily-card-reveal .reading-card-face { transition: none; }
}