/* Compact control strip: Back | Langs | Mute */ .vcv-strip{ position:fixed; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:8px 12px; border-radius:16px; box-shadow:0 8px 24px rgba(0,0,0,.25); background:#fff; color:#111; z-index:1100; } .vcv-strip a,.vcv-strip button{font:inherit;color:inherit;background:transparent;border:0;text-decoration:none;padding:8px 12px;border-radius:12px} .vcv-strip a:hover,.vcv-strip button:hover{background:rgba(0,0,0,.06)} .vcv-strip .langs{display:flex;gap:8px;justify-content:center} .vcv-strip .langs a.active{font-weight:700;background:rgba(0,0,0,.06)} .vcv-strip .mute{width:40px;height:40px;display:grid;place-items:center} .vcv-strip .mute img{width:22px;height:22px;display:block} .vcv-strip a{ text-decoration:none } .vcv-strip a:focus,.vcv-strip button:focus{ outline:2px solid var(--ring-fallback,#1a73e8); outline-offset:2px } @media (prefers-color-scheme:dark){ .vcv-strip{background:#111;color:#fff} .vcv-strip a:hover,.vcv-strip button:hover{background:rgba(255,255,255,.12)} .vcv-strip .langs a.active{background:rgba(255,255,255,.12)} } /* Desktop — top-right */ @media (min-width:901px){ .vcv-strip{ top:12px; right:12px; left:auto; transform:none; max-width:var(--vcv-strip-max,420px); width:min(46vw,var(--vcv-strip-max,420px)); } } /* Mobile — bottom center */ @media (max-width:900px){ .vcv-strip{ bottom:10px; left:50%; transform:translateX(-50%); width:min(96vw,var(--vcv-strip-max,420px)); padding-bottom:calc(env(safe-area-inset-bottom,0px) + 8px); } .page-vcv video{ margin-bottom:72px } } /* Hide any legacy controls that might slip through */ .page-vcv .Back-button, .page-vcv .Locale-switch, .page-vcv [data-ui="pills"], .page-vcv .pill-bar, .page-vcv .top-controls{ display:none !important } /* Optional width presets (set on ) */ .size-320 .vcv-strip{ --vcv-strip-max:320px } .size-360 .vcv-strip{ --vcv-strip-max:360px } .size-380 .vcv-strip{ --vcv-strip-max:380px } .size-400 .vcv-strip{ --vcv-strip-max:400px } .size-420 .vcv-strip{ --vcv-strip-max:420px } .size-440 .vcv-strip{ --vcv-strip-max:440px } /* extra safety hide */ .page-vcv a[href="/"][data-old-back], .page-vcv .floating-back { display:none !important; }