/* ビジュアルタイマー: 一画面で完結（ページはスクロールしない。設定は右端のアイコンから開くポップアップ） */
:root { --pt-accent: #2563eb; --pt-accent-hover: #1d4ed8; --pt-accent-soft: #eff6ff; --vt-edge: #b4bfd1; --vt-done: #dc2626; --vt-al-bg: #fef2f2; --vt-al-bd: #fca5a5; --vt-al-tx: #991b1b; --vt-plus: #15803d; --vt-minus: #b91c1c; }
html[data-theme="dark"] { --pt-accent: #60a5fa; --pt-accent-hover: #93c5fd; --pt-accent-soft: #1e3a5f; --vt-done: #ef4444; --vt-al-bg: #3b1212; --vt-al-bd: #7f1d1d; --vt-al-tx: #fecaca; --vt-edge: #4b5563; --vt-plus: #4ade80; --vt-minus: #f87171; }
html { height: 100%; }
body { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
.vt-head { gap: 0.6rem; }
.vt-h1 { flex: 1; margin: 0; font-size: 1.05rem; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt-head-r { display: flex; gap: 0.5rem; flex-shrink: 0; }
.vt-head .backmenu-button, .vt-head .help-btn { padding: 0.45rem 0.9rem; border: 1.5px solid var(--border); font-size: 0.88rem; color: var(--text); }
.vt-head .backmenu-button:hover, .vt-head .help-btn:hover { border-color: var(--pt-accent); color: var(--pt-accent); }
.vt-app { flex: 1; min-height: 0; width: 100%; display: flex; position: relative; }
.vt-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem; }
.vt-status { flex: none; }
.vt-status > [hidden] { display: none; }
.vt-status .vt-pending { margin: 0 0 0.4rem; }

.vt-note-top { margin: 0 0 0.5rem; }

/* アイコンレール（右端）と、アイコンから左へ開くポップアップ */
.vt-rail { --rb: 2.75rem; --rw: 4.5rem; flex: none; width: var(--rw); box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 0.7rem; padding: 0.75rem 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; z-index: 41; }
.vt-rail::-webkit-scrollbar { display: none; }
.vt-rail-b { appearance: none; position: relative; flex: none; width: var(--rb); height: var(--rb); padding: 0; font: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text-sub); transition: background-color 0.15s, color 0.15s, border-color 0.15s; }
.vt-rail-b svg { display: block; flex: none; width: 1.3rem; height: 1.3rem; }
.vt-rail-b:hover { color: var(--pt-accent); border-color: var(--pt-accent); }
.vt-rail-b:focus-visible { outline: 2px solid var(--pt-accent); outline-offset: 2px; }
.vt-rail-b[aria-expanded="true"] { color: #fff; background: var(--pt-accent); border-color: var(--pt-accent); }
html[data-theme="dark"] .vt-rail-b[aria-expanded="true"] { color: #0f172a; }
@media (max-height: 660px) { .vt-rail { --rb: 2.4rem; gap: 0.45rem; padding: 0.5rem 0; } }

.vt-pop { position: absolute; z-index: 40; right: calc(4.5rem + 6px); top: 8px; width: min(22rem, calc(100% - 4.5rem - 18px)); max-height: calc(100% - 16px); box-sizing: border-box; display: flex; flex-direction: column; background: var(--surface); color: var(--text); border: 1px solid var(--vt-edge); border-radius: var(--vt-rc, var(--pt-r)); }
.vt-pop[hidden] { display: none; }
.vt-pop[data-k="guide"] { width: min(34rem, calc(100% - 4.5rem - 18px)); }
@media (prefers-reduced-motion: reduce) { .vt-rail-b { transition: none; } }
.vt-pop-h { flex: none; display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.5rem 0.55rem 1rem; border-bottom: 1px solid var(--border); }
.vt-pop-t { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 0.6rem; }
.vt-pop-n { flex: none; font-weight: 700; font-size: 0.98rem; }
.vt-pop-st { min-width: 0; font-size: 0.78rem; color: var(--text-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt-pop-x { appearance: none; flex: none; width: 2rem; height: 2rem; font: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; border: 0; border-radius: var(--pt-r); background: transparent; color: var(--text-sub); }
.vt-pop-x:hover { background: var(--pt-accent-soft); color: var(--text); }
.vt-pop-x:focus-visible { outline: 2px solid var(--pt-accent); outline-offset: 1px; }
.vt-pop-b { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0.8rem 1rem 1rem; }
.vt-pop-guide { padding: 0 0 0.5rem; }
.vt-pop-guide .seo-guide { margin: 0; border: 0; padding: 0 1rem; }
.vt-pop.is-above { right: auto; }
.vt-pop.is-above[data-k="time"] { width: min(30rem, calc(100% - 4.5rem - 18px)); }
.vt-pop.is-above .vt-time-more { display: none; }
html.pt-fs-lock .vt-rail, html.pt-fs-lock .vt-pop { display: none; }

.vt-card {
  --vt: var(--pt-accent);
  --vt-track: var(--border);
  position: relative; flex: 1 1 0; min-height: 0; margin: 0;
  display: flex; flex-direction: column; align-items: stretch; justify-content: center; padding: 0.8rem 1rem 1rem;
}
.vt-card[data-colors="on"][data-phase="ok"] { --vt: var(--vt-ok, #16a34a); }
.vt-card[data-colors="on"][data-phase="warn"] { --vt: var(--vt-warn, #d97706); }
.vt-card[data-colors="on"][data-phase="danger"],
.vt-card[data-phase="done"] { --vt: var(--vt-done); }
.vt-card[data-phase="done"] .vt-svg #track { fill: var(--vt-done); opacity: 1; }
.vt-card[data-phase="done"][data-style="ring"] .vt-svg #track { fill: none; stroke: var(--vt-done); opacity: 1; }
.vt-card[data-phase="done"] .vt-bar { background: var(--vt-done); border-color: var(--vt-done); }

.vt-title { flex: none; text-align: center; font-weight: 700; font-size: clamp(1.2rem, 5vh, 2.4rem); line-height: 1.25; margin: 0 0 0.4rem; color: var(--text); overflow-wrap: anywhere; }
.vt-title[hidden] { display: none; }

.vt-flow { flex: none; display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: center; margin: 0 0 0.5rem; }
.vt-flow[hidden] { display: none; }
.vt-flow span { font-size: 0.82rem; padding: 0.2rem 0.6rem; border: 1px solid var(--border); border-radius: var(--pt-r); color: var(--text-sub); background: var(--surface); }
.vt-flow span.is-now { border-color: var(--pt-accent); color: var(--pt-accent); background: var(--pt-accent-soft, #eff6ff); font-weight: 700; }
.vt-flow span.is-past { text-decoration: line-through; opacity: 0.6; }

.vt-stage { flex: 1 1 0; min-height: 0; display: grid; place-items: center; width: 100%; padding: 0.25rem; }
.vt-stage.can-dial { cursor: pointer; touch-action: none; }
.vt-svg { height: 100%; width: auto; aspect-ratio: 1; max-width: 100%; max-height: 100%; min-height: 0; }
.vt-svg #track { fill: var(--vt-track); stroke: none; opacity: 0.55; }
.vt-svg #arc { fill: var(--vt); stroke: none; }
.vt-card[data-style="ring"] .vt-svg #track { fill: none; stroke: var(--vt-track); stroke-width: 12; opacity: 0.7; }
.vt-card[data-style="ring"] .vt-svg #arc { fill: none; stroke: var(--vt); stroke-width: 12; stroke-linecap: butt; }
.vt-card[data-style="bar"] .vt-svg { display: none; }
.vt-card:not([data-style="bar"]) .vt-bar { display: none; }

.vt-bar { width: 100%; height: clamp(3rem, 16vh, 7rem); border-radius: var(--pt-r); background: var(--vt-track); overflow: hidden; border: 1px solid var(--border); box-sizing: border-box; }
.vt-bar i { display: block; height: 100%; width: 100%; background: var(--vt); transform-origin: 0 50%; transform: scaleX(1); }
.vt-card[data-style="bar"] .vt-stage { flex: 0 0 auto; }

.vt-digits { text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; flex: none; font-size: clamp(2.6rem, min(15vh, 16vw), 7rem); line-height: 1.1; margin-top: 0.2rem; color: var(--text); text-decoration-thickness: 0.06em; text-underline-offset: 0.1em; }
.vt-card[data-digits="off"] .vt-digits { display: none; }
.vt-card[data-phase="done"] .vt-digits { color: var(--vt-done); }
.vt-card[data-colors="on"][data-phase="warn"] .vt-digits { text-decoration-line: underline; text-decoration-style: solid; }
.vt-card[data-colors="on"][data-phase="danger"] .vt-digits { text-decoration-line: underline; text-decoration-style: double; }
.vt-sub { flex: none; text-align: center; min-height: 1.4rem; color: var(--text-sub); font-size: 0.95rem; margin-bottom: 0.4rem; }
.vt-card[data-phase="done"] .vt-sub { color: var(--vt-done); font-weight: 700; }
.vt-card.has-alert .vt-sub { display: none; }

.vt-actions { flex: none; justify-content: center; margin-top: 0; }
.vt-actions .btn[hidden] { display: none; }
.vt-start { min-width: 9rem; }

.vt-card.is-flash .vt-stage, .vt-card.is-flash .vt-digits { animation: vt-blink 1.4s ease-in-out infinite; }
@keyframes vt-blink { 50% { opacity: 0.45; } }
html[data-performance="low"] .vt-card.is-flash .vt-stage,
html[data-performance="low"] .vt-card.is-flash .vt-digits { animation: none; }

/* 時間になったとき（タイマーの画面はそのまま。赤い帯で知らせる） */
.vt-alert {
  flex: none; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem 1rem;
  margin: 0.35rem 0 0.5rem; padding: 0.6rem 0.9rem; background: var(--vt-al-bg); border: 1px solid var(--vt-al-bd); border-radius: var(--vt-rc, var(--pt-r)); color: var(--vt-al-tx);
}
.vt-alert[hidden] { display: none; }
.vt-alert-m { display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; }
.vt-alert-t { font-weight: 700; font-size: 1.5rem; line-height: 1.2; color: var(--vt-done); }
.vt-alert-s { font-size: 0.9rem; overflow-wrap: anywhere; }
.vt-alert-s:empty { display: none; }
.vt-alert-b { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
.vt-alert .vt-stop, .vt-alert .vt-stop:hover:not(:disabled) { background: var(--vt-done); border-color: var(--vt-done); color: #fff; }
.vt-alert .vt-stop:hover:not(:disabled) { filter: brightness(0.92); }
.pt-fs .vt-alert { margin: 0 auto 0.8rem; padding: 0.8rem 1.4rem; gap: 0.5rem 1.6rem; }
.pt-fs .vt-alert-t { font-size: clamp(1.8rem, 6vh, 3.6rem); }
.pt-fs .vt-alert-s { font-size: clamp(1rem, 3vh, 1.6rem); }
.pt-fs .vt-alert .btn { font-size: clamp(1rem, 3vh, 1.5rem); padding: 0.7rem 1.4rem; }

/* 全画面を終了するボタン（全画面のときだけ） */
.vt-fs-exit {
  display: none; position: absolute; z-index: 4; margin: 0; cursor: pointer;
  font: inherit; font-size: 0.95rem; font-weight: 700; padding: 0.55rem 0.9rem; border-radius: var(--pt-r);
  border: 1.5px solid var(--border); background: var(--surface); color: var(--text); opacity: 0.85;
}
.vt-fs-exit:hover { border-color: var(--pt-accent); color: var(--pt-accent); opacity: 1; }
.pt-fs[data-fsbtn="on"] .vt-fs-exit, .pt-fs.peek .vt-fs-exit { display: block; }
.pt-fs[data-fspos="tl"] .vt-fs-exit { top: 0.6rem; left: 0.6rem; }
.pt-fs[data-fspos="tr"] .vt-fs-exit { top: 0.6rem; right: 0.6rem; }
.pt-fs[data-fspos="bl"] .vt-fs-exit { bottom: 0.6rem; left: 0.6rem; }
.pt-fs[data-fspos="br"] .vt-fs-exit { bottom: 0.6rem; right: 0.6rem; }
.pt-fs[data-fstap="on"] { cursor: pointer; }

/* 全画面: 図と数字だけ */
.pt-fs.pt-fs .vt-actions, .pt-fs.pt-fs .vt-sub, .pt-fs.pt-fs .vt-flow { display: none; }
.pt-fs.pt-fs[data-fstitle="off"] .vt-title { display: none; }
.pt-fs.pt-fs .vt-title { font-size: clamp(1.6rem, 7vh, 4.5rem); margin: 0.2rem 0 0.2rem; flex: none; }
.pt-fs.pt-fs .vt-stage { flex: 1 1 0; min-height: 0; height: auto; padding: 0.5rem; }
.pt-fs.pt-fs[data-style="bar"] .vt-stage { flex: 0 0 auto; }
.pt-fs[data-style="bar"] .vt-bar { height: 22vh; }
.pt-fs .vt-digits { font-size: clamp(2.6rem, min(22vh, 18vw), 16rem); margin-top: 0; }
.vt-card.pt-fs.pt-fs { overflow: hidden; overflow: clip; }
.pt-fs .vt-stage, .pt-fs .vt-digits { min-width: 0; }
.pt-fs[data-digits="off"] .vt-stage { flex: 1 1 0; }

/* 小窓（Picture-in-Picture）: 図・数字・開始とリセットだけ */
.vt-card.in-pip { margin: 0; border: 0; border-radius: 0; box-shadow: none; min-height: 100vh; box-sizing: border-box; padding: 0.6rem 0.8rem; justify-content: center; }
.vt-card.in-pip .vt-stage { height: min(60vw, 55vh); }
.vt-card.in-pip[data-style="bar"] .vt-stage { height: 22vh; }
.vt-card.in-pip .vt-digits { font-size: clamp(2.2rem, 16vw, 6rem); margin-top: 0.2rem; }
.vt-card.in-pip .vt-sub, .vt-card.in-pip .vt-flow, .vt-card.in-pip .vt-fs-exit { display: none; }
.vt-card.in-pip .vt-title { font-size: clamp(1rem, 5vw, 1.8rem); margin-bottom: 0.2rem; }
.vt-card.in-pip .vt-actions .btn { flex: 1 1 auto; padding: 0.45rem 0.7rem; font-size: 0.85rem; min-width: 0; }
.vt-card.in-pip #add60, .vt-card.in-pip #add10, .vt-card.in-pip #sub10, .vt-card.in-pip #pip, .vt-card.in-pip #fs, .vt-card.in-pip #skip { display: none; }
.vt-holder { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem; text-align: center; margin: 0; }
.vt-holder[hidden] { display: none; }

.vt-presets { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.8rem; }
.vt-adj { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; margin-bottom: 0.9rem; }
.vt-adj .btn { padding-left: 0.2rem; padding-right: 0.2rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vt-card:not(.in-pip):not(.pt-fs) .vt-digits { cursor: pointer; }
.vt-card:not(.in-pip):not(.pt-fs) .vt-digits:hover { color: var(--pt-accent); }
.vt-presets .btn[aria-pressed="true"] { background: var(--pt-accent-soft, #eff6ff); border-color: var(--pt-accent); color: var(--pt-accent); }
.vt-inputs { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.vt-inputs[hidden] { display: none; }
.vt-inputs .form-group { margin: 0; width: 5.5rem; }
.vt-pop .vt-inputs { gap: 0.6rem; }
.vt-pop .vt-inputs .form-group { width: 4.6rem; }
#thr-sec .form-group { width: 9rem; }
.vt-style { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.vt-style > span { font-size: 0.85rem; color: var(--text-sub); }
.vt-style[hidden] { display: none; }
.vt-row { margin-top: 0.8rem; }
.vt-until-row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.vt-until-row input { width: 9rem; }
.vt-pending { margin-top: 0.6rem; background: var(--surface); padding: 0.5rem 0.7rem; border: 1px solid var(--vt-edge); border-radius: var(--vt-rc, var(--pt-r)); font-size: 0.88rem; display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.vt-pending[hidden] { display: none; }
.vt-note { margin-top: 0.4rem; font-size: 0.82rem; color: var(--text-sub); }
.vt-note[hidden] { display: none; }

.vt-mine { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin-top: 0.7rem; }
.vt-mine-n { font-size: 0.82rem; color: var(--text-sub); }
.vt-mylist { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.vt-my { display: inline-flex; border: 1.5px solid var(--border); border-radius: var(--pt-r); overflow: hidden; background: var(--surface); }
.vt-my button { font: inherit; font-size: 0.88rem; border: 0; background: transparent; color: var(--text); padding: 0.4rem 0.7rem; cursor: pointer; }
.vt-my button:hover { background: var(--pt-accent-soft, #eff6ff); color: var(--pt-accent); }
.vt-my .vt-my-x { border-left: 1px solid var(--border); padding: 0.4rem 0.55rem; color: var(--text-sub); }
.vt-my small { color: var(--text-sub); margin-left: 0.3rem; }

.vt-steps { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.7rem; }
.vt-step { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr) 4rem auto; gap: 0.45rem; align-items: center; }
.vt-step-n { text-align: center; color: var(--text-sub); font-size: 0.85rem; }
.vt-step input { margin: 0; min-width: 0; }
.vt-step .btn { padding: 0.45rem 0.7rem; }
.vt-steps.is-locked { opacity: 0.6; pointer-events: none; }

.vt-snd { display: flex; gap: 1rem; flex-wrap: wrap; margin: 0.4rem 0 0.8rem; }
.vt-snd .form-group { margin: 0; }
.vt-snd select { min-width: 9rem; }
.vt-vol { min-width: 12rem; flex: 1 1 12rem; }
.vt-vol input[type=range] { width: 100%; padding: 0; }
.vt-vol output { color: var(--text-sub); font-weight: 400; margin-left: 0.3rem; }
#snd-opts.is-off, #thr-row.is-off, #fs-pos-row.is-off, #animstyle-row.is-off { opacity: 0.5; }
#snd-test { margin-top: 0.4rem; }

@media (max-width: 860px) {
  .vt-rail { --rb: 2.5rem; --rw: 3.6rem; }
  .vt-pop { right: calc(3.6rem + 4px); width: min(22rem, calc(100% - 3.6rem - 14px)); }
  .vt-pop[data-k="guide"] { width: min(34rem, calc(100% - 3.6rem - 14px)); }
  .vt-main { padding: 0.5rem; }
}
@media (max-width: 560px) {
  .vt-actions .btn { flex: 1 1 22%; padding-left: 0.4rem; padding-right: 0.4rem; }
  .vt-start { flex-basis: 100%; }
  .vt-h1 { font-size: 0.95rem; }
  .vt-head-r { gap: 0.35rem; }
  .vt-actions .btn { white-space: nowrap; }
  .vt-head-r .help-btn { padding-left: 0.6rem; padding-right: 0.6rem; font-size: 0.8rem; }
  .vt-head .backmenu-button { padding-left: 0.55rem; padding-right: 0.55rem; font-size: 0.8rem; }
}
@media (max-width: 440px) {
  .vt-h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .vt-head > .vt-head-r { margin-left: auto; }
}

/* ＋は緑、－は赤。色は文字だけに付け、ボタンの塗りや枠は他と同じにする */
.btn.btn-secondary.vt-plus { color: var(--vt-plus); }
.btn.btn-secondary.vt-plus:hover:not(:disabled) { color: var(--vt-plus); border-color: var(--vt-plus); }
.btn.btn-secondary.vt-minus { color: var(--vt-minus); }
.btn.btn-secondary.vt-minus:hover:not(:disabled) { color: var(--vt-minus); border-color: var(--vt-minus); }

/* トースト通知（ヘッダーの下に出て、下の線が縮んで消えるまでの時間を示す） */
.vt-toasts { position: fixed; left: 0; right: 0; top: 4.6rem; z-index: 3000; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 0 1rem; pointer-events: none; }
@media (min-width: 760px) { .vt-toasts { align-items: flex-start; padding-left: 1.5rem; } }
.vt-toast { --tc: var(--pt-accent); position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: 0.5rem; max-width: min(32rem, 100%); box-sizing: border-box; padding: 0.7rem 0.5rem 0.85rem 0.9rem; background: var(--surface); color: var(--text); border: 1px solid var(--vt-edge); border-radius: var(--vt-rc, var(--pt-r)); font-size: 0.92rem; line-height: 1.5; pointer-events: auto; }
.vt-toast.ok { --tc: var(--vt-plus); }
.vt-toast.warn { --tc: #b45309; }
html[data-theme="dark"] .vt-toast.warn { --tc: #fbbf24; }
.vt-toast.error { --tc: var(--vt-minus); }
.vt-toast-t { flex: 1; min-width: 0; white-space: pre-line; overflow-wrap: anywhere; }
.vt-toast-x { appearance: none; flex: none; width: 1.7rem; height: 1.7rem; margin: -0.15rem 0 0 0; padding: 0; border: 0; border-radius: var(--pt-r); background: transparent; color: var(--text-sub); font: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.vt-toast-x:hover { color: var(--text); }
.vt-toast-x:focus-visible { outline: 2px solid var(--pt-accent); outline-offset: 1px; }
.vt-toast-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--tc); transform-origin: left center; animation: vt-toast-bar var(--td, 4500ms) linear forwards; }
.vt-toast:hover .vt-toast-bar, .vt-toast:focus-within .vt-toast-bar { animation-play-state: paused; }
@keyframes vt-toast-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ---------- 動き（設定「動きをつける」と軽量モードで切れる） ---------- */
/* ポップアップは動かさず、押したボタンの位置から円形に広がるように現れる（--ox/--oy/--or はJSが設定） */
@keyframes vt-pop-in { from { clip-path: circle(0 at var(--ox, 100%) var(--oy, 50%)); } to { clip-path: circle(var(--or, 150vmax) at var(--ox, 100%) var(--oy, 50%)); } }
@keyframes vt-pop-out { from { clip-path: circle(var(--or, 150vmax) at var(--ox, 100%) var(--oy, 50%)); } to { clip-path: circle(0 at var(--ox, 100%) var(--oy, 50%)); } }
@keyframes vt-pop-in-dir { from { clip-path: inset(var(--ci, 0 0 0 100%)); } to { clip-path: inset(0 0 0 0); } }
@keyframes vt-pop-out-dir { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(var(--ci, 0 0 0 100%)); } }
@keyframes vt-wipe-down { from { clip-path: inset(0 0 100% 0); opacity: 0.4; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes vt-wipe-up { from { clip-path: inset(0 0 0 0); opacity: 1; } to { clip-path: inset(0 0 100% 0); opacity: 0.4; } }
@keyframes vt-done-pop { 0% { transform: scale(1); } 35% { transform: scale(1.07); } 100% { transform: scale(1); } }
@keyframes vt-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes vt-rise { from { opacity: 0; } to { opacity: 1; } }
@keyframes vt-paused { 50% { opacity: 0.4; } }
@keyframes vt-beat { 50% { transform: scale(1.04); } }

html[data-vt-anim="on"] .vt-pop:not([hidden]) { animation: vt-pop-in 0.34s cubic-bezier(0.25, 0.8, 0.25, 1); }
html[data-vt-anim="on"] .vt-pop.is-closing { animation: vt-pop-out 0.2s ease-in forwards; pointer-events: none; }
html[data-vt-anim="on"][data-vt-animstyle="dir"] .vt-pop:not([hidden]) { animation-name: vt-pop-in-dir; }
html[data-vt-anim="on"][data-vt-animstyle="dir"] .vt-pop.is-closing { animation-name: vt-pop-out-dir; }
html[data-vt-anim="on"] .vt-toast { animation: vt-wipe-down 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
html[data-vt-anim="on"] .vt-toast.is-out { animation: vt-wipe-up 0.2s ease-in forwards; pointer-events: none; }
html[data-vt-anim="on"] .vt-rail-b svg { transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
html[data-vt-anim="on"] .vt-rail-b[aria-expanded="true"] svg { transform: scale(1.12) rotate(-6deg); }
html[data-vt-anim="on"] .vt-rail-b:active { transform: scale(0.92); }
html[data-vt-anim="on"] .vt-rail-b { transition: background-color 0.15s, color 0.15s, border-color 0.15s, transform 0.12s; }
html[data-vt-anim="on"] .vt-pending:not([hidden]),
html[data-vt-anim="on"] .vt-note:not([hidden]) { animation: vt-rise 0.25s ease-out; }
html[data-vt-anim="on"] .vt-card .btn { transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.12s; }
html[data-vt-anim="on"] .vt-card .btn:active:not(:disabled) { transform: scale(0.96); }
html[data-vt-anim="on"] .vt-adj .btn:active:not(:disabled),
html[data-vt-anim="on"] .vt-presets .btn:active:not(:disabled) { transform: scale(0.94); }
html.vt-tt, html.vt-tt * { transition: background-color 0.35s, color 0.35s, border-color 0.35s, fill 0.35s, stroke 0.35s, box-shadow 0.35s !important; }

.vt-card[data-anim="on"] .vt-svg #arc,
.vt-card[data-anim="on"] .vt-svg #track { transition: fill 0.4s, stroke 0.4s, opacity 0.4s; }
.vt-card[data-anim="on"] .vt-bar,
.vt-card[data-anim="on"] .vt-bar i { transition: background-color 0.4s, border-color 0.4s; }
.vt-card[data-anim="on"] .vt-digits { transition: color 0.4s; }
.vt-card[data-anim="on"] .vt-flow span { transition: background-color 0.25s, border-color 0.25s, color 0.25s, opacity 0.25s; }
.vt-card[data-anim="on"] .vt-flow span.is-now { animation: vt-fade-in 0.35s ease-out; }
.vt-card[data-anim="on"] .vt-alert:not([hidden]) { animation: vt-wipe-down 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
.vt-card[data-anim="on"][data-phase="done"] .vt-stage { animation: vt-done-pop 0.6s ease-out; }
.vt-card[data-anim="on"][data-phase="done"] .vt-digits { animation: vt-done-pop 0.6s ease-out; }
.vt-card[data-anim="on"][data-state="paused"] .vt-digits { animation: vt-paused 1.8s ease-in-out infinite; }
.vt-card[data-anim="on"][data-colors="on"][data-state="running"][data-phase="danger"] .vt-digits { animation: vt-beat 1s ease-in-out infinite; }
.vt-card[data-anim="on"].is-flash[data-phase="done"] .vt-digits { animation: vt-done-pop 0.6s ease-out, vt-blink 1.4s ease-in-out 0.6s infinite; }
.vt-card[data-anim="on"].is-flash[data-phase="done"] .vt-stage { animation: vt-done-pop 0.6s ease-out, vt-blink 1.4s ease-in-out 0.6s infinite; }
html[data-vt-anim="on"] .pt-fs { animation: vt-fade-in 0.3s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .vt-card[data-anim="on"][data-phase="done"] .vt-stage, .vt-card[data-anim="on"][data-phase="done"] .vt-digits,
  .vt-card[data-anim="on"][data-colors="on"][data-state="running"][data-phase="danger"] .vt-digits { animation: none; }
  html[data-vt-anim="on"] .vt-rail-b[aria-expanded="true"] svg { transform: none; }
}

/* 文字の選択はできないようにする（入力欄の中は除く） */
body, .vt-card { -webkit-user-select: none; user-select: none; }
body input, body textarea, .vt-card input, .vt-card textarea { -webkit-user-select: text; user-select: text; }