*{box-sizing:border-box}html{height:100%;overflow:hidden}body{background:var(--bg);color:var(--fg1);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;flex-direction:column;height:100svh;margin:0;display:flex;overflow:hidden}astro-dev-toolbar{display:none!important}.demo-heading{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.demo-shell{--demo-shell-max:max(var(--shell-max), 95vw);flex-direction:column;flex:auto;min-height:0;display:flex;overflow:hidden}.demo-shell .main{padding:16px var(--shell-gut);min-height:0;max-width:var(--demo-shell-max);flex:auto;grid-template:"lesson scene""term scene"minmax(0,1fr)/minmax(280px,360px) minmax(0,1fr);align-items:stretch;gap:16px;width:100%;margin:0 auto;display:grid;overflow:hidden}#scene{background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--r-4);box-shadow:var(--shadow-2);grid-area:scene;min-width:0;min-height:0;position:relative;overflow:hidden}#scene canvas{width:100%;height:100%;display:block}#lesson-wrap{z-index:3;flex-direction:column;grid-area:lesson;align-self:start;gap:8px;min-height:0;display:flex}#lesson-card{color:var(--copy-text);-webkit-backdrop-filter:blur(12px);border-radius:var(--r-4);transition:transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);background:#0a0c0ae0;border:1px solid #e8ede614;padding:24px;box-shadow:0 4px 20px #00000040,inset 0 1px #ffffff0d}#lesson-card:hover{transform:translateY(-2px);box-shadow:0 8px 30px #00000059,inset 0 1px #ffffff14}.step-n{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--frog-400);margin-bottom:10px;font-size:.7rem;font-weight:700}.step-t{font-family:var(--font-mono);color:var(--copy-text);letter-spacing:-.02em;margin-bottom:10px;font-size:1.5rem;font-weight:600;line-height:1.15}.step-desc{color:#c7d2c2;font-size:.95rem;line-height:1.6}.step-desc a{color:var(--frog-400);transition:color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);border-bottom:1px solid #52c72a4d;text-decoration:none}.step-desc a:hover{color:var(--frog-300);border-bottom-color:var(--frog-400)}.step-desc code{background:var(--bg-elevated-2);border-radius:var(--r-2);font-family:var(--font-mono);color:var(--accent-code);padding:1px 6px;font-size:.88em}#annotation{-webkit-backdrop-filter:blur(8px);border:1px solid #e8ede60f;border-left:3px solid var(--frog-400);border-radius:0 var(--r-4) var(--r-4) 0;color:#c7d2c2;background:#0a0c0ac7;max-height:min(18svh,160px);padding:16px 20px;font-size:.88rem;line-height:1.6;display:none;overflow-y:auto;box-shadow:0 4px 15px #00000026}#annotation strong{color:var(--copy-text);font-weight:600}#annotation .hl{color:var(--frog-400);font-weight:600}#term{-webkit-backdrop-filter:blur(16px);border-radius:var(--r-4);z-index:3;min-height:0;max-height:none;transition:border-color var(--dur-med) var(--ease-out);background:#0a0c0ad9;border:1px solid #e8ede614;flex-direction:column;grid-area:term;align-self:stretch;display:flex;overflow:hidden;box-shadow:0 8px 30px #0000004d,inset 0 1px #ffffff0d}#term:hover{border-color:#52c72a33}#term-bar{background:var(--term-head-bg);border-bottom:1px solid var(--term-border);flex-shrink:0;align-items:center;gap:8px;height:34px;padding:0 14px;display:flex}.traffic{align-items:center;gap:6px;display:flex}.tl{border-radius:50%;width:9px;height:9px}.tl-close{background:var(--danger)}.tl-min{background:var(--bolt)}.tl-max{background:var(--frog-400)}#term-title{text-align:center;font-family:var(--font-mono);color:var(--fg3);letter-spacing:.02em;flex:1;font-size:.72rem;font-weight:500}#term-body{min-height:0;font-family:var(--font-mono);background:var(--term-bg);color:var(--term-text);flex:1;padding:12px 14px;font-size:.78rem;line-height:1.65;overflow-y:auto}#term-body::-webkit-scrollbar{width:4px}#term-body::-webkit-scrollbar-track{background:0 0}#term-body::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:2px}.tp{color:var(--frog-400)}.tc{color:var(--term-text)}.to{color:var(--fg3)}.th{color:var(--bolt)}.ts{color:var(--accent-code)}.tm{color:var(--fg3)}.te{color:var(--danger)}.tv{color:#74c3c6}.cursor-line{align-items:center;display:flex}.cursor{background:var(--frog-400);width:7px;height:14px;animation:1s step-end infinite demo-blink;display:inline-block}@keyframes demo-blink{50%{opacity:0}}#nav{background:var(--bg);border-top:1px solid var(--border);min-height:56px;padding:10px var(--shell-gut);max-width:var(--demo-shell-max);box-sizing:border-box;flex-shrink:0;align-items:center;gap:14px;width:100%;margin:0 auto;display:flex}.pips{flex:1;align-items:center;gap:5px;display:flex}.pip{border-radius:var(--r-pill);background:var(--border-strong);width:20px;height:3px;transition:background var(--dur-fast) var(--ease-out);cursor:pointer;border:none;padding:0}.pip:hover{background:var(--fg3)}.pip.done{background:var(--frog-600)}.pip.on{background:var(--frog-400)}#prevBtn,#nextBtn{border-radius:var(--r-3);min-width:108px;font-family:var(--font-sans);cursor:pointer;transition:all var(--dur-fast) var(--ease-out);border:1px solid #0000;padding:10px 18px;font-size:14px;font-weight:600;line-height:1}#prevBtn{background:var(--bg-elevated);color:var(--fg1);border-color:var(--border-strong)}#prevBtn:hover{border-color:var(--fg3)}#prevBtn:disabled{opacity:.35;cursor:default}#nextBtn{background:var(--frog-400);color:#000;border-color:var(--frog-500)}#nextBtn:hover{background:var(--frog-500);border-color:var(--frog-500)}@media (width<=900px){body{overflow:hidden}.demo-shell{min-height:0}.demo-shell .main{grid-template:"lesson""scene"minmax(0,1fr)"term"minmax(96px,.65fr)/1fr;gap:10px;min-height:0;padding:10px 12px}#scene{min-height:0}#lesson-card{padding:14px 16px}.step-n{margin-bottom:6px}.step-t{margin-bottom:6px;font-size:clamp(1.05rem,5vw,1.25rem)}.step-desc{font-size:.84rem;line-height:1.45}#annotation{max-height:74px;padding:10px 14px;font-size:.78rem;line-height:1.45}#term{height:auto;min-height:0}#term-bar{height:30px}#term-body{padding:8px 10px;font-size:.7rem;line-height:1.45}#nav{background:var(--hdr-bg);-webkit-backdrop-filter:blur(10px);justify-content:space-between;min-height:56px;position:static}.pips{max-width:none;overflow:hidden}.pip{flex:1 1 0;max-width:20px}#prevBtn,#nextBtn{min-width:86px;padding-inline:12px}}@media (width<=520px){.site-hdr .inner{padding-block:10px}.demo-shell .main{gap:8px;padding-block:8px}#lesson-card{padding:12px 14px}#annotation{max-height:62px}}