style: apply frosted glass look to custom blocks and hide type labels

Replace default VitePress callout styling with frosted glass aesthetic
matching the home page wip-banner. Each block type uses a subtle color
tint and left border (blue/green/amber/red/neutral) instead of the
prominent INFO/TIP/WARNING/DANGER labels. Includes dark mode variants.

Author: phaupt

docs/.vitepress/theme/custom.css

@@ -275,3 +275,98 @@ html.dark .vp-doc img:not(.no-zoom):hover {
 html.dark .VPSwitchAppearance .icon [class^='vpi-'] {
   color: rgba(223, 223, 214, 0.85);
 }
+
+/* ====================================================================
+   Frosted-glass custom blocks (info · tip · warning · danger · details)
+   Mirrors the wip-banner aesthetic from the home page.
+   ==================================================================== */
+
+.vp-doc .custom-block.info,
+.vp-doc .custom-block.tip,
+.vp-doc .custom-block.warning,
+.vp-doc .custom-block.danger,
+.vp-doc .custom-block.details {
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
+  border-radius: 6px;
+  border: none;
+  padding: 1rem 1.5rem;
+  line-height: 1.6;
+  font-size: 0.95rem;
+  color: var(--vp-c-text-1);
+}
+
+/* Hide the type label (INFO / TIP / WARNING / DANGER) */
+.vp-doc .custom-block.info > .custom-block-title,
+.vp-doc .custom-block.tip > .custom-block-title,
+.vp-doc .custom-block.warning > .custom-block-title,
+.vp-doc .custom-block.danger > .custom-block-title {
+  display: none;
+}
+
+/* — info: subtle blue tint ----------------------------------------- */
+.vp-doc .custom-block.info {
+  border-left: 4px solid rgba(59, 130, 246, 0.50);
+  background-color: rgba(235, 245, 255, 0.58);
+}
+
+/* — tip: subtle green tint ----------------------------------------- */
+.vp-doc .custom-block.tip {
+  border-left: 4px solid rgba(16, 185, 129, 0.50);
+  background-color: rgba(235, 255, 245, 0.58);
+}
+
+/* — warning: subtle amber tint ------------------------------------- */
+.vp-doc .custom-block.warning {
+  border-left: 4px solid rgba(245, 158, 11, 0.50);
+  background-color: rgba(255, 250, 235, 0.58);
+}
+
+/* — danger: subtle red tint ---------------------------------------- */
+.vp-doc .custom-block.danger {
+  border-left: 4px solid rgba(239, 68, 68, 0.50);
+  background-color: rgba(255, 240, 238, 0.58);
+}
+
+/* — details: subtle neutral tint ----------------------------------- */
+.vp-doc .custom-block.details {
+  border-left: 4px solid rgba(120, 120, 130, 0.40);
+  background-color: rgba(245, 245, 250, 0.58);
+}
+
+.vp-doc .custom-block.details > summary {
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+
+/* ---- Dark mode --------------------------------------------------- */
+html.dark .vp-doc .custom-block.info {
+  background-color: rgba(30, 40, 60, 0.62);
+  border-left-color: rgba(59, 130, 246, 0.40);
+  box-shadow: 0 1px 4px rgba(255, 255, 255, 0.06);
+}
+
+html.dark .vp-doc .custom-block.tip {
+  background-color: rgba(30, 50, 40, 0.62);
+  border-left-color: rgba(16, 185, 129, 0.40);
+  box-shadow: 0 1px 4px rgba(255, 255, 255, 0.06);
+}
+
+html.dark .vp-doc .custom-block.warning {
+  background-color: rgba(50, 45, 30, 0.62);
+  border-left-color: rgba(245, 158, 11, 0.40);
+  box-shadow: 0 1px 4px rgba(255, 255, 255, 0.06);
+}
+
+html.dark .vp-doc .custom-block.danger {
+  background-color: rgba(50, 30, 30, 0.62);
+  border-left-color: rgba(239, 68, 68, 0.40);
+  box-shadow: 0 1px 4px rgba(255, 255, 255, 0.06);
+}
+
+html.dark .vp-doc .custom-block.details {
+  background-color: rgba(35, 35, 40, 0.62);
+  border-left-color: rgba(120, 120, 130, 0.35);
+  box-shadow: 0 1px 4px rgba(255, 255, 255, 0.06);
+}