.choice-select-card{display:grid;gap:9px;padding:15px;border:1px solid var(--line);border-radius:15px;background:#fbfdff;font-weight:800}
.choice-select-card select{display:block;width:100%;padding:13px;border:1px solid #cfd9e7;border-radius:9px;background:white;color:#2d405a;font:inherit;font-weight:750}
.choice-select-card select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(79,70,229,.13);outline:0}
.token-list,.flow-palette,.flow-slots{display:flex;flex-wrap:wrap;gap:8px}
.token,.drop-zone,.flow-slot,.flow-symbol,.edge-choice{border:1px solid #cbd7e7;border-radius:8px;background:white;color:#2d405a;font-weight:800;cursor:pointer}
.token,.flow-symbol,.edge-choice{padding:10px 12px}
.token.selected,.flow-symbol.selected,.drop-zone.over,.edge-choice.selected{color:white;border-color:var(--primary);background:var(--primary)}
.drop-prompt{font-weight:900}
.drop-zone{width:100%;min-height:48px;padding:12px;text-align:left}
.flow-palette{margin-bottom:12px}
.flow-slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.flow-slots-vertical{grid-template-columns:1fr;max-width:520px;margin:0 auto;gap:18px}
.flow-slots-vertical .flow-slot{position:relative;min-height:78px}
.flow-slots-vertical .flow-slot:not(:last-child)::after{content:"";position:absolute;left:50%;bottom:-18px;width:2px;height:18px;background:#9fb3cc;transform:translateX(-50%)}
.flow-slot{min-height:86px;padding:12px;background:#f8fbff}
.flow-symbol{display:inline-grid;place-items:center;min-width:88px;min-height:46px;text-align:center}
.flow-symbol[data-shape=terminator]{border-color:#22c55e;background:#dcfce7;color:#14532d;border-radius:999px}
.flow-symbol[data-shape=process]{border-color:#3b82f6;background:#dbeafe;color:#1e3a8a;border-radius:8px}
.flow-symbol[data-shape=decision]{width:86px;min-height:86px;padding:10px;border-color:#f59e0b;background:#fef3c7;color:#7c2d12;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.flow-symbol[data-shape=input]{border-color:#8b5cf6;background:#ede9fe;color:#3b0764;border-radius:8px;transform:skew(-7deg)}
.tree-canvas-scroll{width:100%;margin-bottom:16px;overflow-x:auto;border:1px solid var(--line);border-radius:9px;background:#f8fbff}
.tree-canvas{position:relative;width:100%;min-height:120px;background-color:#f8fbff;background-image:radial-gradient(#d6e2f2 1px,transparent 1px);background-size:18px 18px}
.tree-canvas svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.tree-canvas line{stroke:#7895bb;stroke-width:2.2;vector-effect:non-scaling-stroke}
.tree-visual-node{position:absolute;z-index:2;width:86px;height:86px;padding:9px;transform:translate(-50%,-50%);display:grid;place-content:center;gap:4px;overflow:hidden;border:3px solid #75a4e3;border-radius:50%;color:#174f94;background:white;box-shadow:0 6px 16px rgba(40,75,119,.13);text-align:center;cursor:pointer}
.tree-level-legend{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px;color:#52647d;font-size:12px;font-weight:800}
.tree-level-legend span{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid var(--line);border-radius:999px;background:#fff}
.tree-level-legend i{width:13px;height:13px;border-radius:50%;display:inline-block}
.tree-level-0{border-color:#7c3aed!important;background:#ede9fe!important;color:#4c1d95!important}
.tree-level-1{border-color:#0ea5e9!important;background:#e0f2fe!important;color:#075985!important}
.tree-level-2{border-color:#10b981!important;background:#dcfce7!important;color:#065f46!important}
.tree-level-3{border-color:#f59e0b!important;background:#fef3c7!important;color:#92400e!important}
.tree-level-4{border-color:#ec4899!important;background:#fce7f3!important;color:#9d174d!important}
.tree-level-5{border-color:#64748b!important;background:#f1f5f9!important;color:#334155!important}
.tree-visual-node strong{max-width:68px;overflow-wrap:anywhere;font-size:11px;line-height:1.15}
.tree-visual-node small{color:#68809e;text-transform:capitalize;font-size:9px;font-weight:800}
.tree-visual-node:hover{border-color:var(--primary);background:var(--soft)}
.tree-visual-node.selected{color:white;border-color:#3730a3;background:var(--primary);transform:translate(-50%,-50%) scale(1.08)}
.tree-visual-node.selected small{color:#e7e9ff}
.graph-board{position:relative;min-height:360px;border:1px solid var(--line);border-radius:9px;background:#f8fafc;overflow:hidden}
.graph-board svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.graph-board line{stroke:#a8b7cb;stroke-width:1.2;vector-effect:non-scaling-stroke}
.graph-board marker path{fill:#a8b7cb}
.graph-node{position:absolute;width:74px;height:74px;display:grid;place-items:center;transform:translate(-50%,-50%);border:3px solid #82aee8;border-radius:50%;color:#1454a5;background:white;font-weight:900;z-index:2;cursor:pointer;box-shadow:0 7px 18px rgba(20,84,165,.16);font-size:16px}
.graph-node.selected{color:white;background:var(--primary);border-color:var(--primary)}
.sort-target{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;color:var(--muted);font-size:13px}
.sort-progress{display:grid;gap:8px;margin-bottom:16px}
.sort-progress>div:first-child{display:flex;justify-content:space-between;font-size:13px}
.sort-progress-track{height:9px;border-radius:999px;background:#e8eef7;overflow:hidden}
.sort-progress-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#7c72ff,var(--primary))}
.sort-board{align-items:flex-end}
.sort-box-board{align-items:center;min-height:auto}
.sort-bar{display:grid;place-items:end center;gap:6px;transition:.18s ease}
.sort-box{width:64px;height:58px;place-items:center;padding:10px;border-radius:14px;background:#fff;color:#1f2a44}
.sort-bar.comparing{background:#fff4dd;border-color:#e2a543;transform:translateY(-7px)}
.sort-bar.swapping,.sort-bar.selected{color:white;background:#b76b00;border-color:#b76b00;transform:translateY(-7px)}
.sort-bar.sorted{color:white;background:var(--green);border-color:var(--green)}
.sort-bar small{color:inherit;font-size:10px}
.sort-history{display:grid;gap:8px;margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:10px;background:#f8fbff}
.sort-history strong{font-size:13px}
.sort-history ol{display:grid;gap:7px;margin:0;padding-left:20px}
.sort-history li span{color:var(--muted);font-size:12px;margin-right:8px}
.sort-history li b{font-weight:900;color:#24335a}
.sort-explanation{display:grid;gap:4px;margin:14px 0;padding:13px 15px;border-radius:10px;background:#eef2ff;color:#24335a}
.sort-explanation span{text-transform:uppercase;font-size:10px;font-weight:900;letter-spacing:.08em}
.sort-legend{display:flex;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:12px}
.sort-legend span{display:inline-flex;align-items:center;gap:6px}
.sort-legend i{width:12px;height:12px;border-radius:4px;display:inline-block}
.legend-compare{background:#fff4dd;border:1px solid #e2a543}
.legend-swap{background:#b76b00}
.legend-sorted{background:var(--green)}
.material-card form{margin-top:16px}
.reading-media{margin:14px 0;padding:12px;border:1px solid var(--line);border-radius:10px;background:#f8fbff}
.reading-media img{display:block;width:100%;max-height:360px;object-fit:contain;border-radius:8px;background:white}
.reading-media figcaption{margin-top:8px;color:var(--muted);font-size:12px;text-align:center}
.object-block{background:linear-gradient(135deg,#2563eb,#4f46e5);box-shadow:0 8px 18px rgba(37,99,235,.18);transition:transform .22s ease,opacity .22s ease,box-shadow .22s ease}
.object-block:nth-of-type(2n){background:linear-gradient(135deg,#059669,#10b981)}
.object-block:nth-of-type(3n){background:linear-gradient(135deg,#d97706,#f59e0b)}
.object-block:nth-of-type(4n){background:linear-gradient(135deg,#7c3aed,#a78bfa)}
.object-block.entering{animation:simaObjectEnter .28s ease-out}
.object-block.leaving{animation:simaObjectLeave .22s ease-in forwards}
@keyframes simaObjectEnter{from{opacity:.2;transform:translateY(-16px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes simaObjectLeave{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(18px) scale(.92)}}
.hotspot-row-picker{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.hotspot-row-button{border:1px solid var(--line);border-radius:999px;background:white;color:#334155;padding:8px 12px;font-weight:800;cursor:pointer}
.hotspot-row-button.active{border-color:var(--primary);background:var(--primary);color:white}
@media(max-width:760px){.tree-visual-node{width:76px;height:76px}.graph-board{min-height:300px}.graph-node{width:64px;height:64px;font-size:14px}.flow-slots{grid-template-columns:1fr}.choice-select-card{padding:12px}.sort-target{align-items:flex-start;flex-direction:column}.sort-box{width:54px;height:52px}}