@signalk/app-dock 1.4.0 → 1.4.2

package/public/dock.css

@@ -1,610 +1 @@
-/* ─── Reset & base ─────────────────────────────────────────────────────────── */
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-html,
-body {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  background: #000;
-  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  touch-action: none;
-}
-
-/* ─── iFrame container ──────────────────────────────────────────────────────── */
-#iframe-container {
-  position: fixed;
-  inset: 0;
-  z-index: 1;
-}
-
-#iframe-container iframe {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  border: none;
-  display: none;
-  touch-action: auto;
-}
-
-#iframe-container iframe.active {
-  display: block;
-}
-
-/* ─── Welcome screen ───────────────────────────────────────────────────────── */
-#idle-hint {
-  position: fixed;
-  inset: 0;
-  z-index: 2;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  pointer-events: none;
-  opacity: 0;
-  animation: idle-fade-in 1.2s ease 0.6s forwards;
-}
-
-#idle-hint.hidden {
-  display: none;
-}
-
-#idle-logo {
-  width: 72px;
-  height: 72px;
-  border-radius: 16px;
-  opacity: 0.85;
-  margin-bottom: 4px;
-}
-
-#idle-title {
-  color: rgba(255, 255, 255, 0.7);
-  font-size: 22px;
-  font-weight: 700;
-  letter-spacing: 0.02em;
-}
-
-#idle-version {
-  color: rgba(255, 255, 255, 0.35);
-  font-size: 11px;
-  font-weight: 500;
-  letter-spacing: 0.05em;
-  margin-top: -8px;
-}
-
-#idle-hint-text {
-  color: rgba(255, 255, 255, 0.55);
-  font-size: 15px;
-  font-weight: 500;
-  letter-spacing: 0.02em;
-  text-align: center;
-  padding: 0 32px;
-  max-width: 480px;
-  line-height: 1.6;
-  margin-top: 12px;
-}
-
-@keyframes idle-fade-in {
-  to {
-    opacity: 1;
-  }
-}
-
-/* ─── Handle over an app on another origin ─────────────────────────────────── */
-/* The padding is the touch target; the bar itself is drawn by ::before. */
-#dock-handle {
-  position: fixed;
-  z-index: 5;
-  display: none;
-  padding: 12px 18px;
-  border: none;
-  background: transparent;
-  -webkit-appearance: none;
-  appearance: none;
-  cursor: pointer;
-  touch-action: manipulation;
-  -webkit-tap-highlight-color: transparent;
-}
-
-#dock-handle.visible {
-  display: block;
-}
-
-#dock-handle::before {
-  content: '';
-  display: block;
-  width: 56px;
-  height: 6px;
-  border-radius: 3px;
-  background: rgba(255, 255, 255, 0.6);
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
-}
-
-#dock-handle.pos-bottom {
-  bottom: env(safe-area-inset-bottom, 0px);
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-#dock-handle.pos-top {
-  top: env(safe-area-inset-top, 0px);
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-#dock-handle.pos-left {
-  left: env(safe-area-inset-left, 0px);
-  top: 50%;
-  transform: translateY(-50%);
-  padding: 18px 12px;
-}
-
-#dock-handle.pos-right {
-  right: env(safe-area-inset-right, 0px);
-  top: 50%;
-  transform: translateY(-50%);
-  padding: 18px 12px;
-}
-
-#dock-handle.pos-left::before,
-#dock-handle.pos-right::before {
-  width: 6px;
-  height: 56px;
-}
-
-/* ─── Backdrop ──────────────────────────────────────────────────────────────── */
-#dock-backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: 10;
-  background: rgba(0, 0, 0, 0.45);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.28s ease;
-  backdrop-filter: blur(2px);
-  -webkit-backdrop-filter: blur(2px);
-}
-
-#dock-backdrop.visible {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-/* ─── Dock shell ────────────────────────────────────────────────────────────── */
-#dock {
-  position: fixed;
-  z-index: 40;
-  opacity: 0;
-  pointer-events: none;
-  transition:
-    transform 0.42s cubic-bezier(0.34, 1.45, 0.64, 1),
-    opacity 0.25s ease;
-}
-
-#dock.visible {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-/* --- Position: bottom (default) --- */
-#dock.pos-bottom {
-  bottom: max(16px, env(safe-area-inset-bottom, 16px));
-  left: 50%;
-  transform: translateX(-50%) translateY(calc(100% + 32px)) scale(0.92);
-}
-#dock.pos-bottom.visible {
-  transform: translateX(-50%) translateY(0) scale(1);
-}
-
-/* --- Position: top --- */
-#dock.pos-top {
-  top: max(16px, env(safe-area-inset-top, 16px));
-  left: 50%;
-  transform: translateX(-50%) translateY(calc(-100% - 32px)) scale(0.92);
-}
-#dock.pos-top.visible {
-  transform: translateX(-50%) translateY(0) scale(1);
-}
-
-/* --- Position: left --- */
-#dock.pos-left {
-  left: max(16px, env(safe-area-inset-left, 16px));
-  top: 50%;
-  transform: translateY(-50%) translateX(calc(-100% - 32px)) scale(0.92);
-}
-#dock.pos-left.visible {
-  transform: translateY(-50%) translateX(0) scale(1);
-}
-
-/* --- Position: right --- */
-#dock.pos-right {
-  right: max(16px, env(safe-area-inset-right, 16px));
-  top: 50%;
-  transform: translateY(-50%) translateX(calc(100% + 32px)) scale(0.92);
-}
-#dock.pos-right.visible {
-  transform: translateY(-50%) translateX(0) scale(1);
-}
-
-/* ─── Dock pill ─────────────────────────────────────────────────────────────── */
-#dock-inner {
-  display: flex;
-  flex-direction: row;
-  gap: 10px;
-  padding: 12px 18px;
-
-  /* Frosted glass - macOS Sequoia style */
-  background: rgba(30, 30, 32, 0.55);
-  backdrop-filter: blur(60px) saturate(180%);
-  -webkit-backdrop-filter: blur(60px) saturate(180%);
-
-  border: 1px solid rgba(255, 255, 255, 0.18);
-  border-radius: 26px;
-
-  box-shadow:
-    0 16px 48px rgba(0, 0, 0, 0.5),
-    0 2px 6px rgba(0, 0, 0, 0.25),
-    inset 0 0.5px 0 rgba(255, 255, 255, 0.15);
-}
-
-/* Alignment: icons grow away from the dock edge */
-#dock-inner.align-bottom {
-  align-items: flex-end;
-}
-#dock-inner.align-top {
-  align-items: flex-start;
-}
-#dock-inner.align-left,
-#dock-inner.align-right {
-  align-items: center;
-}
-
-#dock-inner.layout-vertical {
-  flex-direction: column;
-}
-
-/* ─── Individual dock item ──────────────────────────────────────────────────── */
-.dock-item {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 5px;
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-  user-select: none;
-  touch-action: manipulation;
-}
-
-/* ─── Icon box ──────────────────────────────────────────────────────────────── */
-.dock-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  position: relative;
-  background: rgba(58, 58, 62, 0.9);
-  will-change: width, height;
-  transition:
-    width 0.08s ease,
-    height 0.08s ease,
-    border-radius 0.08s ease,
-    box-shadow 0.18s ease,
-    filter 0.18s ease;
-  box-shadow:
-    0 2px 10px rgba(0, 0, 0, 0.4),
-    inset 0 1px 0 rgba(255, 255, 255, 0.08);
-}
-
-/* Settle-back transition when pointer leaves the dock */
-.dock-icon.settling {
-  transition:
-    width 0.28s cubic-bezier(0.34, 1.2, 0.64, 1),
-    height 0.28s cubic-bezier(0.34, 1.2, 0.64, 1),
-    border-radius 0.28s ease,
-    box-shadow 0.18s ease,
-    filter 0.18s ease;
-}
-
-/* Icon reflection glow */
-.dock-icon::after {
-  content: '';
-  position: absolute;
-  bottom: -4px;
-  left: 15%;
-  right: 15%;
-  height: 6px;
-  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.06) 0%, transparent 70%);
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity 0.2s ease;
-}
-
-.dock-item.active .dock-icon::after,
-.dock-item.mag-closest .dock-icon::after {
-  opacity: 1;
-}
-
-.dock-icon img {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  padding: 10px;
-  pointer-events: none;
-}
-
-/* Press feedback */
-.dock-item.pressing .dock-icon {
-  filter: brightness(0.88);
-}
-
-/* Active app glow */
-.dock-item.active .dock-icon {
-  box-shadow:
-    0 4px 18px rgba(0, 0, 0, 0.5),
-    0 0 0 2px rgba(255, 255, 255, 0.22),
-    inset 0 1px 0 rgba(255, 255, 255, 0.12);
-}
-
-/* ─── Active dot ────────────────────────────────────────────────────────────── */
-.dock-dot {
-  width: 4px;
-  height: 4px;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.85);
-  flex-shrink: 0;
-  opacity: 0;
-  transition: opacity 0.2s ease;
-}
-
-.dock-item.active .dock-dot {
-  opacity: 1;
-}
-
-/* ─── Label tooltip ─────────────────────────────────────────────────────────── */
-.dock-label {
-  position: absolute;
-  bottom: calc(100% + 10px);
-  left: 50%;
-  transform: translateX(-50%);
-
-  background: rgba(22, 22, 24, 0.92);
-  color: rgba(255, 255, 255, 0.95);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.02em;
-  padding: 5px 10px;
-  border-radius: 7px;
-  white-space: nowrap;
-  pointer-events: none;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
-
-  opacity: 0;
-  transition: opacity 0.12s ease;
-  z-index: 1;
-}
-
-/* Show label on press or when closest during magnification scrub */
-.dock-item.pressing .dock-label,
-.dock-item.mag-closest .dock-label {
-  opacity: 1;
-}
-
-/* Label positions for other dock positions */
-.dock-label-below {
-  bottom: auto;
-  top: calc(100% + 10px);
-}
-
-.dock-label-right {
-  bottom: auto;
-  top: 50%;
-  left: calc(100% + 10px);
-  transform: translateY(-50%);
-}
-
-.dock-label-left {
-  bottom: auto;
-  top: 50%;
-  left: auto;
-  right: calc(100% + 10px);
-  transform: translateY(-50%);
-}
-
-/* ─── Dock separator ───────────────────────────────────────────────────────── */
-.dock-separator {
-  width: 1px;
-  height: 32px;
-  background: rgba(255, 255, 255, 0.15);
-  flex-shrink: 0;
-  align-self: center;
-  margin: 0 2px;
-  border-radius: 1px;
-}
-
-.layout-vertical .dock-separator {
-  width: 32px;
-  height: 1px;
-  margin: 2px 0;
-}
-
-/* ─── Utility buttons (night mode, exit) ───────────────────────────────────── */
-.dock-icon-utility {
-  background: rgba(255, 255, 255, 0.08);
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  box-shadow: none;
-}
-
-.dock-item-utility .dock-dot {
-  display: none;
-}
-
-.dock-item-utility:hover .dock-icon-utility,
-.dock-item-utility.pressing .dock-icon-utility {
-  background: rgba(255, 255, 255, 0.15);
-}
-
-.dock-item-exit:hover .dock-icon-utility {
-  background: rgba(239, 68, 68, 0.25);
-}
-
-/* ─── Loading overlay ───────────────────────────────────────────────────────── */
-#loading-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 8;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 16px;
-  background: rgba(0, 0, 0, 0.6);
-  color: rgba(255, 255, 255, 0.75);
-  font-size: 14px;
-  font-weight: 500;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.2s ease;
-}
-
-#loading-overlay.visible {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.spinner {
-  width: 32px;
-  height: 32px;
-  border: 3px solid rgba(255, 255, 255, 0.15);
-  border-top-color: rgba(255, 255, 255, 0.75);
-  border-radius: 50%;
-  animation: spin 0.75s linear infinite;
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-/* ─── Welcome tour ─────────────────────────────────────────────────────────── */
-#tour-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 30;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgba(0, 0, 0, 0.6);
-  backdrop-filter: blur(4px);
-  -webkit-backdrop-filter: blur(4px);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.3s ease;
-  padding: 24px;
-}
-
-#tour-overlay.visible {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-#tour-card {
-  max-width: 520px;
-  width: 100%;
-  background: rgba(30, 30, 32, 0.9);
-  backdrop-filter: blur(40px) saturate(180%);
-  -webkit-backdrop-filter: blur(40px) saturate(180%);
-  border: 1px solid rgba(255, 255, 255, 0.18);
-  border-radius: 22px;
-  padding: 32px;
-  color: rgba(255, 255, 255, 0.92);
-  box-shadow:
-    0 24px 64px rgba(0, 0, 0, 0.6),
-    inset 0 0.5px 0 rgba(255, 255, 255, 0.15);
-  /* Position above the dock so user can see both */
-  margin-bottom: 180px;
-}
-
-#tour-title {
-  font-size: 22px;
-  font-weight: 700;
-  letter-spacing: 0.01em;
-  margin-bottom: 16px;
-}
-
-#tour-body {
-  font-size: 15px;
-  line-height: 1.55;
-  color: rgba(255, 255, 255, 0.78);
-}
-
-#tour-body p {
-  margin-bottom: 12px;
-}
-
-#tour-body p:last-child {
-  margin-bottom: 0;
-}
-
-#tour-link {
-  color: #60a5fa;
-  text-decoration: none;
-  font-weight: 600;
-}
-
-#tour-link:hover {
-  text-decoration: underline;
-}
-
-#tour-buttons {
-  display: flex;
-  gap: 10px;
-  margin-top: 24px;
-  justify-content: flex-end;
-}
-
-.tour-btn {
-  padding: 10px 20px;
-  border: none;
-  border-radius: 10px;
-  font-size: 14px;
-  font-weight: 600;
-  cursor: pointer;
-  font-family: inherit;
-  transition:
-    background 0.15s ease,
-    transform 0.1s ease;
-}
-
-.tour-btn-primary {
-  background: #3b82f6;
-  color: #fff;
-}
-
-.tour-btn-primary:hover {
-  background: #2563eb;
-}
-
-.tour-btn-dismiss {
-  background: rgba(255, 255, 255, 0.08);
-  color: rgba(255, 255, 255, 0.8);
-}
-
-.tour-btn-dismiss:hover {
-  background: rgba(255, 255, 255, 0.15);
-}
-
-.tour-btn:active {
-  transform: scale(0.97);
-}
+*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{-webkit-font-smoothing:antialiased;touch-action:none;background:#000;width:100%;height:100%;font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,Helvetica Neue,Arial,sans-serif;overflow:hidden}#iframe-container{z-index:1;position:fixed;inset:0}#iframe-container iframe{touch-action:auto;border:none;width:100%;height:100%;display:none;position:absolute;inset:0}#iframe-container iframe.active{display:block}#idle-hint{z-index:2;pointer-events:none;opacity:0;flex-direction:column;justify-content:center;align-items:center;gap:12px;animation:1.2s .6s forwards idle-fade-in;display:flex;position:fixed;inset:0}#idle-hint.hidden{display:none}#idle-logo{opacity:.85;border-radius:16px;width:72px;height:72px;margin-bottom:4px}#idle-title{color:#ffffffb3;letter-spacing:.02em;font-size:22px;font-weight:700}#idle-version{color:#ffffff59;letter-spacing:.05em;margin-top:-8px;font-size:11px;font-weight:500}#idle-hint-text{color:#ffffff8c;letter-spacing:.02em;text-align:center;max-width:480px;margin-top:12px;padding:0 32px;font-size:15px;font-weight:500;line-height:1.6}@keyframes idle-fade-in{to{opacity:1}}#dock-handle{z-index:5;appearance:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:0 0;border:none;padding:12px 18px;display:none;position:fixed}#dock-handle.visible{display:block}#dock-handle:before{content:"";background:#fff9;border-radius:3px;width:56px;height:6px;display:block;box-shadow:0 0 0 1px #00000059}#dock-handle.pos-bottom{bottom:env(safe-area-inset-bottom,0px);left:50%;transform:translate(-50%)}#dock-handle.pos-top{top:env(safe-area-inset-top,0px);left:50%;transform:translate(-50%)}#dock-handle.pos-left{left:env(safe-area-inset-left,0px);padding:18px 12px;top:50%;transform:translateY(-50%)}#dock-handle.pos-right{right:env(safe-area-inset-right,0px);padding:18px 12px;top:50%;transform:translateY(-50%)}#dock-handle.pos-left:before,#dock-handle.pos-right:before{width:6px;height:56px}#dock-backdrop{z-index:10;opacity:0;pointer-events:none;-webkit-backdrop-filter:blur(2px);background:#00000073;transition:opacity .28s;position:fixed;inset:0}#dock-backdrop.visible{opacity:1;pointer-events:auto}#dock{z-index:40;opacity:0;pointer-events:none;transition:transform .42s cubic-bezier(.34,1.45,.64,1),opacity .25s;position:fixed}#dock.visible{opacity:1;pointer-events:auto}#dock.pos-bottom{bottom:max(16px, env(safe-area-inset-bottom,16px));left:50%;transform:translate(-50%)translateY(calc(100% + 32px))scale(.92)}#dock.pos-bottom.visible{transform:translate(-50%)translateY(0)scale(1)}#dock.pos-top{top:max(16px, env(safe-area-inset-top,16px));left:50%;transform:translate(-50%)translateY(calc(-100% - 32px))scale(.92)}#dock.pos-top.visible{transform:translate(-50%)translateY(0)scale(1)}#dock.pos-left{left:max(16px, env(safe-area-inset-left,16px));top:50%;transform:translateY(-50%)translate(calc(-100% - 32px))scale(.92)}#dock.pos-left.visible{transform:translateY(-50%)translate(0)scale(1)}#dock.pos-right{right:max(16px, env(safe-area-inset-right,16px));top:50%;transform:translateY(-50%)translate(calc(100% + 32px))scale(.92)}#dock.pos-right.visible{transform:translateY(-50%)translate(0)scale(1)}#dock-inner{-webkit-backdrop-filter:blur(60px)saturate(180%);background:#1e1e208c;border:1px solid #ffffff2e;border-radius:26px;flex-direction:row;gap:10px;padding:12px 18px;display:flex;box-shadow:0 16px 48px #00000080,0 2px 6px #00000040,inset 0 .5px #ffffff26}#dock-inner.align-bottom{align-items:flex-end}#dock-inner.align-top{align-items:flex-start}#dock-inner.align-left,#dock-inner.align-right{align-items:center}#dock-inner.layout-vertical{flex-direction:column}.dock-item{cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation;flex-direction:column;align-items:center;gap:5px;display:flex;position:relative}.dock-icon{will-change:width, height;background:#3a3a3ee6;justify-content:center;align-items:center;transition:width 80ms,height 80ms,border-radius 80ms,box-shadow .18s,filter .18s;display:flex;position:relative;overflow:hidden;box-shadow:0 2px 10px #0006,inset 0 1px #ffffff14}.dock-icon.settling{transition:width .28s cubic-bezier(.34,1.2,.64,1),height .28s cubic-bezier(.34,1.2,.64,1),border-radius .28s,box-shadow .18s,filter .18s}.dock-icon:after{content:"";pointer-events:none;opacity:0;background:radial-gradient(#ffffff0f 0%,#0000 70%);height:6px;transition:opacity .2s;position:absolute;bottom:-4px;left:15%;right:15%}.dock-item.active .dock-icon:after,.dock-item.mag-closest .dock-icon:after{opacity:1}.dock-icon img{object-fit:contain;pointer-events:none;width:100%;height:100%;padding:10px}.dock-item.pressing .dock-icon{filter:brightness(.88)}.dock-item.active .dock-icon{box-shadow:0 4px 18px #00000080,0 0 0 2px #ffffff38,inset 0 1px #ffffff1f}.dock-dot{opacity:0;background:#ffffffd9;border-radius:50%;flex-shrink:0;width:4px;height:4px;transition:opacity .2s}.dock-item.active .dock-dot{opacity:1}.dock-label{color:#fffffff2;letter-spacing:.02em;white-space:nowrap;pointer-events:none;opacity:0;z-index:1;background:#161618eb;border:1px solid #ffffff1a;border-radius:7px;padding:5px 10px;font-size:11px;font-weight:600;transition:opacity .12s;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%);box-shadow:0 4px 12px #0006}.dock-item.pressing .dock-label,.dock-item.mag-closest .dock-label{opacity:1}.dock-label-below{top:calc(100% + 10px);bottom:auto}.dock-label-right{top:50%;bottom:auto;left:calc(100% + 10px);transform:translateY(-50%)}.dock-label-left{inset:50% calc(100% + 10px) auto auto;transform:translateY(-50%)}.dock-separator{background:#ffffff26;border-radius:1px;flex-shrink:0;align-self:center;width:1px;height:32px;margin:0 2px}.layout-vertical .dock-separator{width:32px;height:1px;margin:2px 0}.dock-icon-utility{box-shadow:none;background:#ffffff14;border:1px solid #ffffff1f}.dock-item-utility .dock-dot{display:none}.dock-item-utility:hover .dock-icon-utility,.dock-item-utility.pressing .dock-icon-utility{background:#ffffff26}.dock-item-exit:hover .dock-icon-utility{background:#ef444440}.dock-svg-icon{color:#ffffffe6;flex-shrink:0;width:55%;height:55%}.dock-svg-sun{color:#fbbf24}.dock-svg-moon{color:#c7d2fe}#loading-overlay{z-index:8;color:#ffffffbf;opacity:0;pointer-events:none;background:#0009;flex-direction:column;justify-content:center;align-items:center;gap:16px;font-size:14px;font-weight:500;transition:opacity .2s;display:flex;position:fixed;inset:0}#loading-overlay.visible{opacity:1;pointer-events:auto}.spinner{border:3px solid #ffffff26;border-top-color:#ffffffbf;border-radius:50%;width:32px;height:32px;animation:.75s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}#tour-overlay{z-index:30;-webkit-backdrop-filter:blur(4px);opacity:0;pointer-events:none;background:#0009;justify-content:center;align-items:center;padding:24px;transition:opacity .3s;display:flex;position:fixed;inset:0}#tour-overlay.visible{opacity:1;pointer-events:auto}#tour-card{-webkit-backdrop-filter:blur(40px)saturate(180%);color:#ffffffeb;background:#1e1e20e6;border:1px solid #ffffff2e;border-radius:22px;width:100%;max-width:520px;margin-bottom:180px;padding:32px;box-shadow:0 24px 64px #0009,inset 0 .5px #ffffff26}#tour-title{letter-spacing:.01em;margin-bottom:16px;font-size:22px;font-weight:700}#tour-body{color:#ffffffc7;font-size:15px;line-height:1.55}#tour-body p{margin-bottom:12px}#tour-body p:last-child{margin-bottom:0}#tour-link{color:#60a5fa;font-weight:600;text-decoration:none}#tour-link:hover{text-decoration:underline}#tour-buttons{justify-content:flex-end;gap:10px;margin-top:24px;display:flex}.tour-btn{cursor:pointer;border:none;border-radius:10px;padding:10px 20px;font-family:inherit;font-size:14px;font-weight:600;transition:background .15s,transform .1s}.tour-btn-primary{color:#fff;background:#3b82f6}.tour-btn-primary:hover{background:#2563eb}.tour-btn-dismiss{color:#fffc;background:#ffffff14}.tour-btn-dismiss:hover{background:#ffffff26}.tour-btn:active{transform:scale(.97)}