/* Educational floor plan: native SVG, fixed footprints, no runtime assets. */
.workshop-vignette { --wv-ink:#133647; --wv-muted:#4c6575; --wv-green:#007f62; --wv-lilac:#7743ad; --wv-orange:#b96012; --wv-story-accent:#65f5d7; width:100%; max-width:1080px; margin:0 auto; color:var(--wv-ink); isolation:isolate; container-type:inline-size; }
.workshop-vignette .wv-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 3% 4px; }
.workshop-vignette .wv-kicker { display:block; color:#4a6573; font-size:10px; font-weight:750; letter-spacing:.11em; }
.workshop-vignette .wv-heading h3 { margin:0; font-size:clamp(22px,2.1vw,28px); line-height:1.13; font-weight:650; letter-spacing:-.035em; }
.workshop-vignette .wv-day { display:inline-flex; align-items:baseline; flex-shrink:0; padding:6px 15px; border:1px solid #a9cfc1; border-radius:10px; background:#effaf6; color:#006b50; font-size:21px; font-weight:600; }
.workshop-vignette .wv-day span { min-width:1.1em; text-align:center; font-size:32px; font-weight:750; font-variant-numeric:tabular-nums; }
.workshop-vignette .wv-layout { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); align-items:center; gap:2%; }
.workshop-vignette .wv-plan-window { width:100%; }
.workshop-vignette .wv-plan-caption { display:flex; align-items:center; justify-content:space-between; gap:10px; width:min(100%,410px); margin:4px auto 8px; padding:0 5%; color:#496173; font-size:12px; }
.workshop-vignette .wv-plan-caption strong { color:#213e50; font-size:13px; font-weight:650; }
.workshop-vignette .wv-plan-day { display:none; }
.workshop-vignette .wv-scene { display:block; width:100%; max-width:410px; height:auto; margin:0 auto; overflow:visible; }
.workshop-vignette .wv-detail { min-width:0; padding:5px 5% 5px 0; }
.workshop-vignette .wv-part-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.workshop-vignette .wv-reference { font-size:14px; font-weight:750; letter-spacing:.025em; color:#006b50; }
.workshop-vignette .wv-area { padding:5px 8px; border-radius:5px; background:#e1f7ee; color:#006b50; font-size:12px; font-weight:750; white-space:nowrap; }
.workshop-vignette .wv-detail h4 { margin:5px 0 7px; font-size:clamp(18px,1.65vw,22px); line-height:1.2; letter-spacing:-.025em; }
.workshop-vignette .wv-part-facts { display:flex; flex-wrap:wrap; gap:6px 20px; color:var(--wv-muted); margin-top:4px; }
.workshop-vignette .wv-part-facts span { display:flex; align-items:baseline; gap:6px; }
.workshop-vignette .wv-part-facts strong { color:var(--wv-ink); font-size:16px; font-weight:700; }
.workshop-vignette .wv-part-facts small { font-size:11px; }
.workshop-vignette .wv-important { margin:7px 0 10px; font-size:12px; line-height:1.45; color:#4c6575; }
.workshop-vignette .wv-important strong { font-weight:650; }
.workshop-vignette .wv-storyboard { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin:0 0 11px; }
.workshop-vignette .wv-storyboard button { display:grid; grid-template-columns:19px 1fr; align-content:center; align-items:center; column-gap:7px; row-gap:2px; min-height:44px; padding:7px 10px; border:1px solid #d0dde5; border-radius:7px; background:#fff; color:#3f5868; text-align:left; cursor:pointer; }
.workshop-vignette .wv-storyboard button>span { grid-row:1/3; font-size:10px; font-weight:750; color:#75899a; }
.workshop-vignette .wv-storyboard strong { font-size:13px; font-weight:700; line-height:1.2; white-space:nowrap; }
.workshop-vignette .wv-storyboard small { font-size:10px; color:#607586; }
.workshop-vignette .wv-storyboard button[aria-pressed="true"] { border-color:#008668; background:#e8f8f1; color:#005b46; box-shadow:inset 3px 0 #008668; }
.workshop-vignette .wv-storyboard button[aria-pressed="true"]>span { color:inherit; }
.workshop-vignette .wv-storyboard button[data-wv-step-button="1"][aria-pressed="true"] { border-color:#bf701f; background:#fff4e5; color:#864500; box-shadow:inset 3px 0 #bf701f; }
.workshop-vignette .wv-storyboard button[data-wv-step-button="3"][aria-pressed="true"] { border-color:#7743ad; background:#f4edfc; color:#5a2b8d; box-shadow:inset 3px 0 #7743ad; }
.workshop-vignette .wv-step-explanation { position:relative; min-height:156px; box-sizing:border-box; padding:14px 17px; border:1px solid #4a668a; border-left:3px solid var(--wv-story-accent); border-radius:13px; background:radial-gradient(ellipse at 100% 0,#782fac38,transparent 70%),linear-gradient(125deg,#123c51,#132638 62%,#24203c); box-shadow:0 8px 22px #183a4c16; }
.workshop-vignette .wv-explanation-header { display:flex; align-items:center; gap:7px; min-height:13px; }
.workshop-vignette .wv-story-indicator { width:5px; height:5px; border-radius:50%; flex-shrink:0; background:var(--wv-story-accent); box-shadow:0 0 9px #65f5d760; }
.workshop-vignette .wv-step-label { color:var(--wv-story-accent); font-size:9px; letter-spacing:.065em; font-weight:750; }
.workshop-vignette .wv-story-live { margin-left:auto; color:#cbdef0; font-size:8px; font-weight:700; letter-spacing:.08em; white-space:nowrap; }
.workshop-vignette .wv-step-explanation h5 { margin:10px 0 8px; color:#fff; font-size:clamp(19px,1.8vw,23px); font-weight:700; line-height:1.2; letter-spacing:-.025em; }
.workshop-vignette:is([data-wv-motion="running"],[data-wv-motion="paused"]) .wv-step-explanation h5 { animation:wv-title-enter-a .42s ease-out both; }
.workshop-vignette:is([data-wv-motion="running"],[data-wv-motion="paused"]):is([data-wv-step="1"],[data-wv-step="3"]) .wv-step-explanation h5 { animation-name:wv-title-enter-b; }
/* Match the entrance selector's specificity so only a paused clock freezes it. */
.workshop-vignette[data-wv-motion="paused"] .wv-step-explanation h5 { animation-play-state:paused; }
/* Alternate names restart the same gentle entrance when the next title arrives. */
@keyframes wv-title-enter-a { from { opacity:.65; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
@keyframes wv-title-enter-b { from { opacity:.65; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
.workshop-vignette .wv-step-explanation p { margin:0; color:#eff7ff; font-size:14px; line-height:1.55; }
.workshop-vignette .wv-typed-copy { min-height:4.65em; }
.workshop-vignette .wv-type-cursor { display:none; width:2px; height:1em; margin-left:3px; background:var(--wv-story-accent); vertical-align:-.12em; }
.workshop-vignette[data-wv-typing="true"] .wv-type-cursor { display:inline-block; animation:wv-cursor-blink .7s step-end infinite; }
.workshop-vignette .wv-sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
@keyframes wv-cursor-blink { 50% { opacity:0; } }
.workshop-vignette .wv-orientation { display:flex; align-items:center; gap:10px; min-height:36px; margin:6px 0 8px; }
.workshop-vignette .wv-rotate { display:inline-flex; align-items:center; flex-shrink:0; gap:6px; padding:7px 10px; border:1px solid #a0c8ba; border-radius:7px; background:#fff; color:#006950; font-size:11px; font-weight:700; cursor:pointer; }
.workshop-vignette .wv-rotate span { font-size:20px; line-height:1; }
.workshop-vignette .wv-rotation-note { margin:0; color:#526b79; font-size:11px; line-height:1.4; }
.workshop-vignette .wv-piece-one,.workshop-vignette .wv-empty-zone,.workshop-vignette .wv-multiple-part,.workshop-vignette .wv-rejected-placement,.workshop-vignette .wv-accepted-placement { transition:opacity .2s ease; }
.workshop-vignette .wv-multiple-part,.workshop-vignette .wv-empty-zone,.workshop-vignette .wv-rejected-placement,.workshop-vignette .wv-accepted-placement { opacity:0; }
.workshop-vignette[data-wv-step="2"] .wv-piece-one,.workshop-vignette[data-wv-step="3"] .wv-piece-one { opacity:0; }
.workshop-vignette[data-wv-step="2"] .wv-empty-zone { opacity:1; }
.workshop-vignette[data-wv-step="3"] .wv-multiple-part { opacity:1; }
.workshop-vignette[data-wv-step="3"] .wv-grid-note,.workshop-vignette[data-wv-step="3"] .wv-free-surface-note { opacity:0; }
.workshop-vignette[data-wv-multiple="rejected"] .wv-rejected-placement,.workshop-vignette[data-wv-multiple="accepted"] .wv-rejected-placement,.workshop-vignette[data-wv-multiple="accepted"] .wv-accepted-placement { opacity:1; }
.workshop-vignette[data-wv-step="1"] .wv-day { background:#fff2df; border-color:#d9ae77; color:#995508; }
.workshop-vignette[data-wv-step="1"] { --wv-story-accent:#ffcd89; }
.workshop-vignette[data-wv-step="3"] .wv-day { background:#f4edfc; border-color:#bd9bd5; color:#683395; }
.workshop-vignette[data-wv-step="3"] .wv-reference { color:#673398; }
.workshop-vignette[data-wv-step="3"] { --wv-story-accent:#efb0ff; }
.workshop-vignette[data-wv-step="3"] .wv-area { background:#efe5fb; color:#673398; }
.workshop-vignette .wv-controls { display:none; align-items:center; justify-content:space-between; gap:7px; margin-top:12px; }
.workshop-vignette[data-wv-ready="true"] .wv-controls { display:flex; }
.workshop-vignette .wv-controls button { padding:8px 10px; border:1px solid #c1d0db; border-radius:6px; background:#fff; color:#345368; font-size:11px; font-weight:650; cursor:pointer; white-space:nowrap; }
.workshop-vignette .wv-controls .wv-play { min-width:65px; background:#173b4c; border-color:#173b4c; color:#fff; }
.workshop-vignette .wv-progress { height:3px; margin-top:12px; overflow:hidden; border-radius:3px; background:#dce6ed; }
.workshop-vignette .wv-progress i { display:block; width:100%; height:100%; transform-origin:left; transform:scaleX(0); background:#008969; }
.workshop-vignette .wv-position { color:#526a7b; font-size:10px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.workshop-vignette button:focus-visible { outline:3px solid #8859b6; outline-offset:3px; }
.workshop-vignette [hidden] { display:none !important; }
.workshop-vignette button:disabled { cursor:default; opacity:.42; }
.workshop-vignette .wv-storyboard button:disabled { opacity:1; }
.workshop-vignette figcaption { margin:5px 3% 0; max-width:none; text-align:left; color:#5b707e; font-size:11px; line-height:1.5; }
.workshop-vignette figcaption strong { font-weight:650; color:#3a5969; }
@container (max-width:760px) {
  .workshop-vignette .wv-layout { grid-template-columns:1fr; gap:0; }
  .workshop-vignette .wv-plan-window { width:min(100%,390px); margin:0 auto; }
  .workshop-vignette .wv-detail { padding:5px 5% 17px; }
  .workshop-vignette .wv-step-explanation { min-height:0; }
  .workshop-vignette .wv-storyboard { margin:10px 0; }
  .workshop-vignette .wv-orientation { margin-bottom:10px; }
}
@media (max-width:650px) {
  .workshop-vignette .wv-heading { gap:10px; }
  .workshop-vignette .wv-heading h3 { font-size:24px; }
  .workshop-vignette .wv-kicker { font-size:8px; }
  .workshop-vignette .wv-day { font-size:18px; padding:5px 10px; }
  .workshop-vignette .wv-day span { font-size:28px; }
  .workshop-vignette .wv-layout { grid-template-columns:1fr; gap:0; }
  .workshop-vignette .wv-detail { padding:5px 5% 17px; }
  .workshop-vignette .wv-step-explanation { min-height:0; }
  .workshop-vignette .wv-storyboard strong { font-size:12px; }
  .workshop-vignette .wv-step-explanation { padding:15px 16px; }
  .workshop-vignette .wv-step-label { font-size:8px; }
  .workshop-vignette .wv-story-live { display:none; }
  .workshop-vignette .wv-controls { gap:5px; }
  .workshop-vignette .wv-controls button { padding:8px; }
}
@media (prefers-reduced-motion:reduce) {
  .workshop-vignette *, .workshop-vignette *::before, .workshop-vignette *::after { transition:none !important; animation:none !important; }
  .workshop-vignette .wv-play { display:none; }
  .workshop-vignette .wv-type-cursor { display:none!important; }
}