:root {
--fc-ink: #ff6b7d;
--fc-ink: light-dark(#bd0323, #ff6b7d);
--fc-new: #4a4a50;
--fc-new: light-dark(#c9c9d1, #4a4a50);
--fc-learn: #ffb703;
--fc-learn-ink: #ffb703;
--fc-learn-ink: light-dark(#8a5a00, #ffb703);
--fc-learn-line: rgba(255, 183, 3, 0.55);
--fc-learn-line: light-dark(#c98a00, rgba(255, 183, 3, 0.55));
--fc-learn-wash: rgba(255, 183, 3, 0.12);
--fc-learn-wash: light-dark(rgba(255, 183, 3, 0.16), rgba(255, 183, 3, 0.12));
--fc-known: #4cc9f0;
--fc-known-ink: #4cc9f0;
--fc-known-ink: light-dark(#075e78, #4cc9f0);
--fc-known-wash: rgba(76, 201, 240, 0.14);
--fc-known-wash: light-dark(rgba(76, 201, 240, 0.16), rgba(76, 201, 240, 0.14));
--fc-card: #1c1c20;
--fc-card: light-dark(#ffffff, #1c1c20);
--fc-shadow: rgba(0, 0, 0, 0.7);
--fc-shadow: light-dark(rgba(15, 15, 20, 0.22), rgba(0, 0, 0, 0.7));
--fc-ease: cubic-bezier(.2, .8, .25, 1);
}
html.js .fc-static { display: none; }
main#main > .wrap:has(.fc) { padding-inline: clamp(20px, 3vw, 40px); }
@media (max-width: 760px) {
html.fc-stage .site-header, html.fc-stage .gn, html.fc-stage .foot, html.fc-stage .appbar, html.fc-stage .inapp { display: none; }
html.fc-stage .shell-main { padding-bottom: 0; }
html.fc-stage main#main > .wrap:has(.fc) { padding: 0; }
}
.fc { font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.fc a, .fc button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.fc a:focus-visible, .fc button:focus-visible, .fc textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fc-muted { color: var(--muted); }
p.fc-muted { margin: 0; }
.fc-toast { margin: 0; padding: 12px 16px; border-radius: 14px; background: var(--fc-known-wash); font-weight: 700; }
.fc-ell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-kicker { font-size: 12px; font-weight: 800; letter-spacing: .08em; line-height: 1.5; text-transform: uppercase; color: var(--muted); }
.fc-kicker.is-ink { color: var(--fc-ink); }
.fc-kicker.is-small { font-size: 11px; }
.fc kbd { font: inherit; font-weight: 800; }
.fc-cta {
appearance: none; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
min-height: 52px; padding: 0 26px; border: 0; border-radius: var(--radius-pill); background: var(--accent-hover); color: #fff;
font: 800 15px var(--font); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .15s;
}
.fc-cta:hover { background: var(--accent); color: #fff; }
.fc-cta.is-small { min-height: 44px; padding: 0 20px; font-size: 14px; }
.fc-pill {
appearance: none; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 44px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: transparent;
color: var(--text); font: 700 14px var(--font); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .15s;
}
.fc-pill:hover { background: var(--surface-2); color: var(--text); }
.fc-pill.is-solid { border-color: transparent; background: var(--accent-hover); color: #fff; }
.fc-pill.is-solid:hover { background: var(--accent); color: #fff; }
.fc-pill.is-small { min-height: 36px; padding: 0 14px; font-size: 13px; }
.fc-pill.is-big { min-height: 56px; padding: 0 24px; }
.fc-pill:disabled { opacity: .5; cursor: default; background: transparent; }
.fc-ghost {
appearance: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 10px; border: 0;
border-radius: var(--radius-pill); background: none; color: var(--muted); font: 700 13px var(--font); cursor: pointer;
}
.fc-ghost:hover, .fc-ghost[aria-pressed='true'] { color: var(--text); background: var(--surface-2); }
.fc-round {
appearance: none; flex: none; box-sizing: border-box; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; text-decoration: none;
}
.fc-round:hover, .fc-round[aria-expanded='true'] { background: var(--surface); }
.fc-link { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--fc-ink); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.fc-sk { display: block; border-radius: 8px; background: var(--surface-2); }
.fc-sk.is-door { flex: 999 1 560px; min-height: 330px; border-radius: 24px; }
.fc-sk.is-new { flex: 1 1 300px; min-height: 330px; border-radius: 24px; }
.fc-sk.is-card { height: 460px; border-radius: 28px; }
.fc-sk.is-card.is-phone { height: 420px; }
.fc-sk.is-line { height: 14px; border-radius: 7px; }
.fc-sk.is-line.is-short { width: 64%; }
.fc-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; max-width: 480px; margin: 0 auto; padding: clamp(40px, 10vh, 110px) 16px; }
.fc-state h2 { margin: 6px 0 0; font-size: 26px; font-weight: 800; letter-spacing: -.015em; line-height: 1.2; }
.fc-state p { margin: 0; font-size: 16px; color: var(--muted); }
.fc-state-fenn { width: 90px; height: 120px; object-fit: contain; }
.fc-state-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }
.fc-hub { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: 32px; padding: 32px 0 64px; }
.fc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.fc-head h1 { margin: 0; font-size: 36px; line-height: 1.15; }
.fc-head p { margin: 6px 0 0; font-size: 16px; color: var(--muted); }
.fc-streak { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: var(--radius-pill); background: var(--surface); font-weight: 700; font-size: 14px; white-space: nowrap; }
.fc-top { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }
.fc-door {
color-scheme: dark; position: relative; overflow: hidden; flex: 999 1 560px; min-height: 330px; box-sizing: border-box;
display: flex; flex-wrap: wrap; align-items: stretch; gap: 20px; padding: 32px; border-radius: 24px;
background: #050506; color: #f1f1f1; box-shadow: inset 0 0 0 1px #2c2c30; text-decoration: none;
}
.fc-door:hover { color: #f1f1f1; }
.fc-door-text { position: relative; z-index: 1; flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.fc-door-text .fc-kicker { color: #ff6b7d; }
.fc-door-text .fc-kicker span { color: #a8a8ad; }
.fc-door h2 { margin: 0; font-size: 36px; line-height: 1.1; }
.fc-door p { margin: 0; font-size: 15px; color: #a8a8ad; max-width: 340px; }
.fc-door-go { margin-top: auto; padding-top: 12px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.fc-door-eta { font-size: 13px; font-weight: 600; color: #a8a8ad; }
.fc-door-art { position: relative; flex: 1 1 300px; min-width: 260px; height: 266px; }
.fc-door-c3, .fc-door-c2, .fc-door-c1 { position: absolute; box-sizing: border-box; border-radius: 18px; }
.fc-door-c3 { left: 14%; right: 2%; top: 30px; height: 196px; background: #1d1d21; border: 1px solid #2c2c30; transform: rotate(7deg); }
.fc-door-c2 { left: 8%; right: 9%; top: 22px; height: 196px; background: #26262b; border: 1px solid #333336; transform: rotate(-4deg); }
.fc-door-c1 {
left: 5%; right: 13%; top: 12px; height: 200px; padding: 18px 20px 30px; background: #fff; color: #17171a;
box-shadow: 0 30px 50px -20px rgba(0, 0, 0, 0.85); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
container-type: inline-size;
}
.fc-door-c1 b { font-size: min(44px, 15cqi); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; overflow-wrap: break-word; }
.fc-door-c1 i { position: absolute; bottom: 14px; left: 0; right: 0; font-style: normal; font-size: 11px; font-weight: 700; color: #47474f; }
.fc-door-fenn { position: absolute; right: -14px; bottom: -44px; width: 106px; height: auto; }
.fc-new { flex: 1 1 300px; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; padding: 26px; border-radius: 24px; background: var(--surface); }
.fc-new h2 { margin: 0; font-size: 26px; line-height: 1.2; letter-spacing: -.01em; }
.fc-new > p { margin: 0; font-size: 14px; }
.fc-new-go { margin-top: auto; padding-top: 6px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.fc-new-left { margin: 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.fc-pro-line { color: var(--fc-ink); font-weight: 800; text-decoration: none; }
.fc-pro-line:hover { text-decoration: underline; text-underline-offset: 2px; }
.fc-newrow { flex: 1 1 100%; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; border-radius: 16px; background: var(--surface); }
.fc-newrow-in { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.fc-newrow-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fc-newrow-t b { font-size: 15px; }
.fc-newrow-t span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-newrow .fc-new-left { padding-top: 8px; }
.fc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fc-chip { max-width: 100%; box-sizing: border-box; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text); font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-chip.is-more { background: transparent; color: var(--muted); padding: 3px 4px; }
.fc-chip.is-dash { background: transparent; border: 1px dashed var(--line-strong); color: var(--muted); padding: 2px 9px; }
.fc-pick { display: flex; flex-direction: column; gap: 18px; }
.fc-pick-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.fc-pick-head h2 { margin: 0; font-size: 24px; letter-spacing: -.01em; }
.fc-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: var(--radius-pill); background: var(--surface); }
.fc-tab {
appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0;
border-radius: var(--radius-pill); background: transparent; color: var(--muted); font: 700 15px var(--font); cursor: pointer;
}
.fc-tab:hover { color: var(--text); }
.fc-tab[aria-selected='true'] { background: var(--text); color: var(--bg); }
.fc-tab-n { font-size: 12px; font-weight: 800; }
.fc-free-line { margin: 0; padding: 12px 16px; border-radius: 14px; background: var(--surface); font-size: 14px; color: var(--muted); }
.fc-free-line b { color: var(--text); }
.fc-hist { display: flex; flex-direction: column; gap: 28px; }
.fc-all { display: flex; flex-wrap: wrap; gap: 28px 36px; padding: 28px; border-radius: 24px; background: var(--surface); }
.fc-all-main { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.fc-all-main h3 { margin: 0; font-size: 24px; letter-spacing: -.01em; }
.fc-all-main p { margin: 4px 0 0; font-size: 14px; }
.fc-all-bar { display: flex; flex-direction: column; gap: 8px; }
.fc-all-go { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.fc-all-go p { margin: 0; font-size: 13px; text-align: center; }
.fc-start {
display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 26px; border-radius: var(--radius-pill);
background: var(--accent-hover); color: #fff; font: 800 16px var(--font); text-decoration: none; transition: background-color .15s;
}
.fc-start:hover { background: var(--accent); color: #fff; }
.fc-start[aria-disabled='true'] { background: var(--surface-2); color: var(--muted); }
.fc-narrow { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 18px; background: var(--bg); }
.fc-narrow-front { padding-top: 12px; border-top: 1px solid var(--line); }
.fc-opt-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fc-flab { min-width: 82px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.fc-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.fc-opt {
appearance: none; min-height: 36px; padding: 0 13px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: transparent;
color: var(--text); font: 600 13px var(--font); cursor: pointer;
}
.fc-opt:hover { background: var(--surface-2); }
.fc-opt[aria-pressed='true'] { background: var(--text); color: var(--bg); border-color: var(--text); }
.fc-opt-help { flex-basis: 100%; font-size: 12px; color: var(--muted); }
.fc-bar { display: flex; gap: 2px; height: 10px; border-radius: var(--radius-pill); overflow: hidden; background: var(--surface-2); }
.fc-bar .is-new { background: var(--fc-new); }
.fc-bar .is-learning { background: var(--fc-learn); }
.fc-bar .is-known { background: var(--fc-known); }
.fc-legend { margin: 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.fc-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; }
.fc-legend i.is-new { background: var(--fc-new); }
.fc-legend i.is-learning { background: var(--fc-learn); }
.fc-legend i.is-known { background: var(--fc-known); }
.fc-legend b { color: var(--text); }
.fc-learn-ink { color: var(--fc-learn-ink); }
.fc-known-ink { color: var(--fc-known-ink); }
.fc-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.fc-sec-head h3 { margin: 0; font-size: 20px; letter-spacing: -.01em; }
.fc-sec-head span { font-size: 13px; }
.fc-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 16px; }
.fc-tiles.is-wide { grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 18px; }
.fc-tile { min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); }
.fc-tile.is-folder { gap: 14px; padding: 20px; }
.fc-tile-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fc-tile-top > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fc-tile-top h3, .fc-tile-top h4 { margin: 0; font-size: 17px; line-height: 1.3; letter-spacing: -.01em; overflow-wrap: anywhere; }
.fc-tile-top h3 { font-size: 18px; }
.fc-tile-top .fc-muted { font-size: 13px; line-height: 1.4; }
.fc-tile-n { flex: none; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.fc-tile-bar { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; }
.fc-tile-bar .fc-bar { height: 8px; }
.fc-tile-foot { margin-top: auto; display: flex; gap: 8px 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.fc-tile.is-folder .fc-tile-foot { justify-content: flex-start; }
.fc-tile.is-folder .fc-tile-foot .fc-pill { flex: 1 1 auto; }
.fc-due { padding: 3px 10px; border-radius: var(--radius-pill); background: var(--hit-wash); color: var(--fc-ink); font-size: 12px; font-weight: 800; white-space: nowrap; }
.fc-ok { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--fc-known-ink); white-space: nowrap; }
.fc-rows { display: flex; flex-direction: column; gap: 10px; }
.fc-row { display: flex; align-items: center; gap: 12px; min-height: 60px; box-sizing: border-box; padding: 10px 14px; border-radius: 16px; background: var(--surface); color: inherit; text-decoration: none; }
.fc-row:hover { background: var(--surface-2); }
.fc-row-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fc-row-t b { font-size: 15px; }
.fc-row-t span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-row-n { flex: none; min-width: 24px; text-align: right; font-size: 15px; font-weight: 800; }
.fc-row.is-folder { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 14px; }
.fc-row-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fc-row-top b { min-width: 0; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-row .fc-bar { height: 6px; }
.fc-row > .fc-muted { font-size: 12px; }
.fc-folders { display: flex; flex-direction: column; gap: 16px; }
.fc-lib-link { align-self: flex-start; font-size: 14px; font-weight: 700; color: var(--fc-ink); text-decoration: none; }
.fc-lib-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.fc-none { display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: 20px; background: var(--surface); }
.fc-none img { flex: none; width: 72px; height: 96px; object-fit: contain; }
.fc-none p { margin: 0 0 10px; color: var(--muted); }
.fc-out { display: flex; flex-wrap: wrap; align-items: center; gap: 32px; padding: clamp(24px, 4vw, 44px); border-radius: 28px; background: var(--surface); }
.fc-out-copy { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.fc-out-copy h1 { margin: 0; font-size: clamp(26px, 3.4vw, 34px); line-height: 1.15; }
.fc-out-copy p { margin: 0; max-width: 460px; font-size: 16px; }
.fc-out-art { position: relative; flex: 1 1 260px; min-width: 220px; height: 230px; }
.fc-out-art .fc-door-c1 { box-shadow: 0 30px 50px -24px var(--fc-shadow); border: 1px solid var(--line); }
.fc-out-art .fc-door-c2 { background: var(--surface-3); border-color: var(--line-strong); }
.fc-out-art .fc-door-c1 i { position: static; font-style: italic; font-size: 14px; }
.fc-play { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; padding: 24px 0 48px; }
.fc-play-head { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.fc-play-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fc-crumb a { font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; }
.fc-crumb a:hover { color: var(--text); }
.fc-play-t h1 { margin: 2px 0 0; font-size: 28px; line-height: 1.2; overflow-wrap: anywhere; }
.fc-options { box-sizing: border-box; width: 100%; max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; border-radius: 18px; background: var(--surface); }
.fc-options .fc-flab { min-width: 92px; }
.fc-play-in { width: 100%; max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.fc-progress { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fc-count { font-size: 15px; font-weight: 800; }
.fc-tally { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; border-radius: var(--radius-pill); background: var(--surface); font-size: 13px; font-weight: 800; white-space: nowrap; }
.fc-tally.is-still { background: var(--fc-learn-wash); color: var(--fc-learn-ink); }
.fc-tally.is-know { background: var(--fc-known-wash); color: var(--fc-known-ink); }
.fc-meter { height: 4px; border-radius: var(--radius-pill); background: var(--surface-2); overflow: hidden; }
.fc-meter span { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--text); }
.fc-scene { perspective: 1800px; }
.fc-flip { position: relative; display: grid; transform-style: preserve-3d; }
.fc-flip.is-flipped { transform: rotateY(180deg); }
.fc-face {
--cm-ink: #ff6b7d; --cm-ink: light-dark(#bd0323, #ff6b7d);
grid-area: 1 / 1; position: relative; min-height: 460px; box-sizing: border-box; border-radius: 28px; background: var(--fc-card);
border: 1px solid var(--line); box-shadow: 0 34px 60px -34px var(--fc-shadow); overflow: hidden;
-webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.fc-face.is-back { transform: rotateY(180deg); }
.fc-hit { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 28px; background: transparent; cursor: pointer; }
.fc .fc-hit:focus-visible { outline: 3px solid var(--accent); outline-offset: -5px; }
.fc-face-in { position: relative; z-index: 1; box-sizing: border-box; min-height: 100%; padding: 24px 30px 20px; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.fc-face-in :is(button, a, textarea, input, label, form) { pointer-events: auto; }
.fc-face-in.is-back { gap: 14px; }
.fc-face-top { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; min-height: 40px; flex-wrap: wrap; }
.is-front .fc-face-top { flex-wrap: nowrap; }
.fc-face-top .fc-ghost { flex: none; }
.fc-face mark { margin: 0; padding: 0; background: none; color: var(--fc-ink); font-weight: 800; }
.fc-st.is-learning { color: var(--fc-learn-ink); }
.fc-st.is-new { color: var(--text); }
.fc-st.is-known { color: var(--fc-known-ink); }
.fc-st.is-miss { color: var(--fc-ink); }
.fc-front-word { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 8px 0; }
.fc-front-word.is-masked { padding: 10px 24px; gap: 12px; }
.fc-word { margin: 0; font-size: 56px; font-weight: 800; letter-spacing: -.03em; line-height: 1.08; overflow-wrap: anywhere; }
.fc-word.is-long { font-size: 40px; }
.fc-word.is-xlong { font-size: 28px; letter-spacing: -.01em; line-height: 1.25; }
.fc-word.is-back { font-size: 48px; }
.fc-pos { margin: 0; font-size: 15px; color: var(--muted); }
.fc-masked { margin: 0; max-width: 560px; font-size: 28px; font-weight: 700; letter-spacing: -.01em; line-height: 1.35; }
.fc-hint { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 16px; background: var(--surface); }
.fc-hint p { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.5; }
.fc-hint .fc-muted { font-size: 12px; }
.fc-flip-say { margin: auto 0 0; padding-top: 12px; text-align: center; font-size: 12px; font-weight: 600; color: var(--muted); }
.fc-back-meta { font-size: 14px; color: var(--muted); }
.fc-back-w { color: var(--text); font-weight: 800; }
.fc-left { margin-left: 8px; display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text); font-size: 11px; font-weight: 800; letter-spacing: .02em; text-transform: none; vertical-align: 1px; }
.fc-meaning { margin: 0; max-width: 660px; font-size: 26px; font-weight: 600; line-height: 1.4; }
.fc-meaning.is-small { font-size: 20px; }
.fc-line { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); overflow-wrap: break-word; }
.fc-bigline { margin: 0; max-width: 660px; font-size: 24px; font-weight: 700; line-height: 1.45; overflow-wrap: break-word; }
.fc-prompt { margin: 0; font-size: 15px; color: var(--muted); }
.fc-note-big {
align-self: flex-start; max-width: 100%; margin: 0; padding: 0; border: 0; background: none; color: var(--text); text-align: left;
font: 700 28px/1.35 var(--font); white-space: pre-line; overflow-wrap: anywhere; cursor: text;
}
.fc-note { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.fc-note-show {
align-self: flex-start; max-width: 100%; padding: 0; border: 0; background: none; color: var(--text); text-align: left;
font: 700 20px/1.4 var(--font); white-space: pre-line; overflow-wrap: anywhere; cursor: text;
}
.fc-note-add {
align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin-left: -10px; padding: 8px 10px; border: 0;
border-radius: var(--radius-pill); background: none; color: var(--muted); font: 700 13px var(--font); text-align: left; cursor: pointer;
}
.fc-note-add:hover { color: var(--text); background: var(--surface-2); }
.fc-note-add svg { flex: none; }
.fc-note-edit { display: flex; flex-direction: column; gap: 8px; }
.fc-note-edit textarea {
box-sizing: border-box; width: 100%; min-height: 64px; resize: vertical; padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--line-strong);
background: var(--bg); color: var(--text); font: 600 16px/1.45 var(--font);
}
.fc-note-edit textarea:focus { border-color: var(--accent); }
.fc-note-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fc-note-hint { font-size: 12px; color: var(--muted); }
.fc-ask {
align-self: flex-start; min-height: 36px; padding: 6px 0; border: 0; background: none; color: var(--fc-ink); text-align: left;
font: 800 13px/1.4 var(--font); cursor: pointer;
}
.fc-ask:hover { text-decoration: underline; text-underline-offset: 2px; }
.fc-zero { margin: 0; font-size: 14px; color: var(--muted); }
.fc-reading { display: flex; flex-direction: column; gap: 8px; max-width: 520px; }
.fc-reading > span:last-child { font-size: 12px; font-weight: 700; color: var(--muted); }
.fc-error { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.fc-error p { margin: 0; font-size: 14px; color: var(--muted); }
.fc-limit { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 18px; border-radius: 16px; background: var(--surface); }
.fc-limit b { font-size: 16px; }
.fc-limit p { margin: 0; font-size: 14px; }
.fc-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.fc-foot .cm-f { flex: 1 1 auto; justify-content: flex-start; font-size: 12px; }
.fc-clips { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; color: var(--fc-ink); font-size: 13px; font-weight: 800; text-decoration: none; }
.fc-clips:hover { text-decoration: underline; text-underline-offset: 2px; }
.fc-grades { display: flex; gap: 14px; }
.fc-grade {
appearance: none; flex: 1 1 0; min-width: 0; min-height: 60px; padding: 0 20px; border-radius: var(--radius-pill);
display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 800 16px var(--font); cursor: pointer;
}
.fc-grade.is-still { border: 1.5px solid var(--fc-learn-line); background: transparent; color: var(--fc-learn-ink); }
.fc-grade.is-still:hover { background: var(--fc-learn-wash); }
.fc-grade.is-know { border: 0; background: var(--text); color: var(--bg); }
.fc-key { font-size: 12px; font-weight: 600; opacity: .8; }
.fc-keys { margin: 0; text-align: center; font-size: 12px; line-height: 1.6; color: var(--muted); }
.fc-done { box-sizing: border-box; width: 100%; max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.fc-done-fenn { width: 106px; height: 140px; object-fit: contain; }
.fc-done h2 { margin: 0; font-size: 36px; line-height: 1.1; }
.fc-done h2:focus { outline: none; }
.fc-done-line { margin: 10px 0 0; font-size: 17px; color: var(--muted); }
.fc-tallies, .fc-done-go { display: flex; gap: 10px 12px; flex-wrap: wrap; justify-content: center; align-items: center; }
.fc-offer { box-sizing: border-box; width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px; border-radius: 20px; background: var(--surface); text-align: left; }
.fc-offer h3 { margin: 0; font-size: 20px; letter-spacing: -.01em; }
.fc-offer p { margin: 0; font-size: 15px; max-width: 600px; }
.fc-offer-go { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; font-size: 13px; }
.fc-offer-go a:not(.fc-cta) { color: var(--fc-ink); font-weight: 700; }
.fc-offer .fc-ghost { margin-left: -10px; }
.fc-back-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; font-size: 14px; font-weight: 700; color: var(--muted); text-decoration: none; }
.fc-back-link:hover { color: var(--text); }
@media (max-width: 760px) {
.fc-hub { gap: 18px; padding: 16px 0 32px; }
.fc-head h1 { font-size: 28px; }
.fc-head p { font-size: 14px; margin-top: 4px; }
.fc-head { align-items: flex-start; flex-wrap: nowrap; }
.fc-streak { padding: 6px 10px; font-size: 13px; gap: 6px; }
.fc-top { gap: 12px; }
.fc-door { flex-wrap: nowrap; min-height: 150px; padding: 18px; gap: 12px; border-radius: 20px; }
.fc-door-text { flex: 1 1 auto; gap: 6px; }
.fc-door-text .fc-kicker { font-size: 11px; }
.fc-door h2 { font-size: 26px; }
.fc-door p { font-size: 12px; }
.fc-door .fc-cta { min-height: 44px; padding: 0 18px; font-size: 14px; }
.fc-door-art { flex: 0 0 118px; min-width: 0; height: 130px; }
.fc-door-c3 { display: none; }
.fc-door-c2 { left: 10px; right: -6px; top: 10px; height: 118px; border-radius: 14px; transform: rotate(7deg); }
.fc-door-c1 { left: 0; right: 4px; top: 4px; height: 118px; padding: 10px 8px 22px; border-radius: 14px; transform: rotate(-3deg); }
.fc-door-c1 b { font-size: min(24px, 16cqi); }
.fc-door-c1 i { bottom: 8px; font-size: 9px; }
.fc-pick { gap: 12px; }
.fc-pick-head h2 { font-size: 18px; }
.fc-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; box-sizing: border-box; }
.fc-tab { min-height: 40px; font-size: 13px; }
.fc-free-line { font-size: 13px; padding: 10px 14px; }
.fc-hist { gap: 18px; }
.fc-all { padding: 14px; gap: 14px; border-radius: 18px; }
.fc-all-main { gap: 10px; }
.fc-all-main h3 { font-size: 16px; }
.fc-all-main p { font-size: 13px; }
.fc-all .fc-bar { height: 6px; }
.fc-start { min-height: 46px; font-size: 14px; }
.fc-narrow { padding: 14px; flex-basis: 100%; }
.fc-flab { min-width: 0; flex-basis: 100%; }
.fc-opt { min-height: 40px; }
.fc-sec-head { margin-bottom: 10px; }
.fc-sec-head h3 { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fc-play { min-height: 100dvh; box-sizing: border-box; gap: 10px; padding: 10px 16px 16px; overflow-x: clip; }
.fc-play-head { flex-wrap: nowrap; gap: 12px; }
.fc-play-t b { font-size: 15px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-play-t span { font-size: 12px; color: var(--muted); }
.fc-options { padding: 14px; }
.fc-play-in { flex: 1; gap: 10px; }
.fc-tally { min-height: 30px; padding: 0 10px; font-size: 12px; gap: 6px; }
.fc-count { font-size: 14px; }
.fc-face { min-height: max(360px, calc(100dvh - 222px)); border-radius: 24px; }
.fc-hit { border-radius: 24px; }
.fc-face-in { padding: 16px 18px; }
.fc-face-top { min-height: 44px; }
.fc-word { font-size: 42px; }
.fc-word.is-long { font-size: 32px; }
.fc-word.is-xlong { font-size: 24px; }
.fc-word.is-back { font-size: 36px; }
.fc-masked { font-size: 22px; }
.fc-meaning { font-size: 21px; }
.fc-bigline { font-size: 20px; }
.fc-note-big { font-size: 22px; }
.fc-grades { gap: 10px; }
.fc-grade { min-height: 56px; padding: 0 12px; gap: 6px; font-size: 15px; }
.fc-grade .fc-key { display: none; }
.fc-done { gap: 14px; padding-top: 8px; }
.fc-done h2 { font-size: 30px; }
.fc-done-line { font-size: 15px; }
.fc-done-go { flex-direction: column; align-items: stretch; width: 100%; }
}
@keyframes fc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes fc-deal { from { opacity: 0; transform: translateX(56px) rotate(2.5deg); } to { opacity: 1; transform: none; } }
@keyframes fc-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fc-hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: no-preference) {
.fc-sk { animation: fc-pulse 1.3s ease-in-out infinite; }
.fc-flip { transition: transform .55s var(--fc-ease); }
.fc-scene { animation: fc-deal .38s var(--fc-ease); }
.fc-meter span { transition: width .3s; }
.fc-options, .fc-hint, .fc-done, .fc-offer { animation: fc-rise .35s var(--fc-ease); }
.fc-done-fenn { animation: fc-hop 1.6s ease-in-out 3; }
.fc-grade { transition: transform .12s, background-color .15s; }
.fc-grade:active { transform: scale(.97); }
.fc-door-c1, .fc-door-c2, .fc-door-fenn { transition: transform .32s cubic-bezier(.2, .9, .3, 1.2); }
a.fc-door:hover .fc-door-c1 { transform: rotate(-1.2deg) translateY(-8px); }
a.fc-door:hover .fc-door-c2 { transform: rotate(-7deg) translate(-10px, 2px); }
a.fc-door:hover .fc-door-fenn { transform: translateY(-10px); }
.fc-tile { transition: border-color .15s, transform .2s; }
.fc-tile:hover { border-color: var(--line-strong); transform: translateY(-2px); }
}