:root {
  color-scheme:light;
  --paper:#f8f6ee;
  --ink:#173e36;
  --muted:#516b62;
  --line:#cbd4c9;
  --orange:#d86639;
  --river:#56867c;
  --white:#fffefa;
  --soft:#e9eee5;
  --error:#9b3326;
  font-family:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none
}
* {
  box-sizing:border-box
}
html {
  min-height:100%;
  scroll-behavior:smooth
}
body {
  margin:0;
  min-width:320px;
  font-size:16px;
  line-height:1.5
}
button,input,textarea,select {
  font:inherit
}
button {
  cursor:pointer
}
button:disabled {
  cursor:not-allowed;
  opacity:.5
}
button,a,input,textarea,select,summary {
  outline-offset:3px
}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible {
  outline:3px solid #b94f28;
  outline-offset:3px
}
a {
  color:inherit
}
img {
  display:block;
  max-width:100%
}
h1,h2,h3,p {
  margin-top:0
}
h1,h2,h3 {
  line-height:1.13
}
svg.ico {
  width:20px;
  height:20px;
  flex:none;
  vertical-align:middle
}
svg {
  max-width:100%
}
[hidden] {
  display:none!important
}
.sr-only {
  position:absolute!important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.shell {
  max-width:1100px;
  margin:auto;
  padding:0 30px
}
.topbar {
  min-height:83px;
  display:flex;
  align-items:center;
  gap:20px;
  border-bottom:1px solid var(--line)
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--ink);
  font-weight:750;
  letter-spacing:-.03em;
  text-decoration:none;
  white-space:nowrap
}
.brand svg {
  width:35px;
  height:35px
}
.modebox {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px
}
.role-tabs {
  display:flex;
  padding:4px;
  gap:3px;
  background:#e9ede5;
  border:1px solid #d4ddd1;
  border-radius:99px
}
.role-tabs button {
  border:0;
  border-radius:99px;
  background:transparent;
  color:#36584e;
  min-height:44px;
  padding:7px 16px;
  font-size:14px;
  font-weight:650
}
.role-tabs button[aria-pressed=true] {
  color:var(--white);
  background:var(--ink)
}
.tools-toggle {
  width:44px;
  height:44px;
  border:1px solid var(--line);
  border-radius:50%;
  background:transparent;
  color:var(--ink);
  display:grid;
  place-items:center
}
.utility-pop {
  position:absolute;
  z-index:5;
  right:max(30px,calc((100vw - 1040px)/2));
  top:74px;
  width:min(310px,calc(100vw - 36px));
  padding:20px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 12px 32px #173e361a
}
.utility-pop h2,.utility-pop h3 {
  font-family:Georgia,serif;
  font-size:21px;
  margin:0 0 12px
}
.utility-actions {
  display:grid;
  gap:8px
}
.workspace {
  display:grid;
  grid-template-columns:minmax(0,600px) minmax(220px,1fr);
  gap:clamp(48px,8vw,110px);
  align-items:start;
  padding:44px 0 80px
}
.paper {
  min-width:0;
  max-width:600px
}
.side {
  padding-top:6px;
  color:var(--muted);
  font-size:14px
}
.side h2,.side h3 {
  color:var(--ink);
  font-family:Georgia,serif;
  font-size:21px;
  line-height:1.25;
  margin-bottom:18px
}
.route-list {
  list-style:none;
  margin:0;
  padding:0
}
.route-item {
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:10px 0;
  color:#647a70
}
.route-item.is-current {
  font-weight:700;
  color:var(--ink)
}
.route-dot {
  width:12px;
  height:12px;
  flex:none;
  border:1px solid #91a69a;
  border-radius:50%;
  margin-top:5px;
  background:var(--paper)
}
.is-current .route-dot {
  background:var(--ink);
  border-color:var(--ink);
  box-shadow:0 0 0 4px #dde9dd
}
.mobile-path {
  display:none
}
.progress-row {
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  color:var(--muted);
  font-size:13px;
  font-weight:650
}
.progress-segments {
  display:flex;
  gap:5px;
  flex:1;
  max-width:170px
}
.progress-segments i {
  display:block;
  flex:1;
  height:4px;
  background:#d8e1d6;
  border-radius:5px
}
.progress-segments i.is-done,.progress-segments i.is-now {
  background:var(--ink)
}
.step-line {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:24px
}
.back,.inline-link {
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:44px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--ink);
  font-weight:650;
  text-decoration:underline;
  text-decoration-color:#9bb0a1;
  text-underline-offset:4px
}
.cover {
  overflow:hidden;
  border:1px solid #d7ddd0;
  border-radius:18px;
  background:var(--white)
}
.cover-art {
  width:100%;
  aspect-ratio:2.8/1;
  object-fit:cover;
  background:#d7e3d9
}
.cover-info {
  padding:22px 24px 24px
}
.cover-meta {
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--muted);
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase
}
.book-mini {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:42px;
  background:#e3ece2;
  border-radius:3px 7px 7px 3px;
  color:var(--ink)
}
.editorial-title,.screen-title {
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  letter-spacing:-.025em;
  color:var(--ink)
}
.editorial-title {
  font-size:clamp(34px,4.1vw,48px);
  line-height:1.06;
  margin:14px 0
}
.screen-title {
  font-size:clamp(31px,3.4vw,42px);
  line-height:1.12;
  margin:0 0 16px
}
.lead {
  font-size:18px;
  line-height:1.55;
  color:#415d53;
  max-width:54ch;
  margin-bottom:24px
}
.cover .lead {
  font-size:16px;
  line-height:1.45;
  margin-bottom:18px
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:48px;
  padding:11px 20px;
  border:1px solid var(--ink);
  border-radius:10px;
  background:transparent;
  color:var(--ink);
  font-weight:700;
  text-align:center;
  text-decoration:none;
  line-height:1.25;
  transition:background-color .15s,color .15s,border-color .15s
}
.button.primary {
  background:var(--ink);
  color:#fffefa
}
.button.primary:hover {
  background:#28594c
}
.button.secondary {
  background:var(--white)
}
.button.secondary:hover,.button.quiet:hover {
  background:#e9eee5
}
.button.quiet {
  border-color:transparent
}
.button.danger {
  color:var(--error);
  border-color:#d3aaa1;
  background:transparent
}
.actions,.bottom-actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:28px
}
.button-row {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap
}
.status-note,.feedback-note,.notice,.error,.success {
  padding:14px 16px;
  border-radius:10px;
  border:1px solid #cbd9ca;
  background:#eef3e9;
  color:#294c3f;
  line-height:1.45;
  margin:16px 0
}
.error {
  border-color:#e4bcb2;
  background:#fff1ec;
  color:#85291d
}
.success {
  background:#e8f2e7
}
.field {
  display:grid;
  gap:7px;
  margin:0 0 18px
}
.field label,label {
  font-weight:700
}
.field input,.field textarea,input:not([type=radio]):not([type=checkbox]),textarea,select {
  width:100%;
  min-height:48px;
  border:1px solid #9eafa2;
  border-radius:9px;
  background:var(--white);
  color:var(--ink);
  padding:11px 13px
}
.field textarea,textarea {
  min-height:120px;
  resize:vertical
}
.field input::placeholder,textarea::placeholder {
  color:#70847a
}
.profiles,.choice-list,.question-list {
  display:grid;
  gap:10px
}
.profile,.choice,.qrow {
  width:100%;
  display:flex;
  align-items:center;
  gap:14px;
  text-align:left;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--white);
  color:var(--ink);
  min-height:64px
}
.profile.is-selected,.choice[aria-pressed=true],.choice.is-selected {
  border:2px solid var(--ink);
  background:#eef4ea
}
.avatar,.initial {
  width:44px;
  height:44px;
  border-radius:50%;
  display:grid;
  place-items:center;
  flex:none;
  background:#d9e7d8;
  color:var(--ink);
  font-family:Georgia,serif;
  font-size:20px
}
.story-text {
  max-width:55ch
}
.story-text p {
  font-family:Georgia,"Times New Roman",serif;
  font-size:21px;
  line-height:1.55;
  letter-spacing:.005em;
  margin:0 0 1em
}
.record-panel {
  padding:24px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--white);
  text-align:center
}
.record-button {
  width:76px;
  height:76px;
  border:0;
  border-radius:50%;
  background:var(--ink);
  color:white;
  display:inline-grid;
  place-items:center
}
.record-button .ico {
  width:28px;
  height:28px
}
.record-live {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:var(--ink)
}
.wave {
  display:flex;
  align-items:center;
  gap:3px;
  min-height:28px
}
.wave>* {
  width:3px;
  border-radius:5px;
  background:var(--river)
}
.timer {
  font-variant-numeric:tabular-nums;
  font-weight:700
}
.player {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap
}
.player audio,audio {
  max-width:100%;
  width:100%;
  min-height:44px
}
.answer-entry,.review-answer {
  padding:18px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--white);
  margin:16px 0
}
.rec-label {
  color:var(--muted);
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em
}
.sheet {
  max-width:min(540px,calc(100vw - 32px));
  max-height:calc(100dvh - 32px);
  overflow:auto;
  border:1px solid var(--line);
  border-radius:18px;
  padding:26px;
  background:var(--paper);
  color:var(--ink);
  box-shadow:0 18px 60px #102e2770
}
.sheet::backdrop {
  background:#102e2780
}
.sheet h2 {
  font-family:Georgia,serif;
  font-size:28px;
  font-weight:400
}
.sheet .actions {
  margin-top:22px
}
@media(max-width:850px) {
  .shell {
    padding:0 22px
  }
  .topbar {
    min-height:70px;
    gap:10px
  }
  .workspace {
    display:block;
    padding:26px 0 48px
  }
  .paper {
    max-width:600px;
    margin:auto
  }
  .side {
    display:none
  }
  .mobile-path {
    display:block;
    margin-bottom:22px
  }
  .utility-pop {
    top:66px;
    right:18px
  }
  .role-tabs button {
    padding-inline:12px
  }
}
@media(max-width:480px) {
  .shell {
    padding:0 18px
  }
  .brand {
    font-size:15px;
    gap:6px
  }
  .brand svg {
    width:31px;
    height:31px
  }
  .modebox {
    gap:5px
  }
  .role-tabs {
    padding:3px
  }
  .role-tabs button {
    font-size:12px;
    padding:6px 10px;
    min-height:44px
  }
  .tools-toggle {
    width:44px;
    height:44px
  }
  .workspace {
    padding-top:20px
  }
  .cover-info {
    padding:18px
  }
  .editorial-title {
    font-size:34px;
    margin:10px 0
  }
  .cover .lead {
    margin-bottom:14px
  }
  .screen-title {
    font-size:32px
  }
  .lead {
    font-size:17px
  }
  .actions,.bottom-actions {
    margin-top:22px
  }
  .actions .button,.bottom-actions .button {
    flex:1 1 auto
  }
  .story-text p {
    font-size:21px
  }
  .sheet {
    padding:21px
  }
  .button-row .button {
    flex:1 1 auto
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important
  }
}
/* Элементы конкретных экранов */
.home-line {
  display:flex;
  align-items:center;
  gap:12px;
  padding:18px 2px;
  border-bottom:1px solid var(--line);
}
.home-line > .ico {
  flex:none;
}
.home-line > div {
  flex:1;
  min-width:0;
}
.home-line strong, .home-line small, .profile small, .reader-heading strong, .reader-heading small {
  display:block;
}
.home-line small, .profile small, .reader-heading small {
  color:#456258;
  font-size:14px;
  line-height:1.4;
  font-weight:400;
}
.home-line .inline-link {
  flex:none;
}
.excerpt {
  color:#3d5b50;
  line-height:1.5;
  margin:14px 0 18px;
}
.cover {
  box-shadow:0 4px 0 #e5e6d9, 0 12px 24px #173e3610;
}
.cover-meta .ico {
  width:18px;
  height:18px;
}
.source-options {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 20px;
}
.source-options button {
  min-height:44px;
  padding:8px 16px;
  border:1px solid #a9bbae;
  border-radius:9px;
  background:var(--white);
  color:var(--ink);
  font-weight:650;
}
.source-options button[aria-pressed=true] {
  background:var(--ink);
  border-color:var(--ink);
  color:var(--white);
}
.two-fields {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(85px,120px);
  gap:12px;
}
.profile small {
  margin-top:2px;
}
.option-indicator {
  margin-left:auto;
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border:1px solid #9bada0;
  border-radius:50%;
}
.profile.is-selected .option-indicator {
  color:white;
  background:var(--ink);
  border-color:var(--ink);
}
.subline {
  color:#456258;
  line-height:1.5;
  margin:0 0 20px;
}
.question-edit {
  display:flex;
  align-items:start;
  gap:8px;
}
.question-edit .field {
  flex:1;
  min-width:0;
}
.question-edit textarea {
  min-height:84px;
}
.remove-q {
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  margin-top:28px;
  border:1px solid var(--line);
  border-radius:9px;
  background:transparent;
  color:var(--ink);
}
.photo-entry {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:18px;
}
.file-choice {
  cursor:pointer;
}
.file-choice:focus-within {
  outline:3px solid #b94f28;
  outline-offset:3px;
}
.page-thumb {
  max-width:140px;
  max-height:120px;
  object-fit:contain;
  border-radius:6px;
}
.reader-heading {
  display:flex;
  align-items:center;
  gap:12px;
  padding-bottom:18px;
  margin-bottom:24px;
  border-bottom:1px solid var(--line);
}
.reader-heading .book-mini {
  flex:none;
}
.record-panel {
  margin-top:24px;
}
.record-live {
  flex-wrap:wrap;
  margin-top:16px;
}
.record-dot {
  width:10px;
  height:10px;
  border-radius:50%;
  background:#aa3626;
}
.record-alternatives {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:4px 20px;
  margin-top:8px;
}
.player {
  margin-bottom:14px;
  text-align:left;
}
.player .rec-label {
  width:100%;
}
.photo-detail, .voice-detail, .transcript-detail, .source-detail {
  margin:16px 0;
}
summary {
  cursor:pointer;
  min-height:44px;
  padding:10px 0;
  color:var(--ink);
  font-weight:650;
  text-decoration:underline;
  text-decoration-color:#9bb0a1;
  text-underline-offset:4px;
}
.photo-detail img {
  width:100%;
  max-height:65vh;
  object-fit:contain;
  object-position:left top;
}
.feedback-note, .status-note {
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.feedback-note p, .status-note p {
  margin:4px 0 0;
  white-space:pre-wrap;
}
.feedback-field {
  margin-top:22px;
}
.repair-target {
  margin:20px 0;
  padding:20px;
  border:1px solid var(--line);
  background:var(--white);
  border-radius:12px;
}
.repair-target h2 {
  margin:8px 0 0;
  font-family:Georgia,serif;
  font-size:24px;
  font-weight:400;
  line-height:1.3;
}
.review-section {
  margin-top:28px;
}
.review-section h2 {
  font-family:Georgia,serif;
  font-size:25px;
  font-weight:400;
}
.review-answer h3 {
  margin:8px 0 12px;
  font-size:18px;
  line-height:1.4;
}
.answer-text {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.radio-dot {
  width:20px;
  height:20px;
  flex:none;
  border:1px solid #7b9687;
  border-radius:50%;
}
.choice[aria-pressed=true] .radio-dot {
  border:6px solid var(--ink);
}
.empty-illustration {
  display:grid;
  place-items:center;
  width:80px;
  height:80px;
  margin:20px 0;
  border-radius:50%;
  background:#e4eee3;
}
.empty-illustration .ico {
  width:32px;
  height:32px;
}
.live-message {
  pointer-events: none;
  opacity: 0;
}
.live-message.show:not(:empty) {
  opacity: 1;
  position:fixed;
  z-index:20;
  left:50%;
  bottom:max(16px, env(safe-area-inset-bottom));
  transform:translateX(-50%);
  width:max-content;
  max-width:calc(100vw - 36px);
  padding:12px 18px;
  border-radius:10px;
  background:var(--ink);
  color:white;
  box-shadow:0 8px 24px #173e3633;
}
.file-choice {
  position: relative;
}
input.sr-only[type="file"] {
  position: absolute;
  inset: 0 auto auto 0;
  width: 1px;
  min-width: 0;
  height: 1px;
  min-height: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
}
.child-role {
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 600;
}
.reading-page {
  margin-block: 26px 8px;
}
.reader-heading + .record-panel {
  margin-top: 0;
}
.paper {
  overflow-wrap: anywhere;
}
.record-panel.is-recording {
  position: sticky;
  top: max(6px, env(safe-area-inset-top));
  z-index: 2;
  padding: 10px 12px;
  background: var(--paper);
  box-shadow: 0 4px 12px #173e3615;
}
.record-panel.is-recording .record-live {
  margin-top: 0;
}
.record-panel.is-recording .player {
  display: none;
}
.side-title {
  font-family:Georgia,serif;
  font-size:21px;
  font-weight:400;
  color:var(--ink);
  margin:0 0 18px;
}
.journey {
  list-style:none;
  margin:0;
  padding:0;
}
.journey li {
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:10px 0;
  color:#526d61;
}
.journey-no {
  display:grid;
  place-items:center;
  flex:none;
  width:30px;
  height:30px;
  border:1px solid #a6b9aa;
  border-radius:50%;
  font-size:13px;
  font-weight:700;
}
.journey-copy strong, .journey-copy small {
  display:block;
}
.journey-copy strong {
  color:var(--ink);
  font-size:14px;
}
.journey-copy small {
  margin-top:2px;
  font-size:13px;
  line-height:1.4;
}
.journey li.is-current .journey-no {
  color:white;
  border-color:var(--ink);
  background:var(--ink);
}
.journey li.is-done .journey-no {
  background:#dce9dc;
  border-color:#9ab5a0;
}
dialog.sheet {
  position:fixed;
  inset:0;
  margin:auto;
  width:min(540px,calc(100vw - 32px));
}
.sheet-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
}
.sheet-head h2 {
  margin:0 0 16px;
}
.sheet-content {
  line-height:1.5;
}
.sheet-actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
}
@media(max-width:480px) {
  .topbar {
    gap:4px;
  }
  .brand {
    white-space:nowrap;
  }
  .role-tabs button {
    padding-inline:8px;
  }
  .home-line {
    gap:8px;
  }
  .home-line small {
    font-size:13px;
  }
  .home-line .inline-link {
    font-size:14px;
  }
  .step-line {
    gap:8px;
  }
  .progress-row {
    gap:8px;
  }
  .progress-segments {
    min-width:48px;
  }
  .two-fields {
    grid-template-columns:minmax(0,1fr) 82px;
    gap:8px;
  }
  .cover-info {
    padding:16px 18px 18px;
  }
  .sheet-actions .button {
    flex:1 1 auto;
  }
}
@media (max-width: 360px) {
  .shell { padding-inline: 14px; }
  .brand { font-size: 14px; }
  .brand svg { width: 28px; height: 28px; }
  .role-tabs button { padding-inline: 7px; }
  .tools-toggle { flex: none; }
}