.status-cluster { display: grid; width: max-content; justify-items: end; gap: 7px; }
.viewers { text-align: right; }
.connection { display: flex; align-items: center; gap: 7px; margin: 0; color: #cbb5a7; font-size: 12px; }
.cares button, [data-invite], [data-wake], [data-gift] { touch-action: manipulation; transition: transform 140ms ease, background 140ms ease, opacity 140ms ease; }
.cares button:active, [data-invite]:active, [data-wake]:active, [data-gift]:active { transform: translateY(1px) scale(.985); }
.cares button:focus-visible { outline: 3px solid #f4ac82; outline-offset: 3px; }
.local-tools { position: fixed; z-index: 4; top: 92px; right: 20px; display: flex; align-items: center; gap: 8px; padding: 6px 7px; border: 1px solid #806151; border-radius: 999px; color: #cbb5a7; background: #201713d9; font-size: 11px; }
.local-tools button { min-height: 44px; padding: 6px 9px; border: 0; border-radius: 999px; color: #35241d; background: #f1d7b8; font-weight: 800; cursor: pointer; }
.local-tools button:disabled { cursor: wait; opacity: .65; }
@media (max-width: 560px) {
  .status-cluster { display: grid; grid-template-columns: auto; max-width: 190px; align-items: center; gap: 5px 6px; }
  .viewers { grid-column: 1 / -1; grid-row: 1; }
  .connection { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .day-timer { grid-column: 1 / -1; grid-row: 2; }
  .public-page .local-tools { display: none; }
  .look-shell { grid-row: 1; }
  .panel { margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* The light lilac palette keeps the video prominent and makes each action easy to identify. */
#nest header > div:first-child,
.viewers { border-color: var(--color-border-soft); background: #ded3e6e8; }
header p,
.goal-subtitle,
.sleep-state,
.help-dialog > p,
.gift-checkout-dialog > p:not(.gift-checkout-kicker, .gift-checkout-terms, .gift-checkout-feedback),
.day-timer-label,
[data-care-cooldown],
[data-care-sleep],
.gift-section > p { color: var(--color-text-muted); }

.help-button,
.help-dialog-heading button,
.gift-checkout-heading button,
.toolbar-actions button,
.drawer-heading button,
.operator-heading button,
.operator-reopen,
.operator-gifts button { border-color: var(--color-border); color: var(--color-text); background: #d4c7dd; }
.help-button:hover { background: var(--color-surface-soft); }
.help-button:focus-visible,
.help-dialog button:focus-visible,
.gift-checkout-dialog button:focus-visible,
.gift-checkout-dialog input:focus-visible,
.records > summary:focus-visible,
.care-menu > summary:focus-visible,
.previous-day-compact summary:focus-visible,
[data-invite]:focus-visible,
[data-wake]:focus-visible,
[data-gift]:focus-visible,
.cares button:focus-visible { outline-color: var(--color-teal); }

.help-dialog,
.gift-checkout-dialog,
.panel,
.operator-drawer { border-color: var(--color-border); color: var(--color-text); background: var(--color-surface); box-shadow: 0 18px 50px var(--color-shadow); }
.help-dialog::backdrop,
.gift-checkout-dialog::backdrop { background: #392f4970; }
.help-kicker,
.gift-checkout-kicker,
.operator-kicker,
.day-result-label { color: var(--color-mango); }
.help-dialog ol,
.gift-checkout-dialog label,
.operator-audit,
.gift-acknowledgments { color: #554765; }
.gift-checkout-dialog input { border-color: var(--color-border-soft); color: var(--color-text); background: #e9e0ed; }
.gift-checkout-dialog > form:not([method="dialog"]) button,
.operator-actions button,
.operator-load-all,
.operator-checkout button,
.local-tools button { color: var(--color-ink); background: var(--color-mango); }
.gift-checkout-feedback,
.operator-feedback { color: #9f4f6d; }
.gift-checkout-terms,
.terms { color: var(--color-text-subtle); }

.gift-checkout-bao { background: radial-gradient(circle at 50% 72%, var(--color-coral) 0 7%, transparent 8%), linear-gradient(145deg, #d7c9df, #aa97bd); box-shadow: 0 12px 26px var(--color-shadow); }
.gift-checkout-bao::before,
.gift-checkout-bao::after { background: var(--color-ink); }
.gift-checkout-bao span { background: #aa97bd; }
.video-look { background: var(--color-canvas); }

.panel[data-super-care-active="true"] { border-color: #c2a85f; box-shadow: 0 18px 50px var(--color-shadow), 0 0 0 1px #cf8fa666, 0 0 24px #aa95bf55; }
.toolbar-actions button[aria-expanded="true"] { border-color: var(--color-teal); color: var(--color-ink); background: var(--color-teal); }
.toolbar-drawer[data-toolbar-drawer],
.gift-section[data-toolbar-drawer],
.operator-checkout,
.operator-gifts { border-color: var(--color-border-soft); }
.gift-help > p,
.records > summary,
.care-menu > summary,
.previous-day-result,
.longest-day-result,
.previous-day-compact,
.day-timer { border-color: var(--color-border-soft); color: var(--color-text); background: #d4c7ddcc; }
.gift-help > p,
.previous-day-compact summary { color: var(--color-text-muted); }
.operator-state dt,
.operator-checkout p,
.operator-audit-heading span,
.section-heading p { color: var(--color-text-subtle); }
.day-results-prominent .previous-day-result { border-color: var(--color-violet); background: #d2c3dce6; box-shadow: 0 8px 24px var(--color-shadow); }
.day-summary-details dt { color: var(--color-text-subtle); }
.day-timer-label strong { color: var(--color-text); }
.day-timer.current-day-record { border-color: #c2a85f; box-shadow: inset 0 0 0 1px #e4ce92; }
.record-day { border-color: #c2a85f; color: var(--color-ink); background: #ded0a8; }
.record-day-lead,
.record-time,
.record-encouragement { color: #745e30; }
.record-celebration { border-color: #fff2b8; color: var(--color-ink); background: var(--color-mango); box-shadow: 0 10px 30px var(--color-shadow); }
.record-celebration-static { outline-color: var(--color-violet); }

.meter-track { background: #c4b6ce; }
.hunger .meter-fill { background: var(--color-mango); }
.thirst .meter-fill { background: var(--color-sky); }
.loneliness .meter-fill { background: var(--color-violet); }
.panel[data-super-care-active="true"] .hunger .meter-fill { background: var(--color-mango); }
.panel[data-super-care-active="true"] .thirst .meter-fill { background: var(--color-teal); }
.panel[data-super-care-active="true"] .loneliness .meter-fill { background: var(--color-coral); }
@keyframes warning { 50% { box-shadow: 0 0 0 4px #d76c7988; } }

.cares button { color: var(--color-ink); background: var(--color-mango); }
.cares button:nth-child(2) { background: var(--color-sky); }
.cares button:nth-child(3) { background: var(--color-coral); }
.cares button:hover { background: #dfc687; }
.cares button:nth-child(2):hover { background: #a3baad; }
.cares button:nth-child(3):hover { background: #d69caf; }
.cares button:disabled,
[data-gift]:disabled { color: #817588; background: #c8bdce; }
[data-invite] { border-color: #819b8e; color: var(--color-ink); background: #acc2b7; }
[data-wake] { color: var(--color-ink); background: var(--color-teal); }
[data-gift] { color: var(--color-ink); background: var(--color-coral); }
.warning { color: #a74454; }

.super-care-banner { border-color: #c9ae61; color: var(--color-ink); background: #e8dbb4; }
.super-care-banner::before { border-color: var(--color-violet); border-right-color: var(--color-sky); border-bottom-color: var(--color-coral); }
.super-care-banner::after { border-color: var(--color-coral); border-top-color: var(--color-mango); border-left-color: var(--color-violet); }
.super-care-banner-mark { color: var(--color-ink); background: var(--color-coral); box-shadow: 0 0 0 3px var(--color-violet), 0 0 0 6px var(--color-sky); }

.connection { color: var(--color-text-muted); }
.local-tools { border-color: var(--color-border-soft); color: var(--color-text-muted); background: #ded3e6eb; }

@media (max-width: 560px) {
  .brand:hover .brand-details,
  .brand:focus-within .brand-details,
  .public-page .feedback:not(:empty) { border-color: var(--color-border-soft); color: var(--color-text-muted); background: #ded3e6f5; box-shadow: 0 12px 30px var(--color-shadow); }
}

@media (min-width: 561px) {
  .video-look video, .video-look img {
    inset: 0 auto 0 50%;
    width: min(100%, 56.25dvh);
    transform: translateX(-50%);
    mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  }
}

.video-look { background: #aaa7a7; isolation: isolate; }
.video-look::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, #c2bfb9, #a8a6a8); }
.help-button { flex: 0 0 24px; width: 24px; height: 24px; font-size: 12px; }
.about-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 52px; }
.mobile-intro { display: none; }
.help-dialog, .gift-checkout-dialog { max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.help-dialog-heading button, .gift-checkout-heading button, .drawer-heading button { min-height: 44px; }
.help-dialog-heading form, .drawer-heading-actions { flex-shrink: 0; }
.help-kicker, .gift-checkout-kicker, .day-result-label { color: #665027; letter-spacing: normal; text-transform: none; }
.gift-checkout-portrait { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.gift-checkout-price { font-size: 18px; }
.header-record { margin: 0; padding: 5px 9px; border-radius: 10px; color: var(--color-text); background: var(--color-surface-solid); font-size: 12px; }
.header-record span, .meter-label strong { font-variant-numeric: tabular-nums; }
.status-cluster .day-timer { font-size: 14px; }
.connection { max-width: 270px; padding: 6px 9px; border-radius: 8px; color: var(--color-text); background: var(--color-surface-solid); }
.connection[data-connection-state="live"] { display: none; }
.toolbar-summary { gap: 8px; }
.warning:empty, .feedback:empty { display: none; }
.warning, .feedback { min-height: 0; margin: 0; }
.toolbar-actions button { min-height: 48px; }
.toolbar-actions { margin-top: 8px; }
.toolbar-actions button[data-toolbar-open="care"] { border-color: #67507e; background: #67507e; color: #fff; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #67507e; outline-offset: 3px; }
.vital-guide, .care-explanation { margin: 0; color: var(--color-text-muted); font-size: 12px; line-height: 1.4; }
.care-explanation { margin-top: 10px; }
.meter-label { display: grid; gap: 2px; font-size: 12px; }
.meter-track { background: #f1eaf5; }
.hunger .meter-fill { background: #99702c; }
.thirst .meter-fill { background: #537563; }
.loneliness .meter-fill { background: #806193; }
.greatest-need .meter-label { font-weight: 700; }
.care-availability { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; }
.care-availability [data-care-cooldown] { margin: 0; font-size: 12px; }
.care-availability:not(:has([data-care-cooldown]:not([hidden]))) { display: none; }
.care-section .drawer-heading-actions { align-items: center; gap: 6px; }
.drawer-heading .invite-icon { display: grid; place-items: center; flex: 0 0 32px; width: 32px; min-height: 32px; height: 32px; margin: 0; padding: 0; border: 1px solid var(--color-border); background: transparent; color: var(--color-text); }
.care-section .section-heading { flex-wrap: wrap; gap: 4px 8px; }
.gift-section .section-heading { flex-wrap: wrap; gap: 4px 8px; }
.care-section .cares { margin-top: 0; }
.gift-section > p { margin-bottom: 10px; line-height: 1.5; }

@media (max-width: 560px) {
  .public-page #nest, .operator-page #nest { grid-template-rows: auto minmax(120px, 1fr) auto; gap: 4px; overflow-y: auto; padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  #nest > header { position: relative; grid-row: 1; grid-column: 1; display: flex; justify-content: space-between; gap: 10px; padding: max(6px, env(safe-area-inset-top)) 10px 0; }
  #nest header > .brand { padding: 0; background: transparent; backdrop-filter: none; }
  .brand-title h1 { flex: none; font-size: 26px; }
  .brand-title { gap: 8px; }
  .brand .brand-details, .brand:hover .brand-details, .brand:focus-within .brand-details { display: none; }
  .mobile-intro, .header-record { display: none; }
  .status-cluster { display: flex; flex-direction: column; align-items: flex-end; width: auto; max-width: 50%; gap: 1px; }
  .status-cluster .viewers { margin: 0; padding: 0; border: 0; background: transparent; font-size: 10px; }
  .status-cluster .day-timer { padding: 2px 6px; border: 0; background: transparent; font-size: 11px; }
  .header-record { font-size: 11px; }
  .connection { position: static; width: auto; height: auto; clip-path: none; white-space: normal; font-size: 12px; }
  .look-shell { grid-row: 2; grid-column: 1; overflow: hidden; }
  .video-look video, .video-look img { object-fit: contain; transform: scale(1.15); }
  .public-page .panel, .operator-page .panel { grid-row: 3; max-height: 46dvh; overflow-y: auto; overscroll-behavior: contain; padding: 7px 9px; }
  .public-page .feedback:not(:empty) { position: static; width: auto; max-width: none; padding: 5px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; transform: none; text-align: left; font-size: 12px; }
  .sleep-state { inset: auto 0 8px; margin: 0; padding: 4px; font-size: 20px; background: var(--color-surface); }
  .toolbar-summary { gap: 5px; }
  .toolbar-actions button { min-height: 44px; padding: 5px 8px; font-size: 14px; }
  .meter-label { display: flex; justify-content: space-between; gap: 3px; margin-bottom: 3px; font-size: 10px; }
  .meter-label > span:last-child { font-size: 0; }
  .meter-label strong { font-size: 10px; }
  .meter-track { height: 6px; }
  .vital-guide { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .care-availability [data-care-cooldown] { font-size: 11px; }
  .public-page .super-care-banner { padding: 4px 7px; gap: 6px; border-radius: 8px; }
  .public-page .super-care-banner strong { font: 700 11px system-ui, sans-serif; }
  .public-page .super-care-banner-mark, .super-care-banner::before, .super-care-banner::after { display: none; }
  .public-page .super-care-banner { grid-template-columns: minmax(0, 1fr) auto; }
  .public-page .super-care-banner time { font-size: 11px; }
  .gift-help > summary { width: 44px; height: 44px; }
  .gift-section .drawer-heading { flex-wrap: wrap; }
  .help-dialog-heading { position: sticky; z-index: 2; top: -20px; padding: 8px 0; background: var(--color-surface-solid); }
}