/* Tutorial presentation only; runtime selectors are deliberately excluded. */
#tutorialSelectorOverlay { background: #030608; overflow-y: auto; }
#tutorialSelectorOverlay .tutorial-selector-shell { width: min(100%, 560px); display: flex; flex-direction: column; gap: 20px; padding: 28px 20px; box-sizing: border-box; margin: auto; }
#tutorialSelectorTitle { text-align: center; line-height: 1.55; margin: 0 0 12px; }
#tutorialSelectorOverlay #tutorialGolfButton, #tutorialSelectorOverlay #tutorialTravelButton { display: grid; grid-template-columns: 35% 1fr; gap: 18px; align-items: center; padding: 0; min-height: 155px; overflow: hidden; text-align: left; background: #10191e; border: 1px solid #30434c; border-radius: 20px; }
#tutorialSelectorOverlay .tutorial-selector-preview { width: 100%; height: 100%; min-height: 155px; max-height: 210px; object-fit: cover; border: 0; border-radius: 0; }
.tutorial-selector-copy { display: flex; flex-direction: column; gap: 12px; padding: 16px 14px 16px 0; }
.tutorial-selector-copy strong { color: #d9ffff; font-size: clamp(1.05rem, 4.6vw, 1.35rem); }
.tutorial-selector-copy > span { color: #c4d1d8; font-size: .94rem; line-height: 1.65; white-space: pre-line; word-break: keep-all; overflow-wrap: break-word; }
#tutorialSelectorMainButton { margin-top: 12px; }
#tutorialCardsOverlay { position: absolute; inset: 0; z-index: 16; background: #030608; color: #f4f7f9; display: grid; grid-template-rows: auto minmax(160px, 1.5fr) minmax(0, 1fr) auto; width: 100%; max-width: 760px; height: 100%; margin: auto; overflow: hidden; box-sizing: border-box; }
#tutorialCardsOverlay[hidden] { display: none; }
.tutorial-card-top { position: relative; display: flex; justify-content: center; align-items: center; min-height: 48px; padding-top: env(safe-area-inset-top, 0px); }
.tutorial-card-progress { font-variant-numeric: tabular-nums; color: #aec0c9; font-size: .94rem; letter-spacing: .12em; }
#tutorialCardsOverlay button { min-height: 44px; border: 1px solid #718a97; border-radius: 12px; background: #1c303b; color: #f0f6fa; cursor: pointer; font: inherit; padding: 9px 15px; text-shadow: none; box-shadow: none; }
#tutorialCardsOverlay button:focus-visible { outline: 2px solid #d9ffff; outline-offset: 3px; }
#tutorialCardsOverlay button:disabled { opacity: .35; cursor: default; }
#tutorialCardsOverlay .tutorial-card-close { position: absolute; left: 10px; bottom: 0; border: 0; background: transparent; font-size: 1.8rem; padding: 0 12px; }
.tutorial-card-media { position: relative; min-height: 0; overflow: hidden; margin: 0 16px 12px; border-radius: 18px; background: #080f14; display: flex; flex-direction: column; align-items: center; }
.tutorial-demo-video, .tutorial-demo-image { width: 100%; height: 100%; object-fit: contain; min-height: 0; }
.tutorial-card-media[data-visual^="travel"] .tutorial-demo-video { object-fit: cover; }
.tutorial-grip-image { width: 100%; height: 100%; object-fit: contain; min-height: 0; }
.tutorial-grip-labels { position: absolute; bottom: 12px; left: 12px; right: 12px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.tutorial-grip-labels span { background: #071319eb; border: 1px solid #436470; color: #d9ffff; padding: 6px 10px; border-radius: 30px; font-size: .78rem; }
.tutorial-card-copy { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 24px 12px; margin: 0 16px; border-radius: 20px 20px 0 0; background: #111c23; scrollbar-width: thin; }
.tutorial-card-copy h1 { font-size: clamp(1.2rem, 4.8vw, 1.65rem); margin: 0 0 13px; line-height: 1.4; font-weight: 750; }
.tutorial-card-copy p { margin: 9px 0; font-size: clamp(.92rem, 3.7vw, 1.07rem); line-height: 1.7; white-space: pre-line; color: #d4dfe5; word-break: keep-all; overflow-wrap: break-word; }
.tutorial-card-copy strong { color: #d9ffff; font-weight: 750; }
.tutorial-card-media, .tutorial-card-copy { touch-action: pan-y pinch-zoom; }
.tutorial-swipe-hint { grid-column: 1 / -1; margin: 0 0 clamp(16px, 4dvh, 32px); color: #b6cbd7; text-align: center; font-size: .73rem; line-height: 1.5; word-break: keep-all; overflow-wrap: break-word; }
.tutorial-card-copy .tutorial-card-note { color: #aebfc9; font-size: .86rem; margin-top: 14px; }
.tutorial-quiet-note { grid-column: 1 / -1; margin: 0; color: #aebfc9; font-size: .73rem; line-height: 1.5; text-align: center; white-space: pre-line; word-break: keep-all; overflow-wrap: break-word; }
.tutorial-quiet-note strong { color: #d9ffff; font-weight: 750; }
#tutorialCardsOverlay .tutorial-microphone-button { grid-column: 1 / -1; font-size: .88rem; background: #203943; border-color: #83a6af; min-height: 44px; padding: 8px; }
.tutorial-card-nav { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.65fr); gap: 8px; padding: 12px 12px calc(14px + env(safe-area-inset-bottom, 0px)); background: #111c23; margin: 0 16px; }
#tutorialCardsOverlay .tutorial-card-nav > button { padding-left: 6px; padding-right: 6px; font-size: .88rem; word-break: keep-all; overflow-wrap: break-word; }
#tutorialCardsOverlay .tutorial-card-next { background: #d9ffff; color: #09232b; border-color: #d9ffff; font-weight: 750; }
.tutorial-screen-stage { flex: 1; min-height: 0; width: 100%; display: flex; justify-content: center; padding-top: 6px; box-sizing: border-box; }
.tutorial-screen-image { width: 100%; height: 100%; object-fit: cover; object-position: top; border: 1px solid #29414e; border-radius: 10px; box-sizing: border-box; }
.tutorial-demo-tabs { display: flex; gap: 6px; padding: 8px; flex-wrap: wrap; align-items: center; justify-content: center; flex-shrink: 0; box-sizing: border-box; max-width: 100%; }
.tutorial-details-label { color: #ccdee7; font-size: .75rem; margin-right: auto; }
.tutorial-results-hint { flex-shrink: 0; margin: 0; padding: 0 10px 8px; color: #b6cbd7; text-align: center; font-size: .7rem; line-height: 1.5; }
#tutorialCardsOverlay .tutorial-demo-tabs button, #tutorialCardsOverlay .tutorial-demo-controls button { font-size: .75rem; min-height: 44px; padding: 6px 10px; }
#tutorialCardsOverlay button[aria-pressed="true"] { border-color: #d9ffff; background: #d9ffff; color: #09232b; font-weight: 700; }
.tutorial-demo-controls { position: absolute; bottom: 9px; left: 10px; display: flex; gap: 6px; z-index: 4; }
.tutorial-guide-row { position: absolute; top: 58%; left: 8px; right: 8px; transform: translateY(-50%); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; }
.tutorial-demo-guide { grid-column: 2; text-align: center; font-size: clamp(1.1rem, 5vw, 1.7rem); color: white; text-shadow: 0 2px 6px #000, 0 0 10px #000; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.tutorial-demo-coaching { position: absolute; top: 70%; left: 8px; right: 8px; text-align: center; font-size: .84rem; text-shadow: 0 2px 6px #000, 0 0 10px #000; }
.tutorial-guide-caption { grid-column: 3; justify-self: end; min-width: 0; max-width: 100%; box-sizing: border-box; font-size: .66rem; line-height: 1.4; white-space: pre-line; overflow-wrap: break-word; color: #d9ffff; background: #05131cd9; border-radius: 8px; padding: 5px; }
.tutorial-reaction-caption { position: absolute; top: 21%; left: 10px; right: 10px; text-align: center; font-size: .8rem; text-shadow: 0 1px 5px #000; }
.tutorial-result-label { position: absolute; bottom: 12px; right: 12px; background: #d9ffff; color: #062124; padding: 12px 10px; border-radius: 50px; font-size: .75rem; }
.tutorial-feedback-result { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #030608; z-index: 2; }
.tutorial-feedback-result[hidden] { display: none; }
.tutorial-view-options { position: absolute; top: 12px; left: 8px; right: 8px; display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.tutorial-view-options > span { width: 100%; text-align: center; font-size: .8rem; text-shadow: 0 1px 5px #000; }
#tutorialCardsOverlay .tutorial-view-options button { font-size: .75rem; min-height: 38px; padding: 6px 9px; background: #08131de6; }
#tutorialCardsOverlay .tutorial-view-options button[aria-pressed="true"] { background: #d9ffff; color: #09232b; }
#detailTutorialButton { width: 100%; min-height: 44px; margin-top: 12px; border: 1px solid #91aab5; background: #11232cde; color: #eefaff; text-shadow: none; font-size: .95rem; }
@media (max-width: 480px) { .tutorial-details-label { flex-basis: 100%; } .tutorial-demo-tabs { justify-content: flex-start; width: 100%; } }
.tutorial-media-error { position: absolute; top: 22%; left: 12px; right: 12px; background: #08131ded; color: #edf5f8; padding: 12px; font-size: .82rem; z-index: 5; }
#pwaInstallBackdrop { position: fixed; inset: 0; z-index: 30; background: #000b; backdrop-filter: blur(4px); }
#pwaInstallCard { z-index: 31; box-sizing: border-box; max-height: calc(100dvh - 32px); overflow-y: auto; padding-top: 52px; }
#pwaInstallCloseButton { position: absolute; top: 5px; right: 6px; min-height: 44px; min-width: 44px; font-size: 1.5rem; border: 0; background: transparent; }
@media (max-height: 700px) { #tutorialCardsOverlay { grid-template-rows: auto minmax(140px, 1fr) minmax(0, 1fr) auto; } .tutorial-card-copy { padding: 12px 16px; } .tutorial-card-copy h1 { margin-bottom: 8px; } .tutorial-card-media { margin-bottom: 8px; } }
@media (min-height: 701px) { #tutorialCardsOverlay[data-kind="golf"][data-card="5"] { grid-template-rows: auto minmax(160px, 1.4fr) minmax(0, 1.1fr) auto; } }
@media (max-height: 500px) { .tutorial-swipe-hint { margin-bottom: 8px; } }
@media (max-height: 500px) { #tutorialCardsOverlay[data-card="2"] { grid-template-rows: auto minmax(80px, 1fr) minmax(0, 1fr) auto; } }
@media (prefers-reduced-motion: reduce) { #tutorialCardsOverlay * { scroll-behavior: auto; } }