/* Original black surfaces and white typography. The accents are the globe's own colors. */
body[data-motion]{--fx-green:#67ba94;--fx-purple:#9d72c7;--fx-x:0;--fx-y:0;--fx-energy:1}
.fx-layer{position:absolute;inset:0;width:100%;height:100%;z-index:9;pointer-events:none}
.book-frame{isolation:isolate}
.fx-fold-sculpture{display:none}
body[data-motion] :is(button,a):focus-visible{outline-color:var(--fx-green)}
body[data-motion] .brand{transition:filter .3s}
body[data-motion] .brand:hover{filter:drop-shadow(-2px 0 5px #67ba9440) drop-shadow(2px 0 5px #9d72c740)}
body[data-motion] .site-header{position:relative}
body[data-motion] #chapter-number{position:relative;isolation:isolate}
body[data-motion] .manuscript-nav-item{position:relative;isolation:isolate;transition:color .3s,background .3s,box-shadow .3s}
body[data-motion] .manuscript-nav-item .eyebrow{position:relative}
body[data-motion] .margin-note{position:relative;text-align:left}
body[data-motion] .volume-tabs button{position:relative}
body[data-motion] .book-progress button{transition:transform .35s}
body[data-motion] .book-progress button[aria-current=page]::before{background:linear-gradient(90deg,#67ba94,#e7e7e7 50%,#9d72c7)}
body[data-motion] .book-page-controls button{position:relative;transition:transform .3s,background .3s,box-shadow .3s}
body[data-motion] .book-page-controls button:hover:not(:disabled){background:#171717;color:#eee;border-color:var(--fx-green)}
body[data-motion] .text-button:hover>span:last-child{color:var(--fx-green)}
body[data-motion] ::selection{background:#67488b;color:#fff}
/* Index stays in the same black reading room. */
body[data-motion] .index-dialog{background:#101010;color:#e8e8e8;border-left:1px solid #383838}
body[data-motion] .index-dialog::backdrop{background:#000a;backdrop-filter:blur(7px)}
body[data-motion] .index-result{border-color:#343434;transition:background .3s,transform .4s}
body[data-motion] .index-result:hover{background:#181818}
body[data-motion] .index-result-detail{color:#999}
body[data-motion] .search-wrap{border-color:#444;position:relative}
body[data-motion] .search-wrap input{color:#eee}
body[data-motion] .search-wrap kbd{color:#aaa;border-color:#555}
body[data-motion] .search-wrap:focus-within{border-color:var(--fx-green)}
body[data-motion] .index-filters button{border-color:#555;color:#bbb;position:relative}
body[data-motion] .index-filters button[aria-pressed=true]{color:#eee;background:#222;border-color:#999}
body[data-motion] .icon-button{color:#eee;border-color:#666}
body[data-motion] .index-top>.eyebrow{color:#aaa}
body[data-motion] .book-main,body[data-motion] .sidebar-heading{position:relative}
body[data-fx-turning=true][data-motion=collapse] :is(.book-main,.observatory-copy,.sidebar-heading,.volume-tabs,#book-chapters,.book-notes,.book-footer-line),
body[data-fx-turning=true][data-motion=liquid] :is(.book-main,.observatory-copy,.sidebar-heading,.volume-tabs,#book-chapters,.book-notes,.book-footer-line){opacity:0!important}
body[data-fx-turning=true][data-motion=fold] :is(.book-main,.observatory-copy){opacity:0!important}
/* Native text crossfades on the compositor; Liquid only crossfades its headings. */
body[data-motion] .fx-fade-shell{position:fixed;inset:0;width:100%;height:100%;min-height:0;display:block;padding:0;background:transparent;visibility:visible;overflow:hidden;pointer-events:none;z-index:8}
.fx-fade-shell>*{will-change:opacity,transform}

/* 01. Observer Collapse — matter assembles into a readable page. */
body[data-motion=collapse] .site-header::after{content:'';position:absolute;bottom:-1px;left:0;width:9px;height:2px;background:var(--fx-green);box-shadow:18px 0 #67ba9440,33px 0 #67ba9420,-14px 0 #9d72c750;animation:collapse-runner 12s linear infinite;pointer-events:none}
body[data-motion=collapse] #chapter-number::before{content:'';position:absolute;inset:-6px -9px;z-index:-1;border:1px solid #393939;background:linear-gradient(90deg,#67ba9412,transparent 50%,#9d72c712);clip-path:polygon(0 0,91% 0,100% 25%,100% 100%,9% 100%,0 75%)}
body[data-motion=collapse] #chapter-number::after{content:'';position:absolute;left:-9px;bottom:-7px;width:4px;height:3px;background:var(--fx-green);box-shadow:9px 0 #67ba9460,18px 0 #67ba9430;animation:collapse-bits 3.8s steps(6,end) infinite}
body[data-motion=collapse] .volume-tabs button[aria-pressed=true]{background:#202020;color:#eee;border-color:#777;box-shadow:inset 0 -1px var(--fx-green)}
body[data-motion=collapse] .volume-tabs button::after{content:'';position:absolute;bottom:0;left:0;width:3px;height:3px;background:var(--fx-purple);opacity:0;transition:opacity .2s}
body[data-motion=collapse] .volume-tabs button:hover::after{opacity:1;animation:collapse-tab 1.1s steps(8,end) infinite}
body[data-motion=collapse] .manuscript-nav-item.is-current{background:#242424;box-shadow:inset 2px 0 #67ba94}
body[data-motion=collapse] .manuscript-nav-item.is-current>.eyebrow::before{content:'';position:absolute;inset:-6px -4px;border:1px solid #565656;background:repeating-linear-gradient(0deg,transparent 0 4px,#67ba9410 4px 5px);animation:collapse-sample 4.5s linear infinite}
body[data-motion=collapse] .manuscript-nav-item:hover{background:#292929;box-shadow:inset -2px 0 var(--fx-purple)}
body[data-motion=collapse] .manuscript-nav-item>span:last-child{transition:transform .4s,color .4s}
body[data-motion=collapse] .manuscript-nav-item:hover>span:last-child{transform:translate(3px,-3px);color:var(--fx-green)}
body[data-motion=collapse] .manuscript-rule{position:relative}
body[data-motion=collapse] .manuscript-rule::after{content:'';position:absolute;top:-1px;height:2px;width:3px;left:0;background:#eee;box-shadow:-8px 0 #67ba94,-16px 0 #67ba9450,8px 0 #9d72c7;animation:collapse-runner 8s linear infinite;pointer-events:none}
body[data-motion=collapse] .margin-note::after{content:'';position:absolute;left:0;top:-1px;height:2px;width:2px;box-shadow:0 0 #67ba94,5px 0 #67ba94,10px 0 #9d72c7;animation:collapse-runner 9s linear infinite}
body[data-motion=collapse] .margin-note:hover .note-number{animation:collapse-registration .65s ease-out}
body[data-motion=collapse] .book-progress button[aria-current=page]::after{content:'';position:absolute;top:0;width:4px;height:3px;background:#fff;box-shadow:-6px 0 var(--fx-green),6px 0 var(--fx-purple);animation:collapse-runner 3s linear infinite}
body[data-motion=collapse] .book-page-controls button:not(:disabled)::before{content:'';position:absolute;inset:-5px;border:1px dashed #67ba9438;border-radius:50%;animation:collapse-orbit 18s steps(60,end) infinite}
body[data-motion=collapse] .book-page-controls button:active{transform:scale(.88)}
body[data-motion=collapse] #book-page-number{animation:collapse-readout 7s linear infinite}
body[data-motion=collapse] .index-result:hover>.eyebrow{animation:collapse-registration .65s ease-out}
body[data-motion=collapse] .index-filters button[aria-pressed=true]::after{content:'';position:absolute;bottom:0;left:0;height:2px;width:100%;background:repeating-linear-gradient(90deg,#67ba94 0 3px,transparent 3px 6px);animation:collapse-sample 3s linear infinite}
@keyframes collapse-runner{0%{left:0;opacity:0}8%,90%{opacity:.9}100%{left:98%;opacity:0}}
@keyframes collapse-bits{0%,100%{transform:translateX(0);opacity:.2}55%{transform:translateX(48px);opacity:.8}}
@keyframes collapse-tab{to{left:calc(100% - 3px)}}
@keyframes collapse-sample{to{background-position:0 20px}}
@keyframes collapse-registration{0%{transform:translateX(-5px);text-shadow:5px 0 #67ba94,-5px 0 #9d72c7;opacity:.4}40%{transform:translateX(2px);text-shadow:-2px 0 #67ba94,2px 0 #9d72c7}100%{transform:none;text-shadow:none;opacity:1}}
@keyframes collapse-readout{0%,85%,100%{text-shadow:none}90%{text-shadow:1px 0 #67ba94,-1px 0 #9d72c7}}
@keyframes collapse-orbit{to{transform:rotate(360deg)}}

/* 02. Impossible Folio — physical planes, hinges and a three-dimensional type surface. */
body[data-motion=fold] .book-reader{perspective:1500px}
body[data-motion=fold] .sidebar-heading{isolation:isolate;min-height:94px}
body[data-motion=fold] .fx-fold-sculpture{display:block;position:absolute;width:188px;height:108px;left:-18px;top:-5px;z-index:-1;perspective:800px;transform-style:preserve-3d;pointer-events:none}
.fx-fold-sculpture>i{position:absolute;width:33px;height:89px;top:9px;left:calc(var(--face) * 25px);background:#111;border:1px solid #484848;border-left-color:#67ba9488;border-right-color:#9d72c788;transform-origin:left center;transform-style:preserve-3d;animation:fold-faces 9s ease-in-out infinite;animation-delay:calc(var(--face) * -.29s);box-shadow:5px 8px 14px #0006}
body[data-motion=fold] .volume-tabs{perspective:800px;transform-style:preserve-3d}
body[data-motion=fold] .volume-tabs button{transform:rotateX(calc(var(--fx-y) * -8deg)) rotateY(calc(var(--fx-x) * 7deg));transition:transform .35s,box-shadow .35s;background:#161616;box-shadow:3px 4px 0 #080808,4px 5px 0 #3c3c3c}
body[data-motion=fold] .volume-tabs button[aria-pressed=true]{background:#232323;color:#eee;border-color:#888;box-shadow:3px 4px 0 #080808,4px 5px 0 #67ba9470}
body[data-motion=fold] .volume-tabs button:hover{transform:translateY(-4px) rotateX(-12deg) rotateY(10deg);box-shadow:6px 8px 0 #080808,7px 9px 0 #9d72c777}
body[data-motion=fold] #chapter-number::before{content:'';position:absolute;inset:-6px -9px;z-index:-1;background:#181818;border:1px solid #575757;box-shadow:3px 3px 0 #080808,4px 4px 0 #67ba9450;transform:perspective(350px) rotateY(calc(var(--fx-x) * 14deg)) rotateX(calc(var(--fx-y) * -10deg));transition:transform .3s}
body[data-motion=fold] #chapter-date{display:inline-block;transform:perspective(600px) rotateY(calc(var(--fx-x) * -3deg));transform-origin:right center}
body[data-motion=fold] .manuscript-nav-item{transform-origin:left center;transition:transform .55s,box-shadow .55s,background .3s}
body[data-motion=fold] .manuscript-nav-item.is-current{background:#232323;box-shadow:inset 1px 0 #67ba94,4px 3px 0 #080808}
body[data-motion=fold] .manuscript-nav-item:hover{transform:perspective(750px) translateZ(16px) rotateY(-5deg);background:#262626;box-shadow:5px 5px 0 #080808,6px 6px 0 #9d72c744}
body[data-motion=fold] .manuscript-rule{position:relative;transform:perspective(900px) rotateX(calc(var(--fx-y) * 3deg));transform-style:preserve-3d}
body[data-motion=fold] .manuscript-rule::before{content:'';position:absolute;left:0;right:0;bottom:-4px;height:3px;background:linear-gradient(90deg,#67ba9430,#151515 15%,#151515 85%,#9d72c730);transform:rotateX(45deg);transform-origin:top}
body[data-motion=fold] .margin-note{background:#121212;transform-origin:left center;box-shadow:3px 4px 0 #080808;animation:fold-notes 11s ease-in-out infinite;transition:box-shadow .4s}
body[data-motion=fold] .margin-note:hover{box-shadow:6px 8px 0 #080808,7px 9px 0 #67ba9444}
body[data-motion=fold] .note-number{display:inline-block;transform:perspective(300px) rotateY(calc(var(--fx-x) * 16deg));transform-origin:left center}
body[data-motion=fold] .book-page-controls{perspective:600px}
body[data-motion=fold] .book-page-controls button{border-radius:3px;background:#141414;box-shadow:3px 3px 0 #080808,4px 4px 0 #454545;transform:rotateX(calc(var(--fx-y) * -8deg)) rotateY(calc(var(--fx-x) * 8deg))}
body[data-motion=fold] .book-page-controls button:hover:not(:disabled){transform:translateY(-3px) rotateX(12deg);box-shadow:4px 6px 0 #080808,5px 7px 0 #67ba9477}
body[data-motion=fold] .book-progress button[aria-current=page]{animation:fold-progress 6s ease-in-out infinite}
body[data-motion=fold] .index-result{transform-origin:right center;perspective:900px}
body[data-motion=fold] .index-result:hover{transform:perspective(900px) rotateY(-3deg) translateX(-3px);box-shadow:inset 2px 0 #67ba94}
body[data-motion=fold] .index-filters button{box-shadow:3px 3px 0 #080808,4px 4px 0 #383838;transition:transform .3s}
body[data-motion=fold] .index-filters button:hover{transform:translateY(-3px) rotateX(10deg)}
body[data-motion=fold] .site-header .brand>span:last-child{transform:perspective(800px) rotateY(calc(var(--fx-x) * 3deg));transform-origin:left center}
@keyframes fold-faces{0%,100%{transform:rotateY(58deg) rotateX(-8deg) translateZ(0)}50%{transform:rotateY(-48deg) rotateX(9deg) translateZ(16px)}}
@keyframes fold-notes{0%,100%{transform:perspective(850px) rotateY(-2deg) translateY(0)}50%{transform:perspective(850px) rotateY(3deg) translateY(-2px)}}
@keyframes fold-progress{0%,100%{transform:perspective(500px) rotateX(0deg)}50%{transform:perspective(500px) rotateX(36deg) translateY(-1px)}}

/* 03. Liquid Signal — viscous type, advected ink and elastic controls. */
body[data-motion=liquid] #chapter-number::before{content:'';position:absolute;inset:-7px -11px;z-index:-1;background:#1a1a1a;border:1px solid #515151;border-left-color:#67ba9460;border-right-color:#9d72c770;animation:liquid-badge 8s ease-in-out infinite}
body[data-motion=liquid] .volume-tabs button[aria-pressed=true]{background:#242424;color:#eee;border-color:#666;box-shadow:inset 0 -1px #67ba94;animation:liquid-surface 7s ease-in-out infinite}
body[data-motion=liquid] .volume-tabs button:hover{background:#282828;filter:url(#book-liquid-edge)}
body[data-motion=liquid] .manuscript-nav-item.is-current{background:#242424;box-shadow:inset 2px 0 #9d72c7}
body[data-motion=liquid] .manuscript-nav-item.is-current>.eyebrow::before{content:'';position:absolute;inset:-7px -5px;background:#67ba940c;border:1px solid #67ba9440;z-index:-1;animation:liquid-badge 7s ease-in-out infinite reverse}
body[data-motion=liquid] .manuscript-nav-item:hover{background:#282828}
body[data-motion=liquid] .manuscript-rule{position:relative}
body[data-motion=liquid] .manuscript-rule::after{content:'';position:absolute;height:2px;width:30%;left:0;top:-1px;background:linear-gradient(90deg,transparent,#67ba9488,#9d72c788,transparent);filter:url(#book-liquid-edge);animation:liquid-tide 10s ease-in-out infinite}
body[data-motion=liquid] .margin-note{border-top-color:#777;transition:transform .7s cubic-bezier(.18,1.8,.3,1)}
body[data-motion=liquid] .margin-note:hover{transform:translateY(-5px) scale(1.015)}
body[data-motion=liquid] .note-number{filter:url(#book-liquid-type)}
body[data-motion=liquid] .book-page-controls button:not(:disabled){animation:liquid-badge 8s ease-in-out infinite;background:#141414}
body[data-motion=liquid] .book-page-controls button:hover:not(:disabled){transform:scale(1.12);box-shadow:-3px 0 10px #67ba9422,3px 0 10px #9d72c722}
body[data-motion=liquid] .book-progress button[aria-current=page]::before{filter:url(#book-liquid-edge);box-shadow:0 0 9px #67ba9428}
body[data-motion=liquid] .index-dialog h2{filter:url(#book-liquid-type)}
body[data-motion=liquid] .index-result:hover .index-result-title{filter:url(#book-liquid-edge)}
body[data-motion=liquid] .index-filters button[aria-pressed=true]{animation:liquid-badge 8s ease-in-out infinite}
body[data-motion=liquid] .search-wrap::after{content:'';position:absolute;bottom:-1px;width:20%;height:2px;background:linear-gradient(90deg,transparent,#67ba9488,#9d72c788,transparent);animation:liquid-tide 9s ease-in-out infinite}
body[data-motion=liquid] .site-header .text-button:hover{filter:url(#book-liquid-edge)}
@keyframes liquid-badge{0%,100%{border-radius:3px 13px 4px 11px / 9px 4px 12px 3px}50%{border-radius:13px 4px 11px 3px / 4px 12px 3px 9px}}
@keyframes liquid-tide{0%,100%{left:0;transform:scaleX(.7)}50%{left:70%;transform:scaleX(1)}}
@keyframes liquid-surface{0%,100%{box-shadow:inset 0 -1px #67ba94,inset 0 0 0 #9d72c700}50%{box-shadow:inset 0 -1px #9d72c7,inset 0 -10px 15px #67ba9408}}

body[data-fx-paused=true] *,body[data-fx-paused=true] *::before,body[data-fx-paused=true] *::after{animation-play-state:paused!important}
body[data-fx-reduced=true] .fx-layer{display:none}
@media(max-width:700px){body[data-motion] #chapter-number::before{inset:-5px -6px}body[data-motion=fold] .book-page-controls button{box-shadow:2px 2px 0 #080808,3px 3px 0 #454545}}
@media(prefers-reduced-motion:reduce){body[data-motion] *,body[data-motion] *::before,body[data-motion] *::after{animation:none!important;transition-duration:.01ms!important}.fx-fold-sculpture{display:none!important}}
@media print{.fx-layer,.fx-fold-sculpture{display:none!important}body[data-motion] *{opacity:1!important;transform:none!important;filter:none!important;animation:none!important}}