/* Bracketed wrapper — Constellation's signature framing pattern.
   Wrap any element with .cn-bracketed to add four corner brackets that
   sit just outside its bounds. Pure CSS, scales with the element.
   Use --bracket-len and --bracket-color to customise.
*/
.cn-bracketed{
  position:relative;
  --bracket-len: 14px;
  --bracket-w: 1.5px;
  --bracket-gap: 6px;
  --bracket-color: rgba(255,255,255,0.55);
}
.cn-bracketed::before,
.cn-bracketed::after,
.cn-bracketed > .cn-bracket-tl,
.cn-bracketed > .cn-bracket-br{
  content:"";
  position:absolute;
  width:var(--bracket-len);
  height:var(--bracket-len);
  pointer-events:none;
}
/* top-left */
.cn-bracketed::before{
  top: calc(var(--bracket-gap) * -1);
  left: calc(var(--bracket-gap) * -1);
  border-top: var(--bracket-w) solid var(--bracket-color);
  border-left: var(--bracket-w) solid var(--bracket-color);
}
/* bottom-right */
.cn-bracketed::after{
  bottom: calc(var(--bracket-gap) * -1);
  right:  calc(var(--bracket-gap) * -1);
  border-bottom: var(--bracket-w) solid var(--bracket-color);
  border-right:  var(--bracket-w) solid var(--bracket-color);
}
/* top-right + bottom-left via single helper spans */
.cn-bracketed > .cn-bracket-tr{
  content:"";
  position:absolute;
  width:var(--bracket-len);
  height:var(--bracket-len);
  pointer-events:none;
  top: calc(var(--bracket-gap) * -1);
  right: calc(var(--bracket-gap) * -1);
  border-top: var(--bracket-w) solid var(--bracket-color);
  border-right: var(--bracket-w) solid var(--bracket-color);
}
.cn-bracketed > .cn-bracket-bl{
  content:"";
  position:absolute;
  width:var(--bracket-len);
  height:var(--bracket-len);
  pointer-events:none;
  bottom: calc(var(--bracket-gap) * -1);
  left: calc(var(--bracket-gap) * -1);
  border-bottom: var(--bracket-w) solid var(--bracket-color);
  border-left: var(--bracket-w) solid var(--bracket-color);
}

/* On-hover/focus brighten brackets */
.cn-bracketed:hover,
.cn-bracketed:focus-within{
  --bracket-color: #fff;
}

/* A bracketed icon button (the "scroll down" pattern in the screenshot) */
.cn-icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  background:transparent;
  border:0;
  color:var(--c-fg);
  cursor:pointer;
  position:relative;
  transition:color var(--dur-base) var(--ease-standard);
}
.cn-icon-btn:hover{ color:var(--c-accent); }
.cn-icon-btn:focus-visible{ outline:none; box-shadow: var(--shadow-focus); }
.cn-icon-btn svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.5; }