.code-container {
    resize: both;
    overflow: hidden;
    margin: auto;
    width: 80vw;
    height: 80vh;
    min-width: 420px;
    min-height: 255px;
    position: relative;
    --glow-margin: 70px;
    filter: drop-shadow(0 0 75px rgba(0, 255, 55, 0.25));
  }
  
  .code-container::before {
    content: attr(content);
    position: absolute;
    bottom: 90px;
    right: 90px;
    z-index: 999;
    color: rgba(205, 255, 200, 0.5);
    text-shadow: 0 0 12px rgb(51, 153, 59);
    letter-spacing: 0.1em;
  }
  
  .code-container::after {
    content: "";
    background: linear-gradient(
      to right,
      transparent,
      black 25px, black 110px,
      transparent 110px 175px,
      black 175px, black calc(100% - 25px),
      transparent
    );
    position: absolute;
    top: 125px;
    left: var(--glow-margin);
    right: var(--glow-margin);
    height: 4px;
    display: block;
    z-index: 90;
    opacity: 0.5;
  }
  
  .glow-container {
    position: absolute;
    inset: 0;
    display: grid;
    z-index: 2;
    pointer-events: none;
    --glow: drop-shadow(0 0 1px rgb(130, 238, 139));
    filter: var(--glow) brightness(1.5) drop-shadow(0 0 10px rgb(191, 238, 130));
  }
  
  .augs {
    --aug-rect-l1: initial;
    --aug-l1-width: 110px;
    --aug-l1-height: 4px;
    --aug-l-center: 57px;
    
    --aug-rect-r1: initial;
    --aug-r1-width: (100% - 125px - 50px);
    --aug-r1-height: 4px;
    --aug-r-center: 57px;
    
    --aug-clip-tr1: initial;
    --aug-tr1-alt-join-out: initial;
    --aug-tr1: 17px;
    --aug-clip-tr2: initial;
    --aug-tr2: 17px;
    --aug-tr-extend1: 50px;
    
    --aug-round-tl1: initial;
    --aug-tl1: 8px;
    --aug-round-br1: initial;
    --aug-br1: 8px;
    margin: auto;
    width: calc(100% - var(--glow-margin) * 2);
    height: calc(100% - var(--glow-margin) * 2);
  }
  
  .glow-container .augs {
    --aug-border: initial;
    --aug-border-all: 2px;
    --aug-border-bg: linear-gradient(to bottom left, rgb(51, 153, 90), orange);
  }
  
  section.augs {
    position: absolute;
    inset: 0;
    margin: auto;
    --aug-inlay: initial;
    --aug-inlay-all: 2px;
    --aug-inlay-bg: url(http://augmented-ui.com/img/propjockey.png)
      center 70% / auto 70% no-repeat;
    --aug-inlay-opacity: 0.25;
  }
  section.augs::before {
    filter: brightness(0.2) blur(10px);
  }
  
  .dots {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 110px;
    height: 50px;
    --red: #fc199a;
    --yellow: #ffcc00;
    --green: #61e2ff;
    --close: radial-gradient(circle, var(--red), var(--red) 7px, transparent 8px);
    --min: radial-gradient(circle, var(--yellow), var(--yellow) 7px, transparent 8px);
    --max: radial-gradient(circle, var(--green), var(--green) 7px, transparent 8px);
    background: var(--close) -28px no-repeat,
                var(--min) -2px no-repeat,
                var(--max) 24px no-repeat;
    filter: brightness(0.5);
    opacity: 0.75;
    cursor: pointer;
    border: none;
  }
  
  input {
    position: absolute;
    top: 17px;
    left: 120px;
    width: calc(100% - 240px);
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    text-shadow: 0 0 12px rgb(75, 153, 51);
    border: none;
    text-align: center;
    letter-spacing: 0.1em;
  }
  
  .code {
    position: absolute;
    inset: 80px 10px 10px 10px;
    font-size: 20px;
    color: white;
    filter: brightness(1.2);
  }
  .code * {
    font-size: 18px;
    font-weight: normal;
    color: #b5b4b6;
    font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
  }
  
  body {
    display: grid;
    min-height: 100vh;
    width: 100vw;
    --c: rgb(0 0 0 / 0.95);
    --bgb: linear-gradient(var(--c), var(--c));
    --bg: repeating-conic-gradient(
      from 7.5deg at center center,
      hsl(200, 100%, 0%) 0deg 15deg,
      hsl(200, 100%, 60%) 10deg 30deg
    );
    background: black;
  }
  
  * {
    font: normal 1em sans-serif;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  
  /* https://marketplace.visualstudio.com/items?itemName=webrender.synthwave-x-fluoromachine */
  .bg {
    background: repeating-linear-gradient(
      to top,
      rgba(255, 255, 255, 0.03) 0px 2px,
      transparent 2px 4px
    ),
    linear-gradient(to bottom, #000000 75%, #000000);
  }
  .bg::after{
    content:'';
    height:50%;
    width:100%;
    display:block;
    background-image:linear-gradient(90deg, rgba(44, 252, 25, 0.1) 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(0deg, rgba(25, 252, 93, 0.1) 1px, rgba(0, 0, 0, 0) 1px);
    background-position:bottom;
    background-repeat:repeat;
    background-size:20px 20px;
    left: -25px;
    position: absolute;
    pointer-events: none;
    bottom: 0;
    transform: perspective(100px) rotateX(60deg);
    z-index: 0;
  }
  
  .CodeMirror-gutters {
    background: transparent;
    border: none;
    margin-right: 15px;
  }
  .CodeMirror {
    height: 100%;
    background: transparent;
  }
  .CodeMirror-linenumber {
    padding-right: 1em;
  }
  .CodeMirror-overlayscroll-horizontal div,
  .CodeMirror-overlayscroll-vertical div {
    background: rgba(104, 255, 99, 0.5);
  }
  .CodeMirror-scrollbar-filler { display: none!important; }
  
  /* codepen's highcontrast-dark theme */
  .cm-header{font-weight:700}.cm-strong{font-weight:700}.cm-em{font-style:italic}:root{--editor-top-bar-background: black;--tab-bg: #131417;--tab-border-color: #2a2c33;--resizer-background: var(--editor-top-bar-background);--resizer-border: #242424}.sidebar-false .main-header,.sidebar-false .main-header .header-wrap,.editor-footer{background:var(--editor-top-bar-background)}.CodeMirror-cursor{border-left-color:#fff!important}.CodeMirror-selected{background:rgba(255,255,255,.05)}.CodeMirror-focused .CodeMirror-selected{background:rgba(255,255,255,.1)}.CodeMirror-matchingbracket{border-bottom:1px solid rgba(255,255,255,.5)}.CodeMirror-matchingtag{border-bottom:1px solid rgba(255,255,255,.3)}.cm-searching{background:#000;outline:2px solid rgba(255,255,255,.25)}.CodeMirror-hints,.emmet-abbreviation-preview{border:1px solid #5a5f73;background:#1e1f26}.CodeMirror-hint{color:#fff}li.CodeMirror-hint-active{background:#c7c9d3;color:#000}.project-editor-warning{background:rgba(255,255,255,.1)}.editor-footer{border-top-color:var(--resizer-border,var(--cp-color-6))}.cm-keyword{color:#ffdd40}.cm-atom{color:#a3d65a}.box-html .cm-atom{color:#ff3c41}.cm-def{color:#0ebeff}.cm-variable{color:#c7c9d3}.cm-variable-2{color:#47cf73}.cm-variable-3{color:#fff}.cm-header{color:#ff3c41}.cm-number{color:#2bc7b9}.cm-property{color:#5e91f2}.cm-attribute{color:#e3e4e8}.cm-builtin{color:#0f7515}.cm-qualifier{color:#ffdd40}.cm-operator{color:#47cf73}.cm-meta{color:#0ebeff}.cm-string{color:#2bc7b9}.cm-string-2{color:#d75093}.cm-tag{color:#ffdd40}.box-css .cm-tag{color:#ff8d41}.cm-tag.cm-bracket{color:#9b9dad}.cm-comment{color:#88afbf}body.editor{background:#131417}.box.box.box,.editor .top-boxes,.CodeMirror-gutter-wrapper,body.project .editor-pane,body.project .editor{background:#131417}.box.box.box pre,.editor .top-boxes pre,.CodeMirror-gutter-wrapper pre,body.project .editor-pane pre,body.project .editor pre{color:#d5d7de}.CodeMirror-guttermarker-subtle,.CodeMirror-linenumber{color:rgba(113,119,144,.6)}#output pre::-webkit-scrollbar,#output iframe::-webkit-scrollbar{width:.5em;height:.5em}#output pre::-webkit-scrollbar-thumb,#output iframe::-webkit-scrollbar-thumb{background:#000000}#output pre::-webkit-scrollbar-track,#output iframe::-webkit-scrollbar-track{background:0 0}.CodeMirror-simplescroll-horizontal div,.CodeMirror-simplescroll-vertical div{background:#373c49}.powers .mini-button{background:#444857}.powers .mini-button:hover,.powers .mini-button:focus{background:#c7c9d3}.powers .mini-button:hover svg,.powers .mini-button:focus svg{fill:#000}
  
  /* theme overrides original source */
  /* https://marketplace.visualstudio.com/items?itemName=webrender.synthwave-x-fluoromachine */
  /* I just ported it to codemirror */
  
  .highcontrast-dark .cm-header {
    font-weight: bold
  }
  
  .highcontrast-dark .cm-strong {
    font-weight: bold
  }
  
  .highcontrast-dark .cm-em {
    font-style: italic
  }
  
  .highcontrast-dark .CodeMirror-cursor {
    border-left-color: white !important
  }
  
  .highcontrast-dark .CodeMirror-selected {
    background: rgba(255,255,255,0.05)
  }
  
  .highcontrast-dark .CodeMirror-focused .CodeMirror-selected {
    background: rgba(255,255,255,0.1)
  }
  
  .highcontrast-dark .CodeMirror-matchingbracket {
    border-bottom: 1px solid rgba(255,255,255,0.5)
  }
  
  .highcontrast-dark .CodeMirror-matchingtag {
    border-bottom: 1px solid rgba(255,255,255,0.3)
  }
  
  .highcontrast-dark .powers {
    border-bottom: 1px solid rgba(255,255,255,0.05)
  }
  
  .highcontrast-dark .cm-searching {
    background: black;
    outline: 2px solid rgba(255,255,255,0.25)
  }
  
  .highcontrast-dark .CodeMirror-hints,
  .highcontrast-dark .emmet-abbreviation-preview {
    border: 1px solid #5a5f73;
    background: #1e1f26
  }
  
  .highcontrast-dark .CodeMirror-hint {
    color: white
  }
  
  .highcontrast-dark li.CodeMirror-hint-active {
    background: #c7c9d3;
    color: black
  }
  
  .highcontrast-dark .project-editor-warning {
    background: rgba(255,255,255,0.1)
  }
  
  .highcontrast-dark .cm-atom {
    color: #63ff85;
  }
  
  .highcontrast-dark .box-html .cm-atom {
    color: #ff3c41
  }
  
  .highcontrast-dark .cm-def,
  .highcontrast-dark .cm-variable-2,
  .highcontrast-dark .cm-variable,
  .highcontrast-dark .box-js .cm-variable + .cm-property {
    color: #61e2ff;
    text-shadow: 0 0 2px #001716, 0 0 5px #03edf933, 0 0 10px #ffff6633;
  }
  
  .highcontrast-dark .cm-header {
    color: #ff3c41
  }
  .highcontrast-dark .cm-builtin {
    color: #63e48a
  }
  
  .highcontrast-dark .cm-number {
    color: #75ff63;
  }
  
  
  .highcontrast-dark .cm-operator,
  .highcontrast-dark .cm-variable-3,
  .highcontrast-dark .cm-attribute,
  .highcontrast-dark .cm-property,
  .highcontrast-dark .cm-keyword,
  .highcontrast-dark .presentation > .cm-def,
  .highcontrast-dark .cm-qualifier {
    color: #19fc4a;
    text-shadow: 0 0 2px #09b63a, 0 0 35px #ffffff44, 0 0 10px #4efc19, 0 0 2px #2cfc19;
  }
  .highcontrast-dark .cm-operator,
  .highcontrast-dark .cm-variable-3,
  .highcontrast-dark .cm-attribute,
  .highcontrast-dark .cm-property {
    font-style: italic;
  }
  
  .highcontrast-dark .cm-meta,
  .highcontrast-dark .cm-meta + .cm-property,
  .highcontrast-dark .cm-string,
  .highcontrast-dark .cm-string-2 {
    color: #63ff78;
    text-shadow: none;
  }
  
  .highcontrast-dark .cm-tag,
  .highcontrast-dark .cm-callee,
  .highcontrast-dark .box-css .cm-tag,
  .highcontrast-dark .cm-tag.cm-bracket,
  .highcontrast-dark .box-js .cm-property  {
    color: #ffcc00;
    text-shadow: 0 0 2px #0c100d, 0 0 3px #ffaa0099, 0 0 5px #ffaa0099, 0 0 10px #ffaa0099;
    font-style: italic;
  }
  
  .highcontrast-dark .cm-comment {
    font-style: italic;
    color: #9963ff99;
    text-shadow: 0 0 2px #001716, 0 0 5px #03edf933, 0 0 10px #ffff6633;
  }
  
  body.editor.highcontrast-dark {
    background: #241b2f;
  }
  
  .highcontrast-dark .box.box.box,
  .editor.highcontrast-dark .top-boxes,
  .highcontrast-dark .CodeMirror-gutter-wrapper,
  body.project.highcontrast-dark .editor-pane,
  body.project.highcontrast-dark .editor {
    background: none;
  }
  .editor.highcontrast-dark .top-boxes {
    --swxfm__c: rgb(135, 255, 99);
    background: repeating-linear-gradient(
      to top,
      rgba(255, 255, 255, 0.03) 0px 2px,
      transparent 2px 4px
    ),
    linear-gradient(to bottom, #093312 75%, #10430b);
  }
  .editor.highcontrast-dark .top-boxes:after{
    content:'';
    height:300px;
    width:100%;
    display:block;
    background-image:linear-gradient(90deg, rgba(25, 252, 36, 0.1) 1px, rgba(0,0,0,0) 1px), linear-gradient(0deg, rgba(33, 252, 25, 0.1) 1px, rgba(0,0,0,0) 1px);
    background-position:bottom;
    background-repeat:repeat;
    background-size:20px 20px;
    left: -25px;
    position: absolute;
    pointer-events: none;
    bottom: 0;
    transform: perspective(100px) rotateX(60deg);
    z-index: 0;
  }
  
  .highcontrast-dark .box.box.box pre,
  .editor.highcontrast-dark .top-boxes pre,
  .highcontrast-dark .CodeMirror-gutter-wrapper pre,
  body.project.highcontrast-dark .editor-pane pre,
  body.project.highcontrast-dark .editor pre {
    color: #b5b4b6;
  }
  
  .highcontrast-dark .CodeMirror-guttermarker-subtle,
  .highcontrast-dark .CodeMirror-linenumber {
    color: #4fc02d66;
    text-shadow: 0 0 2px #343a33, 0 0 35px #ffffff44, 0 0 10px #39c02d66, 0 0 2px #3ec02d66;
  }