/* /portal-kit only (public/portal-kit.js): the moving demo doors, the three kinds, the custom door builder. */
.kit pre { overflow-x: auto; }
.kit-stage { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; padding: 18px; border-radius: 16px; background: radial-gradient(circle at 50% 120%, #3a2a4f, #15121f 70%); }
.kit-door { position: relative; display: block; width: 128px; height: 144px; }
.kit-door--camp { height: 176px; }
.kit-win { position: absolute; inset: 0; overflow: hidden; background: #1f1b2d; -webkit-mask: url(./portal/portal-mask-door.3325b1df73.svg) 0 0 / 100% 100%; mask: url(./portal/portal-mask-door.3325b1df73.svg) 0 0 / 100% 100%; }
.kit-door--camp .kit-win { -webkit-mask-image: url(./portal/portal-mask-camp.6b02ce3ed9.svg); mask-image: url(./portal/portal-mask-camp.6b02ce3ed9.svg); }
.kit-pic { position: absolute; inset: -14%; background: url(./portal/portal-demo.f3cea366a1.webp) center / cover; transition: transform .25s ease-out; will-change: transform; }
.kit-door img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.kit-row { display: flex; flex-wrap: wrap; gap: 16px; }
.kit-row figure { margin: 0; flex: 1 1 240px; border: 1px solid var(--rule); border-radius: 12px; padding: 12px; background: var(--surface); }
.kit-row img { display: block; margin: 0 auto 8px; height: auto; }
.kit-row figcaption { font-size: 0.88rem; line-height: 1.7; }
.kit-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 12px 0; }
.kit-form label { display: grid; gap: 4px; font-size: 0.88rem; }
.kit-form input, .kit-form select { width: 100%; min-width: 0; }
.kit-out { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-bottom: 12px; }
.kit-out img { height: auto; border-radius: 10px; background: repeating-conic-gradient(#e6dccb 0 25%, transparent 0 50%) 0 0 / 16px 16px; }
.kit-out code { overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .kit-pic { transition: none; } }
#kit-tilt[hidden] { display: none; }
.kit-form input[type="color"] { height: 42px; padding: 2px 4px; }