:root{color-scheme:light;--paper:#f6f5f0;--white:#fffefa;--ink:#193b50;--muted:#63747c;--line:#d5dad5;--accent:#a74336;--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--serif:Georgia,"Times New Roman",serif}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:3px solid #a74336;outline-offset:5px}.page{max-width:650px;margin:auto;padding:0 25px;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}.masthead{display:flex;justify-content:space-between;align-items:center;padding:29px 0 22px;border-bottom:1px solid var(--line)}.brand{font-family:var(--serif);font-size:22px;text-decoration:none;color:var(--ink);letter-spacing:-.7px}.brand-dot{font-size:24px;color:var(--accent);padding-left:8px}.edition{font-size:10px;letter-spacing:2px}.intro{margin:35px 0 30px}.eyebrow{font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin:0 0 13px}h1{font-family:var(--serif);font-size:clamp(32px,7vw,45px);font-weight:400;letter-spacing:-1.5px;line-height:1.15;margin:0 0 13px}h1>span{color:var(--accent)}.subtitle{color:var(--muted);font-size:13px;line-height:1.7;margin:0}.lesson-meta{display:flex;justify-content:space-between;gap:10px;font-size:11px;font-weight:600;letter-spacing:.2px}.stage-steps{display:flex;gap:6px;margin:12px 0 20px}.stage-steps>span{height:3px;flex:1;background:var(--line)}.stage-steps>span.active{background:var(--ink)}.instruction{font-size:13px;color:var(--muted);margin:0 0 18px;line-height:1.6}.card{width:100%;height:350px;border:0;padding:0;background:none;perspective:1400px;color:var(--ink);text-align:left;cursor:pointer;display:block}.card-inner{position:relative;width:100%;height:100%;display:block;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.7,.25,1)}.card.flipped .card-inner{transform:rotateY(180deg)}.card-face{position:absolute;inset:0;display:flex;flex-direction:column;padding:27px 26px 21px;background:var(--white);border:1px solid #d6dbd7;border-radius:2px 22px 2px 2px;box-shadow:0 8px 20px #193b5009,0 2px 4px #193b5006;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:auto;overflow-wrap:anywhere}.card-back{transform:rotateY(180deg)}.card-top{display:flex;justify-content:space-between;align-items:center;font-family:var(--sans);font-size:9px;letter-spacing:1.8px;color:var(--muted);flex-shrink:0}.card-symbol{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--ink);border-radius:4px;width:27px;height:27px;font-size:18px;color:var(--ink);letter-spacing:0}.card-body{display:flex;flex-direction:column;justify-content:center;flex:1;padding:22px 0;gap:16px}.definition{font-family:var(--serif);font-size:clamp(21px,5.3vw,29px);line-height:1.25;display:block}.translation{font-family:var(--serif);font-size:21px;font-weight:bold;line-height:1.3;display:block}.word{font-family:var(--serif);font-size:clamp(29px,7vw,39px);font-weight:bold;line-height:1.1;letter-spacing:-.7px;display:block}.transcription{display:block;margin-top:10px;font-family:var(--sans);font-size:18px;font-weight:400;line-height:1.4;color:var(--muted)}.example{display:block;border-top:1px solid var(--line);padding-top:16px;font-family:var(--serif);font-size:18px;line-height:1.4;font-style:italic}.card-back .definition{font-size:21px}.card-bottom{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:1.5px;color:var(--muted);flex-shrink:0}.card-number{padding:4px 7px;border:1px solid var(--ink);color:var(--ink);letter-spacing:0;font-size:10px}.card-mark{width:24px;height:8px;background:var(--ink)}.flip-hint{font-size:11px;line-height:1.5;color:var(--muted);text-align:center;margin:18px 0 22px;min-height:17px}.next-button{width:100%;border:1px solid var(--ink);background:var(--ink);color:var(--white);min-height:54px;border-radius:3px;padding:15px 20px;display:flex;align-items:center;justify-content:space-between;font-size:14px;cursor:pointer}.next-button:disabled{background:#e8eae5;color:#6b787c;border-color:#e1e4de;cursor:default}.next-button:not(:disabled):active{transform:translateY(1px);background:#284e61}.lesson-note{text-align:center;font-size:10px;letter-spacing:.2px;color:var(--muted);margin:17px 0 32px}footer{border-top:1px solid var(--line);padding:22px 0 28px;display:flex;align-items:center;justify-content:space-between;gap:15px;color:var(--muted);font-size:8px;letter-spacing:1.4px}footer button{border:0;background:none;padding:8px 0;color:var(--muted);font-size:11px;cursor:pointer}.finish{padding-top:37px;text-align:center}.finish h1{font-size:clamp(32px,7vw,45px);line-height:1.15}.finish .subtitle{max-width:320px;margin:0 auto 26px}.certificate{max-width:360px;margin:0 auto;background:#efe6b7;padding:12px;transform:rotate(-2deg);box-shadow:0 9px 22px #193b5012;color:#242a29}.certificate-border{border:2px solid #ba9f5e;border-radius:16px;padding:19px 10px 16px}.certificate-number{font-size:7px;letter-spacing:1.5px;display:block;color:#6c6141}.certificate-title{font-family:var(--sans);font-stretch:condensed;font-weight:900;letter-spacing:-1px;font-size:34px;line-height:1.05;margin:20px 0 8px}.certificate-title>span{font-family:var(--serif);font-weight:400;font-style:italic;font-size:24px;letter-spacing:0}.stamps{position:relative;max-width:290px;height:220px;margin:0 auto}.stamp{position:absolute;border:5px double currentColor;border-radius:50%;width:135px;height:135px;display:flex;justify-content:center;align-items:center;font-size:14px;font-weight:800;letter-spacing:-.8px;animation:stamp-in .45s cubic-bezier(.2,.8,.3,1.2) both}.stamp-red{color:#a4392f;top:4px;left:0;transform:rotate(-14deg);animation-delay:.2s}.stamp-blue{color:#245e66;right:0;top:13px;transform:rotate(12deg);font-size:23px;line-height:1.05;animation-delay:.55s}.stamp-bottom{color:#a4392f;bottom:0;left:calc(50% - 67px);transform:rotate(-4deg);font-size:24px;animation-delay:.9s;background:#efe6b780}.certificate-date{display:block;margin-top:12px;font-size:8px;letter-spacing:1px;color:#6c6141}.finish-note{font-size:12px;color:var(--muted);line-height:1.8;margin:28px 0 18px}.review-button{border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:3px;padding:16px;width:100%;font-size:13px;cursor:pointer;min-height:50px;margin:0 0 30px}.review-button>span{padding-left:12px}.warning{font-size:12px;line-height:1.6;background:#f2e9d9;padding:15px;border-radius:3px;color:#654b2b}dialog{max-width:430px;width:calc(100% - 36px);border:1px solid var(--line);padding:26px;background:var(--paper);color:var(--ink);border-radius:7px}dialog::backdrop{background:#193b5066}dialog h2{font-family:var(--serif);font-weight:400;font-size:26px}dialog p{font-size:13px;line-height:1.7;color:var(--muted)}dialog .next-button{margin-top:23px}@keyframes stamp-in{from{opacity:0;scale:1.6}to{opacity:1;scale:1}}@media(min-width:600px){.page{padding-left:45px;padding-right:45px}.intro{margin-top:45px}.card{height:365px}.card-face{padding:28px 34px}.instruction{margin-bottom:21px}.finish{padding-top:45px}}@media(max-width:360px){.page{padding-left:18px;padding-right:18px}.card{height:370px}.card-face{padding:22px}.certificate-title{font-size:30px}.stamp{width:120px;height:120px}.stamp-red{font-size:12px}.stamp-bottom{left:calc(50% - 60px)}.stamps{height:205px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
