/* Real project material presented as a small, quiet screening gallery. */
#recordings.project-gallery{position:relative;isolation:isolate;padding:62px 0 68px;overflow:hidden;background:radial-gradient(ellipse at 70% 45%,#58452b12,transparent 65%),#11110f}
.project-gallery .section-top{align-items:end;margin-bottom:27px}
.project-gallery .section-top p{font-size:13px;line-height:1.8;max-width:25em;text-align:right}
.project-gallery .section-top h2{display:flex;align-items:center;gap:20px}
.project-gallery .section-top h2::after{content:"✦";font:20px/1 serif;color:#e8c68b;filter:drop-shadow(0 0 8px #dcb77470);animation:star-twinkle 7s ease-in-out infinite;animation-delay:-3s}
.portfolio-tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-bottom:24px;border-bottom:1px solid #b99a663b}
.portfolio-tab{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;min-width:0;min-height:76px;padding:12px 8px 17px;border:0;border-bottom:2px solid transparent;background:none;color:#a69d8e;font:inherit;font-size:15px;cursor:pointer;transition:color .2s,background-color .2s,border-color .2s}
.portfolio-tab img{width:38px;height:38px;object-fit:contain;filter:saturate(.8);transition:filter .2s,transform .2s}
.portfolio-tab[aria-selected=true]{color:#f0d8ae;border-bottom-color:#d8b983;background:linear-gradient(0deg,#d9bf950d,transparent)}
.portfolio-tab[aria-selected=true] img{filter:none;transform:translateY(-2px)}
.portfolio-tab:hover{color:#f0d8ae;background-color:#d9bf9506}
.portfolio-tab:focus-visible{outline:2px solid #dfc08a;outline-offset:-4px}
.portfolio-panel{position:relative;isolation:isolate;display:grid;grid-template-columns:44% 56%;min-height:552px;border:1px solid #b99a6652;background:#191813;box-shadow:0 18px 55px #0003}
.portfolio-panel[hidden]{display:none}
.portfolio-panel::before{content:"";position:absolute;inset:7px;z-index:3;pointer-events:none;border:1px solid #d9bf9512}
.portfolio-panel::after{content:"";position:absolute;right:11%;bottom:17px;left:45%;height:1px;background:linear-gradient(90deg,transparent,#d9bf9545,transparent)}
.showroom-copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:43px 0 44px 49px;min-width:0}
.showroom-service{display:flex;align-items:center;gap:10px;margin:0 0 21px;color:#c9ae7f;font-size:13px;letter-spacing:.07em}
.showroom-service::before{content:"";width:22px;height:1px;background:#c9ae7f}
.showroom-copy h3{margin:0 0 24px;color:#f0dfc5;font-family:"SimSun","Songti SC",serif;font-size:clamp(36px,3.7vw,55px);font-weight:400;letter-spacing:.055em;line-height:1.3}
.showroom-description{max-width:26em;margin:0;color:#c0b7a7;font-size:14px;line-height:1.95}
.showroom-detail{margin:21px 0 27px;padding-left:13px;border-left:1px solid #aa8951;color:#d6bd96;font-size:12px;line-height:1.9}
.showroom-copy .action-link{font-size:14px;min-height:47px;padding:9px 19px;gap:17px}
.showroom-hosts{display:flex;align-items:center;flex-wrap:wrap;gap:6px 13px;margin-top:29px;font-size:12px;color:#aa9d88}
.showroom-hosts>span{margin-right:5px;color:#8d8477}
.showroom-hosts a{padding:3px 0;border-bottom:1px solid #b99a6640;color:#c4b393;transition:color .2s,border-color .2s}
.showroom-hosts a:hover{color:#f0d8ae;border-color:#e0bf87}
.showroom-visual{position:relative;min-width:0;min-height:550px;overflow:hidden;background:radial-gradient(ellipse at 65% 40%,var(--case-glow,#61764b28),transparent 72%)}
.showroom-scene{position:absolute;inset:0;z-index:-1;overflow:hidden;opacity:.1;mask-image:linear-gradient(90deg,transparent,black 32%,black 75%,transparent)}
.showroom-scene img{width:100%;height:100%;object-fit:cover;filter:blur(11px) saturate(.7);transform:scale(1.12)}
.showroom-orbit{position:absolute;width:490px;height:490px;left:50%;top:50%;border:1px solid #c8a36512;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}
.showroom-orbit::after{content:"";position:absolute;inset:24px;border:1px solid #c8a3650b;border-radius:50%}
.showroom-shot{position:absolute;display:block;padding:7px;border:1px solid #af926355;background:linear-gradient(145deg,#6f5b3d,#302a20 18%,#29251d 80%,#a68a5b);box-shadow:0 20px 35px #0007,0 0 0 1px #0c0b08,inset 0 1px #f4ddad66;color:#e9d8bb;text-align:left;cursor:pointer;transition:transform .35s,border-color .35s,box-shadow .35s}
.showroom-shot-main{width:calc(434px * var(--shot-ratio));max-width:46%;right:9%;top:30px;z-index:2;transform:rotate(2deg)}
.showroom-shot-secondary{width:34%;max-width:245px;left:23%;bottom:64px;z-index:1;transform:rotate(-5deg)}
.showroom-shot-cap{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:31px;padding:0 5px 5px;font-size:10px;line-height:1.5;letter-spacing:.04em;color:#e0cba5}
.showroom-shot-cap b{font-size:13px;font-weight:400;color:#eed7ae}
.showroom-window{position:relative;display:block;width:100%;aspect-ratio:var(--shot-ratio);overflow:hidden;background:#10100e}
.showroom-window img{position:absolute;display:block;left:0;top:var(--shot-shift,0%);width:100%;height:auto;max-width:none;filter:none}
.showroom-shot:focus-visible{outline:2px solid #f0d2a1;outline-offset:6px}
.showroom-shot:hover{border-color:#e8cd97;box-shadow:0 24px 45px #0009,0 0 22px #b99a6615;transform:translateY(-5px) rotate(0deg)}
.showroom-shine{position:absolute;z-index:3;top:20px;right:8%;width:12px;height:12px;color:#f9e6bf;filter:drop-shadow(0 0 7px #e6c89188);pointer-events:none}
.showroom-shine::before,.showroom-shine::after{content:"";position:absolute;background:currentColor;inset:0 5.5px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.showroom-shine::after{transform:rotate(90deg)}
.portfolio-panel.is-entering .showroom-copy{animation:case-copy-in .35s ease-out both}
.portfolio-panel.is-entering .showroom-visual{animation:case-picture-in .45s ease-out both}
@keyframes case-copy-in{from{opacity:0;transform:translateX(-9px)}to{opacity:1;transform:none}}
@keyframes case-picture-in{from{opacity:.3;transform:translateY(8px)}to{opacity:1;transform:none}}

/* A crop belongs to the presentation frame. Original media stays available. */
.host-projects .evidence-frame{--media-limit:680px;position:relative;width:min(100%,calc(var(--media-limit) * var(--visible-ratio)));max-width:100%;margin-inline:auto;padding:7px;border:1px solid #b899625e;background:linear-gradient(145deg,#53452f,#242018 23%,#201d17 80%,#7a6543);box-shadow:0 13px 30px #0004,inset 0 1px #f0d3a130}
.evidence-frame-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:31px;padding:0 5px 5px;color:#bfa780;font-size:10px;letter-spacing:.05em;line-height:1.6}
.evidence-frame-head>span:first-child{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.evidence-frame-head>span:last-child{display:flex;align-items:center;gap:5px;flex-shrink:0;color:#d7c198}
.evidence-frame-head i{font-style:normal;font-size:12px;color:#e8cea3}
.host-projects .evidence-frame .project-photo,.host-projects .evidence-frame .recording-player{display:block;position:relative;width:100%;height:auto;aspect-ratio:var(--visible-ratio);overflow:hidden;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:#090a0b}
.host-projects .evidence-frame .project-photo img,.host-projects .evidence-frame .project-video{position:absolute;display:block;left:0;top:var(--media-shift);width:100%;height:auto!important;max-height:none!important;aspect-ratio:var(--source-ratio);margin:0;object-fit:contain;border:0;border-radius:0;box-shadow:none}
.host-projects .evidence-frame .recording-start{border-radius:0}
.host-projects .evidence-frame .project-video:fullscreen{position:static;top:0;max-height:100vh!important;height:100%!important;aspect-ratio:auto;object-fit:contain}
#xixi-projects .project-media-grid{grid-template-columns:repeat(2,minmax(0,390px));justify-content:center;gap:32px;padding:27px 32px 30px;border:1px solid #b99a663b;background:linear-gradient(125deg,#25201775,#151410)}
.host-projects .project-caption{font-size:14px;color:#d2bd99}
.host-projects .project-caption span{font-size:11px;color:#9b907e}

/* Sparse points of light, paused outside the viewport. */
.has-starlight{position:relative;isolation:isolate}
.star-dust{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;user-select:none}
.star-bead{position:absolute;left:var(--sx);top:var(--sy);width:var(--ss);height:var(--ss);border-radius:50%;background:#f4dbaa;color:#f8e2ba;box-shadow:0 0 7px #eed0a354;opacity:.12;animation:star-twinkle var(--sd) ease-in-out infinite;animation-delay:var(--sdelay);animation-play-state:paused}
.stars-awake .star-bead{animation-play-state:running}
.stars-paused .star-bead{animation-play-state:paused!important}
.stars-paused .project-gallery .section-top h2::after{animation-play-state:paused}
#recordings:not(.stars-awake) .section-top h2::after{animation-play-state:paused}
.star-bead.is-glint{border-radius:0;background:none;box-shadow:none}
.star-bead.is-glint::before,.star-bead.is-glint::after{content:"";position:absolute;inset:0 45%;background:currentColor;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);filter:drop-shadow(0 0 4px #edcd9290)}
.star-bead.is-glint::after{transform:rotate(90deg)}
.has-starlight>.wrap{position:relative;z-index:1}
@keyframes star-twinkle{0%,32%,100%{opacity:.08;transform:scale(.65)}50%{opacity:.7;transform:scale(1.13)}68%{opacity:.15;transform:scale(.8)}}
@media(max-width:1100px){
 .portfolio-tab{gap:8px;font-size:13px}.portfolio-tab img{width:32px;height:32px}.showroom-copy{padding-left:33px;padding-right:12px}.showroom-description{font-size:13px}.showroom-copy h3{font-size:43px}.showroom-shot-main{right:8%;max-width:49%}.showroom-shot-secondary{left:14%;width:32%}.showroom-detail{font-size:11px}
}
@media(max-width:760px){
 #recordings.project-gallery{padding:38px 0 41px}.project-gallery .section-top{display:block;margin-bottom:18px}.project-gallery .section-top p{text-align:left;margin-top:9px;font-size:12px}.portfolio-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 6px;margin-bottom:18px}.portfolio-tab{gap:7px;min-height:65px;padding:8px 3px;font-size:12px}.portfolio-tab img{width:30px;height:30px}.portfolio-panel{display:flex;flex-direction:column;min-height:0}.portfolio-panel::after{left:16%;right:16%}.showroom-copy{padding:30px 25px 12px}.showroom-service{font-size:11px;margin-bottom:16px;letter-spacing:.03em}.showroom-copy h3{font-size:37px;margin-bottom:15px}.showroom-description{font-size:13px;line-height:1.9;max-width:none}.showroom-detail{margin:16px 0 20px;font-size:11px}.showroom-copy .action-link{min-height:45px;font-size:12px;padding:8px 15px}.showroom-hosts{margin-top:18px;font-size:11px;gap:5px 11px}.showroom-visual{min-height:469px;margin-top:5px}.showroom-shot-main{width:calc(375px * var(--shot-ratio));max-width:55%;right:5%;top:25px}.showroom-shot-secondary{left:4%;width:34%;max-width:145px;bottom:32px}.showroom-shot{padding:5px}.showroom-shot-cap{min-height:27px;padding:0 3px 4px;font-size:9px;letter-spacing:0}.showroom-orbit{width:340px;height:340px}.showroom-shine{right:4%;top:17px;width:10px;height:10px}.showroom-shine::before,.showroom-shine::after{inset:0 4.5px}.host-projects .evidence-frame{--media-limit:68svh;padding:6px}.evidence-frame-head{min-height:28px;font-size:9px;padding-inline:3px}#xixi-projects .project-media-grid{grid-template-columns:minmax(0,1fr);gap:27px;padding:19px 15px 21px}.star-bead:nth-child(n+12){display:none}
}
@media(min-width:761px){#portfolio-sudoku-panel .showroom-shot-secondary{width:37%;max-width:250px;left:22%;bottom:82px}}
@media(prefers-reduced-motion:reduce){
 .portfolio-tab,.portfolio-tab img,.showroom-shot,.showroom-hosts a{transition:none}.portfolio-panel.is-entering .showroom-copy,.portfolio-panel.is-entering .showroom-visual{animation:none}.star-bead{animation:none!important;opacity:.2}.star-bead:nth-child(n+7){display:none}.showroom-shot:hover{transform:none}
 .project-gallery .section-top h2::after{animation:none;opacity:.7}
}
@media(max-width:760px){
 .showroom-visual{order:0;min-height:441px;margin-top:0}
 .showroom-copy{order:1;padding:13px 25px 31px}
 .showroom-shot-main{top:23px}
 .showroom-shot-secondary{left:5%;width:36%;max-width:150px;bottom:25px}
}