:root{box-sizing:border-box;--cream:#f6f4ef;--paper:#fffdf8;--ink:#23211c;--muted:#8b8578;--dot:#dcd6c9;--line:#c9c2b3;--rule:#e9e3d7;--a-bg:#f6e6dd;--a-br:#ecd2c3;--a-tx:#8b4a2c;--b-bg:#f6e6dd;--b-br:#ecd2c3;--b-tx:#8b4a2c;--d-bg:#efece5;--d-br:#e4ded2;--d-tx:#a29c8f}*,*:before,*:after{box-sizing:inherit}html,body{height:100%;margin:0}body{background:var(--cream);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;overflow:hidden}.stage{display:flex;height:100%;width:100%}.canvas{position:relative;flex:1 1 auto;min-width:0;background-image:radial-gradient(var(--dot) 1.5px,transparent 1.5px);background-size:26px 26px;background-position:-13px -13px}.canvas-title{position:absolute;top:24px;left:32px;z-index:3;max-width:46%;font-family:ui-serif,Georgia,Times New Roman,serif;font-size:24px}.canvas-title span{display:block;margin-top:5px;font-size:14px;color:var(--muted);font-family:-apple-system,Segoe UI,system-ui,sans-serif}#wires{position:absolute;inset:0;z-index:1;pointer-events:none}.node{position:absolute;z-index:2;width:198px;height:152px;border-radius:24px;border:1.5px solid var(--a-br);background:var(--a-bg);color:var(--a-tx);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:11px;cursor:pointer;box-shadow:0 1px 2px #0000000a;transition:transform .18s ease,box-shadow .18s ease,background .18s,color .18s,border-color .18s}.node:hover{transform:translateY(-3px);box-shadow:0 10px 26px #00000017}.node svg.ico{width:29px;height:29px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.9}.node .num{font-size:11px;letter-spacing:.15em;text-transform:uppercase;opacity:.6}.node .ttl{font-family:ui-serif,Georgia,Times New Roman,serif;font-size:21px;line-height:1.12;text-align:center}.node .sub{font-size:12.5px;text-align:center;opacity:.72;line-height:1.3}.node.b{background:var(--b-bg);border-color:var(--b-br);color:var(--b-tx)}.node.current{background:var(--a-tx);border-color:var(--a-tx);color:var(--cream);box-shadow:0 14px 34px #8b4a2c4d}.node.b.current{background:var(--b-tx);border-color:var(--b-tx);box-shadow:0 14px 34px #8b4a2c4d}.node.done{background:var(--d-bg);border-color:var(--d-br);color:var(--d-tx);box-shadow:none}.pause{position:absolute;z-index:2;transform:translate(-50%,-50%);width:36px;height:36px;border-radius:50%;background:var(--cream);border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;pointer-events:none}.pause svg{width:18px;height:18px;stroke:var(--muted);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.panel{flex:0 0 34%;max-width:560px;background:var(--paper);border-left:1.5px solid #e6e0d4;padding:44px 44px 32px;overflow-y:auto;display:flex;flex-direction:column}.panel .kicker{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}.panel h2{font-family:ui-serif,Georgia,Times New Roman,serif;font-size:40px;line-height:1.08;margin:9px 0 10px;font-weight:600}.panel .lede{font-size:17.5px;line-height:1.5;color:#5f594d;margin:0 0 30px}.sect{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 13px}.chips{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 32px}.chip{border:1.5px solid var(--a-br);background:var(--a-bg);color:var(--a-tx);border-radius:999px;padding:7px 15px;font-size:16.5px}.chip.b{border-color:var(--b-br);background:var(--b-bg);color:var(--b-tx)}.blocks{list-style:none;margin:0;padding:0}.blocks li{border-top:1px solid var(--rule)}.blocks li:last-child{border-bottom:1px solid var(--rule)}.blocks a,.blocks .row{display:flex;align-items:baseline;gap:12px;padding:14px 2px;text-decoration:none;color:var(--ink);font-size:18px}.blocks a:hover{color:var(--b-tx)}.blocks .idx{font-size:13.5px;color:var(--muted);min-width:21px}.cards{display:flex;flex-direction:column;gap:10px;margin:0 0 28px}.card{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:14px;row-gap:4px;min-height:70px;padding:12px 22px;border-radius:16px;background:var(--a-tx);color:var(--cream);text-decoration:none;box-shadow:0 8px 22px #8b4a2c38;transition:transform .15s,box-shadow .15s}.card:hover{transform:translateY(-2px);box-shadow:0 12px 28px #8b4a2c47}.card .bnum{grid-column:1;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.75}.card .bdesc{grid-column:1;font-size:19px;line-height:1.3}.card .arrow{grid-column:2;grid-row:1 / span 2;display:flex;align-items:center;gap:10px;font-size:20px}.card kbd{background:transparent;border-color:#f6f4ef80;color:var(--cream)}.sect-extra{margin-top:8px}@media(max-height:800px)and (min-width:901px){.panel{padding:28px 36px 20px}.panel h2{font-size:32px}.panel .lede{font-size:16px;margin:0 0 18px}.cards{gap:8px;margin:0 0 20px}.card{min-height:0;padding:10px 18px}.card .bdesc{font-size:17px}.chips{margin:0 0 20px}.chip{padding:5px 12px;font-size:15px}.foot{padding-top:16px}}.chips.plain .chip{background:transparent;border-color:#ddd6c8;color:#6f685b;font-size:14px}.foot{margin-top:auto;padding-top:22px;font-size:13.5px;color:var(--muted);line-height:1.6}kbd{background:#efece4;border:1px solid #e0dacd;border-radius:5px;padding:1px 6px;font-size:12.5px}#readout{position:absolute;left:20px;bottom:18px;z-index:6;display:none;background:var(--paper);border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;white-space:pre;color:var(--ink);font:12.5px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace;box-shadow:0 8px 24px #00000017}#readout b{display:block;margin-bottom:8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-family:-apple-system,system-ui,sans-serif}.layout-on .node{cursor:grab}.layout-on .node:active{cursor:grabbing}#me{position:absolute;right:24px;bottom:24px;z-index:20;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#fffdf8;border:1.5px solid #e6e0d4;color:#8b4a2c;cursor:pointer;box-shadow:0 10px 24px -14px #23211c80;transition:transform .15s,border-color .15s}#me:hover{transform:scale(1.06);border-color:#ecd2c3}#me svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}@media(max-width:1150px){html,body{overflow:auto}.stage{flex-direction:column}.canvas{height:660px;flex:none}.panel{flex:none;max-width:none;border-left:none;border-top:1.5px solid #e6e0d4}}