*, *::before, *::after { box-sizing: border-box; }
body { font-family: 'DM Sans', system-ui, sans-serif; background: #FAFAF7; color: #2D2D2D; margin: 0; }

@keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes checkPop { 0% { transform: scale(0); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes blink { 50% { border-color: transparent; } }

.animate-fade-in-up { animation: fadeInUp 0.4s ease-out both; }
.animate-fade-in { animation: fadeIn 0.3s ease-out both; }
.animate-check { animation: checkPop 0.3s ease-out both; }

.tree-block { transition: box-shadow 0.2s, opacity 0.2s; border-radius: 8px; }
.block-glow { box-shadow: 0 0 16px 2px rgba(59,130,246,0.18); }
.block-dim { opacity: 0.45; transition: opacity 0.2s; }
.block-normal { opacity: 1; transition: opacity 0.2s; }

.nutshell-expand { overflow: hidden; transition: max-height 0.35s cubic-bezier(0.25, 0.1, 0.25, 1.0), opacity 0.25s ease; }
.nutshell-trigger-btn { cursor: pointer; transition: background 0.2s, border-color 0.2s; }
.nutshell-trigger-btn:hover { background: rgba(27,42,74,0.04); }
.nutshell-arrow { transition: transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1.0); display: inline-block; }
.nutshell-arrow.open { transform: rotate(90deg); }

.category-pill { font-size: 0.7rem; padding: 2px 10px; border-radius: 9999px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; transition: all 0.2s; border: 1.5px solid transparent; white-space: nowrap; }

input::placeholder { color: #9CA3AF; transition: opacity 0.3s; }
input:focus::placeholder { opacity: 0.5; }

.main-scroll::-webkit-scrollbar { width: 6px; }
.main-scroll::-webkit-scrollbar-track { background: transparent; }
.main-scroll::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 10px; }