:root{--paper:#f4f0e7;--ink:#203b31;--muted:#607167;--line:#cbd2c8;--accent:#a77732;--wash:#e8ede6;--white:#fbfaf6;--sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;--pali:Georgia,"Times New Roman",serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.65}
button,input{font:inherit}
a{color:inherit}
.skip-link{position:absolute;top:-100px;left:12px;background:var(--ink);color:white;padding:8px 12px;z-index:10}
.skip-link:focus{top:8px}
.site-header{border-bottom:3px solid var(--line)}
.header-inner{max-width:1260px;min-height:84px;margin:auto;padding:12px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px}
#catalog-header-slot{display:none}
#catalog-sidebar-slot{min-width:0}
.brand{font-size:25px;line-height:1.2;font-weight:750;text-decoration:none;white-space:nowrap}
.brand span{display:block;color:var(--muted);font-size:13px;font-weight:500;letter-spacing:.03em}
.page-wrap{max-width:1260px;margin:auto;padding:0 28px 172px}
.page-intro{padding:0 0 28px}
.eyebrow{margin:0 0 8px;color:var(--accent);font-weight:700;font-size:13px;letter-spacing:.08em}
h1{font-size:clamp(30px,3.1vw,42px);line-height:1.2;letter-spacing:-.025em;margin:0 0 12px}
#status{margin:0;color:var(--muted)}
.layout{display:grid;grid-template-columns:310px minmax(0,1fr);border-top:3px solid var(--line);border-bottom:3px solid var(--line)}
.catalog{padding:28px 24px 34px 0;border-right:3px solid var(--line);max-height:calc(100vh - 96px);overflow:auto;position:sticky;top:0;align-self:start}
.catalog-summary{display:none}
.catalog-content{display:block}
.catalog label{display:block;font-weight:700;margin-bottom:8px}
.catalog input{width:100%;min-height:44px;padding:9px 12px;background:var(--white);border:2px solid var(--line);color:var(--ink);outline:none}
.catalog input:focus{border-color:var(--ink)}
.catalog-group-title{font-size:16px;margin:26px 0 10px;padding-bottom:7px;border-bottom:3px solid var(--line)}
.catalog-item{display:block;text-decoration:none;padding:10px 12px;margin:2px 0;border-left:3px solid transparent}
.catalog-item strong,.catalog-item small{display:block}
.catalog-item strong{font-size:15px}
.catalog-item small{font-size:13px;color:var(--muted);font-family:var(--pali);line-height:1.4}
.catalog-item:hover,.catalog-item.is-current{background:var(--wash);border-color:var(--ink)}
.catalog-item.is-collection{color:var(--accent);font-weight:700}
.catalog-item.is-child{margin-left:16px}
.catalog-subsections{margin:0 0 12px 16px;padding:4px 0 4px 12px;border-left:3px solid var(--line);font-size:13px}
.catalog-subsections summary{cursor:pointer;font-weight:700;color:var(--muted)}
.catalog-subsections ol{list-style:none;margin:8px 0 0;padding:0}
.catalog-subsections li{padding:5px 0;line-height:1.4}
.catalog-subsections strong,.catalog-subsections small{display:block}
.catalog-subsections small{color:var(--muted);font-family:var(--pali)}
.reader{min-width:0;padding:34px clamp(22px,4vw,64px)}
.empty-note{color:var(--muted);margin:0}
.entry-heading{padding-bottom:22px;border-bottom:3px solid var(--line);margin-bottom:18px}
.entry-overline{color:var(--accent);font-size:13px;font-weight:700;margin:0 0 10px}
.entry-pali-title{font:24px/1.35 var(--pali);margin:0}
.reading-row{padding:20px 0;border-bottom:3px solid var(--line)}
.reading-speaker{margin:0 0 8px;color:var(--accent);font:700 13px/1.4 var(--sans)}
.reading-section-label{margin:0 0 12px;color:var(--accent);font:700 17px/1.4 var(--sans)}
.reading-pali{display:flex;align-items:start;flex-wrap:wrap;gap:12px 6px;font:26px/1.4 var(--pali)}
.pali-word{border:0;background:transparent;color:var(--ink);padding:4px 7px;min-width:52px;text-align:left;cursor:pointer;border-radius:4px;font:inherit}
.pali-word:not(button){cursor:default}
button.pali-word:hover,button.pali-word:focus-visible{background:#dbe5d9;outline:none}
.pali-word.is-playing{background:#d5dfd2;box-shadow:inset 0 -3px var(--ink)}
.word-gloss{display:block;font:13px/1.4 var(--sans);color:var(--muted)}
.repeat-note{align-self:center;padding:3px 8px;color:var(--accent);font:700 13px/1.4 var(--sans)}
.reading-zh{margin:12px 0 0;color:#765a3c;line-height:1.85}
.reading-audio-variant{margin:8px 0 0;color:#795a2f;font-size:14px;line-height:1.6}
.more-rows{margin:24px 0;border:2px solid var(--ink);background:transparent;color:var(--ink);padding:9px 18px;cursor:pointer;font-weight:700}
.more-rows[hidden],[hidden]{display:none!important}
.source-footer{display:flex;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:16px;overflow-x:auto;padding-top:20px;color:var(--muted);font-size:14px;white-space:nowrap;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.source-footer p{flex:0 0 auto;margin:0}.source-footer a{text-underline-offset:4px}
.player-bar{position:fixed;z-index:20;bottom:0;left:0;right:0;color:#f7f5ec;background:#0d2c23;border-top:1px solid #b69b57;box-shadow:0 -8px 28px rgba(17,38,30,.16)}
.player-inner{max-width:1260px;min-height:78px;margin:auto;padding:11px 28px 12px;display:flex;align-items:center;gap:16px}
.player-inner audio{display:none}
.player-seek{position:absolute;top:-4px;left:0;width:100%;height:8px;margin:0;appearance:none;background:transparent;cursor:pointer;accent-color:#d3ba71}
.player-seek::-webkit-slider-runnable-track{height:3px;background:rgba(232,222,187,.32)}
.player-seek::-webkit-slider-thumb{width:10px;height:10px;margin-top:-3.5px;appearance:none;border:0;border-radius:50%;background:#d3ba71}
.player-seek::-moz-range-track{height:3px;background:rgba(232,222,187,.32)}
.player-seek::-moz-range-progress{height:3px;background:#d3ba71}
.player-seek::-moz-range-thumb{width:10px;height:10px;border:0;border-radius:50%;background:#d3ba71}
.player-mark{width:42px;height:42px;display:grid;place-items:center;flex:none;border:1px solid rgba(211,186,113,.55);border-radius:50%;color:#d3ba71;font-size:25px;line-height:1}
.player-track{min-width:100px;flex:1;overflow:hidden}
.player-track strong,.player-track small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player-track strong{font-size:14px;font-weight:700;color:#f7f5ec}
.player-track small{margin-top:2px;color:rgba(247,245,236,.64);font-size:11px}
.player-controls{display:flex;align-items:center;gap:8px;flex:none}
.player-controls button,.player-speed{display:grid;place-items:center;border:0;background:transparent;color:#f5f1e7;cursor:pointer}
.player-controls button{width:30px;height:36px;font-size:14px}
.player-controls .player-play{width:48px;height:48px;border:1px solid rgba(235,231,216,.35);border-radius:50%;background:rgba(255,255,255,.16);font-size:17px}
.player-controls button:hover,.player-speed:hover{color:#e0c778}
.player-controls button:disabled{opacity:.4;cursor:default}
.player-controls button:focus-visible,.player-speed:focus-visible{outline:2px solid #e0c778;outline-offset:3px}
.player-time{min-width:86px;text-align:right;color:rgba(247,245,236,.8);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.player-speed{width:38px;height:36px;border:1px solid rgba(235,231,216,.25);border-radius:5px;font-size:12px}
/* Keep the fixed player within the reader column whenever the catalog is a sidebar. */
@media (min-width: 901px) and (pointer: fine) {
  .player-bar {
    left: max(338px, calc(50vw - 292px));
    right: max(28px, calc(50vw - 602px));
  }

  .player-inner {
    max-width: none;
    margin: 0;
    padding-inline: clamp(22px, 4vw, 64px);
  }
}
/* Tablet: compact reading layout with a header-mounted directory. */
@media (min-width: 561px) and (max-width: 900px), (min-width: 901px) and (pointer: coarse) {
  .header-inner {
    min-height: 78px;
    padding: 12px 24px;
  }

  .page-wrap {
    padding: 0 24px 148px;
  }

  .layout {
    grid-template-columns: minmax(0, 1fr);
    border-top: 0;
    border-bottom: 0;
  }

  .layout > #catalog-sidebar-slot {
    display: none;
  }

  #catalog-header-slot {
    display: block;
    position: relative;
    flex: none;
  }

  .catalog {
    position: static;
    max-height: none;
    overflow: visible;
    padding: 0;
    border: 0;
  }

  .catalog-summary {
    display: flex;
    min-width: 82px;
    min-height: 46px;
    align-items: center;
    justify-content: space-between;
    padding: 7px 11px;
    border: 1px solid var(--line);
    border-radius: 8px;
    cursor: pointer;
    list-style: none;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
  }

  .catalog-summary::-webkit-details-marker {
    display: none;
  }

  .catalog-summary::after {
    margin-left: 10px;
    color: var(--accent);
    content: "＋";
    font-size: 16px;
  }

  .catalog[open] > .catalog-summary::after {
    content: "−";
  }

  .catalog-content {
    position: absolute;
    z-index: 30;
    top: calc(100% + 10px);
    right: 0;
    width: min(calc(100vw - 48px), 480px);
    padding: 10px 14px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--white);
    box-shadow: 0 16px 36px rgba(17, 38, 30, 0.16);
  }

  .catalog-content label,
  .catalog-content input {
    display: none;
  }

  .catalog #catalog-list {
    max-height: min(62vh, 560px);
    overflow: auto;
  }

  .reader {
    padding: 28px 0 36px;
  }

  .entry-heading {
    margin-bottom: 12px;
    padding-bottom: 18px;
  }

  .reading-row {
    padding: 24px 0;
    border-bottom-width: 1px;
  }

  .reading-pali {
    gap: 10px 5px;
    font-size: 25px;
  }

  .pali-word {
    min-height: 44px;
    padding: 5px 7px;
  }

  .reading-zh {
    margin-top: 10px;
    padding: 11px 14px;
    border-left: 3px solid #bba47e;
    border-radius: 0 8px 8px 0;
    background: rgba(232, 237, 230, 0.72);
    line-height: 1.8;
  }

  .source-footer {
    display: flex;
    gap: 12px;
    padding-top: 10px;
  }

  .source-footer p + p {
    margin-top: 0;
  }

  .player-bar {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Phone: larger touch targets, shorter reading lines, and a denser player. */
@media (max-width: 560px) {
  .header-inner {
    min-height: 68px;
    padding: 9px 16px;
    gap: 12px;
  }

  .brand {
    font-size: 21px;
  }

  .page-wrap {
    padding: 0 16px calc(126px + env(safe-area-inset-bottom));
  }

  .layout {
    grid-template-columns: minmax(0, 1fr);
    border-top: 0;
    border-bottom: 0;
  }

  .layout > #catalog-sidebar-slot {
    display: none;
  }

  #catalog-header-slot {
    display: block;
    position: relative;
    flex: none;
  }

  .catalog {
    position: static;
    max-height: none;
    overflow: visible;
    padding: 0;
    border: 0;
  }

  .catalog-summary {
    display: flex;
    min-width: 76px;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    padding: 6px 9px;
    border: 1px solid var(--line);
    border-radius: 7px;
    cursor: pointer;
    list-style: none;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
  }

  .catalog-summary::-webkit-details-marker {
    display: none;
  }

  .catalog-summary::after {
    margin-left: 8px;
    color: var(--accent);
    content: "＋";
    font-size: 15px;
  }

  .catalog[open] > .catalog-summary::after {
    content: "−";
  }

  .catalog-content {
    position: absolute;
    z-index: 30;
    top: calc(100% + 9px);
    right: -2px;
    width: min(calc(100vw - 32px), 420px);
    padding: 8px 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--white);
    box-shadow: 0 14px 30px rgba(17, 38, 30, 0.18);
  }

  .catalog-content label,
  .catalog-content input {
    display: none;
  }

  .catalog #catalog-list {
    max-height: min(64vh, 480px);
    overflow: auto;
  }

  .catalog-item {
    padding: 10px 11px;
  }

  .reader {
    padding: 22px 0 28px;
  }

  .page-intro {
    padding: 22px 0 18px;
  }

  .entry-heading {
    margin-bottom: 8px;
    padding-bottom: 16px;
  }

  .entry-pali-title {
    font-size: 22px;
  }

  .reading-row {
    padding: 20px 0;
    border-bottom-width: 1px;
  }

  .reading-pali {
    gap: 8px 3px;
    font-size: 22px;
    line-height: 1.35;
  }

  .pali-word {
    min-width: 0;
    min-height: 42px;
    padding: 5px 6px;
  }

  .word-gloss {
    font-size: 12px;
  }

  .repeat-note {
    padding: 3px 6px;
    font-size: 12px;
  }

  .reading-zh {
    margin-top: 9px;
    padding: 10px 12px;
    border-left: 3px solid #bba47e;
    border-radius: 0 7px 7px 0;
    background: rgba(232, 237, 230, 0.72);
    font-size: 15px;
    line-height: 1.8;
  }

  .source-footer {
    display: flex;
    gap: 8px;
    padding-top: 8px;
    font-size: 11px;
  }

  .source-footer p + p {
    margin-top: 0;
  }

  .player-bar {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .player-inner {
    min-height: 70px;
    padding: 8px 8px 9px;
    display: grid;
    grid-template-columns: 24px minmax(38px, 1fr) 102px 54px 32px;
    gap: 4px;
  }

  .player-mark {
    width: 26px;
    height: 26px;
    font-size: 16px;
  }

  .player-track {
    min-width: 0;
  }

  .player-track strong {
    font-size: 11px;
  }

  .player-track small {
    font-size: 9px;
  }

  .player-controls {
    display: grid;
    grid-template-columns: 30px 40px 30px;
    justify-content: center;
    gap: 1px;
  }

  .player-controls button {
    width: 30px;
    height: 40px;
    padding: 0;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
  }

  .player-controls .player-play {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }

  .player-time {
    min-width: 0;
    font-size: 9px;
  }

  .player-speed {
    width: 32px;
    height: 30px;
    font-size: 10px;
  }
}