#cnnlab{--brand:#2f6bff;          
  --brand-2:#5b8bff;        
  --brand-deep:#1e4fd6;     
  --brand-soft:#e8f0ff;     
  --brand-line:#cfddfc;     
  --accent:#ffd021;         
  --accent-2:#ffb020;       
  --accent-soft:#fff7da;
  --accent-line:#ffe6a3;
  --pink:#f2559d;           
  --pink-soft:#ffe9f2;
  --purple:#8a5cf6;         
  --purple-soft:#f0ebff;
  --mint:#12c98c;           
  --mint-soft:#e3f9f0;
  --ink:#0d2259;            
  --ink-2:#384f82;          
  --ink-3:#8496bb;          
  --ok:#16c784; --err:#f0446a; --warn:#ff9f1c;
  --surface:#ffffff;
  --line:#e2eafb;
  --shadow:0 16px 40px -20px rgba(47,107,255,.20);
  --shadow-sm:0 6px 18px -6px rgba(47,107,255,.16);
  --r-lg:22px; --r-md:16px;}
#cnnlab *{margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
#cnnlab,
#cnnlab{height:100%;}
#cnnlab{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--ink-2);
  min-height:100%; overflow-x:hidden;
  background:
    radial-gradient(1100px 460px at 92% -8%, #d9e8ff 0%, rgba(217,232,255,0) 60%),
    radial-gradient(900px 460px at -6% 6%, #e5f3ff 0%, rgba(229,243,255,0) 55%),
    radial-gradient(760px 460px at 8% 112%, #fff3d6 0%, rgba(255,243,214,0) 55%),
    linear-gradient(180deg,#e9f0ff 0%, #f4f8ff 55%, #fbfdff 100%);
  background-attachment:fixed;}
#cnnlab .bg{position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden;}
#cnnlab .bg::before,
#cnnlab .bg::after{content:''; position:absolute; border-radius:50%; filter:blur(6px); opacity:.55;}
#cnnlab .bg::before{width:340px; height:340px; top:-120px; right:-90px;
  background:radial-gradient(circle at 35% 35%, rgba(140,180,255,.55), rgba(140,180,255,0) 70%);}
#cnnlab .bg::after{width:300px; height:300px; left:-110px; bottom:8%;
  background:radial-gradient(circle at 60% 40%, rgba(255,208,33,.32), rgba(255,208,33,0) 70%);}
#cnnlab .bg .sun,
#cnnlab .bg .stars,
#cnnlab .bg .cloud,
#cnnlab .bg .balloon,
#cnnlab .stars2,
#cnnlab .stars{display:none;}
#cnnlab #app,
#cnnlab .page{position:relative; z-index:1; max-width:1100px; margin:0 auto; padding:14px 16px 80px;}
#cnnlab .topbar{display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:rgba(255,255,255,.9); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.9);
  box-shadow:0 8px 26px -12px rgba(47,107,255,.28); border-radius:20px; padding:10px 16px; margin-bottom:18px;}
#cnnlab .topbar .t{flex:1; color:#0d2259; font-weight:800; font-size:17px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;}
#cnnlab .topbar .pr{color:#1e4fd6; font-size:12px; font-weight:800; white-space:nowrap; background:#e8f0ff;
  border:1px solid #cfddfc; padding:4px 12px; border-radius:30px;}
#cnnlab .topbar .right{display:flex; align-items:center; gap:8px;}
#cnnlab .logo{color:#0d2259; font-weight:800; font-size:19px; letter-spacing:.3px;
  display:flex; align-items:center; gap:7px; text-decoration:none;}
#cnnlab .logo small{font-size:12px; color:#1e4fd6; font-weight:700; margin-left:2px;
  background:#e8f0ff; border:1px solid #cfddfc; padding:2px 10px; border-radius:30px; white-space:nowrap;}
#cnnlab .logo-ic{font-size:26px; line-height:1; display:inline-block;}
#cnnlab .logo-name{position:relative;}
#cnnlab .logo-num{font-style:italic; background:linear-gradient(135deg,#2f6bff,#1e4fd6); color:#fff;
  padding:2px 10px; border-radius:14px; font-size:13px; transform:rotate(-3deg);
  box-shadow:0 4px 10px rgba(47,107,255,.35);}
#cnnlab .back{display:inline-flex; align-items:center; gap:4px; background:#e8f0ff;
  border:1px solid #cfddfc; color:#1e4fd6; font-size:13px; font-weight:800; padding:8px 14px;
  border-radius:30px; cursor:pointer; transition:.15s; white-space:nowrap; text-decoration:none;}
#cnnlab .back:hover{background:#dce8ff; transform:translateY(-1px);}
#cnnlab .back:active{transform:scale(.96);}
#cnnlab .btn-guide,
#cnnlab .backbtn{display:inline-flex; align-items:center; gap:4px;
  background:linear-gradient(135deg,#ffd021,#ffb020); color:#7a4a00; font-size:13px; font-weight:800;
  padding:7px 15px; border-radius:30px; text-decoration:none;
  box-shadow:0 6px 16px -6px rgba(255,176,32,.65); transition:.15s;}
#cnnlab .btn-guide:hover,
#cnnlab .backbtn:hover{transform:translateY(-2px); box-shadow:0 8px 20px -6px rgba(255,176,32,.75);}
#cnnlab .btn-guide:active,
#cnnlab .backbtn:active{transform:scale(.96);}
#cnnlab .btn-gh{display:inline-flex; align-items:center; gap:4px;
  background:linear-gradient(135deg,#0d2259,#1a2c5e); color:#fff; font-size:13px; font-weight:800;
  padding:7px 15px; border-radius:30px; text-decoration:none;
  box-shadow:0 6px 16px -6px rgba(13,34,89,.5); transition:.15s;}
#cnnlab .btn-gh:hover{transform:translateY(-2px);}
#cnnlab .btn-gh:active{transform:scale(.96);}
#cnnlab .btn{border:none; border-radius:30px; padding:10px 20px; font-size:13px; font-weight:800; cursor:pointer;
  transition:.15s; color:#fff; font-family:inherit; box-shadow:0 6px 18px -6px rgba(47,107,255,.16);}
#cnnlab .btn:active{transform:scale(.96);}
#cnnlab .btn-primary{background:linear-gradient(135deg,#2f6bff,#1e4fd6);}
#cnnlab .btn-success{background:linear-gradient(135deg,#12c98c,#0ea876);}
#cnnlab .btn-danger{background:linear-gradient(135deg,#ff8a9c,#f0446a);}
#cnnlab .btn-warning{background:linear-gradient(135deg,#ffd021,#ffb020); color:#7a4a00;}
#cnnlab .btn-ghost{background:#eef1fa; color:#5a638a; box-shadow:none;}
#cnnlab .btn-outline{background:transparent; border:2px solid #cfddfc; color:#1e4fd6; box-shadow:none;}
#cnnlab .btn:disabled{opacity:.5; cursor:default;}
#cnnlab .hero{text-align:center; padding:26px 10px 10px; position:relative;}
#cnnlab .hero .big{font-size:72px; line-height:1; display:inline-block; animation:float 3.4s ease-in-out infinite;
  filter:drop-shadow(0 10px 22px rgba(47,107,255,.22));}
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
#cnnlab .hero h1{color:#0d2259; font-size:30px; margin:10px 0 6px; letter-spacing:.3px;}
#cnnlab .hero .tagline{color:#5469a0; font-size:16px;}
#cnnlab .hero .meta{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:16px;}
#cnnlab .kicker{display:inline-flex; align-items:center; gap:6px; margin-bottom:14px;
  background:linear-gradient(135deg,#2f6bff,#1e4fd6); color:#fff; font-size:12px; font-weight:800;
  letter-spacing:.5px; padding:5px 16px; border-radius:30px;
  box-shadow:0 6px 16px -6px rgba(47,107,255,.6);}
#cnnlab .chip{display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.92);
  border:1px solid #cfddfc; color:#335099; font-size:12px; font-weight:800;
  padding:7px 15px; border-radius:30px; box-shadow:0 6px 18px -6px rgba(47,107,255,.16);}
#cnnlab .card{background:#fff; border-radius:22px; padding:20px; box-shadow:0 16px 40px -20px rgba(47,107,255,.2);
  margin:16px 0; border:1px solid #eef2fc;}
#cnnlab .card h3{font-size:16px; color:#0d2259; margin-bottom:10px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
#cnnlab .card p,
#cnnlab .card li{font-size:14px; line-height:1.85; color:#384f82;}
#cnnlab .card ul{padding-left:20px;}
#cnnlab .badge{display:inline-block; background:#e8f0ff; color:#1e4fd6; padding:2px 11px; border-radius:30px; font-size:11px; font-weight:800;}
#cnnlab .muted{color:#8496bb; font-size:12px;}
#cnnlab .tl{position:relative; margin-top:10px; padding-bottom:10px;}
#cnnlab .tl::before{content:''; position:absolute; left:26px; top:8px; bottom:8px; width:4px;
  background:linear-gradient(180deg,#2f6bff,#8a5cf6,#f2559d); border-radius:4px; opacity:.9;}
#cnnlab .node{position:relative; padding-left:64px; margin-bottom:18px;}
#cnnlab .node .dot{position:absolute; left:12px; top:14px; width:34px; height:34px; border-radius:50%;
  background:#fff; border:3px solid #2f6bff; display:flex; align-items:center; justify-content:center;
  font-size:16px; z-index:1; box-shadow:0 6px 14px -4px rgba(47,107,255,.4);}
#cnnlab .node .ncard{background:#fff; border-radius:16px; padding:14px 16px; cursor:pointer;
  box-shadow:0 16px 40px -20px rgba(47,107,255,.2); border:1px solid #eef2fc; transition:.18s;}
#cnnlab .node .ncard:hover{transform:translateY(-2px); border-color:#cfddfc;}
#cnnlab .node .ncard:active{transform:scale(.98);}
#cnnlab .node .ncard.done{border-color:#12c98c; background:linear-gradient(180deg,#ffffff,#f2fcf7);}
#cnnlab .node .ncard.cur{border-color:#ffd021; box-shadow:0 12px 26px -12px rgba(255,176,32,.5);}
#cnnlab .node .year{display:inline-block; background:linear-gradient(135deg,#2f6bff,#1e4fd6); color:#fff;
  font-size:12px; font-weight:800; padding:3px 11px; border-radius:30px; margin-bottom:6px;}
#cnnlab .node .row{display:flex; align-items:center; gap:8px;}
#cnnlab .node .row .em{font-size:26px;}
#cnnlab .node .row .tt{flex:1;}
#cnnlab .node .row .tt b{font-size:16px; color:#0d2259; display:block;}
#cnnlab .node .row .tt span{font-size:12px; color:#8496bb;}
#cnnlab .node .state{font-size:15px;}
#cnnlab .node .ncard.done .state::after{content:'完成'; font-size:10px; color:#fff; background:#12c98c;
  border-radius:12px; padding:2px 8px; margin-left:4px; font-weight:800; vertical-align:middle;}
@media (min-width:720px){#cnnlab .tl::before{left:50%; margin-left:-2px;}
#cnnlab .node{width:50%; padding-left:0;}
#cnnlab .node:nth-child(odd){left:0; padding-right:44px; text-align:right;}
#cnnlab .node:nth-child(even){left:50%; padding-left:44px;}
#cnnlab .node .dot{left:auto; right:-17px; top:14px;}
#cnnlab .node:nth-child(even) .dot{left:-17px; right:auto;}
#cnnlab .node .row{justify-content:flex-start;}
#cnnlab .node:nth-child(odd) .row{justify-content:flex-end;}
#cnnlab .node:nth-child(odd) .ncard .state::after{margin-left:0; margin-right:4px;}}
#cnnlab #modal{position:fixed; inset:0; z-index:30; background:rgba(13,24,54,.68); backdrop-filter:blur(8px);
  display:none; align-items:flex-start; justify-content:center; overflow-y:auto; padding:22px 10px 60px;}
#cnnlab #modal.open{display:flex;}
#cnnlab .lesson{background:#fff; border-radius:26px; max-width:660px; width:100%; padding:24px 22px 22px;
  position:relative; animation:up .35s ease; box-shadow:0 30px 80px -20px rgba(13,24,54,.5);}
@keyframes up { from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:none} }
#cnnlab .lesson .l-head{text-align:center; margin-bottom:14px;}
#cnnlab .lesson .l-head .lemo{font-size:58px; display:block;}
#cnnlab .lesson .l-head .lyear{display:inline-block; background:linear-gradient(135deg,#2f6bff,#1e4fd6);
  color:#fff; font-size:12px; font-weight:800; padding:3px 13px; border-radius:30px;}
#cnnlab .lesson .l-head h2{font-size:23px; color:#0d2259; margin:8px 0 3px;}
#cnnlab .lesson .l-head .ltag{font-size:13px; color:#8496bb;}
#cnnlab .sec{border-radius:16px; padding:14px 16px; margin-top:12px;}
#cnnlab .sec h4{font-size:14px; font-weight:800; margin-bottom:8px; display:flex; align-items:center; gap:6px;}
#cnnlab .sec p,
#cnnlab .sec li{font-size:14px; line-height:1.9; color:#46587d;}
#cnnlab .sec.story{background:#fff8e6;}
#cnnlab .sec.story h4{color:#9a6b00;}
#cnnlab .sec.teach{background:#eaf2ff;}
#cnnlab .sec.teach h4{color:#1e4fd6;}
#cnnlab .sec.act{background:#e7faf2;}
#cnnlab .sec.act h4{color:#0d9d6a;}
#cnnlab .sec.act ol{padding-left:20px;}
#cnnlab .sec.act li{margin:4px 0;}
#cnnlab .sec.think{background:#f3edff;}
#cnnlab .sec.think h4{color:#6d3fbd;}
#cnnlab .sec.quiz{background:#fff0f7;}
#cnnlab .sec.quiz h4{color:#c0448e;}
#cnnlab .sec.person{background:#fff4e8;}
#cnnlab .sec.person h4{color:#b96a1e;}
#cnnlab .sec.struct{background:#e7f7f5;}
#cnnlab .sec.struct h4{color:#147a6e;}
#cnnlab .quiz-q{font-size:15px; font-weight:800; color:#0d2259; margin-bottom:12px; line-height:1.7;}
#cnnlab .opt{display:block; width:100%; text-align:left; background:#fff; border:2px solid #e8eefc;
  border-radius:14px; padding:11px 15px; margin-top:9px; font-size:14px; color:#46587d; cursor:pointer;
  transition:.15s; font-family:inherit;}
#cnnlab .opt:hover{border-color:#2f6bff; background:#f5f8ff;}
#cnnlab .opt.right{border-color:#12c98c; background:#e7faf2; color:#0d7a51; font-weight:800;}
#cnnlab .opt.wrong{border-color:#f0446a; background:#fff0f3; color:#c02b4e;}
#cnnlab .opt:disabled{cursor:default;}
#cnnlab .quiz-fb{display:none; margin-top:12px; font-size:13px; line-height:1.7; border-radius:14px; padding:10px 14px;}
#cnnlab .quiz-fb.show{display:block;}
#cnnlab .quiz-fb.ok{background:#e7faf2; color:#0d7a51;}
#cnnlab .quiz-fb.no{background:#fff0f3; color:#c02b4e;}
#cnnlab .l-nav{display:flex; gap:10px; margin-top:18px;}
#cnnlab .l-nav button{flex:1; border:none; border-radius:16px; padding:13px; font-size:15px; font-weight:800;
  cursor:pointer; transition:.15s;}
#cnnlab .l-nav button:active{transform:scale(.97);}
#cnnlab .btn-next{background:linear-gradient(135deg,#2f6bff,#1e4fd6); color:#fff;
  box-shadow:0 8px 20px -8px rgba(47,107,255,.7);}
#cnnlab .btn-prev{background:#eef1fa; color:#5a638a;}
#cnnlab .btn-next.done{background:linear-gradient(135deg,#12c98c,#0ea876); box-shadow:0 8px 20px -8px rgba(18,201,140,.6);}
#cnnlab .l-close{position:absolute; top:16px; right:16px; background:#eef1fa; border:none;
  color:#5a638a; font-size:13px; padding:8px 14px; border-radius:30px; cursor:pointer; font-weight:700;}
#cnnlab .l-close:hover{background:#e1e6f6;}
#cnnlab .panel{background:#fff; border-radius:16px; border:1px solid #eef2fc; padding:14px 16px;
  box-shadow:0 6px 18px -6px rgba(47,107,255,.16);}
#cnnlab .panel-title{font-size:14px; font-weight:800; color:#0d2259; margin-bottom:12px; display:flex; align-items:center; gap:8px;}
#cnnlab .panel-title .badge{font-size:11px; background:#e8f0ff; color:#1e4fd6; padding:0 10px; border-radius:30px; font-weight:800;}
#cnnlab .ctrl-group{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:4px;}
#cnnlab .ctrl-label{font-size:13px; color:#46587d; font-weight:700;}
#cnnlab .ctrl-input{width:60px; padding:5px 8px; border-radius:12px; border:2px solid #cfddfc; font-size:13px;
  text-align:center; font-weight:700; outline:none; font-family:inherit;}
#cnnlab .ctrl-input:focus{border-color:#2f6bff; box-shadow:0 0 0 3px rgba(47,107,255,.15);}
#cnnlab .status-bar{background:#f7f9ff; border:1px solid #e8eefb; border-radius:14px; padding:10px 14px;
  font-size:13px; color:#46587d; display:flex; flex-wrap:wrap; gap:10px 24px; margin-top:10px;}
#cnnlab .status-item{display:flex; align-items:center; gap:6px;}
#cnnlab .status-item .dot{width:8px; height:8px; border-radius:50%; display:inline-block;}
#cnnlab .dot.green{background:#12c98c;}
#cnnlab .dot.blue{background:#2f6bff;}
#cnnlab .dot.orange{background:#ff9f1c;}
#cnnlab .data-row{display:grid; grid-template-columns:64px 1fr; gap:4px 12px; padding:4px 0; font-size:13px;
  align-items:baseline; border-bottom:1px solid #eef3fc;}
#cnnlab .data-row .label{color:#5a6d99; font-weight:700; white-space:nowrap;}
#cnnlab .data-row .value{font-family:Consolas,Menlo,monospace; font-size:13px; color:#0d2259; word-break:break-all;}
#cnnlab .data-row .value.highlight{background:#fff7da; padding:0 6px; border-radius:6px;}
#cnnlab .data-row .value.fw{font-weight:700;}
#cnnlab .scroll-data{max-height:400px; overflow-y:auto; padding-right:4px;}
#cnnlab .scroll-data::-webkit-scrollbar{width:5px;}
#cnnlab .scroll-data::-webkit-scrollbar-thumb{background:#c9d6f2; border-radius:10px;}
#cnnlab .fmt{background:#e8f0ff; border:1px solid #cfddfc; border-radius:14px; padding:12px 15px;
  margin:10px 0; font-family:Consolas,Menlo,monospace; font-size:13px; color:#384f82; line-height:1.9;}
#cnnlab .fmt b{color:#f2559d;}
#cnnlab .data-list-panel{background:#fff; border:1px solid #cfddfc; border-radius:16px;
  padding:12px 10px; max-height:420px; overflow-y:auto; align-self:stretch; box-shadow:0 6px 18px -6px rgba(47,107,255,.16);}
#cnnlab .data-list-panel .panel-title{font-size:13px; font-weight:800; color:#0d2259; margin-bottom:8px;
  display:flex; align-items:center; gap:6px;}
#cnnlab .data-list-panel .badge{font-size:11px; background:#e8f0ff; color:#1e4fd6;
  padding:0 10px; border-radius:30px; font-weight:800;}
#cnnlab .dl-row{display:flex; gap:6px; align-items:center; font-family:Consolas,Menlo,monospace; font-size:11px;
  padding:5px 8px; border-radius:9px; cursor:pointer; border:1px solid transparent; color:#46587d;}
#cnnlab .dl-row:hover{background:#e8f0ff;}
#cnnlab .dl-row.active{background:#e8f0ff; border-color:#2f6bff; font-weight:700;}
#cnnlab .dl-idx{color:#8496bb;}
#cnnlab .dl-out{color:#f2559d; margin-left:auto; white-space:nowrap;}
#cnnlab .fs-btn{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border:none;
  border-radius:12px; background:#e8f0ff; color:#1e4fd6; font-size:19px; cursor:pointer;
  transition:.15s; line-height:1; box-shadow:0 6px 18px -6px rgba(47,107,255,.16);}
#cnnlab .fs-btn:hover{background:#dce8ff; transform:scale(1.06);}
#cnnlab .fs-btn:active{transform:scale(.94);}
#cnnlab .net-legend{display:flex; gap:14px; align-items:center; justify-content:center; font-size:11px;
  color:#384f82; flex-wrap:wrap;}
#cnnlab .net-legend .lg{display:inline-block; width:20px; height:5px; border-radius:3px;}
#cnnlab .net-legend .lg.red{background:#f0446a;}
#cnnlab .net-legend .lg.blue{background:#2f6bff;}
#cnnlab #toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
  background:linear-gradient(135deg,#0d2259,#223a82); color:#fff; padding:12px 22px; border-radius:30px;
  font-size:13px; font-weight:600; z-index:99; opacity:0; pointer-events:none; transition:.3s;
  max-width:86vw; text-align:center; box-shadow:0 16px 40px -12px rgba(13,24,54,.6);}
#cnnlab #toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
#cnnlab .foot{text-align:center; color:#5a6d99; font-size:12px; margin-top:26px; line-height:1.9;
  background:rgba(255,255,255,.75); border:1px solid #eef2fc; border-radius:16px; padding:14px;}
@media (max-width:640px){#cnnlab .topbar{flex-wrap:wrap;}
#cnnlab .hero h1{font-size:25px;}
#cnnlab .hero .big{font-size:60px;}
#cnnlab #app,
#cnnlab .page{padding:10px 10px 70px;}}
#cnnlab #app{max-width:1100px;}
#cnnlab .hero{text-align:center; padding:26px 10px 10px;}
#cnnlab .hero .big{font-size:80px; display:inline-block; animation:float 3.4s ease-in-out infinite;
    filter:drop-shadow(0 10px 22px rgba(47,107,255,.22));}
#cnnlab .hero h1{color:#0d2259; font-size:28px; margin:8px 0 6px;}
#cnnlab .hero .tagline{color:#5469a0; font-size:15px;}
#cnnlab .fmt{background:#e8f0ff; border:1px solid #cfddfc; border-radius:14px; padding:12px 15px; margin:10px 0;
    font-family:Consolas,Menlo,monospace; font-size:13px; color:#384f82; line-height:1.9;}
#cnnlab .fmt b{color:#f2559d;}
#cnnlab .ann-card{position:relative;}
#cnnlab .fs-btn{position:absolute; top:12px; right:14px; width:38px; height:38px; border:none; border-radius:12px;
    background:#eef3ff; color:#2f4a8a; font-size:19px; cursor:pointer; transition:.15s; line-height:1;
    box-shadow:0 2px 6px rgba(90,107,255,.15);}
#cnnlab .fs-btn:hover{background:#dbe7ff; transform:scale(1.06);}
#cnnlab .fs-btn:active{transform:scale(.94);}
#cnnlab .ann-card:fullscreen{width:100vw; height:100vh; overflow-y:auto; border-radius:0; border:none; margin:0;
    background:linear-gradient(180deg,#eef4ff 0%,#f7fbff 100%);}
#cnnlab .ann-card:fullscreen .trainer-grid{grid-template-columns:280px 1fr 360px;}
#cnnlab .ann-card:fullscreen .trainer-side{display:flex;}
#cnnlab .trainer-grid{display:grid; grid-template-columns:220px 1fr; gap:16px; margin-top:8px;}
#cnnlab .trainer-side{display:none; flex-direction:column; gap:10px; min-width:0;}
@media (max-width:860px){#cnnlab .trainer-grid{grid-template-columns:1fr;}}
#cnnlab .trainer-main{min-width:0;}
#cnnlab .left-col{display:flex; flex-direction:column; gap:12px; align-self:start; min-width:0;}
#cnnlab .data-list-panel{background:#fff; border:2px solid #eaf3ff; border-radius:18px; padding:12px 10px;
    max-height:420px; overflow-y:auto; align-self:stretch;}
#cnnlab .data-list-panel .panel-title{font-size:13px; font-weight:800; color:#2f4a8a; margin-bottom:8px;
    display:flex; align-items:center; gap:6px;}
#cnnlab .data-list-panel .badge{font-size:11px; background:#eef3ff; color:#5a6b96; padding:0 10px; border-radius:30px; font-weight:700;}
#cnnlab .dl-row{display:flex; gap:8px; align-items:center; font-size:11px;
    padding:5px 8px; border-radius:8px; cursor:pointer; border:1px solid transparent;}
#cnnlab .dl-row:hover{background:#f0f6ff;}
#cnnlab .dl-row.active{background:#eef3ff; border-color:#7c8bff; font-weight:700;}
#cnnlab .dl-idx{color:#8a93b8; width:30px; flex-shrink:0; font-family:Consolas,Menlo,monospace;}
#cnnlab .dl-mini{display:grid; grid-template-columns:repeat(8,6px); gap:1px; background:#eef1f8; padding:2px; border-radius:3px; flex-shrink:0;}
#cnnlab .dl-mini .px{width:6px; height:6px; background:#fff;}
#cnnlab .dl-mini .px.on{background:#2f4a8a;}
#cnnlab .dl-out{color:#c44a8f; margin-left:auto; white-space:nowrap; font-family:Consolas,Menlo,monospace;}
#cnnlab .net-panel{padding:12px 14px;}
#cnnlab .cnn-layers{display:flex; gap:4px; align-items:flex-start; justify-content:space-between; flex-wrap:nowrap;
    padding:8px 0; overflow-x:auto;}
#cnnlab .cnn-layer{display:flex; flex-direction:column; align-items:center; gap:5px; background:#f8fafc;
    border:2px solid #e6edf4; border-radius:10px; padding:7px 6px; min-width:max-content;}
#cnnlab .cnn-layer .lbl{font-size:10px; font-weight:800; color:#2f4a8a; white-space:nowrap;}
#cnnlab .cnn-layer .sub{font-size:9px; color:#8a93b8; white-space:nowrap;}
#cnnlab .l-arrow{font-size:12px; color:#94a3b8; font-weight:300; align-self:center;}
#cnnlab .grid8{display:grid; grid-template-columns:repeat(8,10px); gap:1px; background:#dbe7ff; padding:2px; border-radius:5px;}
#cnnlab .grid8 .px{width:10px; height:10px; background:#fff;}
#cnnlab .grid8 .px.on{background:#5a6bff;}
#cnnlab .filters{display:flex; flex-direction:column; gap:6px; align-items:center;}
#cnnlab .f-group{display:flex; flex-direction:column; align-items:center; gap:2px;}
#cnnlab .f-tag{font-size:8px; font-weight:800; color:#8a93b8;}
#cnnlab .fl-grid{display:grid; grid-template-columns:repeat(3,22px); gap:1px; background:#eef1f8; padding:2px; border-radius:4px;}
#cnnlab .fl-grid .c{width:22px; height:22px; display:flex; align-items:center; justify-content:center; font-size:8px; font-weight:700;}
#cnnlab .fm-grid{display:grid; grid-template-columns:repeat(6,11px); gap:1px; background:#eef1f8; padding:2px; border-radius:4px;}
#cnnlab .fm-grid .c{width:11px; height:11px;}
#cnnlab .pool-grid{display:grid; grid-template-columns:repeat(3,14px); gap:1px; background:#eef1f8; padding:2px; border-radius:4px;}
#cnnlab .pool-grid .c{width:14px; height:14px;}
#cnnlab .fm3-grid{display:grid; grid-template-columns:repeat(3,12px); gap:1px; background:#eef1f8; padding:2px; border-radius:4px;}
#cnnlab .fm3-grid .c{width:12px; height:12px;}
#cnnlab .pool2-grid{display:grid; grid-template-columns:repeat(2,14px); gap:1px; background:#eef1f8; padding:2px; border-radius:4px;}
#cnnlab .pool2-grid .c{width:14px; height:14px;}
#cnnlab .out10{display:flex; flex-direction:column; gap:2px;}
#cnnlab .out10 .on{width:26px; height:26px; border-radius:50%; border:2px solid #ec4899; display:flex;
    align-items:center; justify-content:center; font-size:10px; font-weight:800; color:#c44a8f; background:#fff;}
#cnnlab .out10 .on.hot{background:#ec4899; color:#fff;}
#cnnlab .out10 .ov{font-size:8px; color:#8a93b8; text-align:center;}
#cnnlab .net-legend{display:flex; gap:14px; align-items:center; justify-content:center; font-size:11px; color:#5a6b96; flex-wrap:wrap; margin-top:4px;}
#cnnlab .net-legend .lg{display:inline-block; width:20px; height:5px; border-radius:3px;}
#cnnlab .net-legend .lg.red{background:#ef4444;}
#cnnlab .net-legend .lg.blue{background:#3b82f6;}
#cnnlab .side-panel{padding:12px 14px;}
#cnnlab .side-panel .status-bar{background:transparent; border:none; border-top:1px solid #e6edf4; border-radius:0;
    padding:10px 0 0; margin:0;}
#cnnlab #lossCanvas{width:100%; height:170px; display:block; border-radius:14px; margin-top:8px; background:#f8fafc;
    border:1px solid #e6edf4;}
#cnnlab .mn-wrap{display:flex; flex-wrap:wrap; gap:18px; align-items:flex-start;}
#cnnlab .mn-canvas-box{flex-shrink:0; text-align:center;}
#cnnlab .mn-canvas-box .panel-title{text-align:center;}
#cnnlab canvas#mnCanvas{width:364px; height:364px; background:#fff; border:3px solid #dbe7ff; border-radius:14px;
    cursor:crosshair; touch-action:none; image-rendering:pixelated;}
#cnnlab .mn-btns{display:flex; gap:8px; justify-content:center; margin-top:10px; flex-wrap:wrap;}
#cnnlab .mn-right{flex:1; min-width:280px;}
#cnnlab .mn-result{text-align:center; padding:10px 0 4px;}
#cnnlab .mn-result .num{font-size:84px; font-weight:800; line-height:1; color:#2f4a8a;}
#cnnlab .mn-result .num.hot{color:#ff6b6b; text-shadow:0 0 24px rgba(255,107,107,.5); animation:pop .3s ease;}
@keyframes pop { 0%{transform:scale(.6)} 60%{transform:scale(1.15)} 100%{transform:scale(1)} }
#cnnlab .mn-result .lbl{font-size:13px; color:#8a93b8; margin-top:4px;}
#cnnlab .mn-bars{margin-top:10px;}
#cnnlab .mn-bar-row{display:grid; grid-template-columns:22px 1fr 40px; gap:8px; align-items:center;
    font-size:12px; color:#3a4470; font-weight:700; margin:4px 0;}
#cnnlab .mn-bar-row .b{height:16px; border-radius:8px; background:#dbeafe; transition:width .18s ease;
    min-width:2px;}
#cnnlab .mn-bar-row.best .b{background:linear-gradient(90deg,#ffd76a,#ff9a3d);}
#cnnlab .mn-bar-row .pct{text-align:right; font-family:Consolas,Menlo,monospace; color:#5a6b96;}
#cnnlab .muted{color:#8a93b8; font-size:12px;}

/* ===== 内嵌容器（非作用域） ===== */
#cnnlab { background:#eef4ff; border-radius:18px; padding:14px 14px 8px; }
#cnnlab .cnn-head { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:2px 4px 12px; }
#cnnlab .cnn-head .ci { font-size:24px; }
#cnnlab .cnn-head b { color:#0d2259; font-size:17px; }
#cnnlab .cnn-head .cs { font-size:12px; color:#8496bb; }

/* ===== 布局修整（同第6课：两列铺满、左列面板均分高度） ===== */
#cnnlab .trainer-grid { grid-template-columns: 125px 1fr; }
@media (max-width:900px){ #cnnlab .trainer-grid { grid-template-columns:1fr; } }
#cnnlab .left-col { align-self:stretch; }
#cnnlab .data-list-panel { flex:1 1 0; min-height:0; max-height:none; }

/* CNN 层级图：单行流水线；压缩格子保证在右栏宽度内放得下，space-between 均匀铺开 */
#cnnlab .cnn-layers { flex-wrap: nowrap; justify-content: space-between; gap: 8px; overflow-x: hidden; }
#cnnlab .cnn-layer { min-width: 0; padding: 6px 5px; }
#cnnlab .cnn-layer .lbl { font-size: 9px; }
#cnnlab .cnn-layer .sub { font-size: 8px; }
#cnnlab .l-arrow { align-self: center; font-size: 11px; flex-shrink: 0; }
#cnnlab .grid8 { grid-template-columns: repeat(8, 6px); }
#cnnlab .grid8 .px { width: 6px; height: 6px; }
#cnnlab .f-tag { font-size: 7px; }
#cnnlab .fl-grid { grid-template-columns: repeat(3, 13px); }
#cnnlab .fl-grid .c { width: 13px; height: 13px; font-size: 7px; }
#cnnlab .fm-grid { grid-template-columns: repeat(6, 7px); }
#cnnlab .fm-grid .c { width: 7px; height: 7px; }
#cnnlab .fm3-grid { grid-template-columns: repeat(3, 8px); }
#cnnlab .fm3-grid .c { width: 8px; height: 8px; }
#cnnlab .pool-grid { grid-template-columns: repeat(3, 9px); }
#cnnlab .pool-grid .c { width: 9px; height: 9px; }
#cnnlab .pool2-grid { grid-template-columns: repeat(2, 9px); }
#cnnlab .pool2-grid .c { width: 9px; height: 9px; }
#cnnlab .out10 .on { width: 16px; height: 16px; font-size: 8px; }
#cnnlab .net-legend { margin-top: 2px; }

/* ---------- 真 MNIST 28×28 版（cnn-lab-real.js） ---------- */
#cnnlab .nvis{display:flex; gap:3px; align-items:stretch; justify-content:space-between; flex-wrap:nowrap; overflow-x:auto; padding:4px 2px 8px;}
#cnnlab .nvis .lay{flex:none; display:flex; flex-direction:column; align-items:center; gap:4px;
  background:#f8fafc; border:1px solid #e5edfb; border-radius:12px; padding:5px 4px;}
#cnnlab .nvis .lay .t{font-size:9.5px; font-weight:800; color:#2f4a8a; white-space:nowrap;}
#cnnlab .nvis .lay .s{font-size:8px; color:#8a93b8; text-align:center; line-height:1.35;}
/* 每层内部：单列竖排 */
#cnnlab .nvis .maps{display:flex; flex-direction:column; align-items:center; gap:3px; max-width:none;}
#cnnlab .nvis .map{display:flex; flex-direction:column; align-items:center; gap:1px; width:100%;}
#cnnlab .nvis .map canvas{image-rendering:pixelated; display:block; border-radius:3px;}
#cnnlab .nvis .inp canvas{border:1px solid #c7d6f2; border-radius:6px;}
#cnnlab .nvis .heat canvas{border:1px solid #e3eaf9;}
#cnnlab .nvis .arr{align-self:center; color:#9fb2d8; font-weight:800; font-size:13px; flex:none; padding:0;}
#cnnlab .nvis .outc{display:flex; flex-direction:column; align-items:center; gap:3px; max-width:none;}
#cnnlab .nvis .o{width:24px; height:24px; border-radius:50%; border:2px solid #ec4899; background:#fff; color:#d92f7f;
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800;}
#cnnlab .nvis .o.hot{background:#ec4899; color:#fff; box-shadow:0 2px 8px rgba(236,72,153,.4);}
#cnnlab .nvis .o.tgt{border-color:#f59e0b; border-width:3px;}
#cnnlab .nvis .fcbox{flex:1; width:100%; min-height:0; display:flex; align-items:center; justify-content:center;}
#cnnlab .nvis .fcbox canvas{display:block; max-width:100%; border-radius:8px; background:#f2f6fd; border:1px solid #e2ebfa;}
#cnnlab .dl-thumb{width:28px!important; height:28px!important; image-rendering:pixelated; background:#fff;}
#cnnlab .lrow{display:flex; align-items:center; gap:5px; padding:3px 4px; border-radius:8px; cursor:pointer;
  font-size:11px; border:1px solid transparent;}
#cnnlab .lrow:hover{background:#f0f6ff;}
#cnnlab .lrow.active{background:#eef3ff; border-color:#7c8bff; font-weight:700;}
#cnnlab .lrow .li{color:#8a93b8; font-family:Consolas,Menlo,monospace; flex:none;}
#cnnlab .lrow .lt{flex:none; display:flex;}
#cnnlab .lrow .lt canvas{border:1px solid #dfe7f7; border-radius:4px; image-rendering:pixelated; background:#fff;}
#cnnlab .lrow .lo{flex:1; color:#384f82; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#cnnlab .data-list-panel{max-height:480px; overflow-y:auto;}
#cnnlab .dr{display:flex; gap:8px; font-size:11px; line-height:1.7; padding:2px 0; font-family:Consolas,Menlo,monospace;}
#cnnlab .dr .k{flex:none; color:#5a6b96; font-weight:700; min-width:74px;}
#cnnlab .dr .v{color:#2f4a8a; word-break:break-all;}
#cnnlab .dr.seg{display:block; border-top:2px solid #e6edf4; margin-top:6px; padding-top:6px; color:#8a93b8; font-size:11px; font-weight:800;}

/* ===== 🎯 实际问题卡片：右侧「手写邮编识别」演示动画 ===== */
#cnnlab .prob-row{display:grid; grid-template-columns:minmax(0,1fr) 372px; gap:22px; align-items:start;}
#cnnlab .prob-row > ul{padding-left:18px;}
@media (max-width:900px){ #cnnlab .prob-row{grid-template-columns:1fr;} }

#cnnlab .zip-demo{background:linear-gradient(165deg,#f8fbff,#edf3ff); border:1px solid #dfe9fb; border-radius:18px; padding:13px 13px 10px;}
#cnnlab .zd-title{font-size:12.5px; font-weight:800; color:#2f6fd0; margin-bottom:9px; text-align:center;}
#cnnlab .zd-envelope{position:relative; background:#fff; border:2px solid #e3ebf8; border-radius:12px; padding:11px 11px 9px; box-shadow:0 6px 16px -12px rgba(47,107,255,.5); transition:border-color .35s ease, box-shadow .35s ease;}
#cnnlab .zd-envelope.done{border-color:#5fd08c; box-shadow:0 8px 20px -10px rgba(55,194,106,.6);}
#cnnlab .zd-stamp{position:absolute; top:9px; right:10px; width:34px; height:40px; border-radius:5px; background:linear-gradient(135deg,#ffe9c9,#ffd79a); border:1px dashed #e2a95a; display:flex; align-items:center; justify-content:center; font-size:17px; transition:background .35s ease, border-color .35s ease;}
#cnnlab .zd-stamp.done{background:linear-gradient(135deg,#dcf8e6,#a9edc3); border-color:#37c26a;}
#cnnlab .zd-addr{display:flex; flex-direction:column; gap:5px; padding-right:46px; margin-bottom:9px;}
#cnnlab .zd-addr i{display:block; height:4px; border-radius:3px; background:#e9eff9;}
#cnnlab .zd-addr i:nth-child(1){width:58%;}
#cnnlab .zd-addr i:nth-child(2){width:76%;}
#cnnlab .zd-addr i:nth-child(3){width:44%;}
#cnnlab .zd-zip{display:flex; gap:7px; justify-content:center;}
#cnnlab .zd-cell{width:40px; height:50px; border:2px solid #dfe7f6; border-radius:9px; display:flex; align-items:center; justify-content:center; font-family:'ZCOOL KuaiLe','Noto Serif SC',serif; font-size:26px; color:#33456e; background:#fff; transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;}
#cnnlab .zd-cell.scan{border-color:#2f80ed; background:#f2f7ff; transform:translateY(-4px) scale(1.06); box-shadow:0 0 0 3px rgba(47,128,237,.2);}
#cnnlab .zd-cell.ok{border-color:#5fd08c; background:#f1fbf5; color:#1f7a45;}
#cnnlab .zd-flow{text-align:center; font-size:11px; font-weight:800; color:#8a93b8; margin:7px 0 6px; letter-spacing:1px;}
#cnnlab .zd-out{display:flex; gap:6px; justify-content:center;}
#cnnlab .zd-slot{position:relative; width:40px; height:38px; border-radius:9px; background:#fff; border:1px solid #e6edf4; display:flex; align-items:center; justify-content:center; overflow:hidden; font-family:Consolas,Menlo,monospace; font-size:18px; font-weight:800; color:#c8d0e2; transition:background .25s ease, border-color .25s ease, color .25s ease;}
#cnnlab .zd-slot.fill{color:#1f7a45; background:#eefbf3; border-color:#a9e6c2; animation:zdPop .34s ease;}
#cnnlab .zd-slot .zd-d{transform:translateY(-2px);}
#cnnlab .zd-conf{position:absolute; left:0; right:0; bottom:0; height:3px; background:#eef2f8;}
#cnnlab .zd-conf b{display:block; height:100%; width:0; background:linear-gradient(90deg,#9fe3b9,#37c26a); transition:width .35s ease;}
@keyframes zdPop{0%{transform:scale(.55);}60%{transform:scale(1.16);}100%{transform:scale(1);}}
#cnnlab .zd-status{margin-top:9px; text-align:center; font-size:12px; font-weight:800; color:#5a6b96; min-height:18px; transition:color .2s ease;}
#cnnlab .zd-status.ok{color:#1f8a4c;}
#cnnlab .zd-hint{margin-top:5px; text-align:center; font-size:10.5px; color:#9aa4bf;}