.tutorial-main{--rec-red:#dc2626;--rec-red-light:#fee2e2;--rec-red-border:#fecaca}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .tutorial-main{--rec-red:#f87171;--rec-red-light:rgba(248,113,113,0.14);--rec-red-border:rgba(248,113,113,0.3)}}:root[data-theme=dark] .tutorial-main{--rec-red:#f87171;--rec-red-light:rgba(248,113,113,0.14);--rec-red-border:rgba(248,113,113,0.3)}.rec-module{display:flex;flex-direction:column;gap:16px}.rec-toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px}.rec-field{display:flex;flex-direction:column;gap:6px}.rec-field-grow{flex:1 1;min-width:180px}.rec-field-label{font-size:12px;color:var(--graphite);text-transform:uppercase;letter-spacing:.05em}.rec-input,.rec-select{padding:9px 12px;font-size:15px;font-family:var(--mono);border:1px solid var(--line-strong);border-radius:var(--r-control);background:var(--paper);color:var(--ink);min-height:42px}.rec-input{width:90px}.rec-select{cursor:pointer;min-width:180px}.rec-input:focus,.rec-select:focus{outline:2px solid var(--accent);outline-offset:1px}.rec-slider{width:100%;accent-color:var(--accent)}.rec-btn-ghost{padding:9px 16px;min-height:42px;font-size:13px;font-weight:600;border:1px solid var(--line-strong);border-radius:var(--r-control);background:var(--paper);color:var(--graphite);cursor:pointer;transition:background .15s,color .15s}.rec-btn-ghost:hover{background:var(--panel-2);color:var(--ink)}.rec-note{font-size:13px;line-height:1.7;color:var(--graphite);max-width:74ch}.rec-intro-card code,.rec-note code{font-family:var(--mono);font-size:12px;background:var(--panel-2);padding:1px 5px;border-radius:4px;color:var(--ink)}.rec-chip{display:inline-block;margin:0 4px 4px 0;padding:1px 8px;border-radius:5px;font-family:var(--mono);font-size:12px;background:var(--rec-red-light);color:var(--rec-red);border:1px solid var(--rec-red-border)}.rec-intro-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));grid-gap:12px;gap:12px}.rec-intro-card{padding:14px 16px;border-radius:var(--r-control);border:1px solid var(--line);border-left-width:4px;background:var(--panel)}.rec-intro-card p{font-size:13px;line-height:1.6;color:var(--graphite);margin-top:6px}.rec-intro-base{border-left-color:var(--ink-ll);background:color-mix(in srgb,var(--ink-ll) 10%,transparent)}.rec-intro-rec{border-left-color:var(--ink-sort);background:color-mix(in srgb,var(--ink-sort) 10%,transparent)}.rec-intro-tag{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}.rec-intro-base .rec-intro-tag{color:var(--ink-ll)}.rec-intro-rec .rec-intro-tag{color:var(--ink-sort)}.rec-stack-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:14px;gap:14px}@media (max-width:640px){.rec-stack-grid{grid-template-columns:1fr}}.rec-arena{background-color:var(--panel-2);background-image:radial-gradient(circle at 1px 1px,var(--grid-major) 1px,transparent 0);background-size:20px 20px;border:1px solid var(--line);border-radius:var(--r-plate);padding:12px;min-height:220px;display:flex;flex-direction:column}.rec-arena-label{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--faint);margin-bottom:10px}.rec-frames{display:flex;flex-direction:column;gap:6px;flex:1 1;justify-content:flex-end}.rec-frame{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:8px;border:1.5px solid transparent;font-family:var(--mono);font-size:14px;color:var(--ink)}.rec-frame-label{font-weight:600}.rec-frame-tag{font-size:10px;font-family:var(--sans);text-transform:uppercase;letter-spacing:.05em;opacity:.75;margin-left:auto}.rec-frame-ret{font-size:13px;font-weight:700;padding-left:4px}.rec-frame-active{background:color-mix(in srgb,var(--ink-bit) 16%,var(--panel));border-color:var(--ink-bit)}.rec-frame-waiting{background:var(--panel-2);border-color:var(--line);color:var(--faint)}.rec-frame-base{background:color-mix(in srgb,var(--ink-ll) 16%,var(--panel));border-color:var(--ink-ll)}.rec-frame-returning{background:color-mix(in srgb,var(--accent) 16%,var(--panel));border-color:var(--accent)}.rec-arena-empty{margin:auto;font-size:13px;color:var(--faint)}.rec-log{font-family:var(--mono);font-size:12.5px;line-height:1.5;overflow-y:auto;max-height:200px;display:flex;flex-direction:column;gap:3px}.rec-log-line{padding:3px 8px;border-radius:5px;border-left:3px solid transparent}.rec-log-call{border-left-color:var(--ink-bit);color:var(--graphite)}.rec-log-base{border-left-color:var(--ink-ll);color:var(--ink);background:color-mix(in srgb,var(--ink-ll) 14%,transparent)}.rec-log-return{border-left-color:var(--accent);color:var(--graphite)}.rec-log-done{border-left-color:var(--ink-sort);color:var(--ink);background:color-mix(in srgb,var(--ink-sort) 14%,transparent);font-weight:600}.rec-answer{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:var(--r-control);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 14%,transparent),color-mix(in srgb,var(--ink-bit) 14%,transparent));border:1px solid var(--line)}.rec-answer-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--graphite)}.rec-answer-val{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--ink)}.rec-tree-wrap{overflow-x:auto;display:flex;justify-content:center;background-color:var(--panel-2);background-image:radial-gradient(circle at 1px 1px,var(--grid-major) 1px,transparent 0);background-size:20px 20px;border:1px solid var(--line);border-radius:var(--r-plate);padding:8px}.rec-tree{display:block;max-width:100%;height:auto}.rec-tree-edge{stroke:var(--line-strong);stroke-width:1.5}.rec-tree-text{fill:#fff;font-family:var(--mono);font-size:13px;font-weight:700;text-anchor:middle}.rec-stats{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:10px;gap:10px}.rec-stat{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 10px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-control)}.rec-stat-num{font-family:var(--mono);font-size:24px;font-weight:700;color:var(--accent)}.rec-stat-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint)}.rec-bars{display:flex;flex-direction:column;gap:12px;padding:16px;background-color:var(--panel-2);background-image:radial-gradient(circle at 1px 1px,var(--grid-major) 1px,transparent 0);background-size:20px 20px;border:1px solid var(--line);border-radius:var(--r-plate)}.rec-bar-row{display:grid;grid-template-columns:72px 1fr 56px;align-items:center;grid-gap:12px;gap:12px}.rec-bar-name{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--graphite)}.rec-bar-track{height:22px;background:var(--panel);border:1px solid var(--line);border-radius:6px;overflow:hidden}.rec-bar{height:100%;border-radius:6px;min-width:4px}.rec-bar-o1{background:var(--ink-ll)}.rec-bar-olog{background:var(--ink-walk)}.rec-bar-on{background:var(--ink-sort)}.rec-bar-on2{background:var(--rec-red)}.rec-bar-val{font-family:var(--mono);font-size:13px;font-weight:600;text-align:right;color:var(--ink)}.rec-table{width:100%;border-collapse:collapse;font-size:13px}.rec-table td,.rec-table th{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line)}.rec-table th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);font-weight:600}.rec-table-eg code{font-family:var(--mono);font-size:12px;color:var(--graphite)}.rec-cx{font-family:var(--mono);font-weight:700;padding:2px 7px;border-radius:5px}.rec-cx-fast{background:color-mix(in srgb,var(--ink-ll) 14%,transparent);color:var(--ink-ll)}.rec-cx-ok{background:color-mix(in srgb,var(--ink-sort) 14%,transparent);color:var(--ink-sort)}.rec-cx-slow{background:var(--rec-red-light);color:var(--rec-red)}.rec-badge{font-size:11px;font-weight:600;padding:2px 8px;border-radius:5px}.rec-badge-fast{background:color-mix(in srgb,var(--ink-ll) 14%,transparent);color:var(--ink-ll)}.rec-badge-ok{background:color-mix(in srgb,var(--ink-sort) 14%,transparent);color:var(--ink-sort)}.rec-badge-slow{background:var(--rec-red-light);color:var(--rec-red)}.rec-anno-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));grid-gap:12px;gap:12px}.rec-anno{display:flex;flex-direction:column;gap:10px;padding:14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-sm)}.rec-reveal-btn{align-self:flex-start;padding:7px 14px;font-size:13px;font-weight:600;border:1px solid var(--accent);border-radius:var(--r-control);background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);cursor:pointer;transition:background .15s,color .15s}.rec-reveal-btn:hover{background:var(--accent);color:#fff}.rec-anno-body{overflow:hidden}.rec-bigo{display:inline-block;font-family:var(--mono);font-size:16px;font-weight:700;padding:3px 10px;border-radius:6px;margin-bottom:8px}.rec-bigo-fast{background:color-mix(in srgb,var(--ink-ll) 14%,transparent);color:var(--ink-ll)}.rec-bigo-linear{background:color-mix(in srgb,var(--ink-sort) 14%,transparent);color:var(--ink-sort)}.rec-bigo-slow{background:var(--rec-red-light);color:var(--rec-red)}.rec-anno-why{font-size:13px;line-height:1.6;color:var(--graphite);margin-bottom:8px}.rec-anno-eg{font-family:var(--mono);font-size:11.5px;line-height:1.5;color:var(--graphite);background:var(--panel-2);padding:8px 10px;border-radius:6px;overflow-x:auto;white-space:pre}.rec-steps{display:flex;flex-direction:column;gap:8px}.rec-step-card{border:1px solid var(--line);border-radius:var(--r-control);background:var(--panel);overflow:hidden}.rec-step-card.open{border-color:var(--accent)}.rec-step-head{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;background:none;border:none;cursor:pointer;text-align:left;color:var(--ink)}.rec-step-num{font-family:var(--mono);font-size:13px;font-weight:700;color:#fff;background:var(--accent);width:30px;height:30px;flex:none;display:inline-flex;align-items:center;justify-content:center;border-radius:8px}.rec-step-titles{display:flex;flex-direction:column;gap:2px}.rec-step-title{font-size:15px;font-weight:600}.rec-step-short{font-size:12.5px;color:var(--graphite)}.rec-step-chev{margin-left:auto;font-size:20px;color:var(--faint);font-family:var(--mono)}.rec-step-body{overflow:hidden;padding:0 16px 16px}.rec-step-text{font-size:13px;line-height:1.6;color:var(--graphite);margin-bottom:10px}.rec-worked{margin-top:20px;display:flex;flex-direction:column;gap:10px}.rec-worked-label{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);font-weight:600}@media (prefers-reduced-motion:reduce){.rec-anno-body,.rec-bar,.rec-frame,.rec-step-body{transition:none!important;animation:none!important}}