*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#0d1117;color:#e0e0e0}#root{height:100%}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#1a1a2e}::-webkit-scrollbar-thumb{background:#0f3460;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#4fc3f7}::selection{background:#4fc3f74d}.header{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:linear-gradient(135deg,#1a1a2e,#16213e);border-bottom:1px solid #0f3460;height:48px;box-sizing:border-box}.header-left{flex:1}.back-link{color:#4fc3f7;text-decoration:none;font-size:13px;transition:color .2s}.back-link:hover{color:#81d4fa}.header-center{flex:2;text-align:center}.title-link{text-decoration:none}.title{margin:0;font-size:18px;color:#fff;font-weight:600}.title:hover{color:#4fc3f7}.header-right{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:12px}.thoughts-btn{background:#0f3460;border:1px solid #4fc3f7;color:#4fc3f7;padding:6px 12px;border-radius:4px;cursor:pointer;font-size:13px;transition:all .2s}.thoughts-btn:hover{background:#4fc3f7;color:#1a1a2e}.github-link{display:flex;align-items:center;gap:6px;color:#fff;text-decoration:none;padding:6px 10px;background:#0f3460;border-radius:4px;transition:background .2s}.github-link:hover{background:#1a4a7a}.github-icon{width:18px;height:18px}.star-count{font-size:13px}.modal-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:#1a1a2e;border:1px solid #0f3460;border-radius:8px;padding:24px;max-width:600px;max-height:80vh;overflow-y:auto;position:relative}.modal-close{position:absolute;top:12px;right:12px;background:none;border:none;color:#888;font-size:20px;cursor:pointer}.modal-close:hover{color:#fff}.thoughts-content{color:#e0e0e0;line-height:1.6}.thoughts-content h2{color:#4fc3f7;margin-top:0}.thoughts-content h3{color:#81d4fa;margin-top:20px}.thoughts-content code{background:#0f3460;padding:2px 6px;border-radius:3px;font-family:Consolas,monospace}.thoughts-content ul{padding-left:20px}.thoughts-content li{margin:6px 0}.input-panel{padding:10px 16px;background:#16213e;border-bottom:1px solid #0f3460}.input-row{display:flex;align-items:center;gap:10px}.input-label{color:#4fc3f7;font-family:Consolas,monospace;font-size:14px;white-space:nowrap}.input-field{flex:1;max-width:400px;padding:8px 12px;background:#1a1a2e;border:1px solid #0f3460;border-radius:4px;color:#fff;font-family:Consolas,monospace;font-size:14px}.input-field:focus{outline:none;border-color:#4fc3f7}.input-field.input-error{border-color:#f44336}.apply-btn{padding:8px 16px;background:#4fc3f7;border:none;border-radius:4px;color:#1a1a2e;font-weight:600;cursor:pointer;transition:background .2s}.apply-btn:hover{background:#81d4fa}.random-btn{padding:8px 16px;background:#0f3460;border:1px solid #4fc3f7;border-radius:4px;color:#4fc3f7;cursor:pointer;transition:all .2s}.random-btn:hover{background:#4fc3f7;color:#1a1a2e}.error-message{color:#f44336;font-size:12px;margin-top:6px}.examples-row{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}.examples-label{color:#888;font-size:13px}.example-btn{padding:4px 10px;background:#1a1a2e;border:1px solid #0f3460;border-radius:4px;color:#aaa;font-size:12px;cursor:pointer;transition:all .2s}.example-btn:hover{border-color:#4fc3f7;color:#4fc3f7}.example-btn.active{background:#0f3460;border-color:#4fc3f7;color:#4fc3f7}.code-panel{display:flex;flex-direction:column;min-width:0;height:100%;overflow:hidden;background:#171d2b;border:1px solid #294b72;border-radius:8px}.code-header{flex:0 0 auto;padding:8px 12px;background:#16213e;border-bottom:1px solid #294b72}.language-tabs{display:flex;gap:4px;overflow-x:auto}.language-tab{flex:0 0 auto;padding:6px 12px;background:transparent;border:1px solid transparent;border-radius:4px;color:#8997af;font-size:12px;cursor:pointer;transition:color .18s ease,border-color .18s ease,background .18s ease}.language-tab:hover,.language-tab:focus-visible{color:#7ddcff;outline:none}.language-tab:focus-visible{box-shadow:0 0 0 2px #7ddcff4d}.language-tab.active{color:#7ddcff;background:#203a59;border-color:#3984a8}.code-content{flex:1 1 auto;min-width:0;overflow:auto;padding:12px 0;scrollbar-gutter:stable}.code-block{width:max-content;min-width:100%;margin:0;color:#d9e3f4;font-family:Cascadia Code,SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:13px;line-height:1.75;tab-size:4}.code-block code{display:block}.code-line{display:grid;grid-template-columns:2.5rem max-content max-content;align-items:baseline;min-height:1.75em;padding:0 14px 0 10px;border-left:3px solid transparent;white-space:pre;transition:background .16s ease}.code-line.highlighted{background:#4fc3f721;border-left-color:#4fc3f7}.line-number{padding-right:14px;color:#65738a;text-align:right;-webkit-user-select:none;user-select:none}.line-content{color:#e6edf7;white-space:pre}.variable-annotation{margin-left:20px;color:#64cf8c;font-style:italic;white-space:pre}.keyword{color:#d2a8ff}.number{color:#ffad82}.string{color:#b8df91}.comment{color:#78889a;font-style:italic}@media(max-width:760px){.code-header{padding:6px 8px}.language-tab{padding:6px 9px}.code-block{font-size:12px}.code-line{grid-template-columns:2.2rem max-content;padding-right:10px}.variable-annotation{display:none}}@media(prefers-reduced-motion:reduce){.language-tab,.code-line{transition:none}}.canvas-container{flex:1;min-width:0;background:radial-gradient(circle at 72% 24%,rgba(79,195,247,.08),transparent 32%),linear-gradient(135deg,#0d1117,#161b22);position:relative;overflow:hidden;cursor:grab;-webkit-user-select:none;user-select:none}.canvas-container.is-dragging{cursor:grabbing}.canvas-svg{display:block;width:100%;height:100%}.canvas-svg text{-webkit-user-select:none;user-select:none}.cell-background,.reach-range,.reach-expansion,.position-marker,.jump-path,.result-group,.variable-panel,.description-box{vector-effect:non-scaling-stroke}.cell-background{transition:filter .24s ease}.cell.is-current .cell-background{filter:drop-shadow(0 0 8px rgba(79,195,247,.5))}.jump-path{animation:jump-dash 1.2s linear infinite}@keyframes jump-dash{to{stroke-dashoffset:-22}}.narrative-group{pointer-events:none}.narrative-card{vector-effect:non-scaling-stroke}.reset-view-btn{position:absolute;top:12px;right:14px;width:38px;height:38px;background:#1a1a2eeb;border:1px solid #294b72;border-radius:8px;color:#7ddcff;font-size:19px;cursor:pointer;transition:all .2s ease}.reset-view-btn:hover,.reset-view-btn:focus-visible{background:#294b72;border-color:#7ddcff;color:#fff;outline:none}.canvas-hint{position:absolute;bottom:12px;right:14px;color:#66738b;font-size:11px;pointer-events:none}@media(prefers-reduced-motion:reduce){.jump-path,.cell-background,.reach-expansion{animation:none;transition:none}}@media(max-width:760px){.canvas-hint{display:none}.canvas-description{font-size:12px}}.control-panel{background:#16213e;border-top:1px solid #294b72;padding:10px 16px 12px}.step-summary{min-height:26px;display:flex;align-items:center;gap:10px;max-width:1180px;margin:0 auto 8px;color:#b8c2d6;font-size:12px}.action-badge,.complete-badge{flex:0 0 auto;padding:4px 8px;border:1px solid #3d5d83;border-radius:999px;color:#b8c2d6;background:#294b7247;font-size:11px;font-weight:600}.action-check{color:#7ddcff;border-color:#3984a8}.action-update{color:#ffcb75;border-color:#9d7432}.action-fail{color:#ff7e7e;border-color:#a44949}.action-success,.complete-badge{color:#6ee39a;border-color:#3b9b64;background:#2a784d38}.step-description{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.step-description strong{color:#ffcb75;font-family:Cascadia Code,Consolas,monospace;font-weight:600}.complete-badge{margin-left:auto}.control-buttons{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}.control-btn{display:flex;align-items:center;gap:6px;min-height:36px;padding:8px 14px;background:#1a1a2e;border:1px solid #294b72;border-radius:7px;color:#d9e3f4;font-size:13px;cursor:pointer;transition:all .2s ease}.control-btn:hover:not(:disabled),.control-btn:focus-visible{border-color:#7ddcff;color:#7ddcff;outline:none;box-shadow:0 0 0 2px #7ddcff29}.control-btn:disabled{opacity:.42;cursor:not-allowed}.control-btn kbd{background:#294b72;padding:2px 6px;border-radius:3px;font-size:11px;font-family:inherit}.play-btn{background:#4fc3f7;color:#101827;border-color:#4fc3f7;font-weight:600}.play-btn:hover:not(:disabled),.play-btn:focus-visible{background:#8bdfff;border-color:#8bdfff;color:#101827}.play-btn kbd{background:#1a1a2e4d;color:#101827}.reset-btn{color:#ffb347;border-color:#9d7432}.reset-btn:hover:not(:disabled),.reset-btn:focus-visible{background:#ffb347;border-color:#ffb347;color:#101827}.speed-control{position:relative}.speed-btn{min-height:36px;padding:8px 12px;background:#1a1a2e;border:1px solid #294b72;border-radius:7px;color:#d9e3f4;font-size:13px;cursor:pointer;transition:all .2s ease}.speed-btn:hover,.speed-btn:focus-visible{border-color:#7ddcff;outline:none}.speed-menu{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%);min-width:86px;background:#1a1a2e;border:1px solid #294b72;border-radius:7px;padding:4px;display:flex;flex-direction:column;gap:2px;z-index:100;box-shadow:0 8px 20px #00000047}.speed-option{padding:7px 16px;background:transparent;border:none;border-radius:4px;color:#d9e3f4;font-size:13px;cursor:pointer;transition:background .2s ease;white-space:nowrap}.speed-option:hover,.speed-option:focus-visible{background:#294b72;outline:none}.speed-option.active{background:#4fc3f7;color:#101827}.step-indicator{color:#8997af;font-size:12px;white-space:nowrap}.progress-bar{height:8px;max-width:1180px;margin:0 auto;background:#1a1a2e;border:1px solid rgba(41,75,114,.6);border-radius:5px;cursor:pointer;position:relative;outline:none}.progress-bar:focus-visible{box-shadow:0 0 0 2px #7ddcff59}.progress-fill{height:100%;background:linear-gradient(90deg,#4fc3f7,#53d58a);border-radius:4px;transition:width .18s ease}.progress-handle{position:absolute;top:50%;transform:translate(-50%,-50%);width:16px;height:16px;background:#fff;border:2px solid #4fc3f7;border-radius:50%;cursor:grab;transition:transform .12s ease}.progress-handle:hover{transform:translate(-50%,-50%) scale(1.2)}.progress-bar:active .progress-handle{cursor:grabbing}@media(max-width:760px){.control-panel{padding:9px 10px 11px}.step-summary{align-items:flex-start;margin-bottom:7px}.step-description{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.control-buttons{gap:6px;margin-bottom:9px}.control-btn{min-height:34px;padding:7px 9px;font-size:12px}.control-btn kbd{display:none}.speed-btn{min-height:34px;padding:7px 9px;font-size:12px}}@media(prefers-reduced-motion:reduce){.control-btn,.speed-btn,.speed-option,.progress-fill{transition:none}}.chat-bubble-container{position:fixed;bottom:20px;right:20px;z-index:1000}.chat-bubble{display:flex;align-items:center;gap:6px;padding:10px 16px;background:linear-gradient(135deg,#07c160,#06ad56);border-radius:24px;color:#fff;cursor:pointer;box-shadow:0 4px 12px #07c16066;transition:all .3s}.chat-bubble:hover{transform:translateY(-2px);box-shadow:0 6px 16px #07c16080}.bubble-icon{font-size:18px}.bubble-text{font-size:13px;font-weight:500}.qr-popup{position:absolute;bottom:100%;right:0;margin-bottom:12px;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.qr-content{background:#fff;border-radius:12px;padding:16px;box-shadow:0 8px 24px #0000004d}.qr-image{width:180px;height:auto;border-radius:8px}.qr-hint{margin:12px 0 0;text-align:center;color:#333;font-size:13px;line-height:1.5}.qr-hint strong{color:#07c160}.app{display:flex;flex-direction:column;height:100vh;min-height:0;overflow:hidden;background:#0d1117}.main-content{flex:1;min-height:0;display:flex;overflow:hidden;gap:1px;background:#294b72}.code-section{width:min(360px,34vw);min-width:280px;max-width:400px;display:flex;flex-direction:column}.canvas-section{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;background:#0d1117}.learning-model{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:13px 22px 12px;background:linear-gradient(100deg,#17263a,#151e2c);border-bottom:1px solid rgba(79,195,247,.18)}.learning-model-copy{max-width:760px}.learning-model-kicker{display:block;margin-bottom:4px;color:#7ddcff;font-size:11px;font-weight:700}.learning-model-copy p{margin:0;color:#c8d4e6;font-size:13px;line-height:1.5}.learning-model-copy strong{color:#f2f7ff;font-family:Cascadia Code,Consolas,monospace}.learning-legend{flex:0 0 auto;display:flex;align-items:center;gap:16px;color:#99a7bb;font-size:11px;white-space:nowrap}.learning-legend span{display:inline-flex;align-items:center;gap:6px}.legend-dot{width:8px;height:8px;border-radius:50%}.legend-current{background:#4fc3f7;box-shadow:0 0 8px #4fc3f780}.legend-reach{background:#53d58a}.legend-end{background:#ffb347}.visualization-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 18px;color:#728198;font-size:11px;border-bottom:1px solid rgba(41,75,114,.36)}.toggle-code-btn{flex:0 0 auto;min-height:30px;padding:5px 11px;color:#7ddcff;background:#203a59a6;border:1px solid #365b7f;border-radius:6px;font-size:12px;cursor:pointer;transition:background .18s ease,border-color .18s ease}.toggle-code-btn:hover,.toggle-code-btn:focus-visible{background:#294b72;border-color:#7ddcff;outline:none}.toggle-code-btn:focus-visible{box-shadow:0 0 0 2px #7ddcff40}@media(max-width:900px){.learning-model{align-items:flex-start;flex-direction:column;gap:9px;padding:11px 14px}.learning-legend{flex-wrap:wrap;gap:8px 14px}}@media(max-width:760px){.main-content{flex-direction:column}.code-section{width:100%;min-width:0;max-width:none;max-height:42%}.learning-model-copy p{font-size:12px}.visualization-toolbar{padding:6px 10px}}@media(prefers-reduced-motion:reduce){.toggle-code-btn{transition:none}}