@font-face {
  font-family: "Terminal Mono";
  src: local("SFMonoTerminal-Regular"), local("SFMono-Regular"), local("SF Mono Regular"), local("Menlo-Regular");
  font-weight: 400;
}
@font-face {
  font-family: "Terminal Mono";
  src: local("SFMonoTerminal-Bold"), local("SFMono-Bold"), local("SF Mono Bold"), local("Menlo-Bold");
  font-weight: 700;
}
:root {
  color-scheme: dark;
  --surface: #000; --bar: #303030; --ink: #f2f2f2; --muted: #b3b3b3; --credit: #999; --edge: #151515; --focus: #a9a9a9;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
html[data-theme="light"] {
  color-scheme: light;
  --surface: #fff; --bar: #ececec; --ink: #111; --muted: #505050; --credit: #666; --edge: #b7b7b7; --focus: #606060;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--surface); color: var(--ink); }
.window { position: relative; display: flex; flex-direction: column; width: 100%; height: 100dvh; overflow: hidden; background: var(--surface); }
.titlebar {
  display: grid; grid-template-columns: 116px minmax(0, 1fr) 116px; align-items: center;
  height: 28px; min-height: 28px; padding: 0 10px; border-bottom: 1px solid var(--edge);
  background: var(--bar); color: var(--ink); user-select: none;
}
.lights { display: flex; align-items: center; gap: 8px; }
.lights > i, .lights > button { display: block; width: 12px; height: 12px; padding: 0; border: 1px solid #0000001a; border-radius: 50%; }
.lights > i:nth-child(1) { background: #ff5f57; }
.lights > i:nth-child(2) { background: #febc2e; }
.lights > button { position: relative; background: #28c840; cursor: pointer; }
.lights > button::after { content: ""; position: absolute; inset: 3px; border: 1px solid #125b1f; opacity: 0; }
.lights:hover > button::after { opacity: 1; }
.lights > button:disabled { cursor: default; }
.window-title { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; overflow: hidden; font: 590 13px/1 -apple-system, BlinkMacSystemFont, sans-serif; }
.window-title svg { width: 14px; height: 12px; color: var(--muted); flex: 0 0 auto; }
#window-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.window-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.window-actions button, .window-actions a {
  display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px;
  padding: 4px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); cursor: pointer;
}
.window-actions svg { width: 15px; height: 15px; }
.window-actions button:hover, .window-actions a:hover { background: #88888820; color: var(--ink); }
.window-actions button:active, .window-actions a:active { background: #88888835; }
.window-actions button:disabled { opacity: .4; cursor: default; }
button, a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
#terminal { flex: 1; min-width: 0; min-height: 0; padding: 5px 5px 3px; background: var(--surface); }
.creator-credit { flex: 0 0 auto; padding: 0 5px 2px; color: var(--credit); font: 12px/1.5 "Terminal Mono", Menlo, monospace; }
.creator-credit a { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; max-width: 100%; color: inherit; text-decoration: none; }
.creator-domain { text-decoration: underline; text-decoration-color: #88888870; text-underline-offset: 3px; }
.creator-credit a:hover, .creator-credit a:focus-visible { color: var(--ink); }
.creator-credit a:hover .creator-domain, .creator-credit a:focus-visible .creator-domain { text-decoration-color: currentColor; }
.xterm { height: 100%; }
.xterm-rows span[data-terminal-half] { display: inline-block; height: 100%; vertical-align: top; color: transparent !important; }
.xterm-rows span[data-terminal-half="upper"] { background-image: linear-gradient(to bottom,var(--terminal-half-ink) 0 50%,transparent 50% 100%); }
.xterm-rows span[data-terminal-half="lower"] { background-image: linear-gradient(to bottom,transparent 0 50%,var(--terminal-half-ink) 50% 100%); }
.xterm-viewport { scrollbar-width: thin; scrollbar-color: #88888870 transparent; }
.mobile-keys { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#disconnected { position: absolute; inset: 28px 0 0; padding: 12px 6px; background: var(--surface); color: var(--ink); font: 13px/1.5 "Terminal Mono", Menlo, monospace; }
#disconnected p { margin: 0 0 12px; }
#disconnected button { border: 1px solid var(--muted); padding: 4px 8px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
[hidden] { display: none !important; }
@media (max-width: 600px) {
  .titlebar { height: 36px; min-height: 36px; padding-inline: 10px; grid-template-columns: 65px minmax(0, 1fr) 65px; }
  .lights { gap: 6px; }
  .lights > i, .lights > button { width: 10px; height: 10px; }
  .window-title { font-size: 12px; gap: 5px; }
  .window-title svg { display: none; }
  .window-actions { gap: 5px; }
  .window-actions button, .window-actions a { height: 34px; width: 28px; }
  #terminal { padding: 5px 4px 2px; }
  .creator-credit { padding-inline: 4px; font-size: 11px; }
  .creator-credit a { min-height: 32px; gap: 7px; }
  .mobile-keys { display: flex; align-items: center; justify-content: space-around; flex: 0 0 auto; min-height: 40px; padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--bar); border-top: 1px solid var(--edge); }
  .mobile-keys button { display: flex; align-items: center; justify-content: center; min-width: 42px; min-height: 40px; padding: 0 7px; border: 0; border-radius: 0; background: transparent; color: var(--ink); font: 12px "Terminal Mono", Menlo, monospace; }
  .mobile-keys button:active { background: #88888830; }
  .mobile-keys button:disabled { opacity: .4; }
  #disconnected { inset: 36px 0 40px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }