.fg-shell { max-width: 1480px; padding: 2.5rem 2.25rem 4rem; margin: 0 auto; }
.fg-hero { padding: .35rem 0 1.8rem; }
.fg-hero .kind { margin-bottom: .7rem; }
.fg-hero h1 { font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.12; letter-spacing: -.045em; margin: 0 0 .8rem; }
.fg-intro { font-size: 1.08rem; color: var(--muted); line-height: 1.6; margin: 0 0 1rem; max-width: 55rem; }
.fg-page-links { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font-size: .85rem; }
.fg-status { margin: 1.15rem 0 0; font-size: .84rem; color: var(--muted); }
.fg-controls { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.1rem 0 .4rem; margin-bottom: 2rem; }
.fg-control-top, .fg-control-bottom { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; }
.fg-layout { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 9px; padding: 3px; gap: 3px; background: var(--surface); }
.fg-layout button { border: 0; border-radius: 6px; padding: .62rem 1rem; background: transparent; color: var(--muted); font: inherit; font-size: .88rem; cursor: pointer; }
.fg-layout button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.fg-control-caption { font-size: .82rem; color: var(--muted); margin: .25rem 0; }
.fg-filter-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, .35fr); gap: 1rem; margin-top: 1.2rem; }
.fg-shell label { display: block; color: var(--muted); font-size: .77rem; margin-bottom: .3rem; }
.fg-shell input, .fg-shell select { width: 100%; min-height: 42px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 7px; padding: .55rem .75rem; color: var(--ink); font: inherit; font-size: .88rem; }
.fg-control-bottom p { color: var(--muted); font-size: .8rem; margin: .85rem 0 .6rem; }
.fg-text-button { border: 0; background: none; color: var(--link); font: inherit; cursor: pointer; padding: .4rem 0; font-size: .85rem; }
.fg-shell :is(button, input, select, a):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.fg-region { --fg-color: #536678; --fg-tint: #eef2f6; --fg-border: #c6d0dc; }
.fg-region[data-region="cyclic"] { --fg-color: #8b6016; --fg-tint: #fff7df; --fg-border: #e1cb95; }
.fg-region[data-region="alternating"] { --fg-color: #315f9a; --fg-tint: #edf3fc; --fg-border: #b6cce8; }
.fg-region[data-region="classical"] { --fg-color: #126d65; --fg-tint: #e8f6f2; --fg-border: #9accc2; }
.fg-region[data-region="exceptional"] { --fg-color: #76509b; --fg-tint: #f3edfa; --fg-border: #cebae4; }
.fg-region[data-region="sporadic"] { --fg-color: #9b4165; --fg-tint: #fbeef3; --fg-border: #e4b1c6; }
:root[data-theme="dark"] .fg-region { --fg-color: #b9c8d8; --fg-tint: #25303a; --fg-border: #485b6c; }
:root[data-theme="dark"] .fg-region[data-region="cyclic"] { --fg-color: #e7c16b; --fg-tint: #332c1a; --fg-border: #746135; }
:root[data-theme="dark"] .fg-region[data-region="alternating"] { --fg-color: #9cc4fa; --fg-tint: #1d2d43; --fg-border: #405e85; }
:root[data-theme="dark"] .fg-region[data-region="classical"] { --fg-color: #87d3c1; --fg-tint: #18362e; --fg-border: #3a7161; }
:root[data-theme="dark"] .fg-region[data-region="exceptional"] { --fg-color: #c9abe9; --fg-tint: #30233d; --fg-border: #675080; }
:root[data-theme="dark"] .fg-region[data-region="sporadic"] { --fg-color: #efabc7; --fg-tint: #3a2330; --fg-border: #895368; }
.fg-section { margin: 0 0 2rem; min-width: 0; }
.fg-section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: .7rem; margin: 0 0 .65rem; }
.fg-section h2, .fg-section h3 { margin: 0; color: var(--ink); font-size: .98rem; font-weight: 680; }
.fg-section-heading h2::before, .fg-section-heading h3::before { content: ""; display: inline-block; width: .6rem; height: .6rem; border-radius: 2px; background: var(--fg-color); margin-right: .5rem; }
.fg-section-count { font-size: .72rem; color: var(--muted); white-space: nowrap; }
.fg-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .65rem; }
.fg-grid[data-columns="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.fg-foundations { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; max-width: 720px; margin-bottom: .25rem; }
.fg-foundations .fg-grid { grid-template-columns: minmax(0, 1fr); }
.fg-foundations .fg-tile { min-height: 154px; }
.fg-tile { display: flex; flex-direction: column; align-items: stretch; position: relative; min-width: 0; min-height: 176px; border: 1px solid var(--fg-border); border-top: 3px solid var(--fg-color); border-radius: 8px; padding: .68rem .72rem .7rem; text-align: left; font: inherit; background: var(--fg-tint); color: var(--ink); cursor: pointer; transition: border-color 120ms, box-shadow 120ms, transform 120ms; }
.fg-tile:hover { border-color: var(--fg-color); box-shadow: 0 5px 15px color-mix(in srgb, var(--fg-color) 13%, transparent); transform: translateY(-2px); }
.fg-tile[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--fg-color); }
.fg-tile-top { display: flex; justify-content: space-between; gap: .3rem; min-height: 2.8em; color: var(--fg-color); font-size: .63rem; letter-spacing: .025em; line-height: 1.4; }
.fg-tile-top > span:first-child { flex-shrink: 0; }
.fg-tile-top > span:last-child { text-align: right; }
.fg-tile-symbol { display: flex; align-items: center; min-height: 47px; font-size: 1.35rem; margin: .35rem 0; color: var(--ink); }
.fg-tile-symbol .katex { font-size: 1.15em; }
.fg-tile-name { font-weight: 620; font-size: .75rem; line-height: 1.35; margin-bottom: .42rem; overflow-wrap: anywhere; }
.fg-tile-domain { font-size: .65rem; color: var(--muted); line-height: 1.4; margin-bottom: .65rem; }
.fg-tile-order { font-size: .66rem; color: var(--fg-color); line-height: 1.35; border-top: 1px solid color-mix(in srgb, var(--fg-border) 65%, transparent); padding-top: .45rem; margin-top: auto; }
.fg-tile-order .katex { font-size: 1em; }
.fg-tile-symbol > span { max-width: 100%; }
.fg-section-intro { margin: .2rem 0 1rem; font-size: .84rem; color: var(--muted); line-height: 1.55; max-width: 60rem; }
.fg-boundary { display: grid; grid-template-columns: minmax(150px, 210px) minmax(0, 1fr); align-items: center; gap: 1.2rem; border: 1px dashed var(--fg-border); border-radius: 10px; padding: 1rem; margin-top: .9rem; }
.fg-boundary .fg-tile { min-height: 170px; }
.fg-boundary h3 { font-size: .98rem; margin-bottom: .5rem; }
.fg-boundary p { color: var(--muted); font-size: .84rem; line-height: 1.6; margin: 0; max-width: 50rem; }
.fg-sporadic-heading { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: .7rem 1.2rem; border-top: 1px solid var(--line); padding-top: 1.7rem; margin-bottom: 1rem; }
.fg-sporadic-heading h2 { font-size: 1.2rem; margin: 0 0 .4rem; }
.fg-sporadic-heading p { color: var(--muted); font-size: .82rem; margin: 0; max-width: 48rem; line-height: 1.5; }
.fg-sporadic-heading select { min-width: 170px; }
.fg-cluster { margin-top: 1.4rem; }
.fg-cluster .fg-section-heading h3 { font-size: .87rem; }
.fg-cluster[data-cluster="mathieu"] { --fg-color: #9b4165; }
.fg-cluster[data-cluster="leech"] { --fg-color: #805b91; }
.fg-cluster[data-cluster="monster"] { --fg-color: #97603e; }
.fg-cluster[data-cluster="pariah"] { --fg-color: #52697c; }
:root[data-theme="dark"] .fg-cluster[data-cluster="mathieu"] { --fg-color: #efabc7; }
:root[data-theme="dark"] .fg-cluster[data-cluster="leech"] { --fg-color: #c9b0df; }
:root[data-theme="dark"] .fg-cluster[data-cluster="monster"] { --fg-color: #e3bd9d; }
:root[data-theme="dark"] .fg-cluster[data-cluster="pariah"] { --fg-color: #a9c3d9; }
.fg-all-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; }
.fg-all-grid .fg-tile { min-height: 185px; height: 100%; }
.fg-section:not(.fg-region) > .fg-section-heading h2::before { display: none; }
.fg-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; margin: 0 0 1.3rem; }
.fg-legend span { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; color: var(--muted); }
.fg-legend i { display: inline-block; width: .6rem; height: .6rem; background: var(--fg-color); border-radius: 2px; }
.fg-familiar-invitation { border: 1px solid var(--line); border-radius: 10px; padding: 1.2rem; margin: 2rem 0; background: var(--surface); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.fg-familiar-invitation p { margin: 0; font-size: .86rem; line-height: 1.5; }
.fg-familiar-invitation button { border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); color: var(--ink); padding: .6rem .9rem; font: inherit; font-size: .85rem; cursor: pointer; }
.fg-empty { border: 1px dashed var(--line-strong); background: var(--surface); border-radius: 10px; padding: 2rem; }
.fg-empty h2 { margin-top: 0; font-size: 1.1rem; }
.fg-empty p { color: var(--muted); font-size: .9rem; line-height: 1.5; }
.fg-footnote { max-width: 70rem; margin: 2rem 0 0; color: var(--muted); font-size: .78rem; line-height: 1.65; }
.fg-detail { width: min(460px, 100vw); height: 100dvh; max-height: 100dvh; max-width: 100vw; border: 0; border-left: 1px solid var(--line); padding: 0; margin: 0 0 0 auto; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); overflow-y: auto; }
.fg-detail::backdrop { background: rgb(15 27 21 / 25%); }
.fg-detail-toolbar { display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 2; padding: .8rem 1.2rem; background: var(--surface); border-bottom: 1px solid var(--line); color: var(--muted); font-size: .75rem; }
.fg-detail-toolbar > div { display: flex; gap: .3rem; }
.fg-detail-toolbar button { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; color: var(--ink); width: 35px; height: 35px; font-size: 1.15rem; cursor: pointer; }
.fg-detail-toolbar button:disabled { opacity: .4; cursor: default; }
#fg-detail-body { padding: 1.5rem 1.4rem 2rem; }
.fg-detail-region { color: var(--fg-color); text-transform: uppercase; letter-spacing: .06em; font-size: .69rem; font-weight: 650; margin: 0 0 .6rem; }
.fg-detail-symbol { font-size: 2rem; padding: .5rem 0 .9rem; overflow-x: auto; }
.fg-detail h2 { font-size: 1.45rem; margin: .2rem 0 .75rem; line-height: 1.3; letter-spacing: -.02em; }
.fg-detail h3 { font-size: .82rem; color: var(--muted); margin: 1.4rem 0 .55rem; font-weight: 600; }
.fg-detail p, .fg-detail li { font-size: .9rem; line-height: 1.65; }
.fg-detail-intro { margin-top: .4rem; }
.fg-detail-badges { display: flex; flex-wrap: wrap; gap: .4rem; margin: .8rem 0; }
.fg-detail-badges span { border: 1px solid var(--fg-border); color: var(--fg-color); background: var(--fg-tint); font-size: .69rem; border-radius: 4px; padding: .2rem .45rem; }
.fg-detail-order { background: var(--surface-subtle); padding: .9rem; border-radius: 8px; overflow-x: auto; }
.fg-exact-order { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; font-size: .8rem !important; margin: .75rem 0 0; }
.fg-detail .katex-display { margin: .4rem 0; }
.fg-detail-order .katex-display > .katex { text-align: left; }
.fg-detail .fg-math { max-width: 100%; overflow-x: auto; display: inline-block; vertical-align: middle; }
.fg-detail .fg-math-display { display: block; max-width: 100%; overflow-x: auto; }
.fg-detail ul { padding-left: 1.25rem; }
.fg-detail-links { display: flex; flex-wrap: wrap; gap: .6rem 1rem; border-top: 1px solid var(--line); padding-top: 1.1rem; margin-top: 1.5rem; font-size: .88rem; }
.fg-detail-links .fg-primary-link { display: block; flex-basis: 100%; color: var(--surface); background: var(--ink); padding: .7rem .9rem; border-radius: 7px; text-decoration: none; text-align: center; }
.fg-detail-relation { border-top: 1px solid var(--line); padding-top: .7rem; margin-top: .7rem; }
.fg-detail-relation p { margin: .3rem 0; font-size: .8rem; }
.fg-detail-relation small { color: var(--muted); }
@media (min-width: 1550px) { .fg-all-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
@media (max-width: 1100px) {
  .fg-shell { padding-left: 1.5rem; padding-right: 1.5rem; }
  .fg-grid, .fg-all-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fg-grid[data-columns="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .fg-tile { padding: .6rem; }
}
@media (max-width: 760px) {
  .fg-shell { padding: 1.5rem 1rem 3rem; }
  .fg-hero { padding-bottom: .8rem; }
  .fg-hero h1 { font-size: 1.95rem; margin-bottom: .65rem; }
  .fg-intro { font-size: .9rem; line-height: 1.45; margin-bottom: .75rem; }
  .fg-page-links { font-size: .77rem; gap: .55rem 1rem; }
  .fg-page-links a:last-child { display: none; }
  .fg-status { font-size: .73rem; line-height: 1.5; margin-top: .8rem; }
  .fg-filter-row { grid-template-columns: minmax(0, 1fr) minmax(115px, .55fr); gap: .65rem; margin-top: .9rem; }
  .fg-control-caption { display: none; }
  .fg-shell input, .fg-shell select { font-size: .8rem; padding-left: .5rem; padding-right: .5rem; }
  .fg-controls { margin-bottom: 1.4rem; }
  .fg-grid, .fg-grid[data-columns="5"], .fg-all-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .fg-foundations { gap: .8rem; }
  .fg-tile, .fg-foundations .fg-tile, .fg-all-grid .fg-tile { min-height: 172px; }
  .fg-tile-symbol { font-size: 1.13rem; min-height: 42px; }
  .fg-tile-name { font-size: .7rem; }
  .fg-tile-domain { font-size: .61rem; }
  .fg-tile-top { font-size: .59rem; }
  .fg-tile-order { font-size: .61rem; }
  .fg-section { margin-bottom: 1.4rem; }
  .fg-section h2 { font-size: .92rem; }
  .fg-boundary { grid-template-columns: minmax(125px, .7fr) minmax(0, 1fr); gap: .8rem; padding: .75rem; }
  .fg-boundary h3 { font-size: .88rem; }
  .fg-boundary p { font-size: .77rem; }
  .fg-detail { height: 92dvh; max-height: 92dvh; width: 100%; margin: auto 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; }
}
@media (max-width: 420px) {
  .fg-grid, .fg-grid[data-columns="5"], .fg-all-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  .fg-tile { min-height: 165px; }
  .fg-tile-symbol { font-size: 1.25rem; }
  .fg-tile-name { font-size: .73rem; }
  .fg-tile-domain, .fg-tile-order { font-size: .65rem; }
  .fg-section-count { font-size: .64rem; }
  .fg-layout { width: 100%; }
  .fg-layout button { flex: 1; padding: .6rem .45rem; font-size: .83rem; }
}
@media (prefers-reduced-motion: reduce) { .fg-tile { transition: none; } .fg-tile:hover { transform: none; } }