@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap";:root{color:#20221f;--bg:#f2f0e9;--surface:#fcfbf7;--surface-2:#ebe8de;--text:#20221f;--muted:#6e7069;--line:#d7d3c7;--accent:#d87920;--accent-dark:#995116;--ink:#172822;--shadow:0 18px 50px #2b261a17;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;background:#f2f0e9;font-family:Manrope,sans-serif}:root[data-theme=dark]{--bg:#171a18;--surface:#202522;--surface-2:#2a302c;--text:#f4f1e8;--muted:#afb4ad;--line:#3a423d;--accent:#f0a044;--accent-dark:#ffc175;--ink:#dfece6;--shadow:0 18px 50px #0000003d;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}@media (prefers-color-scheme:dark){:root[data-theme=system]{--bg:#171a18;--surface:#202522;--surface-2:#2a302c;--text:#f4f1e8;--muted:#afb4ad;--line:#3a423d;--accent:#f0a044;--accent-dark:#ffc175;--ink:#dfece6;--shadow:0 18px 50px #0000003d;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--text);margin:0}button,input,select{font:inherit;color:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 65%,transparent);outline-offset:3px}button:disabled{opacity:.35;cursor:not-allowed}header{border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);z-index:20;align-items:center;height:72px;padding:0 max(20px,50vw - 750px);display:flex;position:sticky;top:0}.brand{color:var(--text);align-items:center;gap:10px;text-decoration:none;display:flex}.brand>span{background:var(--ink);color:var(--bg);border-radius:50%;place-items:center;width:38px;height:38px;display:grid}.brand b{font-size:20px}.brand small{letter-spacing:.12em;color:var(--muted);margin-left:2px;font:10px DM Mono}nav{gap:30px;margin:auto;display:flex}nav a,nav button{color:var(--muted);background:0 0;border:0;font-size:14px;text-decoration:none}nav a:hover,nav button:hover{color:var(--text)}.header-actions{gap:8px;display:flex}.icon-button,.theme-button{border:1px solid var(--line);background:var(--surface);border-radius:20px;justify-content:center;align-items:center;height:38px;display:flex}.icon-button{width:38px}.icon-button svg,.theme-button svg{width:16px}.theme-button{text-transform:capitalize;gap:7px;padding:0 14px;font-size:13px}main{max-width:1500px;margin:auto;padding:55px 24px 80px}.hero-copy{grid-template-columns:1.4fr .6fr;align-items:end;gap:50px;margin:0 0 36px;display:grid}.hero-copy small,.section-title small,.panel-heading small,.learn>div small{letter-spacing:.17em;color:var(--accent-dark);font:500 11px DM Mono}h1{letter-spacing:-.055em;max-width:860px;margin:10px 0 0;font-size:clamp(42px,5vw,77px);line-height:.95}h1 em{font-family:Georgia,serif;font-weight:400}.hero-copy p{color:var(--muted);margin:0 0 7px;font-size:17px;line-height:1.7}.preview{height:clamp(310px,42vw,560px);box-shadow:var(--shadow);isolation:isolate;background:linear-gradient(#93a9a0,#d8d0b9 55%,#73765c);border-radius:18px;position:relative;overflow:hidden}.preview:after{content:"";pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 120px #00000073}.preview-bg{color:#34483b;justify-content:space-around;align-items:flex-end;transition:filter .2s;display:flex;position:absolute;inset:15% -4% 0}.preview-bg svg{fill:currentColor;width:45%;height:75%}.subject{color:#18231e;transform-origin:bottom;z-index:2;position:absolute;bottom:10%;left:50%}.subject svg{stroke-width:1.2px;fill:#b8a899;width:150px;height:260px}.viewfinder{z-index:4;color:#fff;letter-spacing:.1em;justify-content:space-between;font:11px DM Mono;display:flex;position:absolute;inset:22px 25px auto}.focus-box{z-index:4;width:150px;height:190px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.focus-box i{border-color:#fff;width:28px;height:28px;position:absolute}.focus-box i:first-child{border-top:2px solid;border-left:2px solid;top:0;left:0}.focus-box i:nth-child(2){border-top:2px solid;border-right:2px solid;top:0;right:0}.focus-box i:nth-child(3){border-bottom:2px solid;border-left:2px solid;bottom:0;left:0}.focus-box i:nth-child(4){border-bottom:2px solid;border-right:2px solid;bottom:0;right:0}.preview-data{z-index:4;gap:10px;display:flex;position:absolute;bottom:22px;left:25px}.preview-data span,.preview-note{color:#fff;background:#101612ad;border:1px solid #ffffff40;border-radius:8px;align-items:center;gap:7px;padding:8px 12px;font:12px DM Mono;display:flex}.preview-note{z-index:5;position:absolute;bottom:22px;right:25px}.results{background:var(--line);border:1px solid var(--line);border-radius:14px;grid-template-columns:repeat(4,1fr);gap:1px;margin:16px 0 32px;display:grid;overflow:hidden}.result-card{background:var(--surface);padding:20px 24px}.result-card small{color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin-bottom:6px;font:10px DM Mono;display:block}.result-card strong{letter-spacing:-.04em;font-size:clamp(23px,3vw,37px)}.technical{background:var(--surface);border-top:1px solid var(--line);grid-column:1/-1;grid-template-columns:repeat(3,1fr);gap:10px 25px;padding:20px 24px;display:grid}.technical span{color:var(--muted);border-bottom:1px solid var(--line);justify-content:space-between;padding:8px 0;font-size:13px;display:flex}.technical b{color:var(--text)}.technical p{color:var(--muted);grid-column:span 3;margin:8px 0 0}.workspace{grid-template-columns:minmax(0,1.5fr) minmax(370px,.7fr);align-items:start;gap:20px;display:grid}.scene-card,.controls-card,.compare,.saved,.learn{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:16px}.scene-card{padding:28px;position:sticky;top:92px}.section-title,.panel-heading{justify-content:space-between;align-items:center;display:flex}.section-title h2,.panel-heading h2,.learn h2{letter-spacing:-.03em;margin:5px 0 0;font-size:25px}.section-title>span{color:var(--muted);font-size:12px}.scene{touch-action:none;width:100%;height:auto;margin:35px 0 5px}.scene line{stroke:var(--line);stroke-width:2px}.scene .boundary{stroke:#b6a279;stroke-dasharray:7}.scene .fov{fill:color-mix(in srgb,var(--ink) 7%,transparent);stroke:color-mix(in srgb,var(--ink) 25%,transparent)}.scene .draggable{cursor:ew-resize;color:var(--ink)}.scene-legend{color:var(--muted);gap:20px;font-size:11px;display:flex}.scene-legend span{align-items:center;gap:6px;display:flex}.scene-legend i{background:var(--accent);width:14px;height:4px}.scene-legend .legend-sharp{background:#e6b45d66;height:10px}.controls-card{padding:28px}.segmented{background:var(--surface-2);border-radius:10px;padding:3px;display:flex}.segmented button{background:0 0;border:0;border-radius:8px;padding:7px 11px;font-size:12px}.segmented .active{background:var(--surface);box-shadow:0 2px 8px #0001}.select-label,.control{margin-top:25px;font-size:13px;font-weight:700;display:block}.select-label select,.select-row select,.compare-controls select{border:1px solid var(--line);background:var(--surface-2);border-radius:9px;width:100%;margin-top:8px;padding:12px;display:block}.info{color:var(--muted);vertical-align:middle;margin-left:5px;display:inline-flex;position:relative}.info>span{background:var(--ink);width:230px;color:var(--bg);z-index:10;border-radius:8px;padding:10px;font-weight:400;line-height:1.4;display:none;position:absolute;bottom:25px;left:-100px}.info:hover>span,.info:focus>span{display:block}.custom-sensor{grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;display:grid}.custom-sensor label,.compare-controls label{color:var(--muted);font-size:12px}.custom-sensor input,.compare-controls input{border:1px solid var(--line);background:var(--surface-2);border-radius:8px;width:100%;margin-top:5px;padding:10px}.control-head{justify-content:space-between;align-items:center;display:flex}.control-head input{border:1px solid var(--line);background:var(--surface-2);text-align:right;border-radius:8px;width:95px;padding:8px}.control>input[type=range]{width:100%;accent-color:var(--accent);margin:14px 0 8px}.chips{flex-wrap:wrap;gap:5px;display:flex}.chips button{border:1px solid var(--line);background:0 0;border-radius:14px;padding:4px 7px;font:10px DM Mono}.chips button.selected{background:var(--ink);color:var(--bg);border-color:var(--ink)}.plain-language{background:color-mix(in srgb,var(--accent) 10%,var(--surface));border-left:3px solid var(--accent);margin-top:18px;padding:13px}.plain-language p{color:var(--muted);margin:4px 0;font-size:12px;line-height:1.5}.control-actions,.save-actions{gap:8px;margin-top:20px;display:flex}.control-actions button,.save-actions button,.compare button,.saved button{border:1px solid var(--line);background:var(--surface-2);border-radius:8px;justify-content:center;align-items:center;gap:6px;padding:10px 12px;font-size:12px;display:flex}.control-actions button:first-child{background:var(--ink);color:var(--bg);flex:1}.control-actions svg,.save-actions svg,.saved svg{width:15px}.select-row{grid-template-columns:.7fr 1.3fr;gap:10px;margin-top:20px;display:grid}.select-row label{color:var(--muted);font-size:11px}.save-actions button{flex:1}.status{color:var(--accent-dark);margin:10px 0 0;font-size:12px}.compare,.saved,.learn{margin-top:24px;padding:28px}.compare-grid{grid-template-columns:1fr 230px 1fr;gap:16px;margin-top:20px;display:grid}.compare-card{min-width:0}.compare-card>.preview{height:230px;margin:10px 0}.compare-card .subject svg{height:120px}.compare-card .focus-box{width:70px;height:100px}.compare-card .results{grid-template-columns:1fr 1fr;margin-bottom:10px}.compare-card .result-card{padding:10px}.compare-card .result-card strong{font-size:18px}.compare-card p{color:var(--muted);font-size:12px}.compare-controls{background:var(--surface-2);border-radius:10px;flex-direction:column;gap:12px;padding:14px;display:flex}.saved-grid{grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px;display:grid}.saved article{border:1px solid var(--line);border-radius:10px;padding:17px}.saved h3{margin:0}.saved article p,.empty{color:var(--muted);font-size:13px}.saved article>div{gap:5px;display:flex}.saved article>div button:first-child{background:var(--ink);color:var(--bg);flex:1}.empty{text-align:center;padding:30px}.learn{grid-template-columns:1fr 1.5fr;gap:0 40px;display:grid;position:relative;overflow:hidden}.learn>div:first-child{grid-row:1/4}.learn details{border-bottom:1px solid var(--line);z-index:2;padding:14px 0}.learn summary{cursor:pointer;justify-content:space-between;font-weight:700;display:flex}.learn summary svg{width:17px}.learn details p{color:var(--muted);font-size:14px;line-height:1.6}.learn-icon{color:var(--surface-2);position:absolute;bottom:-50px;left:50px}footer{border-top:1px solid var(--line);max-width:1500px;color:var(--muted);justify-content:space-between;margin:auto;padding:25px;font:11px DM Mono;display:flex}@media (width<=900px){header{padding:0 16px}.brand small,nav{display:none}main{padding:30px 14px 60px}.hero-copy{grid-template-columns:1fr;gap:15px}.hero-copy p{font-size:14px}.workspace{grid-template-columns:1fr}.scene-card{position:static}.results{grid-template-columns:1fr 1fr}.workspace .scene-card{order:1}.workspace .controls-card{order:2}.compare-grid{grid-template-columns:1fr}.compare-controls{order:2}.compare-card:last-child{order:3}.saved-grid{grid-template-columns:1fr 1fr}.learn{grid-template-columns:1fr}.learn>div:first-child{grid-row:auto}.learn-icon{display:none}}@media (width<=520px){header{height:62px}.theme-button span,.icon-button{display:none}main{padding-inline:10px}.hero-copy{margin-bottom:24px}h1{font-size:42px}.preview{border-radius:12px;height:330px}.subject svg{width:110px}.viewfinder{inset:15px}.preview-note{font-size:9px;bottom:12px;right:12px}.preview-data{bottom:12px;left:12px}.preview-data span{padding:7px;font-size:9px}.results{margin-top:10px}.result-card{padding:14px}.result-card strong{font-size:24px}.technical{grid-template-columns:1fr}.technical p{grid-column:1}.scene-card,.controls-card,.compare,.saved,.learn{padding:18px}.scene-card{overflow:hidden}.scene{width:140%;margin-left:-20%}.scene-legend{flex-wrap:wrap}.panel-heading{align-items:flex-start;gap:10px}.segmented{flex-direction:column}.select-row{grid-template-columns:1fr}.save-actions{background:var(--surface);z-index:5;margin:14px -8px -8px;padding:8px;position:sticky;bottom:8px}.saved-grid{grid-template-columns:1fr}.learn{gap:10px}.custom-sensor{grid-template-columns:1fr}.brand b{font-size:17px}footer{padding:20px 14px}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}.learn>div:first-child{z-index:2;position:relative}.learn-icon{z-index:1;pointer-events:none;bottom:-92px;left:42px}.learn-icon svg{width:190px;height:190px}main{padding-top:22px}.hero-copy{grid-template-columns:1fr auto;align-items:center;gap:28px;margin-bottom:16px}.hero-copy h1{margin-top:5px;font-size:clamp(31px,3.6vw,54px)}.hero-copy p{max-width:430px;font-size:14px;line-height:1.5}.workspace{grid-template-columns:minmax(0,1.55fr) minmax(350px,.65fr);gap:14px}.scene-card{box-shadow:none;padding:18px;position:sticky;top:86px}.scene-toolbar{justify-content:space-between;align-items:center;margin-bottom:4px;display:flex}.scene-toolbar strong{letter-spacing:-.03em;font-size:24px}.scene-toolbar strong span{color:var(--accent-dark);font-weight:500}.scene-toolbar>span{color:var(--muted);font-size:11px}.scene{width:100%;max-height:520px;margin:0}.scene .photographer,.scene .subject-silhouette{fill:var(--ink);stroke:none}.scene .subject-silhouette{cursor:ew-resize}.scene .ground{stroke:var(--line)}.scene .distance-label{fill:var(--text);font-size:16px;font-weight:700}.scene .sharp-zone{stroke:color-mix(in srgb,var(--accent) 50%,transparent);stroke-width:1px}.controls-card{box-shadow:none;padding:18px}.panel-heading h2{font-size:21px}.select-label,.control{margin-top:14px}.select-label select{margin-top:5px;padding:9px}.control-head input{padding:6px}.control>input[type=range]{margin:9px 0 6px}.chips{scrollbar-width:thin;max-height:50px;overflow:auto}.chips button{padding:3px 6px}.plain-language{margin-top:11px;padding:9px}.control-actions,.save-actions{margin-top:11px}.control-actions button,.save-actions button{padding:8px}.select-row{margin-top:11px}.select-row select{padding:8px}.results{margin:14px 0 18px}.result-card{padding:15px 20px}.preview-disclosure{background:var(--surface);border:1px solid var(--line);border-radius:14px;margin-bottom:24px;padding:0 18px}.preview-disclosure summary{cursor:pointer;justify-content:space-between;align-items:center;padding:15px 0;font-weight:700;display:flex}.preview-disclosure summary svg{width:18px}.preview-disclosure[open] summary svg{transform:rotate(180deg)}.preview-disclosure .preview{height:min(430px,55vw);margin-bottom:18px}@media (width<=900px){main{padding-top:18px}.hero-copy,.workspace{grid-template-columns:1fr}.scene-card{position:static}.controls-card{padding:18px}.chips{max-height:none}.results{margin-top:14px}}@media (width<=520px){.hero-copy p{display:none}.hero-copy h1{font-size:32px}.scene-card{padding:10px}.scene-toolbar strong{font-size:19px}.scene-toolbar>span{text-align:right;max-width:120px}.scene{width:130%;max-height:none;margin-left:-15%}.scene-legend{padding:0 6px}.controls-card{padding:14px}.preview-disclosure{padding:0 12px}}.scene .camera-rig rect,.scene .camera-rig circle{fill:var(--ink);stroke:none}.scene .camera-rig path{fill:none;stroke:var(--ink);stroke-width:8px;stroke-linecap:round}.scene .subject-marker>circle:first-child,.scene .subject-marker>path{fill:var(--ink);stroke:none}.scene .subject-marker .drag-handle{fill:#0000;stroke:color-mix(in srgb,var(--accent) 0%,transparent);stroke-width:2px}.scene .subject-marker:hover .drag-handle{stroke:color-mix(in srgb,var(--accent) 55%,transparent)}.scene .background-marker path{fill:none;stroke:var(--muted);stroke-width:8px;stroke-linecap:round;stroke-linejoin:round}.scene .fov{fill:color-mix(in srgb,var(--ink) 5%,transparent);stroke:color-mix(in srgb,var(--ink) 20%,transparent);stroke-width:1px}.scene .boundary{stroke:color-mix(in srgb,var(--accent) 55%,var(--line));stroke-width:2px;stroke-dasharray:7}.scene .focus-line{stroke:var(--accent);stroke-width:3px}.scene .ground{stroke:var(--line);stroke-width:2px}.scene text{fill:var(--muted);font:11px DM Mono}.scene .distance-label{fill:var(--text);font:700 16px Manrope}.scene .subject-marker g circle,.scene .subject-marker g path,.scene .subject-product rect{fill:var(--ink);stroke:none}.scene .subject-product>path,.scene .subject-flower>path{stroke-width:9px;stroke-linecap:round;stroke-linejoin:round;fill:none!important;stroke:var(--ink)!important}.scene .subject-flower>circle:not(.drag-handle){fill:var(--ink);stroke:none}.preview-disclosure:focus-within{outline:none}.preview-disclosure summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:10px}.preview-disclosure[open]{padding-bottom:18px}.preview-disclosure[open] .preview{margin:0}.preview .subject{bottom:17%}.preview .subject svg{width:92px;height:132px;display:block}.preview .focus-box{width:132px;height:148px;top:auto;bottom:14%;transform:translate(-50%)}.preview .focus-box i{width:22px;height:22px}@media (width<=520px){.preview .subject{bottom:18%}.preview .subject svg{width:78px;height:112px}.preview .focus-box{width:112px;height:126px;bottom:15%}}
