.studio-monitor{position:relative}.studio-monitor-canvas{-webkit-mask-image:linear-gradient(90deg,#0000,#000 5% 95%,#0000),linear-gradient(#0000,#000 4% 94%,#0000);mask-image:linear-gradient(90deg,#0000,#000 5% 95%,#0000),linear-gradient(#0000,#000 4% 94%,#0000);-webkit-mask-composite:source-in;mask-composite:intersect}.studio-monitor-remote{z-index:2;pointer-events:none;position:absolute;inset:0}.studio-remote-key{pointer-events:auto;cursor:pointer;background:0 0;border:0;border-radius:3px;padding:0;position:absolute}.studio-monitor[data-ready=true] .studio-remote-key>span{visibility:hidden}.studio-remote-key:focus-visible{outline:2px solid var(--ring);outline-offset:3px;background:#f5f1ea26}.studio-remote-key:hover{background:#f5f1ea1a}.studio-remote-key:disabled{cursor:default}.studio-monitor-screen-target{z-index:1;cursor:zoom-in;background:0 0;border:0;place-items:center;padding:0;display:grid;position:absolute}.studio-monitor-screen-target>span{color:var(--studio-cream);font:11px var(--font-hero);text-transform:uppercase;opacity:0;pointer-events:none;background:#0a0a0ac7;border-radius:99px;align-items:center;gap:8px;padding:12px 16px;transition:opacity .14s;display:inline-flex}.studio-monitor-screen-target:hover>span,.studio-monitor-screen-target:focus-visible>span{opacity:1}.studio-monitor-screen-target:focus-visible{outline:2px solid var(--ring);outline-offset:3px}.studio-monitor-look-closer{background:var(--page-ink);min-height:44px;color:var(--studio-cream);font:11px var(--font-hero);text-transform:uppercase;border-radius:99px;align-items:center;gap:8px;padding:0 16px;display:inline-flex;position:absolute;bottom:12px;right:12px}.studio-monitor-look-closer:focus-visible{outline:2px solid var(--ring);outline-offset:3px}.studio-monitor-fallback img{object-fit:contain;width:100%;max-height:80%}.studio-monitor[data-ready=false] .studio-monitor-remote{background:var(--page-ink);border-radius:12px;grid-template-columns:repeat(3,1fr);gap:6px;width:112px;min-height:180px;padding:12px;display:grid;inset:auto 5% 12% auto;transform:rotate(-10deg)}.studio-monitor[data-ready=false] .studio-remote-key{min-height:24px;font:10px var(--font-sans);color:var(--studio-cream);background:#f5f1ea1f;place-items:center;display:grid;position:static}.studio-monitor[data-ready=false] .studio-remote-key[data-key=power]{background:var(--studio-red);color:var(--studio-black);grid-column:3}.studio-monitor[data-ready=false] .studio-remote-key[data-key=next],.studio-monitor[data-ready=false] .studio-remote-key[data-key=previous]{grid-column:span 1}.studio-monitor[data-ready=false] .studio-monitor-screen-target{inset:12% 25% 20% 15%}.studio-monitor-viewer{width:100%;max-width:none;height:100dvh;max-height:none;padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));background:var(--studio-black);color:var(--studio-cream);border:0;margin:0;position:fixed;inset:0}.studio-monitor-viewer[open]{flex-direction:column;gap:24px;display:flex}.studio-monitor-viewer::backdrop{background:var(--studio-black)}.studio-monitor-viewer header{justify-content:space-between;align-items:center;gap:20px;display:flex}.studio-monitor-viewer header p{font-family:var(--font-sans)}.studio-monitor-viewer-keys{flex:none;gap:12px;display:flex}.studio-monitor-viewer header span{color:var(--studio-dark-muted);font:11px var(--font-mono);margin-left:16px}.studio-monitor-viewer button{width:44px;height:44px;color:var(--studio-cream);background:#f5f1ea1f;border-radius:8px;flex:none;place-items:center;display:grid}.studio-monitor-viewer button:disabled{opacity:.4}.studio-monitor-viewer button:focus-visible{outline:2px solid var(--studio-cream);outline-offset:3px}.studio-monitor-viewer-content{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:24px;min-height:0;display:flex}.studio-monitor-viewer-content img{object-fit:contain;width:100%;max-height:calc(100% - 70px)}.studio-monitor-viewer-content h2{max-width:32ch;font:500 clamp(22px,3vw,42px)/1.3 var(--font-sans);text-align:center}.studio-monitor-viewer nav{justify-content:center;align-items:center;gap:24px;display:flex}.studio-monitor-viewer nav p{text-align:center;max-width:50ch;font-size:13px}@media (min-width:1000px) and (hover:hover){.studio-monitor-look-closer{clip-path:inset(50%)}.studio-monitor-look-closer:focus-visible{clip-path:none}}@media (max-width:999px){.studio-monitor[data-case-study=true] .studio-monitor-remote{display:none}}@media (prefers-reduced-motion:reduce){.studio-monitor-screen-target>span{transition:none}}