@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Caveat+Brush&family=Patrick+Hand&display=swap');

.std-grain{position:relative;background-color:var(--surface)}
.std-grain::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.25;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.std-frame{box-sizing:border-box;border:3px solid var(--line);border-radius:18px 6px 22px 8px / 8px 20px 6px 18px;padding:var(--space-5);color:var(--ink);font-family:var(--font-body)}
.std-frame--raised{background:var(--surface-raised);box-shadow:var(--shadow-paper)}

.std-title{display:inline-flex;flex-direction:column;align-items:center;position:relative;color:var(--crayon);text-transform:none;padding:0 var(--space-5)}
.std-title__top,.std-title__bottom{font-family:var(--font-display);font-size:96px;line-height:.9;text-transform:uppercase;transform:rotate(-2deg)}
.std-title__bottom{transform:rotate(-1deg);margin-top:-18px;margin-left:96px}
.std-title__script{position:absolute;left:96px;top:70px;font-family:var(--font-script);font-weight:700;font-size:48px;line-height:1;text-transform:lowercase;transform:rotate(-4deg)}
.std-title__tick{position:absolute;width:44px;height:44px;color:var(--crayon);top:30px}
.std-title__tick--l{left:-16px}.std-title__tick--r{right:-16px;transform:scaleX(-1)}
.std-title--sm .std-title__top,.std-title--sm .std-title__bottom{font-size:56px}
.std-title--sm .std-title__script{font-size:32px;left:56px;top:42px}
.std-title--sm .std-title__bottom{margin-left:56px;margin-top:-10px}

.std-heart{display:inline-block;color:var(--crayon);vertical-align:middle}
.std-heart svg{display:block}

.std-sticker{display:inline-block;transform:rotate(var(--tilt,0deg));transition:transform .2s ease-out}
.std-sticker:hover{transform:rotate(var(--tilt,0deg)) translateY(-2px)}
.std-sticker img{display:block;max-width:100%;height:auto;
  filter:drop-shadow(3px 0 0 var(--surface-raised)) drop-shadow(-3px 0 0 var(--surface-raised)) drop-shadow(0 3px 0 var(--surface-raised)) drop-shadow(0 -3px 0 var(--surface-raised))
  drop-shadow(2px 0 0 var(--crayon)) drop-shadow(-2px 0 0 var(--crayon)) drop-shadow(0 2px 0 var(--crayon)) drop-shadow(0 -2px 0 var(--crayon))}
@media (prefers-reduced-motion:reduce){.std-sticker{transition:none}.std-sticker:hover{transform:rotate(var(--tilt,0deg))}}

.std-btn{box-sizing:border-box;min-height:44px;cursor:pointer;font-family:var(--font-display);font-size:28px;line-height:1;padding:10px 28px;
  border:3px solid var(--crayon);border-radius:22px 8px 20px 10px / 10px 20px 8px 22px;background:var(--crayon);color:var(--on-crayon);transition:background .15s}
.std-btn:hover{background:var(--crayon-strong);border-color:var(--crayon-strong)}
.std-btn:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
.std-btn--ghost{background:transparent;color:var(--crayon)}
.std-btn--ghost:hover{background:var(--crayon-soft);color:var(--crayon-strong)}
.std-btn:disabled{cursor:not-allowed;border-style:dashed;background:transparent;color:var(--ink-muted);border-color:var(--ink-muted)}

.std-date{display:inline-flex;flex-direction:column;align-items:center;gap:var(--space-2);color:var(--crayon)}
.std-date__row{display:flex;align-items:center;gap:var(--space-3)}
.std-date__text{font-family:var(--font-display);font-size:64px;line-height:1;letter-spacing:.04em}
.std-date__line{width:100%;height:14px}