/* Restore the illustrated paper details in the approved reference. */
:root{
 --paper-texture:url('/assets/paper-texture.webp');
 --flat-paper-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.38 .55' numOctaves='4' seed='9' stitchTiles='stitch'/%3E%3CfeDiffuseLighting lighting-color='%23ffffff' surfaceScale='.7' diffuseConstant='1'%3E%3CfeDistantLight azimuth='225' elevation='55'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Cpath d='M0 0h220v220H0z' filter='url(%23grain)' opacity='.22'/%3E%3C/svg%3E");
 --receipt-edge:polygon(0 3%,1.5% 1%,3% 3.2%,5% 0,7% 3%,9% .5%,11% 3%,13% 0,15% 3%,17% 1%,19% 3%,21% 0,23% 3%,25% .5%,27% 3%,29% 0,31% 3%,33% .5%,35% 3%,37% 0,39% 3%,41% .5%,43% 3%,45% 0,47% 3%,49% .5%,51% 3%,53% 0,55% 3%,57% .5%,59% 3%,61% 0,63% 3%,65% .5%,67% 3%,69% 0,71% 3%,73% .5%,75% 3%,77% 0,79% 3%,81% .5%,83% 3%,85% 0,87% 3%,89% .5%,91% 3%,93% 0,95% 3%,97% .5%,99% 3%,100% 4%,99.7% 28%,100% 53%,99.5% 80%,100% 97%,98% 100%,96% 97%,94% 100%,92% 97%,90% 100%,88% 97%,86% 100%,84% 97%,82% 100%,80% 97%,78% 100%,76% 97%,74% 100%,72% 97%,70% 100%,68% 97%,66% 100%,64% 97%,62% 100%,60% 97%,58% 100%,56% 97%,54% 100%,52% 97%,50% 100%,48% 97%,46% 100%,44% 97%,42% 100%,40% 97%,38% 100%,36% 97%,34% 100%,32% 97%,30% 100%,28% 97%,26% 100%,24% 97%,22% 100%,20% 97%,18% 100%,16% 97%,14% 100%,12% 97%,10% 100%,8% 97%,6% 100%,4% 97%,2% 100%,0 96%,.6% 73%,0 48%,.4% 24%);
 --scrap-edge:polygon(0 4%,8% 2%,10% 0,17% 3%,24% 1%,32% 3%,37% 0,48% 2%,55% 0,62% 2%,70% 0,78% 2%,88% 1%,93% 3%,99% 0,98% 12%,100% 21%,98% 34%,100% 41%,98% 57%,100% 64%,97% 78%,100% 90%,98% 98%,88% 96%,82% 100%,73% 97%,64% 99%,58% 97%,48% 100%,39% 97%,30% 100%,21% 97%,14% 99%,8% 97%,1% 100%,2% 88%,0 76%,2% 63%,0 48%,2% 35%,0 20%);
}
.logo,.rstamp .brand{font-family:'Lilita One','Barlow Condensed',sans-serif;letter-spacing:-.045em;font-weight:400}
.logo{font-size:clamp(26px,2.45vw,36px)}
.logo .hrt{width:.85em;height:1em;margin-left:3px}
.mast .logo{font-size:clamp(30px,2.61vw,40px);gap:4px;line-height:1}
.mast .logo-word{display:inline-block;font-family:'Alfa Slab One',serif;font-weight:400;letter-spacing:-.04em;white-space:nowrap;transform:scale(.72,1.12);transform-origin:left center;margin-right:-1.75em}
.mast .logo .hrt{width:.8em;height:.9em;margin-left:0;flex:none;fill:#f32e50}
.mast .edition{font-family:'Roboto Mono',monospace;font-size:12px;letter-spacing:.09em;font-weight:400}
.mast-actions #addBtn{padding-inline:25px;min-width:126px}
.theme .sun,.theme .moon{display:flex;align-items:center;justify-content:center}
.theme svg{display:block;width:25px;height:25px}
.theme .sun svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.theme .moon svg{fill:currentColor}
.brand-heart{display:inline-block;width:1em;height:1.1em;fill:#ff2546;vertical-align:-.17em;margin-left:3px}
.rstamp .brand{font-size:19px;white-space:nowrap}
.hero{padding-bottom:12px}
.hero h1 .u::after{height:7px;border-bottom-width:3px;left:1%;right:4%;bottom:-9px;transform:rotate(-1deg)}
.hero h1 .u::before{content:'';position:absolute;left:11%;right:0;bottom:-11px;border-bottom:2px solid var(--red);border-radius:50%;transform:rotate(.5deg)}
.wall-scene{position:relative;isolation:isolate}
.wall{grid-template-columns:1.3fr 1fr 1.18fr;gap:21px 23px;padding-top:0;padding-bottom:15px}
.card{min-height:252px;padding:25px 26px 20px;background:transparent!important;border:0!important;border-radius:0;box-shadow:none;clip-path:none!important;overflow:visible;filter:drop-shadow(2px 5px 4px #65532138)}
.wall .card{background:transparent!important}
.card::before{inset:0;z-index:-1;opacity:1;mix-blend-mode:normal;background-color:#fffdf6;background-image:var(--paper-texture);background-size:cover;background-blend-mode:multiply;clip-path:var(--scrap-edge)}
.tint-ick::before,.tint-redflag::before{clip-path:var(--receipt-edge)}
.tint-ick{transform:rotate(-.25deg)}
.tint-redflag{transform:rotate(.3deg)}
.tint-situationship{transform:rotate(-.65deg)}
.wall .tint-ghosted{transform:rotate(0deg)}
/* Individually traced contours: visible tears, bowed edges and softened corners. */
.tint-situationship::before,.tint-ghosted::before{background-color:#dfc6f1;background-image:var(--flat-paper-grain),linear-gradient(#e1cbf0c9,#e1cbf0c9),var(--paper-texture);background-size:220px 220px,cover,cover;background-position:center;background-blend-mode:multiply,normal,multiply;clip-path:none;mask-size:100% 100%;mask-repeat:no-repeat}
.tint-situationship::before{mask-image:url('/assets/paper-edge-situationship.svg')}
.tint-ghosted::before{mask-image:url('/assets/paper-edge-ghosted.svg');background-position:center,center,70% 30%}
.tint-ghosted::after{content:none}
.tint-bleak{transform:rotate(-.4deg)}
.tint-bleak::before{background-color:#fff0a5;background-image:linear-gradient(120deg,#fff9d27a,transparent 55%,#fff7ca33);border:2px solid #fffdf3;border-radius:28px;clip-path:none}
.tint-opener{transform:rotate(-.45deg)}
.tint-opener::before{background-color:#dcecf8;background-image:linear-gradient(#418acc65 1px,transparent 1px),linear-gradient(90deg,#418acc65 1px,transparent 1px),var(--flat-paper-grain),linear-gradient(#dcecf8e0,#dcecf8e0),var(--paper-texture);background-size:18px 18px,18px 18px,220px 220px,cover,cover;background-blend-mode:normal,normal,multiply,normal,multiply;clip-path:none;mask-image:url('/assets/paper-edge-opener.svg');mask-size:100% 100%;mask-repeat:no-repeat}

.rtop{margin-bottom:19px}
.tint-ick .rtop{padding-right:95px}
.seen{font-size:10px;right:25px;top:27px}
.rleft{gap:16px;align-items:center}
.exbadge{font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:500;line-height:1.1;padding:3px 5px;border-width:1px}
.cat{font-size:12px;gap:7px}
.card .foot{gap:15px;position:relative;z-index:2}
.time,.minis{padding-left:15px}
.rstamp{margin-top:9px;min-height:30px}
.tint-ick .rstamp{padding-top:9px;border-top:1px dashed #9c9687}
.barcode{width:94px;height:30px;transform:rotate(-.8deg)}
.card-doodle{display:block!important;top:18px;right:21px;width:46px;height:57px;transform:rotate(-6deg);color:#0c216f}
.card-doodle svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;width:100%;height:100%;overflow:visible}
.tint-situationship .card-doodle{width:43px;height:53px;top:14px;right:17px;transform:rotate(-8deg)}
.tint-redflag .card-doodle{color:#ed273d;width:45px;height:60px;transform:rotate(2deg)}
.tint-bleak .card-doodle{width:48px;height:55px;top:23px;right:23px;transform:rotate(6deg)}
.tint-ghosted .card-doodle{height:61px;width:48px;right:24px;top:19px;transform:rotate(5deg)}
.tint-opener .card-doodle{height:52px;width:58px;right:21px;top:17px;transform:rotate(-7deg)}
.card-details{pointer-events:none}
.card-caption{position:absolute;font-family:'Caveat',cursive;font-size:17px;font-weight:700;line-height:.95;color:#0b2475;transform:rotate(-9deg);text-align:center}
.bleak-caption{right:13px;top:86px;width:62px;font-size:17px}
.bleak-caption .caption-last{display:block;font-size:.82em}
.card-caption i{display:block;width:55px;border-top:2px solid;margin:7px auto 0;transform:rotate(-7deg)}
.card-caption i::after{content:'';display:block;width:45px;margin-top:3px;border-top:1px solid;transform:rotate(4deg)}
.ghost-caption{right:20px;top:80px;transform:rotate(8deg);font-size:15px}

.tint-bleak .msg{padding-right:64px}

.tint-situationship .rtop,.tint-ghosted .rtop,.tint-redflag .rtop{padding-right:40px}
.read-stamp{position:absolute;right:19px;bottom:65px;border:1.7px solid #e72b3c;border-radius:50%;padding:5px 8px;color:#e72b3c;font-family:'Barlow Condensed',sans-serif;font-size:16px;line-height:1;transform:rotate(-15deg)}
.tint-redflag .msg{padding-bottom:39px}




.margin-art{position:absolute;z-index:4;pointer-events:none;color:#0b2475;font-family:'Caveat',cursive;font-weight:700}
.margin-art svg,.footer-crown{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.margin-flower{width:49px;height:64px;left:-52px;top:-9px;transform:rotate(-8deg)}
.left-words{left:-43px;top:57%;width:43px;font-size:14px;letter-spacing:-.04em;line-height:1.05;transform:rotate(-10deg);text-align:left}
.margin-star{width:42px;height:59px;left:-42px;bottom:24px;transform:rotate(-7deg)}
.right-words{right:-46px;bottom:-8px;width:68px;padding:19px 6px 15px;line-height:1.1;font-size:13px;transform:rotate(5deg);isolation:isolate;filter:drop-shadow(2px 3px 2px #554c3a40)}
.right-words::before{content:'';position:absolute;inset:0;z-index:-1;background:#e1ded2 var(--paper-texture) center/cover;background-blend-mode:multiply;clip-path:var(--scrap-edge)}
.right-words span{display:block;transform:rotate(-9deg)}
.margin-zigzag{width:35px;height:65px;right:-44px;top:40%;transform:rotate(5deg)}
.margin-tape{position:absolute;z-index:-1;width:34px;height:115px;background:#d6ad71 var(--paper-texture) center/cover;background-blend-mode:multiply;opacity:.6;clip-path:var(--scrap-edge);pointer-events:none}
.tape-left{left:-47px;top:125px;transform:rotate(8deg)}
.tape-right{right:-43px;top:44px;height:98px;width:48px;background-color:#bfc2c5;transform:rotate(-8deg)}
.compact-wall .margin-art,.compact-wall .margin-tape{display:none}
footer.foot-note{padding-top:28px}
footer.foot-note .dmg{display:flex;align-items:center;gap:10px;left:55px;max-width:205px;font-size:17px;transform:rotate(-7deg)}
.footer-crown{width:42px;height:48px;flex:none}
footer.foot-note .links button{color:var(--ink)}
.footer-scrawl{font-size:17px;right:47px}
:root[data-theme=dark] .margin-art{color:#f1df9f}
:root[data-theme=dark] .right-words{color:#0b2475}
@media(max-width:1100px){
 .mast .logo{font-size:32px}.mast .edition{font-size:10px}.mast-actions #addBtn{min-width:112px;padding-inline:20px}
 .logo{font-size:28px}.wall{gap:19px 17px}.card{padding:23px 20px 19px;min-height:250px}.rleft{gap:9px}.cat{font-size:11px}.exbadge{font-size:16px}.tint-ick .rtop{padding-right:0}.card .foot{gap:10px}.time,.minis{padding-left:10px}.rstamp .brand{font-size:17px}.card-doodle{right:13px}.tint-bleak .card-doodle{right:14px}.bleak-caption{right:5px;font-size:15px}.tint-bleak .msg{padding-right:50px}.left-words{font-size:14px;left:-31px;width:32px}.margin-flower{left:-39px;width:39px}.margin-star{left:-33px;width:33px}.right-words{right:-33px;width:54px;font-size:11px}.margin-zigzag{right:-31px;width:27px}.tape-left{left:-35px}.tape-right{right:-35px}.footer-scrawl{right:24px}footer.foot-note .dmg{left:28px;max-width:174px;font-size:15px}
}
@media(max-width:760px){
 .mast .logo{font-size:31px}.mast-actions #addBtn{min-width:106px;padding-inline:17px}.theme .moon{display:none}
 .logo{font-size:27px}.wall{grid-template-columns:1fr 1fr;gap:24px 18px}.card{padding:24px 21px 18px;min-height:265px}.margin-art,.margin-tape{display:none}.rleft{flex-direction:column;align-items:flex-start;gap:9px}.tint-ick .rleft{flex-direction:row;align-items:center}.rtop{margin-bottom:17px}.cat{font-size:12px}.tint-bleak .msg{padding-right:40px}.tint-opener .card-doodle{right:15px;width:49px;height:44px;top:20px}.bleak-caption{font-size:13px;width:45px;top:98px;right:7px}.card-caption i{width:38px}.card-caption i::after{width:32px}.read-stamp{font-size:13px;right:12px;bottom:66px}footer.foot-note .dmg,.footer-scrawl{display:none}footer.foot-note{padding-top:24px}
}
@media(max-width:480px){
 .mast .logo{font-size:28px}.mast-actions #addBtn{min-width:96px;padding-inline:14px}.theme .sun{display:none}
 .logo{font-size:25px}.wall{grid-template-columns:1fr;gap:27px}.card{padding:25px 24px 20px;min-height:245px}.rleft{flex-direction:row;align-items:center;gap:13px}.cat{font-size:12px}.exbadge{font-size:17px}.rtop{margin-bottom:20px}.tint-bleak .msg{padding-right:61px}.tint-opener .card-doodle{right:21px;width:56px;height:50px;top:18px}.bleak-caption{font-size:16px;top:85px;right:10px;width:58px}.rstamp .brand{font-size:18px}.read-stamp{font-size:15px;right:20px;bottom:66px}.tint-ghosted .card-doodle{right:21px;top:18px}.tint-ghosted .ghost-caption{right:17px;top:80px}.card .foot{gap:14px}.time,.minis{padding-left:14px}
}

/* Card branding and marginal notes, matched to the three detail references. */
.wall .rstamp .brand{display:inline-flex;align-items:center;gap:3px;font-size:clamp(20px,1.48vw,23px);line-height:1.2;flex:none}
.rstamp .brand-word{display:inline-block;font-family:'Alfa Slab One',serif;font-weight:400;letter-spacing:-.04em;transform:scale(.72,1.12);transform-origin:left center;margin-right:-1.75em}
.rstamp .brand-heart{width:.84em;height:.96em;margin:0;flex:none;fill:#f32e50;filter:drop-shadow(.6px .6px 0 #fffdf6)}
.wall .tint-opener{margin-left:18px}
.wall-scene .left-words{left:-40px;top:calc(50% + 7px);width:83px;font-family:'Kalam',cursive;font-weight:400;font-size:17px;line-height:1.38;letter-spacing:-.055em;transform:none}
.left-words span{display:block;white-space:nowrap;transform:skewY(-16deg) scaleX(.66);transform-origin:left center}
.wall-scene .right-words{left:calc(100% - 20px);right:auto;top:calc(50% + 28px);bottom:auto;width:calc(clamp(20px,3.8vw,60px) + 12px);min-height:0;padding:0;font-family:'Kalam',cursive;font-weight:400;font-size:clamp(10px,.98vw,14px);line-height:1.5;letter-spacing:-.065em;transform:none;filter:none;background:none}
.right-words::before{content:none}
.right-words span{white-space:nowrap;transform:skewY(-12deg) scaleX(.83);transform-origin:left center}
.right-words b{display:block;margin-top:4px;text-align:center;font-family:'Kalam',cursive;font-size:21px;font-weight:400;line-height:1}
.wall-scene .tape-right{right:-42px;top:64px;width:48px;height:124px;background-color:#bfc2c3;opacity:.92;transform:rotate(-5deg);clip-path:polygon(3% 0,17% 4%,30% 0,46% 5%,62% 2%,72% 8%,94% 6%,100% 18%,94% 34%,100% 50%,93% 68%,99% 88%,85% 94%,67% 92%,53% 100%,38% 95%,16% 98%,0 89%,4% 70%,0 53%,5% 35%)}
.wall-scene .margin-zigzag{width:29px;height:58px;right:-40px;top:calc(50% - 67px);transform:rotate(4deg)}
.margin-zigzag svg{stroke-width:1.5}
@media(max-width:1100px){
 .wall .rstamp .brand{font-size:19px}
 .wall .tint-opener{margin-left:12px}
 .wall-scene .left-words{left:-29px;width:65px;font-size:14px;line-height:1.45}
 .left-words span{transform:skewY(-16deg) scaleX(.62)}
 .right-words span{transform:skewY(-12deg) scaleX(.79)}
 .wall-scene .tape-right{right:-32px;width:40px;height:109px}
 .wall-scene .margin-zigzag{right:-29px;width:24px}
}
@media(max-width:760px){.wall .tint-opener{margin-left:0}}
@media(max-width:480px){.wall .rstamp .brand{font-size:21px}}
@media(min-width:761px){.wall-scene:not(.compact-wall) .wall{margin-right:32px}}
:root[data-theme=dark] .wall-scene .right-words{color:#f1df9f}

/* The Opener: conversational doodle with no caption beside the story. */
.wall .tint-opener .msg{padding-right:0}
.tint-opener .rtop{padding-right:59px}

/* Keep live story text clear of the ghost caption. */
.card[data-id].tint-ghosted .msg::before{content:"";float:right;width:48px;height:28px}

/* Reserve the wall and the collage while a fallback request is pending. */
.wall-scene{min-height:550px}
.hero .collage{background-image:none;position:relative}
.hero .collage img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.here{min-width:83px}

.here:has(#live[hidden]){visibility:hidden}