:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #ecece7; background: #111210; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 80% 0%, #293025 0, transparent 35%), #111210; }
.shell { width: min(880px, calc(100% - 40px)); margin: 0 auto; padding: 84px 0 34px; }
.hero { margin-bottom: 52px; }
.eyebrow { color: #8f9583; font-size: 11px; font-weight: 700; letter-spacing: .15em; margin: 0 0 16px; }
h1 { font-size: clamp(46px, 8vw, 82px); letter-spacing: -.07em; line-height: .94; margin: 0; font-weight: 700; }
h1 em { color: #b6be8b; font-style: normal; }
.intro { color: #a0a49a; font-size: 16px; line-height: 1.5; margin: 24px 0 0; max-width: 430px; }
.panel, .result-panel { border: 1px solid #30332d; border-radius: 18px; background: rgba(28,30,26,.82); box-shadow: 0 14px 50px rgba(0,0,0,.18); }
.panel { padding: 22px; }
label { display: block; font-size: 13px; font-weight: 650; margin-bottom: 10px; }
.input-row { display: flex; gap: 10px; }
input { background: #171916; border: 1px solid #3c4038; border-radius: 10px; color: #ecece7; font: inherit; min-width: 0; outline: none; padding: 14px 15px; width: 100%; }
input:focus, textarea:focus { border-color: #8a8d68; box-shadow: 0 0 0 3px rgba(138,141,104,.14); }
button { border: 0; border-radius: 10px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap; }
#fetch-button { background: #d9dfaa; color: #20231b; padding: 0 20px; }
#fetch-button:disabled { cursor: wait; opacity: .6; }
#fetch-button span { color: #b7bc8d; font-size: 17px; margin-left: 8px; }
.status { color: #92988a; font-size: 13px; min-height: 18px; margin: 12px 0 0; }
.status.error { color: #f08d82; }
.status.success { color: #c3d28b; }
.result-panel { margin-top: 18px; padding: 22px; }
.result-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: 14px; }
.result-actions { display: flex; gap: 8px; }
h2 { font-size: 23px; letter-spacing: -.04em; margin: 0; }
.result-heading .eyebrow { margin-bottom: 7px; }
.copy-button { background: #353b2b; color: #d4dfa2; padding: 10px 13px; }
.copy-button:disabled { cursor: not-allowed; opacity: .45; }
.copy-button span { color: #8b8e76; font-size: 11px; font-weight: 500; margin-left: 7px; }
textarea { background: #151714; border: 1px solid #343830; border-radius: 10px; color: #dfe2d8; display: block; font: 14px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; min-height: 360px; outline: none; padding: 17px; resize: vertical; width: 100%; }
textarea::placeholder { color: #71766c; }
footer { color: #70766d; font-size: 11px; margin-top: 22px; text-align: center; }
.steps { display: grid; gap: 1px; grid-template-columns: repeat(3, 1fr); margin-top: 58px; }
.steps > div { border-top: 1px solid #30332d; padding: 17px 16px 0 0; }
.steps span { color: #b6be8b; display: block; font: 700 11px ui-monospace, monospace; margin-bottom: 22px; }
.steps strong, .steps small { display: block; }
.steps strong { font-size: 14px; margin-bottom: 7px; }
.steps small { color: #8f958a; font-size: 12px; line-height: 1.45; max-width: 170px; }
@media (max-width: 620px) { .shell { padding-top: 48px; width: min(100% - 28px, 880px); } .hero { margin-bottom: 34px; } .input-row { flex-direction: column; } #fetch-button { padding: 14px 20px; } .result-heading { align-items: start; gap: 16px; } .copy-button { padding: 9px 10px; } }
@media (max-width: 620px) { .steps { gap: 22px; grid-template-columns: 1fr; margin-top: 42px; } .steps > div { padding-top: 14px; } }