@font-face{font-family:DetailHand;src:url('/assets/detail-handwriting-v139.ttf') format('truetype');font-weight:400 700;font-display:swap}
/* An intimate invitation on the tabletop, with room for the handwritten cue. */
.salon-detail{position:absolute;left:40%;top:24%;width:29%;min-width:60px;min-height:44px;aspect-ratio:3/2;z-index:5;padding:0;border:0;border-radius:4px;background:none;opacity:0;pointer-events:none;transform:rotate(-5deg);touch-action:pan-y;isolation:isolate}
.room-study.is-drawing.is-ready .salon-detail{animation:detail-in .7s 2.4s both}
.room-study.is-drawing.is-ready .salon-detail.is-available{pointer-events:auto}
.room-study.is-fading .salon-detail{pointer-events:none!important}
.salon-detail .detail-sketch{position:relative;z-index:1;width:100%;filter:drop-shadow(0 3px 2px #211b1759);transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .6s;transform-origin:50% 75%}
.detail-sketch-glow{position:absolute;inset:7% -4%;z-index:0;border-radius:50%;background:#ffe4a5;filter:blur(16px);opacity:.22;animation:detail-breathe 3.8s 3s ease-in-out infinite;pointer-events:none}
/* The SVG tip (590,650) is anchored inside the paper, independent of its size. */
.detail-annotation{position:absolute;left:24%;top:34%;width:clamp(150px,16vw,232px);aspect-ratio:1;transform:translate(-79.73%,-87.84%);z-index:2;pointer-events:none;color:#fff4d7}
.detail-annotation>span{position:absolute;right:90%;top:17%;padding:4px 14px 7px;border:1px solid #fff3;border-radius:99px;background:#28201ddb;backdrop-filter:blur(7px);box-shadow:0 3px 12px #140d092e;color:inherit;font-family:DetailHand,cursive;font-weight:600;font-size:clamp(27px,2.4vw,38px);line-height:1;white-space:nowrap;text-shadow:0 1px 2px #0008;transform:translateY(-50%) rotate(-3deg)}
.detail-annotation svg{display:block;width:100%;height:auto;overflow:visible}
.detail-annotation svg path{stroke:currentColor;stroke-width:10;stroke-linecap:round;stroke-linejoin:round}
.detail-annotation svg .detail-arrow-shadow{stroke:#171512;stroke-width:17}
.detail-dwell-line{position:absolute;left:15%;right:15%;bottom:1%;height:2px;background:#fff3d0;box-shadow:0 0 7px #ffdd95;transform:scaleX(0);transform-origin:left center;opacity:0;transition:opacity .2s}
.salon-detail.is-dwelling .detail-dwell-line{animation:detail-dwell 1s linear both}
.salon-detail:is(:hover,:focus-visible) .detail-sketch{transform:translateY(-3px) rotate(2deg);filter:drop-shadow(0 6px 4px #211b1759) brightness(1.07)}
.salon-detail:is(:hover,:focus-visible) .detail-sketch-glow{opacity:.5;animation:none}
.salon-detail:focus-visible{outline:2px solid #a71d23;outline-offset:6px}
@keyframes detail-in{from{opacity:0}to{opacity:1}}
@keyframes detail-breathe{0%,100%{opacity:.18;transform:scale(.94)}50%{opacity:.42;transform:scale(1.08)}}
@keyframes detail-dwell{0%{opacity:.7;transform:scaleX(0)}100%{opacity:1;transform:scaleX(1)}}
/* The exit never remounts the salon or restarts its furniture sequence. */
.room-study.is-drawing.has-visited-detail .salon-item,.room-study.is-drawing.has-visited-detail .salon-pendant{animation:none!important;opacity:1;transform:none}
.room-study.is-drawing.has-visited-detail .salon-detail{animation:none;opacity:1}
.manifesto-stage.has-visited-detail:has(.room-study.is-drawing) .salon-parquet{animation:none;clip-path:inset(0)}
.manifesto-stage.has-visited-detail:has(.room-study.is-drawing) .salon-blue-paint{animation:none;clip-path:inset(0);opacity:.82}
/* One top-layer dialog: the underlying scene and its scroll position stay put. */
html.detail-room-open{overflow:hidden;overscroll-behavior:none;scrollbar-gutter:stable}
html.detail-room-open .cursor-ring{visibility:hidden}
.detail-room{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;overflow:hidden;background:transparent;color:#fff9ee;isolation:isolate;overscroll-behavior:none;transition:opacity .46s ease}
.detail-room::backdrop{background:#19151230;backdrop-filter:blur(3px);transition:background .91s}
.detail-room[open]{display:block}
.detail-room button{cursor:pointer}
.detail-room-shade{position:absolute;inset:0;background:#211b19;opacity:0;animation:detail-shade 1.04s .195s both;pointer-events:none}
@keyframes detail-shade{to{opacity:.96}}
.detail-panorama{position:absolute;inset:0;overflow:hidden;cursor:grab;touch-action:none;opacity:0;transform:scale(1.06);transition:opacity 1.3s ease,transform 1.69s cubic-bezier(.17,.65,.24,1);outline:none}
.detail-panorama.is-dragging{cursor:grabbing}
.detail-panorama:focus-visible{outline:1px solid #fff8;outline-offset:-8px}
.detail-panorama canvas{display:block;width:100%;height:100%;touch-action:none}
.detail-room.is-ready .detail-panorama{opacity:1;transform:none}
.detail-paper-flight{position:absolute;left:50%;top:50%;translate:-50% -50%;max-width:none;object-fit:contain;pointer-events:none;filter:drop-shadow(0 30px 35px #0006);will-change:transform,opacity}
.detail-room-top,.detail-room-bottom{position:absolute;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:clamp(22px,3.3vw,52px);pointer-events:none;z-index:3;opacity:0;animation:detail-in .65s .455s both}
.detail-room-top{top:0;padding-top:max(24px,env(safe-area-inset-top));background:linear-gradient(#110d09a6,transparent)}
.detail-room-heading>span{font-size:12px;letter-spacing:.13em;color:#fff6eac4}
.detail-room-heading h2{margin-top:8px;font-size:clamp(22px,2.6vw,38px);font-weight:500;letter-spacing:-.045em;line-height:1.1;text-shadow:0 2px 20px #0005}
.detail-room-heading h2>span{color:#df202b}
.detail-room-close{display:flex;align-items:center;gap:12px;flex-shrink:0;min-height:48px;padding:13px 20px;border:1px solid #fff5;border-radius:40px;background:#2019148c;backdrop-filter:blur(18px);color:#fff8ee;font-size:14px;pointer-events:auto;transition:background .25s,border-color .25s}
.detail-room-close svg{width:22px;height:22px}
.detail-room-close:is(:hover,:focus-visible){background:#f5f0e6;color:#231e1a;border-color:#f5f0e6}
.detail-room-close:active{transform:scale(.97)}
.detail-room-bottom{bottom:0;padding-bottom:max(24px,env(safe-area-inset-bottom));align-items:end;background:linear-gradient(transparent,#110d09a6)}
.detail-room-bottom p{font-size:14px;line-height:1.5;text-shadow:0 1px 8px #000;transition:opacity .8s}
.detail-room-bottom p>span{display:inline-block;border-left:1px solid #fff5;padding-left:12px;margin-left:12px;font-size:12px;letter-spacing:.03em}
.detail-room.has-explored .detail-room-bottom p{opacity:.6}
.detail-room-reset{font-size:14px;min-height:44px;padding:8px 0 8px 18px;pointer-events:auto;border-bottom:1px solid #fff5;color:#fff8ee}
.detail-room-reset:hover{border-color:#fff}
.detail-room-loading{position:absolute;left:50%;top:calc(50% + 24vh);translate:-50% 0;z-index:2;white-space:nowrap;font-size:14px;color:#fff4e4;letter-spacing:.015em}
.detail-room-loading span{animation:detail-loading 1.5s ease-in-out infinite}
@keyframes detail-loading{50%{opacity:.3}}
.detail-room-error{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;background:#211b19e8;color:white;z-index:2}
.detail-room-error p{font-size:22px}
.detail-room-retry{border:1px solid #fff7;border-radius:40px;min-height:44px;padding:10px 24px}
.detail-room.is-closing{opacity:0;pointer-events:none}
.detail-room.is-closing::backdrop{background:transparent;backdrop-filter:none}
@media(max-width:700px){
 .salon-detail{left:40%;top:21%;width:33%;min-width:60px}
 .detail-annotation{width:clamp(130px,36vw,160px)}
 .detail-annotation>span{right:auto;left:2%;top:0;font-size:27px;padding:3px 10px 5px;transform:translateY(-45%) rotate(-3deg)}
 .detail-sketch-glow{filter:blur(9px)}
 .detail-room-top{gap:12px;align-items:start;padding:20px 18px;padding-top:max(20px,env(safe-area-inset-top))}
 .detail-room-heading>span{font-size:10px;letter-spacing:.09em}
 .detail-room-heading h2{font-size:24px;max-width:140px;margin-top:7px}
 .detail-room-close{font-size:13px;padding:10px 13px;gap:7px;min-height:46px}
 .detail-room-close svg{width:19px;height:19px}
 .detail-room-bottom{padding:20px 18px;padding-bottom:max(22px,env(safe-area-inset-bottom));gap:10px}
 .detail-room-bottom p{max-width:185px}
 .detail-room-bottom p>span{padding-left:8px;margin-left:8px}
}
@media(prefers-reduced-motion:reduce){
 .salon-detail,.detail-sketch-glow,.detail-room-top,.detail-room-bottom,.detail-room-shade{animation:none!important;opacity:1}
 .salon-detail .detail-sketch,.detail-panorama,.detail-room,.detail-room::backdrop{transition:none}
 .detail-sketch-glow{opacity:.24}
 .detail-paper-flight{display:none}
}