/* Framed-panel trial (dev only). */
/* small framed panels: hard edge, black outline, thin light keyline so the frame reads on cream and on black */
.panel.vcx-frame .art>img.media,.panel.vcx-frame .art>video.media{-webkit-mask-image:none!important;mask-image:none!important}
.panel.vcx-frame .art{box-shadow:0 0 0 2.5px #0d0b0a,0 0 0 4px #efe7d8,0 0 0 6px #0d0b0a!important}
/* pop-ups that overlap the panel below sit on top of it */
.panel.vcx-frame{z-index:6}
/* rubbed-out edges: an irregular brush-blot mask, so the art dissolves into the field in clumps, not a straight line */
.panel.vcx-rub .art{background:transparent;overflow:visible}
.panel.vcx-rub .art>img.media,.panel.vcx-rub .art>video.media{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' preserveAspectRatio='none'%3E%3Cfilter id='r' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.045' numOctaves='2' seed='11'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='26'/%3E%3C/filter%3E%3Crect x='10' y='10' width='180' height='100' rx='6' fill='black' filter='url(%23r)'/%3E%3C/svg%3E")!important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' preserveAspectRatio='none'%3E%3Cfilter id='r' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.045' numOctaves='2' seed='11'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='26'/%3E%3C/filter%3E%3Crect x='10' y='10' width='180' height='100' rx='6' fill='black' filter='url(%23r)'/%3E%3C/svg%3E")!important;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.panel.vcx-masked .art::after,.panel.vcx-masked .art::before{display:none}   /* rectangular sweeps would draw a box over the mask */
.panel .art>canvas.vcx-packed{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
.panel.vcx-clean .art>img.media,.panel.vcx-clean .art>video.media{-webkit-mask-image:none!important;mask-image:none!important}
.panel.vcx-clean .art{box-shadow:none!important}
/* site background: always white outside the column (user, 23 Oct 2026), like a WEBTOON page; the scene colour stays inside it */
body[data-series=vibe-coder] .ambient{display:none!important}
html:has(body[data-series=vibe-coder]),body[data-series=vibe-coder]{background:#fff!important}
/* long full fades with directional light lines: the dark melts down into the next scene's colour through vertical streaks */
.gutter.vcx-streak{background:var(--sbg) center/100% 100% no-repeat!important;overflow:hidden}
.gutter.vcx-streak>*{position:relative;z-index:1}
/* the column itself stays plain, so panels sit on the scene colour */
#vc-field{z-index:1}
body[data-series=vibe-coder] .strip{position:relative;z-index:2}
.panel .art>img.vcx-frameimg{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
/* gaps whose SFX cross a join stay in front of both neighbours (the series script's raise-on-new-text counter can't override) */
.vcx-overlay{position:absolute;z-index:2147480000;pointer-events:none;container-type:inline-size}
/* the whole class chanting: a big jeer that owns the join */
.tag.vc-jag.vcx-jag-xl{font-size:clamp(30px,9.5cqw,46px);padding:22px 26px;letter-spacing:.01em}
/* a small, deflating sound: grey, thin, slightly dropped (Ren's dead stone) */
.tag.vcx-tap{font:400 clamp(26px,8cqw,40px)/1 Bangers,Impact,sans-serif;color:#9a9a9a;-webkit-text-stroke:1.5px #1a1512;paint-order:stroke fill;transform:rotate(8deg);z-index:9;width:auto!important}
/* animated swap: the next moment fades in inside the same frame */
.tag.vcx-swap{display:block;opacity:0!important;pointer-events:none}
.panel .art>img.vcx-next{opacity:0;transition:opacity .45s ease}
.panel .art>img.vcx-next.on{opacity:1}
.panel.vcx-frame.vcx-swapping .art{animation:vcxShake .3s steps(3) 1}
@keyframes vcxShake{0%{transform:translate(-3px,1px)}50%{transform:translate(3px,-1px)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.panel .art>img.vcx-next{transition:none}.panel.vcx-frame.vcx-swapping .art{animation:none}}