@layer theme,base,katex;@layer components{.listen{border-radius:var(--r-md);background:var(--blue-soft);box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--blue) 22%, transparent);flex-direction:column;gap:10px;margin-block:4px 16px;padding:14px 16px;display:flex}.listen-head{color:var(--blue-ink);align-items:center;gap:8px;font-size:15px;font-weight:600;display:flex}.listen-head svg{flex:none;width:20px;height:20px}.listen-length{color:var(--ink-3);margin-inline-start:auto;font-size:13px;font-weight:400}.listen-bar{align-items:flex-start;gap:12px;display:flex}.listen-play{background:var(--blue);color:#fff;width:48px;height:48px;transition:transform var(--dur-1) var(--ease), background-color var(--dur-2) var(--ease);border-radius:50%;flex:none;place-items:center;display:grid}.listen-play:active{transform:scale(.94)}.listen-play svg{fill:currentColor;width:22px;height:22px}.listen-play-sm{width:36px;height:36px}.listen-play-sm svg{width:16px;height:16px}.listen-track{flex-direction:column;flex:1;min-width:0;padding-block-start:6px;display:flex}.listen-seek{cursor:pointer;appearance:none;background:0 0;width:100%;height:22px;margin:0}.listen-seek::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--blue) var(--listen-progress,0%), color-mix(in oklab, var(--blue) 20%, var(--surface)) var(--listen-progress,0%));border-radius:3px;height:6px}.listen-seek::-moz-range-track{background:linear-gradient(to right, var(--blue) var(--listen-progress,0%), color-mix(in oklab, var(--blue) 20%, var(--surface)) var(--listen-progress,0%));border-radius:3px;height:6px}.listen-seek::-webkit-slider-thumb{border:2px solid var(--surface);background:var(--blue);appearance:none;border-radius:50%;width:16px;height:16px;margin-block-start:-5px}.listen-seek::-moz-range-thumb{border:2px solid var(--surface);background:var(--blue);border-radius:50%;width:12px;height:12px}.listen-seek:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}.listen-row{align-items:center;gap:2px;display:flex}.listen-time{color:var(--ink-2);font-variant-numeric:tabular-nums;margin-inline-end:auto;font-size:13px}.listen-rate{min-width:44px;height:32px;color:var(--blue-ink);border-radius:999px;padding-inline:8px;font-size:13px;font-weight:600}@media (hover:hover){.listen-rate:hover{background:var(--surface)}}.listen-note,.listen-failed{color:var(--ink-2);font-size:13px;line-height:1.7}.listen-failed{color:var(--red-ink)}.listen-missing{color:var(--ink-3);align-items:center;gap:8px;margin-block:4px 16px;font-size:14px;display:flex}.listen-missing svg{flex:none;width:18px;height:18px}.listen-dock{inset-inline:max(var(--gutter), calc((100vw - 560px) / 2));bottom:calc(var(--toast-offset) + env(safe-area-inset-bottom));z-index:40;background:var(--surface);box-shadow:0 0 0 1px var(--line), var(--shadow-float);animation:listen-dock-in var(--dur-2) var(--ease);border-radius:999px;align-items:center;gap:10px;padding:6px;padding-inline-end:4px;display:flex;position:fixed}@keyframes listen-dock-in{0%{opacity:0;transform:translateY(8px)}}.listen-dock-title{flex-direction:column;flex:1;min-width:0;font-size:14px;font-weight:600;line-height:1.5;display:flex}.listen-dock-title .listen-time{text-align:end;align-self:flex-start;margin:0;font-size:12px;font-weight:400}.listen-texts{flex-direction:column;align-items:flex-start;gap:12px;margin-block-start:20px;display:flex}.listen-texts>div{flex-direction:column;align-self:stretch;gap:12px;display:flex}.listen-text{border-radius:var(--r-md);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);padding:14px 16px}.listen-text-head{flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-block-end:6px;font-size:14px;display:flex}.listen-text-head span,.listen-text-book{color:var(--ink-3);font-size:13px}.listen-text-instruction{color:var(--ink-2)}.listen-text-book{margin-block-start:8px}}@layer utilities;