:root {
  --main-bg-color: #fcfcfc;
  --text-main: #1a1a1a;
  --text-muted: #444;
  --primary-color: #0056b3;
  --h1-gradient-start: #0056b3;
  --h1-gradient-end: #00b4db;
  --border-color: #eee;
  --comment-bg: rgba(255, 255, 255, 0.7);
  --table-header-bg: #f8f9fa;
  --code-bg: #f1f3f5;
  --code-color: #e03131;
  --pre-bg: #1a1a1b;
  --pre-color: #f8f8f2;
  --article-font-size: 14px;
  --comment-font-size: 12px;
}
/* ==========================================================================
   1. Base / Reset
   ========================================================================== */
body {  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;  line-height: 1.6;  color: var(--text-main);  margin: 0;  padding: 0;  background-color: var(--main-bg-color);}
.content-wrapper {  max-width: 960px;  margin: 0 auto;  padding: 40px 20px;  box-sizing: border-box;  transition: filter 0.3s;}

/* ==========================================================================
   2. Typography & Article Elements
   ========================================================================== */
h1 {  font-size: 2.8em;  font-weight: 800;  letter-spacing: -0.02em;  margin-bottom: 0.5em;  background: linear-gradient(135deg, var(--h1-gradient-start), var(--h1-gradient-end));  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;  border-bottom: none;}
h2 {  font-size: 1.8em;  font-weight: 700;  margin-top: 1.5em;  margin-bottom: 0.8em;  color: var(--text-main);  position: relative;  padding-bottom: 8px;  border-bottom: 2px solid var(--border-color);}
h2::after {  content: '';  position: absolute;  bottom: -2px;  left: 0;  width: 60px;  height: 2px;  background: var(--primary-color);}
h3 {  font-size: 1.4em;  font-weight: 600;  color: var(--text-main);  margin-top: 1.2em;}
p {  margin-bottom: 1.2em;  color: var(--text-muted);}
.article-body {  margin-top: 20px;  font-size: var(--article-font-size);  line-height: 1.8;  color: var(--text-main);}
.article-body ul, .article-body ol {  padding-left: 20px;  margin-bottom: 20px;}
.article-body li {  margin-bottom: 8px;}
.article-body p:last-child, .comment-box p:last-child {  margin-bottom: 0;}
a {  color: var(--primary-color);  text-decoration: none;  border-bottom: 1px solid transparent;  transition: border-color 0.2s;}
a:hover {  border-bottom-color: var(--primary-color);}

/* ==========================================================================
   3. Layout & Components
   ========================================================================== */
.comment-box {  background: var(--comment-bg);  backdrop-filter: blur(10px);  padding: 20px;  border-radius: 12px;  border: 1px solid rgba(0, 0, 0, 0.05);  margin-bottom: 30px;  box-shadow: 0 4px 20px rgba(0,0,0,0.03);  font-size: var(--comment-font-size);  position: relative;  overflow: hidden;}
.comment-box::before {  content: '';  position: absolute;  left: 0;  top: 0;  height: 100%;  width: 4px;  background: var(--primary-color);}
img {  max-width: 100%;  height: auto;  border: 1px solid var(--border-color);  border-radius: 8px;  box-shadow: 0 10px 30px rgba(0,0,0,0.08);  margin: 20px 0 30px 0;  display: block;}
hr {  border: 0;  height: 1px;  background: linear-gradient(to right, var(--border-color), transparent);  margin: 60px 0;}
.node-container {  margin-bottom: 60px;  scroll-margin-top: 100px;}
.child-nodes {  margin-left: 0;  border-left: none;  padding-left: 0;  margin-top: 40px;}
.child-nodes > .node-container {  margin-left: 30px;  padding-left: 20px;  border-left: 2px solid var(--border-color);}

/* ==========================================================================
   4. Markdown Elements (Tables, Quotes, Code)
   ========================================================================== */
table {  border-collapse: separate;  border-spacing: 0;  margin-bottom: 20px;  width: 100%;  border: 1px solid var(--border-color);  border-radius: 8px;  overflow: hidden;}
th, td {  padding: 12px 15px;  border-bottom: 1px solid var(--border-color);  text-align: left;}
th {  background-color: var(--table-header-bg);  font-weight: 600;  color: var(--text-main);}
tr:last-child td {  border-bottom: none;}
blockquote {  border-left: 4px solid var(--primary-color);  margin: 20px 0;  padding: 15px 20px;  color: var(--text-muted);  background: var(--comment-bg);  border-radius: 0 8px 8px 0;  font-style: italic;}
code {  background-color: var(--code-bg);  padding: 2px 6px;  border-radius: 4px;  font-family: 'Fira Code', monospace;  color: var(--code-color);  font-size: 0.9em;}
pre {  background-color: var(--pre-bg);  color: var(--pre-color);  padding: 20px;  border-radius: 12px;  overflow-x: auto;  box-shadow: 0 10px 30px rgba(0,0,0,0.15);  margin: 20px 0;}
pre code {  background-color: transparent;  padding: 0;  color: inherit;  font-size: 0.85em;}

/* ==========================================================================
   5. Navigation & Utilities
   ========================================================================== */
.back-link {  position: fixed;  top: 20px;  left: 80px;  background: var(--primary-color);  color: white !important;  padding: 0 20px;  border-radius: 8px;  text-decoration: none;  font-weight: 600;  font-size: 14px;  height: 44px;  display: flex;  align-items: center;  z-index: 1001;  box-shadow: 0 4px 15px rgba(0,0,0,0.1);  transition: all 0.3s ease;}
.back-link:hover {  filter: brightness(0.9);  transform: translateY(-2px);}
#sidebar.open ~ .back-link {  left: 340px;}
.blur {  pointer-events: none;  opacity: 0.6;  transform: scale(0.98);  transition: all 0.4s ease;}
/* Sidebar Menu */
#sidebar {  position: fixed;  top: 0;  left: -320px;  width: 320px;  height: 100%;  background: #fff;  color: #333;  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);  overflow-y: auto;  z-index: 1000;  padding: 30px;  box-sizing: border-box;  box-shadow: 20px 0 50px rgba(0,0,0,0.05);  border-right: 1px solid #eee;}
#sidebar.open {  left: 0;}
#sidebar h2 {  border: none;  background: none;  color: #111;  font-size: 1.4em;  margin-top: 10px;  padding: 0;  border-bottom: none;  font-weight: 800;}
#sidebar ul {  list-style: none;  padding: 0;  margin: 30px 0;}
#sidebar li {  margin: 8px 0;}
#sidebar a {  color: #666;  text-decoration: none;  transition: all 0.2s;  font-size: 0.95em;  display: block;  padding: 6px 0;}
#sidebar a:hover {  color: var(--primary-color);  padding-left: 5px;}
.toc-child {  margin-left: 20px;  border-left: 1px solid var(--border-color);  padding-left: 15px;}

/* Hamburger Button */
#menu-toggle {  position: fixed;  top: 20px;  left: 20px;  width: 44px;  height: 44px;  background: var(--primary-color);  color: white;  border: none;  border-radius: 8px;  cursor: pointer;  z-index: 1001;  display: flex;  align-items: center;  justify-content: center;  font-size: 20px;  box-shadow: 0 4px 15px rgba(0,0,0,0.1);  transition: all 0.3s ease;}
#menu-toggle:hover {  transform: scale(1.05);  filter: brightness(0.9);}
#menu-toggle.open {  left: 20px;  background: #333;}
#sidebar-overlay {  position: fixed;  top: 0;  left: 0;  width: 100%;  height: 100%;  background: rgba(0,0,0,0.2);  backdrop-filter: blur(4px);  visibility: hidden;  opacity: 0;  transition: all 0.3s;  z-index: 999;}
#sidebar-overlay.show {  visibility: visible;  opacity: 1;}

/* TTS Button */
.tts-btn {  background: #f0f4f8;  border: none;  border-radius: 6px;  cursor: pointer;  padding: 4px 10px;  margin-left: 12px;  font-size: 0.75em;  transition: all 0.2s;  vertical-align: middle;  color: var(--primary-color);  font-weight: 600;}
.tts-btn:hover {  background: var(--primary-color);  color: white;  transform: translateY(-1px);}
.tts-btn.playing {  background: #ff9f0a;  color: white;  animation: pulse 1.5s infinite;}
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.7; } 100% { opacity: 1; } }

/* Project Context Menu (Web Bulk Export) */
#project-menu {  position: fixed;  top: 0;  right: -320px;  width: 320px;  height: 100%;  background: #fff;  color: #333;  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);  overflow-y: auto;  z-index: 1000;  padding: 30px;  box-sizing: border-box;  box-shadow: -20px 0 50px rgba(0,0,0,0.05);  border-left: 1px solid #eee;}
#project-menu.open {  right: 0;}
#project-menu h2 {  border: none;  background: none;  color: #111;  font-size: 1.4em;  margin-top: 10px;  padding: 0;  border-bottom: none;  font-weight: 800;}
#project-menu ul {  list-style: none;  padding: 0;  margin: 30px 0;}
#project-menu li {  margin: 8px 0;}
#project-menu a {  color: #666;  text-decoration: none;  transition: all 0.2s;  font-size: 0.95em;  display: block;  padding: 6px 0;}
#project-menu a:hover {  color: var(--primary-color);  padding-left: 5px;}
#project-menu-toggle {  position: fixed;  top: 20px;  right: 20px;  width: 44px;  height: 44px;  background: var(--primary-color);  color: white;  border: none;  border-radius: 8px;  cursor: pointer;  z-index: 1001;  display: flex;  align-items: center;  justify-content: center;  font-size: 20px;  box-shadow: 0 4px 15px rgba(0,0,0,0.1);  transition: all 0.3s ease;}
#project-menu-toggle:hover {  transform: scale(1.05);  filter: brightness(0.9);}
#project-menu-toggle.open {  right: 20px;  background: #333;}
#project-menu-overlay {  position: fixed;  top: 0;  left: 0;  width: 100%;  height: 100%;  background: rgba(0,0,0,0.2);  backdrop-filter: blur(4px);  visibility: hidden;  opacity: 0;  transition: all 0.3s;  z-index: 999;}
#project-menu-overlay.show {  visibility: visible;  opacity: 1;}