/* Study 11: user-selected UI Card Designs reference by Rabia Ali. */
:root{--paper:#f7f5ee;--ink:#232323;--muted:#55514b;--orange:#ff925d;--green:#b2efbd;--yellow:#ffe37b;--blue:#88acf0;--pink:#f29bc6;--white:#fffefa;--deep:#232323;--line:#232323;--focus:#232323;--border:2px solid var(--ink);--hard-shadow:5px 5px 0 var(--ink)}
html{scrollbar-color:var(--ink) var(--paper);scroll-padding-top:28px}
body{background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif}
::selection{background:var(--yellow);color:var(--ink)}
.shell{max-width:1232px;padding:0 48px}
.site-header{height:111px;gap:26px}
.brand{font:700 28px/1 'DM Sans',sans-serif;letter-spacing:-.04em;color:var(--ink)}
.brand svg{width:35px;height:35px;color:var(--ink);padding:5px;background:var(--yellow);border:var(--border);border-radius:9px;box-shadow:2px 2px 0 var(--ink)}
.products{background:var(--white);border:var(--border);border-radius:9px;padding:4px;gap:5px;box-shadow:3px 3px 0 var(--ink)}
.products button{padding:9px 20px;min-height:42px;border-radius:5px;border:2px solid transparent;font-size:14px;font-weight:700;transition:background .15s}
.products button.active{background:var(--yellow);color:var(--ink);border-color:var(--ink)}
.products button:hover{background:var(--yellow)}
.header-subscribe{background:var(--orange);border:var(--border);border-radius:7px;font-size:13px;font-weight:700;padding:12px 16px;min-height:45px;box-shadow:3px 3px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.header-subscribe:hover{background:#ffab7d}
.snapshot-note{font-size:12px;margin:5px 0 23px;color:var(--muted)}
.hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(310px,.9fr);gap:27px;padding:0 5px 38px 0;align-items:start}
.hero-copy{min-width:0;background:var(--orange);border:var(--border);border-radius:12px;padding:33px 34px 29px;box-shadow:var(--hard-shadow)}
h1,h2{font-family:'DM Sans',sans-serif;letter-spacing:-.035em;font-weight:700}
h1.elapsed-copy{font-size:30px;line-height:1.25;margin:0;letter-spacing:-.03em}
.neo-study h1>span{display:block;margin-left:0}
.opening{font-size:29px;line-height:1.2;font-weight:600}
.elapsed-copy .time-highlight{display:block;border:0;margin:8px 0 13px;padding:0;font:700 clamp(72px,8.4vw,104px)/1.04 'DM Sans',sans-serif;letter-spacing:-.045em;font-variant-numeric:tabular-nums;color:var(--ink)}
.status-context{display:block;font-size:28px;line-height:1.27;letter-spacing:-.03em;font-weight:600}
.status-context .product-name{background:var(--white);color:var(--ink);padding:0 5px;border-bottom:2px solid var(--ink);box-decoration-break:clone;-webkit-box-decoration-break:clone}
.unknown-copy{font-size:51px;line-height:1.08;margin:0}
.unknown-copy .status-context{margin-top:16px}
.hero-description{font-size:14px;line-height:1.7;margin:23px 0 22px;color:#3f3029}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:17px}
.primary{border:var(--border);border-radius:7px;background:var(--ink);color:var(--white);font-size:16px;font-weight:700;padding:15px 19px;min-height:56px;box-shadow:3px 3px 0 var(--white);gap:24px;transition:transform .15s,box-shadow .15s}
.primary:hover{background:#3d3d3d;transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--white)}
.primary:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--white)}
.hero-actions>a{font-size:13px;font-weight:600;color:var(--ink)}
.small-note{font-size:12px;margin-top:15px;line-height:1.65;color:#3f3029}
.small-note>span{display:block}
.hero-side{display:flex;flex-direction:column;align-items:stretch;gap:23px;padding-top:25px;min-width:0}
.last-reset{order:1;display:block;transform:rotate(1.3deg);padding:26px 27px 23px;margin:0;width:100%;max-width:none;background:var(--white);border:var(--border);border-radius:10px;box-shadow:var(--hard-shadow);position:relative}
.last-reset>svg{position:absolute;top:-15px;right:19px;background:var(--green);border:var(--border);border-radius:50%;width:37px;height:37px;padding:4px;stroke:var(--ink)}
.last-reset span{font-size:13px;color:var(--muted)}
.last-reset strong{font:700 26px/1.3 'DM Sans',sans-serif;letter-spacing:-.025em;margin:10px 0 13px;color:var(--ink)}
.last-reset p.latest-scope{font-size:13px;color:var(--ink);line-height:1.6;margin:0 0 13px}
.last-reset a{font-size:13px;font-weight:700;color:var(--ink)}
.last-reset small{display:block;font-size:12px;color:var(--muted);line-height:1.5;margin-top:14px}
.mascot-scene{order:2;display:grid;grid-template-columns:100px minmax(0,1fr);align-items:center;column-gap:11px;padding:15px 16px;margin:0 0 0 29px;background:var(--yellow);border:var(--border);border-radius:10px;box-shadow:4px 4px 0 var(--ink);width:auto;max-width:none;transform:rotate(-1deg)}
.mascot-scene:before,.speech:after{display:none}
.mascot-art{width:100px;height:110px;max-width:none;grid-row:1/4;margin:0}
.speech{background:none;border:0;padding:0;transform:none;text-align:left;width:auto;max-width:none;margin:0;align-self:end;font-size:14px;line-height:1.4;font-weight:600;color:var(--ink)}
.scene-caption{justify-content:start;margin:0;font-size:12px}
.scene-caption>span{display:none}
.motion-toggle,.restore{font-size:12px;color:#494129;min-height:32px}
.mood-lab{text-align:left;grid-column:2;color:#494129;font-size:12px;align-self:start}
.mood-lab summary{cursor:pointer;padding:4px 0;min-height:30px}
.mood-lab summary:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.mood-controls{flex-wrap:wrap;justify-content:start;gap:6px;margin-top:7px}
.mood-controls button{border:1px solid var(--ink);border-radius:5px;background:var(--white);min-height:34px;padding:4px 9px}
.mood-controls button[aria-pressed=true]{background:var(--ink);color:var(--white)}
.mood-note{text-align:left;font-size:12px;line-height:1.5}
.restore{margin-left:0}
.hope{width:88%;margin:0 5px 86px auto;padding:25px 29px;background:var(--green);border:var(--border);border-radius:10px;box-shadow:var(--hard-shadow);gap:28px}
.hope-copy h2{font-size:28px;line-height:1.15;margin-bottom:11px}
.hope-copy h2>span{color:var(--ink)}
.hope-copy p{font-size:13px;color:#354637;max-width:28ch}
.hope-flower{width:34px;height:34px;top:22px;left:-65px;stroke:var(--ink);stroke-width:7}
.prayer{min-width:267px}
.pray{border:var(--border);border-radius:7px;background:var(--white);color:var(--ink);padding:12px 16px;font-size:15px;font-weight:700;box-shadow:3px 3px 0 var(--ink);min-height:52px;gap:11px;transition:transform .15s,box-shadow .15s}
.pray svg{width:25px;height:25px}.pray>span{margin-left:18px}
.pray:hover{background:var(--yellow);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.pray:active{transform:translate(3px,3px);box-shadow:none}
.prayer p{font-size:12px;color:#354637;margin:13px 0 2px}.prayer strong{font-size:17px;color:var(--ink);font-variant-numeric:tabular-nums}.prayer small{font-size:12px;color:#354637}
h2{font-size:38px;line-height:1.15}
.section-heading{gap:28px;margin-bottom:24px}
.section-heading h2>span{display:inline-block;margin-left:23px;background:var(--yellow);padding:0 6px 3px;border-radius:4px}
.section-heading>p{font-size:13px;color:var(--muted)}
.history{width:95%;margin:0 0 85px}
.calendar-surface{margin-left:28px;padding:0 26px 24px;background:var(--white);border:var(--border);border-radius:10px;box-shadow:var(--hard-shadow);overflow:hidden}
.calendar-top{margin:0 -26px 23px;padding:17px 25px;border-bottom:var(--border);background:var(--blue);font-size:15px}
.calendar-top strong{font-weight:700}.calendar-top>span{font-size:12px;color:#293650}
.heatmap-scroll{scrollbar-color:var(--ink) transparent}
.calendar{min-width:670px}.months,.weekdays{font-size:12px;color:var(--muted)}
.heat-cell{background:#e9e6df;border-radius:4px;border:1px solid #dedad0}
.heat-cell.is-reset{background:var(--orange);border:2px solid var(--ink)}
.heat-cell.is-credit{background:var(--blue);border:2px solid var(--ink)}
.heat-cell.is-increase{background:var(--green);border:2px dashed var(--ink)}
.sample{background:#e9e6df;border:1px solid #dedad0;width:12px;height:12px}
.sample.reset{background:var(--orange);border:1.5px solid var(--ink)}
.sample.credit{background:var(--blue);border:1.5px solid var(--ink)}
.sample.increase{background:var(--green);border:1.5px dashed var(--ink)}
.legend{font-size:12px;color:var(--ink);gap:10px 17px}
.calendar-detail{font-size:12px;color:var(--muted)}.history-footnote{font-size:12px;margin-left:28px;color:var(--muted)}
.feed{margin-left:8%;margin-right:5px;margin-bottom:87px}
.feed .section-heading h2>span{background:var(--green)}
.all-posts{font-size:13px;color:var(--ink);font-weight:600}
.posts{display:flex;flex-direction:column;gap:21px}
.post{grid-template-columns:86px minmax(0,1fr);column-gap:23px;padding:25px;background:var(--white);border:var(--border);border-radius:10px;box-shadow:4px 4px 0 var(--ink)}
.post:nth-child(2),.post:nth-child(3){margin-left:0}
.post-date{font:700 20px/1.3 'DM Sans',sans-serif;color:var(--ink)}.post-date small{font:12px/1.5 'DM Sans',sans-serif;color:var(--muted);margin-top:7px}
.event-kind{background:var(--orange);border:1px solid var(--ink);border-radius:4px;color:var(--ink);font-size:12px;padding:3px 7px;font-weight:600}
.event-kind.reset_credit{background:var(--blue);color:var(--ink)}.event-kind.limit_increase{background:var(--green);color:var(--ink)}
.post-author{font-size:12px;color:var(--muted)}blockquote{font-size:18px;line-height:1.65;margin:14px 0 12px;max-width:61ch}.post-scope{font-size:12px;line-height:1.7;color:var(--muted)}
.post-source{font-size:12px;font-weight:700;color:var(--ink);margin-top:14px}
.notification{background:var(--blue);border:var(--border);border-radius:10px;box-shadow:var(--hard-shadow);margin:0 36px 65px 36px;min-height:260px;padding:32px 34px 32px 32%;}
.notification h2{font-size:36px}.notification p{font-size:14px;color:#263852;line-height:1.6;margin:16px 0 22px}.notification .small-note{font-size:12px;color:#263852}
.notification .primary{background:var(--ink);color:var(--white);font-size:15px;min-height:52px}
.bean-art{width:156px;height:175px;left:25px;top:24px;transform:rotate(-3deg)}.bean-line{left:31px;bottom:28px;max-width:145px;font-size:12px;color:#263852;transform:none}
footer{border-top:var(--border);padding:27px 0 35px;font-size:12px;color:var(--muted)}footer .brand{font-size:23px}
.toast{border:2px solid var(--ink);background:var(--yellow);color:var(--ink);box-shadow:3px 3px 0 var(--ink);font-weight:600;border-radius:7px}
dialog{background:var(--white);border:var(--border);border-radius:10px;box-shadow:7px 7px 0 var(--ink);padding:31px;color:var(--ink)}dialog::backdrop{background:#23232388}
.close-dialog{background:var(--yellow);border:var(--border);border-radius:6px;font-weight:700;width:40px;height:40px}
.dialog-bean{height:82px;width:100px;margin:0 0 15px}dialog h2{font-size:36px}.channel-options{gap:13px}
.channel-options button{border:var(--border);border-radius:6px;box-shadow:3px 3px 0 var(--ink);background:var(--yellow);font-size:14px;font-weight:600;transition:transform .15s,box-shadow .15s}
.channel-options button:nth-child(2){background:var(--orange)}.channel-options button:nth-child(3){background:var(--blue)}.channel-options button:nth-child(4){background:var(--green)}
.channel-options button{--channel-color:var(--yellow)}.channel-options button:nth-child(2){--channel-color:var(--orange)}.channel-options button:nth-child(3){--channel-color:var(--blue)}.channel-options button:nth-child(4){--channel-color:var(--green)}
.channel-options button:hover{background:var(--channel-color);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}.channel-options button:active,.header-subscribe:active{transform:translate(3px,3px);box-shadow:none}
@media(max-width:1080px){.shell{padding:0 32px}.hero{grid-template-columns:minmax(0,1.2fr) minmax(285px,.9fr);gap:24px}.hero-copy{padding:28px}.status-context{font-size:26px}.elapsed-copy .time-highlight{font-size:86px}.hero-actions{gap:17px;flex-direction:column;align-items:start}.hero-side{padding-top:18px}.mascot-scene{margin-left:10px;grid-template-columns:85px minmax(0,1fr);padding:13px}.mascot-art{width:85px;height:95px}.last-reset{padding:24px}.last-reset strong{font-size:23px}.hope{width:93%;padding:25px}.hope-flower{left:-50px}.hope-copy h2{font-size:27px}.notification{margin-left:25px;margin-right:5px;padding-left:32%}.notification h2{font-size:33px}.bean-art{width:140px;left:22px}.bean-line{left:25px}.feed{margin-left:6%}}
@media(max-width:760px){
 .shell{padding:0 20px}.site-header{height:auto;padding:24px 0 20px;gap:20px}.brand{font-size:24px}.brand svg{width:31px;height:31px}.header-subscribe{font-size:12px;min-height:42px;padding:9px 10px}.header-subscribe span{margin-left:4px}.products{order:3;width:100%;justify-content:center;gap:4px}.products button{font-size:14px;min-height:42px;flex:1;padding:8px 12px}.snapshot-note{margin:5px 0 20px;font-size:12px;line-height:1.6}.hero{grid-template-columns:minmax(0,1fr);gap:23px;padding:0 4px 29px 0}.hero-copy{padding:24px 22px 25px;border-radius:10px}.opening{font-size:25px}.elapsed-copy .time-highlight{font-size:clamp(62px,18vw,84px);letter-spacing:-.04em;margin:8px 0 15px}.status-context{font-size:25px;line-height:1.3}.hero-description{font-size:13px;line-height:1.7;margin:22px 0}.hero-actions{gap:19px;align-items:stretch}.hero-actions .primary{font-size:15px;gap:10px;justify-content:space-between;min-height:55px;width:100%;padding:14px}.hero-actions>a{font-size:13px;width:max-content}.small-note{font-size:12px;line-height:1.8;margin-top:15px}.hero-side{padding:0;gap:21px}.last-reset{padding:22px;transform:rotate(-.6deg);max-width:none;order:1}.last-reset strong{font-size:25px}.last-reset p.latest-scope{font-size:13px}.last-reset small{font-size:12px}.mascot-scene{order:2;margin:0 0 0 22px;width:calc(100% - 22px);grid-template-columns:88px minmax(0,1fr);padding:14px 13px;column-gap:11px}.mascot-art{width:88px;height:98px}.speech{font-size:13px}.scene-caption{justify-content:start}.mood-lab{font-size:12px}.hope{width:calc(100% - 4px);margin:0 4px 61px 0;padding:25px 22px;gap:23px;flex-direction:column;align-items:start}.hope-copy h2{font-size:28px}.hope-copy p{font-size:13px;max-width:25ch}.hope-flower{left:auto;right:16px;top:-18px;width:31px;height:31px}.prayer{min-width:0;width:100%}.pray{font-size:14px;padding:12px 13px;gap:10px;width:100%;justify-content:space-between}.pray>span{margin-left:4px}.prayer p{font-size:12px}.prayer small{font-size:12px}.section-heading{align-items:start;gap:17px;margin-bottom:23px}h2{font-size:30px}.section-heading h2>span{margin-left:12px;padding:0 4px 2px}.section-heading>p{font-size:13px}.history{width:calc(100% - 4px);margin-bottom:60px}.calendar-surface{margin-left:0;padding:0 16px 21px;border-radius:9px}.calendar-top{margin:0 -16px 20px;padding:16px;gap:6px;flex-direction:column;align-items:start}.calendar-top strong{font-size:15px}.calendar-top>span{font-size:12px}.calendar{min-width:600px}.legend{font-size:12px;gap:10px 14px}.calendar-detail{font-size:12px}.history-footnote{font-size:12px;margin-left:0;line-height:1.7}.feed{margin:0 4px 67px 0}.posts{gap:21px}.post{padding:21px 19px;grid-template-columns:minmax(0,1fr);gap:14px}.post:nth-child(2),.post:nth-child(3){margin-left:0}.post-date{display:flex;align-items:center;gap:13px;font-size:20px}.post-date small{margin:0;font-size:12px}.post-top{gap:10px}.event-kind,.post-author{font-size:12px}blockquote{font-size:17px;line-height:1.65}.post-source{grid-column:1;margin:0;font-size:13px}.post-scope{font-size:12px}.notification{margin:0 4px 43px 0;padding:25px 23px 28px;min-height:0}.notification h2{font-size:29px;max-width:8ch;position:relative}.notification p{font-size:13px;margin:17px 0 22px}.notification .primary{width:100%;justify-content:space-between;font-size:15px;gap:10px;padding:14px}.notification .small-note{font-size:12px}.bean-art{width:95px;height:115px;right:12px;left:auto;top:17px}.bean-line{display:none}footer{gap:23px;padding:25px 0 32px;font-size:12px}footer>div{flex-direction:column;gap:12px}dialog{padding:27px}.dialog-note{font-size:12px}
}
/* Compact prayer card above the source card in the right column. */
.hero-side .hope{order:0;width:100%;margin:0;padding:20px 24px;justify-content:center;align-items:center;gap:0}
.hero-side .prayer{flex:0 1 320px;width:100%;min-width:0;text-align:center}
.hero-side .pray{width:100%;justify-content:space-between;font-size:14px;padding:10px 13px;gap:9px;min-height:47px}
.hero-side .pray>span{margin-left:0}.hero-side .pray svg{width:22px;height:22px;flex-shrink:0}
.hero-side .prayer p{font-size:12px;line-height:1.5;margin-top:12px}.hero-side .prayer strong{font-size:15px}
.hero-side .prayer small{display:block;font-size:12px;line-height:1.5;margin-top:3px}
@media(max-width:760px){.hero-side .hope{padding:20px 22px}.hero-side .prayer{flex:none;max-width:320px}.hero{padding-bottom:61px}}
/* Match the status card to the complete right-hand stack on desktop. */
@media(min-width:761px){
 .hero{align-items:stretch}
 .hero-copy{display:flex;flex-direction:column}
 .hero-copy .hero-description{margin-top:20px;padding-top:0}
 .hero-side{padding-top:0;justify-content:space-between}
 .hero-side .mascot-scene{transform:none}
}
/* Bare companion above the date, with the prayer card at the bottom. */
.hero-side .mascot-scene{order:0;display:flex;align-items:center;justify-content:center;width:100%;margin:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none;transform:none}
.hero-side .mascot-art{width:200px;height:184px;flex:none;margin:0;grid-row:auto}
.hero-side .hope{order:2}
@media(max-width:760px){.hero-side .mascot-art{width:180px;height:166px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}.primary:hover,.primary:active,.pray:hover,.pray:active,.channel-options button:hover,.channel-options button:active,.header-subscribe:active{transform:none}}

/* Compact hero: continuous copy and balanced columns, per annotated review. */
@media(min-width:761px){
 .hero-copy{padding:28px;justify-content:center;container-type:inline-size}
 .hero-copy .status-context{font-size:clamp(15px,3.5cqi,20px);white-space:nowrap;letter-spacing:-.025em}
 .hero-copy .hero-description{font-size:clamp(11px,2.45cqi,14px);white-space:nowrap;line-height:1.6;margin:20px 0}
 .hero-side{gap:16px;justify-content:center}
 .hero-side .mascot-art{width:130px;height:105px}
 .hero-side .last-reset{padding:18px 23px}
 .hero-side .last-reset strong{margin:6px 0 8px;font-size:24px}
 .hero-side .last-reset p.latest-scope{margin-bottom:8px}
 .hero-side .last-reset small{margin-top:8px}
 .hero-side .hope{padding:15px 23px}
 .hero-side .prayer p{margin:9px 0 0}
}

.calendar-tooltip{position:fixed;z-index:1000;width:320px;max-width:calc(100vw - 24px);max-height:min(420px,calc(100dvh - 40px));overflow:visible;padding:14px 16px;background:var(--ink);color:var(--white);border-radius:9px;font-size:13px;line-height:1.55;box-shadow:0 5px 18px #23232326;box-sizing:border-box}
.calendar-tooltip[hidden]{display:none}
.calendar-tooltip:after{content:"";position:absolute;left:var(--arrow-x);transform:translateX(-50%);border:9px solid transparent}
.calendar-tooltip[data-side="above"]:after{top:100%;border-top-color:var(--ink)}
.calendar-tooltip[data-side="below"]:after{bottom:100%;border-bottom-color:var(--ink)}
.tooltip-date{display:block;margin-bottom:5px;font-size:14px}
.tooltip-event+.tooltip-event{border-top:1px solid #ffffff40;padding-top:8px;margin-top:8px}
.tooltip-event p{margin:3px 0 0;color:#e6dfd3;overflow-wrap:anywhere}
.calendar-tooltip:has(.tooltip-event:nth-of-type(3)){overflow:auto}
.heat-cell.has-event:hover{transform:rotate(-5deg);outline:2px solid var(--ink);outline-offset:2px}

/* Give Bean more room by tightening the announcement card. */
.hero-side .last-reset{padding:14px 22px}
.hero-side .last-reset strong{margin:4px 0 5px}
.hero-side .last-reset p.latest-scope{margin-bottom:5px;line-height:1.4}
.hero-side .last-reset small{margin-top:5px;line-height:1.4}
@media(min-width:761px){
 .hero-side{gap:13px}
 .hero-side .mascot-scene{flex:1;min-height:145px}
 .hero-side .mascot-art{width:195px;height:145px}
}
@media(max-width:760px){
 .hero-side .last-reset{padding:17px 20px}
 .hero-side .mascot-art{width:210px;height:178px}
}

/* Shared left edge for the history and source-feed headings. */
.feed{margin-left:0}
.history .section-heading h2,.feed .section-heading h2{text-align:left}
.history .section-heading h2>span,.feed .section-heading h2>span{margin-left:0;padding-left:0}

.show-more-posts{display:block;margin:28px auto 0;padding:12px 24px;min-height:44px;border:var(--border);border-radius:7px;background:var(--white);color:var(--ink);box-shadow:3px 3px 0 var(--ink);font:600 14px 'DM Sans',sans-serif;cursor:pointer}
.show-more-posts[hidden]{display:none}
.show-more-posts:hover{background:var(--green)}
.show-more-posts:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}

/* Date summary contains only its label and date. */
.hero-side .last-reset{padding:16px 22px}
.hero-side .last-reset strong{margin:5px 0 0}

/* Let Bean fill the space reclaimed from the compact date card. */
@media(min-width:761px){
 .hero-side .mascot-scene{min-height:200px}
 .hero-side .mascot-art{width:260px;height:200px}
}
@media(max-width:760px){
 .hero-side .mascot-scene{min-height:205px}
 .hero-side .mascot-art{width:250px;height:205px}
}

/* One shared content rail for history, source cards and subscription banner. */
.history,.feed,.notification{width:calc(100% - 5px);margin-left:0;margin-right:5px;box-sizing:border-box}
.calendar-surface{margin-left:0}
.history-footnote{margin-left:0}
@media(max-width:760px){.history,.feed,.notification{width:calc(100% - 4px);margin-right:4px}}

.hero-side .mascot-scene{position:relative}
.bean-reaction{position:absolute;z-index:2;top:0;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 16px);padding:8px 13px;border:2px solid var(--ink);border-radius:9px;background:var(--white);color:var(--ink);box-shadow:3px 3px 0 var(--ink);font-size:13px;font-weight:600;line-height:1.4;text-align:center;pointer-events:none}
.bean-reaction[hidden]{display:none}
.bean-reaction:after{content:"";position:absolute;top:100%;left:50%;border:7px solid transparent;border-top-color:var(--ink);transform:translateX(-50%)}

@media(prefers-reduced-motion:no-preference){
 .bean-actor.pet-happy .bean-direction{animation:bean-pet-greeting .65s ease-in-out 2}
}
@keyframes bean-pet-greeting{0%,100%{transform:translateY(0) rotate(0)}35%{transform:translateY(-10px) rotate(-4deg)}70%{transform:translateY(-3px) rotate(4deg)}}

/* Temporary Bean state preview toolbar. */
.hero-side .mascot-scene{flex-direction:column}

/* Existing Neo character reused as Tibo's illustrated source avatar. */
.post-entry{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;align-items:start}
.source-avatar{width:64px;height:72px;margin-top:12px;background:var(--yellow);border:2px solid var(--ink);border-radius:12px;overflow:hidden}
.source-avatar svg{width:100%;height:100%}
.post-entry .post{min-width:0;margin-left:0}
@media(max-width:760px){.post-entry{grid-template-columns:42px minmax(0,1fr);gap:10px}.source-avatar{width:42px;height:49px;border-radius:9px;margin-top:10px}.post-entry .post{padding:18px 15px}}

.post-time{font-size:12px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}

.source-avatar{cursor:pointer;transition:background .18s,box-shadow .18s}
.post-entry:hover .source-avatar,.source-avatar:focus-visible{background:var(--green);box-shadow:3px 3px 0 var(--ink)}
.source-avatar:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
@media(prefers-reduced-motion:no-preference){
 .post-entry:hover .source-avatar,.source-avatar:focus-visible{transform-origin:50% 85%;animation:tibo-greeting .85s ease-in-out infinite}
}
@keyframes tibo-greeting{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-4px) rotate(-8deg)}50%{transform:translateY(-2px) rotate(0)}75%{transform:translateY(-4px) rotate(8deg)}}