:root{color-scheme:light;--ink:#26312c;--muted:#59655d;--green:#39751d;--line:#dfe5db;--wash:#f4f7f0;--white:#fff;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.6;color:var(--ink);background:var(--white)}
*{box-sizing:border-box}
body{margin:0}
a{color:var(--green);text-underline-offset:.2em}
a:hover{color:#234d11}
button,textarea{font:inherit}
button{cursor:pointer}
a,button,textarea{touch-action:manipulation}
:focus-visible{outline:3px solid #5986d8;outline-offset:4px}
.site-shell{max-width:1040px;margin:0 auto;padding:36px 32px 0}
.brand{font-size:clamp(1.5rem,4vw,2rem);letter-spacing:-.055em;font-weight:700;color:var(--ink);text-decoration:none;line-height:1.2}
.brand-dot{color:var(--green)}
.tagline{color:var(--muted);font-size:.85rem;margin:5px 0 22px}
.hero{display:block;width:100%;height:auto;aspect-ratio:800/192;object-fit:cover;border-radius:3px}
.main-nav{display:flex;gap:26px;justify-content:flex-end;flex-wrap:wrap;border-bottom:1px solid var(--line);padding:14px 0}
.main-nav a{color:var(--muted);font-size:.875rem;text-decoration:none;padding:4px 0}
.main-nav a[aria-current]{color:var(--green);box-shadow:0 2px var(--green)}
.columns{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:42px;padding:36px 0 48px}
main{min-width:0}
h1{font-size:clamp(1.6rem,3vw,2.1rem);line-height:1.2;letter-spacing:-.035em;margin:8px 0 18px;font-weight:600}
h2{font-size:1.25rem;line-height:1.3;margin-top:2rem}
.eyebrow{font-size:.7rem;font-weight:bold;letter-spacing:.12em;text-transform:uppercase;color:var(--green);margin:0}
.prose{color:var(--muted);overflow-wrap:anywhere}
.prose p{margin:0 0 16px}
.prose h2{color:var(--ink)}
.converter{margin-top:26px}
.field-heading,.output-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 8px}
label{font-size:.875rem;font-weight:600}
textarea{display:block;resize:vertical;min-height:110px;width:100%;border:1px solid #9ba99a;border-radius:5px;background:white;padding:15px;color:var(--ink);line-height:1.55;font-family:Arial,'Noto Sans',sans-serif}
textarea::placeholder{color:#6a746c;font-size:.95rem}
textarea[readonly]{background:var(--wash)}
.output-heading{margin-top:22px}
.output-heading span{color:var(--green)}
.text-button{border:0;background:transparent;color:var(--green);font-size:.75rem;padding:4px;min-height:32px}
.actions{display:flex;gap:12px;align-items:center;margin:18px 0 0}
.primary,.secondary{border:1px solid var(--green);border-radius:5px;padding:10px 19px;font-size:.875rem;font-weight:600;min-height:44px}
.primary{color:white;background:var(--green)}
.primary:hover{background:#285818}
.primary span{margin-left:25px}
.secondary{color:var(--muted);background:white;border-color:var(--line)}
.hint{color:var(--muted);font-size:.75rem;margin:5px 0 0}
.status{min-height:1.5em;color:var(--green);font-size:.8rem;margin:8px 0 0}
.help{border-top:1px solid var(--line);margin-top:24px;padding-top:16px;font-size:.875rem;color:var(--muted)}
summary{color:var(--ink);cursor:pointer;font-weight:600}
.help p{margin-bottom:0}
aside{border-left:1px solid var(--line);padding-left:25px}
aside h2{font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
aside h2:not(:first-child){margin-top:28px}
aside a{display:block;color:var(--muted);text-decoration:none;font-size:.78rem;line-height:1.45;padding:8px 0;overflow-wrap:anywhere}
aside a:hover,aside a[aria-current]{color:var(--green)}
aside a[aria-current]{font-weight:700}
.page-list{padding-left:1.2rem}
.page-list li{padding:6px 0}
.symbol-buttons{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 22px}
.symbol-buttons button{background:var(--wash);border:1px solid var(--line);color:var(--green);font-size:2.4rem;border-radius:5px;min-width:80px;min-height:80px}
#symbol-text{min-height:60px;margin-top:8px}
.legal{font-size:.9rem}
.contact-image{display:block;max-width:100%;height:auto;margin:1rem 0}
footer{border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:20px;font-size:.7rem;color:var(--muted);padding:20px 0 30px}
footer span{margin-right:auto}
footer a{color:var(--muted)}
.skip{position:fixed;top:0;left:15px;transform:translateY(-150%);background:white;z-index:10;padding:12px}
.skip:focus{transform:translateY(0)}
@media(max-width:720px){.site-shell{padding:24px 20px 0}
.columns{grid-template-columns:1fr;gap:36px;padding-top:26px}
.main-nav{gap:18px;justify-content:flex-start}
.main-nav a{font-size:.8rem}
aside{border-left:0;border-top:1px solid var(--line);padding:24px 0 0}
aside a{display:inline-block;margin-right:20px;padding:9px 0}
.hero{min-height:110px}
.field-heading{align-items:flex-start}
h1{font-size:1.8rem}
footer span{flex-basis:100%}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}
}