/* My Health Timeline demo. #stage is a container; .ht sets 1em = 1/30 of the stage width (16px at 480px),
   so the whole demo is laid out in em and scales cleanly down to 360px. Stage = 30em × 37.5em. */
#stage{container-type:inline-size;
  --lab:#2F7D76;--lab-t:#E2F0EE;--med:#4F5FAE;--med-t:#E7EAF7;--sym:#B65D43;--sym-t:#FAE9E3;--cyc:#8A5FB0;--cyc-t:#F1EAF7;--slp:#46779F;--slp-t:#E5EEF6;
  --soft:#E9F2F1;--hair:rgba(28,42,54,.09);--shadow:0 .1em .25em rgba(28,42,54,.05),0 .5em 1.2em -.6em rgba(28,42,54,.16)}
#stage *{box-sizing:border-box}
#cta{z-index:60;background:color-mix(in srgb,var(--bg) 93%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ht{position:absolute;inset:0;font-size:3.3333cqw;color:var(--ink);font-family:var(--display);background:var(--bg);overflow:hidden;font-variant-numeric:tabular-nums}
.ht [hidden]{display:none!important}
:where(.ht button){font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;border:0;background:none;padding:0;text-align:inherit}
.ht button:focus-visible,.ht-list:focus-visible{outline:.15em solid var(--accent);outline-offset:.12em}
.ht svg{display:block}
.ht h2,.ht h3,.ht p{margin:0}
.ht-eye{font-size:.62em;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}

/* ——— Header (always visible: profile, sample-data labels, privacy badge) ——— */
.ht-head{position:absolute;left:0;right:0;top:0;height:3.2em;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:.6em;padding:0 1.1em;background:var(--panel);border-bottom:1px solid var(--hair)}
.ht-who{display:flex;align-items:center;gap:.55em;min-width:0}
.ht-who>span:last-child{display:flex;flex-direction:column;gap:.18em;min-width:0}
.ht-who b{font-size:.86em;line-height:1}
.ht-av{flex:none;width:2em;height:2em;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.9em;color:#fff;background:linear-gradient(140deg,#4BA79C,var(--accent) 70%)}
.ht-tags{display:flex;gap:.3em}
.ht-tag{font-size:.56em;font-weight:700;letter-spacing:.02em;padding:.2em .5em;border-radius:.6em;background:#EEF1F4;color:var(--mid);white-space:nowrap}
.ht-lock{flex:none;display:flex;align-items:center;gap:.35em;font-size:.66em;font-weight:700;color:var(--accent);background:var(--soft);border:1px solid rgba(47,125,118,.18);padding:.42em .7em;border-radius:2em;white-space:nowrap}

/* ——— Main: year overview, card list, dock ——— */
.ht-main{position:absolute;inset:3.2em 0 0;display:flex;flex-direction:column}
.ht-band{flex:none;padding:.45em 1.2em .3em;background:var(--panel);border-bottom:1px solid var(--hair);position:relative;z-index:2}
.ht-band-head{height:1.4em;display:flex;align-items:center;justify-content:space-between;font-size:.66em}
.ht-band-head b{font-weight:700}.ht-band-head span{color:var(--mid);font-weight:600}
.ht-chartwrap{height:0;overflow:hidden;transition:height .55s cubic-bezier(.3,.7,.2,1)}
.ht.insight .ht-chartwrap{height:8em}
.ht-rows svg,.ht-chart{width:100%;height:auto}
.ht-rows .grid{stroke:var(--hair);stroke-width:.5}
.ht-rows .lane{stroke:rgba(28,42,54,.06);stroke-width:.6}
.ht-rows .mon{font:600 5.6px var(--display);fill:var(--mid);text-anchor:middle}
.ht-rows .ri{font-size:6.6px;text-anchor:middle}
.ht-rows .today{stroke:var(--accent);stroke-width:.8;stroke-dasharray:1.6 1.4}
.mk{transform-box:fill-box;transform-origin:center}
.ht.intro .mk{animation:mkIn .45s cubic-bezier(.2,1.5,.4,1) var(--d) both}
.mk.new{animation:mkIn .6s cubic-bezier(.2,1.6,.4,1) .15s both}
@keyframes mkIn{from{transform:scale(0);opacity:0}}
.m-lab{fill:var(--lab)}.m-med{fill:var(--med)}.m-med.mbar{opacity:.85}.m-sym{fill:var(--sym);opacity:.85}.m-cyc{fill:var(--cyc);opacity:.8}.m-slp{fill:var(--slp)}
.ht.insight.m-ferritin .ht-rows .mk:not(.m-lab),.ht.insight.m-headache .ht-rows .mk:not(.m-sym){opacity:.22}

/* Insight chart */
.ht-chart .ct{font:700 6.4px var(--display);fill:var(--ink)}
.ht-chart .ct tspan{font-weight:600;fill:var(--mid)}
.ht-chart .cg{stroke:var(--hair);stroke-width:.5}
.ht-chart .cy{font:600 4.8px var(--display);fill:var(--mid);text-anchor:end}
.ht-chart .drop{stroke:var(--accent);stroke-width:.5;stroke-dasharray:1 1.2;opacity:0;transition:opacity .4s .9s}
.ht-chart .area{fill:rgba(47,125,118,.10);opacity:0;transition:opacity .6s .9s}
.ht-chart .trend{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ht-chart .pt{opacity:0;transform-box:fill-box;transform-origin:center bottom;transition:opacity .3s var(--d),transform .45s cubic-bezier(.2,1.5,.4,1) var(--d);transform:translateY(2px)}
.ht-chart .pt circle{fill:#fff;stroke:var(--accent);stroke-width:1.4}
.ht-chart .pt text{font:700 6px var(--display);fill:var(--ink);text-anchor:middle}
.ht-chart .hb rect{fill:var(--sym);opacity:.85}
.ht-chart.go .pt{opacity:1;transform:none}
.ht-chart.go .drop,.ht-chart.go .area{opacity:1}

/* Card list */
.ht-list{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:.2em 1.1em 1em;position:relative;scrollbar-width:thin}
.ht-list:focus-visible{outline-offset:-.15em}
.ht-month{position:relative}
.ht-month h3{position:sticky;top:0;z-index:2;margin:0 -1.1em;padding:.7em 1.1em .35em;font-size:.72em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mid);background:linear-gradient(var(--bg) 82%,rgba(243,246,248,0))}
.ht-month h3 span{margin-left:.4em;padding:.15em .5em;border-radius:1em;background:var(--accent);color:#fff;letter-spacing:.04em}
.ht-item{display:grid;grid-template-columns:3.1em 1fr;position:relative;padding-bottom:.45em}
.ht-item::before{content:"";position:absolute;left:2.55em;top:0;bottom:0;width:1.5px;background:rgba(28,42,54,.1)}
.ht-rail{position:relative;padding-top:.62em}
.ht-date{display:block;font-size:.56em;line-height:1.1;color:var(--mid);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.ht-date b{display:block;font-size:1.65em;color:var(--ink);letter-spacing:0}
.ht-dot{position:absolute;left:2.55em;top:1em;width:.62em;height:.62em;transform:translateX(calc(-50% + .75px));border-radius:50%;background:var(--panel);border:.16em solid var(--c,var(--accent))}
.k-lab{--c:var(--lab);--t:var(--lab-t)}.k-med{--c:var(--med);--t:var(--med-t)}.k-sym{--c:var(--sym);--t:var(--sym-t)}.k-cycle{--c:var(--cyc);--t:var(--cyc-t)}.k-sleep{--c:var(--slp);--t:var(--slp-t)}
.ht-card{background:var(--panel);border:1px solid var(--hair);border-radius:.85em;padding:.55em .7em;box-shadow:var(--shadow)}
.ht-card.slim{padding:.38em .7em;box-shadow:none;background:rgba(255,255,255,.6)}
.ht-ch{display:flex;align-items:center;gap:.5em;min-height:1.6em}
.ht-ch b{font-size:.8em;font-weight:700;line-height:1.15}
.ht-ch small{margin-left:auto;font-size:.64em;color:var(--mid);font-weight:600;white-space:nowrap;display:flex;align-items:center;gap:.4em}
.ht-ico{flex:none;width:1.6em;height:1.6em;border-radius:.5em;display:grid;place-items:center;background:var(--t,var(--soft));font-size:.82em}
.slim .ht-ico{width:1.4em;height:1.4em;font-size:.72em}
.ht-res{display:grid;grid-template-columns:1fr 4.4em 4.6em;align-items:center;gap:.5em;margin-top:.35em;padding-top:.35em;border-top:1px solid var(--hair)}
.ht-res>span{font-size:.72em;color:var(--mid);font-weight:600}
.ht-res>b,.pg-lab>b{font-size:.8em;font-weight:700;text-align:right;white-space:nowrap}
.ht-res i,.pg-lab b i,.fr i{font-style:normal;font-weight:600;font-size:.78em;color:var(--mid)}
.ht-spark{width:100%;height:auto;overflow:visible}
.ht-spark .ax{stroke:rgba(28,42,54,.1);stroke-width:.8}
.ht-spark polyline{fill:none;stroke:var(--lab);stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round;opacity:.75}
.ht-spark circle{fill:#fff;stroke:var(--lab);stroke-width:1}
.ht-spark circle.cur{fill:var(--lab)}
.ht-days{display:inline-flex;gap:.18em}.ht-days i{width:.42em;height:.42em;border-radius:.12em;background:var(--sym);opacity:.7}
.ht-today{display:flex;align-items:center;gap:.6em;margin:.5em 0 .3em;color:var(--accent);font-size:.66em;font-weight:700}
.ht-today::before,.ht-today::after{content:"";flex:1;border-top:1.5px dashed rgba(47,125,118,.45)}
.ht.intro .ht-item{animation:itemIn .5s cubic-bezier(.2,1.25,.4,1) var(--d) both}
.ht-item.is-new{animation:itemIn .6s cubic-bezier(.2,1.4,.4,1) .1s both}
.ht-item.is-new .ht-card{animation:glow 2.4s ease-out .3s both}
@keyframes itemIn{from{opacity:0;transform:translateY(.9em) scale(.96)}}
@keyframes glow{from{box-shadow:0 0 0 .25em rgba(47,125,118,.28),var(--shadow);border-color:var(--accent)}}

/* Dock */
.ht-dock{flex:none;display:grid;grid-template-columns:max-content 1fr 1.5fr;gap:.45em;padding:.6em .9em .75em;background:var(--panel);border-top:1px solid var(--hair)}
.ht-btn{display:inline-flex;align-items:center;justify-content:center;gap:.35em;min-height:2.75em;padding:.45em .95em;border-radius:.8em;background:var(--accent)!important;color:#fff!important;font-weight:700!important;font-size:.8em!important;line-height:1.1!important;text-align:center!important;text-wrap:balance;box-shadow:0 .35em .8em -.4em rgba(47,125,118,.7);transition:transform .15s,box-shadow .2s,opacity .2s}
.ht-btn span{font-size:1.3em;line-height:.8;font-weight:600}
.ht-btn.soft{background:var(--soft)!important;color:#1F5E58!important;box-shadow:inset 0 0 0 1px rgba(47,125,118,.22)}
.ht-btn.wide{width:100%}
.ht-btn:active,.ht-btn.press,.ht-opt.press,.ht-icard.press{transform:scale(.96)}
.ht-btn[disabled]{opacity:.4;cursor:default;box-shadow:none}
.ht-btn.nudge{animation:nudge 1.7s ease-in-out infinite}
@keyframes nudge{50%{box-shadow:0 0 0 .4em rgba(47,125,118,.18),0 .35em .8em -.4em rgba(47,125,118,.6)}}

/* ——— Layers ——— */
.ht-scrim{position:absolute;inset:3.2em 0 0;z-index:10;background:rgba(28,42,54,.32);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.ht.scrim-on .ht-scrim{opacity:1;visibility:visible;transition:opacity .3s}
.ht-sheet{position:absolute;left:0;right:0;bottom:0;z-index:20;background:var(--panel);border-radius:1.3em 1.3em 0 0;padding:.5em 1.2em 1.2em;box-shadow:0 -.6em 2em -.8em rgba(28,42,54,.35);transform:translateY(105%);visibility:hidden;transition:transform .42s cubic-bezier(.3,.8,.2,1),visibility 0s .42s}
.ht-sheet.on{transform:none;visibility:visible;transition:transform .42s cubic-bezier(.3,.8,.2,1)}
.ht-grab{width:2.6em;height:.28em;border-radius:1em;background:rgba(28,42,54,.15);margin:0 auto .5em}
.ht-sh-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.6em;margin-bottom:.7em}
.ht-sh-head h2{font-size:1.15em;font-weight:700;line-height:1.15;letter-spacing:-.01em}
.ht-x{flex:none;width:2.2em;height:2.2em;border-radius:50%;display:grid;place-items:center;background:#EEF1F4!important;color:var(--mid)!important;font-size:.8em!important;text-align:center!important}

/* Add sheet */
.ht-opt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35em;padding:.8em .4em;border-radius:.9em;background:#F5F8F9!important;border:1px solid var(--hair)!important;text-align:center!important;transition:transform .15s,background .2s}
.ht-opt b{font-size:.74em;font-weight:700}
.ht-opt.big{width:100%;flex-direction:row;justify-content:flex-start;gap:.8em;padding:.85em 1em;margin-bottom:.55em;background:linear-gradient(135deg,#E6F3F1,#F4FAF9)!important;border-color:rgba(47,125,118,.28)!important;text-align:left!important}
.ht-opt.big>span:last-child{display:flex;flex-direction:column;gap:.2em}
.ht-opt.big b{font-size:.9em}
.ht-opt.big small{font-size:.66em;color:var(--mid);font-weight:600;line-height:1.3}
.ht-oi{font-size:1.25em;width:2em;height:2em;border-radius:.6em;display:grid;place-items:center;background:var(--panel);box-shadow:0 .15em .4em rgba(28,42,54,.08)}
.ht-opt.big .ht-oi{font-size:1.4em}
.ht-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:.55em}

/* Quick chips */
.ht-ql{font-size:.7em;font-weight:700;color:var(--mid);margin:.2em 0 .5em!important}
.ht-chips{display:flex;flex-wrap:wrap;gap:.4em;margin-bottom:.8em}
.ht-chip{padding:.5em .85em;border-radius:2em;font-size:.74em!important;font-weight:600!important;background:#F2F5F7!important;border:1px solid var(--hair)!important;transition:background .2s,color .2s}
.ht-chip[aria-pressed=true]{background:var(--accent)!important;color:#fff!important;border-color:var(--accent)!important}
.ht-quick .q-save{margin-top:.2em}

/* Scan */
.ht-scan{position:absolute;inset:3.2em 0 0;z-index:20;display:flex;flex-direction:column;padding:.9em 1.3em 1.1em;background:linear-gradient(#24323E,#1B2731);color:#fff;opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
.ht-scan.on{opacity:1;visibility:visible;transition:opacity .35s}
.ht-scan .ht-sh-head{margin-bottom:.6em}
.ht-scan .ht-x{background:rgba(255,255,255,.12)!important;color:#fff!important}
.ht-sub{font-size:.66em;color:#A9BCC8;font-weight:600;margin-top:.2em!important}
.ht-finder{position:relative;flex:none;padding:.9em 1.4em;margin:0 0 .8em}
.ht-finder .cn{position:absolute;width:1.4em;height:1.4em;border:.16em solid #7FD0C6;opacity:.9}
.cn.tl{left:0;top:0;border-right:0;border-bottom:0;border-radius:.4em 0 0 0}.cn.tr{right:0;top:0;border-left:0;border-bottom:0;border-radius:0 .4em 0 0}
.cn.bl{left:0;bottom:0;border-right:0;border-top:0;border-radius:0 0 0 .4em}.cn.br{right:0;bottom:0;border-left:0;border-top:0;border-radius:0 0 .4em 0}
.ht-paper-doc{position:relative;overflow:hidden;background:#FDFDFB;color:#2A3540;border-radius:.3em;padding:.9em 1em 1em;transform:rotate(-1.2deg) translateY(.6em) scale(.97);opacity:0;transition:transform .5s cubic-bezier(.2,1.2,.4,1),opacity .35s;box-shadow:0 1em 2em -1em rgba(0,0,0,.6)}
.ht-scan.on .ht-paper-doc{transform:rotate(-1.2deg);opacity:1}
.pd-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid #2A3540;padding-bottom:.35em;margin-bottom:.4em}
.pd-head b{font-size:.82em;letter-spacing:.06em;text-transform:uppercase}
.pd-head span{font-size:.54em;color:#6B7884;font-weight:600}
.pd-meta{display:flex;justify-content:space-between;font-size:.56em;color:#56636F;margin-bottom:.55em}
.pd-row{display:grid;grid-template-columns:1fr 4em 4em;gap:.4em;font-size:.68em;padding:.38em .4em;border-bottom:1px solid #E5E8EB;border-radius:.25em;transition:background .25s,box-shadow .25s}
.pd-row.th{font-size:.54em;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#6B7884;border-bottom-color:#C9CFD5}
.pd-row span:nth-child(2){font-weight:700;text-align:right}
.pd-row.hit{background:rgba(47,125,118,.12);box-shadow:inset 0 0 0 1.5px rgba(47,125,118,.55)}
.pd-lines{display:flex;flex-direction:column;gap:.4em;margin-top:.7em}
.pd-lines i{display:block;height:.34em;border-radius:.2em;background:#E6E9EC}
.pd-wm{position:absolute;right:.4em;bottom:.2em;font-size:1.9em;font-weight:700;letter-spacing:.12em;color:rgba(47,125,118,.10);transform:rotate(-8deg)}
.pd-beam{position:absolute;left:0;right:0;top:0;height:2.2em;margin-top:-2.2em;background:linear-gradient(rgba(127,208,198,0),rgba(127,208,198,.38));border-bottom:2px solid #3FA99D;box-shadow:0 .2em .8em rgba(63,169,157,.6);opacity:0;pointer-events:none}
.ht-scan.scanning .pd-beam{opacity:1;animation:beam 1.7s cubic-bezier(.45,.05,.55,.95) forwards}
.ht-scan.read .pd-beam{opacity:0;transition:opacity .3s}
@keyframes beam{to{top:100%;margin-top:0}}
.ht-found{flex:1;min-height:0;background:var(--panel);color:var(--ink);border-radius:1em;padding:.75em .9em;margin-bottom:.8em}
.ht-found-st{font-size:.68em;font-weight:700;color:var(--accent);margin-bottom:.4em!important}
.fr{display:flex;justify-content:space-between;align-items:center;padding:.42em 0;border-top:1px solid var(--hair);opacity:.25;transition:opacity .3s}
.fr span{font-size:.74em;font-weight:600;color:var(--mid)}
.fr b{font-size:.82em;font-weight:700;opacity:0;transition:opacity .25s}
.fr.in{opacity:1}.fr.in b{opacity:1}
.ht-ghost{position:absolute;z-index:40;padding:.25em .55em;border-radius:.5em;background:var(--accent);color:#fff;font-size:.7em;font-weight:700;pointer-events:none;transition:transform .5s cubic-bezier(.5,0,.3,1),opacity .5s ease-in;box-shadow:0 .4em 1em -.3em rgba(47,125,118,.8)}

/* Insights */
.ht-ins{top:18.45em;padding-top:.85em;border-radius:1.1em 1.1em 0 0;display:flex;flex-direction:column;overflow-y:auto}
.ht-ins .ht-sh-head{margin-bottom:.55em}
.ht-ins h2{font-size:1.1em;margin-top:.15em!important}
.ht-ins-cards{display:flex;flex-direction:column;gap:.45em}
.ht-icard{display:flex;flex-direction:column;gap:.45em;width:100%;padding:.6em .75em;border-radius:.85em;background:#F5F8F9!important;border:1px solid var(--hair)!important;transition:transform .15s}
.ht-icard.on{background:var(--soft)!important;border-color:rgba(47,125,118,.3)!important}
.ic-h{display:flex;align-items:center;gap:.5em}
.ic-h b{font-size:.8em;font-weight:700}
.ic-h small{margin-left:auto;font-size:.64em;color:var(--mid);font-weight:600;white-space:nowrap}
.ic-t{font-size:.76em;line-height:1.42;color:#2A3946;animation:fadeUp .5s ease-out .5s both}
@keyframes fadeUp{from{opacity:0;transform:translateY(.4em)}}
.ht-fine{font-size:.6em;color:var(--mid);line-height:1.35;margin:.55em 0 .6em!important}
.ht-ins .i-prep{margin-top:auto}

/* Summary */
.ht-sum{position:absolute;inset:3.2em 0 0;z-index:20;display:flex;flex-direction:column;gap:.6em;padding:.8em .9em .9em;background:#DCE5EA;opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
.ht-sum.on{opacity:1;visibility:visible;transition:opacity .35s}
.ht-page{flex:1;min-height:0;overflow-y:auto;background:var(--panel);border-radius:.6em;padding:1em 1.15em .8em;box-shadow:0 1em 2em -1.2em rgba(28,42,54,.45);transform:translateY(1em) scale(.98);transition:transform .45s cubic-bezier(.2,1.1,.4,1)}
.ht-sum.on .ht-page{transform:none}
.pg-prep{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8em}
.pg-prep i{width:9em;height:.3em;border-radius:1em;background:linear-gradient(90deg,var(--accent) 40%,var(--soft) 40%);background-size:250% 100%;animation:prep 1s linear infinite}
@keyframes prep{from{background-position:100% 0}to{background-position:-50% 0}}
.pg-head{display:flex;justify-content:space-between;align-items:flex-end;gap:.6em;padding-bottom:.55em;border-bottom:2px solid var(--ink)}
.pg-head h2{font-size:1.2em;font-weight:700;letter-spacing:-.01em;margin-top:.15em!important}
.pg-who{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.pg-who b{font-size:.78em}.pg-who span{font-size:.6em;color:var(--mid);font-weight:600}
.pg-sec{padding:.5em 0 .45em;border-bottom:1px solid var(--hair)}
.pg-sec h3{font-size:.6em;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin-bottom:.35em}
.ht-sum.built .pg-sec,.ht-sum.built .pg-foot{animation:fadeUp .45s ease-out var(--d) both}
.pg-meds{list-style:none;margin:0;padding:0;display:grid;gap:.18em}
.pg-meds li{display:flex;justify-content:space-between;gap:.6em;font-size:.72em}
.pg-meds li span{color:var(--mid);font-weight:600}
.pg-meds li.past b{font-weight:600;color:var(--mid)}
.pg-labs{display:grid;gap:.15em}
.pg-lab{display:grid;grid-template-columns:5.6em 3.6em 1fr auto;align-items:center;gap:.55em}
.pg-lab>span{font-size:.72em;font-weight:600}
.pg-lab>b{text-align:left;font-size:.74em}
.pg-lab small{font-size:.62em;color:var(--mid);font-weight:600;white-space:nowrap;text-align:right}
.pg-lab .ar{color:var(--ink);font-weight:700}
.pg-syms{display:grid;gap:.25em}
.pg-sym{display:grid;grid-template-columns:5.6em 1fr auto;align-items:center;gap:.55em}
.pg-sym>span:first-child{font-size:.72em;font-weight:600}
.pg-sym small{font-size:.62em;color:var(--mid);font-weight:600;white-space:nowrap}
.pg-freq{display:grid;grid-template-columns:repeat(11,1fr);gap:.15em}
.pg-freq i{height:.55em;border-radius:.12em;background:#EEF1F4}.pg-freq i.on{background:var(--sym);opacity:.75}
.pg-note{font-size:.62em;color:var(--mid);font-weight:600;margin-top:.35em!important}
.pg-qs{margin:0;padding-left:1.3em;display:grid;gap:.2em;font-size:.72em;line-height:1.35}
.pg-qs li::marker{color:var(--accent);font-weight:700}
.pg-foot{padding-top:.5em;font-size:.6em;color:var(--mid);font-weight:600;text-align:center}
.ht-sum-acts{flex:none;display:grid;grid-template-columns:1fr 1.6fr;gap:.5em}

/* Toast + autoplay tap */
.ht-toast{position:absolute;left:50%;bottom:5.2em;z-index:45;width:max-content;max-width:36em;transform:translate(-50%,1em);opacity:0;visibility:hidden;padding:.6em 1em;border-radius:.8em;background:#1C2A36;color:#fff;font-size:.7em;font-weight:600;text-align:center;line-height:1.3;transition:opacity .3s,transform .3s,visibility 0s .3s;box-shadow:0 .6em 1.4em -.6em rgba(0,0,0,.5)}
.ht-toast.on{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .3s,transform .3s}
.ht-tap{position:absolute;z-index:55;width:2.6em;height:2.6em;margin:-1.3em 0 0 -1.3em;border-radius:50%;background:rgba(47,125,118,.28);border:2px solid rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(47,125,118,.4);pointer-events:none;opacity:0}
.ht-tap.go{animation:tap .55s ease-out}
@keyframes tap{0%{opacity:0;transform:scale(1.5)}30%{opacity:1;transform:scale(.8)}100%{opacity:0;transform:scale(1.25)}}

@media (prefers-reduced-motion:reduce){.ht-chart .pt,.ht-chart .drop,.ht-chart .area{opacity:1;transform:none}}