:root{color-scheme:dark;--ink:#e0ece9;--muted:#a1b6b9;--line:#ffffff26;--mint:#bce5d7}*{box-sizing:border-box}body{margin:0;background:#091019;color:var(--ink);font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100svh}button,input{font:inherit}button{border:1px solid var(--line);border-radius:30px;background:#14252bd9;color:var(--ink);padding:11px 22px;cursor:pointer;transition:background .2s}button:hover{background:#294044}button:disabled{opacity:.5;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--mint);outline-offset:5px}.primary{background:var(--mint);color:#10282a;border-color:var(--mint)}.primary:hover{background:#e0f6ed}[hidden]{display:none!important}#canvas{position:fixed;inset:0;z-index:-1}canvas{display:block}header,footer{display:flex;justify-content:space-between;align-items:center;padding:32px 4.6vw}.brand{font-size:20px;letter-spacing:.24em;color:var(--ink);text-decoration:none}.brand span{display:block;font-size:11px;letter-spacing:.25em;color:var(--muted);margin-top:3px}.session{display:flex;gap:28px;align-items:center;font-size:12px;letter-spacing:.12em;color:var(--muted);font-variant-numeric:tabular-nums}#timer{font-size:14px}main{min-height:calc(100svh - 228px);display:flex;align-items:center;padding:30px 9vw;position:relative}.intro{max-width:550px}.eyebrow{font-size:12px;letter-spacing:.2em;color:var(--mint)}h1{font:400 clamp(44px,5.5vw,82px)/1.09 Georgia,serif;letter-spacing:-.04em;margin:26px 0}h1 em{font-weight:400;color:var(--mint)}p{color:var(--muted)}.intro>p{font-size:18px;line-height:1.9}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}.intro .privacy{font-size:12px;margin-top:18px}footer{font-size:11px;letter-spacing:.12em;color:var(--muted);gap:20px}footer button{font-size:14px;letter-spacing:0;background:#091019aa}.experience{align-self:flex-end;text-align:center;width:100%;padding-bottom:105px;pointer-events:none}.experience h1{font-size:clamp(36px,4vw,56px);margin:16px 0}.experience p{margin:0}#notice{position:absolute;left:9vw;bottom:12px;max-width:70%;font-size:14px;color:#e3d6ab}#controls{position:relative;margin-top:-92px;padding:0 6vw 14px;text-align:center}.controlrow{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}.volume{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--muted)}input[type=range]{accent-color:var(--mint);width:100px}#demoControls{font-size:14px;color:var(--muted)}#demoControls p{margin:10px 0 5px}#demoControls label{display:inline-flex;align-items:center;gap:12px;margin:0 12px}#guide{position:fixed;inset:auto 4vw 95px;background:#102129f5;backdrop-filter:blur(24px);border:1px solid var(--line);padding:30px 36px;border-radius:20px;max-height:75svh;overflow:auto;z-index:5;box-shadow:0 20px 100px #0007}.guidehead{display:flex;justify-content:space-between;align-items:center}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 30px}.grid p{font-size:14px}.grid b{display:block;color:var(--ink);font-weight:500;margin-bottom:8px}.guidefoot{font-size:13px;border-top:1px solid var(--line);padding-top:15px}@media(max-width:650px){header,footer{padding:22px 6vw}.brand{font-size:16px}.session #mode{display:none}main{padding:30px 7vw;min-height:calc(100svh - 205px)}.intro{background:linear-gradient(90deg,#091019aa,transparent)}h1{font-size:52px}.intro>p{font-size:16px}.actions{flex-direction:column;align-items:flex-start}.experience{padding-bottom:170px}.experience h1{font-size:36px}#controls{margin-top:-150px}.controlrow{gap:10px}button{padding:10px 17px}.grid{grid-template-columns:1fr 1fr}#guide{padding:22px}footer>span{font-size:10px}#notice{max-width:90%;left:6vw;bottom:0}#demoControls p{font-size:12px}.volume input{width:65px}}@media(prefers-reduced-motion:reduce){button{transition:none}}

/* Moonlight edition: the live mirror remains the main visual. */
:root{--ink:#eaf4ff;--muted:#b1c5df;--mint:#c4dfff;--line:#b3d9ff33}
body{background:#050c1b}button{background:#14233bd9;backdrop-filter:blur(16px)}button:hover{background:#2a4264}.primary{background:#c4dfff;color:#10213c}.primary:hover{background:#e3efff}.intro h1 em{text-shadow:0 0 40px #7ec2ff40}.eyebrow{color:#c3ddfa}.camera-live .experience{padding-bottom:22px}.camera-live .experience h1{font-size:clamp(30px,3.4vw,46px);text-shadow:0 2px 24px #000;margin:12px 0}.camera-live .experience p{color:#d0e2f5;text-shadow:0 1px 12px #000}.camera-live main{min-height:calc(100svh - 240px);pointer-events:none}.camera-live main button{pointer-events:auto}.camera-live #controls{margin-top:0}.camera-live #notice{bottom:0;font-size:13px}.camera-live .intro{background:#081226a8;backdrop-filter:blur(14px);padding:24px;border-radius:24px}.camera-live .privacy{color:#c1d5eb}#guide{background:#0c1c34f5}#canvas{pointer-events:none}
@media(max-width:650px){.camera-live main{min-height:calc(100svh - 260px)}.camera-live .experience{padding-bottom:24px}.camera-live #controls{margin-top:0}.camera-live .experience h1{font-size:30px}.camera-live .experience p{font-size:14px}}

/* Lily moon: airy artwork, quiet interface, unfiltered live camera. */
:root{color-scheme:light;--ink:#243e50;--muted:#425d70;--mint:#314f65;--line:#405b7033}
body{background:#d9e4e9 none center 34% / cover fixed no-repeat;color:var(--ink)}
body:before{content:"";position:fixed;inset:0;z-index:-2;background:linear-gradient(0deg,#e6eef4e8,transparent 45%);pointer-events:none}
header{padding:24px 4.6vw}.brand{font-size:16px}.brand span{font-size:10px}.session #mode,footer>span{display:none}
main{min-height:calc(100svh - 176px);padding:0 6vw 25px;align-items:flex-end;justify-content:center}
.intro{max-width:100%;text-align:center;background:none}.intro h1{font-size:clamp(32px,4vw,48px);margin:0 0 6px;letter-spacing:-.025em}.intro>p{font-size:16px;margin:0}.actions{justify-content:center;margin-top:20px}.intro .privacy{font-size:12px;margin-top:12px}
button,footer button{color:#284459;background:#f7fbfbe6;border:1px solid #69829542;backdrop-filter:blur(14px)}button:hover{background:#fff}.primary{background:#2e4c60;color:#fff;border-color:#2e4c60}.primary:hover{background:#3d6179}footer{padding:14px 4.6vw;justify-content:flex-end}footer button{font-size:12px;padding:7px 16px}
.eyebrow{color:#496678}.experience{padding-bottom:150px}.experience h1{font-size:36px}.experience p{color:#425d70}#notice{color:#304d60;background:#f5f9f0dc;border-radius:12px;padding:2px 10px;font-size:12px;bottom:0;max-width:88%;left:6vw}#notice:empty{display:none}
#guide{background:#f1f6f8f5}.grid b{color:#29495b}input[type=range]{accent-color:#567990}
.camera-live{background:#eef1f1}.camera-live:before{background:none}.camera-live header{background:linear-gradient(#f7f9f9ee,#f7f9f966,transparent)}.camera-live .experience h1,.camera-live .experience p{color:#243e50;text-shadow:none}.camera-live .experience{padding:14px 22px;background:#f7f9f4d9;backdrop-filter:blur(8px);border-radius:20px;width:auto;max-width:95%;margin:0 auto 12px}.camera-live .experience h1{font-size:28px;margin:4px 0}.camera-live .experience .eyebrow{font-size:10px}.camera-live .experience p{font-size:14px}.camera-live main{min-height:calc(100svh - 250px);padding-bottom:22px}.camera-live #controls{padding-top:8px;background:linear-gradient(transparent,#f0f4f5e6)}.camera-live footer{background:#f0f4f5e6}.camera-live .intro{background:#f5f8f5de}.camera-live .privacy{color:#425d70}
@media(max-width:650px){body{background-size:auto 100svh;background-position:center top}header{padding:20px 6vw}main{min-height:calc(100svh - 160px);padding-bottom:18px}.intro h1{font-size:34px}.actions{flex-direction:row;gap:8px}.actions button{font-size:13px;padding:10px 14px}.intro>p{font-size:14px}.intro .privacy{font-size:10px}.controlrow{gap:7px}.controlrow button{font-size:12px;padding:8px 12px}.camera-live main{min-height:calc(100svh - 270px)}.camera-live .experience h1{font-size:25px}.camera-live .experience p{font-size:12px}.camera-live .experience{padding:10px 15px}#controls{margin-top:-145px}}

/* Photographic botanical collage — original supplied cutouts, no generated scenery. */
:root{color-scheme:dark;--ink:#eeeae4;--muted:#b9b6bc;--mint:#ded9e4;--line:#ffffff30}
body{background:#050507;color:var(--ink)}body:before{display:none}
#moonGarden{position:fixed;inset:0;z-index:-1;pointer-events:none;display:grid;place-items:center;padding-bottom:18svh}
.lunar-orbit{position:relative;width:min(43svh,48vw);aspect-ratio:1;animation:lunar-turn 260s linear infinite;isolation:isolate}
.moon-cutout{position:absolute;width:100%;height:100%;object-fit:cover;clip-path:circle(48.8% at 50% 50%);filter:brightness(.86) contrast(1.08)}
.flower-cut{position:absolute;mix-blend-mode:screen;transform-origin:50% 88%;animation:petal-wind 8s ease-in-out infinite alternate}.flower-cut img{display:block;width:100%;height:100%;object-fit:contain}
.flower-one{width:64%;height:64%;left:28%;top:-13%;--angle:18deg;transform:rotate(18deg);filter:brightness(.94)}
.flower-two{width:48%;height:76%;left:-10%;top:23%;--angle:-32deg;transform:rotate(-32deg);animation-delay:-3s;animation-duration:11s;filter:saturate(.5) brightness(1.3)}
.flower-three{width:31%;height:31%;left:63%;top:55%;--angle:92deg;transform:rotate(92deg);animation-delay:-5s;animation-duration:9s;filter:brightness(.82)}
@keyframes lunar-turn{to{transform:rotate(360deg)}}
@keyframes petal-wind{from{transform:rotate(calc(var(--angle) - 2deg)) skewX(-1deg)}to{transform:rotate(calc(var(--angle) + 2deg)) skewX(1deg)}}
#canvas{z-index:0}header,main,aside,footer{position:relative;z-index:1}header{background:none}.brand{color:#eeeae4}.eyebrow{color:#c9c5d2}.intro>p,.intro .privacy{color:#b9b6bc}.intro h1{font-size:clamp(30px,3vw,42px);font-style:italic}.actions{margin-top:18px}button,footer button{color:#ece9e3;background:#15151ccf;border-color:#ffffff30}.primary{background:#e7e4df;color:#24232a;border-color:#e7e4df}button:hover{background:#303039}.primary:hover{background:#fff}.experience p{color:#c9c5d2}#guide{background:#16161ff5}.grid b{color:#eeeae4}#notice{background:#1d1d28e6;color:#ddd9e4}
.camera-live #moonGarden{display:none}.camera-live .brand{color:#243e50}.camera-live{--ink:#243e50;--muted:#425d70}.camera-live button{color:#284459;background:#f7fbfbe6;border-color:#69829542}.camera-live #notice{color:#304d60;background:#f5f9f0dc}.camera-live #guide{background:#f1f6f8f5}.camera-live .grid b{color:#29495b}.camera-live .eyebrow{color:#496678}
@media(max-width:650px){#moonGarden{padding-bottom:22svh}.lunar-orbit{width:min(43svh,66vw)}.intro h1{font-size:32px}}
@media(prefers-reduced-motion:reduce){.lunar-orbit,.flower-cut{animation:none}}
/* Match the supplied botanical photographs' black ground. */
body{background:#000}.camera-live{background:#eef1f1}

/* A translucent whisper of text, rather than a solid card. */
.camera-live .experience{background:linear-gradient(110deg,rgba(255,255,255,.19),rgba(255,255,255,.07));backdrop-filter:blur(3px);border:1px solid #ffffff20;border-radius:28px;box-shadow:0 5px 35px #ffffff0a;padding:12px 24px}
.camera-live .experience h1{font-size:clamp(24px,3vw,34px);font-weight:400;text-shadow:0 1px 10px #ffffffb0}.camera-live .experience p{font-size:14px;text-shadow:0 1px 8px #ffffffc0}.camera-live .experience .eyebrow{opacity:.7;font-size:10px;letter-spacing:.22em}
.camera-live #notice{background:#ffffff32;backdrop-filter:blur(3px);font-size:11px}.camera-live button{background:#ffffff55;border-color:#ffffff70;backdrop-filter:blur(5px)}.camera-live #controls{background:linear-gradient(transparent,#f0f4f580)}.camera-live footer{background:#f0f4f580}

/* Reserve separate vertical space for the rotating collage and its caption. */
.demo-mode #moonGarden{position:absolute;inset:90px 0 auto;height:54svh;padding:0}
.demo-mode .lunar-orbit{width:min(36svh,55vw)}
.demo-mode main{display:block;min-height:0;padding:calc(54svh + 36px) 6vw 24px}
.demo-mode .experience{padding:0;margin:0 auto;width:100%;max-width:760px}
.demo-mode .experience h1{margin:12px 0;font-size:clamp(28px,3.5vw,42px)}
.demo-mode #controls{margin-top:0;padding-top:0}
.demo-mode #notice{position:static;max-width:fit-content;margin:12px auto 0}
@media(max-width:650px){.demo-mode main{padding-top:calc(54svh + 48px)}.demo-mode .experience p{font-size:14px}}

#recordResult{position:relative;z-index:2;margin:28px auto;padding:24px;max-width:760px;background:#15151deF;border-radius:22px;color:#eeeae4}#recordResult h2{font:32px Georgia,serif}#recordPreview{display:block;width:100%;max-height:480px;background:#000;border-radius:12px}#recordResult p{font-size:14px;color:#c9c5d2}#recordStatus{font-size:13px;min-height:1.5em}#instrumentNow{font-size:14px;min-width:90px;color:var(--muted)}#recordResult .actions{flex-wrap:wrap}.camera-live #recordResult button{color:#284459}

/* Compact, user-controlled instructions leave the camera unobstructed. */
#togglePrompt{pointer-events:auto;font-size:12px;padding:7px 14px;margin:0 0 10px;letter-spacing:.03em}
.camera-live #togglePrompt{color:#284459;background:rgba(255,255,255,.3);border-color:rgba(255,255,255,.3)}
#experience.is-collapsed{background:none;backdrop-filter:none;border-color:transparent;box-shadow:none;padding:0;width:auto;max-width:100%;margin-left:auto;margin-right:auto}
#experience.is-collapsed #togglePrompt{margin-bottom:0}
.demo-mode #experience.is-collapsed{width:auto}

#promptContent{max-height:42svh;overflow-y:auto;pointer-events:auto;padding:0 5px 8px}
.quick-hints{font-size:13px;line-height:1.5;text-align:left;max-width:440px;margin:14px auto 8px}
.quick-hints>div{display:grid;grid-template-columns:85px 1fr;gap:10px;padding:4px 0}
.quick-hints dt{font-weight:600}.quick-hints dd{margin:0}
#experience .hint-note{font-size:11px;line-height:1.5;max-width:440px;margin:10px auto 0;opacity:.85}

/* Secret garden: original painted scenery with quiet editorial typography. */
#moonGarden{display:none!important}
body{background:#15241f}
body:not(.camera-live) .brand{font-family:Didot,"Bodoni MT",Georgia,serif;font-weight:400;letter-spacing:.2em}
body:not(.camera-live) main{align-items:center;justify-content:flex-start;min-height:calc(100svh - 150px)}
body:not(.camera-live) .intro{max-width:440px;text-align:left;text-shadow:0 2px 20px #10231bd0}
body:not(.camera-live) .intro h1{font-family:Didot,"Bodoni MT","Times New Roman",serif;font-size:clamp(42px,5.2vw,78px);line-height:1.04;font-weight:400;font-style:normal;letter-spacing:-.035em;color:#f4efdc;margin:22px 0}
body:not(.camera-live) .intro h1 em{color:#e5dfce;font-weight:400}
body:not(.camera-live) .intro .garden-kicker{font-size:10px;letter-spacing:.24em;color:#dadbc5}
body:not(.camera-live) .intro>p{color:#d7dfcd}
body:not(.camera-live) .intro .actions{justify-content:flex-start}
body:not(.camera-live) button{background:#20382d80;border-color:#e2e5ca50;color:#f3f0df}
body:not(.camera-live) .primary{background:#eee9d8;color:#28392d}
body:not(.camera-live) .intro .privacy{font-size:10px;color:#c3ceba}
.demo-mode main{padding:45svh 6vw 24px!important;display:block!important}
@media(max-aspect-ratio:115/100){body:not(.camera-live) main{align-items:flex-start;justify-content:center;padding-top:6svh}.intro{background:none!important}body:not(.camera-live) .intro{text-align:center;max-width:90%;padding:18px;background:radial-gradient(ellipse,#12251db0,transparent)!important}body:not(.camera-live) .intro h1{font-size:clamp(35px,7vw,58px);margin:12px 0}body:not(.camera-live) .intro .actions{justify-content:center}.intro .actions button{font-size:12px;padding:9px 12px}}

/* Full-bleed outpainted garden; image scaling preserves its aspect ratio. */
body:not(.camera-live):not(.demo-mode) main{position:absolute;inset:14svh 0 auto;min-height:0;padding:0 20px;display:flex;justify-content:center;align-items:flex-start}
body:not(.camera-live) .intro{max-width:540px;text-align:center;text-shadow:0 1px 14px #e2ead4a0;background:none!important}
body:not(.camera-live) .intro h1{font-size:clamp(36px,4.6vw,66px);color:#233c31;margin:12px 0;line-height:1.02}
body:not(.camera-live) .intro h1 em{color:#233c31}
body:not(.camera-live) .intro>p,body:not(.camera-live) .intro .garden-kicker{color:#294336}
body:not(.camera-live) .intro .actions{justify-content:center;margin-top:18px}
body:not(.camera-live) .intro .privacy{color:#20392d;background:#e4ebd97a;border-radius:12px;padding:3px 8px;font-size:10px}
body:not(.camera-live):not(.demo-mode)>footer{position:fixed;bottom:0;right:0}
@media(max-width:650px){body:not(.camera-live):not(.demo-mode) main{top:15svh}.intro .garden-kicker{font-size:8px!important}body:not(.camera-live) .intro h1{font-size:38px}.intro .actions{gap:6px}.intro .privacy{max-width:300px;margin:12px auto 0}}
body:not(.camera-live) .intro h1,body:not(.camera-live) .intro h1 em{color:#fff8e8;text-shadow:0 2px 8px #142c23,0 0 28px #142c23b0}
body:not(.camera-live) .intro>p:not(.privacy){color:#fff8e8;text-shadow:0 1px 6px #142c23,0 0 15px #142c23}

/* Ink on the soft ivory edge, as in the camera view. */
body:not(.camera-live) header .brand,body:not(.camera-live) header .brand span,body:not(.camera-live) #timer{color:#304d49;text-shadow:0 1px 10px #fff8}
body:not(.camera-live) footer button{background:#ffffff70;color:#304d49;border-color:#ffffff90;backdrop-filter:blur(6px)}