/* Adapted from user-supplied React Bits: LatticeLoader, DotField, BounceCards, SpotlightCard. */
#screen-anchor#screen-anchor .screen{isolation:isolate}
.crt-content{position:relative;height:100%;z-index:1;filter:url(#crt-tracking)}
.fx-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.dot-field{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
#screen-anchor#screen-anchor .screen::after{mask:none;opacity:.53;background:repeating-linear-gradient(0deg,#ffffff13 0 1px,transparent 1px 3px);animation:phosphor-drift 6.8s linear infinite}
@keyframes phosphor-drift{from{background-position:0 0}to{background-position:0 3px}}
#print-loading{display:flex;align-items:center;gap:13px;min-width:240px;padding:18px 21px;background:#090c10ed;border:1px solid #a3c8ef38;border-radius:13px;box-shadow:0 14px 60px #0004;color:#fff;bottom:139px;transition:opacity .65s,transform .65s;backdrop-filter:blur(16px)}
#print-loading[hidden]{display:none}#print-loading.is-complete{opacity:0;transform:translate(-50%,8px);pointer-events:none}
#print-loading .lattice-copy{display:flex;flex-direction:column;gap:5px}#print-loading strong{font:12px/1.2 Consolas,monospace;letter-spacing:1px}#print-loading small{font-size:10px;opacity:.55}
.lattice-loader{position:relative;width:28px;height:28px;flex-shrink:0}.lattice-run,.lattice-mark{display:grid;grid-template-columns:repeat(3,7px);grid-template-rows:repeat(3,7px);gap:3px;position:absolute;inset:0;transition:opacity .2s,transform .2s}
.lattice-loader i{border-radius:2px;background:#c6e5ff;opacity:.15;box-shadow:0 0 7px #7bbeff45}.lattice-run i{animation:lattice-wave .864s var(--delay) linear infinite}.lattice-run [data-hole]{animation:none;opacity:.04}
.lattice-mark{opacity:0;transform:scale(.85)}.lattice-mark [data-on]{opacity:1;background:#95cbff}.lattice-mark i:not([data-on]){opacity:0}
[data-status=done] .lattice-run{opacity:0}[data-status=done] .lattice-mark{opacity:1;transform:none}.lattice-timer{margin-left:auto;font:11px Consolas,monospace;color:#aab9c9;font-variant-numeric:tabular-nums}
#print-loading .loading-track{position:absolute;left:20px;right:20px;bottom:0;height:1px;margin:0;opacity:.45}
@keyframes lattice-wave{0%,62%,100%{opacity:.15}18%,42%{opacity:1}}
/* Fault means torn copies of the actual screen signal, not unrelated coloured rectangles. */
body.signal-damaged #screen-anchor .screen{animation:none;filter:none}
#impact-fx{background:none}#impact-fx.hit{animation:none}
.fault-slice{position:absolute;inset:0;background-size:100% 100%;background-repeat:no-repeat;animation:signal-tear .57s steps(1,end) both;filter:drop-shadow(3px 0 #67ccff) drop-shadow(-3px 0 #ff759c)}
.fault-slice:nth-child(2n){animation-delay:35ms;filter:sepia(.4) hue-rotate(155deg)}
@keyframes signal-tear{0%{opacity:.7;transform:translateX(var(--shift))}17%{opacity:.8;transform:translateX(calc(var(--shift)*-.55))}32%{opacity:.12;transform:translateX(0)}49%{opacity:.65;transform:translateX(calc(var(--shift)*.35))}65%{opacity:.3;transform:translateX(-3px)}82%,100%{opacity:0;transform:none}}
.fault-noise{position:absolute;inset:0;background:repeating-linear-gradient(0deg,#c3dbef33 0 1px,transparent 1px 5px);animation:signal-lock .58s steps(1,end) both}
@keyframes signal-lock{0%{opacity:.5;transform:translateY(-3%)}25%{opacity:.2;transform:translateY(2%)}50%{opacity:.1;transform:none}100%{opacity:0}}
/* SpotlightCard's tracked radial light, extended into a subtly lit border. */
#module,.profile-section,.info-grid>section{--mouse-x:50%;--mouse-y:50%;--spotlight-color:rgba(86,166,255,.16);position:relative;isolation:isolate;border:1px solid #ffffff23;border-radius:20px;overflow:hidden}
#module::before,.profile-section::before,.info-grid>section::before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mouse-x) var(--mouse-y),var(--spotlight-color),transparent 80%);opacity:0;transition:opacity .5s;pointer-events:none;z-index:0}
#module:hover::before,#module:focus-within::before,.profile-section:hover::before,.info-grid>section:hover::before{opacity:.9}
#module::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:radial-gradient(280px circle at var(--mouse-x) var(--mouse-y),#a8d5ffb0,transparent 80%);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none;z-index:3;opacity:.65}
#module>*,.profile-section>*,.info-grid>section>*{position:relative;z-index:1}
body.showcase-active #module{background:#10151bea;border-radius:20px;border-color:#ffffff25}#module .module-bar{background:#ffffff03}#module .module-description{color:#bdc6d2;line-height:1.85;max-width:65ch}
#screen-anchor .profile-section,#screen-anchor .info-grid>section{padding:20px;background:#ffffff03;margin-top:20px}
.photo-section{margin:23px 0 22px;border-block:1px solid #ffffff13;padding:17px 0 13px}
.photo-label{display:flex;justify-content:space-between;gap:12px;color:#a3b0c0;font:9px/1.5 Consolas,monospace;letter-spacing:1px}.photo-label span:last-child{letter-spacing:0;color:#697a8b}
.bounce-cards{position:relative;height:218px;display:flex;justify-content:center;align-items:center;margin:8px 32px 0}
.bounce-card{--push:0px;position:absolute;width:166px;aspect-ratio:1.15;border:3px solid #d4dde8;border-radius:15px;padding:0;background:#101720;overflow:hidden;box-shadow:0 12px 22px #0006;cursor:pointer;transform:translateX(calc(var(--offset) + var(--push))) rotate(var(--angle));transition:transform .48s cubic-bezier(.18,1.3,.4,1),box-shadow .3s;animation:card-bounce .85s calc(var(--n)*80ms) both;outline-offset:5px}
.bounce-card.is-active{transform:translateX(var(--offset)) translateY(-12px) rotate(0deg) scale(1.07);z-index:4;box-shadow:0 16px 40px #0009}
.bounce-card:focus-visible{outline:2px solid #7dc6ff}.bounce-card img{display:block;width:100%;height:100%;object-fit:cover}.photo-placeholder{display:flex;width:100%;height:100%;flex-direction:column;align-items:flex-start;padding:14px;box-sizing:border-box;text-align:left;color:#b6c5d6;background:radial-gradient(ellipse at 90% 5%,#42628155,transparent 65%),repeating-linear-gradient(0deg,transparent 0 23px,#ffffff06 23px 24px),#111923}
.photo-placeholder small{font:7px Consolas,monospace;letter-spacing:1px;opacity:.7}.photo-placeholder b{font:42px/1.1 Arial,sans-serif;margin:auto 0;color:#c4d7e9;letter-spacing:-3px}.photo-placeholder span{font-size:11px}.photo-placeholder em{font-style:normal;font-size:8px;color:#74879b;margin-top:4px}.photo-hint{text-align:center;font-size:10px;color:#8090a1;margin:0}
@keyframes card-bounce{0%{scale:0;opacity:0}48%{scale:1.13;opacity:1}68%{scale:.95}84%{scale:1.025}100%{scale:1;opacity:1}}
@media(max-width:759px){.bounce-cards{height:182px;margin-inline:24px}.bounce-card{width:128px;--offset-scale:.8;transform:translateX(calc(var(--offset)*.8 + var(--push)*.6)) rotate(var(--angle))}.bounce-card.is-active{transform:translateX(calc(var(--offset)*.8)) translateY(-7px) rotate(0deg)}.photo-label{font-size:8px}.photo-placeholder b{font-size:32px}.photo-placeholder{padding:10px}#print-loading{bottom:145px;min-width:210px}.photo-section{margin-block:17px}}
:root[data-motion="reduced"]{.crt-content{filter:none}.bounce-card,.lattice-run i,.fault-slice,.fault-noise,#screen-anchor#screen-anchor .screen::after{animation:none}.bounce-card{transition:none}#impact-fx{display:none}}
/* Keep project navigation visible below the overview fan at common laptop heights. */
.photo-overview{margin-block:15px;padding-block:12px}
.photo-overview .bounce-cards{height:156px}
.photo-overview .bounce-card{width:138px;border-width:2px;border-radius:12px}
.photo-overview .photo-placeholder{padding:10px}
.photo-overview .photo-placeholder b{font-size:34px}
/* The full console, including Start, should fit a 720px desktop viewport. */
@media(min-width:760px) and (max-height:800px){
 #screen-anchor#screen-anchor .topbar{height:78px}
 #screen-anchor#screen-anchor .console-layout{height:calc(100% - 78px);padding-top:14px;padding-bottom:22px}
 #screen-anchor#screen-anchor .eyebrow{margin-bottom:9px}
 #screen-anchor#screen-anchor h1{margin-bottom:10px}
 #screen-anchor#screen-anchor .identity-meta{margin-bottom:17px}
 #screen-anchor#screen-anchor .section-label{padding-top:11px;margin-bottom:9px}
 #screen-anchor#screen-anchor .skill{min-height:48px;padding-block:7px}
 #screen-anchor#screen-anchor .skill-note{padding-top:9px}
 #screen-anchor#screen-anchor .print-dock{margin-top:15px;gap:9px}
}

#print-loading .loading-track{width:auto}

/* Keep the glass shell clipped, but give its contents a bounded native scrollport. */
#module[open]{display:flex;flex-direction:column;overflow:hidden;min-height:0}
#module .module-bar{flex:0 0 auto;position:relative;z-index:4}
#module #module-body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;touch-action:pan-y;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#8b9bac70 transparent;-webkit-overflow-scrolling:touch;padding-bottom:36px}
#module #module-body:focus-visible{outline:1px solid #83cfff;outline-offset:-3px}
#module #module-body{overflow-anchor:none}