:root{
  --bg:#F3F2EE; --surface:#FFFFFF; --surface-2:#F8F7F3; --ink:#171716; --muted:#5F605A; --faint:#8E8F88;
  --rule:#DFDDD5; --accent:#C8402A; --accent-soft:#F7E1DA; --accent-ink:#FFFFFF;
  --mark:#FFE27A; --mark-ink:#171716; --ok:#2F6B4F; --ok-soft:#DCEBE2;
  --shadow:0 1px 0 rgba(0,0,0,.03), 0 8px 24px -16px rgba(0,0,0,.18);
  --pyr1:#EDEBE4; --pyr2:#DCD8CD; --pyr3:#C8402A;
  --radius:14px;
  --f-head:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-serif:"Newsreader",Georgia,"Times New Roman",serif;
  --f-hand:"Patrick Hand","Bradley Hand","Segoe Print","Comic Sans MS",cursive;
  --f-body:"Work Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#121312; --surface:#1B1C1A; --surface-2:#171816; --ink:#ECEBE6; --muted:#A5A69F; --faint:#7C7D77;
    --rule:#2E2F2C; --accent:#E5654C; --accent-soft:#3A221D; --accent-ink:#121312;
    --mark:rgba(255,226,122,.22); --mark-ink:#ECEBE6; --ok:#7DC4A0; --ok-soft:#1E2F26;
    --shadow:0 1px 0 rgba(255,255,255,.02), 0 8px 24px -16px rgba(0,0,0,.6);
    --pyr1:#2A2B28; --pyr2:#3A3B37; --pyr3:#E5654C;
  }
}
:root[data-theme="dark"]{
  --bg:#121312; --surface:#1B1C1A; --surface-2:#171816; --ink:#ECEBE6; --muted:#A5A69F; --faint:#7C7D77;
  --rule:#2E2F2C; --accent:#E5654C; --accent-soft:#3A221D; --accent-ink:#121312;
  --mark:rgba(255,226,122,.22); --mark-ink:#ECEBE6; --ok:#7DC4A0; --ok-soft:#1E2F26;
  --shadow:0 1px 0 rgba(255,255,255,.02), 0 8px 24px -16px rgba(0,0,0,.6);
  --pyr1:#2A2B28; --pyr2:#3A3B37; --pyr3:#E5654C;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:15.5px/1.55 var(--f-body);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}
h1,h2,h3{font-family:var(--f-head);margin:0}
h1{font-weight:800;font-stretch:112%;font-size:clamp(26px,3.4vw,38px);line-height:1.05;letter-spacing:-.015em}
h2{font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
h3{font-weight:700;font-stretch:105%;font-size:18px;line-height:1.2}
p{margin:0 0 10px}
.serif{font-family:var(--f-serif)}
.hand{font-family:var(--f-hand)}
.muted{color:var(--muted)}
.small{font-size:13.5px}
.tiny{font-size:12px}

/* layout */
.app{display:grid;grid-template-columns:252px 1fr;min-height:100vh}
.side{position:sticky;top:0;height:100vh;border-right:1px solid var(--rule);background:var(--surface-2);display:flex;flex-direction:column;padding:22px 14px 16px}
.brand{padding:0 10px 18px}
.brand .os{font:700 11px var(--f-head);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.brand .os s{text-decoration-color:var(--accent);text-decoration-thickness:2px}
.brand .name{font:850 22px/1 var(--f-head);font-stretch:118%;letter-spacing:-.01em;margin-top:6px}
nav{display:flex;flex-direction:column;gap:2px;margin-top:6px}
nav .sep{font:700 10.5px var(--f-head);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:16px 10px 6px}
nav a{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:10px;text-decoration:none;color:var(--muted);font-weight:500}
nav a svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
nav a:hover{background:var(--surface);color:var(--ink)}
nav a.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
nav a.feat .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);margin-left:auto}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding:10px 6px 0;border-top:1px solid var(--rule)}
.who{display:flex;align-items:center;gap:10px;padding:6px 4px}
.who .av{width:30px;height:30px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font:700 13px var(--f-head)}
.switch{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;color:var(--muted);padding:4px}
.tg{width:36px;height:20px;border-radius:20px;border:1px solid var(--rule);background:var(--surface);position:relative;flex:none;padding:0}
.tg::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--faint);transition:.2s}
.tg[aria-pressed="true"]{background:var(--ink);border-color:var(--ink)}
.tg[aria-pressed="true"]::after{left:18px;background:var(--bg)}

.topbar{display:none}
main{min-width:0}
.screen{display:none;max-width:1040px;margin:0 auto;padding:36px 40px 80px}
.screen.on{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:26px}
.head .sub{color:var(--muted);max-width:620px;margin-top:8px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:1.35fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);position:relative}
.card.flat{box-shadow:none}
.kicker{font:700 11px var(--f-head);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.kicker .red{color:var(--accent)}
.stack>*+*{margin-top:16px}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.btn{border:1px solid var(--ink);background:var(--ink);color:var(--bg);padding:9px 15px;border-radius:999px;font-weight:600;font-size:14px}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn.ghost:hover{border-color:var(--ink)}
.btn.red{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.sm{padding:5px 11px;font-size:12.5px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--rule);border-radius:999px;padding:3px 10px;font-size:12.5px;color:var(--muted);background:var(--surface)}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip.done{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.chip.not{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.chip.dk{background:var(--surface-2)}
q,.quote{font-family:var(--f-serif);font-size:1.08em}
q{quotes:"\201C" "\201D"}
.voice{font-family:var(--f-serif);font-size:19px;line-height:1.5}
.voice em{font-style:normal;background:linear-gradient(transparent 58%,var(--mark) 58%);color:var(--mark-ink)}
hr{border:0;border-top:1px solid var(--rule);margin:18px 0}

.later{display:inline-block;font:700 10px var(--f-head);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border:1px dashed var(--rule);padding:2px 7px;border-radius:6px}

/* home */
.hello{font-family:var(--f-serif);font-size:17px;color:var(--muted);margin-bottom:6px}
.brief .sig{margin-top:12px;font-size:13px;color:var(--muted)}
.tn-hero{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tn-hero .kicker{color:rgba(255,255,255,.6)}
:root[data-theme="dark"] .tn-hero .kicker{color:rgba(0,0,0,.55)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tn-hero .kicker{color:rgba(0,0,0,.55)}}
.tn-hero .pair{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:start;margin:8px 0 16px}
.tn-hero .lab{font:700 11px var(--f-head);letter-spacing:.14em;text-transform:uppercase;opacity:.65;margin-bottom:6px}
.tn-hero .then .q{font-family:var(--f-serif);font-size:21px;line-height:1.3;text-decoration:line-through;text-decoration-color:var(--accent);text-decoration-thickness:2px;opacity:.8}
.tn-hero .now .q{font-family:var(--f-serif);font-size:21px;line-height:1.3}
.tn-hero .arrow{font:28px/1 var(--f-hand);color:var(--accent);padding-top:22px}
.tn-hero .between{font-size:13.5px;opacity:.75;border-top:1px solid rgba(127,127,127,.35);padding-top:12px}
.tn-hero .ask{font:22px/1.2 var(--f-hand);color:var(--accent);margin:12px 0 14px}
/* the card is ink on the page colour: a half-height highlight would leave dark text on the dark card, so the yellow is a full box with dark text */
.tn-hero mark{background:var(--mark);color:#171716;padding:0 .18em;border-radius:3px}
.tn-hero .btn{background:var(--bg);color:var(--ink);border-color:var(--bg)}
.moment{border-left:3px solid var(--accent)}
.moment .from{font-size:12.5px;color:var(--muted)}
.next{display:flex;gap:14px;align-items:flex-start}
.next .cal{flex:none;width:52px;border:1px solid var(--rule);border-radius:10px;text-align:center;overflow:hidden}
.next .cal b{display:block;background:var(--accent);color:var(--accent-ink);font:700 10px/1 var(--f-head);letter-spacing:.12em;padding:5px 0}
.next .cal span{display:block;font:800 22px/1.4 var(--f-head)}

/* coach */
.lengths{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.len{text-align:left;border:1px solid var(--rule);background:var(--surface);border-radius:var(--radius);padding:16px}
.len:hover{border-color:var(--ink)}
.len.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.len .t{font:800 20px var(--f-head);font-stretch:110%}
.len .d{font-size:13px;color:var(--muted)}
.len .how{font-size:13.5px;margin-top:8px}
.roads{display:grid;gap:8px;margin-top:6px}
.road{display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:left;border:1px solid var(--rule);background:var(--surface);border-radius:12px;padding:13px 15px}
.road:hover{border-color:var(--ink)}
.road .why{font-size:12.5px;color:var(--muted)}
.chat{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.msg{max-width:78%}
.msg.c{align-self:flex-start}
.msg.u{align-self:flex-end}
.msg .b{padding:12px 15px;border-radius:16px}
.msg.c .b{background:var(--surface);border:1px solid var(--rule);font-family:var(--f-serif);font-size:17px;line-height:1.5}
.msg.u .b{background:var(--ink);color:var(--bg)}
.msg.c .b em{font-style:normal;background:linear-gradient(transparent 60%,var(--mark) 60%);color:var(--mark-ink)}
.msg .who{font-size:11.5px;color:var(--muted);margin:0 4px 4px;padding:0;display:block}
.msg .opts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.hyp{background:var(--surface-2);border:1px dashed var(--faint);border-radius:10px;padding:10px 12px;margin-top:8px;color:var(--muted)}
.composer{position:sticky;bottom:0;background:linear-gradient(transparent,var(--bg) 30%);padding-top:20px;margin-top:18px}
.composer .box{display:flex;gap:8px;align-items:center;background:var(--surface);border:1px solid var(--rule);border-radius:999px;padding:6px 6px 6px 16px}
.composer input{flex:1;border:0;background:transparent;color:var(--ink);font:inherit;outline:none;min-width:0}
.mic{width:38px;height:38px;border-radius:50%;border:1px solid var(--rule);background:var(--surface-2);display:grid;place-items:center;flex:none}
.mic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
.keep{border:1px solid var(--ink);border-radius:var(--radius);padding:18px;background:var(--surface)}
.keep .line{font:26px/1.2 var(--f-hand);margin:6px 0 10px}

/* then and now */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.tn{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface);overflow:hidden;box-shadow:var(--shadow)}
.tn+.tn{margin-top:14px}
.tn .side-t,.tn .side-n{padding:18px 20px}
.tn .side-t{background:var(--surface-2);border-right:1px solid var(--rule)}
.tn .lab{font:700 11px var(--f-head);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;gap:8px}
.tn .q{font-family:var(--f-serif);font-size:20px;line-height:1.35;margin-top:8px}
.tn .side-t .q{color:var(--muted)}
.tn .side-n .q mark{background:linear-gradient(transparent 55%,var(--mark) 55%);color:var(--mark-ink)}
.tn .still{display:inline-block;font:20px var(--f-hand);color:var(--accent);margin-top:8px}
.tn .mid{grid-column:1/-1;border-top:1px solid var(--rule);padding:12px 20px;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between}
.tn .gest{font-size:13.5px;color:var(--muted)}
.tn .gest b{color:var(--ink);font-weight:600}
.tn .ask{font:20px var(--f-hand);color:var(--accent)}
.tn .type{font:700 10px var(--f-head);letter-spacing:.12em;text-transform:uppercase;padding:2px 7px;border-radius:5px;background:var(--accent-soft);color:var(--accent)}

.thr+.thr{margin-top:22px}
.thr-h{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.thr-h .kicker{margin-bottom:4px}
.st{font:700 11px var(--f-head);letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:999px;white-space:nowrap}
.st.crossed{background:var(--ok-soft);color:var(--ok)}
.st.circling{background:var(--accent-soft);color:var(--accent)}
.st.open{border:1px dashed var(--faint);color:var(--muted)}
.span2{grid-column:span 2}


.lockbar{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--muted);padding:6px 4px;border:1px dashed var(--rule);border-radius:10px}
.lockbar b{color:var(--ink);font-weight:600}
.ask-cross{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px}
/* script */
.sline{display:flex;gap:14px;justify-content:space-between;align-items:flex-start;padding:14px 0;border-top:1px solid var(--rule)}
.sline:first-of-type{border-top:0}
.sline .txt{font-family:var(--f-serif);font-size:18px;line-height:1.4}
.sline .meta{font-size:12px;color:var(--muted);margin-top:4px}
.sline .acts{display:flex;gap:6px;flex:none}
.sline.hyp-l .txt{color:var(--muted)}
.sline.hyp-l .meta::before{content:"hypothesis · ";}
.sline .old{display:block;font-size:15px;color:var(--muted);text-decoration:line-through;text-decoration-color:var(--accent);text-decoration-thickness:2px;margin-bottom:2px}
.sline .new{display:block;font-family:var(--f-hand);font-size:22px;color:var(--accent);line-height:1.2}
.edit{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.edit input{flex:1;min-width:200px;border:1px solid var(--rule);border-radius:10px;padding:8px 10px;background:var(--surface-2);color:var(--ink);font:16px var(--f-serif)}
.pyr{display:grid;grid-template-columns:200px 1fr;gap:18px;align-items:center}
.pyr svg{width:100%;height:auto}
.pyr .lv{padding:8px 0;border-top:1px solid var(--rule)}
.pyr .lv:first-child{border-top:0}
.pyr .lv b{font:700 11px var(--f-head);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:block}
.pyr .lv .quote{font-size:17px}
.pyr .lv.unc .quote{color:var(--muted)}
.keepgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.kept{border:1px solid var(--rule);border-radius:12px;padding:14px;background:var(--surface)}
.kept .ver{font-size:12px;color:var(--muted)}
.totem{font:22px/1.2 var(--f-hand);margin:6px 0}

/* journal */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--rule);margin-bottom:18px;overflow-x:auto}
.tabs button{border:0;background:none;padding:10px 12px;color:var(--muted);font-weight:500;border-bottom:2px solid transparent;white-space:nowrap}
.tabs button.on{color:var(--ink);border-bottom-color:var(--ink)}
.entry{padding:18px 0;border-top:1px solid var(--rule);display:grid;grid-template-columns:92px 1fr;gap:16px}
.entry:first-child{border-top:0}
.entry .date{font:700 12px var(--f-head);letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.entry .src{font-size:11.5px;color:var(--muted);margin-top:4px}
.entry h3{margin-bottom:8px}
.entry .said{border-left:2px solid var(--rule);padding-left:12px;margin:8px 0}
.entry .chose{font-size:14px;margin:6px 0}
.entry .qq{font:20px var(--f-hand);color:var(--accent);margin-top:8px}
.entry.locked .body{filter:blur(5px);user-select:none;pointer-events:none}
.entry.mine h3::after{content:"written by you";font:600 10.5px var(--f-body);margin-left:8px;color:var(--ok);background:var(--ok-soft);padding:2px 7px;border-radius:999px;vertical-align:middle}
.prom{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--rule)}
.prom:first-child{border-top:0}

/* rituals */
.rit{display:flex;flex-direction:column;gap:8px}
.rit .top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.rit .dur{font:700 11px var(--f-head);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);text-align:right;max-width:55%}
.rit .when{font-size:13.5px;color:var(--muted)}
.rit .by{font-size:12px;color:var(--muted);margin-top:auto}
.wave{display:flex;gap:3px;align-items:center;height:28px}
.wave i{display:block;width:3px;border-radius:2px;background:var(--rule)}
.wave.play i{background:var(--accent)}
.kit{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.kit div{border:1px dashed var(--rule);border-radius:10px;padding:10px;font-size:13px}
.kit b{display:block;font:22px/1 var(--f-hand);color:var(--accent);margin-bottom:4px}
.gift{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gift label{font-size:12.5px;color:var(--muted);display:block;margin-bottom:4px}
.gift select,.gift input{width:100%;border:1px solid var(--rule);border-radius:10px;padding:9px 10px;background:var(--surface-2);color:var(--ink);font:inherit}

/* scenes */
.scene .role{font-size:13px;color:var(--muted)}
.scene .last{font-size:13.5px;border-top:1px solid var(--rule);margin-top:10px;padding-top:10px}
.scene.parked{background:transparent;border-style:dashed;box-shadow:none}

/* settings */
.set{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;border-top:1px solid var(--rule)}
.set:first-child{border-top:0}
.set .by{font-size:12px;color:var(--muted)}

/* phone preview */
.phone{width:300px;max-width:100%;margin:0 auto;border:10px solid var(--ink);border-radius:40px;background:var(--bg);padding:18px 14px 22px;box-shadow:var(--shadow)}
.phone .notch{width:90px;height:18px;border-radius:0 0 12px 12px;background:var(--ink);margin:-18px auto 14px}
.phone .widget{background:var(--surface);border:1px solid var(--rule);border-radius:18px;padding:14px;margin-bottom:12px}
.phone .big{display:block;width:100%;text-align:left;border-radius:18px;padding:16px;margin-top:10px;border:1px solid var(--rule);background:var(--surface)}
.phone .big b{display:block;font:800 19px var(--f-head);font-stretch:108%}
.phone .big span{font-size:12.5px;color:var(--muted)}
.phone .big.sn{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.phone .big.sn span{color:inherit;opacity:.85}
.notif{background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:10px 12px;font-size:13px;margin-bottom:12px}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:999px;font-size:14px;opacity:0;transition:.25s;z-index:50;pointer-events:none;max-width:calc(100% - 32px);text-align:center}
.toast.on{opacity:1;transform:translateX(-50%)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;padding:16px;z-index:60}
.modal.on{display:flex}
.modal .card{max-width:440px;width:100%}
.modal input{width:100%;border:1px solid var(--rule);border-radius:10px;padding:9px 10px;background:var(--surface-2);color:var(--ink);font:inherit;margin:8px 0 12px}
.hidden{display:none!important}

/* responsive */
@media (max-width:980px){
  .g2,.g3{grid-template-columns:1fr}
  .span2{grid-column:auto}
  .keepgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;inset:0 auto 0 0;width:280px;max-width:86vw;z-index:40;transform:translateX(-102%);transition:transform .25s ease;box-shadow:0 0 40px rgba(0,0,0,.25)}
  body.drawer .side{transform:none}
  .scrim{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:39;display:none}
  body.drawer .scrim{display:block}
  .topbar{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:1px solid var(--rule);padding:10px 16px}
  .topbar .name{font:850 18px var(--f-head);font-stretch:115%}
  .topbar button{border:1px solid var(--rule);background:var(--surface);border-radius:10px;padding:7px 11px;font-size:13px}
  .screen{padding:22px 16px 70px}
  .lengths{grid-template-columns:1fr}
  .msg{max-width:92%}
  .tn{grid-template-columns:1fr}
  .tn .side-t{border-right:0;border-bottom:1px solid var(--rule)}
  .tn-hero .pair{grid-template-columns:1fr}
  .tn-hero .arrow{padding:0;transform:rotate(90deg);width:28px}
  .pyr{grid-template-columns:1fr}
  .pyr svg{max-width:200px}
  .entry{grid-template-columns:1fr;gap:6px}
  .kit,.gift{grid-template-columns:1fr}
  .keepgrid{grid-template-columns:1fr}
  .sline{flex-direction:column;gap:8px}
  .voice{font-size:17.5px}
}
/* ---- additions for the CSP-strict build (no inline styles anywhere) ---- */
html{-webkit-text-size-adjust:100%}
body{overflow-wrap:anywhere}
main,.screen,.card,.head,.grid>*{min-width:0}
.mt6{margin-top:6px}.mt8{margin-top:8px}.mt10{margin-top:10px}.mt12{margin-top:12px}.mt14{margin-top:14px}.mt16{margin-top:16px}.mt18{margin-top:18px}.mt22{margin-top:22px}.mt26{margin-top:26px}
.mb0{margin:0}.mb12{margin-bottom:12px}
.between-row{justify-content:space-between}
.p.masked{border-bottom:1px dotted var(--faint)}
.hand-title{font-size:24px;margin:-2px 0 6px}
.ask-cross{margin-bottom:14px}
.ask-cross.tight{margin-bottom:0;margin-top:10px}
.sline-wide{flex:1;min-width:0}
.sline .txt .old{display:block}
.who-name{font-weight:600;font-size:14px}
.brand-s{text-decoration:line-through;text-decoration-color:var(--accent);text-decoration-thickness:2px}
nav a.on{font-weight:600}
.len[disabled]{opacity:.55;cursor:default}
.len[disabled]:hover{border-color:var(--rule)}
.wave i:nth-child(6n+1){height:8px}.wave i:nth-child(6n+2){height:18px}.wave i:nth-child(6n+3){height:26px}.wave i:nth-child(6n+4){height:14px}.wave i:nth-child(6n+5){height:22px}.wave i:nth-child(6n){height:10px}
.pyr .shape-1{fill:var(--pyr1);stroke:var(--ink);stroke-width:1.5}
.pyr .shape-2{fill:var(--pyr2);stroke:var(--ink);stroke-width:1.5}
.pyr .shape-3{fill:var(--pyr3);stroke:var(--ink);stroke-width:1.5}
.pyr .shape-3.unc{fill:none;stroke:var(--faint);stroke-dasharray:5 4}
.pyr text{font:700 15px var(--f-head);fill:var(--ink);text-anchor:middle}
.pyr text.on-red{fill:#fff}.pyr text.faint{fill:var(--faint)}
.pyr .wavy{fill:none;stroke:var(--muted);stroke-width:1.2}
.entry.locked .body{filter:none}
.fieldlabel{display:block;font-size:12.5px;color:var(--muted);margin-bottom:4px}
.field{width:100%;border:1px solid var(--rule);border-radius:10px;padding:9px 10px;background:var(--surface-2);color:var(--ink);font:inherit;margin-bottom:12px}
.field:focus,.composer input:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.standalone{max-width:520px;margin:0 auto;padding:72px 20px}
.steps{display:flex;gap:6px;margin:0 0 18px}
.steps i{display:block;height:4px;flex:1;border-radius:2px;background:var(--rule)}
.steps i.on{background:var(--ink)}
.days{display:grid;grid-template-columns:repeat(14,1fr);gap:4px;margin:12px 0 6px}
.days i{display:block;aspect-ratio:1;border-radius:4px;border:1px solid var(--rule)}
.days i.done{background:var(--ok);border-color:var(--ok)}
.days i.today{border-color:var(--accent);border-width:2px}
.keepgrid .kept{min-width:0}
.phone-wrap{padding:6px 0}
.big{font:inherit;color:inherit;text-decoration:none;cursor:pointer}
a.big{display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.msg .b{white-space:pre-wrap}
.toast{max-width:90vw;text-align:center}
@media (max-width:860px){
  .days{grid-template-columns:repeat(7,1fr)}
  .head h1{overflow-wrap:anywhere}
  .composer .box .btn{flex:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

body.bare .side,body.bare .topbar,body.bare .scrim{display:none!important}
body.bare .app{display:block}
.topbar-actions{gap:6px}
mark{background:linear-gradient(transparent 55%,var(--mark) 55%);color:inherit}
.lockbar .btn{flex:none;white-space:nowrap}
.btn{white-space:nowrap}
@media (max-width:860px){
  .side{box-shadow:none}
  body.drawer .side{box-shadow:0 0 40px rgba(0,0,0,.25)}
  body:not(.drawer) .side{visibility:hidden}
}

.disclaimer{margin:8px 0 0;line-height:1.4}
.page-disc{padding:0 40px 28px;max-width:1040px;margin:0 auto}
.composer .disclaimer{text-align:center;padding:6px 0 2px}
.side-foot .disclaimer{padding:0 4px}
.locked-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border:1px dashed var(--faint);border-radius:10px;background:var(--surface-2)}
.thr.locked .locked-row{margin-top:6px}
.road.locked-row{width:100%}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14.5px}
.check input{margin-top:4px;flex:none}
.mic.rec{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.crisis{border:2px solid var(--accent)}
.res{margin:10px 0 0;padding-left:20px}
.res li{margin:6px 0}
.linkbtn{background:none;border:0;padding:0;text-decoration:underline;color:var(--muted)}
.standalone a{color:var(--ink)}
.field::placeholder{color:var(--muted)}
@media (max-width:860px){.page-disc{padding:0 16px 80px}}
body.bare .page-disc{display:none}

/* Soc: a fixed text (written by the code, never by the model) and a safety stop look different from a normal reply */
.msg.fixed .b{border:2px dashed var(--ink);background:var(--surface-2);font-family:var(--f-body);font-size:15px}
.msg.stop .b{border:2px solid var(--accent);background:var(--surface)}
.msg.locked .b{border:1px dashed var(--faint);background:var(--surface-2);font-size:14px;color:var(--muted)}