.cp-screen, .cp-sheet { color: var(--white); background: var(--black); }
.cp-screen [hidden], .cp-overlay[hidden], .cp-sheet [hidden] { display: none !important; }
.cp-nav { display: flex; align-items: center; gap: 8px; flex: 0 0 54px; padding: 0 18px 0 10px; }
.cp-nav strong { font-size: 16px; }
.cp-nav > span { margin-left: auto; color: var(--green); font-weight: 900; font-size: 17px; }
.cp-source { margin: 0; color: var(--pink); font-size: 11px; line-height: 1.5; padding: 0 24px 9px; }
.cp-form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.cp-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 24px 20px; overflow-wrap: anywhere; }
.cp-intro { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 104px; margin-bottom: 12px; }
.cp-intro h2 { margin: 0 0 8px; font-size: 23px; line-height: 1.35; }
.cp-intro p, .cp-muted { color: var(--muted); font-size: 12px; line-height: 1.7; margin: 0 0 12px; }
.cp-intro img { width: 86px; height: 94px; object-fit: contain; flex: 0 0 auto; }
.cp-screen fieldset, .cp-sheet fieldset { min-width: 0; margin: 18px 0; padding: 0; border: 0; }
.cp-screen legend, .cp-sheet legend { font-size: 15px; font-weight: 650; margin-bottom: 12px; line-height: 1.5; }
.cp-screen legend small { color: var(--muted); font-size: 11px; font-weight: 400; margin-left: 8px; }
.cp-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cp-option { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; line-height: 1.45; cursor: pointer; }
.cp-option:has(:checked), .cp-direction:has(:checked) { border-color: var(--green); background: #b7ff2a0a; }
.cp-option:has(:disabled) { opacity: .55; }
.cp-screen input[type="checkbox"], .cp-screen input[type="radio"], .cp-sheet input[type="radio"] { accent-color: var(--green); width: 18px; height: 18px; flex: 0 0 18px; margin: 0; }
.cp-field { display: grid; gap: 8px; margin: 12px 0; font-size: 13px; color: #d5d5df; }
.cp-field :is(input, select) { width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; background: #24242b; border: 1px solid #4c4c56; border-radius: 6px; color: var(--white); font: inherit; font-size: 16px; }
.cp-actions { flex: 0 0 auto; padding: 10px 24px 22px; background: var(--black); border-top: 1px solid var(--line); }
.cp-actions [role="status"] { margin: 0 0 8px; color: var(--pink); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.cp-actions [role="status"]:empty { display: none; }
.cp-primary { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; background: var(--green); color: #101014; border-radius: 8px; padding: 10px 12px; font-size: 15px; font-weight: 750; }
.cp-primary .icon { width: 22px; height: 22px; filter: brightness(0); }
.cp-primary:disabled, .cp-text:disabled { opacity: .5; cursor: wait; }
.cp-text { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 0; color: #d5d5df; font-size: 12px; background: none; }
.cp-actions .cp-text { width: 100%; }
.cp-text .icon { width: 18px; height: 18px; }
.cp-recommend { border-left: 2px solid var(--pink); padding-left: 14px; margin: 6px 0 22px; }
.cp-recommend h3 { font-size: 18px; margin: 10px 0; color: var(--green); }
.cp-recommend p { font-size: 13px; line-height: 1.7; margin: 8px 0; }
#cp-evidence { color: var(--muted); font-size: 12px; }
.cp-direction { display: flex; align-items: center; gap: 12px; padding: 12px 10px; min-height: 68px; border: 1px solid var(--line); border-radius: 6px; margin: 8px 0; cursor: pointer; }
.cp-direction strong { display: block; font-size: 14px; margin-bottom: 5px; }
.cp-direction small { display: block; color: var(--muted); font-size: 12px; line-height: 1.6; }
.cp-explain { color: var(--muted); font-size: 12px; line-height: 1.7; }
.cp-explain summary { min-height: 44px; padding-top: 12px; cursor: pointer; }
.cp-home-tools { display: flex; gap: 2px; margin-left: auto; }
.cp-home-tools .icon-button { width: 40px; height: 44px; position: relative; }
.cp-home-tools .icon { width: 23px; height: 23px; }
.cp-home-stations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cp-home-stations button { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 46px; padding: 4px 8px; color: var(--white); background: linear-gradient(180deg, #404249, #26282f 58%, #202127); border: 1px solid #6c6e74; border-bottom-color: #101014; border-radius: 7px; text-align: left; box-shadow: inset 0 1px 0 #ffffff38, inset 0 -2px 1px #0008, 0 3px 0 #070709, 0 5px 7px #0004; transition: transform .12s ease, box-shadow .12s ease; }
.cp-home-stations button:hover { border-top-color: #c0c4c8; }
.cp-home-stations button:active { transform: translateY(2px); box-shadow: inset 0 2px 4px #0005, 0 1px 0 #070709; }
.cp-home-stations button:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.cp-home-stations button > span { min-width: 0; }
.cp-home-stations strong { display: block; font-size: 14px; line-height: 18px; font-weight: 650; }
.cp-home-stations small { display: block; font-size: 10px; line-height: 14px; color: #babac7; }
.cp-home-stations .cp-station-icon { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 6px; background: linear-gradient(#d8ff82, #a7dc43); border: 1px solid #e4ffc0; box-shadow: inset 0 1px 0 #fff9, 0 2px 0 #567b22, 0 3px 7px #0007; transform: rotate(-5deg); }
.cp-home-stations .icon { width: 21px; height: 21px; filter: brightness(0); }
#cp-open-radio .cp-station-icon { background: linear-gradient(#ffc7e3, #f187b9); border-color: #ffe1ef; box-shadow: inset 0 1px 0 #fffd, 0 2px 0 #975777, 0 3px 7px #0007; transform: rotate(5deg); }
#cp-open-radio strong { color: #ffd4e9; }
#home-screen .home-header { position: relative; }
#home-screen #cp-home-status { position: absolute; bottom: 1px; left: 24px; right: 12px; color: var(--muted); font-size: 9px; line-height: 1.2; margin: 0; }
@media (orientation: landscape) and (max-height: 500px) and (min-width: 568px) {
  body.export #home-screen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, 36%); grid-template-rows: 24px 44px minmax(76px, 1fr) 114px 62px; }
  body.export #home-screen .statusbar { grid-column: 1 / 3; grid-row: 1; }
  body.export #home-screen .camp-nav { grid-column: 2; grid-row: 2; padding: 0 16px; }
  body.export #home-screen .home-header { grid-column: 2; grid-row: 3; padding: 0 16px 12px; }
  body.export #home-screen .home-header h2 { font-size: 16px; line-height: 1.25; margin-bottom: 4px; }
  body.export #home-screen #cp-home-status { left: 16px; }
  body.export #home-screen .home-scene { grid-column: 1; grid-row: 2 / 5; min-height: 0; }
  body.export #home-screen .home-footer { grid-column: 2; grid-row: 4; padding: 8px 14px; }
  body.export #home-screen .home-welcome { margin-bottom: 6px; padding-left: 8px; }
  body.export #home-screen .home-welcome strong { font-size: 13px; }
  body.export #home-screen .home-welcome p { font-size: 11px; }
  body.export #home-screen .tabs { grid-column: 1 / 3; grid-row: 5; min-height: 0; margin-top: 0; padding: 4px 13px 14px; }
}
.cp-home-pet { position: absolute; top: 7%; left: 36%; width: 26%; height: 28%; min-width: 68px; min-height: 70px; background: none; padding: 0; z-index: 6; animation: cp-pet-roam 24s linear infinite; }
.cp-pet-walk-body { display: block; width: 100%; height: 100%; transform-origin: 50% 90%; animation: cp-pet-walk 24s linear infinite; }
.cp-home-pet .cp-pet-art { animation: none; }
.home-scene[inert] .cp-home-pet, .home-scene[inert] .cp-pet-walk-body,
.cp-home-pet:focus-visible, .cp-home-pet:focus-visible .cp-pet-walk-body,
.cp-home-pet:active, .cp-home-pet:active .cp-pet-walk-body { animation-play-state: paused; }
@media (hover: hover) {
  .cp-home-pet:hover, .cp-home-pet:hover .cp-pet-walk-body { animation-play-state: paused; }
}
/* The short-screen floor leaves room for AMU below, even at the 70px minimum height. */
@keyframes cp-pet-roam {
  0%, 8%, 100% { left: 36%; top: 7%; }
  28%, 36% { left: 39%; top: min(20%, calc(63% - max(28%, 70px) - 6px)); }
  55%, 64% { left: 37%; top: min(31%, calc(63% - max(28%, 70px) - 6px)); }
  74% { left: 37%; top: min(14%, calc(50% - max(28%, 70px) - 6px)); }
  84%, 90% { left: 34%; top: min(14%, calc(50% - max(28%, 70px) - 6px)); }
}
@keyframes cp-pet-walk {
  0%, 8%, 28%, 36%, 55%, 64%, 84%, 90%, 100% { transform: none; }
  10%, 14%, 18%, 22%, 26%, 38%, 42%, 46%, 50%, 53%, 66%, 70%, 74%, 78%, 82%, 92%, 96% { transform: translateY(-3px) rotate(-3deg); }
  12%, 16%, 20%, 24%, 40%, 44%, 48%, 52%, 68%, 72%, 76%, 80%, 94%, 98% { transform: translateY(0) rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .cp-home-pet, .cp-pet-walk-body { animation: none !important; }
}
.cp-pet-art { display: block; width: 100%; height: 100%; object-fit: contain; transform-origin: 50% 85%; animation: cp-breathe 3.8s ease-in-out infinite; }
#cp-pet-tag { display: block; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); background: #101014db; color: var(--white); font-size: 10px; line-height: 1.4; padding: 3px 7px; border-radius: 4px; width: max-content; max-width: 124px; overflow-wrap: anywhere; }
.cp-overlay { position: absolute; inset: 0; z-index: 40; display: flex; align-items: flex-end; background: #0009; }
.cp-sheet { display: flex; flex-direction: column; width: 100%; max-height: calc(100% - 28px); min-height: 260px; border-radius: 8px 8px 0 0; border-top: 1px solid #55545c; }
.cp-sheet > header { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px 0 24px; flex: 0 0 54px; }
.cp-sheet h2 { font-size: 18px; margin: 0; }
.cp-sheet h3 { font-size: 17px; line-height: 1.6; margin: 10px 0; }
.cp-action-option { margin: 8px 0; }
.cp-kicker { font-size: 11px; color: var(--pink); margin: 14px 0 6px; }
#cp-reaction { font-size: 16px; line-height: 1.85; margin: 10px 0; }
.cp-celebration { width: 120px; height: 120px; margin: 0 auto; }
.cp-pet-stage { position: relative; width: 184px; height: 184px; margin: 0 auto; }
.cp-pet-decoration { position: absolute; right: 0; top: 30%; display: flex; flex-direction: column; gap: 8px; }
.cp-pet-decoration .icon { visibility: hidden; }
[data-stage="3"] .cp-pet-decoration .icon:first-child, [data-stage="7"] .cp-pet-decoration .icon { visibility: visible; }
.cp-pet-decoration .icon:first-child { filter: brightness(0) saturate(100%) invert(90%) sepia(97%) saturate(741%) hue-rotate(24deg); }
.cp-milestones { font-size: 12px; color: #d5d5df; padding-left: 22px; line-height: 1.9; }
#cp-growth { color: var(--green); font-size: 14px; text-align: center; }
.cp-pet-art.cp-celebrate { animation: cp-celebrate 900ms ease-in-out 2; }
.cp-pet-art.cp-petted { animation: cp-petted 650ms ease-in-out 2; }
@keyframes cp-breathe { 50% { transform: translateY(-3px) rotate(2deg); } }
@keyframes cp-celebrate { 30% { transform: translateY(-16px) rotate(-9deg); } 65% { transform: translateY(-7px) rotate(9deg); } }
@keyframes cp-petted { 30% { transform: rotate(-9deg) scale(1.04,.96); } 70% { transform: rotate(7deg); } }
.paused .cp-pet-art, .document-hidden .cp-pet-art, .screen-column[hidden] .cp-pet-art { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .cp-pet-art { animation: none !important; } }
@media (max-height: 700px) {
  body.export .cp-screen .statusbar { flex-basis: 30px; }
  body.export .cp-screen .island { display: none; }
  body.export .cp-nav { flex-basis: 48px; }
  body.export .cp-actions { padding-bottom: 16px; padding-top: 8px; }
}

/* Selection keeps row geometry stable; larger text can grow each row. */
.cp-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#preferences-screen .cp-nav { flex-basis: 48px; }
.cp-preference-scroll { padding: 4px 20px 12px; }
.cp-preference-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(112px, 43%); align-items: center; gap: 4px; min-height: 114px; margin-bottom: 12px; }
.cp-program-heading { min-width: 0; padding: 2px 0; }
.cp-program-heading h2 { margin: 0; font-size: 20px; line-height: 1.5; font-weight: 750; }
#cp-goal-count { display: block; margin-top: 10px; font-size: 11px; line-height: 1.5; color: #a8a8b4; font-variant-numeric: tabular-nums; }
#preferences-screen .cp-program-board { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cp-program-option { position: relative; display: grid; min-width: 0; cursor: pointer; }
#preferences-screen .cp-program-option input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; z-index: 2; }
.cp-program-surface { display: grid; grid-template-columns: 26px minmax(0, 1fr) 20px; align-items: center; gap: 12px; min-height: 50px; padding: 10px 6px; color: var(--white); border-bottom: 1px solid var(--line); transition: background-color 160ms; }
.cp-program-copy { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.cp-program-surface strong { display: block; min-width: 0; font-size: 15px; line-height: 1.5; font-weight: 550; }
.cp-program-surface small { font-size: 10px; line-height: 1.5; color: #a8a8b4; }
.cp-program-mark { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid #71717d; border-radius: 5px; font-style: normal; }
.cp-program-mark .icon { display: none; width: 13px; height: 13px; filter: brightness(0); }
.cp-program-option:has(:checked) .cp-program-mark .icon { display: block; }
.cp-program-option:has(:checked) .cp-program-mark { background: var(--green); border-color: var(--green); animation: cp-selection-pop 260ms ease-out; }
.cp-program-option:has(:checked) .cp-program-surface { background: #b7ff2a08; }
.cp-program-option:has(:focus-visible) .cp-program-surface { outline: 2px solid var(--pink); outline-offset: -2px; }
.cp-program-prop { display: grid; place-items: center; width: 26px; height: 28px; color: #c8c8d2; }
.cp-program-prop .icon { width: 20px; height: 20px; }
.cp-program-prop img { width: 26px; height: 28px; object-fit: contain; }
.cp-program-sugar .cp-program-prop, .cp-program-voice .cp-program-prop { color: var(--pink); }
.cp-program-nutrition .cp-program-prop { color: var(--green); }
.cp-sleep-scene { position: relative; width: 100%; height: 106px; margin: 0; pointer-events: none; }
.cp-sleep-character { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform-origin: 50% 88%; animation: cp-sleep-breathe 4.8s ease-in-out infinite; }
.cp-sleep-shadow { position: absolute; left: 18%; right: 18%; bottom: 5%; height: 12%; background: #000; border-radius: 50%; opacity: .55; }
.cp-snore { position: absolute; color: #b7ff2a; font-family: ui-rounded, -apple-system, sans-serif; font-weight: 800; line-height: 1; left: 13%; top: 34%; opacity: 0; animation: cp-snore-rise 4.8s ease-in-out infinite; }
.cp-snore-one { font-size: 16px; }
.cp-snore-two { font-size: 22px; animation-delay: 1s; }
.cp-snore-three { font-size: 29px; animation-delay: 2s; }
.cp-snore-word { position: absolute; right: 8%; bottom: 12%; color: #c0b6c4; font-size: 11px; transform: rotate(-7deg); animation: cp-snore-word 4.8s ease-in-out infinite; }
.cp-expectations { color: #b3b3bf; font-size: 10px; line-height: 1.5; margin: 8px 1px; }
.cp-preference-more { margin: 12px 0 0; border-bottom: 1px solid var(--line); }
.cp-preference-more > summary { display: flex; align-items: center; gap: 8px; min-height: 60px; padding: 8px 4px; list-style: none; cursor: pointer; color: #f7f7f2; }
.cp-preference-more > summary > span { display: grid; min-width: 0; gap: 4px; }
.cp-preference-more > summary strong { font-size: 14px; font-weight: 750; }
.cp-preference-more > summary::-webkit-details-marker { display: none; }
.cp-preference-more > summary small { color: #c2c0cc; font-size: 10px; line-height: 1.5; }
.cp-preference-more > summary em { margin-left: auto; flex: 0 0 auto; color: #ff8ec0; font-size: 11px; font-style: normal; }
.cp-preference-more > summary .icon { width: 20px; height: 20px; flex: 0 0 20px; transition: transform 180ms; }
.cp-preference-more[open] > summary .icon { transform: rotate(90deg); }
.cp-more-body .cp-source { padding: 0 0 12px; }
.cp-more-body fieldset:first-child { margin-top: 5px; }
#preferences-screen .cp-actions { border-top: 0; padding-top: 4px; }
#preferences-screen .cp-primary { min-height: 52px; }
.cp-approach-scroll { padding-top: 6px; }
#approach-screen #cp-direction-options { margin: 0 0 8px; }
#cp-direction-options legend { font-size: 24px; font-weight: 850; margin-bottom: 0; }
.cp-direction-hint { font-size: 12px; line-height: 1.6; color: #b3b3bf; margin: 6px 0 12px; }
#approach-screen .cp-direction { min-height: 58px; padding: 9px 10px; margin: 6px 0; }
.cp-direction > span { min-width: 0; }
.cp-direction strong { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.cp-direction em { font-style: normal; font-size: 10px; font-weight: 500; color: #ff94cb; }
.cp-approach-intro { min-height: 184px; margin: 4px 0 0; align-items: center; gap: 4px; }
.cp-approach-intro > div:first-child { flex: 1 1 auto; min-width: 0; }
.cp-approach-intro h2 { font-size: 20px; }
.cp-approach-intro .cp-scribe-caption { font-size: 10px; color: #f3a0ca; margin-bottom: 8px; }
.cp-approach-intro .cp-approach-promise { margin: 8px 0 0; color: #c8c8d2; font-size: 12px; line-height: 1.7; }
.cp-notetaker { position: relative; width: 170px; height: 186px; flex: 0 0 170px; }
.cp-approach-intro .cp-notetaker-still, .cp-notetaker-motion { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
#cp-approach-status { font-size: 11px; line-height: 1.6; color: #f3a0ca; margin: 4px 0; overflow-wrap: anywhere; }
#cp-approach-status:empty { display: none; }
.cp-advice-details { border-top: 1px solid var(--line); margin: 6px 0 0; }
.cp-advice-details > summary { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 44px; font-size: 12px; color: #c8c8d2; cursor: pointer; list-style: none; }
.cp-advice-details > summary::-webkit-details-marker { display: none; }
.cp-advice-details > summary .icon { width: 14px; height: 14px; }
.cp-advice-details[open] > summary .icon { transform: rotate(180deg); }
.cp-advice-details .cp-source { padding: 10px 0; }
.cp-approach-links { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 8px; }
#approach-screen .cp-actions { padding-bottom: 18px; }
@keyframes cp-selection-pop { 45% { transform: scale(1.22) rotate(-8deg); } }
@keyframes cp-sleep-breathe { 0%,100% { transform: scale(1,.99); } 44% { transform: scale(1.008,1.025); } 65% { transform: scale(1.005,1.015); } }
@keyframes cp-snore-rise { 0%,16% { opacity: 0; transform: translate(0,8px) rotate(-12deg) scale(.65); } 29% { opacity: .9; } 72% { opacity: .7; } 100% { opacity: 0; transform: translate(12px,-43px) rotate(9deg) scale(1.08); } }
@keyframes cp-snore-word { 0%,100% { opacity: .3; } 48% { opacity: .9; } }
.paused :is(.cp-program-mark,.cp-sleep-character,.cp-snore,.cp-snore-word), .document-hidden :is(.cp-program-mark,.cp-sleep-character,.cp-snore,.cp-snore-word), .screen-column[hidden] :is(.cp-program-mark,.cp-sleep-character,.cp-snore,.cp-snore-word) { animation-play-state: paused !important; }
@media (forced-colors: active) {
  #preferences-screen .cp-program-option input { inset: 50% 8px auto auto; transform: translateY(-50%); width: 18px; height: 18px; opacity: 1; appearance: auto; accent-color: auto; }
  .cp-program-mark { display: none; }
  .cp-program-surface { border-color: ButtonText; }
  .cp-program-option:has(:focus-visible) .cp-program-surface { outline-color: Highlight; }
}
@media (prefers-reduced-motion: reduce) {
  .cp-program-mark, .cp-sleep-character, .cp-snore, .cp-snore-word { animation: none !important; }
  .cp-snore-three { opacity: .6; transform: translate(2px,-6px) rotate(8deg); }
  .cp-snore-word { opacity: .6; }
}
@media (max-height: 760px) {
  body.export .cp-approach-intro { min-height: 164px; }
  body.export .cp-notetaker { flex-basis: 146px; width: 146px; height: 164px; }
  body.export .cp-approach-intro h2 { font-size: 19px; }
}
@media (max-width: 360px) {
  .cp-preference-scroll { padding-left: 16px; padding-right: 16px; }
}