/* =====================================================================
   experimentLab：記録タイマー（Ver.0.10.0）
   机の上（真上から見た図）・テープを通す（横から見た図）・1本ずつの確認・スロー再生・4本の比較・速さ
   ===================================================================== */
.exl-tm-bench{position:relative;background:#2a2825}
/* 周波数のスイッチ（1行） */
.exl-tm-hz{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;padding:6px 8px;background:#33302a;color:#f3e6c4;font-size:13.5px;font-weight:700}
.exl-tm-hz-l{margin-right:2px}
.exl-tm-hz button{min-height:40px;padding:0 12px;border-radius:999px;border:1px solid #b98d3c;background:#3c3528;color:#f6e6bf;font-weight:700;font-size:14px;cursor:pointer;touch-action:manipulation}
.exl-tm-hz button.on{background:#ffd75e;color:#2a1d08;border-color:#ffd75e}
.exl-tm-hz-t{font-weight:400;font-size:13px;color:#e8dcc0}
.exl-tm-hz.ask{box-shadow:inset 0 0 0 3px #ffd75e;animation:exl-tm-glow 1.2s ease-in-out infinite}
@keyframes exl-tm-glow{50%{box-shadow:inset 0 0 0 3px rgba(255,215,94,.25)}}
.exl-tm-board{position:relative;padding:4px}
.exl-tm-svg{display:block;width:100%;height:auto;max-height:calc(var(--exl-sh, 100dvh) - 60px);touch-action:none;user-select:none;-webkit-user-select:none;border-radius:10px}
.exl-tm-bench.vert .exl-tm-svg{height:calc(var(--exl-sh, 100dvh) - 92px);max-height:none;min-height:300px}
.exl-tm-bench.vert.tray .exl-tm-svg{height:calc(var(--exl-sh, 100dvh) - 170px)}
.exl-tm-bench.vert .exl-tm-task{position:static;display:block;margin:0 0 4px;max-width:none;border-radius:8px;white-space:normal}
.exl-tm-bench.vert .exl-tm-task[hidden]{display:none}
.exl-tm-bench.vert .exl-zoom-ask{bottom:6%;right:3%}
.exl-tm-bench.tray .exl-tm-svg{max-height:calc(var(--exl-sh, 100dvh) - 136px)}
.exl-tm-desk{fill:#c9a36b}
.exl-tm-lab{font-size:12px;font-weight:700;fill:#3a2a14}
.exl-tm-task{position:absolute;left:10px;top:10px;z-index:4;max-width:calc(100% - 20px);padding:3px 10px;border-radius:999px;background:rgba(31,52,90,.9);color:#eef4ff;font-weight:700;font-size:13px;line-height:1.4;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exl-tm-task[hidden]{display:none}
.exl-tm-bench .exl-zoom-ask{top:auto;bottom:10%}
/* 器具の一覧 */
.exl-tm-tray{display:flex;align-items:center;gap:6px;padding:6px 8px;background:#3a3428}
.exl-tm-tray[hidden]{display:none}
.exl-tm-tray-h{color:#f3e3b8;font-weight:700;font-size:13px;writing-mode:horizontal-tb}
.exl-tm-cards{display:flex;gap:6px;overflow-x:auto}
.exl-tm-card{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:92px;min-height:64px;padding:4px 6px;border-radius:10px;border:2px solid #8a6a2c;background:#fbf6e8;color:#2a2416;font-weight:700;font-size:12.5px;cursor:grab;touch-action:none}
.exl-tm-card svg{height:40px;width:auto}
.exl-tm-card.sel{border-color:#ffd75e;box-shadow:0 0 0 3px #ffd75e}
/* 記録タイマー（上から見た形） */
.exl-tm-base{fill:#c4c8cc;stroke:#6b7178;stroke-width:1.5}
.exl-tm-body{fill:#2f5f9e;stroke:#1d3c66;stroke-width:2}
.exl-tm-rail{fill:#e6e9ec}
.exl-tm-carbon{fill:#1b1b1d;stroke:#5a5d61;stroke-width:1.5}
.exl-tm-carbon2{fill:none;stroke:#3a3c40;stroke-width:1}
.exl-tm-hub{fill:#9aa0a6}
.exl-tm-disc.on{animation:exl-tm-buzz .06s linear infinite}
@keyframes exl-tm-buzz{50%{transform:translate(.6px,-.4px)}}
.exl-tm-plate{fill:#e9eef5;stroke:#9fb0c6;stroke-width:.8}
.exl-tm-pt{font-size:7.5px;fill:#24324a;font-weight:700}
.exl-tm-pt.b{font-size:9.5px;fill:#b0281c}
.exl-tm-body~.exl-tm-pt{fill:#24324a}
.exl-tm-swb{fill:#1c1e21;stroke:#000}
.exl-tm-swk{fill:#9aa0a6}
.exl-tm-swk.on{fill:#e0473c}
.exl-tm-lamp{fill:#4a3a2a}
.exl-tm-lamp.on{fill:#ff5a3a;filter:drop-shadow(0 0 3px #ff7a4a)}
.exl-tm-clamp{fill:#8a9198;stroke:#4a5056;stroke-width:1.2}
.exl-tm-clpad{fill:#c0c5ca;stroke:#4a5056}
.exl-tm-clh{stroke:#3e444a;stroke-width:4;stroke-linecap:round}
.exl-tm-clk{fill:#3e444a}
.exl-tm-ghost{opacity:.35;pointer-events:none}
.exl-tm-ghost *{stroke-dasharray:4 3}
.exl-tm-held{opacity:.85;pointer-events:none}
/* テープ */
.exl-tm-strip-r{fill:#fbf8ee;stroke:#c9bf9f;stroke-width:1}
.exl-tm-strip-r.gone{opacity:.45}
.exl-tm-strip-e{stroke:#a99c78;stroke-width:1}
.exl-tm-dots circle{fill:#1a1a1a}
.exl-tm-thit{cursor:ew-resize}
.exl-tm-pace circle{fill:rgba(255,215,94,.25);stroke:#ffcf3a;stroke-width:3;stroke-dasharray:5 4}
.exl-tm-pace text{font-size:12px;font-weight:700;fill:#7a5418;paint-order:stroke;stroke:#fff;stroke-width:3px}
/* 電源 */
.exl-tm-outbox{fill:#f4f2ec;stroke:#8a8f94;stroke-width:1.5}
.exl-tm-cord{fill:none;stroke:#2b2d30;stroke-width:3.5;stroke-linecap:round}
.exl-tm-plugb{fill:#f1f1ee;stroke:#6a6f74;stroke-width:1.5}
.exl-tm-plug.grab{cursor:grab}
.exl-tm-swhit{cursor:pointer}
/* テープを通す（横から見た図） */
.exl-tm-head{padding:6px;background:#2a2825}
.exl-tm-hsvg{display:block;width:100%;height:auto;max-height:calc(var(--exl-sh, 100dvh) - 60px);touch-action:none;border-radius:10px;user-select:none;-webkit-user-select:none}
.exl-tm-xh{color:#f3e3b8;font-weight:700;font-size:14px;padding:6px 4px}
.exl-tm-hcoil{fill:#5a6470;stroke:#30363d;stroke-width:2}
.exl-tm-hneedle{fill:#c9cdd2;stroke:#555;stroke-width:1}
.exl-tm-hcarbon{fill:#1b1b1d}
.exl-tm-hbase{fill:#a9adb2;stroke:#5a5f64;stroke-width:1.5}
.exl-tm-gap rect{fill:rgba(255,255,255,.55);stroke:#8a9198;stroke-dasharray:4 3}
.exl-tm-htape{fill:#fbf8ee;stroke:#a99c78;stroke-width:1.2}
.exl-tm-hte{cursor:grab}
.exl-tm-hl{font-size:13px;font-weight:700;fill:#2a3a44}
.exl-tm-hl.s{font-size:11.5px}
.exl-tm-hl.w{fill:#f2f5f7}
.exl-tm-hl.ok{fill:#1f6a3c;font-size:14px}
/* テープの絵（拡大・ならべる） */
.exl-tm-zbar{display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap;padding:2px 2px 4px;color:#f3e3b8;font-size:12.5px;font-weight:700}
.exl-tm-zb{display:inline-flex;align-items:center;gap:4px}
.exl-tm-zb .exl-btn{min-width:44px;min-height:40px;padding:0 10px;margin:0;font-size:20px}
.exl-tm-zb b{min-width:2.2em;text-align:center}
.exl-tm-tv{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:10px;background:#fbf6e8;padding:4px 0}
.exl-tm-tvs{display:block}
.exl-tm-tv-r{fill:#fffdf6;stroke:#c9bf9f;stroke-width:1}
.exl-tm-dot{fill:#141414}
.exl-tm-tl{font-size:13px;font-weight:700;fill:#2a2416}
.exl-tm-rl{stroke:#6b5f45;stroke-width:1}
.exl-tm-rl.s{stroke-width:.7}
.exl-tm-rn{font-size:10.5px;fill:#5a4f38}
.exl-tm-tvhit{fill:transparent;cursor:pointer}
.exl-tm-selr{fill:none;stroke:#e0473c;stroke-width:2.5}
.exl-tm-selband{fill:rgba(255,215,94,.28);pointer-events:none}
.exl-tm-brk{fill:none;stroke:#e0473c;stroke-width:2}
/* 1本ずつの確認 */
.exl-view[data-v="check"]{background:#2a2825}
.exl.is-full .exl-view[data-v="check"]{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch}
.exl-tm-chk{padding:8px;display:flex;flex-direction:column;gap:6px}
.exl-tm-chk-h{margin:0;color:#ffe7a8;font-weight:700;font-size:15px;line-height:1.45}
.exl-tm-chk-h span{display:inline-block;margin-left:8px;color:#f3e3b8;font-weight:400;font-size:13.5px}
.exl-tm-slow{display:flex;flex-wrap:wrap;justify-content:center}
.exl-tm-slow .exl-btn,.exl-tm-rp .exl-btn{min-height:42px;min-width:0;font-size:14.5px;padding:0 14px}
.exl-tm-rp{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px;border-radius:12px;background:#1d1f20;box-shadow:0 0 0 2px #ffd75e}
.exl-tm-rp[hidden]{display:none}
.exl-tm-rps{display:block;width:100%;max-width:640px;height:auto}
.exl-tm-rpc{margin:0;color:#fff;font-size:14px;text-align:center;line-height:1.5}
.exl-tm-rpc b{color:#ffe7a8}
.exl-tm-rpc span{color:#9fd3ff;font-size:12.5px}
.exl-tm-rpbody{fill:#2f5f9e;stroke:#1d3c66;stroke-width:1.5}
.exl-tm-rpn.hit rect{fill:#ffcf3a}
.exl-tm-rpl{font-size:11px;font-weight:700;fill:#fff}
.exl-tm-rpl.d{fill:#3a2a14}
.exl-tm-rpa{stroke:#3a2a14;stroke-width:2;marker-end:none}
.exl-tm-chk-q{margin:4px 0 0;color:#fff;font-weight:700;font-size:16px;text-align:center}
.exl-tm-chk-b{display:flex;flex-wrap:wrap;justify-content:center}
.exl-tm-chk-ng{margin:0;padding:8px 10px;border-radius:10px;background:#fde9e2;color:#7a2a14;font-weight:700;font-size:14.5px;line-height:1.5}
/* 4本をくらべる */
.exl-tm-cmp{display:flex;flex-direction:column;gap:6px}
.exl-tm-q{padding:8px;border-radius:12px;background:#1d1f20;box-shadow:0 0 0 2px #ffd75e;flex-direction:row}
.exl-tm-q .exl-rzoom-st{width:100%;text-align:center}
.exl-tm-q .exl-rzoom-ng{width:100%}
.exl-tm-okline{margin:0;padding:8px 10px;border-radius:10px;background:#1f5a3c;color:#eafff2;font-weight:700;font-size:14.5px;line-height:1.5}
.exl-tm-allh{margin:0 0 4px;color:#ffe7a8;font-weight:700;font-size:15px}
.exl-tm-pick{display:flex;flex-wrap:wrap;gap:4px}
.exl-tm-pick .exl-btn{min-width:0;min-height:42px;padding:0 14px;margin:0;font-size:14.5px}
.exl-tm-pick .exl-btn.on{background:#ffd75e;border-color:#ffd75e;color:#2a1d08}
.exl-tm-pick .exl-btn.done:not(.on){background:#1f5a3c;border-color:#4caf7d;color:#eafff2}
.exl-tm-pkh,.exl-tm-need{margin:0;color:#f3e3b8;font-weight:700;font-size:14px;line-height:1.5}
.exl-tm-calc{padding:8px 12px;border-radius:12px;background:#fbf6e8;color:#2a2416;font-size:15px;line-height:1.6}
.exl-tm-calc p{margin:0}
.exl-tm-calc b{color:#7a3e0c}
.exl-tm-cleq{margin-top:4px!important;padding:6px 10px;border-radius:8px;background:#1f5a3c;color:#eafff2;font-weight:700;font-size:16.5px}
.exl-tm-cl0{color:#5a4f38}
.exl-tm-tbl td:first-child{text-align:center}
.exl-tm-spd{white-space:nowrap}
/* 考察 */
.exl-tm-mt{width:100%;margin:6px 0;border-collapse:collapse;font-size:15px}
.exl-tm-mt th{background:#3a3428;color:#f3e3b8;padding:5px 8px;text-align:left}
.exl-tm-mt td{padding:4px 8px;border-top:1px solid #e3d6b4}
.exl-tm-mt td:first-child{font-weight:700;white-space:nowrap}
.exl-tm-mt .exl-th-slot{min-width:9em}
.exl-tm-sum{display:flex;flex-direction:column;gap:4px;margin:4px 0 8px}
.exl-tm-sumr{display:grid;grid-template-columns:1.6em minmax(120px,220px) 1fr;align-items:center;gap:6px;font-size:14px}
.exl-tm-sumr b{font-size:16px;text-align:center}
.exl-tm-mini{width:100%;height:auto;display:block}
@media (max-width:640px){
  .exl-tm-hz{padding:4px 6px;font-size:12.5px}
  .exl-tm-hz{flex-wrap:nowrap;gap:4px}
  .exl-tm-hz button{min-height:40px;padding:0 8px;font-size:13px;white-space:nowrap}
  .exl-tm-hz-l{font-size:12px;white-space:nowrap}
  .exl-tm-hz-t{font-size:12px}
  .exl-tm-hz-a{display:none}
  .exl-tm-task{font-size:12px;top:6px;left:6px}
  .exl-tm-card{min-width:84px;font-size:11.5px}
  .exl-tm-calc{font-size:14px}
  .exl-tm-sumr{grid-template-columns:1.4em 1fr;font-size:13px}
  .exl-tm-sumr span{grid-column:1 / -1}
  .exl-tm-mt{font-size:13.5px}
}
@media (max-height:520px){
  .exl-tm-hz{padding:2px 6px}
  .exl-tm-hz button{min-height:34px}
  .exl-tm-svg,.exl-tm-hsvg{max-height:calc(var(--exl-sh, 100dvh) - 50px)}
}
/* はじめを切る（Ver.0.10.1） */
.exl-tm-cutnote{margin:0;color:#e8dcc0;font-size:13px;line-height:1.5}
.exl-tm-cutb{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.exl-tm-cutb .exl-btn{min-height:42px;min-width:0;margin:0;padding:0 14px;font-size:14.5px}
.exl-tm-cuton{flex:1 1 100%;padding:6px 10px;border-radius:10px;background:#ffd75e;color:#2a1d08;font-weight:700;font-size:14px}
.exl-tm-cutting .exl-tm-tv{box-shadow:0 0 0 3px #ffd75e;cursor:crosshair}
.exl-tm-cutm{font-size:12px;fill:#b0281c}

/* Ver.0.11.1：課題を大きく・テープを太く・「ここまで引く」の線 */
.exl-tm-task{display:flex;align-items:center;gap:8px;top:8px;left:8px;padding:6px 14px 6px 6px;border-radius:14px;background:#ffd75e;color:#2a1d08;font-size:19px;line-height:1.35;box-shadow:0 2px 8px rgba(0,0,0,.35);white-space:normal}
.exl-tm-task[hidden]{display:none}
.exl-tm-task-id{flex:none;display:inline-flex;align-items:center;justify-content:center;width:1.8em;height:1.8em;border-radius:50%;background:#1f345a;color:#fff;font-size:20px}
.exl-tm-task small{flex:none;font-size:13px;color:#6a4a10}
.exl-tm-bench.vert .exl-tm-task{display:flex;border-radius:12px}
.exl-tm-bench.vert .exl-tm-task[hidden]{display:none}
.exl-tm-goal line{stroke:#e0473c;stroke-width:3;stroke-dasharray:7 5}
.exl-tm-goal.done line{stroke:#1f8a4c;stroke-dasharray:none}
.exl-tm-goalt{font-size:15px;font-weight:700;fill:#b0281c;paint-order:stroke;stroke:#fff;stroke-width:3.5px}
.exl-tm-goal.done .exl-tm-goalt{fill:#1f6a3c}
.exl-tm-tl{font-size:17px}
.exl-tm-rn{font-size:13px}
.exl-tm-chk-h{font-size:19px}
.exl-tm-chk-h span{font-size:16px;color:#ffe7a8;font-weight:700}
.exl-tm-pkh{font-size:15.5px}
@media (max-width:640px){
  .exl-tm-task{font-size:15px;padding:4px 10px 4px 4px}
  .exl-tm-task-id{font-size:16px}
  .exl-tm-tl{font-size:15px}
  .exl-tm-chk-h{font-size:16.5px}
  .exl-tm-chk-h span{display:block;margin:2px 0 0;font-size:15px}
}
/* 横長の画面では、課題の札を右下（机のあいている所）に出す（記録タイマーのスイッチを隠さない） */
.exl-tm-bench:not(.vert) .exl-tm-task{top:auto;left:auto;right:10px;bottom:10px;max-width:62%}
/* Ver.0.11.2：結果がそろったら、ボタンで次へ */
.exl-tm-next{display:flex;justify-content:center;padding:8px 0 4px}
.exl-tm-next .exl-btn{min-height:50px;font-size:18px;padding:0 26px}