/* Visual Labの入口と埋め込み枠。サイト本体のYELLトークンを共有する。 */
.md-content__inner:has(.visual-lab-hub), .md-content__inner:has(.vl-lesson-nav) { width: calc(100% - 1.6rem); max-width: var(--yell-wide-width); margin-inline: auto; }
body:has(.visual-lab-hub) .print-button-container { display: none; }
.md-typeset .vl-hero { padding: 1.5rem; border: 1px solid var(--yell-color-border); border-radius: var(--yell-radius-lg); background: var(--yell-color-primary-soft); }
.md-typeset .vl-hero h2 { margin: .4rem 0 .6rem; color: var(--yell-color-text); font-weight: 750; font-size: 1.5rem; line-height: 1.5; }
.md-typeset .vl-eyebrow { margin: 0; color: var(--yell-color-primary); font-size: .7rem; font-weight: 700; }
.md-typeset .vl-hero > p:last-of-type { margin-bottom: .8rem; }
.md-typeset ol.vl-flow:not([hidden]) { display: flex; flex-wrap: wrap; gap: .7rem 1.3rem; list-style: none; margin: 1rem 0 0; padding: 0; }
[dir] .md-typeset ol.vl-flow li { display: flex; align-items: center; gap: .4rem; margin: 0; font-weight: 700; font-size: .75rem; }
.vl-flow li > span { display: inline-flex; width: 1.6rem; height: 1.6rem; justify-content: center; align-items: center; border-radius: 50%; background: var(--yell-color-surface); color: var(--yell-color-primary); }
.md-typeset .vl-starters > h2, .md-typeset .vl-directory > h2 { margin: 1.8rem 0 .4rem; font-weight: 700; }
.md-typeset .vl-starters > p { margin: 0 0 .8rem; color: var(--yell-color-text-muted); }
.md-typeset ul.vl-cards:not([hidden]) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; gap: .8rem; margin: .8rem 0 1.5rem; padding: 0; }
.md-typeset ul.vl-starter-cards:not([hidden]) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
[dir] .md-typeset ul.vl-cards > li { margin: 0; }
.vl-card { --vl-color: var(--yell-subject-science); min-width: 0; }
.vl-area-math { --vl-color: var(--yell-subject-math); }
.vl-area-social { --vl-color: var(--yell-subject-social); }
.md-typeset .vl-card > a { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--yell-color-border); border-radius: var(--yell-radius-lg); color: var(--yell-color-text); background: var(--yell-color-surface); transition: border-color var(--yell-duration-fast), box-shadow var(--yell-duration-fast); }
.md-typeset .vl-card > a:hover { border-color: var(--vl-color); box-shadow: var(--yell-shadow-sm); }
.vl-card-art { display: flex; align-items: center; gap: .8rem; padding: .7rem 1rem; color: var(--vl-color); background: color-mix(in srgb, var(--vl-color) 7%, var(--yell-color-surface)); }
.vl-card-art svg { flex: 0 0 54px; width: 54px; height: 48px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.vl-card-art > span { font-size: .7rem; font-weight: 700; }
.vl-card-content { display: flex; flex: 1; flex-direction: column; gap: .35rem; padding: .9rem 1rem; }
.vl-card-mode { color: var(--yell-color-text-muted); font-size: .65rem; }
.vl-card-content strong { font-size: .85rem; line-height: 1.5; }
.vl-card-description { color: var(--yell-color-text-muted); font-size: .75rem; line-height: 1.7; }
.vl-card-go { display: flex; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .65rem; color: var(--yell-color-primary); font-size: .7rem; font-weight: 700; }
.vl-filters { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .9rem 1rem; padding: 1rem; border: 1px solid var(--yell-color-border); border-radius: var(--yell-radius-lg); background: var(--yell-color-surface-sunken); }
.vl-filters label, .vl-filters legend { display: grid; gap: .4rem; font-weight: 700; font-size: .75rem; }
.vl-search, .vl-filters fieldset { grid-column: 1 / -1; }
.vl-filters fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.vl-filters legend { margin-bottom: .4rem; padding: 0; }
.vl-filters input, .vl-filters select { width: 100%; min-height: 48px; padding: .55rem .7rem; border: 1px solid var(--yell-color-border); border-radius: var(--yell-radius-md); color: var(--yell-color-text); background: var(--yell-color-surface); font: inherit; font-size: 16px; }
.vl-filter-buttons { display: flex; flex-wrap: wrap; gap: .4rem; }
.vl-filters button, .vl-player-tools button { min-height: 44px; padding: .4rem .75rem; border: 1px solid var(--yell-color-border); border-radius: var(--yell-radius-md); color: var(--yell-color-text); background: var(--yell-color-surface); font: inherit; font-size: .75rem; font-weight: 700; cursor: pointer; }
.vl-filter-buttons button[aria-pressed="true"] { color: var(--yell-color-on-primary); background: var(--yell-color-primary); border-color: var(--yell-color-primary); }
.vl-filter-reset { align-self: end; }
.md-typeset .vl-count { color: var(--yell-color-text-muted); font-size: .75rem; }
.vl-empty { padding: 1rem; border: 1px dashed var(--yell-color-border); border-radius: var(--yell-radius-md); background: var(--yell-color-primary-soft); }
.vl-filter-anchor { display: block; height: 0; }
.vl-more { border-top: 1px solid var(--yell-color-border); padding-block: .7rem; }
.vl-more > summary { min-height: 44px; cursor: pointer; font-weight: 700; }
.visual-lab-hub [hidden] { display: none !important; }
.vl-lesson-nav { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin-bottom: 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--yell-color-border); }
.vl-lesson-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: .75rem; font-weight: 700; }
.md-typeset .vl-player { overflow: hidden; width: 100%; margin: 1rem 0 1.5rem; border: 1px solid var(--yell-color-border); border-radius: var(--yell-radius-lg); background: var(--yell-color-surface); box-shadow: none; scroll-margin-top: 7rem; }
.vl-player-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; padding: .55rem .7rem; border-bottom: 1px solid var(--yell-color-border); background: var(--yell-color-surface-sunken); }
.vl-player-tools > span { flex: 1 1 180px; color: var(--yell-color-text); font-size: .7rem; font-weight: 700; }
.vl-player-tools a { display: inline-flex; min-height: 44px; align-items: center; color: var(--yell-color-primary); font-size: .7rem; font-weight: 700; }
.vl-player-status:empty { display: none; }
.vl-player-status { display: block; padding: .7rem; color: var(--yell-color-text-muted); font-size: .75rem; }
.vl-player:fullscreen { display: flex; flex-direction: column; width: 100vw; height: 100dvh; margin: 0; border: 0; border-radius: 0; }
.vl-player:fullscreen iframe { flex: 1 1 0; min-height: 0; height: 0 !important; width: 100%; border: 0; }
.visual-lab-hub :is(a, button, input, select):focus-visible, .vl-lesson-nav a:focus-visible, .vl-player-tools :is(a, button):focus-visible { outline: 3px solid var(--yell-color-secondary); outline-offset: 3px; }
@media (max-width: 900px) {
  .md-typeset ul.vl-cards:not([hidden]), .md-typeset ul.vl-starter-cards:not([hidden]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .md-typeset .vl-hero { padding: 1rem; }
  .md-typeset .vl-hero h2 { font-size: 1.2rem; }
  .md-typeset ul.vl-cards:not([hidden]) { grid-template-columns: 1fr; }
  .md-typeset ul.vl-starter-cards:not([hidden]) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .vl-starter-cards .vl-card-content { padding: .7rem; }
  .vl-starter-cards .vl-card-description { font-size: .7rem; }
  .vl-card-art { padding: .6rem .7rem; gap: .4rem; }
  .vl-card-art svg { flex-basis: 44px; width: 44px; }
  .md-typeset .vl-player { margin-inline: 0; width: 100%; }
}
@media print { .vl-lesson-nav, .vl-player, .vl-filters, .vl-flow, .vl-count { display: none !important; } }