*{box-sizing:border-box}:root{color:#382a1e;background:#faf6ef;font-family:system-ui,sans-serif;line-height:1.7}body{margin:0}main{max-width:760px;margin:0 auto;padding:12vh 24px}.bread{font-size:56px}.eyebrow{color:#855d32;font-weight:600}h1{letter-spacing:-.04em;font-size:clamp(2.5rem,7vw,4rem);line-height:1.1}section{background:#fffdf8;border:1px solid #dfd4c3;border-radius:16px;margin-top:48px;padding:24px}h2{margin-top:0;font-size:1.2rem}button,textarea,input{font:inherit}a{color:inherit;text-underline-offset:5px}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,a:focus-visible,input:focus-visible{outline-offset:4px;outline:3px solid #956b3a}.tool-page{max-width:1120px;padding-top:32px}.brand-link{font-weight:750;text-decoration:none}.tool-header{margin-top:70px}.tool-header h1{margin:12px 0 20px}.tool-header>p:last-child{color:#716556}.heading-dot{color:#aa6b29}.converter{margin-top:36px;padding:28px;box-shadow:0 12px 35px #382a1e06}.toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;display:flex}.mode-switch{background:#eee7dc;border-radius:10px;padding:4px;display:flex}.mode-switch button{color:#67594a;background:0 0;border:0;border-radius:7px;padding:8px 24px}.mode-switch button[aria-pressed=true]{color:#382a1e;background:#fffdf8;font-weight:700;box-shadow:0 2px 5px #382a1e15}.text-button{color:#795631;background:0 0;border:0;padding:8px}.editor-grid{grid-template-columns:1fr 1fr;gap:20px;margin:28px 0 18px;display:grid}.editor{min-width:0}.editor>label{justify-content:space-between;margin-bottom:10px;font-weight:700;display:flex}.editor>label span{color:#796c5b;font-size:13px;font-weight:400}textarea{resize:vertical;color:#382a1e;background:#fff;border:1px solid #ddd2c1;border-radius:10px;width:100%;min-height:245px;padding:18px;font-family:ui-monospace,monospace;font-size:15px;line-height:1.8;display:block}textarea:focus{outline-offset:2px;outline:2px solid #aa7d44}textarea::placeholder{color:#8d8376}.result-editor textarea{background:#f5f1e9}.checkbox{flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;display:flex}.checkbox input{accent-color:#76512c;width:17px;height:17px}.checkbox span{color:#796c5b;font-size:12px}.actions{align-items:center;gap:12px;display:flex}.primary-button{color:#fffdf8;background:#493321;border:0;border-radius:8px;padding:10px 22px}.notice{color:#52633f;min-height:24px;margin:10px 0;font-size:14px}.error{color:#a13422;background:#fff0e9;border-radius:8px;padding:12px;font-size:14px}.privacy{color:#796c5b;border-top:1px solid #e8dfd0;margin-bottom:0;padding-top:16px;font-size:13px}.guide{background:0 0;border:0;margin-top:48px;padding:24px 0}.guide>p{max-width:760px}.guide h2{font-size:1.6rem}.guide-grid{grid-template-columns:1fr 1fr;gap:12px 48px;display:grid}.guide h3{margin-bottom:8px;font-size:1rem}.guide p{color:#716556}code{overflow-wrap:anywhere;font-size:.9em}footer{color:#796c5b;border-top:1px solid #dfd4c3;margin-top:32px;padding-top:24px;font-size:13px}@media (max-width:640px){.tool-header{margin-top:44px}.converter{padding:18px}.editor-grid,.guide-grid{grid-template-columns:1fr}textarea{min-height:180px}.mode-switch button{padding:8px 16px}.bottom-toolbar{align-items:flex-start}.actions{justify-content:flex-end;width:100%}}.encoding-table{border-collapse:collapse;text-align:left;width:100%;max-width:640px}.encoding-table th,.encoding-table td{border-bottom:1px solid #dfd4c3;padding:10px 14px}.encoding-table th{background:#eee7dc}