.ipe-libras-link,
.ipe-libras-panel button {
  box-sizing: border-box;
  background: #153c32;
  border: 1px solid #c2e3d4;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .5rem .875rem;
  font: 600 .875rem/1.2 system-ui, sans-serif;
  text-decoration: none;
}
.ipe-libras-link {
  position: fixed;
  z-index: 90;
  inset-inline-end: max(.5rem, env(safe-area-inset-right));
  inset-block-start: 50%;
  box-shadow: 0 2px 8px #0006;
}
.ipe-libras-link:visited, .ipe-libras-link:hover { color: #fff; }
body:has(.player-entry) .ipe-libras-link { inset-block-start: 1rem; }
body.ipe-libras-active .ipe-libras-link { inset-block-start: auto; inset-block-end: .5rem; }
.ipe-libras-link:focus-visible,
.ipe-libras-panel :is(button, a):focus-visible,
.ipe-libras-guide :is(button, a):focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px #1d59a4;
}
.ipe-libras-panel {
  box-sizing: border-box;
  position: fixed;
  z-index: 89;
  inset-inline-end: max(.5rem, env(safe-area-inset-right));
  inset-block-start: max(.5rem, env(safe-area-inset-top));
  width: min(360px, calc(100vw - 1rem));
  max-height: calc(100dvh - 4.5rem);
  display: flex;
  flex-direction: column;
  border: 1px solid #97c8b5;
  border-radius: .75rem;
  overflow: hidden;
  background: #f6faf7;
  color: #142c26;
  box-shadow: 0 8px 40px #0005;
  font: .875rem/1.4 system-ui, sans-serif;
  color-scheme: light;
}
.ipe-libras-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem; }
.ipe-libras-panel-heading h2 { margin: 0; color: #142c26; font: 700 1rem/1.25 system-ui, sans-serif; }
.ipe-libras-controls { display: flex; gap: .5rem; padding: 0 .5rem; }
.ipe-libras-controls button { flex: 1; font-size: .75rem; }
.ipe-libras-panel-status { margin: .5rem; font: .75rem/1.4 system-ui, sans-serif; color: #244a3d; }
.ipe-libras-official-link { color: #124484; padding: .375rem .75rem; font: 600 .75rem/1.4 system-ui, sans-serif; }
.ipe-libras-panel iframe { display: block; width: 100%; height: min(480px, calc(100dvh - 12rem)); min-height: 240px; border: 0; }
.ipe-libras-guide { margin: 0; background: #f6faf7; color-scheme: light; }
.ipe-libras-guide > main { padding: .5rem; color: #172b24; font: .75rem/1.4 system-ui, sans-serif; overflow-wrap: anywhere; }
.ipe-libras-guide-title { margin: 0; font: 700 .875rem/1.3 system-ui, sans-serif; }
.ipe-libras-guide > main p { margin: .375rem 0; }
.ipe-libras-guide > main a { color: #124484; }
.ipe-libras-guide > main button { min-height: 44px; padding: .5rem .75rem; border: 1px solid #477260; border-radius: .5rem; background: #eaf5ee; color: #112e24; font: inherit; cursor: pointer; }
.ipe-libras-guide #ipe-libras-passage { max-height: 5rem; overflow: auto; padding: .375rem; border-left: 2px solid #508aa2; }
.ipe-libras-guide-note { font-size: .6875rem; }
@media (min-width: 1100px) {
  body.ipe-libras-active { box-sizing: border-box; padding-inline-end: 376px; }
}
@media (max-width: 600px) {
  .ipe-libras-panel { inset-block-start: auto; inset-block-end: max(.5rem, env(safe-area-inset-bottom)); width: calc(100vw - 1rem); max-height: 55dvh; }
  .ipe-libras-panel iframe { height: 32dvh; min-height: 160px; }
  .ipe-libras-panel-status { margin-block: .25rem; }
  body.ipe-libras-active { padding-block-end: 56dvh; }
  body.ipe-libras-active .ipe-libras-link { inset-block-start: .5rem; inset-block-end: auto; }
}
@media print { .ipe-libras-link, .ipe-libras-panel { display: none !important; } body.ipe-libras-active { padding: 0; } }