:root{font-family:"Segoe UI","Microsoft YaHei",sans-serif;color:#1f3534;background:#f8f9fa}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer;border:1px solid #d5dce0;background:white;color:#29403f;padding:10px 15px;border-radius:6px;font-size:14px}button:hover{background:#eef3f3}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #ac743c;outline-offset:3px}header{height:74px;display:flex;align-items:center;padding:0 28px;gap:32px;border-bottom:1px solid #d9e0e3;background:white}.brand{display:flex;gap:12px;align-items:center;font-size:24px;font-weight:650;text-decoration:none;color:inherit;white-space:nowrap}.brand>span{display:grid;place-items:center;background:#233d3b;color:#e2b888;width:34px;height:36px;font-size:35px;line-height:1;font-weight:400}.brand small{font-size:11px;letter-spacing:2px;color:#7c8c90;font-weight:500;margin-left:10px}.project{font-size:13px;color:#889395;margin-left:auto}main{display:grid;grid-template-columns:322px 1fr;height:calc(100dvh - 74px);min-height:630px}aside{background:white;overflow:auto;padding:25px 23px;border-right:1px solid #d9e0e3}.eyebrow{font-size:11px;letter-spacing:1.6px;font-weight:600;color:#8a979b}h1{font-weight:500;font-size:26px;letter-spacing:-1px;margin:13px 0}.intro{font-size:14px;line-height:1.7;color:#7c8a8b;margin:0 0 25px}.section-heading{display:flex;justify-content:space-between;font-size:14px;font-weight:600;margin-bottom:12px}.section-heading span{font-size:11px;font-weight:400;color:#93a0a2}.ref{display:flex;border:1px solid #e0e5e5;border-radius:7px;overflow:hidden;margin-bottom:10px;min-height:88px;background:#fafbfb}.ref img{width:88px;object-fit:cover;flex-shrink:0}.ref div{padding:12px 10px}.ref small{color:#8d999a;font-size:11px}.ref h2{font-size:15px;font-weight:600;margin:4px 0}.ref p{font-size:11px;color:#819091;margin:0;line-height:1.5}.adjust{margin-top:25px}aside label{display:flex;justify-content:space-between;font-size:14px;margin:15px 0 8px}output{color:#7e8d8e;font-size:12px}input[type=range]{width:100%;accent-color:#2a514d;height:13px}.primary{background:#243f3d;color:white;width:100%;margin-top:25px;padding:14px 15px;text-align:left;border:0}.primary:hover{background:#345551}.primary span{float:right}.note{color:#899493;font-size:12px;line-height:1.7;margin:13px 0 0}#stage{position:relative;min-width:0;overflow:hidden;background:#e8edf0}#canvas{position:absolute;inset:0}canvas{display:block;touch-action:none;width:100%;height:100%}.stage-title{position:absolute;z-index:2;top:27px;left:30px;pointer-events:none}.stage-title h2{font-size:22px;font-weight:500;margin:9px 0}.stage-title p{font-size:12px;color:#86949a;margin:0}.stage-title .eyebrow{color:#6c858c}.stage-title .eyebrow span{margin-left:15px;color:#98a6a9}.top-controls{position:absolute;z-index:3;top:27px;right:25px;display:flex;gap:8px;align-items:center}.top-controls button,.toggle{background:#ffffffda;border:1px solid #d4dfe2;border-radius:6px;padding:9px 12px;font-size:12px}.toggle{display:flex;gap:6px;align-items:center;cursor:pointer}.toggle input{accent-color:#274d49}.top-controls button[aria-pressed=true]{background:#264743;color:white}.views{position:absolute;z-index:3;bottom:62px;left:50%;transform:translateX(-50%);display:flex;gap:4px;background:#ffffffdd;padding:5px;border:1px solid #d9e1e4;border-radius:9px;box-shadow:0 5px 20px #475b6210;white-space:nowrap}.views button{border:0;background:transparent;font-size:12px;padding:10px 14px}.views button.active{background:#2b4846;color:white}.stage-footer{position:absolute;bottom:21px;left:28px;right:25px;display:flex;justify-content:space-between;gap:10px;color:#8a999d;font-size:11px;pointer-events:none}#toast{position:absolute;z-index:5;bottom:118px;left:50%;transform:translateX(-50%);background:#263e3d;color:white;font-size:13px;padding:10px 17px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .2s;white-space:nowrap}#error{position:absolute;inset:45% 15% auto;text-align:center;color:#7d3c3c;background:white;padding:22px;z-index:8;font-size:16px}@media(max-width:1050px){main{grid-template-columns:280px 1fr}aside{padding:22px 17px}.top-controls{top:112px;left:28px;right:auto}.ref img{width:76px}.views button{padding:10px 9px}}@media(max-width:650px){header{padding:0 17px;height:62px;gap:10px}.brand small,.project{display:none}header>button{margin-left:auto;font-size:12px}main{height:auto;min-height:0;display:flex;flex-direction:column}#stage{order:-1;height:62dvh;min-height:460px}aside{overflow:visible;padding:24px;border:0}.stage-title{left:19px;top:20px}.stage-title h2{font-size:19px}.top-controls{left:19px;top:104px}.views{bottom:50px;width:calc(100% - 26px);justify-content:center}.views button{font-size:11px;padding:9px 7px}.stage-footer{left:15px;right:15px;font-size:10px}.stage-footer span:last-child{display:none}.ref img{width:100px;height:90px}.ref p{font-size:12px}}
/* Editable reference cards */
.ref-edit{border:1px solid #233d3b55;background:transparent;color:inherit;padding:5px 8px;font:10px monospace;cursor:pointer;float:right}
.ref-editor{clear:both;border-top:1px solid #233d3b22;margin-top:10px;padding-top:10px;display:grid;gap:7px}
.ref-editor[hidden]{display:none}.ref-editor label{font-size:11px;color:#49615f;display:grid;gap:3px}.ref-editor input{width:100%;border:1px solid #233d3b44;background:#fff;padding:7px;color:#233d3b}.ref-editor .upload{border:1px dashed #233d3b66;padding:7px}.ref-editor button{border:0;background:#233d3b;color:#fff;padding:8px;cursor:pointer}