/* Pesan untuk Pakem: the board (word cloud, the postcard form, the visitors' postcards). */
.pp-dialog{width:min(480px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);margin:auto;padding:0;border:0;border-radius:24px;background:#f6f1e4;color:#303e31;overflow:hidden;box-shadow:0 30px 80px -30px #0b1410}
.pp-dialog[open]{display:flex}
.pp-dialog::backdrop{background:#17352fcc;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
@media(max-width:560px){.pp-dialog{width:100vw;height:100dvh;max-height:none;border-radius:0}}
.pp-sheet{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:max(16px,env(safe-area-inset-top)) 18px max(24px,env(safe-area-inset-bottom))}
.pp-top{position:sticky;top:-16px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-16px -18px 6px;padding:16px 18px 10px;background:linear-gradient(#f6f1e4 80%,#f6f1e400)}
.pp-top h2{margin:0;font:400 26px/1.1 Georgia,'Times New Roman',serif;letter-spacing:-.4px;color:#17352f}
.pp-top h2 i{color:#87634c}
.pp-close{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:1px solid #dcdcca;border-radius:50%;background:#fbf8ef;color:#303e31;cursor:pointer}
.pp-close svg{width:18px;height:18px}

/* the cloud: the more people write a word, the larger it is */
.pp-cloud{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 12px;min-height:96px;max-height:220px;overflow:hidden;margin:4px 0 16px;padding:14px 10px;border-radius:16px;background:radial-gradient(circle at 50% 40%,#fffdf6,#efe7d2)}
.pp-word{font-family:Georgia,'Times New Roman',serif;line-height:1.15;letter-spacing:-.02em;white-space:nowrap}
.pp-word:nth-child(3n){font-style:italic}
.pp-word.is-new{animation:pp-word-in .7s cubic-bezier(.34,1.56,.64,1) both}
@keyframes pp-word-in{from{opacity:0;transform:scale(.4)}}
.pp-cloud-empty{margin:0;font:italic 15px Georgia,serif;color:#7a8269}

/* the form, as a blank postcard with an airmail edge */
.pp-form{display:grid;gap:12px;padding:16px 16px 14px;border:5px solid transparent;border-radius:6px;background:linear-gradient(#fcfaf3,#fcfaf3) padding-box,repeating-linear-gradient(135deg,#87634c 0 7px,#fcfaf3 7px 10px,#e9b949 10px 17px,#fcfaf3 17px 20px) border-box;box-shadow:0 1px 2px #5a3f251f,0 12px 26px #5a3f2522}
.pp-field{position:relative;display:grid;gap:6px}
.pp-label{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:#5d6852}
.pp-label small{margin-left:4px;font-size:10px;letter-spacing:.8px;text-transform:none;color:#8a917a}
.pp-kata,.pp-pesan{width:100%;box-sizing:border-box;padding:10px 12px;border:0;border-bottom:1.5px solid #cdbf9f;border-radius:4px 4px 0 0;background:repeating-linear-gradient(#0000 0 31px,#e6dcc5 31px 32px) #fffdf7;color:#17352f;font:400 20px/32px Georgia,'Times New Roman',serif}
.pp-kata{background:#fffdf7;font-size:24px;line-height:30px;font-style:italic}
.pp-pesan{min-height:100px;resize:vertical;font-size:17px}
.pp-kata:focus,.pp-pesan:focus{outline:2px solid #87634c;outline-offset:2px}
.pp-count{justify-self:end;font-size:11px;color:#8a917a}
.pp-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.pp-send{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:10px 20px;border:0;border-radius:99px;background:#17352f;color:#f6f1e4;font:inherit;font-size:15px;cursor:pointer;transition:transform .15s,background .2s}
.pp-send svg{width:18px;height:18px}
.pp-send:active{transform:scale(.97)}
.pp-send:disabled{opacity:.55;cursor:default}
.pp-send:focus-visible,.pp-close:focus-visible{outline:2px solid #87634c;outline-offset:3px}
.pp-status{margin:0;min-height:1em;font-size:13.5px;line-height:1.45;color:#303e31}
.pp-status:empty{display:none}
.pp-note{margin:0;font-size:12px;line-height:1.5;color:#6d765e}
.pp-note a{color:inherit;text-underline-offset:3px}

/* the visitors' postcards */
.pp-wall-title{margin:26px 0 12px;font:400 12px/1 Arial,Helvetica,sans-serif;letter-spacing:1.8px;text-transform:uppercase;color:#5d6852}
.pp-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin:0;padding:0 2px;list-style:none}
.pp-card{overflow:hidden;display:grid;align-content:space-between;gap:12px;min-height:110px;padding:14px 14px 12px;border:1px solid #e3dcc8;border-radius:6px;background:#fffdf7;box-shadow:0 6px 16px -10px #5a3f2566;transform:rotate(var(--tilt,0deg))}
.pp-card.is-mine{border-color:#c9a27f;box-shadow:0 0 0 2px #e9b94966,0 6px 16px -10px #5a3f2566}
.pp-card-text{margin:0;font:400 16px/1.45 Georgia,'Times New Roman',serif;color:#17352f;overflow-wrap:anywhere}
.pp-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;font-size:11px;color:#7a8269}
.pp-card-stamp{max-width:70%;padding:3px 8px;border:1px dashed #c9a27f;border-radius:3px;background:#f7ebc8;color:#6e520e;font:italic 13px Georgia,serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-empty{margin:0;font:italic 15px Georgia,serif;color:#7a8269}
@media(prefers-reduced-motion:reduce){.pp-word.is-new{animation:none}.pp-send{transition:none}}