:root { color-scheme: dark; --bg: #03070d; --cyan: #6de7ff; --line: rgba(116, 210, 237, .2); --muted: #7895a1; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--bg); color: #e8f8fc; font-family: Inter, "Segoe UI", sans-serif; }
.experiment-app { display: grid; grid-template-rows: 72px minmax(0, 1fr); width: 100%; height: 100%; }
.app-header { z-index: 2; display: grid; grid-template-columns: minmax(190px, 1fr) auto minmax(100px, 1fr); align-items: center; gap: 24px; padding: 0 22px; border-bottom: 1px solid var(--line); background: rgba(4, 11, 18, .96); box-shadow: 0 10px 40px rgba(0, 0, 0, .32); }
.brand { display: flex; align-items: center; gap: 12px; width: max-content; color: inherit; text-decoration: none; }
.brand > span:last-child { display: flex; flex-direction: column; }
.brand strong { font: 700 16px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .2em; }
.brand small { margin-top: 3px; color: var(--muted); font: 8px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .16em; }
.brand-mark { position: relative; display: block; width: 28px; height: 28px; border: 1px solid rgba(86, 232, 255, .38); transform: rotate(45deg); }
.brand-mark::before, .brand-mark::after, .brand-mark i { content: ""; position: absolute; inset: 6px; border: 1px solid var(--cyan); }
.brand-mark::after { inset: 10px; background: var(--cyan); box-shadow: 0 0 13px var(--cyan); }
.brand-mark i:first-child { inset: -3px 12px; border-width: 0 1px; }
.brand-mark i:last-child { inset: 12px -3px; border-width: 1px 0; }
.tabs { display: flex; align-self: stretch; gap: 4px; }
.tab { position: relative; padding: 0 17px; border: 0; background: transparent; color: #829aa5; cursor: pointer; font: 10px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.tab::after { content: ""; position: absolute; right: 15px; bottom: 0; left: 15px; height: 2px; background: transparent; }
.tab:hover, .tab.active { color: var(--cyan); }
.tab.active::after { background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.live-link { justify-self: end; padding: 9px 12px; border: 1px solid var(--line); border-radius: 6px; color: #a8c1cb; text-decoration: none; font: 9px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; }
.live-link:hover { border-color: var(--cyan); color: var(--cyan); }
.view-stack { position: relative; min-height: 0; }
.view { display: none; width: 100%; height: 100%; border: 0; background: var(--bg); }
.view.active { display: block; }

@media (max-width: 780px) {
  .experiment-app { grid-template-rows: 108px minmax(0, 1fr); }
  .app-header { grid-template-columns: 1fr auto; grid-template-rows: 56px 52px; gap: 0 12px; padding: 0 14px; }
  .tabs { grid-column: 1 / -1; grid-row: 2; overflow-x: auto; }
  .tab { flex: 1 0 auto; padding: 0 12px; }
  .live-link { grid-column: 2; grid-row: 1; }
}