@font-face{font-family:BoardHand;src:url('assets/fonts/Xiaolai-Regular.ttf')}*{box-sizing:border-box}body{margin:0;background:#e9e9e6;color:#252927;font:14px 'Segoe UI','Microsoft YaHei',sans-serif}button,select,textarea,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer;border:1px solid #d7dbd7;background:white;border-radius:7px;padding:9px 12px;color:inherit}button:hover{background:#eef2ed}button.primary{background:#213c32;color:white;border-color:#213c32}button.active{background:#dfeae3;border-color:#5f7d6d}a{color:#365e4a;text-decoration:none}.topbar{height:68px;padding:12px 22px;background:#fff;border-bottom:1px solid #d8dcd6;display:flex;align-items:center;gap:12px}.brand{font-weight:750;font-size:19px;margin-right:auto}.brand small{font-size:11px;font-weight:400;color:#758077;margin-left:10px}.topbar .badge{color:#386c50;background:#e7f3eb;padding:5px 8px;border-radius:5px;font-size:11px}.workspace{display:grid;grid-template-columns:290px minmax(430px,1fr) 260px;height:calc(100vh - 68px)}aside{background:#fafbf9;padding:18px;overflow:auto}.left{border-right:1px solid #d5d9d2}.right{border-left:1px solid #d5d9d2}h3{margin:0 0 12px;font-size:15px}.hint{color:#747d74;font-size:12px;line-height:1.7}textarea{resize:vertical;width:100%;border:1px solid #cfd5cd;border-radius:7px;padding:12px;line-height:1.8;background:#fff;color:#303830}#script{height:44vh;min-height:160px;margin:10px 0}.left .primary{width:100%;margin:6px 0}.tools{display:flex;flex-wrap:wrap;gap:6px}.stage-area{display:flex;flex-direction:column;min-width:0;overflow:hidden}.viewbar{display:flex;align-items:center;gap:8px;min-height:50px;padding:8px 20px;font-size:12px}.viewbar select{margin-left:auto;border:1px solid #cbd0c8;padding:5px}.canvas-scroll{flex:1;overflow:auto;padding:12px 32px 40px;display:block}#board{--board-width:640px;width:var(--board-width);min-height:calc(var(--board-width) * 16 / 9);margin:0 auto;background:#fffefb;box-shadow:0 6px 30px #2432211a;padding:24px 24px 20px;container-type:inline-size;font:20px/1.4 BoardHand,'KaiTi',serif;color:#171b1d;position:relative}#board h1{font:inherit;font-size:40px;line-height:1.15;margin:0 0 8px;font-weight:bold;letter-spacing:-1px}#board .subtitle{font-size:19px;margin:5px 0 9px}#board .definition{font-size:22px;margin:8px 0 14px}#board .module{border-top:1.3px solid #414646;padding:13px 0 14px;transition:opacity .35s,background .2s;position:relative}#board h2{font:inherit;font-weight:bold;font-size:27px;display:flex;gap:12px;align-items:center;margin:0 0 10px}.section-number{border:2px solid;border-radius:48% 52% 46% 54%;width:35px;height:35px;display:inline-grid;place-items:center;flex-shrink:0;font-weight:400}.blue{color:#075cd6}.red{color:#d32429}.mark-circle{border:2px solid #d32429;border-radius:48% 52% 43% 57%;padding:0 5px;color:#d32429}.mark-underline{text-decoration:underline;text-decoration-color:#d32429;text-decoration-thickness:2px;text-underline-offset:6px}.mark-blue{color:#075cd6}.compare{display:grid;gap:5px;padding-left:44px}.line{display:flex;gap:12px;margin:5px 0}.list{padding-left:35px}.dot{color:#202828;font-size:22px}.kicker{margin:0 0 9px 44px;font-size:19px}.architecture{text-align:center;max-width:470px;margin:0 auto}.host{border:2px solid #232a2c;border-radius:20px 16px 18px 14px;padding:8px 16px 12px;margin:4px auto 0;max-width:410px}.host-label{font-size:23px;margin-bottom:8px}.children{display:flex;gap:8px;align-items:center}.children .node{flex:1;white-space:pre-line;font-size:19px;padding:8px;min-width:0}.node{border:1.8px solid #303738;border-radius:10px 7px 12px 8px;padding:7px 14px}.between{font-size:30px}.connection{display:flex;align-items:center;justify-content:center;gap:10px;height:49px;margin-left:100px;font-size:19px}.vertical-arrow{font-size:40px;color:#d32429;line-height:1}.server{margin:0 auto;width:max-content;max-width:90%;white-space:pre-line;font-size:21px}.branches{display:flex;justify-content:space-around;margin:0 12px}.branches>div{display:flex;flex-direction:column;align-items:center}.branch-arrow{font-size:24px}.graph-note{font-size:17px;margin-top:6px}.flow{display:grid;grid-template-columns:1fr;gap:2px;padding:0 40px}.flow-step{display:flex;gap:12px;border:1.8px solid #343b3a;border-radius:8px 12px 7px 10px;padding:5px 10px;align-items:center;font-size:19px}.flow-step b{width:25px;height:25px;border:1.5px solid #343b3a;border-radius:50%;font-weight:400;text-align:center;line-height:23px;flex-shrink:0}.flow-arrow{text-align:center;color:#303837;font-size:22px;line-height:19px}.board-footer{text-align:center}.board-footer p{margin:6px 0;font-size:17px}.board-footer .takeaway{border:2px solid #d32429;border-radius:38px 25px 35px 30px;padding:5px 9px;font-size:23px;display:inline-block;margin-top:9px}.editable{white-space:pre-line;outline:none}.editable[contenteditable]:hover{background:#ebf2e873}.editable[contenteditable]:focus{background:#f0f5e8;outline:1px dashed #7b9475}.module.selected{background:#edf4ef66}.module.dim{opacity:.12}.bottom{padding:10px 20px;background:#f8faf6;border-top:1px solid #d4dbd1;display:flex;gap:8px;align-items:center;font-size:12px}.module-button{width:100%;display:flex;text-align:left;gap:10px;align-items:center;margin:7px 0;padding:12px 8px}.module-button b{background:#e9eee8;padding:4px 8px;border-radius:50%;font-weight:500}.module-button small{display:block;color:#7a837a;margin-top:3px}.right .source{font-size:12px;line-height:1.9;white-space:pre-wrap;background:#eff2ec;padding:12px;border-radius:6px;max-height:35vh;overflow:auto}.right .actions{font-size:12px;color:#075cd6;line-height:1.8}.right label{display:block;margin:14px 0 5px;font-size:12px}.right select,.right input{width:100%;padding:8px;border:1px solid #cdd6ca;border-radius:5px}.right textarea{min-height:120px}.status{color:#5f6e60;font-size:12px;margin:9px 0;line-height:1.7}dialog{border:1px solid #bccab9;border-radius:12px;width:min(800px,90vw)}dialog textarea{height:55vh;font:13px/1.6 monospace}dialog::backdrop{background:#18221866}#notice{color:#687766}#density{color:#ad5b1a}#board.ratio-wide{min-height:0;aspect-ratio:16/9;width:900px}#board.ratio-wide .module{display:inline-block;width:48%;vertical-align:top;margin-right:2%}#board.ratio-square{min-height:640px}#board.ratio-portrait{min-height:853px}@media(max-width:1050px){.workspace{grid-template-columns:240px minmax(380px,1fr)}.right{display:none}.topbar{gap:7px;padding:10px}.brand small,.topbar .badge{display:none}}@media(max-width:700px){.workspace{display:block;height:auto}.left{max-height:330px}.left #script{height:120px}.stage-area{height:85vh}.topbar{height:auto;flex-wrap:wrap}.brand{width:100%}.canvas-scroll{padding:8px}.bottom{flex-wrap:wrap}}@media print{body{background:white}.topbar,aside,.viewbar,.bottom{display:none!important}.workspace,.stage-area,.canvas-scroll{display:block;height:auto;overflow:visible;padding:0}#board{box-shadow:none;margin:0}.module.dim{opacity:1!important}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Compact overview retains readable handwriting at a true 9:16 size. */
#board{padding:20px 24px 16px;font-size:19px}#board h1{font-size:39px}#board .definition{font-size:21px;margin:7px 0 10px}#board .subtitle{font-size:18px}#board .module{padding:9px 0 10px}#board h2{font-size:25px;margin-bottom:8px}.host-label{font-size:21px}.children .node{font-size:18px;padding:6px}.host{padding:7px 13px 9px}.connection{height:39px}.vertical-arrow{font-size:34px}.server{font-size:19px}.graph-note{font-size:16px}.branches{font-size:18px}.line{margin:3px 0}.flow{gap:1px}.flow-step{font-size:18px;padding:4px 10px}.flow-arrow{font-size:19px;line-height:15px}.board-footer .takeaway{font-size:22px}.board-footer p{font-size:16px}.section-number{width:32px;height:32px}.kicker{font-size:18px;margin-bottom:7px}
#board .flow-four{display:grid;grid-template-columns:1fr 30px 1fr;grid-template-rows:auto 23px auto;gap:0;padding:0 12px}.flow-four>:nth-child(1){grid-area:1/1}.flow-four>:nth-child(2){grid-area:1/2;align-self:center;transform:rotate(-90deg)}.flow-four>:nth-child(3){grid-area:1/3}.flow-four>:nth-child(4){grid-area:2/3;align-self:center}.flow-four>:nth-child(5){grid-area:3/3}.flow-four>:nth-child(6){grid-area:3/2;align-self:center;transform:rotate(90deg)}.flow-four>:nth-child(7){grid-area:3/1}.flow-four .flow-step{font-size:17px;min-height:42px;gap:7px;padding:5px 8px}#board section.architecture{max-width:none}#board .architecture .architecture{max-width:470px}#board .module{padding:7px 0 8px}#board .compare{gap:1px}#board .board-footer p{margin:4px 0}
#board .module{padding-top:6px;padding-bottom:7px}
/* Shared fixed-ratio composition: editor and standalone export. */
#board{width:640px;height:1137.7778px;min-height:0;aspect-ratio:auto;padding:22px 24px;overflow:visible}
#board.ratio-wide{width:900px;height:506.25px;min-height:0;aspect-ratio:auto;padding:18px 24px}
#board.ratio-square{width:640px;height:640px;min-height:0}
#board.ratio-portrait{width:640px;height:853.3333px;min-height:0}
.board-content{width:100%;height:100%;display:flex;flex-direction:column;gap:12px}
.board-header{flex:0 0 auto}.board-modules{display:flex;flex-direction:column;flex:1;min-height:0;gap:12px}
#board .board-modules>.module{width:100%;margin:0;max-width:none;display:flex;flex-direction:column;justify-content:center;flex:1 0 auto;padding:10px 0 12px}
.board-footer{flex:0 0 auto}.board-footer:empty{display:none}
#board .editable{min-width:0;overflow-wrap:anywhere}#board h2{flex-shrink:0}#board .line{min-width:0}
#board.ratio-wide .board-content{gap:8px}
#board.ratio-wide .board-modules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(var(--module-rows,2),minmax(0,1fr));column-gap:28px;row-gap:12px}
#board.ratio-wide .board-modules>.module{min-height:0;justify-content:flex-start;padding:7px 0 0;display:flex;width:100%;margin:0}
#board.ratio-wide h1{font-size:30px;margin-bottom:3px}#board.ratio-wide .subtitle{font-size:15px;margin:3px 0}#board.ratio-wide .definition{font-size:17px;margin:3px 0 1px}
#board.ratio-wide h2{font-size:20px;line-height:1.25;gap:8px;margin-bottom:8px}#board.ratio-wide{font-size:16px;line-height:1.35}
#board.ratio-wide .section-number{width:26px;height:26px;font-size:19px}
#board.ratio-wide .list,#board.ratio-wide .compare{padding-left:10px}#board.ratio-wide .line{gap:7px;margin:3px 0}
#board.ratio-wide .flow{padding:0 5px}#board.ratio-wide .flow-four{grid-template-columns:1fr 23px 1fr;grid-template-rows:auto 17px auto}
#board.ratio-wide .flow-step{font-size:14px;line-height:1.35;min-height:32px;gap:5px;padding:4px 6px}#board.ratio-wide .flow-step b{width:20px;height:20px;line-height:18px}
#board.ratio-wide .host-label{font-size:17px;margin-bottom:4px}#board.ratio-wide .host{padding:4px 8px 6px;margin-top:0}#board.ratio-wide .children .node{font-size:14px;padding:3px 6px}
#board.ratio-wide .connection{font-size:14px;height:25px}#board.ratio-wide .vertical-arrow{font-size:25px}#board.ratio-wide .server{font-size:14px;padding:3px 9px}#board.ratio-wide .branches{font-size:14px;line-height:1.2}#board.ratio-wide .branch-arrow{font-size:18px}#board.ratio-wide .graph-note{font-size:13px;margin:3px 0 0}
#board.ratio-wide .board-footer .takeaway{font-size:18px;margin:0;padding:3px 12px}#board.ratio-wide .board-footer p{font-size:13px;margin:3px 0 0}#board.ratio-wide .kicker{font-size:14px;margin:0 0 5px 0}
/* Long step lists wrap by row on landscape instead of crossing into the next module. */
#board.ratio-wide .flow-many{grid-template-columns:1fr 23px 1fr;grid-auto-rows:auto;gap:2px;padding:0 5px}
#board.ratio-wide .flow-many>*{grid-row:var(--r);grid-column:var(--c)}
#board.ratio-wide .flow-many>.flow-arrow{align-self:center;transform:rotate(var(--turn));font-size:18px;line-height:13px}