#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#view { position: absolute; inset: 0; pointer-events: auto; }
#loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #07090b; color: #6fb7a6; letter-spacing: .2em; z-index: 50; }
#loading.gone { display: none; }

/* ---------- the workbench ---------- */
body.atbench #touch, body.atbench #prompt { display: none !important; }
#benchui { position: absolute; left: 50%; bottom: 66px; transform: translateX(-50%); width: min(980px, 98vw); padding: 8px 10px; border-radius: 10px;
  background: rgba(8, 12, 14, .82); border: 1px solid #1f6b5c; display: flex; flex-direction: column; gap: 6px; z-index: 20; }
#benchui.hide, #notebook.hide { display: none; }
#benchui .top { display: flex; gap: 12px; align-items: center; font-size: 12px; }
#benchui .slow { color: #8fd8c4; }
#benchui .ready { margin-left: auto; color: #ffd36b; }
@keyframes pulse { 50% { opacity: .5; } }
#benchui .row { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
#benchui button { font: inherit; font-size: 12px; color: #dfe7ea; background: #16222a; border: 1px solid #2a3a40; border-radius: 6px; padding: 5px 8px; cursor: pointer; display: inline-flex; gap: 5px; align-items: center; }
#benchui button:hover { border-color: #6fb7a6; background: #1c2e36; }
#benchui button i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; box-shadow: 0 0 6px currentColor; }
#benchui .rg b { color: #7dff9a; } #benchui .rg em, #benchui .qb em { font-style: normal; color: #ffd36b; }
#benchui .rg.none, #benchui .qb.cant { opacity: .35; }
#benchui .act.mix { background: #1a8f3c; border-color: #3fdc6b; color: #fff; font-weight: bold; }
#benchui .act.hot { background: #8f2a10; border-color: #ff6a3a; }
#benchui .act.leave { margin-left: auto; }
#benchui .qb small { color: #8a9aa1; font-size: 10px; }
#benchui kbd, #notebook kbd { font: inherit; font-size: 10px; padding: 0 4px; border-radius: 3px; background: #0a1013; color: #9fb3bb; border: 1px solid #2a3a40; }
#benchtip { position: absolute; pointer-events: none; padding: 5px 8px; border-radius: 6px; background: rgba(7, 9, 11, .9); font-size: 12px; opacity: 0; z-index: 30; }
#benchtip.on { opacity: 1; } #benchtip small { color: #8a9aa1; }
#benchmsg { position: absolute; left: 50%; top: 6px; font-size: 13px; transform: translateX(-50%); padding: 7px 14px; border-radius: 8px; background: rgba(7, 9, 11, .85); color: #f4e9ff;
  font-style: italic; opacity: 0; transition: opacity .25s; pointer-events: none; z-index: 25; max-width: 90vw; text-align: center; }
#benchmsg.on { opacity: 1; }
#benchbanner { position: absolute; left: 50%; top: 22%; transform: translateX(-50%) scale(.9); padding: 14px 26px; border-radius: 12px; text-align: center;
  background: rgba(10, 24, 14, .9); border: 2px solid #3fdc6b; box-shadow: 0 0 40px rgba(63, 220, 107, .4); opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none; z-index: 26; max-width: 90vw; }
#benchbanner.on { opacity: 1; transform: translateX(-50%) scale(1); }
#benchbanner small { display: block; letter-spacing: .3em; color: #7dff9a; font-size: 11px; }
#benchbanner b { display: block; font-size: 26px; color: #fff; margin: 4px 0; }
#benchbanner span { font-size: 13px; color: #cfe0d8; font-style: italic; }
#notebook { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .55); z-index: 40; }
#notebook .book { width: min(760px, 96vw); max-height: 86vh; overflow: auto; padding: 18px 26px 16px; border-radius: 6px 14px 14px 6px; position: relative;
  background: #f2ead6 repeating-linear-gradient(#f2ead6 0 25px, #d9cfb4 25px 26px); color: #2a2018; box-shadow: inset 14px 0 0 #4a2a1a, 0 10px 40px #000;
  font-family: 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive; }
#notebook h2 { font-size: 22px; margin: 4px 0 8px 10px; color: #4a2a1a; }
#notebook h3 { margin: 12px 0 4px 10px; font-size: 15px; color: #6a3b2a; }
#notebook .tabs { display: flex; gap: 4px; position: absolute; top: 12px; right: 18px; }
#notebook .tabs button, #notebook .close { font: 12px ui-monospace, monospace; background: #e4d8b8; border: 1px solid #b8a67a; border-radius: 4px; padding: 3px 8px; cursor: pointer; color: #4a2a1a; }
#notebook .tabs button.on { background: #4a2a1a; color: #f2d48a; }
#notebook .close { display: block; margin: 10px 0 0 auto; }
#notebook .entry { display: flex; gap: 10px; margin: 6px 0 6px 10px; }
#notebook .entry i { flex: none; width: 14px; height: 14px; border-radius: 50%; margin-top: 4px; border: 1px solid #4a2a1a; }
#notebook .entry h4 { font-size: 15px; } #notebook .entry p { font-size: 13px; line-height: 1.35; }
#notebook .entry.unknown { opacity: .75; } #notebook .entry.unknown i { background: repeating-linear-gradient(45deg, #888 0 2px, #ccc 2px 4px); }
#notebook .f { font-family: ui-monospace, monospace; font-size: 12px; color: #6a5a40; }
#notebook .hot { color: #c0401a; } #notebook .new { font-size: 11px; color: #1a8f3c; border: 1px solid #1a8f3c; border-radius: 4px; padding: 0 4px; }
#notebook .hint { font-style: italic; color: #6a5a40; margin-left: 10px; font-size: 13px; }
#notebook .tried { margin-left: 10px; font-size: 12px; color: #6a5a40; font-family: ui-monospace, monospace; }
#notebook table { margin: 8px 0 6px 10px; border-collapse: collapse; font-size: 12px; }
#notebook th { font-size: 10px; padding: 2px 4px; font-weight: normal; color: #6a5a40; } #notebook td { padding: 3px 6px; text-align: center; border-bottom: 1px dashed #b8a67a; }
#notebook td:first-child { text-align: left; } #notebook .v2 { color: #1a8f3c; font-weight: bold; } #notebook .v1 { color: #3a8f1a; } #notebook .v0 { color: #b3121f; }
@media (max-width: 700px) { #benchui { bottom: 60px; } #benchui .qb small { display: none; } #benchui kbd { display: none; } }
#benchui { gap: 4px; padding: 6px 8px; }
#benchui .row.quick { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
#benchui .row.quick button { flex: none; }
#benchui .qb small { display: none; }
#benchui .qb:hover small { display: inline; }