*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#070908;color:#f4f1e8}body{font-family:Inter,Helvetica Neue,Arial,sans-serif}main{height:100svh;min-height:440px;overflow:hidden;position:relative;background:radial-gradient(ellipse at 72% 47%,#141c19 0%,#070908 64%)}canvas,.shade{position:absolute;inset:0;width:100%;height:100%}.shade{background:linear-gradient(90deg,rgba(5,8,7,.81),rgba(5,8,7,.28) 48%,transparent 80%),linear-gradient(0deg,rgba(5,8,7,.58),transparent 40%,rgba(5,8,7,.2));pointer-events:none}header{position:absolute;left:5.8vw;top:6.8vh;z-index:3}header img{width:clamp(150px,15vw,230px);height:auto;display:block}h1{position:absolute;z-index:3;left:8.1vw;top:44%;transform:translateY(-50%);font-size:clamp(46px,6.6vw,108px);line-height:1.06;letter-spacing:-.055em;font-weight:400;margin:0;text-wrap:balance;text-shadow:0 2px 30px #07090866}h1 span{color:#c6c7bd}.lens{position:absolute;left:64%;top:49%;width:min(42vw,620px);aspect-ratio:1;transform:translate(-50%,-50%) rotate(-12deg) scaleX(.93);border-radius:50%;border:1px solid rgba(233,221,196,.52);box-shadow:inset 0 0 1px 1px #e1d1ac12,0 0 1px 1px #ded1b116,0 0 50px 5px #d4c6a205;z-index:2;pointer-events:none}.lens:before{content:"";position:absolute;inset:-3px;border-radius:50%;background:conic-gradient(from 205deg,transparent 0deg,#f2e4c663 28deg,transparent 77deg,transparent 169deg,#c8e0d433 202deg,transparent 243deg);mask:radial-gradient(farthest-side,transparent calc(100% - 1px),#000 100%)}.glass{position:absolute;inset:2px;border-radius:50%;background:linear-gradient(135deg,#e1ddd006,transparent 46%,#91b1a103);box-shadow:inset 0 0 40px #b4bdb503}button{position:absolute;right:3.5vw;bottom:4vh;z-index:4;width:38px;height:38px;border:1px solid #dad6c829;background:#090d0b66;border-radius:50%;color:#d7d8cd;cursor:pointer;display:grid;place-items:center}button:hover,button:focus-visible{border-color:#dedbc6aa;background:#26332a88;outline-offset:5px}button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.2}header,h1{animation:appear 1.7s ease-out both}h1{animation-delay:.15s}@keyframes appear{from{opacity:0;filter:blur(7px)}to{opacity:1;filter:blur(0)}}@media(max-width:650px){header{left:7vw;top:5vh}header img{width:160px}h1{left:7vw;top:67%;font-size:clamp(42px,10.8vw,66px)}.lens{left:57%;top:39%;width:77vw}.shade{background:linear-gradient(0deg,#070908e8,transparent 80%)}button{right:6vw;bottom:4vh}}@media(prefers-reduced-motion:reduce){header,h1{animation:none}}
/* Second direction: a clearly legible mast silhouette and a faster outdoor passage. */
main{background:radial-gradient(ellipse at 62% 40%,#1b2822 0%,#0b110e 48%,#050806 100%)}
.shade{background:linear-gradient(90deg,#040806b8,rgba(5,8,7,.18) 48%,transparent 83%),linear-gradient(0deg,#040806aa,transparent 42%,#04080644)}
h1{font-size:clamp(46px,6.1vw,94px);left:7.8vw;top:51%;text-shadow:0 2px 34px #0009}
.lens{display:none}
.mast{position:absolute;z-index:2;pointer-events:none;height:83vh;max-height:850px;width:auto;left:75%;top:53%;transform:translate(-50%,-50%);opacity:.91;filter:drop-shadow(0 0 13px #d1dec52b)}
@media(max-width:650px){.mast{height:57vh;left:62%;top:35%;opacity:.82}h1{top:73%;font-size:clamp(40px,10vw,62px);left:7vw}.shade{background:linear-gradient(0deg,#040806e0,transparent 82%)}}
/* Circle-only direction: enlarged, centered and softly translucent. */
.mast{left:50%;top:50%;width:min(78vw,88vh);height:auto;max-height:none;transform:translate(-50%,-50%);opacity:1;filter:none}
@media(max-width:650px){.mast{left:50%;top:43%;width:94vw;height:auto;opacity:1}}
/* Main double circle and a single centered line underneath. */
.hero{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:clamp(22px,4vh,44px);padding:100px 22px 35px;pointer-events:none}
.hero .mast{position:static;transform:none;width:min(52vw,55vh);height:auto;max-height:none;opacity:1;flex-shrink:0}
.hero h1{position:static;transform:none;margin:0;font-size:clamp(25px,3.5vw,52px);line-height:1.15;letter-spacing:-.045em;text-align:center;white-space:nowrap;text-wrap:nowrap;font-weight:400}
@media(max-width:650px){.hero{padding-top:85px;gap:30px}.hero .mast{width:min(82vw,49vh)}.hero h1{font-size:clamp(20px,5.6vw,34px)}}
@media(max-height:500px) and (min-width:651px){.hero{padding-top:40px;gap:14px}.hero .mast{width:51vh}.hero h1{font-size:26px}}
/* Soft lens halo above the more legible course landscape. */
.hero .mast{filter:drop-shadow(0 0 3px #eef4cfb0) drop-shadow(0 0 12px #d8ebbb80) drop-shadow(0 0 30px #b6cf9e45)}
.shade{background:linear-gradient(0deg,#040806de,transparent 39%,#04080626),linear-gradient(90deg,#0408063d,transparent 30%,transparent 70%,#0408063d)}
.hero h1{text-shadow:0 2px 18px #000,0 0 36px #000}
/* A quiet, luminous presence within the original inner camera circle. */
.presence{position:relative;width:min(52vw,55vh);aspect-ratio:1;flex-shrink:0}
.hero .presence .mast{display:block;width:100%;height:100%}
.core{position:absolute;left:50%;top:50%;width:24.58%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;isolation:isolate;animation:core-breathe 6.8s ease-in-out infinite}
.core::before{content:"";position:absolute;inset:-27%;border-radius:50%;background:radial-gradient(circle,#dbe7b329 12%,#afcfa51e 35%,#cfddaa0c 51%,transparent 71%);filter:blur(8px);animation:halo-breathe 6.8s ease-in-out infinite}
.core-light{position:absolute;inset:3%;border-radius:50%;background:radial-gradient(ellipse at 35% 28%,#f4ebcc45 0%,#ccdabf21 29%,#8cab8c0b 58%,transparent 78%);box-shadow:inset 0 0 19px #d8e4b51d;animation:light-drift 11s ease-in-out infinite alternate}
.core-orbit{position:absolute;inset:-1px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg,#d4eac63b 35deg,#fff6d9d9 72deg,#d5e8b94d 110deg,transparent 160deg,transparent 360deg);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));filter:drop-shadow(0 0 4px #ebefc7);animation:light-orbit 17s linear infinite}
@keyframes core-breathe{0%,100%{opacity:.54;transform:translate(-50%,-50%) scale(.98)}48%{opacity:1;transform:translate(-50%,-50%) scale(1.025)}}
@keyframes halo-breathe{0%,100%{opacity:.35;transform:scale(.93)}48%{opacity:1;transform:scale(1.13)}}
@keyframes light-drift{from{transform:rotate(-25deg);opacity:.5}to{transform:rotate(65deg);opacity:.95}}
@keyframes light-orbit{to{transform:rotate(360deg)}}
.motion-paused .core,.motion-paused .core::before,.motion-paused .core-light,.motion-paused .core-orbit{animation-play-state:paused}
@media(max-width:650px){.presence{width:min(82vw,49vh)}}
@media(max-height:500px) and (min-width:651px){.presence{width:51vh}}
@media(prefers-reduced-motion:reduce){.core,.core::before,.core-light,.core-orbit{animation:none}}
/* Contact and understated, accessible exploration controls. */
.hero{gap:clamp(15px,2.6vh,28px);padding-top:84px;padding-bottom:110px}
.contact{pointer-events:auto;display:flex;align-items:center;gap:16px;color:#e9eadc;text-decoration:none;padding:13px 19px;border:1px solid #dbe5c93b;border-radius:30px;background:linear-gradient(110deg,#c5d2af14,#c5d2af05);backdrop-filter:blur(10px);font-size:13px;letter-spacing:.02em;transition:border-color .25s,background .25s,box-shadow .25s}
.contact-email{font-size:12px;color:#b1bbaa}.contact svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.3}.contact:hover,.contact:focus-visible{border-color:#dbe5c990;background:#c5d2af1c;box-shadow:0 0 22px #d3e6af12;outline-offset:5px}
canvas{cursor:grab;touch-action:none}canvas.is-dragging{cursor:grabbing}.drive-ui{position:absolute;z-index:5;bottom:65px;left:50%;transform:translateX(-50%);display:flex;gap:13px;align-items:center;white-space:nowrap;color:#b1bba9;font-size:11px;letter-spacing:.02em}
#tour{position:static;width:auto;height:auto;border-radius:20px;padding:8px 13px;font:inherit;display:block;color:#e1e7d8;background:#0b110bb8;border-color:#cfdbc448;white-space:nowrap}
footer{position:absolute;z-index:4;bottom:26px;left:0;right:0;text-align:center;color:#8b9786;font-size:10px;letter-spacing:.055em;pointer-events:none}
#motion{bottom:24px;right:3.5vw}
@media(max-width:650px){.hero{padding:90px 16px 140px;gap:22px}.presence{width:min(77vw,41vh)}.hero h1{font-size:clamp(19px,5.1vw,31px)}.contact{gap:11px;padding:12px 16px}.contact-email{font-size:11px}.drive-ui{bottom:77px;flex-direction:column;gap:9px;font-size:10px}footer{bottom:30px;left:14px;right:55px;font-size:8px}#motion{bottom:21px;right:15px}}
@media(max-height:600px) and (min-width:651px){.hero{padding-top:44px;padding-bottom:90px;gap:12px}.presence{width:42vh}.hero h1{font-size:28px}.contact{padding:9px 15px}.drive-ui{bottom:43px}footer{bottom:16px}#motion{bottom:13px}}
/* Contact chooser works without a local mail application. */
button.contact{position:static;width:auto;height:auto;display:flex;font-family:inherit;cursor:pointer}
#contactDialog{padding:36px;width:min(440px,calc(100vw - 36px));color:#e9eadc;background:radial-gradient(ellipse at top right,#233024,#0b110d 75%);border:1px solid #d5dfbd4a;border-radius:24px;box-shadow:0 24px 100px #000a}
#contactDialog::backdrop{background:#020603bb;backdrop-filter:blur(7px)}
#contactDialog .dialog-close{position:absolute;right:15px;top:14px;bottom:auto;width:30px;height:30px;font-size:22px;color:#b8c3ad;background:transparent}
.contact-kicker{font-size:10px;letter-spacing:.22em;color:#acb99d;margin:0 0 22px}#contactTitle{font-size:34px;font-weight:400;letter-spacing:-.04em;margin:0}.contact-sub{color:#a8b5a0;font-size:13px;margin:10px 0 25px}
#contactAddress{width:100%;border:0;background:transparent;color:#e5e9d8;font:16px Helvetica,Arial,sans-serif;outline-offset:7px;padding:4px 0 18px}
.contact-options{display:grid;gap:9px}.contact-options a,.contact-options button{position:static;display:flex;align-items:center;justify-content:space-between;width:100%;height:auto;padding:13px 15px;border:1px solid #a9b89c38;border-radius:12px;background:#e5eac806;color:#dde5d2;font:13px Helvetica,Arial,sans-serif;text-decoration:none;text-align:left}
.contact-options a:hover,.contact-options button:hover{background:#dbe4bd16;border-color:#c6d4af7a}.contact-options a:focus-visible{outline:2px solid #c6d4af;outline-offset:3px}.contact-options .gmail-option{background:#dbe4bd16;border-color:#c6d4af65}
#copyStatus{min-height:15px;font-size:11px;color:#b7c7a5;margin:15px 0 0}
.contact-sub{line-height:1.55;max-width:31ch}.mobile-mail-label{display:none}
@media(max-width:650px),(hover:none) and (pointer:coarse){.contact-options .gmail-option{display:none}.desktop-mail-label{display:none}.mobile-mail-label{display:inline}.contact-options .email-app-option{background:#dbe4bd16;border-color:#c6d4af65}}