/* Jamyvo 1.8 camera. A 9:16 viewfinder (the finished picture), tools on the right,
   modes and shutter at the bottom, Camera · Templates · Masterclass · Live underneath. */
.studio-page.cam { display: flex; flex-direction: column; align-items: center; background: #000; color: #fff; user-select: none; -webkit-user-select: none; }
.cam-view { position: relative; flex: none; margin-top: var(--safe-t); width: min(100vw, calc((100dvh - var(--safe-t) - var(--safe-b) - 60px) * 0.5625)); aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: #0d0d0d; touch-action: none; }
#cam-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
#cam-canvas.flipped { transform: scaleX(-1); }
.cam #studio-camera { position: absolute; left: 0; top: 0; width: 2px; height: 2px; opacity: 0; pointer-events: none; }
.cam .studio-grid { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, transparent calc(33.33% - .5px), #fff5 calc(33.33% - .5px), #fff5 calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), #fff5 calc(66.66% - .5px), #fff5 calc(66.66% + .5px), transparent calc(66.66% + .5px)), linear-gradient(transparent calc(33.33% - .5px), #fff5 calc(33.33% - .5px), #fff5 calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), #fff5 calc(66.66% - .5px), #fff5 calc(66.66% + .5px), transparent calc(66.66% + .5px)); }
.cam .studio-grid[hidden] { display: none; }
.cam-view::before { content: ""; position: absolute; inset: 0 0 auto; height: 120px; z-index: 1; background: linear-gradient(#0007, #0000); pointer-events: none; }
.cam-view::after { content: ""; position: absolute; inset: auto 0 0; height: 260px; z-index: 1; background: linear-gradient(#0000, #0008); pointer-events: none; }

/* Top: close and sound. */
.cam-top { position: absolute; z-index: 6; top: 12px; left: 10px; right: 10px; height: 46px; display: flex; align-items: center; }
.cam-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: #fff; }
.cam-icon svg.i { width: 28px; height: 28px; stroke-width: 2.2; filter: drop-shadow(0 1px 4px #0008); }
.cam-sound { position: absolute; left: 50%; transform: translateX(-50%); max-width: 56%; height: 38px; display: inline-flex; align-items: center; gap: 7px; padding: 0 16px; border-radius: 19px; background: #0000006b; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-size: 14px; font-weight: 700; color: #fff; }
.cam-sound svg.i { width: 17px; height: 17px; flex: none; }
.cam-sound-title { overflow: hidden; white-space: nowrap; }
.cam-sound.has-sound .cam-sound-title { mask-image: linear-gradient(90deg, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); }
.cam-sound.has-sound .cam-sound-title span { display: inline-block; padding-right: 28px; animation: cap-marquee 8s linear 1s infinite; }

/* Right rail. Labels show when expanded. */
.cam-rail { position: absolute; z-index: 6; top: 66px; right: 6px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.cam-rail-extra { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.cam-rail-extra[hidden] { display: none; }
.cam-tool { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 46px; height: 46px; padding: 0 4px; color: #fff; }
.cam-tool svg.i { width: 29px; height: 29px; stroke-width: 1.9; filter: drop-shadow(0 1px 4px #0009); flex: none; }
.cam-tool small { display: none; font-size: 14px; font-weight: 700; text-shadow: 0 1px 4px #000c; white-space: nowrap; }
.cam-rail.expanded .cam-tool small { display: inline; }
.cam-rail.expanded, .cam-rail.expanded .cam-rail-extra { gap: 0; }
.cam-rail.expanded .cam-tool { height: 40px; }
.cam-rail.expanded .cam-tool svg.i { width: 26px; height: 26px; }
.cam-exposure { display: flex; align-items: center; gap: 8px; height: 40px; font-size: 13px; font-weight: 700; text-shadow: 0 1px 3px #000; }
.cam-exposure[hidden] { display: none; }
.cam-exposure input { width: 110px; accent-color: #ffd84d; }
.cam-tool[aria-pressed=true] svg.i, .cam-tool[aria-expanded=true] svg.i { color: #ffd84d; }
#camera-quality[aria-pressed=true] svg.i { color: #fff; }
#camera-quality[aria-pressed=false] svg.i { opacity: .55; }
.cam-tool:disabled { opacity: .4; }
.cam-badge { position: absolute; right: -2px; top: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 9px; font-weight: 800; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px #0006; }
.cam-badge[hidden] { display: none; }
.cam-rail.expanded .cam-badge { position: static; order: 2; margin-left: -4px; }
.cam-more { width: 46px; justify-content: center; }
.cam-more svg.i { width: 24px; height: 24px; stroke-width: 2.6; }
.studio-page[data-mode=photo] .video-only, .studio-page[data-mode=text] .video-only, .studio-page:not([data-mode=photo]) .photo-only { display: none; }
.studio-page[data-mode=text] .cam-rail { display: none; }

/* Panels above the modes: filters, retouch, speed, green screen, lenses. */
.cam-panel { position: absolute; z-index: 7; left: 8px; right: 8px; bottom: 182px; padding: 12px; border-radius: 18px; background: #0b0b0bcc; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid #ffffff1a; }
.cam-panel[hidden] { display: none; }
.cam-panel-status { display: block; margin-top: 8px; font-size: 12px; color: #ddd; text-align: center; }
.cam-panel-status:empty { display: none; }
.cam-looks { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.cam-looks::-webkit-scrollbar { display: none; }
.cam-looks button { flex: none; display: grid; justify-items: center; gap: 6px; width: 62px; font-size: 11px; font-weight: 600; color: #ddd; }
.cam-looks i { width: 54px; height: 54px; border-radius: 14px; border: 2px solid transparent; background: linear-gradient(135deg, #e7a07a 0 30%, #7fb0d8 30% 62%, #6aa36f 62%); }
.cam-looks button[aria-pressed=true] { color: #fff; }
.cam-looks button[aria-pressed=true] i { border-color: #fff; }
.cam-chips { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.cam-chip { min-width: 54px; height: 36px; padding: 0 14px; border-radius: 18px; background: #ffffff1c; color: #fff; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.cam-chip[aria-pressed=true] { background: #fff; color: #000; }
.cam-chip svg.i { width: 14px; height: 14px; }
.cam-slider { display: flex; align-items: center; gap: 12px; }
.cam-slider input { flex: 1; accent-color: var(--accent); }
.cam-slider output { width: 30px; text-align: right; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cam .studio-ar-panel { position: absolute; top: auto; left: 8px; right: 8px; bottom: 182px; width: auto; max-height: none; overflow: visible; padding: 12px; border-radius: 18px; }
.cam .studio-ar-panel select { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cam .lens-choices { display: flex; gap: 10px; margin: 0; overflow-x: auto; scrollbar-width: none; }
.cam .lens-choices::-webkit-scrollbar { display: none; }
.cam .lens-choices button { flex: none; width: 66px; min-height: 0; display: grid; justify-items: center; gap: 6px; padding: 0; border: 0; background: none; font-size: 10.5px; color: #ddd; }
.cam .lens-choices button span { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; font-size: 24px; color: var(--tint, #fff); background: radial-gradient(circle at 35% 30%, #ffffff30, #1b1b22 70%); border: 2px solid #ffffff22; }
.cam .lens-choices button[aria-pressed=true] span { border-color: #fff; box-shadow: 0 0 0 3px #ffffff33; }

/* Modes and shutter. */
.cam-modes { position: absolute; z-index: 6; left: 0; right: 0; bottom: 124px; display: flex; justify-content: center; gap: 4px; padding: 0 12px; overflow-x: auto; scrollbar-width: none; }
.cam-modes::-webkit-scrollbar { display: none; }
.cam-modes button { flex: none; height: 32px; padding: 0 13px; border-radius: 16px; color: #ffffffd0; font-size: 14px; font-weight: 750; text-shadow: 0 1px 3px #0009; letter-spacing: .01em; }
.cam-modes button[aria-pressed=true] { background: #fff; color: #000; text-shadow: none; }
.cam-modes button:disabled { opacity: .5; }
.cam-capture { position: absolute; z-index: 6; left: 0; right: 0; bottom: 22px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 12px; }
.cam-side { display: flex; justify-content: center; align-items: center; }
.cam-effects { display: grid; justify-items: center; gap: 4px; color: #fff; font-size: 11px; font-weight: 700; text-shadow: 0 1px 3px #000a; min-width: 60px; min-height: 60px; }
.cam-effects svg.i { width: 34px; height: 34px; stroke-width: 1.8; filter: drop-shadow(0 1px 4px #0008); }
.cam-effects[aria-pressed=true] svg.i { color: #ffd84d; }
.cam-effects[hidden], .cam-quick-lenses[hidden], .cam-seg-undo[hidden], .cam-seg-done[hidden] { display: none; }
.cam-quick-lenses { display: flex; gap: 10px; }
.cam-quick-lenses button { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; color: var(--tint); background: radial-gradient(circle at 35% 30%, #ffffff3a, #18181d 72%); border: 2px solid #ffffff38; box-shadow: 0 4px 12px #0007; }
.cam-quick-lenses button[aria-pressed=true] { border-color: #fff; box-shadow: 0 0 0 3px #ffffff40; }
.cam-seg-undo, .cam-seg-done { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.cam-seg-undo { background: #0008; }
.cam-seg-done { background: var(--accent); box-shadow: 0 4px 14px #fe2c5566; }
.cam-seg-undo svg.i, .cam-seg-done svg.i { width: 26px; height: 26px; stroke-width: 2.4; }
.cam .shutter { position: relative; width: 80px; height: 80px; padding: 0; border: 0; border-radius: 50%; background: none; box-shadow: none; display: grid; place-items: center; touch-action: none; }
.cam .shutter > span { position: absolute; inset: 9px; width: auto; height: auto; margin: 0; border-radius: 50%; background: #fff; transition: inset .18s, border-radius .18s, background .18s; }
.shutter-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.shutter-ring circle { fill: none; stroke: #fff; stroke-width: 6; }
.studio-page[data-mode=video] .shutter > span { background: var(--accent); }
.studio-page[data-mode=video] .shutter-ring circle, .studio-page.has-clips .shutter-ring circle, .studio-page.recording .shutter-ring circle { stroke: #ffffff55; }
.studio-page.recording .shutter > span { inset: 26px; border-radius: 8px; background: var(--accent); }
.shutter-progress { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 289; stroke-dashoffset: calc(289 * (1 - var(--record-progress, 0))); opacity: 0; }
.studio-page.recording .shutter-progress, .studio-page.has-clips .shutter-progress { opacity: 1; }
.cam .shutter:disabled { opacity: .55; }
.studio-page[data-mode=text] .shutter > span { background: #fff; }
.shutter-next { display: none; position: relative; z-index: 1; color: #111; }
.shutter-next svg.i { width: 30px; height: 30px; stroke-width: 3; }
.studio-page[data-mode=text] .shutter-next { display: grid; }
.studio-page[data-mode=text] .cam-effects, .studio-page[data-mode=text] .cam-quick-lenses { display: none; }
.snap .cam-view::after { background: #fff; height: 100%; opacity: .35; transition: none; }

/* Recording overlays. */
.cam-progress { position: absolute; z-index: 7; top: 6px; left: 10px; right: 10px; height: 5px; border-radius: 3px; background: #ffffff38; overflow: hidden; }
.cam-progress[hidden], .cam-elapsed[hidden], .cam-zoom[hidden], .cam-focus[hidden], .cam-countdown[hidden], .cam-ring-light[hidden], .cam-multi[hidden], .cam-text[hidden] { display: none; }
.cam-progress-bar { position: absolute; inset: 0; }
.cam-progress-bar b { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); }
.cam-progress-bar i { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #fff; }
.cam-elapsed { position: absolute; z-index: 7; top: 18px; left: 50%; transform: translateX(-50%); padding: 3px 10px; border-radius: 10px; background: #0007; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.studio-page.recording .cam-top, .studio-page.recording .cam-rail, .studio-page.recording .cam-modes, .studio-page.has-clips .cam-modes, .studio-page.recording .cam-panel, .studio-page.recording .duet-source-badge { visibility: hidden; }
.studio-page.recording .cam-launcher, .studio-page.has-clips .cam-launcher { visibility: hidden; }
.studio-page.has-clips .cam-sound { pointer-events: none; opacity: .6; }
.studio-page.has-clips:not(.recording) .cam-elapsed { top: 64px; }
.cam-zoom { position: absolute; z-index: 7; left: 50%; bottom: 168px; transform: translateX(-50%); padding: 4px 10px; border-radius: 12px; background: #0008; font-size: 13px; font-weight: 800; }
.cam-focus { position: absolute; z-index: 5; width: 70px; height: 70px; margin: -35px 0 0 -35px; border: 2px solid #ffd84d; border-radius: 12px; pointer-events: none; opacity: 0; }
.cam-focus.go { animation: cam-focus .9s ease-out; }
@keyframes cam-focus { 0% { transform: scale(1.4); opacity: 0; } 20% { transform: scale(1); opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
.cam-countdown { position: absolute; z-index: 8; inset: 0; display: grid; place-items: center; font-size: 120px; font-weight: 800; text-shadow: 0 6px 30px #000a; pointer-events: none; }
.cam-countdown.tick { animation: pop .3s ease-out; }
.cam-ring-light { position: absolute; z-index: 4; inset: 0; border-radius: 18px; box-shadow: inset 0 0 0 22px #fff8ee, inset 0 0 60px 30px #fff6e7aa; pointer-events: none; }
.cam-screen-flash { position: fixed; inset: 0; z-index: 400; background: #fffaf2; }
.cam .studio-status { position: absolute; z-index: 8; top: 40%; left: 50%; right: auto; transform: translateX(-50%); width: max-content; max-width: min(300px, calc(100% - 40px)); padding: 10px 14px; border-radius: 14px; background: #000b; font-size: 13px; font-weight: 600; line-height: 1.45; text-align: center; pointer-events: none; }
.cam .studio-status:empty { display: none; }
.cam .studio-retry { position: absolute; z-index: 8; top: calc(40% + 90px); left: 50%; transform: translateX(-50%); }
.cam .studio-retry[hidden] { display: none; }

/* Multi-snap tray. */
.cam-multi { position: absolute; z-index: 7; left: 10px; right: 62px; bottom: 166px; display: flex; align-items: center; gap: 10px; }
.cam-multi-shots { flex: 1; display: flex; gap: 6px; overflow-x: auto; align-items: center; scrollbar-width: none; }
.cam-multi-shots button { flex: none; width: 40px; height: 64px; border-radius: 8px; overflow: hidden; border: 2px solid #fff; }
.cam-multi-shots img { width: 100%; height: 100%; object-fit: cover; }
.cam-multi-count { font-size: 12px; font-weight: 700; color: #ddd; }
.cam-multi .btn { min-height: 40px; padding: 0 16px; }

/* Text posts. */
.cam-text { position: absolute; z-index: 5; inset: 0; display: flex; flex-direction: column; }
.cam-text-card { flex: 1; display: grid; place-items: center; padding: 70px 26px 230px; }
.cam-text-card textarea { width: 100%; max-height: 100%; resize: none; border: 0; outline: none; background: transparent; color: #fff; text-align: center; font: 800 28px/1.25 system-ui, -apple-system, "Segoe UI", sans-serif; }
.cam-text-card textarea::placeholder { color: #ffffffa0; }
.cam-text-card[data-dark=false] textarea { color: #1d1b17; }
.cam-text-card[data-dark=false] textarea::placeholder { color: #1d1b1788; }
.cam-text-card[data-font=serif] textarea { font: 700 28px/1.3 Georgia, "Times New Roman", serif; }
.cam-text-card[data-font=type] textarea { font: 600 25px/1.35 "Courier New", ui-monospace, monospace; }
.cam-text-card[data-font=neon] textarea { text-shadow: 0 0 14px #ff4fd8, 0 0 2px #fff; }
.cam-text-fonts { position: absolute; left: 0; right: 0; bottom: 214px; }
.cam-swatches { position: absolute; left: 0; right: 0; bottom: 170px; display: flex; justify-content: center; gap: 12px; }
.cam-swatches button { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #ffffff55; }
.cam-swatches button[aria-pressed=true] { border-color: #fff; box-shadow: 0 0 0 3px #ffffff40; }

/* Launcher under the viewfinder. */
.cam-launcher { flex: 1 0 58px; max-height: 110px; width: min(100vw, 560px); margin-bottom: var(--safe-b); display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; padding: 0 4px; }
.cam-gallery { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, #7bc4ff, #4a6cf7 55%, #ff8a5b); border: 2px solid #fff; box-shadow: 3px 3px 0 #ffffff40; }
.cam-gallery svg.i { width: 20px; height: 20px; }
.cam-tabs { display: flex; justify-content: safe center; gap: 11px; overflow-x: auto; scrollbar-width: none; padding: 0; }
.cam-tabs::-webkit-scrollbar { display: none; }
.cam-tabs > * { flex: none; min-height: 44px; display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: #ffffff80; }
.cam-tabs .active { color: #fff; }
.cam-drafts { display: grid; justify-items: center; gap: 1px; color: #fff; font-size: 10px; font-weight: 700; min-height: 44px; align-content: center; }
.cam-drafts svg.i { width: 22px; height: 22px; }

/* Duet: the original on the left, you on the right. */
.cam-view.duet-camera #cam-canvas { left: 50%; width: 50%; }
.cam-view #studio-duet-source { position: absolute; z-index: 0; left: 0; top: 0; width: 50%; height: 100%; object-fit: cover; }
.cam .duet-source-badge { top: 64px; left: 10px; z-index: 7; }
.cam-view.duet-camera ~ .cam-launcher, .cam-view.duet-camera .cam-modes { visibility: hidden; }

/* Shorter, wider screens: the picture fills the screen and the launcher sits on top of it. */
@media (min-aspect-ratio: 10/17) and (max-width: 767px) {
  .cam-view { position: absolute; inset: 0; width: auto; margin: 0; aspect-ratio: auto; border-radius: 0; }
  .cam-top { top: calc(var(--safe-t) + 8px); }
  .cam-rail { top: calc(var(--safe-t) + 62px); }
  .cam-progress { top: calc(var(--safe-t) + 4px); }
  .cam-elapsed { top: calc(var(--safe-t) + 16px); }
  .studio-page.has-clips:not(.recording) .cam-elapsed { top: calc(var(--safe-t) + 60px); }
  .cam-capture { bottom: calc(var(--safe-b) + 70px); }
  .cam-modes { bottom: calc(var(--safe-b) + 170px); }
  .cam-panel, .cam .studio-ar-panel { bottom: calc(var(--safe-b) + 226px); }
  .cam-multi, .cam-zoom { bottom: calc(var(--safe-b) + 212px); }
  .cam-launcher { position: absolute; z-index: 6; left: 50%; bottom: 0; transform: translateX(-50%); }
  .cam-text-fonts { bottom: calc(var(--safe-b) + 262px); }
  .cam-swatches { bottom: calc(var(--safe-b) + 218px); }
}
@media (max-height: 740px) {
  .cam-rail { gap: 0; }
  .cam-tool { height: 40px; }
  .cam-tool svg.i { width: 25px; height: 25px; }
  .cam-rail.expanded .cam-tool { height: 35px; }
}
/* Landscape phones: tools down the right, shutter on the right edge. */
@media (max-height: 500px) and (orientation: landscape) {
  .studio-page.cam { flex-direction: row; justify-content: center; }
  .cam-view { position: relative; inset: auto; margin: 0; height: calc(100dvh - var(--safe-t) - var(--safe-b)); width: auto; aspect-ratio: 9 / 16; border-radius: 12px; }
  .cam-rail { top: 50px; }
  .cam-rail .cam-tool { height: 34px; }
  .cam-capture { bottom: 8px; transform: scale(.8); transform-origin: bottom center; }
  .cam-modes { bottom: 84px; }
  .cam-modes button { height: 28px; font-size: 12px; padding: 0 9px; }
  .cam-panel, .cam .studio-ar-panel, .cam-multi { bottom: 118px; }
  .cam-launcher { position: absolute; right: 8px; bottom: 8px; width: 270px; grid-template-columns: 44px 1fr 44px; transform: scale(.9); transform-origin: bottom right; }
  .cam-tabs > :not(.active):not(#studio-templates) { display: none; }
}
@media (min-width: 768px) {
  .studio-page.cam { left: var(--rail-w); }
  .cam-view { margin-top: 12px; width: min(100%, calc((100dvh - 88px) * .5625)); }
}
@media (prefers-reduced-motion: reduce) {
  .cam-sound.has-sound .cam-sound-title span, .cam-focus.go, .cam-countdown.tick { animation: none; }
}

/* 1.9: camera-derived previews, a snap carousel and an anchored shutter. */
.cam-modes{bottom:158px}
.cam-panel,.cam .studio-ar-panel{bottom:210px}
.cam .cam-capture{z-index:7;pointer-events:none}
.cam-capture button{pointer-events:auto}
.cam #camera-ar{position:absolute;left:12px;bottom:88px;min-width:40px;min-height:34px}
.cam #camera-ar svg.i{width:24px;height:24px}
.cam #camera-ar small{display:none}
.fx-strip{position:absolute;z-index:6;left:0;right:0;bottom:27px;height:70px;display:flex;align-items:center;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;padding-inline:calc(50% - 30px);touch-action:pan-x;overscroll-behavior:contain;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.fx-strip::-webkit-scrollbar{display:none}
.fx-item{position:relative;flex:0 0 60px;width:60px;height:60px;scroll-snap-align:center;border:2px solid #ffffff55;border-radius:50%;overflow:hidden;background:#28282c;transition:opacity .15s,transform .15s}
.fx-item canvas{width:100%;height:100%;object-fit:cover;display:block}
.fx-item:not(.has-thumb)::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 40% 30%,#ffffff18,transparent 75%)}
.fx-item>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.fx-item[aria-selected=true]{border-color:#fff;transform:scale(1.07)}
.fx-item:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.fx-caption{position:absolute;z-index:7;left:58px;right:58px;bottom:112px;display:flex;justify-content:center;align-items:center;gap:5px;min-height:30px}
.fx-caption button{height:30px;border-radius:15px;display:flex;align-items:center;gap:6px;padding:0 10px;background:#0008;color:#fff;font-size:12px;font-weight:650;backdrop-filter:blur(12px)}
.fx-caption svg.i{width:14px;height:14px}
#fx-clear{padding:0;width:30px;justify-content:center}
#fx-shutter-thumb{display:none;width:100%;height:100%;border-radius:50%;object-fit:cover}
.fx-on:not(.recording):not([data-mode=text]) #fx-shutter-thumb{display:block}
.cam .cam-looks canvas{width:54px;height:54px;display:block;border-radius:12px;border:2px solid transparent;background:#242428}
.cam .cam-looks button[aria-pressed=true] canvas{border-color:#fff}
.cam .studio-ar-panel{max-height:calc(100% - 290px);overflow:auto;overscroll-behavior:contain;padding:12px}
.fx-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;position:sticky;top:-12px;background:#101012ed;z-index:2;padding-block:4px;font-size:14px}
.fx-panel-head button{width:30px;height:30px;display:grid;place-items:center}
.fx-panel-head svg.i{width:19px;height:19px}
.fx-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 8px}
.fx-grid button{display:grid;gap:5px;justify-items:center;color:#ddd;font-size:10px;line-height:1.2}
.fx-grid canvas{width:min(100%,60px);aspect-ratio:1;border-radius:50%;background:#28282c;border:2px solid #ffffff30}
.fx-grid button[aria-pressed=true] canvas{border-color:#fff}
.fx-grid button[aria-pressed=true]{color:#fff}
.fx-strip[hidden],.fx-caption[hidden],#fx-clear[hidden]{display:none}
.studio-page[data-mode=text] .fx-strip,.studio-page[data-mode=text] .fx-caption{display:none}
@media(min-aspect-ratio:10/17) and (max-width:767px){
 .fx-strip{bottom:calc(var(--safe-b) + 75px)}
 .fx-caption{bottom:calc(var(--safe-b) + 160px)}
 .cam-modes{bottom:calc(var(--safe-b) + 204px)}
 .cam-panel,.cam .studio-ar-panel{bottom:calc(var(--safe-b) + 250px)}
}
@media(max-height:500px) and (orientation:landscape){
 .fx-strip{height:60px;bottom:12px;gap:8px}
 .fx-item{flex-basis:48px;width:48px;height:48px}
 .fx-caption{bottom:78px;left:8px;right:8px}
 .cam-modes{bottom:112px}
 .cam-panel,.cam .studio-ar-panel{bottom:152px;max-height:calc(100% - 182px)}
 .cam #camera-ar{display:none}
 .fx-caption button{height:24px;font-size:10px}
 .fx-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){.fx-item{transition:none}}

.cam .cam-multi,.cam .cam-zoom{bottom:206px}
.studio-page[data-mode=text] .cam-modes{bottom:124px}
@media(min-aspect-ratio:10/17) and (max-width:767px){
 .cam .cam-multi,.cam .cam-zoom{bottom:calc(var(--safe-b) + 248px)}
 .studio-page[data-mode=text] .cam-modes{bottom:calc(var(--safe-b) + 170px)}
}
@media(max-height:500px) and (orientation:landscape){
 .cam .cam-multi,.cam .cam-zoom{bottom:152px}
 .studio-page[data-mode=text] .cam-modes{bottom:84px}
}

#fx-state{font-size:10px;font-weight:450;opacity:.75}#fx-state:empty{display:none}.fx-caption #fx-browse{max-width:100%;white-space:nowrap;overflow:hidden}.fx-caption #fx-name{overflow:hidden;text-overflow:ellipsis}

.lens-categories{display:flex;gap:6px;overflow:auto;scrollbar-width:none;padding:0 0 12px;overscroll-behavior:contain}.lens-categories button{flex:none;padding:8px 12px;background:#ffffff12;border-radius:18px;font-size:11px}.lens-categories [aria-pressed=true]{background:#fff;color:#111}.lens-workshop{display:flex;gap:14px;margin-top:14px;padding-top:12px;border-top:1px solid #fff2}.lens-workshop label{display:flex;align-items:center;gap:8px;font-size:11px;min-width:0}.lens-workshop label:first-child{flex:1}.lens-workshop input[type=range]{width:100%;min-width:0;accent-color:#fff}.lens-workshop input[type=color]{width:30px;height:30px;padding:0;border:0;border-radius:50%;background:none}#lens-hint{font-size:10px;color:#b8b8bb;margin-top:8px;text-align:center}.cam .studio-ar-panel{max-height:calc(100% - 270px)}

.lens-workshop[hidden]{display:none!important}