:root{color-scheme:light dark;--teal-color:#31afd0;--selection-background:light-dark(#1f8fff1a,#51b1f157);--selection-color:light-dark(#222,#fff);--nav-height:40px;--viewport-padding-inline:20px;--panel-border-radius:0px;--bg:light-dark(#fff,#181818);--fg:light-dark(#222,#eee);--panel-border-color:light-dark(#8080804d,#80808099);--panel-border-color-hover:light-dark(#000000b3,#ffffffb3);--panel-border:1px solid var(--panel-border-color);--button-color:light-dark(rgb(from currentColor r g b / 5%),rgb(from currentColor r g b / 12%));--tooltip-color:light-dark(#eee,#e5e5e5);--ui-label-weight:400;--scrollbar-thumb-color:light-dark(#8080803b,#80808087);--scrollbar-thumb-color-hover:light-dark(#8080806e,#808080ba);--draggable-pane-divisor-color-hover:light-dark(#80808070,#808080c4)}:root[data-theme=light]{color-scheme:light}:root[data-theme=dark]{color-scheme:dark}::selection{background-color:var(--selection-background);color:var(--selection-color)}@property --c1{syntax:"<color>";inherits:false;initial-value:#0000}@property --c2{syntax:"<color>";inherits:false;initial-value:#0000}body{color:var(--fg);max-width:inherit;background:var(--body-background-color-light-mode);flex-direction:column;height:100dvh;margin:0;padding:0;display:flex}body,#editor,#sidebar{transition:background-color .2s,color .2s,border-color .2s}#aoc_container{margin:20px 30px}#app{background:var(--body-background-color-light-mode);flex-shrink:0;margin:0;padding:20px 30px;& table{margin-bottom:0}&:empty{padding:0}}#theme-toggle{align-items:center;gap:8px;display:flex}#theme-toggle-icon{color:light-dark(color-mix(in srgb, var(--fg), transparent 25%),color-mix(in srgb, var(--fg), transparent 15%));background:0 0;width:15px;height:15px;margin:0;padding:0;line-height:0;display:inline-flex;&:focus{box-shadow:none;outline:none}}#star-counter{width:84px;height:17px;line-height:0}#controls{height:var(--nav-height);border:1px solid silver;justify-content:flex-start;align-items:center;gap:16px;padding-inline:50% 0;display:flex}#main{--pane-min-width:300px;flex-direction:column;max-height:90dvh;padding-inline:0;display:flex;@media screen and (width>=768px){grid-template-columns:clamp(var(--pane-min-width), var(--pane-split,50%), calc(100% - var(--pane-min-width))) minmax(0, 1fr);flex:1;min-height:0;max-height:none;display:grid;overflow:auto}&.pane-resizing,&.pane-resizing *{cursor:col-resize;user-select:none}}#editor{box-sizing:border-box;border:var(--panel-border);border-radius:var(--panel-border-radius);background:var(--bg);width:100%;min-width:0;max-width:calc(100dvw - 20px);max-height:90dvh;border-inline:none;flex-direction:column;padding-inline-start:var(--viewport-padding-inline);display:flex;overflow:auto;@media screen and (width>=768px){width:auto;max-width:none;min-height:0;max-height:none;&>.cm-editor{flex:1;min-height:0}}}#sidebar button,#aoc_output_container button,#aoc_form_container>button,#aoc_form_container>#aoc_token{font-weight:var(--ui-label-weight);color:var(--fg);background:var(--button-color);border:1px solid light-dark(rgb(from currentColor r g b / 20%),rgb(from currentColor r g b / 40%));border-radius:.3em;height:fit-content;margin:0;padding:.25em .85em .35em;&:hover,&:active{border-color:rgb(from currentColor r g b / 40%);transform:none}&:focus{box-shadow:none}}#aoc_form_container>#aoc_token{background:0 0}#aoc_help_container{padding:10px 0 0;font-size:1rem}#aoc_output_container{border:1px solid var(--panel-border-color);border-radius:7px;gap:0;margin:0 30px 10px}#sidebar{box-sizing:border-box;--draggable-divider-width:10px;border:var(--panel-border);border-radius:var(--panel-border-radius);width:100%;min-width:0;padding:10px 10px 0px calc(var(--viewport-padding-inline) + (var(--draggable-divider-width) / 2));border-inline:none;flex-direction:column;gap:32px;margin-top:10px;display:flex;position:relative;overflow:hidden;@media screen and (width>=768px){width:auto;max-height:none;margin-top:0;margin-left:0}& .sidebar-section-label{font-weight:var(--ui-label-weight)}& #draggable-divider{width:var(--draggable-divider-width);cursor:col-resize;touch-action:none;z-index:1;height:100%;display:none;position:absolute;top:0;left:0;@media screen and (width>=768px){display:block}&:focus-visible{outline:none}&>#draggable-divider-line{--c1:var(--scrollbar-thumb-color);--c2:var(--scrollbar-thumb-color);background-image:linear-gradient(var(--c1) 0%,var(--c2) 30% 70%,var(--c1) 100%);width:1px;height:100%;transition:--c1 .2s,--c2 .2s,width .2s;position:absolute;top:0;left:2px;translate:-50%}&:hover:not(.pane-resizing),&.pane-resizing.pointer-over,&:focus-visible:not(.pointer-focused){&>#draggable-divider-line{--c2:var(--draggable-pane-divisor-color-hover);width:3px}}}& #sidebar-controls{flex-wrap:wrap;justify-content:space-between;align-items:center;width:100%;display:flex;& #meta-controls{margin-left:auto}& label{margin:0}& .control-group{flex-wrap:wrap;align-items:center;gap:12px;min-width:0;max-width:100%;min-height:1.9em;display:flex}}& #sidebar-sections{--sidebar-control-size:13px;--sidebar-control-gap:5px;outline-offset:6px;flex-direction:column;gap:32px;display:flex;overflow:hidden;& .sidebar-section{outline-offset:2px;flex-direction:column;gap:12px;display:flex;overflow:hidden;&#repl-mode-section{flex-shrink:0}}& #compiled-code-toggle{appearance:none;align-self:flex-start;align-items:center;gap:var(--sidebar-control-gap);color:var(--fg);box-shadow:none;font-family:inherit;font-size:inherit;font-weight:var(--ui-label-weight);line-height:inherit;cursor:pointer;background:0 0;border:0;border-radius:0;margin:0;padding:0;display:flex;&:focus-visible{outline-offset:3px;outline:2px solid}&[aria-expanded=false]{& #compiled-code-toggle-icon svg{transform:rotate(0)}}}& #compiled-code-toggle-icon{flex:0 0 var(--sidebar-control-size);width:var(--sidebar-control-size);height:var(--sidebar-control-size);place-items:center;display:grid;scale:1.65;& svg{width:100%;height:100%;transition:transform .1s;transform:rotate(90deg)}}}& #repl-mode{font-weight:var(--ui-label-weight);color:rgb(from currentColor r g b / 100%);flex-direction:column;gap:.5em;display:flex;& label{align-items:center;gap:var(--sidebar-control-gap);margin:0;display:flex;& input{width:var(--sidebar-control-size);height:var(--sidebar-control-size);accent-color:var(--fg);margin:0;&:focus{--focus:transparent}}}& #repl-mode-desc{color:rgb(from currentColor r g b / 75%);flex-direction:column;padding-inline-start:19px;font-weight:400;display:flex;& label{margin:0}}}& #result{color:var(--fg);background:var(--bg);border:var(--panel-border);border-radius:2px;min-height:20px;max-height:40dvh;padding:0;overflow:auto;#sidebar:has(#replCheckBox:checked) &{padding:10px}& li{font-size:16px!important}}& #compiled-code{border:var(--panel-border);opacity:1;visibility:visible;border-bottom:0;border-left:0;flex-direction:column;padding-inline-start:3px;transition:opacity .1s,visibility linear;display:flex;overflow:hidden}& #compiled-code-toggle[aria-expanded=false]+#compiled-code{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .1s,visibility 0s linear .1s}& .ͼ2 .cm-line{opacity:.83;font-size:13px}& .ͼ2 .cm-gutters{background-color:#0000;&.cm-gutters-before{border-right-width:0}}}#footer{flex:0 0 36px;height:36px}@media screen and (width>=768px){#sidebar{min-height:0}#sidebar-controls,#compiled-code-toggle{flex-shrink:0}#sidebar-sections,#compiled-code-section,#compiled-code,#compiled-code>.cm-editor{flex:1;min-height:0}}.cm-editor{overflow:hidden}.cm-scroller{scrollbar-color:auto;scrollbar-width:auto;&::-webkit-scrollbar{width:18px;height:18px}&::-webkit-scrollbar-track{background:0 0}&::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-color);background-clip:padding-box;border:4px solid #0000;border-radius:12px;min-width:56px;min-height:56px}&::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-color-hover);background-clip:padding-box}&::-webkit-scrollbar-corner{background:0 0}}@supports not selector(::-webkit-scrollbar){.cm-scroller{scrollbar-color:var(--scrollbar-thumb-color) transparent}}[role=tooltip][popover]{position-area:bottom;position-try-fallbacks:flip-block;background:color-mix(in srgb, var(--bg), gray 10%);color:var(--fg);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s, translate .12s, display .12s allow-discrete, overlay .12s allow-discrete;border:0;border-radius:5px;margin:16px 0 0;padding:6px 12px;font:1em/1.5 system-ui,sans-serif;inset:auto;translate:0 -4px;box-shadow:0 0 0 .5px light-dark(#0000001f,#ffffff59),0 2px 20px light-dark(#00000029,#ffffff59)}[role=tooltip]:popover-open{opacity:1;translate:0}@starting-style{[role=tooltip]:popover-open{opacity:0;translate:0 -4px}}