.click-guide-layer { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; font-family: system-ui, sans-serif; color: #382b22; }
.click-guide-mask-visual { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.click-guide-mask { position: fixed; background: transparent; pointer-events: auto; touch-action: none; }
.click-guide-highlight.yui-guide-spotlight-frame { transition: none; animation: none !important; }
.click-guide-highlight.yui-guide-spotlight-frame.animate-focus { transition: left .3s ease, top .3s ease, width .3s ease, height .3s ease, border-radius .3s ease; }
.click-guide-highlight .yui-guide-spotlight-chrome { inset: 0; }
.click-guide-highlight.is-circle-image .yui-guide-spotlight-decoration { display: none; }
.click-guide-highlight.is-compact .yui-guide-spotlight-decoration { display: none; }
.click-guide-highlight.is-compact.has-cat-ears .yui-guide-spotlight-ear-left,
.click-guide-highlight.is-compact.has-cat-ears .yui-guide-spotlight-ear-right { display: block; top: -14px; width: 45%; height: 17px; }
.click-guide-highlight.is-compact.has-cat-ears .yui-guide-spotlight-ear-left { left: 0; }
.click-guide-highlight.is-compact.has-cat-ears .yui-guide-spotlight-ear-right { right: 0; }
.click-guide-highlight.is-click-step { z-index: 1; }
.click-guide-highlight:not(.is-click-step) .click-guide-ghost-cursor { display: none; }
.click-guide-ghost-cursor { position: absolute; left: calc(50% - 16px); top: calc(50% - 16px); width: 32px; height: 32px; filter: drop-shadow(0 10px 20px rgba(48, 82, 128, .22)) drop-shadow(0 2px 8px rgba(240, 139, 84, .22)); animation: click-guide-cursor-float 2.2s ease-in-out infinite; }
.click-guide-ghost-cursor::before, .click-guide-ghost-cursor::after { content: ''; position: absolute; inset: 0; background: transparent center / contain no-repeat; }
.click-guide-ghost-cursor::before { background-image: url('/static/assets/tutorial/ghost-cursor/default-ghost-cursor.png'); animation: click-guide-cursor-default 2.2s steps(1, end) infinite; }
.click-guide-ghost-cursor::after { background-image: url('/static/assets/tutorial/ghost-cursor/click-ghost-cursor.png'); opacity: 0; animation: click-guide-cursor-click 2.2s steps(1, end) infinite; }
@keyframes click-guide-cursor-float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-5px, -4px); } }
@keyframes click-guide-cursor-default { 0%, 69% { opacity: 1; } 70%, 80% { opacity: 0; } 81%, 100% { opacity: 1; } }
@keyframes click-guide-cursor-click { 0%, 69% { opacity: 0; } 70%, 80% { opacity: 1; } 81%, 100% { opacity: 0; } }
.click-guide-card { position: fixed; z-index: 2; box-sizing: border-box; width: min(360px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; padding: 18px 20px 18px; background-color: #fff8f2; background-image: linear-gradient(160deg, rgba(255, 252, 248, .65), rgba(255, 244, 235, .65)), url('/static/assets/tutorial/click-guide/card-background.png'); background-position: center; background-size: cover; background-repeat: no-repeat; border-radius: 14px; box-shadow: 0 20px 52px rgba(58, 42, 30, .2), 0 8px 22px rgba(58, 42, 30, .12); pointer-events: auto; line-height: 1.6; scrollbar-gutter: stable; }
.click-guide-card h2 { font-size: 19px; line-height: 1.35; color: #382b22; margin: 8px 0; }
.click-guide-card p { font-size: 14px; margin: 8px 0 16px; white-space: pre-line; overflow-wrap: anywhere; }
.click-guide-progress { display: inline-flex; align-items: center; min-height: 23px; padding: 2px 9px; border-radius: 999px; background: rgba(47, 131, 255, .13); color: #2f83ff; font-size: 12px; font-weight: 700; }
.click-guide-status { color: #a65620; }
.click-guide-status:empty { display: none; }
.click-guide-actions { display: flex; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.click-guide-actions button { font: inherit; font-size: 13px; border: 1px solid rgba(47, 131, 255, .3); border-radius: 10px; background: rgba(255, 255, 255, .6); color: #4b5b70; padding: 9px 14px; cursor: pointer; min-height: 40px; }
.click-guide-actions .click-guide-next { color: #fff; background: #2f83ff; border-color: #2f83ff; font-weight: 700; }
.click-guide-actions button:disabled { opacity: .45; cursor: default; }
.click-guide-actions button:focus-visible { outline: 3px solid #2f83ff; outline-offset: 2px; }
.click-guide-choice { inset: 0; position: fixed; background: #080d19b8; display: grid; place-items: center; z-index: 2147483000; }
.click-guide-choice .click-guide-card { position: relative; }
.click-guide-hidden-control { visibility: hidden !important; pointer-events: none !important; }
.click-guide-window-return { position: fixed; right: 20px; bottom: 20px; z-index: 2147483001; }
html[data-theme='dark'] .click-guide-card, html.dark .click-guide-card { background-color: #141b26; background-image: linear-gradient(160deg, rgba(20, 27, 38, .65), rgba(27, 36, 51, .65)), url('/static/assets/tutorial/click-guide/card-background.png'); color: #f4f7fb; }
html[data-theme='dark'] .click-guide-card h2, html.dark .click-guide-card h2 { color: #f4f7fb; }
html[data-theme='dark'] .click-guide-progress, html.dark .click-guide-progress { color: #b8dcff; background: rgba(15, 35, 60, .85); }
html[data-theme='dark'] .click-guide-actions button, html.dark .click-guide-actions button { background: rgba(255, 255, 255, .06); color: #d9e4f2; }
html[data-theme='dark'] .click-guide-actions .click-guide-next, html.dark .click-guide-actions .click-guide-next { background: #68b7ff; border-color: #68b7ff; color: #142236; }
@media (prefers-reduced-motion: reduce) { .click-guide-highlight, .click-guide-ghost-cursor, .click-guide-ghost-cursor::before, .click-guide-ghost-cursor::after { animation: none; }
  .click-guide-highlight.yui-guide-spotlight-frame.animate-focus { transition: none; } }