@font-face {
  font-family: "Sk Modernist";
  src: url("../assets/fonts/Sk-Modernist-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sk Modernist";
  src: url("../assets/fonts/Sk-Modernist-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces SuperSoft";
  src: url("../assets/fonts/Fraunces_72pt_SuperSoft-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --font-interface: "Sk Modernist", "Segoe UI", Arial, sans-serif;
  --font-display: "Fraunces SuperSoft", Georgia, serif;
  --color-primary: #07b7b7;
  --color-action: #ffbe0b;
  --color-feedback: #ff5757;
  --color-bg-light: #f5f5f5;
  --color-bg-dark: #343434;
  --bg: var(--color-bg-light);
  --surface: #ffffff;
  --surface-soft: rgba(255, 255, 255, 0.64);
  --ink: #090909;
  --muted: #343434;
  --line: #343434;
  --brand: var(--color-primary);
  --harvard-red: var(--color-primary);
  --major-rule: 6px;
  --minor-rule: 3px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--color-bg-dark);
  --surface: #2b2b2b;
  --surface-soft: rgba(245, 245, 245, 0.08);
  --ink: #f5f5f5;
  --muted: #d7d7d7;
  --line: #f5f5f5;
  --brand: var(--color-primary);
  --harvard-red: var(--color-primary);
}

html {
  background: var(--bg);
}

body {
  font-family: var(--font-interface);
  background:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 11%, transparent) 1px, transparent 0),
    var(--bg);
  background-size: 18px 18px, auto;
  color: var(--ink);
}

input,
textarea,
button,
select {
  font-family: var(--font-interface);
}

h1,
h2,
.hero h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
}

h3,
strong,
th,
.brand,
.logo,
.card-title,
.pane-title,
.mode-heading {
  font-weight: 700;
}

a,
button {
  text-underline-offset: 0.15em;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: var(--minor-rule) solid var(--color-action);
  outline-offset: 3px;
}

.top,
.panel-top {
  align-items: center;
  border-bottom-width: var(--major-rule);
}

.top {
  gap: 1rem;
}

.top > a:not(.logo):not(.brand) {
  margin-left: auto;
}

.sidebar {
  border-right-width: var(--major-rule);
}

.grid,
.why,
.trust,
details,
.quick-links,
.chats,
.sheets,
.essays-nav {
  border-top-width: var(--minor-rule);
}

.line-link::after,
.side-link::after,
.logout::after,
.session-name::after,
.chat-item::after {
  height: var(--minor-rule);
  background: var(--color-primary);
}

.line-link:hover,
.line-link:focus-visible,
.side-link:hover,
.side-link:focus-visible,
.session-name:hover,
.session-name:focus-visible,
.logout:hover,
.logout:focus-visible {
  color: var(--color-primary);
}

.side-link.active,
.chat-item.active,
.essay-nav-item.active,
.status-btn.active,
.download-btn,
.plain-btn,
.pane-link-btn,
.plus-btn,
.new-chat-btn:hover,
.new-chat-btn:focus-visible,
.new-sheet-btn:hover,
.new-sheet-btn:focus-visible,
.new-essay-btn:hover,
.new-essay-btn:focus-visible {
  color: var(--color-primary);
}

.send-btn,
.save-btn,
.signup,
.cta a {
  color: var(--color-primary);
}

.essay-status-dot.status-orange {
  background: var(--color-action);
}

.typing {
  color: var(--color-action);
  background: transparent;
  font-weight: 700;
}

.error,
.delete,
.delete-btn,
.status-red,
.essay-status-dot.status-red {
  color: var(--color-feedback);
}

.profile-alert {
  background: var(--color-feedback);
}

.status-red,
.essay-status-dot.status-red {
  background: var(--color-feedback);
}

.status-orange,
.essay-status-dot.status-orange {
  background: var(--color-action);
}

.card,
.hub-card,
.mode-btn,
.context-menu,
.school-suggest-menu,
.signin-area,
.consent,
.composer,
.essay-pane,
.chat-pane,
.table-wrap,
.prompt-toggle-btn,
.essay-prompt-panel,
.essay-tags-panel {
  background: var(--surface-soft);
  border-color: var(--line);
}

.grid .card {
  background: transparent;
}

input,
textarea,
select,
.field,
.chat-input,
.essay-search-input,
.text-input,
.essay-title-input,
.essay-prompt-input,
.essay-content-input,
.essay-editor,
.cell {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}

::placeholder {
  color: color-mix(in srgb, var(--muted) 72%, transparent);
}

.brand,
.logo {
  display: inline-flex;
  align-items: center;
  color: var(--color-primary);
  min-height: 2.45rem;
}

.brand-wordmark {
  display: block;
  width: min(10.5rem, 38vw);
  height: 2.9rem;
  object-fit: cover;
  object-position: left 52.5%;
}

h1.logo .brand-wordmark {
  width: min(12rem, 42vw);
  height: 3.25rem;
}

.brand-pixel-icon,
.pixel-icon {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  object-fit: contain;
  image-rendering: pixelated;
  vertical-align: -0.2em;
}

.typing::before,
.ai-state-on::before {
  content: "";
  display: inline-block;
  width: 1.35em;
  height: 1.35em;
  margin-right: 0.32rem;
  background: url("../assets/brand/AI-on-state.png") center / contain no-repeat;
  image-rendering: pixelated;
  vertical-align: -0.32em;
}

.ai-state-off::before {
  content: "";
  display: inline-block;
  width: 1.35em;
  height: 1.35em;
  margin-right: 0.32rem;
  background: url("../assets/brand/AI-off-state.png") center / contain no-repeat;
  image-rendering: pixelated;
  vertical-align: -0.32em;
}

.feedback-icon::before,
.error:not(:empty)::before {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.28rem;
  background: url("../assets/brand/feedback.png") center / contain no-repeat;
  image-rendering: pixelated;
  vertical-align: -0.25em;
}

.decision-made::before {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.28rem;
  background: url("../assets/brand/decision-made.png") center / contain no-repeat;
  image-rendering: pixelated;
  vertical-align: -0.25em;
}

.theme-toggle {
  border: var(--minor-rule) solid var(--line);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.38rem 0.46rem;
  text-transform: uppercase;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.auth .theme-toggle,
.session-wrap .theme-toggle,
.top .theme-toggle {
  margin-left: 0.35rem;
}

.grain-fill {
  background:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 18%, transparent) 1px, transparent 0),
    var(--bg);
  background-size: 8px 8px, auto;
}

:root[data-theme="dark"] .class-high-reach {
  background: color-mix(in srgb, #f3d9ff 35%, var(--surface));
}

:root[data-theme="dark"] .class-reach {
  background: color-mix(in srgb, var(--color-action) 34%, var(--surface));
}

:root[data-theme="dark"] .class-target {
  background: color-mix(in srgb, var(--color-feedback) 34%, var(--surface));
}

:root[data-theme="dark"] .class-safety {
  background: color-mix(in srgb, #51d88a 30%, var(--surface));
}

@media (max-width: 760px) {
  .brand-wordmark {
    width: 8.8rem;
    height: 2.5rem;
  }

  .theme-toggle {
    font-size: 0.72rem;
    padding: 0.34rem 0.4rem;
  }
}