@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@500;700;900&family=Noto+Sans+SC:wght@400;500;700&family=JetBrains+Mono:wght@400;600&display=swap');

:root{
  /* 浅色主题 — 与 index.html 统一的纸质暖色调 */
  --brass:#c9952c; --brass-soft:#e3b65a; --brass-bg:rgba(201,149,44,0.08);
  --rust:#c1543a; --rust-soft:#d4755e;
  --teal:#2f8a76; --teal-soft:#4db8a0;
  --paper:#f6f1e4; --paper-card:#fffdf6; --paper-soft:#efe8d4;
  --ink:#14171f;
  --text-dark:#20242c; --text-dark-dim:#5b5a4f; --text-dark-faint:#8a8472;
  --text-light:#ece7da; --text-dim:#9aa0b4;
  --line:rgba(60,40,10,0.10);
  --line-strong:rgba(60,40,10,0.18);
  --shadow:0 8px 24px rgba(60,40,10,.10);
  --code-bg:#282c34;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--paper);font-family:'Noto Sans SC',sans-serif;color:var(--text-dark);}
code,.mono{font-family:'JetBrains Mono','Noto Sans SC',monospace;}
h1,h2,h3,.serif{font-family:'Noto Serif SC',serif;}

/* ---------- app shell ---------- */
.app{display:flex;height:100vh;width:100vw;overflow:hidden;}

/* ---------- sidebar ---------- */
.sidebar{width:252px;flex-shrink:0;background:var(--paper-soft);border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:relative;transition:width .3s ease;overflow:hidden;z-index:40;}
.sidebar.collapsed{width:58px;}
.sidebar-toggle{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:8px;border:1px solid var(--line);
  background:var(--paper-card);color:var(--text-dark-dim);cursor:pointer;font-size:15px;z-index:5;
  display:flex;align-items:center;justify-content:center;transition:background .2s ease;}
.sidebar-toggle:hover{background:var(--brass-bg);border-color:var(--brass);}
.sidebar.collapsed .sidebar-toggle{right:13px;}
.sidebar-head{padding:18px 50px 14px 18px;margin-top:46px;border-bottom:1px solid var(--line);min-height:14px;}
.sidebar-lesson-title{font-family:'Noto Serif SC',serif;font-size:14.5px;color:var(--text-dark);font-weight:700;line-height:1.45;white-space:nowrap;}
.sidebar-lesson-sub{font-size:10.5px;color:var(--text-dark-faint);margin-top:5px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;}
.sidebar.collapsed .sidebar-head{opacity:0;}
.sidebar-list{flex:1;overflow-y:auto;overflow-x:hidden;padding:10px 10px 20px;}
.sidebar-list::-webkit-scrollbar{width:5px;}
.sidebar-list::-webkit-scrollbar-thumb{background:rgba(60,40,10,.15);border-radius:3px;}
.sidebar-item{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;cursor:pointer;
  font-size:12.5px;color:var(--text-dark-dim);margin-bottom:2px;white-space:nowrap;transition:background .15s ease,color .15s ease;}
.sidebar-item:hover{background:rgba(201,149,44,.08);color:var(--text-dark);}
.sidebar-item.active{background:rgba(201,149,44,.14);color:var(--brass);}
.sidebar-item .num{width:21px;height:21px;border-radius:50%;background:rgba(60,40,10,.08);
  display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0;font-family:'JetBrains Mono',monospace;color:var(--text-dark-dim);}
.sidebar-item.active .num{background:var(--brass);color:#fffdf6;}
.sidebar-item .label{overflow:hidden;text-overflow:ellipsis;opacity:1;transition:opacity .15s ease;}
.sidebar.collapsed .sidebar-item{justify-content:center;padding:9px 0;}
.sidebar.collapsed .sidebar-item .label{opacity:0;width:0;}
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:35;opacity:0;
  pointer-events:none;transition:opacity .25s ease;}

@media (max-width:760px){
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:250px;transform:translateX(-100%);
    box-shadow:0 0 30px rgba(0,0,0,.15);}
  .sidebar:not(.collapsed){transform:translateX(0);}
  .sidebar.collapsed{width:250px;}
  .sidebar.collapsed .sidebar-head,.sidebar.collapsed .sidebar-item .label{opacity:1;width:auto;}
  .sidebar.collapsed .sidebar-item{justify-content:flex-start;padding:9px 10px;}
  .sidebar-backdrop{display:block;}
  .app.sidebar-open .sidebar-backdrop{opacity:1;pointer-events:auto;}
}

/* ---------- main column ---------- */
.main{flex:1;min-width:0;display:flex;flex-direction:column;height:100%;position:relative;}

/* ---------- top bar ---------- */
.topbar{flex-shrink:0;height:54px;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:0 22px;
  background:rgba(246,241,228,0.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);font-size:13px;color:var(--text-dark-dim);}
.topbar .meta{display:flex;gap:18px;align-items:center;}
.topbar .title{color:var(--text-dark);font-weight:700;font-size:15px;font-family:'Noto Serif SC',serif;}
.topbar .pill{padding:3px 10px;border-radius:20px;background:rgba(201,149,44,0.15);color:var(--brass);font-size:11px;font-weight:600;}
.topbar .nav-links{display:flex;gap:14px;}
.topbar .nav-links span{cursor:pointer;opacity:.7;transition:opacity .2s ease,color .2s ease;}
.topbar .nav-links span:hover{opacity:1;color:var(--brass);}

/* ---------- deck ---------- */
.deck-viewport{flex:1;position:relative;overflow:hidden;}
.deck{position:absolute;top:0;left:0;height:100%;display:flex;transition:transform .65s cubic-bezier(.65,0,.35,1);will-change:transform;}
.slide{height:100%;flex-shrink:0;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 8vw 70px;overflow:hidden;}

/* 浅色主题下，slide 统一用纸质底色，交替用微妙的深浅变化 */
.slide.dark{background:radial-gradient(ellipse at 30% 20%,#fffbef 0%,var(--paper) 65%);color:var(--text-dark);}
.slide.light{background:var(--paper-card);color:var(--text-dark);}

.eyebrow{font-size:12px;letter-spacing:.18em;color:var(--brass);font-weight:700;margin-bottom:14px;text-transform:uppercase;}
.slide.light .eyebrow{color:var(--rust);}
.big{font-size:clamp(26px,4vw,50px);line-height:1.28;font-weight:700;max-width:880px;text-align:center;margin:0 0 18px;color:var(--text-dark);}
.sub{font-size:clamp(14px,1.4vw,18px);color:var(--text-dark-dim);max-width:640px;text-align:center;line-height:1.7;}

.emblem{width:96px;height:96px;margin-bottom:24px;display:flex;align-items:center;justify-content:center;font-size:64px;filter:drop-shadow(0 8px 18px rgba(201,149,44,0.35));}
.title-foot{position:absolute;bottom:54px;display:flex;gap:26px;font-size:12.5px;color:var(--text-dark-dim);flex-wrap:wrap;justify-content:center;}
.title-foot b{color:var(--brass);}

/* ---------- cards ---------- */
.row{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;max-width:980px;}
.card{background:var(--paper-card);border-radius:14px;padding:22px;width:230px;box-shadow:var(--shadow);border:1px solid var(--line);}
.slide.light .card{background:var(--paper);box-shadow:0 4px 12px rgba(60,40,10,.06);border:1px solid var(--line);}
.card .ic{font-size:26px;margin-bottom:10px;}
.card h4{margin:0 0 6px;font-size:15px;color:var(--text-dark);}
.card p{margin:0;font-size:12.5px;line-height:1.6;color:var(--text-dark-dim);}

/* ---------- scene (story flow) ---------- */
.scene{display:flex;align-items:center;gap:54px;flex-wrap:wrap;justify-content:center;margin-top:6px;}
.scene-item{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:13px;color:var(--text-dark-dim);}
.scene-item .icon-box{width:84px;height:84px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:40px;
  background:var(--paper-card);border:1px solid var(--line);box-shadow:0 4px 12px rgba(60,40,10,.06);}
.slide.dark .scene-item .icon-box{background:var(--paper-card);box-shadow:var(--shadow);}
.scene-arrow{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--brass);font-size:12px;}

/* ---------- mapping grid ---------- */
.map-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:10px 18px;width:100%;max-width:620px;align-items:center;}
.map-grid .life{text-align:right;font-size:15px;color:var(--text-dark-dim);}
.map-grid .rust{text-align:left;font-size:15px;font-weight:700;color:var(--brass);}
.map-grid .mid{color:var(--rust);font-size:14px;}
.map-row{display:contents;}
.map-row > div{padding:10px 4px;border-bottom:1px dashed var(--line);}
.map-row:last-child > div{border-bottom:none;}

/* ---------- code box (保持深色背景，代码可读性更好) ---------- */
.codebox{width:min(700px,86vw);background:var(--code-bg);border-radius:12px;padding:22px 26px;
  box-shadow:0 14px 34px rgba(0,0,0,.25),0 0 0 1px rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
  font-family:'JetBrains Mono',monospace;font-size:13.5px;line-height:1.85;color:#cfd6e6;text-align:left;}
.codebox .ln{color:#636d88;display:inline-block;width:22px;}
.codebox .kw{color:#c792ea;} .codebox .fn{color:#82aaff;} .codebox .str{color:#c3e88d;}
.codebox .cm{color:#7f8798;} .codebox .hl1{background:rgba(201,149,44,.18);border-radius:4px;} .codebox .hl2{background:rgba(193,84,58,.18);border-radius:4px;}

/* ---------- transfer (钥匙转移动画) ---------- */
.transfer-stage{display:flex;align-items:center;justify-content:center;gap:70px;width:100%;max-width:760px;margin-top:10px;flex-wrap:wrap;}
.box{width:200px;height:170px;border-radius:14px;background:var(--paper-card);border:2px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  transition:all .5s ease;position:relative;box-shadow:0 4px 12px rgba(60,40,10,.06);}
.box .label{font-size:13px;color:var(--text-dark-dim);font-family:'JetBrains Mono',monospace;}
.box .key-slot{width:46px;height:46px;display:flex;align-items:center;justify-content:center;font-size:36px;transition:all .55s cubic-bezier(.65,0,.35,1);}
.box.empty .key-slot{opacity:0;transform:scale(.4) rotate(-40deg);}
.box.empty{border-color:var(--rust-soft);background:rgba(193,84,58,.04);}
.box.empty::after{content:attr(data-empty-label);position:absolute;bottom:14px;font-size:11px;color:var(--rust);}
.box.has .key-slot{opacity:1;transform:scale(1) rotate(0);}
.box.has{border-color:var(--brass);box-shadow:0 0 0 4px rgba(201,149,44,.08),var(--shadow);}
.transfer-arrow{display:flex;flex-direction:column;align-items:center;gap:8px;}
.transfer-btn{margin-top:30px;padding:11px 26px;border-radius:30px;border:none;cursor:pointer;
  background:var(--brass);color:#fffdf6;font-weight:700;font-size:13.5px;letter-spacing:.02em;
  box-shadow:0 8px 20px rgba(201,149,44,.25);transition:transform .15s ease;}
.transfer-btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(201,149,44,.35);}
.transfer-btn:active{transform:translateY(0);}
.transfer-note{margin-top:14px;font-size:12.5px;color:var(--text-dark-dim);min-height:18px;max-width:560px;text-align:center;}

/* ---------- memory (Stack/Heap) ---------- */
.mem-wrap{display:flex;gap:36px;width:100%;max-width:820px;justify-content:center;align-items:flex-start;margin-top:10px;flex-wrap:wrap;}
.mem-col{flex:1;min-width:260px;max-width:330px;}
.mem-col h5{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);margin:0 0 12px;text-align:center;}
.stack-slot{background:var(--paper-card);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:10px;
  font-family:'JetBrains Mono',monospace;font-size:12px;transition:all .5s ease;box-shadow:0 2px 8px rgba(60,40,10,.04);}
.stack-slot .vn{color:var(--brass);font-weight:700;}
.stack-slot.faded{opacity:.32;text-decoration:line-through;}
.heap-block{background:var(--paper-card);border:1px solid rgba(47,138,118,.5);border-radius:10px;padding:18px;text-align:center;
  font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--teal);box-shadow:0 2px 8px rgba(60,40,10,.04);}

/* ---------- app grid ---------- */
.app-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:760px;width:100%;}
@media (max-width:760px){.app-grid{grid-template-columns:1fr 1fr;}}

/* ---------- misconceptions ---------- */
.miswrap{display:flex;flex-direction:column;gap:14px;width:100%;max-width:680px;}
.mis{display:flex;gap:14px;background:var(--paper-card);border-radius:12px;padding:16px 18px;border:1px solid var(--line);box-shadow:0 2px 8px rgba(60,40,10,.04);}
.mis .x{color:var(--rust);font-weight:700;font-size:15px;}
.mis p{margin:4px 0;font-size:13px;line-height:1.6;color:var(--text-dark-dim);}
.mis b{color:var(--text-dark);}
.mis .o{color:var(--teal);font-weight:700;}

/* ---------- summary ---------- */
.sumlist{list-style:none;padding:0;margin:0 0 26px;max-width:640px;width:100%;}
.sumlist li{padding:11px 0 11px 30px;border-bottom:1px dashed var(--line);font-size:14.5px;line-height:1.6;position:relative;color:var(--text-dark);}
.sumlist li::before{content:'';position:absolute;left:0;top:18px;width:8px;height:8px;border-radius:50%;background:var(--rust);}
.sumlist li:last-child{border-bottom:none;}
.mantra{background:var(--ink);color:var(--brass-soft);padding:18px 28px;border-radius:14px;
  font-family:'Noto Serif SC',serif;font-size:16px;text-align:center;max-width:600px;
  box-shadow:0 12px 28px rgba(0,0,0,.12);}
.disclaimer{margin-top:18px;font-size:11.5px;color:var(--text-dark-faint);max-width:560px;text-align:center;font-style:italic;}
.footlinks{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap;justify-content:center;}
.footlinks span{font-size:12px;padding:8px 16px;border-radius:20px;background:rgba(201,149,44,.06);
  color:var(--text-dark-dim);cursor:pointer;border:1px solid var(--line);transition:all .2s ease;}
.footlinks span:hover{background:var(--rust);color:#fff;border-color:var(--rust);}

/* ---------- controls ---------- */
.controls{position:absolute;bottom:0;left:0;right:0;height:64px;z-index:20;
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(to top,rgba(246,241,228,.9),transparent);pointer-events:none;}
.controls .dot{pointer-events:auto;}
.dot{width:9px;height:9px;border-radius:50%;background:rgba(60,40,10,.2);cursor:pointer;transition:all .25s ease;position:relative;}
.dot.active{background:var(--brass);width:24px;border-radius:6px;}
.dot:hover{background:var(--brass-soft);}
.arrow-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:20;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);
  cursor:pointer;background:rgba(255,253,246,.85);color:var(--text-dark);font-size:18px;backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;transition:all .2s ease;box-shadow:0 4px 12px rgba(60,40,10,.08);}
.arrow-btn:hover{background:var(--paper-card);border-color:var(--brass);box-shadow:0 6px 16px rgba(60,40,10,.12);}
.arrow-btn.prev{left:18px;} .arrow-btn.next{right:18px;}
.arrow-btn:disabled{opacity:.25;cursor:default;}

.topbar-toggle{display:none;width:32px;height:32px;border-radius:8px;border:1px solid var(--line);
  background:var(--paper-card);color:var(--text-dark);cursor:pointer;font-size:15px;
  align-items:center;justify-content:center;flex-shrink:0;margin-right:14px;}
.topbar-toggle:hover{background:var(--brass-bg);border-color:var(--brass);}

@media (max-width:760px){
  .scene{flex-direction:column;gap:24px;}
  .transfer-stage{flex-direction:column;gap:30px;}
  .mem-wrap{flex-direction:column;align-items:center;}
  .arrow-btn{width:38px;height:38px;font-size:15px;}
  .topbar .meta{display:none;}
  .topbar .nav-links{display:none;}
  .topbar-toggle{display:flex;}
}

/* ---------- 嵌入式模式（iframe 内） ---------- */
html,body.embedded{height:auto;overflow:visible;overflow-y:visible;}
body.embedded .sidebar,
body.embedded .sidebar-backdrop{display:none !important;}
body.embedded .app{display:block;height:auto;min-height:auto;}
body.embedded .main{display:block;height:auto;min-height:auto;position:static;}
body.embedded .topbar{position:relative;}
body.embedded .deck-viewport{height:auto;overflow:visible;position:relative;flex:none;}
body.embedded .deck{position:relative;height:auto;transform:none !important;transition:none !important;display:block;}
body.embedded .slide{height:auto;min-height:500px;flex-shrink:0;padding:40px 6vw 60px;}
body.embedded .arrow-btn{display:none;}
body.embedded .controls{display:none;}
body.embedded .topbar-toggle{display:none;}
@media (prefers-reduced-motion: reduce){*{transition-duration:.01ms !important;animation-duration:.01ms !important;}}