:root{--ink:#101114;--paper:#f2f1ed;--card:#fbfaf6;--line:#d6d3ca;--red:#c63122;--muted:#686863;--radius:18px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.bar{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,5vw,72px);border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(242,241,237,.92);backdrop-filter:blur(16px);z-index:5}.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;font-weight:750;letter-spacing:-.02em}.mark{display:grid;place-items:center;width:34px;height:34px;background:var(--ink);color:white;border-radius:50%;font:700 11px/1 Georgia,serif;letter-spacing:.08em}.quiet-link{color:var(--muted);font-size:.9rem}.intro{padding:clamp(58px,9vw,120px) clamp(20px,8vw,120px) clamp(44px,7vw,88px);max-width:1200px}.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.73rem;font-weight:800;color:var(--red)}h1{font:500 clamp(3rem,8vw,7.2rem)/.92 Georgia,serif;letter-spacing:-.055em;margin:.2em 0}h1 em{font-weight:400;color:var(--red)}.lede{max-width:700px;color:var(--muted);font-size:clamp(1.08rem,2vw,1.4rem)}.workspace{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);gap:22px;padding:0 clamp(16px,5vw,72px) 100px}.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}.controls{padding:clamp(22px,4vw,42px);display:grid;gap:20px}.section-title{display:flex;align-items:center;gap:12px;margin-top:8px}.section-title span{color:var(--red);font-size:.73rem;font-weight:800}.section-title h2{font:500 1.65rem Georgia,serif;margin:0}.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}label{display:grid;gap:7px;position:relative;font-size:.84rem;font-weight:700;color:#3e3e3a}input,select{width:100%;border:1px solid var(--line);border-radius:10px;background:white;color:var(--ink);padding:13px 14px;font:500 1rem/1.2 inherit;min-height:48px}input:focus,select:focus{outline:3px solid rgba(198,49,34,.18);border-color:var(--red)}.suffix,.prefix{position:absolute;right:13px;bottom:13px;color:var(--muted);font-weight:500}.prefix{right:auto;left:14px}#maxAperture{padding-left:32px}.checks{display:flex;flex-wrap:wrap;gap:12px 24px}.checks label{display:flex;align-items:center;gap:8px}.checks input{width:19px;min-height:19px;accent-color:var(--red)}button{border:0;border-radius:12px;padding:16px 20px;background:var(--ink);color:white;font:750 1rem/1 inherit;display:flex;justify-content:space-between;cursor:pointer}button:hover{background:var(--red)}.result{padding:clamp(24px,4vw,44px);height:max-content;position:sticky;top:94px;background:var(--ink);color:white}.result-label{text-transform:uppercase;letter-spacing:.12em;color:#bdbdb7;font-size:.72rem;font-weight:800}.settings{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#3a3b3d;margin:30px 0}.settings div{background:var(--ink);padding:18px 10px 18px 0}.settings span,.settings small{display:block;color:#a7a7a2;font-size:.74rem}.settings strong{display:block;font:500 clamp(1.65rem,3.3vw,2.8rem)/1.2 Georgia,serif;letter-spacing:-.04em}.meter{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;color:#9f9f9a;font-size:.7rem}.meter div{height:4px;background:#444;border-radius:10px;overflow:hidden}.meter i{display:block;height:100%;width:50%;background:var(--red);transition:width .3s}.result h3{font:500 1.45rem Georgia,serif;margin-top:36px}.result ul{padding-left:20px;color:#d1d1cc}.result li{margin:10px 0}.note{border-top:1px solid #393a3c;margin-top:26px;padding-top:22px;color:#bdbdb7}.note strong{display:block;color:white}.about{padding:90px clamp(20px,8vw,120px);background:var(--card);border-top:1px solid var(--line)}.about h2{font:500 clamp(2.3rem,5vw,5rem)/1 Georgia,serif;max-width:850px;margin:.25em 0 .7em}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;max-width:900px;color:var(--muted);font-size:1.05rem}footer{padding:28px clamp(20px,5vw,72px);display:flex;justify-content:space-between;color:var(--muted);font-size:.8rem}@media(max-width:850px){.workspace{grid-template-columns:1fr}.result{position:static;order:-1}.settings strong{font-size:clamp(1.5rem,8vw,2.4rem)}}@media(max-width:560px){.two,.about-grid{grid-template-columns:1fr}.intro{padding-top:52px}h1{font-size:clamp(3rem,15vw,5rem)}.settings{grid-template-columns:1fr}.settings div{padding:14px 0}.settings strong{font-size:2rem}footer{gap:10px;flex-direction:column}}
