@font-face {
  font-family: "Geist";
  src: url("/fonts/geist-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #090b0e;
  --panel: #11151a;
  --panel-raised: #151b21;
  --line: #29313a;
  --line-soft: #1d242b;
  --text: #e9eef4;
  --muted: #89939e;
  --red: #e32636;
  --font-geist-sans: "Geist";
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    radial-gradient(circle at 50% 0%, #10161c 0, var(--bg) 52%);
  background-size: 44px 44px, 44px 44px, auto;
  color: var(--text);
  font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
}

button, input { font: inherit; }
button { color: inherit; }

main { min-height: 100vh; padding: 28px; }
.shell { width: min(1380px, 100%); margin: 0 auto; }

.header { display: flex; align-items: center; min-height: 108px; gap: 22px; }
.brand-mark { position: relative; width: 68px; height: 68px; flex: 0 0 68px; border-radius: 50%; background: var(--red); overflow: hidden; box-shadow: 0 0 30px rgba(227,38,54,.12); }
.brand-mark:after { content: ""; position: absolute; inset: 18px; border-radius: 50%; background: var(--bg); }
.brand-mark i { position: absolute; left: 33px; top: -5px; width: 2px; height: 40px; background: var(--bg); transform-origin: 1px 39px; z-index: 2; }
.brand-mark i:nth-child(2){ transform: rotate(60deg); }.brand-mark i:nth-child(3){ transform: rotate(120deg); }.brand-mark i:nth-child(4){ transform: rotate(180deg); }.brand-mark i:nth-child(5){ transform: rotate(240deg); }.brand-mark i:nth-child(6){ transform: rotate(300deg); }
.title-block h1 { margin: 0; font-size: clamp(28px, 3vw, 42px); line-height: 1; letter-spacing: -.035em; font-weight: 650; }
.title-block p { margin: 10px 0 0; color: #b6bec7; font-size: 19px; }
.title-block span { display: block; margin-top: 8px; color: var(--muted); font-size: 14px; }
.camera-chip { margin-left: auto; display: flex; align-items: center; gap: 14px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 12px; background: rgba(17,21,26,.84); box-shadow: 0 12px 34px rgba(0,0,0,.18); }
.camera-icon { display: grid; place-items: center; width: 42px; height: 34px; border: 1px solid #65707c; border-radius: 5px; font-size: 24px; color: #a9b1ba; }
.camera-chip strong, .camera-chip small { display: block; }.camera-chip strong { font-size: 15px; }.camera-chip small { margin-top: 5px; color: var(--muted); }

.modes { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--line); border-radius: 13px 13px 0 0; overflow: hidden; background: rgba(10,13,17,.75); }
.modes button { position: relative; display: flex; justify-content: center; align-items: center; gap: 15px; min-height: 88px; padding: 12px 18px; border: 0; border-right: 1px solid var(--line-soft); background: transparent; cursor: pointer; transition: background .18s ease, color .18s ease; }
.modes button:last-child { border-right: 0; }.modes button:hover { background: #11171d; }.modes button.active { background: linear-gradient(90deg,#171e25,#12181e); }
.modes button.active:after { content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--red); box-shadow:0 0 14px rgba(227,38,54,.45); }
.mode-mark { color: #8f9aa6; font-size: 25px; }.modes button.active .mode-mark { color: var(--red); }
.modes strong, .modes small { display: block; text-align: left; }.modes strong { font-size: 18px; }.modes small { margin-top: 8px; color: var(--muted); font-size: 13px; }

.workspace { display: grid; grid-template-columns: 1.35fr .92fr; gap: 16px; margin-top: 16px; }
.panel { border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg, rgba(18,23,29,.98), rgba(12,16,20,.98)); box-shadow: 0 22px 60px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.018); }
.input-panel { min-height: 482px; padding: 30px; display: flex; flex-direction: column; justify-content: center; }
.field { padding: 28px 0; border-bottom: 1px solid var(--line-soft); }.field:last-child { border-bottom: 0; }
.field-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.field-heading label { color: #b5bdc6; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; font-size: 14px; }.field-hint { color: #69737e; font-size: 12px; }
.control-row { display: grid; grid-template-columns: 215px 1fr; gap: 32px; align-items: center; }
.number-box { position: relative; display: flex; align-items: center; min-height: 88px; padding: 0 60px 0 20px; border: 1px solid #3b4652; border-radius: 7px; background: #0e1318; box-shadow: inset 0 8px 25px rgba(0,0,0,.28); }
.number-box input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 48px; font-weight: 520; font-variant-numeric: tabular-nums; }
.number-box input::-webkit-inner-spin-button { appearance: none; }.number-box > span { color: #a0a9b3; font-size: 18px; }
.aperture-box strong { font-size: 44px; font-weight: 520; font-variant-numeric: tabular-nums; }
.steppers { position: absolute; right: 0; top: 0; bottom: 0; width: 46px; border-left: 1px solid var(--line); display: grid; grid-template-rows: 1fr 1fr; }
.steppers button { border:0; border-bottom: 1px solid var(--line); background:#151b21; color:#bac2ca; cursor:pointer; font-size:18px; }.steppers button:last-child{border-bottom:0}.steppers button:hover{background:#202831;color:#fff}.steppers button:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.slider-wrap { min-width: 0; }
.range { --fill: 0%; width: 100%; height: 30px; margin: 0; appearance: none; background: transparent; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: 5px; border-radius: 99px; background: linear-gradient(90deg,var(--red) var(--fill),#313a44 var(--fill)); }
.range::-moz-range-track { height: 5px; border-radius: 99px; background: #313a44; }.range::-moz-range-progress{height:5px;border-radius:99px;background:var(--red)}
.range::-webkit-slider-thumb { appearance:none; width:24px;height:24px;margin-top:-9px;border:3px solid #c6cdd4;border-radius:50%;background:#66717d;box-shadow:0 0 0 5px #222a32,0 0 18px rgba(227,38,54,.3); }
.range::-moz-range-thumb { width:18px;height:18px;border:3px solid #c6cdd4;border-radius:50%;background:#66717d;box-shadow:0 0 0 5px #222a32; }
.range:focus-visible { outline: 2px solid var(--red); outline-offset: 5px; border-radius: 8px; }
.range-limits { display:flex;justify-content:space-between;color:#69747f;font-size:12px; }
.aperture-dial { display:none; }

.result-panel { position: relative; min-height: 482px; padding: 28px 30px 24px; text-align: center; overflow: hidden; }
.result-panel:before { content:""; position:absolute; inset:0; opacity:.15; pointer-events:none; background-image:radial-gradient(#79838e 0.65px,transparent 0.65px); background-size:5px 5px; mask-image:linear-gradient(to bottom,#000,transparent 70%); }
.result-panel > * { position: relative; }
.result-label { display:block;color:#a1abb5;text-transform:uppercase;letter-spacing:.11em;font-size:12px; }
.result-value { display:flex;align-items:baseline;justify-content:center;gap:14px;margin:12px 0 10px;min-height:88px; }
.result-value strong { font-size: clamp(54px,6.2vw,86px); line-height:1; font-weight:520;letter-spacing:-.04em;font-variant-numeric:tabular-nums; }.result-value em{font-size:31px;font-style:normal;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.focus-line { position:relative;height:18px;margin:0 28px 7px;border-bottom:2px solid var(--red); }.focus-line span{position:absolute;bottom:-7px;width:12px;height:12px;margin-left:-6px;border:2px solid #e5e9ed;border-radius:50%;background:#11161b}
.split-values { display:grid;grid-template-columns:1fr 1fr;margin:0 16px 18px; }.split-values>div{padding:5px 12px}.split-values>div+div{border-left:1px solid var(--line)}.split-values span,.split-values strong{display:block}.split-values span{color:#8f99a3;font-size:12px}.split-values strong{margin-top:6px;font-size:27px;font-weight:520;font-variant-numeric:tabular-nums}.split-values small{font-size:14px;color:#b3bbc3}
.dof-scale { position:relative;height:36px;margin:0 16px;background:repeating-linear-gradient(90deg,#303944 0,#303944 1px,transparent 1px,transparent 5px);border-top:1px solid #8b949d;border-bottom:1px solid #3c4650;overflow:visible }.dof-scale:before,.dof-scale:after{content:"";position:absolute;top:-5px;height:46px;border-left:1px dashed #9da6af}.dof-scale:before{left:0}.dof-scale:after{right:0}.scale-before,.scale-after{position:absolute;top:0;bottom:0;background:rgba(227,38,54,.07)}.scale-before{left:0}.scale-after{right:0}.dof-scale i{position:absolute;top:-6px;bottom:-6px;border-left:2px solid var(--red)}
.near-far { display:flex;justify-content:space-between;margin:9px 16px 0;color:#7f8993;font-size:11px;font-variant-numeric:tabular-nums; }
.calculation-note { margin:16px 0 12px;color:#737e89;font-size:12px;min-height:16px; }
.copy-button { width:100%;min-height:52px;border:1px solid #606a74;border-radius:7px;background:rgba(15,20,25,.8);cursor:pointer;font-weight:550;transition:border-color .16s,background .16s; }.copy-button span{color:var(--red);margin-right:11px}.copy-button:hover:not(:disabled){border-color:#aab1b8;background:#171d23}.copy-button:focus-visible{outline:2px solid var(--red);outline-offset:3px}.copy-button:disabled{opacity:.45;cursor:not-allowed}
.error-box { display:flex;align-items:center;justify-content:center;min-height:190px;margin:18px 0;color:#f4a5ac;border:1px solid rgba(227,38,54,.4);border-radius:9px;background:rgba(227,38,54,.06);padding:22px;line-height:1.5; }

.info-strip { display:grid;grid-template-columns:1fr 1.2fr 1.35fr;margin-top:16px;border:1px solid var(--line-soft);border-radius:12px;background:rgba(10,14,18,.84); }
.info-strip div { display:flex;align-items:center;gap:13px;min-height:74px;padding:13px 20px;border-right:1px solid var(--line-soft); }.info-strip div:last-child{border-right:0}.info-strip b{display:grid;place-items:center;flex:0 0 30px;height:30px;border:1px solid #69737d;border-radius:50%;color:#aab2ba;font-size:14px}.info-strip span{color:#7f8993;font-size:12px;line-height:1.5}

noscript { display: block; padding: 24px; color: #f4a5ac; text-align: center; }

@media (max-width: 980px) {
  main{padding:20px}.header{flex-wrap:wrap;padding-bottom:18px}.camera-chip{width:100%;margin-left:90px}.workspace{grid-template-columns:1fr}.input-panel{min-height:auto}.modes small{display:none}.control-row{grid-template-columns:190px 1fr}.info-strip{grid-template-columns:1fr}.info-strip div{border-right:0;border-bottom:1px solid var(--line-soft)}.info-strip div:last-child{border-bottom:0}
}

@media (max-width: 640px) {
  main{padding:12px}.header{gap:14px}.brand-mark{width:48px;height:48px;flex-basis:48px}.brand-mark:after{inset:13px}.brand-mark i{left:23px;top:-11px}.title-block h1{font-size:27px}.title-block p{font-size:14px}.title-block span{font-size:11px}.camera-chip{margin-left:0;padding:12px 14px}.modes{grid-template-columns:1fr}.modes button{min-height:62px;justify-content:flex-start;border-right:0;border-bottom:1px solid var(--line-soft)}.modes button:last-child{border-bottom:0}.modes button.active:after{top:0;bottom:0;right:auto;width:4px;height:auto}.modes small{display:block;margin-top:3px}.panel{border-radius:10px}.input-panel,.result-panel{padding:20px}.field{padding:20px 0}.field-heading{align-items:flex-start;flex-direction:column;gap:5px}.control-row{grid-template-columns:1fr;gap:16px}.number-box{min-height:76px}.result-value strong{font-size:56px}.result-value em{font-size:22px}.split-values{margin-left:0;margin-right:0}.near-far{margin-left:0;margin-right:0;font-size:10px}.info-strip div{padding:12px 14px}
}

@media (prefers-reduced-motion: no-preference) {
  .modes button,.copy-button,.range::-webkit-slider-thumb{transition-duration:.18s}
}