#pplab{--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;}
#pplab *{margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
#pplab,
#pplab{height:100%;}
#pplab{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;}
#pplab .bg{position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden;}
#pplab .bg::before,
#pplab .bg::after{content:''; position:absolute; border-radius:50%; filter:blur(6px); opacity:.55;}
#pplab .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%);}
#pplab .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%);}
#pplab .bg .sun,
#pplab .bg .stars,
#pplab .bg .cloud,
#pplab .bg .balloon,
#pplab .stars2,
#pplab .stars{display:none;}
#pplab #app,
#pplab .page{position:relative; z-index:1; max-width:1100px; margin:0 auto; padding:14px 16px 80px;}
#pplab .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;}
#pplab .topbar .t{flex:1; color:#0d2259; font-weight:800; font-size:17px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;}
#pplab .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;}
#pplab .topbar .right{display:flex; align-items:center; gap:8px;}
#pplab .logo{color:#0d2259; font-weight:800; font-size:19px; letter-spacing:.3px;
  display:flex; align-items:center; gap:7px; text-decoration:none;}
#pplab .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;}
#pplab .logo-ic{font-size:26px; line-height:1; display:inline-block;}
#pplab .logo-name{position:relative;}
#pplab .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);}
#pplab .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;}
#pplab .back:hover{background:#dce8ff; transform:translateY(-1px);}
#pplab .back:active{transform:scale(.96);}
#pplab .btn-guide,
#pplab .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;}
#pplab .btn-guide:hover,
#pplab .backbtn:hover{transform:translateY(-2px); box-shadow:0 8px 20px -6px rgba(255,176,32,.75);}
#pplab .btn-guide:active,
#pplab .backbtn:active{transform:scale(.96);}
#pplab .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;}
#pplab .btn-gh:hover{transform:translateY(-2px);}
#pplab .btn-gh:active{transform:scale(.96);}
#pplab .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);}
#pplab .btn:active{transform:scale(.96);}
#pplab .btn-primary{background:linear-gradient(135deg,#2f6bff,#1e4fd6);}
#pplab .btn-success{background:linear-gradient(135deg,#12c98c,#0ea876);}
#pplab .btn-danger{background:linear-gradient(135deg,#ff8a9c,#f0446a);}
#pplab .btn-warning{background:linear-gradient(135deg,#ffd021,#ffb020); color:#7a4a00;}
#pplab .btn-ghost{background:#eef1fa; color:#5a638a; box-shadow:none;}
#pplab .btn-outline{background:transparent; border:2px solid #cfddfc; color:#1e4fd6; box-shadow:none;}
#pplab .btn:disabled{opacity:.5; cursor:default;}
#pplab .hero{text-align:center; padding:26px 10px 10px; position:relative;}
#pplab .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)} }
#pplab .hero h1{color:#0d2259; font-size:30px; margin:10px 0 6px; letter-spacing:.3px;}
#pplab .hero .tagline{color:#5469a0; font-size:16px;}
#pplab .hero .meta{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:16px;}
#pplab .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);}
#pplab .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);}
#pplab .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;}
#pplab .card h3{font-size:16px; color:#0d2259; margin-bottom:10px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
#pplab .card p,
#pplab .card li{font-size:14px; line-height:1.85; color:#384f82;}
#pplab .card ul{padding-left:20px;}
#pplab .badge{display:inline-block; background:#e8f0ff; color:#1e4fd6; padding:2px 11px; border-radius:30px; font-size:11px; font-weight:800;}
#pplab .muted{color:#8496bb; font-size:12px;}
#pplab .tl{position:relative; margin-top:10px; padding-bottom:10px;}
#pplab .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;}
#pplab .node{position:relative; padding-left:64px; margin-bottom:18px;}
#pplab .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);}
#pplab .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;}
#pplab .node .ncard:hover{transform:translateY(-2px); border-color:#cfddfc;}
#pplab .node .ncard:active{transform:scale(.98);}
#pplab .node .ncard.done{border-color:#12c98c; background:linear-gradient(180deg,#ffffff,#f2fcf7);}
#pplab .node .ncard.cur{border-color:#ffd021; box-shadow:0 12px 26px -12px rgba(255,176,32,.5);}
#pplab .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;}
#pplab .node .row{display:flex; align-items:center; gap:8px;}
#pplab .node .row .em{font-size:26px;}
#pplab .node .row .tt{flex:1;}
#pplab .node .row .tt b{font-size:16px; color:#0d2259; display:block;}
#pplab .node .row .tt span{font-size:12px; color:#8496bb;}
#pplab .node .state{font-size:15px;}
#pplab .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){#pplab .tl::before{left:50%; margin-left:-2px;}
#pplab .node{width:50%; padding-left:0;}
#pplab .node:nth-child(odd){left:0; padding-right:44px; text-align:right;}
#pplab .node:nth-child(even){left:50%; padding-left:44px;}
#pplab .node .dot{left:auto; right:-17px; top:14px;}
#pplab .node:nth-child(even) .dot{left:-17px; right:auto;}
#pplab .node .row{justify-content:flex-start;}
#pplab .node:nth-child(odd) .row{justify-content:flex-end;}
#pplab .node:nth-child(odd) .ncard .state::after{margin-left:0; margin-right:4px;}}
#pplab #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;}
#pplab #modal.open{display:flex;}
#pplab .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} }
#pplab .lesson .l-head{text-align:center; margin-bottom:14px;}
#pplab .lesson .l-head .lemo{font-size:58px; display:block;}
#pplab .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;}
#pplab .lesson .l-head h2{font-size:23px; color:#0d2259; margin:8px 0 3px;}
#pplab .lesson .l-head .ltag{font-size:13px; color:#8496bb;}
#pplab .sec{border-radius:16px; padding:14px 16px; margin-top:12px;}
#pplab .sec h4{font-size:14px; font-weight:800; margin-bottom:8px; display:flex; align-items:center; gap:6px;}
#pplab .sec p,
#pplab .sec li{font-size:14px; line-height:1.9; color:#46587d;}
#pplab .sec.story{background:#fff8e6;}
#pplab .sec.story h4{color:#9a6b00;}
#pplab .sec.teach{background:#eaf2ff;}
#pplab .sec.teach h4{color:#1e4fd6;}
#pplab .sec.act{background:#e7faf2;}
#pplab .sec.act h4{color:#0d9d6a;}
#pplab .sec.act ol{padding-left:20px;}
#pplab .sec.act li{margin:4px 0;}
#pplab .sec.think{background:#f3edff;}
#pplab .sec.think h4{color:#6d3fbd;}
#pplab .sec.quiz{background:#fff0f7;}
#pplab .sec.quiz h4{color:#c0448e;}
#pplab .sec.person{background:#fff4e8;}
#pplab .sec.person h4{color:#b96a1e;}
#pplab .sec.struct{background:#e7f7f5;}
#pplab .sec.struct h4{color:#147a6e;}
#pplab .quiz-q{font-size:15px; font-weight:800; color:#0d2259; margin-bottom:12px; line-height:1.7;}
#pplab .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;}
#pplab .opt:hover{border-color:#2f6bff; background:#f5f8ff;}
#pplab .opt.right{border-color:#12c98c; background:#e7faf2; color:#0d7a51; font-weight:800;}
#pplab .opt.wrong{border-color:#f0446a; background:#fff0f3; color:#c02b4e;}
#pplab .opt:disabled{cursor:default;}
#pplab .quiz-fb{display:none; margin-top:12px; font-size:13px; line-height:1.7; border-radius:14px; padding:10px 14px;}
#pplab .quiz-fb.show{display:block;}
#pplab .quiz-fb.ok{background:#e7faf2; color:#0d7a51;}
#pplab .quiz-fb.no{background:#fff0f3; color:#c02b4e;}
#pplab .l-nav{display:flex; gap:10px; margin-top:18px;}
#pplab .l-nav button{flex:1; border:none; border-radius:16px; padding:13px; font-size:15px; font-weight:800;
  cursor:pointer; transition:.15s;}
#pplab .l-nav button:active{transform:scale(.97);}
#pplab .btn-next{background:linear-gradient(135deg,#2f6bff,#1e4fd6); color:#fff;
  box-shadow:0 8px 20px -8px rgba(47,107,255,.7);}
#pplab .btn-prev{background:#eef1fa; color:#5a638a;}
#pplab .btn-next.done{background:linear-gradient(135deg,#12c98c,#0ea876); box-shadow:0 8px 20px -8px rgba(18,201,140,.6);}
#pplab .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;}
#pplab .l-close:hover{background:#e1e6f6;}
#pplab .panel{background:#fff; border-radius:16px; border:1px solid #eef2fc; padding:14px 16px;
  box-shadow:0 6px 18px -6px rgba(47,107,255,.16);}
#pplab .panel-title{font-size:14px; font-weight:800; color:#0d2259; margin-bottom:12px; display:flex; align-items:center; gap:8px;}
#pplab .panel-title .badge{font-size:11px; background:#e8f0ff; color:#1e4fd6; padding:0 10px; border-radius:30px; font-weight:800;}
#pplab .ctrl-group{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:4px;}
#pplab .ctrl-label{font-size:13px; color:#46587d; font-weight:700;}
#pplab .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;}
#pplab .ctrl-input:focus{border-color:#2f6bff; box-shadow:0 0 0 3px rgba(47,107,255,.15);}
#pplab .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;}
#pplab .status-item{display:flex; align-items:center; gap:6px;}
#pplab .status-item .dot{width:8px; height:8px; border-radius:50%; display:inline-block;}
#pplab .dot.green{background:#12c98c;}
#pplab .dot.blue{background:#2f6bff;}
#pplab .dot.orange{background:#ff9f1c;}
#pplab .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;}
#pplab .data-row .label{color:#5a6d99; font-weight:700; white-space:nowrap;}
#pplab .data-row .value{font-family:Consolas,Menlo,monospace; font-size:13px; color:#0d2259; word-break:break-all;}
#pplab .data-row .value.highlight{background:#fff7da; padding:0 6px; border-radius:6px;}
#pplab .data-row .value.fw{font-weight:700;}
#pplab .scroll-data{max-height:400px; overflow-y:auto; padding-right:4px;}
#pplab .scroll-data::-webkit-scrollbar{width:5px;}
#pplab .scroll-data::-webkit-scrollbar-thumb{background:#c9d6f2; border-radius:10px;}
#pplab .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;}
#pplab .fmt b{color:#f2559d;}
#pplab .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);}
#pplab .data-list-panel .panel-title{font-size:13px; font-weight:800; color:#0d2259; margin-bottom:8px;
  display:flex; align-items:center; gap:6px;}
#pplab .data-list-panel .badge{font-size:11px; background:#e8f0ff; color:#1e4fd6;
  padding:0 10px; border-radius:30px; font-weight:800;}
#pplab .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;}
#pplab .dl-row:hover{background:#e8f0ff;}
#pplab .dl-row.active{background:#e8f0ff; border-color:#2f6bff; font-weight:700;}
#pplab .dl-idx{color:#8496bb;}
#pplab .dl-out{color:#f2559d; margin-left:auto; white-space:nowrap;}
#pplab .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);}
#pplab .fs-btn:hover{background:#dce8ff; transform:scale(1.06);}
#pplab .fs-btn:active{transform:scale(.94);}
#pplab .net-legend{display:flex; gap:14px; align-items:center; justify-content:center; font-size:11px;
  color:#384f82; flex-wrap:wrap;}
#pplab .net-legend .lg{display:inline-block; width:20px; height:5px; border-radius:3px;}
#pplab .net-legend .lg.red{background:#f0446a;}
#pplab .net-legend .lg.blue{background:#2f6bff;}
#pplab #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);}
#pplab #toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
#pplab .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){#pplab .topbar{flex-wrap:wrap;}
#pplab .hero h1{font-size:25px;}
#pplab .hero .big{font-size:60px;}
#pplab #app,
#pplab .page{padding:10px 10px 70px;}}
#pplab #app{max-width:1100px;}
#pplab .hero{text-align:center; padding:26px 10px 10px;}
#pplab .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));}
#pplab .hero h1{color:#0d2259; font-size:28px; margin:8px 0 6px;}
#pplab .hero .tagline{color:#5469a0; font-size:15px;}
#pplab .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;}
#pplab .fmt b{color:#f2559d;}
#pplab .truth-table{width:100%; border-collapse:separate; border-spacing:0; background:#fff; border-radius:14px;
    overflow:hidden; box-shadow:0 4px 10px rgba(120,160,210,.15); font-size:14px; margin:8px 0 4px;}
#pplab .truth-table th{background:#7c8bff; color:#fff; padding:9px;}
#pplab .truth-table td{padding:8px; text-align:center; border-top:1px solid #eef3f8; font-weight:600; color:#3a4470;}
#pplab .truth-table td.out0{color:#b03333;}
#pplab .truth-table td.out1{color:#177a45;}
#pplab .truth-table tr.sel{background:#eef3ff;}
#pplab .ann-card{position:relative;}
#pplab .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);}
#pplab .fs-btn:hover{background:#dbe7ff; transform:scale(1.06);}
#pplab .fs-btn:active{transform:scale(.94);}
#pplab .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%);}
/* 单步全屏：训练数据留在最左列，网络图占中间，状态在右 */
#pplab .ann-card:fullscreen .trainer-grid{grid-template-columns:240px 1fr 320px; grid-template-areas:"left main side"; gap:14px; align-items:start;}
#pplab .ann-card:fullscreen .trainer-main{grid-area:main;}
#pplab .ann-card:fullscreen .trainer-side{grid-area:side; display:flex;}
#pplab .ann-card:fullscreen .data-list-panel{grid-area:left; max-height:none; overflow:visible;}
@media (max-width:1180px){
  #pplab .ann-card:fullscreen .trainer-grid{grid-template-columns:210px 1fr; grid-template-areas:"left main" "left side";}
}
#pplab .ann-card:fullscreen .ann-intro{display:none;}
#pplab .ann-card:fullscreen .net-viz svg{max-width:none;}
#pplab .ann-card:fullscreen .net-legend{font-size:12.5px;}
#pplab .ann-card:fullscreen #lossCanvas{width:auto; height:120px;}
#pplab .ann-card:fullscreen .step-hint{font-size:13px;}
#pplab .trainer-grid{display:grid; grid-template-columns:240px 1fr; gap:16px; margin-top:8px;}
#pplab .trainer-side{display:none; flex-direction:column; gap:10px; min-width:0;}
@media (max-width:860px){#pplab .trainer-grid{grid-template-columns:1fr;}}
#pplab .trainer-main{min-width:0;}
/* 单步步骤提示条 */
#pplab .step-hint{display:flex; align-items:center; gap:10px; margin-top:10px;
    background:linear-gradient(135deg,#fffdec,#fff7d9); border:1px solid #f2e2ac;
    border-radius:14px; padding:9px 14px; font-size:12.5px; color:#6d5514; line-height:1.6;}
#pplab .step-hint.back{background:linear-gradient(135deg,#faf6ff,#f2eaff); border-color:#ddccff; color:#5b3a99;}
#pplab .step-hint .sh-step{flex:0 0 auto; background:#f5b301; color:#5a4307; font-weight:800;
    padding:2px 11px; border-radius:30px; font-size:11.5px; white-space:nowrap;}
#pplab .step-hint.back .sh-step{background:#a855f7; color:#fff;}
#pplab .step-hint .sh-text{flex:1 1 auto;}
#pplab .step-hint .sh-text b{color:#b45309;}
#pplab .step-hint.back .sh-text b{color:#7c3aed;}
#pplab .step-hint .sh-next{color:#9aa8c4; font-size:11.5px;}
#pplab .net-legend .lg.gold{background:#f5b301;}
#pplab .net-legend .lg.purple{background:#a855f7;}
#pplab .data-list-panel{background:#fff; border:2px solid #eaf3ff; border-radius:18px; padding:12px 10px;
    max-height:560px; overflow-y:auto; align-self:start;}
#pplab .data-list-panel .panel-title{font-size:13px; font-weight:800; color:#2f4a8a; margin-bottom:8px;
    display:flex; align-items:center; gap:6px;}
#pplab .data-list-panel .badge{font-size:11px; background:#eef3ff; color:#5a6b96; padding:0 10px; border-radius:30px; font-weight:700;}
#pplab .dl-row{display:flex; gap:6px; align-items:center; font-family:Consolas,Menlo,monospace; font-size:11px;
    padding:6px 8px; border-radius:8px; cursor:pointer; border:1px solid transparent;}
#pplab .dl-row:hover{background:#f0f6ff;}
#pplab .dl-row.active{background:#eef3ff; border-color:#7c8bff; font-weight:700;}
#pplab .dl-idx{color:#8a93b8; width:24px; flex-shrink:0;}
#pplab .dl-in{color:#3a4470;}
#pplab .dl-out{color:#c44a8f; margin-left:auto; white-space:nowrap;}
#pplab .task-picker{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 4px;}
#pplab .task-btn{border:none; border-radius:30px; padding:8px 16px; font-size:13px; font-weight:800; cursor:pointer;
    background:#eef0f7; color:#5a607a; transition:.15s; border:2px solid transparent;}
#pplab .task-btn.active{background:linear-gradient(135deg,#7c8bff,#5a6bff); color:#fff;}
#pplab .task-btn.xor.active{background:linear-gradient(135deg,#ff9a9a,#ef4444); color:#fff;}
#pplab .task-desc{font-size:12px; color:#8a93b8; margin-bottom:8px;}
#pplab .net-panel{display:flex; flex-direction:column; align-items:stretch; gap:4px;}
#pplab .net-side{flex:1; min-width:0;}
#pplab .net-viz{display:flex; justify-content:center; align-items:center; padding:10px 0 8px; overflow-x:auto;}
#pplab .net-viz svg{width:100%; max-width:760px; height:auto; display:block;}
#pplab .net-legend{display:flex; gap:14px; align-items:center; justify-content:center; font-size:11px; color:#5a6b96; flex-wrap:wrap;}
#pplab .net-legend .lg{display:inline-block; width:20px; height:5px; border-radius:3px;}
#pplab .net-legend .lg.red{background:#ef4444;}
#pplab .net-legend .lg.blue{background:#3b82f6;}
#pplab .side-panel{padding:12px 14px;}
#pplab .side-panel .status-bar{background:transparent; border:none; border-top:1px solid #e6edf4; border-radius:0;
    padding:10px 0 0; margin:0;}
#pplab #lossCanvas{width:100%; height:170px; display:block; border-radius:14px; margin-top:8px; background:#f8fafc;
    border:1px solid #e6edf4;}
#pplab .demo-wrap{display:flex; flex-wrap:wrap; gap:18px; align-items:flex-start;}
#pplab .demo-canvas-wrap{flex-shrink:0;}
#pplab #demoCanvas{width:300px; height:300px; background:#fff; border:3px solid #dbe7ff; border-radius:16px;
    box-shadow:0 8px 20px rgba(120,160,210,.18); display:block;}
#pplab .demo-side{flex:1; min-width:230px;}
#pplab .demo-legend{display:flex; gap:14px; align-items:center; font-size:12px; color:#5a6b96; flex-wrap:wrap; margin-top:8px;}
#pplab .dot{display:inline-block; width:14px; height:14px; border-radius:50%;}
#pplab .dot.g{background:#22c55e; border:2px solid #fff; box-shadow:0 0 0 2px #22c55e;}
#pplab .dot.r{background:#ef4444; border:2px solid #fff; box-shadow:0 0 0 2px #ef4444;}

/* ===== 内嵌容器（非作用域） ===== */
#pplab { background:#eef4ff; border-radius:18px; padding:14px 14px 6px; }

/* ============================================================
   Mark I 感知机真机结构图（第3课 s3 顶部卡片）
   点阵用 background-image:radial-gradient 平铺画出来，不用几百个 DOM
   ============================================================ */
#pplab .mk1-wrap{display:flex;align-items:flex-start;justify-content:center;gap:8px;flex-wrap:wrap;margin:14px 0 2px;}
#pplab .mk1-col{text-align:center;min-width:0;}
#pplab .mk1-h{font-size:12.5px;font-weight:800;color:var(--ink);line-height:1.45;}
#pplab .mk1-n{display:inline-block;margin:2px 0 0 4px;font-size:11px;font-weight:700;color:#2f6bff;background:#e8f0ff;border:1px solid #cfddfc;border-radius:20px;padding:0 8px;}
#pplab .mk1-box{margin:8px auto 0;border-radius:12px;border:1px solid #dbe7ff;background:#fff;box-shadow:0 8px 20px -16px rgba(47,107,255,.75);}
/* 400 个光电管：20 × 20 点阵 */
#pplab .mk1-retina{width:150px;height:150px;background-image:radial-gradient(circle,#7fb0ff 0 2.1px,rgba(127,176,255,0) 2.4px);background-size:7.5px 7.5px;background-position:3.75px 3.75px;}
/* 512 个 A 单元：16 × 32 点阵 */
#pplab .mk1-aunits{width:75px;height:150px;background-image:radial-gradient(circle,#a98cf8 0 1.5px,rgba(169,140,248,0) 1.8px);background-size:4.6875px 4.6875px;background-position:2.3438px 2.3438px;}
/* 8 个 R 单元 */
#pplab .mk1-runits{width:78px;height:150px;display:flex;flex-direction:column;align-items:center;justify-content:space-around;padding:4px 0;}
#pplab .mk1-runits i{width:15px;height:15px;border-radius:50%;background:#d1fae5;border:2px solid #12c98c;font-size:8px;font-weight:800;font-style:normal;color:#0d7a52;display:flex;align-items:center;justify-content:center;}
#pplab .mk1-cap{margin:6px auto 0;font-size:11px;line-height:1.5;color:#8496bb;max-width:140px;}
#pplab .mk1-arrow{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:120px;padding-top:62px;}
#pplab .mk1-arrow-t{font-size:10.5px;font-weight:800;color:#5a6b96;text-align:center;line-height:1.4;}
#pplab .mk1-arrow-a{font-size:19px;line-height:1;color:#9db4e0;}
#pplab .mk1-arrow-s{font-size:10px;color:#8496bb;text-align:center;line-height:1.4;}
#pplab .mk1-note{margin-top:14px;font-size:12.5px;line-height:1.95;color:#3a4470;background:#f6f9ff;border:1px dashed #cfddfc;border-radius:12px;padding:10px 14px;}
#pplab .mk1-note code{background:#e8f0ff;border-radius:6px;padding:1px 6px;font-size:12px;}
#pplab .mk1-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
#pplab .mk1-badge{font-size:11.5px;font-weight:700;color:#2f6bff;background:#e8f0ff;border:1px solid #cfddfc;border-radius:20px;padding:3px 10px;}
@media (max-width:960px){
  #pplab .mk1-wrap{flex-direction:column;align-items:center;}
  #pplab .mk1-arrow{width:auto;padding-top:0;flex-direction:row;gap:8px;}
  #pplab .mk1-arrow-a{transform:rotate(90deg);}
}

/* ---- 故事页配图统一「科技感」：深色相框 + 橙色描边（与本课自制示意图同一套视觉） ---- */
.st-card .st-fig img{background:#0A1330;border-color:rgba(255,159,67,.34);
  box-shadow:0 0 0 1px rgba(10,19,48,.08),0 12px 26px -18px rgba(10,19,48,.8);}

/* 生物神经元是维基的浅底图：单独给它浅色相框，否则深色底会在上下留黑边、也影响可读性 */
.st-card .st-fig.bio img{background:#fff;border-color:rgba(232,132,44,.30);
  box-shadow:0 0 0 1px rgba(10,19,48,.06),0 10px 24px -18px rgba(10,19,48,.6);}