@import url("https://fonts.googleapis.com/css2?family=Oranienbaum&family=Oswald:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap");
:root { --ink: #2f2a24; --ink-2: #443e38; --muted: #6f655a; --line: #e0d4c3; --bg: #f6f1e8; --paper: #fbf8f2; --soft: #efe7da; --cream: #f3ecdf; --accent: #1c4767; --accent-dark: #143650; --accent-soft: #e3eaf0; --bronze: #8d5119; --bronze-2: #c28145; --sand: #d6c0a7; --gold: #b0893a; --warn-bg: #f7efdc; --radius: 4px; --shadow: 0 2px 3px rgba(60, 40, 20, .10), 0 12px 28px rgba(60, 40, 20, .10); --display: "Oranienbaum", "Bodoni 72", "Didot", Georgia, serif; --label: "Oswald", "Arial Narrow", sans-serif; --serif: var(--display); --sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --torn: polygon(0.0% 2px, 4.2% 1px, 8.3% 4px, 12.5% 0px, 16.7% 3px, 20.8% 2px, 25.0% 0px, 29.2% 3px, 33.3% 0px, 37.5% 3px, 41.7% 0px, 45.8% 1px, 50.0% 3px, 54.2% 5px, 58.3% 1px, 62.5% 1px, 66.7% 4px, 70.8% 6px, 75.0% 3px, 79.2% 2px, 83.3% 6px, 87.5% 0px, 91.7% 5px, 95.8% 2px, 100.0% 1px, 100.0% calc(100% - 1px), 95.8% calc(100% - 2px), 91.7% calc(100% - 5px), 87.5% calc(100% - 1px), 83.3% calc(100% - 3px), 79.2% calc(100% - 4px), 75.0% calc(100% - 2px), 70.8% calc(100% - 3px), 66.7% calc(100% - 0px), 62.5% calc(100% - 0px), 58.3% calc(100% - 1px), 54.2% calc(100% - 4px), 50.0% calc(100% - 3px), 45.8% calc(100% - 2px), 41.7% calc(100% - 4px), 37.5% calc(100% - 3px), 33.3% calc(100% - 2px), 29.2% calc(100% - 5px), 25.0% calc(100% - 4px), 20.8% calc(100% - 1px), 16.7% calc(100% - 3px), 12.5% calc(100% - 3px), 8.3% calc(100% - 5px), 4.2% calc(100% - 4px), 0.0% calc(100% - 2px)); --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .27  0 0 0 0 .18  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); --torn-lg: polygon(0.0% 9px, 3.1% 1px, 6.2% 4px, 9.4% 7px, 12.5% 1px, 15.6% 4px, 18.8% 0px, 21.9% 6px, 25.0% 7px, 28.1% 5px, 31.2% 8px, 34.4% 3px, 37.5% 6px, 40.6% 5px, 43.8% 5px, 46.9% 4px, 50.0% 8px, 53.1% 9px, 56.2% 4px, 59.4% 6px, 62.5% 1px, 65.6% 6px, 68.8% 6px, 71.9% 9px, 75.0% 7px, 78.1% 3px, 81.2% 3px, 84.4% 6px, 87.5% 0px, 90.6% 4px, 93.8% 2px, 96.9% 1px, 100.0% 1px, 100.0% calc(100% - 7px), 96.9% calc(100% - 1px), 93.8% calc(100% - 2px), 90.6% calc(100% - 4px), 87.5% calc(100% - 8px), 84.4% calc(100% - 1px), 81.2% calc(100% - 4px), 78.1% calc(100% - 5px), 75.0% calc(100% - 8px), 71.9% calc(100% - 7px), 68.8% calc(100% - 8px), 65.6% calc(100% - 3px), 62.5% calc(100% - 4px), 59.4% calc(100% - 3px), 56.2% calc(100% - 8px), 53.1% calc(100% - 9px), 50.0% calc(100% - 1px), 46.9% calc(100% - 2px), 43.8% calc(100% - 2px), 40.6% calc(100% - 2px), 37.5% calc(100% - 4px), 34.4% calc(100% - 5px), 31.2% calc(100% - 2px), 28.1% calc(100% - 0px), 25.0% calc(100% - 4px), 21.9% calc(100% - 3px), 18.8% calc(100% - 5px), 15.6% calc(100% - 9px), 12.5% calc(100% - 6px), 9.4% calc(100% - 5px), 6.2% calc(100% - 6px), 3.1% calc(100% - 6px), 0.0% calc(100% - 0px));}
body { background-color: var(--bg); background-image: var(--noise); color: var(--ink-2); font-size: 17px;}
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(42% 30% at 92% 10%, rgba(150, 176, 194, .42), transparent 70%), radial-gradient(30% 24% at 70% 26%, rgba(214, 178, 120, .34), transparent 70%), radial-gradient(34% 30% at 4% 52%, rgba(160, 176, 146, .30), transparent 70%), radial-gradient(40% 30% at 98% 72%, rgba(196, 140, 86, .22), transparent 70%), radial-gradient(36% 26% at 12% 96%, rgba(150, 170, 190, .30), transparent 70%);}
::selection { background: var(--sand); color: var(--ink); }
a { color: var(--accent); }
a:hover { color: var(--bronze); }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; letter-spacing: .01em; line-height: 1.02; color: var(--ink); }
h1, h2 { text-transform: uppercase; }
h1 { font-size: clamp(2.8rem, 7vw, 5.2rem); font-weight: 400; color: var(--bronze); }
h1 + .lead, .hero h1 { text-wrap: balance; }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); }
h3 { font-size: 1.55rem; font-weight: 400; letter-spacing: .01em; }
:focus-visible { outline-color: var(--bronze-2); }
.eyebrow, .tag, .quiz-n { font-family: var(--label); font-weight: 500; letter-spacing: .14em;}
.eyebrow { background: var(--accent); color: #f4efe6; font-size: .8rem; padding: 6px 22px 6px 14px; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%); margin-bottom: 18px;}
.tag { color: var(--bronze); font-size: .78rem; }
.lead { color: var(--muted); }
.section { position: relative; }
.section.soft, .section.cream { background: rgba(232, 220, 200, .45); }
.section-head h2 { color: var(--ink); }
.link-more { font-family: var(--label); text-transform: uppercase; letter-spacing: .1em; font-weight: 500; color: var(--bronze); }
.btn { border-radius: 2px; font-family: var(--label); text-transform: uppercase; letter-spacing: .1em; font-weight: 500; font-size: .95rem; padding: 13px 26px; }
.btn-primary { background: var(--accent); color: #f6f1e8; box-shadow: 3px 3px 0 var(--bronze-2); transition: transform .15s, box-shadow .15s, background .15s; }
.btn-primary:hover { background: var(--accent-dark); color: #fff; transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--bronze-2); }
.btn-ghost { border-color: var(--ink-2); color: var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.site-header { background: rgba(246, 241, 232, .92); border-bottom: 1px solid var(--line); }
.brand { font-family: var(--display); text-transform: uppercase; letter-spacing: .06em; font-weight: 400; font-size: 1.5rem; }
.brand-mark { border-radius: 2px; background: var(--accent); color: #f6f1e8; font-family: var(--label); letter-spacing: .02em; box-shadow: 2px 2px 0 var(--bronze-2); }
.nav a { font-family: var(--label); text-transform: uppercase; letter-spacing: .08em; font-size: .92rem; font-weight: 400; }
.nav a:hover, .nav a[aria-current="page"] { background: transparent; color: var(--bronze); box-shadow: inset 0 -2px 0 var(--bronze-2); border-radius: 0; }
.menu summary, .lang summary { border-radius: 2px; border-color: var(--sand); background: var(--paper); font-family: var(--label); text-transform: uppercase; letter-spacing: .1em; font-weight: 500; }
.menu-panel, .lang-panel { background: var(--paper); border-color: var(--line); border-radius: 2px; }
.menu-panel a { font-family: var(--label); text-transform: uppercase; letter-spacing: .08em; }
.hero { background: transparent; border-bottom: 0; padding: 110px 0 120px; overflow: hidden; position: relative; isolation: isolate; }
.hero h1 { font-size: clamp(3rem, 6.6vw, 5.6rem); line-height: .96; }
.trust { font-family: var(--label); text-transform: uppercase; letter-spacing: .1em; font-size: .85rem; }
.trust span::before { color: var(--bronze); }
.feature-card, .post-card, .topic-card, .platform-card, .team-card, .quiz, .newsletter, .notice, .empty { position: relative; border: 0; border-radius: 0; background: transparent; box-shadow: none; isolation: isolate; filter: drop-shadow(0 6px 8px rgba(70, 45, 20, .13));}
.feature-card::before, .post-card::before, .topic-card::before, .platform-card::before, .team-card::before, .quiz::before, .newsletter::before, .notice::before, .empty::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper); clip-path: var(--torn);}
.feature-card, .post-card, .topic-card { transition: transform .25s ease, filter .25s ease; }
.feature-card:hover, .post-card:hover, .topic-card:hover { transform: rotate(-.6deg) translateY(-3px); box-shadow: none; filter: drop-shadow(0 12px 14px rgba(70, 45, 20, .17)); }
.grid > :nth-child(even):hover { transform: rotate(.6deg) translateY(-3px); }
.feature-card img, .post-card .thumb { margin: 14px 14px 0; width: calc(100% - 28px); border: 1px solid rgba(90, 60, 30, .15); }
.post-card .thumb { background: var(--soft); }
.feature-card .body, .post-card .body { padding: 18px 22px 28px; }
.feature-card h3, .post-card h3 { font-size: 1.3rem; line-height: 1.15; }
.post-card .excerpt, .feature-card p { color: var(--muted); }
.topic-card { padding: 30px 26px; }
.topic-card:hover { border-color: transparent; }
.topic-icon { border-radius: 50%; background: var(--accent); color: #f6f1e8; box-shadow: 2px 2px 0 var(--bronze-2); }
.topic-card h3 { text-transform: uppercase; letter-spacing: .03em; }
.topic-card .count { font-family: var(--label); text-transform: uppercase; letter-spacing: .1em; color: var(--bronze); font-weight: 500; }
.platform-card { padding: 28px 24px; }
.platform-card h3 { font-family: var(--display); text-transform: uppercase; letter-spacing: .04em; font-weight: 400; font-size: 1.9rem; }
.platform-card .facts li { border-bottom-color: var(--sand); }
.platform-card .bonus { background: var(--accent); color: #f6f1e8; border-radius: 0; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%); padding: 4px 18px 4px 10px; font-family: var(--label); letter-spacing: .08em; text-transform: uppercase; font-weight: 400; }
.notice { padding: 18px 22px; color: #5a4628; }
.notice::before { background-color: var(--warn-bg); }
.team-card .role { color: var(--bronze); font-family: var(--label); text-transform: uppercase; letter-spacing: .1em; font-weight: 500; }
.newsletter { padding: 52px 44px; color: #dfe6ec; }
.newsletter::before { background: var(--accent); clip-path: var(--torn-lg); }
.newsletter h2 { color: #f6f1e8; }
.newsletter .eyebrow { background: var(--bronze-2); color: #fff !important; }
.newsletter .btn-primary { background: var(--bronze-2); box-shadow: 3px 3px 0 #0e2538; }
.newsletter .btn-primary:hover { background: var(--bronze); }
.pill, .chip { border-radius: 2px; background: var(--paper); border-color: var(--sand); font-family: var(--label); text-transform: uppercase; letter-spacing: .08em; font-weight: 400; }
.pill[aria-current="page"] { background: var(--accent); border-color: var(--accent); }
.chip:hover { background: var(--accent); color: #fff; }
.page-head { background: transparent; border-bottom: 0; padding: 64px 0 28px; }
.crumbs { font-family: var(--label); text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; }
.article-head { padding: 64px 0 30px; }
.article-head h1 { font-size: clamp(2.1rem, 5vw, 3.5rem); line-height: 1.04; text-wrap: balance; }
.article-head .meta { font-family: var(--label); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.cover img { border-radius: 0; clip-path: var(--torn-lg); background: var(--paper); }
article > .container.narrow.section { position: relative; isolation: isolate; padding: 64px clamp(20px, 5vw, 56px); margin-top: 24px; margin-bottom: 48px; max-width: 860px; }
article > .container.narrow.section::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper); clip-path: var(--torn-lg); }
.prose { color: #362f28; font-size: 1.08rem; }
.prose h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--accent); margin-top: 1.8em; }
.prose h2::before { content: ""; display: block; width: 48px; height: 3px; background: var(--bronze-2); margin-bottom: 14px; }
.prose h3 { color: var(--bronze); font-size: 1.4rem; }
.prose h4, .prose h5, .prose h6 { font-family: var(--sans); }
.prose blockquote { border-left: 0; padding: 18px 22px; background: var(--cream); border-radius: 0; font-family: var(--sans); font-size: 1rem; color: var(--ink-2); position: relative; box-shadow: inset 4px 0 0 var(--bronze-2); }
.prose figure img { border-radius: 0; }
.prose .table-wrap { border-radius: 0; border-color: var(--sand); background: #fffdf9; }
.prose td { border-bottom-color: var(--line); }
.prose tr:first-child td { background: var(--accent); color: #f6f1e8; font-family: var(--label); text-transform: uppercase; letter-spacing: .06em; font-weight: 500; }
.prose tr:first-child td strong { color: inherit; font-weight: 500; }
.prose hr { border-top: 1px dashed var(--sand); }
.article-foot { border-top: 1px dashed var(--sand); }
.quiz { padding: 40px 30px 32px; }
.quiz::before { background-color: var(--cream); clip-path: var(--torn-lg); }
.quiz-n { color: var(--bronze); }
.quiz-opt { border-radius: 2px; background: var(--paper); border-color: var(--line); }
.quiz-opt:hover:not([disabled]) { border-color: var(--accent); }
.quiz-l { background: var(--soft); }
.quiz-score { font-family: var(--display); text-transform: uppercase; letter-spacing: .04em; font-weight: 400; font-size: 1.7rem; }
.wix-form input, .wix-form textarea, .wix-form select { border-radius: 2px; border-color: var(--sand); background: #fffdf9; }
.wix-form input:focus, .wix-form textarea:focus { box-shadow: 0 0 0 3px rgba(28, 71, 103, .18); }
.form-skeleton { border-radius: 2px; background: linear-gradient(90deg, #ece3d4, #f6f0e6, #ece3d4); background-size: 200% 100%; }
.site-footer { background: #2b2621; color: #b9ad9e; position: relative; margin-top: 40px; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 14px; background: #2b2621; clip-path: polygon(0 100%, 0 60%, 3% 30%, 6% 70%, 9% 20%, 12% 55%, 15% 35%, 18% 80%, 21% 25%, 24% 60%, 27% 40%, 30% 75%, 33% 15%, 36% 55%, 39% 35%, 42% 70%, 45% 30%, 48% 60%, 51% 20%, 54% 65%, 57% 40%, 60% 80%, 63% 30%, 66% 55%, 69% 25%, 72% 70%, 75% 40%, 78% 60%, 81% 20%, 84% 65%, 87% 35%, 90% 75%, 93% 30%, 96% 55%, 100% 35%, 100% 100%); }
.site-footer a { color: #eadfce; }
.site-footer .brand-mark { background: var(--bronze-2); color: #fff; box-shadow: none; }
.footer-grid h4 { font-family: var(--label); color: var(--bronze-2); letter-spacing: .14em; font-weight: 500; }
.legal { border-top-color: #4a4138; color: #968a7c; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; }}
@media (max-width: 620px) { .hero { padding: 56px 0 64px; } .newsletter { padding: 40px 22px; } article > .container.narrow.section { padding: 44px 20px; margin-left: 8px; margin-right: 8px; width: auto; } .quiz { padding: 32px 18px 24px; }}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] .eyebrow, [dir="rtl"] .btn, [dir="rtl"] .nav a, [dir="rtl"] .brand { font-family: "Noto Sans Arabic", var(--display); letter-spacing: 0; }
[dir="rtl"] h1 { line-height: 1.3; }
[dir="rtl"] .eyebrow { padding: 6px 14px 6px 22px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10px 50%); }
[dir="rtl"] .platform-card .bonus { padding: 4px 10px 4px 18px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 8px 50%); }
[dir="rtl"] .prose blockquote { border-right: 0; padding: 18px 22px; box-shadow: inset -4px 0 0 var(--bronze-2); }
[dir="rtl"] .btn-primary { box-shadow: -3px 3px 0 var(--bronze-2); }
:root { --painting: url("https://static.wixstatic.com/media/60fc1c_c30f822741f14075a16a70070eea8089~mv2.jpg/v1/fit/w_1920,h_1600,q_80/bank-of-england-kernot.jpg"); --hall: url("https://static.wixstatic.com/media/60fc1c_094a88baf3e2407da52cf98255c9b072~mv2.jpg/v1/fit/w_1600,h_1300,q_75/bank-hall-microcosm.jpg");}
.ft-hero-art { position: absolute; z-index: -2; top: -40px; right: -4%; width: min(78%, 1100px); height: calc(100% + 80px); background: var(--painting) 60% 40% / cover no-repeat; filter: sepia(.35) saturate(.85) contrast(.95); opacity: .62; -webkit-mask-image: radial-gradient(ellipse 70% 72% at 62% 46%, #000 30%, rgba(0, 0, 0, .55) 58%, transparent 80%); mask-image: radial-gradient(ellipse 70% 72% at 62% 46%, #000 30%, rgba(0, 0, 0, .55) 58%, transparent 80%); will-change: transform; pointer-events: none;}
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(246, 241, 232, .96) 0%, rgba(246, 241, 232, .78) 38%, rgba(246, 241, 232, .1) 70%);}
[dir="rtl"] .ft-hero-art { right: auto; left: -4%; transform: scaleX(-1); }
[dir="rtl"] .hero::after { background: linear-gradient(270deg, rgba(246, 241, 232, .96) 0%, rgba(246, 241, 232, .78) 38%, rgba(246, 241, 232, .1) 70%); }
.hero .feature-card { transform: rotate(1.6deg); }
.hero .feature-card:hover { transform: rotate(0deg) translateY(-4px); }
.hero h1 .ft-w { display: inline-block; opacity: 0; translate: 0 .5em; rotate: 4deg; animation: ft-word .8s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(.35s + var(--i) * .08s); }
.ft-js .hero h1 .ft-dark { color: var(--ink); }
@keyframes ft-word { to { opacity: 1; translate: 0 0; rotate: 0deg; } }
.ft-coins { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ft-coin { position: absolute; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; filter: drop-shadow(2px 5px 5px rgba(80, 55, 15, .35)); animation: ft-float 7s ease-in-out infinite; transition: translate .5s cubic-bezier(.2, .8, .2, 1);}
.ft-coin svg { display: block; width: 100%; height: 100%; transition: transform .2s; }
.ft-coin:hover svg { transform: scale(1.12); }
.ft-coin.flip svg { animation: ft-flip .9s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes ft-float { 0%, 100% { transform: translateY(0) rotate(-10deg); } 50% { transform: translateY(-16px) rotate(12deg); } }
@keyframes ft-flip { from { transform: perspective(300px) rotateY(0) scale(1.2); } to { transform: perspective(300px) rotateY(1080deg) scale(1); } }
.hero > .container { position: relative; z-index: 1; }
@media (max-width: 860px) { .ft-coin:nth-child(2), .ft-coin:nth-child(6), .ft-coin:nth-child(7) { display: none; } .ft-coin { opacity: .9; } }
.ft-burst { position: fixed; z-index: 9999; width: 26px; height: 26px; margin: -13px 0 0 -13px; pointer-events: none; animation: ft-burst 1.2s cubic-bezier(.2, .7, .3, 1) forwards; }
.ft-burst svg { width: 100%; height: 100%; display: block; }
@keyframes ft-burst { 0% { transform: translate(0, 0) rotate(0) scale(.4); opacity: 1; } 45% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) + 140px)) rotate(var(--r)) scale(.8); opacity: 0; }}
.ft-intro { position: fixed; inset: 0; z-index: 10000; background: var(--bg) var(--noise); display: grid; place-items: center; overflow: hidden; transition: opacity .7s ease, visibility .7s; }
.ft-intro.out { opacity: 0; visibility: hidden; }
.ft-intro-title { font-family: var(--display); text-transform: uppercase; color: var(--bronze); font-size: clamp(2.6rem, 9vw, 6rem); letter-spacing: .04em; text-align: center; line-height: 1; animation: ft-word .9s .1s both; padding: 0 16px; }
.ft-intro-coin { position: absolute; top: -90px; width: calc(64px * var(--s)); height: calc(64px * var(--s)); animation: ft-drop 1.3s cubic-bezier(.5, 0, .7, 1) both; filter: drop-shadow(2px 5px 5px rgba(80, 55, 15, .35)); }
.ft-intro-coin svg { width: 100%; height: 100%; }
@keyframes ft-drop { to { transform: translateY(calc(100vh + 120px)) rotate(540deg); } }
.ft-rosette { position: absolute; z-index: -1; pointer-events: none; color: var(--bronze-2); opacity: .32; animation: ft-spin 120s linear infinite; }
.ft-rosette svg { width: 100%; height: 100%; display: block; }
.ft-ros-hero { width: 520px; height: 520px; left: -170px; bottom: -220px; opacity: .28; }
.ft-ros-sec { width: 420px; height: 420px; right: -140px; top: -60px; color: var(--accent); opacity: .18; }
.ft-ros-art { width: 460px; height: 460px; left: -230px; top: 340px; position: absolute; opacity: .2; }
article { position: relative; overflow-x: clip; }
@keyframes ft-spin { to { rotate: 360deg; } }
main > .section { overflow-x: clip; isolation: isolate; }
.ft-ribbon { position: absolute; top: 34px; right: 0; z-index: 2; background: var(--accent); color: #f6f1e8; font-family: var(--display); font-size: 1.5rem; line-height: 1; padding: 12px 26px 10px 40px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 18px 50%); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15); }
[dir="rtl"] .ft-ribbon { right: auto; left: 0; padding: 12px 40px 10px 26px; clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 50%, 100% 100%, 0 100%); }
.ft-ribbon.ft-rv { translate: 110% 0; opacity: 1; }
[dir="rtl"] .ft-ribbon.ft-rv { translate: -110% 0; }
.ft-ribbon.ft-on { translate: 0 0; }
@media (max-width: 620px) { .ft-ribbon { top: 16px; font-size: 1.15rem; padding: 9px 18px 8px 30px; } }
.ft-hall { position: absolute; inset: 0; z-index: -1; background: var(--hall) center 30% / cover no-repeat; opacity: .17; filter: sepia(.5); -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 18%, #000 70%, transparent); pointer-events: none; }
.ft-rv { opacity: 0; translate: 0 40px; rotate: -1.2deg; transition: opacity .8s ease, translate .9s cubic-bezier(.2, .8, .2, 1), rotate .9s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--rv, 0) * .09s); }
.ft-rv:nth-child(even) { rotate: 1.2deg; }
.ft-rv.ft-on { opacity: 1; translate: 0 0; rotate: 0deg; }
.post-card, .topic-card, .platform-card, .feature-card { transform-style: preserve-3d; will-change: transform; }
.post-card::after, .topic-card::after, .platform-card::after, .feature-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; clip-path: var(--torn); background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 246, 220, .55), transparent 60%); opacity: 0; transition: opacity .3s; }
.post-card:hover::after, .topic-card:hover::after, .platform-card:hover::after, .feature-card:hover::after { opacity: 1; }
.feature-card:hover, .post-card:hover, .topic-card:hover, .grid > :nth-child(even):hover { transition: transform .12s linear, filter .25s ease; }
.topic-card:hover .topic-icon { animation: ft-flip .9s cubic-bezier(.3, 1.4, .5, 1); }
.post-card .thumb img { transition: transform .6s cubic-bezier(.2, .8, .2, 1), filter .6s; filter: sepia(.15); }
.post-card:hover .thumb img { transform: scale(1.06); filter: sepia(0); }
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after { content: ""; position: absolute; top: 0; bottom: 0; width: 60px; left: var(--bx, -80px); translate: -50% 0; background: linear-gradient(90deg, transparent, rgba(255, 230, 170, .45), transparent); transition: left .1s, opacity .3s; opacity: 0; pointer-events: none; }
.btn-primary:hover::after { opacity: 1; }
.ft-progress { position: fixed; left: 0; right: 0; top: 68px; height: 3px; z-index: 49; pointer-events: none; }
.ft-progress i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--bronze), var(--bronze-2), #e2b75a); transform-origin: left; transform: scaleX(0); }
[dir="rtl"] .ft-progress i { transform-origin: right; }
.ft-progress b { position: absolute; top: -8px; width: 18px; height: 18px; left: -9px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3)); }
.ft-progress b svg { width: 100%; height: 100%; display: block; }
.brand:hover .brand-mark { animation: ft-flip .9s cubic-bezier(.3, 1.4, .5, 1); }
[dir="rtl"] .hero h1 .ft-w { rotate: 0deg; }
@media (prefers-reduced-motion: reduce) { .ft-rv { opacity: 1; translate: none; rotate: none; } .ft-rosette { animation: none; }}
@media (max-width: 620px) { .brand { font-size: 1.12rem; letter-spacing: .03em; gap: 8px; } .header-tools { gap: 6px; } .menu summary, .lang summary { padding: 7px 9px; letter-spacing: .06em; } .hero h1 { font-size: clamp(2.6rem, 12vw, 3.4rem); } }
/* ==== v4: piggy bank, action buttons, calculator, extra motion ==== */
.ft-toast { position: fixed; left: 50%; bottom: 96px; z-index: 9998; translate: -50% 20px; opacity: 0; background: var(--ink); color: #f6f1e8; font-family: var(--label); letter-spacing: .06em; text-transform: uppercase; font-size: .9rem; padding: 10px 18px; border-radius: 2px; box-shadow: 3px 3px 0 var(--bronze-2); pointer-events: none; transition: opacity .3s, translate .3s cubic-bezier(.2, .8, .2, 1); }
.ft-toast.on { opacity: 1; translate: -50% 0; }
.ft-pig { position: fixed; left: 18px; bottom: 18px; z-index: 60; display: flex; align-items: center; gap: 6px; padding: 8px 14px 8px 10px; border: 0; border-radius: 999px; background: var(--paper); color: var(--ink); box-shadow: 0 6px 18px rgba(70, 45, 20, .22), inset 0 0 0 1.5px var(--sand); cursor: pointer; font-family: var(--label); font-size: 1.05rem; letter-spacing: .04em; transition: transform .2s; }
.ft-pig:hover { transform: translateY(-3px) rotate(-3deg); }
.ft-pig svg { width: 38px; height: 31px; }
.ft-pig-body { fill: #e9a3a0; stroke: #7a3f2a; stroke-width: 1.6; }
.ft-pig-n { min-width: 1.5em; text-align: center; font-weight: 500; }
.ft-pig.wiggle { animation: ft-wiggle .6s ease; }
@keyframes ft-wiggle { 0%, 100% { transform: none; } 20% { transform: rotate(-12deg) scale(1.12); } 45% { transform: rotate(9deg) scale(1.08); } 70% { transform: rotate(-5deg); } }
.ft-pig-panel { position: fixed; left: 18px; bottom: 76px; z-index: 61; width: min(320px, calc(100vw - 36px)); padding: 26px 22px 20px; background: var(--paper); filter: drop-shadow(0 10px 22px rgba(70, 45, 20, .25)); clip-path: var(--torn-lg); animation: ft-pop .35s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes ft-pop { from { opacity: 0; transform: translateY(16px) scale(.94); } }
.ft-pig-h { font-family: var(--display); text-transform: uppercase; font-size: 1.6rem; color: var(--bronze); }
.ft-pig-big { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.ft-pig-big svg { width: 38px; height: 38px; animation: ft-float 4s ease-in-out infinite; }
.ft-pig-big b { font-family: var(--display); font-size: 2.6rem; font-weight: 400; color: var(--ink); line-height: 1; }
.ft-pig-big span { font-family: var(--label); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-size: .85rem; }
.ft-rank { display: inline-block; background: var(--accent); color: #f6f1e8; font-family: var(--label); letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; padding: 4px 18px 4px 10px; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%); }
.ft-bar { height: 8px; background: var(--soft); margin: 10px 0 6px; border-radius: 4px; overflow: hidden; }
.ft-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--bronze), #e2b75a); transition: width .6s; }
.ft-small { font-size: .85rem; color: var(--muted); margin: 6px 0; line-height: 1.5; }
.ft-reset { background: none; border: 0; padding: 4px 0; color: var(--muted); font-size: .8rem; text-decoration: underline; cursor: pointer; }
.ft-x { position: absolute; top: 10px; right: 12px; width: 30px; height: 30px; border: 0; background: none; font-size: 1.5rem; line-height: 1; color: var(--muted); cursor: pointer; }
.ft-x:hover { color: var(--ink); }
.ft-fly { position: fixed; z-index: 9999; width: 22px; height: 22px; margin: -11px 0 0 -11px; pointer-events: none; animation: ft-fly .9s cubic-bezier(.5, -.4, .6, 1) both; }
.ft-fly svg, .ft-rain svg { width: 100%; height: 100%; display: block; }
@keyframes ft-fly { 0% { transform: scale(.6); } 30% { transform: translate(calc(var(--tx) * .1), calc(var(--ty) * .1 - 60px)) scale(1.3) rotate(180deg); } 100% { transform: translate(var(--tx), var(--ty)) scale(.5) rotate(540deg); opacity: .4; } }
.ft-rain { position: fixed; top: -60px; z-index: 9999; width: calc(34px * var(--s)); height: calc(34px * var(--s)); pointer-events: none; animation: ft-rain 2.2s cubic-bezier(.4, 0, .8, 1) both; filter: drop-shadow(1px 3px 3px rgba(80, 55, 15, .3)); }
@keyframes ft-rain { to { transform: translateY(calc(100vh + 120px)) rotate(var(--r)); } }
.ft-fab { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; flex-direction: column-reverse; gap: 10px; opacity: 0; translate: 0 30px; pointer-events: none; transition: opacity .35s, translate .45s cubic-bezier(.2, 1.2, .4, 1), bottom .35s; }
.ft-fab.on { opacity: 1; translate: 0 0; pointer-events: auto; }
.ft-fab-b { position: relative; width: 50px; height: 50px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; color: #6b4a12; background: radial-gradient(circle at 35% 30%, #fff1b8, #e0b456 45%, #a87a26 85%); box-shadow: 0 4px 10px rgba(80, 55, 15, .35), inset 0 0 0 3px rgba(122, 84, 20, .35); transition: transform .25s cubic-bezier(.2, 1.4, .4, 1), translate .15s; }
.ft-fab-b svg { width: 22px; height: 22px; fill: currentColor; }
.ft-fab-b:hover { transform: scale(1.12) rotate(-12deg); }
.ft-fab-b span { position: absolute; right: calc(100% + 10px); white-space: nowrap; background: var(--ink); color: #f6f1e8; font-family: var(--label); text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; padding: 5px 10px; border-radius: 2px; opacity: 0; translate: 8px 0; transition: opacity .2s, translate .2s; pointer-events: none; }
.ft-fab-b:hover span, .ft-fab-b:focus-visible span { opacity: 1; translate: 0 0; }
.ft-fab-top { background: radial-gradient(circle at 35% 30%, #d8e6f0, #3c6a8e 45%, #143650 90%); color: #f6f1e8; box-shadow: 0 4px 10px rgba(20, 54, 80, .4), inset 0 0 0 3px rgba(255, 255, 255, .2); }
.ft-fab-top.launch { animation: ft-launch .9s cubic-bezier(.3, -.4, .6, 1); }
@keyframes ft-launch { 40% { transform: translateY(8px) scale(.9); } 70% { transform: translateY(-60px) rotate(360deg); opacity: 0; } 71% { transform: translateY(40px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.ft-fab.on .ft-fab-b { animation: ft-in .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.ft-fab.on .ft-fab-b:nth-child(2) { animation-delay: .06s; } .ft-fab.on .ft-fab-b:nth-child(3) { animation-delay: .12s; } .ft-fab.on .ft-fab-b:nth-child(4) { animation-delay: .18s; }
@keyframes ft-in { from { transform: scale(.3) rotate(-90deg); } }
.ft-has-ref .ft-fab, .ft-has-ref .ft-pig { bottom: 92px; }
.ft-has-ref .ft-pig-panel { bottom: 150px; }
.ft-refbar { position: fixed; left: 50%; bottom: 16px; z-index: 59; width: min(560px, calc(100vw - 24px)); translate: -50% 140%; display: flex; align-items: center; gap: 14px; padding: 12px 48px 12px 20px; background: var(--paper); filter: drop-shadow(0 8px 20px rgba(70, 45, 20, .28)); clip-path: var(--torn); transition: translate .5s cubic-bezier(.2, 1.2, .4, 1); }
.ft-refbar.on { translate: -50% 0; }
.ft-ref-t { flex: 1; font-family: var(--display); text-transform: uppercase; font-size: 1.35rem; color: var(--ink); line-height: 1.05; }
.ft-ref-t small { display: block; font-family: var(--sans); text-transform: none; font-size: .72rem; color: var(--muted); margin-top: 3px; }
.ft-refbar .btn { white-space: nowrap; animation: ft-pulse 2.4s ease-in-out infinite; }
.ft-refbar .ft-x { top: 50%; translate: 0 -50%; right: 10px; }
@keyframes ft-pulse { 0%, 100% { box-shadow: 3px 3px 0 var(--bronze-2); } 50% { box-shadow: 3px 3px 0 var(--bronze-2), 0 0 0 7px rgba(194, 129, 69, .22); } }
@media (max-width: 520px) { .ft-refbar { padding: 10px 40px 10px 14px; gap: 10px; } .ft-ref-t { font-size: 1.05rem; } .ft-refbar .btn { font-size: .78rem; padding: 9px 12px; white-space: normal; text-align: center; } }
.ft-calc { padding: 72px 20px; position: relative; }
.prose + .ft-calc, article .ft-calc { padding: 8px 0 24px; }
.ft-calc-in { max-width: var(--max); margin: 0 auto; padding: 44px clamp(20px, 4vw, 48px) 36px; position: relative; isolation: isolate; filter: drop-shadow(0 8px 14px rgba(70, 45, 20, .14)); }
.ft-calc-in::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--cream); clip-path: var(--torn-lg); }
article .ft-calc-in { padding: 36px 22px 28px; }
.ft-calc h2 { margin-bottom: .2em; }
.ft-calc .lead { margin-bottom: 22px; }
.ft-calc-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 36px; align-items: end; }
article .ft-calc-grid { grid-template-columns: 1fr; gap: 24px; }
@media (max-width: 760px) { .ft-calc-grid { grid-template-columns: 1fr; gap: 24px; } }
.ft-calc-ctl label { display: block; font-family: var(--label); text-transform: uppercase; letter-spacing: .1em; font-size: .85rem; color: var(--muted); margin-bottom: 20px; }
.ft-calc-ctl output { float: right; font-family: var(--display); font-size: 1.6rem; color: var(--bronze); letter-spacing: 0; line-height: 1; }
[dir="rtl"] .ft-calc-ctl output { float: left; }
.ft-calc input[type=range] { display: block; width: 100%; margin-top: 12px; -webkit-appearance: none; appearance: none; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--bronze-2), var(--sand)); outline-offset: 6px; }
.ft-calc input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1b8, #e0b456 45%, #a87a26 90%); border: 2px solid #7a5414; box-shadow: 0 3px 6px rgba(80, 55, 15, .4); cursor: grab; transition: transform .15s; }
.ft-calc input[type=range]:active::-webkit-slider-thumb { transform: scale(1.2) rotate(30deg); cursor: grabbing; }
.ft-calc input[type=range]::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1b8, #e0b456 45%, #a87a26 90%); border: 2px solid #7a5414; cursor: grab; }
.ft-rate { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ft-rate span { width: 100%; font-family: var(--label); text-transform: uppercase; letter-spacing: .1em; font-size: .85rem; color: var(--muted); }
.ft-rate button { border: 1.5px solid var(--sand); background: var(--paper); color: var(--ink); font-family: var(--label); letter-spacing: .06em; font-size: .9rem; padding: 8px 14px; border-radius: 2px; cursor: pointer; transition: all .2s; }
.ft-rate button[aria-checked="true"] { background: var(--accent); border-color: var(--accent); color: #f6f1e8; box-shadow: 2px 2px 0 var(--bronze-2); transform: translateY(-2px); }
.ft-stacks { display: flex; align-items: flex-end; gap: 3px; height: 190px; padding: 0 4px; border-bottom: 2px solid var(--sand); }
.ft-stacks span { flex: 1; min-width: 4px; border-radius: 3px 3px 0 0; background: linear-gradient(0deg, var(--accent) var(--p), #e0b456 var(--p), #c28145); transform-origin: bottom; animation: ft-grow .5s cubic-bezier(.2, 1.3, .4, 1) both; animation-delay: var(--d); }
@keyframes ft-grow { from { transform: scaleY(0); } }
.ft-total { margin-top: 14px; }
.ft-total small { display: block; font-family: var(--label); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.ft-total strong { font-family: var(--display); font-weight: 400; font-size: clamp(2.6rem, 6vw, 3.8rem); color: var(--bronze); line-height: 1; }
.ft-split { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: .92rem; color: var(--muted); margin-top: 6px; }
.ft-split b { color: var(--ink); }
.ft-split i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-inline-end: 6px; }
.ft-k1 { background: var(--accent); } .ft-k2 { background: #e0b456; }
.ft-calc .btn { margin-top: 10px; }
.site-header .header-row { transition: height .3s; }
.site-header.ft-shrink .header-row { height: 56px; }
.site-header.ft-shrink { box-shadow: 0 4px 18px rgba(70, 45, 20, .1); }
.site-header.ft-shrink ~ .ft-progress, .ft-shrink + * .ft-progress { top: 56px; }
.ft-mark { background: linear-gradient(transparent 62%, rgba(226, 183, 90, .45) 62%) no-repeat 0 0 / 0% 100%; transition: background-size 1s cubic-bezier(.2, .8, .2, 1); }
[dir="rtl"] .ft-mark { background-position: 100% 0; }
.ft-mark.on { background-size: 100% 100%; }
.ft-on .ft-shine, .ft-shine.ft-on { animation: ft-glint 1.6s ease .3s; }
@keyframes ft-glint { 40% { text-shadow: 0 0 18px rgba(226, 183, 90, .75), 0 0 2px rgba(226, 183, 90, .9); } }
.ft-ripple { position: fixed; z-index: 9997; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; pointer-events: none; border: 2px solid rgba(194, 129, 69, .7); animation: ft-rip .6s ease-out forwards; }
@keyframes ft-rip { to { transform: scale(7); opacity: 0; border-width: 1px; } }
[dir="rtl"] .ft-pig, [dir="rtl"] .ft-pig-panel { left: auto; right: 18px; }
[dir="rtl"] .ft-fab { right: auto; left: 18px; }
[dir="rtl"] .ft-fab-b span { right: auto; left: calc(100% + 10px); translate: -8px 0; }
[dir="rtl"] .ft-x { right: auto; left: 12px; }
[dir="rtl"] .ft-refbar { padding: 12px 20px 12px 48px; }
[dir="rtl"] .ft-refbar .ft-x { left: 10px; }
@media (max-width: 620px) { .ft-pig { left: 12px; bottom: 12px; padding: 6px 10px 6px 8px; } .ft-fab { right: 12px; bottom: 12px; } .ft-fab-b { width: 44px; height: 44px; } [dir="rtl"] .ft-pig { right: 12px; } [dir="rtl"] .ft-fab { left: 12px; } }
@media (prefers-reduced-motion: reduce) { .ft-mark { background-size: 100% 100%; } }
@media print { .ft-pig, .ft-pig-panel, .ft-fab, .ft-refbar, .ft-toast { display: none !important; } }
/* ==== v5: chapters (museum-style) ==== */
.ft-hide { display: none !important; }
.ft-chaptered .prose > .ft-ch-mark { position: relative; display: flex; flex-direction: column; align-items: center; margin: 4.2em 0 .2em; text-align: center; }
.ft-ch-wash { position: absolute; left: 50%; top: 50%; width: min(520px, 110%); height: 120px; translate: -50% -50%; z-index: -1; background: radial-gradient(closest-side, rgba(150, 176, 194, .38), transparent), radial-gradient(40% 50% at 30% 60%, rgba(214, 178, 120, .32), transparent 70%), radial-gradient(35% 45% at 72% 40%, rgba(160, 176, 146, .28), transparent 70%); filter: blur(2px); transform: scaleX(.2); opacity: 0; transition: transform 1.2s cubic-bezier(.2, .8, .2, 1), opacity 1s; }
.ft-ch-n { font-family: var(--display); font-size: 3.2rem; line-height: 1; color: var(--bronze-2); letter-spacing: .04em; }
.ft-ch-of { font-family: var(--label); text-transform: uppercase; letter-spacing: .2em; font-size: .72rem; color: var(--muted); margin-top: 4px; }
.ft-ch-of::before, .ft-ch-of::after { content: ""; display: inline-block; vertical-align: middle; width: 34px; height: 1px; background: var(--sand); margin: 0 10px; }
.ft-ch-mark .ft-ch-n, .ft-ch-mark .ft-ch-of { opacity: 0; translate: 0 18px; transition: opacity .7s, translate .8s cubic-bezier(.2, .8, .2, 1); }
.ft-ch-mark.ft-in .ft-ch-wash { transform: scaleX(1); opacity: 1; }
.ft-ch-mark.ft-in .ft-ch-n, .ft-ch-mark.ft-in .ft-ch-of { opacity: 1; translate: 0 0; }
.ft-ch-mark.ft-in .ft-ch-of { transition-delay: .15s; }
.ft-chaptered .prose > h2.ft-ch-title { text-align: center; font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1.02; margin: .15em auto .9em; max-width: 16em; text-wrap: balance; color: var(--ink); scroll-margin-top: 90px; }
.ft-chaptered .prose > h2.ft-ch-title::before { display: none; }
.ft-ch-title .ft-cw, .ft-statement .ft-cw { display: inline-block; opacity: 0; translate: 0 .55em; rotate: 3deg; transition: opacity .6s, translate .7s cubic-bezier(.2, .8, .2, 1), rotate .7s; transition-delay: calc(var(--i) * 55ms + .1s); }
.ft-ch-title.ft-in .ft-cw, .ft-statement.ft-in .ft-cw { opacity: 1; translate: 0 0; rotate: 0deg; }
.ft-ch-title .ft-key { color: var(--bronze); }
.ft-next { display: flex; align-items: center; gap: 14px; width: 100%; margin: 2.2em 0 0; padding: 16px 20px; border: 0; background: transparent; border-top: 1px dashed var(--sand); border-bottom: 1px dashed var(--sand); cursor: pointer; text-align: start; color: var(--ink); font: inherit; transition: background .2s; }
.ft-next small { font-family: var(--label); text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; color: var(--bronze); white-space: nowrap; }
.ft-next span { flex: 1; font-family: var(--display); text-transform: uppercase; font-size: 1.25rem; line-height: 1.1; }
.ft-next b { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #f6f1e8; font-weight: 400; transition: transform .3s; }
.ft-next:hover { background: rgba(226, 183, 90, .12); }
.ft-next:hover b { transform: translateY(4px); animation: ft-bob 1s ease-in-out infinite; }
@keyframes ft-bob { 50% { transform: translateY(8px); } }
@media (max-width: 520px) { .ft-next { flex-wrap: wrap; gap: 4px 12px; } .ft-next small { width: 100%; } }
.ft-chaptered .prose > p.ft-statement { margin: 1.8em auto 0; max-width: 34em; text-align: center; padding: 22px 6px 6px; position: relative; }
.ft-statement::before { content: "❦"; display: block; color: var(--bronze-2); font-size: 1.3rem; margin-bottom: 6px; }
.ft-st-label { display: block; font-family: var(--label); text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; color: var(--muted); margin-bottom: 8px; }
.ft-statement strong { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.35rem, 2.6vw, 1.8rem); line-height: 1.15; color: var(--ink); background: none !important; }
.ft-statement .ft-hl { color: var(--bronze); position: relative; }
.ft-statement .ft-hl::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .14em; background: rgba(226, 183, 90, .55); transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.2, .8, .2, 1) .8s; }
.ft-statement.ft-in .ft-hl::after { transform: scaleX(1); }
.ft-chaptered .prose > .ft-toc { margin: 2.6em 0 1em; }
.ft-toc-h { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 14px; }
.ft-toc-t { font-family: var(--display); text-transform: uppercase; font-size: 1.7rem; color: var(--ink); line-height: 1; }
.ft-toc-s { font-family: var(--label); text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; color: var(--muted); }
.ft-toc-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; }
.ft-toc-c { position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 78px; padding: 14px 14px 12px; text-decoration: none; color: var(--ink); isolation: isolate; filter: drop-shadow(0 4px 6px rgba(70, 45, 20, .12)); transition: transform .3s cubic-bezier(.2, 1.3, .4, 1), filter .3s; opacity: 0; translate: 0 22px; rotate: calc((var(--i) - 2) * .7deg); }
.ft-toc-c::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #fffdf8; clip-path: var(--torn); }
.ft-toc-c:nth-child(odd) { rotate: -1deg; } .ft-toc-c:nth-child(3n) { rotate: 1.2deg; }
.ft-toc.ft-in .ft-toc-c { opacity: 1; translate: 0 0; transition: opacity .5s, translate .6s cubic-bezier(.2, 1.2, .4, 1), transform .3s; transition-delay: calc(var(--i) * 45ms); }
.ft-toc-c:hover { transform: translateY(-5px) rotate(-1.5deg) scale(1.03); filter: drop-shadow(0 10px 14px rgba(70, 45, 20, .18)); color: var(--ink); }
.ft-toc-n { font-family: var(--display); font-size: 1.6rem; color: var(--bronze-2); line-height: 1; }
.ft-toc-x { font-size: .9rem; line-height: 1.3; font-weight: 600; }
.ft-tick { position: absolute; top: 10px; right: 12px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .75rem; background: var(--accent); color: #fff; transform: scale(0); transition: transform .4s cubic-bezier(.2, 1.6, .4, 1); }
[dir="rtl"] .ft-tick { right: auto; left: 12px; }
.ft-toc-c.read .ft-tick { transform: scale(1); }
.ft-toc-c.read .ft-toc-x { color: var(--muted); }
@media (max-width: 620px) { .ft-toc-g { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 4px 14px; margin: 0 -4px; } .ft-toc-c { flex: 0 0 62%; scroll-snap-align: start; } }
.ft-has-bubble { position: relative; }
.ft-bubble { position: absolute; z-index: 3; top: -18px; right: -6px; font-family: "Caveat", "Comic Sans MS", cursive; font-weight: 600; font-size: 1.35rem; line-height: 1; text-transform: none; letter-spacing: 0; color: var(--ink); background: #fffdf8; padding: 10px 16px 12px; border-radius: 48% 52% 44% 56% / 58% 46% 54% 42%; box-shadow: 0 4px 10px rgba(70, 45, 20, .16), inset 0 0 0 1.5px rgba(70, 45, 20, .35); rotate: 5deg; white-space: nowrap; pointer-events: none; animation: ft-bub 4s ease-in-out infinite; }
.ft-bubble::after { content: ""; position: absolute; bottom: -9px; left: 26px; width: 16px; height: 14px; background: #fffdf8; clip-path: polygon(0 0, 100% 0, 10% 100%); filter: drop-shadow(1px 1px 0 rgba(70, 45, 20, .35)); }
.ft-bubble-l { right: auto; left: -8px; rotate: -5deg; }
[dir="rtl"] .ft-bubble { right: auto; left: -6px; } [dir="rtl"] .ft-bubble-l { left: auto; right: -8px; }
@keyframes ft-bub { 50% { translate: 0 -5px; } }
.ft-tbl-note { position: relative; height: 1px; }
.ft-tbl-note .ft-bubble { top: -6px; }
.quiz h2.ft-has-bubble .ft-bubble { top: -34px; right: 0; }
.ft-toc-h .ft-bubble { top: -40px; right: 0; }
figure.ft-has-bubble .ft-bubble { top: -12px; }
@media (max-width: 620px) { .ft-bubble { font-size: 1.15rem; padding: 7px 12px 9px; } }
.ft-rail { position: fixed; left: 22px; top: 50%; z-index: 40; translate: -30px -50%; opacity: 0; display: flex; flex-direction: column; gap: 4px; padding: 10px 0; transition: opacity .4s, translate .5s cubic-bezier(.2, 1.2, .4, 1); pointer-events: none; }
.ft-rail::before { content: ""; position: absolute; left: 7px; top: 14px; bottom: 14px; width: 1px; background: var(--sand); }
.ft-rail.on { opacity: 1; translate: 0 -50%; pointer-events: auto; }
.ft-rail a { position: relative; display: flex; align-items: center; height: 22px; text-decoration: none; }
.ft-rail i { width: 15px; height: 15px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--bronze-2); transition: transform .3s cubic-bezier(.2, 1.6, .4, 1), background .3s; }
.ft-rail a.read i { background: var(--bronze-2); transform: scale(.7); }
.ft-rail a.cur i { background: radial-gradient(circle at 35% 30%, #fff1b8, #e0b456 45%, #a87a26 90%); transform: scale(1.35); box-shadow: 0 0 0 4px rgba(226, 183, 90, .25); }
.ft-rail span { position: absolute; left: 26px; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; background: var(--ink); color: #f6f1e8; font-family: var(--label); letter-spacing: .06em; text-transform: uppercase; font-size: .72rem; padding: 4px 10px; border-radius: 2px; opacity: 0; translate: -6px 0; transition: opacity .2s, translate .2s; pointer-events: none; }
.ft-rail a:hover span, .ft-rail a:focus-visible span { opacity: 1; translate: 0 0; }
.ft-rail a:hover i { transform: scale(1.4); }
[dir="rtl"] .ft-rail { left: auto; right: 22px; translate: 30px -50%; }
[dir="rtl"] .ft-rail.on { translate: 0 -50%; }
[dir="rtl"] .ft-rail::before { left: auto; right: 7px; }
[dir="rtl"] .ft-rail span { left: auto; right: 26px; }
@media (max-width: 1240px) { .ft-rail { display: none; } }
.ft-flag { position: fixed; right: 0; top: 104px; z-index: 45; display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 4px; padding: 10px 18px 9px 30px; border: 0; cursor: pointer; background: var(--accent); color: #f6f1e8; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 16px 50%); translate: 110% 0; transition: translate .5s cubic-bezier(.2, 1.2, .4, 1), background .2s; text-align: start; }
.ft-flag.on { translate: 0 0; }
.ft-flag:hover { background: var(--accent-dark); }
.ft-flag-n { font-family: var(--display); font-size: 1.9rem; line-height: 1; }
.ft-flag-of { font-family: var(--label); font-size: .8rem; opacity: .75; letter-spacing: .08em; }
.ft-flag-l { grid-column: 1 / -1; font-family: var(--label); text-transform: uppercase; letter-spacing: .1em; font-size: .62rem; opacity: .8; margin-top: 2px; }
.ft-flag.flip .ft-flag-n { animation: ft-flagflip .6s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes ft-flagflip { from { transform: perspective(200px) rotateX(-90deg); opacity: 0; } }
.site-header.ft-shrink ~ .ft-flag { top: 92px; }
[dir="rtl"] .ft-flag { right: auto; left: 0; padding: 10px 30px 9px 18px; clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%); translate: -110% 0; }
[dir="rtl"] .ft-flag.on { translate: 0 0; }
@media (max-width: 760px) { .ft-flag { top: 76px; padding: 7px 12px 6px 22px; } .ft-flag-n { font-size: 1.4rem; } .ft-flag.on:not(.peek) { translate: 110% 0; } [dir="rtl"] .ft-flag.on:not(.peek) { translate: -110% 0; } }
@media (max-width: 620px) { .ft-fab-copy { display: none; } .ft-fab-b { width: 40px; height: 40px; } .ft-fab-b svg { width: 18px; height: 18px; } .ft-fab { gap: 8px; } }
.ft-chmenu { position: fixed; inset: 0; z-index: 70; background: rgba(43, 38, 33, .45); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 16px; animation: ft-fadein .25s; }
@keyframes ft-fadein { from { opacity: 0; } }
.ft-chmenu[hidden] { display: none; }
.ft-chmenu-in { position: relative; width: min(560px, 100%); max-height: min(82vh, 760px); overflow: auto; padding: 34px 28px 24px; background: var(--paper); clip-path: var(--torn-lg); animation: ft-pop .4s cubic-bezier(.2, 1.3, .4, 1); }
.ft-chmenu-h { font-family: var(--display); text-transform: uppercase; font-size: 2.2rem; color: var(--bronze); line-height: 1; margin-bottom: 14px; }
.ft-chmenu ol { list-style: none; margin: 0; padding: 0; }
.ft-chmenu li a { display: flex; align-items: center; gap: 14px; padding: 10px 6px; border-bottom: 1px dashed var(--sand); text-decoration: none; color: var(--ink); transition: background .2s, padding .2s; }
.ft-chmenu li a:hover, .ft-chmenu li a:focus-visible { background: rgba(226, 183, 90, .14); padding-inline-start: 12px; }
.ft-chmenu li a > span:nth-child(2) { flex: 1; font-weight: 600; font-size: .98rem; }
.ft-chmenu li i { font-style: normal; font-family: var(--label); text-transform: uppercase; letter-spacing: .1em; font-size: .7rem; color: var(--accent); }
.ft-chmenu li.cur a { background: var(--accent); color: #f6f1e8; }
.ft-chmenu li.cur .ft-toc-n, .ft-chmenu li.cur i { color: #f6f1e8; }
.ft-chmenu li.read:not(.cur) a > span:nth-child(2) { color: var(--muted); }
.ft-menu-open { overflow: hidden; }
.ft-progress s { position: absolute; top: -3px; width: 2px; height: 9px; background: var(--accent); opacity: .55; text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
  .ft-ch-title .ft-cw, .ft-statement .ft-cw, .ft-toc-c, .ft-ch-mark .ft-ch-n, .ft-ch-mark .ft-ch-of { opacity: 1; translate: none; rotate: none; }
  .ft-ch-wash { transform: none; opacity: 1; }
  .ft-statement .ft-hl::after { transform: none; }
}
@media print { .ft-rail, .ft-flag, .ft-chmenu, .ft-bubble, .ft-next, .ft-toc { display: none !important; } }
/* ==== v6: money objects ==== */
.ft-obj { display: inline-block; width: 92px; line-height: 0; filter: drop-shadow(2px 6px 6px rgba(70, 45, 20, .28)); }
.ft-obj.ft-wide { width: 148px; }
.ft-obj svg { width: 100%; height: auto; display: block; overflow: visible; }
.ft-has-collage { position: relative; isolation: isolate; overflow-x: clip; }
.ft-collage { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ft-collage .ft-obj { position: absolute; pointer-events: auto; cursor: pointer; opacity: 0; transition: translate .6s cubic-bezier(.2, .8, .2, 1); }
.ft-collage .ft-s1 { left: max(2%, calc(50% - 600px)); top: 16%; }
.ft-collage .ft-s2 { right: max(3%, calc(50% - 610px)); top: 8%; }
.ft-collage .ft-s3 { right: max(7%, calc(50% - 560px)); bottom: 2%; }
.ft-collage .ft-s4 { left: max(6%, calc(50% - 540px)); bottom: 0; width: 70px; }
.ft-collage .ft-s4.ft-wide { width: 150px; }
.ft-collage.ft-go .ft-obj { opacity: 1; }
.ft-collage .ft-obj:hover { filter: drop-shadow(4px 12px 10px rgba(70, 45, 20, .32)); }
@media (max-width: 1180px) { .ft-collage .ft-s1, .ft-collage .ft-s4 { display: none; } .ft-collage .ft-s2 { top: 4%; right: 2%; width: 72px; } .ft-collage .ft-s2.ft-wide { width: 112px; } .ft-collage .ft-s3 { right: 2%; width: 64px; } .ft-collage .ft-s3.ft-wide { width: 100px; } }
@media (max-width: 760px) { .ft-collage .ft-s3 { display: none; } .ft-collage .ft-s2 { top: 6px; right: 6px; width: 54px; opacity: .9; } .ft-collage .ft-s2.ft-wide { width: 86px; } }
.ft-go.ft-m-thud, .ft-go .ft-m-thud { animation: ft-thud .9s cubic-bezier(.3, 0, .5, 1) both; animation-delay: calc(var(--i, 0) * .12s); }
@keyframes ft-thud { 0% { opacity: 0; transform: translateY(-140px) rotate(-10deg); } 55% { opacity: 1; transform: translateY(0) rotate(0); } 68% { transform: translateY(-14px) rotate(2deg); } 82% { transform: translateY(0); } 90% { transform: translateY(-4px); } 100% { opacity: 1; transform: none; } }
.ft-shine-bar { animation: ft-barshine 4.5s ease-in-out 1.2s infinite; }
@keyframes ft-barshine { 0%, 60% { transform: skewX(-20deg) translateX(0); } 85%, 100% { transform: skewX(-20deg) translateX(210px); } }
.ft-go.ft-m-spin, .ft-go .ft-m-spin { animation: ft-coinin .9s cubic-bezier(.2, 1.3, .4, 1) both, ft-coinspin 7s ease-in-out 1.2s infinite; animation-delay: calc(var(--i, 0) * .12s), calc(1.2s + var(--i, 0) * .5s); }
@keyframes ft-coinin { from { opacity: 0; transform: perspective(400px) rotateY(540deg) scale(.3); } to { opacity: 1; transform: perspective(400px) rotateY(0) scale(1); } }
@keyframes ft-coinspin { 0%, 70% { transform: perspective(400px) rotateY(0); } 85% { transform: perspective(400px) rotateY(180deg); } 100% { transform: perspective(400px) rotateY(360deg); } }
.ft-go.ft-m-flutter, .ft-go .ft-m-flutter { animation: ft-notein 1.1s cubic-bezier(.3, .6, .4, 1) both, ft-flutter 5s ease-in-out 1.2s infinite; animation-delay: calc(var(--i, 0) * .12s), calc(1.2s + var(--i, 0) * .4s); transform-origin: 50% 0; }
@keyframes ft-notein { 0% { opacity: 0; transform: translate(-60px, -90px) rotate(-30deg); } 40% { transform: translate(20px, -30px) rotate(12deg); } 70% { transform: translate(-8px, -6px) rotate(-6deg); } 100% { opacity: 1; transform: none; } }
@keyframes ft-flutter { 0%, 100% { transform: rotate(-3deg) skewY(0); } 30% { transform: rotate(2deg) skewY(2deg); } 60% { transform: rotate(-1deg) skewY(-1.5deg); } }
.ft-go.ft-m-unroll, .ft-go .ft-m-unroll { animation: ft-unroll .9s cubic-bezier(.2, .9, .3, 1) both, ft-sway 6s ease-in-out 1s infinite; animation-delay: calc(var(--i, 0) * .12s), calc(1s + var(--i, 0) * .4s); transform-origin: 50% 0; }
@keyframes ft-unroll { from { opacity: 0; transform: perspective(500px) rotateX(-85deg) scaleY(.2); } 60% { opacity: 1; transform: perspective(500px) rotateX(10deg) scaleY(1.02); } to { opacity: 1; transform: none; } }
@keyframes ft-sway { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
.ft-go.ft-m-build, .ft-go .ft-m-build { animation: ft-rise .8s cubic-bezier(.2, .9, .3, 1) both; animation-delay: calc(var(--i, 0) * .12s); }
@keyframes ft-rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
.ft-m-build .ft-bank-cols rect { transform-box: fill-box; transform-origin: bottom; }
.ft-go.ft-m-build .ft-bank-cols rect, .ft-go .ft-m-build .ft-bank-cols rect { animation: ft-col .6s cubic-bezier(.2, 1.3, .4, 1) both; animation-delay: .25s; }
@keyframes ft-col { from { transform: scaleY(0); } }
.ft-go.ft-m-build .ft-bank-roof, .ft-go .ft-m-build .ft-bank-roof { animation: ft-roof .7s cubic-bezier(.3, 0, .5, 1.4) .55s both; }
@keyframes ft-roof { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: none; } }
.ft-go.ft-m-pass, .ft-go .ft-m-pass { animation: ft-rise .8s cubic-bezier(.2, .9, .3, 1) both; animation-delay: calc(var(--i, 0) * .12s); }
.ft-hand-coin { transform: translate(78px, 52px); }
.ft-go.ft-m-pass .ft-hand-coin, .ft-go .ft-m-pass .ft-hand-coin, .ft-topic-obj.ft-m-pass .ft-hand-coin { animation: ft-pass 3.2s ease-in-out .8s infinite; }
@keyframes ft-pass {
  0%, 12% { transform: translate(78px, 52px) rotate(0); }
  30% { transform: translate(100px, 18px) rotate(180deg); }
  48%, 62% { transform: translate(122px, 52px) rotate(360deg); }
  80% { transform: translate(100px, 18px) rotate(540deg); }
  100% { transform: translate(78px, 52px) rotate(720deg); }
}
.ft-obj.ft-poke svg { animation: ft-poke .7s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes ft-poke { 30% { transform: scale(1.18) rotate(-8deg); } 60% { transform: scale(.95) rotate(5deg); } }
.ft-ch-obj { width: 64px; margin-bottom: 8px; opacity: 0; }
.ft-ch-obj.ft-wide { width: 104px; }
.ft-ch-obj.ft-go { opacity: 1; }
.topic-card .ft-topic-obj { position: absolute; top: 14px; right: 14px; width: 58px; opacity: 0; }
.topic-card .ft-topic-obj.ft-wide { width: 84px; }
[dir="rtl"] .topic-card .ft-topic-obj { right: auto; left: 14px; }
.topic-card .ft-topic-obj.ft-go { opacity: 1; }
.topic-card:hover .ft-topic-obj svg { animation: ft-poke .7s cubic-bezier(.2, 1.5, .4, 1); }
.ft-toss { position: fixed; z-index: 9999; width: 44px; margin: -20px 0 0 -22px; pointer-events: none; animation: ft-toss 1.5s cubic-bezier(.2, .6, .4, 1) both; }
.ft-toss.ft-wide { width: 64px; margin-left: -32px; }
@keyframes ft-toss { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 15% { opacity: 1; } 45% { transform: translate(var(--dx), -150px) rotate(calc(var(--r) * .5)) scale(1); } 100% { opacity: 0; transform: translate(calc(var(--dx) * 1.4), 120px) rotate(var(--r)) scale(.9); } }
@media (prefers-reduced-motion: reduce) {
  .ft-obj, .ft-obj * { animation: none !important; }
  .ft-collage .ft-obj, .ft-ch-obj, .topic-card .ft-topic-obj { opacity: 1; }
}
@media print { .ft-collage, .ft-ch-obj, .ft-toss { display: none !important; } }
/* ==== v7: hand with coin purse, old coins and banknotes, treasure chest ==== */
.ft-hand { position: fixed; left: 0; top: 0; z-index: 44; width: 150px; pointer-events: none; transform: translate(-115%, var(--ty, 96px)) rotate(-8deg); transition: transform .9s cubic-bezier(.3, 1.3, .4, 1); filter: drop-shadow(4px 10px 10px rgba(60, 35, 15, .3)); }
.ft-hand.on { transform: translate(-6px, var(--ty, 96px)) rotate(0deg); transition: transform .5s cubic-bezier(.2, .9, .3, 1.15); }
.ft-hand svg { width: 100%; height: auto; display: block; overflow: visible; }
.ft-purse { transform-box: view-box; transform-origin: 98px 48px; }
.ft-purse.ft-bump { animation: ft-bump .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes ft-bump { 40% { scale: 1.06 .94; } }
.ft-purse-coins { animation: ft-jingle 1.6s ease-in-out infinite; }
@keyframes ft-jingle { 50% { transform: translateY(-2px); } }
.ft-hand-drop { position: absolute; left: 66%; top: -30px; width: 22px; height: 22px; animation: ft-handdrop .8s cubic-bezier(.5, 0, .9, .6) forwards; }
.ft-hand-drop svg { width: 100%; height: 100%; display: block; }
@keyframes ft-handdrop { 0% { opacity: 0; transform: translateY(-60px) rotateY(0); } 20% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(100px) rotateY(720deg) scale(.7); } }
.ft-hand-on .ft-rail { opacity: 0 !important; pointer-events: none !important; }
[dir="rtl"] .ft-hand { left: auto; right: 0; transform: translate(115%, var(--ty, 96px)) scaleX(-1) rotate(-8deg); }
[dir="rtl"] .ft-hand.on { transform: translate(6px, var(--ty, 96px)) scaleX(-1); }
[dir="rtl"] .ft-hand-on .ft-flag { opacity: 0; }
@media (max-width: 899px) { .ft-hand { display: none; } }
.ft-old { position: absolute; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1s; filter: sepia(.25) drop-shadow(3px 7px 7px rgba(60, 35, 15, .25)); }
.ft-old.ft-in { opacity: .92; }
.ft-old svg { width: 100%; height: auto; display: block; animation: ft-oldfloat 9s ease-in-out infinite; animation-delay: inherit; }
.ft-old-coin { width: 86px; }
.ft-old-note { width: 168px; }
@keyframes ft-oldfloat { 0%, 100% { transform: rotate(var(--rot)) translateY(0); } 50% { transform: rotate(calc(var(--rot) + 6deg)) translateY(-10px); } }
@media (max-width: 999px) { .ft-old { display: none; } }
.ft-chest { display: flex; align-items: center; gap: 22px; margin: 36px auto 8px; max-width: 560px; padding: 10px 6px; }
.ft-chest-btn { flex: none; width: 170px; padding: 0; border: 0; background: none; cursor: pointer; line-height: 0; filter: drop-shadow(3px 10px 10px rgba(60, 35, 15, .3)); }
.ft-chest-btn svg { width: 100%; height: auto; overflow: visible; }
.ft-chest.ft-in:not(.open) .ft-chest-btn { animation: ft-chestwiggle 3.2s ease-in-out 1s infinite; }
@keyframes ft-chestwiggle { 0%, 82%, 100% { transform: none; } 86% { transform: rotate(-4deg) translateY(-3px); } 90% { transform: rotate(4deg) translateY(-3px); } 94% { transform: rotate(-2deg); } }
.ft-chest-lid { transform-box: view-box; transform-origin: 40px 74px; transition: transform .7s cubic-bezier(.3, 1.5, .5, 1); }
.ft-chest.open .ft-chest-lid { transform: translate(-6px, -18px) rotate(-38deg); }
.ft-chest-heap { opacity: 0; transform: translateY(26px); transition: opacity .4s .15s, transform .6s cubic-bezier(.2, 1.4, .4, 1) .15s; }
.ft-chest.open .ft-chest-heap { opacity: 1; transform: none; }
.ft-chest-glow { opacity: 0; transition: opacity .6s .2s; }
.ft-chest.open .ft-chest-glow { opacity: 1; animation: ft-glow 2.4s ease-in-out .8s infinite; }
@keyframes ft-glow { 50% { opacity: .55; } }
.ft-chest-cap b { display: block; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 1.7rem; line-height: 1.05; color: var(--bronze); }
.ft-chest-cap span { font-family: "Caveat", "Comic Sans MS", cursive; font-size: 1.4rem; color: var(--ink); }
.ft-chest-btn:focus-visible { outline: 3px solid var(--bronze-2); outline-offset: 6px; }
@media (max-width: 520px) { .ft-chest { flex-direction: column; text-align: center; gap: 6px; } .ft-chest-btn { width: 150px; } }
@media (prefers-reduced-motion: reduce) { .ft-old svg, .ft-chest-btn, .ft-purse-coins { animation: none !important; } }
@media print { .ft-hand, .ft-old, .ft-chest { display: none !important; } }