/* monopoleai.com - Wabi-Sabi Imperfect Intelligence */
/* Colors: #1A1816, #60A8D0, #C0A060, #C07060, #98A8B8, #201E1C, #9088C0, #E0E8F0 */
/* Fonts: Fraunces, Atkinson Hyperlegible, IBM Plex Mono */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: #1A1816; color: #E0E8F0; font-family: 'Atkinson Hyperlegible', sans-serif; }

#bento-grid { max-width: 1200px; margin: 0 auto; padding: 2rem; display: grid; grid-template-columns: repeat(8, 1fr); grid-auto-rows: minmax(100px, auto); gap: 8px; }

.bento-cell { background: #201E1C; padding: 1.5rem; position: relative; overflow: hidden; transform: rotate(var(--rot, 0deg)); opacity: 0; animation: cellAppear 0.6s ease forwards; animation-delay: var(--delay, 0ms); }

@keyframes cellAppear { from { opacity: 0; transform: rotate(var(--rot, 0deg)) scale(0.95); } to { opacity: 1; transform: rotate(var(--rot, 0deg)) scale(1); } }

.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-8 { grid-column: span 8; }
.tall { grid-row: span 2; }

.hero-cell { padding: 3rem; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-height: 200px; }

.cell-label { font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: #C0A060; display: block; margin-bottom: 0.75rem; }

.cell-title { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.5rem); letter-spacing: 0.01em; color: #E0E8F0; margin-bottom: 0.75rem; line-height: 1.2; }

.hero-cell .cell-title { font-size: clamp(2rem, 5vw, 4rem); }

.cell-body { font-family: 'Atkinson Hyperlegible', sans-serif; font-size: 0.95rem; line-height: 1.75; color: #98A8B8; }

/* Confidence Blobs */
.confidence-blob { width: 80px; height: 80px; background: rgba(96, 168, 208, 0.25); display: flex; align-items: center; justify-content: center; margin-top: 1.5rem; animation: blobBreath 6s ease-in-out infinite; }

@keyframes blobBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

.conf-value { font-family: 'Fraunces', serif; font-size: 1.2rem; color: #60A8D0; font-weight: 600; }

/* Uncertainty Metric */
.uncertainty-metric { margin-top: 1.5rem; }
.metric-label { font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; color: #9088C0; letter-spacing: 0.05em; display: block; margin-bottom: 0.5rem; }
.uncertainty-bar { width: 100%; height: 6px; background: #1A1816; overflow: hidden; }
.uncertainty-fill { height: 100%; background: linear-gradient(90deg, #9088C0, #C07060); transition: width 1s ease; }
.metric-note { font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; color: #C07060; display: block; margin-top: 0.3rem; animation: slowShake 4s ease-in-out infinite; }

@keyframes slowShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-1px); } 75% { transform: translateX(1px); } }

@media (max-width: 768px) {
    #bento-grid { grid-template-columns: 1fr; }
    .span-3, .span-4, .span-5, .span-8 { grid-column: span 1; }
    .tall { grid-row: span 1; }
}