:root{color-scheme:dark;--bg:#101419;--panel:#191e25;--panel-soft:#151b21;--line:#2b343c;--text:#f0f6f3;--muted:#94a29f;--mint:#b9efd7;--orange:#f4aa65;--danger:#f0a4ad;--radius:22px;font-family:Manrope,"Segoe UI",sans-serif;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-size:14px;line-height:1.6}
button,input,select{font:inherit}
button,a,input,select{-webkit-tap-highlight-color:transparent}
button{cursor:pointer;color:inherit}
button:disabled{cursor:default;opacity:.45}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--mint);outline-offset:4px}
button{border:0}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
.shell{max-width:520px;margin:auto;padding:0 24px calc(112px + env(safe-area-inset-bottom));min-height:100dvh}
.brand{height:85px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.brand a{font-weight:800;font-size:23px;letter-spacing:-1px;display:flex;align-items:center;gap:9px}
.brand-dot{color:var(--mint);margin-left:-8px}
.brand-mark{width:27px;height:30px;border-radius:14px 14px 9px 5px;display:inline-flex;align-items:center;justify-content:center;background:var(--mint);color:var(--bg);font-size:25px}
.brand-caption{font-size:10px;color:var(--muted)}
h1,h2,p{margin:0}
h1{font-size:42px;line-height:1.14;letter-spacing:-1.8px;font-weight:800}
h2{font-size:17px;line-height:1.4;letter-spacing:-.4px}
.muted,.footnote{color:var(--muted)}
.mint,.success{color:var(--mint)!important}
.kicker{color:var(--mint);font-size:11px;font-weight:600;letter-spacing:.2px;margin-bottom:10px}
.page-intro{padding:19px 0 28px}
.page-intro .muted{margin-top:15px;font-size:12px}
.page-intro.compact{padding-bottom:25px}
.summary{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--line);padding:20px 0;margin:0 0 28px}
.summary>div{display:flex;flex-direction:column;gap:5px}
.summary>div+div{padding-left:19px;border-left:1px solid var(--line)}
.summary strong{font-size:29px;line-height:1.2;letter-spacing:-1px}
.summary span{font-size:10px;color:var(--muted)}
.summary .inline-fire{font-size:17px;margin-left:6px}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-bottom:15px}
.section-heading>.muted{font-size:11px}
.text-button{padding:4px 0;background:none;color:var(--mint);font-weight:600;font-size:12px}
.pairs{display:flex;flex-direction:column;gap:11px}
.pair-row{display:flex;align-items:center;width:100%;gap:12px;background:var(--panel-soft);border:1px solid var(--line);border-radius:19px;padding:10px 13px 10px 5px;text-align:left;transition:background .15s}
.pair-row:hover{background:var(--panel)}
.mini-ghost{width:63px;height:65px;flex-shrink:0}
.mini-ghost svg{width:100%;height:100%}
.pair-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.pair-info strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.pair-info>span{font-size:10px;color:var(--muted)}
.streak-pill{display:inline-flex;align-items:center;white-space:nowrap;gap:4px;background:#38291e;color:var(--orange);border:1px solid #59402b;border-radius:30px;padding:4px 9px;font-size:12px;font-weight:800}
.streak-pill.dim{background:var(--panel);border-color:var(--line);color:var(--muted)}
.chevron{color:var(--muted);font-size:24px;font-weight:400}
.footnote{text-align:center;font-size:10px;line-height:1.9;margin-top:33px}
.bottom-nav{position:fixed;z-index:3;bottom:calc(14px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(calc(100% - 48px),340px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));isolation:isolate;padding:6px;background:linear-gradient(130deg,#e4fff20c,#263039a8 46%,#c2d5e20e);backdrop-filter:blur(24px) saturate(155%);-webkit-backdrop-filter:blur(24px) saturate(155%);border:1px solid #e5fff21f;border-radius:32px;box-shadow:0 12px 32px #0005,inset 0 1px 0 #fff2,inset 0 -1px 0 #fff1}
.bottom-nav button{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;min-width:0;min-height:50px;border-radius:26px;padding:6px 3px;background:none;color:#b0b9b6;font-size:10px;font-weight:600;letter-spacing:.12px;touch-action:manipulation}
.bottom-nav button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bottom-nav button.active{color:#d8ffec}
.nav-glass{position:absolute;left:6px;top:6px;bottom:6px;pointer-events:none;border-radius:26px;background:linear-gradient(145deg,#effff43d,#c4ffe717 50%,#f6ffff26);border:1px solid #e9fff34d;box-shadow:inset 0 1px 1px #fff5,inset 0 -1px 1px #d9fff021,0 2px 8px #0003;will-change:transform}
.nav-glass::after{content:"";position:absolute;inset:1px 12px auto;height:1px;background:linear-gradient(90deg,transparent,#fff7,transparent)}
.primary,.secondary{border-radius:16px;padding:14px 21px;font-size:13px;font-weight:800;min-height:48px}
.primary{background:var(--mint);color:#12261f}
.primary:hover{background:#d0f8e6}
.secondary{background:var(--panel);border:1px solid var(--line)}
.secondary:hover:enabled{background:#25312e}
.full{width:100%;margin-top:13px}
.empty{text-align:center;padding:0 0 15px}
.empty .ghost-art{max-width:235px;width:100%;margin:-8px auto -10px;display:block}
.empty h2{font-size:23px;line-height:1.35;margin-bottom:12px}
.empty p{color:var(--muted);font-size:12px;margin-bottom:20px}
.entrance{padding-top:20px}
.entrance h1{font-size:31px;margin-bottom:20px}
.ghost-art{width:100%;overflow:visible}
.ghost-body{transform-origin:center}
.happy .ghost-body{animation:happy .65s ease-in-out}
.pet-heading{display:flex;align-items:center;gap:12px;padding-top:12px}
.pet-heading>div{flex:1;min-width:0}
.pet-heading h1{font-size:31px}
.pet-heading .kicker{color:var(--muted);margin-bottom:3px;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.name-button{background:none;padding:0;max-width:100%;text-align:left;overflow-wrap:anywhere;font-weight:800;letter-spacing:-.9px;font-size:31px;line-height:1.3}
.name-button span{color:var(--muted);font-size:16px}
.back-button{background:var(--panel);border-radius:12px;padding:0 12px;height:39px;font-size:29px;line-height:1}
.together{display:flex;align-items:center;gap:17px;justify-content:center;margin:25px 0 0}
.avatar{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid #bfdccf;background:#344e45;border-radius:50%;font-size:17px;font-weight:700;flex-shrink:0}
.avatar.peer{background:#48465b;border-color:#c5bfe2}
.level{text-align:center;width:160px;display:flex;flex-direction:column;gap:5px}
.level strong{font-size:14px}
.level span{color:var(--muted);font-size:10px}
progress{width:100%;height:4px;border:0;border-radius:4px;background:#303b36;overflow:hidden}
progress::-webkit-progress-bar{background:#303b36}
progress::-webkit-progress-value{background:var(--mint);border-radius:4px}
progress::-moz-progress-bar{background:var(--mint)}
.pet-stage{max-width:360px;margin:0 auto 22px;text-align:center;position:relative}
.pet-stage>.ghost-art{display:block;margin-bottom:-35px}
.pet-mood{position:relative;font-size:11px;color:var(--muted)}
.today-panel{padding:16px 17px;border:1px solid #34483f;border-radius:18px;background:#17221e}
.today-panel h2{font-size:12px}
.today-panel .section-heading{margin-bottom:12px}
.today-panel .section-heading>span{color:var(--mint)}
.daily-people{display:flex;gap:15px;justify-content:space-between;font-size:11px;color:var(--muted)}
.daily-people span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.daily-people .done{color:var(--mint)}
.pet-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:13px}
.pet-actions button{padding:12px 7px;font-size:11px}
.action-hint{font-size:10px;color:var(--muted);text-align:center;margin:11px 12px 24px;line-height:1.8}
.calendar-section{margin-top:20px}
.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}
.calendar-day{aspect-ratio:1.1;display:flex;align-items:center;justify-content:center;border-radius:10px;background:var(--panel);color:#7e8a86;font-size:11px;border:1px solid transparent}
.calendar-day.complete{background:#344e43;color:#cef7e3}
.calendar-day.partial{background:#3f3427;color:var(--orange)}
.calendar-day.is-today{border-color:var(--mint)}
.calendar-key{display:flex;gap:18px;font-size:10px;color:var(--muted);margin:12px 0 22px}
.calendar-key>span:first-child{color:var(--mint)}
.calendar-key>span+span{color:var(--orange)}
.centered{display:block;margin:auto}
.pending{margin:20px 0;background:#242b24;border-radius:16px;padding:20px}
.pending p{font-size:12px;color:var(--muted);margin:9px 0 16px}
.field-label{display:block;font-size:12px;color:var(--muted);margin-bottom:9px}
input,select{width:100%;border-radius:13px;background:var(--panel);border:1px solid var(--line);color:var(--text);padding:14px;font-size:14px}
.settings-section{margin-top:28px}
.settings-section .muted{font-size:11px;margin-top:7px}
.wardrobe{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:17px}
.skin{display:flex;flex-direction:column;align-items:center;background:var(--panel-soft);border:1px solid var(--line);border-radius:16px;padding:0 5px 13px}
.skin.chosen{border-color:var(--mint);background:#1b2b24}
.skin svg{width:85px;height:89px;margin-top:0}
.skin strong{font-size:11px}
.skin span{font-size:9px;margin-top:5px;color:var(--muted)}
.rules{border-top:1px solid var(--line);margin-top:28px;padding-top:24px}
.rules h2{margin:0 0 12px}
.rules h2:not(:first-child){margin-top:27px}
.rules p{font-size:12px;color:var(--muted);margin-bottom:14px}
.danger-button{color:var(--danger);background:#321f27;border:1px solid #653641;border-radius:13px;min-height:48px;padding:13px 16px;font-size:11px;margin-top:21px}
.loading{display:flex;align-items:center;flex-direction:column;padding-top:100px;gap:20px;font-size:12px;color:var(--muted)}
.loading-orbit{font-size:55px}
dialog{position:fixed;border:1px solid #3b4942;border-radius:25px;padding:27px 24px;color:var(--text);background:#1a2227;width:calc(100% - 36px);max-width:420px;max-height:85dvh;box-shadow:0 20px 100px #0008}
dialog::backdrop{background:#000b;backdrop-filter:blur(7px)}
dialog h2{font-size:23px;line-height:1.3;margin:15px 18px 14px 0}
dialog p{color:var(--muted);font-size:12px;margin-bottom:15px}
.modal-close{position:absolute;right:15px;top:10px;color:var(--muted);background:none;font-size:27px;padding:3px 9px}
.contact-list{display:flex;flex-direction:column;gap:6px;max-height:45dvh;overflow:auto}
.contact-option{display:flex;align-items:center;gap:12px;text-align:left;background:var(--panel);padding:12px 7px;border-radius:14px;font-size:13px}
.contact-option .chevron{margin-left:auto}
.empty-note{background:var(--panel);border-radius:13px;padding:17px}
.toast{position:fixed;z-index:10;bottom:calc(105px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);background:#d0efdf;color:#162a23;max-width:calc(100% - 40px);width:max-content;padding:13px 18px;border-radius:15px;font-size:12px;box-shadow:0 8px 30px #0005;pointer-events:none}
#demo-banner{color:var(--orange);font-size:10px;border:1px dashed #61492f;border-radius:9px;text-align:center;padding:6px;margin-bottom:9px}
@keyframes happy{0%,100%{transform:translateY(0) rotate(0)}
35%{transform:translateY(-17px) rotate(-6deg)}
65%{transform:translateY(-7px) rotate(5deg)}
}
@media(max-width:360px){.shell{padding-inline:17px}
h1{font-size:36px}
.brand-caption{font-size:9px}
.pair-row{gap:8px}
.pair-info>span{font-size:9px}
.pet-actions button{font-size:10px}
.daily-people{font-size:10px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
:root{font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Arial,sans-serif}
.wardrobe{grid-template-columns:repeat(3,minmax(0,1fr))}
.skin{min-width:0}
.skin svg{max-width:100%}
select{min-width:0;max-width:100%}
textarea{width:100%;border-radius:13px;background:var(--panel);border:1px solid var(--line);color:var(--text);padding:14px;font:inherit;resize:vertical}
/* Touch interactions should not inherit the dialog's keyboard focus ring. */
html[data-input="pointer"] :focus{outline:none}
button{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.pending .text-button{display:block;margin-top:12px}

/* Compact pet room and personal streak ranking. */
:root{--ease-out:cubic-bezier(.23,1,.32,1);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-optical-sizing:auto}
.shell{padding-inline:20px;padding-bottom:calc(96px + env(safe-area-inset-bottom))}
.brand{height:66px}
.brand a{font-size:19px;letter-spacing:-.7px}
.brand-mark{width:23px;height:25px;font-size:21px}
.brand-caption{font-size:9px}
button{touch-action:manipulation}
.primary,.secondary,.invite-round,.pet-switch{transition:transform 160ms var(--ease-out)}
.primary:active:enabled,.secondary:active:enabled,.invite-round:active,.pet-switch:active{transform:scale(.97)}
.bottom-nav button:active{background:#ffffff0b}
.top-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px}
.top-heading .kicker{margin-bottom:7px;font-size:10px;color:var(--muted)}
.top-heading h1{font-size:clamp(23px,6.8vw,32px);letter-spacing:-1.1px;line-height:1.12}
.invite-round{flex-shrink:0;width:44px;height:44px;border-radius:50%;background:#b9efd71a;border:1px solid #b9efd72e;color:var(--mint);font-size:28px;line-height:1}
.top-description{font-size:11px;color:var(--muted);max-width:28em;margin-top:13px}
.top-summary{display:grid;grid-template-columns:.8fr 1.25fr 1.25fr;gap:6px;margin:24px 0 26px;padding-block:17px;border-block:1px solid #ffffff10}
.top-summary>div{display:flex;flex-direction:column;gap:6px}
.top-summary>div+div{border-left:1px solid #ffffff10;padding-left:13px}
.top-summary strong{font-size:25px;font-weight:750;letter-spacing:-.7px;line-height:1.1;font-variant-numeric:tabular-nums}
.top-summary span{font-size:9px;color:var(--muted);line-height:1.3}
.top-summary .inline-fire{font-size:18px}
.ranking-caption{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;margin-bottom:11px;padding-inline:3px}
.ranking{list-style:none;padding:0;margin:0;gap:8px}
.ranking li{min-width:0}
.ranking .pair-row{padding:16px 12px;gap:10px;border-radius:18px;background:#161c21;border-color:#ffffff0b}
.ranking .rank-first{background:linear-gradient(110deg,#dca3640e,#171e23 70%);border-color:#dca36435}
.rank-number{width:21px;flex-shrink:0;color:#71817e;font-size:12px;font-weight:650;font-variant-numeric:tabular-nums}
.rank-number.podium{color:#e4b47f}
.rank-avatar{width:37px;height:37px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:#b9efd712;border:1px solid #b9efd72a;color:#d7f9e8;border-radius:50%;font-size:15px;font-weight:650}
.ranking li:nth-child(3n+2) .rank-avatar{background:#c2b4ff17;border-color:#c2b4ff30;color:#dfd8fb}
.ranking .pair-info{gap:3px}
.ranking .pair-info strong{font-size:13px}
.ranking .pair-info>span{font-size:9px;line-height:1.35}
.pair-info small{font-size:9px;color:#9aa5a2;font-variant-numeric:tabular-nums}
.ranking .chevron{font-size:21px}
.ranking .streak-pill{padding:3px 7px;font-size:11px;border-color:transparent}
.top-empty .ghost-art{max-width:200px}
.top-empty h2{font-size:20px}
.no-pet{padding-top:15px}
.no-pet h1{font-size:26px;margin-bottom:12px}
.pet-picker{display:grid;gap:9px}
.pet-picker .pair-row{padding:12px}
body[data-page="pet"] .brand{height:48px}
body[data-page="pet"] .brand a{font-size:16px}
body[data-page="pet"] .brand-mark{width:19px;height:21px;font-size:18px}
body[data-page="pet"] .brand-caption{font-size:8px}
.pet-page{max-width:390px;margin:auto}
.pet-page .pet-heading{padding:9px 0 0;gap:10px;align-items:center}
.pet-page .pet-heading h1{font-size:22px;line-height:1.2}
.pet-page .name-button{font-size:22px;letter-spacing:-.6px;line-height:1.2}
.pet-page .name-button span{font-size:13px;margin-left:3px}
.pet-page .pet-heading .kicker{font-size:10px;margin:4px 0 0;max-width:210px}
.pet-page .streak-pill{padding:3px 9px;font-size:11px}
.pet-switch{width:44px;min-height:44px;border:1px solid #ffffff14;background:#ffffff07;border-radius:50%;font-size:21px;color:var(--muted)}
.pet-page .together{margin:16px auto 0;gap:20px;max-width:300px}
.pet-page .avatar{width:44px;height:44px;background:#548fba;border:2px solid #c8eaff;font-size:18px}
.pet-page .avatar.peer{background:#9d88cf;border-color:#e0d6ff}
.pet-page .level{width:148px;min-width:0;background:#161a20;border:1px solid #ffffff10;border-radius:22px;padding:12px 14px;gap:3px;box-shadow:inset 0 1px 0 #ffffff05}
.pet-page .level strong{font-size:27px;line-height:1.1;letter-spacing:-.8px;font-weight:750;font-variant-numeric:tabular-nums}
.pet-page .level>span{font-size:9px}
.pet-page .level progress{margin:6px 0 3px;height:3px}
.pet-page .level small{font-size:8px;line-height:1.5;color:var(--muted)}
.pet-page progress::-webkit-progress-value{background:var(--orange)}
.pet-page progress::-moz-progress-bar{background:var(--orange)}
.pet-page .pet-stage{width:100%;max-width:320px;height:clamp(205px,36dvh,310px);margin:0 auto 8px;display:flex;align-items:center;justify-content:center;flex-direction:column}
.pet-page .pet-stage>.ghost-art{width:auto;max-width:100%;height:calc(100% - 20px);margin:0;flex-shrink:1}
.pet-page .pet-mood{font-size:10px;line-height:1.4;position:static;margin-top:-8px}
.pet-page .daily-people{justify-content:center;align-items:center;gap:10px;font-size:10px;max-width:275px;margin:0 auto 12px}
.daily-line{width:28px;height:1px;background:#ffffff20;flex-shrink:0}
.pet-page .pet-actions{max-width:310px;margin:0 auto;gap:9px}
.pet-page .pet-actions .secondary{font-size:11px;min-height:44px;border-radius:24px;padding:10px 8px;background:#ffffff0a;border-color:#ffffff0e}
.pet-page .action-hint{margin:9px 0 13px;font-size:9px}
.pet-history{border-top:1px solid #ffffff0e;margin:0 auto;max-width:340px}
.pet-history summary{display:flex;justify-content:space-between;align-items:center;gap:12px;cursor:pointer;list-style:none;min-height:44px;font-size:11px;color:#b8c3be}
.pet-history summary::-webkit-details-marker{display:none}
.pet-history summary span{font-size:10px;color:var(--muted)}
.pet-history summary b{font-weight:400;margin-left:5px}
.pet-history[open] summary b{display:inline-block;transform:rotate(180deg)}
.pet-history .calendar-section{margin-top:5px}
.pet-page .pending{margin:14px 0 4px;padding:15px}
.pet-page .pending strong{font-size:13px}
.pet-page .pending p{font-size:11px;margin:7px 0 10px}
.pet-page .pending .primary{font-size:11px;width:100%;padding:11px;min-height:44px}
.pet-page .pending~.pet-stage{height:210px}
summary:focus-visible,textarea:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
@media(max-width:360px){.shell{padding-inline:15px}.ranking .pair-row{gap:7px;padding-inline:9px}.rank-avatar{width:31px;height:31px}.rank-number{width:16px;font-size:11px}.ranking .pair-info>span{font-size:8px}.ranking .pair-info small{font-size:8px}.top-summary>div+div{padding-left:9px}.pet-page .together{gap:14px}.pet-page .level{width:140px}.brand-caption{font-size:8px}}
@media(max-height:700px){body[data-page="pet"] .brand{height:40px}.pet-page .together{margin-top:10px}.pet-page .pet-stage{height:clamp(165px,30dvh,210px)}.pet-page .level{padding-block:9px}.pet-page .action-hint{margin-block:7px}}
@media(prefers-reduced-transparency:reduce){.bottom-nav{background:#252d31;backdrop-filter:none;-webkit-backdrop-filter:none}.nav-glass{background:#43534e}}
@media(prefers-contrast:more){.bottom-nav{background:#17201f;border-color:#a3b9b0;backdrop-filter:none;-webkit-backdrop-filter:none}.nav-glass{background:#3d5549;border-color:#d1ffeb}.bottom-nav button{color:#e1e9e5}.top-description,.pair-info small{color:#c2cfca}}
@supports not (backdrop-filter:blur(1px)){.bottom-nav{background:#252d31}.nav-glass{background:#43534e}}
@media(prefers-reduced-motion:reduce){.primary:active:enabled,.secondary:active:enabled,.invite-round:active,.pet-switch:active{transform:none}}