*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #0a0e17; color: #e6edf3; font-family: system-ui, sans-serif; }

/* Allow scroll on launcher page */
html { overflow-y: auto; }
body.emu-running { overflow: hidden; }

.screen { display: none; }
.screen.active { display: flex; flex-direction: column; }

#launcher {
  padding: 24px;
  min-height: 100vh;
  overflow-y: auto;
}
.top { text-align: center; margin-bottom: 20px; }
.top h1 { font-size: 2rem; }
.top h1 span { color: #58a6ff; }
.top p { color: #8b949e; margin-top: 6px; }

.toolbar {
  display: flex; gap: 12px; max-width: 900px; margin: 0 auto 20px; flex-wrap: wrap;
}
.toolbar input {
  flex: 1; min-width: 200px; padding: 12px 16px; border-radius: 8px;
  border: 1px solid #30363d; background: #161b22; color: #fff;
}
.upload-btn {
  padding: 12px 18px; background: #238636; color: #fff; border-radius: 8px;
  font-weight: 600; cursor: pointer; white-space: nowrap;
}
.upload-btn:hover { background: #1c6a2b; }
/* The label is what people see and click. Its file input is not drawn but stays
   focusable, so Tab reaches it and Enter or Space opens the file picker. */
.upload-btn input {
  position: absolute; width: 1px; min-width: 0; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.upload-btn:has(input:focus-visible) { outline: 2px solid #58a6ff; outline-offset: 2px; }

.os-grid {
  max-width: 1240px; margin: 0 auto;
  padding-bottom: 48px;
}
.os-grid .empty {
  text-align: center; color: #8b949e; padding: 32px 0;
}
.os-family + .os-family { margin-top: 30px; }
.os-family h2 {
  font-size: 1.1rem; font-weight: 700; color: #e6edf3;
  margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid #21262d;
}
.os-family h2 span {
  font-size: 12px; font-weight: 600; color: #8b949e;
  background: #161b22; border: 1px solid #30363d; border-radius: 10px;
  padding: 1px 8px; margin-left: 6px; vertical-align: middle;
}
.os-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.os-card {
  text-align: left; padding: 16px; border-radius: 14px;
  background: #161b22; border: 1px solid #30363d; color: inherit; font: inherit;
  display: flex; flex-direction: column; gap: 10px; cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, background 0.15s;
}
.os-card:hover, .os-card:focus-visible {
  border-color: #58a6ff; transform: translateY(-2px); background: #1b2230; outline: none;
}
.os-head { display: flex; align-items: center; gap: 14px; }
.os-icon {
  flex: none; width: 64px; height: 64px; border-radius: 16px;
  background: linear-gradient(#ffffff, #e6ecf2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  display: flex; align-items: center; justify-content: center;
}
.os-icon img { width: 50px; height: 50px; object-fit: contain; }
.os-title { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.os-title strong { font-size: 1.02rem; line-height: 1.25; }
.os-card .meta { font-size: 12px; color: #8b949e; }
.badges { display: flex; gap: 6px; flex-wrap: wrap; }
.os-card .badge {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
  background: #1f6feb; color: #fff; padding: 2px 8px; border-radius: 4px;
}
.os-card .badge-instant { background: #238636; }
.os-card .badge-fast { background: #1f6feb; }
.os-card .badge-slow { background: #6e4a1f; }
.os-card .badge-stream { background: #8250df; }
.os-card .badge-net { background: #0e6e6e; }
/* Shown on iPhones and iPads only; launcher-themes.js copies card badges into the other layouts as .oss-badge. */
.os-card .badge-heavy, .oss-badges .oss-badge-heavy { background: #9a3412; }
.os-card .desc {
  font-size: 13px; color: #c9d1d9; flex: 1; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.os-card .boot { font-size: 12px; color: #58a6ff; font-weight: 600; }

footer {
  text-align: center; padding: 16px; color: #6e7681; font-size: 13px;
}
footer a, footer button.link {
  color: #58a6ff; background: none; border: 0; font: inherit; cursor: pointer; text-decoration: underline;
}

/* Logo credits */
#credits {
  margin: auto; max-width: 720px; width: calc(100% - 32px); max-height: 80vh;
  background: #161b22; color: #e6edf3; border: 1px solid #30363d; border-radius: 12px; padding: 20px;
}
#credits::backdrop { background: rgba(1, 4, 9, 0.75); }
#credits h2 { font-size: 1.1rem; margin-bottom: 8px; }
#credits p { font-size: 13px; color: #8b949e; margin-bottom: 12px; line-height: 1.5; }
#credits a { color: #58a6ff; }
.credits-list { list-style: none; display: grid; gap: 8px; margin-bottom: 14px; }
.credits-list li { display: flex; gap: 10px; align-items: center; font-size: 13px; }
.credits-list img { flex: none; width: 32px; height: 32px; object-fit: contain; background: #fff; border-radius: 8px; padding: 3px; }
.credits-list small { display: block; color: #8b949e; }
#credits .close {
  padding: 8px 14px; background: #21262d; color: #fff; border-radius: 6px; border: 1px solid #30363d; cursor: pointer;
}

/* Terms visitors accept before using the site */
#disclaimer {
  margin: auto; max-width: 620px; width: calc(100% - 32px); max-height: calc(100% - 32px); overflow-y: auto;
  background: #161b22; color: #e6edf3; border: 1px solid #30363d; border-radius: 12px; padding: 22px 24px;
}
#disclaimer::backdrop { background: rgba(1, 4, 9, 0.9); }
#disclaimer:focus { outline: none; }
#disclaimer h2 { font-size: 1.2rem; margin-bottom: 10px; }
#disclaimer p, #disclaimer li { font-size: 14px; line-height: 1.55; color: #c9d1d9; }
#disclaimer p { margin-bottom: 12px; }
#disclaimer ul { padding-left: 20px; margin-bottom: 16px; }
#disclaimer li + li { margin-top: 8px; }
#disclaimer .disclaimer-question { color: #fff; font-weight: 600; }
.disclaimer-never, .system-notice-never {
  display: flex; align-items: center; gap: 8px; width: fit-content; margin-bottom: 18px;
  font-size: 14px; color: #c9d1d9; cursor: pointer;
}
.disclaimer-never input, .system-notice-never input { width: 16px; height: 16px; accent-color: #238636; cursor: pointer; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.dialog-actions button {
  padding: 9px 18px; background: #21262d; color: #fff; border: 1px solid #30363d; border-radius: 6px;
  font: inherit; font-weight: 600; cursor: pointer;
}
.dialog-actions button:hover { background: #30363d; }
.dialog-actions .primary { background: #238636; border-color: #2ea043; }
.dialog-actions .primary:hover { background: #1c6a2b; }

/* Asked before starting a system marked memoryWarning */
#memory-warning {
  margin: auto; max-width: 480px; width: calc(100% - 32px); max-height: calc(100% - 32px); overflow-y: auto;
  background: #161b22; color: #e6edf3; border: 1px solid #9e6a03; border-radius: 12px; padding: 22px 24px;
}
#memory-warning::backdrop { background: rgba(1, 4, 9, 0.75); }
#memory-warning h2 { font-size: 1.15rem; margin-bottom: 10px; color: #f0b72f; }
#memory-warning p { font-size: 14px; line-height: 1.55; color: #c9d1d9; margin-bottom: 18px; }

/* Shown before starting a system whose entry has a notice */
#system-notice {
  margin: auto; max-width: 480px; width: calc(100% - 32px); max-height: calc(100% - 32px); overflow-y: auto;
  background: #161b22; color: #e6edf3; border: 1px solid #30363d; border-radius: 12px; padding: 22px 24px;
}
#system-notice::backdrop { background: rgba(1, 4, 9, 0.75); }
#system-notice h2 { font-size: 1.15rem; margin-bottom: 10px; }
#system-notice p { font-size: 14px; line-height: 1.55; color: #c9d1d9; margin-bottom: 14px; white-space: pre-line; }

/* Asked every time before a system starts: its license (emulator.js) */
#license-agreement {
  margin: auto; max-width: 520px; width: calc(100% - 32px); max-height: calc(100% - 32px); overflow-y: auto;
  background: #161b22; color: #e6edf3; border: 1px solid #30363d; border-radius: 12px; padding: 22px 24px;
}
#license-agreement::backdrop { background: rgba(1, 4, 9, 0.75); }
#license-agreement:focus { outline: none; }
#license-agreement h2 { font-size: 1.15rem; margin-bottom: 10px; }
#license-agreement p { font-size: 14px; line-height: 1.55; color: #c9d1d9; margin-bottom: 12px; }
#license-agreement p:last-child { margin-bottom: 18px; }
#license-agreement .license-agreement-name { color: #fff; font-weight: 600; }
#license-agreement a, #disclaimer a { color: #58a6ff; }

/* Paste text, and the messages of the PC tools (system-tools.js) */
#paste-text, #emu-message {
  margin: auto; max-width: 520px; width: calc(100% - 32px); max-height: calc(100% - 32px); overflow-y: auto;
  background: #161b22; color: #e6edf3; border: 1px solid #30363d; border-radius: 12px; padding: 22px 24px;
}
#paste-text::backdrop, #emu-message::backdrop { background: rgba(1, 4, 9, 0.75); }
#paste-text:focus { outline: none; }
#paste-text h2, #emu-message h2 { font-size: 1.15rem; margin-bottom: 10px; }
#paste-text p, #emu-message p { font-size: 14px; line-height: 1.55; color: #c9d1d9; }
#emu-message p { margin-bottom: 18px; }
.paste-text-body { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
#paste-text-input {
  width: 100%; min-height: 9em; resize: vertical; padding: 9px 12px; border-radius: 6px;
  border: 1px solid #30363d; background: #0d1117; color: #e6edf3;
  font: 14px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
}
#paste-text-input:focus { outline: 2px solid #1f6feb; outline-offset: -1px; border-color: #1f6feb; }
#paste-text #paste-text-note { font-size: 13px; color: #d29922; }
#paste-text-note:empty { display: none; }
.dialog-actions button:disabled { opacity: 0.5; cursor: not-allowed; }
/* Under 16px, iOS zooms the page when the box gets the focus. */
@media (pointer: coarse) {
  #paste-text-input { font-size: 16px; }
}

/* The first-visit terms and the dialogs before a system starts fit any screen,
   down to a phone held sideways. They keep out of the safe-area insets (a
   notch) wherever the browser reports them. */
#disclaimer, #memory-warning, #system-notice, #license-agreement, #paste-text, #emu-message {
  inset: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  width: calc(100% - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  max-height: calc(100vh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}
/* Paste text stays above the phone's keyboard, which covers the bottom of the page
   (system-tools.js measures it). */
#paste-text {
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--oss-keyboard, 0px));
  max-height: calc(100vh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - var(--oss-keyboard, 0px));
  max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - var(--oss-keyboard, 0px));
}
/* Where a dialog can be taller than the screen (phones, small windows, zoomed
   pages), the title and buttons stay in view and only the text between them
   scrolls. Above these sizes the first-visit terms, the tallest dialog before
   a system starts (about 726px with its margins), fit whole; raise 760px if
   they grow. */
@media (max-width: 700px), (max-height: 760px) {
  #disclaimer[open], #memory-warning[open], #system-notice[open], #license-agreement[open], #paste-text[open], #emu-message[open],
  #disclaimer .disclaimer-terms:not([hidden]) { display: flex; flex-direction: column; }
  .disclaimer-terms { min-height: 0; }
  .disclaimer-body, .memory-warning-text, #system-notice-text, #license-agreement-text, .paste-text-body, #emu-message-text {
    min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  }
  /* The box takes the room there is, down to four lines. */
  #paste-text-input { flex: 1 1 auto; min-height: 7.5em; }
  /* When their text has to scroll, these two get the focus as their dialog
     opens; like the dialogs, they show no ring for it. */
  .memory-warning-text:focus, #license-agreement-text:focus { outline: none; }
  /* The credits too: the title and Close stay in view and only the list
     scrolls. Above these sizes the whole dialog still scrolls, as before. */
  #credits {
    inset: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    width: calc(100% - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    max-height: calc(100vh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }
  #credits[open], .credits-body { display: flex; flex-direction: column; }
  .credits-body, .credits-list { min-height: 0; }
  .credits-list { overflow-y: auto; overscroll-behavior: contain; }
  #credits .close { align-self: flex-start; }
}
/* On phones, held either way, the introduction scrolls with the list, so more
   of the list shows; the title and Close still stay in view. */
@media (max-width: 700px), (max-height: 500px) {
  .credits-body { display: block; overflow-y: auto; overscroll-behavior: contain; margin-bottom: 14px; }
  .credits-body .credits-list { overflow-y: visible; margin-bottom: 0; }
}
/* Too short even for that, such as a page zoomed in a long way: the whole dialog scrolls. */
@media (max-height: 300px) {
  .disclaimer-terms, .disclaimer-body, .memory-warning-text, #system-notice-text, #license-agreement-text, .paste-text-body, #emu-message-text, .credits-list, .credits-body { flex-shrink: 0; }
}

/* Fullscreen emulator — no black bar */
#emulator.active {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #000;
}
.emu-bar {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px;
  background: #161b22; border-bottom: 1px solid #30363d; flex-shrink: 0;
  flex-wrap: wrap;
}
#emu-back {
  padding: 8px 14px; background: #21262d; color: #fff; border-radius: 6px;
  border: 1px solid #30363d; cursor: pointer;
}
#emu-back:hover { background: #30363d; }
#emu-skip-state {
  padding: 8px 14px; background: #21262d; color: #d29922; border-radius: 6px;
  border: 1px solid #30363d; cursor: pointer; font-size: 12px;
}
#emu-skip-state:hover { background: #30363d; }
#emu-rclick, .emu-key, .emu-tool {
  padding: 8px 14px; background: #21262d; color: #c9d1d9; border-radius: 6px;
  border: 1px solid #30363d; cursor: pointer; font-size: 12px;
}
#emu-rclick:hover, .emu-key:hover, .emu-tool:hover { background: #30363d; }
#emu-rclick[aria-pressed="true"], #emu-fullscreen[aria-pressed="true"] { background: #1f6feb; border-color: #388bfd; color: #fff; }
/* The State menu (system-tools.js) */
.emu-menu { position: relative; display: flex; }
.emu-menu[hidden], .emu-menu-list[hidden] { display: none; }
.emu-menu-list {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 30;
  display: flex; flex-direction: column; min-width: 150px; padding: 4px;
  background: #161b22; border: 1px solid #30363d; border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}
.emu-menu-list button {
  padding: 8px 12px; background: none; color: #e6edf3; border: 0; border-radius: 5px;
  font: inherit; font-size: 13px; text-align: left; white-space: nowrap; cursor: pointer;
}
.emu-menu-list button:hover, .emu-menu-list button:focus-visible { background: #30363d; outline: none; }
#emu-title { font-weight: 700; }
#emu-net {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  color: #3fb9b9; border: 1px solid #0e6e6e; border-radius: 4px; padding: 2px 8px;
}
#emu-status { font-size: 12px; color: #8b949e; flex: 1; min-width: 120px; }
#emu-hint {
  font-size: 11px; color: #f0883e;
  width: 100%;
  order: 10;
}

#screen_container {
  flex: 1;
  position: relative;
  width: 100%;
  min-height: 0;
  background: #000;
  overflow: hidden;
  outline: none;
  cursor: default;
}
#screen_container:focus { outline: 1px solid #30363d; }
#screen_container canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
/* v86's text modes (emulator.js adds this div; v86 fills it with a div per row): a grid of character
   cells, one 16 px line per row, that never wraps. emulator.js scales it to the screen like the canvas. */
#screen_container .emu-text {
  font-family: "Consolas", "Lucida Console", "Courier New", monospace;
  font-size: 16px; line-height: 16px; white-space: pre;
  font-kerning: none; font-variant-ligatures: none; letter-spacing: 0;
}
#screen_container .emu-text > div { height: 16px; }
/* v86 draws its cursor 7 px wide; here it is one cell wide. */
#screen_container .emu-text .cursor { width: 1ch !important; }
#screen_container .mac-frame,
#screen_container .embed-frame {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; background: #000;
}
#screen_container .embed-frame.phone {
  left: 50%; right: auto; width: auto; max-width: 100%;
  aspect-ratio: 9 / 16; transform: translateX(-50%);
  border-radius: 12px;
}
#screen_container .frame-notice {
  position: absolute; left: 50%; bottom: 24px; z-index: 1;
  transform: translateX(-50%);
  width: max-content; max-width: min(560px, calc(100% - 32px));
  padding: 12px 16px; border-radius: 8px;
  background: rgba(22, 27, 34, 0.94); border: 1px solid #30363d;
  color: #c9d1d9; font-size: 13px; line-height: 1.45;
  pointer-events: none;
}
#screen_container .frame-notice strong { display: block; margin-bottom: 4px; color: #fff; }
#screen_container .frame-notice button,
#screen_container .frame-notice a {
  display: block; width: max-content; margin-top: 10px; padding: 6px 14px;
  background: #238636; color: #fff; border: 1px solid #2ea043; border-radius: 6px;
  font: inherit; text-decoration: none; cursor: pointer; pointer-events: auto;
}
#screen_container .frame-notice button:hover,
#screen_container .frame-notice a:hover { background: #1c6a2b; }

/* Files dragged over a running PC, to go on a CD (system-tools.js) */
.emu-drop {
  position: absolute; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center; padding: 32px;
  background: rgba(1, 4, 9, 0.82); border: 3px dashed #58a6ff;
  color: #e6edf3; font-size: 18px; font-weight: 600; line-height: 1.5; text-align: center;
}
.emu-drop.is-refused { border-color: #d29922; }
/* "Hold Esc to exit full screen" (emulator.js) */
.emu-toast {
  position: absolute; left: 50%; z-index: 8; transform: translateX(-50%);
  max-width: calc(100% - 32px); padding: 8px 16px; border-radius: 999px;
  background: rgba(22, 27, 34, 0.94); border: 1px solid #388bfd; color: #e6edf3;
  font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.emu-drop[hidden], .emu-toast[hidden] { display: none; }

/* ---- A system in a window over the Windows 11-style desktop (emulator.js windowed
   mode, layout-win11.js). emulator.js sets the window's place and size. ---- */

#emulator.emu-windowed.active {
  inset: auto; z-index: 60;
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px;
  background: rgba(32, 32, 40, 0.9);
  -webkit-backdrop-filter: blur(60px) saturate(1.3); backdrop-filter: blur(60px) saturate(1.3);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5), 0 3px 12px rgba(0, 0, 0, 0.3);
  font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}
#emulator.emu-windowed.is-maximized, #emulator.emu-windowed.is-fullscreen { border-width: 0; border-radius: 0; box-shadow: none; }
#emulator.emu-windowed.is-fullscreen { z-index: 1000; }
#emulator.emu-windowed.is-hiding { pointer-events: none; }
#emulator.emu-windowed.is-minimized { visibility: hidden; }
/* Frames inside would take the pointer from a drag or resize. */
#emulator.emu-windowed.is-dragging #screen_container { pointer-events: none; }
.emu-titlebar {
  flex: none; display: flex; align-items: center; gap: 10px; height: 32px; padding-left: 12px;
  color: #fff; font-size: 12px; line-height: 16px; white-space: nowrap;
  -webkit-user-select: none; user-select: none; touch-action: none; cursor: default;
}
#emulator.is-inactive .emu-titlebar { color: rgba(255, 255, 255, 0.5); }
.emu-titlebar-icon { flex: none; width: 18px; height: 18px; padding: 1px; border-radius: 4px; background: #fff; object-fit: contain; pointer-events: none; }
#emulator.is-inactive .emu-titlebar-icon { opacity: 0.6; }
.emu-titlebar-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.emu-titlebar-buttons { display: flex; flex: none; align-self: stretch; }
.emu-titlebar-buttons button {
  display: grid; place-items: center; width: 46px; height: 100%; padding: 0;
  border: 0; border-radius: 0; background: transparent; color: inherit; cursor: default;
}
.emu-titlebar-buttons svg { display: block; width: 10px; height: 10px; overflow: visible; }
.emu-titlebar-buttons button:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.emu-titlebar-buttons button:active { background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.75); }
.emu-titlebar .emu-win-close:hover { background: #c42b1c; color: #fff; }
.emu-titlebar .emu-win-close:active { background: #b3271a; color: rgba(255, 255, 255, 0.8); }
.emu-titlebar-buttons button:focus { outline: none; }
.emu-titlebar-buttons button:focus-visible { outline: 1px solid #fff; outline-offset: -3px; }
#emulator .emu-glyph-restore, #emulator.is-maximized .emu-glyph-max { display: none; }
#emulator.is-maximized .emu-glyph-restore { display: block; }
/* The resize borders: a box just larger than the window (6 px each side, 10 px on touch screens), over it. */
.emu-edges { position: fixed; z-index: 61; pointer-events: none; --edge: 6px; }
.emu-edges[hidden] { display: none; }
.emu-resize { position: absolute; pointer-events: auto; touch-action: none; }
.emu-resize[data-edge="n"] { top: 0; left: calc(var(--edge) + 10px); right: calc(var(--edge) + 10px); height: calc(var(--edge) + 2px); cursor: n-resize; }
.emu-resize[data-edge="s"] { bottom: 0; left: calc(var(--edge) + 10px); right: calc(var(--edge) + 10px); height: calc(var(--edge) + 3px); cursor: s-resize; }
.emu-resize[data-edge="e"] { right: 0; top: calc(var(--edge) + 10px); bottom: calc(var(--edge) + 10px); width: calc(var(--edge) + 3px); cursor: e-resize; }
.emu-resize[data-edge="w"] { left: 0; top: calc(var(--edge) + 10px); bottom: calc(var(--edge) + 10px); width: calc(var(--edge) + 3px); cursor: w-resize; }
.emu-resize:is([data-edge="ne"], [data-edge="nw"], [data-edge="se"], [data-edge="sw"]) { width: calc(var(--edge) + 10px); height: calc(var(--edge) + 10px); }
.emu-resize[data-edge="ne"] { top: 0; right: 0; cursor: ne-resize; }
.emu-resize[data-edge="nw"] { top: 0; left: 0; cursor: nw-resize; }
.emu-resize[data-edge="se"] { bottom: 0; right: 0; cursor: se-resize; }
.emu-resize[data-edge="sw"] { bottom: 0; left: 0; cursor: sw-resize; }
@media (pointer: coarse) {
  .emu-edges { --edge: 10px; }
}
#emulator.emu-windowed.is-fullscreen .emu-titlebar { display: none; }
/* Dragging a window to the top edge maximizes it; this shows where it will go. */
.emu-snap {
  position: fixed; z-index: 59; pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 8px; background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}
.emu-snap[hidden] { display: none; }
/* The toolbar, in the window's style. Close in the title bar does what ← Launcher does, and the title bar names the system. */
#emulator.emu-windowed .emu-bar {
  gap: 6px; padding: 2px 8px 6px; background: transparent; border-bottom: 1px solid rgba(0, 0, 0, 0.35);
  -webkit-user-select: none; user-select: none;
}
#emulator.emu-windowed #emu-back, #emulator.emu-windowed #emu-title { display: none; }
#emulator.emu-windowed :is(#emu-skip-state, #emu-rclick, .emu-key, .emu-tool, .emu-more-toggle) {
  padding: 4px 11px; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 4px;
  background: rgba(255, 255, 255, 0.06); color: #fff; font: inherit; font-size: 12px; line-height: 18px;
  white-space: nowrap; cursor: pointer;
}
#emulator.emu-windowed :is(#emu-skip-state, #emu-rclick, .emu-key, .emu-tool, .emu-more-toggle):hover { background: rgba(255, 255, 255, 0.09); }
#emulator.emu-windowed :is(#emu-skip-state, #emu-rclick, .emu-key, .emu-tool, .emu-more-toggle):active { background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.78); }
/* One row (emulator.js fitToolbar): the status gives way first, then More takes the tools, then the keys. */
#emulator.emu-windowed #emu-status { flex: 1 1 0; min-width: 96px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.emu-more { position: relative; display: none; }
#emulator.emu-windowed.bar-more .emu-more { display: flex; }
#emulator.emu-windowed.bar-compact :is(#emu-paste, #emu-cd, #emu-state, #emu-fullscreen),
#emulator.emu-windowed.bar-tight :is(#emu-skip-state, #emu-rclick, #emu-cad, #emu-win) { display: none; }
.emu-more-list [aria-checked="true"]::after { content: "  ✓"; }
#emulator.emu-windowed #emu-skip-state { color: #fce100; }
#emulator.emu-windowed :is(#emu-rclick, #emu-fullscreen)[aria-pressed="true"] { border-color: #4cc2ff; background: #4cc2ff; color: #000; }
#emulator.emu-windowed #emu-status { color: rgba(255, 255, 255, 0.72); }
#emulator.emu-windowed #emu-hint { color: #ffb36b; }
#emulator.emu-windowed #emu-net { color: #6ee0e0; border-color: rgba(110, 224, 224, 0.45); }
#emulator.emu-windowed .emu-menu-list { border-color: rgba(255, 255, 255, 0.1); background: #2c2c2c; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); }
#emulator.emu-windowed .emu-menu-list button { border-radius: 4px; }
#emulator.emu-windowed .emu-menu-list button:hover, #emulator.emu-windowed .emu-menu-list button:focus-visible { background: rgba(255, 255, 255, 0.08); }
#emulator.emu-windowed #screen_container:focus { outline: none; }
/* 2007.mobile's phone-shaped frame keeps its shape in a narrow window too. */
#emulator.emu-windowed #screen_container { container-type: size; }
#emulator.emu-windowed #screen_container .embed-frame.phone {
  top: 50%; bottom: auto; height: auto; width: min(100cqw, 100cqh * 9 / 16); max-width: none;
  transform: translate(-50%, -50%);
}

/* Terms of Service page (inc/terms.php, and terms.html in the local preview) */
.terms { max-width: 760px; margin: 0 auto; padding: 32px 20px 40px; }
.terms a { color: #58a6ff; }
.terms-home { font-size: 14px; margin-bottom: 28px; }
.terms h1 { font-size: 2rem; line-height: 1.2; }
.terms-updated { color: #8b949e; font-size: 13px; margin: 6px 0 24px; }
.terms h2 {
  font-size: 1.15rem; margin: 30px 0 10px; padding-bottom: 6px; border-bottom: 1px solid #21262d;
  scroll-margin-top: 16px;
}
.terms p, .terms li { font-size: 15px; line-height: 1.6; color: #c9d1d9; }
.terms p + p, .terms p + ul, .terms ul + p { margin-top: 10px; }
.terms ul { padding-left: 22px; }
.terms li + li { margin-top: 6px; }
.terms-page footer { border-top: 1px solid #21262d; }
/* Removal request form (assets/js/removal-request.js) */
.removal-form {
  display: grid; gap: 16px; margin-top: 16px; padding: 20px;
  background: #161b22; border: 1px solid #30363d; border-radius: 12px;
}
.removal-field { display: grid; gap: 6px; }
.removal-field label { font-size: 14px; font-weight: 600; color: #e6edf3; }
.removal-hint { font-size: 13px; font-weight: 400; color: #8b949e; }
.removal-field input, .removal-field textarea {
  width: 100%; padding: 9px 12px; border-radius: 6px; border: 1px solid #30363d;
  background: #0d1117; color: #e6edf3; font: inherit; font-size: 15px; line-height: 1.5;
}
.removal-field textarea { resize: vertical; }
.removal-field input:focus, .removal-field textarea:focus { outline: 2px solid #1f6feb; outline-offset: -1px; border-color: #1f6feb; }
.removal-form [aria-invalid="true"] { border-color: #f85149; }
.removal-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.removal-confirm { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: #c9d1d9; cursor: pointer; }
.removal-confirm input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: #238636; cursor: pointer; }
.removal-confirm input[aria-invalid="true"] { outline: 2px solid #f85149; outline-offset: 1px; }
.removal-actions button {
  padding: 10px 20px; background: #238636; color: #fff; border: 1px solid #2ea043; border-radius: 6px;
  font: inherit; font-weight: 600; cursor: pointer;
}
.removal-actions button:hover:not(:disabled) { background: #1c6a2b; }
.removal-actions button:disabled { opacity: 0.5; cursor: not-allowed; }
.removal-status {
  padding: 10px 12px; border-radius: 6px; border: 1px solid #30363d; background: #0d1117;
  font-size: 14px; line-height: 1.5; color: #c9d1d9;
}
.removal-status:empty { display: none; }
.removal-status.success { border-color: #238636; color: #3fb950; }
.removal-status.error { border-color: #da3633; color: #ff7b72; }
@media (max-width: 600px) {
  .terms { padding: 20px 16px 32px; }
  .terms h1 { font-size: 1.6rem; }
  .removal-form { padding: 16px 14px; }
  /* 16px keeps phones from zooming in on a focused field. */
  .removal-field input, .removal-field textarea { font-size: 16px; }
  .removal-actions button { width: 100%; }
}