html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }
body { font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.6; color: #E1DCC9; background-color: #000000; }
.font-display { font-family: "Sora", "Manrope", system-ui, sans-serif; letter-spacing: -0.03em; }
:focus-visible { outline: 2px solid #E1DCC9; outline-offset: 2px; border-radius: 4px; }

.grid-fade { position: relative; background: #000000; }
.grid-fade::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(225,220,201,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(225,220,201,.04) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 80% 30%, #000, transparent 70%);
  mask-image: radial-gradient(ellipse 60% 70% at 80% 30%, #000, transparent 70%);
}
.grid-fade > * { position: relative; }
.glow-c { background: radial-gradient(closest-side, rgba(65,45,21,0.5), transparent); }
.glow { background: radial-gradient(closest-side, rgba(31,21,12,0.8), transparent); }

.input { width: 100%; border: 1px solid #412D15; border-radius: 0.5rem; background: #1F150C; padding: 0.7rem 0.9rem; color: #E1DCC9; font-size: 0.95rem; transition: all 0.2s ease; }
.input:focus { border-color: #E1DCC9; outline: 3px solid rgba(225,220,201,0.15); outline-offset: 0; }
.sq { flex: none; width: 0.4rem; height: 0.4rem; margin-top: 0.55rem; background: #E1DCC9; border-radius: 1px; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.rise { animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
.d1 { animation-delay: 0.08s; } .d2 { animation-delay: 0.16s; } .d3 { animation-delay: 0.24s; }

details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] > summary .plus { transform: rotate(45deg); }