:root {
    font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
    color: #203b38;
    background: #f6f5f1;
}

.zere-page { min-height: 100vh; min-height: 100dvh; margin: 0; overflow-x: hidden; position: relative; background: radial-gradient(circle at 88% 12%, #e4ede3 0, transparent 28%), #f6f5f1; }
.zere-orb { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(2px); }
.zere-orb-one { width: 360px; height: 360px; top: 18%; left: -220px; background: #e8e9d7; opacity: .7; }
.zere-orb-two { width: 260px; height: 260px; right: -170px; bottom: 0; background: #e4eee8; }
.zere-shell { max-width: 1100px; min-height: 100vh; min-height: 100dvh; margin: auto; padding: calc(28px + env(safe-area-inset-top)) 32px calc(32px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; position: relative; }
.zere-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.zere-brand { display: inline-flex; align-items: center; gap: 11px; color: #214c42; font-size: 25px; font-weight: 750; letter-spacing: -.06em; text-decoration: none; }
.zere-brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: #214c42; color: white; font-family: Georgia, serif; font-size: 25px; font-style: italic; font-weight: normal; letter-spacing: -.09em; padding-right: 3px; }
.zere-languages { display: flex; align-items: center; gap: 3px; padding: 4px; background: rgba(255,255,255,.72); border: 1px solid #e5e9e1; border-radius: 999px; }
.zere-languages a { padding: 7px 10px; border-radius: 999px; color: #60736c; font-size: 12px; font-weight: 650; text-decoration: none; }
.zere-languages a[aria-current] { background: #214c42; color: white; }
.zere-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 38px; padding: 44px 0; }
.zere-hero { width: min(100%, 620px); text-align: center; }
.zere-illustration { position: relative; width: 174px; height: 174px; margin: 0 auto 25px; display: grid; place-items: center; }
.zere-illustration-ring { position: absolute; inset: 12px; border: 1px solid #aac7b4; border-radius: 49% 51% 53% 47%; transform: rotate(-23deg); box-shadow: 0 0 0 13px rgba(188,211,192,.24), 0 0 0 34px rgba(217,231,217,.38); }
.zere-illustration-core { width: 112px; height: 112px; display: grid; place-items: center; border-radius: 38% 62% 51% 49%; background: linear-gradient(145deg, #477966, #214e44); color: #f8f4db; box-shadow: 0 22px 38px #214c4230; font: italic 82px/.9 Georgia, serif; padding-bottom: 10px; transform: rotate(-8deg); }
.zere-illustration-star { position: absolute; color: #b6aa67; }
.zere-star-one { top: 12px; right: 10px; font-size: 29px; }
.zere-star-two { bottom: 12px; left: 0; font-size: 25px; }
.zere-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 13px; color: #648272; font-size: 11px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.zere-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: #70a880; }
.zere-hero h1 { margin: 0; font-size: clamp(36px, 7vw, 64px); line-height: 1.07; font-weight: 760; letter-spacing: -.055em; text-wrap: balance; }
.zere-intro { margin: 18px 0 0; color: #75857a; font-size: clamp(16px, 2vw, 19px); line-height: 1.5; }
.zere-notice { max-width: 520px; margin: 31px auto 0; padding: 18px 23px; border: 1px solid #dce5dc; border-radius: 19px; background: rgba(255,255,255,.76); box-shadow: 0 12px 36px #3157470c; color: #456456; font-size: 14px; line-height: 1.6; }
.zere-notice-success { background: #e5f1e9; border-color: #cde3d2; color: #2a6646; font-weight: 680; }
.zere-notice-error { background: #fff3ed; border-color: #f3d9cd; color: #965447; }
.zere-logout { margin-top: 22px; }
.zere-logout button { padding: 10px 16px; border: 0; background: none; color: #587267; font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.zere-next { display: flex; align-items: center; gap: 16px; width: min(100%, 470px); padding: 19px 22px; border: 1px solid #e1e6dc; border-radius: 18px; background: #ffffff8c; }
.zere-next-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px; background: #e8eedf; color: #708a59; font-size: 23px; }
.zere-next p { margin: 0; color: #6a7b6f; font-size: 13px; line-height: 1.5; }
@media (max-width: 600px) { .zere-shell { padding-left: 20px; padding-right: 20px; } .zere-brand { font-size: 22px; } .zere-brand-mark { width: 33px; height: 33px; } .zere-main { gap: 27px; padding: 42px 0; } .zere-illustration { width: 150px; height: 150px; margin-bottom: 20px; } .zere-illustration-core { width: 100px; height: 100px; font-size: 74px; } .zere-hero h1 { font-size: clamp(37px, 10vw, 49px); } .zere-notice { margin-top: 26px; } }
@media (prefers-reduced-motion: no-preference) { .zere-illustration-core { animation: zere-float 5s ease-in-out infinite; } @keyframes zere-float { 50% { transform: translateY(-7px) rotate(-4deg); } } }

.exercise-main { width: min(100%, 760px); margin: 0 auto; padding: 42px 0 80px; }
.exercise-main h1 { margin: 14px 0 8px; font-size: clamp(30px, 5vw, 45px); line-height: 1.12; letter-spacing: -.045em; }
.exercise-back { color: #577268; font-size: 14px; font-weight: 650; text-decoration: none; }
.exercise-subtitle { margin: 0 0 30px; color: #71827a; line-height: 1.5; }
.exercise-list { display: grid; gap: 12px; margin-top: 30px; }
.exercise-list-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px; border: 1px solid #dfe7dd; border-radius: 20px; background: #ffffffc9; box-shadow: 0 10px 30px #214c4209; }
.exercise-list-card h2 { margin: 5px 0 8px; font-size: 18px; line-height: 1.3; }
.exercise-kicker { color: #668776; font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
.exercise-status { display: inline-block; font-size: 12px; font-weight: 700; }
.exercise-status-done { color: #28764f; }
.exercise-status-failed { color: #b34740; }
.exercise-topic { margin: 0 0 8px; color: #70847a; font-size: 13px; }
.exercise-topline { display: flex; align-items: center; justify-content: space-between; }.exercise-close { color: #587267; font-size: 30px; line-height: 1; text-decoration: none; }
.exercise-open { flex: none; padding: 10px 14px; border-radius: 12px; background: #214c42; color: white; font-size: 13px; font-weight: 700; text-decoration: none; }
.exercise-locked { max-width: 150px; color: #8c988e; font-size: 12px; text-align: right; }
.exercise-instruction { margin: 18px 0 16px; padding: 12px 16px; border: 1px solid #e6e9e5; border-radius: 12px; background: white; color: #5b6478; font-size: 14px; line-height: 1.55; }
.exercise-panel { min-height: 360px; padding: clamp(20px, 5vw, 32px); border: 1px solid #e0e8df; border-radius: 24px; background: #fffdfb; box-shadow: 0 16px 42px #214c4210; }
.exercise-counter { margin: 0 0 24px; color: #789387; font-size: 13px; font-weight: 750; text-align: center; }
.exercise-prompt { margin: 0 0 28px; font-size: clamp(20px, 3vw, 25px); line-height: 1.35; text-align: center; }
.exercise-options { display: grid; gap: 10px; }
.exercise-option, .exercise-card, .exercise-letter { border: 1px solid #dce5de; background: #f8faf7; color: #24483d; font: inherit; cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.exercise-option:hover:not(:disabled), .exercise-card:hover:not(:disabled), .exercise-letter:hover:not(:disabled) { transform: translateY(-2px); border-color: #82a88f; }
.exercise-option { width: 100%; padding: 16px 18px; border-radius: 14px; text-align: left; font-size: 16px; line-height: 1.4; }
.exercise-option:disabled, .exercise-card:disabled, .exercise-letter:disabled { cursor: default; }
.exercise-option.is-selected, .exercise-card.is-selected { background: #dceafa; border-color: #6fa0d5; color: #245888; }
.exercise-option.is-correct, .exercise-card.is-correct, .exercise-slot.is-correct { background: #dbf2e2; border-color: #5cae77; color: #237345; }
.exercise-option.is-error, .exercise-card.is-error, .exercise-letter.is-error, .exercise-slot.is-error { background: #fce4e0; border-color: #df7770; color: #aa3937; }
.exercise-next-button { display: block; position: sticky; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 2; width: 100%; margin-top: 24px; padding: 14px 20px; border: 0; border-radius: 14px; background: #214c42; color: white; box-shadow: 0 8px 20px #214c4233; font: inherit; font-size: 18px; font-weight: 700; cursor: pointer; }
.exercise-feedback { min-height: 24px; margin: 20px 0 0; font-size: 14px; font-weight: 700; text-align: center; }
.exercise-feedback.is-correct { color: #28764f; }.exercise-feedback.is-error { color: #b34740; }
.exercise-letters, .exercise-slots { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.exercise-letters { margin: 8px 0 30px; }.exercise-letter, .exercise-slot { display: grid; place-items: center; width: 42px; height: 48px; border-radius: 10px; font-size: 21px; font-weight: 700; }
.exercise-letter.is-used { opacity: .35; }.exercise-slot { border: 1px dashed #b8c8ba; background: #fafbf7; }
.exercise-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.exercise-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }.exercise-column { display: grid; gap: 10px; }
.exercise-card { min-height: 70px; width: 100%; padding: 12px; border-radius: 13px; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.exercise-card.is-hidden { background: #315d88; border-color: #315d88; color: #fff; font: italic 30px Georgia, serif; }.exercise-card.is-open { background: #ffe8c8; border-color: #ecb55f; }
.exercise-finish-icon { display: grid; place-items: center; width: 76px; height: 76px; margin: 8px auto 22px; border-radius: 50%; background: #e1f3e6; color: #2e8250; font-size: 36px; }
.exercise-result, .exercise-coins { text-align: center; font-size: 17px; }.exercise-coins { color: #a07721; font-weight: 750; }
.exercise-review { display: grid; gap: 8px; margin-top: 30px; }.exercise-review p { margin: 0; padding: 12px; border-radius: 10px; background: #f3f6f1; font-size: 14px; line-height: 1.4; }.exercise-review .is-error { background: #fff1ee; }
@media (max-width: 600px) { .exercise-main { padding: 30px 0 60px; }.exercise-list-card { align-items: flex-start; flex-direction: column; }.exercise-locked { max-width: none; text-align: left; }.exercise-option { font-size: 15px; }.exercise-card { min-height: 75px; font-size: 13px; }.exercise-letter, .exercise-slot { width: 37px; height: 42px; font-size: 18px; } }