@charset "UTF-8";
.viewer.process-open #canvas-wrap{bottom:calc(var(--process-panel-height,200px) + 78px)}.viewer.process-open .viewer-bottom{bottom:calc(var(--process-panel-height,200px) + 27px)}.viewer.process-open .hint{display:none}.viewer.process-open .controls #shell,.viewer.process-open .controls #rotate{display:none}.viewer.process-open .process-panel{bottom:12px;left:50%;transform:translateX(-50%);width:min(680px,calc(100% - 28px))}.viewer.process-open .corner-axis{bottom:calc(var(--process-panel-height,200px) + 90px)}
.process-panel{position:absolute;left:28px;bottom:115px;width:min(540px,calc(100% - 56px));padding:19px 20px 13px;background:#fffffff5;border:1px solid white;border-radius:12px;box-shadow:0 8px 40px #183d2926;backdrop-filter:blur(16px);z-index:2}.process-panel[hidden]{display:none}.process-close{position:absolute;right:10px;top:8px;font-size:20px;color:#7d9186;background:none;border:0}.process-heading strong{display:block;font-size:15px;font-weight:550;margin:8px 0}.process-heading p{font-size:11px;color:#768a7b;margin:0 0 13px}.process-steps{display:flex;align-items:center;gap:4px}.process-steps button{flex:1;background:#f0f4ef;border:0;border-radius:5px;font-size:10px;padding:9px 4px;color:#819184;white-space:nowrap}.process-steps button.active{background:#e0eee2;color:#1b674e;box-shadow:inset 0 -2px #3e896c}.process-steps span{font-size:10px;color:#b2beb0}.process-progress{height:3px;background:#e4ebe2;margin:12px 0;border-radius:4px;overflow:hidden}.process-progress span{display:block;height:100%;background:#459474;width:0}.process-actions{display:flex;gap:12px;align-items:center;font-size:10px;color:#7e8f82}.process-actions button{font-size:11px;border:0;background:#ecf2ea;color:#51765b;padding:8px 11px;border-radius:5px}.process-actions button:first-child{background:#285f49;color:white;min-width:100px}.process-actions label{display:flex;align-items:center;gap:4px;white-space:nowrap}.process-actions select{border:1px solid #dce6d8;border-radius:4px;color:#50785c;background:white;padding:4px;font:inherit}.process-actions input{accent-color:#34795a}.process-note{margin:11px 0 0;font-size:9px;color:#a1ac9d;line-height:1.5}@media(max-width:760px){.process-panel{left:12px;bottom:107px;width:calc(100% - 24px);padding:15px 12px 10px}.process-heading strong{font-size:13px}.process-heading p{font-size:9px}.process-steps button{font-size:9px;padding:8px 1px}.process-steps{gap:2px}.process-actions{gap:8px;font-size:9px}.process-actions button{font-size:10px;padding:7px 9px}.process-actions button:first-child{min-width:85px}.controls button{padding-left:9px!important;padding-right:9px!important;font-size:9px!important}}
:root{font-family:Inter,"Segoe UI","Microsoft YaHei",system-ui,sans-serif;color:#17313b;background:#f4f5f1;font-synthesis:none;--ink:#17313b;--green:#166f69;--muted:#74858a;--line:#dae0dc}*{box-sizing:border-box}body{margin:0;height:100dvh;display:flex;flex-direction:column;overflow:hidden}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #d8a540;outline-offset:4px}button:disabled{opacity:.5;cursor:wait}button{transition:background .18s,color .18s,box-shadow .18s}button:hover{background:#e6ede8}.topbar{height:85px;flex-shrink:0;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid var(--line);z-index:2}.brand{display:flex;gap:14px;text-decoration:none;color:var(--ink);font-weight:650;font-size:17px;letter-spacing:1px;align-items:center}.brand small{display:block;font-size:9px;letter-spacing:2.6px;font-weight:500;margin-top:5px;color:#879396}.brand-mark{width:39px;height:39px;background:var(--ink);color:white;border-radius:10px;display:flex;align-items:center;justify-content:center;letter-spacing:-2px;font-size:23px}.brand-mark span{font-size:14px;color:#83cfc0;transform:translateY(5px)}.header-right{display:flex;gap:16px;align-items:center}.live{font-size:12px;color:#687b80;display:flex;gap:8px;align-items:center;margin-right:12px}.live i{width:6px;height:6px;border-radius:50%;background:#3d9984}.light-button,.icon-button{background:transparent;border:1px solid #dce3e0;border-radius:7px;height:36px;padding:0 15px;font-size:12px;color:var(--ink)}.light-button span{margin-left:16px}.icon-button{font-size:23px;width:38px;padding:0}main{display:flex;flex:1;min-height:0}.sidebar{width:300px;flex-shrink:0;padding:34px 25px 20px 30px;display:flex;flex-direction:column;border-right:1px solid var(--line);background:#fafbf8;overflow:auto}.eyebrow{font-size:9px;letter-spacing:1.7px;font-weight:650;color:#78908f}.intro h1{font-size:27px;line-height:1.5;letter-spacing:.5px;font-weight:550;margin:21px 0 10px}.intro p{font-size:11px;color:#7e8b8b;margin-bottom:32px}.section-label{display:flex;justify-content:space-between;font-size:10px;color:#8d9998;letter-spacing:.7px;margin:0 0 13px}.chapter{display:flex;align-items:center;gap:12px;border:0;border-top:1px solid #e2e8e3;padding:17px 8px;width:100%;background:transparent;text-align:left;color:#879390}.chapter-index{font-size:11px;font-variant-numeric:tabular-nums;align-self:flex-start;margin-top:3px}.chapter strong{font-size:13px;font-weight:550;display:block;margin-bottom:5px}.chapter small{font-size:10px;color:#91a09a}.chapter b{font-size:14px;font-weight:400;margin-left:auto;opacity:0}.chapter.active{background:#e8efea;color:#165d54;border-radius:7px;border-color:transparent;padding-left:12px;box-shadow:inset 3px 0 #266b59}.chapter.active b{opacity:1}.chapter.active small{color:#718e80}.layer-section{margin-top:27px;border-top:1px solid var(--line);padding-top:21px}.layer-section .section-label span{font-size:9px}.layer{display:flex;justify-content:space-between;align-items:center;margin:17px 0;font-size:11px;color:#5f7578;cursor:pointer}.layer span{display:flex;gap:9px;align-items:center}.swatch{height:7px;width:7px;background:var(--swatch);border-radius:2px}.layer input{width:25px;height:14px;appearance:none;border-radius:20px;background:#c7d2cc;margin:0;cursor:pointer;transition:.2s;position:relative}.layer input:before{content:"";position:absolute;top:3px;left:3px;width:8px;height:8px;border-radius:50%;background:white;transition:.2s}.layer input:checked{background:#377b66}.layer input:checked:before{transform:translateX(11px)}.reference-note{display:flex;gap:8px;margin-top:auto;padding-top:24px;color:#9aa29a;font-size:10px;line-height:1.9}.reference-note p{margin:0}.viewer{position:relative;flex:1;min-width:0;background:radial-gradient(ellipse at 48% 36%,#fff 0,#edf1ed 70%,#e1e9e3 100%);isolation:isolate;overflow:hidden}#canvas-wrap{position:absolute;inset:0}canvas{display:block;touch-action:none;width:100%;height:100%}.viewer-title{position:absolute;top:32px;left:32px;pointer-events:none}.viewer-title h2{font-weight:500;font-size:21px;margin:12px 0 8px}.viewer-title p{color:#82928c;font-size:11px;margin:0}.viewer-title .eyebrow{font-size:8px}.view-switch{position:absolute;top:30px;right:28px;display:flex;background:#ffffffd9;backdrop-filter:blur(14px);border:1px solid white;padding:4px;border-radius:9px;box-shadow:0 4px 20px #183a2810}.view-switch button{border:0;background:transparent;color:#87948e;font-size:10px;padding:9px 13px;border-radius:5px}.view-switch button.active{background:#244d45;color:white}.viewer-bottom{position:absolute;bottom:25px;left:0;right:0;display:flex;align-items:center;flex-direction:column;gap:15px;pointer-events:none}.controls{pointer-events:auto;display:flex;padding:5px;background:#ffffffe6;box-shadow:0 6px 22px #142b2512;border:1px solid #fff;border-radius:10px;backdrop-filter:blur(14px)}.controls button{border:0;background:transparent;color:#647b70;font-size:11px;padding:9px 15px;border-radius:6px;display:flex;gap:8px;align-items:center}.controls button:hover{background:#e8f0e9}.controls button[aria-pressed=true]{color:#165d4a;background:#deeee4}.controls span{font-size:16px;line-height:1}.hint{display:flex;gap:9px;color:#95a197;font-size:9px}.hint i{font-style:normal}.corner-axis{position:absolute;bottom:45px;right:30px;color:#7b9386;font-size:9px;width:36px;height:36px}.corner-axis i{display:block;font-style:normal}.corner-axis span{position:absolute;top:9px;left:1px}.corner-axis b{position:absolute;top:24px;left:1px;white-space:nowrap;font-weight:400}footer{height:35px;display:flex;justify-content:space-between;align-items:center;padding:0 34px;background:#fff;color:#8c9993;border-top:1px solid var(--line);font-size:9px;flex-shrink:0}footer i{font-style:normal;margin:0 10px;color:#bdc7c0}footer b{font-weight:400;color:#5a7467}#loading{position:absolute;inset:0;background:#eef2edee;display:flex;align-items:center;justify-content:center;flex-direction:column;z-index:3;transition:opacity .4s}#loading.hidden{opacity:0;pointer-events:none}#loading strong{font-size:15px;font-weight:500;margin-top:20px}#loading p{font-size:11px;color:#82938a}.progress{width:180px;height:3px;background:#d5dfd6;margin-top:13px;border-radius:5px;overflow:hidden}.progress span{display:block;width:5%;height:100%;background:#337d65;transition:width .3s}.loader-shape{display:flex;gap:4px;align-items:center;height:35px}.loader-shape span{width:8px;height:24px;background:#387b66;animation:bounce 1s ease-in-out infinite;border-radius:2px}.loader-shape span:nth-child(2){animation-delay:.15s;height:35px}.loader-shape span:nth-child(3){animation-delay:.3s}@keyframes bounce{50%{opacity:.3;transform:translateY(5px)}}.inspector{position:absolute;right:28px;bottom:127px;background:#fffffff2;border:1px solid white;border-radius:10px;padding:18px 35px 15px 18px;max-width:340px;box-shadow:0 6px 35px #1f3b2520;overflow-wrap:anywhere}.inspector .eyebrow{font-size:8px}.inspector strong{display:block;margin:12px 0 8px;font-size:12px;font-weight:550}.inspector p{font-size:10px;color:#8a988d;margin:0}.inspector button{position:absolute;right:7px;top:5px;border:0;background:transparent;color:#879b8b;font-size:20px}#toast{position:absolute;bottom:115px;left:50%;transform:translateX(-50%);padding:10px 17px;font-size:11px;color:white;background:#234d41;border-radius:7px;white-space:nowrap}.footer-tip{opacity:.7}@media(min-width:1700px){.sidebar{width:330px;padding:42px 30px}.intro h1{font-size:31px}.chapter{padding-top:22px;padding-bottom:22px}}@media(max-height:760px) and (min-width:761px){.topbar{height:68px}.sidebar{padding-top:23px}.intro h1{font-size:23px;margin-top:14px}.intro p{margin-bottom:21px}.chapter{padding-top:12px;padding-bottom:12px}.layer-section{margin-top:18px;padding-top:16px}.reference-note{padding-top:14px}}@media(max-width:1000px){.sidebar{width:246px;padding-left:20px;padding-right:20px}.intro h1{font-size:24px}.view-switch{top:115px;left:25px;right:auto}.viewer-title{top:25px;left:25px}.viewer-bottom{bottom:20px}.corner-axis{display:none}}@media(max-width:760px){body{overflow:auto;height:100dvh}.topbar{height:64px;padding:0 17px}.brand{font-size:14px;gap:9px}.brand-mark{width:31px;height:31px;font-size:20px}.brand small{font-size:7px;letter-spacing:1.5px;margin-top:3px}.header-right{gap:7px}.live{display:none}.light-button{padding:0 10px;font-size:10px}.light-button span{margin-left:6px}.icon-button{width:32px;height:34px}main{flex-direction:column-reverse;flex:1;min-height:0}.sidebar{width:100%;padding:12px 15px;overflow:visible;border-right:0;border-top:1px solid #dfe6df;flex-shrink:0}.intro,.layer-section,.reference-note,.section-label{display:none}.guide{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.chapter{border:0;padding:10px 6px;flex-direction:column;align-items:center;gap:5px;border-radius:6px;text-align:center}.chapter.active{padding-left:6px;box-shadow:inset 0 -3px #387b66}.chapter-index{align-self:center;font-size:9px;margin:0}.chapter strong{font-size:10px;margin:0}.chapter small,.chapter b{display:none}.viewer{min-height:280px;width:100%;flex:1}.viewer-title{top:19px;left:19px}.viewer-title h2{font-size:17px;margin-top:8px}.viewer-title p{font-size:9px}.view-switch{top:20px;left:auto;right:15px;flex-direction:column;padding:3px}.view-switch button{font-size:9px;padding:6px 8px}.viewer-bottom{gap:10px;bottom:18px}.controls button{font-size:10px;padding:9px 13px}.hint{font-size:8px}.hint span:first-child{font-size:0}.hint span:first-child:after{content:"单指旋转";font-size:8px}.hint span:nth-of-type(2){font-size:0}.hint span:nth-of-type(2):after{content:"双指缩放 / 平移";font-size:8px}.hint i:nth-of-type(2),.hint span:last-child{display:none}footer{padding:0 16px;height:29px;font-size:8px}.footer-tip{display:none}.inspector{right:15px;left:15px;bottom:112px;max-width:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}