html, body { margin: 0; height: 100%; background: #e6dcc6; overflow: hidden;
  font-family: "Kaiti SC", "STKaiti", "KaiTi", "PingFang SC", serif; color: #2a2a2a; }
#wrap { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
#stage { width: min(100vw, 177.78vh); height: auto; display: block; box-shadow: 0 10px 40px rgba(0,0,0,.18); }
#stage text { font-family: inherit; }

/* 线稿默认样式 */
#scene path, #scene line, #scene polyline, #scene polygon, #scene circle, #scene ellipse, #scene rect {
  fill: none; stroke: #2a2a2a; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
#scene .k { fill: #2a2a2a; stroke: none; }
#scene .r { fill: #d2382c; stroke: none; }
#scene .pf { fill: #fbf6ea; }
#scene .rs { stroke: #d2382c; }
#scene .thin { stroke-width: 2.5; }
#scene .fat { stroke-width: 6; }
#scene .soft { stroke: #a89c84; stroke-width: 2.5; }
#scene text { fill: #2a2a2a; stroke: none; }
#scene text.rt { fill: #d2382c; }
#scene text.w { fill: #fbf6ea; }

/* 小动作 */
.bob { animation: bob .45s ease-in-out infinite alternate; }
@keyframes bob { to { transform: translateY(-8px); } }
.wig { transform-box: fill-box; transform-origin: 50% 100%; animation: wig .6s ease-in-out infinite alternate; }
@keyframes wig { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
.rise { animation: rise 2s linear infinite; }
@keyframes rise { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-60px); opacity: 0; } }
.tw { animation: tw .8s ease-in-out infinite alternate; }
@keyframes tw { from { opacity: .15; } to { opacity: 1; } }
.pulse { transform-box: fill-box; transform-origin: center; animation: pulse 1.3s ease-out infinite; }
@keyframes pulse { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.15); opacity: 0; } }
.spin { transform-box: fill-box; transform-origin: center; animation: spin 2.5s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.shake { animation: shake .12s linear infinite alternate; }
@keyframes shake { from { transform: translate(-3px, 1px); } to { transform: translate(3px, -1px); } }
.d1 { animation-delay: -.25s; } .d2 { animation-delay: -.6s; } .d3 { animation-delay: -.9s; } .d4 { animation-delay: -1.3s; }

/* HUD */
#seal { transform-box: fill-box; transform-origin: center; }
#title { font-weight: bold; }
#tl path { stroke: #2a2a2a; stroke-width: 2; fill: none; opacity: .5; }
#tl text { font-size: 14px; fill: #8a7f6a; }
#tl text.on { fill: #d2382c; font-weight: bold; }
#dot { fill: #d2382c; }

/* 覆盖层与控制条 */
.overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; background: rgba(251,246,234,.94); gap: 14px; }
.overlay.hidden { display: none; }
.overlay h1 { font-size: clamp(36px, 7vw, 84px); margin: 0; letter-spacing: .1em; }
.overlay p, .overlay small { margin: 0; color: #6b6150; font-size: 20px; }
.overlay small { font-size: 15px; }
.overlay button { font: inherit; font-size: 26px; padding: 12px 36px; border: 3px solid #2a2a2a;
  border-radius: 40px; background: #fbf6ea; cursor: pointer; box-shadow: 4px 4px 0 #d2382c; }
.overlay button:hover, .overlay button:focus-visible { background: #d2382c; color: #fbf6ea; outline: none; }
#ctrl { position: absolute; right: 16px; bottom: 16px; display: flex; gap: 8px; opacity: 0; transition: opacity .3s; }
#wrap:hover #ctrl, #ctrl:focus-within { opacity: 1; }
#ctrl button { font-size: 18px; width: 42px; height: 42px; border-radius: 50%; border: 2px solid #2a2a2a;
  background: #fbf6ea; cursor: pointer; }