:root { color-scheme: light; color: #19263b; background: #f6f8fc; font: 16px/1.55 system-ui, sans-serif; }
body { margin: 0; }
main { max-width: 940px; margin: 0 auto; padding: 24px; }
main:not(.workspace) { max-width: 420px; }
.bar, .top, .row, nav { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bar, .top { justify-content: space-between; }
.bar { padding: 12px max(24px, calc((100vw - 940px) / 2)); background: white; border-bottom: 1px solid #dce4ef; }
.account, .muted { color: #526176; }
.section { margin: 18px 0; padding: 16px 20px; background: white; border: 1px solid #dce4ef; border-radius: 10px; }
h1, h2, h3, h4 { margin: 0 0 8px; line-height: 1.25; }
h4, form, nav, .row { margin-top: 8px; }
p { margin: 6px 0 10px; }
button, input, textarea, select { font: inherit; }
button, input, textarea, select { border: 1px solid #a9b8cb; border-radius: 6px; background: white; padding: 6px 10px; }
button { cursor: pointer; color: inherit; }
button:disabled { opacity: .5; cursor: default; }
button.primary, button[aria-pressed="true"] { color: white; background: #2557a7; border-color: #2557a7; }
input[type=file] { max-width: 100%; padding: 3px; }
textarea { display: block; width: 100%; box-sizing: border-box; margin: 4px 0; }
a { color: #194e9d; }
summary { cursor: pointer; font-weight: 650; }
.record { margin-top: 12px; padding: 10px 0; border-top: 1px solid #dce4ef; }
.record p { overflow-wrap: anywhere; }
.note-style-output { white-space: pre-wrap; }
.handwriting-equation { margin: 6px 0 10px; padding: 8px 10px; overflow-wrap: anywhere; white-space: pre-wrap; background: #f2f5fa; border-radius: 6px; }
.clock { font-variant-numeric: tabular-nums; font-size: 1.4rem; font-weight: 650; }
.error { color: #9d2527; }
[hidden] { display: none !important; }
audio { max-width: 100%; }
#lecture-audio-import label { display: grid; gap: 4px; width: fit-content; max-width: 100%; margin: 10px 0; }
#lecture-audio-import input { box-sizing: border-box; max-width: 100%; }
.capture-image { display: block; max-width: 100%; height: auto; max-height: 55vh; object-fit: contain; object-position: left; }
.ink-comparison { margin: 10px 0; }
.ink-comparison-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 10px; margin: 10px 0; }
.ink-comparison-grid figure { margin: 0; padding: 10px; border: 1px solid #dce4ef; border-radius: 8px; background: #fff; }
.ink-comparison-grid figcaption { font-weight: 650; margin-bottom: 6px; }
.ink-comparison-grid canvas { margin: 0 auto; }
.ink-comparison-grid figure:last-child canvas { width: 100%; }
.flow { display: grid; list-style: none; margin: 10px 0 22px; padding: 0; max-width: 480px; }
.flow-concept { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 14px; border: 1px solid #8ba8cc; border-radius: 8px; background: #eff5ff; color: #182e49; }
.flow-concept button { flex: none; padding: 3px 8px; }
.flow-relation { display: grid; grid-template-columns: 18px 1fr; align-items: center; gap: 8px;
  padding: 6px 12px; font-size: .9rem; color: #394f6b; }
.flow-relation::before { content: "↓"; color: #476995; font-size: 1.3rem; }
.job-progress { max-width: 540px; margin: 12px 0; padding: 13px 15px; border: 1px solid #e3d8f6;
  border-radius: 12px; background: #faf6ff; color: #3a2956; }
.job-progress-head, .job-progress-time { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; }
.job-progress-percent, .job-progress-time { font-variant-numeric: tabular-nums; }
.job-progress-percent { font-weight: 700; color: #56318a; }
.job-progress progress { display: block; width: 100%; height: 10px; margin: 8px 0; appearance: none; border: 0;
  border-radius: 999px; background: #e9dff7; color: #8053bd; overflow: hidden; }
.job-progress progress::-webkit-progress-bar { background: #e9dff7; border-radius: 999px; }
.job-progress progress::-webkit-progress-value { background: #8053bd; border-radius: 999px; transition: width .35s ease; }
.job-progress progress::-moz-progress-bar { background: #8053bd; border-radius: 999px; }
.job-progress-message { margin: 4px 0; }
.job-progress-time { font-size: .83rem; color: #5a4873; }
@media (prefers-reduced-motion: reduce) { .job-progress progress::-webkit-progress-value { transition: none; } }
.priority-pages { list-style: none; padding: 0; margin: 10px 0 22px; display: grid; gap: 8px; }
.priority-pages > li { border: 1px solid #e5d6a3; border-radius: 10px; padding: 10px 13px; background: #fff9e7; }
.priority-pages strong { color: #704d13; }
.priority-pages p { margin: 4px 0; overflow-wrap: anywhere; }