.ascii-demo{margin-top:var(--space-lg)}.ascii-demo .demo-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}@media(max-width:900px){.ascii-demo .demo-grid{grid-template-columns:1fr}}.ascii-demo .main-col{display:flex;flex-direction:column;gap:14px;min-width:0}.ascii-demo .side{display:flex;flex-direction:column;gap:14px}.ascii-demo .player-wrap{position:relative;border-radius:8px;overflow:hidden;border:1px solid var(--glass-border);background:#000;aspect-ratio:16 / 9;box-shadow:0 8px 40px #00000080}.ascii-demo .player-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.ascii-demo .ascii-card{background:var(--bg-surface);border:1px solid var(--glass-border);border-radius:8px;padding:14px}.ascii-demo .ascii-card h3{font-size:12px;font-weight:600;color:var(--text-secondary);margin-bottom:10px;letter-spacing:.5px;text-transform:uppercase}.ascii-demo .ascii-card label{display:block;margin:9px 0 3px;color:var(--text-secondary);font-size:12px}.ascii-demo .ascii-card label .val{color:var(--accent-cyan);font-family:var(--font-mono);float:right}.ascii-demo .ascii-card select,.ascii-demo .ascii-card input[type=number],.ascii-demo .ascii-card input[type=text]{width:100%;padding:5px 8px;border-radius:4px;border:1px solid var(--glass-border);background:#ffffff0d;color:var(--text-primary);font-family:inherit;font-size:12px}.ascii-demo .ascii-card select option{background:var(--bg-elevated);color:var(--text-primary);padding:5px 8px}.ascii-demo .ascii-card input[type=range]{width:100%;accent-color:var(--accent-cyan)}.ascii-demo .ascii-card input[type=color]{width:100%;height:26px;padding:2px;border:1px solid var(--glass-border);border-radius:4px;background:transparent}.ascii-demo .check-row{display:flex;align-items:center;gap:8px;margin-top:8px;cursor:pointer;font-size:12px;color:var(--text-secondary);user-select:none}.ascii-demo .check-row input{accent-color:var(--accent-cyan)}.ascii-demo .row{display:flex;gap:8px}.ascii-demo .row>*{flex:1}.ascii-demo .ascii-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:6px 12px;border-radius:4px;border:1px solid var(--glass-border);background:#ffffff0f;color:var(--text-primary);font-size:12px;font-family:inherit;cursor:pointer;white-space:nowrap;transition:background .15s;user-select:none}.ascii-demo .ascii-btn:hover{background:#ffffff1f}.ascii-demo .ascii-btn.primary{background:var(--accent-cyan);border-color:var(--accent-cyan);color:#060b14;font-weight:600}.ascii-demo .ascii-btn.primary:hover{background:#38ddf5}.ascii-demo .ascii-btn.small{padding:4px 10px;font-size:11px}.ascii-demo .transport{display:flex;gap:8px;margin-bottom:10px}.ascii-demo .transport .ascii-btn{flex:1;justify-content:center}.ascii-demo .file-row{display:flex;gap:8px;margin-top:10px}.ascii-demo .file-row .ascii-btn{flex:1;justify-content:center}.ascii-demo .chip-row{display:flex;flex-direction:column;gap:6px}.ascii-demo .ascii-chip{display:block;padding:7px 10px;border-radius:4px;border:1px solid var(--glass-border);background:#ffffff0a;color:var(--text-secondary);font-size:12px;cursor:pointer;transition:all .15s;text-decoration:none}.ascii-demo .ascii-chip:hover{background:#22d3ee1a;color:var(--accent-cyan);border-color:#22d3ee66}.ascii-demo .hint{color:var(--text-tertiary);font-size:12px;line-height:1.6}.ascii-demo .hint code{font-family:var(--font-mono);background:#ffffff14;padding:1px 5px;border-radius:3px;font-size:11px}.ascii-demo .hint a{color:var(--accent-cyan)}.ascii-demo .ascii-code-card{position:relative}.ascii-demo .ascii-code-card .copy-btn{position:absolute;top:10px;right:10px;z-index:2}.ascii-demo .ascii-code-card pre{background:#0a0f1c;border:1px solid var(--glass-border);border-radius:8px;padding:16px;overflow-x:auto;font-family:var(--font-mono);font-size:12px;line-height:1.7;color:#c9d4e4;user-select:text;-webkit-user-select:text}.ascii-demo .ascii-code-card pre code{font-family:inherit}.ascii-demo .ascii-code-card .code-title{font-size:12px;font-weight:600;color:var(--text-secondary);margin-bottom:8px;letter-spacing:.5px;text-transform:uppercase}.ascii-demo .ascii-steps ol{padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:.95rem}.ascii-demo .ascii-tips{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin-top:16px}.ascii-demo .ascii-tip{background:#ffffff08;border:1px solid var(--glass-border);border-radius:6px;padding:10px 12px;font-size:12px;color:var(--text-tertiary)}.ascii-demo .ascii-tip b{color:var(--text-secondary);font-weight:500}.ascii-demo .ascii-tip a{color:var(--accent-cyan)}.ascii-demo .ascii-tip code{font-family:var(--font-mono);background:#ffffff14;padding:1px 5px;border-radius:3px;font-size:11px;color:#7dd3fc}