/* Original, scalable sticker studies, shared by the comparison and home previews. */
.peel-sticker { position: relative; width: 280px; max-width: 100%; aspect-ratio: 7/6; isolation: isolate; text-transform: none; letter-spacing: normal; }
.peel-mission { position: absolute; inset: 26px 20px; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 20px; border: 1px dashed #8f7959; border-radius: 8px; background: #eee0bd; color: #302720; transform: rotate(-2deg); }
.peel-mission[hidden] { display: none; }
.peel-mission small { font: bold 9px/1.3 monospace; letter-spacing: .12em; }
.peel-mission strong { font: 900 20px/1.05 'Arial Black', Arial, sans-serif; letter-spacing: -.04em; }
.peel-mission p { font: 12px/1.5 Arial, sans-serif; margin: 0; }
.peel-mission a { color: #953220; font: bold 11px Arial, sans-serif; text-underline-offset: 3px; }
.peel-front { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; border-radius: 12px; background: none; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; filter: drop-shadow(2px 5px 2px #30272038); transition: transform .45s ease, opacity .3s ease, clip-path .45s ease; transform-origin: 10% 10%; z-index: 2; }
.peel-front img { display: block; width: 100%; height: 100%; pointer-events: none; }
.peel-front:focus-visible { outline: 3px dashed #b93825; outline-offset: 3px; }
.peel-front:hover { transform: rotate(-3deg); }
.peel-front.is-dragging { cursor: grabbing; transition: none; touch-action: none; }
.peel-front.is-peeled { pointer-events: none; }
.peel-corner { position: absolute; right: 17%; bottom: 13%; background: #f9f3df; color: #302720; border: 1px solid #30272044; border-radius: 3px 0 3px 0; box-shadow: -2px -2px 3px #30272022; padding: 4px 7px; font: bold 8px/1 monospace; letter-spacing: 1px; transform: rotate(-7deg); }
.peel-reset { position: absolute; right: 12px; bottom: 0; background: none; border: 0; padding: 8px; color: #6e5540; text-decoration: underline; font: 10px Arial,sans-serif; cursor: pointer; }
.peel-reset[hidden] { display: none; }
.home-sticker-preview { margin-top: 1.5rem; width: 230px; }
.home-sticker-preview .peel-sticker { width: 230px; }
.home-sticker-preview .peel-mission { inset: 15px 8px; padding: 16px; }
.home-sticker-preview .peel-mission strong { font-size: 18px; }
.sticker-preview-return { display: inline-block; font: 11px Arial,sans-serif; color: #6e5540; margin-top: 10px; }
.sticker-studies { margin: 0; background: #f3ead2; color: #302720; font-family: Arial,sans-serif; }
.studies-wrap { max-width: 1240px; margin: auto; padding: 40px 30px 60px; }
.studies-header { display: flex; justify-content: space-between; align-items: end; gap: 24px; border-bottom: 1px solid #30272044; padding-bottom: 24px; }
.studies-header h1 { font: 900 clamp(36px,5vw,68px)/.98 'Arial Black',Arial,sans-serif; letter-spacing: -.065em; margin: 12px 0; max-width: 740px; }
.studies-header p { max-width: 500px; font-size: 14px; line-height: 1.6; }
.studies-kicker { font: bold 11px monospace; letter-spacing: .13em; color: #b93825; }
.studies-home { flex-shrink: 0; color: inherit; font-size: 12px; text-underline-offset: 5px; }
.sticker-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; padding-top: 28px; }
.sticker-study { border: 1px solid #30272033; background: #ede2c9; padding: 20px; }
.sticker-study .peel-sticker { margin: 8px auto 22px; }
.sticker-study h2 { font: 900 21px/1.1 'Arial Black',Arial,sans-serif; letter-spacing: -.04em; margin: 10px 0; }
.sticker-study p { color: #6e5540; font-size: 12px; line-height: 1.6; }
.sticker-study a.study-preview { display: inline-block; padding: 10px 0; font-size: 12px; color: #953220; font-weight: bold; text-underline-offset: 4px; }
.sticker-study:last-child { background: #e6ddc5; }
.studies-note { font-size: 12px; color: #6e5540; margin-top: 28px; }
@media(max-width:900px) { .sticker-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:560px) { .sticker-grid { grid-template-columns: 1fr; } .studies-header { display: block; } .studies-wrap { padding: 28px 20px; } }
@media(prefers-reduced-motion:reduce) { .peel-front { transition: none; } }

/* The front stays attached; its folded back follows the diagonal crease. */
.peel-front { filter: drop-shadow(2px 4px 2px #3027202b); transition: none; overflow: visible; }
.peel-front:hover { transform: none; }
.peel-paper { display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.peel-sticker[data-design='02-bonus-level'] .peel-mission { inset: 20% 10%; padding: 12px; gap: 5px; transform: none; border-radius: 0; }
.peel-sticker[data-design='02-bonus-level'] .peel-mission small { font-size: 8px; }
.peel-sticker[data-design='02-bonus-level'] .peel-mission strong { font-size: 17px; }
.peel-sticker[data-design='02-bonus-level'] .peel-mission p { font-size: 10px; line-height: 1.35; }
.home-sticker-preview { margin-top: .5rem; width: 260px; }
.home-sticker-preview .peel-sticker { width: 260px; }

.peel-sticker[data-design='02-bonus-level'] .peel-corner { right: 7%; bottom: 17%; transform: rotate(-10deg) translate(12%,35%); font-size: 7px; }
.sticker-construction { font: 11px/1.5 Arial,sans-serif; color: #6e5540; margin: -16px 0 0 16px; }
@media(max-width:1023px), (hover:none), (pointer:coarse) { .home-sticker-preview, .peel-sticker { display:none !important; } }