:root{
    --bg:#0a0d0a;
    --panel:#111611;
    --line:#2a3a2a;
    --phosphor:#7cff8a;
    --phosphor-dim:#3f6b46;
    --amber:#ffb454;
    --mono: 'Courier New', monospace;
  }
  *{
    box-sizing:border-box;
    -webkit-tap-highlight-color:transparent;
    -webkit-user-select:none;
    user-select:none;
    -webkit-touch-callout:none;
  }
  html,body{
    margin:0; height:100%; background:var(--bg); color:var(--phosphor);
    font-family:var(--mono); overflow:hidden;
  }
  img, canvas, a{
    -webkit-user-drag:none;
    user-drag:none;
  }
  #wrap{
    display:flex; flex-direction:column; height:100%; height:100dvh;
  }
  #wrap.fullscreen-layout #footer,
  #wrap.fullscreen-layout #compatNotice{
    display:none;
  }
  #wrap:fullscreen,
  #wrap:-webkit-full-screen{
    width:100%;
    height:100%;
    background:#000;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  #popoutBar{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:50;
    display:flex;
    align-items:center;
    gap:0.5rem;
    padding:0.35rem 0.65rem;
    background:rgba(8,12,8,0.92);
    border-bottom:1px solid var(--line);
    font-size:11px;
    letter-spacing:0.06em;
  }
  #popoutBar[hidden]{ display:none !important; }
  #popoutBar .popout-label{ color:var(--phosphor); margin-right:auto; }
  #popoutBar button{
    background:#1a2a1a;
    border:1px solid var(--line);
    color:var(--phosphor);
    font:inherit;
    font-size:11px;
    padding:0.3rem 0.55rem;
    cursor:pointer;
  }
  #popoutBar button:hover{ border-color:var(--phosphor); }
  html.crt-popout #wrap{ padding-top:34px; }
  html.crt-popout #wrap:fullscreen,
  html.crt-popout #wrap:-webkit-full-screen{ padding-top:0; }
  html.crt-popout #wrap:fullscreen #popoutBar,
  html.crt-popout #wrap:-webkit-full-screen #popoutBar{ display:none !important; }
  #wrap.fullscreen-layout.mobile-landscape,
  #wrap.fullscreen-layout:not(.mobile-landscape){
    height:100dvh;
    min-height:100dvh;
    max-height:100dvh;
    overflow:hidden;
    padding:
      env(safe-area-inset-top, 0px)
      env(safe-area-inset-right, 0px)
      env(safe-area-inset-bottom, 0px)
      env(safe-area-inset-left, 0px);
    box-sizing:border-box;
  }
  #wrap.fullscreen-layout.mobile-landscape #vkeyboard .vk-side{
    max-width:34vw;
  }
  #wrap.fullscreen-layout:not(.mobile-landscape) #stage{
    flex:1 1 auto;
    min-height:0;
    width:100%;
    padding:0;
  }
  #wrap.fullscreen-layout:not(.mobile-landscape) #vkeyboard{
    flex:0 0 auto;
    width:100%;
  }
  #stage{
    flex:1 1 auto; min-height:0; position:relative; display:flex;
    align-items:center; justify-content:center;
    background:#000; overflow:hidden;
    touch-action:none;
  }
  #stage canvas{
    display:block; image-rendering: pixelated;
    touch-action:none;
  }
  #termForm{
    position:absolute; left:0; bottom:0; width:1px; height:1px;
    margin:0; padding:0; border:0; overflow:hidden; z-index:3;
  }
  #hiddenInput, #notesInput{
    position:absolute; opacity:0; width:1px; height:1px;
    padding:0; border:none; font-size:16px; caret-color:transparent;
    font-family:var(--mono);
    resize:none;
  }
  #webglFallback{
    display:none; color:var(--phosphor); text-align:center;
    padding:24px; max-width:420px; line-height:1.6; font-size:13px;
  }
  #webglFallback b{ color:var(--amber); display:block; margin-bottom:8px; letter-spacing:.08em; }
  #compatNotice{
    display:none;
    flex:0 0 auto;
    padding:10px 14px 12px;
    background:#0c100c;
    border-top:1px solid var(--line);
    color:var(--phosphor-dim);
    font-size:11px;
    line-height:1.55;
    letter-spacing:.02em;
  }
  #compatNotice.visible{ display:block; }
  #compatNotice b{
    display:block;
    color:var(--amber);
    letter-spacing:.08em;
    margin-bottom:6px;
    font-size:12px;
  }
  #compatNotice ul{
    margin:0 0 10px;
    padding-left:18px;
  }
  #compatNotice li{ margin-bottom:4px; }
  #compatNotice li:last-child{ margin-bottom:0; }
  #compatDismiss{
    background:transparent;
    border:1px solid var(--phosphor-dim);
    color:var(--phosphor);
    font-family:var(--mono);
    font-size:11px;
    font-weight:bold;
    padding:7px 12px;
    cursor:pointer;
    letter-spacing:.05em;
    text-transform:uppercase;
  }
  #compatDismiss:active{ background:var(--phosphor-dim); color:#000; }
  #footer{
    flex:0 0 auto; display:flex; width:100%;
    background:#000; border-top:2px solid var(--phosphor-dim);
  }
  .footer-btn{
    flex:1 1 0; min-width:0; display:flex; align-items:center; justify-content:center;
    padding:12px 4px; background:#000; color:var(--phosphor);
    font-family:var(--mono); font-weight:bold; text-transform:uppercase;
    letter-spacing:.03em; font-size:clamp(9px, 2.6vw, 13px);
    text-decoration:none; border-right:1px solid var(--phosphor-dim);
    cursor:pointer; user-select:none; white-space:nowrap; overflow:hidden;
    text-overflow:ellipsis; text-align:center;
  }
  .footer-btn:last-child{ border-right:none; }
  .footer-btn .key{ color:var(--amber); }
  .footer-btn:hover, .footer-btn:active{ background:var(--phosphor); color:#000; }
  .footer-btn:hover .key, .footer-btn:active .key{ color:#000; }
  #panel{
    display:none;
    flex:0 0 auto;
    padding:12px 16px;
    background:var(--panel);
    border-top:1px solid var(--line);
    overflow-y:auto;
    max-height:42vh;
  }
  #panel.visible{
    display:block;
  }
  #panel h1{
    font-size:13px; letter-spacing:.12em; margin:0 0 4px;
    color:var(--phosphor); text-transform:uppercase;
  }
  #panel .sub{ color:var(--phosphor-dim); margin:0 0 10px; font-size:11px; line-height:1.5; max-width:70ch; }
  #panel .cmds{ color:var(--phosphor-dim); margin:0 0 14px; font-size:11px; line-height:1.7; }
  #panel .cmds b{ color:var(--amber); }
  .toggles{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr));
    gap:6px 20px; margin-bottom:14px;
  }
  .sliders{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr));
    gap:4px 20px;
  }
  .row{ margin-bottom:10px; }
  .row label{
    display:flex; justify-content:space-between; margin-bottom:2px;
    color:var(--phosphor-dim); letter-spacing:.03em;
  }
  .row label span.val{ color:var(--amber); }
  input[type=range]{
    width:100%; accent-color: var(--phosphor); background:transparent;
  }
  .toggle-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:0; }
  .toggle-row label{ color:var(--phosphor-dim); letter-spacing:.03em; }
  hr{ border:none; border-top:1px solid var(--line); margin:12px 0; }

  #vkeyboard{
    display:none;
    flex:0 0 auto;
    background:#12120e;
    border-top:2px solid var(--phosphor-dim);
    padding:6px 4px 8px;
    touch-action:manipulation;
  }
  #vkeyboard .vk-tray,
  #vkeyboard .vk-portrait-tray{
    perspective:520px;
    max-width:480px;
    margin:0 auto;
    transition:opacity 1.5s ease, filter 1.5s ease;
  }
  #vkeyboard:not(.awake) .vk-tray,
  #vkeyboard:not(.awake) .vk-portrait-tray{
    opacity:0.72;
    filter:brightness(0.78);
  }
  #vkeyboard.awake .vk-tray,
  #vkeyboard.awake .vk-portrait-tray{
    opacity:1;
    filter:none;
  }
  #vkeyboard .vk-side{
    display:none;
  }
  #vkeyboard:not(.awake){ pointer-events:none; }
  .vk-rows{
    transform:rotateX(14deg);
    transform-origin:center top;
  }
  .vk-row{
    display:flex;
    gap:3px;
    margin-bottom:3px;
  }
  .vk-row.inset{
    padding-left:5%;
    padding-right:5%;
  }
  .vk-key{
    flex:1 1 0;
    min-width:0;
    min-height:52px;
    padding:0 2px;
    border:1px solid #3a3a30;
    border-bottom:3px solid #0a0a08;
    border-radius:3px 3px 2px 2px;
    background:linear-gradient(#2a2a22, #141410);
    color:var(--phosphor-dim);
    font-family:var(--mono);
    font-weight:bold;
    font-size:clamp(20px, 5.4vw, 26px);
    letter-spacing:.04em;
    cursor:pointer;
    user-select:none;
    -webkit-user-select:none;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }
  .vk-row.utility .vk-key.letter{
    flex:1 1 0;
  }
  .vk-key.shift,
  .vk-key.del{
    flex:1.55 1 0;
    font-size:clamp(14px, 3.8vw, 18px);
    letter-spacing:.02em;
  }
  .vk-key.del{
    font-size:clamp(18px, 4.8vw, 24px);
  }
  .vk-row.bottom .vk-key.mute,
  .vk-row.bottom .vk-key.book{
    flex:0 0 calc((100% - 27px) / 10);
    min-height:52px;
    padding:0;
    color:var(--phosphor);
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .vk-key.space{
    flex:1 1 auto;
    min-height:44px;
    font-size:clamp(12px, 3vw, 16px);
    letter-spacing:.18em;
    color:var(--phosphor-dim);
  }
  .vk-row.bottom .vk-key.run{
    flex:0 0 calc(((100% - 27px) / 10) * 2 + 3px);
    min-height:52px;
    font-size:clamp(14px, 3.8vw, 18px);
    letter-spacing:.06em;
    color:var(--amber);
  }
  .vk-key.mute .vk-mute-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    pointer-events:none;
  }
  .vk-key.mute .vk-mute-icon svg{
    width:clamp(18px, 5vw, 22px);
    height:clamp(18px, 5vw, 22px);
  }
  .vk-key.mute.muted{
    color:var(--phosphor-dim);
    opacity:0.75;
  }
  .vk-key.book .vk-book-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    pointer-events:none;
  }
  .vk-key.book .vk-book-icon svg{
    width:clamp(20px, 5.4vw, 24px);
    height:clamp(20px, 5.4vw, 24px);
  }
  .vk-key.book.active .vk-book-icon{
    color:var(--amber);
  }
  .vk-key.shift.active{
    color:var(--amber);
    border-color:#6a5030;
  }
  .vk-key.vk-disabled{ opacity:.35; pointer-events:none; }
  .vk-key:active:not(.vk-disabled):not(.shift.active){
    transform:translateY(2px);
    border-bottom-width:1px;
    background:var(--phosphor);
    color:#000;
  }

  .hb-float-btn{
    display:none;
    position:absolute;
    right:10px;
    bottom:10px;
    z-index:5;
    width:44px;
    height:44px;
    padding:0;
    border:1px solid var(--phosphor-dim);
    background:#141410;
    color:var(--phosphor);
    border-radius:4px;
    cursor:pointer;
    align-items:center;
    justify-content:center;
  }
  .hb-float-btn:not([hidden]){
    display:flex;
  }
  .hb-float-btn .vk-book-icon svg{
    width:22px;
    height:22px;
  }
  .hb-float-btn.active .vk-book-icon{
    color:var(--amber);
  }

  @media (max-width:600px){
    .hb-float-btn{ display:none !important; }
    #vkeyboard{ display:block; }
    #stage{
      align-items:flex-start;
      justify-content:center;
      padding:4px 0;
      box-sizing:border-box;
    }
    #termForm{ display:none !important; }
    #panel{ max-height:46vh; font-size:11px; }
  }

  #wrap.mobile-landscape{
    flex-direction:row;
    align-items:stretch;
  }
  #wrap.mobile-landscape #footer,
  #wrap.mobile-landscape #compatNotice{
    display:none;
  }
  #wrap.mobile-landscape #vkeyboard{
    display:contents;
  }
  #wrap.mobile-landscape #vkeyboard .vk-portrait-tray{
    display:none;
  }
  #wrap.mobile-landscape #vkeyboard .vk-side{
    display:flex;
    flex:1 1 34%;
    min-width:0;
    max-width:34vw;
    flex-direction:column;
    justify-content:center;
    padding:6px 3px;
    background:#12120e;
    border-top:none;
    touch-action:manipulation;
  }
  #wrap.mobile-landscape #vkeyboard .vk-side-left{
    order:1;
    border-right:2px solid var(--phosphor-dim);
  }
  #wrap.mobile-landscape #vkeyboard .vk-side-right{
    order:3;
    border-left:2px solid var(--phosphor-dim);
  }
  #wrap.mobile-landscape #stage{
    order:2;
    flex:0 0 auto;
    width:min(32vw, calc(100dvh * 4 / 3));
    max-width:32vw;
    height:100%;
    min-height:0;
    min-width:0;
    padding:0;
    align-items:center;
    justify-content:center;
  }
  #wrap.mobile-landscape #stage canvas{
    max-height:100%;
    max-width:100%;
  }
  #wrap.mobile-landscape .vk-rows-side{
    transform:none;
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:3px;
    min-height:0;
  }
  #wrap.mobile-landscape .vk-row.side{
    flex:1 1 0;
    min-height:0;
    margin-bottom:0;
  }
  #wrap.mobile-landscape .vk-side .vk-key{
    min-height:0;
    font-size:clamp(11px, 2.8vh, 17px);
    padding:0 1px;
  }
  #wrap.mobile-landscape .vk-side .vk-row.inset{
    padding-left:0;
    padding-right:0;
  }
  #wrap.mobile-landscape .vk-side .vk-key.shift,
  #wrap.mobile-landscape .vk-side .vk-key.del{
    flex:1.35 1 0;
    font-size:clamp(10px, 2.2vh, 14px);
  }
  #wrap.mobile-landscape .vk-side .vk-row.bottom .vk-key.mute,
  #wrap.mobile-landscape .vk-side .vk-row.bottom .vk-key.book{
    flex:1 1 0;
    min-height:0;
  }
  #wrap.mobile-landscape .vk-side .vk-key.space{
    flex:2 1 0;
    min-height:0;
    font-size:clamp(9px, 2vh, 12px);
    letter-spacing:.12em;
  }
  #wrap.mobile-landscape .vk-side .vk-row.bottom .vk-key.run{
    flex:1.4 1 0;
    min-height:0;
    font-size:clamp(10px, 2.2vh, 14px);
  }
  #wrap.mobile-landscape #vkeyboard:not(.awake) .vk-side{
    opacity:0.72;
    filter:brightness(0.78);
  }
  #wrap.mobile-landscape #vkeyboard.awake .vk-side{
    opacity:1;
    filter:none;
  }