*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:#f5f5f5;
  color:#222;
  line-height:1.65;
  min-height:100vh;
  min-width:330px;
}
button,
select,
input,
textarea,
option{
  font-family:inherit;
}
.wrap{max-width:860px;margin:0 auto;padding:14px 24px 80px;}

/* header */
.header{margin-bottom:5px;}
.header h1{font-size:22px;font-weight:600;margin-bottom:0;color:#4b5563;}
.header p{font-size:12px;color:#7b8491;letter-spacing:0;margin-top:0;line-height:1.45;}
.header-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 270px;
  gap:0;
  align-items:start;
}
.header-main{min-width:0;}
.intro-card{
  position:relative;
  overflow:hidden;
  min-width:240px;
  max-width:256px;
  width:100%;
  justify-self:end;
  background:
    radial-gradient(circle at calc(100% + 28px) -28px, rgba(249,115,22,.11) 0 58px, transparent 59px),
    radial-gradient(circle at 20px calc(100% + 34px), rgba(251,191,36,.11) 0 52px, transparent 53px),
    linear-gradient(135deg, #fff8dc 0%, #fff1df 44%, #fffaf3 100%);
  border:1px solid #fde3c4;
  border-radius:8px;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
  padding:10px 6px 8px;
  margin-top:0;
}
.intro-card::before{
  content:"";
  position:absolute;
  pointer-events:none;
  top:-44px;
  left:-35px;
  width:130px;
  height:130px;
  border-radius:50%;
  background:rgba(249,115,22,.12);
}
.intro-card::after{
  content:"";
  position:absolute;
  pointer-events:none;
  right:17px;
  bottom:-46px;
  width:115px;
  height:115px;
  border-radius:50%;
  background:rgba(251,191,36,.12);
}
.settings-btn{
  position:relative;
  z-index:2;
  width:24px;
  min-width:24px;
  height:24px;
  padding:0;
  border:1px solid #d0d0d0;
  border-radius:8px;
  background:#fff;
  color:#555;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .15s ease,color .15s ease;
}
.settings-btn:hover{background:#e0f0ff;border-color:#3a7ab5;color:#1a5a95;}
.settings-btn svg{
  display:block;
  width:12px;
  height:12px;
  flex:0 0 auto;
}
.intro-content{
  position:relative;
  z-index:1;
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.intro-image{
  width:42px;
  height:42px;
  flex:0 0 42px;
  border-radius:8px;
  object-fit:cover;
  box-shadow:0 6px 13px rgba(249,115,22,.11);
}
.intro-copy{min-width:0;}
.intro-title{
  font-size:18px;
  font-weight:700;
  line-height:1.1;
  margin-bottom:4px;
  color:#6b7280;
}
.intro-copy p{
  font-size:11px;
  line-height:1.25;
  font-weight:500;
  color:#6b7280;
  letter-spacing:0;
}
.intro-actions{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
  min-height:27px;
}
.intro-card .info-btn{
  position:relative;
  left:auto;
  transform:none;
  margin-left:0;
  min-height:24px;
  padding:3px 10px;
  font-size:11px;
  flex:0 0 auto;
  max-width:100%;
  white-space:nowrap;
  text-align:center;
  line-height:1.25;
  height:auto;
  justify-content:center;
}
.intro-card .info-btn span{
  white-space:nowrap;
}
.intro-install-row{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:0;
  min-height:24px;
  flex:0 0 auto;
}
.install-btn{
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:max-content;max-width:100%;min-height:24px;margin:0;padding:3px 10px;
  font-size:11px;font-weight:500;line-height:1.25;cursor:pointer;
  border:1px solid #d0d0d0;border-radius:8px;
  background:#fff;color:#555;
  transition:all .15s ease;
}
.install-btn:hover{background:#e0f0ff;border-color:#3a7ab5;color:#1a5a95;}
.intro-card .share-btn{
  position:relative;
  z-index:1;
  right:auto;
  margin-left:0;
  width:24px;
  min-width:24px;
  height:24px;
  justify-content:center;
  padding:0;
  border-radius:8px;
}
.intro-card .share-btn svg{width:12px;height:12px;}
.title-row{
  display:flex;
  align-items:baseline;
  gap:7px;
  flex-wrap:wrap;
  margin-top:10px;
  margin-bottom:0;
}
.title-row h1{font-size:18px;font-weight:500;margin:0;line-height:1;color:#6b7280;}
#site-title{color:#6b7280 !important;}
#site-sub{color:#7b8491 !important;}
.title-offline-note{
  align-self:flex-end;
  color:#7b8491;
  font-size:10px;
  font-weight:500;
  line-height:1.2;
  white-space:nowrap;
}
.title-offline-btn{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  min-width:24px;
  padding:0;
  border:1px solid #d0d0d0;
  border-radius:8px;
  background:#fff;
  color:#555;
  cursor:pointer;
  transition:all .15s ease;
}
.title-offline-btn.is-saved{
  align-self:flex-end;
  width:16px;
  height:16px;
  min-width:16px;
  border-radius:5px;
  margin-left:-3px;
  transform:translateY(2px);
}
.title-offline-btn:hover,
.title-offline-btn:focus-visible{
  background:#f0f0f0;
  border-color:#bdbdbd;
  outline:none;
}
.title-offline-btn svg{display:block;flex:0 0 auto;}
.subtitle-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:12px;
}
.subtitle-row p{min-width:0;}
.home-status{
  position:relative;
  z-index:20;
  background:#f5f5f5;
}
.home-status:empty{display:none;}
.home-status .completion-banner{margin-top:8px;}
.home-scroll{overflow:visible;}
body.home-scroll-mode{
  overflow:hidden;
}
body.home-scroll-mode .wrap{
  height:100dvh;
  overflow:visible;
  padding-bottom:14px;
}
body.home-scroll-mode .home-scroll{
  width:calc(100% + var(--external-scrollbar-width, 17px));
  margin-right:calc(var(--external-scrollbar-width, 17px) * -1);
  overflow-y:auto;
  scrollbar-gutter:stable;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
body.home-scroll-mode .home-scroll > *{
  box-sizing:border-box;
  width:100%;
}
.header-ctrls{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:6px;
  padding-right:14px;
}
.header-ctrls[hidden]{display:none;}
.header-ctrls.in-subtitle{
  margin-top:0;
  margin-bottom:0;
}
.header-ctrls.after-banner{
  margin-top:5px;
  margin-bottom:0;
}

/* accordion */
.completion-banner{
  display:flex;align-items:center;gap:10px;
  margin:0 0 12px;padding:10px 12px;
  border:1px solid #a8d5b5;border-radius:10px;
  background:#d4f0e0;color:#2d6a4f;
}
.completion-icon{
  width:24px;height:24px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 24px;background:#2d6a4f;color:#fff;
  font-size:14px;font-weight:700;
}
.completion-copy{display:flex;flex-direction:column;min-width:0;line-height:1.25;}
.completion-copy em{font-style:normal;font-size:11px;font-weight:700;text-transform:uppercase;color:#2d6a4f;}
.completion-copy strong{font-size:13px;font-weight:700;}
.completion-copy span{font-size:12px;font-weight:500;color:#3b7b5d;}
.month{margin-bottom:12px;border:1px solid #e0e0e0;border-radius:12px;overflow:hidden;background:#fff;}
.month.menu-open{overflow:visible;}
.month-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:5px 18px;cursor:pointer;user-select:none;
  font-size:14px;font-weight:500;
  transition:background .15s ease;
}
.month-header:hover{background:#f9f9f9;}
.month-header .label{color:#222;}
.month-header .meta{font-size:12px;color:#7b8491;font-weight:400;}
.month-header .chevron{font-size:11px;color:#999;transition:transform .2s ease;transform:translateX(3px);}
.month.complete .month-header{background:#d4f0e0;}
.month.complete .month-header:hover{background:#c0e8d0;}
.month.complete .month-header .label,
.month.complete .month-header .meta,
.month.complete .month-header .chevron{color:#2d6a4f;}
.month-header-actions{
  display:inline-grid;
  grid-template-columns:22px 22px;
  align-items:center;
  justify-items:center;
  justify-content:center;
  column-gap:6px;
  flex:0 0 50px;
}
.label-group{display:inline-flex;align-items:center;gap:6px;}
.month-check{font-size:13px;font-weight:700;color:#2d6a4f;}
.month.open .chevron{transform:translateX(3px) rotate(180deg);}
.month-menu{position:relative;display:inline-flex;visibility:hidden;pointer-events:none;}
.month.open .month-menu{visibility:visible;pointer-events:auto;}
.month-menu-btn{
  width:22px;
  height:22px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#999;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  line-height:1;
  padding:0;
  transform:translateX(1px);
}
.month-menu-btn:hover,
.month-menu.open .month-menu-btn{
  background:#f0f0f0;
  color:#555;
}
.month-menu-popover{
  display:none;
  position:absolute;
  z-index:40;
  top:26px;
  right:0;
  min-width:210px;
  padding:6px;
  border:1px solid #e5e7eb;
  border-radius:8px;
  background:#fff;
  box-shadow:0 10px 28px rgba(0,0,0,.14);
}
.month-menu.open .month-menu-popover{display:block;}
.month-menu-popover button{
  width:100%;
  border:0;
  border-radius:6px;
  background:transparent;
  color:#444;
  cursor:pointer;
  display:block;
  font-size:12px;
  line-height:1.25;
  padding:8px 9px;
  text-align:left;
}
.month-menu-popover button:hover{background:#f5f5f5;}
.month-body{display:none;padding:14px 18px 18px;}
.month.open .month-body{display:block;}
.day-grid{display:flex;flex-wrap:wrap;gap:6px;}
.day-btn{
  width:32px;height:32px;border:1px solid #ddd;background:#f5f5f5;
  border-radius:8px;font-size:12px;font-weight:500;color:#444;
  cursor:pointer;transition:all .15s ease;
  display:flex;align-items:center;justify-content:center;
}
.day-btn:hover{background:#eee;border-color:#bbb;}
.day-btn.active{background:#222;color:#fff;border-color:#222;}
.day-btn.done{background:#d4f0e0;border-color:#a8d5b5;color:#2d6a4f;}
.day-btn.done.active{background:#2d6a4f;border-color:#2d6a4f;color:#fff;}
.month-listen-btn{
  width:32px;height:32px;border:1px solid #a8d5b5;background:#d4f0e0;
  border-radius:8px;color:#2d6a4f;cursor:pointer;transition:all .15s ease;
  display:flex;align-items:center;justify-content:center;
}
.month-listen-btn:hover{background:#c0e8d0;border-color:#8fc8a0;color:#24543f;}

/* about */
.about-section{
  margin:18px 0 0;
  border:1px solid #e0e0e0;
  border-radius:12px;
  overflow:hidden;
  background:transparent;
  color:#888;
}
.about-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 18px;
  cursor:pointer;
  list-style:none;
  color:#777;
  transition:background .15s ease;
}
.about-summary:hover{
  background:#f9f9f9;
}
.about-summary::-webkit-details-marker{
  display:none;
}
.about-summary span{
  font-size:14px;
  line-height:1.35;
  font-weight:500;
}
.about-summary::after{
  content:"▼";
  flex:0 0 auto;
  color:#777;
  font-size:11px;
  line-height:1;
  text-align:center;
  transition:transform .2s ease;
}
.about-section[open] .about-summary::after{
  transform:rotate(180deg);
}
.about-content{
  padding:0 18px 18px;
}
.about-content p{
  font-size:11px;
  line-height:1.45;
  margin-bottom:5px;
  letter-spacing:0;
}
.about-coffee{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid #eee;
}
.about-coffee-qr{
  width:54px;
  height:54px;
  flex:0 0 auto;
  border-radius:7px;
  object-fit:contain;
  border:1px solid #e8e8e8;
  cursor:zoom-in;
}
.about-coffee-text{min-width:0;}
.about-coffee-title{
  font-size:14px;
  font-weight:500;
  color:#777;
  margin-bottom:2px;
}
.about-coffee-text p{
  color:#888;
  margin-bottom:4px;
}
.about-coffee-link{
  display:inline-block;
  padding:2px 8px;
  background:#fff;
  color:#666;
  border-radius:8px;
  font-size:10px;
  font-weight:400;
  line-height:1.5;
  text-decoration:none;
  border:1px solid #e5e7eb;
  transition:all .15s ease;
  white-space:nowrap;
}
.about-coffee-link:hover,
.about-coffee-link:active{background:#FFDD00;border-color:#e6c800;color:#5a3e00;}
.about-lang-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px 10px;
  margin-top:7px;
  font-size:11px;
}
.about-lang-links a{
  color:#888;
  text-decoration:none;
}
.about-lang-links a:hover{
  color:#3a7ab5;
  text-decoration:underline;
}
.about-lang-links a + a::before{
  content:"•";
  color:#bbb;
  margin-right:10px;
  text-decoration:none;
}
.about-tips{
  margin-top:12px;
  padding:12px 0;
  border-top:1px solid #ececec;
}
.about-tips-head{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  gap:5px;
  margin-bottom:8px;
}
.about-tips-title{
  color:#777;
  font-size:14px;
  font-weight:500;
  line-height:1.25;
}
.about-tips-count-row{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:#999;
  font-size:11px;
  line-height:1.3;
  min-height:18px;
}
.about-tips-count{
  position:absolute;
  left:0;
  color:inherit;
  font-size:inherit;
  line-height:inherit;
}
.about-tips-swipe{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  max-width:70%;
  text-align:center;
}
.about-tip-indicator{color:#aaa;font-size:13px;line-height:1;}
.about-tip-card{
  min-height:72px;
  touch-action:pan-y;
  cursor:grab;
  user-select:none;
  will-change:transform;
}
.about-tip-card.dragging{cursor:grabbing;}
.about-tip-title{
  color:#555;
  font-size:12px;
  font-weight:600;
  line-height:1.3;
  margin-bottom:4px;
}
.about-tip-card p{
  color:#888;
  font-size:11px;
  line-height:1.45;
  margin:0;
}
.about-tip-settings-link{
  appearance:none;
  border:0;
  background:transparent;
  color:#3a7ab5;
  font:inherit;
  font-weight:600;
  line-height:inherit;
  padding:0;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
  cursor:pointer;
}
.about-tip-settings-link:hover,
.about-tip-settings-link:focus-visible{
  color:#2f628f;
}

/* lesson card */
.lesson{display:none;}
.lesson.visible{display:block;}
body.content-scroll-mode{
  overflow:hidden;
}
body.content-scroll-mode .wrap{
  height:100dvh;
  overflow:visible;
  padding-bottom:14px;
}
body.dialogue-scroll-mode{
  overflow:hidden;
}
body.dialogue-scroll-mode .wrap{
  height:100dvh;
  overflow:visible;
}
#cards-viewport{overflow:hidden;cursor:grab;position:relative;}
body.day-scroll-mode #cards-viewport,
body.story-scroll-mode .story-scroll,
body.month-listen-scroll-mode .month-listen-scroll{
  width:calc(100% + var(--external-scrollbar-width, 17px));
  margin-right:calc(var(--external-scrollbar-width, 17px) * -1);
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-gutter:stable;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
body.day-scroll-mode #cards,
body.story-scroll-mode .story-scroll > *,
body.month-listen-scroll-mode .month-listen-scroll > *{
  box-sizing:border-box;
  width:100%;
}
#cards-viewport:active{cursor:grabbing;}
.swipe-help{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:10px;
  margin-top:3px;
  text-align:center;
  font-size:11px;
  line-height:1.3;
  color:#999;
  text-transform:none;
  letter-spacing:0;
  font-weight:500;
}
.swipe-hint{
  pointer-events:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  flex:0 0 18px;
  color:#c9c9c9;
  transition:color .15s ease;
  margin-top:-1px;
}
.swipe-hint.visible{color:#777;}
.lesson-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;position:relative;}
.lesson-title{font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:#999;pointer-events:none;text-align:center;flex:1;min-width:0;padding:0 8px;white-space:normal;word-break:break-word;display:flex;flex-direction:column;align-items:center;}
.lesson-header-spacer{width:25px;min-width:25px;height:25px;}
.month-listen-header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  min-width:25px;
}
.done-btn{
  display:inline-flex;align-items:center;gap:5px;
  height:auto;
  min-height:24px;
  font-size:12px;font-weight:500;line-height:1.25;cursor:pointer;
  border:1px solid #ddd;border-radius:8px;
  padding:3px 10px;color:#555;background:#fff;
  transition:border-color .2s,color .2s,background .2s;
}
.done-btn.checked::before{content:'✓ ';}
.done-btn:hover{background:#f0f0f0;border-color:#bdbdbd;color:#555;}
.done-btn.checked:hover{background:#c0e8d0;border-color:#a8d5b5;color:#2d6a4f;}
.done-btn.checked{
  border-color:#a8d5b5;color:#2d6a4f;
  background:#d4f0e0;
}
.dialogue-listen-btn,
.dialogue-restart-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:25px;
  min-width:25px;
  height:25px;
  margin-right:6px;
  border:1px solid #d0d0d0;
  border-radius:8px;
  background:#fff;
  color:#555;
  cursor:pointer;
}
.dialogue-restart-btn{margin-right:4px;}
.dialogue-restart-btn[hidden]{display:none;}
.dialogue-listen-btn[hidden]{display:none;}
.dialogue-listen-btn:hover{background:#f0f0f0;}
.dialogue-restart-btn:hover{background:#f0f0f0;}
.dialogue-listen-btn:disabled{
  opacity:.6;
  cursor:default;
}
.dialogue-listen-btn.is-playing{
  background:#d4f0e0;
  border-color:#a8d5b5;
  color:#2d6a4f;
}
.dialogue-listen-btn.is-paused{
  background:#fff;
  border-color:#d0d0d0;
  color:#555;
}
.dialogue-listen-btn:not(:disabled):not([hidden]){
  animation:month-listen-control-pulse 1.6s ease-in-out infinite;
}

.sentence-card{
  background:#fff;border:1px solid #e0e0e0;border-radius:12px;
  padding:8px 12px 12px;margin-bottom:5px;
}
.sentence-card .pair-text{
  display:inline-block;
  max-width:100%;
  cursor:text;
  user-select:text;
  font-size:20px;
  font-weight:500;
  margin-bottom:2px;
}
.sentence-card .base-text{
  display:inline-block;
  max-width:100%;
  cursor:text;
  user-select:text;
  font-size:14px;
  color:#666;
  margin:8px 0 2px;
}
.sentence-card audio{width:100%;height:32px;outline:none;display:block;}
.sentence-card audio::-webkit-media-controls-panel{padding:0;}
.sentence-card audio::-webkit-media-controls-enclosure{border-radius:8px;}
.sentence-card audio::-webkit-media-controls-play-button{
  margin:0;
  transform:scale(1.18);
  transform-origin:center;
}
.sentence-audio::-webkit-media-controls-current-time-display,
.sentence-audio::-webkit-media-controls-time-remaining-display{
  font-size:10px;
  line-height:1;
}
.sentence-card audio.is-hidden{display:none;}
.base-with-hint{
  position:relative;
  cursor:help;
  border-radius:4px;
  touch-action:manipulation;
}
.sentence-card .pair-text:focus,
.sentence-card .base-text:focus,
.base-with-hint:focus{
  outline:none;
  box-shadow:0 0 0 2px rgba(160,196,232,.8);
}
.pinyin-popover{
  position:fixed;
  left:16px;
  top:72px;
  z-index:300;
  display:none;
  width:max-content;
  min-width:0;
  max-width:calc(100vw - 32px);
  max-height:min(42vh, 340px);
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:auto;
  -webkit-overflow-scrolling:touch;
  padding:4px 7px;
  border-radius:10px;
  border:1px solid #fde3c4;
  background:
    radial-gradient(circle at calc(100% + 30px) -38px, rgba(249,115,22,.11) 0 48px, transparent 49px),
    radial-gradient(circle at 18px calc(100% + 46px), rgba(251,191,36,.11) 0 45px, transparent 46px),
    linear-gradient(135deg, #fff8dc 0%, #fff1df 44%, #fffaf3 100%);
  color:#7b8491;
  box-shadow:0 12px 30px rgba(249,115,22,.12);
  font-size:12px;
  line-height:1.35;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  user-select:text;
}
.pinyin-popover::-webkit-scrollbar{width:6px;}
.pinyin-popover::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:rgba(249,115,22,.24);
}
.pinyin-popover::before,
.pinyin-popover::after{
  display:none;
}
.pinyin-popover.open{display:block;}

/* lang toggle */
.lang-toggle-wrap{margin-bottom:9px;}
.lang-label{
  font-size:11px;
  font-weight:500;
  line-height:1.2;
  color:#7b8491;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:0;
}
#pair-label{line-height:1.2;margin-bottom:0;}
.lang-toggle-wrap > .lang-label-row{line-height:1.2;margin-bottom:0;}
.lang-label-row{
  display:flex;
  align-items:center;
  gap:6px;
  position:relative;
  width:max-content;
  max-width:100%;
}
.lang-help-btn{
  width:17px;
  height:17px;
  border:1px solid #d0d0d0;
  border-radius:6px;
  background:#fff;
  color:#999;
  font-size:11px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:3px;
  transition:all .15s ease;
}
.lang-help-btn:hover,
.lang-help-btn:focus{
  border-color:#a0c4e8;
  color:#3a7ab5;
  background:#f4f9ff;
  outline:none;
}
.lang-help-popover{
  position:absolute;
  left:calc(100% + 8px);
  top:-8px;
  z-index:320;
  display:none;
  width:280px;
  max-width:calc(100vw - 48px);
  max-height:min(42vh, 320px);
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:auto;
  -webkit-overflow-scrolling:touch;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #fde3c4;
  background:linear-gradient(135deg, #fff8dc 0%, #fff1df 44%, #fffaf3 100%);
  color:#374151;
  box-shadow:0 12px 30px rgba(249,115,22,.12);
  font-size:12px;
  line-height:1.45;
  letter-spacing:0;
  text-transform:none;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.lang-help-popover::-webkit-scrollbar{width:6px;}
.lang-help-popover::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:rgba(249,115,22,.24);
}
.lang-help-popover::before,
.lang-help-popover::after{
  display:none;
}
.lang-help-popover::before{
  top:-34px;
  right:-28px;
  width:88px;
  height:88px;
  background:rgba(249,115,22,.11);
}
.lang-help-popover::after{
  left:14px;
  bottom:-42px;
  width:82px;
  height:82px;
  background:rgba(251,191,36,.11);
}
.lang-help-popover.open{display:block;}
.lang-toggle{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  width:max-content;
  min-height:24px;
  padding:2px;
  border:1px solid #d0d0d0;
  border-radius:10px;
  background:#fff;
  overflow:hidden;
  touch-action:pan-y;
}
.lang-toggle::before{
  content:"";
  position:absolute;
  box-sizing:border-box;
  top:2px;
  left:2px;
  width:calc((100% - 4px) / 2);
  height:calc(100% - 4px);
  border-radius:7px;
  background:#d4f0e0;
  border:1px solid #a8d5b5;
  box-shadow:0 2px 8px rgba(45,106,79,.12);
  transition:transform .18s ease;
}
.lang-toggle.pair-active::before{transform:translateX(100%);}
.lang-toggle.dragging::before{
  transform:translateX(var(--lang-toggle-drag, 0px));
  transition:none;
}
.lang-btn{
  position:relative;
  z-index:1;
  min-width:48px;
  padding:3px 12px;
  font-size:11px;
  font-weight:500;
  cursor:pointer;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#6b7280;
  transition:color .15s ease;
}
.lang-btn:hover{color:#2d6a4f;}
.lang-btn.active{color:#2d6a4f;}

/* info button */
@keyframes shimmer{
  0%{background-position:200% center;}
  100%{background-position:-200% center;}
}
.info-btn{
  background:linear-gradient(90deg,#fff 0%,#e8f4ff 30%,#d0e8ff 50%,#e8f4ff 70%,#fff 100%);
  background-size:200% auto;
  border:1px solid #a0c4e8;border-radius:8px;
  padding:5px 14px;font-size:13px;font-weight:500;cursor:pointer;color:#3a7ab5;
  display:inline-flex;align-items:center;gap:5px;
  margin-left:12px;flex-shrink:0;white-space:nowrap;
  animation:shimmer 3s linear infinite;
}
.info-btn:hover{animation:none;background:#e0f0ff;border-color:#3a7ab5;color:#1a5a95;}
.share-btn{
  background:#fff;border:1px solid #d0d0d0;border-radius:8px;
  padding:5px 14px;font-size:16px;cursor:pointer;color:#555;
  display:inline-flex;align-items:center;
  flex-shrink:0;margin-left:8px;transition:all .15s ease;
}
.share-btn:hover{background:#e0f0ff;border-color:#3a7ab5;color:#1a5a95;}
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:#222;color:#fff;padding:10px 20px;border-radius:8px;
  font-size:13px;opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:200;
}
.toast.show{opacity:1;}
.info-btn::before{content:'?';display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;background:#bbb;color:#fff;font-size:11px;font-weight:700;}

.title-btns{display:flex;align-items:center;gap:8px;flex:1;min-width:max-content;}
.title-btns .spacer{flex:1;}
@media(max-width:640px){
  .wrap{padding-top:16px;}
  .header-layout{
    grid-template-columns:180px minmax(0,1fr);
    gap:0;
  }
  .header-main{
    width:180px;
    max-width:180px;
    overflow:visible;
  }
  .pair-toggle-wrap,
  .lang-toggle-wrap,
  .lang-label-row{
    width:100%;
    max-width:100%;
  }
  .pair-select{
    width:auto;
    max-width:180px;
    min-width:0;
    padding-left:8px;
    padding-right:8px;
  }
  .lang-toggle{
    max-width:100%;
  }
  .settings-btn{
    width:24px;
    min-width:24px;
    height:24px;
    padding:0;
    border-radius:8px;
  }
  .settings-btn svg{width:12px;height:12px;}
  .intro-card .share-btn{
    width:24px;
    min-width:24px;
    height:24px;
    padding:0;
    margin-left:0;
    border-radius:8px;
  }
  .intro-card .share-btn svg{width:12px;height:12px;}
  .intro-card{
    margin-top:0;
  }
  .header-ctrls{
    justify-content:flex-end;
    gap:6px;
  }
  .info-btn{margin-left:0;}
  .lang-help-popover{
    left:0;
    top:22px;
    width:min(300px, calc(100vw - 48px));
  }
}

@media(max-width:460px){
  .wrap{padding-left:12px;padding-right:12px;}
  .lang-toggle-wrap{margin-bottom:0;}
  .header-layout{
    grid-template-columns:1fr;
    gap:10px;
  }
  .intro-card{
    order:1;
    width:min(270px, 100%);
    min-width:0;
    justify-self:center;
    margin-top:0;
    padding:10px 10px 9px;
  }
  .header-main{
    order:2;
    width:180px;
    max-width:180px;
  }
  .intro-content{
    gap:8px;
  }
  .intro-image{
    width:36px;
    height:36px;
    flex-basis:36px;
  }
  .intro-title{font-size:15px;}
  .subtitle-row{
    grid-template-columns:1fr;
    gap:8px;
  }
  .intro-copy p{font-size:10px;line-height:1.2;}
  .intro-actions{gap:3px;margin-top:7px;}
  .intro-card .info-btn{padding:3px 8px;font-size:10px;}
  .intro-install-row{gap:3px;}
}

/* modal */
.modal-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);
  z-index:100;padding:24px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.modal-overlay.open{display:flex;align-items:flex-start;justify-content:center;}
.modal-box{
  background:#fff;border-radius:16px;max-width:600px;width:100%;
  padding:32px;position:relative;
  box-shadow:0 8px 40px rgba(0,0,0,.18);
  margin:24px auto;
  flex-shrink:0;
  font-family:inherit;
}
#modal-body,
.modal-close{
  position:relative;
  z-index:1;
}
.modal-box:has(.why-modal-body){
  overflow:hidden;
  background:
    radial-gradient(circle at calc(100% + 74px) -66px, rgba(249,115,22,.12) 0 142px, transparent 143px),
    radial-gradient(circle at 36px calc(100% + 64px), rgba(251,191,36,.12) 0 122px, transparent 123px),
    linear-gradient(135deg, #fff8dc 0%, #fff1df 44%, #fffaf3 100%);
  border:1px solid #fde3c4;
  border-radius:12px;
  box-shadow:0 14px 42px rgba(249,115,22,.14),0 8px 34px rgba(0,0,0,.12);
}
.modal-box:has(.why-modal-body)::before,
.modal-box:has(.why-modal-body)::after{
  content:"";
  position:absolute;
  pointer-events:none;
  border-radius:50%;
  z-index:0;
}
.modal-box:has(.why-modal-body)::before{
  top:-74px;
  left:-58px;
  width:260px;
  height:260px;
  background:rgba(249,115,22,.12);
}
.modal-box:has(.why-modal-body)::after{
  right:34px;
  bottom:-104px;
  width:240px;
  height:240px;
  background:rgba(251,191,36,.12);
}
.modal-box button,
.modal-box input,
.modal-box select,
.modal-box textarea,
.modal-box p,
.why-modal-body{
  font-family:inherit;
}
.modal-close{
  position:absolute;top:16px;right:18px;background:none;border:none;
  font-size:20px;cursor:pointer;color:#999;line-height:1;
  z-index:2;
}
.modal-close:hover{color:#222;}
.modal-top{display:flex;gap:14px;margin-bottom:6px;align-items:flex-start;}
.modal-profile{height:98px;width:auto;border-radius:6px;flex-shrink:0;}
.modal-top-text{flex:1;}
.modal-box p{font-size:13px;margin-bottom:6px;line-height:1.5;}
.why-modal-body p{margin-bottom:0;}
.why-modal-body .why-modal-lead{font-weight:700;}
.modal-box p:last-child{margin-bottom:0;}
.modal-divider{border:none;border-top:1px solid #e5e7eb;margin:14px 0 10px;}
.modal-contact{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;}
.modal-contact-label{font-size:13px;color:#555;}
.modal-email{display:block;margin-top:3px;}
.settings-panel h2{
  font-size:20px;
  line-height:1.2;
  margin-bottom:18px;
  padding-right:34px;
  color:#6b7280;
}
.settings-panel,
.settings-panel button,
.settings-panel input,
.settings-panel select{
  font-family:inherit;
}
.settings-lang-switch{
  padding:0 0 14px;
  margin-bottom:2px;
  border-bottom:1px solid #eee;
}
.settings-lang-switch .lang-toggle{
  width:max-content;
  max-width:100%;
}
.settings-lang-switch .lang-btn{
  min-width:0;
}
.settings-lang-switch + .settings-toggle{
  border-top:0;
}
.settings-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:12px 0;
  border-top:1px solid #eee;
  font-size:12px;
  line-height:1.35;
  font-weight:400;
}
.settings-toggle:last-child{border-bottom:1px solid #eee;}
.settings-toggle input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.settings-toggle i{
  position:relative;
  width:44px;
  height:24px;
  flex:0 0 44px;
  border-radius:999px;
  background:#d5dbe3;
  transition:background .15s ease;
}
.settings-toggle i::after{
  content:'';
  position:absolute;
  top:3px;
  left:3px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  transition:transform .15s ease;
}

.month-listen-panel h2,
.month-listen-player h2{font-size:20px;line-height:1.2;margin-bottom:7px;}
.month-listen-panel,
.month-listen-player{
  font-family:inherit;
}
#month-listen-content .month-listen-panel,
#month-listen-content .month-listen-player{
  background:#fff;
  border:1px solid #e0e0e0;
  border-radius:12px;
  padding:12px;
}
#dialogue-listen-options{
  margin-bottom:12px;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
#dialogue-listen-options[hidden]{display:none;}
#dialogue-listen-options .month-listen-panel{
  background:#fff;
  border:1px solid #e0e0e0;
  border-radius:12px;
  padding:12px;
}
#month-listen-content .month-listen-panel .month-listen-font:last-of-type,
#dialogue-listen-options .month-listen-panel .month-listen-font:last-of-type,
#month-listen-content .month-listen-panel .month-listen-speed:last-of-type,
#dialogue-listen-options .month-listen-panel .month-listen-speed:last-of-type{
  border-bottom:0;
  padding-bottom:2px;
}
#dialogue-listen-options .month-listen-speed{
  border-bottom:0;
}
#month-listen-content .month-listen-panel h2,
#month-listen-content .month-listen-player h2,
#dialogue-listen-options .month-listen-panel h2{display:none;}
.month-listen-panel p{
  font-size:12px;
  line-height:1.35;
  font-weight:700;
  color:#555;
  letter-spacing:0;
  margin-bottom:5px;
}
.month-listen-option{
  display:flex;align-items:center;gap:9px;
  padding:0;
  margin-bottom:5px;
  font-size:12px;
  line-height:1.35;
  font-weight:400;
  color:#444;
  letter-spacing:0;
  cursor:pointer;
}
.month-listen-extra{
  display:flex;align-items:center;gap:7px;
  margin:-2px 0 5px 25px;
  font-size:11px;
  line-height:1.35;
  font-weight:400;
  color:#7b8491;
  letter-spacing:0;
  cursor:pointer;
}
.month-listen-extra[hidden]{display:none;}
.month-listen-delay{
  margin-top:5px;
  padding:5px 0;
  border-top:1px solid #eee;
  border-bottom:1px solid #eee;
}
.month-listen-speed{
  margin-top:0;
  border-top:0;
}
.month-listen-font{
  margin-top:0;
  padding:5px 0;
  border-bottom:0;
}
.month-listen-font-options{
  display:flex;
  gap:5px 10px;
  flex-wrap:wrap;
}
.month-listen-font-option{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:12px;
  line-height:1.35;
  font-weight:400;
  color:#444;
  letter-spacing:0;
  cursor:pointer;
}
.month-listen-delay-head{
  margin-bottom:5px;
  font-size:12px;
  line-height:1.35;
  font-weight:400;
  color:#7b8491;
  letter-spacing:0;
}
.month-listen-delay-scale{
  display:flex;
  align-items:end;
  justify-content:space-between;
  margin:0;
  color:#777;
  font-size:11px;
  line-height:1;
}
.month-listen-delay-scale span{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  min-width:20px;
}
.month-listen-delay-scale span::after{
  content:"";
  width:1px;
  height:8px;
  background:#c5d4e0;
}
.month-listen-speed .month-listen-delay-scale{
  position:relative;
  display:block;
  height:23px;
}
.month-listen-speed .month-listen-delay-scale span{
  position:absolute;
  top:0;
  min-width:0;
  transform:translateX(-50%);
}
.month-listen-speed .month-listen-delay-scale span:nth-child(1){left:10px;}
.month-listen-speed .month-listen-delay-scale span:nth-child(2){left:calc(10px + (100% - 20px) * .333333);}
.month-listen-speed .month-listen-delay-scale span:nth-child(3){left:calc(10px + (100% - 20px) * .666667);}
.month-listen-speed .month-listen-delay-scale span:nth-child(4){left:calc(100% - 10px);}
.month-listen-delay input[type="range"]{
  width:100%;
  height:21px;
  margin:-2px 0 0;
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  cursor:pointer;
}
.month-listen-delay input[type="range"]::-webkit-slider-runnable-track{
  height:4px;
  border-radius:999px;
  background:#d8e6f2;
}
.month-listen-delay input[type="range"]::-webkit-slider-thumb{
  appearance:none;
  -webkit-appearance:none;
  width:20px;
  height:20px;
  margin-top:-8px;
  border:2px solid #fff;
  border-radius:50%;
  background:#3a7ab5;
  box-shadow:0 1px 5px rgba(0,0,0,.22);
}
.month-listen-delay input[type="range"]::-moz-range-track{
  height:4px;
  border-radius:999px;
  background:#d8e6f2;
}
.month-listen-delay input[type="range"]::-moz-range-thumb{
  width:18px;
  height:18px;
  border:2px solid #fff;
  border-radius:50%;
  background:#3a7ab5;
  box-shadow:0 1px 5px rgba(0,0,0,.22);
}
.month-listen-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:5px;margin-bottom:-5px;}
.month-listen-actions[hidden]{display:none;}
.month-listen-start,
.month-listen-pause,
.month-listen-cancel{
  border:1px solid #ddd;border-radius:8px;
  min-height:25px;
  padding:4px 12px;background:#fff;color:#555;
  font-size:12px;font-weight:500;line-height:1.3;cursor:pointer;
}
.month-listen-start,
.month-listen-pause{
  min-width:25px;
  width:25px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.month-listen-cancel{
  min-height:24px;
  padding:3px 10px;
  line-height:1.25;
}
.month-listen-start,
.month-listen-pause{border-color:#d0d0d0;color:#555;background:#fff;}
.month-listen-start:hover,
.month-listen-pause:hover{background:#f0f0f0;}
.month-listen-pause:disabled{opacity:.55;cursor:default;}
.month-listen-pause:disabled:hover{background:#fff;}
.month-listen-pause:not(:disabled){animation:month-listen-control-pulse 1.6s ease-in-out infinite;}
.month-listen-pause .play-icon{display:none;}
.month-listen-pause.is-paused .pause-icon{display:none;}
.month-listen-pause.is-paused .play-icon{display:block;}
.month-listen-cancel:hover{background:#f0f0f0;}
.month-listen-scrub{
  margin:0 auto 1px;
  max-width:420px;
}
.month-listen-position{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  height:18px;
  margin:0;
  background:transparent;
  cursor:pointer;
}
.month-listen-position:disabled{
  cursor:default;
}
.month-listen-position::-webkit-slider-runnable-track{
  height:3px;
  border-radius:999px;
  background:linear-gradient(to right, #f97316 0 var(--month-listen-position, 0%), #d8e6f2 var(--month-listen-position, 0%) 100%);
}
.month-listen-position:not(:disabled)::-webkit-slider-runnable-track{
  background:linear-gradient(to right, #2d6a4f 0 var(--month-listen-position, 0%), #d8e6f2 var(--month-listen-position, 0%) 100%);
}
.month-listen-position::-webkit-slider-thumb{
  appearance:none;
  -webkit-appearance:none;
  width:14px;
  height:14px;
  border:2px solid #fff;
  border-radius:50%;
  background:#f97316;
  box-shadow:0 1px 4px rgba(0,0,0,.2);
  margin-top:-5.5px;
}
.month-listen-position:not(:disabled)::-webkit-slider-thumb{
  background:#2d6a4f;
  animation:month-listen-thumb-pulse 1.6s ease-in-out infinite;
}
.month-listen-position:disabled::-webkit-slider-thumb{
  background:#fbbf24;
}
.month-listen-position::-moz-range-track{
  height:3px;
  border-radius:999px;
  background:#d8e6f2;
}
.month-listen-position::-moz-range-progress{
  height:3px;
  border-radius:999px;
  background:#f97316;
}
.month-listen-position:not(:disabled)::-moz-range-progress{
  background:#2d6a4f;
}
.month-listen-position::-moz-range-thumb{
  width:12px;
  height:12px;
  border:2px solid #fff;
  border-radius:50%;
  background:#f97316;
  box-shadow:0 1px 4px rgba(0,0,0,.2);
}
.month-listen-position:not(:disabled)::-moz-range-thumb{
  background:#2d6a4f;
  animation:month-listen-thumb-pulse 1.6s ease-in-out infinite;
}
.month-listen-position:disabled::-moz-range-thumb{
  background:#fbbf24;
}
@keyframes month-listen-thumb-pulse{
  0%,100%{box-shadow:0 1px 4px rgba(0,0,0,.2),0 0 0 0 rgba(45,106,79,.32);}
  50%{box-shadow:0 1px 4px rgba(0,0,0,.2),0 0 0 7px rgba(45,106,79,.08);}
}
@keyframes month-listen-control-pulse{
  0%,100%{box-shadow:0 1px 4px rgba(0,0,0,.12),0 0 0 0 rgba(45,106,79,.28);}
  50%{box-shadow:0 1px 4px rgba(0,0,0,.12),0 0 0 6px rgba(45,106,79,.08);}
}
.month-listen-scrub-labels{
  display:flex;
  justify-content:space-between;
  color:#aaa;
  font-size:10px;
  line-height:1;
  margin-bottom:1px;
}
.month-listen-progress{font-size:10px;color:#999;text-align:center;margin-top:-3px;margin-bottom:8px;line-height:1;}
.month-listen-wait{
  width:34px;
  margin:0;
  padding:3px 8px;
  border:1px solid #d8e6f2;
  border-radius:999px;
  background:#f3f8fd;
  color:#1a5a95;
  font-size:12px;
  font-weight:600;
  line-height:1.2;
  text-align:center;
  visibility:hidden;
}
.month-listen-wait.is-visible{visibility:visible;}
.month-listen-header-wait[hidden]{display:none;}
.month-listen-copy{
  min-height:86px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding-bottom:9px;
  border-bottom:1px solid #e5e7eb;
}
.month-listen-text{text-align:center;font-size:20px;line-height:1.35;font-weight:500;color:#222;}
.month-listen-player.is-large-text .month-listen-copy{min-height:132px;}
.month-listen-player.is-large-text .month-listen-text{font-size:40px;line-height:1.18;}
.month-listen-player.is-large-text .month-listen-hint{font-size:18px;line-height:1.25;}
.month-listen-player.is-large-text .month-listen-translation-text{font-size:20px;line-height:1.25;}
.month-listen-hint,
.month-listen-translation-text{
  margin:0;
  text-align:center;
  font-family:inherit;
  font-size:12px;
  line-height:1.3;
  color:#777;
}
.month-listen-translation-text{
  width:min(100%, 420px);
  border-top:1px solid #e5e7eb;
  padding-top:6px;
  font-weight:600;
  margin-top:9px;
}
.month-listen-hint[hidden],
.month-listen-translation-text[hidden]{display:none;}
.month-listen-audio{display:none;}
.month-listen-stop-row{
  margin-top:14px;
  margin-bottom:-5px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.month-listen-stop-row .month-listen-cancel,
.month-listen-stop-row .month-listen-pause,
.month-listen-stop-row .month-listen-wait{margin:0;}
.settings-toggle input:checked + i{background:#ecd99e;}
.settings-toggle input:checked + i::after{transform:translateX(20px);}

/* ctrl buttons */
.ctrl-btn{
  width:24px;
  min-width:24px;
  height:24px;
  padding:0;cursor:pointer;
  border:1px solid #d0d0d0;border-radius:8px;background:#fff;color:#555;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:all .15s ease;
}
.ctrl-btn svg{width:12px;height:12px;transform:translateY(2px);}
.ctrl-btn:hover{background:#e0f0ff;border-color:#3a7ab5;color:#1a5a95;}

/* recap button */
.recap-btn{
  display:inline-flex;align-items:center;gap:5px;
  min-width:78px;height:32px;justify-content:center;
  padding:0 10px;
  background:#fff8ee;border:1px solid #f0d9a0;border-radius:8px;
  font-size:12px;font-weight:500;color:#8a6000;cursor:pointer;
  transition:background .15s ease;white-space:nowrap;
}
.month-action-group{display:inline-flex;gap:6px;flex:0 0 auto;}
.recap-btn:hover{background:#fff0cc;}
.recap-btn::before{
  content:'';width:14px;height:14px;display:inline-block;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5.5c2.8 0 5.2.5 8 2v12c-2.8-1.5-5.2-2-8-2z' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M20 5.5c-2.8 0-5.2.5-8 2v12c2.8-1.5 5.2-2 8-2z' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M12 7.5v12' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5.5c2.8 0 5.2.5 8 2v12c-2.8-1.5-5.2-2-8-2z' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M20 5.5c-2.8 0-5.2.5-8 2v12c2.8-1.5 5.2-2 8-2z' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M12 7.5v12' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.recap-btn.done{background:#d4f0e0;border-color:#a8d5b5;color:#2d6a4f;}
.recap-btn.done:hover{background:#c0e8d0;}
.dialogue-btn{
  display:inline-flex;align-items:center;gap:5px;
  min-width:78px;height:32px;justify-content:center;
  padding:0 10px;
  background:#eef6ff;border:1px solid #c8dff4;border-radius:8px;
  font-size:12px;font-weight:500;color:#315f86;cursor:pointer;
  transition:background .15s ease;white-space:nowrap;
}
.dialogue-btn:hover{background:#e2f0ff;}
.dialogue-btn::before{
  content:'';width:14px;height:14px;display:inline-block;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='8' cy='7' r='3' fill='black'/%3E%3Ccircle cx='16' cy='7' r='3' fill='black'/%3E%3Cpath d='M3.5 18c.7-3.5 2.4-5.2 4.5-5.2s3.8 1.7 4.5 5.2' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M11.5 18c.7-3.5 2.4-5.2 4.5-5.2s3.8 1.7 4.5 5.2' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='8' cy='7' r='3' fill='black'/%3E%3Ccircle cx='16' cy='7' r='3' fill='black'/%3E%3Cpath d='M3.5 18c.7-3.5 2.4-5.2 4.5-5.2s3.8 1.7 4.5 5.2' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M11.5 18c.7-3.5 2.4-5.2 4.5-5.2s3.8 1.7 4.5 5.2' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.dialogue-btn.done{background:#d4f0e0;border-color:#a8d5b5;color:#2d6a4f;}
.dialogue-btn.done:hover{background:#c0e8d0;}
/* story view */
.story-title{font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:#999;margin-bottom:4px;}
.story-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.story-name{font-size:18px;font-weight:600;color:#222;}
.dialogue-lines{display:flex;flex-direction:column;gap:5px;}
.dialogue-lines[hidden]{display:none;}
body.dialogue-scroll-mode .dialogue-lines{
  width:calc(100% + var(--external-scrollbar-width, 17px));
  margin-right:calc(var(--external-scrollbar-width, 17px) * -1);
  overflow-y:auto;
  scrollbar-gutter:stable;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
body.dialogue-scroll-mode .dialogue-line{
  box-sizing:border-box;
  width:100%;
}
.dialogue-line{display:block;}
.dialogue-line.is-playing .dialogue-card{
  border-color:#79bf92;
  background:#d8f3e2;
  box-shadow:0 0 0 2px rgba(45,106,79,.26),0 8px 20px rgba(45,106,79,.12);
}
.dialogue-line.is-playing .pair-text,
.dialogue-line.is-playing .base-text,
.dialogue-line.is-playing .dialogue-play-hint{
  font-weight:700;
}
.dialogue-line.is-played .dialogue-content{
  opacity:.58;
}
.dialogue-line.is-played .dialogue-card{
  background:#f2fbf6;
  border-color:#d4eadf;
}
.dialogue-line.is-played .dialogue-content audio{
  pointer-events:none;
  filter:grayscale(1);
}
#dialogue-view.dialogue-auto-playing .dialogue-content audio{
  pointer-events:none;
  opacity:.55;
  filter:grayscale(1);
}
#dialogue-view.dialogue-hide-base-translation .base-text,
#dialogue-view.dialogue-hide-base-translation .base-audio{
  display:none;
}
.dialogue-speaker{
  width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#f1f1f1;color:#666;position:relative;flex:0 0 26px;margin-top:1px;
}
.dialogue-speaker::before{
  content:'';position:absolute;left:9px;top:6px;width:8px;height:8px;border-radius:50%;background:currentColor;
}
.dialogue-speaker::after{
  content:'';position:absolute;left:6px;top:15px;width:14px;height:7px;border-radius:9px 9px 4px 4px;background:currentColor;
}
.speaker-a .dialogue-speaker{background:#fff4df;color:#8a6000;}
.speaker-a .dialogue-speaker::before{left:8px;top:6px;width:10px;border-radius:45% 45% 50% 50%;}
.speaker-a .dialogue-speaker::after{left:7px;width:12px;border-radius:4px 4px 9px 9px;}
.speaker-b .dialogue-speaker{background:#eef6ff;color:#315f86;}
.dialogue-card{margin:0;padding-bottom:8px;}
.dialogue-main{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;align-items:start;}
.dialogue-content{min-width:0;}
.dialogue-card .pair-text{font-size:18px;}
.dialogue-card .base-text{margin:5px 0 1px;}
.dialogue-play-hint{
  margin:-1px 0 3px;
  color:#777;
  font-family:inherit;
  font-size:12px;
  line-height:1.25;
}
.dialogue-play-hint[hidden]{display:none;}

/* back */
.back-btn{
  display:inline-flex;align-items:center;gap:6px;
  height:auto;
  min-height:24px;
  font-size:12px;font-weight:500;line-height:1.25;cursor:pointer;
  border:1px solid #d0d0d0;border-radius:8px;
  padding:3px 10px;margin-top:0;color:#555;
  background:#fff;
}
.back-btn:hover{animation:none;background:#f0f0f0;border-color:#bdbdbd;color:#555;}

@media(max-width:500px){
  .day-btn{width:32px;height:32px;font-size:12px;}
  .month-listen-btn{width:32px;height:32px;}
  .recap-btn{height:32px;font-size:12px;}
  .dialogue-btn{height:32px;font-size:12px;}
  .sentence-card .pair-text{font-size:17px;}
  .modal-top{flex-direction:column;}
  .modal-profile{height:80px;margin-bottom:10px;margin-right:0;}
  .modal-box{padding:24px 20px 20px;}
  .settings-panel h2{
    padding-top:8px;
    padding-right:38px;
  }
}

@media(max-height:520px) and (orientation:landscape){
  body.home-scroll-mode,
  body.content-scroll-mode,
  body.dialogue-scroll-mode{
    overflow:auto;
  }
  body.home-scroll-mode .wrap,
  body.content-scroll-mode .wrap,
  body.dialogue-scroll-mode .wrap{
    height:auto;
    overflow:visible;
    padding-bottom:24px;
  }
  body.home-scroll-mode .home-scroll,
  body.day-scroll-mode #cards-viewport,
  body.story-scroll-mode .story-scroll,
  body.month-listen-scroll-mode .month-listen-scroll,
  body.dialogue-scroll-mode .dialogue-lines{
    width:100%;
    margin-right:0;
    max-height:none !important;
    overflow:visible;
  }
  body.home-scroll-mode .home-scroll > *,
  body.day-scroll-mode #cards,
  body.story-scroll-mode .story-scroll > *,
  body.month-listen-scroll-mode .month-listen-scroll > *,
  body.dialogue-scroll-mode .dialogue-line{
    width:100%;
  }
  #dialogue-listen-options{
    max-height:none !important;
  }
}

/* pair switcher */
.pair-toggle-wrap{margin-bottom:5px;}
.pair-select{
  min-height:24px;
  padding:3px 10px;
  font-size:13px;
  font-weight:500;
  line-height:1.25;
  cursor:pointer;
  border:1px solid #d0d0d0;border-radius:8px;
  background:#fff;color:#555;
  transition:all .15s ease;
}
.pair-select:hover{animation:none;background:#f0f0f0;border-color:#bdbdbd;color:#555;}
.pair-select option{
  font-size:13px;
  font-weight:500;
  line-height:1.25;
}

@media(max-width:500px){
  .pair-select{
    font-size:12px;
    line-height:1.25;
    max-width:100%;
  }
  .pair-select option{
    font-size:12px;
    line-height:1.25;
  }
}

@media (display-mode: standalone) {
  .install-btn {
    display:none !important;
  }
}

/* offline section in settings */
.settings-offline{padding:14px 0;border-top:1px solid #eee;}
.settings-offline-row{display:flex;align-items:center;gap:3px;flex-wrap:wrap;}
.settings-offline-label{display:flex;flex-direction:column;gap:2px;font-size:11px;line-height:1.2;font-weight:500;flex:1;}
.settings-offline-label small{color:#777;font-size:11px;font-weight:400;line-height:1.25;}
.offline-badge{display:inline-flex;align-items:center;min-height:25px;font-size:11px;line-height:1.3;padding:4px 8px;border-radius:8px;font-weight:500;background:#f0f0f0;color:#666;}
.offline-badge.cloud{line-height:1;padding:1px 4px;background:transparent;color:rgba(58,122,181,.46);border:0;}
.offline-badge.cloud svg{display:block;width:24px;height:24px;}
.offline-badge.ok{background:#d4f0e0;color:#2d6a4f;}
.offline-badge.busy{background:#e8f4ff;color:#3a7ab5;}
.offline-btn{display:inline-flex;align-items:center;justify-content:center;min-height:24px;font-size:12px;line-height:1.25;padding:3px 10px;border:1px solid #ddd;border-radius:8px;background:#fff;color:#555;cursor:pointer;white-space:nowrap;}
.offline-btn:hover{background:#f0f0f0;}
.offline-btn.danger{border-color:#f0a0a0;color:#c0392b;}
.offline-btn.danger:hover{background:#fff0f0;}
.offline-pair-list{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid #eee;
}
.offline-pair-list-title{
  color:inherit;
  font-size:11px;
  line-height:1.2;
  font-weight:500;
  margin-bottom:7px;
}
.offline-pair-list-items{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.offline-pair-list-items.is-loading{
  display:flex;
  justify-content:center;
  padding:4px 0 2px;
}
.offline-spinner{
  position:relative;
  display:block;
  width:34px;
  height:34px;
  animation:offline-spin 2.8s steps(12) infinite;
}
.offline-spinner i{
  position:absolute;
  left:16px;
  top:2px;
  width:2px;
  height:9px;
  border-radius:999px;
  background:#f97316;
  transform-origin:1px 15px;
}
.offline-spinner i:nth-child(1){transform:rotate(0deg);opacity:1;}
.offline-spinner i:nth-child(2){transform:rotate(30deg);opacity:.92;}
.offline-spinner i:nth-child(3){transform:rotate(60deg);opacity:.82;}
.offline-spinner i:nth-child(4){transform:rotate(90deg);opacity:.70;}
.offline-spinner i:nth-child(5){transform:rotate(120deg);opacity:.58;}
.offline-spinner i:nth-child(6){transform:rotate(150deg);opacity:.48;}
.offline-spinner i:nth-child(7){transform:rotate(180deg);opacity:.40;}
.offline-spinner i:nth-child(8){transform:rotate(210deg);opacity:.34;}
.offline-spinner i:nth-child(9){transform:rotate(240deg);opacity:.28;}
.offline-spinner i:nth-child(10){transform:rotate(270deg);opacity:.22;}
.offline-spinner i:nth-child(11){transform:rotate(300deg);opacity:.16;}
.offline-spinner i:nth-child(12){transform:rotate(330deg);opacity:.10;}
@keyframes offline-spin{
  to{transform:rotate(360deg);}
}
.offline-pair-list-items.is-empty{
  display:block;
  color:#999;
  font-size:12px;
  line-height:1.35;
}
.offline-pair-pill{
  appearance:none;
  display:inline-flex;
  align-items:center;
  max-width:100%;
  padding:3px 8px;
  border:1px solid #d4eadf;
  border-radius:8px;
  background:#f2fbf6;
  color:#2d6a4f;
  font-size:12px;
  font-family:inherit;
  line-height:1.25;
  cursor:pointer;
}
.offline-pair-pill:hover,
.offline-pair-pill:focus-visible{
  background:#e4f5ec;
  border-color:#b9dec9;
}
.offline-pair-pill.is-current{
  background:#e7f4ed;
  border-color:#9fceb4;
  color:#245b43;
  cursor:default;
  font-weight:600;
}
.offline-clear-all{
  appearance:none;
  display:block;
  min-height:24px;
  margin:18px auto 0;
  padding:3px 10px;
  border:1px solid #f0a0a0;
  border-radius:8px;
  background:#fff;
  color:#c0392b;
  font-size:12px;
  line-height:1.25;
  font-weight:500;
  cursor:pointer;
}
.offline-clear-all:hover,
.offline-clear-all:focus-visible{
  background:#fff0f0;
}
.offline-confirm-layer{
  position:fixed;
  inset:0;
  z-index:130;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(25,34,46,.38);
}
.offline-confirm-box{
  width:min(360px, 100%);
  border:1px solid rgba(251,191,36,.35);
  border-radius:14px;
  padding:18px;
  background:
    radial-gradient(circle at -24px -28px, rgba(249,115,22,.13), transparent 72px),
    radial-gradient(circle at calc(100% + 26px) calc(100% + 28px), rgba(251,191,36,.15), transparent 76px),
    #fff;
  box-shadow:0 18px 52px rgba(0,0,0,.22);
}
.offline-confirm-box p{
  margin:0;
  color:#374151;
  font-size:14px;
  line-height:1.45;
  text-align:center;
}
.offline-confirm-actions{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:16px;
}
.offline-confirm-actions button{
  min-width:72px;
  min-height:24px;
  padding:3px 12px;
  border-radius:8px;
  font-size:12px;
  line-height:1.25;
  font-weight:500;
  cursor:pointer;
  outline:none;
}
.offline-confirm-no{
  border:1px solid #e5c66d;
  background:#fff7d8;
  color:#6b4e16;
}
.offline-confirm-no:hover,
.offline-confirm-no:focus-visible{
  background:#fff1bd;
  box-shadow:0 0 0 3px rgba(236,217,158,.45);
}
.offline-confirm-yes{
  border:1px solid #e5e7eb;
  background:#fff;
  color:#9b2f25;
}
.offline-confirm-yes:hover,
.offline-confirm-yes:focus-visible{
  border-color:#f0a0a0;
  background:#fff0f0;
}
.offline-progress{margin-top:10px;}
.offline-bar{height:6px;background:#e0e0e0;border-radius:3px;overflow:hidden;margin-bottom:5px;}
.offline-bar-fill{height:100%;background:#3a7ab5;border-radius:3px;width:0;transition:width .2s;}

/* QR lightbox */
.qr-lightbox{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.75);
  z-index:2000;
  align-items:center;justify-content:center;
  cursor:zoom-out;
}
.qr-lightbox.open{display:flex;}
.qr-lightbox img{
  width:min(80vw,80vh,320px);
  height:min(80vw,80vh,320px);
  border-radius:12px;
  box-shadow:0 8px 40px rgba(0,0,0,.5);
  object-fit:contain;
  background:#fff;
  padding:12px;
}
.offline-count{font-size:12px;color:#888;}

/* dark mode */
html.dark{color-scheme:dark;}
html.dark body{
  background:#202b3a;
  color:#f1f5f9;
}
html.dark .home-status{background:#202b3a;}
html.dark .header p,
html.dark .lang-label,
html.dark .month-header .meta,
html.dark .month-header .chevron,
html.dark .month-menu-btn,
html.dark .lesson-title,
html.dark .modal-contact-label,
html.dark .offline-count{
  color:#b7c3d3;
}
html.dark .header h1,
html.dark .title-row h1{
  color:#dbe7f6;
}
html.dark .intro-card{
  background:linear-gradient(135deg, #263244 0%, #2b3748 48%, #202b3a 100%);
  border-color:#3a4658;
  box-shadow:0 10px 28px rgba(8,13,22,.22);
}
html.dark .intro-card::before{
  background:rgba(96,165,250,.16);
}
html.dark .intro-card::after{
  background:rgba(251,191,36,.12);
}
html.dark .intro-title{color:#dbe7f6;}
html.dark .intro-copy p{color:#b7c3d3;}
html.dark .title-offline-note{color:#9aa8ba;}
html.dark .title-offline-btn{
  background:#263244;
  border-color:#4a5870;
  color:#dbe7f6;
}
html.dark .title-offline-btn:hover,
html.dark .title-offline-btn:focus-visible{
  background:#334155;
  border-color:#64748b;
  color:#f1f5f9;
}
html.dark .intro-copy p,
html.dark .about-coffee-text p{
  color:#dbe7f6;
}
html.dark .settings-btn{
  background:#263244;
  border-color:#4a5870;
  color:#dbe7f6;
}
html.dark .settings-btn:hover,
html.dark .lang-help-btn:hover,
html.dark .lang-help-btn:focus{
  background:#334155;
  color:#dbe7f6;
}
html.dark .month,
html.dark .sentence-card,
html.dark .modal-box{
  background:#2b3748;
  border-color:#3a4658;
  box-shadow:0 10px 28px rgba(8,13,22,.16);
}
html.dark .modal-box:has(.why-modal-body){
  background:linear-gradient(135deg, #263244 0%, #2b3748 48%, #202b3a 100%);
  border-color:#3a4658;
  box-shadow:0 14px 42px rgba(8,13,22,.32);
}
html.dark .modal-box:has(.why-modal-body)::before{
  background:rgba(96,165,250,.16);
}
html.dark .modal-box:has(.why-modal-body)::after{
  background:rgba(251,191,36,.12);
}
html.dark .month-header:hover{background:#334155;}
html.dark .completion-banner{
  background:#243630;
  border-color:#526f62;
  color:#b7d0c3;
}
html.dark .completion-icon{background:#4f665b;color:#f1f5f9;}
html.dark .completion-copy em{color:#b7d0c3;}
html.dark .completion-copy span{color:#9db8ab;}
html.dark .month.complete .month-header{background:#243630;}
html.dark .month.complete .month-header:hover{background:#2b4038;}
html.dark .month.complete .month-header .label,
html.dark .month.complete .month-header .meta,
html.dark .month.complete .month-header .chevron{color:#b7d0c3;}
html.dark .month-menu-btn:hover,
html.dark .month-menu.open .month-menu-btn{
  background:#334155;
  color:#dbe7f6;
}
html.dark .month-menu-popover{
  background:#263244;
  border-color:#3a4658;
  box-shadow:0 12px 30px rgba(8,13,22,.34);
}
html.dark .month-menu-popover button{
  color:#dbe7f6;
}
html.dark .month-menu-popover button:hover{
  background:#334155;
}
html.dark .month-header .label,
html.dark .sentence-card .pair-text,
html.dark .settings-panel h2,
html.dark .about-summary span,
html.dark .modal-box,
html.dark .story-name{
  color:#f1f5f9;
}
html.dark .about-section{
  border-color:#3a4658;
  color:#9aa8ba;
}
html.dark .about-summary:hover{
  background:#334155;
}
html.dark .about-summary{
  color:#b7c3d3;
}
html.dark .about-summary::after{
  color:#b7c3d3;
}
html.dark .about-coffee{
  border-color:#3a4658;
}
html.dark .about-coffee-title{color:#b7c3d3;}
html.dark .about-coffee-link{
  background:#263244;
  border-color:#3a4658;
  color:#dbe7f6;
}
html.dark .about-coffee-link:hover,
html.dark .about-coffee-link:active{
  background:#f6d84a;
  border-color:#e6c800;
  color:#4a3200;
}
html.dark .about-lang-links a{color:#9aa8ba;}
html.dark .about-lang-links a:hover{color:#dbe7f6;}
html.dark .about-lang-links a + a::before{color:#64748b;}
html.dark .about-tips{border-color:#3a4658;}
html.dark .about-tips-title,
html.dark .about-tip-title{color:#dbe7f6;}
html.dark .about-tips-count-row,
html.dark .about-tip-card p{color:#9aa8ba;}
html.dark .about-tip-indicator{color:#64748b;}
html.dark .about-tip-settings-link{color:#9bbbe2;}
html.dark .about-tip-settings-link:hover,
html.dark .about-tip-settings-link:focus-visible{color:#c8dcf5;}
html.dark .sentence-card .base-text{
  color:#dbe7f6;
}
html.dark .day-btn,
html.dark .month-listen-btn,
html.dark .ctrl-btn,
html.dark .install-btn,
html.dark .share-btn,
html.dark .offline-btn,
html.dark .pair-select,
html.dark .done-btn{
  background:#263244;
  border-color:#4a5870;
  color:#dbe7f6;
}
html.dark .day-btn:hover,
html.dark .month-listen-btn:hover,
html.dark .ctrl-btn:hover,
html.dark .install-btn:hover,
html.dark .share-btn:hover,
html.dark .offline-btn:hover,
html.dark .pair-select:hover{
  background:#334155;
  border-color:#64748b;
  color:#f1f5f9;
}
html.dark .day-btn.active{
  background:#f1f5f9;
  border-color:#f1f5f9;
  color:#202b3a;
}
html.dark .lang-btn.active{
  color:#b7d0c3;
}
html.dark .lang-toggle{
  background:#263244;
  border-color:#4a5870;
}
html.dark .lang-toggle::before{
  background:#243630;
  border-color:#526f62;
  box-shadow:0 2px 8px rgba(8,13,22,.2);
}
html.dark .lang-btn{color:#9aa8ba;}
html.dark .lang-btn:hover{color:#dbe7f6;}
html.dark .day-btn.done,
html.dark .recap-btn.done,
html.dark .dialogue-btn.done,
html.dark .done-btn.checked{
  background:#243630;
  border-color:#526f62;
  color:#b7d0c3;
}
html.dark .day-btn.done.active{
  background:#4f665b;
  border-color:#5f766b;
  color:#f1f5f9;
}
html.dark .month-listen-btn{
  background:#243630;
  border-color:#526f62;
  color:#b7d0c3;
}
html.dark .month-listen-btn:hover{
  background:#2b4038;
  border-color:#647f71;
  color:#d9eadf;
}
html.dark .recap-btn{
  background:#352f22;
  border-color:#6f5a2a;
  color:#dbe7f6;
  font-weight:400;
}
html.dark .recap-btn:hover{background:#403722;}
html.dark .recap-btn.done{
  background:#243630;
  border-color:#526f62;
  color:#b7d0c3;
  font-weight:400;
}
html.dark .recap-btn.done:hover{background:#2b4038;}
html.dark .dialogue-btn{
  background:#223249;
  border-color:#41627f;
  color:#dbe7f6;
  font-weight:400;
}
html.dark .dialogue-btn:hover{background:#2a3d58;}
html.dark .dialogue-listen-btn,
html.dark .dialogue-restart-btn{
  background:#263244;
  border-color:#4a5870;
  color:#dbe7f6;
}
html.dark .dialogue-listen-btn:hover{background:#334155;}
html.dark .dialogue-restart-btn:hover{background:#334155;}
html.dark .dialogue-listen-btn.is-playing{
  background:#243630;
  border-color:#526f62;
  color:#b7d0c3;
}
html.dark .dialogue-listen-btn.is-paused{
  background:#263244;
  border-color:#4a5870;
  color:#dbe7f6;
}
html.dark .dialogue-btn.done{
  background:#243630;
  border-color:#526f62;
  color:#b7d0c3;
  font-weight:400;
}
html.dark .dialogue-btn.done:hover{background:#2b4038;}
html.dark .dialogue-speaker{
  background:#263244;
  color:#dbe7f6;
}
html.dark .speaker-a .dialogue-speaker{background:#223249;color:#9fc4e8;}
html.dark .speaker-b .dialogue-speaker{background:#352f22;color:#d8bb78;}
html.dark .dialogue-play-hint{color:#9aa8ba;}
html.dark .back-btn{
  background:#263244;
  border-color:#4a5870;
  color:#dbe7f6;
}
html.dark .info-btn{
  background:linear-gradient(90deg,#263244 0%,#334155 30%,#3a4658 50%,#334155 70%,#263244 100%);
  background-size:200% auto;
  border-color:#4a5870;
  color:#dbe7f6;
}
html.dark .back-btn:hover,
html.dark .info-btn:hover{
  background:#334155;
  border-color:#64748b;
  color:#f1f5f9;
}
html.dark .modal-overlay{background:rgba(8,13,22,.68);}
html.dark .modal-close{color:#b7c3d3;}
html.dark .modal-close:hover{color:#fff;}
html.dark .modal-divider,
html.dark .settings-lang-switch,
html.dark .settings-toggle,
html.dark .settings-toggle:last-child,
html.dark .month-listen-option,
html.dark .month-listen-delay,
html.dark .month-listen-font,
html.dark .settings-offline{
  border-color:#3a4658;
}
html.dark .month-listen-panel p,
html.dark .month-listen-progress,
html.dark .month-listen-wait,
html.dark .month-listen-hint,
html.dark .month-listen-translation-text,
html.dark .month-listen-extra,
html.dark .month-listen-delay-scale,
html.dark .month-listen-delay-head{color:#9aa8ba;}
html.dark #month-listen-content .month-listen-panel,
html.dark #month-listen-content .month-listen-player,
html.dark #dialogue-listen-options .month-listen-panel{
  background:#1f2937;
  border-color:#334155;
}
html.dark .settings-offline-label small{color:#9aa8ba;}
html.dark .month-listen-wait{background:#263a52;border-color:#5f86ad;color:#b8daf7;}
html.dark .month-listen-text{color:#f1f5f9;}
html.dark .month-listen-delay-scale span::after{background:#53657d;}
html.dark .month-listen-delay input[type="range"]::-webkit-slider-runnable-track{background:#44546a;}
html.dark .month-listen-delay input[type="range"]::-webkit-slider-thumb{border-color:#1f2937;background:#7aa9d4;}
html.dark .month-listen-delay input[type="range"]::-moz-range-track{background:#44546a;}
html.dark .month-listen-delay input[type="range"]::-moz-range-thumb{border-color:#1f2937;background:#7aa9d4;}
html.dark .month-listen-position::-webkit-slider-runnable-track{
  background:linear-gradient(to right, #fbbf24 0 var(--month-listen-position, 0%), #44546a var(--month-listen-position, 0%) 100%);
}
html.dark .month-listen-position:not(:disabled)::-webkit-slider-runnable-track{
  background:linear-gradient(to right, #b7d0c3 0 var(--month-listen-position, 0%), #44546a var(--month-listen-position, 0%) 100%);
}
html.dark .month-listen-position::-webkit-slider-thumb{border-color:#1f2937;background:#fbbf24;}
html.dark .month-listen-position:not(:disabled)::-webkit-slider-thumb{background:#b7d0c3;}
html.dark .month-listen-position::-moz-range-track{background:#44546a;}
html.dark .month-listen-position::-moz-range-progress{background:#fbbf24;}
html.dark .month-listen-position:not(:disabled)::-moz-range-progress{background:#b7d0c3;}
html.dark .month-listen-position::-moz-range-thumb{border-color:#1f2937;background:#fbbf24;}
html.dark .month-listen-position:not(:disabled)::-moz-range-thumb{background:#b7d0c3;}
html.dark .month-listen-scrub-labels{color:#64748b;}
html.dark .month-listen-start,
html.dark .month-listen-pause,
html.dark .month-listen-cancel{
  background:#263244;
  border-color:#4a5870;
  color:#dbe7f6;
}
html.dark .month-listen-cancel:hover,
html.dark .month-listen-start:hover,
html.dark .month-listen-pause:hover{background:#334155;}
html.dark .month-listen-pause:disabled:hover{background:#263244;}
html.dark .settings-toggle i{background:#4a5870;}
html.dark .settings-toggle input:checked + i{background:#ecd99e;}
html.dark .offline-badge{background:#334155;color:#dbe7f6;}
html.dark .offline-badge.cloud{background:transparent;color:rgba(147,197,253,.42);}
html.dark .offline-badge.ok{background:#203a35;color:#a7f3d0;}
html.dark .offline-badge.busy{background:#263a52;color:#93c5fd;}
html.dark .offline-btn.danger{border-color:#7f4d4d;color:#fca5a5;}
html.dark .offline-btn.danger:hover{background:#3f2529;}
html.dark .offline-pair-list{border-color:#3a4658;}
html.dark .offline-pair-list-title{color:#b7c3d3;}
html.dark .offline-pair-list-items.is-empty{color:#9aa8ba;}
html.dark .offline-spinner{
  filter:saturate(.95);
}
html.dark .offline-spinner i{
  background:#fbbf24;
}
html.dark .offline-pair-pill{
  background:#203a35;
  border-color:#36584c;
  color:#a7f3d0;
}
html.dark .offline-pair-pill:hover,
html.dark .offline-pair-pill:focus-visible{
  background:#28483f;
  border-color:#47705f;
}
html.dark .offline-pair-pill.is-current{
  background:#2d4d42;
  border-color:#5f8f78;
  color:#d7f6e5;
}
html.dark .offline-clear-all{
  background:#263244;
  border-color:#7f4d4d;
  color:#fca5a5;
}
html.dark .offline-clear-all:hover,
html.dark .offline-clear-all:focus-visible{
  background:#3f2529;
}
html.dark .offline-confirm-layer{
  background:rgba(8,13,22,.72);
}
html.dark .offline-confirm-box{
  border-color:rgba(251,191,36,.24);
  background:
    radial-gradient(circle at -24px -28px, rgba(96,165,250,.16), transparent 72px),
    radial-gradient(circle at calc(100% + 26px) calc(100% + 28px), rgba(251,191,36,.12), transparent 76px),
    #2b3748;
  box-shadow:0 20px 48px rgba(8,13,22,.38);
}
html.dark .offline-confirm-box p{
  color:#f1f5f9;
}
html.dark .offline-confirm-no{
  border-color:#b9a661;
  background:#3a3322;
  color:#f7e8ad;
}
html.dark .offline-confirm-no:hover,
html.dark .offline-confirm-no:focus-visible{
  background:#443b27;
  box-shadow:0 0 0 3px rgba(236,217,158,.22);
}
html.dark .offline-confirm-yes{
  border-color:#4a5870;
  background:#263244;
  color:#fca5a5;
}
html.dark .offline-confirm-yes:hover,
html.dark .offline-confirm-yes:focus-visible{
  border-color:#7f4d4d;
  background:#523036;
}
html.dark .offline-bar{background:#3a4658;}
html.dark .toast{
  background:#111827;
  color:#f1f5f9;
}
html.dark .pinyin-popover{
  background:linear-gradient(135deg, #2b3748 0%, #263244 48%, #2f3b4d 100%);
  border-color:#3a4658;
  color:#dbe7f6;
  box-shadow:0 12px 30px rgba(8,13,22,.34);
}
html.dark .pinyin-popover::before{background:rgba(96,165,250,.08);}
html.dark .pinyin-popover::after{background:rgba(251,191,36,.06);}
html.dark .lang-help-popover{
  background:
    radial-gradient(circle at calc(100% + 28px) -28px, rgba(96,165,250,.08) 0 58px, transparent 59px),
    radial-gradient(circle at 20px calc(100% + 34px), rgba(251,191,36,.06) 0 52px, transparent 53px),
    linear-gradient(135deg, #2b3748 0%, #263244 48%, #2f3b4d 100%);
  border-color:#3a4658;
  color:#dbe7f6;
  box-shadow:0 12px 30px rgba(8,13,22,.34);
}
html.dark .lang-help-popover::before{background:rgba(96,165,250,.08);}
html.dark .lang-help-popover::after{background:rgba(251,191,36,.06);}
html.dark .swipe-hint{
  color:#526174;
}
html.dark .swipe-hint.visible{color:#9aa8ba;}
html.dark .swipe-help{color:#9aa8ba;}