/* Motion explainer pages (Parts 1-6) */
/* Layout: a bright 1600x900 product-style stage (soft white surfaces, teal accent, thin circuit lines) scaled to fit; controls beneath. Single light look by design. */
:root{
  --ink:#f2f6f9; --panel:#ffffff; --panel2:#eef3f6; --line:#dfe7ed;
  --fg:#1c2836; --mute:#677487;
  --js:#12b3a3; --teal-d:#0b8f83; --teal-l:#d9f5f1;
  --cyan:#3d7be0; --green:#0e9a6c; --red:#e0474c; --orange:#d9772b; --pink:#c0379b;
  --codebg:#1d2633; --codefg:#e7edf3;
  --shadow:0 18px 40px -18px rgba(22,52,74,.22), 0 2px 6px rgba(22,52,74,.05);
  --sans:"Plus Jakarta Sans","IBM Plex Sans Arabic",system-ui,sans-serif;
  --ar:"IBM Plex Sans Arabic","Plus Jakarta Sans",Tahoma,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
html,body{background:#e9eff3;color:var(--fg)}
body{font-family:var(--sans);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:20px}
.wrap{max-width:min(1280px,calc((100vh - 190px)*16/9));min-width:0;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.frame{position:relative;width:100%;aspect-ratio:16/9;max-width:100%;border-radius:22px;overflow:hidden;background:var(--ink);box-shadow:0 30px 60px -30px rgba(22,52,74,.35),0 0 0 1px rgba(22,52,74,.06)}
.frame:fullscreen{border-radius:0}
.stage{position:absolute;top:0;left:0;width:1600px;height:900px;transform-origin:0 0;overflow:hidden;
  background:radial-gradient(900px 520px at 88% -8%, rgba(18,179,163,.13), transparent 62%),radial-gradient(700px 500px at -5% 105%, rgba(61,123,224,.08), transparent 60%),linear-gradient(180deg,#f8fbfd,#eef3f7)}
.stage::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(28,40,54,.09) 1.2px,transparent 1.3px);background-size:34px 34px;-webkit-mask-image:linear-gradient(180deg,#000 0,transparent 75%);mask-image:linear-gradient(180deg,#000 0,transparent 75%)}
.bgfx{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.bgfx path{fill:none;stroke:#b9cbd6;stroke-width:1.5}
.bgfx .pulse{stroke:var(--js);stroke-width:3;stroke-linecap:round;stroke-dasharray:60 900;animation:flow 6s linear infinite;opacity:.85}
.bgfx circle{fill:#fff;stroke:#a9bfcc;stroke-width:1.5}
.bgfx circle.t{stroke:var(--js);fill:var(--teal-l)}
@keyframes flow{from{stroke-dashoffset:960}to{stroke-dashoffset:0}}
.scene{position:absolute;inset:0;padding:60px 96px 190px;display:flex;flex-direction:column;gap:34px;visibility:hidden;z-index:1}
.scene.on{visibility:visible}
.scene.tight{gap:20px}.scene.tight .h{font-size:50px}.scene.tight .code.sm{font-size:21px;padding:16px 24px}.scene.tight .mem{min-height:84px}.scene.tight .col{gap:16px}
.kick{font:700 20px/1 var(--mono);color:var(--teal-d);letter-spacing:.14em;display:flex;align-items:center;gap:14px}
.kick::before{content:"";width:34px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--js),#4fd1c5)}
.h{font-size:62px;font-weight:800;line-height:1.12;letter-spacing:-.02em;text-wrap:balance}
.h em{font-style:normal;color:var(--teal-d);font-family:var(--mono);font-size:.86em;font-weight:700}
.row{display:flex;gap:30px;align-items:stretch}
.col{display:flex;flex-direction:column;gap:22px}
.grow{flex:1;min-width:0}
.card{background:var(--panel);border-radius:22px;padding:28px 30px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow)}
.card h3{margin:0;font-size:31px;font-weight:700;letter-spacing:-.01em}
.card p{margin:0;font-size:23px;color:var(--mute);line-height:1.55}
.tag{display:inline-flex;align-items:center;font:700 17px/1 var(--mono);padding:9px 13px;border-radius:999px;background:var(--teal-l);color:var(--teal-d);align-self:flex-start}
.code{text-align:left;font:500 27px/1.6 var(--mono);background:var(--codebg);border-radius:18px;padding:22px 28px;white-space:pre;color:var(--codefg);box-shadow:var(--shadow)}
.code.sm{font-size:24px}
.ln{display:block}
.k{color:var(--pink)} .s{color:var(--green)} .n{color:var(--orange)} .f{color:var(--teal-d)} .c{color:#8a97a8} .p{color:var(--cyan)}
.code .k{color:#f2a7e1} .code .s{color:#7ee2b8} .code .n{color:#fdc08a} .code .f{color:#5fe0d2} .code .p{color:#9cc2ff} .code .y{color:#5fe0d2} .code .cy{color:#9cc2ff} .code .ok{color:#7ee2b8}
.out{text-align:left;font:700 28px/1.5 var(--mono);color:var(--green)}
.err{text-align:left;font:600 20px/1.4 var(--mono);color:var(--red);background:#fdecec;border-radius:14px;padding:14px 20px;border:1px solid #f6c9ca}
.ok{color:var(--green)} .bad{color:var(--red)} .y{color:var(--teal-d)} .cy{color:var(--cyan)} .mu{color:var(--mute)}
.mono{font-family:var(--mono);direction:ltr;unicode-bidi:isolate}

/* animation vocabulary */
.a{opacity:0}
.scene.on .a{animation:var(--an,fu) var(--du,.7s) cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
.scene.on .a.x{animation:var(--an,fu) var(--du,.7s) cubic-bezier(.2,.8,.2,1) var(--d,0s) both, go .4s ease var(--o) forwards}
.scene.on .gone{animation:go .45s ease var(--d) forwards}
.scene.on .dim{animation:dim .5s ease var(--d) forwards}
.scene.on .hl{animation:hl 1s ease var(--d) both}
@keyframes fu{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes pop{0%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.05)}100%{opacity:1;transform:none}}
@keyframes sr{from{opacity:0;transform:translateX(-80px)}to{opacity:1;transform:none}}
@keyframes ty{from{opacity:1;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes dim{to{opacity:.3;text-decoration:line-through}}
@keyframes go{to{opacity:0;transform:translateY(-14px)}}
@keyframes hl{0%,100%{box-shadow:var(--shadow);background:var(--panel)}25%,70%{box-shadow:0 0 0 4px var(--js),0 18px 40px -12px rgba(18,179,163,.45);background:var(--teal-l)}}
.scene.on .code .hl{animation-name:hlc}
@keyframes hlc{0%,100%{background:transparent;box-shadow:none}25%,70%{background:rgba(95,224,210,.22);box-shadow:0 0 0 3px #5fe0d2}}
@keyframes stamp{0%{opacity:0;transform:scale(2.2) rotate(-14deg)}60%{opacity:1;transform:scale(.95) rotate(-6deg)}100%{opacity:1;transform:rotate(-6deg)}}
@keyframes glow{0%,100%{box-shadow:0 20px 40px -16px rgba(18,179,163,.55)}50%{box-shadow:0 26px 70px -10px rgba(18,179,163,.75)}}
.stage.paused *, .stage.paused *::before, .stage.paused *::after{animation-play-state:paused!important}

/* caption */
.cap{position:absolute;z-index:3;left:96px;right:96px;bottom:62px;min-height:92px;display:flex;align-items:center;gap:20px;font-size:29px;line-height:1.45;font-weight:500;background:rgba(255,255,255,.86);backdrop-filter:blur(8px);border-radius:20px;padding:16px 28px;box-shadow:var(--shadow)}
.cap::before{content:"";flex:0 0 6px;align-self:stretch;background:linear-gradient(180deg,var(--js),#4fd1c5);border-radius:3px}
.cap[hidden]{display:none!important}
.cap span{transition:opacity .3s}
.cap.rtl{direction:rtl;font-family:var(--ar)}
.scn-no{position:absolute;z-index:3;top:30px;right:40px;font:600 17px var(--mono);color:var(--mute)}

/* scene specifics */
.logo{width:150px;height:150px;background:linear-gradient(135deg,#1cc7b5,#0b8f83);color:#fff;font:800 70px/1 var(--mono);display:flex;align-items:flex-end;justify-content:flex-end;padding:16px;border-radius:30px;animation:glow 4s ease-in-out infinite}
.title-big{font:800 150px/1 var(--sans);letter-spacing:-.045em}
.topics{display:flex;flex-wrap:wrap;gap:14px}
.topics span{font-size:24px;font-weight:600;padding:11px 22px;border-radius:999px;color:var(--fg);background:var(--panel);box-shadow:var(--shadow)}
.tl{display:flex;gap:0;position:relative;margin-top:10px}
.tl::before{content:"";position:absolute;left:0;right:0;top:20px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--line),var(--js),var(--line))}
.tl>div{flex:1;display:flex;flex-direction:column;gap:10px;align-items:flex-start;position:relative}
.tl b{font:700 24px var(--mono);color:var(--teal-d);background:var(--panel);padding:6px 12px;border-radius:10px;position:relative;box-shadow:var(--shadow)}
.tl i{font-style:normal;font-size:21px;color:var(--mute)}
.tl .big b{color:#fff;background:linear-gradient(135deg,#1cc7b5,#0b8f83)}
.box{font:700 30px var(--mono);background:var(--panel);border-radius:16px;min-width:120px;height:92px;display:flex;align-items:center;justify-content:center;padding:0 18px;position:relative;box-shadow:var(--shadow);border:2px solid transparent}
.box small{position:absolute;bottom:-38px;left:0;right:0;text-align:center;font:600 19px var(--mono);color:var(--mute)}
.arr{display:flex;gap:16px;align-items:center}
.lbl{font:700 25px var(--mono);color:var(--mute)}
.chip{font:700 25px var(--mono);padding:14px 20px;border-radius:16px;background:var(--panel);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px}
.chip b{font-family:var(--sans);font-size:19px;color:var(--mute);font-weight:600}
.stampx{display:inline-block;margin-top:6px;font:800 32px var(--sans);color:var(--red);border:4px solid var(--red);border-radius:14px;padding:8px 22px;transform:rotate(-6deg);opacity:0;background:#fff}
.scene.on .stampx{animation:stamp .6s cubic-bezier(.2,.8,.2,1) var(--d) both}
.mem{display:flex;gap:14px;align-items:center;min-height:100px}
.mem .box{min-width:150px;flex-direction:column;height:auto;padding:12px 18px;gap:2px}
.mem .box em{font-style:normal;font-size:17px;color:var(--mute);font-family:var(--sans);font-weight:600}
.swap{position:relative;display:inline-block;min-width:1.6em;text-align:center}
.swap>span{display:inline-block}
.swap>span+span{position:absolute;inset:0}
.vs{font:800 32px var(--mono)}
.machine{display:flex;align-items:center;gap:30px}
.machine .body{background:linear-gradient(135deg,#1cc7b5,#0b8f83);color:#fff;font:800 40px var(--mono);padding:34px 42px;border-radius:24px;box-shadow:0 24px 50px -18px rgba(18,179,163,.6)}
.ball{font:800 34px var(--mono);width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--panel);border:3px solid var(--cyan);color:var(--cyan);box-shadow:var(--shadow)}
.ball.res{border-color:var(--js);color:var(--teal-d)}
.forms{display:flex;flex-direction:column;gap:12px}
.forms>div{display:grid;grid-template-columns:350px 1fr;gap:22px;align-items:center}
.forms .nm{font-size:25px;font-weight:700}
.forms .nm b{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--teal-l);font:800 18px var(--mono);color:var(--teal-d);margin-right:12px}
.forms .code{padding:10px 20px;font-size:23px;border-radius:14px}
.pill-row{display:flex;gap:12px;flex-wrap:wrap}
.pill-row span{font:700 21px var(--mono);padding:10px 16px;border-radius:999px;background:var(--panel);box-shadow:var(--shadow)}
.sep{width:2px;background:linear-gradient(180deg,transparent,var(--line),transparent)}

/* controls (page chrome) */
.bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.btn{font:600 14px var(--sans);color:var(--fg);background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 16px;cursor:pointer;display:inline-flex;gap:8px;align-items:center;box-shadow:0 1px 2px rgba(22,52,74,.06)}
.btn:hover{border-color:#b9cbd6}
.btn:focus-visible,.chap:focus-visible,.prog:focus-visible{outline:2px solid var(--js);outline-offset:2px}
.btn.primary{background:linear-gradient(135deg,#1cc7b5,#0b8f83);color:#fff;border-color:transparent;min-width:100px;justify-content:center;box-shadow:0 10px 24px -10px rgba(18,179,163,.8)}
.prog{flex:1;min-width:160px;height:8px;background:#dbe5ec;border-radius:4px;position:relative;cursor:pointer}
.prog i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#1cc7b5,#0b8f83);border-radius:4px;width:0}
.time{font:600 13px var(--mono);color:var(--mute)}
.chaps{display:flex;gap:8px;flex-wrap:wrap}
.chap{font:500 13px var(--sans);color:var(--mute);background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 12px;cursor:pointer}
.chap.cur{color:#fff;background:var(--teal-d);border-color:var(--teal-d)}
.toggle .dot{width:9px;height:9px;border-radius:50%;background:#b9c4cf}
.toggle.on .dot{background:var(--js);box-shadow:0 0 0 4px var(--teal-l)}
.hint{font-size:13px;color:var(--mute)}
.note{font-size:13px;color:var(--orange)}
@media (prefers-reduced-motion:reduce){.scene.on .a,.scene.on .a.x{animation-duration:.01s}.bgfx .pulse{animation:none}}

/* part 2 additions */
@keyframes fi{from{opacity:0}to{opacity:1}}
.scene.on .mark{animation:markf 1.6s ease var(--d) both;border-radius:6px}
@keyframes markf{0%{background:transparent;box-shadow:none}30%,100%{background:rgba(95,224,210,.22);box-shadow:0 0 0 3px #5fe0d2}}
.mockbtn{display:inline-flex;font:700 30px var(--sans);color:#fff;background:linear-gradient(135deg,#1cc7b5,#0b8f83);padding:22px 44px;border-radius:999px;box-shadow:0 18px 34px -14px rgba(18,179,163,.8)}
.press{display:inline-block}
.scene.on .press{animation:press .45s ease var(--d) both}
@keyframes press{0%,100%{transform:none}40%{transform:scale(.9)}}
.ripple{position:absolute;left:50%;top:60%;width:30px;height:30px;margin:-15px;border-radius:50%;border:3px solid var(--js);opacity:0;pointer-events:none}
.scene.on .ripple{animation:rip .8s ease-out var(--d) forwards}
@keyframes rip{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(7)}}
.cursor{position:absolute;opacity:0}
.scene.on .cursor{animation:curm 1s cubic-bezier(.2,.8,.2,1) var(--d) both}
@keyframes curm{from{opacity:0;transform:translate(120px,90px)}to{opacity:1;transform:none}}
.evpill{font:800 34px var(--mono);color:var(--teal-d);background:var(--teal-l);padding:16px 26px;border-radius:999px}
.scene.on .evpill{animation:evf 1.2s ease 2.5s both}
@keyframes evf{0%{transform:scale(.85);opacity:.35}40%{transform:scale(1.12);opacity:1;box-shadow:0 0 0 10px rgba(18,179,163,.18)}100%{transform:none;opacity:1}}
.note-chip{font-size:22px;color:var(--fg);background:var(--teal-l);border-radius:14px;padding:14px 20px;align-self:flex-start}
.pro,.con{font:600 24px var(--sans);padding:14px 24px;border-radius:999px}
.pro{background:#e4f7ef;color:var(--green)} .con{background:#fdecec;color:var(--red)}
.toastm{background:var(--codebg);color:#fff;font:600 22px var(--sans);padding:16px 22px;border-radius:14px;margin-top:22px;box-shadow:var(--shadow)}
.keycap{width:160px;height:160px;border-radius:28px;background:#fff;box-shadow:0 12px 0 #cdd9e1,0 24px 40px -10px rgba(22,52,74,.3);font:800 70px var(--mono);display:flex;align-items:center;justify-content:center}
.scene.on .keypress{animation:keyp 1.6s ease var(--d) both}
@keyframes keyp{0%,6%{transform:none;box-shadow:0 12px 0 #cdd9e1,0 24px 40px -10px rgba(22,52,74,.3)}14%,62%{transform:translateY(10px);box-shadow:0 2px 0 #cdd9e1,0 10px 20px -10px rgba(22,52,74,.3);background:var(--teal-l)}72%,100%{transform:none}}
.log{background:var(--codebg);color:var(--codefg);border-radius:20px;padding:24px 30px;font:600 26px/1.8 var(--mono);box-shadow:var(--shadow);}
.log .ln{white-space:pre}
.log .y{color:#5fe0d2}.log .cy{color:#9cc2ff}.log .s2{color:#7ee2b8}.log .mu{color:#8a97a8}
.clk{font:600 20px var(--sans);background:#fff;border-radius:12px;padding:10px 14px;box-shadow:var(--shadow);display:flex;gap:8px}
.listener{position:relative;height:46px;min-width:280px}
.listener span{position:absolute;inset:0;font:700 20px var(--mono);border-radius:999px;display:flex;align-items:center;justify-content:center}
.listener .on{background:#e4f7ef;color:var(--green)} .listener .off{background:#fdecec;color:var(--red)}
.search{display:flex;align-items:center;gap:12px;background:#fff;border-radius:999px;padding:14px 24px;box-shadow:var(--shadow);font:600 26px var(--sans);border:2px solid var(--js)}
.search .q{color:var(--mute)} .typed{display:inline-block}
.caret{width:2px;height:30px;background:var(--fg);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.tbl{background:#fff;border-radius:18px;box-shadow:var(--shadow);overflow:hidden;font:500 22px var(--sans)}
.tr{display:grid;grid-template-columns:1fr 2fr;padding:12px 22px;border-top:1px solid var(--line);max-height:80px;overflow:hidden}
.tbl.sort .tr{grid-template-columns:2fr 1fr}
.tr.th{font-weight:700;color:var(--mute);border-top:0;background:var(--panel2)}
.tr.hit{background:var(--teal-l);font-weight:700}
.scene.on .tr.a.x{animation:fu .5s ease var(--d) both, collapse .5s ease var(--o) forwards}
@keyframes collapse{to{opacity:0;max-height:0;padding-block:0;border-top-width:0}}
.stack{position:relative} .stack .rows+.rows{position:absolute;inset:0;background:#fff}
.cookie{flex:none;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle at 30% 35%,#8a5a2b 7px,transparent 8px),radial-gradient(circle at 62% 30%,#8a5a2b 6px,transparent 7px),radial-gradient(circle at 52% 64%,#8a5a2b 8px,transparent 9px),radial-gradient(circle at 26% 68%,#8a5a2b 6px,transparent 7px),radial-gradient(circle at 76% 56%,#8a5a2b 5px,transparent 6px),linear-gradient(135deg,#f2cd90,#d9a35e);-webkit-mask:radial-gradient(circle at 92% 16%,transparent 36px,#000 37px);mask:radial-gradient(circle at 92% 16%,transparent 36px,#000 37px);filter:drop-shadow(0 18px 24px rgba(120,80,30,.25))}
.ck{display:inline-flex;gap:10px;align-items:center;font:700 22px var(--mono);background:var(--teal-l);color:var(--teal-d);border-radius:999px;padding:10px 18px}
.ck i{font:600 16px var(--sans);font-style:normal;color:var(--mute)}
.url{display:flex;font:700 40px var(--mono);gap:6px;padding-bottom:40px}
.url span{position:relative;padding:6px 12px;border-radius:12px}
.url i{position:absolute;left:0;right:0;top:100%;margin-top:8px;font:600 18px var(--sans);font-style:normal;color:var(--mute);text-align:center}
.u1{background:#e3ecfb;color:var(--cyan)} .u2{background:var(--teal-l);color:var(--teal-d)} .u3{background:#fdf0e4;color:var(--orange)} .u4{color:var(--mute)}
.jar{background:#fff;border-radius:22px;box-shadow:var(--shadow);padding:24px 26px;display:flex;flex-direction:column;gap:14px;min-width:380px;align-items:flex-start}
.cal{width:150px;border-radius:20px;background:#fff;box-shadow:var(--shadow);overflow:hidden;text-align:center;display:flex;flex-direction:column;flex:none}
.cal b{background:var(--red);color:#fff;font:800 20px var(--sans);padding:8px}
.cal span{font:800 64px/1.1 var(--sans);padding-top:8px}
.cal i{font:600 20px var(--mono);font-style:normal;color:var(--mute);padding-bottom:12px}
.site{flex:none;width:560px;height:340px;border-radius:22px;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.site>div{position:absolute;inset:0;display:flex;flex-direction:column}
.lt{background:#fff} .dk{background:#16212b}
.sbar{display:flex;gap:8px;align-items:center;padding:16px 18px;border-bottom:1px solid rgba(128,140,160,.2)}
.sbar i{width:12px;height:12px;border-radius:50%;background:#cbd5df}
.tg{margin-left:auto;font:600 18px var(--sans);padding:6px 14px;border-radius:999px;background:var(--teal-l);color:var(--teal-d)}
.dk .tg{background:#123a39;color:#5fe0d2} .dk .sbar i{background:#3a4b5a}
.sbody{padding:28px;display:flex;flex-direction:column;gap:16px}
.sbody b{height:20px;border-radius:10px;background:#e3eaf0;width:85%} .dk .sbody b{background:#2a3a48}
.step{display:flex;gap:16px;align-items:center;font-size:28px;font-weight:600;background:#fff;border-radius:18px;padding:16px 22px;box-shadow:var(--shadow)}
.step>b{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#1cc7b5,#0b8f83);color:#fff;display:flex;align-items:center;justify-content:center;font:800 20px var(--mono);flex:none}

/* part 3 additions */
.tree{flex:none;overflow:visible}
.tree path{fill:none;stroke:#b6c8d4;stroke-width:3}
.tree .dash{stroke-dasharray:8 8}
.tree .nd rect{fill:#fff;stroke:#cfdce5;stroke-width:2;filter:drop-shadow(0 8px 14px rgba(22,52,74,.12))}
.tree .nd text{font:700 24px var(--mono);fill:var(--fg);text-anchor:middle}
.tree .at{fill:var(--teal-d);font-size:19px}
.tree .nd.hot rect{stroke:var(--js)}
.tree .nd.tx rect{fill:var(--teal-l);stroke:var(--js);stroke-dasharray:6 5}
.tree .nd.tx text{fill:var(--teal-d);font-size:20px}
.tree .nd.sel rect{fill:#12b3a3;stroke:none} .tree .nd.sel text{fill:#fff}
.tree .mv path{stroke:var(--js);stroke-width:4;stroke-linecap:round}
.tree .mv text{font:700 22px var(--mono);fill:var(--teal-d)} .tree .mv text.sm{font-size:18px}
.tree .mv.dn path{stroke:var(--cyan)} .tree .mv.dn text{fill:var(--cyan)}
.tree .mv.sd path{stroke:var(--orange)} .tree .mv.sd text{fill:var(--orange)}
.chip-y{font:600 24px var(--sans);padding:14px 24px;border-radius:999px;background:#fdf0e4;color:var(--orange)}
.win{background:#fff;border-radius:22px;box-shadow:var(--shadow);overflow:hidden}
.win-bar{display:flex;gap:6px;padding:12px 14px 0;background:var(--panel2)}
.tab{font:600 18px var(--sans);padding:10px 18px;border-radius:12px 12px 0 0;color:var(--mute)} .tab.on{background:#fff;color:var(--fg)}
.win-in{padding:24px 28px;display:flex;flex-direction:column;gap:14px}
.docbox{border:2px dashed var(--js);border-radius:18px;padding:20px 24px;display:flex;gap:22px;align-items:center;background:var(--teal-l)}
.docbox b{font:800 30px var(--mono);color:var(--teal-d)} .docbox .mono{font-size:22px} .docbox i{font-style:normal;color:var(--mute);font-size:20px}
.selrow{display:flex;gap:20px;align-items:center} .selrow .code{padding:12px 20px}
.res1{font:700 22px var(--mono);background:#fff;border-radius:12px;padding:12px 18px;box-shadow:var(--shadow);border:2px solid var(--js)}
.cnt{font-size:18px;color:var(--mute)}
.coll{display:flex;gap:8px;padding:8px;border-radius:16px;border:2px dashed var(--cyan);background:#eef4fd}
.coll span{font:700 20px var(--mono);background:#fff;border-radius:10px;padding:10px 14px;box-shadow:var(--shadow)}
.pagem{background:#fff;border-radius:20px;box-shadow:var(--shadow);padding:22px;display:flex;flex-direction:column;gap:14px;min-width:430px}
.pm{font:700 24px var(--mono);padding:16px 20px;border-radius:14px;background:var(--panel2)}
.scene.on .pm.hl{animation:pmh .6s ease var(--d) forwards}
@keyframes pmh{to{background:var(--teal-l);box-shadow:0 0 0 3px var(--js)}}
.cssmap{background:#fff;border-radius:18px;box-shadow:var(--shadow);overflow:hidden;font:600 24px var(--mono)}
.cm{display:grid;grid-template-columns:1fr 1fr;padding:12px 22px;border-top:1px solid var(--line)}
.cm.th{font:700 18px var(--sans);color:var(--mute);background:var(--panel2);border-top:0}
.mark2{border-radius:8px;padding:2px 6px;margin:-2px -6px;justify-self:start}
.scene.on .mark2{animation:mk2 .6s ease var(--d) forwards}
@keyframes mk2{to{background:var(--teal-l);color:var(--teal-d)}}
.swatch{position:relative;width:420px;height:260px;flex:none}
.swatch>div{position:absolute;inset:0;border-radius:22px;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:600;box-shadow:var(--shadow)}
.sw0{background:#fff} .sw1{background:#e5484d;color:#fff}
.linkm{font:700 30px var(--sans);color:var(--cyan);display:flex;align-items:center;gap:18px}
.swap2{position:relative;height:34px;min-width:420px}
.swap2 i{position:absolute;left:0;font:600 18px var(--mono);font-style:normal;color:var(--mute);background:var(--panel2);padding:4px 10px;border-radius:8px;white-space:nowrap}
.rbox{background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:18px 24px;display:flex;align-items:center;gap:18px;min-height:84px}
.rbox .mono{font-size:28px} .rbox i{font-style:normal;color:var(--mute);font-size:19px;margin-left:auto}
.nest{border:2px solid var(--line);border-radius:16px;padding:12px 16px;background:#fff;display:flex;gap:12px;align-items:center;box-shadow:var(--shadow)}
.nest.in{box-shadow:none;background:var(--panel2)}
.tagl{font:700 20px var(--mono);color:var(--mute)}
.rendered{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:14px 22px;font-size:24px}
.rendered b{font:600 16px var(--mono);color:var(--mute);display:block} .rendered ul{margin:6px 0 0;padding-left:28px}
.adj{display:flex;flex-direction:column;gap:12px;min-width:430px}
.pos{font:700 22px var(--mono);color:#fff;background:linear-gradient(135deg,#1cc7b5,#0b8f83);border-radius:10px;padding:8px 14px;align-self:flex-start}
.pos.in{color:var(--teal-d);border:2px dashed var(--js);background:var(--teal-l)}
.pel{background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:18px 22px;display:flex;flex-direction:column;gap:10px}
.ptext{font-size:26px;font-weight:600;padding-left:16px}
.scene.on .gonecol{animation:strike .4s ease var(--d) forwards, collapse .5s ease calc(var(--d) + .8s) forwards}
@keyframes strike{to{background:#fdecec;text-decoration:line-through}}

/* part 4 additions */
.wire{height:110px;position:relative;align-self:center}
.wire::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:3px dashed #b6c8d4}
.packet{position:absolute;top:8px;left:0;font:700 22px var(--mono);background:var(--teal-l);color:var(--teal-d);padding:8px 14px;border-radius:999px;white-space:nowrap;animation:pk 3.2s ease-in-out infinite}
.packet.back{top:62px;background:#e3ecfb;color:var(--cyan);animation:pkb 3.2s ease-in-out infinite}
@keyframes pk{0%,10%{left:0}60%,100%{left:calc(100% - 230px)}}
@keyframes pkb{0%,40%{left:calc(100% - 170px)}90%,100%{left:0}}
.ico{width:70px;height:56px}
.flow{display:flex;gap:22px;align-items:center}
.objbox,.strbox{background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:18px 24px;display:flex;flex-direction:column;gap:6px;min-width:330px}
.objbox b,.strbox b{font:700 15px var(--sans);color:var(--mute);text-transform:uppercase;letter-spacing:.12em}
.objbox .mono{font-size:28px;color:var(--cyan);font-weight:700} .strbox .mono{font-size:28px;color:var(--green);font-weight:700}
.fn{font:800 26px var(--mono);color:#fff;background:linear-gradient(135deg,#1cc7b5,#0b8f83);padding:16px 22px;border-radius:999px;box-shadow:0 14px 28px -14px rgba(18,179,163,.8)}
.objtree{background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:18px 24px;display:flex;flex-direction:column;gap:8px;font:600 24px var(--mono);border-left:5px solid var(--cyan)}
.objtree b{color:var(--cyan)} .objtree i{font-style:normal;color:var(--green)}
.page2{background:#fff;border-radius:18px;box-shadow:var(--shadow);overflow:hidden;min-width:480px}
.page2 h4{margin:18px 24px 4px;font-size:32px} .page2 p{margin:0 24px 22px;font-size:21px;color:var(--mute)}
.vrow{display:flex;gap:18px;align-items:center;background:#fff;border-radius:14px;padding:12px 20px;box-shadow:var(--shadow);font-size:26px;font-weight:800}
.vrow code{font:600 24px var(--mono);background:var(--panel2);padding:4px 12px;border-radius:8px}
.vrow i{font:500 20px var(--sans);font-style:normal;color:var(--mute);margin-left:auto}
.vrow.ok{box-shadow:0 0 0 2px var(--green),var(--shadow)}

/* part 5 additions */
.scene.on .step1{animation:stp 1.4s ease var(--d) both}
@keyframes stp{0%,100%{background:transparent;box-shadow:none}20%,70%{background:rgba(95,224,210,.18);box-shadow:inset 4px 0 0 #5fe0d2}}
.timer{display:flex;gap:14px;align-items:center;background:#fff;border-radius:16px;padding:14px 20px;box-shadow:var(--shadow);font-size:22px}
.timer b{color:var(--teal-d)}
.tbar{flex:1;height:10px;border-radius:5px;background:var(--panel2);overflow:hidden;min-width:200px}
.tbar.wide{flex:none;width:100%}
.tbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#1cc7b5,#0b8f83)}
.scene.on .tbar i{animation:tfill var(--dur,6s) linear var(--d) forwards}
@keyframes tfill{to{width:100%}}
.spin{width:54px;height:54px;border-radius:50%;border:5px solid var(--teal-l);border-top-color:var(--js);animation:spn 1s linear infinite}
.spin.sm{width:30px;height:30px;border-width:4px}
@keyframes spn{to{transform:rotate(360deg)}}
.pstates{display:flex;flex-direction:column;gap:18px;align-items:center;min-width:540px}
.psplit{display:flex;gap:16px}
.ps{border-radius:18px;padding:18px 22px;background:#fff;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:4px;min-width:250px}
.ps b{font:800 28px var(--mono)} .ps i{font-style:normal;color:var(--mute);font-size:19px}
.ps.pend{border:2px dashed var(--orange)} .ps.pend b{color:var(--orange)}
.ps.ful{border:2px solid var(--green)} .ps.ful b{color:var(--green)}
.ps.rej{border:2px solid var(--red)} .ps.rej b{color:var(--red)}
.appm{width:560px;height:330px;border-radius:22px;background:#fff;box-shadow:var(--shadow);overflow:hidden;flex:none}
.appb{display:flex;height:calc(100% - 50px)}
.side{width:150px;background:var(--panel2);padding:20px;display:flex;flex-direction:column;gap:14px}
.side b{height:14px;border-radius:7px;background:#d6e0e7}
.region{flex:1;position:relative;margin:20px;border-radius:16px;border:2px dashed var(--js);overflow:hidden}
.region>div{position:absolute;inset:0;padding:18px;display:flex;flex-direction:column;gap:14px;background:#fff;align-items:flex-start}
.region b{height:16px;border-radius:8px;background:#e3eaf0;width:90%}
.pman{display:flex;gap:16px;align-items:center;background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:16px 22px;font-size:24px}
.rs{display:flex;gap:14px}
.rsn{flex:1;background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:20px;display:flex;flex-direction:column;gap:6px;border-top:5px solid var(--js);min-width:0}
.rsn b{font:800 48px var(--mono);color:var(--teal-d)} .rsn span{font:700 18px var(--mono);overflow-wrap:anywhere} .rsn i{font-style:normal;color:var(--mute);font-size:18px}
.rsn.done{background:linear-gradient(135deg,#1cc7b5,#0b8f83);color:#fff;border-top-color:#0b8f83}
.rsn.done b,.rsn.done i{color:#fff}
.usr{flex:1;display:grid;grid-template-columns:54px 1fr;column-gap:14px;align-items:center;background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:16px 20px}
.usr i{width:54px;height:54px;border-radius:50%;background:#5fe0d2;grid-row:span 2}
.usr b{font-size:24px} .usr span{font:500 16px var(--mono);color:var(--mute)}

/* part 6 additions */
.factory{background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:16px 22px;display:flex;flex-direction:column;gap:4px}
.factory b{font:800 26px var(--mono);color:var(--teal-d)} .factory span{color:var(--mute);font-size:20px}
.newfn{font:800 30px var(--mono);color:#fff;background:linear-gradient(135deg,#5b8def,#3d6fd0);padding:16px 24px;border-radius:18px;align-self:flex-start;box-shadow:0 14px 28px -14px rgba(61,111,208,.8)}
.maprow{display:flex;flex-direction:column;gap:14px}
.dn{min-width:90px;text-align:center;font:700 20px var(--mono);color:var(--teal-d)}
.scene.on .dimx{animation:dimx .5s ease var(--d) forwards}
@keyframes dimx{to{opacity:.25;transform:scale(.9)}}
.acc{display:flex;gap:14px;align-items:flex-end}
.ac{flex:1;background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column;align-items:center;gap:4px}
.ac i{font:600 18px var(--mono);font-style:normal;color:var(--mute)} .ac b{font:800 40px var(--mono);color:var(--teal-d)}
.ac.fin{background:linear-gradient(135deg,#1cc7b5,#0b8f83)} .ac.fin b,.ac.fin i{color:#fff}

/* page reset */
html{color-scheme:light}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}

/* full screen + phone */
.frame.fs{width:100%;height:100%;max-width:none;aspect-ratio:auto;border-radius:0;box-shadow:none;background:var(--ink)}
body.fs-fake{overflow:hidden}
body.fs-fake .frame.fs{position:fixed;top:0;left:0;width:100vw;height:100vh;height:100dvh;z-index:9999}
.fsbar{position:absolute;z-index:5;left:50%;bottom:20px;transform:translateX(-50%);display:none;align-items:center;gap:22px;padding:18px 28px;border-radius:999px;background:rgba(28,40,54,.88);backdrop-filter:blur(8px);box-shadow:0 20px 50px -20px rgba(0,0,0,.6)}
.frame.fs .fsbar{display:flex;opacity:0;pointer-events:none;transition:opacity .25s}
.frame.fs.bar-on .fsbar{opacity:1;pointer-events:auto}
.fsbar button{font:700 40px/1 var(--sans);color:#fff;background:rgba(255,255,255,.12);border:0;border-radius:50%;width:104px;height:104px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.fsbar button.main{background:linear-gradient(135deg,#1cc7b5,#0b8f83);width:128px;height:128px;font-size:48px}
.fsbar button.txt{width:auto;border-radius:999px;padding:0 34px;font-size:32px}
.fsbar button.off{opacity:.45;text-decoration:line-through}
.fsbar .fst{font:600 30px var(--mono);color:#cfe0e8;min-width:220px;text-align:center}
.frame.fs .cap{bottom:210px}
.frame.fs:not(.bar-on) .cap{bottom:62px}
#fs{font-weight:700}
@media (max-width:700px){#fs{background:linear-gradient(135deg,#1cc7b5,#0b8f83);color:#fff;border-color:transparent;order:-1;flex:1 1 100%;justify-content:center;padding:12px 16px;font-size:15px}}