:root{
  --miami:#F4A6C6;
  --lav:#B8A7E8;
  --lilac:#9676D3;
  --aqua:#79D9DC;
  --moon:#F6D978;
  --ink:#342B63;
  --paper:#FFF9F3;
  --spirit:#F8D5E4;
  --haze:#E7DFF5;
  --cloud:#CDECF1;
  --line:#c9b9e5;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at 12% 18%,#F8D5E477,transparent 20rem),radial-gradient(circle at 90% 16%,#79D9DC33,transparent 18rem),linear-gradient(180deg,#fffaf7,#fff7fb 55%,#f7fbfc);color:var(--ink);font:15px/1.65 'Courier New',monospace}
a{color:#7659b4;text-decoration:none;cursor:pointer}a:hover{color:#d45c96;text-decoration:underline dotted}.site{max-width:1280px;margin:auto;border-inline:1px solid var(--line);background:#fff9f3d9;box-shadow:0 0 70px #9676D30f}.sparkles{position:fixed;inset:12% 3% auto;color:var(--miami);word-spacing:9vw;pointer-events:none;z-index:-1;animation:twinkle 3s infinite}@keyframes twinkle{50%{opacity:.3}}
.top{min-height:42px;padding:7px 14px;border-top:1px solid var(--lilac);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px;background:#fff9f3e6}.top nav{display:flex;flex-wrap:wrap;justify-content:center}.top button{background:var(--paper);border:1px dashed var(--lav);color:#7659b4;padding:4px 8px;font-family:inherit}

/* VERSION 4 MASTHEAD */
.masthead-v4{position:relative;min-height:420px;padding:26px 34px 18px;display:grid;grid-template-columns:1.1fr 1.25fr .9fr;grid-template-rows:1fr auto;gap:8px 18px;align-items:center;overflow:hidden;border-bottom:1px dotted var(--miami);background:linear-gradient(135deg,#fff9f3 0 33%,#f8d5e433 62%,#cdecf13b)}
.masthead-v4:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#B8A7E81a 1px,transparent 1px),linear-gradient(90deg,#B8A7E81a 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(to bottom,#0008,transparent 88%);pointer-events:none}.masthead-stars{position:absolute;left:4%;top:16px;color:var(--moon);letter-spacing:14px;font-size:18px}.browser-stage,.brand-v4,.writer-stage,.visitor-v4{position:relative;z-index:1}.browser-stage{align-self:end;min-height:235px}.browser-window{display:block;width:min(100%,480px);filter:drop-shadow(8px 9px 0 #342B6315)}.browser-copy{position:absolute;left:10%;top:9%;right:12%;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:10px;color:#664e99;pointer-events:none}.browser-user{font-weight:bold}.browser-status{font-size:8px;opacity:.8}.browser-screen-copy{position:absolute;left:17%;right:12%;top:42%;display:grid;gap:10px;pointer-events:none}.screen-kicker{font-size:10px;letter-spacing:.12em;color:#875ba3}.screen-line{font-size:11px;color:#9a6689}.brand-v4{text-align:center;align-self:center}.eyebrow{margin:0 0 4px;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:#8c73b8}.brand-v4 h1{margin:0;font-size:clamp(48px,6vw,79px);line-height:.83;letter-spacing:.035em;color:var(--ink);text-shadow:3px 3px 0 #B8A7E84d}.brand-v4 h1 span{font-size:.77em;letter-spacing:.09em}.tagline{margin:18px auto 8px;max-width:480px;color:#c86697;font-size:clamp(14px,1.9vw,21px);line-height:1.35;font-style:italic}.brand-links{font-size:9px;color:#8469ae;letter-spacing:.07em}.writer-stage{height:270px;align-self:end}.writer-ghosts{position:absolute;right:-24px;bottom:-8px;width:min(330px,110%);filter:drop-shadow(5px 7px 0 #342B6310)}.whisper{position:absolute;padding:5px 8px;background:#fff9f3e8;border:1px dashed var(--miami);font-size:9px;color:#875b8e;transform:rotate(-3deg)}.whisper-a{right:10px;top:18px}.whisper-b{left:10px;top:84px;transform:rotate(3deg)}.visitor-v4{grid-column:1/-1;justify-self:center;display:flex;align-items:center;gap:10px;padding:8px 14px;background:#fff9f3cc;border:1px solid var(--line);box-shadow:3px 3px 0 #B8A7E832;font-size:9px;letter-spacing:.06em}.visitor-v4 strong{padding:2px 8px;border:1px solid var(--lilac);color:#d05c94;font-size:17px;letter-spacing:.13em}.visitor-v4 small{font-size:9px}.ticker{overflow:hidden;border-bottom:1px solid var(--line);background:linear-gradient(90deg,var(--spirit),var(--haze),var(--cloud),var(--spirit));font-size:10px;white-space:nowrap}.ticker span{display:inline-block;padding:6px 0;min-width:100%;animation:marquee 22s linear infinite}@keyframes marquee{from{transform:translateX(100%)}to{transform:translateX(-100%)}}

.grid{display:grid;grid-template-columns:220px minmax(0,1fr) 250px;gap:18px;padding:18px}.box{position:relative;margin-bottom:14px;padding:13px;background:#fffaf7df;border:1px solid var(--line);box-shadow:2px 2px #7966aa14}.box h2{margin:0 0 10px;color:#7659b4;font-size:14px;text-align:center;font-weight:normal}.navbox a{display:block;padding:3px 0;border-bottom:1px dotted #b7a9db66}.status{padding-top:0}.status h2,.player h2,.dream-widget h2{margin-inline:-13px;margin-top:0;padding:3px 6px;border-bottom:1px solid var(--lilac);background:linear-gradient(90deg,var(--spirit),#B8A7E899,var(--cloud));display:flex;justify-content:space-between}.status p{font-size:12px}.status-v4{text-align:center}.status-ghost-wrap{height:132px;margin:-2px auto 4px;overflow:hidden;display:grid;place-items:center}.status-ghost-wrap img{width:155px;transform:rotate(-3deg)}
.post{padding:20px 24px;border:1px dashed var(--lav);background:#fffdfbbb}.postnav{display:flex;justify-content:space-between;padding-bottom:18px;border-bottom:1px dotted var(--lav);font-size:12px}.title{display:flex;justify-content:space-between}.title h2{font-size:clamp(28px,4vw,45px);line-height:1.15;font-weight:normal;margin:22px 0}.ghost{border:0;background:none;font-size:50px}.filed{border-top:1px dotted var(--lav);padding-top:8px;font-size:12px}.essay p{margin:22px 0}.inky{float:right;width:170px;margin:10px 0 14px 22px;padding:10px;border:1px dashed var(--miami);background:#f8f0f5aa;display:flex;gap:7px;font-size:12px}.inky:first-letter{font-size:34px}.divider{clear:both;text-align:center;color:#7659b4;letter-spacing:6px;padding:8px;border-block:1px dotted var(--lav)}.feature{display:grid;grid-template-columns:minmax(180px,.85fr) minmax(0,1.3fr);gap:22px;align-items:center}.miami{min-height:250px;padding:16px;background:linear-gradient(#B8A7E8,#F4A6C6 45%,#F6D978 72%,#342B63 73%);border:7px solid var(--paper);outline:1px solid var(--lav);transform:rotate(-2deg);text-align:center;color:white;display:flex;flex-direction:column;justify-content:space-between}.miami b{padding:8px;background:#342B63bb;align-self:center;letter-spacing:4px}.miami span{font-size:38px}.note{width:180px;margin:30px 0 25px auto;padding:18px;background:#fff0db;border:1px solid #e3c4b3;border-top:12px solid #ffffff66;transform:rotate(-2deg);display:grid;gap:8px}.note strong{font-weight:normal}.postend{text-align:center;padding:16px;border:1px solid var(--line);background:#f8f0f599}
.tarot>div{width:130px;height:170px;margin:auto;padding:9px;border:4px double var(--ink);background:linear-gradient(#6a6f9e,#3f486f);color:#f9e6c8;display:flex;flex-direction:column;justify-content:space-between;text-align:center}.dream-widget{text-align:center;padding-top:0}.dream-widget img{display:block;width:165px;margin:-4px auto -8px}.dream-widget p{font-size:11px;line-height:1.5}.dream-widget a{font-size:10px}.about-v4 p{font-size:11px;line-height:1.6}.about-v4>a{display:block;text-align:right;font-size:11px}.player-v4{padding-top:0;text-align:center}.player-v4 img{width:150px;display:block;margin:-5px auto -10px}.track{display:grid;line-height:1.35;margin-bottom:6px}.track span{font-size:11px}.player input{width:100%;accent-color:var(--miami)}.controls{text-align:center;color:#7659b4}.construction{text-align:center}.construction>div{display:grid;grid-template-columns:1fr 1.4fr .65fr;align-items:center;gap:6px}.construction b{padding:7px 5px;border:3px double var(--ink);background:#fff6d7;font-size:10px}.construction em{font-size:9px;font-style:normal}.construction span{font-size:28px}.construction-door{width:54px;height:75px;object-fit:contain;display:block;margin:-2px auto 4px}
.badges{padding:0 18px 18px;display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.badges a{min-height:58px;padding:7px;display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line);background:linear-gradient(#fff,#f8f0f5);color:var(--ink);font-size:10px;line-height:1.25}.badges a:first-letter{font-size:24px}.badges a:hover{transform:translateY(-2px);background:var(--spirit);text-decoration:none}.foot{padding:18px;border-top:1px dotted var(--miami);display:grid;grid-template-columns:repeat(4,1fr);gap:14px;text-align:center;font-size:12px}.foot>div{min-height:100px;padding:10px;border:1px solid var(--line)}.copyright{padding:12px;border-top:1px solid var(--line);text-align:center;color:#7659b4;font-size:11px}#msg{position:fixed;left:50%;bottom:25px;transform:translate(-50%,130%);opacity:0;transition:.35s;padding:12px 16px;background:var(--paper);border:1px solid var(--miami);box-shadow:5px 5px var(--spirit);font-size:13px;z-index:9}#msg.show{transform:translate(-50%,0);opacity:1}

@media(max-width:1100px){.masthead-v4{grid-template-columns:1fr 1.2fr}.writer-stage{grid-column:2;grid-row:1}.browser-stage{grid-column:1;grid-row:1}.brand-v4{grid-column:1/-1;grid-row:2;padding-top:0}.visitor-v4{grid-row:3}.grid{grid-template-columns:190px minmax(0,1fr)}.grid>aside:last-child{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.badges{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.top,.grid{display:block}.top>*{display:block;text-align:center;margin:5px auto}.masthead-v4{display:flex;flex-direction:column;min-height:0;padding:24px 14px 16px}.browser-stage{order:2;width:100%;min-height:0;margin-top:8px}.browser-window{width:100%;max-width:520px;margin:auto}.browser-copy{left:11%;right:12%;top:10%}.browser-status{display:none}.browser-screen-copy{left:17%;top:43%}.brand-v4{order:1}.brand-v4 h1{font-size:54px}.writer-stage{order:3;width:100%;height:220px}.writer-ghosts{width:260px;right:50%;transform:translateX(50%)}.whisper-a{right:14%}.whisper-b{left:14%}.visitor-v4{order:4;flex-wrap:wrap;justify-content:center}.grid{padding:10px}.grid>aside:last-child{display:block}.post{margin:14px 0;padding:16px}.feature{grid-template-columns:1fr}.badges{grid-template-columns:repeat(2,1fr);padding:0 10px 14px}.foot{grid-template-columns:1fr}.inky{float:none;width:auto;margin:14px 0}.ticker span{animation-duration:14s}}


/* VERSION 4.1 — masthead polish + haunted sidebars */
@media(min-width:1101px){
  .masthead-v4{min-height:390px;grid-template-columns:1.18fr 1.22fr 1fr;padding:18px 30px 12px;gap:2px 8px}
  .browser-stage{min-height:270px;align-self:center;transform:translate(24px,12px);z-index:2}
  .browser-window{width:570px;max-width:125%;filter:drop-shadow(10px 11px 0 #342B6318)}
  .browser-copy{left:10.5%;right:2%;top:9.5%;font-size:10px}
  .browser-screen-copy{left:18%;right:-1%;top:42%;gap:12px}
  .brand-v4{z-index:3;transform:translateY(-3px)}
  .writer-stage{height:300px;z-index:2;transform:translate(-8px,8px)}
  .writer-ghosts{width:355px;max-width:none;right:-8px;bottom:-6px}
  .visitor-v4{margin-top:-8px}
}

.grid{align-items:start;background:linear-gradient(90deg,#f8d5e41c 0 238px,transparent 238px calc(100% - 268px),#cdecf11c calc(100% - 268px));}
.grid>aside{position:relative}
.grid>aside:first-child:before,.grid>aside:last-child:before{content:"✦";position:absolute;color:var(--moon);font-size:18px;opacity:.8;z-index:2}
.grid>aside:first-child:before{left:-8px;top:-13px}.grid>aside:last-child:before{right:-6px;top:-12px}

.window-box,.status-v4,.dream-widget,.player-v4{overflow:hidden;border:1px solid #9f8ccc;box-shadow:4px 4px 0 #B8A7E82b;background:#fffdfbcc}
.window-box h2,.status-v4 h2,.dream-widget h2,.player-v4 h2{min-height:27px;margin:-13px -13px 11px;padding:4px 7px;border-bottom:1px solid #8c75bd;background:linear-gradient(90deg,#F4A6C6aa,#B8A7E8aa 55%,#79D9DC80);display:flex;align-items:center;justify-content:space-between;text-align:left;color:var(--ink);font-size:11px;font-weight:bold;letter-spacing:.03em}
.status-v4 h2,.dream-widget h2,.player-v4 h2{margin-top:0}
.window-buttons{font-size:10px;letter-spacing:2px;white-space:nowrap;color:#4f407f}

.navbox{padding-bottom:8px}.navbox .folder-label{margin:0 -2px 8px;padding:5px 7px;border:1px inset #d8cdec;background:#fff;font-size:9px;color:#8c73a8;overflow:hidden;white-space:nowrap}.navbox a{display:grid;grid-template-columns:22px 1fr;align-items:center;padding:4px 5px;border-bottom:1px dotted #b7a9db66;font-size:11px}.navbox a:hover{background:linear-gradient(90deg,#F8D5E480,#CDECF160);text-decoration:none}.navbox a span{text-align:center;color:#bd6290}.nav-footer{margin:8px -5px -3px;padding-top:5px;border-top:1px solid #d9cce8;text-align:center;font-size:8px;color:#8c73a8}

.status-v4{background:linear-gradient(180deg,#fffdfb,#fff8fb)}.status-v4 .status-ghost-wrap{height:145px;background:radial-gradient(circle at 50% 75%,#79D9DC30,transparent 54%)}.status-v4 .status-ghost-wrap img{width:174px}.status-v4 p{margin:7px 2px;padding:6px 7px;border-left:3px solid var(--miami);background:#fff9f3;font-size:10px;text-align:left;line-height:1.45}.status-v4 p:nth-of-type(2){border-color:var(--aqua)}.status-v4 p:nth-of-type(3){border-color:var(--lav)}

.footprints p{margin:7px 0;padding:6px 8px;background:#fff9f3;border:1px dotted #d6c5e8;font-size:10px;line-height:1.35}.footprints p:nth-of-type(2){background:#fdf3f8}.footprints small{color:#9a7eaa}.tiny-link{display:block;text-align:center;font-size:9px;margin-top:8px}

.tarot{text-align:center}.tarot>div{width:138px;height:182px;box-shadow:5px 6px 0 #342B6320}.tarot>small{display:block;margin-top:8px;font-size:8px;color:#8d74a4}
.dream-widget{background:linear-gradient(180deg,#fffdfb,#f7f1fb)}.dream-widget img{width:185px;margin:-10px auto -15px;filter:drop-shadow(4px 5px 0 #342B6310)}.dream-widget p{margin:7px 5px 10px;padding:8px;border:1px dashed #bca8dc;background:#fff9f3b8}.dream-widget a{display:inline-block;margin-bottom:4px;padding:3px 7px;background:var(--spirit);border:1px solid #d5acd0}
.about-v4{background:linear-gradient(145deg,#fffdfb,#F8D5E43d)}.about-v4:after{content:"ghost.typewriter44_";display:block;margin-top:9px;padding-top:6px;border-top:1px dotted var(--lav);font-size:8px;color:#a47b9b}
.player-v4{background:linear-gradient(180deg,#fffdfb,#eef9fa)}.player-v4 img{width:172px;margin:-12px auto -15px;filter:drop-shadow(4px 5px 0 #342B6310)}.player-v4 .track{margin:2px 8px 7px;padding:7px;border:1px solid #b7a9db;background:#fff9f3}.player-v4 .controls{margin-top:5px;padding:3px;background:#E7DFF580;border:1px dotted #a895ca;font-size:12px}
.construction{background:repeating-linear-gradient(135deg,#fffdfb 0 14px,#fff8e8 14px 28px)}

.post{box-shadow:5px 5px 0 #B8A7E814}.post:before{content:"ghost_typewriter.exe  —  journal entry";display:block;margin:-20px -24px 18px;padding:5px 9px;border-bottom:1px solid #9f8ccc;background:linear-gradient(90deg,#E7DFF5,#F8D5E4,#CDECF1);font-size:9px;color:#6d5997}

@media(max-width:760px){.post:before{margin:-16px -16px 15px}.window-box h2{margin:-13px -13px 11px}.browser-stage{transform:none}.browser-window{max-width:520px}}

/* VERSION 4.2 — masthead balance + interior page system */
@media(min-width:1101px){
  .masthead-v4{grid-template-columns:1.05fr 1.3fr 1fr;gap:4px 18px}
  .browser-stage{transform:translate(-8px,12px);z-index:1}
  .browser-window{width:510px;max-width:116%}
  .browser-copy{left:10%;right:5%;top:9.5%}
  .browser-screen-copy{left:18%;right:3%;top:42%}
  .brand-v4{z-index:4;transform:translate(10px,-3px)}
  .writer-stage{transform:translate(-2px,8px)}
}

/* shared interior pages */
.inner-page{max-width:1000px;margin:0 auto;padding:34px 24px 46px}
.inner-hero{position:relative;min-height:260px;margin-bottom:20px;padding:34px 34px 30px;border:1px solid var(--line);background:linear-gradient(135deg,#fffdfb,#F8D5E455 48%,#CDECF155);overflow:hidden;box-shadow:6px 6px 0 #B8A7E824}
.inner-hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#B8A7E819 1px,transparent 1px),linear-gradient(90deg,#B8A7E819 1px,transparent 1px);background-size:28px 28px;pointer-events:none}
.inner-hero-copy{position:relative;z-index:2;max-width:620px}
.inner-hero .eyebrow{margin:0 0 8px;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:#866aa3}
.inner-hero h1{margin:0;font:700 58px/.95 Georgia,serif;letter-spacing:.04em;color:var(--ink)}
.inner-hero .subhead{max-width:560px;margin:18px 0 0;font-size:16px;font-style:italic;color:#a1537d}
.inner-hero .hero-ghost{position:absolute;right:12px;bottom:-26px;width:285px;z-index:1;filter:drop-shadow(6px 7px 0 #342B6310)}
.inner-windowbar{display:flex;justify-content:space-between;align-items:center;margin:-1px -1px 22px;padding:5px 9px;border:1px solid #9f8ccc;background:linear-gradient(90deg,#E7DFF5,#F8D5E4,#CDECF1);font-size:9px;color:#66538b}
.inner-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(240px,.7fr);gap:18px;align-items:start}
.inner-card{padding:22px;border:1px solid var(--line);background:#fffdfbcc;box-shadow:4px 4px 0 #B8A7E819}
.inner-card h2{margin:0 0 12px;font:700 25px Georgia,serif;color:var(--ink)}
.inner-card h3{margin:22px 0 8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#7659b4}
.inner-card p{margin:0 0 14px}.inner-card p:last-child{margin-bottom:0}
.about-manifesto{font-size:16px;line-height:1.9}.about-manifesto strong{color:#a1537d}
.about-manifesto .about-beat{margin:24px 0;font-weight:700;font-size:18px;letter-spacing:.02em;color:var(--ink)}
.about-manifesto .about-thesis{margin:24px 0;padding:14px 16px;border-left:4px solid var(--aqua);background:#f5fbfc;font-weight:700;color:var(--ink)}
.about-manifesto .about-signoff{margin-top:28px;font:italic 700 18px Georgia,serif;color:#7659b4}
.field-note{margin:18px 0;padding:14px 16px;border-left:4px solid var(--aqua);background:#f5fbfc;font-size:12px}
.side-stack{display:grid;gap:14px}.mini-window{overflow:hidden;border:1px solid #9f8ccc;background:#fffdfb;box-shadow:4px 4px 0 #B8A7E824}.mini-window h2{margin:0;padding:5px 8px;border-bottom:1px solid #9f8ccc;background:linear-gradient(90deg,#F4A6C6aa,#B8A7E8aa,#79D9DC80);display:flex;justify-content:space-between;font-size:10px}.mini-window .inside{padding:13px;font-size:11px}.mini-window img{display:block;max-width:100%;margin:auto}.about-miami{width:180px;margin:-10px auto -8px}.tiny-list{margin:0;padding-left:18px}.tiny-list li{margin:6px 0}.return-home{display:inline-block;margin-top:18px;padding:6px 10px;border:1px dotted #a68ac4;background:var(--paper);font-size:11px}.page-foot{max-width:1000px;margin:0 auto 24px;padding:12px 24px;text-align:center;border-top:1px dotted var(--miami);font-size:10px;color:#82689b}
@media(max-width:760px){.inner-page{padding:18px 10px 32px}.inner-hero{min-height:360px;padding:24px 20px 150px}.inner-hero h1{font-size:44px}.inner-hero .hero-ghost{width:220px;right:50%;transform:translateX(50%);bottom:-28px}.inner-grid{grid-template-columns:1fr}.inner-card{padding:17px}}

/* VERSION 4.3 — writings archive + quiet reading room */
.reading-widget{background:linear-gradient(145deg,#fffdfb,#E7DFF54a)}.reading-inside{display:grid;grid-template-columns:105px 1fr;align-items:center;gap:7px}.reading-inside img{width:115px;margin:-10px 0 -8px;filter:drop-shadow(3px 4px 0 #342B6310)}.reading-inside p{margin:4px 0;font-size:10px}.reading-label{color:#9d6085;font-style:italic}.reading-note{padding:5px;border-left:2px solid var(--aqua);background:#fff9f3}.reading-future{display:block;padding-top:6px;border-top:1px dotted var(--lav);font-size:8px;color:#8c73a8;text-align:center}
.folder-hero{min-height:280px;padding:34px 42px;display:grid;grid-template-columns:1.25fr .75fr;align-items:center;border:1px solid var(--line);background:linear-gradient(135deg,#fffdfb,#F8D5E45c,#CDECF14f);box-shadow:6px 6px 0 #B8A7E824}.folder-hero h1{margin:0;font:700 60px/.9 Georgia,serif;letter-spacing:.04em}.folder-hero p:not(.eyebrow){font-style:italic;color:#a1537d}.folder-art{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--moon)}.big-folder{min-width:185px;padding:42px 20px 28px;border:2px solid var(--ink);border-radius:5px 16px 6px 6px;background:linear-gradient(180deg,var(--spirit),var(--lav));box-shadow:8px 8px 0 #342B6317;color:var(--ink);text-align:center;font-weight:bold;letter-spacing:.08em;transform:rotate(2deg)}.big-folder small{font-weight:normal;font-size:9px}.file-browser{border:1px solid #9f8ccc;background:#fffdfb;box-shadow:5px 5px 0 #B8A7E81c}.file-browser-head,.writing-file{display:grid;grid-template-columns:42px minmax(240px,1.6fr) 1fr 85px;align-items:center}.file-browser-head{padding:6px 12px 6px 54px;border-bottom:1px solid #9f8ccc;background:linear-gradient(90deg,#E7DFF5,#F8D5E4,#CDECF1);font-size:8px;text-transform:uppercase;letter-spacing:.08em}.writing-file{min-height:74px;padding:9px 12px;border-bottom:1px dotted #cdbfe1;color:var(--ink)}a.writing-file:hover{background:linear-gradient(90deg,#F8D5E45c,#CDECF14f);text-decoration:none}.file-icon{font-size:25px;color:#9b69b5}.file-name{display:grid}.file-name b{font-size:11px}.file-name small{color:#9a6d8c}.file-tags,.file-date{font-size:9px;color:#806a9c}.coming-file{opacity:.58}.writings-note{max-width:690px;margin:24px auto;padding:14px 18px;border:1px dashed var(--miami);background:#fff9f3;font-size:11px;transform:rotate(-.35deg)}
.reading-site{max-width:1180px}.reading-room{max-width:900px;margin:34px auto 55px;padding:0 16px}.reading-windowbar{display:flex;justify-content:space-between;padding:6px 10px;border:1px solid #8f7bbd;background:linear-gradient(90deg,var(--haze),var(--spirit),var(--cloud));font-size:9px}.essay-paper{padding:64px clamp(28px,8vw,92px);border:1px solid var(--line);border-top:0;background:var(--paper);box-shadow:8px 9px 0 #B8A7E81d}.essay-head{padding-bottom:30px;border-bottom:1px dotted var(--lav);text-align:center}.essay-head h1{max-width:700px;margin:8px auto 12px;font:normal clamp(38px,6vw,62px)/1.08 Georgia,serif;color:var(--ink)}.essay-deck{font-size:16px;font-style:italic;color:#a1537d}.essay-meta{font-size:9px;color:#826d98}.essay-body{max-width:680px;margin:42px auto;font:17px/2 'Courier New',monospace}.essay-body p{margin:0 0 25px}.essay-divider{text-align:center;margin:38px 0;color:#a98ec7;letter-spacing:.15em}.essay-end{margin-top:50px;padding-top:25px;border-top:1px dotted var(--miami);text-align:center;font-size:10px}.essay-end span{font-size:28px}.cabinet-hero{min-height:480px;padding:55px;border:1px solid var(--line);background:radial-gradient(circle at 80% 25%,#79D9DC35,transparent 14rem),linear-gradient(145deg,#fff9f3,#E7DFF5 70%,#342B6317);box-shadow:7px 7px 0 #342B6313}.cabinet-hero h1{margin:10px 0;font:700 clamp(42px,7vw,70px)/.95 Georgia,serif}.cabinet-hero>p:not(.eyebrow){max-width:650px;font-size:15px}.cabinet-drawer{max-width:500px;margin:70px auto 0;padding:28px;border:2px solid var(--ink);background:var(--spirit);box-shadow:8px 8px 0 #9676D344;text-align:center;transform:rotate(-1deg)}
@media(max-width:760px){.folder-hero{grid-template-columns:1fr;padding:28px 20px}.folder-hero h1{font-size:45px}.folder-art{margin-top:28px}.file-browser-head{display:none}.writing-file{grid-template-columns:35px 1fr}.file-tags,.file-date{grid-column:2;margin-top:4px}.essay-paper{padding:38px 22px}.essay-body{font-size:15px;line-height:1.85}.cabinet-hero{padding:35px 22px}.reading-inside{grid-template-columns:90px 1fr}.reading-inside img{width:100px}}

/* VERSION 4.4 — quieter footer + lost-pages room */
.bottom-haunt{margin:8px 18px 20px;padding:18px 20px 12px;border-top:1px dotted var(--lav);display:grid;grid-template-columns:auto auto 1fr;gap:12px;align-items:center;position:relative}.tiny-badge{display:inline-block;padding:7px 10px;border:1px solid var(--line);background:#fffdfb;font-size:9px;box-shadow:3px 3px 0 #F8D5E466}.tiny-badge.crooked{transform:rotate(1.5deg);background:#fff9f3}.bottom-note{justify-self:end;max-width:430px;padding:10px 14px;border:1px dashed #e2b4ca;background:#fff8fb;font-size:10px;line-height:1.6;transform:rotate(-.5deg)}.last-update{grid-column:1/-1;text-align:right;font-size:8px;color:#927ba8}.foot-v44{grid-template-columns:1.1fr 1fr 1.2fr;padding-top:12px}.foot-v44>div{min-height:72px;border-style:dotted;background:#fffdfb99}.foot-v44 span{font-size:9px;color:#8c73a8}.lost-page{max-width:900px;min-height:720px;margin:auto;padding:70px 24px;background:radial-gradient(circle at 50% 40%,#E7DFF565,transparent 45%)}.lost-window{max-width:680px;margin:auto;border:1px solid #77629e;background:#fffaf7;box-shadow:12px 12px 0 #342B6312;transform:rotate(-.35deg)}.lost-bar{display:flex;justify-content:space-between;padding:6px 9px;border-bottom:1px solid #77629e;background:linear-gradient(90deg,#F4A6C6aa,#B8A7E8aa,#79D9DC88);font-size:9px}.lost-inside{position:relative;min-height:500px;padding:42px 44px;text-align:center;overflow:hidden}.lost-inside:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#B8A7E814 1px,transparent 1px),linear-gradient(90deg,#B8A7E814 1px,transparent 1px);background-size:30px 30px;pointer-events:none}.lost-inside>*{position:relative;z-index:1}.lost-inside h1{margin:12px 0 4px;font:700 55px/.95 Georgia,serif;color:var(--ink);letter-spacing:.04em}.lost-inside img{width:220px;margin:-5px auto -20px;display:block}.lost-copy{font-size:14px;line-height:1.8}.lost-message{max-width:410px;margin:20px auto;padding:14px;border:1px dashed var(--miami);background:#fffdfbcc;font-size:11px;line-height:1.7}.lost-message strong{color:#a1537d}.lost-links{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.lost-links a{padding:7px 10px;border:1px dotted #a68ac4;background:var(--paper);font-size:10px}.lost-whisper{text-align:center;margin:28px;color:#9a7eaa;font-size:9px;font-style:italic}
@media(max-width:760px){.bottom-haunt{grid-template-columns:1fr 1fr;padding-inline:5px}.bottom-note{grid-column:1/-1;justify-self:stretch}.last-update{text-align:center}.foot-v44{grid-template-columns:1fr}.lost-page{min-height:620px;padding:35px 10px}.lost-inside{padding:32px 18px}.lost-inside h1{font-size:40px}.lost-inside img{width:190px}}


/* VERSION 4.5 — masthead clarity + typewriter mark */
/* The browser is now allowed to be an object, not a second text block. */
.masthead-v4 .masthead-stars{display:none}
.browser-stage{position:relative}
.browser-copy,.browser-screen-copy{display:none!important}
.browser-portal-label{
  position:absolute;
  left:50%;
  bottom:1px;
  transform:translate(-50%,55%) rotate(-1deg);
  padding:3px 8px;
  border:1px dotted #b79fd2;
  background:#fff9f3e8;
  color:#8066a1;
  font-size:8px;
  letter-spacing:.08em;
  white-space:nowrap;
  box-shadow:2px 2px 0 #f4a6c640;
}

.brand-v4{position:relative}
.brand-v4 h1{
  font-size:clamp(46px,5.45vw,72px);
  line-height:.88;
  letter-spacing:.035em;
}
.brand-v4 h1 span{
  font-size:1em;
  letter-spacing:.045em;
}
.brand-links{margin-top:6px}

.tiny-typewriter{
  position:relative;
  width:72px;
  height:42px;
  margin:5px auto 7px;
  filter:drop-shadow(3px 3px 0 #342B6310);
}
.typewriter-paper{
  position:absolute;
  left:18px;
  top:0;
  width:36px;
  height:21px;
  padding-top:2px;
  border:1.5px solid var(--ink);
  border-bottom:0;
  background:var(--paper);
  color:#c26796;
  font-size:8px;
  line-height:1;
  text-align:center;
  letter-spacing:2px;
}
.typewriter-body{
  position:absolute;
  left:7px;
  bottom:0;
  width:58px;
  height:25px;
  border:1.5px solid var(--ink);
  border-radius:4px 4px 7px 7px;
  background:linear-gradient(180deg,var(--lav),var(--miami));
  display:flex;
  justify-content:center;
  align-items:center;
  gap:4px;
}
.typewriter-body:before{
  content:"";
  position:absolute;
  left:6px;
  right:6px;
  top:4px;
  height:5px;
  border:1px solid var(--ink);
  background:var(--cloud);
}
.typewriter-body i{
  display:block;
  width:4px;
  height:4px;
  margin-top:10px;
  border:1px solid var(--ink);
  background:var(--paper);
}

/* A couple of intentional glints replace the loose emoji constellation. */
.brand-v4:before,.brand-v4:after{
  position:absolute;
  color:var(--moon);
  font-size:14px;
  opacity:.9;
}
.brand-v4:before{content:"✦";left:4%;top:27%}
.brand-v4:after{content:"✧";right:4%;top:39%;color:var(--aqua)}

@media(max-width:760px){
  .brand-v4 h1{font-size:50px}
  .tiny-typewriter{margin-top:8px}
  .browser-portal-label{bottom:4px}
  .brand-v4:before{left:2%}
  .brand-v4:after{right:2%}
}


/* VERSION 4.6 — Ghost World atmosphere pass #1 */
/* The old lonely sparkle strip is retired; the margins now behave like a dream-space. */
.sparkles{display:none!important}
.ghost-atmosphere{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.site{position:relative;z-index:1}
.constellation{position:absolute;color:var(--miami);font-family:Georgia,serif;text-shadow:0 0 12px #f4a6c666}
.constellation i{position:absolute;font-style:normal;animation:ghostTwinkle 4.8s ease-in-out infinite}
.constellation-left{left:max(22px,calc(50vw - 790px));top:150px;width:145px;height:620px}
.constellation-right{right:max(20px,calc(50vw - 790px));top:190px;width:145px;height:570px;color:#9f89d2}
.constellation-left i:nth-child(1){left:8px;top:28px;font-size:15px}.constellation-left i:nth-child(2){left:55px;top:72px;font-size:10px;animation-delay:.8s}.constellation-left i:nth-child(3){left:104px;top:128px;font-size:18px;animation-delay:1.6s;color:#c59bdd}.constellation-left i:nth-child(4){left:25px;top:205px;font-size:11px;animation-delay:2.2s}.constellation-left i:nth-child(5){left:92px;top:270px;font-size:14px;animation-delay:.4s;color:#f0c965}.constellation-left i:nth-child(6){left:46px;top:385px;font-size:12px;animation-delay:2.8s}.constellation-left i:nth-child(7){left:112px;top:475px;font-size:17px;animation-delay:1.2s}
.constellation-right i:nth-child(1){right:20px;top:15px;font-size:13px}.constellation-right i:nth-child(2){right:88px;top:96px;font-size:11px;animation-delay:1.1s}.constellation-right i:nth-child(3){right:34px;top:178px;font-size:15px;animation-delay:2.1s}.constellation-right i:nth-child(4){right:102px;top:292px;font-size:17px;animation-delay:.5s}.constellation-right i:nth-child(5){right:46px;top:420px;font-size:13px;animation-delay:2.9s;color:#f0c965}
@keyframes ghostTwinkle{0%,100%{opacity:.2;transform:translateY(0) scale(.9)}50%{opacity:.9;transform:translateY(-5px) scale(1.08)}}
.margin-computer{position:absolute;left:max(22px,calc(50vw - 790px));top:610px;width:92px;opacity:.78;transform:rotate(-5deg);filter:drop-shadow(5px 6px 0 #342B6310);animation:artifactFloat 7s ease-in-out infinite}
@keyframes artifactFloat{50%{transform:rotate(-2deg) translateY(-8px)}}
.dream-staircase{position:absolute;right:max(16px,calc(50vw - 790px));top:600px;width:130px;height:180px;opacity:.72;filter:drop-shadow(4px 5px 0 #342B630d)}
.dream-staircase .dream-sun{position:absolute;right:7px;top:2px;width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 38% 35%,#fff8c9 0 12%,var(--moon) 13% 62%,#f4a6c6 64%);box-shadow:0 0 28px #f6d97888}
.dream-staircase b{position:absolute;right:10px;height:18px;border:1.5px solid var(--ink);background:linear-gradient(90deg,#e7dff5,#b8a7e8,#f4a6c6);box-shadow:3px 3px 0 #342B6310}
.dream-staircase b:nth-of-type(1){bottom:46px;width:112px}.dream-staircase b:nth-of-type(2){bottom:64px;width:92px}.dream-staircase b:nth-of-type(3){bottom:82px;width:72px}.dream-staircase b:nth-of-type(4){bottom:100px;width:52px}.dream-staircase b:nth-of-type(5){bottom:118px;width:32px}
.dream-staircase small{position:absolute;bottom:20px;right:8px;color:#8c73a8;font-size:7px;white-space:nowrap;transform:rotate(-2deg)}

/* Tiny Y2K objects drift around the masthead without competing with the logo. */
.y2k-orbit{position:absolute;z-index:3;display:grid;place-items:center;border:1px solid #7862a5;background:#fff9f3cc;color:#d65f9a;box-shadow:3px 3px 0 #b8a7e844;line-height:1;animation:orbitBob 5s ease-in-out infinite}
.orbit-a{left:-8px;top:24px;width:34px;height:34px;border-radius:50%;font-size:20px;transform:rotate(-8deg)}
.orbit-b{right:3px;bottom:34px;width:25px;height:25px;font-size:13px;color:#8a70c4;animation-delay:1.5s}
@keyframes orbitBob{50%{translate:0 -7px}}
.planet-dream{position:absolute;right:-48px;top:10px;width:135px;opacity:.16;z-index:0;transform:rotate(8deg);filter:none}
.writer-ghosts,.whisper{z-index:2}

/* A little more depth in the world, while the reading area stays calm. */
.masthead-v4{box-shadow:inset 0 -18px 45px #b8a7e80d}
.grid{position:relative;background:linear-gradient(90deg,#f8d5e418,transparent 12%,transparent 88%,#cdecf122)}
.grid:before,.grid:after{content:"✦";position:absolute;color:#f0c965;font-size:13px;opacity:.75;animation:ghostTwinkle 5s ease-in-out infinite}
.grid:before{left:8px;top:9px}.grid:after{right:8px;top:9px;animation-delay:1.7s}

@media(max-width:1450px){.margin-computer,.dream-staircase{opacity:.38}.constellation-left,.constellation-right{opacity:.65}}
@media(max-width:1320px){.margin-computer,.dream-staircase,.constellation{display:none}.ghost-atmosphere{display:none}}
@media(max-width:760px){.planet-dream{width:105px;right:-12px;top:18px}.orbit-a{left:4px}.orbit-b{right:8px}}
@media(prefers-reduced-motion:reduce){.constellation i,.margin-computer,.y2k-orbit{animation:none!important}}


/* VERSION 4.6 — the real Ghost Typewriter enters the masthead */
.typewriter-mark{
  position:relative;
  width:148px;
  margin:-2px auto -4px;
  z-index:5;
  transform:rotate(-1.25deg);
}
.typewriter-mark:before{
  content:"transmission device_01";
  position:absolute;
  left:-70px;
  top:42%;
  color:#9a7eaa;
  font-size:7px;
  letter-spacing:.08em;
  white-space:nowrap;
  opacity:.72;
}
.typewriter-mark:after{
  content:"··········";
  position:absolute;
  right:-55px;
  top:46%;
  color:#f4a6c6;
  font-size:8px;
  letter-spacing:3px;
  opacity:.7;
}
.typewriter-mark img{
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(5px 7px 0 #342B6312);
}
.brand-v4 .eyebrow{margin-bottom:-2px}
.brand-v4 h1{margin-top:-1px}
@media(min-width:1101px){
  .masthead-v4{min-height:420px;grid-template-columns:1.03fr 1.38fr 1.03fr;gap:4px 12px;padding-top:15px}
  .browser-stage{transform:translate(-5px,18px)}
  .browser-window{width:500px}
  .brand-v4{transform:translate(6px,-2px)}
  .writer-stage{transform:translate(0,12px)}
  .writer-ghosts{width:345px;right:-4px}
  .typewriter-mark{width:154px;margin:-1px auto -5px}
}
@media(max-width:1100px) and (min-width:761px){
  .typewriter-mark{width:138px}
  .typewriter-mark:before,.typewriter-mark:after{display:none}
}
@media(max-width:760px){
  .typewriter-mark{width:132px;margin:3px auto -2px}
  .typewriter-mark:before,.typewriter-mark:after{display:none}
  .brand-v4 h1{margin-top:0}
}

/* VERSION 4.8 — THE SIGNAL */
/* The browser is no longer decoration: its screen is a tiny haunted terminal. */
.typewriter-mark{width:170px!important;margin:-2px auto -5px!important}
.typewriter-mark:before,.typewriter-mark:after{display:none!important}
.browser-stage{position:relative}
.signal-terminal{
  position:absolute;
  z-index:4;
  left:16.8%;
  top:34.5%;
  width:67.5%;
  height:37%;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:12px 18px;
  background:rgba(255,249,243,.94);
  border:1px solid rgba(52,43,99,.16);
  color:var(--ink);
  text-align:center;
  font:10px/1.65 "Courier New",monospace;
  letter-spacing:.05em;
  box-shadow:inset 0 0 28px rgba(184,167,232,.12);
}
.signal-terminal:before{
  content:"incoming signal";
  position:absolute;
  top:6px;
  left:9px;
  color:#a58bb8;
  font-size:7px;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.signal-terminal__status{white-space:pre-line;min-height:38px;display:grid;place-items:center}
.signal-cursor{display:inline-block;margin-left:2px;color:#d05c94;animation:signalBlink .8s steps(1,end) infinite}
@keyframes signalBlink{50%{opacity:0}}
.signal-enter{
  appearance:none;
  border:1px solid var(--ink);
  padding:5px 12px;
  background:linear-gradient(90deg,var(--spirit),var(--haze));
  color:var(--ink);
  font:8px "Courier New",monospace;
  letter-spacing:.08em;
  cursor:pointer;
  box-shadow:2px 2px 0 rgba(52,43,99,.15);
}
.signal-enter:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 rgba(52,43,99,.18);background:linear-gradient(90deg,var(--haze),var(--cloud))}
.signal-enter[hidden]{display:none}
.signal-popover{
  position:fixed;
  z-index:9999;
  inset:0;
  display:none;
  place-items:center;
  padding:20px;
  background:rgba(52,43,99,.14);
  backdrop-filter:blur(2px);
}
.signal-popover.is-open{display:grid}
.signal-popover__window{
  width:min(390px,88vw);
  border:1px solid var(--ink);
  background:var(--paper);
  box-shadow:8px 8px 0 rgba(52,43,99,.18);
  font:11px/1.7 "Courier New",monospace;
}
.signal-popover__bar{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;background:linear-gradient(90deg,var(--haze),var(--spirit),var(--cloud));border-bottom:1px solid var(--ink);font-size:8px;letter-spacing:.1em}
.signal-popover__body{padding:28px 26px;text-align:center;color:var(--ink)}
.signal-popover__body strong{display:block;margin-bottom:14px;font-size:12px;letter-spacing:.08em}
.signal-close{margin-top:16px;border:1px solid var(--ink);background:var(--spirit);padding:5px 13px;color:var(--ink);font:8px "Courier New",monospace;cursor:pointer}
@media(max-width:1100px) and (min-width:761px){.typewriter-mark{width:158px!important}.signal-terminal{font-size:9px}}
@media(max-width:760px){.typewriter-mark{width:150px!important}.signal-terminal{left:17%;top:34%;width:67%;height:38%;font-size:8px;gap:6px;padding:8px}.signal-terminal:before{font-size:6px}.signal-enter{font-size:7px;padding:4px 8px}}
@media(prefers-reduced-motion:reduce){.signal-cursor{animation:none}}


/* VERSION 4.8.1 — cache-safe signal patch */
.signal-terminal{left:15.5%;top:31.5%;width:70%;height:43%;background:rgba(255,249,243,.985);border:1px solid rgba(52,43,99,.28);box-shadow:inset 0 0 28px rgba(184,167,232,.18),2px 2px 0 rgba(52,43,99,.08);}
.signal-terminal__status{font-weight:bold;}
.browser-stage .signal-terminal{pointer-events:auto;}


/* VERSION 4.8.2 — Computer Friend™ */
.computer-friend{
  position:absolute;
  left:max(22px,calc(50vw - 790px));
  top:610px;
  width:104px;
  height:110px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  z-index:8;
  overflow:visible;
  animation:artifactFloat 7s ease-in-out infinite;
}
.computer-friend .margin-computer{
  position:static;
  display:block;
  width:92px;
  opacity:.82;
  transform:rotate(-5deg);
  filter:drop-shadow(5px 6px 0 #342B6310);
  animation:none;
  transition:opacity .18s ease,filter .18s ease,transform .18s ease;
}
.computer-friend:hover .margin-computer,
.computer-friend:focus-visible .margin-computer{
  opacity:1;
  transform:rotate(-2deg) translateY(-2px);
  filter:drop-shadow(5px 6px 0 #b8a7e855);
}
.computer-bubble{
  position:absolute;
  left:70px;
  top:-12px;
  min-width:54px;
  max-width:112px;
  padding:6px 8px;
  border:1px solid #7862a5;
  background:#fff9f3f2;
  color:#342b63;
  box-shadow:3px 3px 0 #b8a7e855;
  font:8px/1.35 "Courier New",monospace;
  letter-spacing:.02em;
  white-space:nowrap;
  opacity:0;
  transform:translateY(4px) rotate(-1deg);
  pointer-events:none;
  transition:opacity .16s ease,transform .16s ease;
}
.computer-bubble:after{
  content:"";
  position:absolute;
  left:10px;
  bottom:-6px;
  width:9px;
  height:9px;
  background:#fff9f3;
  border-right:1px solid #7862a5;
  border-bottom:1px solid #7862a5;
  transform:rotate(45deg);
}
.computer-friend:hover .computer-bubble,
.computer-friend:focus-visible .computer-bubble,
.computer-friend.is-speaking .computer-bubble{
  opacity:1;
  transform:translateY(0) rotate(-1deg);
}
@media(max-width:1450px){.computer-friend{opacity:.55}}
@media(max-width:1320px){.computer-friend{display:none}}
@media(prefers-reduced-motion:reduce){.computer-friend{animation:none!important}}

/* VERSION 4.9 — THE FRONT DOOR */
/* VERSION 4.9.1 — The Front Door, dreamier + easier to enter */
.portal-door{
  position:fixed;inset:0;z-index:9999;opacity:1;visibility:visible;
  transition:opacity .65s ease,visibility .65s ease;
}
.portal-door.is-gone{opacity:0;visibility:hidden;pointer-events:none}
.portal-dreamscape{
  position:relative;width:100vw;height:100vh;overflow:auto;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:22px;
  padding:42px 24px 28px;box-sizing:border-box;
  background:
    radial-gradient(circle at 18% 22%,rgba(246,217,120,.34),transparent 22%),
    radial-gradient(circle at 82% 18%,rgba(121,217,220,.30),transparent 26%),
    radial-gradient(circle at 75% 78%,rgba(150,118,211,.26),transparent 29%),
    linear-gradient(145deg,#fff9f3 0%,#f8d5e4 30%,#e7dff5 68%,#cdecf1 100%);
}
.portal-dreamscape:before,.portal-dreamscape:after{
  content:"";position:absolute;inset:0;pointer-events:none;
}
.portal-dreamscape:before{
  background-image:radial-gradient(circle,#fff 0 1px,transparent 1.8px);
  background-size:74px 74px;opacity:.42;animation:portalStars 5s ease-in-out infinite alternate;
}
.portal-dreamscape:after{
  background:linear-gradient(to bottom,rgba(255,255,255,.12),transparent 25%,transparent 75%,rgba(52,43,99,.08));
}
@keyframes portalStars{to{opacity:.72;transform:translateY(-4px)}}
.portal-copy{
  position:relative;z-index:3;text-align:center;color:#342B63;
  font-family:"Courier New",Courier,monospace;text-shadow:0 1px #fff9f3;
}
.portal-copy p{
  margin:0 0 9px;font:10px/1.5 "Courier New",Courier,monospace;
  letter-spacing:.20em;text-transform:lowercase;
}
.portal-copy h1{
  margin:0;font:700 clamp(28px,4.4vw,68px)/1 "Courier New",Courier,monospace;
  letter-spacing:.06em;text-transform:uppercase;
}
.portal-copy span{
  display:block;margin-top:9px;color:#7659b4;
  font:italic 12px/1.5 "Courier New",Courier,monospace;letter-spacing:.07em;
}
.portal-card{
  position:relative;z-index:4;display:block;width:min(1080px,86vw);padding:0;
  border:2px solid #342B63;background:#fff9f3;cursor:pointer;overflow:hidden;
  box-shadow:10px 12px 0 rgba(52,43,99,.13),0 0 0 6px rgba(255,255,255,.32);
  transition:transform .28s ease,box-shadow .28s ease,filter .28s ease;
}
.portal-card:hover,.portal-card:focus-visible{
  transform:translateY(-5px) scale(1.008);outline:none;
  box-shadow:12px 16px 0 rgba(52,43,99,.14),0 0 38px rgba(246,217,120,.48),0 0 72px rgba(150,118,211,.20);
  filter:saturate(1.05) brightness(1.025);
}
.portal-art{
  display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;object-position:center;
}
.portal-card-label{
  position:absolute;right:22px;bottom:18px;padding:8px 12px;
  border:1px dashed #9676D3;background:rgba(255,249,243,.92);color:#342B63;
  font:700 10px/1.2 "Courier New",Courier,monospace;letter-spacing:.09em;
  box-shadow:3px 3px 0 rgba(52,43,99,.14);opacity:.86;transition:transform .25s ease,opacity .25s ease;
}
.portal-card:hover .portal-card-label,.portal-card:focus-visible .portal-card-label{opacity:1;transform:translateY(-3px)}
.portal-hint{
  position:relative;z-index:4;padding:6px 11px;color:#5f4c8f;
  font:9px/1.2 "Courier New",Courier,monospace;letter-spacing:.13em;
  background:rgba(255,249,243,.72);border:1px dotted #B8A7E8;animation:portalHint 2.2s ease-in-out infinite;
}
@keyframes portalHint{50%{opacity:.48}}
.portal-door.is-entering .portal-card{animation:portalZoom .82s ease forwards}
.portal-door.is-entering .portal-copy,.portal-door.is-entering .portal-hint{animation:portalFade .42s ease forwards}
@keyframes portalZoom{to{transform:scale(1.055);filter:saturate(1.08) brightness(1.08);opacity:.15}}
@keyframes portalFade{to{opacity:0}}
@media(max-width:800px){
  .portal-dreamscape{justify-content:flex-start;padding-top:9vh;gap:18px}
  .portal-card{width:min(94vw,760px)}
  .portal-copy h1{font-size:clamp(27px,8vw,44px);letter-spacing:.03em}
  .portal-copy p{font-size:8px;letter-spacing:.12em}
  .portal-copy span{font-size:10px}
  .portal-card-label{right:10px;bottom:10px;font-size:9px}
}

/* Computer Friend must sit above the atmospheric layer and receive clicks. */
.computer-friend{pointer-events:auto!important;z-index:20!important}
.computer-friend .margin-computer{pointer-events:none}

/* VERSION 4.9.2 — DREAM LOGIC: the staircase becomes the threshold */
.portal-dreamscape{gap:10px;padding:24px 24px 18px;overflow:hidden}
.portal-copy{z-index:6;margin-bottom:2px}
.portal-copy p{font-size:9px;letter-spacing:.22em;margin-bottom:5px}
.portal-copy h1{font-size:clamp(30px,3.7vw,58px);letter-spacing:.09em}
.portal-copy span{font-size:11px;margin-top:6px}
.portal-card{
  width:min(980px,74vw);height:min(69vh,690px);border:0;background:transparent;overflow:visible;
  box-shadow:none;display:flex;align-items:center;justify-content:center;
}
.portal-art{
  width:auto;height:100%;max-width:100%;aspect-ratio:auto;object-fit:contain;
  filter:drop-shadow(14px 18px 0 rgba(52,43,99,.10)) drop-shadow(0 0 30px rgba(150,118,211,.18));
  animation:portalBreathe 5.8s ease-in-out infinite;
}
.portal-card:hover,.portal-card:focus-visible{transform:translateY(-8px) scale(1.025);box-shadow:none;filter:none}
.portal-card:hover .portal-art,.portal-card:focus-visible .portal-art{
  filter:drop-shadow(16px 22px 0 rgba(52,43,99,.10)) drop-shadow(0 0 38px rgba(246,217,120,.42)) drop-shadow(0 0 70px rgba(150,118,211,.24));
}
.portal-whisper{
  position:relative;z-index:7;margin-top:-7px;color:#5f4c8f;opacity:0;transform:translateY(-4px);
  font:10px/1.2 "Courier New",Courier,monospace;letter-spacing:.17em;
  transition:opacity .3s ease,transform .3s ease;pointer-events:none;
}
.portal-card:hover + .portal-whisper,.portal-card:focus-visible + .portal-whisper{opacity:.9;transform:translateY(0)}
.portal-floater{position:absolute;z-index:2;pointer-events:none;opacity:.68;filter:drop-shadow(0 8px 14px rgba(52,43,99,.10))}
.portal-moon{width:72px;left:8vw;top:23vh;animation:portalDriftA 8s ease-in-out infinite alternate}
.portal-cloud{width:155px;right:7vw;top:18vh;animation:portalDriftB 10s ease-in-out infinite alternate}
@keyframes portalBreathe{50%{transform:scale(1.012) translateY(-3px)}}
@keyframes portalDriftA{to{transform:translate(16px,-12px) rotate(5deg)}}
@keyframes portalDriftB{to{transform:translate(-20px,10px) rotate(-3deg)}}
.portal-door.is-entering .portal-card{animation:portalZoom492 .82s cubic-bezier(.2,.75,.2,1) forwards}
.portal-door.is-entering .portal-copy,.portal-door.is-entering .portal-whisper,.portal-door.is-entering .portal-floater{animation:portalFade .38s ease forwards}
@keyframes portalZoom492{to{transform:scale(1.22);filter:brightness(1.12);opacity:.08}}

/* The same impossible staircase lingers inside Ghost Typewriter like an echo of the way in. */
.dream-staircase{display:none!important}
.portal-echo{
  position:absolute;right:max(-38px,calc(50vw - 835px));top:570px;width:210px;height:250px;
  opacity:.34;overflow:hidden;filter:drop-shadow(4px 8px 0 rgba(52,43,99,.05));
  transform:rotate(1.2deg);transition:opacity .35s ease,transform .35s ease;
}
.portal-echo img{width:310px;height:245px;object-fit:cover;object-position:48% 54%;mix-blend-mode:multiply;animation:echoBreathe 7s ease-in-out infinite}
.portal-echo small{position:absolute;right:34px;bottom:5px;color:#8c73a8;font:7px/1.2 "Courier New",monospace;letter-spacing:.08em;white-space:nowrap;opacity:.75}
.portal-echo:hover{opacity:.52;transform:rotate(0deg) translateY(-4px)}
@keyframes echoBreathe{50%{transform:scale(1.025) translateY(-3px)}}
@media(max-width:1450px){.portal-echo{opacity:.22;right:8px;width:160px}.portal-echo img{width:245px}}
@media(max-width:1320px){.portal-echo{display:none}}
@media(max-width:800px){
  .portal-dreamscape{justify-content:center;padding:22px 10px;gap:8px;overflow:auto}
  .portal-card{width:96vw;height:min(62vh,600px)}
  .portal-copy h1{font-size:clamp(25px,7vw,42px)}
  .portal-moon{width:48px;left:3vw;top:20vh}.portal-cloud{width:95px;right:2vw;top:16vh}
  .portal-whisper{font-size:9px;margin-top:-2px}
}
@media(prefers-reduced-motion:reduce){.portal-art,.portal-floater,.portal-echo img{animation:none!important}}

/* VERSION 4.9.3 — FALL THROUGH THE DREAM */
.portal-dreamscape{
  gap:0;padding:14px 18px 10px;
  background:
    radial-gradient(circle at 50% 54%,rgba(255,249,243,.98) 0 12%,rgba(248,213,228,.72) 29%,transparent 54%),
    radial-gradient(circle at 12% 82%,rgba(121,217,220,.30),transparent 36%),
    radial-gradient(circle at 88% 22%,rgba(184,167,232,.38),transparent 38%),
    linear-gradient(145deg,#fff9f3 0%,#f8d5e4 31%,#e7dff5 66%,#cdecf1 100%);
}
.portal-copy{position:absolute;top:3.2vh;left:50%;transform:translateX(-50%);width:min(94vw,1100px);z-index:12;text-shadow:0 1px #fff9f3}
.portal-copy p{font-size:9px;letter-spacing:.25em;margin:0 0 5px}
.portal-copy h1{font-size:clamp(34px,4.1vw,68px);letter-spacing:.10em;margin:0}
.portal-copy span{font-size:11px;margin-top:4px}
.portal-card{
  position:relative;z-index:8;width:min(1180px,91vw);height:88vh;max-height:none;margin-top:7vh;
  border:0;background:transparent;overflow:visible;box-shadow:none;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.portal-art{
  width:auto;height:100%;max-width:100%;object-fit:contain;
  filter:drop-shadow(20px 26px 0 rgba(52,43,99,.09)) drop-shadow(0 0 42px rgba(150,118,211,.22));
  animation:portalBreathe493 5.5s ease-in-out infinite;transform-origin:50% 58%;
}
@keyframes portalBreathe493{50%{transform:scale(1.018) translateY(-5px)}}
.portal-card:hover,.portal-card:focus-visible{transform:scale(1.018);outline:none}
.portal-card:hover .portal-art,.portal-card:focus-visible .portal-art{filter:drop-shadow(22px 30px 0 rgba(52,43,99,.08)) drop-shadow(0 0 55px rgba(246,217,120,.48)) drop-shadow(0 0 105px rgba(150,118,211,.30));}
.portal-whisper{position:absolute;z-index:13;left:50%;bottom:2.8vh;transform:translate(-50%,8px);margin:0;font-size:11px;letter-spacing:.20em;opacity:0;text-shadow:0 1px #fff9f3;transition:opacity .32s ease,transform .32s ease}
.portal-card:hover + .portal-whisper,.portal-card:focus-visible + .portal-whisper{opacity:.95;transform:translate(-50%,0)}

/* Different depths = dream-space, not a flat splash page. */
.portal-depth{position:absolute;z-index:10;pointer-events:none;border-radius:50%;filter:blur(18px);opacity:.58;background:radial-gradient(ellipse at center,#fffdfb 0 42%,#f8d5e4 56%,rgba(231,223,245,.2) 73%,transparent 74%)}
.portal-depth--left{width:44vw;height:31vw;left:-18vw;bottom:-9vw;transform:rotate(13deg);animation:depthFloatA 10s ease-in-out infinite alternate}
.portal-depth--right{width:36vw;height:25vw;right:-15vw;top:29vh;transform:rotate(-12deg);opacity:.40;animation:depthFloatB 12s ease-in-out infinite alternate}
@keyframes depthFloatA{to{transform:translate(22px,-13px) rotate(16deg)}}
@keyframes depthFloatB{to{transform:translate(-18px,15px) rotate(-9deg)}}
.portal-moon{z-index:3;width:58px;left:11vw;top:17vh;opacity:.48;filter:blur(.2px) drop-shadow(0 0 18px rgba(246,217,120,.35));animation:portalDriftA 11s ease-in-out infinite alternate}
.portal-cloud{z-index:4;width:105px;right:13vw;top:15vh;opacity:.38;filter:blur(.4px);animation:portalDriftB 13s ease-in-out infinite alternate}
.portal-upstars{position:absolute;inset:0;z-index:5;pointer-events:none;color:#9676d3}
.portal-upstars i{position:absolute;font-style:normal;opacity:0;animation:floatUp 7s linear infinite}
.portal-upstars i:nth-child(1){left:20%;bottom:7%;animation-delay:-1s}.portal-upstars i:nth-child(2){left:77%;bottom:16%;animation-delay:-4.4s;color:#79d9dc}.portal-upstars i:nth-child(3){left:14%;bottom:38%;animation-delay:-5.8s;color:#f6d978}.portal-upstars i:nth-child(4){left:86%;bottom:5%;animation-delay:-2.6s}.portal-upstars i:nth-child(5){left:68%;bottom:30%;animation-delay:-6.5s;color:#f4a6c6}
@keyframes floatUp{0%{transform:translateY(30px) rotate(0);opacity:0}18%{opacity:.55}72%{opacity:.34}100%{transform:translateY(-220px) rotate(35deg);opacity:0}}

/* The click becomes a short fall through color before the room appears. */
.portal-flash{position:absolute;inset:-10%;z-index:30;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 52%,#fff9f3 0 8%,#f6d978 18%,#f4a6c6 38%,#b8a7e8 63%,#79d9dc 100%);transform:scale(.15);border-radius:50%}
.portal-door.is-entering .portal-card{animation:portalRush493 1.02s cubic-bezier(.16,.76,.18,1) forwards}
.portal-door.is-entering .portal-copy,.portal-door.is-entering .portal-whisper,.portal-door.is-entering .portal-floater,.portal-door.is-entering .portal-upstars,.portal-door.is-entering .portal-depth{animation:portalFade493 .35s ease forwards}
.portal-door.is-entering .portal-flash{animation:portalFlash493 .92s cubic-bezier(.2,.72,.2,1) .16s forwards}
@keyframes portalRush493{0%{transform:scale(1);opacity:1}58%{transform:scale(1.72);opacity:1;filter:brightness(1.08) saturate(1.08)}100%{transform:scale(2.65);opacity:0;filter:brightness(1.35) blur(3px)}}
@keyframes portalFlash493{0%{opacity:0;transform:scale(.12)}42%{opacity:.94;transform:scale(1.5)}78%{opacity:1;transform:scale(3.4)}100%{opacity:0;transform:scale(4.4)}}
@keyframes portalFade493{to{opacity:0}}

/* Inside: the way back looks like a half-healed tear in the page. */
.portal-echo{right:max(-74px,calc(50vw - 870px));top:555px;width:245px;height:290px;opacity:.29;overflow:visible;filter:drop-shadow(0 0 24px rgba(150,118,211,.18));transform:rotate(1deg)}
.portal-echo:before{content:"";position:absolute;inset:13px -12px 20px 22px;z-index:-1;border-radius:48% 52% 44% 56% / 58% 41% 59% 42%;background:radial-gradient(ellipse,#fff9f3 0 26%,rgba(248,213,228,.64) 43%,rgba(184,167,232,.34) 62%,transparent 73%);filter:blur(11px);animation:echoGlow 6s ease-in-out infinite}
.portal-echo img{width:345px;height:280px;object-fit:cover;object-position:48% 54%;mix-blend-mode:multiply;clip-path:polygon(13% 5%,89% 1%,100% 22%,94% 91%,73% 100%,7% 91%,0 63%,5% 18%);animation:echoBreathe 7s ease-in-out infinite}
.portal-echo small{right:42px;bottom:2px;opacity:.58}
@keyframes echoGlow{50%{transform:scale(1.06);opacity:.7}}
@media(max-width:1450px){.portal-echo{right:-42px;width:185px;opacity:.20}.portal-echo img{width:275px}}
@media(max-width:800px){.portal-copy{top:4vh}.portal-copy h1{font-size:clamp(26px,8vw,43px)}.portal-copy p{font-size:7px}.portal-copy span{font-size:9px}.portal-card{width:108vw;height:80vh;margin-top:10vh}.portal-whisper{bottom:3vh}.portal-depth--left{width:80vw;height:55vw;left:-35vw}.portal-depth--right{width:70vw;height:48vw;right:-35vw}.portal-moon{left:4vw}.portal-cloud{right:3vw}}
@media(prefers-reduced-motion:reduce){.portal-depth,.portal-upstars i,.portal-flash{animation:none!important}.portal-door.is-entering .portal-card{animation:portalFade493 .25s ease forwards!important}}


/* VERSION 4.9.5 — STANDING AT THE FOOT OF THE STAIRS */
.portal-dreamscape{
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 44%,rgba(255,249,243,.92) 0 8%,rgba(246,217,120,.24) 19%,transparent 35%),
    radial-gradient(circle at 14% 20%,rgba(248,213,228,.70),transparent 30%),
    radial-gradient(circle at 86% 22%,rgba(121,217,220,.34),transparent 30%),
    linear-gradient(155deg,#fff9f3 0%,#f8d5e4 28%,#e7dff5 64%,#cdecf1 100%);
}
.portal-copy{
  position:absolute;z-index:20;top:4.5vh;left:50%;transform:translateX(-50%);
  width:min(900px,90vw);margin:0;text-align:center;
}
.portal-copy p{font-size:8px;letter-spacing:.28em;margin:0 0 5px;opacity:.72}
.portal-copy h1{font-size:clamp(25px,3.1vw,48px);letter-spacing:.13em;margin:0}
.portal-copy span{font-size:10px;margin-top:5px;opacity:.78}

.portal-card.portal-open{
  position:absolute;z-index:9;left:50%;bottom:-17vh;transform:translateX(-50%);
  width:min(930px,72vw);height:96vh;margin:0;border:0;background:transparent;
  overflow:visible;box-shadow:none;display:flex;align-items:flex-end;justify-content:center;
}
.portal-card.portal-open .portal-art{
  width:auto;height:100%;max-width:none;object-fit:contain;position:relative;z-index:6;
  filter:drop-shadow(0 24px 0 rgba(52,43,99,.055)) drop-shadow(0 0 50px rgba(246,217,120,.30));
  animation:portalBreathe495 5.8s ease-in-out infinite;transform-origin:50% 74%;
}
@keyframes portalBreathe495{50%{transform:scale(1.018) translateY(-6px)}}
.portal-aura{
  position:absolute;z-index:1;left:50%;top:46%;width:52%;height:61%;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(ellipse,#fffdfb 0 13%,rgba(246,217,120,.62) 25%,rgba(244,166,198,.32) 43%,rgba(184,167,232,.25) 60%,rgba(121,217,220,.08) 72%,transparent 77%);
  filter:blur(25px);animation:auraDream495 5.8s ease-in-out infinite;
}
@keyframes auraDream495{50%{transform:translate(-50%,-52%) scale(1.10);opacity:.78}}
.portal-card.portal-open:hover,.portal-card.portal-open:focus-visible{
  transform:translateX(-50%) translateY(-7px) scale(1.018);outline:none;
}
.portal-card.portal-open:hover .portal-art,.portal-card.portal-open:focus-visible .portal-art{
  filter:drop-shadow(0 30px 0 rgba(52,43,99,.05)) drop-shadow(0 0 70px rgba(246,217,120,.58)) drop-shadow(0 0 125px rgba(184,167,232,.34));
}
.portal-whisper{
  position:absolute;z-index:24;left:50%;bottom:3.2vh;transform:translate(-50%,8px);
  margin:0;font-size:10px;letter-spacing:.22em;opacity:0;pointer-events:none;
  text-shadow:0 1px #fff9f3;transition:opacity .3s ease,transform .3s ease;
}
.portal-card:hover + .portal-smiley + .portal-foreground + .portal-foreground + .portal-whisper{opacity:.95}
.portal-card:focus-visible ~ .portal-whisper{opacity:.95;transform:translate(-50%,0)}
.portal-card:hover ~ .portal-whisper{opacity:.95;transform:translate(-50%,0)}

/* Dream depth: some things are miles away; others are practically touching the viewer. */
.portal-moon{z-index:2;width:46px;left:10vw;top:19vh;opacity:.38;filter:blur(.4px);animation:portalDriftA 12s ease-in-out infinite alternate}
.portal-cloud{z-index:3;width:92px;right:11vw;top:17vh;opacity:.31;filter:blur(.8px);animation:portalDriftB 14s ease-in-out infinite alternate}
.portal-smiley{z-index:4;right:7vw;bottom:22vh;opacity:.30}
.portal-depth--left{width:48vw;height:31vw;left:-22vw;bottom:-8vw;opacity:.30;filter:blur(28px)}
.portal-depth--right{width:38vw;height:27vw;right:-17vw;top:31vh;opacity:.25;filter:blur(30px)}

.portal-foreground{
  position:absolute;z-index:14;pointer-events:none;
  background:radial-gradient(ellipse at 50% 48%,rgba(255,255,255,.97) 0 45%,rgba(248,213,228,.86) 58%,rgba(231,223,245,.45) 72%,transparent 74%);
  filter:blur(10px);opacity:.92;
}
.portal-foreground--left{
  width:62vw;height:27vw;left:-20vw;bottom:-10vw;transform:rotate(8deg);
  animation:foregroundFloatA 12s ease-in-out infinite alternate;
}
.portal-foreground--right{
  width:48vw;height:22vw;right:-19vw;bottom:-5vw;transform:rotate(-8deg);opacity:.72;
  animation:foregroundFloatB 14s ease-in-out infinite alternate;
}
@keyframes foregroundFloatA{to{transform:translate(25px,-12px) rotate(10deg)}}
@keyframes foregroundFloatB{to{transform:translate(-18px,-8px) rotate(-5deg)}}

/* A few close/distant particles violate gravity. */
.portal-upstars i:nth-child(1){font-size:28px;filter:blur(1px)}
.portal-upstars i:nth-child(2){font-size:9px}
.portal-upstars i:nth-child(3){font-size:17px;filter:blur(.4px)}
.portal-upstars i:nth-child(4){font-size:7px}
.portal-upstars i:nth-child(5){font-size:22px;filter:blur(.8px)}

/* Falling through the open staircase. */
.portal-door.is-entering .portal-card.portal-open{
  animation:portalRush495 1.02s cubic-bezier(.16,.76,.18,1) forwards;
}
.portal-door.is-entering .portal-copy,
.portal-door.is-entering .portal-whisper,
.portal-door.is-entering .portal-floater,
.portal-door.is-entering .portal-upstars,
.portal-door.is-entering .portal-depth,
.portal-door.is-entering .portal-foreground,
.portal-door.is-entering .portal-smiley{animation:portalFade493 .30s ease forwards}
@keyframes portalRush495{
  0%{transform:translateX(-50%) scale(1);opacity:1}
  52%{transform:translateX(-50%) scale(1.62);opacity:1;filter:brightness(1.08) saturate(1.1)}
  100%{transform:translateX(-50%) scale(3.35);opacity:0;filter:brightness(1.48) blur(4px)}
}

/* Inside: same doorway, half-healed at the edge of the page. */
.dream-staircase{display:none!important}
.portal-echo{
  position:absolute;right:max(-86px,calc(50vw - 875px));top:555px;width:245px;height:290px;
  opacity:.22;overflow:visible;filter:drop-shadow(0 0 30px rgba(150,118,211,.24));
  transform:rotate(1deg);animation:echoUnstable495 9s ease-in-out infinite;
}
.portal-echo:before{
  content:"";position:absolute;inset:12px -18px 18px 20px;z-index:-1;border-radius:50%;
  background:radial-gradient(ellipse,#fff9f3 0 22%,rgba(248,213,228,.64) 42%,rgba(184,167,232,.34) 61%,transparent 74%);
  filter:blur(15px);animation:echoGlow 6s ease-in-out infinite;
}
.portal-echo img{
  width:345px;height:280px;object-fit:cover;object-position:48% 54%;mix-blend-mode:multiply;
  clip-path:polygon(13% 5%,89% 1%,100% 22%,94% 91%,73% 100%,7% 91%,0 63%,5% 18%);
  animation:echoBreathe 7s ease-in-out infinite;
}
.portal-echo small{position:absolute;right:42px;bottom:2px;color:#8c73a8;font:7px/1.2 "Courier New",monospace;letter-spacing:.08em;white-space:nowrap;opacity:.58}
@keyframes echoUnstable495{0%,100%{opacity:.14;transform:rotate(1deg)}38%{opacity:.31;transform:rotate(.2deg) translateY(-3px)}70%{opacity:.19}82%{opacity:.34;transform:rotate(1.2deg) translateY(2px)}}

@media(max-width:800px){
  .portal-copy{top:5vh}.portal-copy h1{font-size:clamp(23px,7vw,38px)}
  .portal-card.portal-open{width:105vw;height:88vh;bottom:-15vh}
  .portal-foreground--left{width:95vw;height:43vw;left:-40vw}
  .portal-foreground--right{width:82vw;height:37vw;right:-38vw}
}
@media(prefers-reduced-motion:reduce){
  .portal-card.portal-open .portal-art,.portal-aura,.portal-foreground,.portal-echo{animation:none!important}
}


/* VERSION 4.9.7 — CLEAR PATH
   The staircase is the sharp destination. Dream depth stays at the edges. */

/* Mystery Paper has been formally evicted. */
.portal-paper,
.portal-door img[src*="my-wishes"],
.portal-door img[src*="document"],
.portal-door .portal-file{
  display:none !important;
}

/* Pull the portal back and restore a readable bottom-to-top journey. */
.portal-card.portal-open{
  width:min(720px,58vw);
  height:79vh;
  bottom:-8vh;
  left:50%;
}
.portal-card.portal-open .portal-art{
  height:100%;
  width:auto;
  max-width:100%;
  object-fit:contain;
  object-position:center bottom;
  filter:
    drop-shadow(0 18px 0 rgba(52,43,99,.035))
    drop-shadow(0 0 42px rgba(246,217,120,.26));
}

/* Give the destination marker air above the doorway. */
.portal-copy{
  top:4vh;
}
.portal-copy h1{
  font-size:clamp(24px,2.8vw,44px);
}
.portal-copy span{
  margin-top:7px;
}

/* No more giant white fog banks obscuring the stairs. */
.portal-foreground{
  opacity:.16;
  filter:blur(32px);
  background:radial-gradient(
    ellipse at center,
    rgba(248,213,228,.52) 0 30%,
    rgba(231,223,245,.34) 48%,
    rgba(121,217,220,.16) 62%,
    transparent 74%
  );
}
.portal-foreground--left{
  width:42vw;height:20vw;left:-21vw;bottom:-7vw;
}
.portal-foreground--right{
  width:36vw;height:18vw;right:-19vw;bottom:-6vw;
}

/* Edge atmosphere rather than objects shoved in front of the visitor. */
.portal-depth--left{
  width:42vw;height:28vw;left:-24vw;bottom:3vh;
  opacity:.18;filter:blur(40px);
}
.portal-depth--right{
  width:38vw;height:28vw;right:-23vw;top:28vh;
  opacity:.17;filter:blur(42px);
}

/* Distant things should stay distant. */
.portal-moon{
  width:34px;left:10vw;top:21vh;opacity:.24;filter:blur(.7px);
}
.portal-cloud{
  width:72px;right:10vw;top:18vh;opacity:.23;filter:blur(1px);
}
.portal-smiley{
  right:7vw;bottom:24vh;opacity:.20;transform:scale(.82);
}

/* The staircase is crisp and saturated compared with the surrounding dream. */
.portal-card.portal-open .portal-art{
  opacity:1;
  filter:
    saturate(1.06)
    contrast(1.015)
    drop-shadow(0 0 38px rgba(246,217,120,.28))
    drop-shadow(0 16px 26px rgba(150,118,211,.08));
}
.portal-card.portal-open:hover .portal-art,
.portal-card.portal-open:focus-visible .portal-art{
  filter:
    saturate(1.10)
    contrast(1.02)
    drop-shadow(0 0 58px rgba(246,217,120,.50))
    drop-shadow(0 0 92px rgba(184,167,232,.25));
}

/* Whisper remains text, not a CTA box. */
.portal-whisper{
  bottom:2.4vh;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
}

/* Prevent a blank-page flash while the portal assets initialize. */
html{
  background:#f8d5e4;
}
body{
  background-color:#fff9f3;
}
.portal-door{
  background:
    radial-gradient(circle at 50% 44%,rgba(255,249,243,.92) 0 8%,rgba(246,217,120,.24) 19%,transparent 35%),
    radial-gradient(circle at 14% 20%,rgba(248,213,228,.70),transparent 30%),
    radial-gradient(circle at 86% 22%,rgba(121,217,220,.34),transparent 30%),
    linear-gradient(155deg,#fff9f3 0%,#f8d5e4 28%,#e7dff5 64%,#cdecf1 100%);
}

/* Keep the rush-through transition, recalibrated for the smaller starting portal. */
.portal-door.is-entering .portal-card.portal-open{
  animation:portalRush497 1.02s cubic-bezier(.16,.76,.18,1) forwards;
}
@keyframes portalRush497{
  0%{transform:translateX(-50%) scale(1);opacity:1}
  48%{transform:translateX(-50%) scale(1.78);opacity:1;filter:brightness(1.08) saturate(1.1)}
  100%{transform:translateX(-50%) scale(3.8);opacity:0;filter:brightness(1.5) blur(4px)}
}

@media(max-width:800px){
  .portal-card.portal-open{
    width:min(620px,88vw);
    height:74vh;
    bottom:-5vh;
  }
}


/* VERSION 4.9.8 — CLEAN DREAM
   Reset the entrance after the experimental depth passes. */
.portal-door{
  position:fixed;
  inset:0;
  z-index:9999;
  background:#f8d5e4;
  overflow:hidden;
}
.portal-dreamscape{
  position:relative;
  width:100vw;
  height:100vh;
  min-height:620px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 46%,rgba(246,217,120,.32) 0 8%,rgba(255,249,243,.40) 19%,transparent 35%),
    radial-gradient(circle at 15% 30%,rgba(244,166,198,.40),transparent 31%),
    radial-gradient(circle at 87% 25%,rgba(121,217,220,.28),transparent 30%),
    linear-gradient(145deg,#fff9f3 0%,#f8d5e4 31%,#e7dff5 67%,#cdecf1 100%);
}

/* Hard reset: only the three intentional images may exist in the entrance. */
.portal-door img{display:none!important}
.portal-door img.portal-art,
.portal-door img.portal-moon,
.portal-door img.portal-cloud{display:block!important}
.portal-depth,.portal-foreground,.portal-smiley,.portal-dream-cursor,.portal-paper,.portal-file{
  display:none!important;
}

.portal-copy{
  position:absolute;
  z-index:20;
  top:4.2vh;
  left:50%;
  transform:translateX(-50%);
  width:min(900px,92vw);
  text-align:center;
  color:#342B63;
  font-family:"Courier New",Courier,monospace;
}
.portal-copy p{
  margin:0 0 6px;
  font-size:8px;
  letter-spacing:.28em;
  opacity:.65;
}
.portal-copy h1{
  margin:0;
  font-family:"Courier New",Courier,monospace;
  font-size:clamp(27px,3.2vw,50px);
  font-weight:700;
  letter-spacing:.12em;
  line-height:1;
}
.portal-copy span{
  display:block;
  margin-top:8px;
  font:9px/1.4 "Courier New",Courier,monospace;
  letter-spacing:.11em;
  opacity:.68;
}

.portal-card.portal-open{
  position:absolute;
  z-index:10;
  left:50%;
  bottom:-4.5vh;
  width:min(660px,50vw);
  height:75vh;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
  transform:translateX(-50%);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  cursor:pointer;
}
.portal-card.portal-open .portal-art{
  width:auto;
  height:100%;
  max-width:100%;
  object-fit:contain;
  object-position:center bottom;
  opacity:1;
  filter:
    saturate(1.05)
    drop-shadow(0 0 34px rgba(246,217,120,.30))
    drop-shadow(0 18px 28px rgba(150,118,211,.10));
  transform-origin:50% 72%;
  animation:cleanPortalBreathe 6s ease-in-out infinite;
}
@keyframes cleanPortalBreathe{
  50%{transform:translateY(-5px) scale(1.012)}
}
.portal-aura{
  position:absolute;
  z-index:-1;
  left:50%;
  top:44%;
  width:62%;
  height:62%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,249,243,.94) 0 12%,rgba(246,217,120,.48) 28%,rgba(184,167,232,.20) 53%,transparent 73%);
  filter:blur(28px);
}
.portal-card.portal-open:hover,
.portal-card.portal-open:focus-visible{
  transform:translateX(-50%) translateY(-5px) scale(1.02);
  outline:none;
}
.portal-card.portal-open:hover .portal-art,
.portal-card.portal-open:focus-visible .portal-art{
  filter:
    saturate(1.10)
    drop-shadow(0 0 52px rgba(246,217,120,.48))
    drop-shadow(0 0 82px rgba(184,167,232,.24));
}

.portal-moon{
  position:absolute;
  z-index:3;
  width:38px;
  left:10vw;
  top:23vh;
  opacity:.24;
  filter:blur(.6px);
  animation:portalDriftA 12s ease-in-out infinite alternate;
}
.portal-cloud{
  position:absolute;
  z-index:3;
  width:78px;
  right:10vw;
  top:20vh;
  opacity:.22;
  filter:blur(.9px);
  animation:portalDriftB 14s ease-in-out infinite alternate;
}
.portal-upstars{z-index:2;opacity:.55}

.portal-whisper{
  position:absolute;
  z-index:21;
  left:50%;
  bottom:2.4vh;
  transform:translate(-50%,7px);
  color:#342B63;
  font:9px/1.2 "Courier New",Courier,monospace;
  letter-spacing:.20em;
  opacity:0;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
  transition:opacity .28s ease,transform .28s ease;
  pointer-events:none;
}
.portal-card:hover ~ .portal-whisper,
.portal-card:focus-visible ~ .portal-whisper{
  opacity:.82;
  transform:translate(-50%,0);
}

/* Keep the fall-through, but from a composition where the whole stair path is readable. */
.portal-door.is-entering .portal-card.portal-open{
  animation:portalRush498 1.02s cubic-bezier(.16,.76,.18,1) forwards;
}
.portal-door.is-entering .portal-copy,
.portal-door.is-entering .portal-whisper,
.portal-door.is-entering .portal-floater,
.portal-door.is-entering .portal-upstars{
  animation:portalFade493 .30s ease forwards;
}
@keyframes portalRush498{
  0%{transform:translateX(-50%) scale(1);opacity:1}
  50%{transform:translateX(-50%) scale(1.72);opacity:1;filter:brightness(1.08)}
  100%{transform:translateX(-50%) scale(3.65);opacity:0;filter:brightness(1.5) blur(4px)}
}

@media(max-width:900px){
  .portal-card.portal-open{width:min(640px,76vw);height:72vh;bottom:-3vh}
  .portal-copy h1{font-size:clamp(24px,6vw,42px)}
}
@media(max-width:600px){
  .portal-card.portal-open{width:92vw;height:68vh}
  .portal-moon{left:5vw}
  .portal-cloud{right:4vw}
}
@media(prefers-reduced-motion:reduce){
  .portal-card.portal-open .portal-art,.portal-moon,.portal-cloud{animation:none!important}
}

/* VERSION 4.9.9 — THE WHISPER */
.portal-whisper{
  left:50%;
  bottom:6.5vh;
  transform:translate(-50%,10px);
  color:#342B63;
  font:700 12px/1.2 "Courier New",Courier,monospace;
  letter-spacing:.18em;
  opacity:0;
  text-shadow:
    0 0 7px rgba(255,249,243,.98),
    0 0 14px rgba(255,249,243,.92),
    0 0 24px rgba(184,167,232,.62);
  transition:opacity .32s ease,transform .32s ease,letter-spacing .32s ease;
}
.portal-card:hover ~ .portal-whisper,
.portal-card:focus-visible ~ .portal-whisper{
  opacity:.96;
  transform:translate(-50%,0);
  letter-spacing:.21em;
}
@media(max-width:900px){
  .portal-whisper{bottom:7.5vh;font-size:11px}
}


/* VERSION 4.10.0 — THE PORTAL WHISPERS
   Final front-door polish: the invitation lives at the destination. */
.portal-whisper{
  left:50%;
  bottom:auto;
  top:38%;
  z-index:22;
  transform:translate(-50%,-50%) scale(.96);
  width:max-content;
  max-width:180px;
  padding:0;
  color:#342B63;
  font:700 10px/1.2 "Courier New",Courier,monospace;
  letter-spacing:.13em;
  text-align:center;
  opacity:0;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
  text-shadow:
    0 0 5px rgba(255,249,243,.98),
    0 0 10px rgba(255,249,243,.94),
    0 0 17px rgba(246,217,120,.68);
  transition:opacity .25s ease,transform .32s ease,letter-spacing .35s ease;
  pointer-events:none;
}
.portal-card:hover ~ .portal-whisper,
.portal-card:focus-visible ~ .portal-whisper{
  opacity:.92;
  transform:translate(-50%,-50%) scale(1);
  letter-spacing:.17em;
  animation:portalWhisperFlicker 2.8s ease-in-out infinite;
}
@keyframes portalWhisperFlicker{
  0%,100%{opacity:.92}
  47%{opacity:.92}
  49%{opacity:.68}
  51%{opacity:.94}
  73%{opacity:.94}
  74%{opacity:.78}
  76%{opacity:.92}
}

/* The destination answers when noticed. */
.portal-card.portal-open:hover .portal-aura,
.portal-card.portal-open:focus-visible .portal-aura{
  transform:translate(-50%,-50%) scale(1.09);
  filter:blur(25px);
  background:radial-gradient(
    ellipse,
    rgba(255,249,243,.99) 0 11%,
    rgba(246,217,120,.68) 27%,
    rgba(244,166,198,.25) 44%,
    rgba(184,167,232,.22) 57%,
    transparent 74%
  );
}
.portal-aura{
  transition:transform .45s ease,filter .45s ease,background .45s ease;
}

@media(max-width:900px){
  .portal-whisper{top:39%;font-size:9px}
}


/* =========================================================
   CABINET OF CURIOSITIES — ROOM V1
   physical filing cabinet infected by an old computer
   ========================================================= */
.cabinet-room{
  position:relative;
  z-index:2;
  width:min(1120px,calc(100% - 32px));
  margin:42px auto 90px;
  color:#342B63;
  font-family:"Courier New",Courier,monospace;
}
.cabinet-path{
  width:max-content;
  max-width:100%;
  margin:0 auto 13px;
  padding:6px 12px;
  border:1px dashed rgba(52,43,99,.32);
  background:rgba(255,249,243,.72);
  font-size:11px;
  letter-spacing:.08em;
  transform:rotate(-.35deg);
}
.cabinet-heading{
  position:relative;
  width:min(720px,100%);
  margin:0 auto 24px;
  padding:27px 30px 23px;
  text-align:center;
  border:2px solid #342B63;
  background:rgba(255,249,243,.91);
  box-shadow:8px 8px 0 rgba(150,118,211,.18);
  transform:rotate(.18deg);
}
.cabinet-window-dots{position:absolute;top:8px;left:10px;display:flex;gap:5px}
.cabinet-window-dots i{width:7px;height:7px;border:1px solid #342B63;border-radius:50%;background:#F8D5E4}
.cabinet-window-dots i:nth-child(2){background:#F6D978}
.cabinet-window-dots i:nth-child(3){background:#79D9DC}
.cabinet-kicker{margin:0 0 8px;font-size:10px;letter-spacing:.18em;opacity:.65}
.cabinet-heading h1{margin:0;font-size:clamp(27px,5vw,50px);line-height:.95;letter-spacing:.03em}
.cabinet-subtitle{margin:13px 0 0;font-family:Georgia,serif;font-style:italic;font-size:16px;color:#9676D3}

.cabinet-scene{
  position:relative;
  min-height:720px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:50px;
  overflow:visible;
}
.cabinet-shell{
  position:relative;
  z-index:5;
  width:min(480px,78vw);
  padding:18px 18px 25px;
  border:3px solid #342B63;
  border-radius:11px 11px 7px 7px;
  background:linear-gradient(135deg,#B8A7E8 0%,#C8B8EF 48%,#A993E1 100%);
  box-shadow:
    15px 17px 0 rgba(52,43,99,.14),
    inset 8px 0 rgba(255,255,255,.16),
    inset -9px 0 rgba(52,43,99,.08);
  transform:perspective(900px) rotateY(-1.1deg) rotateZ(.25deg);
}
.cabinet-top{
  display:flex;justify-content:space-between;align-items:center;
  height:31px;padding:0 8px;margin-bottom:9px;
  border:2px solid #342B63;border-radius:5px;
  background:#E7DFF5;font-size:9px;letter-spacing:.13em;
}
.cabinet-status-light{
  width:8px;height:8px;border:1px solid #342B63;border-radius:50%;
  background:#79D9DC;box-shadow:0 0 9px rgba(121,217,220,.9);
  animation:cabinetBlink 3.7s steps(1) infinite;
}
@keyframes cabinetBlink{0%,89%,100%{opacity:1}90%,94%{opacity:.2}}

.cabinet-drawer{
  position:relative;display:block;width:100%;height:88px;margin:0 0 8px;padding:0;
  border:2px solid #342B63;border-radius:4px;
  background:linear-gradient(#D3C7F2,#BDAAE9);
  box-shadow:inset 0 7px rgba(255,255,255,.22),0 3px 0 rgba(52,43,99,.16);
  color:#342B63;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
  transform:translateX(0);
}
.cabinet-drawer:hover,.cabinet-drawer:focus-visible{
  transform:translateX(11px);
  box-shadow:inset 0 7px rgba(255,255,255,.25),-9px 4px 0 rgba(52,43,99,.12);
  filter:brightness(1.025);
  outline:none;
}
.cabinet-drawer-ajar{transform:translateX(7px)}
.cabinet-drawer-ajar:hover,.cabinet-drawer-ajar:focus-visible{transform:translateX(16px)}
.drawer-handle{
  position:absolute;left:50%;top:13px;transform:translateX(-50%);
  width:98px;height:14px;border:2px solid #342B63;border-radius:3px;
  background:#9676D3;box-shadow:inset 0 -4px rgba(52,43,99,.16);
}
.drawer-label{
  position:absolute;left:50%;top:39px;transform:translateX(-50%);
  min-width:190px;padding:7px 13px 6px;
  border:1.5px solid #342B63;background:#FFF9F3;
  font:700 10px/1 "Courier New",monospace;letter-spacing:.1em;
  box-shadow:2px 2px 0 rgba(52,43,99,.11);
}
.drawer-file-tab{position:absolute;right:21px;top:42px;font-size:20px;filter:saturate(.7)}
.drawer-paper{
  position:absolute;right:18px;top:-13px;width:46px;height:41px;padding-top:9px;
  border:1px solid #342B63;background:#FFF9F3;font:700 10px/1 monospace;
  transform:rotate(5deg);z-index:-1;
}
.drawer-stars{
  position:absolute;left:22px;bottom:6px;color:#F6D978;
  text-shadow:0 0 6px rgba(246,217,120,.8);font-size:14px;
}
.drawer-ghost-eyes{position:absolute;left:28px;bottom:-7px;width:42px;height:15px;background:#342B63;border-radius:20px 20px 0 0;opacity:.9}
.drawer-ghost-eyes i{position:absolute;top:4px;width:5px;height:5px;border-radius:50%;background:#FFF9F3}
.drawer-ghost-eyes i:first-child{left:12px}.drawer-ghost-eyes i:last-child{right:12px}
.drawer-lock{position:absolute;right:17px;top:49px;font-size:8px;letter-spacing:.12em;opacity:.55}
.drawer-hover-warning{
  position:absolute;right:-78px;top:35px;padding:4px 7px;
  background:#FFF9F3;border:1px dashed #342B63;font:italic 11px Georgia,serif;
  opacity:0;transform:rotate(3deg) translateX(-5px);transition:.2s ease;
}
.cabinet-drawer-locked:hover .drawer-hover-warning,.cabinet-drawer-locked:focus-visible .drawer-hover-warning{opacity:1;transform:rotate(3deg) translateX(0)}
.cabinet-feet{position:absolute;left:0;right:0;bottom:-20px;display:flex;justify-content:space-between;padding:0 35px}
.cabinet-feet i{width:48px;height:21px;border:3px solid #342B63;border-top:0;background:#9676D3}

.cabinet-floating-window{
  position:absolute;z-index:3;left:9%;top:130px;width:210px;
  border:2px solid #342B63;background:#FFF9F3;
  box-shadow:7px 7px 0 rgba(121,217,220,.23);
  transform:rotate(-3deg);
}
.cabinet-mini-title{padding:5px 8px;border-bottom:2px solid #342B63;background:#F4A6C6;font-size:9px;font-weight:700}
.cabinet-mini-body{padding:15px;font-size:11px;line-height:1.65}
.cabinet-sticky{
  position:absolute;z-index:8;width:115px;min-height:100px;padding:25px 13px 13px;
  background:#F6D978;border:1px solid rgba(52,43,99,.35);
  box-shadow:3px 4px 0 rgba(52,43,99,.1);
  font:700 12px/1.45 "Courier New",monospace;text-align:center;
}
.cabinet-sticky:before{content:"";position:absolute;top:8px;left:42%;width:28px;height:7px;background:rgba(255,249,243,.55);transform:rotate(-3deg)}
.cabinet-sticky-left{left:4%;top:395px;transform:rotate(-7deg)}
.cabinet-sticky-right{right:6%;top:190px;transform:rotate(6deg);background:#F8D5E4}
.cabinet-pixel-folder{position:absolute;z-index:7;font-size:38px;filter:saturate(.65);user-select:none}
.cabinet-folder-one{right:13%;top:440px;transform:rotate(10deg)}
.cabinet-folder-two{left:17%;top:565px;transform:rotate(-8deg)}
.cabinet-instruction{text-align:center;margin:-5px auto 0;font-size:10px;letter-spacing:.08em;opacity:.55}

/* Crooked computer window opened from a physical drawer */
.drawer-overlay{
  position:fixed;inset:0;z-index:10000;display:grid;place-items:center;
  padding:24px;background:rgba(52,43,99,.34);backdrop-filter:blur(2px);
}
.drawer-overlay[hidden]{display:none}
.drawer-window{
  width:min(620px,92vw);max-height:82vh;overflow:auto;
  border:3px solid #342B63;background:#FFF9F3;
  box-shadow:13px 13px 0 rgba(52,43,99,.25);
  transform:rotate(-.45deg);
  color:#342B63;font-family:"Courier New",Courier,monospace;
}
.drawer-window-bar{
  position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;
  min-height:34px;padding:4px 6px 4px 11px;border-bottom:3px solid #342B63;
  background:#B8A7E8;font-size:11px;font-weight:700;letter-spacing:.08em;
}
.drawer-window-close{
  width:25px;height:23px;border:2px solid #342B63;background:#F8D5E4;color:#342B63;
  font:bold 18px/15px monospace;cursor:pointer;
}
.drawer-window-content{padding:23px}
.drawer-system-line{margin:0 0 18px;padding-bottom:10px;border-bottom:1px dashed rgba(52,43,99,.3);font-size:10px;opacity:.65}
.case-file{
  margin:0 0 13px;padding:16px;border:2px solid #342B63;background:#FFF9F3;
  box-shadow:4px 4px 0 rgba(150,118,211,.15);
}
.case-file>div{display:flex;justify-content:space-between;gap:15px;font-size:10px}
.case-file h2{margin:9px 0 6px;font-size:16px}
.case-file p{margin:0 0 11px;font:13px/1.45 Georgia,serif}
.case-status{padding:2px 5px;background:#F6D978;border:1px solid #342B63;font-size:8px}
.case-file-muted{opacity:.68}
.case-open{padding:5px 9px;border:1px solid #342B63;background:#E7DFF5;color:#342B63;font:9px monospace}
.empty-drawer,.occult-drawer,.access-denied{padding:35px 20px;text-align:center;border:1px dashed rgba(52,43,99,.35);background:#FFF9F3}
.empty-drawer span{font-size:28px}.empty-drawer p,.occult-drawer p{margin:12px 0 5px;font:bold 14px monospace}
.empty-drawer small,.occult-drawer small{font:italic 12px Georgia,serif;opacity:.65}
.occult-stars{font-size:25px;color:#9676D3;letter-spacing:.22em}
.access-denied strong{display:block;margin-bottom:17px;font-size:22px;letter-spacing:.08em}
.access-denied p{margin:5px 0;font:14px Georgia,serif}
.access-denied button{margin-top:20px;padding:7px 18px;border:2px solid #342B63;background:#F8D5E4;color:#342B63;font:bold 10px monospace;cursor:pointer}
body.drawer-is-open{overflow:hidden}

@media(max-width:820px){
  .cabinet-scene{min-height:690px;padding-top:38px}
  .cabinet-floating-window{left:0;top:95px;transform:rotate(-3deg) scale(.8);transform-origin:left top}
  .cabinet-sticky-left{left:0;top:475px;transform:rotate(-7deg) scale(.78)}
  .cabinet-sticky-right{right:0;top:165px;transform:rotate(6deg) scale(.78)}
  .cabinet-folder-one{right:2%}.cabinet-folder-two{left:4%}
  .drawer-hover-warning{right:8px;top:67px}
}
@media(max-width:560px){
  .cabinet-room{width:min(100% - 18px,1120px);margin-top:25px}
  .cabinet-heading{padding-left:14px;padding-right:14px}
  .cabinet-scene{min-height:650px}
  .cabinet-shell{width:82vw;padding:12px 12px 19px}
  .cabinet-drawer{height:78px}
  .drawer-label{min-width:160px;font-size:9px}
  .cabinet-floating-window,.cabinet-sticky,.cabinet-pixel-folder{opacity:.38}
  .cabinet-floating-window{left:-25px}
  .cabinet-sticky-right{right:-18px}
}


/* =========================================================
   CABINET V2 — THE ROOM ACCUMULATES EVIDENCE
   ========================================================= */
.cabinet-scene{isolation:isolate}
.cabinet-shell{z-index:10}
.cabinet-prop{position:absolute;display:block;pointer-events:none;user-select:none;z-index:4}
.prop-thread{width:245px;left:9%;top:82px;transform:rotate(-9deg);opacity:.88}
.prop-news{width:118px;right:11%;top:365px;transform:rotate(8deg);z-index:12;filter:drop-shadow(3px 4px 0 rgba(52,43,99,.10))}
.prop-magnifier{width:112px;right:8%;top:515px;transform:rotate(12deg);z-index:13;filter:drop-shadow(3px 4px 0 rgba(52,43,99,.10))}
.prop-papers{width:175px;left:8%;top:545px;transform:rotate(-6deg);z-index:3;filter:drop-shadow(5px 5px 0 rgba(52,43,99,.08))}
.prop-floppies{width:145px;right:10%;top:92px;transform:rotate(7deg);z-index:5;filter:drop-shadow(4px 5px 0 rgba(52,43,99,.10))}

.drawer-real-folders{position:absolute;width:92px;right:11px;top:-24px;z-index:-1;transform:rotate(4deg);transition:transform .2s ease,top .2s ease;pointer-events:none}
.cabinet-drawer[data-drawer="active"]:hover .drawer-real-folders,.cabinet-drawer[data-drawer="active"]:focus-visible .drawer-real-folders{top:-30px;transform:rotate(6deg) translateX(3px)}

.cabinet-drawer[data-drawer="occult"]{overflow:visible;background:linear-gradient(#c9b8ef,#b39be4)}
.drawer-impossible{position:absolute;left:19px;right:19px;top:-5px;height:21px;overflow:hidden;z-index:0;border-radius:2px 2px 8px 8px;background:#171525;box-shadow:inset 0 -5px 8px rgba(0,0,0,.35),0 0 8px rgba(246,217,120,.22);opacity:.88;transition:height .22s ease,top .22s ease,opacity .22s ease}
.drawer-impossible img{position:absolute;width:73px;height:auto;left:50%;top:-7px;transform:translateX(-50%);filter:saturate(.82) brightness(.95)}
.cabinet-drawer[data-drawer="occult"]:hover .drawer-impossible,.cabinet-drawer[data-drawer="occult"]:focus-visible .drawer-impossible{height:31px;top:-13px;opacity:1}
.cabinet-drawer[data-drawer="occult"] .drawer-stars{z-index:2;left:25px;color:#F6D978}

.cabinet-drawer[data-drawer="unexplained"]{overflow:visible}
.cabinet-ghost-resident{position:absolute;width:72px;left:19px;bottom:-2px;z-index:-1;pointer-events:none;transform:translateY(-45px);transform-origin:center bottom;filter:drop-shadow(0 2px 0 rgba(52,43,99,.10));transition:transform .13s ease-in,opacity .13s ease-in}
.cabinet-drawer[data-drawer="unexplained"]:hover .cabinet-ghost-resident,.cabinet-drawer[data-drawer="unexplained"]:focus-visible .cabinet-ghost-resident{transform:translateY(3px);opacity:.08}
.cabinet-drawer[data-drawer="unexplained"]:not(:hover) .cabinet-ghost-resident{transition-delay:.48s;transition-duration:.32s;transition-timing-function:cubic-bezier(.2,.8,.25,1.2)}
.drawer-ghost-eyes{display:none!important}

.cabinet-folder-one,.cabinet-folder-two{display:none}
.cabinet-sticky-left{left:2%;top:395px}
.cabinet-sticky-right{right:3%;top:190px}
.cabinet-floating-window{left:5%;top:165px}

.cabinet-drawer:nth-of-type(3){margin-left:-3px;width:calc(100% + 1px)}
.cabinet-drawer:nth-of-type(4){margin-left:2px;width:calc(100% - 1px)}
.cabinet-drawer:nth-of-type(6){margin-left:-2px}

@media(max-width:820px){
  .prop-thread{width:180px;left:0;top:75px;opacity:.55}
  .prop-floppies{width:105px;right:0;top:105px;opacity:.7}
  .prop-news{width:85px;right:0;top:390px;opacity:.7}
  .prop-magnifier{width:82px;right:0;top:535px;opacity:.65}
  .prop-papers{width:125px;left:0;top:565px;opacity:.6}
}
@media(max-width:560px){
  .cabinet-prop{opacity:.28!important}
  .drawer-real-folders{width:72px}
  .cabinet-ghost-resident{width:61px;left:11px}
}


/* =========================================================
   CABINET V3 — GRAVITY OUTSIDE, DREAM LOGIC INSIDE
   Props now belong physically to the cabinet instead of floating around it.
   ========================================================= */

/* Pull the room inward: fewer "stickers in space", more evidence in use. */
.prop-floppies{
  width:112px;
  left:50%;
  right:auto;
  top:42px;
  transform:translateX(116px) rotate(5deg);
  z-index:14;
  opacity:.96;
}
.prop-thread{
  width:205px;
  left:50%;
  top:155px;
  transform:translateX(-315px) rotate(-7deg);
  z-index:8;
  opacity:.78;
}
.prop-news{
  width:104px;
  right:auto;
  left:50%;
  top:382px;
  transform:translateX(185px) rotate(5deg);
  z-index:9;
  opacity:.96;
}
.prop-magnifier{
  width:88px;
  right:auto;
  left:50%;
  top:575px;
  transform:translateX(168px) rotate(17deg);
  z-index:13;
  opacity:.96;
}
.prop-papers{
  width:145px;
  left:50%;
  top:630px;
  transform:translateX(-230px) rotate(-4deg);
  z-index:6;
  opacity:.96;
}

/* Make ACTIVE CASES look rummaged-through rather than decorated. */
.drawer-real-folders{
  width:82px;
  right:16px;
  top:-19px;
  transform:rotate(3deg);
}
.cabinet-drawer[data-drawer="active"]:hover .drawer-real-folders,
.cabinet-drawer[data-drawer="active"]:focus-visible .drawer-real-folders{
  top:-25px;
  transform:rotate(5deg) translateX(2px);
}

/* Give OCCULT FILES enough of a crack to reveal the impossible geometry. */
.drawer-impossible{
  left:14px;
  right:14px;
  top:-10px;
  height:31px;
  border-radius:3px 3px 10px 10px;
  box-shadow:
    inset 0 -8px 10px rgba(0,0,0,.42),
    0 0 9px rgba(246,217,120,.28);
}
.drawer-impossible img{
  width:92px;
  top:-9px;
  filter:saturate(.88) brightness(1.05);
}
.cabinet-drawer[data-drawer="occult"]:hover .drawer-impossible,
.cabinet-drawer[data-drawer="occult"]:focus-visible .drawer-impossible{
  height:43px;
  top:-20px;
}
.cabinet-drawer[data-drawer="occult"] .drawer-stars{
  opacity:.65;
}

/* Cabinet Ghost: clearly visible until caught looking. */
.cabinet-ghost-resident{
  width:78px;
  left:17px;
  bottom:-1px;
  transform:translateY(-54px);
  opacity:1;
  z-index:-1;
}
.cabinet-drawer[data-drawer="unexplained"]:hover .cabinet-ghost-resident,
.cabinet-drawer[data-drawer="unexplained"]:focus-visible .cabinet-ghost-resident{
  transform:translateY(9px);
  opacity:0;
}
.cabinet-drawer[data-drawer="unexplained"]:not(:hover) .cabinet-ghost-resident{
  transition-delay:.55s;
  transition-duration:.34s;
}

/* Existing decorative notes stay, but step back from the cabinet itself. */
.cabinet-sticky-left{left:3%;top:420px;transform:rotate(-4deg) scale(.92)}
.cabinet-sticky-right{right:4%;top:210px;transform:rotate(4deg) scale(.92)}
.cabinet-floating-window{left:4%;top:180px;transform:rotate(-2deg) scale(.94)}

/* On narrower layouts, keep props attached rather than scattering them. */
@media(max-width:820px){
  .prop-floppies{left:50%;top:50px;width:88px;transform:translateX(82px) rotate(5deg);opacity:.9}
  .prop-thread{left:50%;top:165px;width:155px;transform:translateX(-230px) rotate(-7deg);opacity:.52}
  .prop-news{left:50%;top:390px;width:78px;transform:translateX(132px) rotate(5deg);opacity:.82}
  .prop-magnifier{left:50%;top:565px;width:68px;transform:translateX(120px) rotate(17deg);opacity:.82}
  .prop-papers{left:50%;top:620px;width:108px;transform:translateX(-170px) rotate(-4deg);opacity:.82}
}
@media(max-width:560px){
  .prop-thread{display:none}
  .prop-news{opacity:.5!important}
  .prop-magnifier{opacity:.5!important}
  .prop-papers{opacity:.55!important}
  .prop-floppies{opacity:.7!important}
}


/* =========================================================
   CABINET V4 — SURGICAL POLISH
   The furniture obeys gravity. What is behind it does not.
   ========================================================= */

/* Retire the older yellow note so the left side can breathe. */
.cabinet-sticky-left{display:none!important}

/* Red thread now has a job: it starts near the remaining research note
   and disappears behind the cabinet instead of floating in open space. */
.prop-thread{
  width:172px;
  left:50%;
  top:205px;
  transform:translateX(-302px) rotate(8deg);
  z-index:9;
  opacity:.96;
  filter:drop-shadow(0 1px 0 rgba(52,43,99,.08));
}

/* Ghost Employee™: visible enough to discover, still small enough to miss at first. */
.cabinet-ghost-resident{
  width:88px;
  left:22px;
  bottom:-1px;
  z-index:1;
  transform:translateY(-62px);
  opacity:1;
  filter:drop-shadow(0 2px 1px rgba(52,43,99,.13));
}
.cabinet-drawer[data-drawer="unexplained"]{
  z-index:6;
}
.cabinet-drawer[data-drawer="unexplained"]:hover .cabinet-ghost-resident,
.cabinet-drawer[data-drawer="unexplained"]:focus-visible .cabinet-ghost-resident{
  transform:translateY(11px);
  opacity:0;
  transition-delay:0s;
  transition-duration:.12s;
}
.cabinet-drawer[data-drawer="unexplained"]:not(:hover) .cabinet-ghost-resident{
  transition-delay:.58s;
  transition-duration:.34s;
  transition-timing-function:cubic-bezier(.2,.82,.24,1.12);
}

/* OCCULT FILES: remove the "black thumbnail" look.
   The darkness is now only the hairline space BEHIND the drawer face. */
.cabinet-drawer[data-drawer="occult"]{
  z-index:7;
  background:linear-gradient(#c9b8ef,#b39be4);
}
.drawer-impossible{
  left:22px;
  right:22px;
  top:-7px;
  height:15px;
  z-index:-1;
  overflow:hidden;
  border-radius:45% 55% 4px 4px / 8px 8px 3px 3px;
  background:
    radial-gradient(ellipse at 50% 20%,rgba(121,217,220,.11),transparent 43%),
    #151322;
  box-shadow:
    inset 0 -7px 8px rgba(0,0,0,.52),
    0 -2px 7px rgba(246,217,120,.16);
  opacity:1;
  transform:perspective(120px) rotateX(-3deg);
  transform-origin:bottom center;
}
.drawer-impossible::before,
.drawer-impossible::after{
  content:"";
  position:absolute;
  width:3px;height:3px;
  border-radius:50%;
  background:#F6D978;
  opacity:.72;
  box-shadow:18px 4px 0 #FFF9F3,47px 1px 0 #79D9DC,76px 5px 0 #F6D978;
}
.drawer-impossible::before{left:14%;top:4px}
.drawer-impossible::after{right:18%;top:7px;transform:scale(.7)}
.drawer-impossible img{
  width:128px;
  left:50%;
  top:-20px;
  transform:translateX(-50%) scale(1.05);
  transform-origin:center top;
  filter:saturate(.78) brightness(.93) contrast(1.06);
}
.cabinet-drawer[data-drawer="occult"]:hover .drawer-impossible,
.cabinet-drawer[data-drawer="occult"]:focus-visible .drawer-impossible{
  top:-18px;
  height:31px;
  left:18px;
  right:18px;
  box-shadow:
    inset 0 -10px 12px rgba(0,0,0,.48),
    0 -3px 10px rgba(246,217,120,.22);
}
.cabinet-drawer[data-drawer="occult"]:hover .drawer-impossible img,
.cabinet-drawer[data-drawer="occult"]:focus-visible .drawer-impossible img{
  top:-14px;
  transform:translateX(-50%) scale(1.18);
}
.cabinet-drawer[data-drawer="occult"] .drawer-stars{
  display:none!important;
}

/* Keep the drawer face in front of the impossible space. */
.cabinet-drawer[data-drawer="occult"] .drawer-label,
.cabinet-drawer[data-drawer="occult"] .drawer-handle,
.cabinet-drawer[data-drawer="occult"] .drawer-meta{
  position:relative;
  z-index:3;
}

/* Slight physical overlap: the newspaper looks caught behind the cabinet edge. */
.prop-news{
  left:50%;
  top:388px;
  width:98px;
  transform:translateX(176px) rotate(7deg);
  z-index:8;
}

/* Magnifier rests near the cabinet base rather than hovering beside a drawer. */
.prop-magnifier{
  left:50%;
  top:604px;
  width:82px;
  transform:translateX(148px) rotate(20deg);
  z-index:13;
}

/* Paper pile sits lower and partly under the cabinet footprint. */
.prop-papers{
  left:50%;
  top:645px;
  width:138px;
  transform:translateX(-205px) rotate(-3deg);
  z-index:5;
}

@media(max-width:820px){
  .prop-thread{width:132px;left:50%;top:214px;transform:translateX(-218px) rotate(8deg);opacity:.76}
  .cabinet-ghost-resident{width:76px;left:15px;transform:translateY(-54px)}
  .drawer-impossible img{width:108px}
}
@media(max-width:560px){
  .prop-thread{display:none}
  .cabinet-ghost-resident{width:67px;left:11px;transform:translateY(-48px)}
}


/* =========================================================
   CABINET V5 — INTEGRATION PASS
   Physical evidence outside; impossible space inside.
   ========================================================= */

/* OCCULT FILES: keep the opening restrained, but make the contents legible. */
.drawer-impossible{
  left:24px;
  right:24px;
  top:-8px;
  height:17px;
  border-radius:52% 48% 3px 3px / 7px 7px 2px 2px;
  background:
    radial-gradient(ellipse at 52% 8%, rgba(121,217,220,.13), transparent 38%),
    #151322;
  box-shadow:
    inset 0 -8px 9px rgba(0,0,0,.55),
    0 -2px 6px rgba(246,217,120,.14);
}
.drawer-impossible img{
  width:168px;
  left:50%;
  top:-45px;
  transform:translateX(-50%) scale(1.08);
  transform-origin:center top;
  filter:saturate(.76) brightness(.96) contrast(1.08);
}
.cabinet-drawer[data-drawer="occult"]:hover .drawer-impossible,
.cabinet-drawer[data-drawer="occult"]:focus-visible .drawer-impossible{
  left:21px;
  right:21px;
  top:-15px;
  height:27px;
}
.cabinet-drawer[data-drawer="occult"]:hover .drawer-impossible img,
.cabinet-drawer[data-drawer="occult"]:focus-visible .drawer-impossible img{
  width:178px;
  top:-39px;
  transform:translateX(-50%) scale(1.1);
}

/* The escaped paper pile now sits off-axis and partly under the cabinet. */
.prop-papers{
  width:126px;
  left:50%;
  top:651px;
  transform:translateX(-272px) rotate(-10deg);
  transform-origin:center;
  z-index:5;
  opacity:.93;
  filter:drop-shadow(3px 4px 0 rgba(52,43,99,.07)) saturate(.88);
}

/* Slightly harmonize imported art so it belongs to the room. */
.prop-news{
  top:392px;
  transform:translateX(181px) rotate(8deg);
  filter:drop-shadow(2px 3px 0 rgba(52,43,99,.08)) saturate(.82) contrast(.96);
}
.prop-magnifier{
  top:607px;
  transform:translateX(151px) rotate(22deg);
  filter:drop-shadow(2px 3px 0 rgba(52,43,99,.09)) saturate(.88);
}
.prop-floppies{
  filter:drop-shadow(3px 4px 0 rgba(52,43,99,.09)) saturate(.90);
}
.prop-thread{
  filter:drop-shadow(0 1px 0 rgba(52,43,99,.08)) saturate(.88);
}

/* Ghost Employee stays where he finally works. */
.cabinet-ghost-resident{
  width:88px;
  left:22px;
  bottom:-1px;
}

@media(max-width:820px){
  .prop-papers{
    width:104px;
    left:50%;
    top:632px;
    transform:translateX(-205px) rotate(-10deg);
  }
  .drawer-impossible img{width:142px;top:-38px}
  .cabinet-drawer[data-drawer="occult"]:hover .drawer-impossible img,
  .cabinet-drawer[data-drawer="occult"]:focus-visible .drawer-impossible img{
    width:151px;top:-33px;
  }
}
@media(max-width:560px){
  .prop-papers{
    width:90px;
    transform:translateX(-158px) rotate(-9deg);
  }
}


/* =========================================================
   CABINET V4.16 — THE CABINET, DISTILLED
   One authored object in a strange quiet room.
   Exterior clutter is removed; each drawer carries the story.
   ========================================================= */

/* Remove the satellite collage. Empty space is now part of the scene. */
.cabinet-prop,
.cabinet-sticky-left,
.cabinet-sticky-right,
.cabinet-floating-window,
.cabinet-folder-one,
.cabinet-folder-two{
  display:none!important;
}

/* Keep the cabinet visually dominant and give it deliberate breathing room. */
.cabinet-scene{
  min-height:760px;
}
.cabinet-shell{
  position:relative;
  z-index:10;
  filter:drop-shadow(0 16px 18px rgba(52,43,99,.10));
}

/* A faint "floor" under the cabinet makes it an object in a room,
   without introducing another illustration asset. */
.cabinet-shell::after{
  content:"";
  position:absolute;
  left:12%;
  right:12%;
  bottom:-25px;
  height:22px;
  z-index:-5;
  border-radius:50%;
  background:radial-gradient(ellipse at center,
    rgba(52,43,99,.13) 0%,
    rgba(52,43,99,.055) 43%,
    rgba(52,43,99,0) 73%);
  filter:blur(5px);
  pointer-events:none;
}

/* Every drawer gets a restrained physical hover, not a UI-card effect. */
.cabinet-drawer{
  transition:transform .18s ease, box-shadow .18s ease;
  transform-origin:center;
}
.cabinet-drawer:hover,
.cabinet-drawer:focus-visible{
  transform:translateX(5px);
  box-shadow:-5px 5px 0 rgba(52,43,99,.08);
}

/* ACTIVE CASES: real folders physically live in this drawer. */
.drawer-real-folders{
  display:block!important;
  width:92px;
  right:13px;
  top:-23px;
  z-index:-1;
  transform:rotate(3deg);
  filter:saturate(.88) drop-shadow(1px 2px 0 rgba(52,43,99,.08));
}
.cabinet-drawer[data-drawer="active"]:hover .drawer-real-folders,
.cabinet-drawer[data-drawer="active"]:focus-visible .drawer-real-folders{
  top:-30px;
  transform:rotate(5deg) translateX(2px);
}

/* STRANGE CONNECTIONS: the drawer itself contains the thread.
   No external Canva strand required. */
.cabinet-drawer[data-drawer="connections"]::before{
  content:"";
  position:absolute;
  left:18px;
  top:-4px;
  width:72px;
  height:17px;
  z-index:-1;
  opacity:.72;
  background:
    linear-gradient(15deg,
      transparent 0 8%,
      #e45d86 9% 11%,
      transparent 12% 29%,
      #e45d86 30% 32%,
      transparent 33% 51%,
      #e45d86 52% 54%,
      transparent 55% 100%);
  clip-path:polygon(0 48%,18% 28%,35% 61%,53% 35%,71% 64%,100% 42%,100% 58%,72% 79%,53% 50%,35% 76%,17% 43%,0 65%);
  transition:top .18s ease, opacity .18s ease;
}
.cabinet-drawer[data-drawer="connections"]:hover::before,
.cabinet-drawer[data-drawer="connections"]:focus-visible::before{
  top:-9px;
  opacity:.95;
}

/* CULTURAL ARTIFACTS: a tiny archival disk edge peeks from the seam.
   CSS-built so it shares the cabinet's line language. */
.cabinet-drawer[data-drawer="artifacts"]::before{
  content:"";
  position:absolute;
  right:24px;
  top:-10px;
  width:31px;
  height:22px;
  z-index:-1;
  border:2px solid #342B63;
  border-radius:2px;
  background:
    linear-gradient(#79D9DC 0 36%,#F4A6C6 36% 100%);
  box-shadow:inset 7px 0 0 rgba(255,249,243,.55);
  transform:rotate(5deg);
  transition:top .18s ease, transform .18s ease;
}
.cabinet-drawer[data-drawer="artifacts"]:hover::before,
.cabinet-drawer[data-drawer="artifacts"]:focus-visible::before{
  top:-16px;
  transform:rotate(8deg);
}

/* OCCULT FILES: this is the one place where physics actually breaks.
   A narrow darkness exists behind the drawer; stairs are glimpsed, not displayed. */
.cabinet-drawer[data-drawer="occult"]{
  overflow:visible;
  z-index:7;
}
.drawer-impossible{
  display:block!important;
  left:26px;
  right:26px;
  top:-8px;
  height:18px;
  z-index:-1;
  overflow:hidden;
  border-radius:48% 52% 3px 3px / 7px 7px 2px 2px;
  background:#151322;
  box-shadow:
    inset 0 -8px 10px rgba(0,0,0,.55),
    0 -2px 7px rgba(246,217,120,.17);
}
.drawer-impossible img{
  display:block!important;
  width:154px;
  position:absolute;
  left:50%;
  top:-40px;
  transform:translateX(-50%);
  filter:saturate(.75) brightness(.97) contrast(1.08);
}
.cabinet-drawer[data-drawer="occult"]:hover .drawer-impossible,
.cabinet-drawer[data-drawer="occult"]:focus-visible .drawer-impossible{
  top:-16px;
  height:28px;
  left:22px;
  right:22px;
}
.cabinet-drawer[data-drawer="occult"]:hover .drawer-impossible img,
.cabinet-drawer[data-drawer="occult"]:focus-visible .drawer-impossible img{
  width:166px;
  top:-35px;
}
.cabinet-drawer[data-drawer="occult"] .drawer-stars{
  display:none!important;
}

/* UNEXPLAINED: Ghost Employee™ keeps his job and his hiding place. */
.cabinet-drawer[data-drawer="unexplained"]{
  overflow:visible;
  z-index:6;
}
.cabinet-ghost-resident{
  display:block!important;
  width:88px;
  left:22px;
  bottom:-1px;
  z-index:1;
  opacity:1;
  transform:translateY(-62px);
  filter:drop-shadow(0 2px 1px rgba(52,43,99,.12));
}
.cabinet-drawer[data-drawer="unexplained"]:hover .cabinet-ghost-resident,
.cabinet-drawer[data-drawer="unexplained"]:focus-visible .cabinet-ghost-resident{
  transform:translateY(11px);
  opacity:0;
  transition-delay:0s;
  transition-duration:.12s;
}
.cabinet-drawer[data-drawer="unexplained"]:not(:hover) .cabinet-ghost-resident{
  transition-delay:.58s;
  transition-duration:.34s;
  transition-timing-function:cubic-bezier(.2,.82,.24,1.12);
}

/* DO NOT OPEN gets nothing. The refusal is the worldbuilding. */
.cabinet-drawer[data-drawer="locked"]{
  transform:translateX(-1px);
}
.cabinet-drawer[data-drawer="locked"]:hover,
.cabinet-drawer[data-drawer="locked"]:focus-visible{
  transform:translateX(-1px);
  box-shadow:none;
}

/* Preserve the charming slightly-wrong physical alignment. */
.cabinet-drawer:nth-of-type(3){margin-left:-3px;width:calc(100% + 1px)}
.cabinet-drawer:nth-of-type(4){margin-left:2px;width:calc(100% - 1px)}
.cabinet-drawer:nth-of-type(6){margin-left:-2px}

@media(max-width:820px){
  .cabinet-scene{min-height:700px}
  .drawer-real-folders{width:78px}
  .cabinet-ghost-resident{width:76px;left:15px;transform:translateY(-54px)}
  .drawer-impossible img{width:136px;top:-35px}
}
@media(max-width:560px){
  .cabinet-scene{min-height:650px}
  .cabinet-ghost-resident{width:67px;left:11px;transform:translateY(-48px)}
}


/* =========================================================
   CABINET V4.17 — THE ARCHIVE ROOM
   The room obeys reality. The cabinet obeys dream logic.
   ========================================================= */

/* Turn the former blank scene into an actual little room. */
.cabinet-scene{
  position:relative;
  isolation:isolate;
  min-height:790px;
  overflow:hidden;
  border:2px solid rgba(52,43,99,.34);
  border-radius:7px;
  background:
    radial-gradient(circle at 50% 34%, rgba(255,249,243,.96) 0 15%, rgba(248,213,228,.54) 36%, transparent 57%),
    linear-gradient(to bottom,
      #E7DFF5 0%,
      #E7DFF5 67%,
      #F8D5E4 67%,
      #FFF9F3 100%);
  box-shadow:
    inset 0 0 0 7px rgba(255,249,243,.46),
    7px 8px 0 rgba(52,43,99,.08);
}

/* Tiny old-wall pattern: visible enough to make "wall", quiet enough not to compete. */
.cabinet-scene::before{
  content:"";
  position:absolute;
  inset:0 0 33% 0;
  z-index:0;
  pointer-events:none;
  opacity:.24;
  background-image:
    radial-gradient(circle, rgba(150,118,211,.38) 1px, transparent 1.4px);
  background-size:18px 18px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.78),rgba(0,0,0,.22));
}

/* Baseboard = instant room logic. */
.cabinet-scene::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:66.6%;
  height:10px;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(to bottom,
      rgba(52,43,99,.24) 0 2px,
      rgba(255,249,243,.92) 2px 7px,
      rgba(52,43,99,.16) 7px 9px,
      transparent 9px);
}

/* A soft supernatural light lives behind the cabinet, but is environmental,
   not another sticker. */
.cabinet-shell::before{
  content:"";
  position:absolute;
  z-index:-6;
  left:-82px;
  right:-82px;
  top:-70px;
  bottom:20px;
  pointer-events:none;
  border-radius:45%;
  background:
    radial-gradient(ellipse at 50% 42%,
      rgba(121,217,220,.20) 0%,
      rgba(184,167,232,.14) 34%,
      rgba(246,217,120,.07) 49%,
      transparent 70%);
  filter:blur(5px);
}

/* Strengthen contact with the floor. */
.cabinet-shell::after{
  left:7%;
  right:7%;
  bottom:-29px;
  height:25px;
  background:radial-gradient(ellipse at center,
    rgba(52,43,99,.18) 0%,
    rgba(52,43,99,.075) 45%,
    rgba(52,43,99,0) 75%);
  filter:blur(5px);
}

/* A wall-mounted archival note, made from CSS so it belongs to this room.
   It is deliberately quiet and architectural, not floating decoration. */
.cabinet-scene .cabinet-shell{
  margin-top:72px;
}
.cabinet-scene .cabinet-shell > .cabinet-top::before{
  content:"ARCHIVE 44\\A unauthorized filing observed";
  white-space:pre;
  position:absolute;
  left:-205px;
  top:-94px;
  width:150px;
  padding:13px 12px 12px;
  z-index:2;
  color:#342B63;
  background:#FFF9F3;
  border:1.5px solid rgba(52,43,99,.55);
  box-shadow:4px 4px 0 rgba(150,118,211,.16);
  font:700 10px/1.55 "Courier New",monospace;
  letter-spacing:.035em;
  transform:rotate(-2deg);
}
.cabinet-scene .cabinet-shell > .cabinet-top::after{
  content:"";
  position:absolute;
  left:-143px;
  top:-101px;
  width:28px;
  height:8px;
  z-index:3;
  background:rgba(246,217,120,.72);
  border:1px solid rgba(52,43,99,.12);
  transform:rotate(3deg);
}

/* A nearly invisible wall seam adds age without adding "content". */
.cabinet-room-seam{
  display:none!important;
}

/* Let the cabinet remain the dominant object. */
.cabinet-shell{
  filter:drop-shadow(0 18px 16px rgba(52,43,99,.12));
}

/* The floor gets a faint perspective line texture. */
.cabinet-scene .cabinet-floor-lines{
  display:none!important;
}
.cabinet-scene{
  background-color:#E7DFF5;
}
.cabinet-scene .cabinet-shell{
  z-index:10;
}

/* Add floor texture through a low, non-interactive gradient layer using
   the existing scene background only — no new art assets. */
@supports (background: repeating-linear-gradient(0deg,#000,#000)){
  .cabinet-scene{
    background:
      radial-gradient(circle at 50% 34%, rgba(255,249,243,.96) 0 15%, rgba(248,213,228,.54) 36%, transparent 57%),
      repeating-linear-gradient(96deg,
        transparent 0 48px,
        rgba(52,43,99,.035) 49px 50px,
        transparent 51px 100px),
      linear-gradient(to bottom,
        #E7DFF5 0%,
        #E7DFF5 67%,
        #F8D5E4 67%,
        #FFF9F3 100%);
  }
}

/* Mobile: preserve the sense of a room without crushing the cabinet. */
@media(max-width:820px){
  .cabinet-scene{min-height:735px}
  .cabinet-scene .cabinet-shell{margin-top:66px}
  .cabinet-scene .cabinet-shell > .cabinet-top::before{
    left:-145px;
    top:-88px;
    width:125px;
    font-size:9px;
  }
  .cabinet-scene .cabinet-shell > .cabinet-top::after{
    left:-92px;
    top:-95px;
  }
}
@media(max-width:620px){
  .cabinet-scene{
    min-height:680px;
    border-left-width:1px;
    border-right-width:1px;
  }
  .cabinet-scene .cabinet-shell{margin-top:54px}
  .cabinet-scene .cabinet-shell > .cabinet-top::before,
  .cabinet-scene .cabinet-shell > .cabinet-top::after{
    display:none;
  }
}


/* =========================================================
   CABINET V4.18 — PARANORMAL RECORDS OFFICE
   A forgotten basement department underneath the old internet.
   ========================================================= */

/* The set: wider, deeper, asymmetrical. */
.cabinet-scene{
  min-height:860px;
  overflow:hidden;
  border:2px solid #342B63;
  border-radius:4px;
  background:
    linear-gradient(90deg,rgba(52,43,99,.035) 1px,transparent 1px) 0 0/52px 100%,
    linear-gradient(to bottom,#dcd5ef 0 66%,#d7c7d8 66% 68%,#d8c9c7 68% 100%);
  box-shadow:8px 9px 0 rgba(52,43,99,.10), inset 0 0 0 7px rgba(255,249,243,.28);
}
.cabinet-scene::before{
  inset:0 0 32% 0;
  opacity:.22;
  background:
    radial-gradient(circle at 16% 22%,rgba(52,43,99,.18) 0 1px,transparent 1.5px) 0 0/21px 21px,
    linear-gradient(90deg,transparent 49.5%,rgba(52,43,99,.06) 50%,transparent 50.5%) 0 0/104px 100%;
}
.cabinet-scene::after{
  top:67%;
  height:12px;
  background:linear-gradient(to bottom,#6f648b 0 2px,#f7eee8 2px 8px,#9b8ba2 8px 10px,transparent 10px);
}

/* Cabinet moves off-center: it is furniture now, not a product hero. */
.cabinet-scene .cabinet-shell{
  margin-top:180px;
  transform:translateX(88px) scale(.93);
  transform-origin:center bottom;
  z-index:20;
}
.cabinet-shell::before{
  left:-48px;right:-48px;top:-42px;
  background:radial-gradient(ellipse at 50% 48%,rgba(121,217,220,.12),rgba(184,167,232,.09) 38%,transparent 70%);
}
.cabinet-scene .cabinet-shell > .cabinet-top::before,
.cabinet-scene .cabinet-shell > .cabinet-top::after{
  display:none!important;
}

/* Entire office architecture is non-interactive so drawers stay clickable. */
.paranormal-office,.paranormal-office *{pointer-events:none;box-sizing:border-box}
.paranormal-office{position:absolute;inset:0;z-index:3;color:#342B63;font-family:"Courier New",monospace}

/* Fluorescent-ish basement ceiling light. */
.ceiling-light{
  position:absolute;left:50%;top:25px;width:300px;height:18px;
  transform:translateX(-50%) rotate(-.4deg);
  border:2px solid rgba(52,43,99,.42);
  background:#fff9df;
  box-shadow:0 8px 28px rgba(246,217,120,.22),0 2px 0 rgba(52,43,99,.10);
}
.ceiling-light::after{
  content:"";position:absolute;left:12%;right:12%;top:17px;height:180px;
  background:linear-gradient(to bottom,rgba(246,217,120,.07),transparent);
  clip-path:polygon(10% 0,90% 0,100% 100%,0 100%);
}

/* Bureaucratic sign on the back wall. */
.office-sign{
  position:absolute;left:42px;top:70px;width:285px;
  padding:13px 15px 12px;
  background:#f7f0e7;border:2px solid #342B63;
  box-shadow:5px 5px 0 rgba(52,43,99,.12);
  transform:rotate(-.8deg);
}
.office-sign strong{display:block;font-size:23px;letter-spacing:.12em}
.office-sign span{display:block;margin-top:4px;font-size:10px;font-weight:700;letter-spacing:.075em}
.office-sign small{display:block;margin-top:8px;padding-top:6px;border-top:1px dashed #9676D3;font-size:8px}

/* Impossible basement window. */
.office-night-window{
  position:absolute;right:48px;top:74px;width:170px;height:145px;
  overflow:hidden;border:7px solid #f6eee9;outline:2px solid #342B63;
  background:linear-gradient(#342B63,#5e5595 56%,#9d82bd);
  box-shadow:7px 7px 0 rgba(52,43,99,.12);
}
.office-night-window::before,.office-night-window::after{
  content:"";position:absolute;background:#f6eee9;z-index:4
}
.office-night-window::before{left:50%;top:0;bottom:0;width:5px;transform:translateX(-50%)}
.office-night-window::after{left:0;right:0;top:53%;height:5px}
.window-moon{
  position:absolute;width:31px;height:31px;border-radius:50%;right:21px;top:19px;
  background:#F6D978;box-shadow:-9px 0 0 2px #4b457c;
}
.window-star{position:absolute;width:3px;height:3px;background:#FFF9F3;box-shadow:0 0 5px #FFF9F3}
.star-a{left:24px;top:31px}.star-b{left:68px;top:18px}.star-c{right:46px;bottom:25px}
.window-blind{position:absolute;left:0;right:0;height:3px;background:rgba(255,249,243,.42);z-index:3}
.blind-a{top:20px}.blind-b{top:39px}.blind-c{top:58px}

/* Restrained evidence board: not a giant detective cliché. */
.office-bulletin{
  position:absolute;left:45px;top:255px;width:245px;height:195px;
  background:#caa98d;border:8px solid #8d6c66;outline:2px solid #342B63;
  box-shadow:7px 8px 0 rgba(52,43,99,.11);
  transform:rotate(.5deg);
}
.board-paper{position:absolute;padding:8px;background:#FFF9F3;border:1px solid rgba(52,43,99,.4);font-size:8px;line-height:1.45;box-shadow:2px 2px 0 rgba(52,43,99,.08)}
.paper-a{left:18px;top:18px;width:93px;transform:rotate(-3deg)}
.paper-b{right:17px;top:24px;width:61px;text-align:center;background:#F8D5E4;transform:rotate(4deg);font-size:10px;font-weight:700}
.board-photo{position:absolute;left:88px;bottom:22px;width:72px;height:61px;background:#e8e4dc;border:6px solid #FFF9F3;transform:rotate(2deg);box-shadow:2px 2px 0 rgba(52,43,99,.12)}
.board-photo i{position:absolute;left:9px;right:9px;bottom:8px;height:26px;background:linear-gradient(150deg,#9676D3 0 42%,#79D9DC 43% 67%,#342B63 68%)}
.board-thread{position:absolute;height:2px;background:#d95f7d;transform-origin:left center}
.thread-a{left:79px;top:74px;width:84px;transform:rotate(31deg)}
.thread-b{left:112px;top:126px;width:80px;transform:rotate(-35deg)}
.board-pin{position:absolute;width:8px;height:8px;border-radius:50%;background:#F6D978;border:1px solid #342B63}
.pin-a{left:75px;top:70px}.pin-b{right:47px;top:92px}

/* Desk occupies the left foreground, partially off-screen: room continues beyond frame. */
.office-desk{
  position:absolute;left:-38px;bottom:73px;width:315px;height:145px;
  background:#826f83;border:2px solid #342B63;border-radius:3px 3px 0 0;
  box-shadow:0 12px 0 #66566d,5px 14px 0 rgba(52,43,99,.14);
}
.office-desk::before{
  content:"";position:absolute;left:18px;right:-18px;top:-13px;height:17px;
  background:#aa94a7;border:2px solid #342B63;
}

/* CSS CRT: deliberately chunky old-web geometry. */
.crt{position:absolute;left:24px;top:-104px;width:128px;height:103px;background:#ddd5dc;border:3px solid #342B63;border-radius:8px 8px 4px 4px;box-shadow:5px 5px 0 rgba(52,43,99,.15)}
.crt-screen{position:absolute;left:10px;right:10px;top:10px;height:64px;padding:9px 7px;background:#26384a;border:3px inset #766e83;color:#79D9DC;font-size:6px;line-height:1.5;text-shadow:0 0 5px rgba(121,217,220,.6)}
.crt-screen span,.crt-screen b,.crt-screen em{display:block}.crt-screen b{color:#F6D978;font-size:7px}.crt-screen em{color:#F8D5E4;font-style:normal;margin-top:3px}
.crt-button{position:absolute;right:12px;bottom:9px;width:7px;height:7px;border-radius:50%;background:#79D9DC;border:1px solid #342B63}
.crt-base{position:absolute;left:24px;right:24px;bottom:-13px;height:14px;background:#c5bbc7;border:2px solid #342B63}

/* Desk lamp and its pool of light. */
.desk-lamp{position:absolute;right:40px;top:-99px;width:68px;height:99px}
.desk-lamp i{position:absolute;left:31px;top:25px;width:5px;height:58px;background:#342B63;transform:rotate(15deg);transform-origin:bottom}
.desk-lamp b{position:absolute;left:18px;top:7px;width:42px;height:27px;border-radius:24px 24px 8px 8px;background:#F6D978;border:2px solid #342B63;transform:rotate(14deg)}
.desk-lamp span{position:absolute;left:20px;bottom:2px;width:52px;height:10px;border-radius:50%;background:#342B63}
.desk-lamp::after{content:"";position:absolute;right:-7px;top:28px;width:82px;height:78px;background:linear-gradient(145deg,rgba(246,217,120,.17),transparent 68%);clip-path:polygon(20% 0,64% 0,100% 100%,0 100%)}

/* Physical desk clutter: simple, same line language. */
.desk-folders{position:absolute;left:170px;top:23px;width:74px;height:34px}
.desk-folders i{position:absolute;left:0;width:70px;height:12px;border:1.5px solid #342B63;background:#F4A6C6}
.desk-folders i:nth-child(1){top:0;transform:rotate(-2deg)}.desk-folders i:nth-child(2){top:9px;background:#B8A7E8;transform:rotate(2deg)}.desk-folders i:nth-child(3){top:18px;background:#FFF9F3;transform:rotate(-1deg)}
.desk-mug{position:absolute;right:14px;top:22px;width:31px;height:31px;padding-top:8px;text-align:center;border:2px solid #342B63;border-radius:3px 3px 9px 9px;background:#79D9DC;font-size:8px;font-weight:700}
.desk-mug::after{content:"";position:absolute;right:-11px;top:6px;width:12px;height:15px;border:2px solid #342B63;border-left:0;border-radius:0 9px 9px 0}

/* Archive boxes anchor the right-hand floor and imply more records beyond the frame. */
.archive-box{position:absolute;bottom:47px;background:#d7b38c;border:2px solid #342B63;box-shadow:5px 6px 0 rgba(52,43,99,.10);transform:rotate(1deg)}
.archive-box::before{content:"";position:absolute;left:-5px;right:-5px;top:-8px;height:10px;background:#e5c39e;border:2px solid #342B63}
.archive-box span{display:block;margin:17px 12px 0;padding:5px;background:#f7f0e7;border:1px solid #342B63;text-align:center;font-size:8px;font-weight:700}
.box-a{right:31px;width:137px;height:93px}.box-b{right:-42px;bottom:132px;width:120px;height:80px;transform:rotate(-2deg)}
.floor-cable{position:absolute;right:110px;bottom:18px;width:160px;height:48px;border-bottom:3px solid #342B63;border-radius:50%;transform:rotate(-4deg);opacity:.55}

/* Cabinet stays readable over the office set. */
.cabinet-drawer{position:relative}
.cabinet-shell{filter:drop-shadow(0 17px 15px rgba(52,43,99,.15))}

/* Responsive: retain "office" identity without crushing interactions. */
@media(max-width:900px){
  .cabinet-scene .cabinet-shell{transform:translateX(60px) scale(.88);margin-top:185px}
  .office-bulletin{left:25px;width:205px}
  .office-sign{left:25px;width:245px}
  .office-night-window{right:27px;width:145px}
  .office-desk{left:-75px}
}
@media(max-width:700px){
  .cabinet-scene{min-height:790px}
  .cabinet-scene .cabinet-shell{transform:translateX(15px) scale(.84);margin-top:210px}
  .office-sign{left:18px;top:62px;width:220px}
  .office-night-window{right:20px;top:70px;width:125px;height:120px}
  .office-bulletin{left:16px;top:235px;width:175px;height:165px;opacity:.78}
  .office-desk{left:-105px;bottom:55px;transform:scale(.86);transform-origin:left bottom}
  .archive-box{opacity:.75}
}
@media(max-width:520px){
  .cabinet-scene{min-height:720px}
  .cabinet-scene .cabinet-shell{transform:translateX(0) scale(.76);margin-top:200px}
  .office-bulletin{opacity:.42;left:-45px}
  .office-night-window{right:13px;width:105px;height:105px}
  .office-sign{width:190px}
  .office-sign strong{font-size:18px}
  .office-desk{opacity:.72;left:-145px}
  .box-b{display:none}
}


/* =========================================================
   CABINET V4.19 — BASEMENT SHIFT
   Less "cabinet hero", more forgotten paranormal workplace.
   ========================================================= */

/* Let the office breathe. The frame is quieter and the scene deeper. */
.cabinet-scene{
  min-height:920px;
  border-color:rgba(52,43,99,.58);
  box-shadow:
    8px 10px 0 rgba(52,43,99,.07),
    inset 0 0 0 7px rgba(255,249,243,.22),
    inset 0 34px 70px rgba(52,43,99,.025);
}

/* Cabinet becomes one object in the room instead of THE room. */
.cabinet-scene .cabinet-shell{
  margin-top:238px;
  transform:translateX(150px) scale(.76);
  transform-origin:center bottom;
}

/* More useful left-side workstation. */
.office-desk{
  left:-18px;
  bottom:86px;
  width:355px;
  height:154px;
}
.crt{
  left:36px;
  top:-112px;
  transform:scale(1.05);
  transform-origin:left bottom;
}
.desk-lamp{right:42px;top:-103px}
.desk-folders{left:185px;top:24px}
.desk-mug{right:17px;top:24px}

/* Evidence board gets enough presence to read as actively used. */
.office-bulletin{
  left:48px;
  top:265px;
  width:275px;
  height:215px;
}
.paper-a{width:104px}
.paper-b{right:22px}
.board-photo{left:106px;bottom:24px}

/* Sign belongs to the department, not to the cabinet. */
.office-sign{
  left:48px;
  top:82px;
  width:305px;
}

/* Window remains the one clean supernatural tell. */
.office-night-window{
  right:54px;
  top:82px;
  width:184px;
  height:154px;
}

/* Archive boxes stay grounded but tuck farther into the right-hand room. */
.box-a{right:24px;bottom:58px}
.box-b{right:-35px;bottom:148px}

/* Ceiling plumbing makes the upper wall feel like a basement. */
.office-pipe{
  position:absolute;
  z-index:1;
  pointer-events:none;
}
.pipe-main{
  left:-28px;
  top:33px;
  width:430px;
  height:28px;
  border:3px solid rgba(52,43,99,.48);
  border-left:0;
  border-radius:0 14px 14px 0;
  background:linear-gradient(to bottom,#b8afbf,#ddd6df 45%,#958a9d 100%);
  box-shadow:0 5px 0 rgba(52,43,99,.07);
}
.pipe-main::after{
  content:"";
  position:absolute;
  right:-16px;
  top:8px;
  width:20px;
  height:145px;
  border:3px solid rgba(52,43,99,.48);
  border-top:0;
  border-radius:0 0 11px 11px;
  background:linear-gradient(90deg,#9f95a6,#d9d2db 52%,#8c8295);
}
.pipe-main i,.pipe-main b{
  position:absolute;
  top:-7px;
  width:12px;
  height:36px;
  border:2px solid rgba(52,43,99,.38);
  background:#b0a6b5;
}
.pipe-main i{left:86px}.pipe-main b{left:282px}

/* Clock is boring office equipment until you notice it never moved. */
.office-clock{
  position:absolute;
  right:278px;
  top:91px;
  width:76px;
  height:76px;
  border-radius:50%;
  border:4px solid #f3ece7;
  outline:2px solid #342B63;
  background:#fffaf4;
  box-shadow:4px 5px 0 rgba(52,43,99,.10);
}
.office-clock::before{
  content:"12";
  position:absolute;
  left:50%;
  top:6px;
  transform:translateX(-50%);
  font:700 7px "Courier New",monospace;
}
.office-clock span{
  position:absolute;
  right:7px;
  top:33px;
  font:700 7px "Courier New",monospace;
}
.office-clock i,.office-clock b{
  position:absolute;
  left:35px;
  top:35px;
  width:2px;
  background:#342B63;
  transform-origin:bottom center;
}
.office-clock i{height:24px;transform:translateY(-24px) rotate(132deg)}
.office-clock b{height:18px;transform:translateY(-18px) rotate(202deg)}
.office-clock em{
  position:absolute;
  left:50%;
  bottom:-22px;
  transform:translateX(-50%);
  font:700 8px "Courier New",monospace;
  font-style:normal;
  background:#FFF9F3;
  padding:2px 4px;
  border:1px solid rgba(52,43,99,.34);
}

/* Old wall intercom. */
.office-intercom{
  position:absolute;
  right:284px;
  top:205px;
  width:61px;
  height:82px;
  padding:8px;
  background:#d7d0d8;
  border:2px solid #342B63;
  box-shadow:4px 4px 0 rgba(52,43,99,.09);
}
.office-intercom i{
  display:block;
  width:100%;
  height:31px;
  background:repeating-linear-gradient(to bottom,#8b8192 0 2px,transparent 2px 5px);
  border:1px solid rgba(52,43,99,.3);
}
.office-intercom span{
  position:absolute;
  left:10px;
  bottom:10px;
  width:13px;
  height:13px;
  border-radius:50%;
  background:#F4A6C6;
  border:1px solid #342B63;
}
.office-intercom b{
  position:absolute;
  right:10px;
  bottom:13px;
  width:18px;
  height:6px;
  background:#342B63;
  opacity:.55;
}

/* Mundane bureaucratic warning = stronger than another spooky decoration. */
.evidence-notice{
  position:absolute;
  right:34px;
  top:276px;
  width:158px;
  padding:10px 8px 9px;
  text-align:center;
  background:#f4eee7;
  border:2px solid #342B63;
  box-shadow:3px 4px 0 rgba(52,43,99,.08);
  transform:rotate(1.2deg);
  font:800 11px/1.25 "Courier New",monospace;
  letter-spacing:.04em;
}
.evidence-notice small{
  font-size:8px;
  letter-spacing:.07em;
}

/* Just a sliver of another room/door: the basement continues. */
.basement-door-edge{
  position:absolute;
  right:-58px;
  top:375px;
  width:126px;
  height:315px;
  background:#a99cae;
  border:3px solid #342B63;
  box-shadow:inset 11px 0 0 rgba(255,249,243,.15);
}
.basement-door-edge::before{
  content:"";
  position:absolute;
  left:18px;
  top:138px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#F6D978;
  border:2px solid #342B63;
}
.basement-door-edge span{
  position:absolute;
  left:14px;
  top:22px;
  padding:4px 6px;
  background:#FFF9F3;
  border:1px solid #342B63;
  font:700 9px "Courier New",monospace;
}

/* A couple of pieces of clutter now have gravity and jobs. */
.floor-paper{
  position:absolute;
  left:352px;
  bottom:34px;
  width:102px;
  height:67px;
  padding:10px 9px;
  background:#FFF9F3;
  border:1px solid rgba(52,43,99,.48);
  box-shadow:3px 3px 0 rgba(52,43,99,.07);
  transform:rotate(-7deg) skewX(-3deg);
  font:700 8px/1.35 "Courier New",monospace;
}
.floor-paper small{font-size:7px;font-weight:400}

.office-id-card{
  position:absolute;
  left:251px;
  bottom:195px;
  width:79px;
  height:49px;
  padding:6px 5px 4px 27px;
  background:#FFF9F3;
  border:1px solid #342B63;
  transform:rotate(5deg);
  box-shadow:2px 2px 0 rgba(52,43,99,.08);
}
.office-id-card i{
  position:absolute;
  left:6px;
  top:8px;
  width:16px;
  height:20px;
  background:#B8A7E8;
  border:1px solid #342B63;
}
.office-id-card span,.office-id-card small{
  display:block;
  font:700 6px/1.3 "Courier New",monospace;
}
.office-id-card small{font-size:5px;font-weight:400;margin-top:3px}

/* Slight atmospheric falloff: the room gets stranger toward the edges. */
.paranormal-office::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  box-shadow:
    inset 65px 0 75px rgba(52,43,99,.035),
    inset -75px 0 90px rgba(52,43,99,.06),
    inset 0 -65px 80px rgba(52,43,99,.035);
}

/* Make the fluorescent light feel a tiny bit unreliable without being annoying. */
@keyframes archive-flicker{
  0%,94%,100%{opacity:1}
  95%{opacity:.76}
  96%{opacity:1}
  97%{opacity:.88}
  98%{opacity:1}
}
.ceiling-light{animation:archive-flicker 9s steps(1,end) infinite}

/* Responsive adjustments for the more complete room. */
@media(max-width:900px){
  .cabinet-scene .cabinet-shell{
    transform:translateX(105px) scale(.72);
    margin-top:245px;
  }
  .office-sign{left:28px;width:275px}
  .office-bulletin{left:27px;width:235px}
  .office-clock{right:215px}
  .office-intercom{right:220px}
  .office-night-window{right:28px;width:160px}
  .evidence-notice{right:25px;width:140px}
  .office-desk{left:-35px}
}
@media(max-width:700px){
  .cabinet-scene{min-height:835px}
  .cabinet-scene .cabinet-shell{
    transform:translateX(55px) scale(.68);
    margin-top:260px;
  }
  .office-clock{right:170px;transform:scale(.85)}
  .office-intercom{display:none}
  .evidence-notice{top:255px}
  .office-bulletin{top:275px;opacity:.72}
  .office-desk{left:-65px;transform:scale(.82);transform-origin:left bottom}
  .basement-door-edge{opacity:.65}
}
@media(max-width:520px){
  .cabinet-scene{min-height:760px}
  .cabinet-scene .cabinet-shell{
    transform:translateX(20px) scale(.61);
    margin-top:250px;
  }
  .office-sign{left:15px;width:205px}
  .office-clock{right:120px;top:115px;transform:scale(.72)}
  .office-night-window{right:12px;width:102px;height:102px}
  .evidence-notice{right:10px;top:235px;width:116px;font-size:9px}
  .office-bulletin{left:-42px;top:275px;opacity:.38}
  .office-desk{left:-115px;opacity:.78}
  .floor-paper,.office-id-card{display:none}
}


/* =========================================================
   CABINET V4.20 — NIGHT SHIFT
   The archive is not merely decorated. It is operating.
   ========================================================= */

/* Keep the established room composition. This pass is behavior + patina. */
.cabinet-scene{
  background:
    linear-gradient(90deg,rgba(52,43,99,.032) 1px,transparent 1px) 0 0/52px 100%,
    linear-gradient(to bottom,#d9d2eb 0 66%,#d2c1d2 66% 68%,#d5c6c3 68% 100%);
}

/* Age the institutional surfaces just a little. */
.office-sign,
.evidence-notice,
.board-paper,
.floor-paper,
.office-id-card{
  filter:saturate(.88);
}
.office-sign{transform:rotate(-1.15deg)}
.evidence-notice{transform:rotate(1.65deg)}
.office-bulletin{transform:rotate(.8deg)}
.archive-box.box-a{transform:rotate(1.5deg)}
.archive-box.box-b{transform:rotate(-2.6deg)}

/* A tiny live-status lamp on the desk. */
.desk-status-light{
  position:absolute;
  left:157px;
  top:29px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#79D9DC;
  border:1px solid #342B63;
  box-shadow:0 0 7px rgba(121,217,220,.75);
  animation:archive-status 7s steps(1,end) infinite;
}
@keyframes archive-status{
  0%,71%,75%,100%{opacity:1}
  72%,74%{opacity:.18}
  73%{opacity:.75}
}

/* The CRT breathes so faintly it should register subconsciously. */
.crt-screen{
  overflow:hidden;
  animation:crt-breathe 5.7s ease-in-out infinite;
}
.crt-screen::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.11;
  background:repeating-linear-gradient(
    to bottom,
    transparent 0 3px,
    rgba(255,255,255,.16) 4px,
    transparent 5px
  );
}
@keyframes crt-breathe{
  0%,100%{filter:brightness(.96)}
  50%{filter:brightness(1.08)}
}

/* JS adds this class only for a moment: a paper reacts to an impossible draft. */
.archive-draft-paper.archive-paper-moved{
  animation:archive-paper-draft 1.8s ease-in-out 1;
}
@keyframes archive-paper-draft{
  0%,100%{transform:rotate(-3deg) translate(0,0)}
  35%{transform:rotate(-2.2deg) translate(2px,-1px)}
  68%{transform:rotate(-3.6deg) translate(-1px,0)}
}

/* The drawer twitch is intentionally microscopic and rare. */
.cabinet-drawer.archive-drawer-twitch{
  animation:archive-drawer-twitch .85s ease-in-out 1!important;
}
@keyframes archive-drawer-twitch{
  0%,100%{transform:translateX(0)}
  35%{transform:translateX(3px)}
  58%{transform:translateX(1px)}
  75%{transform:translateX(4px)}
}

/* Ghost Employee can go "on assignment" without a dramatic animation. */
.cabinet-ghost-resident.archive-ghost-away{
  opacity:0!important;
  transform:translateY(19px)!important;
  transition:opacity .45s ease,transform .55s ease!important;
}

/* Clock remains fixed at 4:44. A tiny glow makes it suspicious only sometimes. */
.office-clock{
  animation:clock-suspicion 17s ease-in-out infinite;
}
@keyframes clock-suspicion{
  0%,82%,100%{box-shadow:4px 5px 0 rgba(52,43,99,.10)}
  87%{box-shadow:4px 5px 0 rgba(52,43,99,.10),0 0 14px rgba(246,217,120,.17)}
}

/* Let the room's edge feel a little deeper at night. */
.paranormal-office::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(ellipse at 52% 49%,transparent 45%,rgba(52,43,99,.035) 100%);
}

/* Respect reduced-motion preferences: the archive becomes perfectly still. */
@media(prefers-reduced-motion:reduce){
  .ceiling-light,
  .desk-status-light,
  .crt-screen,
  .office-clock,
  .archive-draft-paper.archive-paper-moved,
  .cabinet-drawer.archive-drawer-twitch{
    animation:none!important;
  }
  .cabinet-ghost-resident.archive-ghost-away{
    opacity:1!important;
    transform:none!important;
  }
}


/* =========================================================
   CABINET V4.21 — PIPE DREAM
   Surgical polish: believable basement plumbing + softer room contact.
   ========================================================= */

/* Replace the oversized hooked pipe with infrastructure that continues
   beyond the frame. The basement should feel bigger than the viewport. */
.pipe-main{
  left:-34px;
  right:-34px;
  top:38px;
  width:auto;
  height:18px;
  border:2px solid rgba(52,43,99,.42);
  border-left:0;
  border-right:0;
  border-radius:0;
  background:
    linear-gradient(to bottom,
      #aaa1b0 0%,
      #d8d1da 34%,
      #beb5c2 58%,
      #918798 100%);
  box-shadow:
    0 4px 0 rgba(52,43,99,.055),
    inset 0 1px rgba(255,249,243,.42);
  opacity:.88;
}

/* The old giant right-hand hook is gone. */
.pipe-main::after{
  content:"";
  position:absolute;
  left:74%;
  right:auto;
  top:15px;
  width:13px;
  height:108px;
  border:2px solid rgba(52,43,99,.38);
  border-top:0;
  border-radius:0 0 7px 7px;
  background:
    linear-gradient(90deg,
      #8f8596 0%,
      #d3ccd6 45%,
      #9b91a1 100%);
  box-shadow:3px 0 0 rgba(52,43,99,.045);
}

/* Couplings are narrow and functional rather than decorative blocks. */
.pipe-main i,
.pipe-main b{
  top:-5px;
  width:9px;
  height:27px;
  border:1.5px solid rgba(52,43,99,.36);
  background:
    linear-gradient(90deg,#968c9d,#c8c0cb 50%,#8d8394);
  box-shadow:1px 0 rgba(255,249,243,.24);
}
.pipe-main i{left:19%}
.pipe-main b{left:61%}

/* A tiny shutoff valve on the branch gives the plumbing a reason to exist. */
.pipe-main::before{
  content:"+";
  position:absolute;
  left:calc(74% - 7px);
  top:75px;
  z-index:2;
  width:24px;
  height:24px;
  border:2px solid rgba(52,43,99,.46);
  border-radius:50%;
  background:#b7acb9;
  color:#6d6276;
  text-align:center;
  font:700 20px/20px "Courier New",monospace;
  transform:rotate(45deg);
  box-shadow:2px 2px 0 rgba(52,43,99,.06);
}

/* Let the fluorescent fixture sit below the plumbing instead of tangling
   visually with it. */
.ceiling-light{
  top:72px;
  width:270px;
  height:15px;
  opacity:.94;
}

/* Move the top-wall office elements down just enough to accommodate the pipe. */
.office-sign{top:112px}
.office-night-window{top:111px}
.office-clock{top:120px}
.office-intercom{top:226px}

/* Gentle age: slightly imperfect corners and quieter shadows. */
.office-sign,
.evidence-notice,
.office-bulletin,
.office-night-window,
.crt,
.archive-box{
  box-shadow:4px 5px 0 rgba(52,43,99,.085);
}
.office-sign{border-radius:1px 3px 2px 1px}
.evidence-notice{border-radius:2px 1px 3px 1px}
.crt{border-radius:7px 9px 4px 5px}

/* Cabinet/desk contact: make furniture feel planted on the same floor. */
.cabinet-shell::after{
  bottom:-25px;
  height:22px;
  left:10%;
  right:10%;
  opacity:.78;
}
.office-desk::after{
  content:"";
  position:absolute;
  left:24px;
  right:-5px;
  bottom:-24px;
  height:22px;
  z-index:-1;
  border-radius:50%;
  background:radial-gradient(ellipse at center,
    rgba(52,43,99,.15) 0%,
    rgba(52,43,99,.055) 48%,
    transparent 74%);
  filter:blur(4px);
}

/* Archive boxes get tiny floor shadows too, not floating sticker shadows. */
.archive-box::after{
  content:"";
  position:absolute;
  left:7px;
  right:7px;
  bottom:-10px;
  height:9px;
  z-index:-1;
  border-radius:50%;
  background:rgba(52,43,99,.09);
  filter:blur(3px);
}

/* Responsive pipe remains a continuous architectural line. */
@media(max-width:900px){
  .pipe-main::after{left:70%;height:92px}
  .pipe-main::before{left:calc(70% - 7px);top:64px}
  .office-sign{top:110px}
  .office-night-window{top:110px}
  .office-clock{top:124px}
}
@media(max-width:700px){
  .pipe-main::after{left:66%;height:82px}
  .pipe-main::before{left:calc(66% - 7px);top:56px;transform:rotate(45deg) scale(.88)}
  .ceiling-light{width:215px}
}
@media(max-width:520px){
  .pipe-main{top:34px}
  .pipe-main::after{left:63%;height:70px}
  .pipe-main::before{display:none}
  .ceiling-light{top:66px;width:170px}
  .office-sign{top:104px}
  .office-night-window{top:105px}
}


/* =========================================================
   CABINET V4.22 — QUIET SECRETS
   Final-room polish: depth, patina, and curiosity rewards.
   ========================================================= */

/* A little more floor depth, without adding another object. */
.cabinet-scene{
  background:
    linear-gradient(90deg,rgba(52,43,99,.032) 1px,transparent 1px) 0 0/52px 100%,
    linear-gradient(to bottom,#d9d2eb 0 66%,#d2c1d2 66% 68%,#d5c6c3 68% 100%);
}
.paranormal-office{
  background:
    linear-gradient(to bottom,transparent 0 68%,rgba(52,43,99,.015) 68% 100%);
}
.paranormal-office::after{
  background:
    radial-gradient(ellipse at 54% 90%,rgba(255,249,243,.10) 0%,transparent 38%),
    linear-gradient(to bottom,transparent 64%,rgba(52,43,99,.018) 100%),
    radial-gradient(ellipse at 52% 49%,transparent 44%,rgba(52,43,99,.045) 100%);
}

/* Very faint floor seams suggest perspective instead of a flat color field. */
.floor-cable::after{
  content:"";
  position:absolute;
  z-index:-3;
  pointer-events:none;
  left:-620px;
  top:-18px;
  width:900px;
  height:180px;
  opacity:.14;
  background:
    linear-gradient(102deg,transparent 49.6%,rgba(52,43,99,.16) 50%,transparent 50.4%) 0 0/190px 100%,
    linear-gradient(78deg,transparent 49.6%,rgba(52,43,99,.12) 50%,transparent 50.4%) 0 0/230px 100%;
}

/* Tiny institutional wear: nothing grimy, just "this office has existed awhile." */
.office-clock::after{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:50%;
  pointer-events:none;
  background:
    radial-gradient(circle at 28% 19%,rgba(52,43,99,.07) 0 1px,transparent 1.5px),
    radial-gradient(circle at 72% 68%,rgba(52,43,99,.045) 0 1px,transparent 1.5px);
}
.office-intercom::after{
  content:"";
  position:absolute;
  left:5px;
  right:5px;
  bottom:4px;
  height:1px;
  background:rgba(52,43,99,.16);
  transform:rotate(-1deg);
}
.office-bulletin::after{
  content:"";
  position:absolute;
  inset:4px;
  pointer-events:none;
  border:1px dashed rgba(52,43,99,.07);
}

/* Secrets look like scenery. Pointer cursor is the only overt clue on desktop. */
.ghost-secret{
  pointer-events:auto!important;
  cursor:pointer;
}
.ghost-secret:focus-visible{
  outline:2px dashed #F6D978;
  outline-offset:4px;
}

/* Window response: no popup, just a tiny impossible change. */
.office-night-window.secret-awake{
  box-shadow:
    7px 7px 0 rgba(52,43,99,.12),
    0 0 22px rgba(121,217,220,.22);
}
.office-night-window.secret-awake .window-moon{
  animation:moon-notice 1.8s ease-in-out 1;
}
@keyframes moon-notice{
  0%,100%{transform:translate(0,0)}
  45%{transform:translate(-4px,2px) scale(1.05)}
  68%{transform:translate(-3px,1px) scale(1.02)}
}

/* B-44 refuses access, politely and bureaucratically. */
.basement-door-edge.secret-denied{
  animation:b44-rattle .72s ease-in-out 1;
}
@keyframes b44-rattle{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-2px)}
  40%{transform:translateX(2px)}
  62%{transform:translateX(-1px)}
  80%{transform:translateX(1px)}
}
.basement-door-edge.secret-denied::after{
  content:"ACCESS DENIED";
  position:absolute;
  left:10px;
  top:62px;
  padding:5px 6px;
  background:#342B63;
  color:#F8D5E4;
  border:1px solid #FFF9F3;
  font:700 7px/1 "Courier New",monospace;
  letter-spacing:.05em;
  transform:rotate(-2deg);
}

/* Whisper messages appear inside the environment, then vanish. */
.archive-whisper{
  position:absolute;
  z-index:40;
  opacity:0;
  pointer-events:none;
  padding:6px 8px;
  color:#342B63;
  background:rgba(255,249,243,.92);
  border:1px solid rgba(52,43,99,.42);
  box-shadow:3px 3px 0 rgba(52,43,99,.07);
  font:700 7px/1.3 "Courier New",monospace;
  letter-spacing:.035em;
  transition:opacity .28s ease,transform .28s ease;
}
.archive-whisper.show{opacity:1;transform:translateY(-3px)}
.archive-whisper-window{right:76px;top:258px;transform:translateY(0) rotate(1deg)}
.archive-whisper-door{right:25px;top:548px;transform:translateY(0) rotate(-1deg)}

/* Preserve the "did that happen?" quality. */
@media(prefers-reduced-motion:reduce){
  .office-night-window.secret-awake .window-moon,
  .basement-door-edge.secret-denied{animation:none!important}
}
@media(max-width:700px){
  .archive-whisper-window{right:20px;top:238px}
  .archive-whisper-door{right:8px;top:515px}
}


/* V4.22.2 — make the visible B-44 sliver a reliable hit target.
   It remains visually tucked behind the cabinet, but sits above it for clicks. */
.basement-door-edge.ghost-secret{
  z-index:31!important;
  pointer-events:auto!important;
  cursor:pointer!important;
}
.office-night-window.ghost-secret{
  z-index:31!important;
  pointer-events:auto!important;
  cursor:pointer!important;
}
.archive-whisper{
  z-index:45!important;
}

/* V5.0 GHOST GIRL'S ROOM — homepage only */
.ghost-bedroom-page{background:radial-gradient(circle at 15% 12%,rgba(246,217,120,.3),transparent 22%),linear-gradient(180deg,#e7dff5,#f8d5e4 45%,#f4a6c6 72%,#cdecf1);background-attachment:fixed}
.bedroom-site{position:relative;overflow:hidden;background:rgba(255,249,243,.88);border:2px solid #342b63;box-shadow:10px 12px 0 rgba(52,43,99,.1)}
.bedroom-shell{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}.bedroom-site>*:not(.bedroom-shell){position:relative;z-index:2}
.bedroom-window{position:absolute;right:28px;top:155px;width:205px;height:145px;border:8px solid #fff9f3;outline:2px solid #342b63;box-shadow:7px 8px 0 rgba(52,43,99,.1);overflow:hidden}
.bedroom-window:before,.bedroom-window:after{content:"";position:absolute;z-index:5;background:#fff9f3}.bedroom-window:before{left:50%;top:0;bottom:0;width:6px}.bedroom-window:after{left:0;right:0;top:53%;height:6px}
.bedroom-sky{position:absolute;inset:0;background:radial-gradient(circle at 74% 22%,#f6d978 0 8%,transparent 9%),linear-gradient(#9676d3,#b8a7e8 30%,#f4a6c6 68%,#f6d978)}
.bedroom-sky i{position:absolute;right:22px;top:12px;color:#fff9f3;font-size:26px;font-style:normal}.bedroom-sky b{position:absolute;color:#fff9f3}.bedroom-sky b:nth-child(2){left:30px;top:24px}.bedroom-sky b:nth-child(3){left:78px;top:43px}
.palm-silhouette{position:absolute;left:20px;bottom:-14px;font-size:76px;filter:grayscale(1) brightness(.25) sepia(.2);transform:rotate(-4deg)}
.bedroom-wall-note{position:absolute;left:25px;top:165px;padding:9px 11px;background:#f6d978;color:#342b63;border:1px solid rgba(52,43,99,.35);font:700 9px/1.25 "Courier New";transform:rotate(-3deg);box-shadow:3px 4px rgba(52,43,99,.08)}
.bedroom-wall-note small{font-weight:400}.hanging-stars{position:absolute;left:47%;top:155px;color:#9676d3;font-size:18px;letter-spacing:10px}
.wall-cd{position:absolute;right:270px;top:180px;width:50px;height:50px;border-radius:50%;background:conic-gradient(#f4a6c6,#f6d978,#79d9dc,#b8a7e8,#f4a6c6);opacity:.4;box-shadow:inset 0 0 0 16px #fff9f3;border:1px solid #342b63}
.ghost-bedroom-page .top{background:linear-gradient(90deg,#f8d5e4,#cdecf1);border-bottom:2px solid #342b63}
.ghost-bedroom-page .masthead-v4{background:radial-gradient(circle at 50% 20%,rgba(255,249,243,.9),transparent 34%),linear-gradient(135deg,rgba(248,213,228,.5),rgba(231,223,245,.4),rgba(205,236,241,.45))}
.ghost-bedroom-page .ticker{background:linear-gradient(90deg,#f6d978,#f8d5e4,#cdecf1,#e7dff5,#f6d978);color:#342b63;border-block:2px solid #342b63}
.ghost-bedroom-page .window-box h2{background:linear-gradient(90deg,#b8a7e8,#f4a6c6 55%,#79d9dc);color:#342b63}
.ghost-bedroom-page .box,.ghost-bedroom-page .post{box-shadow:5px 6px 0 rgba(52,43,99,.08)}
.desk-strip{margin:-1px -1px 13px;padding:5px 8px;display:flex;justify-content:space-between;background:linear-gradient(90deg,#342b63,#9676d3);color:#fff9f3;font:700 8px "Courier New"}
.bedroom-note{width:122px;margin:0 auto 18px;padding:12px 10px;background:#f6d978;color:#342b63;border:1px solid rgba(52,43,99,.35);font-family:"Courier New";transform:rotate(-2.5deg);box-shadow:4px 5px rgba(52,43,99,.07)}
.bedroom-note span,.bedroom-note small{display:block;font-size:8px}.bedroom-note b{display:block;margin:5px 0;font-size:13px;line-height:1.05}
.cd-stack{position:relative;height:65px;margin:2px 6px 17px;color:#342b63;font-family:"Courier New"}.cd-stack i{position:absolute;left:7px;right:4px;height:19px;padding:4px 7px;border:1px solid rgba(52,43,99,.4);font-style:normal;font-size:7px;box-shadow:2px 3px rgba(52,43,99,.06)}.cd-stack i:nth-child(1){top:0;background:#f8d5e4;transform:rotate(2deg)}.cd-stack i:nth-child(2){top:20px;background:#e7dff5;transform:rotate(-1deg)}.cd-stack i:nth-child(3){top:40px;background:#cdecf1;transform:rotate(1deg)}
.daily-tarot{text-align:center}.tarot-date{font:8px "Courier New";color:#6f6590}.tarot-deck{width:116px;height:178px;margin:5px auto 7px;display:block;position:relative;border:0;background:transparent;perspective:700px;cursor:pointer}.tarot-card-back,.tarot-card-front{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;backface-visibility:hidden;transition:transform .75s;border:2px solid #342b63;border-radius:8px;box-shadow:5px 6px rgba(52,43,99,.12)}.tarot-card-back{background:repeating-radial-gradient(circle,transparent 0 12px,rgba(255,249,243,.34) 13px 14px),linear-gradient(145deg,#9676d3,#f4a6c6 52%,#79d9dc);color:#342b63}.tarot-card-back i{font-size:38px;color:#f6d978;font-style:normal}.tarot-card-back b{margin:8px;font:700 11px/1 "Courier New"}.tarot-card-back em{font:700 8px "Courier New"}.tarot-card-front{transform:rotateY(180deg);padding:9px;background:linear-gradient(#fff9f3,#f8d5e4);color:#342b63}.tarot-card-front i{font-style:normal;font-size:42px;color:#9676d3;margin-bottom:10px}.tarot-card-front b{font:700 12px "Courier New"}.tarot-card-front em{margin-top:10px;font:italic 7px/1.3 "Courier New"}.daily-tarot.is-drawn .tarot-card-back{transform:rotateY(-180deg)}.daily-tarot.is-drawn .tarot-card-front{transform:rotateY(0)}.tarot-draw{border:0;background:none;color:#342b63;text-decoration:underline;font:700 8px "Courier New";cursor:pointer}.tarot-whisper{display:block;min-height:20px;margin-top:5px;font:7px "Courier New";color:#6f6590}
@media(max-width:900px){.bedroom-window{opacity:.28;right:-55px}.bedroom-wall-note,.wall-cd,.hanging-stars{display:none}}@media(max-width:700px){.bedroom-window{display:none}}


/* =========================================================
   V5.1 — GHOST GIRL ACTUALLY LIVES HERE
   The homepage becomes a room instead of a website over wallpaper.
   ========================================================= */
.ghost-bedroom-page{
  --room-ink:#342B63;
  --room-pink:#F4A6C6;
  --room-lav:#B8A7E8;
  --room-lilac:#9676D3;
  --room-aqua:#79D9DC;
  --room-yellow:#F6D978;
  --room-paper:#FFF9F3;
  --room-soft:#F8D5E4;
  background:linear-gradient(180deg,#a894da 0,#d9b3d8 32%,#efb4ca 62%,#e7c3c8 100%);
}
.ghost-bedroom-page .bedroom-shell{display:none!important}

/* Pull the old site frame into the room rather than placing the room behind it. */
.ghost-bedroom-page .bedroom-site{
  max-width:1180px;
  background:transparent;
  border:0;
  box-shadow:none;
  overflow:visible;
}
.ghost-bedroom-page .top{
  border:2px solid var(--room-ink);
  border-bottom:0;
  border-radius:12px 12px 0 0;
  box-shadow:7px 8px 0 rgba(52,43,99,.12);
  background:linear-gradient(90deg,rgba(248,213,228,.96),rgba(205,236,241,.95));
}
.ghost-bedroom-page .masthead-v4{
  border-inline:2px solid var(--room-ink);
  background:rgba(255,249,243,.82);
  backdrop-filter:blur(2px);
}
.ghost-bedroom-page .ticker{
  border:2px solid var(--room-ink);
  box-shadow:7px 8px 0 rgba(52,43,99,.09);
}

/* THE ROOM */
.ghost-bedroom-room{
  position:relative;
  min-height:690px;
  margin:22px 0 0;
  overflow:hidden;
  border:2px solid var(--room-ink);
  border-radius:4px 4px 12px 12px;
  box-shadow:10px 12px 0 rgba(52,43,99,.12),0 28px 55px rgba(52,43,99,.12);
  background:
    linear-gradient(90deg,rgba(255,249,243,.06) 1px,transparent 1px) 0 0/48px 100%,
    linear-gradient(180deg,#e7dff5 0 64%,#d5b7c4 64% 66%,#caa8aa 66% 100%);
}
.ghost-bedroom-room::before{
  content:"";
  position:absolute;left:0;right:0;top:64%;height:2px;background:rgba(52,43,99,.24)
}
.ghost-bedroom-room::after{
  content:"";
  position:absolute;left:-10%;right:-10%;bottom:-110px;height:280px;
  background:repeating-linear-gradient(96deg,transparent 0 105px,rgba(52,43,99,.075) 107px 109px);
  transform:perspective(300px) rotateX(58deg);transform-origin:bottom;opacity:.65
}
.room-ceiling{position:absolute;inset:0 0 auto;height:45px;border-bottom:1px solid rgba(52,43,99,.13);background:linear-gradient(#d8d0ea,#e7dff5)}
.room-ceiling::after{content:"";position:absolute;left:38%;top:10px;width:240px;height:13px;border:2px solid rgba(52,43,99,.25);background:#fff9e8;box-shadow:0 0 24px rgba(246,217,120,.36)}
.glow-star{position:absolute;color:#9676d3}.star-a{left:12%;top:18px}.star-b{right:17%;top:13px}.star-c{right:8%;top:23px;color:#f4a6c6}
.room-left-wall{position:absolute;left:28px;top:88px;width:185px;height:250px}
.y2k-poster{position:absolute;left:3px;top:4px;width:112px;height:144px;padding:16px 10px;border:2px solid var(--room-ink);background:linear-gradient(155deg,#79d9dc,#f8d5e4 48%,#f6d978);box-shadow:5px 6px 0 rgba(52,43,99,.09);transform:rotate(-2deg);font:700 14px/1.05 "Courier New",monospace;color:var(--room-ink);text-align:center}
.y2k-poster::before{content:"☺";display:block;font-size:31px;margin-bottom:9px}.y2k-poster small{display:block;margin-top:11px;font-size:6px;line-height:1.35}
.photo-strip{position:absolute;right:0;top:22px;width:43px;padding:5px;background:#fff9f3;border:1px solid rgba(52,43,99,.4);transform:rotate(4deg);box-shadow:3px 4px rgba(52,43,99,.07)}
.photo-strip i{display:flex;height:35px;margin-bottom:4px;align-items:center;justify-content:center;background:#b8a7e8;color:#fff9f3;font-style:normal}.photo-strip i:nth-child(2){background:#f4a6c6}.photo-strip i:nth-child(3){background:#79d9dc}
.wall-scribble{position:absolute;left:19px;top:178px;color:#9676d3;font:italic 16px/1 "Courier New",monospace;transform:rotate(-4deg)}.wall-scribble small{font-size:8px}

/* Window is now a major architectural feature. */
.miami-bedroom-window{position:absolute;right:55px;top:82px;width:345px;height:272px;border:11px solid #fff9f3;outline:2px solid var(--room-ink);background:#9676d3;box-shadow:9px 10px 0 rgba(52,43,99,.11),inset 0 0 0 2px rgba(52,43,99,.25)}
.window-sunset{position:absolute;inset:0;overflow:hidden;background:linear-gradient(180deg,#7762ba 0,#a57bd0 27%,#ed8fb9 61%,#f6c66d 86%,#79d9dc 100%)}
.window-sunset::after{content:"";position:absolute;left:-5%;right:-5%;bottom:0;height:38px;background:linear-gradient(180deg,#79d9dc,#4caeb9);opacity:.75}
.sun-disc{position:absolute;right:55px;top:82px;width:58px;height:58px;border-radius:50%;background:#f6d978;box-shadow:0 0 25px rgba(246,217,120,.72)}
.sky-star{position:absolute;color:#fff9f3}.sky-one{left:63px;top:42px;font-size:18px}.sky-two{left:128px;top:73px;font-size:24px}
.palm-tree{position:absolute;bottom:10px;color:#342b63;font-size:88px;line-height:.7;transform:scaleX(.72) rotate(-7deg);transform-origin:bottom;filter:drop-shadow(2px 2px rgba(52,43,99,.08))}.palm-one{left:20px}.palm-two{left:115px;font-size:65px;transform:scaleX(.7) rotate(8deg)}
.window-cross{position:absolute;z-index:5;background:#fff9f3}.cross-v{top:0;bottom:0;left:50%;width:7px}.cross-h{left:0;right:0;top:52%;height:7px}
.window-sill{position:absolute;z-index:7;left:-15px;right:-15px;bottom:-22px;height:22px;border:2px solid var(--room-ink);background:#f8d5e4;text-align:center;color:#342b63;font:700 6px/18px "Courier New",monospace;letter-spacing:.08em}
.curtain{position:absolute;z-index:8;top:-12px;bottom:-12px;width:52px;background:repeating-linear-gradient(90deg,#b8a7e8 0 9px,#cbbcf0 10px 18px);opacity:.88}.curtain-left{left:-34px;border-radius:0 0 65% 0}.curtain-right{right:-34px;border-radius:0 0 0 65%}

/* Bed: Miami/Y2K rather than generic dark bedroom. */
.room-bed{position:absolute;right:40px;bottom:55px;width:385px;height:210px;z-index:3}
.bed-headboard{position:absolute;right:5px;top:7px;width:355px;height:105px;border:3px solid var(--room-ink);border-radius:60px 60px 6px 6px;background:linear-gradient(135deg,#9676d3,#b8a7e8);box-shadow:6px 6px rgba(52,43,99,.09)}
.bed-pillow{position:absolute;z-index:4;top:47px;width:120px;height:62px;border:2px solid var(--room-ink);border-radius:48%;background:#fff9f3;box-shadow:3px 4px rgba(52,43,99,.06)}.pillow-one{left:46px;transform:rotate(-5deg)}.pillow-two{left:145px;background:#f8d5e4;transform:rotate(4deg);display:flex;align-items:center;justify-content:center;color:#9676d3;font-size:25px}
.bed-blanket{position:absolute;z-index:5;left:10px;right:0;bottom:18px;height:110px;border:2px solid var(--room-ink);border-radius:45px 20px 8px 8px;background:linear-gradient(145deg,#f4a6c6,#b8a7e8 52%,#79d9dc);box-shadow:7px 8px rgba(52,43,99,.1);overflow:hidden}.bed-blanket::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 22px,rgba(255,249,243,.12) 23px 25px)}.bed-blanket span{position:absolute;right:35px;top:40px;color:#fff9f3;font-size:18px;letter-spacing:9px}
.bed-skirt{position:absolute;left:28px;right:8px;bottom:0;height:37px;background:#e8a7c3;border:2px solid var(--room-ink);z-index:2}
.bedside-stack{position:absolute;left:-55px;bottom:2px;width:70px}.bedside-stack i{display:block;height:16px;border:1px solid var(--room-ink);background:#f6d978;transform:rotate(-2deg)}.bedside-stack i:nth-child(2){background:#79d9dc;transform:rotate(2deg)}.bedside-stack i:nth-child(3){background:#f8d5e4}

/* Desk on left gives existing content a physical anchor. */
.room-desk-scene{position:absolute;left:220px;bottom:56px;width:410px;height:230px;z-index:4}
.desk-top{position:absolute;left:0;right:0;bottom:95px;height:25px;border:3px solid var(--room-ink);border-radius:4px;background:#d6b0c8;box-shadow:7px 8px rgba(52,43,99,.1)}
.desk-leg{position:absolute;bottom:0;width:22px;height:98px;border:3px solid var(--room-ink);border-top:0;background:#c49bb8}.leg-left{left:28px}.leg-right{right:27px}
.desk-lamp{position:absolute;left:30px;bottom:120px;width:90px;height:105px}.desk-lamp b{position:absolute;left:41px;bottom:0;width:8px;height:68px;background:#342b63}.desk-lamp i{position:absolute;left:17px;top:2px;width:62px;height:40px;border:2px solid #342b63;border-radius:50% 50% 10% 10%;background:#f6d978;transform:rotate(-8deg);box-shadow:0 13px 25px rgba(246,217,120,.24)}
.translucent-phone{position:absolute;right:72px;bottom:120px;width:67px;height:42px;border:2px solid #342b63;border-radius:14px 14px 7px 7px;background:rgba(121,217,220,.68);box-shadow:3px 4px rgba(52,43,99,.08);display:flex;align-items:center;justify-content:center;color:#342b63;font-size:21px;transform:rotate(2deg)}
.desk-cd{position:absolute;right:155px;bottom:124px;width:47px;height:47px;border-radius:50%;border:2px solid #342b63;background:conic-gradient(#f4a6c6,#f6d978,#79d9dc,#9676d3,#f4a6c6);box-shadow:inset 0 0 0 15px #fff9f3;transform:rotate(-7deg)}
.desk-cup{position:absolute;left:142px;bottom:119px;width:42px;height:49px;border:2px solid #342b63;border-radius:4px 4px 12px 12px;background:#f8d5e4;text-align:center;font-size:22px;line-height:43px}
.room-rug{position:absolute;z-index:2;left:33%;bottom:22px;width:320px;height:105px;border:2px solid rgba(52,43,99,.5);border-radius:50%;background:radial-gradient(ellipse,#f8d5e4 0 35%,#b8a7e8 36% 63%,#79d9dc 64%);transform:rotate(-2deg);display:flex;align-items:center;justify-content:center;text-align:center;color:#342b63;font:700 11px/1 "Courier New",monospace;letter-spacing:.18em;opacity:.86}
.floor-outlet{position:absolute;left:43px;bottom:126px;width:35px;height:24px;border:1px solid rgba(52,43,99,.35);background:#fff9f3;text-align:center;font-size:10px;line-height:22px}
.floor-cord-bedroom{position:absolute;left:74px;bottom:83px;width:210px;height:80px;border-bottom:3px solid rgba(52,43,99,.45);border-radius:0 0 70% 40%;transform:rotate(5deg)}
.room-caption{position:absolute;left:22px;bottom:17px;color:#342b63;font:700 8px "Courier New",monospace}.room-caption span{color:#79d9dc;text-shadow:0 0 7px #79d9dc}

/* Existing homepage content now reads as items arranged below/in front of the room. */
.room-content-grid{
  margin-top:-84px!important;
  position:relative;
  z-index:12!important;
  padding:0 24px 32px!important;
  background:transparent!important;
}
.ghost-bedroom-page .room-content-grid .left,
.ghost-bedroom-page .room-content-grid .right{
  padding-top:112px;
}
.ghost-bedroom-page .room-content-grid .center{
  background:rgba(255,249,243,.94);
  border:2px solid var(--room-ink);
  box-shadow:8px 9px 0 rgba(52,43,99,.10);
}
.ghost-bedroom-page .room-content-grid .box{
  background:rgba(255,249,243,.94);
  backdrop-filter:blur(2px);
}
.ghost-bedroom-page .bedroom-note{position:relative;z-index:3}
.ghost-bedroom-page .daily-tarot{transform:rotate(.5deg)}
.ghost-bedroom-page .cd-stack{filter:drop-shadow(2px 3px rgba(52,43,99,.05))}

/* Homepage becomes more playful without touching Archive/Writings. */
.ghost-bedroom-page .top a:hover{background:#f6d978;color:#342b63;transform:translateY(-1px)}
.ghost-bedroom-page .box:hover{box-shadow:6px 7px 0 rgba(52,43,99,.11)}
.ghost-bedroom-page .computer-friend{z-index:30}

@media(max-width:900px){
  .ghost-bedroom-room{min-height:620px}
  .miami-bedroom-window{right:28px;width:300px;height:235px}
  .room-bed{right:10px;transform:scale(.85);transform-origin:right bottom}
  .room-desk-scene{left:150px;transform:scale(.82);transform-origin:left bottom}
  .room-left-wall{left:18px;transform:scale(.88);transform-origin:left top}
}
@media(max-width:700px){
  .ghost-bedroom-room{min-height:570px}
  .room-left-wall{display:none}
  .miami-bedroom-window{left:50%;right:auto;transform:translateX(-50%);width:280px;height:215px}
  .room-bed{right:-65px;transform:scale(.66)}
  .room-desk-scene{left:-25px;transform:scale(.65)}
  .room-rug{left:20%;width:250px}
  .room-content-grid{margin-top:-35px!important;padding-inline:10px!important}
  .ghost-bedroom-page .room-content-grid .left,.ghost-bedroom-page .room-content-grid .right{padding-top:0}
}
@media(max-width:480px){
  .ghost-bedroom-room{min-height:515px}
  .miami-bedroom-window{top:72px;width:235px;height:190px}
  .room-bed{right:-105px;bottom:38px;transform:scale(.57)}
  .room-desk-scene{left:-68px;bottom:42px;transform:scale(.55)}
  .room-caption{font-size:7px}
}
@media(prefers-reduced-motion:reduce){
  .ghost-bedroom-room *{animation:none!important}
}


/* =========================================================
   V5.2 — SHE MOVED IN
   Use the site's real licensed/Canva assets as inhabitants and possessions.
   ========================================================= */
.ghost-bedroom-page .ghost-bedroom-room{min-height:735px}
.room-ghost,.room-y2k{position:absolute;z-index:8;pointer-events:none;object-fit:contain}
.room-ghost-miami{right:405px;top:365px;width:132px;transform:rotate(-3deg);filter:drop-shadow(4px 6px rgba(52,43,99,.08))}
.room-ghost-music{left:64px;bottom:40px;width:118px;transform:rotate(2deg);filter:drop-shadow(4px 6px rgba(52,43,99,.08))}
.room-ghost-dream{right:58px;bottom:117px;width:115px;transform:rotate(3deg);filter:drop-shadow(4px 6px rgba(52,43,99,.07))}
.room-smiley-computer{left:306px;bottom:166px;width:75px;filter:drop-shadow(3px 4px rgba(52,43,99,.08))}
.room-heart-popup{left:425px;top:300px;width:55px;transform:rotate(7deg);filter:drop-shadow(3px 4px rgba(52,43,99,.07))}
.room-sparkle-a{left:485px;top:95px;width:22px;animation:room-sparkle 4.7s ease-in-out infinite}
.room-sparkle-b{right:430px;top:155px;width:16px;animation:room-sparkle 5.9s ease-in-out infinite reverse}
@keyframes room-sparkle{50%{transform:translateY(-5px) rotate(18deg);opacity:.45}}

.desk-typewriter{position:absolute;z-index:7;left:185px;bottom:113px;width:120px;height:auto;filter:drop-shadow(4px 5px rgba(52,43,99,.09));transform:rotate(-1deg)}
.room-polaroid{position:absolute;z-index:7;left:145px;top:327px;width:64px;height:78px;padding:7px 6px 13px;background:#fff9f3;border:1px solid rgba(52,43,99,.42);box-shadow:4px 5px rgba(52,43,99,.07);transform:rotate(6deg);color:#342b63;text-align:center;font-family:"Courier New",monospace}
.room-polaroid span{display:flex;height:48px;align-items:center;justify-content:center;background:linear-gradient(145deg,#9676d3,#f4a6c6,#79d9dc);color:#fff9f3;font-size:22px}.room-polaroid small{font-size:5px;font-weight:700}
.room-burned-cd{position:absolute;z-index:7;right:247px;top:382px;width:70px;height:70px;border:2px solid #342b63;border-radius:50%;background:conic-gradient(#f4a6c6,#f6d978,#79d9dc,#b8a7e8,#f4a6c6);box-shadow:inset 0 0 0 22px #fff9f3,4px 5px rgba(52,43,99,.08);transform:rotate(-11deg);font-family:"Courier New",monospace;color:#342b63}
.room-burned-cd b{position:absolute;left:-8px;top:26px;width:86px;text-align:center;font-size:7px;transform:rotate(8deg)}.room-burned-cd small{position:absolute;left:15px;top:44px;font-size:5px}
.room-away-message{position:absolute;z-index:9;left:31px;top:355px;width:155px;padding:7px;border:2px solid #342b63;background:#fff9f3;box-shadow:5px 6px rgba(52,43,99,.08);font-family:"Courier New",monospace;color:#342b63;transform:rotate(-1deg)}
.room-away-message:before{content:"☺  AIM";display:block;margin:-7px -7px 6px;padding:4px 6px;background:linear-gradient(90deg,#79d9dc,#b8a7e8,#f4a6c6);font-size:7px;font-weight:700}
.room-away-message b,.room-away-message span,.room-away-message em{display:block}.room-away-message b{font-size:7px}.room-away-message span{margin-top:5px;font-size:5px;color:#796e97}.room-away-message em{margin-top:3px;font-size:7px;line-height:1.25;font-style:normal}

/* More bedroom-object logic for the content widgets. */
.ghost-bedroom-page .status-v4{transform:rotate(-.4deg)}
.ghost-bedroom-page .player-v4{transform:rotate(.35deg)}
.ghost-bedroom-page .daily-tarot{position:relative}
.ghost-bedroom-page .daily-tarot:after{content:"♡";position:absolute;right:8px;bottom:5px;color:#f4a6c6;font-size:14px;transform:rotate(12deg)}
.ghost-bedroom-page .currently-reading:before{content:"PROPERTY OF GHOST GIRL";display:block;margin:-3px 0 7px;color:#9676d3;font:700 6px "Courier New",monospace;letter-spacing:.08em}
.ghost-bedroom-page .desk-strip span:last-child{color:#f6d978}

/* Tiny wall/furniture stickers: intentionally cheesy 2004. */
.room-bed:after{content:"★  ☺  ♡";position:absolute;z-index:9;right:36px;top:22px;color:#f6d978;font:700 10px "Courier New",monospace;letter-spacing:5px;transform:rotate(3deg);text-shadow:1px 1px #342b63}
.room-desk-scene:after{content:"NO SLEEP // JUST TABS";position:absolute;left:270px;bottom:73px;padding:3px 5px;background:#f6d978;border:1px solid #342b63;color:#342b63;font:700 5px "Courier New",monospace;transform:rotate(-3deg)}

/* A little more Miami glow on the floor without changing the room architecture. */
.ghost-bedroom-room:before{box-shadow:0 16px 40px rgba(244,166,198,.15)}
.room-rug{box-shadow:0 8px 18px rgba(52,43,99,.08)}

@media(max-width:900px){
 .room-ghost-miami{right:335px;transform:scale(.85) rotate(-3deg);transform-origin:right bottom}
 .room-heart-popup,.room-polaroid{display:none}
 .room-away-message{transform:scale(.85) rotate(-1deg);transform-origin:left top}
}
@media(max-width:700px){
 .room-away-message,.room-ghost-music,.room-burned-cd{display:none}
 .room-ghost-miami{right:245px;top:350px;width:105px}
 .room-ghost-dream{right:18px;width:95px}
 .desk-typewriter{width:105px}
}
@media(max-width:480px){
 .room-ghost-miami{display:none}
 .room-smiley-computer{left:200px;bottom:142px;width:62px}
 .room-ghost-dream{right:5px;bottom:90px;width:82px}
}
@media(prefers-reduced-motion:reduce){.room-sparkle-a,.room-sparkle-b{animation:none!important}}


/* =========================================================
   V5.3 — THE INTEGRATION PASS
   Characters have jobs. Widgets become possessions.
   ========================================================= */
/* Tropical Ghost lives by the Miami window, not in a generic widget. */
.room-ghost-tropical{right:392px;top:315px;width:142px;transform:rotate(-4deg);filter:drop-shadow(4px 6px rgba(52,43,99,.09));z-index:9}
.room-ghost-tropical:hover{transform:translateY(-3px) rotate(-2deg)}
/* Reading Ghost settles beside the bed/books, visually tied to Currently Reading below. */
.room-ghost-reading{right:38px;bottom:102px;width:146px;transform:rotate(2deg);filter:drop-shadow(4px 6px rgba(52,43,99,.08));z-index:10}
.room-ghost-reading:hover{transform:translateY(-3px) rotate(1deg)}
.room-ghost-tropical,.room-ghost-reading{transition:transform .28s ease}

/* Make the right reading widget feel like a bookplate / bedside object rather than another app window. */
.ghost-bedroom-page .currently-reading{position:relative;border-radius:3px 12px 12px 3px!important;border-left:8px solid #9676d3!important;background:linear-gradient(90deg,#fff9f3 0 93%,#f8d5e4 93%)!important;box-shadow:5px 7px 0 rgba(52,43,99,.08)!important;transform:rotate(.35deg)}
.ghost-bedroom-page .currently-reading h2{background:transparent!important;border-bottom:1px dashed rgba(52,43,99,.28)!important;color:#342b63!important}
.ghost-bedroom-page .currently-reading:after{content:"☾  checked out to ghost girl  ✦";display:block;margin-top:8px;padding-top:6px;border-top:1px dashed rgba(52,43,99,.22);font:700 6px "Courier New",monospace;color:#9676d3;letter-spacing:.05em}

/* Tarot becomes a physical little ritual surface: less browser-window, more deck-on-nightstand. */
.ghost-bedroom-page .daily-tarot{border-radius:10px!important;background:linear-gradient(160deg,rgba(255,249,243,.97),rgba(248,213,228,.9))!important;box-shadow:7px 9px 0 rgba(52,43,99,.09)!important;transform:rotate(-.45deg)}
.ghost-bedroom-page .daily-tarot h2{background:transparent!important;border-bottom:1px dashed rgba(52,43,99,.25)!important;color:#342b63!important}
.ghost-bedroom-page .daily-tarot .window-buttons{opacity:.38}
.ghost-bedroom-page .tarot-deck{filter:drop-shadow(3px 5px rgba(52,43,99,.08))}

/* Music area gets the feel of a jewel-case / stereo station. */
.ghost-bedroom-page .player-v4{background:linear-gradient(145deg,rgba(205,236,241,.92),rgba(255,249,243,.94))!important;border-radius:3px!important;box-shadow:5px 6px 0 rgba(52,43,99,.08)!important}
.ghost-bedroom-page .player-v4:after{content:"♪  NOW PLAYING IN GHOST GIRL'S ROOM";display:block;margin-top:7px;padding-top:5px;border-top:1px dashed rgba(52,43,99,.22);font:700 6px "Courier New",monospace;color:#9676d3;letter-spacing:.04em}

/* Status behaves more like an AIM/profile card. */
.ghost-bedroom-page .status-v4{background:linear-gradient(180deg,#fff9f3,#e7dff5)!important;border-radius:3px!important}
.ghost-bedroom-page .status-v4 h2:after{content:"  ● online";color:#79d9dc;font:700 6px "Courier New",monospace}

/* Featured writing = the document currently open on her desk. */
.ghost-bedroom-page .bedroom-desk{background:linear-gradient(90deg,#fff9f3 0 97%,#f8d5e4 97%)!important;border-radius:2px!important;position:relative}
.ghost-bedroom-page .bedroom-desk:before{content:"";position:absolute;left:17px;top:45px;bottom:18px;width:1px;background:rgba(244,166,198,.34);pointer-events:none}
.ghost-bedroom-page .bedroom-desk .post-body,.ghost-bedroom-page .bedroom-desk p{position:relative;z-index:1}

/* Retire visual traces of the old characters if any legacy selectors survive. */
.room-ghost-miami,.room-ghost-dream{display:none!important}

@media(max-width:900px){.room-ghost-tropical{right:322px;top:330px;width:122px}.room-ghost-reading{right:18px;width:125px}}
@media(max-width:700px){.room-ghost-tropical{right:235px;top:344px;width:100px}.room-ghost-reading{right:0;bottom:94px;width:108px}}
@media(max-width:480px){.room-ghost-tropical{display:none}.room-ghost-reading{right:-8px;width:92px}}
@media(prefers-reduced-motion:reduce){.room-ghost-tropical,.room-ghost-reading{transition:none}}


/* =========================================================
   V5.3.1 — BIG DEBORAH HAS BEEN CONTAINED
   Surgical fix only: Tropical Ghost is a resident, not architecture.
   ========================================================= */
.ghost-bedroom-page .room-ghost-tropical{
  width:82px !important;
  height:auto !important;
  right:430px !important;
  top:392px !important;
  transform:rotate(-3deg) !important;
  transform-origin:center center !important;
}

@media(max-width:900px){
  .ghost-bedroom-page .room-ghost-tropical{
    width:74px !important;
    right:350px !important;
    top:390px !important;
  }
}
@media(max-width:700px){
  .ghost-bedroom-page .room-ghost-tropical{
    width:68px !important;
    right:250px !important;
    top:380px !important;
  }
}
@media(max-width:480px){
  .ghost-bedroom-page .room-ghost-tropical{
    width:60px !important;
    right:185px !important;
    top:365px !important;
  }
}


/* V5.3.2 — Deborah is now ACTUALLY little */
.ghost-bedroom-page .room-ghost-tropical{
  width:48px !important;
  height:auto !important;
  right:448px !important;
  top:408px !important;
  transform:rotate(-3deg) !important;
}
@media(max-width:900px){
  .ghost-bedroom-page .room-ghost-tropical{
    width:44px !important;
    right:365px !important;
    top:405px !important;
  }
}
@media(max-width:700px){
  .ghost-bedroom-page .room-ghost-tropical{
    width:40px !important;
    right:265px !important;
    top:395px !important;
  }
}
@media(max-width:480px){
  .ghost-bedroom-page .room-ghost-tropical{display:none!important}
}


/* V5.3.3 — mystery solved: the giant face was Reading Ghost, not Deborah.
   V5.3's original integration block contained escaped newline characters,
   so Reading Ghost never received her intended size. */
.ghost-bedroom-page .room-ghost-reading{
  position:absolute !important;
  width:112px !important;
  height:auto !important;
  right:48px !important;
  bottom:108px !important;
  top:auto !important;
  transform:rotate(2deg) !important;
  transform-origin:center center !important;
  z-index:10 !important;
  filter:drop-shadow(4px 6px rgba(52,43,99,.08));
}
.ghost-bedroom-page .room-ghost-tropical{
  position:absolute !important;
  width:72px !important;
  height:auto !important;
  right:410px !important;
  top:365px !important;
  bottom:auto !important;
  transform:rotate(-3deg) !important;
  z-index:9 !important;
}
@media(max-width:900px){
  .ghost-bedroom-page .room-ghost-reading{width:98px!important;right:25px!important;bottom:102px!important}
  .ghost-bedroom-page .room-ghost-tropical{width:65px!important;right:330px!important;top:370px!important}
}
@media(max-width:700px){
  .ghost-bedroom-page .room-ghost-reading{width:88px!important;right:4px!important;bottom:92px!important}
  .ghost-bedroom-page .room-ghost-tropical{width:58px!important;right:235px!important;top:375px!important}
}
@media(max-width:480px){
  .ghost-bedroom-page .room-ghost-reading{width:76px!important;right:-4px!important;bottom:84px!important}
  .ghost-bedroom-page .room-ghost-tropical{display:none!important}
}


/* =========================================================
   V5.4 — THE ROOM EATS THE WEBSITE
   The essay remains the readable center. Sidebars become possessions,
   scraps and little interfaces that belong to Ghost Girl's room.
   ========================================================= */
.ghost-bedroom-page .room-content-grid{
  grid-template-columns:190px minmax(0,1fr) 205px!important;
  gap:13px!important;
  margin-top:-118px!important;
  padding:0 30px 38px!important;
  align-items:start;
}

/* Stop drawing three opaque columns across the bedroom. */
.ghost-bedroom-page .room-content-grid>aside{
  display:flex;
  flex-direction:column;
  gap:13px;
  padding-top:142px;
  background:transparent;
}
.ghost-bedroom-page .room-content-grid>aside .box{margin:0}

/* The one deliberate "screen": a translucent old-web directory floating off the desk. */
.ghost-bedroom-page .navbox{
  background:rgba(231,223,245,.80)!important;
  border:1px solid rgba(52,43,99,.50)!important;
  box-shadow:4px 5px 0 rgba(52,43,99,.08)!important;
  backdrop-filter:blur(5px)!important;
  transform:rotate(-.55deg);
}
.ghost-bedroom-page .navbox h2{background:rgba(184,167,232,.48)!important}
.ghost-bedroom-page .navbox a{font-size:9px;padding:4px 2px}
.ghost-bedroom-page .folder-label,.ghost-bedroom-page .nav-footer{font-size:6px}

/* AIM status is now a compact presence card, not a second character portrait. */
.ghost-bedroom-page .status-v4{
  padding:8px!important;
  background:rgba(255,249,243,.83)!important;
  border:1px solid rgba(52,43,99,.42)!important;
  box-shadow:3px 4px 0 rgba(52,43,99,.07)!important;
  transform:rotate(.7deg)!important;
}
.ghost-bedroom-page .status-v4 h2{margin:-8px -8px 7px!important;min-height:20px!important;padding:3px 5px!important;font-size:8px!important;background:linear-gradient(90deg,#79d9dc88,#b8a7e888)!important}
.ghost-bedroom-page .status-v4 h2:after{content:""!important}
.status-presence{display:grid;grid-template-columns:1fr auto;gap:2px 5px;padding:5px;border:1px dotted #9676d3;background:#fff9f3;font:700 7px "Courier New",monospace;text-align:left}
.status-presence span{color:#4aa9a9}.status-presence small{grid-column:1/-1;font-size:6px;font-weight:normal;color:#796e97}
.ghost-bedroom-page .status-v4 p{margin:4px 0!important;padding:3px 5px!important;border-left-width:2px!important;background:rgba(255,249,243,.60)!important;font-size:7px!important}

/* Footprints becomes a loose guestbook slip. */
.ghost-bedroom-page .footprints{
  width:168px;align-self:center;
  background:#fff9f3!important;border:1px solid rgba(52,43,99,.38)!important;
  box-shadow:3px 5px 0 rgba(52,43,99,.06)!important;
  transform:rotate(-1.2deg);
}
.ghost-bedroom-page .footprints h2{background:transparent!important;border-bottom:1px dashed #b8a7e8!important}
.ghost-bedroom-page .footprints p{font-size:7px;margin:5px 0}.ghost-bedroom-page .footprints .tiny-link{font-size:7px}

/* Center: a single sheet/document pulled forward from the desk. */
.ghost-bedroom-page .bedroom-desk{
  margin:0!important;
  background:rgba(255,249,243,.975)!important;
  border:1px solid rgba(52,43,99,.62)!important;
  box-shadow:7px 10px 0 rgba(52,43,99,.09)!important;
  transform:rotate(.12deg);
  z-index:4;
}
.ghost-bedroom-page .bedroom-desk .desk-strip{background:linear-gradient(90deg,#e7dff5,#f8d5e4)!important}

/* Right side: ritual/book/music objects, not a stack of browser windows. */
.ghost-bedroom-page .daily-tarot{
  width:176px;align-self:flex-start;
  padding:10px!important;
  border:1px solid rgba(52,43,99,.45)!important;
  background:rgba(248,213,228,.84)!important;
  box-shadow:4px 6px 0 rgba(52,43,99,.07)!important;
  transform:rotate(1.1deg)!important;
}
.ghost-bedroom-page .daily-tarot h2{margin:-4px 0 5px!important;min-height:auto!important;padding:0 0 4px!important;font-size:8px!important}
.ghost-bedroom-page .tarot-date,.ghost-bedroom-page .tarot-whisper{font-size:6px!important}
.ghost-bedroom-page .tarot-deck{transform:scale(.86);transform-origin:center top;margin-bottom:-18px}
.ghost-bedroom-page .tarot-draw{font-size:7px!important}

.ghost-bedroom-page #currently-reading{
  width:188px;align-self:flex-end;
  padding:9px!important;
  border:1px solid rgba(52,43,99,.42)!important;
  border-left:7px solid #9676d3!important;
  border-radius:2px 9px 9px 2px!important;
  background:linear-gradient(90deg,#fff9f3 0 94%,#f8d5e4 94%)!important;
  box-shadow:4px 5px 0 rgba(52,43,99,.07)!important;
  transform:rotate(-.8deg)!important;
}
.ghost-bedroom-page #currently-reading h2{margin:0 0 6px!important;min-height:auto!important;padding:0 0 4px!important;font-size:8px!important}
.ghost-bedroom-page #currently-reading .reading-inside{gap:4px!important}
.ghost-bedroom-page #currently-reading .reading-inside img{width:62px!important;margin:-8px 0 -5px!important}
.ghost-bedroom-page #currently-reading p{font-size:7px!important;line-height:1.3}.ghost-bedroom-page #currently-reading small{font-size:6px!important}

/* About becomes a taped note instead of another application window. */
.ghost-bedroom-page .about-v4{
  width:166px;align-self:center;padding:10px!important;
  background:#f6d978e8!important;border:0!important;
  box-shadow:3px 5px 0 rgba(52,43,99,.07)!important;
  transform:rotate(1.7deg);
}
.ghost-bedroom-page .about-v4:before{content:"";position:absolute;top:-6px;left:58px;width:48px;height:12px;background:rgba(205,236,241,.72);transform:rotate(-4deg)}
.ghost-bedroom-page .about-v4 h2{margin:0 0 5px!important;padding:0!important;min-height:auto!important;background:transparent!important;border:0!important;font-size:8px!important}
.ghost-bedroom-page .about-v4 .window-buttons{display:none}.ghost-bedroom-page .about-v4 p,.ghost-bedroom-page .about-v4>a{font-size:7px!important}

/* Music is a CD player/stereo card tied to Music Ghost. */
.ghost-bedroom-page .cd-stack{margin:0 auto -17px!important;z-index:2;transform:scale(.84) rotate(-2deg);transform-origin:center bottom}
.ghost-bedroom-page .player-v4{
  width:184px;align-self:flex-start;padding:8px!important;
  background:rgba(205,236,241,.82)!important;
  border:1px solid rgba(52,43,99,.44)!important;
  box-shadow:4px 5px 0 rgba(52,43,99,.07)!important;
  transform:rotate(.55deg)!important;
}
.ghost-bedroom-page .player-v4 h2{margin:-8px -8px 5px!important;min-height:21px!important;font-size:7px!important}
.ghost-bedroom-page .player-v4 img{width:82px!important;margin:-6px auto -8px!important}
.ghost-bedroom-page .player-v4 .track{padding:4px!important;margin:2px 4px 4px!important;font-size:7px}.ghost-bedroom-page .player-v4 .track span{font-size:6px}
.ghost-bedroom-page .player-v4:after{font-size:5px!important}

/* Construction sign becomes a little floor placard and gets out of the visual hierarchy. */
.ghost-bedroom-page .construction{width:145px;align-self:center;opacity:.82;transform:rotate(-1deg);padding:8px!important}
.ghost-bedroom-page .construction h2{font-size:7px!important}.ghost-bedroom-page .construction-door{width:35px;height:48px}.ghost-bedroom-page .construction b{font-size:6px!important}.ghost-bedroom-page .construction span{font-size:16px!important}.ghost-bedroom-page .construction small{font-size:6px}

/* The old note is allowed to overlap like an actual sticky note. */
.ghost-bedroom-page .bedroom-note{width:145px;align-self:center;transform:rotate(-2deg);margin:-2px 0 1px!important}

/* The characters stay in the physical room, above furniture but behind the essay sheet. */
.ghost-bedroom-page .room-ghost-reading{width:106px!important;right:54px!important;bottom:104px!important}
.ghost-bedroom-page .room-ghost-tropical{width:70px!important;right:410px!important;top:365px!important}

@media(max-width:900px){
 .ghost-bedroom-page .room-content-grid{grid-template-columns:170px minmax(0,1fr) 185px!important;padding-inline:14px!important;gap:9px!important}
 .ghost-bedroom-page .daily-tarot,.ghost-bedroom-page #currently-reading,.ghost-bedroom-page .player-v4{width:auto}
}
@media(max-width:760px){
 .ghost-bedroom-page .room-content-grid{display:block!important;margin-top:-35px!important;padding:10px!important}
 .ghost-bedroom-page .room-content-grid>aside{padding-top:0!important;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
 .ghost-bedroom-page .room-content-grid>aside>*{width:auto!important;align-self:stretch!important}
 .ghost-bedroom-page .bedroom-desk{transform:none}
}
@media(max-width:480px){
 .ghost-bedroom-page .room-content-grid>aside{grid-template-columns:1fr}
}


/* =========================================================
   V6.0 — GHOST GIRL'S ROOM IS THE INTERFACE
   The center obeys writing. The room rewards curiosity.
   ========================================================= */
.ghost-bedroom-page .ghost-bedroom-room{min-height:620px;margin-bottom:28px;overflow:visible}
.room-hotspot{position:absolute;z-index:30;border:1px dashed rgba(52,43,99,.42);background:rgba(255,249,243,.82);color:#342b63;font-family:"Courier New",monospace;text-decoration:none;padding:5px 7px;box-shadow:3px 4px 0 rgba(52,43,99,.07);cursor:pointer;transform:rotate(-1deg);transition:transform .18s ease,background .18s ease,opacity .18s ease;opacity:.72}
.room-hotspot:hover,.room-hotspot:focus-visible{opacity:1;background:#fff9f3;transform:translateY(-3px) rotate(0deg);outline:2px solid #f4a6c6;outline-offset:2px}
.room-hotspot span{font-size:12px;margin-right:3px}.room-hotspot b{font-size:7px;letter-spacing:.08em}.room-hotspot small{display:block;margin-top:2px;font-size:5px;color:#796e97;white-space:nowrap}
.hotspot-writing{left:505px;bottom:111px}.hotspot-computer{left:280px;bottom:213px}.hotspot-reading{right:28px;bottom:66px}
.hotspot-music{left:45px;bottom:20px}.hotspot-tarot{right:300px;bottom:128px}.hotspot-cabinet{right:18px;top:215px}
.hotspot-about{left:130px;top:315px}.hotspot-secret{right:205px;top:88px;width:25px;height:25px;padding:0;border-radius:50%;opacity:.18}
.hotspot-secret:hover{opacity:.8}
.room-discovery-hint{position:absolute;z-index:22;left:50%;bottom:-24px;transform:translateX(-50%);font:700 7px "Courier New",monospace;color:#796e97;letter-spacing:.05em;white-space:nowrap}
.featured-desk-paper{position:relative;width:min(690px,calc(100% - 60px));margin:54px auto 36px;padding:32px 44px 28px;background:linear-gradient(90deg,#fff9f3 0 96%,#f8d5e4 96%);border:1px solid rgba(52,43,99,.42);box-shadow:9px 11px 0 rgba(52,43,99,.08);color:#342b63;transform:rotate(-.25deg)}
.featured-desk-paper:before{content:"";position:absolute;left:27px;top:55px;bottom:24px;width:1px;background:rgba(244,166,198,.45)}
.paper-tab{position:absolute;left:15px;right:15px;top:-18px;padding:6px 9px;background:#b8a7e8;border:1px solid #342b63;font:700 7px "Courier New",monospace;box-shadow:3px 3px 0 rgba(52,43,99,.08)}
.paper-tab span{float:right}.paper-kicker{font:700 6px "Courier New",monospace;letter-spacing:.08em;color:#9676d3}
.featured-desk-paper h2{font-family:Georgia,serif;font-size:28px;line-height:1.05;margin:10px 0 15px}.featured-desk-paper p{font-family:Georgia,serif;font-size:14px;line-height:1.65}.paper-opening{font-size:16px!important}
.paper-actions{display:flex;gap:12px;align-items:center;margin-top:20px;font:700 8px "Courier New",monospace}.paper-actions a{color:#342b63}.featured-desk-paper>small{display:block;margin-top:18px;color:#9676d3;font:italic 7px "Courier New",monospace;text-align:right}
.room-panel-layer{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:20px}.room-panel-layer[hidden]{display:none}
.room-panel-backdrop{position:absolute;inset:0;border:0;background:rgba(52,43,99,.38);backdrop-filter:blur(2px)}
.room-panel{position:relative;z-index:2;width:min(470px,92vw);max-height:82vh;overflow:auto;background:#fff9f3;border:2px solid #342b63;box-shadow:12px 14px 0 rgba(52,43,99,.22);color:#342b63}
.room-panel[hidden]{display:none}.room-panel-bar{display:flex;justify-content:space-between;align-items:center;padding:7px 9px;background:linear-gradient(90deg,#79d9dc,#b8a7e8,#f4a6c6);border-bottom:2px solid #342b63;font:700 8px "Courier New",monospace}
.room-panel-bar button{border:1px solid #342b63;background:#fff9f3;color:#342b63;font-weight:900;cursor:pointer}
.computer-screen-v6{padding:16px;font-family:"Courier New",monospace;background:linear-gradient(180deg,#fff9f3,#cdecf1)}
.aim-v6{padding:8px;border:1px solid #342b63;background:#fff;box-shadow:3px 3px #e7dff5}.aim-v6 b,.aim-v6 span,.aim-v6 small{display:block}.aim-v6 span{color:#4f9f94;font-size:7px}.aim-v6 small{font-size:7px}
.dos-path{font-size:8px;font-weight:700}.desktop-links{display:grid;grid-template-columns:1fr 1fr;gap:7px}.desktop-links a{padding:8px;background:#fff9f3;border:1px dashed #9676d3;color:#342b63;font:700 8px "Courier New",monospace;text-decoration:none}.desktop-links a:hover{background:#f8d5e4}
.computer-status-v6{margin-top:12px;padding-top:8px;border-top:1px dashed #9676d3;font-size:7px}
.reading-panel-v6,.music-panel-v6{display:flex;gap:18px;align-items:center;padding:20px}.reading-panel-v6 img{width:135px}.music-panel-v6 img{width:145px}.reading-panel-v6 h3,.music-panel-v6 h3{margin:5px 0;font-family:Georgia,serif}.reading-panel-v6 small,.music-panel-v6 small{font:700 7px "Courier New",monospace;color:#9676d3}.reading-panel-v6 blockquote{margin:12px 0;padding-left:10px;border-left:3px solid #f4a6c6;font-family:Georgia,serif;font-size:12px}.reading-panel-v6 em{font-size:8px}
.fake-track{margin:12px 0;font-family:"Courier New",monospace;color:#9676d3}.tarot-panel-v6 .daily-tarot{margin:0!important;padding:18px!important;border:0!important;box-shadow:none!important;transform:none!important;text-align:center}
.guestbook-scrap-v6{width:min(650px,calc(100% - 70px));margin:0 auto 35px;padding:10px 14px;border:1px dashed rgba(52,43,99,.45);background:rgba(255,249,243,.68);font:7px "Courier New",monospace;color:#342b63;transform:rotate(.25deg)}
.guestbook-scrap-v6 b,.guestbook-scrap-v6 span,.guestbook-scrap-v6 a{display:block;margin:3px 0}.guestbook-scrap-v6 a{color:#9676d3}
@media(max-width:900px){.hotspot-writing{left:46%;}.hotspot-computer{left:24%}.hotspot-tarot{right:24%}.hotspot-cabinet{right:10px}.hotspot-about{left:10%}}
@media(max-width:700px){.room-hotspot small{display:none}.room-hotspot{padding:4px}.hotspot-reading{right:5px}.hotspot-music{left:8px}.featured-desk-paper{width:calc(100% - 30px);padding:28px 25px}.paper-tab span{display:none}}
@media(max-width:480px){.hotspot-secret,.hotspot-about{display:none}.room-discovery-hint{font-size:6px}.desktop-links{grid-template-columns:1fr}.reading-panel-v6,.music-panel-v6{flex-direction:column;text-align:center}}
@media(prefers-reduced-motion:reduce){.room-hotspot{transition:none}}


/* =========================================================
   V6.1 — THE ROOM FEELS ALIVE
   Refinement, not renovation.
   ========================================================= */

/* Hotspots become quiet until the visitor discovers them. */
.ghost-bedroom-page .room-hotspot{
  background:rgba(255,249,243,.14)!important;
  border-color:rgba(52,43,99,.14)!important;
  box-shadow:none!important;
  opacity:.38!important;
  backdrop-filter:blur(.5px);
}
.ghost-bedroom-page .room-hotspot b,
.ghost-bedroom-page .room-hotspot small{
  opacity:0;
  transform:translateY(3px);
  transition:opacity .16s ease,transform .16s ease;
}
.ghost-bedroom-page .room-hotspot span{opacity:.65;transition:opacity .16s ease,transform .16s ease}
.ghost-bedroom-page .room-hotspot:hover,
.ghost-bedroom-page .room-hotspot:focus-visible{
  opacity:1!important;
  background:rgba(255,249,243,.93)!important;
  border-color:rgba(52,43,99,.5)!important;
  box-shadow:3px 4px 0 rgba(52,43,99,.08)!important;
}
.ghost-bedroom-page .room-hotspot:hover b,
.ghost-bedroom-page .room-hotspot:hover small,
.ghost-bedroom-page .room-hotspot:focus-visible b,
.ghost-bedroom-page .room-hotspot:focus-visible small{opacity:1;transform:none}
.ghost-bedroom-page .room-hotspot:hover span{opacity:1;transform:scale(1.12)}

/* Objects themselves react, very slightly. */
.room-ghost-reading,.room-ghost-tropical,.room-ghost-music,.room-typewriter,.room-computer{
  transition:transform .22s ease,filter .22s ease;
}
.ghost-bedroom-room:has(.hotspot-reading:hover) .room-ghost-reading{transform:translateY(-4px) rotate(2deg)!important;filter:drop-shadow(0 0 8px rgba(184,167,232,.45))}
.ghost-bedroom-room:has(.hotspot-music:hover) .room-ghost-music{transform:rotate(-3deg) translateY(-3px)!important;filter:drop-shadow(0 0 7px rgba(121,217,220,.4))}
.ghost-bedroom-room:has(.hotspot-writing:hover) .room-typewriter{transform:translateY(-3px)!important;filter:drop-shadow(0 0 7px rgba(244,166,198,.38))}
.ghost-bedroom-room:has(.hotspot-computer:hover) .room-computer{filter:drop-shadow(0 0 10px rgba(121,217,220,.6));transform:translateY(-2px)}
.ghost-bedroom-room:has(.hotspot-cabinet:hover) .hotspot-cabinet{animation:basementSignal .9s steps(2,end) infinite}
@keyframes basementSignal{50%{text-shadow:0 0 6px #9676d3}}

/* Hint politely disappears once the visitor has interacted. */
.room-discovery-hint{transition:opacity .5s ease}
.room-discovery-hint.learned{opacity:0;pointer-events:none}
.room-ambient-status{
  position:absolute;z-index:21;left:22px;bottom:-23px;
  font:italic 6px "Courier New",monospace;color:rgba(52,43,99,.58);
  opacity:0;transition:opacity .3s ease;
}
.room-ambient-status.show{opacity:1}

/* A rare little visual event. It is deliberately almost nothing. */
.room-haunt{position:absolute;z-index:18;border:0;background:transparent;color:#fff9f3;cursor:pointer;padding:5px;text-shadow:0 0 8px #b8a7e8}
.room-haunt-star{right:185px;top:126px;opacity:0;pointer-events:none}
.room-haunt-star.appear{animation:rareStar 5s ease forwards;pointer-events:auto}
@keyframes rareStar{0%{opacity:0;transform:scale(.2) rotate(0)}20%,75%{opacity:.9;transform:scale(1) rotate(30deg)}100%{opacity:0;transform:scale(.3) rotate(70deg)}}

/* Computer now has one file it would prefer you leave alone. */
.forbidden-file-v61{
  margin-top:9px;padding:7px 8px;border:1px dashed #9676d3;background:#f8d5e4;
  color:#342b63;font:700 7px "Courier New",monospace;cursor:pointer;text-align:left
}
.forbidden-file-v61:hover{background:#fff9f3}
.forbidden-note-v61{margin-top:8px;padding:10px;border:1px solid #342b63;background:#342b63;color:#fff9f3;font:8px "Courier New",monospace}
.forbidden-note-v61 p{font-size:8px;line-height:1.5}.forbidden-note-v61 small{color:#f4a6c6}
.object-memory-v61{display:block!important;margin-top:10px!important;padding-top:7px;border-top:1px dashed rgba(52,43,99,.25);font:italic 6px "Courier New",monospace!important;color:#796e97!important}

/* After dark, the room gets just a little quieter/deeper. */
.ghost-bedroom-page.after-dark .ghost-bedroom-room:after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(52,43,99,.05),rgba(52,43,99,.12));
  mix-blend-mode:multiply
}
.ghost-bedroom-page.after-dark .room-caption:after{content:" // lights low";font-size:5px;color:#9676d3}
.ghost-bedroom-page.venus-day .room-caption:before{content:"♡ ";color:#f4a6c6}

@media(max-width:700px){
  .room-ambient-status{display:none}
  .ghost-bedroom-page .room-hotspot b{opacity:.8}
}
@media(prefers-reduced-motion:reduce){
  .room-haunt-star.appear,.ghost-bedroom-room:has(.hotspot-cabinet:hover) .hotspot-cabinet{animation:none}
}


/* =========================================================
   V6.2 — FOLLOW THE WRONG THING
   One real rabbit hole. No renovation.
   ========================================================= */
.rabbit-clue{
  position:absolute;z-index:19;border:0;background:transparent;color:rgba(52,43,99,.23);
  font:700 7px "Courier New",monospace;cursor:pointer;padding:6px;transition:color .2s,transform .2s,text-shadow .2s
}
.rabbit-clue:hover,.rabbit-clue:focus-visible{color:#342b63;transform:scale(1.15);text-shadow:0 0 7px rgba(184,167,232,.8);outline:none}
.rabbit-clue-one{left:212px;top:155px;transform:rotate(-7deg)}
.rabbit-clue-two{right:96px;bottom:96px;color:rgba(255,249,243,.28)}
.rabbit-clue-three{left:47%;bottom:14px;color:rgba(52,43,99,.18)}
.rabbit-clue.revealed{animation:clueWake 1.6s ease both}
@keyframes clueWake{0%{opacity:0;filter:blur(3px)}50%{opacity:1;text-shadow:0 0 12px #f4a6c6}100%{opacity:1}}
.rabbit-whisper-v62{margin:9px 0 0!important;padding-top:7px;border-top:1px dashed rgba(248,213,228,.35);color:#f8d5e4;font-size:6px!important;line-height:1.5!important}

.rabbit-hole-layer{position:fixed;inset:0;z-index:12000;display:grid;place-items:center;padding:20px}
.rabbit-hole-layer[hidden]{display:none}
.rabbit-hole-backdrop{position:absolute;inset:0;border:0;background:rgba(25,20,48,.72);backdrop-filter:blur(5px)}
.rabbit-hole-window{position:relative;z-index:2;width:min(520px,92vw);border:1px solid #9676d3;background:#191430;color:#fff9f3;box-shadow:0 0 50px rgba(184,167,232,.22),12px 14px 0 rgba(0,0,0,.22);transform:rotate(-.2deg)}
.rabbit-hole-bar{display:flex;justify-content:space-between;align-items:center;padding:7px 9px;border-bottom:1px solid #9676d3;background:#342b63;font:700 7px "Courier New",monospace;color:#cdecf1}
.rabbit-hole-bar button{border:1px solid #b8a7e8;background:#191430;color:#fff9f3;cursor:pointer}
.rabbit-hole-screen{padding:32px 36px 28px;background:radial-gradient(circle at 60% 20%,rgba(150,118,211,.16),transparent 42%),#191430;font:9px/1.7 "Courier New",monospace}
.rabbit-hole-screen>small{color:#79d9dc;letter-spacing:.09em}.rabbit-hole-screen h2{margin:10px 0 20px;font:italic 25px/1.1 Georgia,serif;color:#f8d5e4}
.rabbit-hole-note{margin:23px 0;padding:13px;border:1px dashed #9676d3;background:rgba(255,249,243,.04);transform:rotate(.4deg)}
.rabbit-hole-note b,.rabbit-hole-note span{display:block}.rabbit-hole-note b{font-size:6px;color:#79d9dc;margin-bottom:7px}.rabbit-hole-note span{font:italic 13px/1.45 Georgia,serif}
.rabbit-hole-final{color:#b8a7e8;font-size:7px}.rabbit-return{margin-top:12px;border:0;background:transparent;color:#f4a6c6;text-decoration:underline;font:700 7px "Courier New",monospace;cursor:pointer}
.rabbit-return:hover{color:#fff9f3}

/* Learned visitors get even less UI scaffolding. */
.ghost-bedroom-page.room-learned .room-discovery-hint{display:none}
.ghost-bedroom-page.room-learned .room-hotspot{opacity:.25!important}
.ghost-bedroom-page.room-learned .room-hotspot:hover,.ghost-bedroom-page.room-learned .room-hotspot:focus-visible{opacity:1!important}

@media(max-width:700px){.rabbit-clue-one{left:18%}.rabbit-clue-two{right:8%}.rabbit-hole-screen{padding:24px 22px}}
@media(prefers-reduced-motion:reduce){.rabbit-clue.revealed{animation:none}}


/* V6.2.1 — breadcrumb reliability fix */
.rabbit-clue[hidden]{display:none!important}
.rabbit-clue.rabbit-visible{display:block!important;visibility:visible!important;pointer-events:auto!important;z-index:55!important}
.rabbit-clue-two.rabbit-visible,.rabbit-clue-three.rabbit-visible{
  color:#342b63!important;
  background:rgba(255,249,243,.58)!important;
  border-radius:50%;
  box-shadow:0 0 12px rgba(184,167,232,.75);
}
.rabbit-clue-one.clue-clicked{
  color:#9676d3!important;
  text-shadow:0 0 10px rgba(150,118,211,.9);
}

/* =========================================================
   V6.6 — THE SACRED MACHINE
   One clean typewriter system. No stacked overrides.
   Computer = portal. Typewriter = documentation.
   ========================================================= */
.desk-typewriter.room-typewriter{
 position:absolute;left:118px;bottom:112px;width:178px;height:auto;z-index:12;
 pointer-events:none;transform:rotate(-.6deg);transform-origin:50% 88%;
 filter:drop-shadow(5px 7px 2px rgba(52,43,99,.18));
 transition:transform .24s ease,filter .24s ease
}
.hotspot-writing{
 position:absolute;left:118px;bottom:112px;width:178px;height:164px;z-index:20;padding:0;
 border:0!important;background:transparent!important;box-shadow:none!important;opacity:1!important;
 transform:none!important;cursor:zoom-in
}
.hotspot-writing span,.hotspot-writing b,.hotspot-writing small{display:none!important}
.hotspot-writing:hover,.hotspot-writing:focus-visible{border:0!important;background:transparent!important;box-shadow:none!important;outline:none!important}
.ghost-bedroom-room:has(.hotspot-writing:hover) .desk-typewriter.room-typewriter,
.ghost-bedroom-room:has(.hotspot-writing:focus-visible) .desk-typewriter.room-typewriter{
 transform:translateY(-4px) rotate(-.6deg) scale(1.035);
 filter:drop-shadow(0 0 13px rgba(121,217,220,.42)) drop-shadow(5px 8px 2px rgba(52,43,99,.18))
}
.typewriter-threshold-layer{position:fixed;inset:0;z-index:11500;display:grid;place-items:center;padding:24px;perspective:1100px}
.typewriter-threshold-layer[hidden]{display:none}
.typewriter-threshold-backdrop{
 position:absolute;inset:0;border:0;cursor:zoom-out;
 background:radial-gradient(circle at 50% 44%,rgba(121,217,220,.10),transparent 34%),rgba(31,24,63,.72);
 backdrop-filter:blur(8px);opacity:0;transition:opacity .38s ease
}
.typewriter-paper-closeup-v64{
 position:relative;z-index:2;width:min(570px,88vw);min-height:590px;padding:56px 62px 52px;
 background:linear-gradient(rgba(246,217,120,.035),rgba(246,217,120,.035)),#fff9f3;
 border:1px solid rgba(52,43,99,.55);box-shadow:0 30px 80px rgba(25,20,48,.42),9px 10px 0 rgba(52,43,99,.13);
 color:#342b63;text-align:left;transform:translateY(115px) scale(.48) rotateX(10deg);
 transform-origin:50% 100%;opacity:0;transition:transform .62s cubic-bezier(.2,.78,.22,1),opacity .3s ease
}
.typewriter-paper-closeup-v64:before{content:"";position:absolute;left:34px;top:0;bottom:0;width:1px;background:rgba(244,166,198,.46)}
.typewriter-threshold-layer.open .typewriter-threshold-backdrop{opacity:1}
.typewriter-threshold-layer.open .typewriter-paper-closeup-v64{transform:none;opacity:1}
.paper-corner-v64{position:absolute;right:24px;top:19px;font:6px "Courier New",monospace;color:rgba(52,43,99,.42)}
.typewriter-paper-closeup-v64 small{font:700 7px "Courier New",monospace;color:#9676d3;letter-spacing:.12em}
.typewriter-paper-closeup-v64 h2{margin:18px 0 25px;font:italic 36px/1.05 Georgia,serif;color:#342b63}
.typewriter-paper-closeup-v64 hr{border:0;border-top:1px solid rgba(52,43,99,.2);margin-bottom:31px}
.typed-line-v64{width:0;overflow:hidden;white-space:nowrap;margin:11px 0;font:700 12px "Courier New",monospace;border-right:1px solid #342b63}
.typewriter-threshold-layer.open .typed-line-v64.one{animation:sacredType 1.05s .48s steps(27,end) forwards}
.typewriter-threshold-layer.open .typed-line-v64.two{animation:sacredType 1.05s 1.58s steps(29,end) forwards}
@keyframes sacredType{to{width:29ch}}
.paper-note-v64{margin-top:42px;font:italic 15px/1.65 Georgia,serif;color:rgba(52,43,99,.78)}
.typewriter-choice-v64{margin-top:55px;padding-top:17px;border-top:1px dashed rgba(52,43,99,.28);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.typewriter-choice-v64 a,.typewriter-choice-v64 button{border:0;background:transparent;padding:0;cursor:pointer;font:700 9px "Courier New",monospace;text-decoration:underline;color:#342b63}
.typewriter-choice-v64 a{color:#9676d3}.typewriter-choice-v64 a:hover,.typewriter-choice-v64 button:hover{color:#f4a6c6}
.paper-bottom-v64{position:absolute;left:62px;bottom:22px;font:italic 7px "Courier New",monospace;color:rgba(52,43,99,.42)}
@media(max-width:900px){.desk-typewriter.room-typewriter{left:112px;bottom:113px;width:168px}.hotspot-writing{left:112px;bottom:113px;width:168px;height:154px}}
@media(max-width:700px){.desk-typewriter.room-typewriter{left:108px;bottom:114px;width:158px}.hotspot-writing{left:108px;bottom:114px;width:158px;height:146px}.typewriter-paper-closeup-v64{min-height:520px;padding:42px 35px 45px}.typewriter-paper-closeup-v64 h2{font-size:28px}.paper-bottom-v64{left:35px}}
@media(prefers-reduced-motion:reduce){.desk-typewriter.room-typewriter,.typewriter-threshold-backdrop,.typewriter-paper-closeup-v64{transition:none!important}.typed-line-v64{width:auto!important;border-right:0!important;animation:none!important}}


/* =========================================================
   V6.7 — SHE ACTUALLY LIVES HERE
   Cohesion pass: same assets, stronger room architecture.
   ========================================================= */

/* Give the room a more physical floor/wall relationship. */
.ghost-bedroom-room{
  isolation:isolate;
}
.ghost-bedroom-room:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:29%;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(52,43,99,.055) 1px,transparent 1px) 0 0/56px 100%,
    linear-gradient(rgba(255,249,243,.06),rgba(52,43,99,.08));
  border-top:1px solid rgba(52,43,99,.13);
  box-shadow:inset 0 12px 22px rgba(52,43,99,.045);
}

/* DESK: turn the thin table into a substantial writing station without new artwork. */
.room-desk{
  z-index:8!important;
  filter:drop-shadow(0 12px 7px rgba(52,43,99,.18))!important;
}
/* visual mass beneath the existing desk image */
.ghost-bedroom-room:before{
  content:"";
  position:absolute;
  left:53px;
  bottom:38px;
  width:355px;
  height:165px;
  z-index:6;
  pointer-events:none;
  border:2px solid rgba(52,43,99,.38);
  border-radius:7px 7px 10px 10px;
  background:
    linear-gradient(90deg,
      #b8a7e8 0 27%,
      #9676d3 27% 28%,
      #b8a7e8 28% 72%,
      #9676d3 72% 73%,
      #b8a7e8 73% 100%);
  box-shadow:
    inset 0 8px rgba(255,249,243,.18),
    inset 0 -10px rgba(52,43,99,.07),
    8px 10px 0 rgba(52,43,99,.08);
}
/* drawers / cubbies, intentionally quiet */
.desk-cohesion-v67{
  position:absolute;left:66px;bottom:50px;width:329px;height:137px;z-index:7;pointer-events:none
}
.desk-cohesion-v67:before,.desk-cohesion-v67:after{
  content:"";position:absolute;bottom:12px;width:77px;height:106px;
  border:1px solid rgba(52,43,99,.34);background:rgba(231,223,245,.34);
  box-shadow:inset 0 0 0 7px rgba(255,249,243,.06)
}
.desk-cohesion-v67:before{left:4px}.desk-cohesion-v67:after{right:4px}
.desk-drawer-lines-v67{
  position:absolute;left:10px;bottom:25px;width:65px;height:8px;border-top:1px solid rgba(52,43,99,.35);
  box-shadow:0 25px 0 -3px rgba(52,43,99,.25),244px 0 0 0 rgba(52,43,99,.18),244px 25px 0 -3px rgba(52,43,99,.18)
}

/* Anchor objects to the desktop instead of letting them float as equal stickers. */
.desk-typewriter.room-typewriter{
  left:102px!important;
  bottom:118px!important;
  width:184px!important;
  z-index:14!important;
  filter:drop-shadow(4px 7px 2px rgba(52,43,99,.24))!important;
}
.hotspot-writing{
  left:102px!important;
  bottom:118px!important;
  width:184px!important;
  height:169px!important;
  z-index:24!important;
}
.room-computer{
  z-index:13!important;
  filter:drop-shadow(4px 7px 2px rgba(52,43,99,.20))!important;
}
.room-typewriter,.room-computer,.room-music,.room-reading{
  transform-origin:50% 100%;
}

/* A soft shared desk shadow visually binds the machines and papers to one surface. */
.desk-surface-shadow-v67{
  position:absolute;left:70px;bottom:112px;width:325px;height:24px;z-index:11;pointer-events:none;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(52,43,99,.20),rgba(52,43,99,0) 70%);
  filter:blur(3px)
}

/* Evidence is subordinate to the machine: papers become a little work cluster. */
.room-paper,.room-note,.room-polaroid,.room-cd{
  filter:drop-shadow(2px 3px 1px rgba(52,43,99,.14));
}

/* Right side = softer living/reading zone. Keep characters from visually shouting over desk. */
.room-reading{filter:drop-shadow(3px 5px 2px rgba(52,43,99,.13))}
.room-bed{filter:drop-shadow(0 9px 5px rgba(52,43,99,.12))}

/* Ground the rug and floor objects. */
.room-rug{z-index:3!important;filter:drop-shadow(0 5px 3px rgba(52,43,99,.10))!important}

/* Hotspots should reveal interaction, not draw boxes over the set. */
.room-hotspot{
  background:rgba(255,249,243,.025)!important;
  border-color:transparent!important;
  box-shadow:none!important;
}
.room-hotspot:hover,.room-hotspot:focus-visible{
  background:rgba(255,249,243,.055)!important;
  border-color:rgba(255,249,243,.16)!important;
}
.hotspot-writing:hover,.hotspot-writing:focus-visible{
  background:transparent!important;border-color:transparent!important
}

/* The room is the hero; reduce visual separation below it. */
.after-room-whisper-v63{
  margin-top:28px!important;
  color:rgba(52,43,99,.42)!important
}

@media(max-width:900px){
  .ghost-bedroom-room:before{left:48px;width:338px}
  .desk-cohesion-v67{left:61px;width:312px}
  .desk-typewriter.room-typewriter{left:99px!important;width:174px!important}
  .hotspot-writing{left:99px!important;width:174px!important;height:160px!important}
  .desk-surface-shadow-v67{left:65px;width:306px}
}
@media(max-width:700px){
  .ghost-bedroom-room:before{left:43px;width:318px;height:153px}
  .desk-cohesion-v67{left:56px;width:292px;height:126px}
  .desk-typewriter.room-typewriter{left:94px!important;width:164px!important}
  .hotspot-writing{left:94px!important;width:164px!important;height:151px!important}
  .desk-surface-shadow-v67{left:60px;width:287px}
}


/* V6.7.1 — REMOVE THE FAUX DESK BLOCK
   The existing illustrated table stays visible; no CSS furniture drawn over it. */
.ghost-bedroom-room:before{display:none!important;content:none!important}
.desk-cohesion-v67{display:none!important}

/* Keep only subtle grounding beneath the real desk/table artwork. */
.desk-surface-shadow-v67{
  left:72px!important;
  bottom:102px!important;
  width:320px!important;
  height:18px!important;
  opacity:.55!important;
  z-index:7!important;
}

/* V6.9 — GHOST GIRL HAS A LIFE: content + discoverability only */
.about-grid-v69{grid-template-columns:minmax(0,1.8fr) minmax(220px,.58fr);gap:22px}
.about-manifesto-v69{font-size:17px;line-height:1.95;padding:30px 34px;background:linear-gradient(180deg,#fffdfb 0%,#fff9f3 100%)}
.about-manifesto-v69 p{margin:0 0 1.35em}.about-manifesto-v69 h2{margin-bottom:22px}
.about-manifesto-v69 .about-beat{margin:34px 0;font-size:21px}.about-manifesto-v69 .about-thesis{margin:34px 0;padding:18px 20px;font-size:17px}.about-manifesto-v69 .about-signoff{margin-top:36px;font-size:20px}
.personal-note-v69 .inside{font-family:Georgia,serif;font-style:italic;line-height:1.6}.personal-note-v69 small{font:700 8px "Courier New",monospace;color:#9676d3}
.hotspot-about{opacity:.9!important;border-style:solid!important;background:rgba(255,249,243,.86)!important;box-shadow:3px 3px 0 rgba(184,167,232,.32)!important}
.hotspot-about:hover{opacity:1!important;transform:translateY(-2px) rotate(-1deg)!important}.hotspot-about b{font-size:8px!important}.hotspot-about small{opacity:1!important}
.currently-watching-v69{margin:10px 0 8px;padding:9px 10px;border:1px dotted #9676d3;background:rgba(255,249,243,.72);font:9px "Courier New",monospace}.currently-watching-v69>small{font-weight:700;color:#7659b4}.currently-watching-v69 p{margin:5px 0}.currently-watching-v69 p span{color:#82689b}
.reading-panel-v69,.music-panel-v69{align-items:flex-start;max-height:min(78vh,620px);overflow:auto}.reading-panel-v69 img,.music-panel-v69 img{position:sticky;top:10px}.current-stack-v69,.ghost-mix-v69{min-width:0}.current-stack-v69 h3,.ghost-mix-v69 h3{font-size:15px;margin:12px 0 2px}.current-stack-v69 p,.ghost-mix-v69 p{margin:0 0 7px;font-size:10px}.current-stack-v69 p span,.ghost-mix-v69 p span{display:block;margin-top:2px;font:700 7px "Courier New",monospace;color:#9676d3}.current-stack-v69 em{display:block;margin:13px 0 8px}.object-memory-v61{display:block;margin-top:10px}
@media(max-width:760px){.about-grid-v69{grid-template-columns:1fr}.about-manifesto-v69{padding:22px 20px;font-size:16px}.hotspot-about{display:flex!important;left:7%!important;top:315px!important;max-width:115px}.reading-panel-v69,.music-panel-v69{max-height:76vh}}

/* =========================================================
   V6.10 — CLEAR PATHS, DEEPER WINDOWS
   Navigation clarity + scroll-safe media panels + sacred paper.
   ========================================================= */

/* The room can be mysterious; its main doors should not be. */
.ghost-bedroom-page .room-hotspot:not(.hotspot-writing):not(.hotspot-secret){
  min-height:30px;
  padding:5px 8px!important;
  background:rgba(255,249,243,.78)!important;
  border:1px solid rgba(52,43,99,.28)!important;
  box-shadow:2px 3px 0 rgba(52,43,99,.08)!important;
  opacity:.88!important;
  backdrop-filter:blur(1px);
}
.ghost-bedroom-page .room-hotspot:not(.hotspot-writing):not(.hotspot-secret) b{
  opacity:1!important;
  transform:none!important;
  font-size:7px!important;
}
.ghost-bedroom-page .room-hotspot:not(.hotspot-writing):not(.hotspot-secret) small{
  opacity:0!important;
  max-height:0;
  overflow:hidden;
  margin-top:0;
  transform:none!important;
}
.ghost-bedroom-page .room-hotspot:not(.hotspot-writing):not(.hotspot-secret):hover small,
.ghost-bedroom-page .room-hotspot:not(.hotspot-writing):not(.hotspot-secret):focus-visible small{
  opacity:1!important;
  max-height:18px;
  margin-top:2px;
}
.ghost-bedroom-page.room-learned .room-hotspot:not(.hotspot-writing):not(.hotspot-secret){opacity:.78!important}
.ghost-bedroom-page.room-learned .room-hotspot:not(.hotspot-writing):not(.hotspot-secret):hover,
.ghost-bedroom-page.room-learned .room-hotspot:not(.hotspot-writing):not(.hotspot-secret):focus-visible{opacity:1!important}

/* Make the modal itself the viewport; the content scrolls below its title bar. */
.room-panel-layer{padding:clamp(10px,3vh,24px)!important}
.room-panel{
  width:min(520px,94vw)!important;
  max-height:min(88vh,720px)!important;
  overflow:hidden!important;
  display:flex;
  flex-direction:column;
}
.room-panel-bar{flex:0 0 auto;position:sticky;top:0;z-index:5}
.reading-panel-v69,.music-panel-v69,.computer-screen-v6,.tarot-panel-v6{
  flex:1 1 auto;
  min-height:0;
  max-height:none!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
}
.reading-panel-v69,.music-panel-v69{padding-bottom:32px!important}

/* The typewriter threshold should read as a physical document, not a white UI card. */
.typewriter-paper-closeup-v64{
  background:
    linear-gradient(90deg,transparent 0 41px,rgba(244,166,198,.32) 41px 42px,transparent 42px),
    repeating-linear-gradient(0deg,rgba(52,43,99,.025) 0 1px,transparent 1px 29px),
    linear-gradient(135deg,#fffdf7 0%,#fff9f3 58%,#f7f0e8 100%)!important;
  border:1px solid rgba(80,66,100,.48)!important;
  box-shadow:0 34px 90px rgba(25,20,48,.5),10px 12px 0 rgba(52,43,99,.14)!important;
  clip-path:polygon(0 .7%,4% 0,9% .5%,15% .1%,22% .6%,29% .15%,36% .55%,44% .1%,52% .5%,61% .15%,70% .55%,78% .1%,87% .5%,94% .12%,100% .65%,99.5% 99.2%,93% 100%,86% 99.45%,77% 99.9%,68% 99.4%,58% 99.9%,48% 99.45%,39% 99.95%,30% 99.4%,21% 99.9%,12% 99.4%,4% 99.9%,.4% 99.2%);
}
.typewriter-paper-closeup-v64:before{left:41px!important;background:rgba(244,166,198,.34)!important}
.typewriter-paper-closeup-v64:after{
  content:"typed at 2:17 AM // ribbon slightly haunted";
  position:absolute;right:30px;bottom:20px;
  font:italic 6px "Courier New",monospace;color:rgba(52,43,99,.36);
}

@media(max-width:700px){
 .ghost-bedroom-page .room-hotspot:not(.hotspot-writing):not(.hotspot-secret){padding:5px 6px!important;min-height:27px}
 .ghost-bedroom-page .room-hotspot:not(.hotspot-writing):not(.hotspot-secret) span{font-size:10px}
 .ghost-bedroom-page .room-hotspot:not(.hotspot-writing):not(.hotspot-secret) b{font-size:6px!important}
 .room-panel{max-height:90vh!important}
 .reading-panel-v69,.music-panel-v69{display:block!important;text-align:left!important;padding:18px!important}
 .reading-panel-v69 img,.music-panel-v69 img{position:static!important;float:right;width:92px!important;margin:0 0 12px 14px}
 .current-stack-v69,.ghost-mix-v69{display:block}
 .typewriter-paper-closeup-v64{max-height:88vh;overflow-y:auto;padding-bottom:70px!important}
}

/* =========================================================
   V6.10.1 — IOS / SHORT-VIEWPORT MODAL FIX
   The whole dialog always stays inside the visible browser viewport;
   only the content beneath the title bar scrolls.
   ========================================================= */
.room-panel-layer{
  box-sizing:border-box!important;
  height:100vh!important;
  height:100dvh!important;
  min-height:0!important;
  padding:12px!important;
  overflow:hidden!important;
}
.room-panel{
  box-sizing:border-box!important;
  width:min(520px,calc(100vw - 24px))!important;
  height:min(720px,calc(100vh - 24px))!important;
  height:min(720px,calc(100dvh - 24px))!important;
  max-height:none!important;
  min-height:0!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
}
.room-panel-bar{
  flex:0 0 auto!important;
  position:relative!important;
  top:auto!important;
}
.reading-panel-v69,.music-panel-v69,.computer-screen-v6,.tarot-panel-v6{
  box-sizing:border-box!important;
  flex:1 1 0!important;
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  overflow-x:hidden!important;
  overflow-y:scroll!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior:contain!important;
  padding-bottom:52px!important;
}
@supports not (height:100dvh){
  .room-panel-layer{height:100vh!important}
  .room-panel{height:calc(100vh - 24px)!important}
}
@media(max-width:700px){
  .room-panel-layer{padding:8px!important}
  .room-panel{
    width:calc(100vw - 16px)!important;
    height:calc(100vh - 16px)!important;
    height:calc(100dvh - 16px)!important;
  }
  .reading-panel-v69,.music-panel-v69{padding:16px 16px 64px!important}
}

/* =========================================================
   V6.10.2 — ONE WINDOW AT A TIME
   V6.10.1's flex override accidentally defeated the HTML hidden
   attribute, causing inactive room panels to stack behind/above the
   active one. Preserve the viewport-safe modal, but hide inactive panels.
   ========================================================= */
.room-panel[hidden]{display:none!important}
.room-panel:not([hidden]){display:flex!important}

/* =========================================================
   V6.10.3 — FLOAT OVER THE ROOM / READABLE WINDOWS
   Final bedroom usability pass: compact centered Y2K windows,
   readable type, and scrolling only when the content needs it.
   ========================================================= */
.room-panel-layer{
  position:fixed!important;
  inset:0!important;
  z-index:10000!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100vw!important;
  height:100vh!important;
  height:100dvh!important;
  padding:clamp(12px,3vw,28px)!important;
  overflow:hidden!important;
}
.room-panel-layer[hidden]{display:none!important}
.room-panel-backdrop{position:absolute!important;inset:0!important}
.room-panel{
  position:relative!important;
  inset:auto!important;
  margin:0!important;
  width:min(560px,calc(100vw - 32px))!important;
  height:auto!important;
  max-height:calc(100vh - 40px)!important;
  max-height:calc(100dvh - 40px)!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
  box-shadow:12px 14px 0 rgba(52,43,99,.22),0 18px 55px rgba(52,43,99,.22)!important;
}
.room-panel[hidden]{display:none!important}
.room-panel-bar{flex:0 0 auto!important;font-size:10px!important;padding:8px 10px!important}
.room-panel-bar button{font-size:16px!important;line-height:1!important;width:28px;height:26px}
.reading-panel-v69,.music-panel-v69,.computer-screen-v6,.tarot-panel-v6{
  flex:0 1 auto!important;
  min-height:0!important;
  max-height:calc(100vh - 105px)!important;
  max-height:calc(100dvh - 105px)!important;
  overflow-y:auto!important;
  padding:22px!important;
}
.reading-panel-v69,.music-panel-v69{gap:22px!important;align-items:flex-start!important}
.reading-panel-v69 img,.music-panel-v69 img{width:122px!important;flex:0 0 122px!important;position:sticky!important;top:4px!important}
.current-stack-v69>small:first-child,.ghost-mix-v69>small:first-child{font-size:8px!important;line-height:1.45!important;letter-spacing:.04em}
.current-stack-v69 h3,.ghost-mix-v69 h3{font-size:18px!important;line-height:1.15!important;margin:13px 0 4px!important}
.current-stack-v69 p,.ghost-mix-v69 p{font-size:12px!important;line-height:1.45!important;margin:0 0 10px!important}
.current-stack-v69 p span,.ghost-mix-v69 p span{font-size:8px!important;line-height:1.4!important;margin-top:3px!important}
.current-stack-v69 em,.ghost-mix-v69 em{font-size:10px!important;line-height:1.5!important}
.object-memory-v61{font-size:8px!important;line-height:1.5!important;margin-top:12px!important}
.fake-track{margin:14px 0 10px!important}
@supports not (height:100dvh){
  .room-panel-layer{height:100vh!important}
  .room-panel{max-height:calc(100vh - 40px)!important}
  .reading-panel-v69,.music-panel-v69,.computer-screen-v6,.tarot-panel-v6{max-height:calc(100vh - 105px)!important}
}
@media(max-width:700px){
  .room-panel-layer{padding:10px!important}
  .room-panel{width:calc(100vw - 20px)!important;max-height:calc(100dvh - 20px)!important}
  .reading-panel-v69,.music-panel-v69,.computer-screen-v6,.tarot-panel-v6{max-height:calc(100dvh - 82px)!important;padding:18px!important}
  .reading-panel-v69,.music-panel-v69{display:block!important;text-align:left!important}
  .reading-panel-v69 img,.music-panel-v69 img{position:static!important;float:right!important;width:88px!important;margin:0 0 12px 14px!important}
  .current-stack-v69 h3,.ghost-mix-v69 h3{font-size:16px!important}
  .current-stack-v69 p,.ghost-mix-v69 p{font-size:11px!important}
}


/* =========================================================
   V6.11.1 — WORKSTATION STAGING
   Same furniture, better scale and hierarchy.
   ========================================================= */
.room-desk-scene{
  left:190px!important;
  bottom:20px!important;
  width:445px!important;
  height:290px!important;
  z-index:4!important;
}
.room-desk-furniture{
  position:absolute;
  left:8px;
  bottom:0;
  width:390px;
  height:auto;
  z-index:7;
  pointer-events:none;
  filter:drop-shadow(0 8px 5px rgba(52,43,99,.13));
}
.room-desk-chair{
  position:absolute;
  left:255px;
  bottom:-34px;
  width:170px;
  height:auto;
  z-index:8;
  pointer-events:none;
  filter:drop-shadow(2px 6px 3px rgba(52,43,99,.12));
}
.room-desk-scene .desk-top,.room-desk-scene .desk-leg{display:none!important}
.desk-surface-shadow-v67{display:none!important}

/* The typewriter gets the clear open half of the desk. */
.desk-typewriter.room-typewriter{
  left:205px!important;
  bottom:140px!important;
  width:142px!important;
  z-index:14!important;
  transform:rotate(-.25deg)!important;
}
.hotspot-writing{
  left:205px!important;
  bottom:140px!important;
  width:142px!important;
  height:132px!important;
  z-index:24!important;
}
/* Supporting desk objects stay small and out of the typewriter silhouette. */
.desk-lamp{left:22px!important;bottom:136px!important;transform:scale(.70);transform-origin:left bottom}
.desk-cup{left:152px!important;bottom:139px!important;transform:scale(.66);transform-origin:center bottom}
.desk-cd{right:78px!important;bottom:140px!important;transform:rotate(-7deg) scale(.66)}
.translucent-phone{right:4px!important;bottom:140px!important;transform:rotate(2deg) scale(.78);transform-origin:center bottom}

/* Computer Friend occupies the left side of the workstation, not the typewriter's paper. */
.room-smiley-computer{left:294px!important;bottom:154px!important;width:68px!important}
/* Deborah remains off the desktop. */
.ghost-bedroom-page .room-ghost-tropical{right:385px!important;top:374px!important;width:62px!important}

@media(max-width:900px){
  .room-desk-scene{left:140px!important;bottom:22px!important;transform:scale(.84)!important;transform-origin:left bottom!important}
}
@media(max-width:700px){
  .room-desk-scene{left:-2px!important;bottom:22px!important;transform:scale(.67)!important;transform-origin:left bottom!important}
}
@media(max-width:480px){
  .room-desk-scene{left:-38px!important;bottom:20px!important;transform:scale(.58)!important;transform-origin:left bottom!important}
}

/* =========================================================
   V6.11.2 — THE CHAIR TURNS
   A decisive workstation composition: angled chair, clear typewriter,
   computer on its own side. No new decoration.
   ========================================================= */
.room-desk-chair{
  left:275px!important;
  bottom:-28px!important;
  width:225px!important;
  z-index:12!important;
  filter:drop-shadow(3px 7px 4px rgba(52,43,99,.14))!important;
}
.desk-typewriter.room-typewriter{
  left:218px!important;
  bottom:142px!important;
  width:162px!important;
  z-index:14!important;
  transform:rotate(-.15deg)!important;
}
.hotspot-writing{
  left:218px!important;
  bottom:142px!important;
  width:162px!important;
  height:145px!important;
}
/* Give the machine breathing room: the little props no longer crowd its silhouette. */
.desk-cup,.desk-cd{display:none!important}
.translucent-phone{right:-10px!important;bottom:142px!important;transform:rotate(2deg) scale(.70)!important}
.desk-lamp{left:18px!important;bottom:138px!important;transform:scale(.66)!important}
/* Computer Friend clearly owns the left side of the workstation. */
.room-smiley-computer{left:248px!important;bottom:156px!important;width:70px!important}
.hotspot-computer{left:232px!important;bottom:213px!important}

/* =========================================================
   V6.11.3 — SIT ON THE DESK
   Precision pass only: chair larger; typewriter + computer raised.
   ========================================================= */
.room-desk-chair{
  left:286px!important;
  bottom:-42px!important;
  width:282px!important;
}
.desk-typewriter.room-typewriter{
  left:218px!important;
  bottom:174px!important;
  width:162px!important;
}
.hotspot-writing{
  left:218px!important;
  bottom:174px!important;
  width:162px!important;
  height:145px!important;
}
.room-smiley-computer{
  left:248px!important;
  bottom:194px!important;
  width:70px!important;
}
.hotspot-computer{
  left:232px!important;
  bottom:251px!important;
}


/* =========================================================
   V6.11.4 — READABLE ROOM
   Polish pass: readable interface, no accidental floating papers,
   calmer hotspot tags, and a workstation that sits on the desk.
   ========================================================= */

/* The old "sparkle" asset is actually a paper-sheet sprite. It is retired. */
.room-sparkle-a,.room-sparkle-b{display:none!important}

/* Functional text should be readable; microtype is reserved for atmosphere. */
.ghost-bedroom-page .room-hotspot:not(.hotspot-writing):not(.hotspot-secret){
  min-height:34px!important;
  padding:7px 10px!important;
  background:rgba(255,249,243,.84)!important;
  border:1px solid rgba(52,43,99,.22)!important;
  border-radius:2px!important;
  box-shadow:2px 3px 0 rgba(184,167,232,.22)!important;
  opacity:.94!important;
  backdrop-filter:blur(2px);
}
.ghost-bedroom-page .room-hotspot:not(.hotspot-writing):not(.hotspot-secret) span{font-size:13px!important}
.ghost-bedroom-page .room-hotspot:not(.hotspot-writing):not(.hotspot-secret) b{
  font-size:9px!important;
  line-height:1.2!important;
  letter-spacing:.06em!important;
}
.ghost-bedroom-page .room-hotspot:not(.hotspot-writing):not(.hotspot-secret) small{
  font-size:7px!important;
  line-height:1.25!important;
}
.ghost-bedroom-page .room-hotspot:not(.hotspot-writing):not(.hotspot-secret):hover,
.ghost-bedroom-page .room-hotspot:not(.hotspot-writing):not(.hotspot-secret):focus-visible{
  background:#fff9f3!important;
  border-color:rgba(150,118,211,.48)!important;
  box-shadow:3px 4px 0 rgba(244,166,198,.25)!important;
}

.room-discovery-hint{font-size:9px!important;bottom:-27px!important}
.room-ambient-status{font-size:8px!important;bottom:-27px!important}
.after-room-whisper-v63{font-size:16px!important;line-height:1.45!important;letter-spacing:.02em!important}
.guestbook-scrap-v6{font-size:10px!important;line-height:1.55!important}
.guestbook-scrap-v6 b{font-size:9px!important}.guestbook-scrap-v6 a{font-size:9px!important}
.bottom-haunt .tiny-badge{font-size:10px!important}.bottom-haunt .bottom-note{font-size:11px!important}.bottom-haunt .last-update{font-size:9px!important}
.foot-v44>div{font-size:11px!important;line-height:1.55!important}.foot-v44 span,.foot-v44 a{font-size:10px!important}
.copyright{font-size:9px!important}

/* Keep room flavor legible without making it shout. */
.room-away-message b{font-size:8px!important}.room-away-message span{font-size:7px!important}.room-away-message em{font-size:8px!important;line-height:1.35!important}
.wall-scribble small{font-size:9px!important}.window-sill{font-size:7px!important}

/* Workstation: tuck the typewriter farther back onto the desktop. */
.desk-typewriter.room-typewriter{
  left:214px!important;
  bottom:184px!important;
  width:158px!important;
  z-index:14!important;
}
.hotspot-writing{
  left:214px!important;
  bottom:184px!important;
  width:158px!important;
  height:142px!important;
}
/* Computer Friend gets a clear perch on the left side instead of hiding in the drawers. */
.room-smiley-computer{
  left:292px!important;
  bottom:216px!important;
  width:76px!important;
  z-index:13!important;
}
.hotspot-computer{left:275px!important;bottom:270px!important}

/* Chair is finally furniture, not a button. Leave her alone. */
.room-desk-chair{left:286px!important;bottom:-42px!important;width:282px!important}

@media(max-width:700px){
  .ghost-bedroom-page .room-hotspot:not(.hotspot-writing):not(.hotspot-secret){padding:6px 8px!important;min-height:31px!important}
  .ghost-bedroom-page .room-hotspot:not(.hotspot-writing):not(.hotspot-secret) b{font-size:8px!important}
  .ghost-bedroom-page .room-hotspot:not(.hotspot-writing):not(.hotspot-secret) span{font-size:12px!important}
  .room-discovery-hint{font-size:8px!important}
}

/* =========================================================
   V6.12.0 — THE ROOM FINDS ITS PERSPECTIVE
   New illustrated bed/window become the architectural anchors.
   Workstation is restaged against that shared spatial language.
   ========================================================= */
.ghost-room-window-art{
  position:absolute;right:48px;top:78px;width:350px;height:auto;z-index:2;
  filter:drop-shadow(8px 10px 0 rgba(52,43,99,.09));pointer-events:none;
}
.ghost-room-bed-art{
  position:absolute;right:30px;bottom:34px;width:405px;height:auto;z-index:4;
  filter:drop-shadow(0 10px 6px rgba(52,43,99,.12));pointer-events:none;
}
/* The rug now sits under the chair instead of fighting the bed. */
.room-rug{left:36%!important;bottom:15px!important;width:285px!important;height:88px!important;opacity:.66!important;z-index:2!important}
/* Pull the whole workstation left and down into its own visual zone. */
.room-desk-scene{left:168px!important;bottom:22px!important;width:455px!important;height:300px!important}
.room-desk-furniture{left:0!important;bottom:0!important;width:405px!important}
/* Chair tucks toward the desk, angled asset supplies perspective. */
.room-desk-chair{left:290px!important;bottom:-32px!important;width:255px!important;z-index:12!important}
/* Typewriter rests on the open desktop rather than floating over its edge. */
.desk-typewriter.room-typewriter{left:207px!important;bottom:181px!important;width:150px!important;z-index:15!important;transform:rotate(-.2deg)!important}
.hotspot-writing{left:207px!important;bottom:181px!important;width:150px!important;height:136px!important}
/* Computer Friend is a small desk companion, clearly separated from the typewriter. */
.room-smiley-computer{left:452px!important;bottom:230px!important;width:72px!important;z-index:14!important;transform:rotate(-2deg)!important}
.hotspot-computer{left:435px!important;bottom:277px!important}
/* Keep bed interactions aligned with the new bed footprint. */
.hotspot-reading{right:38px!important;bottom:58px!important;z-index:20!important}
.hotspot-tarot{right:286px!important;bottom:126px!important;z-index:20!important}
/* New art replaces the old CSS-built furniture/window completely. */
.miami-bedroom-window,.room-bed{display:none!important}
@media(max-width:900px){
  .ghost-room-window-art{right:28px;width:330px}
  .ghost-room-bed-art{right:18px;width:380px}
}

/* =========================================================
   V6.12.1 — EVERYTHING HAS A PLACE
   Ground the workstation, separate the machines, and give
   every ghost a physical relationship to the room.
   ========================================================= */
/* The flipped bed turns back into the room and creates an aisle. */
.ghost-room-bed-art{right:18px!important;bottom:28px!important;width:410px!important;z-index:4!important}

/* Desk pushed back to the wall/floor seam. A soft contact shadow grounds it. */
.room-desk-scene{left:164px!important;bottom:34px!important;width:455px!important;height:300px!important}
.room-desk-scene:after{
  content:"";position:absolute;left:18px;right:46px;bottom:-3px;height:18px;
  background:radial-gradient(ellipse at center,rgba(52,43,99,.18) 0%,rgba(52,43,99,.08) 45%,rgba(52,43,99,0) 74%);
  filter:blur(4px);z-index:0;pointer-events:none;
}
.room-desk-furniture{z-index:5!important}

/* Sacred machine gets the open right half; Computer Friend gets the left. */
.desk-typewriter.room-typewriter{left:225px!important;bottom:179px!important;width:146px!important;z-index:15!important}
.hotspot-writing{left:225px!important;bottom:179px!important;width:146px!important;height:132px!important}
.room-smiley-computer{left:205px!important;bottom:250px!important;width:66px!important;z-index:14!important;transform:rotate(-2deg)!important}
.hotspot-computer{left:350px!important;bottom:282px!important}

/* Chair is pulled into the aisle and tucked under the desk edge. */
.room-desk-chair{left:300px!important;bottom:-31px!important;width:248px!important;z-index:12!important}
.room-rug{left:37%!important;bottom:14px!important;width:275px!important;height:84px!important}

/* Ghosts now inhabit surfaces instead of arbitrary coordinates. */
.ghost-bedroom-page .room-ghost-reading{
  width:96px!important;right:48px!important;bottom:104px!important;z-index:11!important;
  transform:rotate(2deg)!important;
}
.ghost-bedroom-page .room-ghost-tropical{
  width:58px!important;right:365px!important;top:auto!important;bottom:210px!important;z-index:12!important;
  transform:rotate(-3deg)!important;
}
.ghost-bedroom-page .room-ghost-music{
  left:66px!important;bottom:36px!important;width:108px!important;z-index:9!important;
}
/* Keep interaction tags near their residents. */
.hotspot-reading{right:30px!important;bottom:48px!important}
.hotspot-music{left:48px!important;bottom:14px!important}
.hotspot-tarot{right:286px!important;bottom:120px!important}

@media(max-width:900px){
  .ghost-room-bed-art{right:8px!important;width:382px!important}
  .room-desk-scene{left:135px!important}
}

/* =========================================================
   V6.12.2 — BACK AGAINST THE WALL
   Smaller desk, true desktop placement, quieter grounding.
   ========================================================= */
/* The workstation recedes toward the back wall instead of competing with the bed. */
.room-desk-scene{
  left:176px!important;
  bottom:52px!important;
  width:410px!important;
  height:270px!important;
}
.room-desk-furniture{
  left:8px!important;
  bottom:0!important;
  width:330px!important;
  filter:drop-shadow(0 3px 2px rgba(52,43,99,.08))!important;
}
/* Kill the broad floor smudge; the tiny furniture shadow above is enough. */
.room-desk-scene:after{display:none!important;content:none!important}

/* Put both machines ON the desktop, with breathing room between them. */
.room-smiley-computer{
  left:72px!important;
  bottom:218px!important;
  width:58px!important;
  z-index:14!important;
  transform:rotate(-2deg)!important;
}
.hotspot-computer{left:244px!important;bottom:292px!important}
.desk-typewriter.room-typewriter{
  left:174px!important;
  bottom:211px!important;
  width:128px!important;
  z-index:15!important;
  transform:rotate(-.2deg)!important;
}
.hotspot-writing{
  left:174px!important;
  bottom:211px!important;
  width:128px!important;
  height:116px!important;
}

/* Pull the chair toward the desk and off the center of the rug. */
.room-desk-chair{
  left:225px!important;
  bottom:-38px!important;
  width:218px!important;
  z-index:12!important;
}
.room-rug{left:34%!important;bottom:14px!important;width:270px!important;height:82px!important}

/* Tiny inhabitant cleanup: reading ghost comes onto the mattress; Deborah hugs the bed/window edge. */
.ghost-bedroom-page .room-ghost-reading{
  right:70px!important;
  bottom:116px!important;
  width:90px!important;
}
.ghost-bedroom-page .room-ghost-tropical{
  right:350px!important;
  bottom:198px!important;
  width:54px!important;
}

@media(max-width:900px){
  .room-desk-scene{left:142px!important;bottom:48px!important;transform:scale(.94)!important;transform-origin:left bottom!important}
}

/* =========================================================
   V6.13.0 — SURGICAL DESK ALIGNMENT
   Computer right. Typewriter down. Chair in. Nothing else.
   ========================================================= */
.room-smiley-computer{
  left:168px!important;
  bottom:218px!important;
}
.hotspot-computer{
  left:332px!important;
  bottom:292px!important;
}
.desk-typewriter.room-typewriter{
  left:174px!important;
  bottom:199px!important;
}
.hotspot-writing{
  left:174px!important;
  bottom:199px!important;
  width:128px!important;
  height:116px!important;
}
.room-desk-chair{
  left:207px!important;
  bottom:-22px!important;
}

/* =========================================================
   V6.14.0 — ONE WORKSTATION
   Treat desk + machines + chair as one composition.
   ========================================================= */
/* One desktop line: computer on the left, typewriter on the right. */
.room-smiley-computer{
  left:252px!important;
  bottom:246px!important;
  width:60px!important;
  z-index:14!important;
  transform:rotate(-2deg)!important;
}
.desk-typewriter.room-typewriter{
  left:184px!important;
  bottom:177px!important;
  width:128px!important;
  z-index:15!important;
  transform:rotate(-.2deg)!important;
}
.hotspot-writing{
  left:184px!important;
  bottom:177px!important;
  width:128px!important;
  height:116px!important;
}
/* The chair belongs to the workstation now: tucked in, but still visibly pulled away. */
.room-desk-chair{
  left:188px!important;
  bottom:-7px!important;
  width:218px!important;
  z-index:12!important;
}
/* The aqua phone was reading as a floating object; remove it from this composition. */
.translucent-phone{display:none!important}
/* Let the object be the invitation. COMPUTER appears only when the visitor investigates it. */
.hotspot-computer{
  left:244px!important;
  bottom:245px!important;
  width:82px!important;
  height:72px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  opacity:.02!important;
}
.hotspot-computer span,.hotspot-computer b,.hotspot-computer small{display:none!important}
.hotspot-computer:hover,.hotspot-computer:focus-visible{
  opacity:1!important;
  outline:1px dashed rgba(52,43,99,.22)!important;
  outline-offset:3px!important;
}

/* =========================================================
   V6.14.1 — KILL THE GHOST PAPER
   The computer hotspot stays fully clickable but has no visible
   card/background/border at rest or on hover/focus.
   ========================================================= */
.ghost-bedroom-page .room-hotspot.hotspot-computer,
.ghost-bedroom-page.room-learned .room-hotspot.hotspot-computer,
.ghost-bedroom-page .room-hotspot.hotspot-computer:hover,
.ghost-bedroom-page .room-hotspot.hotspot-computer:focus-visible,
.ghost-bedroom-page.room-learned .room-hotspot.hotspot-computer:hover,
.ghost-bedroom-page.room-learned .room-hotspot.hotspot-computer:focus-visible{
  background:transparent!important;
  border:0!important;
  border-color:transparent!important;
  border-radius:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  opacity:0!important;
  outline:0!important;
  outline-offset:0!important;
  transform:none!important;
}
.ghost-bedroom-page .room-hotspot.hotspot-computer span,
.ghost-bedroom-page .room-hotspot.hotspot-computer b,
.ghost-bedroom-page .room-hotspot.hotspot-computer small{display:none!important}


/* =========================================================
   V6.14.2 — GHOST PAPER: SOURCE REMOVAL
   The old computer hotspot button is gone from the HTML.
   Computer Friend itself is now the click target.
   ========================================================= */
.room-smiley-computer{pointer-events:auto!important;cursor:pointer!important}
.room-smiley-computer:focus-visible{outline:2px dashed rgba(52,43,99,.35);outline-offset:4px}

/* =========================================================
   V6.14.3 — NO MORE HOVER PAPER
   The remaining cream rectangle was the ABOUT hotspot expanding
   into its helper copy, not Computer Friend. Keep navigation clear
   without letting any hotspot grow into a paper card.
   ========================================================= */
.hotspot-about{
  width:auto!important;
  height:30px!important;
  min-height:30px!important;
  max-height:30px!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  padding:5px 8px!important;
}
.hotspot-about small{display:none!important}
.hotspot-about:hover,.hotspot-about:focus-visible{
  height:30px!important;
  min-height:30px!important;
  max-height:30px!important;
  overflow:hidden!important;
}
/* Computer Friend is the only computer hit target; its own image reacts. */
.room-smiley-computer:hover,
.room-smiley-computer:focus-visible{
  filter:drop-shadow(0 0 8px rgba(121,217,220,.65))!important;
  transform:translateY(-2px) rotate(-2deg)!important;
  outline:0!important;
}

/* =========================================================
   V6.15.0 — THE DESK FINALLY BELONGS HERE
   New thin-line two-drawer desk + one clean workstation.
   Also removes all helper-copy hover expansion from room tags.
   ========================================================= */
.room-desk-furniture{
  left:8px!important;
  bottom:0!important;
  width:330px!important;
  filter:drop-shadow(0 3px 2px rgba(52,43,99,.07))!important;
}
/* Computer left / typewriter right, both seated on the same desktop. */
.room-smiley-computer{
  left:252px!important;
  bottom:246px!important;
  width:60px!important;
  z-index:14!important;
}
.desk-typewriter.room-typewriter{
  left:184px!important;
  bottom:177px!important;
  width:128px!important;
  z-index:15!important;
}
.hotspot-writing{
  left:184px!important;
  bottom:177px!important;
  width:128px!important;
  height:116px!important;
}
.room-desk-chair{
  left:188px!important;
  bottom:-7px!important;
  width:218px!important;
  z-index:12!important;
}
/* No room label is allowed to turn into a floating paper on hover. */
.ghost-bedroom-page .room-hotspot:not(.hotspot-writing):not(.hotspot-secret) small{
  display:none!important;
  max-height:0!important;
  margin:0!important;
}
.ghost-bedroom-page .room-hotspot:not(.hotspot-writing):not(.hotspot-secret),
.ghost-bedroom-page .room-hotspot:not(.hotspot-writing):not(.hotspot-secret):hover,
.ghost-bedroom-page .room-hotspot:not(.hotspot-writing):not(.hotspot-secret):focus-visible{
  height:auto!important;
  min-height:30px!important;
  max-height:34px!important;
  overflow:hidden!important;
  white-space:nowrap!important;
}
.hotspot-about,
.hotspot-about:hover,
.hotspot-about:focus-visible{
  width:auto!important;
  height:30px!important;
  min-height:30px!important;
  max-height:30px!important;
  padding:5px 8px!important;
  overflow:hidden!important;
}


/* =========================================================
   V6.16.0 — THE RECTANGLE WAS THE TYPEWRITER
   Root-cause fix. The zoom-in cursor in the screenshots revealed
   that the visible cream rectangle was the TYPEWRITER threshold,
   not About or Computer Friend. The threshold had been positioned
   in room coordinates while the machine lives inside desk-scene
   coordinates, and it also inherited generic room-hotspot UI.
   It is now a plain invisible hit target placed directly over the
   physical typewriter. No room-hotspot class, no card, no hover box.
   ========================================================= */
.hotspot-writing{
  position:absolute!important;
  left:360px!important;
  bottom:229px!important;
  width:128px!important;
  height:116px!important;
  z-index:20!important;
  display:block!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  opacity:1!important;
  overflow:hidden!important;
  color:transparent!important;
  cursor:zoom-in!important;
  transform:none!important;
  appearance:none!important;
  -webkit-appearance:none!important;
}
.hotspot-writing span,.hotspot-writing b,.hotspot-writing small{display:none!important}
.hotspot-writing:hover,.hotspot-writing:focus,.hotspot-writing:focus-visible,.hotspot-writing:active{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  outline:0!important;
  opacity:1!important;
  transform:none!important;
}
/* Keep the actual machine as the only visual hover feedback. */
.ghost-bedroom-room:has(.hotspot-writing:hover) .desk-typewriter.room-typewriter,
.ghost-bedroom-room:has(.hotspot-writing:focus-visible) .desk-typewriter.room-typewriter{
  transform:translateY(-3px) rotate(-.2deg) scale(1.025)!important;
  filter:drop-shadow(0 0 10px rgba(121,217,220,.38)) drop-shadow(5px 7px 2px rgba(52,43,99,.16))!important;
}
@media(max-width:900px){
  .hotspot-writing{left:311px!important;bottom:215px!important;width:120px!important;height:109px!important}
}


/* =========================================================
   V6.17.0 — GHOST GIRL HAS A LIFE
   Content-first pass. No new furniture, no new artwork.
   The residents get slightly more believable placement and
   the "currently" windows become the room's evidence of life.
   ========================================================= */

/* Keep the three resident ghosts visually attached to real surfaces. */
.ghost-bedroom-page .room-ghost-music{
  left:82px!important;
  bottom:39px!important;
  width:104px!important;
  z-index:9!important;
  filter:drop-shadow(0 5px 2px rgba(52,43,99,.10))!important;
}
.ghost-bedroom-page .room-ghost-tropical{
  right:347px!important;
  bottom:201px!important;
  width:54px!important;
  z-index:12!important;
  filter:drop-shadow(0 4px 2px rgba(52,43,99,.10))!important;
}
.ghost-bedroom-page .room-ghost-reading{
  right:66px!important;
  bottom:119px!important;
  width:90px!important;
  z-index:11!important;
  filter:drop-shadow(0 5px 2px rgba(52,43,99,.10))!important;
}

/* Their labels follow them without becoming giant UI cards. */
.hotspot-music{left:66px!important;bottom:14px!important}
.hotspot-reading{right:31px!important;bottom:48px!important}

/* "Currently" content should read like personal scraps inside the Y2K windows. */
.currently-watching-v69,
.current-stack-v69,
.ghost-mix-v69{
  text-wrap:pretty;
}
.currently-watching-v69{
  border-style:dashed!important;
  box-shadow:2px 2px 0 rgba(184,167,232,.18);
}
.current-stack-v69 h3,
.ghost-mix-v69 h3{
  letter-spacing:-.01em;
}
.current-stack-v69 .object-memory-v61,
.ghost-mix-v69 .object-memory-v61{
  opacity:.78;
}

/* The room remains the star: no new rectangles or furniture layers. */
.ghost-bedroom-room::before,
.ghost-bedroom-room::after{
  pointer-events:none;
}

@media(max-width:900px){
  .ghost-bedroom-page .room-ghost-music{left:62px!important;width:94px!important}
  .ghost-bedroom-page .room-ghost-tropical{right:320px!important;width:50px!important}
  .ghost-bedroom-page .room-ghost-reading{right:38px!important;width:84px!important}
}


/* =========================================================
   V6.18 — THE PAGE IS WAITING
   Typewriter = altar. This is a desk/page encounter, not
   another Y2K application window.
   ========================================================= */
.transmission-paper-v618{
  width:min(640px,90vw)!important;
  min-height:610px!important;
  padding:54px 64px 58px!important;
}
.transmission-kicker-v618{
  display:flex;justify-content:space-between;gap:18px;align-items:center;
  margin:4px 0 22px;padding-bottom:10px;
  border-bottom:1px solid rgba(52,43,99,.18);
  font:700 7px/1.4 "Courier New",monospace;
  letter-spacing:.12em;color:#9676d3;
}
.transmission-paper-v618 h2{
  max-width:500px;margin:18px 0 9px!important;
  font:italic 38px/1.04 Georgia,serif!important;
}
.transmission-deck-v618{
  max-width:470px;margin:0;
  font:italic 13px/1.55 Georgia,serif;
  color:rgba(52,43,99,.64);
}
.transmission-rule-v618{
  display:flex;align-items:center;gap:12px;margin:27px 0 25px;
  color:#f4a6c6;font-size:9px;
}
.transmission-rule-v618:before,.transmission-rule-v618:after{
  content:"";height:1px;flex:1;background:rgba(52,43,99,.14)
}
.transmission-excerpt-v618{
  max-width:490px;
  font:13px/1.72 "Courier New",monospace;color:#342b63;
}
.transmission-excerpt-v618 p{margin:10px 0}
.transmission-excerpt-v618 .typed-line-v64{
  font:13px/1.72 "Courier New",monospace;
  margin:10px 0;border-right:1px solid rgba(52,43,99,.7)
}
.typewriter-threshold-layer.open .transmission-excerpt-v618 .typed-line-v64.one{
  animation:transmissionTypeOne 1.25s .62s steps(43,end) forwards
}
.typewriter-threshold-layer.open .transmission-excerpt-v618 .typed-line-v64.two{
  animation:transmissionTypeTwo .9s 1.95s steps(27,end) forwards
}
@keyframes transmissionTypeOne{to{width:43ch}}
@keyframes transmissionTypeTwo{to{width:27ch}}
.transmission-actions-v618{
  margin-top:42px!important;padding-top:18px!important;
  justify-content:flex-start!important;align-items:center!important;gap:25px!important
}
.transmission-actions-v618 a{
  text-decoration:none!important;font-size:9px!important
}
.transmission-actions-v618 .keep-reading-v618{
  display:inline-block;padding:9px 12px;
  border:1px solid rgba(52,43,99,.32);
  background:rgba(246,217,120,.13);
  color:#342b63!important;
  box-shadow:3px 3px 0 rgba(184,167,232,.18)
}
.transmission-actions-v618 .keep-reading-v618:hover{
  transform:translate(-1px,-1px);box-shadow:4px 4px 0 rgba(184,167,232,.24)
}
.transmission-actions-v618 .all-writings-v618{
  color:#9676d3!important;text-decoration:underline!important
}
.step-back-v618{
  position:absolute;right:30px;bottom:19px;
  border:0;background:transparent;padding:0;cursor:zoom-out;
  font:italic 7px "Courier New",monospace;
  color:rgba(52,43,99,.48)
}
.step-back-v618:hover{color:#f4a6c6}
.transmission-paper-v618:after{
  content:"typed at 2:17 AM // ribbon slightly haunted"!important;
  right:30px!important;bottom:35px!important
}
.transmission-paper-v618 .paper-bottom-v64{bottom:20px!important}

@media(max-width:700px){
  .transmission-paper-v618{padding:42px 34px 72px!important;min-height:540px!important}
  .transmission-paper-v618 h2{font-size:29px!important}
  .transmission-kicker-v618{align-items:flex-start;flex-direction:column;gap:4px}
  .transmission-excerpt-v618,.transmission-excerpt-v618 .typed-line-v64{
    font-size:11px!important;white-space:normal!important;width:auto!important;border-right:0!important
  }
  .typewriter-threshold-layer.open .transmission-excerpt-v618 .typed-line-v64{
    animation:none!important
  }
  .transmission-actions-v618{flex-direction:column;align-items:flex-start!important;gap:13px!important}
  .step-back-v618{right:24px;bottom:36px}
  .transmission-paper-v618:after{display:none}
}
@media(prefers-reduced-motion:reduce){
  .transmission-excerpt-v618 .typed-line-v64{
    width:auto!important;border-right:0!important;animation:none!important
  }
}


/* =========================================================
   V6.19.1 — IMPOSSIBLE BROWSER, ACTUALLY WIRED IN
   The browser artwork is a real sibling layer behind the
   existing paper. The proven typewriter interaction stays intact.
   ========================================================= */
.impossible-browser-v619{
  position:relative;
  z-index:2;
  width:min(1100px,96vw);
  height:min(550px,48vw);
  min-height:430px;
  display:grid;
  place-items:center;
  opacity:0;
  transform:translateY(90px) scale(.72);
  transform-origin:50% 70%;
  transition:transform .62s cubic-bezier(.2,.78,.22,1),opacity .28s ease;
  pointer-events:none;
}
.typewriter-threshold-layer.open .impossible-browser-v619{
  opacity:1;
  transform:none;
  pointer-events:auto;
}
.impossible-browser-art-v619{
  position:absolute;
  z-index:1;
  inset:50% auto auto 50%;
  width:100%;
  height:auto;
  transform:translate(-50%,-50%);
  display:block;
  pointer-events:none;
  filter:drop-shadow(0 30px 50px rgba(25,20,48,.34));
}
.impossible-browser-v619 .typewriter-paper-closeup-v64{
  z-index:2!important;
  width:640px!important;
  min-height:0!important;
  height:400px!important;
  padding:36px 52px 45px!important;
  transform:scale(.78)!important;
  transform-origin:center center!important;
  opacity:0!important;
  overflow:hidden;
  box-shadow:0 12px 30px rgba(25,20,48,.18)!important;
  transition:opacity .28s .28s ease,transform .45s .22s ease!important;
}
.typewriter-threshold-layer.open .impossible-browser-v619 .typewriter-paper-closeup-v64{
  opacity:1!important;
  transform:scale(.78)!important;
}
.impossible-browser-v619 .transmission-kicker-v618{margin:0 0 14px!important}
.impossible-browser-v619 .transmission-paper-v618 h2{font-size:32px!important;margin:12px 0 6px!important}
.impossible-browser-v619 .transmission-deck-v618{font-size:11px!important}
.impossible-browser-v619 .transmission-rule-v618{margin:15px 0!important}
.impossible-browser-v619 .transmission-excerpt-v618{font-size:11px!important;line-height:1.55!important}
.impossible-browser-v619 .transmission-excerpt-v618 p{margin:6px 0!important}
.impossible-browser-v619 .transmission-excerpt-v618 .typed-line-v64{font-size:11px!important;line-height:1.55!important;margin:6px 0!important}
.impossible-browser-v619 .transmission-actions-v618{margin-top:19px!important;padding-top:12px!important}
.impossible-browser-v619 .step-back-v618{bottom:13px!important}
.impossible-browser-v619 .paper-bottom-v64{bottom:12px!important}
.impossible-browser-v619 .transmission-paper-v618:after{bottom:25px!important}

@media(max-width:800px){
  .impossible-browser-v619{width:98vw;height:62vw;min-height:390px}
  .impossible-browser-v619 .typewriter-paper-closeup-v64{transform:scale(.62)!important}
  .typewriter-threshold-layer.open .impossible-browser-v619 .typewriter-paper-closeup-v64{transform:scale(.62)!important}
}


/* =========================================================
   V6.19.2 — READABLE, LOOSE-LEAF TRANSMISSION
   Keep the impossible browser at its current room scale;
   give the writing more of its interior and let the sheet
   feel like a physical page rather than a rigid UI panel.
   ========================================================= */
.impossible-browser-v619 .typewriter-paper-closeup-v64{
  width:650px!important;
  height:404px!important;
  padding:34px 48px 47px!important;
  transform:scale(.86) rotate(-.22deg)!important;
  transform-origin:center center!important;
  border-radius:3px 1px 4px 2px!important;
  clip-path:polygon(.35% .7%, 8% .2%, 18% .55%, 29% .12%, 41% .48%, 54% .08%, 67% .42%, 79% .15%, 91% .5%, 99.65% .18%, 99.9% 11%, 99.55% 25%, 99.85% 39%, 99.5% 54%, 99.82% 68%, 99.52% 83%, 99.75% 99.35%, 90% 99.7%, 78% 99.4%, 66% 99.78%, 53% 99.45%, 40% 99.82%, 27% 99.48%, 14% 99.76%, .3% 99.35%, .12% 86%, .45% 71%, .16% 56%, .48% 40%, .14% 24%);
  box-shadow:0 17px 34px rgba(25,20,48,.22)!important;
}
.typewriter-threshold-layer.open .impossible-browser-v619 .typewriter-paper-closeup-v64{
  transform:scale(.86) rotate(-.22deg)!important;
}
.impossible-browser-v619 .transmission-kicker-v618{
  font-size:8px!important;
  line-height:1.35!important;
  margin:0 0 12px!important;
}
.impossible-browser-v619 .paper-corner-v64{font-size:7px!important}
.impossible-browser-v619 .transmission-paper-v618 h2{
  font-size:35px!important;
  line-height:1.02!important;
  margin:10px 0 7px!important;
}
.impossible-browser-v619 .transmission-deck-v618{
  font-size:13px!important;
  line-height:1.45!important;
}
.impossible-browser-v619 .transmission-rule-v618{margin:13px 0!important}
.impossible-browser-v619 .transmission-excerpt-v618{
  font-size:14px!important;
  line-height:1.58!important;
}
.impossible-browser-v619 .transmission-excerpt-v618 p{margin:7px 0!important}
.impossible-browser-v619 .transmission-excerpt-v618 .typed-line-v64{
  font-size:14px!important;
  line-height:1.58!important;
  margin:7px 0!important;
}
.impossible-browser-v619 .transmission-actions-v618{
  margin-top:17px!important;
  padding-top:11px!important;
  font-size:9px!important;
}
.impossible-browser-v619 .step-back-v618{font-size:7px!important}
.impossible-browser-v619 .paper-bottom-v64{font-size:6.5px!important}

@media(max-width:800px){
  .impossible-browser-v619 .typewriter-paper-closeup-v64{
    transform:scale(.68) rotate(-.22deg)!important;
  }
  .typewriter-threshold-layer.open .impossible-browser-v619 .typewriter-paper-closeup-v64{
    transform:scale(.68) rotate(-.22deg)!important;
  }
}

/* ============================================================
   V6.20 — THE WRITER'S ROOM
   Physical writing room. Existing site styles above remain intact.
   ============================================================ */
.writers-room-page-v620{background:#171319;color:#342b63;min-height:100vh;overflow-x:hidden}
.writers-room-page-v620 .top{position:relative;z-index:30}
.writers-room-shell-v620{max-width:1180px;margin:26px auto 48px;padding:0 18px}
.writers-room-heading-v620{text-align:center;color:#fff9f3;margin:0 0 14px;font-family:"Courier New",monospace}
.writers-room-heading-v620 p{margin:0 0 4px;font-size:11px;letter-spacing:.12em;color:#b8a7e8}
.writers-room-heading-v620 h1{margin:0;font-size:clamp(26px,4vw,46px);letter-spacing:.08em;text-shadow:0 2px 0 #342b63}
.writers-room-heading-v620 span{display:block;margin-top:5px;font-size:13px;color:#f4a6c6;font-style:italic}
.writers-room-v620{position:relative;isolation:isolate;width:100%;aspect-ratio:16/10;min-height:560px;max-height:740px;overflow:hidden;border:7px solid #2b1c1b;border-radius:5px;background:#5a3a34;box-shadow:0 20px 55px #0009,0 0 0 2px #a77a4e inset}
.writer-wall-v620{position:absolute;inset:0 0 29% 0;background:linear-gradient(90deg,#553933,#644039 48%,#50332f);border-bottom:8px solid #2c1d1c;z-index:0}
.writer-wall-v620:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 175px,#3b29263d 176px 178px),linear-gradient(#0000,#24181935);pointer-events:none}
.writer-floor-v620{position:absolute;left:0;right:0;bottom:0;height:30%;background:repeating-linear-gradient(96deg,#3c2925 0 95px,#2a1d1b 97px 101px,#49302a 103px 190px);z-index:0}
.wr-window-v620{position:absolute;width:23%;left:7%;top:7%;filter:drop-shadow(0 5px 4px #0007);z-index:2}
.wr-wall-note-v620{position:absolute;left:33%;top:9%;transform:rotate(-2deg);font:700 clamp(11px,1.35vw,17px)/1.25 "Courier New",monospace;letter-spacing:.08em;color:#d7b46d;border:1px solid #b68c574d;padding:8px 10px;background:#24191a59;z-index:2}
.wr-wall-note-v620 small{font-weight:400;color:#f4d9b0;letter-spacing:.03em}
.wr-torn-v620{position:absolute;width:13%;left:43%;top:25%;transform:rotate(5deg);filter:drop-shadow(0 4px 3px #0008);z-index:3}
.wr-shelf-v620{position:absolute;width:29%;right:3%;top:7%;filter:brightness(.82) saturate(.8) drop-shadow(0 7px 4px #0007);z-index:2}
.wr-lantern-v620{position:absolute;width:8%;right:28%;bottom:-12%;filter:drop-shadow(0 0 12px #f0b34b88);z-index:4}
.wr-desk-scene-v620{position:absolute;left:17%;bottom:3%;width:62%;height:58%;z-index:8}
.wr-desk-v620{position:absolute;left:0;bottom:0;width:100%;filter:brightness(.9) drop-shadow(0 10px 5px #0009);z-index:2}
.wr-typewriter-v620{position:absolute;width:25%;left:42%;top:5%;filter:drop-shadow(0 5px 3px #0008);z-index:5}
.wr-lamp-v620{position:absolute;width:15%;left:21%;top:-8%;filter:drop-shadow(0 0 15px #f3cf7a80);z-index:4}
.wr-letters-v620{position:absolute;width:17%;left:67%;top:18%;transform:rotate(4deg);filter:drop-shadow(0 4px 3px #0007);z-index:4}
.wr-books-v620{position:absolute;width:20%;left:1.5%;bottom:1%;filter:brightness(.88) drop-shadow(0 8px 5px #0008);z-index:10}
.wr-sealed-v620{position:absolute;width:12%;right:3%;bottom:6%;transform:rotate(-7deg);filter:drop-shadow(0 6px 4px #0008);z-index:10}
.wr-room-whisper-v620{position:absolute;right:3%;top:58%;z-index:4;color:#d9c5ad;font:italic 11px/1.2 Georgia,serif;opacity:.65;transform:rotate(2deg)}
.wr-desk-hotspot-v620{position:absolute;left:37%;top:0;width:34%;height:48%;z-index:20;border:0;background:transparent;color:#fff9f3;cursor:pointer;font-family:"Courier New",monospace;text-shadow:0 2px 4px #000;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:31%;opacity:.08;transition:opacity .2s,transform .2s}
.wr-desk-hotspot-v620:hover,.wr-desk-hotspot-v620:focus-visible{opacity:1;transform:translateY(-3px);outline:none}
.wr-desk-hotspot-v620 span{font-size:18px}.wr-desk-hotspot-v620 b{font-size:12px;letter-spacing:.12em}.wr-desk-hotspot-v620 small{font-size:9px;color:#f4a6c6;margin-top:2px}
.writers-room-instruction-v620{text-align:center;color:#b8a7e8;font:11px "Courier New",monospace;margin:10px 0 0;opacity:.78}
.writing-desk-layer-v620[hidden]{display:none}.writing-desk-layer-v620{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:24px;opacity:0;transition:opacity .22s}.writing-desk-layer-v620.is-open{opacity:1}
.writing-desk-backdrop-v620{position:absolute;inset:0;border:0;background:#100c10dc;backdrop-filter:blur(7px);cursor:zoom-out}
.writing-desk-paper-v620{position:relative;width:min(760px,92vw);max-height:min(760px,88vh);overflow:auto;padding:clamp(28px,5vw,58px);background:#f4e4c6;color:#342b3a;border:1px solid #d0b383;box-shadow:0 25px 80px #000b;transform:translateY(14px) rotate(-.25deg);transition:transform .25s;font-family:"Courier New",monospace;clip-path:polygon(1% 0,98% .5%,100% 3%,99% 96%,97% 100%,2% 99%,0 96%,.6% 3%)}
.writing-desk-layer-v620.is-open .writing-desk-paper-v620{transform:translateY(0) rotate(-.25deg)}
.writing-desk-paper-v620:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;background:repeating-linear-gradient(0deg,#a9875d10 0 2px,transparent 2px 27px)}
.writing-desk-close-v620{position:absolute;right:22px;top:16px;border:0;background:transparent;color:#684a43;font-size:25px;cursor:pointer}.writing-desk-path-v620{font-size:10px;letter-spacing:.08em;color:#8c655b}.writing-desk-paper-v620 h2{font-size:clamp(23px,4vw,38px);margin:8px 0 4px;color:#4a2f34;letter-spacing:.04em}.writing-desk-sub-v620{margin:0 0 25px;font:italic 14px Georgia,serif;color:#7a5851}
.desk-files-v620{border-top:1px solid #b89675}.desk-file-v620{position:relative;display:grid;grid-template-columns:28px 1fr auto;gap:3px 8px;align-items:center;padding:15px 5px;border-bottom:1px dashed #b89675;color:#493b43;text-decoration:none}.desk-file-v620>span{grid-row:1/3;font-size:20px}.desk-file-v620 b{font-size:12px;overflow-wrap:anywhere}.desk-file-v620 small{grid-column:2;font-size:10px;color:#79655f}.desk-file-v620 em{grid-column:3;grid-row:1/3;font-size:9px;color:#9a7467;font-style:normal}.desk-file-v620.featured:hover{background:#fff7e64d;color:#342b63}.desk-file-v620.draft{opacity:.62}
.writing-desk-footer-v620{display:flex;justify-content:space-between;gap:16px;align-items:end;margin-top:24px;font:italic 10px Georgia,serif;color:#876d64}.writing-desk-footer-v620 button{border:0;background:transparent;color:#6a4a63;font:10px "Courier New",monospace;cursor:pointer;text-decoration:underline}.writing-desk-open-v620{overflow:hidden}
@media(max-width:760px){.writers-room-v620{aspect-ratio:4/5;min-height:620px}.writer-wall-v620{bottom:25%}.writer-floor-v620{height:26%}.wr-window-v620{width:35%;left:3%;top:5%}.wr-shelf-v620{width:42%;right:-5%;top:10%}.wr-wall-note-v620{left:36%;top:5%;font-size:10px}.wr-torn-v620{width:18%;left:38%;top:22%}.wr-desk-scene-v620{width:90%;left:4%;bottom:8%;height:49%}.wr-typewriter-v620{width:28%;left:42%;top:6%}.wr-lamp-v620{width:18%;left:19%;top:-8%}.wr-books-v620{width:27%;bottom:1%;left:-2%}.wr-sealed-v620{width:17%;right:1%;bottom:3%}.wr-lantern-v620{width:11%;right:29%;bottom:-10%}.wr-room-whisper-v620{display:none}.writing-desk-paper-v620{padding:35px 24px}.desk-file-v620{grid-template-columns:24px 1fr}.desk-file-v620 em{display:none}}


/* ============================================================
   V6.21 — WRITER'S ROOM COMPOSITION PASS
   Same room, corrected physical relationships.
   ============================================================ */
/* The colorful shelf is retired here. The open-book stack becomes the wall shelf. */
.wr-shelf-v620{display:none!important}
.wr-books-v620{
  width:25%;
  left:auto;
  right:4.5%;
  top:12%;
  bottom:auto;
  filter:brightness(.78) saturate(.78) drop-shadow(0 7px 4px #0008);
  z-index:3;
}
/* Keep the old desk imposing, but let its working objects match its scale. */
.wr-typewriter-v620{
  width:36%;
  left:34%;
  top:-3%;
  filter:drop-shadow(0 6px 4px #0009);
  z-index:7;
}
.wr-lamp-v620{
  width:19%;
  left:13%;
  top:-2%;
  filter:drop-shadow(0 0 17px #f3cf7a99) drop-shadow(0 5px 3px #0008);
  z-index:6;
}
.wr-letters-v620{
  width:19%;
  left:69%;
  top:7%;
  transform:rotate(3deg);
  filter:drop-shadow(0 4px 3px #0008);
  z-index:6;
}
/* The sealed note now belongs to the desk scene instead of floating on the floor. */
.wr-desk-scene-v620 .wr-sealed-v620{
  position:absolute;
  width:15%;
  right:2%;
  left:auto;
  top:26%;
  bottom:auto;
  transform:rotate(-7deg);
  filter:drop-shadow(0 4px 3px #0008);
  z-index:6;
}
.wr-room-whisper-v620{right:3%;top:61%}

@media(max-width:760px){
  .wr-books-v620{width:34%;right:-2%;top:17%;bottom:auto;left:auto}
  .wr-typewriter-v620{width:38%;left:33%;top:-1%}
  .wr-lamp-v620{width:21%;left:12%;top:0}
  .wr-letters-v620{width:20%;left:70%;top:10%}
  .wr-desk-scene-v620 .wr-sealed-v620{width:16%;right:1%;top:29%;bottom:auto}
}

/* =========================================================
   V6.22 — CASE 001 / GAYLOR INTERNAL FILING STRUCTURE
   Archive 44 gets its first real case. No evidence added yet.
   ========================================================= */
.case-open{
  display:inline-block;padding:6px 10px;border:1px solid #342B63;
  background:#E7DFF5;color:#342B63;font:9px/1.2 monospace;
  text-decoration:none;box-shadow:2px 2px 0 rgba(52,43,99,.18)
}
.case-open:hover{background:#F6D978;transform:translate(-1px,-1px)}

.case-file-page{max-width:980px;margin:26px auto 70px;padding:0 24px;color:#342B63}
.case-path{margin:0 0 12px;font:10px/1.4 monospace;letter-spacing:.08em;color:#9676D3}
.case-file-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:30px;
  padding:28px 32px;background:#FFF9F3;border:2px solid #342B63;
  box-shadow:8px 8px 0 #B8A7E8;position:relative
}
.case-file-head:before{content:"ARCHIVE 44 // UNEXPLAINED MATERIALS DIVISION";position:absolute;right:22px;top:-10px;background:#342B63;color:#FFF9F3;padding:4px 8px;font:8px monospace;letter-spacing:.08em}
.case-file-head .eyebrow{margin:0 0 8px;font:10px monospace;letter-spacing:.08em}
.case-file-head h1{margin:0 0 8px;font:700 44px/1 Georgia,serif;letter-spacing:.05em}
.case-deck{max-width:620px;margin:0;font:15px/1.55 Georgia,serif}
.case-stamp{flex:0 0 auto;border:3px double #9676D3;color:#9676D3;padding:10px 13px;text-align:center;font:700 16px/1 monospace;transform:rotate(4deg)}
.case-stamp small{font-size:8px;font-weight:400}

.protocol-window{margin:28px 0 24px;border:2px solid #342B63;background:#E7DFF5;box-shadow:5px 5px 0 rgba(52,43,99,.16)}
.protocol-bar{display:flex;justify-content:space-between;background:#342B63;color:#FFF9F3;padding:7px 10px;font:9px monospace}
.protocol-copy{padding:18px 22px;background:linear-gradient(135deg,#FFF9F3 0 72%,#F8D5E4 72% 100%)}
.protocol-copy>p{margin:0 0 13px;font:14px/1.5 Georgia,serif}
.protocol-lines{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 13px}
.protocol-lines span{border:1px solid #342B63;background:#fff;padding:5px 7px;font:8px monospace;letter-spacing:.05em}
.protocol-copy blockquote{margin:0;padding:8px 12px;border-left:4px solid #F6D978;font:italic 13px/1.5 Georgia,serif}

.drawer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:22px 0}
.case-drawer{min-height:126px;padding:17px 18px 15px;background:#FFF9F3;border:1px solid #342B63;box-shadow:4px 4px 0 #CDECF1;position:relative;transition:.15s ease}
.case-drawer:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 #F8D5E4}
.drawer-icon{position:absolute;right:14px;top:11px;font-size:20px;opacity:.75}
.case-drawer b{display:block;margin:0 34px 8px 0;font:700 12px monospace;letter-spacing:.05em}
.case-drawer small{display:block;max-width:82%;font:12px/1.45 Georgia,serif;color:#554b73}
.case-drawer em{position:absolute;left:18px;bottom:13px;font:8px monospace;color:#9676D3;text-transform:uppercase;letter-spacing:.04em}
.unsorted-tray{margin:25px 0 18px;padding:17px 20px;border:2px dashed #9676D3;background:#F8D5E4;transform:rotate(-.25deg)}
.unsorted-head{font:700 11px monospace;letter-spacing:.08em}
.unsorted-tray p{margin:7px 0 4px;font:13px/1.45 Georgia,serif}.unsorted-tray small{font:8px monospace}
.case-note{margin:22px auto;text-align:center;max-width:680px;font:italic 12px/1.6 Georgia,serif;color:#6d638d}
.case-file-page .return-home{display:inline-block;margin-top:12px;color:#342B63;font:10px monospace}
.page-foot{text-align:center;padding:18px;font:8px monospace;color:#9676D3}

@media(max-width:700px){.drawer-grid{grid-template-columns:1fr}.case-file-head{padding:24px 20px}.case-file-head h1{font-size:34px}.case-stamp{font-size:12px}.case-file-page{padding:0 14px}}


/* ============================================================
   V6.25 — WRITER'S ROOM: CHAIR + STARRY NIGHT
   Two finishing objects only. No redesign.
   ============================================================ */
.wr-art-v625{
  position:absolute; width:20%; left:55%; top:9%;
  transform:rotate(1deg); filter:brightness(.82) saturate(.82) drop-shadow(0 6px 4px #0008); z-index:3;
}
.wr-chair-v625{
  position:absolute; width:27%; left:35%; bottom:4%;
  filter:brightness(.78) saturate(.88) drop-shadow(0 8px 5px #0009); z-index:1;
}
/* Keep the desk in front of the chair; the chair should look tucked in, not pasted on. */
.wr-desk-v620{z-index:2}
@media(max-width:760px){
  .wr-art-v625{width:25%;left:49%;top:11%}
  .wr-chair-v625{width:30%;left:34%;bottom:3%}
}

/* ============================================================
   V6.26 — WRITER'S ROOM POSITIONING ONLY
   No redesign: enlarge/tuck chair, lift Starry Night.
   ============================================================ */
.wr-art-v625{
  width:18%;
  left:57%;
  top:4%;
}
.wr-chair-v625{
  width:46%;
  left:27%;
  bottom:22%;
  z-index:1;
}
@media(max-width:760px){
  .wr-art-v625{width:22%;left:56%;top:5%}
  .wr-chair-v625{width:48%;left:25%;bottom:21%}
}

/* ============================================================
   V6.27 — WRITER'S ROOM CHAIR NUDGE ONLY
   Keep scale; reveal backrest above/left of desk while desk remains foreground.
   ============================================================ */
.wr-chair-v625{
  width:46%;
  left:18%;
  bottom:34%;
  z-index:1;
}
@media(max-width:760px){
  .wr-chair-v625{width:48%;left:17%;bottom:32%}
}


/* ============================================================
   V6.28 — WRITER'S ROOM COMPOSITION RESET
   Re-establish the room as one physical composition instead of
   nudging isolated objects. Existing artwork remains unchanged.
   ============================================================ */
/* Lower the entire desk so wall objects have air and the floor reads again. */
.wr-desk-scene-v620{
  left:18%;
  bottom:-8%;
  width:60%;
  height:58%;
}
/* Chair lives behind the working side of the desk: enough backrest to read as a chair,
   but the desk still overlaps its lower half. */
.wr-chair-v625{
  width:43%;
  left:18%;
  bottom:17%;
  z-index:1;
}
/* Working objects now sit deeper on the desktop rather than hanging off its front edge. */
.wr-typewriter-v620{
  width:32%;
  left:43%;
  top:13%;
  z-index:7;
}
.wr-lamp-v620{
  width:16%;
  left:15%;
  top:12%;
  z-index:6;
}
.wr-letters-v620{
  width:17%;
  left:72%;
  top:19%;
  z-index:6;
}
/* The open-book shelf is wall furniture, not desk-height clutter. */
.wr-books-v620{
  width:23%;
  right:3.5%;
  top:5%;
  bottom:auto;
  left:auto;
  z-index:3;
}
/* Starry Night stays in the successful V6.27 position. */
.wr-art-v625{width:18%;left:57%;top:4%}
/* The writing entrance belongs to the typewriter, not the entire desk. */
.wr-desk-hotspot-v620{
  left:41%;
  top:9%;
  width:36%;
  height:42%;
  padding-top:29%;
}

@media(max-width:760px){
  .wr-desk-scene-v620{width:88%;left:5%;bottom:-2%;height:50%}
  .wr-chair-v625{width:44%;left:17%;bottom:18%}
  .wr-typewriter-v620{width:34%;left:42%;top:13%}
  .wr-lamp-v620{width:18%;left:14%;top:12%}
  .wr-letters-v620{width:18%;left:72%;top:19%}
  .wr-books-v620{width:31%;right:0;top:8%;bottom:auto;left:auto}
  .wr-art-v625{width:22%;left:55%;top:5%}
}

/* ============================================================
   V6.29 — WRITER'S ROOM DESKTOP PHYSICS
   Treat the visible brown quadrilateral as the usable desktop.
   ============================================================ */
/* Keep the desk itself locked from V6.28. */
.wr-desk-scene-v620{left:18%;bottom:-8%;width:60%;height:58%}

/* Chair: tuck it into the knee space on the working side. Its back/arms should
   read beside the typewriter instead of the caster base becoming the focal point. */
.wr-chair-v625{width:39%;left:30%;bottom:25%;z-index:3}

/* Put every working object clearly inside the tabletop plane. */
.wr-typewriter-v620{width:29%;left:49%;top:-2%;z-index:7}
.wr-lamp-v620{width:14%;left:19%;top:-7%;z-index:6}
.wr-letters-v620{width:15%;left:72%;top:5%;z-index:6}

/* Match the hotspot to the machine's new position. */
.wr-desk-hotspot-v620{left:46%;top:-5%;width:36%;height:38%;padding-top:25%}

@media(max-width:760px){
  .wr-chair-v625{width:40%;left:29%;bottom:24%}
  .wr-typewriter-v620{width:31%;left:48%;top:0}
  .wr-lamp-v620{width:16%;left:18%;top:-4%}
  .wr-letters-v620{width:17%;left:71%;top:7%}
}

/* ============================================================
   V6.30 — WRITER'S ROOM: LEFT-HAND WORKSTATION
   Rebuild around the desk's actual knee opening. Wall is locked.
   ============================================================ */
/* The flipped chair now sits BEHIND the desk, aligned to the open knee space. */
.wr-chair-v625{
  width:27%;
  left:27%;
  top:40%;
  bottom:auto;
  z-index:1;
}
/* Desk remains the foreground furniture layer. */
.wr-desk-v620{z-index:2}
/* Working objects sit visibly inside the tabletop plane. */
.wr-typewriter-v620{
  width:27%;
  left:31%;
  top:13%;
  z-index:6;
}
.wr-lamp-v620{
  width:13%;
  left:16%;
  top:11%;
  z-index:5;
}
.wr-letters-v620{
  width:14%;
  left:59%;
  top:17%;
  z-index:5;
}
.wr-desk-hotspot-v620{
  left:29%;
  top:10%;
  width:31%;
  height:35%;
  padding-top:24%;
}
@media(max-width:760px){
  .wr-chair-v625{width:29%;left:26%;top:40%;bottom:auto}
  .wr-typewriter-v620{width:29%;left:30%;top:14%}
  .wr-lamp-v620{width:15%;left:15%;top:12%}
  .wr-letters-v620{width:16%;left:58%;top:18%}
}

/* ============================================================
   V6.31 — WRITER'S ROOM: CLEAN DESK RESET
   Chair removed. Cropped workstation assets eliminate transparent
   padding so positioning corresponds to the visible objects.
   ============================================================ */
.wr-chair-v625{display:none!important}
.wr-typewriter-v620{
  width:23%;
  left:38%;
  top:12%;
  z-index:6;
}
.wr-lamp-v620{
  width:9%;
  left:21%;
  top:13%;
  z-index:5;
}
.wr-letters-v620{
  width:11%;
  left:64%;
  top:19%;
  z-index:5;
}
.wr-desk-hotspot-v620{
  left:36%;
  top:9%;
  width:28%;
  height:34%;
  padding-top:23%;
}
@media(max-width:760px){
  .wr-typewriter-v620{width:25%;left:37%;top:13%}
  .wr-lamp-v620{width:10%;left:20%;top:14%}
  .wr-letters-v620{width:12%;left:63%;top:20%}
}

/* V6.32 — DESKZILLA TAMED: verified composition pass */
.wr-desk-scene-v620{left:24%;bottom:-2%;width:50%;height:52%}
.wr-typewriter-v620{width:22%;left:43%;top:-8%;z-index:7}
.wr-lamp-v620{width:8%;left:20%;top:-6%;z-index:6}
.wr-letters-v620{width:10%;left:69%;top:-2%;z-index:6}
.wr-desk-hotspot-v620{left:40%;top:-11%;width:28%;height:31%;padding-top:20%}
@media(max-width:760px){
 .wr-desk-scene-v620{left:12%;bottom:3%;width:72%;height:48%}
 .wr-typewriter-v620{width:24%;left:42%;top:-5%}
 .wr-lamp-v620{width:9%;left:19%;top:-3%}
 .wr-letters-v620{width:11%;left:68%;top:1%}
}

/* V6.32b — crop the desk itself so the workstation uses the visible desk,
   not the original 1500px transparent Canva canvas. */
.wr-desk-scene-v620{
  left:25%; bottom:4%; width:48%; height:auto; aspect-ratio:1430/1036;
}
.wr-desk-v620{left:0;bottom:0;width:100%;height:auto}
.wr-typewriter-v620{width:22%;left:39%;top:13%;z-index:7}
.wr-lamp-v620{width:8%;left:17%;top:11%;z-index:6}
.wr-letters-v620{width:10%;left:67%;top:15%;z-index:6}
.wr-desk-hotspot-v620{left:36%;top:8%;width:29%;height:37%;padding-top:24%}
@media(max-width:760px){
 .wr-desk-scene-v620{left:12%;bottom:6%;width:72%;height:auto;aspect-ratio:1430/1036}
 .wr-typewriter-v620{width:23%;left:39%;top:13%}
 .wr-lamp-v620{width:9%;left:17%;top:11%}
 .wr-letters-v620{width:11%;left:67%;top:15%}
}

/* V6.33 — scale up the three desktop objects; desk/wall composition stays locked. */
.wr-typewriter-v620{width:30%;left:35%;top:8%;z-index:7}
.wr-lamp-v620{width:12%;left:15%;top:7%;z-index:6}
.wr-letters-v620{width:14%;left:65%;top:11%;z-index:6}
.wr-desk-hotspot-v620{left:32%;top:4%;width:37%;height:43%;padding-top:29%}
@media(max-width:760px){
 .wr-typewriter-v620{width:31%;left:35%;top:8%}
 .wr-lamp-v620{width:13%;left:15%;top:7%}
 .wr-letters-v620{width:15%;left:65%;top:11%}
}

/* V6.34 — desktop triangle refinement. Desk + walls remain locked. */
.wr-lamp-v620{width:17%;left:10%;top:3%;z-index:6}
.wr-typewriter-v620{width:30%;left:31%;top:11%;z-index:7}
.wr-letters-v620{width:14%;left:72%;top:7%;z-index:6}
.wr-desk-hotspot-v620{left:28%;top:7%;width:37%;height:45%;padding-top:30%}
@media(max-width:760px){
 .wr-lamp-v620{width:18%;left:10%;top:3%}
 .wr-typewriter-v620{width:31%;left:31%;top:11%}
 .wr-letters-v620{width:15%;left:71%;top:7%}
}

/* V6.35 — final desktop composition: typewriter left; correspondence + lamp right. */
.wr-typewriter-v620{width:30%;left:23%;top:12%;z-index:7}
.wr-letters-v620{width:14%;left:63%;top:13%;z-index:6}
.wr-lamp-v620{width:17%;left:72%;top:2%;z-index:7}
.wr-desk-hotspot-v620{left:20%;top:8%;width:37%;height:45%;padding-top:30%}
@media(max-width:760px){
 .wr-typewriter-v620{width:31%;left:23%;top:12%}
 .wr-letters-v620{width:15%;left:62%;top:13%}
 .wr-lamp-v620{width:18%;left:71%;top:2%}
}

/* V6.36 — pull typewriter + letters deeper onto desktop. Lamp is locked. */
.wr-typewriter-v620{width:30%;left:27%;top:3%;z-index:7}
.wr-letters-v620{width:14%;left:62%;top:5%;z-index:6}
.wr-lamp-v620{width:17%;left:72%;top:2%;z-index:7}
.wr-desk-hotspot-v620{left:24%;top:0%;width:37%;height:45%;padding-top:30%}
@media(max-width:760px){
 .wr-typewriter-v620{width:31%;left:27%;top:3%}
 .wr-letters-v620{width:15%;left:61%;top:5%}
 .wr-lamp-v620{width:18%;left:71%;top:2%}
}

/* V6.37 — final placement correction from live screenshot.
   Typewriter goes farther back + left. Letters move inward/down onto the desktop.
   Lamp remains locked. */
.wr-typewriter-v620{width:30%;left:18%;top:-1%;z-index:7}
.wr-letters-v620{width:14%;left:55%;top:14%;z-index:6}
.wr-lamp-v620{width:17%;left:72%;top:2%;z-index:7}
.wr-desk-hotspot-v620{left:15%;top:-4%;width:37%;height:45%;padding-top:30%}
@media(max-width:760px){
 .wr-typewriter-v620{width:31%;left:18%;top:-1%}
 .wr-letters-v620{width:15%;left:54%;top:14%}
 .wr-lamp-v620{width:18%;left:71%;top:2%}
}

/* V6.38 — flipped navy typewriter perspective correction */
.wr-typewriter-v620{width:30%;left:21%;top:1%;z-index:7}
.wr-desk-hotspot-v620{left:18%;top:-2%;width:37%;height:45%;padding-top:30%}
@media(max-width:760px){
 .wr-typewriter-v620{width:31%;left:21%;top:1%}
}

/* V6.39 — Canva perspective-corrected navy typewriter.
   Preserve the settled room; only the typewriter placement/hotspot changes. */
.wr-typewriter-v620{width:31%;left:22%;top:1%;z-index:7}
.wr-desk-hotspot-v620{left:19%;top:-2%;width:39%;height:46%;padding-top:30%}
@media(max-width:760px){
 .wr-typewriter-v620{width:32%;left:22%;top:1%}
}

/* V6.40 — typewriter micro-placement only.
   Perspective is correct now: move it right/back and reduce scale slightly.
   Lamp, letters, desk, and room remain locked. */
.wr-typewriter-v620{width:29%;left:29%;top:-3%;z-index:7}
.wr-desk-hotspot-v620{left:27%;top:-5%;width:35%;height:43%;padding-top:28%}
@media(max-width:760px){
 .wr-typewriter-v620{width:30%;left:29%;top:-3%}
 .wr-desk-hotspot-v620{left:27%;top:-5%;width:36%;height:44%;padding-top:29%}
}


/* V6.41 — final typewriter nudge only.
   Move the machine slightly left to clear the correspondence stack. Nothing else moves. */
.wr-typewriter-v620{left:27.5%!important}
@media(max-width:760px){.wr-typewriter-v620{left:27.5%!important}}


/* V6.42 — move correspondence stack to the opposite side of the typewriter. */
.wr-letters-v620{left:11%!important;top:14%!important;}

/* ============================================================
   V6.43 — WRITER'S ROOM: WALL BALANCE + LETTERGATE CLOSED
   Keep the desk/typewriter/lamp locked. Pull correspondence fully
   onto the desktop and loosen the wall composition slightly.
   ============================================================ */
.wr-letters-v620{
  width:10%!important;
  left:16%!important;
  top:7%!important;
  transform:rotate(3deg)!important;
  z-index:6!important;
}
.wr-window-v620{left:6.5%;top:8%;}
.wr-wall-note-v620{left:34%;top:10%;transform:rotate(-1.5deg);}
.wr-art-v625{left:56%!important;top:6%!important;transform:rotate(.6deg)!important;}
.wr-books-v620{right:2.5%!important;top:8%!important;}
@media(max-width:760px){
  .wr-letters-v620{width:11%!important;left:16%!important;top:7%!important;}
  .wr-window-v620{left:5%;top:7%;}
  .wr-wall-note-v620{left:34%;top:7%;}
  .wr-art-v625{left:55%!important;top:6%!important;}
  .wr-books-v620{right:0!important;top:9%!important;}
}


/* ============================================================
   V6.44 — GHOST GIRL JUST GOT UP
   Chair only. Everything in the locked desk composition stays put.
   ============================================================ */
.wr-chair-v644{
  position:absolute;
  width:14%;
  left:9%;
  bottom:7%;
  z-index:7;
  filter:drop-shadow(0 5px 4px #0005);
}
@media(max-width:760px){
  .wr-chair-v644{width:20%;left:6%;bottom:10%;}
}

/* ============================================================
   V6.46 — CORNER, RIGHT WHERE IT BELONGS
   Minimal architectural cue: two wall planes + one quiet corner seam.
   All furniture, objects, and interactions remain locked.
   ============================================================ */
.writer-wall-v620{
  background:
    linear-gradient(90deg,
      #64413b 0%,
      #68443d 67.7%,
      #5d3b36 68.1%,
      #573732 100%)!important;
}
.writer-wall-v620:before{
  background:
    linear-gradient(90deg,
      rgba(255,226,207,.035) 0%,
      rgba(255,226,207,.012) 65%,
      rgba(30,18,18,.025) 70%,
      rgba(20,13,14,.11) 100%),
    linear-gradient(180deg,transparent 0%,rgba(36,24,25,.16) 100%)!important;
}
.writer-wall-v620:after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:68%;
  width:2px;
  background:linear-gradient(90deg,rgba(34,22,23,.32),rgba(255,223,203,.09));
  box-shadow:1px 0 0 rgba(255,224,207,.035),-1px 0 0 rgba(31,19,20,.12);
  opacity:.72;
  pointer-events:none;
  z-index:1;
}
@media(max-width:760px){
  .writer-wall-v620:after{left:68%;width:1px;opacity:.62;}
}

/* ============================================================
   V6.47 — CORNER TO THE LEFT
   Move only the architectural wall seam beside the window.
   Furniture, desk objects, chair, lamp, art, and interactions stay locked.
   ============================================================ */
.writer-wall-v620{
  background:
    linear-gradient(90deg,
      #64413b 0%,
      #68443d 31.7%,
      #5d3b36 32.1%,
      #573732 100%)!important;
}
.writer-wall-v620:before{
  background:
    linear-gradient(90deg,
      rgba(255,226,207,.035) 0%,
      rgba(255,226,207,.012) 29%,
      rgba(30,18,18,.025) 34%,
      rgba(20,13,14,.11) 100%),
    linear-gradient(180deg,transparent 0%,rgba(36,24,25,.16) 100%)!important;
}
.writer-wall-v620:after{
  left:32%!important;
}
@media(max-width:760px){
  .writer-wall-v620:after{left:32%!important;}
}

/* ============================================================
   V6.48 — THE CORNER LANDS
   Seam aligns behind the two "it"s in the wall note.
   Floor corner shadow travels down-left from that seam.
   Chair is 25% larger. Everything else remains locked.
   ============================================================ */
.writer-wall-v620{
  background:
    linear-gradient(90deg,
      #64413b 0%,
      #68443d 51.7%,
      #5d3b36 52.1%,
      #573732 100%)!important;
}
.writer-wall-v620:before{
  background:
    linear-gradient(90deg,
      rgba(255,226,207,.035) 0%,
      rgba(255,226,207,.012) 49%,
      rgba(30,18,18,.025) 54%,
      rgba(20,13,14,.11) 100%),
    linear-gradient(180deg,transparent 0%,rgba(36,24,25,.16) 100%)!important;
}
.writer-wall-v620:after{left:52%!important;}

/* Perspective cue: a restrained triangular floor shadow beginning at the
   wall corner and opening toward the lower-left, like the left wall plane. */
.writer-floor-v620:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(145deg,
    rgba(31,20,22,.16) 0%,
    rgba(31,20,22,.10) 27%,
    rgba(31,20,22,.035) 45%,
    transparent 45.5%);
  clip-path:polygon(52% 0,0 100%,52% 100%);
  pointer-events:none;
  z-index:1;
}

.wr-chair-v644{width:17.5%!important;}

@media(max-width:760px){
  .writer-wall-v620:after{left:52%!important;}
  .wr-chair-v644{width:25%!important;}
}

/* ============================================================
   V6.45 — THE CURRENT PAGE / WRITING PATHWAY
   Typewriter -> physical current transmission -> archive / essay.
   The finished Writer's Room geometry above remains untouched.
   ============================================================ */
.writing-desk-layer-v620{perspective:1200px}
.writing-desk-backdrop-v620{
  background:rgba(18,13,20,.56)!important;
  backdrop-filter:blur(5px) brightness(.72)!important;
  transition:background .35s,backdrop-filter .35s;
}
.current-page-v645{
  position:relative;width:min(680px,88vw);min-height:520px;max-height:86vh;overflow:auto;
  padding:42px 54px 38px;background:#fff9f3;color:#342b63;
  border:0!important;box-shadow:0 28px 75px rgba(10,7,14,.55),0 1px 0 rgba(255,255,255,.8) inset;
  font-family:"Courier New",monospace;
  clip-path:polygon(.6% .4%,12% .15%,25% .5%,39% .18%,52% .42%,67% .12%,81% .45%,99.5% .2%,99.8% 15%,99.55% 34%,99.85% 53%,99.5% 72%,99.7% 99.4%,84% 99.75%,69% 99.42%,53% 99.78%,37% 99.48%,20% 99.75%,.4% 99.35%,.15% 80%,.45% 59%,.12% 39%,.42% 18%);
  transform:translateY(70px) scale(.82) rotate(-.45deg);transform-origin:50% 90%;
  opacity:0;transition:transform .42s cubic-bezier(.2,.8,.2,1),opacity .3s;
}
.writing-desk-layer-v620.is-open .current-page-v645{transform:translateY(0) scale(1) rotate(-.45deg);opacity:1}
.current-page-v645:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.34;background:repeating-linear-gradient(0deg,rgba(150,118,211,.025) 0 1px,transparent 1px 25px),radial-gradient(circle at 20% 10%,rgba(244,166,198,.08),transparent 27%)}
.current-page-v645>*{position:relative;z-index:1}
.current-page-v645 .writing-desk-close-v620{right:24px;top:17px;color:#9676d3;opacity:.65}
.transmission-head-v645{display:flex;justify-content:space-between;gap:18px;align-items:baseline;padding-bottom:10px;border-bottom:1px solid #d8cdea;color:#9676d3;font-size:9px;letter-spacing:.12em}
.transmission-head-v645 time{color:#b08ca0;white-space:nowrap}
.current-page-v645 h2{max-width:590px;margin:27px 0 9px!important;color:#342b63!important;font:700 clamp(27px,4.4vw,43px)/1.03 Georgia,serif!important;letter-spacing:-.015em!important}
.current-page-deck-v645{margin:0 0 22px;color:#806a84;font:italic 14px/1.5 Georgia,serif}
.current-page-rule-v645{width:72px;height:1px;margin:20px 0;background:#f4a6c6}
.current-page-copy-v645{max-width:570px;color:#493e5d;font:14px/1.72 Georgia,serif}
.current-page-copy-v645 p{margin:0 0 12px}
.typed-line-v645{font-family:"Courier New",monospace!important;font-size:13px!important;color:#342b63!important;min-height:1.7em}
.typed-line-v645 .cursor-v645{display:inline-block;width:7px;height:1.05em;margin-left:2px;vertical-align:-2px;background:#9676d3;animation:cursor645 .8s steps(1) infinite}
@keyframes cursor645{50%{opacity:0}}
.current-page-actions-v645{display:flex;flex-wrap:wrap;gap:9px 16px;align-items:center;margin-top:29px;padding-top:17px;border-top:1px dashed #d8cdea}
.current-page-actions-v645 a{display:inline-block;color:#342b63;font:700 10px/1.2 "Courier New",monospace;text-decoration:none;letter-spacing:.04em}
.current-page-actions-v645 a:first-child{padding:9px 12px;background:#e7dff5;border:1px solid #9676d3;box-shadow:3px 3px 0 #f8d5e4}
.current-page-actions-v645 a:hover{color:#9676d3;transform:translateY(-1px)}
.current-page-stepback-v645{display:block;margin:28px 0 0 auto;border:0;background:transparent;color:#9b879d;font:9px "Courier New",monospace;cursor:pointer}
.current-page-foot-v645{margin-top:25px;color:#c3acc4;font:7px "Courier New",monospace;letter-spacing:.08em}
@media(max-width:700px){.current-page-v645{padding:38px 27px 30px;min-height:500px}.transmission-head-v645{align-items:flex-start;flex-direction:column;gap:4px}.current-page-actions-v645{align-items:flex-start;flex-direction:column}}

/* Writings archive: deliberately calmer than the physical room. */
.writings-archive-v645{max-width:880px;margin:38px auto 70px;padding:0 22px;font-family:"Courier New",monospace;color:#342b63}
.archive-paper-v645{background:#fff9f3;border:1px solid #b8a7e8;box-shadow:8px 8px 0 #e7dff5;padding:clamp(28px,5vw,52px)}
.archive-path-v645{font-size:9px;letter-spacing:.1em;color:#9676d3;margin:0 0 8px}
.archive-paper-v645 h1{font:700 clamp(30px,5vw,48px)/1 Georgia,serif;margin:0 0 8px}.archive-intro-v645{font:italic 14px/1.5 Georgia,serif;color:#77677e;margin:0 0 28px}
.archive-list-v645{border-top:1px solid #b8a7e8}.archive-entry-v645{display:grid;grid-template-columns:1fr auto;gap:6px 18px;padding:18px 4px;border-bottom:1px dashed #cfc4df;text-decoration:none;color:#342b63}.archive-entry-v645:hover{background:#f8d5e433}.archive-entry-v645 b{font-size:13px}.archive-entry-v645 span{grid-column:1;font:12px/1.45 Georgia,serif;color:#766a80}.archive-entry-v645 time{grid-column:2;grid-row:1/3;font-size:9px;color:#9676d3}.archive-entry-v645.draft{opacity:.5;cursor:default}.archive-return-v645{display:inline-block;margin-top:24px;color:#9676d3;font-size:10px}


/* =========================================================
   ESSAY MANUSCRIPT PASS — the page that came from the typewriter
   ========================================================= */
.reading-room{max-width:930px}
.essay-paper{position:relative;overflow:visible;background:
  linear-gradient(90deg,transparent 0 10.5%,rgba(244,166,198,.18) 10.5% 10.7%,transparent 10.7%),
  repeating-linear-gradient(0deg,rgba(52,43,99,.018) 0 1px,transparent 1px 28px),
  var(--paper);box-shadow:10px 12px 0 rgba(184,167,232,.14),0 18px 42px rgba(52,43,99,.08)}
.essay-paper:before{content:"";position:absolute;inset:10px -7px -8px 8px;border:1px solid rgba(52,43,99,.08);z-index:-1;transform:rotate(.25deg);background:#fffaf5}
.manuscript-mark{position:absolute;font:9px/1.4 'Courier New',monospace;letter-spacing:.13em;color:#8c789e;text-transform:uppercase}
.manuscript-page{right:28px;top:24px;transform:rotate(1deg)}
.manuscript-note{right:-45px;top:160px;width:125px;padding:9px 11px;background:#f8d5e4cc;border:1px solid #b8a7e866;box-shadow:3px 4px 0 #342b6310;font:italic 11px/1.35 Georgia,serif;letter-spacing:0;text-transform:none;color:#8d617b;transform:rotate(2.5deg)}
.essay-head{text-align:left;max-width:680px;margin:0 auto;padding-top:12px}
.essay-head h1{margin:9px 0 12px;font-family:Georgia,serif}
.essay-head .eyebrow{font:9px/1.5 'Courier New',monospace;letter-spacing:.14em;text-transform:uppercase}
.essay-deck{margin:0 0 12px}
.essay-body{position:relative}
.essay-body p:first-of-type:first-letter{font-size:1.06em}
.pencil-note{position:absolute;width:125px;font:italic 11px/1.35 Georgia,serif;color:#9a7188;opacity:.88}
.note-one{left:-150px;top:44px;transform:rotate(-4deg)}
.note-two{right:-148px;bottom:40px;transform:rotate(3deg)}
.typewriter-finish{font:10px/1.5 'Courier New',monospace;letter-spacing:.16em;color:#6f5b86}
.end-note{font:italic 12px/1.5 Georgia,serif;color:#9a7188;margin:10px 0 15px}
.essay-end a{font:10px/1.5 'Courier New',monospace}
@media(max-width:1050px){.manuscript-note,.pencil-note{display:none}}
@media(max-width:760px){.manuscript-page{right:16px;top:15px}.essay-head{padding-top:18px}.essay-paper{background:repeating-linear-gradient(0deg,rgba(52,43,99,.018) 0 1px,transparent 1px 28px),var(--paper)}}

/* =========================================================
   V6.52 — ESSAY READABILITY POLISH
   Quiet manuscript: narrower measure, slightly larger type,
   more paragraph air, clearer ending. No layout changes elsewhere.
   ========================================================= */
.essay-body{
  max-width:610px;
  margin:46px auto 50px;
  font-size:18px;
  line-height:1.95;
}
.essay-body p{margin:0 0 29px}
.essay-divider{margin:42px 0}
.essay-end{
  margin-top:56px;
  padding-top:30px;
  font-size:11px;
}
.typewriter-finish{font-size:11px;letter-spacing:.15em}
.end-note{font-size:13px;margin:11px 0 17px}
.essay-end a{font-size:11px;line-height:1.6}
@media(max-width:760px){
  .essay-body{max-width:100%;font-size:16px;line-height:1.9;margin:38px auto 42px}
  .essay-body p{margin-bottom:25px}
}

/* =========================================================
   ARCHIVE 44 v6.54 — PHYSICAL BASEMENT OFFICE
   Real asset composition; drawer behavior preserved.
   ========================================================= */
.archive-office-scene-v654{min-height:780px!important;padding:18px 0 8px!important;overflow:visible!important}
.archive-room-v654{position:relative;width:min(1080px,96vw);height:720px;margin:0 auto;overflow:hidden;border:1px solid rgba(246,217,120,.18);border-radius:3px;background:linear-gradient(180deg,#252833 0 58%,#1d1d24 58% 100%);box-shadow:inset 0 0 90px rgba(0,0,0,.42),0 24px 55px rgba(0,0,0,.28)}
.archive-room-v654:before{content:"";position:absolute;left:0;right:0;top:58%;height:2px;background:rgba(255,255,255,.05);box-shadow:0 18px 50px rgba(0,0,0,.45)}
.archive-room-v654:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 24%,rgba(246,217,120,.07),transparent 32%),linear-gradient(90deg,rgba(121,217,220,.025),transparent 28%,transparent 72%,rgba(244,166,198,.025))}
.archive-asset-v654,.archive-object-v654 img{position:absolute;display:block;max-width:none;filter:drop-shadow(0 7px 8px rgba(0,0,0,.28))}
.archive-object-v654{position:absolute;z-index:8;padding:0;border:0;background:transparent;cursor:pointer}
.archive-object-v654 img{position:static;width:100%;height:auto}
.archive-object-v654:hover{filter:brightness(1.08)}
.archive-wall-label-v654{position:absolute;left:34px;top:22px;z-index:3;font:9px/1.2 monospace;letter-spacing:.16em;color:#d7d0bb;opacity:.55}
.archive-pipes-v654{width:310px;left:-34px;top:36px;opacity:.52}
.archive-fluorescent-v654{width:280px;left:385px;top:22px;opacity:.82}
.archive-ceiling-v654{width:150px;right:50px;top:-18px;opacity:.65}
.archive-door-v654{width:126px;right:35px;top:92px}
.archive-board-v654{width:195px;left:54px;top:165px;z-index:3;opacity:.9}
.archive-board-note-v654{position:absolute;left:101px;top:230px;z-index:4;transform:rotate(-3deg);font:8px/1.35 monospace;color:#211b1d;text-align:center;opacity:.8}
.archive-desk-v654{width:555px;left:270px;bottom:28px;z-index:3}
.archive-chair-v654{width:178px;left:205px;bottom:5px;z-index:7;transform:rotate(-4deg)}
.archive-computer-v654{width:148px;left:360px;bottom:238px}
.archive-lamp-v654{width:112px;left:655px;bottom:230px;z-index:6}
.archive-coffee-v654{width:54px;left:608px;bottom:248px;z-index:7}
.archive-phone-v654{width:83px;left:520px;bottom:244px;z-index:7;transform:rotate(2deg)}
.archive-rolodex-v654{width:78px;left:725px;bottom:203px}
.archive-papers-v654{width:145px;left:402px;bottom:48px;z-index:6;opacity:.82}
.archive-boxes-v654{width:165px;right:18px;bottom:8px;z-index:5}
.archive-unsorted-v654{position:absolute;left:420px;bottom:105px;z-index:9;transform:rotate(-4deg);padding:7px 10px;background:#efe1a9;color:#342B63;border:1px solid #342B63;box-shadow:2px 3px 0 rgba(0,0,0,.18);font:8px monospace}
.archive-unsorted-v654 b,.archive-unsorted-v654 span{display:block}.archive-unsorted-v654 span{margin-top:3px;font-size:7px;opacity:.7}
.archive-room-caption-v654{position:absolute;right:260px;top:128px;z-index:3;font:italic 11px Georgia,serif;color:#d7d0bb;opacity:.45}
.archive-cabinet-wrap-v654{position:absolute;width:255px;left:28px;bottom:12px;z-index:10}
.archive-cabinet-image-v654{display:block;width:100%;height:auto;filter:drop-shadow(0 12px 10px rgba(0,0,0,.36))}
.archive-drawer-hotspot-v654{position:absolute!important;left:34%!important;width:57%!important;height:13%!important;margin:0!important;min-height:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;opacity:1!important;overflow:visible!important;z-index:12!important;color:transparent!important}
.archive-drawer-hotspot-v654 span{position:absolute;left:102%;top:50%;transform:translateY(-50%) translateX(-3px);white-space:nowrap;padding:4px 7px;background:#FFF9F3;color:#342B63;border:1px solid #342B63;font:7px monospace;letter-spacing:.05em;opacity:0;pointer-events:none;transition:.14s ease;box-shadow:2px 2px 0 rgba(0,0,0,.18)}
.archive-drawer-hotspot-v654:hover span,.archive-drawer-hotspot-v654:focus-visible span{opacity:1;transform:translateY(-50%) translateX(3px)}
.drawer-hotspot-1{top:23%!important}.drawer-hotspot-2{top:40%!important}.drawer-hotspot-3{top:53%!important}.drawer-hotspot-4{top:66%!important}.drawer-hotspot-5{top:77%!important}.drawer-hotspot-6{top:87%!important}
.archive-door-whisper-v654{position:absolute;right:25px;top:240px;z-index:20;padding:6px 8px;background:#171525;color:#F6D978;border:1px solid rgba(246,217,120,.35);font:8px monospace;opacity:0;transform:translateY(5px);transition:.18s ease;pointer-events:none}.archive-door-whisper-v654.show{opacity:1;transform:none}
.archive-terminal-v654,.archive-index-v654{position:absolute;z-index:30;width:210px;padding:12px 14px;background:#11151b;color:#79D9DC;border:1px solid #79D9DC;box-shadow:5px 7px 0 rgba(0,0,0,.3);font:9px/1.5 monospace}.archive-terminal-v654{left:390px;bottom:350px}.archive-index-v654{right:48px;bottom:150px;background:#FFF9F3;color:#342B63;border-color:#342B63}.archive-terminal-v654 b,.archive-terminal-v654 span,.archive-terminal-v654 small,.archive-index-v654 b,.archive-index-v654 span,.archive-index-v654 small{display:block}.archive-terminal-v654 span,.archive-index-v654 b{margin-top:6px;font-weight:bold}.archive-terminal-v654 small,.archive-index-v654 small{margin-top:7px;opacity:.65}.archive-terminal-v654.show,.archive-index-v654.show{animation:archivePop654 .16s ease-out}
@keyframes archivePop654{from{opacity:0;transform:translateY(5px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:760px){.archive-office-scene-v654{min-height:590px!important}.archive-room-v654{height:560px;width:96vw}.archive-cabinet-wrap-v654{width:190px;left:4px}.archive-desk-v654{width:410px;left:135px;bottom:18px}.archive-chair-v654{width:135px;left:105px}.archive-computer-v654{width:112px;left:205px;bottom:183px}.archive-lamp-v654{width:85px;left:430px;bottom:175px}.archive-coffee-v654{width:40px;left:395px;bottom:187px}.archive-phone-v654{display:none}.archive-rolodex-v654{width:60px;left:475px;bottom:155px}.archive-board-v654{width:145px;left:18px;top:125px}.archive-board-note-v654{display:none}.archive-door-v654{width:92px;right:15px;top:75px}.archive-boxes-v654{width:120px;right:5px}.archive-pipes-v654{width:220px}.archive-fluorescent-v654{width:210px;left:190px}.archive-ceiling-v654{display:none}.archive-room-caption-v654{display:none}.archive-papers-v654{width:105px;left:250px}.archive-unsorted-v654{left:260px;bottom:82px}.archive-terminal-v654{left:185px;bottom:275px}.archive-index-v654{right:12px;bottom:125px}}
\n\n/* =========================================================\n   ARCHIVE 44 v6.55 — SCALE + PERSPECTIVE PASS\n   Cropped source art removes transparent-canvas scaling.\n   Functional drawer/terminal behavior intentionally unchanged.\n   ========================================================= */\n.archive-room-v654{height:720px}\n.archive-pipes-v654{width:330px;left:-12px;top:52px;opacity:.42;z-index:2}\n.archive-fluorescent-v654{width:300px;left:390px;top:36px;opacity:.78;z-index:2}\n.archive-ceiling-v654{display:none!important}\n.archive-door-v654{width:145px;right:54px;top:112px;z-index:4}\n.archive-board-v654{width:205px;left:52px;top:176px;z-index:3;opacity:.92}\n.archive-board-note-v654{left:103px;top:245px}\n.archive-desk-v654{width:520px;left:330px;bottom:18px;z-index:4}\n.archive-chair-v654{width:155px;left:286px;bottom:8px;z-index:8;transform:rotate(-3deg)}\n.archive-cabinet-wrap-v654{width:225px;left:52px;bottom:18px;z-index:10}\n.archive-computer-v654{width:145px;left:405px;bottom:272px;z-index:8}\n.archive-lamp-v654{width:132px;left:690px;bottom:255px;z-index:8}\n.archive-coffee-v654{width:46px;left:650px;bottom:278px;z-index:9}\n.archive-phone-v654{width:86px;left:566px;bottom:274px;z-index:9;transform:rotate(1deg)}\n.archive-rolodex-v654{width:72px;left:748px;bottom:266px;z-index:9}\n.archive-papers-v654{width:92px;left:282px;bottom:12px;z-index:7;opacity:.9;transform:rotate(-5deg)}\n.archive-boxes-v654{width:120px;right:22px;bottom:10px;z-index:5}\n.archive-unsorted-v654{left:286px;bottom:78px;z-index:11;transform:rotate(-5deg)}\n.archive-room-caption-v654{right:255px;top:155px}\n.archive-terminal-v654{left:420px;bottom:390px}\n.archive-index-v654{right:50px;bottom:155px}\n@media(max-width:760px){\n  .archive-room-v654{height:560px}\n  .archive-pipes-v654{width:235px;left:-18px;top:44px}\n  .archive-fluorescent-v654{width:220px;left:190px;top:34px}\n  .archive-door-v654{width:105px;right:18px;top:92px}\n  .archive-board-v654{width:150px;left:18px;top:145px}\n  .archive-desk-v654{width:390px;left:155px;bottom:18px}\n  .archive-chair-v654{width:116px;left:125px;bottom:8px}\n  .archive-cabinet-wrap-v654{width:168px;left:8px;bottom:16px}\n  .archive-computer-v654{width:108px;left:215px;bottom:211px}\n  .archive-lamp-v654{width:98px;left:430px;bottom:196px}\n  .archive-coffee-v654{width:34px;left:397px;bottom:212px}\n  .archive-phone-v654{display:none}\n  .archive-rolodex-v654{width:54px;left:476px;bottom:204px}\n  .archive-papers-v654{width:70px;left:180px;bottom:10px}\n  .archive-boxes-v654{width:86px;right:4px;bottom:8px}\n  .archive-unsorted-v654{left:184px;bottom:61px}\n  .archive-terminal-v654{left:205px;bottom:300px}\n  .archive-index-v654{right:10px;bottom:120px}\n}\n\n\n/* =========================================================
   ARCHIVE 44 v6.56 — ROOM POLISH PASS
   Desk objects seated on the desktop; architecture tightened.
   ========================================================= */
.archive-pipes-v654{width:300px;left:-58px;top:12px;opacity:.38;z-index:2}
.archive-fluorescent-v654{width:205px;left:400px;top:30px;opacity:.78;z-index:2}
.archive-switch-v656{width:27px;right:205px;top:205px;z-index:5;opacity:.82;filter:drop-shadow(0 3px 4px rgba(0,0,0,.28))}
.archive-door-v654{width:150px;right:50px;top:150px;z-index:4}
.archive-computer-v654{width:145px;left:390px;bottom:298px;z-index:8}
.archive-phone-v654{width:86px;left:540px;bottom:300px;z-index:9;transform:rotate(1deg)}
.archive-coffee-v654{width:46px;left:625px;bottom:302px;z-index:9}
.archive-lamp-v654{width:125px;left:665px;bottom:292px;z-index:8}
.archive-rolodex-v654{width:68px;left:758px;bottom:298px;z-index:9}
.archive-papers-v654{width:78px;left:252px;bottom:18px;z-index:6;opacity:.82;transform:rotate(-7deg)}
.archive-unsorted-v654{left:250px;bottom:68px;z-index:11;transform:rotate(-7deg)}
.archive-boxes-v654{width:125px;right:72px;bottom:-4px;z-index:5;transform:rotate(1deg)}
@media(max-width:760px){
  .archive-pipes-v654{width:210px;left:-48px;top:12px}
  .archive-fluorescent-v654{width:155px;left:205px;top:26px}
  .archive-switch-v656{width:20px;right:120px;top:150px}
  .archive-door-v654{width:108px;right:16px;top:120px}
  .archive-computer-v654{width:108px;left:205px;bottom:228px}
  .archive-phone-v654{display:none}
  .archive-coffee-v654{width:34px;left:382px;bottom:230px}
  .archive-lamp-v654{width:92px;left:410px;bottom:220px}
  .archive-rolodex-v654{width:50px;left:480px;bottom:228px}
  .archive-papers-v654{width:58px;left:172px;bottom:10px}
  .archive-unsorted-v654{left:174px;bottom:54px}
  .archive-boxes-v654{width:88px;right:22px;bottom:-2px}
}