html,body{height:100%;margin:0;padding:0}body{display:flex;flex-direction:column;min-height:100vh;font-family:Host Grotesk,Arial,sans-serif;background-color:#0b0f1a;background-image:radial-gradient(2px 2px at 20px 30px,#fff,transparent),radial-gradient(2px 2px at 50px 80px,#fff,transparent),radial-gradient(1px 1px at 130px 90px,#fff,transparent),radial-gradient(1px 1px at 70px 150px,#fff,transparent),radial-gradient(2px 2px at 200px 200px,#fff,transparent),radial-gradient(1px 1px at 300px 100px,#fff,transparent),radial-gradient(2px 2px at 400px 300px,#fff,transparent);background-repeat:repeat;background-size:800px 800px;color:#f0f0f0;text-align:center}@keyframes twinkle{0%,to{opacity:1}50%{opacity:.5}}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;background-image:radial-gradient(1px 1px at 15% 20%,rgba(255,255,255,.8),transparent),radial-gradient(1px 1px at 40% 60%,rgba(255,255,255,.8),transparent),radial-gradient(1px 1px at 70% 80%,rgba(255,255,255,.8),transparent);animation:twinkle 4s infinite alternate;z-index:0}img{max-width:100%;height:auto;display:block}@keyframes heartbeat{0%,28%,70%{transform:scale(1)}14%,42%{transform:scale(1.1)}}@keyframes slideFadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.post-wrapper img{width:100%;aspect-ratio:4 / 3;height:auto;object-fit:contain}main#main-content{flex:1;overflow-y:auto;padding:0 10px}main{flex:1}h1{color:#fff;margin-bottom:0}#empty-state{font-size:1.2rem;color:#ffe490;opacity:.8;margin:40px 0}#main-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;position:sticky;top:0;z-index:10;border-bottom:1px solid #444;background-color:transparent}.header-left h1{font-family:Lily Script One,serif;font-size:32px;color:#fff;margin:0}button{font-family:inherit;cursor:pointer;border:none;border-radius:5px;transition:all .2s ease}#create-post{background-color:#fff100;color:#000;padding:20px;font-size:14px;margin:5px;font-weight:500;animation:heartbeat 2s ease-in-out infinite;transform-origin:center center;border-radius:50px}#create-post:hover{transform:scale(1.05);box-shadow:0 2px 6px #0003}#past-walls{background-color:transparent;border:2px solid #84572F;color:#84572f;padding:8px 16px;margin-top:20px;font-size:14px;display:inline-block}#submit-post:disabled{opacity:.6;cursor:not-allowed;transform:none}#char-count{text-align:right;font-size:.85rem;color:#888;margin-top:4px}#overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0009;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:10;opacity:0;transition:opacity .3s ease}#overlay.show{opacity:1}#post-modal{display:none;position:fixed;left:50%;top:10%;transform:translate(-50%,20%);width:80%;max-width:800px;background-color:#fff;color:#000;border-radius:5px;padding:32px 32px 80px;z-index:11;opacity:0;box-shadow:0 8px 40px #0000004d;transition:all .4s ease;flex-direction:column;gap:20px;text-align:left;max-height:95vh;overflow-y:auto}#post-modal.show{display:flex;opacity:1;transform:translate(-50%)}.hidden{display:none}.modal-header h2{font-family:Host Grotesk,sans-serif;font-weight:800;font-size:42px;margin:0;letter-spacing:-1px}.modal-header p{font-size:16px;color:#555;margin-top:8px;margin-bottom:20px}.modal-header button{position:absolute;top:20px;right:20px;background:none;border:none;font-weight:700;font-size:16px;color:#000}.tabs{display:flex;border-bottom:1px solid #000;margin-bottom:10px}.tab{padding:15px 50px;text-align:center;border:none;cursor:pointer;font-size:16px}.tab-divider{border-right:1px solid #000}.tab:hover{color:#f1a805}.tab.active{border-bottom:3px solid #F1A805;color:#f1a805}textarea,canvas{width:100%;border:none;border-bottom:1px solid #000;padding:20px;font-size:21px;background-color:#fff;color:#000;font-family:inherit;resize:none;box-sizing:border-box;min-height:250px;transition:border .3s ease-in-out}textarea:focus{outline:none}canvas{height:300px;max-height:40vh;cursor:crosshair}input[type=text],select{width:30%;border:none;outline:none;border-bottom:1px solid #000;padding:10px 4px;font-size:16px;background:transparent;color:#000;margin-top:12px;font-family:inherit}#submit-post{display:flex;background-color:#000;color:#fff;padding:14px 24px;border:none;font-size:16px;border-radius:50px;cursor:pointer;margin-top:24px;align-self:center;position:sticky;bottom:16px;z-index:1}#submit-post:hover{background-color:#ffc737}#wall{column-count:6;column-gap:16px;margin-top:30px;padding:16px 0 100px;overflow:visible!important}.post-wrapper,.post-tile,#wall img{display:inline-block;break-inside:avoid}.post-wrapper{position:relative;flex-direction:column;justify-content:space-between;background-color:var(--mood-color, #EDD5C0);border-radius:5px;color:#782201;max-width:200px;max-height:300px;margin:0 0 16px;padding:20px;box-sizing:border-box;box-shadow:2px 2px 5px #0000001a;overflow:visible!important;transform-origin:center center;transition:transform .2s ease;opacity:0;transform:translateY(10px);transition:opacity .4s ease-out,transform .4s ease-out;pointer-events:auto;break-inside:avoid}.post-wrapper.visible{opacity:1;transform:translateY(0)}.archive-section .post-wrapper{opacity:1!important;transform:translateY(0)!important;transition:none!important}.post-text{font-size:1rem;line-height:1.4;text-align:left;margin-bottom:16px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word;word-break:break-word}.post-footer{display:flex;justify-content:space-between;align-items:center;margin-top:16px}.post-author{font-size:.85rem;color:#333}.post-mood{font-size:.85rem;padding:4px 10px;border-radius:20px;color:#fff;white-space:nowrap}.post-mood--Dreamy{background-color:#6aa3b8}.post-mood--Happy{background-color:#e1880f}.post-mood--Sad{background-color:#809d93}.post-mood--Meh{background-color:#dfba70}.post-mood--Rant{background-color:#db5637}.post-mood--default{background-color:#84572f}.post-delete{position:absolute;top:8px;right:8px;background:#fffc;font-size:1.1rem;color:#874800;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;opacity:.8;transition:opacity .2s}.post-delete:hover{opacity:1}body:not(.admin-mode) .post-delete{display:none}.reaction-tray{position:absolute;top:-30px;left:50%;transform:translate(-50%) translateY(-10px);background:#fff;padding:6px 12px;border-radius:20px;box-shadow:0 2px 6px #0003;display:flex;gap:10px;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:10}.post-wrapper:hover .reaction-tray{opacity:1;transform:translate(-50%) translateY(0);pointer-events:auto}.reaction-emoji{background:none;border:none;font-size:18px;cursor:pointer;letter-spacing:-8px;transition:transform .2s}.reaction-emoji:hover{transform:scale(1.2)}.reaction-count-bar{display:grid;grid-template-columns:repeat(3,auto);gap:6px 8px;justify-content:flex-start;margin-top:10px}.reaction-pill{background:#fff;color:#000;padding:3px 8px;border-radius:999px;font-size:12px;display:flex;align-items:center;gap:2px;box-shadow:0 1px 3px #00000026}#main-footer{position:fixed;bottom:0;left:0;width:100%;display:flex;justify-content:space-between;align-items:flex-start;padding:20px;font-size:13px;color:#fff}.footer-left,.footer-right{max-width:50%}.footer-left h1,.footer-left p{color:#fff;margin:0}.footer-left p{font-size:16px;opacity:.8;display:flex}#reset-timer{margin:0 0 10px;text-align:right}#reset-timer .reset-label,#reset-timer .reset-value{display:block}#reset-timer .reset-label{font-size:.85rem;color:#ffe490}#reset-timer .reset-value{font-size:1.3rem;font-weight:500;color:#ffe490}.footer-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;padding-right:50px}.footer-right a{color:#fff;text-decoration:none;font-weight:500}.footer-right a:hover{text-decoration:underline}@media (max-height: 750px){#post-modal{max-height:85vh}}@media (max-width: 1200px){#wall{column-count:4}}@media (max-width: 820px){#wall{column-count:3}}@media (max-width: 768px){body{padding:10px}#create-post,#past-walls{width:100%;margin-top:10px}#wall{column-count:2}.post-wrapper{padding:16px;transform:rotate(0)!important;animation:slideFadeUp .5s ease-out}.post-author{font-size:.8rem}#post-modal{width:95%;padding:20px;top:5%}textarea,input[type=text],#submit-post{font-size:16px;padding:16px 20px}.tabs{flex-direction:column}.tab{width:100%;text-align:center}.controls{flex-direction:column;align-items:flex-start}.theme-swatches{margin-top:10px}#main-footer{flex-direction:column;align-items:flex-start;padding:15px}.footer-left,.footer-right a{display:none}.footer-left,.footer-right{max-width:100%;padding-right:0}.footer-right{align-items:flex-start;margin-top:10px}}@media (max-width: 600px){.reaction-tray{top:auto;bottom:8px;left:auto;right:12px;transform:translateY(10px);flex-direction:column;padding:8px;border-radius:12px;align-items:flex-end;transition:opacity .2s ease,transform .2s ease}.post-wrapper:hover .reaction-tray{transform:translateY(0)}.reaction-tray.hide{opacity:0;transform:translateY(20px);pointer-events:none}}body{position:relative}.sky{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;background:#0b1023;background:linear-gradient(180deg,#0b1023,#1b2735 60%,#090a0f)}.sky .stars,.sky .twinkle{position:absolute;top:0;right:0;bottom:0;left:0}.sky .stars{background:radial-gradient(1px 1px at 10% 20%,#ffffffcc 50%,transparent 51%) repeat,radial-gradient(1px 1px at 70% 80%,#ffffffcc 50%,transparent 51%) repeat,radial-gradient(1px 1px at 40% 60%,#ffffffcc 50%,transparent 51%) repeat,radial-gradient(1px 1px at 85% 35%,#ffffffcc 50%,transparent 51%) repeat;background-size:180px 180px,220px 220px,260px 260px,320px 320px}.sky .twinkle{background:radial-gradient(1px 1px at 30% 25%,#ffffffbf 50%,transparent 51%) repeat,radial-gradient(1px 1px at 60% 55%,#ffffffbf 50%,transparent 51%) repeat,radial-gradient(1px 1px at 80% 15%,#ffffffbf 50%,transparent 51%) repeat;background-size:200px 200px,260px 260px,320px 320px;opacity:.8;animation:twinkle 6s ease-in-out infinite alternate}@keyframes twinkle{0%{opacity:.35}to{opacity:.85}}@media (prefers-reduced-motion: no-preference){.sky .stars{animation:driftA 120s linear infinite}.sky .twinkle{animation:twinkle 6s ease-in-out infinite alternate,driftB 180s linear infinite}@keyframes driftA{to{background-position:200px 200px,-220px -220px,260px 260px,-320px -320px}}@keyframes driftB{to{background-position:-200px -200px,260px 260px,-320px -320px}}}