/* Styles for Writing Studio, Language World and Life Skills. */
.w-ta { width: 100%; resize: vertical; font-size: calc(17px * var(--k)); line-height: 1.6; }
.w-checks { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 13px; color: var(--muted); } .w-checks .ok { color: var(--text); }
.w-tracebox { padding: 0; overflow: hidden; max-width: min(100%, 420px, calc(calc(100 * var(--vh)) - 330px)); min-width: 220px; margin: 10px auto 0; }
.w-trace { width: 100%; height: auto; display: block; touch-action: none; cursor: crosshair; }
.w-flash { font-size: calc(34px * var(--k)); font-weight: 800; min-height: 56px; letter-spacing: 2px; }
.w-spell { max-width: 320px; margin: 0 auto; text-align: center; font-size: calc(22px * var(--k)); letter-spacing: 2px; }
.w-target { font-size: calc(20px * var(--k)); line-height: 1.7; margin: 8px 0 12px; font-family: ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.w-target .ok { color: #2ec46d; } .w-target .no { background: rgba(239,74,99,.35); border-radius: 3px; } .w-target .cur { border-bottom: 3px solid var(--gold); }
.lg-langs { margin: 0 0 12px; }
.lg-hello { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; } .lg-hello .big { font-size: calc(30px * var(--k)); font-weight: 800; white-space: nowrap; }
.lg-row b { font-size: calc(18px * var(--k)); }
.lg-card { width: min(100%, 380px); aspect-ratio: 3 / 2; border-radius: 24px; border: 4px solid var(--c-language, #14b8a6); background: var(--panel2); color: var(--text); font: inherit; cursor: pointer; display: grid; place-content: center; gap: 6px; margin: 0 auto; padding: 14px; text-align: center; }
.lg-card .e { font-size: 44px; line-height: 1; } .lg-card b { font-size: calc(26px * var(--k)); } .lg-card.flip { background: var(--c-language, #14b8a6); color: #06231f; }
.lf2-feel { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; }
.lf2-feel button { background: var(--panel2); border: 3px solid var(--line); border-radius: 16px; color: var(--text); font: inherit; font-weight: 600; cursor: pointer; padding: 8px 4px; display: grid; gap: 2px; justify-items: center; font-size: 13px; }
.lf2-feel button span { font-size: 30px; line-height: 1.1; } .lf2-feel button.on { border-color: var(--gold); }
.lf2-breath { width: 150px; height: 150px; border-radius: 50%; margin: 0 auto 10px; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #a8f0d8, #2ec4a6); color: #06231f; font-weight: 700; transform: scale(.7); transition: transform 3.8s ease-in-out; }
.lf2-breath.in, .lf2-breath.hold { transform: scale(1.05); } .lf2-breath.out { transform: scale(.7); } .lf2-breath.still { transition: none; transform: scale(.9); }
.lf2-tray { min-height: 64px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; background: var(--panel2); border-radius: 16px; padding: 8px; max-width: 520px; margin: 0 auto; }
.lf2-coin { width: 46px; height: 46px; border-radius: 50%; border: 3px solid rgba(0,0,0,.25); color: #23263a; font-weight: 800; cursor: pointer; font-size: 13px; display: grid; place-content: center; line-height: 1.1; }
.lf2-coin.big { width: 76px; height: 76px; font-size: 18px; } .lf2-coin small { font-size: 10px; font-weight: 600; }
.lf2-range { display: grid; gap: 4px; margin: 8px 0; } .lf2-range input { width: 100%; }
.lf2-jars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; text-align: center; max-width: 420px; margin: 12px auto; } .lf2-jars > div { display: grid; gap: 2px; }
.lf2-jars .jar { height: 110px; border: 4px solid #c9d8ee; border-top-width: 8px; border-radius: 10px 10px 18px 18px; position: relative; overflow: hidden; background: rgba(255,255,255,.06); } .lf2-jars .jar i { position: absolute; left: 0; right: 0; bottom: 0; transition: height .3s; }