/* Shared editorial presentation for the existing photography tools. */
.shell{max-width:1440px;padding:0 40px}
.shell>header{display:grid;grid-template-columns:290px minmax(0,1fr) 68px;align-items:stretch;gap:0;padding:0;min-height:106px;border-bottom:1px solid var(--ink)}
.shell>header .brand{padding:11px 22px 11px 0;border-right:1px solid var(--ink);font-size:22px;gap:14px;letter-spacing:-.8px}
.shell>header .brand-logo{width:83px;height:83px}
.shell>header nav{display:flex;flex-wrap:nowrap;width:auto;order:initial;gap:0;padding:0;min-width:0}
.shell>header nav a{display:flex;flex:1;align-items:center;justify-content:center;gap:8px;padding:16px 12px;border-right:1px solid var(--rule);border-bottom:0;color:var(--muted);font-size:12px;line-height:1.3;font-weight:700;text-decoration:none;white-space:nowrap;position:relative}
.shell>header nav a:hover{background:var(--surface);color:var(--ink)}
.shell>header nav a[aria-current]{background:var(--ink);color:var(--paper)}
.tool-number{font-size:11px;font-weight:400;font-variant-numeric:tabular-nums;color:var(--muted)}
.shell>header nav a[aria-current] .tool-number{color:var(--accent);font-weight:700}
.shell>header nav a[aria-current]::after{content:'';position:absolute;bottom:14px;left:50%;width:18px;height:2px;background:var(--accent);transform:translateX(-50%)}
.shell>header .theme-toggle{align-self:center;justify-self:end;margin:0;width:44px;height:44px}
.privacy-strip{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:38px;border-bottom:1px solid var(--rule);padding:9px 0;color:var(--muted);font-size:11px;line-height:1.4}
.privacy-promise{display:flex;align-items:center;gap:8px}.privacy-promise svg{flex-shrink:0;color:var(--ink)}.privacy-method{letter-spacing:.3px}
.intro{padding:34px 0 28px;gap:30px;align-items:end}.intro h1{font-size:clamp(42px,4.8vw,64px);letter-spacing:-2.8px;line-height:1.05;margin-top:12px}.intro p{margin:0;font-size:16px;line-height:1.5;max-width:420px}.eyebrow{font-size:11px;letter-spacing:1.1px}
.section-title{border-bottom:1px solid var(--rule);padding-bottom:12px;margin-bottom:22px}.section-title h2{font-size:12px;letter-spacing:1px}
.camera{font-size:28px;letter-spacing:-.8px;line-height:1.2}.lens{line-height:1.5}
.settings{padding:22px 0 24px;border-top:1px solid var(--rule);border-bottom:3px solid var(--ink);margin:22px 0 12px;gap:14px}
.settings dt{font-size:11px;letter-spacing:.5px}.settings dd{font-size:28px;letter-spacing:-.8px;font-variant-numeric:tabular-nums;line-height:1.15;overflow-wrap:anywhere}
.details div{padding:12px 0;font-size:13px}.details dd{font-weight:600;font-variant-numeric:tabular-nums}
.privacy-box{margin-top:18px}.message{font-size:13px}.note{padding:24px 0 28px}.note p{font-size:12px}
.totals{border-top:3px solid var(--ink);padding-top:18px;gap:20px}.totals strong{font-size:44px;font-variant-numeric:tabular-nums;line-height:1.1}.totals>div:first-child strong{font-size:58px;letter-spacing:-2px}.totals span{font-size:11px;line-height:1.5}
.chart h2{font-size:20px}.chart-label{font-size:13px}.chart .coverage,.chart-note{line-height:1.5}
.crop-info{border-top:3px solid var(--ink);padding-top:20px}.crop-info h2{font-size:28px;line-height:1.15}.crop-info strong{font-size:42px;font-variant-numeric:tabular-nums;line-height:1.1}.crop-info .muted{font-size:12px;margin-top:7px}
.size-name{font-size:21px}.size-ppi{font-size:20px;font-variant-numeric:tabular-nums}.size-choice{padding:17px 10px}.size-choice.selected{background:var(--selected)}
.output-summary{border-top:3px solid var(--ink)}.output-summary strong{font-size:36px;font-variant-numeric:tabular-nums;line-height:1.15}.quality-heading output{font-size:28px;font-variant-numeric:tabular-nums}.export-result strong{font-size:21px;line-height:1.3}
footer{padding:22px 0 28px;border-top:1px solid var(--ink);font-size:11px;line-height:1.5}
@media(max-width:1100px){
  .shell>header{grid-template-columns:minmax(0,1fr) 60px;min-height:0}
  .shell>header .brand{border-right:0;padding:10px 0}
  .shell>header .theme-toggle{grid-column:2;grid-row:1}
  .shell>header nav{grid-column:1/-1;grid-row:2;border-top:1px solid var(--rule);overflow-x:auto;overscroll-behavior-x:contain}
  .shell>header nav a{min-height:54px;padding:16px 18px;flex:1 0 auto}
  .shell>header nav a:first-child{border-left:1px solid var(--rule)}
  .shell>header nav a[aria-current]::after{bottom:6px}
}
@media(max-width:760px){
  .shell{padding:0 20px}.shell>header .brand{font-size:21px;gap:10px}.shell>header .brand-logo{width:64px;height:64px}
  .shell>header nav a{font-size:12px;min-height:50px;padding:14px 16px;gap:7px}.tool-number{font-size:11px}
  .privacy-strip{font-size:11px;min-height:36px;padding:8px 0}.privacy-method{display:none}
  .intro{grid-template-columns:1fr;padding:26px 0 24px;gap:14px}.intro h1{font-size:clamp(38px,8vw,52px);letter-spacing:-1.9px}.intro p{font-size:15px}
  .settings{gap:9px;padding:18px 0 21px}.settings dd{font-size:23px;letter-spacing:-.7px}.settings dt{font-size:10px}
  .camera{font-size:25px}.totals strong{font-size:36px}.totals>div:first-child strong{font-size:48px}
  .crop-info h2{font-size:25px}.crop-info strong{font-size:34px}.output-summary strong{font-size:28px}
  .section-title span{font-size:10px}.filebar{flex-wrap:wrap}.filebar .filename{flex:1 1 100%}
}
@media(max-width:380px){.shell{padding:0 16px}.shell>header .brand{font-size:19px;gap:8px}.settings dd{font-size:21px}.output-summary strong{font-size:25px}}

.next-tools{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;border-bottom:1px solid var(--rule);padding:18px 0}.next-tools a{font-size:13px;font-weight:700;text-decoration:none}.next-tools a:hover{color:var(--accent)}.next-tools small{flex-basis:100%;font-size:11px;color:var(--muted);line-height:1.5}
@media(min-width:761px) and (max-width:1300px){.shell>header{grid-template-columns:minmax(0,1fr) 60px}.shell>header .brand{border-right:0;padding:10px 0}.shell>header .theme-toggle{grid-column:2;grid-row:1}.shell>header nav{grid-column:1/-1;grid-row:2;border-top:1px solid var(--rule);overflow-x:auto}.shell>header nav a{min-height:54px;flex:1 0 auto}.shell>header nav a[aria-current]::after{bottom:6px}}
@media(max-width:760px){.shell>header nav{scrollbar-width:thin}.next-tools{gap:12px 18px}.next-tools>.eyebrow{flex-basis:100%}}

/* Give the product name equal presence beside the approved character. */
.shell>header .brand{font-size:28px;letter-spacing:-1px;line-height:1.1}
@media(min-width:1301px){.shell>header{grid-template-columns:350px minmax(0,1fr) 68px}}
@media(max-width:760px){.shell>header .brand{font-size:24px;letter-spacing:-.8px}}
@media(max-width:380px){.shell>header .brand{font-size:22px;gap:9px}.shell>header .brand-name{white-space:normal}}

/* Eight tools: keep navigation together in a scrollable row below the brand. */
.shell>header{grid-template-columns:minmax(0,1fr) 60px;min-height:0}.shell>header .brand{border-right:0;padding:10px 0}.shell>header .theme-toggle{grid-column:2;grid-row:1}.shell>header nav{grid-column:1/-1;grid-row:2;border-top:1px solid var(--rule);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}.shell>header nav a{min-height:54px;padding:16px 18px;flex:1 0 auto}.shell>header nav a:first-child{border-left:1px solid var(--rule)}.shell>header nav a[aria-current]::after{bottom:6px}footer{flex-wrap:wrap;align-items:center}footer>span{margin-right:auto}
@media(max-width:760px){.shell>header nav a{padding:14px 16px;min-height:50px}footer{gap:12px 22px}footer>span{flex-basis:100%}}

.about-comic{border-top:1px solid var(--ink);padding:28px 0 40px;max-width:1024px;margin:0 auto}.about-comic>a{display:block}.about-comic img{display:block;width:100%;height:auto;background:#fff}.about-comic>p{font-size:12px;margin:14px 0 24px}.about-comic details{font-size:14px;line-height:1.6;border-top:1px solid var(--rule);padding-top:16px}.about-comic summary{cursor:pointer;font-weight:700}

.comic-menu img{width:40px;height:40px;object-fit:contain}.shell>header nav a.comic-menu{flex:0 0 68px;padding:5px 12px}.export-collection{border-top:1px solid var(--rule);padding:12px 0 20px}#photo-selector{display:flex;gap:8px;overflow-x:auto;padding:5px 0}#photo-selector button{flex-shrink:0;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#photo-selector button[aria-pressed=true]{outline:2px solid var(--accent);outline-offset:2px}.metadata-cleanup{border-bottom:1px solid var(--rule);padding:28px 0;max-width:850px}.metadata-cleanup table{border-collapse:collapse;width:100%;margin-bottom:20px}.metadata-cleanup th,.metadata-cleanup td{padding:10px;text-align:left;border-bottom:1px solid var(--rule);font-size:13px}.metadata-cleanup .download-button{margin-top:16px}.metadata-cleanup>.muted{font-size:12px;line-height:1.6}

.processing-popup{width:min(440px,calc(100vw - 40px));border:1px solid var(--ink);padding:28px;background:var(--paper);color:var(--ink);box-shadow:0 20px 80px #0004}.processing-popup::backdrop{background:#0007}.processing-heading{display:flex;align-items:center;gap:14px}.processing-heading h2{font-size:23px;margin:0;letter-spacing:-.6px}.processing-popup progress{width:100%;accent-color:var(--accent);margin:12px 0 4px}.processing-popup p{font-size:13px;line-height:1.6}.processing-popup .processing-local{font-size:11px;color:var(--muted);border-top:1px solid var(--rule);padding-top:16px;margin-top:20px}.processing-count{font-variant-numeric:tabular-nums;color:var(--muted)}.processing-popup button{width:100%;margin-top:8px}.processing-spinner{width:20px;height:20px;border:2px solid var(--rule);border-top-color:var(--accent);border-radius:50%;animation:processing-spin .8s linear infinite}@keyframes processing-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.processing-spinner{animation:none;border-top-color:var(--ink)}}

.processing-heading{flex-direction:column;gap:12px;text-align:center}.processing-mascot{position:relative;display:block;width:100px;height:106px;padding-top:5px}.processing-mascot img{display:block;width:88px;height:88px;margin:0 auto;object-fit:contain;animation:inspector-float 2.8s ease-in-out infinite}.processing-mascot::after{content:'';position:absolute;bottom:0;left:30px;width:40px;height:5px;border-radius:50%;background:var(--ink);opacity:.12;animation:inspector-shadow 2.8s ease-in-out infinite}@keyframes inspector-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes inspector-shadow{0%,100%{transform:scaleX(1);opacity:.12}50%{transform:scaleX(.75);opacity:.07}}@media(prefers-reduced-motion:reduce){.processing-mascot img,.processing-mascot::after{animation:none}}

.shell>header .brand-logo{animation:inspector-float 2.8s ease-in-out infinite;will-change:transform}@media(prefers-reduced-motion:reduce){.shell>header .brand-logo{animation:none;will-change:auto}}

.site-mascot{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));z-index:30;display:flex;align-items:center;justify-content:center;text-decoration:none;border-radius:50%;background:var(--paper);padding:5px;box-shadow:0 4px 20px #0001}.site-mascot .processing-mascot{width:76px;height:90px}.site-mascot .processing-mascot img{width:70px;height:70px}.site-mascot .processing-mascot::after{left:23px;width:30px;bottom:5px}.site-mascot:hover{box-shadow:0 4px 20px #0002}body{padding-bottom:110px}body:has(.processing-popup[open]) .site-mascot{visibility:hidden}@media(max-width:760px){.site-mascot{right:10px;bottom:max(8px,env(safe-area-inset-bottom));padding:4px}.site-mascot .processing-mascot{width:58px;height:72px}.site-mascot .processing-mascot img{width:54px;height:54px}.site-mascot .processing-mascot::after{left:18px;width:23px;bottom:4px}body{padding-bottom:92px}}

.brand-logo,.processing-mascot img,.comic-menu img{filter:none}

/* Show every tool on phones without a sideways swipe. Desktop stays unchanged. */
@media(max-width:760px){
  .shell>header{grid-template-columns:minmax(0,1fr) 48px}
  .shell>header .brand{min-width:0;gap:10px;padding:14px 0;font-size:23px}
  .shell>header .brand-logo{width:54px;height:54px}
  .shell>header .brand-name{white-space:normal}
  .shell>header nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:0;overflow:visible;scrollbar-width:auto}
  .shell>header nav a,.shell>header nav a.comic-menu{min-width:0;min-height:48px;padding:10px 8px;gap:6px;font-size:12px;white-space:normal;text-align:center;border-left:0;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
  .shell>header nav a:first-child{border-left:0}
  .shell>header nav a:nth-child(2n){border-right:0}
  .shell>header nav a:nth-last-child(-n+2){border-bottom:0}
  .shell>header nav a[aria-current]::after{bottom:4px}
  .comic-menu img{width:32px;height:32px}
  .section-title{gap:10px;flex-wrap:wrap}
  .metadata-cleanup table{table-layout:fixed}
  .metadata-cleanup th,.metadata-cleanup td{overflow-wrap:anywhere;padding:10px 6px}
  .crop-info{flex-wrap:wrap;gap:16px}
  .print-controls label,.contact-controls>div,.contact-controls select{min-width:0}
  .tool-options input[type=range],#position{min-height:28px}
  .processing-popup{max-height:calc(100dvh - 32px);overflow-y:auto;padding:22px;width:min(440px,calc(100vw - 32px))}
  .processing-heading h2{overflow-wrap:anywhere}
}
@media(max-width:380px){
  .shell>header .brand{font-size:22px;gap:8px}
  .settings{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
}

/* Data-linked print, export, and exposure graphics. */
.exposure-icon{display:block;width:28px;height:28px;margin-bottom:14px;color:var(--ink)}
.scale-caption{font-size:11px;color:var(--muted);line-height:1.5;margin:0 0 16px}.size-choice{grid-template-columns:76px minmax(0,1fr) auto;column-gap:12px}.print-shape-box{grid-column:1;grid-row:1/3;display:flex;width:76px;height:70px;align-items:center;justify-content:center}.print-shape{display:block;border:1px solid var(--ink);background:var(--surface);min-width:4px;min-height:4px}.print-shape.low{border:2px solid var(--accent)}.size-choice .size-name,.size-choice .size-crop{grid-column:2}.size-choice .size-ppi,.size-choice .size-guide{grid-column:3}.retention-graphic{margin-top:18px}.retention-track{height:9px;background:var(--track)}.retention-track span{display:block;height:100%;background:var(--ink)}.retention-graphic p{font-size:11px;color:var(--muted);margin:8px 0}
.dimension-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;border-top:1px solid var(--rule);margin-top:24px;padding-top:20px}.dimension-flow>div{min-width:0}.dimension-flow>div:not(:last-child){border-right:1px solid var(--rule);padding-right:8px}.flow-shape-box{height:84px;display:flex;align-items:center}.flow-shape-box span{display:block;background:var(--surface);border:1px solid var(--ink);min-width:1px;min-height:1px}.dimension-flow>div:last-child .flow-shape-box span{border-color:var(--accent);border-width:2px}.dimension-flow strong{font-size:12px;line-height:1.5;display:block;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.dimension-flow small{font-size:10px;color:var(--muted)}.file-comparison{border-top:1px solid var(--rule);margin:20px 0;padding-top:14px;font-size:11px}.file-comparison>div{margin-bottom:12px}.comparison-track{height:8px;background:var(--track);margin-top:6px}.comparison-track span{display:block;height:100%;background:var(--ink)}.output-track span{background:var(--accent)}.file-comparison p{color:var(--muted);line-height:1.5}
@media(max-width:760px){.size-choice{grid-template-columns:76px minmax(0,1fr) auto;gap:8px}.print-shape-box{width:76px}.size-name{font-size:18px}.size-ppi{font-size:17px}.size-crop,.size-guide{font-size:10px}.exposure-icon{width:24px;height:24px;margin-bottom:10px}.dimension-flow .eyebrow{font-size:10px;letter-spacing:.6px}}
.metadata-totals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;border-top:3px solid var(--ink);padding:20px 0;margin-bottom:12px}.metadata-totals span{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);line-height:1.5;display:block}.metadata-totals strong{display:block;font-size:25px;line-height:1.2;margin-top:12px;overflow-wrap:anywhere}@media(max-width:760px){.metadata-totals{gap:12px}.metadata-totals strong{font-size:21px}}

/* Compact tool navigation and clear format guidance. */
.format-support{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;font-size:11px;color:var(--muted);line-height:1.6;padding:0 0 18px}.format-support strong{color:var(--ink);margin-right:8px;text-transform:uppercase;font-size:10px;letter-spacing:.6px}.mobile-jump{display:none}#export-controls,#print-controls{scroll-margin-top:16px}
@media(max-width:760px){
 .intro{padding:24px 0 18px;gap:12px}.intro h1{font-size:clamp(34px,9vw,42px);letter-spacing:-1.8px}.intro p{font-size:14px}.format-support{flex-direction:column;gap:3px;font-size:10px;padding-bottom:16px}
 .tool-options select,.tool-options input[type=number],.print-controls select,.contact-controls select{font-size:16px;min-height:44px}
 .tool-options input[type=range],#position{min-height:44px;margin:4px 0}.tool-options input[type=color]{width:100%;height:44px;background:var(--paper);border:1px solid var(--control-rule)}
 .mobile-jump{display:flex;align-items:center;min-height:44px;font-size:12px;text-underline-offset:3px}.filebar button,.text-button{min-height:44px}
 .tool-options label{margin-top:16px}.contact-preview{order:-1;border-bottom:1px solid var(--rule)}.contact-controls{border-bottom:0}.contact-controls .check-label{grid-column:1/-1;min-height:44px}.page-stage canvas{max-height:55vh;object-fit:contain}
 .size-choice{grid-template-columns:60px minmax(0,1fr) auto;gap:8px 6px}.print-shape-box{width:60px}.size-name{font-size:17px}.size-crop{overflow-wrap:anywhere}
 #photo-selector button{min-height:44px;max-width:180px}.site-mascot{width:54px;height:62px;right:8px;bottom:8px}.site-mascot .processing-mascot{width:54px;height:60px}.site-mascot .processing-mascot img{width:48px;height:48px}.site-mascot .processing-mascot::after{left:17px;width:24px}
}
@media(min-width:360px) and (max-width:760px){
 .shell>header nav{grid-template-columns:repeat(3,minmax(0,1fr))}.shell>header nav a,.shell>header nav a.comic-menu{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);font-size:11px;min-height:48px;padding:8px 4px;gap:4px}.shell>header nav a:nth-child(3n){border-right:0}.shell>header nav a:nth-last-child(-n+3){border-bottom:0}
}

.contact-controls input[type=text]{width:100%;min-height:44px;padding:11px;background:var(--paper);color:var(--ink);border:1px solid var(--control-rule);font-size:14px}.sheet-title-control{grid-column:1/-1}.contact-controls .check-label input{width:18px;height:18px;flex-shrink:0}@media(max-width:760px){.contact-controls input[type=text]{font-size:16px}}

.contact-controls #shoot-title::placeholder{color:var(--muted);opacity:1}

@media(max-width:760px){.shell>header nav a{border-bottom:1px solid var(--rule)!important}.shell>header nav a:last-child{border-bottom:0!important}}
.processing-popup [hidden]{display:none!important}.processing-popup .processing-download{margin-top:20px;background:var(--accent);color:white;min-height:48px;display:block;text-align:center;font-weight:700;text-decoration:none;cursor:pointer}.processing-popup .processing-preview{display:block;text-align:center;padding:12px;margin-top:10px;border:1px solid var(--rule);color:var(--ink);text-decoration:none}.processing-popup .processing-close{margin-top:12px}.processing-popup .processing-download:focus-visible,.processing-popup .processing-preview:focus-visible{outline:2px solid var(--ink);outline-offset:3px}