/* Tether styles (from the approved 0.3.0 mockup). */
:root{--ground:#F0EDE6;--raised:#F8F6F1;--sunk:#E6E1D7;--ink:#2A2220;--soft:#5E5450;--rule:rgba(42,34,32,.14);--rule-w:1px;--accent:#8C363F;--on-fill:#F8F6F1;
 --shadow:0 1px 0 rgba(42,34,32,.06),0 6px 18px rgba(42,34,32,.06);--radius:10px;--radius-sm:6px;--scale:1;--body-font:'Newsreader',Georgia,serif;--weight:400}
[data-theme=night]{--ground:#15171C;--raised:#1D2027;--sunk:#101216;--ink:#ECE6DA;--soft:#B3AC9F;--rule:rgba(236,230,218,.14);--on-fill:#15171C;--shadow:0 1px 0 rgba(0,0,0,.3),0 8px 20px rgba(0,0,0,.25)}
[data-theme=canopus]{--ground:#000;--raised:#000;--sunk:#000;--ink:#F0EDE6;--soft:rgba(240,237,230,.7);--rule:rgba(240,237,230,.16);--accent:#F0EDE6;--on-fill:#000;--shadow:none}
[data-theme=lighthouse]{--ground:#FFFFFF;--raised:#FFFFFF;--sunk:#FFFFFF;--ink:#0E0A0A;--soft:#3A2A2C;--rule:#0E0A0A;--rule-w:2px;--accent:#6E1F28;--on-fill:#FFFFFF;--shadow:none;--weight:600}
[data-corners=sharp]{--radius:2px;--radius-sm:2px}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--ground);color:var(--ink);font-family:var(--body-font);font-weight:var(--weight);font-size:calc(17px * var(--scale));line-height:1.45;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1;-webkit-font-smoothing:antialiased;overflow-x:hidden}
input,button,textarea,select{font:inherit;color:inherit;font-variant-numeric:lining-nums tabular-nums}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mar{font-family:'Marcellus',serif;font-weight:400;letter-spacing:.02em}
.bgpaint,.bgpaper,#sky{position:fixed;inset:0;pointer-events:none;z-index:0}
.bgpaint{opacity:0}.bgpaint::after{content:"";position:absolute;inset:0;background:var(--ground);opacity:.8}
[data-bg=painting] .bgpaint{opacity:1}
.bgpaper{opacity:0;background-image:radial-gradient(rgba(120,100,80,.07) 1px,transparent 1px);background-size:5px 5px}
[data-bg=paper] .bgpaper{opacity:1}
[data-theme=canopus] .bgpaint,[data-theme=lighthouse] .bgpaint,[data-theme=canopus] .bgpaper,[data-theme=lighthouse] .bgpaper{opacity:0}
#sky{display:none}[data-theme=canopus] #sky{display:block}
.app{position:relative;z-index:1;max-width:560px;margin:0 auto;padding-bottom:calc(86px + env(safe-area-inset-bottom))}
header.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:8px;padding:8px 14px;background:color-mix(in srgb,var(--ground) 88%,transparent);backdrop-filter:blur(8px);border-bottom:var(--rule-w) solid var(--rule)}
.brand{display:flex;align-items:center;gap:8px;flex:1;min-width:0;color:var(--accent)}
.brand .mark{width:62px;height:26px;flex:none}
.brand .mar{font-size:21px;letter-spacing:.16em;color:var(--ink)}
.brand small{display:block;font-family:'Marcellus',serif;font-size:10px;letter-spacing:.3em;color:var(--soft)}
.iconbtn{width:44px;height:44px;display:grid;place-items:center;border:0;background:transparent;border-radius:var(--radius);color:var(--ink)}
.iconbtn:hover{background:var(--sunk)}
.who{display:flex;align-items:center;gap:6px;border:var(--rule-w) solid var(--rule);background:var(--raised);border-radius:999px;padding:4px 10px 4px 4px;min-height:44px;font-size:14px}
.av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:'Marcellus',serif;font-size:14px;color:#fff;flex:none;font-weight:400}
.av.sm{width:22px;height:22px;font-size:11px}.av.lg{width:48px;height:48px;font-size:20px}
main{padding:14px}
h1{font-family:'Marcellus',serif;font-weight:400;font-size:calc(26px * var(--scale));margin:6px 0 2px}
h2{font-family:'Marcellus',serif;font-weight:400;font-size:calc(19px * var(--scale));margin:22px 0 10px}
h3{font-family:'Marcellus',serif;font-weight:400;font-size:1.06em;margin:0 0 6px}
.sub{color:var(--soft);margin:0 0 14px;font-size:.92em}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:var(--rule-w) solid var(--rule);background:var(--raised);border-radius:999px;padding:0 14px;min-height:40px;font-size:15px;display:flex;align-items:center;gap:6px}
.chip[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--on-fill)}
.card{background:var(--raised);border:var(--rule-w) solid var(--rule);border-radius:var(--radius);box-shadow:var(--shadow)}
[data-theme=canopus] .card{background:transparent}
.pad{padding:14px}
.list{display:flex;flex-direction:column;gap:10px}
.row{display:flex;gap:12px;padding:10px;align-items:center;text-align:left;width:100%}
.row .info{flex:1;min-width:0}
.t{font-family:'Marcellus',serif;font-size:1.06em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta{color:var(--soft);font-size:.86em}
.by{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:.84em;color:var(--soft);flex-wrap:wrap}
.both{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--accent);color:var(--accent);border-radius:999px;padding:1px 8px;font-size:.82em}
[data-layout=compact] .poster{width:40px;height:56px;font-size:9px}[data-layout=compact] .row{padding:6px 10px}[data-layout=compact] .list{gap:6px}
.poster{width:58px;height:84px;border-radius:var(--radius-sm);flex:none;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:5px;color:rgba(255,255,255,.95);font-family:'Marcellus',serif;font-size:10px;line-height:1.1}
.poster svg{position:absolute;inset:0;width:100%;height:100%}.poster span{position:relative}
.poster.big{width:110px;height:160px;font-size:15px;padding:9px}
.heart{width:44px;height:44px;border:0;background:transparent;display:grid;place-items:center;color:var(--soft);border-radius:var(--radius)}
.heart[aria-pressed=true]{color:var(--accent)}
.reorder{display:flex;flex-direction:column}.reorder button{width:44px;height:44px;border:0;background:transparent;color:var(--soft);display:grid;place-items:center;border-radius:var(--radius-sm)}.reorder button:hover{background:var(--sunk)}.reorder button:disabled{opacity:.25}
.btn{min-height:46px;border-radius:var(--radius);border:var(--rule-w) solid var(--rule);background:var(--raised);padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:16px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-fill)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--soft)}
.btn.danger{background:transparent;border:1.5px dashed var(--ink);color:var(--ink)}
.btn.sm{min-height:40px;font-size:15px;padding:0 12px}
.btn.wide{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn[aria-pressed=true]{border:2px solid var(--accent);color:var(--accent)}
.moment{position:fixed;left:50%;top:40%;transform:translate(-50%,-40%) scale(.96);opacity:0;z-index:40;width:min(320px,86vw);border-radius:16px;padding:0 0 18px;text-align:center;overflow:hidden;transition:opacity .35s cubic-bezier(.16,1,.3,1),transform .35s cubic-bezier(.16,1,.3,1);box-shadow:0 18px 50px rgba(0,0,0,.3);pointer-events:none}
.moment.show{opacity:1;transform:translate(-50%,-40%) scale(1)}
.moment[data-kind=night]{background:#0B1020;color:#F0EDE6}
.moment[data-kind=morning]{background:#F6E7D2;color:#2A2220}
.moment svg{display:block;width:100%;height:90px;margin-bottom:8px}
.btns{display:flex;gap:8px;flex-wrap:wrap}.btns .btn{flex:1 1 auto}
.fab{position:fixed;right:max(16px,calc(50% - 264px));bottom:calc(90px + env(safe-area-inset-bottom));z-index:6;min-height:54px;padding:0 20px;border-radius:999px;box-shadow:0 6px 20px rgba(0,0,0,.18)}
nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:7;background:color-mix(in srgb,var(--ground) 92%,transparent);backdrop-filter:blur(8px);border-top:var(--rule-w) solid var(--rule);padding-bottom:env(safe-area-inset-bottom)}
nav.tabs div{max-width:560px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr)}
nav.tabs button{border:0;background:transparent;min-height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:12px;color:var(--soft);position:relative}
nav.tabs button[aria-current=page]{color:var(--accent)}
nav.tabs button[aria-current=page]::before{content:"";position:absolute;top:0;left:28%;right:28%;height:2px;background:var(--accent)}
.badge{position:absolute;top:6px;left:calc(50% + 5px);background:var(--accent);color:var(--on-fill);border-radius:999px;font-size:12px;min-width:20px;height:20px;padding:0 5px;display:grid;place-items:center}
.seg{display:flex;border:var(--rule-w) solid var(--rule);border-radius:999px;padding:3px;background:var(--raised);margin-bottom:14px;overflow-x:auto;scrollbar-width:none}
.seg button{flex:1 0 auto;border:0;background:transparent;min-height:40px;border-radius:999px;font-size:15px;color:var(--soft);padding:0 12px;white-space:nowrap}
.seg button[aria-pressed=true]{background:var(--accent);color:var(--on-fill)}
.reason{font-style:italic;margin:6px 0 0}.reason::before{content:"\201C"}.reason::after{content:"\201D"}
.status{display:inline-flex;align-items:center;gap:4px;font-size:.82em;border:1px solid var(--rule);border-radius:999px;padding:2px 9px;color:var(--soft);margin-top:6px}
.empty{text-align:center;padding:30px 16px;color:var(--soft)}.empty .mar{font-size:20px;color:var(--ink);display:block;margin-bottom:6px}
.scrim{position:fixed;inset:0;background:rgba(10,8,8,.45);z-index:20;display:none}.scrim.open{display:block}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:21;max-width:560px;margin:0 auto;background:var(--raised);border-radius:16px 16px 0 0;border:var(--rule-w) solid var(--rule);max-height:92vh;overflow:auto;transform:translateY(105%);transition:transform .25s ease;padding:8px 16px calc(20px + env(safe-area-inset-bottom))}
[data-theme=canopus] .sheet{background:#000}
.sheet.open{transform:none}
.grab{width:40px;height:4px;border-radius:2px;background:var(--rule);margin:4px auto 10px}
.sheethead{display:flex;align-items:center;gap:8px;margin-bottom:8px}.sheethead h2{margin:0;flex:1}
.stars{display:flex;gap:4px}.stars button{width:44px;height:44px;border:0;background:transparent;color:var(--soft);display:grid;place-items:center}.stars button[aria-pressed=true]{color:var(--accent)}
.field{display:block;margin:10px 0}.field>span{display:block;font-size:.88em;color:var(--soft);margin-bottom:4px}
.input{width:100%;min-height:46px;border:var(--rule-w) solid var(--rule);border-radius:var(--radius);background:var(--ground);padding:10px 12px;font-size:16px}
textarea.input{min-height:84px;resize:vertical}
.count{text-align:right;font-size:.8em;color:var(--soft)}
.toast{position:fixed;left:16px;right:16px;margin:0 auto;width:fit-content;max-width:min(520px,calc(100vw - 32px));bottom:calc(94px + env(safe-area-inset-bottom));z-index:30;background:var(--ink);color:var(--ground);border-radius:14px;padding:10px 12px 10px 16px;display:flex;align-items:center;gap:12px;font-size:15px;opacity:0;pointer-events:none;transform:translateY(8px);transition:.2s}
.toast.show{opacity:1;pointer-events:auto;transform:none}
.toast button{border:0;background:transparent;color:var(--ground);text-decoration:underline;min-height:40px;white-space:nowrap;font-size:15px}
.promise{display:flex;gap:12px;padding:14px;align-items:flex-start}
.promise .ic,.cic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;border:var(--rule-w) solid var(--rule);color:var(--accent)}
.promise b{font-family:'Marcellus',serif;font-weight:400;font-size:1.05em;display:block;margin-bottom:2px}
.promise p{margin:0;color:var(--soft);font-size:.93em}
.hero{padding:20px 16px;text-align:center}.hero .ic{margin:0 auto 8px;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;color:var(--accent);border:var(--rule-w) solid var(--rule)}
.code{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0;font-size:1.5em;letter-spacing:.08em;text-align:center}
.code div{border:var(--rule-w) solid var(--rule);border-radius:var(--radius-sm);padding:8px 0;background:var(--ground)}
details{border-top:var(--rule-w) solid var(--rule);padding:12px 2px}details:last-child{border-bottom:var(--rule-w) solid var(--rule)}
summary{cursor:pointer;min-height:32px;display:flex;align-items:center;font-family:'Marcellus',serif}
details p,details li{color:var(--soft);font-size:.93em}
.menu .row{border:0;background:transparent;border-bottom:var(--rule-w) solid var(--rule);border-radius:0;min-height:56px;color:inherit}
.menu .row:last-child{border-bottom:0}
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.opt{border:var(--rule-w) solid var(--rule);background:var(--ground);border-radius:var(--radius);min-height:64px;padding:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:13px;position:relative}
.opt[aria-pressed=true]{border:2px solid var(--accent)}.opt[aria-pressed=true]::after{content:"\2713";position:absolute;top:4px;right:8px;color:var(--accent);font-size:13px}
.sw{display:flex;gap:10px;flex-wrap:wrap}.sw button{width:44px;height:44px;border-radius:50%;border:2px solid transparent;padding:0}
.sw button[aria-pressed=true]{outline:2px solid var(--ink);outline-offset:3px}.sw button:disabled{opacity:.35;cursor:not-allowed}.sw label{font-size:12px}
.note{font-size:.86em;color:var(--soft);margin:6px 0 0}
input[type=range]{width:100%;accent-color:var(--accent);min-height:44px}
.foot{text-align:center;color:var(--soft);font-size:.82em;padding:20px 0 6px}.foot button{border:0;background:transparent;color:var(--soft);text-decoration:underline;min-height:40px}
.tag{display:inline-block;font-size:.75em;border:1px solid var(--accent);color:var(--accent);border-radius:4px;padding:0 6px;margin-right:6px}
/* home */
.partner{display:flex;gap:12px;align-items:center;padding:14px}
.pstat{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.pill{display:inline-flex;align-items:center;gap:4px;font-size:.8em;border:var(--rule-w) solid var(--rule);border-radius:999px;padding:2px 9px;color:var(--soft);background:var(--ground)}
.pill.on{color:var(--accent);border-color:var(--accent)}
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.quick button{border:var(--rule-w) solid var(--rule);background:var(--raised);border-radius:var(--radius);min-height:76px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:13px;color:var(--ink);position:relative;overflow:hidden;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.quick button>*{position:relative}
.quick .hold::before{content:'';position:absolute;inset:0;background:var(--accent);opacity:.16;transform:scaleY(0);transform-origin:bottom}
.quick .hold.holding::before{transform:scaleY(1);transition:transform .65s linear}
.quick .opens{border-style:solid}
.quick .hold.main{background:var(--accent);border-color:var(--accent);color:var(--on-fill)}
.quick .hold.main svg{color:var(--on-fill)}
.quick .hold.main::before{background:var(--on-fill);opacity:.28}
.count-card .actions button.icon{width:44px;padding:0;justify-content:center}
.subrow{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 10px}
.btn.accent{background:transparent;border-color:var(--accent);color:var(--accent)}
.added{display:inline-flex;align-items:center;gap:4px;color:var(--soft);font-size:14px;padding:0 6px;flex:none}
.chips.soft .chip[aria-pressed=true]{background:transparent;color:var(--accent);border-color:var(--accent)}
.fabspace{height:76px}
.switch{flex:none;font-size:13px;border-radius:999px;padding:3px 10px;border:var(--rule-w) solid var(--rule);color:var(--soft)}
.switch[aria-checked=true]{background:var(--accent);border-color:var(--accent);color:var(--on-fill)}
details.fold{margin-top:4px}details.fold summary{min-height:44px;display:flex;align-items:center;cursor:pointer;color:var(--soft)}details.fold summary b{color:var(--ink);margin-left:4px;font-weight:normal}
body.ob-on{overflow:hidden}
#ob{position:fixed;inset:0;z-index:50;background:var(--ground);overflow-y:auto;color:var(--ink)}
#ob .ob-in{max-width:560px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;padding:12px 16px calc(16px + env(safe-area-inset-bottom))}
#ob .ob-body{flex:1;display:flex;flex-direction:column}
#ob h1{margin:14px 0 6px}#ob .ob-top .btn{min-height:44px}#ob .ob-top{display:flex;align-items:center;justify-content:space-between}
#ob .ob-step{font-size:14px;color:var(--soft)}
#ob .ob-dots{display:flex;gap:6px;margin:6px 0 4px}#ob .ob-dots i{flex:1;height:4px;border-radius:2px;background:var(--rule)}#ob .ob-dots i.on{background:var(--accent)}
#ob .ob-foot{margin-top:auto;padding-top:18px;position:sticky;bottom:0;background:linear-gradient(transparent,var(--ground) 30%)}
#ob .ob-foot .btns .btn{flex:1 1 0}
#ob .ob-hero{text-align:center;padding:28px 0 10px}#ob .ob-hero .mark{width:150px;height:62px;color:var(--accent)}
#ob .ob-big{display:flex;justify-content:center;color:var(--accent);margin:26px 0 10px}
#ob .ob-lock{border-radius:18px;background:#1b1715;color:#fff;padding:18px 14px 22px;margin:16px 0}
#ob .ob-lock-time{text-align:center;font-family:'Marcellus',serif;font-size:42px;margin-bottom:14px;font-variant-numeric:lining-nums tabular-nums}
#ob .ob-notice{background:rgba(255,255,255,.14);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;font-size:14px}
#ob .ob-app{font-size:12px;opacity:.8;display:flex;align-items:center;gap:4px}
#ob .ob-code{font-family:'Marcellus',serif;font-size:22px;letter-spacing:1px;text-align:center;border:1.5px dashed var(--accent);border-radius:var(--radius);padding:18px 10px;margin:14px 0;font-variant-numeric:lining-nums tabular-nums}
#ob .ob-prev{margin-top:16px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.quick button svg{color:var(--accent)}
.quick button.pulse{animation:pulse .6s ease}
@keyframes pulse{0%{transform:scale(1)}30%{transform:scale(.94)}60%{transform:scale(1.04)}100%{transform:scale(1)}}
.count-card{position:relative;overflow:hidden;border-radius:var(--radius);height:300px;color:#fff;border:var(--rule-w) solid var(--rule)}
.count-card .paint{position:absolute;inset:0}
.count-card .frame{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:62%;border:1.5px solid rgba(255,255,255,.95);text-align:center;padding:16px 10px 12px;background:rgba(20,16,14,.3)}
.count-card .paint::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(0,0,0,.18),transparent 70%)}
.count-card .num{font-family:'Marcellus',serif;font-size:68px;line-height:1;text-shadow:0 1px 8px rgba(0,0,0,.25)}
.count-card .lbl{font-size:17px;margin-top:6px;text-shadow:0 1px 6px rgba(0,0,0,.3)}
.count-card .div{display:flex;align-items:center;gap:8px;margin:10px -10px 8px}.count-card .div i{flex:1;height:1.5px;background:rgba(255,255,255,.95)}
.count-card .ev{font-family:'Marcellus',serif;font-size:18px;text-shadow:0 1px 6px rgba(0,0,0,.3)}
.count-card .band{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;gap:8px;padding:28px 10px 8px;background:linear-gradient(transparent,rgba(12,9,8,.72))}
.count-card .credit{flex:1;font-size:13px;line-height:1.3;color:#fff}
.count-card .paint img{filter:saturate(1.05)}
.count-card .actions{display:flex;gap:6px;flex:none}
.count-card .actions button{border:1px solid rgba(255,255,255,.55);background:rgba(12,9,8,.55);color:#fff;border-radius:999px;min-height:44px;padding:0 12px;font-size:14px;display:flex;align-items:center;gap:6px}
.qa{border-top:var(--rule-w) solid var(--rule);margin-top:12px;padding-top:12px}
.locked{display:flex;gap:10px;align-items:center;color:var(--soft);font-size:.92em;filter:none}
.blur{filter:blur(6px);user-select:none}
.photos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.photo{aspect-ratio:1;border-radius:var(--radius-sm);background:var(--sunk);position:relative;overflow:hidden;display:grid;place-items:center;color:var(--soft);font-size:.86em;text-align:center;border:var(--rule-w) dashed var(--rule)}
.photo img,.photo svg.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo .cap{position:absolute;left:6px;bottom:6px;font-size:12px;background:rgba(0,0,0,.45);color:#fff;border-radius:999px;padding:2px 8px;display:flex;align-items:center;gap:4px}
.photo .veil{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.25);color:#fff;font-size:13px;padding:10px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:12px;text-align:left;min-height:96px;border:var(--rule-w) solid var(--rule);background:var(--raised);border-radius:var(--radius);color:var(--ink)}
.tile svg{color:var(--accent)}
.tile .meta{font-size:.8em}
/* reading */
.prog{height:6px;border-radius:3px;background:var(--sunk);overflow:hidden;margin-top:4px}.prog i{display:block;height:100%}
.pp{display:flex;align-items:center;gap:6px;font-size:.84em;color:var(--soft);margin-top:6px}
.pp .bar{flex:1}
.step{min-width:44px;height:44px;border-radius:999px;border:var(--rule-w) solid var(--rule);background:var(--ground);display:grid;place-items:center;font-size:14px;padding:0 8px;color:var(--ink)}
/* vent */
.vent-banner{display:flex;gap:12px;align-items:center;padding:14px;border-color:var(--accent)}
.newdot{position:absolute;right:-2px;top:-2px;width:14px;height:14px;border-radius:50%;background:var(--accent);border:2px solid var(--raised)}
.bubbles{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.bub{max-width:82%;padding:9px 12px;border-radius:14px;background:var(--sunk);font-size:.98em;line-height:1.4}
.bub.me{align-self:flex-end;background:var(--accent);color:var(--on-fill);border-bottom-right-radius:4px}
.bub.them{align-self:flex-start;border-bottom-left-radius:4px}
[data-theme=canopus] .bub.them{border:1px solid var(--rule)}
.bub time{display:block;font-size:.72em;opacity:.7;margin-top:2px}
.composer{position:sticky;bottom:calc(72px + env(safe-area-inset-bottom));display:flex;gap:8px;padding:10px 0;background:linear-gradient(transparent,var(--ground) 30%)}
.composer textarea{flex:1;min-height:46px;max-height:140px}
.reacts{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.sysmsg{text-align:center;font-size:.8em;color:var(--soft);margin:8px 0}
/* todo */
.task{display:flex;align-items:center;gap:10px;padding:10px 12px}
.tick{width:44px;height:44px;border:0;background:transparent;flex:none;display:grid;place-items:center;color:var(--on-fill);position:relative;margin:-7px -4px -7px -7px}
.tick::before{content:'';position:absolute;width:28px;height:28px;border-radius:50%;border:2px solid var(--soft);left:8px;top:8px;box-sizing:border-box}
.tick svg{position:relative}
.tick[aria-checked=true]::before{background:var(--accent);border-color:var(--accent)}
.task.done .t{text-decoration:line-through;color:var(--soft)}
.whochip{font-size:.78em;border-radius:999px;padding:1px 8px;color:#fff;display:inline-flex;align-items:center;gap:4px}
.due{font-size:.8em;color:var(--soft);display:inline-flex;align-items:center;gap:3px}
.due.late{color:var(--accent)}
.tap{width:100%;min-height:120px;border-radius:var(--radius);border:2px dashed var(--rule);background:var(--ground);display:grid;place-items:center;font-size:1em;color:var(--soft)}
.tap.rec{border-color:var(--accent);color:var(--accent)}
.rhythm{display:flex;gap:3px;align-items:center;height:28px;margin-top:8px}
.rhythm i{display:block;height:100%;background:var(--accent);border-radius:2px}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}
@media (min-width:900px){.app{max-width:640px}nav.tabs div,.sheet{max-width:640px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Tether app (0.4.0) */
nav.tabs div{grid-template-columns:repeat(5,1fr)}
.syncdot{font-size:13px;color:var(--soft)}
.syncdot[data-s=error]{color:var(--accent)}
body.hasfab .toast{bottom:calc(156px + env(safe-area-inset-bottom))}
.sheet{bottom:var(--kb,0px);max-height:calc(100dvh - var(--kb,0px) - 24px)}
#ob .ob-foot{bottom:var(--kb,0px)}
body.typing nav.tabs{display:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.composer .btn{flex:none;width:52px;padding:0}
.pp .bar{min-width:0}.pp .bar span{white-space:nowrap}
/* Vent works like a chat app: the box sits at the bottom above the tabs and rides up with the keyboard */
body.chat #view{padding-bottom:84px}
body.chat .composer{position:fixed;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom));z-index:6;max-width:560px;margin:0 auto;padding:8px 12px;background:var(--ground);border-top:var(--rule-w) solid var(--rule);align-items:flex-end}
body.chat.typing .composer{bottom:calc(var(--kb,0px) + env(safe-area-inset-bottom))}
body.chat .composer textarea{resize:none;border-radius:22px;min-height:46px;padding:11px 16px;line-height:1.35}
body.chat .composer .btn{border-radius:50%;width:46px;height:46px;min-height:46px}
@media (min-width:900px){body.chat .composer{max-width:640px}}
body.chat .emobtn{flex:none;width:46px;height:46px;border:0;background:transparent;color:var(--soft);display:grid;place-items:center;border-radius:50%}
.emopanel{position:fixed;left:0;right:0;bottom:calc(126px + env(safe-area-inset-bottom));z-index:6;max-width:560px;margin:0 auto;background:var(--raised);border-top:var(--rule-w) solid var(--rule);display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:8px;max-height:200px;overflow:auto}
body.typing .emopanel{bottom:calc(var(--kb,0px) + 62px + env(safe-area-inset-bottom))}
.emopanel button{border:0;background:transparent;font-size:26px;min-height:44px;border-radius:10px}
.emopanel button:active{background:var(--sunk)}
body.emo #view{padding-bottom:300px}
.reacts.emo .btn{font-size:20px;min-width:46px;padding:0 10px}
@media (min-width:900px){.emopanel{max-width:640px}}
.emopanel[hidden]{display:none}
/* voice notes */
.voice{display:flex;align-items:center;gap:8px;border:0;background:transparent;color:inherit;padding:2px 0;min-height:40px;min-width:160px}
.voice .wavebar{flex:1;height:18px;background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 6px);opacity:.45;border-radius:2px;min-width:60px}
.voice.playing .wavebar{opacity:.9}
.recbar{display:none;position:fixed;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom));z-index:7;max-width:560px;margin:0 auto;padding:10px 12px;background:var(--raised);border-top:var(--rule-w) solid var(--rule);align-items:center;gap:8px}
body.recording .recbar{display:flex}
body.recording .composer{visibility:hidden}
.recdot{width:12px;height:12px;border-radius:50%;background:#C0392B;animation:pulse 1s infinite}
.photos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.photo{position:relative;aspect-ratio:1;border:var(--rule-w) dashed var(--rule);border-radius:var(--radius);background:var(--raised);display:grid;place-items:center;overflow:hidden;color:var(--soft);text-align:center;padding:0}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo img.blur{filter:blur(14px);transform:scale(1.15)}
.photo .cap{position:absolute;left:6px;bottom:6px;display:flex;gap:4px;align-items:center;background:rgba(0,0,0,.45);color:#fff;border-radius:999px;padding:2px 8px 2px 2px;font-size:13px}
.photo .veil{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(0,0,0,.25);font-size:14px;padding:10px}
/* text-style buttons (like "You: Tired · change") */
.linkish{border:0;background:transparent;color:var(--soft);font:inherit;font-size:15px;padding:4px 0;min-height:32px;text-align:left;text-decoration:underline;text-underline-offset:3px;cursor:pointer;display:block}

/* Vent 1.0 layout: a real chat screen. The shell fills exactly the visible screen below the header and above
   the tabs (or the keyboard). Messages scroll inside it; the box is its last row, so it always sits on the keyboard. */
html:has(body.chat){overflow:hidden;height:100%}
body.chat{overflow:hidden;height:100%;overscroll-behavior:none}
body.chat #view{padding:0}
.chatshell{position:fixed;left:0;right:0;z-index:4;max-width:560px;margin:0 auto;display:flex;flex-direction:column;
  top:calc(var(--vvtop,0px) + var(--hdr,62px));
  height:calc(var(--vvh,100dvh) - var(--hdr,62px) - var(--tabsh,64px) - env(safe-area-inset-bottom))}
body.typing .chatshell{height:calc(var(--vvh,100dvh) - var(--hdr,62px))}
@media (min-width:900px){.chatshell{max-width:640px}}
.chatshell .bubbles{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:8px 14px 12px;display:flex;flex-direction:column;gap:6px}
.chatshell .bubbles>:first-child{margin-top:auto}
.chattitle{margin:4px 0 8px}
body.chat .chatshell .composer,body.chat.typing .chatshell .composer{position:static;flex:none;bottom:auto;max-width:none;margin:0;padding:8px 10px;background:var(--ground)}
.chatshell .emopanel,body.typing .chatshell .emopanel{position:static;flex:none;bottom:auto;max-width:none;margin:0;height:260px;max-height:none;
  overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;
  grid-template-columns:repeat(auto-fill,minmax(44px,1fr));align-content:start}
.chatshell .emopanel button{touch-action:pan-y;width:100%;min-width:0;padding:0;line-height:44px;user-select:none;-webkit-user-select:none}
body.emo #view{padding-bottom:0}
.chatshell .recbar,body.recording .chatshell .recbar{position:static;flex:none;max-width:none;margin:0}
/* activity bell */
.bellbtn{margin-left:auto;position:relative;border:0;background:transparent;color:var(--ink);width:44px;height:44px;display:grid;place-items:center;border-radius:50%}
.bellbtn.dot::after{content:"";position:absolute;top:9px;right:10px;width:9px;height:9px;border-radius:50%;background:var(--accent);border:2px solid var(--ground)}
.bellbtn[hidden]{display:none}
.row.act{align-items:flex-start;padding:10px 0;border-bottom:var(--rule-w) solid var(--rule)}
.row.act.new .t{font-weight:600}
.ver{letter-spacing:.04em;opacity:.75;text-transform:none}
/* full emoji panel: category tabs on top, one vertical scroll area below */
.chatshell .emopanel,body.typing .chatshell .emopanel{display:flex;flex-direction:column;overflow:hidden;padding:0;height:300px}
.chatshell .emopanel[hidden]{display:none}
.emotabs{flex:none;display:flex;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;border-bottom:var(--rule-w) solid var(--rule);touch-action:pan-x}
.emotabs::-webkit-scrollbar{display:none}
.emotabs button{flex:1 0 40px;border:0;background:transparent;font-size:20px;min-height:42px;opacity:.5;border-bottom:2px solid transparent}
.emotabs button[aria-pressed=true]{opacity:1;border-bottom-color:var(--accent)}
.emogrid{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;padding:0 6px 8px;position:relative}
.emohead{font-size:13px;font-weight:500;color:var(--soft);margin:10px 4px 4px;letter-spacing:.02em}
.emoset{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr))}
.emoset button{border:0;background:transparent;font-size:28px;line-height:44px;min-height:44px;padding:0;border-radius:10px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.emoset button:active{background:var(--sunk)}
body.chat .composer textarea{overflow-y:hidden;height:46px}body.chat .composer textarea::placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rectalk{display:flex;align-items:center;gap:8px;width:100%;margin-top:12px;padding:10px 0 0;border:0;border-top:var(--rule-w) solid var(--rule);background:transparent;color:var(--soft);font:inherit;font-size:15px;text-align:left;min-height:44px}
.rectalk i{font-style:normal;color:var(--ink)}
/* keyboard guard: the box is never pushed below the screen. The emoji panel closes while typing, and the
   message list and panel shrink before the box does. */
.chatshell{overflow:hidden;height:calc(min(var(--vvh,100dvh),100dvh) - var(--hdr,62px) - var(--tabsh,64px) - env(safe-area-inset-bottom))}
body.typing .chatshell{height:calc(min(var(--vvh,100dvh),100dvh) - var(--hdr,62px))}
.chatshell .bubbles{flex:1 1 0}
.chatshell .composer{flex:0 0 auto!important}
.chatshell .emopanel{flex:0 1 300px!important;min-height:120px}
body.typing .chatshell .emopanel{display:none!important}
body.chat .composer textarea{max-height:120px}
.emopanel[hidden],.chatshell .emopanel[hidden]{display:none!important}
/* partner's time and weather */
.where{display:flex;align-items:center;gap:6px;color:var(--soft);font-size:15px;margin-top:6px;font-variant-numeric:lining-nums tabular-nums}
.where svg{flex:none}
/* to-dos */
.todo{align-items:flex-start;padding:10px 6px 10px 12px}
.todo .tick{flex:none;width:28px;height:28px;margin-top:2px;border-radius:50%;border:2px solid var(--c,var(--accent));background:transparent;color:var(--on-fill);display:grid;place-items:center;padding:0}
.todo .tick[aria-pressed=true]{background:var(--c,var(--accent))}
.todo.done .t{text-decoration:line-through;color:var(--soft)}
.todo .late{color:var(--accent);font-weight:600}
/* free times grid */
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:14px;color:var(--soft);margin:4px 0 12px}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:12px;height:12px;border-radius:50%;display:inline-block}
.legend i.both{background:var(--accent);border-radius:3px}
.freegrid{display:grid;grid-template-columns:52px repeat(4,1fr);gap:6px;align-items:center}
.freegrid .fh{text-align:center;font-size:13px;color:var(--soft)}
.freegrid .fd{font-size:15px}
.freegrid .fd.today{font-weight:600;color:var(--accent)}
.freegrid .fc{min-height:44px;border:var(--rule-w) solid var(--rule);border-radius:10px;background:var(--raised);display:flex;align-items:center;justify-content:center;gap:4px;padding:0}
.freegrid .fc[aria-pressed=true]{border-color:currentColor}
.freegrid .fc i{width:12px;height:12px;border-radius:50%}
.freegrid .fc.both{background:var(--accent);color:var(--on-fill);border-color:var(--accent)}
/* reactions on messages */
.bub{position:relative;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.mreacts{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.mr{border:var(--rule-w) solid color-mix(in srgb,currentColor 30%,transparent);background:color-mix(in srgb,var(--ground) 85%,transparent);color:var(--ink);border-radius:999px;font-size:16px;min-height:30px;padding:0 8px;display:flex;align-items:center;gap:3px}
.mr.mine{border-color:var(--accent);border-width:2px}
.mr b{font-size:13px;font-weight:600}
.reactbar{position:absolute;z-index:8;display:flex;gap:2px;padding:6px;background:var(--raised);border:var(--rule-w) solid var(--rule);border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.25);animation:pop .14s ease-out}
.reactbar button{border:0;background:transparent;font-size:26px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;padding:0;color:var(--soft)}
.reactbar button[aria-pressed=true]{background:var(--sunk)}
.reactbar button:active{transform:scale(1.25)}
@keyframes pop{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.reactbar{animation:none}}
.chatshell .bubbles{position:relative}
.freegrid{grid-template-columns:44px repeat(4,minmax(0,1fr))}
.freegrid .fh{font-size:12px;overflow-wrap:anywhere;line-height:1.2}
.todo .tick{min-width:28px;min-height:28px;max-width:28px;max-height:28px;box-sizing:border-box;box-shadow:none;outline-offset:3px}
.todo .tick::before,.todo .tick::after{display:none}
.reccode{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.reccode span{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:22px;letter-spacing:.12em;text-align:center;padding:12px 0;border:var(--rule-w) solid var(--rule);border-radius:10px;background:var(--raised);font-variant-numeric:lining-nums tabular-nums}
.input.mono{font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.06em}
.mine-line{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px}.mine-line .linkish{display:inline-block}