#miaoyan-preview {
  --miaoyan-navy: #12314b;
  --miaoyan-deep: #0b263b;
  --miaoyan-cream: #fffaf0;
  --miaoyan-yellow: #ffdc65;
  --miaoyan-mint: #73e1c7;
  --miaoyan-red: #ff6270;
  --miaoyan-white: #fffdf6;
  width: 100%;
  display: grid;
  place-items: start center;
  color: var(--miaoyan-white);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}
#miaoyan-preview * { box-sizing: border-box; }
#miaoyan-preview .miaoyan-phone {
  position: relative;
  width: min(100%, 390px);
  overflow: hidden;
  background: var(--miaoyan-navy);
  border-radius: 32px;
  box-shadow: 0 24px 70px rgba(0,0,0,.32);
}
#miaoyan-preview .miaoyan-screen { display: none; position: relative; background-color: var(--miaoyan-navy); }
#miaoyan-preview .miaoyan-screen.is-active { display: block; }
#miaoyan-preview button { font: inherit; cursor: pointer; }
#miaoyan-preview .miaoyan-home-art,
#miaoyan-preview .miaoyan-home-shade { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#miaoyan-preview .miaoyan-home-shade { background: linear-gradient(180deg, rgba(8,28,43,.18), rgba(8,28,43,.25) 38%, rgba(8,28,43,.92) 78%, var(--miaoyan-deep)); }
#miaoyan-preview .miaoyan-home-content { position: relative; min-height: 720px; padding: 96px 28px 30px; display: flex; flex-direction: column; justify-content: flex-end; text-align: center; }
#miaoyan-preview .miaoyan-brand-eye { width: 82px; height: 52px; margin: 0 auto 18px; border: 8px solid #fff2bb; border-radius: 70% 20% 70% 20%; transform: rotate(45deg); background: var(--miaoyan-mint); box-shadow: inset 0 0 0 4px var(--miaoyan-navy), 0 8px 18px rgba(0,0,0,.25); }
#miaoyan-preview .miaoyan-brand-eye span { display: block; width: 19px; height: 19px; margin: 9px auto; border: 5px solid var(--miaoyan-navy); border-radius: 50%; background: var(--miaoyan-yellow); }
#miaoyan-preview .miaoyan-kicker { align-self: center; color: var(--miaoyan-mint); background: rgba(10,37,56,.72); padding: 4px 10px; border-radius: 12px; font-size: 10px; letter-spacing: 3px; }
#miaoyan-preview h2 { margin: 8px 0 4px; color: var(--miaoyan-white); font-size: 34px; font-weight: 500; letter-spacing: 2px; }
#miaoyan-preview .miaoyan-home-content p { margin: 0 0 34px; color: rgba(255,255,255,.82); font-size: 14px; }
#miaoyan-preview .miaoyan-primary,
#miaoyan-preview .miaoyan-secondary { width: 100%; border: 0; }
#miaoyan-preview .miaoyan-primary { min-height: 54px; border-radius: 27px; color: var(--miaoyan-navy); background: linear-gradient(#ffe88b, #ffc950); box-shadow: 0 6px 0 #b87920; font-weight: 500; font-size: 17px; }
#miaoyan-preview .miaoyan-primary span { margin-left: 8px; font-size: 24px; }
#miaoyan-preview .miaoyan-secondary { min-height: 48px; margin-top: 18px; padding: 0 18px; border-radius: 24px; display: flex; align-items: center; color: var(--miaoyan-white); background: rgba(11,38,59,.86); }
#miaoyan-preview .miaoyan-secondary small { margin-left: auto; color: var(--miaoyan-yellow); }
#miaoyan-preview .miaoyan-features { margin-top: 22px; color: rgba(255,255,255,.58); font-size: 11px; }
#miaoyan-preview .miaoyan-subnav { height: 104px; padding: 30px 18px 12px; display: flex; align-items: center; background: var(--miaoyan-deep); }
#miaoyan-preview .miaoyan-subnav button,
#miaoyan-preview .miaoyan-game-head > button { width: 38px; height: 38px; border: 0; border-radius: 50%; color: var(--miaoyan-white); background: rgba(255,255,255,.13); font-size: 27px; }
#miaoyan-preview .miaoyan-subnav div { margin-left: 14px; display: flex; flex-direction: column; }
#miaoyan-preview .miaoyan-subnav strong { font-size: 21px; font-weight: 500; }
#miaoyan-preview .miaoyan-subnav small { color: rgba(255,255,255,.58); }
#miaoyan-preview .miaoyan-level-list { padding: 14px 18px 24px; display: grid; gap: 12px; }
#miaoyan-preview .miaoyan-level-card { position: relative; height: 100px; overflow: hidden; border: 0; border-radius: 18px; padding: 0; display: block; text-align: left; color: var(--miaoyan-white); background: linear-gradient(120deg, #385f78, #17384e); }
#miaoyan-preview .miaoyan-level-card img,
#miaoyan-preview .miaoyan-level-shade { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#miaoyan-preview .miaoyan-level-shade { background: linear-gradient(90deg, rgba(8,28,43,.92), rgba(8,28,43,.24)); }
#miaoyan-preview .miaoyan-level-card b { position: absolute; left: 12px; top: 12px; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--miaoyan-navy); background: var(--miaoyan-yellow); z-index: 2; }
#miaoyan-preview .miaoyan-level-card strong { position: absolute; left: 14px; bottom: 27px; z-index: 2; font-weight: 500; }
#miaoyan-preview .miaoyan-level-card small { position: absolute; left: 14px; bottom: 10px; z-index: 2; color: rgba(255,255,255,.65); }
#miaoyan-preview .miaoyan-level-card i { position: absolute; right: 14px; bottom: 13px; z-index: 2; font-size: 28px; font-style: normal; }
#miaoyan-preview .miaoyan-level-card em { position: absolute; right: 14px; top: 14px; color: rgba(255,255,255,.58); font-size: 11px; font-style: normal; }
#miaoyan-preview .miaoyan-level-two { background: linear-gradient(120deg, #4b4778, #202b55); }
#miaoyan-preview .miaoyan-level-three { background: linear-gradient(120deg, #267a83, #164d63); }
#miaoyan-preview .miaoyan-level-four { background: linear-gradient(120deg, #9b6137, #4e4136); }
#miaoyan-preview .miaoyan-level-five { background: linear-gradient(120deg, #4f783d, #244b3b); }
#miaoyan-preview .miaoyan-game-head { height: 74px; padding: 22px 14px 7px; display: flex; align-items: center; background: var(--miaoyan-deep); }
#miaoyan-preview .miaoyan-game-head div { margin-left: 11px; display: flex; flex-direction: column; }
#miaoyan-preview .miaoyan-game-head small { color: var(--miaoyan-mint); font-size: 10px; }
#miaoyan-preview .miaoyan-game-head strong { font-weight: 500; }
#miaoyan-preview .miaoyan-timer { margin-left: auto; padding: 8px 12px; border-radius: 18px; color: var(--miaoyan-navy); background: var(--miaoyan-yellow); }
#miaoyan-preview .miaoyan-status { height: 42px; padding: 0 14px; display: flex; align-items: center; background: var(--miaoyan-deep); }
#miaoyan-preview .miaoyan-status > span { color: var(--miaoyan-red); letter-spacing: 2px; }
#miaoyan-preview .miaoyan-status div { margin: 0 auto; display: flex; gap: 5px; }
#miaoyan-preview .miaoyan-status i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: rgba(255,255,255,.72); background: rgba(255,255,255,.13); font-size: 10px; font-style: normal; }
#miaoyan-preview .miaoyan-status i.is-found { color: var(--miaoyan-navy); background: var(--miaoyan-mint); }
#miaoyan-preview .miaoyan-board { background: var(--miaoyan-deep); }
#miaoyan-preview .miaoyan-scene { position: relative; width: 100%; aspect-ratio: 3/2; overflow: hidden; }
#miaoyan-preview .miaoyan-scene > img { display: block; width: 100%; height: 100%; object-fit: cover; }
#miaoyan-preview .miaoyan-scene-tag { position: absolute; left: 8px; top: 8px; width: 25px; height: 25px; border-radius: 50%; display: grid; place-items: center; color: var(--miaoyan-navy); background: rgba(255,255,255,.82); font-size: 11px; font-weight: 500; }
#miaoyan-preview .miaoyan-divider { height: 24px; display: grid; place-items: center; color: rgba(255,255,255,.65); font-size: 10px; letter-spacing: 2px; }
#miaoyan-preview .miaoyan-visual-patch { position: absolute; z-index: 1; transform: translate(-50%,-50%); overflow: hidden; border-radius: 50%; pointer-events: none; -webkit-mask-image: radial-gradient(circle, #000 58%, rgba(0,0,0,.86) 72%, transparent 100%); mask-image: radial-gradient(circle, #000 58%, rgba(0,0,0,.86) 72%, transparent 100%); }
#miaoyan-preview .miaoyan-visual-patch img { position: absolute; max-width: none; object-fit: fill; }
#miaoyan-preview .miaoyan-diff { position: absolute; z-index: 2; width: 48px; height: 48px; transform: translate(-50%,-50%); border: 0; border-radius: 50%; display: grid; place-items: center; color: var(--miaoyan-yellow); background: transparent; }
#miaoyan-preview .miaoyan-diff.is-found::after { content: '✓'; position: absolute; inset: 2px; border: 4px solid #50e188; border-radius: 50%; display: grid; place-items: center; color: var(--miaoyan-white); background: rgba(28,123,78,.25); box-shadow: 0 0 0 2px var(--miaoyan-white); }
#miaoyan-preview .miaoyan-diff.is-hint::after { content: ''; position: absolute; inset: -2px; border: 4px solid var(--miaoyan-yellow); border-radius: 50%; animation: miaoyan-pulse .7s infinite alternate; }
#miaoyan-preview .miaoyan-toolbar { min-height: 70px; padding: 10px 14px 16px; display: flex; align-items: center; background: var(--miaoyan-deep); }
#miaoyan-preview .miaoyan-toolbar > span { display: flex; flex-direction: column; color: rgba(255,255,255,.68); font-size: 11px; }
#miaoyan-preview .miaoyan-toolbar > span small { color: var(--miaoyan-mint); }
#miaoyan-preview .miaoyan-toolbar button { margin-left: auto; min-width: 102px; height: 46px; border: 0; border-radius: 23px; display: grid; grid-template-columns: 28px 1fr; grid-template-rows: 1fr 1fr; align-items: center; color: var(--miaoyan-navy); background: var(--miaoyan-yellow); }
#miaoyan-preview .miaoyan-toolbar button > b { align-self: end; font-weight: 500; }
#miaoyan-preview .miaoyan-toolbar button > small { align-self: start; }
#miaoyan-preview .miaoyan-toolbar button::first-letter { grid-row: 1/3; font-size: 23px; }
#miaoyan-preview .miaoyan-result { position: absolute; inset: 0; z-index: 9; padding: 40px 25px; background: rgba(6,23,35,.77); }
#miaoyan-preview .miaoyan-result > div { margin-top: 170px; padding: 30px 24px; border-radius: 24px; text-align: center; color: var(--miaoyan-navy); background: var(--miaoyan-cream); }
#miaoyan-preview .miaoyan-result span { font-size: 40px; color: var(--miaoyan-yellow); }
#miaoyan-preview .miaoyan-result h3 { margin: 6px 0; font-size: 24px; font-weight: 500; }
#miaoyan-preview .miaoyan-result p { margin: 0; color: #667985; }
#miaoyan-preview .miaoyan-result strong { display: block; margin: 16px 0; color: #ffc83d; font-size: 30px; letter-spacing: 6px; }
#miaoyan-preview .miaoyan-result button { width: 100%; height: 45px; border: 0; border-radius: 23px; color: var(--miaoyan-navy); background: var(--miaoyan-yellow); font-weight: 500; }
@keyframes miaoyan-pulse { from { transform: scale(.8); } to { transform: scale(1.2); } }
@media (max-width: 420px) {
  #miaoyan-preview .miaoyan-phone { border-radius: 24px; }
}