
:root{font-family:Inter,"Microsoft YaHei",system-ui,sans-serif;color:#263b35;background:#f5f4ef;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer;transition:background .18s,transform .18s}button:hover:not(:disabled){transform:translateY(-1px)}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #c9a65d;outline-offset:3px}header{max-width:1240px;margin:auto;padding:29px 40px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #dedfd5}.brand{text-decoration:none;color:inherit;display:flex;align-items:center;gap:10px;font-size:23px;font-weight:700;letter-spacing:2px}.brand small{font-size:10px;color:#748078;letter-spacing:2px;margin-left:10px}.logo{display:grid;place-items:center;width:35px;height:35px;border-radius:10px;background:#244f41;color:#fff;font-size:27px}.privacy{font-size:12px;color:#66746b;display:flex;align-items:center;gap:7px}.privacy i{width:6px;height:6px;border-radius:50%;background:#4e8060}main{max-width:1160px;margin:auto;padding:0 40px}.intro{display:flex;justify-content:space-between;align-items:center;padding:54px 0 43px}.eyebrow{font-size:12px;letter-spacing:2px;color:#7b897e;margin:0 0 18px}h1{font-size:clamp(32px,4.5vw,54px);line-height:1.25;letter-spacing:-2px;font-weight:600;margin:0}h1 em{font-style:normal;color:#49735d}.lead{font-size:14px;color:#778176;margin:21px 0 0}.mobile{display:none}.paper-art{position:relative;width:200px;height:190px;margin-right:30px}.front-paper,.back-paper{position:absolute;width:110px;height:142px;top:6px;left:45px;background:#fff;border:1px solid #dfe2d7;border-radius:4px;box-shadow:0 12px 30px #334d3012}.back-paper{transform:rotate(-14deg);background:#e3e8dc;left:28px;top:13px}.front-paper{transform:rotate(9deg);padding:22px 17px}.front-paper span{font-size:8px;letter-spacing:1px}.front-paper b{height:3px;display:block;background:#e8eade;margin:10px 0;width:90%}.front-paper b:nth-of-type(2){width:60%}.front-paper div{position:absolute;bottom:14px;right:12px;width:25px;height:25px;border-radius:50%;background:#e6efdf;text-align:center;line-height:25px;color:#557954}.art-label{position:absolute;bottom:12px;left:44px;color:#8b9685;font-size:10px;letter-spacing:2px}.workspace{background:#fffefb;border:1px solid #e0e2d9;border-radius:18px;padding:26px;margin-bottom:22px}.section-head,.section-head>div{display:flex;align-items:center;gap:12px}.section-head{justify-content:space-between;margin-bottom:23px}h2{font-size:17px;margin:0;font-weight:600}.step{color:#8c9b88;font-size:11px;font-family:monospace}.muted{font-size:11px;color:#8b9188}.dropzone{border:1.5px dashed #cdd7c5;border-radius:12px;background:#f7f9f3;text-align:center;padding:27px 16px}.dropzone.over{background:#e6efdf;border-color:#38654e}.scan-icon{font-size:36px;line-height:1;color:#587e55}h3{font-size:19px;font-weight:500;margin:15px 0 8px}.dropzone p{font-size:12px;color:#7a8576;margin:0 0 20px}.actions{display:flex;gap:10px;justify-content:center}button{border:0;border-radius:8px;padding:12px 21px;font-size:13px;font-weight:500}.primary{background:#285642;color:#fff}.primary:hover{background:#1d4332}.secondary{background:#fffefb;color:#345143;border:1px solid #d5ddd0}.dropzone small{display:block;color:#98a08f;font-size:10px;margin-top:18px}.tips{display:flex;gap:9px;color:#8b9183;font-size:11px;margin-top:17px;line-height:1.7}.tips span{color:#6b8b51}.pill{font-size:10px;background:#edf0e6;color:#6a7c5b;padding:4px 9px;border-radius:20px}.text-button{background:none;color:#7c8976;font-size:12px;padding:5px}.empty{text-align:center;color:#8c9489;padding:24px 0 37px;width:100%}.empty span{font-size:32px;color:#c3ccba}.empty p{font-size:12px;margin:12px 0 7px}.empty small{font-size:10px;color:#adb2a7}.pages{display:flex;gap:15px;flex-wrap:wrap}.page{width:calc(25% - 12px);min-width:145px;border:1px solid #e2e5dc;border-radius:10px;overflow:hidden;background:#f3f4ed}.page-image{height:190px;padding:12px;display:flex;align-items:center;justify-content:center}.page img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 3px 9px #0001}.page-meta{padding:9px 10px;background:#fff;display:flex;justify-content:space-between;align-items:center;font-size:11px}.page-tools{padding:7px 5px;display:flex;justify-content:space-around;border-top:1px solid #eee}.page-tools button{font-size:11px;padding:5px;background:none;color:#58705a}.export-panel{border-top:1px solid #eaebe3;margin-top:18px;padding-top:22px}.export-fields{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px}label{font-size:11px;color:#7b8776;display:flex;flex-direction:column;gap:8px}input,select{width:100%;padding:11px;border:1px solid #dfe3d7;border-radius:7px;background:#fff;color:#43533d;font-size:12px}.export-actions{display:flex;gap:10px;align-items:center;margin-top:21px}.export-actions p{flex:1;font-size:11px;color:#939b8b}footer{display:flex;justify-content:space-between;font-size:10px;color:#9ba18f;padding:10px 0 35px}dialog{border:1px solid #d9dfd1;border-radius:18px;width:min(950px,96vw);padding:24px;color:inherit;background:#fffefb;max-height:95dvh;overflow:auto}dialog::backdrop{background:#172e26a8;backdrop-filter:blur(5px)}.dialog-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.dialog-head .eyebrow{margin-bottom:8px}.icon-button{background:#edf0e7;font-size:18px;padding:8px 12px}.editor-layout{display:grid;grid-template-columns:1fr 190px;gap:24px}.canvas-wrap{position:relative;line-height:0;align-self:start;touch-action:none;background:#e8ece1}.canvas-wrap canvas{width:100%;height:auto;max-height:65dvh;object-fit:contain;display:block}.canvas-wrap svg{position:absolute;inset:0;width:100%;height:100%;touch-action:none}.canvas-wrap circle{cursor:grab;fill:#fff;stroke:#275d42;stroke-width:3}.canvas-wrap polygon{fill:#275d421c;stroke:#79c887;stroke-width:2;vector-effect:non-scaling-stroke}aside{display:flex;flex-direction:column;gap:18px}.editor-tip{font-size:12px;line-height:1.7;color:#89917f}.video-wrap{position:relative;background:#15261f;border-radius:10px;overflow:hidden}.video-wrap video{display:block;width:100%;max-height:65dvh;object-fit:contain}.video-wrap svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#live{width:min(620px,95vw);text-align:center}#camera-note{font-size:12px;color:#7c8975}#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);max-width:90vw;border-radius:10px;background:#233f32;color:white;padding:12px 22px;font-size:13px;box-shadow:0 6px 30px #0002;z-index:100;display:none}#toast.show{display:block}@media(max-width:700px){header{padding:20px}.brand small{display:none}main{padding:0 16px}.intro{padding:35px 5px}.mobile{display:block}h1{letter-spacing:-1px;font-size:36px}.lead{font-size:12px;line-height:1.8;max-width:230px}.paper-art{width:110px;transform:scale(.75);transform-origin:center;margin:0 10px 0 -10px}.front-paper{left:15px}.back-paper{left:0}.art-label{left:8px;white-space:nowrap}.workspace{padding:18px;border-radius:13px}.section-head{gap:6px;flex-wrap:wrap}.muted{font-size:10px}.export-fields{grid-template-columns:1fr 1fr}.export-fields label:first-child{grid-column:1/-1}.export-actions{flex-wrap:wrap}.export-actions p{flex-basis:100%;margin:0 0 5px}.export-actions button{flex:1}.page{width:calc(50% - 8px);min-width:0}.page-image{height:180px}footer{gap:15px;line-height:1.8;flex-direction:column}.editor-layout{grid-template-columns:1fr}.editor-layout aside{display:grid;grid-template-columns:1fr 1fr;gap:12px}.editor-tip{grid-column:1/-1;margin:0}#save-edit{grid-column:1/-1}.canvas-wrap canvas{max-height:49dvh}.dialog-head h2{font-size:14px}dialog{padding:16px}.privacy{font-size:10px}}


.actions{flex-wrap:wrap}


.opt-layout{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:24px}.opt-preview{overflow:auto;max-height:73dvh;text-align:center;background:#edf0e7;border-radius:8px;padding:12px}.opt-preview canvas{width:100%;height:auto;display:block;margin-bottom:12px}.opt-layout input[type=range]{padding:0;accent-color:#285642}.opt-layout label{position:relative}.opt-layout output{position:absolute;right:0;top:0;color:#285642}.opt-layout aside{gap:12px}.page-tools{flex-wrap:wrap}#optimizer{width:min(1050px,96vw)}@media(max-width:700px){.opt-layout{grid-template-columns:1fr;gap:15px}.opt-preview{max-height:42dvh}.opt-layout aside{display:grid;grid-template-columns:1fr 1fr;gap:16px}.opt-layout .editor-tip,#opt-save{grid-column:1/-1}}

