@font-face{
    font-family:'Outfit'; font-style:normal; font-weight:400 800; font-display:swap;
    src:url('/fonts/outfit-variable.woff2') format('woff2');
  }
  @font-face{
    font-family:'JetBrains Mono'; font-style:normal; font-weight:500 700; font-display:swap;
    src:url('/fonts/jetbrains-mono-variable.woff2') format('woff2');
  }
  :root{
    /* surfaces */
    --bg:#FFF3E9; --bg-tint:#FFE6D2; --surface:#FFF9F4; --card:#FFFFFF;
    --card-soft:#FFEFE6; --card-soft-2:#F6E7DE;
    /* ink */
    --text:#2A1B23; --sub:#8A6E76; --muted:#B09098;
    /* accents */
    --coral:#FF5D73; --coral-deep:#F0435C; --coral-ink:#E0435A; --coral-tint:#FFE1E5;
    --mint:#16C79A; --mint-deep:#0FA47F; --mint-tint:#E4F8F1; --mint-line:#D8F5EC;
    --sun:#FFC24B; --sun-ink:#B87A0B; --sun-tint:#FFF1D6; --sun-line:#FFE7B8;
    --violet:#6B4FD8; --violet-light:#8B72F0; --violet-tint:#EFEAFD; --violet-line:#E6DEFB; --violet-soft:#C9BCF5;
    /* radii */
    --r-pill:999px; --r-sm:12px; --r-md:16px; --r-lg:18px; --r-xl:26px; --r-2xl:30px; --r-3xl:34px;
    /* shadows */
    --sh-card:0 14px 30px -26px rgba(90,30,45,.6);
    --sh-card-lg:0 20px 40px -28px rgba(90,30,45,.5);
    --sh-coral:0 18px 34px -18px rgba(255,93,115,.9);
    --sh-mint:0 18px 34px -22px rgba(22,199,154,.7);
    --sh-violet:0 22px 44px -24px rgba(107,79,216,.9);
    --sh-btn-coral:0 22px 44px -18px rgba(255,93,115,.95);
    --font-display:'Outfit',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --font-mono:'JetBrains Mono',ui-monospace,"SFMono-Regular",Menlo,monospace;
  }
  *{box-sizing:border-box}
  body{margin:0;
    background:radial-gradient(90% 60% at 8% 0%,var(--bg-tint) 0%,var(--bg) 55%);
    background-attachment:fixed;
    color:var(--text);font-family:var(--font-display);
    padding:16px;max-width:520px;margin:0 auto;padding-bottom:60px;
    text-wrap:pretty; -webkit-font-smoothing:antialiased}
  h1{font-size:1.5rem;font-weight:700;letter-spacing:-.01em;margin:14px 0 2px;text-align:center}
  .sub{color:var(--sub);text-align:center;font-size:.85rem;margin-bottom:18px}
  .card{background:var(--card);border-radius:var(--r-xl);padding:18px;margin-bottom:14px;box-shadow:var(--sh-card)}
  .timer{ text-align:center; }
  .timer-display{font-family:var(--font-mono);font-size:3rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em;margin:10px 0}
  .timer-sub{color:var(--sub);font-size:.85rem;min-height:1.2em}
  button{font:inherit;border:none;border-radius:var(--r-lg);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease,opacity .15s ease}
  button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
  .btn-main{
    width:100%;padding:22px;font-size:1.25rem;font-weight:600;color:#fff;
    background:linear-gradient(155deg,#FF7086,var(--coral-deep));border-radius:20px;box-shadow:var(--sh-btn-coral);
  }
  .btn-main.running{background:var(--coral-deep)}
  .btn-main:active{transform:scale(.98);box-shadow:0 4px 14px -6px rgba(255,93,115,.5)}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .stat{background:var(--card);border-radius:var(--r-xl);padding:18px;box-shadow:var(--sh-card)}
  .stat .v{font-family:var(--font-mono);font-size:1.6rem;font-weight:700;letter-spacing:-.02em;color:var(--coral)}
  .stat .v.amber{color:var(--sun-ink)}
  .stat .l{font-size:.7rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:4px}
  .alert{border-radius:var(--r-xl);padding:20px;font-size:.9rem;font-weight:600;line-height:1.35;margin-top:10px;
    background:linear-gradient(140deg,#2A1B23,#43303a);color:#fff}
  .alert .eyebrow{font-family:var(--font-mono);font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--sun)}
  .alert .span{font-size:.72rem;color:#C9AFB8}
  .alert .head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
  .alert .bars{display:flex;gap:6px;margin-top:14px}
  .alert .bar{flex:1}
  .alert .bar-track{height:6px;border-radius:var(--r-pill);background:rgba(255,255,255,.18);overflow:hidden}
  .alert .bar-fill{height:100%;border-radius:var(--r-pill);background:var(--sun)}
  .alert .bar-label{font-size:.62rem;color:#C9AFB8;margin-top:6px;letter-spacing:.03em}
  h2{font-size:.9rem;font-weight:700;margin:0 0 12px;color:var(--text);letter-spacing:-.01em}
  .card-meta{font-size:.72rem;color:var(--muted)}
  input,textarea,select{
    width:100%;background:var(--card-soft);border:1px solid transparent;color:var(--text);
    border-radius:var(--r-md);padding:12px 14px;font-size:1rem;font-family:inherit;transition:border-color .15s ease
  }
  input:focus,textarea:focus,select:focus{border-color:var(--coral);outline:none}
  .row{display:flex;gap:8px;margin-bottom:8px}
  .row input, .row select{flex:1}
  .btn-sec{background:var(--card-soft);color:var(--text);border-radius:var(--r-md);padding:12px;font-size:.95rem;width:100%}
  .btn-sec:hover{filter:brightness(.97)}
  .btn-sec.primary{background:var(--text);color:#fff}
  .btn-sec.danger{background:var(--coral-tint);color:var(--coral-ink)}
  .btn-sec.sun{background:var(--sun-tint);color:var(--sun-ink)}
  .btn-sec.sun:hover{background:var(--sun-line)}
  .riwayat-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--card-soft-2)}
  .riwayat-row:last-child{border-bottom:none}
  .riwayat-row .clock{font-family:var(--font-mono);font-size:.85rem;font-weight:700;width:44px;flex-shrink:0}
  .riwayat-row .dur{font-family:var(--font-mono);font-size:.78rem;color:var(--sub);width:58px;flex-shrink:0}
  .riwayat-row .gap{font-size:.74rem;color:var(--muted);flex:1;min-width:0}
  textarea{min-height:90px;resize:vertical;font-family:var(--font-mono);font-size:.85rem}
  table{width:100%;border-collapse:collapse;font-size:.88rem}
  th,td{text-align:left;padding:10px 6px;border-bottom:1px solid var(--card-soft-2)}
  th{color:var(--muted);font-weight:600;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em}
  td.num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
  .del{color:var(--coral-ink);background:none;padding:2px 6px;font-size:1rem;border-radius:8px}
  .del:hover{background:var(--card-soft)}
  .empty{text-align:center;color:var(--muted);padding:20px;font-size:.9rem}
  details summary{cursor:pointer;color:var(--sub);font-size:.85rem;padding:4px 0}
  .footer-actions{display:flex;gap:10px;margin-top:16px}
  .footer-actions button{flex:1}
  .chart-label{font-size:.78rem;color:var(--sub);display:flex;align-items:center;gap:6px}
  .dot{width:8px;height:8px;border-radius:50%;display:inline-block}
  .dot-coral{background:var(--coral)}
  .dot-sun{background:var(--sun)}
  .dot-violet{background:var(--violet)}
  canvas{width:100%;display:block;margin-top:4px}
  .topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:8px}
  .home-link{color:var(--sub);text-decoration:none;font-size:.85rem}
  .home-link:hover{color:var(--text)}
  .pill{font-family:var(--font-mono);font-weight:700;font-size:.68rem;letter-spacing:.02em;padding:6px 11px;border-radius:var(--r-pill);white-space:nowrap}
  .pill.coral{background:var(--coral-tint);color:var(--coral-ink)}
  .pill.quiet{background:var(--card-soft-2);color:var(--sub);font-family:var(--font-display);font-weight:600;font-size:.72rem;cursor:pointer;border:none}
  .pill.quiet:hover{filter:brightness(.97)}
  .session-code{font-family:var(--font-mono);font-weight:700;color:var(--text)}
  .pain-row{display:flex;gap:8px;justify-content:center;margin-top:14px;flex-wrap:wrap}
  .pain-btn{width:46px;height:46px;border-radius:var(--r-md);background:var(--card-soft);color:var(--text);font-family:var(--font-mono);font-weight:700;font-size:1rem}
  .pain-btn:hover{background:var(--coral);color:#fff}
  .pain-btn:active{transform:scale(.94)}
  .pain-btn.skip{width:auto;border-radius:var(--r-md);padding:0 14px;font-size:.85rem;color:var(--sub);background:var(--card-soft-2)}
  .pain-dots{display:inline-flex;gap:3px}
  .pain-dots i{width:7px;height:7px;border-radius:50%;background:var(--card-soft-2);display:inline-block}
  .pain-dots i.on{background:var(--coral)}
  .hidden{display:none !important}

  .disclaimer{font-size:.76rem;color:var(--muted);line-height:1.4;padding:4px}
  .milestone{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--card-soft-2)}
  .milestone:last-child{border-bottom:none}
  .m-dot{width:11px;height:11px;border-radius:50%;margin-top:5px;flex-shrink:0}
  .m-dot.done{background:var(--mint)}
  .m-dot.overdue{background:var(--coral)}
  .m-dot.due{background:var(--sun)}
  .m-dot.upcoming{background:var(--card-soft-2)}
  .m-body{flex:1;min-width:0}
  .m-title{font-size:.88rem;font-weight:600;letter-spacing:-.01em}
  .m-meta{font-size:.72rem;color:var(--muted);margin-top:2px}
  .m-status{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:4px 9px;border-radius:var(--r-pill);flex-shrink:0}
  .m-status.done{color:var(--mint-deep);background:var(--mint-tint)}
  .m-status.overdue{color:var(--coral-ink);background:var(--coral-tint)}
  .m-status.due{color:var(--sun-ink);background:var(--sun-tint)}
  .m-status.upcoming{color:var(--sub);background:var(--card-soft-2)}
  optgroup{font-weight:700;color:var(--text)}

  /* ==== landing hub (index.html) — scoped under .hub ==== */
  .hub .top{display:flex;align-items:center;justify-content:space-between}
  .hub .avatars{display:flex;align-items:center}
  .hub .avatar{width:34px;height:34px;border-radius:50%;color:#fff;display:grid;place-items:center;font-weight:700;font-size:.85rem;border:2.5px solid var(--surface)}
  .hub .avatar.a2{margin-left:-10px}
  .hub .who{margin-left:10px;font-size:.82rem;color:var(--sub);line-height:1.25}
  .hub .who b{color:var(--text);font-weight:600}
  .hub .who .tag{display:block;font-size:.68rem;color:var(--muted)}
  .hub .add-btn{width:38px;height:38px;border-radius:var(--r-md);background:var(--coral-tint);display:grid;place-items:center;font-size:1rem;color:var(--coral);font-weight:700;border:none;cursor:pointer}
  .hub h1{font-size:2.3rem;font-weight:800;letter-spacing:-.04em;line-height:.98;text-align:left;margin:22px 0 0}
  .hub .lede{margin:10px 0 0;font-size:.85rem;color:var(--muted)}
  .hub .links{display:flex;flex-direction:column;gap:16px;margin-top:24px}
  .hub .lcard{display:block;border-radius:var(--r-2xl);padding:24px;text-decoration:none;color:var(--text)}
  .hub .lcard.coral{background:linear-gradient(150deg,#FF7086 0%,var(--coral) 60%,var(--coral-deep) 100%);color:#fff;box-shadow:var(--sh-coral)}
  .hub .lcard.mint{background:var(--card);box-shadow:var(--sh-mint),inset 0 0 0 2px var(--mint-line)}
  .hub .lcard-top{display:flex;justify-content:space-between;align-items:center}
  .hub .lcard .lname{font-size:1.8rem;font-weight:800;letter-spacing:-.03em}
  .hub .lcard .arrow{width:44px;height:44px;border-radius:var(--r-md);display:grid;place-items:center;font-size:1.15rem;flex-shrink:0}
  .hub .lcard.coral .arrow{background:rgba(255,255,255,.22)}
  .hub .lcard.mint .arrow{background:var(--mint-tint);color:var(--mint-deep)}
  .hub .lcard p{margin:12px 0 0;font-size:.82rem;line-height:1.45;max-width:26ch}
  .hub .lcard.coral p{opacity:.92}
  .hub .lcard.mint p{color:var(--sub)}
  .hub .lcard .pills{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
  .hub .lcard .pills .pill{font-size:.66rem}
  .hub .lcard.coral .pills .pill{background:rgba(255,255,255,.22);color:#fff}
  .hub .lcard.mint .pills .pill.sun{background:var(--sun-tint);color:var(--sun-ink)}
  .hub .lcard.mint .pills .pill.mint{background:var(--mint-tint);color:var(--mint-deep)}
  .hub .lcard.violet{background:var(--card);box-shadow:var(--sh-violet),inset 0 0 0 2px var(--violet-line)}
  .hub .lcard.violet .arrow{background:var(--violet-tint);color:var(--violet)}
  .hub .lcard.violet p{color:var(--sub)}
  .hub .lcard.violet .pills .pill.violet{background:var(--violet-tint);color:var(--violet)}
  .hub .footer{margin-top:20px;display:flex;gap:16px;align-items:center;justify-content:center;font-size:.76rem;color:var(--muted)}
  .hub .footer button{background:none;border:none;cursor:pointer;color:var(--muted);font:inherit;padding:0}
  .hub .footer button:hover{color:var(--text)}
  .hub .footer .sep{width:3px;height:3px;border-radius:50%;background:#DCC6CC}
  .gate{margin-top:28px;text-align:center}
  .gate .btn-main{width:auto;padding:17px 28px;font-size:1.05rem;border-radius:var(--r-lg)}
  .gate .note{color:var(--muted);font-size:.8rem;line-height:1.5;margin:14px auto 0;max-width:30ch}
  .gate .note.err{color:var(--coral-ink)}
  @media (prefers-reduced-motion:reduce){ .reveal{animation:none !important} }
  .reveal{animation:rise .45s cubic-bezier(.2,.7,.3,1) both}
  @keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

  /* ==== kontraksi timer dial — scoped under .kx ==== */
  .kx .dial-wrap{position:relative;display:grid;place-items:center;margin:4px 0}
  .kx .pulse{position:absolute;width:196px;height:196px;border-radius:50%;background:var(--coral);animation:pulseRing 1.4s ease-out infinite;pointer-events:none}
  @keyframes pulseRing{0%{transform:scale(1);opacity:.55}70%{transform:scale(1.35);opacity:0}100%{opacity:0}}
  @media (prefers-reduced-motion:reduce){ .kx .pulse{animation:none;display:none} }
  .kx .dial{position:relative;width:196px;height:196px;border-radius:50%;border:none;cursor:pointer;
    background:linear-gradient(155deg,#FF7086,var(--coral-deep));color:#fff;box-shadow:var(--sh-btn-coral);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-family:var(--font-display)}
  .kx .dial:active{transform:scale(.97)}
  .kx .dial .t{font-family:var(--font-mono);font-size:2.75rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
  .kx .dial .lbl{font-size:.95rem;font-weight:600}

  /* ==== vaksin hero — scoped under .vx ==== */
  .vx .hero{border-radius:var(--r-3xl);padding:24px;background:linear-gradient(150deg,#1ED3A6,var(--mint-deep));color:#fff;
    box-shadow:0 20px 40px -22px rgba(15,164,127,.85);display:flex;align-items:center;gap:20px;margin-bottom:16px}
  .vx .ring-wrap{position:relative;width:92px;height:92px;flex-shrink:0}
  .vx .ring-wrap svg{transform:rotate(-90deg)}
  .vx .ring-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
  .vx .ring-num .n{font-family:var(--font-mono);font-size:1.25rem;font-weight:700}
  .vx .ring-num .d{font-size:.62rem;opacity:.85;margin-top:-2px}
  .vx .hero-eyebrow{font-family:var(--font-mono);font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;opacity:.85}
  .vx .hero-title{font-size:1.5rem;font-weight:700;letter-spacing:-.03em;margin-top:3px;line-height:1.1}
  .vx .hero-sub{margin:8px 0 0;font-size:.78rem;opacity:.9}
  .vx .next-card{border-radius:var(--r-xl);padding:20px;background:var(--card);box-shadow:var(--sh-card);border:2px solid var(--sun-line);margin-bottom:16px}
  .vx .next-head{display:flex;justify-content:space-between;align-items:center}
  .vx .next-eyebrow{font-family:var(--font-mono);font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--sun-ink)}
  .vx .next-title{font-size:1.25rem;font-weight:700;letter-spacing:-.02em;margin-top:8px}
  .vx .next-meta{margin:4px 0 14px;font-size:.78rem;color:var(--sub)}
  .vx .btn-mint{width:100%;border:none;cursor:pointer;border-radius:var(--r-lg);padding:15px;background:var(--mint);color:#fff;
    font-family:var(--font-display);font-size:.95rem;font-weight:600;box-shadow:0 14px 28px -14px rgba(22,199,154,.9)}
  .vx .btn-mint:hover{background:var(--mint-deep)}

  /* ==== tumbuh kembang — scoped under .tk ==== */
  .tk .hero{border-radius:var(--r-3xl);padding:22px 24px 18px;color:#fff;margin-bottom:16px;overflow:hidden;
    background:linear-gradient(155deg,var(--violet-light),var(--violet));box-shadow:var(--sh-violet)}
  .tk .hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
  .tk .hero-eyebrow{font-family:var(--font-mono);font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;opacity:.85}
  .tk .hero-title{font-size:1.6rem;font-weight:700;letter-spacing:-.03em;margin-top:3px;line-height:1.05}
  .tk .hero-note{margin:7px 0 0;font-size:.78rem;opacity:.9;max-width:22ch}
  .tk .fig{width:104px;height:132px;flex-shrink:0;display:flex;align-items:flex-end;justify-content:center}
  .tk .fig svg{width:104px;height:132px;overflow:visible}
  .tk .fig-g{transform-origin:44px 116px;transition:transform .7s cubic-bezier(.34,1.3,.44,1)}
  .tk .age-row{display:flex;gap:6px;margin-top:14px}
  .tk .age-chip{flex:1;border-radius:var(--r-sm);padding:9px 0;font-family:var(--font-mono);font-size:.68rem;font-weight:700;
    background:rgba(255,255,255,.18);color:rgba(255,255,255,.85)}
  .tk .age-chip.on{background:var(--surface);color:var(--violet)}
  .tk .metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
  .tk .mcard{text-align:left;border-radius:24px;padding:16px 18px;background:var(--card);box-shadow:var(--sh-card)}
  .tk .mcard.on{background:var(--violet);box-shadow:var(--sh-violet)}
  .tk .mcard .ml{font-family:var(--font-mono);font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
  .tk .mcard .mv{font-family:var(--font-mono);font-size:1.6rem;font-weight:700;letter-spacing:-.03em;margin-top:5px}
  .tk .mcard .md{font-size:.7rem;margin-top:3px;color:var(--sub)}
  .tk .mcard.on .ml{color:rgba(255,255,255,.75)}
  .tk .mcard.on .mv{color:#fff}
  .tk .mcard.on .md{color:rgba(255,255,255,.8)}
  .tk .chart-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:4px}
  .tk .pctl{font-family:var(--font-mono);font-size:.68rem;font-weight:700;background:var(--violet-tint);color:var(--violet);
    padding:5px 10px;border-radius:var(--r-pill);white-space:nowrap}
  .tk .chart-sub{margin:0 0 8px;font-size:.72rem;color:var(--muted)}
  .tk .chart{width:100%;height:158px;display:block;overflow:visible}
  .tk .legend{display:flex;gap:14px;margin-top:8px;font-size:.72rem;color:var(--sub)}
  .tk .legend span{display:flex;align-items:center;gap:6px}
  .tk .legend .line{width:14px;height:3px;border-radius:2px;background:var(--violet-soft);display:inline-block}
  .tk .dom{margin-bottom:14px}
  .tk .dom:last-child{margin-bottom:0}
  .tk .dom-head{display:flex;width:100%;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px;
    background:none;padding:0;border-radius:8px}
  .tk .dom-name{font-size:.78rem;font-weight:600;color:var(--sub)}
  .tk .dom-score{font-family:var(--font-mono);font-size:.7rem;font-weight:700;color:var(--dc)}
  .tk .bar-track{height:7px;border-radius:var(--r-pill);background:var(--card-soft-2);overflow:hidden}
  .tk .bar-fill{height:100%;border-radius:var(--r-pill);background:var(--dc);transition:width .6s cubic-bezier(.3,.8,.4,1)}
  .tk .dom-next{font-size:.72rem;color:var(--muted);margin-top:6px}
  .tk .items{display:flex;flex-direction:column;gap:2px;margin-top:8px}
  .tk .mitem{display:flex;align-items:flex-start;gap:10px;text-align:left;width:100%;padding:9px 8px;
    background:none;border-radius:var(--r-sm);font-size:.8rem;color:var(--text);line-height:1.35}
  .tk .mitem:hover{background:var(--card-soft)}
  .tk .mitem em{font-style:normal;font-size:.68rem;color:var(--muted)}
  .tk .mcheck{width:15px;height:15px;border-radius:5px;flex-shrink:0;margin-top:2px;background:var(--card-soft-2)}
  .tk .mitem.on .mcheck{background:var(--dc)}
  .tk .mitem.on{color:var(--sub)}
  .tk .note-card{border-radius:var(--r-xl);padding:20px;margin-bottom:14px;background:var(--text);color:#fff;
    box-shadow:0 18px 36px -26px rgba(42,27,35,.9)}
  .tk .note-eyebrow{font-family:var(--font-mono);font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--violet-soft)}
  .tk .note-body{margin:8px 0 0;font-size:.85rem;line-height:1.5;color:#F0E6EA}
  .tk .note-btn{margin-top:12px;background:rgba(255,255,255,.14);color:#fff;padding:9px 14px;font-size:.75rem;border-radius:var(--r-md)}
  .tk .note-btn:hover{background:rgba(255,255,255,.22)}
  .tk .band{animation:growBand .6s ease both;transform-origin:center bottom}
  .tk .draw{animation:drawLine 1.5s cubic-bezier(.3,.8,.4,1) both}
  .tk .pt{animation:fadeUp .4s ease both}
  @keyframes growBand{from{opacity:0;transform:scaleY(.6)}to{opacity:1;transform:none}}
  @keyframes drawLine{from{stroke-dashoffset:900}to{stroke-dashoffset:0}}
  @keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){
    .tk .band,.tk .draw,.tk .pt{animation:none}
    .tk .fig-g,.tk .bar-fill{transition:none}
  }