.tim-page-header{text-align:center;max-width:1000px;margin:0 auto;padding:24px 16px 8px}.tim-layout{flex-direction:column;gap:24px;max-width:1000px;margin:0 auto;padding:0 16px;display:flex}.tim-top-row{flex-wrap:wrap;align-items:flex-start;gap:16px;display:flex}.tim-presets{flex-wrap:wrap;flex:1;gap:8px;display:flex}.tim-chip{border:1px solid var(--swp-border);border-radius:var(--r-pill);background:var(--swp-surface);min-height:44px;color:var(--swp-ink-muted);cursor:pointer;align-items:center;padding:8px 14px;font-size:13px;font-weight:600;transition:background .15s;display:flex}.tim-chip--active,.tim-chip[aria-pressed=true]{background:var(--color-primary);color:var(--color-primary-content);border-color:var(--color-primary)}.tim-speed-row{align-items:center;gap:6px;display:flex}.tim-speed-label{color:var(--swp-ink-muted);font-size:12px}.tim-speed-btn{border:1px solid var(--swp-border);border-radius:var(--r-pill);min-height:44px;font-size:13px;font-family:var(--font-mono);background:var(--swp-surface);cursor:pointer;padding:6px 12px}.tim-speed-btn--active,.tim-speed-btn[aria-pressed=true]{background:var(--swp-surface-alt);border-color:var(--swp-ink-muted);font-weight:700}.tim-run-btn{border-radius:var(--r-pill);background:var(--color-primary);min-height:44px;color:var(--color-primary-content);cursor:pointer;white-space:nowrap;border:none;padding:10px 28px;font-size:14px;font-weight:700}.tim-run-btn:disabled{opacity:.5;cursor:not-allowed}.tim-code-display{background:var(--swp-surface-code);border:1px solid var(--swp-border);border-radius:var(--r-lg);font-family:var(--font-mono);white-space:pre;max-height:180px;margin:0;padding:16px 20px;font-size:13px;line-height:1.6;overflow:auto}.tim-main-area{grid-template-columns:1fr 240px;align-items:start;gap:20px;display:grid}.tim-timeline-wrap{border:1px solid var(--swp-border);border-radius:var(--r-lg);min-height:200px;overflow:hidden}.tim-time-axis{background:var(--swp-surface-alt);border-bottom:1px solid var(--swp-border);height:24px;padding-left:160px;display:flex;position:relative}.tim-time-tick{font-size:10px;font-family:var(--font-mono);color:var(--swp-ink-muted);position:absolute;top:4px;transform:translate(-50%)}.tim-track-list{margin:0;padding:0;list-style:none}.tim-track{border-bottom:1px solid var(--swp-border);cursor:pointer;align-items:center;height:40px;display:flex}.tim-track:last-child{border-bottom:none}.tim-track:hover{background:var(--swp-surface-alt)}.tim-track-label{width:160px;color:var(--swp-ink);white-space:nowrap;text-overflow:ellipsis;flex-shrink:0;padding:0 12px;font-size:12px;overflow:hidden}.tim-track-bar-area{flex:1;height:100%;position:relative}.tim-bar{cursor:pointer;border-radius:4px;min-width:8px;height:20px;transition:opacity .15s;position:absolute;top:50%;transform:translateY(-50%)}.tim-bar--pending{background:#e2e8f0}.tim-bar--running{background:#5eead4;animation:1s infinite tim-pulse}.tim-bar--completed{background:#14b8a6}.tim-bar--error{background:#f87171}.tim-bar--selected{outline:2px solid var(--swp-ink);outline-offset:1px}@keyframes tim-pulse{0%,to{opacity:1}50%{opacity:.6}}.tim-detail-panel{border:1px solid var(--swp-border);border-radius:var(--r-lg);background:var(--swp-surface);flex-direction:column;gap:12px;min-height:200px;padding:16px;display:flex}.tim-detail-empty{color:var(--swp-ink-muted);text-align:center;margin-top:40px;font-size:13px}.tim-detail-title{color:var(--swp-ink);word-break:break-all;font-size:14px;font-weight:700}.tim-detail-timing{font-family:var(--font-mono);color:var(--swp-ink-muted);font-size:12px}.tim-detail-body{color:var(--swp-ink);font-size:13px;line-height:1.6;font-family:var(--font-mono);background:var(--swp-surface-code);border-radius:var(--r-md);white-space:pre-wrap;padding:10px 12px}.tim-legend{flex-wrap:wrap;gap:12px;display:flex}.tim-legend-item{color:var(--swp-ink-muted);align-items:center;gap:6px;font-size:12px;display:flex}.tim-legend-dot{border-radius:3px;flex-shrink:0;width:12px;height:12px}.tim-empty-state{min-height:160px;color:var(--swp-ink-muted);justify-content:center;align-items:center;font-size:13px;display:flex}.tim-section-title{color:var(--swp-ink);margin:0 0 12px;font-size:16px;font-weight:700}.tim-how-to,.tim-related-section{max-width:1000px;margin:48px auto 0;padding:0 16px}.tim-steps{padding-left:1.4em}.tim-steps li{margin-bottom:8px;line-height:1.6}.tim-related-list{padding:0;list-style:none}.tim-related-list li{margin-bottom:6px}.tim-related-tools{flex-direction:column;gap:6px;display:flex}.tim-related-link{color:var(--color-primary);text-decoration:none}.tim-related-link:hover{text-decoration:underline}@media (prefers-reduced-motion:reduce){.tim-bar--running{animation:none}.tim-chip{transition:none}}@media (width<=639px){.tim-main-area{grid-template-columns:1fr}.tim-timeline-wrap{order:1}.tim-detail-panel{order:2}.tim-track-label{width:100px;padding:0 6px;font-size:10px}.tim-time-axis{padding-left:100px}.tim-top-row{flex-direction:column;gap:12px}.tim-run-btn{justify-content:center;width:100%;display:flex}.tim-code-display{max-height:120px;font-size:11px}}.tim-body-text{color:var(--swp-ink);margin:0 0 12px;font-size:15px;line-height:1.8}.tim-learning-path{color:var(--swp-ink);flex-direction:column;gap:10px;padding-left:20px;font-size:15px;line-height:1.7;display:flex}.tim-use-cases{flex-direction:column;gap:14px;margin:0;padding:0;list-style:none;display:flex}.tim-use-cases li{color:var(--swp-ink);font-size:15px;line-height:1.7}.tim-faq{margin:0}.tim-faq dt{color:var(--swp-ink);margin-top:16px;font-size:15px;font-weight:700}.tim-faq dt:first-child{margin-top:0}.tim-faq dd{color:var(--swp-ink-2);margin:6px 0 0;font-size:15px;line-height:1.7}
