/* Scoped to the public studio; existing information pages and authoring tools retain their styles. */
.studio-v2 { --bg:#f6f4ee; --panel-2:#eeeae1; --line:#dcd8cd; --text:#292c24; --muted:#727467; --accent:#536748; --danger:#a34634; color-scheme:light; background:var(--bg); font-family:Arial,Helvetica,sans-serif; color:var(--text); }
.studio-v2::before { display:none; }
.studio-v2 * { box-sizing:border-box; }
.studio-v2 [hidden] { display:none!important; }
.studio-v2 button,.studio-v2 select,.studio-v2 input { font:inherit; }
.studio-v2 button { cursor:pointer; transition:background .15s, border-color .15s; }
.studio-v2 button:disabled { cursor:not-allowed; opacity:.45; }
.studio-v2 :focus-visible { outline:3px solid #718d60; outline-offset:3px; }
.studio-v2 i { font-style:normal; }
.site-header { max-width:1440px; margin:auto; padding:24px 44px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--line); }
.studio-v2 .site-brand { color:var(--text); text-decoration:none; font-size:23px; font-weight:800; letter-spacing:-1px; }
.studio-v2 .site-logo { width:36px; height:36px; border-radius:10px; }
.brand-accent { color:#60734d; }.site-brand small { font-size:14px; font-weight:400; }
.site-header nav { display:flex; gap:28px; }.site-header nav a { color:var(--muted); text-decoration:none; font-size:13px; }.site-header nav a.active { color:var(--text); }
.privacy-note { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--muted); }.status-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#a5a595; }.privacy-note .status-dot,.camera-label.is-live .status-dot { background:#6f875b; }
.studio-v2 .app-shell { max-width:1280px; width:calc(100% - 88px); padding:22px 0 56px; display:grid; grid-template-columns:minmax(0,1fr) 328px; grid-template-areas:'camera library' 'shot library' 'search search'; gap:22px; min-height:0; }
.studio-v2 .eyebrow { color:#7b7b6e; font-size:10px; font-weight:700; letter-spacing:2px; margin:0 0 12px; }
.studio-v2 .camera-stage { grid-area:camera; display:block; min-width:0; padding:16px; border:1px solid var(--line); background:#fffef9; border-radius:16px; box-shadow:none; }
.studio-v2 .stage-top { padding:0 2px 14px; min-height:28px; }.camera-label { font-size:10px; letter-spacing:1.5px; display:flex; align-items:center; gap:7px; color:var(--muted); }
.studio-v2 .studio-links { gap:8px; position:relative; }.studio-v2 .icon-button { width:auto; height:auto; min-height:34px; padding:8px 10px; background:transparent; color:var(--text); font-size:11px; border:1px solid var(--line); border-radius:7px; }
.studio-v2 .studio-settings-menu { display:none; position:absolute; right:0; top:44px; z-index:30; width:265px; padding:16px; border:1px solid var(--line); border-radius:12px; background:#fffef9; box-shadow:0 14px 36px #262a2622; }.studio-v2 .studio-links.is-open .studio-settings-menu { display:grid; gap:16px; }.studio-settings-menu label { display:grid; gap:7px; font-size:12px; }.studio-v2 select { border:1px solid var(--line); border-radius:7px; background:#fffef9; padding:8px; color:var(--text); }.studio-v2 input[type=range] { accent-color:#60734d; }
.studio-v2 .viewer { width:100%; height:auto; max-height:650px; aspect-ratio:var(--webcam-aspect,16/9); border-radius:10px; border:0; background:#272d27; }.studio-v2 #canvas,.studio-v2 #video { width:100%; height:100%; object-fit:contain; }.studio-v2 .permission-card { background:#e8e9dc; color:#30382b; padding:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; }.studio-v2 .permission-card.is-hidden { display:none; }.permission-card h2 { font-size:29px; font-weight:500; letter-spacing:-1px; margin:0; }.studio-v2 .permission-card p { color:#737a65; font-size:12px; line-height:1.6; max-width:300px; margin:0; }.permission-card small { color:#7c806d; font-size:10px; }.studio-v2 .start-btn-flashy { background:#536748; color:#fff; border:0; border-radius:8px; padding:12px 20px; display:flex; align-items:center; gap:12px; min-height:44px; font-size:12px; box-shadow:none; transform:none; }.studio-v2 .start-btn-flashy::before,.studio-v2 .capture-btn-small::before { display:none; }.studio-v2 .start-btn-flashy:hover { background:#435739; transform:none; }.studio-v2 .start-btn-flashy:hover > span,.studio-v2 .start-btn-flashy:hover > i { transform:none; }
.welcome-art { display:flex; justify-content:center; height:120px; width:245px; margin-bottom:3px; position:relative; }.sample { width:94px; position:absolute; background:#fffaf1; padding:5px 5px 9px; box-shadow:0 5px 12px #2b351a1c; }.sample img { width:84px; height:77px; object-fit:cover; display:block; }.sample span { display:block; font-size:6px; letter-spacing:1.2px; text-align:center; margin-top:7px; }.sample-one { left:8px; top:8px; transform:rotate(-16deg); }.sample-one img { filter:grayscale(1); }.sample-two { left:76px; top:0; transform:rotate(3deg); z-index:2; }.sample-three { right:0; top:12px; transform:rotate(17deg); }.sample-three img { filter:hue-rotate(85deg) saturate(1.7); }
.preview-label { position:absolute; top:14px; left:16px; padding:5px 7px; background:#0005; color:#fff; font-size:8px; letter-spacing:1.5px; }.capture-countdown { position:absolute; inset:0; z-index:15; display:grid; place-content:center; text-align:center; color:#fff; font-size:56px; font-weight:bold; text-shadow:0 2px 12px #0008; background:#0002; pointer-events:none; }
.effect-details { display:flex; justify-content:space-between; align-items:center; margin:20px 2px 12px; }.effect-details .eyebrow { margin-bottom:6px; font-size:8px; }.effect-details h2 { margin:0; font-size:21px; font-weight:500; }.effect-details p { font-size:12px; color:var(--muted); margin:7px 0; }.favorite-current { color:#6b7656; background:transparent; font-size:30px!important; padding:10px; }.effect-adjustments { display:flex; flex-wrap:wrap; gap:15px; align-items:center; padding:0 2px 14px; min-height:44px; }.effect-adjustments label { display:flex; align-items:center; gap:10px; font-size:11px; color:var(--muted); }.effect-adjustments input { width:110px; }.effect-adjustments output { min-width:30px; font-size:10px; }.effect-adjustments select { font-size:11px; padding:6px; }
.studio-v2 .effect-navigator-row { position:static; transform:none; opacity:1!important; pointer-events:auto!important; display:flex; flex-wrap:wrap; gap:10px; width:100%; max-width:none; margin:0 0 14px; padding:0 0 14px; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; box-shadow:none; }.studio-v2 .cap-mode-bar { border:1px solid var(--line); padding:3px; border-radius:9px; background:#f1eee6; }.studio-v2 .cap-mode-btn { color:#7b7b6e; font-size:11px; padding:7px 11px; background:transparent; border-radius:6px; min-height:38px; display:inline-flex; align-items:center; justify-content:center; gap:7px; }.studio-v2 .cap-mode-btn i { font-size:15px; line-height:1; }.studio-v2 .cap-mode-btn.active { background:#fffef9; color:#30382b; box-shadow:0 1px 3px #0001; }.studio-v2 .timer-btn { min-width:48px; min-height:40px; background:transparent; border:1px solid var(--line); color:var(--muted); padding:8px; font-size:10px; }.studio-v2 .capture-btn-small { flex:1; min-width:100px; max-width:190px; justify-content:center; min-height:42px; padding:10px 20px; font-size:12px; color:#fff; background:#536748; border:0; border-radius:8px; box-shadow:none; transition:transform .18s,background .18s,box-shadow .18s; }.studio-v2 .capture-btn-small.is-recording { background:#a34634; animation:record-control-pulse 1.4s ease-in-out infinite; }.studio-v2 .capture-btn-small.is-processing { background:#435739; cursor:progress; }.studio-v2 .capture-btn-small:hover:not(:disabled) { transform:translateY(-1px); background:#435739; box-shadow:0 4px 10px #53674833; }.studio-v2 .capture-btn-small:hover:not(:disabled)>* { transform:none; }.studio-v2 .capture-btn-small[data-mode="strip"]:not(.is-recording):not(.is-processing) { background:#68764e; }.effect-arrows { display:flex; gap:7px; margin-left:auto; }.studio-v2 .nav-btn { min-height:40px; width:40px; padding:0; display:grid; place-items:center; background:#fffef9; color:#435739; border:1px solid #c8cebd; border-radius:50%; font-size:20px; line-height:1; box-shadow:0 1px 3px #18200b12; }.studio-v2 .nav-btn:hover { background:#e9eee3; border-color:#82916f; color:#253522; transform:translateY(-1px); }.studio-v2 .nav-btn:active { transform:scale(.94); }
.studio-status { display:flex; justify-content:space-between; gap:12px; align-items:center; padding-top:10px; }.studio-v2 .tracking-status { margin:0; font-size:10px; color:var(--muted); line-height:1.5; }.studio-v2 .cap-status-bar { font-size:10px; color:var(--muted); }.app-notice { font-size:12px; color:#734a26; padding:12px; background:#f7ecd7; border-radius:7px; margin-bottom:0; }
.effect-library { grid-area:library; align-self:start; background:#eeece4; border:1px solid var(--line); border-radius:16px; padding:12px; min-width:0; }.library-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:8px; flex:0 0 auto; }.library-heading h2 { font-size:16px; font-weight:500; margin:0; letter-spacing:-.5px; }.library-title { display:flex; flex-direction:column; gap:2px; min-width:0; }.library-title h2 { white-space:nowrap; }.library-title>span { font-size:10px; color:var(--muted); }.search-field { display:flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid var(--line); border-radius:8px; background:#fffef9; }.search-field input { width:100%; min-width:0; border:0; outline:0; background:transparent; color:var(--text); font-size:12px; }.search-field span { font-size:21px; line-height:1; color:#7b7b6e; }.library-filters { display:flex; gap:8px; margin:10px 0; }.library-filters select { flex:1; min-width:0; font-size:11px; }.library-filters button { background:transparent; color:#727467; border:1px solid var(--line); border-radius:7px; padding:8px; font-size:10px; }.library-filters button[aria-pressed=true] { background:#d6ddc9; color:#3c5031; }.library-caption { font-size:9px; color:#818271; margin:14px 0; }
.studio-v2 .effect-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 8px; max-height:686px; overflow-y:auto; overflow-x:hidden; padding:2px 3px 8px; scroll-behavior:smooth; scrollbar-width:thin; }.studio-v2 .effect-button { display:flex; flex-direction:column; gap:7px; min-width:0; width:100%; padding:4px; border:1px solid transparent; border-radius:9px; background:transparent; color:#626653; font-size:10px; text-align:left; white-space:normal; line-height:1.3; }.studio-v2 .effect-button:hover { background:#e0e1d4; }.studio-v2 .effect-button[aria-pressed=true] { background:#dce2d1; color:#36472e; border-color:#849571; }.effect-button .effect-thumb { position:relative; display:block; width:100%; aspect-ratio:1.08; overflow:hidden; border-radius:5px; background:#d9d4bb; }.effect-thumb img { width:100%; height:100%; object-fit:cover; display:block; }.effect-thumb .thumb-overlay { position:absolute; inset:0; display:grid; place-content:center; font-size:28px; color:#fff9d0; }.effect-thumb[data-kind=Mirrors] img { width:50%; }.effect-thumb[data-kind=Mirrors]::after { content:''; position:absolute; inset:0 0 0 50%; background:url('assets/preview-portrait.svg') center/cover; transform:scaleX(-1); }.effect-thumb[data-kind=Warps] img { transform:scale(1.45,.8); }.effect-name { display:flex; justify-content:space-between; gap:2px; width:100%; }.effect-name b { font-weight:400; color:#60734d; }.effect-button .effect-tag { font-size:7px; color:#7c806b; text-transform:uppercase; letter-spacing:.5px; }.empty-effects { font-size:12px; color:var(--muted); line-height:1.6; text-align:center; padding:20px; }
.studio-v2 .shot-panel { grid-area:shot; padding:20px; display:block; border:1px solid var(--line); border-radius:16px; background:#fffef9; box-shadow:none; max-width:none; }.studio-v2 .shot-header { margin:0 0 16px; padding:0; display:flex; gap:12px; flex-wrap:wrap; }.shot-header .eyebrow { font-size:8px; margin-bottom:6px; }.studio-v2 .shot-header h2 { font-size:20px; font-weight:500; margin:0; }.studio-v2 .header-actions { display:flex; flex-wrap:wrap; gap:6px; }.studio-v2 .action-btn { background:transparent; border:1px solid var(--line); border-radius:7px; padding:8px 12px; color:var(--text); font-size:10px; }.studio-v2 #download { border-color:var(--line); background:#536748; color:white; }.studio-v2 .snapshot-frame { min-height:130px; max-height:340px; background:#f7f6f0; border:1px dashed #d6d7c7; border-radius:8px; }.studio-v2 #snapshot { max-height:330px; width:auto; max-width:100%; object-fit:contain; }.studio-v2 #snapshotEmpty { font-size:12px; color:#838573; text-align:center; margin:24px; }.studio-v2 #snapshotEmpty>span { display:block; font-size:25px; margin-bottom:8px; color:#adb299; }.studio-v2 #snapshotEmpty small { display:block; font-size:10px; margin-top:8px; }.gallery-note { font-size:10px; color:var(--muted); margin:12px 0 0; }.studio-v2 #captured-video-preview { position:static; opacity:1; pointer-events:auto; max-height:320px; }
.studio-v2 .search-content { grid-area:search; padding:46px 0 0; border:0; border-radius:0; border-top:1px solid var(--line); margin-top:20px; background:transparent; box-shadow:none; }.studio-v2 .search-content h2 { font-size:32px; letter-spacing:-1px; font-weight:500; margin:0 0 12px; }.studio-v2 .search-content>p:not(.eyebrow) { max-width:650px; color:var(--muted); font-size:13px; line-height:1.7; }.studio-v2 .search-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:50px; margin-top:34px; }.studio-v2 .search-grid article { padding:0; border:0; background:transparent; }.step-number { color:#899174; font-size:10px; }.search-grid h3 { font-size:16px; font-weight:500; }.studio-v2 .search-grid p { font-size:12px; color:var(--muted); line-height:1.7; }.effect-links { display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:24px; }.effect-links a { color:#637453; font-size:11px; text-underline-offset:4px; }.site-footer { border-top:1px solid var(--line); margin:auto; max-width:1440px; padding:25px 44px; display:flex; align-items:center; justify-content:space-between; gap:20px; }.site-footer>a { font-size:14px; font-weight:700; color:var(--text); text-decoration:none; }.site-footer>span { color:var(--muted); font-size:10px; }.studio-v2 .site-footer-links { padding:0; margin:0; display:flex; gap:18px; }.studio-v2 .site-footer-links a { padding:0; background:transparent; border:0; color:var(--muted); font-size:10px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
@media(min-width:1500px) { .studio-v2 .app-shell { grid-template-columns:minmax(0,1fr) 352px; }.studio-v2 .effect-strip { max-height:790px; } }
@media(max-width:1000px) { .studio-v2 .app-shell { width:calc(100% - 40px); grid-template-columns:minmax(0,1fr) 275px; gap:16px; }.site-header { padding:20px; }.privacy-note { display:none; }.studio-v2 .effect-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }.welcome-art { height:100px; transform:scale(.8); margin:-6px 0; }.permission-card h2 { font-size:24px; }.studio-v2 .permission-card { gap:7px; }.effect-arrows { display:none; }.studio-v2 .cap-mode-btn { padding:7px; } }
@media(max-width:760px) { .site-header { padding:18px 20px; }.site-header nav { gap:14px; }.site-header nav a { font-size:11px; }.site-header nav a:last-child { display:none; }.studio-v2 .site-brand { font-size:19px; }.studio-v2 .site-logo { width:28px; height:28px; }.site-brand small { font-size:11px; }.studio-v2 .app-shell { grid-template-columns:1fr; grid-template-areas:'camera' 'library' 'shot' 'search'; padding-top:14px; }.studio-v2 .camera-stage { padding:12px; }.studio-v2 .viewer { aspect-ratio:4/3; max-height:520px; }.welcome-art { height:118px; transform:scale(.9); margin:0; }.studio-v2 .permission-card { gap:10px; }.studio-v2 .effect-strip { grid-template-columns:repeat(4,minmax(0,1fr)); max-height:320px; }.effect-library { padding:16px; }.effect-details { margin-top:16px; }.effect-details p { font-size:11px; }.studio-v2 .effect-navigator-row { gap:6px; }.studio-v2 .cap-mode-bar { flex:1 1 auto; min-width:0; }.studio-v2 .cap-mode-btn { font-size:10px; }.studio-v2 .timer-btn { min-width:42px; flex:0 0 auto; }.studio-v2 .capture-btn-small { min-width:0; max-width:none; padding:10px 8px; }.studio-v2 .effect-arrows { display:flex; flex:0 0 auto; margin-left:auto; }.studio-v2 .nav-btn { width:38px; min-height:40px; }.studio-v2 .search-content { padding-top:32px; }.studio-v2 .search-content h2 { font-size:27px; }.studio-v2 .search-grid { gap:24px; }.site-footer { padding:24px 20px; flex-wrap:wrap; }.site-footer>span { display:none; } }
@media(max-width:400px) { .studio-v2 .app-shell { width:calc(100% - 24px); }.site-header { padding:16px 12px; }.site-header nav a:nth-child(2) { display:none; }.studio-v2 .viewer { aspect-ratio:1/1; }.studio-v2 .search-grid { grid-template-columns:1fr; gap:16px; }.studio-v2 .effect-strip { grid-template-columns:repeat(3,minmax(0,1fr)); }.studio-v2 .permission-card { padding:12px; }.studio-v2 .cap-mode-btn { padding:6px; }.studio-v2 .capture-btn-small { min-width:76px; }.studio-v2 .shot-panel { padding:16px; } }
@media(prefers-reduced-motion:reduce) { .studio-v2 * { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
/* Final public overrides for legacy selectors and small-screen camera controls. */
.studio-v2 .studio-settings-toggle { display:inline-flex; gap:6px; }
.studio-v2 .stage-top { flex-direction:row; align-items:center; justify-content:space-between; gap:8px; }
.studio-v2 #currentEffectDisplay { display:block; text-align:left; font-size:21px; font-weight:500; color:var(--text); margin:0; }
.studio-v2 .effect-details .eyebrow { display:block; }
.studio-v2 .timer-btn i { color:var(--muted); }
.studio-v2 .swipe-hint { top:auto; bottom:12px; font-size:10px; padding:7px 12px; }
.studio-v2 .viewer:has(.permission-card:not(.is-hidden)) .swipe-hint { display:none; }
.studio-v2 .viewer { aspect-ratio:var(--webcam-aspect,16/9); }
.studio-v2 .effect-adjustments:has(#strengthControl[hidden]):not(:has(label:not([hidden]))) { min-height:0; padding:0; }
.studio-v2 .camera-label { flex-shrink:0; }
.studio-v2 .studio-links { flex-wrap:nowrap; }
@media(max-width:760px) { .studio-v2 .studio-settings-menu { justify-content:stretch; }.studio-v2 .studio-settings-toggle { font-size:10px; }.studio-v2 .effect-strip { grid-template-columns:repeat(3,minmax(0,1fr)); }.studio-v2 .studio-links { width:auto; margin:0; }.studio-v2 .permission-card { min-height:0; } }

.studio-v2 .effect-thumb[data-kind] img { width:100%; transform:none; }
.studio-v2 .effect-thumb[data-kind]::after { display:none; }

.studio-v2 .effect-adjustments { min-height:0; padding:0 2px 8px; gap:12px; }
.studio-v2 .effect-adjustments:has(#strengthControl:not([hidden])) label#strengthControl { gap:9px; color:#565a4f; font-weight:600; }
.studio-v2 #strengthControl input { appearance:none; width:132px; height:5px; border-radius:999px; background:linear-gradient(90deg,#536748 0 var(--strength-progress,72%),#d9ddcf var(--strength-progress,72%) 100%); outline:none; cursor:pointer; }
.studio-v2 #strengthControl input::-webkit-slider-thumb { appearance:none; width:15px; height:15px; border-radius:50%; background:#536748; border:2px solid #fffef9; box-shadow:0 1px 4px #20271855; }
.studio-v2 #strengthControl input::-moz-range-thumb { width:12px; height:12px; border-radius:50%; background:#536748; border:2px solid #fffef9; box-shadow:0 1px 4px #20271855; }
.studio-v2 #strengthValue { color:#53594a; font-variant-numeric:tabular-nums; }
.studio-v2 .effect-arrows .nav-btn:focus-visible { outline-offset:3px; }
.studio-v2 .viewer.is-recording { outline:3px solid #a34634; outline-offset:3px; }
.studio-v2 .viewer.is-recording::after { content:"REC"; position:absolute; top:16px; right:16px; z-index:4; padding:6px 9px 6px 20px; border-radius:999px; color:white; background:#a34634; font-size:10px; font-weight:800; letter-spacing:1px; box-shadow:0 2px 8px #0003; }
.studio-v2 .viewer.is-recording::before { content:""; position:absolute; top:23px; right:53px; z-index:5; width:7px; height:7px; border-radius:50%; background:#fff; animation:record-dot-pulse 1s ease-in-out infinite; }
.studio-v2 .viewer.capture-flash::after { content:""; position:absolute; inset:0; z-index:6; background:#fff; pointer-events:none; animation:camera-capture-flash .52s ease-out forwards; }
.studio-v2 .viewer.capture-flash.is-recording::after { content:""; position:absolute; inset:0; z-index:6; background:#fff; animation:camera-capture-flash .52s ease-out forwards; }
.studio-v2 .capture-countdown { background:#11131855; backdrop-filter:blur(2px); font-size:clamp(58px,10vw,104px); animation:none; }
.studio-v2 .capture-countdown.countdown-pop { animation:countdown-pop .9s ease-out both; }
.studio-v2 #cap-processing { padding:7px 11px; border-radius:999px; color:#435739; background:#e9eee3; animation:processing-breathe 1.2s ease-in-out infinite alternate; }
@keyframes camera-capture-flash { 0%{opacity:0} 12%{opacity:.88} 100%{opacity:0} }
@keyframes countdown-pop { 0%{transform:scale(.65);opacity:0} 25%{transform:scale(1.08);opacity:1} 70%{transform:scale(1);opacity:1} 100%{transform:scale(.94);opacity:0} }
@keyframes record-control-pulse { 0%,100%{box-shadow:0 0 0 0 #a3463440} 50%{box-shadow:0 0 0 5px #a3463416} }
@keyframes record-dot-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
@keyframes processing-breathe { to{opacity:.62} }
@media(prefers-reduced-motion:reduce) { .studio-v2 .viewer.capture-flash::after,.studio-v2 .viewer.is-recording::before,.studio-v2 .capture-btn-small.is-recording,.studio-v2 #cap-processing,.studio-v2 .capture-countdown { animation:none; } }

.studio-v2 .how-it-works-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.studio-v2 .how-it-works-heading>div { max-width:740px; }
.studio-v2 .how-it-works-heading>div>p { max-width:680px; color:var(--muted); font-size:13px; line-height:1.7; }
.studio-v2 .tour-launch { flex:0 0 auto; display:inline-flex; align-items:center; gap:16px; min-height:42px; margin-bottom:12px; padding:10px 15px; border:1px solid #6c7d5b; border-radius:8px; background:#536748; color:#fff; font-size:12px; }
.studio-v2 .tour-launch:hover { background:#435739; }
.studio-v2 .tour-step-list { margin:30px 0 0; padding:0; list-style:none; counter-reset:tourstep; }
.studio-v2 .tour-step-list li { min-width:0; padding:18px; border:1px solid var(--line); border-radius:10px; background:#fffef9; }
.studio-v2 .tour-step-list h3 { margin:9px 0 7px; }
.studio-v2 .tour-step-list p { margin:0; }
.studio-v2 .tour-step-list a { display:inline-block; margin-top:12px; color:#536748; font-size:11px; text-underline-offset:3px; }
.studio-v2 .app-tour-layer { position:fixed; inset:0; z-index:10000; pointer-events:none; }
.studio-v2 .app-tour-layer[hidden] { display:none!important; }
.studio-v2 .app-tour-shade { position:fixed; z-index:0; background:rgba(19,23,18,.62); pointer-events:auto; }
.studio-v2 .app-tour-spotlight { position:fixed; z-index:1; border:2px solid #f5f2e9; border-radius:12px; box-shadow:0 0 0 1px #536748,0 0 26px #e6efcf77; pointer-events:none; transition:top .2s,left .2s,width .2s,height .2s; }
.studio-v2 .app-tour-card { position:fixed; z-index:2; width:min(360px,calc(100vw - 32px)); max-height:min(360px,calc(100vh - 24px)); overflow:auto; padding:18px; border:1px solid #e3dfd3; border-radius:14px; background:#fffef9; color:var(--text); box-shadow:0 18px 60px #1117; pointer-events:auto; }
.studio-v2 .app-tour-card-top,.studio-v2 .app-tour-actions,.studio-v2 .app-tour-actions>div { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.studio-v2 .app-tour-count { color:#6b7656; font-size:10px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; }
.studio-v2 .app-tour-close { width:32px; height:32px; padding:0; border:1px solid var(--line); border-radius:7px; background:transparent; color:var(--text); font-size:20px; line-height:1; }
.studio-v2 .app-tour-card h3 { margin:12px 0 7px; font-size:20px; font-weight:600; letter-spacing:-.3px; }
.studio-v2 .app-tour-card p { margin:0; color:var(--muted); font-size:12px; line-height:1.65; }
.studio-v2 .app-tour-actions { margin-top:18px; }
.studio-v2 .app-tour-actions button { min-height:36px; padding:8px 11px; border:1px solid var(--line); border-radius:7px; background:#fffef9; color:var(--text); font-size:11px; }
.studio-v2 .app-tour-actions .app-tour-next { border-color:#536748; background:#536748; color:#fff; }
.studio-v2 .app-tour-actions .app-tour-skip { border-color:transparent; color:var(--muted); }
.studio-v2 .app-tour-actions button:disabled { opacity:.45; cursor:not-allowed; }
.studio-v2 .app-tour-card :focus-visible { outline-color:#607a50; }
@media(max-width:760px) {
  .studio-v2 .how-it-works-heading { align-items:flex-start; flex-direction:column; gap:8px; }
  .studio-v2 .tour-launch { margin:0; }
  .studio-v2 .tour-step-list { grid-template-columns:1fr; gap:12px; }
  .studio-v2 .tour-step-list li { padding:15px; }
  .studio-v2 .app-tour-card { padding:15px; }
  .studio-v2 .app-tour-card h3 { font-size:18px; }
}
.studio-v2 .effect-library { display:flex; flex-direction:column; align-self:start; min-height:0; height:var(--viewer-height,auto); max-height:var(--viewer-height,none); margin-top:var(--viewer-offset,0px); overflow:hidden; }
.studio-v2 .effect-strip { flex:1 1 auto; min-height:0; max-height:none; grid-auto-rows:max-content; align-content:start; }
.studio-v2 .effect-button .effect-thumb { flex:0 0 auto; height:auto; }
.studio-v2 .effect-button { min-height:auto; height:auto; justify-content:flex-start; }
@media(max-width:760px) { .studio-v2 .effect-library { margin-top:0; } }

/* Compact controls: preview overlay, hover on desktop and tap-to-reveal on touch screens. */
.site-header { padding:14px 44px; }
.studio-v2 .viewer { position:relative; }
.studio-v2 .stage-top { position:absolute; z-index:12; top:10px; left:12px; right:12px; display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:8px; min-height:0; padding:0; opacity:0; pointer-events:none; transform:translateY(-4px); transition:opacity .18s ease,transform .18s ease; }
.studio-v2 .viewer.camera-keyboard-focus .stage-top,.studio-v2 .viewer.camera-controls-visible .stage-top { opacity:1; pointer-events:auto; transform:translateY(0); }
@media (hover:hover) { .studio-v2 .viewer:hover .stage-top { opacity:1; pointer-events:auto; transform:translateY(0); } }
@media (hover:none) { .site-header { padding:12px 20px; } }
.studio-v2 .stage-top .camera-label { flex-shrink:0; padding:8px 10px; border-radius:7px; background:#111914bf; color:#fff; }
.studio-v2 .stage-top .studio-links { gap:8px; position:relative; flex-wrap:nowrap; pointer-events:auto; }
.studio-v2 .stage-top .icon-button { min-height:34px; padding:8px 10px; background:#111914bf; color:#fff; border:1px solid #ffffff66; border-radius:7px; }
.studio-v2 .library-heading .tour-launch { min-height:36px; margin:0; padding:7px 10px; gap:6px; font-size:11px; white-space:nowrap; }
@media(max-width:760px) { .site-header { padding:12px 20px; } }

.studio-v2 .preview-label { top:auto; left:12px; bottom:12px; }

/* Camera-first controls. Idle visibility is managed by camera-controls.js. */
.studio-v2 [hidden] { display:none!important; }
.studio-v2 .stage-top { visibility:hidden; }
.studio-v2 .stage-top .studio-links { pointer-events:inherit; }
.studio-v2 .viewer.camera-keyboard-focus .stage-top,.studio-v2 .viewer.camera-controls-visible .stage-top { visibility:visible; }
@media(hover:hover) { .studio-v2 .viewer:hover .stage-top { visibility:visible; } }
.studio-v2 .viewer:not(.has-camera) .stage-top,.studio-v2 .viewer:not(.has-camera) .effect-navigator-row,.studio-v2 .viewer:not(.has-camera) .effect-arrows,.studio-v2 .viewer:not(.has-camera) .preview-label { display:none; }
.studio-v2 .viewer:not(.has-camera) { min-height:340px; }
.studio-v2 .effect-navigator-row { position:absolute; z-index:13; left:12px; right:12px; bottom:max(12px,env(safe-area-inset-bottom)); top:auto; width:auto; margin:0; padding:0; border:0; display:flex; flex-direction:column; flex-wrap:nowrap; gap:8px; background:transparent; }
.studio-v2 .cap-mode-bar { flex:0 0 auto; align-self:center; display:flex; border-color:#ffffff3d; background:#111914d9; box-shadow:0 2px 10px #0002; }
.studio-v2 .cap-mode-btn { min-height:34px; padding:6px 12px; color:#e4e9dd; }
.studio-v2 .cap-mode-btn.active { color:#263a25; background:#fffdf5; }
.camera-shutter-row { display:grid; grid-template-columns:58px 76px 58px; align-items:center; justify-content:center; gap:16px; min-height:83px; }
.studio-v2 .camera-shutter { position:relative; display:grid; place-items:center; width:68px; height:68px; min-width:68px; min-height:68px; max-width:none; margin:0 auto 14px; padding:5px; border:3px solid #fff; border-radius:50%; background:#18271aba; box-shadow:0 3px 18px #0005; animation:none; }
.studio-v2 .camera-shutter i { display:block; width:52px; height:52px; border-radius:50%; background:#fffdf5; transition:transform .15s,border-radius .15s,background .15s; }
.studio-v2 .camera-shutter>span { position:absolute; top:calc(100% + 4px); left:50%; transform:translateX(-50%); font-size:11px; font-weight:700; white-space:nowrap; color:#fff; text-shadow:0 1px 4px #000; }
.studio-v2 .camera-shutter:hover:not(:disabled) { background:#31432ad9; box-shadow:0 4px 20px #0005; transform:none; }
.studio-v2 .camera-shutter:hover:not(:disabled)>span { transform:translateX(-50%); }
.studio-v2 .camera-shutter:hover:not(:disabled)>i { transform:scale(.92); }
.studio-v2 .camera-shutter[data-mode=video] i { background:#ef675e; }
.studio-v2 .camera-shutter[data-state=recording] i,.studio-v2 .camera-shutter[data-state=countdown] i,.studio-v2 .camera-shutter[data-state=strip] i { width:26px; height:26px; border-radius:6px; background:#ef675e; }
.studio-v2 .camera-shutter[data-state=processing] i { background:#d9e3c8; }
.studio-v2 .camera-shutter:disabled { opacity:.55; }
.studio-v2 .camera-shutter-row .timer-btn { width:52px; min-height:48px; padding:6px; border:1px solid #ffffff66; background:#111914bd; color:#fff; border-radius:12px; font-size:11px; }
.recent-capture-slot { width:58px; height:58px; }
.recent-capture { position:relative; width:54px; height:54px; border:2px solid #fff; border-radius:12px; padding:0; background:#23352c; box-shadow:0 2px 8px #0004; overflow:visible; }
.recent-capture img { width:100%; height:100%; object-fit:cover; border-radius:9px; display:block; }
.recent-capture-count { position:absolute; right:-6px; top:-6px; min-width:20px; height:20px; display:grid; place-items:center; padding:0 4px; border-radius:12px; background:#fffdf5; color:#30432c; font-size:10px; font-weight:700; }
.recent-capture-play { position:absolute; inset:0; display:grid; place-items:center; color:white; font-size:18px; text-shadow:0 1px 5px #000; }
.studio-v2 .effect-arrows { position:absolute; inset:0; z-index:11; display:block; margin:0; pointer-events:none; }
.studio-v2 .camera-edge { position:absolute; top:38%; height:68px; width:52px; min-height:48px; border:1px solid #ffffff70; border-radius:14px; display:flex; flex-direction:column; gap:0; align-items:center; justify-content:center; background:#111914c9; color:white; box-shadow:0 3px 12px #0003; pointer-events:none; opacity:0; visibility:hidden; transition:opacity .18s; }
.camera-edge-previous { left:12px; }.camera-edge-next { right:12px; }
.studio-v2 .camera-edge i { font-style:normal; font-size:34px; line-height:30px; }
.studio-v2 .camera-edge span { font-size:9px; font-weight:600; }
.studio-v2 .camera-edge:hover { background:#30462edc; color:#fff; border-color:#fff; transform:none; }
.studio-v2 .viewer.camera-controls-visible .camera-edge,.studio-v2 .viewer.camera-keyboard-focus .camera-edge { opacity:1; visibility:visible; pointer-events:auto; }
@media(hover:hover) { .studio-v2 .viewer:hover .camera-edge { opacity:1; visibility:visible; pointer-events:auto; } }
.studio-v2 .camera-edge:focus-visible { opacity:1; visibility:visible; pointer-events:auto; }
.camera-gesture-hint,.face-prompt { position:absolute; z-index:14; top:54px; left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100% - 32px); margin:0; padding:8px 12px; border-radius:9px; background:#111914d9; color:#fff; font-size:11px; line-height:1.5; text-align:center; pointer-events:none; }
.face-prompt { top:92px; }
.studio-v2 .preview-label { opacity:0; pointer-events:none; bottom:14px; }
.studio-v2 .viewer.camera-controls-visible .preview-label,.studio-v2 .viewer.camera-keyboard-focus .preview-label { opacity:1; }
@media(hover:hover) { .studio-v2 .viewer:hover .preview-label { opacity:1; } }
.studio-v2 .permission-card { background:radial-gradient(ellipse at 50% 20%,#fffdf4,#e6ecdc 75%); gap:12px; padding:24px; }
.studio-v2 .permission-card h2 { max-width:440px; color:#243b28; font-size:clamp(24px,3vw,38px); font-weight:700; line-height:1.1; letter-spacing:-1.1px; }
.studio-v2 .permission-card p { max-width:350px; font-size:14px; color:#53604d; }
.studio-v2 .permission-card small { font-size:11px; color:#53604d; }
.welcome-examples { font-size:10px; letter-spacing:.7px; text-transform:uppercase; color:#64785b; }
.studio-v2 .start-btn-flashy { min-height:56px; border-radius:16px; padding:15px 25px; background:#294c31; font-size:17px; font-weight:700; gap:13px; box-shadow:0 6px 22px #294c3138,0 0 0 5px #fff9; }
.studio-v2 .start-btn-flashy:hover { background:#1d3923; box-shadow:0 8px 26px #294c3150,0 0 0 5px #fff; }
.studio-v2 .sample img { filter:none; }
.studio-v2 .effect-details { margin-top:16px; }
#captures { scroll-margin-top:20px; }
@media(max-width:520px) { .studio-v2 .permission-card { padding:16px; gap:10px; }.studio-v2 .permission-card h2 { font-size:27px; }.studio-v2 .welcome-art { height:95px; transform:scale(.85); margin:-4px 0; }.studio-v2 .stage-top .camera-label { font-size:9px; padding:7px; }.studio-v2 .stage-top .icon-button { font-size:10px; padding:6px 8px; }.studio-v2 .camera-edge { width:44px; height:60px; }.camera-edge-previous { left:8px; }.camera-edge-next { right:8px; }.studio-v2 .preview-label { display:none; }.camera-gesture-hint { font-size:10px; top:48px; }.studio-v2 .cap-mode-btn { padding:5px 10px; } }
@media(max-height:520px) and (min-width:521px) { .studio-v2 .viewer:not(.has-camera) { min-height:250px; }.studio-v2 .welcome-art,.welcome-examples { display:none; }.studio-v2 .permission-card { padding:12px; gap:8px; }.studio-v2 .permission-card h2 { font-size:26px; } }
@media(prefers-reduced-motion:reduce) { .studio-v2 .camera-edge,.studio-v2 .camera-shutter i { transition:none; } }
.studio-v2 .app-tour-layer { pointer-events:auto; }
.studio-v2 .viewer.has-camera { touch-action: pan-y pinch-zoom; }
@media (max-height: 520px) and (orientation: landscape), (max-width: 380px) {
  .studio-v2 .has-camera .effect-navigator-row { gap: 4px; }
  .studio-v2 .camera-shutter-row { min-height: 65px; margin-bottom: 8px; }
  .studio-v2 .camera-shutter { width: 52px; height: 52px; }
  .studio-v2 .camera-shutter > span { bottom: -17px; font-size: 10px; }
  .studio-v2 .recent-capture { width: 44px; height: 44px; }
  .studio-v2 .has-camera .cap-mode-btn { min-height: 28px; padding: 4px 9px; font-size: 11px; }
  .studio-v2 .camera-gesture-hint { max-width: 65%; font-size: 10px; }
}
.studio-v2 #reactionControl { display:flex; align-items:center; gap:12px; }
.studio-v2 #reactionTrigger { border:1px solid var(--line); border-radius:8px; padding:8px 12px; background:var(--panel-2); }

.studio-v2 .library-search { display:flex; gap:8px; align-items:stretch; min-width:0; }
.studio-v2 .library-search .search-field { flex:1; min-width:0; }
.studio-v2 #favoritesOnly { flex:0 0 auto; min-height:38px; padding:7px 9px; border:1px solid var(--line); border-radius:8px; background:#fffef9; color:var(--muted); font-size:11px; }
.studio-v2 #favoritesOnly[aria-pressed=true] { background:#d6ddc9; color:#3c5031; }
.studio-v2 .effect-category-tabs { display:flex; flex:0 0 auto; min-width:0; gap:4px; margin:5px 0 6px; padding:2px 0 4px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:#b4bea7 transparent; border-bottom:1px solid #d0d3c3; }
.studio-v2 .effect-category-tabs [role=tab] { flex:0 0 auto; white-space:nowrap; min-height:40px; padding:9px 11px; border:1px solid transparent; border-radius:8px; background:transparent; color:#646a5b; font-size:12px; font-weight:600; }
.studio-v2 .effect-category-tabs [role=tab]:hover { background:#e0e4d6; }
.studio-v2 .effect-category-tabs [aria-selected=true],.studio-v2 .effect-category-tabs [aria-selected=true]:hover { background:#536748; color:#fffef9; border-color:#536748; }
.studio-v2 .effect-category-tabs [role=tab]:focus-visible { outline-offset:-3px; }

@media(max-width:760px) {
  .studio-v2 .effect-library { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:38px 38px 48px minmax(0,1fr); gap:4px; padding:10px; }
  .studio-v2 .library-heading { grid-column:1 / -1; grid-row:1; margin:0; gap:8px; }
  .studio-v2 .library-heading h2 { font-size:14px; }
  .studio-v2 .library-search { grid-column:1 / -1; grid-row:2; }
  .studio-v2 .effect-category-tabs { grid-column:1 / -1; grid-row:3; margin:0; }
  .studio-v2 .library-caption { display:none; }
  .studio-v2 .effect-strip,.studio-v2 .empty-effects { grid-column:1 / -1; grid-row:4; min-height:0; }
  .studio-v2 .effect-strip { max-height:none; }
}
@media (max-height:520px) and (orientation:landscape), (max-width:380px) {
  .studio-v2 .camera-shutter { min-width:52px; min-height:52px; }
  .studio-v2 .camera-shutter i { width:38px; height:38px; }
  .studio-v2 .camera-shutter-row { min-height:65px; }
}

.studio-v2.app-tour-active .viewer.has-camera .camera-edge { opacity:1;visibility:visible; }

.studio-v2 .viewer .cap-status-bar { position:absolute; z-index:14; right:12px; top:54px; pointer-events:none; }
.studio-v2 .viewer #cap-rec-timer,.studio-v2 .viewer #cap-processing { padding:7px 10px; border-radius:8px; background:#17211dd9; color:white; font-size:11px; }
.studio-v2 .viewer #cap-processing::before { content:''; display:inline-block; width:10px; height:10px; margin-right:7px; border:2px solid #fff9; border-top-color:transparent; border-radius:50%; vertical-align:middle; animation:shutter-saving .8s linear infinite; }
.studio-v2 .camera-shutter:active:not(:disabled) i { transform:scale(.86); }
.studio-v2 .camera-shutter[data-state=recording] { animation:record-control-pulse 1.4s ease-in-out infinite; }
@keyframes shutter-saving { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .studio-v2 .viewer #cap-processing::before,.studio-v2 .camera-shutter[data-state=recording] { animation:none; } }

/* Two idle stages apply to every camera control, even while the pointer is hovering. */
.studio-v2 .viewer .effect-navigator-row { backdrop-filter:none; -webkit-backdrop-filter:none; }
.studio-v2 .camera-edge-previous { left:12px; right:auto; }
.studio-v2 .camera-edge-next { right:12px; left:auto; }
.studio-v2 .viewer.has-camera :is(.stage-top,.effect-navigator-row,.camera-edge,.preview-label) {
  opacity:0!important; visibility:hidden!important; pointer-events:none!important;
  transition:opacity .16s ease;
}
.studio-v2 .viewer.has-camera.camera-controls-visible :is(.stage-top,.effect-navigator-row,.camera-edge,.preview-label) {
  opacity:1!important; visibility:visible!important; pointer-events:auto!important;
}
.studio-v2 .viewer.has-camera.camera-controls-dimmed :is(.stage-top,.effect-navigator-row,.camera-edge,.preview-label) {
  opacity:.1!important; pointer-events:none!important;
}
.studio-v2 .viewer.has-camera .preview-label { pointer-events:none!important; }
@media(max-width:520px) {
  .studio-v2 .camera-edge-previous { left:8px; right:auto; }
  .studio-v2 .camera-edge-next { right:8px; left:auto; }
}
@media(prefers-reduced-motion:reduce) {
  .studio-v2 .viewer.has-camera :is(.stage-top,.effect-navigator-row,.camera-edge,.preview-label) { transition:none; }
  .studio-v2 .viewer.capture-flash::after { content:none!important; }
}
.studio-v2 #strengthControl input:focus-visible { outline:3px solid #718d60; outline-offset:4px; }
.studio-v2 .face-retry { align-self:flex-start; margin:8px 0 0; min-height:36px; padding:8px 12px; border:1px solid var(--line); border-radius:8px; color:var(--text); background:var(--panel-2); font-size:12px; }

/* The welcome panel grows with its text; preview cards must not overlap the heading. */
.studio-v2 .viewer:not(.has-camera) { aspect-ratio:auto; max-height:none; }
.studio-v2 .viewer:not(.has-camera) .permission-card { position:relative; min-height:inherit; }
.studio-v2 .permission-card .welcome-art { flex-shrink:0; }
@media(max-width:520px) {
  .studio-v2 .permission-card .welcome-art { height:120px; margin:0; }
  .studio-v2 .stage-top,.studio-v2 .stage-top .studio-links { gap:4px; }
  .studio-v2 .studio-settings-toggle .camera-settings-text { display:none; }
  .studio-v2 .stage-top .icon-button { min-height:44px; }
  .studio-v2 .stage-top .studio-settings-toggle { min-width:44px; }
  .studio-v2 .cap-mode-btn span { white-space:nowrap; }
}
@media(max-width:380px) {
  .studio-v2 .camera-edge { top:max(66px,calc(50% - 60px)); }
}
.studio-v2 .viewer > .studio-settings-menu { top:64px; right:12px; bottom:12px; width:min(265px,calc(100% - 24px)); max-height:340px; overflow-y:auto; overscroll-behavior:contain; }
.studio-v2 .viewer.has-camera:has(.studio-links.is-open) > .studio-settings-menu { display:grid; gap:12px; }
.studio-v2 .viewer.has-camera { width:min(100%,calc(650px * var(--webcam-aspect-num,1.777778))); margin-inline:auto; container-type:size; }
@media(max-width:760px) {
  .studio-v2 .viewer.has-camera { width:min(100%,calc(520px * var(--webcam-aspect-num,1.777778))); }
}
@media(max-width:520px) {
  .studio-v2 .viewer.has-camera { min-height:255px; }
  .studio-v2 .viewer.has-camera :is(#canvas,#video) { top:50%; bottom:auto; height:auto; aspect-ratio:var(--webcam-aspect,1/1); transform:translateY(-50%); }
}
/* Keep every shutter/mode reachable when a wide frame is selected on a narrow phone. */
@container (max-height:220px) {
  .studio-v2 .stage-top .camera-label { display:none; }
  .studio-v2 .stage-top .studio-links { margin-left:auto; }
  .studio-v2 .stage-top .icon-button { min-height:34px; }
  .studio-v2 .studio-settings-toggle .camera-settings-text { display:none; }
  .studio-v2 .viewer .effect-navigator-row { bottom:8px; gap:4px; }
  .studio-v2 .cap-mode-btn { min-height:26px; padding:4px 12px; }
  .studio-v2 .cap-mode-btn span { display:none; }
  .studio-v2 .camera-shutter-row { grid-template-columns:44px 48px 44px; gap:8px; min-height:52px; margin-bottom:0; }
  .studio-v2 .camera-shutter { width:44px; height:44px; min-width:44px; min-height:44px; margin:0; }
  .studio-v2 .camera-shutter i { width:30px; height:30px; }
  .studio-v2 .camera-shutter > span { display:none; }
  .studio-v2 .recent-capture-slot,.studio-v2 .recent-capture { width:40px; height:40px; }
  .studio-v2 .camera-shutter-row .timer-btn { width:40px; min-height:40px; }
  .studio-v2 .camera-edge { width:44px; height:44px; min-height:44px; top:calc(50% - 22px); }
  .studio-v2 .camera-edge-previous { left:4px; }
  .studio-v2 .camera-edge-next { right:4px; }
  .studio-v2 .camera-edge i { font-size:24px; line-height:22px; }
  .studio-v2 .camera-edge span { font-size:8px; }
  .studio-v2 .camera-gesture-hint { display:none; }
}

/* Mobile keeps only the essential camera actions over the picture. */
.studio-v2 .settings-camera-status { display:flex; align-items:center; gap:8px; margin:0; color:var(--muted); font-size:12px; }
.studio-v2 .studio-settings-menu .video-sound-setting { display:flex; align-items:center; gap:8px; min-height:44px; }
.studio-v2 .video-sound-setting input { flex:0 0 18px; width:18px; height:18px; margin:0; accent-color:#60734d; }
.studio-v2 .video-sound-setting span { min-width:0; line-height:1.3; }
.studio-v2 #videoSoundHelp { margin-top:-8px; color:var(--muted); font-size:11px; line-height:1.4; }
.studio-v2 #recordingSoundLabel { display:inline-block; margin-left:9px; font-size:10px; }
.studio-v2 .settings-camera-status .status-dot { background:#6f875b; }
.studio-v2 .studio-settings-menu .settings-stop-camera { min-height:44px; border:1px solid #c8bdb5; border-radius:8px; color:#704c3c; background:#f6eee7; }
@media(max-width:760px), (max-width:1000px) and (max-height:520px) and (orientation:landscape) {
  .studio-v2 .stage-top .camera-label { display:none; }
  .studio-v2 .stage-top .studio-links { margin-left:auto; }
  .studio-v2 .studio-settings-toggle .camera-settings-text { display:none; }
  .studio-v2 .stage-top .studio-settings-toggle { min-width:44px; min-height:44px; }
  .studio-v2 .cap-mode-btn span,.studio-v2 .camera-edge span { display:none; }
  .studio-v2 .has-camera .cap-mode-btn { min-width:44px; min-height:44px; padding:8px 14px; }
  .studio-v2 .cap-mode-btn i { font-size:20px; }
  .studio-v2 .camera-edge { height:48px; min-height:44px; }
  .studio-v2 .viewer .effect-navigator-row { bottom:max(4px,env(safe-area-inset-bottom)); }
  .studio-v2 .camera-shutter-row { margin-bottom:0; }
}
.studio-v2 .seo-title { font-size:clamp(24px,3vw,34px); line-height:1.2; font-weight:600; letter-spacing:-.7px; margin:0 0 24px; color:var(--text); }
.seo-browse { display:flex; flex-wrap:wrap; gap:10px 20px; margin:20px 0 28px; }
.seo-browse a,.seo-breadcrumb a { color:#536748; text-underline-offset:4px; font-size:13px; }
.seo-page-copy { max-width:900px; }
.seo-page-copy article { margin:24px 0; }
.studio-v2 .seo-page-copy h2 { font-size:22px; line-height:1.3; letter-spacing:-.4px; margin:0 0 10px; }
.seo-page-copy p { font-size:14px; line-height:1.8; color:var(--muted); }
.seo-breadcrumb { display:flex; flex-wrap:wrap; gap:10px; font-size:12px; color:var(--muted); }
.seo-breadcrumb span::before { content:'›'; margin-right:10px; }
@media(max-width:520px) { .seo-browse a { padding:7px 0; }.seo-page-copy p { font-size:13px; } }