.principle-carousel{margin:28px auto 22px;max-width:620px;padding:10px;text-align:left}
.principle-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;border-radius:24px;touch-action:pan-x pan-y}
.principle-track::-webkit-scrollbar{display:none}
.principle-slide{flex:0 0 100%;min-width:0;margin:0;scroll-snap-align:start;scroll-snap-stop:always}
.principle-open{display:block;width:100%;padding:0;border:0;background:#f8f5ec;cursor:zoom-in}
.principle-open img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:contain}
.principle-controls{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 4px 4px}
.principle-status{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;color:var(--muted);font-size:.85rem;font-variant-numeric:tabular-nums}
.principle-pips{display:flex;gap:5px}
.principle-pip{width:6px;height:6px;border-radius:50%;background:#d5d0c8}
.principle-pip.is-active{background:var(--gold);width:17px;border-radius:4px}
.explanation .principle-hint{margin:18px auto 0;font-size:.85rem;line-height:1.55}
.principle-lightbox{padding:12px;background:#faf7ef;border:1px solid #d5d0c8;border-radius:20px;max-width:calc(100vw - 20px);max-height:calc(100dvh - 20px);overflow:auto}
.principle-lightbox::backdrop{background:rgba(20,18,16,.82)}
.principle-lightbox form{display:flex;justify-content:flex-end;margin:0 0 8px}
.principle-lightbox button{border:1px solid #b3a68f;border-radius:999px;padding:9px 18px;background:white;color:#25221e;cursor:pointer;font:inherit}
.principle-lightbox img{display:block;width:auto;max-width:100%;height:auto;max-height:calc(100dvh - 110px);margin:auto;object-fit:contain}
@media(max-width:420px){.principle-carousel{padding:6px;border-radius:24px}.principle-track{border-radius:18px}.principle-status{gap:7px}.principle-pips{gap:4px}}
@media(prefers-reduced-motion:reduce){.principle-track{scroll-behavior:auto}}