:root {
  color-scheme: light;
  font-family: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: light-dark(#252525, #f2eee5);
  background: light-dark(#f8f7f4, #171817);
  --muted: light-dark(#686760, #b9b6ab);
  --line: light-dark(#e8e5dc, #3c3b35);
  --paper: light-dark(#fff, #222321);
  --accent: #ffdb73;
  --accent-dark: light-dark(#714b00, #ffd781);
  --radius: 14px;
}

:root[data-theme="dark"] { color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-width: 300px; }
a { color: inherit; }
button, input { font: inherit; }
button, summary { cursor: pointer; }
button:disabled { cursor: default; opacity: .55; }
:focus-visible { outline: 3px solid light-dark(#9c6807, #efc55c); outline-offset: 3px; }
h1, h2, p { margin-top: 0; }

.topbar { border-bottom: 1px solid var(--line); background: var(--paper); }
.topbar-inner { max-width: 1184px; margin: auto; padding: 13px 32px; display: flex; align-items: center; justify-content: space-between; }
.topbar-actions, .login-header { display: flex; align-items: center; gap: 8px; }
.login-header { justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 16px; font-weight: 650; text-decoration: none; letter-spacing: -.02em; }
.brand strong { font-weight: 500; color: var(--muted); }
.monogram { background: light-dark(#262623, #383023); color: #fff; display: inline-grid; place-content: center; grid-auto-flow: column; width: 33px; height: 33px; border-radius: 9px; font-weight: 850; font-size: 20px; }
.monogram span { color: var(--accent); }

.workspace { max-width: 1184px; margin: 0 auto; padding: 44px 32px 72px; }
.page-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 22px; }
h1 { margin-bottom: 0; font-size: clamp(2rem, 5vw, 3.1rem); letter-spacing: -.065em; line-height: 1.08; }
h2 { letter-spacing: -.035em; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 39px; padding: 8px 14px; font-size: 14px; font-weight: 660; line-height: 1.25; border-radius: 8px; border: 1px solid transparent; text-decoration: none; color: inherit; white-space: nowrap; }
.primary { background: var(--accent); color: #252525; border-color: #ebc95e; }
.primary:hover:not(:disabled) { background: #ffd156; }
.secondary { background: var(--paper); border-color: light-dark(#ddd9ce, #55524a); }
.secondary:hover:not(:disabled), .text-button:hover { background: light-dark(#efede7, #30312e); }
.text-button { background: transparent; color: var(--muted); }
.theme-toggle { width: 39px; padding: 0; font-size: 21px; }
.theme-sun, :root[data-theme="dark"] .theme-moon { display: none; }
:root[data-theme="dark"] .theme-sun { display: inline; }

.repo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 344px)); gap: 15px; }
.repo-card { display: block; padding: 23px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.repo-card:hover { border-color: light-dark(#dfb94d, #a88036); box-shadow: 0 4px 18px light-dark(#75540b0c, #0004); }
.repo-top, .repo-stats { display: flex; align-items: center; justify-content: space-between; }
.folder-mark { display: grid; place-content: center; width: 40px; height: 40px; color: var(--accent-dark); background: light-dark(#fff0c2, #41351e); border-radius: 11px; font-size: 20px; }
.card-arrow { color: var(--muted); font-size: 20px; }
.repo-card h2 { margin: 19px 0 4px; font-size: 24px; }
.repo-card p { color: var(--muted); font-size: 14px; }
.repo-stats { color: var(--muted); font-size: 12px; border-top: 1px solid var(--line); padding-top: 13px; margin-top: 23px; gap: 10px; }

.breadcrumbs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px; margin-bottom: 21px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.crumb-divider { color: light-dark(#a9a59a, #8d8981); }
.crumb-current { color: light-dark(#282724, #f2eee5); font-weight: 660; }
.repo-info .page-heading { margin-bottom: 9px; }
.repo-status { display: flex; align-items: baseline; flex-wrap: wrap; gap: 11px; color: var(--muted); font-size: 12px; }
.branch { padding: 3px 8px; border-radius: 5px; background: light-dark(#f0ece0, #353024); color: light-dark(#564b30, #e0cca1); }
.files, .surface { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.files { overflow: hidden; margin-top: 22px; }
.files-heading, .file-row { display: grid; grid-template-columns: minmax(0, 1fr) 118px 96px; align-items: center; gap: 12px; padding: 10px 19px; }
.files-heading { padding-block: 12px; background: light-dark(#f0eee8, #2b2c29); color: var(--muted); font-size: 12px; font-weight: 650; }
.file-row { min-height: 53px; border-top: 1px solid light-dark(#efede6, #383933); font-size: 14px; text-decoration: none; }
.file-row:hover { background: light-dark(#fffbeb, #2c2920); }
.row-name { display: flex; align-items: center; gap: 10px; min-width: 0; overflow-wrap: anywhere; font-weight: 620; }
.row-type, .row-size { font-size: 12px; color: var(--muted); }
.row-size { text-align: right; }
.file-icon { display: inline-grid; flex: 0 0 32px; width: 32px; height: 28px; place-content: center; border-radius: 6px; background: light-dark(#efede7, #30312e); color: light-dark(#5d594f, #ccc7bb); font: 750 10px ui-monospace, "SFMono-Regular", monospace; }
.type-folder { background: light-dark(#fff0c2, #41351e); color: light-dark(#83590a, #f6cd79); font-size: 18px; }
.type-md { background: light-dark(#e9eef9, #2b374e); color: light-dark(#364d84, #b7cafa); }
.type-ipynb { background: light-dark(#ffeddc, #433023); color: light-dark(#9a4b10, #ffc493); }
.type-pdf { background: light-dark(#fce8e8, #482d31); color: light-dark(#9e3437, #ffb5ba); }
.status { margin: 0; padding: 18px; color: var(--muted); font-size: 14px; }
.form-error { color: light-dark(#a22b37, #ffb0b4); font-size: 14px; margin: 12px 0; }
.compact:empty, .form-error:empty { display: none; }
.success { color: light-dark(#257049, #8ed8b4); }

.readme-panel { margin-top: 24px; }
.readme-label { color: var(--muted); padding: 13px 20px; font: 650 12px ui-monospace, monospace; border-bottom: 1px solid var(--line); }
.viewing-file { --viewer-offset: 68px; }
.viewing-file .topbar { display: none; }
.viewing-file .workspace { max-width: none; min-height: 100dvh; padding: 0; }
.viewer-bar { position: sticky; z-index: 2; top: 0; border-radius: 0; border-width: 0 0 1px; padding: 10px clamp(12px, 2vw, 28px); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.viewer-title, .viewer-actions { display: flex; gap: 10px; align-items: center; min-width: 0; }
.viewer-title h1 { font-size: 16px; letter-spacing: -.03em; margin: 0; overflow-wrap: anywhere; }
.viewer-actions { flex-wrap: wrap; }
.viewer-actions [hidden] { display: none; }
.viewer-back { padding-inline: 0 6px; }
.viewer-fullscreen { width: 39px; padding: 0; font-size: 21px; }
.viewer-state { margin: 0; padding: 9px clamp(12px, 2vw, 28px); color: var(--muted); background: var(--paper); font-size: 13px; border-bottom: 1px solid var(--line); }
.viewer-state.success { color: light-dark(#257049, #8ed8b4); }
.viewer-state.form-error { color: light-dark(#a22b37, #ffb0b4); }
.viewer-content { min-height: calc(100dvh - var(--viewer-offset)); overflow: hidden; border: 0; border-radius: 0; }
.viewer-content > :is(.reading, .notebook, .plain-file) { max-width: 74rem; margin-inline: auto; }
.viewer-content [id] { scroll-margin-block-start: var(--viewer-offset); }
.reading { padding: 24px clamp(16px, 4vw, 48px); line-height: 1.65; overflow-wrap: anywhere; font-size: 16px; }
.reading > :first-child { margin-top: 0; }
.reading > :last-child { margin-bottom: 0; }
.reading h1 { font-size: clamp(1.65rem, 4vw, 2.35rem); margin-bottom: 18px; letter-spacing: -.045em; }
.reading h2 { margin-top: 27px; margin-bottom: 8px; font-size: 23px; }
.reading h3 { margin-top: 23px; margin-bottom: 8px; font-size: 19px; }
.reading a { text-decoration-color: light-dark(#cca142, #d7ae51); text-underline-offset: 3px; }
.unavailable-link { color: var(--muted); text-decoration: none; }
.reading img, .output-image { display: block; max-width: 100%; height: auto; margin: 10px auto; }
.reading blockquote { margin-inline: 0; padding: 4px 15px; border-left: 3px solid var(--accent); color: var(--muted); }
.table-scroll, .katex-display { overflow-x: auto; overflow-y: hidden; }
.reading table { border-collapse: collapse; margin: 9px 0; font-size: 14px; }
.reading :is(td, th) { border: 1px solid var(--line); padding: 6px 10px; text-align: left; }
.reading th { background: light-dark(#f5f3ec, #2d2e2a); }
.reading details { margin: 10px 0; padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; }
.reading details[open] summary { margin-bottom: 10px; }
.reading pre, .plain-file, .cell pre { overflow-x: auto; padding: 13px 16px; border-radius: 8px; background: light-dark(#f6f5f1, #292a27); font: 13px/1.55 ui-monospace, monospace; }
.plain-file { margin: 14px; }
.math-fallback { color: light-dark(#974411, #ffc389); font-family: ui-monospace, monospace; }

.notebook .reading { padding-top: 15px; padding-bottom: 15px; }
.notebook .reading:first-child { padding-top: 28px; }
.cell { padding: 8px clamp(16px, 4vw, 48px) 14px; }
.code-details { color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.cell-editor { display: block; resize: vertical; width: 100%; margin: 8px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; color: light-dark(#252525, #f2eee5); background: light-dark(#f6f5f1, #292a27); font: 13px/1.55 ui-monospace, monospace; tab-size: 4; }
.cell-edit-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.cell-edit-actions [hidden] { display: none; }
.cell .output-error { background: light-dark(#fff1f0, #442b2e); color: light-dark(#a22b37, #ffb0b4); }
.widget { padding: 14px; border: 1px solid var(--line); border-radius: 10px; }
.widget-label { display: grid; grid-template-columns: 1fr auto; gap: 6px; font-size: 13px; color: var(--muted); }
.widget-value { font-weight: 680; color: light-dark(#302818, #f7e3b8); font-variant-numeric: tabular-nums; }
.slider { grid-column: 1 / -1; width: 100%; accent-color: light-dark(#a57211, #ebbb59); }
.widget-graph { overflow: auto; padding-top: 5px; }
.widget-graph .output-image, .cell-results > .output-image { background: #fff; }

.pdf-toolbar { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 10px; border-bottom: 1px solid var(--line); }
.pdf-count { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pdf-canvas { margin: 8px auto; display: block; max-width: 100%; background: #fff; }

dialog { width: min(94vw, 510px); padding: 23px; color: inherit; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 13px 55px light-dark(#211c1250, #0009); }
dialog::backdrop { background: light-dark(#26231b69, #000a); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 17px; gap: 14px; }
.dialog-heading h2 { margin: 0; }
.icon-button { border: 0; border-radius: 5px; background: light-dark(#f1efe9, #30312e); font-size: 21px; min-width: 30px; }
form label { display: block; font-size: 14px; font-weight: 650; }
form input { display: block; width: 100%; color: inherit; background: light-dark(#fff, #191a18); border: 1px solid light-dark(#d6d2c8, #706d62); margin-top: 6px; padding: 9px 11px; border-radius: 8px; min-height: 42px; }
.hint { color: var(--muted); font-size: 13px; line-height: 1.45; margin: 9px 0 14px; }
.login-body { min-height: 100svh; display: grid; place-items: center; padding: 20px; }
.login-card { padding: 31px; width: min(100%, 410px); border-radius: 18px; border: 1px solid var(--line); background: var(--paper); box-shadow: 0 12px 45px light-dark(#28200b09, #0005); }
.login-card h1 { font-size: 33px; margin: 27px 0 21px; }
.login-card .primary { margin-top: 15px; width: 100%; }

@media (max-width: 640px) {
  .topbar-inner { padding: 12px 16px; }
  .workspace { padding: 28px 15px 45px; }
  .page-heading { flex-wrap: wrap; }
  .files-heading, .file-row { grid-template-columns: minmax(0, 1fr) 58px; padding-inline: 11px; }
  .row-type { display: none; }
  .viewing-file { --viewer-offset: 112px; }
  .viewer-bar { flex-wrap: wrap; gap: 4px; }
  .viewer-title, .viewer-actions { gap: 6px; }
  .viewer-actions .button { min-height: 34px; }
  .repo-grid { grid-template-columns: 1fr; }
}