/* 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%}}