/* Scoped to the approved directory. No changes to the room/monitor UI. */
#portal-directory{background:#e7e4f4;color:#251078;font-family:'Segoe UI','Microsoft YaHei',sans-serif}
#portal-directory .directory-scene{position:absolute;inset:0;isolation:isolate;overflow:hidden;visibility:hidden}
#portal-directory img{position:static;inset:auto;display:block;width:100%;height:auto;object-fit:contain;user-select:none}
#portal-directory .frame-header,#portal-directory .frame-footer{position:absolute;left:4%;right:4%;display:flex;align-items:center;gap:22px;font:clamp(12px,1.6vw,29px)/1.1 Consolas,monospace;z-index:10;pointer-events:none}
#portal-directory .frame-header{top:4%}
#portal-directory .frame-footer{bottom:9%}
#portal-directory .frame-header i,#portal-directory .frame-footer i{height:1px;background:currentColor;flex:1;opacity:.7}
#portal-directory .frame-header b{font-size:1.3em;letter-spacing:3px}
#portal-directory .title{position:absolute;left:4.5%;top:12%;width:min(31%,55svh);z-index:5}
#portal-directory .reference-title{width:100%;margin:0;font-size:0;line-height:0}
#portal-directory .folders{position:absolute;inset:0;pointer-events:none}
#portal-directory .folder-entry{position:absolute;left:calc(37% - var(--i)*1.2%);top:calc(3% + var(--i)*14%);width:min(65vw,116svh,1400px);aspect-ratio:3/2;visibility:hidden;z-index:calc(1 + var(--i));transform-origin:50% 85%;pointer-events:none}
#portal-directory .folder-hover{position:relative;width:100%;height:100%;transition:translate .32s cubic-bezier(.2,.8,.2,1)}
#portal-directory .folder-hover:has(.folder-label:hover),#portal-directory .folder-hover:focus-within{translate:0 -12px}
#portal-directory .folder-entry img{filter:drop-shadow(0 9px 7px #45325c28)}
#portal-directory .folder-label{position:absolute;left:15%;right:10%;top:15%;padding:0;border:0;background:transparent;color:#251078;display:flex;align-items:center;gap:3%;font-family:inherit;text-align:left;cursor:pointer;pointer-events:none;border-radius:4px}
body[data-portal="directory"] #portal-directory .folder-label{pointer-events:auto}
#portal-directory .folder-label:focus-visible{outline:2px solid currentColor;outline-offset:9px}
#portal-directory .cobalt .folder-label{color:#fff8ff}
#portal-directory .number{font:clamp(28px,min(3.5vw,6vh),64px)/1 Arial,sans-serif;letter-spacing:-.04em}
#portal-directory .name{display:flex;flex-direction:column;gap:3px;white-space:nowrap}
#portal-directory .name strong{font-size:clamp(18px,min(1.85vw,3.3vh),36px);font-weight:650;letter-spacing:.04em}
#portal-directory .name>span,#portal-directory .page{font:clamp(12px,min(1.2vw,2.2vh),24px)/1.1 Consolas,monospace}
#portal-directory .folder-label i{flex:1;height:1px;background:currentColor;align-self:flex-end;margin-bottom:4px;opacity:.8}
#portal-directory .page{white-space:nowrap;align-self:flex-end;margin-bottom:1px}
#portal-directory .left-decor{position:absolute;left:4.5%;top:47%;width:29%;height:39%;z-index:5;pointer-events:none}
#portal-directory .decor-item{position:absolute;visibility:hidden;transform-origin:50% 60%}
#portal-directory .decor-item img{filter:drop-shadow(0 7px 6px #43317b24)}
#portal-directory .decor-note{left:0;top:0;width:min(48%,24svh)}
#portal-directory .decor-keycap{left:2%;bottom:0;width:min(42%,21svh)}
#portal-directory .decor-smile{right:4%;top:31%;width:min(43%,22svh)}
#portal-directory .directory-error{position:absolute;inset:40% 10% auto;text-align:center;font-size:18px}
@media(max-width:700px){
 #portal-directory .frame-header,#portal-directory .frame-footer{left:6%;right:6%;gap:9px;font-size:12px}
 #portal-directory .frame-header{top:28px}
 #portal-directory .frame-footer{bottom:82px}
 #portal-directory .title{top:72px;left:5%;width:58%}
 #portal-directory .reference-title{max-width:220px}
 #portal-directory .left-decor{left:auto;right:3%;top:66px;width:37%;height:187px}
 #portal-directory .decor-note{left:0;top:0;width:100%}
 #portal-directory .decor-keycap{left:-13%;bottom:0;width:67%}
 #portal-directory .decor-smile{right:-1%;top:auto;bottom:17%;width:54%}
 #portal-directory .folder-entry{left:calc(1% - var(--i)*.65%);top:calc(30% + var(--i)*9.25%);width:103%;max-width:none}
 #portal-directory .folder-label{top:18%;gap:3%;left:12%;right:10%}
 #portal-directory .number{font-size:32px}
 #portal-directory .name strong{font-size:19px}
 #portal-directory .name>span,#portal-directory .page{font-size:11px}
 #portal-directory .folder-label i{min-width:8px}
 #portal-directory .folder-hover:has(.folder-label:hover),#portal-directory .folder-hover:focus-within{translate:0 -6px}
}
@media(max-width:700px) and (max-height:740px){
 #portal-directory .frame-header{top:18px}
 #portal-directory .title{top:50px;width:48%}
 #portal-directory .left-decor{top:46px;width:34%;height:145px}
 #portal-directory .number{font-size:26px}
 #portal-directory .name strong{font-size:16px}
 #portal-directory .name>span,#portal-directory .page{font-size:10px}
 #portal-directory .frame-footer{bottom:68px;font-size:10px}
}
@media(prefers-reduced-motion:reduce){
 #portal-directory .folder-hover{transition:none}
 #portal-directory .folder-hover:has(.folder-label:hover),#portal-directory .folder-hover:focus-within{translate:none}
}
/* Stable hit areas are separate from moving imagery and entrance transforms. */
#portal-directory .decor-control{display:block;position:relative;width:100%;aspect-ratio:1;border:0;padding:0;margin:0;background:transparent;border-radius:8px;pointer-events:none;touch-action:pan-y;-webkit-tap-highlight-color:transparent;cursor:pointer;outline-offset:3px}
body[data-portal="directory"] #portal-directory[data-entrance="complete"] .decor-control{pointer-events:auto}
#portal-directory .decor-control:hover{background:transparent}
#portal-directory .decor-control:focus-visible{outline:2px dashed #6754c8}
#portal-directory .decor-control img{pointer-events:none;-webkit-user-drag:none}
#portal-directory .paper-curl{display:none;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 9px 7px #43317b2c)}
#portal-directory .is-curling>img{clip-path:inset(0 0 64% 0)}
#portal-directory .is-curling>.paper-curl{display:block;clip-path:inset(36% 0 0 0)}
#portal-directory .decor-smile .decor-control:after{content:'';position:absolute;left:20%;right:15%;bottom:4%;height:7%;background:#47309e24;border-radius:50%;filter:blur(5px);opacity:0;pointer-events:none}
#portal-directory .decor-smile .is-active img{animation:directory-coin-hop .88s infinite;transform-origin:50% 90%}
#portal-directory .decor-smile .is-active:after{animation:directory-coin-shadow .88s infinite}
@keyframes directory-coin-hop{
 0%,100%{transform:translateY(0) scale(1.02,.98);animation-timing-function:cubic-bezier(.22,.65,.35,1)}
 46%{transform:translateY(-13%) rotate(-3deg) scale(.99,1.02);animation-timing-function:cubic-bezier(.55,0,.8,.45)}
 88%{transform:translateY(0) scale(1.05,.94);animation-timing-function:ease-out}
}
@keyframes directory-coin-shadow{0%,100%{opacity:.65;transform:scaleX(1)}46%{opacity:.25;transform:scaleX(.65)}88%{opacity:.7;transform:scaleX(1.06)}}
@media(prefers-reduced-motion:reduce){
 #portal-directory .decor-smile .is-active img,#portal-directory .decor-smile .is-active:after{animation:none}
 #portal-directory .decor-control.is-active{outline:2px dashed #6754c8}
}