*{box-sizing:border-box}
:root{
  --bg:#f7f9ff;
  --paper:rgba(255,255,255,.78);
  --paper2:rgba(255,255,255,.94);
  --line:rgba(15,23,42,.10);
  --text:#111827;
  --muted:#677286;
  --btn:#070a12;
  --shadow:0 28px 85px rgba(15,23,42,.075);
}
html[data-theme="dark"]{
  --bg:#080a10;
  --paper:rgba(18,22,32,.78);
  --paper2:rgba(21,26,38,.94);
  --line:rgba(255,255,255,.10);
  --text:#f5f7fb;
  --muted:#a3adbd;
  --btn:#ffffff;
  --shadow:0 28px 85px rgba(0,0,0,.36);
}
html,body{
  width:100%;height:100%;margin:0;overflow:hidden;
  font-family:Arial,Helvetica,sans-serif;color:var(--text);
  background:
    radial-gradient(circle at 0% 0%,rgba(66,133,244,.14),transparent 30%),
    radial-gradient(circle at 100% 0%,rgba(52,168,83,.10),transparent 26%),
    radial-gradient(circle at 52% 100%,rgba(251,188,5,.07),transparent 26%),
    var(--bg);
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(20,30,50,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(20,30,50,.04) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(circle at center,#000,transparent 74%);
}
html[data-theme="dark"] body:before{opacity:.24}
.app{position:relative;z-index:1;width:min(1080px,100%);height:100vh;margin:0 auto;padding:16px;display:grid;grid-template-rows:54px 1fr auto;gap:10px}
.top{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none}
.brand strong{font-size:15px;letter-spacing:-.03em}
.topSymbol{position:relative;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--paper2);border:1px solid var(--line);box-shadow:0 12px 28px rgba(15,23,42,.08);overflow:visible}
.topSymbol:before{content:"";position:absolute;inset:-3px;border-radius:50%;border:1px solid rgba(66,133,244,.32);border-top-color:rgba(52,168,83,.78);border-right-color:rgba(66,133,244,.78);animation:spin 5.5s linear infinite}
.topSymbol img{position:relative;z-index:1;width:28px;height:28px;display:block;object-fit:contain}
.nav{display:flex;gap:16px}
.nav button,.foot a{border:0;background:transparent;color:var(--muted);font:inherit;font-size:12px;cursor:pointer;text-decoration:none}
.nav button:hover,.foot a:hover{color:var(--text)}

.topRight{display:flex;align-items:center;gap:18px;min-width:0}
.creditBox{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:rgba(255,255,255,.55);border-radius:999px;padding:7px 10px;color:var(--text);box-shadow:0 10px 28px rgba(15,23,42,.05)}
html[data-theme="dark"] .creditBox{background:rgba(255,255,255,.06)}
.creditBox span{font-size:12px;font-weight:800;letter-spacing:-.02em;color:var(--text);white-space:nowrap}
.creditBox small{font-size:10px;color:var(--muted);white-space:nowrap}
.creditBox.isLow{border-color:rgba(251,188,5,.45);box-shadow:0 0 0 5px rgba(251,188,5,.10)}
.creditBox.isZero{border-color:rgba(234,67,53,.40);box-shadow:0 0 0 5px rgba(234,67,53,.10)}
.creditBox.isZero span{color:#b91c1c}
html[data-theme="dark"] .creditBox.isZero span{color:#ffb4ad}
.stage{min-height:0;display:grid;grid-template-columns:315px 1fr;gap:14px}
.identity,.chatBox{min-height:0;background:var(--paper);border:1px solid var(--line);border-radius:30px;backdrop-filter:blur(22px);box-shadow:var(--shadow)}
.identity{position:relative;overflow:hidden;padding:22px;display:flex;flex-direction:column;justify-content:center;gap:16px}
.identity:before{
  content:"";position:absolute;inset:-20%;
  background:
    radial-gradient(circle at 50% 34%,rgba(66,133,244,.12),transparent 24%),
    radial-gradient(circle at 78% 70%,rgba(52,168,83,.10),transparent 22%),
    radial-gradient(circle at 20% 78%,rgba(251,188,5,.08),transparent 22%);
  filter:blur(10px);
}
.orb{position:relative;z-index:1;width:220px;height:220px;margin:0 auto;display:grid;place-items:center}
.orbit{position:absolute;border-radius:50%;border:1px solid var(--line)}
.orbit1{inset:0;animation:spin 18s linear infinite}
.orbit2{inset:24px;border-style:dashed;opacity:.9;animation:spin 12s linear reverse infinite}
.orbit3{inset:52px;background:rgba(255,255,255,.58);box-shadow:0 0 70px rgba(66,133,244,.12)}
html[data-theme="dark"] .orbit3{background:rgba(255,255,255,.05)}
.dot{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;z-index:3;pointer-events:none;background:transparent;transform-origin:center;will-change:transform}
.dot:before{content:"";position:absolute;width:9px;height:9px;border-radius:50%}
.d1{animation:spin 7s linear infinite}
.d1:before{background:#34a853;top:78px;right:30px;box-shadow:0 0 16px rgba(52,168,83,.70)}
.d2{animation:spin 9s linear reverse infinite}
.d2:before{background:#4285f4;bottom:42px;left:78px;box-shadow:0 0 16px rgba(66,133,244,.70)}
.centerMark{position:relative;z-index:2;width:94px;height:94px;border-radius:50%;display:grid;place-items:center;background:var(--paper2);border:1px solid rgba(255,255,255,.65);box-shadow:0 24px 64px rgba(15,23,42,.08)}
.centerMark span{font-size:32px;font-weight:900;letter-spacing:-.09em}
@keyframes spin{to{transform:rotate(360deg)}}
.identityText{position:relative;z-index:1}
.livePanel{min-height:162px;display:grid;place-items:center}
.globeScene{
  position:relative;
  width:176px;
  height:118px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:28px;
}
.globeVideo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.84;
  filter:saturate(1.12) brightness(1.06) contrast(1.02);
  mix-blend-mode:screen;
}
.globeGlow{
  position:absolute;
  inset:-18px;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(71,184,255,.18),rgba(71,184,255,.06) 48%,transparent 72%);
  filter:blur(14px);
  pointer-events:none;
  animation:globeGlowPulse 4s ease-in-out infinite;
}
.globeSweep{
  position:absolute;
  inset:-30% -40%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);
  transform:rotate(12deg) translateX(-120%);
  animation:globeSweep 4.8s linear infinite;
  mix-blend-mode:screen;
  pointer-events:none;
}
@keyframes globeGlowPulse{0%,100%{opacity:.58;transform:scale(1)}50%{opacity:.88;transform:scale(1.04)}}
@keyframes globeSweep{0%{transform:rotate(12deg) translateX(-120%)}100%{transform:rotate(12deg) translateX(120%)}}
.livePanel.isListening .globeVideo{opacity:.94;filter:saturate(1.2) brightness(1.12) contrast(1.04)}
.livePanel.isListening .globeGlow{animation-duration:1.4s;opacity:1}
.livePanel.isListening .globeSweep{animation-duration:1.4s;opacity:.95}
.statusLine{position:relative;z-index:1;display:flex;align-items:center;gap:10px;width:max-content;max-width:100%;border:1px solid var(--line);background:rgba(255,255,255,.42);border-radius:999px;padding:12px 14px;color:var(--muted);font-size:12px;transition:all .22s ease}
html[data-theme="dark"] .statusLine{background:rgba(255,255,255,.05)}
.statusLine.isListening{padding-right:16px}
#statusDot{width:10px;height:10px;border-radius:50%;background:#9aa4b2;flex:0 0 auto}
#statusDot.on{background:#34a853;box-shadow:0 0 16px rgba(52,168,83,.60)}
#statusDot.warn{background:#34a853;box-shadow:0 0 16px rgba(52,168,83,.60)}
#statusDot.err{background:#ea4335;box-shadow:0 0 16px rgba(234,67,53,.55)}
#statusTexto{display:block;min-width:0;white-space:nowrap;overflow:hidden;max-width:0;opacity:0;transition:max-width .22s ease,opacity .18s ease}
.statusLine.isListening #statusTexto{max-width:120px;opacity:1}
.chatBox{overflow:hidden;display:grid;grid-template-rows:1fr 74px}
.chat{min-height:0;overflow:auto;padding:18px;display:flex;flex-direction:column;gap:14px}
.msg{display:flex}.msg.user{justify-content:flex-end}
.bubble{max-width:min(760px,88%);border:1px solid var(--line);background:var(--paper2);border-radius:20px;padding:14px 15px;font-size:15px;line-height:1.48;color:var(--text)}
.bot .bubble{border-top-left-radius:7px}
.user .bubble{border-top-right-radius:7px;background:rgba(255,255,255,.52)}
html[data-theme="dark"] .user .bubble{background:rgba(255,255,255,.06)}
.bubble p{margin:0;white-space:pre-wrap}.bubble small{display:block;margin-top:10px;color:var(--muted);font-size:10.5px;letter-spacing:.01em}
.composer{display:grid;grid-template-columns:50px 1fr 50px;gap:10px;padding:12px;border-top:1px solid var(--line);background:var(--paper2)}
.composer input{min-width:0;height:50px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--text);font-size:15px;outline:none;padding:0 16px}
.composer input:focus{border-color:rgba(66,133,244,.45);box-shadow:0 0 0 5px rgba(66,133,244,.12)}
.voiceBtn,.sendBtn{width:50px;height:50px;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer}
.voiceBtn{background:rgba(255,255,255,.88);border:1px solid var(--line);color:var(--text)}
html[data-theme="dark"] .voiceBtn{background:rgba(255,255,255,.06)}
.voiceBtn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.voiceBtn.isListening{background:#111827;color:#fff;box-shadow:0 0 0 6px rgba(66,133,244,.12)}
.sendBtn{background:var(--btn);color:var(--bg);font-weight:800;font-size:22px}
.foot{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--muted);font-size:11px;white-space:nowrap;flex-wrap:wrap;line-height:1.25;padding:2px 0 0}
.foot .aviso{width:100%;text-align:center;color:var(--muted);opacity:.92;font-size:11px}
.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:#080b12;color:#fff;border-radius:999px;padding:10px 14px;font-size:13px;box-shadow:0 18px 50px rgba(0,0,0,.18)}
@media(max-width:820px){
  .app{padding:10px;grid-template-rows:50px 1fr auto;gap:8px}
  .stage{grid-template-columns:1fr}
  .identity{min-height:174px;display:grid;grid-template-columns:150px 1fr;align-items:center;gap:12px;padding:16px;border-radius:24px}
  .orb{width:140px;height:140px}.orbit2{inset:16px}.orbit3{inset:36px}.centerMark{width:62px;height:62px}.centerMark span{font-size:23px}.d1:before{top:48px;right:18px}.d2:before{bottom:26px;left:48px}
  .livePanel{min-height:120px}
  .globeScene{width:128px;height:86px;border-radius:20px}
  .statusLine{grid-column:1/-1;padding:10px 12px}
  .chatBox{border-radius:24px;grid-template-rows:1fr 70px}
  .bubble{max-width:92%;font-size:14px}
  .nav{gap:10px}.foot{gap:8px;overflow:visible;font-size:10px}.foot .aviso{font-size:10px}
  .composer{grid-template-columns:46px 1fr 46px;gap:8px;padding:10px}
  .voiceBtn,.sendBtn{width:46px;height:46px}
}

/* =========================================================
   PENTE FINO MOBILE B27
   Correção para não cortar bolhas, rodapé e área do chat
   ========================================================= */
html,
body{
  max-width:100%;
}

.app,
.top,
.stage,
.identity,
.chatBox,
.chat,
.msg,
.composer,
.foot{
  min-width:0;
  max-width:100%;
}

.top{
  overflow:hidden;
}

.brand{
  min-width:0;
}

.brand strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.stage,
.chatBox,
.chat{
  width:100%;
  overflow-x:hidden;
}

.msg{
  width:100%;
}

.bubble{
  overflow-wrap:anywhere;
  word-break:break-word;
}

.composer input{
  width:100%;
  min-width:0;
}

.foot{
  white-space:normal;
  overflow:hidden;
}

.foot .aviso{
  white-space:normal;
  max-width:100%;
  overflow-wrap:break-word;
  padding:0 8px;
}

@media(max-width:820px){
  html,
  body{
    width:100%;
    max-width:100%;
    overflow:hidden;
  }

  .app{
    width:100%;
    max-width:100%;
    overflow:hidden;
  }

  .top{
    gap:8px;
    min-width:0;
  }

  .brand{
    flex:1 1 auto;
    min-width:0;
  }

  .brand strong{
    font-size:13px;
  }

  .nav{
    flex:0 0 auto;
    gap:8px;
    min-width:0;
  }

  .nav button{
    font-size:11px;
  }

  .stage{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow:hidden;
  }

  .identity,
  .chatBox{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow:hidden;
  }

  .identity{
    grid-template-columns:132px minmax(0,1fr);
  }

  .livePanel{
    min-width:0;
    max-width:100%;
  }

  .chat{
    padding:12px;
    overflow-x:hidden;
  }

  .msg{
    max-width:100%;
  }

  .bubble{
    max-width:90%;
    padding:12px 13px;
  }

  .composer{
    grid-template-columns:46px minmax(0,1fr) 46px;
    min-width:0;
  }

  .foot{
    white-space:normal;
    line-height:1.2;
    overflow:hidden;
    padding-bottom:2px;
  }

  .foot .aviso{
    white-space:normal;
    font-size:9px;
    padding:0 4px;
  }
}

@media(max-width:430px){
  .app{
    padding:8px;
    grid-template-rows:48px 1fr auto;
  }

  .topSymbol{
    width:34px;
    height:34px;
  }

  .topSymbol img{
    width:24px;
    height:24px;
  }

  .nav{
    gap:7px;
  }

  .nav button{
    font-size:10px;
  }

  .stage{
    gap:8px;
  }

  .identity{
    min-height:168px;
    grid-template-columns:126px minmax(0,1fr);
    padding:14px;
  }

  .orb{
    width:126px;
    height:126px;
  }

  .orbit2{
    inset:14px;
  }

  .orbit3{
    inset:34px;
  }

  .centerMark{
    width:58px;
    height:58px;
  }

  .centerMark span{
    font-size:22px;
  }

  .globeScene{
    width:116px;
    height:78px;
    border-radius:18px;
  }

  .chatBox{
    grid-template-rows:1fr 64px;
  }

  .chat{
    padding:10px;
    gap:10px;
  }

  .bubble{
    max-width:89%;
    font-size:13px;
    line-height:1.44;
  }

  .composer{
    grid-template-columns:42px minmax(0,1fr) 42px;
    gap:7px;
    padding:8px;
  }

  .composer input{
    height:44px;
    font-size:14px;
    padding:0 13px;
  }

  .voiceBtn,
  .sendBtn{
    width:42px;
    height:42px;
  }

  .sendBtn{
    font-size:19px;
  }
}



/* B27 Escola Beta 03 */
.brandText{display:flex;flex-direction:column;line-height:1}
.brandText small{margin-top:3px;font-size:10px;color:var(--muted);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.identityText{display:grid;gap:14px;justify-items:center}
.identityInfo{position:relative;z-index:1;text-align:center;display:grid;gap:9px;justify-items:center}
.productTag{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(66,133,244,.18);background:rgba(66,133,244,.08);color:#2563eb;border-radius:999px;padding:6px 10px;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
html[data-theme="dark"] .productTag{color:#93c5fd;background:rgba(66,133,244,.12)}
.identityInfo h1{margin:0;font-size:22px;letter-spacing:-.06em}
.identityInfo p{margin:0;max-width:230px;color:var(--muted);font-size:13px;line-height:1.42}
.statsMini{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:2px}
.statsMini span{border:1px solid var(--line);background:rgba(255,255,255,.42);border-radius:999px;padding:7px 9px;font-size:11px;color:var(--muted);font-weight:700}
html[data-theme="dark"] .statsMini span{background:rgba(255,255,255,.05)}

.introMsg .bubble{max-width:min(760px,94%)}
.introBubble strong{display:block;margin:0 0 7px;font-size:16px;letter-spacing:-.03em}
.introBubble p{color:var(--muted)}
.quickActions{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}
.quickBtn{border:1px solid var(--line);background:rgba(255,255,255,.62);color:var(--text);border-radius:999px;padding:9px 11px;font:inherit;font-size:12px;cursor:pointer;transition:transform .15s ease,border-color .15s ease,background .15s ease}
.quickBtn:hover{transform:translateY(-1px);border-color:rgba(66,133,244,.34);background:rgba(66,133,244,.08)}
html[data-theme="dark"] .quickBtn{background:rgba(255,255,255,.06)}

@media(max-width:720px){
  .identityInfo h1{font-size:18px}
  .identityInfo p{font-size:12px;max-width:190px}
  .statsMini span{font-size:10px;padding:6px 8px}
  .quickActions{gap:7px}
  .quickBtn{font-size:11px;padding:8px 9px}
}


/* =========================================================
   B27 ESCOLA BETA 03 - CORREÇÃO MOBILE FINAL
   Corrige iPhone/Safari: zoom no input, bloco alto e teclado
   ========================================================= */

@media (max-width: 820px) {
  html,
  body {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .app {
    height: auto !important;
    min-height: 100dvh !important;
    width: 100% !important;
    overflow: visible !important;
    padding: 8px !important;
    grid-template-rows: auto auto auto !important;
    gap: 8px !important;
  }

  .stage {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .identity {
    height: auto !important;
    min-height: 148px !important;
    max-height: none !important;
    grid-template-columns: 104px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px !important;
    border-radius: 24px !important;
    overflow: hidden !important;
  }

  .orb {
    width: 104px !important;
    height: 104px !important;
    margin: 0 !important;
    transform-style: preserve-3d !important;
    perspective: 700px !important;
  }

  .orbit1 {
    inset: 0 !important;
    transform: rotateX(62deg) !important;
    animation: b27OrbitMobileTilt1 13s linear infinite !important;
  }

  .orbit2 {
    inset: 14px !important;
    transform: rotateX(62deg) !important;
    animation: b27OrbitMobileTilt2 9s linear infinite reverse !important;
  }

  .orbit3 {
    inset: 30px !important;
  }

  .centerMark {
    width: 54px !important;
    height: 54px !important;
  }

  .centerMark span {
    font-size: 20px !important;
  }

  .dot {
    animation: none !important;
  }

  .d1 {
    animation: spin 7s linear infinite !important;
  }

  .d1:before {
    top: 35px !important;
    right: 11px !important;
  }

  .d2 {
    animation: spin 9s linear reverse infinite !important;
  }

  .d2:before {
    bottom: 19px !important;
    left: 36px !important;
  }

  .identityText {
    min-width: 0 !important;
    gap: 8px !important;
  }

  .livePanel {
    min-height: 68px !important;
    width: 100% !important;
    justify-items: center !important;
  }

  .globeScene {
    width: 112px !important;
    height: 70px !important;
    border-radius: 18px !important;
  }

  .identityInfo {
    gap: 6px !important;
  }

  .productTag {
    padding: 5px 9px !important;
    font-size: 10px !important;
  }

  .identityInfo h1 {
    font-size: 18px !important;
    line-height: 1.05 !important;
  }

  .identityInfo p {
    max-width: 190px !important;
    font-size: 11px !important;
    line-height: 1.32 !important;
  }

  .statsMini {
    gap: 5px !important;
  }

  .statsMini span {
    font-size: 10px !important;
    padding: 5px 7px !important;
  }

  .statusLine {
    display: none !important;
  }

  .chatBox {
    height: min(62dvh, 540px) !important;
    min-height: 360px !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    border-radius: 22px !important;
    overflow: hidden !important;
  }

  .chat {
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 10px !important;
    gap: 10px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .introMsg .bubble {
    max-width: 100% !important;
  }

  .introBubble strong {
    font-size: 15px !important;
  }

  .introBubble p {
    font-size: 13px !important;
    line-height: 1.38 !important;
  }

  .quickActions {
    gap: 6px !important;
    margin-top: 10px !important;
  }

  .quickBtn {
    font-size: 11px !important;
    padding: 8px 9px !important;
  }

  .bubble {
    max-width: 94% !important;
    font-size: 14px !important;
    line-height: 1.44 !important;
  }

  .composer {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 20 !important;
    grid-template-columns: 42px minmax(0, 1fr) 42px !important;
    gap: 7px !important;
    padding: 8px !important;
    background: var(--paper2) !important;
  }

  .composer input {
    height: 44px !important;
    min-height: 44px !important;
    font-size: 16px !important;
    line-height: 44px !important;
    padding: 0 13px !important;
  }

  .voiceBtn,
  .sendBtn {
    width: 42px !important;
    height: 42px !important;
  }

  .sendBtn {
    font-size: 19px !important;
  }

  .foot {
    font-size: 10px !important;
    padding-bottom: 8px !important;
  }
}

@media (max-width: 430px) {
  .identity {
    min-height: 136px !important;
    grid-template-columns: 92px minmax(0, 1fr) !important;
    padding: 10px !important;
    gap: 8px !important;
  }

  .orb {
    width: 92px !important;
    height: 92px !important;
  }

  .orbit2 {
    inset: 12px !important;
  }

  .orbit3 {
    inset: 26px !important;
  }

  .centerMark {
    width: 48px !important;
    height: 48px !important;
  }

  .centerMark span {
    font-size: 18px !important;
  }

  .d1:before {
    top: 30px !important;
    right: 8px !important;
  }

  .d2:before {
    bottom: 16px !important;
    left: 31px !important;
  }

  .globeScene {
    width: 104px !important;
    height: 64px !important;
    border-radius: 16px !important;
  }

  .identityInfo h1 {
    font-size: 17px !important;
  }

  .identityInfo p {
    max-width: 170px !important;
    font-size: 10.5px !important;
  }

  .statsMini span {
    font-size: 9px !important;
    padding: 5px 6px !important;
  }

  .chatBox {
    height: min(64dvh, 520px) !important;
    min-height: 350px !important;
  }
}

@supports not (height: 100dvh) {
  @media (max-width: 820px) {
    .app {
      min-height: 100vh !important;
    }

    .chatBox {
      height: 58vh !important;
    }
  }
}

@keyframes b27OrbitMobileTilt1 {
  from {
    transform: rotateX(62deg) rotateZ(0deg);
  }
  to {
    transform: rotateX(62deg) rotateZ(360deg);
  }
}

@keyframes b27OrbitMobileTilt2 {
  from {
    transform: rotateX(62deg) rotateZ(360deg);
  }
  to {
    transform: rotateX(62deg) rotateZ(0deg);
  }
}

@media (max-width: 820px){
  .top{gap:10px}
  .topRight{gap:8px;flex:1;justify-content:flex-end}
  .creditBox{padding:6px 8px;gap:5px}
  .creditBox span{font-size:10.5px}
  .creditBox small{display:none}
  .nav{gap:8px}
}
@media (max-width: 520px){
  .creditBox{display:none}
}