/* finesse · localized video-frame sculpture · original yellow/purple layout retained */
:root{--lab-lilac:#f1ecff;--lab-violet:#7350dd;--lab-deep:#43259c;--lab-face:#6842ce;--lab-line:rgba(89,55,185,.15);--lab-light:rgba(255,255,255,.65);--lab-shade:rgba(62,35,129,.15);--ribbon-purple:rgba(89,55,185,.045);--ribbon-yellow:rgba(235,204,34,.09)}
/* Replace the old dot field and rings with quiet diagonal folds at the edges. */
body::before{background-image:linear-gradient(126deg,transparent 36%,var(--ribbon-purple) 36%,var(--ribbon-purple) 41%,transparent 41%),linear-gradient(126deg,transparent 49%,var(--ribbon-yellow) 49%,var(--ribbon-yellow) 53%,transparent 53%);background-size:360px 760px,330px 680px;background-position:left -170px top 10%,right -150px top 70%;background-repeat:no-repeat;mask-image:none;-webkit-mask-image:none;opacity:1}
body::after{display:none;animation:none!important}
.frame-lab{position:relative;min-width:0;width:100%;min-height:405px;isolation:isolate;border-radius:26px;background:linear-gradient(145deg,var(--surface),var(--lab-lilac));border:1px solid var(--lab-line);box-shadow:0 20px 55px -30px var(--lab-shade);overflow:hidden}
.lab-header{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:21px 24px 0;font-size:12px}.lab-header strong{color:var(--ink);font-weight:700}.lab-header span{color:var(--muted);font-size:11px;letter-spacing:.04em}
.lab-viewport{position:relative;height:290px;perspective:850px;overflow:hidden}
.sculpture{position:absolute;left:50%;top:50%;width:420px;height:290px;transform:translate(-50%,-50%) scale(var(--scene-scale,1));transform-style:preserve-3d}
.float-rig,.frame-rig{position:absolute;inset:0;transform-style:preserve-3d}.frame-rig{transform:rotateX(var(--rx,8deg)) rotateY(var(--ry,-12deg));transition:transform .25s ease-out}
.video-sheet{position:absolute;left:157px;top:57px;width:106px;height:166px;transform-style:preserve-3d;transform:translate3d(calc(var(--i)*34px),calc(var(--distance)*10px),calc(var(--distance)*-22px)) rotateZ(calc(var(--i)*9deg));transition:transform .75s cubic-bezier(.22,.75,.2,1),opacity .5s}
.sheet-face{position:absolute;inset:0;border:1px solid var(--lab-light);border-radius:13px;background:linear-gradient(155deg,var(--lab-violet),var(--lab-deep));box-shadow:2px 3px 0 var(--lab-deep),10px 15px 25px -10px var(--lab-shade);overflow:hidden;color:var(--on-dark)}
.video-sheet:nth-child(even) .sheet-face{background:linear-gradient(150deg,var(--lab-lilac),var(--surface));color:var(--action);box-shadow:2px 3px 0 var(--lab-violet),10px 15px 25px -10px var(--lab-shade);border-color:var(--lab-light)}
.sheet-face::before{content:"";position:absolute;left:10px;right:10px;top:12px;height:3px;background:currentColor;opacity:.25;border-radius:4px;box-shadow:0 130px 0 currentColor}
.sheet-no{position:absolute;left:12px;top:22px;font-size:10px;font-weight:700;opacity:.7}
.sheet-symbol{position:absolute;inset:0;display:grid;place-items:center;font-size:23px;font-weight:700;letter-spacing:-.06em;line-height:1}
.sheet-bars{position:absolute;bottom:27px;left:14px;right:14px;height:15px;display:flex;align-items:flex-end;gap:4px}.sheet-bars i{flex:1;background:currentColor;border-radius:2px;opacity:.3;height:var(--h)}
.video-sheet[data-core] .sheet-face{background:var(--yellow);color:var(--ink);border-color:var(--yellow-hover);box-shadow:3px 4px 0 var(--yellow-hover),14px 20px 30px -12px var(--lab-shade)}
.video-sheet[data-core] .sheet-symbol{font-size:34px;letter-spacing:-.1em}
.lab-floor{position:absolute;left:50%;bottom:23px;width:230px;height:26px;transform:translateX(-50%);border-radius:50%;background:var(--lab-shade);filter:blur(14px);opacity:.5;pointer-events:none}
.lab-ribbon{position:absolute;top:58px;left:-28px;width:150%;height:130px;border-top:1px solid var(--lab-line);border-bottom:1px solid var(--lab-line);transform:rotate(-28deg);background:linear-gradient(90deg,transparent,var(--lab-light),transparent);z-index:-1;pointer-events:none}
.lab-ribbon::after{content:"";position:absolute;top:-2px;left:10%;width:55px;height:3px;border-radius:4px;background:var(--yellow)}
.lab-controls{display:flex;justify-content:center;gap:7px;padding:0 24px;position:relative;z-index:3}.lab-controls button{flex:1;max-width:114px;min-height:44px;padding:8px 12px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--muted);font-size:13px;cursor:pointer;transition:background .2s,transform .2s,color .2s}.lab-controls button[aria-pressed=true]{background:var(--action);color:var(--on-dark);box-shadow:0 4px 12px var(--lab-shade)}.lab-controls button:hover{border-color:var(--lab-line)}.lab-controls button:active{transform:scale(.96)}
.frame-lab .lab-hint{font-size:11px;color:var(--muted);text-align:center;margin:12px 18px 18px;min-height:20px;line-height:1.7}.lab-touch-hint{display:none}
@keyframes frame-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes ribbon-pulse{0%{transform:translateX(0);opacity:0}15%,85%{opacity:1}100%{transform:translateX(450px);opacity:0}}
@keyframes orbit-sway{0%,100%{transform:rotateZ(-3deg)}50%{transform:rotateZ(3deg)}}
@media(prefers-reduced-motion:no-preference){html[data-motion=on] .float-rig{animation:frame-float 6s ease-in-out infinite}html[data-motion=on] .lab-ribbon::after{animation:ribbon-pulse 7s ease-in-out infinite}html[data-motion=on] .frame-lab{animation:panel-arrive .7s cubic-bezier(.22,.75,.2,1) both}.category-open,.text-link>span{transition:transform .2s}}
html[data-page-hidden=true] .float-rig,html[data-page-hidden=true] .lab-ribbon::after,.frame-lab[data-visible=false] .float-rig,.frame-lab[data-visible=false] .lab-ribbon::after{animation-play-state:paused!important}
@media(prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){.category-tile:hover .category-open,.text-link:hover>span{transform:translateX(4px)}.btn:hover{box-shadow:0 5px 0 var(--cover-line)}.topic-tile:hover,.category-tile:hover{border-color:var(--action)}.zoom-link img{transition:transform .3s ease-out}.zoom-link:hover img{transform:scale(1.018)}}
@media(min-width:769px) and (max-width:1100px){.sculpture{--scene-scale:.8}.lab-header{padding-left:18px;padding-right:18px}.lab-header span{font-size:10px}}
@media(max-width:768px){.frame-lab{max-width:520px;margin:auto}body::before{background-size:200px 560px,180px 520px;background-position:left -140px top 10%,right -125px top 70%;opacity:.7}}
@media(max-width:480px){.frame-lab{min-height:365px;border-radius:20px}.lab-header{padding:19px 18px 0}.lab-viewport{height:250px}.sculpture{--scene-scale:.76}.lab-controls{padding:0 18px}.lab-hint{margin-bottom:15px}.lab-desktop-hint{display:none}.lab-touch-hint{display:inline}}
@media(max-width:350px){.sculpture{--scene-scale:.68}.lab-header{font-size:11px}.lab-header span{font-size:10px}}
@media(prefers-reduced-motion:reduce){.frame-rig{transform:rotateX(8deg) rotateY(-12deg)!important}.float-rig{transform:none!important}}
@media(prefers-contrast:more){body::before,.lab-ribbon{display:none}.sheet-face{border:2px solid var(--action)}}
@media print{body::before,.frame-lab{display:none}}