.po{position:relative;min-height:100vh;padding:calc(var(--win-top) + 84px) 7vw 10vh;background:var(--white);overflow:hidden}.po-head{position:relative;z-index:1}.po-head .mono{font-size:13px}.po-head h1{margin:1.2vh 0 3vh;font:400 clamp(52px,min(7vw,11vh),120px)/.88 var(--f-display);letter-spacing:-.06em}.po-head h1 span{color:var(--red)}.po-desk{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,860px) auto;justify-content:start;gap:6vw;align-items:end;perspective:1400px}.postcard{position:relative;display:grid;grid-template-columns:1.3fr 1fr;gap:0;min-height:min(340px,40vh);max-width:860px;background-color:#f6f2e7;background-image:radial-gradient(rgba(120,90,40,.07) 1px,transparent 1.5px);background-size:6px 6px;border:3px solid var(--ink);box-shadow:14px 14px 0 var(--blue);transform:rotate(-1.5deg);transform-origin:50% 100%}.pc-left{padding:26px 28px;border-right:2px dashed #b9ae95;display:flex;flex-direction:column;gap:12px}.pc-k{font:400 26px/1 var(--f-marker);color:var(--red)}.pc-from,.pc-msg{width:100%;border:0;outline:0;background:transparent;resize:none;font:400 19px/1.6 var(--f-type);color:var(--ink)}.pc-from{border-bottom:2px solid var(--ink);padding:4px 0;font-size:22px}.pc-msg{flex:1;min-height:min(150px,16vh);background-image:repeating-linear-gradient(transparent 0 29px,#cbbf9f 29px,#cbbf9f 30px);line-height:30px}.pc-from::placeholder,.pc-msg::placeholder{color:#a39a85}.pc-err{min-height:1em;font:400 18px/1 var(--f-marker);color:var(--red)}.pc-right{position:relative;padding:26px 26px 24px;display:flex;flex-direction:column;justify-content:flex-end;gap:4px}.pc-stamp{position:absolute;right:22px;top:22px;width:84px;height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--yellow);color:var(--ink);outline:3px dashed var(--white);outline-offset:-8px;border:3px solid var(--ink);transform:rotate(4deg)}.pc-stamp span{font:400 16px/1 var(--f-marker)}.pc-stamp b{font:700 40px/1 var(--f-report)}.pc-postmark{position:absolute;right:86px;top:70px;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;text-align:center;border:3px solid rgba(30,79,224,.55);color:#1e4fe0a6;font:400 12px/1.3 var(--f-type);transform:rotate(-14deg)}.pc-to{display:flex;gap:10px;padding:8px 0 6px;border-bottom:2px solid var(--ink);font:400 20px/1.2 var(--f-type)}.pc-to span{width:28px;font:700 14px/1.6 var(--f-report);text-transform:uppercase}.pc-send{margin-top:22px;align-self:flex-start}.envelope{position:absolute;z-index:6;width:170px;height:110px;pointer-events:none;visibility:hidden;background:#fdf8ea;border:3px solid var(--ink)}.envelope i{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to bottom right,transparent 49%,var(--ink) 49% 51%,transparent 51%) left / 50% 100% no-repeat,linear-gradient(to bottom left,transparent 49%,var(--ink) 49% 51%,transparent 51%) right / 50% 100% no-repeat}.envelope:after{content:"";position:absolute;left:50%;top:46%;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:var(--red)}.po-box{position:relative;display:flex;align-items:flex-end;gap:14px;padding-top:70px}.po-mailbox{display:block;image-rendering:pixelated}.po-flag{position:absolute;width:calc(var(--px) * 2);height:calc(var(--px) * 12);background:var(--ink);transform-origin:50% 100%;margin-top:calc(var(--px) * -10);transform:rotate(90deg)}.po-flag:after{content:"";position:absolute;left:0;top:0;width:calc(var(--px) * 6);height:calc(var(--px) * 4);background:var(--yellow);border:2px solid var(--ink)}.po-me{image-rendering:pixelated}.po-say{position:absolute;left:50%;top:0;transform:translate(-30%);white-space:nowrap;padding:9px 13px;background:var(--white);border:2px solid var(--ink);border-radius:10px;font:500 13px/1 var(--f-mono)}.po-say:after{content:"";position:absolute;right:30px;bottom:-8px;width:12px;height:12px;background:var(--white);border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(45deg)}.po-note{position:relative;z-index:1;margin-top:30px;font-size:12px;color:#666}.po-pick{position:fixed;top:0;right:0;bottom:0;left:0;z-index:900;display:grid;place-items:center;padding:20px;background:#1111118c}.po-pick[hidden]{display:none}.pp-card{width:min(520px,100%);max-height:calc(100vh - 40px);overflow:auto;padding:24px;background-color:#f6f2e7;background-image:radial-gradient(rgba(120,90,40,.07) 1px,transparent 1.5px);background-size:6px 6px;border:3px solid var(--ink);box-shadow:10px 10px 0 var(--blue)}.pp-k{font-size:12px;color:#666}.pp-title{margin:6px 0 16px;font:700 34px/1 var(--f-report);text-transform:uppercase}.pp-opts{display:grid;gap:8px}.pp-opt{display:grid;grid-template-columns:44px 1fr auto;grid-template-rows:auto auto;column-gap:14px;align-items:center;padding:10px 14px;width:100%;text-align:left;cursor:pointer;color:var(--ink);background:var(--white);border:2px solid var(--ink);border-radius:12px;box-shadow:4px 4px 0 var(--ink);transition:translate .2s,box-shadow .2s,background .2s}.pp-opt:hover,.pp-opt:focus-visible{translate:-2px -2px;box-shadow:6px 6px 0 var(--ink);background:var(--yellow);outline:none}.pp-opt canvas{grid-row:1 / 3;width:40px;height:40px;image-rendering:pixelated}.pp-opt b{font:700 20px/1.1 var(--f-report);text-transform:uppercase}.pp-opt span{grid-column:2;font:400 13px/1.3 var(--f-type);color:#555}.pp-opt:after{content:"→";grid-column:3;grid-row:1 / 3;font:500 20px/1 var(--f-mono)}.pp-cancel{margin-top:14px;padding:6px 0;border:0;background:none;font-size:13px;cursor:pointer;border-bottom:1.5px solid var(--ink)}.stamps{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:8vh}.stamps>.mono{width:100%;font-size:13px}.stamp-l{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;width:170px;height:200px;padding:16px;background:var(--c);color:var(--white);text-align:left;cursor:pointer;border:0;outline:4px dashed var(--white);outline-offset:-10px;box-shadow:0 0 0 4px var(--c),8px 8px 0 4px var(--ink);transition:translate .35s cubic-bezier(.3,1.4,.5,1),rotate .35s}.stamp-l:hover{translate:0 -8px;rotate:-3deg}.stamp-ic{position:absolute;left:18px;top:18px;width:56px;height:56px;image-rendering:pixelated}.stamp-l span{font:700 22px/1 var(--f-report);text-transform:uppercase}.stamp-l em{font:400 11px/1.3 var(--f-mono);font-style:normal;opacity:.85;word-break:break-all}@media(max-width:860px){.po{padding:calc(var(--win-top) + 80px) 18px 8vh}.po-desk{grid-template-columns:1fr;gap:30px}.postcard{grid-template-columns:1fr;box-shadow:8px 8px 0 var(--blue)}.pc-left{border-right:0;border-bottom:2px dashed #b9ae95;padding:20px}.pc-right{padding:20px;min-height:230px}.pc-stamp{width:64px;height:78px;right:16px;top:16px}.pc-stamp b{font-size:30px}.pc-postmark{width:74px;height:74px;right:64px;top:48px;font-size:10px}.po-box{justify-content:center}.stamp-l{width:calc(50% - 9px);height:160px}.stamp-ic{width:44px;height:44px}}
