/* Entrance: ink on wet glass, a quiet room beyond. */
#threshold{background:transparent;z-index:8;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none}
#threshold.wiping{cursor:grabbing}
.entry-grid{background-image:linear-gradient(to right,#0a121738 1px,transparent 1px),linear-gradient(to bottom,#0a121738 1px,transparent 1px);background-size:16.6667vw 25vh;opacity:.7;animation:grid-arrive 1.8s ease both;transition:opacity .8s,transform 2.6s cubic-bezier(.4,0,.2,1)}
.entry-grid:after{display:none}
body:not(.entered) header{left:3.4%;right:3.4%;top:5.4%;color:#c1cccd;pointer-events:none;animation:detail-arrive 1.2s .25s both}
body:not(.entered) .identity{font-size:23px;color:inherit;pointer-events:auto;letter-spacing:-1px}
.entry-navigation{display:flex;gap:clamp(26px,5vw,85px);margin-left:auto;pointer-events:auto}
.entry-navigation button{font:inherit;font-size:13px;border:0;padding:12px 0;color:#c1cccd;background:transparent;position:relative;cursor:pointer}
.entry-navigation button:after{content:'';position:absolute;left:0;bottom:5px;right:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.entry-navigation button:hover:after,.entry-navigation button:focus-visible:after{transform:scaleX(1)}
.entered .entry-navigation{display:none}
body:not(.entered) #reset,body:not(.entered) #ceiling-toggle{display:none}
#intro{inset:0;max-width:none}
#intro .eyebrow{display:none}
#intro h1{left:3.1%;top:20%;font-family:Arial,Helvetica,sans-serif;font-size:min(24.4vw,36.5vh);font-weight:750;letter-spacing:-.09em;line-height:.8;color:#050c10;mix-blend-mode:normal;filter:none;opacity:1;animation:none;transform:none}
#intro h1 .name-line{overflow:visible;padding:0 .1em .08em 0;white-space:nowrap;background:none;color:inherit}
#intro h1 .name-line:last-child{margin-left:20.5vw;margin-top:2vh}
#intro h1 b{--offset:0em;animation:type-settle 1.5s cubic-bezier(.18,.7,.18,1) both;animation-delay:calc(.12s + var(--letter,0)*55ms);transform:translateY(var(--offset));transition:transform 1.1s cubic-bezier(.65,0,.2,1),opacity .6s;will-change:auto}
#intro h1 b:nth-child(2){--letter:1;--offset:-.09em}
#intro h1 b:nth-child(3){--letter:2;--offset:.13em;margin-left:.07em}
#intro h1 .name-line:last-child b:nth-child(1){--letter:3}
#intro h1 .name-line:last-child b:nth-child(2){--letter:4;--offset:.08em}
#intro h1 .name-line:last-child b:nth-child(3){--letter:5;--offset:.25em}
#intro .intro-sub{left:3.4%;bottom:6.6%;font-size:12px;line-height:1.3;color:#c1cccd;letter-spacing:.02em;animation:detail-arrive 1.2s .65s both}
#intro .intro-sub small{display:none}
#enter{left:auto;right:3.4%;bottom:6%;min-width:180px;padding:17px 0;border:0;border-top:1px solid #c6d1d05c;font-size:15px;color:#e4e8e4;display:flex;justify-content:space-between;gap:24px;background:none;box-shadow:none;transition:border-color .35s,color .35s}
#enter:after{content:'↗';font-size:21px;font-weight:300;line-height:1;display:inline-block;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
#enter:hover{border-color:#e4e8e4;color:#fff;background:none;transform:none}
#enter:hover:after{transform:translate(3px,-3px)}
#enter>span{display:inline}#enter small{display:none}
#intro .scroll-cue{left:auto;right:3.4%;bottom:3.5%;font-size:10px;letter-spacing:.035em;color:#a8b7bb;opacity:.8;animation:detail-arrive 1.2s .85s both}
#intro .scroll-cue small{display:none}
#intro .touch-label{display:none}
.entry-note{display:block;left:auto;right:3.4%;top:45.5%;font-size:12px;line-height:1.6;letter-spacing:.01em;color:#c5cfce;animation:detail-arrive 1.4s 1.05s both;transition:opacity .7s,translate .7s}
.entry-note:before{content:'';display:block;width:28px;height:1px;background:#c5cfce70;margin-bottom:15px;transform-origin:left;animation:instruction-line 2s 1.3s both}
.entry-note span{display:block;font-size:10px;letter-spacing:.08em;color:#a5b4b7;margin-top:3px}
.touched .entry-note{opacity:0;translate:0 -5px;animation:none}
.entry-index{display:block;right:3.4%;top:22%;font-size:9px;font-weight:400;letter-spacing:.16em;color:#9dabad;animation:detail-arrive 1.2s .6s both}
.entry-index span{display:block;margin-top:7px;letter-spacing:.05em;opacity:.65}
.crossing .entry-grid{animation:none;opacity:0;transform:scale(1.2)}
.crossing #intro h1 b{animation:none;transform:translateY(calc(var(--offset) - .32em));opacity:0}
.crossing #intro .name-line:last-child b{transform:translateY(calc(var(--offset) + .32em));transition-delay:.06s}
.crossing #intro .intro-sub,.crossing #intro .scroll-cue,.crossing .entry-note,.crossing .entry-index{animation:none;opacity:0;transition:opacity .4s}
body.entered header{transition:opacity .7s,color .8s;z-index:12}
body.entering header{opacity:0;visibility:hidden;pointer-events:none}
body.entering header *,body.entering #nav{pointer-events:none}
body.entering #ceiling-toggle,body.entering #reset,body.entering #journey{visibility:hidden}
body.entering footer,body.entering #nav{visibility:hidden}
#light-invitation{display:none}
#loading{bottom:1.2%;left:3.4%;font-size:10px;color:#abb9ba;background:#10191e80;max-width:65vw}
.travelling #nav,.travelling footer{opacity:0;pointer-events:none}
#nav,footer{transition:opacity .6s}
#nav{scrollbar-width:none}#nav::-webkit-scrollbar{display:none}
:focus-visible{outline:1px solid #d5dfdf;outline-offset:6px}
@keyframes type-settle{from{opacity:0;translate:0 24px;filter:blur(7px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes detail-arrive{from{opacity:0;translate:0 7px}to{opacity:1;translate:0 0}}
@keyframes grid-arrive{from{opacity:0}to{opacity:.7}}
@keyframes instruction-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:700px){
 body:not(.entered) header{left:6%;right:6%;top:4%}body:not(.entered) .identity{font-size:20px}.entry-navigation{gap:22px}.entry-navigation button{font-size:12px}.entry-navigation button:first-child{display:none}
 .entry-grid{background-size:25vw 25vh}
 #intro h1{left:3%;top:28%;font-size:min(39vw,28vh);line-height:.83}
 #intro h1 .name-line:last-child{margin-left:13vw;margin-top:2.5vh}
 #intro h1 b:nth-child(3){margin-left:.04em}
 #intro .intro-sub{left:6%;bottom:17%;font-size:11px}
 #enter{left:auto;right:6%;bottom:7%;min-width:158px;font-size:14px;padding:16px 0}
 #intro .scroll-cue{right:6%;bottom:4.5%;font-size:9px}
 #intro .scroll-label{display:none}#intro .touch-label{display:inline}
 .entry-index{right:6%;top:17%;font-size:8px}
 .entry-note{right:6%;top:auto;bottom:28%;font-size:11px}.entry-note:before{margin-bottom:10px}.entry-note span{font-size:9px}
 #loading{bottom:1%;left:6%;font-size:9px;max-width:88vw}
 .entered header{gap:8px}.entered #ceiling-toggle,.entered #reset{font-size:11px;padding:8px}
}
@media(max-height:520px) and (min-width:701px){
 #intro h1{top:19%;font-size:36vh}.entry-note{top:43%;font-size:11px}.entry-index{top:24%}
 #intro .intro-sub{font-size:10px;bottom:7%}#enter{bottom:6%;padding:12px 0}.entry-navigation button{font-size:12px}
}
@media(max-width:700px) and (max-height:700px){
 .entry-index{display:none}.entry-note{top:15%;bottom:auto;font-size:10px}.entry-note:before{display:none}
 #intro h1{top:28%;font-size:min(39vw,25vh)}
}
@media(prefers-reduced-motion:reduce){
 #threshold *,body:not(.entered) header{animation:none!important}.crossing #intro h1 b{transform:translateY(var(--offset));transition:opacity .15s}.entry-grid{transition:opacity .15s;transform:none!important}
}
@media(pointer:coarse){#intro .scroll-label{display:none}#intro .touch-label{display:inline}}
/* Room 17: a luminous typographic signature, aligned as two complete words. */
@font-face{font-family:'Space Grotesk';src:url('assets/fonts/SpaceGrotesk.ttf') format('truetype');font-style:normal;font-weight:300 700;font-display:swap}
#threshold,body:not(.entered) header{font-family:'Space Grotesk','Segoe UI','Microsoft YaHei',sans-serif}
body:not(.entered) header{left:4.5%;right:4.5%;top:5.5%}
body:not(.entered) .identity{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:500;letter-spacing:-.065em;color:#e1e4df}
.entry-navigation{gap:clamp(28px,4.6vw,78px)}
.entry-navigation button{font-size:12px;font-weight:400;letter-spacing:.025em;color:#d0d7d5}
#intro .eyebrow{display:block;left:4.5%;top:18%;font-family:'Space Grotesk',sans-serif;font-size:9px;font-weight:400;letter-spacing:.19em;color:#aebdbf;animation:detail-arrive 1.2s .35s both}
#intro h1{left:3.6%;top:22%;font-family:'Space Grotesk',sans-serif;font-size:min(25vw,34vh);font-weight:500;line-height:.82;letter-spacing:-.075em;color:#d0d7d1;text-shadow:0 1px 18px #09131712}
#intro h1 .name-line{padding:0 .09em .05em 0}
#intro h1 .name-line:last-child{margin-left:20vw;margin-top:1vh;font-weight:400;color:#becbc8;letter-spacing:-.065em}
#intro h1 b,#intro h1 b:nth-child(2),#intro h1 b:nth-child(3),#intro h1 .name-line:last-child b:nth-child(2),#intro h1 .name-line:last-child b:nth-child(3){--offset:0em;margin-left:0}
#intro h1 b{animation-name:signature-arrive;animation-duration:1.6s;animation-delay:calc(.12s + var(--letter,0)*45ms)}
#intro .intro-sub{left:4.5%;bottom:7.2%;font-size:11px;line-height:1.65;letter-spacing:.13em;font-weight:400;color:#b9c6c6}
#intro .intro-sub small{display:block;margin-top:11px;font-size:10px;letter-spacing:.10em;color:#a4b3b5;opacity:1}
.entry-index{top:18%;right:4.5%;font-size:9px;letter-spacing:.13em;color:#b7c4c5}
.entry-index span{font-size:9px;letter-spacing:.055em;opacity:.7;margin-top:8px}
.entry-note{top:46%;right:4.5%;font-size:13px;letter-spacing:-.02em;color:#d3dcd7}
.entry-note:before{width:36px;margin-bottom:17px;background:#c0cdce65}
.entry-note span{font-family:'Segoe UI','Microsoft YaHei',sans-serif;font-size:10px;letter-spacing:.08em;line-height:1.8;color:#aebfc1}
#enter{right:4.5%;bottom:6.3%;min-width:200px;font-size:17px;font-weight:400;letter-spacing:-.035em;border-color:#b8c9c26b;color:#e2e7e1;padding:17px 0}
#enter:after{font-size:24px;font-weight:300}
#intro .scroll-cue{right:4.5%;bottom:3.5%;font-size:9px;letter-spacing:.08em;color:#b2c2c4}
.crossing #intro h1 b{transform:translateY(-.24em);opacity:0}
.crossing #intro .name-line:last-child b{transform:translateY(.24em)}
.crossing #intro .eyebrow{animation:none;opacity:0}
@keyframes signature-arrive{from{opacity:0;translate:0 20px;filter:blur(6px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@media(max-width:700px){
 body:not(.entered) header{left:6%;right:6%;top:4%}body:not(.entered) .identity{font-size:19px}.entry-navigation{gap:22px}.entry-navigation button{font-size:11px}
 #intro .eyebrow{left:6%;top:22%;font-size:8px;letter-spacing:.12em}
 #intro h1{left:4%;top:29%;font-size:min(45vw,26vh);line-height:.82}
 #intro h1 .name-line:last-child{margin-left:12vw;margin-top:2vh}
 #intro .intro-sub{left:6%;bottom:18%;font-size:9px;line-height:1.6;letter-spacing:.08em}
 #intro .intro-sub small{display:none}
 .entry-index{right:6%;top:15%;font-size:8px}.entry-index span{font-size:8px}
 .entry-note{right:6%;top:auto;bottom:23%;font-size:12px}.entry-note:before{margin-bottom:12px}.entry-note span{font-size:9px}
 #enter{right:6%;bottom:7%;min-width:166px;font-size:16px;padding:15px 0}
 #intro .scroll-cue{right:6%;bottom:4.5%;font-size:8px}
}
@media(max-height:520px) and (min-width:701px){
 #intro .eyebrow{top:18%;font-size:8px}#intro h1{top:23%;font-size:32vh}
 #intro .intro-sub{font-size:8px;bottom:7%}#intro .intro-sub small{display:none}
 .entry-note{top:43%;font-size:11px}.entry-index{top:20%;font-size:8px}
 #enter{font-size:14px;padding:11px 0}
}
@media(max-width:700px) and (max-height:700px){
 #intro .eyebrow{top:23%;font-size:7px}#intro h1{top:29%;font-size:min(44vw,24vh)}
 .entry-index{display:none}.entry-note{top:15%;bottom:auto;font-size:10px}.entry-note:before{display:none}
 #intro .intro-sub{bottom:17%;font-size:8px}
}
@media(prefers-reduced-motion:reduce){.crossing #intro h1 b{transform:none!important}}