.fr-main { max-inline-size: 62rem; }
.fr-intro { margin-block: clamp(1.65rem, 5vw, 3.6rem) 1.3rem; }
.fr-intro h2 { margin: 0; font: 650 clamp(1.6rem, 2.2vw, 2.2rem)/1.2 InterStandard, sans-serif; letter-spacing: -.03em; overflow-wrap: anywhere; }
.fr-intro p { margin: .7rem 0 0; max-inline-size: 57ch; color: var(--guide-muted); font-size: 1.04rem; line-height: 1.55; }
.fr-tasks ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--guide-line); column-gap: 1.65rem; }
.fr-tasks li { border-block-end: 1px solid var(--guide-line); }
.fr-tasks a { display: flex; justify-content: space-between; align-items: center; min-block-size: 3.8rem; gap: .55rem; padding: .55rem .25rem; line-height: 1.35; }
.fr-tasks a:hover, .fr-tasks a:focus-visible { color: var(--guide-accent-dark); }
.fr-tasks small { display: block; margin-block-start: .18rem; color: var(--guide-muted); font-size: .84rem; }
.fr-tasks svg { flex: none; inline-size: 1rem; block-size: 1rem; color: var(--guide-accent-dark); }
.fr-search { max-inline-size: 38rem; margin-block: 1.65rem 0; }
.fr-search label { display: block; margin-block-end: .35rem; font-size: .9rem; font-weight: 650; }
.fr-search > div { display: flex; flex-wrap: wrap; align-items: stretch; gap: .4rem; }
.fr-search input { flex: 1 1 12rem; min-inline-size: 0; min-block-size: 2.75rem; padding: .48rem .65rem; border: 1px solid #a4a9a0; border-radius: .4rem; background: var(--guide-surface); color: var(--guide-ink); }
.fr-search button { min-block-size: 2.75rem; padding: .45rem .75rem; border: 1px solid var(--guide-accent-dark); border-radius: .4rem; background: var(--guide-accent-dark); color: #fff; font-weight: 650; }
.fr-search button:hover { background: var(--guide-accent); }
.fr-reading { margin-block: 2.35rem; line-height: 1.65; }
.fr-reading h2 { margin: 0 0 .65rem; font-size: clamp(1.5rem, 3.4vw, 2rem); line-height: 1.2; letter-spacing: -.02em; }
.fr-reading a { color: var(--guide-accent-dark); font-weight: 650; }
.fr-reading p, .fr-detail li { max-inline-size: 63ch; }
.fr-search-results { padding: 1rem; border: 1px solid var(--guide-line); border-radius: .45rem; }
.fr-search-results h2 { font-size: 1.3rem; }
.fr-search-results ul { margin-block-end: 0; }
.fr-detail { display: grid; grid-template-columns: 1.4fr .85fr; gap: 1.2rem; border-block-start: 1px solid var(--guide-line); padding-block: 1.15rem; }
.fr-detail h3 { margin: 0; font-size: 1.13rem; line-height: 1.3; }
.fr-detail ol { margin: .55rem 0 0; padding-inline-start: 1.3rem; }
.fr-detail li + li { margin-block-start: .35rem; }
.fr-screen-example { align-self: start; min-inline-size: 0; margin: 0; border: 1px solid var(--guide-line); background: var(--guide-surface); border-radius: .6rem; overflow: hidden; }
.fr-screen-example figcaption { padding: .55rem .7rem; background: var(--guide-tint); color: var(--guide-muted); font-size: .82rem; font-weight: 650; }
.fr-screen-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem; padding: .5rem .7rem; }
.fr-screen-line + .fr-screen-line { border-block-start: 1px solid var(--guide-line); }
.fr-screen-line strong { color: var(--guide-accent-dark); }
.fr-screen-line span { font-size: .91rem; }
.fr-dictionary { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: .55rem; }
.fr-dictionary > div { padding: .5rem .7rem; border: 1px solid var(--guide-line); border-radius: .4rem; }
.fr-dictionary dt { font-weight: 700; color: var(--guide-accent-dark); }
.fr-dictionary dd { margin: 0; }
@media (max-width: 38rem) {
  .fr-intro { margin-block: 1.45rem 1.05rem; }
  .fr-intro p { font-size: .98rem; }
  .fr-tasks ul { column-gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); }
  .fr-tasks small { font-size: .76rem; }
  .fr-tasks a { min-block-size: 4.7rem; }
  .fr-detail { grid-template-columns: 1fr; }
}