.ascii-demo{border-block:1px solid var(--border-color-base);font:14px/1.5 var(--font-sans);color:var(--text-color-body);margin:2rem 0;padding:1.5rem 0}.ascii-demo h3{font:600 20px var(--font-sans);margin:0 0 1.2rem}.ascii-controls{flex-wrap:wrap;align-items:flex-end;gap:20px;display:flex}.ascii-controls label{color:var(--text-color-muted);gap:7px;font-size:12px;display:grid}.ascii-controls input{border:1px solid var(--border-color-base);background:var(--background-color-card);width:100px;min-height:44px;color:var(--text-color-strong);font:20px var(--font-mono);border-radius:6px;padding:6px 12px}.ascii-examples{gap:8px;display:flex}.ascii-examples button{border:1px solid var(--border-color-base);min-width:44px;min-height:44px;color:var(--text-color-body);font:14px var(--font-sans);cursor:pointer;background:0 0;border-radius:6px;padding:8px 12px}.ascii-examples button[aria-pressed=true]{border-color:var(--accent-600);color:var(--accent-600);background:color-mix(in srgb,var(--accent-600) 8%,transparent)}.ascii-demo :focus-visible{outline:2px solid var(--accent-600);outline-offset:3px}.ascii-conversion{grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:12px;margin:28px 0;display:grid}.ascii-conversion>div{text-align:center;gap:10px;min-width:0;display:grid}.ascii-conversion>div>span{color:var(--text-color-muted);font-size:12px}.ascii-conversion strong{font:500 clamp(22px,4vw,34px) var(--font-mono);overflow-wrap:anywhere;animation:.25s ease-out both ascii-change}.ascii-conversion>span{color:var(--text-color-muted);font-size:20px}.ascii-byte-label{justify-content:space-between;gap:12px;margin-bottom:10px;font-size:13px;display:flex}.ascii-byte-label>span{color:var(--text-color-muted);font-size:11px}.ascii-bits{grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;display:grid}.ascii-bits>div{text-align:center;gap:6px;display:grid}.ascii-bit{border:1px solid var(--border-color-base);font:clamp(20px,4vw,30px) var(--font-mono);background:var(--background-color-card);border-radius:7px;padding:12px 0;animation:.3s ease-out both ascii-change;display:block}.ascii-bit[data-on=true]{background:color-mix(in srgb,var(--accent-600) 10%,var(--background-color-base));border-color:var(--accent-600);color:var(--accent-600);box-shadow:inset 0 -3px var(--accent-600)}.ascii-bits small{font:11px var(--font-mono);color:var(--text-color-muted)}.ascii-demo .ascii-status{min-height:3em;font:14px/1.5 var(--font-mono);margin:16px 0 0}.ascii-demo .ascii-note{font:12px/1.6 var(--font-sans);color:var(--text-color-muted);margin:12px 0 20px}.ascii-demo summary{cursor:pointer;color:var(--text-color-muted);padding:8px 0;font-size:13px}.ascii-reference{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:16px;display:grid}.ascii-demo table{border-collapse:collapse;width:100%;font:13px var(--font-mono);margin:0}.ascii-demo th,.ascii-demo td{text-align:left;border-bottom:1px solid var(--border-color-base);padding:5px 4px;font-weight:400}.ascii-demo thead th{background:var(--background-color-base);font-family:var(--font-sans)}.ascii-demo tr[data-selected=true]{background:color-mix(in srgb,var(--accent-600) 10%,transparent);color:var(--accent-600)}.ascii-demo th small{font:11px var(--font-sans)}@keyframes ascii-change{0%{opacity:.4;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.ascii-demo *{animation:none!important}}@media (width<=450px){.ascii-bits{gap:4px}.ascii-conversion{gap:6px}.ascii-conversion strong{font-size:23px}.ascii-controls{gap:12px}.ascii-examples{gap:5px}}.ascii-reference caption{text-align:left;font:12px var(--font-sans);color:var(--text-color-muted);padding:0 4px 10px}.ascii-reference th:first-child{width:60%}.ascii-reference th button{font:11px var(--font-mono);text-align:left;overflow-wrap:anywhere;width:100%;min-height:32px;color:inherit;cursor:pointer;background:0 0;border:0;padding:4px}.ascii-reference th button:hover{background:color-mix(in srgb,var(--accent-600) 8%,transparent)}.ascii-reference td{font-size:11px}.ascii-reference tr[data-selected=true] th{box-shadow:inset 3px 0 var(--accent-600)}@media (width<=800px){.ascii-reference{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=450px){.ascii-reference{grid-template-columns:1fr}.ascii-reference th button{min-height:44px;font-size:13px}.ascii-reference td{font-size:13px}}.ascii-reference tbody tr:last-child>th,.ascii-reference tbody tr:last-child>td{border-bottom:0}.prefix-demo{font:14px/1.5 var(--font-sans);margin:2rem 0}.prefix-demo .product-surface{max-width:600px;margin:auto}.search-wordmark{text-align:center;color:#254774;font:600 30px var(--font-sans);letter-spacing:-1px;margin:12px 0 22px}.search-wordmark span{color:#267a6b}.search-input{border:1px solid #b9c6d6;border-radius:24px;align-items:center;gap:12px;margin-top:7px;padding:5px 14px;display:flex;box-shadow:0 2px 7px #20334b0c}.search-input>span{color:#708197;font-size:25px}.search-input input{color:#233044;min-width:0;font:16px var(--font-sans);background:#fff;border:0;outline:none;flex:1;padding:9px 0}.search-input:focus-within{outline-offset:2px;outline:2px solid #3a73bb}.search-input button{color:#64748b;cursor:pointer;background:0 0;border:0;min-width:32px;min-height:36px;font-size:22px}.search-input button:disabled{opacity:.3}.search-results{min-height:180px;margin:12px 0}.search-results button{text-align:left;color:#27374c;width:100%;font:14px/1.4 var(--font-sans);cursor:pointer;background:#fff;border:0;border-radius:7px;gap:14px;padding:10px 12px;display:flex}.search-results button:hover{background:#eef4fd}.search-results button:focus-visible{outline:2px solid #3a73bb}.search-results button>span:first-child{color:#7b8ba0}.search-results mark{color:#244e86;background:#e5effc;border-radius:2px}.prefix-demo figcaption{color:var(--text-color-muted);margin-top:12px;font-size:12px}
