* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: #E7E0D4;
  background-image: radial-gradient(circle at 20% 10%, rgba(214,80,47,.05), transparent 45%),
                    radial-gradient(circle at 85% 80%, rgba(224,162,58,.07), transparent 45%);
  font-family: 'Hanken Grotesque', -apple-system, sans-serif;
  color: #2A211A;
}
::-webkit-scrollbar { width: 0; height: 0; }

@keyframes ratioPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.78); } }
@keyframes ratioRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

#app {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
  height: 100dvh;
  background: #F6EFE1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 0 60px rgba(33,26,20,.18);
}
#screen { flex: 1 1 auto; overflow-y: auto; position: relative; -webkit-overflow-scrolling: touch; }
#nav { flex: none; }
#nav:empty { display: none; }

#toast {
  position: absolute;
  left: 50%;
  bottom: 92px;
  transform: translateX(-50%) translateY(12px);
  background: #2A211A;
  color: #F6EFE1;
  font-size: 13px;
  font-weight: 600;
  padding: 11px 16px;
  border-radius: 12px;
  box-shadow: 0 14px 30px -12px rgba(33,26,20,.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 60;
  max-width: 90%;
  text-align: center;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

input { font-family: 'Hanken Grotesque', sans-serif; }
a { text-decoration: none; color: inherit; }