:root{
  --accent:#ff7b00;--accent-2:#ff9a3c;--accent-dark:#e66a00;
  --ink:#1b1b21;--ink-sub:#5b5b66;--ink-dim:#9a9aa6;
  --card:#ffffff;--line:#ececf0;--bg:#fafafb;
  --ok:#16a34a;--warn:#f59e0b;--warn-bg:rgba(245,158,11,.10);--warn-line:rgba(245,158,11,.30);--danger:#ef4444;
  --code-bg:#0f172a;--code-ink:#e2e8f0;
  --accent-light:#fff3e8;--accent-glow:rgba(255,123,0,.22);
  --accent-gradient:linear-gradient(135deg,#ff9a3c 0%,#ff7b00 55%,#ef6700 100%);
  --shadow-glow-sm:0 2px 10px rgba(255,123,0,.25);--shadow-glow:0 10px 30px rgba(255,123,0,.32);
  --shadow-sm:0 1px 2px rgba(15,23,42,.04),0 4px 12px rgba(15,23,42,.04);--shadow-md:0 8px 24px rgba(15,23,42,.08);
  --font-display:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:light;
}
html.dark{
  --ink:#f1f5f9;--ink-sub:#c2c8d2;--ink-dim:#8b93a3;
  --card:#1a2230;--line:rgba(255,255,255,.10);--bg:#0f141c;
  --accent-2:#ff9a3c;--ok:#22c55e;--code-bg:#05060a;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font-body);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;background-image:radial-gradient(900px 480px at 100% -8%,rgba(255,123,0,.07),transparent 60%),radial-gradient(720px 480px at -8% 108%,rgba(255,154,60,.06),transparent 55%);background-attachment:fixed}
html.dark body{background-image:none}
.nav{position:fixed;top:0;left:0;right:0;height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,3vw,28px);background:color-mix(in srgb,var(--card) 82%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);z-index:1020}
.nav .brand{display:flex;align-items:center;gap:11px;font-family:var(--font-display);font-weight:800;font-size:18px;color:var(--ink);text-decoration:none}
.nav .brand .logo{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--accent-gradient);color:#fff;font-weight:900;font-size:17px;box-shadow:var(--shadow-glow-sm)}
.nav .brand small{display:block;font-size:11px;font-weight:600;color:var(--ink-dim);margin-top:1px}
.nav-actions{display:flex;align-items:center;gap:10px}
.nav-actions a{font-size:13.5px;font-weight:600;color:var(--ink-sub);text-decoration:none;padding:8px 14px;border-radius:8px;transition:.15s}
.nav-actions a:hover{background:var(--accent-light);color:var(--accent-dark)}
html.dark .nav-actions a:hover{background:rgba(255,123,0,.12);color:#ff9a3c}
.theme-btn{width:40px;height:40px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--ink-sub);cursor:pointer;display:grid;place-items:center;font-size:17px;transition:.15s}
.theme-btn:hover{color:var(--accent);border-color:var(--border-hover,rgba(255,123,0,.5))}
.toast{position:fixed;left:50%;bottom:88px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--bg);padding:11px 20px;border-radius:999px;font-size:13px;font-weight:700;opacity:0;pointer-events:none;transition:.25s;z-index:1080;box-shadow:var(--shadow-md)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:920px){.nav .brand small{display:none}.nav-actions a.hide-sm{display:none}}
@keyframes fade{0%{opacity:0;transform:translateY(10px)}}
@keyframes sparkDown{0%{top:-4px;opacity:0}12%{opacity:1}88%{opacity:1}to{top:100%;opacity:0}}
@keyframes sparkUp{0%{top:100%;opacity:0}12%{opacity:1}88%{opacity:1}to{top:-4px;opacity:0}}
@keyframes pulse{0%,to{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 6%,transparent)}}
@keyframes drop{0%{opacity:0;transform:translateY(-26px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes shake{0%,to{transform:translate(0) rotate(0)}20%{transform:translate(-3px) rotate(-6deg)}60%{transform:translate(3px) rotate(6deg)}}
@keyframes checkPop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.25)}to{transform:scale(1);opacity:1}}
@keyframes flowX{0%{left:8%;opacity:0}12%{opacity:1}88%{opacity:1}to{left:84%;opacity:0}}
@keyframes stall{0%{left:8%}40%{left:46%}55%{left:42%}70%{left:46%}to{left:46%}}
@keyframes dblink{0%,to{opacity:.3}50%{opacity:1}}
@keyframes capCycle{0%{opacity:0;transform:translateY(4px)}4%{opacity:1;transform:translateY(0)}28%{opacity:1;transform:translateY(0)}33%{opacity:0;transform:translateY(-4px)}to{opacity:0}}
@keyframes swBg{0%,30%{background:var(--line)}45%,to{background:var(--ok)}}
@keyframes swKnob{0%,30%{left:3px}45%,to{left:21px}}
@keyframes swBgOff{0%,30%{background:var(--ok)}45%,to{background:var(--line)}}
@keyframes swKnobOff{0%,30%{left:21px}45%,to{left:3px}}
@keyframes dlfill{0%{width:0}8%{width:6%}70%{width:100%}to{width:100%}}
@keyframes ringPulse{0%{opacity:.7;transform:scale(.92)}70%{opacity:0;transform:scale(1.08)}to{opacity:0}}
@keyframes rowPick{0%,20%{background:transparent}35%,80%{background:color-mix(in srgb,var(--accent) 14%,transparent)}95%,to{background:transparent}}
@keyframes intoFolder{0%{opacity:0;transform:translateY(-34px) scale(.9)}18%{opacity:1}70%{opacity:1;transform:translateY(0) scale(1)}86%{opacity:1}to{opacity:0;transform:translateY(6px) scale(.6)}}
@keyframes folderPop{0%,60%{transform:scale(1)}72%{transform:scale(1.08)}to{transform:scale(1)}}
@keyframes typeIn{0%{width:0}to{width:100%}}
@keyframes ptrTapDL{0%,40%{transform:translate(0)}50%{transform:translate(-3px,-3px)}58%{transform:translate(0)}66%,to{transform:translate(0)}}
@keyframes ptrTap{0%,55%{transform:scale(1)}64%{transform:scale(.82)}74%,to{transform:scale(1)}}
@keyframes msgDn{0%{top:-8px;opacity:0}12%{opacity:1}60%{top:calc(100% - 6px);opacity:1}72%{opacity:0}to{opacity:0}}
@keyframes msgUp{0%{bottom:-8px;opacity:0}12%{opacity:1}60%{bottom:calc(100% - 6px);opacity:1}72%{opacity:0}to{opacity:0}}
@keyframes holdPulse{0%,to{transform:scale(1);box-shadow:0 0 color-mix(in srgb,var(--accent) 30%,transparent)}50%{transform:scale(1.05);box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 0%,transparent)}}
@keyframes hotPulse{0%,to{box-shadow:0 0 0 3px color-mix(in srgb,#6366f1 22%,transparent)}50%{box-shadow:0 0 0 7px color-mix(in srgb,#6366f1 0%,transparent)}}
@keyframes flowRight{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}to{left:32px;opacity:0}}
@keyframes flowLeft{0%{left:32px;opacity:0}15%{opacity:1}85%{opacity:1}to{left:0;opacity:0}}


.ccdocs{padding-top:72px;min-height:100vh;font-family:var(--font-body);color:var(--ink);background:radial-gradient(110% 70% at 100% 0%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 55%),radial-gradient(110% 70% at 0% 100%,color-mix(in srgb,#6ee0ff 7%,transparent),transparent 55%),var(--bg)}
h1,h2,h3,h4,h5,.seg-h,h1.title{font-family:var(--font-display)}
.app{display:grid;grid-template-columns:300px 1fr;max-width:1440px;height:calc(100vh - 72px);margin:0 auto}
.side{border-right:1px solid var(--line);background:color-mix(in srgb,var(--card) 70%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;flex-direction:column;overflow:hidden}
.progress-wrap{padding:0 22px 14px}
.progress-meta{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-dim);margin-bottom:6px}
.progress-meta b{color:var(--accent)}
.bar{height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.bar>i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--accent-2),var(--accent));transition:width .35s ease}
.modetog{display:flex;gap:4px;margin:0 22px 12px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:3px}
.modetog button{flex:1;font:inherit;font-size:12px;font-weight:700;cursor:pointer;border:none;border-radius:7px;padding:6px 4px;color:var(--ink-dim);background:transparent;transition:.15s;display:flex;align-items:center;justify-content:center;gap:5px}
.modetog button.on{background:var(--card);color:var(--accent);box-shadow:0 1px 3px #0f172a24}
.modetog button small{font-weight:500;font-size:10px;opacity:.8}
.steps{list-style:none;margin:0;padding:6px 12px 18px;overflow-y:auto;flex:1}
.steps li{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:11px;cursor:pointer;font-size:14px;color:var(--ink-sub);transition:.15s;-webkit-user-select:none;user-select:none}
.steps li:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.steps li.on{background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--ink);font-weight:700}
.steps li .num{flex:0 0 22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;font-weight:800;background:var(--line);color:var(--ink-sub);transition:.15s}
.steps li.on .num{background:linear-gradient(135deg,var(--accent-2),var(--accent));color:#fff}
.steps li.done .num{background:var(--ok);color:#fff}
.steps li.done .num:after{content:"✓"}
.steps li.done .num span{display:none}
.steps li.grp{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;color:var(--pc, var(--ink-dim));letter-spacing:.05em;padding:16px 12px 6px;cursor:default;-webkit-user-select:none;user-select:none}
.steps li.grp:first-child{padding-top:4px}
.steps li.grp:hover{background:transparent}
.steps li.grp:before{content:"";width:9px;height:9px;border-radius:3px;background:var(--pc, var(--ink-dim));flex:0 0 auto}
.steps li.ph:hover{background:color-mix(in srgb,var(--pc, var(--accent)) 8%,transparent)}
.steps li.ph.on{background:color-mix(in srgb,var(--pc, var(--accent)) 14%,transparent);color:var(--ink);font-weight:700}
.steps li.ph.on .num{background:var(--pc, var(--accent));color:#fff}
.steps li.ph.done .num{background:var(--pc, var(--ok));color:#fff}
ol.do>li:before{background:var(--pc, linear-gradient(135deg, var(--accent-2), var(--accent)))!important}
.panel .badge{transition:color .2s,background .2s}
.ccdocs.lite .why,.ccdocs.lite .warn,.ccdocs.lite .detail{display:none!important}
.ccdocs.lite .why.keep{display:flex!important}
.side-foot{padding:12px 22px 18px;border-top:1px solid var(--line);font-size:11.5px;color:var(--ink-dim)}
.side-foot a{color:var(--accent);text-decoration:none}
.main{display:flex;flex-direction:column;overflow:hidden}
.stage{flex:1;overflow-y:auto;padding:48px 64px;display:flex;flex-direction:column;justify-content:safe center;align-items:center}
.panel{display:none}
.panel.on{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:56px;align-items:center;width:100%;max-width:1080px;animation:fade .3s ease both}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);padding:5px 13px;border-radius:999px;margin-bottom:18px}
h1.title{font-size:28px;margin:0 0 14px;letter-spacing:.01em;line-height:1.3}
.lead{font-size:15.5px;line-height:1.8;color:var(--ink-sub);margin:0 0 26px}
.why{display:flex;gap:13px;padding:16px 18px;border-radius:14px;background:color-mix(in srgb,var(--accent) 7%,transparent);border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);margin:0 0 26px}
.why .ic{flex:0 0 22px;color:var(--accent)}
.why .t{font-size:14px;line-height:1.72;color:var(--ink-sub)}
.why .t b{color:var(--ink)}
ol.do{list-style:none;counter-reset:s;padding:0;margin:0 0 10px}
ol.do>li{position:relative;counter-increment:s;padding:0 0 24px 44px;margin:0}
ol.do>li:before{content:counter(s);position:absolute;left:0;top:-2px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:13.5px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--accent-2),var(--accent))}
ol.do>li:after{content:"";position:absolute;left:13.5px;top:30px;bottom:4px;width:2px;background:var(--line)}
ol.do>li:last-child:after{display:none}
ol.do .h{font-size:15px;font-weight:700;margin-bottom:5px}
ol.do .d{font-size:14px;line-height:1.7;color:var(--ink-sub)}
ol.do .d code,.lead code,.why code,.mini code{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:var(--ink)}
.dcmd{display:flex;align-items:center;gap:10px;margin:12px 0 2px;background:var(--code-bg);border-radius:11px;padding:12px 13px 12px 15px}
.dcmd code{flex:1;font-family:ui-monospace,Menlo,monospace;font-size:12.5px;color:var(--code-ink);white-space:pre-wrap;word-break:break-all;line-height:1.6}
.copy{flex:0 0 auto;font:inherit;font-size:12px;font-weight:600;cursor:pointer;border:none;border-radius:7px;padding:6px 11px;color:#cbd5e1;background:#ffffff1a;transition:.15s}
.copy:hover{background:#fff3;color:#fff}
.copy.ok{background:var(--ok);color:#fff}
.warn{display:flex;gap:12px;padding:14px 17px;border-radius:13px;margin:18px 0 0;background:var(--warn-bg);border:1px solid var(--warn-line);font-size:13.5px;line-height:1.65;color:var(--warn)}
.warn .ic{flex:0 0 18px;color:var(--warn)}
.warn b{color:var(--warn)}
.result{display:flex;gap:11px;align-items:flex-start;margin:22px 0 0;padding:15px 17px;border-radius:13px;background:color-mix(in srgb,var(--ok) 9%,transparent);border:1px solid color-mix(in srgb,var(--ok) 26%,transparent);font-size:14px;line-height:1.65;color:var(--ok)}
.result .ic{flex:0 0 18px;color:var(--ok)}
.result b{color:var(--ok)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:6px 0 10px}
.mini{border:1px solid var(--line);border-radius:14px;padding:17px;background:var(--card)}
.mini h4{margin:0 0 7px;font-size:14.5px}
.mini p{margin:0;font-size:13px;line-height:1.65;color:var(--ink-sub)}
.mini .tag{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;margin-bottom:8px}
.tag.a{color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.tag.g{color:var(--ink-dim);background:var(--bg)}
kbd{font-family:ui-monospace,Menlo,monospace;font-size:12px;background:var(--card);border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:1px 6px}
.dfaq details{border:1px solid var(--line);border-radius:13px;padding:5px 18px;margin-bottom:12px;background:var(--card)}
.dfaq summary{cursor:pointer;font-size:14.5px;font-weight:700;padding:13px 0;list-style:none}
.dfaq summary::-webkit-details-marker{display:none}
.dfaq summary:before{content:"＋";color:var(--accent);font-weight:800;margin-right:9px}
.dfaq details[open] summary:before{content:"－"}
.dfaq .ans{font-size:13.8px;line-height:1.72;color:var(--ink-sub);padding:0 0 14px 22px}
.foot{display:flex;align-items:center;gap:14px;padding:18px 64px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--card) 75%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-sub);cursor:pointer;-webkit-user-select:none;user-select:none}
.check input{width:16px;height:16px;accent-color:var(--accent)}
.spacer{flex:1}
button.dnav{font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;border-radius:10px;padding:10px 18px;border:1px solid var(--line);background:var(--card);color:var(--ink-sub);transition:.15s}
button.dnav:hover:not(:disabled){background:var(--bg)}
button.dnav.primary{border:none;color:#fff;background:linear-gradient(135deg,var(--accent-2),var(--accent));box-shadow:0 8px 18px -8px color-mix(in srgb,var(--accent) 70%,transparent)}
button.dnav:disabled{opacity:.4;cursor:default}
.flow{position:relative}
.scene{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:20px;padding:26px 22px;min-height:462px;background:radial-gradient(90% 70% at 50% 0%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 70%),var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.scene .cap{position:absolute;top:14px;left:0;right:0;text-align:center;font-size:11.5px;font-weight:700;color:var(--accent);letter-spacing:.03em;text-transform:none}
.scene .cap2{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-size:11.5px;color:var(--ink-dim)}
.node{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:13px;background:var(--card);border:1px solid var(--line);box-shadow:0 6px 16px -12px #0f172a80;font-size:13px;font-weight:700;min-width:196px}
.node small{display:block;font-weight:500;font-size:11px;color:var(--ink-dim);margin-top:2px}
.node .ni{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;flex:0 0 auto}
.ni.cc{background:linear-gradient(135deg,var(--accent-2),var(--accent))}
.ni.cu{background:linear-gradient(135deg,#334155,#0f172a)}
.ni.you{background:linear-gradient(135deg,#818cf8,#6366f1)}
.ni.sys{background:linear-gradient(135deg,#94a3b8,#64748b)}
.node.accent{border-color:color-mix(in srgb,var(--accent) 50%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent);animation:pulse 2.6s ease-in-out infinite}
.node.dim{opacity:.72}
.node.bad{border-color:color-mix(in srgb,var(--danger) 40%,transparent)}
.node.good{border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.wire{width:2px;height:34px;background:var(--line);position:relative;flex:0 0 auto}
.wire.tall{height:46px}
.wire .spark{position:absolute;left:-3px;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent-2)}
.wire .down{animation:sparkDown 2.2s linear infinite}
.wire .up{background:#6366f1;box-shadow:0 0 10px #818cf8;animation:sparkUp 2.2s linear infinite 1.1s}
.wlabel{font-size:10.5px;color:var(--ink-dim);position:absolute;left:14px;top:50%;transform:translateY(-50%);white-space:nowrap}
.wlabel.r{left:auto;right:14px}
.loop{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;color:var(--accent);background:color-mix(in srgb,var(--accent) 11%,transparent);padding:5px 12px;border-radius:999px}
.loop svg{animation:spin 4s linear infinite}
.rv{opacity:0;animation:fadeUp .5s ease forwards}
.panel.on .rv{animation:fadeUp .5s ease forwards}
.lane{position:relative;width:100%;height:30px;border-radius:999px;border:1px dashed var(--line);display:flex;align-items:center}
.lane .pkt{position:absolute;width:12px;height:12px;border-radius:50%}
.lane.l1{border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.lane.l1 .pkt{background:var(--ok);box-shadow:0 0 8px var(--ok);animation:flowX 1.7s linear infinite}
.lane.l1 .pkt:nth-child(2){animation-delay:.55s}
.lane.l1 .pkt:nth-child(3){animation-delay:1.1s}
.lane.l2{border-color:color-mix(in srgb,var(--danger) 40%,transparent)}
.lane.l2 .pkt{background:var(--danger);box-shadow:0 0 8px var(--danger);animation:stall 2.4s ease-in-out infinite}
.laneTag{font-size:10.5px;font-weight:700;padding:1px 8px;border-radius:999px;margin-bottom:4px;align-self:flex-start}
.winrow{display:flex;gap:12px;width:100%}
.win{flex:1;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--card)}
.win .bar3{display:flex;gap:4px;padding:7px 9px;background:var(--bg);border-bottom:1px solid var(--line)}
.win .bar3 i{width:7px;height:7px;border-radius:50%;background:var(--ink-dim);opacity:.5}
.win .body{padding:9px;min-height:78px;position:relative;font-size:10px;color:var(--ink-dim)}
.win.bad{border-color:color-mix(in srgb,var(--danger) 40%,transparent)}
.win.good{border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.win .tagw{position:absolute;bottom:7px;right:8px;font-size:10px;font-weight:800}
.win.bad .tagw{color:var(--danger)}
.win.good .tagw{color:var(--ok)}
.stub{height:6px;border-radius:4px;background:var(--line);margin:5px 0}
.stub.s2{width:70%}
.stub.s3{width:50%}
.composer{height:16px;border-radius:5px;border:1.5px solid var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);margin-top:8px;position:relative}
.hook{position:absolute;left:-10px;top:50%;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent-2);animation:dblink 1.3s ease-in-out infinite}
.chk{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border-radius:11px;border:1px solid var(--line);background:var(--card);font-size:12.5px;font-weight:600}
.chk .dot{width:20px;height:20px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;font-size:11px;flex:0 0 auto;transform:scale(0);animation:checkPop .4s ease forwards}
.icon-badge{position:relative}
.icon-badge .lock{position:absolute;right:-5px;bottom:-5px;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-size:9px;color:#fff;background:var(--danger);border:2px solid var(--card);animation:shake 1.2s ease-in-out infinite}
.icon-badge.unlocked .lock{background:var(--ok);animation:none}
.scene:has(.seq){min-height:524px;padding-bottom:44px}
.seq{position:absolute;bottom:13px;left:12px;right:12px;text-align:center;min-height:15px}
.seq span{position:absolute;left:0;right:0;font-size:11.5px;font-weight:700;color:var(--accent);opacity:0;animation:capCycle 8s linear infinite}
.seq.n3 span{animation-duration:7.2s}
.seq.n3 span:nth-child(1){animation-delay:0s}
.seq.n3 span:nth-child(2){animation-delay:2.4s}
.seq.n3 span:nth-child(3){animation-delay:4.8s}
.seq.n4 span{animation-duration:8.8s}
.seq.n4 span:nth-child(1){animation-delay:0s}
.seq.n4 span:nth-child(2){animation-delay:2.2s}
.seq.n4 span:nth-child(3){animation-delay:4.4s}
.seq.n4 span:nth-child(4){animation-delay:6.6s}
.ptr{position:absolute;width:17px;height:17px;z-index:6;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(15,23,42,.35))}
.ptr svg{display:block}
.ripple{position:absolute;width:8px;height:8px;border-radius:50%;border:2px solid var(--accent);opacity:0}
.sw{width:42px;height:24px;border-radius:999px;background:var(--line);position:relative;flex:0 0 auto;transition:background .3s;animation:swBg 3.4s ease-in-out infinite}
.sw i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0000004d;animation:swKnob 3.4s ease-in-out infinite}
.dlbar{height:7px;border-radius:999px;background:var(--line);overflow:hidden;width:100%}
.dlbar>i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--accent-2),var(--accent));animation:dlfill 3.4s ease-in-out infinite}
.ring{position:relative}
.ring:after{content:"";position:absolute;top:-6px;right:-6px;bottom:-6px;left:-6px;border-radius:inherit;border:2px solid var(--accent);opacity:0;animation:ringPulse 2.2s ease-out infinite}
.term-line{overflow:hidden;white-space:nowrap}
.typing{display:inline-block;width:0;overflow:hidden;white-space:nowrap;vertical-align:bottom;animation:typeIn 1.2s steps(28) both}
.msg{position:absolute;left:50%;transform:translate(-50%);font-size:9.5px;font-weight:800;padding:2px 8px;border-radius:999px;white-space:nowrap;z-index:3;box-shadow:0 4px 10px -6px #0f172a80}
.msg.dn{background:linear-gradient(135deg,#818cf8,#6366f1);color:#fff;animation:msgDn 3s ease-in-out infinite}
.msg.up{background:linear-gradient(135deg,#34d399,#10b981);color:#fff;animation:msgUp 3s ease-in-out infinite 1.5s}
.holdb{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800;color:var(--accent);background:color-mix(in srgb,var(--accent) 13%,transparent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);padding:3px 9px;border-radius:999px;animation:holdPulse 1.9s ease-in-out infinite}
.loopwrap{position:relative;display:grid;place-items:center;margin-top:6px}
.loopwrap .ring2{position:absolute;width:58px;height:58px;border:2px dashed color-mix(in srgb,var(--accent) 40%,transparent);border-radius:50%;animation:spin 6s linear infinite}
.loopwrap .ring2:before{content:"";position:absolute;top:-5px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent-2)}
.panel.on.full{grid-template-columns:1fr;max-width:960px}
.seg-h{font-size:17px;font-weight:800;margin:30px 0 6px;display:flex;align-items:center;gap:9px}
.seg-h .bn{margin:0}
.seg-sub{font-size:13.5px;line-height:1.7;color:var(--ink-sub);margin:0 0 14px}
.bn{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--accent-2),var(--accent));color:#fff;font-size:12px;font-weight:800;flex:0 0 auto}
.bn.p{background:linear-gradient(135deg,#818cf8,#6366f1)}
.qgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:4px 0}
.qcard{border:1px solid var(--line);border-radius:13px;padding:13px 14px;background:var(--card)}
.qcard.hot{border-color:color-mix(in srgb,#6366f1 45%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,#6366f1 10%,transparent)}
.qcard .qi{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;margin-bottom:9px;background:linear-gradient(135deg,#94a3b8,#64748b)}
.qcard.hot .qi{background:linear-gradient(135deg,#818cf8,#6366f1)}
.qcard h5{margin:0 0 3px;font-size:13.5px}
.qcard p{margin:0;font-size:11.8px;line-height:1.55;color:var(--ink-dim)}
.qstarter{position:relative;margin-top:6px;padding:16px;border-radius:18px;border:1px solid var(--accent-line);background:color-mix(in srgb,var(--accent) 6%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 6%,transparent)}
.qbanner{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:12px;padding:11px 14px;margin-bottom:14px}
.qbanner svg{flex:0 0 auto}
.qstarter .qcard{transition:.25s}
.qstarter .qcard:not(.hot){opacity:.62}
.qcard.hot{position:relative;transform:translateZ(0);box-shadow:0 14px 40px -20px color-mix(in srgb,#6366f1 70%,transparent);animation:hotPulse 2.6s ease-in-out infinite}
.qribbon{position:absolute;top:-9px;left:14px;font-size:10px;font-weight:800;color:#fff;background:linear-gradient(135deg,#818cf8,#6366f1);padding:3px 10px;border-radius:99px;box-shadow:0 6px 14px -6px #6366f1b3}
.figure{border:1px solid var(--line);border-radius:16px;background:var(--card);overflow:hidden;box-shadow:0 16px 40px -28px #0f172a80}
.figure-bar{display:flex;align-items:center;gap:8px;padding:9px 14px;background:var(--bg);border-bottom:1px solid var(--line)}
.figure-bar .dots{display:flex;gap:5px}
.figure-bar .dots i{width:9px;height:9px;border-radius:50%}
.figure-bar .t{font-size:11.5px;font-weight:700;color:var(--ink-sub)}
.panl{display:grid;grid-template-columns:1fr 1fr;gap:0}
.panl>.cfg{padding:14px;border-right:1px solid var(--line)}
.panl>.que{padding:14px;background:color-mix(in srgb,var(--bg) 55%,transparent)}
.fld{font-size:11px;color:var(--ink-dim);margin:12px 0 5px;font-weight:700}
.ctl{display:flex;align-items:center;gap:8px}
.dpill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:9px;padding:7px 11px;font-size:12px;font-weight:600;color:var(--ink-sub);background:var(--card)}
.dpill.full{flex:1;justify-content:space-between}
.stepn{display:inline-grid;place-items:center;width:19px;height:19px;border-radius:50%;background:#6366f1;color:#fff;font-size:10.5px;font-weight:800;flex:0 0 auto}
.tabs2{display:flex;gap:4px;background:var(--bg);border-radius:9px;padding:3px}
.tabs2 span{flex:1;text-align:center;font-size:11.5px;font-weight:700;padding:6px;border-radius:7px;color:var(--ink-dim)}
.tabs2 span.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px #0f172a1f}
.ta{border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-size:11.5px;font-family:ui-monospace,Menlo,monospace;color:var(--ink-sub);background:var(--card);min-height:46px}
.qrow{display:flex;align-items:center;gap:8px;font-size:11px;padding:7px 9px;border-radius:9px;border:1px solid var(--line);background:var(--card);margin-bottom:6px}
.qrow .st{font-size:9px;font-weight:800;color:#fff;border-radius:5px;padding:1px 6px;flex:0 0 auto}
.qrow .st.ok{background:var(--ok)}
.qrow .st.run{background:var(--warn)}
.qrow .ct{margin-left:auto;color:var(--ink-dim);font-variant-numeric:tabular-nums}
.legend{list-style:none;margin:16px 0 2px;padding:0;display:grid;gap:10px}
.legend li{display:flex;gap:11px;font-size:13.5px;line-height:1.6;color:var(--ink-sub)}
.legend li b{color:var(--ink)}
.gshot-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.gshot{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--code-bg);box-shadow:0 18px 44px -30px #000000b3}
.gshot img{width:100%;display:block}
.gshot figcaption{font-size:11.5px;color:var(--ink-dim);padding:9px 13px;border-top:1px solid var(--line);font-family:var(--font-mono)}
@media(max-width:700px){.gshot-row{grid-template-columns:1fr}}
.loopdiag{display:flex;align-items:stretch;gap:12px;flex-wrap:wrap;margin:10px 0 4px;padding:20px 18px;border:1px solid var(--line);border-radius:18px;background:radial-gradient(80% 120% at 50% 0%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 70%),var(--card)}
.ld-you,.ld-cursor{flex:0 0 auto;width:138px;border:1px solid var(--line);border-radius:14px;padding:14px 12px;text-align:center;background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.ld-ava{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#fff}
.ld-ava.you{background:linear-gradient(135deg,#818cf8,#6366f1)}
.ld-ava.cu{background:linear-gradient(135deg,#334155,#0f172a)}
.ld-you b,.ld-cursor b{font-size:14px}
.ld-you small,.ld-cursor small{font-size:11px;color:var(--ink-dim);line-height:1.4}
.ld-tagn{font-size:10px;font-weight:800;color:#fff;padding:2px 9px;border-radius:999px}
.ld-tagn.cu{background:linear-gradient(135deg,#334155,#0f172a)}
.ld-chat{flex:1 1 250px;min-width:230px;border:2px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:14px;background:var(--card);overflow:hidden;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 9%,transparent);display:flex;flex-direction:column}
.ld-bar{display:flex;align-items:center;gap:7px;padding:8px 11px;background:linear-gradient(135deg,var(--accent-2),var(--accent));color:#fff;font-size:11.5px;font-weight:800}
.ld-bar .tabs{margin-left:auto;font-size:9.5px;font-weight:600;opacity:.85}
.ld-body{padding:11px;display:flex;flex-direction:column;gap:8px;flex:1}
.ld-bub{max-width:86%;font-size:11.5px;line-height:1.45;padding:8px 11px;border-radius:12px}
.ld-bub.ai{align-self:flex-start;background:var(--bg);border:1px solid var(--line);color:var(--ink-sub);border-bottom-left-radius:3px}
.ld-bub.me{align-self:flex-end;background:linear-gradient(135deg,var(--accent-2),var(--accent));color:#fff;border-bottom-right-radius:3px}
.ld-hold{align-self:center;display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:800;color:var(--accent);background:color-mix(in srgb,var(--accent) 11%,transparent);padding:4px 11px;border-radius:999px;animation:holdPulse 1.9s ease-in-out infinite}
.ld-flow{flex:0 0 auto;align-self:center;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:56px}
.ld-flow .lab{font-size:10px;font-weight:800;padding:2px 7px;border-radius:999px;white-space:nowrap}
.ld-flow .lab.dn{color:#6366f1;background:color-mix(in srgb,#6366f1 13%,transparent)}
.ld-flow .lab.up{color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent)}
.ld-flow .arr{font-size:17px;line-height:1;color:var(--ink-dim)}
.ld-flow .arrx{position:relative;width:38px;height:14px}
.ld-flow .arrx i{position:absolute;top:4px;width:6px;height:6px;border-radius:50%;background:#6366f1;box-shadow:0 0 7px #818cf8;animation:flowRight 1.8s linear infinite}
.ld-flow .arrx.back i{background:var(--ok);box-shadow:0 0 7px var(--ok);animation:flowLeft 1.8s linear infinite .9s}
.ld-loop{margin-top:12px;text-align:center;font-size:13px;font-weight:700;color:var(--accent)}
.ld-loop span{display:inline-flex;align-items:center;gap:7px;background:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);border-radius:999px;padding:9px 16px}
.ld-loop svg{animation:spin 5s linear infinite}
@media(max-width:560px){.ld-flow{width:100%;flex-direction:row;justify-content:center}.ld-you,.ld-cursor{width:100%}}
.agside{width:100%}
.agrow{display:flex;align-items:flex-start;gap:9px;padding:8px 10px;border-radius:9px}
.agrow+.agrow{border-top:1px solid var(--line)}
.agrow .ai{width:16px;height:16px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-size:9px;color:#fff;margin-top:1px}
.agrow .ai.ok{background:var(--ok)}
.agrow .ai.run{background:var(--warn)}
.agrow .at b{font-size:12px;font-weight:700;color:var(--ink)}
.agrow .at p{margin:1px 0 0;font-size:10.5px;color:var(--ink-dim)}
@media(max-width:1180px){.stage{padding:40px 44px}.panel.on{grid-template-columns:1fr;gap:30px;max-width:620px;justify-items:stretch}.pcol{width:100%}.flow{width:100%;max-width:520px;margin:0 auto}.foot{padding:16px 44px}}
@media(max-width:920px){.app{grid-template-columns:1fr;height:auto;min-height:100vh}.side{border-right:none;border-bottom:1px solid var(--line)}.steps{max-height:200px}.stage{padding:28px 20px}.panel.on{grid-template-columns:1fr;max-width:100%}.flow{position:static}.foot{padding:14px 20px}.grid2{grid-template-columns:1fr}}
html{scroll-behavior:smooth}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,.steps li.ph:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.steps,.stage{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ink-dim) 45%,transparent) transparent}
.steps::-webkit-scrollbar,.stage::-webkit-scrollbar{width:10px;height:10px}
.steps::-webkit-scrollbar-thumb,.stage::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink-dim) 45%,transparent);border:3px solid transparent;background-clip:padding-box;border-radius:999px}
.steps::-webkit-scrollbar-thumb:hover,.stage::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--ink-dim) 72%,transparent);background-clip:padding-box}
.steps::-webkit-scrollbar-track,.stage::-webkit-scrollbar-track{background:transparent}
.steps li.ph{position:relative}
.steps li.ph.on:before{content:"";position:absolute;left:3px;top:50%;transform:translateY(-50%);width:3px;height:18px;border-radius:999px;background:var(--pc, var(--accent))}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto},:before,:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
.progress-wrap{padding-top:18px}

@keyframes drift{0%{transform:translateZ(0) scale(1)}50%{transform:translate3d(2%,-2%,0) scale(1.06)}to{transform:translate3d(-2%,1%,0) scale(1.02)}}
@keyframes breathe{0%,to{opacity:1;box-shadow:0 0 0 4px var(--accent-soft)}50%{opacity:.55;box-shadow:0 0 0 7px transparent}}
@keyframes blink{0%,to{opacity:.25}50%{opacity:1}}
@keyframes pop{0%{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
@keyframes floaty{0%,to{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fill{0%{width:0}to{width:100%}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes rise{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes ringrun{to{stroke-dashoffset:-1}}
@keyframes fillbar{to{width:100%}}