/* This overlay is clipped to the scene; only its small practice dock receives input. */
.tutorial-gesture-guide { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 6; }
.tutorial-gesture-guide[hidden], .tgg-diagram[hidden] { display: none; }
.tgg-diagram { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.tgg-diagram [hidden] { display: none; }
.tgg-plot { fill: #7ED8CE30; stroke: #A8ECE4; stroke-width: 3; stroke-dasharray: 8 5; stroke-linejoin: round; filter: drop-shadow(0 1px 2px #000); }
.tgg-target { fill: #7ED8CE30; stroke: #A8ECE4; stroke-width: 3; filter: drop-shadow(0 1px 2px #000); }
.tgg-target-label { fill: white; stroke: #112A27; stroke-width: 4; paint-order: stroke; stroke-linejoin: round; font: 600 13px system-ui, sans-serif; }
.tgg-trail { fill: none; stroke: #fff; stroke-width: 3; stroke-dasharray: 6 5; stroke-linecap: round; filter: drop-shadow(0 1px 2px #000); }
.tgg-pulse { fill: #7ED8CE24; stroke: #7ED8CE; stroke-width: 3; filter: drop-shadow(0 1px 2px #000); }
.tgg-cursor { fill: white; stroke: #112A27; stroke-width: 1.5; stroke-linejoin: round; filter: drop-shadow(0 2px 3px #0008); }
.tgg-dock { pointer-events: auto; position: absolute; top: 12px; left: 12px; box-sizing: border-box; width: 250px; max-width: calc(100% - 24px); padding: 9px 10px; border: 1px solid var(--line, #dbe4e0); border-radius: 10px; color: #E8EEEC; background: #152021; box-shadow: 0 3px 15px #0003; font: 12px/1.4 system-ui, sans-serif; }
.tgg-action-row { display: flex; align-items: center; gap: 9px; }
.tgg-instructions { margin: 0; }
.tgg-mouse { width: 26px; height: 36px; flex: 0 0 26px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.tgg-mouse[hidden] { display: none; }
.tgg-mouse-left, .tgg-mouse-right { stroke: none; }
[data-mouse-button="left"] .tgg-mouse-left, [data-mouse-button="right"] .tgg-mouse-right, [data-mouse-button="wheel"] .tgg-mouse-wheel, [data-mouse-button="middle"] .tgg-mouse-wheel { fill: var(--accent, #4CC1B8); }
.tgg-status { color: currentColor; opacity: .7; font-size: 11px; margin: 7px 0 0; }
.tgg-status:empty { display: none; }
.tgg-phases { display: flex; flex-wrap: wrap; gap: 6px; }
.tgg-phases:empty { display: none; }
.tgg-controls { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tgg-dock button { font: inherit; padding: 5px 8px; border: 1px solid color-mix(in srgb, currentColor 24%, transparent); border-radius: 6px; color: inherit; background: transparent; cursor: pointer; }
.tgg-dock button:hover:not(:disabled), .tgg-dock button:focus-visible { outline: 2px solid var(--accent, #4CC1B8); outline-offset: 2px; }
.tgg-dock button[aria-pressed="true"] { color: #1B2526; background: #DDF5F1; border-color: var(--accent, #4CC1B8); }
.tgg-dock button:disabled { opacity: .45; cursor: default; }
.tgg-compact .tgg-dock { width: 230px; padding: 7px 9px; font-size: 11px; }
.tgg-compact .tgg-status { display: none; }
.tgg-compact .tgg-mouse { width: 20px; height: 28px; flex-basis: 20px; }
.tgg-compact .tgg-controls { gap: 4px; margin-top: 5px; }
.tgg-compact .tgg-dock button { padding: 3px 5px; font-size: 10px; }
@media (max-width: 700px) { .tgg-dock { width: 238px; padding: 8px 10px; font-size: 11px; } }

.tgg-inputs { padding-right: 23px; display: flex; gap: 4px; margin-bottom: 7px; }
.tgg-inputs[hidden], .tgg-touchpad[hidden] { display: none; }
.tgg-inputs button { padding: 2px 7px; font-size: 10px; }
.tgg-touchpad { width: 36px; height: 36px; flex: 0 0 36px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.tgg-touchpad circle { fill: var(--accent, #4CC1B8); stroke: none; }
/* Wheel/pinch motion belongs to the input diagram. Scene cursor motion would imply a drag, which orbits. */
.tgg-playing[data-phase="Zoom"] .tgg-mouse-wheel { animation: tgg-wheel 1.2s ease-in-out infinite alternate; }
.tgg-playing[data-phase="Zoom"] .tgg-finger-one { animation: tgg-pinch-one 1.2s ease-in-out infinite alternate; }
.tgg-playing[data-phase="Zoom"] .tgg-finger-two { animation: tgg-pinch-two 1.2s ease-in-out infinite alternate; }
.tgg-playing[data-phase="Pan"] .tgg-touchpad circle { animation: tgg-pan 1.2s ease-in-out infinite alternate; }
@keyframes tgg-wheel { from { transform: translateY(-2px); } to { transform: translateY(2px); } }
@keyframes tgg-pinch-one { from { transform: translateX(2px); } to { transform: translateX(-6px); } }
@keyframes tgg-pinch-two { from { transform: translateX(-2px); } to { transform: translateX(6px); } }
@keyframes tgg-pan { from { transform: translate(-4px, 3px); } to { transform: translate(4px, -3px); } }
@media (prefers-reduced-motion: reduce) { .tgg-dock * { animation: none !important; } }


/* Single-finger gestures press and drag; only pan/pinch show two contact points. */
[data-fingers="one"] .tgg-finger-two { display: none; }
[data-fingers="one"] .tgg-finger-one { cx: 20; }
.tgg-playing:is([data-phase="Orbit"], [data-phase="Look around"], [data-phase="Sketch"]) .tgg-finger-one { animation: tgg-drag 2s ease-in-out infinite; }
.tgg-playing:is([data-phase="Teleport"], [data-phase="Select"]) .tgg-finger-one { animation: tgg-press 2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.tgg-middle-press { display: none; stroke: var(--accent, #4CC1B8); stroke-width: 2; }
[data-mouse-button="middle"] .tgg-middle-press { display: block; }
.tgg-playing[data-phase="Pan"] .tgg-mouse-body { animation: tgg-pan 1.2s ease-in-out infinite alternate; }
@keyframes tgg-drag { 0%, 15% { transform: translate(-6px, 2px); opacity: .5; } 25% { opacity: 1; } 75%, 90% { transform: translate(6px, -2px); opacity: 1; } 100% { transform: translate(6px, -2px); opacity: .5; } }
@keyframes tgg-press { 0%, 90%, 100% { transform: scale(.8); opacity: .45; } 20%, 75% { transform: scale(1.3); opacity: 1; } }
.tgg-dock .tgg-hide { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 22px; height: 22px; padding: 2px; border: 0; }
.tgg-hide svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.tgg-show-glyph { display: none; }
.tgg-collapsed .tgg-hide-glyph { display: none; }
.tgg-collapsed .tgg-show-glyph { display: block; }
.tgg-collapsed .tgg-dock { width: 34px; height: 34px; padding: 0; }
.tgg-collapsed :is(.tgg-action-row, .tgg-status, .tgg-controls, .tgg-inputs) { display: none; }