/* A concealed layer of the workspace, reached by pulling its divider. */
.workspace-body{position:relative}
.sidebar-resizer,.terminal-resizer{touch-action:none;user-select:none}
.room-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.room-peek{position:absolute;top:0;bottom:0;overflow:hidden;border-radius:10px 0 0 10px;pointer-events:none;background:#111820;z-index:1}
.room-peek-photo{position:absolute;inset:0;background:url('assets/maintenance-corridor.png') 30% center/auto 100%;opacity:.8}
.room-peek::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#0b1218 0%,transparent 55%);box-shadow:inset 8px 0 24px #0008}
.room-peek-copy{position:absolute;z-index:1;bottom:38px;left:12px;right:10px;font:11px/1.5 var(--mono);color:#c0d3e0;opacity:var(--peek-progress);white-space:nowrap}
.room-peek-meter{position:absolute;z-index:1;bottom:24px;left:12px;right:12px;height:2px;background:#ffffff20}
.room-peek-meter i{display:block;height:100%;background:#86bdda;transform:scaleX(var(--peek-progress));transform-origin:left}
.room-peek-ready .room-peek-copy{color:#f4d9a9}
.room-peek-ready .room-peek-meter i{background:#e8bc7c}
.room-peeking .main-area{position:relative;z-index:2;transform:translateX(var(--room-peek-width));box-shadow:-12px 0 25px #0007;pointer-events:none}
.room-peeking .sidebar{position:relative;z-index:2}

#secret-room{--room-ink:#dce3e8;--room-muted:#8e9aa5;--paper:#f1f5f8;--paper-ink:#243646;--pencil:#536c80;--sketch-blue:#256e9b;color-scheme:dark;position:fixed;inset:49px 12px 38px 56px;width:auto;height:auto;max-width:1480px;max-height:none;margin:0 auto;padding:0;border:1px solid #46515b;border-radius:13px;background:#171d23;color:var(--room-ink);overflow:hidden;box-shadow:0 30px 100px #0009}
#secret-room[open]{display:flex;flex-direction:column}
#secret-room::backdrop{background:#090d12a8;backdrop-filter:blur(3px)}
#secret-room button{font-family:var(--sans);transition:background .18s,border-color .18s,color .18s}
#secret-room button:focus-visible{outline:2px solid #9ad4f5;outline-offset:3px}
#secret-room [tabindex='-1']:focus{outline:none}
.room-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;gap:16px;padding:18px 24px;background:#191f25;border-bottom:1px solid #ffffff0d}
.room-location{display:block;font:10px/1.4 var(--mono);letter-spacing:1.6px;text-transform:uppercase;color:#92a3b0;margin-bottom:5px}
#secret-room h1{margin:0;color:#edf1f4;font:500 21px/1.25 var(--sans);letter-spacing:-.4px}
.room-exit{height:44px;padding:0 14px;border:1px solid #3b464f;border-radius:7px;font-size:12px;white-space:nowrap;background:#222a32;color:#d5dfe6}
#secret-room .room-exit:hover{background:#303b45;border-color:#617887}
.room-exit svg{width:16px;height:16px}
.room-corridor{display:flex;flex-direction:column;flex:1;min-height:0}
.room-scene{position:relative;flex:1;min-height:0;overflow:hidden;background:#171e25}
.room-art{display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:70% center;opacity:0;transition:opacity .4s}
.room-art-ready .room-art{opacity:1}
.room-loading{position:absolute;top:42%;left:24px;right:24px;margin:0;text-align:center;font:12px/1.7 var(--mono);color:#bcc9d3}
.room-art-ready .room-loading{display:none}
.room-note{position:absolute;left:30%;top:30%;margin:0;color:#dce4ec;font:italic 24px/1.35 'Bradley Hand','Segoe Print',cursive;letter-spacing:-.2px;transform:rotate(-5deg);text-shadow:0 1px 8px #000a;opacity:0;transition:opacity .4s}
.room-note span{display:block;font-size:15px;text-align:right;margin-top:10px;color:#a2b6c5}
.room-art-ready .room-note{opacity:.9}
#secret-room .room-door{position:absolute;display:block;padding:0;border:1px solid transparent;border-radius:3px;background:transparent}
#secret-room .room-door:hover{background:#f7d29104;border-color:#ffdf9e60;box-shadow:inset 0 0 36px #efb76412,0 0 22px #efb76410}
#secret-room .room-door:focus-visible{outline-color:#ffd596;outline-offset:5px}
.room-door-label{position:absolute;bottom:17%;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% + 22px);min-width:154px;padding:13px 18px;border:1px solid #d6ac6966;border-radius:8px;background:#191b1de8;box-shadow:0 6px 28px #0005;backdrop-filter:blur(8px);text-align:center;transition:background .18s,transform .18s}
.room-door-label>span{display:block;font-size:11px;color:#cdbfa8;margin-bottom:5px;white-space:nowrap}
.room-door-label strong{display:block;font-size:13px;font-weight:500;color:#ffe3b1;white-space:nowrap}
.room-door:hover .room-door-label{background:#302920f0;transform:translateX(-50%) translateY(-2px)}
.room-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 24px;border-top:1px solid #ffffff0c;font-size:11px;color:#9aa8b3;background:#171d23;flex-shrink:0}
.room-footer kbd{font:10px var(--mono);background:#252d35;color:#b6c5d0;border-color:#3d4a54;box-shadow:none;margin-right:5px}
.room-art-error .room-loading{top:22%;left:12%;right:12%}
.room-art-error .room-door{border:1px solid #ad875a55!important}

/* The notebook is a working surface: selectable steps, marginal notes, and a page index. */
.room-sketchbook{display:grid;grid-template-columns:188px minmax(0,1fr);flex:1;min-height:0;overflow:hidden}
.sketchbook-navigation{display:flex;flex-direction:column;gap:26px;padding:20px 14px;background:#1c242c;border-right:1px solid #ffffff09;overflow:auto}
#secret-room .sketch-corridor-link{justify-content:flex-start;min-height:44px;padding:0 10px;border-radius:6px;font-size:12px;color:#b5c5d1;text-align:left}
.sketch-corridor-link::before{content:'←';font-size:16px;margin-right:1px}
.sketchbook-navigation nav{display:flex;flex-direction:column;gap:6px}
.sketchbook-navigation [data-study]{display:flex;justify-content:flex-start;align-items:flex-start;gap:11px;width:100%;padding:15px 11px;border:1px solid transparent;border-radius:7px;text-align:left;color:#98a9b7;min-height:62px}
.sketchbook-navigation [data-study]>span{font:10px/1.7 var(--mono);color:#6e8697}
.sketchbook-navigation [data-study] strong{font-size:12px;line-height:1.6;font-weight:400}
#secret-room .sketchbook-navigation [data-study]:hover{background:#273540;color:#d2dfe8}
#secret-room .sketchbook-navigation [aria-current='page']{background:#283845;border-color:#425e70;color:#dceefa}
.sketchbook-navigation [aria-current='page']>span{color:#90b8d0}
.sketchbook-navigation>p{margin:auto 10px 4px;font-size:11px;line-height:1.6;color:#7d91a0}
.sketch-paper{color-scheme:light;overflow:auto;overscroll-behavior:contain;min-width:0;min-height:0;padding:32px clamp(24px,5vw,72px) 22px;background:var(--paper);color:var(--paper-ink);scrollbar-color:#a1b1bd #e6edf2}
#sketch-page,.sketch-pagination{width:100%;max-width:720px;margin:0 auto}
.sketch-page-top{display:flex;justify-content:space-between;padding-bottom:18px;border-bottom:1px solid #cdd9e1;font:10px var(--mono);text-transform:uppercase;letter-spacing:1.2px;color:#657d8e}
#secret-room .sketch-paper h2{font:550 clamp(25px,3.2vw,38px)/1.15 var(--sans);letter-spacing:-1.25px;margin:26px 0 10px;color:var(--paper-ink)}
.sketch-premise{font-size:16px;line-height:1.6;color:#3f657f;margin:0 0 11px}
.sketch-context{font-size:13px;line-height:1.8;max-width:550px;color:#617280;margin:0}
.sketch-diagram{position:relative;width:100%;height:206px;margin:19px 0 15px;color:var(--sketch-blue);background-image:radial-gradient(#7895a82b .75px,transparent .75px);background-size:16px 16px;border-top:1px solid #d9e3e9;border-bottom:1px solid #d9e3e9}
.sketch-diagram>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sketch-link,.sketch-return-line{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;vector-effect:non-scaling-stroke}
.sketch-return-line{display:none;stroke-dasharray:5 6;stroke:#6d91a7}
.sketch-diagram-2 .sketch-return-line{display:block}
#secret-room .sketch-node{position:absolute;top:41%;transform:translate(-50%,-50%);width:24%;height:60px;background:#f4f8fb;border:1.5px solid #86a5ba;border-radius:4px;color:#39647f;font-size:14px;font-weight:500;box-shadow:2px 3px 0 #607f9420}
.sketch-node[data-sketch-node='0']{left:15%}
.sketch-node[data-sketch-node='1']{left:50%}
.sketch-node[data-sketch-node='2']{left:85%}
#secret-room .sketch-node:hover{border-color:#367da8;background:#e5f0f7}
#secret-room .sketch-node[aria-pressed='true']{border-color:#377caa;background:#dbeaf4;color:#1f5274;box-shadow:2px 3px 0 #4580a440}
#secret-room .sketch-node:focus-visible{outline-color:#2674a3;outline-offset:4px}
.sketch-diagram-note{position:absolute;top:66%;left:0;right:0;text-align:center;font:italic 15px/1.4 'Bradley Hand','Segoe Print',Georgia,serif;color:#6b8ba1}
.sketch-diagram-2 .sketch-diagram-note{top:auto;bottom:0;background:var(--paper);padding:3px 8px;width:max-content;max-width:100%;margin:auto}
.sketch-detail{border-left:2px solid #6c9ebe;padding:2px 0 2px 15px;min-height:77px;margin:22px 0;color:#405b6d}
.sketch-detail strong{display:block;font-size:12px;font-weight:600;color:#356787;margin-bottom:6px}
.sketch-detail p{margin:0;font-size:13px;line-height:1.75;max-width:550px}
.sketch-takeaway{font-size:17px;line-height:1.5;font-weight:500;letter-spacing:-.2px;margin:22px 0 7px;color:#243e51}
.sketch-project{font-size:11px;line-height:1.7;color:#798c9a;margin:0}
.sketch-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:28px;padding-top:16px;border-top:1px solid #cdd9e1;font:10px var(--mono);color:#678094}
#secret-room .sketch-pagination button{height:44px;padding:0 13px;border:1px solid #b4c5d0;border-radius:6px;color:#355c75;font-size:12px;background:#f6f9fb}
#secret-room .sketch-pagination button:hover{background:#dfeaf2;border-color:#6c94ae}
#secret-room .sketch-pagination button:disabled{color:#9aaab5;border-color:#d4dfe6;background:transparent;cursor:default}
#secret-room [hidden],.room-peek[hidden]{display:none!important}
@media(min-width:1400px){.room-note{font-size:29px}.room-note span{font-size:18px}.room-door-label{padding:16px 24px}.room-door-label>span{font-size:12px}.room-door-label strong{font-size:14px}}
@media(max-width:900px){.room-note{left:22%;font-size:21px}.room-sketchbook{grid-template-columns:160px minmax(0,1fr)}.sketchbook-navigation{padding:16px 9px}.sketch-paper{padding:26px 25px 20px}.sketch-node{font-size:12px!important}}
@media(max-width:600px){
  #secret-room{inset:8px;border-radius:12px}
  .room-header{padding:16px 15px;gap:10px}
  .room-location{font-size:8px;letter-spacing:1.3px}
  #secret-room h1{font-size:18px;letter-spacing:-.45px}
  .room-exit{width:44px;flex-shrink:0;padding:0}
  .room-exit span{display:none}
  .room-exit svg{width:19px;height:19px}
  .room-note{left:20px;top:22px;font-size:19px;padding:8px 11px;border-radius:3px;background:#1a252fcc;transform:rotate(-3deg)}
  .room-note span{font-size:12px;margin-top:5px}
  .room-door-label{bottom:16%;padding:14px 16px}
  .room-footer{padding:15px 18px;font-size:11px}
  .room-footer>span:last-child{display:none}
  .room-sketchbook{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .sketchbook-navigation{gap:4px;padding:5px 10px 11px;overflow:visible;border-right:0;border-bottom:1px solid #ffffff12}
  #secret-room .sketch-corridor-link{height:44px;min-height:44px;padding:0 5px;font-size:11px}
  .sketchbook-navigation nav{flex-direction:row;gap:6px}
  .sketchbook-navigation [data-study]{flex:1;min-width:0;min-height:48px;padding:7px;gap:6px;align-items:center}
  .sketchbook-navigation [data-study]>span{font-size:9px}
  .sketchbook-navigation [data-study] strong{font-size:10px;line-height:1.4}
  .sketchbook-navigation>p{display:none}
  .sketch-paper{padding:22px 20px 18px}
  .sketch-page-top{font-size:9px;padding-bottom:15px}
  #secret-room .sketch-paper h2{font-size:28px;margin-top:21px;letter-spacing:-.9px}
  .sketch-premise{font-size:14px}
  .sketch-context{font-size:12px;line-height:1.75}
  .sketch-diagram{height:180px;margin:19px 0 15px;background-size:13px 13px}
  #secret-room .sketch-node{font-size:11px!important;height:52px;width:26%}
  .sketch-diagram-note{font-size:12px}
  .sketch-detail{min-height:92px;padding-left:12px;margin:18px 0}
  .sketch-detail p{font-size:12px}
  .sketch-takeaway{font-size:16px}
  .sketch-project{font-size:10px}
  .sketch-pagination{gap:6px;font-size:9px;margin-top:23px}
  #secret-room .sketch-pagination button{padding:0 10px;font-size:11px}
}
@media(prefers-reduced-motion:reduce){#secret-room *,#room-peek *{transition:none!important}}
