/* Unbarriered styles */
:root{
  --ub-scale: 100%;
  --ub-letter-spacing: 0px;
  --ub-word-spacing: 0px;
  --ub-line-height: 120%;
  --ub-offset-x: 24px;
  --ub-offset-y: 24px;
}
html{
  font-size: var(--ub-scale);
}
body{
  letter-spacing: var(--ub-letter-spacing);
  word-spacing: var(--ub-word-spacing);
  line-height: var(--ub-line-height);
}

/* Skip link */
.ub-skip-link{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.ub-skip-link:focus{
  position:static; width:auto; height:auto; padding:.5rem 1rem;
  background:#000; color:#fff; z-index:999999;
}

/* Toggle button positions */
.ub-root{ position:fixed; z-index:99998; }
.ub-root.ub-pos-left-top{ left:var(--ub-offset-x); top:var(--ub-offset-y); }
.ub-root.ub-pos-left-middle{ left:var(--ub-offset-x); top:50%; transform:translateY(-50%); }
.ub-root.ub-pos-left-bottom{ left:var(--ub-offset-x); bottom:var(--ub-offset-y); }
.ub-root.ub-pos-right-top{ right:var(--ub-offset-x); top:var(--ub-offset-y); }
.ub-root.ub-pos-right-middle{ right:var(--ub-offset-x); top:50%; transform:translateY(-50%); }
.ub-root.ub-pos-right-bottom{ right:var(--ub-offset-x); bottom:var(--ub-offset-y); }

.ub-toggle{
  border:none; border-radius:999px;
  width:56px; height:56px;
  background:#1f2937; color:#fff; box-shadow:0 6px 16px rgba(0,0,0,.2);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.ub-toggle:focus{ outline:3px solid #2563eb; outline-offset:2px; }
.ub-toggle-icon img{ width:28px; height:28px; display:block; }

/* Panel */
.ub-panel{
  position:absolute;
  right:66px; bottom:0;
  width: min(340px, calc(100vw - 40px));
  max-height: min(70vh, 540px);
  overflow:auto;
  background:#ffffff; color:#111827; border-radius:16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  padding:16px;
}
.ub-root.ub-pos-left-top .ub-panel,
.ub-root.ub-pos-left-middle .ub-panel,
.ub-root.ub-pos-left-bottom .ub-panel{
  left:66px; right:auto;
}
.ub-panel h3{
  font-size:16px; margin:.25rem 0 .5rem 0;
}
.ub-panel button{
  margin:.25rem .25rem .25rem 0; padding:.5rem .75rem; border-radius:10px; border:1px solid #e5e7eb; background:#f9fafb; cursor:pointer;
}
.ub-panel button[aria-pressed="true"]{
  background:#111827; color:#fff;
}
.ub-panel select, .ub-panel input[type="range"]{
  margin:.25rem 0; width:100%;
}
.ub-range{ margin-bottom:.5rem; }
.ub-locked{
  padding:.5rem; background:#f3f4f6; border:1px dashed #d1d5db; border-radius:10px;
}

/* Contrast modes */
html.ub-contrast-high{
  filter:none !important;
  background:#000 !important; color:#ff0 !important;
}
html.ub-contrast-high body{ background:#000 !important; color:#ff0 !important; }
html.ub-contrast-dark{ filter:none !important; background:#111827 !important; color:#e5e7eb !important; }
html.ub-contrast-dark body{ background:#111827 !important; color:#e5e7eb !important; }
html.ub-contrast-desat{ filter: grayscale(1) contrast(1.1); }

/* Dyslexic font */
@font-face{
  font-family: "OpenDyslexic";
  src: local("OpenDyslexic");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
html.ub-font-dys, html.ub-font-dys body, html.ub-font-dys *{
  font-family: "OpenDyslexic", system-ui, -apple-system, Segoe UI, Roboto, Arial, Noto Sans, sans-serif !important;
}

/* Main anchor (skip link target) */
.ub-main-anchor{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }