:root { --ink:#141414; --accent:#d71920; --accent-dk:#a51218; --unit:#ffe14d; --bg:#f6f6f3; --line:#d9d9d2; --muted:#5d5d5d; }
[hidden] { display:none !important; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font-family:system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color:var(--ink); background:var(--bg); line-height:1.5; }
a { color:#0b57b3; } a:hover { color:var(--accent-dk); }
.skip { position:absolute; left:-9999px; } .skip:focus { left:.5rem; top:.5rem; background:#fff; padding:.4rem .6rem; z-index:10; }
header.site { background:#fff; border-bottom:1px solid var(--line); }
header.site .wrap { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.3rem 1rem; padding:.55rem 1.2rem; max-width:1200px; margin:0 auto; }
.brand { display:flex; align-items:center; gap:.45rem; font-weight:800; font-size:1.2rem; text-decoration:none; color:var(--ink); } .brand span { color:var(--accent); }
.brand img { width:28px; height:28px; }
header nav { display:flex; flex-wrap:wrap; gap:.15rem .9rem; }
header nav a { color:#333; text-decoration:none; font-size:.93rem; padding:.2rem 0; border-bottom:2px solid transparent; }
header nav a[aria-current="page"] { border-bottom-color:var(--accent); font-weight:600; }
main { max-width:1200px; margin:0 auto; padding:1rem 1.2rem 3rem; }
main.prose { max-width:780px; }
h1 { margin:.4rem 0 .5rem; line-height:1.2; font-size:clamp(1.5rem, 4vw, 2.1rem); }
h2 { line-height:1.25; } .lede { margin-top:0; color:#3c3c3c; font-size:1.05rem; }
.prose h2 { margin-top:2rem; font-size:1.35rem; } .prose h3 { margin-top:1.4rem; }
.prose table { width:100%; border-collapse:collapse; font-size:.9rem; margin:1rem 0; background:#fff; }
.prose th, .prose td { border:1px solid var(--line); padding:.35rem .5rem; text-align:left; vertical-align:top; }
.prose th { background:#efefe9; }
.table-scroll { overflow-x:auto; }
.prose tr.grp th { background:#eef2f6; text-align:left; font-size:.95rem; padding-top:.6rem; }
.callout { background:#fff6d6; border-left:4px solid #e3b400; padding:.6rem .9rem; border-radius:4px; margin:1rem 0; }
.todo { background:#ffe3e3; border:2px dashed #c00; padding:.6rem .9rem; border-radius:6px; }
.crumbs { font-size:.85rem; color:var(--muted); margin:.2rem 0 0; } .crumbs a { color:var(--muted); }
.cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:1rem; margin:1rem 0 2rem; padding:0; list-style:none; }
.cards li { background:#fff; border:1px solid var(--line); border-radius:10px; padding:1rem; }
.cards h2, .cards h3 { margin:.1rem 0 .4rem; font-size:1.1rem; } .cards p { margin:.2rem 0; color:#444; font-size:.93rem; }
.dl { display:inline-block; background:var(--accent); color:#fff; font-weight:700; text-decoration:none; padding:.45rem .9rem; border-radius:6px; margin:.3rem .3rem 0 0; }
.dl:hover { background:var(--accent-dk); color:#fff; } .dl.alt { background:#fff; color:var(--ink); border:1px solid #888; }
footer.site { border-top:1px solid var(--line); background:#fff; font-size:.85rem; color:var(--muted); }
footer.site .wrap { max-width:1200px; margin:0 auto; padding:1.2rem; }
footer.site nav { display:flex; flex-wrap:wrap; gap:.3rem 1rem; margin-bottom:.6rem; } footer.site nav a { color:#333; }
.disclosure { font-size:.8rem; border:1px dashed #bbb; padding:.4rem .6rem; border-radius:6px; background:#fafafa; }
/* Ad slots: empty containers take no space until an ad network fills them. */
.ad-slot:empty { display:none; }
/* tool UI */
.grid { display:grid; grid-template-columns:minmax(300px, 420px) 1fr; gap:1rem; align-items:start; }
@media (max-width:860px) { .grid { grid-template-columns:1fr; } }
.panel { background:#fff; border:1px solid var(--line); border-radius:10px; padding:1rem; min-width:0; }
.panel h2 { font-size:1.05rem; margin:.2rem 0 .6rem; }
label { display:block; font-size:.85rem; font-weight:600; margin:.35rem 0; flex:1; min-width:0; }
label.narrow { flex:0 0 5.5rem; } label.check { font-weight:400; display:flex; gap:.4rem; align-items:center; }
input, select, textarea { width:100%; font:inherit; font-size:16px; font-weight:400; padding:.45rem .5rem; border:1px solid #aaa; border-radius:6px; margin-top:.15rem; background:#fff; color:var(--ink); }
textarea { font-family:ui-monospace, Consolas, monospace; font-size:14px; }
label.check input { width:auto; margin:0; }
.row { display:flex; gap:.6rem; flex-wrap:wrap; } .row > label { flex:1 1 8rem; } .row > label.narrow { flex:0 0 5.5rem; } .buttons { margin-top:.6rem; }
button { font:inherit; padding:.5rem .9rem; border-radius:6px; border:1px solid #888; background:#fff; cursor:pointer; color:var(--ink); }
button.primary, button.add { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:700; }
button.link { border:0; background:none; color:#a00; padding:0; margin-top:.4rem; font-size:.85rem; }
.small { font-size:.8rem; } .muted { color:var(--muted); } .warn { background:#fff6d6; padding:.4rem .6rem; border-radius:6px; }
.nowrap { white-space:nowrap; }
.msg { font-size:.82rem; min-height:1.1em; } .msg.err { color:#b00; } .msg.ok { color:#176b2c; }
.panel table { width:100%; border-collapse:collapse; font-size:.82rem; }
.panel td, .panel th { border-bottom:1px solid #eee; padding:.3rem .25rem; text-align:left; vertical-align:top; }
.panel td button { padding:.1rem .45rem; font-size:.78rem; }
tr.bad td { color:#b00; }
details { margin:.6rem 0; } summary { cursor:pointer; font-weight:600; font-size:.88rem; }
.preview-wrap { margin:.6rem 0; } #livePreview { margin-top:.3rem; overflow:hidden; }
.cellpv { position:relative; } .cellpv > div { position:absolute; transform-origin:0 0; }
#livePreview .tag { outline:1px dashed #999; background:#fff; }
#sheetPreview { margin-top:.8rem; display:flex; flex-direction:column; gap:1rem; align-items:center; overflow:hidden; }
.sheet-thumb { background:#fff; box-shadow:0 1px 6px rgba(0,0,0,.25); position:relative; overflow:hidden; flex:none; }
.below { max-width:780px; margin-top:2rem; }
@media (max-width:520px) { main { padding:.8rem .8rem 2rem; } .panel { padding:.8rem; } header.site .wrap { padding:.5rem .8rem; } }