body{
  font-family:Arial,sans-serif;
  background:#f4f6f8;
  padding:20px;
  line-height:2;
}
*{
  box-sizing:border-box;
}
.box{
  background:#fff;
  max-width:980px;
  margin:auto;
  padding:22px;
  border-radius:14px;
}
.storyNav{
  display:flex;
  justify-content:flex-start;
  margin-bottom:12px;
}
.storyNav.storyAppHeader{
  position:sticky;
  top:0;
  z-index:50;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  min-height:64px;
  margin:-22px -22px 18px;
  padding:10px 18px;
  border-radius:14px 14px 0 0;
  background:#275f73;
  color:#fff;
  box-shadow:0 12px 30px rgba(39,95,115,.22);
}
.storyNav.storyAppHeader.stageTwoStoryHeader{
  background:#061013;
  box-shadow:0 12px 30px rgba(6,16,19,.22);
}
.storyAppStage{
  grid-column:2;
  grid-row:1;
  justify-self:center;
  max-width:min(580px,58vw);
  color:#fff;
  font-size:20px;
  font-weight:bold;
  line-height:1.2;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.storyAppControls{
  grid-column:1 / -1;
  grid-row:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
}
.storyAppLeft{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
}
.storyLevelMenu{
  position:relative;
}
.storyLevelMenu summary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.26);
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:17px;
  font-weight:bold;
  cursor:pointer;
  list-style:none;
}
.storyLevelMenu summary::-webkit-details-marker{
  display:none;
}
.storyLevelPanel{
  position:absolute;
  top:50px;
  left:0;
  z-index:70;
  display:grid;
  gap:8px;
  min-width:170px;
  padding:12px;
  border:1px solid rgba(203,213,225,.8);
  border-radius:10px;
  background:rgba(255,255,255,.96);
  box-shadow:0 18px 44px rgba(15,23,42,.22);
}
.storyLevelPanel strong{
  color:#172033;
  font-size:15px;
}
.storyLevelPanel a{
  display:flex;
  align-items:center;
  min-height:36px;
  padding:8px 10px;
  border-radius:8px;
  background:#e8f2f5;
  color:#275f73;
  text-decoration:none;
  font-weight:bold;
}
.storyAppStats{
  display:flex;
  align-items:center;
  gap:8px;
}
.storyAppStats span{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:#fff;
  font-size:18px;
  font-weight:bold;
  line-height:1;
  white-space:nowrap;
}
.storyAppStats b{
  margin-left:5px;
  color:#fff;
  font-size:18px;
  font-weight:normal;
}
.wordFilterBar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 16px;
  padding:10px;
  border:1px solid #d9e5f6;
  border-radius:8px;
  background:#f8fbff;
}
.wordFilterBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:7px 10px;
  border:1px solid #cbd5e1;
  border-radius:7px;
  background:#fff;
  color:#1f2937;
  cursor:pointer;
  font-weight:bold;
  line-height:1.2;
}
.wordFilterBtn:hover,
.wordFilterBtn:focus{
  border-color:#2f6fed;
  outline:none;
}
.wordFilterBtn.active{
  border-color:#2f6fed;
  background:#2f6fed;
  color:#fff;
}
.wordFilterBar.is-study-launcher .wordFilterBtn{gap:7px}
.wordFilterBar.is-study-launcher .wordFilterBtn span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:22px;
  padding:0 6px;
  border-radius:999px;
  background:#e4f1f3;
  color:#245f70;
  font-size:12px;
  line-height:1;
}
.wordFilterBar.is-study-launcher .wordFilterBtn:hover,
.wordFilterBar.is-study-launcher .wordFilterBtn:focus{
  border-color:#2b7185;
  background:#eef7f8;
}
.wordFilterBar.is-study-launcher .wordFilterBtn:disabled{cursor:not-allowed;opacity:.48}
.wordStudyOpen{overflow:hidden}
.wordStudyModal{
  position:fixed;
  inset:0;
  z-index:1250;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.wordStudyOverlay{position:absolute;inset:0;background:rgba(15,23,42,.62);backdrop-filter:blur(3px)}
.wordStudyPanel{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  width:min(940px,100%);
  max-height:calc(100vh - 40px);
  overflow:hidden;
  border:1px solid #d9e5f6;
  border-radius:20px;
  background:#f8fbff;
  box-shadow:0 24px 70px rgba(15,23,42,.32);
}
.wordStudyClose{
  position:static;
  align-self:start;
  display:grid;
  flex:0 0 44px;
  width:44px;
  height:44px;
  place-items:center;
  border:2px solid rgba(255,255,255,.72);
  border-radius:50%;
  background:#fff;
  color:#8f2525;
  cursor:pointer;
  font-family:Arial,"Segoe UI",sans-serif;
  font-size:32px;
  font-weight:400;
  line-height:1;
  box-shadow:0 4px 14px rgba(15,23,42,.14);
}
.wordStudyClose span{display:block;color:inherit;font:inherit;line-height:.8;transform:translateY(-1px)}
.wordStudyClose:hover,
.wordStudyClose:focus-visible{background:#fff1f1;color:#7f1d1d;outline:3px solid rgba(255,255,255,.35);outline-offset:2px}
.wordStudyHeader{
  grid-column:1/-1;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:22px 20px 20px 24px;
  background:linear-gradient(120deg,#173f51,#2b7185);
  color:#fff;
}
.wordStudyHeader>div{min-width:0}
.wordStudyHeader h3{margin:0 0 7px;font-size:clamp(1.35rem,3vw,2rem)}
.wordStudyHeader p{max-width:720px;margin:0;color:rgba(255,255,255,.82);line-height:1.5}
.wordStudyWords{
  display:flex;
  flex-direction:column;
  gap:7px;
  max-height:calc(100vh - 175px);
  overflow:auto;
  padding:14px;
  border-right:1px solid #d9e5f6;
  background:#eef6f8;
}
.wordStudyWord{
  display:grid;
  gap:1px;
  width:100%;
  padding:10px 12px;
  border:1px solid #d5e2e7;
  border-radius:10px;
  background:#fff;
  color:#172033;
  cursor:pointer;
  text-align:left;
}
.wordStudyWord b{color:#9a3412;font-family:"Noto Naskh Arabic","Segoe UI",serif;font-size:1.65rem;line-height:1.35;text-align:right}
.wordStudyWord span{color:#64748b;font-size:.82rem}
.wordStudyWord:hover,
.wordStudyWord:focus-visible,
.wordStudyWord.is-active{border-color:#2b7185;outline:none;background:#e3f1f3}
.wordStudyDetail.wordInfo{
  display:block;
  min-height:360px;
  max-height:calc(100vh - 175px);
  overflow:auto;
  margin:0;
  padding:22px;
  border:0;
  border-radius:0;
  background:#fff;
}
.wordStudyDetail .wordInfoArabic{font-size:clamp(2.1rem,5vw,3.2rem)}
.wordStudyDetail .wordCloseBtn{display:none}
@media(max-width:700px){
  .wordStudyModal{padding:8px}
  .wordStudyPanel{grid-template-columns:1fr;max-height:calc(100vh - 16px)}
  .wordStudyHeader{gap:10px;padding:16px}
  .wordStudyClose{flex-basis:40px;width:40px;height:40px;font-size:29px}
  .wordStudyHeader p{font-size:.88rem}
  .wordStudyWords{flex-direction:row;max-height:none;overflow-x:auto;padding:10px;border-right:0;border-bottom:1px solid #d9e5f6}
  .wordStudyWord{flex:0 0 145px}
  .wordStudyDetail.wordInfo{min-height:0;max-height:calc(100vh - 285px);padding:16px}
}
.box.wordFilterActive .word.wordFilterMatch{
  background:#d9f99d;
  box-shadow:0 0 0 2px rgba(77,124,15,.18);
}
.indexBack{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:7px 11px;
  border:1px solid #2f6fed;
  border-radius:7px;
  color:#2f6fed;
  background:#fff;
  text-decoration:none;
  font-size:14px;
  font-weight:bold;
  line-height:1.2;
}
.storyAppHeader .indexBack{
  justify-content:center;
  width:48px;
  height:48px;
  min-height:48px;
  padding:0;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  background:rgba(255,255,255,.14);
  color:#fff;
  font-size:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 18px rgba(0,0,0,.16);
}
.storyAppHeader .indexBack::before{
  content:"↩";
  font-size:28px;
  line-height:1;
  transform:translateX(-1px);
}
.indexBack:hover,
.indexBack:focus{
  background:#eaf1ff;
  outline:none;
}
.storyAppHeader .indexBack:hover,
.storyAppHeader .indexBack:focus{
  background:rgba(255,255,255,.22);
}
.storyPager{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:26px;
  padding-top:16px;
  border-top:1px solid #e5edf8;
}
.pagerBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:9px 13px;
  border-radius:7px;
  text-decoration:none;
  font-weight:bold;
  line-height:1.2;
}
.pagerBtn.indexBtn{
  border:1px solid #2f6fed;
  color:#2f6fed;
  background:#fff;
}
.pagerBtn.nextBtn{
  border:1px solid #2f6fed;
  color:#fff;
  background:#2f6fed;
}
.pagerBtn:hover,
.pagerBtn:focus{
  filter:brightness(.96);
  outline:none;
}
.sentenceBlock{
  display:flex;
  flex-direction:column;
  margin-bottom:18px;
  padding:12px;
  border:1px solid transparent;
  border-bottom-color:#eee;
  border-radius:10px;
  transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.sentenceBlock.activeSentence{
  background:#f8fbff;
  border-color:#2f6fed;
  box-shadow:0 0 0 3px rgba(47,111,237,.12);
}
.sentenceText{
  order:1;
  overflow-wrap:anywhere;
}
.word{
  cursor:pointer;
  padding:3px 6px;
  border-radius:6px;
}
.word:hover,.word.active{
  background:#ffe08a;
}
.word.isReading,
.readingWord.isReading{
  background:#ffb347;
  box-shadow:0 0 0 3px #ffb347;
}
.readBtn{
  margin-left:10px;
  border:0;
  background:#2f6fed;
  color:white;
  padding:6px 10px;
  border-radius:6px;
  cursor:pointer;
  white-space:nowrap;
}
.stageOneStory .readBtn{
  background:#275f73;
}
.localInfo,
.localTranslate{
  display:none;
  position:relative;
  margin-top:10px;
  padding:14px 42px 14px 14px;
  border-radius:9px;
  line-height:1.6;
}
.localInfo{
  order:2;
  background:#eef5ff;
  border-left:5px solid #2f6fed;
}
.localTranslate{
  order:0;
  margin-top:0;
  margin-bottom:10px;
  background:#fff7d6;
  border-left:5px solid #e0a800;
}
.phraseParts{
  margin:0 0 14px;
  padding:10px;
  background:#fff;
  border:1px solid rgba(47,111,237,.18);
  border-radius:8px;
}
.phraseParts > b{
  display:block;
  margin-bottom:8px;
  color:#1f4fb8;
}
.phrasePartButtons{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:6px;
}
.phrasePartBtn{
  border:1px solid #2f6fed;
  background:#f8fbff;
  color:#1f4fb8;
  padding:5px 10px;
  border-radius:6px;
  cursor:pointer;
  font-size:14px;
  line-height:1.2;
}
.phrasePartBtn:hover,
.phrasePartBtn:focus{
  background:#dbeafe;
  outline:none;
}
.phrasePartDetail{
  margin-top:10px;
  padding:10px;
  background:#fff;
  border-radius:6px;
  border:1px solid rgba(47,111,237,.14);
  line-height:1.55;
}
.phrasePartDetail b{
  display:inline;
  margin:0;
  color:#111827;
}
.partExamples{
  margin-top:10px;
  padding-top:8px;
  border-top:1px solid rgba(47,111,237,.16);
}
.partExamples > b{
  display:block;
  margin-bottom:6px;
  color:#111827;
}
.exampleRow{
  padding:6px 0;
  border-top:1px solid rgba(17,24,39,.14);
}
.exampleRow:first-of-type{
  border-top:0;
}
.noteDivider{
  border:0;
  border-top:1px dashed #9bb7df;
  margin:6px 0;
}
.verbFormsBtn{
  margin-left:8px;
  border:1px solid #2f6fed;
  background:#fff;
  color:#2f6fed;
  padding:3px 8px;
  border-radius:6px;
  cursor:pointer;
  font-size:13px;
}
.verbFormsBtn:hover{
  background:#eaf1ff;
}
.relatedForms{
  margin-top:10px;
}
.relatedFormsBtn{
  border:1px solid #2f6fed;
  background:#fff;
  color:#1f4fb8;
  border-radius:6px;
  padding:6px 10px;
  cursor:pointer;
}
.relatedFormsBtn:hover{
  background:#eaf1ff;
}
.relatedFormRows{
  display:grid;
  gap:8px;
}
.relatedFormRow{
  display:grid;
  grid-template-columns:100px 1fr;
  gap:4px 12px;
  border:1px solid #d9e5f6;
  background:#fbfdff;
  border-radius:6px;
  padding:9px;
}
.relatedFormRow small{
  grid-column:2;
  color:#4b5563;
}
.relatedFormRow em,
.relatedFormExample em{
  grid-column:2;
  color:#2f6fed;
  font-style:normal;
}
.relatedFormExample{
  grid-column:2;
  border-top:1px solid #d9e5f6;
  padding-top:6px;
  color:#111827;
}
.relatedFormExample div + div{
  margin-top:2px;
  color:#4b5563;
}
.verbModal{
  position:fixed;
  inset:0;
  z-index:1000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.verbModalOverlay{
  position:absolute;
  inset:0;
  background:rgba(16,24,40,.45);
}
.verbModalPanel{
  position:relative;
  z-index:1;
  width:min(780px,100%);
  max-height:88vh;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  background:#fff;
  border-radius:10px;
  padding:20px;
  box-shadow:0 18px 48px rgba(16,24,40,.24);
  line-height:1.55;
}
.verbModalPanel h3{
  margin:0 36px 14px 0;
}
.verbModalPanel h4{
  margin:16px 0 8px;
}
.svoNote{
  background:#f8fbff;
  border:1px solid #d9e5f6;
  border-left:5px solid #2f6fed;
  border-radius:8px;
  padding:10px 12px;
  margin:10px 0 14px;
}
.svoNote b,
.svoNote span,
.svoNote em,
.svoNote small{
  display:block;
}
.svoNote span{
  margin-top:4px;
}
.svoNote em{
  margin-top:6px;
  color:#1f2937;
}
.svoNote small{
  margin-top:6px;
  color:#4b5563;
}
.svoExample{
  display:block;
}
.svoParts{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
}
.svoPart{
  display:inline-flex;
  flex-direction:column;
  gap:2px;
  background:#fff;
  border:1px solid #d9e5f6;
  border-radius:6px;
  padding:5px 8px;
}
.svoPart b{
  color:#2f6fed;
  font-size:12px;
}
.svoPart small{
  color:#4b5563;
  font-size:12px;
}
.verbModalClose{
  position:absolute;
  right:12px;
  top:12px;
  border:0;
  background:#d9534f;
  color:#fff;
  border-radius:50%;
  width:28px;
  height:28px;
  cursor:pointer;
  font-size:20px;
  line-height:28px;
}
.verbTable{
  width:100%;
  border-collapse:collapse;
  background:#fbfdff;
  font-size:14px;
}
.verbTable th,
.verbTable td{
  border:1px solid #d9e5f6;
  padding:7px 9px;
  text-align:left;
}
.verbTable th{
  background:#eaf1ff;
}
.tenseMapWrap{
  overflow-x:auto;
  margin-top:8px;
}
.tenseMapTable{
  width:100%;
  min-width:720px;
  border-collapse:collapse;
  font-size:14px;
  line-height:1.35;
}
.tenseMapTable th,
.tenseMapTable td{
  border:1px solid #d7dfec;
  padding:8px;
  vertical-align:top;
  text-align:left;
}
.tenseMapTable thead th{
  background:#fff200;
  color:#111;
  font-weight:bold;
}
.tenseMapTable tbody th{
  width:145px;
  background:#f7f7f7;
  font-weight:normal;
}
.tenseMapTable tbody tr:nth-child(1) td{
  background:#fff2c7;
}
.tenseMapTable tbody tr:nth-child(2) td{
  background:#e5f5ee;
}
.tenseMapTable tbody tr:nth-child(3) td{
  background:#fffbc1;
}
.tenseMapTable tbody tr:nth-child(4) td{
  background:#f7f7f7;
}
.tenseMapCell b,
.tenseMapCell span,
.tenseMapCell em{
  display:block;
}
.tenseMapCell{
  cursor:pointer;
}
.tenseMapCell:hover,
.tenseMapCell:focus{
  outline:3px solid #2f6fed;
  outline-offset:-3px;
}
.tenseMapCell span{
  margin-top:5px;
}
.tenseMapCell em{
  margin-top:8px;
  color:#1f2937;
}
.tenseMapCell.activeTenseCell{
  outline:3px solid #2f6fed;
  outline-offset:-3px;
  box-shadow:inset 0 0 0 999px rgba(47,111,237,.08);
}
.tenseDetailModal{
  z-index:1100;
}
.tenseDetailPanel{
  width:min(720px,100%);
}
.verbFormsLine{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.verbFormsLine span{
  background:#f0f5ff;
  border:1px solid #d9e5f6;
  border-radius:6px;
  padding:5px 9px;
}
.verbModalNote{
  margin:14px 0 0;
  color:#4b5563;
}
.closeBox{
  position:absolute;
  right:10px;
  top:8px;
  border:0;
  background:#d9534f;
  color:#fff;
  border-radius:50%;
  width:25px;
  height:25px;
  cursor:pointer;
}
.quiz{
  margin-top:28px;
  padding:16px;
  background:#f0fff4;
  border-left:5px solid #28a745;
  border-radius:9px;
}
.quizQuestion{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid #cfe8d6;
}
.quizQuestion:first-of-type{
  border-top:0;
}
.quizQuestion p{
  margin:0 0 8px;
}
.quizQuestion.isHidden{
  display:none;
}
.quizComplete{
  margin-top:14px;
  font-weight:bold;
  color:#15803d;
}
.quiz input{
  padding:8px 10px;
  width:220px;
  border:1px solid #b8cdf5;
  border-radius:6px;
  background:#fff;
  color:#111827;
  font-size:14px;
  line-height:1.2;
}
.quiz input:focus{
  border-color:#2f6fed;
  outline:2px solid rgba(47,111,237,.16);
}
.quiz button{
  border:1px solid #2f6fed;
  background:#f8fbff;
  color:#1f4fb8;
  padding:8px 12px;
  border-radius:6px;
  cursor:pointer;
  font-size:14px;
  line-height:1.2;
}
.quiz button:hover,
.quiz button:focus{
  background:#dbeafe;
  outline:none;
}
.quiz button:disabled{
  opacity:.65;
  cursor:default;
}
.result{
  margin-top:10px;
  font-weight:bold;
}
.quizResult{
  margin-top:8px;
  font-weight:bold;
}
.quizResult.correct{
  color:#15803d;
}
.quizResult.wrong{
  color:#b91c1c;
}
.lockedStoryBox{
  margin-top:22px;
  padding:18px;
  border-left:5px solid #64748b;
  border-radius:9px;
  background:#f8fafc;
  color:#1f2937;
}
.lockedStoryBox h3{
  margin:0 0 8px;
  font-size:20px;
}
.lockedStoryBox p{
  margin:0 0 14px;
}

@media (max-width: 768px){
  body{
    padding:10px;
    line-height:1.75;
  }
  .box{
    width:100%;
    padding:14px;
    border-radius:8px;
  }
  .storyNav{
    margin-bottom:10px;
  }
  .storyNav.storyAppHeader{
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:10px;
    min-height:58px;
    margin:-14px -14px 16px;
    padding:7px 10px;
    border-radius:8px 8px 0 0;
  }
  .storyAppStage{
    grid-column:2;
    grid-row:1;
    max-width:100%;
    font-size:17px;
  }
  .storyAppControls{
    grid-column:1 / -1;
    grid-row:1;
    gap:8px;
  }
  .storyAppStats{
    justify-content:flex-end;
    gap:8px;
  }
  .storyAppStats span{
    flex:0 0 auto;
    justify-content:center;
    min-height:auto;
    padding:0;
    font-size:13px;
  }
  .storyAppStats b{
    font-size:13px;
  }
  .wordFilterBar{
    gap:6px;
    padding:8px;
  }
  .wordFilterBtn{
    flex:1 1 95px;
  }
  .indexBack{
    width:100%;
    justify-content:center;
    min-height:40px;
  }
  .storyAppHeader .indexBack{
    flex:0 0 44px;
    width:44px;
    height:44px;
    min-height:44px;
  }
  .storyLevelMenu summary{
    width:40px;
    height:40px;
  }
  .storyPager{
    display:grid;
    grid-template-columns:1fr;
  }
  .pagerBtn{
    width:100%;
  }
  h2{
    font-size:22px;
    line-height:1.25;
    margin:4px 0 12px;
  }
  p{
    margin:10px 0;
  }
  .sentenceBlock{
    margin-bottom:14px;
    padding:10px;
    border-radius:8px;
  }
  .sentenceText{
    font-size:17px;
  }
  .word{
    display:inline-block;
    margin:1px 0;
    padding:2px 5px;
  }
  .readBtn{
    display:block;
    width:100%;
    margin:10px 0 0;
    padding:9px 10px;
    text-align:center;
  }
  .localInfo,
  .localTranslate{
    padding:12px 38px 12px 12px;
    border-radius:8px;
    line-height:1.55;
  }
  .verbFormsBtn{
    display:inline-block;
    margin:6px 0 0;
    padding:5px 8px;
  }
  .closeBox{
    right:8px;
    top:8px;
  }
  .verbModal{
    align-items:stretch;
    padding:8px;
  }
  .verbModalPanel{
    width:100%;
    max-height:calc(100vh - 16px);
    padding:14px;
    border-radius:8px;
  }
  .verbModalPanel h3{
    font-size:20px;
    line-height:1.25;
    margin-right:34px;
  }
  .verbModalPanel h4{
    font-size:17px;
  }
  .verbTable{
    display:block;
    width:100%;
    overflow-x:auto;
    white-space:nowrap;
  }
  .verbTable th,
  .verbTable td{
    padding:6px 7px;
  }
  .tenseMapWrap{
    margin-left:-2px;
    margin-right:-2px;
    padding-bottom:4px;
  }
  .tenseMapTable{
    min-width:760px;
    font-size:13px;
  }
  .svoParts{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .svoPart{
    min-width:0;
  }
  .verbFormsLine{
    display:grid;
    grid-template-columns:1fr;
  }
  .quiz{
    padding:12px;
  }
  .quiz input,
  .quiz button{
    width:100%;
    margin-top:8px;
  }
}

@media (max-width: 420px){
  body{
    padding:6px;
  }
  .box{
    padding:10px;
  }
  .storyNav.storyAppHeader{
    margin:-10px -10px 14px;
  }
  h2{
    font-size:20px;
  }
  .sentenceText{
    font-size:16px;
  }
  .localInfo,
  .localTranslate{
    padding-right:34px;
  }
  .svoParts{
    grid-template-columns:1fr;
  }
  .verbModalPanel{
    padding:12px;
  }
  .tenseMapTable{
    min-width:720px;
  }
}

.grammarInfoBox{
  margin:28px 0 18px;
  padding:18px;
  border:1px solid rgba(39,95,115,.18);
  border-radius:10px;
  background:#f8fbfc;
}

.grammarInfoBox h3{
  margin:0 0 14px;
  color:#173b4a;
  font-size:20px;
}

.grammarTableWrap{
  overflow-x:auto;
}

.grammarTable{
  width:100%;
  min-width:760px;
  border-collapse:collapse;
  font-size:14px;
}

.grammarTable th,
.grammarTable td{
  padding:9px 10px;
  border-bottom:1px solid rgba(39,95,115,.14);
  text-align:left;
  vertical-align:top;
}

.grammarTable th{
  color:#17485a;
  background:#eaf3f6;
  font-weight:700;
}

.grammarTable td:first-child,
.grammarTable th:first-child{
  width:42px;
  text-align:center;
}

.sentencePronunciation{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(39,95,115,.16);
  color:#315563;
  line-height:1.6;
}