:root{--bg:#fafaf7;--fg:#222924;--muted:#5e655d;--line:#e7e9e1;--accent:#435c48;--surface:#fff;--thought:#f5f7f2;--lilac:#e5deff;--peach:#f3dfd0;--butter:#f7edc4;--mint:#d8eee4;--sky:#dce8fb;--rose:#f1dfe5;--card-line:rgba(36,42,36,.06)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.5 Inter,system-ui,sans-serif}button,input{font:inherit;color:inherit}button{cursor:pointer}a{color:inherit}*:focus-visible{outline:3px solid var(--accent);outline-offset:3px}button:focus:not(:focus-visible){outline:none}
.shell{max-width:1200px;margin:auto;padding:0 16px}
.top{height:58px;background:var(--bg);border-bottom:1px solid var(--line)}
.top .shell{height:100%;display:flex;align-items:center;justify-content:space-between}
.logo{font-size:19px;font-weight:800;letter-spacing:-.04em;text-decoration:none}.logo i{font:italic 22px "Instrument Serif",Georgia,serif}
.nav{display:flex;align-items:center;gap:22px}.nav button{border:0;background:none;padding:7px 0;font-size:14px;color:var(--muted)}.nav button:hover{color:var(--fg)}
.hero{padding:40px 0 20px}.hero h1{font-size:clamp(36px,5vw,56px);letter-spacing:-.05em;line-height:1.04;margin:0;font-weight:800}.hero h1 em{font:italic 1em "Instrument Serif",Georgia,serif;letter-spacing:-.01em}.hero p{margin:13px 0 0;color:var(--muted)}
.controls{position:sticky;top:0;z-index:20;padding:12px 0;background:var(--bg);border-bottom:1px solid var(--line)}
.row1{display:flex;gap:10px;align-items:center}.search{flex:1;min-width:100px;position:relative}.search input{width:100%;height:44px;padding:0 40px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:14px}.search-icon{position:absolute;left:14px;top:12px;color:var(--muted)}.clear{position:absolute;right:8px;top:6px;width:30px;height:32px;border:0;background:none}
.segment{display:flex;padding:3px;border:1px solid var(--line);border-radius:12px;background:#fff}.segment button{border:0;background:none;border-radius:9px;font-size:13px;padding:7px 11px;color:var(--muted)}.segment button[aria-pressed=true]{background:var(--fg);color:var(--bg)}
.surprise{height:44px;border:1px solid var(--line);background:#fff;border-radius:12px;padding:0 14px;white-space:nowrap}
.chips{display:flex;gap:8px;overflow:auto;scrollbar-width:none;padding:10px 0 2px}.chips::-webkit-scrollbar{display:none}.chip{flex:none;background:#fff;border:1px solid var(--line);border-radius:99px;padding:7px 12px;font-size:13px}.chip[aria-pressed=true]{background:var(--fg);border-color:var(--fg);color:var(--bg)}.chip small{font-size:11px;opacity:.7;margin-left:5px}
.status{font-size:12px;color:var(--muted);padding-top:6px}.status:empty{display:none}
main{padding:22px 0 24px;min-height:0;scroll-margin-top:150px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:16px;grid-auto-rows:1px;row-gap:0;grid-auto-flow:row dense;align-items:start}
.card{position:relative;align-self:start;padding:24px 25px 22px;border:1px solid var(--card-line);border-radius:16px;background:var(--card);display:flex;flex-direction:column;transition:box-shadow .14s,transform .14s}
.card:hover{transform:translateY(-2px);box-shadow:0 8px 18px #1f2f201b}
.cardtop{display:flex;min-height:34px;justify-content:space-between;align-items:start;gap:12px}
.tag{font-size:10.5px;letter-spacing:.14em;font-weight:800;text-transform:uppercase;padding-top:4px}
.heart{position:relative;z-index:2;width:34px;height:34px;margin:-5px -4px 0 0;border-radius:50%;border:1px solid #22302522;background:#ffffffb8;display:grid;place-items:center;font-size:23px;line-height:1}.heart[aria-pressed=true]{color:var(--fg)}
.core{padding-top:24px}.core h3{margin:0 0 13px;font-size:24px;line-height:1.15;letter-spacing:-.04em;font-weight:750;overflow-wrap:break-word}
.open{all:unset;cursor:pointer}.open:after{content:"";position:absolute;inset:0;border-radius:16px}.open:focus-visible:after{outline:3px solid var(--accent);outline-offset:3px}
.core p{font-size:14px;line-height:1.55;color:#435046;margin:0}.core .src{margin-top:12px;font-size:11px;line-height:1.45;color:var(--muted)}
.cardfoot{padding-top:18px;min-height:35px;display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:12px;font-weight:600}
.cardfoot .src{min-width:0;font-size:11px;font-weight:400;line-height:1.45;color:var(--muted)}
.go{margin-inline-start:auto;flex-shrink:0;opacity:0;transition:opacity .15s}.card:hover .go,.card:focus-within .go{opacity:1}.read{font-weight:500;color:var(--muted);font-size:11px}
.k0{--card:var(--lilac)}.k1{--card:var(--peach)}.k2{--card:var(--butter)}.k3{--card:var(--mint)}.k4{--card:var(--sky)}.k5{--card:var(--rose)}
.x{grid-column:1/-1;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;align-self:start}
.xhero{background:var(--card);padding:46px 52px 45px}.xbar{display:flex;justify-content:space-between;align-items:center;gap:12px}
.pill{border:0;border-radius:99px;background:#fff;padding:9px 15px;font-size:13px;font-weight:600}.xhero .tag{display:block;margin:20px 0 16px}
.xhero h2{font-size:clamp(33px,4.2vw,50px);font-weight:750;letter-spacing:-.04em;line-height:1.13;margin:0 0 14px}.xhero p{font-size:16px;line-height:1.65;max-width:650px;margin:0;color:#435046}
.xbody{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(190px,.8fr);gap:35px;padding:32px 52px 38px}
.xsec{padding:19px 0 25px;border-bottom:1px solid var(--line)}.xsec:last-child{border:0}.kicker{font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--muted)}
.xsec h3{font-size:23px;letter-spacing:-.035em;margin:10px 0;font-weight:700}.xsec p{font-size:14px;line-height:1.85;color:var(--muted);margin:0}.xsec a{color:var(--accent)}
.thought{position:sticky;top:165px;background:var(--thought);border-radius:14px;padding:24px;margin-top:18px}.thought p{font:22px/1.4 "Instrument Serif",Georgia,serif;margin:13px 0}
.more-head{grid-column:1/-1;padding:24px 0 17px}.more-head h2{font-size:26px;letter-spacing:-.04em;margin:0}
.zero{border:1px solid var(--line);border-radius:16px;padding:27px;background:white}.zero h2{font-size:22px}.zero button{border:0;background:none;color:var(--accent);text-decoration:underline;margin:8px 12px 8px 0}
.shelves{display:grid;gap:30px}.shelfhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.shelfhead h2{font-size:22px;margin:0}.track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}.track .card{flex:0 0 calc((100% - 32px)/3.25);scroll-snap-align:start}.track .core h3{font-size:24px}.shelfdetail{margin-top:16px}
.trailcrumb{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}.trailcrumb button{border:1px solid var(--line);background:white;border-radius:30px;padding:7px 12px;font-size:12px}
.trailcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}.trailcards .card h3{font-size:24px}.reason{font-size:12px!important;font-style:italic;margin-top:13px!important}
.loadline{font-size:12px;color:var(--muted);text-align:center;padding:20px}.no-results{grid-column:1/-1}
@media(hover:none){.go{opacity:1}}
@media(max-width:900px){.grid,.trailcards{grid-template-columns:repeat(2,minmax(0,1fr))}.track .card{flex-basis:45%}.xbody{grid-template-columns:1fr}}
@media(max-width:600px){.grid,.trailcards{grid-template-columns:1fr}.nav{display:none}.row1{flex-wrap:wrap}.search{flex-basis:100%}.xhero{padding:38px 22px 30px}.xbody{padding:18px 22px}.track .card{flex-basis:83%}.core h3{font-size:24px}}
@media(max-width:600px){}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Preview QA fixes: strictly contain horizontal shelf tracks. */
[hidden]{display:none!important}
.shelves{display:block;min-width:0;width:100%;max-width:100%}
.shelf{min-width:0;width:100%;max-width:100%;margin-bottom:32px}
.shelfhead{min-width:0;flex-wrap:wrap;gap:8px}
.track{display:flex;width:100%;max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain}
.track .card{min-width:0;max-width:none;flex-shrink:0}
#main{min-width:0}
@media(max-width:600px){.row1{min-width:0}.segment{max-width:100%}}

[hidden]{display:none!important}
.shelf{overflow:hidden;margin-bottom:24px}
.shelfhead{margin-bottom:10px}
.shelfdetail:empty{display:none}
.track{max-width:100%;overflow-x:auto;overflow-y:hidden}
.thought{align-self:start;height:max-content}
.xbody>aside{align-self:start}

/* Browse Lab loader: preserve original six-pastel glow and flat pulse skeleton. Only used for real asynchronous detail loads. */
:root{--skel:#efefea}
.curio-curate{position:fixed;left:0;right:0;bottom:0;height:240px;z-index:25;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s;display:flex;align-items:flex-end;justify-content:center;padding-bottom:calc(34px + env(safe-area-inset-bottom,0px))}
.curio-curate.on{opacity:1;visibility:visible}
.curio-curate:before{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--bg) 8%,color-mix(in srgb,var(--bg) 70%,transparent) 45%,transparent)}
.curio-curate:after{content:"";position:absolute;left:-10%;right:-10%;bottom:-70px;height:200px;background:linear-gradient(90deg,var(--lilac),var(--peach),var(--butter),var(--mint),var(--sky),var(--rose),var(--lilac));background-size:200% 100%;filter:blur(46px);opacity:.9;animation:curioGlow 3.2s linear infinite}
@keyframes curioGlow{from{background-position:0 0}to{background-position:200% 0}}
.curio-curate span{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:13px;font-weight:600;box-shadow:0 8px 24px -12px #202c2024}
.curio-curate svg{width:15px;height:15px;fill:var(--accent);animation:curioPulse 1.2s ease-in-out infinite}
.curio-curate b{font-weight:600}
@keyframes curioPulse{50%{transform:scale(.75) rotate(45deg);opacity:.6}}
.curio-skeleton{display:grid;gap:14px;padding:4px 0 18px}
.curio-skeleton-line{height:14px;border-radius:8px;background:var(--skel);animation:curioSkel 1.6s ease-in-out infinite}
.curio-skeleton-line.h{height:25px;margin:8px 0}
@keyframes curioSkel{50%{opacity:.6}}
@media(prefers-reduced-motion:reduce){.curio-curate,.curio-curate:after,.curio-curate svg,.curio-skeleton-line{animation:none!important;transition:none!important}}

/* Visual QA pass — one consistent spacing rhythm, no redesign of approved visuals.
   Card tokens remain from the signed-off Browse Lab handoff. */
:root{--space-1:8px;--space-2:12px;--space-3:16px;--space-4:24px;--space-5:32px}
.top .shell{min-width:0}
.logo{display:inline-flex;align-items:baseline;white-space:nowrap}
.hero{padding-top:40px;padding-bottom:20px}
.hero p{max-width:60ch;line-height:1.65}
.controls .shell{min-width:0}
.row1{min-width:0;align-items:center}
.search-icon{display:flex;align-items:center;justify-content:center;top:12px;height:20px;width:20px}
.search input{padding-left:44px}
.surprise{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.surprise svg{flex:none}
#chipwrap:empty{display:none}
.chips{align-items:center}
.status{line-height:1.35}
#main{padding-top:22px}
.card{padding:24px 25px 22px;min-width:0}
.cardtop{min-height:34px}
.core{padding-top:24px}
.cardfoot{padding-top:18px}
.xhero{padding:46px 52px 45px}
.xhero .tag{margin:20px 0 16px}
.xbody{grid-template-columns:minmax(0,1.65fr) minmax(0,.8fr);gap:35px;padding:32px 52px 38px;align-items:start}
.xbody #detail-content{min-width:0}
.xbody>aside{align-self:start;min-width:0}
.xsec{padding:22px 0 26px}
.xsec:first-child{padding-top:0}
.xsec:last-child{padding-bottom:0}
.xsec h3{line-height:1.2;margin-top:10px;margin-bottom:12px}
.xsec p{max-width:66ch}
.xsec p+p{margin-top:10px}
.thought{margin-top:0;position:sticky;top:165px;padding:24px}
.thought p{margin:13px 0 0}
.more-head{padding-top:32px;padding-bottom:17px}
.more-head h2{line-height:1.25}
.shelves{display:block}
.shelf{margin-bottom:28px}
.shelfhead{margin-bottom:12px;gap:12px}
.shelfhead h2{line-height:1.3}
.shelfhead button{border:0;background:none;font:600 13px Inter,system-ui,sans-serif;color:var(--accent)}
.track{align-items:flex-start;gap:16px;scroll-padding-inline:0}
.track .card{scroll-snap-align:start}
.shelfdetail{margin-top:16px}
.shelfdetail:empty{margin:0}
.trailcrumb{align-items:center}
.trailcards{margin-top:18px}
.trailcards .card{height:auto}
.zero{padding:28px}
.zero p{color:var(--muted);line-height:1.65}
@media(max-width:900px){
 .xhero{padding:38px 32px 34px}
 .xbody{padding:28px 32px 34px;gap:22px}
 .xbody>aside{padding-top:0}
 .thought{position:static}
 .more-head{padding-top:26px}
}
@media(max-width:600px){
 .top .shell{gap:12px}
 .hero{padding:28px 0 18px}
 .hero p{line-height:1.55}
 .controls{padding:10px 0}
 .row1{gap:8px}
 .search{flex-basis:100%}
 .segment{flex:1;justify-content:space-between}
 .segment button{flex:1;min-height:38px}
 .surprise{padding:0 12px;min-height:44px}
 .chips{padding-top:10px;padding-bottom:2px}
 #main{padding-top:16px}
 .card{padding:24px 22px 22px}
 .core{padding-top:24px}
 .xhero{padding:30px 24px 30px}
 .xhero .tag{margin:22px 0 14px}
 .xhero h2{font-size:clamp(33px,9vw,42px)}
 .xbody{padding:18px 24px 28px;gap:16px}
 .xsec{padding:20px 0 24px}
 .xsec h3{font-size:22px}
 .thought{padding:22px}
 .more-head{padding-top:24px;padding-bottom:14px}
 .shelf{margin-bottom:24px}
 .track{gap:16px}
}


/* Visual QA polish — one spacing system across Browse v2 (preview only).
   Preserve existing colors, typography, 1200px shell and masonry JS row sizing. */
:root{--page-gutter:32px;--wall-gap:16px}
html{scroll-padding-top:156px}
/* #133: the sticky search sits inside this padding, so while it had focus every keystroke made the browser scroll the page to "reveal" it and the visible cards shifted. Drop the padding only while the header has focus. */
html:has(.controls :focus){scroll-padding-top:0}
body{overflow-x:clip}
.shell{width:100%;padding-left:var(--page-gutter);padding-right:var(--page-gutter)}
.hero.shell{padding:40px var(--page-gutter) 26px}
.hero p{max-width:690px;line-height:1.6}
.controls{padding:12px 0 11px}
.controls .shell{min-width:0}
.row1{min-width:0}
.search{min-width:0}
.search input{padding-left:44px;padding-right:42px}
.search-icon{pointer-events:none}
.chips{padding:12px 0 4px;scroll-padding-inline:8px}
.status:not(:empty){padding-top:9px}
main.shell{padding:24px var(--page-gutter) 24px}
.grid{column-gap:var(--wall-gap)}
.card{min-width:0;max-width:100%;padding:24px;overflow-wrap:anywhere}
.cardtop{gap:10px}
.core{padding-top:20px}
.core h3{margin-bottom:12px}
.cardfoot{padding-top:20px}
.x{min-width:0}
.xhero{padding:44px 48px 40px}
.xbar{flex-wrap:wrap}
.xbody{grid-template-columns:minmax(0,1.65fr) minmax(0,.8fr);gap:36px;padding:30px 48px 42px}
.xbody>*{min-width:0}
.xsec{padding:22px 0 26px}
.thought{top:170px;max-width:100%;overflow-wrap:anywhere}
.more-head{padding:26px 0 16px}
.shelves{min-width:0}
.shelfhead h2{font-size:21px;line-height:1.25}
.track{gap:var(--wall-gap);scroll-padding-left:2px}
.track .card{align-self:stretch}
.trailcards{gap:var(--wall-gap)}
.trailcrumb{row-gap:10px}
#about.shell{padding:40px var(--page-gutter) 60px!important;scroll-margin-top:155px}
#about h2{line-height:1.2}
#about p{max-width:650px;line-height:1.65}
@media(max-width:900px){
 :root{--page-gutter:24px}
 .xhero{padding:36px 32px}
 .xbody{padding:24px 32px 34px;gap:14px}
 .thought{position:static;margin-top:12px}
}
@media(max-width:600px){
 :root{--page-gutter:16px}
 html{scroll-padding-top:170px}
 .top .shell{gap:12px}
 .hero.shell{padding:30px var(--page-gutter) 23px}
 .hero h1{font-size:clamp(34px,9vw,45px);line-height:1.1}
 .hero p{font-size:14px;margin-top:12px}
 .controls{padding:10px 0}
 .row1{gap:8px}
 .search{flex-basis:100%}
 .segment{min-width:0;flex:1;justify-content:space-between}
 .segment button{padding:8px 10px;min-width:0}
 .surprise{height:40px;padding:0 11px;font-size:12px}
 .chips{padding:10px 0 3px}
 .chip{padding:8px 12px}
 main.shell{padding:18px var(--page-gutter) 24px}
 .card{padding:21px 20px}
 .core{padding-top:16px}
 .core h3{font-size:24px}
 .xhero{padding:28px 22px 29px}
 .xhero h2{font-size:clamp(30px,8vw,40px)}
 .xhero p{font-size:15px}
 .xbody{padding:16px 22px 30px}
 .xsec{padding:19px 0 23px}
 .xsec h3{font-size:21px}
 .thought{padding:20px}
 .thought p{font-size:21px}
 .more-head{padding:24px 0 14px}
 .more-head h2{font-size:24px}
 .shelfhead{align-items:start}
 .shelfhead h2{font-size:21px}
 .track .card{flex-basis:min(83%,330px)}
 .zero{padding:24px 20px}
 #about.shell{padding:34px var(--page-gutter) 48px!important}
}
@media(max-width:360px){
 .segment button{font-size:12px;padding:8px 7px}
 .surprise{padding:0 8px}
 
}

/* Expanded finding source: quiet, available on hover and keyboard focus. */
.xhero .visit-source{display:inline-flex;align-items:center;margin-top:14px;font-size:13px;font-weight:650;color:var(--fg);text-decoration:underline;text-underline-offset:3px;opacity:.65;transition:opacity .15s}
.xhero:hover .visit-source,.xhero .visit-source:focus-visible{opacity:1}
.board-heading{margin:10px 0 22px}.board-heading h1{font-size:clamp(30px,4vw,44px);letter-spacing:-.045em;line-height:1.15;margin:0}.board-heading span{font-size:.5em;color:var(--muted);font-weight:500}


/* Compact, equal-width layout switch: Wall / Trail. */
.segment{display:inline-grid;grid-template-columns:repeat(2,minmax(68px,1fr));align-items:stretch;gap:3px;padding:4px;border-radius:12px;flex:none}
.segment button{display:flex;align-items:center;justify-content:center;min-height:36px;padding:8px 16px;line-height:20px;white-space:nowrap;text-align:center;border-radius:8px}
@media(max-width:600px){
 .segment{flex:0 0 auto;grid-template-columns:repeat(2,minmax(62px,1fr));padding:3px}
 .segment button{flex:initial;min-height:36px;padding:8px 10px}
}

/* Visit source is an unobtrusive affordance, not persistent copy.
   Only finding ideas receive the anchor; preserve keyboard and touch access. */
.xhero .visit-source{opacity:0;visibility:hidden;transition:opacity .15s ease,visibility .15s ease}
.xhero:hover .visit-source,
.xhero:focus-within .visit-source,
.xhero .visit-source:focus-visible{opacity:1;visibility:visible}
@media(hover:none){.xhero .visit-source{opacity:1;visibility:visible}}


/* Browse Lab visual parity: missing tokens and interaction finish only.
   No content, layout mode, navigation or loading-timing changes. */
:root{
 --chip:var(--surface);
 --body:#435046;
 --follow:#f1f2ec;
 --heart-bg:rgba(255,255,255,.72);
 --heart-line:rgba(34,48,37,.13);
 --shade:rgba(32,44,32,.14);
 --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
 --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
 --radius-card:16px;
 --radius-detail:22px;
}
body{font-family:var(--sans);-webkit-font-smoothing:antialiased}
.card{border-radius:var(--radius-card);transition:transform .18s ease,box-shadow .18s ease}
.card:hover{box-shadow:0 8px 18px var(--shade)}
.heart{border-color:var(--heart-line);background:var(--heart-bg);transition:transform .15s ease}
.heart:hover{transform:scale(1.08)}
.card .core p,.xhero p{color:var(--body)}
.x{border-radius:var(--radius-detail)}
.thought p{font-family:var(--serif);font-size:20px;line-height:1.35}
.segment{gap:3px;padding:3px}
.segment button{font-weight:500;font-size:13.5px}
.segment button[aria-pressed=true]{font-weight:600}
.segment button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.chip{background:var(--chip);padding:6px 12px}
.pill{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:8px 15px;line-height:20px}
.trailcrumb button{min-height:30px;display:inline-flex;align-items:center}
.xsec a{text-underline-offset:3px}
@media(hover:none){.card .go{opacity:1}}
@media(max-width:600px){
 .segment{padding:3px}
 .segment button{font-size:13px;min-height:38px}
 .pill{min-height:40px}
}
@media(prefers-reduced-motion:reduce){
 .card,.heart,.segment button,.visit-source{transition:none!important}
}

/* Avoid browser scroll anchoring fighting Wall / Trail content replacement. */
#main{overflow-anchor:none}
.segment button:focus:not(:focus-visible){outline:none;box-shadow:none}

/* Browse Lab visual language: progressive 50-card discovery transition. */
.curio-batch-loader{max-width:760px;margin:8px auto 20px;padding:22px 16px 24px;position:relative;overflow:hidden;text-align:center;border-radius:18px;background:var(--surface);border:1px solid var(--line)}
.curio-batch-loader:before{content:"";position:absolute;inset:auto -10% -40px;height:75px;background:linear-gradient(90deg,var(--lilac),var(--peach),var(--butter),var(--mint),var(--sky),var(--rose));filter:blur(30px);opacity:.7}
.curio-batch-spark{font-size:22px;color:var(--accent);animation:curioPulse 1.3s ease-in-out infinite}
.curio-batch-loader p{position:relative;font-size:13px;font-weight:600;color:var(--fg);margin:6px auto 14px}
.curio-batch-skeleton{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;position:relative}
.curio-batch-skeleton i{height:44px;border-radius:12px;background:var(--skel);animation:curioSkel 1.2s ease-in-out infinite}
.curio-batch-skeleton i:nth-child(2){animation-delay:.16s}.curio-batch-skeleton i:nth-child(3){animation-delay:.32s}
@media(prefers-reduced-motion:reduce){.curio-batch-spark,.curio-batch-skeleton i{animation:none}}


/* Loading is a visual transition, not a claim of AI processing. */
.curio-wall-placeholder{min-width:0;border-radius:16px;background:var(--skel,#eee);position:relative;overflow:hidden;animation:curioPlaceholderPulse 1.5s ease-in-out infinite}
.curio-wall-placeholder:nth-child(3n+2){animation-delay:.2s}.curio-wall-placeholder:nth-child(3n){animation-delay:.4s}
@keyframes curioPlaceholderPulse{0%,100%{opacity:.65}50%{opacity:1}}
.loadline{min-height:48px;border:0;background:transparent;padding:14px 16px 22px}
@media(prefers-reduced-motion:reduce){.curio-wall-placeholder{animation:none}}

/* Visually separate the article from its endless discovery feed. */
#wallgrid>.more-head h2{font-size:25px}

.curio-end-note{padding:20px 8px 26px;text-align:center;color:var(--muted)}
.curio-end-note p{font-size:13px;margin:0 0 8px}
.curio-end-note strong{font-size:12px;font-weight:650;color:var(--fg)}

/* Keep the end state close to the last cards and the About section. */
.curio-end-note{padding:16px 8px 20px}
#about{padding:40px 0 60px;border-top:1px solid var(--line);color:var(--muted);scroll-margin-top:80px}
#about h2{color:var(--fg);font-size:25px}
#about p{max-width:720px;line-height:1.65}

/* Detail headings are focused programmatically for accessibility; no visible title frame. */
#open-title:focus{outline:none}

/* Source action: visible on every sourced idea, never hidden behind hover. */
.xhero{position:relative}
.xhero .visit-source,.xhero:hover .visit-source,.xhero:focus-within .visit-source{
  position:absolute;right:48px;bottom:40px;margin:0;display:inline-flex;
  align-items:center;gap:6px;opacity:1;visibility:visible;
  font-size:14px;font-weight:650;text-decoration:none;color:var(--fg);
  transition:none;
}
.xhero .visit-source:hover{text-decoration:underline;text-underline-offset:4px}
.xhero:has(.visit-source)>p{padding-right:185px}
@media(max-width:600px){
  .xhero .visit-source,.xhero:hover .visit-source,.xhero:focus-within .visit-source{
    position:static;margin-top:20px
  }
  .xhero:has(.visit-source)>p{padding-right:0}
}

/* Grid-row spans must include the full section height. Avoid margins outside masonry tracks. */
#wallgrid>.more-head h2{margin:0;line-height:1.25}

/* Bottom ambient glow accompanies real batch loading; no artificial AI claim. */
.curio-curate.on:before{background:linear-gradient(to top,rgba(250,249,246,.72) 0%,rgba(250,249,246,.24) 55%,transparent 100%)}
.curio-curate.on:after{bottom:-42px;height:230px;opacity:.8;filter:blur(32px);background:linear-gradient(90deg,#d9f2df 0%,#e5ddff 25%,#f8dce8 50%,#f5e8b6 75%,#d9f2df 100%);background-size:200% 100%}

/* Keep the related feed heading close to its cards, without divider or inflated padding. */

/* Visit source follows the reference button treatment, visible without hover. */
.xhero .visit-source,.xhero:hover .visit-source,.xhero:focus-within .visit-source{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 18px;border-radius:13px;background:rgba(47,57,44,.09);
  color:var(--fg);font-size:14px;font-weight:650;text-decoration:none;
  opacity:1;visibility:visible;min-height:44px;
}
.xhero .visit-source:hover{background:rgba(47,57,44,.15);text-decoration:none}
.xhero .visit-source:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media(max-width:600px){.xhero .visit-source,.xhero:hover .visit-source,.xhero:focus-within .visit-source{margin-top:18px}}

/* Explicit ambient loading layer: must be visible in the full viewport during active loading. */
.curio-curate.on{display:flex;visibility:visible;opacity:1;z-index:40;isolation:isolate}
.curio-curate.on:before{z-index:-1;background:linear-gradient(to top,rgba(250,249,246,.82),transparent 78%)}
.curio-curate.on:after{
 z-index:-1;left:-5%;right:-5%;bottom:-85px;height:285px;opacity:.88;
 background:linear-gradient(90deg,#b8e8d0 0%,#d8caff 24%,#f2c7df 51%,#f5e2a8 77%,#b8e8d0 100%);
 background-size:200% 100%;filter:blur(46px);
}

/* Final balanced ambient gradient: visible only at viewport bottom during loading. */
.curio-curate{height:190px;overflow:visible}
.curio-curate.on{opacity:1;visibility:visible}
.curio-curate.on::before{z-index:0;background:linear-gradient(to top,rgba(250,250,247,.18),transparent 80%)}
.curio-curate.on::after{
  z-index:0;left:-3%;right:-3%;bottom:-72px;height:205px;
  opacity:.64;filter:blur(35px);
  background:linear-gradient(90deg,#bce8d3 0%,#d4c7fb 24%,#efc4da 51%,#f4e0a3 77%,#c6e3f7 100%);
  background-size:100% 100%;animation:none;
}
.curio-curate.on span{z-index:2;background:rgba(255,255,255,.94)}

/* One loading message only: keep in-feed label; hide duplicate floating pill. */
.curio-curate span,.curio-curate.on span{display:none!important}

/* Detail recommendation feed: preserve document order in masonry so cards never jump above its heading. */
#wallgrid:has(> .more-head){grid-auto-flow:row}
#wallgrid > .more-head{grid-column:1/-1;margin:0;padding:24px 0 16px;min-height:0;border:0;align-self:start;box-sizing:border-box}
#wallgrid > .more-head h2{margin:0;font-size:25px;line-height:1.25}
/* Similar thoughts: use established pastel design without random fallback. */
.curio-similar{margin:36px 0 32px;padding-top:24px;clear:both;text-align:left;position:relative}
/* Expanded-card feedback must end before recommendations begin, at every width. */
#main > .curio-similar{margin-top:48px}
@media(max-width:600px){.curio-similar{margin-top:32px;padding-top:16px}#main > .curio-similar{margin-top:36px}}
.curio-similar h2{font-size:23px;letter-spacing:-.035em;margin:0 0 7px}
.curio-similar>p{font-size:13px;color:var(--muted);margin:0 0 18px}
/* Similar thoughts uses the exact Wall card markup and the same responsive columns.
   Do not introduce a separate .curio-similar-card component. */
.curio-similar-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:16px;row-gap:16px;align-items:start}
.curio-similar-grid .card{width:100%}
@media(max-width:900px){.curio-similar-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.curio-similar-grid{grid-template-columns:1fr}}


/* Readable in-feed loading and end-of-results messages; no layout redesign. */
#loadline.loadline{font-size:16px;line-height:1.5;font-weight:500;}
@media(max-width:560px){#loadline.loadline{font-size:15px;}}

/* Calm zero-result continuation: no duplicate actions or error hero. */
.zero.no-results{border:0;background:transparent;padding:14px 0 20px;text-align:left}
.zero-kicker{margin:0;font-size:16px;font-weight:600;color:var(--fg);line-height:1.45}
.zero-description{margin:5px 0 0;font-size:14px;color:var(--muted);line-height:1.5}
.zero-results-intro{margin:14px 0 18px}
.zero-results-intro h2{margin:22px 0 0;font-size:20px;line-height:1.3;letter-spacing:-.025em}

/* Release 2 regression guard: one quiet in-feed loader, never a floating duplicate. */
#curioCurate,.curio-curate{display:none!important}
.curio-batch-loader{max-width:none;margin:8px 0 20px;padding:12px 0;border:0;border-radius:0;background:transparent;box-shadow:none}
.curio-batch-loader:before,.curio-batch-spark{display:none!important}
.curio-batch-loader p{font-weight:400;color:var(--muted);margin:0 0 10px}
.curio-batch-skeleton i{height:16px}

/* Restore approved ambient pastel gradient during genuine loading.
   Keep the floating pill and duplicate loading UI hidden. */
#curioCurate.curio-curate.on {
  display:block!important;
  height:132px;
  padding:0;
  pointer-events:none;
  opacity:1;
  visibility:visible;
  isolation:isolate;
}
#curioCurate.curio-curate.on::before { display:none; }
#curioCurate.curio-curate.on::after {
  content:"";
  display:block;
  position:absolute;
  z-index:0;
  left:50%;
  right:auto;
  width:min(560px,72vw);
  transform:translateX(-50%);
  bottom:-75px;
  height:170px;
  opacity:.62;
  filter:blur(36px);
  background:linear-gradient(90deg,#bce8d3 0%,#d4c7fb 24%,#efc4da 51%,#f4e0a3 77%,#c6e3f7 100%);
  background-size:100% 100%;
  animation:none;
}
#curioCurate.curio-curate span { display:none!important; }
@media(prefers-reduced-motion:reduce) {
  #curioCurate.curio-curate.on::after { animation:none!important; }
}

.card-feedback{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:20px 30px;border-top:1px solid var(--line,#dce2da);font-size:14px}
.card-feedback [role="status"]{flex-basis:100%;color:var(--muted,#56665b);font-size:13px;line-height:1.4}
.card-feedback[data-auth-unavailable="true"] [data-vote]{display:none}
.card-feedback[data-auth-unavailable="true"] [role="status"]{flex-basis:auto}
.card-feedback button{min-width:44px;min-height:44px;cursor:pointer}
.card-feedback button[aria-pressed="true"]{box-shadow:inset 0 0 0 2px currentColor}
.card-feedback button:disabled{opacity:.6;cursor:wait}
@media(max-width:600px){.card-feedback{padding:20px}}
/* Keep expanded reading content full-width on tablets and phones. */
@media(max-width:900px){.xbody{grid-template-columns:minmax(0,1fr)}.xbody .thought{position:static}}

.zero.no-results{max-width:100%;overflow-wrap:anywhere}
.loadline:empty{display:none}

/* Browsing-only fallback uses normal-height rows, not the masonry grid's
   1px implicit rows (which otherwise overlap footer/retry controls). */
.curio-search-fallback{margin:30px 0 24px;clear:both}
.curio-search-fallback h2{font-size:21px;letter-spacing:-.03em;margin:0 0 7px}
.curio-search-fallback>p{font-size:13px;color:var(--muted);margin:0 0 18px}

.feed-profile{position:relative;z-index:2;flex:none}
.feed-profile-panel button{cursor:pointer;color:var(--fg);font-size:14px}
.feed-profile summary{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;list-style:none;background:var(--accent);color:var(--surface);font-size:14px;font-weight:700;cursor:pointer}
.feed-profile summary:hover,.feed-profile[open] summary{background:var(--fg)}
.feed-profile-panel button:hover{background:var(--thought)}
.feed-profile summary::-webkit-details-marker{display:none}
.feed-profile-panel{position:absolute;right:0;top:calc(100% + 6px);width:min(190px,calc(100vw - 32px));display:grid;padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:0 8px 24px rgba(36,42,36,.12);font-size:14px}
.feed-profile-panel button{display:flex;align-items:center;gap:8px;border:0;background:transparent;text-align:left;border-radius:7px;padding:8px 9px}
.feed-profile-interest-row{border-top:1px solid var(--line)}
.feed-profile-interests-title{padding:8px 9px 4px;color:var(--muted)}
.feed-profile-toggle{display:flex;align-items:center;gap:8px;padding:8px 9px}
.feed-profile-toggle:hover{background:var(--thought);border-radius:7px}
.feed-profile-toggle{cursor:pointer}
.feed-profile-toggle input{accent-color:var(--accent)}

@media (hover: hover) and (pointer: fine) {
 .card:not(:hover):not(:focus-within) .heart {
  opacity:0;
  pointer-events:none;
 }
}

.cardtop{position:relative}
body:has([data-feed-down][aria-expanded="true"])::after{content:"";position:fixed;inset:0;z-index:2;background:transparent}
.card:has([data-feed-down][aria-expanded="true"]){z-index:3}
.feed-card-feedback{display:flex;flex:none;align-items:center;gap:7px}
.feed-card-down{margin-right:0;border-radius:12px;color:var(--muted)}
.feed-card-down[aria-expanded="true"]{opacity:1!important;pointer-events:auto!important;background:var(--surface)}
.feed-card-reasons{position:absolute;z-index:4;top:calc(100% + 4px);left:var(--feedback-left,0px);width:min(370px,calc(100vw - 24px));padding:20px 24px;border:1px solid rgba(255,255,255,.9);border-radius:16px;background:rgba(248,248,252,.9);backdrop-filter:blur(16px);box-shadow:0 8px 24px rgba(36,42,36,.12);font-size:13px}
.feed-card-reasons [role="group"]{display:flex;flex-wrap:wrap;gap:5px}
.feed-card-reasons button{padding:7px 12px;border:1px solid transparent;border-radius:999px;background:var(--surface);font-weight:600;text-align:left}
.feed-card-reasons button:hover{border-color:var(--heart-line)}
@media(max-width:400px){.feed-card-reasons{padding:14px}}
.feed-card-reasons button[aria-pressed="true"]{box-shadow:inset 0 0 0 2px currentColor}
.feed-card-reasons [role="status"]{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.feed-card-reasons [role="status"][data-error]{position:static;width:auto;height:auto;clip-path:none;margin-top:6px;color:var(--muted)}

/* Expanded cards share the feed reason overlay without moving surrounding content. */
.card-feedback.feed-card-feedback{position:relative;display:flex;flex-wrap:wrap}
.card-feedback .feed-card-reasons{top:auto;bottom:calc(100% + 4px)}
.x:has([data-feed-down][aria-expanded="true"]){position:relative;z-index:3}

/* Keep detail feedback beside Save, without a separate footer or status row. */
.xbar .card-feedback.feed-card-feedback{padding:0;border:0;gap:7px;flex-wrap:nowrap}
.xbar .card-feedback>[data-feed-up],.xbar .card-feedback>[data-feed-down]{width:34px;height:34px;min-width:34px;min-height:34px;margin:0;padding:0}
.xbar .card-feedback [aria-pressed="true"]{box-shadow:inset 0 0 0 1px currentColor}
.xbar .card-feedback>[role="status"]{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.xbar .card-feedback>[role="status"][data-error]{top:100%;right:0;width:max-content;max-width:240px;height:auto;clip-path:none;overflow:visible;background:var(--surface);padding:8px;border:1px solid var(--line);border-radius:8px;z-index:4}
.xbar .card-feedback .feed-card-reasons{top:calc(100% + 4px);bottom:auto}
.xbar .card-feedback .feed-card-reasons button{min-width:0;min-height:0}

#wallgrid > .more-thoughts-head{border-top:1px solid var(--line);padding-top:28px;margin-top:12px}

/* Feedback stays anchored to its own control group in feed and detail cards. */
.feed-card-feedback{position:relative}
.xbar .card-feedback .feed-card-reasons,.feed-card-feedback .feed-card-reasons{box-sizing:border-box;top:var(--feedback-top,calc(100% + 4px));bottom:auto;left:var(--feedback-left,0px);max-height:calc(100dvh - 24px);overflow:auto}
.feed-card-reasons button{max-width:100%;white-space:normal;overflow-wrap:anywhere}