:root {
  color-scheme:dark;
  --bg:#0b0e0c;
  --panel:#101411;
  --green:#8fdf99;
  --text:#b0bcb2;
  --muted:#76887b;
  --line:#2c3c30;
  --cyan:#8bc6c0;
  font-family:'Courier New',monospace;
  font-size:13px;
  line-height:1.65;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  padding:42px 24px 28px;
  background-image:radial-gradient(ellipse at 50% 20%,#17261a55,transparent 65%);
}

a {
  color:var(--green);
  text-decoration:none;
}

a:hover {
  text-decoration:underline;
  color:#c5ffce;
}

button,input {
  font:inherit;
}

button,a,input,summary {
  -webkit-tap-highlight-color:transparent;
}

button,summary {
  cursor:pointer;
}

button:disabled,input:disabled {
  cursor:default;
  opacity:.4;
}

button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible {
  outline:2px solid var(--cyan);
  outline-offset:4px;
}

.terminal {
  max-width:1040px;
  margin:auto;
  border:1px solid #3a4e40;
  background:var(--panel);
  box-shadow:0 20px 100px #0006;
}

.titlebar {
  height:36px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 15px;
  background:#1c2820;
  border-bottom:1px solid #3a4e40;
  color:#bacbbd;
  font-size:11px;
}

.led {
  display:inline-block;
  width:6px;
  height:6px;
  background:var(--green);
  margin-right:8px;
  box-shadow:0 0 8px #8fdf9960;
}

.window-marks {
  color:var(--muted);
}

.terminal-body {
  padding:23px 32px 16px;
}

.session-line,footer {
  display:flex;
  justify-content:space-between;
  font-size:10px;
  letter-spacing:1px;
  color:var(--muted);
}

.identity {
  padding:29px 0 25px;
}

.wordmark {
  font-family:monospace;
  font-size:clamp(6px,1.36vw,18px);
  line-height:1.12;
  letter-spacing:-.5px;
  color:var(--green);
  width:max-content;
  margin:0 auto;
  white-space:pre;
  text-shadow:0 0 16px #8fdf9920;
}

.navigation {
  display:flex;
  gap:28px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:12px 0;
  font-size:12px;
}

.navigation a:last-child {
  margin-left:auto;
  color:var(--muted);
}

.workspace {
  display:grid;
  grid-template-columns:1fr 400px;
  gap:38px;
  padding:30px 0;
}

.workspace h2 {
  font-size:13px;
  font-weight:normal;
  margin:0 0 17px;
}

.prompt {
  color:var(--green);
}

p {
  margin:0 0 5px;
}

.bright {
  color:#d5e1d7;
}

.muted {
  color:var(--muted);
}

.status {
  margin-top:24px;
  font-size:12px;
  line-height:1.9;
}

.status .muted {
  font-size:10px;
  letter-spacing:1px;
}

.world-section {
  margin-top:27px;
  border-top:1px dashed var(--line);
  padding-top:22px;
}

.world-content {
  display:flex;
  gap:25px;
  align-items:center;
}

.hotel-art {
  font-family:monospace;
  font-size:9px;
  line-height:1.25;
  color:#86a58c;
  margin:0;
  flex-shrink:0;
}

.world-content p {
  font-size:12px;
}

.world-link {
  display:inline-flex;
  gap:25px;
  border-bottom:1px solid #56715d;
  padding-bottom:4px;
  margin-top:15px;
}

.media-window {
  align-self:start;
  border:1px solid #617365;
  background:#27332b;
  padding:3px;
  box-shadow:3px 3px 0 #070b08;
}

.media-title {
  display:flex;
  justify-content:space-between;
  padding:4px 9px;
  background:#3b5041;
  color:#d6e7d9;
  letter-spacing:1px;
}

.media-title h2 {
  font-size:10px;
  margin:0;
}

.media-body {
  padding:10px;
}

.lcd {
  background:#0a140d;
  border:2px solid;
  border-color:#101b13 #4b5c50 #4b5c50 #101b13;
  padding:10px 12px;
  color:#a7e691;
  position:relative;
}

.lcd:after {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(transparent 0 2px,#0002 2px 3px);
}

.lcd-top {
  display:flex;
  justify-content:space-between;
  font-size:9px;
  letter-spacing:1px;
  color:#85a17b;
}

.readout {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:4px 0 6px;
}

#elapsed {
  font-size:34px;
  line-height:1.2;
  letter-spacing:-2px;
}

.spectrum {
  display:flex;
  align-items:end;
  gap:3px;
  height:30px;
}

.spectrum i {
  width:5px;
  height:3px;
  background:#8fcd7f;
}

.spectrum i:nth-child(3n) {
  --height:24px;
}

.spectrum i:nth-child(3n+1) {
  --height:13px;
}

.spectrum i:nth-child(3n+2) {
  --height:30px;
}

body[data-playing] .spectrum i {
  animation:meter .7s ease-in-out infinite alternate;
  height:var(--height);
}

.spectrum i:nth-child(even) {
  animation-delay:-.35s!important;
}

.track-title {
  font-size:11px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.seek {
  width:100%;
  margin:12px 0 8px;
  height:4px;
  display:block;
  accent-color:#a7c7ae;
}

.transport {
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin:14px 0;
}

.buttons {
  display:flex;
  gap:3px;
}

.buttons button {
  background:#4d6053;
  color:#e6eee8;
  border:1px solid;
  border-color:#869b8c #15251b #15251b #869b8c;
  min-width:33px;
  height:28px;
  line-height:1;
}

.buttons button:hover:enabled {
  background:#607966;
}

.buttons button:active:enabled {
  border-color:#15251b #869b8c #869b8c #15251b;
}

.volume {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:9px;
}

.volume input {
  width:67px;
  accent-color:#aec5b3;
  height:4px;
}

.playlist-heading {
  display:flex;
  justify-content:space-between;
  font-size:9px;
  letter-spacing:1px;
  margin:17px 0 6px;
  color:#bdccbf;
}

#playlist {
  background:#101b14;
  border:1px solid #4c5f51;
}

.track {
  width:100%;
  border:0;
  background:transparent;
  color:#a9bdaf;
  text-align:left;
  padding:9px 10px;
  display:flex;
  gap:12px;
  font-size:11px;
}

.track+.track {
  border-top:1px solid #273b2d;
}

.track[aria-pressed=true] {
  background:#354e3a;
  color:#d4f0d9;
}

.track:hover {
  background:#263a2b;
}

.track-number {
  color:#829887;
}

.track-artist {
  display:block;
  font-size:9px;
  color:#8ca591;
  margin-top:2px;
}

.playlist-note {
  padding:10px;
  font-size:11px;
}

.video-link {
  display:flex;
  justify-content:space-between;
  font-size:10px;
  padding:10px 0;
  color:#bbd3c1;
}

.video-link span:last-child {
  color:#96ac9c;
}

details {
  border-top:1px solid #485b4e;
  padding-top:7px;
  font-size:10px;
  color:#b7c8bb;
}

summary {
  color:#a5b9ab;
}

details a {
  display:inline-block;
  margin-top:7px;
}

iframe {
  width:100%;
  height:166px;
  border:0;
  margin-top:10px;
}

footer {
  border-top:1px solid var(--line);
  padding-top:14px;
  font-size:9px;
}

.skip-link {
  position:absolute;
  top:-80px;
  padding:10px;
  background:var(--panel);
}

.skip-link:focus {
  top:0;
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
}

.noscript-note {
  max-width:1040px;
  margin:20px auto;
}

@keyframes meter {
  to {
    height:4px;
  }
}

@media(min-width:1100px) {
  .wordmark {
    font-size:18px;
  }
}

@media(max-width:900px) {
  .workspace {
    grid-template-columns:1fr 360px;
    gap:24px;
  }
  .terminal-body {
    padding:22px;
  }
  .world-content {
    gap:15px;
  }
  .hotel-art {
    font-size:7px;
  }
}

@media(max-width:730px) {
  body {
    padding:16px 12px;
  }
  .terminal-body {
    padding:18px;
  }
  .workspace {
    grid-template-columns:1fr;
    gap:28px;
    padding:24px 0;
  }
  .wordmark {
    font-size:clamp(6px,1.9vw,13px);
    letter-spacing:-.3px;
  }
  .identity {
    padding:26px 0 20px;
  }
  .navigation {
    gap:20px;
    font-size:11px;
  }
  .navigation a:last-child {
    display:none;
  }
  .world-content {
    gap:28px;
  }
  .hotel-art {
    font-size:9px;
  }
  .media-window {
    width:100%;
    max-width:440px;
  }
  .session-line {
    font-size:8px;
    letter-spacing:.5px;
  }
  footer {
    letter-spacing:0;
    font-size:8px;
  }
  .world-section {
    margin-top:23px;
  }
  .status {
    margin-top:18px;
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    scroll-behavior:auto!important;
  }
}

.hotel-wordmark {
  font-size:clamp(5px,1.1vw,15px);
  margin-top:18px;
}

@media(max-width:730px) {
  .hotel-wordmark {
    font-size:clamp(5px,1.55vw,11px);
  }
}