.page-content .greek{
    font-family: "Noto Serif Greek","Gentium Plus","Palatino Linotype","Times New Roman",serif;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    font-kerning: normal;
  }
.page-content a{
    color: #a63d2d;
    text-decoration: none;
    transition: color .2s ease;
  }
.page-content a:hover{
    color: #f2a65a;
    text-decoration: underline;
  }
.page-content header{
    background: #3b5d50;
    color: #fdfdfd;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
.page-content .logo a{
    color: #fff;
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none;
    transition: color .3s, transform .2s;
  }
.page-content .logo a:hover{
    color: #f2a65a;
    transform: scale(1.05);
  }
.page-content header nav a{
    color: #fdfdfd;
    margin: 0 .5rem;
    font-weight: bold;
  }
.page-content header nav a:hover,.page-content header nav a.active{
    color: #f2a65a;
  }
.page-content .breadcrumb{
    margin-top: .5rem;
    font-size: .9rem;
  }
.page-content .breadcrumb a{
    color: #f2a65a;
  }
.page-content .section{
    padding: 2rem;
    max-width: 1000px;
    margin: auto;
  }
.page-content .section h2{
    color: #3b5d50;
    margin-bottom: 1rem;
  }
.page-content .card,.page-content .practice-card,.page-content .note-box{
    background: #fff;
    border: 1px solid #e6ebe8;
    border-left: 5px solid #3b5d50;
    border-radius: 5px;
    padding: 1.25rem;
    margin: 1rem 0;
  }
.page-content .card.featured,.page-content .note-box{
    border-left-color: #a63d2d;
  }
.page-content .card p:first-child,.page-content .note-box p:first-child,.page-content .practice-card p:first-child{
    margin-top: 0;
  }
.page-content .card p:last-child,.page-content .note-box p:last-child,.page-content .practice-card p:last-child{
    margin-bottom: 0;
  }
.page-content .note-box{
    background: #e6ebe8;
  }
.page-content .practice-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
  }
.page-content .practice-card{
    margin: 0;
    border-left-color: #3b5d50;
  }
.page-content .practice-card h3{
    margin-top: 0;
    margin-bottom: .5rem;
    color: #3b5d50;
  }
.page-content .table-wrap,.page-content .char-chart{
    overflow-x: auto;
    background: #fff;
    border: 1px solid #e6ebe8;
    border-left: 5px solid #3b5d50;
    border-radius: 5px;
    margin-top: 1.5rem;
  }
.page-content table{
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
  }
.page-content th,.page-content td{
    border-bottom: 1px solid #e6ebe8;
    padding: .75rem;
    text-align: left;
    vertical-align: top;
  }
.page-content th{
    background-color: #e6ebe8;
    color: #2e2e2e;
  }
.page-content tbody tr:nth-child(even){
    background-color: #f9f8f4;
  }
.page-content tbody tr:last-child td{
    border-bottom: none;
  }
.page-content .des-char{
    font-family: "IDC Hesperapis Web","IDC Noto Deseret Fallback",sans-serif;
    font-size: 1.8rem;
    white-space: nowrap;
  }
.page-content .copy-btn{
    background: #3b5d50;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: .35rem .65rem;
    cursor: pointer;
    font-family: Georgia, serif;
    transition: background .3s ease;
  }
.page-content .copy-btn:hover{
    background: #a63d2d;
  }
.page-content .copy-note{
    font-size: .95rem;
    color: #444;
    background: #fff;
    border: 1px solid #e6ebe8;
    border-left: 5px solid #a63d2d;
    border-radius: 5px;
    padding: 1rem;
    margin-top: 1rem;
  }
.page-content figure{
    margin: 1rem 0;
    text-align: center;
  }
.page-content figure img{
    max-width: 100%;
    height: auto;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #fff;
  }
.page-content figure figcaption{
    font-size: .9rem;
    color: #555;
    margin-top: .5rem;
  }
.page-content .model-word{
    font-family: "IDC Hesperapis Web","IDC Noto Deseret Fallback",sans-serif;
    font-size: 2rem;
    text-align: center;
    margin: 1rem 0;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
.page-content .cursive-example{
    display: block;
    width: min(100%, 760px);
    height: auto;
    box-sizing: border-box;
    margin: 1.5rem auto 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #fff;
  }
.page-content .writing-lines{
    background: repeating-linear-gradient(
      to bottom,
      #fff 0,
      #fff 2.15rem,
      #d8d8d8 2.2rem
    );
    min-height: 9rem;
    border: 1px solid #e6ebe8;
    border-left: 5px solid #3b5d50;
    border-radius: 5px;
    margin: 1rem 0;
  }
.page-content .stroke-list{
    background: #fff;
    border: 1px solid #e6ebe8;
    border-left: 5px solid #3b5d50;
    border-radius: 5px;
    padding: 1rem 1rem 1rem 2.5rem;
    margin: 1rem 0;
  }
.page-content .stroke-list li{
    margin-bottom: .45rem;
  }
.page-content .stroke-list li:last-child{
    margin-bottom: 0;
  }
.page-content .stroke-list li::marker{
    color: #a63d2d;
  }
.page-content .example-word{
    font-variant-caps: small-caps;
    letter-spacing: 0.03em;
  }
.page-content footer{
    background: #3b5d50;
    color: white;
    text-align: center;
    padding: 1rem;
    margin-top: 2rem;
  }
.page-content footer a{
    color: #f2a65a;
  }
@media   (max-width: 760px) {.page-content header{
      flex-direction: column;
      gap: .75rem;
      text-align: center;
    }
.page-content header nav a{
      display: inline-block;
      margin: .25rem .4rem;
    }
.page-content .section{
      padding: 1.5rem;
    }
.page-content table{
      min-width: 560px;
    }}
.page-content .compact-keyboard{
    background: #fff;
    border: 1px solid #e6ebe8;
    border-radius: 5px;
    padding: .75rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 6px rgba(0,0,0,.06);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
.page-content .natural-keyboard{
    width: max-content;
    min-width: 690px;
    margin: 0 auto;
    padding: .05rem .1rem .15rem;
  }
.page-content .keyboard-row{
    display: flex;
    gap: .3rem;
    margin: .35rem 0 0 var(--offset);
    align-items: center;
  }
.page-content .des-key,.page-content .utility-key{
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    border: 1px solid #d8dedb;
    background: #f9f8f4;
    color: #2e2e2e;
    border-radius: 4px;
    cursor: pointer;
    transition:
      background .2s ease,
      border-color .2s ease,
      transform .08s ease;
  }
.page-content .des-key{
    position: relative;
    flex: 0 0 3.15rem;
    width: 3.15rem;
    height: 3.35rem;
    padding: 0;
    font-family:
      "IDC Hesperapis Web","IDC Noto Deseret Fallback",sans-serif;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
  }
.page-content .des-key:hover,.page-content .utility-key:hover{
    background: #e6ebe8;
    border-color: #3b5d50;
  }
.page-content .des-key:focus-visible,.page-content .utility-key:focus-visible,.page-content .btn:focus-visible{
    outline: 3px solid rgba(166,61,45,.22);
    outline-offset: 2px;
  }
.page-content .des-key:active,.page-content .des-key.active,.page-content .utility-key:active{
    transform: translateY(1px);
    background: #dfe7e3;
    box-shadow: none;
  }
.page-content .physical-label{
    position: absolute;
    left: .24rem;
    top: .18rem;
    color: #666;
    font-family: Arial, sans-serif;
    font-size: .52rem;
    font-weight: bold;
    line-height: 1;
  }
.page-content .shifted-glyph{
    position: absolute;
    right: .24rem;
    top: .08rem;
    color: #777;
    font-family:
      "IDC Hesperapis Web","IDC Noto Deseret Fallback",sans-serif;
    font-size: .82rem;
    line-height: 1;
  }
.page-content .des-glyph{
    display: block;
    margin-top: .86rem;
    font-size: 1.55rem;
    line-height: 1;
  }
.page-content .letter-name{
    display: block;
    max-width: 2.85rem;
    margin: .28rem auto 0;
    overflow: hidden;
    color: #555;
    font-family: Arial, sans-serif;
    font-size: .43rem;
    font-weight: bold;
    letter-spacing: .01em;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
.page-content .keyboard-tools{
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    border-top: 1px solid #e6ebe8;
    padding-top: .55rem;
    margin-top: .55rem;
  }
.page-content .utility-key{
    min-width: 2.4rem;
    height: 2.15rem;
    padding: .1rem .45rem;
    font-family: Georgia, serif;
    font-size: .9rem;
  }
.page-content .utility-key.active{
    background: #a63d2d;
    border-color: #a63d2d;
    color: #fff;
  }
.page-content .typing-area{
    display: block;
    width: 100%;
    min-height: 10rem;
    box-sizing: border-box;
    font-family:
      "IDC Hesperapis Web","IDC Noto Deseret Fallback",sans-serif;
    font-size: 1.45rem;
    line-height: 1.6;
    color: #2e2e2e;
    background: #fff;
    border: 1px solid #d8dedb;
    border-radius: 5px;
    padding: 1rem;
    resize: vertical;
  }
.page-content .typing-area::placeholder{
    color: #c9cfcc;
    opacity: 1;
  }
.page-content .mobile-input-proxy{
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: -1;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: .01;
    color: transparent;
    background: transparent;
    font-size: 16px;
    pointer-events: none;
  }
.page-content .typing-area:focus{
    outline: 3px solid rgba(166,61,45,.18);
    border-color: #a63d2d;
  }
.page-content .toolbar{
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1rem 0 0;
    align-items: center;
  }
.page-content .btn{
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    display: inline-block;
    border: none;
    background: #3b5d50;
    color: #fff;
    padding: .6rem 1.2rem;
    border-radius: 5px;
    font-family: Georgia, serif;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    transition: background .3s ease;
  }
.page-content .btn:hover{
    background: #2e4b41;
    color: #fff;
    text-decoration: none;
  }
.page-content .btn.secondary{
    background: #a63d2d;
  }
.page-content .btn.secondary:hover{
    background: #873124;
  }
.page-content .btn.light{
    background: #e6ebe8;
    color: #2e2e2e;
  }
.page-content .btn.light:hover{
    background: #d8dedb;
    color: #2e2e2e;
  }
.page-content .status{
    font-size: .95rem;
    color: #555;
    margin-left: .25rem;
  }
.page-content .mapping-toggle{
    margin-left: auto;
    color: #555;
    font-size: .9rem;
  }
.page-content [hidden]{ display: none !important; }
.page-content .writing-actions{ display:flex; flex-wrap:wrap; gap:.5rem; margin:1rem 0; }
.page-content .writing-actions button{ font:inherit; padding:.55rem .85rem; }
.page-content button:disabled{ opacity:.55; cursor:default; }
.page-content button:focus-visible,.page-content summary:focus-visible{ outline:2px solid #a63d2d; outline-offset:3px; }
.page-content #exercise{ scroll-margin-top:.5rem; }
.page-content #exercise.card{ padding:1rem; }
.page-content .exercise-heading-row{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:.75rem;
    margin:0 0 .15rem;
  }
.page-content #exercise-heading{
    margin:0;
    font-size:1.35rem;
    line-height:1.15;
  }
.page-content #progress{
    margin:0;
    color:#555;
    font-size:.9rem;
    line-height:1.2;
    white-space:nowrap;
  }
.page-content .writing-prompt{
    font-size:1.45rem;
    line-height:1.2;
    margin:.45rem 0 .55rem;
  }
.page-content #prompt-note{
    margin:.1rem 0 .35rem;
    color:#555;
    font-size:.88rem;
    line-height:1.3;
  }
.page-content .answer-row{
    display:flex;
    align-items:center;
    gap:.6rem;
    margin:.2rem 0;
  }
.page-content #answer-label{
    flex:0 0 auto;
    font-size:.92rem;
  }
.page-content .deseret-text{ font-family:"IDC Hesperapis Web","IDC Noto Deseret Fallback",sans-serif; font-size:1.6rem; overflow-wrap:anywhere; }
.page-content #feedback:empty{ display:none; }
.page-content #exercise .writing-actions{
    gap:.35rem;
    margin:.4rem 0;
  }
.page-content #exercise .writing-actions button{
    padding:.4rem .7rem;
  }
.page-content #keyboardPanel{
    max-width:100%;
    box-sizing:border-box;
    padding:.4rem;
    box-shadow:none;
    margin:.35rem 0 .2rem;
  }
.page-content #keyboardPanel .natural-keyboard{ min-width:0; }
.page-content #keyboardPanel .des-key{ flex-basis:2.7rem; width:2.7rem; height:2.8rem; }
.page-content #keyboardPanel .keyboard-row{ gap:.2rem; margin-top:.2rem; }
.page-content #keyboardPanel .des-glyph{ font-size:1.35rem; }
.page-content #keyboardPanel .letter-name{ font-size:.43rem; }
.page-content #deseretText{
    flex:1 1 auto;
    min-width:0;
    min-height:0;
    height:2.7rem;
    padding:.25rem .55rem;
    font-size:1.6rem;
  }
.page-content .keyboard-caption,.page-content .source-note{ font-size:.85rem; color:#555; }
.page-content .keyboard-caption{ margin:.2rem 0; line-height:1.3; }
.page-content #statusMsg{ display:block; min-height:0; }
.page-content .review-item{ border-top:1px solid #e6ebe8; padding:.75rem 0; }
.page-content .review-item p{ margin:.25rem 0; }
.page-content #sound-reference{ max-height:13rem; overflow:auto; }
.page-content .sound-chip{ display:inline-block; margin:.2rem .6rem .2rem 0; }
@media  (max-width:600px) {.page-content #exercise.card{ padding:.65rem; }
.page-content .exercise-heading-row{ gap:.45rem; }
.page-content #exercise-heading{ font-size:1.18rem; }
.page-content #progress{ font-size:.8rem; }
.page-content .writing-prompt{
      font-size:1.3rem;
      margin:.35rem 0 .45rem;
    }
.page-content #prompt-note{ font-size:.8rem; }
.page-content .answer-row{ gap:.4rem; }
.page-content #answer-label{ font-size:.82rem; }
.page-content #exercise .writing-actions{ gap:.25rem; margin:.3rem 0; }
.page-content #exercise .writing-actions button{ padding:.32rem .52rem; font-size:.88rem; }
.page-content #keyboardPanel{ padding:.3rem; margin:.25rem 0 .15rem; }
.page-content #keyboardPanel .des-key{ flex-basis:2rem; width:2rem; height:2.65rem; }
.page-content #keyboardPanel .keyboard-row{ margin-left:calc(var(--offset) / 2); gap:.15rem; margin-top:.15rem; }
.page-content #keyboardPanel .physical-label{ font-size:.48rem; }
.page-content #keyboardPanel .letter-name{ max-width:1.9rem; font-size:.38rem; }
.page-content #keyboardPanel .des-glyph{ font-size:1.2rem; }
.page-content #deseretText{ height:2.5rem; font-size:1.5rem; }
.page-content .keyboard-caption{ font-size:.78rem; }
.page-content .section{ padding:1rem; }}
.page-content .speed-options{ display:flex; flex-wrap:wrap; gap:1rem; margin:1rem 0; }
.page-content .speed-options label{ display:flex; flex:1 1 12rem; flex-direction:column; gap:.25rem; }
.page-content .speed-options select{ width:100%; box-sizing:border-box; font:inherit; padding:.5rem; border:1px solid #b8c4bd; border-radius:4px; background:#fff; color:#2e2e2e; }
.page-content #passage-text{ white-space:pre-wrap; overflow-wrap:anywhere; padding:1rem; background:#f9f8f4; border-left:4px solid #3b5d50; line-height:1.7; margin:1rem 0; }
.page-content #passage-text.deseret-text{ font-size:1.65rem; }
.page-content #deseretText.typing-area{ display:block; box-sizing:border-box; width:100%; height:8rem; min-height:6rem; resize:vertical; font-size:1.5rem; line-height:1.55; }
.page-content .speed-stats{ display:flex; flex-wrap:wrap; gap:1.5rem; font-variant-numeric:tabular-nums; margin:.7rem 0; }
.page-content .punctuation-keys{ display:flex; flex-wrap:wrap; gap:.3rem; margin:.4rem 0; }
.page-content .punctuation-keys button{ min-width:2rem; }
.page-content #answer-review,.page-content #reference-review{ white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.8; }
.page-content .answer-difference{ background:#f9dfd9; text-decoration:underline wavy #a63d2d; }
.page-content .reference-difference{ background:#e0eddf; border-bottom:2px solid #3b5d50; }
.page-content #score-summary{ font-size:1.5rem; color:#3b5d50; font-weight:bold; }
.page-content #score-dialog{ border:2px solid #3b5d50; border-radius:8px; padding:1.5rem; text-align:center; background:#f9f8f4; color:#2e2e2e; width:min(28rem,85vw); max-height:90vh; overflow:auto; box-sizing:border-box; }
.page-content #score-dialog::backdrop{ background:rgba(0,0,0,.6); }
.page-content #score-portrait{ display:block; width:auto; height:min(35vh,240px); max-width:100%; object-fit:contain; margin:1rem auto; }
.page-content #score-portrait[hidden],.page-content #portrait-fallback[hidden]{ display:none; }
.page-content #portrait-fallback{ font-size:5rem; color:#b4872c; }
.page-content #score-portrait.spinning{ animation:score-spin 2.2s cubic-bezier(.12,.5,.2,1) both; }
@keyframes score-spin { from { transform:rotate(0) scale(.55); } to { transform:rotate(1080deg) scale(1); } }
@media  (prefers-reduced-motion:reduce) {.page-content #score-portrait.spinning{ animation:none; }}
.page-content #exercise.card{ padding:.65rem .8rem; }
.page-content #exercise #passage-meta{ margin:.15rem 0; }
.page-content #exercise #entry-instruction{ margin:.25rem 0; line-height:1.35; }
.page-content #exercise #passage-text{
    margin:.4rem 0 .2rem;
    padding:.5rem .65rem;
    line-height:1.4;
    max-height:18vh;
    max-height:18dvh;
    overflow-y:auto;
    scrollbar-gutter:stable;
  }
.page-content #exercise #passage-text.deseret-text{ font-size:1.45rem; }
.page-content #exercise > .source-note{ margin:.15rem 0; line-height:1.25; }
.page-content #exercise .speed-stats{ margin:.25rem 0; gap:1rem; line-height:1.3; }
.page-content #exercise #answer-label{ display:block; margin:.1rem 0; line-height:1.25; }
.page-content #exercise #deseretText.typing-area{
    height:4.8rem;
    min-height:4rem;
    margin:0;
    padding:.3rem .5rem;
    font-size:1.4rem;
    line-height:1.4;
  }
.page-content #exercise .writing-actions{ margin:.3rem 0; }
.page-content #exercise #exercise-notice{ margin:.2rem 0; font-size:.85rem; line-height:1.25; }
.page-content #exercise #statusMsg:empty{ display:none; }
.page-content #exercise #keyboardPanel{ margin:.3rem 0 .15rem; padding:.3rem; }
.page-content #exercise .punctuation-keys,.page-content #exercise .keyboard-tools{
    display:inline-flex;
    flex-wrap:wrap;
    vertical-align:middle;
    gap:.25rem;
    margin:.2rem .5rem .1rem 0;
  }
.page-content #exercise .keyboard-caption{ margin:.15rem 0 0; }
@media  (max-height:700px) {.page-content #exercise #passage-text{ max-height:16vh; max-height:16dvh; }
.page-content #exercise #deseretText.typing-area{ height:4rem; }
.page-content #exercise #keyboardPanel .des-key{ height:2.4rem; }
.page-content #exercise #keyboardPanel .keyboard-row{ margin-top:.15rem; }}
.page-content #exercise .passage-heading-row{ display:flex; align-items:baseline; justify-content:space-between; gap:.5rem 1rem; }
.page-content #exercise .passage-heading-row #exercise-heading{ min-width:0; }
.page-content #exercise .passage-heading-row #passage-meta{ margin:0; text-align:right; flex-shrink:0; }