.dropdown-select[data-v-0b187cc1]{position:relative;width:100%}.dropdown-trigger[data-v-0b187cc1]{display:flex;width:100%;height:40px;padding:0 12px 0 14px;align-items:center;justify-content:space-between;border:1px solid #dfe4f0;border-radius:11px;color:#33405a;background:#f8f9fd;font-weight:700;box-shadow:inset 0 1px #fffc;transition:color .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease}.dropdown-trigger[data-v-0b187cc1]:hover{color:var(--primary);border-color:#c5ccff;background:var(--primary-soft)}.dropdown-trigger[data-v-0b187cc1]:focus-visible{outline:3px solid rgba(82,98,245,.2);outline-offset:2px}.dropdown-trigger svg[data-v-0b187cc1]{color:#7d889e;transition:transform .16s ease,color .16s ease}.open .dropdown-trigger[data-v-0b187cc1]{color:var(--primary);border-color:#aeb8ff;background:var(--primary-soft);box-shadow:0 0 0 3px #5262f51a}.open .dropdown-trigger svg[data-v-0b187cc1]{color:var(--primary);transform:rotate(180deg)}.dropdown-menu[data-v-0b187cc1]{position:absolute;z-index:20;top:calc(100% + 7px);right:0;left:0;display:grid;gap:3px;max-height:min(370px,60vh);padding:6px;overflow-y:auto;scrollbar-color:#c8ceef transparent;scrollbar-width:thin;border:1px solid #e0e4ef;border-radius:13px;background:#fffffffa;box-shadow:0 14px 36px #22305729}.dropdown-menu[data-v-0b187cc1]::-webkit-scrollbar{width:6px}.dropdown-menu[data-v-0b187cc1]::-webkit-scrollbar-thumb{border-radius:999px;background:#c8ceef}.dropdown-group[data-v-0b187cc1]{margin:7px 9px 2px;color:#9aa4b7;font-size:10px;font-weight:700;letter-spacing:.06em}.dropdown-group[data-v-0b187cc1]:first-child{margin-top:3px}.dropdown-option[data-v-0b187cc1]{display:flex;width:100%;height:36px;padding:0 9px;align-items:center;justify-content:space-between;border:0;border-radius:8px;color:#56627a;background:transparent;font-size:12px;text-align:left}.dropdown-option.active[data-v-0b187cc1]{color:var(--primary);background:#f1f3ff}.dropdown-option.selected[data-v-0b187cc1]{color:var(--primary);font-weight:700}:root{font-family:Inter,PingFang SC,Microsoft YaHei,system-ui,sans-serif;color:#111d3c;background:#f5f7fc;font-synthesis:none;text-rendering:optimizeLegibility;--primary: #5262f5;--primary-dark: #3e4de1;--primary-soft: #eef1ff;--muted: #74809a;--line: #e3e8f2;--surface: rgba(255, 255, 255, .95);--compare: #9860ed;--pivot: #fb922c;--sorted: #35b77b}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at 50% 0%,rgba(91,106,245,.09),transparent 34rem),linear-gradient(180deg,#fafbff,#f3f6fc)}button,input,select,textarea{font:inherit}button,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid rgba(82,98,245,.3);outline-offset:3px}.page-shell{display:flex;width:min(1500px,calc(100% - 56px));min-height:100vh;margin:0 auto;flex-direction:column}.site-header{display:flex;align-items:center;justify-content:space-between;height:76px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}.brand strong{font-size:21px}.brand-mark{display:flex;align-items:flex-end;gap:3px;width:42px;height:42px;padding:10px;border-radius:12px;background:var(--primary-soft)}.brand-mark i{width:5px;border-radius:3px;background:var(--primary)}.brand-mark i:nth-child(1){height:10px}.brand-mark i:nth-child(2){height:17px}.brand-mark i:nth-child(3){height:23px;background:var(--sorted)}.local-badge{padding:5px 9px;border-radius:999px;color:var(--primary);background:var(--primary-soft);font-size:12px;font-weight:700}.github-link{display:grid;width:44px;height:44px;place-items:center;color:#172442;border-radius:12px;transition:color .15s,background .15s}.github-link:hover{color:var(--primary);background:var(--primary-soft)}main{display:flex;min-height:0;padding:24px 0 0;flex:1}.workspace{display:grid;width:100%;grid-template-areas:"settings visualizer" "teaching visualizer";grid-template-columns:minmax(340px,380px) minmax(0,1fr);grid-template-rows:auto 1fr;gap:18px;align-items:start;flex:1}.card{border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:0 18px 48px #29365b12}.settings-card,.teaching-card{padding:22px}.settings-card{grid-area:settings}.section-title{display:flex;align-items:center;gap:10px}.section-title h2{display:flex;align-items:center;gap:9px;margin:0;font-size:18px}.section-title h2:before{width:4px;height:18px;border-radius:99px;background:var(--primary);content:""}.algorithm-select{display:flex;flex-direction:column;gap:9px;margin-top:22px;color:#526079;font-size:12px;font-weight:700}.field-label{display:block;margin:22px 0 9px;color:#526079;font-size:12px;font-weight:700}.mode-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.mode-buttons button{height:42px;border:1px solid var(--line);border-radius:11px;color:#5d6980;background:#fff;font-size:13px}.mode-buttons button.selected{color:var(--primary);border-color:#bfc7ff;background:var(--primary-soft);font-weight:700}.control-grid{display:grid;grid-template-columns:1fr .75fr;gap:14px;margin-top:18px}.control-grid>label,.control-grid>.control-field{display:flex;flex-direction:column;gap:9px;color:#58647b;font-size:12px;font-weight:700}.control-grid>label>span,.control-grid>.control-field>span{display:flex;justify-content:space-between}.control-grid b{color:var(--primary)}input[type=range]{width:100%;accent-color:var(--primary)}.regenerate{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;margin-top:18px;border:1px solid #cbd1ff;border-radius:11px;color:var(--primary);background:var(--primary-soft);font-weight:700}.regenerate:hover{border-color:#aeb7ff;background:#e5e9ff}.custom-data{margin-top:15px;border-top:1px solid var(--line);padding-top:12px}.custom-data summary{color:#536078;cursor:pointer;font-size:12px;font-weight:700}.custom-data textarea{width:100%;margin-top:10px;padding:9px 11px;resize:vertical;border:1px solid var(--line);border-radius:9px;color:#26324a;background:#fafbfe;font-size:12px}.custom-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#939caf;font-size:10px}.custom-actions button{padding:6px 10px;border:0;border-radius:8px;color:var(--primary);background:var(--primary-soft);font-size:11px;font-weight:700}.input-error{margin:7px 0 0;color:#d94757;font-size:11px}.teaching-card{grid-area:teaching;padding:0;overflow:hidden}.teaching-card[open]{display:flex;align-self:stretch;flex-direction:column}.teaching-card>summary{display:flex;min-height:62px;padding:0 22px;align-items:center;gap:10px;color:#26334e;cursor:pointer;list-style:none;font-size:16px;font-weight:800}.teaching-card>summary::-webkit-details-marker{display:none}.teaching-card>summary:before{width:4px;height:17px;border-radius:99px;background:var(--primary);content:""}.teaching-card>summary small{margin-left:auto;color:var(--muted);font-size:11px;font-weight:600}.teaching-card>summary svg{color:#8490a7;transition:transform .16s}.teaching-card[open]>summary svg{transform:rotate(180deg)}.teaching-content{display:grid;grid-template-rows:auto minmax(0,1fr);gap:14px;padding:0 22px 22px;flex:1}.teaching-card[open]>.teaching-content{min-height:calc(100% - 62px)}.pseudocode{display:flex;height:100%;margin:0;padding:8px;flex-direction:column;justify-content:space-evenly;list-style:none;border:1px solid var(--line);border-radius:12px;background:#f8f9fd;counter-reset:line}.pseudocode li{display:flex;gap:9px;min-height:30px;padding:6px 8px;border-radius:7px;color:#63708a;font:11px/1.55 Consolas,Microsoft YaHei,monospace}.pseudocode li>span{width:14px;flex:0 0 auto;color:#a6afc0}.pseudocode li.active{color:#3341b5;background:#e8ebff;font-weight:700}.algorithm-summary{margin:0;color:var(--muted);font-size:12px;line-height:1.8}.visualizer-card{grid-area:visualizer;display:flex;min-height:620px;padding:22px 24px 18px;align-self:stretch;flex-direction:column}.visualizer-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.legend{display:flex;gap:18px;color:#67738b;font-size:11px}.legend span{display:flex;align-items:center;gap:6px}.legend span:before{width:9px;height:9px;border-radius:50%;background:var(--compare);content:""}.legend .active-dot:before{background:var(--pivot)}.legend .writing-dot:before{background:#20a9b3}.legend .pivot-dot:before{background:var(--pivot)}.legend .sorted-dot:before{background:var(--sorted)}.current-step-banner{display:flex;min-height:44px;margin-top:17px;padding:9px 13px;align-items:center;gap:12px;border-radius:10px;color:#3f4ab0;background:var(--primary-soft)}.current-step-banner span{flex:0 0 auto;color:#7b85b7;font-size:10px;font-weight:700}.current-step-banner strong{font-size:12px}.bars{display:flex;min-height:342px;margin:18px 0 12px;padding:22px 8px 0;flex:1;align-items:flex-end;gap:clamp(2px,.55vw,9px);border-bottom:1px solid var(--line)}.bar-slot{position:relative;display:flex;min-width:0;height:100%;flex:1;align-items:center;justify-content:flex-end;flex-direction:column}.bar{display:block;width:100%;max-width:34px;min-width:3px;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#5ca2ff,#387fec);box-shadow:0 4px 10px #327eea2b;transition:height .18s ease,background .16s ease}.bar.comparing{background:linear-gradient(180deg,#ad74f3,var(--compare))}.bar.active{background:linear-gradient(180deg,#ffba58,#f48a28)}.bar.writing{background:linear-gradient(180deg,#4ccbd3,#159ca8)}.bar.pivot{background:linear-gradient(180deg,#ffad43,var(--pivot))}.bar.sorted{background:linear-gradient(180deg,#55cc91,var(--sorted))}.bar-value{position:absolute;bottom:calc(var(--bar-height, 0%) + 2px);color:#50607d;font-size:9px;font-weight:700}.bar-slot small{height:18px;padding-top:5px;color:#99a3b6;font-size:8px}.auxiliary-panel{margin:2px 0 12px;padding:12px;border:1px solid #e4e8f4;border-radius:12px;background:#fafbfe}.auxiliary-panel>strong{display:block;margin-bottom:9px;color:#59667f;font-size:10px}.auxiliary-groups{display:flex;gap:8px;padding-bottom:3px;overflow-x:auto;scrollbar-color:#cbd1e8 transparent;scrollbar-width:thin}.auxiliary-group{min-width:64px;padding:7px;border-radius:9px;background:#fff;box-shadow:0 3px 10px #303f690f}.auxiliary-group>span{display:block;margin-bottom:5px;color:#8a95aa;font-size:9px;text-align:center;white-space:nowrap}.auxiliary-group>div{display:flex;min-height:22px;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap}.auxiliary-group i{display:grid;min-width:23px;height:23px;padding:0 4px;place-items:center;border-radius:6px;color:#4655cf;background:var(--primary-soft);font-size:9px;font-style:normal;font-weight:700}.auxiliary-group small{color:#a0a8b8;font-size:9px}.playback{display:flex;align-items:center;justify-content:center;gap:12px;margin:7px 0 18px}.playback button{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:80px;height:40px;padding:0 14px;border:1px solid var(--line);border-radius:11px;color:#526078;background:#f9faff;font-size:12px;font-weight:700}.playback button:disabled{cursor:not-allowed;opacity:.42}.playback .play-button{min-width:58px;width:58px;height:58px;padding:0;border:5px solid #e5e8ff;border-radius:50%;color:#fff;background:var(--primary);box-shadow:0 9px 20px #5262f540}.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.stats div{display:flex;align-items:center;justify-content:center;gap:7px;min-height:68px;border-right:1px solid var(--line)}.stats div:last-child{border-right:0}.stats span{color:#8a95a8;font-size:10px}.stats strong{color:var(--primary);font-size:17px}.stats div:nth-child(2) strong{color:var(--compare)}.stats div:nth-child(3) strong{color:#368be4}.stats div:last-child strong{color:#182541}.complexity{display:flex;justify-content:center;gap:22px;padding-top:15px;color:#7f8aa0;font-size:10px}.complexity b{color:#44516a}footer{display:flex;align-items:center;justify-content:center;gap:9px;min-height:62px;color:#8a95a9;font-size:11px}footer a{display:inline-flex;color:inherit;transition:color .15s}footer a:hover{color:var(--primary)}@media(max-width:1050px){.page-shell{width:min(920px,calc(100% - 32px))}.workspace{grid-template-areas:"settings" "visualizer" "teaching";grid-template-columns:1fr;grid-template-rows:auto}.visualizer-card{min-height:590px}}@media(max-width:700px){.page-shell{width:calc(100% - 20px)}.site-header{height:66px}.brand{gap:8px}.brand strong{font-size:17px}.brand-mark{width:36px;height:36px;padding:8px}.local-badge{display:none}main{padding-top:16px}.settings-card,.teaching-card,.visualizer-card{padding:18px 15px;border-radius:16px}.teaching-card{padding:0}.teaching-card>summary{min-height:58px;padding:0 15px}.teaching-card[open]>.teaching-content{min-height:0}.teaching-content{grid-template-columns:1fr;gap:12px;padding:0 15px 15px}.control-grid{grid-template-columns:1fr .7fr}.visualizer-head{align-items:flex-start;flex-direction:column}.legend{gap:12px}.current-step-banner{align-items:flex-start;flex-direction:column;gap:3px}.bars{height:300px;min-height:0;flex:none;gap:2px;margin-top:12px;padding-right:0;padding-left:0}.bar{border-radius:4px 4px 1px 1px}.bar-value,.bar-slot small{display:none}.playback{gap:6px}.playback button{min-width:0;height:38px;padding:0 9px;font-size:11px}.playback .play-button{width:52px;height:52px;flex:0 0 52px}.stats{grid-template-columns:1fr 1fr}.stats div:nth-child(2){border-right:0}.stats div:nth-child(-n+2){border-bottom:1px solid var(--line)}.stats div{min-height:58px}.complexity{flex-wrap:wrap;gap:8px 18px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}