/* Palyt Notes pages (N18). The look of the approved wireframes v4 (vault reports/2026-11/05-palyt-notes-wireframe): warm paper, navy ink, tomato poster, stamp, torn edge, pixel corners.
   Colours are the palyt-theme tokens. Faces are Palyt's own: Satoshi for text, Gambetta for the big titles (self-hosted, served by /static/fonts). No inline style anywhere: the CSP allows only this file. */
@font-face{font-family:"Satoshi";src:url("/static/fonts/Satoshi-Variable.woff2") format("woff2");font-weight:300 900;font-display:optional}
@font-face{font-family:"Gambetta";src:url("/static/fonts/Gambetta-Variable.woff2") format("woff2");font-weight:300 800;font-display:block}
:root{
  --paper:#f5f2ea;--ink:#1b2236;--mute:#5d6577;--card:#fffdf8;--line:#d7d1c1;--soft:#ece7da;
  --teal:#1f9a8f;--teal-d:#126f67;--tom:#d9573f;--tom-d:#9a3a22;--tom-hover:#c04a33;--amber:#f2b84b;--amber-ink:#7a5a07;
  --lav:#ece9fb;--lav-d:#4b3bbd;--mint:#e4f4f1;--peach:#fbebe4;--lemon:#fbf1d6;--on:#fffdf8;--dot:rgba(27,34,54,.1);
  --pix:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px));
  --torn:polygon(0 0,100% 0,100% 40%,96% 100%,90% 50%,84% 90%,77% 40%,70% 100%,62% 45%,55% 90%,47% 50%,40% 100%,33% 40%,26% 90%,19% 45%,12% 100%,6% 50%,0 80%);
  --text:"Satoshi",system-ui,-apple-system,"Segoe UI",sans-serif;--disp:"Gambetta",Georgia,"Times New Roman",serif;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:500 16px/1.5 var(--text);overflow-x:clip}
a{color:var(--teal-d);text-underline-offset:3px}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
[hidden]{display:none!important}
button:focus-visible,.btn:focus-visible{outline:0;box-shadow:inset 0 0 0 3px var(--teal),inset 0 0 0 5px var(--on)}
h1,h2{margin:0;text-wrap:balance}
h1{font:700 clamp(28px,7vw,40px)/1.1 var(--disp);margin:var(--s5) 0 var(--s4)}
h2{font:800 14px/1.3 var(--text);letter-spacing:.02em;margin:var(--s6) 0 var(--s2);color:var(--mute);text-transform:uppercase}
p{margin:0 0 var(--s3)}
ul{list-style:none;padding:0;margin:0}
.hint,.small{font-size:13px;line-height:1.4;color:var(--mute)}
.hint{margin-top:var(--s2)}
main{max-width:40rem;margin:0 auto;padding:var(--s2) var(--s4) 7rem}

/* ---- top bar, more menu, bottom bar ---- */
.top{position:sticky;top:0;z-index:5;background:var(--paper);border-bottom:1px solid var(--line)}
.top .in{max-width:64rem;margin:0 auto;padding:var(--s3) var(--s4);display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
.top .logo{display:flex;align-items:center}.top .logo img{height:22px;width:auto;display:block}
.links{display:none;gap:var(--s1);align-items:center}
.links a{padding:var(--s2) var(--s3);color:var(--ink);font-weight:700;text-decoration:none;border-bottom:3px solid transparent}
.links a:hover{border-bottom-color:var(--line)}.links a[aria-current=page]{border-bottom-color:var(--ink)}
.who{display:none;align-items:center;gap:var(--s3);font-size:14px}
.me{position:relative}
.me summary{list-style:none;width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--on);display:grid;place-items:center;font-weight:800;cursor:pointer;text-transform:uppercase}
.me summary::-webkit-details-marker{display:none}
.menu{position:absolute;right:0;top:calc(100% + var(--s2));width:15rem;background:var(--card);border:1px solid var(--ink);padding:var(--s2);display:flex;flex-direction:column;gap:var(--s1);box-shadow:4px 4px 0 var(--ink)}
.menu .who-name{padding:var(--s2) var(--s3);font-weight:800;border-bottom:1px solid var(--line);margin-bottom:var(--s1)}
.menu a{padding:var(--s3);color:var(--ink);font-weight:700;text-decoration:none;min-height:44px;display:flex;align-items:center}
.menu a:hover{background:var(--soft)}
.signout{margin:0}.signout button{margin:0;min-height:44px;background:transparent;color:var(--mute);border:0;font-weight:700;text-decoration:underline;text-underline-offset:3px;padding:var(--s2) var(--s3);cursor:pointer;clip-path:none;width:100%;text-align:left}
.signout button:hover{color:var(--tom-d)}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;gap:var(--s2);padding:var(--s2) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--line)}
.tabs a{flex:1;min-height:48px;display:grid;place-items:center;font-weight:600;text-decoration:none;color:var(--mute);border-bottom:3px solid transparent}
.tabs a[aria-current=page]{border-bottom-color:var(--tom-d);color:var(--ink);font-weight:800}
@media(min-width:880px){
  main{max-width:46rem;padding-bottom:var(--s7)}
  .tabs,.me{display:none}.links,.who{display:flex}
  .top .in{padding:var(--s3) var(--s5)}
}

/* ---- forms ---- */
label,legend{display:block;font-weight:700;font-size:14px;margin:var(--s5) 0 var(--s2);padding:0}
.sr{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
fieldset{border:0;margin:0;padding:0;min-width:0}
input,select,textarea{width:100%;min-height:48px;padding:var(--s3);border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font:inherit;transition:border-color .15s}
input:hover,select:hover,textarea:hover{border-color:var(--mute)}
input:disabled,select:disabled,textarea:disabled{background:var(--soft);color:var(--mute);cursor:not-allowed}
input:user-invalid,select:user-invalid,textarea:user-invalid{border-color:var(--tom)}
.drop{display:grid;place-items:center;gap:var(--s1);min-height:104px;padding:var(--s4);border:1.5px dashed var(--mute);border-radius:10px;background:#fff;text-align:center;cursor:pointer;font-weight:700;margin:0}
.drop svg{width:28px;height:28px;color:var(--tom-d)}.drop .dn{font-weight:500;font-size:13px;color:var(--mute);overflow-wrap:anywhere}
.drop:hover{border-color:var(--ink)}input[type=file]:focus-visible+.drop{outline:3px solid var(--teal);outline-offset:2px}.drop.has{border-style:solid;border-color:var(--teal);background:var(--mint)}
input::placeholder{color:#8a8f9e}
input:focus,select:focus,textarea:focus{outline:3px solid var(--teal);outline-offset:0;border-color:var(--teal)}
textarea{font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;min-height:12rem;resize:vertical}
button,.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;margin-top:var(--s4);padding:var(--s2) var(--s5);border:0;border-radius:10px;background:var(--ink);color:var(--on);font:800 16px/1.2 var(--text);cursor:pointer;text-decoration:none}
button:hover,.btn:hover{background:#2d3654;color:var(--on)}
button.go,.btn.go{background:var(--tom-d);border-radius:0;clip-path:var(--pix)}button.go:hover,.btn.go:hover{background:var(--tom)}
button.wide{width:100%}
button.quiet,.btn.quiet{background:var(--soft);color:var(--ink)}button.quiet:hover,.btn.quiet:hover{background:var(--line)}
button.danger{background:var(--peach);color:var(--tom-d);box-shadow:inset 0 0 0 1px var(--tom)}button.danger:hover{background:var(--tom);color:var(--on)}button.danger:focus-visible{box-shadow:inset 0 0 0 3px var(--teal),inset 0 0 0 5px var(--on)}
button[disabled],button[disabled]:hover{background:var(--line);color:var(--mute);cursor:not-allowed}
.signout{display:inline}
.pane{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:var(--s5) var(--s4);margin:var(--s4) 0}
.pane>:first-child{margin-top:0}.pane>:last-child{margin-bottom:0}
.pane button{margin-top:var(--s3)}

/* choices: the radios and the tick box, drawn, not the browser's */
.seg{display:flex;border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden}
.seg label{flex:1;margin:0;position:relative;font-weight:600;color:var(--mute)}
.seg input{position:absolute;opacity:0;inset:0;width:100%;height:100%;min-height:0;margin:0;cursor:pointer}
.seg span{display:grid;place-items:center;text-align:center;min-height:48px;padding:var(--s2) var(--s3);line-height:1.2}
.seg label+label span{border-left:1px solid var(--line)}
.seg input:checked+span{background:var(--mint);color:var(--ink);font-weight:800;box-shadow:inset 0 -3px 0 var(--teal)}
.seg input:focus-visible+span{outline:3px solid var(--teal);outline-offset:-3px}
label.consent{display:flex;gap:var(--s3);align-items:flex-start;font-weight:500;font-size:14px;line-height:1.45;color:#4a5164;padding:var(--s4);border-radius:10px;background:var(--soft);margin:var(--s5) 0 0;position:relative;cursor:pointer}
label.consent input{position:absolute;opacity:0;width:24px;height:24px;min-height:0;left:var(--s4);top:var(--s4);margin:0}
label.consent .tick{flex:none;width:24px;height:24px;border:2px solid var(--mute);border-radius:6px;background:#fff;display:grid;place-items:center;font-weight:900;line-height:1;color:var(--on)}
label.consent input:checked+.tick{background:var(--teal-d);border-color:var(--teal-d)}
label.consent input:checked+.tick::after{content:"\2713"}
label.consent input:focus-visible+.tick{outline:3px solid var(--teal);outline-offset:2px}
.linkish{display:block;margin:var(--s4) 0 0;text-align:center;font-weight:600;font-size:14px;color:var(--mute);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:var(--s3) 0}
.linkish:hover{color:var(--ink)}
.plain{margin:0}
#rec-now{margin-top:var(--s5)}

/* ---- messages: the role says how loud ---- */
.msg{border:1px solid var(--amber);background:var(--lemon);padding:var(--s3);margin:var(--s4) 0;border-radius:10px}
.msg[role=alert]{border-color:var(--tom);background:var(--peach)}
.msg[role=status]{border-color:var(--teal);background:var(--mint)}
.msg button{margin-top:var(--s2);min-height:44px}
.empty{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:var(--s5);margin:var(--s4) 0}
.empty b{display:block;font-size:18px;margin-bottom:var(--s1)}.empty p{color:var(--mute)}

/* ---- chips ---- */
.chip{display:inline-block;font-size:12px;line-height:18px;font-weight:700;padding:0 var(--s2);border-radius:4px;border:1px solid var(--line);white-space:nowrap;color:var(--mute)}
.chip.ok{color:var(--teal-d);border-color:var(--teal);background:var(--mint)}.chip.wait{color:var(--amber-ink);border-color:var(--amber);background:var(--lemon)}
.chip.ai{background:var(--lav);color:var(--lav-d);border-color:#6a58e0}.chip.live{background:var(--peach);color:var(--tom-d);border-color:var(--tom)}

/* ---- library ---- */
.items{margin-top:var(--s4)}
.items li{border-bottom:1px solid var(--line)}
.item{display:block;padding:var(--s4) var(--s1);color:var(--ink);text-decoration:none;min-height:64px}
a.item:hover{background:var(--soft)}
.item .t{display:block;font-weight:800;font-size:17px;line-height:1.3;overflow-wrap:anywhere}
.item .sub{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-top:var(--s2);font-size:13px;line-height:1.4;font-weight:500;color:var(--mute)}
.item.locked{color:var(--mute)}.item.locked .t{font-weight:700}
.nb{white-space:nowrap}

/* ---- sign in: the tomato poster ---- */
body.signin main{max-width:30rem;padding:0 var(--s4) var(--s6)}
.brand{padding:var(--s5) 0 var(--s4)}.brand img{height:26px;width:auto;display:block}
.poster{background:var(--tom-d);color:var(--on);margin:0 calc(var(--s4) * -1);padding:var(--s5) var(--s4) var(--s5);position:relative}
.poster h1{color:var(--on);font-size:clamp(36px,11vw,52px);line-height:1.05;margin:var(--s3) 0}
.stamp{display:inline-block;transform:rotate(-3deg);background:var(--lemon);color:var(--ink);border:2px solid var(--ink);padding:0 var(--s2);font:800 16px/24px var(--disp);letter-spacing:.04em;text-transform:uppercase}
.dots3{display:flex;gap:var(--s2);margin-top:var(--s4)}.dots3 i{display:block;width:44px;height:12px;background:var(--mint);border:1px solid var(--ink)}
.dots3 i:nth-child(2){background:var(--lemon)}.dots3 i:nth-child(3){background:var(--lav)}
.torn{height:12px;background:var(--tom-d);clip-path:var(--torn);margin:0 calc(var(--s4) * -1)}
body.signin .go.wide{margin-top:var(--s5)}
@media(min-width:880px){body.signin main{padding-top:var(--s6)}.poster{margin:0}.torn{margin:0}}

/* ---- record ---- */
.big{font:700 clamp(44px,14vw,72px)/1 var(--disp);margin:var(--s4) 0;font-variant-numeric:tabular-nums}
#rec-live .big::before{content:"";display:inline-block;width:.22em;height:.22em;margin-right:.25em;border-radius:50%;background:var(--tom);vertical-align:.12em;animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){#rec-live .big::before{animation:none}}
progress{width:100%;height:12px;accent-color:var(--teal)}
.mt0{margin-top:0}
.actions{display:flex;gap:var(--s3);flex-wrap:wrap}.actions button,.actions .btn{margin-top:var(--s3)}

/* ---- one recording ---- */
h1.title{margin:var(--s5) 0 var(--s2);text-wrap:balance;overflow-wrap:break-word}
.share{margin-top:var(--s4)}
.meta{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;font-size:14px;color:var(--mute);margin-bottom:var(--s3)}
.notes h2:first-child{margin-top:var(--s4)}
.notes ul{list-style:disc;padding-left:var(--s5)}.notes li{margin:var(--s2) 0}
audio{width:100%;height:54px}
audio{contain:layout paint}
.hint a,#rec-file a{display:inline-block;padding:var(--s3) 0}
.flow{border:1px solid var(--line);border-radius:10px;background:var(--card);max-height:26rem;overflow:auto;padding:0 var(--s4)}
.flow .tr{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.flow .tr:last-child{border-bottom:0}
.flow .sp{font-weight:800;font-size:14px}.flow .tx{white-space:pre-wrap;overflow-wrap:anywhere}
.flow .tr.cont{grid-template-columns:minmax(0,1fr)}
.flow .tr.more .sp,.spk-on .flow .tr.more button.spk{color:var(--mute);font-weight:600}
.flow .tr.more .sp{overflow-wrap:anywhere}.spk-on .flow .tr.more button.spk:hover{color:var(--ink)}
details>summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:800}
.done{margin:var(--s3) 0}.done li{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;border-bottom:1px solid var(--line);padding:var(--s2) 0}
.done button{margin:0;min-height:44px;padding:0 var(--s3);font-size:14px}
.sendbar{display:flex;gap:var(--s2);flex-wrap:wrap}
.back{margin-top:var(--s6)}
.cards li{border:1px solid var(--line);background:var(--card);border-radius:12px;padding:var(--s4);margin:var(--s3) 0}
.cards li button{margin-top:var(--s3)}

/* ---- icons (icons.py) ---- */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ic.xl{width:44px;height:44px;margin-bottom:var(--s2);color:var(--ink)}
.tabs a{gap:2px;align-content:center;font-size:12px;min-height:56px}.tabs a .ic{justify-self:center}
.btn .ic,button .ic{margin-right:var(--s2);width:20px;height:20px}
.chip .ic{width:12px;height:12px;margin-right:3px;vertical-align:-2px}

/* ---- motion: opacity and small transforms after load; layoutcheck sees no jump ---- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .16s ease both}::view-transition-new(root){animation:vt-in .26s ease both}
@keyframes vt-out{to{opacity:0}}@keyframes vt-in{from{opacity:0}}
main>*{animation:fade .45s ease both}
main>*:nth-child(2){animation-delay:.05s}main>*:nth-child(3){animation-delay:.1s}main>*:nth-child(4){animation-delay:.15s}main>*:nth-child(n+5){animation-delay:.2s}
.items li{animation:fade .45s ease both}.items li:nth-child(2){animation-delay:.06s}.items li:nth-child(3){animation-delay:.12s}.items li:nth-child(4){animation-delay:.18s}.items li:nth-child(n+5){animation-delay:.24s}
@keyframes fade{from{opacity:0}}
button,.btn,.item,.tabs a,.seg span,.drop,label.consent{transition:background-color .15s,color .15s,box-shadow .2s,border-color .15s,transform .12s}
button:active,.btn:active{transform:scale(.97)}
a.item:hover .t{text-decoration:underline;text-decoration-color:var(--tom);text-underline-offset:4px}
.tabs a[aria-current=page] .ic{color:var(--tom-d)}
label.consent input:checked+.tick::after{animation:pop .25s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{from{transform:scale(.2);opacity:0}}
.chip{animation:fade .5s ease both}
#rec-go:not(:disabled):hover{animation:nudge .6s ease-in-out infinite alternate}@keyframes nudge{to{transform:scale(1.015)}}
.drop:hover svg{animation:bounce .6s ease-in-out infinite alternate}@keyframes bounce{to{transform:translateY(-3px)}}

@media (prefers-reduced-motion:reduce){*,::before,::after{animation:none!important;transition:none!important}@view-transition{navigation:none}}
/* N19: the Team page, read only */
.team{margin-top:var(--s4)}.team li{display:flex;align-items:center;gap:var(--s4);padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.team .bust{flex:none;width:64px;height:64px;border-radius:10px;background:var(--soft);display:grid;place-items:center}.team .bust .px{width:52px;height:52px;image-rendering:pixelated}
.team .px .w{display:none}.team .px .a1,.team .px .a2,.team .px .a3,.team .px .a4{opacity:0}
.team .px .a1{animation:q1 1s steps(1) infinite}.team .px .a2{animation:q2 1s steps(1) infinite}.team .px .a3{animation:q3 1s steps(1) infinite}.team .px .a4{animation:q4 1s steps(1) infinite}
@media (prefers-reduced-motion:reduce){.team .px .a1{opacity:1}}
.who-t{display:flex;flex-direction:column;gap:2px;min-width:0}.team .nm{font-weight:800;display:flex;align-items:center;gap:var(--s2)}.team .ln{color:var(--mute);font-size:14px;line-height:1.35}

/* N19: Manage is one calm list: label left, action right, one divider; only Delete is red */
.mlist{margin:var(--s2) 0 0}.mlist>li{border-bottom:1px solid var(--line)}.mlist>li:last-child{border-bottom:0}
.mrow>summary,.mrow.flat{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:60px;padding:var(--s3) 0;cursor:pointer;list-style:none}
.mrow>summary::-webkit-details-marker{display:none}
.ml{display:flex;flex-direction:column;gap:2px;min-width:0;font-weight:700}.ml small{font-weight:500;font-size:14px;color:var(--mute);overflow-wrap:anywhere}
.ma{flex:none;font-weight:700;font-size:14px;color:var(--teal-d);display:inline-flex;align-items:center;gap:var(--s2)}
.ma::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-4px;transition:transform .15s}
details.mrow[open]>summary .ma::after{transform:rotate(-135deg);margin-top:3px}
.mrow.dz .ma{color:var(--tom-d)}
.mb{padding:0 0 var(--s5)}.mb label{margin-top:var(--s3)}.mb label.mt0{margin-top:0}.mb button{margin-top:var(--s3)}.mb .done{margin-top:var(--s4)}
.mrow.flat form{flex:none}.mrow.flat button.sm,button.sm{min-height:40px;margin-top:0;padding:var(--s1) var(--s4);font-size:14px}
.mrow.dz button.danger{background:transparent;box-shadow:inset 0 0 0 1px var(--tom)}.mrow.dz button.danger:hover{background:var(--tom)}
/* N19: the audio card (the same card look as the transcript box) */
.ap{border:1px solid var(--line);border-radius:10px;background:var(--card);padding:var(--s4);margin:var(--s6) 0 var(--s2)}
.aph{display:flex;align-items:center;gap:var(--s2);color:var(--mute)}.aph .ic{width:20px;height:20px}.aph h2{margin:0;flex:1}.aph .len{font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.ap audio{display:block;width:100%;margin-top:var(--s3)}
.ap .apc,.ap .apt,.ap .aps{display:none}
.ap.on audio{display:none}
.ap.on .apc{display:flex;align-items:center;gap:var(--s4);margin-top:var(--s3)}.ap.on .apt{display:flex;justify-content:space-between;font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums;margin:var(--s1) 0 0 calc(56px + var(--s4))}
.ap.on .aps{display:flex;gap:var(--s2);margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line)}
.ap .play{flex:none;width:56px;min-height:56px;height:56px;margin:0;padding:0;border-radius:50%;background:var(--ink)}.ap .play:hover{background:#2d3654}
.ap .play .ic{width:24px;height:24px;margin:0}.ap .play .ps,.ap.playing .play .pl{display:none}.ap.playing .play .ps{display:block}
.ap .sk{flex:1;min-width:0;height:28px;margin:0;padding:0;accent-color:var(--tom-d);background:transparent;border:0;cursor:pointer}
.aps button{min-height:36px;margin:0;padding:0 var(--s4);font-size:14px;background:var(--soft);color:var(--ink)}.aps button[aria-pressed=true]{background:var(--ink);color:var(--on)}
/* N19: the live level on Record */
.lvl{margin:var(--s4) 0}.lvl .bars{display:flex;align-items:center;gap:3px;height:64px;padding:var(--s2) var(--s3);border-radius:10px;background:var(--soft)}
.lvl .bars i{flex:1;min-width:0;height:4%;border-radius:2px;background:var(--tom-d)}
.lvl .bar1{display:none;height:12px;border-radius:6px;background:var(--soft);overflow:hidden}.lvl .bar1 i{display:block;height:100%;width:0;background:var(--tom-d)}
@media (prefers-reduced-motion:reduce){.lvl .bars{display:none}.lvl .bar1{display:block}}
details.mrow:not([open])>.mb{display:none}      /* the browser keeps a closed row's controls at a size; layoutcheck then counts them as overlapping */
.pane form>label:first-of-type{margin-top:0}
/* N20: the wait card */
div.wait{display:flex;align-items:flex-start;gap:var(--s3);margin:var(--s4) 0;padding:var(--s4);border:1px solid var(--line);border-radius:10px;background:var(--card)}
div.wait .ic{flex:none;width:24px;height:24px;color:var(--teal-d)}div.wait .spin{animation:spin 1.4s linear infinite}div.wait.long .spin{animation:none}
div.wait p{margin:0}@keyframes spin{to{transform:rotate(360deg)}}

/* ---- N21: title row, tabs, the "..." sheet, in-place edit ---- */
.th{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--s1);margin:var(--s5) 0 var(--s2)}
.th h1.title{flex:1;min-width:0;margin:0}
.th h1.title+.ib{margin-top:var(--s1)}
.ib{text-decoration:none;flex:none;display:inline-grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;margin:0;border:0;border-radius:10px;background:transparent;color:var(--mute);cursor:pointer}
.ib:hover{background:var(--soft);color:var(--ink)}.ib .ic{margin:0;width:22px;height:22px}
input.te{flex:1;min-width:0;font:700 clamp(22px,6vw,32px)/1.2 var(--disp);min-height:52px}
.edit-err{margin:var(--s2) 0;flex:1 0 100%}
.rtabs{display:flex;gap:var(--s1);margin:var(--s4) 0 var(--s3);border-bottom:1px solid var(--line)}
.rtabs button{flex:1;min-height:48px;padding:var(--s2) var(--s4);margin:0 0 -1px;border:0;border-bottom:3px solid transparent;background:transparent;color:var(--mute);font:700 16px/1.2 var(--text);cursor:pointer;transition:color .15s,border-color .15s}
.rtabs button:hover{color:var(--ink)}
.rtabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--tom)}
.rtabs button:focus-visible{outline:3px solid var(--teal);outline-offset:-3px;box-shadow:none}
@media(min-width:880px){.rtabs button{flex:none}}
.chip.style{background:var(--lav);color:var(--lav-d);border-color:#6a58e0}
dialog.sheet{border:0;padding:0;background:var(--card);color:var(--ink);width:100%;max-width:100%;margin:auto 0 0;max-height:85dvh;overflow:auto;border-radius:16px 16px 0 0;box-shadow:0 -8px 32px rgba(27,34,54,.25)}
dialog.sheet:target:not([open]){display:block}      /* without script the "..." link (#manage) shows the sheet in place */
dialog.sheet::backdrop{background:rgba(27,34,54,.45)}
dialog.sheet[open]{animation:sheet .22s ease both}
@keyframes sheet{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.sheet .sh{display:flex;align-items:center;justify-content:space-between;padding:var(--s3) var(--s4) 0}
.sheet .sh h2{margin:0}
.sheet .mlist{padding:0 var(--s4) var(--s5)}
.sheet .lbl{font-weight:800;margin:var(--s3) 0 var(--s2)}
#who-msg{margin:var(--s2) 0 0;padding:var(--s2) var(--s3)}
@media(min-width:880px){
  dialog.sheet{width:26rem;max-width:calc(100vw - 2rem);margin:auto;max-height:80dvh;border-radius:12px;box-shadow:0 12px 40px rgba(27,34,54,.3)}
  dialog.sheet[open]{animation:fade .2s ease both}
}
.items li.own{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--s1)}
.items li.own a.item{flex:1;min-width:0}
.items li.own .pen{flex:none;display:inline-grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;margin:var(--s3) 0 0;border:0;border-radius:10px;background:transparent;color:var(--mute);cursor:pointer}
.items li.own .pen:hover{background:var(--soft);color:var(--ink)}.items li.own .pen .ic{margin:0}
.items li.own input.te{flex:1;margin:var(--s3) 0;font:700 18px/1.3 var(--text);min-height:48px}
button.big{min-height:96px;font-size:24px;margin-top:var(--s5)}

/* ---- N23: action items, speaker picker ---- */
.notes p.none{color:var(--mute);margin:var(--s2) 0}
.notes ul.ai{list-style:none;padding-left:0}
.notes li.ai{display:flex;gap:var(--s3);align-items:flex-start}
.notes li.ai .cb{flex:none;width:18px;height:18px;margin-top:3px;border:2px solid var(--mute);border-radius:4px;background:#fff}
button.spk{padding:0;margin:0;min-height:0;border:0;background:transparent;color:inherit;font:inherit;font-weight:700;text-align:left}
.spk-on button.spk{color:var(--teal-d);text-decoration:underline dotted;text-underline-offset:3px;cursor:pointer}
.spk-on button.spk:hover{color:var(--ink)}
.sheet .opts{padding:0 var(--s4) var(--s5)}
.sheet .opts li{border-bottom:1px solid var(--line)}.sheet .opts li:last-child{border-bottom:0}
button.opt{display:flex;align-items:center;justify-content:flex-start;gap:var(--s3);width:100%;min-height:56px;padding:var(--s2) 0;margin:0;border:0;border-radius:0;background:transparent;color:var(--ink);font:700 16px/1.2 var(--text);text-align:left;cursor:pointer}
button.opt:hover{background:var(--soft)}
button.opt .bust{flex:none;width:40px;height:40px;display:inline-block}
#spk-guess{padding:0 var(--s4) var(--s2);display:flex;flex-wrap:wrap;column-gap:var(--s2)}
#spk-else{display:flex;gap:var(--s2);align-items:center;padding:var(--s2) 0}
#spk-else button{margin:0;flex:none}
.opt .px{width:40px;height:40px;image-rendering:pixelated}

.sheet .opts.grid{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s3);padding-bottom:0}
.sheet .opts.grid li:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
.sheet .opts+.opts{padding-top:0}
#spk-guess button.sug{min-height:0;width:auto;max-width:100%;height:32px;margin:0 0 var(--s2);padding:0 var(--s3);font-size:14px;cursor:pointer}
/* N24: the Share sheet. Its rows are the same big buttons as the speaker picker; the form inside a row adds no space of its own. */
#share li form{margin:0}
#share .hint.pad{padding:0 var(--s4) var(--s5);margin:0}
button.opt svg.ic{flex:none}
.notes + form{margin-top:var(--s6)}                 /* Write again keeps the gap the sections have */
.share-on dialog#share:target:not([open]){display:none}
/* N26: the phone test card and the on-page recording log */
.card-steps{padding-left:var(--s5)}.card-steps li{margin:var(--s3) 0;font-size:17px}
.rlog{margin-top:var(--s4)}.rlog summary{cursor:pointer;font-weight:700;color:var(--mute)}.rlog ol{padding-left:var(--s5);font-size:14px}
/* N25: the Resume bar, and the Record page in resume mode (no title, no file) */
.resume{margin:var(--s4) 0}.resume .hint{margin:var(--s2) 0 0}
#rec[data-resume] #rt,#rec[data-resume] label[for="rt"],#rec[data-resume] .linkish{display:none}

.pplist{list-style:none;margin:0 0 var(--s3);padding:0}.pplist li{border-bottom:1px solid var(--line)}.pplist li:last-child{border-bottom:0}
label.pp{display:flex;align-items:center;gap:var(--s3);min-height:56px;margin:0;position:relative;cursor:pointer;font-weight:700}
label.pp .bust{flex:none;width:40px;height:40px;display:inline-block}.pp .px{width:40px;height:40px;image-rendering:pixelated}
label.pp .nm{flex:1}label.pp .ro{color:var(--mute);font-weight:600;font-size:14px}
label.pp input{position:absolute;opacity:0;inset:0;width:100%;height:100%;min-height:0;margin:0;cursor:pointer}
label.pp .box{flex:none;width:28px;height:28px;border:2px solid var(--line);border-radius:8px;background:#fff;display:grid;place-items:center;color:transparent}
label.pp .box svg{width:18px;height:18px}label.pp input:checked+.box{background:var(--teal);border-color:var(--teal);color:#fff}
label.pp input:focus-visible+.box{outline:3px solid var(--teal);outline-offset:2px}
.pick{margin-top:var(--s4)}.pick[hidden]{display:none}
.street{display:block;width:100%;height:auto;max-height:150px;margin-top:var(--s4)}
.street .w,.street .a{opacity:0}.street .px{image-rendering:pixelated}.street .px .w1,.street .px .w2,.street .px .w3,.street .px .w4,.street .px .a1,.street .px .a2,.street .px .a3,.street .px .a4{opacity:0}
.street .w1{animation:q1 .6s steps(1) infinite}.street .w2{animation:q2 .6s steps(1) infinite}.street .w3{animation:q3 .6s steps(1) infinite}.street .w4{animation:q4 .6s steps(1) infinite}
.street .a1{animation:q1 1s steps(1) infinite}.street .a2{animation:q2 1s steps(1) infinite}.street .a3{animation:q3 1s steps(1) infinite}.street .a4{animation:q4 1s steps(1) infinite}
@keyframes q1{0%{opacity:1}25%,100%{opacity:0}}@keyframes q2{0%,50%,100%{opacity:0}25%{opacity:1}}@keyframes q3{0%,25%,75%,100%{opacity:0}50%{opacity:1}}@keyframes q4{0%,50%{opacity:0}75%,100%{opacity:1}}
@keyframes mv-nawang{0%{transform:translateX(-50px) scaleX(1)}16.639%{transform:translateX(-50px) scaleX(1)}16.653%{transform:translateX(-50px) scaleX(1)}16.667%{transform:translateX(-50px) scaleX(1)}18.750%{transform:translateX(150px) scaleX(1)}22.222%{transform:translateX(150px) scaleX(1)}24.306%{transform:translateX(450px) scaleX(1)}49.972%{transform:translateX(450px) scaleX(1)}49.986%{transform:translateX(450px) scaleX(-1)}50.000%{transform:translateX(450px) scaleX(-1)}52.083%{transform:translateX(300px) scaleX(-1)}55.556%{transform:translateX(300px) scaleX(-1)}57.639%{transform:translateX(-50px) scaleX(-1)}84.694%{transform:translateX(-50px) scaleX(-1)}84.708%{transform:translateX(-50px) scaleX(1)}84.722%{transform:translateX(-50px) scaleX(1)}86.806%{transform:translateX(60px) scaleX(1)}90.278%{transform:translateX(60px) scaleX(1)}92.361%{transform:translateX(450px) scaleX(1)}100%{transform:translateX(-50px) scaleX(1)}}
@keyframes wk-nawang{0%{opacity:0}16.653%{opacity:0}16.667%{opacity:1}18.736%{opacity:1}18.750%{opacity:0}22.208%{opacity:0}22.222%{opacity:1}24.292%{opacity:1}24.306%{opacity:0}49.986%{opacity:0}50.000%{opacity:1}52.069%{opacity:1}52.083%{opacity:0}55.542%{opacity:0}55.556%{opacity:1}57.625%{opacity:1}57.639%{opacity:0}84.708%{opacity:0}84.722%{opacity:1}86.792%{opacity:1}86.806%{opacity:0}90.264%{opacity:0}90.278%{opacity:1}92.347%{opacity:1}92.361%{opacity:0}100%{opacity:0}}
@keyframes ac-nawang{0%{opacity:0}18.736%{opacity:0}18.750%{opacity:1}22.208%{opacity:1}22.222%{opacity:0}52.069%{opacity:0}52.083%{opacity:1}55.542%{opacity:1}55.556%{opacity:0}86.792%{opacity:0}86.806%{opacity:1}90.264%{opacity:1}90.278%{opacity:0}100%{opacity:0}}
.street .nawang{animation:mv-nawang 144s linear infinite}.street .nawang .w{animation:wk-nawang 144s linear infinite}.street .nawang .a{animation:ac-nawang 144s linear infinite}
@keyframes mv-vishnu{0%{transform:translateX(-50px) scaleX(1)}33.306%{transform:translateX(-50px) scaleX(1)}33.319%{transform:translateX(-50px) scaleX(1)}33.333%{transform:translateX(-50px) scaleX(1)}35.417%{transform:translateX(180px) scaleX(1)}38.889%{transform:translateX(180px) scaleX(1)}40.972%{transform:translateX(450px) scaleX(1)}51.083%{transform:translateX(450px) scaleX(1)}51.097%{transform:translateX(450px) scaleX(-1)}51.111%{transform:translateX(450px) scaleX(-1)}53.194%{transform:translateX(180px) scaleX(-1)}56.667%{transform:translateX(180px) scaleX(-1)}58.750%{transform:translateX(-50px) scaleX(-1)}67.264%{transform:translateX(-50px) scaleX(-1)}67.278%{transform:translateX(-50px) scaleX(1)}67.292%{transform:translateX(-50px) scaleX(1)}69.375%{transform:translateX(120px) scaleX(1)}72.847%{transform:translateX(120px) scaleX(1)}74.931%{transform:translateX(450px) scaleX(1)}84.139%{transform:translateX(450px) scaleX(1)}84.153%{transform:translateX(-50px) scaleX(1)}84.167%{transform:translateX(-50px) scaleX(1)}86.250%{transform:translateX(170px) scaleX(1)}89.722%{transform:translateX(170px) scaleX(1)}91.806%{transform:translateX(450px) scaleX(1)}100%{transform:translateX(-50px) scaleX(1)}}
@keyframes wk-vishnu{0%{opacity:0}33.319%{opacity:0}33.333%{opacity:1}35.403%{opacity:1}35.417%{opacity:0}38.875%{opacity:0}38.889%{opacity:1}40.958%{opacity:1}40.972%{opacity:0}51.097%{opacity:0}51.111%{opacity:1}53.181%{opacity:1}53.194%{opacity:0}56.653%{opacity:0}56.667%{opacity:1}58.736%{opacity:1}58.750%{opacity:0}67.278%{opacity:0}67.292%{opacity:1}69.361%{opacity:1}69.375%{opacity:0}72.833%{opacity:0}72.847%{opacity:1}74.917%{opacity:1}74.931%{opacity:0}84.153%{opacity:0}84.167%{opacity:1}86.236%{opacity:1}86.250%{opacity:0}89.708%{opacity:0}89.722%{opacity:1}91.792%{opacity:1}91.806%{opacity:0}100%{opacity:0}}
@keyframes ac-vishnu{0%{opacity:0}35.403%{opacity:0}35.417%{opacity:1}38.875%{opacity:1}38.889%{opacity:0}53.181%{opacity:0}53.194%{opacity:1}56.653%{opacity:1}56.667%{opacity:0}69.361%{opacity:0}69.375%{opacity:1}72.833%{opacity:1}72.847%{opacity:0}86.236%{opacity:0}86.250%{opacity:1}89.708%{opacity:1}89.722%{opacity:0}100%{opacity:0}}
.street .vishnu{animation:mv-vishnu 144s linear infinite}.street .vishnu .w{animation:wk-vishnu 144s linear infinite}.street .vishnu .a{animation:ac-vishnu 144s linear infinite}
@keyframes mv-ritik{0%{transform:translateX(-50px) scaleX(1)}8.306%{transform:translateX(-50px) scaleX(1)}8.319%{transform:translateX(450px) scaleX(-1)}8.333%{transform:translateX(450px) scaleX(-1)}10.417%{transform:translateX(240px) scaleX(-1)}13.889%{transform:translateX(240px) scaleX(-1)}15.972%{transform:translateX(-50px) scaleX(-1)}50.528%{transform:translateX(-50px) scaleX(-1)}50.542%{transform:translateX(450px) scaleX(-1)}50.556%{transform:translateX(450px) scaleX(-1)}52.639%{transform:translateX(240px) scaleX(-1)}56.111%{transform:translateX(240px) scaleX(-1)}58.194%{transform:translateX(-50px) scaleX(-1)}84.417%{transform:translateX(-50px) scaleX(-1)}84.431%{transform:translateX(-50px) scaleX(1)}84.444%{transform:translateX(-50px) scaleX(1)}86.528%{transform:translateX(115px) scaleX(1)}90.000%{transform:translateX(115px) scaleX(1)}92.083%{transform:translateX(450px) scaleX(1)}100%{transform:translateX(-50px) scaleX(1)}}
@keyframes wk-ritik{0%{opacity:0}8.319%{opacity:0}8.333%{opacity:1}10.403%{opacity:1}10.417%{opacity:0}13.875%{opacity:0}13.889%{opacity:1}15.958%{opacity:1}15.972%{opacity:0}50.542%{opacity:0}50.556%{opacity:1}52.625%{opacity:1}52.639%{opacity:0}56.097%{opacity:0}56.111%{opacity:1}58.181%{opacity:1}58.194%{opacity:0}84.431%{opacity:0}84.444%{opacity:1}86.514%{opacity:1}86.528%{opacity:0}89.986%{opacity:0}90.000%{opacity:1}92.069%{opacity:1}92.083%{opacity:0}100%{opacity:0}}
@keyframes ac-ritik{0%{opacity:0}10.403%{opacity:0}10.417%{opacity:1}13.875%{opacity:1}13.889%{opacity:0}52.625%{opacity:0}52.639%{opacity:1}56.097%{opacity:1}56.111%{opacity:0}86.514%{opacity:0}86.528%{opacity:1}89.986%{opacity:1}90.000%{opacity:0}100%{opacity:0}}
.street .ritik{animation:mv-ritik 144s linear infinite}.street .ritik .w{animation:wk-ritik 144s linear infinite}.street .ritik .a{animation:ac-ritik 144s linear infinite}
@keyframes mv-aayush{0%{transform:translateX(-50px) scaleX(1)}24.972%{transform:translateX(-50px) scaleX(1)}24.986%{transform:translateX(450px) scaleX(-1)}25.000%{transform:translateX(450px) scaleX(-1)}27.083%{transform:translateX(210px) scaleX(-1)}30.556%{transform:translateX(210px) scaleX(-1)}32.639%{transform:translateX(-50px) scaleX(-1)}66.639%{transform:translateX(-50px) scaleX(-1)}66.653%{transform:translateX(-50px) scaleX(1)}66.667%{transform:translateX(-50px) scaleX(1)}68.750%{transform:translateX(190px) scaleX(1)}72.222%{transform:translateX(190px) scaleX(1)}74.306%{transform:translateX(450px) scaleX(1)}83.861%{transform:translateX(450px) scaleX(1)}83.875%{transform:translateX(-50px) scaleX(1)}83.889%{transform:translateX(-50px) scaleX(1)}85.972%{transform:translateX(225px) scaleX(1)}89.444%{transform:translateX(225px) scaleX(1)}91.528%{transform:translateX(450px) scaleX(1)}100%{transform:translateX(-50px) scaleX(1)}}
@keyframes wk-aayush{0%{opacity:0}24.986%{opacity:0}25.000%{opacity:1}27.069%{opacity:1}27.083%{opacity:0}30.542%{opacity:0}30.556%{opacity:1}32.625%{opacity:1}32.639%{opacity:0}66.653%{opacity:0}66.667%{opacity:1}68.736%{opacity:1}68.750%{opacity:0}72.208%{opacity:0}72.222%{opacity:1}74.292%{opacity:1}74.306%{opacity:0}83.875%{opacity:0}83.889%{opacity:1}85.958%{opacity:1}85.972%{opacity:0}89.431%{opacity:0}89.444%{opacity:1}91.514%{opacity:1}91.528%{opacity:0}100%{opacity:0}}
@keyframes ac-aayush{0%{opacity:0}27.069%{opacity:0}27.083%{opacity:1}30.542%{opacity:1}30.556%{opacity:0}68.736%{opacity:0}68.750%{opacity:1}72.208%{opacity:1}72.222%{opacity:0}85.958%{opacity:0}85.972%{opacity:1}89.431%{opacity:1}89.444%{opacity:0}100%{opacity:0}}
.street .aayush{animation:mv-aayush 144s linear infinite}.street .aayush .w{animation:wk-aayush 144s linear infinite}.street .aayush .a{animation:ac-aayush 144s linear infinite}
@keyframes mv-pranay{0%{transform:translateX(-50px) scaleX(1)}0.000%{transform:translateX(-50px) scaleX(1)}0.000%{transform:translateX(-50px) scaleX(1)}0.000%{transform:translateX(-50px) scaleX(1)}2.083%{transform:translateX(170px) scaleX(1)}5.556%{transform:translateX(170px) scaleX(1)}7.639%{transform:translateX(450px) scaleX(1)}58.306%{transform:translateX(450px) scaleX(1)}58.319%{transform:translateX(-50px) scaleX(1)}58.333%{transform:translateX(-50px) scaleX(1)}60.417%{transform:translateX(200px) scaleX(1)}63.889%{transform:translateX(200px) scaleX(1)}65.972%{transform:translateX(450px) scaleX(1)}74.972%{transform:translateX(450px) scaleX(1)}74.986%{transform:translateX(450px) scaleX(-1)}75.000%{transform:translateX(450px) scaleX(-1)}77.083%{transform:translateX(150px) scaleX(-1)}80.556%{transform:translateX(150px) scaleX(-1)}82.639%{transform:translateX(-50px) scaleX(-1)}83.306%{transform:translateX(-50px) scaleX(-1)}83.319%{transform:translateX(-50px) scaleX(1)}83.333%{transform:translateX(-50px) scaleX(1)}85.417%{transform:translateX(335px) scaleX(1)}88.889%{transform:translateX(335px) scaleX(1)}90.972%{transform:translateX(450px) scaleX(1)}91.639%{transform:translateX(450px) scaleX(1)}91.653%{transform:translateX(450px) scaleX(-1)}91.667%{transform:translateX(450px) scaleX(-1)}93.750%{transform:translateX(210px) scaleX(-1)}97.222%{transform:translateX(210px) scaleX(-1)}99.306%{transform:translateX(-50px) scaleX(-1)}100%{transform:translateX(-50px) scaleX(1)}}
@keyframes wk-pranay{0%{opacity:0}0.000%{opacity:0}0.000%{opacity:1}2.069%{opacity:1}2.083%{opacity:0}5.542%{opacity:0}5.556%{opacity:1}7.625%{opacity:1}7.639%{opacity:0}58.319%{opacity:0}58.333%{opacity:1}60.403%{opacity:1}60.417%{opacity:0}63.875%{opacity:0}63.889%{opacity:1}65.958%{opacity:1}65.972%{opacity:0}74.986%{opacity:0}75.000%{opacity:1}77.069%{opacity:1}77.083%{opacity:0}80.542%{opacity:0}80.556%{opacity:1}82.625%{opacity:1}82.639%{opacity:0}83.319%{opacity:0}83.333%{opacity:1}85.403%{opacity:1}85.417%{opacity:0}88.875%{opacity:0}88.889%{opacity:1}90.958%{opacity:1}90.972%{opacity:0}91.653%{opacity:0}91.667%{opacity:1}93.736%{opacity:1}93.750%{opacity:0}97.208%{opacity:0}97.222%{opacity:1}99.292%{opacity:1}99.306%{opacity:0}100%{opacity:0}}
@keyframes ac-pranay{0%{opacity:0}2.069%{opacity:0}2.083%{opacity:1}5.542%{opacity:1}5.556%{opacity:0}60.403%{opacity:0}60.417%{opacity:1}63.875%{opacity:1}63.889%{opacity:0}77.069%{opacity:0}77.083%{opacity:1}80.542%{opacity:1}80.556%{opacity:0}85.403%{opacity:0}85.417%{opacity:1}88.875%{opacity:1}88.889%{opacity:0}93.736%{opacity:0}93.750%{opacity:1}97.208%{opacity:1}97.222%{opacity:0}100%{opacity:0}}
.street .pranay{animation:mv-pranay 144s linear infinite}.street .pranay .w{animation:wk-pranay 144s linear infinite}.street .pranay .a{animation:ac-pranay 144s linear infinite}
@keyframes mv-thangam{0%{transform:translateX(-50px) scaleX(1)}0.597%{transform:translateX(-50px) scaleX(1)}0.611%{transform:translateX(-50px) scaleX(1)}0.625%{transform:translateX(-50px) scaleX(1)}2.708%{transform:translateX(110px) scaleX(1)}6.181%{transform:translateX(110px) scaleX(1)}8.264%{transform:translateX(450px) scaleX(1)}41.639%{transform:translateX(450px) scaleX(1)}41.653%{transform:translateX(450px) scaleX(-1)}41.667%{transform:translateX(450px) scaleX(-1)}43.750%{transform:translateX(240px) scaleX(-1)}47.222%{transform:translateX(240px) scaleX(-1)}49.306%{transform:translateX(-50px) scaleX(-1)}75.597%{transform:translateX(-50px) scaleX(-1)}75.611%{transform:translateX(450px) scaleX(-1)}75.625%{transform:translateX(450px) scaleX(-1)}77.708%{transform:translateX(225px) scaleX(-1)}81.181%{transform:translateX(225px) scaleX(-1)}83.264%{transform:translateX(-50px) scaleX(-1)}83.583%{transform:translateX(-50px) scaleX(-1)}83.597%{transform:translateX(-50px) scaleX(1)}83.611%{transform:translateX(-50px) scaleX(1)}85.694%{transform:translateX(280px) scaleX(1)}89.167%{transform:translateX(280px) scaleX(1)}91.250%{transform:translateX(450px) scaleX(1)}100%{transform:translateX(-50px) scaleX(1)}}
@keyframes wk-thangam{0%{opacity:0}0.611%{opacity:0}0.625%{opacity:1}2.694%{opacity:1}2.708%{opacity:0}6.167%{opacity:0}6.181%{opacity:1}8.250%{opacity:1}8.264%{opacity:0}41.653%{opacity:0}41.667%{opacity:1}43.736%{opacity:1}43.750%{opacity:0}47.208%{opacity:0}47.222%{opacity:1}49.292%{opacity:1}49.306%{opacity:0}75.611%{opacity:0}75.625%{opacity:1}77.694%{opacity:1}77.708%{opacity:0}81.167%{opacity:0}81.181%{opacity:1}83.250%{opacity:1}83.264%{opacity:0}83.597%{opacity:0}83.611%{opacity:1}85.681%{opacity:1}85.694%{opacity:0}89.153%{opacity:0}89.167%{opacity:1}91.236%{opacity:1}91.250%{opacity:0}100%{opacity:0}}
@keyframes ac-thangam{0%{opacity:0}2.694%{opacity:0}2.708%{opacity:1}6.167%{opacity:1}6.181%{opacity:0}43.736%{opacity:0}43.750%{opacity:1}47.208%{opacity:1}47.222%{opacity:0}77.694%{opacity:0}77.708%{opacity:1}81.167%{opacity:1}81.181%{opacity:0}85.681%{opacity:0}85.694%{opacity:1}89.153%{opacity:1}89.167%{opacity:0}100%{opacity:0}}
.street .thangam{animation:mv-thangam 144s linear infinite}.street .thangam .w{animation:wk-thangam 144s linear infinite}.street .thangam .a{animation:ac-thangam 144s linear infinite}
@media (prefers-reduced-motion:reduce){.street *{animation:none!important}.street .p{opacity:0}.street .nawang{opacity:1;transform:translateX(200px)}.street .nawang .w{opacity:0}.street .nawang .a{opacity:1}.street .nawang .a1{opacity:1}}