@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Manrope:wght@400;500;600&display=swap');

:root { color-scheme: dark; font-family: Manrope, sans-serif; background: #050609; }
* { box-sizing: border-box; }
html, body, main { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: radial-gradient(circle at 50% 45%, #111827 0%, #050609 58%, #020304 100%); color: #edf4f7; }
canvas { position: fixed; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; }
canvas:active { cursor: grabbing; }
.interface { display: none !important; }
body.show-interface .interface { display: flex !important; }
body.show-interface .panel { display: block !important; }
.wordmark {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  color: #eafffb;
  font: 500 clamp(36px, 6vw, 78px)/1 Manrope, sans-serif;
  letter-spacing: -.055em;
  text-shadow: 0 0 10px #8ffff040, 0 0 35px #59ddc528, 0 0 80px #59ddc51c;
  user-select: none;
  pointer-events: none;
}
.brand { position: fixed; top: 34px; left: 38px; display: flex; align-items: center; gap: 14px; pointer-events: none; }
.mark { width: 11px; height: 11px; border-radius: 50%; background: #61e9d0; box-shadow: 0 0 10px #61e9d0, 0 0 28px #61e9d088; }
h1 { font-size: 14px; line-height: 1; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 8px; font-weight: 600; }
.brand p { margin: 0; color: #72818c; font: 300 10px/1 DM Mono, monospace; letter-spacing: .07em; text-transform: uppercase; }
.panel { position: fixed; right: 28px; top: 28px; width: 245px; padding: 22px; background: #0a0d12cc; border: 1px solid #ffffff16; backdrop-filter: blur(18px); box-shadow: 0 24px 70px #0008; }
.readout { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-bottom: 24px; background: #ffffff12; }
.readout div { background: #0c1016; padding: 13px 12px 11px; }
.readout span { display: block; color: #86f6e2; font: 400 19px/1 DM Mono, monospace; }
.readout small { display: block; margin-top: 7px; color: #60717c; text-transform: uppercase; letter-spacing: .12em; font: 400 8px/1 DM Mono, monospace; }
label { display: block; margin-top: 18px; }
label > span { display: flex; justify-content: space-between; color: #95a3ac; font: 400 10px/1 DM Mono, monospace; letter-spacing: .03em; }
output { color: #d5e2e6; }
input[type="range"] { width: 100%; height: 14px; margin: 7px 0 0; appearance: none; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: #314047; }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 9px; height: 9px; border-radius: 50%; background: #67e7d0; box-shadow: 0 0 8px #67e7d0aa; margin-top: -4px; }
input[type="range"]::-moz-range-track { height: 1px; background: #314047; }
input[type="range"]::-moz-range-thumb { width: 9px; height: 9px; border: 0; border-radius: 50%; background: #67e7d0; box-shadow: 0 0 8px #67e7d0aa; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 22px; }
button { border: 1px solid #ffffff17; background: #ffffff08; color: #b8c5ca; padding: 9px 8px; text-transform: uppercase; font: 500 9px/1 DM Mono, monospace; letter-spacing: .08em; cursor: pointer; transition: .2s ease; }
button:hover { color: #f4fffd; border-color: #61e9d066; background: #61e9d010; }
#pause span { display: inline-block; width: 5px; height: 5px; margin: 0 4px 1px 0; border-radius: 50%; background: #61e9d0; box-shadow: 0 0 5px #61e9d0; }
footer { position: fixed; left: 38px; right: 38px; bottom: 29px; display: flex; justify-content: space-between; align-items: center; color: #53616a; font: 300 9px/1 DM Mono, monospace; letter-spacing: .06em; text-transform: uppercase; pointer-events: none; }
footer p { margin: 0; } footer strong { color: #9aa8af; font-weight: 400; } footer i { display: inline-block; width: 2px; height: 2px; margin: 0 9px 3px; background: #405058; border-radius: 50%; } footer > span { letter-spacing: .18em; }
@media (max-width: 650px) {
  .brand { top: 22px; left: 20px; }
  .panel { top: auto; right: 14px; bottom: 14px; left: 14px; width: auto; padding: 15px; }
  .readout { float: left; width: 42%; margin: 0 16px 0 0; }
  label { margin-top: 9px; } label:nth-of-type(n+3) { display: none; }
  .actions { clear: both; padding-top: 12px; margin-top: 8px; }
  footer { display: none; }
}