.distance-main{max-width:1180px;margin:0 auto;padding:24px 24px 64px}.distance-intro{max-width:760px;margin:0 0 32px}.distance-intro h1{font-size:clamp(2.2rem,5vw,3.4rem);letter-spacing:-.055em;margin:10px 0 16px}.distance-intro>p:last-child{max-width:64ch;color:var(--muted);font-size:1.0625rem}.distance-workspace{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.8fr);gap:32px;align-items:start}.distance-editor{border:1px solid var(--line);border-radius:20px;background:#fff;padding:24px;min-width:0}.distance-editor h2,.preview-heading{font-size:1.25rem;letter-spacing:-.025em}.settings-row{display:grid;grid-template-columns:minmax(0,1fr) 125px;gap:16px;margin:22px 0 10px}.distance-field label{display:block;font-size:.875rem;font-weight:650;margin-bottom:6px}.optional,.hint{font-size:.875rem;color:var(--muted);font-weight:400}.distance-main input,.distance-main select{font:inherit;font-size:1rem;min-width:0;width:100%;padding:10px 11px;min-height:46px;border:1px solid #bccbbf;border-radius:8px;color:var(--ink);background:white}.distance-main input:focus-visible,.distance-main select:focus-visible{outline:3px solid #658a31;outline-offset:2px}.distance-main input[aria-invalid=true]{border:2px solid #a02e23}.club-head,.club-fields{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr) 34px;gap:10px;align-items:center}.club-head{font-size:.8125rem;font-weight:750;letter-spacing:.055em;margin-top:24px;padding-bottom:8px;border-bottom:1px solid var(--line)}.club-row{padding:10px 0;border-bottom:1px solid #edf0e9}.club-fields input{padding:9px 8px}.club-actions{display:flex;gap:8px;align-items:center;margin-top:5px}.club-actions button{padding:3px 7px;font-size:.8125rem;min-height:30px;background:none;border:0;color:var(--muted);border-radius:5px}.club-actions button:hover{background:#edf3e5;color:var(--ink)}.remove-club{width:34px;min-height:44px;border:0;background:none;font-size:1.5rem;color:var(--muted);border-radius:6px}.remove-club:hover{background:#f6e8e3;color:#922b20}.row-error{color:#922b20;font-size:.875rem;margin-top:5px}.club-count{margin-left:auto;color:var(--muted);font-size:.8125rem}.editor-actions{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:18px 0}.outline-button,.text-button{font:inherit;border-radius:999px;font-weight:650;min-height:44px;padding:9px 15px;border:1px solid var(--line);background:white;color:var(--ink)}.outline-button:hover{background:#edf3e5}.text-button{border:0;text-decoration:underline;text-underline-offset:.2em;font-size:.875rem}.text-button:hover{background:#f5f5ee}button:disabled{opacity:.45;cursor:not-allowed}.editor-note{font-size:.875rem;color:var(--muted);margin-top:14px}.preview-panel{position:sticky;top:24px;min-width:0}.preview-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.card-badge{font-size:.75rem;font-weight:650;letter-spacing:.06em;color:var(--muted)}#distance-canvas{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 16px 40px #15382d1a;border:1px solid var(--line);background:var(--paper)}.export-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.export-actions .button{padding:12px 15px;border-radius:10px;font-size:.9375rem}.export-actions .png-button{grid-column:1/-1;background:var(--ink)}.export-actions .secondary{background:#e6eddb;color:var(--ink)}.export-actions .secondary:hover{background:#d9e7c5}.export-hint,.export-status{font-size:.875rem;color:var(--muted);margin-top:10px}.export-status{min-height:1.5em;color:var(--ink)}.download-fallback{padding:14px;background:#edf3e5;border:1px solid var(--line);border-radius:8px;margin-top:12px;overflow-wrap:anywhere}.download-fallback a{font-weight:650}.distance-guide{border-top:1px solid var(--line);padding-top:42px;margin-top:56px;display:grid;grid-template-columns:1fr 1fr;gap:40px}.distance-guide h2,.distance-faq h2{font-size:1.6rem;letter-spacing:-.035em;margin-bottom:16px}.distance-guide p,.distance-guide li,.distance-faq p{color:var(--muted);margin-bottom:12px}.distance-guide ol{padding-left:22px}.distance-faq{max-width:820px;margin-top:36px}.distance-faq details{border-bottom:1px solid var(--line);padding:18px 0}.distance-faq summary{cursor:pointer;font-weight:650}.distance-faq details p{padding-top:12px;max-width:70ch}.distance-cta{margin-top:42px;padding:28px;border-radius:18px;background:var(--ink);color:var(--paper);display:flex;justify-content:space-between;align-items:center;gap:24px}.distance-cta h2{font-size:1.5rem;letter-spacing:-.035em}.distance-cta p{margin-top:8px;color:#dbe4d8;max-width:55ch}.distance-cta .button{flex-shrink:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.no-script{padding:20px;border:1px solid #a02e23;margin-bottom:24px}#preview-summary{margin-top:12px}.preview-link{display:none}
@media(max-width:800px){.distance-workspace{grid-template-columns:1fr}.preview-panel{position:static;max-width:460px;width:100%;margin:0 auto}.preview-link{display:inline-flex;margin-top:14px;font-weight:650}.distance-guide{grid-template-columns:1fr;gap:22px}.distance-cta{display:block}.distance-cta .button{margin-top:20px}}
@media(max-width:440px){.distance-main{padding-inline:16px}.distance-editor{padding:16px 12px}.distance-intro{margin-bottom:24px}.settings-row{grid-template-columns:1fr 105px;gap:10px}.club-head,.club-fields{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr) 28px;gap:6px}.club-fields input{padding:9px 5px}.remove-club{width:28px}.club-head{font-size:.75rem;letter-spacing:0}.distance-cta{padding:24px}.site-header{padding-inline:16px}.site-header nav{gap:12px}}