@font-face{font-family:Inter;src:local('Inter'),local('Arial')}*{box-sizing:border-box}body{margin:0;background:#edeae2;color:#283c32;font-family:Inter,Arial,sans-serif}button,select{font:inherit}button{cursor:pointer}main{max-width:1680px;margin:auto;padding:0 42px}header{height:94px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #243a2e22}.brand{font:25px Georgia,serif;letter-spacing:.09em;color:inherit;text-decoration:none}.brand span{display:block;font:9px Arial;letter-spacing:.39em;margin-top:7px}.preview{font-size:11px;color:#69776c;padding:9px 13px;border:1px solid #31453630;border-radius:30px}.intro{display:flex;align-items:end;justify-content:space-between;padding:46px 0 30px}.eyebrow{font-size:10px;letter-spacing:.19em;font-weight:600;color:#7b795f}h1{font:clamp(40px,4.4vw,72px)/.98 Georgia,serif;letter-spacing:-.04em;margin:15px 0}h1 em{font-weight:400;color:#64785b}.lead{font-size:14px;line-height:1.7;color:#687469;margin:0 0 15px}.experience{border-top:1px solid #23372a30}.toolbar{display:flex;gap:22px;align-items:center;padding:18px 0;min-height:83px}.format-label{display:flex;gap:12px;align-items:center;font-size:11px;color:#6a796c}.format-label select{background:#203c30;color:#edeae2;border:0;border-radius:28px;padding:13px 38px 13px 18px;font-size:13px;cursor:pointer;max-width:280px}.switch{display:flex;background:#dedfd5;border-radius:24px;padding:3px}.switch button{border:0;background:transparent;border-radius:22px;padding:10px 17px;color:#627263;font-size:12px}.switch button[aria-pressed=true]{background:#f7f4ed;color:#223b2c;box-shadow:0 2px 6px #1e332617}.quiet{border:1px solid #29422d33;background:transparent;border-radius:22px;padding:11px 17px;color:#40553e;font-size:12px}.thought-toggle{font-size:12px;color:#65725f;margin-left:auto;display:flex;gap:8px;align-items:center}.thought-toggle input{accent-color:#40583d}.frame{aspect-ratio:16/9;position:relative;overflow:hidden;background:#c5bfb1;border-radius:15px;isolation:isolate;touch-action:pan-y}#viewport{position:absolute;inset:0;transform-origin:50% 50%;will-change:transform}#plate,#scene,#bubbles{position:absolute;inset:0;width:100%;height:100%}#plate{object-fit:contain}#scene{display:block}#bubbles{pointer-events:none}.live-badge{position:absolute;top:20px;left:23px;display:flex;align-items:center;gap:8px;color:#edf0d9;background:#263b2bde;border:1px solid #dfdac631;border-radius:25px;padding:10px 15px;font-size:9px;letter-spacing:.12em;pointer-events:none}.live-badge i{width:6px;height:6px;background:#aec494;border-radius:50%;box-shadow:0 0 9px #b6cdab}.live-badge b{font-weight:400;letter-spacing:0;border-left:1px solid #dcdec142;padding-left:9px;color:#bfc5a9}.zoom{position:absolute;bottom:17px;right:18px;display:flex;background:#f1eee5e8;border-radius:25px;padding:3px;box-shadow:0 3px 14px #17231b18}.zoom button{border:0;background:none;color:#3b533b;width:34px;height:32px;font-size:19px}.zoom #zoom-reset{font-size:10px;width:43px}.views{display:flex;justify-content:center;gap:7px;padding:20px 0;flex-wrap:wrap}.views button{font-size:12px;padding:12px 19px;border-radius:25px;border:1px solid #344c3030;background:none;color:#5c6c53}.views button[aria-pressed=true]{background:#3b5236;color:#f1eddf;border-color:#3b5236}.story{display:grid;grid-template-columns:minmax(150px,280px) 1fr auto;align-items:center;gap:32px;padding:28px 0;border-top:1px solid #243a2e20}.story>img{width:100%;aspect-ratio:1.7;object-fit:cover;border-radius:15px}.story h2{font:30px Georgia,serif;letter-spacing:-.02em;margin:8px 0 13px}.story p:not(.eyebrow){max-width:630px;font-size:13px;line-height:1.8;color:#677263}.facts{display:flex;gap:24px;padding-left:22px;border-left:1px solid #2d3d2820}.facts span{display:flex;flex-direction:column;gap:8px;max-width:76px;font-size:10px;line-height:1.4;color:#7a826d}.facts strong{font:32px Georgia,serif;color:#445b3e}footer{padding:25px 0 40px;font-size:11px;color:#7b8272;line-height:1.7}#status{display:block;color:#5e7651;margin-top:7px}.bubble{position:absolute;max-width:205px;padding:10px 15px;background:#f1eedcf2;border:1px solid #c9c9a5aa;border-radius:18px 18px 18px 6px;color:#354a31;box-shadow:0 5px 18px #19231821;font-size:12px;line-height:1.35;transform:translate(-50%,-100%);animation:thought-in .45s both;filter:drop-shadow(0 2px 4px #26332711)}.bubble small{display:block;font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:#7c856c;margin-bottom:4px}.bubble:after{content:'';position:absolute;bottom:-8px;left:calc(50% - 3px);width:6px;height:6px;border-radius:50%;background:#eeebd9}.bubble:before{content:'';position:absolute;bottom:-14px;left:calc(50% + 3px);width:3px;height:3px;border-radius:50%;background:#eeebd9}.bubble.leaving{opacity:0;transition:opacity .4s}#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;color:#4b6243;background:#d8d4cbea;font-size:14px;z-index:8;transition:opacity .4s}#loading.done{opacity:0;pointer-events:none}#loading span{border:1px solid #6a7d5633;border-top-color:#586e49;border-radius:50%;height:18px;width:18px;animation:spin 1s linear infinite}#legacy{width:100%;height:820px;border:0;border-radius:15px}.experience.legacy-mode .frame,.experience.legacy-mode .views,.experience.legacy-mode .story{display:none}.experience.legacy-mode #legacy{display:block}.experience.legacy-mode #pause,.experience.legacy-mode .thought-toggle{visibility:hidden}button:focus-visible,select:focus-visible{outline:2px solid #82925f;outline-offset:4px}@keyframes spin{to{transform:rotate(360deg)}}@keyframes thought-in{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}@media(max-width:1000px){main{padding:0 24px}.facts{display:none}.story{grid-template-columns:220px 1fr;gap:25px}.toolbar{gap:10px}.format-label{gap:6px}.thought-toggle{font-size:10px}.intro{padding:30px 0 20px}}@media(max-width:700px){main{padding:0 18px}header{height:76px}.brand{font-size:20px}.brand span{font-size:7px}.preview{max-width:145px;font-size:9px;text-align:center}.intro{display:block}.intro h1{font-size:45px}.lead{font-size:12px;margin-top:20px}.toolbar{flex-wrap:wrap;gap:10px;padding:14px 0}.format-label{font-size:0;flex:1;min-width:200px}.format-label select{font-size:12px;width:100%;max-width:none;padding:12px}.switch button{padding:10px 13px}.quiet{font-size:11px;padding:9px 13px}.thought-toggle{font-size:11px;margin-left:0}.frame{margin:0 -18px;width:calc(100% + 36px);border-radius:0;aspect-ratio:16/11;background:#bdb7aa}#viewport{top:9.1%;bottom:9.1%}.live-badge{top:9px;left:10px;font-size:7px;padding:7px 10px}.live-badge b{font-size:8px}.zoom{bottom:9px;right:9px}.views{gap:6px;padding:13px 0}.views button{font-size:10px;padding:9px 12px}.story{grid-template-columns:1fr;gap:14px;padding:18px 0}.story>img{aspect-ratio:1.85;max-height:240px}.story h2{font-size:29px}.story p:not(.eyebrow){font-size:12px}.bubble{font-size:10px;max-width:145px;padding:8px 10px}.bubble small{font-size:7px}footer{font-size:10px}#legacy{height:980px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}

/* Desktop retains the continuous camera journey; phone keeps direct controls. */
.composition{display:grid;grid-template-columns:35% 65%;align-items:center;background:#c5bfb1;border-radius:23px;isolation:isolate;min-height:0;flex:1}
.composition .story{display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:15px;padding:32px;border:0;margin:0;min-width:0}
.composition .story>img{aspect-ratio:1.27;max-height:39svh;object-fit:cover;border-radius:23px;box-shadow:0 18px 45px #26382b26}
.composition .story h2{font-size:clamp(24px,2.4vw,37px);margin:6px 0 10px;color:#24392e}
.composition .story p:not(.eyebrow){font-size:12px;line-height:1.65;color:#3f5146;margin:0}
.composition .story .eyebrow{margin:0;color:#5d6654}
.composition .facts{display:none}.composition .frame{width:100%;border-radius:0 23px 23px 0;background:transparent}
.scroll-hint{font-size:10px;letter-spacing:.08em;text-align:center;margin:0 0 8px;color:#687363;display:none}.scroll-hint span{margin-left:10px}
.experience.legacy-mode .composition{display:block}.experience.legacy-mode #legacy{height:100%;min-height:550px}
@media(min-width:801px) and (prefers-reduced-motion:no-preference){
 .experience{height:620svh}.sticky{position:sticky;top:12px;height:calc(100svh - 24px);display:flex;flex-direction:column;max-height:1150px}
 .toolbar{flex-shrink:0}.views{flex-shrink:0;padding:14px 0;gap:5px}.views button{padding:10px 13px;font-size:11px}.scroll-hint{display:block}
 .composition .live-badge{top:8px;left:12px;font-size:8px}.composition .live-badge b{display:none}
}
@media(max-width:1100px) and (min-width:801px){.composition{grid-template-columns:34% 66%}.composition .story{padding:20px}.thought-toggle{font-size:10px}.toolbar{gap:8px}.composition .story>img{max-height:32svh}}
@media(max-width:800px){
 main{padding:0 18px}.composition{display:flex;flex-direction:column;background:transparent;isolation:auto;border-radius:0}
 .composition .frame{order:0;flex:none;align-self:center;margin:0 -18px;width:calc(100% + 36px);border-radius:0;aspect-ratio:16/11;background:#bdb7aa}
 #viewport{top:9.1%;bottom:9.1%}.composition .story{order:1;padding:24px 0 8px;gap:18px;width:100%}.composition .story>img{aspect-ratio:1.65;max-height:300px;width:100%;border-radius:20px}.composition .story h2{font-size:30px}
 .experience.legacy-mode #legacy{height:980px}.toolbar{flex-wrap:wrap}.scroll-hint{display:none}
}
.composition{grid-template-columns:38% 62%}
.composition .story{padding:0;margin:28px;gap:0;border-radius:24px;background:#294238;box-shadow:0 16px 40px #22372b25;overflow:hidden}
.composition .story>img{border-radius:0;box-shadow:none}
.composition .story>div:not(.facts){padding:23px 24px 25px}
.composition .story h2{color:#f1efdf;font-size:clamp(24px,2.25vw,34px)}
.composition .story .eyebrow{color:#c4c29f}
.composition .story p:not(.eyebrow){color:#e0e4d6}
@media(max-width:1100px) and (min-width:801px){.composition .story{margin:18px}.composition .story>div:not(.facts){padding:20px}}
@media(max-width:800px){.composition .story{margin:24px 0 8px}.composition .story>img{border-radius:0}.composition .story>div:not(.facts){padding:22px}}