:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #08101d; color: #e8eef8; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 80% 0%, #18345a 0, transparent 38%), #08101d; }
.shell { width: min(1080px, calc(100% - 32px)); margin: auto; padding: 64px 0; }
h1 { font-size: clamp(2.25rem, 6vw, 4.5rem); letter-spacing: -.05em; margin: 8px 0; }
h2 { margin: 0 0 8px; } .lead { color: #a9b8cd; font-size: 1.15rem; max-width: 680px; }
.eyebrow { color: #54d6bb; font: 700 .75rem/1.2 ui-monospace, monospace; letter-spacing: .12em; }
.card { margin-top: 32px; padding: 28px; border: 1px solid #263a55; border-radius: 18px; background: rgba(14, 27, 46, .88); box-shadow: 0 18px 60px #0005; }
.upload, .result-head { display: flex; justify-content: space-between; align-items: center; gap: 28px; }
code { color: #8bd8ff; } li { margin: 7px 0; color: #b7c5d7; }
.actions { display: grid; gap: 12px; min-width: 190px; text-align: center; }
input[type=file] { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.button { cursor: pointer; padding: 13px 20px; border-radius: 9px; color: #061117; background: #54d6bb; font-weight: 800; }
.button:hover { background: #7be5cf; } .sample { color: #8bd8ff; }
.message { margin-top: 20px; border-radius: 10px; padding: 15px 18px; } .error { background: #481b27; border: 1px solid #9b4057; color: #ffd8e1; }
.answer { min-width: 230px; padding: 15px 18px; border-left: 3px solid #54d6bb; background: #10283a; }
.answer span, .answer small { display: block; color: #a9b8cd; }.answer strong { display:block; font-size: 1.35rem; margin: 5px 0; }
.table-wrap { overflow-x: auto; margin-top: 24px; } table { width: 100%; border-collapse: collapse; }
th, td { padding: 14px; text-align: right; border-bottom: 1px solid #263a55; font-variant-numeric: tabular-nums; }
th:first-child, td:first-child { text-align: left; } thead { color: #92a7c0; } tfoot { font-weight: 800; }
.scope { color: #92a7c0; font-size: .9rem; margin: 20px 0 0; }
[hidden] { display: none !important; }
@media (max-width: 700px) { .shell { padding: 36px 0; } .upload, .result-head { align-items: stretch; flex-direction: column; } .actions, .answer { width: 100%; } .card { padding: 20px; } }