/* The background is decorative; each reading retains its type and foreground. */
.t-main { isolation: isolate; background: #080a0d; --bone-muted: #b3aaa1; --bone-faint: #b3aaa1; }
.t-particles { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: -1; pointer-events: none; background: #080a0d; }
.t-main > .t-rays, .t-main > .grain { display: none; }
.t-main > .t-header { background: rgba(12,11,10,.94); }
.t-app[data-state="welcome"] .t-workspace { padding: 30px 40px max(24px, env(safe-area-inset-bottom)); scrollbar-width: none; }
.t-app[data-state="welcome"] .t-workspace::-webkit-scrollbar { display: none; }
.t-hero { margin: clamp(24px, 9vh, 88px) auto auto; }
.t-hero__standard { display: block; }
.t-hero .t-plate, .t-hero .t-roundel { display: none; }
.t-hero__copy { width: min(100%, 540px); padding: 26px 30px; background: rgba(12,11,10,.92); border: 1px solid var(--line-12); border-radius: 10px; }
.t-app[data-state="welcome"] .t-composer { margin-top: 40px; margin-bottom: 0; padding: 18px 20px 8px; background: rgba(12,11,10,.92); border: 1px solid var(--line-18); border-radius: 10px; }
.t-app[data-state="conversation"] .t-column { padding: 26px; background: rgba(12,11,10,.92); border: 1px solid var(--line-18); border-radius: 10px; }
.t-app[data-state="conversation"] .t-composer { background: rgba(12,11,10,.94); backdrop-filter: blur(12px); box-shadow: 0 -10px 24px #0003; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
.t-composer__meta { width: 100%; max-width: var(--column-w); display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 34px; }
.t-composer__keys { width: auto; padding-top: 0; }
.t-main .msg { animation: none; } /* Keep text fully opaque even while streaming. */
.t-main .t-tradition:disabled { opacity: 1; color: var(--bone-muted); }
.t-main .t-tradition[aria-pressed="true"] { color: var(--bone-bright); }
@media (max-width: 900px) {
  .t-app[data-state="welcome"] .t-workspace { padding: 24px 20px max(16px, env(safe-area-inset-bottom)); }
  .t-app[data-state="conversation"] .t-messages { padding: 18px 16px; }
  .t-app[data-state="conversation"] .t-column { padding: 20px; }
}
@media (max-width: 600px) {
  .t-hero { margin-top: 30px; }
  .t-hero__copy { padding: 22px; }
  .t-app[data-state="welcome"] .t-composer { padding: 14px 12px 4px; margin-top: 30px; }
  .t-app[data-state="conversation"] .t-column { padding: 16px; }
  .t-app[data-state="conversation"] .t-composer { padding-left: 16px; padding-right: 16px; }
}
@media (max-height: 600px) {
  .t-hero { margin-top: 0; }
  .t-hero__copy { padding: 16px 20px; }
  .t-app[data-state="welcome"] .t-composer { margin-top: 20px; }
}