:root{
  color-scheme:dark;
  --topbar:68px;
  --chat-width:400px;
  --gap:12px;
  --page:#07111d;
  --page-2:#0a1624;
  --surface:#0e1a28;
  --surface-2:#132234;
  --input:#142235;
  --text:#eef3f8;
  --muted:#91a0b2;
  --line:rgba(255,255,255,.055);
  --accent:#4e86d8;
  --green:#27b976;
  --red:#db4d55;
  --bubble:#172639;
  --bubble-own:#285fa8;
}
html[data-theme="light"]{
  color-scheme:light;
  --page:#f2efe9;
  --page-2:#f8f5ef;
  --surface:#ffffff;
  --surface-2:#f1eee8;
  --input:#ece8e1;
  --text:#292d32;
  --muted:#767d85;
  --line:rgba(55,48,38,.07);
  --accent:#5a7eaf;
  --green:#3f966b;
  --red:#c84e56;
  --bubble:#ece8e1;
  --bubble-own:#5a7eaf;
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden}
body{font:14px/1.4 Inter,Segoe UI,Arial,sans-serif;background:var(--page);color:var(--text)}
button,input,textarea{font:inherit}
button{cursor:pointer}
.app{width:100vw;height:100dvh;overflow:hidden;background:linear-gradient(140deg,var(--page),var(--page-2))}
.topbar{height:var(--topbar);display:flex;align-items:center;gap:16px;padding:0 22px}
.brand{display:flex;align-items:center;gap:10px;font-size:22px}.logo{color:#27a8ff;font-size:26px}
.room-title{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:9px}
.header-icon,.header-back{height:38px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--text)}
.header-icon{width:38px}.header-back{padding:0 12px}
.header-back.is-concealed{opacity:0;transform:translateX(-8px);pointer-events:none}
.count{color:var(--muted)}
.end-call{border:0;border-radius:11px;padding:11px 17px;background:#c9343b;color:#fff;font-weight:700}
.workspace{position:relative;width:100%;height:calc(100dvh - var(--topbar));display:flex;gap:var(--gap);padding:0 18px 16px;overflow:hidden}
.workspace.chat-collapsed{gap:0}
.stage{position:relative;flex:1 1 auto;min-width:0;min-height:0;padding:10px 0 82px;overflow:hidden}
.gallery{width:100%;height:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:8px}
.tile{position:relative;min-width:0;min-height:0;overflow:hidden;border:1px solid var(--line);border-radius:14px;background:linear-gradient(145deg,var(--surface-2),var(--surface));box-shadow:0 2px 8px rgba(0,0,0,.14)}
.tile.active-speaker{outline:2px solid var(--accent);outline-offset:-2px}
.tile img{width:100%;height:100%;object-fit:cover;display:block}.avatar{width:100%;height:100%;display:grid;place-items:center;font-size:clamp(30px,4vw,58px);background:radial-gradient(circle,#138e8c,#0c5e65 45%,#101826 46%)}
.name{position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);padding:6px 10px;border-radius:9px;background:rgba(5,11,18,.76);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}
html[data-theme="light"] .name{background:rgba(255,255,255,.88);color:#292d32}
.muted{color:var(--red);margin-right:5px}
.share-preview{height:100%;padding:clamp(10px,1.5vw,18px);background:linear-gradient(150deg,#0a3138,#0d1726)}
html[data-theme="light"] .share-preview{background:linear-gradient(145deg,#e8f0f2,#fff);color:#2a3035}
.share-preview h3{margin:14px 0 8px;font-size:clamp(14px,1.5vw,22px)}.mini-road{display:flex;gap:5px;margin-top:18px}.mini-road i{height:16px;flex:1;border-radius:999px;background:#2584d7}.mini-road i:nth-child(2){background:#1da76a}.mini-road i:nth-child(3){background:#d3a022}.mini-road i:nth-child(4){background:#7a45bd}
.hover-audio{position:absolute;z-index:6;left:50%;top:8px;width:min(215px,calc(100% - 16px));height:36px;transform:translateX(-50%) translateY(-7px);opacity:0;pointer-events:none;display:flex;align-items:center;gap:6px;padding:5px 7px;border-radius:999px;background:rgba(9,17,30,.94);transition:opacity .18s ease,transform .18s ease}
.tile:hover .hover-audio{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}.hover-audio input{flex:1;min-width:30px}.hover-audio button{width:26px;height:26px;border:0;border-radius:50%;background:#172131;color:white}.hover-audio button.on{background:#8e242b}
.bottom-bar{position:absolute;z-index:15;left:0;right:0;bottom:14px;height:52px;display:flex;align-items:center;justify-content:center;pointer-events:none}.call-controls{display:flex;gap:8px;pointer-events:auto}
.split-control{position:relative;display:flex}.control-main,.control-menu,.single-control,.tool-button{height:52px;border:1px solid var(--line);background:#111e2d;color:var(--text);box-shadow:0 2px 7px rgba(0,0,0,.16)}
html[data-theme="light"] .control-main,html[data-theme="light"] .control-menu,html[data-theme="light"] .single-control,html[data-theme="light"] .tool-button,html[data-theme="light"] .header-icon,html[data-theme="light"] .header-back{background:#fff}
.control-main{min-width:118px;border-radius:11px 0 0 11px;border-right:0;display:flex;align-items:center;gap:9px;padding:0 13px}.control-main.is-off{color:var(--red)}.control-main.is-on{color:var(--green)}
.control-menu{width:38px;border-radius:0 11px 11px 0}.single-control{min-width:100px;border-radius:11px;display:flex;align-items:center;justify-content:center;gap:9px;padding:0 13px}.single-control.is-off{color:var(--red)}
.drawing-dock{position:absolute;right:4px;bottom:0;height:52px;display:flex;align-items:center;gap:8px;pointer-events:auto}.tool-wrap{position:relative}.tool-button{min-width:58px;border-radius:11px}.is-disabled{opacity:.38;pointer-events:none}
.floating-panel{position:absolute;z-index:60;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px) scale(.98);transform-origin:bottom center;transition:opacity .22s ease,transform .28s cubic-bezier(.2,.8,.2,1),visibility 0s linear .28s}
.floating-panel.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1);transition-delay:0s}
.device-menu{left:0;bottom:62px;min-width:250px;padding:7px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:0 10px 28px rgba(0,0,0,.24)}
.device-menu button{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:2px;border:0;border-radius:9px;padding:9px 10px;background:transparent;color:var(--text);text-align:left}.device-menu button:hover,.device-menu button.is-selected{background:var(--surface-2)}.device-menu small{color:var(--muted)}
.tool-menu{right:0;bottom:62px;width:250px;padding:8px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:0 10px 28px rgba(0,0,0,.24)}.tool-menu>button{width:100%;border:0;border-radius:9px;padding:9px 10px;background:transparent;color:var(--text);text-align:left}.tool-menu>button:hover{background:var(--surface-2)}kbd{float:right;color:var(--muted)}.tool-divider{height:1px;margin:6px 4px;background:var(--line)}
.color-heading{display:grid;grid-template-columns:1fr auto 26px;gap:7px;align-items:center;padding:7px 9px;color:var(--muted);font-size:12px}.color-heading label{display:flex;align-items:center;gap:2px}.color-heading input{width:58px;border:0;outline:0;background:transparent;color:var(--text);font:12px ui-monospace,Consolas,monospace;text-transform:uppercase}.current-color{width:26px;height:26px;border:4px solid var(--surface-2);border-radius:50%;background:#2f80ff}
.color-panel{max-height:0;opacity:0;overflow:hidden;transform:translateY(-6px);transition:max-height .34s cubic-bezier(.2,.8,.2,1),opacity .22s ease,transform .28s ease}.color-panel.is-open{max-height:230px;opacity:1;transform:translateY(0)}
.wheel-wrap{position:relative;width:150px;height:150px;margin:7px auto}#colorWheel{width:150px;height:150px;border-radius:50%;display:block;cursor:crosshair}.wheel-cursor{position:absolute;width:14px;height:14px;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #0008;transform:translate(-50%,-50%);left:50%;top:50%;pointer-events:none}.reset-color{width:100%;border:0;border-radius:9px;padding:8px 10px;background:var(--surface-2);color:var(--text)}
.chat{flex:0 0 var(--chat-width);width:var(--chat-width);min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:15px;background:#0d1927;transition:flex-basis .55s cubic-bezier(.2,.8,.2,1),width .55s cubic-bezier(.2,.8,.2,1),opacity .35s ease,transform .55s cubic-bezier(.2,.8,.2,1),margin-left .55s cubic-bezier(.2,.8,.2,1),background-color .3s ease,border-color .3s ease}
html[data-theme="light"] .chat{background:#fbf8f2}.workspace.chat-collapsed .chat{flex-basis:0;width:0;opacity:0;transform:translateX(36px);pointer-events:none;margin-left:calc(-1 * var(--gap));border-width:0}
.chat-head{height:58px;display:flex;align-items:center;padding:0 15px;border-bottom:1px solid var(--line)}.chat-toggle{margin-left:auto;width:36px;height:36px;border:0;border-radius:9px;background:var(--surface-2);color:var(--text)}
.messages{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:15px}.message{display:grid;grid-template-columns:32px minmax(0,1fr);gap:9px;margin-bottom:15px;min-width:0}.message.mine{grid-template-columns:minmax(0,1fr)}.ava{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#1e9467;font-size:11px}.meta{color:var(--muted);font-size:11px;margin-bottom:4px}.bubble{display:inline-block;max-width:100%;padding:9px 11px;border-radius:6px 15px 15px 15px;background:var(--bubble);word-break:break-word;overflow-wrap:anywhere}.message.mine .bubble{justify-self:end;background:var(--bubble-own);color:white;border-radius:15px 6px 15px 15px}
.message.is-new{animation:messageIn .72s cubic-bezier(.2,.8,.2,1),messageBlink .9s ease .18s}.message.mine.is-new{--message-x:18px}.message:not(.mine).is-new{--message-x:-18px}
@keyframes messageIn{from{opacity:0;filter:blur(8px);transform:translateX(var(--message-x)) translateY(4px)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes messageBlink{0%,100%{filter:brightness(1)}48%{filter:brightness(1.14)}}
.session-note{text-align:center;padding:8px;color:var(--muted);font-size:11px}.composer{display:flex;align-items:flex-end;gap:6px;padding:10px;border-top:1px solid var(--line)}.composer textarea{flex:1;min-width:0;min-height:40px;max-height:calc(1.4em * 5 + 22px);resize:none;overflow-y:auto;border:0;outline:0;border-radius:18px;background:var(--input);color:var(--text);padding:10px 13px;line-height:1.4}.plain-icon,.send{width:38px;height:38px;border:0;border-radius:50%}.plain-icon{background:transparent;color:var(--text);font-size:20px}.send{background:#3479c9;color:white;font-size:18px}.emoji-wrap{position:relative}.emoji-panel{right:0;bottom:48px;width:320px;padding:10px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:0 10px 28px rgba(0,0,0,.24);display:grid;grid-template-columns:repeat(8,1fr);gap:4px;overflow:visible}.emoji-panel button{border:0;border-radius:9px;background:transparent;font-size:21px;padding:5px}.emoji-panel button:hover{background:var(--surface-2)}
.open-chat{position:absolute;z-index:40;right:10px;top:50%;opacity:0;pointer-events:none;transform:translateY(-50%) translateX(70px);border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--text);padding:10px 13px;transition:opacity .35s ease,transform .55s cubic-bezier(.2,.8,.2,1)}.workspace.chat-collapsed .open-chat{opacity:1;pointer-events:auto;transform:translateY(-50%)}
.focus-view{width:100%;height:100%}.shared-canvas{position:relative;width:100%;height:100%;overflow:hidden;border:1px solid var(--line);border-radius:14px;background:var(--surface)}.presentation{position:absolute;inset:0;padding:clamp(14px,2vw,25px);overflow:hidden}.presentation h1{margin:0 0 10px}.legend{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:14px;color:var(--muted)}.legend i{display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:50%}.blue{background:#2f80ff}.green{background:#20c777}.yellow{background:#f1b928}.purple{background:#9a62e7}.roadmap{display:grid;grid-template-columns:minmax(95px,1.1fr) repeat(4,minmax(70px,1fr));gap:1px;border:1px solid var(--line);border-radius:16px;overflow:hidden}.roadmap>*{padding:clamp(7px,1.1vw,15px);background:var(--surface-2)}.card{margin:5px;border-radius:11px}.blue-bg{background:#18529a!important}.green-bg{background:#177b50!important}.yellow-bg{background:#987313!important}.purple-bg{background:#613591!important}
.shared-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#050a10}#drawCanvas{position:absolute;z-index:5;inset:0;width:100%;height:100%;pointer-events:none}.drawing-on #drawCanvas{pointer-events:auto;cursor:crosshair}.floating-square{position:absolute;z-index:9;right:12px;bottom:12px;width:42px;height:42px;border:1px solid var(--line);border-radius:11px;background:var(--surface-2);color:var(--text)}
.modal-layer{position:fixed;z-index:100;inset:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .24s ease,visibility 0s linear .24s}.modal-layer.is-open{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.56);backdrop-filter:blur(6px)}.info-card{position:absolute;left:50%;top:50%;width:min(420px,calc(100vw - 30px));transform:translate(-50%,-48%) scale(.96);padding:24px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:0 20px 60px rgba(0,0,0,.35);transition:transform .28s cubic-bezier(.2,.8,.2,1)}.modal-layer.is-open .info-card{transform:translate(-50%,-50%) scale(1)}.modal-close{position:absolute;right:12px;top:12px;width:34px;height:34px;border:0;border-radius:9px;background:var(--surface-2);color:var(--text);font-size:22px}
.transition-ghost{position:fixed;z-index:90;display:none;pointer-events:none;border-radius:14px;background:linear-gradient(145deg,var(--surface-2),var(--surface));box-shadow:0 10px 35px rgba(0,0,0,.28);overflow:hidden}.transition-ghost.is-active{display:block;transition:left .42s cubic-bezier(.2,.8,.2,1),top .42s cubic-bezier(.2,.8,.2,1),width .42s cubic-bezier(.2,.8,.2,1),height .42s cubic-bezier(.2,.8,.2,1),border-radius .42s ease,opacity .18s ease}
.is-hidden{display:none!important}.is-concealed{transition:opacity .24s ease,transform .28s ease}
.image-viewer{position:fixed;z-index:120;inset:0}.viewer-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.76);backdrop-filter:blur(5px)}.viewer-frame{position:fixed;overflow:hidden;border:2px solid white;border-radius:14px;transition:left .42s cubic-bezier(.2,.8,.2,1),top .42s cubic-bezier(.2,.8,.2,1),width .42s cubic-bezier(.2,.8,.2,1),height .42s cubic-bezier(.2,.8,.2,1),transform .15s ease}.viewer-frame img{width:100%;height:100%;object-fit:contain;background:#07090c}.viewer-hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);padding:7px 10px;border-radius:9px;background:rgba(0,0,0,.66);color:white;font-size:11px;white-space:nowrap}
body,.app,.topbar,.tile,.name,.control-main,.control-menu,.single-control,.tool-button,.chat,.bubble,.composer textarea,.floating-panel,.shared-canvas,.header-icon,.header-back{transition-property:background-color,color,border-color,box-shadow;transition-duration:.3s;transition-timing-function:ease}
.chat{transition:flex-basis .55s cubic-bezier(.2,.8,.2,1),width .55s cubic-bezier(.2,.8,.2,1),opacity .35s ease,transform .55s cubic-bezier(.2,.8,.2,1),margin-left .55s cubic-bezier(.2,.8,.2,1),background-color .3s ease,border-color .3s ease}
@media(max-width:1180px){:root{--chat-width:350px}.control-main{min-width:88px}.control-main b,.single-control b{display:none}}
@media(max-width:820px){:root{--topbar:56px}.workspace{padding:0 7px 7px}.stage{padding-bottom:70px}.chat{position:absolute;z-index:50;inset:7px 7px 7px auto;width:min(92vw,390px);flex-basis:min(92vw,390px)}.workspace.chat-collapsed .chat{width:min(92vw,390px);flex-basis:min(92vw,390px);transform:translateX(calc(100% + 14px));margin-left:0}.control-main{min-width:52px}.room-title,.count{display:none}.drawing-dock{right:0}.emoji-panel{width:min(320px,88vw)}}


/* ============================================================
   ECHO INTERACTION OWNER — V15
   ============================================================ */



/* Real content morph support. */
.tile[data-share="true"],
.shared-canvas{
  view-transition-name:none;
}
::view-transition-group(focus-surface){
  animation-duration:.48s;
  animation-timing-function:cubic-bezier(.2,.8,.2,1);
}
::view-transition-old(focus-surface),
::view-transition-new(focus-surface){
  height:100%;
  width:100%;
  object-fit:cover;
  overflow:hidden;
  mix-blend-mode:normal;
}

/* Fallback ghost now carries real cloned content. */
.transition-ghost{
  color:var(--text);
}
.transition-ghost .share-preview,
.transition-ghost .presentation{
  width:100%;
  height:100%;
}
.transition-ghost img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Dock remains available in fullscreen. */
.dock-anchor{display:none}
.shared-canvas > .drawing-dock{
  position:absolute;
  z-index:20;
  right:64px;
  bottom:12px;
}
.shared-canvas > .drawing-dock .tool-menu{
  bottom:62px;
}

/* Reverse close animations remain visible until finished. */
.floating-panel.is-closing{
  opacity:0;
  visibility:visible;
  pointer-events:none;
  transform:translateY(10px) scale(.98);
}
.color-panel.is-closing{
  max-height:0;
  opacity:0;
  transform:translateY(-6px);
}

/* All new messages enter from the left, including our own. */
.message.mine.is-new,
.message:not(.mine).is-new{
  --message-x:-18px;
}

/* Confirmation dialog. */
.confirm-card{
  position:absolute;
  left:50%;
  top:50%;
  width:min(400px,calc(100vw - 30px));
  transform:translate(-50%,-48%) scale(.96);
  padding:24px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface);
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  transition:transform .28s cubic-bezier(.2,.8,.2,1);
}
.modal-layer.is-open .confirm-card{
  transform:translate(-50%,-50%) scale(1);
}
.confirm-card h2{margin:0 0 8px}
.confirm-card p{margin:0;color:var(--muted)}
.confirm-actions{
  display:flex;
  justify-content:flex-end;
  gap:9px;
  margin-top:22px;
}
.secondary-action,
.danger-action{
  height:40px;
  padding:0 15px;
  border-radius:10px;
}
.secondary-action{
  border:1px solid var(--line);
  background:var(--surface-2);
  color:var(--text);
}
.danger-action{
  border:0;
  background:#c9343b;
  color:#fff;
  font-weight:700;
}


/* The pencil is available immediately; eraser is gated by focus state. */
.tool-button.is-active-tool{
  color:var(--accent);
}

/* Attachment tray. */
.attachment-tray{
  display:none;
  flex:0 0 auto;
  gap:8px;
  padding:8px 10px;
  overflow-x:auto;
  overflow-y:hidden;
  border-top:1px solid var(--line);
  scrollbar-width:thin;
}
.attachment-tray.has-items{display:flex}
.attachment-chip{
  position:relative;
  flex:0 0 auto;
  max-width:170px;
  min-width:92px;
  padding:8px 30px 8px 10px;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--surface-2);
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.attachment-chip img{
  width:88px;
  height:58px;
  object-fit:cover;
  border-radius:8px;
  display:block;
  margin-bottom:5px;
}
.attachment-remove{
  position:absolute;
  right:5px;
  top:5px;
  width:22px;
  height:22px;
  border:0;
  border-radius:7px;
  background:rgba(0,0,0,.22);
  color:white;
}
.attachment-message{
  display:flex;
  flex-direction:column;
  gap:7px;
}
.attachment-message img{
  display:block;
  width:min(240px,100%);
  max-height:180px;
  object-fit:cover;
  border-radius:10px;
}
.attachment-message a{
  color:inherit;
  text-decoration:none;
}

/* Mobile keeps overlay behavior, with slot removed from layout. */
@media(max-width:820px){
}


/* ============================================================
   ECHO CHAT MOTION OWNER — V17
   Restored from the verified V5 implementation.
   Do not override .chat transition elsewhere.
   ============================================================ */

.chat{
  flex:0 0 clamp(380px,30vw,470px);
  width:clamp(380px,30vw,470px);
  min-width:0;
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:15px;
  background:#0d1927;
  opacity:1;
  transform:translateX(0);
  transition:
    flex-basis .52s cubic-bezier(.2,.8,.2,1),
    width .52s cubic-bezier(.2,.8,.2,1),
    opacity .32s ease,
    transform .52s cubic-bezier(.2,.8,.2,1),
    margin .52s cubic-bezier(.2,.8,.2,1),
    border-width .20s ease,
    background-color .30s ease,
    border-color .30s ease;
}

html[data-theme="light"] .chat{
  background:#fbf8f2;
}

.workspace.chat-collapsed .chat{
  flex-basis:0;
  width:0;
  opacity:0;
  transform:translateX(34px);
  pointer-events:none;
  margin-left:calc(-1 * var(--gap));
  border-width:0;
}

.open-chat{
  transition:
    opacity .32s ease,
    transform .52s cubic-bezier(.2,.8,.2,1),
    background-color .30s ease,
    color .30s ease,
    border-color .30s ease;
}

@media(max-width:820px){
  .chat{
    position:absolute;
    z-index:50;
    inset:7px 7px 7px auto;
    width:min(92vw,390px);
    flex-basis:min(92vw,390px);
  }

  .workspace.chat-collapsed .chat{
    width:min(92vw,390px);
    flex-basis:min(92vw,390px);
    transform:translateX(calc(100% + 14px));
    margin-left:0;
    border-width:1px;
  }
}

/* ============================================================
   ECHO IMAGE VIEWER OWNER — V18
   ============================================================ */

.attachment-message img{
  cursor:zoom-in;
}

.viewer-frame{
  background:#07090c;
}

.viewer-frame img{
  user-select:none;
  touch-action:none;
  transform-origin:center center;
  cursor:default;
  transition:transform .12s ease-out;
}

.image-viewer:not(.is-hidden) .viewer-backdrop{
  animation:viewerBackdropIn .28s ease both;
}

@keyframes viewerBackdropIn{
  from{opacity:0}
  to{opacity:1}
}