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;
}
.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;
}
.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;
}
.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;
}
.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;
}
.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;
}
.quiz input{
  padding:8px;
  width:220px;
}
.quiz button{
  padding:8px 12px;
}
.result{
  margin-top:10px;
  font-weight:bold;
}
.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;
  }
}