/* V57.1 — custom controls for vertical project videos. No fullscreen affordance. */
.phone{position:relative}
.phone video{display:block}
.phone .vvc{
  position:absolute;z-index:8;left:14px;right:14px;bottom:14px;
  display:grid;grid-template-columns:38px minmax(0,1fr) auto 34px;align-items:center;gap:10px;
  padding:8px 10px;border:1px solid rgba(255,255,255,.22);border-radius:15px;
  background:rgba(5,7,6,.70);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
}
.phone.vvc-active .vvc,.phone:hover .vvc,.phone:focus-within .vvc{opacity:1;transform:none;pointer-events:auto}
.phone .vvc-toggle,.phone .vvc-mute{
  width:34px;height:34px;border:1px solid rgba(210,163,84,.72);border-radius:50%;
  background:rgba(0,0,0,.32);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0;
}
.phone .vvc-toggle svg,.phone .vvc-mute svg{width:15px;height:15px;fill:currentColor}
.phone .vvc-progress{width:100%;min-width:0;accent-color:#d2a354;cursor:pointer}
.phone .vvc-time{font:600 10px/1 Arial,Helvetica,sans-serif;color:#eee9df;letter-spacing:.05em;white-space:nowrap}
.phone video::-webkit-media-controls-fullscreen-button,
.phone video::-webkit-media-controls-picture-in-picture-button{display:none!important}
@media(max-width:900px){
  .phone .vvc{left:10px;right:10px;bottom:10px;grid-template-columns:36px minmax(0,1fr) auto 32px;gap:8px;padding:7px 8px}
  .phone .vvc-time{font-size:9px}
}