:root{--monorail-point-size: 5px;--monorail-stroke-width: 1px;--monorail-fill-opacity: .1;--monorail-font-family: "Fira Code", "DejaVu Sans Mono", Menlo, ui-monospace, "Cascadia Code", "Source Code Pro", Consolas, monospace;--monorail-font-size: .75rem;--monorail-bg: #fdfaf9;--monorail-fg: #191819;--monorail-light-gray: #c1c1c9;--monorail-gray: #515159;--monorail-text-gray: #818189;--monorail-red: #d9174b;--monorail-orange: #f27d00;--monorail-yellow: #e3aa00;--monorail-green: #00b96b;--monorail-blue: #0085fb;--monorail-purple: #3a17c6;--monorail-current-time: #940757;--monorail-swatch-outline: rgb(0 0 0 / .1)}@media (prefers-color-scheme: dark){:root{--monorail-bg: #191819;--monorail-fg: #fdfaf9;--monorail-light-gray: #313139;--monorail-gray: #b1b1b9;--monorail-text-gray: #818189;--monorail-red: #ff4073;--monorail-orange: #ff9320;--monorail-yellow: #ffd700;--monorail-green: #00ff93;--monorail-blue: #3ea5ff;--monorail-purple: #8b6eff;--monorail-current-time: #fd799c;--monorail-swatch-outline: rgb(255 255 255 / .1)}}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{padding:2.5rem 1.25rem;color:var(--monorail-fg);background-color:var(--monorail-bg);font-size:1rem}@media (min-width: 600px){body{padding:4rem 3rem}}main{max-width:600px;margin:0 auto}h1{font-size:1.25em;position:relative;margin:0 auto;width:fit-content}p{max-width:25rem;color:var(--monorail-text-gray);margin:0 auto .5rem;line-height:1.4}@keyframes example{10%{background-color:#5566ffb3;transform:rotate(-235deg)}33.3%{transform:translate(100px) translateY(-4px) rotate(30deg)}50%{background-color:#ea3456}66.6%{opacity:.5}}.animation{color:var(--monorail-fg);margin:0 auto;border-radius:4px;border:1px solid var(--border);background:var(--monorail-blue);color:#fdfaf9;padding:1rem 1.5rem;font-weight:700;animation:example .5s 1;animation-timing-function:ease-in-out;animation-fill-mode:forwards}nav{margin:1.5rem 0;font-size:1rem;display:flex;justify-content:center;gap:1rem;font-weight:500}a{color:var(--monorail-gray);text-decoration-color:var(--monorail-light-gray)}a:hover{color:var(--monorail-purple);text-decoration-color:currentColor}.monorail-wrapper{margin-top:2rem}.monorail-wrapper:empty+.playback-speed{display:none}.playback-speed{margin-top:1rem;font-family:var(--monorail-font-family);font-size:.875rem;display:flex;flex-wrap:wrap;gap:0 1rem;align-items:center}label{flex:100%;font-weight:700}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.monorail,.playback-speed{animation:fade-in .5s ease-out forwards}input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;outline:none;color:var(--monorail-light-gray)}input[type=range]:hover,input[type=range]:focus-visible{color:var(--monorail-purple)}input[type=range]::-webkit-slider-runnable-track{background-color:var(--monorail-light-gray);border-radius:.25rem;height:.25rem}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;box-shadow:none;background-color:var(--monorail-bg);border:3px solid currentColor;height:1.25rem;width:1.25rem;margin-top:-.5rem;border-radius:100%}input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid currentColor;outline-offset:2px}input[type=range]::-moz-range-track{background-color:var(--monorail-light-gray);border-radius:.25rem;height:.25rem}input[type=range]::-moz-range-thumb{box-sizing:border-box;border:none;background-color:var(--monorail-bg);border:3px solid currentColor;height:1.25rem;width:1.25rem;border-radius:100%}input[type=range]:focus-visible::-moz-range-thumb{outline:2px solid currentColor;outline-offset:2px}.monorail{--monorail-point-size: 5px;--monorail-stroke-width: 1px;--monorail-fill-opacity: .1;--monorail-font-family: "Fira Code", "DejaVu Sans Mono", Menlo, ui-monospace, "Cascadia Code", "Source Code Pro", Consolas, monospace;--monorail-font-size: .75rem;--monorail-bg: #fdfaf9;--monorail-fg: #191819;--monorail-light-gray: #c1c1c9;--monorail-red: #d9174b;--monorail-orange: #f27d00;--monorail-yellow: #e3aa00;--monorail-green: #00b96b;--monorail-blue: #0085fb;--monorail-purple: #3a17c6;--monorail-current-time: #940757;--monorail-swatch-outline: rgb(0 0 0 / .1)}@media (prefers-color-scheme: dark){.monorail{--monorail-bg: #191819;--monorail-fg: #fdfaf9;--monorail-light-gray: #313139;--monorail-red: #ff4073;--monorail-orange: #ff9320;--monorail-yellow: #ffd700;--monorail-green: #00ff93;--monorail-blue: #3ea5ff;--monorail-purple: #8b6eff;--monorail-current-time: #fd799c;--monorail-swatch-outline: rgb(255 255 255 / .1)}}.monorail{font-family:var(--monorail-font-family);line-height:1.3;font-weight:500;container-type:inline-size}.monorail,.monorail *{box-sizing:border-box;padding:0;margin:0}.monorail svg{overflow:visible;display:block}.monorail-lines{stroke-width:var(--monorail-stroke-width)}.monorail-fills path{opacity:var(--monorail-fill-opacity)}.monorail-points{stroke-width:var(--monorail-point-size);stroke-linecap:round}.monorail-zero-line,.monorail-notch{stroke:var(--monorail-light-gray)}.monorail-current-time{stroke:var(--monorail-current-time);stroke-width:var(--monorail-stroke-width);stroke-dasharray:2 3;stroke-linecap:round}.monorail-current-time-point{stroke-width:var(--monorail-point-size);stroke-linecap:square;transform-box:fill-box;transform-origin:center;transform:rotate(45deg)}.monorail-timeline{font-size:var(--monorail-font-size);display:flex;justify-content:space-between;height:1.3em;position:relative;margin:.5em 0}.monorail-timeline div{flex:0 0 0}.monorail-timeline span{position:absolute;transform:translate(-50%)}.monorail-play-pause-button{color:var(--monorail-fg);background-color:var(--monorail-bg);font:inherit;font-size:var(--monorail-font-size);line-height:1.2;display:block;margin-bottom:.5rem;border:none;cursor:pointer;padding:.25rem .5rem;border:1px solid var(--monorail-light-gray);border-radius:4px;outline:none;font-weight:700;letter-spacing:-.02em;transition:color .25s,border-color .25s}.monorail-play-pause-button:hover{border-color:var(--monorail-purple);color:var(--monorail-purple)}.monorail-play-pause-button:focus-visible{outline:2px solid var(--monorail-purple);outline-offset:2px}.monorail-play-pause-button:active{transform:translateY(1px)}.monorail:not(.monorail-playing) .monorail-pause,.monorail-playing .monorail-play{display:none}.monorail-tooltip{font-size:var(--monorail-font-size);display:inline-block;padding:.625rem;border:1px solid var(--monorail-light-gray);color:var(--monorail-fg);background-color:var(--monorail-bg);border-radius:4px;width:100%}.monorail-tooltip>div{display:flex;justify-content:space-between;gap:0 1.5rem;position:relative;flex-wrap:wrap}.monorail-color-swatch{display:inline-block;vertical-align:middle;width:1em;height:1em;border-radius:2px;outline:1px solid var(--monorail-swatch-outline);outline-offset:-1px;transform:translateY(-.1em);margin-left:.2em;left:101%}@container (min-width: 400px){.monorail svg{--monorail-point-size: 8px;--monorail-stroke-width: 2px}.monorail-timeline,.monorail-play-pause-button,.monorail-tooltip{--monorail-font-size: .875rem}.monorail-tooltip{min-width:var(--monorail-tooltip-min-width)}.monorail-current-time{stroke-dasharray:4 6}}@container (min-width: 600px){.monorail-tooltip{width:fit-content;transform:translate(calc(var(--monorail-tooltip-x) + var(--monorail-tooltip-margin)))}}