/* The "save" demo from the Reference landing page (apps/web/public/welcome/index.html on cosmic-chameleon/reference),
   scoped under .ref-demo so its tokens don't touch the portfolio's own --ink and --rule. */
.ref-demo {
  --font: "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk Text Pro", "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --rd-ink: #1b1d1f; --rd-muted: #85898c; --rd-faint: #b6babc; --rd-hairline: #e9ebec; --rd-accent: #a9b5b9;
  --rd-card: #fff; --rd-on-ink: #fff; --rd-shade: 169 181 185; --rd-ink-rgb: 27 29 31; --rd-card-rgb: 255 255 255;
  font-family: var(--font); color: var(--rd-ink);
  padding: 28px 0 8px;
  background:
    linear-gradient(rgb(var(--rd-shade) / 0.18) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgb(var(--rd-shade) / 0.18) 1px, transparent 1px) 0 0 / 28px 28px,
    #fbfcfc;
}
.ref-demo .demo-note { color: var(--rd-muted); text-align: center; font-size: 13.5px; line-height: 1.7; max-width: 460px; margin: 0 auto 22px; padding: 0 16px; }
.ref-demo .demo-host { position: relative; margin: 0 16px; }
.ref-demo .demo-site {
  background: var(--rd-card); border: 1px solid var(--rd-hairline); border-radius: 12px;
  padding: 0 28px 28px; cursor: crosshair;
}
.ref-demo .demo-chrome {
  display: flex; align-items: center; gap: 6px;
  margin: 0 -28px 18px; padding: 12px 0 12px 16px;
  border-bottom: 1px solid var(--rd-hairline); color: var(--rd-faint); font-size: 11px;
}
.ref-demo .demo-chrome i { width: 8px; height: 8px; border-radius: 50%; background: var(--rd-hairline); display: block; }
.ref-demo .demo-tabs { display: flex; gap: 4px; margin-left: 10px; }
.ref-demo .demo-tabs button {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; background: none; cursor: pointer; border-radius: 6px;
  padding: 4px 9px; font: 11px/1.5 var(--font); color: var(--rd-faint);
}
.ref-demo .demo-tabs button .ic { opacity: 0.75; }
.ref-demo .demo-tabs button.on .ic { opacity: 1; }
.ref-demo .demo-tabs button:hover { color: var(--rd-ink); }
.ref-demo .demo-tabs button.on { background: rgb(var(--rd-shade) / 0.2); color: var(--rd-ink); }
.ref-demo .del { position: relative; border-radius: 6px; transition: box-shadow 0.12s, background 0.12s; }
.ref-demo .del:hover { background: rgb(var(--rd-shade) / 0.22); box-shadow: 0 0 0 1.5px rgb(var(--rd-shade) / 0.9); }
.ref-demo .del:hover::after {
  content: attr(data-label); position: absolute; top: -10px; right: 8px; z-index: 3;
  background: var(--rd-card); border: 1px solid var(--rd-hairline); border-radius: 5px;
  padding: 1px 8px; font: 500 10.5px/1.7 var(--font); color: var(--rd-ink);
  box-shadow: 0 0 0 1.5px rgb(var(--rd-shade) / 0.5), 0 4px 14px rgb(var(--rd-shade) / 0.4);
}
.ref-demo nav.del { display: flex; align-items: center; gap: 14px; padding: 8px 10px; margin-bottom: 16px; color: var(--rd-muted); font-size: 12px; }
.ref-demo nav.del b { width: 14px; height: 14px; border-radius: 50%; background: var(--rd-accent); margin-right: auto; }
.ref-demo h3.del { font: 500 30px/1.15 var(--font); letter-spacing: -0.015em; margin: 0 0 14px; padding: 4px 8px; }
.ref-demo .demo-cols { display: flex; gap: 16px; }
.ref-demo .demo-img { flex: 1; min-height: 132px; background: linear-gradient(135deg, #e2e7e9, #a9b5b9); }
.ref-demo .demo-side { width: 46%; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.ref-demo .demo-side p.del { margin: 0; color: var(--rd-muted); font-size: 12.5px; line-height: 1.65; padding: 6px 8px; }
.ref-demo .demo-btn { border: none; background: var(--rd-ink); color: var(--rd-on-ink); font: 500 12px/1 var(--font); padding: 10px 18px; border-radius: 999px; cursor: crosshair; }
.ref-demo .demo-palette { display: flex; gap: 6px; padding: 6px 8px; }
.ref-demo .demo-palette i { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgb(var(--rd-ink-rgb) / 0.08); display: block; }
.ref-demo .demo-boardbar {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 12px;
  font-size: 12px; color: var(--rd-muted);
}
.ref-demo .demo-boardbar b { font-weight: 500; color: var(--rd-ink); }
.ref-demo .demo-boardbar em {
  font-style: normal; margin-left: auto; font-size: 11px; color: var(--rd-ink);
  border: 1px solid var(--rd-hairline); border-radius: 999px; padding: 3px 10px;
}
.ref-demo .demo-pins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ref-demo .demo-pin { border-radius: 8px; }
.ref-demo .demo-pin:nth-child(1), .ref-demo .demo-pin:nth-child(5) { height: 128px; }
.ref-demo .demo-pin:nth-child(2), .ref-demo .demo-pin:nth-child(4), .ref-demo .demo-pin:nth-child(6) { height: 96px; }
.ref-demo .demo-pin:nth-child(3) { height: 112px; }
.ref-demo .arena-head { padding: 8px 10px; margin-bottom: 12px; font-size: 12px; color: var(--rd-muted); }
.ref-demo .arena-head b { font-weight: 500; color: var(--rd-ink); margin-right: 10px; }
.ref-demo .arena-blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ref-demo .arena-b { min-height: 104px; border-radius: 8px; }
.ref-demo .arena-b.quote {
  border: 1px solid var(--rd-hairline); padding: 14px;
  font: 13px/1.6 var(--font); color: var(--rd-ink); display: flex; align-items: center;
}
.ref-demo .arena-b.link {
  border: 1px solid var(--rd-hairline); padding: 14px;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
}
.ref-demo .arena-b.link b { font-weight: 500; font-size: 13px; }
.ref-demo .arena-b.link span { color: var(--rd-faint); font-size: 11px; }
.ref-demo .demo-fx { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.ref-demo .demo-fx i, .ref-demo .demo-fx s, .ref-demo .demo-fx b { position: absolute; display: block; }
.ref-demo .demo-fx .h {
  height: 1px; transform: scaleX(0);
  background: linear-gradient(90deg, transparent, rgb(var(--rd-shade) / 0.9) 16%, rgb(var(--rd-shade) / 0.9) 84%, transparent);
  animation: rd-gx 0.45s cubic-bezier(0.3, 0, 0.2, 1) forwards;
}
.ref-demo .demo-fx .v {
  width: 1px; transform: scaleY(0);
  background: linear-gradient(180deg, transparent, rgb(var(--rd-shade) / 0.9) 16%, rgb(var(--rd-shade) / 0.9) 84%, transparent);
  animation: rd-gy 0.45s cubic-bezier(0.3, 0, 0.2, 1) forwards;
}
@keyframes rd-gx { to { transform: scaleX(1); } }
@keyframes rd-gy { to { transform: scaleY(1); } }
.ref-demo .demo-fx s {
  opacity: 0; border-radius: 6px;
  background:
    linear-gradient(rgb(var(--rd-shade) / 0.4) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(90deg, rgb(var(--rd-shade) / 0.4) 1px, transparent 1px) 0 0 / 16px 16px,
    rgb(var(--rd-card-rgb) / 0.45);
  animation: rd-gridin 0.22s ease-out 0.12s forwards;
}
@keyframes rd-gridin { to { opacity: 1; } }
.ref-demo .demo-fx b {
  border-radius: 6px; border: 1.5px solid var(--rd-accent);
  background:
    linear-gradient(rgb(var(--rd-shade) / 0.5) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(90deg, rgb(var(--rd-shade) / 0.5) 1px, transparent 1px) 0 0 / 16px 16px,
    rgb(var(--rd-card-rgb) / 0.7);
}
.ref-demo .demo-tray {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  min-height: 64px; margin: 14px 16px 16px; padding: 10px;
  border: 1px dashed rgb(var(--rd-shade) / 0.55); border-radius: 12px;
}
.ref-demo .demo-tray .hint { color: var(--rd-faint); font-size: 12px; }
.ref-demo .demo-card {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--rd-card); border: 1px solid var(--rd-hairline); border-radius: 8px;
  padding: 7px 12px; font-size: 12px; color: var(--rd-ink);
  box-shadow: 0 4px 14px rgb(var(--rd-shade) / 0.25);
  animation: rd-pop 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.4);
}
.ref-demo .demo-card i { width: 8px; height: 8px; border-radius: 50%; background: var(--rd-accent); display: block; flex: none; }
.ref-demo .demo-card b { font-weight: 500; }
.ref-demo .demo-card em { font-style: normal; color: var(--rd-faint); font-size: 11px; }
@keyframes rd-pop { from { opacity: 0; transform: scale(0.6) translateY(-8px); } }
@media (max-width: 640px) {
  .ref-demo .demo-site { padding: 0 16px 16px; }
  .ref-demo .demo-chrome { margin: 0 -16px 14px; padding-left: 12px; overflow-x: auto; }
  .ref-demo .demo-tabs { flex-wrap: nowrap; }
  .ref-demo .demo-tabs button { white-space: nowrap; }
  .ref-demo .demo-boardbar { flex-wrap: wrap; gap: 6px; }
  .ref-demo .demo-boardbar em { margin-left: 0; }
  .ref-demo .demo-pins { grid-template-columns: 1fr 1fr; }
  .ref-demo .demo-cols { flex-direction: column; }
  .ref-demo .demo-side { width: 100%; }
  .ref-demo .arena-blocks { grid-template-columns: 1fr; }
}

/* compact: the frame and the tray only, sized for the gallery stage */
.ref-demo.compact { width: min(60vw, 520px); padding: 12px 0 2px; margin: 0; }
.ref-demo.compact .demo-note { display: none; }
.ref-demo.compact .demo-host { margin: 0 12px; }
.ref-demo.compact .demo-site { padding: 0 18px 18px; }
.ref-demo.compact .demo-chrome { margin: 0 -18px 12px; padding: 9px 0 9px 12px; }
.ref-demo.compact .demo-pins { gap: 8px; }
.ref-demo.compact .demo-pin:nth-child(1), .ref-demo.compact .demo-pin:nth-child(5) { height: 84px; }
.ref-demo.compact .demo-pin:nth-child(2), .ref-demo.compact .demo-pin:nth-child(4), .ref-demo.compact .demo-pin:nth-child(6) { height: 62px; }
.ref-demo.compact .demo-pin:nth-child(3) { height: 72px; }
.ref-demo.compact .arena-b { min-height: 72px; }
.ref-demo.compact h3.del { font-size: 22px; }
.ref-demo.compact .demo-img { min-height: 96px; }
.ref-demo.compact .demo-tray { min-height: 48px; margin: 10px 12px 10px; }
.ref-demo .demo-try {
  margin: 0 0 10px; text-align: center; color: var(--rd-muted); font: 12.5px/1.4 var(--font);
  transition: opacity .8s ease;
}
.ref-demo .demo-try.fade, .ref-demo .demo-try[hidden] { opacity: 0; }
.ref-demo .demo-try[hidden] { display: block; }


/* laptop: the demo fills the screen, picker centred inside it */
.ref-demo.laptop { width: 1172px; height: 736px; padding: 0; margin: 0; display: flex; flex-direction: column; justify-content: center; }
.ref-demo.laptop .demo-note { display: none; }
.ref-demo.laptop .demo-try { margin: 0 0 16px; font-size: 17px; }
.ref-demo.laptop .demo-host { width: 920px; margin: 0 auto; }
.ref-demo.laptop .demo-tray { width: 920px; margin: 18px auto 0; min-height: 72px; }
.ref-demo.laptop .demo-tray .hint { font-size: 15px; }
.ref-demo.laptop .demo-site { padding: 0 36px 36px; }
.ref-demo.laptop .demo-chrome { margin: 0 -36px 22px; padding: 14px 0 14px 20px; }
.ref-demo.laptop .demo-chrome i { width: 10px; height: 10px; }
.ref-demo.laptop .demo-tabs button { font-size: 14px; padding: 5px 12px; }
.ref-demo.laptop nav.del { font-size: 15px; gap: 18px; padding: 10px 12px; margin-bottom: 20px; }
.ref-demo.laptop nav.del b { width: 18px; height: 18px; }
.ref-demo.laptop h3.del { font-size: 40px; margin: 0 0 18px; }
.ref-demo.laptop .demo-cols { gap: 22px; }
.ref-demo.laptop .demo-img { min-height: 190px; }
.ref-demo.laptop .demo-side p.del { font-size: 16px; }
.ref-demo.laptop .demo-btn { font-size: 15px; padding: 13px 22px; }
.ref-demo.laptop .demo-palette i { width: 28px; height: 28px; }
.ref-demo.laptop .demo-card { font-size: 14px; padding: 9px 14px; }
.ref-demo.laptop .demo-card em { font-size: 13px; }