/* 思有形 — an organic private worktable. Visual changes only; app hooks stay in place. */
:root {
  --paper: #eee6d6;
  --paper-light: #f5eddf;
  --ink: #29251d;
  --moss: #35422d;
  --muted: #5d5548;
  --soft: #777061;
  --line: #c9c0ae;
  --wash: #ddd5c3;
  --ochre: #ad7d62;
  --spark: #b9b28b;
  --clay: #694737;
  --gutter: clamp(22px, 5.5vw, 104px);
  --display: "Noto Serif SC", "Songti SC", "Noto Serif CJK SC", "STSong", "SimSun", serif;
  --hand: "STKaiti", "Kaiti SC", "KaiTi", "Noto Serif SC", "Songti SC", serif;
  --hero-type: "STFangsong", "FangSong", "Fangsong SC", "Noto Serif SC", "Songti SC", serif;
  --sans: "Noto Sans SC", "Microsoft YaHei UI", "PingFang SC", sans-serif;
  --reading: "Noto Serif SC", "Noto Serif CJK SC", "Songti SC", "STSong", "SimSun", serif;
  --micro: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
html { background: var(--paper); }
body { background: var(--paper); color: var(--ink); }
::selection { background: #c6b494; color: var(--ink); }
:focus-visible { outline-color: #8b553f !important; outline-offset: 4px; }

/* Shared chrome */
.site-header {
  position: relative;
  z-index: 10;
  height: 86px;
  grid-template-columns: minmax(170px, 1fr) auto minmax(100px, 1fr);
  gap: 26px;
  border-color: #d5cbbb;
  background: var(--paper-light);
}
.wordmark { display: inline-flex; align-items: center; color: var(--ink); font: 500 31px/1.3 var(--hand); letter-spacing: .035em; }
.brand-mark { display: none; }
.site-nav { gap: clamp(24px, 2.9vw, 58px); }
.nav-item { color: #71695b; font-size: 13px; letter-spacing: .055em; }
.nav-item.active { color: var(--moss); font-weight: 600; }
.nav-item::after { left: 18%; right: 18%; height: 1px; background: var(--moss); }
.cloud-logout { min-height: 42px; padding: 0 15px; border: 1px solid #a39a83; border-radius: 22px 16px 21px 12px; color: var(--moss); font-size: 13px; letter-spacing: .06em; transition: background .24s ease, color .24s ease; }
.cloud-logout:hover { background: var(--moss); color: var(--paper-light); }
.site-footer { width: 100%; max-width: none; min-height: 96px; align-items: center; border-top: 1px solid #d1c7b7; background: #ddd5c3; color: #554d3f; font-size: 12px; letter-spacing: .04em; }
.site-footer span:last-child { color: #68604f; }
.toast { border-radius: 18px 12px 17px 11px; background: var(--moss); box-shadow: none; }

.primary { min-height: 54px; gap: 28px; border-radius: 27px 19px 29px 16px / 22px 26px 19px 29px; padding: 0 26px; background: var(--moss); color: var(--paper-light); font-weight: 600; letter-spacing: .035em; transition: transform .24s ease, background .24s ease; }
.primary:hover { background: #45563a; box-shadow: none; }
.primary:active { transform: scale(.98); }
.primary span { font-size: 20px; font-weight: 400; line-height: 1; }
.outline { min-height: 49px; border-color: var(--moss); border-radius: 22px 16px 22px 12px; color: var(--moss); font-weight: 600; }
.outline:hover { background: var(--moss); color: var(--paper-light); }
.text-button { color: var(--moss); text-underline-offset: 5px; font-weight: 600; }

/* The opening is a paper worktable. The action belongs to the paper, beside the image. */
.hero { min-height: clamp(620px, 71svh, 760px); display: grid; grid-template-columns: minmax(0, 49%) minmax(0, 51%); align-items: center; background: var(--paper); }
.hero::before { content: ""; position: absolute; z-index: 0; top: -19%; right: -12%; width: min(69vw, 950px); aspect-ratio: 1.2; border-radius: 51% 49% 45% 55% / 38% 53% 47% 62%; background: var(--wash); transform: rotate(-9deg); pointer-events: none; }
.hero::after { content: none; }
.hero-image { position: relative; inset: auto; grid-column: 2; grid-row: 1; z-index: 1; width: min(92%, 760px); height: clamp(450px, 42vw, 620px); margin: 0 3% 0 0; border-radius: 92px 26px 78px 20px / 66px 70px 54px 65px; object-position: 67% 50%; filter: sepia(.12) saturate(.76) contrast(.99); transform: rotate(1.1deg); }
.hero-content { position: relative; grid-column: 1; grid-row: 1; z-index: 2; width: auto; max-width: 680px; margin: 0; padding: 84px 22px 92px var(--gutter); }
.hero-content::before { content: "思有形  /  私人的记录与思考"; display: block; width: max-content; max-width: 100%; margin: 0 0 37px; color: #865f49; font: 500 14px/1.5 var(--display); letter-spacing: .055em; }
.editor-section .section-heading::before, .page-heading::before, .shelf-count, .reader-path { font-family: var(--micro), var(--sans); }
.hero h1 { max-width: 600px; color: var(--ink); font: 440 clamp(48px, 4.75vw, 73px)/1.28 var(--hero-type); letter-spacing: -.045em; }
.hero-title { margin-top: 27px; color: var(--clay); font: 450 clamp(18px, 1.58vw, 24px)/1.55 var(--display); letter-spacing: .025em; }
.hero-copy { margin-top: 12px; max-width: 35em; color: var(--muted); font-size: 15px; line-height: 1.75; letter-spacing: .015em; }
.hero-actions { margin-top: 37px; gap: 29px; }
.hero-actions .primary { min-height: 54px; gap: 22px; border: 1px solid var(--moss); background: var(--moss); color: var(--paper-light); font-weight: 600; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.hero-actions .primary:hover { border-color: #45563a; background: #45563a; color: #fffaf0; box-shadow: none; }
.hero-actions .text-button { border-color: #7b7463; color: var(--ink); }
.hero-actions .text-button:hover { color: var(--moss); }

.editor-section { display: grid; grid-template-columns: minmax(200px, .34fr) minmax(0, 1fr); align-items: start; column-gap: clamp(35px, 6vw, 110px); padding-top: clamp(76px, 8vw, 134px); padding-bottom: clamp(85px, 10vw, 150px); scroll-margin-top: 25px; }
.editor-section .section-heading { position: sticky; top: 34px; padding-top: 7px; }
.editor-section .section-heading::before { content: "01  /  收集素材"; display: block; margin-bottom: 28px; color: var(--moss); font-size: 11px; font-weight: 700; letter-spacing: .16em; }
.section-heading h2 { max-width: 330px; font: 480 clamp(38px, 3.4vw, 58px)/1.36 var(--display); letter-spacing: .015em; }
.section-heading h2, .page-heading h1, #library-view .detail-pane h2, .conversation h2 { text-wrap: balance; }
.section-heading p { max-width: 310px; margin-top: 22px; color: var(--muted); font-size: 14px; line-height: 2; }
.capture-form { border-top: 1px solid var(--moss); }
.editor-toolbar { min-height: 75px; }
.segmented { gap: 35px; }
.segmented button { color: var(--soft); font-size: 14px; }
.segmented button.selected { color: var(--moss); }
.segmented button.selected::after { height: 1px; }
.source-select select, .note-field input, .edit-panel textarea, .edit-panel input, .edit-panel select { border-color: var(--line); border-radius: 13px 8px 13px 7px; background: #f8f1e5; }
.editor-surface { border-color: var(--line); border-radius: 24px 12px 21px 10px; background: var(--paper-light); }
#original-text { min-height: 270px; padding: 31px 25px; font-size: 18px; line-height: 1.9; }
.upload-zone { min-height: 270px; }
#image-fields .upload-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 35px 24px; }
#image-fields .upload-lead { margin: 0; color: var(--ink); font: 450 clamp(19px, 2vw, 26px)/1.5 var(--display); }
#image-fields .upload-hint { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
#image-fields #choose-image { margin: 9px 0 4px; background: transparent; cursor: pointer; }
#image-fields #choose-image:hover { background: var(--moss); }
#image-fields .upload-zone small { color: var(--soft); font-size: 12px; }
.image-selection { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 100%; margin-top: 18px; border-top: 1px solid var(--line); padding-top: 18px; }
.image-selection[hidden], #image-preview[hidden] { display: none; }
#image-preview { display: block; width: auto; max-width: min(100%, 300px); max-height: 180px; border: 1px solid var(--line); border-radius: 15px 8px 13px 7px; object-fit: contain; }
#image-selection-status { max-width: 100%; overflow-wrap: anywhere; color: var(--moss); font-size: 13px; line-height: 1.6; }
.editor-footer { align-items: end; padding-top: 28px; }
.note-field label { font-weight: 600; }
.note-field input { height: 54px; }
.privacy-note { grid-column: 2; margin-top: 18px; color: var(--soft); }

/* Interior views share a restrained publishing rhythm. */
.interior-view { padding-top: clamp(66px, 7.4vw, 128px); padding-bottom: clamp(90px, 10vw, 150px); }
.page-heading { position: relative; min-height: 230px; align-items: center; margin-bottom: 56px; border-bottom: 1px solid var(--line); padding: 35px 0 52px; }
.page-heading::before { content: "03  /  深度思考"; position: absolute; top: 0; left: 0; color: var(--moss); font-size: 11px; font-weight: 700; letter-spacing: .16em; }
.page-heading h1 { max-width: 900px; font: 470 clamp(48px, 5vw, 86px)/1.38 var(--display); letter-spacing: .015em; }
.page-heading p { margin-top: 22px; font-size: 16px; }
.page-heading .outline { align-self: flex-end; margin-bottom: 5px; }
.shelf-heading::before { content: "04  /  成文书架"; }
.shelf-heading h1 { font-size: clamp(56px, 6vw, 98px); }
.thinking-intro { display: flex; align-items: center; justify-content: space-between; gap: 35px; min-height: 270px; border: 0; border-bottom: 1px solid var(--line); padding: 30px 0 62px; }
.thinking-intro p { max-width: 860px; font-size: clamp(24px, 2.1vw, 31px); line-height: 1.62; letter-spacing: -.055em; }
.thinking-intro .text-button { flex: none; }
.topic-grid { border-top: 0; }
.topic-card { padding: 32px 22px; }
.topic-card:hover, .topic-card:focus-within { background: #e5d9c7; }
.topic-choice h3 { font: 500 clamp(24px, 2.2vw, 35px)/1.5 var(--display); letter-spacing: .015em; }
.topic-choice small { color: var(--clay); }
.history { margin-top: 95px; }
.history h2 { border-bottom: 1px solid var(--moss); padding-bottom: 22px; font-size: clamp(30px, 3vw, 45px); letter-spacing: -.06em; }
.history-row { min-height: 79px; align-items: center; padding-inline: 14px; transition: background .2s, padding .2s; }
.history-row:hover { padding-left: 23px; background: #e5d9c7; }
.conversation { max-width: 1080px; border-top: 1px solid var(--moss); padding-top: 32px; }
.conversation h2 { font-size: clamp(33px, 3.5vw, 55px); letter-spacing: -.06em; }
.message { border-left-width: 3px; padding-left: 24px; font-family: var(--reading); font-size: clamp(17px, 1.35vw, 20px); line-height: 1.95; }
.message.user { border-color: var(--ochre); }
.conversation textarea, .article-editor textarea { border-color: var(--line); border-radius: 16px 9px 15px 8px; background: var(--paper-light); }
.reflection .article { border-left-width: 3px; background: var(--paper-light); padding: 28px 32px; font-family: var(--reading); line-height: 2.05; }
.shelf-layout { grid-template-columns: minmax(230px, 335px) minmax(0, 1fr); gap: clamp(36px, 6vw, 110px); border-top: 0; }
.shelf-list { border-right-color: var(--line); padding-top: 0; }
.shelf-count { margin-bottom: 27px; font-weight: 700; letter-spacing: .11em; }
.shelf-row { padding-top: 21px; padding-bottom: 25px; }
.shelf-row-title { font-size: 18px; line-height: 1.65; }
.shelf-reader { padding-top: 0; }
.shelf-reader-meta { font-weight: 700; letter-spacing: .07em; }
.shelf-use-mark { background: #d6cfb8; color: var(--moss); }
.shelf-manuscript { margin-top: 42px; background: var(--paper-light); border: 1px solid var(--line); border-radius: 28px 12px 24px 10px; padding: clamp(26px, 4vw, 58px); font-family: var(--reading); font-size: clamp(18px, 1.45vw, 21px); font-weight: 400; line-height: 2.15; letter-spacing: .015em; }
.shelf-empty { min-height: 44vh; padding: 60px 0; }
.shelf-empty p { max-width: 780px; font-size: clamp(23px, 2.1vw, 31px); letter-spacing: -.045em; }

/* The reading room: same visual language, without sacrificing its density. */
body.library-mode { background: var(--paper); }
body.library-mode .site-header,
body.library-mode.cloud-session .site-header { height: 86px; grid-template-columns: minmax(200px, 285px) minmax(250px, 1fr) auto; gap: 26px; border-color: #566147; padding-inline: clamp(23px, 2.5vw, 46px); background: var(--moss); }
body.library-mode .brand-lockup { grid-column: 1; }
body.library-mode .wordmark { color: var(--paper-light); font-size: 26px; }
body.library-mode .brand-mark { display: none; }
body.library-mode .brand-tagline { display: none; }
body.library-mode .library-header-tools { grid-column: 2; display: flex; gap: 20px; }
body.library-mode .header-spacer,
body.library-mode.cloud-session .header-spacer { grid-column: 3; grid-row: 1; display: flex; align-items: center; justify-content: flex-end; }
.header-search { max-width: 680px; }
.header-search input { height: 47px; border: 1px solid #c1b9a8; border-radius: 14px 8px 13px 7px; background: var(--paper-light); color: var(--ink); }
.header-search input::placeholder { color: var(--soft); }
#header-new-material { display: inline-flex; align-items: center; gap: 6px; padding: 0 18px; border: 1px solid var(--spark); border-radius: 21px 12px 20px 10px; background: var(--spark); color: var(--ink); font-weight: 700; }
#header-new-material:hover { background: #d0c9a2; color: var(--ink); }
body.library-mode .cloud-logout { border-color: #adb49a; color: var(--paper-light); }
body.library-mode .cloud-logout:hover { background: var(--paper-light); color: var(--moss); }
#library-view .library-layout { grid-template-columns: 160px minmax(285px, 350px) minmax(0, 1fr); min-height: calc(100dvh - 86px); }
.library-rail { gap: 11px; border-right: 0; padding: 34px 13px; background: var(--moss); }
.rail-link { height: 57px; border-radius: 16px 8px 15px 7px; color: #e1dfce; font-size: 14px; }
.rail-link:hover { background: #4e5a40; color: #fff9ee; }
.rail-link.active { background: var(--spark); color: var(--ink); font-weight: 700; }
.rail-symbol { border-radius: 5px; }
#library-view .library-list { border-right: 1px solid var(--line); padding: 36px 18px 30px; background: #e6ddcc; }
.library-list-heading h1 { color: var(--ink); font: 500 32px/1.4 var(--display); letter-spacing: .03em; }
.library-list-heading button { color: var(--moss); }
.library-count { height: 41px; margin-top: 33px; border-radius: 13px 7px 12px 6px; background: #d8cdb9; color: var(--moss); }
#library-view .material-list { max-height: calc(100dvh - 245px); margin-top: 17px; }
#library-view .material-row { min-height: 91px; margin-bottom: 2px; border-radius: 15px 8px 13px 7px; padding: 17px 13px; }
#library-view .material-row:hover { background: #ded0ba; }
#library-view .material-row.selected { border-left-color: var(--clay); background: #d8c7aa; }
#library-view .material-row strong { color: var(--ink); font-size: 15px; }
#library-view .material-row small { color: var(--muted); }
#library-view .detail-pane { min-height: calc(100dvh - 86px); padding: 38px clamp(27px, 4vw, 84px) 90px; background: var(--paper); }
#library-view .empty-detail { color: var(--muted); font-size: 19px; }
#library-view .detail-pane h2 { margin-top: 53px; font: 500 clamp(30px, 3vw, 47px)/1.4 var(--display); letter-spacing: .015em; }
#library-view .detail-tabs { margin-top: 43px; }
#library-view .detail-tabs button { color: var(--muted); }
#library-view .detail-tabs button.selected { color: var(--moss); }
#library-view .detail-tabs button:focus-visible { border-radius: 11px 7px 10px 6px; outline: 1px solid var(--clay) !important; outline-offset: 2px; }
#library-view .reading-sheet { min-height: 530px; border-color: var(--line); border-radius: 26px 11px 22px 10px; background: #f8f1e5; box-shadow: 0 12px 28px #4a3d2a0b; }
#library-view .original-content { color: var(--ink); }
#library-view .original-content, .source-viewer-original .source-viewer-text { font-family: var(--reading); font-weight: 400; line-height: 2.05; letter-spacing: .015em; }
#library-view .paper-ai { border-radius: 14px 7px 12px 6px; background: #e9dec8; }
#library-view .paper-ai p { color: var(--muted); }
#library-view .paper-ai-label { border-right-color: var(--line); }
#library-view .image-ocr { border-left-color: var(--line); }
#library-view .image-section-label { color: var(--clay); }
#library-view .source-highlight { background: #e6d3a8; }
#library-view .insight-kicker, #library-view .links-kicker { letter-spacing: .18em; }
#library-view .insight-summary { font-size: clamp(25px, 2.4vw, 38px); }

/* Authentication and source reader belong to the same site. */
.cloud-login { overflow-y: auto; background: var(--moss); }
.cloud-login::before { content: "思考\A留有形状。"; position: absolute; left: clamp(26px, 7vw, 130px); top: clamp(30px, 8vh, 110px); width: min(55vw, 760px); color: #f5eddf17; font: 450 clamp(70px, 9vw, 160px)/1.35 var(--display); letter-spacing: .025em; white-space: pre; pointer-events: none; }
.cloud-login::after { content: "思有形  /  PRIVATE WORKSPACE"; position: absolute; left: clamp(26px, 7vw, 130px); bottom: 44px; color: #d4cfb9; font-size: 11px; letter-spacing: .15em; pointer-events: none; }
.cloud-login-form { position: relative; z-index: 1; width: min(100%, 500px); margin-left: min(27vw, 480px); border: 1px solid #c3b9a5; border-radius: 30px 13px 25px 11px; padding: clamp(30px, 4vw, 60px); background: var(--paper-light); box-shadow: 0 18px 42px #1b271b2e; }
.cloud-login-brand { margin-bottom: 45px; color: var(--moss); font: 500 27px/1.4 var(--display); letter-spacing: .06em; }
.cloud-login-form h1 { color: var(--ink); font: 500 clamp(31px, 2.9vw, 41px)/1.45 var(--display); letter-spacing: .015em; }
.cloud-login-form p { color: var(--muted); }
.cloud-login-form input { border: 1px solid var(--line); border-radius: 13px 8px 12px 7px; background: #fffaf0; color: var(--ink); }
.cloud-login-form button { border-radius: 22px 13px 21px 11px; background: var(--moss); }
.cloud-login-form button:hover { background: #45563a; }
.cloud-login-form .cloud-login-error { color: #963e35; }
.source-viewer { border-color: var(--line); background: var(--paper-light); }
.source-viewer::backdrop { background: #22291fe8; }
.source-viewer-header { border-bottom-color: var(--line); }
.source-viewer-nav { border-bottom-color: var(--line); }

@media (max-width: 1250px) {
  .site-header { grid-template-columns: minmax(130px, .7fr) auto minmax(70px, .4fr); }
  .site-nav { gap: 23px; }
  #library-view .library-layout { grid-template-columns: 80px minmax(260px, 305px) minmax(0, 1fr); }
  .library-rail { padding-inline: 8px; }
  .rail-link { display: grid; justify-items: center; gap: 2px; height: 69px; padding: 8px 2px; font-size: 11px; }
  #library-view .detail-pane { padding-inline: 30px; }
}
@media (max-width: 900px) {
  .site-header { grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; }
  .site-nav { justify-content: flex-end; gap: clamp(16px, 2vw, 24px); }
  .hero { min-height: 620px; grid-template-columns: minmax(0, 51%) minmax(0, 49%); }
  .hero-image { width: 94%; height: 480px; }
  .hero::before { top: 2%; right: -16%; width: 63vw; }
  .hero-content { padding-right: 10px; }
  .editor-section { grid-template-columns: 1fr; }
  .editor-section .section-heading { position: static; margin-bottom: 38px; }
  .section-heading h2, .section-heading p { max-width: 700px; }
  .privacy-note { grid-column: 1; }
  body.library-mode .site-header, body.library-mode.cloud-session .site-header { grid-template-columns: 170px minmax(0, 1fr) auto; gap: 15px; }
}
@media (max-width: 760px) {
  .site-header { height: auto; min-height: 74px; }
  body.library-mode .site-header, body.library-mode.cloud-session .site-header { grid-template-columns: 1fr auto auto; height: auto; gap: 10px; padding: 14px 20px 16px; }
  body.library-mode .brand-lockup { grid-column: 1; grid-row: 1; }
  body.library-mode .wordmark { font-size: 23px; }
  body.library-mode .library-header-tools { display: contents; }
  body.library-mode .header-search { grid-column: 1 / -1; grid-row: 2; }
  body.library-mode #header-new-material { grid-column: 2; grid-row: 1; min-height: 39px; padding: 0 11px; }
  body.library-mode .header-spacer, body.library-mode.cloud-session .header-spacer { grid-column: 3; grid-row: 1; }
  body.library-mode .cloud-logout { min-height: 39px; padding-inline: 9px; }
  #library-view .library-layout { display: block; }
  .library-rail { flex-direction: row; gap: 3px; overflow-x: auto; padding: 9px 13px; }
  .rail-link { display: flex; flex: none; width: auto; height: 41px; padding: 0 12px; font-size: 13px; }
  #library-view .library-list { padding: 23px 20px 17px; }
  #library-view .material-list { display: flex; max-height: none; overflow-x: auto; overflow-y: hidden; }
  #library-view .material-row { flex: 0 0 225px; min-height: 85px; margin-bottom: 0; border-left: 0; border-bottom: 3px solid transparent; }
  #library-view .material-row.selected { border-bottom-color: var(--moss); }
  #library-view .detail-pane { min-height: 0; padding: 28px 20px 70px; }
  #library-view .detail-pane h2 { margin-top: 28px; }
  .cloud-login-form { margin: 0; }
  .cloud-login::before { top: 4vh; width: 90%; font-size: clamp(56px, 12vw, 105px); }
  .cloud-login::after { display: none; }
}
@media (max-width: 700px) {
  .site-header { display: flex; flex-wrap: wrap; align-items: center; padding-top: 15px; }
  .wordmark { font-size: 24px; }
  .site-nav { order: 3; justify-content: space-between; gap: 20px; width: 100%; height: 56px; margin-top: 10px; overflow-x: auto; }
  .nav-item { font-size: 12px; }
  body.cloud-session:not(.library-mode) .header-spacer { display: flex; order: 2; margin-left: auto; }
  body.library-mode .site-header, body.library-mode.cloud-session .site-header { display: grid; }
  .hero { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding-bottom: 52px; background: var(--paper); }
  .hero-image { position: relative; inset: auto; order: 2; width: calc(100% - var(--gutter) - var(--gutter)); max-width: 560px; height: clamp(260px, 76vw, 410px); margin: 0 auto; border-radius: 68px 20px 58px 18px / 42px 48px 43px 50px; object-position: 66% 54%; opacity: 1; transform: rotate(-.8deg); }
  .hero::before { top: auto; right: -23%; bottom: -15%; width: 88vw; aspect-ratio: 1; }
  .hero-content { order: 1; width: 100%; max-width: none; padding: 62px var(--gutter) 43px; }
  .hero-content::before { margin-bottom: 31px; font-size: 13px; }
  .hero h1 { font-size: clamp(42px, 10.5vw, 64px); line-height: 1.34; letter-spacing: -.035em; }
  .hero-title { margin-top: 24px; font-size: clamp(17px, 4.5vw, 22px); letter-spacing: .025em; }
  .hero-copy { margin-top: 10px; color: var(--muted); }
  .hero-actions { gap: 23px; margin-top: 31px; }
  .hero-actions .primary { min-height: 54px; }
  .editor-section { padding-top: 77px; padding-bottom: 80px; }
  .section-heading h2 { font-size: 39px; }
  .editor-section .section-heading::before { margin-bottom: 18px; }
  .editor-toolbar { min-height: 70px; }
  #original-text { min-height: 235px; padding: 22px 17px; font-size: 16px; }
  .editor-footer { align-items: stretch; }
  .editor-footer .primary { align-self: stretch; }
  .interior-view { padding-top: 70px; }
  .page-heading { min-height: 0; padding: 34px 0 45px; margin-bottom: 30px; }
  .page-heading h1 { font-size: clamp(39px, 10vw, 60px); }
  .page-heading p { margin-top: 16px; }
  .thinking-intro { display: block; min-height: 0; padding: 30px 0 45px; }
  .thinking-intro p { font-size: 25px; }
  .topic-card { padding-inline: 7px; }
  .history { margin-top: 75px; }
  .history-row { display: block; }
  .history-row small { display: block; margin-top: 8px; }
  .shelf-layout { display: block; }
  .shelf-list { padding: 0 0 25px; border-right: 0; border-bottom: 1px solid var(--line); }
  .shelf-reader { padding: 32px 0 70px; }
  .shelf-manuscript { padding: 25px 20px; }
  .message { max-width: 100%; }
  .site-footer { min-height: 85px; padding-top: 20px; padding-bottom: 22px; }
}
@media (max-width: 380px) {
  .site-nav { gap: 15px; }
  .nav-item { font-size: 11px; }
  .hero-title { font-size: 17px; }
  .source-select { gap: 6px; }
  .source-select select { min-width: 112px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1, .hero-title, .hero-copy, .hero-actions, .view.active { animation: none; }
  .hero-image, .primary, .nav-item::after, .cloud-logout { transition: none; }
  .primary:active { transform: none; }
}