/* Main Stylesheet for watershade.dev */
:root {
  --cap-height: calc(1rem * 14 / 16);
  --cap-ratio: calc(1 / 0.698);
  --gap: var(--cap-height);
  --width: 640px;
  --border: 1.5px;
  --radius: calc(var(--cap-height) / 3);
  --text: #1a1a1a;
  --text-secondary: #444;
  --gray-text: rgba(0,0,0,0.45);
  --gray-line: rgba(0,0,0,0.15);
  --gray-bg: rgba(0,0,0,0.04);
  --accent: #2563eb;
  --accent-light: #dbeafe;
  --bg: #ffffff;
  --code-bg: #f6f8fa;
}

/* Dark mode */
:root.dark {
  --text: #e1e1e1;
  --text-secondary: #bbb;
  --gray-text: rgba(255,255,255,0.45);
  --gray-line: rgba(255,255,255,0.12);
  --gray-bg: rgba(255,255,255,0.06);
  --accent: #60a5fa;
  --accent-light: rgba(96,165,250,0.12);
  --bg: #0f0f13;
  --code-bg: #1a1a24;
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --text: #e1e1e1;
    --text-secondary: #bbb;
    --gray-text: rgba(255,255,255,0.45);
    --gray-line: rgba(255,255,255,0.12);
    --gray-bg: rgba(255,255,255,0.06);
    --accent: #60a5fa;
    --accent-light: rgba(96,165,250,0.12);
    --bg: #0f0f13;
    --code-bg: #1a1a24;
  }
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;}
body{
  font-size:calc(var(--cap-height)*var(--cap-ratio));line-height:1.6;
  font-family:'IBM Plex Sans','Noto Sans SC',sans-serif;
  font-feature-settings:"kern"1,"liga"1,"calt"1;
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
  background:var(--bg);color:var(--text);min-height:100svh;
}
.page{display:flex;flex-direction:column;gap:calc(var(--gap)*3.5);align-items:center;margin:calc(var(--gap)*4)0 calc(var(--gap)*6);}

/* Dark Mode Toggle */
.dark-toggle {
  width: 28px; height: 28px; border-radius: 50%; border: none;
  background: transparent; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s; flex-shrink: 0; font-size: 1.1rem; line-height: 1;
  opacity: .4;
}
.dark-toggle:hover { opacity: 1; }

/* Navigation */
.menu{
  width:min(var(--width),92vw);display:flex;flex-direction:row;align-items:center;
  gap:calc(min(var(--gap)*1.2,3vw));color:var(--gray-text);font-size:.92rem;flex-wrap:wrap;
}
.menu a{text-decoration:none;color:var(--gray-text);border-bottom:var(--border)solid transparent;padding-bottom:2px;transition:color .15s,border-color .15s;}
.menu a:hover,.menu a.selected{color:var(--text);border-bottom-color:var(--text);}
.menu .spacer{flex-grow:1;}
.menu .logo{font-weight:700;font-size:1.05rem;color:var(--text);letter-spacing:-.3px;}

/* Content wrapper */
.content{width:min(var(--width),92vw);display:flex;flex-direction:column;gap:var(--gap);}
.content>*{width:100%;}

/* Hero */
.hero h1{font-size:1.8rem;font-weight:700;line-height:1.2;margin-bottom:4px;}
.hero h1 span{color:var(--accent);}
.hero p{color:var(--gray-text);font-size:.92rem;line-height:1.6;margin-top:6px;max-width:480px;}
.hero-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px;}
.hero-tag{padding:2px 10px;border-radius:4px;background:var(--gray-bg);color:var(--gray-text);font-size:.78rem;font-weight:500;}

/* Section Title */
.section-title{
  font-size:1.05rem;font-weight:600;margin-top:calc(var(--gap)*1.2);margin-bottom:calc(var(--gap)*0.5);
  display:flex;align-items:center;gap:8px;
}
.section-title .more{font-size:.82rem;font-weight:400;color:var(--gray-text);margin-left:auto;text-decoration:none;}
.section-title .more:hover{color:var(--accent);}

/* Page Title */
.page-title{font-size:1.2rem;font-weight:700;margin-bottom:calc(var(--gap)*0.3);}
.page-subtitle{font-size:.88rem;color:var(--gray-text);margin-bottom:calc(var(--gap)*0.5);}

/* Filter Bar */
.filter-bar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:calc(var(--gap)*0.5);}
.filter-btn{
  padding:3px 12px;border-radius:4px;border:1px solid var(--gray-line);
  background:var(--bg);font-size:.8rem;cursor:pointer;transition:all .15s;
  color:var(--gray-text);font-family:inherit;
}
.filter-btn:hover,.filter-btn.active{border-color:var(--accent);background:var(--accent-light);color:var(--accent);}

/* Blog List (tonsky-style) */
.blog-year{font-size:.85rem;font-weight:600;color:var(--gray-text);margin-top:calc(var(--gap)*0.8);margin-bottom:calc(var(--gap)*0.3);}
.blog-item{display:flex;gap:8px;padding:3px 0;font-size:.9rem;line-height:1.5;}
.blog-item .date{min-width:46px;color:var(--gray-text);font-size:.82rem;font-weight:400;flex-shrink:0;}
.blog-item .title{color:var(--text);text-decoration:none;}
.blog-item .title:hover{color:var(--accent);}
.blog-item .star{color:#eab308;margin-right:2px;font-size:.82rem;}
.blog-item .tags{display:inline-flex;gap:4px;margin-left:6px;}
.blog-item .tag{font-size:.72rem;padding:1px 6px;border-radius:3px;background:var(--gray-bg);color:var(--gray-text);}

/* Project Card (list style) */
.project-card{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--gray-line);text-decoration:none;color:var(--text);transition:all .15s;}
.project-card:last-child{border-bottom:none;}
.project-card:hover .project-name{color:var(--accent);}
.project-card:hover{opacity:.9;}
.project-icon{width:48px;height:48px;border-radius:var(--radius);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.3rem;background:var(--gray-bg);}
.project-info{flex:1;min-width:0;}
.project-name{font-size:.93rem;font-weight:600;transition:color .15s;}
.project-brief{font-size:.82rem;color:var(--gray-text);margin-top:2px;line-height:1.5;}
.project-meta{font-size:.75rem;color:var(--gray-text);margin-top:4px;display:flex;gap:12px;}
.project-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px;}
.project-tags .tag{font-size:.72rem;padding:1px 6px;border-radius:3px;background:var(--gray-bg);color:var(--gray-text);}

/* Project Header (detail page) */
.project-header{display:flex;gap:16px;align-items:flex-start;}
.project-header .project-icon{width:56px;height:56px;font-size:1.5rem;}
.project-header .project-info{flex:1;}
.project-header h1{font-size:1.15rem;font-weight:700;}
.project-header .brief{font-size:.85rem;color:var(--gray-text);margin-top:4px;line-height:1.6;}
.back-link{font-size:.82rem;color:var(--accent);text-decoration:none;display:inline-block;margin-bottom:4px;}
.back-link:hover{text-decoration:underline;}

/* Review Card */
.review-card{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--gray-line);text-decoration:none;color:var(--text);transition:all .15s;}
.review-card:last-child{border-bottom:none;}
.review-card:hover .review-name{color:var(--accent);}
.review-cover{
  width:48px;height:68px;border-radius:4px;flex-shrink:0;display:flex;
  align-items:center;justify-content:center;font-size:.6rem;font-weight:700;
  text-align:center;color:#fff;line-height:1.3;
}
.review-body{flex:1;min-width:0;}
.review-name{font-size:.9rem;font-weight:600;transition:color .15s;}
.review-brief{font-size:.8rem;color:var(--gray-text);margin-top:2px;line-height:1.5;}
.review-meta{font-size:.75rem;color:var(--gray-text);margin-top:4px;display:flex;gap:12px;align-items:center;}
.review-badge{font-size:.7rem;padding:1px 6px;border-radius:3px;font-weight:500;}
.review-badge.book{background:#e8f5e9;color:#2e7d32;}
.review-badge.course{background:#fff3e0;color:#ef6c00;}

/* Article Detail */
.article-header h1{font-size:1.45rem;font-weight:700;line-height:1.35;}
.article-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:.82rem;color:var(--gray-text);margin-top:12px;}
.article-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--gray-text);}
.article-meta .tag{font-size:.75rem;padding:2px 8px;border-radius:3px;background:var(--gray-bg);color:var(--gray-text);}

/* Article Body (Markdown) */
.article-body{font-size:.92rem;line-height:1.75;color:var(--text-secondary);}
.article-body h2{font-size:1.15rem;font-weight:700;color:var(--text);margin-top:calc(var(--gap)*1.2);margin-bottom:calc(var(--gap)*0.3);}
.article-body h3{font-size:1.02rem;font-weight:600;color:var(--text);margin-top:calc(var(--gap));margin-bottom:calc(var(--gap)*0.2);}
.article-body h4{font-size:.93rem;font-weight:600;color:var(--text);margin-top:calc(var(--gap)*0.8);margin-bottom:calc(var(--gap)*0.2);}
.article-body p{margin-bottom:calc(var(--gap)*0.5);}
.article-body ul,.article-body ol{padding-left:1.4em;margin-bottom:calc(var(--gap)*0.5);}
.article-body li{margin-bottom:4px;}
.article-body strong{color:var(--text);font-weight:600;}
.article-body a{color:var(--accent);word-break:break-all;}
.article-body code{font-family:'JetBrains Mono','IBM Plex Mono',monospace;font-size:.82em;background:var(--code-bg);padding:2px 6px;border-radius:3px;}
.article-body pre{background:var(--code-bg);padding:12px 14px;border-radius:var(--radius);overflow-x:auto;font-size:.82rem;line-height:1.5;margin-bottom:calc(var(--gap)*0.5);}
.article-body pre code{background:none;padding:0;font-size:inherit;}
.article-body blockquote{border-left:3px solid var(--accent);padding:6px 12px;margin:calc(var(--gap)*0.5)0;background:var(--accent-light);border-radius:0 var(--radius) var(--radius) 0;color:var(--text);font-size:.88rem;}
.article-body blockquote p{margin-bottom:0;}
.article-body img{max-width:100%;border-radius:var(--radius);margin:calc(var(--gap)*0.5)0;}
.article-body hr{border:none;border-top:1px solid var(--gray-line);margin:calc(var(--gap))0;}
.article-body table{width:100%;border-collapse:collapse;font-size:.85rem;margin-bottom:calc(var(--gap)*0.5);}
.article-body th,.article-body td{border:1px solid var(--gray-line);padding:6px 10px;text-align:left;}
.article-body th{background:var(--gray-bg);font-weight:600;color:var(--text);}

/* Article Navigation */
.article-nav{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--gray-line);padding-top:calc(var(--gap)*0.8);font-size:.85rem;}
.article-nav a{color:var(--accent);text-decoration:none;max-width:45%;}
.article-nav a:hover{text-decoration:underline;}
.article-nav .prev{text-align:left;}
.article-nav .next{text-align:right;margin-left:auto;}
.article-nav .gray{color:var(--gray-text);font-size:.78rem;}

/* About */
.about-header{display:flex;gap:20px;align-items:flex-start;}
.about-avatar{width:72px;height:72px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,var(--accent),#7c3aed);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.8rem;font-weight:700;}
.about-info{flex:1;}
.about-info h1{font-size:1.3rem;font-weight:700;}
.about-info .title{color:var(--gray-text);font-size:.88rem;margin-top:2px;}
.about-info .links{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;}
.about-info .links a{font-size:.82rem;color:var(--accent);text-decoration:none;}
.about-info .links a:hover{text-decoration:underline;}
.about-text{font-size:.88rem;color:var(--text);line-height:1.7;}
.about-text p{margin-bottom:10px;}
.about-text.gray{color:var(--gray-text);}
.about-text a{color:var(--accent);}
.interest-grid{display:flex;gap:6px;flex-wrap:wrap;}
.interest-tag{padding:3px 10px;border-radius:4px;background:var(--gray-bg);color:var(--text);font-size:.82rem;font-weight:500;}

/* Footer */
.footer{width:min(var(--width),92vw);text-align:center;color:var(--gray-text);font-size:.78rem;border-top:1px solid var(--gray-line);padding-top:calc(var(--gap)*1.5);}
.footer a{color:var(--accent);text-decoration:none;}

/* Responsive */
@media(max-width:480px){
  .menu{gap:calc(min(var(--gap)*0.8,2vw));font-size:.85rem;}
  .hero h1{font-size:1.4rem;}
  .article-header h1{font-size:1.2rem;}
  .project-card{flex-direction:column;gap:8px;}
  .about-header{flex-direction:column;align-items:center;text-align:center;}
}