/* The Fourth Room: one image, three layers of intention, composition and interaction. */
#cabinetFinaleEnter{appearance:none;min-height:46px;padding:12px 20px;border:1px solid #f1d7aa;background:#0d1716cf;color:#fff6e8;font:700 10px/1.3 Arial,sans-serif;letter-spacing:.14em;cursor:pointer;box-shadow:0 0 30px #f1d7aa21;transition:background .25s,transform .25s}
#cabinetFinaleEnter:hover{background:#314039;transform:translateY(-2px)}
#cabinetFinaleEnter:focus-visible{outline:3px solid #fff5db;outline-offset:4px}
.cabinetFourth[hidden]{display:none!important}
.cabinetFrame.isFourth>.cabinetHeader,.cabinetFrame.isFourth>.cabinetContent,.cabinetFrame.isFourth>.cabinetShelf,.cabinetFrame.isFourth>.cabinetEcho,.cabinetFrame.isFourth>.cabinetTrace{display:none!important}
.cabinetFourth{position:absolute;inset:0;z-index:11;display:flex;flex-direction:column;isolation:isolate;overflow:auto;background:#0d1916;color:#fff9ee;--fourth-gold:#e7c996}
.fourthStage{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.fourthStage>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;filter:brightness(.59) saturate(.78);transition:filter .65s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.fourthStage:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0a1512fa 0%,#0a1512e8 27%,#0a1512a6 46%,transparent 78%),linear-gradient(0deg,#0b1715f5,transparent 40%,#0b171546);pointer-events:none}
.fourthHeader{position:relative;z-index:3;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;padding:16px clamp(20px,4vw,60px);border-bottom:1px solid #e9d9b75c;color:#e9d7b4;font:700 10px/1.3 Arial,sans-serif;letter-spacing:.15em}
.fourthHeader>span{text-align:center;white-space:nowrap}
.fourthHeader button{appearance:none;min-height:44px;width:max-content;padding:8px 10px;border:1px solid #f4ddaf8a;background:#0e1917bd;color:#fff6e9;font:inherit;letter-spacing:.09em;cursor:pointer}
.fourthHeaderActions{justify-self:end;display:flex;align-items:center;gap:8px}
.fourthContent{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,530px) minmax(0,1fr);grid-template-rows:auto auto;align-content:center;gap:clamp(20px,3vh,34px) clamp(28px,4vw,62px);flex:1;min-height:0;margin:0 clamp(28px,5vw,78px);padding:24px 0}
.cabinetFourth[data-layer="interaction"] .fourthContent{flex:0 0 auto;min-height:auto;align-content:start;padding-top:30px;padding-bottom:34px}
.fourthIntro{grid-column:1;grid-row:1}
.fourthIntro>span,.fourthLayerPanel>span{color:var(--fourth-gold);font:700 10px/1.4 Arial,sans-serif;letter-spacing:.22em;text-transform:uppercase}
.fourthIntro h2{font:italic 400 clamp(52px,6vw,95px)/.92 Georgia,serif;letter-spacing:-.06em;text-wrap:balance;margin:14px 0 18px;text-shadow:0 5px 22px #000b}
.fourthIntro p{max-width:510px;margin:0;color:#ecdfcd;font:17px/1.55 Georgia,serif;text-shadow:0 2px 9px #000c}
.fourthLower{grid-column:1;grid-row:2;max-width:530px}
.fourthTabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #e5cda270;border-bottom:1px solid #e5cda270}
.fourthTabs button{appearance:none;min-height:51px;padding:9px 5px;border:0;border-right:1px solid #e5cda245;background:transparent;color:#d6cbb9;font:700 10px/1.3 Arial,sans-serif;letter-spacing:.11em;cursor:pointer;text-align:center}
.fourthTabs button:last-child{border-right:0}
.fourthTabs button[aria-selected="true"]{color:#fff8e9;box-shadow:inset 0 -3px var(--fourth-gold);background:#f6dfb112}
.fourthTabs button:hover{background:#f6dfb11b}
.fourthLayerPanel{min-height:160px;padding-top:22px;outline:none}
.fourthLayerPanel h3{font:400 clamp(27px,2.8vw,40px)/1.06 Georgia,serif;letter-spacing:-.025em;margin:8px 0 10px}
.fourthLayerPanel p{max-width:505px;margin:0;color:#e1d7c8;font:15px/1.55 Georgia,serif}
.fourthMoodChoices[hidden],.fourthDesignTools[hidden],.fourthMoodStage[hidden]{display:none!important}
.fourthMoodChoices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:18px}
.fourthMoodChoices button{appearance:none;display:grid;grid-template-columns:48px 1fr;gap:9px;align-items:center;min-width:0;min-height:58px;padding:5px;border:1px solid #e7c99670;background:#13231fb8;color:#f8ead3;text-align:left;cursor:pointer;font:700 10px/1.25 Arial,sans-serif;letter-spacing:.05em}
.fourthMoodChoices button[aria-pressed="true"]{border-color:#f7dba7;background:#ead4ad2c;box-shadow:inset 0 0 0 1px #f7dba7}
.fourthMoodChoices button:hover{background:#ead4ad33}
.fourthMoodChoices img{display:block;width:48px;height:46px;object-fit:cover}
.fourthDesignTools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:18px}
.fourthDesignTools button{appearance:none;min-height:46px;padding:8px 4px;border:1px solid #e7c99670;background:#14231ec7;color:#e7d6b9;font:700 9px/1.25 Arial,sans-serif;letter-spacing:.08em;cursor:pointer}
.fourthDesignTools button[aria-pressed="true"]{border-color:#f7dba7;background:#ead4ad2c;color:#fff7e9;box-shadow:inset 0 0 0 1px #f7dba7}
.fourthDesignTools button:hover{background:#ead4ad33}
.fourthDesignTools p{grid-column:1/-1;min-height:36px;margin:3px 0 0;color:#eedcc1;font:italic 14px/1.4 Georgia,serif}
.fourthMoodStage{grid-column:2;grid-row:1/3;position:relative;align-self:center;min-width:0;width:100%;max-height:calc(100dvh - 168px);aspect-ratio:1.21;margin:0;overflow:hidden;border:1px solid #e8d1a59c;background:#171e1a;box-shadow:0 24px 65px #0009,0 0 0 9px #c8a66d12}
.fourthMoodStage>img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.86);transition:filter .45s}
.fourthMoodStage:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(0deg,#07100ecf,transparent);pointer-events:none}
.fourthMoodWash,.fourthMoodFrame,.fourthMoodThread{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s}
.fourthMoodWash{background:radial-gradient(circle at 58% 44%,transparent 0 15%,#081311b3 79%)}
.fourthMoodFrame{inset:11% 11% 16%;border:1px solid #f4d9a7d1;box-shadow:0 0 0 100px #05110d53}
.fourthMoodFrame i{position:absolute;display:block;background:#f4d9a7ad}
.fourthMoodFrame i:first-child{top:38.2%;left:0;right:0;height:1px}
.fourthMoodFrame i:nth-child(2){top:0;bottom:0;left:61.8%;width:1px}
.fourthMoodFrame i:nth-child(3){left:61.8%;top:38.2%;width:15px;height:15px;border:1px solid #f4d9a7;border-radius:50%;transform:translate(-50%,-50%);background:#18241be8;box-shadow:0 0 18px #f4d9a7}
.fourthMoodThread{width:100%;height:100%;filter:drop-shadow(0 0 7px #f5d49c)}
.fourthMoodThread path{fill:none;stroke:#ffe1a5;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1200;stroke-dashoffset:1200}
.cabinetFourth[data-layer="composition"] .fourthMoodStage[data-tool="light"] .fourthMoodWash,.cabinetFourth[data-layer="composition"] .fourthMoodStage[data-tool="space"] .fourthMoodFrame,.cabinetFourth[data-layer="composition"] .fourthMoodStage[data-tool="thread"] .fourthMoodThread{opacity:1}
.cabinetFourth[data-layer="composition"] .fourthMoodStage[data-tool="thread"] .fourthMoodThread path{animation:fourthThreadDraw 1.15s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes fourthThreadDraw{to{stroke-dashoffset:0}}
.fourthMoodStage figcaption{position:absolute;z-index:2;left:clamp(20px,3vw,42px);right:20px;bottom:clamp(18px,3vw,34px);display:grid;gap:7px;color:#fff7e9;text-shadow:0 2px 11px #000a}
.fourthMoodStage figcaption span{color:#f3d49f;font:700 9px/1.4 Arial,sans-serif;letter-spacing:.18em}
.fourthMoodStage figcaption strong{font:italic 400 clamp(42px,5vw,76px)/.95 Georgia,serif;letter-spacing:-.045em}
.fourthMoodStage figcaption small{max-width:35ch;color:#f5e9db;font:14px/1.38 Georgia,serif}
.fourthInteractionControls[hidden]{display:none!important}
.fourthChosenFeeling{display:flex;align-items:center;gap:10px;width:max-content;max-width:100%;margin:13px 0 0;padding:4px 11px 4px 4px;border:1px solid #f0d7aa7d;background:#0c1e1ac9;color:#ffe9c4;font:700 9px/1.3 Arial,sans-serif;letter-spacing:.13em}
.fourthChosenFeeling img{display:block;width:35px;height:35px;object-fit:cover}
.fourthSliderWrap{display:block;margin-top:16px;max-width:440px;color:#f4d8a9;font:700 9px/1.3 Arial,sans-serif;letter-spacing:.13em}
.fourthSliderWrap>span{display:block;margin-bottom:9px}
.fourthSliderWrap input{display:block;width:100%;height:28px;margin:0;accent-color:#f0cc91;cursor:pointer;touch-action:manipulation}
.fourthStops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;max-width:440px;margin-top:9px}
.fourthStops button{appearance:none;min-height:44px;padding:7px 5px;border:1px solid #ddcba972;background:#0f211dba;color:#d8d0bc;font:700 8px/1.3 Arial,sans-serif;letter-spacing:.11em;text-align:center;cursor:pointer;transition:background .25s,border-color .25s,color .25s,transform .25s}
.fourthStops button:hover{transform:translateY(-2px);background:#e7c99626}
.fourthStops button[aria-pressed="true"]{background:#e7c99629;border-color:#f5d69c;color:#fff9e9}
.fourthNextChapter[hidden]{display:none!important}
.fourthNextChapter{display:block;min-height:44px;margin:18px 0 0;padding:9px 14px;border:1px solid #f5d69c;background:#ead6b32e;color:#fff4df;font:700 9px/1.35 Arial,sans-serif;letter-spacing:.1em;text-align:left;cursor:pointer}
.fourthNextChapter:hover{background:#ead6b34d}
.fourthFooter{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:end;gap:18px;padding:14px clamp(20px,4vw,60px) 18px;border-top:1px solid #e9d9b75c;color:#dbd0bf;font:700 9px/1.4 Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.fourthFooter>span:first-child{max-width:410px}
.fourthFooter a{color:#f0cf9a;text-decoration:underline;text-underline-offset:4px}
.fourthFooter a[hidden]{display:none}
.fourthInscription{position:absolute;z-index:1;right:15%;top:47%;width:28%;text-align:center;transform:rotate(-8deg);color:#37362a;font:italic 400 clamp(38px,5vw,84px)/1 Georgia,serif;letter-spacing:-.055em;text-shadow:0 1px 2px #fff8e4b3;opacity:.88;transition:opacity .45s,transform .7s}
.fourthGuides{position:absolute;z-index:1;inset:11% 7% 15% 49%;opacity:0;transition:opacity .5s}
.fourthGuides i{position:absolute;display:block;background:#f4d9a78c;box-shadow:0 0 12px #f4d9a75e}
.fourthGuides i:nth-child(1){left:0;top:0;width:1px;height:100%}
.fourthGuides i:nth-child(2){left:60%;top:0;width:1px;height:100%}
.fourthGuides i:nth-child(3){left:0;top:18%;width:100%;height:1px}
.fourthGuides i:nth-child(4){left:0;top:76%;width:100%;height:1px}
.fourthGuides b{position:absolute;left:30%;top:31%;width:42%;aspect-ratio:1;border:1px solid #f3d9a7b8;border-radius:50%;box-shadow:0 0 0 20px #f4d9a70b,0 0 50px #f4d9a73b}
.fourthGuides span{position:absolute;color:#fff5df;font:700 10px/1 Arial,sans-serif;letter-spacing:.17em;text-shadow:0 2px 8px #000}
.fourthGuides span:nth-of-type(1){left:2%;top:11%}.fourthGuides span:nth-of-type(2){left:62%;top:12%}.fourthGuides span:nth-of-type(3){left:2%;top:80%}
.fourthMechanism{position:absolute;z-index:1;right:5%;top:29%;width:52%;height:310px;opacity:0;transition:opacity .45s}
.fourthMechanism svg{position:relative;z-index:2;display:block;width:100%;height:100%;overflow:visible}
.fourthMechanism path{fill:none;stroke-linecap:round}
.fourthTrack{stroke:#f0dfbd55;stroke-width:2;stroke-dasharray:4 11}
.fourthProgress{stroke:#ffdd9f;stroke-width:3;filter:drop-shadow(0 0 5px #ffd898) drop-shadow(0 0 18px #f7b95d);transition:stroke-dashoffset .2s ease}
.fourthMechanism circle{fill:#17251e;stroke:#ffdfad;stroke-width:3;filter:drop-shadow(0 0 9px #f9cd87);opacity:.65;transition:fill .25s,opacity .25s,transform .25s;transform-box:fill-box;transform-origin:center}
.fourthMechanism circle.isReached{fill:#ffe2ae;opacity:1;transform:scale(1.25)}
.fourthMechanism .fourthTravelerHalo{fill:#ffe1ab28;stroke:#ffe4bc9e;stroke-width:1;opacity:.75;filter:drop-shadow(0 0 11px #ffd392)}
.fourthMechanism .fourthTravelerHalo.isAtStop{fill:#ffe1ab48;opacity:1}
.fourthMechanism .fourthTraveler{fill:#fff2d1;stroke:#192922;stroke-width:3;opacity:1;filter:drop-shadow(0 0 10px #ffe2a7) drop-shadow(0 0 22px #ffd289)}
.fourthSceneWindow{position:relative;display:block;overflow:hidden;isolation:isolate;background:#1b2723;border:1px solid #f5e0b6c9;box-shadow:0 15px 55px #0008,0 0 35px #e7c99625}
.fourthSceneWindow img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;filter:saturate(.9) brightness(.85);transform:scale(1.05);transition:opacity .23s linear,transform .8s cubic-bezier(.2,.7,.2,1)}
.fourthSceneWindow:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0a1614bd,transparent 52%);pointer-events:none}
.fourthSceneWindow span{position:absolute;z-index:1;left:15px;bottom:13px;color:#fff7e8;font:700 9px/1.3 Arial,sans-serif;letter-spacing:.14em;text-shadow:0 2px 8px #000}
.cabinetFourth[data-layer="interaction"] .fourthSceneWindow{animation:fourthWindowReveal .72s cubic-bezier(.2,.72,.2,1) both}
@keyframes fourthWindowReveal{from{clip-path:inset(0 100% 0 0);opacity:.35}to{clip-path:inset(0);opacity:1}}
.fourthMechanism .fourthSceneWindow{position:absolute;z-index:1;left:29%;top:2%;width:46%;height:65%;transform:rotate(-1.5deg)}
.fourthMechanism strong{position:absolute;z-index:3;right:12%;bottom:0;color:#fff7e6;font:italic 400 clamp(40px,5vw,78px)/1 Georgia,serif;letter-spacing:-.055em;text-shadow:0 4px 20px #000;white-space:nowrap}
.fourthMobileScene{display:none}
.cabinetFourth[data-layer="composition"] .fourthStage>img{filter:brightness(.31) saturate(.42);transform:scale(1.025)}
.cabinetFourth[data-layer="interaction"] .fourthStage>img{filter:brightness(.18) saturate(.3);transform:scale(1.06)}
.cabinetFourth[data-layer="interaction"] .fourthMechanism{opacity:1}
.cabinetFourth:not([data-layer="intention"]) .fourthInscription{opacity:0;transform:rotate(-8deg) translateY(12px)}
.cabinetFourth :is(button,input,a):focus-visible{outline:3px solid #f5d69d;outline-offset:4px}
@media(max-width:900px){.fourthContent{grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:22px;margin:0 28px}.fourthMoodChoices button{grid-template-columns:1fr;gap:5px}.fourthMoodChoices img{width:100%;height:44px}.fourthStage:after{background:linear-gradient(90deg,#0a1512f5,#0a1512d7 35%,transparent 85%),linear-gradient(0deg,#0b1715ed,transparent 48%)}.fourthMechanism{right:3%;width:55%}}
@media(max-width:700px){
 #cabinetFinaleEnter{font-size:9px;min-height:44px;padding:10px 13px}
 .cabinetFourth{min-height:100dvh}
 .fourthStage{height:75%;bottom:auto}
 .fourthStage>img{object-position:69% center}
 .fourthStage:after{background:linear-gradient(0deg,#0d1916 0%,#0d1916f2 20%,#0d1916a0 60%,transparent 90%),linear-gradient(180deg,#0d19167d,transparent 35%)}
 .fourthHeader{padding:10px 15px;gap:6px;font-size:8px;letter-spacing:.06em}
 .fourthHeader button{min-height:42px;padding:6px 8px;font-size:8px}
 .fourthHeader>span{font-size:8px}
 .fourthContent{display:flex;flex:0 0 auto;flex-direction:column;width:100%;min-height:auto;margin:0;justify-content:flex-start;gap:18px;padding:10vh 20px 30px}
 .fourthMoodStage{order:1;flex:0 0 auto;width:100%;max-height:none;aspect-ratio:1.34}
 .fourthLower{order:2;max-width:none;width:100%}
 .fourthIntro>span,.fourthLayerPanel>span{font-size:9px}
 .fourthIntro h2{font-size:clamp(42px,11vw,58px);margin:8px 0 12px}
 .fourthIntro p{font-size:14px;line-height:1.42;max-width:360px}
 .fourthMoodStage figcaption{left:20px;bottom:18px}
 .fourthMoodStage figcaption strong{font-size:clamp(31px,10vw,43px)}
 .fourthMoodStage figcaption small{font-size:12px}
 .fourthMoodChoices button{grid-template-columns:1fr;gap:5px;min-height:0;padding:4px;text-align:center}
 .fourthMoodChoices img{height:58px}
 .fourthTabs button{font-size:8px;letter-spacing:.04em;min-height:47px}
 .fourthLayerPanel{padding-top:17px;min-height:120px}
 .fourthLayerPanel h3{font-size:27px;margin:7px 0}
 .fourthLayerPanel p{font-size:14px;line-height:1.45}
 .cabinetFourth[data-layer="interaction"] .fourthContent{padding-top:12vh;gap:14px}
 .fourthSliderWrap{margin-top:12px}
 .fourthStops button{min-height:44px;font-size:8px;letter-spacing:.04em}
 .fourthFooter{flex:0 0 auto;padding:11px 20px calc(13px + env(safe-area-inset-bottom));font-size:8px;line-height:1.3}
 .fourthFooter>span:first-child{max-width:190px}
 .fourthInscription{top:24%;right:13%;width:53%;font-size:clamp(36px,11vw,48px)}
 .fourthGuides{inset:14% 7% auto 15%;height:20%}
 .fourthMechanism{right:3%;top:7%;width:94%;height:145px}
 .fourthMechanism .fourthSceneWindow,.fourthMechanism strong{display:none}
 .fourthMobileScene{display:block;height:112px;margin-top:12px}
 .fourthMobileScene strong{position:absolute;z-index:2;right:42px;bottom:8px;max-width:calc(100% - 70px);color:#fff9e7;font:italic 400 28px/1 Georgia,serif;letter-spacing:-.055em;text-shadow:0 3px 12px #000;white-space:nowrap}
 .fourthMobileScene span{bottom:auto;top:11px}
}
@media(max-width:390px){.fourthHeader>span{display:none}.fourthHeader{grid-template-columns:1fr 1fr}.fourthContent{padding-top:9vh;gap:14px}.fourthIntro h2{font-size:41px;margin-bottom:8px}.fourthLayerPanel{padding-top:12px}.fourthSliderWrap{margin-top:8px}.fourthFooter{gap:8px}.fourthFooter>span:first-child{max-width:165px}}
@media(prefers-reduced-motion:reduce){
 #cabinetFinaleEnter,.fourthStage>img,.fourthInscription,.fourthGuides,.fourthMechanism,.fourthProgress,.fourthMechanism circle,.fourthSceneWindow img,.fourthStops button{transition:none!important}
 .cabinetFourth[data-layer="interaction"] .fourthSceneWindow{animation:none!important}
 .fourthMoodStage>img,.fourthMoodWash,.fourthMoodFrame,.fourthMoodThread{transition:none!important}
 .cabinetFourth[data-layer="composition"] .fourthMoodStage[data-tool="thread"] .fourthMoodThread path{animation:none!important;stroke-dashoffset:0}
}