.bleepo-lore-section{margin:14px 0 24px}
.lore-section-heading{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 12px;color:var(--cyan);font:bold 10px/1.5 var(--mono);letter-spacing:1.1px}
.lore-section-heading span:last-child{color:var(--muted);font-weight:normal;text-align:right}
.bleepo-lore-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.bleepo-lore-card{--lore-accent:#e5b874;position:relative;display:flex;flex-direction:column;min-width:0;padding:21px 22px 13px;overflow:hidden;border:1px solid #786b82;background:linear-gradient(150deg,#302a41,#242235 70%);box-shadow:4px 4px 0 #090811;color:var(--cream);perspective:1000px;transition:border-color .18s,box-shadow .18s,background-color .18s}
.bleepo-lore-card:nth-child(2){--lore-accent:#91d4cf}.bleepo-lore-card:nth-child(3){--lore-accent:#e6ae8e}.bleepo-lore-card:nth-child(4){--lore-accent:#c1b0e6}.bleepo-lore-card:nth-child(5){--lore-accent:#f0cf7c}
.bleepo-lore-card::before{content:"";position:absolute;inset:0 auto 0 0;width:6px;background:linear-gradient(#664034,var(--lore-accent) 35%,#355255 72%,#80503a);box-shadow:2px 0 4px #09081155}
.bleepo-lore-card::after{content:"";position:absolute;top:11px;right:11px;width:8px;height:8px;border-radius:50%;background:#d1a77a;box-shadow:inset 1px 1px #fff3ce,1px 1px 0 #100d15}
.bleepo-lore-card:hover,.bleepo-lore-card:focus-within{border-color:var(--lore-accent);box-shadow:5px 5px 0 #090811,0 0 0 1px var(--lore-accent)}
.bleepo-lore-card:focus-within{outline:2px solid var(--pink);outline-offset:3px}
.lore-principle{grid-column:1/-1;padding:26px 29px 15px;border:2px solid #ddbd7d;background:linear-gradient(140deg,#f4eacb,#e6d6b2);color:#302935}
.lore-principle::before{width:9px;background:linear-gradient(#784535,#b77f4b 31%,#465d5b 65%,#87503a)}
.lore-card-stage{display:grid;flex:1;min-width:0;transform-style:preserve-3d}
.lore-face{grid-area:1/1;min-width:0;visibility:hidden}
.lore-face.is-current{visibility:visible}
.lore-kicker{display:block;margin-bottom:12px;color:var(--lore-accent);font:bold 10px/1.4 var(--mono);letter-spacing:1.35px}
.lore-principle[data-step="0"] .lore-kicker{color:#855a52}
.lore-face h2{font:bold 24px/1.15 Georgia,serif;margin:0 0 11px}
.lore-principle .lore-face h2{font-size:31px}
.lore-face p{font:14px/1.63 var(--sans);margin:0 0 9px;max-width:62ch}
.lore-principle .lore-face p{font-size:15px}
.lore-card-footer{display:flex;justify-content:space-between;gap:10px;margin-top:15px;padding-top:10px;border-top:1px dashed #887b90;color:#b6aaca;font:10px/1.4 var(--mono);letter-spacing:.55px}
.lore-card-footer span:last-child{color:var(--lore-accent);font-weight:bold}
.lore-principle[data-step="0"] .lore-card-footer{border-color:#bda782;color:#776b6b}
.lore-principle[data-step="0"] .lore-card-footer span:last-child{color:#805149}
.lore-card-hit{position:absolute;inset:0;z-index:3;display:block;width:100%;height:100%;padding:0;border:0;background:transparent;color:transparent;cursor:pointer}
.lore-card-hit:focus-visible{outline:0}
.bleepo-lore-card[data-step="1"]{--lore-accent:#9fe3db;border-color:#6aa7a3;background:linear-gradient(145deg,#1e4545,#193035);color:#ecf3e9}
.bleepo-lore-card[data-step="2"]{--lore-accent:#ffc5da;border-color:#b66f96;background:linear-gradient(145deg,#573348,#35283d);color:#fff1e4}
.bleepo-lore-card.is-turning .lore-card-stage{animation:lore-turn .36s ease-in-out both}
@keyframes lore-turn{0%{transform:rotateY(0)}49%{transform:rotateY(89deg)}51%{transform:rotateY(-89deg)}100%{transform:rotateY(0)}}
@media(max-width:740px){.bleepo-lore-grid{grid-template-columns:1fr}.lore-principle{grid-column:auto}.lore-section-heading{flex-wrap:wrap;gap:2px 12px}.lore-section-heading span:last-child{text-align:left}.bleepo-lore-card{padding:20px 21px 13px}.lore-principle{padding:23px 24px 14px}}
@media(max-width:370px){.bleepo-lore-card{padding:18px 17px 12px}.lore-principle{padding:20px 20px 13px}.lore-face h2{font-size:22px}.lore-principle .lore-face h2{font-size:27px}.lore-face p,.lore-principle .lore-face p{font-size:13.5px}}
@media(prefers-reduced-motion:reduce){.bleepo-lore-card.is-turning .lore-card-stage{animation:none}}
.pause-motion .bleepo-lore-card.is-turning .lore-card-stage{animation:none}