*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:#d6e8f4;color:#4c6264;font-family:"Noto Serif SC","Songti SC","STSong",serif;-webkit-tap-highlight-color:transparent}main{height:100%;height:100svh;position:relative;isolation:isolate;overflow:hidden;touch-action:pan-y}.landscape,.evening,.sunlight,.vignette,canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.landscape{background:url('assets/meadow.webp') center center/cover no-repeat}.evening{background:linear-gradient(180deg,#68509f 0%,#9973c5 40%,#bd94cf 72%,#9890ae 100%);mix-blend-mode:multiply;opacity:0}.sunlight{background:radial-gradient(ellipse at 15% 65%,#ebdcffaa 0%,#bd9feb48 28%,transparent 67%);mix-blend-mode:soft-light;opacity:0}.vignette{background:radial-gradient(ellipse at 53% 42%,transparent 45%,#fff9eb33 100%);z-index:5}#air{z-index:1}#near{z-index:4}.assembly{--size:540px;position:absolute;left:65%;top:39%;width:var(--size);height:var(--size);transform:translate(-50%,-50%);z-index:2;pointer-events:none;will-change:transform;transform-origin:43% 170%}.rotor{position:absolute;inset:0;will-change:transform;transform-origin:49.35% 49.45%}.rotor img{height:100%;width:100%;object-fit:contain;user-select:none;clip-path:polygon(54% 1%,49% 24%,48% 29%,62% 26%,70% 25%,77% 29%,96% 49%,71% 48%,71% 59%,73% 70%,67% 80%,47% 97%,50% 70%,42% 72%,27% 74%,17% 68%,4% 52%,27% 53%,25% 43%,23% 30%,26% 25%)}.stick{position:absolute;top:49.5%;left:49.3%;height:120vh;width:13px;transform:rotate(9deg);transform-origin:50% 0;background:linear-gradient(90deg,#c1a57b 0%,#dfc49d 15%,#f4dfbb 38%,#d2b588 67%,#b3966e 100%);border-radius:9px;box-shadow:1px 0 2px #8d765223;z-index:-1}.stick:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(91deg,transparent 0 3px,#7e5c3219 4px,transparent 5px 8px);opacity:.7}.axle{position:absolute;left:49.35%;top:49.45%;transform:translate(-50%,-50%);width:4.7%;height:4.7%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff0c7,#edc990 50%,#c49c66 85%);box-shadow:1px 2px 4px #90693240}.axle:after{content:"";position:absolute;inset:39%;border-radius:50%;background:#ac8654;box-shadow:0 -1px 0 #fff2cf}
header{position:absolute;z-index:6;left:7%;top:12%;pointer-events:none}h1{font-weight:400;font-size:clamp(25px,3.1vw,43px);letter-spacing:.22em;margin:15px 0 18px;color:#51666a;text-shadow:0 1px 16px #fff8}.eyebrow{font:10px/1.4 sans-serif;letter-spacing:.38em;opacity:.65}header p{font-size:12px;letter-spacing:.2em;opacity:.75;margin:0}.hint{position:absolute;bottom:118px;left:50%;transform:translateX(-50%);font:11px/1.5 sans-serif;letter-spacing:.16em;opacity:.65;z-index:7;white-space:nowrap;transition:opacity 1s}footer{position:absolute;z-index:7;bottom:max(28px,env(safe-area-inset-bottom));left:6%;right:6%;display:flex;justify-content:space-between;align-items:center;gap:20px}.time-control{display:flex;align-items:center;gap:14px;padding:10px 16px;background:#fffaf150;border:1px solid #fff8;border-radius:30px;backdrop-filter:blur(8px)}#timeLabel{min-width:2em;font-size:12px;letter-spacing:.1em}input[type=range]{width:130px;height:22px;appearance:none;background:transparent;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,#a2bac7,#a58cbf);border-radius:4px}input[type=range]::-moz-range-track{height:2px;background:linear-gradient(90deg,#a2bac7,#a58cbf)}input[type=range]::-webkit-slider-thumb{appearance:none;height:12px;width:12px;border-radius:50%;background:#fff9eb;border:1px solid #b8b6a1;margin-top:-5px;box-shadow:0 1px 3px #776e3d22}input[type=range]::-moz-range-thumb{height:12px;width:12px;border-radius:50%;background:#fff9eb;border:1px solid #b8b6a1}.sun-icon{font:18px sans-serif;opacity:.65}.buttons{display:flex;gap:10px}button{border:1px solid #fffc;background:#fffaf170;backdrop-filter:blur(8px);color:#526766;cursor:pointer;border-radius:30px;display:flex;align-items:center;justify-content:center;font:12px sans-serif;letter-spacing:.1em;height:44px;transition:background .25s,transform .25s}button:hover{background:#fffaf1d0;transform:translateY(-2px)}button:active{transform:scale(.96)}button:focus-visible,input:focus-visible{outline:2px solid #677f84;outline-offset:4px}.gust{padding:0 20px;gap:10px}.pause{width:44px;padding:10px}button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}body.quiet .hint{opacity:0}
@media(max-width:600px){header{left:8%;top:8%}h1{font-size:27px;letter-spacing:.18em;margin:12px 0 15px}header p{font-size:11px}.assembly{left:52%;top:48%;--size:390px}.landscape{background-position:43% center}footer{left:5%;right:5%;bottom:max(22px,env(safe-area-inset-bottom));gap:10px}.time-control{padding:9px 12px;gap:8px}input[type=range]{width:78px}.gust{padding:0 13px}.hint{bottom:90px;font-size:10px}.buttons{gap:6px}.stick{width:10px}}@media(max-height:550px) and (min-width:601px){header{top:9%}h1{font-size:28px}.hint{bottom:88px}footer{bottom:18px}}
/* The scene is a canvas, never a focus-scroll container. */
main{overflow:clip}

/* Paper fragments are the same sampled material as the rotating blades. */
#paperRotor{position:absolute;inset:0;width:100%;height:100%;clip-path:polygon(54% 1%,49% 24%,48% 29%,62% 26%,70% 25%,77% 29%,96% 49%,71% 48%,71% 59%,73% 70%,67% 80%,47% 97%,50% 70%,42% 72%,27% 74%,17% 68%,4% 52%,27% 53%,25% 43%,23% 30%,26% 25%)}.gust{width:44px;padding:10px}footer{opacity:.62;transition:opacity .3s}footer:hover,footer:focus-within{opacity:1}.time-control{padding:6px 12px}

/* Leave an open downwind corridor on the right. */
.assembly{left:46%;top:42%}@media(max-width:600px){.assembly{left:49%;top:48%}}

#weatherShade,#clouds{position:absolute;inset:0;pointer-events:none;opacity:0}#weatherShade{background:linear-gradient(180deg,#798fa06b,#abc3cf24 64%,transparent)}#clouds{inset:-12% -20% 35%;background:radial-gradient(ellipse at 18% 35%,#eef3f2bd 0%,#f9faf478 18%,transparent 34%),radial-gradient(ellipse at 70% 25%,#eef2f2c9 0%,#f7f6f481 22%,transparent 43%);will-change:transform;filter:blur(12px)}

@media(max-width:600px){.time-control,button{backdrop-filter:none}#clouds{filter:none}}