.tools-page{--bg:#f2f5f7;--surface:#fff;--surface-sunk:#f7f9fb;--line:#e1e8ed;--line-strong:#cbd6df;--ink:#192a3d;--text:#3a4f66;--muted:#5a6d81;--accent:#1559ed;--accent-hover:#0f45c4;--accent-soft:#edf3fe;--accent-line:#bfd2fb;--positive:#15704a;--positive-soft:#ebf7f1;--caution:#9a4d08;--caution-soft:#fff7e8;--caution-line:#f3d49c;--danger:#b42318;--danger-soft:#fdf0ee;--mono:ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;--radius-sm:4px;--radius:4px;--radius-lg:4px;--shadow:0 12px 18px -6px #2238650a;--shadow-raised:0 2px 4px #192a3d0f, 0 10px 28px #192a3d17;--section-gap:clamp(2rem, 4vw, 3rem);--control-h:44px;--focus:0 0 0 3px #1559ed47}.tools-page :where(h1,h2,h3,h4,h5,p,ul,ol,li,dl,dd,figure,table,blockquote){margin:0}:where(.tools-page *){padding:0}.tools-page strong{color:var(--ink);font-weight:600}.tools-page ul,.tools-page ol{padding-left:1.25rem}.tools-page .crumbs ol{padding-left:0}.tools-page img,.tools-page svg{max-width:100%}.tools-page :focus-visible{outline:2px solid var(--accent);outline-offset:2px}.tools-page [hidden]{display:none!important}.icon{vertical-align:-.2em;flex:none;width:1.25em;height:1.25em}.tools-page{padding-top:var(--space);padding-bottom:var(--section-gap)}.tools-page>h1{margin-bottom:.75rem}.page-intro,.page-header p{max-width:70ch;color:var(--text);margin-bottom:1.75rem;font-size:1.0625rem;line-height:1.65}.page-header{margin-bottom:.5rem}@media (width>=960px){.landing-header{grid-template-columns:minmax(0,1fr) minmax(280px,380px);align-items:center;gap:2.5rem;display:grid}}.calculator-wrapper,.how-to-use,.reference-section,.understanding-concepts,.faq,.related-tools{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);margin-bottom:var(--section-gap);padding:clamp(1.25rem,3vw,2rem)}.how-to-use>h2,.reference-section>h2,.understanding-concepts>h2,.faq>h2,.related-tools>h2{margin-bottom:.75rem}.tabs{border-bottom:1px solid var(--line);scrollbar-width:none;-webkit-overflow-scrolling:touch;gap:.25rem;margin:-.25rem 0 1.5rem;display:flex;overflow-x:auto}.tabs::-webkit-scrollbar{display:none}.tab-btn{min-height:var(--control-h);font:inherit;color:var(--muted);white-space:nowrap;cursor:pointer;background:0 0;border:0;border-bottom:2px solid #0000;flex:none;margin-bottom:-1px;padding:0 1rem;font-size:.9375rem;font-weight:600}.tab-btn:hover{color:var(--ink)}.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent)}.tab-content{display:none}.tab-content.active{display:block}.tab-intro{max-width:70ch;color:var(--text);margin-bottom:1.25rem}.calculator-form{margin-bottom:0}.form-grid,.input-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:1.25rem 1.5rem;margin-bottom:1.5rem;display:grid}.form-group,.input-group{flex-direction:column;gap:.4rem;min-width:0;display:flex}.full-width{grid-column:1/-1}.form-group label,.input-group label,.field-label{color:var(--ink);font-size:.9375rem;font-weight:600;line-height:1.35}.form-group label em,.input-group label em{color:var(--muted);font-weight:400}input[type=number],input[type=text],input[type=date],select{width:100%;min-height:var(--control-h);font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:8px;padding:.55rem .8rem;font-size:1rem;transition:border-color .15s,box-shadow .15s}select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6d81' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right .7rem center;background-repeat:no-repeat;background-size:1rem;padding-right:2.25rem}input:hover,select:hover{border-color:var(--muted)}input:focus,select:focus{border-color:var(--accent);box-shadow:var(--focus);outline:none}input[type=range]{accent-color:var(--accent)}.form-help{color:var(--muted);font-size:.8125rem;line-height:1.45}.select-compact{max-width:320px}.input-with-unit,.distance-input{align-items:stretch;gap:.5rem;display:flex}.input-with-unit>input,.distance-input>input{flex:auto;min-width:0}.input-with-unit>select,.distance-input>select{flex:none;width:auto}.custom-inputs{grid-template-columns:1fr 1fr;gap:.75rem;display:grid}.presets{flex-wrap:wrap;gap:.4rem;margin-top:.25rem;display:flex}.preset-btn{min-height:32px;font:inherit;color:var(--text);background:var(--surface-sunk);border:1px solid var(--line);cursor:pointer;border-radius:999px;padding:.3rem .75rem;font-size:.8125rem;font-weight:500;line-height:1.2;transition:background .15s,border-color .15s,color .15s}.preset-btn:hover{color:var(--accent);background:var(--accent-soft);border-color:var(--accent-line)}.preset-btn.selected,.preset-btn[aria-pressed=true]{color:#fff;background:var(--accent);border-color:var(--accent)}.preset-btn small{opacity:.8;font-size:.75rem;display:block}.mode-toggle{background:var(--surface-sunk);border:1px solid var(--line);border-radius:var(--radius);flex-wrap:wrap;gap:.25rem;padding:.25rem;display:inline-flex}.mode-toggle-narrow{max-width:400px}.mode-toggle button{min-height:38px;font:inherit;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:7px;flex:auto;padding:0 .9rem;font-size:.875rem;font-weight:600}.mode-toggle button:hover{color:var(--ink)}.mode-toggle button.active{color:var(--ink);background:var(--surface);box-shadow:0 1px 2px #192a3d1f}form>.input-group,form>.form-group{margin-bottom:1.5rem}form>.calculate-btn{margin-top:.25rem}.calculate-btn,.button{min-width:220px;min-height:48px;font:inherit;color:#fff;background:var(--accent);cursor:pointer;border:0;border-radius:8px;justify-content:center;align-items:center;gap:.5rem;padding:0 1.5rem;font-size:1rem;font-weight:600;text-decoration:none;transition:background .15s;display:inline-flex}.calculate-btn:hover,.button:hover{color:#fff;background:var(--accent-hover)}.calculator-form.loading .calculate-btn{opacity:.7;cursor:progress}.button-secondary,.result-action{min-height:40px;font:inherit;color:var(--accent);background:var(--surface);border:1px solid var(--accent-line);cursor:pointer;border-radius:8px;align-items:center;gap:.45rem;padding:0 1rem;font-size:.875rem;font-weight:600;display:inline-flex}.button-secondary:hover,.result-action:hover{background:var(--accent-soft)}.form-group.has-error input,.form-group.has-error select,input[aria-invalid=true]{border-color:var(--danger)}.form-group.has-error label,.validation-error,.error-message,.error-text{color:var(--danger)}.validation-error,.error-message{font-size:.875rem;display:block}.error-text{font-weight:600}.error,.success-message{border-radius:8px;margin:1rem 0 0;padding:.75rem 1rem;font-size:.9375rem}.error{color:var(--danger);background:var(--danger-soft);border:1px solid #f3c2bc}.success-message{color:var(--positive);background:var(--positive-soft);border:1px solid #b9e2cc}.results-section{background:var(--surface-sunk);border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:var(--radius);margin-top:1.75rem;padding:clamp(1rem,2.5vw,1.5rem);scroll-margin-top:150px}.results-section>h2,.results-section>h3{margin-bottom:1rem}.result-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:1rem;padding:clamp(1rem,2.5vw,1.25rem) clamp(1rem,2.5vw,1.5rem)}.result-card:last-child{margin-bottom:0}.result-card>h3,.result-card>h4{margin-bottom:.75rem}.result-card p+p,.result-card p+ul,.result-card ul+p{margin-top:.5rem}.result-lead{color:var(--ink);margin-bottom:1rem;font-size:1.0625rem}.result-lead strong{color:var(--accent);font-variant-numeric:tabular-nums;font-size:1.5rem}.stat-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,170px),1fr));gap:.75rem;display:grid}.stat{background:var(--surface-sunk);border:1px solid var(--line);border-radius:8px;flex-direction:column;gap:.15rem;min-width:0;padding:.8rem .9rem;display:flex}.stat-label{color:var(--muted);font-size:.8125rem}.stat-value{color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;font-size:1.25rem;font-weight:700}.stat-note{color:var(--muted);font-size:.8125rem}.stat.highlight{background:var(--accent-soft);border-color:var(--accent-line)}.stat.highlight .stat-value{color:var(--accent)}.callout{background:var(--accent-soft);color:var(--ink);border-radius:8px;gap:.6rem;margin-top:1rem;padding:.8rem 1rem;font-size:.9375rem;display:flex}.callout.warning{background:var(--caution-soft);color:#5f3205}.table-scroll,.reference-scroll{-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);margin-top:.75rem;overflow-x:auto}.data-table,.reference-table{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%;font-size:.9375rem}.data-table th,.data-table td,.reference-table th,.reference-table td{text-align:left;white-space:nowrap;border-bottom:1px solid var(--line);padding:.55rem .85rem}.data-table tr:last-child td,.reference-table tbody tr:last-child>*{border-bottom:0}.data-table thead th,.reference-table thead th{color:var(--muted);background:var(--surface-sunk);font-size:.8125rem;font-weight:600}.reference-table tbody th{color:var(--ink);font-weight:600}.reference-table caption{caption-side:top;text-align:left;color:var(--muted);padding:.7rem .85rem .3rem;font-size:.8125rem}.data-table tr.is-current td{background:var(--accent-soft);font-weight:600}.figure{text-align:center;margin:1rem 0 0}.figure svg{height:auto}.figure figcaption{color:var(--muted);margin-top:.5rem;font-size:.875rem}.result-actions{flex-wrap:wrap;gap:.5rem;margin-top:1.25rem;display:flex}.page-toc{margin:-1rem 0 var(--section-gap);flex-wrap:wrap;align-items:center;gap:.5rem .75rem;display:flex}.page-toc-label{color:var(--muted);font-size:.8125rem;font-weight:600}.page-toc ul{flex-wrap:wrap;gap:.4rem;padding:0;list-style:none;display:flex}.page-toc a{min-height:34px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:999px;align-items:center;padding:0 .85rem;font-size:.875rem;font-weight:500;text-decoration:none;display:inline-flex}.page-toc a:hover{color:var(--accent);border-color:var(--accent-line)}.how-to-use p,.reference-section p,.understanding-concepts>p,.how-to-use li,.reference-section li{max-width:75ch}.how-to-use p+p,.reference-section p+p,.how-to-use p,.reference-section>p{margin-bottom:.75rem}.how-to-use h3,.reference-section h3{margin:1.5rem 0 .5rem}.how-to-use h4{margin:1rem 0 .4rem}.how-to-use ol,.how-to-use ul,.reference-section ul{margin-bottom:.75rem}.how-to-use li,.reference-section li{margin-bottom:.4rem}.formula{font-family:var(--mono);color:var(--ink);background:var(--surface-sunk);border:1px solid var(--line);white-space:pre;border-radius:8px;margin:.75rem 0 1rem;padding:.9rem 1.1rem;font-size:.875rem;line-height:1.7;display:block;overflow-x:auto}.worked-example{background:var(--positive-soft);border:1px solid #c7e7d6;border-radius:8px;margin:.75rem 0 1rem;padding:.9rem 1.1rem}.worked-example p{margin-bottom:.4rem}.worked-example ul{margin:0}.understanding-concepts>p{margin-bottom:1.25rem}.concept-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:1rem;display:grid}.concept-card{background:var(--surface-sunk);border:1px solid var(--line);border-radius:var(--radius);flex-direction:column;gap:.6rem;padding:1.25rem;font-size:.9375rem;display:flex}.concept-card h3{font-size:1.0625rem}.concept-card ul{gap:.35rem;display:grid}.concept-takeaway,.concept-example{border-radius:8px;margin-top:auto;padding:.7rem .9rem;font-size:.9rem}.concept-takeaway{background:var(--accent-soft);color:var(--ink)}.concept-example{background:var(--surface);border:1px solid var(--line)}.faq-item{border-top:1px solid var(--line)}.faq-item:last-child{border-bottom:1px solid var(--line)}.faq-item summary{color:var(--ink);cursor:pointer;padding:1rem 2.25rem 1rem 0;font-weight:600;list-style:none;position:relative}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:after{content:"";border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);width:.55rem;height:.55rem;transition:transform .2s;position:absolute;top:50%;right:.4rem;transform:translateY(-70%)rotate(45deg)}.faq-item[open] summary:after{transform:translateY(-25%)rotate(-135deg)}.faq-item p{max-width:75ch;padding:0 0 1.1rem}.related-list{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:.75rem;padding:0;list-style:none;display:grid}.related-item{border:1px solid var(--line);border-radius:var(--radius);grid-template-columns:auto 1fr;gap:.25rem .75rem;padding:1rem;transition:border-color .15s,box-shadow .15s;display:grid;position:relative}.related-item:hover{border-color:var(--accent-line);box-shadow:var(--shadow)}.related-item .tool-icon{grid-row:span 2}.related-item a{color:var(--ink);font-weight:600;text-decoration:none}.related-item a:after{content:"";border-radius:inherit;position:absolute;inset:0}.related-item a:hover{color:var(--accent)}.related-item p{color:var(--muted);font-size:.875rem}.related-reading,.related-all{margin-top:1rem;font-size:.9375rem}.tool-icon{border-radius:var(--radius);width:40px;height:40px;color:var(--accent);background:var(--accent-soft);justify-content:center;align-items:center;display:inline-flex}.tool-icon .icon{width:22px;height:22px}.tool-group{margin-top:var(--section-gap)}.tool-group-header{margin-bottom:1rem}.tool-group-header p{color:var(--muted)}.tools-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:1rem;display:grid}.tool-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);flex-direction:column;gap:.6rem;padding:1.4rem;transition:box-shadow .2s,border-color .2s;display:flex;position:relative}.tool-card:hover{border-color:var(--accent-line);box-shadow:var(--shadow-raised)}.tool-card h3{font-size:1.125rem}.tool-card h3 a{color:var(--ink);text-decoration:none}.tool-card h3 a:after{content:"";border-radius:inherit;position:absolute;inset:0}.tool-card:hover h3 a{color:var(--accent)}.tool-card h3 a:focus-visible{outline:none}.tool-card:focus-within{box-shadow:var(--focus), var(--shadow)}.tool-card p{font-size:.9375rem}.tool-group+.tool-text{margin-top:var(--section-gap)}.about-tools ul{gap:.5rem;display:grid}.toast{left:50%;bottom:calc(20px + env(safe-area-inset-bottom));z-index:2000;color:#fff;background:var(--ink);border-radius:var(--radius);max-width:calc(100% - 32px);box-shadow:var(--shadow-raised);opacity:0;pointer-events:none;padding:.75rem 1.1rem;transition:opacity .2s,transform .2s;position:fixed;transform:translate(-50%,12px)}.toast.visible{opacity:1;transform:translate(-50%)}@media (width<=768px){.calculate-btn{width:100%;min-width:0}.mode-toggle{display:flex}.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stat-value{font-size:1.125rem}.result-actions>*{flex:auto;justify-content:center}.page-toc{margin-top:-.5rem}}@media (width<=380px){.custom-inputs{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){.tools-page *,.tools-page :before,.tools-page :after{transition-duration:.01ms!important;animation-duration:.01ms!important}}@media print{@page{margin:15mm}body{color:#000;background:#fff;display:block}.site-header,.site-footer,.skip-link,.crumbs,.page-toc,.page-intro,.tool-text,.faq,.related-tools,.tool-share,.important-note,.tabs,.tab-content:not(.active),form,.result-actions,.save-section,.saved-section,.toast,.article-links{display:none!important}.tools-page,.calculator-wrapper{max-width:none;box-shadow:none;background:0 0;border:0;margin:0;padding:0}.results-section{background:#fff;border:1px solid #999;margin:.5rem 0 0}.result-card,.stat,tr{break-inside:avoid}.tools-page:after{content:"Calculated at beyondphototips.com/tools";color:#555;margin-top:1rem;font-size:9pt;display:block}}