@keyframes centerTitleFadeIn {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
  }
  80% {
    opacity: 1;
    transform: translateY(-8px) scale(1.03);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.center-title {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 1;
  opacity: 0;
  display: inline-block;
  /* smooth hover animation: only transform/opacity/transforms, no color changes */
  transition: opacity 0.3s, transform 0.28s cubic-bezier(.2,.9,.2,1);
}

/* Hover effect: lift, slight scale (no color or text-shadow changes) - smoother easing */
.center-title:hover h1 {
  /* use scale-only for smoother hover (avoid vertical jump) */
  transform: scale(1.02);
  transition: transform 360ms cubic-bezier(.2,.9,.25,1);
  will-change: transform;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}
.center-title.animated {
  animation: centerTitleFadeIn 1.1s cubic-bezier(.6,-0.01,.4,1.01) forwards;
}
/* subtitle and headline staggered animations */
.center-subtitle {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 22px;
  color: #222;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.center-title.animated .center-subtitle {
  animation: subtitleIn 0.6s ease forwards;
}
@keyframes subtitleIn {
  to { opacity: 1; transform: translateY(0); }
}

.center-title h1 {
  display: inline-block;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  /* smoother, snappier transform easing and slightly longer opacity for pleasant fade */
  transition: opacity 0.45s ease, transform 300ms cubic-bezier(.22,.9,.3,1);
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}
.center-title.animated h1 {
  animation: headlineIn 0.9s cubic-bezier(.2,.9,.2,1) 0.35s forwards;
}
@keyframes headlineIn {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Alternate hover effect: lift + subtle scale (remove skew for a smoother feel) */
.center-title h1 {
  position: relative;
  /* smoother base transition for headline transforms and letter-spacing */
  transition: transform 360ms cubic-bezier(.2,.9,.25,1), letter-spacing 240ms ease;
  will-change: transform;
  transform-origin: 50% 50%;
  transform: translateZ(0);
}
.center-title:hover h1 {
  transform: scale(1.02);
  letter-spacing: 0.4px;
}

.center-title h1 {
  /* ensure the default weight is the lightest available */
  font-weight: 100; /* lowest default weight */
  /* no font-weight transition; transforms keep their timing */
  transition: transform 360ms cubic-bezier(.2,.9,.25,1);
  will-change: transform, opacity;
}
.center-title:hover h1,
.center-title h1:hover {
  font-weight: 550; /* visually heavier on hover */
}
@keyframes centerTitleFadeIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -10%) scale(0.98);
  }
  80% {
    opacity: 1;
    transform: translate(-50%, -60%) scale(1.03);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
/* Hiệu ứng hover cho desktop icon giống macOS */
.desktop-icons .icon {
  position: absolute;
  transition: transform 220ms cubic-bezier(.2,.9,.2,1);
  -webkit-tap-highlight-color: transparent;
}

/* subtle rounded panel behind icon on hover */
.desktop-icons .icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -8px;
  transform: translateX(-50%) scale(1);
  width: 76px;
  height: 74px;
  border-radius: 6px;
  background: #e9eef6;
  border: 1px solid rgba(0,0,0,0.08);
  opacity: 0;
  transition: opacity 140ms ease, transform 180ms cubic-bezier(.2,.9,.2,1);
  z-index: 0;
}

.desktop-icons .icon img {
  position: relative;
  z-index: 1;
  transition: transform 220ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms ease, border-radius 220ms ease;
}

.desktop-icons .icon span {
  display: block;
  background: transparent;
  color: #222;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 14px;
  margin-top: 6px;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
  position: relative;
  z-index: 2;
}

.desktop-icons .icon:hover::before {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.desktop-icons .icon:hover img {
  transform: translateY(-6px) scale(1.12);
  box-shadow: none;
  border-radius: 0;
}

.desktop-icons .icon:hover span {
  background: #1677ff;
  color: #fff;
  transform: translateY(-6px);
  padding: 6px 8px;
  border-radius: 6px;
  display: inline-block;
  min-width: 76px;
  text-align: center;
}
/* Hiện text in nghiêng khi hover vào icon project */
.desktop-icons .icon.folder:hover::after {
  content: "double click";
  display: block;
  font-style: italic;
  color: #444;
  font-size: 15px;
  margin-top: 2px;
  text-align: center;
  letter-spacing: 0.5px;
}
/* Vị trí mặc định cho từng icon desktop */
.desktop-icons {
  position: relative;
}
.desktop-icons .icon {
  position: absolute;
}
.desktop-icons .icon.file {
  left: 72%; top: 26%; /* Resume.pdf (right cluster) */
}
.desktop-icons .icon.folder:nth-child(2) {
  left: 12%; top: 62%; /* About Me (left cluster) */
}
.desktop-icons .icon.folder:nth-child(3) {
  left: 84%; top: 12%; /* ZETA APP (top-right) */
}
.desktop-icons .icon.folder#project01-icon {
  left: 60%; top: 70%; /* BLUES QUIZ - lower-right cluster */
}
.desktop-icons .icon.folder:nth-child(5) {
  left: 88%; top: 48%; /* FUKUOKA (far right) */
}
.desktop-icons .icon.folder:nth-child(6) {
  left: 66%; top: 28%; /* JOB AND RECRUITMENT (right cluster) */
}
.desktop-icons .icon.folder:nth-child(7) {
  left: 20%; top: 62%; /* Dont Click (next to About Me) */
}
.desktop-icons .icon.trash {
  right: 2%; bottom: 8%; /* fallback trash at bottom-right if used */
  left: auto;
  top: auto;
}
/* Modal Spotify */
.spotify-modal {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.12);
  z-index: 120;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  pointer-events: none;
}
.spotify-content {
  background: #222;
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(80,80,80,0.18);
  padding: 18px 18px 10px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 32px 32px 0;
  pointer-events: auto;
}
.spotify-content { cursor: grab; touch-action: none; }
.spotify-content.dragging { cursor: grabbing; }
.spotify-modal.show .spotify-content {
  animation: finderFadeIn 0.35s cubic-bezier(.4,1.6,.4,1) forwards;
}
.spotify-modal.hide .spotify-content {
  animation: finderFadeOut 0.35s cubic-bezier(.4,1.6,.4,1) forwards;
}
/* Animation khi tắt modal Finder */
.finder-modal.hide .finder-content {
  animation: finderFadeOut 0.35s cubic-bezier(.4,1.6,.4,1) forwards;
}
@keyframes finderFadeOut {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  100% {
    opacity: 0;
    transform: scale(0.95) translateY(40px);
  }
}
/* Animation cho modal Finder */
.finder-modal.show .finder-content {
  /* macOS-like open: slight rise, subtle overshoot, and deblur */
  transform-origin: 50% 18%;
  animation: finderFadeIn 360ms cubic-bezier(.2,.9,.2,1) forwards;
}
@keyframes finderFadeIn {
  0% {
    opacity: 0;
    transform: translateY(-18px) scale(0.985);
    filter: blur(6px) saturate(0.9);
  }
  60% {
    opacity: 1;
    transform: translateY(6px) scale(1.01);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: none;
  }
}
/* Modal Finder cho Project 01 */
.finder-modal {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.08);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.finder-content {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(80,80,80,0.18);
  width: 1200px;
  max-width: 99vw;
  min-height: 500px;
  /* allow header/tooltips to escape the rounded container instead of being clipped */
  overflow: visible; /* ensure pseudo-element tooltips are visible */
  position: relative;
  z-index: 111; /* sit above page background but below modal-level overlays */
}
.finder-content { transition: left 0.22s ease, top 0.22s ease, width 0.22s ease, height 0.22s ease, transform 0.18s ease; }

/* maximized / zoomed finder */
.finder-content.finder-maximized {
  /* increased inset when maximized (smaller than full viewport) */
  position: fixed !important;
  left: 48px !important;
  top: 48px !important;
  width: calc(100vw - 96px) !important;
  height: calc(100vh - 96px) !important;
  max-width: none !important;
  min-width: 0 !important;
  border-radius: 16px !important;
  transform: translateZ(0);
}
.finder-content.finder-maximized .finder-main {
  /* remove side padding so content can reach edges */
  max-height: none;
  height: calc(100% - 56px);
  overflow: auto;
  padding: 0 !important;
}

/* make image go edge-to-edge when maximized */
.finder-content.finder-maximized .finder-image {
  margin: 0 !important;
  width: 100% !important;
}
.finder-content.finder-maximized .finder-image img {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  border-radius: 0 !important;
  display: block;
}

/* Indent textual content slightly when maximized, but keep images full-bleed */
.finder-content.finder-maximized .finder-main > :not(.finder-image) {
  padding: 10px 20px !important;
}
.finder-header {
  display: flex;
  align-items: center;
  padding: 12px 18px;
  background: #f7f7f7;
  border-bottom: 1px solid #eee;
  position: relative;
  overflow: visible; /* ensure header pseudo-elements are visible */
  z-index: 110; /* sit above other page layers */
}
.finder-dot {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 50%;
  margin-right: 6px;
}
.finder-dot { cursor: default; }
/* Hide site presence UI (views / online) removed per request */
.nav-stats,
.nav-stats * {
  display: none !important;
}

/* small vertical divider between date text and time */
.nav-date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nav-date .time {
  position: relative;
  padding-left: 10px; /* space for divider */
}
.nav-date .time::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 18px;
  background: rgba(0,0,0,0.12);
  border-radius: 1px;
}
.finder-dot.red, .finder-dot.yellow { cursor: pointer; }
.finder-dot.red { background: #ff5f57; }
.finder-dot.green { background: #28c840; }
.finder-dot.yellow { background: #ffbd2e; }
/* Tooltip for window control dots (close/minimize/maximize) */
.finder-dot {
  position: relative;
}
.finder-dot::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(6px) scale(0.98);
  background: #ffffff;
  color: #111;
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 12px;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, transform 200ms cubic-bezier(.2,.9,.2,1);
  z-index: 1200; /* ensure tooltip sits above other modal content */
}
.finder-dot::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  width: 8px;
  height: 8px;
  transform: translateX(-50%) translateY(6px) rotate(45deg);
  background: #ffffff;
  box-shadow: 0 6px 12px rgba(0,0,0,0.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, transform 200ms cubic-bezier(.2,.9,.2,1);
  z-index: 1199; /* pointer sits just under tooltip */
}
/* specific labels */
.finder-dot.red::after { content: "Close"; }
.finder-dot.yellow::after { content: "Minimize"; }
.finder-dot.green::after { content: "Maximize"; }
.finder-dot:focus::after,
.finder-dot:focus::before,
.finder-dot:hover::after,
.finder-dot:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}
.finder-close {
  position: absolute;
  right: 18px;
  top: 10px;
  background: none;
  border: none;
  font-size: 24px;
  color: #888;
  cursor: pointer;
}
.center-title {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  /* put the title above desktop icons/dock so it receives hover events */
  z-index: 30;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
}
.finder-body {
  display: flex;
  min-height: 260px;
}
.finder-sidebar {
  width: 120px;
  background: #f7f7f7;
  border-right: 1px solid #eee;
  padding: 16px 10px;
  font-size: 14px;
}
.finder-section {
  font-weight: bold;
  margin-bottom: 6px;
  color: #888;
}
.finder-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0 0 12px 0;
}
.finder-sidebar li {
  margin-bottom: 4px;
  color: #222;
}
.finder-main {
  flex: 1;
  padding: 24px 18px 24px 18px;
  display: block;
  max-height: 480px;
  overflow-y: auto;
}
.finder-image img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 18px auto;
  border-radius: 12px;
  box-shadow: 0 2px 12px #ccc;
}

/* When finder is maximized, make images fill the content area */
.finder-content.finder-maximized .finder-image img {
  width: 100%;
  max-width: none;
  height: 100%;
}
.finder-main-title {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 8px;
  text-align: left;
}
.finder-sub {
  font-size: 13px;
  color: #888;
}
.finder-folders {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 38px;
  margin-top: 24px;
  justify-content: flex-start;
}
.finder-folder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 120px;
  font-size: 15px;
  color: #222;
}
.finder-folder img {
  display: block;
  margin: 0 auto 6px auto;
}
.finder-folder div {
  text-align: center;
  margin-top: 0;
}

/* Spacing for nav-icons images */
.nav-icons img {
  margin-right: 4px;
}
.nav-icons img:last-child {
  margin-right: 0;
}
body {
  margin: 0;
  /* macOS / system UI font stack for a native macOS look */
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "San Francisco", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #fff;
  min-height: 100vh;
  position: relative;
}
.grid-bg {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background-image: linear-gradient(#e0e0e0 1px, transparent 1px), linear-gradient(90deg, #e0e0e0 1px, transparent 1px);
  background-size: 40px 40px;
  z-index: 0;
}

/* macOS-style login overlay */
.login-overlay {
  position: fixed;
  inset: 0;
  /* stronger translucent layer and added backdrop blur to make the
     background appear more faded/muted */
  background: linear-gradient(rgba(5,10,20,0.65), rgba(5,10,20,0.65)), url('') center/cover no-repeat;
  /* blur the backdrop (supported browsers) for a frosted glass effect */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  z-index: 200;
  color: #fff;
}

/* unlock animation: subtle pulse on the center then fade the whole overlay */
/* slowed unlock animations for a softer effect */
.login-overlay.unlocking .login-center {
  animation: loginCenterPulse 760ms cubic-bezier(.2,.9,.2,1) forwards;
}
.login-overlay.unlocking .login-avatar {
  animation: avatarGlow 760ms cubic-bezier(.2,.9,.2,1) forwards;
}
.login-overlay.hide {
  animation: overlayFadeOut 620ms ease forwards;
  pointer-events: none;
}

@keyframes loginCenterPulse {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; filter: none; }
  45% { transform: translate(-50%, -50%) scale(1.08); filter: drop-shadow(0 20px 46px rgba(0,0,0,0.45)); }
  100% { transform: translate(-50%, -110%) scale(0.92); opacity: 0; filter: blur(2px); }
}

@keyframes avatarGlow {
  0% { box-shadow: 0 8px 30px rgba(0,0,0,0.5); transform: scale(1); }
  45% { box-shadow: 0 26px 56px rgba(0,0,0,0.56); transform: scale(1.08); }
  100% { box-shadow: 0 40px 80px rgba(0,0,0,0.45); transform: scale(0.9); opacity: 0; }
}

@keyframes overlayFadeOut {
  to { opacity: 0; visibility: hidden; }
}
.login-topbar {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 210;
}
.login-apple { height: 18px; opacity: 0.95; filter: invert(1) brightness(2) saturate(0.1); }
.login-status { display:flex; align-items:center; gap:10px; color:#fff; font-size:13px }
.login-status img { height:18px }
.login-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 215;
}
.login-avatar { width:92px; height:92px; border-radius:50%; box-shadow: 0 8px 30px rgba(0,0,0,0.5); border: 3px solid rgba(255,255,255,0.12); object-fit:cover }
.login-username { margin-top:12px; font-weight:600; font-size:18px; opacity:0.95 }
.login-input-wrap { margin-top:14px; display:flex; align-items:center; justify-content:center; gap:10px }
.login-input, .login-submit { box-sizing: border-box; }
.login-input { flex: 1 1 auto; width:320px; max-width:76vw; height:48px; padding:0 14px; border-radius:10px; border:none; outline:none; font-size:16px; background: rgba(255,255,255,0.12); color:#fff; display:block; }
.login-input::placeholder { color: rgba(255,255,255,0.7); }
.login-submit { height:48px; width:56px; min-width:56px; background: rgba(255,255,255,0.14); color:#fff; border:none; padding:0; border-radius:10px; font-size:18px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center }
.login-submit:hover { background: rgba(255,255,255,0.2) }

/* Password toggle button inside login input */
.login-input-wrap { position: relative; }
.login-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  height: 36px;
  width: 36px;
  border-radius: 999px;
  border: none;
  background: rgba(255,255,255,0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 6px;
}
.login-toggle:hover { background: rgba(255,255,255,0.12); }
.login-toggle svg { width:18px; height:18px; display:block; }
.login-toggle .eye-path, .login-toggle .eye-circle { stroke: #fff; stroke-width:1.6; }
.login-toggle:focus { outline: 2px solid rgba(255,255,255,0.18); }

.login-input { padding-right: 56px; }

/* default icon state: show open (eye) and hide closed (eye-off) */
.login-toggle .icon-open { display: block; }
.login-toggle .icon-closed { display: none; }

/* ensure SVG strokes are white even if paths don't inherit */
.login-toggle svg .eye-path, .login-toggle svg .eye-circle { stroke: #fff; }

/* Hide native browser password reveal / clear icons so only custom icon shows */
.login-input {
  -webkit-appearance: none;
  appearance: none;
}
.login-input::-ms-clear,
.login-input::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}
.login-input::-webkit-credentials-auto-fill-button {
  visibility: hidden;
  pointer-events: none;
  height: 0;
}
.login-input::-webkit-textfield-decoration-container,
.login-input::-webkit-textfield-decoration-button,
.login-input::-webkit-search-decoration,
.login-input::-webkit-search-cancel-button,
.login-input::-webkit-search-results-button,
.login-input::-webkit-search-results-decoration {
  display: none !important;
}

@media (max-width:600px) {
  .login-avatar { width:72px; height:72px }
  .login-input { width:200px }
}
.navbar {
  width: 100vw;
  height: 40px;
  background: rgba(255,255,255,0.9);
  display: flex;
  align-items: center;
  padding: 0 20px;
  position: fixed;
  top: 0; left: 0;
  z-index: 10;
  font-size: 16px;
  box-shadow: 0 1px 4px #eee;
}
.apple-logo {
  font-size: 20px;
  margin-right: 10px;
}
.nav-title {
  font-weight: bold;
  margin-right: 20px;
  text-decoration: underline;
  color: #222;
}
.nav-link {
  margin-right: 15px;
  color: #222;
  text-decoration: none;
}
.nav-right {
  margin-left: auto;
  margin-right: 32px;
  display: flex;
  align-items: center;
}
.nav-icons span {
  margin-right: 8px;
}
.nav-date {
  margin-left: 16px;
  color: #000;
  font-size: 14px;
  font-weight: 400;
}

/* vertical separator between time and site stats */
.nav-date::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 16px;
  background: rgba(0,0,0,0.08);
  margin: 0 10px; /* space between time and the line */
  vertical-align: middle;
  border-radius: 1px;
}

/* Site stats next to nav-date: total views and live viewers */
/* Detailed nav-stats styles removed (presence UI disabled) */

/* make the time slightly bolder and give it a subtle rainbow animated gradient */
.nav-date .time {
  font-weight: 600;
  background: linear-gradient(90deg, #ff4d4d, #ffb84d, #ffe24d, #7dff7d, #4dd0ff, #7d7dff, #ff7dff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
  animation: rainbowShift 3.6s linear infinite;
  /* faint soft outline for legibility */
  text-shadow:
    0 0 2px rgba(0,0,0,0.22),
    0 1px 2px rgba(0,0,0,0.10),
    0 -1px 0 rgba(255,255,255,0.06);
  -webkit-text-stroke: 0.28px rgba(0,0,0,0.12);
}

@keyframes rainbowShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.sticky-note {
  position: absolute;
  top: 60px; left: 30px;
  width: 260px;
  /* soft paper-like gradient and thin outline to match the reference */
  background: linear-gradient(#fff9b6, #fff6a0);
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 8px;
  /* outer drop shadow and a faint inner highlight to sell the paper edge */
  box-shadow: 0 4px 12px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.6);
  padding: 16px;
  font-size: 16px;
  z-index: 2;
}
.sticky-note ul {
  padding-left: 18px;
  margin: 8px 0 0 0;
}
.sticky-note li {
  margin-bottom: 4px;
}
.sticky-note .done {
  text-decoration: line-through;
  color: #888;
}
.center-title {
  position: absolute;
  top: 40%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 30;
  pointer-events: auto;
}
.center-title .center-subtitle {
  font-size: 24px;
  color: #222;
}

/* subtitle positioning and subtle style for the centered heading */
.center-title .center-subtitle {
  margin-bottom: 8px;
  font-family: 'Instrument Serif', -apple-system, BlinkMacSystemFont, "SF Pro Text", "San Francisco", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0.6px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.42s ease, transform 0.42s cubic-bezier(.22,.9,.3,1);
}
.center-title.animated .center-subtitle { opacity: 1; transform: translateY(0); }

/* Per-character subtitle styling (smaller, subtler than headline) */
.center-title .char-sub {
  display: inline-block;
  font-size: inherit;
  line-height: 1;
  font-weight: 300;
  /* don't animate font-weight (make hover apply weight:600 immediately) */
  /* include color in transitions so hover color change is smooth */
  transition: color 180ms ease, text-shadow 220ms ease;
  will-change: opacity, text-shadow;
  vertical-align: baseline;
  backface-visibility: hidden;
}
.center-title .char-sub:hover {
  font-weight: 550;
  /* slightly lighter black on hover */
  color: rgba(39, 39, 39, 0.85);
}
/* Use a pseudo-element overlay to render a heavier glyph and fade it in on hover.
   This avoids animating font-weight (which can be janky) and only transitions opacity. */
.center-title .char-sub::after { display: none; }
.center-title .char-sub { position: relative; }
.center-title h1 {
  /* prefer Instrument Serif for the headline, fallback to Merriweather/serifs */
    font-family: 'Instrument Serif', 'Playfair Display', 'Merriweather', Georgia, 'Times New Roman', Times, serif;
  font-size: 110px;
  font-weight: 100;
  font-style: italic;
  margin: 0;
  color: #222;
  letter-spacing: -1px;
}

/* Title wrapper for flag positioning */
.title-wrap {
  display: inline-block;
  position: relative;
  /* Prefer Instrument Serif for the title; keep fallbacks if not available locally */
  font-family: 'Instrument Serif', serif;
}
.center-flag {
  position: absolute;
  right: -1%;
  top: -12%; /* moved down slightly */
  width: 72px; /* increased size */
  height: 72px;
  object-fit: contain;
  pointer-events: none;
  transform: translateZ(0);
}

@media (max-width: 800px) {
  .center-flag { width: 38px; right: -4%; top: -8%; }
  .center-title h1 { font-size: 72px; }
}

/* Per-character hover: each character becomes its own inline block
   so hovering only increases weight for that region. Use a quick
   step transition for font-weight and a subtle text-shadow to simulate
   optical weight change without shifting layout. */
.center-title h1 .char {
  display: inline-block;
  transform-style: preserve-3d;
  white-space: pre;
  font-size: inherit;
  line-height: 1;
  /* keep a stable weight to avoid layout shifts; use transform and text-shadow for emphasis */
  font-weight: 300;
  /* smoother transitions for transform, color and text-shadow (no font-weight delay) */
  transition: transform 360ms cubic-bezier(.2,.9,.25,1), color 260ms ease, text-shadow 360ms cubic-bezier(.2,.9,.25,1);
  will-change: transform, text-shadow, color;
  vertical-align: baseline;
  backface-visibility: hidden;
  transform-origin: 50% 50%;
  transform: translateZ(0);
  /* no per-character stagger; only single-character hover */
}

/* Support for Framer-generated per-character spans */
.frameruni-r5-span {
  display: inline-block;
  transform-style: preserve-3d;
  white-space: pre;
  will-change: transform, -webkit-text-stroke-width, padding-inline;
  transform-origin: 50% 50%;
}
.center-title h1 .char:hover {
  /* no vertical movement; only subtle scale on hover to avoid jumping */
  transform: scale(1.02);
  color: rgba(0,0,0,0.92);
  will-change: transform, color;
}
/* overlay heavier glyph for smooth hover using opacity transition */
.center-title h1 .char { position: relative; }

/* Slight lift and darken base glyph for additional emphasis */
.center-title h1 .char:hover {
  /* keep hover lift effect visually but avoid translating upwards */
  transform: scale(1.02);
  color: rgba(0,0,0,0.95);
  z-index: 1;
}

/* region hover class: apply weight and stroke to a small region */
.center-title h1 .char.hover-region {
  /* simulate heavier weight smoothly using shadow + slight scale; no vertical translate */
  transform: scale(1.03);
  /* apply weight 600 on region hover */
  font-weight: 550;
  /* stacked shadows give the illusion of thicker strokes */
  text-shadow: 0.6px 0 0 rgba(0,0,0,0.85), -0.6px 0 0 rgba(0,0,0,0.85), 1.2px 0 0 rgba(0,0,0,0.65), -1.2px 0 0 rgba(0,0,0,0.65);
}

/* Wave hover: when hovering the whole title, characters animate in sequence using --i */
/* removed title-wide wave hover */

.desktop-icons {
  position: absolute;
  width: 100vw; height: 100vh;
  top: 0; left: 0;
  z-index: 2;
}
.icon {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90px;
  cursor: pointer;
}
.icon img {
  width: 48px;
  margin-bottom: 4px;
}
.icon span {
  font-size: 14px;
  color: #222;
  text-align: center;
}
.icon.file { top: 300px; left: 120px; }
.icon.folder { top: 400px; left: 220px; }
.icon.trash { top: 600px; right: 80px; }
.dock {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  background: rgba(120,120,120,0.35);
  border-radius: 16px;
  box-shadow: 0 4px 24px 4px rgba(80,80,80,0.18);
  padding: 4px 10px;
  display: flex;
  gap: 4px;
  z-index: 20;
  align-items: center;
  min-width: 600px;
  max-width: 90vw;
}
.dock img {
  width: 54px;
  height: 54px;
  margin: 0 0px;
  border-radius: 2px;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  outline: none !important;
  transition: transform 0.32s cubic-bezier(.4,1.6,.4,1), box-shadow 0.18s;
  box-shadow: 0 1px 4px rgba(80,80,80,0.10);
}
.dock img:hover {
  transform: scale(1.35) translateY(-8px);
  box-shadow: none !important;
  background: none !important;
  filter: none !important;
  outline: none !important;
}
.dock-spotify {
  position: relative;
  display: inline-block;
}
.dock-spotify img {
  display: block;
}
.dock-dot {
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background: #111;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(80,80,80,0.18);
}

/* Tooltip popup for dock items (Spotify) */
.dock-spotify {
  --tooltip-bg: #ffffff;
  --tooltip-color: #111;
}
.dock-spotify::after {
  content: "open me";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 20px);
  transform: translateX(-50%) translateY(10px) scale(.98);
  background: var(--tooltip-bg);
  color: var(--tooltip-color);
  padding: 8px 12px;
  border-radius: 18px;
  font-size: 13px;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(0,0,0,0.16);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 200ms cubic-bezier(.2,.9,.2,1);
  z-index: 9999;
}
.dock-spotify::before {
  /* small pointer */
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 14px);
  width: 10px;
  height: 10px;
  transform: translateX(-50%) translateY(10px) rotate(45deg);
  background: var(--tooltip-bg);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 200ms cubic-bezier(.2,.9,.2,1);
  z-index: 9998;
}
.dock-spotify:hover::after,
.dock-spotify:focus::after,
.dock-spotify:hover::before,
.dock-spotify:focus::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}
/* Generic tooltip for dock images */
.dock img[alt], .dock > img {
  position: relative;
}
.dock > img::after,
.dock > img::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 14px);
  transform: translateX(-50%) translateY(6px) scale(0.98);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, transform 200ms cubic-bezier(.2,.9,.2,1);
  z-index: 9999;
}
.dock > img::after {
  background: #ffffff;
  color: #111;
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 12px;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.dock > img::before {
  width: 8px; height: 8px;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(6px) rotate(45deg);
  background: #ffffff;
  box-shadow: 0 6px 12px rgba(0,0,0,0.08);
}
.dock > img[alt]::after { content: attr(alt); }
.dock > img[alt]:hover::after,
.dock > img[alt]:focus::after,
.dock > img[alt]:hover::before,
.dock > img[alt]:focus::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* Tooltip for desktop icons (uses the <span> label text) */
.desktop-icons .icon {
  --tooltip-bg: #ffffff;
  --tooltip-color: #111;
}
.desktop-icons .icon::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  top: -8px;
  transform: translateX(-50%) translateY(-10px) scale(0.98);
  background: var(--tooltip-bg);
  color: var(--tooltip-color);
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 12px;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, transform 200ms cubic-bezier(.2,.9,.2,1);
  z-index: 9999;
}
.desktop-icons .icon::before { z-index: 0; }
.desktop-icons .icon:hover::after,
.desktop-icons .icon:focus::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px) scale(1);
}