*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#000;color:#eee;font-family:Arial,Helvetica,sans-serif}body{user-select:none;-webkit-user-select:none;touch-action:none}main{height:100%;display:flex;align-items:center;justify-content:center}#aperture{position:relative;width:min(85svh,94vw);height:min(85svh,94vw);border-radius:50%;overflow:hidden;isolation:isolate;outline:none;cursor:default;touch-action:none;background:#7ba6bf}#scene,#scene canvas,.optics{position:absolute;inset:0;width:100%;height:100%;display:block}.optics{pointer-events:none;border-radius:50%;background:radial-gradient(circle,transparent 47%,rgba(21,24,23,.02) 75%,rgba(0,0,0,.11) 96%,rgba(0,0,0,.4) 100%);box-shadow:inset 0 0 4px 2px #000}.optics:after{content:"";position:absolute;inset:0;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.7' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}#instruction{position:absolute;bottom:2.65svh;margin:0;font-size:10px;letter-spacing:2.8px;font-weight:400;color:#969696;transition:opacity 2s;pointer-events:none}body.started #instruction{opacity:0}nav{position:fixed;bottom:20px;right:23px;display:flex;gap:15px}button{appearance:none;border:0;background:transparent;color:#686868;padding:6px;cursor:pointer;line-height:0}button:hover,button:focus-visible{color:#eee;outline:none}button svg{height:17px;width:17px}#error{position:absolute;top:45%;padding:20px;text-align:center;font-size:13px}@media(max-width:600px){nav{bottom:18px;right:14px;gap:6px}#instruction{bottom:10svh;font-size:9px;letter-spacing:2px}}

/* Local optical softness follows the projected house; the original scene stays sharp. */
.focus-spot{position:absolute;pointer-events:none;border-radius:50%;left:41.5%;top:37%;width:17%;height:17%;backdrop-filter:blur(.95px);-webkit-backdrop-filter:blur(.95px);mask-image:radial-gradient(circle closest-side,#000 0%,#000 24%,rgba(0,0,0,.8) 45%,rgba(0,0,0,.32) 72%,transparent 100%);-webkit-mask-image:radial-gradient(circle closest-side,#000 0%,#000 24%,rgba(0,0,0,.8) 45%,rgba(0,0,0,.32) 72%,transparent 100%)}