.main-content{max-width:none;padding:12px 10px}.python-playground{max-width:none;margin:0;padding:0 10px 20px;--pp-code-font-size: 16px;--pp-trace-font-size: 14px;--pp-output-font-size: 14px;touch-action:manipulation}.playground-header{text-align:center;margin-bottom:8px}.visibility-toggles{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}.code-visibility-toggle{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:999px;font-size:14px;font-weight:600;color:#334155;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.code-visibility-toggle input[type=checkbox]{cursor:pointer;width:16px;height:16px}.code-visibility-toggle:hover{border-color:#2563eb;color:#2563eb}.ratio-toggle{font-family:inherit;background:#f8fafc}.playground-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-bottom:30px;align-items:stretch}.playground-content.code-hidden,.playground-content.right-hidden{grid-template-columns:1fr}.panel-hidden{display:none!important}.code-section{min-width:0;min-height:0;display:flex;flex-direction:column}.right-column{display:grid;grid-template-rows:1fr 1fr;align-items:stretch;gap:20px;min-width:0;min-height:0}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;padding:10px 15px;background:#f8fafc;border-radius:8px;border-left:4px solid #2563eb;flex-wrap:wrap;gap:10px}.section-header h3{margin:0;color:#1e293b;font-size:clamp(1rem,2.5vw,1.25rem);white-space:nowrap}.controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.status{font-size:14px;color:#64748b;display:flex;flex-direction:column;gap:8px;align-items:flex-end}.error-lang-toggle{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;color:#475569;-webkit-user-select:none;-moz-user-select:none;user-select:none}.error-lang-toggle input[type=checkbox]{cursor:pointer;width:16px;height:16px}.error-lang-toggle span{white-space:nowrap}.error-lang-toggle:hover{color:#1e293b}.font-size-control{display:flex;align-items:center;gap:8px;font-size:13px;color:#475569;margin-bottom:10px;flex-wrap:wrap}.font-size-control label{white-space:nowrap}.font-size-control input[type=range]{flex:1;min-width:100px;max-width:220px;cursor:pointer}.font-size-value{min-width:42px;text-align:right;font-weight:600;color:#1e293b}#code-editor-container{width:100%;flex:1;min-height:60px;border:2px solid #e2e8f0;border-radius:8px;overflow:hidden;transition:border-color .3s;display:flex;flex-direction:column}#code-editor{flex:1;min-height:0;display:flex;flex-direction:column}#code-editor-container:focus-within{border-color:#2563eb}.CodeMirror{height:100%!important;font-family:Monaco,Menlo,Consolas,Liberation Mono,Courier New,monospace;font-size:var(--pp-code-font-size, 16px)!important;line-height:1.5;border-radius:6px;flex:1;-webkit-text-size-adjust:100%}.CodeMirror-scroll{min-height:100%!important}.CodeMirror-lines{padding:4px 0}.CodeMirror-focused .CodeMirror-cursor{border-left:2px solid #2563eb}.CodeMirror .active-trace-line{background:#2563eb52!important;box-shadow:inset 4px 0 #2563eb}@keyframes trace-step-pulse{0%{filter:brightness(2.2)}to{filter:brightness(1)}}.CodeMirror .active-trace-line.trace-line-flash{animation:trace-step-pulse .5s ease-out}.CodeMirror .CodeMirror-selected,.CodeMirror.cm-s-material-darker .CodeMirror-selected,.cm-s-material-darker .CodeMirror-selected,div.CodeMirror-selected,.CodeMirror-selectedtext{background:#80cbc466!important}.CodeMirror-focused .CodeMirror-selected,.CodeMirror.cm-s-material-darker.CodeMirror-focused .CodeMirror-selected,.cm-s-material-darker.CodeMirror-focused .CodeMirror-selected{background:#80cbc480!important}.CodeMirror pre.CodeMirror-line>span::-moz-selection,.CodeMirror pre.CodeMirror-line>span>span::-moz-selection,.CodeMirror-line::-moz-selection,.CodeMirror-line>span::-moz-selection,.CodeMirror-line>span>span::-moz-selection,.cm-s-material-darker .CodeMirror-line::-moz-selection,.cm-s-material-darker .CodeMirror-line>span::-moz-selection,.cm-s-material-darker .CodeMirror-line>span>span::-moz-selection{background:#80cbc466!important}.CodeMirror pre.CodeMirror-line>span::selection,.CodeMirror pre.CodeMirror-line>span>span::selection,.CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection,.cm-s-material-darker .CodeMirror-line::selection,.cm-s-material-darker .CodeMirror-line>span::selection,.cm-s-material-darker .CodeMirror-line>span>span::selection{background:#80cbc466!important}#fallback-editor{width:100%;height:400px;padding:15px;border:none;outline:none;font-family:Monaco,Menlo,Courier New,monospace;font-size:16px;line-height:1.5;resize:vertical;-webkit-text-size-adjust:100%}#output-area{height:220px;flex-grow:1;min-height:0;padding:15px;background:#1e293b;color:#e2e8f0;border-radius:8px;font-family:Monaco,Menlo,Courier New,monospace;font-size:var(--pp-output-font-size, 14px);line-height:1.5;overflow-y:auto;white-space:pre-wrap}.output-line{margin-bottom:4px}.output-line.stderr{color:#ef4444}.output-line.info{color:#10b981}.loading,.ready,.running-msg{color:#64748b;font-style:italic;text-align:center;padding:20px}.running-msg{color:#3b82f6;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.error{color:#ef4444;padding:20px;text-align:center}.btn{padding:8px 12px;border:none;border-radius:6px;font-weight:500;cursor:pointer;transition:all .3s;font-size:clamp(.75rem,1.8vw,.875rem);white-space:nowrap;min-width:-moz-fit-content;min-width:fit-content}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:#2563eb;color:#fff}.btn-primary:hover:not(:disabled){background:#1d4ed8}.btn-secondary{background:#64748b;color:#fff}.btn-secondary:hover{background:#475569}.btn-success{background:#22c55e;color:#fff}.btn-success:hover{background:#16a34a}.btn-info{background:#06b6d4;color:#fff}.btn-info:hover{background:#0891b2}.help-section{background:#f8fafc;padding:20px;border-radius:8px;border-left:4px solid #10b981}.help-section h3{color:#1e293b;margin-bottom:15px}.help-section ul{list-style:none;padding:0}.help-section li{padding:8px 0;border-bottom:1px solid #e2e8f0}.help-section li:last-child{border-bottom:none}.debug-panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-bottom:30px}.debug-panel{background:#fff;border:2px solid #e2e8f0;border-radius:8px;overflow:hidden}.debug-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:12px 15px}.debug-header h3{margin:0;font-size:1rem}.debug-content{padding:15px;min-height:200px;max-height:400px;overflow-y:auto;font-family:Monaco,Menlo,Courier New,monospace;font-size:14px}.debug-empty{color:#94a3b8;text-align:center;padding:40px 20px;font-style:italic}.loop-list{display:flex;flex-direction:column;gap:8px}.loop-group{margin-bottom:20px;background:#fffbeb;padding:15px;border-radius:10px;border:2px solid #f59e0b}.loop-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.loop-header-line{font-weight:700;color:#92400e;font-size:15px}.loop-iteration-count{background:#f59e0b;color:#fff;padding:4px 12px;border-radius:12px;font-weight:600;font-size:13px}.loop-header-code{background:#fff;padding:8px 10px;border-radius:6px;font-family:Monaco,Menlo,Courier New,monospace;font-size:13px;color:#92400e;border:1px solid #fde68a;margin-bottom:12px;font-weight:600}.loop-item{background:#fef3c7;padding:12px;border-radius:8px;border-left:4px solid #fbbf24;display:flex;flex-direction:column;gap:8px;margin-bottom:8px}.loop-item:last-child{margin-bottom:0}.loop-info{display:flex;justify-content:space-between;align-items:center;gap:10px}.loop-line{font-weight:600;color:#92400e;min-width:50px}.loop-iterations{color:#f59e0b;font-size:14px;letter-spacing:2px;flex:1}.loop-count{color:#b45309;font-weight:600;background:#fff;padding:4px 10px;border-radius:4px;font-size:13px;white-space:nowrap}.loop-progress-bar{height:6px;background:#fde68a;border-radius:3px;overflow:hidden}.loop-progress-fill{height:100%;background:linear-gradient(90deg,#f59e0b,#d97706);transition:width .3s ease;border-radius:3px}.loop-code{background:#fff;padding:8px 10px;border-radius:4px;font-family:Monaco,Menlo,Courier New,monospace;font-size:13px;color:#1e293b;border:1px solid #fde68a;overflow-x:auto;white-space:pre;line-height:1.4}.recursion-list{display:flex;flex-direction:column;gap:12px}.recursion-item{background:#f0f9ff;padding:12px;border-radius:8px;border-left:4px solid #3b82f6}.recursion-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:10px;flex-wrap:wrap}.recursion-name{font-weight:700;color:#1e40af;font-size:15px}.recursion-stats{display:flex;gap:6px;flex-wrap:wrap}.stat-badge{background:#fff;padding:3px 8px;border-radius:4px;font-size:12px;color:#475569;font-weight:500;border:1px solid #dbeafe}.stat-badge.depth{background:#dbeafe;color:#1e40af;font-weight:600}.recursion-depth-bar{background:#dbeafe;border-radius:4px;padding:6px 8px;overflow-x:auto}.depth-fill{color:#3b82f6;font-weight:700;font-family:monospace;letter-spacing:1px;white-space:nowrap;font-size:14px}.output-section{display:flex;flex-direction:column;flex-grow:1;min-width:0;min-height:0}.trace-section{background:#fff;border:2px solid #e2e8f0;border-radius:8px;padding:15px;display:flex;flex-direction:column;flex-grow:1;min-width:0;min-height:0}.orientation-toggle{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;color:#475569;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.orientation-toggle input[type=checkbox]{cursor:pointer;width:16px;height:16px}.playback-controls{display:flex;align-items:center;gap:8px;margin:10px 0;flex-wrap:wrap}.btn-play{background:#2563eb;color:#fff;border:none;border-radius:6px;padding:6px 10px;cursor:pointer;font-size:16px;line-height:1;transition:background .2s}.btn-play:hover{background:#1d4ed8}#trace-step-indicator{font-size:14px;color:#fff;background:#2563eb;padding:4px 12px;border-radius:999px;margin-left:auto;white-space:nowrap;font-weight:700;letter-spacing:.02em}.trace-warning{background:#fef3c7;color:#92400e;border:1px solid #fbbf24;border-radius:6px;padding:8px 12px;font-size:13px;margin-bottom:10px}.trace-table-container{overflow:auto;height:360px;flex-grow:1;min-height:0;border:1px solid #e2e8f0;border-radius:8px}.trace-table{border-collapse:collapse;width:-moz-max-content;width:max-content;min-width:100%;font-size:var(--pp-trace-font-size, 14px);font-family:Monaco,Menlo,Courier New,monospace}.trace-table th,.trace-table td{border:1px solid #e2e8f0;padding:6px 10px;text-align:center;white-space:nowrap}.trace-table thead th{position:sticky;top:0;background:#f8fafc;z-index:2;cursor:pointer}.trace-corner{position:sticky;left:0;top:0;z-index:3;background:#f1f5f9!important;text-align:left;width:1%}.trace-var-name,.trace-step-row-header{position:sticky;left:0;background:#f8fafc;z-index:1;font-weight:600;color:#1e293b;text-align:left;width:1%}.trace-step-row-header{cursor:pointer}.trace-step-header,.trace-var-header{color:#475569;font-weight:600}.trace-line-no{font-size:1em;color:#94a3b8;font-weight:400}.trace-cell{cursor:pointer;color:#1e293b}.trace-cell-empty{color:#cbd5e1}.trace-cell-unchanged{color:#94a3b8}.trace-cell-changed{background:#2563eb1f;color:#1e3a8a;font-weight:700}.active-step{background:#2563eb38!important;box-shadow:inset 0 0 0 2px #2563eb}@media (max-width: 768px){.playground-content,.debug-panels{grid-template-columns:1fr}.section-header{flex-direction:column;align-items:flex-start;gap:12px}.section-header h3{font-size:1.1rem}.controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:6px;width:100%}.btn{padding:10px 8px;font-size:.8rem}#code-editor-container{flex:none;height:350px;min-height:0}.CodeMirror{height:350px!important}.CodeMirror-scroll{min-height:350px!important}#output-area{height:200px}.debug-content{max-height:300px}#trace-step-indicator{margin-left:0}.trace-table-container{height:280px}}@media (max-width: 480px){.controls{grid-template-columns:repeat(2,1fr)}.btn{padding:12px 6px;font-size:.75rem}}