.sfe-app {
    --sfe-ink: #17324d;
    --sfe-muted: #5f6c7b;
    --sfe-pink: #ef476f;
    --sfe-purple: #7655d5;
    --sfe-yellow: #ffd166;
    --sfe-green: #21a179;
    --sfe-aqua: #dff8f2;
    --sfe-cream: #fffaf1;
    --sfe-border: #dfe7ec;
    box-sizing: border-box;
    width: 100%;
    max-width: 1180px;
    margin: 24px auto;
    color: var(--sfe-ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
}

.sfe-app *,
.sfe-app *::before,
.sfe-app *::after {
    box-sizing: border-box;
}

.sfe-app button,
.sfe-app input,
.sfe-app select {
    font: inherit;
}

.sfe-app button {
    cursor: pointer;
}

.sfe-hero {
    position: relative;
    overflow: hidden;
    min-height: 330px;
    padding: clamp(32px, 6vw, 72px);
    border-radius: 30px;
    color: #fff;
    background: linear-gradient(90deg, rgba(48,20,72,.92) 0%, rgba(75,32,88,.76) 48%, rgba(23,70,62,.30) 100%), url('florist-shop-hero.webp') center/cover no-repeat;
    box-shadow: 0 22px 50px rgba(66, 49, 118, .22);
}

.sfe-hero::after {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    right: -60px;
    bottom: -105px;
    border: 38px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
}

.sfe-hero-flowers {
    display: none;
    top: 34px;
    right: 42px;
    display: flex;
    gap: 10px;
    font-size: clamp(34px, 5vw, 64px);
    transform: rotate(4deg);
    filter: drop-shadow(0 8px 8px rgba(47, 31, 96, .25));
}

.sfe-hero-flowers span:nth-child(2) {
    transform: translateY(18px);
}

.sfe-eyebrow,
.sfe-kicker {
    margin: 0 0 7px;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.sfe-hero .sfe-eyebrow {
    color: #fff4b8;
}

.sfe-hero h2 {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 0 16px;
    color: #fff;
    font-size: clamp(36px, 6vw, 66px);
    line-height: 1.02;
    letter-spacing: -.04em;
}

.sfe-chinese-title {
    position: relative;
    z-index: 1;
    margin: -5px 0 10px;
    color: #fff4b8;
    font-size: clamp(20px, 3vw, 29px);
    font-weight: 800;
}

.sfe-topic-line {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 0 12px;
    color: #f7ebff;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .025em;
}

.sfe-intro {
    position: relative;
    z-index: 1;
    max-width: 690px;
    font-size: clamp(16px, 2vw, 19px);
}

.sfe-intro p {
    margin: 0 0 9px;
}

.sfe-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 10px 19px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: var(--sfe-purple);
    font-weight: 800;
    box-shadow: 0 7px 16px rgba(55, 42, 104, .16);
    transition: transform .18s ease, box-shadow .18s ease;
}

.sfe-button:hover,
.sfe-button:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(55, 42, 104, .23);
}

.sfe-button-light {
    position: relative;
    z-index: 1;
    margin-top: 15px;
    color: #51358e;
    background: #fff;
}

.sfe-button-secondary {
    color: #5b3fb0;
    background: #f1ebff;
    box-shadow: none;
}

.sfe-app button:disabled {
    cursor: not-allowed;
    opacity: .5;
}

.sfe-prepared-note {
    position: relative;
    z-index: 1;
    margin: 16px 0 0;
    color: #f8eaff;
    font-size: 13px;
    font-weight: 750;
}

.sfe-progress-card {
    display: grid;
    grid-template-columns: minmax(190px, auto) 1fr;
    gap: 22px;
    align-items: center;
    margin: -24px 28px 24px;
    padding: 20px 24px;
    border: 1px solid #edf1f4;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(30, 57, 77, .12);
    position: relative;
    z-index: 3;
}

.sfe-study-guide {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 30px;
    margin: 0 0 24px;
    padding: 24px;
    border: 1px solid #e8ddf3;
    border-radius: 21px;
    background: linear-gradient(115deg, #fff7d6, #fdeaf5 52%, #e5f8f2);
}

.sfe-study-guide h3 {
    margin: 0;
    color: var(--sfe-ink);
    font-size: 20px;
}

.sfe-study-guide p {
    margin: 4px 0 0;
}

.sfe-progress-card strong,
.sfe-progress-card span {
    display: block;
}

.sfe-progress-text {
    color: var(--sfe-muted);
    font-size: 13px;
}

.sfe-progress-track {
    height: 15px;
    overflow: hidden;
    border-radius: 999px;
    background: #ecf0f3;
}

.sfe-progress-track span {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2bc89b, #f0b835, #ef5b85);
    transition: width .35s ease;
}

.sfe-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 9px;
    padding: 8px;
    border: 1px solid var(--sfe-border);
    border-radius: 18px;
    background: #f7f9fb;
}

.sfe-section-guides {
    margin-bottom: 22px;
    padding: 22px;
    border-radius: 20px;
    background: #fff8e7;
}

.sfe-guide-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.sfe-guide-grid article {
    padding: 14px;
    border: 1px solid #f1dfb7;
    border-radius: 14px;
    background: rgba(255, 255, 255, .8);
}

.sfe-guide-grid article:nth-child(3n + 2) {
    border-color: #e4d6f3;
    background: #fbf7ff;
}

.sfe-guide-grid article:nth-child(3n + 3) {
    border-color: #cae9df;
    background: #f4fffb;
}

.sfe-guide-grid h3 {
    margin: 0 0 5px;
    color: var(--sfe-ink);
    font-size: 15px;
}

.sfe-guide-grid p {
    margin: 0;
    color: var(--sfe-muted);
    font-size: 13px;
}

.sfe-guide-grid .sfe-guide-chinese {
    margin: 0 0 7px;
    color: #c33570;
    font-size: 16px;
    font-weight: 850;
    line-height: 1.25;
}

.sfe-guide-grid .sfe-guide-chinese-description {
    margin-top: 8px;
    color: #9f315f;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.45;
}

.sfe-tab {
    min-height: 52px;
    padding: 9px 12px;
    border: 0;
    border-radius: 13px;
    color: #4b5d6f;
    background: transparent;
    font-weight: 800;
}

.sfe-tab:hover,
.sfe-tab:focus-visible {
    color: var(--sfe-purple);
    background: #fff;
}

.sfe-tab.is-active {
    color: #fff;
    background: linear-gradient(135deg, #e94b8b, #7855d8);
    box-shadow: 0 7px 18px rgba(118, 85, 213, .26);
}

.sfe-panel {
    padding: 30px 2px 12px;
}

.sfe-panel[hidden] {
    display: none !important;
}

.sfe-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
    padding: 20px;
    border-radius: 18px;
    background: linear-gradient(110deg, #fff7d6, #fde8f2 52%, #e4f7f2);
}

.sfe-toolbar label,
.sfe-game-controls label {
    color: #435569;
    font-size: 13px;
    font-weight: 800;
}

.sfe-toolbar select,
.sfe-toolbar input,
.sfe-game-controls select {
    display: block;
    width: 100%;
    min-height: 48px;
    margin-top: 5px;
    padding: 9px 13px;
    border: 2px solid rgba(118, 85, 213, .2);
    border-radius: 12px;
    color: var(--sfe-ink);
    background: #fff;
}

.sfe-toolbar select:focus,
.sfe-toolbar input:focus,
.sfe-game-controls select:focus {
    border-color: var(--sfe-purple);
    outline: 3px solid rgba(118, 85, 213, .13);
}

.sfe-word-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.sfe-word-card {
    position: relative;
    min-width: 0;
    padding: 18px;
    border: 1px solid #eadcf2;
    border-top: 6px solid var(--sfe-pink);
    border-radius: 18px;
    background: #fff9fc;
    box-shadow: 0 6px 18px rgba(30, 57, 77, .07);
    transition: transform .18s ease, box-shadow .18s ease;
}

.sfe-word-card:nth-child(4n + 2) {
    border-color: #f2df98;
    border-top-color: #e9ad19;
    background: #fffaf0;
}

.sfe-word-card:nth-child(4n + 3) {
    border-color: #bde8dc;
    border-top-color: #2ab58f;
    background: #f3fffb;
}

.sfe-word-card:nth-child(4n + 4) {
    border-color: #d8d0f4;
    border-top-color: #7655d5;
    background: #f9f7ff;
}

.sfe-word-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 11px 25px rgba(30, 57, 77, .12);
}

.sfe-word-card[hidden] {
    display: none;
}

.sfe-card-top,
.sfe-english-line {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}

.sfe-category-tag {
    overflow: hidden;
    color: #7855d5;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .06em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.sfe-english-line {
    align-items: flex-start;
    margin-top: 13px;
}

.sfe-english-line h3,
.sfe-sentence-card h3 {
    margin: 0;
    color: var(--sfe-ink);
    font-size: 20px;
    line-height: 1.24;
}

.sfe-sound,
.sfe-sentence-play {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 43px;
    height: 43px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #f04d8d, #7c58da);
    box-shadow: 0 6px 13px rgba(118, 85, 213, .24);
}

.sfe-sound:hover,
.sfe-sound:focus-visible,
.sfe-sentence-play:hover,
.sfe-sentence-play:focus-visible {
    transform: scale(1.07);
}

.sfe-sound.is-playing,
.sfe-sentence-play.is-playing,
.sfe-listen-play.is-playing {
    animation: sfe-pulse 1s infinite;
}

@keyframes sfe-pulse {
    50% { box-shadow: 0 0 0 9px rgba(239, 71, 111, .14); }
}

.sfe-chinese {
    margin: 13px 0 2px;
    color: #384d62;
    font-size: 18px;
    font-weight: 750;
}

.sfe-pinyin {
    margin: 0;
    color: var(--sfe-muted);
    font-size: 13px;
    font-style: italic;
}

.sfe-learned {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 29px;
    height: 29px;
    padding: 0;
    border: 2px solid #cfd9df;
    border-radius: 50%;
    color: transparent;
    background: #fff;
    font-weight: 900;
}

.sfe-learned:hover,
.sfe-learned:focus-visible {
    border-color: var(--sfe-green);
    color: var(--sfe-green);
}

.sfe-learned.is-learned {
    border-color: var(--sfe-green);
    color: #fff;
    background: var(--sfe-green);
}

.sfe-no-results {
    padding: 40px;
    border: 2px dashed #d8dfe5;
    border-radius: 18px;
    text-align: center;
}

.sfe-section-heading,
.sfe-game-heading {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: end;
    margin-bottom: 20px;
}

.sfe-section-heading h3,
.sfe-game-heading h3,
.sfe-weekly h3,
.sfe-safety h3 {
    margin: 0;
    color: var(--sfe-ink);
    font-size: clamp(25px, 4vw, 36px);
    line-height: 1.1;
}

.sfe-section-heading > p,
.sfe-game-heading p {
    margin: 4px 0 0;
    color: var(--sfe-muted);
}

.sfe-kicker {
    color: var(--sfe-pink) !important;
}

.sfe-sentence-list {
    display: grid;
    gap: 13px;
}

.sfe-sentence-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 17px;
    align-items: center;
    padding: 18px 20px;
    border: 1px solid #dfe8e6;
    border-radius: 17px;
    background: linear-gradient(100deg, #fff 0%, #f4fffb 100%);
    box-shadow: 0 5px 15px rgba(30, 57, 77, .06);
}

.sfe-sentence-card:nth-child(even) {
    border-color: #ebe0f3;
    background: linear-gradient(100deg, #fff 0%, #fff5fb 100%);
}

.sfe-sentence-card .sfe-chinese {
    margin-top: 7px;
}

.sfe-game-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 78px;
    height: 78px;
    border-radius: 22px;
    background: #fff1b9;
    font-size: 41px;
    transform: rotate(-4deg);
}

.sfe-game-heading {
    justify-content: flex-start;
    align-items: center;
}

.sfe-game-controls {
    display: grid;
    grid-template-columns: minmax(250px, 1fr) auto;
    gap: 14px;
    align-items: end;
    margin-bottom: 12px;
    padding: 18px;
    border-radius: 18px;
    background: var(--sfe-aqua);
}

.sfe-flip-controls {
    grid-template-columns: repeat(3, minmax(150px, 1fr)) auto;
}

.sfe-listen-controls {
    grid-template-columns: repeat(2, minmax(180px, 1fr)) auto;
}

.sfe-flash-stage {
    max-width: 760px;
    margin: 18px auto 0;
    padding: clamp(18px, 4vw, 34px);
    border: 1px solid #eadcf4;
    border-radius: 26px;
    text-align: center;
    background: linear-gradient(145deg, #fff8d9, #fff 47%, #ecfbf7);
    box-shadow: 0 14px 34px rgba(55, 42, 104, .1);
}

.sfe-flip-counter,
.sfe-listen-score {
    margin: 0 0 12px;
    color: var(--sfe-purple);
    font-size: 14px;
    font-weight: 850;
}

.sfe-flip-card {
    position: relative;
    width: 100%;
    min-height: 300px;
    perspective: 1200px;
    outline: none;
}

.sfe-flip-card:focus-visible .sfe-flip-face,
.sfe-flip-card:hover .sfe-flip-face {
    border-color: var(--sfe-purple);
    box-shadow: 0 15px 35px rgba(74, 50, 133, .18);
}

.sfe-flip-card-inner {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform .55s ease;
}

.sfe-flip-card.is-flipped .sfe-flip-card-inner {
    transform: rotateY(180deg);
}

.sfe-flip-face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 13px;
    padding: clamp(24px, 6vw, 55px);
    border: 4px solid #f2b9d0;
    border-radius: 25px;
    background: linear-gradient(145deg, #fff0f7, #fff8d6);
    box-shadow: 0 10px 28px rgba(74, 50, 133, .12);
    backface-visibility: hidden;
}

.sfe-flip-face-back {
    border-color: #9edccb;
    background: linear-gradient(145deg, #eafcf7, #f2edff);
    transform: rotateY(180deg);
}

.sfe-flip-face-label {
    color: var(--sfe-purple);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.sfe-flip-face strong {
    color: var(--sfe-ink);
    font-size: clamp(30px, 6vw, 52px);
    line-height: 1.12;
}

.sfe-flip-face-note {
    color: var(--sfe-muted);
    font-size: clamp(16px, 3vw, 22px);
    font-style: italic;
}

.sfe-flip-hint {
    margin: 13px 0;
    color: var(--sfe-muted);
    font-size: 13px;
}

.sfe-flip-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.sfe-game-status {
    min-height: 30px;
    margin: 10px 0;
    font-size: 17px;
    font-weight: 850;
    text-align: center;
}

.sfe-game-status.is-correct,
.sfe-listen-feedback.is-correct {
    color: #168063;
}

.sfe-game-status.is-wrong,
.sfe-listen-feedback.is-wrong {
    color: #cc315e;
}

.sfe-match-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px;
}

.sfe-match-card {
    min-height: 105px;
    padding: 14px;
    border: 3px solid transparent;
    border-radius: 17px;
    color: var(--sfe-ink);
    background: #fff2b9;
    font-size: 16px;
    font-weight: 850;
    line-height: 1.25;
    box-shadow: 0 6px 15px rgba(30, 57, 77, .09);
    transition: transform .15s ease, border-color .15s ease, opacity .2s ease;
}

.sfe-match-card.is-chinese {
    background: #e6dafc;
    font-size: 20px;
}

.sfe-match-card:hover,
.sfe-match-card:focus-visible,
.sfe-match-card.is-selected {
    border-color: var(--sfe-purple);
    transform: translateY(-3px);
    outline: none;
}

.sfe-match-card.is-wrong {
    border-color: var(--sfe-pink);
    animation: sfe-shake .28s linear 2;
}

.sfe-match-card.is-matched {
    border-color: var(--sfe-green);
    opacity: .38;
    pointer-events: none;
}

@keyframes sfe-shake {
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.sfe-listen-card {
    max-width: 790px;
    margin: 10px auto;
    padding: clamp(24px, 5vw, 52px);
    border: 1px solid #e9d9f1;
    border-radius: 26px;
    text-align: center;
    background: linear-gradient(145deg, #fff8dc, #fff 45%, #f8edff);
    box-shadow: 0 14px 34px rgba(55, 42, 104, .12);
}

.sfe-listen-play {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 105px;
    height: 105px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, #f14f89, #7655d5);
    box-shadow: 0 10px 24px rgba(118, 85, 213, .28);
}

.sfe-listen-play span {
    font-size: 28px;
}

.sfe-listen-play strong {
    font-size: 13px;
}

.sfe-listen-counter {
    color: var(--sfe-muted);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sfe-listen-score {
    margin: -6px 0 8px;
}

.sfe-listen-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin-top: 20px;
}

.sfe-listen-option {
    min-height: 68px;
    padding: 12px 15px;
    border: 2px solid #dcdce9;
    border-radius: 14px;
    color: var(--sfe-ink);
    background: #fff;
    font-weight: 800;
}

.sfe-listen-option:hover,
.sfe-listen-option:focus-visible {
    border-color: var(--sfe-purple);
    background: #f9f6ff;
}

.sfe-listen-option.is-correct {
    border-color: var(--sfe-green);
    color: #126b54;
    background: #e9fbf5;
}

.sfe-listen-option.is-wrong {
    border-color: var(--sfe-pink);
    color: #b5214b;
    background: #fff0f5;
}

.sfe-listen-feedback {
    min-height: 28px;
    margin: 15px 0 9px;
    font-weight: 800;
}

.sfe-safety {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    align-items: start;
    margin: 28px 0;
    padding: 24px;
    border: 2px solid #ef7b9c;
    border-radius: 20px;
    background: #fff2f6;
}

.sfe-safety > span {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 17px;
    background: #fff;
    font-size: 30px;
}

.sfe-safety h3 {
    font-size: 22px;
}

.sfe-safety p {
    margin: 8px 0 0;
}

.sfe-weekly {
    margin-top: 30px;
    padding: clamp(25px, 5vw, 46px);
    border-radius: 26px;
    background: #173b53;
    color: #fff;
}

.sfe-weekly h3 {
    color: #fff;
}

.sfe-weekly .sfe-kicker {
    color: #ffd166 !important;
}

.sfe-week-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
    margin-top: 22px;
}

.sfe-week-grid article {
    padding: 20px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .1);
}

.sfe-week-grid article:nth-child(2) { background: rgba(255, 209, 102, .16); }
.sfe-week-grid article:nth-child(3) { background: rgba(239, 71, 111, .17); }
.sfe-week-grid article:nth-child(4) { background: rgba(64, 200, 161, .17); }

.sfe-week-grid h4 {
    margin: 0 0 6px;
    color: #fff;
    font-size: 18px;
}

.sfe-week-grid p {
    margin: 0;
    color: #e9f3f7;
}

.sfe-reference-notes {
    margin-top: 22px;
    padding: 20px;
    border: 1px solid var(--sfe-border);
    border-radius: 18px;
    background: #f7fafb;
}

.sfe-language-note {
    margin: 0 0 13px;
    color: var(--sfe-muted);
    font-size: 13px;
}

.sfe-reference-notes summary {
    color: var(--sfe-ink);
    cursor: pointer;
    font-weight: 850;
}

.sfe-sources {
    padding-top: 12px;
    color: var(--sfe-muted);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.sfe-sources a {
    color: #6546bd;
}

@media (max-width: 860px) {
    .sfe-word-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sfe-match-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sfe-guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sfe-flip-controls,
    .sfe-listen-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sfe-hero-flowers { opacity: .45; }
}

@media (max-width: 640px) {
    .sfe-app { margin: 12px auto; }
    .sfe-hero { min-height: 0; padding: 34px 24px 58px; border-radius: 21px; }
    .sfe-hero h2 { max-width: 95%; font-size: 39px; }
    .sfe-hero-flowers { top: 18px; right: 14px; font-size: 34px; }
    .sfe-progress-card { grid-template-columns: 1fr; gap: 10px; margin: -25px 13px 19px; padding: 16px; }
    .sfe-study-guide,
    .sfe-guide-grid { grid-template-columns: 1fr; }
    .sfe-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sfe-toolbar,
    .sfe-word-grid,
    .sfe-game-controls,
    .sfe-listen-options,
    .sfe-week-grid { grid-template-columns: 1fr; }
    .sfe-panel { padding-top: 22px; }
    .sfe-word-card { padding: 16px; }
    .sfe-sentence-card { grid-template-columns: auto 1fr; padding: 16px; }
    .sfe-sentence-card > .sfe-learned { grid-column: 2; justify-self: end; }
    .sfe-section-heading { display: block; }
    .sfe-match-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sfe-match-card { min-height: 94px; padding: 10px; font-size: 14px; }
    .sfe-match-card.is-chinese { font-size: 18px; }
    .sfe-game-heading { align-items: flex-start; }
    .sfe-game-icon { width: 58px; height: 58px; border-radius: 16px; font-size: 30px; }
    .sfe-listen-card { padding: 25px 16px; border-radius: 20px; }
    .sfe-flash-stage { padding: 18px 12px; }
    .sfe-flip-card { min-height: 260px; }
    .sfe-flip-face { padding: 22px 14px; }
    .sfe-safety { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .sfe-app *,
    .sfe-app *::before,
    .sfe-app *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Version 1.2 flower pronunciation and bilingual learning layers. */
.sfe-english-pronunciation { display:flex; flex-wrap:wrap; align-items:baseline; gap:7px; margin:8px 0 13px; padding:9px 11px; border-radius:10px; background:#fff3c9; color:#5f3a08; }
.sfe-english-pronunciation span,
.sfe-learning-label { display:block; margin-bottom:2px; color:#6b7280; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.sfe-english-pronunciation span { margin:0; color:#81520d; }
.sfe-english-pronunciation strong { font-size:17px; letter-spacing:.02em; }
.sfe-youdao-pronunciation { display:flex; flex-wrap:wrap; gap:8px; margin:9px 0 12px; }
.sfe-pronunciation-chip { display:inline-flex; align-items:center; gap:7px; min-height:39px; padding:7px 11px; border:1px solid #e5e7eb; border-radius:999px; color:#364152; background:#f6f7f9; font-size:14px; font-weight:650; }
.sfe-pronunciation-chip:hover, .sfe-pronunciation-chip:focus-visible { border-color:#ef8bad; background:#fff4f7; }
.sfe-dialect { color:#4b5563; font-size:16px; font-weight:900; }
.sfe-mini-speaker { color:#ef476f; font-size:13px; }
.sfe-easy-pronunciation { display:flex; flex-wrap:wrap; align-items:baseline; gap:7px; margin:-3px 0 13px; color:#6b4b19; font-size:13px; }
.sfe-easy-pronunciation span { font-weight:850; }
.sfe-easy-pronunciation strong { font-size:15px; letter-spacing:.02em; }
.sfe-flower-learning-card { grid-row:span 2; }
.sfe-flower-description { margin-top:13px; padding-top:12px; border-top:1px solid rgba(26,78,97,.13); }
.sfe-flower-description p { margin:0 0 10px; line-height:1.55; }
.sfe-flower-description-zh { color:#394f5a; }
.sfe-hear-english { display:block; margin-top:10px; padding:5px 0; border:0; background:transparent; color:#176b68; font-family:inherit; font-size:12px; font-weight:800; text-align:left; cursor:pointer; }
.sfe-hear-english:hover,
.sfe-hear-english:focus-visible { color:#0b4947; text-decoration:underline; }
.sfe-hear-english:focus-visible { outline:2px solid #176b68; outline-offset:3px; }