/* ============ TOKENS ============ */
.zd-root{
  --bg:#F7F5F1;
  --surface:#FFFFFF;
  --surface-2:#F0ECE3;
  --ink:#18140F;
  --ink-soft:#5B5347;
  --ink-faint:#8C8474;
  --line:#E6E0D4;
  --line-strong:#D8D0BF;
  --accent:#D97706;
  --accent-2:#F59E0B;
  --accent-soft:#FEF3C7;
  --lacquer:#B23B28;
  --lacquer-2:#C6503A;
  --lacquer-soft:#FBE7E1;
  --ok:#4C7A56;
  --font-display:'Fraunces', serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  /* legacy aliases (kept so older inline styles repaint correctly) */
  --brass:var(--accent-2);
  --brass-2:var(--accent);
  --brass-deep:var(--accent);
  --vellum:var(--surface-2);
  --vellum-2:var(--surface);
  --line-lt:var(--line);
  --shell:var(--surface-2);
  --shell-2:var(--surface-2);
  --shell-3:var(--surface);
  --lacquer-deep:var(--lacquer);
}
.zd-root, .zd-root *{box-sizing:border-box;}

.zd-root{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  border-radius:1.8rem;
  overflow:hidden;
  isolation:isolate;
  line-height:1.5;
}
.zd-root ::selection{background:var(--accent-soft); color:var(--ink);}
.zd-root a{color:inherit; text-decoration:none;}
.zd-root button{font-family:inherit; cursor:pointer; border:0; background:none; margin:0; font-size:100%;}

/* ============ SCROLLBAR ============ */
.zd-root ::-webkit-scrollbar{width:10px;}
.zd-root ::-webkit-scrollbar-track{background:var(--bg);}
.zd-root ::-webkit-scrollbar-thumb{background:var(--line-strong); border-radius:6px; border:2px solid var(--bg);}
.zd-root ::-webkit-scrollbar-thumb:hover{background:var(--accent-2);}

/* ============ TYPE ============ */
.zd-root .font-display{font-family:var(--font-display);}
.zd-root .font-mono{font-family:var(--font-mono);}
.zd-root .zd-eyebrow{
  font-family:var(--font-mono); font-size:13px; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
}

/* ============ LAYOUT HELPERS ============ */
.zd-root .zd-wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
.zd-root .zd-card-vellum{
  background:var(--surface);
  border:1px solid var(--line);
  color:var(--ink);
}
.zd-root .zd-card-shell{
  background:var(--surface-2);
  border:1px solid var(--line);
  color:var(--ink);
}

/* ============ BUTTONS ============ */
.zd-root .zd-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-weight:700; letter-spacing:.01em; border-radius:14px; border:1px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  white-space:nowrap;
}
.zd-root .zd-btn:active{transform:translateY(1px) scale(.99);}
.zd-root .zd-btn-lacquer{
  background:var(--accent); color:#fff;
  box-shadow:0 6px 16px -6px rgba(217,119,6,.4);
}
.zd-root .zd-btn-lacquer:hover{ background:#B45309; box-shadow:0 8px 20px -6px rgba(217,119,6,.5); transform:translateY(-1px);}
.zd-root .zd-btn-brass{
  background:var(--surface); color:var(--ink); border:1px solid var(--line-strong);
}
.zd-root .zd-btn-brass:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-1px); }
.zd-root .zd-btn-ghost-dark{
  background:transparent; border-color:var(--line-strong); color:var(--ink);
}
.zd-root .zd-btn-ghost-dark:hover{ border-color:var(--accent); color:var(--accent); }
.zd-root .zd-btn-ghost-light{
  background:var(--surface); border-color:var(--line-strong); color:var(--ink-soft);
}
.zd-root .zd-btn-ghost-light:hover{ border-color:var(--accent); color:var(--accent); }
.zd-root .zd-btn-disabled, .zd-root .zd-btn:disabled{ opacity:.35; pointer-events:none; }

/* ============ HERO VISUAL (score -> MIDI, simple stacked cards) ============ */

/* ============ LIFT CARDS (subtle, not spinning) ============ */
.zd-root .zd-tilt{ transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.zd-root .zd-tilt:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 36px -22px rgba(24,20,15,.28);
  border-color:var(--line-strong);
}

/* ============ DROPZONE ============ */
.zd-root .zd-dropzone{
  position:relative; border:2px dashed var(--line-strong); border-radius:28px;
  transition:all .2s ease; background:var(--surface);
}
.zd-root .zd-dropzone.zd-drag{ border-color:var(--accent); background:var(--accent-soft); }
.zd-root .zd-dropzone:hover{ border-color:var(--accent-2); }

/* ============ SPINNER ============ */
.zd-root .zd-spin-ring{
  border:4px solid var(--line); border-top-color:var(--accent); border-radius:50%;
  animation:spin 1s linear infinite;
}
.zd-root @keyframes spin{ to{ transform:rotate(360deg); } .zd-root }

/* ============ REVEAL ============ */
.zd-reveal{ animation:fadeUp .4s ease both; }
.zd-root @keyframes fadeUp{ from{ opacity:0; transform:translateY(10px);} .zd-root to{ opacity:1; transform:translateY(0);} .zd-root }
.zd-pulse-soft{ animation:pulseSoft 1.8s ease-in-out infinite; }
.zd-root @keyframes pulseSoft{ 0%,100%{opacity:1;} .zd-root 50%{opacity:.55;} .zd-root }

/* ============ MISC ============ */
.zd-hairline{ height:1px; background:var(--line); }
.zd-root .zd-hairline-lt{ height:1px; background:var(--line); }
.zd-root .zd-pdf-canvas{ max-width:100%; height:auto; display:block; }
.zd-root .zd-icon{ display:inline-block; vertical-align:middle; }
.zd-root input[type="text"]:focus, .zd-root input[type="password"]:focus{ outline:2px solid var(--accent-2); outline-offset:1px; }
.zd-root .zd-dot{ width:5px; height:5px; border-radius:50%; }
.zd-root .zd-row-hover:hover{ background:var(--surface-2); }

@media (prefers-reduced-motion: reduce){
  .zd-root, .zd-root *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}
/* ============ SELF-CONTAINED UTILITY LAYER (no external CDN needed) ============ */
.zd-root .flex{display:flex;} .zd-root .inline-flex{display:inline-flex;} .zd-root .grid{display:grid;} .zd-root .block{display:block;} .zd-root .hidden{display:none;}
.zd-root .flex-1{flex:1 1 0%;} .zd-root .flex-col{flex-direction:column;} .zd-root .flex-grow{flex-grow:1;} .zd-root .flex-wrap{flex-wrap:wrap;}
.zd-root .items-center{align-items:center;} .zd-root .items-start{align-items:flex-start;}
.zd-root .justify-between{justify-content:space-between;} .zd-root .justify-center{justify-content:center;}
.zd-root .grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr));}
.zd-root .grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.zd-root .grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.zd-root .gap-2{gap:0.6rem;} .zd-root .gap-3{gap:0.9rem;} .zd-root .gap-4{gap:1.2rem;} .zd-root .gap-6{gap:1.8rem;} .zd-root .gap-10{gap:3rem;}
.zd-root .relative{position:relative;} .zd-root .absolute{position:absolute;} .zd-root .fixed{position:fixed;} .zd-root .sticky{position:sticky;}
.zd-root .top-0{top:0;} .zd-root .inset-0{top:0;right:0;bottom:0;left:0;}
.zd-root .z-10{z-index:10;} .zd-root .z-50{z-index:50;} .zd-root .z-\[100\]{z-index:100;}
.zd-root .overflow-hidden{overflow:hidden;}
.zd-root .min-h-screen{min-height:100vh;} .zd-root .min-w-0{min-width:0;}
.zd-root .w-8{width:2.4rem;} .zd-root .w-9{width:2.7rem;} .zd-root .w-10{width:3rem;} .zd-root .w-11{width:3.3rem;} .zd-root .w-12{width:3.6rem;} .zd-root .w-14{width:4.2rem;} .zd-root .w-16{width:4.8rem;} .zd-root .w-20{width:6rem;} .zd-root .w-24{width:7.2rem;} .zd-root .w-full{width:100%;} .zd-root .w-fit{width:fit-content;}
.zd-root .h-8{height:2.4rem;} .zd-root .h-9{height:2.7rem;} .zd-root .h-10{height:3rem;} .zd-root .h-11{height:3.3rem;} .zd-root .h-12{height:3.6rem;} .zd-root .h-14{height:4.2rem;} .zd-root .h-16{height:4.8rem;} .zd-root .h-20{height:6rem;} .zd-root .h-24{height:7.2rem;}
.zd-root .max-w-md{max-width:33.6rem;} .zd-root .max-w-lg{max-width:38.4rem;} .zd-root .max-w-2xl{max-width:50.4rem;}
.zd-root .mx-auto{margin-left:auto; margin-right:auto;}
.zd-root .p-2{padding:0.6rem;} .zd-root .p-3{padding:0.9rem;} .zd-root .p-4{padding:1.2rem;} .zd-root .p-5{padding:1.5rem;} .zd-root .p-6{padding:1.8rem;} .zd-root .p-7{padding:2.1rem;} .zd-root .p-8{padding:2.4rem;} .zd-root .p-10{padding:3rem;} .zd-root .p-12{padding:3.6rem;} .zd-root .p-16{padding:4.8rem;}
.zd-root .px-2{padding-left:0.6rem;padding-right:0.6rem;} .zd-root .px-3{padding-left:0.9rem;padding-right:0.9rem;} .zd-root .px-4{padding-left:1.2rem;padding-right:1.2rem;} .zd-root .px-5{padding-left:1.5rem;padding-right:1.5rem;} .zd-root .px-6{padding-left:1.8rem;padding-right:1.8rem;} .zd-root .px-7{padding-left:2.1rem;padding-right:2.1rem;} .zd-root .px-8{padding-left:2.4rem;padding-right:2.4rem;}
.zd-root .py-0\.5{padding-top:0.15rem;padding-bottom:0.15rem;} .zd-root .py-1{padding-top:0.3rem;padding-bottom:0.3rem;} .zd-root .py-1\.5{padding-top:0.45rem;padding-bottom:0.45rem;} .zd-root .py-2{padding-top:0.6rem;padding-bottom:0.6rem;} .zd-root .py-2\.5{padding-top:0.75rem;padding-bottom:0.75rem;} .zd-root .py-3\.5{padding-top:1.05rem;padding-bottom:1.05rem;} .zd-root .py-4{padding-top:1.2rem;padding-bottom:1.2rem;} .zd-root .py-5{padding-top:1.5rem;padding-bottom:1.5rem;} .zd-root .py-6{padding-top:1.8rem;padding-bottom:1.8rem;} .zd-root .py-7{padding-top:2.1rem;padding-bottom:2.1rem;} .zd-root .py-20{padding-top:6rem;padding-bottom:6rem;}
.zd-root .pt-6{padding-top:1.8rem;}
.zd-root .mb-1{margin-bottom:0.3rem;} .zd-root .mb-2{margin-bottom:0.6rem;} .zd-root .mb-3{margin-bottom:0.9rem;} .zd-root .mb-4{margin-bottom:1.2rem;} .zd-root .mb-5{margin-bottom:1.5rem;} .zd-root .mb-6{margin-bottom:1.8rem;} .zd-root .mb-7{margin-bottom:2.1rem;} .zd-root .mb-8{margin-bottom:2.4rem;} .zd-root .mb-10{margin-bottom:3rem;} .zd-root .mb-14{margin-bottom:4.2rem;}
.zd-root .mt-1{margin-top:0.3rem;} .zd-root .mt-2{margin-top:0.6rem;} .zd-root .mt-3{margin-top:0.9rem;} .zd-root .mt-4{margin-top:1.2rem;} .zd-root .mt-5{margin-top:1.5rem;} .zd-root .mt-6{margin-top:1.8rem;} .zd-root .mt-7{margin-top:2.1rem;} .zd-root .mt-8{margin-top:2.4rem;} .zd-root .mt-10{margin-top:3rem;}
.zd-root .space-y-3>*+*{margin-top:0.9rem;} .zd-root .space-y-5>*+*{margin-top:1.5rem;} .zd-root .space-y-6>*+*{margin-top:1.8rem;} .zd-root .space-y-7>*+*{margin-top:2.1rem;}
.zd-root .text-xs{font-size:0.9rem;line-height:1.2rem;} .zd-root .text-sm{font-size:1.05rem;line-height:1.5rem;} .zd-root .text-base{font-size:1.2rem;line-height:1.8rem;} .zd-root .text-lg{font-size:1.35rem;line-height:2.1rem;} .zd-root .text-xl{font-size:1.5rem;line-height:2.1rem;} .zd-root .text-2xl{font-size:1.8rem;line-height:2.4rem;} .zd-root .text-3xl{font-size:2.25rem;line-height:2.7rem;} .zd-root .text-4xl{font-size:2.7rem;line-height:3rem;}
.zd-root .text-\[13px\]{font-size:13px;} .zd-root .text-\[14px\]{font-size:14px;}
.zd-root .text-center{text-align:center;} .zd-root .uppercase{text-transform:uppercase;} .zd-root .italic{font-style:italic;}
.zd-root .tracking-tight{letter-spacing:-.02em;} .zd-root .tracking-widest{letter-spacing:.1em;}
.zd-root .leading-relaxed{line-height:1.625;}
.zd-root .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.zd-root .font-medium{font-weight:500;} .zd-root .font-semibold{font-weight:600;} .zd-root .font-bold{font-weight:700;} .zd-root .font-black{font-weight:900;}
.zd-root .rounded-lg{border-radius:0.6rem;} .zd-root .rounded-xl{border-radius:0.9rem;} .zd-root .rounded-2xl{border-radius:1.2rem;} .zd-root .rounded-3xl{border-radius:1.8rem;} .zd-root .rounded-full{border-radius:9999px;}
.zd-root .rounded-\[1\.5rem\]{border-radius:1.8rem;} .zd-root .rounded-\[2rem\]{border-radius:2.4rem;} .zd-root .rounded-\[2\.5rem\]{border-radius:3rem;}
.zd-root .shadow-2xl{box-shadow:0 25px 50px -12px rgba(0,0,0,.25);}
.zd-root .backdrop-blur-md{backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);}
.zd-root .transition-colors{transition:color .15s ease, background-color .15s ease, border-color .15s ease;}
.zd-root .cursor-pointer{cursor:pointer;}
.zd-root .bg-transparent{background:transparent;}
.zd-root .placeholder\:opacity-40::placeholder{opacity:.4;}
.zd-root .\!px-0{padding-left:0!important;padding-right:0!important;}
@media (min-width:768px){
  .zd-root .md\:flex{display:flex;} .zd-root .md\:gap-10{gap:3rem;} .zd-root .md\:p-14{padding:4.2rem;} .zd-root .md\:col-span-3{grid-column:span 3 / span 3;} .zd-root .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));} .zd-root .md\:hidden{display:none;} .zd-root .md\:flex-row{flex-direction:row;} .zd-root .md\:text-left{text-align:left;} .zd-root .md\:justify-start{justify-content:flex-start;}
}
@media (min-width:1024px){
  .zd-root .lg\:col-span-4{grid-column:span 4 / span 4;} .zd-root .lg\:col-span-8{grid-column:span 8 / span 8;} .zd-root .lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr));} .zd-root .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
}