:root {
  --paper: #ffffff;
  --canvas: #f6f5f0;
  --ink: #181918;
  --muted: #62655e;
  --line: #ddded7;
  --red: #e0362b;
  --red-dark: #b5241c;
  --red-soft: #fff1ed;
  --body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif-font: Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 14px/1.6 var(--body-font); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .43; }
a { color: inherit; }
button, select { touch-action: manipulation; }
button:focus-visible, a:focus-visible, select:focus-visible, textarea:focus-visible, input:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
button { transition: background .15s, border-color .15s, color .15s; }
button:hover:not(:disabled) { border-color: var(--ink); }
[hidden] { display: none !important; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
h1, h2, h3, h4, p { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -100px; left: 16px; padding: 12px; background: var(--ink); color: white; z-index: 999; }
.skip-link:focus { top: 12px; }
.tsp-header { border-bottom: 1px solid var(--ink); background: var(--paper); padding: 23px 40px; }
.header-container, .footer-container { width: 100%; max-width: 1400px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand-group { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.tsp-symbol { flex: 0 0 40px; width: 40px; height: 40px; border: 1.5px solid var(--ink); display: grid; place-items: center; border-radius: 50%; }
.tsp-symbol span { width: 13px; height: 13px; background: var(--red); border-radius: 50%; }
.brand-wordmark { font-size: 24px; line-height: 1.3; font-weight: 850; letter-spacing: -1px; }
.brand-learn { color: var(--red); }
.brand-slogan { display: block; color: var(--muted); font-size: 9px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; margin-top: 2px; }
.header-tools { display: flex; align-items: center; gap: 21px; flex-wrap: wrap; }
.site-home-link { font-size: 11px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.site-home-link:hover { color: var(--red-dark); text-decoration: underline; }
@media (max-width: 800px) { .site-home-link { flex-basis: 100%; order: 3; } }
.connection-status { font-size: 11px; line-height: 1.4; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #838780; flex: 0 0 6px; }
.connection-status[data-state="online"] .status-dot { background: #357248; }
.connection-status[data-state="unavailable"] .status-dot { background: var(--red); }
.connection-status[data-state="offline"] .status-dot { background: #ad7c2c; }
.install-btn { color: var(--ink); background: transparent; border: 1px solid var(--line); padding: 8px 13px; font-size: 11px; font-weight: 650; min-height: 37px; }
.install-btn > span:first-child { font-size: 15px; padding-right: 5px; }
.tsp-main { max-width: 1480px; margin: auto; padding: 42px 40px 55px; }
.intro-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 23px; }
.eyebrow { color: var(--muted); font-size: 10px; line-height: 1.6; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.red-rule { width: 23px; height: 2px; background: var(--red); }
h1 { margin-top: 12px; font-size: clamp(26px, 3vw, 40px); line-height: 1.15; font-weight: 700; letter-spacing: -1.5px; }
h1 em { font-family: var(--serif-font); font-weight: 400; }
.intro-description { margin-top: 13px; color: var(--muted); font-size: 13px; max-width: 620px; }
.edition-note { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; color: var(--muted); font-size: 10px; }
.edition-note span:first-child { font-weight: 700; font-size: 9px; letter-spacing: 1.3px; }
.service-notice { min-height: 35px; margin-bottom: 24px; padding: 9px 12px; border: 1px solid var(--line); color: var(--muted); font-size: 11px; line-height: 1.5; background: rgba(255,255,255,.4); }
.service-notice[data-state="limited"], .service-notice[data-state="offline"] { color: #725422; background: #fbf4e7; border-color: #e6d7bc; }
.service-notice[data-state="unavailable"] { color: #9f3027; background: var(--red-soft); border-color: #f0d1c8; }
.profile-section { border: 1px solid var(--ink); background: var(--paper); margin-bottom: 31px; padding: 25px 28px 22px; position: relative; }
.profile-section::before { content: ""; display: block; width: 61px; height: 3px; background: var(--red); position: absolute; top: -1px; left: 28px; }
.profile-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 25px; margin-bottom: 23px; }
.profile-heading h2 { font-size: 20px; line-height: 1.4; font-weight: 650; letter-spacing: -.5px; }
.profile-heading .section-number { font-size: 12px; vertical-align: middle; margin-right: 12px; }
.profile-heading p { color: var(--muted); font-size: 13px; margin-top: 5px; }
.profile-badge { padding: 7px 9px; border: 1px solid #eee0db; background: var(--red-soft); color: var(--red-dark); font-size: 9px; letter-spacing: 1px; font-weight: 650; white-space: nowrap; }
.profile-selectors { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.1fr) minmax(0, .9fr); gap: 18px; }
.profile-selectors > div { min-width: 0; }
.profile-selectors label { font-size: 12px; color: var(--ink); }
.profile-selectors select { min-height: 47px; font-size: 14px; padding: 11px 12px; background: var(--canvas); border-color: #bdc1b7; }
.profile-selectors select:disabled { color: #858b7b; background: #f6f6f2; border-color: var(--line); opacity: 1; }
select[aria-invalid="true"] { border: 2px solid var(--red-dark); }
.optional-label { font-size: 10px; font-weight: 400; color: var(--muted); margin-left: 4px; }
.profile-error { padding-top: 14px; padding-bottom: 0; font-size: 13px; }
.profile-summary { margin-top: 20px; display: flex; align-items: flex-start; gap: 15px; padding: 17px 18px; background: #f1f3ec; border-left: 2px solid #858e79; }
.profile-summary-mark { font-size: 25px; color: #7c8970; line-height: 1.1; }
.profile-focus { font-size: 14px; color: #353d2d; line-height: 1.7; }
.profile-age-hint { color: #626c56; font-size: 12px; margin-top: 5px; line-height: 1.7; }
.profile-notes { display: flex; gap: 20px; justify-content: space-between; margin-top: 17px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.profile-notes p { max-width: 590px; }
.profile-notes p:last-child { max-width: 480px; }
.subject-placeholder, .presets-placeholder { color: var(--muted); font-size: 12px; line-height: 1.7; }
.subject-placeholder { padding: 9px 0 5px; }
.presets-placeholder { padding: 12px 0; }
.layout-grid { display: grid; grid-template-columns: minmax(330px, 410px) minmax(0, 1fr); align-items: start; gap: 30px; }
.query-section { min-width: 0; }
.section-heading, .answer-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.section-heading { margin-bottom: 19px; }
.section-heading h2, .answer-header h2 { font-size: 12px; font-weight: 700; letter-spacing: -.1px; }
.section-number { color: var(--red); font-size: 10px; font-weight: 700; margin-right: 7px; }
.small-label { color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: 1.6px; }
.field-label { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .3px; display: block; margin-bottom: 8px; }
.faculty-fieldset { margin-bottom: 18px; }
.faculty-bar { display: flex; flex-wrap: wrap; gap: 6px; }
.faculty-chip { position: relative; display: inline-flex; cursor: pointer; font-size: 10px; line-height: 1.5; }
.faculty-chip input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.faculty-chip span { border: 1px solid var(--line); color: #4c5149; background: transparent; padding: 6px 10px; display: block; }
.faculty-chip input:checked + span { background: var(--ink); border-color: var(--ink); color: white; }
.faculty-chip:hover span { border-color: var(--ink); }
.faculty-chip input:focus-visible + span { outline: 3px solid var(--red); outline-offset: 3px; }
.query-fields:disabled .faculty-chip, .query-fields:disabled .query-options label { cursor: default; opacity: .6; }
.input-card { border: 1px solid var(--ink); background: var(--paper); padding: 18px 19px 11px; }
.input-card > .field-label { color: var(--ink); }
textarea { width: 100%; border: none; background: transparent; min-height: 159px; color: var(--ink); line-height: 1.75; font-size: 14px; resize: vertical; display: block; padding: 5px 0 8px; }
textarea::placeholder { color: #92968b; }
textarea:focus-visible { outline-offset: 3px; }
textarea[aria-invalid="true"] { outline: 2px solid var(--red); outline-offset: 3px; }
.textarea-footer { color: #74796e; font-size: 9px; display: flex; justify-content: space-between; gap: 8px; padding: 7px 0 13px; }
.field-error { color: var(--red-dark); font-size: 11px; padding-bottom: 10px; }
.select-row { border-top: 1px solid var(--line); padding-top: 15px; display: grid; grid-template-columns: 1.25fr 1fr; gap: 12px; }
select { width: 100%; border: 1px solid var(--line); background: white; padding: 8px 7px; color: var(--ink); font-size: 11px; min-height: 35px; }
.select-row .field-label { font-size: 9px; margin-bottom: 5px; }
.query-options { display: flex; gap: 14px; flex-wrap: wrap; font-size: 10px; color: #555c50; padding: 14px 0 15px; }
.query-options label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
input[type="checkbox"] { accent-color: var(--ink); margin: 0; width: 12px; height: 12px; flex-shrink: 0; }
.input-controls { display: grid; grid-template-columns: 76px 1fr; gap: 9px; }
.btn-primary, .btn-secondary { min-height: 40px; padding: 9px 13px; font-size: 11px; font-weight: 700; border: 1px solid transparent; }
.btn-primary { background: var(--red); color: white; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.btn-primary:hover:not(:disabled) { background: var(--red-dark); border-color: var(--red-dark); }
.btn-primary > span:last-child { font-size: 18px; font-weight: 400; line-height: 1; }
.btn-secondary { border: 1px solid var(--line); color: var(--muted); background: var(--paper); }
.btn-secondary:hover:not(:disabled) { background: var(--canvas); color: var(--ink); }
.keyboard-hint { font-size: 9px; color: #82867a; text-align: center; margin-top: 10px; }
.presets-section { margin-top: 21px; }
.presets-section .field-label { font-size: 9px; text-transform: uppercase; letter-spacing: 1.1px; margin-bottom: 9px; }
.presets-row { border-top: 1px solid var(--line); }
.preset-btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; border: none; border-bottom: 1px solid var(--line); background: transparent; padding: 10px 2px; font-size: 11px; color: var(--ink); }
.preset-btn:hover:not(:disabled) { color: var(--red-dark); background: rgba(255,255,255,.65); border-bottom-color: var(--red); }
.preset-meta { color: var(--muted); font-size: 9px; white-space: nowrap; }
.preset-meta span { margin-left: 10px; color: var(--red); font-size: 14px; }
.history-container { margin-top: 24px; padding-top: 2px; }
.history-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.history-header h3 { font-size: 11px; font-weight: 700; }
.text-link { border: none; padding: 5px 0; background: transparent; color: var(--red-dark); font-size: 9px; }
.text-link:hover:not(:disabled) { text-decoration: underline; }
.history-note { color: var(--muted); font-size: 9px; margin: 4px 0 11px; }
.history-list { display: flex; flex-direction: column; max-height: 270px; overflow-y: auto; gap: 6px; padding: 2px 4px 4px 0; }
.history-empty { color: #81867a; border: 1px dashed #d7d9cf; padding: 14px; font-size: 11px; }
.history-item { width: 100%; background: rgba(255,255,255,.65); border: 1px solid var(--line); border-left: 2px solid #b7bcae; padding: 9px 11px; text-align: left; }
.history-item:hover:not(:disabled) { background: white; border-left-color: var(--red); }
.history-question { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--ink); }
.history-meta { display: block; font-size: 8px; color: var(--muted); margin-top: 3px; }
.storage-notice { font-size: 10px; color: #845b1c; margin-top: 8px; }
.display-card { border: 1px solid var(--ink); background: var(--paper); min-height: 765px; padding: 22px 31px 17px; display: flex; flex-direction: column; min-width: 0; position: relative; }
.answer-header { border-bottom: 1px solid var(--line); padding-bottom: 17px; }
.result-actions { display: flex; gap: 7px; }
.action-btn { border: 1px solid var(--line); background: transparent; font-size: 9px; padding: 5px 9px; color: var(--muted); min-height: 28px; }
.action-btn:hover:not(:disabled) { background: var(--canvas); color: var(--ink); }
.empty-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 50px 10px 60px; min-height: 610px; }
.empty-symbol { width: 126px; height: 126px; font-family: var(--serif-font); font-size: 88px; line-height: 1.5; font-weight: 400; color: #d9ddd1; margin-bottom: 20px; position: relative; }
.empty-symbol::before, .empty-symbol::after { content: ""; position: absolute; border: 1px solid #efefea; inset: 0; }
.empty-symbol::after { inset: 11px -11px; }
.empty-kicker { font-size: 8px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 600; color: #8b9183; margin-bottom: 13px; }
.empty-state h3 { font-family: var(--serif-font); font-weight: 400; font-size: 30px; line-height: 1.2; letter-spacing: -.65px; }
.empty-state > p:not(.empty-kicker) { max-width: 330px; margin: 17px auto 0; font-size: 12px; line-height: 1.8; color: var(--muted); }
.features-list { display: flex; justify-content: center; flex-wrap: wrap; gap: 13px; margin-top: 36px; }
.features-list span { font-size: 8px; color: #747b6c; display: flex; align-items: center; gap: 5px; }
.features-list span::before { content: ""; width: 3px; height: 3px; background: #9fa695; border-radius: 50%; }
.answer-footnote { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid var(--line); padding-top: 14px; font-size: 8px; color: #808678; }
.tiny-mark { font-weight: 800; font-size: 10px; letter-spacing: -.3px; color: #8d9582; }
.loading-state, .error-state { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 17px; min-height: 610px; text-align: center; padding: 40px 20px; }
.loading-state h3, .error-state h3 { font: 400 25px/1.2 var(--serif-font); }
.loading-state p, .error-state p { color: var(--muted); font-size: 12px; max-width: 360px; }
.loading-state .btn-secondary { margin-top: 14px; }
.spinner { width: 36px; height: 36px; border: 2px solid var(--line); border-top-color: var(--red); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 9px; }
@keyframes spin { to { transform: rotate(360deg); } }
.error-mark { display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid #e9b1a8; color: var(--red); font: 400 26px var(--serif-font); background: var(--red-soft); border-radius: 50%; margin-bottom: 9px; }
.error-state .btn-primary { margin-top: 13px; }
.result-content { padding: 22px 0 28px; min-width: 0; }
.result-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 19px; }
.meta-tag { font-size: 8px; letter-spacing: 1px; font-weight: 700; padding: 5px 8px; background: var(--ink); color: white; text-transform: uppercase; }
.meta-tag[data-mode="local_reference"] { color: #725422; background: #f6eedc; }
.meta-info { color: var(--muted); font-size: 9px; }
.result-faculty { font-size: 9px; letter-spacing: .7px; text-transform: uppercase; font-weight: 650; color: var(--red-dark); margin: 4px 0 8px; }
.result-school-year { font-size: 12px; color: var(--muted); margin: 0 0 15px; }
.result-question { font-family: var(--serif-font); font-size: 27px; font-weight: 400; line-height: 1.3; letter-spacing: -.4px; overflow-wrap: anywhere; }
.result-provider { margin: 12px 0 24px; color: var(--muted); font-size: 9px; }
.result-notice { padding: 12px 14px; border: 1px solid #e6d7bc; background: #fbf4e7; color: #725422; font-size: 11px; margin-bottom: 20px; }
.takeaway-box { padding: 16px 18px; background: #fff3ef; border-left: 2px solid var(--red); margin: 0 0 26px; }
.takeaway-box h4 { font-size: 9px; font-weight: 750; letter-spacing: 1px; text-transform: uppercase; color: var(--red-dark); margin-bottom: 7px; }
.takeaway-box p { font: 400 17px/1.6 var(--serif-font); overflow-wrap: anywhere; }
.markdown-body { color: #292d26; font: 14px/1.85 var(--body-font); overflow-wrap: anywhere; }
.markdown-body.plain-text { white-space: pre-wrap; }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { margin: 28px 0 12px; color: var(--ink); font-size: 17px; font-weight: 700; line-height: 1.45; letter-spacing: -.25px; }
.markdown-body h1 { font-size: 24px; }
.markdown-body h2 { font-size: 21px; }
.markdown-body h4, .markdown-body h5, .markdown-body h6 { font-size: 14px; }
.markdown-body > :first-child { margin-top: 0; }
.markdown-body p, .markdown-body ul, .markdown-body ol, .markdown-body pre, .markdown-body table, .markdown-body blockquote { margin: 0 0 17px; }
.markdown-body ul, .markdown-body ol { padding-left: 22px; }
.markdown-body li { margin: 6px 0; }
.markdown-body a, .citation-item a { color: var(--red-dark); text-underline-offset: 3px; }
.markdown-body a:hover, .citation-item a:hover { text-decoration-thickness: 2px; }
.markdown-body blockquote { border-left: 2px solid #a9b09e; padding: 4px 0 4px 17px; color: var(--muted); }
.markdown-body blockquote > :last-child { margin-bottom: 0; }
.markdown-body pre { background: #20241f; color: #f6f6ef; padding: 16px; overflow-x: auto; border-radius: 1px; font-size: 11px; line-height: 1.6; }
.markdown-body code { font-family: "SFMono-Regular", Consolas, monospace; background: var(--canvas); padding: 2px 4px; font-size: .85em; }
.markdown-body pre code { background: transparent; padding: 0; font-size: inherit; }
.markdown-body table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 12px; }
.markdown-body th, .markdown-body td { border: 1px solid var(--line); padding: 8px 11px; }
.markdown-body th { background: var(--canvas); text-align: left; }
.markdown-body hr { border: none; border-top: 1px solid var(--line); margin: 22px 0; }
.markdown-body .katex-display { overflow-x: auto; overflow-y: hidden; max-width: 100%; padding: 8px 1px; }
.format-notice { color: var(--muted); font-size: 10px; margin-top: 14px; }
.citations-container { border-top: 1px solid var(--line); padding-top: 21px; margin-top: 28px; }
.citations-container h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .7px; }
.citation-note { color: var(--muted); font-size: 10px; margin-top: 6px; line-height: 1.6; }
.citations-list { margin: 15px 0 0; padding-left: 19px; font-size: 11px; }
.citation-item { padding: 6px 0 10px 3px; line-height: 1.7; overflow-wrap: anywhere; }
.citation-title { font-style: italic; }
.citation-relevance { display: block; color: var(--muted); margin-top: 2px; }
.result-timestamp { color: #858b7c; font-size: 9px; padding-top: 25px; }
.tsp-footer { border-top: 1px solid var(--line); padding: 21px 40px; color: var(--muted); font-size: 9px; background: rgba(255,255,255,.55); }
.tsp-footer strong { color: var(--ink); font-size: 9px; letter-spacing: .4px; }
.footer-divider { margin: 0 11px; color: #b5bcab; }
.toast { position: fixed; z-index: 200; bottom: 24px; left: 50%; transform: translateX(-50%); padding: 12px 18px; background: var(--ink); color: white; font-size: 12px; max-width: min(90vw, 430px); box-shadow: 0 5px 25px #0002; text-align: center; }
.install-dialog { width: min(480px, calc(100% - 32px)); max-height: calc(100dvh - 40px); border: 1px solid var(--ink); padding: 25px 29px 28px; background: var(--canvas); color: var(--ink); overflow-y: auto; }
.install-dialog::backdrop { background: #161b1766; backdrop-filter: blur(2px); }
.dialog-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.dialog-heading .eyebrow { font-size: 8px; }
.dialog-close { background: transparent; border: 1px solid var(--line); width: 32px; height: 32px; font-size: 20px; line-height: 1; color: var(--muted); }
.install-dialog h2 { font: 400 31px/1.2 var(--serif-font); margin-bottom: 13px; }
.install-dialog p { color: var(--muted); font-size: 12px; line-height: 1.7; }
.install-dialog h3 { font-size: 12px; margin-top: 20px; }
.install-dialog ol { padding-left: 20px; font-size: 12px; color: #505747; }
.install-offline-note { border-top: 1px solid var(--line); padding-top: 15px; margin-top: 20px; }
.install-dialog > .btn-primary { width: 100%; margin-top: 22px; }
.noscript-notice { padding: 20px; color: white; background: var(--ink); position: fixed; bottom: 0; width: 100%; text-align: center; }
@media (min-width: 1500px) { .tsp-main { padding-top: 50px; } .layout-grid { gap: 38px; } .display-card { min-height: 800px; } .empty-state { min-height: 645px; } }
@media (max-width: 1100px) { .tsp-header { padding: 20px 25px; } .tsp-main { padding: 32px 25px 40px; } .layout-grid { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); gap: 23px; } .display-card { padding: 20px 23px 16px; } .edition-note { display: none; } .empty-state h3 { font-size: 28px; } .features-list { gap: 10px; } .answer-header { flex-wrap: wrap; } .tsp-footer { padding: 20px 25px; } }
@media (max-width: 800px) { .layout-grid { grid-template-columns: 1fr; gap: 30px; } .query-section { max-width: none; } .faculty-bar { gap: 7px; } .faculty-chip { font-size: 11px; } .faculty-chip span { padding: 7px 11px; } .display-card { min-height: 570px; } .empty-state, .loading-state, .error-state { min-height: 420px; } .empty-state { padding: 30px 15px 45px; } .header-tools { gap: 13px; } .brand-wordmark { font-size: 21px; } .brand-slogan { font-size: 8px; letter-spacing: 1px; } .tsp-symbol { flex-basis: 34px; width: 34px; height: 34px; } .tsp-symbol span { width: 11px; height: 11px; } .connection-status { font-size: 10px; } .intro-description { font-size: 12px; } .tsp-footer .footer-container { align-items: flex-start; flex-direction: column; gap: 8px; } .history-list { max-height: 220px; } .query-options { font-size: 11px; } textarea { min-height: 150px; } .select-row select { min-height: 40px; font-size: 12px; } .btn-primary, .btn-secondary { min-height: 44px; font-size: 12px; } .action-btn { min-height: 34px; font-size: 10px; } .preset-btn { padding: 12px 2px; font-size: 12px; } .preset-meta { font-size: 10px; } .history-item { padding: 11px 12px; } .history-question { font-size: 12px; } .history-meta { font-size: 9px; } .text-link { padding: 9px 0; font-size: 10px; } }
@media (max-width: 520px) { .tsp-header { padding: 17px 18px; } .header-container { flex-wrap: wrap; gap: 17px; } .header-tools { width: 100%; justify-content: space-between; } .brand-wordmark { font-size: 23px; } .brand-group { gap: 11px; } .tsp-main { padding: 27px 18px 35px; } h1 { font-size: 32px; max-width: 340px; line-height: 1.15; } .intro-description { max-width: 340px; margin-top: 12px; } .eyebrow { font-size: 9px; } .service-notice { font-size: 10px; margin-bottom: 22px; padding: 10px 11px; } .display-card { padding: 18px 18px 15px; } .answer-header { gap: 13px; } .answer-header h2 { font-size: 11px; } .section-number { margin-right: 5px; } .input-card { padding: 17px 16px 12px; } textarea { font-size: 16px; } .query-options { gap: 10px; font-size: 10px; } .select-row { gap: 9px; grid-template-columns: 1.35fr 1fr; } .select-row select { font-size: 11px; padding: 8px 5px; } .textarea-footer { font-size: 8px; } .empty-state h3 { font-size: 27px; } .empty-state > p:not(.empty-kicker) { font-size: 11px; } .empty-kicker { font-size: 7px; letter-spacing: 1px; } .features-list { gap: 8px 14px; max-width: 260px; } .empty-symbol { width: 110px; height: 110px; font-size: 75px; } .result-question { font-size: 25px; } .markdown-body { font-size: 13px; } .result-meta { align-items: flex-start; } .meta-info { max-width: 120px; text-align: right; } .tsp-footer { padding: 20px 18px; } .answer-footnote { font-size: 7px; } .install-dialog { padding: 20px; } }
/* School-facing controls remain legible for children and comfortable on touchscreens. */
.brand-group { min-width: 0; }
.brand-wordmark { font-size: clamp(21px, 2.1vw, 25px); letter-spacing: -.8px; }
.faculty-chip { font-size: 13px; }
.faculty-chip span { padding: 9px 12px; min-height: 40px; }
.field-label { font-size: 12px; }
.input-card { padding-top: 20px; }
.select-row .field-label { font-size: 11px; }
.select-row select { min-height: 44px; font-size: 13px; }
.query-options { font-size: 12px; gap: 13px; line-height: 1.7; }
.query-options input { width: 16px; height: 16px; }
.btn-primary, .btn-secondary { min-height: 46px; font-size: 13px; }
.preset-btn { font-size: 13px; line-height: 1.65; padding: 13px 2px; align-items: flex-start; gap: 16px; }
.preset-meta { font-size: 11px; padding-top: 2px; }
.presets-section .field-label { font-size: 10px; }
.section-heading h2, .answer-header h2 { font-size: 14px; }
.history-header h3 { font-size: 13px; }
.history-question { font-size: 13px; }
.history-meta, .history-note { font-size: 10px; }
.empty-symbol { font-size: 67px; letter-spacing: -6px; line-height: 1.8; }
.empty-state > p:not(.empty-kicker) { font-size: 13px; max-width: 340px; }
.features-list span { font-size: 10px; }
.textarea-footer { font-size: 10px; }
.answer-footnote { font-size: 9px; }
@media (max-width: 1100px) { .profile-section { padding: 23px; } .profile-section::before { left: 23px; } .profile-selectors { grid-template-columns: 1fr 1fr; gap: 17px; } .profile-selectors > div:last-child { grid-column: 1 / -1; max-width: 350px; } .profile-badge { display: none; } .brand-wordmark { font-size: 21px; } }
@media (max-width: 800px) { .profile-heading h2 { font-size: 19px; } .profile-notes { flex-direction: column; gap: 8px; } .profile-notes p, .profile-notes p:last-child { max-width: none; } .header-container { flex-wrap: wrap; gap: 15px; } .header-tools { width: 100%; justify-content: space-between; } .faculty-chip { font-size: 13px; } .faculty-chip span { padding: 9px 12px; } .query-options { font-size: 12px; } .select-row select { font-size: 13px; } .preset-btn { font-size: 13px; } .preset-meta { font-size: 11px; } .history-question { font-size: 13px; } .history-meta { font-size: 10px; } }
@media (max-width: 520px) { .brand-wordmark { font-size: 20px; letter-spacing: -.7px; } .brand-slogan { font-size: 8px; letter-spacing: .8px; margin-top: 5px; } .brand-group { gap: 10px; } .profile-section { padding: 22px 17px 19px; margin-bottom: 27px; } .profile-section::before { left: 17px; } .profile-heading { margin-bottom: 18px; } .profile-heading h2 { font-size: 18px; letter-spacing: -.2px; } .profile-heading p { font-size: 12px; margin-top: 9px; } .profile-heading .section-number { margin-right: 6px; } .profile-selectors { grid-template-columns: 1fr; gap: 16px; } .profile-selectors > div:last-child { grid-column: auto; max-width: none; } .profile-selectors select { font-size: 16px; min-height: 48px; padding: 11px 9px; } .profile-notes { font-size: 10px; } .profile-summary { padding: 14px 12px; gap: 10px; } .profile-focus { font-size: 13px; } .profile-age-hint { font-size: 11px; } .select-row { grid-template-columns: 1fr; gap: 14px; } .select-row select { font-size: 16px; min-height: 45px; } .query-options { flex-direction: column; font-size: 12px; gap: 12px; } .textarea-footer { font-size: 9px; } .preset-btn { flex-direction: column; gap: 3px; } .preset-meta { font-size: 11px; } .section-heading h2, .answer-header h2 { font-size: 13px; } .empty-state > p:not(.empty-kicker) { font-size: 13px; } .features-list span { font-size: 10px; } .result-school-year { font-size: 11px; } .markdown-body { font-size: 14px; } .answer-footnote { font-size: 8px; } }
@media (max-width: 350px) { .brand-learn { display: block; } .brand-wordmark { font-size: 21px; } .brand-slogan { font-size: 7px; } h1 { font-size: 29px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; animation-iteration-count: 1 !important; } }
@media print {
  body { background: white; font-size: 11pt; }
  .tsp-header { border-bottom: 1pt solid black; padding: 0 0 12pt; }
  .header-tools, .intro-row, .service-notice, .profile-section, .query-section, .result-actions, .answer-header, .answer-footnote, .tsp-footer, .toast, .install-dialog, .noscript-notice, .skip-link, .loading-state, .error-state, .empty-state { display: none !important; }
  .tsp-main { padding: 16pt 0 0; max-width: none; }
  .layout-grid { display: block; }
  .display-card { display: block; min-height: 0; border: 0; padding: 0; }
  .result-content { padding: 0; }
  .markdown-body { font-size: 10pt; line-height: 1.65; }
  .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .citations-container h4, .result-question { break-after: avoid; }
  .takeaway-box, .citation-item, .markdown-body pre, .markdown-body blockquote { break-inside: avoid; }
  .takeaway-box { background: transparent; border: 1pt solid #ccc; padding: 10pt; }
  .result-notice { background: transparent; border-color: #bbb; }
  .markdown-body pre { white-space: pre-wrap; background: #f0f0f0; color: black; }
  .markdown-body table { display: table; font-size: 9pt; }
  .markdown-body .katex-display { overflow: visible; }
  .brand-wordmark { font-size: 18pt; }
  .result-question { font-size: 21pt; }
  .result-timestamp { color: #555; }
  a { color: black !important; }
}