.xp-tutorial-room { position: absolute; inset: 0; z-index: 110; overflow: hidden; background: #000; color: #333; font: 12px SimSun, "Songti SC", serif; }
.xp-tutorial-room [hidden] { display: none !important; }
.xp-tutorial-room-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; outline: none; }

.xp-tutorial-room-top { position: absolute; left: 0; top: 0; right: 0; z-index: 160; height: 36px; border-bottom: 3px solid #C2187A; background: linear-gradient(#FFD9F1 0%, #FFA6DA 48%, #FF7FC6 52%, #FF96D0 100%); box-shadow: inset 0 1px #FFFFFF, 0 2px 0 #00000040; }
.xp-tutorial-room-logo { position: absolute; left: 10px; top: 6px; color: #FFFFFF; font: bold 20px SimHei, "Microsoft YaHei", sans-serif; line-height: 24px; letter-spacing: 1px; text-shadow: -2px -2px 0 #D1006F, 2px -2px 0 #D1006F, -2px 2px 0 #D1006F, 2px 2px 0 #D1006F, 0 2px 0 #D1006F, 0 -2px 0 #D1006F, 2px 0 0 #D1006F, -2px 0 0 #D1006F, 3px 4px 0 #7A0046; }
.xp-tutorial-room-logo span { display: inline-block; position: relative; top: -3px; margin-left: 8px; padding: 0 5px; border: 2px solid #FF8A00; border-radius: 8px; color: #E60012; background: #FFF200; font: bold 12px SimHei, sans-serif; line-height: 16px; letter-spacing: 0; text-shadow: none; transform: rotate(-6deg); }
.xp-tutorial-room-goal { position: absolute; left: 50%; top: 6px; height: 20px; padding: 0 12px; transform: translateX(-50%); border: 2px solid #FF8A00; border-radius: 12px; color: #7A3B00; background: linear-gradient(#FFFBD0, #FFE45C); box-shadow: 1px 2px 0 #00000040; font: bold 12px SimSun, "Songti SC", serif; line-height: 20px; white-space: nowrap; pointer-events: none; }
.xp-tutorial-room-goal b, .xp-tutorial-room-guide-text b { color: #E60012; }

.xp-tutorial-room-candy { position: relative; height: 26px; padding: 0 14px; overflow: hidden; border: 2px solid #A23E00; border-radius: 13px; color: #FFFFFF; background: linear-gradient(#FFD27A, #FF9C1F 55%, #FF7A00); box-shadow: inset 0 -2px 0 #0000002e, 1px 2px 0 #0000004d; font: bold 13px SimHei, sans-serif; letter-spacing: 1px; white-space: nowrap; text-shadow: -1px -1px 0 #A23E00, 1px -1px 0 #A23E00, -1px 1px 0 #A23E00, 1px 1px 0 #A23E00, 0 1px 0 #A23E00, 0 -1px 0 #A23E00, 1px 0 0 #A23E00, -1px 0 0 #A23E00; --xp-cursor-kind: link; }
.xp-tutorial-room-candy::before { content: ""; position: absolute; left: 5px; right: 5px; top: 2px; height: 9px; border-radius: 8px; background: #FFFFFF8c; pointer-events: none; }
.xp-tutorial-room-candy:hover { filter: brightness(1.12); }
.xp-tutorial-room-candy:active { transform: translateY(1px); box-shadow: inset 0 1px 0 #00000033; }
.xp-tutorial-room-save, .xp-tutorial-room-picker-done { border-color: #2E7D00; background: linear-gradient(#D7FF8A, #7ED321 55%, #4CAF10); text-shadow: -1px -1px 0 #2E7D00, 1px -1px 0 #2E7D00, -1px 1px 0 #2E7D00, 1px 1px 0 #2E7D00, 0 1px 0 #2E7D00, 0 -1px 0 #2E7D00, 1px 0 0 #2E7D00, -1px 0 0 #2E7D00; }
.xp-tutorial-room-back { border-color: #6A1F80; background: linear-gradient(#F3C6FF, #C77DFF 55%, #A64DFF); text-shadow: -1px -1px 0 #6A1F80, 1px -1px 0 #6A1F80, -1px 1px 0 #6A1F80, 1px 1px 0 #6A1F80, 0 1px 0 #6A1F80, 0 -1px 0 #6A1F80, 1px 0 0 #6A1F80, -1px 0 0 #6A1F80; }
.xp-tutorial-room-save { position: absolute; right: 100px; top: 4px; }
.xp-tutorial-room-back { position: absolute; right: 8px; top: 4px; }
.xp-tutorial-room-music { position: absolute; right: 168px; top: 4px; width: 40px; padding: 0; border-color: #1F5FA8; background: linear-gradient(#C8ECFF, #5BB8FF 55%, #2A8CF0); }
.xp-tutorial-room-music svg { position: relative; display: block; margin: 1px auto 0; }
.xp-tutorial-room-music.is-off { filter: saturate(.35); }
.xp-tutorial-room-music.is-off:hover { filter: saturate(.35) brightness(1.12); }
.xp-tutorial-room-save.is-wanted { animation: xp-tutorial-room-blink .5s steps(1, end) infinite; }
.xp-tutorial-room-tool.is-wanted { animation: xp-tutorial-room-ring .5s steps(1, end) infinite; }

.xp-tutorial-room-toolbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 150; display: flex; justify-content: center; align-items: center; gap: 10px; height: 76px; border-top: 3px solid #C2187A; background: radial-gradient(circle, #FFFFFF 2px, transparent 2.5px) 0 0 / 14px 14px, linear-gradient(#FFE3F4, #FFB8E1); box-shadow: inset 0 2px #FFFFFF, 0 -2px 0 #00000033; }
.xp-tutorial-room-tool { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 82px; height: 62px; padding: 4px 0 0; border: 3px solid var(--xp-tool, #FF4FA3); border-radius: 12px; background: linear-gradient(#FFFFFF, #FFF5C8); box-shadow: 2px 3px 0 #00000040; --xp-cursor-kind: link; }
.xp-tutorial-room-tool img { display: block; width: 48px; height: 32px; border: 2px solid #FFFFFF; outline: 1px solid #888888; image-rendering: auto; }
.xp-tutorial-room-tool span { padding: 0 8px; border-radius: 8px; color: #FFFFFF; background: var(--xp-tool); font: bold 12px SimHei, sans-serif; line-height: 16px; letter-spacing: 1px; text-shadow: 1px 1px 0 #00000059; }
.xp-tutorial-room-tool:hover { z-index: 1; transform: scale(1.1); border-color: #FFB400; }
.xp-tutorial-room-tool:active { transform: scale(1.04) translateY(1px); }
.xp-tutorial-room-tool.is-open { border-color: #FFB400; background: linear-gradient(#FFF9B0, #FFD84D); }
.xp-tutorial-room-tool[data-category="wall"] { --xp-tool: #FF4FA3; }
.xp-tutorial-room-tool[data-category="floor"] { --xp-tool: #FF8A00; }
.xp-tutorial-room-tool[data-category="view"] { --xp-tool: #2F9BFF; }
.xp-tutorial-room-tool[data-category="curtain"] { --xp-tool: #A34DFF; }
.xp-tutorial-room-tool[data-category="bedding"] { --xp-tool: #23B14D; }
.xp-tutorial-room-tool[data-category="wood"] { --xp-tool: #A0612B; }

.xp-tutorial-room-guide { position: absolute; left: 24px; right: 24px; bottom: 94px; z-index: 165; min-height: 40px; padding: 18px 18px 36px; border: 3px solid #FF9C00; border-radius: 14px; background: #FFFDE8; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #C26A00, 4px 5px 0 #0000004d; animation: xp-tutorial-room-pop .3s steps(4, end); }
.xp-tutorial-room-guide::before { content: ""; position: absolute; inset: 5px; border: 1px dashed #FFC266; border-radius: 9px; pointer-events: none; }
.xp-tutorial-room-guide-tag { position: absolute; left: 12px; top: -15px; padding: 1px 12px; border: 2px solid #FFFFFF; border-radius: 10px; color: #FFFFFF; background: linear-gradient(#FF7A9C, #FF3366); box-shadow: 0 0 0 2px #B3003B; font: bold 13px SimHei, sans-serif; line-height: 18px; letter-spacing: 1px; transform: rotate(-3deg); text-shadow: -1px -1px 0 #B3003B, 1px -1px 0 #B3003B, -1px 1px 0 #B3003B, 1px 1px 0 #B3003B; }
.xp-tutorial-room-guide-text { position: relative; color: #333333; font: 12px SimSun, "Songti SC", serif; line-height: 20px; }
.xp-tutorial-room-next { position: absolute; right: 14px; bottom: 8px; }

.xp-tutorial-room-picker { position: absolute; left: 50%; bottom: 92px; z-index: 170; padding: 22px 16px 12px; transform: translateX(-50%); transform-origin: 50% 100%; border: 4px solid #FF7FC6; border-radius: 16px; background: #FFFFFF; box-shadow: 0 0 0 2px #C2187A, 4px 5px 0 #0000004d; animation: xp-tutorial-room-pop-centred .3s steps(4, end); }
.xp-tutorial-room-picker-title { position: absolute; left: 16px; top: -16px; padding: 2px 16px; border: 3px solid #FFFFFF; border-radius: 12px; color: #FFFFFF; background: linear-gradient(#FF9AD5, #FF4FA3); box-shadow: 0 0 0 2px #C2187A; font: bold 14px SimHei, sans-serif; letter-spacing: 2px; text-shadow: -1px -1px 0 #C2187A, 1px -1px 0 #C2187A, -1px 1px 0 #C2187A, 1px 1px 0 #C2187A; }
.xp-tutorial-room-picker-close { position: absolute; right: -13px; top: -13px; width: 26px; height: 26px; padding: 0; border: 2px solid #FFFFFF; border-radius: 50%; color: #FFFFFF; background: radial-gradient(circle at 35% 30%, #FF8A8A, #E60012 70%); box-shadow: 0 0 0 2px #8A0000, 1px 2px 0 #0000004d; font: bold 16px Arial, sans-serif; line-height: 20px; --xp-cursor-kind: link; }
.xp-tutorial-room-picker-list { display: flex; gap: 10px; }
.xp-tutorial-room-swatch { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 78px; padding: 6px 0 4px; border: 2px solid #FFB6DE; border-radius: 8px; color: #7A2A55; background: #FFF0F8; font: 12px SimSun, "Songti SC", serif; white-space: nowrap; --xp-cursor-kind: link; }
.xp-tutorial-room-swatch img { display: block; width: 60px; height: 45px; border: 1px solid #999999; image-rendering: auto; }
.xp-tutorial-room-swatch:hover { border-color: #FF4FA3; background: #FFE0F1; }
.xp-tutorial-room-swatch i { position: absolute; padding: 0 3px; border: 1px solid #FFFFFF; color: #FFFFFF; font: bold 11px SimHei, sans-serif; font-style: normal; line-height: 14px; white-space: nowrap; }
.xp-tutorial-room-swatch-free { right: -6px; top: -8px; border-radius: 3px; background: #E60012; transform: rotate(12deg); }
.xp-tutorial-room-swatch-using { display: none; left: -6px; top: -8px; border-radius: 3px; background: #23B14D; transform: rotate(-12deg); }
.xp-tutorial-room-swatch.is-current { padding: 5px 0 3px; border: 3px solid #FFB400; background: #FFF6C2; }
.xp-tutorial-room-swatch.is-current .xp-tutorial-room-swatch-using { display: block; }
.xp-tutorial-room-swatch.is-current .xp-tutorial-room-swatch-free { display: none; }
.xp-tutorial-room-picker-done { display: block; margin: 10px auto 0; }

.xp-tutorial-room-arrow { position: absolute; z-index: 175; width: 44px; height: 54px; pointer-events: none; animation: xp-tutorial-room-bob .6s steps(2, end) infinite alternate; }
.xp-tutorial-room-arrow svg { display: block; filter: drop-shadow(2px 2px 0 #00000059); }
.xp-tutorial-room-arrow.is-up { animation-name: xp-tutorial-room-bob-up; }
.xp-tutorial-room-arrow.is-up svg { transform: rotate(180deg); }
.xp-tutorial-room-drag { position: absolute; left: 50%; top: 44%; z-index: 140; transform: translate(-50%, -50%); color: #FFF200; font: bold 18px SimHei, sans-serif; white-space: nowrap; pointer-events: none; text-shadow: -2px -2px 0 #000000, 2px -2px 0 #000000, -2px 2px 0 #000000, 2px 2px 0 #000000, 0 2px 0 #000000, 0 -2px 0 #000000, 2px 0 0 #000000, -2px 0 0 #000000; animation: xp-tutorial-room-flicker 1s steps(1, end) infinite; }
.xp-tutorial-room-drag::before { content: "◀ "; }
.xp-tutorial-room-drag::after { content: " ▶"; }
.xp-tutorial-room-tip { position: absolute; z-index: 158; padding: 1px 4px; border: 1px solid #000000; color: #000000; background: #FFFFE1; font: 12px SimSun, "Songti SC", serif; line-height: 16px; white-space: nowrap; pointer-events: none; }
.xp-tutorial-room-burst { position: absolute; left: 50%; top: 36%; z-index: 190; isolation: isolate; display: flex; align-items: center; justify-content: center; width: 220px; height: 130px; margin: -65px 0 0 -110px; color: #E60012; font: bold 24px SimHei, sans-serif; white-space: nowrap; pointer-events: none; text-shadow: -2px -2px 0 #FFFFFF, 2px -2px 0 #FFFFFF, -2px 2px 0 #FFFFFF, 2px 2px 0 #FFFFFF, 0 2px 0 #FFFFFF, 0 -2px 0 #FFFFFF, 2px 0 0 #FFFFFF, -2px 0 0 #FFFFFF, 3px 3px 0 #8A0000; animation: xp-tutorial-room-pop .35s steps(4, end); }
.xp-tutorial-room-burst::before, .xp-tutorial-room-burst::after { content: ""; position: absolute; z-index: -1; clip-path: polygon(50% 0%, 57% 14.7%, 69.1% 3.8%, 70% 20.1%, 85.4% 14.6%, 79.9% 30%, 96.2% 30.9%, 85.3% 43%, 100% 50%, 85.3% 57%, 96.2% 69.1%, 79.9% 70%, 85.4% 85.4%, 70% 79.9%, 69.1% 96.2%, 57% 85.3%, 50% 100%, 43% 85.3%, 30.9% 96.2%, 30% 79.9%, 14.6% 85.4%, 20.1% 70%, 3.8% 69.1%, 14.7% 57%, 0% 50%, 14.7% 43%, 3.8% 30.9%, 20.1% 30%, 14.6% 14.6%, 30% 20.1%, 30.9% 3.8%, 43% 14.7%); }
.xp-tutorial-room-burst::before { inset: 0; background: #E60012; }
.xp-tutorial-room-burst::after { inset: 5px; background: radial-gradient(#FFFDE0 30%, #FFE600 75%); }

@keyframes xp-tutorial-room-ring { 50% { border-color: #FFF200; box-shadow: 0 0 0 3px #E60012, 2px 3px 0 #00000040; } }
@keyframes xp-tutorial-room-blink { 50% { filter: brightness(1.3); box-shadow: 0 0 0 3px #FFF200, 0 0 0 5px #E60012; } }
@keyframes xp-tutorial-room-pop { 0% { transform: scale(.3); } 60% { transform: scale(1.12); } 80% { transform: scale(.95); } 100% { transform: scale(1); } }
@keyframes xp-tutorial-room-pop-centred { 0% { transform: translateX(-50%) scale(.3); } 60% { transform: translateX(-50%) scale(1.12); } 80% { transform: translateX(-50%) scale(.95); } 100% { transform: translateX(-50%) scale(1); } }
@keyframes xp-tutorial-room-bob { to { margin-top: -10px; } }
@keyframes xp-tutorial-room-bob-up { to { margin-top: 10px; } }
@keyframes xp-tutorial-room-flicker { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .xp-tutorial-room-save.is-wanted, .xp-tutorial-room-tool.is-wanted, .xp-tutorial-room-arrow, .xp-tutorial-room-drag { animation: none; } }