:root{
  --oat:#f7efe5;
  --oat-2:#f1dfc8;
  --paper:#fffaf4;
  --ink:#3f352f;
  --muted:#7c6e63;
  --moss:#72816a;
  --moss-dark:#56634f;
  --clay:#c77f5b;
  --clay-dark:#9e6045;
  --sun:#d9ad56;
  --river:#7f9ca1;
  --rose:#c78a8d;
  --shadow:0 18px 55px rgba(72,55,43,.13);
  --line:rgba(63,53,47,.10);
  font-family: ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color-scheme: light;
}
*{box-sizing:border-box}
html{min-height:100%;background:var(--oat)}
body{
  margin:0; min-height:100vh; color:var(--ink);
  background:
    radial-gradient(circle at 10% 3%, rgba(217,173,86,.25), transparent 25rem),
    radial-gradient(circle at 96% 18%, rgba(127,156,161,.18), transparent 25rem),
    linear-gradient(160deg,var(--oat),#f6e8d7 55%,#efe1d2);
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.22;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg fill='none' stroke='%2384776d' stroke-opacity='.17'%3E%3Cpath d='M11 25c8-9 18-7 22 1s-2 17-12 17S3 34 11 25Z'/%3E%3Cpath d='M61 57c7-8 17-6 20 1s-3 15-12 14-15-8-8-15Z'/%3E%3C/g%3E%3C/svg%3E");
}
button,input{font:inherit}
button{cursor:pointer}
.app-shell{width:min(720px,100%);margin:auto;padding:28px 18px calc(34px + env(safe-area-inset-bottom))}
.hero{display:flex;align-items:center;gap:14px;padding:10px 2px 12px}
.hero h1{font-size:clamp(2rem,8vw,3.2rem);line-height:.96;margin:1px 0 5px;letter-spacing:-.055em}
.eyebrow{margin:0;text-transform:uppercase;letter-spacing:.16em;font-size:.68rem;font-weight:800;color:var(--moss-dark)}
.tagline{margin:0;color:var(--muted);font-size:.92rem}
.brand-mark{
  width:62px;height:62px;position:relative;flex:0 0 62px;border-radius:22px 25px 19px 27px;
  background:rgba(255,250,244,.72);box-shadow:0 8px 26px rgba(73,58,45,.10);border:1px solid rgba(255,255,255,.65)
}
.rock{position:absolute;display:block;background:var(--moss);box-shadow:inset -5px -5px 0 rgba(0,0,0,.05)}
.rock-a{width:27px;height:18px;border-radius:54% 46% 48% 52%;left:12px;top:29px;transform:rotate(-8deg)}
.rock-b{width:20px;height:14px;border-radius:50% 46% 54% 42%;left:30px;top:21px;background:var(--river);transform:rotate(13deg)}
.cat-tail{position:absolute;width:20px;height:28px;border:5px solid var(--clay);border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;left:28px;top:31px;transform:rotate(25deg)}
.icon-button{margin-left:auto;border:0;background:var(--paper);width:42px;height:42px;border-radius:15px;color:var(--clay-dark);font-size:1.4rem;box-shadow:0 8px 20px rgba(72,55,43,.10)}
.hidden{display:none!important}
.welcome{
  margin:14px 0 18px;padding:18px 20px;border-radius:24px 30px 22px 28px;
  background:rgba(255,250,244,.67);border:1px solid rgba(255,255,255,.75);box-shadow:0 10px 34px rgba(72,55,43,.07)
}
.welcome p{margin:0}.welcome #helloLine{font-size:1.13rem;font-weight:800}.soft-note{margin-top:5px!important;color:var(--muted);font-size:.86rem}
.tabs{display:flex;gap:8px;overflow:auto;padding:2px 1px 10px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  white-space:nowrap;border:1px solid var(--line);background:rgba(255,250,244,.57);color:var(--muted);
  border-radius:999px;padding:10px 14px;font-weight:750;font-size:.85rem
}
.tab.active{background:var(--moss);color:white;border-color:transparent;box-shadow:0 7px 17px rgba(86,99,79,.18)}
.controls{display:grid;grid-template-columns:1fr auto;gap:10px;margin:4px 0 16px}
.search-wrap{
  display:flex;align-items:center;gap:8px;background:rgba(255,250,244,.78);border:1px solid var(--line);
  border-radius:18px;padding:0 13px
}
.search-wrap input{min-width:0;width:100%;border:0;background:transparent;outline:none;padding:12px 0;color:var(--ink)}
.search-wrap input::placeholder{color:#a49487}
.garble{
  border:0;border-radius:18px;padding:0 17px;background:var(--clay);color:white;font-weight:850;
  box-shadow:0 9px 23px rgba(158,96,69,.20)
}
.card-wrap{min-height:350px;display:grid;place-items:stretch}
.gram-card{
  position:relative;min-height:340px;padding:22px 22px 18px;border-radius:34px 27px 38px 30px;
  background:linear-gradient(155deg,rgba(255,250,244,.98),rgba(255,247,237,.92));
  border:1px solid rgba(255,255,255,.8);box-shadow:var(--shadow);display:flex;flex-direction:column;
  overflow:hidden;
}
.gram-card:before,.gram-card:after{
  content:"";position:absolute;border-radius:50%;pointer-events:none
}
.gram-card:before{width:110px;height:110px;background:rgba(217,173,86,.14);right:-35px;top:-38px}
.gram-card:after{width:85px;height:85px;background:rgba(114,129,106,.11);left:-30px;bottom:-30px}
.card-top,.card-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative;z-index:1}
.pill{display:inline-flex;padding:7px 11px;border-radius:999px;background:#edf0e8;color:var(--moss-dark);font-weight:800;font-size:.75rem}
.favorite{width:42px;height:42px;border-radius:16px;border:1px solid var(--line);background:#fff7ef;color:var(--rose);font-size:1.45rem;line-height:1}
.favorite.on{background:#f6e3e1;color:#a85e67}
blockquote{
  position:relative;z-index:1;margin:auto 0;padding:22px 3px;font-size:clamp(1.35rem,5.3vw,2.05rem);
  line-height:1.35;font-weight:720;letter-spacing:-.025em;white-space:pre-line
}
.date,.count{font-size:.76rem;color:var(--muted);font-weight:650}
.actions{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px;margin:13px 0}
.actions button{
  border:1px solid var(--line);background:rgba(255,250,244,.75);color:var(--ink);border-radius:16px;padding:11px 8px;font-weight:760
}
.actions button:active,.tab:active,.garble:active,.favorite:active{transform:scale(.98)}
.empty{min-height:340px;text-align:center;place-content:center;padding:35px;background:rgba(255,250,244,.7);border-radius:32px}
.empty h2{font-size:1.25rem;margin:8px 0}.empty p{color:var(--muted);margin:0}.tiny-rock{font-size:2rem}
.little-note{
  display:flex;gap:12px;align-items:flex-start;margin-top:18px;padding:14px 16px;border-radius:20px;
  background:rgba(114,129,106,.10);color:var(--moss-dark)
}
.little-note p{margin:0;font-size:.8rem;line-height:1.45}
footer{text-align:center;margin-top:26px;color:var(--muted);font-size:.75rem}
footer p{margin:3px}
.toast{
  position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translate(-50%,20px);
  background:#433a34;color:#fff;padding:10px 14px;border-radius:999px;font-size:.8rem;font-weight:750;
  opacity:0;pointer-events:none;transition:.2s;z-index:20;white-space:nowrap;max-width:90vw
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.pebbles span{position:fixed;border-radius:50%;background:rgba(114,129,106,.12);pointer-events:none;animation:floaty 8s ease-in-out infinite}
.pebbles span:nth-child(1){width:14px;height:10px;left:5%;top:17%}
.pebbles span:nth-child(2){width:18px;height:12px;right:8%;top:38%;animation-delay:-2s}
.pebbles span:nth-child(3){width:10px;height:8px;left:9%;top:71%;animation-delay:-5s}
.pebbles span:nth-child(4){width:15px;height:10px;right:5%;top:82%;animation-delay:-1s}
.pebbles span:nth-child(5){width:9px;height:7px;right:20%;top:9%;animation-delay:-4s}
@keyframes floaty{50%{transform:translateY(-8px) rotate(6deg)}}
@media (max-width:530px){
  .app-shell{padding:20px 14px calc(28px + env(safe-area-inset-bottom))}
  .hero{gap:10px}.brand-mark{width:54px;height:54px;flex-basis:54px;transform:scale(.9)}
  .controls{grid-template-columns:1fr}.garble{padding:12px}
  .card-wrap,.gram-card,.empty{min-height:320px}
  .actions{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.pebbles span{animation:none}}