@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700;800&display=swap');

:root { color-scheme: dark; --night:#0b1220; --night-2:#0f1829; --surface:#151f32; --surface-2:#1a263c; --line:rgba(224,236,255,.1); --text:#f7f8fc; --muted:#a7b3c7; --dim:#71809a; --coral:#f4a38f; --coral-deep:#df8776; --mint:#b9e5d3; --yellow:#ffd66b; --lavender:#b5a7ff; --sans:'Manrope','Noto Sans SC',-apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif; --mono:'DM Mono',ui-monospace,SFMono-Regular,monospace; }
* { box-sizing:border-box; }
html { min-width:320px; background:#080d17; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 50% -12%,#213455 0,#101a2c 30%,#080d17 75%); color:var(--text); font-family:var(--sans); letter-spacing:0; }
button, textarea { font:inherit; }
button { border:0; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.onboarding { position:fixed; z-index:50; inset:0; overflow:hidden; background:radial-gradient(circle at 70% 10%,#233656 0,#111c30 35%,#080d17 78%); }
.onboarding[hidden] { display:none; }
.onboarding-glow { position:absolute; width:260px; height:260px; border-radius:50%; pointer-events:none; filter:blur(8px); opacity:.11; }.onboarding-glow-one { top:-145px; right:-90px; background:var(--lavender); }.onboarding-glow-two { bottom:-150px; left:-100px; background:var(--coral); opacity:.07; }
.onboarding-inner { position:relative; width:min(100%,480px); min-height:100%; max-height:100%; margin:0 auto; padding:calc(22px + env(safe-area-inset-top)) 24px calc(26px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; overflow-y:auto; }
.onboarding-brand { display:flex; align-items:center; gap:10px; font-size:16px; font-weight:800; }.onboarding-mark { position:relative; width:35px; height:35px; border-radius:12px; background:#202f4c; box-shadow:inset 0 0 0 1px rgba(231,239,255,.08); overflow:hidden; }.onboarding-mark .brand-moon { width:19px; height:19px; left:8px; top:9px; }.onboarding-mark .brand-moon::after { width:18px; height:18px; left:6px; top:-3px; }.onboarding-mark > span:last-child { position:absolute; left:4px; top:5px; color:#f8e5a2; font-size:8px; }
.onboarding-progress { display:flex; gap:6px; margin:43px 0 38px; }.onboarding-progress i { width:23px; height:3px; border-radius:99px; background:#3b4960; }.onboarding-progress i.is-active { background:var(--coral); }
.onboarding-step { display:none; flex:1; flex-direction:column; }.onboarding-step.is-active { display:flex; }.onboarding-step h1,.onboarding-step h2 { margin:0; font-size:34px; line-height:1.16; letter-spacing:-1.5px; }.onboarding-step h2 { font-size:31px; }.onboarding-step em { color:var(--coral); font-style:normal; }.onboarding-copy { max-width:335px; margin:16px 0 28px; color:var(--muted); font-size:12px; line-height:1.7; }.onboarding-field { display:grid; gap:8px; margin-bottom:13px; color:#c6d1e1; font-size:11px; font-weight:600; }.onboarding-field small { margin-left:5px; color:var(--dim); font-size:9px; font-weight:400; }.onboarding-field input { width:100%; height:50px; padding:0 14px; border:1px solid var(--line); outline:none; border-radius:14px; background:rgba(255,255,255,.055); color:var(--text); font-size:14px; }.onboarding-field input:focus { border-color:rgba(244,163,143,.7); box-shadow:0 0 0 3px rgba(244,163,143,.08); }.onboarding-field input.invalid { border-color:#ef8a7d; box-shadow:0 0 0 3px rgba(239,138,125,.09); }.onboarding-field input::placeholder { color:#67758e; }.onboarding-primary { width:100%; height:53px; margin-top:auto; border-radius:16px; background:var(--coral); color:#3d2520; font-size:14px; font-weight:800; box-shadow:0 11px 24px rgba(244,163,143,.16); }.onboarding-primary span { margin-left:5px; font-size:18px; }.onboarding-secondary { width:100%; height:42px; margin-top:9px; background:transparent; color:var(--muted); font-size:11px; }.onboarding-hint { margin:12px 0 0; color:#71809a; font-size:9px; text-align:center; }
.onboarding-join-link { margin-top:12px; color:var(--coral); }
.onboarding-error { margin:-3px 0 12px; color:#ef9b8c; font-size:10px; }
.onboarding-step > #createNestSuccess:not([hidden]), .onboarding-step > #joinNestForm:not([hidden]) { display:flex; flex:1; flex-direction:column; }
.record-empty { margin:0; padding:19px 14px; border:1px dashed var(--line); border-radius:14px; color:var(--dim); font-size:10px; text-align:center; }
.nest-preview { display:flex; align-items:center; gap:12px; margin:9px 0 22px; padding:15px 14px; border:1px solid rgba(224,236,255,.1); border-radius:16px; background:rgba(255,255,255,.05); }.nest-preview-moon { position:relative; width:44px; height:44px; flex:0 0 44px; border-radius:50%; background:var(--yellow); box-shadow:0 0 21px rgba(255,214,107,.2); }.nest-preview-moon::after { content:''; position:absolute; width:43px; height:43px; left:16px; top:-7px; border-radius:50%; background:#1a2941; }.nest-preview div:nth-child(2) { display:grid; gap:4px; min-width:0; }.nest-preview strong { font-size:13px; }.nest-preview span { color:var(--dim); font-size:10px; }.nest-preview-star { margin-left:auto; color:var(--yellow); font-size:16px; }.success-orbit { position:relative; width:104px; height:104px; margin:2px 0 30px; display:grid; place-items:center; border:1px solid rgba(244,163,143,.38); border-radius:50%; box-shadow:0 0 40px rgba(244,163,143,.1); }.success-orbit::before { content:''; position:absolute; inset:10px; border:1px dashed rgba(255,214,107,.3); border-radius:50%; }.success-moon { width:48px; height:48px; border-radius:50%; background:var(--yellow); box-shadow:0 0 24px rgba(255,214,107,.32); }.success-orbit > span { position:absolute; top:9px; right:13px; color:var(--yellow); font-size:12px; }.invite-code { display:grid; grid-template-columns:1fr auto; gap:3px 8px; align-items:center; margin:2px 0 18px; padding:13px 14px; border:1px solid rgba(244,163,143,.2); border-radius:15px; background:rgba(244,163,143,.08); }.invite-code span { grid-column:1 / -1; color:var(--dim); font-size:9px; }.invite-code strong { font-family:var(--mono); font-size:22px; letter-spacing:1px; }.invite-code button { padding:7px 10px; border-radius:8px; background:rgba(255,255,255,.08); color:var(--coral); font-size:10px; }
.app-shell { width:min(100%, 480px); min-height:100vh; margin:0 auto; padding:0 20px calc(96px + env(safe-area-inset-bottom)); position:relative; overflow:hidden; }
.status-island { height:34px; padding-top:10px; display:flex; justify-content:space-between; align-items:flex-start; color:#93a1b7; font-family:var(--mono); font-size:10px; opacity:.8; }
.status-icons { display:flex; gap:5px; align-items:center; }.status-icons i { display:block; width:12px; height:6px; border:1px solid #8c9ab0; border-radius:2px; opacity:.85; }.status-icons i:first-child { width:14px; border-radius:4px; }.status-icons i:last-child { width:4px; border-radius:50%; background:#8c9ab0; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:15px 0 24px; }.brand-lockup { display:flex; gap:10px; align-items:center; }.brand-title { display:block; font-size:16px; font-weight:800; line-height:1.1; letter-spacing:-.3px; }.brand-kicker { display:block; margin-top:3px; color:var(--dim); font-family:var(--mono); font-size:8px; letter-spacing:1.8px; }
.brand-mark, .install-icon, .install-guide-mark { position:relative; width:35px; height:35px; border-radius:12px; background:#202f4c; box-shadow:inset 0 0 0 1px rgba(231,239,255,.08); overflow:hidden; }.brand-moon { position:absolute; width:19px; height:19px; border-radius:50%; background:var(--yellow); left:8px; top:9px; box-shadow:0 0 17px rgba(255,214,107,.38); }.brand-moon::after { content:''; position:absolute; width:18px; height:18px; border-radius:50%; background:#202f4c; left:6px; top:-3px; }.brand-star { position:absolute; color:#f8e5a2; font-size:8px; }.star-a { left:4px; top:5px; }.star-b { right:4px; bottom:4px; font-size:6px; }.icon-button { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.06); color:#bec9dc; transition:background .2s, transform .2s; }.icon-button:hover { background:rgba(255,255,255,.1); }.icon-button:active { transform:scale(.94); }.icon-gear { font-size:19px; line-height:1; }
.welcome-row { display:flex; align-items:flex-end; justify-content:space-between; padding:4px 0 25px; }.eyebrow { margin:0 0 8px; color:var(--dim); font-family:var(--mono); font-size:10px; letter-spacing:1.4px; text-transform:uppercase; }.welcome-row h1 { margin:0; font-size:32px; line-height:1.17; letter-spacing:-1.4px; font-weight:800; }.welcome-row h1 em { color:var(--coral); font-style:normal; }
.pair-avatar { position:relative; width:64px; height:46px; margin-bottom:3px; background:transparent; }.avatar { position:absolute; display:grid; place-items:center; width:38px; height:38px; border:3px solid var(--night-2); border-radius:50%; font-size:12px; font-weight:800; }.avatar-me { background:var(--coral); color:#40241e; }.avatar-partner { background:#b7a9ff; color:#2b2358; }.pair-avatar .avatar-me { left:0; top:4px; }.pair-avatar .avatar-partner { right:0; top:0; }.pair-heart { position:absolute; top:13px; left:28px; z-index:3; color:var(--yellow); font-size:13px; text-shadow:0 2px 8px rgba(0,0,0,.4); }
.tonight-card { position:relative; overflow:hidden; padding:23px 18px 17px; border:1px solid var(--line); border-radius:24px; background:linear-gradient(145deg,rgba(26,38,60,.98),rgba(17,27,45,.98)); box-shadow:0 20px 60px rgba(0,0,0,.2); }.card-glow { position:absolute; width:190px; height:190px; border-radius:50%; filter:blur(10px); opacity:.1; pointer-events:none; }.glow-one { background:var(--lavender); top:-145px; right:-65px; }.glow-two { background:var(--coral); bottom:-150px; left:-80px; opacity:.06; }.card-topline { display:flex; justify-content:space-between; align-items:flex-start; position:relative; z-index:1; }.section-label { margin:0 0 5px; color:#c8d2e2; font-size:12px; font-weight:600; }.card-topline h2 { margin:0; font-family:var(--mono); font-size:32px; font-weight:500; letter-spacing:-1.6px; }.text-button { display:flex; align-items:center; gap:5px; padding:4px 0; background:transparent; color:var(--muted); font-size:11px; }.text-button span { color:var(--coral); font-size:18px; line-height:10px; }
.sleep-orbit { width:222px; height:222px; margin:4px auto 15px; position:relative; display:grid; place-items:center; }.orbit-track,.orbit-progress { position:absolute; inset:13px; border-radius:50%; border:1px solid rgba(187,204,235,.12); }.orbit-progress { border-color:transparent; border-top-color:var(--coral); border-right-color:var(--coral); transform:rotate(30deg); filter:drop-shadow(0 0 6px rgba(244,163,143,.45)); }.orbit-progress::after { content:''; position:absolute; width:7px; height:7px; border-radius:50%; right:13px; top:19px; background:var(--coral); box-shadow:0 0 12px 3px rgba(244,163,143,.35); }.orbit-track::before { content:''; position:absolute; inset:9px; border-radius:50%; border:1px dashed rgba(189,206,239,.12); }.orbit-moon { position:relative; width:78px; height:78px; overflow:hidden; border-radius:50%; background:linear-gradient(135deg,#ffe8a3,#eebf55); box-shadow:0 0 34px rgba(255,214,107,.24); }.moon-cut { position:absolute; width:80px; height:80px; border-radius:50%; left:29px; top:-12px; background:var(--surface-2); }.moon-crater { position:absolute; border-radius:50%; background:rgba(169,126,48,.17); }.crater-one { width:13px; height:7px; top:48px; left:16px; transform:rotate(-20deg); }.crater-two { width:8px; height:8px; top:21px; left:19px; }.orbit-star { position:absolute; color:var(--yellow); font-size:13px; text-shadow:0 0 13px rgba(255,214,107,.65); }.orbit-star-left { left:28px; top:58px; }.orbit-star-right { right:25px; bottom:54px; color:var(--lavender); font-size:10px; }.orbit-copy { position:absolute; display:flex; flex-direction:column; align-items:center; gap:2px; margin-top:1px; }.orbit-copy strong { font-family:var(--mono); font-size:23px; font-weight:500; }.orbit-copy span { color:var(--muted); font-size:10px; line-height:1.4; text-align:center; }
.pair-status { display:flex; align-items:center; justify-content:space-between; gap:9px; padding:12px 13px; border:1px solid rgba(214,227,249,.08); border-radius:16px; background:rgba(7,13,24,.27); }.person-status { min-width:0; display:flex; align-items:center; gap:9px; flex:1; }.person-avatar { width:30px; height:30px; flex:0 0 30px; display:grid; place-items:center; border-radius:50%; font-size:10px; font-weight:800; }.person-detail { min-width:0; display:flex; flex-direction:column; gap:3px; }.person-detail strong { font-size:11px; font-weight:700; }.status-text { overflow:hidden; color:var(--dim); font-size:9px; white-space:nowrap; text-overflow:ellipsis; }.status-dot { width:7px; height:7px; flex:0 0 7px; margin-left:auto; border-radius:50%; background:#55627a; }.status-connector { display:flex; gap:3px; align-items:center; padding:0 2px; }.status-connector span { width:3px; height:3px; border-radius:50%; background:#65748e; }.status-connector span:nth-child(2) { width:4px; height:4px; background:var(--yellow); }
.checkin-button { width:100%; height:52px; margin-top:14px; display:flex; align-items:center; justify-content:center; gap:8px; border-radius:16px; background:var(--coral); color:#3d2520; font-size:15px; font-weight:800; box-shadow:0 9px 18px rgba(244,163,143,.16); transition:background .25s, transform .2s, box-shadow .25s; }.checkin-button:hover { background:#f7b09e; }.checkin-button:active { transform:scale(.98); }.checkin-button.checked { background:var(--mint); color:#1d3b31; box-shadow:0 9px 18px rgba(185,229,211,.12); }.button-spark { font-size:12px; }.button-arrow { font-size:17px; margin-left:3px; transform:rotate(-25deg); }.nudge-button { width:100%; padding:9px 0 1px; background:transparent; color:var(--muted); font-size:10px; }.nudge-button span { color:var(--yellow); font-size:15px; vertical-align:-1px; }.nudge-button:disabled { color:var(--dim); cursor:default; }.card-note { position:relative; margin:11px 0 0; color:#7e8da5; font-size:10px; text-align:center; }
.stats-strip { display:grid; grid-template-columns:1fr 1px 1fr; align-items:center; margin:18px 0 28px; padding:0 12px; }.stat-block { display:grid; grid-template-columns:18px auto; column-gap:7px; align-items:center; }.stat-block strong { font-family:var(--mono); font-size:22px; font-weight:500; }.stat-block > span:last-child { grid-column:2; color:var(--dim); font-size:9px; }.stat-icon { grid-row:1 / span 2; color:var(--yellow); font-size:17px; }.moon-small { color:var(--lavender); }.stat-divider { height:28px; background:var(--line); }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:13px; }.section-heading .eyebrow { margin-bottom:4px; }.section-heading h3 { margin:0; font-size:17px; letter-spacing:-.5px; }.round-arrow,.mini-arrow { width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.06); color:var(--coral); font-size:18px; transition:background .2s, transform .2s; }.round-arrow:hover,.mini-arrow:hover { background:rgba(255,255,255,.11); transform:translateX(2px); }.record-list { display:grid; gap:8px; }.record-row { display:flex; align-items:center; gap:12px; min-height:61px; padding:11px 12px; border:1px solid var(--line); border-radius:14px; background:rgba(17,27,45,.58); }.record-date { display:flex; flex-direction:column; min-width:44px; }.record-date strong { color:var(--text); font-family:var(--mono); font-size:20px; font-weight:500; }.record-date span { color:var(--dim); font-size:8px; }.record-main { min-width:0; flex:1; }.record-stars { display:flex; gap:2px; line-height:1; }.record-stars span { color:var(--yellow); font-size:11px; }.record-stars .muted { color:#46536b; }.record-main p { overflow:hidden; margin:5px 0 0; color:var(--muted); font-size:10px; white-space:nowrap; text-overflow:ellipsis; }.record-time { align-self:flex-start; color:var(--dim); font-family:var(--mono); font-size:9px; }
.install-banner { display:flex; align-items:center; gap:11px; margin:23px 0 7px; padding:12px; border:1px solid rgba(244,163,143,.18); border-radius:15px; background:rgba(244,163,143,.06); }.install-icon { width:34px; height:34px; flex:0 0 34px; background:rgba(244,163,143,.12); }.install-icon .brand-moon { transform:scale(.72); transform-origin:top left; background:var(--coral); box-shadow:none; }.install-icon > span:last-child { position:absolute; right:5px; top:5px; color:var(--yellow); font-size:8px; }.install-banner strong { display:block; font-size:11px; }.install-banner p { margin:3px 0 0; color:var(--dim); font-size:9px; line-height:1.45; }.install-banner > div:nth-child(2) { min-width:0; flex:1; }.mini-arrow { flex:0 0 32px; }
.bottom-nav { position:fixed; z-index:10; bottom:0; left:50%; width:min(100%,480px); padding:9px 16px calc(9px + env(safe-area-inset-bottom)); display:grid; grid-template-columns:repeat(3,1fr); transform:translateX(-50%); border-top:1px solid rgba(226,235,251,.08); background:rgba(10,16,28,.88); backdrop-filter:blur(18px); }.nav-item { position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:4px; background:transparent; color:#71809a; font-size:9px; }.nav-item.active { color:var(--coral); }.nav-icon { font-size:18px; line-height:1; }.nav-badge { position:absolute; top:0; margin-left:24px; width:13px; height:13px; display:grid; place-items:center; border-radius:50%; background:var(--coral); color:#442a24; font-family:var(--mono); font-size:8px; }
.toast { position:fixed; z-index:30; left:50%; bottom:calc(87px + env(safe-area-inset-bottom)); max-width:calc(100% - 40px); padding:10px 14px; border:1px solid rgba(255,255,255,.13); border-radius:12px; opacity:0; transform:translate(-50%,12px); background:#202d45; color:var(--text); box-shadow:0 10px 30px rgba(0,0,0,.25); font-size:11px; pointer-events:none; transition:opacity .25s, transform .25s; }.toast.show { opacity:1; transform:translate(-50%,0); }
.sheet { width:min(calc(100% - 24px), 456px); margin:auto; padding:29px 20px 20px; border:1px solid rgba(225,236,255,.12); border-radius:25px; background:#111b2d; color:var(--text); box-shadow:0 28px 80px rgba(0,0,0,.42); }.sheet::backdrop { background:rgba(3,7,14,.7); backdrop-filter:blur(5px); }.sheet-handle { position:absolute; width:38px; height:4px; top:10px; left:50%; transform:translateX(-50%); border-radius:99px; background:#45536d; }.sheet-close { position:absolute; top:14px; right:15px; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.06); color:var(--muted); font-size:19px; line-height:1; }.sheet h2 { margin:0; font-size:25px; letter-spacing:-1px; }.sheet-copy { max-width:320px; margin:9px 0 19px; color:var(--muted); font-size:11px; line-height:1.65; }.time-options { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:17px; }.time-option { height:44px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.04); color:var(--muted); font-family:var(--mono); font-size:12px; }.time-option.selected { border-color:var(--coral); background:rgba(244,163,143,.11); color:var(--coral); }.sheet-primary { width:100%; height:48px; border-radius:14px; background:var(--coral); color:#3d2520; font-size:13px; font-weight:800; }.sheet textarea { width:100%; min-height:105px; resize:none; margin:1px 0 17px; padding:13px; border:1px solid var(--line); outline:none; border-radius:13px; background:rgba(5,10,19,.32); color:var(--text); font-size:12px; line-height:1.6; }.sheet textarea:focus { border-color:rgba(244,163,143,.55); }.calendar-head { display:flex; align-items:center; justify-content:space-between; margin:8px 0 12px; font-family:var(--mono); font-size:11px; }.calendar-head button { width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.06); color:var(--muted); font-size:20px; }.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }.calendar-grid span { display:grid; place-items:center; aspect-ratio:1; color:var(--dim); font-family:var(--mono); font-size:10px; }.calendar-grid .day-label { aspect-ratio:auto; padding-bottom:4px; color:#7f8da3; font-size:8px; }.calendar-grid .day { position:relative; border-radius:10px; background:rgba(255,255,255,.035); }.calendar-grid .day.done::after,.calendar-grid .day.half::after { content:'✦'; color:var(--yellow); font-size:12px; }.calendar-grid .day.half::after { color:var(--lavender); }.calendar-grid .day.today { box-shadow:inset 0 0 0 1px var(--coral); color:var(--coral); }.calendar-grid .day.future { background:transparent; color:#46536b; }.legend { display:flex; flex-wrap:wrap; gap:11px; margin-top:14px; color:var(--dim); font-size:9px; }.legend span { display:flex; gap:4px; align-items:center; }.legend-dot { width:7px; height:7px; border-radius:50%; background:var(--yellow); }.legend-dot.half { background:var(--lavender); }.legend-dot.empty { background:#43516a; }.install-guide-mark { width:58px; height:58px; margin:0 0 17px; border-radius:18px; background:#202f4c; }.install-guide-mark .brand-moon { width:30px; height:30px; left:14px; top:15px; }.install-guide-mark .brand-moon::after { width:28px; height:28px; left:10px; top:-5px; }.install-guide-mark > span:last-child { position:absolute; top:9px; left:8px; color:var(--yellow); font-size:11px; }.guide-steps { display:grid; gap:9px; margin:15px 0 19px; }.guide-steps div { display:flex; align-items:center; gap:10px; padding:10px 11px; border-radius:12px; background:rgba(255,255,255,.04); color:var(--muted); font-size:11px; }.guide-steps b { width:21px; height:21px; display:grid; place-items:center; border-radius:50%; background:rgba(244,163,143,.15); color:var(--coral); font-family:var(--mono); font-size:10px; }
.settings-list { display:grid; gap:8px; margin:16px 0 12px; }.setting-row { min-height:59px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 12px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.035); }.setting-row div { display:grid; gap:4px; }.setting-row strong { font-size:12px; }.setting-row span,.settings-note { color:var(--dim); font-size:10px; }.setting-name-row > div { min-width:0; flex:1; }.setting-name-row input { width:100%; height:29px; padding:0 8px; border:1px solid var(--line); outline:none; border-radius:8px; background:rgba(255,255,255,.045); color:var(--text); font-size:11px; }.setting-name-row input:focus { border-color:rgba(244,163,143,.7); }.setting-save { flex:0 0 auto; padding:7px 10px; border-radius:8px; background:rgba(244,163,143,.13); color:var(--coral); font-size:10px; }.setting-save:disabled { opacity:.55; cursor:wait; }.switch { width:43px; height:25px; padding:3px; border-radius:999px; background:#47546b; transition:background .2s; }.switch i { display:block; width:19px; height:19px; border-radius:50%; background:#eaf0fa; transition:transform .2s; }.switch.is-on { background:var(--coral); }.switch.is-on i { transform:translateX(18px); }.static-row b { min-width:32px; color:var(--coral); font-family:var(--mono); font-size:11px; text-align:right; }.settings-note { margin:0; line-height:1.6; }
.us-hero { padding:5px 0 17px; text-align:center; }.us-avatars { position:relative; width:105px; height:51px; margin:0 auto 10px; }.us-avatars .avatar { top:5px; width:46px; height:46px; border-color:#111b2d; }.us-avatars .avatar-me { left:5px; }.us-avatars .avatar-partner { right:5px; }.us-avatars b { position:absolute; z-index:2; top:18px; left:45px; color:var(--yellow); font-size:14px; text-shadow:0 2px 8px rgba(0,0,0,.4); }.us-hero .eyebrow { margin-bottom:5px; }.us-hero h2 { font-size:23px; }.us-hero p:last-child { margin:7px 0 0; color:var(--muted); font-size:11px; }.us-stats { display:grid; grid-template-columns:repeat(3,1fr); margin:3px 0 16px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.035); }.us-stats div { min-width:0; display:flex; flex-direction:column; gap:4px; align-items:center; padding:14px 5px; }.us-stats div + div { border-left:1px solid var(--line); }.us-stats strong { color:var(--yellow); font-family:var(--mono); font-size:16px; font-weight:500; white-space:nowrap; }.us-stats span { color:var(--dim); font-size:8px; text-align:center; }.shared-promise { display:flex; align-items:center; gap:10px; padding:12px; border-radius:14px; background:rgba(244,163,143,.08); }.shared-promise > span { color:var(--yellow); font-size:18px; }.shared-promise strong { font-size:11px; }.shared-promise p { margin:3px 0 0; color:var(--muted); font-size:9px; }
@media (min-width:700px) { body { padding:36px 0; }.app-shell { min-height:820px; border:1px solid rgba(226,235,251,.1); border-radius:38px; background:radial-gradient(circle at 60% -8%,#213455 0,#101a2c 28%,#080d17 75%); box-shadow:0 25px 100px rgba(0,0,0,.45); }.status-island { padding-top:14px; }.bottom-nav { position:absolute; border-radius:0 0 38px 38px; } }
@media (max-width:370px) { .app-shell { padding-left:15px; padding-right:15px; }.welcome-row h1 { font-size:29px; }.sleep-orbit { width:204px; height:204px; }.person-detail .status-text { max-width:70px; }.tonight-card { padding-left:14px; padding-right:14px; } }