/* personal note */
.pnote{position:relative;max-width:26em;margin:2px auto 16px;padding:11px 16px 10px 18px;border-radius:16px;text-align:left;background:radial-gradient(120% 140% at 0% 0%,rgba(255,79,216,.13),transparent 60%),rgba(14,8,22,.78);border:1px solid rgba(196,120,255,.30);box-shadow:0 0 22px rgba(255,79,216,.10),inset 0 0 0 1px rgba(255,255,255,.02)}
.pnote::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:3px;background:linear-gradient(180deg,#ff4fd8,#b36bff 55%,#4ea8ff);box-shadow:0 0 10px #ff4fd8}
.pnote p{margin:0;font:italic 400 19px/1.35 "Cormorant Garamond",Garamond,Georgia,serif;color:#ffe9f4}
.pnote p a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,79,216,.5)}
.pnote cite{display:block;margin-top:4px;font:500 12.5px/1.2 -apple-system,Segoe UI,sans-serif;font-style:normal;letter-spacing:.08em;color:#f0b8e0}
/* breath of fire diagram */
.bof-st{position:relative;max-width:420px;margin:0 auto;border-radius:18px;overflow:hidden;background:#000;aspect-ratio:3/4;box-shadow:inset 0 0 0 1px rgba(255,79,216,.22);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.bof-st:focus-visible{outline:2px solid #ff4fd8;outline-offset:3px}
.bof-st img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.bof-st canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.bof-cue{position:absolute;left:50%;top:10px;transform:translateX(-50%);z-index:3;white-space:nowrap;padding:7px 14px;border-radius:999px;background:rgba(6,3,12,.78);border:1px solid rgba(255,140,90,.35);font:italic 400 19px/1 "Cormorant Garamond",Georgia,serif;color:#fff0e0;text-shadow:0 0 10px rgba(255,120,60,.6);pointer-events:none}
.bof-ring{position:relative;flex:none;width:46px;height:46px;pointer-events:none}
.bof-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.bof-ring circle{fill:none;stroke-width:4}
.bof-ring .tr{stroke:rgba(255,255,255,.12)}
.bof-ring .pr{stroke:url(#bofg);stroke-linecap:round;stroke-dasharray:157.08;stroke-dashoffset:157.08}
.bof-ring span{position:absolute;inset:0;display:grid;place-items:center;font:600 11px/1 -apple-system,Segoe UI,sans-serif;color:#ffe6f6;background:radial-gradient(circle,rgba(6,3,12,.75) 55%,transparent 58%);border-radius:50%}
.bof-tap{position:absolute;left:50%;top:10px;transform:translateX(-50%);white-space:nowrap;z-index:3;padding:6px 10px;border-radius:999px;background:rgba(6,3,12,.78);border:1px solid rgba(196,120,255,.3);font:600 10.5px/1 -apple-system,Segoe UI,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#ead8ff;pointer-events:none}
.bof .chips{justify-content:center;margin:12px 0 4px}
.bof .chips button{min-height:44px;min-width:76px}
.bof .chips button[aria-pressed="true"]{border-color:#ff4fd8;background:rgba(255,79,216,.14);box-shadow:0 0 12px rgba(255,79,216,.25)}
.bof-go{display:flex;justify-content:center;align-items:center;gap:12px;margin:8px 0 0}
.bof-go .btn{min-width:120px;border-color:rgba(255,79,216,.55);background:linear-gradient(135deg,rgba(255,94,58,.22),rgba(255,79,216,.22) 50%,rgba(78,168,255,.2))}
.bof-go .btn[aria-pressed="true"]{background:linear-gradient(135deg,#ff5e3a,#ff4fd8 55%,#7f6bff);border-color:#ffb0e8}
.bof-cap{max-width:420px;margin:12px auto 0;font-size:15px;line-height:1.55;color:#efe2f0;text-align:center}
.bof-easy{max-width:420px;margin:8px auto 0;padding:8px 12px;border-radius:12px;background:rgba(255,211,107,.07);border-left:2px solid #ffd36b;font-size:13.5px;line-height:1.45;color:#f5e8cc}
.bof-hint-rm{display:none}
@media (prefers-reduced-motion:reduce){.bof-st{cursor:default}.bof-hint{display:none}.bof-hint-rm{display:block}}