/* Ethereal integration: inherit the active theme rather than styling the document. */
.showcase-ethereal {
  --theme-hue: var(--hue);
  --pink: var(--primary);
  --pink-deep: var(--primary);
  --accent-bg: var(--primary);
  --accent-text: var(--btn-content, #fff);
  --paper: var(--card-bg);
  --surface: var(--card-bg);
  --ink: var(--deep-text, currentColor);
  --muted: color-mix(in oklab, var(--deep-text) 65%, transparent);
  --soft: var(--btn-regular-bg);
  --accent-muted: var(--primary);
  --dialog-cover: var(--btn-regular-bg);
  --line: color-mix(in oklab, var(--primary) 14%, transparent);
  --shadow: none;
  color: var(--ink);
  font-family: inherit;
  min-width: 0;
}
.showcase-heading-icon { position: absolute; right: 1rem; top: 1rem; width: 7rem; color: var(--primary); opacity: .1; pointer-events: none; }
.showcase-ethereal .hero-copy, .showcase-ethereal .hero-stats { position: relative; }
.showcase-ethereal .showcase-card { min-width: 0; overflow: hidden; background: var(--card-bg); border-radius: var(--radius-large, 1rem); cursor: pointer; }
.showcase-ethereal .cover-frame { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--btn-regular-bg); }
.showcase-ethereal .cover-frame > img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-entry, 300ms); }
.showcase-ethereal .showcase-card:hover .cover-frame > img { transform: scale(1.035); }
.showcase-ethereal .card-badge, .showcase-ethereal .card-score, .showcase-ethereal .card-tags { position: absolute; z-index: 1; font-size: .7rem; }
.showcase-ethereal .card-badge { top: .65rem; left: .65rem; padding: .3rem .5rem; border-radius: .45rem; color: var(--primary); background: var(--card-bg); }
.showcase-ethereal .card-score { right: .65rem; padding: .3rem .45rem; border-radius: .45rem; background: var(--card-bg); color: var(--primary); }
.showcase-ethereal .card-tags { left: .65rem; right: .65rem; bottom: .65rem; display: flex; flex-wrap: wrap; gap: .25rem; }
.showcase-ethereal .card-tags b { padding: .2rem .45rem; border-radius: .4rem; background: color-mix(in oklab, var(--card-bg) 90%, transparent); color: var(--ink); font-weight: 500; }
.showcase-ethereal .card-tags { padding-right: 3rem; }
.showcase-ethereal .paw-button .text { display: flex; align-items: center; gap: .2rem; }
.showcase-ethereal .skip-link { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.showcase-ethereal .skip-link:focus { position: fixed; z-index: 200; top: 1rem; left: 1rem; width: auto; height: auto; clip: auto; padding: .7rem; background: var(--card-bg); border-radius: .5rem; color: var(--primary); }
.showcase-ethereal .comments-heading > p, .showcase-ethereal .detail-comments-heading > p { display: none; }
.showcase-ethereal .comments-heading h2, .showcase-ethereal .detail-comments-heading h3 { margin: 0 0 1rem; padding-left: .75rem; border-left: .25rem solid var(--primary); font-size: 1.1rem; font-weight: 700; }
.showcase-ethereal .card-copy { padding: 1rem; }
.showcase-ethereal .card-copy h2 { margin: 0 0 .5rem; font-size: 1rem; font-weight: 700; line-height: 1.5; }
.showcase-ethereal .card-copy p { margin: .4rem 0; color: var(--muted); font-size: .8rem; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.showcase-ethereal .list-card-category, .showcase-ethereal .list-card-meta, .showcase-ethereal .list-card-actions { display: none; }
.showcase-ethereal .card-body .impression { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.showcase-ethereal .card-meta, .showcase-ethereal .card-footer { display: flex; gap: .5rem; align-items: center; justify-content: space-between; color: var(--muted); font-size: .75rem; }
.showcase-ethereal .subcategory-section { margin: 1.5rem 0; }
.showcase-ethereal .subcategory-heading h2 { display: flex; gap: .5rem; align-items: center; margin: 0; font-size: 1.1rem; font-weight: 700; }
.showcase-ethereal .subcategory-heading p { margin: .4rem 0; color: var(--muted); font-size: .8rem; }
.showcase-ethereal[data-showcase-view="list"] .showcase-grid:not(.grouped-grid) { grid-template-columns: 1fr; }
.showcase-ethereal[data-showcase-view="list"] .showcase-card { display: grid; grid-template-columns: 6rem minmax(0, 1fr); }
.showcase-ethereal[data-showcase-view="list"] .cover-frame { aspect-ratio: auto; min-height: 9rem; }
.showcase-ethereal[data-showcase-view="list"] .card-tags, .showcase-ethereal[data-showcase-view="list"] .card-badge, .showcase-ethereal[data-showcase-view="list"] .card-score { display: none; }
.showcase-ethereal[data-showcase-view="list"] .list-card-category { display: block; color: var(--primary); font-size: .75rem; }
.showcase-ethereal[data-showcase-view="list"] .list-card-meta { display: flex; flex-wrap: wrap; gap: .3rem; font-size: .7rem; color: var(--muted); }
.showcase-ethereal .loading-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.showcase-ethereal .loading-grid i { height: 15rem; border-radius: var(--radius-large, 1rem); background: var(--card-bg); opacity: .65; }
.showcase-ethereal .detail-dialog-backdrop { position: fixed; inset: 0; z-index: 2000; background: #0007; backdrop-filter: blur(5px); }
.showcase-ethereal .detail-dialog { position: fixed; inset: 0; z-index: 2001; width: min(56rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; margin: auto; border: 0; border-radius: var(--radius-large, 1rem); background: var(--card-bg); color: var(--ink); overflow: auto; box-shadow: 0 1.5rem 5rem #0004; }
.showcase-ethereal .detail-dialog:not([open]) { display: none; }
.showcase-ethereal .dialog-layout { display: grid; grid-template-columns: minmax(0, 35%) minmax(0, 1fr); }
.showcase-ethereal .dialog-cover { background: var(--btn-regular-bg); }
.showcase-ethereal .dialog-cover img { display: block; width: 100%; height: 100%; max-height: 42rem; object-fit: cover; }
.showcase-ethereal .dialog-layout article { min-width: 0; padding: 2rem; max-height: calc(100dvh - 2rem); overflow: auto; overscroll-behavior: contain; }
.showcase-ethereal .dialog-layout h2 { margin: .5rem 0 1rem; font-size: 1.5rem; line-height: 1.4; font-weight: 800; }
.showcase-ethereal .dialog-close, .showcase-ethereal .external-confirm-close { position: absolute; right: .75rem; top: .75rem; z-index: 2; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: var(--btn-regular-bg); color: var(--primary); font-size: 1.5rem; cursor: pointer; }
.showcase-ethereal .dialog-category { color: var(--primary); font-size: .8rem; }
.showcase-ethereal .dialog-meta { display: flex; flex-wrap: wrap; gap: .4rem; }
.showcase-ethereal .dialog-meta span { padding: .3rem .55rem; background: var(--btn-regular-bg); border-radius: .4rem; font-size: .75rem; }
.showcase-ethereal .dialog-section { margin-top: 1.4rem; }
.showcase-ethereal .dialog-section h3 { margin: 0 0 .5rem; color: var(--primary); font-size: .85rem; font-weight: 700; }
.showcase-ethereal .dialog-section p { margin: 0; font-size: .9rem; line-height: 1.8; white-space: pre-line; overflow-wrap: anywhere; }
.showcase-ethereal .watch-button, .showcase-ethereal .external-link-card { display: flex; gap: .65rem; align-items: center; justify-content: center; margin-top: 1rem; padding: .7rem 1rem; border-radius: .7rem; background: var(--btn-regular-bg); color: var(--primary); text-decoration: none; font-size: .85rem; font-weight: 600; }
.showcase-ethereal .external-link-card small { display: block; margin-top: .25rem; font-weight: 400; }
.showcase-ethereal .external-confirm-dialog { position: fixed; inset: 0; margin: auto; width: min(28rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; padding: 1.5rem; border: 0; border-radius: var(--radius-large, 1rem); background: var(--card-bg); color: var(--ink); }
.showcase-ethereal .external-confirm-dialog::backdrop { background: #0007; backdrop-filter: blur(4px); }
.showcase-ethereal .external-confirm-card { position: relative; }
.showcase-ethereal .external-confirm-card h2 { margin: .5rem 0; font-size: 1.25rem; font-weight: 700; }
.showcase-ethereal .external-confirm-url { padding: .7rem; background: var(--btn-regular-bg); border-radius: .5rem; overflow-wrap: anywhere; font-size: .8rem; }
.showcase-ethereal .external-confirm-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
.showcase-ethereal .external-confirm-actions button { padding: .6rem 1rem; border: 0; border-radius: .5rem; background: var(--btn-regular-bg); color: var(--primary); cursor: pointer; }
.showcase-ethereal .showcase-comments, .showcase-ethereal .visitor-stats { margin-top: 1rem; padding: 1.5rem; background: var(--card-bg); border-radius: var(--radius-large, 1rem); }
.showcase-ethereal .detail-comments { margin-top: 1.5rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.showcase-ethereal .showcase-comment-widget, .showcase-ethereal .detail-comment-widget { --halo-cw-primary-1-color: var(--primary); --halo-cw-text-1-color: var(--ink); --halo-cw-text-2-color: var(--muted); --halo-cw-muted-1-color: var(--line); --halo-cw-muted-2-color: var(--btn-regular-bg); --halo-cw-base-font-family: inherit; }
.showcase-ethereal .paw-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.showcase-ethereal .paw-button { --background: var(--card-bg); --border: var(--primary); --background-active: var(--btn-regular-bg); --border-active: var(--primary); display: flex; gap: .25rem; align-items: center; border: 0; border-radius: .4rem; padding: .3rem .4rem; color: var(--primary); background: var(--btn-regular-bg); cursor: pointer; }
.showcase-ethereal .paw-button svg { width: 1rem; height: 1rem; }
.showcase-ethereal .paw-button .effect { display: none; }
.showcase-ethereal .paw-button { position: absolute; right: .5rem; bottom: .5rem; z-index: 2; font-size: .7rem; }
.showcase-ethereal .paw-button .paws, .showcase-ethereal .paw-confetti { display: none; }
.showcase-ethereal .steam-notice { grid-column: 1 / -1; padding: 1.5rem; background: var(--card-bg); border-radius: var(--radius-large, 1rem); }
.showcase-ethereal .steam-intro { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; padding: 1.5rem; }
.showcase-ethereal .steam-intro h2, .showcase-ethereal .steam-notice h2 { font-size: 1.1rem; font-weight: 700; margin: .4rem 0; }
.showcase-ethereal .steam-intro p, .showcase-ethereal .steam-notice p { color: var(--muted); font-size: .85rem; line-height: 1.7; }
.showcase-ethereal .steam-intro small, .showcase-ethereal .steam-intro a { color: var(--primary); font-size: .8rem; }
.showcase-ethereal .steam-card { display: block; min-width: 0; overflow: hidden; text-decoration: none; color: var(--ink); }
.showcase-ethereal .steam-cover { position: relative; aspect-ratio: 460 / 215; background: var(--btn-regular-bg); }
.showcase-ethereal .steam-cover img { width: 100%; height: 100%; object-fit: cover; }
.showcase-ethereal .steam-cover b { position: absolute; left: .75rem; bottom: .5rem; font-size: .65rem; padding: .2rem .4rem; background: var(--card-bg); color: var(--primary); border-radius: .4rem; }
.showcase-ethereal .steam-copy { padding: 1rem; }
.showcase-ethereal .steam-copy h2 { margin: 0 0 .75rem; font-size: 1rem; font-weight: 700; overflow-wrap: anywhere; }
.showcase-ethereal .steam-copy > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
.showcase-ethereal .steam-copy small { display: block; color: var(--muted); font-size: .7rem; }
.showcase-ethereal .steam-copy b { font-size: .8rem; font-weight: 500; }
.showcase-ethereal .visitor-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1rem; font-size: .8rem; color: var(--muted); }
.showcase-ethereal .visitor-stats b { color: var(--primary); }
.showcase-ethereal .visitor-stats i { display: none; }
.showcase-ethereal .custom-field-row { display: flex; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--line); font-size: .85rem; overflow-wrap: anywhere; }
.showcase-ethereal .custom-field-row b { color: var(--muted); min-width: 5rem; font-weight: 500; }
.showcase-ethereal .comment-loading, .showcase-ethereal .comment-unavailable { color: var(--muted); font-size: .85rem; line-height: 1.7; }
.showcase-ethereal .comment-unavailable strong { display: block; color: var(--ink); }
@media (min-width: 960px) {
  .showcase-theme-grid { grid-template-columns: 17.5rem minmax(0, 1fr); }
  .showcase-theme-sidebar-left { display: block; }
  .showcase-theme-grid[data-layout="two-column"][data-right-sidebar="true"] { grid-template-columns: minmax(0, 1fr) 17.5rem; }
  .showcase-theme-grid[data-layout="two-column"][data-right-sidebar="true"] .showcase-theme-sidebar-left { order: 2; }
}
@media (min-width: 1280px) {
  .showcase-theme-grid:not([data-layout="two-column"]) { grid-template-columns: 17.5rem minmax(0, 1fr) 17.5rem; }
  .showcase-theme-grid:not([data-layout="two-column"]) .showcase-theme-sidebar-right { display: block; }
}
.showcase-ethereal [hidden] { display: none !important; }
.showcase-ethereal *, .showcase-ethereal *::before, .showcase-ethereal *::after { box-sizing: border-box; }
.showcase-ethereal button, .showcase-ethereal input { font: inherit; }
.showcase-ethereal button, .showcase-ethereal a, .showcase-ethereal input { -webkit-tap-highlight-color: transparent; }
.showcase-ethereal :focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.showcase-ethereal .hero {
  position: relative;
  padding: 1.75rem;
  background: var(--card-bg);
  border-radius: var(--radius-large, 1rem);
  overflow: hidden;
}
.showcase-ethereal .eyebrow { margin: 0 0 .75rem; color: var(--primary); font-size: .75rem; font-weight: 700; letter-spacing: .12em; }
.showcase-ethereal #page-title { margin: 0; font-size: clamp(1.65rem, 3vw, 2.35rem); line-height: 1.25; font-weight: 800; }
.showcase-ethereal .subtitle { margin: .75rem 0 0; color: var(--muted); line-height: 1.8; }
.showcase-ethereal .hero-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 1.5rem; }
.showcase-ethereal .hero-stats > div { display: flex; align-items: baseline; gap: .4rem; }
.showcase-ethereal .hero-stats strong { color: var(--primary); font-size: 1.3rem; }
.showcase-ethereal .hero-stats span, .showcase-ethereal #owner-text { color: var(--muted); font-size: .8rem; }
.showcase-ethereal #owner-text { margin: 0; flex-basis: 100%; }
.showcase-ethereal .main-shell { margin-top: 1rem; min-width: 0; }
.showcase-ethereal .toolbar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; padding: 1rem; border-radius: var(--radius-large, 1rem); background: var(--card-bg); }
.showcase-ethereal .category-tabs { display: flex; flex-wrap: wrap; gap: .4rem; flex: 1 1 100%; }
.showcase-ethereal .category-tabs button, .showcase-ethereal .view-mode-toggle button { padding: .55rem .85rem; border: 0; border-radius: .65rem; color: var(--muted); background: transparent; cursor: pointer; transition: color var(--dur-entry, 300ms), background var(--dur-entry, 300ms); }
.showcase-ethereal .category-tabs button:hover, .showcase-ethereal .view-mode-toggle button:hover { color: var(--primary); background: var(--btn-regular-bg); }
.showcase-ethereal .category-tabs button.active, .showcase-ethereal .category-tabs button[aria-selected="true"], .showcase-ethereal .view-mode-toggle button[aria-pressed="true"] { color: var(--primary); background: var(--btn-regular-bg); font-weight: 700; }
.showcase-ethereal .toolbar-search { display: flex; flex-wrap: wrap; gap: .5rem; width: 100%; align-items: center; }
.showcase-ethereal .view-mode-toggle { display: flex; gap: .25rem; }
.showcase-ethereal .search-box { display: flex; gap: .5rem; align-items: center; flex: 1; min-width: 10rem; padding: .6rem .8rem; border-radius: .65rem; background: var(--btn-regular-bg); color: var(--primary); }
.showcase-ethereal .search-box input { width: 100%; min-width: 0; border: 0; outline: none; color: var(--ink); background: transparent; }
.showcase-ethereal .card-size-toggle { width: 2.5rem; height: 2.5rem; padding: .45rem; border: 0; border-radius: .65rem; color: var(--primary); background: var(--btn-regular-bg); cursor: pointer; }
.showcase-ethereal .card-size-toggle svg { width: 100%; height: 100%; fill: currentColor; }
.showcase-ethereal .showcase-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: 1rem; margin-top: 1rem; }
.showcase-ethereal .showcase-grid.grouped-grid { display: block; }
.showcase-ethereal[data-card-size="small"] .showcase-grid:not(.grouped-grid) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); }
.showcase-ethereal[data-card-size="largest"] .showcase-grid:not(.grouped-grid) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.showcase-ethereal[data-showcase-view="list"] .showcase-grid:not(.grouped-grid) { grid-template-columns: 1fr; }
.showcase-ethereal .subcategory-header, .showcase-ethereal .category-group-header { margin: 1.5rem 0 .5rem; color: var(--primary); font-size: 1.1rem; font-weight: 700; }
.showcase-ethereal .cover-placeholder { height: 100%; display: grid; place-content: center; color: var(--primary); font-size: 2rem; }
.showcase-ethereal .empty-state { padding: 3rem 1.5rem; margin-top: 1rem; text-align: center; color: var(--muted); background: var(--card-bg); border-radius: var(--radius-large, 1rem); }
.showcase-ethereal .empty-state h2 { margin: .75rem 0; color: var(--ink); font-size: 1.1rem; }
.showcase-ethereal .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 640px) {
  .showcase-ethereal .dialog-layout { display: block; }
  .showcase-ethereal .dialog-cover img { max-height: 15rem; object-fit: contain; }
  .showcase-ethereal .dialog-layout article { padding: 1.25rem; max-height: none; }
  .showcase-ethereal .detail-dialog { width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); }
  .showcase-ethereal .hero { padding: 1.25rem; }
  .showcase-ethereal .toolbar { padding: .75rem; }
  .showcase-ethereal .showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .showcase-ethereal .search-box { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .showcase-ethereal * { scroll-behavior: auto; animation: none !important; transition: none !important; } }