:root{
  --cream:#fff8ec;
  --terracotta:#c2410c;
  --saffron:#e8a13c;
  --teal:#2d5a4a;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Bricolage Grotesque', system-ui, sans-serif;
  color:#3a2413;
  -webkit-font-smoothing:antialiased;
}
.zop-bg{
  background:
    radial-gradient(circle at 12% 8%, rgba(232,161,60,.28), transparent 45%),
    radial-gradient(circle at 88% 12%, rgba(194,65,12,.20), transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(45,90,74,.16), transparent 55%),
    linear-gradient(160deg,#fff6e6 0%, #fbe8cf 60%, #f6dcb8 100%);
  background-attachment:fixed;
}
.zop-title{
  font-weight:800;
  font-size:2.1rem;
  letter-spacing:-.02em;
  color:#fff8ec;
  text-shadow:0 2px 12px rgba(0,0,0,.25);
  line-height:1;
}
.zop-header{
  background:
    linear-gradient(120deg,#9a2d0a 0%, #c2410c 45%, #d97a1e 100%);
  position:relative;
  overflow:hidden;
  box-shadow:0 8px 30px rgba(90,30,5,.35);
}
.zop-header::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 12px, transparent 12px 24px);
  pointer-events:none;
}
.zop-proverb{
  display:inline-block;
  font-family:'IBM Plex Mono', monospace;
  font-size:.72rem;
  font-style:italic;
  color:#ffe8c8;
  background:rgba(0,0,0,.15);
  padding:.35rem .8rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.15);
}
.zop-h2{
  font-size:1.7rem;font-weight:800;letter-spacing:-.02em;color:#3a2413;margin:0 0 .2rem;
}
.zop-sub{ font-size:.9rem;color:#7a4a1f;margin:0 0 1.4rem; }
.zop-panel{
  background:rgba(255,251,242,.85);
  border:1px solid rgba(122,74,31,.14);
  border-radius:1rem;
  padding:1.1rem;
  backdrop-filter:blur(4px);
  box-shadow:0 4px 20px rgba(120,60,10,.08);
}
.zop-card{
  background:rgba(255,251,242,.9);
  border:1px solid rgba(122,74,31,.14);
  box-shadow:0 4px 18px rgba(120,60,10,.10);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
  animation:zopUp .5s both;
}
.zop-card:hover{
  transform:translateY(-5px);
  box-shadow:0 14px 34px rgba(120,60,10,.22);
  border-color:var(--accent);
}
@keyframes zopUp{ from{opacity:0;transform:translateY(14px);} to{opacity:1;transform:translateY(0);} }
.zop-shimmer{
  background:linear-gradient(100deg,#f0dfc6 25%,#f8ecd8 50%,#f0dfc6 75%);
  background-size:200% 100%;
  animation:zopShim 1.3s infinite;
}
@keyframes zopShim{ from{background-position:200% 0;} to{background-position:-200% 0;} }
.zop-modal{
  background:var(--cream);
  box-shadow:0 -10px 60px rgba(0,0,0,.4);
  animation:zopSlide .3s cubic-bezier(.2,.8,.2,1);
}
@keyframes zopSlide{ from{opacity:0;transform:translateY(40px);} to{opacity:1;transform:translateY(0);} }
.zop-pot{
  width:44px;height:44px;border-radius:50%;
  border:4px solid rgba(194,65,12,.2);
  border-top-color:#c2410c;
  animation:zopSpin .8s linear infinite;
}
@keyframes zopSpin{ to{transform:rotate(360deg);} }
input::placeholder{ color:rgba(122,74,31,.5); }
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:rgba(194,65,12,.35);border-radius:8px;}