:root{--ink: #1c1a16;--paper: #fff2e1;--sun: #ffd166;--leaf: #2f9c8b;--berry: #d1495b;--sky: #ffe7c2;--shadow: rgba(31, 27, 22, .12);--accent: #ff8c42;--fruit-size: 32px;--fruit-gap: 4px;--fruit-count: 10}*{box-sizing:border-box;margin:0;padding:0}body{min-height:100vh;font-family:Palatino Linotype,Book Antiqua,Palatino,serif;font-size:18px;letter-spacing:.01em;color:var(--ink);background:radial-gradient(800px 400px at 10% -10%,#ffe59c 0%,transparent 70%),radial-gradient(700px 350px at 90% -5%,#ffd2b5 0%,transparent 65%),linear-gradient(180deg,var(--sky),#fff2dc 55%,#ffe8c9 100%)}#root{min-height:100vh}.page{max-width:1600px;margin:0 auto;padding:48px 24px 80px;position:relative}.page.is-practicing .tables{filter:blur(6px) grayscale(.4);opacity:.35;pointer-events:none}.hero{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:center;margin:12px 0 32px;text-align:center}.hero h1{font-family:Copperplate,Copperplate Gothic Light,serif;font-size:clamp(2.4rem,3.6vw,3.6rem);margin:0;letter-spacing:.04em}.title{display:flex;flex-wrap:wrap;justify-content:center;gap:2px}.title-letter{display:inline-block}.letter-0,.letter-9{color:#ff9e3d}.letter-1,.letter-10{color:#ff5e4d}.letter-2,.letter-11{color:#ffa94a}.letter-3,.letter-12{color:#5a2a5e}.letter-4,.letter-13{color:#2f3b6e}.letter-14{color:#ff9e3d}.letter-5{color:#e93d52}.letter-6{color:#ffd54a}.letter-7{color:#2c1c33}.letter-8{color:#ffb572}.legend-links{position:sticky;top:0;z-index:2;display:flex;flex-wrap:nowrap;gap:8px;padding:10px 12px;margin-bottom:32px;border-radius:18px;background:#ffffffd9;box-shadow:0 10px 26px var(--shadow);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);justify-content:space-between}.legend-link{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid transparent;background:#fff8efe6;color:var(--link-text, var(--ink));text-shadow:var(--link-shadow, none);font-size:.9rem;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border .2s ease}.legend-link .fruit{width:34px;height:34px;border-radius:50%;flex:0 0 34px;aspect-ratio:1 / 1;line-height:1}.legend-link:hover{transform:translateY(-2px);box-shadow:0 8px 18px #1f1b1626;border-color:#2f7f6e59}.legend-link.active{background:var(--active-fruit-soft, rgba(255, 209, 102, .35));border-color:var(--active-fruit, rgba(255, 140, 66, .45));box-shadow:0 12px 20px var(--active-fruit-soft, rgba(255, 140, 66, .2))}.fruity-stage{display:grid;grid-template-columns:minmax(220px,1fr) minmax(260px,360px) minmax(220px,1fr);gap:24px;align-items:center;margin-top:20px}.fruity-column{display:grid;gap:14px}.fruit-choice{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:16px;border:2px solid var(--active-fruit, rgba(47, 156, 139, .35));background:var(--active-fruit-soft, rgba(255, 248, 239, .85));cursor:pointer;font-size:1rem;font-family:Palatino Linotype,Book Antiqua,Palatino,serif;color:var(--link-text, var(--ink));transition:transform .2s ease,box-shadow .2s ease}.fruit-choice .fruit{width:40px;height:40px;font-size:20px}.fruit-choice .fruit-number{font-size:14px}.fruit-choice:hover{transform:translateY(-2px);box-shadow:0 12px 24px var(--shadow)}.fruit-choice-label{font-weight:700;text-shadow:var(--link-shadow, none)}.fruity-center{display:grid;justify-items:center;gap:16px;padding-top:24px;padding-bottom:140px;position:relative}.fruity-avatar{display:grid;justify-items:center;gap:12px;margin-top:8px}.fruity-head{width:140px;height:140px;background:radial-gradient(circle at 20% 20%,#fff7e8 0%,#ffd9b3 35%,transparent 36%),radial-gradient(circle at 70% 30%,#ffd54a 0%,#ffb572 40%,transparent 41%),radial-gradient(circle at 40% 70%,#ff9e3d,#ff6b6b 45%,#ffd9b3 80%);border-radius:50%;position:relative;box-shadow:0 16px 30px #1f1b1626}.fruity-hair{position:absolute;inset:-10px 10px auto;height:55px;background:linear-gradient(90deg,#ffd54a,#ffb572,#ff9e3d);border-radius:50% 50% 40% 40%;z-index:1}.fruity-bow{position:absolute;top:-8px;right:12px;width:34px;height:22px;background:radial-gradient(circle at 30% 30%,#f3d1ff,#5a2a5e 60%);border-radius:10px;transform:rotate(10deg);z-index:2}.fruity-bow:before,.fruity-bow:after{content:"";position:absolute;width:18px;height:18px;background:#5a2a5e;border-radius:50%;top:2px}.fruity-bow:before{left:-10px}.fruity-bow:after{right:-10px}.fruity-eye{width:16px;height:16px;background:#3b2a1a;border-radius:50%;position:absolute;top:50px}.fruity-eye.left{left:40px}.fruity-eye.right{right:40px}.fruity-smile{position:absolute;width:50px;height:20px;border-bottom:6px solid #3b2a1a;border-radius:0 0 50px 50px;bottom:40px;left:50%;transform:translate(-50%)}.fruity-body{width:160px;height:140px;background:linear-gradient(135deg,#ffd54a,#ff9e3d 50%,#ff6b6b),radial-gradient(circle at 30% 30%,#fff1d9,transparent 60%);border-radius:30px;position:relative;box-shadow:0 14px 24px #1f1b161f}.fruity-arm{width:110px;height:16px;background:linear-gradient(90deg,#ffd54a,#ff9e3d);border-radius:999px;position:absolute;top:30px}.fruity-arm.left{left:-80px;transform:rotate(-8deg)}.fruity-arm.right{right:-80px;transform:rotate(8deg)}.fruity-hand{width:22px;height:22px;background:#ffd7a6;border-radius:50%;position:absolute;top:22px;box-shadow:inset 0 2px 2px #ffffff80}.fruity-hand.left{left:-98px}.fruity-hand.right{right:-98px}.fruity-dress{position:absolute;left:50%;bottom:-6px;width:140px;height:80px;transform:translate(-50%);background:linear-gradient(135deg,#2f3b6e,#3a4a8a,#1f254a);border-radius:0 0 70px 70px;box-shadow:inset 0 8px 12px #ffffff59}.fruity-leg{width:18px;height:55px;background:linear-gradient(180deg,#ff9e3d,#ff6b6b);border-radius:999px;position:absolute;bottom:-38px}.fruity-leg.left{left:45px}.fruity-leg.right{right:45px}.fruity-foot{width:28px;height:14px;background:#ffd7a6;border-radius:999px;position:absolute;bottom:-46px}.fruity-foot.left{left:35px}.fruity-foot.right{right:35px}.meet-button{border:none;background:var(--accent);color:#1c140d;font-weight:700;padding:10px 22px;border-radius:999px;cursor:pointer;font-size:1.05rem;box-shadow:0 12px 20px #ff8c424d}.fruity-bubble{max-width:460px;padding:12px 16px;border-radius:16px;background:#fff9ee;border:2px solid var(--accent);font-size:.95rem;line-height:1.5;text-align:center;opacity:0;transform:translate(-50%,6px);transition:opacity .3s ease,transform .3s ease;position:absolute;left:50%;top:360px;z-index:2;pointer-events:none}.fruity-bubble.active{opacity:1;transform:translate(-50%)}.fruity-bubble:after{content:"";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border-width:12px 10px 0;border-style:solid;border-color:transparent transparent var(--accent)}.fruity-bubble:before{content:"";position:absolute;bottom:calc(100% - 2px);left:50%;transform:translate(-50%);border-width:10px 8px 0;border-style:solid;border-color:transparent transparent #fff9ee}.table-overlay{position:fixed;inset:0;background:#1f1b1673;display:flex;align-items:flex-start;justify-content:center;padding:70px 16px 16px;z-index:6;animation:fade-in .6s ease-out}.overlay-card{width:min(900px,100%);background:#fffffffa;border-radius:28px;padding:12px;box-shadow:0 28px 60px #1f1b1640;animation:pop-in .7s ease-out;border:3px solid var(--active-fruit, rgba(255, 140, 66, .4));height:calc(100vh - 90px);overflow:hidden;display:flex;flex-direction:column}.overlay-close{border:none;background:var(--active-fruit-soft, rgba(240, 126, 60, .15));color:var(--button-text, var(--active-fruit, var(--ink)));font-weight:700;padding:6px 14px;border-radius:999px;cursor:pointer;transition:box-shadow .2s ease,transform .2s ease}.overlay-close.flash{box-shadow:0 0 0 6px #ffd166b3;transform:scale(1.08)}.overlay-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:4px 0 8px;min-height:44px}.overlay-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.swap-toggle{display:inline-flex;align-items:center;gap:6px;font-size:.9rem;color:var(--ink);border:none;background:var(--active-fruit-soft, rgba(47, 156, 139, .15));padding:6px 10px;border-radius:999px;cursor:pointer}.overlay-title{margin:0;text-align:left;font-size:1.2rem;letter-spacing:.02em;color:var(--active-fruit, var(--ink));white-space:nowrap;line-height:1.1}.overlay-title-quiz,.overlay-title-long,.overlay-title-quiz.overlay-title-long{font-size:1.2rem}.overlay-table{margin:0 auto;padding:8px;transform:scale(clamp(.62,calc((100vh - 420px) / 520),.9));transform-origin:top center}.study-table{display:flex;flex-direction:column;justify-content:space-between}.study-table .row{flex:1;align-items:center}.page-group-header{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:center;text-align:center}.page-title{margin:0;font-size:2.1rem;letter-spacing:.05em;color:var(--active-fruit, var(--ink))}.practice-button{border:none;background:var(--active-fruit-soft, rgba(47, 156, 139, .2));border:2px solid var(--active-fruit, rgba(47, 156, 139, .35));color:var(--ink);font-weight:700;padding:8px 16px;border-radius:999px;cursor:pointer}.study-instructions{margin:0 0 8px;font-size:1.05rem;line-height:1.6;text-align:left}.instruction-label{font-weight:700;color:#2f9c8b}.inline-link{border:none;background:transparent;color:var(--active-fruit, #2f9c8b);font-weight:700;text-decoration:underline;cursor:pointer;padding:0;font-size:inherit;font-family:inherit}.quiz-link{align-self:center;margin-top:12px;border:none;background:transparent;color:var(--active-fruit, #2f9c8b);font-weight:700;text-decoration:underline;cursor:pointer;font-size:1rem}.refresh-button{background:#ffd16638;border-color:#ffd16680;padding:4px 12px}.table-card{background:#ffffffd9;border-radius:18px;padding:16px;box-shadow:0 16px 30px var(--shadow);animation:rise .6s ease both}.table-card-large{padding:20px 24px 12px;border-radius:22px;max-width:600px;width:100%;margin:0 auto}.row{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;padding:6px 0;border-bottom:1px dashed rgba(31,27,22,.12);font-size:1.3rem}.row:last-child{border-bottom:none}.equation{font-weight:600;color:#2f9c8b;text-align:right;position:relative;cursor:pointer;padding:4px 8px;border-radius:10px;transition:background .2s ease,transform .2s ease;white-space:nowrap}.hover-word{display:inline-flex;align-items:center;gap:4px;position:relative;margin:0 4px;transition:transform .18s ease}.hover-word:after{content:attr(data-word);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%) translateY(6px);opacity:0;pointer-events:none;background:var(--active-fruit, rgba(31, 27, 22, .9));color:var(--tooltip-text, #fff7e8);padding:4px 8px;border-radius:8px;font-size:.8rem;white-space:nowrap;transition:opacity .18s ease,transform .18s ease}.row-speak{position:relative}.row-speak .equation:after{content:attr(data-phrase);position:absolute;right:0;bottom:calc(100% + 6px);transform:translateY(6px);opacity:0;pointer-events:none;background:var(--active-fruit, rgba(31, 27, 22, .92));color:var(--tooltip-text, #fff7e8);padding:6px 12px;border-radius:10px;font-size:1.1rem;white-space:nowrap;transition:opacity .6s ease,transform .6s ease}.row-speak .equation:hover{background:#2f9c8b26;transform:translateY(-1px)}.row-speak .equation.show-tooltip:after{opacity:1;transform:translateY(0)}.row-speak .equation.show-tooltip{animation:row-bounce .6s ease-in-out}.row-speak .hover-word:after{content:none}.hover-word:hover{transform:scale(1.15)}.hover-word:hover:after{opacity:1;transform:translate(-50%) translateY(0)}.answer-product{position:relative;display:inline-flex;align-items:center;margin-left:2px;transition:transform .18s ease}.answer-product:after{content:attr(data-word);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%) translateY(6px);opacity:0;pointer-events:none;background:var(--active-fruit, rgba(31, 27, 22, .9));color:var(--tooltip-text, #fff7e8);padding:4px 8px;border-radius:8px;font-size:1.1rem;white-space:nowrap;transition:opacity .6s ease,transform .6s ease}.answer-product:hover{transform:scale(1.15)}.answer-product:hover:after{opacity:1;transform:translate(-50%) translateY(0)}.answer-product[data-visible=false]:after{display:none}.answer-product.show-tooltip:after{opacity:1;transform:translate(-50%) translateY(0)}.equals-tooltip{position:relative;display:inline-flex;align-items:center;gap:2px;transition:transform .18s ease}.equals-tooltip:after{content:attr(data-word);position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%) translateY(6px);opacity:0;pointer-events:none;background:var(--active-fruit, rgba(31, 27, 22, .9));color:var(--tooltip-text, #fff7e8);padding:4px 8px;border-radius:8px;font-size:1.1rem;white-space:nowrap;transition:opacity .18s ease,transform .18s ease}.equals-tooltip.equals-allowed:hover{transform:scale(1.15)}.equals-tooltip.equals-allowed:hover:after{opacity:1;transform:translate(-50%) translateY(0)}.fruit-line{display:flex;flex-wrap:nowrap;gap:var(--fruit-gap);align-items:center;justify-content:center;width:calc(var(--fruit-count) * var(--fruit-size) + (var(--fruit-count) - 1) * var(--fruit-gap));max-width:100%;margin:0 auto}.fruit{display:inline-flex;align-items:center;justify-content:center;width:var(--fruit-size);height:var(--fruit-size);border-radius:50%;font-size:18px;line-height:1;background:#ffd9a6;box-shadow:inset -2px -3px #0000001f;position:relative;transition:transform .18s ease}.fruit.label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--label-color, #fff)}.fruit.orange{background:#ff9e3d}.fruit.watermelon{background:#4e8c3a}.fruit.tomato{background:#ff5e4d}.fruit.tangerine{background:#ffa94a}.fruit.fig{background:#5a2a5e}.fruit.farkleberry{background:#2f3b6e}.fruit.strawberry{background:#e93d52}.fruit.starfruit{background:#ffd54a;color:#2a1500;text-shadow:0 1px 0 rgba(255,255,255,.85),0 2px 6px rgba(31,27,22,.45)}.fruit.starfruit .fruit-number,.fruit.starfruit .fruit-icon{color:#2a1500;text-shadow:0 1px 0 rgba(255,255,255,.9),0 2px 6px rgba(31,27,22,.5)}.fruit.elderberry{background:#2c1c33}.fruit.nectarine{background:#ffb572}.fruit.tangelo{background:#ffb04a}.answer{font-weight:600;color:var(--berry);text-align:left;font-variant-numeric:tabular-nums;min-width:3ch}.answer-pad{display:inline-block;width:1ch;opacity:0}.answer-input{display:flex;flex-direction:column;align-items:flex-start;gap:6px}.answer-entry{display:inline-flex;align-items:center;gap:8px;position:relative}.answer-equals{min-width:1ch}.answer-field{width:90px;padding:6px 10px;border-radius:10px;border:2px solid rgba(31,27,22,.2);font-size:1rem;font-family:Palatino Linotype,Book Antiqua,Palatino,serif}.dropdown-hint{border:2px solid rgba(31,27,22,.2);background:#fff;border-radius:8px;padding:4px 8px;font-weight:700;cursor:pointer}.options-menu{position:absolute;top:calc(100% + 8px);left:50px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:10px 12px;background:#fffaf4;border:2px solid rgba(31,27,22,.18);border-radius:12px;box-shadow:0 12px 24px #1f1b162e;z-index:4;min-width:220px}.options-item{background:#fff;border:2px solid rgba(31,27,22,.12);border-radius:10px;padding:6px 8px;font-weight:600;cursor:pointer;font-family:Palatino Linotype,Book Antiqua,Palatino,serif}.options-item:hover,.options-item:focus-visible{border-color:#1f1b1659;background:#fff3e3}.quiz-feedback{margin:16px 0 0;text-align:center;font-weight:700;font-size:1.1rem}.quiz-feedback.inline{text-align:left;font-size:1rem;margin:0}.row-feedback{grid-column:2 / 3;justify-self:center;margin-top:6px}.quiz-feedback.success{color:#2f7f6e}.quiz-feedback.error{color:#c2432f}.quiz-feedback.complete{font-size:1.4rem;animation:shimmer 1.1s ease-out}.completion-wrap{position:relative;padding-top:18px}.balloons{position:absolute;inset:-12px 0 auto;display:flex;justify-content:center;gap:12px;pointer-events:none}.balloon{width:22px;height:28px;border-radius:50% 50% 45% 45%;position:relative;animation:float-away 3.4s ease-out forwards}.balloon:after{content:"";position:absolute;left:50%;bottom:-10px;width:2px;height:14px;background:#1f1b1640}.balloon-1{background:#ff9e3d;animation-delay:0s}.balloon-2{background:#ff5e4d;animation-delay:.25s}.balloon-3{background:#ffd54a;animation-delay:.5s}.balloon-4{background:#2f7f6e;animation-delay:.15s}.balloon-5{background:#ffb572;animation-delay:.35s}.status-icon{display:inline-flex;align-items:center;justify-content:center;width:1.2em;margin-left:6px;font-weight:800}.status-icon.success{color:#2f7f6e}.status-icon.error{color:#c2432f;margin-right:6px;margin-left:0}.kudos-text{margin-left:10px;font-size:1rem;color:#2f7f6e;font-weight:700}.kudos-balloons{display:inline-flex;gap:4px;margin-left:8px;vertical-align:middle;align-items:center}.kudos-balloons .balloon{width:16px;height:20px;border-radius:50% 50% 45% 45%;position:relative;animation:float-away 2.6s ease-out forwards}.kudos-balloons .balloon:after{content:"";position:absolute;left:50%;bottom:-6px;width:2px;height:8px;background:#1f1b1640}@keyframes rise{0%{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes pop-in{0%{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}@keyframes shimmer{0%{transform:scale(.94);opacity:0}60%{transform:scale(1.05);opacity:1}to{transform:scale(1);opacity:1}}@keyframes row-bounce{0%{transform:translateY(0)}40%{transform:translateY(-6px)}to{transform:translateY(0)}}@keyframes float-away{0%{transform:translateY(0) scale(1);opacity:1}to{transform:translate(-26px,-130px) scale(1.08);opacity:0}}@media(max-width:700px){.legend-links{position:static}.table-overlay{padding-top:80px}.fruit-line{flex-wrap:wrap;width:100%}.row{grid-template-columns:1fr}.equation,.answer{font-size:.95rem}.answer{justify-self:flex-start}.fruity-stage{grid-template-columns:1fr}.fruity-body{width:140px}.fruity-arm.left,.fruity-arm.right{display:none}}@media(max-height:800px){.overlay-table{transform:scale(1)}}.fruit-icon{transition:opacity .18s ease}.fruit-number{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:#fffaf2;opacity:0;transition:opacity .18s ease}.fruit:hover,.fruit.revealed{transform:scale(1.15)}.fruit.revealed .fruit-number{opacity:1}.fruit.revealed .fruit-icon{opacity:0}.quiz{display:flex;flex-direction:column;flex:1}.overlay-table{flex:1}.completion-wrap{margin-top:auto;padding-top:6px}