:root { color-scheme: light dark; }
    body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
    .wrap { max-width: 680px; margin: 0 auto; padding: 16px; }
    h1 { font-size: 1.65rem; margin: 0 0 12px; }
    h2 { font-size: 1.15rem; margin-top:-12px; }
    .card { background: Canvas; color: CanvasText; border: 1px solid #ccc; border-radius: 12px; padding: 14px; margin: 12px 0; }
    .cardc { background: #EFEFEF; color: CanvasText; border: 1px solid #ccc; border-radius: 12px; padding: 14px; margin: 12px 0; }
    label { display: block; font-weight: 600; margin-bottom: 6px; }
    textarea, input[type="number"] {
      width: 100%; box-sizing: border-box; padding: 10px; border-radius: 8px; border: 1px solid #aaa; font-size: 1rem;
      background: Field; color: FieldText;
    }
    button {
      width: 100%; padding: 12px; font-size: 1rem; border: 0; border-radius: 10px; cursor: pointer;
      background: #2563eb; color: white; font-weight: 600;
    }
    button:disabled { opacity: .6; cursor: progress; }
    .row { display: grid; grid-template-columns: 1fr 100px; gap: 10px; }
    .muted { color: #666; font-size: .9rem; }
    .dmuted { color: #666; font-size: .82rem; padding-right:8px;}
    .ai_graders_txt { color: #666; font-size: .8rem; }
    .answer { white-space: pre-wrap; }
    .error { color: #b91c1c; }
    .pill { display: inline-block; padding: 4px 8px; font-size: .8rem; border-radius: 999px; background: #eef2ff; color: #3730a3; }
     .tight-row { display: flex; align-items: flex-end; gap: 28px; }
    .btn-inline { width: 92px; white-space: nowrap; margin-left:16px; }
    #n { width: 64px; }
    
    .thinking {
      display:inline-block;
      width:18px; height:18px;
      border:3px solid #ccc;
      border-top-color: transparent;
      border-radius:50%;
      animation: spin .8s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    
    /* Center the spinner inside the answer box */
    .answer { min-height: 28px; display:flex; align-items:center; }
    .answer.pending { justify-content:center; }
    
.image-container {
  position: relative;
  display: block;
  width: 100%;
  max-width: 480px;       /* sets a nice max width on large screens */
  margin: 4px auto;
}

.image-container img {
  width: 84%; /* phone */
  height: auto;
  display: block;
  padding-left:6px;
}

/* Medium screens (tablets / small laptops): scale down a bit */
@media (min-width: 768px) {
  .image-container {
    max-width: 420px;   /* was 480px earlier */
  }
}

/* Larger laptops/desktops: smaller logo */
/*
@media (min-width: 1200px) {
  .image-container {
    max-width: 360px;  
  }
}
*/

@media (min-width: 1200px) {
  .image-container {
    max-width: 360px;   /* smaller logo */
    margin-left:410px;
  }
}

.overlay-text {
  position: absolute;
  top: 50%;               /* vertically centered by default */
  left: 50%;              /* horizontally centered by default */
  transform: translate(-42%, 198%); /* -39/180/100 centers relative to image */
  width: 80%;
  text-align: center;
  font: bold 13px/1.4 Helvetica, Arial, sans-serif;
  color: #1d3c72;
  text-shadow: 1px 1px 2px rgba(255,255,255,.85);
}

/* smaller screens: keep text readable */
@media (max-width: 600px) {
  .overlay-text {
    font-size: 11px;
    width: 70%;
  }
}

/* large screens: make text a little bigger */
@media (min-width: 1000px) {
  .overlay-text {
    font-size: 12px;
    width: 100%;
    transform: translate(-36%, 210%);
  }
}

.scorebox { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.score-pill {
  display:inline-block; padding:6px 10px; border-radius:999px;
  background:#DBEAFE; color:#000; font-size:.9rem; font-weight:600;
  border:1px solid rgba(0,0,0,.08);
}
.score-pill.first {
  background: #BFDBFE;   /* one step darker than #DBEAFE */
  /* font-weight: 700; */
}

/* Phones: smaller pills, no wrapping, smooth horizontal scroll if needed */
@media (max-width: 430px) {
  .scorebox {
    flex-wrap: nowrap;           /* keep them on one line */
    overflow-x: auto;            /* allow sideways scroll if still too long */
    -webkit-overflow-scrolling: touch;
    gap: 6px;                    /* tighter spacing */
    padding-bottom: 4px;         /* avoid clipping on iOS scrollbars */
  }
  .score-pill {
    font-size: 12px;             /* was .9rem */
    padding: 4px 6px;            /* tighter padding */
    white-space: nowrap;         /* no line breaks inside a pill */
    flex: 0 0 auto;              /* don’t shrink */
  }
  .score-pill.first {
    font-weight: 700;            /* keep emphasis, but same size */
  }
}

.answer-header {
  display: flex;
  justify-content: space-between;  /* model left, meta right */
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}
#answer_meta {
  display: flex;
  flex-direction: column;          /* Score on top, timing under */
  align-items: flex-end;            /* push content to the right edge */
  text-align: right;                /* right-align text */
}
#answer {
  white-space: pre-wrap;
  margin-top: 6px;
}
#intro { color: #333; font-size: 0.85rem; padding-right:20px; }

/* tablets / small laptops */
@media (min-width: 768px) {
  #intro {
    font-size: 1.05rem;   /* bigger than 0.85rem */
    padding-right: 36px;  /* a bit more breathing room */
    line-height: 1.5;     /* optional readability boost */
  }
}

/* larger laptops/desktops */
@media (min-width: 1200px) {
  #intro {
    font-size: 1.15rem;
    padding-right: 144px;
  }
}

.input-wrap { position: relative; }

.clear-link {
  position: absolute;
  right: -142px;
  bottom: -18px;
  background: none;
  border: 0;
  color: #888888;
  font-size: .8rem;
  text-decoration: none;
  cursor: pointer;
  padding: 2px 4px;
}
.clear-link:focus-visible {
  outline: 2px solid #2563eb;
  border-radius: 4px;
}

/* larger laptops / desktops */
@media (min-width: 1200px) {
  .clear-link {
    right: -294px;        /* tiny inset so it doesn’t hug the border */
    bottom: -18px;
  }
}

.input-wrap-xx > textarea {
  padding-bottom: 28px;  /* adjust if you change font-size of the link */
}

.clear-link-xx {
  position: absolute;
  right: 10px;
  bottom: 8px;
  background: none;
  border: 0;
  color: #888;
  font-size: .8rem;
  text-decoration: none;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
}

.clear-link-xx:hover { text-decoration: underline; }
.clear-link-xx:focus-visible { outline: 2px solid #2563eb; border-radius: 4px; }

.breadcrumb {
  font-size: 14px;
  color: #555555;             /* default text color */
}

.breadcrumb a,
.breadcrumb a:visited,
.breadcrumb a:hover,
.breadcrumb a:focus,
.breadcrumb a:active {
  color: #555555;             /* keep links same color in all states */
  text-decoration: none;      /* no underlines */
}

.breadcrumb .sep {
  margin: 0 2px;
  color: #bbbbbb;             /* optional: lighter separator */
}

/* Current page (not a link) */
.breadcrumb [aria-current="page"] {
  font-weight: 600;
}

.site-footer {
  margin-top: 24px;
  border-top: 1px solid #e6e6e6;
  padding: 14px 0;
  background: #fff;
  font-size: 14px;
  color: #555555;
}

.site-footer .footer-inner {
  max-width: 900px;           /* match your .wrap width if different */
  margin: 0 auto;
  padding: 0 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;            /* wraps nicely on phones */
}

.footer-links a,
.footer-links a:visited,
.footer-links a:hover,
.footer-links a:focus,
.footer-links a:active {
  color: #555555;
  text-decoration: none;      /* no underlines in any state */
}

.footer-links .dot {
  margin: 0 10px;
  color: #bbbbbb;             /* subtle separator */
}

.footer-copy {
  color: #777777;
  font-size: 13px;
}

/* Optional: sticky-to-bottom when content is short */
html, body {
  height: 100%;
}
/*body {*/
/*  display: flex;*/
/*  flex-direction: column;*/
/*}*/

.wrap {                       /* your main page container */
  flex: 1 0 auto;             /* lets content grow and pushes footer down */
}
.site-footer {
  flex-shrink: 0;
}