:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #080d19; color: #f3f5ff; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; background: radial-gradient(circle at 22% -5%, #27356b 0, transparent 32rem), radial-gradient(circle at 90% 92%, #153b46 0, transparent 35rem), #080d19; }
.shell { width: min(1200px, calc(100% - 32px)); margin: auto; }
.topbar { min-height: 78px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #29314a; }
.brand { display: flex; gap: 11px; align-items: center; color: inherit; text-decoration: none; font-size: 18px; letter-spacing: -.03em; }.brand b { color: #98ffd1; font-weight: 650; }.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: #98ffd1; color: #0a1420; font-size: 13px; font-family: ui-monospace, monospace; font-weight: 800; }.repo-status { color: #aeb8d4; font-size: 13px; }
.intro { padding: 72px 0 42px; max-width: 720px; }.eyebrow { color: #98ffd1; font-size: 11px; font-weight: 800; letter-spacing: .15em; }.intro h1 { margin: 12px 0 15px; font-size: clamp(36px, 6vw, 66px); letter-spacing: -.07em; line-height: 1.05; }.intro p:not(.eyebrow) { color: #bac4dc; margin: 0; font-size: 16px; line-height: 1.8; }
.workspace { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(310px, .85fr); min-height: 540px; border: 1px solid #303956; border-radius: 16px; overflow: hidden; background: #0d1424cc; box-shadow: 0 25px 80px #0005; }.editor-panel { display: flex; flex-direction: column; border-right: 1px solid #303956; }.panel-head { height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid #303956; color: #d7def3; font-weight: 650; font-size: 13px; }.panel-head select { appearance: none; max-width: 180px; padding: 6px 26px 6px 9px; color: #a9ffda; border: 1px solid #405071; border-radius: 6px; background: #111b30; font: inherit; cursor: pointer; }.file-name { margin-left: auto; color: #6f7c9e; font: 12px ui-monospace, monospace; }
.editor-wrap { flex: 1; display: flex; overflow: hidden; background: #0a1020; }.line-numbers { width: 48px; flex: 0 0 48px; overflow: hidden; padding: 18px 10px; color: #53617f; background: #0b1121; border-right: 1px solid #202940; text-align: right; white-space: pre; font: 13px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; user-select: none; }textarea { flex: 1; min-height: 486px; padding: 18px; resize: none; border: 0; outline: 0; background: transparent; color: #dce7ff; tab-size: 4; font: 13px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; }
.output-panel { display: flex; flex-direction: column; min-width: 0; }.dot { width: 9px; height: 9px; margin-left: auto; border-radius: 99px; background: #7a89a9; box-shadow: 0 0 0 4px #7a89a922; }.dot.ready { background: #98ffd1; box-shadow: 0 0 0 4px #98ffd122; }.dot.error { background: #ff8499; box-shadow: 0 0 0 4px #ff849922; }pre { flex: 1; min-height: 315px; max-height: 420px; margin: 0; padding: 18px; overflow: auto; color: #aebbd5; white-space: pre-wrap; font: 12px/1.65 ui-monospace, SFMono-Regular, Consolas, monospace; }.actions { display: grid; gap: 10px; padding: 16px; border-top: 1px solid #303956; }.toggle { color: #aeb8d4; font-size: 12px; cursor: pointer; }.toggle input { accent-color: #67d9ad; }button { min-height: 42px; border: 0; border-radius: 8px; font: 700 13px inherit; cursor: pointer; }button:disabled { cursor: wait; opacity: .6; }.run { background: #98ffd1; color: #092017; }.run:hover:not(:disabled) { background: #c1ffe4; }.run span { margin-right: 5px; }.check { border: 1px solid #4b5a7e; background: #17223a; color: #d9e2f7; }.check:hover:not(:disabled) { background: #223253; }footer { display: flex; justify-content: center; gap: 9px; padding: 24px 0 36px; color: #71809e; font-size: 12px; }
@media (max-width: 780px) { .topbar { min-height: 62px; }.repo-status { font-size: 11px; }.intro { padding-top: 42px; }.workspace { grid-template-columns: 1fr; }.editor-panel { border-right: 0; border-bottom: 1px solid #303956; }.editor-wrap, textarea { min-height: 400px; }.output-panel pre { min-height: 160px; }.output-panel { min-height: 360px; }footer { flex-wrap: wrap; }.shell { width: min(100% - 20px, 1200px); } }