:root{--bg-base: #0a0a0f;--bg-canvas: #05050a;--accent: #7c6aef;--accent-hover: #8d7ff5;--text-primary: rgba(255, 255, 255, .9);--text-secondary: rgba(255, 255, 255, .55);--text-tertiary: rgba(255, 255, 255, .35);--glass-bg: rgba(255, 255, 255, .04);--glass-border: rgba(255, 255, 255, .08);--glass-border-hover: rgba(255, 255, 255, .14);--input-bg: rgba(255, 255, 255, .06);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--transition-fast: .15s ease;--transition-normal: .25s ease;--sidebar-width: 260px}*{margin:0;padding:0;box-sizing:border-box}body{background:var(--bg-base);background-image:radial-gradient(ellipse at 20% 50%,rgba(124,106,239,.06) 0%,transparent 60%),radial-gradient(ellipse at 80% 80%,rgba(60,50,120,.05) 0%,transparent 50%);color:var(--text-primary);font-family:Segoe UI,system-ui,-apple-system,sans-serif;height:100vh;overflow:hidden}#app{display:flex;flex-direction:row;height:100vh}.sidebar{width:var(--sidebar-width);min-width:var(--sidebar-width);display:flex;flex-direction:column;gap:2px;padding:20px 16px;background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-right:1px solid var(--glass-border);overflow-y:auto}.sidebar-header h1{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--text-primary);padding-bottom:16px;border-bottom:1px solid var(--glass-border);margin-bottom:8px}.sidebar-section{padding:12px 0}.section-label{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-tertiary);margin-bottom:8px}.algo-select-row{display:flex;align-items:center;gap:8px}.algo-select-row #algo-select{flex:1;min-width:0}.btn-info{width:24px;height:24px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--glass-border);border-radius:50%;background:var(--glass-bg);color:var(--text-secondary);font-size:13px;font-style:italic;font-family:Georgia,Times New Roman,serif;cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast)}.btn-info:hover{background:#ffffff14;border-color:var(--glass-border-hover);color:var(--text-primary)}.btn-info:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #7c6aef33}.algo-tooltip{margin-top:8px;padding:10px 12px;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-sm);animation:tooltip-slide-down .15s ease}.algo-tooltip[hidden]{display:none}@keyframes tooltip-slide-down{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.algo-tooltip-name{font-size:13px;font-weight:600;color:var(--text-primary);margin-bottom:4px}.algo-tooltip-complexity{font-size:11px;font-family:SF Mono,Fira Code,Cascadia Code,monospace;color:var(--text-secondary);margin-bottom:6px}.algo-tooltip-desc{font-size:12px;line-height:1.4;color:var(--text-secondary);margin-bottom:6px}.algo-tooltip-link{font-size:12px;color:var(--accent);text-decoration:none}.algo-tooltip-link:hover{text-decoration:underline;color:var(--accent-hover)}#algo-select{width:100%;padding:8px 32px 8px 12px;border:1px solid var(--glass-border);border-radius:var(--radius-sm);background:var(--input-bg);color:var(--text-primary);font-size:13px;cursor:pointer;transition:border-color var(--transition-fast);appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='rgba(255,255,255,0.4)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}#algo-select:hover{border-color:var(--glass-border-hover)}#algo-select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #7c6aef33}#algo-select option{background:#1a1a24;color:var(--text-primary)}.btn-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.btn-grid button{padding:8px 12px;border:1px solid var(--glass-border);border-radius:var(--radius-sm);background:var(--input-bg);color:var(--text-primary);font-size:13px;font-weight:500;cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast)}.btn-grid button:hover{background:#ffffff14;border-color:var(--glass-border-hover);transform:translateY(-1px);box-shadow:0 2px 8px #0000004d}.btn-grid button:active{transform:translateY(0);background:#ffffff1a}.btn-grid button:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #7c6aef33}.btn-accent{background:#7c6aef26!important;border-color:#7c6aef4d!important;color:var(--accent-hover)!important}.btn-accent:hover{background:#7c6aef40!important;border-color:#7c6aef66!important}.speed-row{display:flex;align-items:center;gap:10px}#speed-slider{flex:1;-webkit-appearance:none;appearance:none;height:4px;background:#ffffff1a;border-radius:2px;outline:none}#speed-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer;box-shadow:0 0 8px #7c6aef66;transition:box-shadow var(--transition-fast)}#speed-slider::-moz-range-thumb{width:16px;height:16px;border:none;border-radius:50%;background:var(--accent);cursor:pointer;box-shadow:0 0 8px #7c6aef66}#speed-slider:focus::-webkit-slider-thumb{box-shadow:0 0 0 3px #7c6aef33,0 0 8px #7c6aef66}#speed-value{font-size:12px;font-variant-numeric:tabular-nums;color:var(--text-secondary);min-width:38px;text-align:right}.status-readout{display:flex;flex-direction:column;gap:6px}#step-counter{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text-primary)}#step-description{font-size:12px;line-height:1.5;color:var(--text-secondary);word-wrap:break-word;overflow-wrap:break-word}.canvas-area{flex:1;min-width:0;padding:12px;display:flex}#canvas{flex:1;display:block;cursor:crosshair;background:var(--bg-canvas);border-radius:var(--radius-lg);box-shadow:inset 0 1px 3px #00000080}