*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow-x:clip}
body{background:#eceef1;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:#16181d;display:flex;align-items:center;justify-content:center;padding:24px;min-height:100vh;overflow-x:clip}
.card{background:#fff;border-radius:28px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 40px rgba(20,24,40,.08);width:min(1100px,100%);display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:24px;padding:56px 56px 40px;overflow:visible}
.intro h1{font-size:clamp(40px,6vw,76px);line-height:1.02;letter-spacing:-.035em;font-weight:800}
.bio{margin-top:20px;font-size:clamp(17px,1.6vw,21px);line-height:1.5;color:#3a3f4a;max-width:28ch}
.muted{color:#9aa0ab}
.hint{margin-top:28px;font-size:15px;color:#7a808c}
.stage-wrap{display:flex;flex-direction:column;align-items:center;min-width:0}
.stage{position:relative;width:100%;max-width:480px;aspect-ratio:1/1;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.stage canvas{position:absolute;display:block;pointer-events:none;z-index:2}
.circle{position:absolute;border-radius:50%;background:#ff7a1a;pointer-events:none}
.ring{position:absolute;z-index:3;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid #16181d;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .15s,width .12s,height .12s,margin .12s}
.ring::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;background:#16181d;border-radius:50%}
.stage.hover{cursor:none}
.stage.hover .ring{opacity:1}
.stage.grabbing .ring{width:24px;height:24px;margin:-12px 0 0 -12px}
.caption{margin-top:6px;font-size:13px;color:#9aa0ab;font-style:italic;text-align:center}
@media (max-width:760px){
  body{padding:12px;align-items:flex-start}
  .card{grid-template-columns:1fr;padding:32px 22px 24px;gap:8px;border-radius:22px}
  .intro{text-align:center}
  .bio{margin-left:auto;margin-right:auto}
  .hint{margin-top:14px}
  .stage-wrap{margin-top:-28px}
  .stage{max-width:380px}
}
.caption{transition:color .12s}
.stage.hurt + .caption,.stage-wrap .stage.hurt ~ .caption{color:#e5484d;font-style:normal;font-weight:700}
/* v6: caption taken out of the flow so the circle centres on the card */
.stage-wrap{position:relative}
.stage-wrap .caption{position:absolute;left:0;right:0;margin-top:0}
.card{padding-top:48px;padding-bottom:48px}
@media (max-width:760px){
  .card{padding-top:32px;padding-bottom:24px}
  .stage-wrap{margin-bottom:-16px}
}


.pali .w{white-space:nowrap}

/* ---------- v8: Lessons as a Thai temple teaching board (gold on lacquer, ลายรดน้ำ) ---------- */
.lessons{--gold:#d8b25a;--gold-hi:#f3dc98;--gold-lo:#a27a2c;--ink:#f1e6c8;
  position:relative;display:block;cursor:pointer;outline:none;border-radius:18px;overflow:hidden;
  padding:64px 80px 40px;color:var(--ink);text-align:center;
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(150,40,20,.38),transparent 60%),
    radial-gradient(90% 70% at 50% 110%,rgba(110,25,10,.35),transparent 60%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 2px,transparent 2px 7px),
    linear-gradient(180deg,#2a0f0a,#1a0906 55%,#140705);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 0 0 1px #6e4a16,0 18px 44px rgba(40,12,4,.28);
  touch-action:pan-y;-webkit-tap-highlight-color:transparent;
  font-family:"Taviraj","Noto Serif Thai",Georgia,serif}
.lessons::before,.lessons::after{content:"";position:absolute;pointer-events:none;border-radius:12px}
.lessons::before{inset:12px;border:1.5px solid var(--gold)}
.lessons::after{inset:18px;border:1px solid rgba(216,178,90,.45);border-radius:9px}
.lessons:focus-visible{box-shadow:0 0 0 3px rgba(216,178,90,.6),0 18px 44px rgba(40,12,4,.28)}
.corner{position:absolute;width:58px;height:58px;fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;pointer-events:none;z-index:1}
.corner .thin{stroke-width:1.2;opacity:.75}
.corner.tl{left:8px;top:8px}.corner.tr{right:8px;top:8px;transform:scaleX(-1)}
.corner.bl{left:8px;bottom:8px;transform:scaleY(-1)}.corner.br{right:8px;bottom:8px;transform:scale(-1,-1)}
.lessons-top{display:flex;justify-content:center;margin-bottom:10px}
.lotus{width:150px;height:42px;fill:rgba(216,178,90,.18);stroke:var(--gold);stroke-width:1.5;stroke-linejoin:round}
.lotus .thin{fill:none;stroke-width:1.1;opacity:.8}
.lessons-track{display:grid;align-items:center;min-height:0}
.lesson{grid-area:1/1;margin:0;opacity:0;transform:translateX(26px);transition:opacity .45s ease,transform .5s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.lesson.is-active{opacity:1;transform:none;pointer-events:auto}
.lesson.is-leaving-left,.lesson.from-left{transform:translateX(-26px)}
.pali{margin:0 auto;max-width:30em;font-family:"Taviraj","Noto Serif Thai",serif;font-weight:600;font-size:clamp(24px,2.7vw,34px);line-height:1.75;letter-spacing:.01em;
  color:var(--gold-hi);background:linear-gradient(180deg,#f8e7ad 10%,#dcb763 55%,#b98d3a 95%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.55))}
.divider{display:flex;align-items:center;justify-content:center;gap:12px;margin:14px auto 12px;max-width:340px;color:var(--gold)}
.divider span{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.divider i{font-style:normal;font-size:13px;line-height:1;opacity:.9}
.meaning{margin:0 auto;max-width:34em;font-family:"Taviraj","Noto Serif Thai",serif;font-weight:400;font-size:clamp(17px,1.6vw,20px);line-height:1.75;color:var(--ink);opacity:.93}
.attrib{margin-top:18px;font-size:14px;letter-spacing:.06em;color:var(--gold);opacity:.75}
.lessons-foot{position:relative;z-index:2;margin-top:22px;display:flex;align-items:center;justify-content:center;gap:22px}
.dots{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}
.dot{width:8px;height:8px;border-radius:50%;border:1px solid var(--gold);padding:0;background:transparent;cursor:pointer;transform:rotate(45deg);border-radius:1px;transition:background .3s,transform .3s}
.dot.is-active{background:var(--gold);transform:rotate(45deg) scale(1.25)}
.nav{display:flex;align-items:center;gap:10px}
.count{font-size:15px;color:rgba(241,230,200,.7);font-variant-numeric:tabular-nums;margin-right:4px;font-family:"Taviraj",serif}
.count b{color:var(--gold-hi);font-weight:600}
.arrow{width:42px;height:42px;border-radius:50%;cursor:pointer;font-size:18px;line-height:1;display:grid;place-items:center;transition:transform .15s,background .2s,color .2s;font-family:ui-sans-serif,system-ui,sans-serif}
.arrow.prev{background:transparent;color:var(--gold);border:1px solid rgba(216,178,90,.6)}
.arrow.next{background:linear-gradient(180deg,#f0d68b,#c99a42);color:#2a0f0a;border:1px solid #f3dc98;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.arrow:hover{transform:translateY(-1px)}
.arrow:active{transform:scale(.94)}
.lessons-tip{margin-top:12px;font-family:ui-sans-serif,system-ui,sans-serif;font-size:11.5px;letter-spacing:.02em;color:rgba(241,230,200,.42)}
@media (max-width:760px){
  .lessons{padding:44px 30px 30px;border-radius:16px}
  .lessons::before{inset:9px}.lessons::after{inset:14px}
  .corner{width:44px;height:44px}.corner.tl{left:5px;top:5px}.corner.tr{right:5px;top:5px}.corner.bl{left:5px;bottom:5px}.corner.br{right:5px;bottom:5px}
  .lotus{width:120px;height:34px}
  .pali{font-size:23px;line-height:1.7}
  .meaning{font-size:17px}
  .lessons-foot{flex-direction:column;gap:14px}
}

/* ---------- v9: "คำสอนจากก๊วง" button + quote board as a modal ---------- */
.lesson-btn{--gold:#d8b25a;position:relative;overflow:hidden;display:inline-flex;white-space:nowrap;align-items:center;gap:10px;margin-top:22px;
  padding:11px 22px 11px 16px;border-radius:999px;border:1px solid #c9a24c;cursor:pointer;
  background:radial-gradient(120% 140% at 50% 0%,rgba(150,40,20,.55),transparent 60%),linear-gradient(180deg,#2a0f0a,#160806);
  color:#f3dc98;font-family:"Taviraj","Noto Serif Thai",serif;font-weight:600;font-size:18px;line-height:1.2;letter-spacing:.01em;
  box-shadow:0 0 0 3px rgba(216,178,90,.14),0 8px 22px rgba(40,12,4,.28);
  visibility:hidden;opacity:0;transform:translateY(8px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1),visibility 0s .6s}
.lesson-btn svg{width:26px;height:18px;fill:rgba(216,178,90,.2);stroke:#d8b25a;stroke-width:1.6;stroke-linejoin:round;flex:none}
.lesson-btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,236,170,.45),transparent);transform:skewX(-18deg);opacity:0}
.lesson-btn:hover{border-color:#f3dc98;transform:translateY(-1px)}
.lesson-btn:focus-visible{outline:2px solid #d8b25a;outline-offset:3px}
.lesson-btn.is-shown{visibility:visible;opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1),visibility 0s;
  animation:lessonPulse 1.6s ease-out .5s 2}
.lesson-btn.is-shown::after{animation:lessonShimmer 1.6s ease-in-out .4s 3}
@keyframes lessonShimmer{0%{left:-60%;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:120%;opacity:0}}
@keyframes lessonPulse{0%{box-shadow:0 0 0 0 rgba(216,178,90,.55),0 8px 22px rgba(40,12,4,.28)}100%{box-shadow:0 0 0 16px rgba(216,178,90,0),0 8px 22px rgba(40,12,4,.28)}}
.lesson-btn.mob{display:none}
@media (max-width:760px){
  .lesson-btn.desk{display:none}
  .lesson-btn.mob{display:inline-flex;margin-top:4px;font-size:17px}
  .stage-wrap{margin-bottom:0}
}
@media (prefers-reduced-motion:reduce){.lesson-btn.is-shown,.lesson-btn.is-shown::after{animation:none}}

.lesson-modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;
  background:rgba(12,5,3,.62);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  opacity:0;transition:opacity .28s ease}
.lesson-modal[hidden]{display:none}
.lesson-modal.is-open{opacity:1}
.lesson-modal .lessons{width:min(960px,100%);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;
  transform:scale(.94) translateY(10px);opacity:0;transition:transform .34s cubic-bezier(.2,.8,.2,1),opacity .28s ease;
  box-shadow:0 0 0 1px #6e4a16,0 30px 80px rgba(0,0,0,.55)}
.lesson-modal.is-open .lessons{transform:none;opacity:1}
.lesson-close{position:absolute;z-index:4;top:26px;right:76px;width:38px;height:38px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(216,178,90,.7);background:rgba(20,7,5,.6);color:#f3dc98;font-size:22px;line-height:1;display:grid;place-items:center;
  font-family:ui-sans-serif,system-ui,sans-serif;transition:background .2s,transform .15s}
.lesson-close:hover{background:rgba(216,178,90,.18);transform:rotate(90deg)}
.lesson-close:focus-visible{outline:2px solid #d8b25a;outline-offset:2px}
html.modal-open{overflow:hidden}
@media (max-width:760px){
  .lesson-modal{padding:12px}
  .lesson-modal .lessons{max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px)}
  .lesson-close{top:20px;right:54px;width:34px;height:34px;font-size:20px}
}