/* The demo phone: Mamoon's glance view and Night mode in HTML, measured on the app's own 390 × 844 pt
   screenshots (web/img/p-sound-*-en.webp). Inside the screen 1 pt is var(--p), so the phone scales as one. */
.demo{background:linear-gradient(var(--bg),#FDF8F1 40%,var(--bg));padding-top:clamp(56px,7vw,96px)}
.demo-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"head stage" "ctl stage";column-gap:clamp(36px,6vw,96px);row-gap:22px;align-items:center}
.demo .dhead{grid-area:head;align-self:end;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.demo .dctl{grid-area:ctl;align-self:start;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.demo .dstage{grid-area:stage}
.dplay{display:flex;flex-direction:column;gap:10px;width:100%;max-width:440px;margin-top:6px}
.dplay>span{font:600 12.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.dbtn{display:flex;align-items:center;gap:14px;width:100%;min-height:60px;padding:10px 18px 10px 10px;border-radius:20px;background:var(--paper);box-shadow:0 0 0 1px var(--line),0 14px 30px -22px rgba(60,30,10,.55);text-align:left;transition:transform .25s cubic-bezier(.3,1.4,.5,1),box-shadow .25s,background .25s}
.dbtn .di{flex:none;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--c,#F3E7D7);color:var(--ci,#3B2A22)}
.dbtn .di .ico{width:20px;height:20px}
.dbtn b{display:block;font:600 16.5px/1.2 var(--sans)}
.dbtn small{display:block;font-size:13.5px;line-height:1.35;color:var(--muted);margin-top:2px}
.dbtn .eq{margin-left:auto;display:flex;gap:3px;align-items:flex-end;height:16px;opacity:0;transition:opacity .2s}
.dbtn .eq i{width:3px;border-radius:2px;background:var(--caramel);height:40%;animation:eq .9s ease-in-out infinite}
.dbtn .eq i:nth-child(2){animation-delay:-.3s}.dbtn .eq i:nth-child(3){animation-delay:-.6s}
@keyframes eq{50%{height:100%}}
.dbtn[aria-pressed="true"]{box-shadow:0 0 0 2px var(--honey),0 14px 30px -22px rgba(60,30,10,.55)}
.dbtn[aria-pressed="true"] .eq{opacity:1}
@media (hover:hover){.dbtn:hover{transform:translateY(-2px)}}
.dbtn:active{transform:scale(.98)}
.dsay{min-height:4.8em;margin:4px 0 0;padding:14px 18px;border-radius:18px;background:rgba(231,168,87,.12);color:var(--ink2);font-size:15.5px;line-height:1.5;max-width:440px}
.dfine{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted);max-width:440px}
.dfine label{display:inline-flex;align-items:center;gap:8px;cursor:pointer;color:var(--ink2);font-weight:500;margin-bottom:6px}
.dfine input{width:18px;height:18px;accent-color:var(--caramel)}

.dstage{position:relative;justify-self:center;width:min(340px,82vw,calc((100svh - 130px)*.43))}
.dphone{position:relative;padding:3.2%;border-radius:15%/7%;background:linear-gradient(145deg,#3a302a,#15100d 40%,#2a221d);box-shadow:0 50px 80px -40px rgba(60,30,10,.55),0 18px 30px -18px rgba(60,30,10,.4),inset 0 0 0 1.5px rgba(255,255,255,.08)}
.demo.buzz .dphone{animation:buzz .5s linear}
@keyframes buzz{10%,50%,90%{translate:-2px 0}30%,70%{translate:2px 0}}
.dscr{--field:#F3E7D7;--on:#3B2A22;--on2:rgba(59,42,34,.75);--veil:rgba(255,255,255,.45);--veil2:rgba(255,255,255,.6);
  position:relative;container-type:inline-size;aspect-ratio:390/844;border-radius:12.5%/5.8%;overflow:hidden;clip-path:inset(0 round 12.5% / 5.8%);background:var(--field);color:var(--on);
  font-family:ui-rounded,"SF Pro Rounded","Figtree",system-ui,sans-serif;transition:background-color .6s ease;isolation:isolate}
.dscr.dark{--on:#fff;--on2:#fff;--veil:rgba(0,0,0,.15);--veil2:rgba(0,0,0,.2)}
.dscr *{--p:calc(100cqw/390);--rf:ui-rounded,"SF Pro Rounded","Figtree",system-ui,sans-serif}
.dscr .sb{position:absolute;inset:0 0 auto;height:calc(var(--p)*54);display:flex;align-items:center;justify-content:space-between;padding:calc(var(--p)*6) calc(var(--p)*30) 0 calc(var(--p)*46);font:600 calc(var(--p)*16.5)/1 system-ui,-apple-system,sans-serif}
.dscr .isl{position:absolute;left:50%;top:calc(var(--p)*11);translate:-50% 0;width:calc(var(--p)*120);height:calc(var(--p)*35);border-radius:99px;background:#000}
.dscr .sbr{display:flex;gap:calc(var(--p)*6);align-items:center}
.dscr .sbr svg{width:calc(var(--p)*18);height:calc(var(--p)*14);fill:currentColor}
.dscr .batt{width:calc(var(--p)*25);height:calc(var(--p)*12);border-radius:calc(var(--p)*4);border:calc(var(--p)*1.2) solid currentColor;opacity:.9;position:relative}
.dscr .batt::after{content:"";position:absolute;inset:calc(var(--p)*1.5);right:30%;border-radius:calc(var(--p)*2);background:currentColor}
.dscr .top{position:absolute;left:calc(var(--p)*16);right:calc(var(--p)*16);top:calc(var(--p)*60);height:calc(var(--p)*42);display:flex;align-items:center;justify-content:space-between}
.dscr .pill{display:flex;align-items:center;gap:calc(var(--p)*7);height:calc(var(--p)*39);padding:0 calc(var(--p)*15) 0 calc(var(--p)*13);border-radius:99px;background:var(--veil2);font:500 calc(var(--p)*17)/1 var(--rf)}
.dscr .pill::before{content:"";width:calc(var(--p)*8);height:calc(var(--p)*8);border-radius:50%;background:currentColor}
.dscr .wm{height:calc(var(--p)*27);width:auto}
.dscr .wm.l{display:none}.dscr.dark .wm.d{display:none}.dscr.dark .wm.l{display:block}
.dscr .more{width:calc(var(--p)*42);height:calc(var(--p)*42);border-radius:50%;background:var(--veil2);display:flex;align-items:center;justify-content:center;gap:calc(var(--p)*3)}
.dscr .more i{width:calc(var(--p)*4);height:calc(var(--p)*4);border-radius:50%;background:currentColor}
.dscr .seg2{position:absolute;left:50%;translate:-50% 0;top:calc(var(--p)*118);display:flex;padding:calc(var(--p)*4);border-radius:99px;background:var(--veil);white-space:nowrap}
.dscr .seg2>button{display:flex;align-items:center;gap:calc(var(--p)*8);height:calc(var(--p)*39);padding:0 calc(var(--p)*17);border-radius:99px;font:500 calc(var(--p)*17)/1 var(--rf);color:inherit;transition:background .25s,color .25s}
.dscr .seg2>button[aria-pressed="true"]{background:#3B2A22;color:#FFF8EE}
.dscr.dark:not(.pic) .seg2>button[aria-pressed="true"]{background:rgba(255,248,238,.92);color:var(--field)}
.dscr .seg2 svg{width:calc(var(--p)*17);height:calc(var(--p)*17);fill:currentColor}
.dscr .mascot{position:absolute;left:50%;top:calc(var(--p)*196);translate:-50% 0;width:calc(var(--p)*228);height:calc(var(--p)*228);-webkit-mask-image:radial-gradient(closest-side,#000 80%,transparent);mask-image:radial-gradient(closest-side,#000 80%,transparent);object-fit:contain;transition:opacity .4s}
.dscr[data-room="cry"] .mascot{animation:sob .9s ease-in-out infinite}
@keyframes sob{50%{transform:translateY(calc(var(--p)*-3)) scale(1.015)}}
.dscr .stack{position:absolute;left:calc(var(--p)*12);right:calc(var(--p)*12);bottom:calc(var(--p)*286);display:flex;flex-direction:column;align-items:center;gap:calc(var(--p)*9);text-align:center}
.dscr .word{font:800 calc(var(--p)*76)/.95 ui-rounded,"SF Pro Rounded","Figtree",system-ui,sans-serif;letter-spacing:-.01em;white-space:nowrap}
.dscr .sub{font:400 calc(var(--p)*17)/1.25 var(--rf);color:var(--on2)}
.dscr .rib{display:flex;align-items:center;gap:calc(var(--p)*6);padding:calc(var(--p)*6) calc(var(--p)*13);border-radius:99px;background:var(--veil2);font:500 calc(var(--p)*13)/1.2 var(--rf);white-space:nowrap}
.dscr .rib.conn{background:#3B2A22;color:#FFF8EE}
.dscr .recon{margin-top:calc(var(--p)*4);height:calc(var(--p)*46);color:inherit;padding:0 calc(var(--p)*20);border-radius:99px;background:var(--veil2);font:500 calc(var(--p)*16)/1 var(--rf)}
.dscr .wave{position:absolute;left:calc(var(--p)*13);right:calc(var(--p)*13);top:calc(var(--p)*568);height:calc(var(--p)*44);border-radius:calc(var(--p)*22);background:var(--veil);display:flex;align-items:center;justify-content:space-between;padding:0 calc(var(--p)*18)}
.dscr .wave i{flex:none;width:calc(var(--p)*2.4);height:calc(var(--p)*2.4);max-height:calc(var(--p)*30);border-radius:calc(var(--p)*2);background:currentColor;opacity:.55;transition:height .1s linear}
.dscr .wave i.hi{opacity:1}
.dscr .hour{position:absolute;left:calc(var(--p)*13);right:calc(var(--p)*13);top:calc(var(--p)*624);border-radius:calc(var(--p)*22);background:var(--veil);padding:calc(var(--p)*15) calc(var(--p)*18) calc(var(--p)*11)}
.dscr .hour header{display:flex;justify-content:space-between;align-items:center;height:calc(var(--p)*20);font:500 calc(var(--p)*17)/1 var(--rf)}
.dscr .hour header span{display:flex;align-items:center;gap:calc(var(--p)*6);font-size:calc(var(--p)*14.5);color:var(--on2);opacity:.9}
.dscr .hour .dot{width:calc(var(--p)*9);height:calc(var(--p)*9);border-radius:50%;background:currentColor;display:inline-block}
.dscr .track2{position:relative;margin-top:calc(var(--p)*13);height:calc(var(--p)*27);border-radius:calc(var(--p)*9);background:rgba(59,42,34,.13)}
.dscr.dark .track2{background:rgba(255,255,255,.22)}
.dscr .track2 i{position:absolute;top:0;bottom:0;width:calc(var(--p)*2.5);background:#E0A33A}
.dscr .track2 i.cry{background:#B33A48}
.dscr.dark .track2 i{background:#fff}
.dscr .axis{display:flex;justify-content:space-between;margin-top:calc(var(--p)*8);font-size:calc(var(--p)*13);line-height:1;color:var(--on2);opacity:.85}
.dscr .btns{position:absolute;left:calc(var(--p)*13);right:calc(var(--p)*13);top:calc(var(--p)*743);display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--p)*12)}
.dscr .btns button{height:calc(var(--p)*64);border-radius:calc(var(--p)*22);background:var(--veil2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--p)*6);font:500 calc(var(--p)*15)/1 var(--rf);color:inherit}
.dscr .btns svg{width:calc(var(--p)*24);height:calc(var(--p)*20);fill:currentColor}
.dscr .btns button.on{background:#3B2A22;color:#FFF8EE}
.dscr.dark .btns button.on{background:rgba(255,255,255,.9);color:var(--field)}
.dscr .btns .ic-muted,.dscr .btns button.on .ic-sound{display:none}.dscr .btns button.on .ic-muted{display:block}
.dfaster{position:absolute;right:calc(var(--p)*14);top:calc(var(--p)*172);padding:calc(var(--p)*5) calc(var(--p)*10);border-radius:99px;background:rgba(0,0,0,.55);color:#fff;font:600 calc(var(--p)*12)/1 var(--sans);z-index:4}

/* the notification, as iOS draws it */
.dban{position:absolute;z-index:6;left:calc(var(--p)*10);right:calc(var(--p)*10);top:calc(var(--p)*8);display:flex;gap:calc(var(--p)*11);align-items:flex-start;padding:calc(var(--p)*12);border-radius:calc(var(--p)*22);background:rgba(246,243,240,.9);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);box-shadow:0 calc(var(--p)*8) calc(var(--p)*24) rgba(0,0,0,.22);color:#1d1d1f;font-family:system-ui,-apple-system,"Figtree",sans-serif;
  transform:translateY(-130%) scale(.94);opacity:0;transition:transform .55s cubic-bezier(.3,1.35,.5,1),opacity .3s}
.dban.on{transform:none;opacity:1}
.dban img{width:calc(var(--p)*38);height:calc(var(--p)*38);border-radius:calc(var(--p)*9);flex:none}
.dban div{flex:1;min-width:0;font-size:calc(var(--p)*15);line-height:1.25}
.dban p{display:flex;justify-content:space-between;margin:0 0 calc(var(--p)*2);font-size:calc(var(--p)*12);color:rgba(60,60,67,.6);letter-spacing:.02em}
.dban b{display:block;font-weight:600}
.dban span{display:block}

/* Night mode (NightView.swift): black, the clock in latte at 22 %, the state as a tint, never paint */
.dnight{position:absolute;inset:0;z-index:5;background:#000;color:#fff;display:flex;flex-direction:column;align-items:center;font-family:ui-rounded,"SF Pro Rounded","Figtree",system-ui,sans-serif;cursor:pointer;
  --acc:#E9C9A0;--glyph:.45;--word:.6;--subo:.4}
.dnight[data-room="sound"]{--acc:#F2B866}
.dnight[data-room="cry"]{--acc:#F08A96;--glyph:.65;--word:.85;--subo:.5}
.dnight[data-room="lost"]{--acc:#FF7A70;--glyph:.6;--subo:.5}
.dnight .dim{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;opacity:.62;transition:opacity 2s ease}
.dnight.lift .dim{opacity:1}
.dnight.lift{background:radial-gradient(70% 45% at 50% 42%,rgba(118,48,56,.38),transparent 75%),#000}
.dnight .clk{position:absolute;top:calc(var(--p)*172);font:200 calc(var(--p)*76)/1 ui-rounded,"SF Pro Rounded",system-ui,sans-serif;font-variant-numeric:tabular-nums;color:#E9C9A0;opacity:.22;letter-spacing:.02em}
.dnight .glyph{position:absolute;top:calc(var(--p)*278);width:calc(var(--p)*120);height:calc(var(--p)*120);display:flex;align-items:center;justify-content:center;opacity:var(--glyph)}
.dnight .glyph>*{display:none}
.dnight .glyph svg{width:100%;height:100%}
.dnight[data-room="calm"] .g-calm,.dnight[data-room="connecting"] .g-calm,.dnight[data-room="sound"] .g-sound,.dnight[data-room="cry"] .g-cry,.dnight[data-room="lost"] .g-lost{display:block}
.dnight[data-room="cry"] .g-cry{animation:pulse2 1.6s ease-in-out infinite}
@keyframes pulse2{50%{transform:scale(1.06)}}
.dnight .nword{position:absolute;top:calc(var(--p)*408);font:600 calc(var(--p)*56)/1.05 var(--rf);color:var(--acc);opacity:var(--word)}
.dnight .nsub{position:absolute;top:calc(var(--p)*478);font-size:calc(var(--p)*15.5);color:#fff;opacity:var(--subo);text-align:center;padding:0 calc(var(--p)*20)}
.dnight .nwave{position:absolute;top:calc(var(--p)*522);left:calc(var(--p)*36);right:calc(var(--p)*36);height:calc(var(--p)*84);display:flex;align-items:center;justify-content:space-between;opacity:.5}
.dnight .nwave i{flex:none;width:calc(var(--p)*3);border-radius:calc(var(--p)*2);background:#A77B52;transition:height .1s linear}
.dnight .nwave i.hi{background:#C07F1C}
.dnight .nhint{position:absolute;bottom:calc(var(--p)*28);font-size:calc(var(--p)*12.5);color:#fff;opacity:.16}
.dnight .nctl{position:absolute;bottom:calc(var(--p)*58);left:calc(var(--p)*24);right:calc(var(--p)*24);display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--p)*12)}
.dnight .nctl button{height:calc(var(--p)*64);border-radius:calc(var(--p)*20);background:rgba(255,255,255,.1);color:rgba(255,255,255,.75);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--p)*5);font:500 calc(var(--p)*14)/1 var(--rf)}
.dnight .nctl svg{width:calc(var(--p)*22);height:calc(var(--p)*20);fill:currentColor}
.dnight .sbn{position:absolute;top:calc(var(--p)*20);right:calc(var(--p)*22);font:600 calc(var(--p)*14)/1 system-ui;opacity:.18}

.dtap{position:absolute;left:50%;bottom:-38px;translate:-50% 0;white-space:nowrap;font-size:13px;color:var(--muted)}

@media (max-width:980px){
  .demo-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "stage" "ctl"}
  .demo .dhead{align-items:center;text-align:center}
  .demo .dhead .lede{margin-inline:auto}
  .demo .dctl{align-items:center}
  .dplay{margin-inline:auto}
  .dstage{width:min(300px,68vw);margin-top:6px}
}
/* phones: the three sounds in one row right under the phone, so you watch it while you tap */
@media (max-width:560px){
  .dplay{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:none}
  .dplay>span{grid-column:1/-1;text-align:center}
  .dbtn{flex-direction:column;justify-content:center;gap:6px;min-height:84px;padding:10px 6px;text-align:center;border-radius:18px}
  .dbtn small,.dbtn .eq{display:none}
  .dbtn b{font-size:14px}
  .dsay{font-size:15px}
}
@media (prefers-reduced-motion:reduce){.dnight .dim,.dscr{transition:none}.dban{transition:opacity .01s}}
.dnight .clk,.dnight .nword,.dnight .nsub{left:0;right:0;text-align:center}
.dnight .glyph{left:0;right:0;margin:0 auto}

/* ---------- the picture view (web/img/p-main-en.webp): the page, the video card with the state band,
   Last hour, and four buttons. MonitorParts.swift: the sound button is filled always here, cocoa when
   live, amber when muted. ---------- */
.dscr .vid,.dscr .band,.dscr .btns .po{display:none}
.dscr.pic{background:linear-gradient(#FCF8F2,#F3EADD);--on:#3B2A22;--on2:rgba(59,42,34,.75);--veil:#FFFDF9;--veil2:#FFFDF9}
.dscr.pic .mascot,.dscr.pic .stack,.dscr.pic .wave{display:none}
.dscr.pic .vid,.dscr.pic .band{display:block}
.dscr.pic .btns .po{display:flex}
.dscr.pic.dark .wm.d{display:block}.dscr.pic.dark .wm.l{display:none}
.dscr.pic .pill,.dscr.pic .more,.dscr.pic .seg2,.dscr.pic .hour,.dscr.pic .btns button{box-shadow:0 calc(var(--p)*6) calc(var(--p)*18) rgba(138,92,48,.12),0 0 0 calc(var(--p)*.6) #EEE3D4}
.dscr.pic .pill::before{background:#A77B52}
.dscr.pic .vid{position:absolute;left:calc(var(--p)*16);right:calc(var(--p)*16);top:calc(var(--p)*182);height:calc(var(--p)*202);border-radius:calc(var(--p)*16) calc(var(--p)*16) 0 0;overflow:hidden;background:#000;isolation:isolate}
.dscr .cam{position:absolute;inset:-6%;transition:transform .7s cubic-bezier(.3,.8,.3,1)}
.dscr .cam img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.dscr .cam .f{opacity:0;transition:opacity .35s ease}
.dscr .cam .f.on{opacity:1}
.dscr .cam .f[data-f^="cry"]{transition-duration:.18s}
/* the baby breathes: the sleeping bag rises a little, about 16 breaths a minute */
.dscr .cam .breath{opacity:0;-webkit-mask-image:radial-gradient(ellipse 19% 28% at 36% 56%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 19% 28% at 36% 56%,#000 55%,transparent 100%);transform-origin:36% 62%;animation:breathe 3.8s ease-in-out infinite}
.dscr .cam .breath.on{opacity:1}
@keyframes breathe{0%,100%{transform:scale(1)}45%{transform:scale(1.022,1.03)}}
.dscr .grain{position:absolute;inset:0;width:100%;height:100%;opacity:.08;mix-blend-mode:screen;pointer-events:none;image-rendering:pixelated}
.dscr .vid.lost .cam{filter:grayscale(1) brightness(.45);transition:filter .6s}
.dscr .vflash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.dscr .vflash.on{animation:vflash .5s ease-out}
@keyframes vflash{0%{opacity:0}16%{opacity:.9}100%{opacity:0}}
.dscr .xp{position:absolute;right:calc(var(--p)*12);bottom:calc(var(--p)*12);width:calc(var(--p)*38);height:calc(var(--p)*38);border-radius:50%;background:rgba(30,30,30,.55);color:#fff;display:flex;align-items:center;justify-content:center}
.dscr .xp svg{width:calc(var(--p)*17);height:calc(var(--p)*17)}
.dscr .aim{position:absolute;inset:0;background:rgba(0,0,0,.22);z-index:2}
.dscr .aim [data-dir]{position:absolute;width:calc(var(--p)*44);height:calc(var(--p)*44);border-radius:50%;background:rgba(255,255,255,.28);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;display:flex;align-items:center;justify-content:center;transition:transform .15s}
.dscr .aim [data-dir]:active{transform:scale(.9)}
.dscr .aim [data-dir] svg{width:calc(var(--p)*20);height:calc(var(--p)*20);fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.dscr .aim [data-dir="up"]{left:50%;top:calc(var(--p)*8);translate:-50% 0}
.dscr .aim [data-dir="down"]{left:50%;bottom:calc(var(--p)*8);translate:-50% 0}
.dscr .aim [data-dir="left"]{left:calc(var(--p)*8);top:50%;translate:0 -50%}
.dscr .aim [data-dir="right"]{right:calc(var(--p)*8);top:50%;translate:0 -50%}
.dscr .ahint{position:absolute;left:50%;top:50%;translate:-50% -50%;width:max-content;max-width:70%;padding:calc(var(--p)*7) calc(var(--p)*12);border-radius:99px;background:rgba(255,255,255,.3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font:500 calc(var(--p)*12.5)/1.25 var(--rf);text-align:center;transition:opacity .4s}
.dscr .ahint.off{opacity:0}
.dscr .adone{position:absolute;right:calc(var(--p)*8);top:calc(var(--p)*8);height:calc(var(--p)*34);padding:0 calc(var(--p)*14);border-radius:99px;background:rgba(255,255,255,.3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font:600 calc(var(--p)*14)/1 var(--rf)}
.dscr .band{position:absolute;left:calc(var(--p)*16);right:calc(var(--p)*16);top:calc(var(--p)*384);height:calc(var(--p)*104);border-radius:0 0 calc(var(--p)*18) calc(var(--p)*18);background:var(--field);color:#3B2A22;box-shadow:0 calc(var(--p)*10) calc(var(--p)*24) rgba(138,92,48,.16);transition:background-color .6s}
.dscr.pic.dark .band{color:#fff}
.dscr .band .bm{position:absolute;left:calc(var(--p)*6);top:calc(var(--p)*6);width:calc(var(--p)*94);height:calc(var(--p)*94);-webkit-mask-image:radial-gradient(closest-side,#000 80%,transparent);mask-image:radial-gradient(closest-side,#000 80%,transparent)}
.dscr[data-room="cry"] .band .bm{animation:sob .9s ease-in-out infinite}
.dscr .band .bw{position:absolute;left:calc(var(--p)*106);top:calc(var(--p)*14);font:800 calc(var(--p)*38)/1 var(--rf);white-space:nowrap}
.dscr .band .bs{position:absolute;left:calc(var(--p)*106);right:calc(var(--p)*10);top:calc(var(--p)*56);font:400 calc(var(--p)*14)/1.2 var(--rf);opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dscr .band .bwave{position:absolute;left:calc(var(--p)*106);right:calc(var(--p)*18);top:calc(var(--p)*78);height:calc(var(--p)*18);display:flex;align-items:center;justify-content:space-between}
.dscr .band .bwave i{flex:none;width:calc(var(--p)*2.4);height:calc(var(--p)*2.4);max-height:100%;border-radius:calc(var(--p)*2);background:currentColor;opacity:.55;transition:height .1s linear}
.dscr .band .bwave i.hi{opacity:1}
.dscr.pic .hour{top:calc(var(--p)*506)}
.dscr.pic .track2{background:rgba(59,42,34,.13)}
.dscr.pic .track2 i{background:#E0A33A}.dscr.pic .track2 i.cry{background:#B33A48}
.dscr.pic .btns{grid-template-columns:repeat(4,1fr);gap:calc(var(--p)*10);left:calc(var(--p)*16);right:calc(var(--p)*16)}
.dscr.pic .btns button{background:#FFFDF9;color:#3B2A22}
.dscr.pic .btns button[data-btn="sound"]{background:#3B2A22;color:#FFF8EE}
.dscr.pic .btns button[data-btn="sound"].on{background:#D08A2E;color:#3B2A22}
.dscr.pic .btns [data-btn="aim"][aria-pressed="true"]{background:#3B2A22;color:#FFF8EE}
.dscr.pic .btns button span{font-size:calc(var(--p)*14)}
@media (prefers-reduced-motion:reduce){.dscr .cam .breath{animation:none}.dscr .cam{transition:none}}