@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root { --ink: #132238; --muted: #6c7887; --line: #d8dde3; --paper: #f4f6f3; --panel: #fff; --lime: #c4e84a; --orange: #ec704d; --blue: #2d6cdf; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: 'Space Grotesk', sans-serif; }
button, input, textarea { font: inherit; }
.topbar { height: 76px; display: flex; align-items: center; justify-content: space-between; padding: 0 5vw; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.76); }
.brand, nav, .side-heading, .runner-head, .url-row, .response-head, .status { display: flex; align-items: center; }
.brand { gap: 10px; color: var(--ink); text-decoration: none; letter-spacing: -.03em; }
.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; color: var(--panel); background: var(--ink); border-radius: 50%; font-weight: 700; }
.brand strong, .brand small { display: block; }.brand strong { font-size: 18px; }.brand small { color: var(--muted); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; }
nav { gap: 28px; font-size: 13px; } nav a { color: var(--muted); text-decoration: none; } nav a:hover { color: var(--ink); }.back-link { color: var(--ink); font-weight: 600; }
.status { gap: 7px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }.status i, .dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: #68a93d; }
.shell { width: min(1240px, 90vw); margin: 0 auto; }.intro { display: flex; justify-content: space-between; align-items: end; padding: 70px 0 48px; }.eyebrow { margin: 0 0 12px; color: var(--orange); font: 500 11px 'DM Mono', monospace; letter-spacing: .13em; }.intro h1 { margin: 0; font-size: clamp(42px, 6vw, 78px); line-height: .98; letter-spacing: -.07em; }.intro h1 em { color: var(--blue); font-style: normal; }.lede { max-width: 470px; margin: 24px 0 0; color: var(--muted); line-height: 1.55; }.intro-note { border-left: 2px solid var(--lime); padding-left: 15px; color: var(--muted); font: 12px 'DM Mono', monospace; line-height: 1.5; }.intro-note span { color: var(--ink); font-weight: 500; }.intro-note p { margin: 7px 0 0; }
.workspace { display: grid; grid-template-columns: 285px 1fr; min-height: 590px; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 18px 40px rgba(19,34,56,.06); }.sidebar { display: flex; flex-direction: column; border-right: 1px solid var(--line); background: #eef1ed; }.side-heading { justify-content: space-between; padding: 20px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; }.side-heading button { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 22px; }.operation-list { padding: 4px 10px; }.operation { display: block; width: 100%; padding: 14px 10px; border: 0; border-left: 3px solid transparent; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }.operation:hover, .operation.active { background: var(--panel); border-left-color: var(--orange); }.operation-title { display: block; margin-bottom: 5px; font-size: 14px; font-weight: 600; }.operation-path { display: block; color: var(--muted); font: 11px 'DM Mono', monospace; }.operation-method { float: right; color: var(--blue); font: 10px 'DM Mono', monospace; }.side-footer { margin-top: auto; display: flex; gap: 8px; align-items: center; padding: 20px; color: var(--muted); font: 11px 'DM Mono', monospace; border-top: 1px solid var(--line); }
.runner { padding: 34px clamp(24px, 5vw, 62px); }.runner-head { justify-content: space-between; margin-bottom: 27px; }.runner-head h2 { margin: 0; font-size: 27px; letter-spacing: -.04em; }.method { padding: 7px 10px; border-radius: 2px; font: 500 11px 'DM Mono', monospace; }.method.get { color: #2b7029; background: #d8f0c6; }.method.post { color: #8a4a15; background: #ffe1ac; }.method.delete { color: #9a3123; background: #ffd0c7; }.method.patch { color: #4d4090; background: #e5dcff; }
.url-row { gap: 0; margin-bottom: 25px; border: 1px solid var(--line); background: #fafbfa; }.url-row > span { padding: 14px; color: var(--blue); font: 500 11px 'DM Mono', monospace; }.url-row input { min-width: 0; flex: 1; padding: 13px 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 13px 'DM Mono', monospace; }.send { align-self: stretch; padding: 0 20px; border: 0; color: var(--ink); background: var(--lime); cursor: pointer; font-weight: 600; }.send:hover { background: #d3f36b; }.send span { margin-left: 10px; font-size: 18px; }.editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }.field { display: block; margin-bottom: 20px; }.field > span, .response-head { display: flex; justify-content: space-between; margin-bottom: 8px; color: var(--muted); font: 11px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; }.field small { color: #a6adb4; text-transform: lowercase; letter-spacing: 0; }.field input, .field textarea { width: 100%; padding: 12px; border: 1px solid var(--line); outline: 0; color: var(--ink); background: #fafbfa; font: 12px 'DM Mono', monospace; }.field input:focus, .field textarea:focus { border-color: var(--blue); }.payload-field textarea { height: 142px; resize: vertical; }.response-head { padding-top: 4px; border-top: 1px solid var(--line); padding-top: 22px; }.response-head span:last-child { color: var(--blue); }.response-body { min-height: 120px; max-height: 230px; margin: 0; overflow: auto; padding: 16px; color: #ced8e5; background: var(--ink); font: 12px/1.6 'DM Mono', monospace; white-space: pre-wrap; }.placeholder { color: #8290a2; }
@media (max-width: 760px) { .topbar { padding: 0 5vw; } nav a { display: none; }.intro { display: block; padding: 48px 0 32px; }.intro h1 { font-size: 48px; }.intro-note { margin-top: 28px; }.workspace { display: block; }.sidebar { border-right: 0; border-bottom: 1px solid var(--line); }.operation-list { display: flex; overflow-x: auto; }.operation { min-width: 180px; }.runner { padding: 28px 20px; }.editor-grid { display: block; }.url-row { align-items: stretch; }.url-row input { width: 100%; }.send { padding: 0 12px; }.shell { width: 94vw; } }

/* Theme variations */
.theme-picker { display: flex; align-items: center; gap: 7px; color: var(--muted); font: 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; }
.theme-picker select { padding: 6px 22px 6px 8px; border: 1px solid var(--line); border-radius: 3px; color: var(--ink); background: var(--panel); font: 11px 'Space Grotesk', sans-serif; cursor: pointer; }
:root[data-theme="xp"] { --ink: #12356d; --muted: #45668f; --line: #83a5d2; --paper: #cfe4fb; --panel: #f4f9ff; --lime: #f7d84a; --orange: #c75327; --blue: #1758a5; }
:root[data-theme="xp"] .topbar { background: linear-gradient(#3d91e5, #1556a7); border-bottom-color: #0d3f80; }
:root[data-theme="xp"] .topbar a, :root[data-theme="xp"] .topbar .status, :root[data-theme="xp"] .theme-picker { color: #fff; }
:root[data-theme="xp"] .brand-mark { border-radius: 7px; box-shadow: inset 1px 1px #fff8, inset -1px -1px #061e50; }
:root[data-theme="xp"] .workspace { border: 2px solid #7898c6; border-radius: 8px; box-shadow: 4px 5px 0 #7898c655; }
:root[data-theme="xp"] .theme-picker select, :root[data-theme="xp"] .send, :root[data-theme="xp"] .url-row { box-shadow: inset 1px 1px #fff, inset -1px -1px #8da7ca; }
:root[data-theme="xp"] .theme-picker select { border-radius: 2px; }
:root[data-theme="terminal"] { --ink: #b7f7c2; --muted: #76ae82; --line: #285537; --paper: #07100a; --panel: #0d1b11; --lime: #9cf04d; --orange: #f0c84b; --blue: #78d9ff; }
:root[data-theme="terminal"] body { font-family: 'DM Mono', monospace; text-shadow: 0 0 10px #9cf04d12; }
:root[data-theme="terminal"] .topbar, :root[data-theme="terminal"] .sidebar { background: #09150c; }
:root[data-theme="terminal"] .topbar { border-bottom-color: var(--line); }
:root[data-theme="terminal"] .brand-mark { border-radius: 2px; color: #07100a; background: var(--lime); }
:root[data-theme="terminal"] .workspace { box-shadow: 0 0 28px #4ee87918; }
:root[data-theme="terminal"] .field input, :root[data-theme="terminal"] .field textarea, :root[data-theme="terminal"] .url-row, :root[data-theme="terminal"] .theme-picker select { color: var(--ink); background: #07100a; }
:root[data-theme="terminal"] .intro h1 em, :root[data-theme="terminal"] .eyebrow, :root[data-theme="terminal"] .operation-method, :root[data-theme="terminal"] .response-head span:last-child { color: var(--lime); }
:root[data-theme="terminal"] .send { color: #07100a; background: var(--lime); }
:root[data-theme="terminal"] .method.get { color: var(--lime); background: #173b20; }