/* wet paper, cold sea; 귤 only on the lit door ring. Palette tokens are rewritten on :root by time.js (the visitor's clock). */
:root{--paper:#E6E4DA;--card:#EDEBE2;--ink:#2A3036;--sea:#8DA2AD;--sky:#E9ECEB;--slate:#5B6B72;--over:#B9C0C3;--wash:#B9C0C3;--poche:#2A3036;--ov:rgba(0,0,0,0);--lr:0;--lh:0;--gl:0;--gull:1;--acc:#E0803A;--fog:#3A474D;--sw:1.5;--sw2:1;--sans:"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;--serif:"Nanum Myeongjo","AppleMyungjo","Apple Myungjo","Noto Serif KR","Noto Serif CJK KR",serif;--ease:cubic-bezier(.22,.72,.2,1);color-scheme:light}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}
html,body{margin:0;height:100%;background:var(--over);color:var(--ink);font:15px/1.45 var(--serif);-webkit-text-size-adjust:100%;overscroll-behavior:none}
html.js body{overflow:hidden}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#app{position:fixed;inset:0;overflow:hidden}
.shadow{fill:var(--ink);opacity:.15}.sheet{fill:var(--paper)}.wash{fill:var(--wash);opacity:.15}.sea{fill:var(--sea);opacity:.5}
.road{fill:var(--over);opacity:.42}.pud{fill:var(--slate);opacity:.36}.smudge{fill:url(#smg)}:is(.cnt,.echo,.wv,.lot,.prt,.glz){fill:none;stroke:var(--slate);stroke-linecap:round}
.cnt{stroke-width:1;opacity:.34}.echo{stroke-width:1.1}.wv{stroke-width:1.2;opacity:.42}.glz{stroke-width:1.1;opacity:.8}.tr{fill:var(--wash);fill-opacity:.22;stroke:var(--slate);stroke-width:1.1;stroke-linecap:round;opacity:.8}
.rfl{fill:var(--card);opacity:.7}.wall{fill:var(--ink);fill-opacity:.74;stroke:var(--ink);stroke-width:.8;stroke-linejoin:round}
:is(.i1,.i2){fill:none;stroke:var(--ink);stroke-linecap:round;stroke-linejoin:round}.i1{stroke-width:var(--sw)}
.i2{stroke-width:var(--sw2);opacity:.7}.thin{stroke-width:1}#plan text{font-family:var(--serif);fill:var(--ink)}
:is(.mm,.hn){font-style:italic}.mm{opacity:.78}.hn{opacity:.9}.lb{opacity:.72;letter-spacing:.12em}.door{cursor:pointer;outline:none}
.hit{fill:transparent;pointer-events:all}.wsh{fill:var(--ink);opacity:0;transition:opacity .35s}.door:hover .wsh{opacity:.055}
.afl{fill:var(--card);stroke:none}.art :is(.i1,.i2){vector-effect:non-scaling-stroke}.art .i1{stroke-width:1.1px}.art .i2{stroke-width:.8px}.art .pud{fill:var(--slate);opacity:.36}
.lot{stroke-width:var(--sw2);stroke-dasharray:4 5;opacity:.8}.seen .lot{stroke:var(--ink);stroke-dasharray:none;opacity:.88}
.prt{stroke-width:1.3}.ring,.foc,.ar{fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0}.ring,.ar{stroke:var(--acc);stroke-width:2.6;transition:opacity .45s var(--ease)}.ar{stroke-width:2.2}
.on :is(.ring,.ar){opacity:1}.foc{stroke:var(--ink);stroke-width:2}.door:focus-visible .foc{opacity:.85}#fog{fill:var(--fog);opacity:0;pointer-events:none}
/* ---- the walk: three stacked layers (far .25, mid .6, near 1.0), only transforms change per frame ---- */
#scene{position:absolute;inset:0;background:var(--sky);transition:opacity .45s ease,transform .85s var(--ease);touch-action:none;user-select:none;-webkit-user-select:none;cursor:default}#scene.dim{opacity:0}
.ly{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:hidden}
/* a room is lit from the middle of its wall: the corners and the ceiling fall off (no filter, one gradient) */
#scene::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .7s;background:radial-gradient(ellipse 78% 82% at 50% 58%,#1E262C00 46%,#1E262C38 100%),linear-gradient(#1E262C26,#1E262C00 34%)}body.inroom #scene::after{opacity:1}
/* a tall phone: the ceiling slab and the floor slab carry on over the blank bands above and below the room, in their own tones */
body.tall.inroom #scene::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(rgba(42,48,54,.8),rgba(42,48,54,.8)) 0 0/100% var(--rt,0) no-repeat,linear-gradient(rgba(42,48,54,.5),rgba(42,48,54,.5)) 0 100%/100% calc(100% - var(--rb,100%)) no-repeat;background:linear-gradient(color-mix(in srgb,var(--poche) 80%,transparent),color-mix(in srgb,var(--poche) 80%,transparent)) 0 0/100% var(--rt,0) no-repeat,linear-gradient(color-mix(in srgb,var(--poche) 50%,transparent),color-mix(in srgb,var(--poche) 50%,transparent)) 0 100%/100% calc(100% - var(--rb,100%)) no-repeat}
#veil{position:absolute;inset:0;background:var(--ov);pointer-events:none;z-index:3;transition:background 1s}body.fixpal #veil{display:none}
.c0,.wlm{fill:var(--card)}.c1{fill:var(--paper)}.c2{fill:var(--wash);fill-opacity:.8}.c3{fill:var(--slate)}.c4{fill:var(--ink)}.c5{fill:var(--sea)}.po{fill:var(--poche)}.sk{fill:var(--sky)}.dk{fill:var(--ink);fill-opacity:.42}.rf{fill:var(--paper);opacity:.5}
.ly :is(.i1,.i2){fill:none;stroke:var(--ink);stroke-linecap:round;stroke-linejoin:round}.ly .i1{stroke-width:1.7}.ly .i2{stroke-width:1.1;opacity:.55;transform:translate(.7px,.7px)}
.ly :is(.cnt,.wv,.rl,.fro){fill:none;stroke:var(--slate);stroke-linecap:round}.ly .cnt{stroke-width:1.2;opacity:.5}.ly .wv{stroke-width:1.5;opacity:.5}.ly .fro{stroke:var(--paper);stroke-width:1.3}
.ly .ex :is(.i1,.i2){stroke-width:.8px;vector-effect:non-scaling-stroke}.ly .ex .pud{fill:var(--slate);opacity:.36}.ly .ex .i2{transform:none}.ly .lf2{fill:var(--slate);fill-opacity:.9;stroke:var(--ink);stroke-width:.8}
.lt{font-family:var(--serif);fill:var(--ink)}.dur{opacity:.66}
.dr{cursor:pointer}.hitd{fill:transparent}.ly .dr .ring{fill:none;stroke:var(--acc);stroke-width:2.8;stroke-linecap:round;opacity:0;transition:opacity .45s var(--ease)}.dr.on .ring{opacity:1}
.dr .lf{transform-box:fill-box;transform-origin:0 50%;transition:transform .7s var(--ease)}.dr.open .lf{transform:scaleX(.14) skewY(-5deg)}
.pool{fill:url(#pg);pointer-events:none}.pool.tube{fill:url(#pgw)}.pool.lr{opacity:var(--lr)}.pool.gl{opacity:var(--gl)}.pool.on3{opacity:1}.pool.lh{opacity:var(--lh)}.wz{opacity:var(--lh)}
.gulls{opacity:var(--gull);transition:opacity 2s}.gl{animation:gd 54s linear infinite alternate}.gl.g1{animation-duration:71s;animation-delay:-20s}.gl.g2{animation-duration:63s;animation-delay:-9s}@keyframes gd{to{transform:translate(160px,-14px)}}
.gl path{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round}
.swy{animation:sy 3.8s ease-in-out infinite alternate}@keyframes sy{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
.ly .rl{stroke:var(--ink);stroke-width:1.2;stroke-opacity:.5;stroke-dasharray:9 15;animation:rl .9s linear infinite}@keyframes rl{to{stroke-dashoffset:-24}}
.stm{fill:none;stroke:#F4F4EE;stroke-width:3.2;stroke-linecap:round;opacity:.85;animation:sm 4s ease-in-out infinite alternate}@keyframes sm{to{transform:translateY(-9px);opacity:.35}}
.wash{animation:wsh 5s ease-in-out infinite alternate}@keyframes wsh{to{transform:translateX(-26px)}}
.brth{fill:url(#fgR);opacity:0;transform-box:fill-box;transform-origin:center}#bell{cursor:pointer}#bell.rg{animation:bl .6s}@keyframes bl{30%{transform:translateY(2px)}}
#bell{transform-box:fill-box;transform-origin:center}
/* the visitor */
.me{pointer-events:none}.fsh{fill:var(--ink);opacity:.14}
.me :is(.wk,.st) :is(.fc,.fq,.fn,.fo,.fw,.lg,.lgf,.sh,.shf,.slo,.slv,.fv,.fs){stroke:var(--ink);stroke-linecap:round;stroke-linejoin:round}
.me :is(.wk,.st) :is(.fn,.fo,.fw,.lg,.lgf,.sh,.shf,.slo,.slv){fill:none}
.me .fc{fill:var(--slate);fill-opacity:1;stroke-width:1.5}.me .fq{fill:var(--paper);stroke-width:1.4}.me .fn{stroke-width:1.1}.me .fo{stroke-width:4.4}.me :is(.wk,.st) .fw{stroke:var(--card);stroke-width:2.3}.me .fv{fill:var(--slate);fill-opacity:.95;stroke-width:.9}
.me .lg{stroke-width:5.4}.me .lgf{stroke-width:5;opacity:.5}.me .sh{stroke-width:3.6}.me .shf{stroke-width:3.2;opacity:.5}.me .slo{stroke-width:6.8}.me :is(.wk,.st) .slv{stroke:var(--slate);stroke-opacity:.85;stroke-width:4.4}
.me .fh{fill:var(--ink);stroke:none}.me .fs{fill:var(--card);stroke-width:.9}.orn{fill:var(--acc);stroke:none}
:is(.bk,.gs) :is(.fc,.fq,.fp,.fn,.fl,.fz,.fu,.fo,.fw){vector-effect:non-scaling-stroke;stroke:var(--ink);stroke-linecap:round;stroke-linejoin:round}
:is(.bk,.gs) :is(.fn,.fl,.fz,.fu,.fo,.fw){fill:none}:is(.bk,.gs) .fo{stroke-width:3.4px}:is(.bk,.gs) .fw{stroke:var(--card);stroke-width:1.5px}:is(.bk,.gs) .fc{fill:var(--slate);fill-opacity:.72;stroke-width:1.3px}:is(.bk,.gs) .fq{fill:var(--paper);stroke-width:1.3px}:is(.bk,.gs) .fp{fill:var(--slate);fill-opacity:.5;stroke-width:1.3px}
:is(.bk,.gs) .fn{stroke-width:1.1px}:is(.bk,.gs) .fl{stroke-width:1.7px}:is(.bk,.gs) .fz{stroke-width:2.8px}:is(.bk,.gs) .fu{stroke-width:2px}:is(.bk,.gs) .fh{fill:var(--ink);stroke:none}:is(.bk,.gs) .fv{fill:var(--slate);fill-opacity:.9;stroke:var(--ink);stroke-width:.8px;vector-effect:non-scaling-stroke}:is(.bk,.gs) .fsh{opacity:0}.sit :is(.fl,.fz){display:none}
.me .sw{animation:br 5s ease-in-out infinite alternate}.me.mv .sw{animation:none}@keyframes br{from{transform:rotate(-.8deg)}to{transform:rotate(.8deg)}}
.me .fade{transition:opacity .45s,transform .45s}.me.go .fade{opacity:0;transform:scale(.88)}
.pz{opacity:1;transition:opacity .6s}.pz.x{opacity:0}.me.ot .fsh{opacity:.14}
.me.ot :is(.fc,.fv){fill:var(--cc);fill-opacity:1}.me.ot :is(.wk,.st) .slv{stroke:var(--cc);stroke-opacity:1}.me.ot .orn,.me.ot .tt{display:none}
#chev{position:absolute;inset:0;pointer-events:none;z-index:8;display:flex;align-items:center;justify-content:space-between;padding:0 14px;font-size:44px;opacity:0;transition:opacity 1.2s}#chev.off{display:none}#chev.hint,body.ch #chev{opacity:.38}
/* Tab targets: hidden real buttons; only a person pressing Tab sees the focused one's name, for a moment (a mouse, a finger or a film ending never shows it) */
#tabs .tb{position:fixed;left:50%;bottom:64px;transform:translateX(-50%);z-index:30;opacity:0;pointer-events:none;background:var(--card);color:var(--ink);border:1.5px solid var(--ink);border-radius:999px;padding:8px 18px;font:15px/1.2 var(--serif);letter-spacing:.06em;white-space:nowrap}
body.tabnav #tabs .tb:focus-visible{opacity:1;outline:none;animation:tbf 3.4s forwards}#tabs .tb:focus{outline:none}@keyframes tbf{0%,70%{opacity:1}100%{opacity:0}}
#fogv{position:absolute;inset:0;background:var(--fog);opacity:0;pointer-events:none;z-index:24}
/* the map: the v1 ink plan, kept as the map */
#plan{position:absolute;inset:0;z-index:35;width:100%;height:100%;display:block;touch-action:manipulation;user-select:none;-webkit-user-select:none;background:var(--over);opacity:0;visibility:hidden;transition:opacity .45s,visibility 0s .45s}
body.map #plan{opacity:1;visibility:visible;transition:opacity .45s}
#bMap svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}#bMap[aria-pressed=true]{text-decoration:underline 1px;text-underline-offset:6px}
#plan .me2{fill:var(--acc);stroke:var(--ink);stroke-width:2}#plan .gh2{fill:var(--slate);opacity:.55;stroke:none}#plan .gh2.hu{fill:#4A6FA5;opacity:.9}#plan .door .art{opacity:1}
.nd .wsh{animation:nd 2.6s 3}
@keyframes nd{50%{opacity:.16}}
#ttl{position:absolute;left:0;right:0;top:46%;text-align:center;font-size:clamp(46px,8.5vw,112px);letter-spacing:.34em;text-indent:.34em;color:#DDE2E1;opacity:0;pointer-events:none;text-shadow:0 0 22px #DDE2E180;transform:translateY(-50%) scale(1.07);transition:opacity 2.8s ease,transform 3.4s ease;z-index:26}
#ttl.on{opacity:.9;transform:translateY(-50%)}body.ending :is(.ring,.ar),body.ending #plan text{opacity:0}#plan text{transition:opacity 1s}
body.ending .chrome{opacity:0!important;pointer-events:none!important;transition:opacity .8s}
/* the buttons stay out of the picture until a pointer, a finger or a key moves */
.btn.chrome{z-index:29}.chrome{opacity:0;pointer-events:none;transition:opacity .8s}body.ch .chrome{opacity:1;pointer-events:auto;transition-duration:.35s}.chrome:focus-visible{opacity:1}
button{appearance:none;background:none;border:0;color:inherit;font:inherit;cursor:pointer;touch-action:manipulation;padding:0}
.btn{position:absolute;z-index:25;font:15px/1 var(--serif);letter-spacing:.08em;min-width:44px;height:44px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:22px;transition:opacity .5s}
.btn:hover,.btn:focus-visible{text-decoration:underline 1px;text-underline-offset:6px}
.btn:focus-visible{outline:1.6px solid var(--ink);outline-offset:-3px}
#bList{position:fixed;z-index:46;top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right))}
#bSound{bottom:max(6px,env(safe-area-inset-bottom));right:max(8px,env(safe-area-inset-right));z-index:36}
#bMap{bottom:max(6px,env(safe-area-inset-bottom));left:max(8px,env(safe-area-inset-left));z-index:36}
.rback,.rshare{visibility:hidden}body.inroom :is(.rback,.rshare){visibility:visible}body.filming .chrome{visibility:hidden!important}body.map :is(.rback,.rshare){visibility:hidden}
.rback{top:max(8px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left))}.rshare{bottom:max(6px,env(safe-area-inset-bottom));left:max(98px,calc(env(safe-area-inset-left) + 98px))}
#bSound.wait svg{animation:wt 3.2s ease-in-out infinite}@keyframes wt{50%{opacity:.3}}
/* the one cue on a cold load: the sound button breathes, quietly visible, until the sound is really running */
body:not(.ch):not(.quiet) #bSound.wait{opacity:.62;pointer-events:auto;transition-duration:.6s}
#bSound svg{width:21px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}#bSound .x{display:none}
#bSound[aria-pressed=false] .x{display:inline}
.rot{display:none;align-items:center;justify-content:center;pointer-events:none}.rot svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
@keyframes turn{0%,20%{transform:rotate(0)}55%,100%{transform:rotate(-90deg)}}
#listview{background:var(--paper);overflow:auto;padding:64px 18px 48px}
.js #listview{position:fixed;inset:0;z-index:40;display:none}.js #listview.open{display:block}.nojs :is(#app,#film,#bList){display:none}
.nojs #listview{display:block;min-height:100vh}
#list{list-style:none;margin:0 auto;padding:0;max-width:1000px;display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:26px 20px}
#list a{display:block;color:inherit;text-decoration:none}#list a:focus-visible{outline:1.6px solid var(--ink);outline-offset:4px}
#list img{display:block;width:100%;height:auto;aspect-ratio:2.39;background:var(--slate);object-fit:cover;position:relative;border:1px solid var(--ink)}
#list img::after{content:"";position:absolute;inset:0;background:var(--slate)}#list .n{font-size:13px;letter-spacing:.14em;opacity:.7}
#list .t{font-size:18px}#grain,#rain{position:fixed;inset:0;pointer-events:none}#grain{z-index:45;background-size:512px 512px;background-repeat:repeat}
#rain{z-index:43;display:none;opacity:.13;top:-300px;height:calc(100% + 300px);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cpath d='M40 20l-6 22M170 70l-6 22M260 150l-6 22M90 140l-6 22M210 240l-6 22' stroke='%232A3036' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");animation:rain 80s linear infinite}
[data-mood=비] #rain{display:block}body.indoor #rain{display:none!important}body.night #rain{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cpath d='M40 20l-6 22M170 70l-6 22M260 150l-6 22M90 140l-6 22M210 240l-6 22' stroke='%23D9DACF' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");opacity:.2}
@keyframes rain{to{transform:translateY(300px)}}
#toast{position:fixed;left:50%;bottom:76px;transform:translateX(-50%);z-index:90;background:var(--ink);color:var(--paper);padding:10px 18px;border-radius:999px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .4s}
#toast.on{opacity:.95}
#film{position:fixed;inset:0;z-index:60;color:#D9DDD6;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .9s var(--ease),visibility 0s .9s}
#film:focus{outline:none}#film.open{visibility:visible;opacity:1;pointer-events:auto;transition:opacity .5s var(--ease)}
/* the room stays behind the film: the light goes down while it plays and comes back when it ends */
#film::before{content:"";position:absolute;inset:0;background:#10161A;opacity:.6}#film.fsm::before{opacity:1;background:#000}@media (max-width:700px),(max-aspect-ratio:17/20){#film::before{opacity:.96}}
/* in the room: the walls come up to the frame (the scene is pushed in), the light only dips; no dark void around the film */
#film.zm::before{opacity:.26}#film.fsm.zm::before{opacity:1}
#film .box{position:absolute;overflow:hidden;transform:translate(-50%,-50%) translate(var(--dx,0px),var(--dy,0px)) scale(var(--s0,1));background:#05080A;box-shadow:0 6px 38px #0A0E1259;transition:transform .85s var(--ease)}#film.open .box{transform:translate(-50%,-50%)}
/* the box is the picture (2.39); the file is 16:9 with the bars baked in, so the video is centred and the bars fall outside the box */
#film .pst{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s}
#film video{position:absolute;left:0;top:50%;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;transform:translateY(-50%);transition:opacity .6s}
#film button{font:14px/1 var(--serif);letter-spacing:.06em;min-width:44px;height:44px;padding:0 10px;border-radius:22px;display:inline-flex;align-items:center;justify-content:center}
#film button:focus-visible,#film .scrub:focus-visible{outline:1.5px solid #D9DDD6;outline-offset:-3px}
#film .big{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:20px;padding:0 30px;height:52px;background:#141A1E9E;border:1px solid #D9DDD680}
#film .tag{position:absolute;left:3%;top:3%;font-size:12px;padding:4px 10px;border-radius:999px;background:#141A1E94;color:#D9DDD6}
body.ending #toast{display:none}
#film .bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:4px;padding:26px max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));background:linear-gradient(#080B0E00,#080B0EB8);transition:opacity .4s}
#film .cl{position:absolute;top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));background:#141A1EB8;transition:opacity .4s}
#film.idle .bar,#film.idle .cl{opacity:0;pointer-events:none}#film .pp svg,#film .fs svg{width:24px;height:24px;fill:currentColor;stroke:none}
#film .fs svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}#film .pp .b{display:none}
#film .pp:not(.paused) .a{display:none}#film .pp:not(.paused) .b{display:inline}
#film .scrub{flex:1;min-width:0;height:44px;margin:0 6px;appearance:none;background:transparent;cursor:pointer}
#film .scrub::-webkit-slider-runnable-track{height:1px;background:#D9DDD68C}
#film .scrub::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%;background:#D9DDD6;margin-top:-5px;border:0}
#film .scrub::-moz-range-track{height:1px;background:#D9DDD68C}#film .scrub::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:#D9DDD6;border:0}
#film .sn[aria-pressed=false]{text-decoration:line-through;opacity:.7}
#film .rot{position:absolute;left:50%;transform:translateX(-50%);padding:9px;border-radius:50%;background:#141A1EC2;top:30%;color:#D9DDD6;opacity:0}#film.rotc .rot{display:flex;animation:rotshow 2.2s forwards}#film.rotc .rot svg{animation:turn 1.6s ease-in-out 1 forwards}
@keyframes rotshow{0%{opacity:0}20%,70%{opacity:.8}100%{opacity:0}}
@media (max-width:700px){#list{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px 14px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}#rain{display:none!important}#room,#room.open{transition:opacity .2s!important}#film,#film.open{transition:opacity .2s!important}#ttl,#ttl.on{transform:translateY(-50%)!important;transition:opacity 2s linear!important}#pp .me.fd{transition:opacity .12s!important}.rot svg{transform:rotate(-90deg)}}
/* ---- wall texts (labels.js): real SVG text in the drawing; a card at the top for the long ones on a small screen ---- */
.tx{font-family:var(--serif);fill:var(--ink);stroke:none;user-select:text;-webkit-user-select:text}.tx.e{opacity:.22;user-select:none;-webkit-user-select:none;pointer-events:none}
.ttl2{letter-spacing:.32em;opacity:.9;font-weight:400}.ttl2.e{opacity:.2}.sub2{letter-spacing:.42em;opacity:.72}.tx.sans{font-family:var(--sans)}.kk{letter-spacing:.42em;opacity:.6;font-weight:500}.ft{letter-spacing:.2em;opacity:.5}.ph{letter-spacing:.06em;font-weight:400;opacity:.92}.ld{letter-spacing:-.01em;opacity:.86}.pb{opacity:.76;letter-spacing:.01em}.dn{letter-spacing:.32em;opacity:.6;font-weight:500}.dt{letter-spacing:.02em;opacity:.92}.dm{letter-spacing:.12em;opacity:.55}.wl{opacity:.9}.wd{letter-spacing:-.02em}.wl2{opacity:.62;letter-spacing:.2em}.wsp{letter-spacing:.62em;opacity:.7;font-weight:300}.nb{opacity:.85}.ct{opacity:.95;letter-spacing:.02em}
.pg{display:none}body.small .pb{display:none}body.small .pg{display:inline}
.cd1{display:none}body.note .cd0{display:none}body.note .cd1{display:inline}body.small .cd0{display:inline}body.small .cd1{display:none}
#bNote{bottom:max(6px,env(safe-area-inset-bottom));right:max(104px,calc(env(safe-area-inset-right) + 104px));z-index:36}#bNote[aria-pressed=false]{text-decoration:line-through 1px;opacity:.7}
#sheet{position:fixed;left:50%;top:max(14px,env(safe-area-inset-top));z-index:27;width:min(92vw,540px);max-height:46vh;overflow:hidden;padding:16px 20px 18px;background:var(--card);color:var(--ink);border:1.2px solid var(--ink);border-radius:3px;box-shadow:3px 4px 0 color-mix(in srgb,var(--ink) 16%,transparent);font-size:15.5px;line-height:1.7;opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,-8px);transition:opacity .6s,transform .6s var(--ease),visibility 0s .6s}
#sheet.on{opacity:.97;visibility:visible;transform:translate(-50%,0);transition:opacity .5s,transform .6s var(--ease)}
#sheet h2{margin:0 0 6px;font-size:17px;font-weight:400;letter-spacing:.16em}#sheet p{margin:0;word-break:keep-all}#sheet .sm{font-size:12.5px;opacity:.68;margin-bottom:8px}
body:is(.filming,.map,.ending) #sheet{opacity:0;visibility:hidden}
@media (max-height:520px){#sheet{font-size:14px;line-height:1.6;padding:12px 16px 14px;max-height:62vh}body.inroom #sheet{left:max(14px,env(safe-area-inset-left));top:max(14px,env(safe-area-inset-top));width:min(40vw,330px);transform:translate(-8px,0)}body.inroom #sheet.on{transform:none}}