.bento-section{--hue:27;--sat:69%;--white:#fff;--purple-primary:#3b82f6;--purple-glow:#3b82f633;--purple-border:#3b82f6cc;--border-color:#392e4e;--background-dark:#060010;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}.card-grid{gap:.5em;max-width:54em;padding:.75em;font-size:clamp(1rem,.9rem + .5vw,1.5rem);display:grid}.magic-bento-card{aspect-ratio:4/3;border:1px solid var(--border-color);background:var(--background-dark);--glow-x:50%;--glow-y:50%;--glow-intensity:0;--glow-radius:200px;border-radius:20px;flex-direction:column;justify-content:space-between;width:100%;max-width:100%;min-height:200px;padding:1.25em;font-weight:300;transition:all .3s;display:flex;position:relative;overflow:hidden}.magic-bento-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #00000026}.magic-bento-card:has(.magic-bento-card__visual){justify-content:flex-start;gap:.35em}.magic-bento-card:has(.magic-bento-card__visual) .magic-bento-card__content{flex-grow:1}.magic-bento-card__header,.magic-bento-card__content{color:var(--white);display:flex;position:relative}.magic-bento-card__header{justify-content:space-between;gap:.75em}.magic-bento-card__content{flex-direction:column}.magic-bento-card__label{font-size:16px}.magic-bento-card__title,.magic-bento-card__description{--clamp-title:1;--clamp-desc:2}.magic-bento-card__title{margin:0 0 .25em;font-size:16px;font-weight:400}.magic-bento-card__description{opacity:.9;font-size:12px;line-height:1.2}.magic-bento-card--text-autohide .magic-bento-card__title,.magic-bento-card--text-autohide .magic-bento-card__description{text-overflow:ellipsis;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.magic-bento-card--text-autohide .magic-bento-card__title{-webkit-line-clamp:var(--clamp-title);line-clamp:var(--clamp-title)}.magic-bento-card--text-autohide .magic-bento-card__description{-webkit-line-clamp:var(--clamp-desc);line-clamp:var(--clamp-desc)}@media (max-width:599px){.card-grid{grid-template-columns:1fr;width:90%;margin:0 auto;padding:.5em}.magic-bento-card{width:100%;min-height:180px}}@media (min-width:600px){.card-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width:1024px){.card-grid{grid-template-columns:repeat(4,1fr)}.magic-bento-card:nth-child(3){grid-area:span 2/span 2}.magic-bento-card:nth-child(4){grid-area:2/1/span 2/span 2}.magic-bento-card:nth-child(6){grid-area:3/4}}.magic-bento-card--border-glow:after{content:"";background:radial-gradient(var(--glow-radius) circle at var(--glow-x) var(--glow-y), rgba(59, 130, 246, calc(var(--glow-intensity) * .8)) 0%, rgba(59, 130, 246, calc(var(--glow-intensity) * .4)) 30%, transparent 60%);border-radius:inherit;-webkit-mask-composite:xor;pointer-events:none;opacity:1;z-index:1;padding:6px;transition:opacity .3s;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.magic-bento-card--border-glow:hover:after{opacity:1}.magic-bento-card--border-glow:hover{box-shadow:0 4px 20px #2e184e66, 0 0 30px var(--purple-glow)}.particle-container{position:relative;overflow:hidden}.particle:before{content:"";z-index:-1;background:#3b82f633;border-radius:50%;position:absolute;inset:-2px}.particle-container:hover{box-shadow:0 4px 20px #2e184e33, 0 0 30px var(--purple-glow)}.global-spotlight{mix-blend-mode:screen;will-change:transform, opacity;pointer-events:none;z-index:200!important}.bento-section{-webkit-user-select:none;user-select:none;position:relative}.magic-bento-card__visual{z-index:2;color:#93c5fdf5;justify-content:center;align-items:center;min-height:76px;margin:-.2rem 0 .4rem;display:flex;position:relative}.mediaBentoVisual{pointer-events:none;justify-content:center;align-items:center;width:100%;display:flex;position:relative}.mediaBentoVisualSkip30{background:radial-gradient(120% 100% at 30% 20%,#3b82f652 0%,#0f172ae0 62%);border-radius:14px;flex-direction:row;justify-content:center;align-items:center;gap:8px;padding:10px 14px;display:inline-flex;box-shadow:0 0 0 1px #3b82f647,0 10px 26px #00000061}.mediaBentoVisualSkip30Label{letter-spacing:.04em;color:#e2e8f0fa;font-size:13px;font-weight:750}.mediaBentoVisualSkip30Icon{color:#bae6fdfa;flex-shrink:0}.mediaBentoVisual--prev .mediaBentoVisualSkip30{animation:2.4s ease-in-out infinite mediaBentoSkip30NudgeLeft}.mediaBentoVisual--next .mediaBentoVisualSkip30{animation:2.4s ease-in-out infinite mediaBentoSkip30NudgeRight}@keyframes mediaBentoSkip30NudgeLeft{0%,to{transform:translate(0)}50%{transform:translate(-4px)}}@keyframes mediaBentoSkip30NudgeRight{0%,to{transform:translate(0)}50%{transform:translate(4px)}}.mediaBentoVisual--queue{flex-direction:column;gap:8px;min-height:78px}.mediaBentoVisualQueue{width:88px;height:44px;position:relative}.mediaBentoVisualQueueCard{background:linear-gradient(145deg,#334155f2,#1e293bd9);border-radius:8px;width:72px;height:26px;margin-left:-36px;position:absolute;left:50%;box-shadow:0 0 0 1px #94a3b81f}.mediaBentoVisualQueueCard--a{opacity:.55;top:0;transform:scale(.92)}.mediaBentoVisualQueueCard--b{z-index:2;animation:2.8s ease-in-out infinite mediaBentoQueueLift;top:9px;box-shadow:0 0 0 1px #3b82f673,0 8px 20px #00000059}.mediaBentoVisualQueueCard--c{opacity:.65;top:18px;transform:scale(.96)}@keyframes mediaBentoQueueLift{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.mediaBentoVisualQueueGrip{justify-content:center;align-items:center;gap:4px;display:flex}.mediaBentoVisualQueueGrip span{background:#94a3b8bf;border-radius:50%;width:4px;height:4px;animation:1.6s ease-in-out infinite mediaBentoGripPulse}.mediaBentoVisualQueueGrip span:nth-child(2){animation-delay:.2s}.mediaBentoVisualQueueGrip span:nth-child(3){animation-delay:.4s}@keyframes mediaBentoGripPulse{0%,to{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.15)}}.mediaBentoVisual--speed{flex-direction:column;gap:4px}.mediaBentoVisualGauge{justify-content:center;align-items:center;width:58px;height:50px;display:flex;position:relative}.mediaBentoVisualGaugeIcon{opacity:.95;filter:drop-shadow(0 0 12px #3b82f659)}.mediaBentoVisualGaugeNeedle{transform-origin:50% 100%;background:linear-gradient(#bfdbfe,#3b82f680);border-radius:2px;width:3px;height:20px;margin-left:-1.5px;animation:3.2s ease-in-out infinite mediaBentoNeedle;position:absolute;bottom:6px;left:50%}@keyframes mediaBentoNeedle{0%,to{transform:rotate(-42deg)}50%{transform:rotate(38deg)}}.mediaBentoVisualSpeedTicks{letter-spacing:.02em;color:#94a3b8d9;gap:10px;font-size:9px;font-weight:600;display:flex}.mediaBentoVisualSpeedTicks span:nth-child(2){color:#93c5fdf2}.mediaBentoVisualAutoplay{justify-content:center;align-items:center;width:54px;height:54px;display:flex;position:relative}.mediaBentoVisualAutoplayOrbit{border:2px dashed #60a5fa80;border-radius:50%;animation:9s linear infinite mediaBentoSpin;position:absolute;inset:0}.mediaBentoVisualAutoplayPlay{z-index:1;color:#f8fafcf2;filter:drop-shadow(0 0 8px #3b82f680);margin-left:3px;position:relative}.mediaBentoVisualAutoplayRepeat{z-index:2;color:#93c5fde6;animation:2s ease-in-out infinite mediaBentoRepeatNudge;position:absolute;bottom:2px;right:2px}@keyframes mediaBentoSpin{to{transform:rotate(360deg)}}@keyframes mediaBentoRepeatNudge{0%,to{transform:rotate(0)}35%{transform:rotate(-18deg)}70%{transform:rotate(12deg)}}.mediaBentoVisual--skip{min-height:56px}.mediaBentoVisualSkipBurst{background:radial-gradient(circle,#3b82f633 0%,#0000 65%);border-radius:16px;animation:2s ease-in-out infinite mediaBentoSkipGlow;position:absolute;inset:-6px}.mediaBentoVisualSkipIcon{z-index:1;color:#bae6fdfa;animation:1.8s ease-in-out infinite mediaBentoSkipPulse;position:relative}@keyframes mediaBentoSkipGlow{0%,to{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}@keyframes mediaBentoSkipPulse{0%,to{opacity:.9;transform:translate(0)}50%{opacity:1;transform:translate(4px)}}@media (prefers-reduced-motion:reduce){.mediaBentoVisualSkip30,.mediaBentoVisualQueueCard--b,.mediaBentoVisualQueueGrip span,.mediaBentoVisualGaugeNeedle,.mediaBentoVisualAutoplayOrbit,.mediaBentoVisualAutoplayRepeat,.mediaBentoVisualSkipBurst,.mediaBentoVisualSkipIcon{animation:none!important}.mediaBentoVisual--prev .mediaBentoVisualSkip30,.mediaBentoVisual--next .mediaBentoVisualSkip30{transform:none}}
