.cloud-viewer { position: relative; display: flex; flex-direction: column; gap: 14px; width: 100%; height: auto; aspect-ratio: auto; overflow: visible; background: transparent; color: #FFFFFF; isolation: isolate; container-type: inline-size; }
.cloud-viewer.is-starting > *:not(.cv-layer),
.cloud-viewer.is-live > *:not(.cv-layer) { display: none; }
.cloud-viewer > img { width: 100%; height: clamp(380px, 58vh, 660px); object-fit: cover; display: block; border-radius: 12px; }
.cv-stage { position: relative; order: 1; width: 100%; height: clamp(380px, 58vh, 660px); border-radius: 12px; overflow: hidden; background: linear-gradient(180deg, #0B0E13 0%, #11161F 100%); }
.cv-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: transparent; cursor: grab; touch-action: pan-y; outline: none; opacity: 0; transition: opacity 420ms ease; }
.cv-canvas.is-armed { touch-action: none; }
.cloud-viewer.is-live .cv-canvas { opacity: 1; }
.cv-canvas.is-dragging { cursor: grabbing; }
.cv-canvas:focus-visible { outline: 2px solid #1F5FE6; outline-offset: -2px; }
.cv-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; opacity: 1; transition: opacity 420ms ease; }
.cloud-viewer.is-live .cv-poster { opacity: 0; }
.cv-stage.is-armed { outline: 2px solid #1F5FE6; outline-offset: -2px; }
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .cv-stage.is-armed { outline: none; }
  .cv-stage.is-armed::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: 12px; padding: 2px; background: linear-gradient(90deg, #19D3F3 0%, #1F5FE6 34%, #7A5BF0 68%, #F35B9B 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; }
}
.cv-done { position: absolute; top: 12px; right: 12px; z-index: 5; appearance: none; -webkit-appearance: none; min-height: 44px; min-width: 88px; padding: 0 20px; border: 1px solid rgba(232, 238, 247, 0.28); border-radius: 50px; background: rgba(11, 14, 19, 0.82); color: #FFFFFF; font-family: Manrope, "Segoe UI", Arial, sans-serif; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.cv-done:hover { border-color: #1F5FE6; }
.cv-done:focus-visible { outline: 2px solid #19D3F3; outline-offset: 2px; }
.cv-done[hidden] { display: none; }
.cv-loading { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 7px; font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #C9D3E0; pointer-events: none; }
.cv-bar { height: 3px; border-radius: 3px; background: rgba(232, 238, 247, 0.22); overflow: hidden; }
.cv-bar > i { display: block; width: 0; height: 100%; background: #1F5FE6; transition: width 180ms linear; }
.cloud-viewer.is-live .cv-loading { display: none; }
.cv-ui { position: static; order: 2; inset: auto; display: flex; flex-direction: column; gap: 10px; font-family: Manrope, "Segoe UI", Arial, sans-serif; }
.cv-ui > * { pointer-events: auto; }
.cv-caption { position: static; order: 2; max-width: none; font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #9AA6B6; pointer-events: none; }
.cv-panel { position: static; order: 1; display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap; gap: 10px 14px; }
.cv-modes { flex: none; display: flex; border: 1px solid rgba(232, 238, 247, 0.28); border-radius: 50px; overflow: hidden; background: rgba(11, 14, 19, 0.72); }
.cv-mode { appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: #C9D3E0; font: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; padding: 9px 15px; cursor: pointer; }
.cv-mode + .cv-mode { border-left: 1px solid rgba(232, 238, 247, 0.18); }
.cv-mode[aria-pressed="true"] { background: #1F5FE6; color: #FFFFFF; }
.cv-mode[disabled] { opacity: 0.38; cursor: not-allowed; }
.cv-mode:focus-visible { outline: 2px solid #19D3F3; outline-offset: -2px; }
.cv-row { flex: 1 1 210px; max-width: 320px; display: flex; align-items: center; gap: 10px; background: rgba(11, 14, 19, 0.72); border: 1px solid rgba(232, 238, 247, 0.28); border-radius: 50px; padding: 7px 14px; }
.cv-row label { flex: none; font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #C9D3E0; }
.cv-size { flex: 1 1 auto; width: auto; min-width: 96px; accent-color: #1F5FE6; background: transparent; }
.cv-size:focus-visible { outline: 2px solid #19D3F3; outline-offset: 3px; }
.cv-reset { flex: none; appearance: none; -webkit-appearance: none; border: 1px solid rgba(232, 238, 247, 0.28); border-radius: 50px; background: rgba(11, 14, 19, 0.72); color: #FFFFFF; font: inherit; font-size: 12.5px; font-weight: 600; padding: 9px 16px; cursor: pointer; }
.cv-reset:hover { border-color: #1F5FE6; }
.cv-reset:focus-visible { outline: 2px solid #19D3F3; outline-offset: 2px; }
@container (max-width: 600px) {
  .cv-panel { gap: 10px; }
  .cv-mode { padding: 9px 10px; }
  .cv-row { flex: 1 1 180px; padding: 7px 10px; }
  .cv-size { min-width: 60px; }
  .cv-reset { padding: 9px 12px; }
}
.cv-hint { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); max-width: calc(100% - 28px); box-sizing: border-box; text-align: center; background: rgba(11, 14, 19, 0.72); border: 1px solid rgba(232, 238, 247, 0.22); border-radius: 50px; padding: 7px 15px; font-size: 12.5px; font-weight: 600; color: #E8EEF7; white-space: nowrap; transition: opacity 500ms ease; pointer-events: none; }
.cv-hint.is-gone { opacity: 0; }
.cloud-viewer.is-armed .cv-hint { top: auto; bottom: 14px; white-space: normal; border-radius: 22px; }
@media (pointer: coarse) {
  .cv-mode { min-height: 44px; padding: 0 16px; }
  .cv-reset { min-height: 44px; }
  .cv-row { min-height: 44px; }
  .cv-size { height: 44px; }
}
@media (max-width: 767px),
       (min-width: 768px) and (max-width: 1279px) and (max-height: 827px) {
  .cloud-viewer { gap: 12px; padding-bottom: 4px; }
  .cloud-viewer > img { aspect-ratio: 1 / 1; height: auto; }
  .cv-stage { height: auto; aspect-ratio: 1 / 1; min-height: 340px; max-height: 70vh; }
  .cv-ui { gap: 12px; padding: 0 16px; }
  .cv-loading { left: 12px; right: 12px; bottom: 12px; font-size: 11px; }
  .cv-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
  .cv-modes { grid-column: 1 / -1; justify-content: space-between; }
  .cv-mode { flex: 1; text-align: center; min-height: 44px; padding: 0 12px; }
  .cv-row { grid-column: 1; max-width: none; justify-content: space-between; min-height: 44px; }
  .cv-reset { grid-column: 2; min-height: 44px; white-space: nowrap; }
  .cv-caption { font-size: 11px; letter-spacing: 0.08em; }
  .cv-hint { font-size: 11.5px; white-space: normal; border-radius: 22px; }
  .cv-done { top: 10px; right: 10px; min-width: 80px; padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .cv-hint { transition: none; }
  .cv-canvas, .cv-poster { transition: none; }
  .cv-bar > i { transition: none; }
}