:root {color-scheme:light; --ink:#192c39; --paper:#fffdf6; --forest:#214e41; --line:#d6dece; --muted:#476156; font:16px/1.5 "Segoe UI","Microsoft YaHei UI",sans-serif}
* {box-sizing:border-box}
body {margin:0;background:#eef0e8;color:var(--ink)}
.masthead,main {width:min(1380px,calc(100% - 32px));margin:auto}
.masthead {display:flex;gap:20px;justify-content:space-between;align-items:end;padding:25px 0 16px;border-bottom:1px solid #bfcebf}
h1,h2,p {margin:0}
h1 {font-size:clamp(1.6rem,4vw,2.8rem);font-weight:800;line-height:1.15}
.eyebrow {font-size:.72rem;color:var(--forest);letter-spacing:.22em;font-weight:700;margin-bottom:6px}
#edition,#status,.translation,.gloss {color:var(--muted)}
#edition {margin-top:5px}
nav,.sound,.actions,.controls {display:flex;align-items:center;gap:7px;flex-wrap:wrap}
nav {justify-content:space-between;padding-top:14px}
#status {min-height:1.5em;margin:6px 0}
button {font:inherit;color:var(--forest);background:#fff;border:1px solid #9bb5a4;border-radius:8px;min-height:40px;padding:5px 12px;cursor:pointer}
button:focus-visible,textarea:focus-visible {outline:3px solid #0c6a5e;outline-offset:2px}
button:disabled {opacity:.5;cursor:default}
button[aria-pressed=true],.start:not(:disabled) {background:var(--forest);color:white;border-color:var(--forest)}
#spread {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2px;border-radius:12px;box-shadow:0 14px 40px #172c2922;margin-bottom:24px}
.page {background:var(--paper);padding:clamp(8px,2vw,24px);border:1px solid var(--line);min-height:420px}
.page:first-child {border-radius:12px 0 0 12px;background:linear-gradient(90deg,var(--paper) 96%,#eef0e5)}
.page:last-child {border-radius:0 12px 12px 0}
.page h2 {font-size:clamp(1rem,2.3vw,1.45rem);overflow-wrap:anywhere}
.controls {margin:10px 0 14px}
.segment {padding:10px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.segment.active {background:#deeedc;outline:2px solid #b1c9ad}
.sentence {display:flex;gap:4px 9px;flex-wrap:wrap;align-items:start}
.word {display:inline-grid;text-align:center;max-width:100%}
.word b {font:700 clamp(.86rem,1.65vw,1.24rem)/1.4 Georgia,serif}
.gloss {font-size:.76rem}
.translation {font-size:.86rem;margin-top:5px}
.tools {display:flex;gap:4px;justify-content:end;margin-top:3px}
.tools button {min-height:32px;padding:0 7px;font-size:.77rem}
.facsimile {position:relative;background-size:100% 100%;background-repeat:no-repeat}
.facsimile .segment {position:absolute;overflow:auto;border:0;background:var(--paper);padding:2px}
.facsimile .segment.active {background:#deeedc}
dialog {border:1px solid #9bb5a4;border-radius:12px;padding:20px;width:min(530px,calc(100% - 24px))}
dialog::backdrop {background:#1d292988}
dialog label {display:block;margin-top:12px}
textarea {width:100%;padding:8px;font:inherit;border:1px solid #9bb5a4;border-radius:5px}
#edit-error {color:#9a211e}
@media(max-width:600px) {.masthead {align-items:start;flex-direction:column;gap:10px}button {min-height:36px;padding:4px 6px;font-size:.8rem}.page {padding:7px}.tools {justify-content:start}.controls {gap:3px}.gloss {font-size:.67rem}}
.reference-columns {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(8px,2vw,20px)}
.reference-english {font:700 clamp(.9rem,1.65vw,1.18rem)/1.4 Georgia,serif}
.reference-unit {margin:.4rem 0 0;font-size:.84rem;color:var(--forest)}
.reference-columns .translation {margin-top:2px}
#gloss-field[hidden] {display:none}
@media(max-width:850px) {.reference-columns {grid-template-columns:minmax(0,1fr)}.reference-columns > div:empty {display:none}}