.base64-converter{margin-block:2rem 3rem}.base64-grid{border:1px solid var(--color-border);background:var(--color-surface);border-radius:.75rem;grid-template-columns:repeat(2,minmax(0,1fr));display:grid;overflow:hidden}.base64-editor,.base64-results{min-width:0;padding:1.5rem}.base64-results{border-left:1px solid var(--color-border);background:var(--color-subtle)}.base64-heading{flex-wrap:wrap;justify-content:space-between;gap:.5rem;margin-bottom:.75rem;display:flex}.base64-heading label{font-weight:700}.base64-heading span,.base64-note,.base64-copy-status{color:var(--color-muted);font-size:.875rem}.base64-converter textarea{resize:vertical;border:1px solid var(--color-input);background:var(--color-surface);width:100%;height:260px;min-height:180px;color:var(--color-text);border-radius:.5rem;padding:1rem;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:1rem;line-height:1.6;display:block;overflow:auto}.base64-note{margin:.75rem 0 1rem}.base64-controls{flex-wrap:wrap;align-items:center;gap:.75rem;margin-block:1rem;display:flex}.base64-controls label{font-weight:600}.base64-controls select{border:1px solid var(--color-input);background:var(--color-surface);min-height:44px;color:var(--color-text);font:inherit;border-radius:.5rem;padding:.5rem .75rem}.base64-actions{flex-wrap:wrap;gap:.5rem;display:flex}.base64-converter button,.base64-page .analytics-settings-actions button{border:1px solid var(--color-input);background:var(--color-surface);min-height:44px;color:var(--color-text);font:inherit;cursor:pointer;border-radius:.5rem;padding:.65rem 1rem}.base64-converter button:hover:not(:disabled){background:var(--color-subtle)}.base64-converter .base64-primary,.base64-converter .base64-copy{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-surface)}.base64-converter .base64-primary:hover:not(:disabled),.base64-converter .base64-copy:hover:not(:disabled){background:var(--color-text)}.base64-converter button:disabled{opacity:.5;cursor:default}.base64-converter :is(textarea,select,button):focus-visible,.base64-page .analytics-settings-actions button:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}.base64-copy-status{min-height:1.4em;margin-block:.5rem}.base64-error{color:var(--color-error)}.base64-results .result-feedback,.base64-support{margin-top:1rem}@media (width<=46rem){.base64-grid{grid-template-columns:minmax(0,1fr)}.base64-editor,.base64-results{padding:1rem}.base64-results{border-left:0;border-top:1px solid var(--color-border)}.base64-converter textarea{height:216px}}.base64-error{overflow-wrap:anywhere}.base64-error:focus{outline:2px solid var(--color-focus);outline-offset:3px}@media (width<=46rem){.base64-page main{padding-top:1rem}.base64-converter{margin-top:1rem}.base64-converter textarea{height:180px}}.base64-controls select{appearance:none;background-image:linear-gradient(45deg, transparent 50%, var(--color-muted) 50%), linear-gradient(135deg, var(--color-muted) 50%, transparent 50%);background-position:calc(100% - 15px),calc(100% - 10px);background-repeat:no-repeat;background-size:5px 5px;height:44px;padding-right:2rem}.base64-settings{flex-wrap:wrap;gap:.75rem 1.5rem;margin-bottom:1rem;display:flex}.base64-controls{margin:0}.base64-whitespace{cursor:pointer;align-items:center;gap:.5rem;min-height:44px;margin-bottom:1rem;display:flex}.base64-whitespace input{appearance:none;border:1px solid var(--color-input);background:var(--color-surface);border-radius:.5rem;flex:0 0 44px;width:44px;height:44px;margin:0}.base64-whitespace input:checked{background:var(--color-primary);box-shadow:inset 0 0 0 12px var(--color-surface)}.base64-whitespace input:disabled{opacity:.5}.base64-whitespace input:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}.base64-whitespace span{color:var(--color-muted);font-size:.875rem}@media (width<=46rem){.base64-page h1{margin-bottom:.75rem}.base64-converter{margin-top:.5rem}.base64-settings{gap:.75rem}.base64-settings .base64-controls{flex-direction:column;flex:8rem;align-items:stretch;gap:.25rem}.base64-note{margin-bottom:.5rem}}