:root{color-scheme:dark;font-family:Georgia,'Times New Roman',serif;background:#35452b;color:#fcf1d4}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
body{background:linear-gradient(#b4ad77,#627145 36%,#18281a)}
#field,#ground,#foliage,#butterflies-3d{position:fixed;inset:0;display:block;width:100%;height:100%;height:100dvh;transform-origin:50% 50%;transform:translateX(var(--field-camera-pan,0px)) perspective(var(--field-camera-perspective,2200px)) rotateY(var(--field-camera-yaw,0deg)) scale(var(--field-camera-zoom,1.13));backface-visibility:hidden;will-change:transform}
#ground{z-index:0;pointer-events:none}#foliage{z-index:1;pointer-events:none}
#butterflies-3d{z-index:2;pointer-events:none}#field{z-index:3;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;outline:none;cursor:grab}
#field:active{cursor:grabbing}body.field-keyboard-focus::after{content:'';position:fixed;z-index:5;inset:4px;border:2px solid #f1d79a;pointer-events:none}
.brand-logo{position:fixed;z-index:4;top:calc(env(safe-area-inset-top,0px) + 14px);right:calc(env(safe-area-inset-right,0px) + 14px);display:block;width:clamp(126px,34.5vw,180px);height:auto;pointer-events:none;user-select:none;-webkit-user-select:none}
.title,.caption{position:fixed;z-index:4;left:0;width:100%;text-align:center;pointer-events:none;user-select:none;text-shadow:0 2px 22px #1c291a66}
.title{top:calc(env(safe-area-inset-top,0px) + 7.5vh)}
.title p{font:500 10px/1.5 system-ui,sans-serif;letter-spacing:.35em;margin:0 0 12px}
h1{font-weight:400;letter-spacing:-.045em;font-size:clamp(50px,9.3vw,106px);line-height:.98;margin:0}h1 span{color:#f2d7a4}
.rule{width:35px;height:1px;background:#f8e2b2a0;margin:23px auto 0}
.caption{bottom:calc(env(safe-area-inset-bottom,0px) + 27px)}
.caption p{font-size:clamp(20px,2.4vw,29px);margin:0 16px 13px;font-weight:400}.caption em{font-weight:400}
.caption span{font:400 8px/1.5 system-ui,sans-serif;letter-spacing:.23em;color:#e9e4c4b8}
.status{position:fixed;z-index:4;bottom:95px;left:20px;right:20px;text-align:center;font:13px/1.5 system-ui,sans-serif;color:#fff8e0;pointer-events:none}.status[hidden]{display:none}
@media(max-height:500px){.title{top:22px}.title p{font-size:8px;margin-bottom:5px}h1{font-size:46px}.rule{margin-top:10px}.caption{bottom:12px}.caption p{font-size:18px;margin-bottom:5px}.caption span{font-size:7px}}
@media(prefers-reduced-motion:reduce){#field{scroll-behavior:auto}}