/* Storm Console: a genuine command surface, intentionally kept out of the primary conversion path. */
.command-dock { position: fixed; z-index: 45; right: 22px; bottom: 22px; display: flex; align-items: center; gap: 9px; width: 126px; height: 52px; padding: 0 12px 0 8px; border: 1px solid rgba(106, 239, 247, .42); border-radius: 5px; color: #ddffff; background: rgba(4, 19, 38, .82); box-shadow: 0 12px 35px rgba(0, 0, 0, .3), 0 0 22px rgba(41, 224, 240, .15); backdrop-filter: blur(14px); cursor: pointer; opacity: 0; transform: translateY(25px) scale(.94); pointer-events: none; transition: opacity .35s ease, transform .35s ease, border-color .25s ease, box-shadow .25s ease; }
.command-dock.is-visible { opacity: 1; transform: none; pointer-events: auto; }.command-dock:hover { border-color: #a2ffff; box-shadow: 0 18px 38px rgba(0, 0, 0, .38), 0 0 38px rgba(41, 224, 240, .26); }.command-dock span, .console-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #e8ffff; background: radial-gradient(circle at 33% 28%, #13516c, #07182c 66%); border: 1px solid rgba(126, 247, 254, .52); box-shadow: 0 0 0 4px rgba(52, 231, 245, .06), 0 0 14px rgba(67, 237, 248, .35); font: 800 14px var(--display); letter-spacing: -.12em; }.command-dock i { color: #c7edf1; font: 8px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; text-align: left; font-style: normal; }.command-dock b { position: absolute; top: 7px; right: 8px; width: 5px; height: 5px; border-radius: 50%; background: #4cf4ae; box-shadow: 0 0 10px #4cf4ae; animation: dock-pulse 2s ease-in-out infinite; }

.storm-console { width: min(760px, calc(100vw - 36px)); max-width: none; max-height: min(760px, calc(100vh - 36px)); padding: 0; overflow: hidden; border: 1px solid rgba(111, 240, 249, .48); color: #edfaff; background: rgba(4, 15, 32, .96); box-shadow: 0 30px 120px rgba(0, 0, 0, .68), 0 0 80px rgba(24, 221, 241, .16); backdrop-filter: blur(20px); }
.storm-console::backdrop { background: rgba(1, 8, 19, .72); backdrop-filter: blur(9px); animation: console-backdrop .35s ease both; }.storm-console[open] { animation: console-open .42s cubic-bezier(.2, .9, .2, 1) both; }
.console-shell { position: relative; overflow: hidden; min-height: 560px; padding: 26px 34px 24px; isolation: isolate; background: radial-gradient(ellipse at 88% 20%, rgba(17, 115, 159, .24), transparent 38%), linear-gradient(135deg, rgba(7, 27, 51, .96), rgba(2, 10, 24, .98)); }.console-shell::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .28; background-image: linear-gradient(rgba(92, 235, 246, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(92, 235, 246, .1) 1px, transparent 1px); background-size: 36px 36px; mask-image: radial-gradient(circle at 70% 42%, black, transparent 68%); }
.console-head { display: flex; align-items: center; justify-content: space-between; }.console-head > div { display: flex; align-items: center; gap: 11px; }.console-head p { margin: 0; color: #88bdca; font: 9px var(--mono); letter-spacing: .13em; }.console-close { width: 34px; height: 34px; border: 1px solid rgba(112, 232, 244, .25); color: #b9e8ed; background: rgba(15, 55, 79, .35); font-size: 23px; line-height: 1; cursor: pointer; transition: background .2s, color .2s, transform .2s; }.console-close:hover { color: white; background: rgba(33, 187, 205, .22); transform: rotate(90deg); }
.console-core { position: absolute; z-index: -1; right: -17px; top: 80px; width: 310px; height: 310px; border-radius: 50%; border: 1px solid rgba(88, 240, 248, .26); box-shadow: 0 0 0 34px rgba(71, 226, 242, .025), 0 0 0 68px rgba(71, 226, 242, .018); animation: console-orbit 20s linear infinite; }.console-core::before { content: ""; position: absolute; inset: 25%; border: 1px dashed rgba(120, 248, 255, .42); border-radius: 50%; }.console-core i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #a2ffff; box-shadow: 0 0 0 6px rgba(73, 235, 246, .1), 0 0 20px #62f3fc; animation: console-node 3.2s ease-in-out infinite; }.console-core i:nth-child(1) { left: 50%; top: 2%; }.console-core i:nth-child(2) { right: 4%; bottom: 27%; animation-delay: -1.1s; }.console-core i:nth-child(3) { left: 9%; bottom: 17%; animation-delay: -2.2s; }.console-core b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #9dffff; font: 9px var(--mono); letter-spacing: .13em; }
.console-copy { position: relative; width: 63%; margin-top: 70px; }.console-copy h2 { margin: 13px 0 28px; font-size: clamp(37px, 5vw, 58px); line-height: 1.02; letter-spacing: -.075em; }.console-actions { position: relative; display: grid; gap: 7px; max-width: 600px; }.console-actions a { position: relative; display: grid; grid-template-columns: 1.35fr 1fr 20px; align-items: center; gap: 12px; min-height: 55px; padding: 13px 16px; overflow: hidden; border: 1px solid rgba(108, 223, 237, .17); color: #dffbff; background: rgba(8, 30, 55, .66); text-decoration: none; transition: transform .22s ease, border-color .22s ease, background .22s ease; }.console-actions a::before { content: ""; position: absolute; inset: 0; opacity: 0; background: linear-gradient(90deg, rgba(34, 232, 244, .17), transparent 70%); transition: opacity .22s; }.console-actions a:hover { z-index: 2; border-color: rgba(130, 248, 255, .62); background: rgba(14, 61, 91, .77); transform: translateX(7px); }.console-actions a:hover::before { opacity: 1; }.console-actions span, .console-actions b, .console-actions em { position: relative; z-index: 1; }.console-actions span { font-size: 14px; font-weight: 700; }.console-actions span i { padding-right: 10px; color: var(--cyan); font: 9px var(--mono); letter-spacing: .1em; font-style: normal; }.console-actions b { color: #92b5c7; font-size: 11px; font-weight: 500; }.console-actions em { color: var(--cyan); font-size: 18px; font-style: normal; text-align: right; }.console-hint { position: absolute; bottom: 22px; left: 34px; margin: 0; color: #7895ae; font: 10px var(--mono); }.console-hint kbd { display: inline-block; padding: 2px 5px; border: 1px solid rgba(120, 215, 228, .23); border-bottom-color: rgba(120, 215, 228, .5); color: #c6edf1; background: rgba(20, 57, 80, .5); font: inherit; }
@keyframes dock-pulse { 50% { transform: scale(1.5); opacity: .4; } } @keyframes console-open { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: none; } } @keyframes console-backdrop { from { opacity: 0; } to { opacity: 1; } } @keyframes console-orbit { to { transform: rotate(360deg); } } @keyframes console-node { 50% { transform: scale(1.7); opacity: .35; } }
@media (max-width: 620px) { .command-dock { right: 14px; bottom: 14px; width: 50px; height: 50px; padding: 7px; }.command-dock i { display: none; }.command-dock span { width: 34px; height: 34px; }.console-shell { min-height: 570px; padding: 20px 20px 22px; }.console-head p { font-size: 7px; }.console-core { right: -90px; top: 70px; opacity: .62; }.console-copy { width: 92%; margin-top: 64px; }.console-copy h2 { font-size: 42px; }.console-actions a { grid-template-columns: 1fr 18px; min-height: 58px; }.console-actions b { display: none; }.console-hint { left: 20px; bottom: 18px; font-size: 8px; } }
@media (prefers-reduced-motion: reduce) { .command-dock b, .console-core, .console-core i { animation: none; }.storm-console[open], .storm-console::backdrop { animation: none; } }