@import "tailwindcss";
@import "@openai/apps-sdk-ui/css";
/* Configure Tailwind v4 to scan for classes */
@source "../node_modules/@openai/apps-sdk-ui";
@source "./**/*.{ts,tsx,js,jsx,html}";
@theme {
/* Enable class-based dark mode */
--color-scheme: light dark;
}
@variant dark (&:where(.dark, .dark *));
/* Custom styles */
body {
margin: 0;
font-family:
-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1,
h2,
h3,
h4,
h5,
h6 {
@apply text-default;
}
p {
@apply text-secondary;
}
a {
@apply text-info;
}
/* Carousel scroll container with padding for blur effect */
.carousel-scroll-container {
padding-bottom: 2rem;
}
/* Hover effect styles for carousel items */
.carousel-item {
position: relative;
container-type: size;
cursor: pointer;
transition-property: translate, scale;
transition-duration: 0.12s;
transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
-webkit-tap-highlight-color: transparent;
overflow: hidden;
border-radius: 12px;
}
.carousel-item:active {
translate: 0 1px;
scale: 0.99;
}
.carousel-item-content {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.carousel-item-bg {
position: absolute;
inset: 0;
display: grid;
place-items: center;
transform: translateZ(0);
filter: blur(28px) saturate(5) brightness(1.3);
translate: calc(var(--pointer-x, -10) * 50cqi)
calc(var(--pointer-y, -10) * 50cqh);
scale: var(--icon-scale, 3.4);
opacity: var(--icon-opacity, 0.25);
will-change: transform, filter, opacity;
pointer-events: none;
z-index: 1;
transition:
opacity 0.26s ease-out,
scale 0.26s ease-out;
border-radius: inherit;
}
.carousel-item-bg img {
width: 100px;
-webkit-user-select: none;
user-select: none;
-webkit-user-drag: none;
}
.carousel-item::after {
content: "";
position: absolute;
pointer-events: none;
inset: 0px;
border-radius: inherit;
border: 3px solid transparent;
backdrop-filter: blur(0px) saturate(4.2) brightness(2.5) contrast(2.5);
-webkit-backdrop-filter: blur(0px) saturate(4.2) brightness(2.5) contrast(2.5);
mask:
linear-gradient(#fff 0 100%) border-box,
linear-gradient(#fff 0 100%) padding-box;
mask-composite: exclude;
z-index: 3;
transform: translateZ(0);
}
.memory-graph-shell {
--sm-ink: #eef3ff;
--sm-muted: #aab6d9;
--sm-border: rgba(96, 121, 255, 0.38);
--sm-accent: #3de0ff;
--sm-accent-2: #4f72ff;
border: 1px solid var(--sm-border);
border-radius: 20px;
background:
radial-gradient(120% 220% at 50% -55%, rgba(86, 104, 255, 0.42) 0%, rgba(86, 104, 255, 0) 58%),
linear-gradient(180deg, #050a19 0%, #060c1d 100%);
min-height: 560px;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow:
0 12px 42px rgba(3, 7, 18, 0.66),
inset 0 1px 0 rgba(124, 144, 255, 0.18);
}
.memory-graph-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 18px 14px;
border-bottom: 1px solid rgba(96, 121, 255, 0.34);
background:
radial-gradient(125% 230% at 50% -145%, rgba(103, 116, 255, 0.9) 0%, rgba(103, 116, 255, 0) 64%),
radial-gradient(70% 180% at 20% -30%, rgba(61, 224, 255, 0.24) 0%, rgba(61, 224, 255, 0) 62%),
linear-gradient(180deg, rgba(13, 20, 44, 0.96) 0%, rgba(8, 13, 31, 0.92) 100%);
}
.memory-graph-heading {
min-width: 0;
}
.memory-graph-kicker {
margin: 0 0 4px;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(196, 209, 255, 0.8);
}
.memory-graph-title {
margin: 0;
font-size: 1.35rem;
line-height: 1.1;
font-weight: 700;
color: var(--sm-ink);
text-shadow: 0 0 22px rgba(104, 125, 255, 0.22);
}
.memory-graph-subtitle {
margin: 5px 0 0;
font-size: 0.9rem;
color: var(--sm-muted);
}
.memory-graph-stats {
display: flex;
gap: 8px;
margin-top: 10px;
}
.memory-graph-stat {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.74rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(197, 210, 255, 0.82);
border: 1px solid rgba(102, 126, 255, 0.46);
border-radius: 999px;
padding: 4px 9px;
background: rgba(13, 20, 45, 0.72);
box-shadow: inset 0 1px 0 rgba(132, 149, 255, 0.2);
}
.memory-graph-stat strong {
color: var(--sm-ink);
font-size: 0.78rem;
}
.memory-graph-variant {
display: inline-flex;
align-items: center;
gap: 7px;
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.68rem;
font-weight: 600;
border: 1px solid rgba(100, 124, 255, 0.5);
color: rgba(218, 228, 255, 0.9);
border-radius: 999px;
padding: 7px 11px;
background: linear-gradient(180deg, rgba(12, 19, 42, 0.88) 0%, rgba(8, 13, 31, 0.8) 100%);
box-shadow: inset 0 1px 0 rgba(136, 151, 255, 0.24);
}
.memory-graph-variant-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--sm-accent);
box-shadow: 0 0 0 4px rgba(61, 224, 255, 0.2);
}
.memory-graph-canvas {
flex: 1 1 auto;
height: 68vh;
min-height: 480px;
}
.memory-graph-canvas > * {
width: 100%;
height: 100%;
}
@media (max-width: 640px) {
.memory-graph-header {
align-items: flex-start;
flex-direction: column;
}
.memory-graph-title {
font-size: 1.15rem;
}
}
