.base64-page h1{max-width:980px;font-size:clamp(48px,7.2vw,92px)}.base64-page .seo-hero{grid-template-columns:minmax(0,1fr) minmax(320px,.72fr)}.base64-page .hero-example{transform:rotate(.8deg)}.base64-page .hero-example pre{min-height:238px}.base64-app{--b64-deep:#25233f;--b64-ink:#383653;--b64-muted:#696780;--b64-line:#4b467e2e;--b64-purple:#6558d3;--b64-purple-dark:#493da9;--b64-purple-pale:#f0eeff;--b64-teal:#087487;--b64-mint:#12744a;--b64-mint-pale:#e2f8ee;--b64-warn:#715000;--b64-warn-pale:#fff4d2;--b64-error:#963e36;--b64-error-pale:#fff0ed;color:var(--b64-ink);box-shadow:var(--shadow,0 24px 70px #074e601f);background:#fffffff2;border:1px solid #ffffffd1;border-radius:30px;overflow:hidden}.base64-app *,.base64-app :before,.base64-app :after{box-sizing:border-box}.base64-app button,.base64-app input,.base64-app select,.base64-app textarea{font:inherit}.base64-app button{cursor:pointer}.base64-app button:disabled{cursor:not-allowed;opacity:.46}.base64-app code,.base64-app textarea{font-family:SFMono-Regular,Cascadia Code,Fira Code,DejaVu Sans Mono,Consolas,monospace}.base64-toolbar,.base64-panel-heading,.base64-output-heading,.base64-output-actions,.base64-file-card,.base64-file-row,.base64-conversions>div,.base64-activity{justify-content:space-between;align-items:center;gap:14px;display:flex}.base64-toolbar{border-bottom:1px solid var(--b64-line);background:linear-gradient(90deg,#fbfeff,#f8f7ff 54%,#fffaf1);min-height:70px;padding:12px 16px}.base64-local-badge{align-items:center;gap:11px;min-width:0;display:flex}.base64-local-badge>span{background:var(--b64-mint);border-radius:50%;flex:none;width:10px;height:10px;box-shadow:0 0 0 4px #16865421}.base64-local-badge div{gap:2px;min-width:0;display:grid}.base64-local-badge strong{color:var(--b64-deep);font-size:12px}.base64-local-badge small{color:var(--b64-muted);text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.base64-mode-tabs,.base64-view-tabs{border:1px solid var(--b64-line);background:#fff;border-radius:999px;flex:none;gap:4px;padding:4px;display:inline-flex}.base64-mode-tabs a,.base64-view-tabs button{min-width:86px;color:var(--b64-muted);text-align:center;background:0 0;border:0;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:900}.base64-mode-tabs a.active,.base64-view-tabs button.active{color:#fff;background:var(--b64-purple-dark);box-shadow:0 7px 16px #493da933}.base64-workspace{background:var(--b64-line);grid-template-columns:minmax(0,1.08fr) minmax(330px,.92fr);gap:1px;display:grid}.base64-panel{background:#fff;min-width:0}.base64-input-panel{background:linear-gradient(#fffdfa,#fff);flex-direction:column;min-height:530px;display:flex}.base64-settings-panel{background:linear-gradient(#faf9ff,#fff)}.base64-panel-heading{border-bottom:1px solid var(--b64-line);align-items:flex-start;min-height:84px;padding:17px 18px}.base64-panel-heading>div{min-width:0}.base64-panel-heading p,.base64-output-heading p{color:var(--b64-purple-dark);letter-spacing:.12em;text-transform:uppercase;margin:0 0 4px;font-size:12px;font-weight:900}.base64-panel-heading h2,.base64-output-heading h2{color:var(--b64-deep);letter-spacing:-.025em;margin:0;font-size:18px}.base64-panel-heading small,.base64-output-heading small{color:var(--b64-muted);margin-top:5px;font-size:12px;line-height:1.5;display:block}.base64-quiet-button,.base64-primary-button{border:0;border-radius:999px;min-height:38px;padding:8px 13px;font-size:12px;font-weight:900;transition:transform .16s,background .16s}.base64-quiet-button{color:var(--b64-purple-dark);background:var(--b64-purple-pale)}.base64-quiet-button.danger{color:var(--b64-error);background:var(--b64-error-pale)}.base64-primary-button{color:#fff;background:var(--b64-purple);box-shadow:0 8px 18px #6558d33b}.base64-quiet-button:hover:not(:disabled),.base64-primary-button:hover:not(:disabled){transform:translateY(-1px)}.base64-primary-button:hover:not(:disabled){background:var(--b64-purple-dark)}.base64-quiet-button:focus-visible,.base64-primary-button:focus-visible,.base64-app button:focus-visible,.base64-app a:focus-visible{outline-offset:2px;outline:3px solid #f3b52cb3}.base64-text-label{flex:1;min-height:300px;display:flex}.base64-textarea,.base64-output-text{resize:vertical;width:100%;min-height:300px;color:var(--b64-deep);overflow-wrap:anywhere;background:#ffffffa6;border:0;outline:0;padding:18px;font-size:13px;line-height:1.65}.base64-textarea:focus,.base64-output-text:focus{background:#fff;box-shadow:inset 0 0 0 3px #6558d321}.base64-textarea::placeholder{color:#85829a}.base64-file-card{background:#faf9ff;border:1px dashed #6558d359;border-radius:18px;flex:1;justify-content:flex-start;min-height:300px;margin:18px;padding:24px}.base64-file-card>span{color:#fff;background:var(--b64-purple);border-radius:14px;flex:none;place-content:center;width:44px;height:44px;font-size:12px;font-weight:900;display:grid}.base64-file-card div{flex:1;gap:4px;min-width:0;display:grid}.base64-file-card strong{color:var(--b64-deep);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.base64-file-card small{color:var(--b64-muted);font-size:12px}.base64-file-card button{color:var(--b64-error);background:var(--b64-error-pale);border:0;border-radius:999px;padding:7px 10px;font-size:12px;font-weight:900}.base64-presets{border-top:1px solid var(--b64-line);flex-wrap:wrap;align-items:center;gap:7px;padding:11px 17px;display:flex}.base64-presets strong{color:var(--b64-muted);text-transform:uppercase;letter-spacing:.09em;margin-right:2px;font-size:12px}.base64-presets button{min-height:30px;color:var(--b64-purple-dark);background:var(--b64-purple-pale);border:0;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:900}.base64-presets button:hover{background:#e2deff;transform:translateY(-1px)}.base64-file-row{border-top:1px solid var(--b64-line);flex-wrap:wrap;padding:12px 17px 14px}.base64-file-row small{color:var(--b64-muted);font-size:12px}.base64-file-button{cursor:pointer;display:inline-flex;position:relative;overflow:hidden}.base64-file-button input{opacity:0;width:1px;height:1px;position:absolute}.base64-file-button span{color:#fff;background:var(--b64-purple-dark);border-radius:999px;align-items:center;min-height:38px;padding:8px 13px;font-size:12px;font-weight:900;display:inline-flex;box-shadow:0 8px 17px #493da92e}.base64-file-button input:focus-visible+span{outline-offset:2px;outline:3px solid #f3b52cb3}.base64-notice{border-radius:11px;margin:0 17px 15px;padding:11px 13px;font-size:12px;line-height:1.5}.base64-notice.error{color:var(--b64-error);background:var(--b64-error-pale)}.base64-settings-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;padding:20px 18px;display:grid}.base64-field{align-content:start;gap:7px;min-width:0;display:grid}.base64-full-field{grid-column:1/-1}.base64-field>span{color:var(--b64-deep);font-size:12px;font-weight:900}.base64-field select,.base64-field input{border:1px solid var(--b64-line);width:100%;min-height:47px;color:var(--b64-deep);background:#fff;border-radius:13px;outline:0;padding:10px 12px;font-size:12px}.base64-field input{font-family:SFMono-Regular,Consolas,monospace}.base64-field select:focus,.base64-field input:focus{border-color:#6558d3b3;box-shadow:0 0 0 3px #6558d321}.base64-field small{color:var(--b64-muted);font-size:12px;line-height:1.5}.base64-check-row{border:1px solid var(--b64-line);background:#fff;border-radius:14px;align-items:flex-start;gap:10px;min-height:88px;padding:12px;display:flex}.base64-check-row input{width:18px;height:18px;accent-color:var(--b64-purple);margin:1px 0 0}.base64-check-row span{gap:4px;display:grid}.base64-check-row strong{color:var(--b64-deep);font-size:12px}.base64-check-row small{color:var(--b64-muted);font-size:12px;line-height:1.45}.base64-safety-note{color:var(--b64-warn);background:var(--b64-warn-pale);border-radius:14px;gap:5px;margin:2px 18px 20px;padding:14px;display:grid}.base64-safety-note strong{font-size:12px}.base64-safety-note span{font-size:12px;line-height:1.55}.base64-output{border-top:1px solid var(--b64-line);background:linear-gradient(#fbfbff,#fff);padding:24px 18px 22px}.base64-output-heading{align-items:flex-end}.base64-output-heading>div:first-child{min-width:0}.base64-output-actions{flex-wrap:wrap;justify-content:flex-end}.base64-view-tabs button{min-width:78px;padding-block:7px}.base64-output-text{resize:vertical;border:1px solid var(--b64-line);background:#fff;border-radius:16px;min-height:250px;max-height:540px;margin-top:14px}.base64-preview-warning{color:var(--b64-warn);background:var(--b64-warn-pale);border-radius:10px;margin:14px 0 0;padding:10px 12px;font-size:12px;line-height:1.5}.base64-error-output{color:var(--b64-error);background:var(--b64-error-pale);border:1px solid #963e362e;border-radius:16px;margin-top:14px;padding:22px}.base64-error-output strong{font-size:16px}.base64-error-output p{margin:8px 0 5px;font-family:SFMono-Regular,Consolas,monospace;font-size:13px;line-height:1.6}.base64-error-output span{color:#85544f;font-size:12px;line-height:1.55;display:block}.base64-diagnostics{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:13px;display:grid}.base64-diagnostics article{border:1px solid var(--b64-line);background:#fff;border-radius:14px;align-content:start;gap:5px;min-width:0;padding:13px;display:grid}.base64-diagnostics span{color:var(--b64-purple-dark);letter-spacing:.07em;text-transform:uppercase;font-size:12px;font-weight:900}.base64-diagnostics strong{color:var(--b64-deep);overflow-wrap:anywhere;font-size:12px}.base64-diagnostics small{color:var(--b64-muted);overflow-wrap:anywhere;font-size:12px;line-height:1.45}.base64-conversions{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:9px;display:grid}.base64-conversions>div{border:1px solid var(--b64-line);background:#f9f8ff;border-radius:13px;min-width:0;padding:11px 12px}.base64-conversions span{color:var(--b64-muted);flex:none;font-size:12px;font-weight:900}.base64-conversions code{min-width:0;color:var(--b64-purple-dark);text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:800;overflow:hidden}.base64-conversions button{color:var(--b64-purple-dark);background:var(--b64-purple-pale);border:0;border-radius:999px;flex:none;padding:6px 9px;font-size:12px;font-weight:900}.base64-image-preview{border:1px solid var(--b64-line);background:#f8fbfc;border-radius:16px;grid-template-columns:minmax(210px,.6fr) minmax(0,1fr);align-items:center;gap:20px;margin:13px 0 0;padding:16px;display:grid;overflow:hidden}.base64-image-preview figcaption{gap:5px;display:grid}.base64-image-preview strong{color:var(--b64-deep)}.base64-image-preview span{color:var(--b64-muted);font-size:12px;line-height:1.55}.base64-image-preview img{object-fit:contain;background:repeating-conic-gradient(#eef1f3 0 25%, #fff 0 50%) 50% / 18px 18px;border-radius:10px;width:100%;max-height:360px;display:block}.base64-activity{color:var(--b64-muted);border-top:1px solid var(--b64-line);text-align:center;background:#fbfefe;justify-content:center;margin:0;padding:12px 16px;font-size:12px;line-height:1.45}.base64-activity strong{color:var(--b64-teal)}@media (width<=1060px){.base64-page .seo-hero,.base64-workspace{grid-template-columns:1fr}.base64-input-panel{min-height:480px}.base64-diagnostics{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=720px){.base64-page h1{font-size:clamp(42px,14vw,66px)}.base64-app{border-radius:22px}.base64-toolbar,.base64-output-heading,.base64-activity{flex-direction:column;align-items:stretch}.base64-mode-tabs{width:100%}.base64-mode-tabs a{flex:1}.base64-mode-tabs a,.base64-view-tabs button,.base64-quiet-button,.base64-primary-button,.base64-presets button,.base64-file-button span,.base64-file-card button,.base64-conversions button{min-height:44px}.base64-settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.base64-settings-grid>label:first-child,.base64-check-row,.base64-full-field{grid-column:1/-1}.base64-conversions,.base64-image-preview{grid-template-columns:1fr}.base64-output-actions{justify-content:flex-start}.base64-presets{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.base64-presets strong{grid-column:1/-1}.base64-presets button,.base64-file-button{width:100%}.base64-file-button span{justify-content:center;width:100%}.base64-conversions button{padding:9px 12px}}@media (width<=470px){.base64-panel-heading,.base64-settings-grid,.base64-output{padding-inline:13px}.base64-diagnostics{grid-template-columns:1fr}.base64-output-actions,.base64-output-actions>button,.base64-view-tabs{width:100%}.base64-output-actions>button,.base64-view-tabs button{flex:1}.base64-file-row{flex-direction:column;align-items:stretch}.base64-file-button span{justify-content:center;width:100%}}@media (prefers-reduced-motion:reduce){.base64-app *,.base64-app :before,.base64-app :after{scroll-behavior:auto!important;transition:none!important}}