:root{color-scheme:light;--ink:#123e50;--gold:#a87b43}*{box-sizing:border-box}body{margin:0;background:#e8e5df;color:var(--ink);font-family:Arial,sans-serif;font-size:17px;line-height:1.5}main{max-width:980px;margin:24px auto;padding:36px;background:#faf5e9;box-shadow:0 4px 28px #182e3214;border-radius:8px}header{display:grid;grid-template-columns:1.1fr 1fr;gap:22px;align-items:center;margin-bottom:28px}.category{display:inline-block;background:var(--gold);color:white;border-radius:30px;padding:7px 25px;font-size:14px;font-weight:bold;letter-spacing:.06em}h1,h2{font-family:Georgia,serif;line-height:1.12}h1{font-size:clamp(38px,5vw,64px);margin:12px 0 30px}header p{max-width:420px}.practice{font-size:13px;font-weight:700;margin-bottom:5px}.art{background-image:url('illustrations.png');background-size:300% 300%;background-repeat:no-repeat;aspect-ratio:1;border-radius:20px}.hero{background-position:0 0}.a1{background-position:0 0}.a2{background-position:50% 0}.a3{background-position:100% 0}article{display:grid;grid-template-columns:46px minmax(0,1fr) 155px 120px;gap:18px;align-items:center;background:#efdcc8;border-radius:26px;padding:22px;margin:18px 0}article:nth-child(2){background:#dfe3d7}article:nth-child(3){background:#dce5e8}.number{align-self:start;background:var(--gold);border-radius:50%;color:white;width:46px;height:46px;text-align:center;font:32px/46px Georgia,serif}h2{font-size:30px;margin:0 0 14px}.translation{font-size:23px;margin:8px 0 18px}button{font:inherit;font-size:18px;display:flex;align-items:center;gap:12px;border:1px solid #123e5020;background:#ffffff70;border-radius:30px;padding:10px 20px;color:var(--ink);cursor:pointer;min-height:48px}button:hover{background:#fff}button:focus-visible{outline:3px solid #123e50;outline-offset:4px}button[aria-pressed=true]{background:#123e50;color:#fff}.speaker{font-weight:bold}.use{font:17px/1.5 Georgia,serif;border-left:1px solid #123e5030;padding-left:15px}#status{min-height:26px;font-size:14px;text-align:center}aside{display:grid;grid-template-columns:1fr 190px;gap:30px;background:#f0dfcd;border-radius:36px;padding:26px 32px;margin-top:24px}h3{font-size:14px;letter-spacing:.05em;margin:0}aside p{font:21px/1.45 Georgia,serif;margin:12px 0 0}.note{align-self:center;text-align:center;padding:18px;background:#fcf3de;transform:rotate(-5deg);box-shadow:2px 4px 0 #c7b49b50}footer{text-align:center;font-size:13px;margin-top:32px}@media(max-width:700px){main{margin:0;padding:20px 16px;box-shadow:none}header{gap:8px}h1{font-size:35px;margin:10px 0 20px}.category{padding:6px 13px;font-size:12px}header p{font-size:15px}.practice{font-size:12px}article{grid-template-columns:32px minmax(0,1fr) 85px;gap:10px;padding:18px 13px;border-radius:20px}.number{width:30px;height:30px;font:23px/30px Georgia,serif}.words{grid-column:2/4}h2{font-size:27px}.translation{font-size:21px}.use{grid-column:2;font-size:16px;padding-left:0;border:0;margin:5px 0}.art:not(.hero){grid-column:3;grid-row:2;width:85px}.hero{align-self:start;margin-top:42px}.number{grid-row:1}button{font-size:18px}aside{padding:22px;gap:14px;grid-template-columns:1fr}aside p{font-size:19px}.note{transform:none;background:transparent;padding:0;text-align:left;box-shadow:none}.note br{display:none}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}