@font-face{font-family:MDIO;src:local("MDIO-Regular"),url(/fonts/MDIOTrial-Regular.otf);font-display:swap;font-style:normal}@font-face{font-family:MDIO;src:local("MDIO-Italic"),url(/fonts/MDIOTrial-Italic.otf);font-display:swap;font-style:italic}@font-face{font-family:Geist;src:url(../fonts/Geist-Variable.woff2) format("woff2"),url(../fonts/Geist-Variable.ttf) format("truetype");font-weight:300 900;font-display:swap;font-style:normal}*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html{--color-bg-primary: rgb(10 10 10);--color-bg-secondary: rgb(21 21 21);--color-border-subtle: rgb(255 255 255 / .125);--header-height: 3.5rem;--content-height: 100vh;background:var(--color-bg-primary);color-scheme:dark;color:#e0e6ed;font-family:MDIO,Monaco,Menlo,Ubuntu Mono,monospace;font-family:Geist;font-weight:400}button{cursor:pointer}#root{height:100vh;display:grid;grid-template-rows:4rem 1fr}.container{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,350px);flex:1;overflow:hidden;height:var(--content-height)}.repl-section{position:relative;flex-grow:1;display:flex;flex-direction:column;height:var(--content-height)}.header{position:absolute;top:0;left:0;z-index:100;background:linear-gradient(to bottom,var(--color-bg-primary),transparent);padding:.875rem 2rem;display:flex;justify-content:space-between;align-items:center;width:100%;height:var(--header-height)}.header .title{display:flex;align-items:center;gap:1rem;font-size:1.25rem;font-weight:800;text-transform:lowercase;font-feature-settings:"ss02";font-variation-settings:"wght" 800;line-height:1}.header .title .status-dot{display:flex;align-items:center;justify-content:flex-start;width:1rem;height:1rem;margin-top:2px}.header .title .status-dot:before{content:"";display:block;width:.75rem;height:.75rem;border-radius:100vmax;background:#ff4cf1;background:color(display-p3 1 0 1)}.header .title .status-dot[data-playing=true]:before{background:#01e3a5;background:color(display-p3 0 .9125 .625);animation:pulse 1s infinite}.header .metronome{font-variant-numeric:tabular-nums;font-weight:500;font-size:.875rem;margin-inline-end:.5rem}.header .metronome span{opacity:.5}.header .controls{display:flex;gap:.5rem;align-items:center}.header button{font-family:inherit;font-weight:500;letter-spacing:.0125em;font-size:.875rem;background:var(--color-bg-primary);border:1px solid var(--color-border-subtle);padding:.5rem 1rem;border-radius:100vmax;min-width:5rem}.editor-container{flex-grow:1;overflow:hidden}.editor-container>div.cm-editor{height:100%!important}.editor-container .cm-scroller{padding-block-start:var(--header-height);font-family:MDIO,Monaco,Menlo,Ubuntu Mono,monospace;font-size:.9375rem;overscroll-behavior:contain}.editor-container .cm-lineNumbers .cm-gutterElement{padding-inline-start:1.5rem}.sidebar{display:grid;grid-template-rows:1fr minmax(0,300px);background:var(--color-bg-primary);border-left:1px solid var(--color-border-subtle);width:350px;height:var(--content-height);isolation:isolate}.sidebar section{position:relative;overflow:hidden}.sidebar section:last-of-type{overflow:hidden;border-block-start:1px solid var(--color-border-subtle)}.sidebar .section-header{position:absolute;top:0;left:0;right:0;align-items:baseline;justify-content:space-between;background:linear-gradient(to bottom,var(--color-bg-primary),transparent);padding:1rem;font-weight:600;font-size:.875rem;display:flex;align-items:center;height:var(--header-height);z-index:2}.sidebar .section-header button{background:none;padding-block:0;border:none;font:inherit;opacity:.5}.sidebar .examples{display:grid;grid-auto-rows:min-content;overflow-y:scroll;overscroll-behavior:contain;padding:1rem;height:100%;padding-block-start:var(--header-height)}.sidebar .examples .example{display:grid;gap:.5rem;text-align:left;font-family:inherit;background:var(--color-bg-secondary);border:1px solid var(--color-border-subtle);border-radius:8px;padding:1rem;margin-bottom:1rem;cursor:pointer;transition:all .3s ease}.sidebar .examples .example:hover{background:#ffffff1a;border-color:#01bff0;border-color:color(display-p3 0 .75 1);transform:translateY(-2px)}.sidebar .examples .example .example-title{font-size:.9125rem;font-weight:600;margin-bottom:.375rem}.sidebar .examples .example .example-code{display:grid;gap:.5rem;font-size:.8125rem;color:#8a919e;white-space:nowrap;overflow-x:auto;font-family:MDIO,Monaco,Menlo,Ubuntu Mono,monospace}.sidebar .output{flex:0 0 200px;padding:1rem;overflow-y:auto;overscroll-behavior:contain;font-size:.9rem;line-height:1.5;font-family:MDIO,Monaco,Menlo,Ubuntu Mono,monospace;height:100%;padding-block-start:var(--header-height)}.sidebar .output .log-entry{margin-bottom:.5rem;padding:.25rem 0}.sidebar .output .log-entry[data-type=input]{color:#01bff0;color:color(display-p3 0 .75 1)}.sidebar .output .log-entry[data-type=output]{color:#01e3a5;color:color(display-p3 0 .9125 .625)}.sidebar .output .log-entry[data-type=error]{color:#ff4cf1;color:color(display-p3 1 0 1)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}