@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Space+Grotesk:wght@400;500;600&display=swap');
:root{color-scheme:dark;--bg:#141719;--panel:#1b1f22;--line:#33383b;--text:#edf0ed;--muted:#9fa7aa;--accent:#edaa69}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;font-size:16px}.shell{max-width:1512px;margin:auto;padding:0 48px}header{height:100px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{color:var(--text);text-decoration:none;font-family:'Space Grotesk',sans-serif;font-size:23px;font-weight:600;letter-spacing:1px;display:flex;align-items:center;gap:7px}.brand-light{font-weight:400;color:#aeb5b7}.lens-logo{color:var(--accent);font-size:37px;margin-right:7px}.header-note,.eyebrow{font-size:12px;letter-spacing:2px;font-weight:600;color:var(--muted)}.format-pill{border:1px solid var(--line);border-radius:6px;padding:9px 12px;font-size:13px}.format-pill span{margin-left:12px;color:var(--muted);font-size:11px;letter-spacing:1px}.intro{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:35px 0 29px}.eyebrow{color:var(--accent);margin-bottom:10px}h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(25px,2.3vw,36px);line-height:1.2;font-weight:500;letter-spacing:-1.1px;margin:0 0 10px}.intro p{color:var(--muted);margin:0;font-size:15px}button,input,select{font:inherit}button{cursor:pointer}.reset{border:1px solid var(--line);border-radius:6px;background:transparent;color:#c5cdce;padding:10px 14px;white-space:nowrap;font-size:14px}.reset:hover{background:#282e31;color:white}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 348px;gap:24px;align-items:start}.view-panel{overflow:hidden;border-radius:10px;border:1px solid var(--line);background:var(--panel)}.view-top,.view-footer{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;font-size:12px;letter-spacing:1.3px}.view-top{height:53px}.view-top>span:first-child{display:flex;align-items:center;gap:8px}.view-top i{width:5px;height:5px;background:var(--accent);border-radius:50%}.view-top>span:last-child{color:var(--muted);font-size:11px}.viewfinder{position:relative;aspect-ratio:3/2;overflow:hidden;background:#303c36}canvas{display:block;width:100%;height:100%}.view-label,.view-bottom{position:absolute;color:white;text-shadow:0 1px 5px #000;font-family:'Space Grotesk',sans-serif;font-size:14px}.view-label{top:21px;left:22px}.view-label span{font-family:'DM Sans',sans-serif;font-size:10px;letter-spacing:1px;margin-left:10px;opacity:.8}.view-bottom{bottom:22px;left:22px;right:22px;display:flex;gap:23px}.view-bottom span:first-child{margin-right:auto}.focus-box{position:absolute;width:55px;height:55px;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid #eff8e8aa;border-radius:3px;box-shadow:0 0 0 1px #0002}.focus-box:after{content:'+';position:absolute;color:#f8ffef99;left:50%;top:50%;transform:translate(-50%,-50%);font-size:15px}.grid{position:absolute;inset:0;background:linear-gradient(to right,transparent 33.2%,#fff4 33.2%,#fff4 33.4%,transparent 33.4%,transparent 66.5%,#fff4 66.5%,#fff4 66.7%,transparent 66.7%),linear-gradient(to bottom,transparent 33.2%,#fff4 33.2%,#fff4 33.4%,transparent 33.4%,transparent 66.5%,#fff4 66.5%,#fff4 66.7%,transparent 66.7%);pointer-events:none}.view-footer{font-size:13px;letter-spacing:0;border-bottom:1px solid var(--line);height:53px}.muted{color:#757e81;margin:0 6px}.grid-toggle{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px;cursor:pointer}input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px}.metrics{display:grid;grid-template-columns:1fr 1fr 1.2fr;padding:22px 0}.metrics>div{padding:0 20px;border-right:1px solid var(--line)}.metrics>div:last-child{border:0}.metrics span{font-size:10px;letter-spacing:1.2px;color:var(--muted);display:block;margin-bottom:8px}.metrics strong{font-family:'Space Grotesk',sans-serif;font-size:23px;font-weight:400}.metrics>div:last-child strong{font-size:20px}.controls{border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:22px}.panel-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}.panel-heading h2{font-size:19px;font-weight:500;margin:0}.panel-heading>span{color:var(--muted);font-size:10px;letter-spacing:1.2px}.control{padding-bottom:23px;margin-bottom:22px;border-bottom:1px solid var(--line)}.control-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:8px}.control-title>label{font-size:14px;color:#d4dadb}.number-wrap{display:flex;align-items:baseline;gap:3px;color:var(--accent);font-family:'Space Grotesk',sans-serif;white-space:nowrap}.number-wrap span{font-size:16px}.number-wrap input{width:76px;text-align:right;border:0;border-bottom:1px solid transparent;background:none;font-size:28px;color:var(--accent);padding:0;appearance:textfield;outline:none}.number-wrap input:focus{border-color:var(--accent)}.number-wrap input::-webkit-inner-spin-button{appearance:none}.range{width:100%;height:4px;display:block;margin:0;appearance:none;background:linear-gradient(to right,var(--accent) 0%,var(--accent) var(--fill,40%),#42494c var(--fill,40%),#42494c 100%);border-radius:4px;cursor:pointer}.range::-webkit-slider-thumb{appearance:none;width:15px;height:15px;border-radius:50%;background:#f5bf89;box-shadow:0 0 0 4px #edaa6910}.range::-moz-range-thumb{width:15px;height:15px;border:0;border-radius:50%;background:#f5bf89}.range-ends{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;margin-top:13px}.presets{display:flex;gap:5px;margin-top:17px}.presets button{flex:1;min-width:0;padding:7px 0;background:#242a2d;border:1px solid #353c3f;border-radius:4px;color:#b8c1c4;font-size:11px}.presets button.active{background:#edaa6920;color:var(--accent);border-color:#edaa6980}.presets button:hover{border-color:var(--accent)}.switch-row{display:flex;align-items:center;justify-content:space-between;margin-top:21px;font-size:13px;gap:8px;cursor:pointer}.switch-row small{display:block;color:var(--muted);font-size:11px;line-height:1.5;margin-top:4px}.switch-row input{appearance:none;flex:0 0 31px;height:18px;border-radius:14px;background:#42494c;position:relative;cursor:pointer}.switch-row input:after{content:'';position:absolute;top:3px;left:3px;width:12px;height:12px;background:#adb5b8;border-radius:50%;transition:.2s}.switch-row input:checked{background:#a46b3b}.switch-row input:checked:after{left:16px;background:#ffd2a7}.aperture-caption{display:flex;align-items:center;gap:13px;margin-top:16px}.aperture-caption svg{flex-shrink:0}.aperture-caption p{font-size:12px;color:var(--muted);line-height:1.5;margin:0;max-width:180px}.control-note{font-size:12px;color:var(--muted);line-height:1.5;margin:17px 0 0}.distance-control{margin-bottom:17px;padding-bottom:20px}.bokeh-control{display:flex;align-items:center;justify-content:space-between;font-size:13px;gap:8px}.bokeh-control select{padding:7px 25px 7px 9px;border:1px solid #3c4447;border-radius:5px;font-size:12px;background:#242a2d;color:#d6dcde}.focus-note{display:flex;align-items:center;gap:10px;margin-top:19px}.focus-icon{font-size:26px;color:var(--accent)}.focus-note p{font-size:11px;line-height:1.6;margin:0;color:#d1d7d8}.focus-note p span{color:var(--muted)}.model-notes{margin:24px 0 35px;max-width:850px;color:var(--muted);font-size:13px}.model-notes summary{list-style:none;display:flex;align-items:center;gap:20px;cursor:pointer;color:#bdc5c8}.model-notes summary span{font-size:20px;color:var(--accent)}.model-notes p{line-height:1.8;margin-bottom:0}.model-notes[open] summary span{transform:rotate(45deg)}footer{display:flex;justify-content:space-between;gap:20px;padding:22px 0 28px;border-top:1px solid var(--line);font-size:11px;letter-spacing:1px;color:#808b90}footer span:first-child{color:#c1c8ca}footer span:nth-child(2){letter-spacing:0}#asset-status{position:absolute;inset:0;display:grid;place-items:center;background:#26332e;color:#dfebdf;font-size:14px}#asset-status[hidden]{display:none}button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:5px}@media(min-width:1450px){.controls{padding:27px}.control{padding-bottom:28px;margin-bottom:27px}}@media(max-width:1100px){.shell{padding:0 25px}.workspace{grid-template-columns:minmax(0,1fr) 310px;gap:18px}.controls{padding:18px}.metrics>div{padding:0 12px}.metrics strong{font-size:20px}.metrics>div:last-child strong{font-size:17px}.header-note{display:none}.intro h1{font-size:29px}}@media(max-width:800px){.workspace{grid-template-columns:1fr}.controls{display:grid;grid-template-columns:1fr 1fr;gap:20px}.panel-heading{grid-column:1/-1;margin:0}.control{margin:0}.control:first-of-type{grid-row:span 2}.distance-control{grid-column:2}.bokeh-control,.focus-note{margin:0}.metrics strong,.metrics>div:last-child strong{font-size:22px}.intro h1{font-size:27px}.reset span{display:none}.reset{font-size:22px}.intro{padding:28px 0}.view-panel{max-width:100%}}@media(max-width:520px){.shell{padding:0 16px}header{height:76px;gap:10px}.brand{font-size:19px;gap:3px}.lens-logo{font-size:30px}.format-pill{font-size:11px;padding:7px}.format-pill span{display:none}.intro h1{font-size:26px;max-width:260px}.intro p{font-size:13px;max-width:260px;line-height:1.5}.eyebrow{font-size:10px}.controls{display:block;padding:22px}.panel-heading{margin-bottom:26px}.control{margin-bottom:22px}.bokeh-control{margin-top:20px}.focus-note{margin-top:20px}.metrics>div{padding:0 10px}.metrics span{font-size:8px;letter-spacing:.7px}.metrics strong,.metrics>div:last-child strong{font-size:17px}.view-top,.view-footer{padding:12px;font-size:11px}.grid-toggle{font-size:10px}.view-bottom{font-size:12px;bottom:14px;left:14px;right:14px}.view-label{top:14px;left:14px;font-size:12px}footer span:nth-child(2){display:none}.model-notes{font-size:12px}}
.range-ends,.presets button,.switch-row small,.focus-note p,.grid-toggle,.metrics span{font-size:12px}.metrics span{letter-spacing:.5px}@media(max-width:520px){.metrics span{font-size:10px}}
.sensor-control{padding-bottom:21px;margin-bottom:22px;border-bottom:1px solid var(--line)}.sensor-control label{display:block;font-size:14px;color:#d4dadb;margin-bottom:10px}.sensor-control select{width:100%;background:#242a2d;border:1px solid #3c4447;border-radius:5px;color:#e0e5e6;padding:10px;font-size:14px}.sensor-control p{font-size:12px;color:var(--muted);margin:9px 0 0}.format-pill #sensor-dimensions{margin:0;font-size:13px;color:var(--text);letter-spacing:0}@media(min-width:521px) and (max-width:800px){.sensor-control{grid-column:1/-1;margin-bottom:0}.control:first-of-type{grid-row:span 2}}
.orientation{display:flex;gap:6px;margin-top:15px}.orientation button{flex:1;background:#242a2d;color:#aeb9bd;border:1px solid #3c4447;border-radius:5px;padding:8px 5px;font-size:13px}.orientation button[aria-pressed=true]{border-color:#edaa6990;background:#edaa6918;color:var(--accent)}.center-view{border:0;background:transparent;color:var(--accent);font-size:12px;padding:5px;white-space:nowrap}.viewfinder canvas{cursor:grab;touch-action:none}.viewfinder canvas:active{cursor:grabbing}.focus-box,.view-label,.view-bottom{pointer-events:none}.viewfinder canvas:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}.view-footer{gap:10px;flex-wrap:wrap;height:auto;min-height:53px}.view-panel{position:sticky;top:20px}@media(max-width:800px){.view-panel{position:static}}
.viewfinder.portrait-view{width:min(100%,calc(72vh * var(--view-ratio)));margin-inline:auto}
.site-layout{display:grid;grid-template-columns:minmax(124px,160px) minmax(0,1512px) minmax(124px,160px);grid-template-areas:'left site right';gap:24px;justify-content:center;padding:0 24px}.site-layout>.shell{grid-area:site;width:100%;padding:0}.ad-slot{align-self:start;position:sticky;top:24px;min-width:0;margin-top:124px;padding:12px 8px;border:1px solid var(--line);border-radius:8px;background:#181c1f;overflow:hidden}.ad-left{grid-area:left}.ad-right{grid-area:right}.ad-bottom{display:none}.ad-slot>span{display:block;margin-bottom:9px;text-align:center;color:#737d81;font-size:9px;letter-spacing:1.1px}.ad-slot .adsbygoogle{min-height:250px}@media(max-width:1080px){.site-layout{grid-template-columns:1fr;grid-template-areas:'left' 'site' 'bottom';gap:18px;padding:0 16px}.ad-slot{position:static;margin:0;padding:10px}.ad-right{display:none}.ad-bottom{display:block;grid-area:bottom}.ad-slot .adsbygoogle{min-height:90px}.site-layout>.shell{min-width:0}}@media(min-width:1081px) and (max-width:1300px){.site-layout{grid-template-columns:minmax(110px,130px) minmax(0,1fr) minmax(110px,130px);gap:14px;padding:0 14px}}