@font-face{font-family:Euclid;src:url(/reference-assets/euclid-400.woff) format("woff");font-weight:400;font-display:swap}@font-face{font-family:Euclid;src:url(/reference-assets/euclid-500.woff) format("woff");font-weight:500;font-display:swap}@font-face{font-family:Euclid;src:url(/reference-assets/euclid-700.woff) format("woff");font-weight:700;font-display:swap}:root{font-family:Euclid,Arial,sans-serif;color:#25265e;--header:#fff;--toolbar:#fafafa;--editor:#fafafa;--output:#f4f4f4;--rail:#eef4f7;--border:#dedee4;--text:#535467;--muted:#9394a4;--active:#eee;--menu:#fff;--blue:#0556f3;--split:50%;color-scheme:light}.dark{--header:#1f2023;--toolbar:#2c2e33;--editor:#1c2130;--output:#1f2023;--rail:#363b40;--border:#46484f;--text:#f4f4f5;--muted:#9b9da7;--active:#252a38;--menu:#2c2e33;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:var(--header);color:var(--text);overflow:hidden;font-size:14px}button,a,input,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit;border:0;background:none}button:disabled{cursor:default;opacity:.45}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px}button:hover{filter:brightness(1.12)}[hidden]{display:none!important}svg{display:block;width:24px;height:24px}.header{height:102px;border-bottom:1px solid var(--border);display:flex;align-items:center;padding:16px 56px;gap:18px}.brand{font-size:23px;font-weight:700;text-decoration:none;color:#0556f3;display:flex;align-items:center;line-height:31px;letter-spacing:-.7px}.dark .brand{color:#fff}.brand-mark{font-family:Arial,sans-serif;font-size:40px;line-height:28px;margin-right:-1px;transform:translateY(-3px)}h1{font-size:14px;font-weight:400;line-height:20px;margin:4px 0 0}.mobile,.mobile-toolbar,.drawer-heading{display:none}#sidebar{position:fixed;top:102px;left:0;bottom:0;width:56px;background:var(--rail);border-right:1px solid var(--border);overflow-y:auto;scrollbar-width:none;z-index:20}#languages{display:flex;flex-direction:column;gap:11px;padding:8px}#languages a{width:39px;height:39px;flex:none;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;text-decoration:none;color:var(--text);position:relative}#languages a svg{width:24px;height:24px}#languages a span{display:none}#languages a:hover{background:#0556f326}#languages a[aria-current=page]{background:var(--blue);border-color:var(--blue)}.dark #languages a svg,#languages a[aria-current=page] svg{filter:brightness(0) invert(1)}#workspace{position:absolute;inset:102px 0 0 56px;display:grid;grid-template-columns:minmax(200px,var(--split)) 2px minmax(200px,1fr)}#editor-pane,#output-pane{min-width:0;min-height:0;display:flex;flex-direction:column}.toolbar{height:48px;flex-shrink:0;background:var(--toolbar);display:flex;align-items:center;border-bottom:1px solid var(--border)}.editor-toolbar{justify-content:space-between}.file-tab{height:48px;display:flex;align-items:center;padding:0 18px;border-right:1px solid var(--border);background:var(--editor);white-space:nowrap}.actions{display:flex;align-items:center;gap:16px;padding:0 12px}.primary{background:var(--blue);color:#fff;border:1px solid var(--blue);border-radius:2px;height:32px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:4px}.run{min-width:80px}.run svg{width:12px;height:12px;filter:brightness(0) invert(1)}.outline{border:1px solid var(--border);border-radius:2px;min-height:32px;padding:0 18px}.output-toolbar{padding-left:20px;justify-content:space-between}.output-toolbar .actions{gap:8px;padding:0}.icon-button{width:32px;height:32px;padding:4px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.icon-button svg{width:24px;height:24px}.dark .icon-button svg,.dark .menu svg{filter:brightness(0) invert(1);opacity:.75}.icon-button:hover{background:#8882}.more{position:relative}.more:after{content:"";position:absolute;right:6px;top:4px;width:5px;height:5px;background:#ff9500;border-radius:50%}#editor{flex:1;min-height:0;overflow:hidden;background:var(--editor)}.cm-editor{height:100%;font-family:Droid Sans Mono,Menlo,Monaco,Courier New,monospace;font-size:14px;line-height:22px}.cm-scroller{font-family:inherit!important;overflow:auto!important}.cm-content{padding:8px 0!important}.cm-line{padding-left:12px!important}.cm-gutters{border:0!important;padding:8px 0 0!important}.cm-lineNumbers .cm-gutterElement{min-width:30px;padding-left:8px!important;padding-right:6px!important}.cm-activeLine{background:var(--active)!important}.cm-activeLineGutter{background:transparent!important}.cm-foldGutter{display:none}.cm-focused{outline:none!important}#divider{background:var(--border);position:relative;cursor:col-resize;z-index:10;touch-action:none}#divider>span{position:absolute;left:-7px;top:50%;transform:translateY(-50%);background:var(--toolbar);border:1px solid var(--border);border-radius:9px;width:16px;height:56px;display:flex;align-items:center;justify-content:center}#divider svg{width:12px;height:20px}#output-pane{background:var(--output)}#output-body{flex:1;overflow:auto;min-height:0;padding:12px 20px;position:relative;font-family:Droid Sans Mono,Menlo,Monaco,Courier New,monospace;font-size:14px;line-height:22px}pre{font:inherit;white-space:pre-wrap;overflow-wrap:anywhere;margin:0}#stderr{color:#ed7f88}#completion{margin-top:20px;white-space:pre-wrap}#input-tray{border-top:1px solid var(--border);background:var(--output)}#input-tray summary{padding:9px 20px;cursor:pointer;list-style:none}#input-tray summary:after{content:"⌃";float:right}#input-tray:not([open]) summary:after{content:"⌄"}#input-tray span{color:var(--muted);font-size:12px}#stdin{background:var(--editor);color:var(--text);border:0;border-top:1px solid var(--border);padding:12px 20px;width:100%;height:94px;resize:vertical;max-height:30vh;display:block;font:14px/22px monospace;outline:none}#runtime-note{font-size:10px;color:var(--muted);text-align:left;padding:5px 20px;border-top:1px solid var(--border);line-height:16px}.menu{position:fixed;right:0;top:150px;background:var(--menu);border:1px solid var(--border);box-shadow:0 6px 12px #0002;width:202px;padding:4px 0;border-radius:3px;z-index:50}.menu button{display:flex;align-items:center;gap:12px;width:100%;padding:9px 16px;text-align:left;white-space:nowrap}.menu button:hover{background:#8882}.menu svg{width:20px;height:20px}.menu small{color:#fff;background:#ff9600;border-radius:12px;font-size:10px;padding:1px 7px;margin-left:auto;font-weight:700}#menu-share{display:none}dialog{background:var(--menu);color:var(--text);border:1px solid var(--border);border-radius:3px;width:min(440px,calc(100vw - 32px));padding:28px;font-size:14px;line-height:1.6;max-height:85vh;overflow:auto}dialog::backdrop{background:#0008}dialog h2{font-size:20px;font-weight:500;margin:0 0 28px}dialog .close-dialog{position:absolute;right:12px;top:12px}dialog input{width:100%;height:36px;border:1px solid var(--border);color:var(--text);background:var(--editor);padding:8px;font-size:12px}#copy-link{width:100%;margin-top:16px}dialog a{color:#6698ff}.muted{color:var(--muted);font-size:12px}#toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%);background:var(--menu);color:var(--text);border:1px solid var(--border);padding:12px 20px;border-radius:4px;opacity:0;pointer-events:none;z-index:100;transition:opacity .15s}#toast.visible{opacity:1}.expanded .header{display:none}.expanded #sidebar,.expanded #workspace{top:0}.expanded .menu{top:48px}#trace-panel{font-family:Euclid,sans-serif;margin-top:20px;border:1px solid var(--border);padding:16px}.trace-heading,.trace-controls{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px}#trace-line{color:var(--muted);margin:12px 0}#trace-panel table{width:100%;border-collapse:collapse;table-layout:fixed;font:13px/20px monospace}#trace-panel th,#trace-panel td{border:1px solid var(--border);padding:8px;text-align:left;overflow-wrap:anywhere}#trace-note{font-size:12px;color:var(--muted)}#html-preview{border:0;background:#fff;width:100%;height:100%;min-height:300px}.cm-trace-line{background:#edc34b30!important}@media(max-width:767px){.header{height:51px;padding:5px 16px;gap:16px}.header .brand{font-size:15px;line-height:18px;letter-spacing:-.4px}.brand-mark{font-size:25px;line-height:18px}h1{font-size:10px;line-height:14px;margin:0}.mobile{display:inline-flex}.header .icon-button{width:24px;padding:0}#sidebar{top:0;bottom:0;width:272px;transform:translate(-100%);transition:transform .15s;background:var(--menu);z-index:80}.nav-open #sidebar{transform:translate(0)}#nav-backdrop{position:fixed;inset:0;background:#0008;z-index:70}.drawer-heading{display:flex;align-items:center;justify-content:space-between;padding:20px 16px}#languages{gap:0;padding:0 8px}#languages a{width:100%;height:48px;border:0;justify-content:flex-start;gap:16px;padding:0 12px}#languages a span{display:block}#languages a[aria-current=page]{color:#fff}#workspace{left:0;top:51px;display:flex;flex-direction:column}#editor-pane,#output-pane{flex:1;min-height:0}#output-pane,.output-active #editor-pane{display:none}.output-active #output-pane{display:flex}.mobile-toolbar{display:flex;height:51px;flex-shrink:0;background:var(--toolbar);border-bottom:1px solid var(--border);align-items:center;gap:10px;padding:8px}.mobile-tabs{display:flex;margin-right:auto}.mobile-tabs button{border:1px solid var(--border);height:32px;min-width:80px;padding:0 12px}.mobile-tabs button+button{border-left:0}.mobile-tabs button.active{border:1px solid var(--blue);color:var(--blue)}.mobile-run{background:var(--blue);border-radius:2px;width:52px;min-width:52px;height:32px;display:flex;align-items:center;justify-content:center}.mobile-run svg{width:20px;height:20px}.mobile-toolbar .visualize{border:1px solid var(--border);width:46px}.mobile-toolbar .more{width:20px;padding:0}.editor-toolbar,.output-toolbar,#divider{display:none}.cm-editor{font-size:16px;line-height:22px}.cm-content,.cm-gutters{padding-top:4px!important}.cm-line{padding-left:8px!important}.menu,.expanded .menu{right:12px;top:102px;width:202px}#menu-share{display:flex}#fullscreen{display:none}#output-body{padding:14px 16px}#runtime-note{padding-left:16px}#input-tray summary,#stdin{padding-left:16px}.expanded .header{display:flex}.expanded #workspace{top:51px}#toast{width:max-content;max-width:90vw;text-align:center}.trace-controls .outline{padding:0 8px}.mobile-tabs,.mobile-tabs button{min-width:0}}@media(max-width:360px){.mobile-toolbar{gap:6px}.mobile-tabs button{padding:0 8px}.mobile-toolbar .visualize{width:32px}}@media(min-width:768px){.header .mobile{display:none}}.cm-editor{background:var(--editor)!important}.cm-scroller{font:14px/22px Droid Sans Mono,Menlo,Monaco,Courier New,monospace!important}.cm-gutters{background:var(--editor)!important;line-height:22px!important}.cm-line{line-height:22px!important}#languages svg path:not([fill]){fill:#25265e}#languages svg path{fill-opacity:.67}.dark #languages svg path,#languages a[aria-current=page] svg path{fill-opacity:1}#divider>span{border:0;background:none}#divider svg{width:16px;height:56px}.dark #divider rect{fill:#2c2e33;stroke:#46484f}.dark #divider circle{fill:#65666d}@media(max-width:767px){.cm-scroller{font-size:16px!important}}@font-face{font-family:Droid Sans Mono;src:url(/reference-assets/droid-sans-mono.woff) format("woff");font-weight:400;font-display:swap}@media(max-width:767px){#sidebar{visibility:hidden}.nav-open #sidebar{visibility:visible}.dark .mobile-tabs button.active{color:#fff}.mobile-toolbar .visualize svg{filter:none;opacity:1}.mobile-toolbar .visualize svg path{stroke:#24c4ca}}:root{--split: calc(50% - 2px) }.cm-lineNumbers .cm-gutterElement{min-width:38px}.cm-line{padding-left:2px!important}.editor-toolbar .visualize{width:100px;padding:0}#languages{padding-top:9px;gap:12px}#languages a{width:38px;height:38px}@media(max-width:767px){#languages a{width:100%;height:48px}#languages{padding-top:0;gap:0}.cm-lineNumbers .cm-gutterElement{min-width:30px}.cm-line{padding-left:8px!important}}#languages a[data-language=html] svg path{fill:#25265e;fill-opacity:.67}.dark #languages a[data-language=html] svg path,#languages a[data-language=html][aria-current=page] svg path{fill:#fff;fill-opacity:1}body:not(.dark) .icon-button svg,body:not(.dark) .menu svg{filter:brightness(0) saturate(100%);opacity:.5}body:not(.dark) .mobile-toolbar .visualize svg{filter:none;opacity:1}