:root { color-scheme: light; --ink:#222; --muted:#666; --line:#ddd; --paper:#fff; --bg:#f7f7f7; }
* { box-sizing: border-box; }
body { margin:0; font-family:system-ui,-apple-system,Segoe UI,sans-serif; color:var(--ink); background:var(--bg); line-height:1.5; }
a { color:inherit; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
.site-header { background:#fff; border-bottom:1px solid var(--line); }
.header-inner { width:min(1060px,92%); margin:auto; min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { text-decoration:none; font-size:1.55rem; font-weight:800; letter-spacing:-.06em; }
.brand span { color:#777; }
.site-nav { display:flex; align-items:center; flex-wrap:wrap; gap:16px; }
.site-nav a { color:#555; font-size:.92rem; text-decoration:none; }
.site-nav a:hover,.section-heading a:hover,.breadcrumbs a:hover { text-decoration:underline; }
.container { width:min(960px,92%); margin:0 auto; padding:44px 0 84px; }
.hero { padding:18px 0 42px; }
.eyebrow { margin:0 0 10px; font-size:.75rem; font-weight:700; letter-spacing:.14em; color:#777; }
h1,h2,p { margin-top:0; }
h1 { font-size:clamp(2rem,5vw,3rem); letter-spacing:-.045em; line-height:1.15; margin-bottom:12px; }
h2 { font-size:1.35rem; letter-spacing:-.02em; }
p { color:var(--muted); }
.hero p:last-child,.page-intro p { font-size:1.06rem; margin-bottom:0; }
.listing { margin-top:42px; }
.section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:16px; }
.section-heading h2 { margin-bottom:16px; }
.section-heading a { text-decoration:none; }
.section-heading > a { font-size:.88rem; color:#666; }
.tool-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; }
.tool-card { display:flex; flex-direction:column; gap:5px; min-height:104px; padding:18px 20px; border:1px solid var(--line); border-radius:12px; background:#fff; text-decoration:none; transition:border-color .15s,transform .15s; }
.tool-card:hover { border-color:#999; transform:translateY(-2px); }
.tool-card strong { font-size:1rem; }
.tool-card span { color:#666; font-size:.88rem; line-height:1.4; }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:9px; color:#666; font-size:.88rem; margin-bottom:26px; }
.breadcrumbs a { text-decoration:none; }
.page-intro { margin-bottom:24px; }
.tool-page { max-width:800px; }
.tool-panel { padding:clamp(18px,4vw,28px); border:1px solid var(--line); border-radius:14px; background:#fff; }
.field { display:flex; flex-direction:column; gap:7px; flex:1; min-width:0; font-weight:600; font-size:.92rem; }
.field input,.field textarea,.field select { width:100%; border:1px solid #bbb; border-radius:8px; background:#fff; color:#222; padding:11px 12px; outline:none; font-weight:400; }
.field input:focus,.field textarea:focus,.field select:focus { border-color:#222; box-shadow:0 0 0 2px #2222; }
.field textarea { min-height:170px; resize:vertical; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.9rem; }
.field textarea[readonly] { background:#fafafa; }
.fields { display:flex; gap:14px; flex-wrap:wrap; align-items:end; margin-bottom:16px; }
.fields .field { flex-basis:180px; }
.field-hint { flex-basis:100%; font-size:.85rem; margin:0; }
.actions { display:flex; flex-wrap:wrap; gap:9px; margin:16px 0; }
button { border:1px solid #222; border-radius:8px; padding:10px 15px; background:#222; color:#fff; font-weight:600; }
button:hover { background:#444; }
button.secondary { background:#fff; color:#222; border-color:#aaa; }
button.secondary:hover { background:#f4f4f4; }
button:focus-visible,a:focus-visible { outline:3px solid #555; outline-offset:3px; }
.status { min-height:1.5em; font-size:.9rem; margin:6px 0 12px; }
.status.error { color:#aa2222; }
.result { display:block; padding:20px; background:#f7f7f7; border:1px solid #ddd; border-radius:8px; min-height:66px; white-space:pre-wrap; font-size:1.1rem; font-weight:650; font-variant-numeric:tabular-nums; }
.metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(115px,1fr)); gap:9px; margin-top:16px; }
.metrics div { border:1px solid var(--line); border-radius:8px; padding:12px; display:flex; flex-direction:column; }
.metrics strong { font-size:1.3rem; font-variant-numeric:tabular-nums; }
.metrics span { color:#666; font-size:.8rem; }
.tap-ui { text-align:center; }
.big-number { display:inline-block; font-size:clamp(4rem,14vw,6rem); line-height:1; font-weight:750; font-variant-numeric:tabular-nums; }
.unit { color:#666; font-size:1.2rem; margin-left:8px; }
.tap-ui p { margin:12px 0 20px; min-height:1.5em; }
.tap-button { display:block; width:min(100%,320px); min-height:170px; margin:0 auto 18px; font-size:2rem; touch-action:manipulation; user-select:none; }
.info { margin-top:32px; }
.info h2,.listing h2 { margin-bottom:10px; }
.info p { line-height:1.65; }
.site-footer { border-top:1px solid var(--line); background:#fff; }
.site-footer > div { width:min(1060px,92%); margin:auto; display:flex; justify-content:space-between; gap:20px; padding:22px 0; color:#777; font-size:.84rem; }
.site-footer a { text-decoration:none; font-weight:700; color:#333; }
@media(max-width:600px) { .header-inner { align-items:flex-start; flex-direction:column; padding:14px 0; gap:8px; } .site-nav { gap:12px; } .container { padding-top:28px; } .tool-grid { grid-template-columns:1fr; } .site-footer > div { flex-direction:column; gap:4px; } }