.hero-overlays {position:absolute;inset:0;z-index:3;pointer-events:none}
/* Phone presentation only: keep desktop placement and both live panels intact. */
@media (max-width:600px), (max-width:950px) and (max-height:600px) and (pointer:coarse) {
  .landing-page .hero > #recent-work {grid-column:1 / -1;grid-row:3;}
  .landing-page .hero > #account-generations {grid-column:1 / -1;grid-row:4;}
}
.hero-overlays > * {pointer-events:auto}
.hero .hero-action-panel {
  top:50%;bottom:auto;left:50%;right:auto;width:min(32rem,calc(100% - 1rem));transform:translate(-50%,-50%);
  padding:0;border:0;background:none;backdrop-filter:none;box-shadow:none;
}
.hero .hero-actions {grid-template-columns:repeat(2,minmax(0,1fr))}
.hero .primary-cta {
  background:rgba(0,0,0,.8);border-color:#ffffff40;color:#f2f2f2;
  box-shadow:none;backdrop-filter:none;
}
.hero .primary-cta:hover, .hero .primary-cta:focus-visible, .hero .primary-cta:active {
  background:rgba(0,0,0,.8);border-color:#ffffff80;box-shadow:none;
}
.hero .primary-cta:focus-visible {outline-color:#fff}
.hero .primary-cta svg {stroke:#ddd}
.hero .hero-action-panel > small {color:#ccc;text-shadow:0 1px 3px #000}
.recent-work.recent-work-compact {
  position:relative;grid-column:2;min-width:0;width:auto;margin:0;
  min-height:9rem;padding:.7rem .75rem;border:0;border-radius:.3rem;
  background:rgba(0,0,0,.8);backdrop-filter:blur(8px);
}
.recent-work-compact .recent-work-heading {align-items:center;padding:0 1.7rem .45rem;border:0}
.recent-work-title-row {display:flex;align-items:baseline;flex-wrap:wrap;gap:.65rem}
.recent-work-compact .recent-work-heading h2 {font-size:.85rem;letter-spacing:0;color:#eee}
.recent-work-title-row > span {font-size:.6rem;color:#999}
.recent-work-body {display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:.25rem;min-height:6rem}
#recent-work-view-all, #recent-gallery-close {
  border:1px solid #38536a;border-radius:.25rem;color:#cbe5fb;background:#0b1824;
  font:inherit;cursor:pointer;
}
#recent-work-view-all {justify-self:center;padding:.2rem .65rem;font-size:.7rem;white-space:nowrap;background:rgba(0,0,0,.8);border-color:#ffffff40;color:#eee}
#recent-work-view-all:hover, #recent-gallery-close:hover {border-color:#8ec8ff;background:#132b40}
#recent-work-view-all:focus-visible, #recent-gallery-close:focus-visible {outline:2px solid var(--blue-bright);outline-offset:3px}
.recent-work-compact .recent-work-carousel {display:grid;grid-template-columns:1.3rem minmax(0,1fr) 1.3rem;align-items:center;column-gap:.4rem;margin-top:0;border:0;background:none}
.recent-work-compact .recent-work-list {grid-column:2;grid-row:1}
.recent-work-compact .recent-work-list[data-carousel="true"] {gap:.4rem;padding:.25rem 0;scroll-padding-inline:0;scrollbar-width:auto;scrollbar-color:#697582 #151a20}
.recent-work-compact .recent-work-list:focus-visible {outline:1px solid #8ca1b4;outline-offset:2px}
/* Native dragging/trackpad/touch. A 16px track contains an 8px visible thumb. */
@supports selector(::-webkit-scrollbar) {
  .recent-work-compact .recent-work-list[data-carousel="true"] {scrollbar-color:auto}
  .recent-work-compact .recent-work-list[data-carousel="true"]::-webkit-scrollbar {display:block;height:16px}
  .recent-work-compact .recent-work-list[data-carousel="true"]::-webkit-scrollbar-track {background:#151a20;border:4px solid transparent;background-clip:padding-box;border-radius:10px}
  .recent-work-compact .recent-work-list[data-carousel="true"]::-webkit-scrollbar-thumb {background:#697582;border:4px solid transparent;background-clip:padding-box;border-radius:10px}
  .recent-work-compact .recent-work-list[data-carousel="true"]::-webkit-scrollbar-thumb:hover {background-color:#99a7b5}
}
.recent-work-compact .recent-work-state {grid-template-columns:minmax(0,1fr);grid-template-rows:auto;gap:0;padding:.35rem 0}
.recent-work-compact .recent-work-state h3 {margin:0;font-size:.75rem;color:#d5d5d5}
.recent-work-compact .recent-work-state p {display:block;margin:.4rem 0 0;color:#999;font-size:.7rem;line-height:1.45}
.recent-work-compact .recent-work-state > small,
.recent-work-compact .recent-work-mark {display:none}
.recent-work-compact .recent-project {position:relative;flex:0 0 9rem;padding:0;gap:0}
.recent-work-compact .recent-work-preview {aspect-ratio:4/3;border-bottom:0}
.recent-work-compact .recent-project-info {display:contents}
.recent-work-compact .recent-project-copy {display:none}
.recent-work-compact .recent-project-remove {position:absolute;right:.3rem;bottom:.3rem;z-index:2;width:1.4rem;height:1.4rem;background:#000c}
.recent-work-compact .recent-project-remove svg {width:.75rem;height:.75rem}
.recent-work-compact .recent-project .recent-project-notice:not([hidden]) {display:block;font-size:.65rem}
.recent-work-compact .recent-project-reopen {inset:0;display:flex;align-items:center;justify-content:center;min-height:0;padding:.4rem;border:0;font-size:.6rem;transform:none;pointer-events:auto}
.recent-work-compact .recent-work-nav {position:static;grid-row:1;transform:none;width:1.3rem;height:2.5rem;border:0;border-radius:.3rem;color:#dce6ef;background:#ffffff08;box-shadow:none}
.recent-work-compact .recent-work-nav svg {display:block;width:.6rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.recent-work-compact .recent-work-nav:hover:not(:disabled) {background:#ffffff15;color:#fff}
.recent-work-compact .recent-work-nav:disabled {opacity:.25;cursor:default}
.recent-work-compact .recent-work-nav:focus-visible {outline:2px solid var(--blue-bright);outline-offset:3px}
.recent-work-compact .recent-work-nav[data-direction="previous"] {grid-column:1}
.recent-work-compact .recent-work-nav[data-direction="next"] {grid-column:3}
#recent-work-view-all:hover, #recent-work-view-all:focus-visible {background:rgba(0,0,0,.8);border-color:#ffffff80}
#recent-work-view-all:focus-visible {outline-color:#fff}

.recent-gallery-dialog {
  width:min(92vw,84rem);height:min(86dvh,56rem);max-width:none;max-height:none;
  margin:auto;padding:1.25rem;border:1px solid #496078;border-radius:.65rem;
  color:#e5eff8;background:rgba(0,0,0,.8);backdrop-filter:blur(18px);
  box-shadow:0 1.5rem 5rem #0008;overflow:hidden;
}
.recent-gallery-dialog[open] {display:grid;grid-template-rows:auto minmax(0,1fr);gap:1rem}
.recent-gallery-dialog::backdrop {background:rgba(0,0,0,.35);backdrop-filter:blur(10px)}
body:has(.recent-gallery-dialog[open]) {overflow:hidden}
.recent-gallery-heading {display:flex;align-items:start;justify-content:space-between;gap:1rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.recent-gallery-heading h2 {margin:0 0 .35rem;font-size:1.4rem}
.recent-gallery-heading p {margin:0;color:#a6b8c8;font-size:.85rem}
#recent-gallery-close {flex:none;width:2.25rem;height:2.25rem;font-size:1.5rem;line-height:1}
/* Keep full-height thumbnail rows as the collection grows; scroll the grid. */
.recent-gallery-list {display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));grid-auto-rows:max-content;align-content:start;align-items:start;gap:1rem;min-height:0;overflow-x:hidden;overflow-y:scroll;scrollbar-gutter:stable;overscroll-behavior:contain;padding:.25rem .4rem .5rem .25rem}
.landing-page .recent-gallery-list article.recent-project {min-width:0;padding:0;gap:0;background:transparent}
.recent-gallery-list .recent-work-preview {aspect-ratio:16/10}
.landing-page .recent-gallery-list .recent-project .recent-project-info {grid-template-columns:minmax(0,1fr);gap:0;padding:.2rem .8rem;background:rgb(0 0 0 / 80%);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.recent-gallery-list .recent-project h3 {display:none}
.landing-page .recent-gallery-list .recent-project p {margin:0;font-size:.75rem;line-height:1.4;color:#fff}
.recent-gallery-list .recent-project .recent-project-reopen {
  inset:0;display:flex;align-items:flex-end;justify-content:center;min-height:0;
  padding:.8rem;transform:none;opacity:1;pointer-events:auto;border:0;
  background:linear-gradient(0deg,#000b,transparent 40%);font-size:.7rem;
}
.recent-gallery-list .recent-project .recent-project-reopen:hover {background:linear-gradient(0deg,#071f35dd,transparent 65%)}
.recent-gallery-list .recent-project .recent-project-reopen:focus-visible {outline-offset:-3px}
.recent-gallery-state {grid-column:1/-1;align-self:center;text-align:center;padding:clamp(2rem,10vh,6rem) 1rem}
.recent-gallery-state h3 {margin:0 0 .7rem;font-size:1.15rem}
.recent-gallery-state p {max-width:32rem;margin:0 auto;color:#9daebd;line-height:1.5}
@media(max-width:42rem) {
  .recent-gallery-dialog {width:94vw;height:90dvh;padding:.85rem}
  .recent-gallery-heading h2 {font-size:1.15rem}
  .recent-gallery-heading p {font-size:.75rem}
}