/* Local showcase shell + declared compatibility adaptations, 2026-09-30, GPL-3.0. */
:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,sans-serif;font-size:18px;background:#0e1323;color:#eef1ff;--card-aspect:.718}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,select,input[type=file]{max-width:100%;min-height:46px}button,select{background:#222e49;color:#f1f5ff;border:1px solid #536285;border-radius:12px;padding:.6rem .8rem}button{cursor:pointer}button:hover{background:#37466c}a{color:#abccff}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #90c8ff;outline-offset:3px}[hidden]{display:none!important}
.page{max-width:1100px;margin:auto;padding:26px clamp(16px,4vw,46px) 40px}.eyebrow{letter-spacing:.16em;font-size:.72rem;color:#abc6ff;font-weight:750}h1{font-size:clamp(1.85rem,4vw,2.9rem);margin:10px 0}h2{font-size:1.12rem;margin:0 0 1rem}p{line-height:1.65;margin:8px 0 18px}.intro{max-width:800px;color:#bdc7e1}.workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.94fr);gap:30px;margin-top:28px}.preview-panel{background:radial-gradient(ellipse at 50% 45%,#334565,#151e33 70%);border:1px solid #35415d;border-radius:24px;padding:32px 28px 24px;min-width:0}.panel{min-width:0;background:#171f34;border:1px solid #35415d;border-radius:24px;padding:24px}label{display:block;font-weight:650;font-size:.9rem;margin:16px 0 7px}select,input[type=range]{width:100%}.checks{display:flex;gap:10px;align-items:center;font-weight:500}.checks input{width:22px;height:22px}.row{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.hint{font-size:.78rem;line-height:1.6;color:#c4cee3}.badge{border:1px solid #4b5980;border-radius:999px;display:inline-block;padding:.3rem .65rem;font-size:.72rem;color:#d9e8ff}.status{min-height:1.7em;font-size:.85rem;color:#afd9ef}.status[data-error=true]{color:#ffb6ba}details{margin-top:18px;border-top:1px solid #36405a;padding-top:14px}summary{cursor:pointer;line-height:1.5}.provenance{font-size:.8rem;overflow-wrap:anywhere}.license{white-space:pre-wrap;max-height:350px;overflow:auto;font:13px/1.5 ui-monospace,monospace;background:#101729;padding:18px;border-radius:12px}.footer{margin-top:28px;font-size:.78rem;color:#b5c1dc}.brand{display:inline-block;transition:transform .18s,color .18s}.brand:hover,.brand:focus-visible{color:#ffd9a0;transform:translateY(-3px) scale(1.04)}
.stage{position:relative;margin:0 auto;width:min(100%,330px);aspect-ratio:var(--card-aspect);touch-action:pan-y;user-select:none;-webkit-user-select:none;perspective:850px;outline-offset:8px}.stage.free-drag{touch-action:none}.stage:focus-visible{outline:3px solid #8fcaff;border-radius:18px}.stage .card{width:100%;height:100%;pointer-events:none;will-change:auto;--mask:linear-gradient(white,white);--foil:repeating-linear-gradient(127deg,#303443 0 3px,#b8c1d4 4px 6px,#4c576f 7px 12px);--glitter-size:24%;--clip-trainer-invert:polygon(0% 0%,100% 0%,100% 100%,0% 100%,0% 51.8%,91.5% 51.8%,91.5% 14.5%,8.5% 14.5%,8.5% 51.8%,0% 51.8%)}
.stage .card__translater{transform:none!important;perspective:850px;width:100%;height:100%;will-change:auto}.stage .card__rotator{width:100%;height:100%;pointer-events:none;background:#283750;will-change:auto;transform:rotateY(var(--rotate-x,0deg)) rotateX(var(--rotate-y,0deg)) translateY(var(--winnie-lift,0px)) scale(var(--winnie-scale,1));transition:transform 420ms cubic-bezier(.2,.8,.2,1),filter 300ms ease;filter:drop-shadow(0 24px 32px rgba(0,0,0,.42))}.stage .card.interacting .card__rotator{transition:transform 70ms linear,filter 180ms ease;filter:drop-shadow(0 34px 42px rgba(0,0,0,.52))}.stage .card__front{height:100%;background:#253346;transform:none}.stage .card__artwork{height:100%;width:100%;object-fit:contain;display:block}.stage .placeholder{height:100%;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:10%;background:linear-gradient(145deg,#253d57,#74758c 50%,#304649);text-align:left}.stage .placeholder span,.stage .placeholder strong{display:block;aspect-ratio:auto;height:auto;border-radius:0;overflow:visible;width:auto}.stage .placeholder strong{font-size:1.45rem;line-height:1.35}.stage .placeholder span{font-size:.75rem;letter-spacing:.1em}.stage .card__shine,.stage .card__glare,.stage .card__glare2,.stage .card__glitter{width:100%;height:100%;pointer-events:none;will-change:auto}.stage .card__glitter,.stage .card__glare2{display:none}.stage[data-repo="pokemon-cards-151"] .card__glitter,.stage[data-repo="pokemon-cards-151"] .card__glare2{display:grid}.stage[data-repo="pokemon-cards-151"] .card:not([data-rarity="double rare"]) .card__glitter,.stage[data-repo="pokemon-cards-151"] .card:not([data-rarity="double rare"]) .card__glare2{display:none}
.stage .card:not(.interacting) .card__shine,.stage .card:not(.interacting) .card__glitter,.stage .card:not(.interacting) .card__glare,.stage .card:not(.interacting) .card__glare2{visibility:hidden}.stage .card.interacting .card__rotator{will-change:transform}.stage .card[data-rarity=common] .card__shine,.stage .card[data-rarity=common] .card__glitter{display:none}
.stage[data-quality=balanced] .card__glitter{display:none!important}.stage[data-quality=low] .card__glitter,.stage[data-quality=low] .card__glare2,.stage[data-quality=low] .card__shine:after{display:none!important}.stage[data-quality=low] .card__shine,.stage[data-quality=low] .card__glare{filter:none!important}
.stage .card[data-user-mask=true] .card__shine,.stage .card[data-user-mask=true] .card__shine:before,.stage .card[data-user-mask=true] .card__shine:after{-webkit-mask-image:var(--user-mask)!important;mask-image:var(--user-mask)!important;-webkit-mask-size:cover!important;mask-size:cover!important;mask-mode:var(--user-mask-mode,luminance)!important}
.stage .card[data-user-foil=true] .card__shine,.stage .card[data-user-foil=true] .card__shine:before,.stage .card[data-user-foil=true] .card__shine:after{--foil:var(--user-foil)!important}
@media(max-width:760px){.workspace{grid-template-columns:1fr;gap:18px}.preview-panel{padding:26px 30px 20px}.stage{width:min(100%,290px)}.page{padding-top:18px}.panel{padding:20px}h1{font-size:2rem}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}.brand:hover{transform:none}.stage .card__rotator{transform:none!important}}
