/* COCOPUNKS v2 · Hatch your COCO. Seven cinematic eggs, one composer. Loads after site.css. */
.hatch{--eh:230px;--born:300px;--nest:326px;--tint:255,92,70;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:calc(64px + 20px) var(--m) 32px}
.hatch-h{font-size:52px;line-height:.95;text-align:center;letter-spacing:0}
:lang(zh-CN) .hatch-h [data-l=zh]{font-size:40px;letter-spacing:-.02em}

/* the egg: one image, three layers (whole, two halves for the split), a sheen and glowing cracks masked to its alpha */
.nest{--cy:calc((var(--eh) + 36px) / 2);position:relative;display:grid;place-items:center;width:100%;height:var(--nest);padding-bottom:calc(var(--nest) - var(--eh) - 36px)}
.nest>*{grid-area:1/1}
.nest::before{content:"";position:absolute;left:50%;top:var(--cy);translate:-50% -50%;width:calc(var(--eh) * 1.5);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--tint),.22),rgba(var(--tint),0));transform:translateY(-4%);animation:breathe 6s ease-in-out infinite;pointer-events:none}
.nest::after{content:"";position:absolute;left:50%;top:calc(var(--cy) + var(--eh) / 2 - 6px);translate:-50% 0;width:calc(var(--eh) * .62);height:12px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.9),transparent);pointer-events:none;z-index:1}
@keyframes breathe{50%{opacity:.55;transform:translateY(-4%) scale(.94)}}
.egg{--src:url(../assets/eggs/beginner.webp);position:relative;height:var(--eh);aspect-ratio:406/520;z-index:2;transform-origin:50% 96%;filter:drop-shadow(0 0 1px rgba(255,255,255,.08)) drop-shadow(10px -6px 18px rgba(var(--tint),.18))}
.egg-i{position:absolute;inset:0;width:100%;height:100%;user-select:none;-webkit-user-drag:none}
.egg-top,.egg-bot{visibility:hidden;transition:transform .9s var(--ease),opacity .7s}
.egg-top{clip-path:polygon(0 0,100% 0,100% 47%,80% 48%,70% 42%,60% 47%,50% 41%,40% 48%,30% 42%,20% 49%,10% 43%,0 47%);transform-origin:20% 45%}
.egg-bot{clip-path:polygon(0 47%,10% 43%,20% 49%,30% 42%,40% 48%,50% 41%,60% 47%,70% 42%,80% 48%,100% 47%,100% 100%,0 100%)}
.sheen,.cracks{position:absolute;inset:0;width:100%;height:100%;-webkit-mask:var(--src) center/100% 100% no-repeat;mask:var(--src) center/100% 100% no-repeat;pointer-events:none}
.sheen{background:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.22) 48%,transparent 58%) 0 0/300% 100%;mix-blend-mode:screen;animation:sheen 7s ease-in-out infinite}
@keyframes sheen{0%,35%{background-position:120% 0}75%,100%{background-position:-20% 0}}
.cracks{overflow:visible;opacity:0;transition:opacity .4s;filter:drop-shadow(0 0 2px rgba(255,214,160,.9)) drop-shadow(0 0 6px rgba(255,150,90,.6))}
.c{fill:none;stroke:#fff1d6;stroke-width:.8;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s linear,opacity .3s}
.c0{stroke-dashoffset:calc(1 - var(--p,0) * 1.15)}
.c1{stroke-dashoffset:calc(1 - max(0,var(--p,0) * 2.2 - .9))}
.c2{stroke-dashoffset:calc(1 - max(0,var(--p,0) * 2.4 - 1.1))}
.c3{stroke-dashoffset:calc(1 - max(0,var(--p,0) * 2.6 - 1.4))}
.egg-ref{height:var(--eh);width:auto;aspect-ratio:406/520;transform:translateY(calc(var(--eh) - 3px)) scaleY(-1);opacity:.2;filter:blur(1px);-webkit-mask:linear-gradient(to top,#000,transparent 30%);mask:linear-gradient(to top,#000,transparent 30%);pointer-events:none;z-index:0}
.born{margin:calc(var(--nest) - var(--eh) - 36px) 0 0;width:var(--born);aspect-ratio:1;background:#151410;overflow:hidden;border-radius:4px;z-index:3;box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.born img{width:100%;height:100%;object-fit:cover}
.glow{position:absolute;left:50%;top:var(--cy);translate:-50% -50%;width:calc(var(--eh) * 1.3);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,236,200,.9),rgba(var(--tint),.35) 45%,rgba(var(--tint),0));opacity:0;pointer-events:none;transform:scale(.3);z-index:4;mix-blend-mode:screen}
.egg,.egg-ref,.nest::before{transition:opacity .4s,filter .5s}
.nest.swap .egg,.nest.swap .egg-ref{opacity:0}

/* rolled tier, shown quietly once the roll lands */
.tier-name{min-height:1.2em;margin-top:-14px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(241,240,235,.55)}
:lang(zh-CN) .tier-name{letter-spacing:.3em;font-size:12px}
.tier-name>span:not([hidden]){display:inline-block;animation:wordin .6s var(--ease) both}
@keyframes wordin{from{opacity:0;transform:translateY(4px);letter-spacing:.4em}}
html.rm .tier-name>span{animation:none}

/* stage spotlight: a soft cone from above onto the centre slot, a light pool on the floor; tints to the landed tier */
.hatch{--pool:236,230,218}
.spot{position:absolute;left:50%;top:calc(var(--cy) + var(--eh) / 2 + var(--eh) * .1 - var(--eh) * 2.2);width:calc(var(--eh) * 1.9);height:calc(var(--eh) * 2.2);translate:-50% 0;pointer-events:none;z-index:0;
 background:linear-gradient(to bottom,rgba(255,247,232,0) 0%,rgba(255,247,232,.03) 28%,rgba(255,247,232,.085) 66%,rgba(255,247,232,.04) 86%,rgba(255,247,232,0) 100%);
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='b' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='5.5'/%3E%3C/filter%3E%3Cpolygon filter='url(%23b)' points='45,-10 55,-10 92,104 8,104'/%3E%3C/svg%3E") 0 0/100% 100%;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='b' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='5.5'/%3E%3C/filter%3E%3Cpolygon filter='url(%23b)' points='45,-10 55,-10 92,104 8,104'/%3E%3C/svg%3E") 0 0/100% 100%;opacity:.6;transition:opacity .5s,filter .5s}
.spot::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .97 0 0 0 0 .92 0 0 0 1.6 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/220px 220px;opacity:.07;mix-blend-mode:screen;
 -webkit-mask:linear-gradient(to bottom,transparent 12%,#000 55%,transparent 92%);mask:linear-gradient(to bottom,transparent 12%,#000 55%,transparent 92%);animation:haze 30s linear infinite}
@keyframes haze{to{background-position:-220px 440px}}
.pool{position:absolute;left:50%;top:calc(var(--cy) + var(--eh) / 2 - 4px);width:calc(var(--eh) * 1.35);height:calc(var(--eh) * .22);translate:-50% -50%;border-radius:50%;pointer-events:none;z-index:0;
 background:radial-gradient(closest-side,rgba(255,247,232,.20),rgba(255,247,232,.06) 62%,rgba(255,247,232,0));opacity:.7;transition:opacity .5s}
.pool::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--pool),.34),rgba(var(--pool),.10) 60%,rgba(var(--pool),0));opacity:0;transition:opacity .9s}
.nest.lit .pool::after{opacity:1}
.hatch[data-state=rolling] .spot,.hatch[data-state=loading] .spot{opacity:.9}
.hatch[data-state=rolling] .pool,.hatch[data-state=loading] .pool{opacity:1}
.hatch[data-state=done] .spot{opacity:.35}
.hatch[data-state=error] .spot,.hatch[data-state=error] .pool{opacity:.18}
.spot.pulse{animation:pulse 1.1s var(--ease)}
@keyframes pulse{0%{filter:none}22%{filter:brightness(2.1)}100%{filter:none}}
.pool.pulse{animation:poolp 1.1s var(--ease)}
@keyframes poolp{22%{transform:scale(1.12);filter:brightness(1.8)}}

/* reel: eggs slide through the spotlight; the one in the centre is lit, the rest sit in the dark */
.reel{display:none;position:absolute;left:50%;top:calc(var(--cy) - var(--eh) / 2);width:min(100%,calc(var(--eh) * 5.4));height:var(--eh);translate:-50% 0;z-index:2;pointer-events:none;
 -webkit-mask:linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent);mask:linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent)}
.reel img{position:absolute;left:50%;top:0;height:var(--eh);width:auto;aspect-ratio:406/520;margin-left:calc(var(--eh) * -.39);transform-origin:50% 92%;will-change:transform,filter}
.nest.spinning .reel{display:block}
.reel{transition:opacity .2s ease,transform .3s var(--ease)}
.reel.rmout{opacity:0;transform:translateX(14px);transition:opacity .2s ease,transform 0s .2s}
.nest.spinning .egg,.nest.spinning .egg-ref{opacity:0;transition:none}
.egg.land{animation:landed .8s var(--ease)}
@keyframes landed{0%{filter:brightness(1.7) drop-shadow(0 0 26px rgba(var(--tint),.7))}35%{transform:scale(1.03)}100%{transform:none}}
.hatch[data-state=rolling] .nest::before{animation:none;opacity:.6}
.nest::before{transition:background .4s,opacity .4s}
html.rm .spot::after,html.rm .spot.blink,html.rm .spot.pulse,html.rm .pool.pulse{animation:none!important}
@media (prefers-reduced-motion:reduce){.spot,.spot::after,.pool{animation:none!important}}

/* luck line under the result: quiet, the number in the tier colour */
.luck{margin-top:-18px;min-height:1.4em;font-size:13px;letter-spacing:.01em;color:rgba(241,240,235,.62);font-variant-numeric:tabular-nums}
.luck[hidden]{display:block;visibility:hidden}
.luck b{font-weight:600;color:rgb(var(--tint));filter:brightness(1.15)}
.luck:not([hidden]){animation:wordin .6s var(--ease) both}
html.rm .luck{animation:none}
.cc{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}

/* TRAITS panel: OpenSea-style cards; desktop beside the image, mobile below it */
.stage{width:100%;display:flex;flex-direction:column;align-items:center;gap:14px}
.traits{width:min(440px,100%)}
.traits[hidden]{display:none}
.th{margin:0 0 8px;font:500 12px/1 "Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:rgba(241,240,235,.9)}
.th-n{color:rgba(241,240,235,.45);margin-left:4px}
.tgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:7px}
.tc{display:flex;flex-direction:column;min-width:0;height:66px;padding:8px 11px;border:1px solid rgba(241,240,235,.12);border-radius:9px;background:rgba(18,18,17,.9);
 opacity:0;transform:translateY(4px);transition:opacity .35s calc(.1s + var(--d) * .05s),transform .35s var(--ease) calc(.1s + var(--d) * .05s)}
.tk{font-size:9.5px;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;color:rgba(241,240,235,.5)}
.tv{margin-top:3px;font-size:13px;line-height:1.25;color:#f1f0eb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv::first-letter{text-transform:uppercase}
.sw{display:inline-block;width:9px;height:9px;margin-right:6px;border-radius:2px;vertical-align:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.tr{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:6px;font:400 11px/1 "Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}
.pill{padding:3px 5px;border-radius:4px;white-space:nowrap}
.pill b{font-weight:400;color:#f1f0eb}
.pill em{font-style:normal}
.pill.common{background:rgba(32,110,200,.26)}.pill.common em{color:#4fb0ff}
.pill.rare{background:rgba(150,70,210,.28)}.pill.rare em{color:#c88bff}
.pill.tier{background:rgba(var(--c),.2)}.pill.tier em{color:rgb(var(--c))}
.price{color:rgba(241,240,235,.88);white-space:nowrap}
.traits.on .tc{opacity:1;transform:none}
.traits.now .tc,html.rm .tc{transition:none}
.hatch[data-state=done] .tier-name{display:none}
@media (min-width:900px){
 /* result: image + gap + panel as one centred group; the square image is exactly as tall as the traits block (--side, set from its height) */
 .hatch[data-state=done] .stage{flex-direction:row;justify-content:center;align-items:flex-start;gap:32px;width:auto;max-width:100%}
 .hatch[data-state=done] .nest{width:var(--side,300px);height:var(--side,300px);padding:0;flex:none;display:block}
 .hatch[data-state=done] .born{margin:0;width:100%;height:100%}
 .hatch[data-state=done] .nest::before{top:50%}
 .hatch[data-state=done] .nest::after,.hatch[data-state=done] .spot,.hatch[data-state=done] .pool,.hatch[data-state=done] .reel{display:none}
 .hatch[data-state=done] .traits{width:440px;margin:0;min-height:var(--side,0);display:flex;flex-direction:column}
 /* few traits: the rows stretch so the last row still ends level with the image bottom */
 .hatch[data-state=done] .tgrid{flex:1;grid-auto-rows:1fr}
 .hatch[data-state=done] .tc{height:auto;min-height:66px}
}
@media (min-width:900px) and (max-height:820px){
 .hatch[data-state=done] .tgrid{gap:6px}
 .hatch[data-state=done] .tc{min-height:58px;padding:6px 10px}
 .hatch[data-state=done] .tv{font-size:12.5px;margin-top:2px}
 .hatch[data-state=done] .th{margin-bottom:6px}
}
@media (max-width:899px){.hatch[data-state=done] .stage{margin-bottom:-6px}.tc{height:62px;padding:7px 9px}.tv{font-size:12px}.tr{font-size:10.5px}.tgrid{gap:6px}}

/* composer */
.ask{width:min(560px,100%);display:grid;gap:10px}
.card{--lh:1.5;display:grid;gap:2px;padding:11px 8px 8px 14px;background:#161512;border:1px solid rgba(241,240,235,.1);border-radius:16px;transition:border-color .25s,box-shadow .35s var(--ease)}
.card:focus-within{border-color:rgba(241,240,235,.22);box-shadow:0 0 0 4px rgba(255,61,46,.05)}
.card textarea{display:block;width:100%;margin:0;padding:1px 6px 0 0;resize:none;background:none;border:0;outline:0;font:400 15px/var(--lh) var(--ft);letter-spacing:0;color:var(--ink);
 min-height:calc(1em * var(--lh) + 2px);max-height:calc(5em * var(--lh) + 2px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(241,240,235,.2) transparent;transition:opacity .3s}
.card textarea::placeholder{color:rgba(241,240,235,.32);font-size:14px}
.row{display:flex;align-items:center;gap:6px;min-height:32px}
.count{font-size:11px;color:rgba(241,240,235,.32);opacity:0;transition:opacity .25s,color .2s;white-space:nowrap}

.count{margin-left:auto;font-variant-numeric:tabular-nums}.count b{font-weight:400}
.ask.typing .count,.ask.near .count{opacity:1}
.ask.full .count{color:var(--red);opacity:1}
.ib{flex:none;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:var(--red);color:var(--black);cursor:pointer;text-decoration:none;transition:background-color .2s,color .2s,transform .25s var(--ease),opacity .3s}
.ib svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.ib:hover{background:var(--paper)}
.ib:active{transform:scale(.92)}
.dice{background:none;color:rgba(241,240,235,.5)}
.dice:hover{background:rgba(241,240,235,.08);color:var(--ink)}
.dice .pip{fill:currentColor;stroke:none}
.dice svg{stroke-width:1.5}
.dice.rolling svg{animation:roll .7s var(--ease) infinite}
@keyframes roll{to{transform:rotate(360deg)}}
html.rm .dice.rolling svg{animation-duration:2.4s}
.hatch[data-state=rolling] .dice,.hatch[data-state=loading] .dice,.hatch[data-state=crack] .dice{opacity:.3;pointer-events:none}
.card textarea.typing-in{caret-color:transparent}
.go:hover .arrow{transform:translateY(-2px)}
.save:hover svg{transform:translateY(2px)}
.again{background:none;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(241,240,235,.3)}
.again:hover{background:var(--paper);color:var(--black);box-shadow:none}
.again:hover svg{transform:rotate(-40deg)}
.hatch[data-state=error] .again{background:var(--red);color:var(--black);box-shadow:none}
.hatch[data-state=error] .again:hover{background:var(--paper)}
.go:disabled{background:rgba(241,240,235,.09);color:rgba(241,240,235,.32);cursor:default;transform:none}
.go:disabled .arrow{transform:none}
.go .spin{display:none}
.hatch[data-state=rolling] .go .arrow,.hatch[data-state=loading] .go .arrow,.hatch[data-state=crack] .go .arrow{display:none}
.hatch[data-state=rolling] .go .spin,.hatch[data-state=loading] .go .spin,.hatch[data-state=crack] .go .spin{display:block;stroke-dasharray:14 50;animation:spin .9s linear infinite}
.hatch[data-state=rolling] .go:disabled,.hatch[data-state=loading] .go:disabled,.hatch[data-state=crack] .go:disabled{color:var(--ink)}
@keyframes spin{to{transform:rotate(360deg)}}
.ideas{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.ideas[hidden]{display:none}
.idea{padding:4px 10px;background:none;border:1px solid rgba(241,240,235,.12);border-radius:999px;font-size:12px;line-height:1.4;color:rgba(241,240,235,.5);cursor:pointer;transition:border-color .2s,color .2s}
.idea:hover{border-color:rgba(241,240,235,.36);color:var(--ink)}
.hatch[data-state=rolling] .card textarea,.hatch[data-state=loading] .card textarea{opacity:.5}

.note{min-height:1.4em;margin-top:-8px;font-size:12px;color:rgba(241,240,235,.5);text-align:center}
.note .n{display:none}
.hatch[data-state=loading] .n-wait,.hatch[data-state=done] .n-done,
.hatch[data-err=short] .n-short,.hatch[data-err=rate] .n-rate,.hatch[data-err=cap] .n-cap,.hatch[data-err=policy] .n-policy,.hatch[data-err=fail] .n-fail{display:inline}

/* loading: the egg rocks harder over time, cracks glow and spread, the light under it pulses */
.hatch[data-state=loading] .egg{animation:wob calc(2.4s - var(--amp,0) * 1s) var(--ease) infinite}
.hatch[data-state=loading] .nest::before{animation-duration:2.2s}
.hatch[data-state=loading] .cracks{opacity:1}
@keyframes wob{0%,46%,100%{transform:rotate(0)}8%{transform:rotate(calc(-2.5deg - var(--amp,0) * 4deg))}18%{transform:rotate(calc(2.5deg + var(--amp,0) * 4deg))}28%{transform:rotate(calc(-1.5deg - var(--amp,0) * 2.5deg))}36%{transform:rotate(calc(1deg + var(--amp,0) * 1.5deg))}}

/* crack → reveal: halves part, a burst of light, the Coco rises */
.hatch[data-state=crack] .egg{animation:none;filter:none}
.hatch[data-state=crack] .egg-whole,.hatch[data-state=crack] .sheen{visibility:hidden}
.hatch[data-state=crack] .egg-top,.hatch[data-state=crack] .egg-bot{visibility:visible}
.hatch[data-state=crack] .egg-top{transition-delay:.2s;transform:translate(-18%,-58%) rotate(-26deg);opacity:0}
.hatch[data-state=crack] .egg-bot{transition-delay:.26s;transform:translateY(22%);opacity:0}
.hatch[data-state=crack] .cracks{--p:1;opacity:0;transition:opacity .25s .2s}
.hatch[data-state=crack] .egg-ref{opacity:0}
.hatch[data-state=crack] .glow{animation:flash 1.1s .18s var(--ease) both}
@keyframes flash{0%{opacity:0;transform:scale(.3)}30%{opacity:1}100%{opacity:0;transform:scale(1.6)}}
.hatch[data-state=crack] .born{animation:rise 1s .36s var(--ease) both}
@keyframes rise{0%{opacity:0;transform:translateY(10%) scale(.6)}100%{opacity:1;transform:none}}
.hatch[data-state=done] .egg,.hatch[data-state=done] .egg-ref,.hatch[data-state=done] .glow{display:none}
.hatch[data-state=done] .nest::before{opacity:.5;animation:none}

/* error: the egg stays whole and dims */
.hatch[data-state=error] .egg{filter:brightness(.45) saturate(.4);animation:none}
.hatch[data-state=error] .cracks{opacity:.25}
.hatch[data-state=error] .sheen{animation:none;opacity:0}
.hatch[data-state=error] .nest::before{opacity:.15;animation:none}

@media (max-width:700px){
 .hatch{--eh:180px;--born:240px;--nest:262px;gap:18px;padding-top:calc(64px + 8px)}
 .hatch-h{font-size:32px}
 :lang(zh-CN) .hatch-h [data-l=zh]{font-size:26px}
}
@media (max-height:760px) and (min-width:701px){.hatch{--eh:200px;--born:260px;--nest:286px;gap:18px}}
html.rm .egg,html.rm .egg.land,html.rm .sheen,html.rm .nest::before{animation:none!important}
html.rm .c,html.rm .egg-top,html.rm .egg-bot{transition-duration:.01s!important}
html.rm .hatch[data-state=crack] .egg-top,html.rm .hatch[data-state=crack] .egg-bot{transform:none}
html.rm .hatch[data-state=crack] .glow{animation:none}
html.rm .hatch[data-state=crack] .born{animation:fade .4s both}
@keyframes fade{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.egg,.sheen,.nest::before{animation:none!important}}
.hatch[data-state=done] .luck{margin-top:-4px}

/* community feed: below the hatch area (which keeps its one-viewport fit), thin borders, one quiet line of prompt */
.feed{width:min(1080px,calc(100% - 2 * var(--m)));margin:8px auto 72px;scroll-margin-top:84px}
.feed[hidden]{display:none}
.feed .th{margin-bottom:12px}
.fgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:600px){.fgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){.fgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}}
@media (min-width:1200px){.fgrid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.fc button{all:unset;box-sizing:border-box;display:flex;flex-direction:column;width:100%;cursor:pointer;border:1px solid rgba(241,240,235,.1);border-radius:10px;overflow:hidden;background:rgba(18,18,17,.9);transition:border-color .2s,transform .3s var(--ease)}
.fc button:hover{border-color:rgba(241,240,235,.28)}
.fc button:focus-visible{outline:1px solid rgba(241,240,235,.7);outline-offset:2px}
.fc .fi{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:#151410}
.fc .fp{display:flex;gap:7px;align-items:flex-start;padding:8px 10px 9px;font-size:11.5px;line-height:1.4;color:rgba(241,240,235,.62);min-height:calc(2 * 1.4em + 17px)}
.fc .fp span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.fd{flex:none;width:6px;height:6px;margin-top:.45em;border-radius:50%;background:rgb(var(--c,241,240,235));box-shadow:0 0 6px rgba(var(--c,241,240,235),.5)}
.fsk .fi,.fsk .fp i{background:linear-gradient(100deg,#151410 30%,#1d1c18 50%,#151410 70%) 0 0/300% 100%;animation:sk 1.4s linear infinite}
.fsk .fp i{display:block;height:9px;border-radius:3px;width:80%;margin-top:3px}
.fsk div{border:1px solid rgba(241,240,235,.06);border-radius:10px;overflow:hidden}
@keyframes sk{to{background-position:-300% 0}}
html.rm .fsk .fi,html.rm .fsk .fp i{animation:none}
.fmore{height:1px}
/* lightbox */
.lb{padding:0;border:1px solid rgba(241,240,235,.12);border-radius:14px;background:#0f0e0c;color:#f1f0eb;max-width:min(980px,calc(100vw - 32px));max-height:calc(100svh - 32px);overflow:auto}
.lb::backdrop{background:rgba(5,5,4,.72);backdrop-filter:blur(4px)}
.lb[open]{animation:lbin .28s var(--ease)}
@keyframes lbin{from{opacity:0;transform:translateY(6px)}}
html.rm .lb[open]{animation:none}
.lb-in{display:flex;gap:24px;padding:20px}
.lb-img{margin:0;flex:none;width:min(460px,calc(100svh - 120px));aspect-ratio:1;border-radius:6px;overflow:hidden;background:#151410}
.lb-img img{width:100%;height:100%;object-fit:cover;display:block}
.lb-side{width:420px;display:flex;flex-direction:column;min-width:0}
.lb-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.lb-dot{width:7px;height:7px;border-radius:50%;background:rgb(var(--c,241,240,235))}
.lb-t{font-size:11px;letter-spacing:.06em;color:rgba(241,240,235,.45);margin-right:auto}
.lb-head .ib{width:30px;height:30px}
.lb-p{margin:0 0 16px;font-size:14px;line-height:1.5;color:rgba(241,240,235,.92);word-break:break-word}
.lb-p:empty{display:none}
.lb-tr{width:100%}
.lb-tr .tc{opacity:1;transform:none;transition:none}
@media (max-width:899px){
 .lb{width:calc(100vw - 20px);max-width:none;max-height:calc(100svh - 20px)}
 .lb-in{flex-direction:column;gap:14px;padding:12px}
 .lb-img{width:100%}
 .lb-side{width:100%}
 .lb-head{order:-1;margin:0}
}
.lb .ib{background:transparent;color:rgba(241,240,235,.75);box-shadow:inset 0 0 0 1px rgba(241,240,235,.16)}
.lb .ib:hover,.lb .ib:focus-visible{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(241,240,235,.45)}
.lb .ib svg{width:16px;height:16px;stroke-width:1.5}

/* copy prompt: icon only, always visible; swaps to a check for a moment */
.fc{position:relative}
.fc .fp{padding-right:34px}
.fc .fcp{all:unset;box-sizing:border-box;position:absolute;right:3px;bottom:3px;width:28px;height:28px;display:grid;place-items:center;border-radius:6px;color:rgba(241,240,235,.42);cursor:pointer;transition:color .2s,background-color .2s}
.fc .fcp:hover,.fc .fcp:focus-visible{color:#f1f0eb;background:rgba(241,240,235,.07)}
.fc .fcp:focus-visible{outline:1px solid rgba(241,240,235,.6)}
.fc .fcp svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cp .cp-ok{display:none}
.cp.ok .cp-a{display:none}.cp.ok .cp-ok{display:inline}
.cp.ok{color:#9be7b0!important}

/* sound toggle: a quiet speaker at the start of the composer row */
.snd{background:none;color:rgba(241,240,235,.5)}
.snd svg{width:16px;height:16px}
.snd:hover{background:rgba(241,240,235,.08);color:var(--ink)}
.snd .x{display:none}.snd.off .w{display:none}.snd.off .x{display:inline}
/* My hatches: a compact row of this browser's results under the composer */
.mine{width:min(560px,100%);display:flex;align-items:center;gap:12px;margin-top:-12px;min-width:0}
.mine[hidden]{display:none}
.mh{flex:none;font:500 10.5px/1 "Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:rgba(241,240,235,.42)}
.mrow{display:flex;gap:8px;margin:0;padding:2px;list-style:none;overflow-x:auto;scrollbar-width:none;min-width:0;overscroll-behavior-x:contain}
.mrow::-webkit-scrollbar{display:none}
.mrow li{flex:none}
.mt{position:relative;display:block;width:46px;height:46px;padding:0;border:1px solid rgba(241,240,235,.14);border-radius:6px;overflow:hidden;background:#151410;cursor:pointer;transition:border-color .2s,opacity .25s,transform .25s var(--ease)}
.mt img{display:block;width:100%;height:100%;object-fit:cover}
.mt .fd{position:absolute;right:4px;bottom:4px;margin:0;width:5px;height:5px}
.mt:hover{border-color:rgba(241,240,235,.4)}
.mt.on{border-color:rgba(241,240,235,.78)}
.mt:focus-visible{outline:1px solid var(--paper);outline-offset:2px}
.mine.busy .mt{opacity:.45;cursor:default}
.mine.busy .mt:hover{border-color:rgba(241,240,235,.14)}
.mrow li.pop .mt{animation:mpop .3s var(--ease)}
@keyframes mpop{40%{transform:scale(1.1)}}
/* hatch transition: the image flies into its thumbnail (FLIP), traits and luck fade, then the egg row slides in */
.fly{position:fixed;z-index:50;margin:0;object-fit:cover;pointer-events:none;transform-origin:50% 50%;border-radius:4px;will-change:transform}
.stage,.luck{transition:opacity .16s}
.stage.fade,.luck.fade{opacity:0}
.hatch.leaving .traits,.hatch.leaving .luck{opacity:0;transition:opacity .25s}
html.rm .hatch.leaving .born{opacity:0;transition:opacity .2s}
.nest.slidein{animation:slidein .38s var(--ease) both}
@keyframes slidein{from{opacity:0;transform:translateX(40px)}}
html.rm .nest.slidein{animation:none}
@media (max-width:599px){.mine{gap:10px}.mt{width:44px;height:44px}}

/* one quiet icon set: 24 grid, 1.5 stroke, round caps; secondary actions are ghost icons, Hatch (send) stays the one red primary */
.save{background:none;color:rgba(241,240,235,.5)}
.save:hover{background:rgba(241,240,235,.08);color:var(--ink)}
.again{background:none;color:rgba(241,240,235,.75);box-shadow:inset 0 0 0 1px rgba(241,240,235,.2)}
.again:hover{background:rgba(241,240,235,.08);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(241,240,235,.4)}
.go svg{stroke-width:1.75}
.mt.on{border-color:rgba(241,240,235,.85);box-shadow:0 0 0 2px rgba(241,240,235,.08)}
/* reactions: heart + foot in one translucent pill at the image corner */
.rx{display:inline-flex;align-items:center;gap:0;padding:0 2px;border-radius:999px}
.fc .rx{position:absolute;top:7px;right:7px;z-index:2;background:rgba(12,12,11,.52);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(241,240,235,.12)}
.rx .rb{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:3px;height:26px;min-width:26px;padding:0 6px;justify-content:center;border-radius:999px;color:rgba(241,240,235,.78);cursor:pointer;font:500 11px/1 "Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums;transition:color .2s,background-color .2s}
.rx .rb svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:fill .2s,stroke .2s}
.rx .rb b{font-weight:500}.rx .rb b:empty{display:none}
.rx .rb:hover{color:#fff;background:rgba(241,240,235,.08)}
.rx .rb:focus-visible{outline:1px solid rgba(241,240,235,.6)}
.rx .rb-like.on{color:#ff6b57}.rx .rb-like.on svg{fill:#ff6b57;stroke:#ff6b57}
.rx .rb-dislike.on{color:#cfb08c}.rx .rb-dislike.on svg{stroke:#cfb08c}.rx .rb-dislike.on .sole{fill:rgba(207,176,140,.85)}
.rx .rb-like.bump svg{animation:hpop .36s var(--ease)}
.rx .rb-dislike.bump svg{animation:squash .34s var(--ease);transform-origin:50% 100%}
@keyframes hpop{40%{transform:scale(1.28)}70%{transform:scale(.94)}}
@keyframes squash{35%{transform:translateY(1px) scale(1.12,.78)}70%{transform:scale(.97,1.04)}}
html.rm .rx .rb svg{animation:none!important}
.lb-rx{margin-right:2px;box-shadow:inset 0 0 0 1px rgba(241,240,235,.16);height:30px}
.lb-rx .rb{height:30px;padding:0 8px}
.lb-rx .rb svg{width:16px;height:16px}

/* compact reaction pill: [foot n][heart n], hugging its content; the hit area is an invisible pad, not visual size */
.rx{gap:2px;padding:0 2px}
.fc .rx{top:6px;right:6px}
.rx .rb{position:relative;height:22px;min-width:0;padding:0 5px;gap:2px;font-size:10.5px}
.rx .rb::after{content:"";position:absolute;inset:-7px -1px}
.rx .rb svg{width:14px;height:14px}
.lb-rx{height:30px;padding:0 3px}
.lb-rx .rb{height:24px;padding:0 6px}
.lb-rx .rb svg{width:14px;height:14px}
@media (pointer:coarse){.rx .rb::after{inset:-10px -4px}}