*{box-sizing:border-box}body{margin:0;background:#f6efdf;color:#403c32;font-family:Georgia,'Times New Roman',serif}main{height:100svh;min-height:650px;position:relative;overflow:hidden}canvas{position:absolute;inset:0;width:100%;height:100%;display:block}header{position:absolute;left:3%;right:3%;top:25px;display:flex;align-items:center;justify-content:space-between;gap:20px}#wordmark{font-size:28px;color:inherit;text-decoration:none}nav{display:flex;gap:25px}button,select{color:inherit;background:none;border:0;font:11px Arial;letter-spacing:.6px;cursor:pointer}nav button{padding:9px 0}button:hover{color:#805c73}button:focus-visible,select:focus-visible,input:focus-visible{outline:1px solid #785a71;outline-offset:5px}.intro{position:absolute;left:3%;bottom:91px;pointer-events:none}h1{font-size:clamp(30px,3.4vw,53px);font-weight:normal;letter-spacing:-1.3px;margin:0 0 8px;text-shadow:0 1px 12px #f8f1e0}.intro p{font:11px Arial;letter-spacing:1px;margin:0;color:#776b58}footer{position:absolute;bottom:20px;left:3%;right:3%;display:flex;justify-content:space-between;align-items:center;gap:15px;font:9px Arial;color:#8a7b66}.controls{display:flex;gap:8px;align-items:center;padding:8px 11px;background:#faf5e7d9;border:1px solid #a2937730;border-radius:3px}.controls button{font-size:10px;padding:5px}.controls select{font-size:10px}.controls input{accent-color:#8a8061;width:90px;height:2px}#clock{min-width:27px}.explore{letter-spacing:1.2px}#reference{font-size:9px}#fruit-links button{position:absolute;transform:translate(-50%,-20%);width:70px;height:90px;border:1px solid transparent;border-radius:50%;opacity:0;pointer-events:none;transition:border-color .4s,opacity .5s}#fruit-links button:hover{border-color:#8a786180}#fruit-links span{position:absolute;left:65px;top:35px;font:18px Georgia;letter-spacing:0;white-space:nowrap;color:#4d4437;background:#f6efdfb8;padding:2px 5px}.ready #fruit-links button{opacity:1;pointer-events:auto}dialog{background:#f7f0e1;border:1px solid #baab90;color:#4f473b;padding:45px;width:min(500px,91vw);box-shadow:0 20px 120px #51433122}dialog::backdrop{background:#4d412b36;backdrop-filter:blur(5px)}dialog h2{font:42px Georgia;margin:17px 0}dialog p{font-size:15px;line-height:1.9;color:#82745e}.eyebrow{font:9px Arial;letter-spacing:2px}.placeholder{font-style:italic;font-size:12px}.close{position:absolute;right:15px;top:10px;font-size:24px}#reference-dialog{width:min(1100px,94vw);padding:35px 25px 15px}#reference-dialog img{width:100%;display:block}#reference-dialog p{font:11px Arial;text-align:center}@media(max-width:700px){header{top:20px;align-items:start}#wordmark{font-size:23px}nav{gap:8px;flex-wrap:wrap;justify-content:end;max-width:250px}nav button{font-size:9px}.intro{bottom:130px}.intro h1{font-size:34px}.intro p{font-size:9px;max-width:270px;line-height:1.8}footer{flex-wrap:wrap;bottom:15px}.controls{width:100%;justify-content:space-between}footer .explore{font-size:8px;max-width:60%;line-height:1.7}#fruit-links span{font-size:12px;left:40px;top:25px}#fruit-links button{width:45px;height:65px}#reference{font-size:8px}}

@media(max-width:700px){#fruit-links button:nth-child(3) span{left:auto;right:40px}}
#fruit-links button:hover{border-color:transparent}#fruit-links span{transition:color .25s}#fruit-links span::after{content:' ↗';display:inline-block;opacity:0;transform:translate(-3px,2px);transition:opacity .25s,transform .25s}#fruit-links button:hover span,#fruit-links button:focus-visible span{color:#784e6a}#fruit-links button:hover span::after,#fruit-links button:focus-visible span::after{opacity:1;transform:translate(0,0)}

#fruit-links span{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s,visibility .22s,color .25s}#fruit-links button:hover span,#fruit-links button:focus-visible span{opacity:1;visibility:visible}

footer .explore{font:italic 24px/1.25 Georgia,'Times New Roman',serif;color:#59412e;letter-spacing:.2px;text-align:right;text-shadow:0 1px 8px #f8f1e0}
@media(max-width:700px){footer .explore{font-size:20px;max-width:100%;margin-left:auto;line-height:1.3}}

footer .replay{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:transparent;color:#59412e;font:italic 32px/1 Georgia,'Times New Roman',serif;letter-spacing:0;cursor:pointer}footer .replay span{display:block;transition:transform .3s,color .3s}footer .replay:hover span{transform:rotate(-25deg);color:#784e6a}footer .replay:focus-visible{outline:1px solid #785a71;outline-offset:3px;border-radius:50%}@media(prefers-reduced-motion:reduce){footer .replay span{transition:none}footer .replay:hover span{transform:none}}
/* V3–17: viewport and touch composition. Desktop artwork and type remain intact. */
#safe-area-probe{position:fixed;visibility:hidden;pointer-events:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
button,a{-webkit-tap-highlight-color:transparent}button{touch-action:manipulation}dialog{max-height:calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}dialog .close{width:44px;height:44px;right:5px;top:5px;display:grid;place-items:center;z-index:1}body:has(dialog[open]){overflow:hidden}
@media(max-width:760px),(max-width:980px) and (max-height:650px) and (orientation:landscape){
 html,body{width:100%;overflow-x:hidden}main{height:100svh;min-height:0}header{left:max(22px,env(safe-area-inset-left));right:max(22px,env(safe-area-inset-right));top:calc(22px + env(safe-area-inset-top))}#wordmark{font-size:25px;letter-spacing:-.5px}
 .intro{left:max(24px,env(safe-area-inset-left));top:calc(100px + env(safe-area-inset-top));bottom:auto;max-width:320px}.intro h1{font-size:clamp(36px,10.5vw,45px);line-height:1.07;letter-spacing:-1.2px;max-width:290px;margin-bottom:15px}.intro p{font-size:11px;line-height:1.8;letter-spacing:.7px;max-width:255px}
 footer{left:max(17px,env(safe-area-inset-left));right:max(22px,env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));flex-wrap:nowrap;gap:7px;min-height:48px}footer .explore{font-size:clamp(18px,5.4vw,23px);max-width:225px;line-height:1.22}footer .replay,footer .oreo-sound{width:44px;height:44px;flex:0 0 44px;margin:0}footer .oreo-sound svg{width:21px;height:21px}
 #fruit-links button{width:48px;height:48px;transform:translate(-50%,-50%);border-radius:50%}#fruit-links span{top:33px;left:50%;right:auto!important;transform:translateX(-50%);font:12px/1.2 Georgia;letter-spacing:0;padding:3px 5px;background:#f6efdfc7;border-radius:2px}#fruit-links span::after{display:none}#fruit-links button:nth-child(3) span{left:auto;right:0!important;transform:translateX(10px)}
 dialog{width:calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right));max-width:500px;padding:35px 25px 25px;margin:auto;border-radius:3px;max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}dialog h2{font-size:34px;margin:15px 0}dialog p{font-size:15px;line-height:1.8}.eyebrow{font-size:9px}dialog::backdrop{backdrop-filter:blur(3px)}
}
@media(max-width:760px) and (max-height:700px) and (orientation:portrait){.intro{top:calc(80px + env(safe-area-inset-top))}.intro h1{font-size:34px;max-width:240px;margin-bottom:10px}.intro p{font-size:10px;max-width:245px}footer .explore{font-size:19px}}
@media(max-width:980px) and (max-height:650px) and (orientation:landscape){header{top:calc(14px + env(safe-area-inset-top))}#wordmark{font-size:22px}.intro{top:calc(82px + env(safe-area-inset-top));max-width:205px}.intro h1{font-size:30px;max-width:200px}.intro p{font-size:10px;max-width:185px}footer{bottom:calc(6px + env(safe-area-inset-bottom))}footer .explore{font-size:20px}#fruit-links span{font-size:11px}}

@media(hover:none) and (min-width:761px) and (min-height:651px){#fruit-links span{font-size:14px;left:50%;top:55px;transform:translateX(-50%)}#fruit-links span::after{display:none}}
/* V3–20: keep the complete composition within the browser's content viewport. */
@media(max-width:1180px){
 main{min-height:0;height:var(--visible-viewport-height,100vh);height:min(100svh,var(--visible-viewport-height,100svh))}
 dialog{max-height:calc(min(100dvh,var(--visible-viewport-height,100dvh)) - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
}
@media(max-width:760px),(max-width:980px) and (max-height:650px) and (orientation:landscape){
 footer{bottom:max(24px,calc(14px + env(safe-area-inset-bottom)))}
}
@media(min-width:761px) and (max-width:1180px){
 header{top:max(25px,calc(14px + env(safe-area-inset-top)));left:max(3%,env(safe-area-inset-left));right:max(3%,env(safe-area-inset-right))}
 .intro{bottom:calc(91px + env(safe-area-inset-bottom))}
 footer{bottom:max(20px,calc(14px + env(safe-area-inset-bottom)));left:max(3%,env(safe-area-inset-left));right:max(3%,env(safe-area-inset-right))}
}