/* Shared by the standalone detail page and dynamically loaded detail drawers. */
.studio-page .detail-interactive {
  --surface-x: 50%; --surface-y: 20%; --surface-intensity: 0;
  --card-art-x: 0px; --card-art-y: 0px; --icon-x: 0px; --icon-y: 0px;
  position: relative; isolation: isolate; border-radius: 16px;
  border: 1px solid var(--studio-line); background: var(--surface);
  box-shadow: inset 0 1px 0 #ffffff09, 0 8px 26px #00000010;
  transition: border-color .2s, box-shadow .2s;
}
.studio-page .detail-interactive > :not(.detail-surface-art) { position: relative; z-index: 1; }
.studio-page .detail-interactive .detail-surface-art { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; pointer-events: none; }
.detail-surface-art::before {
  content: ''; position: absolute; inset: -12px;
  background: url("../art/card-contours-v1.8de8e0767614.png") right bottom / cover no-repeat;
  opacity: .24; transform: translate3d(var(--card-art-x), var(--card-art-y), 0);
  transition: transform .2s ease-out;
}
.studio-page .detail-interactive::before {
  content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(350px circle at var(--surface-x) var(--surface-y), color-mix(in srgb, var(--accent) 12%, transparent), transparent 78%);
  opacity: var(--surface-intensity); transition: opacity .22s;
}
.studio-page .detail-interactive::after {
  content: ''; position: absolute; inset: -1px; z-index: 2; padding: 1px; border-radius: inherit; pointer-events: none;
  background: radial-gradient(250px circle at var(--surface-x) var(--surface-y), color-mix(in srgb, var(--accent) 80%, transparent), transparent 80%);
  opacity: var(--surface-intensity); transition: opacity .22s;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.studio-page .detail-interactive:focus-within { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 6%, transparent); }
.studio-page .detail-hero.detail-interactive { padding: 26px; margin-bottom: 24px; }
.studio-page .detail-main > .version-scope.detail-interactive { padding: 20px 24px; }
.studio-page .detail-hero .tool-monogram.large { transition: transform .25s, box-shadow .25s; transform: translate(var(--icon-x, 0px), var(--icon-y, 0px)); }
.studio-page .detail-hero:hover .tool-monogram.large { box-shadow: inset 0 1px 0 #ffffff1a, 0 0 26px color-mix(in srgb, var(--accent) 15%, transparent); }
.studio-page .detail-main .button { border-radius: 9px; transition: box-shadow .2s, background .2s, border-color .2s, transform .2s; }
.studio-page .detail-main .button:hover { box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 12%, transparent); border-color: var(--accent); }
.studio-page .detail-main .button:active { transform: translateY(1px); }
.studio-page .detail-main .button svg { transition: transform .2s; }
.studio-page .detail-main .button:hover svg { transform: translate(2px, -2px); }
.studio-page .detail-main :is(.source-list h3, .prose, .version-scope, .dependency-list) a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: color .18s, text-decoration-color .18s; }
.studio-page .detail-main :is(.source-list h3, .prose, .version-scope, .dependency-list) a:hover { color: var(--accent); text-decoration-color: currentColor; }
.studio-page .detail-main .resource-links a { padding: 12px 8px; border-radius: 8px; transition: background .2s, color .2s; }
.studio-page .detail-main .resource-links a:hover, .studio-page .detail-main .resource-links a:focus-visible { background: var(--accent-bg); color: var(--accent); }
.studio-page .detail-main .resource-links a > span { display: inline-block; transition: transform .2s; }
.studio-page .detail-main .resource-links a:hover > span { transform: translate(3px, -3px); }
.studio-page .capability-list > div { transition: border-color .2s, background .2s; }
.studio-page .capability-list > div:hover, .studio-page .capability-list > div:focus-within { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.studio-page .source-list article { border-radius: 10px; padding: 18px 14px; transition: background .2s; }
.studio-page .source-list article:hover, .studio-page .source-list article:focus-within { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.studio-page .detail-main tbody tr { transition: background .18s; }
.studio-page .detail-main tbody tr:hover, .studio-page .detail-main tbody tr:focus-within { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.studio-page .drawer-close { transition: background .18s, border-color .18s, color .18s; }
.studio-page .drawer-close:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }
.studio-page .drawer-full-page { text-underline-offset: 5px; }
.studio-page .drawer-full-page:hover { text-decoration: underline; }
.detail-page > .detail-main { padding-top: 32px; }
.tool-drawer .detail-hero.detail-interactive { padding: 23px; }
:root[data-theme=light] .detail-surface-art::before { filter: invert(1) hue-rotate(160deg) saturate(.45); opacity: .16; }
@media (max-width: 620px) {
  .studio-page .detail-hero.detail-interactive, .tool-drawer .detail-hero.detail-interactive { padding: 20px; }
  .studio-page .detail-main > .version-scope.detail-interactive { padding: 18px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .studio-page .detail-interactive::before, .studio-page .detail-interactive::after { opacity: 0; }
  .detail-surface-art::before, .studio-page .detail-hero .tool-monogram.large { transform: none; }
}