/* Guided Storm Tour: a user-controlled cinematic walkthrough of the existing page. */
.console-shell { min-height: 635px; }
.console-tour-start { position: relative; display: grid; grid-template-columns: 1.35fr 1fr 20px; align-items: center; gap: 12px; width: min(600px, 100%); min-height: 55px; margin-top: 7px; padding: 13px 16px; overflow: hidden; border: 1px solid rgba(109, 238, 246, .34); color: #e8ffff; background: linear-gradient(90deg, rgba(25, 171, 191, .17), rgba(8, 32, 58, .72)); cursor: pointer; text-align: left; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }.console-tour-start::before { content: ""; position: absolute; inset: 0; opacity: 0; background: linear-gradient(90deg, rgba(57, 236, 247, .18), transparent 75%); transition: opacity .22s; }.console-tour-start:hover { border-color: #a2ffff; box-shadow: 0 0 30px rgba(43, 226, 242, .12); transform: translateX(7px); }.console-tour-start:hover::before { opacity: 1; }.console-tour-start span, .console-tour-start b, .console-tour-start em { position: relative; z-index: 1; }.console-tour-start span { font-size: 14px; font-weight: 700; }.console-tour-start span i { padding-right: 10px; color: var(--cyan); font: 9px var(--mono); font-style: normal; }.console-tour-start b { color: #9bbdcd; font-size: 11px; font-weight: 500; }.console-tour-start em { color: var(--cyan); font-size: 13px; font-style: normal; text-align: right; }

.storm-tour { position: fixed; z-index: 54; left: 50%; bottom: 22px; display: grid; grid-template-columns: 112px 1fr auto; grid-template-rows: auto auto; column-gap: 17px; row-gap: 8px; width: min(690px, calc(100vw - 44px)); min-height: 112px; padding: 17px 55px 16px 19px; border: 1px solid rgba(113, 239, 248, .48); color: #e9fbff; background: rgba(4, 18, 37, .91); box-shadow: 0 24px 70px rgba(0, 0, 0, .46), 0 0 40px rgba(35, 223, 241, .14); backdrop-filter: blur(17px) saturate(1.2); transform: translateX(-50%); animation: tour-enter .42s cubic-bezier(.2, .9, .2, 1) both; }.storm-tour[hidden] { display: none; }.storm-tour::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .28; background: linear-gradient(90deg, rgba(44, 224, 239, .12), transparent 38%), repeating-linear-gradient(90deg, rgba(105, 232, 244, .08) 0 1px, transparent 1px 62px); }.tour-exit { position: absolute; top: 9px; right: 9px; width: 29px; height: 29px; border: 1px solid rgba(117, 227, 239, .24); color: #bfe9ee; background: rgba(12, 48, 69, .48); cursor: pointer; font-size: 19px; }.tour-status { position: relative; grid-row: span 2; display: flex; justify-content: center; flex-direction: column; border-right: 1px solid rgba(99, 220, 234, .18); }.tour-status span { color: var(--cyan); font: 8px var(--mono); letter-spacing: .12em; }.tour-status p { margin: 7px 0 0; font-size: 15px; font-weight: 700; }.tour-progress { position: relative; align-self: center; height: 2px; overflow: hidden; background: rgba(100, 220, 234, .13); }.tour-progress i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--cyan), #7c88ff); box-shadow: 0 0 12px var(--cyan); transform: scaleX(var(--tour-progress, .1667)); transform-origin: left; transition: transform .45s ease; }.tour-description { position: relative; margin: 0; align-self: center; color: #a4bfd0; font-size: 11px; line-height: 1.5; }.tour-controls { position: relative; grid-column: 3; grid-row: 1 / span 2; display: flex; align-items: center; gap: 7px; }.tour-controls button { height: 38px; border: 1px solid rgba(110, 228, 240, .25); cursor: pointer; font: 700 10px var(--display); }.tour-previous { width: 38px; color: #a8d7dd; background: rgba(12, 48, 70, .52); }.tour-next { min-width: 105px; padding: 0 13px; color: #041525; background: linear-gradient(110deg, #80f7ff, var(--cyan)); }.tour-next span { padding-left: 7px; }.storm-tour > small { position: absolute; left: 130px; bottom: -20px; color: #668399; font: 8px var(--mono); }.storm-tour kbd { padding: 1px 4px; border: 1px solid rgba(114, 213, 226, .2); color: #a8d4dc; background: rgba(9, 35, 54, .68); font: inherit; }

.tour-focus { outline: 1px solid rgba(79, 234, 246, .42); outline-offset: -1px; animation: tour-target-pulse 1.1s ease both; }
html.tour-active .command-dock, html.tour-active .storm-track { opacity: .18; pointer-events: none; }
@keyframes tour-enter { from { opacity: 0; transform: translate(-50%, 24px) scale(.97); } to { opacity: 1; transform: translateX(-50%); } } @keyframes tour-target-pulse { 0% { box-shadow: inset 0 0 0 1px rgba(87, 240, 249, .8), inset 0 0 90px rgba(48, 222, 238, .17); } 100% { box-shadow: inset 0 0 0 1px rgba(87, 240, 249, .12), inset 0 0 0 rgba(48, 222, 238, 0); } }
@media (max-width: 720px) { .console-shell { min-height: 650px; }.console-tour-start { grid-template-columns: 1fr 20px; }.console-tour-start b { display: none; }.storm-tour { bottom: 10px; grid-template-columns: 82px 1fr; grid-template-rows: auto auto auto; width: calc(100vw - 20px); min-height: 150px; padding: 14px 42px 14px 14px; }.tour-status { grid-row: 1 / span 2; }.tour-controls { grid-column: 1 / span 2; grid-row: 3; justify-content: flex-end; }.tour-description { font-size: 10px; }.storm-tour > small { display: none; } }
@media (prefers-reduced-motion: reduce) { .storm-tour, .tour-focus { animation: none; }.tour-progress i { transition: none; } }
.tour-previous:disabled { opacity: .3; cursor: default; }