:root { color: #1b1c20; background: #f4f4f0; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
main { width: min(720px, calc(100% - 32px)); margin: 0 auto; padding: 12vh 0 5rem; }
header { margin-bottom: 2.5rem; }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.header-row a { color: #60645a; font-size: .78rem; font-weight: 700; }
.header-row a:hover { color: #1b1c20; }
.label { margin: 0 0 .65rem; color: #60645a; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(2.7rem, 8vw, 5rem); letter-spacing: -.08em; line-height: .95; }
header > p:last-child { max-width: 430px; color: #5e615a; font-size: 1.05rem; line-height: 1.6; }
form, section { border: 1px solid #d3d4cb; border-radius: 10px; background: #fffefa; padding: 1.25rem; box-shadow: 0 12px 30px rgba(20, 22, 17, .06); }
label { display: block; margin-bottom: .6rem; font-size: .8rem; font-weight: 750; }
textarea { width: 100%; min-height: 180px; resize: vertical; border: 1px solid #c9cac2; border-radius: 6px; padding: .9rem; color: inherit; background: #fff; font: inherit; line-height: 1.55; }
textarea:focus { outline: 3px solid #cfef5f; border-color: #63752e; }
.form-footer, .result-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .8rem; }
.form-footer span, .status { color: #686b64; font-size: .78rem; }
button { border: 0; border-radius: 6px; padding: .68rem .9rem; background: #1b1c20; color: white; font: inherit; font-size: .82rem; font-weight: 750; cursor: pointer; }
button:hover { background: #42453c; }
button:disabled { cursor: wait; opacity: .65; }
#error { margin: .9rem 0 0; color: #ad361c; font-size: .85rem; }
section { margin-top: 1.25rem; background: #1e201c; color: #f6f7ed; }
.result-heading { margin: 0 0 1rem; }
h2 { margin: 0; font-size: 1rem; }
#copy { padding: .35rem .55rem; background: transparent; border: 1px solid #666b5f; }
pre { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; font: .98rem/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.status { margin: 1rem 0 0; }
.gate-page main { min-height: 100vh; display: grid; place-items: center; padding: 2rem 0; }
.gate-card { width: min(440px, 100%); border: 1px solid #d3d4cb; border-radius: 10px; background: #fffefa; padding: 1.5rem; box-shadow: 0 12px 30px rgba(20, 22, 17, .06); }
.gate-card h1 { font-size: clamp(2.5rem, 7vw, 4rem); }
.gate-card > p:not(.label) { color: #5e615a; }
.gate-card form { margin-top: 1.5rem; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
.gate-card input { width: 100%; margin-bottom: 1rem; border: 1px solid #c9cac2; border-radius: 6px; padding: .7rem; font: inherit; }
.gate-card input:focus { outline: 3px solid #cfef5f; border-color: #63752e; }
@media (max-width: 520px) { main { padding-top: 4rem; } form, section { padding: 1rem; } }