:root { color-scheme: light; font: 16px/1.5 system-ui, sans-serif; color: #172036; background: #f4f6fb; }
body { margin: 0; }
main { width: min(900px, calc(100% - 32px)); margin: 48px auto; }
header { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
h1 { font-size: 2.2rem; letter-spacing: -.04em; }
#status { color: #65708b; }
form { display: grid; grid-template-columns: 1fr auto auto auto auto; gap: 10px; padding: 16px; background: white; border-radius: 14px; box-shadow: 0 8px 32px #20305012; }
input, select, button { font: inherit; border: 1px solid #cad1df; border-radius: 8px; padding: 10px 12px; }
button { color: white; background: #3b5ccc; border-color: #3b5ccc; cursor: pointer; }
button:disabled { opacity: .55; cursor: wait; }
#answer, #notices, #usage { margin: 18px 0; padding: 14px 16px; border-radius: 10px; background: #eaf0ff; white-space: pre-wrap; }
#notices { background: #fff3d9; }
#usage { background: white; white-space: normal; box-shadow: 0 4px 20px #2030500d; }
.usage-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.usage-head h2 { margin: 0; font-size: 1rem; }
.usage-head span, td small { color: #65708b; }
.table-wrap { overflow-x: auto; }
table { width: 100%; margin-top: 10px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { padding: 8px; border-top: 1px solid #e2e6ef; text-align: right; }
th:first-child, td:first-child { text-align: left; }
td small { display: block; font-size: .72rem; }
#results { padding: 0; list-style: none; }
.result { margin: 12px 0; padding: 16px; background: white; border-radius: 12px; box-shadow: 0 4px 20px #2030500d; }
.head { display: flex; justify-content: space-between; gap: 20px; font-weight: 650; }
.meta, .description { color: #65708b; }
@media (max-width: 700px) { form { grid-template-columns: 1fr 1fr; } input { grid-column: 1 / -1; } header { display: block; } }