:root{--paper:#eee0bd;--ink:#29231d;--muted:#796c5c;--panel:rgba(234,219,182,.96);--en:20px;--zh:16.5px;--edge:21px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden}body{color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(ellipse at 18% 12%,rgba(255,255,255,.28),transparent 32%),radial-gradient(ellipse at 84% 74%,rgba(105,72,35,.055),transparent 35%),repeating-linear-gradient(12deg,rgba(87,61,32,.016) 0 1px,transparent 1px 6px),var(--paper)}body.night{--paper:#181715;--ink:#e8e0d3;--muted:#938a7e;--panel:rgba(34,32,29,.96);background:#181715}#clock{position:fixed;z-index:30;top:calc(env(safe-area-inset-top) + 6px);left:0;right:0;text-align:center;font-size:11px;letter-spacing:.08em;color:var(--muted);pointer-events:none}#viewport{position:fixed;inset:0;padding:calc(env(safe-area-inset-top) + 32px) var(--edge) calc(env(safe-area-inset-bottom) + 34px);overflow:hidden}#page{height:100%;max-width:680px;margin:auto;overflow:hidden}.pair{margin:0 0 12px}.en{font-family:Charter,"Iowan Old Style",Palatino,Georgia,serif;font-size:var(--en);line-height:1.49}.zh{font-family:"Songti SC","STSong","Noto Serif CJK SC",serif;font-size:var(--zh);line-height:1.49;margin-top:3px;opacity:.82}.airow{height:17px;display:flex;justify-content:space-between;align-items:center}.ai{border:0;background:transparent;color:var(--muted);font-size:10.5px;padding:1px 0;position:relative;z-index:60}.ai.right{font-size:13px;padding:0 4px}.analysis{display:none;margin:3px 0;padding:6px 9px;border-left:2px solid color-mix(in srgb,var(--muted) 28%,transparent);font-size:12.5px;line-height:1.45;color:var(--muted)}.analysis.open{display:block}#leftZone,#rightZone,#centerZone{position:fixed;z-index:20;top:10%;bottom:10%}#leftZone{left:0;width:30%}#rightZone{right:0;width:30%}#centerZone{left:30%;right:30%}#progress{position:fixed;z-index:30;bottom:calc(env(safe-area-inset-bottom) + 7px);left:var(--edge);right:var(--edge);display:flex;gap:8px;align-items:center;color:var(--muted);font-size:10px;pointer-events:none}.track{height:1px;flex:1;background:color-mix(in srgb,var(--muted) 22%,transparent)}#fill{height:1px;background:var(--muted)}#chrome{position:fixed;inset:0;z-index:70;pointer-events:none;opacity:0;transition:.15s}#chrome.show{opacity:1}.topbar,.bottombar{pointer-events:auto;position:absolute;left:12px;right:12px;border:1px solid color-mix(in srgb,var(--muted) 16%,transparent);background:var(--panel);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 8px 30px rgba(0,0,0,.1)}.topbar{top:calc(env(safe-area-inset-top) + 24px);border-radius:15px;padding:10px 12px;display:grid;grid-template-columns:70px 1fr 70px;align-items:center;text-align:center;font-size:12px}.bottombar{bottom:calc(env(safe-area-inset-bottom) + 29px);border-radius:17px;padding:8px;display:flex;justify-content:center;gap:8px}.pill{border:0;border-radius:999px;padding:8px 11px;background:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--ink);font-size:12px}#toast{position:fixed;z-index:90;left:50%;transform:translateX(-50%);bottom:75px;background:var(--ink);color:var(--paper);padding:7px 11px;border-radius:999px;font-size:11px;opacity:0;transition:.18s;pointer-events:none}#toast.show{opacity:.92}#measure{position:absolute;visibility:hidden;pointer-events:none;width:calc(100vw - 42px);max-width:680px}


/* QuietLeaf V4 refinements */
.zh {
  font-family: "Songti SC", "STSong", "Noto Serif CJK SC", serif !important;
}

/* Keep the two AI controls comfortably inside the page, away from page-turn hot zones. */
.airow {
  padding-left: 34px !important;
  padding-right: 34px !important;
}

/* Night reading: deliberately lower luminance than the previous build. */
body.night {
  --paper: #151513 !important;
  --ink: #bcb5aa !important;
  --muted: #777168 !important;
  background: #151513 !important;
}
body.night .en {
  color: #bcb5aa !important;
}
body.night .zh {
  color: #938d84 !important;
  opacity: 1 !important;
}
body.night .aiBtn,
body.night .analysis,
body.night #clock,
body.night #progress {
  color: #716c64 !important;
}
body.night .track {
  background: rgba(150,145,135,.14) !important;
}
body.night #fill {
  background: #716c64 !important;
}