:root{
  /* base */
  --bg:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --border:#e5e7eb;
  --card:#fafafa;

  --radius:16px;
  --container:1200px;
  --font-type:'Space Grotesk', sans-serif;
  --paper:#fbf8f3;
  --ink:#2b2b2b;
  --serif:var(--font-type);
  --sans:var(--font-type);

  /* brand palette */
  --accent-red:#d04a4a;
  --accent-gold:#e8b05c;
  --accent-brown:#d0805c;

  /* semantic mapping (DO NOT remove) */
  --accent: var(--accent-red);        /* 默认主色 */
  --accent-2: var(--accent-brown);    /* 次强调色（若需要） */
}

/* Dark mode variables */
[data-theme="dark"]{
  --bg:#1a1a1a;
  --text:#e5e5e5;
  --muted:#9ca3af;
  --border:#374151;
  --card:#252525;
  --paper:#2a2a2a;
  --ink:#e5e5e5;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Space Grotesk', sans-serif;background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh;position:relative;overflow-x:hidden;transition:background-color 0.3s ease,color 0.3s ease}
img{max-width:100%;display:block}
.container{max-width:var(--container);margin:0 auto;padding:64px 48px 48px 48px}
.main-content .container{padding-left:200px}
@media (max-width: 1200px){
  .main-content .container{padding-left:180px}
}
@media (max-width: 900px){
  .main-content .container{padding-left:48px}
}

/* Disable animated gradient layers */
body::before, body::after{display:none}

/* Page accent themes */
.page-about{--accent:#d04a4a}
.page-research,.page-blog{--accent:#d04a4a}
.page-projects{--accent:#d04a4a}
.page-misc{--accent:#d04a4a}
.page-gallery{--accent:#d04a4a}
.page-404{--accent:#d04a4a}

/* 404 Page */
.error-page{min-height:60vh;display:flex;align-items:center;justify-content:center;padding:80px 20px;text-align:center}
.error-content{max-width:600px;width:100%}
.error-number{font-size:120px;font-weight:700;line-height:1;color:var(--accent);margin-bottom:16px;font-family:var(--font-type);letter-spacing:-4px;opacity:0.9}
.error-heading{font-size:32px;font-weight:600;color:var(--text);margin:0 0 16px 0;font-family:var(--font-type);letter-spacing:-0.5px}
.error-message{font-size:16px;color:var(--muted);margin:0 0 40px 0;line-height:1.6;max-width:500px;margin-left:auto;margin-right:auto}
.error-actions{display:flex;flex-direction:column;gap:24px;align-items:center}
.error-button{display:inline-block;padding:12px 32px;background:var(--accent);color:#fff;text-decoration:none;border-radius:8px;font-size:15px;font-weight:600;font-family:var(--font-type);transition:all 0.3s ease;box-shadow:0 2px 8px rgba(208,74,74,0.2)}
.error-button:hover{background:#b83939;transform:translateY(-2px);box-shadow:0 4px 12px rgba(208,74,74,0.3);color:#fff}
.error-button.primary{background:var(--accent)}
.error-nav{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:center}
.error-nav-link{color:var(--muted);text-decoration:none;font-size:14px;font-weight:500;padding:6px 12px;border-radius:6px;transition:all 0.2s ease;font-family:var(--font-type)}
.error-nav-link:hover{color:var(--accent);background:rgba(208,74,74,0.05)}
@media (max-width: 768px){
  .error-number{font-size:80px;letter-spacing:-2px}
  .error-heading{font-size:24px}
  .error-message{font-size:14px}
  .error-nav{flex-direction:column;gap:8px}
  .error-nav-link{display:block;width:100%;text-align:center;padding:8px 16px}
}

/* Use accent for headings and emphasis */
.about-col h4,.section-title::before,.tag{background:initial}
.about-col h4{color:var(--accent)}
.section-title::before{background:var(--accent)}
.nav-link.is-active{color:var(--accent)}

/* Site Layout */
.site-wrapper{min-height:100vh}
.content-wrapper{display:flex;flex-direction:column;min-height:100vh}
.main-content{flex:1}

/* Header */
.site-header{position:fixed;left:24px;top:24px;z-index:10;background:transparent;backdrop-filter:blur(10px);border-radius:12px;padding:24px 16px 16px 16px;transition:background-color 0.3s ease;width:auto;max-width:none}
[data-theme="dark"] .site-header{background:transparent}
.header-inner{display:flex;flex-direction:column;gap:8px;width:auto;min-width:fit-content}
.site-logo{font-size:24px;text-decoration:none;display:inline-block;margin-bottom:8px;transition:transform 0.2s ease}
.site-logo:hover{transform:scale(1.1)}
.nav{display:flex;flex-direction:column;gap:4px}
.nav-link{padding:6px 12px;color:var(--muted);text-decoration:none;font-weight:500;font-family:var(--font-type);font-size:13px;letter-spacing:.3px;display:block;transition:color 0.2s ease;border-radius:6px}
.nav-link.is-active{color:var(--text);background:rgba(0,0,0,0.03)}
[data-theme="dark"] .nav-link.is-active{background:rgba(255,255,255,0.05)}
.nav-link:hover{color:#d04a4a;background:rgba(0,0,0,0.03)}
[data-theme="dark"] .nav-link:hover{background:rgba(255,255,255,0.05)}
.social{display:flex;flex-direction:column;gap:8px;margin-top:12px;padding-top:12px}
.icon-link{color:var(--muted);text-decoration:none;padding:4px 0;font-size:12px;transition:color 0.2s ease}
.icon-link:hover{color:var(--text)}
@media (max-width: 900px){
  .site-header{position:fixed;left:50%;top:20px;transform:translateX(-50%);width:auto;background:transparent;backdrop-filter:blur(10px);border-radius:12px;padding:12px 20px}
  [data-theme="dark"] .site-header{background:transparent}
  .header-inner{flex-direction:row;align-items:center;gap:16px}
  .nav{flex-direction:row;gap:12px}
  .nav-link{padding:6px 10px;font-size:12px}
  .social{flex-direction:row;margin-top:0;padding-top:0;gap:12px;margin-left:12px;padding-left:12px}
  .icon-link{padding:0}
}

/* HERO retained for home */
.hero{display:grid;grid-template-columns:160px 1fr;gap:28px;align-items:center;margin-top:24px}
.hero .avatar{width:160px;height:160px;border-radius:24px;overflow:hidden;border:1px solid var(--border)}
.hero h1{margin:0;font-size:36px;line-height:1.2;font-family:var(--font-type);letter-spacing:.4px}
.hero .subtitle{margin-top:4px;color:var(--muted);font-weight:600;letter-spacing:.2px}
.hero p{margin:12px 0 0}

/* Spread (home) */
.spread{background:var(--paper);border:1px solid var(--border);border-radius:18px;margin-top:24px}
.spread-inner{display:grid;grid-template-columns:1fr 1fr;gap:0}
.page{padding:48px 48px 56px 48px;position:relative}
.page+.page{border-left:1px solid var(--border)}
.page .sect-label{font-family:var(--font-type);text-transform:lowercase;letter-spacing:.06em;color:var(--ink);margin:6px 0 10px}
.page .floor{font-family:var(--font-type);font-size:22px;margin:0 0 8px 0}
.rule{height:1px;background:#e7e1d5;margin:10px 0 18px 0}
.columns{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.copy{font-size:14px;color:#555;line-height:1.8}
.figure{background:#f3f1ec;border:1px solid #e6e1d7}
.figure.sketch{border-style:dashed}
.caption{font-size:12px;color:#7a7a7a;margin-top:6px}
.note{color:#a15353;font-size:12px}

/* Section */
.section-title{display:inline-block;position:relative;font-size:18px;margin:40px 0 12px;font-family:var(--font-type);letter-spacing:.4px;z-index:1;font-weight:600}
.section-title::before{content:"";position:absolute;left:-2px;right:-2px;bottom:0.1em;height:0.45em;background:rgba(208,74,74,0.25);border-radius:2px 4px 1px 3px;z-index:-1;clip-path:polygon(2px 0,calc(100% - 2px) 0,100% 12%,100% 88%,calc(100% - 3px) 100%,0 100%,0 85%,0 15%)}
.muted{color:var(--muted)}

/* About page — exact reference layout */
.about-lede{font-family:var(--serif);font-size:28px;line-height:1.35;color:#222;margin:0}
.about-divider{display:none}

.about-grid{display:grid;grid-template-columns:260px 1fr 1fr 1fr 1fr;gap:28px;align-items:start}
.about-col h4{font-family:var(--font-type);font-variant-caps:small-caps;font-size:13px;letter-spacing:.08em;margin:0 0 12px 0;color:#333}
.about-col ul{list-style:none;margin:0;padding:0}
.stack li{margin:0 0 10px 0}
.role{font-family:var(--serif);font-weight:600;color:#222}
.meta{color:#555;font-size:14px}
.list li{margin:0 0 6px 0}
.contact .label{font-family:var(--font-type);font-variant-caps:small-caps;font-size:12px;letter-spacing:.06em;color:#444}
.about-col.image img{width:260px;height:200px;object-fit:cover;border-radius:4px;filter:grayscale(10%)}

/* Profile page layout */
.profile-container{width:100%;margin:0 auto;display:grid;grid-template-columns:3fr 5fr;gap:40px;align-items:start}
.profile-sidebar{display:flex;flex-direction:column;gap:24px}
.profile-image{width:100%;max-width:250px;aspect-ratio:1;border-radius:12px;overflow:hidden;background:#f5f5f5;cursor:pointer;position:relative}
.profile-image img{width:100%;height:100%;object-fit:cover;display:block;user-select:none}
.profile-image img:hover{opacity:0.9}
.profile-intro{display:flex;flex-direction:column;gap:8px}
.profile-name{font-size:32px;font-weight:600;color:#222;margin:0;line-height:1.2}
.profile-pronouns{font-size:14px;color:#888;margin:0}
.profile-title{font-size:18px;font-weight:500;color:#333;margin:0}
.profile-affiliation{font-size:15px;color:#555;line-height:1.6;margin:0}
.profile-affiliation a{color:#555;text-decoration:none;position:relative;padding:0 5px 3px 5px;transition:all 0.2s ease;display:inline}
.profile-affiliation a::before{content:"";position:absolute;left:0;right:0;bottom:0.05em;height:0.5em;background:rgba(170,220,220,0.55);border-radius:3px 5px 2px 4px;z-index:-1;clip-path:polygon(1px 0,calc(100% - 1px) 0,100% 15%,100% 85%,calc(100% - 2px) 100%,0 100%,0 80%,0 20%)}
.profile-affiliation a:hover{color:#555}
.profile-affiliation a:hover::before{background:rgba(170,220,220,0.75);height:0.55em}
.profile-social{display:flex;gap:8px}
.social-icon{display:flex;align-items:center;justify-content:center;width:auto;height:auto;border:none;border-radius:0;background:transparent;color:#888;text-decoration:none;transition:color 0.2s ease}
.social-icon:hover{color:var(--accent)}
.social-text{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:0}
.social-icon svg{width:20px;height:20px}
.news-section{margin-top:24px;padding:20px;background:#fafafa;border-radius:12px;border:1px solid #e5e7eb;max-height:300px;display:flex;flex-direction:column}
.news-section-mobile{display:none}
.news-section-desktop{display:flex}
.news-section-title{font-size:18px;font-weight:600;color:var(--accent);transform:skewX(-3deg);margin:0 0 16px 0;font-family:var(--font-type);flex-shrink:0;display:inline-block}
.news-list{display:flex;flex-direction:column;gap:12px;overflow-y:auto;overflow-x:hidden;flex:1;padding-right:8px;scrollbar-width:thin;scrollbar-color:#d0d0d0 transparent}
.news-list::-webkit-scrollbar{width:6px}
.news-list::-webkit-scrollbar-track{background:transparent;border-radius:3px}
.news-list::-webkit-scrollbar-thumb{background:#d0d0d0;border-radius:3px;transition:background 0.2s ease}
.news-list::-webkit-scrollbar-thumb:hover{background:#b0b0b0}
[data-theme="dark"] .news-list{scrollbar-color:#555 transparent}
[data-theme="dark"] .news-list::-webkit-scrollbar-thumb{background:#555}
[data-theme="dark"] .news-list::-webkit-scrollbar-thumb:hover{background:#777}
.news-item{display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:1.6;color:#333;padding:8px 0;border-bottom:1px solid #f0f0f0}
.news-item:last-child{border-bottom:none;padding-bottom:0}
.news-date{font-weight:600;color:var(--accent);font-family:var(--font-type)}
.news-content{color:#333}
[data-theme="dark"] .news-section{background:var(--card);border-color:var(--border)}
[data-theme="dark"] .news-item{color:var(--muted);border-bottom-color:var(--border)}
[data-theme="dark"] .news-content{color:var(--muted)}
/* Record Player */
.misc-container{max-width:var(--container);margin:0 auto}
.misc-header{margin-bottom:40px}
.misc-description{color:var(--muted);font-size:16px;margin-top:8px}
.fun-facts-section{margin:32px 0;padding:24px;background:#fafafa;border-radius:12px;border:1px solid #e5e7eb}
.fun-facts-section h2{font-size:18px;font-weight:600;color:var(--accent);margin:0 0 16px 0;font-family:var(--font-type)}
.fun-facts-section p{font-size:14px;line-height:1.6;color:#333;margin:0}
.friends-credits-section{margin:48px 0;padding:24px;background:#fafafa;border-radius:12px;border:1px solid #e5e7eb}
.friends-credits-section h2{font-size:18px;font-weight:600;color:var(--accent);margin:0 0 16px 0;font-family:var(--font-type)}
.friends-intro{font-size:14px;line-height:1.6;color:#555;margin:0 0 20px 0}
.friends-list{display:flex;flex-direction:column;gap:12px}
.friend-item{font-size:14px;line-height:1.6;color:#333;padding:8px 0;border-bottom:1px solid #f0f0f0}
.friend-item:last-child{border-bottom:none}
.friend-name{font-weight:600;color:#222}
.friend-credit{color:#666;font-style:italic}
.playlists-section-main{margin:48px 0;padding:24px;background:#fafafa;border-radius:12px;border:1px solid #e5e7eb}
.playlists-section-main h2{font-size:18px;font-weight:600;color:var(--accent);margin:0 0 16px 0;font-family:var(--font-type)}
.playlists-intro{font-size:14px;line-height:1.6;color:#555;margin:0 0 24px 0}
.playlists-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.playlist-card{display:flex;align-items:center;gap:12px;padding:16px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;text-decoration:none;color:inherit;transition:all 0.2s ease}
.playlist-card:hover{background:#f9f9f9;border-color:var(--accent);box-shadow:0 2px 8px rgba(208,74,74,0.1);transform:translateY(-2px)}
.playlist-icon{font-size:24px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.playlist-info{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.playlist-info .playlist-name{font-size:14px;font-weight:600;color:#222;font-family:var(--font-type)}
.playlist-info .playlist-platform{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.playlist-section{margin:32px 0;padding:20px;background:#fafafa;border-radius:12px;border:1px solid #e5e7eb;max-width:800px}
.playlist-section-title{font-size:16px;font-weight:600;color:var(--accent);transform:skewX(-3deg);margin:0 0 16px 0;font-family:var(--font-type);display:inline-block}
.spotify-embed-container{width:100%;margin-top:16px}
.spotify-embed-container iframe{width:100%;border-radius:12px;border:none;display:block}
.spotify-embed-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:12px}
.spotify-embed-item{width:100%}
.spotify-embed-item iframe{width:100%;border-radius:8px;border:none;display:block;height:232px}
[data-theme="dark"] .playlist-section{background:var(--card);border-color:var(--border)}
@media (max-width: 768px){
  .spotify-embed-grid{grid-template-columns:1fr;gap:12px}
  .playlist-section{max-width:100%}
}
.lyrics-widget-section{margin:32px 0;max-width:800px}
.lyrics-widget{display:flex;flex-direction:column;gap:20px;align-items:center}
.lyrics-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px 20px;
  display:flex;
  flex-direction:row;
  gap:20px;
  align-items:flex-start;
  box-shadow:0 2px 8px rgba(0,0,0,0.04);
  min-height:120px;
  width:100%;
  position:relative;
  transition:all 0.3s ease;
}
.lyrics-card.showing{
  box-shadow:0 4px 12px rgba(208,74,74,0.15);
  border-color:rgba(208,74,74,0.3);
}
.lyrics-card:hover{
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
  border-color:rgba(208,74,74,0.2);
}
.lyrics-content{
  flex:1;
  min-width:0;
}
.lyrics-text{
  font-size:13px;
  line-height:1.6;
  color:#444;
  margin:0;
  font-style:italic;
  position:relative;
  white-space:normal;
  word-wrap:break-word;
  overflow-wrap:break-word;
}
.lyrics-text::before{
  content:"\201C";
  position:absolute;
  left:-6px;
  top:-4px;
  font-size:28px;
  color:rgba(208,74,74,0.2);
  font-family:Georgia,serif;
  line-height:1;
}
.lyrics-text.placeholder{
  color:var(--muted);
  font-style:normal;
}
.lyrics-text.placeholder::before{
  display:none;
}
.lyrics-info{
  border-left:1px solid #f0f0f0;
  padding-left:20px;
  flex-shrink:0;
  min-width:140px;
}
.lyrics-info-inner{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.lyrics-song-title{
  font-size:13px;
  font-weight:600;
  color:#222;
}
.lyrics-song-author{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
  display:block;
  font-style:italic;
}
.lyrics-album-title{
  font-size:11px;
  color:var(--muted);
}
.lyrics-song-year{
  font-size:10px;
  color:var(--muted);
  margin-top:4px;
  display:block;
}
.lyrics-button{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;padding:0;background:#fff;color:var(--text);border:1px solid var(--border);border-radius:50%;font-size:24px;font-weight:normal;font-family:var(--font-type);cursor:pointer;transition:all 0.3s ease;box-shadow:0 2px 8px rgba(0,0,0,0.08);position:relative;overflow:hidden}
.lyrics-button:hover{background:#fff;border-color:var(--accent);transform:translateY(-2px) scale(1.05);box-shadow:0 4px 12px rgba(208,74,74,0.2)}
.lyrics-button:active{transform:translateY(0) scale(1);box-shadow:0 2px 6px rgba(0,0,0,0.1)}
.lyrics-button:disabled{opacity:0.6;cursor:not-allowed;transform:none}
.lyrics-button-text{position:relative;z-index:1;line-height:1;display:flex;align-items:center;justify-content:center}
[data-theme="dark"] .lyrics-button{background:var(--card);border-color:var(--border);box-shadow:0 2px 8px rgba(0,0,0,0.2)}
[data-theme="dark"] .lyrics-button:hover{background:var(--card);border-color:var(--accent);box-shadow:0 4px 12px rgba(208,74,74,0.3)}
.lyrics-download-button-text{font-size:10px}
@media (max-width: 768px){
  .lyrics-widget-section{max-width:100%}
  .lyrics-button{width:48px;height:48px;font-size:20px}
}
.songs-section{margin:48px 0;padding:24px;background:#fafafa;border-radius:12px;border:1px solid #e5e7eb}
.songs-section h2{font-size:18px;font-weight:600;color:var(--accent);margin:0 0 20px 0;font-family:var(--font-type)}
.songs-list{display:flex;flex-direction:column;gap:10px}
.song-item{font-size:14px;line-height:1.6;color:#333;padding:10px 0;border-bottom:1px solid #f0f0f0;transition:color 0.2s ease}
.song-item:last-child{border-bottom:none}
.song-item:hover{color:var(--accent)}
.song-title{font-weight:500;color:#222}
.song-artist{color:#666;font-style:italic}
.albums-section{margin:48px 0}
.albums-section h2{font-size:32px;font-weight:700;color:#000;margin:0 0 32px 0;font-family:var(--font-type);text-align:center;letter-spacing:-0.5px}
.albums-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;max-width:900px;margin:0 auto}
.album-card{display:flex;flex-direction:column;border:1px solid var(--border);background:#fff;border-radius:6px;overflow:hidden;transition:box-shadow 0.2s ease;padding:8px}
.album-card:hover{box-shadow:0 2px 8px rgba(0,0,0,0.06)}
.album-cover{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;background:#f5f5f5;border-radius:4px}
.album-cover img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(20%) brightness(0.9);transition:transform 0.3s ease}
.album-card:hover .album-cover img{transform:scale(1.01)}
.album-artist-overlay{position:absolute;top:12px;left:12px;right:12px;font-size:16px;font-weight:700;color:#fff;font-family:var(--font-type);text-transform:uppercase;letter-spacing:0.05em;text-shadow:0 1px 3px rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.9);padding:6px 10px;background:rgba(0,0,0,0.3);backdrop-filter:blur(2px);border-radius:4px}
.album-title-overlay{position:absolute;top:52px;left:12px;font-size:12px;font-weight:400;color:#fff;font-family:var(--font-type);text-transform:uppercase;letter-spacing:0.1em;text-shadow:0 1px 2px rgba(0,0,0,0.5)}
.album-ep-label{position:absolute;bottom:12px;left:12px;background:rgba(255,255,255,0.95);padding:3px 6px;font-size:9px;font-weight:600;font-family:var(--font-type);text-transform:uppercase;letter-spacing:0.1em;color:#000;border:1px solid var(--border);border-radius:3px}
.album-info-bar{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:#fff;border-top:1px solid var(--border);min-height:40px;margin-top:8px}
.album-artist-name{font-size:12px;color:var(--text);font-weight:400;font-family:var(--font-type);text-transform:lowercase}
.album-song-title{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text);font-weight:400;font-family:var(--font-type);text-transform:lowercase}
.play-button{width:14px;height:14px;display:flex;align-items:center;justify-content:center;color:var(--text);font-size:9px;cursor:pointer;transition:transform 0.2s ease,color 0.2s ease}
.play-button:hover{transform:scale(1.15);color:var(--accent)}
@media (max-width: 768px){
  .albums-grid{grid-template-columns:1fr;gap:24px;max-width:300px}
  .albums-section h2{font-size:28px}
  .album-artist-overlay{font-size:14px;padding:6px 10px}
  .album-title-overlay{font-size:12px}
}
.record-player{width:100%;max-width:450px;margin-top:24px;background:#f5f3f0;border:2px solid #d4c5b8;border-radius:12px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,0.1)}
.record-player-top{background:linear-gradient(to bottom,#2a2a2a,#1a1a1a);padding:24px;position:relative}
.turntable{position:relative;width:200px;height:200px;margin:0 auto}
.record{width:180px;height:180px;border-radius:50%;background:transparent;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);animation:spin 20s linear infinite;cursor:pointer}
.record.paused{animation-play-state:paused}
@keyframes spin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
.record-cover{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:140px;height:140px;border-radius:50%;overflow:hidden;z-index:2;animation:spin 20s linear infinite;box-shadow:0 0 15px rgba(0,0,0,0.5),inset 0 0 10px rgba(0,0,0,0.3);cursor:pointer}
.record-cover.paused{animation-play-state:paused}
.cover-image{width:100%;height:100%;object-fit:cover;display:block}
.record-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:#1a1a1a;border:3px solid #3a3a3a;box-shadow:inset 0 0 10px rgba(0,0,0,0.8);z-index:3}
.record-grooves{display:none}
.tonearm{position:absolute;top:20px;right:30px;width:80px;height:80px;transform-origin:20px 20px}
.tonearm-base{position:absolute;top:0;left:0;width:20px;height:20px;border-radius:50%;background:#3a3a3a;box-shadow:0 2px 4px rgba(0,0,0,0.5)}
.tonearm-arm{position:absolute;top:10px;left:10px;width:60px;height:4px;background:linear-gradient(to right,#4a4a4a,#3a3a3a);border-radius:2px;transform:rotate(-25deg);transform-origin:0 0;box-shadow:0 2px 4px rgba(0,0,0,0.3)}
.tonearm-head{position:absolute;top:8px;left:68px;width:12px;height:12px;background:#2a2a2a;border-radius:2px;transform:rotate(-25deg);box-shadow:0 2px 4px rgba(0,0,0,0.5)}
.record-player-controls{background:#fff;padding:20px}
.now-playing{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid #eee}
.now-playing-label{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#888;margin-bottom:8px;font-weight:600}
.now-playing-track{display:flex;flex-direction:column;gap:2px}
.track-title{color:#333;font-size:13px;font-weight:600}
.track-artist{color:#888;font-size:11px}
.recent-tracks{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid #eee}
.recent-tracks-label{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#888;margin-bottom:10px;font-weight:600}
.track-list{display:flex;flex-direction:column;gap:8px}
.track-item{display:flex;flex-direction:column;gap:2px;font-size:11px;line-height:1.4}
.playlists-section{margin-bottom:0}
.playlists-label{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#888;margin-bottom:10px;font-weight:600}
.playlist-list{display:flex;flex-direction:column;gap:6px}
.playlist-item{display:flex;justify-content:space-between;align-items:center;padding:6px 0;text-decoration:none;transition:all 0.2s ease;border-bottom:1px solid #f5f5f5}
.playlist-item:last-child{border-bottom:none}
.playlist-item:hover{background:rgba(0,0,0,0.02);padding-left:4px;padding-right:4px;margin:0 -4px;border-radius:4px}
.playlist-name{color:#333;font-size:11px;font-weight:500}
.playlist-platform{color:#888;font-size:10px;text-transform:uppercase;letter-spacing:.05em}

.profile-content{display:flex;flex-direction:column;gap:24px}
.profile-section{margin:0}
.profile-section-title{font-size:18px;font-weight:600;color:var(--accent);transform:skewX(-3deg);margin:0 0 12px 0;display:inline-block}
.profile-section p{font-size:14px;line-height:1.6;color:#333;margin:0}
.profile-section a{color:#333;text-decoration:none;position:relative;padding:0 5px 3px 5px;transition:all 0.2s ease;display:inline;background:linear-gradient(180deg,transparent 60%,rgba(170,220,220,0.55) 60%,rgba(170,220,220,0.55) 85%,transparent 85%);background-size:100% 100%;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.profile-section a:hover{color:#333;background:linear-gradient(180deg,transparent 60%,rgba(170,220,220,0.75) 60%,rgba(170,220,220,0.75) 85%,transparent 85%)}
.timeline{position:relative;padding-left:32px}
.timeline::before{content:"";position:absolute;left:7px;top:0;bottom:0;width:2px;background:#ddd}
.timeline-item{position:relative;margin-bottom:20px;padding-left:20px}
.timeline-item:last-child{margin-bottom:0}
.timeline-marker{position:absolute;left:-26px;top:4px;width:7px;height:7px;border-radius:50%;background:var(--accent);border:none;box-shadow:none}
.timeline-content{position:relative}
.education-degree{font-size:14px;font-weight:600;color:#222;margin-bottom:3px}
.education-school{font-size:13px;color:#555;margin-bottom:3px}
.education-period{font-size:12px;color:#888}
.profile-list{list-style:none;padding:0;margin:0}
.profile-list li{margin-bottom:10px;font-size:14px;line-height:1.5;color:#333;padding-left:18px;position:relative}
.profile-list li:before{content:"•";position:absolute;left:0;color:var(--accent);font-weight:bold}
.profile-list li:last-child{margin-bottom:0}
.profile-list a{color:#333;text-decoration:underline}
.profile-list a:hover{color:var(--accent)}

/* Recommendations Toggle */
.recommendations-toggle{margin-top:16px}
.recommendations-toggle-button{background:none;border:none;padding:0;cursor:pointer;font-size:14px;color:#333;display:flex;align-items:center;gap:6px;transition:color 0.2s ease;font-family:inherit}
.recommendations-toggle-button:hover{color:var(--accent)}
.toggle-heart{font-size:16px;transition:transform 0.2s ease}
.recommendations-toggle-button:hover .toggle-heart{transform:scale(1.2)}
.recommendations-content{margin-top:16px;overflow:hidden;transition:max-height 0.4s ease,opacity 0.3s ease;max-height:0;opacity:0}
.recommendations-content.show{max-height:2000px;opacity:1}

/* Recommendations Carousel */
.recommendations-carousel{
  position:relative;
  margin-top:0;
  max-width:640px;  
  margin-inline:auto;
}

.recommendations-carousel-container{
  overflow:hidden;
  border-radius:12px;
  width:100%;        
}
.recommendations-carousel-track{
  display:flex;
  transition:transform 0.5s ease;
  width:100%; 
}

.recommendation-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px 20px;
  display:flex;
  flex-direction:row;
  gap:20px;
  align-items:flex-start;
  box-shadow:0 2px 8px rgba(0,0,0,0.04);
  min-height:120px;
  flex:0 0 100%;
}
.recommendation-card:hover{box-shadow:0 4px 12px rgba(0,0,0,0.08);border-color:rgba(208,74,74,0.2)}
.recommendation-content{flex:1;min-width:0}
.recommendation-text{font-size:13px;line-height:1.6;color:#444;margin:0;font-style:italic;position:relative;white-space:normal;word-wrap:break-word;overflow-wrap:break-word}
.recommendation-text::before{content:"\201C";position:absolute;left:-6px;top:-4px;font-size:28px;color:rgba(208,74,74,0.2);font-family:Georgia,serif;line-height:1}
.lyrics-translation-controls{position:absolute;bottom:12px;right:16px;display:flex;flex-wrap:wrap;gap:4px;z-index:1;justify-content:flex-end;max-width:120px}
.translation-button{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;background:transparent;color:var(--muted);border:none;border-radius:3px;font-size:10px;font-weight:500;font-family:var(--font-type);cursor:pointer;transition:all 0.2s ease;line-height:1}
.translation-button:hover{background:var(--accent);color:#fff;transform:scale(1.05)}
.translation-button.active{background:var(--accent);color:#fff}
[data-theme="dark"] .translation-button{color:var(--muted)}
[data-theme="dark"] .translation-button:hover{background:var(--accent);color:#fff}
[data-theme="dark"] .translation-button.active{background:var(--accent);color:#fff}
.recommendation-author{border-left:1px solid #f0f0f0;padding-left:20px;flex-shrink:0;min-width:140px}
.recommendation-author-info{display:flex;flex-direction:column;gap:3px}
.recommendation-author-name{font-size:13px;font-weight:600;color:#222}
.recommendation-author-name a{color:#222;text-decoration:none;position:relative;padding:0 5px 3px 5px;transition:all 0.2s ease;display:inline;background:linear-gradient(180deg,transparent 60%,rgba(170,220,220,0.55) 60%,rgba(170,220,220,0.55) 85%,transparent 85%);background-size:100% 100%;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.recommendation-author-name a:hover{background:linear-gradient(180deg,transparent 60%,rgba(170,220,220,0.75) 60%,rgba(170,220,220,0.75) 85%,transparent 85%)}
.recommendation-author-title{font-size:11px;color:var(--muted)}
.song-author{font-size:12px;color:var(--muted);margin-top:2px;display:block;font-style:italic}
.song-year{font-size:10px;color:var(--muted);margin-top:4px;display:block}
.carousel-button{position:absolute;top:50%;transform:translateY(-50%);background:#fff;border:1px solid var(--border);border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s ease;box-shadow:0 2px 8px rgba(0,0,0,0.1);z-index:2;color:#666;opacity:0.7}
.carousel-button:hover{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 4px 12px rgba(208,74,74,0.3);opacity:1}
.carousel-button:active{transform:translateY(-50%) scale(0.95)}
.carousel-button-prev{left:10px}
.carousel-button-next{right:10px}
.carousel-button:disabled{opacity:0.4;cursor:not-allowed}
.carousel-button:disabled:hover{background:#fff;color:#666;border-color:var(--border)}
.carousel-indicators{display:flex;justify-content:center;gap:8px;margin-top:16px}
.carousel-indicator{width:8px;height:8px;border-radius:50%;background:#ddd;cursor:pointer;transition:all 0.3s ease;border:none;padding:0}
.carousel-indicator.active{background:var(--accent);width:24px;border-radius:4px}
.carousel-indicator:hover{background:rgba(208,74,74,0.6)}
@media (max-width: 768px){
  .recommendation-card{flex-direction:column;padding:20px;min-height:auto}
  .lyrics-card{flex-direction:column;padding:20px;min-height:auto}
  .lyrics-info{border-left:none;border-top:1px solid #f0f0f0;padding-left:0;padding-top:16px;margin-top:16px;min-width:auto}
  [data-theme="dark"] .lyrics-info{border-top-color:var(--border)}
  .recommendation-author{border-left:none;border-top:1px solid #f0f0f0;padding-left:0;padding-top:12px;margin-top:8px;min-width:auto}
  .carousel-button{width:36px;height:36px}
  .carousel-button-prev{left:5px}
  .carousel-button-next{right:5px}
}

/* Filters (home grid) */
.filters{display:flex;gap:20px;align-items:center;flex-wrap:wrap;background:#fff;border:1px solid var(--border);padding:16px;border-radius:var(--radius)}
.filters .range-wrap{display:flex;align-items:center;gap:10px;min-width:260px}
input[type=range]{width:220px}
select{border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:#fff}

/* Grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:16px}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.card .thumb{height:160px;background:#eee}
.card .body{padding:12px 14px}
.card .meta{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px;margin-top:6px}
.tag{display:inline-block;background:rgba(232,176,92,0.1);color:var(--accent);border:1px solid rgba(232,176,92,0.3);border-radius:999px;padding:2px 8px;font-size:12px}

/* Gallery */
.gallery-header{margin-bottom:40px}
.gallery-description{color:var(--muted);font-size:14px;margin-top:8px}
.blog-header{margin-bottom:40px;display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap}
.blog-header > div:first-child{display:flex;flex-direction:column;justify-content:center}
.blog-description{color:var(--muted);font-size:14px;margin-top:8px}
.blog-filters{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;position:relative;flex-shrink:0;margin-top:0}

/* Catalog-style Gallery Layout */
.gallery-catalog{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:80px;padding-bottom:40px}
.gallery-item-section{margin:0;border-bottom:1px solid #f0f0f0;padding-bottom:80px}
.gallery-item-section:last-child{border-bottom:none;padding-bottom:0}
.gallery-item-layout{display:grid;grid-template-columns:1fr 1fr 1fr;gap:32px;align-items:start}

.gallery-item-info{display:flex;flex-direction:column;gap:12px;min-width:0}
.gallery-item-label{font-size:13px;font-weight:600;color:#222;font-family:var(--font-type);letter-spacing:0.08em;margin-bottom:2px;text-transform:uppercase}
.gallery-item-title{font-size:16px;font-weight:600;color:#222;margin:0 0 8px 0;font-family:var(--font-type);line-height:1.4}
.gallery-item-description{font-size:12px;line-height:1.7;color:#555;margin:0;font-family:var(--font-type);max-width:100%}
.gallery-item-meta{font-size:11px;color:var(--muted);font-family:var(--font-type);margin-top:4px;letter-spacing:0.02em}

.gallery-item-images{display:flex;flex-direction:column;gap:16px;align-items:stretch;min-width:0}
.gallery-image-item{width:100%;overflow:hidden;background:#fafafa;position:relative;aspect-ratio:4/3;transition:transform 0.3s ease}
.gallery-image-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.4s ease}
.gallery-image-item:hover img{transform:scale(1.02)}

/* Layout variations */
.gallery-item-section:nth-child(odd) .gallery-item-layout{grid-template-columns:1fr 1fr 1fr}
.gallery-item-section:nth-child(odd) .gallery-item-layout .gallery-item-info{order:1}
.gallery-item-section:nth-child(odd) .gallery-item-layout .gallery-item-images:first-of-type{order:2}
.gallery-item-section:nth-child(odd) .gallery-item-layout .gallery-item-images:last-of-type{order:3}

.gallery-item-section:nth-child(even) .gallery-item-layout{grid-template-columns:1fr 1fr 1fr}
.gallery-item-section:nth-child(even) .gallery-item-layout .gallery-item-images:first-of-type{order:1}
.gallery-item-section:nth-child(even) .gallery-item-layout .gallery-item-info{order:2}
.gallery-item-section:nth-child(even) .gallery-item-layout .gallery-item-images:last-of-type{order:3}

/* Legacy gallery grid styles (for backward compatibility) */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:24px;margin-top:24px;grid-auto-rows:minmax(200px,auto);align-items:start}
.gallery-item{position:relative;overflow:hidden;border-radius:8px;background:#f5f5f5;cursor:pointer;transition:box-shadow 0.3s ease;min-height:200px}
.gallery-item:hover{box-shadow:0 4px 12px rgba(0,0,0,0.1)}
.gallery-item img{width:100%;height:100%;object-fit:cover;display:block}
.gallery-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(0,0,0,0.7),transparent);padding:20px 16px 16px;opacity:0;transition:opacity 0.3s ease}
.gallery-item:hover .gallery-overlay{opacity:1}
.gallery-caption{color:#fff;font-size:14px;font-weight:500}

/* Projects */
.projects-header{margin-bottom:40px}
.projects-description{color:var(--muted);font-size:14px;margin-top:8px}
.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.project-card-link{text-decoration:none;color:inherit;display:block}
.project-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,0.06);transition:box-shadow 0.3s ease,border-color 0.3s ease;border:1px solid rgba(208,74,74,0.1);display:flex;flex-direction:column;position:relative;cursor:pointer}
.project-card:hover{box-shadow:0 6px 20px rgba(208,74,74,0.15);border-color:rgba(208,74,74,0.3)}
.project-image{position:relative;width:100%;padding-top:60%;overflow:hidden;background:#f5f5f5}
.project-card:hover .project-image::after{content:"";position:absolute;inset:0;background:rgba(208,74,74,0.08);pointer-events:none;z-index:1;border-radius:16px 16px 0 0}
.project-image img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
.project-overlay{display:none}
.project-link{display:none}
.project-content{padding:24px;flex:1;display:flex;flex-direction:column}
.project-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.project-tag{display:inline-block;background:rgba(208,74,74,0.1);color:var(--accent);border:1px solid rgba(208,74,74,0.2);border-radius:20px;padding:4px 12px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;transition:all 0.2s ease}
.project-card:hover .project-tag{background:rgba(208,74,74,0.15);border-color:rgba(208,74,74,0.3)}
.project-title{font-size:16px;font-weight:600;color:#222;margin:0 0 12px 0;font-family:var(--font-type);line-height:1.3;transition:color 0.2s ease}
.project-title a{color:#222;text-decoration:none;transition:color 0.2s ease}
.project-title a:hover{color:#333;text-decoration:none}
.project-card:hover .project-title{color:#222}
.project-description{color:var(--muted);font-size:13px;line-height:1.6;margin:0 0 16px 0;flex:1}
.project-meta{display:flex;align-items:center;justify-content:space-between;padding-top:16px;border-top:1px solid #f0f0f0}
.project-year{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.1em}
@media (max-width: 900px){
  .projects-grid{grid-template-columns:repeat(2,1fr);gap:20px}
}
@media (max-width: 768px){
  .projects-grid{grid-template-columns:1fr;gap:24px}
  .project-content{padding:20px}
}

/* Project Detail Page */
.project-detail{max-width:900px;margin:0 auto}
.project-detail-header{margin-bottom:32px}
.project-back-link{display:inline-block;color:var(--accent);text-decoration:none;font-size:14px;font-weight:500;margin-bottom:24px;transition:color 0.2s ease;font-family:var(--font-type)}
.project-back-link:hover{color:#b83939}
.project-detail-title{font-size:32px;font-weight:600;color:var(--text);margin:0 0 16px 0;font-family:var(--font-type);line-height:1.2}
.project-detail-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:12px}
.project-detail-year{font-size:14px;color:var(--muted);font-weight:500}
.project-detail-tags{display:flex;gap:8px;flex-wrap:wrap}
.project-detail-tag{display:inline-block;background:rgba(208,74,74,0.1);color:var(--accent);border:1px solid rgba(208,74,74,0.2);border-radius:20px;padding:4px 12px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.project-detail-image{width:100%;margin:32px 0;border-radius:8px;overflow:hidden}
.project-detail-image img{width:100%;height:auto;display:block}
.project-detail-content{margin-top:32px}
.project-detail-summary{margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.project-detail-summary p{font-size:14px;line-height:1.6;color:var(--text);margin:0}
.project-detail-body{font-size:14px;line-height:1.6;color:var(--text);margin-bottom:32px}
.project-detail-body p{margin:0 0 16px 0}
.project-detail-body h2{font-size:18px;font-weight:600;color:var(--accent);transform:skewX(-3deg);margin:24px 0 12px 0;font-family:var(--font-type);display:inline-block;position:relative;z-index:1}
.project-detail-body h2::before{content:"";position:absolute;left:-2px;right:-2px;bottom:0.1em;height:0.45em;background:rgba(208,74,74,0.25);border-radius:2px 4px 1px 3px;z-index:-1;clip-path:polygon(2px 0,calc(100% - 2px) 0,100% 12%,100% 88%,calc(100% - 3px) 100%,0 100%,0 85%,0 15%)}
.project-detail-body h3{font-size:16px;font-weight:600;color:var(--text);margin:20px 0 10px 0;font-family:var(--font-type);position:relative;z-index:1;display:inline-block}
.project-detail-body h3::before{content:"";position:absolute;left:-2px;right:-2px;bottom:0.1em;height:0.4em;background:rgba(208,74,74,0.2);border-radius:2px 4px 1px 3px;z-index:-1;clip-path:polygon(2px 0,calc(100% - 2px) 0,100% 12%,100% 88%,calc(100% - 3px) 100%,0 100%,0 85%,0 15%)}
.project-detail-body ul,.project-detail-body ol{margin:0 0 16px 0;padding-left:20px}
.project-detail-body li{margin:0 0 6px 0}
.project-detail-body a{color:var(--text);text-decoration:none;position:relative;padding:0 5px 3px 5px;transition:all 0.2s ease;display:inline;background:linear-gradient(180deg,transparent 60%,rgba(170,220,220,0.55) 60%,rgba(170,220,220,0.55) 85%,transparent 85%);background-size:100% 100%;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.project-detail-body img{max-width:100%;height:auto;border-radius:8px;margin:24px 0 8px 0;display:block}
.project-detail-body .image-caption{font-size:12px;color:var(--muted);font-style:italic;margin:0 0 32px 0;text-align:center}
[data-theme="dark"] .project-detail-body .image-caption{color:var(--muted)}

/* Project Images Section */
.project-images-section{margin:40px 0}

/* Project Grid (3x3) */
.project-grid-wrapper{width:100%;margin:40px 0}
.project-grid-3x3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;width:100%}
.project-grid-item{position:relative;width:100%;aspect-ratio:1;overflow:hidden;border-radius:8px;background:var(--card);border:none;transition:all 0.3s ease}
.project-grid-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.1)}
[data-theme="dark"] .project-grid-item:hover{box-shadow:0 4px 12px rgba(0,0,0,0.3)}
.project-grid-image{width:100%;height:100%;position:relative;overflow:hidden}
.project-grid-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.4s ease}
.project-grid-item:hover .project-grid-image img{transform:scale(1.05)}
.project-grid-empty{background:var(--card);border:1px dashed var(--border);opacity:0.5}
.project-grid-empty:hover{transform:none;box-shadow:none;border-color:var(--border)}
@media (max-width: 768px){
  .project-grid-3x3{grid-template-columns:repeat(2,1fr);gap:12px}
  .project-grid-item:nth-child(9){display:none}
}
@media (max-width: 480px){
  .project-grid-3x3{grid-template-columns:1fr;gap:12px}
  .project-grid-item:nth-child(9){display:block}
}

/* Project Carousel */
.project-carousel-section{margin:40px 0}
.project-carousel-wrapper{position:relative;width:100%}
.project-carousel{position:relative;width:100%;overflow:hidden;border-radius:12px;background:var(--card);border:1px solid var(--border)}
.project-carousel-track{display:flex;transition:transform 0.5s ease;will-change:transform}
.project-carousel-slide{min-width:100%;flex-shrink:0;position:relative}
.project-carousel-image{width:100%;position:relative;background:var(--card);display:flex;align-items:center;justify-content:center}
.project-carousel-image img{width:100%;height:auto;display:block;max-height:80vh;object-fit:contain}
.project-carousel-pdf{width:100%;position:relative;background:var(--card);padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:600px}
.project-carousel-pdf-frame{width:100%;height:600px;border:none;border-radius:8px;background:#f5f5f5}
.project-carousel-pdf-link{display:flex;align-items:center;gap:8px;margin-top:16px;padding:10px 20px;background:var(--accent);color:#fff;text-decoration:none;border-radius:6px;font-size:14px;font-weight:500;transition:all 0.2s ease;font-family:var(--font-type)}
.project-carousel-pdf-link:hover{background:#b83939;transform:translateY(-1px);box-shadow:0 4px 12px rgba(208,74,74,0.3)}
.project-carousel-pdf-link svg{width:16px;height:16px}
.project-carousel-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:10;background:rgba(255,255,255,0.9);backdrop-filter:blur(10px);border:none;width:48px;height:48px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text);transition:all 0.3s ease;box-shadow:0 2px 8px rgba(0,0,0,0.1)}
[data-theme="dark"] .project-carousel-btn{background:rgba(37,37,37,0.9);color:var(--text)}
.project-carousel-btn:hover{background:rgba(255,255,255,1);transform:translateY(-50%) scale(1.1);box-shadow:0 4px 12px rgba(0,0,0,0.15)}
[data-theme="dark"] .project-carousel-btn:hover{background:rgba(50,50,50,0.95)}
.project-carousel-btn:active{transform:translateY(-50%) scale(0.95)}
.project-carousel-btn:disabled{opacity:0.5;cursor:not-allowed;transform:translateY(-50%)}
.project-carousel-prev{left:16px}
.project-carousel-next{right:16px}
.project-carousel-indicators{display:flex;justify-content:center;gap:8px;margin-top:20px;padding:0 20px}
.project-carousel-indicator{width:8px;height:8px;border-radius:50%;border:none;background:var(--border);cursor:pointer;transition:all 0.3s ease;padding:0}
.project-carousel-indicator:hover{background:var(--muted);transform:scale(1.2)}
.project-carousel-indicator.active{background:var(--accent);width:24px;border-radius:4px}
@media (max-width: 768px){
  .project-carousel-pdf-frame{height:400px}
  .project-carousel-pdf{min-height:450px;padding:12px}
  .project-carousel-btn{width:40px;height:40px}
  .project-carousel-prev{left:8px}
  .project-carousel-next{right:8px}
}
.project-detail-body a:hover{color:var(--text);background:linear-gradient(180deg,transparent 60%,rgba(170,220,220,0.75) 60%,rgba(170,220,220,0.75) 85%,transparent 85%)}
.project-detail-actions{margin-top:32px;padding-top:24px;border-top:1px solid var(--border)}
.project-external-link{display:inline-block;color:var(--accent);text-decoration:none;font-size:14px;font-weight:500;transition:color 0.2s ease;font-family:var(--font-type)}
.project-external-link:hover{color:#b83939}
@media (max-width: 768px){
  .project-detail-title{font-size:28px}
  .project-detail-summary p{font-size:14px}
  .project-detail-body{font-size:14px}
}

/* Research */
.research-header{margin-bottom:32px}
.research-header-content{display:flex;justify-content:space-between;align-items:center;gap:24px}
.research-header-content > div:first-child{display:flex;flex-direction:column;justify-content:center}
.research-description{color:var(--muted);font-size:14px;margin-top:8px}
.research-filters{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;position:relative;flex-shrink:0}
.filter-group{display:flex;flex-direction:column;gap:4px;position:relative}
.filter-label{font-size:8px;text-transform:uppercase;letter-spacing:.15em;color:var(--muted);font-weight:700;transition:color 0.2s ease;position:relative;display:inline-block;padding-left:14px}
.filter-label::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:var(--muted);transition:background 0.2s ease,opacity 0.2s ease;opacity:0.3}
.filter-group:hover .filter-label{color:var(--accent)}
.filter-group:hover .filter-label::before{background:var(--accent);opacity:1}
.filter-select-wrapper{position:relative;display:inline-block}
.filter-select{border:1px solid #e8e8e8;border-radius:8px;padding:6px 28px 6px 10px;background:#fff;color:var(--text);font-size:12px;font-family:var(--font-type);cursor:pointer;transition:border-color 0.2s ease,color 0.2s ease;min-width:100px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23999' d='M5 7L2 4h6z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;position:relative}
.filter-select:hover{border-color:var(--accent);color:var(--accent)}
.filter-select:focus{outline:none;border-color:var(--accent);color:var(--accent)}
.filter-select.has-value{border-color:var(--accent);color:var(--accent);padding-right:32px}
.filter-clear-btn{position:absolute;right:24px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--accent);font-size:18px;font-weight:300;cursor:pointer;padding:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;line-height:1;transition:opacity 0.2s ease;z-index:1}
.filter-clear-btn:hover{opacity:0.7}
.filter-results{display:flex;align-items:center;gap:4px;opacity:0;transition:opacity 0.3s ease;padding:4px 8px;background:rgba(208,74,74,0.05);border-radius:12px;border:1px solid rgba(208,74,74,0.15);align-self:flex-end}
.filter-results.active{opacity:1}
.filter-count{font-size:16px;font-weight:700;color:var(--accent);font-family:var(--font-type);line-height:1}
.filter-count-label{font-size:8px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.filter-clear{background:var(--accent);border:none;color:#fff;font-size:9px;font-family:var(--font-type);font-weight:600;cursor:pointer;padding:4px 10px;border-radius:12px;transition:opacity 0.2s ease;text-transform:uppercase;letter-spacing:.1em;align-self:flex-end;height:fit-content}
.filter-clear:hover{opacity:0.9}
.research-list{display:flex;flex-direction:column;gap:56px}
.research-item[style*="display: none"]{display:none !important}
.research-item{display:grid;grid-template-columns:200px 1fr;gap:36px;align-items:start;padding-bottom:56px;border-bottom:1px solid #e8e8e8;transition:opacity 0.2s ease}
.research-item:last-child{border-bottom:none;padding-bottom:0}
.research-item:hover{opacity:0.95}
.research-image{width:200px;aspect-ratio:1;border-radius:10px;overflow:hidden;background:#f8f8f8;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,0.08);transition:box-shadow 0.3s ease;align-self:start}
.research-image img{width:100%;height:100%;object-fit:cover;display:block}
.research-item:hover .research-image{box-shadow:0 4px 12px rgba(0,0,0,0.12)}
.research-content{display:flex;flex-direction:column;gap:10px}
.research-title{margin:0 0 10px 0;font-size:16px;line-height:1.3;font-weight:600;letter-spacing:-0.1px}
.research-title a{color:#222;text-decoration:none;transition:all 0.2s ease}
.research-title a:hover{color:#222;text-decoration:none}
[data-theme="dark"] .research-title a:hover{color:var(--text) !important}
.research-meta{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.research-authors{color:#2a2a2a;font-size:13px;line-height:1.5;font-weight:400;font-style:oblique;transform:skewX(-1deg)}
.research-authors .author-highlight{color:inherit;background:linear-gradient(180deg,transparent 60%,rgba(211,47,47,0.2) 60%,rgba(211,47,47,0.2) 85%,transparent 85%);font-weight:500;padding:0 2px;display:inline}
.research-venue{color:#d32f2f;font-size:12px;font-weight:500}
.research-award{color:#666;font-size:12px;font-weight:500;margin-top:4px}
.research-links{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:2px}
.research-links a{color:var(--accent);text-decoration:none;font-size:12px;font-weight:500;transition:color 0.2s ease;position:relative}
.research-links a:hover{color:var(--text);text-decoration:none}
.link-separator{color:#ccc;font-size:12px;font-weight:300}
.research-abstract{color:#555;font-size:13px;line-height:1.6;margin:0;max-width:90%}
.research-citations{color:var(--muted);font-size:13px;font-style:italic;margin-top:4px}

/* Selected Publications (for about page) */
.selected-publications{display:grid;grid-template-columns:repeat(auto-fit,minmax(480px,1fr));gap:24px;margin-top:20px}
.selected-publication{display:grid;grid-template-columns:160px 1fr;gap:20px;align-items:start;padding:16px;background:transparent;border:none;border-radius:0;transition:all 0.3s ease;box-shadow:none}
.selected-publication:hover{box-shadow:none;border:none;transform:none}
.selected-publication-cover{width:160px;aspect-ratio:1;border-radius:6px;overflow:hidden;background:#f8f8f8;flex-shrink:0;box-shadow:0 2px 6px rgba(0,0,0,0.08);transition:box-shadow 0.3s ease;align-self:start}
.selected-publication-cover img{width:100%;height:100%;object-fit:cover;display:block}
.selected-publication:hover .selected-publication-cover{box-shadow:0 3px 10px rgba(0,0,0,0.12)}
.selected-publication-details{display:flex;flex-direction:column;gap:8px}
.selected-publication-title{margin:0;font-size:16px;line-height:1.3;font-weight:600;letter-spacing:-0.1px;color:#222;word-break:keep-all;hyphens:none;overflow-wrap:break-word;text-indent:0;padding:0}
.selected-publication-title a{color:#222 !important;text-decoration:none !important;transition:all 0.2s ease;background:none !important;position:relative;text-indent:0 !important;padding:0 !important;margin:0 !important;display:inline;box-shadow:none !important;border:none !important}
.selected-publication-title a::before{display:none !important;content:none !important;background:none !important}
.selected-publication-title a:hover{color:#222;text-decoration:none;background:none !important}
[data-theme="dark"] .selected-publication-title a:hover{color:var(--text) !important}
.selected-publication-title a:hover::before{display:none !important;content:none}
.selected-publication-authors{color:#2a2a2a;font-size:13px;line-height:1.5;font-weight:400;font-style:oblique;transform:skewX(-1deg);margin:0;text-indent:0;padding:0;hanging-punctuation:none;text-align:left}
.selected-publication-authors .author-highlight{color:inherit;background:linear-gradient(180deg,transparent 60%,rgba(211,47,47,0.2) 60%,rgba(211,47,47,0.2) 85%,transparent 85%);font-weight:500;padding:0 2px;display:inline}
.selected-publication-meta{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0}
.selected-publication-venue{color:#d32f2f;font-size:12px;font-weight:500}
.selected-publication-award{color:#666;font-size:12px;font-weight:500}
.selected-publication-abstract{color:#555;font-size:13px;line-height:1.6;margin:6px 0 0 0}
.selected-publication-links{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px}
.selected-publication-links a{color:var(--accent);text-decoration:none;font-size:12px;font-weight:500;transition:color 0.2s ease;padding:0;background:none;border-radius:0;border:none}
.selected-publication-links a:hover{color:var(--text);background:none;border:none}
.selected-publication-links .link-separator{color:#ccc;font-size:12px;font-weight:300;margin:0 3px}
@media (max-width: 1024px){
  .selected-publications{grid-template-columns:1fr}
}
@media (max-width: 768px){
  .selected-publication{grid-template-columns:1fr;gap:16px;padding:16px}
  .selected-publication-cover{width:100%;max-width:100%}
}

/* Blog */
.blog-list{display:flex;flex-direction:column;gap:32px}
.blog-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;transition:box-shadow 0.2s ease}
.blog-card:hover{box-shadow:0 3px 10px rgba(0,0,0,0.08)}
.blog-card-header{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.blog-date{color:var(--muted);font-size:14px;font-family:var(--font-type)}
.blog-categories{display:flex;gap:8px;flex-wrap:wrap}
.blog-card-title{margin:0 0 12px 0;font-size:16px;line-height:1.3}
.blog-card-title a{color:var(--text);text-decoration:none;transition:color 0.2s ease}
.blog-card-title a:hover{color:var(--accent)}
.blog-card-excerpt{color:var(--muted);font-size:13px;line-height:1.6;margin:0 0 16px 0}
.blog-card-link{color:var(--accent);text-decoration:none;font-weight:500;font-family:var(--font-type);letter-spacing:.3px;transition:color 0.2s ease}
.blog-card-link:hover{color:var(--text)}
.blog-empty{text-align:center;color:var(--muted);padding:60px 20px;font-size:18px}

/* Blog Post */
.blog-post{max-width:800px;margin:0 auto}
.post-header{margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--border)}
.post-title{font-size:36px;line-height:1.2;margin:0 0 16px 0;color:var(--text)}
.post-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:14px}
.post-meta time{font-family:var(--font-type)}
.post-categories{display:flex;gap:8px;flex-wrap:wrap}
.post-content{font-size:18px;line-height:1.8;color:var(--text)}
.post-content p{margin:0 0 20px 0}
.post-content h2{font-size:28px;margin:32px 0 16px 0;color:var(--text)}
.post-content h3{font-size:22px;margin:24px 0 12px 0;color:var(--text)}
.post-content h4{font-size:18px;margin:20px 0 10px 0;color:var(--text)}
.post-content ul,.post-content ol{margin:0 0 20px 0;padding-left:24px}
.post-content li{margin:0 0 8px 0}
.post-content a{color:var(--accent);text-decoration:underline;transition:color 0.2s ease}
.post-content a:hover{color:var(--text)}
.post-content code{background:#f5f5f5;padding:2px 6px;border-radius:4px;font-size:0.9em;font-family:monospace}
.post-content pre{background:#f5f5f5;padding:16px;border-radius:8px;overflow-x:auto;margin:0 0 20px 0}
.post-content pre code{background:none;padding:0}
.post-content blockquote{border-left:4px solid var(--accent);padding-left:20px;margin:20px 0;color:var(--muted);font-style:italic}
.post-content img{max-width:100%;height:auto;border-radius:8px;margin:24px 0}
.post-content hr{border:none;border-top:1px solid var(--border);margin:32px 0}
.post-footer{margin-top:48px;padding-top:24px;border-top:1px solid var(--border)}
.post-nav{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.post-nav-link{color:var(--accent);text-decoration:none;font-weight:500;transition:color 0.2s ease;max-width:45%}
.post-nav-link:hover{color:var(--text)}
.post-nav-link.prev{text-align:left}
.post-nav-link.next{text-align:right;margin-left:auto}

/* Footer */
.site-footer{border-top:0;margin-top:40px;text-align:center}
.site-footer p{color:var(--muted);font-size:12px;margin:0}

/* Floating audio player (bottom-left) */
.floating-audio-player{
  position:fixed;
  left:24px;
  bottom:24px;
  z-index:9000;
}
.audio-player-button{
  width:64px;
  height:64px;
  border-radius:50%;
  border:none;
  background:#ffffff;
  box-shadow:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.3s ease;
  padding:0;
  position:relative;
}
.audio-player-button::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  border:2px dotted #d04a4a;
  pointer-events:none;
  animation:rotate-border 20s linear infinite;
}
@keyframes rotate-border{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
.audio-player-button:hover{
  transform:scale(1.1);
  background:#ffffff;
}
.audio-player-button:active{
  transform:scale(0.95);
}
.audio-player-button.playing{
  background:#ffffff;
}
.audio-player-button.snow-active{
  background:#ffffff;
}
.audio-player-button.playing.snow-active{
  background:#ffffff;
}
.audio-player-icon{
  font-size:32px;
  line-height:1;
  display:block;
}
.floating-audio-player iframe{
  position:absolute;
  width:1px;
  height:1px;
  border:0;
  opacity:0;
  pointer-events:none;
}
@media (max-width: 900px){
  .floating-audio-player{
    left:16px;
    bottom:16px;
  }
  .audio-player-button{
    width:56px;
    height:56px;
  }
  .audio-player-icon{
    font-size:28px;
  }
}
@media (max-width: 640px){
  .floating-audio-player{
    left:12px;
    bottom:12px;
  }
  .audio-player-button{
    width:48px;
    height:48px;
  }
  .audio-player-icon{
    font-size:24px;
  }
}
[data-theme="dark"] .audio-player-button{
  background:#ffffff;
}
[data-theme="dark"] .audio-player-button:hover{
  background:#ffffff;
}
[data-theme="dark"] .audio-player-button.playing{
  background:#ffffff;
}
[data-theme="dark"] .audio-player-button.snow-active{
  background:#ffffff;
}
[data-theme="dark"] .audio-player-button.playing.snow-active{
  background:#ffffff;
}

/* Headings */
h1,h2,h3{font-family:var(--font-type)}

/* Custom light green dot cursor */
body{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8' fill='%23B8D4A0'/%3E%3C/svg%3E") 10 10, auto}

/* Beige cursor ring that appears over interactive elements */
.cursor-ring{position:fixed;left:0;top:0;width:28px;height:28px;border-radius:999px;background:rgba(243, 228, 200, 0.65);box-shadow:0 0 0 1px rgba(201,177,138,0.6);pointer-events:none;z-index:9999;opacity:0;transform:translate(-50%, -50%) scale(0.8);transition:opacity .15s ease, transform .18s ease}

/* Snowflake container */
.snowflake-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999}
.snowflake{position:absolute;color:#87CEEB;font-size:12px;user-select:none;pointer-events:none;animation:fall linear forwards}
@keyframes fall{
  0%{transform:translateY(-10px) rotate(0deg);opacity:1}
  100%{transform:translateY(100vh) rotate(360deg);opacity:0}
}

/* Responsive */
@keyframes fluidGradient{}
@media (max-width: 1040px){
  .about-grid{grid-template-columns:220px 1fr 1fr 1fr}
  .about-col.image{grid-column:1/2}
}
@media (max-width: 900px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .hero{grid-template-columns:120px 1fr}
  .hero .avatar{width:120px;height:120px}
  .spread-inner{grid-template-columns:1fr}
  .page+.page{border-left:none;border-top:1px solid var(--border)}
  .about-grid{grid-template-columns:1fr 1fr;gap:24px}
  .about-col.image img{width:100%;height:auto}
  .about-simple{grid-template-columns:1fr;gap:32px}
  .about-simple-image{position:static}
  .profile-container{grid-template-columns:1fr;gap:32px}
  .profile-sidebar{align-items:center;text-align:center}
  .profile-image{margin:0 auto;width:180px;height:180px;position:static;max-width:180px}
  .news-section-desktop{display:none}
  .news-section-mobile{display:flex}
}
@media (max-width: 640px){
  .grid{grid-template-columns:1fr}
  .hero{grid-template-columns:1fr;gap:16px}
  .hero .avatar{width:100%;height:auto}
  .post-title{font-size:28px}
  .post-content{font-size:16px}
  .post-content h2{font-size:24px}
  .post-content h3{font-size:20px}
  .blog-card{padding:20px}
  .blog-card-title{font-size:20px}
  .post-nav{flex-direction:column}
  .post-nav-link{max-width:100%}
  .gallery-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .gallery-item{min-height:180px !important;max-height:none !important;transform:none !important}
  .gallery-catalog{gap:48px}
  .gallery-item-section{padding-bottom:48px}
  .gallery-item-layout{grid-template-columns:1fr !important;gap:24px}
  .gallery-item-section:nth-child(odd) .gallery-item-layout .gallery-item-info{order:1}
  .gallery-item-section:nth-child(odd) .gallery-item-layout .gallery-item-images:first-of-type{order:2}
  .gallery-item-section:nth-child(odd) .gallery-item-layout .gallery-item-images:last-of-type{order:3}
  .gallery-item-section:nth-child(even) .gallery-item-layout .gallery-item-info{order:1}
  .gallery-item-section:nth-child(even) .gallery-item-layout .gallery-item-images:first-of-type{order:2}
  .gallery-item-section:nth-child(even) .gallery-item-layout .gallery-item-images:last-of-type{order:3}
  .profile-name{font-size:28px}
  .profile-title{font-size:16px}
  .profile-section-title{font-size:18px}
  .profile-image{width:150px;height:150px}
  .news-section{padding:16px;margin-top:20px;max-height:250px}
  .news-section-title{font-size:16px;margin-bottom:12px}
  .news-item{font-size:13px;gap:4px;padding:10px 0}
  .research-item{grid-template-columns:1fr;gap:20px}
  .research-image{width:100%;aspect-ratio:1;height:auto}
  .research-header-content{flex-direction:column;align-items:flex-start}
  .research-filters{margin-top:16px;width:100%}
  .blog-header{flex-direction:column;align-items:flex-start}
  .blog-filters{margin-top:16px;width:100%}
}
@media (max-width: 480px){
  .gallery-grid{grid-template-columns:1fr}
  .gallery-spread-right{grid-template-columns:1fr}
}

/* Dark mode toggle button */
.theme-toggle{background:none;border:none;cursor:pointer;padding:6px 8px;border-radius:6px;color:var(--muted);transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;margin-top:8px}
.theme-toggle:hover{color:var(--text);background:rgba(0,0,0,0.03)}
[data-theme="dark"] .theme-toggle:hover{background:rgba(255,255,255,0.05)}
.theme-toggle:focus{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width: 900px){
  .theme-toggle{margin-top:0;margin-left:8px}
}


/* Christmas emoji container */
.christmas-emoji-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9998;overflow:hidden}
.christmas-emoji{position:absolute;font-size:20px;user-select:none;pointer-events:auto;cursor:pointer;animation:christmas-fall linear forwards;will-change:transform,opacity;transition:none}
.christmas-emoji.caught{animation-play-state:paused;animation:none}
.christmas-emoji.melting{animation:melt-away 2s ease-out forwards !important;opacity:1}
@keyframes christmas-fall{
  0%{transform:translateY(0) translateX(0);opacity:0}
  5%{transform:translateY(30px) translateX(calc(var(--drift) * 0.05));opacity:0.2}
  10%{transform:translateY(60px) translateX(calc(var(--drift) * 0.1));opacity:0.4}
  15%{transform:translateY(90px) translateX(calc(var(--drift) * 0.15));opacity:0.6}
  20%{transform:translateY(120px) translateX(calc(var(--drift) * 0.2));opacity:0.8}
  25%{transform:translateY(150px) translateX(calc(var(--drift) * 0.25));opacity:1}
  50%{transform:translateY(calc(25vh + 150px)) translateX(calc(var(--drift) * 0.5));opacity:1}
  75%{transform:translateY(calc(75vh + 150px)) translateX(calc(var(--drift) * 0.75));opacity:1}
  100%{transform:translateY(calc(100vh + 170px)) translateX(var(--drift));opacity:0}
}
@keyframes melt-away{
  0%{transform:translateY(0) translateX(0) scale(1);opacity:1;filter:blur(0px)}
  20%{transform:translateY(5px) translateX(1px) scale(0.95);opacity:0.85;filter:blur(0.5px)}
  40%{transform:translateY(10px) translateX(2px) scale(0.85);opacity:0.7;filter:blur(1px)}
  60%{transform:translateY(16px) translateX(3px) scale(0.7);opacity:0.5;filter:blur(1.5px)}
  80%{transform:translateY(22px) translateX(4px) scale(0.5);opacity:0.3;filter:blur(2.5px)}
  100%{transform:translateY(30px) translateX(6px) scale(0.2);opacity:0;filter:blur(4px)}
}

/* Dark mode overrides for hardcoded colors */
[data-theme="dark"] .profile-image,[data-theme="dark"] .album-cover,[data-theme="dark"] .gallery-item,[data-theme="dark"] .project-image,[data-theme="dark"] .research-image,[data-theme="dark"] .selected-publication-cover{background:var(--card)}
[data-theme="dark"] .fun-facts-section,[data-theme="dark"] .friends-credits-section,[data-theme="dark"] .playlists-section-main,[data-theme="dark"] .songs-section,[data-theme="dark"] .gallery-image-item{background:var(--card);border-color:var(--border)}
[data-theme="dark"] .playlist-card,[data-theme="dark"] .album-card,[data-theme="dark"] .album-info-bar,[data-theme="dark"] .record-player-controls,[data-theme="dark"] .recommendation-card,[data-theme="dark"] .lyrics-card,[data-theme="dark"] .carousel-button,[data-theme="dark"] .filters,[data-theme="dark"] .filter-select,[data-theme="dark"] .project-card{background:var(--card);border-color:var(--border)}
[data-theme="dark"] .lyrics-text{color:var(--text)}
[data-theme="dark"] .lyrics-song-title{color:var(--text)}
[data-theme="dark"] .lyrics-info{border-left-color:var(--border)}
[data-theme="dark"] .post-content code,[data-theme="dark"] .post-content pre{background:var(--card);border:1px solid var(--border)}
[data-theme="dark"] .album-ep-label{background:rgba(37,37,37,0.95);color:var(--text);border-color:var(--border)}
[data-theme="dark"] .about-lede,[data-theme="dark"] .about-col h4,[data-theme="dark"] .role,[data-theme="dark"] .profile-name,[data-theme="dark"] .profile-title,[data-theme="dark"] .friend-name,[data-theme="dark"] .song-title,[data-theme="dark"] .track-title,[data-theme="dark"] .playlist-name,[data-theme="dark"] .education-degree,[data-theme="dark"] .recommendation-author-name,[data-theme="dark"] .recommendation-author-name a,[data-theme="dark"] .gallery-item-label,[data-theme="dark"] .gallery-item-title,[data-theme="dark"] .project-title,[data-theme="dark"] .project-title a,[data-theme="dark"] .project-detail-title,[data-theme="dark"] .project-detail-body h3,[data-theme="dark"] .research-title a,[data-theme="dark"] .research-title,[data-theme="dark"] .selected-publication-title{color:var(--text) !important}
[data-theme="dark"] .project-back-link,[data-theme="dark"] .project-external-link{color:var(--accent) !important}
[data-theme="dark"] .project-detail-tag{color:var(--accent) !important}
[data-theme="dark"] .selected-publication-title a{color:var(--text) !important}
[data-theme="dark"] .selected-publication-authors,[data-theme="dark"] .research-authors{color:var(--muted) !important}
[data-theme="dark"] .copy,[data-theme="dark"] .meta,[data-theme="dark"] .profile-affiliation,[data-theme="dark"] .profile-affiliation a,[data-theme="dark"] .profile-section p,[data-theme="dark"] .profile-section a,[data-theme="dark"] .profile-list li,[data-theme="dark"] .profile-list a,[data-theme="dark"] .friend-item,[data-theme="dark"] .song-item,[data-theme="dark"] .song-artist,[data-theme="dark"] .friend-credit,[data-theme="dark"] .research-abstract,[data-theme="dark"] .selected-publication-abstract,[data-theme="dark"] .project-detail-summary p,[data-theme="dark"] .project-detail-body,[data-theme="dark"] .project-detail-body a,[data-theme="dark"] .recommendation-text,[data-theme="dark"] .gallery-item-description,[data-theme="dark"] .contact .label,[data-theme="dark"] .education-school,[data-theme="dark"] .education-period,[data-theme="dark"] .playlists-intro,[data-theme="dark"] .friends-intro,[data-theme="dark"] .fun-facts-section p{color:var(--muted) !important}
[data-theme="dark"] .profile-pronouns,[data-theme="dark"] .social-icon,[data-theme="dark"] .now-playing-label,[data-theme="dark"] .track-artist,[data-theme="dark"] .recent-tracks-label,[data-theme="dark"] .playlists-label,[data-theme="dark"] .playlist-platform,[data-theme="dark"] .research-award,[data-theme="dark"] .selected-publication-award{color:var(--muted)}
[data-theme="dark"] .albums-section h2{color:var(--text)}
[data-theme="dark"] .recommendations-toggle-button{color:var(--text)}
[data-theme="dark"] .carousel-button{color:var(--muted);background:var(--card)}
[data-theme="dark"] .carousel-button:disabled:hover{background:var(--card);color:var(--muted)}
[data-theme="dark"] .friend-item,[data-theme="dark"] .song-item{border-bottom-color:var(--border)}
[data-theme="dark"] .playlist-card:hover{background:var(--card)}
[data-theme="dark"] .selected-publication-links a{color:var(--accent) !important}
[data-theme="dark"] .selected-publication-links a:hover{color:var(--text) !important}
[data-theme="dark"] .research-links a{color:var(--accent) !important}
[data-theme="dark"] .research-links a:hover{color:var(--text) !important}
[data-theme="dark"] .link-separator{color:var(--muted) !important}

/* Paper Detail Page */
.paper-detail{max-width:900px;margin:0 auto}
.paper-detail-header{margin-bottom:32px}
.paper-back-link{display:inline-block;color:var(--accent);text-decoration:none;font-size:14px;font-weight:500;margin-bottom:24px;transition:color 0.2s ease;font-family:var(--font-type)}
.paper-back-link:hover{color:#b83939}
.paper-detail-title{font-size:32px;font-weight:600;color:var(--text);margin:0 0 16px 0;font-family:var(--font-type);line-height:1.2}
.paper-detail-authors{font-size:16px;line-height:1.6;color:var(--muted);margin:0 0 16px 0;font-style:oblique;transform:skewX(-1deg)}
.paper-detail-authors .author-highlight{color:inherit;background:linear-gradient(180deg,transparent 60%,rgba(211,47,47,0.2) 60%,rgba(211,47,47,0.2) 85%,transparent 85%);font-weight:500;padding:0 2px;display:inline}
.paper-detail-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:12px}
.paper-detail-venue{font-size:14px;color:#d32f2f;font-weight:500}
.paper-detail-year{font-size:14px;color:var(--muted);font-weight:500}
.paper-detail-award{font-size:14px;color:var(--muted);font-weight:500}
.paper-detail-topic{display:inline-block;background:rgba(208,74,74,0.1);color:var(--accent);border:1px solid rgba(208,74,74,0.2);border-radius:20px;padding:4px 12px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.paper-detail-image{width:100%;margin:32px 0;border-radius:8px;overflow:hidden}
.paper-detail-image img{width:100%;height:auto;display:block}
.paper-detail-content{margin-top:32px}
.paper-detail-abstract{margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--border)}
.paper-section-title{font-size:18px;font-weight:600;color:var(--accent);transform:skewX(-3deg);margin:0 0 12px 0;font-family:var(--font-type);display:inline-block;position:relative;z-index:1}
.paper-section-title::before{content:"";position:absolute;left:-2px;right:-2px;bottom:0.1em;height:0.45em;background:rgba(208,74,74,0.25);border-radius:2px 4px 1px 3px;z-index:-1;clip-path:polygon(2px 0,calc(100% - 2px) 0,100% 12%,100% 88%,calc(100% - 3px) 100%,0 100%,0 85%,0 15%)}
.paper-detail-abstract p{font-size:14px;line-height:1.6;color:var(--text);margin:0}
.paper-detail-links{margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--border)}
.paper-links-list{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
.paper-link{display:inline-block;color:var(--accent);text-decoration:none;font-size:14px;font-weight:500;padding:8px 16px;border:1px solid var(--border);border-radius:8px;transition:all 0.2s ease;font-family:var(--font-type)}
.paper-link:hover{color:#fff;background:var(--accent);border-color:var(--accent)}
.paper-detail-body{font-size:14px;line-height:1.6;color:var(--text);margin-bottom:32px}
.paper-detail-body p{margin:0 0 16px 0}
.paper-detail-body h2{font-size:18px;font-weight:600;color:var(--accent);transform:skewX(-3deg);margin:24px 0 12px 0;font-family:var(--font-type);display:inline-block;position:relative;z-index:1}
.paper-detail-body h2::before{content:"";position:absolute;left:-2px;right:-2px;bottom:0.1em;height:0.45em;background:rgba(208,74,74,0.25);border-radius:2px 4px 1px 3px;z-index:-1;clip-path:polygon(2px 0,calc(100% - 2px) 0,100% 12%,100% 88%,calc(100% - 3px) 100%,0 100%,0 85%,0 15%)}
.paper-detail-body h3{font-size:16px;font-weight:600;color:var(--text);margin:20px 0 10px 0;font-family:var(--font-type)}
.paper-detail-body ul,.paper-detail-body ol{margin:0 0 16px 0;padding-left:20px}
.paper-detail-body li{margin:0 0 6px 0}
.paper-detail-body a{color:var(--accent);text-decoration:underline;transition:color 0.2s ease}
.paper-detail-body a:hover{color:var(--text)}
.paper-detail-citations{margin-top:32px;padding-top:24px;border-top:1px solid var(--border)}
.paper-citations-count{font-size:14px;color:var(--muted);font-style:italic;margin:0}
[data-theme="dark"] .paper-detail-title,[data-theme="dark"] .paper-detail-body,[data-theme="dark"] .paper-detail-body h3,[data-theme="dark"] .paper-detail-abstract p{color:var(--text)}
[data-theme="dark"] .paper-detail-authors,[data-theme="dark"] .paper-detail-year,[data-theme="dark"] .paper-detail-award{color:var(--muted)}
.paper-detail-bibtex{margin-top:32px;padding-top:24px;border-top:1px solid var(--border)}
.bibtex-container{background:var(--card);border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-top:12px}
.bibtex-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--card);border-bottom:1px solid var(--border)}
.bibtex-label{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-family:var(--font-type)}
.bibtex-copy-btn{background:var(--accent);color:#fff;border:none;padding:6px 16px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:all 0.2s ease;font-family:var(--font-type);display:flex;align-items:center;gap:6px}
.bibtex-copy-btn:hover{background:#b83939;transform:translateY(-1px);box-shadow:0 2px 8px rgba(208,74,74,0.3)}
.bibtex-copy-btn.copied{background:#4caf50}
.bibtex-copy-success{display:none}
.bibtex-content{background:var(--bg);padding:16px;margin:0;overflow-x:auto;font-family:'Courier New',Courier,monospace;font-size:12px;line-height:1.6;color:var(--text);white-space:pre}
.bibtex-content code{background:transparent;padding:0;font-family:inherit;font-size:inherit;color:inherit;border:none;white-space:pre;display:block}
[data-theme="dark"] .bibtex-container,[data-theme="dark"] .bibtex-header{background:var(--card);border-color:var(--border)}
[data-theme="dark"] .bibtex-content{background:var(--bg);color:var(--text)}
@media (max-width: 768px){
  .paper-detail-title{font-size:28px}
  .paper-detail-abstract p{font-size:14px}
  .paper-detail-body{font-size:14px}
  .bibtex-header{flex-direction:column;align-items:flex-start;gap:8px}
  .bibtex-copy-btn{width:100%}
}

/* Email obfuscation - icon trigger with collapsible */
.email-icon-wrapper{position:relative;display:inline-block}
.email-display{display:none;position:absolute;top:100%;left:0;margin-top:8px;font-size:14px;color:var(--muted);white-space:nowrap;z-index:10;opacity:0;transform:translateY(-8px);transition:opacity 0.3s ease,transform 0.3s ease;pointer-events:none}
.email-display.revealed{display:block;opacity:1;transform:translateY(0);pointer-events:auto}
.email-link{color:var(--accent);text-decoration:none;position:relative;padding:0 5px 3px 5px;transition:all 0.2s ease;display:inline;background:linear-gradient(180deg,transparent 60%,rgba(170,220,220,0.55) 60%,rgba(170,220,220,0.55) 85%,transparent 85%);background-size:100% 100%;box-decoration-break:clone;-webkit-box-decoration-break:clone;font-family:monospace;font-size:0.95em}
.email-link:hover{color:var(--accent);background:linear-gradient(180deg,transparent 60%,rgba(170,220,220,0.75) 60%,rgba(170,220,220,0.75) 85%,transparent 85%)}
[data-theme="dark"] .email-link{color:var(--accent)}

/* Shining highlight animation - glass-like effect */
@keyframes shine{
  0%{background-position:-200% center}
  100%{background-position:200% center}
}
.shining-highlight{display:inline-block;position:relative;background:linear-gradient(90deg,#b83939 0%,#b83939 35%,rgba(255,255,255,0.9) 48%,rgba(255,255,255,1) 50%,rgba(255,255,255,0.9) 52%,#d32f2f 65%,#d32f2f 100%);background-size:200% auto;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:shine 5s linear infinite;font-weight:700;color:#d32f2f;filter:brightness(1.1)}

/* Design Considerations Cards */
.design-considerations-container{max-width:1400px;margin:48px auto;padding:0 24px}
.design-considerations-header{margin-bottom:32px}
.design-considerations-title{font-size:32px;font-weight:600;color:var(--text);margin:0 0 8px 0;font-family:var(--font-type);line-height:1.2}
.design-considerations-accent{width:64px;height:2px;background:var(--accent);margin-bottom:16px}
.design-considerations-description{max-width:768px;font-size:16px;line-height:1.6;color:var(--muted);margin:0}
.design-considerations-progress{display:flex;align-items:center;gap:12px;margin-bottom:40px}
.design-considerations-progress-text{font-size:14px;color:var(--muted);white-space:nowrap}
.design-considerations-progress-bar{flex:1;height:6px;overflow:hidden;border-radius:999px;background:#e5e7eb}
.design-considerations-progress-fill{height:100%;background:var(--accent);transition:width 0.5s ease-out;width:0%}
.design-considerations-restart-btn{width:32px;height:32px;padding:0;display:flex;align-items:center;justify-content:center;color:var(--muted);background:transparent;border:none;border-radius:6px;cursor:pointer;transition:all 0.2s ease}
.design-considerations-restart-btn:hover{color:var(--accent);background:rgba(208,74,74,0.05)}
.design-considerations-restart-btn svg{width:16px;height:16px}
.design-considerations-grid{display:flex;flex-direction:column}
.design-considerations-list{display:flex;flex-direction:column;gap:8px}
.design-considerations-list{display:flex;flex-direction:column;gap:8px}
.design-considerations-list-item{border:none;border-radius:0;background:transparent;overflow:hidden;transition:all 0.2s ease}
.design-considerations-list-item:hover{box-shadow:none}
.design-considerations-list-item-header{display:flex;align-items:center;gap:12px;padding:12px 0;user-select:none}
.design-considerations-list-item-progress-circle{width:32px;height:32px;flex-shrink:0;position:relative;display:flex;align-items:center;justify-content:center}
.design-considerations-list-item-progress-circle svg{width:32px;height:32px;transform:rotate(-90deg);overflow:visible}
.design-considerations-list-item-progress-circle-bg{fill:none;stroke:#e5e7eb;stroke-width:2.5}
.design-considerations-list-item-progress-circle-fill{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke-dashoffset 0.3s ease}
.design-considerations-list-item-progress-text{position:absolute;font-size:9px;font-weight:600;color:var(--accent);font-family:var(--font-type);line-height:1;pointer-events:none}
.design-considerations-list-item-number{font-family:monospace;font-size:14px;font-weight:700;color:#9ca3af;min-width:32px;text-align:left;line-height:1}
.design-considerations-list-item-title{flex:1;font-size:15px;font-weight:600;color:var(--text);margin:0;font-family:var(--font-type);line-height:1.4}
.design-considerations-list-item-toggle{width:20px;height:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--muted);transition:transform 0.2s ease;cursor:pointer;margin:0}
.design-considerations-list-item.expanded .design-considerations-list-item-toggle{transform:rotate(180deg)}
.design-considerations-list-item-content{display:none}
.design-considerations-list-item.expanded .design-considerations-list-item-content{display:block;padding:0 16px 12px 16px}
.design-considerations-list-item-desc{font-size:14px;line-height:1.5;color:var(--muted);margin:0 0 12px 0}
.design-considerations-list-item-checklist{list-style:none;padding:0;margin:0}
.design-considerations-list-item-checklist-item{display:flex;gap:12px;margin-bottom:8px;font-size:14px;line-height:1.5;color:var(--text);cursor:pointer;transition:all 0.2s ease;padding:4px 0;border-radius:4px}
.design-considerations-list-item-checklist-item:hover{background:rgba(208,74,74,0.05)}
.design-considerations-list-item-checklist-item.crossed{text-decoration:line-through;color:var(--muted);opacity:0.6}
.design-considerations-list-item-checklist-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0;margin-top:6px;transition:all 0.2s ease}
.design-considerations-list-item-checklist-item.crossed .design-considerations-list-item-checklist-dot{background:var(--muted);opacity:0.5}
@media (max-width: 768px){
  .design-considerations-container{padding:0 16px}
  .design-considerations-title{font-size:24px}
  .design-considerations-list-item-header{padding:12px}
  .design-considerations-list-item-content{padding:0 12px 12px 12px}
  .design-considerations-list-item.expanded .design-considerations-list-item-content{padding:0 12px 12px 12px}
}
[data-theme="dark"] .design-considerations-list-item{background:transparent}
[data-theme="dark"] .design-considerations-progress-bar{background:var(--border)}