.cl-demo{--cl-bg:var(--color-surface-card);--cl-line:var(--color-border);aspect-ratio:4/3;border:1px solid var(--cl-line);background:radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--color-primary) 8%, transparent), transparent 60%), var(--cl-bg);border-radius:16px;justify-content:center;align-items:center;width:100%;max-width:300px;display:flex;position:relative;overflow:hidden;box-shadow:0 1px 2px #0000000a}.cl-card{background:var(--color-surface);border:1px solid var(--cl-line);box-sizing:border-box;text-align:center;border-radius:12px;width:78%;padding:14px}.cl-title{color:var(--text-primary);font-size:.9rem;font-weight:800}.cl-sub{color:var(--text-muted);margin-top:3px;font-size:.72rem}.cl-clock{font-variant-numeric:tabular-nums;color:var(--color-success);letter-spacing:-.02em;margin:8px 0;font-size:1.9rem;font-weight:800}.cl-bar{background:var(--cl-line);border-radius:999px;height:6px;overflow:hidden}.cl-bar>i{background:var(--brand-gradient,var(--color-primary));border-radius:999px;width:40%;height:100%;animation:4s linear infinite cl-fill;display:block}.cl-pausebtn{background:var(--color-primary);color:#fff;border-radius:10px;justify-content:center;align-items:center;width:38px;height:38px;margin:12px auto 0;animation:4s ease-in-out infinite cl-press;display:flex}.cl-pill{background:color-mix(in srgb, var(--color-surface) 78%, transparent);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);color:var(--text-secondary);opacity:0;justify-content:center;align-items:center;font-weight:800;animation:4s ease-in-out infinite cl-paused;display:flex;position:absolute;inset:0}@keyframes cl-fill{0%{width:8%}45%{width:62%}55%{width:62%}to{width:62%}}@keyframes cl-press{0%,44%{transform:scale(1)}50%{transform:scale(.86)}56%,to{transform:scale(1)}}@keyframes cl-paused{0%,48%{opacity:0}58%,92%{opacity:1}to{opacity:0}}.cl-badge{background:color-mix(in srgb, var(--color-primary) 14%, transparent);color:var(--color-primary);opacity:0;border-radius:999px;margin-top:10px;padding:4px 10px;font-size:.78rem;font-weight:800;animation:3.6s ease-in-out infinite cl-badge-in;display:inline-block;transform:translateY(6px)}@keyframes cl-badge-in{0%,20%{opacity:0;transform:translateY(6px)}40%,88%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(6px)}}.cl-list{flex-direction:column;gap:6px;width:82%;display:flex}.cl-row{background:var(--color-surface);border:1px solid var(--cl-line);color:var(--text-secondary);border-radius:8px;align-items:center;gap:8px;padding:8px 10px;font-size:.76rem;font-weight:700;display:flex}.cl-row .cl-dot{border-radius:3px;flex-shrink:0;width:8px;height:8px}.cl-row.cl-warm{color:#b26a00;transform-origin:top;background:#fff7e8;border-color:#f0c67a;animation:4s ease-in-out infinite cl-warm-in;overflow:hidden}@keyframes cl-warm-in{0%,12%{opacity:0;max-height:0;margin-bottom:-6px;padding-top:0;padding-bottom:0;transform:scaleY(.6)}28%,92%{opacity:1;max-height:40px;margin-bottom:0;padding-top:8px;padding-bottom:8px;transform:scaleY(1)}to{opacity:0;max-height:0;margin-bottom:-6px;padding-top:0;padding-bottom:0;transform:scaleY(.6)}}@media (prefers-reduced-motion:reduce){.cl-bar>i,.cl-pausebtn,.cl-pill,.cl-badge,.cl-row.cl-warm{animation:none}.cl-pill{opacity:0}.cl-badge{opacity:1;transform:none}.cl-row.cl-warm{opacity:1;max-height:40px;margin-bottom:0;padding:8px 10px;transform:none}}.clf{aspect-ratio:3/4;border:1px solid var(--color-border);background:radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--color-primary) 8%, transparent), transparent 55%), var(--color-surface-card);border-radius:16px;width:100%;max-width:270px;position:relative;overflow:hidden;box-shadow:0 1px 2px #0000000d}.clf-scene{box-sizing:border-box;flex-direction:column;gap:8px;padding:14px;display:flex;position:absolute;inset:0}.clf-build{animation:12s ease-in-out infinite clf-A}.clf-run{text-align:center;justify-content:center;align-items:center;animation:12s ease-in-out infinite clf-B}@keyframes clf-A{0%,37%{opacity:1}43%,95%{opacity:0}to{opacity:1}}@keyframes clf-B{0%,39%{opacity:0}45%,93%{opacity:1}99%,to{opacity:0}}.clf-h{text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);font-size:.7rem;font-weight:800}.clf-step{background:var(--color-surface);border:1px solid var(--color-border);color:var(--text-primary);opacity:0;border-radius:9px;align-items:center;gap:8px;padding:8px 10px;font-size:.74rem;font-weight:700;animation:12s ease-out infinite clf-step-in;display:flex;transform:translateY(8px)}.clf-step small{color:var(--text-muted);font-weight:600}.clf-step .clf-ic{background:var(--brand-gradient,var(--color-primary));color:#fff;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;display:flex}@keyframes clf-step-in{0%{opacity:0;transform:translateY(8px)}12%,37%{opacity:1;transform:none}43%,to{opacity:0}}.clf-add{color:var(--color-primary);border:1px dashed color-mix(in srgb, var(--color-primary) 45%, transparent);text-align:center;border-radius:9px;margin-top:auto;padding:7px;font-size:.72rem;font-weight:800;animation:12s ease-in-out infinite clf-pulse}@keyframes clf-pulse{0%,37%{opacity:1}20%{opacity:.4}43%,to{opacity:0}}.clf-run>div{position:absolute;left:14px;right:14px}.clf-big{color:var(--color-primary);font-variant-numeric:tabular-nums;font-size:3.4rem;font-weight:800;line-height:1}.clf-name{color:var(--text-primary);font-size:1.05rem;font-weight:800}.clf-meta{color:var(--text-secondary);margin-top:4px;font-size:.8rem}.clf-rest{color:var(--color-primary);font-weight:800}.clf-clock2{color:var(--color-success);font-variant-numeric:tabular-nums;margin-top:4px;font-size:2.6rem;font-weight:800;line-height:1}.clf-w-cd{animation:12s linear infinite clf-w-cd}.clf-w-set{animation:12s linear infinite clf-w-set}.clf-w-rest{animation:12s linear infinite clf-w-rest}@keyframes clf-w-cd{0%,44%{opacity:0}47%,55%{opacity:1}58%,to{opacity:0}}@keyframes clf-w-set{0%,57%{opacity:0}60%,73%{opacity:1}76%,to{opacity:0}}@keyframes clf-w-rest{0%,74%{opacity:0}77%,90%{opacity:1}93%,to{opacity:0}}.clf-n{position:absolute;left:0;right:0}.clf-n1{animation:12s linear infinite clf-n1}.clf-n2{animation:12s linear infinite clf-n2}.clf-n3{animation:12s linear infinite clf-n3}@keyframes clf-n1{0%,46%{opacity:0}48%,50%{opacity:1}51%,to{opacity:0}}@keyframes clf-n2{0%,50%{opacity:0}51%,53%{opacity:1}54%,to{opacity:0}}@keyframes clf-n3{0%,53%{opacity:0}54%,56%{opacity:1}57%,to{opacity:0}}@media (prefers-reduced-motion:reduce){.clf-build,.clf-run,.clf-step,.clf-add,.clf-w-cd,.clf-w-set,.clf-w-rest,.clf-n1,.clf-n2,.clf-n3{animation:none}.clf-build{opacity:1}.clf-run{opacity:0}.clf-step{opacity:1;transform:none}}:root{--color-primary:#5b6af0;--color-on-primary:#fff;--color-primary-bg:#5b6af014;--color-accent:#f5641e;--color-accent-strong:#ff9e2c;--color-accent-bg:#f5641e1a;--brand-gradient:linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);--color-strava:#fc4c02;--color-success:#22a06b;--color-warning:#e07b00;--color-danger:#c00;--color-coach:#8b4513;--color-surface:#f8f8fc;--color-surface-card:#fff;--color-border:#e8e8f0;--color-border-light:#f0f0f0;--text-primary:#1a1a2e;--text-secondary:#4a4a6a;--text-muted:#767676;--text-disabled:#a0a0b8;--text-xs:.6875rem;--text-sm:.75rem;--text-base:.875rem;--text-md:1rem;--text-lg:1.125rem;--text-xl:1.375rem;--text-2xl:1.75rem;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--radius-sm:4px;--radius-md:8px;--radius-lg:10px;--radius-full:9999px;--transition-fast:.12s ease-out;--transition-base:.18s ease-out}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes skeleton-pulse{0%,to{opacity:1}50%{opacity:.4}}.skeleton{background:var(--color-border);animation:1.4s ease-in-out infinite skeleton-pulse}*{-webkit-tap-highlight-color:transparent}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}body{overscroll-behavior:none}button,a,[role=button],input,select,textarea,label,[data-pressable]{touch-action:manipulation}.app-chrome,.app-chrome *{-webkit-user-select:none;user-select:none}[data-pressable]{transition:transform .1s}[data-pressable]:active{transform:scale(.96)}main{-webkit-overflow-scrolling:touch}@media (prefers-reduced-motion:reduce){[data-pressable]{transition:none}[data-pressable]:active{transform:none}}@media (prefers-reduced-motion:no-preference){.route-enter{animation:.2s ease-out route-enter}@keyframes route-enter{0%{opacity:.4}to{opacity:1}}}.sheet-scrim{animation:.18s ease-out sheet-scrim-in}@keyframes sheet-scrim-in{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:no-preference){.sheet-panel-mobile{animation:.26s cubic-bezier(.16,1,.3,1) sheet-up}@keyframes sheet-up{0%{transform:translateY(100%)}to{transform:none}}.sheet-panel-desktop{animation:.16s ease-out sheet-pop}@keyframes sheet-pop{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}}.sk{background:linear-gradient(100deg,#d8dae6 30%,#eceef5 50%,#d8dae6 70%) 0 0/200% 100%;animation:1.3s ease-in-out infinite sk-shimmer}@keyframes sk-shimmer{to{background-position:-200% 0}}.top-progress{background:#ffffff40;height:3px;position:absolute;top:0;left:0;right:0;overflow:hidden}.top-progress:after{content:"";background:#ffffffe6;border-radius:3px;width:40%;height:100%;animation:1.1s ease-in-out infinite top-progress-slide;position:absolute;top:0}@keyframes top-progress-slide{0%{left:-40%}to{left:100%}}@media (prefers-reduced-motion:reduce){.sk{animation:none}.top-progress:after{opacity:.6;width:100%;animation:none;left:0}}.ui-btn:focus-visible,.ui-row:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.ui-btn:active:not(:disabled){transform:scale(.97)}.ui-row{border-radius:var(--radius-sm);transition:background .1s}.ui-row[role=button]:hover{background:var(--color-border-light)}.ui-row[role=button]:active{background:var(--color-border)}@media (prefers-reduced-motion:reduce){.ui-btn:active:not(:disabled){transform:none}}.ui-select:hover:not(:disabled){border-color:var(--color-primary)}.ui-select:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-color:var(--color-primary)}.ui-select:disabled{opacity:.6;cursor:not-allowed}
