:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; color: #172033; background: #eef2f7; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 10% 0%, #dcecff, transparent 34rem), #eef2f7; }
.shell { width: min(100% - 2rem, 680px); margin: 0 auto; padding: 5.5rem 0 2rem; }
header { margin-bottom: 2rem; }
.eyebrow { color: #5267c8; font-size: .74rem; font-weight: 800; letter-spacing: .16em; margin: 0 0 .8rem; }
h1 { font-size: clamp(2.3rem, 8vw, 4.4rem); letter-spacing: -.06em; line-height: .95; margin: 0; }
.intro { color: #596579; font-size: 1.08rem; line-height: 1.55; max-width: 32rem; margin: 1.2rem 0 0; }
.card { background: rgba(255,255,255,.88); border: 1px solid rgba(255,255,255,.9); border-radius: 22px; box-shadow: 0 18px 50px rgba(42, 59, 94, .12); padding: clamp(1.25rem, 5vw, 2.2rem); }
h2 { font-size: 1.15rem; margin: 0 0 1.6rem; }
.field { margin-bottom: 1.4rem; }
label { display: block; font-size: .86rem; font-weight: 750; margin-bottom: .55rem; }
label span, small { color: #7b8494; font-weight: 450; }
select, input { appearance: none; border: 1px solid #d5dbe5; border-radius: 11px; background: #fff; color: #172033; font: inherit; font-size: 1rem; padding: .85rem .9rem; width: 100%; }
select:focus, input:focus { border-color: #5267c8; box-shadow: 0 0 0 3px rgba(82,103,200,.16); outline: 0; }
.input-row { display: flex; gap: .6rem; }
.input-row input { min-width: 0; font-variant-numeric: tabular-nums; letter-spacing: .08em; }
button { border: 0; border-radius: 11px; cursor: pointer; font: inherit; font-weight: 750; padding: .85rem 1rem; white-space: nowrap; }
.secondary { background: #e9edff; color: #4255ad; }
.secondary:hover { background: #dfe5ff; }
small { display: block; font-size: .78rem; margin-top: .5rem; }
.results { border-top: 1px solid #e2e6ed; margin-top: 1.8rem; padding-top: .65rem; }
.result-line { align-items: baseline; display: flex; justify-content: space-between; gap: 1rem; padding: .9rem 0; }
.result-line span { color: #687386; font-size: .9rem; }
output { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.35rem; font-weight: 800; letter-spacing: .06em; }
.full { border-top: 1px solid #e2e6ed; }
.full output { color: #4255ad; font-size: clamp(1.35rem, 5vw, 1.8rem); }
.error { color: #b33b3b; font-size: .82rem; margin: .6rem 0 0; }
footer { color: #8b94a3; font-size: .75rem; margin-top: 1.6rem; text-align: center; }
@media (max-width: 480px) { .shell { padding-top: 3rem; } .input-row { align-items: stretch; flex-direction: column; } .input-row button { width: 100%; } .result-line { align-items: flex-start; flex-direction: column; gap: .3rem; } }