:root{font-family:Inter,"Segoe UI",Arial,sans-serif;color:#e6f0e9;background:#081410;font-synthesis:none;color-scheme:dark;--muted:#afc4b7;--accent:#b8deba;--line:#30473a;--panel:#102219}
*{box-sizing:border-box}body{margin:0}a{color:inherit;text-underline-offset:.25em}button{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.5}:focus-visible{outline:3px solid #d9edbd;outline-offset:4px}[hidden]{display:none!important}
.site-header{height:76px;max-width:1520px;margin:auto;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #23392d}.brand{font-weight:750;font-size:1.1rem;display:flex;align-items:center;gap:.6rem;text-decoration:none;letter-spacing:.015em}.brand-mark{width:32px;height:32px;border-radius:9px;background:#b4dec2;color:#17332b;display:grid;place-items:center;font-size:1.6rem;font-weight:400}.private-note{font-size:.875rem;color:var(--muted)}main{max-width:1440px;margin:auto;padding:40px 5vw 32px}.intro{display:flex;justify-content:space-between;gap:30px;align-items:center;margin-bottom:28px}.eyebrow{text-transform:uppercase;letter-spacing:.13em;font-size:.75rem;color:#b8dbbd;margin:0 0 12px;font-weight:650}h1{font-size:clamp(2.1rem,3.75vw,3.75rem);line-height:1.08;letter-spacing:-.045em;font-weight:570;margin:0 0 17px}h1 em{font-family:Georgia,serif;color:#c5deb5;font-weight:400}.intro-copy{font-size:1rem;line-height:1.6;color:var(--muted);margin:0;max-width:620px}.prototype-badge{border-left:1px solid #4b6348;padding:7px 0 7px 18px;line-height:1.7;font-size:.875rem;color:#d9e7d2;flex-shrink:0}.prototype-badge span{display:none}.prototype-badge small{color:var(--muted);font-size:.8125rem}.exhibit{border:1px solid #334b3b;border-radius:18px;overflow:hidden;background:var(--panel);box-shadow:0 25px 90px #0002}.exhibit-toolbar{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid #304235;background:#102017;gap:16px}.view-tabs{display:flex;gap:5px;align-items:center;flex-wrap:wrap}.view-tab{border:1px solid transparent;border-radius:7px;background:transparent;color:#b6c7b8;padding:10px 13px;font-size:.875rem}.view-tab[aria-pressed=true]{background:#294332;color:#f0f3df;border-color:#50664b}.stage-label{font-size:.8125rem;color:#98b09b}.stage-wrap{height:clamp(390px,53vh,590px);min-height:390px;position:relative;isolation:isolate;background:radial-gradient(ellipse at 47% 43%,#52604a 0%,#2c3c2b 33%,#18291d 67%,#112017 100%)}.stage,.still-view{position:absolute;inset:0}.stage canvas{display:block;width:100%;height:100%;outline-offset:-5px}.still-view{display:grid;place-items:center;background:#0e1c16}.still-view img{width:100%;height:100%;min-width:0;min-height:0;object-fit:contain}.loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;color:#e5eddd;background:#183020c9;font-size:.95rem;z-index:3}.loading-dot{width:9px;height:9px;border-radius:50%;background:#cbe8b4;box-shadow:0 0 15px #dceebe55}.stage-controls{position:absolute;bottom:20px;left:22px;display:flex;gap:9px;z-index:2}.orbit-buttons,.zoom-buttons{display:flex;gap:2px;background:#12231ccb;padding:3px;border:1px solid #61725985;border-radius:8px;backdrop-filter:blur(10px)}.stage-controls button{width:36px;height:36px;border:0;background:transparent;color:#edf0dc;font-size:1.12rem;border-radius:5px}.stage-controls button:hover{background:#526548}.stage-corner{position:absolute;bottom:29px;right:23px;color:#d2dec9;font-size:.75rem;max-width:220px;text-align:right;text-shadow:0 1px 3px #000;background:#14211b66;border-radius:4px;padding:5px 7px}.camera-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:15px 20px;background:#14281d;border-top:1px solid #3d513c}.camera-presets{display:flex;gap:7px;flex-wrap:wrap}.camera-preset{padding:12px 17px;background:transparent;color:#c1d2c0;border:1px solid transparent;border-radius:7px;font-size:.9rem;white-space:nowrap}.camera-preset span{color:#8aa186;font-size:.72rem;margin-right:7px;font-variant-numeric:tabular-nums}.camera-preset[aria-pressed=true]{background:#c3dfb8;color:#1b3527;border-color:#c3dfb8}.camera-preset[aria-pressed=true] span{color:#415f43}.camera-preset:hover:not([aria-pressed=true]){background:#223e2b;border-color:#4b6549}.reset-button{background:none;color:#bbccba;border:1px solid #405e44;border-radius:7px;padding:11px 13px;font-size:.875rem;white-space:nowrap}.reset-button:hover{background:#28432f}.viewer-footer{display:flex;justify-content:space-between;gap:20px;padding:12px 22px;background:#102219;border-top:1px solid #263f2d;align-items:center}.viewer-footer p{margin:0;font-size:.8125rem;line-height:1.5;color:#abc0ae}.viewer-footer .view-status{color:#dce8cd;text-align:right;min-width:130px}.notes{margin-top:28px;display:grid;grid-template-columns:1fr 1.2fr auto;gap:35px;align-items:start}.notes .eyebrow{margin-bottom:8px;font-size:.7rem}.notes p:not(.eyebrow){font-size:.875rem;line-height:1.65;margin:0;color:var(--muted)}.case-link{align-self:center;white-space:nowrap;font-size:.875rem;color:#d0e0ca;display:inline-flex;gap:18px;line-height:2}.image-failed{position:absolute;max-width:420px;line-height:1.7;padding:22px}.fallback-caption{position:absolute;bottom:18px;left:20px;right:20px;background:#0b1a12df;padding:11px 14px;margin:0;border:1px solid #456046;border-radius:6px;font-size:.875rem;line-height:1.5}
@media(min-width:1650px){main{padding-top:50px}.stage-wrap{height:590px}.intro{margin-bottom:34px}}@media(max-width:850px){main{padding:28px 4vw}.site-header{padding:0 4vw;height:65px}.intro{gap:20px}.prototype-badge{max-width:180px;font-size:.8125rem}.stage-label{display:none}.stage-wrap{height:450px;min-height:350px}.camera-row{padding:13px 12px;gap:9px}.camera-preset{padding:11px 12px}.notes{grid-template-columns:1fr 1fr;gap:20px}.case-link{grid-column:1/-1}.stage-corner{max-width:175px}.viewer-footer{align-items:start}}@media(max-width:600px){.private-note{font-size:.75rem}.intro{display:block;margin-bottom:22px}.intro-copy{font-size:.9375rem}.prototype-badge{border:0;padding:0;margin:15px 0 0;max-width:none;line-height:1.45}.prototype-badge br{display:none}.prototype-badge span{display:inline;margin-right:6px}.prototype-badge small:before{content:" · "}h1 em{display:block}.exhibit{border-radius:12px}.exhibit-toolbar{padding:9px 10px;height:auto;min-height:58px}.view-tab{font-size:.8125rem;padding:10px 12px}.stage-wrap{height:390px;min-height:330px}.stage-controls{left:12px;bottom:14px}.stage-controls button{width:34px;height:36px}.stage-corner{top:12px;bottom:auto;right:12px;max-width:none;font-size:.7rem}.camera-row{align-items:stretch;flex-wrap:wrap}.camera-presets{flex-wrap:nowrap;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;width:100%}.camera-preset{font-size:.8125rem;padding:10px 5px}.camera-preset span{display:block;margin:0 0 4px}.reset-button{width:100%;padding:8px}.viewer-footer{display:block;padding:12px 14px}.viewer-footer p{font-size:.75rem}.viewer-footer .view-status{text-align:left;margin-top:5px}.notes{display:block;margin-top:24px}.notes>div{margin-bottom:20px}.case-link{margin-top:0}.stage canvas{touch-action:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important}}

.eyebrow,.prototype-badge small,.stage-label,.stage-corner,.viewer-footer p,.viewer-footer .view-status,.notes .eyebrow,.private-note,.camera-preset span,.view-tab,.camera-preset{font-size:.875rem}.stage-controls button{width:40px;height:40px}@media(max-width:600px){.stage-controls button{width:38px;height:42px}.stage-corner{font-size:.875rem}.viewer-footer p{font-size:.875rem}.camera-preset{white-space:normal}}

.site-header{height:64px}main{padding-top:26px}.intro{margin-bottom:22px}.intro .eyebrow{margin-bottom:9px}h1{font-size:clamp(2.1rem,3.4vw,3.25rem);margin-bottom:12px}.stage-wrap{height:clamp(330px,46vh,500px);min-height:330px}.camera-row{border-top:0;border-bottom:1px solid #3d513c}.prototype-badge{font-size:.875rem}@media(max-width:850px){.prototype-badge{font-size:.875rem}.stage-wrap{height:390px}}@media(max-width:600px){main{padding-top:24px}.intro{margin-bottom:18px}.stage-wrap{height:360px;min-height:330px}.stage-controls button{width:40px;height:44px}.camera-row{padding:9px 11px}.camera-preset{padding:8px 5px}.camera-preset span{display:none}.reset-button{padding:7px}.intro-copy{font-size:.9375rem}.site-header{height:60px}}

/* Let enlarged text wrap; compact the introduction before the phone exhibit. */
.site-header{height:auto;min-height:64px;padding-top:12px;padding-bottom:12px;flex-wrap:wrap;gap:8px 18px}.brand{flex-shrink:0}.private-note{min-width:0;max-width:100%;line-height:1.45;margin-left:auto}.case-link{white-space:normal;max-width:100%;min-width:0}.case-link span{flex-shrink:0}
@media(max-width:600px){.site-header{min-height:52px;padding-top:9px;padding-bottom:9px;gap:7px 10px}main{padding-top:16px}.intro{margin-bottom:12px}.intro>.eyebrow,.intro .eyebrow{display:none}h1{font-size:2rem;line-height:1.05;margin-bottom:9px}.intro-copy{font-size:.9rem;line-height:1.45}.prototype-badge{margin-top:10px;font-size:.8125rem}.prototype-badge small{font-size:.8125rem}.exhibit-toolbar{min-height:50px;padding:6px}.view-tabs{gap:2px}.view-tab{padding:9px 10px}.camera-row{display:grid;grid-template-columns:minmax(0,1fr) auto;padding:6px;gap:5px}.camera-presets{width:auto;min-width:0;gap:2px}.camera-preset{padding:8px 4px;font-size:.8125rem;line-height:1.25;min-width:0}.reset-button{width:3.5rem;white-space:normal;padding:7px 3px;font-size:.75rem;line-height:1.2}.stage-wrap{height:clamp(270px,45svh,360px);min-height:270px}.stage-corner{font-size:.8125rem}.viewer-footer{padding:10px 12px}}
.brand-mark{width:2rem;height:2rem;flex-shrink:0;line-height:1}
@media(max-width:600px){.camera-row{display:flex;flex-wrap:wrap}.camera-presets{flex:1 1 12rem;grid-template-columns:repeat(auto-fit,minmax(3.6rem,1fr))}.reset-button{flex:0 0 auto}}

.skip{position:absolute;left:1rem;top:-10rem;z-index:10;background:#b8deba;color:#081410;padding:1rem}.skip:focus{top:1rem}.no-script{max-width:70rem;margin:2rem auto;padding:1rem}.no-script img{width:100%;height:auto}

/* A distinct physical action, with a fixed overview and labelled live close-up. */
.exhibit-toolbar{height:auto;min-height:60px;flex-wrap:wrap;padding-block:8px}.exhibit-toolbar .stage-label{margin-left:auto}.tilt-mode{border:1px solid #92b992;border-radius:7px;padding:10px 15px;background:#bdddae;color:#102719;font-weight:650;font-size:.875rem;margin-left:auto;min-height:42px}.tilt-mode[aria-pressed=true]{background:#294332;color:#edf3e5}.tilt-controls{display:grid;grid-template-columns:minmax(180px,1fr) auto;align-items:center;gap:8px 22px;padding:14px 20px;background:#14281d;border-bottom:1px solid #3d513c}.tilt-controls label{display:grid;grid-template-columns:1fr auto;gap:6px;font-size:.9375rem}.tilt-controls output{font-variant-numeric:tabular-nums;color:#d3e7b7}.tilt-controls input{grid-column:1/-1;width:100%;accent-color:#b8deba;min-height:30px;cursor:pointer;margin:0}.tilt-actions{display:flex;gap:7px;flex-wrap:wrap}.tilt-actions button{background:#223e2b;color:#e4efdb;border:1px solid #536a4e;border-radius:7px;padding:10px 12px;min-height:42px;font-size:.875rem}.tilt-controls p{grid-column:1/-1;margin:0;font-size:.8125rem;line-height:1.45;color:#b9cdb8}.tilting .camera-row{display:none}.tilting .stage-corner{top:12px;bottom:auto}.motion-readout{padding:12px 20px;background:#203525;display:flex;align-items:center;gap:16px;justify-content:space-between}.motion-readout p{margin:0;font-size:.9375rem;line-height:1.5}.motion-readout>span{font-size:.8125rem;color:#b9cdb8;flex-shrink:0}.drop-inset-label{position:absolute;right:12px;background:#10251be8;border:1px solid #75956a;padding:5px 6px;text-align:center;color:#e4efdb;font-size:.75rem;pointer-events:none;z-index:1}.drop-locator{position:absolute;transform:translate(-50%,-140%);background:#10251bdc;color:#e7f4d8;border-radius:4px;padding:2px 6px;font-size:.75rem;white-space:nowrap;pointer-events:none;text-shadow:0 1px #000;z-index:1}
@media(max-width:850px){.tilt-controls{grid-template-columns:1fr;gap:6px;padding:10px 12px}.tilt-actions{justify-content:flex-start}.motion-readout{display:block;padding:10px 12px}.motion-readout>span{display:block;margin-top:3px}.tilting .intro-copy,.tilting .prototype-badge,.tilting .intro .eyebrow{display:none}.tilting h1{font-size:1.6rem;margin-bottom:0}.tilting h1 em{display:inline}.tilting .intro{margin-bottom:12px}.exhibit-toolbar .stage-label{display:none}}
@media(max-width:600px){.tilt-mode{padding:9px 10px;font-size:.8125rem}.view-tabs{flex:1 1 auto}.exhibit-toolbar{gap:4px;padding:6px}.view-tab{padding:8px}.tilt-actions{gap:4px}.tilt-actions button{flex:1 1 auto;font-size:.8125rem;padding:7px 8px}.tilt-controls{padding:8px 10px}.tilt-controls label{font-size:.875rem}.tilt-controls p{font-size:.75rem}.tilting .stage-wrap{height:clamp(280px,44svh,380px);min-height:280px}.tilting .stage-controls{bottom:12px;left:8px;gap:3px;max-width:55%;flex-wrap:wrap}.tilting .stage-controls button{width:32px;height:40px}.motion-readout p{font-size:.875rem}.motion-readout>span{font-size:.75rem}.drop-inset-label{font-size:.6875rem}.tilting .viewer-footer{padding:8px 12px}}

.tilting .stage-corner{display:none}.drop-inset-label{left:12px;right:auto}

@media(max-width:600px){.tilt-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(5.2rem,1fr));width:100%;gap:4px}.tilt-actions button{min-width:0;white-space:normal;overflow-wrap:anywhere}}

@media(max-width:600px){.drop-inset-label{font-size:.75rem}}

/* A geometry-driven profile remains next to the control and result on phones. */
.tilting .exhibit{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(280px,1fr)}
.tilting .exhibit-toolbar,.tilting .camera-row,.tilting .tilt-controls,.tilting .motion-readout,.tilting .viewer-footer{grid-column:1/-1}
.tilting .stage-wrap{min-width:0;height:clamp(340px,46vh,490px)}
.tilt-profile{padding:20px;min-width:0;background:#0d2018;border-left:1px solid #405942;display:flex;flex-direction:column;justify-content:center}
.profile-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.profile-heading h2{font-size:1.05rem;margin:0;font-weight:650}.profile-heading output{font-size:1.5rem;color:#e8d48f;font-variant-numeric:tabular-nums}.profile-subtitle{color:#b3c9b6;font-size:.875rem;margin:5px 0 0}
#profile-svg{width:100%;height:auto;display:block;overflow:visible;margin:8px 0}.profile-level,.profile-tilted,.profile-arc,.profile-leaf{fill:none;vector-effect:non-scaling-stroke}.profile-level{stroke:#91a89c;stroke-width:1.3;stroke-dasharray:5 5}.profile-tilted{stroke:#69b3a9;stroke-width:1.5;stroke-dasharray:9 5}.profile-arc{stroke:#d5c994;stroke-width:1.5}.profile-leaf{stroke:#c6e4b8;stroke-width:2.5;stroke-linejoin:round}.profile-drop{fill:#f1cf70;stroke:#11271a;stroke-width:2;vector-effect:non-scaling-stroke}
.profile-key{display:flex;gap:8px 13px;flex-wrap:wrap;font-size:.75rem;color:#c1d1c3;line-height:1.5}.profile-key span{display:inline-flex;align-items:center;gap:5px}.profile-key i{display:inline-block;width:17px}.key-level{border-top:2px dashed #91a89c}.key-tilt{border-top:2px dashed #69b3a9}.profile-key .key-drop{width:8px;height:8px;border-radius:50%;background:#f1cf70}.profile-distance{font-size:.875rem;color:#e0e8d8;margin:14px 0 5px;font-variant-numeric:tabular-nums}.profile-note{font-size:.75rem;line-height:1.5;color:#a8bfaf;margin:4px 0}.profile-offscreen{font-size:.875rem;color:#f1cf70;margin:0 0 8px}.motion-readout{border-top:1px solid #405942}
@media(max-width:850px){.tilting .exhibit{display:flex;flex-direction:column}.tilting .exhibit-toolbar{order:0}.tilting .tilt-controls{order:1}.tilt-profile{order:2;border-left:0;border-bottom:1px solid #405942;padding:12px}.tilting .motion-readout{order:3}.tilting .stage-wrap{order:4;height:clamp(270px,40svh,380px);min-height:270px}.tilting .viewer-footer{order:5}#profile-svg{max-height:190px;margin:4px auto}.profile-distance{margin-top:8px}.profile-heading output{font-size:1.25rem}}
@media(max-width:600px){.tilting .site-header{min-height:44px}.tilting main{padding-top:10px}.tilting .intro{margin-bottom:8px}.tilting .intro h1{font-size:1.25rem}.profile-heading h2{font-size:.9375rem}.profile-subtitle{font-size:.8125rem}#profile-svg{max-height:150px}.profile-key{font-size:.75rem;gap:6px 10px}.profile-note{font-size:.75rem}.profile-distance{font-size:.8125rem}.motion-readout p{font-size:.875rem}.profile-key span{max-width:100%}}

/* Keep the active experiment compact while allowing larger text to reflow. */
.tilting .intro-copy,.tilting .prototype-badge,.tilting .intro .eyebrow{display:none}.tilting .intro{margin-bottom:16px}.tilting .intro h1{font-size:1.8rem;margin:0}.tilting .intro h1 em{display:inline}.tilting main{padding-top:20px}.tilt-profile .profile-note{margin-block:2px}
@media(max-width:850px){.tilting main{padding-top:10px}.tilting .intro{margin-bottom:8px}.tilting .intro h1{font-size:1.4rem}.tilt-profile{padding:10px 12px}#profile-svg{max-height:145px}.profile-heading h2{font-size:.9375rem}.profile-distance{margin:5px 0}.profile-key{line-height:1.4}}
@media(max-width:600px){.tilting .intro h1{font-size:1.15rem}.profile-heading h2{font-size:.875rem}.profile-heading output{font-size:1.125rem}#profile-svg{max-height:120px}.profile-distance{margin:4px 0}.tilt-profile .profile-note{font-size:.75rem}.tilt-actions{grid-template-columns:repeat(3,minmax(0,1fr))}.tilt-actions button{padding:7px 4px}.tilting .view-tabs{flex:1}.tilting .view-tab{padding:7px 6px;font-size:.75rem}.tilting .tilt-mode{margin-left:0;padding:8px;font-size:.75rem}.tilting .exhibit-toolbar{flex-wrap:nowrap}.tilting .exhibit-toolbar .view-tab{white-space:normal}}

/* Icon controls grow with text instead of clipping at enlarged font settings. */
.stage-controls{max-width:calc(100% - 24px);flex-wrap:wrap}.orbit-buttons,.zoom-buttons{max-width:100%;flex-wrap:wrap}.stage-controls button,.tilting .stage-controls button{width:max(40px,2.2rem);height:max(40px,2.2rem);line-height:1;padding:.2rem;flex-shrink:0}

/* A still habitat belongs to the whole-leaf view, never the tilt instrument or comparison. */
.pond-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 52%;pointer-events:none;opacity:0}
.stage-wrap[data-setting="pond"][data-pond="ready"]>.pond-backdrop{opacity:1}
.stage-wrap[data-setting="pond"] .stage-corner{background:#10231ee8;color:#e8f0de;text-shadow:none}