#sidebar{transition:.2s;position:relative;width:250px;min-width:250px;height:100%}#sidebar.closed{width:0px;min-width:0px}#sidebar-content{width:100%;height:100%;scrollbar-width:thin;overflow:auto}#sidebar-content textarea{width:100%;resize:vertical}.sidebar-section-title{text-align:left;font-family:monospace;font-weight:600;font-size:.6rem;border-top:solid;border-bottom:solid;border-width:1px;border-color:var(--color-title-border);margin-top:.3rem;margin-bottom:.3rem;padding-left:.4rem}.toggle-button{width:2rem;height:2rem;padding:.3rem;border:1px solid var(--color-toggle-button-border);color:var(--color-text)}.toggle-button:focus{outline:1px solid var(--color-toggle-button-focus)}.toggle-button:active,.toggle-button:focus-visible{border-color:var(--color-button-border-hover);background-color:var(--color-button-hover)}.select-button{width:1.5rem;height:1.5rem;padding:.1rem;border:1px solid var(--color-select-button-border);background-color:var(--color-select-button);color:var(--color-select-button-text)}.select-button.selected{color:var(--color-select-button-border-selected)}.select-button:disabled{color:var(--color-select-button-border-disabled)}div.vr{width:1px;height:1.2rem;margin:0 .3rem;background:var(--color-vr)}.color-space-visible-button{color:var(--color-color-space-visible-button-text);border:1px solid var(--color-color-space-visible-button-border)}#sidebar-toggle{border-radius:0 .25rem .25rem 0;position:absolute;z-index:10;top:.5rem;right:-2rem;height:3rem;width:2rem;display:flex;align-items:center;justify-content:center;font-family:monospace;font-size:2rem;-webkit-user-select:none;user-select:none;color:var(--color-sidebar-toggle-text);background-color:var(--color-sidebar-toggle)}#sidebar-footer{display:flex;justify-content:center;align-items:center;flex-direction:column}#root{width:100%;height:100%;display:flex;margin:0 auto;text-align:center}#content{display:flex;flex-grow:1;overflow-y:scroll;position:relative}#content>div:has(#graph-container){flex-grow:1;display:flex;height:fit-content}#graph-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));padding:1rem;gap:10px;justify-content:center;align-items:center;width:100%}#scroll-area{position:sticky;flex-shrink:0;top:0;left:0;width:4rem;height:100%;background-color:var(--color-scroll-area);color:var(--color-scroll-area-text);font-weight:700;overflow:hidden;z-index:1}#scroll-area>span{width:100%;height:100%;writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:1rem;font-size:2rem;line-height:4rem;cursor:default}.color-space{position:relative;aspect-ratio:1;border:1px solid black}.color-space>.title{position:absolute;top:0;left:0;padding:.1rem .5rem;text-align:left}input[name=color-space-preview]:disabled{opacity:.5}.radio-disabled{width:auto;height:auto;margin:2px;border:1px solid black;border-radius:9999px}.color-space-input-container{display:flex;flex-direction:column;gap:.25rem}.color-space-item{display:flex;padding:.1rem .5rem;align-items:center;background-color:var(--color-color-space-item);border-radius:.5rem;font-size:.8rem}.color-space-item>span:nth-child(1){flex-grow:1;text-align:left}.color-space-item>span:nth-child(2){display:flex;align-items:center;text-align:right;height:100%}*{box-sizing:border-box}:root{--color-bg: #242424;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:root{--color-text: #ffffff;--color-bg: #242424;--color-button: #1a1a1a;--color-button-hover: #3a3a3a;--color-button-border: transparent;--color-button-border-hover: #646cff;--color-textarea: #3B3B3B;--color-scroll-area: #1a1a1a;--color-scroll-area-text: #828282;--color-title-border: #5f5f5f;--color-toggle-button-border: #505050;--color-toggle-button-focus: transparent;--color-select-button: transparent;--color-select-button-text: #808080;--color-select-button-border: transparent;--color-select-button-border-selected: #b26eff;--color-select-button-border-disabled: #220000;--color-vr: #818181;--color-sidebar-toggle: #b4b4b4;--color-sidebar-toggle-text: black;--color-color-space-item: #181818;--color-color-space-visible-button-text: var(--color-select-button-text);--color-color-space-visible-button-border: transparent}[data-theme=light]{--color-text: #000000;--color-bg: #ffffff;--color-button: #d4d4d4;--color-button-hover: #a7a7a7;--color-button-border: transparent;--color-button-border-hover: #646cff;--color-textarea: #dadada;--color-scroll-area: #adadad;--color-scroll-area-text: #f1f1f1;--color-title-border: #777777;--color-toggle-button-border: #505050;--color-toggle-button-focus: transparent;--color-select-button: transparent;--color-select-button-text: #6e6e6e;--color-select-button-border: transparent;--color-select-button-border-selected: #b26eff;--color-select-button-border-disabled: #afafaf;--color-vr: #818181;--color-sidebar-toggle: #2b2b2b;--color-sidebar-toggle-text: #ffffff;--color-color-space-item: #d4d4d4;--color-color-space-visible-button-text: var(--color-select-button-text);--color-color-space-visible-button-border: transparent}html,body{width:100%;height:100%}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100svh;background-color:var(--color-bg);color:var(--color-text)}button{border-radius:5px;border:1px solid var(--color-button-border);padding:.3rem 1rem;font-weight:500;font-family:inherit;background-color:var(--color-button);cursor:pointer;transition:border-color .25s}button:hover{border-color:var(--color-button-border-hover)}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}textarea{background-color:var(--color-textarea)}