@property --vp{syntax:"<integer>";inherits:true;initial-value:0}@layer lab{.vt-scroller{timeline-scope:--view;overscroll-behavior:contain;border:2px dashed var(--accent-line);background:var(--panel);border-radius:12px;height:300px;overflow-y:auto}.vt-barwrap{z-index:5;background:var(--panel);border-bottom:1px solid var(--accent-pale);padding:10px 14px;position:sticky;top:0}.vt-cap{font:600 11px var(--mono);color:var(--muted);margin:0 0 8px}.vt-track{background:var(--accent-soft);border-radius:3px;height:6px}.vt-bar{background:var(--good);height:6px;width:calc(1% * var(--vp));--vp:0;border-radius:3px;animation:linear vt-fill;animation-timeline:--view;position:relative}.vt-bar:after{font:600 12px var(--mono);color:var(--good);counter-reset:vp var(--vp);counter-set:vp var(--vp);content:counter(vp) "%";position:absolute;top:0;right:-4px;translate:100% -50%}@keyframes vt-fill{to{--vp:100}}.vt-spacer{text-align:center;height:280px;color:var(--muted);font:600 13px var(--mono);justify-content:center;align-items:center;padding:0 16px;display:flex}.vt-subject{text-align:center;color:#fff;line-height:1.4;font-family:var(--display);box-shadow:var(--shadow);background:linear-gradient(135deg, var(--accent), var(--accent-2));view-timeline-name:--view;view-timeline-axis:block;border-radius:16px;justify-content:center;align-items:center;margin:0 16px;font-size:18px;display:flex}.rkf-scroller{overscroll-behavior:contain;border:2px dashed var(--accent-line);background:var(--panel);border-radius:12px;height:300px;overflow-y:auto}.rkf-spacer{height:260px;color:var(--muted);font:600 13px var(--mono);justify-content:center;align-items:center;display:flex}.rkf-box{text-align:center;color:#fff;height:120px;line-height:1.4;font-family:var(--display);box-shadow:var(--shadow);view-timeline-name:--rkf;view-timeline-axis:block;background:linear-gradient(135deg,#559b24,#188038);border-radius:16px;justify-content:center;align-items:center;margin:0 16px;font-weight:600;animation-fill-mode:both;animation-timeline:--rkf;display:flex}.rkf-box.rise{animation-name:rkf-rise}.rkf-box.fade{animation-name:rkf-fade}.rkf-box.slide{animation-name:rkf-slide}@keyframes rkf-rise{entry 0%{opacity:0;transform:translateY(40px)scale(.85)}entry 100%{opacity:1;transform:none}exit 0%{opacity:1;transform:none}exit 100%{opacity:0;transform:translateY(-40px)scale(.85)}}@keyframes rkf-fade{entry 0%{opacity:0}entry 100%{opacity:1}exit 0%{opacity:1}exit 100%{opacity:0}}@keyframes rkf-slide{entry 0%{opacity:0;transform:translate(-60px)}entry 100%{opacity:1;transform:none}exit 0%{opacity:1;transform:none}exit 100%{opacity:0;transform:translate(60px)}}.spring-scroller{overscroll-behavior:contain;border:2px dashed var(--accent-line);background:var(--panel);border-radius:12px;height:300px;overflow-y:auto}.spring-spacer{height:260px;color:var(--muted);font:600 13px var(--mono);justify-content:center;align-items:center;display:flex}@keyframes spring-in{0%{opacity:0;transform:translateY(60px)scale(.6)}to{opacity:1;transform:translateY(0)scale(1)}}.spring-box{text-align:center;opacity:1;color:#fff;height:120px;line-height:1.4;font-family:var(--display);box-shadow:var(--shadow);view-timeline-name:--spring;view-timeline-axis:block;background:linear-gradient(135deg,#7c3aed,#db2777);border-radius:16px;justify-content:center;align-items:center;margin:0 16px;font-weight:600;animation-name:spring-in;animation-timeline:--spring;animation-range:cover cover 45%;display:flex}.seg{font:600 12px var(--mono);color:var(--muted);align-items:center;gap:6px;display:inline-flex}.seg select{font:600 12px var(--mono);border:1px solid var(--line-strong);background:var(--panel);color:var(--ink);border-radius:8px;padding:3px 6px}.chk{font:600 12px var(--mono);color:var(--muted);cursor:pointer;align-items:center;gap:6px;display:inline-flex}}
