:root{
  --fg:#111;
  --muted:#6b7280;
  --accent:#8b5cf6;
  --accent-2:#a78bfa;
}
@media (prefers-color-scheme: dark){
  :root{ --fg:#e9e9e9; --muted:#a3a3a3 }
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin: 0 !important;0;
  background:transparent;
  display:block;
  align-items:flex-start;
  justify-content:flex-start;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, Arial;
}
.nb-line{
  margin: 0 !important;0;
  color:var(--fg);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: .1px;
  display:block;
  align-items:flex-start;
  gap:.5rem;
}
#nb-prefix{ opacity:.9 }

/* animated link word */
.nb-drib{
  position:relative;
  display:inline-block;
  color:var(--fg);
  text-decoration:none;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: shimmer 3s linear infinite;
  background-size: 200% 100%;
  font-weight: 600;
}
@keyframes shimmer{
  0%{ background-position: 0% 0 }
  100%{ background-position: 200% 0 }
}

/* hand-drawn underline that wiggles on hover */
.nb-underline{
  position:absolute; left:-6px; right:-6px; bottom:-2px; height:18px; width: calc(100% + 12px);
  stroke: var(--accent);
  stroke-width: 2.5;
  fill: none;
  opacity:.0;
  transition: opacity .2s ease;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.04));
}
.nb-drib:hover .nb-underline{ opacity:.9 }
.nb-drib:hover .nb-underline path{
  animation: wiggle .75s ease-in-out forwards;
}
@keyframes wiggle{
  0%{ d: path("M2 14 C 40 6, 80 6, 218 14"); }
  50%{ d: path("M2 14 C 40 10, 80 3, 218 14"); }
  100%{ d: path("M2 14 C 40 6, 80 6, 218 14"); }
}

/* reduced motion: stop shimmer + underline animation */
@media (prefers-reduced-motion: reduce){
  .nb-drib{ animation: none; background: none; color: var(--fg) }
  .nb-underline{ display:none }
}

.peek-wrapper {
    display: inline-block;
    text-align: left;
}
.peek-wrapper .subtext {
    font-size: 0.9rem;
    color: #666;
    margin-top: 4px;
}
.dribbble-link {
    position: relative;
    color: #b259ff;
    text-decoration: none;
}
.dribbble-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 3px;
    background: #b259ff;
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}
.dribbble-link:hover::after {
    transform: scaleX(1);
}


/* --- Inline Dribbble link tweaks: hover-only swoosh & left-aligned subtext --- */
.nb-wrap{ display:block; max-width:900px; margin: 0 !important;0 auto; }
.nb-line{ margin: 0 !important;0; color:var(--fg, #111); font-size:15px; font-weight:500; line-height:1.35; letter-spacing:.1px; display:block; align-items:flex-start; gap:.5rem; }
.nb-drib{ position:relative; display:inline-block; text-decoration:none; background: linear-gradient(90deg, var(--accent, #8b5cf6), var(--accent-2, #a78bfa)); background-clip:text; -webkit-background-clip:text; color:transparent; font-weight:600; }
.nb-underline{ position:absolute; left:-6px; right:-6px; bottom:-2px; height:18px; width:calc(100% + 12px); stroke: var(--accent, #8b5cf6); stroke-width:2.5; fill:none; opacity:0; transition:opacity .18s ease; }
.nb-drib:hover .nb-underline{ opacity:.95; }
.nb-drib:hover .nb-underline path{ animation: nb-wiggle .75s ease-in-out forwards; }
@keyframes nb-wiggle{ 0%{ d:path("M2 14 C 40 6, 80 6, 218 14"); } 50%{ d:path("M2 14 C 40 10, 80 3, 218 14"); } 100%{ d:path("M2 14 C 40 6, 80 6, 218 14"); } }
.nb-sub{ margin-top:6px; margin-left:0; color:var(--muted, #6b7280); font-size:14px; }

/* Notion-safe top-left alignment overrides */
html, body { margin:0 !important; padding:0 !important; }
.peek-container, .nb-wrap, .container, .wrapper, .block { 
  margin:0 !important; padding:0 !important; text-align:left !important; width:100% !important; 
}
p { margin:0 !important; }