*{box-sizing:border-box}html{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}body{color:#ddd;background:#000;margin:0;font-family:Arial,Helvetica,sans-serif}button,input,textarea{font:inherit}button{cursor:pointer}button:focus-visible{outline-offset:5px;outline:2px solid #fff}input:focus-visible{outline-offset:5px;outline:2px solid #fff}textarea:focus-visible{outline-offset:5px;outline:2px solid #fff}.message:focus-visible{outline-offset:5px;outline:2px solid #fff}main{max-width:1600px;margin:auto;padding:65px 5.5% 110px}h1{letter-spacing:4px;width:520px;max-width:100%;margin:0;font-size:78px;font-weight:700;line-height:.8}h1 b{font-weight:700}.title-row{align-items:center;height:63px;display:flex}.title-row:first-child{justify-content:space-between;padding-right:85px}.title-row:first-child b:nth-child(2){color:#aaa}.title-row:first-child b:nth-child(3){color:#686868}.title-row:nth-child(2){justify-content:space-between;padding-right:28px}.title-row:nth-child(2) b:nth-child(2){color:#999}.title-row:nth-child(2) b:nth-child(3){color:#555}.title-row:nth-child(3){justify-content:space-between;padding-right:175px}.title-row:nth-child(3) b:nth-child(2){color:#bbb}.title-row:nth-child(3) b:nth-child(3){color:#999}.add{color:#080808;background:#d9d9d9;border:0;border-radius:5px;width:234px;height:123px;margin:72px 0 0 24px;font-size:20px;font-weight:400}.add:hover{background:#fff}.wall{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:90px 65px;margin:124px 24px 0;display:grid}.card{color:#ddd;text-align:left;perspective:1200px;width:100%;height:220px;transform:translate(var(--x,0px),var(--y,0px)) rotate(var(--angle));touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab;background:0 0;border:0;padding:0;display:block;position:relative}.card:nth-child(3n+2){margin-top:-50px}.card:nth-child(3n){margin-top:28px}.card-inner{width:100%;height:100%;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.75,.25,1);display:grid}.flipped .card-inner{transform:rotateY(180deg)}.face{-webkit-backface-visibility:hidden;backface-visibility:hidden;background:#000;border:1px solid #aaa;flex-direction:column;grid-area:1/1;min-width:0;min-height:0;padding:12px;display:flex}.front{justify-content:flex-end}.nickname{overflow-wrap:anywhere;font-size:20px}.back{gap:10px;transform:rotateY(180deg)}.back-name{overflow-wrap:anywhere;font-size:20px}.message{white-space:pre-wrap;overflow-wrap:anywhere;scrollbar-width:thin;scrollbar-color:#777 #000;flex:1;min-height:0;font-size:14px;font-weight:400;line-height:1.25;display:block;overflow-y:auto}.card.dragging{cursor:grabbing}.message{touch-action:pan-y}.card:hover .face{border-color:#fff}.status{color:#999;grid-column:1/-1;margin:0;font-size:13px}.status button{color:inherit;background:0 0;border:0;text-decoration:underline}dialog{color:#ddd;background:#000;border:1px solid #888;border-radius:0;width:440px;max-width:calc(100% - 32px);padding:0}dialog::backdrop{background:#000c}form{padding:30px;position:relative}h2{letter-spacing:1px;margin:0 0 35px;font-size:20px;font-weight:400}.close{color:#ddd;background:0 0;border:0;padding:3px 7px;font-size:26px;position:absolute;top:15px;right:18px}label{color:#aaa;margin:20px 0 9px;font-size:12px;display:block}input,textarea{color:#ddd;background:#000;border:1px solid #777;border-radius:0;width:100%;padding:11px;font-size:15px;display:block}textarea{resize:vertical;line-height:1.5}.form-bottom{justify-content:space-between;align-items:center;margin-top:20px;display:flex}.form-bottom>span{color:#777;font-size:10px}.send{color:#000;background:#ddd;border:0;border-radius:0;padding:12px 22px;font-size:13px}.error{color:#f0b8b8;font-size:12px;line-height:1.5}button:disabled{opacity:.5;cursor:wait}@media (min-width:1250px){.wall{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (max-width:900px){.wall{grid-template-columns:repeat(2,minmax(0,1fr));gap:80px 60px}.card{height:200px}.card:nth-child(n){margin-top:0}.card:nth-child(2n){margin-top:-50px}.wall{margin-top:140px}}@media (max-width:550px){main{padding:45px 5.5% 80px}h1{letter-spacing:3px;width:100%;font-size:clamp(42px,10.75vw,60px)}.title-row{height:clamp(35px,8.7vw,49px)}.title-row:first-child{padding-right:17%}.title-row:nth-child(2){padding-right:6%}.title-row:nth-child(3){padding-right:35%}.add{width:190px;height:100px;margin:65px 0 0 12px;font-size:17px}.wall{grid-template-columns:1fr;gap:65px;margin:100px 12px 0}.card{width:85%;max-width:340px;height:210px}.card:nth-child(n){margin-top:0}.card:nth-child(2n){justify-self:end}.nickname,.back-name{font-size:19px}.message{font-size:14px}form{padding:25px}}@media (prefers-reduced-motion:reduce){.card-inner{transition:none}}.recipient-wall .wall{margin-top:140px}.confirmation{padding:42px 30px 30px;position:relative}.confirmation h2{letter-spacing:0;margin:0 0 15px;font-size:20px;line-height:1.4}.confirmation p{color:#aaa;margin:0 0 30px;font-size:15px;line-height:1.5}.privacy-caption{color:#999;margin:14px 0 0;font-size:11px;line-height:1.5}.card{isolation:isolate;transition:width .35s,height .35s}.card-inner{z-index:1;position:relative}.card.flipped{width:min(135%,420px);max-width:calc(100vw - 40px);height:430px}.card.flipped .back{background:#262626;border-color:#727272;padding:20px}.card.flipped .message{scrollbar-color:#777 #262626;font-size:15px;line-height:1.5}.card.flipped .back-name{margin-bottom:5px}.card.denied .card-inner{animation:.32s locked-shake}.photo-peek{z-index:0;object-fit:cover;pointer-events:none;border:6px solid #d4d4d4;width:76%;height:150px;transition:opacity .25s,transform .45s;position:absolute;top:-28px;left:17%;transform:rotate(8deg)}.flipped .photo-peek{opacity:0;transform:translateY(35px)rotate(0)}.greeting-image{object-fit:contain;width:100%;max-width:100%;max-height:230px;margin:0 0 18px;animation:.5s image-reveal;display:block}.greeting-text{display:block}.image-unavailable{color:#aaa;margin-bottom:15px;font-size:12px;display:block}.file-input{color:#aaa;border-style:dashed;padding:10px;font-size:12px}.file-input::file-selector-button{color:#000;cursor:pointer;background:#ddd;border:0;margin-right:12px;padding:7px 10px}.optional{color:#777;font-size:11px}.file-hint{color:#777;margin-top:7px;font-size:10px}.upload-preview{align-items:flex-start;gap:15px;margin-top:13px;display:flex}.upload-preview img{object-fit:contain;border:1px solid #666;width:100px;height:85px}.upload-preview button{color:#aaa;background:0 0;border:0;padding:5px;font-size:11px;text-decoration:underline}.locked-notice{z-index:120;color:#ddd;pointer-events:none;background:#202020;border:1px solid #666;width:max-content;max-width:calc(100% - 32px);padding:15px 20px;font-size:12px;line-height:1.6;animation:.25s notice-in;position:fixed;bottom:28px;left:50%;transform:translate(-50%)}.locked-notice span{color:#aaa}.confirmation{animation:.25s notice-in}@keyframes locked-shake{0%,to{translate:0}25%{translate:-5px}65%{translate:5px}}@keyframes notice-in{0%{opacity:0;translate:0 8px}to{opacity:1;translate:0}}@keyframes image-reveal{0%{opacity:0}to{opacity:1}}@media (max-width:550px){.card.flipped{width:100%;max-width:100%;height:440px}.photo-peek{height:140px}.card.flipped .back{padding:17px}.locked-notice{font-size:11px}}@media (prefers-reduced-motion:reduce){.card,.photo-peek{transition:none}.card.denied .card-inner,.locked-notice,.confirmation,.greeting-image{animation:none}}.card{interpolate-size:allow-keywords}.card.flipped{width:var(--expanded-width,100%);height:auto}.card.flipped .card-inner{height:auto}.card.flipped .back{gap:8px;height:auto;min-height:0}.card.flipped .message{flex:none;min-height:0;max-height:none;overflow:visible}.card:not(.flipped) .back,.card:not(.flipped) .message{overflow:hidden}.admin-header{align-items:baseline;gap:24px;margin-bottom:55px;display:flex}.admin-header h1{letter-spacing:-1px;width:auto;font-size:36px;line-height:1}.admin-header span{color:#777;font-size:12px}.admin-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:30px;display:grid}.admin-note{background:#262626;border:1px solid #666;min-width:0;padding:20px}.admin-note h2{overflow-wrap:anywhere;letter-spacing:0;margin:0 0 22px;font-size:18px}.admin-note p{white-space:pre-wrap;overflow-wrap:anywhere;margin:0;font-size:14px;line-height:1.6}.admin-actions{flex-wrap:wrap;gap:18px;margin-top:24px;display:flex}.admin-actions button,.admin-action{color:#ccc;text-underline-offset:4px;background:0 0;border:0;padding:0;font-size:12px;text-decoration:underline}.admin-actions button:last-child{color:#a9a9a9}.admin-link{color:#ccc;font-size:13px}@media (max-width:900px){.admin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:550px){.card.flipped{height:auto}.admin-header{flex-direction:column;gap:14px}.admin-grid{grid-template-columns:1fr}}.card.flipped,.card.flipped .back{touch-action:pan-y}.card.flipped .message{-webkit-user-select:text;user-select:text;cursor:text;touch-action:pan-y}.card.flipped .back-name{touch-action:none;cursor:grab}.card.flipped{--angle:0deg!important}.card:not(.dragging){transition:width .35s,height .35s,transform .3s}.card.dragging{transition:none}@media (prefers-reduced-motion:reduce){.card:not(.dragging){transition:none}}.photo-peek{object-position:top;object-fit:cover;border-width:4px;height:55px;top:-25px}.secret-caption{letter-spacing:.5px;color:#888;margin:35px 0 0 24px;font-size:14px}.greeting-image{margin:18px 0 0}.admin-note>.greeting-image{margin-top:18px}@media (max-width:550px){.photo-peek{height:48px;top:-22px}.secret-caption{margin-left:12px}}
