:root{color-scheme:light;--ink:#1a2944;--muted:#53647b;--line:#cbd6e3;--paper:#fff;--wash:#f0f4f8;--accent:#3154b4;--warning:#955017}
*{box-sizing:border-box}body{margin:0;background:var(--wash);color:var(--ink);font-family:"Avenir Next","Segoe UI",sans-serif;font-size:16px;line-height:1.5}.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;max-width:1320px;margin:auto;padding:24px 48px}.brand{font-size:15px;font-weight:700;color:var(--ink);text-decoration:none}.brand-mark{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#dce6ff;color:#24499d;font-size:24px;line-height:1;margin-right:7px}.language,.text-button{background:none;border:0;color:var(--accent);font:inherit;font-weight:650;cursor:pointer}.language{border:1px solid var(--line);border-radius:8px;background:white;padding:7px 12px}main{max-width:1320px;margin:auto;padding:42px 48px 70px}.intro{max-width:740px;margin-bottom:28px}.intro h1{margin:0 0 8px;font-size:clamp(2rem,4vw,3.6rem);letter-spacing:-.045em;line-height:1.08}.intro p{font-size:1.1rem;color:var(--muted);margin:0}.workspace{display:grid;grid-template-columns:1.08fr .92fr;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 48px #25354d0c;overflow:hidden}.input-section,.result-section{padding:28px;min-width:0}.result-section{background:#f8fafd;border-left:1px solid var(--line)}.section-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}.section-header h2{font-size:1rem;margin:0}.text-button{font-size:.9rem;padding:6px 0}.local{font-size:.8rem;color:#315f51;background:#e3f3ec;border-radius:5px;padding:4px 8px;white-space:nowrap}textarea{display:block;width:100%;min-height:300px;resize:vertical;border:1px solid #aebdd0;border-radius:9px;background:#fff;color:#1d2c42;padding:16px;font:14px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace;tab-size:2}textarea::placeholder{color:#74849a}.help{font-size:.84rem;color:var(--muted);margin:10px 0 20px}.actions{display:flex;gap:10px;flex-wrap:wrap}button{font-family:inherit}.primary,.secondary{border-radius:8px;padding:10px 16px;font-size:.95rem;font-weight:700;cursor:pointer}.primary{border:1px solid var(--accent);background:var(--accent);color:#fff}.secondary{border:1px solid var(--line);background:white;color:var(--ink)}button:focus-visible,a:focus-visible,textarea:focus-visible{outline:3px solid #7b9cfa;outline-offset:3px}.result{min-height:310px;padding:25px 2px 0}.result-symbol{display:grid;place-items:center;width:44px;height:44px;margin-bottom:18px;color:#3256ae;background:#e5ecff;border-radius:11px;font-size:28px;line-height:1}.result.warning .result-symbol{background:#fff0df;color:var(--warning)}.result.error .result-symbol{background:#fae8e7;color:#a63834}.result h3{font-size:1.35rem;line-height:1.25;letter-spacing:-.02em;margin:0 0 9px}.result p{max-width:49ch;color:var(--muted);margin:0}.result dl{border-top:1px solid var(--line);margin:25px 0 0}.result dl div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:10px 0}.result dt{color:var(--muted);font-size:.88rem}.result dd{font-size:.9rem;margin:0;text-align:right;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;overflow-wrap:anywhere}.result .next{margin-top:20px;color:var(--ink);font-size:.9rem}.bottom{display:flex;justify-content:space-between;gap:30px;margin-top:20px;color:var(--muted);font-size:.83rem}.bottom p{margin:0;max-width:68ch}.bottom a{color:#294d9d}.bottom p:last-child{white-space:nowrap}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}@media(max-width:760px){.topbar{padding:19px 20px}main{padding:30px 20px 48px}.intro{margin-bottom:24px}.intro p{font-size:1rem}.workspace{grid-template-columns:1fr}.result-section{border-left:0;border-top:1px solid var(--line)}.input-section,.result-section{padding:21px}textarea{min-height:230px}.result{min-height:220px;padding-top:6px}.bottom{display:block}.bottom p:last-child{white-space:normal;margin-top:12px}}

@media(max-width:500px){.result dl div{display:block}.result dl dd{text-align:left;margin-top:3px}}
