:root{color:#241f1a;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--paper:#faf6ef;--paper-deep:#f3eadf;--ink:#241f1a;--muted:#74695f;--line:#48392b24;--note:#fffdf8d1;--veil:#faf6ef85;--note-solid:#fffdf8;--accent:#2f7d6e;--accent-soft:#e5f1ec;--warn:#b75a47;--shadow:0 16px 38px #4938281f;background:#faf6ef;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:400;line-height:1.5}*{box-sizing:border-box}body{background:var(--paper);min-width:320px;min-height:100svh;margin:0}button,input,textarea{font:inherit}button{background:var(--accent);color:#fff;border:0;border-radius:8px;min-height:42px;padding:0 16px;font-weight:800;transition:transform .14s,opacity .14s,background .14s,box-shadow .14s}button:active{transform:translateY(1px)scale(.99)}button:disabled{opacity:.42;transform:none}button.secondary{color:var(--ink);background:#efe6da}.text-button,.settings-link{min-height:34px;color:var(--muted);background:0 0;padding:0;font-weight:800}.text-button:active,.settings-link:active{transform:none}.app-shell{min-height:100svh}.page{width:min(100%,560px);margin:0 auto;padding:14px 14px 18px}.home-page{min-height:100svh}.home-postcard{flex-direction:column;gap:12px;width:100%;max-width:100%;min-height:calc(100svh - 32px);display:flex;position:relative}.home-topbar,.settings-topbar{min-height:42px;color:var(--ink);align-items:center;display:grid}.home-topbar{width:100%;position:relative}.settings-topbar{grid-template-columns:1fr auto 1fr}.home-topbar strong,.settings-topbar strong{letter-spacing:0;font-size:.96rem}.home-topbar strong{justify-self:start}.settings-topbar strong{justify-self:center}.home-settings-button{z-index:4;position:absolute;top:4px;right:0}.settings-topbar .text-button{justify-self:start}.scene-layer{isolation:isolate;min-height:260px;position:relative;overflow:hidden}.pet-backdrop{z-index:0;object-fit:contain;filter:drop-shadow(0 22px 28px #49382829);pointer-events:none;-webkit-user-select:none;user-select:none;width:min(64vw,268px);max-width:268px;height:auto;animation:4.4s ease-in-out infinite pet-breathe;position:absolute;top:-2px;right:-28px}.status-note{z-index:1;-webkit-backdrop-filter:blur(3px)saturate(1.05);background:#faf6ef57;border:1px solid #48392b0f;border-radius:8px;width:min(62%,270px);min-width:0;padding:10px 11px;position:absolute;inset:46px auto auto 0;box-shadow:0 8px 22px #4938280f,inset 0 1px #ffffff75}.status-note h1{color:var(--ink);letter-spacing:0;margin:7px 0 3px;font-size:1.04rem;line-height:1.22}.status-note p{color:var(--muted);margin:0;font-size:.84rem;font-weight:700}.presence{color:#5e5147;background:#eee5da8f;border-radius:999px;align-items:center;min-height:21px;padding:0 7px;font-size:.7rem;font-weight:900;display:inline-flex}.presence.online{color:#24685c;background:#e5f1ec9e}.presence.server_unreachable{color:var(--warn);background:#f4dfd89e}.action-rail{overscroll-behavior-x:contain;scrollbar-width:none;gap:8px;margin:0 -14px;padding:0 14px 4px;display:flex;overflow-x:auto}.action-rail::-webkit-scrollbar{display:none}.action-button{min-height:38px;color:var(--ink);box-shadow:none;white-space:nowrap;background:#fffdf8b8;border:1px solid #48392b29;border-radius:999px;flex:none;padding:0 15px}.action-button.selected,.action-button:active{color:#245e54;background:#edf5f1;border-color:#2f7d6e61;box-shadow:inset 0 1px 4px #2f7d6e1f}.action-button span{display:block}.composer{border:1px solid var(--line);background:var(--note);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:8px;gap:9px;padding:14px;display:grid;box-shadow:0 12px 30px #49382814}.composer-title,.composer-row{justify-content:space-between;align-items:center;gap:12px;display:flex}label{color:var(--ink);font-size:.9rem;font-weight:900}.composer-title span,.composer-hint{color:var(--muted);font-size:.78rem;font-weight:800}input,textarea{width:100%;color:var(--ink);background:#ffffff94;border:1px solid #48392b1f;border-radius:8px;outline:none;padding:11px 12px}textarea{resize:none;min-height:50px}input:focus,textarea:focus{border-color:#2f7d6e80;box-shadow:0 0 0 3px #2f7d6e14}.composer-row button{border-radius:999px;min-height:38px;padding:0 14px}.form-message{color:var(--accent);margin:-2px 0 0;font-size:.88rem;font-weight:900}.error{color:var(--warn)}.history-strip{min-height:32px;color:var(--muted);align-items:center;gap:8px;font-size:.82rem;display:flex}.history-strip p{text-overflow:ellipsis;white-space:nowrap;min-width:0;margin:0;overflow:hidden}.history-label{color:var(--ink);flex:none;font-weight:900}.pairing-page,.settings-page{padding-top:20px}.brand-block{flex-direction:column;justify-content:end;gap:8px;min-height:34svh;padding:24px 0;display:flex}.brand-block img{object-fit:contain;filter:drop-shadow(0 18px 22px #49382824);width:112px;height:122px}.eyebrow{color:var(--warn);margin:0;font-size:.8rem;font-weight:900}h1,h2,p{margin-top:0}h1{color:var(--ink);letter-spacing:0;margin-bottom:8px;font-size:2rem;line-height:1.08}h2{letter-spacing:0;margin-bottom:8px;font-size:1.08rem;line-height:1.2}.muted{color:var(--muted)}.panel,.privacy{border:1px solid var(--line);background:var(--note-solid);border-radius:8px;margin:14px 0;padding:16px}.panel{gap:12px;display:grid}.settings-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.privacy ul{margin:0;padding:0;list-style:none}.privacy li{color:#5f554c;padding:8px 0}@keyframes pet-breathe{0%,to{transform:translateY(0)rotate(-1deg)}50%{transform:translateY(-6px)rotate(0)}}@media (width<=420px){.page{padding-left:12px;padding-right:12px}.home-postcard{gap:10px;min-height:calc(100svh - 28px)}.scene-layer{min-height:232px}.pet-backdrop{width:216px;top:-4px;right:-42px}.status-note{width:min(61%,240px);min-width:0;padding:9px 10px;top:40px;right:auto}.status-note h1{font-size:.98rem}.action-rail{margin-left:-12px;margin-right:-12px;padding-left:12px;padding-right:12px}}@media (width<=360px){.scene-layer{min-height:224px}.pet-backdrop{width:210px;top:-3px;right:-43px}.status-note{width:min(62%,232px);padding:9px 10px;top:38px;right:auto}.composer-row{flex-direction:column;align-items:stretch}.settings-actions{grid-template-columns:1fr}}
