*{box-sizing:border-box}body{color:#304334;background:#e9ece5;margin:0;font-family:Arial,Microsoft YaHei,sans-serif}button,a{touch-action:manipulation}button,input{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline-offset:3px;outline:3px solid #789b6b}[hidden]{display:none!important}.preview-body{flex-direction:column;height:100dvh;display:flex;overflow:hidden}.preview-toolbar{background:#fafbf7;border-bottom:1px solid #dfe6d7;flex-shrink:0;align-items:center;gap:25px;height:72px;padding:0 26px;display:flex}.back-link{white-space:nowrap;align-items:center;gap:9px;font-size:12px;display:flex}.preview-identity{border-left:1px solid #dfe6d7;flex-wrap:wrap;align-items:center;gap:12px;padding-left:25px;display:flex}.preview-identity strong{font-size:15px;font-weight:600}.preview-identity>span{color:#7a9071;letter-spacing:.7px;font-size:10px}.preview-identity>small{color:#96a18d;font-size:10px}.device-switch{border:1px solid #dbe3d2;border-radius:6px;gap:3px;margin-left:auto;padding:3px;display:flex}.device-switch button{color:#8a9a7e;background:0 0;border:0;border-radius:4px;align-items:center;gap:8px;padding:8px 12px;font-size:11px;display:flex}.device-switch button.active{color:#365c30;background:#e7eedf}.preview-actions{align-items:center;gap:20px;display:flex}.preview-actions>a{white-space:nowrap;align-items:center;gap:7px;font-size:11px;display:flex}.copy-button{color:#fff;white-space:nowrap;background:#3b593c;border:0;border-radius:5px;align-items:center;gap:9px;padding:11px 15px;font-size:11px;display:inline-flex}.preview-subbar{background:#f5f7f0;border-bottom:1px solid #dce3d2;flex-shrink:0;justify-content:space-between;align-items:center;gap:20px;height:49px;padding:0 27px;display:flex}.preview-style{color:#849177;align-items:center;gap:8px;font-size:10px;display:flex}.preview-style i{color:#bec7b5;margin:0 2px;font-style:normal}.status-dot{background:#8ba277;border-radius:50%;width:5px;height:5px}.page-switch{align-self:stretch;gap:25px;display:flex}.page-switch button{color:#8e9d83;background:0 0;border:0;border-bottom:2px solid #0000;padding:0 3px;font-size:11px}.page-switch button.active{color:#365a30;border-bottom-color:#648452}.demo-hint{color:#9aa58f;font-size:9px}.preview-stage{background-image:radial-gradient(#acb8a140 .7px,#0000 .7px);background-size:12px 12px;flex:1;justify-content:center;align-items:flex-start;min-height:0;padding:25px 35px;display:flex;overflow:hidden}.preview-frame-holder{background:#fff;border-radius:6px;flex-shrink:0;position:relative;overflow:hidden;box-shadow:0 10px 45px #31422e1a}.preview-frame-holder.phone-frame{border-radius:20px;outline:6px solid #d1d9c8;box-shadow:0 10px 35px #31422e25}#demo-frame{transform-origin:0 0;background:#fff;border:0;max-width:none;display:block}.toast{color:#fff;z-index:20;background:#2b472f;border-radius:7px;width:max-content;max-width:90vw;padding:15px 23px;font-size:12px;line-height:1.7;position:fixed;bottom:30px;left:50%;transform:translate(-50%);box-shadow:0 8px 30px #1a2c231f}dialog{color:#344832;background:#fafbf7;border:1px solid #ccd6c2;border-radius:10px;width:calc(100vw - 40px);max-width:440px;padding:30px;box-shadow:0 15px 80px #19321a30}dialog::backdrop{backdrop-filter:blur(3px);background:#1d321e50}dialog h2{margin:0 0 16px;font-size:21px;font-weight:500}dialog p{color:#7f8f74;font-size:12px;line-height:1.8}dialog input{letter-spacing:2px;color:#3b593c;background:#fff;border:1px solid #b8c6aa;border-radius:5px;width:100%;margin:20px 0;padding:13px;font-size:21px;display:block}dialog .dialog-close{color:#7c9070;background:0 0;border:0;font-size:24px;position:absolute;top:12px;right:14px}@media (width<=1050px){.preview-identity>small{display:none}.preview-toolbar{gap:18px;padding:0 20px}.preview-identity{padding-left:18px}.preview-actions{gap:15px}.device-switch button{padding:8px 9px}.preview-identity strong{font-size:13px}.preview-actions>a span,.demo-hint{display:none}}@media (width<=700px){.preview-toolbar{flex-wrap:wrap;gap:14px 12px;height:auto;min-height:110px;padding:13px 15px}.back-link{font-size:10px}.back-link svg{width:15px}.preview-identity{border:0;gap:8px;margin-left:auto;padding-left:0}.preview-identity strong{font-size:12px}.preview-identity>span{font-size:9px}.device-switch{margin-left:0}.device-switch button{padding:6px 10px;font-size:10px}.device-switch button svg{width:14px}.preview-actions{gap:15px;margin-left:auto}.copy-button{padding:9px 12px;font-size:10px}.preview-actions>a span{font-size:10px;display:inline}.preview-subbar{justify-content:center;height:44px;padding:0 15px}.preview-style{display:none}.page-switch{gap:38px}.page-switch button{font-size:10px}.preview-stage{padding:10px}.preview-frame-holder.phone-frame{border-radius:10px;outline-width:3px}.toast{padding:12px 17px;font-size:11px}}.reference-credit{background:#fdfdf8;border-bottom:1px solid #dce3d2;flex-shrink:0;justify-content:center;align-items:center;gap:24px;padding:9px 20px;font-size:10px;display:flex}.reference-credit a{text-underline-offset:3px;text-decoration:underline}.reference-credit>span:nth-child(2){color:#7b896f}@media (width<=700px){.reference-credit{justify-content:space-between;gap:15px;padding:8px 15px;font-size:9px}.reference-credit>span:nth-child(2){display:none}.preview-identity strong{white-space:nowrap;text-overflow:ellipsis;max-width:175px;overflow:hidden}}