:root{color:#000;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;background:#fff;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:16px}*{box-sizing:border-box}body{margin:0}main{grid-template-rows:minmax(0,1fr) auto;grid-template-columns:2fr 1fr;height:100dvh;display:grid}textarea,button{font:inherit}textarea{resize:none;appearance:none;border:0;border-radius:0;width:100%;min-width:0;height:100%;min-height:0;line-height:1.33}textarea:focus{outline:none}#input{color:#000;background:#fff;grid-area:1/2;padding:1rem}.encoded-panel{--panel-padding:3rem;background:#000;grid-area:1/1/3;min-width:0;min-height:0;position:relative}#output{padding:var(--panel-padding);color:#fff;background:#000;font-size:3rem}.control-shell{min-width:0;padding:.5rem .75rem max(.5rem, env(safe-area-inset-bottom));text-align:right;background:#fff;flex-direction:column;grid-area:2/2;align-items:flex-end;gap:.25rem;font-size:.6875rem;line-height:1.4;display:flex}.copy-control{flex-direction:column;align-items:flex-end;gap:.25rem;max-width:100%;display:none}#menu-toggle{letter-spacing:.12em;min-width:44px;min-height:44px}#menu-toggle[aria-expanded=true]+.copy-control{display:flex}.control-shell[data-mode=mouse] #menu-toggle{display:none}.control-shell[data-mode=mouse] .copy-control{opacity:0;pointer-events:none;transition:opacity .35s;display:flex}.control-shell[data-mode=mouse][data-near=true] .copy-control{opacity:1;pointer-events:auto;transition-duration:.15s}.control-shell[data-mode=mouse] .copy-control:has(:focus-visible){opacity:1;pointer-events:auto;transition-duration:.15s}@media (prefers-reduced-motion:reduce){.control-shell[data-mode=mouse] .copy-control{transition:none}}.button-row{flex-wrap:wrap;justify-content:flex-end;gap:.375rem;display:flex}button{color:#000;cursor:pointer;background:#fff;border:0;min-height:32px;padding:.25rem}button:disabled{color:#777;cursor:default}button:focus-visible{outline-offset:2px;outline:1px solid}#output:focus-visible{outline-offset:-4px;outline:1px solid #aaa}#link-state{bottom:calc(max(.5rem, env(safe-area-inset-bottom)) + (32px - 1.4 * .6875rem) / 2);color:#aaa;opacity:0;pointer-events:none;font-variant-numeric:tabular-nums;background:#000;width:fit-content;max-width:calc(100% - 2rem);font-size:.6875rem;line-height:1.4;transition:opacity .35s;position:absolute;left:1rem;right:1rem}#link-size,#link-message{display:block}#link-message:empty{display:none}#link-state[data-near=true]{opacity:1;transition-duration:.15s}@media (prefers-reduced-motion:reduce){#link-state{transition:none}}#link-state[data-state=warning]{color:#d8a04b}#link-state[data-state=error]{color:#f08080}#record[aria-pressed=true]:before{content:"● ";color:#bd2525}noscript{background:#fff;padding:1rem;position:fixed;top:0}@media (pointer:coarse){button{min-height:44px}}@media (width<=600px){main{grid-template-rows:minmax(0,65fr) minmax(0,35fr) auto;grid-template-columns:1fr}#input{grid-area:2/1}.encoded-panel{--panel-padding:1.5rem;grid-area:1/1}#output{font-size:2rem}.control-shell{text-align:left;grid-area:3/1;align-items:flex-start}.copy-control{align-items:flex-start}.button-row{justify-content:flex-start}}