:root { color-scheme: light dark; --f: monospace; --pad: .4rem; --bg: Canvas; --fg: CanvasText; --d: light-dark(#eee,#222); --hb: light-dark(#081480,#88cca8); --hf: light-dark(white,black) }
html { background-color: var(--d) }
* { box-sizing: border-box; margin: 0; padding: 0; border-width: 0; border-color: currentColor; border-style: solid; resize: none; font-size: 12px }
body { font-family: var(--f); color: var(--fg) }
input, textarea { font: inherit; background: none; color: inherit; outline: none; caret-color: var(--hb) }
input:focus, textarea:focus { border-color: var(--hb) }
::selection { background: var(--hb); color: var(--hf) }
.btn { border-radius: 5px; padding: var(--pad) .75em }
.hl { background: var(--hb); color: var(--hf); border-color: var(--hb) }
.rng { outline: 2px solid var(--hb); outline-offset: 2px }
.flx { display: flex } .col { flex-direction: column } .g { gap: var(--pad) } .aic { align-items: center } .afs { align-self: flex-start } .fg1 { flex-grow: 1; min-width: 0; min-height: 0 } .fs0 { flex-shrink: 0 }
.ba { border-width: 1px } .bb { border-bottom-width: 1px } .bd { border-style: dotted }
.pad { padding: var(--pad) } .bgc { background-color: var(--bg) } .scr { height: 100vh } .ovh { overflow: hidden } .hid { display: none } .ell { overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
.sel { user-select: text } .usn { user-select: none } .ptr { cursor: pointer } .mv { cursor: move }