/* AM · Waveform. A static line remains when the audio renderer is unavailable. */
html body:is(.home-page,.portfolio-page) details.teaser-am-waveform:is(#home-am-waveform,#am-waveform) {
  --project-frame-rgb:218,221,226;
  --project-shell:#030405;
  background:#030405;
  border-color:#73778066;
}
html body:is(.home-page,.portfolio-page) details.teaser-am-waveform:is(#home-am-waveform,#am-waveform)::before {display:none;}
html body:is(.home-page,.portfolio-page) details.teaser-am-waveform:is(#home-am-waveform,#am-waveform):is(:hover,:focus-within,.wb-selected) {border-color:#daddE2aa;box-shadow:inset 0 1px 0 #ffffff10,0 0 18px #daddE20a;}
html body:is(.home-page,.portfolio-page) details.teaser-am-waveform:is(#home-am-waveform,#am-waveform)>summary {
  --text:#e8eaf0;
  --muted:#a9b0bc;
  --faint:#8d95a1;
  --accent:#daddE2;
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:0;
  min-height:238px;
  box-sizing:border-box;
  overflow:hidden;
  padding:24px;
  background:#030405;
  color:#e8eaf0;
  list-style:none;
  cursor:pointer;
}
html body:is(.home-page,.portfolio-page) details.teaser-am-waveform:is(#home-am-waveform,#am-waveform)>summary::before {display:none;}
html body:is(.home-page,.portfolio-page) details.teaser-am-waveform:is(#home-am-waveform,#am-waveform)>summary::-webkit-details-marker {display:none;}
html body:is(.home-page,.portfolio-page) details.teaser-am-waveform:is(#home-am-waveform,#am-waveform)>summary:focus-visible {outline:2px solid #e8eaf0;outline-offset:-4px;}
html body:is(.home-page,.portfolio-page) details.teaser-am-waveform:is(#home-am-waveform,#am-waveform)>summary>.am-waveform-cover {
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:#030405;
  transform:none;
}
.teaser-am-waveform .am-waveform-canvas {position:absolute;left:5%;top:10%;display:block;width:90%;height:36%;}
.teaser-am-waveform .am-waveform-flatline {position:absolute;left:5%;right:5%;top:28%;height:1px;background:#e8eaf0;opacity:.9;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);}
.teaser-am-waveform .am-waveform-cover[data-am-renderer-ready="true"] .am-waveform-flatline {visibility:hidden;}
html body:is(.home-page,.portfolio-page) details.teaser-am-waveform:is(#home-am-waveform,#am-waveform)>summary>:not(.am-waveform-cover) {position:relative;z-index:1;}
html body:is(.home-page,.portfolio-page) details.teaser-am-waveform:is(#home-am-waveform,#am-waveform)>summary .project-teaser-kicker {display:flex;align-items:center;flex-wrap:nowrap;gap:12px;min-height:22px;margin:0 0 62px;padding:0;color:#e0e3e9;font:500 10px/1.4 Consolas,"Cascadia Code",monospace;letter-spacing:.06em;}
html body:is(.home-page,.portfolio-page) details.teaser-am-waveform:is(#home-am-waveform,#am-waveform)>summary .project-teaser-kicker>span:first-child {color:#e0e3e9;}
html body:is(.home-page,.portfolio-page) details.teaser-am-waveform:is(#home-am-waveform,#am-waveform)>summary :is(.project-teaser-index,.wb-card-tools) {display:inline-flex;align-items:center;gap:12px;flex:none;margin-left:auto;color:#e0e3e9;font-size:11px;}
html body:is(.home-page,.portfolio-page) details.teaser-am-waveform:is(#home-am-waveform,#am-waveform)>summary .project-teaser-title {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto!important;padding:0;font:600 23px/1.2 "Segoe UI",Arial,sans-serif;letter-spacing:-.6px;color:#eef1f7!important;}
html body:is(.home-page,.portfolio-page) details.teaser-am-waveform:is(#home-am-waveform,#am-waveform)>summary .project-teaser-title>span {color:inherit!important;transform:none!important;text-shadow:none;}
html body:is(.home-page,.portfolio-page) details.teaser-am-waveform:is(#home-am-waveform,#am-waveform)>summary svg {width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
html body:is(.home-page,.portfolio-page) details.teaser-am-waveform:is(#home-am-waveform,#am-waveform)>summary .wb-card-description {margin:8px 0 0;color:#b4bac5!important;font:400 13px/1.55 "Segoe UI",Arial,sans-serif;text-wrap:pretty;}
html body:is(.home-page,.portfolio-page) details.teaser-am-waveform:is(#home-am-waveform,#am-waveform)>summary .project-tags {display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex-shrink:0;margin:14px 0 0!important;padding:0;transform:none!important;}
html body:is(.home-page,.portfolio-page) details.teaser-am-waveform:is(#home-am-waveform,#am-waveform)>summary .project-tags .tag {--tag-rgb:182,190,205;color:rgb(var(--tag-rgb));background:#ffffff08!important;border-color:#ffffff2d;}
html body:is(.home-page,.portfolio-page) details.teaser-am-waveform:is(#home-am-waveform,#am-waveform)>summary .project-tags .tag-green {--tag-rgb:144,202,171;}
.am-project-details .am-workshop-install {margin:24px 0 0;padding-top:20px;border-top:1px solid var(--wb-glass-line,var(--line));}
.am-project-details .am-workshop-install h4 {margin:0 0 8px;font:500 16px/1.4 "Segoe UI",Arial,sans-serif;color:var(--text);}
.am-project-details .am-workshop-install p {margin:0 0 16px;font:400 14px/1.6 "Segoe UI",Arial,sans-serif;color:var(--muted);}
.am-project-details .am-workshop-link {display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;max-width:100%;box-sizing:border-box;padding:10px 14px;border:1px solid var(--wb-glass-line,var(--line));border-radius:7px;background:color-mix(in srgb,var(--text) 5%,transparent);color:var(--text);font:12px/1.5 Consolas,"Cascadia Code",monospace;text-decoration:none;}
.am-project-details .am-workshop-link:hover {background:color-mix(in srgb,var(--text) 10%,transparent);}
.am-project-details .am-workshop-link:focus-visible {outline:2px solid var(--muted);outline-offset:3px;}
@media(max-width:760px) {
  html body:is(.home-page,.portfolio-page) details.teaser-am-waveform:is(#home-am-waveform,#am-waveform)>summary {height:auto!important;min-height:258px!important;padding:16px!important;}
  html body:is(.home-page,.portfolio-page) details.teaser-am-waveform:is(#home-am-waveform,#am-waveform)>summary .project-teaser-kicker {margin:0 0 83px!important;font-size:9px;}
  html body:is(.home-page,.portfolio-page) details.teaser-am-waveform:is(#home-am-waveform,#am-waveform)>summary .project-teaser-title {margin-top:auto!important;margin-bottom:0;font-size:23px;}
  html body:is(.home-page,.portfolio-page) details.teaser-am-waveform:is(#home-am-waveform,#am-waveform)>summary .project-tags {gap:5px;margin-top:13px!important;}
}
@media(prefers-reduced-motion:reduce) {
  html body:is(.home-page,.portfolio-page) details.teaser-am-waveform:is(#home-am-waveform,#am-waveform),
  html body:is(.home-page,.portfolio-page) details.teaser-am-waveform:is(#home-am-waveform,#am-waveform)>summary * {animation:none!important;transition:none!important;}
}

/* AM v2: reserve a fixed waveform band so wrapped copy and tags cannot move it. */
html body:is(.home-page,.portfolio-page) details.teaser-am-waveform:is(#home-am-waveform,#am-waveform)>summary {
  height:auto!important;
  min-height:294px;
}
.teaser-am-waveform .am-waveform-canvas {top:56px;height:112px;}
.teaser-am-waveform .am-waveform-flatline {top:112px;}
html body:is(.home-page,.portfolio-page) details.teaser-am-waveform:is(#home-am-waveform,#am-waveform)>summary .project-teaser-kicker {margin-bottom:118px;}
html body:is(.home-page,.portfolio-page) details.teaser-am-waveform:is(#home-am-waveform,#am-waveform)>summary .project-teaser-title {margin-top:0!important;}
html body:is(.home-page,.portfolio-page) details.teaser-am-waveform:is(#home-am-waveform,#am-waveform)>summary .project-tags {align-self:stretch;width:100%;box-sizing:border-box;}

/* This control is separate from .tag, preserving the existing tag effects. */
html body:is(.home-page,.portfolio-page) details.teaser-am-waveform:is(#home-am-waveform,#am-waveform)>summary .am-motion-toggle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  order:30;
  gap:6px;
  box-sizing:border-box;
  min-width:32px;
  min-height:32px;
  margin:0 0 0 auto;
  padding:6px 9px;
  border:1px solid #ffffff2d;
  border-radius:6px;
  background:#ffffff08;
  color:#c6ccd6;
  font:500 10px/1.3 Consolas,"Cascadia Code",monospace;
  letter-spacing:0;
  text-transform:none;
  white-space:nowrap;
  cursor:pointer;
  user-select:none;
  transition:background-color .18s ease,border-color .18s ease;
}
html body:is(.home-page,.portfolio-page) details.teaser-am-waveform:is(#home-am-waveform,#am-waveform)>summary .am-motion-toggle:hover {background:#ffffff12;border-color:#e8eaf066;}
html body:is(.home-page,.portfolio-page) details.teaser-am-waveform:is(#home-am-waveform,#am-waveform)>summary .am-motion-toggle:focus-visible {outline:2px solid #e8eaf0;outline-offset:3px;}
html body:is(.home-page,.portfolio-page) details.teaser-am-waveform:is(#home-am-waveform,#am-waveform)>summary [data-am-motion-icon] {display:inline-flex;align-items:center;justify-content:center;width:10px;line-height:1;}

@media(max-width:760px) {
  html body:is(.home-page,.portfolio-page) details.teaser-am-waveform:is(#home-am-waveform,#am-waveform)>summary {height:auto!important;min-height:320px!important;}
  .teaser-am-waveform .am-waveform-canvas {top:52px;height:96px;}
  .teaser-am-waveform .am-waveform-flatline {top:100px;}
  html body:is(.home-page,.portfolio-page) details.teaser-am-waveform:is(#home-am-waveform,#am-waveform)>summary .project-teaser-kicker {margin-bottom:120px!important;}
  html body:is(.home-page,.portfolio-page) details.teaser-am-waveform:is(#home-am-waveform,#am-waveform)>summary .project-teaser-title {margin-top:0!important;}
}


/* Platform identity uses the same cyan family as the other project tags. */
html body:is(.home-page,.portfolio-page) details.teaser-am-waveform:is(#home-am-waveform,#am-waveform)>summary .project-tags .tag-blue {
  --tag-rgb:105,197,229;
  color:rgb(var(--tag-rgb));
  border-color:rgba(var(--tag-rgb),.4);
  background:rgba(var(--tag-rgb),.075)!important;
}

/* Keep the last tag and pause control together when the footer wraps. */
html body:is(.home-page,.portfolio-page) details.teaser-am-waveform:is(#home-am-waveform,#am-waveform)>summary .am-tag-tail {display:flex;flex:1 0 auto;order:30;align-items:center;gap:6px;min-width:max-content;}

/* Preview layout only; use the confirmed clip's ratio and dimensions at integration. */
.am-project-details .am-project-preview {margin:24px 0;}
.am-project-details .am-project-preview h4 {margin:0 0 12px;font:500 16px/1.4 "Segoe UI",Arial,sans-serif;color:var(--text);}
.am-project-details .am-project-preview figure {margin:0;min-width:0;}
.am-project-details .am-project-preview video {display:block;width:100%;height:auto;max-width:100%;max-height:min(48vh,360px);aspect-ratio:var(--am-preview-ratio,16/9);object-fit:contain;border:1px solid var(--wb-glass-line,var(--line));border-radius:10px;background:#030405;}
.am-project-details .am-project-preview figcaption {margin-top:10px;color:var(--muted);font:400 12px/1.6 "Segoe UI",Arial,sans-serif;}