:root{--ink:#243e32;--muted:#666b61;--line:#d5d7ca;--paper:#fffef9;--canvas:#f3f1e9;--accent:#234b3d;--soft:#e9eee2;--clay:#8b4f36}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{background:var(--canvas);color:var(--ink);-webkit-font-smoothing:antialiased;margin:0;font-family:Segoe UI,Arial,sans-serif;font-size:16px;line-height:1.5}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.5}a{color:inherit;text-decoration:none}a:hover{text-underline-offset:4px;text-decoration:underline}button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline-offset:4px;outline:3px solid #a45a2b}svg{flex-shrink:0}.site-header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:20px;max-width:1160px;min-height:104px;margin:auto;padding:18px 32px;display:flex}.brand{letter-spacing:-.8px;align-items:center;gap:12px;font-family:Georgia,Times New Roman,serif;font-size:26px;line-height:1.2;display:flex}.brand:hover{text-decoration:none}.brand-symbol{width:42px;height:42px}.brand-caption{letter-spacing:2px;margin-top:6px;font-family:Segoe UI,Arial,sans-serif;font-size:10px;font-weight:600;display:block}nav{gap:28px;font-size:14px;display:flex}nav a{padding:12px 0}main{max-width:1160px;margin:auto;padding:0 32px}.eyebrow{letter-spacing:1.7px;color:var(--muted);font-size:11px;font-weight:600}#workspace{padding-top:32px}.intro{justify-content:space-between;align-items:center;gap:24px;margin-bottom:28px;display:flex}.intro h1{letter-spacing:-1.8px;margin:8px 0 10px;font-family:Georgia,Times New Roman,serif;font-size:clamp(34px,4vw,48px);font-weight:400;line-height:1.15}.intro h1>span{color:var(--clay)}.intro p{color:var(--muted);margin:0;font-size:15px}.local-badge{color:var(--accent);white-space:nowrap;align-items:center;gap:12px;font-size:13px;display:flex}.local-badge small{color:var(--muted);margin-top:2px;font-size:11px;display:block}.workbench{background:var(--paper);border:1px solid #bfc5b8;border-radius:4px;grid-template-columns:minmax(0,1.18fr) minmax(0,1fr);display:grid;box-shadow:4px 4px #e3e3d8}.source-panel,.settings-panel{min-width:0}.settings-panel{border-left:1px solid var(--line)}.panel-heading{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:12px;min-height:58px;padding:7px 22px;display:flex}.panel-heading h2,.result-heading h2{align-items:center;gap:12px;margin:0;font-size:14px;font-weight:600;display:flex}.section-number{color:var(--muted);border:1px solid #c4c9ba;padding:2px 5px;font-family:ui-monospace,Consolas,monospace;font-size:11px;font-weight:400;line-height:1.5}.small-label{color:var(--muted);letter-spacing:1.2px;font-size:9px}.text-button{color:var(--muted);background:0 0;border:0;min-height:44px;padding:10px 5px;font-size:13px}.text-button:hover{text-underline-offset:4px;text-decoration:underline}.drop-zone{flex-direction:column;justify-content:center;align-items:center;min-height:387px;padding:25px;transition:background .15s;display:flex}.drop-zone.is-dragging{outline:2px dashed var(--accent);outline-offset:-8px;background:#e2ebdc}.drop-message{text-align:center;padding:5px 0 18px}.image-symbol{width:82px;height:82px;color:var(--accent);background:var(--soft);border:1px solid #d7dfcf;justify-content:center;align-items:center;margin:0 auto 20px;display:flex;transform:rotate(-5deg)}.image-symbol svg{transform:rotate(5deg)}.drop-message h3{letter-spacing:-.5px;margin:0 0 6px;font-family:Georgia,Times New Roman,serif;font-size:23px;font-weight:400}.drop-message p{color:var(--muted);margin:0;font-size:13px}.choose-button{color:var(--accent);background:var(--paper);cursor:pointer;border:1px solid #b4c2aa;border-radius:3px;justify-content:center;align-items:center;gap:25px;min-height:46px;padding:11px 17px;font-size:14px;display:inline-flex;position:relative}.choose-button:hover{background:var(--soft)}.choose-button:focus-within{outline-offset:4px;outline:3px solid #a45a2b}.choose-button input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.file-hint{color:var(--muted);text-align:center;margin:12px 0 0;font-size:11px}.preview-mat{border:1px solid var(--line);background:repeating-conic-gradient(#ebece5 0% 25%,#f8f8f2 0% 50%) 50%/16px 16px;justify-content:center;align-items:center;width:100%;height:211px;display:flex}.preview-mat img{object-fit:contain;max-width:100%;max-height:100%;display:block}.drop-zone.has-image{justify-content:flex-start;padding:20px 24px}.source-info{justify-content:space-between;align-items:baseline;gap:18px;width:100%;margin-top:12px;font-size:12px;display:flex}.source-info span{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.source-info strong{white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600}.dimensions{color:var(--muted);align-self:flex-start;margin:4px 0 14px;font-size:11px}.has-image .choose-button{min-height:40px;padding:8px 12px;font-size:12px}.settings-body{padding:24px 26px 15px}.field-label{margin-bottom:9px;font-size:14px;font-weight:600;display:block}.size-field{background:#fff;border:1px solid #b8c1af;border-radius:3px;align-items:center;min-width:0;display:flex}.size-field:focus-within{outline:2px solid var(--accent);outline-offset:2px}.size-field input{color:var(--ink);font-variant-numeric:tabular-nums;background:0 0;border:0;width:100%;min-width:0;padding:7px 15px 9px;font-family:Georgia,Times New Roman,serif;font-size:36px;line-height:1.2}.size-field input:focus-visible{outline:none}.size-field>span{color:var(--muted);padding-right:18px;font-size:12px}.presets{gap:8px;margin:12px 0 0;display:flex}.presets button{border:1px solid var(--line);min-width:0;min-height:40px;color:var(--muted);white-space:nowrap;background:0 0;border-radius:3px;flex:1;padding:7px 5px;font-size:12px}.presets button[aria-pressed=true]{background:var(--soft);color:var(--accent);box-shadow:inset 0 -2px var(--accent);border-color:#91a384;font-weight:600}.presets button:hover{border-color:var(--accent);color:var(--accent)}.field-hint,.field-error{color:var(--muted);margin:9px 0 19px;font-size:11px;line-height:1.6}.field-error{color:#984024}.output-note{border-top:1px dashed var(--line);align-items:flex-start;gap:12px;margin-bottom:20px;padding-top:16px;display:flex}.format-tag{color:var(--clay);letter-spacing:.5px;background:#f7f0e6;border:1px solid #decebe;flex-shrink:0;margin-top:2px;padding:3px 5px;font-family:ui-monospace,Consolas,monospace;font-size:9px}.output-note p{color:var(--muted);margin:0;font-size:12px;line-height:1.7}.primary-button,.download-button{border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:3px;justify-content:space-between;align-items:center;gap:20px;width:100%;min-height:48px;padding:12px 16px;font-size:14px;font-weight:600;display:flex}.primary-button:hover:not(:disabled),.download-button:hover{background:#153a2c;text-decoration:none}.under-button{text-align:center;color:var(--muted);margin:10px 0 0;font-size:11px}.cancel-button{color:var(--accent);text-underline-offset:4px;background:0 0;border:0;min-height:40px;margin:3px auto -7px;padding:7px 15px;font-size:13px;text-decoration:underline;display:block}.spinner{border:2px solid #fff6;border-top-color:#fff;border-radius:50%;width:16px;height:16px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.error-message{color:#803e25;background:#fff0e4;border:1px solid #ddbaa1;border-radius:3px;padding:12px 16px;font-size:14px}.result-section{margin-top:32px}.result-section:focus{outline:none}.result-section:focus-visible{outline:2px solid var(--accent);outline-offset:6px}.result-heading{border-bottom:1px solid #bbc3b3;justify-content:space-between;align-items:center;gap:16px;padding-bottom:15px;display:flex}.output-receipt{background:var(--paper);border-bottom:1px solid #bbc3b3;flex-wrap:wrap;align-items:baseline;gap:9px 14px;padding:18px 22px;font-family:Georgia,Times New Roman,serif;font-size:25px;line-height:1.3;display:flex}.output-receipt strong{font-variant-numeric:tabular-nums;font-weight:400}.receipt-limit{color:var(--muted);margin-left:auto;font-family:Segoe UI,Arial,sans-serif;font-size:12px}.fit-badge{color:var(--accent);white-space:nowrap;align-items:center;gap:6px;font-size:12px;display:flex}.result-placeholder{color:var(--muted);border-bottom:1px solid var(--line);background:#fafaf4;align-items:center;gap:15px;padding:20px 22px;display:flex}.result-placeholder p{margin:0;font-size:13px}.result-content{background:var(--soft);border-bottom:1px solid #bbc3b3;grid-template-columns:minmax(0,1.18fr) minmax(0,1fr);display:grid}.output-preview{justify-content:center;align-items:center;min-width:0;min-height:300px;padding:24px;display:flex}.output-preview img{object-fit:contain;background:#fff;max-width:100%;max-height:360px;display:block;box-shadow:0 0 0 1px #243e3215}.result-details{border-left:1px solid #ccd5c2;padding:25px 26px}.result-size{letter-spacing:-1.5px;overflow-wrap:anywhere;font-family:Georgia,Times New Roman,serif;font-size:42px;line-height:1.15}.exact-bytes{color:var(--muted);margin:5px 0 20px;font-size:11px}.result-facts{margin:0;font-size:12px}.result-facts>div{border-top:1px solid #d2d9c9;justify-content:space-between;align-items:baseline;gap:16px;padding:8px 0;display:flex}.result-facts dt{color:var(--muted)}.result-facts dd{text-align:right;margin:0;font-weight:600}.kept-notice,.resize-notice{margin:16px 0;font-size:12px;line-height:1.7}.kept-notice{color:#4f5d4f}.resize-notice{color:#7b4729;background:#f7eddd;border-left:2px solid #a77950;padding:11px 13px}.about-section{border-top:1px solid var(--line);grid-template-columns:230px minmax(0,1fr);gap:32px;margin-top:46px;padding-top:30px;display:grid}.about-section h2{margin:10px 0 0;font-family:Georgia,Times New Roman,serif;font-size:28px;font-weight:400;line-height:1.25}.how-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;display:grid}.step-number{color:var(--clay);font-family:ui-monospace,Consolas,monospace;font-size:12px}.how-grid h3{margin:8px 0;font-size:14px;font-weight:600}.how-grid p{color:var(--muted);margin:0;font-size:13px;line-height:1.8}.privacy-note{border-left:3px solid var(--accent);background:var(--soft);align-items:flex-start;gap:18px;margin:32px 0 18px;padding:22px 24px;display:flex}.privacy-note h2{margin:0 0 5px;font-size:14px;font-weight:600}.privacy-note p{color:#4f5d4f;margin:0;font-size:13px;line-height:1.8}.form-note{color:var(--muted);margin:0 0 32px;font-size:11px;line-height:1.7}.site-footer{border-top:1px solid var(--line);max-width:1160px;color:var(--muted);align-items:center;gap:25px;margin:auto;padding:24px 32px 32px;font-size:12px;display:flex}.site-footer>span:first-child{color:var(--ink);font-family:Georgia,Times New Roman,serif;font-size:18px}.site-footer a{margin-left:auto;padding:10px 0}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.skip-link{z-index:10;background:var(--ink);color:#fff;border-radius:4px;padding:12px 18px;position:fixed;top:-80px;left:16px}.skip-link:focus{top:12px}.workspace-modes{grid-template-columns:1fr 1fr;gap:12px;margin:0 0 20px;display:grid}.workspace-modes button{color:var(--ink);text-align:left;background:0 0;border:1px solid #bfc5b8;border-radius:4px;min-height:76px;padding:14px 18px}.workspace-modes button[aria-pressed=true]{background:var(--soft);border-color:var(--accent);box-shadow:inset 0 -3px var(--accent)}.workspace-modes strong,.workspace-modes span{display:block}.workspace-modes strong{font-size:15px}.workspace-modes span{color:var(--muted);margin-top:3px;font-size:12px}.square-settings{margin-bottom:24px}.fit-options{flex-direction:column;gap:7px;display:flex}.fit-options button{text-align:left;border:1px solid var(--line);color:var(--ink);background:0 0;border-radius:3px;padding:10px 12px}.fit-options button[aria-pressed=true]{border-color:var(--accent);background:var(--soft);box-shadow:inset 3px 0 var(--accent)}.fit-options strong,.fit-options span{display:block}.fit-options strong{font-size:13px}.fit-options span{color:var(--muted);margin-top:2px;font-size:11px}.check-label{cursor:pointer;align-items:center;gap:9px;min-height:44px;font-size:12px;display:flex}.check-label input{width:18px;height:18px;accent-color:var(--accent);flex-shrink:0}.check-label+.field-hint{margin-top:0}.pixel-field{background:#fff;border:1px solid #b8c1af;border-radius:3px;align-items:center;gap:12px;padding:4px 12px;display:flex}.pixel-field input{width:100%;min-width:0;color:var(--ink);background:0 0;border:0;padding:5px 0;font-size:24px}.pixel-field span{white-space:nowrap;color:var(--muted);font-size:12px}.square-editor{width:100%}.square-frame{aspect-ratio:1;border:1px solid var(--line);background:#fff;width:100%;max-width:320px;margin:0 auto;position:relative;overflow:hidden}.square-frame canvas{width:100%;height:100%;display:block}.square-frame.can-move{cursor:grab;touch-action:none}.square-frame.moving{cursor:grabbing}.square-frame.circle-mask{clip-path:circle(50%)}.square-frame.circle-mask:focus-visible{outline-offset:-5px}.framing-controls{border-top:1px solid var(--line);padding-top:12px}.framing-controls label{color:var(--muted);margin-bottom:10px;font-size:12px;display:block}.framing-controls label span{float:right;font-variant-numeric:tabular-nums}.framing-controls input{width:100%;height:30px;accent-color:var(--accent);display:block}.framing-controls .text-button{margin:0 auto;display:block}.requirements-check{color:var(--accent);margin:16px 0;font-size:12px}.requirements-check p{align-items:center;gap:7px;margin:7px 0;display:flex}.result-image{justify-content:center;min-width:0;max-width:100%;display:flex}.result-image.circle-result img{clip-path:circle(50%)}.quality-inspector{border:1px solid var(--line);background:var(--paper);margin-top:16px;padding:16px 20px}.framing-guide{border:1px solid var(--line);background:var(--paper);margin-top:18px;padding:12px 20px}.framing-guide summary{cursor:pointer;padding:8px 0;font-size:14px;font-weight:600}.framing-guide-intro,.framing-guide-note{color:var(--muted);font-size:12px;line-height:1.7}.framing-guide-intro{max-width:650px;margin:10px 0 14px}.framing-examples{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;display:grid}.framing-examples figure{grid-template-columns:100px minmax(0,1fr);align-items:center;gap:12px;min-width:0;margin:0;display:grid}.framing-examples svg{width:100px;height:100px;display:block}.framing-examples figcaption{font-size:11px;line-height:1.65}.framing-examples strong,.framing-examples span{display:block}.framing-examples strong{margin-bottom:3px;font-size:12px}.framing-examples span{color:var(--muted)}.framing-guide-note{margin:14px 0 4px}.quality-inspector summary{cursor:pointer;padding:6px 0;font-size:14px}.inspection-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;margin-top:8px;display:grid}.inspection-grid figure{min-width:0;margin:0}.inspection-grid figcaption{color:var(--muted);margin-bottom:8px;font-size:12px}.inspection-grid figure>div{background:var(--canvas);border:1px solid var(--line);max-height:420px;overflow:auto}.inspection-grid img{object-fit:contain;max-width:100%;max-height:360px;margin:auto;display:block}.inspection-grid.actual-size img{max-width:none;max-height:none;margin:0}.guide-copy{max-width:780px;color:var(--muted);margin:32px 0;font-size:14px;line-height:1.85}.guide-copy h2,.faq-list h2,.related-tools h2{color:var(--ink);font-family:Georgia,Times New Roman,serif;font-size:26px;font-weight:400;line-height:1.3}.guide-copy h3{color:var(--ink);font-size:16px}.guide-copy a,.faq-list a,.related-tools a{text-underline-offset:3px;text-decoration:underline}.faq-list{border-top:1px solid var(--line);margin:32px 0;padding-top:12px}.faq-list details{border-bottom:1px solid var(--line);padding:15px 0}.faq-list summary{cursor:pointer;font-size:14px;font-weight:600}.faq-list p{max-width:780px;color:var(--muted);font-size:13px;line-height:1.8}.related-tools{margin:28px 0;font-size:13px}.related-tools ul{flex-wrap:wrap;gap:12px 28px;padding:0;list-style:none;display:flex}.related-tools{display:block}.about-section>.guide-copy,.about-section>.faq-list{margin:0}.about-section>.faq-list{border-top:0;padding-top:0}.faq-list .guide-copy{margin:12px 0 0}@media (max-width:900px){.framing-examples figure{text-align:center;display:block}.framing-examples svg{margin:0 auto 8px}.local-badge{display:none}.about-section{grid-template-columns:1fr;gap:24px}.small-label{display:none}.settings-body{padding:22px 20px 15px}.drop-zone{padding:20px}.drop-message h3{max-width:220px;margin-left:auto;margin-right:auto}}@media (max-width:650px){.output-receipt{gap:6px 10px;padding:16px;font-size:22px}.receipt-limit{width:100%;margin-top:3px;margin-left:0}.framing-guide{padding:10px 14px}.framing-examples{grid-template-columns:1fr;gap:12px}.framing-examples figure{text-align:left;grid-template-columns:100px minmax(0,1fr);display:grid}.framing-examples svg{margin:0}.workspace-modes{gap:8px}.workspace-modes button{padding:11px 12px}.workspace-modes strong{font-size:13px}.workspace-modes span{font-size:11px}.inspection-grid{grid-template-columns:minmax(0,1fr)}.quality-inspector{padding:12px}.pixel-field span{font-size:11px}.site-header{min-height:88px;padding:16px 20px}main{padding:0 20px}.brand{gap:7px;font-size:23px}.brand-symbol{width:34px;height:34px}nav{gap:16px;font-size:13px}.site-header nav a:first-child{display:none}#workspace{padding-top:24px}.intro{margin-bottom:24px}.intro h1{letter-spacing:-1.4px;font-size:36px}.intro p{max-width:290px;font-size:14px}.eyebrow{letter-spacing:1.4px;font-size:10px}.workbench,.result-content{grid-template-columns:1fr}.settings-panel{border-top:1px solid #bbc3b3;border-left:0}.panel-heading{min-height:54px;padding:7px 16px}.drop-zone{min-height:280px;padding:22px 16px}.drop-zone.has-image{padding:18px 16px}.drop-message{padding:0 0 16px}.drop-message h3{max-width:none;font-size:21px}.image-symbol{width:62px;height:62px;margin-bottom:17px}.image-symbol svg{width:34px;height:34px}.file-hint{font-size:10px}.small-label{font-size:8px;display:block}.settings-body{padding:20px 16px 16px}.presets button{min-height:44px}.output-note{margin-bottom:18px}.result-heading{flex-direction:column;align-items:flex-start;gap:10px}.result-placeholder{align-items:flex-start;padding:18px 16px}.result-placeholder p{font-size:12px}.output-preview{min-height:200px;padding:20px}.output-preview img{max-height:280px}.result-details{border-top:1px solid #ccd5c2;border-left:0;padding:22px 20px}.result-size{font-size:36px}.how-grid{grid-template-columns:1fr;gap:20px}.how-grid h3{margin-left:12px;display:inline}.how-grid p{margin-top:6px}.about-section{margin-top:34px}.about-section h2 br{display:none}.privacy-note{gap:12px;padding:18px}.site-footer{flex-wrap:wrap;gap:10px 20px;padding:18px 20px 24px}.site-footer>span:nth-child(2){display:none}}@media (max-width:370px){.intro h1{font-size:32px}.brand{font-size:21px}.site-footer a{font-size:11px}.small-label{display:none}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition:none!important;animation:none!important}}
.analytics-preference-footer{text-align:right;max-width:1160px;margin:0 auto;padding:0 32px 24px}.analytics-preference-footer button{color:var(--muted);text-underline-offset:3px;background:0 0;border:0;padding:12px 0;font-size:12px;text-decoration:underline}.analytics-choice{z-index:20;max-width:1000px;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:4px;align-items:center;gap:24px;margin:auto;padding:20px 24px;display:flex;position:fixed;inset:auto 18px 18px;box-shadow:0 4px 28px #243e3220}.analytics-choice h2{margin:0 0 6px;font-size:16px}.analytics-choice p{max-width:700px;color:var(--muted);margin:0;font-size:13px;line-height:1.6}.analytics-choice p+p{margin-top:8px}.analytics-choice a{text-decoration:underline}.analytics-choice-actions{flex-wrap:wrap;gap:8px;min-width:240px;display:flex}.analytics-choice-actions button{border:1px solid var(--accent);background:var(--paper);min-height:44px;color:var(--accent);white-space:nowrap;border-radius:3px;flex:1;padding:9px 13px;font-size:13px}.analytics-choice-actions button:hover{background:var(--soft)}@media (max-width:650px){.analytics-preference-footer{padding:0 20px 16px}.analytics-choice{flex-direction:column;align-items:stretch;gap:14px;max-height:70vh;padding:16px;inset:auto 10px 10px;overflow:auto}.analytics-choice-actions{min-width:0}}