.site-content-slot { padding-top: 0 !important; }
.site-content-slot ~ .site-bottom { display: none; }
.site-content-slot .qj-page-base { width: 100%; min-height: 100vh; height: 100vh; box-sizing: border-box; position: relative; overflow: hidden; display: grid; place-items: center; padding: 24px; color: #111; font-family: "ym-font", "Ali_PuHuiTi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background-color: #e7e3dc; background-position: center; background-size: cover; background-repeat: no-repeat; }
.site-content-slot .qj-page-base::before { content: ""; position: absolute; inset: 0; z-index: 2; background: rgba(13, 12, 10, .48); opacity: 0; pointer-events: none; transition: opacity 780ms ease; }
.site-content-slot .qj-page-base:has(.qj-card-stack.is-open)::before { opacity: 1; }
.site-content-slot .qj-stage { position: relative; width: min(92vw, 980px); height: min(74vh, 620px); box-sizing: border-box; }
.site-content-slot .qj-card-layer, .site-content-slot .qj-search-layer { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity 620ms ease, transform 780ms cubic-bezier(.2, .82, .2, 1); }
.site-content-slot .qj-card-layer { z-index: 3; }
.site-content-slot .qj-search-layer { z-index: 4; pointer-events: none; }
.site-content-slot .qj-page-base:has(.qj-card-stack.is-open) .qj-search-layer { z-index: 1; opacity: 0; transform: scale(.94) translateY(10px); }
.site-content-slot .qj-form { width: min(60vw, 320px); height: 52px; box-sizing: border-box; display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; border: 1px solid rgba(18, 18, 16, .08); border-radius: 999px; background: rgba(255, 255, 255, .44); box-shadow: 0 14px 42px rgba(28, 24, 18, .08); overflow: hidden; pointer-events: auto; backdrop-filter: blur(14px); transition: width 520ms cubic-bezier(.22, 1, .36, 1), background-color 360ms ease, box-shadow 360ms ease, border-color 360ms ease; }
.site-content-slot .qj-form:focus-within { width: min(76vw, 520px); background: rgba(255, 255, 255, .94); border-color: rgba(18, 18, 16, .16); box-shadow: 0 22px 64px rgba(28, 24, 18, .14); }
.site-content-slot .qj-form.is-invalid { border-color: rgba(199, 63, 36, .55); animation: qj-shake 220ms ease; }
.site-content-slot .qj-search-mark { width: 54px; height: 52px; display: inline-flex; align-items: center; justify-content: center; color: rgba(17, 17, 17, .52); font-size: 24px; }
.site-content-slot .qj-input { width: 100%; min-width: 0; height: 52px; box-sizing: border-box; border: 0; outline: none; background: transparent; padding: 0 22px 0 2px; color: #111; font-size: 16px; font-weight: 500; line-height: 52px; text-align: left; }
.site-content-slot .qj-input::placeholder { color: rgba(17, 17, 17, .38); }
.site-content-slot .qj-card-stack { position: relative; width: 230px; height: 306px; border: 0; padding: 0; background: transparent; cursor: pointer; transform: translateY(2px); }
.site-content-slot .qj-card { position: absolute; left: 50%; top: 50%; width: 230px; height: 306px; box-sizing: border-box; overflow: hidden; border: 1px solid var(--card-border); border-radius: 24px; color: var(--card-title); background: var(--card-bg); box-shadow: 0 18px 48px rgba(45, 42, 36, .11), 0 2px 8px rgba(45, 42, 36, .05); transform: translate3d(-50%, -50%, 0) rotate(var(--stack-rotate)); transition: transform 1040ms cubic-bezier(.2, .86, .2, 1), box-shadow 360ms ease; will-change: transform; user-select: none; -webkit-tap-highlight-color: transparent; }
.site-content-slot .qj-card.is-selected { z-index: 8; }
.site-content-slot .qj-card-stack.is-closing .qj-card.is-selected { z-index: 9; }
.site-content-slot .qj-card[data-target="google"] { --stack-rotate: 13deg; --spread-x: 280px; --spread-y: -166px; --spread-rotate: 1deg; --card-bg: #fff1f2; --card-border: #fecdd3; --card-title: #9f1239; --card-body: #be123c; --card-accent: #e11d48; }
.site-content-slot .qj-card[data-target="baidu"] { --stack-rotate: -2deg; --spread-x: 0px; --spread-y: -166px; --spread-rotate: -1deg; --card-bg: #eff6ff; --card-border: #bfdbfe; --card-title: #1e3a8a; --card-body: #1d4ed8; --card-accent: #2563eb; }
.site-content-slot .qj-card[data-target="pixiv"] { --stack-rotate: -17deg; --spread-x: -280px; --spread-y: -166px; --spread-rotate: 1deg; --card-bg: #eff6ff; --card-border: #bfdbfe; --card-title: #1e40af; --card-body: #1d4ed8; --card-accent: #0096fa; }
.site-content-slot .qj-card[data-target="github"] { --stack-rotate: 21deg; --spread-x: -280px; --spread-y: 166px; --spread-rotate: -1deg; --card-bg: #f5f3ff; --card-border: #ddd6fe; --card-title: #5b21b6; --card-body: #6d28d9; --card-accent: #7c3aed; }
.site-content-slot .qj-card[data-target="youtube"] { --stack-rotate: -9deg; --spread-x: 0px; --spread-y: 166px; --spread-rotate: 1deg; --card-bg: #fff7ed; --card-border: #fed7aa; --card-title: #9a3412; --card-body: #c2410c; --card-accent: #ea580c; }
.site-content-slot .qj-card[data-target="stackoverflow"] { --stack-rotate: 7deg; --spread-x: 280px; --spread-y: 166px; --spread-rotate: -1deg; --card-bg: #fffbeb; --card-border: #fde68a; --card-title: #92400e; --card-body: #b45309; --card-accent: #d97706; }
.site-content-slot .qj-card-stack.is-open .qj-card { pointer-events: auto; transform: translate3d(calc(-50% + var(--spread-x)), calc(-50% + var(--spread-y)), 0) rotate(var(--spread-rotate)); }
.site-content-slot .qj-card-stack.is-closing .qj-card { pointer-events: none; }
.site-content-slot .qj-card-stack.is-open .qj-card:hover { box-shadow: 0 25px 62px rgba(25, 23, 20, .19), 0 4px 12px rgba(25, 23, 20, .08); transform: translate3d(calc(-50% + var(--spread-x)), calc(-50% + var(--spread-y) - 7px), 0) rotate(calc(var(--spread-rotate) + 1.2deg)); }
.site-content-slot .qj-card-button { position: absolute; inset: 0; border: 0; padding: 26px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.site-content-slot .qj-card-button:focus-visible { outline: 3px solid var(--card-accent); outline-offset: -8px; border-radius: 22px; }
.site-content-slot .qj-card-icon { width: 62px; height: 62px; color: var(--card-accent); }
.site-content-slot .qj-card-copy { display: block; pointer-events: none; }
.site-content-slot .qj-card-kicker { display: block; margin-bottom: 9px; color: var(--card-accent); font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: .06em; text-transform: uppercase; }
.site-content-slot .qj-card-title { display: block; color: var(--card-title); font-size: 25px; font-weight: 760; line-height: 1.08; letter-spacing: 0; }
.site-content-slot .qj-card-desc { display: block; margin-top: 11px; color: var(--card-body); font-size: 13px; font-weight: 520; line-height: 1.55; }
.site-content-slot .qj-current { position: absolute; left: 50%; top: calc(50% - 46px); z-index: 5; transform: translateX(-50%); color: rgba(17, 17, 17, .46); font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; transition: opacity 400ms ease; }
.site-content-slot .qj-page-base:has(.qj-card-stack.is-open) .qj-current { opacity: 0; }
.site-content-slot .qj-hint { position: absolute; left: 50%; top: calc(50% + 46px); z-index: 5; min-height: 18px; margin: 0; color: rgba(17, 17, 17, .52); font-size: 13px; line-height: 18px; opacity: 0; pointer-events: none; transform: translate(-50%, 0); transition: opacity 180ms ease, color 180ms ease; }
.site-content-slot .qj-hint.is-visible { opacity: 1; color: rgba(199, 63, 36, .86); }
.site-content-slot .qj-stack-label { position: absolute; left: 50%; bottom: calc(50% - 242px); transform: translateX(-50%); color: rgba(17, 17, 17, .42); font-size: 12px; font-weight: 600; letter-spacing: .04em; white-space: nowrap; pointer-events: none; transition: opacity 260ms ease; }
.site-content-slot .qj-card-stack.is-open + .qj-stack-label { opacity: 0; }
@keyframes qj-shake { 0%, 100% { transform: translateX(0); } 35% { transform: translateX(-5px); } 70% { transform: translateX(5px); } }
@media (max-width: 760px) { .site-content-slot .qj-stage { width: 100%; height: 78vh; } .site-content-slot .qj-card-stack { width: 136px; height: 190px; } .site-content-slot .qj-card { width: 136px; height: 190px; border-radius: 18px; } .site-content-slot .qj-card-button { padding: 16px; } .site-content-slot .qj-card-icon { width: 38px; height: 38px; } .site-content-slot .qj-card-kicker { margin-bottom: 6px; font-size: 9px; } .site-content-slot .qj-card-title { font-size: 17px; } .site-content-slot .qj-card-desc { margin-top: 6px; font-size: 10px; line-height: 1.35; } .site-content-slot .qj-card[data-target="google"] { --spread-x: 122px; --spread-y: -148px; } .site-content-slot .qj-card[data-target="baidu"] { --spread-x: 0px; --spread-y: -148px; } .site-content-slot .qj-card[data-target="pixiv"] { --spread-x: -122px; --spread-y: -148px; } .site-content-slot .qj-card[data-target="github"] { --spread-x: -122px; --spread-y: 148px; } .site-content-slot .qj-card[data-target="youtube"] { --spread-x: 0px; --spread-y: 148px; } .site-content-slot .qj-card[data-target="stackoverflow"] { --spread-x: 122px; --spread-y: 148px; } }
@media (max-width: 640px) { .site-content-slot .qj-page-base { padding: 16px; } .site-content-slot .qj-form, .site-content-slot .qj-form:focus-within { width: min(88vw, 390px); height: 50px; grid-template-columns: 52px minmax(0, 1fr); } .site-content-slot .qj-search-mark { width: 52px; height: 50px; font-size: 23px; } .site-content-slot .qj-input { height: 50px; padding-right: 18px; font-size: 15px; line-height: 50px; } }