.hm { --hm-border:#e4e4e7; --hm-muted:#71717a; --hm-text:#18181b; color:var(--hm-text); font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; padding-bottom:56px; }
.hm * { box-sizing:border-box; }
.hm [hidden] { display:none!important; }
.hm button,.hm input,.hm textarea { font:inherit; }
.hm button,.hm a,.hm input,.hm textarea,.hm summary,.hm svg path { -webkit-tap-highlight-color:transparent; }
.hm :is(button,a,input,textarea,select,summary):focus-visible { outline:3px solid #93b8f4; outline-offset:3px; }
.hm a { color:inherit; text-decoration:none; }
.hm a:hover { text-decoration:underline; }
.hm-intro { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:14px 0 30px; }
.hm-eyebrow { font-size:12px; font-weight:650; letter-spacing:1.7px; color:var(--hm-muted); display:flex; align-items:center; gap:14px; }
.hm h1 { font-size:36px; line-height:1.2; letter-spacing:-1.3px; margin:12px 0 10px; font-weight:650; }
.hm-intro p { font-size:16px; color:var(--hm-muted); }
.hm-help-link { font-size:14px; white-space:nowrap; }
.hm-badge { display:inline-flex; align-items:center; white-space:nowrap; border:1px solid var(--hm-border); padding:4px 8px; border-radius:6px; font-size:12px; font-weight:500; letter-spacing:0; color:#52525b; background:#fafafa; }
.hm-result .hm-card-heading { flex-wrap:wrap; }
.hm-export-controls { display:flex; flex-direction:column; align-items:flex-end; gap:9px; margin-left:auto; }
.hm-export-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.hm-export-option { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--hm-muted); cursor:pointer; }
.hm-export-option input { margin:0; accent-color:#2563eb; }
.hm-export-message { margin:0 24px 12px; color:var(--hm-muted); font-size:13px; line-height:1.5; }
.hm-export-message a { text-decoration:underline; }
.hm-btn:disabled { opacity:.6; cursor:wait; }
.hm-workspace { display:grid; grid-template-columns:390px minmax(0,1fr); gap:20px; align-items:stretch; }
.hm-card { border:1px solid var(--hm-border); border-radius:12px; background:white; box-shadow:0 1px 3px #00000006; min-width:0; overflow:hidden; }
.hm-card-heading { padding:23px 24px 20px; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.hm-card h2 { font-size:18px; font-weight:600; letter-spacing:-.3px; }
.hm-card-heading p { font-size:14px; color:var(--hm-muted); margin-top:6px; }
.hm-tabs { display:flex; padding:4px; margin:0 22px 18px; background:#f4f4f5; border-radius:7px; }
.hm-tabs button { border:0; background:transparent; color:#71717a; border-radius:5px; padding:10px 12px; flex:1; font-size:14px; font-weight:550; cursor:pointer; }
.hm-tabs button[aria-selected=true] { background:white; color:#18181b; box-shadow:0 1px 3px #00000012; }
.hm-input-panels { display:grid; }
.hm-input-panels > [role=tabpanel] { grid-area:1 / 1; min-width:0; }
.hm-input-panels > [hidden] { display:block!important; visibility:hidden; pointer-events:none; }
.hm-table-scroll { height:305px; overflow:auto; scrollbar-width:thin; scrollbar-color:#d4d4d8 transparent; border-top:1px solid #f0f0f2; border-bottom:1px solid #f0f0f2; }
.hm-table { border-collapse:collapse; width:100%; text-align:left; font-size:12px; }
.hm-table th { position:sticky; top:0; z-index:1; background:#fafafa; font-size:11px; font-weight:500; color:#71717a; padding:11px 8px; border-bottom:1px solid var(--hm-border); }
.hm-table th:first-child { padding-left:24px; }
.hm-table th:nth-child(2) { width:95px; }
.hm-table th:last-child { width:33px; }
.hm-table td { padding:5px 6px; border-bottom:1px solid #f4f4f5; }
.hm-table td:first-child { padding-left:16px; }
.hm-table td:last-child { padding-right:16px; }
.hm-table input { width:100%; min-width:0; border:1px solid transparent; border-radius:5px; background:transparent; padding:7px; color:#27272a; font-size:12px; }
.hm-table input:hover { border-color:var(--hm-border); }
.hm-table input:focus { background:white; border-color:#a1a1aa; }
.hm-table input[data-field=value] { font-variant-numeric:tabular-nums; }
.hm-table tr.hm-invalid input { border-color:#f0b6a8; background:#fff8f5; }
.hm-remove { border:0; background:none; color:#a1a1aa; padding:4px; cursor:pointer; font-size:17px!important; }
.hm-remove:hover { color:#b91c1c; }
.hm-add { width:100%; border:0; background:white; padding:13px 24px; text-align:left; font-size:14px!important; font-weight:500!important; cursor:pointer; }
.hm-add:hover { background:#fafafa; }
.hm-data-actions { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 22px 16px; }
.hm-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border:1px solid var(--hm-border); border-radius:6px; background:#fff; color:#27272a; font-size:14px!important; font-weight:550!important; cursor:pointer; box-shadow:0 1px 2px #00000004; }
.hm-btn:hover { background:#f4f4f5; }
.hm svg { flex-shrink:0; }
.hm-btn svg,.hm-safeguard svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.hm-text-btn { background:none; border:0; font-size:14px!important; color:#71717a; cursor:pointer; }
.hm-text-btn:hover { color:#18181b; }
.hm-data { display:flex; flex-direction:column; }
.hm-data-bottom { margin-top:auto; padding:16px 22px 22px; border-top:1px solid var(--hm-border); }
.hm-data-bottom p { color:#71717a; font-size:12px; margin-bottom:12px; }
.hm-auto-update { display:flex; align-items:center; gap:7px; color:#52525b; font-size:13px; }
#paste-panel { padding:0 22px; }
#paste-panel label { display:block; font-size:13px; margin-bottom:10px; line-height:1.5; }
#paste-input { resize:vertical; width:100%; min-height:190px; max-height:255px; height:239px; border:1px solid #d4d4d8; border-radius:6px; padding:12px; font:12px/1.8 ui-monospace,monospace; }
.hm-caption { font-size:12px; color:#71717a; line-height:1.6; margin-top:8px; }
.hm-result { display:flex; flex-direction:column; }
.hm-map-stage { position:relative; padding:6px 28px 0; display:flex; align-items:center; justify-content:center; flex:1; min-height:310px; }
#us-map { display:block; width:100%; max-width:560px; position:relative; }
#us-map .fm-tooltip { min-width:0; }
#us-map .fm-tooltip-frame { min-width:120px; border:1px solid #e4e4e7; border-radius:7px; box-shadow:0 3px 12px #0002; }
#us-map .fm-tooltip-name { font-family:inherit; font-size:15px; font-weight:600; line-height:1.4; /*text-shadow:none;*/ }
#us-map .fm-tooltip-comment { font-family:inherit; font-size:14px; color:#52525b; }
.hm-palette { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 22px 20px; font-size:13px; color:#71717a; }
.hm-palette select { min-width:0; border:1px solid var(--hm-border); border-radius:6px; background:#fff; padding:8px 10px; font:inherit; color:#27272a; }
#base-color-swatch { width:14px; height:14px; border-radius:50%; background:#2563eb; }
.hm-map-info { display:flex; align-items:center; justify-content:center; gap:7px; padding:12px 18px 20px; font-size:12px; color:#71717a; min-height:44px; }
.hm-dot { width:5px; height:5px; background:#a1a1aa; border-radius:50%; }
.hm-legend { margin:0 28px 22px; }
.hm-legend-top { display:flex; justify-content:space-between; align-items:center; font-size:13px; margin-bottom:12px; }
.hm-legend-top strong { font-weight:550; }
.hm-no-data { display:flex; align-items:center; gap:6px; color:#71717a; font-size:12px; }
.hm-no-data i { width:12px; height:12px; border:1px solid #d4d4d8; border-radius:3px; background:#e4e4e7; }
.hm-gradient { height:9px; border-radius:3px; background:linear-gradient(90deg,#dbeafe,#2563eb,#1e3a8a); }
.hm-scale-values { display:flex; justify-content:space-between; margin-top:9px; font-size:14px; font-variant-numeric:tabular-nums; }
.hm-scale-values strong { font-weight:550; }
.hm-scale-values small { display:block; color:#71717a; font-size:12px; margin-top:4px; }
.hm-scale-values>span:last-child { text-align:right; }
.hm-mid { color:#a1a1aa; font-size:12px; }
.hm-result-footer { padding:16px 24px; flex-wrap:wrap; border-top:1px solid var(--hm-border); display:flex; justify-content:space-between; gap:12px; font-size:12px; color:#71717a; background:#fdfdfd; }
.hm-result-footer strong { color:#27272a; font-weight:600; }
.hm-result-footer a { color:#52525b; }
.hm-safeguard { display:flex; align-items:flex-start; gap:9px; font-size:13px; line-height:1.7; color:#71717a; max-width:960px; padding:19px 0 0; }
.hm-safeguard svg { margin-top:2px; }
.hm-validation,.hm-notice { border:1px solid #fed7aa; border-radius:8px; background:#fffbeb; padding:15px 18px; margin-top:16px; font-size:14px; line-height:1.7; color:#92400e; }
.hm-validation ul { margin:6px 0 0; padding-left:18px; }
.hm-guide { display:grid; grid-template-columns:1fr 1fr; gap:70px; margin:48px 0 36px; padding:34px; border:1px solid var(--hm-border); border-radius:12px; background:#fafafa; scroll-margin-top:100px; }
.hm-guide h2 { font-size:26px; font-weight:600; letter-spacing:-.6px; line-height:1.3; max-width:350px; margin:12px 0; }
.hm-guide p { font-size:14px; color:#71717a; line-height:1.7; }
.hm-guide code { display:inline-block; margin-top:20px; padding:10px 14px; background:white; border:1px solid var(--hm-border); border-radius:6px; font-size:14px; color:#52525b; }
.hm-guide ol { padding:0; margin:0; list-style:none; display:grid; gap:20px; }
.hm-guide li { display:flex; gap:13px; }
.hm-guide li>span { border:1px solid #d4d4d8; border-radius:50%; width:24px; height:24px; display:flex; justify-content:center; align-items:center; font-size:12px; flex-shrink:0; background:white; }
.hm-guide h3 { font-size:14px; font-weight:600; margin:3px 0 5px; }
.hm-explain-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.hm-explain-grid h2,.hm-related h2 { font-size:16px; font-weight:600; margin-bottom:12px; }
.hm-explain-grid p,.hm-rules p { font-size:14px; line-height:1.8; color:#71717a; margin-bottom:10px; }
.hm-explain-grid pre { font:14px/1.8 ui-monospace,monospace; tab-size:12; overflow-x:auto; background:#fafafa; border:1px solid var(--hm-border); border-radius:7px; padding:12px 16px; }
.hm-rules { margin-top:24px; border-top:1px solid var(--hm-border); padding:20px 0; }
.hm-rules summary { font-size:14px; cursor:pointer; }
.hm-rules p { padding-top:12px; max-width:900px; }
.hm-related { display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:25px; border-top:1px solid var(--hm-border); padding-top:30px; margin-top:8px; align-items:center; }
.hm-related h2 { margin:0 0 7px; }
.hm-related p,.hm-related a>span { font-size:13px; color:#71717a; }
.hm-related a { padding:16px; border:1px solid var(--hm-border); border-radius:8px; }
.hm-related strong { font-size:14px; font-weight:550; display:flex; justify-content:space-between; margin-bottom:6px; }
.hm-sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
@media(min-width:1400px) { .hm { max-width:1230px; } }
@media(max-width:900px) { .hm-workspace { grid-template-columns:310px minmax(0,1fr); gap:14px; } .hm-map-stage { padding:10px 14px; min-height:260px; } .hm-result-footer { flex-direction:column; } .hm-card-heading { padding:20px; } .hm-result .hm-card-heading { flex-wrap:wrap; } .hm-guide { gap:30px; } }
@media(max-width:700px) { .hm-intro { padding-top:8px; } .hm h1 { font-size:29px; } .hm-help-link { display:none; } .hm-intro p { font-size:15px; line-height:1.6; } .hm-workspace { grid-template-columns:1fr; } .hm-table-scroll { height:245px; } #paste-input { height:175px; min-height:160px; } .hm-result .hm-card-heading { flex-wrap:wrap; } .hm-map-stage { min-height:230px; } .hm-guide { grid-template-columns:1fr; padding:25px; margin-top:32px; } .hm-explain-grid { grid-template-columns:1fr; gap:20px; } .hm-related { grid-template-columns:1fr; gap:12px; } .hm-result-footer { flex-direction:row; flex-wrap:wrap; } }