:root {
  color-scheme: dark;
  --ink: #e9f5ef;
  --muted: #9ab5aa;
  --line: rgba(226, 249, 237, 0.2);
  --panel: rgba(10, 17, 18, 0.78);
  --accent: #b5f36d;
  --accent-2: #78d8be;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --edge: clamp(14px, 3vw, 28px);
}

* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #101617; }

body {
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  user-select: none;
  touch-action: none;
}

button, input { font: inherit; }
button { color: inherit; cursor: pointer; touch-action: manipulation; }

.g1-app { position: relative; width: 100vw; height: 100vh; height: 100svh; height: 100dvh; overflow: hidden; background: #101617; }
.g1-stage { position: absolute; inset: 0; overflow: hidden; background: #101617; }
#g1-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; touch-action: none; }

.g1-stage-copy {
  position: absolute;
  z-index: 1;
  top: calc(var(--edge) + var(--safe-top));
  left: calc(var(--edge) + var(--safe-left));
  max-width: 420px;
  pointer-events: none;
  text-shadow: 0 2px 18px #08100f;
}

.eyebrow { color: var(--accent); font-size: 10px; font-weight: 750; letter-spacing: 0.17em; }
h1 { margin: 13px 0 0; font-size: clamp(28px, 4vw, 54px); line-height: .95; letter-spacing: -0.065em; font-weight: 560; }
h1 em { color: var(--accent-2); font-family: Georgia, serif; font-weight: 400; }
.g1-stage-copy p { margin: 10px 0 0; color: #c0d1c9; font-size: 12px; }

.g1-loading {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: calc(var(--edge) + var(--safe-bottom));
  transform: translateX(-50%);
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
  backdrop-filter: blur(10px);
}

.g1-panel { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.g1-panel-head {
  position: absolute;
  top: calc(var(--edge) + var(--safe-top));
  right: calc(var(--edge) + var(--safe-right));
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  pointer-events: auto;
  backdrop-filter: blur(10px);
}
.g1-status { margin: 6px 0 0; color: var(--muted); font-size: 10px; }
.live-dot { width: 7px; height: 7px; margin-top: 3px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(181,243,109,.1); }

.g1-section { pointer-events: auto; }
.g1-panel > .g1-section:first-of-type {
  position: absolute;
  bottom: calc(var(--edge) + var(--safe-bottom));
  left: calc(var(--edge) + var(--safe-left));
  padding: 11px 12px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  backdrop-filter: blur(10px);
}
.section-label, .range-label { display: flex; justify-content: space-between; color: #b0c8bd; font-size: 9px; letter-spacing: .12em; font-weight: 750; }
.muted { color: #779289; letter-spacing: .04em; font-weight: 500; }
.command-readout { display: flex; align-items: baseline; gap: 9px; margin: 7px 0 9px; }
.command-readout span { color: var(--accent); font-family: "SFMono-Regular", Consolas, monospace; font-size: 16px; letter-spacing: -.08em; }
.command-readout small { color: var(--muted); font-size: 9px; }
.g1-key-grid { display: grid; grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(3, 40px); grid-template-areas: ". w ." "a s d" "q . e"; gap: 4px; justify-content: center; }
.g1-key-grid button { display: grid; place-items: center; min-width: 44px; min-height: 40px; padding: 4px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.04); color: var(--muted); transition: .15s ease; }
.g1-key-grid button:nth-child(1) { grid-area: w; }
.g1-key-grid button:nth-child(2) { grid-area: a; }
.g1-key-grid button:nth-child(3) { grid-area: s; }
.g1-key-grid button:nth-child(4) { grid-area: d; }
.g1-key-grid button:nth-child(5) { grid-area: q; }
.g1-key-grid button:nth-child(6) { grid-area: e; }
.g1-key-grid button:hover, .g1-key-grid button.is-active { border-color: rgba(181,243,109,.7); background: rgba(181,243,109,.13); color: var(--ink); }
kbd { color: var(--ink); font-size: 12px; font-weight: 800; }
.g1-key-grid span { display: none; }
.control-note { margin: 8px 0 0; color: #78938a; font-size: 9px; line-height: 1.35; }

.g1-actions {
  position: absolute;
  right: calc(var(--edge) + var(--safe-right));
  bottom: calc(var(--edge) + var(--safe-bottom));
  width: min(220px, 35vw);
  padding: 11px 12px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  backdrop-filter: blur(10px);
}
.push-row { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 9px 0 10px; }
.outline-button, .secondary-button { border: 1px solid rgba(181,243,109,.42); border-radius: 5px; padding: 9px 6px; background: transparent; color: var(--accent); font-size: 10px; }
.outline-button:hover, .secondary-button:hover { background: rgba(181,243,109,.09); }
.range-label { margin-bottom: 7px; color: var(--muted); letter-spacing: .04em; font-weight: 500; }
output { color: var(--accent); font-family: monospace; }
input[type="range"] { width: 100%; accent-color: var(--accent); }

.telemetry { position: absolute; top: calc(198px + var(--safe-top)); left: calc(var(--edge) + var(--safe-left)); display: flex; gap: 13px; pointer-events: auto; }
.telemetry-item { display: grid; gap: 3px; }
.telemetry-item span { color: var(--muted); font-size: 9px; }
.telemetry-item strong { color: var(--ink); font-family: monospace; font-size: 11px; font-weight: 500; }
.g1-buttons { position: absolute; top: calc(100px + var(--safe-top)); right: calc(var(--edge) + var(--safe-right)); display: flex; gap: 6px; pointer-events: auto; }
.primary-button, .secondary-button { border-radius: 5px; padding: 9px 12px; font-size: 10px; font-weight: 800; }
.primary-button { border: 0; background: var(--accent); color: #172514; }
.primary-button:hover { filter: brightness(1.08); }
.secondary-button:disabled { cursor: default; opacity: .4; }
.pipeline, .g1-meta { display: none; }
.g1-error { position: absolute; left: 50%; bottom: calc(var(--edge) + var(--safe-bottom)); transform: translateX(-50%); max-width: min(420px, calc(100vw - 32px)); margin: 0; padding: 10px; border: 1px solid #bc6969; border-radius: 6px; background: rgba(30, 12, 12, .88); color: #f3aaaa; font-size: 11px; line-height: 1.45; pointer-events: auto; }

@media (max-width: 700px) {
  :root { --edge: 12px; }
  .g1-stage-copy { display: none; }
  .g1-panel-head { top: calc(var(--edge) + var(--safe-top)); right: calc(var(--edge) + var(--safe-right)); padding: 7px 9px; }
  .g1-panel-head .eyebrow { font-size: 9px; }
  .g1-status { font-size: 9px; }
  .telemetry { top: calc(70px + var(--safe-top)); left: calc(var(--edge) + var(--safe-left)); }
  .telemetry-item:nth-child(n+2) { display: none; }
  .g1-buttons { top: calc(70px + var(--safe-top)); right: calc(var(--edge) + var(--safe-right)); }
  .g1-panel > .g1-section:first-of-type { left: calc(var(--edge) + var(--safe-left)); bottom: calc(var(--edge) + var(--safe-bottom)); }
  .g1-actions { right: calc(var(--edge) + var(--safe-right)); bottom: calc(var(--edge) + var(--safe-bottom)); width: min(176px, 43vw); }
  .g1-actions .section-label, .g1-actions .range-label, .g1-actions input { display: none; }
  .push-row { margin: 0; }
  .control-note { max-width: 145px; }
  .g1-loading { bottom: calc(180px + var(--safe-bottom)); max-width: calc(100vw - 24px); overflow: hidden; text-overflow: ellipsis; }
}

@media (max-width: 390px) {
  .g1-panel > .g1-section:first-of-type { transform: scale(.9); transform-origin: bottom left; }
  .g1-actions { transform: scale(.9); transform-origin: bottom right; }
  .telemetry { display: none; }
}