.ks-shell { position: absolute; inset: 102px 0 0; background: #f6f4ed; color: #304b43; }
.ks-content { position: absolute; inset: 0; }
.ks-heading { position: absolute; top: 22px; left: 180px; right: 180px; text-align: center; }
.ks-eyebrow { color: #8d8573; font-size: 15px; letter-spacing: 2px; font-weight: 700; }
.ks-heading h1 { margin: 9px 0 8px; font-size: 40px; font-weight: 700; letter-spacing: -1px; }
.ks-heading p { margin: 0; color: #748278; font-size: 23px; }
.ks-back, .ks-replay { position: absolute; top: 24px; height: 64px; border: 1px solid #dfe4d9; background: white; border-radius: 20px; display: flex; align-items: center; justify-content: center; gap: 8px; z-index: 2; }
.ks-back { left: 30px; width: 140px; font-size: 21px; }
.ks-back svg { width: 27px; height: 27px; transform: rotate(180deg); }
.ks-replay { right: 30px; width: 68px; }
.ks-replay svg { width: 32px; height: 32px; }
.ks-recipes { position: absolute; left: 36px; right: 36px; top: 162px; display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.ks-recipe { position: relative; background: white; border-radius: 28px; padding: 12px 12px 24px; display: flex; flex-direction: column; gap: 13px; align-items: center; border: 1px solid #e4e5da; box-shadow: 0 12px 28px #304b4308; }
.ks-recipe-art { width: 100%; height: 224px; border-radius: 20px; display: grid; place-items: center; }
.ks-recipe strong { font-size: 24px; font-weight: 650; }
.ks-recipe span { font-size: 17px; color: #7d877b; }
.ks-recipe small { font-size: 18px; color: #5c7a69; }
.ks-recipe .ks-stamp { position: absolute; top: 22px; right: 23px; width: 34px; height: 34px; border-radius: 50%; background: white; color: #558568; display: grid; place-items: center; }
.ks-menu-note { position: absolute; top: 572px; left: 100px; right: 100px; text-align: center; color: #7a8175; font-size: 21px; }
.ks-old { position: absolute; bottom: 22px; right: 34px; min-height: 52px; padding: 10px 20px; color: #526f60; font-size: 20px; }
.ks-next { position: absolute; right: 44px; bottom: 22px; min-width: 235px; height: 72px; border-radius: 22px; padding: 0 25px; background: #376e59; color: white; display: flex; align-items: center; justify-content: center; gap: 16px; font-size: 26px; box-shadow: 0 8px 18px #376e5920; z-index: 2; }
.ks-next svg { width: 32px; height: 32px; }
.ks-wash { position: absolute; top: 185px; left: 190px; right: 190px; height: 340px; display: flex; justify-content: center; gap: 28px; background: #e2efee; padding: 32px; border-radius: 42px 42px 85px 85px; border-bottom: 12px solid #c6dcda; }
.ks-wash-item { position: relative; width: 230px; border-radius: 24px; background: #ffffffb3; display: flex; align-items: center; flex-direction: column; justify-content: center; font-size: 24px; gap: 8px; }
.ks-wash-item i { position: absolute; top: 12px; right: 18px; font-size: 30px; font-style: normal; color: #588d79; }
.ks-wash-item.is-clean { background: #f9fffc; box-shadow: inset 0 0 0 3px #97bda9; }
.ks-workbench { position: absolute; top: 160px; left: 62px; right: 62px; height: 418px; display: grid; grid-template-columns: 520px 1fr; gap: 36px; }
.ks-pantry { background: #fff; border: 1px solid #e7e5da; border-radius: 30px; padding: 20px; }
.ks-small-label { color: #7a8579; font-size: 20px; text-align: center; margin-bottom: 14px; }
.ks-picks { height: 172px; display: flex; justify-content: center; gap: 18px; }
.ks-ingredient { width: 210px; border-radius: 22px; background: #f6f4ec; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 24px; }
.ks-ingredient:disabled { cursor: default; }
.ks-ingredient.is-selected { box-shadow: inset 0 0 0 3px #90b39b; background: #edf3e9; }
.ks-ingredient:disabled:not(.is-selected) { opacity: .38; }
.ks-word { height: 157px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #506d5c; }
.ks-word > span { font-size: 22px; }
.ks-word b { font-family: "Noto Naskh Arabic", "DejaVu Sans", serif; font-size: 43px; font-weight: 400; line-height: 1.35; }
.ks-word small { font-size: 19px; color: #7b8276; }
.ks-word-listen { position: absolute; right: 0; top: 44px; width: 54px; height: 54px; background: #e5efe6; border-radius: 18px; }
.ks-word-listen svg { width: 29px; height: 29px; }
.ks-board { display: flex; flex-direction: column; align-items: center; background: #eae0cf; border: 8px solid #f0e7d8; border-radius: 48px; }
.ks-food { height: 325px; display: grid; place-items: center; }
.ks-count { display: flex; align-items: center; gap: 28px; }
.ks-count strong { font-size: 32px; }
.ks-count strong span { font-size: 21px; color: #8b8c76; font-weight: 500; }
.ks-count > div { display: flex; gap: 10px; }
.ks-count i { width: 38px; height: 38px; display: grid; place-items: center; font-style: normal; border: 2px solid #c4c6b0; border-radius: 50%; color: #999984; }
.ks-count i.filled { background: #739579; border-color: #739579; color: #fff; }
.ks-cook-food { position: absolute; top: 163px; left: 205px; width: 490px; height: 385px; display: grid; place-items: center; background: #eae0cf; border: 8px solid #f0e7d8; border-radius: 46px; }
.ks-action { position: absolute; top: 246px; right: 200px; width: 255px; height: 232px; border-radius: 32px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border: 2px solid #b7cdbd; font-size: 27px; }
.ks-action small { font-size: 23px; color: #758370; }
.ks-learn { position: absolute; left: 300px; right: 300px; top: 245px; display: flex; gap: 36px; }
.ks-learn-card { width: 320px; height: 245px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: white; border: 2px solid #e6e6db; border-radius: 28px; font-size: 26px; }
.ks-learn-card.is-clean { background: #e4f1e8; border-color: #8ab499; }
.ks-arabic-prompt { position: absolute; top: 158px; left: 0; right: 0; text-align: center; color: #4c7460; font-family: "Noto Naskh Arabic", "DejaVu Sans", serif; font-size: 52px; }
.ks-table { position: absolute; left: 100px; right: 100px; top: 205px; height: 300px; background: #e8dfcf; border-radius: 90px; display: flex; align-items: center; justify-content: center; gap: 28px; border: 8px solid #f0e8db; }
.ks-plate { width: 280px; height: 260px; position: relative; }
.ks-plate > span { position: absolute; bottom: 2px; left: 0; right: 0; font-size: 26px; color: #5d7f65; }
.ks-result { position: absolute; left: 265px; right: 210px; top: 162px; display: flex; gap: 40px; align-items: center; }
.ks-result strong { font-size: 30px; }.ks-result p { font-size: 22px; color: #69806d; margin: 15px 0; }
.ks-word-shelf { position: absolute; top: 448px; left: 155px; right: 155px; display: flex; justify-content: center; gap: 20px; }
.ks-saved-word { width: 295px; height: 103px; display: flex; align-items: center; gap: 12px; background: white; border-radius: 23px; padding: 10px 18px; font-size: 20px; }
.ks-saved-word b { display: block; font-family: "Noto Naskh Arabic", "DejaVu Sans", serif; font-size: 27px; font-weight: 400; }
.ks-shell button { transition: transform .15s, background .15s; }
.ks-shell button:not(:disabled):active { transform: scale(.97); }
.ks-added { animation: ksAdd .35s ease-out; }
.ks-mixing svg { animation: ksMix .45s ease-in-out; }
.ks-baking { background: #f2d3a6; }
@keyframes ksAdd { 50% { transform: scale(1.04); } }
@keyframes ksMix { 30% { transform: rotate(-9deg); } 70% { transform: rotate(9deg); } }
@media (prefers-reduced-motion: reduce) { .ks-shell * { animation: none !important; transition: none !important; } }