/* Music Constellation — portfolio integration */
.music-constellation-page {
  --surface: #111111;
  --white: #f0f0ed;
  overflow-x: hidden;
}
.music-constellation-page button { font: inherit; color: inherit; }
.project-shell{max-width:1180px;margin:0 auto;padding:128px 48px 80px}
.back-link{
  display:inline-block;margin-bottom:36px;color:#747474;font-size:11px;
  transition:color .18s ease,transform .18s ease
}
.back-link:hover{color:#fff;transform:translateX(-2px)}
.project-grid{display:grid;grid-template-columns:minmax(0,1fr) 266px;gap:54px;align-items:start}
.project-main h1{
  margin:0;font-size:clamp(58px,6vw,80px);font-weight:400;
  letter-spacing:-.065em;line-height:.92
}
.project-subtitle{margin:21px 0 35px;color:#797979;font-size:14px}
.project-meta{margin-top:45px;border-left:1px solid var(--line);padding-left:27px}
.meta-block{padding:18px 0 19px;border-bottom:1px solid var(--line)}
.meta-block span{display:block;margin-bottom:10px;color:#777;font-size:10px;letter-spacing:.08em}
.meta-block strong{display:block;font-size:15px;font-weight:400;line-height:1.45}
.meta-note{margin:35px 0 0;color:#686868;font-size:10px;line-height:1.65}

.graph-frame{position:relative;height:620px;background:var(--surface);overflow:hidden}
.graph-header{
  position:absolute;z-index:8;left:18px;right:18px;top:0;height:42px;
  border-bottom:1px solid #242424;display:flex;align-items:center;justify-content:space-between;
  color:#656565;font-size:9px;letter-spacing:.13em
}
.viewport{position:absolute;inset:42px 0 55px;overflow:hidden;touch-action:none;cursor:grab}
.viewport.grabbing{cursor:grabbing}
.world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
#edges{position:absolute;left:0;top:0;width:1px;height:1px;overflow:visible;pointer-events:none}
.edge{
  stroke:#373737;stroke-width:1;vector-effect:non-scaling-stroke;
  transition:stroke .18s ease,opacity .18s ease
}
.edge.path{stroke:#c9c9c6}
.edge.option{stroke:#444}
.edge.dim{opacity:.07}
.edge.draw{stroke-dasharray:190;stroke-dashoffset:190;animation:draw-edge .4s ease forwards}
@keyframes draw-edge{to{stroke-dashoffset:0}}

.center-prompt{
  position:absolute;left:0;top:0;transform:translate(-50%,-50%);
  width:160px;padding:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:transparent;border:0;color:#696969;
  pointer-events:none;text-align:center;transition:opacity .2s ease
}
.center-prompt span{
  font-size:7px;letter-spacing:.22em;color:#686868
}
.center-prompt strong{
  margin-top:8px;font-size:20px;font-weight:400;
  letter-spacing:.14em;color:#ededeb;
  text-shadow:0 2px 18px rgba(0,0,0,.8)
}
.center-prompt.hidden{opacity:0}

.node{
  position:absolute;width:144px;height:82px;
  transform:translate(-50%,-50%) translate3d(var(--float-x,0),var(--float-y,0),0);
  pointer-events:none;will-change:transform;
  transition:opacity .2s ease,filter .2s ease
}
.node-hit{
  position:absolute;left:50%;top:50%;width:34px;height:34px;
  transform:translate(-50%,-50%);padding:0;border:0!important;border-radius:50%;
  border-bottom:0!important;margin:0!important;background:transparent;
  box-shadow:none!important;text-decoration:none!important;
  pointer-events:auto;cursor:pointer;outline:none;appearance:none;-webkit-appearance:none
}
.node-hit::before,.node-hit::after{content:none!important;display:none!important}
.node-dot{
  position:absolute;left:50%;top:50%;width:var(--dot);height:var(--dot);
  border-radius:50%;transform:translate(-50%,-50%);
  background:#a0a09d;transition:transform .18s ease,background .18s ease,box-shadow .18s ease
}
.node-ring{
  position:absolute;left:50%;top:50%;width:calc(var(--dot) + 15px);height:calc(var(--dot) + 15px);
  border-radius:50%;border:1px solid #5a5a5a;
  transform:translate(-50%,-50%) scale(.75);opacity:0;
  transition:transform .18s ease,opacity .18s ease
}
.node-label{
  position:absolute;left:50%;top:calc(50% + var(--half) + 10px);
  transform:translateX(-50%);color:#838383;font-size:10px;
  white-space:nowrap;text-transform:uppercase;letter-spacing:.035em;
  pointer-events:none;transition:color .18s ease,transform .18s ease
}
.node-count{
  position:absolute;left:50%;bottom:calc(50% + var(--half) + 8px);
  transform:translateX(-50%);color:#555;font-size:7px;white-space:nowrap;
  pointer-events:none;opacity:0;transition:opacity .15s ease
}
.node-hit:hover .node-dot,.node-hit:focus-visible .node-dot{
  background:var(--white);transform:translate(-50%,-50%) scale(1.24);
  box-shadow:0 0 0 6px rgba(255,255,255,.035)
}
.node-hit:hover .node-ring,.node-hit:focus-visible .node-ring{
  opacity:1;transform:translate(-50%,-50%) scale(1)
}
.node:has(.node-hit:hover) .node-label,.node:has(.node-hit:focus-visible) .node-label{
  color:#fff;transform:translateX(-50%) translateY(2px)
}
.node:has(.node-hit:hover) .node-count,.node:has(.node-hit:focus-visible) .node-count{opacity:1}
.node.current .node-dot{background:var(--white);box-shadow:0 0 0 7px rgba(255,255,255,.035)}
.node.current .node-label{color:#fff}
.node.path-node .node-dot{background:#bcbcb8}
.node.path-node .node-label{color:#aaa}
.node.option-node{opacity:.92}
.node.dim{opacity:.09;filter:blur(.2px)}
.node.node-entering .node-dot{animation:node-in .4s cubic-bezier(.2,1.08,.3,1) both;animation-delay:var(--delay)}
.node.node-entering .node-label{animation:label-in .28s ease both;animation-delay:calc(var(--delay) + .07s)}
.node.exit{opacity:0;pointer-events:none}
@keyframes node-in{
  from{opacity:0;transform:translate(-50%,-50%) scale(.12)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@keyframes label-in{
  from{opacity:0;transform:translateX(-50%) translateY(5px)}
  to{opacity:1;transform:translateX(-50%) translateY(0)}
}

.hover-card{
  position:absolute;z-index:20;min-width:180px;max-width:250px;padding:10px 11px;
  background:#efefec;color:#080808;opacity:0;pointer-events:none;
  transform:translate(10px,10px);transition:opacity .1s ease;
  box-shadow:0 15px 40px rgba(0,0,0,.35)
}
.hover-card.show{opacity:1}
.hover-card strong{display:block;font-size:9px;letter-spacing:.06em;text-transform:uppercase}
.hover-card span{display:block;margin-top:5px;color:#555;font-size:8px;line-height:1.45}

.graph-footer{
  position:absolute;left:0;right:0;bottom:0;height:55px;padding:0 17px;
  border-top:1px solid #242424;display:flex;align-items:center;
  justify-content:space-between;gap:18px;background:var(--surface)
}
.route{display:flex;align-items:center;gap:7px;min-width:0;overflow-x:auto;scrollbar-width:none}
.route::-webkit-scrollbar{display:none}
.route span,.route button{
  white-space:nowrap;border:0;background:transparent;padding:0;
  color:#606060;font-size:7px;letter-spacing:.1em;text-transform:uppercase
}
.route button{cursor:pointer;color:#aaa;border-bottom:1px solid #555;padding-bottom:2px}
.route button:hover{color:#fff;border-color:#fff}
.route i{font-style:normal;color:#333;font-size:8px}
.graph-actions{display:flex;flex:0 0 auto}
.graph-actions button{
  height:31px;padding:0 10px;border:0;border-left:1px solid #282828;
  background:transparent;color:#686868;font-size:7px;letter-spacing:.09em;
  cursor:pointer;transition:color .16s ease,background .16s ease
}
.graph-actions button:hover:not(:disabled){color:#fff;background:#171717}
.graph-actions button:disabled{opacity:.25;cursor:not-allowed}
.graph-actions #resultButton{
  margin-left:8px;border-left:0;min-width:104px
}
.graph-actions #resultButton.ready{
  background:#f1f1ee;color:#080808;font-weight:600;
  box-shadow:inset 0 0 0 1px #f1f1ee
}
.graph-actions #resultButton.ready::after{
  content:'↗';margin-left:8px;font-size:8px
}
.graph-actions #resultButton.ready:hover{
  background:#fff;color:#000;box-shadow:inset 0 0 0 1px #fff
}

/* Compact popup results */
.result-backdrop{
  position:fixed;z-index:60;inset:0;display:grid;place-items:center;padding:24px;
  background:rgba(0,0,0,.72);opacity:0;visibility:hidden;
  transition:opacity .2s ease,visibility .2s
}
.result-backdrop.open{opacity:1;visibility:visible}
.result-modal{
  width:min(890px,calc(100vw - 48px));max-height:min(720px,82vh);
  overflow:auto;background:#0d0d0d;border:1px solid #303030;
  box-shadow:0 28px 90px rgba(0,0,0,.6);
  transform:translateY(10px);transition:transform .22s ease
}
.result-backdrop.open .result-modal{transform:translateY(0)}
.result-header{position:relative;padding:24px 26px 18px;border-bottom:1px solid var(--line)}
.result-header span{font-size:8px;color:#626262;letter-spacing:.12em}
.result-header h2{margin:10px 0 6px;font-size:42px;font-weight:400;letter-spacing:-.05em}
.result-header p{margin:0;max-width:620px;color:#777;font-size:9px;line-height:1.55}
.close-results{
  position:absolute;right:18px;top:18px;width:34px;height:34px;padding:0;
  border:1px solid #343434;background:transparent;display:grid;place-items:center;
  cursor:pointer;color:#8c8c8c;transition:background .18s ease,color .18s ease,transform .18s ease
}
.close-results svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.5}
.close-results:hover{background:#f0f0ed;color:#050505;transform:rotate(90deg)}
.result-route{
  padding:11px 26px;border-bottom:1px solid var(--line);
  display:flex;gap:10px;overflow-x:auto;color:#777;
  font-size:7px;letter-spacing:.08em;text-transform:uppercase
}
.result-route span::after{content:"→";margin-left:10px;color:#353535}
.result-route span:last-child::after{display:none}
.track-grid{
  padding:20px 26px 28px;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:23px 13px
}
.track-card{min-width:0}
.cover-wrap{position:relative;aspect-ratio:16/10;overflow:hidden;background:#111}
.cover{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.82);transition:transform .25s ease,filter .25s ease}
.track-card:hover .cover{transform:scale(1.018);filter:saturate(1)}
.track-index{position:absolute;left:7px;top:7px;background:#050505;color:#888;padding:4px 5px;font-size:7px;letter-spacing:.08em}
.track-title{margin:8px 0 0;color:#ddd;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track-artist{margin:4px 0 0;color:#666;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track-info{margin-top:8px;padding-top:7px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:8px}
.track-tags{min-width:0;color:#555;font-size:6px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track-links{display:flex;gap:8px;flex:0 0 auto}
.track-links a{color:#777;font-size:6px;text-transform:uppercase;letter-spacing:.06em}
.track-links a:hover{color:#fff}

@media(prefers-reduced-motion:reduce){
  .node{--float-x:0px!important;--float-y:0px!important}
}
@media(max-width:1100px){
  .project-shell{max-width:none;margin:0;padding-left:34px;padding-right:34px}
  .project-grid{grid-template-columns:minmax(0,1fr) 245px}
}
@media(max-width:780px){
  .project-shell{padding:106px 16px 55px}
  .project-grid{display:block}
  .project-main h1{font-size:54px}
  .project-meta{
    margin-top:30px;border-left:0;border-top:1px solid var(--line);
    padding:0;display:grid;grid-template-columns:repeat(2,1fr)
  }
  .meta-block{padding:14px 12px 14px 0}
  .meta-note{grid-column:1/-1}
  .graph-frame{height:590px}
  .track-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:500px){
  .graph-frame{height:550px}
  .node{width:112px}
  .track-grid{grid-template-columns:1fr}
  .result-backdrop{padding:12px}
  .result-modal{width:calc(100vw - 24px)}
}