button{font:inherit}.experience{position:relative;min-height:100svh;overflow:hidden;background:#020806;isolation:isolate}
    .backdrop{position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(1,7,5,.97) 0%,rgba(1,7,5,.76) 33%,rgba(1,7,5,.16) 61%,rgba(1,7,5,.34) 100%),linear-gradient(0deg,rgba(1,7,5,.74),transparent 48%),url("assets/hero-globe.png");background-size:cover;background-position:center;filter:saturate(.9) brightness(.72);transform:scale(1.02);z-index:-4}
    .backdrop:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 45%,rgba(0,232,137,.1),transparent 31%),linear-gradient(0deg,rgba(0,0,0,.2),transparent)}
    .sound{display:flex;gap:10px;align-items:center;padding:11px 15px;border:1px solid rgba(255,255,255,.24);border-radius:999px;background:rgba(2,8,6,.55);backdrop-filter:blur(14px);color:#fff;cursor:pointer;transition:.25s ease}
    .sound:hover,.sound:focus-visible{border-color:var(--green);background:rgba(0,232,137,.1)}.sound-dot{width:9px;height:9px;border-radius:50%;background:#79837e;box-shadow:0 0 0 0 rgba(0,232,137,.4)}.sound.on .sound-dot{background:var(--green);animation:pulse 2s infinite}
    .intro{position:absolute;left:clamp(22px,6vw,104px);top:50%;transform:translateY(-50%);width:min(390px,40vw);z-index:10}.experience .eyebrow{font-size:13px;font-weight:800;letter-spacing:.19em;color:var(--green);margin-bottom:17px}.intro h1{font-size:clamp(45px,6.5vw,92px);line-height:.87;letter-spacing:-.065em;margin:0;font-weight:750}.intro h1 span{display:block;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.58)}.intro p{font-size:17px;line-height:1.6;color:rgba(243,247,244,.71);max-width:340px;margin:24px 0 0}.hint{position:absolute;left:clamp(22px,6vw,104px);bottom:38px;color:rgba(255,255,255,.55);font-size:13px;letter-spacing:.08em;z-index:10}.hint b{color:#fff}
    .orb{position:absolute;width:min(45vw,570px);aspect-ratio:1;right:5.3vw;top:50%;transform:translateY(-50%);border-radius:50%;border:1px solid rgba(216,195,143,.35);box-shadow:inset 0 0 50px rgba(0,232,137,.16),0 0 80px rgba(0,232,137,.08);z-index:-1}.orb:before,.orb:after{content:"";position:absolute;inset:10%;border-radius:50%;border:1px solid rgba(0,232,137,.25);transform:rotate(38deg) scaleX(.42)}.orb:after{transform:rotate(-30deg) scaleY(.45);border-color:rgba(216,195,143,.27)}
    .project{position:absolute;z-index:5;border:0;padding:0;background:#05100b;overflow:hidden;cursor:pointer;box-shadow:0 18px 50px rgba(0,0,0,.55);will-change:transform,opacity;transition:filter .25s,box-shadow .25s,opacity .35s;outline:none}.project img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s ease}.project:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.65),transparent 55%);border:1px solid rgba(255,255,255,.28);border-radius:inherit}.project span{position:absolute;z-index:2;left:13px;bottom:11px;font-size:11px;font-weight:800;letter-spacing:.09em;color:#fff}.project:hover img,.project:focus-visible img{transform:scale(1.08)}.project:hover,.project:focus-visible{filter:brightness(1.12);box-shadow:0 0 0 2px var(--green),0 28px 64px rgba(0,0,0,.68);z-index:12}.shape-wide{width:190px;height:112px;border-radius:5px}.shape-tall{width:120px;height:175px;border-radius:60px 60px 8px 8px}.shape-square{width:135px;height:135px;border-radius:50%}.shape-card{width:156px;height:112px;border-radius:5px 35px 5px 5px}
    .experience.paused .project:not(.active){opacity:.12!important;filter:blur(3px)}.project.active{z-index:30;box-shadow:0 0 0 2px var(--green),0 35px 90px rgba(0,0,0,.82)}
    .story{position:absolute;z-index:29;right:clamp(22px,7vw,115px);top:50%;transform:translateY(-50%) translateX(26px);width:min(420px,44vw);padding:31px 32px 29px;border-left:3px solid var(--green);background:linear-gradient(115deg,rgba(2,11,8,.98),rgba(3,18,12,.88));box-shadow:0 35px 90px rgba(0,0,0,.72);backdrop-filter:blur(18px);opacity:0;pointer-events:none;transition:.38s ease}.story.show{opacity:1;transform:translateY(-50%) translateX(0);pointer-events:auto}.story small{color:var(--green);font-size:12px;font-weight:800;letter-spacing:.16em}.story h2{font-size:clamp(29px,3vw,44px);letter-spacing:-.04em;line-height:1;margin:12px 0 18px}.story p{font-size:16px;line-height:1.65;color:rgba(255,255,255,.74);margin:0 0 22px}.story dl{display:grid;grid-template-columns:90px 1fr;gap:8px 15px;margin:0 0 24px;font-size:13px}.story dt{color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.08em}.story dd{margin:0;color:#fff}.close{padding:11px 15px;border:1px solid rgba(255,255,255,.27);background:transparent;color:#fff;cursor:pointer}.close:hover{border-color:var(--green);color:var(--green)}
    .flash{position:absolute;inset:0;pointer-events:none;z-index:25;background:radial-gradient(circle at 64% 48%,rgba(0,232,137,.3),transparent 27%);opacity:0}.flash.go{animation:flash .65s ease}
    @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(0,232,137,.4)}50%{box-shadow:0 0 0 7px rgba(0,232,137,0)}}@keyframes flash{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
    @media(max-width:760px){.intro{top:25%;width:78vw}.intro h1{font-size:50px}.intro p{font-size:15px}.orb{width:430px;right:-210px;top:62%}.hint{bottom:20px}.shape-wide{width:145px;height:88px}.shape-tall{width:95px;height:140px}.shape-square{width:106px;height:106px}.shape-card{width:124px;height:92px}.story{left:20px;right:20px;top:auto;bottom:22px;transform:translateY(20px);width:auto}.story.show{transform:translateY(0)}.story p{font-size:14px}.brand{font-size:11px}}
    @media(prefers-reduced-motion:reduce){.project{transition:none}.sound-dot{animation:none!important}}
  
/* Existing site header stays above the motion sample. */
.experience{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.experience .sound{position:absolute;top:115px;right:clamp(24px,5vw,80px);z-index:12}
.experience .project{left:0;top:0;min-height:0;opacity:0;pointer-events:none}
.experience .story-link{display:inline-block;margin:0 10px 12px 0;padding:11px 15px;color:#00140a;background:var(--green);font-weight:800;font-size:13px;text-decoration:none}
.experience .story-link:hover{filter:brightness(1.15)}
@media(max-width:760px){.experience .sound{top:105px;right:20px;padding:8px 11px;font-size:12px}}
.page-sound{position:fixed;z-index:24;left:22px;bottom:24px;font-size:12px;letter-spacing:.08em;font-weight:800}
@media(max-width:760px){.page-sound{left:12px;bottom:15px;padding:9px 11px}}
/* Wider frame keeps the window display recognizable as it emerges. */
.experience .project-feature{width:225px;height:145px}
@media(max-width:760px){.experience .project-feature{width:160px;height:104px}}