:root{color-scheme:light dark;font-family:Iosevka Web,Iosevka,Fira Code,SF Mono,ui-monospace,monospace;line-height:1.5;font-weight:300;--font-mono: "Iosevka Web", "Iosevka", "Fira Code", "SF Mono", ui-monospace, monospace;--c-white: #fff;--c-black: #292f2f;--c-surface: light-dark(var(--c-white), var(--c-black));--c-surface-on: light-dark(var(--c-black), var(--c-white));--c-surface-on-alt: color-mix(in lab, var(--c-surface-on) 50%, var(--c-surface));--c-border: color-mix(in lab, var(--c-surface-on) 20%, var(--c-surface));--c-surface-subtle: color-mix(in lab, var(--c-surface-on) 5%, var(--c-surface));--s-line: 1px;--s-line--fat: 2px;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-color:var(--c-surface-on) var(--c-surface);scrollbar-width:thin}*{margin:0;padding:0;box-sizing:border-box}button,input,select{font:inherit;color:inherit;background:none;border:none;outline:none}::selection{background:var(--c-surface-on);color:var(--c-surface)}body{background:var(--c-surface);color:var(--c-surface-on);padding:2rem}h1{font-size:1rem;font-weight:300;margin:0 0 .75rem;letter-spacing:.05em;text-transform:uppercase}.intro{max-width:64ch;margin-bottom:2rem}.intro p{font-size:.85rem;line-height:1.5;margin:0 0 .5rem;color:color-mix(in oklab,var(--c-surface-on),transparent 15%)}.intro__links{display:flex;gap:1.25rem;font-size:.8rem}.intro__links a{color:var(--c-surface-on);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:color-mix(in oklab,var(--c-surface-on),transparent 60%)}.intro__links a:hover{text-decoration-color:var(--c-surface-on)}h3{font-size:.6rem;font-weight:400;margin-top:1rem;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.1em;color:var(--c-surface-on-alt);margin-left:1em}.layout{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr;margin-bottom:var(--s-line);max-height:calc(100vh - 6rem)}.input-column{display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:thin;min-height:0}.scope-block{background:var(--c-surface);box-shadow:inset 0 0 0 var(--s-line) var(--c-surface-on);padding:0}.scope-header{display:flex;align-items:center;gap:.5rem;padding:.4rem .75rem;background:var(--c-surface-subtle);font-weight:400;font-size:.7rem;box-shadow:0 var(--s-line) 0 0 var(--c-surface-on)}.scope-header .scope-name{font-weight:400;letter-spacing:.03em}.scope-header .scope-extends{font-size:.6rem;color:var(--c-surface-on-alt);font-weight:300}.scope-editor{overflow:hidden;background:var(--c-surface);border:var(--s-line) solid var(--c-surface-on)}.scope-editor .cm-editor{font-size:.7rem;background:transparent}.scope-editor .cm-content{font-family:inherit;padding:.25rem 0}.scope-editor .cm-line{padding:.1rem .75rem}.scope-editor .cm-focused{outline:none}.scope-editor .cm-gutters{display:none}.scope-editor .cm-cursor{border-left-color:var(--c-surface-on)}.scope-editor .cm-selectionBackground{background:color-mix(in lab,var(--c-surface-on) 15%,var(--c-surface))!important}.cm-tooltip-autocomplete{font-family:inherit!important;font-size:.7rem!important;background:var(--c-surface)!important;color:var(--c-surface-on)!important;border:none!important;box-shadow:inset 0 0 0 var(--s-line) var(--c-surface-on),0 4px 16px #0000001f!important;border-radius:0!important}.cm-tooltip-autocomplete ul{font-family:inherit!important}.cm-tooltip-autocomplete ul li{padding:.2rem .6rem!important;border-radius:0!important}.cm-tooltip-autocomplete ul li[aria-selected]{background:var(--c-surface-on)!important;color:var(--c-surface)!important}.cm-completionDetail{font-size:.6rem;color:var(--c-surface-on-alt);margin-left:.5rem}.cm-completionIcon{opacity:.5}.cm-inherited-line{opacity:.4}.cm-inherited-value{opacity:.5;font-style:italic}.cm-error-line{background:color-mix(in lab,#dc3545 8%,var(--c-surface));text-decoration:wavy underline color-mix(in lab,#dc3545 60%,var(--c-surface));text-underline-offset:3px}.add-scope-btn{font-size:.6rem;font-weight:400;padding:.4rem .75rem;border:none;box-shadow:inset 0 0 0 var(--s-line) var(--c-surface-on);background:var(--c-surface);cursor:pointer;color:var(--c-surface-on-alt);transition:transform .15s ease,box-shadow .15s linear,color .1s linear;transform:translateY(0)}.add-scope-btn:hover{color:var(--c-surface-on);transform:translateY(-2px);box-shadow:inset 0 0 0 var(--s-line) var(--c-surface-on),0 var(--s-line--fat) 0 0 var(--c-surface-on)}.color-picker-wrapper{animation:picker-fade-in .1s ease}.color-picker-wrapper color-input{opacity:0}@keyframes picker-fade-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.output-column{display:flex;flex-direction:column;margin-left:calc(var(--s-line) * -1);min-height:0}.tabs{display:flex;gap:0}.tab{padding:calc(.5rem - 1.5px) .75rem;line-height:1.5;font-size:.7rem;font-weight:400;box-shadow:inset 0 0 0 var(--s-line) var(--c-surface-on);margin-left:calc(-1 * var(--s-line));cursor:pointer;color:var(--c-surface-on-alt);transition:transform .15s ease,box-shadow .15s linear,color .1s linear;transform:translateY(0)}.tab:first-child{margin-left:0}.tab:hover{color:var(--c-surface-on);transform:translateY(-2px);box-shadow:inset 0 0 0 var(--s-line) var(--c-surface-on),0 var(--s-line--fat) 0 0 var(--c-surface-on);z-index:1}.tab.active{color:var(--c-surface-on);font-weight:400;background:var(--c-surface-on);color:var(--c-surface);z-index:1}.output{background:var(--c-surface);box-shadow:inset 0 0 0 var(--s-line) var(--c-surface-on);margin-top:calc(-1 * var(--s-line));padding:.75rem;font-family:inherit;font-size:.65rem;font-weight:300;line-height:1.6;overflow:auto;flex:1;white-space:pre-wrap;word-break:break-all;scrollbar-width:thin}.event-log{background:var(--c-surface-on);color:var(--c-surface);margin-top:calc(-1 * var(--s-line));box-shadow:inset 0 0 0 var(--s-line) var(--c-surface-on);padding:.5rem .75rem;font-size:.6rem;line-height:1.5;flex:1;overflow-y:auto;scrollbar-width:thin}.event-log .event-entry{margin-bottom:1px}.event-log .event-time{opacity:.4}.event-log .event-type{opacity:.7}.event-log .event-key{opacity:1}.example-view{background:var(--c-surface);box-shadow:inset 0 0 0 var(--s-line) var(--c-surface-on);margin-top:calc(-1 * var(--s-line));padding:2rem;flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;scrollbar-width:thin}.example-stage{width:100%;display:flex;justify-content:center}.example-error{position:absolute;top:.5rem;left:.5rem;right:.5rem;padding:.4rem .6rem;font-size:.65rem;background:color-mix(in lab,#dc3545 12%,var(--c-surface));color:#dc3545;box-shadow:inset 0 0 0 var(--s-line) color-mix(in lab,#dc3545 40%,var(--c-surface));z-index:10}.example-view{position:relative}.login-card{background:var(--card-surface);color:var(--card-on-surface);padding:var(--card-padding);border-radius:var(--card-radius);display:flex;flex-direction:column;gap:var(--card-gap);min-width:18rem;max-width:22rem;width:100%;box-shadow:0 1px 2px #0000000f,0 12px 32px #0000001f;font-family:var(--font-mono)}.login-title{font-size:1rem;font-weight:400;letter-spacing:.02em;margin:0}.login-subtitle{font-size:.7rem;color:var(--card-on-surface-weak);margin:0 0 .5rem}.login-field{display:flex;flex-direction:column;gap:.25rem;font-size:.65rem;letter-spacing:.05em;text-transform:uppercase;color:var(--card-on-surface-weak)}.login-field input{font-family:var(--font-mono);font-size:.8rem;text-transform:none;letter-spacing:normal;padding:.6rem .75rem;border-radius:calc(var(--card-radius) / 2);background:var(--card-input);color:var(--card-on-input);box-shadow:inset 0 0 0 var(--s-line) var(--card-border)}.login-field input::placeholder{color:var(--card-on-surface-weak)}.login-field input:focus{outline:none;box-shadow:inset 0 0 0 var(--s-line--fat) var(--card-interactive)}.login-btn{background:var(--card-interactive);color:var(--card-on-interactive);padding:.75rem 1rem;border-radius:calc(var(--card-radius) / 2);font-size:.75rem;font-weight:500;letter-spacing:.05em;cursor:pointer;transition:transform .15s ease,filter .15s ease}.login-btn:hover{transform:translateY(-1px);filter:brightness(1.08)}.login-btn:active{transform:translateY(0)}.login-footnote{font-size:.65rem;color:var(--card-on-surface-weak);margin:0;text-align:center}.login-footnote a{color:var(--card-interactive);text-decoration:none}.login-footnote a:hover{text-decoration:underline}.visualization,.table-view{background:var(--c-surface);box-shadow:inset 0 0 0 var(--s-line) var(--c-surface-on);padding:1rem;margin-top:calc(-1 * var(--s-line));flex:1;overflow:auto}.table-view table{width:100%;border-collapse:collapse;font-size:.7rem;font-family:var(--font-mono, ui-monospace, monospace)}.table-view th,.table-view td{text-align:left;padding:.4rem .6rem;border-bottom:1px solid color-mix(in oklab,var(--c-surface-on),transparent 85%);vertical-align:top}.table-view th{font-weight:500;font-size:.6rem;text-transform:uppercase;letter-spacing:.05em;color:var(--c-surface-on-alt);border-bottom-color:var(--c-surface-on)}.table-view code{font-family:inherit;background:none}.visualization label{display:inline-flex;align-items:center;gap:.4rem;font-size:.6rem;color:var(--c-surface-on-alt);margin-bottom:.75rem;cursor:pointer}.visualization label input[type=checkbox]{accent-color:var(--c-surface-on)}#svg-container svg{display:block;max-width:100%;height:auto}.new-scope-form{display:flex;gap:var(--s-line);align-items:stretch;margin-top:var(--s-line)}.new-scope-form input,.new-scope-form select{font-size:.65rem;padding:.4rem .6rem;box-shadow:inset 0 0 0 var(--s-line) var(--c-surface-on);background:var(--c-surface)}.new-scope-form input:focus,.new-scope-form select:focus{box-shadow:inset 0 0 0 var(--s-line--fat) var(--c-surface-on)}.new-scope-form button{font-size:.6rem;padding:.4rem .75rem;background:var(--c-surface-on);color:var(--c-surface);cursor:pointer;transition:transform .15s ease,box-shadow .15s linear;transform:translateY(0)}.new-scope-form button:hover{transform:translateY(-2px);box-shadow:0 var(--s-line--fat) 0 0 var(--c-surface-on)}@media(max-width:768px){.layout{grid-template-columns:1fr}}