:root{font-family:Inter,system-ui,-apple-system,"Noto Sans TC",sans-serif;color:#17202a;background:#f4f1ea}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{overflow:hidden}
main{max-width:1600px;margin:auto;padding:14px 18px}
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:10px}
.topbar>div:first-child{position:relative}
.siteBackLink{position:absolute;top:-10px;left:0;color:#8b3a2b;font-size:.64rem;font-weight:800;text-decoration:none;white-space:nowrap}
.siteBackLink:hover{text-decoration:underline}
.siteBackLink:focus-visible{outline:2px solid #8b3a2b;outline-offset:3px;border-radius:2px}
h1{font-size:clamp(1.55rem,2.5vw,2.6rem);margin:0;letter-spacing:-.035em}
.topbar p{margin:4px 0 0;color:#746c62;font-size:.84rem}
.displayControl{display:flex;align-items:center;gap:10px;white-space:nowrap;padding-top:2px}
.displayControl>span{font-size:.76rem;font-weight:700}
h2{font-size:.9rem;margin:0}
.workspace{
  display:grid;
  grid-template-columns:minmax(470px,34%) 1fr;
  gap:10px;
  height:calc(100vh - 68px);
}
.controls,.resultsPanel{min-height:0}
.controls{overflow:hidden}
.panel{background:#fff;border:1px solid #d9d2c4;border-radius:10px;padding:9px;margin:0 0 6px;box-shadow:0 4px 14px #4c3a2710}
.soundPanel{padding:8px 9px}
.sectionHead{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  text-align:center;
}

.resultsHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.subtle{margin:0;color:#746c62;font-size:.69rem;line-height:1.25}
.finalHelp{margin:4px 0 7px}
.seg{display:flex;border:1px solid #bbb3a5;border-radius:8px;overflow:hidden}
.seg button{border:0;border-right:1px solid #bbb3a5;background:white;padding:6px 10px;cursor:pointer;font-size:.74rem}
.seg button:last-child{border:0}
.seg .on,.sound.on,.special.on{background:#8b3a2b;color:#fff;border-color:#8b3a2b}
.specialButtons{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:5px;
  margin:0;
}
.special{border:1px solid #bbb3a5;background:#faf9f6;border-radius:7px;padding:5px 8px;cursor:pointer;font-size:.7rem;font-weight:700}
.initialGrid{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:8px 9px;
}

.initialRow{
  display:flex;
  justify-content:center;
  gap:6px;
}

.initialRow .sound{
  width:42px;
  flex:0 0 42px;
}
.finalGrid{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:8px 9px;
}

.finalRow{
  display:flex;
  justify-content:center;
  gap:6px;
}

.finalRow .sound{
  width:42px;
  flex:0 0 42px;
}
.sound{
  min-width:0;
  height:38px;
  border:1px solid #bbb3a5;
  background:#faf9f6;
  border-radius:6px;
  padding:2px;
  cursor:pointer;
}
.sound b{
  display:block;
  font-size:.78rem;
  font-weight:700;
  line-height:1.05;
}

.alternateFinal{
  display:block;
  font-size:.62rem;
  line-height:1.05;
  font-weight:500;
}
.sound:disabled{background:#e8e6e1;color:#aaa49b;border-color:#d8d4cc;cursor:not-allowed;opacity:.62}
.selectionBar{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#17202a;color:#fff;padding:8px 11px}
.selectionBar strong{font-size:.72rem}
.selectionBar span{font-size:.72rem;text-align:right}
.optionsPanel{
  padding:9px;
}

.optionsPanel .sectionHead{
  justify-content:center;
  margin-bottom:7px;
}


.optionGroups{
  display:grid;
  grid-template-columns:minmax(0, 58%) minmax(0, 42%);
  column-gap:18px;
  row-gap:14px;
  align-items:start;
  padding:0 10px;
}

.optionColumn{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.optionColumnLeft{
  gap:17px;
}

.optionColumnRight{
  gap:24px;
}

.optionRow{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}

.optionColumnRight .optionRow{
  width:auto;
  min-width:240px;
}

.optionLabel{
  display:block;
  font-size:.69rem;
  font-weight:700;
  text-align:center;
}

.optionButtons{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:5px;
}

#sort{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  width:100%;
  max-width:570px;
  gap:8px;
}

#sort .optionButton{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-width:0;
  padding-left:5px;
  padding-right:5px;
}

.optionButton{
  min-height:30px;
  padding:5px 10px;
  border:1px solid #bbb3a5;
  border-radius:7px;
  background:#faf9f6;
  color:#292621;
  font-size:.7rem;
  font-weight:600;
  cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}

.optionButton:hover{
  background:#f1eee8;
}

.optionButton.on{
  background:#17202a;
  border-color:#17202a;
  color:#fff;
}

.displayOptionRow{
  margin:0;
}

.actionButtons{
  grid-column:1 / -1;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  width:100%;
  margin-top:2px;
}

.primary,
.secondary{
  padding:8px 18px;
  border-radius:8px;
  font-weight:800;
  cursor:pointer;
}

.primary{
  width:50%;
  min-width:250px;
  border:0;
  background:#17202a;
  color:#fff;
}

.secondary{
  border:1px solid #b9b2a7;
  background:#fff;
  color:#17202a;
}

@media(max-width:760px){
  .optionGroups{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
    padding:0;
  }

  .optionColumn{
    width:100%;
  }

  .optionColumnLeft,
  .optionColumnRight{
    gap:14px;
  }

  .optionColumnRight .optionRow{
    min-width:0;
  }

  #sort{
    max-width:570px;
  }

.actionButtons{
  flex-direction:column-reverse;
}

.primary,
.secondary{
  width:100%;
  min-width:0;
}
}

.resultsPanel{
  margin:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:11px;
}

.resultsHead{
  flex:0 0 auto;
  padding-bottom:8px;
}

.resultsHead span{
  font-size:.75rem;
  color:#746c62;
}

.results{
  overflow:auto;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(105px,1fr));
  gap:6px;
  align-content:start;
  padding-right:3px;
}

.card{
  border:1px solid #ddd6ca;
  border-radius:8px;
  padding:8px;
  min-height:105px;
  height:auto;
  background:#fcfbf8;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  text-align:center;
  align-items:center;
  overflow:visible;
}

.han{
  font-size:1.55rem;
  line-height:1.35;
  min-height:2.1rem;
  flex-shrink:0;
}

.pron{
  font-size:.74rem;
  color:#5c554c;
  line-height:1.25;
  margin-top:3px;
}

.resultsPanel{margin:0;display:flex;flex-direction:column;overflow:hidden;padding:11px}
.resultsHead{flex:0 0 auto;padding-bottom:8px}
.resultsHead span{font-size:.75rem;color:#746c62}
.results{overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:6px;align-content:start;padding-right:3px}

.toneGroup{
  grid-column:1/-1;
  width:100%;
}

.toneHeading{
  margin:8px 0 7px;
  padding:5px 8px;
  border-bottom:1px solid #d9d2c4;
  font-size:.88rem;
  text-align:left;
}

.toneGroup:first-child .toneHeading{
  margin-top:0;
}

.toneCards{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(105px,1fr));
  gap:6px;
  width:100%;
  min-height:6px;
}

.card{
  border:1px solid #ddd6ca;
  border-radius:8px;
  padding:8px;
  min-height:105px;
  height:auto;
  background:#fcfbf8;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  text-align:center;
  align-items:center;
  overflow:visible;
}
.han{
  font-size:1.55rem;
  line-height:1.35;
  min-height:2.1rem;
  flex-shrink:0;
}

.cardOccurrence{
  position:relative;
  top:-0.42em;
  margin-left:1px;
  font-size:.48em;
  line-height:0;
  font-weight:700;
  color:#8b3a2b;
  vertical-align:baseline;
}
.pron{font-size:.74rem;color:#5c554c;line-height:1.25;margin-top:3px;overflow-wrap:anywhere}
.matchingReading{font-weight:700;color:#17202a}
.also{color:#5c554c}
.meta{
  width:100%;
  font-size:.68rem;
  color:#81786d;
  margin-top:auto;
  padding-top:4px;
  text-align:center;
}
.note{font-size:.67rem;color:#746c62;margin:8px 0 0;line-height:1.3;flex:0 0 auto}
#more{margin-top:7px;padding:7px 12px;flex:0 0 auto}
@media(max-width:1180px){
  body{overflow:auto}

  .workspace{
    display:grid;
    grid-template-columns:minmax(470px,40%) 1fr;
    gap:10px;
    height:calc(100vh - 68px);
  }
  .controls{overflow:visible}
  .resultsPanel{min-height:520px}
}
@media(max-width:760px){
  main{padding:12px}
  .topbar{flex-direction:column}

  .workspace{
  display:block;
  height:auto;
}

.controls{
  overflow:visible;
}

.resultsPanel{
  margin-top:10px;
  min-height:500px;
}

  .filterGrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;
  }

.initialRow,
.finalRow{
  gap:4px;
}

.initialRow .sound,
.finalRow .sound{
width:34px;
height:34px;
flex:0 0 34px;
}

.results,
.toneCards,
.readingSectionBody.flatResults{
  grid-template-columns:repeat(3,1fr) !important;
}

.topbar h1{
  font-size:1.15rem !important;
  line-height:1.05;
  white-space:nowrap;
  letter-spacing:-0.04em;
}

.displayControl{
  flex-wrap:wrap;
}

}

/* v0.3: ordinary and rare reading sections */
.readingSection{grid-column:1/-1;width:100%}
.readingSectionHeading{margin:14px 0 8px;padding:7px 8px;border-top:1px solid #d9d2c4;border-bottom:1px solid #d9d2c4;font-size:.9rem;text-align:left;color:#8b3a2b}
.readingSectionBody.flatResults{display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:6px;align-content:start;width:100%}
.rareSection .card{background:#faf7f1;border-color:#d8c7b5}