@font-face{font-family:Kargo;src:url('assets/kargo-regular.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:Kargo;src:url('assets/kargo-medium.woff') format('woff');font-weight:500;font-display:swap}
:root{color-scheme:dark;font-family:Kargo,Arial,sans-serif;color:#eeedf5;background:#000;font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible{outline:2px solid #ffe3ac;outline-offset:5px}button:disabled{cursor:wait;opacity:.4}
#experience{position:relative;min-height:680px;height:100svh;overflow:hidden;background:#000;isolation:isolate}
#studio-background{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
header{position:absolute;z-index:4;inset:max(28px,env(safe-area-inset-top)) max(36px,env(safe-area-inset-right)) auto max(36px,env(safe-area-inset-left));display:flex;align-items:center;justify-content:space-between;gap:20px}
#museum{display:flex;align-items:center;min-height:44px}.wordmark{display:block;width:190px;height:auto;filter:brightness(0) invert(1);opacity:.92}
header nav{display:flex;align-items:center;gap:10px}#language,#lab{display:grid;place-items:center;background:transparent;border:1px solid #ffffff30;border-radius:24px;min-width:44px;height:44px;font-size:14px}#lab{min-width:48px}#lab:hover,#language:hover{background:#ffffff0d;border-color:#ffffff70}
.title{position:absolute;left:6%;top:21%;z-index:2;pointer-events:none;max-width:35%}.title p{font-size:14px;color:#b3b3ba;margin:0 0 18px;line-height:1.5}h1{font-weight:400;font-size:clamp(34px,4.3vw,65px);letter-spacing:-.035em;line-height:1.08;margin:0 0 14px}.title>span{display:block;font-size:19px;color:#b3b3ba;line-height:1.4}
.section-control{display:flex;align-items:center;gap:10px;min-height:44px;margin-top:22px;padding:9px 17px 9px 13px;pointer-events:auto;border:1px solid #ffffff38;border-radius:24px;background:#14151970;font-size:15px;transition:border-color .25s,background .25s}
.section-control>span:first-child{font-size:23px;line-height:1;transition:transform .3s}.section-control:hover{background:#32343e90;border-color:#ffffff99}.section-control[aria-pressed=true]{color:#b7f4f5;border-color:#87d9dc88}.section-control[aria-pressed=true]>span:first-child{transform:rotate(45deg)}
.scene{position:absolute;left:58%;top:49%;height:min(100%,1100px);aspect-ratio:3/4;transform:translate(-50%,-50%);isolation:isolate}
#render{display:block;width:100%;height:100%;mask-image:linear-gradient(to right,transparent,#000 17%,#000 80%,transparent),linear-gradient(to bottom,transparent,#000 10%,#000 86%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(to right,transparent,#000 17%,#000 80%,transparent),linear-gradient(to bottom,transparent,#000 10%,#000 86%,transparent);-webkit-mask-composite:source-in}
.touchpoint{position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;background:none;border:0;padding:22px;touch-action:none;user-select:none;min-width:64px;min-height:64px;transform:translate(-50%,-50%);overflow:visible;border-radius:50%}
.touch-ring{width:52px;height:52px;border:1px solid #e5a56299;border-radius:50%;display:grid;place-items:center;background:#24191180;transition:background .25s,border-color .25s;box-shadow:0 0 0 8px #ea9a380a;color:#ffc079}
.touchpoint:hover .touch-ring{border-color:#ffe5b5}.touch-label{position:absolute;white-space:nowrap;font-size:15px;text-shadow:0 2px 6px #000}.fire{left:50%;top:76.7%}.fire svg{width:25px;height:25px}.fire .touch-label{left:50%;top:calc(50% + 37px);transform:translateX(-50%);color:#f7d0a0}.fire[aria-pressed=true] .touch-ring{border-color:#ffe5b5}
.inside-label{position:absolute;font-size:14px;letter-spacing:.01em;color:#b1e6ea;opacity:0;transition:opacity .5s;pointer-events:none;text-shadow:0 1px 8px #000}.inside-label:before{content:'';display:inline-block;vertical-align:middle;width:24px;height:1px;background:#b1e6ea80;margin-right:8px}#water-label{left:65%;top:55%}#steam-label{left:65%;top:43%}[data-inside=true] .inside-label{opacity:1}
footer{position:absolute;z-index:4;left:6%;right:36px;bottom:max(30px,env(safe-area-inset-bottom));pointer-events:none}.state-index{font-size:12px;letter-spacing:.15em;color:#eeedf5}.state-copy p{font-size:17px;margin:9px 0 0;line-height:1.45;max-width:430px;text-wrap:pretty}
.loading{position:absolute;z-index:6;left:50%;top:50%;transform:translate(-50%,-50%);font-size:16px;padding:18px 24px;background:#15161cec;border:1px solid #ffffff20;border-radius:6px;text-align:center}.loading[hidden]{display:none}.error{position:absolute;z-index:8;bottom:110px;left:50%;transform:translateX(-50%);width:min(90%,470px);font-size:16px;text-align:center;padding:20px;background:#24252c;border:1px solid #edbb78}.error button{background:transparent;border:0;text-decoration:underline;padding:10px}
@media(max-width:760px){
 #experience{min-height:690px}header{inset:max(20px,env(safe-area-inset-top)) 22px auto}.wordmark{width:164px}
 .title{top:94px;left:25px;width:calc(100% - 50px);max-width:none}.title p{font-size:12px;margin-bottom:8px}h1{font-size:35px;line-height:1.1;margin-bottom:8px}.title>span{font-size:16px}.section-control{margin-top:12px;font-size:14px;padding:8px 15px 8px 12px}
 .scene{left:50%;top:56%;height:min(82%,174vw)}.touch-label{font-size:14px}
 footer{left:25px;right:25px;bottom:max(24px,env(safe-area-inset-bottom))}.state-copy p{font-size:15px;max-width:100%}.state-index{font-size:11px}.inside-label{font-size:13px}.inside-label:before{width:12px}
}
@media(max-width:380px){header{gap:12px}.wordmark{width:140px}.title{top:84px;left:20px;width:calc(100% - 40px)}h1{font-size:30px}.title>span{font-size:15px}.scene{height:min(70%,162vw);top:calc(54% + 30px)}.touch-label{font-size:13px}footer{left:20px;right:20px}}
@media(min-width:761px) and (max-height:730px){.scene{height:100%;left:64%}.title{top:22%}#experience{min-height:590px}h1{font-size:43px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media(min-resolution:1.5dppx){.touch-label,.inside-label{-webkit-font-smoothing:antialiased}}

.static-fallback{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}

/* Keep press-and-hold native selection, callouts and tap overlays off this control. */
.fire,.fire *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.fire{-webkit-appearance:none;appearance:none}
.fire *{pointer-events:none;-webkit-user-drag:none}

/* Interior framing follows the same continuous camera progress as the render. */
.fire{top:calc(76.7% + var(--close,0)*6.3%)}
#water-label{left:calc(65% + var(--close,0)*10%);top:calc(55% + var(--close,0)*14%)}
#steam-label{left:calc(65% + var(--close,0)*7%);top:calc(43% + var(--close,0)*3%)}

/* The circular fill grows from its centre with the simulated flame, not focus. */
.fire .touch-ring{position:relative;overflow:hidden;isolation:isolate}
.fire .touch-ring::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#e69b49 0%,#c66a2f 70%,#a84d23 100%);transform:scale(var(--fire-fill,0));transform-origin:center;pointer-events:none}
.fire svg{position:relative;z-index:1;color:#ffe2ae}
.fire .touch-label{width:225px;max-width:75vw;white-space:normal;line-height:1.25;text-align:center}