@layer demo{.algorithm-demo{min-width:0;max-width:100%;margin-block:var(--space-24);border:1px solid var(--color-border-subtle);border-radius:var(--radius-card);background:var(--color-surface);font:1rem/1.65 var(--font-ui);overflow-wrap:break-word}.demo-heading{align-items:center;gap:var(--space-8);padding:var(--space-20);border-bottom:1px solid var(--color-border-subtle);flex-wrap:wrap;display:flex}.demo-heading strong{font-size:1.125rem;font-weight:600}.demo-kicker{color:var(--color-text-secondary);font-size:.875rem}.focus-toggle{padding:var(--space-8) var(--space-12);margin-left:auto;font-size:.875rem}.demo-focused>.demo-heading{top:var(--header-height);background:var(--color-surface);z-index:2;position:sticky}.demo-workspace{grid-template-columns:minmax(0,1fr);display:grid}.demo-diagram,.demo-code{min-width:0}.demo-code{padding:var(--space-16)}.demo-code .live-code{margin:0}.demo-code>.scene-note{margin-top:var(--space-12)}@media (width>=1100px){.demo-focused .demo-workspace{grid-template-columns:minmax(0,58fr) minmax(0,42fr)}.demo-focused .demo-code{border-left:1px solid var(--color-border-subtle)}}.demo-inputs{align-items:end;gap:var(--space-24);padding:var(--space-24) var(--space-20) 0;flex-wrap:wrap;display:flex}.demo-inputs label{gap:var(--space-8);flex-direction:column;min-width:0;font-size:.875rem;font-weight:600;display:flex}.demo-inputs input{color:var(--color-text);width:100%;font-size:1rem;font-weight:400}.demo-inputs .array-input{flex:1}.demo-inputs .target-input{width:100px}.algorithm-demo .input-hint{width:100%;color:var(--color-text-secondary);margin:0;font-size:.875rem}.input-feedback{width:100%;color:var(--color-danger);background:var(--color-danger-bg);padding:var(--space-12);border-radius:var(--radius-input);margin:0;font-size:.875rem}.input-feedback:empty{display:none}.pending-input{color:var(--color-warning);background:var(--color-warning-bg);padding:var(--space-12) var(--space-20);margin:var(--space-16) 0 0;font-size:.875rem}.binary-search-view{padding:var(--space-24) var(--space-20)}.state-summary{gap:var(--space-12) var(--space-24);flex-wrap:wrap;margin:0;font-size:.875rem;display:flex}.state-summary>div{align-items:baseline;gap:var(--space-8);display:flex}.state-summary dt{color:var(--color-text-secondary)}.state-summary dd{color:var(--color-text);font:600 .875rem var(--font-mono);margin:0}.array-scroll{padding:var(--space-24) var(--space-4) var(--space-8);overflow-x:auto}.algorithm-demo .array-view{gap:var(--space-8);width:max-content;margin:0 auto;padding:0;list-style:none;display:flex}.algorithm-demo .array-cell{flex-direction:column;flex:0 0 64px;align-items:center;width:64px;margin:0;display:flex}.cell-index{color:var(--color-text-secondary);font:.875rem var(--font-mono);margin-bottom:var(--space-8)}.cell-value{border:2px solid var(--color-border-control);background:var(--color-surface);border-radius:var(--radius-control);width:100%;height:56px;font:1.125rem var(--font-mono);color:var(--color-text);place-items:center;display:grid}.cell-status{color:var(--color-text-secondary);margin-top:var(--space-8);font-size:.875rem}.array-cell.checking .cell-value{color:var(--color-selection-text);border-color:var(--color-selection-text);background:var(--color-selection-bg)}.array-cell.found .cell-value{background:var(--color-success-bg);color:var(--color-success);border-color:var(--color-success)}.array-cell.excluded .cell-value{color:var(--color-text-secondary);background:var(--color-surface-subtle);border:2px dashed var(--color-border-control)}.cell-pointers{align-items:center;gap:var(--space-4);margin-top:var(--space-8);flex-direction:column;min-height:80px;display:flex}.cell-pointers span{border:1px solid var(--color-border-control);border-radius:var(--space-8);padding:0 var(--space-8);color:var(--color-text);background:var(--color-surface-subtle);font:.875rem/24px var(--font-mono)}.array-legend{gap:var(--space-8) var(--space-16);color:var(--color-text-secondary);margin-top:var(--space-12);flex-wrap:wrap;font-size:.875rem;display:flex}.array-legend span{align-items:center;gap:var(--space-8);display:inline-flex}.array-legend i{border-radius:var(--space-4);width:14px;height:14px;display:inline-block}.legend-active{background:var(--color-surface);border:2px solid var(--color-border-control)}.legend-check{background:var(--color-selection-bg);border:2px solid var(--color-selection-text)}.legend-found{background:var(--color-success-bg);border:2px solid var(--color-success)}.demo-result{padding:var(--space-12) var(--space-16);border-radius:var(--radius-control);background:var(--color-success-bg);color:var(--color-success);margin:var(--space-16) 0 0}.demo-result.missing{background:var(--color-surface-subtle);color:var(--color-text-secondary)}.playback-controls{gap:var(--space-12);padding:var(--space-16);padding-bottom:max(var(--space-16), env(safe-area-inset-bottom));border-block:1px solid var(--color-border-subtle);background:var(--color-surface-subtle);flex-direction:column;display:flex}.transport{gap:var(--space-12);flex-wrap:wrap;display:flex}.transport button{padding-inline:var(--space-12);white-space:nowrap;flex:1}.playback-options{justify-content:space-between;align-items:center;gap:var(--space-16);color:var(--color-text-secondary);flex-wrap:wrap;font-size:.875rem;display:flex}.playback-options label{align-items:center;gap:var(--space-8);display:flex}.step-count{font-variant-numeric:tabular-nums}.step-count b{color:var(--color-text)}.playback-timeline{width:100%;min-height:44px;accent-color:var(--color-action);border:0;padding:0}.playback-progress{clip-path:inset(50%);position:absolute;width:1px!important;height:1px!important}.playback-context{margin:0;font-size:.875rem}.event-navigation{align-items:center;gap:var(--space-12);flex-wrap:wrap;font-size:.875rem;display:flex}.event-navigation select{flex:1}.playback-progress{border-radius:var(--radius-pill);appearance:none;background:var(--color-border-subtle);border:0;width:100%;height:12px;overflow:hidden}.playback-progress::-webkit-progress-bar{background:var(--color-border-subtle);border-radius:var(--radius-pill)}.playback-progress::-webkit-progress-value{background:var(--color-success);border-radius:var(--radius-pill)}.playback-progress::-moz-progress-bar{background:var(--color-success);border-radius:var(--radius-pill)}.playback-hint{color:var(--color-text-secondary);margin:0;font-size:.875rem}.step-explanation{padding:var(--space-20);min-height:96px}.step-explanation>span{color:var(--color-info);margin-bottom:var(--space-8);font-size:.875rem;font-weight:600;display:block}.algorithm-demo .step-explanation p{margin:0}.live-code,.trace-transcript{margin:0 var(--space-20);border:1px solid var(--color-border-control);border-radius:var(--radius-control);background:var(--color-surface)}.live-code summary,.trace-transcript summary{cursor:pointer;padding:var(--space-12) var(--space-16);min-height:48px;font-size:1rem}.live-code summary>span{color:var(--color-text-secondary);margin-top:var(--space-4);font-size:.875rem;display:block}.live-code pre{padding-block:var(--space-16);font:.9375rem/1.75 var(--font-mono);tab-size:2;border-radius:0 0 var(--radius-control) var(--radius-control);background:var(--color-surface-subtle);margin:0;overflow-x:auto}.live-code code{background:0 0;min-width:max-content;padding:0;display:block}.code-line{padding:0 var(--space-16) 0 var(--space-8);white-space:pre;min-height:1.8em;display:block}.code-line.highlighted{background:var(--color-selection-bg);box-shadow:inset 3px 0 var(--color-selection-text);color:var(--color-selection-text)}.line-number{text-align:right;user-select:none;width:28px;color:var(--color-text-secondary);display:inline-block}.line-indicator{text-align:center;width:20px;font-weight:700;display:inline-block}.trace-transcript{margin-top:var(--space-16)}.trace-transcript ol{margin:var(--space-12) var(--space-20) var(--space-20);font-size:.875rem}.trace-transcript li{padding:var(--space-8);border-radius:var(--space-8)}.trace-transcript li[aria-current=step]{color:var(--color-selection-text);background:var(--color-selection-bg);font-weight:600}.algorithm-demo .demo-footnote{padding:var(--space-16) var(--space-20);color:var(--color-text-secondary);margin:0;font-size:.875rem}@media (width<=639px){.demo-inputs .array-input{flex-basis:100%}.demo-inputs .target-input,.demo-inputs button{flex:1}.transport{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;display:grid}.transport button{white-space:normal}}}