/* StarBorder + MagicBento styles (2026-10-29). Pairs with starborder.js and bento.js. */
.star-border { position: relative; isolation: isolate; }
.star-border::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: inset 0 0 0 var(--star-border-thickness, 1px) rgba(255,255,255,.1); pointer-events: none; }
.star-border__light { position: absolute; top: -48px; left: -48px; z-index: -1; width: calc(100% + 96px); height: calc(100% + 96px); pointer-events: none; }

.bento-card { position: relative; isolation: isolate; overflow: hidden; }
.bento-card > * { position: relative; z-index: 2; }
.bento-card > .bento-light, .bento-card > .bento-border { position: absolute; z-index: 1; }
.bento-wait { opacity: 0; }
.bento-light { inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(var(--mb-spot-size, 300px) circle at var(--mb-x, -999px) var(--mb-y, -999px), rgba(var(--mb-glow-rgb), calc(.08 * var(--mb-hot, 0))), rgba(var(--mb-glow-rgb), 0) 70%);
  transition: opacity .3s; }
.bento-border { inset: 0; z-index: 3 !important; padding: 1px; border-radius: inherit; pointer-events: none; box-sizing: border-box;
  background:
    radial-gradient(var(--mb-border-size, 225px) circle at var(--mb-x, -999px) var(--mb-y, -999px), rgba(var(--mb-glow-rgb), calc(.85 * var(--mb-near, 0))), rgba(var(--mb-glow-rgb), calc(.3 * var(--mb-near, 0))) 45%, rgba(var(--mb-glow-rgb), 0) 100%),
    radial-gradient(circle at var(--mb-wx, -999px) var(--mb-wy, -999px), rgba(var(--mb-glow-rgb), 0) calc(var(--mb-wr, 0px) - 110px), rgba(var(--mb-glow-rgb), calc(.6 * var(--mb-wa, 0))) calc(var(--mb-wr, 0px) - 20px), rgba(var(--mb-glow-rgb), calc(.85 * var(--mb-wa, 0))) calc(var(--mb-wr, 0px) - 3px), rgba(var(--mb-glow-rgb), 0) var(--mb-wr, 0px));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }

/* TiltedCard */
.tc-wrap { position: relative; perspective: 800px; display: grid; place-items: center; touch-action: pan-y pinch-zoom; -webkit-tap-highlight-color: transparent; }
.tc-wrap[data-flip] { cursor: pointer; }
.tc-wrap:focus-visible { outline: 2px solid #4EEE52; outline-offset: 4px; border-radius: 18px; }
.tc-shadow { position: absolute; inset: 0; margin: auto; background: rgba(0,0,0,.55); filter: blur(20px); opacity: 0; pointer-events: none; border-radius: 18px; }
.tc-body { position: relative; display: grid; transform-style: preserve-3d; width: 100%; }
.tc-body > .tc-face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; position: relative; overflow: hidden; isolation: isolate; }
.tc-body > .tc-back { transform: rotateY(180deg); }
.tc-face [data-depth] { transform: translate3d(calc(var(--tc-px, 0) * var(--d, 12) * 1px), calc(var(--tc-py, 0) * var(--d, 12) * 1px), 0); }
.tc-glare { position: absolute; inset: 0; z-index: 5; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(farthest-corner circle at var(--tc-gx, 50%) var(--tc-gy, 50%), rgba(255,255,255,calc(var(--tc-glare, 0) * .3)), rgba(255,255,255,calc(var(--tc-glare, 0) * .12)) 25%, rgba(255,255,255,0) 60%); }
.tc-edge { position: absolute; inset: 0; z-index: 6; padding: 1px; border-radius: inherit; pointer-events: none; box-sizing: border-box;
  background: radial-gradient(farthest-side circle at var(--tc-gx, 50%) var(--tc-gy, 50%), rgba(255,255,255,calc(var(--tc-glare, 0) * .8)), rgba(255,255,255,calc(var(--tc-glare, 0) * .2)) 50%, rgba(255,255,255,0) 85%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }