:root{
  --bg:#000; --fg:#fff; --dim:rgba(255,255,255,.62); --border:rgba(255,255,255,.22);
  --grid:rgba(0,255,0,.18); --green:#00ff00; --red:#ff3b3b; --panel:rgba(255,255,255,.06);
  --paper:#f0eadb; --ink:#050505; --shadow:rgba(0,0,0,.48);
  --mono:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}
html.mode-invert{ --bg:#fff; --fg:#000; --dim:rgba(0,0,0,.62); --border:rgba(0,0,0,.20); --grid:rgba(0,0,0,.12); --panel:rgba(0,0,0,.06); --shadow:rgba(0,0,0,.18); color-scheme:light; }
*{box-sizing:border-box}
html{height:100%; color-scheme:dark; scrollbar-gutter:stable;}
body{margin:0; width:100%; height:100%; overflow:hidden; background:var(--bg); color:var(--fg); font-family:var(--mono); font-weight:500;}
button{font:inherit}
.grid-bg{position:fixed; inset:0; pointer-events:none; opacity:.72; background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:42px 42px;}
.scan{position:fixed; inset:0; pointer-events:none; opacity:.06; background:repeating-linear-gradient(0deg,rgba(255,255,255,.035),rgba(255,255,255,.035) 1px,transparent 1px,transparent 5px)}
html.mode-invert .scan{background:repeating-linear-gradient(0deg,rgba(0,0,0,.035),rgba(0,0,0,.035) 1px,transparent 1px,transparent 5px)}
#desk{position:fixed; inset:0; overflow:hidden; touch-action:none;}
body.desk-pending #desk{opacity:0; pointer-events:none;}
#desk{opacity:1; transition:opacity .42s var(--ease);}
.archiveNodeHeader{position:fixed; left:18px; top:16px; z-index:80; margin:0; padding:0; font-size:11px; line-height:1.55; color:var(--green); text-transform:lowercase; text-align:left;}
.archiveNodePre{margin:0; padding:0; border:0; background:transparent; font:inherit; color:inherit; white-space:pre-wrap; text-transform:inherit; text-align:left;}
.cursor{display:inline-block; width:8px; margin-left:2px; animation:blink 1s steps(2,end) infinite;}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.archiveNodeHeader.signal-break{animation:headerBreak .56s steps(2,end)}
@keyframes headerBreak{0%,100%{color:var(--green); transform:none} 25%{color:var(--red); transform:translate(2px,-1px)} 55%{color:var(--green); transform:translate(-2px,1px)}}
.toggle{position:fixed; top:14px; right:14px; z-index:2147483647; display:inline-flex; align-items:center; gap:10px; padding:8px 10px; border-radius:0; border:1px solid var(--border); background:rgba(255,255,255,.06); color:var(--fg); font-size:12px; letter-spacing:.04em; cursor:pointer; user-select:none;}
html.mode-invert .toggle{background:rgba(0,0,0,.06)}
.pill{width:30px; height:16px; border-radius:999px; border:1px solid var(--border); background:rgba(0,0,0,.35); position:relative; flex:0 0 auto;}
html.mode-invert .pill{background:rgba(255,255,255,.6)}
.knob{position:absolute; top:1px; left:1px; width:12px; height:12px; border-radius:999px; background:var(--fg); transition:transform 160ms ease;}
html.mode-invert .knob{transform:translateX(14px)}
.modeMark{position:fixed; right:18px; bottom:34px; z-index:80; color:var(--green); font-size:10px; line-height:1.4; opacity:.9;}
.coords{position:fixed; right:18px; bottom:18px; z-index:80; color:var(--green); font-size:10px; opacity:.9;}
.utilityLink{position:fixed; right:18px; bottom:52px; z-index:340; appearance:none; border:0; background:transparent; color:var(--green); font:10px var(--mono); opacity:.72; cursor:pointer; padding:0; text-align:right; display:none;}
.utilityLink.is-available{display:block;}
.utilityLink:hover,.utilityLink.is-active{opacity:1; text-decoration:underline;}
.spread{position:absolute; width:min(55vw,720px); background:var(--paper); color:var(--ink); border:1px solid rgba(255,255,255,.26); box-shadow:0 30px 72px rgba(0,0,0,.72); cursor:grab; user-select:none; transform-origin:center; transition:transform .55s var(--ease), width .55s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease);}
html.mode-invert .spread{border-color:rgba(0,0,0,.24); box-shadow:0 30px 72px rgba(0,0,0,.22)}
.spread.dragging{cursor:grabbing; box-shadow:0 42px 110px rgba(0,0,0,.82); filter:contrast(1.04)}
.spread img{display:block; width:100%; height:auto; pointer-events:none; filter:grayscale(.12) contrast(1.05)}
.spread::before{content:attr(data-node); position:absolute; left:8px; top:8px; z-index:3; color:var(--green); background:#000; font-size:10px; line-height:1; padding:6px 7px; border:1px solid rgba(0,255,0,.42); text-transform:lowercase;}
.spread::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(120deg,transparent 0 48%,rgba(255,255,255,.18) 50%,transparent 54%); opacity:.14;}
.spread.glitch{animation:spreadGlitch .42s steps(2,end)}
@keyframes spreadGlitch{0%,100%{transform:translate(var(--x),var(--y)) rotate(var(--r))}20%{transform:translate(calc(var(--x) + 9px),calc(var(--y) - 3px)) rotate(var(--r)); filter:contrast(1.75)}45%{transform:translate(calc(var(--x) - 6px),calc(var(--y) + 6px)) rotate(calc(var(--r) * -1))}}
.spreadZoomBtn{position:absolute; right:8px; top:8px; z-index:6; width:28px; height:28px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.35); background:rgba(0,0,0,.78); color:var(--green); cursor:pointer; line-height:1; font-size:16px;}
.spreadZoomBtn:hover{background:#fff; color:#000; border-color:#fff}
.pin{position:absolute; width:24px; height:24px; border-radius:999px; border:1px solid var(--green); background:rgba(0,0,0,.78); z-index:5; display:grid; place-items:center; color:var(--green); font-size:12px; cursor:pointer;}
.pin:hover{transform:scale(1.15)}
.pin::after{content:""; position:absolute; top:50%; left:50%; width:10px; height:10px; border:1px solid var(--green); border-radius:50%; transform:translate(-50%,-50%); opacity:.8; animation:pinPulse 1.6s ease-out infinite;}
@keyframes pinPulse{0%{width:10px;height:10px;opacity:.8}70%,100%{width:40px;height:40px;opacity:0}}
body.grid-mode .spread{box-shadow:0 14px 36px rgba(0,0,0,.46)}
body.grid-mode .pin{transform:scale(.78); transform-origin:center}
.annotation{position:fixed; z-index:320; width:min(560px,calc(100vw - 34px)); left:50%; top:50%; transform:translate(-50%,-50%); border:1px solid var(--border); background:var(--bg); color:var(--fg); display:none; box-shadow:0 24px 100px rgba(0,0,0,.82);}
.annotation.show{display:block}
.annotation .k{font-size:12px; color:var(--dim); border-bottom:1px solid var(--border); padding:12px 14px; margin:0;}
.annotation h3{font-size:22px; line-height:.96; letter-spacing:-.055em; text-transform:uppercase; margin:14px 14px 12px; font-weight:400;}
.annotation p{font-size:12px; line-height:1.55; color:var(--fg); margin:0 14px 18px;}
.annotation button{position:absolute; right:14px; top:10px}
.btn{appearance:none; background:transparent; border:0; color:inherit; padding:0; cursor:pointer; font-size:12px;}
.btn:hover{text-decoration:underline}
.modal{position:fixed; inset:0; z-index:300; display:none; place-items:center; padding:18px; background:rgba(0,0,0,.76); backdrop-filter:blur(2px)}
html.mode-invert .modal{background:rgba(255,255,255,.76)}
.modal.show{display:grid}
.term{width:min(640px,calc(100vw - 36px)); border:1px solid var(--border); background:rgba(0,0,0,.78); color:var(--fg); box-shadow:0 24px 90px rgba(0,0,0,.78); backdrop-filter:blur(6px);}
html.mode-invert .term{background:rgba(255,255,255,.88); box-shadow:0 24px 90px rgba(0,0,0,.22)}
.termbar{display:flex; justify-content:space-between; align-items:center; color:var(--fg); font-size:12px; border-bottom:1px solid var(--border); padding:12px 14px;}
.type{font-size:12px; line-height:1.62; color:var(--green); padding:15px 14px 18px; min-height:168px; white-space:pre-wrap;}
.pinsDrawer{position:fixed; right:14px; top:72px; bottom:18px; width:min(360px,calc(100vw - 28px)); z-index:260; transform:translateX(calc(100% + 24px)); transition:transform .34s var(--ease); pointer-events:none;}
.pinsDrawer.show{transform:translateX(0); pointer-events:auto;}
.pinsDrawerWindow{height:100%; border:1px solid var(--border); background:rgba(0,0,0,.88); color:var(--fg); box-shadow:0 24px 90px rgba(0,0,0,.65); backdrop-filter:blur(6px); display:flex; flex-direction:column;}
html.mode-invert .pinsDrawerWindow{background:rgba(255,255,255,.92); box-shadow:0 24px 90px rgba(0,0,0,.22)}
.pinsDrawerHead{display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--border); padding:12px 14px; font-size:12px;}
.pinsDrawerBody{padding:12px; overflow:auto;}
.pinsDrawerIntro{font-size:11px; line-height:1.55; color:var(--green); white-space:pre-wrap; margin-bottom:10px;}
.pinList{display:grid; gap:8px}
.pinLink{appearance:none; border:1px solid var(--border); background:transparent; color:var(--fg); font:12px var(--mono); text-align:left; padding:10px; cursor:pointer;}
.pinLink span{display:block; color:var(--dim); font-size:10px; margin-bottom:4px}
.pinLink:hover,.pinLink.is-active{background:var(--fg); color:var(--bg)}
.pinLink:hover span,.pinLink.is-active span{color:var(--bg)}
.zoomOverlay{position:fixed; inset:0; z-index:250; display:none; place-items:center; padding:28px; background:rgba(0,0,0,.86); backdrop-filter:blur(4px);}
html.mode-invert .zoomOverlay{background:rgba(255,255,255,.86)}
.zoomOverlay.show{display:grid}
.zoomWindow{position:relative; width:min(90vw,1280px); height:min(90vh,900px); display:grid; place-items:center;}
.zoomImageFrame{position:relative; max-width:100%; max-height:100%;}
.zoomImageFrame img{display:block; max-width:100%; max-height:86vh; object-fit:contain; box-shadow:0 24px 90px rgba(0,0,0,.75);}
.zoomCaption{position:absolute; left:0; top:-24px; color:var(--green); font-size:11px; z-index:3;}
.zoomClose{position:absolute; right:0; top:-30px; z-index:3; border:1px solid var(--border); background:var(--bg); color:var(--fg); padding:6px 9px; cursor:pointer; font-size:12px;}
.zoomClose:hover{background:var(--fg); color:var(--bg)}
.zoomPinsLayer{position:absolute; inset:0; pointer-events:none;}
.zoomPinsLayer .pin{pointer-events:auto}

.pinPlacementPanel{position:fixed; right:14px; bottom:18px; z-index:360; width:min(420px,calc(100vw - 28px)); border:1px solid var(--border); background:rgba(0,0,0,.88); color:var(--green); box-shadow:0 24px 90px rgba(0,0,0,.65); backdrop-filter:blur(6px); display:none; font-size:12px; line-height:1.55;}
.pinPlacementPanel.show{display:block;}
html.mode-invert .pinPlacementPanel{background:rgba(255,255,255,.94); box-shadow:0 24px 90px rgba(0,0,0,.18);}
.pinPlacementHead{display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-bottom:1px solid var(--border); color:var(--fg);}
.pinPlacementBody{padding:12px; white-space:pre-wrap; word-break:break-word;}
.pinPlacementBody code{display:block; margin-top:8px; padding:10px; border:1px solid var(--border); color:var(--green); background:rgba(255,255,255,.045); white-space:pre-wrap;}
body.pin-place-mode .zoomImageFrame{cursor:crosshair;}
body.pin-place-mode .zoomImageFrame::after{content:"operator: sample coordinate"; position:absolute; left:10px; bottom:10px; z-index:9; padding:6px 8px; border:1px solid var(--border); background:rgba(0,0,0,.78); color:var(--green); font-size:10px; pointer-events:none;}
html.mode-invert body.pin-place-mode .zoomImageFrame::after{background:rgba(255,255,255,.88);}

.broken{position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:60; color:var(--red); font-size:11px; opacity:0; pointer-events:none;}
.broken.flash{animation:none; opacity:0 !important;}
@keyframes breakText{15%,60%{opacity:.85}100%{opacity:0}}
.vrd-flash{position:fixed; inset:0; z-index:280; background:var(--fg); opacity:0; pointer-events:none; mix-blend-mode:difference}
.vrd-flash.active{animation:vrdFlash .42s steps(2,end)}
@keyframes vrdFlash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
@media (max-width:900px){.spread{width:72vw} .archiveNodeHeader{left:10px; top:10px} .modeMark,.coords,.utilityLink{display:none} .studiesDock{left:10px; bottom:10px; min-width:220px} .pinsDrawer{top:64px} body.zoom-open .utilityLink.is-available{display:block; right:14px; bottom:14px;}}
@media (orientation:portrait) and (max-width:760px){.spread{width:78vw} .toggle{top:auto; right:auto; left:14px; bottom:28px} .pinsDrawer{top:14px; bottom:82px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important; transition:none!important}}


/* v1.26: phone-only mobile study layer. Desktop/tablet archive desk remains unchanged. */
@media (max-width: 640px){
  html,
  body{
    height:auto;
    min-height:100%;
    overflow-x:hidden;
    overflow-y:auto;
    touch-action:auto;
  }

  body{
    padding:0;
    -webkit-text-size-adjust:100%;
  }

  .grid-bg{
    background-size:28px 28px;
    opacity:.62;
  }

  .archiveNodeHeader{
    left:12px;
    top:12px;
    max-width:calc(100vw - 92px);
    font-size:10px;
    line-height:1.45;
    z-index:180;
  }

  .toggle{
    top:10px;
    right:10px;
    padding:7px 8px;
    font-size:10px;
  }

  #desk{
    position:relative;
    inset:auto;
    display:grid;
    gap:26px;
    width:100%;
    min-height:100svh;
    padding:118px 14px 118px;
    overflow:visible;
    touch-action:auto;
  }

  body.desk-pending #desk{
    opacity:0;
    pointer-events:none;
  }

  .spread{
    position:relative !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 auto;
    transform:none !important;
    left:auto !important;
    top:auto !important;
    box-shadow:0 18px 46px rgba(0,0,0,.62);
    cursor:default;
    touch-action:auto;
  }

  .spread.dragging{
    cursor:default;
    box-shadow:0 18px 46px rgba(0,0,0,.62);
    filter:none;
  }

  .spread::before{
    font-size:9px;
    left:6px;
    top:6px;
    padding:5px 6px;
  }

  .spreadZoomBtn{
    width:34px;
    height:34px;
    right:6px;
    top:6px;
    font-size:18px;
    border-color:rgba(0,255,0,.48);
    background:rgba(0,0,0,.82);
    color:var(--green);
  }

  .pin{
    width:30px;
    height:30px;
    font-size:13px;
  }

  @keyframes pinPulse{
    0%{width:10px;height:10px;opacity:.8}
    70%,100%{width:48px;height:48px;opacity:0}
  }

  .studiesDock{
    position:fixed !important;
    left:10px !important;
    right:10px !important;
    bottom:10px !important;
    top:auto !important;
    width:auto !important;
    min-width:0;
    min-height:0;
    height:auto !important;
    max-width:none;
    max-height:48vh;
    z-index:220;
  }

  .studiesDockToggle{
    cursor:pointer;
    min-height:30px;
  }

  .studiesDockMenu{
    grid-template-columns:1fr 1fr;
    gap:6px;
    padding:8px;
    max-height:calc(48vh - 30px);
  }

  .studiesDockItem{
    font-size:12px;
    padding:8px 8px 8px 18px;
  }

  .studiesDockResponse,
  .studiesBootBanner{
    grid-column:1 / -1;
    font-size:10px;
  }

  .studiesDockResizeGrip{
    display:none;
  }

  .modeMark,
  .coords{
    display:none;
  }

  .utilityLink{
    right:14px;
    bottom:68px;
    z-index:700;
    font-size:10px;
    background:rgba(0,0,0,.72);
    border:1px solid rgba(0,255,0,.18);
    padding:5px 6px;
  }

  html.mode-invert .utilityLink{
    background:rgba(255,255,255,.82);
  }

  .annotation{
    left:10px;
    right:10px;
    bottom:10px;
    top:auto;
    width:auto;
    transform:none;
    max-height:56vh;
    overflow:auto;
    z-index:900;
  }

  .annotation h3{
    font-size:18px;
  }

  .annotation p{
    font-size:12px;
  }

  .modal{
    align-items:flex-end;
    padding:10px;
  }

  .term{
    width:100%;
    max-height:78vh;
  }

  .pinsDrawer{
    inset:0;
    padding:0;
    z-index:860;
    justify-content:stretch;
    align-items:stretch;
  }

  .pinsDrawerWindow{
    width:100%;
    max-width:none;
    height:100dvh;
    margin:0;
    border-left:0;
    border-right:0;
  }

  .pinsDrawerBody{
    max-height:calc(100dvh - 42px);
    overflow:auto;
    padding-bottom:104px;
  }

  .pinLink{
    font-size:12px;
    padding:10px 8px;
  }

  .zoomOverlay{
    padding:8px;
    z-index:650;
  }

  .zoomWindow{
    width:100%;
    height:calc(100dvh - 16px);
    padding:42px 8px 10px;
    display:flex;
    flex-direction:column;
  }

  .zoomCaption{
    left:10px;
    top:12px;
    font-size:10px;
  }

  .zoomClose{
    right:10px;
    top:10px;
    font-size:11px;
  }

  .zoomImageFrame{
    width:100%;
    height:100%;
    display:grid;
    place-items:center;
  }

  .zoomImageFrame img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
  }

  .pinPlacementPanel{
    left:10px;
    right:10px;
    bottom:10px;
    width:auto;
    max-height:46vh;
    z-index:980;
  }
}



/* v1.27: mobile web-app interaction layer. Desktop/tablet stays as archive desk. */
@media (max-width: 640px){
  html,
  body{
    width:100%;
    height:100%;
    overflow:hidden !important;
    overscroll-behavior:none;
    touch-action:pan-x pan-y;
  }

  body{
    position:fixed;
    inset:0;
  }

  .archiveNodeHeader{
    top:48px;
    left:12px;
    right:12px;
    max-width:none;
    z-index:170;
    font-size:9px;
    line-height:1.42;
    pointer-events:none;
  }

  .toggle{
    display:none;
    top:auto !important;
    bottom:14px !important;
    left:14px !important;
    right:auto !important;
    z-index:2147483647;
  }

  body.studies-open .toggle{
    display:inline-flex;
  }

  /* Mobile top-bar copied from the main VRD menu logic: closed = bar, open = full-screen app menu. */
  .studiesDock{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    bottom:auto !important;
    width:100% !important;
    height:auto !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:none !important;
    max-height:none !important;
    margin:0 !important;
    border-left:0 !important;
    border-right:0 !important;
    border-top:0 !important;
    box-shadow:none !important;
    z-index:2147483646;
    overflow:hidden !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }

  .studiesDockToggle{
    min-height:34px;
    padding:8px 10px;
    cursor:pointer !important;
    border-left:0 !important;
    border-right:0 !important;
    border-top:0 !important;
  }

  .studiesDockToggle::after{
    content:"[open]";
    margin-left:auto;
    font-size:10px;
    opacity:.72;
  }

  .studiesDock.is-open .studiesDockToggle::after{
    content:"[close]";
    opacity:1;
  }

  .studiesStatus{
    display:none !important;
  }

  .studiesDockMenu{
    display:none !important;
  }

  .studiesDock.is-open{
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    border:0 !important;
    box-shadow:none !important;
  }

  .studiesDock.is-open .studiesDockMenu{
    display:grid !important;
    grid-template-columns:1fr;
    align-content:start;
    gap:8px;
    height:calc(100dvh - 34px);
    min-height:calc(100dvh - 34px);
    max-height:none !important;
    padding:12px 12px 86px;
    overflow:hidden !important;
  }

  .studiesDock.is-open .studiesDockItem{
    font-size:15px;
    line-height:1.35;
    padding:10px 10px 10px 20px;
  }

  .studiesDock.is-open .studiesDockResponse,
  .studiesDock.is-open .studiesBootBanner{
    font-size:11px;
  }

  .studiesDockResizeGrip{
    display:none !important;
  }

  body.studies-open #desk,
  body.studies-open .archiveNodeHeader,
  body.studies-open .modeMark,
  body.studies-open .coords{
    opacity:0;
    pointer-events:none;
  }

  /* Horizontal study viewer */
  #desk{
    position:fixed !important;
    inset:0 !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:18px !important;
    width:100vw !important;
    height:100dvh !important;
    padding:112px 18px 40px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    touch-action:pan-x !important;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:18px;
    -webkit-overflow-scrolling:touch;
  }

  #desk::before,
  #desk::after{
    content:"";
    flex:0 0 1px;
  }

  #desk::-webkit-scrollbar{
    height:0;
  }

  .spread{
    position:relative !important;
    flex:0 0 min(86vw, 520px) !important;
    width:min(86vw, 520px) !important;
    max-width:min(86vw, 520px) !important;
    margin:0 !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;
    scroll-snap-align:center;
    scroll-snap-stop:always;
    cursor:default;
    box-shadow:0 18px 52px rgba(0,0,0,.62);
  }

  body.desk-pending #desk{
    opacity:0;
    pointer-events:none;
  }

  .spread img{
    width:100%;
    height:auto;
  }

  .spread::before{
    font-size:9px;
    left:6px;
    top:6px;
    padding:5px 6px;
  }

  .spreadZoomBtn{
    width:36px;
    height:36px;
    right:6px;
    top:6px;
    font-size:18px;
    border-color:rgba(0,255,0,.52);
    background:rgba(0,0,0,.84);
    color:var(--green);
  }

  .pin{
    width:30px;
    height:30px;
    font-size:13px;
  }

  @keyframes pinPulse{
    0%{width:10px;height:10px;opacity:.8}
    70%,100%{width:48px;height:48px;opacity:0}
  }

  .modeMark{
    display:block;
    right:12px;
    bottom:22px;
    font-size:9px;
    z-index:70;
  }

  .coords{
    display:none;
  }

  .utilityLink{
    right:14px;
    bottom:14px;
    z-index:700;
    font-size:10px;
    background:rgba(0,0,0,.72);
    border:1px solid rgba(0,255,0,.18);
    padding:5px 6px;
  }

  html.mode-invert .utilityLink{
    background:rgba(255,255,255,.82);
  }

  .annotation{
    left:10px;
    right:10px;
    bottom:10px;
    top:auto;
    width:auto;
    transform:none;
    max-height:56vh;
    overflow:auto;
    z-index:900;
  }

  .annotation h3{
    font-size:18px;
  }

  .annotation p{
    font-size:12px;
  }

  .modal{
    align-items:flex-end;
    padding:10px;
  }

  .term{
    width:100%;
    max-height:78vh;
  }

  .pinsDrawer{
    inset:34px 0 0 0 !important;
    width:100vw !important;
    height:calc(100dvh - 34px) !important;
    padding:0;
    z-index:860;
    justify-content:stretch;
    align-items:stretch;
  }

  .pinsDrawerWindow{
    height:100%;
    border-left:0;
    border-right:0;
    border-bottom:0;
  }

  .pinsDrawerBody{
    padding-bottom:90px;
  }

  .zoomOverlay{
    z-index:880;
    padding:44px 10px 18px;
  }

  .zoomWindow{
    width:100%;
    height:100%;
  }

  .zoomImageFrame img{
    max-height:calc(100dvh - 100px);
  }

  .zoomCaption{
    top:-28px;
    left:0;
    font-size:10px;
  }

  .zoomClose{
    top:-34px;
    right:0;
  }

  .pinPlacementPanel{
    left:10px;
    right:10px;
    bottom:10px;
    width:auto;
    z-index:920;
  }
}

@media (max-width: 640px) and (orientation: landscape){
  #desk{
    padding:54px 18px 26px !important;
  }
  .archiveNodeHeader{
    display:none;
  }
  .spread{
    flex-basis:min(70vw, 520px) !important;
    width:min(70vw, 520px) !important;
    max-width:min(70vw, 520px) !important;
  }
}




/* v1.29: mobile-only app submenus + remove zoom affordance on phones */

/* v1.30: mobile cleanup - remove desktop layout controls from mobile menu and left-align bottom system text */
@media (max-width: 640px){
  /* On phone the spreads are already large enough, so the zoom affordance is hidden. */
  .spreadZoomBtn{
    display:none !important;
  }

  /* App-style menu layers: selecting help or pins replaces the menu list with a subview. */
  .studiesDock.is-open.mobile-subview .studiesDockItem,
  .studiesDock.is-open.mobile-subview .studiesBootBanner{
    display:none !important;
  }

  .studiesDock.is-open.mobile-subview .studiesDockResponse{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    border-top:0 !important;
    box-shadow:none !important;
    overflow:auto !important;
    height:100%;
    color:#000 !important;
  }

  .mobileSubView{
    display:grid;
    gap:10px;
    align-content:start;
    min-height:calc(100dvh - 54px);
    padding:0 0 86px 0;
    color:#000;
    white-space:normal;
  }

  .mobileSubHead{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:0 0 10px 0;
    border-bottom:1px solid #808080;
    box-shadow:inset 0 -1px 0 #dfdfdf;
    font-size:12px;
    line-height:1.35;
  }

  .mobileBackBtn{
    appearance:none;
    -webkit-appearance:none;
    color:#000 !important;
    background:#c0c0c0;
    border:2px solid #c0c0c0;
    box-shadow:inset -1px -1px 0 #808080,inset 1px 1px 0 #fff;
    font:inherit;
    font-size:13px;
    padding:8px 10px 8px 18px;
    position:relative;
    text-align:left;
    cursor:pointer;
  }

  html.mode-invert .mobileBackBtn{
    background:#e6e6e6;
    border-color:#e6e6e6;
  }

  .mobileBackBtn::before{
    content:"<";
    position:absolute;
    left:6px;
    top:50%;
    transform:translateY(-50%);
    color:#000;
    opacity:.8;
  }

  .mobileBackBtn:active{
    box-shadow:inset 1px 1px 0 #808080,inset -1px -1px 0 #fff;
    transform:translateY(1px);
  }

  .mobileSubCopy{
    font-size:12px;
    line-height:1.55;
    white-space:pre-wrap;
    margin:0;
  }
}

/* v1.28: mobile-only menu refinements */
@media (max-width: 640px){
  .archiveNodeHeader{
    top:auto !important;
    bottom:50px !important;
    left:12px !important;
    right:12px !important;
    max-width:none !important;
    z-index:70 !important;
    font-size:9px !important;
    line-height:1.42 !important;
  }

  body.studies-open .archiveNodeHeader{
    opacity:0;
    pointer-events:none;
  }

  #desk{
    padding-top:62px !important;
    padding-bottom:104px !important;
  }

  .toggle{
    top:auto !important;
    bottom:28px !important;
    left:14px !important;
    right:auto !important;
    display:none;
    background:#3a3a3a !important;
    color:#fff !important;
    border:1px solid #000 !important;
    font-size:12px !important;
    padding:8px 10px !important;
  }

  html.mode-invert .toggle{
    background:#bcbcbc !important;
    color:#000 !important;
    border:1px solid #808080 !important;
  }

  body.studies-open .toggle{
    display:inline-flex !important;
  }

  .studiesDock.is-open .studiesDockMenu{
    overflow:auto !important;
    -webkit-overflow-scrolling:touch;
  }

  .studiesDock.is-open .studiesDockResponse{
    display:block;
    margin-top:10px;
    padding-top:10px;
    border-top:1px solid #808080;
    box-shadow:inset 0 1px 0 #dfdfdf;
    color:#000 !important;
  }

  .mobileMenuPanel{
    display:grid;
    gap:8px;
    color:#000;
    font-size:12px;
    line-height:1.45;
    white-space:normal;
  }

  .mobileMenuPanel pre{
    margin:0 0 4px 0;
    white-space:pre-wrap;
    color:#000;
    font:inherit;
  }

  .mobileMenuPanel .mobileMenuLink{
    appearance:none;
    -webkit-appearance:none;
    display:block;
    width:100%;
    text-align:left;
    color:#000 !important;
    background:#c0c0c0;
    border:2px solid #c0c0c0;
    box-shadow:inset -1px -1px 0 #808080,inset 1px 1px 0 #fff;
    padding:8px 10px 8px 18px;
    position:relative;
    font:inherit;
    font-size:13px;
    cursor:pointer;
  }

  html.mode-invert .mobileMenuPanel .mobileMenuLink{
    background:#e6e6e6;
    border-color:#e6e6e6;
  }

  .mobileMenuPanel .mobileMenuLink::before{
    content:">";
    position:absolute;
    left:6px;
    top:50%;
    transform:translateY(-50%);
    color:#000;
    opacity:.8;
  }

  .mobileMenuPanel .mobileMenuLink span{
    display:block;
    font-size:10px;
    opacity:.62;
    margin-bottom:3px;
  }

  .mobileMenuPanel .mobileMenuLink:active{
    box-shadow:inset 1px 1px 0 #808080,inset -1px -1px 0 #fff;
    transform:translateY(1px);
  }

  .modal#helpModal,
  .pinsDrawer{
    display:none !important;
  }
}

@media (max-width: 640px) and (orientation: landscape){
  .archiveNodeHeader{
    display:block !important;
    bottom:18px !important;
    left:12px !important;
    right:12px !important;
  }
  #desk{
    padding-top:54px !important;
    padding-bottom:62px !important;
  }
}


@media (max-width: 640px){
  /* v1.30: grid/scatter do not apply to mobile web-app viewer */
  #align,
  #scatter{
    display:none !important;
  }

  /* v1.30: bottom system output sits as a left-aligned stack */
  .archiveNodeHeader{
    left:12px !important;
    right:auto !important;
    bottom:38px !important;
    width:min(78vw, 420px) !important;
    text-align:left !important;
    justify-content:flex-start !important;
    align-items:flex-start !important;
  }

  .modeMark{
    left:12px !important;
    right:auto !important;
    bottom:14px !important;
    width:min(78vw, 420px) !important;
    text-align:left !important;
    justify-content:flex-start !important;
    align-items:flex-start !important;
  }
}



/* v1.32: mobile-only invert, app-menu lock, and wordless swipe cue refinements */
@media (max-width: 640px){
  html.mode-invert,
  html.mode-invert body{
    background:#ffffff !important;
  }

  html.mode-invert .archiveNodeHeader,
  html.mode-invert .modeMark,
  html.mode-invert .mobileSwipeCue{
    color:#000000 !important;
  }

  html.mode-invert .mobileSwipeRail{
    border-color:rgba(0,0,0,.34) !important;
  }

  html.mode-invert .mobileSwipeRail i{
    background:#000000 !important;
  }

  .mobileSwipeCue{
    position:fixed;
    left:50%;
    bottom:112px;
    transform:translateX(-50%);
    z-index:72;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--green);
    pointer-events:none;
    opacity:.82;
  }

  body.studies-open .mobileSwipeCue,
  body.desk-pending .mobileSwipeCue{
    opacity:0;
  }

  .mobileSwipeRail{
    position:relative;
    width:86px;
    height:22px;
    border:1px solid rgba(0,255,0,.48);
    overflow:hidden;
  }

  .mobileSwipeRail::before,
  .mobileSwipeRail::after{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    font-size:12px;
    line-height:1;
    color:currentColor;
    opacity:.82;
  }

  .mobileSwipeRail::before{ content:"<"; left:7px; }
  .mobileSwipeRail::after{ content:">"; right:7px; }

  .mobileSwipeRail i{
    position:absolute;
    top:50%;
    left:50%;
    width:6px;
    height:6px;
    margin:-3px 0 0 -3px;
    border-radius:999px;
    background:var(--green);
    animation:mobileSwipeDot 1.8s ease-in-out infinite;
  }

  @keyframes mobileSwipeDot{
    0%,100%{ transform:translateX(-24px); opacity:.38; }
    50%{ transform:translateX(24px); opacity:1; }
  }

  .studiesDock.is-open.help-subview .studiesDockMenu,
  .studiesDock.is-open.help-subview .studiesDockResponse{
    overflow:hidden !important;
  }

  .studiesDock.is-open.help-subview .mobileSubView{
    min-height:0 !important;
    height:100% !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  .studiesDock.is-open.help-subview .mobileSubCopy{
    overflow:hidden !important;
  }

  .studiesDock.is-open.pins-subview .studiesDockMenu,
  .studiesDock.is-open.pins-subview .studiesDockResponse{
    overflow:auto !important;
    -webkit-overflow-scrolling:touch;
  }
}

@media (min-width: 641px){
  .mobileSwipeCue{ display:none !important; }
}



/* v1.33: mobile landscape clean-view mode. Desktop/tablet and phone portrait stay unchanged. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px){
  html,
  body{
    width:100%;
    height:100%;
    overflow:hidden !important;
    background:var(--bg) !important;
  }

  body{
    position:fixed;
    inset:0;
  }

  /* Strip interface chrome in landscape phone mode */
  .studiesDock,
  .toggle,
  .archiveNodeHeader,
  .modeMark,
  .coords,
  .utilityLink,
  .pinsDrawer,
  .modal,
  .zoomOverlay,
  .pinPlacementPanel,
  .broken{
    display:none !important;
  }

  body.studies-open #desk,
  body.desk-pending #desk{
    opacity:1 !important;
    pointer-events:auto !important;
  }

  .grid-bg,
  .scan{
    opacity:0 !important;
  }

  /* Full-screen horizontal spread reader */
  #desk{
    position:fixed !important;
    inset:0 !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:18px !important;
    width:100vw !important;
    height:100dvh !important;
    padding:10px 24px 48px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:24px;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x !important;
  }

  #desk::before,
  #desk::after{
    content:"";
    flex:0 0 1px;
  }

  #desk::-webkit-scrollbar{
    width:0;
    height:0;
  }

  .spread{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;
    flex:0 0 auto !important;
    width:auto !important;
    max-width:calc(100vw - 56px) !important;
    height:calc(100dvh - 74px) !important;
    margin:0 !important;
    scroll-snap-align:center;
    scroll-snap-stop:always;
    cursor:default !important;
    box-shadow:0 18px 58px rgba(0,0,0,.72);
    border:1px solid rgba(255,255,255,.22);
    background:transparent;
  }

  html.mode-invert .spread{
    border-color:rgba(0,0,0,.18);
    box-shadow:0 18px 58px rgba(0,0,0,.20);
  }

  .spread img{
    display:block;
    width:auto !important;
    height:100% !important;
    max-width:calc(100vw - 56px) !important;
    max-height:calc(100dvh - 74px) !important;
    object-fit:contain !important;
  }

  .spread::before,
  .spread::after,
  .spreadZoomBtn{
    display:none !important;
  }

  /* Keep only pins as active interface */
  .pin{
    width:26px;
    height:26px;
    font-size:12px;
    z-index:12;
  }

  .pin::after{
    border-color:var(--green);
  }

  /* Pin note remains visible and app-like */
  .annotation{
    display:none;
    position:fixed;
    left:50%;
    bottom:16px;
    top:auto;
    right:auto;
    width:min(420px, calc(100vw - 32px));
    max-height:calc(100dvh - 32px);
    transform:translateX(-50%);
    overflow:auto;
    z-index:900;
    background:rgba(0,0,0,.92);
    border:1px solid var(--border);
    box-shadow:0 18px 70px rgba(0,0,0,.72);
  }

  .annotation.show{
    display:block !important;
  }

  html.mode-invert .annotation{
    background:rgba(255,255,255,.96);
    box-shadow:0 18px 70px rgba(0,0,0,.20);
  }

  .annotation .k{
    padding:9px 10px;
    font-size:10px;
  }

  .annotation h3{
    margin:10px 10px 8px;
    font-size:15px;
    letter-spacing:-.04em;
  }

  .annotation p{
    margin:0 10px 12px;
    font-size:11px;
    line-height:1.48;
  }

  .annotation button{
    right:10px;
    top:8px;
  }

  /* Landscape cue: visual only, no wording. Kept above the spread layer. */
  .mobileSwipeCue{
    display:flex !important;
    position:fixed;
    left:50%;
    bottom:18px;
    transform:translateX(-50%);
    z-index:5000;
    opacity:.86;
    pointer-events:none;
    color:var(--green);
    align-items:center;
    justify-content:center;
  }

  body.studies-open .mobileSwipeCue,
  body.desk-pending .mobileSwipeCue{
    opacity:.86 !important;
  }

  .mobileSwipeRail{
    position:relative;
    display:block;
    width:108px;
    height:24px;
    border:1px solid rgba(0,255,0,.62);
    overflow:hidden;
    background:rgba(0,0,0,.18);
  }

  .mobileSwipeRail::before,
  .mobileSwipeRail::after{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    font-size:12px;
    line-height:1;
    color:currentColor;
    opacity:.9;
  }

  .mobileSwipeRail::before{ content:"<"; left:8px; }
  .mobileSwipeRail::after{ content:">"; right:8px; }

  .mobileSwipeRail i{
    position:absolute;
    top:50%;
    left:50%;
    width:6px;
    height:6px;
    margin:-3px 0 0 -3px;
    border-radius:999px;
    background:var(--green);
    animation:mobileSwipeDot 1.8s ease-in-out infinite;
  }

  @keyframes mobileSwipeDot{
    0%,100%{ transform:translateX(-30px); opacity:.38; }
    50%{ transform:translateX(30px); opacity:1; }
  }

  html.mode-invert .mobileSwipeRail{
    border-color:rgba(0,0,0,.48) !important;
    background:rgba(255,255,255,.24);
  }

  html.mode-invert .mobileSwipeRail i{
    background:#000 !important;
  }
}


/* v1.37: landscape phone pin notes glide in as a left-side study panel.
   Desktop/tablet and portrait mobile keep the existing annotation behaviour. */
@media (max-width: 900px) and (orientation: landscape){
  .annotation{
    display:block !important;
    left:0 !important;
    top:0 !important;
    bottom:0 !important;
    right:auto !important;
    width:40vw !important;
    min-width:280px !important;
    max-width:430px !important;
    height:100dvh !important;
    max-height:none !important;
    transform:translateX(-104%) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    overflow:auto !important;
    background:rgba(0,0,0,.94) !important;
    border:0 !important;
    border-right:1px solid var(--border) !important;
    box-shadow:18px 0 70px rgba(0,0,0,.66) !important;
    backdrop-filter:blur(6px);
    padding:0 !important;
    transition:
      transform 260ms cubic-bezier(.2,.8,.2,1),
      opacity 180ms ease,
      visibility 0s linear 260ms !important;
    will-change:transform, opacity;
  }

  .annotation.show{
    transform:translateX(0) !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transition:
      transform 300ms cubic-bezier(.16,1,.3,1),
      opacity 200ms ease,
      visibility 0s linear 0s !important;
  }

  html.mode-invert .annotation{
    background:#fff !important;
    box-shadow:18px 0 70px rgba(0,0,0,.18) !important;
  }

  .annotation .k{
    padding:14px 16px 12px !important;
    border-bottom:1px solid var(--border);
    font-size:10px !important;
    line-height:1.45;
    color:var(--green) !important;
    padding-right:72px !important;
  }

  html.mode-invert .annotation .k{
    color:#000 !important;
  }

  .annotation h3{
    margin:18px 16px 12px !important;
    font-size:clamp(17px, 3.2vw, 28px) !important;
    line-height:.96 !important;
    letter-spacing:-.055em !important;
    max-width:92%;
  }

  .annotation p{
    margin:0 16px 20px !important;
    font-size:12px !important;
    line-height:1.58 !important;
    max-width:92%;
  }

  .annotation button{
    position:absolute !important;
    right:12px !important;
    top:10px !important;
    z-index:2;
  }

  body.pin-note-open .mobileSwipeCue{
    opacity:0 !important;
  }
}


@media (max-width: 900px) and (orientation: landscape) and (prefers-reduced-motion: reduce){
  .annotation,
  .annotation.show{
    transition:none !important;
  }
}



/* v1.39: desktop invert follows global invert, so archive node text becomes black. */
/* v1.40: desktop/tablet invert must turn archive node output black.
   Placed last so it overrides the base VRD green and header signal animation. */
html.mode-invert .archiveNodeHeader,
html.mode-invert .archiveNodeHeader *,
html.mode-invert .archiveNodeHeader.signal-break,
html.mode-invert .archiveNodeHeader.signal-break *{
  color:#000000 !important;
}

html.mode-invert .archiveNodeHeader.signal-break{
  animation:headerBreakInvert .56s steps(2,end);
}

@keyframes headerBreakInvert{
  0%,100%{color:#000000; transform:none}
  25%{color:#000000; transform:translate(2px,-1px)}
  55%{color:#000000; transform:translate(-2px,1px)}
}



/* Pins global switch: when body.pins-disabled is present, all pin UI is removed across devices. */
body.pins-disabled .pin,
body.pins-disabled #pinsBtn,
body.pins-disabled #placePinsUtility,
body.pins-disabled .pinsDrawer,
body.pins-disabled #pinPlacementPanel{
  display:none !important;
}