:root { font-family: system-ui, sans-serif; color: #15202b; background: #f4f7fb; }
body { margin: 0; }
main { width: min(720px, calc(100% - 32px)); margin: 48px auto; }
h1 { margin-bottom: 8px; }
.intro { color: #52606d; margin-top: 0; }
section { background: white; margin: 20px 0; padding: 24px; border-radius: 14px; box-shadow: 0 5px 24px #18315312; }
.title { display: flex; align-items: center; gap: 12px; }
.title span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #315efb; color: white; font-weight: 700; }
h2 { font-size: 19px; }
label { display: grid; gap: 7px; margin: 12px 0; font-weight: 600; }
input { padding: 10px; border: 1px solid #c8d1dc; border-radius: 8px; }
button { border: 0; border-radius: 9px; padding: 11px 17px; color: white; background: #315efb; font-weight: 700; cursor: pointer; }
button:disabled { opacity: .55; cursor: wait; }
.locked { opacity: .45; pointer-events: none; }
#didit-container { width: 100%; height: 640px; max-height: 80vh; border-radius: 10px; overflow: hidden; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; background: #f6f8fa; padding: 12px; border-radius: 8px; display: none; }
pre.ok, pre.error { display: block; }
pre.error { color: #a01919; background: #fff0f0; }
code { font-size: 12px; }
a { color: #315efb; }
p { color: #52606d; line-height: 1.45; }