.st-ascii-hero-inner{position:relative;z-index:1;max-width:820px}.related-link{display:block;color:inherit;text-decoration:none}.related-link:hover{color:inherit}.related-link:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--radius-lg)}.related-link .card{height:100%}.ascii-ui .demo-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s-4);align-items:start}@media(max-width:900px){.ascii-ui .demo-grid{grid-template-columns:1fr}}.ascii-ui .main-col{display:flex;flex-direction:column;gap:var(--s-4);min-width:0}.ascii-ui .side{display:flex;flex-direction:column;gap:var(--s-4)}.ascii-ui .player-wrap{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--inset);aspect-ratio:16 / 9}.ascii-ui .player-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.ascii-ui .ascii-card{background:var(--surface-1);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--s-4)}.ascii-ui .side .ascii-card{background:color-mix(in srgb,var(--hue) 5%,var(--surface-1));border-color:color-mix(in srgb,var(--hue) 20%,var(--line))}.ascii-ui .ascii-card h3{margin:0 0 var(--s-3);padding-bottom:var(--s-3);border-bottom:1px solid color-mix(in srgb,var(--hue) 24%,var(--line));font-size:var(--t-sm);font-weight:600;letter-spacing:normal;text-transform:none;color:var(--text-hi)}.ascii-ui .ascii-card label:not(.check-row){display:block;margin:var(--s-3) 0 3px;font-size:var(--t-xs);color:var(--text-mut)}.ascii-ui .ascii-card .val{float:right;font-family:var(--font-mono);color:var(--accent-hi)}.ascii-ui .ascii-card select,.ascii-ui .ascii-card input[type=number],.ascii-ui .ascii-card input[type=text]{width:100%;height:30px;padding:0 8px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text-hi);font-family:inherit;font-size:var(--t-xs)}.ascii-ui .ascii-card select option{background:var(--surface-3);color:var(--text-hi);padding:5px 8px}.ascii-ui .ascii-card input[type=range]{width:100%;accent-color:var(--accent)}.ascii-ui .ascii-card input[type=color]{width:100%;height:28px;padding:2px;border:1px solid var(--line);border-radius:var(--radius-sm);background:transparent}.ascii-ui .ascii-card .check-row{margin-top:var(--s-2);font-size:var(--t-xs);color:var(--text-mut)}.ascii-ui .ascii-card .row{display:flex;gap:var(--s-2)}.ascii-ui .ascii-card .row>*{flex:1;min-width:0}.ascii-ui .ascii-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:30px;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text-hi);font-family:inherit;font-size:var(--t-xs);white-space:nowrap;cursor:pointer;user-select:none;transition:transform var(--duration-fast) var(--ease)}.ascii-ui .ascii-btn:hover{background:var(--surface-3);border-color:var(--line-strong)}.ascii-ui .ascii-btn:active{transform:translateY(1px)}.ascii-ui .ascii-btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}.ascii-ui .ascii-btn.primary:hover{background:var(--accent-hi)}.ascii-ui .ascii-btn.small{height:24px;padding:0 10px;font-size:var(--t-micro)}.ascii-ui .transport{display:flex;gap:var(--s-2);margin-bottom:var(--s-2)}.ascii-ui .transport .ascii-btn{flex:1}.ascii-ui .file-row{display:flex;gap:var(--s-2);margin-top:var(--s-2)}.ascii-ui .file-row .ascii-btn{flex:1}.ascii-ui .chip-row{display:flex;flex-direction:column;gap:6px}a.ascii-chip{display:block;padding:7px 10px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text-mut);font-size:var(--t-xs);text-decoration:none;cursor:pointer;transition:transform var(--duration-fast) var(--ease)}a.ascii-chip:hover{background:color-mix(in srgb,var(--accent) 12%,var(--surface-2));border-color:color-mix(in srgb,var(--accent) 40%,transparent);color:var(--accent-hi)}.ascii-chips-row{display:flex;flex-wrap:wrap;gap:var(--s-2)}.ascii-ui .ascii-code-card{position:relative}.ascii-ui .ascii-code-card .code-title{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-2);font-size:var(--t-sm);font-weight:600;color:var(--text-hi)}.ascii-ui .ascii-code-card .code-shell{position:relative}.ascii-ui .ascii-code-card .copy-btn{position:absolute;top:3px;right:var(--s-2);z-index:2}.ascii-ui .ascii-code-card .code pre>code{display:block;padding-inline:var(--s-4)}.ascii-ui .hint{font-size:var(--t-xs);line-height:1.65;color:var(--text-faint)}.ascii-ui .hint code{font-family:var(--font-mono);font-size:.9em;padding:1px 5px;border-radius:var(--radius-xs);background:var(--surface-3);color:var(--text)}.ascii-ui .hint a{color:var(--accent-hi)}.ascii-prose{font-size:var(--t-base);line-height:1.8;color:var(--text)}.ascii-prose strong{color:var(--text-hi);font-weight:600}.ascii-prose code{font-family:var(--font-mono);font-size:.86em;padding:.15em .42em;border:1px solid var(--line);border-radius:var(--radius-xs);background:var(--surface-2);color:var(--accent-hi)}.ascii-prose a{color:var(--accent-hi);border-bottom:1px solid color-mix(in srgb,var(--accent) 42%,transparent)}.ascii-prose a:hover{border-bottom-color:var(--accent)}.ascii-steps ol{display:flex;flex-direction:column;gap:var(--s-2);padding-left:1.3em;font-size:var(--t-base);line-height:1.8;color:var(--text)}.ascii-steps li::marker{color:var(--h-amber);font-family:var(--font-mono)}.ascii-steps b{color:var(--text-hi);font-weight:600}.ascii-steps code{font-family:var(--font-mono);font-size:.86em;padding:.15em .42em;border:1px solid var(--line);border-radius:var(--radius-xs);background:var(--surface-2);color:var(--accent-hi)}.ascii-steps a{color:var(--accent-hi);border-bottom:1px solid color-mix(in srgb,var(--accent) 42%,transparent)}.ascii-tips{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s-3)}.ascii-tip{padding:var(--s-3) var(--s-4);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-2);font-size:var(--t-sm);line-height:1.7;color:var(--text-mut)}.ascii-tip b{color:var(--text-hi);font-weight:600}.ascii-tip code{font-family:var(--font-mono);font-size:.9em;padding:1px 5px;border-radius:var(--radius-xs);background:var(--surface-3);color:var(--accent-hi)}.ascii-tip a{color:var(--accent-hi);border-bottom:1px solid color-mix(in srgb,var(--accent) 42%,transparent)}