@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&display=swap');
:root{--primary:#e6c780;--primary-dark:#b29453;--secondary:#9bdcc5;--accent:#f4dda7;--glass-border:#bcab725c;--text-primary:#e8ece6;--text-secondary:#b4c5c9;color-scheme:dark;scroll-behavior:smooth;scroll-padding-top:28px}
body{background:#0b1216;color:var(--text-primary)}body::before{background:radial-gradient(ellipse at 15% 35%,#6297811c,transparent 55%),radial-gradient(ellipse at 88% 20%,#b48bcb18,transparent 52%),radial-gradient(ellipse at 50% 98%,#ae743c10,transparent 60%);animation:none}body::after{opacity:.45;animation-duration:45s}
.container{max-width:1500px;padding:108px 28px 60px}.back-button{font-size:12px;padding:10px 16px;top:18px;left:22px;background:linear-gradient(130deg,#22322def,#101b20ef);border-color:#d6bf7c70;box-shadow:inset 0 1px #f4dfa329,0 0 25px #d7b96618}
.photo-hero{display:grid;grid-template-columns:1.8fr 1fr;align-items:center;gap:22px;padding:38px;border:1px solid #d1bb7b80;border-radius:27px;background:radial-gradient(ellipse at 0 0,#80d1b21c,transparent 60%),linear-gradient(120deg,#273732bb,#17222aca);box-shadow:inset 0 1px #f4dfb036,0 0 38px #b9d9a817,0 24px 70px #0006;margin-bottom:22px}
.photo-hero h1{font:600 clamp(32px,3.8vw,56px)/1.17 'Playfair Display',Georgia,serif;color:#ece3c6;background:none;-webkit-text-fill-color:initial;text-align:left;text-shadow:0 0 28px #d3bd8030;margin:14px 0 19px}.photo-hero .subtitle{font:400 15px/1.9 Inter,sans-serif;text-align:left;margin:0;color:#b9cac9}.photo-hero-diagram{width:100%;max-height:245px;filter:drop-shadow(0 0 12px #90e7c93b)}
.photo-eyebrow{font:600 10px/1.7 Inter,sans-serif;letter-spacing:.13em;text-transform:uppercase;color:#c8b77f}.photo-route{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:22px 0 42px}.photo-route a{display:grid;grid-template-columns:40px 1fr;gap:5px 11px;padding:17px 20px;border:1px solid #a1c6b746;border-radius:16px;background:linear-gradient(140deg,#28433a91,#142129bc);color:#dcd7b9;text-decoration:none;box-shadow:inset 0 1px #eefed816,0 10px 25px #0004;transition:box-shadow .35s,border-color .35s}.photo-route a:hover{border-color:#b7e3cba8;box-shadow:0 0 25px #9fe1bc25}.photo-route b{grid-row:span 2;font:30px Georgia;color:#a3e4c9;text-shadow:0 0 16px #95e1c94d}.photo-route span{font-size:11px;color:#aac0c5}.photo-route strong{font-size:15px}
.demo-section{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:radial-gradient(ellipse at 0 0,#8acdb00b,transparent 60%),linear-gradient(140deg,#202f2ed6,#111f28e8);border-color:#bfaf7452;box-shadow:inset 0 1px #e9e2b223,0 13px 36px #0005,0 0 23px #97c5a20a;overflow:visible}.demo-section::before{display:none}.demo-section h2{font:600 27px/1.25 'Playfair Display',Georgia,serif;color:#e4d29e;text-shadow:0 0 25px #d9bd7030;letter-spacing:-.02em}.photo-study{padding:30px;margin-bottom:32px;transition:border-color .45s,box-shadow .45s}.photo-study.photo-in-view{border-color:#a5d8bd85;box-shadow:inset 0 1px #e2ffe027,0 0 30px #75dabd12,0 17px 45px #0005}
.photo-heading{display:grid;grid-template-columns:57px 1fr;gap:18px;align-items:start;margin-bottom:23px}.photo-icon{display:grid;place-items:center;width:55px;height:63px;font:36px 'Playfair Display',serif;color:#a1e5c9;border:1px solid #a7e5c473;border-radius:15px;background:radial-gradient(ellipse at 25% 10%,#9af2cd25,transparent 85%);box-shadow:0 0 22px #8ad6b51a,inset 0 1px #d4ffec33;text-shadow:0 0 15px #a3f0ce55}.photo-heading h2{margin:6px 0 9px}.photo-heading p,.photo-section-heading p{font:400 14px/1.8 Inter,sans-serif;color:#b8c7ca;max-width:950px}
.photo-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:20px}.photo-control{display:block;position:relative;font:500 12px/1.5 Inter,sans-serif;color:#c4d4d6;background:linear-gradient(125deg,#749a9b15,#1020286b);padding:12px 13px;border:1px solid #a3c3bd37;border-radius:12px}.photo-control output{float:right;color:#e4cc8e;font-variant-numeric:tabular-nums;margin-left:8px}.photo-control input{display:block;width:100%}.photo-control select{display:block;width:100%;margin-top:9px;font-size:12px;padding:8px;color:#d9e9e2;background:#182c2b;border:1px solid #b1d8bf4f;border-radius:8px}
input[type=range]{appearance:none;height:5px;border-radius:10px;background:linear-gradient(90deg,#568f7a,#344951);margin:16px 0 6px}input[type=range]::-webkit-slider-thumb{appearance:none;width:15px;height:15px;background:#c1e9bf;border:1px solid #eaffd9;border-radius:50%;box-shadow:0 0 13px #b7e6ac55;cursor:pointer}input[type=range]::-moz-range-thumb{width:15px;height:15px;background:#c1e9bf;border:1px solid #eaffd9;border-radius:50%;box-shadow:0 0 13px #b7e6ac55}
.photo-grid{display:grid;gap:14px;margin:14px 0}.photo-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.photo-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.photo-grid.one{grid-template-columns:1fr}.photo-figure{margin:0;border:1px solid #acc9c148;border-radius:15px;background:#080f15;overflow:hidden;box-shadow:0 9px 24px #0004,inset 0 1px #e5ffe817}.photo-figure figcaption{padding:12px 14px;background:linear-gradient(115deg,#23423983,#18282d73);min-height:68px}.photo-figure figcaption strong{font:600 13px/1.55 Inter,sans-serif;display:block;color:#e1d6b3}.photo-figure figcaption span{font:11px/1.65 Inter,sans-serif;display:block;color:#aabfc5;margin-top:3px}.photo-figure canvas{display:block;width:100%;height:auto;border:0;border-radius:0;box-shadow:none;image-rendering:auto;background:#090f17}.photo-figure canvas{max-width:none;max-height:none!important;object-fit:contain}.photo-figure canvas[data-canvas=epi],.photo-figure canvas[data-canvas=shear]{height:auto;aspect-ratio:11/3;image-rendering:auto}.photo-figure canvas[data-canvas=matches]{height:auto;aspect-ratio:598/194}
.photo-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0}.photo-metrics>div{padding:13px 16px;border-left:2px solid #99dcb78c;border-radius:9px;background:linear-gradient(120deg,#86d6b418,#0e1c24a6);box-shadow:-5px 0 16px #a5e0b914}.photo-metrics b{display:block;color:#a4e1c6;font:600 19px/1.5 Inter,sans-serif}.photo-metrics span{font:11px/1.6 Inter,sans-serif;color:#afc2c5}
.photo-reading{display:grid;grid-template-columns:1.55fr 1fr;gap:20px;align-items:center;margin:20px 0;font:13px/1.9 Inter,sans-serif;color:#b8cbca}.photo-reading strong{color:#e6dab4}.photo-formula{font:13px/1.85 ui-monospace,monospace;color:#cbb0ee;background:#71618318;border:1px solid #baa0dd38;padding:16px;border-radius:12px;overflow-wrap:anywhere}
.photo-detail{background:#ad9bc70a;border:1px solid #b8a4ce35;border-radius:12px;padding:13px 17px;margin:15px 0;color:#b6c8cc;font:12px/1.9 Inter,sans-serif}.photo-detail summary{color:#c8b8e2;font-weight:600;cursor:pointer}.photo-detail p{margin-top:12px}.photo-detail a{display:inline-block;padding:6px 10px;margin:12px 8px 0 0;border:1px solid #9acbb74f;border-radius:8px;background:#5c9d8220;color:#b6e5cf;text-decoration:none}.photo-detail a:hover{border-color:#b6e5cf;box-shadow:0 0 19px #91dfb82d}
.photo-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:16px}.photo-actions button,button{background:linear-gradient(130deg,#3a5c45,#1f3438);color:#e7e0bd;border:1px solid #c4d89970;border-radius:10px;padding:9px 14px;font-size:12px;box-shadow:inset 0 1px #e3eeb322,0 4px 15px #0003;text-transform:none;letter-spacing:normal}.photo-actions button:hover,button:hover{border-color:#eddfa5;box-shadow:0 0 22px #d4d38e29}.photo-actions span{font:11px/1.7 Inter,sans-serif;color:#a1b6bc}.photo-section-heading{padding:20px 4px 30px;margin-top:35px}.photo-section-heading h2{font:600 34px/1.3 'Playfair Display',serif;color:#e6d29a;margin:8px 0 13px}
.info-box{font-size:13px;background:#112126aa;border-color:#a2c9b13d}.canvas-wrapper{border-color:#a6c6b449;background:#101c23b8;box-shadow:0 10px 26px #0004}.canvas-label{color:#c9d7c8;font-size:12px}.controls{gap:12px}.control-group{background:#bdd6c60b;border:1px solid #a6c5b231;border-radius:11px;padding:12px}.control-group label{font-size:12px}.controls select{background:#172b29;color:#d9e8df;border:1px solid #a5c0a953}
:focus-visible{outline:2px solid #edd898;outline-offset:4px}.photo-document-hidden::after,.photo-document-hidden .canvas-wrapper::after,.photo-document-hidden .canvas-wrapper.template-active{animation-play-state:paused!important}
@media(max-width:900px){.photo-hero{grid-template-columns:1fr;padding:28px}.photo-hero-diagram{max-height:180px}.photo-route{grid-template-columns:repeat(2,1fr)}.photo-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.photo-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.photo-reading{grid-template-columns:1fr;gap:12px}.photo-figure figcaption{padding:10px;min-height:87px}}
@media(max-width:600px){.container{padding:85px 12px 30px}.photo-hero{padding:24px 19px}.photo-hero h1{font-size:34px}.photo-route a{padding:12px;grid-template-columns:27px 1fr}.photo-route b{font-size:24px}.demo-section,.photo-study{padding:19px 14px}.photo-heading{grid-template-columns:42px 1fr;gap:12px}.photo-icon{width:42px;height:54px;font-size:29px}.photo-heading h2{font-size:24px}.photo-heading p{font-size:13px}.photo-grid.three,.photo-grid.two{grid-template-columns:1fr}.photo-figure figcaption{min-height:0}.photo-controls{gap:8px}.photo-control{padding:10px}.photo-metrics{gap:7px}.photo-metrics>div{padding:10px}.photo-metrics b{font-size:16px}.photo-metrics span{font-size:10px}.photo-detail{padding:11px 13px}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}body::before,body::after,.demo-section::before,.canvas-wrapper::after,.canvas-wrapper.template-active{animation:none!important}*{transition:none!important}}