:root {
  color-scheme: dark;
  --bg: #07080a;
  --panel: #101217;
  --panel-2: #151820;
  --text: #f2f4f7;
  --muted: #969daa;
  --line: rgba(255,255,255,.10);
  --accent: #6d8cff;
  --accent-2: #8e9cff;
  --danger: #ff7070;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: radial-gradient(circle at 75% 8%, rgba(109,140,255,.13), transparent 30rem), linear-gradient(180deg, #090a0d, var(--bg));
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.shell { width: min(980px, calc(100% - 32px)); margin: 0 auto; padding: 72px 0 80px; }
.hero { padding: 14px 0 48px; }
.eyebrow, .kicker, .result-label { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
h1 { font-size: clamp(52px, 8vw, 96px); line-height: .94; letter-spacing: -.055em; margin: 18px 0 20px; }
h1 span { color: var(--accent-2); }
.lead { color: var(--muted); line-height: 1.8; font-size: 15px; }
.panel { border: 1px solid var(--line); background: rgba(16,18,23,.82); backdrop-filter: blur(18px); box-shadow: 0 24px 80px rgba(0,0,0,.25); }
.creator { padding: 28px; }
.panel-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom: 22px; }
h2 { margin: 7px 0 0; font-size: 22px; letter-spacing: -.025em; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: #7ef1a5; box-shadow: 0 0 0 6px rgba(126,241,165,.08), 0 0 24px rgba(126,241,165,.45); }
textarea { width: 100%; min-height: 250px; resize: vertical; border: 1px solid var(--line); outline: 0; background: var(--panel-2); color: var(--text); padding: 18px; border-radius: 2px; line-height: 1.7; }
textarea:focus, input:focus, select:focus { border-color: rgba(109,140,255,.65); box-shadow: 0 0 0 3px rgba(109,140,255,.10); }
.controls { display:grid; grid-template-columns: 180px 1fr; gap: 12px; margin-top: 12px; }
label > span { display:block; color: var(--muted); font-size: 12px; margin-bottom: 7px; }
select, input { width:100%; background: var(--panel-2); color: var(--text); border:1px solid var(--line); padding: 14px; outline:0; border-radius: 2px; }
.primary, .secondary { min-height: 50px; padding: 0 18px; border-radius: 2px; transition: transform .16s ease, filter .16s ease; }
.primary { align-self:end; background: var(--accent); color: #fff; font-weight: 750; }
.primary:hover, .secondary:hover { transform: translateY(-1px); filter: brightness(1.08); }
.primary span { margin-left: 8px; opacity: .8; }
.secondary { background: transparent; color: var(--text); border:1px solid var(--line); }
.error { min-height: 20px; color: var(--danger); font-size: 13px; margin: 12px 0 0; }
.result { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 20px; }
.url-row { display:grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 8px; }
.result p { color: var(--muted); font-size: 13px; line-height: 1.6; }
.text-button { background:none; color:var(--accent-2); padding:0; }
.notes { display:grid; grid-template-columns:repeat(3,1fr); margin-top: 18px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.notes > div { padding:18px 12px; border-right:1px solid var(--line); }
.notes > div:last-child { border-right:0; }
.notes span { color:var(--accent-2); font-size:11px; letter-spacing:.14em; }
.notes p { margin:10px 0 0; color:var(--muted); font-size:13px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.open-page { min-height:100vh; display:grid; place-items:center; align-content:center; }
.open-page .eyebrow { margin-bottom:16px; }
.state-panel { width:min(720px,100%); padding:44px; text-align:center; }
.state-panel h1 { font-size: clamp(38px, 7vw, 64px); margin: 18px 0 12px; }
.state-panel p { color: var(--muted); line-height:1.8; margin:0 auto 24px; max-width: 540px; }
.state-panel .primary { min-width:220px; }
.back { display:block; color:var(--muted); text-decoration:none; margin-top:28px; font-size:13px; }
.loader { width:10px; height:10px; border-radius:50%; background:var(--accent); margin:0 auto; box-shadow:0 0 28px rgba(109,140,255,.55); animation:pulse 1.4s infinite; }
@keyframes pulse { 50% { transform:scale(1.55); opacity:.55; } }
.content-view { white-space: pre-wrap; text-align:left; background:var(--panel-2); border:1px solid var(--line); padding:24px; line-height:1.9; max-height:60vh; overflow:auto; overflow-wrap:anywhere; }
@media (max-width: 700px) {
  .shell { width:min(100% - 20px, 980px); padding-top:42px; }
  .creator, .state-panel { padding:20px; }
  .controls, .url-row, .notes { grid-template-columns:1fr; }
  .notes > div { border-right:0; border-bottom:1px solid var(--line); }
  .notes > div:last-child { border-bottom:0; }
}