tinypage-track,.tp-bar{--tp-accent:var(--player-accent,currentColor);--tp-ground:var(--player-bg,var(--tp-paper,Canvas));--tp-quiet:color-mix(in srgb,currentColor 62%,transparent);--tp-rule:color-mix(in srgb,currentColor 16%,transparent);font-family:var(--player-font,inherit)}tinypage-track{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:"play title time" "play note note";align-items:center;column-gap:0.75em;min-block-size:48px;margin-block:0.25em;padding-block:4px}tinypage-track>.tp-play{grid-area:play}tinypage-track>a{grid-area:title;text-wrap:pretty}tinypage-track>time{grid-area:time;color:var(--tp-quiet);font-size:0.875em;font-variant-numeric:tabular-nums;white-space:nowrap}tinypage-track>span:not(.tp-line){grid-area:note;color:var(--tp-quiet);font-size:0.875em;line-height:1.4}.tp-line{position:absolute;inset-inline:calc(44px + 0.75em) 0;inset-block-end:0;block-size:2px;border-radius:1px;background:linear-gradient(to right,var(--tp-accent) calc(var(--p,0) * 100%),var(--tp-rule) 0);opacity:0;transition:opacity 0.2s}tinypage-track[data-state] .tp-line{opacity:1}.tp-play,.tp-close{-webkit-appearance:none;appearance:none;box-sizing:border-box;display:grid;place-items:center;inline-size:44px;block-size:44px;margin:0;padding:0;border:1.5px solid var(--tp-accent);border-radius:50%;background:transparent;color:var(--tp-accent);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color 0.15s,color 0.15s,scale 0.15s}.tp-play svg,.tp-close svg{inline-size:20px;block-size:20px;fill:currentColor}.tp-play:active{scale:0.94}tinypage-track[data-state] .tp-play,.tp-bar .tp-play{background:currentColor}tinypage-track[data-state] .tp-play svg,.tp-bar .tp-play svg{fill:var(--tp-ground)}.tp-close{border-color:transparent;color:var(--tp-quiet)}.tp-close svg{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round}.tp-close:hover{color:currentColor;background:var(--tp-rule)}.tp-play:focus-visible,.tp-close:focus-visible,.tp-seek:focus-visible,.tp-title:focus-visible{outline:3px solid var(--player-focus,var(--tp-accent));outline-offset:2px}.tp-bar{position:fixed;z-index:2147483000;inset-inline:max(8px,env(safe-area-inset-left)) max(8px,env(safe-area-inset-right));inset-block-end:max(8px,env(safe-area-inset-bottom));box-sizing:border-box;max-inline-size:46rem;margin-inline:auto;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;grid-template-areas:"play what close" "scrub scrub scrub";align-items:center;gap:2px 12px;padding:10px 10px 4px 12px;border:1px solid var(--tp-rule);border-radius:var(--player-radius,16px);background:var(--tp-ground);color:inherit;font-size:15px;line-height:1.3;box-shadow:0 10px 30px -12px rgb(0 0 0 / 0.3),0 2px 8px -4px rgb(0 0 0 / 0.12);view-transition-name:tp-bar;transition:translate 0.4s cubic-bezier(0.2,0.8,0.2,1),opacity 0.3s}@starting-style{.tp-bar{translate:0 calc(100% + 16px);opacity:0}}:root[data-tp-bar] body{padding-block-end:calc(var(--tp-h,112px) + 16px)}.tp-bar .tp-play{grid-area:play}.tp-close{grid-area:close}.tp-what{grid-area:what;display:grid;min-inline-size:0}.tp-title,.tp-site{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tp-title{color:inherit;font-weight:600;text-decoration:none;border-radius:2px}.tp-title:hover{text-decoration:underline;text-underline-offset:0.2em}.tp-site{color:var(--tp-quiet);font-size:13px}.tp-scrub{grid-area:scrub;display:flex;align-items:center;gap:10px;min-inline-size:0;font-size:13px;font-variant-numeric:tabular-nums}.tp-cur,.tp-end{min-inline-size:4ch;color:var(--tp-quiet)}.tp-end{text-align:end}.tp-live{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@media (min-width:40rem){.tp-bar{grid-template-columns:44px minmax(8rem,15rem) minmax(0,1fr) 44px;grid-template-areas:"play what scrub close";gap:16px;padding:10px 10px 10px 12px}}.tp-seek{--tp-fill:linear-gradient(to right,var(--tp-accent) calc(var(--p,0) * 100%),var(--tp-rule) 0);-webkit-appearance:none;appearance:none;flex:1;min-inline-size:0;block-size:44px;margin:0;padding:0;background:transparent;color:inherit;border-radius:8px;cursor:pointer}.tp-seek::-webkit-slider-runnable-track{block-size:4px;border-radius:2px;background:var(--tp-fill)}.tp-seek::-moz-range-track{block-size:4px;border-radius:2px;background:var(--tp-fill)}.tp-seek::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;inline-size:14px;block-size:14px;margin-block-start:-5px;border:0;border-radius:50%;background:var(--tp-accent);transition:scale 0.15s}.tp-seek::-moz-range-thumb{inline-size:14px;block-size:14px;border:0;border-radius:50%;background:var(--tp-accent);transition:scale 0.15s}.tp-seek:active::-webkit-slider-thumb{scale:1.25}.tp-seek:active::-moz-range-thumb{scale:1.25}@media (prefers-reduced-motion:reduce){.tp-bar,.tp-line,.tp-play,.tp-close,.tp-seek::-webkit-slider-thumb{transition:none}}@media (forced-colors:active){.tp-bar{border-color:CanvasText}.tp-play,tinypage-track[data-state] .tp-play,.tp-bar .tp-play{border-color:ButtonText;background:ButtonFace;color:ButtonText}}