:root { --red: #c8102e; --navy: #1b1f3a; --link: #0000cc; --visited: #551a8b; --rule: #c9c9c9; --cream: #fff8dc; color-scheme: light; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: #000; font: 16px/1.4 Arial, Helvetica, sans-serif; }
main { max-width: 36rem; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 14px) 14px calc(env(safe-area-inset-bottom) + 28px); }
header { display: flex; align-items: flex-end; gap: 10px; border-bottom: 3px solid var(--red); padding-bottom: 8px; }
header img { flex: none; width: 84px; height: auto; margin-bottom: -8px; }
h1 { margin: 0; font: italic 700 2.5rem/1 Georgia, "Times New Roman", serif; color: var(--navy); letter-spacing: -0.02em; }
h1 span { color: var(--red); }
h1 sup { font: 700 .8rem Arial, sans-serif; color: var(--navy); margin-left: 2px; }
header p { margin: 6px 0 4px; font-size: .9rem; }
.askbox { margin-top: 14px; background: var(--cream); border: 1px solid #e0c97a; padding: 10px; }
.askbox label, legend, summary, .popular h2 { font: 700 .95rem Arial, sans-serif; color: var(--navy); }
.line { display: flex; gap: 6px; margin-top: 6px; align-items: stretch; }
textarea, input { width: 100%; font: 16px Arial, sans-serif; color: #000; background: #fff; border: 2px inset #b9b9b9; border-radius: 0; padding: 9px 8px; resize: none; outline-offset: 1px; -webkit-appearance: none; appearance: none; }
#ask { flex: none; min-width: 78px; border: 2px outset #e8566c; border-radius: 0; background: var(--red); color: #fff; font: 700 1.1rem Georgia, serif; font-style: italic; padding: 0 14px; }
#ask:active { border-style: inset; }
#ask:disabled { opacity: .6; }
fieldset { margin: 8px 0 0; padding: 8px 10px 10px; border: 1px solid var(--rule); }
ol { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
ol li { display: grid; grid-template-columns: 1.4rem 1fr 40px; align-items: center; gap: 4px; }
ol li .n { font: 700 .9rem Georgia, serif; color: var(--red); text-align: right; padding-right: 2px; }
ol li button { height: 40px; border: 0; background: none; color: var(--link); font: 1.3rem Arial; }
.link { margin-top: 8px; padding: 6px 0; border: 0; background: none; color: var(--link); text-decoration: underline; font: .95rem Arial, sans-serif; }
details { margin-top: 12px; }
summary { color: var(--link); text-decoration: underline; font-weight: 400; cursor: pointer; padding: 4px 0; }
details textarea { margin-top: 6px; }
.read { display: block; margin-top: 12px; font: 700 .95rem Arial, sans-serif; color: var(--navy); }
.says-old { margin: 0 0 8px; font: 1.15rem/1.3 Georgia, "Times New Roman", serif; }
.says b { color: var(--red); font-style: italic; }
.says small { font: .8rem Arial, sans-serif; color: #555; }
.step { margin: 10px 0 3px; font: 700 .85rem Arial, sans-serif; color: var(--navy); }
#error { margin: 14px 0 0; padding: 8px 10px; border: 1px solid var(--red); background: #fff0f0; color: #8e0b20; font-size: .95rem; }

.reply { margin-top: 16px; }
.reply h2 { margin: 0 0 4px; font: italic 700 1.05rem Georgia, serif; color: var(--navy); }
.reply h2 q { font-style: normal; font-weight: 400; color: #000; quotes: "\201C" "\201D"; }
.http { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 6px 8px; background: #e9e9e9; border: 1px solid var(--rule); border-bottom: 0; font: .78rem/1.4 "Courier New", Courier, monospace; color: #333; }
.http b { color: #006400; } .http b.bad { color: #8e0b20; }
pre { margin: 0; padding: 10px 8px; background: #f7f7f7; border: 1px solid var(--rule); font: .86rem/1.45 "Courier New", Courier, monospace; color: #111; overflow-x: auto; white-space: pre; }
pre .k { color: #00008b; } pre .s { color: #a31515; } pre .n { color: #09663a; } pre .l { color: #6a0dad; }
pre mark { background: #fff2a8; color: inherit; font-weight: 700; }
.reply .link { font-size: .85rem; margin-top: 2px; }

.popular { margin-top: 22px; border-top: 1px solid var(--rule); padding-top: 10px; }
.popular h2 { margin: 0 0 4px; }
.popular ul { margin: 0; padding-left: 1.2rem; font: 1rem/1.7 "Times New Roman", Times, serif; }
.popular button { border: 0; background: none; padding: 2px 0; color: var(--link); text-decoration: underline; font: inherit; text-align: left; }
footer { margin-top: 22px; padding-top: 8px; border-top: 1px solid var(--rule); font: .75rem/1.4 Arial, sans-serif; color: #555; text-align: center; }

.verdict { border: 2px solid var(--navy); background: #fff; margin: 6px 0 10px; }
.verdict .bar { background: var(--navy); color: #fff; font: 700 .85rem Arial, sans-serif; padding: 4px 8px; letter-spacing: .02em; }
.verdict .body { padding: 10px 10px 12px; background: var(--cream); }
.verdict .says { margin: 0; font: italic 700 2.1rem/1.1 Georgia, "Times New Roman", serif; color: var(--red); overflow-wrap: anywhere; }
.verdict .note { margin: 4px 0 0; font: .85rem Arial, sans-serif; color: #333; }
.verdict table { width: 100%; margin-top: 10px; border-collapse: collapse; background: #fff; border: 1px solid #999; font: .95rem "Times New Roman", Times, serif; }
.verdict td { border: 1px solid #c9c9c9; padding: 5px 6px; vertical-align: middle; }
.verdict td.label { width: 38%; overflow-wrap: anywhere; }
.verdict td.pct { width: 3.4rem; text-align: right; font: .85rem "Courier New", Courier, monospace; }
.verdict td.track { padding: 4px; }
.verdict .fill { height: 14px; width: 0; background: #7d86b8; border: 1px outset #aab1d6; transition: width .6s ease-out; }
.verdict tr.win td { background: #fff2a8; font-weight: 700; }
.verdict tr.win .fill { background: var(--red); border-color: #e8566c; }
.oldbutton { margin: 2px 0 0; padding: 5px 10px; font: .85rem Arial, sans-serif; color: #000; background: #dcdcdc; border: 2px outset #f2f2f2; border-radius: 0; }
.oldbutton:active { border-style: inset; }
.debug { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .verdict .fill { transition: none; } }