:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#20312c;background:#f8faf8;font-synthesis:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;--ink:#20312c;--dark:#123d34;--muted:#718079;--green:#235f4f;--mint:#dcf1e6;--line:#e6ebe8;--bg:#f8faf8;--cream:#f0f3ee}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #4db695;outline-offset:3px}button:active:not(:disabled){transform:translateY(1px)}.site{max-width:1560px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column}svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}h1,h2,h3,p{margin:0}em{font-style:normal;color:#3e8c6f}h1{font-weight:760;letter-spacing:-.065em}.topbar{height:83px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,4.5vw,74px);border-bottom:1px solid var(--line);background:#fff}.brand{display:inline-flex;align-items:center;gap:11px;color:var(--dark);font-weight:820;letter-spacing:-.065em;font-size:26px;text-decoration:none}.brand-symbol{width:36px;height:36px;background:var(--dark);border-radius:11px;display:grid;place-items:center}.brand-symbol svg{color:#a6e9ce;width:24px;height:24px;stroke-width:2.1}.brand-dot{color:#57b390}.topbar-right{display:flex;align-items:center;gap:20px}.version-tag{font-size:10px;font-weight:800;letter-spacing:.17em;color:#87948c}.privacy-pill{display:inline-flex;align-items:center;gap:8px;background:#f1f8f2;border:1px solid #d9ebde;color:#336d51;padding:10px 13px;border-radius:100px;font-size:12px;font-weight:720}.privacy-pill svg{width:14px;height:14px}.welcome{min-height:680px;padding:75px clamp(20px,6vw,95px) 70px;display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:center;overflow:hidden}.welcome-copy{position:relative;z-index:2;max-width:570px}.eyebrow{font-size:11px;color:#4a876a;letter-spacing:.18em;font-weight:780;display:flex;align-items:center;gap:10px;margin-bottom:27px}.eyebrow-dash{display:block;width:23px;height:2px;background:#66b99b}.welcome h1{font-size:clamp(49px,5.9vw,84px);line-height:1.10;margin-bottom:25px}.lead{font-size:17px;line-height:1.75;max-width:490px;color:#62726a}.welcome-actions{display:flex;flex-wrap:wrap;gap:12px;margin:32px 0 15px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;padding:12px 17px;border-radius:12px;font-size:13px;font-weight:730;border:1px solid transparent;transition:background .14s,border-color .14s,transform .08s}.btn svg{width:17px;height:17px}.btn.large{padding:16px 21px;font-size:14px;border-radius:13px}.btn.primary{color:white;background:#185a46;box-shadow:0 4px 8px #144b3412}.btn.primary:hover{background:#104836}.btn.secondary{color:#29483c;background:white;border-color:#d8e2dd}.btn.secondary:hover{background:#f5f9f6;border-color:#a4c5b6}.btn.tertiary{color:#365a4c;background:white;border:1px solid #dae4dc;box-shadow:none}.btn.full{width:100%}.sample-link{border:0;background:none;padding:8px 0;font-size:13px;color:#387b62;text-decoration:underline;text-decoration-color:#a1cbb8;text-underline-offset:5px;font-weight:670}.sample-link span{display:inline-block;margin-left:5px;font-size:16px;transition:transform .12s}.sample-link:hover span{transform:translateX(4px)}.trust-row{border-top:1px solid #e5ebe6;margin-top:48px;padding-top:23px;display:flex;align-items:center;gap:12px}.trust-icon{width:42px;height:42px;display:grid;place-items:center;background:#e5f4eb;border-radius:13px;color:#24724d}.trust-row p{font-size:12px;line-height:1.55;color:#7b8a80}.trust-row strong{color:#3a5947;font-weight:750}.hero-visual{height:530px;position:relative;perspective:1100px;isolation:isolate}.hero-visual:before{content:"";position:absolute;inset:35px 0 55px;background:radial-gradient(ellipse at center,#e6f4e7 0%,#eef4ed 49%,transparent 72%);z-index:-1}.hero-mat{position:absolute;left:7%;top:10%;width:61%;height:78%;border-radius:17px;background:#e4e7dd;border:14px solid #f1f3ed;box-shadow:0 20px 45px #2a503322;transform:rotate(-10deg) rotateY(-8deg)}.hero-photo{width:100%;height:100%;border-radius:5px;overflow:hidden;background:#b1b5a7}.hero-photo img{width:100%;height:100%;object-fit:cover}.hero-card{position:absolute;left:39%;top:12%;width:52%;height:81%;background:white;box-shadow:0 18px 65px #153e2533;border-radius:9px;padding:18px 20px;transform:rotate(8deg) rotateY(-5deg);display:flex;flex-direction:column;gap:15px}.hero-status{display:inline-flex;align-items:center;gap:6px;color:#2d9971;font-size:9px;font-weight:830;letter-spacing:.13em}.hero-status svg{width:13px;height:13px;stroke-width:3}.hero-paper{border:1px solid #eef1ee;background:#fff;flex:1;padding:35px 18px}.hero-paper-mini{font-size:9px;letter-spacing:.15em;color:#698374;font-weight:760}.hero-paper-title{font-weight:800;font-size:clamp(19px,2vw,30px);line-height:1.2;letter-spacing:-.04em;margin-top:34px;color:#284b40}.hero-paper-rule{height:5px;width:44%;background:#55aa89;border-radius:4px;margin-top:22px;margin-bottom:34px}.hero-paper-line{height:5px;border-radius:3px;background:#e7ede7;margin-top:11px;width:95%}.hero-paper-line.short{width:70%}.hero-orbit{position:absolute;border:1px dashed #83c4a5;border-radius:100%;pointer-events:none}.orbit-one{left:0;bottom:30px;width:130px;height:130px}.orbit-two{right:0;top:8px;width:75px;height:75px}.hero-deco{position:absolute;left:6%;bottom:2%;color:#83a38d;font-size:11px;letter-spacing:.15em}.footer{border-top:1px solid var(--line);min-height:73px;padding:20px clamp(20px,4.5vw,74px);display:flex;justify-content:space-between;align-items:center;color:#8b9990;font-size:11px;letter-spacing:.035em;margin-top:auto}.footer-mark{color:#5db28a}.footer>:last-child{font-size:10px;letter-spacing:.10em;font-weight:760}.footer-divider{margin:0 8px;color:#bac7bc}
/* Studio */
.studio{padding:43px clamp(20px,3.8vw,62px) 60px}.studio-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:25px}.eyebrow.compact{margin-bottom:13px;font-size:10px}.studio-head h1{font-size:clamp(34px,3.35vw,51px);line-height:1.18;margin-bottom:7px}.studio-head p{font-size:13px;color:#7b8a80}.studio-head-actions{display:flex;gap:9px;padding-bottom:5px}.workflow{display:flex;align-items:center;gap:13px;color:#68917a;margin-bottom:23px}.workflow-step{display:flex;align-items:center;gap:7px;letter-spacing:.13em;font-size:10px;font-weight:810}.workflow-step>span{width:21px;height:21px;border:1px solid #accbb8;border-radius:100%;display:grid;place-items:center;font-size:10px}.workflow-step.active>span{background:#e4f3e9}.workflow-connector{width:38px;height:1px;background:#c5d6cc}.studio-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 292px;gap:15px;align-items:stretch}.work-panel,.settings-panel{background:white;border:1px solid #e1e8e3;border-radius:17px;min-width:0;overflow:hidden;box-shadow:0 7px 24px #142c1708}.work-panel{display:flex;flex-direction:column}.panel-heading{height:70px;padding:0 19px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #edf0ec;gap:10px}.panel-heading>div{display:flex;align-items:center;gap:10px}.panel-index{font-size:10px;font-weight:850;color:#479b74}.panel-heading h2{font-size:15px;font-weight:760;letter-spacing:-.03em}.subtle-tag,.live-indicator{font-size:9px;font-weight:800;letter-spacing:.105em;color:#9ba8a1;white-space:nowrap}.live-indicator{display:flex;align-items:center;gap:7px;color:#39976d}.live-indicator>span{width:7px;height:7px;border-radius:100%;background:#58bd83;box-shadow:0 0 0 4px #ddf3e4}.source-viewport,.result-viewport{flex:1;display:grid;place-items:center;position:relative;background-color:#edf2ed;background-image:linear-gradient(45deg,#e6ece7 25%,transparent 25%),linear-gradient(-45deg,#e6ece7 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e6ece7 75%),linear-gradient(-45deg,transparent 75%,#e6ece7 75%);background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0px;min-height:310px;padding:18px;overflow:hidden}.source-stage{position:relative;max-width:100%;width:100%;max-height:490px;display:flex;align-items:center;justify-content:center;user-select:none;-webkit-user-select:none;touch-action:none;filter:drop-shadow(0 5px 12px #264f3833)}.source-stage>img{display:block;width:auto;height:auto;max-height:490px;max-width:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}.crop-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.crop-overlay path{fill:#04180a73}.crop-overlay polyline{stroke:#b4f9ce;stroke-width:2.3;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 3px #103e20b3)}.corner-handle{width:27px;height:27px;position:absolute;border:3px solid white;box-shadow:0 0 0 2px #2aa674,0 2px 9px #082f2680;background:#2b9f78;border-radius:50%;transform:translate(-50%,-50%);touch-action:none;cursor:grab;transition:box-shadow .15s}.corner-handle:active,.corner-handle.dragging{cursor:grabbing;background:#144d3a;box-shadow:0 0 0 6px #85e5b9aa,0 2px 12px #082f2680}.corner-handle:focus-visible{outline:4px solid #94f0c2;outline-offset:3px}.loupe{position:absolute;z-index:12;pointer-events:none;width:114px;height:114px;background-color:#edf2e9;background-repeat:no-repeat;border:4px solid white;outline:3px solid #3b9b74;box-shadow:0 7px 25px #05160e4f;border-radius:50%;overflow:hidden}.loupe-cross{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#29be8a;font-size:23px;line-height:1;text-shadow:1px 1px white,-1px -1px white}.result-viewport{padding:21px;background-color:#f2f5f1;min-height:310px}.scan-frame{display:flex;align-items:center;justify-content:center;width:100%;height:100%;max-height:490px}.scan-frame canvas{width:auto;height:auto;max-width:100%;max-height:490px;object-fit:contain;background:#fff;box-shadow:0 8px 25px #23463124;display:block}.panel-tools{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:13px 15px;border-top:1px solid #edf0ed;min-height:61px}.tool-button{display:inline-flex;align-items:center;gap:6px;color:#3b7058;border:none;background:transparent;font-size:11px;font-weight:740;padding:6px 7px;border-radius:7px;white-space:nowrap}.tool-button:hover{background:#eaf4ed}.tool-button svg{width:14px;height:14px}.detect-hint{font-size:10px;color:#8da298;line-height:1.3;text-align:right;max-width:135px;overflow:hidden;text-overflow:ellipsis}.result-tools #dimensions{color:#84938a;font-size:10px;font-variant-numeric:tabular-nums}.result-tools{padding:13px 15px}
/* Inspector */
.settings-panel{display:flex;flex-direction:column}.settings-header{padding:19px 17px;display:flex;align-items:center;gap:11px;border-bottom:1px solid #edf0ec}.settings-icon{background:#e1f3e9;border-radius:10px;width:38px;height:38px;display:grid;place-items:center;color:#328b66}.settings-icon svg{width:19px;height:19px}.settings-header h2{font-size:13px;font-weight:800;letter-spacing:-.015em}.settings-header p{font-size:11px;color:#86958a;margin-top:4px}.settings-body{padding:22px 17px 11px;flex:1}.field-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#738379;font-size:10px;letter-spacing:.12em;font-weight:840}.tiny-tip{font-size:9px;color:#abb7af;font-weight:760}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:15px}.mode-button{background:#fff;border:1.5px solid #e2e9e3;border-radius:10px;padding:10px 8px;display:flex;align-items:center;flex-direction:column;gap:8px;font-size:10px;color:#6d7f74;font-weight:740;transition:background .12s,border-color .12s}.mode-button.active{background:#ecf8ef;color:#176344;border-color:#59b990;box-shadow:0 0 0 1px #73c29c33}.mode-button:hover{border-color:#8abfa2}.mode-sample{width:49px;height:38px;background:#e2e1d9;border-radius:4px;display:flex;flex-direction:column;gap:4px;padding:8px 7px;transform:rotate(-3deg)}.mode-sample span{height:3px;background:#8d9b91;border-radius:3px;width:100%}.mode-sample span:nth-child(2){width:65%}.mode-sample span:nth-child(3){width:80%}.document-preview{background:#fff;border:1px solid #e5eae6}.document-preview span{background:#67796f}.natural-preview{background:#e3dbcd}.bw-preview{background:#fff}.bw-preview span{background:#1c2820}.whiteboard-preview{background:#f4fcff}.whiteboard-preview span{background:#58a2ac} .page-proportions{margin-top:17px}.page-proportions label{display:block;font-size:10px;color:#738379;font-weight:840;letter-spacing:.12em;margin-bottom:9px}.page-proportions select{appearance:auto;display:block;background:#f7faf7;border:1px solid #dbe6dd;border-radius:9px;width:100%;height:38px;padding:0 9px;color:#496356;font-size:12px;font-weight:620;cursor:pointer}.settings-divider{height:1px;background:#edf1ec;margin:24px 0 19px}.reset-button{border:none;background:none;color:#408865;font-size:10px;font-weight:670;letter-spacing:normal;padding:4px}.reset-button:hover{text-decoration:underline}.range-field{display:block;margin-top:20px}.range-field>span{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;color:#3d5147;font-weight:710}.range-field output{font-size:11px;color:#44946e;font-weight:820;font-variant-numeric:tabular-nums}.range-field input{width:100%;accent-color:#2a8a63;cursor:pointer;margin:15px 0 6px}.range-field small{display:block;font-size:10px;line-height:1.4;color:#9aa8a0}.export-area{padding:21px 17px 17px;background:#f7faf7;border-top:1px solid #e5ece6}.export-meta{letter-spacing:normal;color:#84a390}.export-area .btn.full{margin:14px 0 9px}.export-secondary{display:grid;grid-template-columns:1fr 1fr;gap:7px}.export-secondary .btn{font-size:11px;padding:9px 6px;gap:5px}.export-secondary svg{width:14px;height:14px}
/* Pages */
.page-strip{margin-top:16px;padding:22px 22px 24px;background:white;border:1px solid #e1e8e3;border-radius:16px}.page-strip-top{display:flex;justify-content:space-between;align-items:end;gap:20px}.page-strip-kicker{font-weight:810;color:#8fa49a;letter-spacing:.13em;font-size:10px}.page-strip h2{font-size:19px;margin-top:4px;letter-spacing:-.045em}.page-strip h2 span{font-size:13px;color:#8a9f8e;font-weight:600}.page-list{display:flex;gap:11px;margin-top:16px;padding-bottom:4px;overflow-x:auto;scrollbar-color:#b9d2c2 transparent}.page-card{min-width:160px;max-width:160px;border:1.5px solid #e1e8e1;border-radius:11px;padding:8px;background:#fff;display:flex;flex-direction:column;gap:8px;position:relative}.page-card.active{border-color:#48ae7b;background:#f7fbf7}.page-card-main{width:100%;display:flex;align-items:center;gap:9px;min-width:0;background:none;border:none;padding:0;text-align:left}.page-card img{width:45px;height:58px;object-fit:cover;border:1px solid #e8ede7;border-radius:4px;background:#fff}.page-card-info{min-width:0}.page-card-info strong{display:block;color:#33493c;font-size:11px;margin-bottom:5px}.page-card-info small{font-size:10px;color:#9aa99e;white-space:nowrap}.page-card-actions{display:flex;justify-content:space-between;border-top:1px solid #e9efea;padding-top:6px}.page-card-actions button{border:none;border-radius:6px;background:#f3f7f3;color:#6d8d79;padding:4px;display:flex}.page-card-actions button:hover{background:#e2efe5}.page-card-actions button svg{width:14px;height:14px}.page-card-actions button.delete:hover{color:#ae5149;background:#f9e9e5}.studio-footer-note{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:19px;color:#7c9683;font-size:11px;text-align:center}.studio-footer-note svg{width:14px;height:14px}
/* Camera modal, toast, spinner */
.modal-shell,.busy-overlay{position:fixed;z-index:60;inset:0;display:flex;align-items:center;justify-content:center;background:#001810bd;padding:18px;backdrop-filter:blur(6px)}.modal-shell[hidden],.busy-overlay[hidden],.toast[hidden],.loupe[hidden],.welcome[hidden],.studio[hidden]{display:none!important}.camera-card{background:#fff;width:min(520px,100%);padding:18px;border-radius:20px;box-shadow:0 12px 60px #0005}.camera-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}.camera-top h2{font-size:17px}.icon-button{width:35px;height:35px;border-radius:8px;border:none;background:#e9f0ea;display:grid;place-items:center}.camera-view{position:relative;background:#13221a;min-height:250px;max-height:65vh;border-radius:14px;overflow:hidden;display:flex;align-items:center;justify-content:center}.camera-view video{width:100%;height:100%;object-fit:contain;max-height:65vh}.camera-guide{position:absolute;inset:13%;border:2px dashed #a2efc1af;border-radius:8px;pointer-events:none}.camera-card p{text-align:center;color:#6b8273;font-size:12px;line-height:1.5;margin:13px 0}.busy-overlay{z-index:70}.busy-card{background:white;border-radius:17px;padding:31px;display:flex;align-items:center;gap:13px;flex-direction:column;min-width:250px;box-shadow:0 12px 60px #0003}.busy-card strong{font-size:14px}.busy-card>span{font-size:12px;color:#819587}.spinner{height:37px;width:37px;border:4px solid #d9efe3;border-top-color:#1c7f58;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.toast{position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 25px);left:50%;transform:translateX(-50%);padding:13px 18px;background:#143b2d;color:#fff;box-shadow:0 10px 35px #1236233d;border-radius:11px;font-size:12px;line-height:1.4;font-weight:630;z-index:100;max-width:calc(100vw - 32px);text-align:center}
@media (max-width:1300px){.studio-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.settings-panel{grid-column:1/-1;display:grid;grid-template-columns:190px 1fr 225px;align-items:stretch}.settings-header{border-bottom:none;border-right:1px solid #edf0ec;align-items:flex-start}.settings-body{padding:17px 18px}.settings-body .settings-divider{margin:12px 0}.mode-grid{grid-template-columns:repeat(4,1fr);margin-top:10px}.mode-button{padding:7px 4px;gap:5px}.mode-sample{height:29px;width:37px;padding:6px}.range-field{display:inline-block;width:31%;margin-right:1%;vertical-align:top;margin-top:14px}.range-field small{font-size:9px}.range-field input{margin:8px 0 4px}.export-area{border-left:1px solid #edf0ec;border-top:none;padding:17px}.export-area .btn.full{margin:15px 0}}
@media (max-width:900px){.welcome{grid-template-columns:1fr 1fr;gap:25px;padding:45px 35px 60px;min-height:560px}.welcome h1{font-size:55px}.lead{font-size:14px}.hero-visual{height:400px}.hero-card{padding:11px}.hero-paper{padding:20px 12px}.hero-paper-title{font-size:20px;margin-top:20px}.studio{padding:33px 20px 45px}.studio-grid{gap:12px}.settings-panel{grid-template-columns:1fr}.settings-header{border-right:none;border-bottom:1px solid #edf0ec}.settings-body{padding:20px}.export-area{border-left:none;border-top:1px solid #edf0ec}.range-field{width:32%}}
@media (max-width:690px){.topbar{height:66px;padding:0 18px}.brand{font-size:23px}.brand-symbol{width:33px;height:33px}.version-tag{display:none}.privacy-pill{padding:9px 11px;font-size:10px}.welcome{display:flex;flex-direction:column-reverse;gap:0;padding:22px 22px 55px;min-height:0;align-items:stretch}.hero-visual{width:100%;max-width:440px;height:278px;align-self:center}.hero-mat{border-width:9px;left:15%;width:55%;top:7%;height:77%}.hero-card{left:45%;width:43%;height:76%;top:12%;padding:10px}.hero-paper{padding:11px 8px}.hero-paper-mini{font-size:6px}.hero-paper-title{font-size:15px;margin-top:17px}.hero-paper-rule{margin:10px 0 13px}.hero-paper-line{margin-top:7px}.orbit-one{width:75px;height:75px;left:6%;bottom:11px}.orbit-two{right:5%;width:52px;height:52px}.hero-deco{bottom:0}.welcome .eyebrow{font-size:10px;letter-spacing:.14em;margin-bottom:16px}.welcome h1{font-size:clamp(46px,11vw,62px);margin-bottom:17px}.lead{font-size:14px;line-height:1.7}.welcome-actions{margin-top:24px;gap:9px}.welcome-actions .btn{flex:1;min-width:132px;padding:14px 13px;font-size:12px}.sample-link{margin-top:2px}.trust-row{margin-top:25px}.footer{padding:18px;font-size:10px;gap:12px;flex-wrap:wrap}.footer>:last-child{font-size:9px}.studio{padding:28px 12px 45px}.studio-head{display:block;padding:0 7px}.studio-head h1{font-size:36px}.studio-head p{font-size:12px}.studio-head-actions{margin-top:17px;display:grid;grid-template-columns:1fr 1fr;gap:8px}.studio-head-actions .btn{padding:12px 9px;font-size:12px}.workflow{padding:0 7px;margin:23px 0 17px;gap:8px}.workflow-step{font-size:9px;gap:5px}.workflow-step>span{width:19px;height:19px}.workflow-connector{width:19px}.studio-grid{grid-template-columns:1fr;gap:12px}.panel-heading{height:61px;padding:0 15px}.source-viewport,.result-viewport{min-height:275px;padding:13px}.source-stage,.source-stage>img,.scan-frame,.scan-frame canvas{max-height:360px}.settings-panel{grid-column:auto}.settings-header{padding:15px}.settings-body{padding:19px}.mode-grid{grid-template-columns:repeat(4,1fr)}.mode-button{padding:8px 4px;font-size:10px}.mode-sample{width:42px;height:33px}.settings-divider{margin:17px 0}.range-field{width:100%;margin-right:0;margin-top:19px}.range-field input{margin:13px 0 6px}.range-field small{font-size:10px}.export-area{padding:17px 19px}.page-strip{margin-top:12px;padding:17px 13px}.page-card{min-width:144px;max-width:144px}.page-strip h2{font-size:17px}.studio-footer-note{line-height:1.5;padding:0 11px}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Clearframe v0.2 — unobstructed touch editing, larger photo, zoom and top actions */
.studio-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) 292px}
.source-heading{padding-right:12px}
.source-head-actions{display:flex!important;align-items:center;gap:5px!important}
.source-action{display:inline-flex;align-items:center;justify-content:center;gap:5px;border:1px solid #dfeae3;border-radius:9px;background:#f8fbf9;color:#2f6950;min-height:37px;padding:7px 10px;font-size:11px;font-weight:760;cursor:pointer;white-space:nowrap}
.source-action svg{width:16px;height:16px}
.source-action:hover,.source-action:focus-visible{background:#e8f5ed;border-color:#8dcbae}
.source-action.danger{color:#a64d49}
.source-action.danger:hover,.source-action.danger:focus-visible{background:#fff1ef;border-color:#e6b1ab}
.source-viewport{height:clamp(470px,59dvh,720px);min-height:470px;padding:8px;touch-action:none;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;overscroll-behavior:contain;cursor:default}
.source-viewport.can-pan{cursor:grab}
.source-viewport.can-pan:active{cursor:grabbing}
.source-stage,.source-stage>img{max-height:none!important;max-width:none!important;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none}
.source-stage{flex:none;transform-origin:50% 50%;will-change:transform;touch-action:none}
.source-stage #corner-handles{touch-action:none}
.source-stage #corner-handles .corner-handle{width:44px;height:44px;padding:0;border:0;background:transparent;box-shadow:none;display:grid;place-items:center;transform:translate(-50%,-50%) scale(var(--handle-scale,1));transform-origin:center;transition:none;-webkit-appearance:none;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;color:#12543e}
.source-stage #corner-handles .corner-handle:active,.source-stage #corner-handles .corner-handle.dragging{touch-action:none;background:transparent;box-shadow:none;cursor:grabbing;color:#063326;z-index:2}
.source-stage #corner-handles .corner-handle:focus-visible{outline:2px solid #17684a;outline-offset:0}
.corner-handle .corner-marker{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;pointer-events:none;overflow:visible}
.corner-marker .marker-halo{stroke:white;stroke-width:3.5}
.loupe{width:122px;height:122px;position:absolute;z-index:25;pointer-events:none;border-width:4px;box-sizing:border-box;transform:none;box-shadow:0 9px 35px #041e1480;background-color:#fcfffc;background-origin:border-box}
.loupe-cross{width:16px;height:16px;font-size:0}
.loupe-cross::before,.loupe-cross::after{content:"";position:absolute;background:#12543e;box-shadow:0 0 0 1px white;top:50%;left:50%;transform:translate(-50%,-50%)}
.loupe-cross::before{width:16px;height:1px}
.loupe-cross::after{width:1px;height:16px}
.zoom-toolbar{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);z-index:24;display:flex;align-items:center;gap:2px;padding:5px;border:1px solid #cbdace;border-radius:13px;background:#ffffffec;box-shadow:0 5px 25px #082b1929;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);touch-action:manipulation;white-space:nowrap}
.zoom-toolbar button{background:transparent;color:#235b44;border:0;border-radius:8px;min-width:35px;height:36px;padding:4px 7px;display:grid;place-items:center;font-size:11px;font-weight:780;cursor:pointer;touch-action:manipulation}
.zoom-toolbar button:hover:not(:disabled),.zoom-toolbar button:focus-visible{background:#dbefe2}
.zoom-toolbar button:disabled{opacity:.35;cursor:default}
.zoom-toolbar svg{width:17px;height:17px}
.zoom-toolbar output{width:52px;text-align:center;color:#2a6248;font-size:12px;font-weight:820;font-variant-numeric:tabular-nums}
#zoom-fit{border-left:1px solid #dfe8e0;border-radius:0;padding-left:9px}
#expand-editor{border-left:1px solid #dfe8e0;border-radius:0 8px 8px 0;margin-left:3px;padding-left:8px}
.source-panel.expanded{position:fixed!important;z-index:90;inset:0!important;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);height:100dvh;max-height:100dvh;border-radius:0;margin:0!important;box-shadow:none;background:white}
.source-panel.expanded .source-viewport{height:auto!important;min-height:0!important;flex:1}
.source-panel.expanded .panel-heading{flex-shrink:0}
.source-panel.expanded .panel-tools{flex-shrink:0}
.editor-expanded{overflow:hidden!important;touch-action:none}
@media (max-width:1300px){.studio-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}}
@media (max-width:690px){
 .studio{padding:22px 12px 42px}
 .studio-grid{grid-template-columns:1fr}
 .studio-head{padding:0 2px}
 .studio-head h1{font-size:30px}
 .studio-head p{font-size:11px}
 .workflow{margin:16px 0 13px}
 .source-panel{margin-left:-12px;margin-right:-12px;border-radius:0}
 .source-heading{height:60px;padding:0 12px}
 .source-head-actions{gap:5px!important}
 .source-action{padding:7px 9px;font-size:11px}
 .source-viewport{height:clamp(450px,63dvh,730px);min-height:450px;padding:4px}
 .source-stage,.source-stage>img{max-height:none!important;max-width:none!important}
 .panel-tools{padding:11px 9px;gap:3px;flex-wrap:wrap}
 .tool-button{font-size:11px;padding:6px 5px}
 .detect-hint{max-width:120px;font-size:9px}
 .loupe{width:116px;height:116px}
 .zoom-toolbar{bottom:10px}
 .zoom-toolbar button{height:38px;min-width:37px}
 .source-panel.expanded{margin:0;inset:0}
}

/* Dialogs must float over the expanded editor and its touch canvas. */
.modal-shell{z-index:120}
.busy-overlay{z-index:130}
.toast{z-index:140}

/* A normal image preview supports the phone's long-press Save Image menu. */
.image-save-dialog{width:min(480px,calc(100vw - 24px));max-height:calc(100dvh - 32px);margin:auto;padding:20px;border:1px solid #dfe8e2;border-radius:18px;background:#fff;color:var(--dark);box-shadow:0 16px 60px #00181055;overflow:auto;overscroll-behavior:contain}
.image-save-dialog::backdrop{background:#001810bd;backdrop-filter:blur(5px)}
.image-save-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:8px}
.image-save-heading h2{font-size:21px;letter-spacing:-.03em}
.image-save-dialog p{font-size:12px;line-height:1.6;color:#526b5e}
#save-image-meta{font-size:11px;color:#718678;margin-bottom:12px}
.image-save-preview{display:block;max-width:100%;width:auto;height:auto;max-height:42dvh;margin:0 auto 14px;object-fit:contain;border:1px solid #e2e8e3;-webkit-touch-callout:default;user-select:auto;-webkit-user-select:auto;touch-action:auto}
.image-save-actions{display:grid;gap:9px;margin-top:16px}
.image-save-actions .btn{min-height:46px;white-space:normal}
.image-save-actions [hidden]{display:none!important}