/* Practice Log demo. #stage is a size container; .pl sets 1em = 16/360 of the stage width
   (16px on a 360px phone, ~21px in the 480px desktop box), so the whole layout is in em
   and scales identically. The stage is 22.5em × 28.125em. */
#stage{container-type:size;--peri:#C9D1FF;--peri-2:#E6EAFF;--peri-3:#F5F7FF;--soft:#B9C2FB;--mint:#2FBF8C;--rec:#EF4F6E;--sun:#FFB547;--coral:#FF7A59;
  --shadow:0 .5em 1.4em -.7em rgba(52,58,140,.35),0 .1em .3em rgba(52,58,140,.07)}
#stage *{box-sizing:border-box}
.pl{position:absolute;inset:0;overflow:hidden;font-size:calc(100cqw / 22.5);font-family:var(--display);color:var(--ink);
  background:radial-gradient(130% 70% at 50% -10%,#FFFFFF 0%,var(--peri-3) 45%,#ECF0FF 100%)}
.pl [hidden]{display:none!important}
/* zero-specificity reset, so any single class below can restyle a button */
:where(.pl button){font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;border:0;background:none;padding:0}
.pl button:focus-visible,.pl textarea:focus-visible{outline:.14em solid var(--accent);outline-offset:.12em}
.pl svg{display:block}
.pl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num{font-variant-numeric:tabular-nums}

/* soft background notes */
.pl-bg{position:absolute;inset:0;pointer-events:none;color:#DDE2FF}
.pl-bg span{position:absolute;font-size:1.6em;font-weight:900;opacity:.75}

/* ——— Role switcher ——— */
.pl-tabs{position:absolute;left:.75em;right:.75em;top:.6em;height:2.45em;display:grid;grid-template-columns:repeat(3,1fr);padding:.2em;border-radius:1.25em;background:var(--peri-2);box-shadow:inset 0 .08em .2em rgba(52,58,140,.08);z-index:20}
.pl-thumb{position:absolute;top:.2em;bottom:.2em;left:.2em;width:calc((100% - .4em) / 3);border-radius:1.05em;background:#fff;box-shadow:0 .2em .6em -.2em rgba(52,58,140,.35);transform:translateX(calc(100% * var(--i,0)));transition:transform .42s cubic-bezier(.3,1.35,.5,1)}
.pl-tab{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:.3em;border-radius:1.05em;font-weight:800!important;font-size:.84em!important;color:var(--mid)!important;transition:color .25s;white-space:nowrap}
.pl-tab[aria-selected="true"]{color:var(--accent)!important}
.pl-tab .ti{font-size:1.15em;line-height:1}
.pl-tab .badge{position:absolute;top:.15em;right:.55em;min-width:1.25em;height:1.25em;padding:0 .3em;border-radius:1em;background:var(--rec);color:#fff;font-size:.72em;line-height:1.25em;font-weight:900;text-align:center;transform:scale(0);transition:transform .35s cubic-bezier(.3,1.7,.5,1)}
.pl-tab .badge.on{transform:scale(1)}
.pl-tab.nudge::after{content:"";position:absolute;inset:-.1em;border-radius:1.1em;box-shadow:0 0 0 .18em var(--accent);opacity:0;animation:nudge 1.5s ease-in-out infinite}
@keyframes nudge{50%{opacity:.55}}

/* ——— Views ——— */
.pl-view{position:absolute;left:0;right:0;top:3.35em;bottom:0;opacity:0;visibility:hidden;transform:translateX(var(--dx,6%));transition:opacity .38s ease,transform .45s cubic-bezier(.25,.9,.3,1),visibility 0s linear .45s}
.pl-view.on{opacity:1;visibility:visible;transform:none;transition:opacity .38s ease,transform .45s cubic-bezier(.25,.9,.3,1)}
.pl-view.left{--dx:-6%}
.ab{position:absolute;left:.75em;right:.75em}
.eyebrow{margin:0;font-size:.62em;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mid)}
.v-title{margin:.05em 0 0;font-size:1.28em;font-weight:900;line-height:1.1;letter-spacing:-.01em}
.v-head{top:.25em;height:2.45em;display:flex;align-items:center;justify-content:space-between;gap:.5em}
.pill{display:inline-flex;align-items:center;gap:.3em;padding:.3em .65em;border-radius:1em;background:#fff;box-shadow:var(--shadow);font-size:.72em;font-weight:800;color:var(--mid);white-space:nowrap}
.card{background:#fff;border-radius:1em;box-shadow:var(--shadow)}
.av{display:grid;place-items:center;flex:none;width:2.1em;height:2.1em;border-radius:50%;background:var(--c,var(--accent));color:#fff;font-weight:900;font-size:1em;box-shadow:inset 0 -.15em 0 rgba(0,0,0,.12)}

/* streak flame chip */
.flame{width:1em;height:1.25em;flex:none}
.streak{display:inline-flex;align-items:center;gap:.25em;padding:.28em .6em .28em .45em;border-radius:1em;background:#FFF4E6;color:#C2541F;font-weight:900;box-shadow:inset 0 0 0 .08em #FFD9B0}
.streak .flame{transform-origin:50% 90%;transition:transform .5s cubic-bezier(.3,1.8,.5,1)}
.streak.grow .flame{animation:grow 1.1s cubic-bezier(.3,1.6,.5,1)}
.streak b{font-size:1em;min-width:.62em;text-align:center}
.streak.grow b{animation:flip .6s .25s both}
@keyframes grow{0%{transform:scale(1)}35%{transform:scale(1.9) rotate(-6deg)}70%{transform:scale(1.25)}100%{transform:scale(1.18)}}
@keyframes flip{0%{transform:translateY(0);opacity:1}45%{transform:translateY(-.6em);opacity:0}55%{transform:translateY(.6em);opacity:0}100%{transform:none;opacity:1}}
.flicker{transform-box:fill-box;transform-origin:50% 90%;animation:flicker 1.8s ease-in-out infinite alternate}
@keyframes flicker{0%{transform:scale(1,1) skewX(0)}50%{transform:scale(.96,1.05) skewX(2deg)}100%{transform:scale(1.03,.97) skewX(-2deg)}}

/* ——— Student ——— */
.s-head{top:.2em;height:1.9em;display:flex;align-items:center;justify-content:space-between}
.s-head h2{margin:0;font-size:1.12em;font-weight:900}
.s-head h2 small{display:block;font-size:.58em;font-weight:700;color:var(--mid);letter-spacing:.01em}
.s-head .streak{font-size:.92em}
.s-inst{top:2.35em;height:2.1em;display:grid;grid-template-columns:repeat(4,1fr);gap:.4em}
.chip{display:flex;align-items:center;justify-content:center;gap:.25em;border-radius:1.05em;background:#fff;box-shadow:inset 0 0 0 .09em var(--peri-2);font-size:.8em!important;font-weight:800!important;color:var(--mid)!important;transition:background .2s,box-shadow .2s,color .2s,transform .15s}
.chip .ci{font-size:1.2em;line-height:1}
.chip[aria-pressed="true"]{background:var(--accent);color:#fff!important;box-shadow:0 .3em .7em -.3em rgba(91,91,214,.8)}
.chip:active{transform:scale(.95)}
.chip[aria-disabled="true"]:not([aria-pressed="true"]){opacity:.45;cursor:not-allowed}

/* the ring */
.s-ring{position:absolute;left:50%;top:4.8em;width:10.3em;height:10.3em;margin-left:-5.15em}
.ring-glow{position:absolute;inset:-.7em;border-radius:50%;background:radial-gradient(circle,rgba(91,91,214,.28) 0%,rgba(91,91,214,0) 68%);opacity:0;transition:opacity .5s}
.s-ring.run .ring-glow{opacity:1;animation:breathe 2.4s ease-in-out infinite}
.s-ring.hit .ring-glow{background:radial-gradient(circle,rgba(47,191,140,.32) 0%,rgba(47,191,140,0) 68%)}
@keyframes breathe{50%{transform:scale(1.07)}}
.ring-btn{position:absolute;inset:0;border-radius:50%;display:block;width:100%;transition:transform .18s}
.ring-btn:active{transform:scale(.97)}
.ring-btn svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ring-face{fill:#fff;filter:drop-shadow(0 .5em .9em rgba(52,58,140,.18))}
.ring-track{fill:none;stroke:var(--peri-2);stroke-width:15}
.ring-prog{fill:none;stroke:url(#pl-ring-g);stroke-width:15;stroke-linecap:round}
.s-ring.hit .ring-prog{stroke:url(#pl-ring-m)}
.ring-tick{stroke:var(--peri);stroke-width:2.2;stroke-linecap:round;transition:stroke .3s}
.ring-tick.big{stroke-width:3.2}
.ring-tick.on{stroke:var(--accent)}
.s-ring.hit .ring-tick.on{stroke:var(--mint)}
.ring-knob{fill:#fff;stroke:var(--accent);stroke-width:4.5;filter:drop-shadow(0 0 4px rgba(91,91,214,.6))}
.s-ring.hit .ring-knob{stroke:var(--mint)}
.s-ring:not(.run):not(.done) .ring-knob{opacity:0}
.ring-in{position:absolute;inset:1.6em;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none}
.ring-in > div{display:none;flex-direction:column;align-items:center}
.s-ring[data-st="idle"] .r-idle,.s-ring[data-st="run"] .r-run,.s-ring[data-st="done"] .r-done{display:flex;animation:fadeup .35s ease both}
@keyframes fadeup{from{opacity:0;transform:translateY(.3em)}}
.r-play{display:grid;place-items:center;width:2.5em;height:2.5em;border-radius:50%;background:var(--accent);color:#fff;box-shadow:0 .35em .8em -.3em rgba(91,91,214,.9);margin-bottom:.35em}
.r-play svg{width:1em;height:1em;margin-left:.15em}
.s-ring[data-st="idle"] .r-play{animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 .5em rgba(91,91,214,.14),0 .35em .8em -.3em rgba(91,91,214,.9)}}
.r-big{font-size:1.06em;font-weight:900;line-height:1.1}
.r-small{font-size:.66em;font-weight:700;color:var(--mid);margin-top:.15em}
.r-time{font-size:2.55em;font-weight:900;line-height:1;letter-spacing:-.02em}
.r-tap{margin-top:.4em;font-size:.6em;font-weight:800;color:#fff;background:var(--ink);padding:.3em .7em;border-radius:1em;letter-spacing:.02em}
.r-check{display:grid;place-items:center;width:2.2em;height:2.2em;border-radius:50%;background:var(--mint);color:#fff;font-weight:900;font-size:1em;margin-bottom:.3em;box-shadow:0 .3em .7em -.3em rgba(47,191,140,.9)}
.r-check svg{width:1.1em;height:1.1em}
.s-clock{top:15.15em;height:.95em;text-align:center;line-height:.95em}
.s-clock span{font-size:.6em;font-weight:700;color:var(--mid)}
.s-clock b{color:var(--accent)}

/* goals */
.s-goals{top:16.25em;height:5.4em;padding:.5em .6em .45em}
.s-goals h3{margin:0 0 .25em .25em;display:flex;justify-content:space-between;font-size:.62em;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mid)}
.s-goals h3 span{letter-spacing:.02em;text-transform:none;color:var(--accent)}
.goal{display:flex;align-items:center;gap:.55em;width:100%;height:1.45em;padding:0 .25em;border-radius:.6em;text-align:left;font-size:.88em!important;font-weight:700!important;transition:background .2s}
.goal:hover{background:var(--peri-3)}
.goal .box{display:grid;place-items:center;flex:none;width:1.15em;height:1.15em;border-radius:.38em;box-shadow:inset 0 0 0 .12em var(--soft);color:#fff;transition:background .25s,box-shadow .25s}
.goal .box svg{width:.8em;height:.8em;stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .35s .05s}
.goal[aria-checked="true"] .box{background:var(--mint);box-shadow:none;animation:boxpop .45s cubic-bezier(.3,1.8,.5,1)}
.goal[aria-checked="true"] .box svg{stroke-dashoffset:0}
.goal[aria-checked="true"] .gt{color:var(--mid);text-decoration:line-through;text-decoration-color:rgba(100,106,148,.5);text-decoration-thickness:.08em}
@keyframes boxpop{0%{transform:scale(.6)}100%{transform:scale(1)}}

/* record row */
.s-recrow{top:22.05em;height:2.5em;display:flex;gap:.45em}
.pl-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-height:2.5em;padding:0 1em;border-radius:1.25em;background:var(--accent)!important;color:#fff!important;font-weight:800!important;font-size:.92em!important;box-shadow:0 .35em .8em -.35em rgba(91,91,214,.9);transition:transform .15s,background .2s,opacity .2s;white-space:nowrap}
.pl-btn:active{transform:scale(.97)}
.pl-btn.soft{background:#fff!important;color:var(--accent)!important;box-shadow:inset 0 0 0 .1em var(--peri),0 .2em .5em -.3em rgba(52,58,140,.3)}
.pl-btn.ghost{background:transparent!important;color:var(--mid)!important;box-shadow:none}
.pl-btn[disabled]{opacity:.45;cursor:not-allowed}
.pl-btn .mic{width:1.05em;height:1.05em}
.s-recrow .rec-main{flex:1;min-width:0}
.s-recrow .rec-main span{overflow:hidden;text-overflow:ellipsis}
.s-recrow .rec-main.sent{background:#E9FBF4!important;color:#17865F!important;box-shadow:inset 0 0 0 .1em #BDEFD9}
.s-recrow .rec-sample{padding:0 .8em;font-size:.8em!important}
.pressed{transform:scale(.95)!important}

/* recording sheet */
.s-sheet{top:15.45em;bottom:.35em;z-index:8;padding:.75em .85em .7em;display:flex;flex-direction:column;gap:.45em;border-radius:1.2em;background:#fff;box-shadow:0 -.4em 2em -.6em rgba(52,58,140,.45),0 0 0 .08em var(--peri-2);transform:translateY(115%);transition:transform .45s cubic-bezier(.25,1.15,.4,1)}
.s-sheet.on{transform:none}
.sh-top{display:flex;align-items:center;gap:.5em;font-size:.86em;font-weight:800}
.sh-dot{width:.7em;height:.7em;border-radius:50%;background:var(--rec);flex:none}
.s-sheet[data-mode="mic"] .sh-dot{animation:blink 1s steps(2) infinite}
.s-sheet[data-mode="sample"] .sh-dot,.s-sheet[data-mode="review"] .sh-dot,.s-sheet[data-mode="sent"] .sh-dot{background:var(--accent)}
.s-sheet[data-mode="asking"] .sh-dot,.s-sheet[data-mode="denied"] .sh-dot{background:var(--soft)}
@keyframes blink{50%{opacity:.25}}
.sh-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-time{font-weight:800;color:var(--mid);font-size:.92em}
.sh-wave-wrap{position:relative;flex:1;min-height:2.6em;border-radius:.8em;background:var(--peri-3)}
.sh-wave{position:absolute;inset:0;width:100%;height:100%;display:block}
.sh-msg{margin:0;font-size:.74em;font-weight:700;color:var(--mid);text-align:center;min-height:1.2em}
.sh-acts{display:flex;gap:.45em;justify-content:center}
.sh-acts .pl-btn{flex:1;min-height:2.3em;font-size:.84em!important}
.sh-acts .pl-btn.ghost{flex:0 0 auto}
.sh-sent{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35em;border-radius:inherit;background:#fff;font-weight:900;font-size:1.05em;color:#17865F;opacity:0;pointer-events:none;transition:opacity .25s}
.sh-sent .r-check{margin:0}
.s-sheet[data-mode="sent"] .sh-sent{opacity:1}

/* reward sticker */
.s-sticker{position:absolute;left:50%;top:5.6em;width:11.5em;margin-left:-5.75em;z-index:9;pointer-events:none;display:flex;justify-content:center;opacity:0;transform:scale(.2) rotate(-25deg)}
.s-sticker.on{animation:stick .7s cubic-bezier(.3,1.5,.5,1) forwards}
.s-sticker.off{opacity:1;transform:scale(1) rotate(-7deg);animation:unstick .35s ease-in forwards}
@keyframes stick{0%{opacity:0;transform:scale(.2) rotate(-25deg)}60%{opacity:1;transform:scale(1.12) rotate(-4deg)}100%{opacity:1;transform:scale(1) rotate(-7deg)}}
@keyframes unstick{to{opacity:0;transform:scale(.6) rotate(-14deg) translateY(1em)}}
.burst{position:absolute;left:50%;top:50%;width:13em;height:13em;margin:-6.5em 0 0 -6.5em;color:#FFE7A3;animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}
.stk{position:relative;padding:.32em;border-radius:1.5em;background:#fff;box-shadow:0 .7em 1.4em -.5em rgba(52,58,140,.5)}
.stk-in{display:flex;flex-direction:column;align-items:center;padding:.55em 1.1em .7em;border-radius:1.2em;background:linear-gradient(150deg,#FFC65C 0%,#FF8A4C 55%,#FF6B6B 100%);color:#fff;text-align:center}
.stk-emoji{font-size:2.2em;line-height:1.05}
.stk-big{font-size:1.3em;font-weight:900;line-height:1.05;text-shadow:0 .08em 0 rgba(180,60,30,.35);white-space:nowrap}
.stk-small{margin-top:.25em;font-size:.68em;font-weight:800;opacity:.95;letter-spacing:.02em}
.floater{position:absolute;z-index:10;pointer-events:none;font-weight:900;font-size:1.05em;color:var(--accent);animation:floatup 1.6s ease-out forwards}
@keyframes floatup{0%{opacity:0;transform:translateY(.4em) scale(.8)}15%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-2.6em)}}

/* incoming note (student) */
.s-note{top:.1em;z-index:7;display:flex;gap:.6em;align-items:flex-start;padding:.6em .7em;border-radius:1em;background:#fff;box-shadow:0 .6em 1.6em -.5em rgba(52,58,140,.55),0 0 0 .1em var(--peri);transform:translateY(-130%);opacity:0;transition:transform .45s cubic-bezier(.25,1.2,.4,1),opacity .3s;text-align:left;width:auto}
.s-note.on{transform:none;opacity:1}
.s-note .av{width:2em;height:2em;font-size:.95em}
.s-note small{display:block;font-size:.66em;font-weight:800;color:var(--mid)}
.s-note .sn-p{display:block;margin:.1em 0 0;font-size:.82em;font-weight:700;line-height:1.3}

/* ——— Teacher ——— */
.t-list,.t-detail{position:absolute;inset:0;transition:transform .45s cubic-bezier(.25,.95,.3,1),opacity .35s}
.t-detail{transform:translateX(104%);opacity:0}
.v-teacher.open .t-list{transform:translateX(-30%);opacity:0}
.v-teacher.open .t-detail{transform:none;opacity:1}
.t-rows{top:3em;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.32em}
.t-row{display:grid;grid-template-columns:2.1em 1fr auto 4.2em;align-items:center;gap:.6em;width:100%;height:2.5em;padding:0 .7em 0 .4em;border-radius:1em;background:#fff;box-shadow:var(--shadow);text-align:left;opacity:0;transform:translateY(.5em)}
.v-teacher.on .t-row{animation:rowin .45s cubic-bezier(.25,1.2,.4,1) forwards;animation-delay:calc(var(--k) * 55ms + 80ms)}
@keyframes rowin{to{opacity:1;transform:none}}
.t-row .av{width:1.95em;height:1.95em;font-size:.95em}
.t-name{min-width:0;line-height:1.15}
.t-name b{display:flex;align-items:center;gap:.35em;font-size:.92em;font-weight:900;white-space:nowrap}
.t-name small{display:block;font-size:.66em;font-weight:700;color:var(--mid);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-new{font-size:.62em;font-weight:900;padding:.15em .5em;border-radius:1em;background:var(--rec);color:#fff;letter-spacing:.02em}
.t-live{font-size:.62em;font-weight:900;padding:.15em .5em;border-radius:1em;background:#E9FBF4;color:#17865F}
.t-streak{display:flex;align-items:center;gap:.15em;font-size:.82em;font-weight:900;color:#C2541F}
.t-streak .flame{width:.85em;height:1.05em}
.t-streak.zero{color:#B6BAD3}.t-streak.zero .flame{filter:grayscale(1);opacity:.4}
.t-min{text-align:right;font-size:.74em;font-weight:800;line-height:1.1}
.t-min small{display:block;font-size:.8em;font-weight:700;color:var(--mid)}
.pl-meter{display:block;height:.32em;margin-top:.25em;border-radius:1em;background:var(--peri-2);overflow:hidden}
.pl-meter i{display:block;height:100%;width:calc(var(--v) * 100%);border-radius:inherit;background:var(--accent);transition:width .8s cubic-bezier(.3,1,.4,1)}
.t-row.me{box-shadow:var(--shadow),inset 0 0 0 .12em var(--accent);cursor:pointer}
.t-row.me .chev{position:absolute}
button.t-row:active{transform:scale(.98)}
.t-row.nudge{animation:rowin .45s forwards,rownudge 1.6s 1s ease-in-out infinite}
@keyframes rownudge{50%{box-shadow:var(--shadow),inset 0 0 0 .12em var(--accent),0 0 0 .3em rgba(91,91,214,.18)}}
.t-foot{top:19.75em;display:flex;align-items:center;gap:.6em;padding:.55em .75em;border-radius:1em;background:linear-gradient(120deg,#5B5BD6,#7B7BEA);color:#fff;box-shadow:0 .5em 1.2em -.5em rgba(91,91,214,.8)}
.t-foot .tf-ic{display:grid;place-items:center;flex:none;width:2em;height:2em;border-radius:.7em;background:rgba(255,255,255,.18);font-size:1em}
.t-foot b{display:block;font-size:.84em;font-weight:900}
.t-foot small{display:block;font-size:.66em;font-weight:700;opacity:.88}
.t-sum{top:23.15em;margin:0;text-align:center;line-height:1em}
.t-sum span{font-size:.64em;font-weight:700;color:var(--mid)}

/* detail */
.d-back{top:.15em;height:1.9em;width:auto!important;right:auto!important;display:inline-flex;align-items:center;gap:.25em;padding:0 .7em 0 .45em;border-radius:1em;background:#fff!important;box-shadow:var(--shadow);font-size:.8em!important;font-weight:800!important;color:var(--accent)!important}
.d-back svg{width:1em;height:1em}
.d-head{top:2.45em;display:flex;align-items:center;gap:.65em}
.d-head .av{width:2.6em;height:2.6em;font-size:1.1em}
.d-head b{display:block;font-size:1.15em;font-weight:900;line-height:1.1}
.d-head small{display:block;font-size:.7em;font-weight:700;color:var(--mid)}
.d-head .streak{margin-left:auto;font-size:.88em}
.d-stats{top:5.45em;display:grid;grid-template-columns:repeat(3,1fr);gap:.4em}
.d-stats div{padding:.35em .2em;border-radius:.8em;background:#fff;box-shadow:var(--shadow);text-align:center}
.d-stats b{display:block;font-size:1.02em;font-weight:900;line-height:1.15}
.d-stats small{display:block;font-size:.6em;font-weight:800;color:var(--mid);letter-spacing:.02em}
.d-rec{top:8.45em;height:4.6em;padding:.5em .65em .55em}
.d-rec .dr-top{display:flex;justify-content:space-between;font-size:.66em;font-weight:800;color:var(--mid);letter-spacing:.02em}
.d-rec .dr-top b{color:var(--ink)}
.dr-row{display:flex;align-items:center;gap:.55em;margin-top:.35em;height:2.55em}
.d-play{display:grid;place-items:center;flex:none;width:2.45em;height:2.45em;border-radius:50%;background:var(--accent)!important;color:#fff!important;box-shadow:0 .35em .8em -.3em rgba(91,91,214,.9);transition:transform .15s}
.d-play:active{transform:scale(.93)}
.d-play svg{width:.95em;height:.95em}
.d-play .ic-pause{display:none}
.d-play.on .ic-play{display:none}.d-play.on .ic-pause{display:block}
.d-play svg.ic-play{margin-left:.12em}
.d-wave{flex:1;min-width:0;height:100%;display:block}
.d-norec{display:flex;align-items:center;justify-content:center;height:2.55em;margin:.35em 0 0;font-size:.78em;font-weight:700;color:var(--mid);border-radius:.7em;background:var(--peri-3)}
.d-lab{top:13.35em;line-height:1em}
.d-lab span{font-size:.66em;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mid)}
.d-note{top:14.55em;height:5.6em;width:auto;padding:.55em .7em;border:0;border-radius:1em;resize:none;background:#fff;box-shadow:var(--shadow),inset 0 0 0 .09em var(--peri-2);font:700 1em/1.35 var(--display);color:var(--ink);user-select:text;-webkit-user-select:text}
.d-note::placeholder{color:#A4A9CB}
.d-sendrow{top:20.65em;display:flex;align-items:center;gap:.45em}
.d-quick{display:flex;gap:.35em}
.d-quick button{display:grid;place-items:center;width:2.3em;height:2.3em;border-radius:50%;background:#fff;box-shadow:var(--shadow);font-size:1em;transition:transform .15s}
.d-quick button:active{transform:scale(.9)}
.d-sendrow .d-send{margin-left:auto}
.d-sent{top:14.55em;height:8.4em;display:flex;flex-direction:column;justify-content:center;gap:.5em}
.bubble{align-self:flex-end;max-width:92%;padding:.65em .85em;border-radius:1.1em 1.1em .3em 1.1em;background:var(--accent);color:#fff;font-size:.9em;font-weight:700;line-height:1.3;box-shadow:0 .4em 1em -.4em rgba(91,91,214,.8);animation:bub .5s cubic-bezier(.3,1.4,.5,1)}
@keyframes bub{from{opacity:0;transform:translateY(1em) scale(.9)}}
.d-sent small{align-self:flex-end;font-size:.68em;font-weight:800;color:#17865F}

/* push-style toast */
.pl-toast{position:absolute;left:.75em;right:.75em;top:.55em;z-index:30;display:flex;gap:.6em;align-items:center;padding:.6em .75em;border-radius:1.1em;background:rgba(255,255,255,.97);box-shadow:0 .8em 2em -.6em rgba(34,38,74,.55),0 0 0 .08em var(--peri);transform:translateY(-140%);transition:transform .5s cubic-bezier(.25,1.25,.4,1)}
.pl-toast.on{transform:none}
.pl-toast .tapp{display:grid;place-items:center;flex:none;width:2.1em;height:2.1em;border-radius:.65em;background:linear-gradient(140deg,#7B7BEA,#5B5BD6);color:#fff}
.pl-toast .tapp svg{width:1.2em;height:1.2em}
.pl-toast small{display:block;font-size:.62em;font-weight:800;color:var(--mid);letter-spacing:.03em}
.pl-toast b{display:block;font-size:.84em;font-weight:900;line-height:1.2}
.pl-toast p{margin:.05em 0 0;font-size:.74em;font-weight:700;color:var(--ink);line-height:1.25;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}

/* ——— Parent ——— */
.p-stats{top:3em;height:4.7em;display:grid;grid-template-columns:1fr 1.25fr;gap:.5em}
.p-stats .card{position:relative;padding:.55em .75em;overflow:hidden}
.p-streak{display:flex;align-items:center;gap:.5em;background:linear-gradient(150deg,#FFF7EC,#FFE9D6)!important}
.p-streak .flame{width:2.1em;height:2.65em}
.p-streak b{display:block;font-size:1.9em;font-weight:900;line-height:1;color:#C2541F}
.p-streak small{display:block;font-size:.68em;font-weight:800;color:#B0683F;line-height:1.1}
.p-total b{display:block;font-size:1.7em;font-weight:900;line-height:1}
.p-total b span{font-size:.45em;font-weight:800;color:var(--mid);margin-left:.2em}
.p-total small{display:block;font-size:.64em;font-weight:800;color:var(--mid);margin-top:.15em}
.p-up{display:inline-flex;align-items:center;gap:.25em;margin-top:.35em;padding:.2em .5em;border-radius:1em;background:#E9FBF4;color:#17865F;font-size:.62em;font-weight:900;white-space:nowrap}
.p-chart{top:8.2em;height:9.2em;padding:.6em .7em .5em}
.p-chart h3{margin:0;display:flex;justify-content:space-between;font-size:.62em;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mid)}
.p-chart h3 span{letter-spacing:.02em;text-transform:none}
.p-plot{position:relative;height:6.7em;margin-top:.4em;display:grid;grid-template-columns:repeat(7,1fr);gap:.45em;align-items:end}
.p-goal{position:absolute;left:0;right:0;bottom:calc(1.02em + var(--g) * 4.5em);border-top:.1em dashed var(--soft);pointer-events:none}
.p-goal span{position:absolute;right:0;top:-1.25em;font-size:.55em;font-weight:800;color:var(--mid);background:#fff;padding:0 .2em}
.p-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.p-val{font-size:.62em;font-weight:900;color:var(--mid);opacity:0;transition:opacity .3s;height:1.5em;line-height:1.5em}
.p-bar{width:100%;max-width:1.7em;height:calc(var(--h,0) * 4.5em);min-height:.25em;border-radius:.45em .45em .2em .2em;background:var(--soft);transform-origin:bottom;transform:scaleY(0);transition:transform .7s cubic-bezier(.3,1.3,.5,1);transition-delay:calc(var(--k) * 70ms)}
.p-col.zero .p-bar{background:var(--peri-2)}
.p-col.today .p-bar{background:linear-gradient(180deg,#7B7BEA,var(--accent));box-shadow:0 .3em .7em -.3em rgba(91,91,214,.9)}
.p-col.today .p-val{color:var(--accent)}
.p-day{margin-top:.3em;font-size:.6em;font-weight:800;color:var(--mid);height:1.4em}
.p-col.today .p-day{color:var(--accent)}
.v-parent.drawn .p-bar{transform:scaleY(1)}
.v-parent.drawn .p-val{opacity:1;transition-delay:calc(var(--k) * 70ms + .45s)}
.p-note{top:17.85em;display:flex;gap:.6em;padding:.6em .75em;min-height:4.4em}
.p-note .av{width:2.1em;height:2.1em;font-size:.95em}
.p-note small{display:block;font-size:.64em;font-weight:800;color:var(--mid)}
.p-note p{margin:.15em 0 0;font-size:.84em;font-weight:700;line-height:1.3}
.p-note.fresh{box-shadow:var(--shadow),inset 0 0 0 .12em var(--accent)}
.p-note .p-new{margin-left:.35em;font-size:.9em;padding:.05em .45em;border-radius:1em;background:var(--accent);color:#fff}
.p-next{top:22.75em;margin:0;text-align:center;line-height:1em}
.p-next span{font-size:.68em;font-weight:800;color:var(--mid)}
.p-next b{color:var(--ink)}

/* confetti + autoplay finger */
.cf{position:absolute;z-index:12;width:.42em;height:.6em;border-radius:.12em;pointer-events:none;animation:cf 1.1s cubic-bezier(.2,.7,.4,1) forwards}
@keyframes cf{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}
.touch{position:absolute;z-index:40;width:2.6em;height:2.6em;margin:-1.3em 0 0 -1.3em;border-radius:50%;background:rgba(34,38,74,.16);box-shadow:0 0 0 .14em rgba(255,255,255,.9),0 .3em .8em rgba(34,38,74,.25);pointer-events:none;opacity:0;transition:left .45s cubic-bezier(.4,0,.2,1),top .45s cubic-bezier(.4,0,.2,1),opacity .25s,transform .15s}
.touch.on{opacity:1}
.touch.tap{transform:scale(.72);background:rgba(91,91,214,.32)}

@media (prefers-reduced-motion:reduce){
  .pl-view,.t-list,.t-detail,.s-sheet,.pl-toast{transition:none!important}
  .t-row{opacity:1;transform:none}
  .s-sticker.on{opacity:1;transform:rotate(-7deg)}
  .s-sticker.off{opacity:0}
}