/* Conventional stacked fractions share the existing five-field draft packet. */
#hayato-root .fraction-notation { display:inline-grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto 2px auto; align-items:center; justify-items:stretch; row-gap:5px; min-width:1.5em; max-width:100%; padding:2px 5px; color:#24364f; font:500 25px/1.25 "Segoe UI",Meiryo,sans-serif; font-variant-numeric:tabular-nums; text-align:center; vertical-align:middle; }
#hayato-root .fraction-notation :is(.fraction-numerator,.fraction-denominator) { min-width:0; overflow-wrap:anywhere; }
#hayato-root .fraction-bar { display:block; align-self:center; width:100%; height:0; border-top:2px solid currentColor; }
#hayato-root .fraction-plain-separator,
#hayato-root .fraction-practice-input .fraction-a11y-label { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; border:0 !important; clip:rect(0,0,0,0) !important; clip-path:inset(50%) !important; overflow:hidden !important; white-space:nowrap !important; }
#hayato-root .fraction-sign { display:inline-flex; align-items:center; justify-content:center; min-width:1em; padding:0 2px; font:500 27px/1.4 "Segoe UI",Meiryo,sans-serif; color:#294369; }
#hayato-root .fraction-question-prompt { display:block; padding:18px; }
#hayato-root .fraction-question-label { display:block; margin-bottom:8px; font-size:16px; font-weight:600; }
#hayato-root .fraction-question-equation { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:18px; margin:16px 0; }
#hayato-root .fraction-question-equation .fraction-notation { font-size:34px; min-width:1.7em; }
#hayato-root .fraction-question-instruction { display:block; font-size:16px; line-height:1.85; }
#hayato-root .fraction-common-entry { display:grid; grid-template-columns:140px minmax(0,1fr); align-items:center; gap:18px; margin:4px 0 18px; }
#hayato-root .fraction-common-entry .fraction-input-item { display:block; min-width:0; }
#hayato-root .fraction-common-entry label { display:block; margin:0 0 8px; font-size:15px; line-height:1.7; }
#hayato-root .fraction-common-entry input { width:100%; min-height:50px; font-size:24px; }
#hayato-root .fraction-common-help { margin:0; font-size:14px; line-height:1.85; color:#465b76; }
#hayato-root .fraction-conversions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
#hayato-root .fraction-conversion { min-width:0; padding:14px 10px; background:#fff; border:1px solid #d0dcee; border-radius:10px; }
#hayato-root .fraction-side-label { margin:0 0 12px; color:#36516f; font-size:14px; text-align:center; }
#hayato-root .fraction-conversion-equation { display:flex; align-items:center; justify-content:center; gap:10px; min-width:0; }
#hayato-root .fraction-practice-input .fraction-notation-input { width:96px; min-width:0; max-width:100%; padding:0; row-gap:7px; }
#hayato-root .fraction-practice-input .fraction-notation-input .fraction-input-item { display:block; width:100%; min-width:0; margin:0; }
#hayato-root .fraction-practice-input .fraction-notation-input input { display:block; width:100%; min-width:0; min-height:50px; padding:8px 5px; border:1px solid #9eb4d3; border-radius:8px; background:#fff; color:#24364f; font-size:24px; line-height:1.3; text-align:center; }
#hayato-root .fraction-practice-input .fraction-shared-den { display:flex; align-items:center; justify-content:center; width:100%; min-height:50px; padding:8px 5px; background:#edf3fb; color:#294369; border:1px solid #d0dcee; border-radius:8px; font-size:24px; overflow-wrap:anywhere; }
#hayato-root .fraction-answer-expression { display:flex; justify-content:center; margin:8px 0; }
#hayato-root .fraction-practice-input .fraction-answer-stack { width:112px; }
#hayato-root .fraction-practice-input input:focus-visible { outline:3px solid #25499e; outline-offset:3px; }
#hayato-root .fraction-previous-work { white-space:normal; }
#hayato-root .fraction-previous-work p { margin:10px 0; }
#hayato-root .fraction-previous-equation { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:14px 0; }
#hayato-root .fraction-previous-equation .fraction-notation { max-width:120px; font-size:22px; }
#hayato-root .fraction-previous-label { font-size:16px; }
@media(max-width:620px) {
  #hayato-root .fraction-conversions { grid-template-columns:1fr; }
  #hayato-root .fraction-common-entry { grid-template-columns:1fr; gap:10px; }
  #hayato-root .fraction-common-entry .fraction-input-item { width:min(100%,160px); margin:0 auto; text-align:center; }
  #hayato-root .fraction-common-help { text-align:left; }
  #hayato-root .fraction-question-prompt { padding:14px; }
}
@media(forced-colors:active) {
  #hayato-root .fraction-notation,#hayato-root .fraction-sign { color:CanvasText; }
  #hayato-root .fraction-conversion,#hayato-root .fraction-practice-input .fraction-shared-den,#hayato-root .fraction-practice-input .fraction-notation-input input { color:CanvasText; background:Canvas; border-color:CanvasText; }
  #hayato-root .fraction-bar { border-color:CanvasText; }
  #hayato-root .fraction-practice-input input:focus-visible { outline-color:Highlight; }
}