:root{color-scheme:dark;--anchor:27vw;--category-step:clamp(118px,10.6vw,165px);--category-y:24vh;--item-y:49vh;--row:76px;--ease:cubic-bezier(.2,.75,.2,1);font-family:"Helvetica Neue",Arial,sans-serif;font-weight:400;color:#fff;background:#08497c;font-synthesis:none}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{-webkit-font-smoothing:antialiased}button,input,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}a{color:inherit;text-underline-offset:5px}button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:1px solid #fff;outline-offset:8px}button:disabled{opacity:.22;cursor:default}button:hover{color:#fff}button{touch-action:manipulation}button:focus:not(:focus-visible){outline:none}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip{position:fixed;top:-100px;z-index:100}.skip:focus{top:20px;left:20px;padding:10px;background:#16374e}.background{position:fixed;inset:0;pointer-events:none;contain:strict;isolation:isolate;transform:translateZ(0);background:linear-gradient(160deg,#00368c,#20bad7)}#wave-canvas{width:100%;height:100%;display:block;transform:translateZ(0)}.ambient{position:absolute;inset:0;background:radial-gradient(ellipse at 75% 80%,#b6faff12,transparent 65%);mix-blend-mode:normal}.vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 48%,transparent 40%,#002b4e28)}
.status-bar{position:fixed;z-index:5;inset:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:33px 4.3vw;text-shadow:0 1px 4px #001c4e55}.identity{text-align:left}.identity>span{display:block;font-size:22px;font-weight:400;letter-spacing:-.5px}.identity small{display:block;font-size:11px;font-weight:400;letter-spacing:.5px;opacity:.7;margin-top:5px}.status-right{display:flex;align-items:center;gap:25px;font-size:13px}.status-right button{opacity:.75}.status-right button:hover{opacity:1}#clock{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:16px}.status-icon{position:relative;width:25px;height:12px;margin-left:3px;border:1px solid #e9f4ffb3;border-radius:1px;padding:2px;background:repeating-linear-gradient(90deg,#e9f4ffc9 0 4px,transparent 4px 6px) content-box;mask:none;-webkit-mask:none}.status-icon::after{content:"";position:absolute;right:-4px;top:3px;width:2px;height:4px;background:#e9f4ffb3}
.menu{position:absolute;inset:0;overflow:hidden;touch-action:none;transition:transform 0.455s var(--ease),opacity 0.35s;isolation:isolate}.categories{position:absolute;top:var(--category-y);left:0;width:100%;height:112px;overflow:visible;z-index:3}.category-track{position:absolute;top:0;left:var(--anchor);width:0;height:100%;will-change:transform}.category{position:absolute;top:0;left:calc(var(--i)*var(--category-step));width:108px;margin-left:-54px;display:flex;align-items:center;flex-direction:column;gap:13px;opacity:.43;transition:opacity 0.28s;white-space:nowrap;text-shadow:0 2px 5px #00274f88}.category .xmb-icon{width:63px;height:63px;transition:transform 0.35s var(--ease),filter 0.35s}.category .category-label{font-size:16px;transition:opacity 0.245s;opacity:.76}.category.active{opacity:1}.category.active .xmb-icon{transform:scale(1.25);filter:drop-shadow(0 0 6px #ffffff77) drop-shadow(0 2px 1px #001f5880)}.category.active .category-label{opacity:1}.category:hover{opacity:.9}.category:focus-visible{outline-offset:15px}.xmb-icon{display:block;flex-shrink:0;position:relative;width:48px;height:48px;filter:drop-shadow(0 2px 1px #00306377);pointer-events:none}.xmb-icon::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#fff 1%,#e1e9ee 26%,#a8becd 52%,#e9f7ff 63%,#b6c6d2 100%);mask:var(--icon) center/contain no-repeat;-webkit-mask:var(--icon) center/contain no-repeat}.xmb-icon::after{content:"";position:absolute;inset:0;background:#fff;mask:var(--icon) center/contain no-repeat;-webkit-mask:var(--icon) center/contain no-repeat;opacity:.07}
.item-window{position:absolute;inset:calc(var(--category-y) + 129px) 0 17vh;z-index:2;overflow:hidden;mask-image:linear-gradient(transparent,#000 7%,#000 82%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 7%,#000 82%,transparent)}.item-list{position:absolute;left:var(--anchor);top:calc(var(--item-y) - var(--category-y) - 129px);width:min(660px,51vw);height:1px}.item{position:absolute;top:0;left:-28px;display:flex;align-items:center;gap:24px;width:100%;min-height:62px;text-align:left;transform-origin:28px center;will-change:transform,opacity;text-shadow:0 2px 4px #001f4e88;opacity:.44}.item .xmb-icon{width:49px;height:49px}.item .item-name{font-size:21px;letter-spacing:-.2px;line-height:1.25;font-weight:400;display:block;max-width:430px}.item .item-subtitle{font-size:12px;display:block;margin-top:8px;opacity:0;max-width:440px;transition:opacity 0.21s;line-height:1.5;letter-spacing:.1px}.item.active{z-index:3}.item.active .item-name{font-size:27px;letter-spacing:-.55px}.item.active .xmb-icon{filter:drop-shadow(0 0 8px #fff9) drop-shadow(0 2px 2px #001c52aa)}.item.active .item-subtitle{opacity:.8}.item:not(.active):hover{opacity:.88!important}.item:focus-visible{outline-offset:5px}.preview{position:absolute;z-index:3;top:47%;left:67%;right:7%;max-width:390px;text-shadow:0 1px 4px #001b4e88;pointer-events:auto}.preview-meta{font-size:11px;line-height:1.6;opacity:.67;margin:0 0 20px}.preview h1{font-size:23px;font-weight:400;margin:0 0 15px;letter-spacing:-.4px}.preview-summary{font-size:14px;line-height:1.8;color:#fff;opacity:.8;margin:0;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.open-button{display:flex;align-items:center;gap:10px;margin-top:27px;font-size:13px;opacity:.88}.open-button:hover{text-shadow:0 0 10px #fff;opacity:1}.item-navigation{position:absolute;bottom:12.8vh;left:calc(var(--anchor) - 23px);display:flex;gap:18px;align-items:center;font-size:12px;color:#d7f0fcbd}.item-navigation button{font-size:23px;padding:3px;line-height:1}.item-navigation span{min-width:42px;text-align:center;font-variant-numeric:tabular-nums}
.system-footer{position:fixed;z-index:5;bottom:0;left:0;right:0;padding:22px 4.3vw 25px;display:flex;align-items:center;justify-content:space-between;font-size:12px;text-shadow:0 2px 4px #00193f99}.controls{display:flex;gap:29px;align-items:center}.controls>span,.controls>button{display:flex;gap:9px;align-items:center;color:#ffffffe0}.controls b{font-weight:400;font-size:15px;letter-spacing:3px}.credits-link{opacity:.57}.cross{display:block;position:relative;flex:none;width:16px;height:16px}.cross::before,.cross::after{content:"";position:absolute;left:7px;top:0;width:1.5px;height:17px;background:currentColor;transform:rotate(45deg);box-shadow:0 0 4px #ffffff33}.cross::after{transform:rotate(-45deg)}.circle{width:14px;height:14px;display:inline-block;flex:none;border:1.5px solid currentColor;border-radius:50%}.square{width:13px;height:13px;display:inline-block;flex:none;border:1.5px solid currentColor}.reading .menu{transform:translateX(-10vw);opacity:.22;pointer-events:none}
dialog{color:#fff;padding:0;border:0;border-left:1px solid #ffffff28;background:linear-gradient(125deg,#113a59f2,#164d6ff2);box-shadow:-35px 0 100px #00203c33;max-height:none;max-width:none;font:inherit;overscroll-behavior:contain}dialog::backdrop{background:#061c3455;backdrop-filter:blur(7px)}dialog[open]{animation:reveal 0.35s var(--ease)}@keyframes reveal{from{opacity:0;transform:translateX(35px)}to{opacity:1;transform:translateX(0)}}.reader{position:fixed;inset:12vh 5vw 11vh 42vw;margin:0;width:auto;height:auto;overflow:hidden}.reader-bar{height:66px;padding:0 32px;border-bottom:1px solid #ffffff22;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#ffffffb3;gap:20px}.reader-bar h2{font-size:15px;font-weight:400;margin:0}.back-button{display:flex;gap:9px;align-items:center;font-size:12px;color:#fff;white-space:nowrap}.back-button kbd{font:inherit;font-size:10px;opacity:.5;margin-left:10px}.reader-scroll{height:calc(100% - 120px);overflow-y:auto;padding:35px 40px 65px;scrollbar-width:thin;scrollbar-color:#ffffff55 transparent}.reader-meta{font-size:11px;opacity:.65;line-height:1.8;margin:0 0 18px}#reader-title{font-size:clamp(27px,3vw,44px);font-weight:300;letter-spacing:-1px;line-height:1.13;margin:0 0 22px}.reader-summary{font-size:17px;line-height:1.7;margin:0 0 35px;color:#e2edf6}#reader-sections h3{font-size:20px;font-weight:400;margin:36px 0 13px;letter-spacing:-.3px}#reader-sections p{font-size:14px;line-height:1.95;margin:0 0 18px;color:#deebf4}.reader-media{display:flex;gap:12px;overflow-x:auto;scrollbar-width:thin}.reader-media:empty{display:none}.reader-media img{width:45%;height:auto;object-fit:contain;align-self:start}.reader-links{display:flex;flex-wrap:wrap;gap:18px;margin-top:35px;font-size:13px}.reader-bottom{height:54px;border-top:1px solid #ffffff22;display:flex;justify-content:space-between;align-items:center;padding:0 32px;font-size:12px;color:#ffffffc9}.reader-bottom span{font-size:10px;opacity:.7}.index-dialog{inset:10vh 14vw;margin:0;width:auto;height:80vh;display:none;overflow:hidden}.index-dialog[open]{display:flex;flex-direction:column}.search-label{display:block;padding:25px 32px 10px}.search-label>span{display:block;font-size:11px;opacity:.7;margin-bottom:12px}input{width:100%;background:#ffffff0a;border:0;border-bottom:1px solid #ffffff55;padding:12px 0;color:#fff;font:inherit;font-size:17px;border-radius:0}input::placeholder{color:#ffffff66}.index-list{overflow-y:auto;padding:10px 32px 35px;scrollbar-width:thin}.index-entry{padding:19px 0;display:flex;align-items:center;gap:20px;width:100%;border-bottom:1px solid #ffffff1c;text-align:left}.index-entry .xmb-icon{width:33px;height:33px}.index-entry>span:nth-child(2){flex:1;font-size:17px}.index-entry small{font-size:11px;opacity:.6}.index-entry:hover{background:#ffffff09}.index-dialog>p{padding:15px 32px}.about-dialog{inset:16vh 24vw;margin:0;width:auto;height:68vh;overflow:hidden}.about-scroll{height:calc(100% - 66px);padding:30px 40px 50px;overflow:auto;scrollbar-width:thin}.about-scroll h2{font-size:38px;font-weight:300;letter-spacing:-.8px;margin:0 0 28px}.about-scroll p{font-size:16px;line-height:1.85;color:#e0edf6}.about-scroll>a{display:inline-block;margin-top:20px;font-size:14px}.no-script{position:fixed;top:40%;left:20%;right:20%}
/* Selection is light, never a rectangular outline. Other controls retain keyboard outlines. */
.item:focus-visible,.category:focus-visible{outline:none}
.category.active,.category.active:hover{opacity:1}
.category.active .xmb-icon{filter:drop-shadow(0 0 calc(10px * var(--selection-glow,1)) #ffffffa6) drop-shadow(0 0 22px #d8f5ff40) drop-shadow(0 2px 1px #001f5880)}
.category.active .category-label{ text-shadow:0 0 calc(12px * var(--selection-glow,1)) #e8faffaa,0 2px 5px #00274f88 }
.item .item-name{transition:text-shadow 0.224s}
.item .xmb-icon{transition:filter 0.21s var(--ease)}
.item.active .xmb-icon{filter:drop-shadow(0 0 calc(10px * var(--selection-glow,1)) #ffffffb3) drop-shadow(0 0 24px #c3f1ff66) drop-shadow(0 2px 2px #001c5280)}
.item.active .item-name{text-shadow:0 0 calc(13px * var(--selection-glow,1)) #e6faff99,0 0 28px #c0eeff40,0 2px 4px #001f4e66}
.item:focus-visible .item-name,.category:focus-visible .category-label{text-shadow:0 0 10px #fff,0 0 22px #d0f5ffb3}
.transition-ghost{pointer-events:none!important;will-change:transform,opacity;z-index:0}
.item-list.transition-ghost{filter:none}
dialog.closing{animation:none!important}





@media(min-width:1800px){:root{--row:88px}.item .item-name{font-size:24px}.item.active .item-name{font-size:32px}.category .xmb-icon{width:72px;height:72px}.preview{max-width:430px}.preview-summary{font-size:16px}}
@media(max-width:1000px){:root{--anchor:22vw;--category-step:125px;--category-y:23vh;--item-y:47vh;--row:70px}.preview{left:65%;right:5%}.preview-summary{-webkit-line-clamp:3;font-size:13px}.item-list{width:58vw}.item .item-name{font-size:18px;max-width:320px}.item.active .item-name{font-size:23px}.item .item-subtitle{max-width:300px;font-size:10px}.reader{left:28vw;right:4vw}.about-dialog{left:16vw;right:16vw}.status-right{gap:16px}}
@media(max-width:620px){:root{--anchor:19vw;--category-step:95px;--category-y:20vh;--item-y:43vh;--row:68px}.status-bar{padding:25px 6vw;align-items:flex-start}.identity>span{font-size:20px}.identity small{font-size:10px;max-width:150px;line-height:1.5}.status-right{gap:16px;flex-wrap:wrap;justify-content:flex-end;max-width:140px;font-size:11px}.status-icon{display:none}#clock{font-size:11px;order:3;width:100%;text-align:right}.category{width:92px;margin-left:-46px;gap:12px}.category .xmb-icon{width:49px;height:49px}.category .category-label{font-size:13px}.item-window{inset:calc(var(--category-y) + 100px) 0 23vh}.item-list{top:calc(var(--item-y) - var(--category-y) - 100px);width:78vw}.item{left:-22px;gap:18px;min-height:55px}.item .xmb-icon{width:42px;height:42px}.item .item-name{font-size:17px;max-width:255px}.item.active .item-name{font-size:22px;letter-spacing:-.5px}.item .item-subtitle{max-width:245px;font-size:10px;line-height:1.4;margin-top:6px}.preview{top:auto;bottom:12vh;left:calc(var(--anchor) + 37px);right:7%;max-width:300px}.preview-meta,.preview h1,.preview-summary{display:none}.open-button{font-size:12px;margin:0}.item-navigation{left:calc(var(--anchor) - 23px);bottom:16vh;gap:16px}.system-footer{padding:20px 6vw max(20px,env(safe-area-inset-bottom));font-size:11px}.controls{gap:22px}.controls>span{display:none}.credits-link{font-size:10px}.reader{inset:10vh 0 0;width:100%;height:90vh;border-left:0;border-top:1px solid #ffffff33}.reader-bar{height:60px;padding:0 24px}.reader-scroll{padding:28px 25px 55px;height:calc(100% - 118px)}.reader-summary{font-size:16px}.reader-bottom{padding:0 24px;height:58px;padding-bottom:env(safe-area-inset-bottom)}#reader-sections p{font-size:14px}.reader-media img{width:76%}.index-dialog{inset:10vh 0 0;height:90vh}.search-label{padding:25px 24px 10px}.index-list{padding:10px 24px 35px}.index-entry{gap:13px}.index-entry>span:nth-child(2){font-size:15px}.index-entry small{max-width:75px;font-size:10px}.about-dialog{inset:10vh 0 0;height:90vh}.about-scroll{padding:28px 25px 50px}.about-scroll h2{font-size:32px}.about-scroll p{font-size:15px}.reading .menu{transform:translateX(-12vw)}}
@media(max-height:550px) and (min-width:621px){:root{--category-y:20vh;--item-y:47vh;--row:56px}.status-bar{padding-top:18px}.category .xmb-icon{width:44px;height:44px}.category{gap:7px}.category .category-label{font-size:13px}.item-window{top:calc(var(--category-y) + 83px);bottom:19vh}.item-list{top:calc(var(--item-y) - var(--category-y) - 83px)}.item .xmb-icon{width:36px;height:36px}.item.active .item-name{font-size:21px}.item .item-name{font-size:16px}.item .item-subtitle{font-size:10px;margin-top:4px}.item-navigation{bottom:11vh}.preview{top:44%}.preview-summary{-webkit-line-clamp:2}.system-footer{padding-bottom:15px}.reader{inset:8vh 4vw 5vh 35vw}}
/* A cached, icon-sized light layer breathes; the base selection glow stays steady. */
.item::before,.category::before{content:"";position:absolute;pointer-events:none;width:94px;height:94px;background:radial-gradient(ellipse,#e8faff70 0%,#d6f3ff26 35%,transparent 70%);opacity:0}
.item::before{left:-22px;top:50%;transform:translateY(-50%)}
.category::before{left:7px;top:-16px}
.item.active::before,.category.active::before{opacity:.18}
body[data-ui-motion=full] .item.active::before,body[data-ui-motion=full] .category.active::before{animation:selection-breathe 2.8s ease-in-out infinite}
@keyframes selection-breathe{0%,100%{opacity:.12}50%{opacity:.52}}
body.reading .item::before,body.reading .category::before,body[data-page-hidden=true] .item::before,body[data-page-hidden=true] .category::before{animation-play-state:paused!important}
.transition-ghost .item::before,.transition-ghost .category::before{animation:none!important}
@media(max-width:620px){.status-right{max-width:158px;gap:10px 12px}.identity small{max-width:128px}.category::before{left:4px;top:-21px;width:84px;height:84px}.item::before{left:-21px;width:84px;height:84px}}

/* Project details stay inside the XMB scene. The two selected entries become
   a compact navigation rail; the background and header never turn into a modal. */
:root{--rail-anchor:10vw;--detail-y:38vh}
.menu{z-index:2}
body::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,transparent 16%,#062e5920 30%,#062e5966 100%);opacity:0;transition:opacity .42s var(--ease)}
body.detail-open::after{opacity:1}
.category{transition:opacity .28s,transform .38s var(--ease)}
.categories{transition:top .455s var(--ease)}
.item-window{transition:top .455s var(--ease)}
.item-list{transition:top .455s var(--ease),left .455s var(--ease),width .455s var(--ease)}
.item .xmb-icon{transition:width .35s var(--ease),height .35s var(--ease),filter .21s var(--ease)}
.category .xmb-icon{transition:width .35s var(--ease),height .35s var(--ease),transform .35s var(--ease),filter .35s}
.preview{cursor:pointer}
#selected-open::after{content:"";position:absolute;inset:0}
.detail-open .menu{transform:translateX(calc(var(--rail-anchor) - var(--anchor)));opacity:1;pointer-events:auto}
.detail-open.reading .menu{opacity:.22;pointer-events:none}
.detail-open .category:not(.active){opacity:0;transform:translateY(-12px);pointer-events:none}
.detail-open .item-window{overflow:visible;mask-image:none;-webkit-mask-image:none}
.detail-open .item-list{top:calc(var(--detail-y) - var(--category-y) - 129px);width:17vw}
.detail-open .item.active{align-items:flex-start;gap:15px}
.detail-open .item.active .item-name{font-size:18px;letter-spacing:-.2px;max-width:13vw;line-height:1.4;padding-top:9px}
.detail-open .item .item-subtitle{opacity:0;display:none}
.detail-open .item-navigation{opacity:0;pointer-events:none}
.item-navigation{transition:opacity .21s}
.detail-open .preview{pointer-events:none}
.detail-open .item:not(.active){pointer-events:none}
.reader{position:fixed;z-index:4;inset:15vh 3vw 9vh 28vw;width:auto;height:auto;display:flex;flex-direction:column;overflow:hidden;border:0;background:none;box-shadow:none;text-shadow:0 1px 4px #00244955}
.reader[hidden]{display:none}
.reader>.reader-bar{height:46px;flex:none;padding:0 8px 0 0;border:0}
.reader>.reader-scroll{height:auto;flex:1;min-height:0;padding:25px 24px 45px 0;overscroll-behavior:contain;touch-action:pan-y;scrollbar-gutter:stable}
.reader>.reader-bottom{height:46px;flex:none;border:0;padding:0 8px 0 0}
#reader-summary,#reader-sections{max-width:78ch}
.reader-media img{width:calc((100% - 24px)/3);max-width:360px}


@media(max-height:550px) and (min-width:621px){:root{--detail-y:42vh}.detail-open .item-list{top:calc(var(--detail-y) - var(--category-y) - 83px)}.reader{top:13vh;bottom:10vh}.reader>.reader-scroll{padding-top:12px}}
@media(max-width:620px){
 :root{--rail-anchor:12vw;--detail-nav-top:max(128px,16vh)}
 .detail-open .categories{top:var(--detail-nav-top)}
 .detail-open .category{gap:7px}
 .detail-open .category .xmb-icon{width:32px;height:32px}
 .detail-open .category .category-label{font-size:11px}
 .detail-open .category::before{left:8px;top:-19px;width:76px;height:76px}
 .detail-open .item-window{inset:var(--detail-nav-top) 0 auto;height:70px}
 .detail-open .item-list{top:0;left:calc(var(--anchor) + 83px);width:calc(100vw - var(--rail-anchor) - 83px - 5vw)}
 .detail-open .item.active{gap:13px;min-height:60px;align-items:center}
 .detail-open .item .xmb-icon{width:32px;height:32px}
 .detail-open .item.active .item-name{font-size:14px;max-width:none;padding:0;line-height:1.35;letter-spacing:0}
 .reader{inset:calc(var(--detail-nav-top) + 80px) 5vw 8vh;width:auto;height:auto}
 .reader>.reader-bar{height:36px}
 .reader>.reader-scroll{padding:22px 10px 35px 0}
 .reader>.reader-bottom{height:44px;padding-bottom:0}
 .reader-media img{width:76%;max-width:none}
 #reader-title{font-size:30px}
 .reader-summary{font-size:15px}
}

/* Shared icon slots; only the artwork inside them is optically normalized. */
.xmb-icon::before,.xmb-icon::after{transform:translate(var(--icon-x,0%),var(--icon-y,0%)) scale(var(--icon-scale,1));transform-origin:center}
:root{--item-icon-size:49px;--item-gap:24px}
.item-list{width:min(660px,calc(67vw - var(--anchor) - 4vw));transition:top .455s var(--ease),left .455s var(--ease)}
.item{display:grid;grid-template-columns:var(--item-icon-size) minmax(0,1fr);column-gap:var(--item-gap);row-gap:0;align-items:center;min-height:var(--item-icon-size)}
.item-copy{display:contents}
.item .xmb-icon{grid-column:1;grid-row:1;align-self:center;width:var(--item-icon-size);height:var(--item-icon-size)}
.item .item-name{grid-column:2;grid-row:1;min-width:0;max-width:none;overflow-wrap:anywhere;align-self:center}
.item .item-subtitle{grid-column:2;grid-row:2;display:none;min-width:0;max-width:none;margin-top:4px;overflow-wrap:anywhere}
.item.active .item-subtitle{display:block}
.detail-open .item.active{column-gap:15px}
.detail-open .item.active .item-name{padding-top:0}
.detail-open .item .item-subtitle{display:none}
@media(max-width:1000px) and (min-width:621px){.item-list{width:calc(65vw - var(--anchor) - 3vw)}}
@media(max-width:620px){
 :root{--item-icon-size:42px;--item-gap:18px}
 .item-list{width:calc(100vw - var(--anchor) - 4vw + 22px)}
 .detail-open{--item-icon-size:32px}
 .detail-open .item.active{column-gap:13px}
}
@media(max-height:550px) and (min-width:621px){:root{--item-icon-size:36px;--item-gap:18px}}

/* Enka case study: figures sit with the work they illustrate. */
.reader.case-study #reader-sections{max-width:none}
.reader.case-study .reader-section{margin:0 0 54px}
.reader.case-study #reader-sections p{max-width:76ch;font-size:15px;line-height:1.9}
.reader.case-study #reader-sections h3{font-size:25px;line-height:1.3;margin-top:44px;margin-bottom:20px;max-width:32ch}
.reader.case-study .reader-media{display:block;overflow:visible}
.case-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin:0 0 45px;padding:22px 0;border-block:1px solid #ffffff24}
.case-facts dt{font-size:10px;opacity:.55;letter-spacing:.5px;margin:0 0 9px}
.case-facts dd{font-size:14px;line-height:1.5;margin:0;overflow-wrap:anywhere}
.case-gallery{display:grid;gap:28px 24px;margin:30px 0 12px;align-items:start}
.case-gallery.phones{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.case-gallery.study{grid-template-columns:repeat(2,minmax(0,1fr))}
.case-gallery figure{margin:0;min-width:0}
.case-gallery figure.wide{grid-column:1/-1}
.case-image-link{position:relative;display:block;text-decoration:none}
.case-image-link::after{content:'↗';position:absolute;right:10px;bottom:10px;width:25px;height:25px;text-align:center;line-height:25px;background:#123c5cd9;color:white;font-size:15px;opacity:.75;transition:opacity .2s}
.case-image-link:hover::after,.case-image-link:focus-visible::after{opacity:1}
/* Keep the silver logo’s separate facets visible rather than flattening its alpha. */
.xmb-icon[data-icon="recto-verso"]::before{background:var(--icon) center/contain no-repeat;mask:none;-webkit-mask:none}
.xmb-icon[data-icon="recto-verso"]::after{display:none}
.case-gallery.brand{grid-template-columns:1fr}
.case-gallery.brand .case-image-link{max-width:268px;width:100%;margin:0 auto;padding:28px;background:#f7f5f0}
.case-gallery.brand img{max-width:212px;margin:0 auto;background:none}
.case-gallery.portraits{grid-template-columns:repeat(2,minmax(0,1fr))}
.case-gallery.portraits img{max-height:620px;background:none}
.case-videos{display:grid;gap:28px;margin:30px 0 12px}
.case-videos figure{margin:0;min-width:0}
.case-videos video{display:block;width:100%;height:auto;max-height:560px;object-fit:contain;background:#071321}
.case-videos figcaption{font-size:12px;line-height:1.7;margin-top:13px;color:#e3f0f7cc;text-shadow:none}
.case-videos figcaption small{display:block;font-size:10px;line-height:1.7;opacity:.6;margin-top:7px}
.case-external{display:grid;gap:35px;margin:30px 0 12px}
.case-external figure,.case-placeholders figure{margin:0;min-width:0}
.case-external .portrait{max-width:320px;width:100%;justify-self:start}
.external-stage{position:relative;background:#071321;overflow:hidden}
.external-preview{position:relative;display:block;width:100%;height:100%;padding:0;text-decoration:none;color:#fff;cursor:pointer}
.external-preview[hidden]{display:none}
.external-preview img{display:block;width:100%;height:100%;object-fit:contain}
.external-action{position:absolute;left:16px;bottom:16px;padding:10px 15px;background:#071321db;font-size:12px;line-height:1.5;text-shadow:none}
.external-preview:hover .external-action,.external-preview:focus-visible .external-action{background:#123d5f}
.external-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.case-external figcaption,.case-placeholders figcaption{font-size:12px;line-height:1.7;margin-top:13px;color:#e3f0f7cc;text-shadow:none}
.case-external figcaption strong{display:block;font-size:17px;font-weight:400;margin-bottom:8px;color:#fff}
.case-external figcaption span,.case-external figcaption small{display:block}
.case-external figcaption small{font-size:10px;opacity:.65;margin-top:7px}
.case-external figcaption>a{display:inline-block;margin-top:10px;text-underline-offset:4px}
.case-placeholders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px;margin:30px 0 12px;align-items:start}
.media-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;border:1px dashed #ffffff38;background:#ffffff04;color:#dceaf3a6;font-size:12px;text-align:center;padding:12px}
.media-placeholder small{font-size:10px;opacity:.7}
.case-placeholders .portrait .media-placeholder{max-width:220px;margin-inline:auto}
@media(max-width:620px){.case-placeholders{grid-template-columns:1fr}.case-external .portrait{max-width:280px}.external-action{left:10px;bottom:10px;padding:8px 12px}}
.case-gallery img{display:block;width:100%;height:auto;object-fit:contain;max-height:560px;background:#fff}
.case-gallery.phones .case-image-link{max-width:296px;margin:0 auto}
.case-gallery.phones img{max-height:none;background:none}
.case-gallery.screens{grid-template-columns:1fr}
.case-gallery.screens img{max-height:none;background:none}
.case-gallery.study figure:not(.wide) .case-image-link{aspect-ratio:16/11;display:grid;place-items:center;background:#fff}
.case-gallery.study figure:not(.wide) img{height:100%;max-height:none}
.case-gallery figcaption{font-size:12px;line-height:1.7;margin-top:13px;color:#e3f0f7cc;text-shadow:none}
.case-gallery figcaption small{display:block;font-size:10px;line-height:1.7;opacity:.6;margin-top:7px}
.case-tags{list-style:none;display:flex;flex-wrap:wrap;gap:12px 26px;padding:0;margin:25px 0;font-size:12px;color:#dbeffcbb}
.case-tags li::before{content:'·';margin-right:9px}
.case-flow{margin:30px 0 25px}
.case-flow ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;padding:0;margin:0;gap:25px}
.case-flow li{position:relative;padding:23px 0 0;border-top:1px solid #ffffff42}
.case-flow li::before{content:'';position:absolute;top:-3px;left:0;width:5px;height:5px;border-radius:50%;background:#e0f4ff}
.case-flow strong{display:block;font-size:15px;font-weight:400;margin-bottom:10px}
.case-flow li span{display:block;font-size:12px;line-height:1.8;color:#d9ecf8aa}
.case-flow figcaption{font-size:10px;line-height:1.7;opacity:.45;margin-top:18px}
.case-note{margin:28px 0;font-size:12px;line-height:1.8;padding-left:18px;border-left:2px solid #ffffff50;color:#dceef8b8;max-width:85ch}
.case-results{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:25px;margin:30px 0}
.case-results dd{font-size:32px;font-weight:300;letter-spacing:-1px;margin:0 0 8px}
.case-results dt{font-size:11px;line-height:1.6;color:#daedf8a6}
@media(max-width:1000px){.case-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.case-gallery.phones{gap:15px}.reader.case-study #reader-sections p{font-size:14px}}
@media(max-width:620px){
 .reader.case-study #reader-sections h3{font-size:22px;margin-top:35px}
 .reader.case-study .reader-section{margin-bottom:42px}
 .case-facts{gap:20px 15px;margin-bottom:32px;padding:20px 0}
 .case-facts dd{font-size:12px}.case-facts dt{font-size:10px}
 .case-gallery.phones,.case-gallery.study,.case-gallery.portraits{grid-template-columns:1fr;gap:30px}
 .case-gallery img{max-height:none}
 .case-gallery.phones .case-image-link{max-width:296px}
 .case-flow ol{grid-template-columns:1fr;gap:18px}
 .case-flow li{padding-top:15px}
 .case-results{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
 .case-results dd{font-size:29px}
 .case-note{padding-left:13px;font-size:11px}
}
.case-results>div{display:flex;flex-direction:column}.case-results dd{order:1}.case-results dt{order:2}

/* Welcome is the one item whose complete introduction is visible in the menu. */
.welcome-active .preview-meta,.welcome-active .preview h1,.welcome-active .preview-summary,.welcome-active #selected-open{display:none}
.welcome-active:not(.detail-open) .preview{top:calc(var(--item-y) - 20px);bottom:12vh;left:49%;right:5%;max-width:680px;cursor:default}
.welcome-preview{max-height:100%;overflow-y:auto;padding:0 10px 4px 0;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:#ffffff55 transparent}
.welcome-preview[hidden]{display:none}
.welcome-preview p{font-size:16px;line-height:1.75;margin:0 0 16px;color:#f0f6fc}
.welcome-links{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;margin:8px 0 0}
.welcome-links a{display:inline-block;padding:5px 0;color:#fff;font-size:13px;line-height:1.6;text-decoration:none;border-bottom:1px solid #ffffff55;white-space:nowrap;transition:border-color .2s}
.welcome-links a:hover,.welcome-links a:focus-visible{border-color:#fff}
.welcome-active:not(.detail-open) .item-window{mask-image:none;-webkit-mask-image:none}
.welcome-active:not(.detail-open) .item-navigation{display:none}
.welcome-active:not(.detail-open) .item-list{width:calc(49vw - var(--anchor) - 20px)}
@media(max-width:1100px){
 .welcome-active:not(.detail-open) .item-list{top:23px}
 .welcome-active:not(.detail-open) .item-list{width:calc(100vw - var(--anchor) - 5vw)}
 .welcome-active:not(.detail-open) .preview{top:calc(var(--category-y) + 238px);left:calc(var(--anchor) + 73px);right:5%;bottom:11vh;max-width:none}
 .welcome-preview p{font-size:14px;line-height:1.7;margin-bottom:14px}
}
@media(max-width:620px){
 .welcome-active:not(.detail-open) .preview{top:calc(var(--category-y) + 210px);left:6vw;right:6vw;bottom:11vh}
 .welcome-links{column-gap:20px}
 .welcome-links a{font-size:12px}
}
@media(max-width:360px){
 .welcome-active:not(.detail-open) .preview{top:calc(var(--category-y) + 195px);bottom:9vh}
 .welcome-preview p{font-size:12px;line-height:1.7;margin-bottom:12px}
 .welcome-links{column-gap:16px}
 .welcome-links a{font-size:11px}
}

/* A small directional hint belongs only to the selected Y entry. */
.item-caret{display:none;width:.5em;height:.8em;margin-left:.25em;vertical-align:-.06em;color:#f0f8ff;pointer-events:none;--caret-facing:1;--caret-travel:3px;filter:drop-shadow(0 0 4px #e5f7ff80)}
.item-caret svg{display:block;width:100%;height:100%;fill:currentColor;transform:scaleX(var(--caret-facing))}
.item.active .item-caret{display:inline-block}
.detail-open #item-list .item-caret{display:none}
.reader-back-caret{display:inline-block;width:12px;height:24px;margin:0;--caret-facing:-1;--caret-travel:-3px}
#reader-category{margin-left:auto}
#reader>.reader-bar{min-height:44px}
#reader-close{min-height:44px;padding:4px 6px}
body[data-ui-motion=full] .item.active .item-caret{animation:item-caret-nudge 1.8s ease-in-out infinite}
body.detail-open[data-ui-motion=full] .reader-back-caret{animation:item-caret-nudge 1.8s ease-in-out infinite}
@keyframes item-caret-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(var(--caret-travel))}}
body.reading .item-caret,body[data-page-hidden=true] .item-caret{animation-play-state:paused!important}
.transition-ghost .item-caret{animation:none!important}
@media(max-width:620px){
 .welcome-active:not(.detail-open) .preview{top:calc(var(--category-y) + 200px);bottom:9vh}
 .welcome-preview p{margin-bottom:12px}
}
@media(max-width:360px){
 .welcome-active:not(.detail-open) .preview{top:calc(var(--category-y) + 195px)}
 .welcome-active .item.active .item-name{font-size:20px}
}

[data-credits-language]{display:none}
html[lang=en] [data-credits-language=en],html[lang=fr] [data-credits-language=fr]{display:block}

/* Keep trackpad/touch overscroll inside the portfolio, including above the menu. */
html,body{overscroll-behavior-x:none;touch-action:pan-y pinch-zoom}
.reader-scroll,.reader-media,.index-list,.about-scroll,.welcome-preview{overscroll-behavior-x:contain}
@media(max-width:620px){
 :root{--item-y:calc(43vh + 10px)}
 /* Leave the previous topic fully tappable, without narrowing Y item titles. */
 body:not(.detail-open) .category-track{left:max(141px,38vw)}
}

/* Small, labelled icon controls; the background has its own pause switch. */
.ui-symbols{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.ui-icon{display:block;width:24px;height:24px;fill:currentColor;flex:none}
.status-right{gap:12px}
.status-right .control-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:3px;width:44px;height:44px;flex:none;padding:0;opacity:.85;border-radius:6px}
.status-right .control-icon:hover{background:#ffffff0c;opacity:1}
.status-right .control-icon:focus-visible{outline-offset:2px}
.language-control .ui-icon{width:26px}
.wave-control .ui-icon{width:20px;height:20px}
#sounds[data-enabled=true] .sound-off,#sounds[data-enabled=false] .sound-on{display:none}
#sounds[data-enabled=true] .sound-on,#sounds[data-enabled=false] .sound-off{display:block}
.mobile-index-icon{display:none}
@media(max-width:620px){
 .status-right{display:grid;grid-template-columns:repeat(3,44px);gap:3px 4px;align-items:center;width:140px;max-width:140px;flex:none}
 #clock{grid-column:1/-1;order:initial;width:100%;font-size:11px;text-align:right;line-height:1.5}
 .status-icon{display:none}
 /* Outgoing preview clones lose IDs, so hide their prompt by class as well. */
 .preview .open-button,#footer-open{display:none}
 .system-footer{display:grid;grid-template-columns:minmax(0,1fr) auto auto;column-gap:8px;align-items:center;padding:12px 5vw max(12px,env(safe-area-inset-bottom));font-size:12px}
 .system-footer>.item-navigation{position:static;grid-column:1;grid-row:1;min-width:0;min-height:44px;gap:0;font-size:12px;line-height:1.4;color:#e0f1fbcc}
 .system-footer>.item-navigation button{display:none}
 .system-footer>.item-navigation span{min-width:0;text-align:left;white-space:nowrap}
 .system-footer>.controls{grid-column:2;grid-row:1;gap:0}
 .controls>span{display:none}
 #index-open{min-height:44px;gap:8px;padding:0 12px;border:1px solid #ffffff55;border-radius:7px;background:#ffffff0a;font-size:12px;white-space:nowrap}
 #index-open:hover{background:#ffffff18}
 #index-open .square{display:none}
 #index-open .mobile-index-icon{display:block;width:14px;height:14px}
 .system-footer>.credits-link{grid-column:3;grid-row:1;min-height:44px;padding:0 5px;font-size:12px;opacity:.8;white-space:nowrap}
 .item-window{bottom:calc(84px + env(safe-area-inset-bottom))}
 .reader{bottom:calc(76px + env(safe-area-inset-bottom))}
 .welcome-active:not(.detail-open) .preview{bottom:calc(76px + env(safe-area-inset-bottom))}
 .back-button kbd{display:none}
}