:root{--navy:#322f42;--navy2:#44415c;--navy3:#26243a;--gold:#e39425;--teal:#47aba9;--paper:#f4f3f8;--ink:#f5f3fb;--mute:#bdbad3}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--navy);color:var(--ink);font-family:'Rubik','Arial Hebrew',Arial,sans-serif;font-size:1.0625rem;line-height:1.6}
a{color:inherit}
:focus-visible{outline:3px solid #fff;outline-offset:4px;border-radius:.4rem}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;inset-inline-start:1rem;top:-5rem;z-index:10;background:var(--paper);color:var(--navy);font-weight:600;padding:.8rem 1.2rem;border-radius:.6rem;text-decoration:none}
.skip:focus{top:1rem}
.wrap{max-width:70rem;margin-inline:auto;padding-inline:max(16px,env(safe-area-inset-right)) }
header.site{padding-block:clamp(1.2rem,4vw,2.4rem) 0}
.mark{display:inline-flex;align-items:center;gap:.9rem;text-decoration:none;min-height:44px}
.mark img{width:4.2rem;height:auto;display:block;flex:none}
.mark b{display:block;font-weight:800;font-size:1.7rem;line-height:1;color:var(--gold)}
.mark small{display:block;font-weight:500;font-size:.9rem;color:var(--teal);margin-top:.3rem}
main{padding-block:clamp(1.8rem,5vw,3.2rem) 3rem}
h1{font-weight:900;font-size:clamp(3rem,11vw,7.5rem);line-height:1.02;margin:0 0 1rem;text-wrap:balance}
h1 span{background:var(--gold);color:var(--navy);padding-inline:.18em;border-radius:.18em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.lead{font-size:clamp(1.1rem,2.2vw,1.35rem);color:var(--mute);max-width:34rem;margin:0 0 2.2rem}
.chat{display:flex;flex-direction:column;gap:.8rem}
.msg{margin:0;max-width:min(100%,30rem);padding:.85rem 1.2rem;border-radius:1.4rem;font-size:1.1rem;line-height:1.45}
.me{align-self:flex-end;background:var(--paper);color:var(--navy);border-end-end-radius:.3rem}
.them{align-self:flex-start;background:var(--navy2);color:var(--ink);border-end-start-radius:.3rem}
.links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.9rem;align-items:flex-start}
.links li{width:min(100%,30rem)}
a.link{display:flex;align-items:center;gap:1rem;min-height:44px;border-radius:1.4rem;border-end-start-radius:.3rem;padding:1rem 1.25rem;background:var(--c);color:var(--navy);text-decoration:none;box-shadow:5px 5px 0 var(--navy3)}
a.link .tx{flex:1;min-width:0}
a.link small{display:block;font-weight:600;font-size:.85rem;letter-spacing:.04em}
a.link b{display:block;font-weight:800;font-size:1.45rem;line-height:1.25}
a.link .go{font-size:1.6rem;line-height:1}
a.link:hover{box-shadow:2px 2px 0 var(--navy3);transform:translate(3px,3px)}
footer.site{border-top:1px solid #4d4a68;padding-block:1.4rem 2rem;color:var(--mute);font-size:.95rem}
footer.site .wrap{display:flex;flex-wrap:wrap;gap:.6rem 2rem;align-items:center;justify-content:space-between}
footer.site a{display:inline-block;padding-block:.6rem;color:var(--ink);text-underline-offset:4px}
/* statement page */
.doc{max-width:46rem}
.doc h1{font-size:clamp(2.2rem,6vw,3.6rem);margin-bottom:1.2rem}
.doc h2{font-weight:800;font-size:1.5rem;color:var(--gold);margin:2.2rem 0 .6rem}
.doc p,.doc li{max-width:42rem}
.doc ul{padding-inline-start:1.4rem}
.doc a{color:var(--ink);text-underline-offset:4px}
.todo{background:var(--paper);color:var(--navy);padding:.1rem .45rem;border-radius:.3rem;font-weight:600}
.back{display:inline-block;padding-block:.6rem;margin-bottom:1rem}
@media (prefers-reduced-motion:no-preference){a.link{transition:transform .15s,box-shadow .15s}}
@media (prefers-reduced-motion:reduce){a.link:hover{transform:none}}
@media (forced-colors:active){a.link{border:2px solid LinkText}.msg{border:1px solid CanvasText}}

.typing{align-self:flex-start;display:flex;align-items:center;gap:.9rem;padding:.95rem 1.15rem;background:var(--navy2);border-radius:1.6rem;border-end-start-radius:.3rem}
.dots{display:flex;gap:.4rem}
.dots i{width:.6rem;height:.6rem;border-radius:50%;background:var(--ink);opacity:.8;animation:blink 1.2s infinite}
.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.3}30%{opacity:1}}
.still .dots i{animation:none;opacity:.8}
.flinks{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem 1.6rem}
.motion{display:inline-flex;align-items:center;gap:.5rem;font:inherit;font-size:.95rem;color:var(--ink);background:none;border:0;padding:.6rem 0;min-height:44px;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.motion svg{fill:currentColor;display:block;flex:none}
.motion .i-play{display:none}
.still .motion .i-play{display:block}
.still .motion .i-pause{display:none}
.motion:hover{color:var(--gold)}