/** Shopify CDN: Minification failed

Line 534:0 All "@import" rules must come first

**/
/* ==========================================================================
   Global Box‑Sizing Reset
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ==========================================================================
   Keyframes (Animations)
   ========================================================================== */

@keyframes text-flicker-anim {
  0%, 100% { opacity: 1; }
  50% { opacity: .9; }
}

@keyframes button-pulse-anim {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(212, 163, 115, .7); }
  70% { box-shadow: 0 0 0 20px rgba(212, 163, 115, 0); }
  100% { box-shadow: 0 0 0 0 rgba(212, 163, 115, 0); }
}

@keyframes blink {
  50% { opacity: 0; }
}

@keyframes hue-rotate {
  to { filter: hue-rotate(360deg); }
}

@keyframes rainbow-bg-anim {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes pika-pika-shadow {
  0% { box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0073e6, 0 0 20px #0073e6; }
  50% { box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073; }
  100% { box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0073e6, 0 0 20px #0073e6; }
}

@keyframes screen-shake {
  0%, 97% { transform: translate(0, 0) skewX(0); }
  97.5% { transform: translate(2px, -1px) skewX(-1deg); }
  98% { transform: translate(-1px, 2px) skewX(1deg); }
  98.5% { transform: translate(1px, 1px) skewX(0.5deg); }
  99% { transform: translate(-2px, -1px) skewX(-0.5deg); }
  100% { transform: translate(0, 0) skewX(0); }
}

@keyframes horror-flicker-body {
  0%, 100% { opacity: 1; }
  20% { opacity: 0.8; }
  40% { opacity: 1; }
  60% { opacity: 0.7; }
  80% { opacity: 1; }
}

@keyframes horror-flicker-headline {
  0%, 100% { opacity: 1; }
  30% { opacity: 0.6; }
  60% { opacity: 1; }
}

@keyframes noise-flicker {
  0%, 100% { opacity: 0.05; }
  50% { opacity: 0.08; }
}

@keyframes scanline-move {
  0% { background-position-y: 0; }
  100% { background-position-y: 100%; }
}

@keyframes blackout {
  /* 0%から9.1% (1秒) で暗転 */
  0% { opacity: 0; pointer-events: none; }
  9.1% { opacity: 1; pointer-events: auto; }
  /* 9.1%から90.9% (10秒間) 真っ暗な状態を維持 */
  90.9% { opacity: 1; pointer-events: auto; }
  /* 90.9%から100% (1秒) で元に戻る */
  100% { opacity: 0; pointer-events: none; }
}

@keyframes gagagaga-baba {
  0%, 100% { content: ""; opacity: 0; }
  10% { content: "■■■■■■■■■■■■■■"; opacity: 1; transform: translate(5px, -10px) skew(-5deg); }
  25% { content: "■■■■■■■  ■■■■■■■"; opacity: 0.8; transform: translate(-10px, 5px) skew(3deg); }
  40% { content: "■■■■  ■■■■"; opacity: 1; transform: translate(10px, 10px) skew(-4deg); }
  60% { content: "■■■■■■■■■■■■■■■■■■■■■■■■■■■■■"; opacity: 0.7; transform: translate(-5px, -5px) skew(2deg); }
  80% { content: "■■■  ■■■"; opacity: 1; transform: translate(10px, -5px) skew(5deg); }
}

@keyframes sidebar-shake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-1px, 1px); }
  20% { transform: translate(1px, -1px); }
  30% { transform: translate(-1px, 0px); }
  40% { transform: translate(1px, 1px); }
  50% { transform: translate(0px, -1px); }
  60% { transform: translate(-1px, 1px); }
  70% { transform: translate(1px, 0px); }
  80% { transform: translate(-1px, -1px); }
  90% { transform: translate(1px, -1px); }
}

@keyframes fast-flicker-blackout {
  0%, 100% { opacity: 0; pointer-events: none; }
  5% { opacity: 1; pointer-events: auto; }
  7% { opacity: 0; pointer-events: none; }
  10% { opacity: 1; pointer-events: auto; }
  11% { opacity: 0; pointer-events: none; }
  14% { opacity: 1; pointer-events: auto; }
  16% { opacity: 0; pointer-events: none; }
  40% { opacity: 1; pointer-events: auto; }
  43% { opacity: 0; pointer-events: none; }
  46% { opacity: 1; pointer-events: auto; }
  47% { opacity: 0; pointer-events: none; }
  70% { opacity: 1; pointer-events: auto; }
  71% { opacity: 0; pointer-events: none; }
  73% { opacity: 1; pointer-events: auto; }
  74% { opacity: 0; pointer-events: none; }
  76% { opacity: 1; pointer-events: auto; }
  78% { opacity: 0; pointer-events: none; }
  80% { opacity: 1; pointer-events: auto; }
  81% { opacity: 0; pointer-events: none; }
}

@keyframes jump-scare-flash {
  0%, 100% {
    opacity: 0.08; 
  }
  50% {
    opacity: 0.9; 
  }
  50.5% {
    opacity: 0.05;
  }
  51% {
    opacity: 1;   
  }
  51.5% {
    opacity: 0.1;
  }
}

@keyframes jump-scare-zoom {
  0%, 100% {
    transform: scale(1) skew(0);
    filter: saturate(.8) contrast(1.2); 
  }
  50% {
    transform: scale(1.1) skew(-2deg);
    filter: invert(1) saturate(1) contrast(3) brightness(1.2); 
  }
  51% {
    transform: scale(0.98) skew(1deg);
    filter: saturate(.8) contrast(1.2); 
  }
  52% {
    transform: scale(1.05) skew(-1deg);
    filter: invert(1) saturate(1) contrast(2.5); 
  }
}

@keyframes linkGlitch {
  0%, 100% {
    transform: translate(0, 0) skew(0);
    opacity: 1;
  }
  20% {
    transform: translate(-3px, 2px) skew(-3deg);
    opacity: 0.8;
  }
  40% {
    transform: translate(2px, -1px) skew(2deg);
  }
  60% {
    transform: translate(-2px, 1px) skew(-1deg);
    opacity: 0.9;
  }
  80% {
    transform: translate(1px, -2px) skew(1deg);
  }
}

/* ==========================================================================
   Root & Global Styles
   ========================================================================== */

:root {
  --bg: #fdfbf5;
  --surface: #fff;
  --text-primary: #5d4037;
  --text-secondary: #795548;
  --text-heading: #3e2723;
  --border-color: #efebe9;
  --accent-primary: linear-gradient(135deg, #e0a773, #d4a373);
  --accent-primary-color: #d4a373;
  --pros-color: #66bb6a;
  --cons-color: #ef5350;
  --font-heading: "Playfair Display", serif;
  --font-body: "Lato", sans-serif;
  --font-mono: "Roboto Mono", monospace;
  --container-width: 820px;
  --border-radius: 12px;
  --shadow-sm: 0 4px 15px rgba(0, 0, 0, .05);
  --shadow-md: 0 8px 25px rgba(0, 0, 0, .08);
}

html {
  scroll-padding-top: 100px;
}

body {
  margin: 0;
  background-color: var(--bg);
  transition: background-color .4s ease;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   Themes (Dark, Horror, Gaming, Focus)
   ========================================================================== */

/* --- Dark Mode --- */
body.dark-mode {
  --bg: #1a1817;
  --surface: #252221;
  --text-primary: #d7ccc8;
  --text-secondary: #bcaaa4;
  --text-heading: #f5f1ef;
  --border-color: #3a3533;
}

/* 全体のベースカラーを強制適用（漏れ防止） */
body.dark-mode .article-content,
body.dark-mode .article-sidebar {
  color: var(--text-primary) !important;
}

body.dark-mode .parallax-title-bg {
  color: var(--text-secondary);
}

body.dark-mode .sim-start-overlay {
  background: rgba(26, 24, 23, .7);
}

body.dark-mode .swiper-button-prev,
body.dark-mode .swiper-button-next {
  background-color: rgba(37, 34, 33, .9);
  color: var(--text-primary); /* 矢印の色も白くする */
}

body.dark-mode .card-category {
  background-color: rgba(0, 0, 0, .6);
  color: #fff !important; /* カテゴリ文字は白固定 */
}

body.dark-mode .article-content p,
body.dark-mode .article-content li,
body.dark-mode .spec-list dd,
body.dark-mode .faq-answer,
body.dark-mode .switch-spec-list dd,
body.dark-mode figcaption,
body.dark-mode .article-content div,  /* 追加: div内の文字 */
body.dark-mode .article-content span, /* 追加: span内の文字 */
body.dark-mode .article-content td,   /* 追加: 表のセル */
body.dark-mode .article-content th,   /* 追加: 表の見出し */
body.dark-mode .article-content i,    /* 追加: アイコン */
body.dark-mode .article-content label { /* 追加: ラベル */
  color: var(--text-primary) !important;
}

/* 見出し系（h5, h6も追加） */
body.dark-mode .spec-list dt,
body.dark-mode .switch-spec-list dt,
body.dark-mode .faq-item summary,
body.dark-mode .article-main-title,
body.dark-mode .article-sub-title,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5, /* 追加 */
body.dark-mode h6, /* 追加 */
body.dark-mode .toc-title,
body.dark-mode .interactive-title,
body.dark-mode .pros-title,
body.dark-mode .cons-title {
  color: var(--text-heading) !important;
}

body.dark-mode .article-content a {
  color: var(--accent-primary-color) !important;
}

/* 表の枠線も見えなくなることがあるので修正 */
body.dark-mode table,
body.dark-mode th,
body.dark-mode td {
  border-color: var(--border-color) !important;
}

body.dark-mode #keyboard-selector .finder-option,
body.dark-mode #keyboard-selector .finder-option b {
  color: var(--bg) !important;
}

body.dark-mode article.cafe-review-theme .button-link.primary-button {
  background: var(--accent-primary-color);
  color: var(--surface, #252221) !important;
  border: none;
}

body.dark-mode article.cafe-review-theme .button-link.primary-button:hover {
  filter: brightness(1.2);
  color: var(--surface, #252221) !important;
}

body.dark-mode article.cafe-review-theme .software-feature-block .manual-slide-controls .slide-to-btn {
  background-color: var(--surface, #252221);
  color: var(--text-secondary, #bcaaa4) !important;
  border-color: var(--border-color, #3a3533);
}

body.dark-mode article.cafe-review-theme .software-feature-block .manual-slide-controls .slide-to-btn:hover {
  background-color: var(--bg, #1a1817);
  border-color: var(--accent-primary-color, #d4a373);
  color: var(--text-heading, #f5f1ef) !important;
}

body.dark-mode article.cafe-review-theme .software-feature-block .manual-slide-controls .slide-to-btn.active {
  background: var(--accent-primary, linear-gradient(135deg, #e0a773, #d4a373));
  color: var(--bg, #1a1817) !important;
  border-color: transparent;
}

body.dark-mode article.cafe-review-theme .software-feature-block .manual-slide-controls .slide-to-btn span {
  color: inherit !important;
}

body.dark-mode article.cafe-review-theme .table-button-link {
  background-color: var(--bg, #1a1817);
  border: 1px solid var(--accent-primary-color, #d4a373);
  color: var(--accent-primary-color, #d4a373) !important;
}

body.dark-mode article.cafe-review-theme .table-button-link:hover {
  background: var(--accent-primary, linear-gradient(135deg, #e0a773, #d4a373));
  color: var(--bg, #1a1817) !important;
  border-color: transparent;
}

body.dark-mode #section-software .software-feature-block {
  background: var(--surface);
  border-color: var(--border-color);
}

/* ==================================================
   ダークモード：キーボードファインダー修正パッチ
   ================================================== */

/* 1. 未選択（押す前）の状態 */
body.dark-mode #keyboard-selector .finder-option {
    color: var(--text-primary) !important; /* 文字を白く */
    border: 1px solid var(--text-secondary) !important; /* 枠線を薄いグレーに */
    background: transparent !important; /* 背景は透明 */
}

/* ボタンの中の太字も白く */
body.dark-mode #keyboard-selector .finder-option b {
    color: var(--text-primary) !important;
}

/* 2. ホバーした時（マウスを乗せた時） */
body.dark-mode #keyboard-selector .finder-option:hover {
    background: rgba(255, 255, 255, 0.1) !important; /* ほんのり白く光らせる */
    border-color: var(--text-primary) !important;
}

/* 3. 選択した（押した）後の状態 */
body.dark-mode #keyboard-selector .finder-option.selected {
    background: var(--accent-primary-color) !important; /* アクセントカラー（オレンジ等） */
    color: var(--bg) !important; /* 文字は黒くして読みやすく */
    border-color: var(--accent-primary-color) !important;
}

/* 選択後の太字は黒く */
body.dark-mode #keyboard-selector .finder-option.selected b {
    color: var(--bg) !important;
}

/* --- Horror Mode --- */
body.horror-theme {
  --bg: #111 !important;
  --surface: #1a1a1a !important;
  --text-primary: #a0a0a0 !important;
  --text-heading: #9f1d1d !important;
  --border-color: #333 !important;
  --accent-primary-color: #c0392b !important;
  background-image: url("https://www.transparenttextures.com/patterns/black-felt.png") !important;
  animation: screen-shake 0.15s linear infinite;
}

.horror-theme .cafe-review-theme {
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif !important;
  text-shadow: 0 0 5px rgba(255, 0, 0, .7) !important;
  animation: text-flicker-anim 3s linear infinite !important;
  background-color: transparent !important;
  filter: saturate(.8) contrast(1.2) !important;
}

.horror-theme a {
  color: var(--accent-primary-color) !important;
}

.horror-theme img {
  filter: grayscale(1) contrast(1.5) brightness(.8) !important;
  transition: filter .5s ease !important;
}

.horror-theme img:hover {
  filter: none !important;
}

.horror-btn.active {
  color: #e74c3c !important;
  animation: button-pulse-anim 1s infinite;
}

body.horror-theme p,
body.horror-theme li,
body.horror-theme dt,
body.horror-theme dd,
body.horror-theme summary,
body.horror-theme figcaption {
  color: var(--text-primary) !important;
  text-shadow: none !important;
}

body.horror-theme h1,
body.horror-theme h2,
body.horror-theme h3,
body.horror-theme h4,
body.horror-theme .toc-title,
body.horror-theme .interactive-title,
body.horror-theme .pros-title,
body.horror-theme .cons-title {
  color: var(--text-heading) !important;
}

body.horror-theme #keyboard-selector .finder-option,
body.horror-theme #keyboard-selector .finder-option b {
  color: var(--bg) !important;
}

body.horror-theme #keyboard-selector .finder-option.selected {
  background: #9f1d1d !important;
  border-color: #c0392b !important;
  color: #fff !important;
  text-shadow: 0 0 5px rgba(255, 255, 255, .5) !important;
}

body.horror-theme #keyboard-selector .finder-option.selected b {
  color: #fff !important;
}

/* --- Gaming Mode --- */
body.gaming-mode {
  background: linear-gradient(125deg, #f00, #ff7f00, #ff0, #0f0, #0ff, #00f, #8b00ff, #f0f, #f00);
  background-size: 400% 400%;
  animation: rainbow-bg-anim 10s ease infinite;
}

body.gaming-mode .cafe-review-theme {
  background-color: var(--bg);
}

body.gaming-mode .article-sub-title,
body.gaming-mode .stylish-quote {
  border-image-source: linear-gradient(45deg, #f00, #ff7f00, #ff0, #0f0, #0ff, #00f, #8b00ff, #f0f, #f00);
  border-image-slice: 1;
  animation: hue-rotate 3s linear infinite;
}

body.gaming-mode .button-link.primary-button,
body.gaming-mode .control-btn.active {
  background-image: linear-gradient(45deg, #f00, #ff7f00, #ff0, #0f0, #0ff, #00f, #8b00ff, #f0f, #f00);
  background-size: 200% 200%;
  animation: rainbow-bg-anim 3s ease infinite, hue-rotate 3s linear infinite;
  color: white !important;
  border: none;
}

body.gaming-mode .interactive-showcase,
body.gaming-mode .spec-chart-section,
body.gaming-mode div.aside-note,
body.gaming-mode .article-slider-wrapper,
body.gaming-mode .article-content figure.article-image.full-width,
body.gaming-mode .performance-card,
body.gaming-mode .related-articles-container,
body.gaming-mode .rt-challenge-container,
body.gaming-mode .switch-spec-card,
body.gaming-mode .ap-rt-simulator,
body.gaming-mode .product-specs,
body.gaming-mode .material-comparator {
  animation: pika-pika-shadow 2s linear infinite;
}

/* ==========================================================================
   Theme: Neo‑Retro Magazine Mode (Final v6)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Shippori+Antique+B1&display=swap');

/* --- 1. Base Settings --- */
body.neo-retro-mode {
    --bg-retro: #F4F1EA;
    --surface-retro: #FFFFFF;
    --ink-black: #111111;
    --accent-vermilion: #E63946;
    
    --bg: #F4F1EA !important;
    --surface: #FFFFFF !important;
    --text-primary: #111111 !important;
    --text-secondary: #333333 !important;
    --text-heading: #111111 !important;
    --border-color: #111111 !important;
    --accent-primary-color: #E63946 !important;

    --font-body: "Shippori Antique B1", "Zen Maru Gothic", sans-serif !important;
    --font-heading: "Shippori Antique B1", "Zen Maru Gothic", sans-serif !important;
    --font-mono: "Courier New", monospace !important;

    font-family: var(--font-body) !important;
    font-weight: 400 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: hidden;
    
    /* Background settings (Overridden by later patches, but kept for fallback safety) */
    background-color: var(--bg) !important;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E") !important;
}

body.neo-retro-mode * { border-radius: 0 !important; }
body.neo-retro-mode :not(i):not(.fa):not(.fas):not(.fab):not(.far) { font-family: var(--font-body) !important; }

/* --- 2. Header & Headings (Base) --- */
body.neo-retro-mode .parallax-header {
    width: 100vw !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    left: 50%;
    position: relative;
    margin-top: 0 !important;
    margin-bottom: 50px !important;
    border-bottom: 2px solid var(--ink-black);
    box-shadow: none !important;
}

body.neo-retro-mode .parallax-content .article-main-title {
    text-shadow: 4px 4px 0 var(--ink-black);
    color: #FFF !important;
    border: none !important;
    background: none !important;
}

body.neo-retro-mode h1, body.neo-retro-mode h2, body.neo-retro-mode h3, 
body.neo-retro-mode h4, body.neo-retro-mode h5, body.neo-retro-mode h6,
body.neo-retro-mode .article-main-title, body.neo-retro-mode .section-title {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
}

body.neo-retro-mode .article-content h2 {
    background: var(--ink-black) !important;
    color: #FFF !important;
    display: block;
    position: relative;
    margin-top: 60px;
    box-shadow: 4px 4px 0 var(--accent-vermilion) !important;
    padding: 15px 30px !important;
    line-height: 1.4;
    margin-bottom: 40px !important;
    border: none !important;
}

body.neo-retro-mode .article-content h3 {
    border-left: 8px solid var(--accent-vermilion) !important;
    border-bottom: 1px solid var(--ink-black) !important;
    padding-left: 15px !important;
    padding-bottom: 10px !important;
    margin-top: 40px;
    color: var(--ink-black) !important;
    background: none !important;
}

/* --- 3. Content Area & Cards (Base) --- */
body.neo-retro-mode .cafe-review-theme {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    max-width: 100% !important;
}

body.neo-retro-mode .article-section,
body.neo-retro-mode .performance-card,
body.neo-retro-mode .software-feature-block,
body.neo-retro-mode .spec-chart-section,
body.neo-retro-mode .parts-showcase-card,
body.neo-retro-mode .verdict-card,
body.neo-retro-mode .recommend-card,
body.neo-retro-mode .mobile-summary-card,
body.neo-retro-mode #section-software .software-feature-block,
body.neo-retro-mode #section-evolution .pros-cons-column,
body.neo-retro-mode .related-articles-container {
    background-color: var(--surface) !important;
    border: 2px solid var(--ink-black) !important;
    box-shadow: 6px 6px 0 var(--ink-black) !important;
    color: var(--ink-black) !important;
    padding: 30px !important;
    margin-bottom: 3rem !important;
}

/* --- 4. Image Frames (Polaroid Style) --- */
body.neo-retro-mode .retro-frame {
    background: var(--surface);
    border: 2px solid var(--ink-black) !important;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.2) !important;
    padding: 10px 10px 30px 10px !important;
    margin: 40px auto !important;
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

body.neo-retro-mode .article-content img,
body.neo-retro-mode .retro-frame img {
    border: none !important;
    filter: grayscale(0.2) contrast(1.1);
    width: 100% !important;
    height: auto !important;
}

body.neo-retro-mode .retro-frame figcaption {
    position: absolute;
    bottom: 5px; left: 10px; right: 10px;
    text-align: left;
    font-family: var(--font-mono) !important;
    font-size: 0.8em;
    color: var(--ink-black);
    border-top: 1px solid var(--ink-black);
    padding-top: 4px;
}

body.neo-retro-mode .retro-frame::before, 
body.neo-retro-mode .retro-frame::after {
    content: "+"; position: absolute; font-weight: 900; font-family: monospace; font-size: 20px; color: var(--accent-vermilion); line-height: 1; z-index: 5; top: 5px;
}
body.neo-retro-mode .retro-frame::before { left: 5px; }
body.neo-retro-mode .retro-frame::after { right: 5px; }

/* --- 5. Aspect Ratio & Galleries --- */
body.neo-retro-mode .article-slider-wrapper,
body.neo-retro-mode .retro-frame,
body.neo-retro-mode .article-slider-wrapper .swiper-slide { 
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
}

body.neo-retro-mode .article-slider-wrapper {
    padding: 0 !important;
    border: 2px solid var(--ink-black) !important;
    background-color: var(--surface) !important;
}

body.neo-retro-mode .article-slider-wrapper img {
    height: auto !important; object-fit: contain !important;
}

body.neo-retro-mode .coverflow-gallery-slider .swiper-slide {
    width: 300px !important;
    height: 300px !important;
    aspect-ratio: 1 / 1 !important;
    min-height: 300px !important;
    border: 2px solid var(--ink-black) !important;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.2) !important;
    opacity: 1 !important;
    filter: grayscale(0.2) contrast(1.1);
}

/* Related Articles Thumbnails (Fixed Size) */
body.neo-retro-mode .card-thumbnail {
    aspect-ratio: 16/9 !important;
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
    border-bottom: 1px solid var(--ink-black);
}

body.neo-retro-mode .card-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    min-height: 100% !important;
}

body.neo-retro-mode .related-article-card {
    border: 1px solid var(--ink-black) !important;
    background: var(--surface) !important;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.1) !important;
}

/* --- 6. Colors Overrides --- */
body.neo-retro-mode #section-evolution .pros-title,
body.neo-retro-mode #section-evolution .cons-title {
    background-color: transparent !important;
    color: var(--ink-black) !important;
    border-bottom: 2px solid var(--ink-black) !important;
    padding: 0 0 10px 0 !important;
    margin-bottom: 15px !important;
    font-family: var(--font-heading) !important;
}

body.neo-retro-mode .software-feature-block h3,
body.neo-retro-mode .software-feature-block h4,
body.neo-retro-mode .parts-showcase-card h3,
body.neo-retro-mode .parts-showcase-card h4 {
    color: var(--ink-black) !important;
    border-left: 5px solid var(--accent-vermilion) !important;
    border-bottom: 1px solid var(--ink-black) !important;
    background: none !important;
    padding-left: 15px !important;
}

body.neo-retro-mode .mobile-summary-card {
    border-left: 5px solid var(--accent-vermilion) !important;
    background-color: var(--surface) !important;
}

body.neo-retro-mode .slide-to-btn {
    background: var(--surface) !important;
    border: 1px solid var(--ink-black) !important;
    color: var(--ink-black) !important;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.1) !important;
}

body.neo-retro-mode .slide-to-btn.active {
    background: var(--accent-vermilion) !important;
    color: #FFF !important;
    box-shadow: 2px 2px 0 var(--ink-black) !important;
}

/* --- 7. Mobile Adjustments (Base) --- */
@media (max-width: 768px) {
    body.neo-retro-mode .article-section,
    body.neo-retro-mode .performance-card,
    body.neo-retro-mode .software-feature-block,
    body.neo-retro-mode .spec-chart-section,
    body.neo-retro-mode .parts-showcase-card,
    body.neo-retro-mode .verdict-card,
    body.neo-retro-mode .mobile-summary-card,
    body.neo-retro-mode #section-evolution .pros-cons-column,
    body.neo-retro-mode .related-articles-container {
        padding: 20px !important;
        box-shadow: 4px 4px 0 var(--ink-black) !important;
    }

    body.neo-retro-mode .retro-frame {
        padding: 0 0 30px 0 !important; 
        margin: 30px auto !important;
    }
    
    body.neo-retro-mode .retro-frame img {
        border-bottom: 2px solid var(--ink-black) !important;
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
    }

    body.neo-retro-mode .retro-frame figcaption {
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 30px;
        padding: 0 10px;
        display: flex;
        align-items: center;
        border-top: none !important;
        font-size: 0.75em !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.neo-retro-mode .retro-frame::before, 
    body.neo-retro-mode .retro-frame::after {
        font-size: 14px !important;
        top: 4px !important;
        color: rgba(255, 255, 255, 0.9) !important;
        text-shadow: 1px 1px 0 #000;
    }
    body.neo-retro-mode .retro-frame::before { left: 4px !important; }
    body.neo-retro-mode .retro-frame::after { right: 4px !important; }
    
    body.neo-retro-mode .article-slider-wrapper {
        padding: 0 !important;
        width: 100% !important;
        margin-bottom: 2rem !important;
    }
    body.neo-retro-mode .article-slider-wrapper img,
    body.neo-retro-mode .article-slider-wrapper .swiper-slide img {
        width: 100% !important; border: none !important; display: block !important;
    }
}

/* --- 8. UI Elements (Links, Buttons, Tables) --- */
body.neo-retro-mode .retro-hr {
    height: 20px;
    background: repeating-linear-gradient(90deg, var(--ink-black), var(--ink-black) 2px, transparent 2px, transparent 10px);
    margin: 60px 0;
    border: none; opacity: 0.5;
}

body.neo-retro-mode a {
    color: var(--ink-black) !important;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--accent-vermilion);
}

body.neo-retro-mode .button-link.primary-button, body.neo-retro-mode .control-btn {
    background: var(--accent-vermilion) !important;
    color: #FFF !important;
    border: 2px solid var(--ink-black) !important;
    box-shadow: 4px 4px 0 var(--ink-black) !important;
}

body.neo-retro-mode .article-sidebar .table-of-contents {
    border: 4px double var(--ink-black) !important;
    background: var(--surface) !important;
    box-shadow: 6px 6px 0 var(--ink-black) !important;
}

body.neo-retro-mode table { border: 2px solid var(--ink-black) !important; }
body.neo-retro-mode th { background: var(--ink-black) !important; color: #FFF !important; border: 1px solid var(--ink-black); }
body.neo-retro-mode td { border: 1px solid var(--ink-black); color: var(--ink-black) !important; }

/* --- 9. Typography Patches --- */
body.neo-retro-mode .article-sub-title, body.neo-retro-mode .article-sub-title-small, body.neo-retro-mode .software-feature-block h3, body.neo-retro-mode .software-feature-block h4, body.neo-retro-mode .parts-showcase-card h3, body.neo-retro-mode .parts-showcase-card h4, body.neo-retro-mode .verdict-card h3, body.neo-retro-mode .verdict-card h4, body.neo-retro-mode .section-title, body.neo-retro-mode #section-software h3, body.neo-retro-mode #section-software h4 {
    font-family: var(--font-heading) !important; color: var(--ink-black) !important;
    border-image: none !important; border-left: 5px solid var(--accent-vermilion) !important; border-bottom: 1px solid var(--ink-black) !important; background: transparent !important; padding-left: 15px !important;
}

body.neo-retro-mode ol li::marker { font-family: var(--font-mono) !important; color: var(--accent-vermilion) !important; font-weight: 900; }
body.neo-retro-mode strong, body.neo-retro-mode b { color: var(--ink-black) !important; background: linear-gradient(transparent 60%, rgba(230, 57, 70, 0.2) 60%) !important; }


/* ==================================================
   Patch: Related Products & Mobile Fix
   ================================================== */

/* Related Posts Container */
body.neo-retro-mode .sidebar-related-posts {
    background-color: #FFFFFF !important;
    border: 2px solid #111111 !important;
    box-shadow: 6px 6px 0 #111111 !important;
    padding: 30px !important;
    margin-bottom: 3rem !important;
}

/* Related Posts Cards */
body.neo-retro-mode .sidebar-related-posts .card {
    background-color: #F4F1EA !important;
    border: 1px solid #111111 !important;
    border-radius: 0 !important;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.1) !important;
}

/* Related Posts Images */
body.neo-retro-mode .sidebar-related-posts img {
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    width: 100% !important;
    height: auto !important;
    border-bottom: 1px solid #111111 !important;
}

/* Mobile Image Full Width Fix */
@media (max-width: 768px) {
    body.neo-retro-mode .retro-frame {
        padding: 0 0 30px 0 !important;
        width: 100% !important;
        margin: 30px auto !important;
    }

    body.neo-retro-mode .retro-frame img {
        width: 100% !important;
        display: block !important;
        border-bottom: 2px solid #111111 !important;
    }

    body.neo-retro-mode .retro-frame figcaption {
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        padding: 0 10px !important;
        height: 30px !important;
        display: flex !important;
        align-items: center !important;
        border-top: none !important;
    }
    
    body.neo-retro-mode .article-slider-wrapper {
        padding: 0 !important;
        border: 2px solid #111111 !important;
    }
}


/* ==================================================
   Patch: Interaction & Buttons
   ================================================== */

/* Software Slide Buttons */
body.neo-retro-mode article.cafe-review-theme .software-feature-block .manual-slide-controls .slide-to-btn {
    background-color: #FFFFFF !important;
    color: #111111 !important;
    border: 2px solid #111111 !important;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.1) !important;
    background-image: none !important;
    transition: all 0.1s !important;
}

body.neo-retro-mode article.cafe-review-theme .software-feature-block .manual-slide-controls .slide-to-btn:hover {
    background-color: #111111 !important;
    color: #FFFFFF !important;
    border-color: #111111 !important;
    transform: translate(2px, 2px) !important;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.1) !important;
}

body.neo-retro-mode article.cafe-review-theme .software-feature-block .manual-slide-controls .slide-to-btn.active {
    background-color: #E63946 !important;
    color: #FFFFFF !important;
    border: 2px solid #111111 !important;
    box-shadow: 2px 2px 0 #111111 !important;
    background-image: none !important;
    transform: translate(2px, 2px) !important;
}

/* Primary Buttons Override */
body.neo-retro-mode article.cafe-review-theme .button-link.primary-button,
body.neo-retro-mode article.cafe-review-theme .table-button-link {
    background-image: none !important;
    background-color: #E63946 !important;
    color: #FFFFFF !important;
    border: 2px solid #111111 !important;
    box-shadow: 4px 4px 0 #111111 !important;
}

body.neo-retro-mode article.cafe-review-theme .button-link.primary-button:hover,
body.neo-retro-mode article.cafe-review-theme .table-button-link:hover {
    background-color: #111111 !important;
    color: #FFFFFF !important;
    transform: translate(2px, 2px) !important;
    box-shadow: 2px 2px 0 #111111 !important;
}


/* ==================================================
   Patch: Selection Conflict Fix (Strong)
   ================================================== */

/* Finder Options (Normal) */
html body.neo-retro-mode #keyboard-selector .finder-option {
    background: #FFFFFF !important;
    background-image: none !important;
    color: #111111 !important;
    border: 2px solid #111111 !important;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.1) !important;
    transition: none !important;
}

/* Finder Options (Hover) */
html body.neo-retro-mode #keyboard-selector .finder-option:hover {
    background: #111111 !important;
    color: #FFFFFF !important;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.1) !important;
    transform: translate(2px, 2px) !important;
}

/* Finder Options (Selected) */
html body.neo-retro-mode #keyboard-selector .finder-option.selected {
    background: #E63946 !important;
    background-image: none !important;
    color: #FFFFFF !important;
    border-color: #111111 !important;
    box-shadow: 2px 2px 0 #111111 !important;
    transform: translate(2px, 2px) !important;
}

html body.neo-retro-mode #keyboard-selector .finder-option.selected b,
html body.neo-retro-mode #keyboard-selector .finder-option.selected strong {
    color: #FFFFFF !important;
}

/* Hover Marker Removal */
html body.neo-retro-mode #keyboard-selector .finder-option:hover b,
html body.neo-retro-mode #keyboard-selector .finder-option:hover strong {
    background: none !important;
    background-image: none !important;
    color: #FFFFFF !important;
}

html body.neo-retro-mode #keyboard-selector .finder-option.selected b,
html body.neo-retro-mode #keyboard-selector .finder-option.selected strong {
    background: none !important;
    background-image: none !important;
    color: #FFFFFF !important;
}


/* ==================================================
   Patch: Related Cards Complete Fix
   ================================================== */

body.neo-retro-mode .sidebar-related-posts .related-article-card,
body.neo-retro-mode .sidebar-related-posts .card {
    background-color: #FFFFFF !important;
    border: 2px solid #111111 !important;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.1) !important;
    border-radius: 0 !important;
}

body.neo-retro-mode .sidebar-related-posts .related-article-card:hover,
body.neo-retro-mode .sidebar-related-posts .card:hover {
    box-shadow: 6px 6px 0 #111111 !important;
    transform: translate(-2px, -2px) !important;
}

body.neo-retro-mode .sidebar-related-posts .card-title {
    color: #111111 !important;
    font-family: var(--font-heading) !important;
}

body.neo-retro-mode .sidebar-related-posts .card-date {
    color: #333333 !important;
}

body.neo-retro-mode .sidebar-related-posts .card-thumbnail {
    border-bottom: 2px solid #111111 !important;
}

/* ==================================================
   Patch: Header, Meta & Borders
   ================================================== */

/* Parallax Header */
body.neo-retro-mode .parallax-header {
    background-color: #F4F1EA !important;
    border-bottom: 3px solid #111111 !important;
}

body.neo-retro-mode .parallax-title-bg {
    color: rgba(17, 17, 17, 0.05) !important;
    font-family: var(--font-heading) !important;
    z-index: 0;
}

body.neo-retro-mode .article-header .article-main-title {
    color: #111111 !important;
    text-shadow: 3px 3px 0 #FFFFFF, 5px 5px 0 rgba(0,0,0,0.1) !important;
    -webkit-text-stroke: 1px #111111;
}

/* Article Meta */
body.neo-retro-mode .article-meta {
    color: #333333 !important;
    font-family: var(--font-mono) !important;
    background: #FFFFFF;
    border: 2px solid #111111;
    display: inline-block;
    padding: 5px 15px;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.1);
}

body.neo-retro-mode .article-meta i {
    color: #E63946 !important;
}

body.neo-retro-mode .article-meta a {
    color: #111111 !important;
}

/* Layout Containers Transparency */
body.neo-retro-mode .article-layout,
body.neo-retro-mode main.article-content,
body.neo-retro-mode .container-wrapper {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body.neo-retro-mode .article-layout {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

body.neo-retro-mode hr {
    background: transparent !important;
    border: none !important;
    border-top: 2px dashed #111111 !important;
    opacity: 1 !important;
    margin: 40px 0 !important;
}


/* ==================================================
   Base Typography (Global Scope)
   ================================================== */

p {
  line-height: 1.8;
  margin-bottom: 1.5em;
  transition: opacity .5s ease, color .4s ease;
}

hr.stylish-hr {
  height: 1px;
  border: 0;
  margin: 80px 0;
  background-color: var(--border-color);
  width: 100%;
}

hr.stylish-hr.animated {
  transform: scaleX(0);
  transition: transform 1.5s cubic-bezier(.25, 1, .5, 1);
}

hr.stylish-hr.animated.is-visible {
  transform: scaleX(1);
}


/* ==================================================
   Patch: Header & Navigation Final
   ================================================== */

/* Site Navigation */
body.neo-retro-mode header,
body.neo-retro-mode .site-header,
body.neo-retro-mode .header-wrapper,
body.neo-retro-mode .sticky-header {
    background-color: #FFFFFF !important;
    border-bottom: 3px solid #111111 !important;
    box-shadow: 0 4px 0 rgba(0,0,0,0.1) !important;
}

body.neo-retro-mode header a,
body.neo-retro-mode .site-header a,
body.neo-retro-mode .header-wrapper a,
body.neo-retro-mode header .icon,
body.neo-retro-mode .site-header .icon {
    color: #111111 !important;
    text-decoration: none !important;
}

/* Parallax Header Area */
body.neo-retro-mode .parallax-header {
    background-color: #F4F1EA !important;
    border-bottom: 3px solid #111111 !important;
    margin-top: 0 !important;
    height: auto !important;
    padding: 80px 0 !important;
}

body.neo-retro-mode .parallax-bg {
    display: none !important; 
    background-image: none !important;
}

body.neo-retro-mode .parallax-header::after {
    display: none !important;
}

/* Header Title Large */
body.neo-retro-mode .parallax-content .article-main-title {
    color: #111111 !important;
    text-shadow: 4px 4px 0 #FFFFFF, 6px 6px 0 rgba(0,0,0,0.1) !important;
    border-bottom: none !important;
    font-size: 3rem !important;
    padding-bottom: 20px !important;
}

body.neo-retro-mode .parallax-title-bg {
    color: rgba(0,0,0,0.05) !important;
    z-index: 0 !important;
}

/* Meta Box Refinement */
body.neo-retro-mode .article-meta {
    background-color: #FFFFFF !important;
    border: 2px solid #111111 !important;
    box-shadow: 6px 6px 0 #111111 !important;
    color: #111111 !important;
    border-radius: 0 !important;
    padding: 10px 20px !important;
}

body.neo-retro-mode .article-meta span,
body.neo-retro-mode .article-meta time,
body.neo-retro-mode .article-meta a {
    color: #111111 !important;
    text-shadow: none !important;
    font-weight: 700 !important;
    background: none !important;
}

body.neo-retro-mode .article-meta i {
    color: #E63946 !important;
    margin-right: 5px !important;
}

body.neo-retro-mode .parallax-content .article-lead {
    color: #111111 !important;
    text-shadow: none !important;
    font-weight: 500 !important;
    background: transparent !important;
    margin-top: 30px !important;
}


/* ==================================================
   Patch: Background & Giant Text
   ================================================== */

body.neo-retro-mode {
    background-color: #FFFFFF !important;
    background-image: radial-gradient(#cccccc 1px, transparent 1px) !important;
    background-size: 20px 20px !important;
}

body.neo-retro-mode .parallax-header {
    background-color: transparent !important;
}

body.neo-retro-mode .parallax-title-bg {
    display: block !important;
    opacity: 1 !important;
    z-index: 0 !important;
    color: transparent !important;
    -webkit-text-stroke: 2px rgba(0, 0, 0, 0.15) !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

body.neo-retro-mode .article-content {
    position: relative;
    z-index: 2;
}


/* ==================================================
   Patch: Content Transparency
   ================================================== */

/* Layout Transparency */
body.neo-retro-mode .article-layout,
body.neo-retro-mode .article-content,
body.neo-retro-mode main,
body.neo-retro-mode .container-wrapper {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Elements to keep White */
body.neo-retro-mode .article-section,
body.neo-retro-mode .performance-card,
body.neo-retro-mode .software-feature-block,
body.neo-retro-mode .spec-chart-section,
body.neo-retro-mode .parts-showcase-card,
body.neo-retro-mode .verdict-card,
body.neo-retro-mode .recommend-card,
body.neo-retro-mode .mobile-summary-card,
body.neo-retro-mode .related-articles-container,
body.neo-retro-mode .article-sidebar .table-of-contents,
body.neo-retro-mode .product-specs,
body.neo-retro-mode .material-comparator {
    background-color: #FFFFFF !important;
}


/* ==================================================
   Patch: Header Transparency (Final)
   ================================================== */

html body.neo-retro-mode .parallax-content,
html body.neo-retro-mode .article-header {
    background-color: transparent !important;
    background: none !important;
    box-shadow: none !important;
    border: none !important;
}

html body.neo-retro-mode .parallax-content .article-main-title {
    background-color: transparent !important;
    background: none !important;
    border: none !important;
    border-bottom: 3px solid #111111 !important; 
    padding-bottom: 20px !important;
    display: inline-block;
    width: auto !important;
    min-width: 50%;
}

html body.neo-retro-mode .article-meta {
    background-color: #FFFFFF !important;
    z-index: 2;
    position: relative;
}


/* ==================================================
   Patch: UI Refinement (Arrows, Charts, Accordion)
   ================================================== */

/* 1. Title Number Color */
body.neo-retro-mode .article-main-title span {
    color: #E63946 !important;
    -webkit-text-stroke: 0px !important;
    font-weight: 900 !important;
    font-style: normal !important;
    margin-right: 10px;
}

/* 2. Accordion Fix */
body.neo-retro-mode .content-accordion > summary {
    padding-left: 60px !important;
    color: #111111 !important;
}

body.neo-retro-mode .content-accordion > summary::before {
    left: 20px !important;
    background-color: #E63946 !important;
}

body.neo-retro-mode .content-accordion > summary::after {
    left: 26px !important;
    background-color: #E63946 !important;
}

/* 3. Chart Variables (Base fix) */
body.neo-retro-mode {
    --accent-primary-color: #E63946 !important;
    --surface: #FFFFFF !important;
}

body.neo-retro-mode .spec-chart-section {
    background-color: #FFFFFF !important;
    border: 2px solid #111111 !important;
    box-shadow: 6px 6px 0 #111111 !important;
}

/* 4. Swiper Arrow Re‑Design (Comic Style) */
body.neo-retro-mode .swiper-button-prev,
body.neo-retro-mode .swiper-button-next {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    opacity: 1 !important;
}

body.neo-retro-mode .swiper-button-prev::after,
body.neo-retro-mode .swiper-button-next::after {
    color: #E63946 !important;
    font-size: 3.5rem !important;
    font-weight: 900 !important;
    text-shadow: 
        2px  2px 0 #111111,
       -2px -2px 0 #111111,
        2px -2px 0 #111111,
       -2px  2px 0 #111111,
        5px  5px 0 rgba(0,0,0,0.2) !important;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

body.neo-retro-mode .swiper-button-prev:hover::after,
body.neo-retro-mode .swiper-button-next:hover::after {
    transform: scale(1.2) rotate(-5deg) !important;
    color: #FF5A67 !important;
}

body.neo-retro-mode .swiper-button-prev { left: 20px !important; }
body.neo-retro-mode .swiper-button-next { right: 20px !important; }

/* 5. Chart Background Force Fix */
body.neo-retro-mode #radar-chart,
body.neo-retro-mode canvas {
    background-color: #FFFFFF !important;
    border-radius: 50% !important;
}

body.neo-retro-mode .spec-chart-container {
    background-color: #FFFFFF !important;
}


/* ==================================================
   Patch: Gallery & Details
   ================================================== */

body.neo-retro-mode #gallery-build-details,
body.neo-retro-mode .switch-spec-card {
    background-color: #FFFFFF !important;
    border: 2px solid #111111 !important;
    box-shadow: 6px 6px 0 #111111 !important;
    border-radius: 0 !important;
}

body.neo-retro-mode .switch-header {
    background-color: #FFFFFF !important;
    border-bottom: 2px solid #111111 !important;
}

body.neo-retro-mode .switch-header .switch-icon {
    color: #E63946 !important;
}

body.neo-retro-mode .switch-name h3,
body.neo-retro-mode .switch-name p,
body.neo-retro-mode .switch-name a {
    color: #111111 !important;
}

body.neo-retro-mode .switch-spec-list dt,
body.neo-retro-mode .switch-spec-list dd {
    border-bottom: 1px solid #111111 !important;
    color: #111111 !important;
}


/* ==================================================
   Patch: Finder Notes & Alerts
   ================================================== */

/* Alert Messages */
body.neo-retro-mode #keyboard-selector .alert-message,
body.neo-retro-mode .alert-message {
    background-color: #FFFFFF !important;
    border: 2px solid #111111 !important;
    border-radius: 0 !important;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.1) !important;
    color: #E63946 !important;
    font-weight: bold !important;
}

body.neo-retro-mode .alert-message i,
body.neo-retro-mode .alert-message svg {
    color: #E63946 !important;
}

/* Finder Notes */
body.neo-retro-mode #keyboard-selector .finder-note,
body.neo-retro-mode .keyboard-finder-page #keyboard-finder .finder-note {
    background-color: #FFFFFF !important;
    border: 2px solid #111111 !important;
    color: #E63946 !important;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.1) !important;
    border-radius: 0 !important;
}

body.neo-retro-mode #keyboard-selector .finder-note i {
    color: #E63946 !important;
}


/* ==================================================
   Patch: Ranking Table & Sort Buttons (Final Force)
   ================================================== */

/* Sort Buttons */
html body.neo-retro-mode .sort-btn {
    background: #FFFFFF !important;
    color: #111111 !important;
    border: 2px solid #111111 !important;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.1) !important;
    transition: none !important;
}

html body.neo-retro-mode .sort-btn:hover {
    background: #111111 !important;
    color: #FFFFFF !important;
    transform: translate(-2px, -2px) !important;
    box-shadow: 6px 6px 0 #111111 !important;
}

html body.neo-retro-mode .sort-btn.active {
    background: #E63946 !important;
    background-image: none !important;
    color: #FFFFFF !important;
    border-color: #111111 !important;
    box-shadow: 2px 2px 0 #111111 !important;
    transform: translate(0, 0) !important;
}

/* Ranking Table */
html body.neo-retro-mode section#keyboard-ranking-main table.stylish-table {
    background-color: #FFFFFF !important;
    border: 2px solid #111111 !important;
}

html body.neo-retro-mode section#keyboard-ranking-main table.stylish-table th {
    background-color: #111111 !important;
    color: #FFFFFF !important;
    border-bottom: 2px solid #FFFFFF !important;
}

html body.neo-retro-mode section#keyboard-ranking-main table.stylish-table td {
    background-color: #FFFFFF !important;
    color: #111111 !important;
    border-color: #111111 !important;
}

/* ========================================================================== */
/*  Organized CSS – Part 2                                                   */
/*                                                                           */
/*  This file continues the restructuring of the original stylesheet.  It     */
/*  covers the main layout, container definitions, parallax header, article   */
/*  content styling, tables, buttons, cards, and interactive components up    */
/*  to (but not including) the consolidated media queries section.  The       */
/*  sequence of declarations matches the source to preserve cascade order.    */
/*  Include this file after organized_part1.css when assembling the full      */
/*  stylesheet.                                                              */
/* ========================================================================== */

/* ==========================================================================
   Main Layout & Containers
   ========================================================================== */

.cafe-review-theme {
  font-family: var(--font-body);
  color: var(--text-primary);
  background-color: var(--bg);
  position: relative;
  z-index: 1;
}

.container-wrapper {
  max-width: 820px;
  margin: 0 auto;
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 40px;
  max-width: calc(820px + 280px + 40px);
  margin: 40px auto 0 auto;
  padding: 0 20px;
}

.article-content {
  min-width: 0;
}

.article-section {
  margin-bottom: 80px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s ease-out, transform .8s ease-out;
}

.article-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   Parallax Header
   ========================================================================== */

.parallax-header {
  position: relative;
  height: 60vh;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 80px;
}

.parallax-header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .4);
}

.parallax-bg,
.parallax-title-bg,
.parallax-content {
  will-change: transform;
}

.parallax-bg {
  position: absolute;
  top: -50%;
  left: 0;
  width: 100%;
  height: 200%;
  background: url("https://images.unsplash.com/photo-1511920183276-542a93173458?q=80&w=1887&auto=format&fit=crop") no-repeat center center/cover;
  z-index: -1;
}

.parallax-title-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(80px, 20vw, 300px);
  font-weight: 900;
  color: var(--text-heading);
  opacity: .05;
  font-family: var(--font-heading);
  white-space: nowrap;
  user-select: none;
  z-index: 0;
}

.article-header.parallax-content {
  position: relative;
  z-index: 2;
  color: #fff;
  padding: 20px;
  max-width: var(--container-width);
  text-align: center;
}

/* ==========================================================================
   Article Header & Meta
   ========================================================================== */

.article-main-title {
  font-family: var(--font-heading);
  font-size: 2.8em;
  color: var(--text-heading);
  margin: 1.5em 0 1em 0;
  padding-bottom: .3em;
  border-bottom: 2px solid var(--border-color);
  text-align: center;
}

.article-main-title span {
  color: var(--accent-primary-color);
  font-style: italic;
}

.article-sub-title {
  font-family: var(--font-heading);
  font-size: 1.8em;
  color: var(--text-heading);
  margin: 2em 0 1.2em 0;
  padding-left: 15px;
  border-left: 4px solid;
  border-image-slice: 1;
  border-image-source: var(--accent-primary);
}

.article-sub-title-small {
  font-family: var(--font-heading);
  font-size: 1.5em;
  color: var(--text-heading);
  margin: 2em 0 1em 0;
}

.section-title {
  text-align: center;
  font-family: var(--font-heading);
  font-size: 2em;
  margin: 2em 0 1.5em 0;
  color: var(--text-heading);
  margin-top: 0;
}

.article-lead {
  font-size: 1.15em;
  color: var(--text-secondary);
  max-width: 90%;
  margin: 0 auto;
  font-weight: 300;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 24px;
  margin-bottom: 25px;
  font-family: var(--font-mono);
  font-size: .9em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
}

.article-meta > span,
.article-meta > time {
  display: inline-flex;
  align-items: center;
  background-color: rgba(253, 251, 245, .1);
  padding: 6px 14px;
  border-radius: 50px;
}

.article-meta i {
  margin-right: 10px;
  font-size: 1.1em;
  color: var(--accent-primary-color);
}

.article-category {
  background-color: rgba(212, 163, 115, .1);
  color: var(--accent-primary-color);
  padding: 4px 12px;
  border-radius: 50px;
  font-weight: 700;
}

/* --- Parallax Header Content --- */
.parallax-content .article-main-title {
  font-size: clamp(2rem, 8vw, 3.5rem);
  line-height: 1.2;
  padding-bottom: .4em;
  border-bottom: 1px solid rgba(255, 255, 255, .5);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, .7), 0 0 20px rgba(255, 255, 255, .3), 0 0 45px rgba(212, 163, 115, .2);
}

.parallax-content .article-main-title span {
  color: #eadbc8;
}

.parallax-content .article-lead {
  display: block;
  background-color: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
  backdrop-filter: none;
  font-size: clamp(1rem, 3.5vw, 1.15rem);
  color: #fff;
  max-width: 90%;
  margin: 25px auto 0 auto;
  text-shadow: 0px 2px 5px rgba(0, 0, 0, .7);
}

.parallax-content .article-meta {
  color: rgba(255, 255, 255, .95);
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .8);
}

.parallax-content .article-meta i {
  text-shadow: none;
}

.parallax-content .article-meta span {
  color: #fff;
}

.parallax-content .article-meta a {
  color: rgba(255, 255, 255, .95);
  text-decoration: none;
  transition: color .2s ease;
}

.parallax-content .article-meta a:hover {
  filter: brightness(1.35);
  text-decoration: underline;
}

.parallax-content .article-meta .article-category {
  font-weight: normal;
  background-color: rgba(253, 251, 245, .1);
}

.parallax-content .article-meta .author {
  text-transform: none;
}

.article-content a {
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-color: var(--border-color);
  transition: color .2s ease;
}

.article-content a:hover {
  color: var(--accent-primary-color);
}

.article-content p {
  transition: opacity .4s ease-in-out;
}

/* --- Images --- */
figure.article-image {
  margin: 30px 0;
}

figure.article-image img {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-md);
}

figure.article-image figcaption {
  font-size: .9em;
  text-align: center;
  color: var(--text-secondary);
  padding-top: 15px;
}

figure.article-image.full-width {
  width: 100%;
  max-width: 100%; 
  margin: 40px auto;
  padding: 15px;
  background-color: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  cursor: zoom-in;
  transition: all .3s ease;
}

figure.article-image.full-width:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

figure.article-image.full-width img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: none; 
}

figure.article-image.full-width figcaption {
  padding: 15px 5px 0 5px;
}

/* --- Quotes --- */
.stylish-quote {
  font-size: 1.2em;
  color: var(--text-secondary);
  padding: 30px 35px 30px 45px;
  margin: 40px 0;
  border-left: 5px solid;
  border-image-slice: 1;
  border-image-source: var(--accent-primary);
  background-color: var(--surface);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  position: relative;
  box-shadow: var(--shadow-sm);
  overflow: hidden; 
}

.stylish-quote::before {
  content: "“";
  font-family: var(--font-heading);
  font-size: 5em;
  color: var(--accent-primary-color);
  position: absolute;
  left: 15px;
  top: 0px;
  opacity: .15;
  line-height: 1;
  z-index: 0;
}

.stylish-quote p {
  position: relative;
  z-index: 1;
  margin: 0;
}

/* --- Lists --- */
.styled-list {
  list-style: none;
  padding: 0;
}

.styled-list li {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px dotted var(--border-color);
}

.styled-list li:last-child {
  border-bottom: none;
}

.styled-list li i {
  margin-right: 12px;
}

/* --- Aside Note Box --- */
div.aside-note {
  background-color: var(--surface);
  border: 1px solid var(--border-color);
  padding: 40px;
  margin-top: 60px;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.aside-note-title {
  font-family: var(--font-heading);
  margin: 0 0 15px 0;
  font-size: 1.6em;
}

.aside-note p {
  margin: 0 auto 25px auto;
  color: var(--text-secondary);
  max-width: 600px;
  line-height: 1.8;
}

.aside-note-icon {
  font-size: 2.2em;
  color: var(--accent-primary-color);
  margin-bottom: 20px;
  opacity: .8;
}

.article-sidebar .sidebar-sticky-content {
  position: sticky;
  top: 100px;
  background-color: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
  border-radius: 0;
}

.article-sidebar .table-of-contents {
  background-color: transparent;
  border: none;
  box-shadow: none;
  padding: 10px;
  margin: 0;
}

.article-sidebar .toc-title {
  font-size: 1.2em;
  color: var(--text-heading);
  margin: 0 0 15px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border-color);
}

.article-sidebar .toc-title i {
  margin-right: 12px;
  color: var(--accent-primary-color);
}

.article-sidebar .table-of-contents ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.article-sidebar .table-of-contents li {
  padding: 6px 0;
}

.article-sidebar .table-of-contents a {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 400;
  font-size: .9em;
  padding-left: 10px;
  border-left: 2px solid transparent;
  display: inline-block;
  transition: all .3s ease;
}

.article-sidebar .table-of-contents a:hover {
  color: var(--text-primary);
  border-left-color: var(--border-color);
  transform: translateX(5px);
}

.article-sidebar .table-of-contents a.active {
  color: var(--accent-primary-color);
  font-weight: 700;
  border-left-color: var(--accent-primary-color);
  transform: translateX(5px);
}

article:has(#keyboard-selector) .article-sidebar .table-of-contents {
  display: none;
}

.table-responsive-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-bottom: 1.5rem;
  width: 100%;
}

.stylish-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0;
}

.stylish-table th,
.stylish-table td {
  padding: 12px 15px;
  border: 1px solid var(--border-color);
  text-align: left;
  vertical-align: middle;
}

.stylish-table th {
  background-color: var(--surface);
  font-weight: bold;
  position: sticky;
  top: 0;
  z-index: 1;
}

.stylish-table tbody tr:hover {
  background-color: var(--bg);
}

/* --- Table Cell Variants --- */
.status-unavailable {
  color: var(--text-secondary);
  font-size: .9em;
  font-style: italic;
}

.td-link-cell {
  text-align: center;
  min-width: 120px;
}

/* --- Table Button --- */
.table-button-link {
  display: inline-block;
  padding: 8px 16px;
  font-family: var(--font-body);
  font-weight: bold;
  font-size: .9em;
  text-decoration: none;
  text-align: center;
  white-space: nowrap; 
  border-radius: 8px;
  transition: all .2s ease;
  background-color: var(--bg);
  border: 1px solid var(--accent-primary-color) !important;
  color: var(--accent-primary-color);
}

.table-button-link:hover {
  background: var(--accent-primary);
  color: #fff !important;
  border-color: transparent;
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}


section#keyboard-ranking-main table.stylish-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 25px;
  background-color: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

section#keyboard-ranking-main table.stylish-table th {
  background-color: var(--bg);
  color: var(--text-heading);
  font-family: var(--font-body);
  font-weight: 700;
  text-align: left;
  padding: 16px 24px;
  border-bottom: 2px solid var(--border-color);
}

section#keyboard-ranking-main table.stylish-table td {
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
  color: var(--text-primary);
  vertical-align: middle;
}

section#keyboard-ranking-main table.stylish-table td a {
  color: var(--text-primary);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--border-color);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: all .2s ease;
}

section#keyboard-ranking-main table.stylish-table td a:hover {
  color: var(--accent-primary-color);
  text-decoration-color: var(--accent-primary-color);
}

.product-specs {
  margin: 2em 0;
  padding: 30px;
  background-color: var(--surface);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
}

.spec-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0 15px;
}

.spec-list dt {
  font-weight: 700;
  color: var(--text-secondary);
  padding: 12px 0;
  border-bottom: 1px dashed var(--border-color);
}

.spec-list dd {
  margin-left: 0;
  padding: 12px 0;
  border-bottom: 1px dashed var(--border-color);
}

.spec-list dt:last-of-type,
.spec-list dd:last-of-type {
  border-bottom: none;
}

.switch-spec-card {
  background-color: var(--surface);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  margin: 2em 0;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.switch-header {
  display: flex;
  align-items: center;
  padding: 20px;
  background-color: var(--bg);
  border-bottom: 1px solid var(--border-color);
}

.switch-icon {
  font-size: 2em;
  color: var(--accent-primary-color);
  margin-right: 20px;
}

.switch-name h3 {
  font-family: var(--font-heading);
  font-size: 1.5em;
  margin: 0;
  color: var(--text-heading);
}

.switch-name p {
  margin: 0;
  color: var(--text-secondary);
}

.switch-spec-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0 20px;
  padding: 20px;
  margin: 0;
}

.switch-spec-list dt {
  font-weight: 700;
  color: var(--text-secondary);
  padding: 10px 0;
  border-bottom: 1px dotted var(--border-color);
}

.switch-spec-list dd {
  margin-left: 0;
  padding: 10px 0;
  border-bottom: 1px dotted var(--border-color);
}

.switch-spec-list dt:last-of-type,
.switch-spec-list dd:last-of-type {
  border-bottom: none;
}

.package-contents-list {
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  margin: 2rem 0;
}

.package-contents-list > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  padding: 1rem 0;
  border-bottom: 1px solid #e0e0e0;
}

.package-contents-list > div:last-child {
  border-bottom: none;
}

.package-contents-list dt {
  flex: 0 0 300px;
  font-weight: 700;
  padding-right: 1rem;
}

.package-contents-list dd {
  flex: 1 1 300px;
  margin: 0;
  color: #555;
  font-size: .9em;
}

.pros-cons-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 2rem;
}

.pros-cons-column {
  background: var(--surface);
  padding: 30px;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  flex: 1; 
  min-width: 280px; 
}

.pros-title,
.cons-title {
  font-family: var(--font-heading);
  font-size: 1.5em;
  margin: 0 0 15px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid;
}

.pros-title {
  border-color: var(--pros-color);
  color: var(--pros-color);
}

.cons-title {
  border-color: var(--cons-color);
  color: var(--cons-color);
}

.pros-cons-wrapper.flex-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

section#data-interpretation .pros-cons-column {
  border: 1px solid var(--border-color);
  padding: 2rem;
}

section#data-interpretation .pros-title {
  font-size: 1.6em;
  color: var(--text-heading);
  margin: 0 0 1.5rem 0;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--border-color);
  border-left: none; 
  border-image: none; 
  border-color: var(--border-color); 
}

section#data-interpretation .styled-list {
  padding-left: 0;
  list-style: none;
  margin: 0;
}

section#data-interpretation .styled-list li {
  display: block;
  padding: 0;
  border: none;
  line-height: 1.8;
  color: var(--text-primary);
  margin-bottom: 1em;
}

section#data-interpretation .styled-list li:last-child {
  margin-bottom: 0;
}

section#data-interpretation .styled-list strong {
  color: var(--text-heading);
  font-weight: 700;
}

#keyboard-latency-article .pros-cons-wrapper {
  display: block;
  background-color: var(--surface);
  border: 1px solid var(--border-color);
  border-left: 5px solid var(--accent-primary-color);
  padding: 25px 30px;
  margin-top: 40px;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  grid-template-columns: none; 
  gap: 0; 
}

#keyboard-latency-article .pros-cons-wrapper h3 {
  margin-top: 0;
  margin-bottom: 15px;
  border-bottom: none;
  color: var(--accent-primary-color);
  font-size: 1.4em;
}

.button-link.primary-button {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .8em 1.5em;
  border-radius: var(--border-radius);
  background: var(--accent-primary);
  color: var(--bg) !important;
  text-decoration: none;
  font-weight: bold;
  transition: filter .2s ease, transform .2s ease, box-shadow .3s ease;
  box-shadow: var(--shadow-sm);
  border: none;
  margin: 8px;
}

.button-link.primary-button:hover {
  filter: brightness(1.1);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  color: var(--bg) !important;
}

.button-link.primary-button i {
  font-size: .9em;
}

.button-link {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  transition: all .3s ease;
  border: 2px solid transparent;
  margin: 8px;
}

.text-button {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  text-decoration: underline;
  padding: 5px;
  font-size: .9em;
}

.text-button:hover {
  color: var(--text-primary);
}

.call-to-action {
  text-align: center;
  margin-top: 40px;
  background: var(--surface);
  padding: 40px;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
}

.x-share-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .9em;
  background-color: var(--surface);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: all .3s ease;
}

.x-share-button .fa-x-twitter {
  margin-right: 10px;
  font-size: 1.2em;
}

.x-share-button:hover {
  background-color: var(--accent-primary-color);
  border-color: var(--accent-primary-color);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.share-button-container {
  margin-top: 20px;
  text-align: center;
  padding: 0 10px;
}

.share-widget {
  margin-top: 2.5rem;
}

.share-widget .button-link.primary-button {
  width: 100%;
  box-sizing: border-box; 
  justify-content: center;
  margin-left: 0;
  margin-right: 0;
}

.merged-cta .cta-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
  align-items: center;
}

.merged-cta .cta-buttons .button-link.primary-button {
  margin-left: 0;
  margin-right: 0;
  font-size: 0.85em;
}

#lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 16px;
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s ease, visibility .3s ease;
}

#lightbox-overlay.visible {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

#lightbox-image {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  box-shadow: 0 0 40px rgba(0, 0, 0, .5);
  transform: scale(.95);
  transition: transform .3s ease;
}

#lightbox-overlay.visible #lightbox-image {
  transform: scale(1);
}

#lightbox-close-btn {
  position: fixed;
  top: 20px;
  right: 25px;
  font-size: 45px;
  font-weight: 300;
  color: white;
  background: none;
  border: none;
  cursor: pointer;
  text-shadow: 0 0 10px rgba(0, 0, 0, .8);
  transition: color .3s ease;
  z-index: 10001; 
  line-height: 1;
}

#lightbox-close-btn:hover {
  color: #ccc;
}

/* ==========================================================================
   Sliders (Range Inputs) & Tooltips
   ========================================================================== */

.slider,
.ap-rt-simulator input[type="range"].slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 5px;
  background: var(--border-color);
  outline: none;
  transition: opacity .2s;
  cursor: pointer;
  padding: 0;
  margin: 10px 0;
  display: block;
}

.slider::-webkit-slider-thumb,
.ap-rt-simulator input[type="range"].slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid var(--surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  margin-top: -6px; 
}

.ap-rt-simulator input[type="range"].slider::-moz-range-thumb {
  -moz-appearance: none;
  appearance: none;
  width: 14px; 
  height: 14px;
  border-radius: 50%;
  border: 3px solid var(--surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  background-color: transparent; 
}

.slider.ap-slider::-webkit-slider-thumb,
.ap-rt-simulator .slider.ap-slider::-webkit-slider-thumb {
  background: var(--accent-primary-color);
}
.ap-rt-simulator .slider.ap-slider::-moz-range-thumb {
  background-color: var(--accent-primary-color);
}

.slider.rt-slider::-webkit-slider-thumb,
.ap-rt-simulator .slider.rt-slider::-webkit-slider-thumb {
  background: var(--pros-color);
}
.ap-rt-simulator .slider.rt-slider::-moz-range-thumb {
  background-color: var(--pros-color);
}

.ap-rt-simulator .slider.ks-slider::-webkit-slider-thumb {
  background-color: var(--text-secondary, #795548);
}
.ap-rt-simulator .slider.ks-slider::-moz-range-thumb {
  background-color: var(--text-secondary, #795548);
}

/* ==========================================================================
   Site Controls (Floating Buttons)
   ========================================================================== */

.site-controls {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.control-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: all .3s ease;
}

.control-btn:hover {
  transform: translateY(-5px) scale(1.1);
}

.control-btn.active {
  color: var(--pros-color);
}

#horror-mode-toggle {
  display: none;
}

/* ==========================================================================
   Interactive Showcases & Simulators
   ========================================================================== */

.interactive-showcase {
  background-color: var(--surface);
  border-radius: var(--border-radius);
  padding: 40px;
  margin: 80px 0;
  text-align: center;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-color);
}

.interactive-title {
  font-family: var(--font-heading);
  font-size: 2em;
  color: var(--text-heading);
  margin: 0 0 10px 0;
}

.interactive-subtitle {
  color: var(--text-secondary);
  margin: 0 auto 30px auto;
  max-width: 500px;
}

/* --- AP/RT Key Simulator --- */
.ap-rt-simulator {
  position: relative; /* Sim Start Overlay のため */
  padding: 25px;
  background: var(--bg);
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
}

.sim-start-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(253, 251, 245, .7);
  backdrop-filter: blur(4px);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .3s;
  border-radius: var(--border-radius);
}

.ap-rt-simulator.active .sim-start-overlay {
  opacity: 0;
  pointer-events: none;
}

.sim-start-btn {
  font-size: 1.2em;
  padding: 15px 30px;
  border-radius: var(--border-radius);
  background: var(--surface);
  color: var(--text-heading);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: all .3s ease;
}

.sim-start-btn:hover {
  transform: scale(1.05);
}

.sim-main-area {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 20px;
  align-items: center;
}

.sim-key-area {
  text-align: center;
}

.sim-key-instruction {
  font-size: .8em;
  font-weight: bold;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.key-simulation {
  position: relative;
  height: 100px;
  margin: 0 auto;
  width: 60px;
}

.key-cap {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 60px;
  height: 50px;
  background-color: var(--text-heading);
  color: var(--bg);
  border-radius: 8px;
  z-index: 2;
  transform-origin: bottom center;
  font-size: 1.5em;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: transform .05s ease-out, background-color .1s ease-out;
}

.key-stem {
  position: absolute;
  bottom: 0;
  left: 25px;
  width: 10px;
  height: 60px;
  background-color: var(--border-color);
  border-radius: 3px;
}

.key-cap.actuated {
  background: var(--accent-primary);
}

.sim-graph-area {
  height: 120px;
  background: var(--surface);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

#sim-graph-canvas {
  width: 100%;
  height: 100%;
}

.sim-controls-area {
  margin-top: 20px;
}

.controls {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.slider-group {
  flex: 1;
}

.slider-group label {
  font-size: .9em;
  font-weight: bold;
}

.sim-mode-toggle {
  margin-top: 15px;
  text-align: center;
}

#sim-mode-btn {
  font-weight: bold;
  font-size: .9em;
  padding: 8px 16px;
  border-radius: 50px;
  border: 1px solid var(--border-color);
  background-color: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all .3s ease;
}

#sim-mode-btn:hover {
  background-color: var(--bg);
  color: var(--text-heading);
  box-shadow: var(--shadow-sm);
}

#sim-mode-btn.normal-mode {
  background: var(--accent-secondary);
  color: white;
  border-color: var(--accent-secondary);
}

.material-comparator {
  margin-top: 40px;
  padding: 20px;
  background: var(--surface);
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
}

.material-tabs {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 15px;
  border-bottom: 2px solid var(--border-color);
}

.material-tab {
  font-weight: bold;
  padding: 10px 20px;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all .3s ease;
}

.material-tab.active {
  color: var(--text-heading);
  border-bottom-color: var(--accent-primary-color);
}

.material-content {
  display: none;
  padding-top: 15px;
  text-align: left;
}

.material-content.active {
  display: block;
  animation: fadeIn .5s;
}

.material-content h4 {
  font-family: var(--font-heading);
  margin: 0 0 10px 0;
  color: var(--text-heading);
}

.material-content p {
  margin: 0;
}

/* ==========================================================================
   Sliders & Carousels (Swiper)
   ========================================================================== */

article.cafe-review-theme {
  --swiper-navigation-color: var(--accent-primary-color);
  --swiper-pagination-color: var(--accent-primary-color);
}

.article-slider-wrapper {
  max-width: 720px;
  aspect-ratio: 16/9;
  margin: 20px auto;
  overflow: hidden;
  border-radius: 8px;
  background-color: var(--surface);
  border: 1px solid var(--border-color);
  padding: 25px;
  box-shadow: var(--shadow-sm);
}

.article-slider-wrapper .swiper {
  width: 100%;
  height: 100%;
}

.product-slider {
  width: 100%;
  padding: 0 60px;
  position: relative;
}

.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: none;
  box-shadow: none;
  transition: opacity .4s ease;
  opacity: .6;
  height: 100%;
}

.swiper-slide-active {
  opacity: 1;
}

.swiper-slide img {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-color);
  object-fit: cover;
  cursor: zoom-in;
}

.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background-color: rgba(var(--accent-primary-color-rgb, 212, 163, 115), .15);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  color: var(--accent-primary-color);
  transition: all .3s ease, opacity .2s ease;
  margin: 0;
  opacity: .8;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  background-color: rgba(var(--accent-primary-color-rgb, 212, 163, 115), .3);
  color: var(--accent-primary-color);
  transform: translateY(-50%) scale(1.1);
  opacity: 1;
}

.swiper-button-prev {
  left: 0px;
}

.swiper-button-next {
  right: 0px;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 1.2rem;
  font-weight: 900;
}

article.cafe-review-theme .swiper-button-disabled {
  opacity: .2;
  cursor: auto;
}

.manual-slide-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 0 auto 30px auto;
}

.slide-to-btn {
  padding: 10px 20px;
  font-family: var(--font-body);
  font-size: .9em;
  font-weight: 700;
  border: 1px solid var(--border-color);
  background-color: var(--surface);
  color: var(--text-secondary);
  border-radius: 50px;
  cursor: pointer;
  transition: all .3s ease;
}

.slide-to-btn:hover {
  background-color: var(--bg);
  border-color: var(--accent-primary-color);
  color: var(--text-heading);
  transform: translateY(-2px);
}

.slide-to-btn.active {
  background: var(--accent-primary);
  color: white !important;
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}

.slider-description-wrapper .slider-description {
  display: none;
  opacity: 0;
  transition: opacity .3s ease-in-out;
}

.slider-description-wrapper .slider-description.active {
  display: block;
  opacity: 1;
}

.slider-description h4 {
  font-size: 1.1em;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: .5rem;
  color: var(--color-accent);
}

.slider-description p {
  font-size: .95em;
  line-height: 1.7;
  margin-top: 0;
}

/* ==========================================================================
   Cards (Performance, Related, Feature, etc.)
   ========================================================================== */

.performance-card {
  background-color: var(--surface);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  margin: 2em 0;
  overflow: hidden;
  border: 1px solid var(--border-color);
  padding: 25px;
}

.performance-image {
  position: relative;
  margin: 0 auto 25px auto;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background-color: var(--bg);
  max-width: 500px;
}

.performance-image img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
}

.performance-image figcaption {
  font-size: .85em;
  text-align: center;
  color: var(--text-secondary);
  padding-top: 10px;
}

.performance-image .zoom-btn:hover,
.image-card-style-article .zoom-btn:hover {
  color: var(--accent-primary-color) !important;
  transform: scale(1.1) !important;
  background: white !important;
}

.performance-card .performance-spec-list {
  padding: 0;
  margin: 0;
}

.performance-card .list-subheader {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.2em;
  color: var(--text-heading);
  padding: 15px 0 10px 0;
  border-bottom: 2px solid var(--border-color);
  margin-top: 10px;
}

.performance-card .list-subheader:first-of-type {
  margin-top: 0;
}

.performance-card .list-subheader-item {
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px dashed var(--border-color);
}

.performance-card .list-subheader-item:last-of-type {
  border-bottom: none;
}

.performance-card .list-subheader-item dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 5px 20px;
}

.performance-card .list-subheader-item dt {
  font-weight: 700;
  color: var(--text-secondary);
  padding: 8px 0;
  border-bottom: 1px dotted var(--border-color);
  min-width: 160px;
}

.performance-card .list-subheader-item dd {
  color: var(--text-primary);
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px dotted var(--border-color);
}

.performance-card .list-subheader-item dl dt:last-of-type,
.performance-card .list-subheader-item dl dd:last-of-type {
  border-bottom: none;
}

.image-card-style-article .performance-image {
  margin: 20px auto;
  padding: 15px;
  border-radius: var(--border-radius);
  background-color: var(--surface);
  max-width: 600px;
  box-shadow: var(--shadow-sm);
}

.image-card-style-article .performance-image img {
  border-radius: 8px;
}

.image-card-style-article .performance-image figcaption {
  font-size: .9em;
  padding-top: 15px;
}

/* --- Related Articles --- */
.related-articles-container {
  margin-top: 40px;
  padding: 25px;
  background-color: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  position: relative;
}

.carousel-viewport {
  overflow: hidden;
  width: 100%;
}

.related-articles-grid {
  display: flex;
  gap: 20px;
  transition: transform .5s cubic-bezier(.25, 1, .5, 1);
}

.related-article-card {
  flex: 0 0 240px;
  text-decoration: none;
  display: block;
  border-radius: var(--border-radius);
  overflow: hidden;
  background-color: var(--bg);
  border: 1px solid var(--border-color);
  transition: all .3s ease;
}

.related-article-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.card-thumbnail {
  position: relative;
  aspect-ratio: 16/9;
}

.card-thumbnail img,
.card-thumbnail-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: var(--border-color);
}

.card-category {
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-size: .75em;
  font-weight: 700;
  padding: 3px 10px;
  background-color: rgba(255, 255, 255, .8);
  color: var(--text-heading);
  border-radius: 50px;
  backdrop-filter: blur(2px);
}

.card-content {
  padding: 12px 15px;
}

.card-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .9em;
  line-height: 1.4;
  color: var(--text-primary);
  margin: 0 0 8px 0;
  height: 2.8em; /* 2行分 */
  overflow: hidden;
}

.card-date {
  font-family: var(--font-mono);
  font-size: .8em;
  color: var(--text-secondary);
}

.carousel-navigation {
  position: absolute;
  top: 15px;
  right: 15px;
  display: flex;
  gap: 8px;
}

.carousel-nav-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background-color: var(--surface);
  color: var(--text-secondary);
  font-size: 1.2em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s ease;
}

.carousel-nav-btn:hover {
  background-color: var(--accent-primary-color);
  border-color: var(--accent-primary-color);
  color: white;
}

.carousel-nav-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
  background-color: var(--bg);
}

/* --- Feature/Verdict/Recommend Cards --- */
.parts-showcase-card,
.feature-card,
.verdict-card,
.recommend-card {
  background-color: var(--surface);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 2rem;
  padding: 1.5rem;
}

.parts-showcase-card {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
}

.parts-image-container {
  flex: 1 1 200px;
}

.parts-image-container img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

.parts-description-container {
  flex: 2 1 300px;
}

.feature-cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.feature-card {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.feature-icon {
  font-size: 2rem;
  color: var(--text-heading);
}

.verdict-card {
  border-left: 5px solid var(--text-heading);
  margin-top: 2rem;
}

.verdict-title {
  font-family: var(--font-heading);
}

.recommend-cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 2.5rem 0;
}

.recommend-header {
  text-align: center;
}

.recommend-header .fa-solid {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: var(--text-heading);
}

.recommend-card .rating {
  font-size: 1.1rem;
  color: var(--accent-primary-color, #d4a373);
  margin-bottom: 1rem;
}

.software-feature-block {
  margin-bottom: 2.5rem;
  border: 1px solid #e0e0e0; 
  border-radius: 8px;
  padding: 1.5rem;
  background: #fdfdfd; 
}

.software-content-wrapper .article-slider-wrapper {
  margin-bottom: 1rem;
}

/* ==========================================================================
   Charts, Audio, FAQ
   ========================================================================== */

.spec-chart-section {
  background: var(--surface);
  padding: 20px 40px 20px 40px;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-md);
}

.spec-chart-container {
  max-width: 500px;
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px; 
  height: auto; 
}

.total-score-container {
  text-align: center;
  margin-bottom: 0 !important; 
  order: 1; 
}

#radar-chart {
  margin-top: 0 !important; 
  order: 2; 
  width: 100%; 
  max-height: 350px;
}
.score-value {
  font-family: var(--font-heading);
  font-size: 4em;
  font-weight: 900;
  color: var(--text-heading);
  line-height: 1;
  transition: color .4s ease;
}

.score-label {
  font-family: var(--font-mono);
  font-size: 1em;
  color: var(--text-secondary);
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* --- Audio Player --- */
.sound-player {
  padding: 20px 0;
}

.sound-play-button {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent-primary-color);
  border: 2px solid var(--border-color);
  font-size: 2em;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 55px auto 0;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all .3s ease;
}

.sound-play-button:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-md);
}

.sound-play-button.playing {
  background: var(--accent-primary);
  color: white;
  border-color: transparent;
  animation: pulse 1.5s infinite;
}

#audio-eq-canvas {
  display: block;
  margin: 25px auto 10px auto;
  width: 80%;
  max-width: 350px;
  height: 60px;
}

/* --- FAQ (Details/Summary) --- */
.faq-section {
  border-top: 1px solid var(--border-color);
  padding-top: 40px;
}

.faq-item {
  border-bottom: 1px solid var(--border-color);
}

.faq-item summary {
  font-size: 1.1em;
  font-weight: 700;
  color: var(--text-heading);
  padding: 25px 0;
  cursor: pointer;
  position: relative;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  font-family: var(--font-heading);
  position: absolute;
  right: 10px;
  font-size: 1.5em;
  font-weight: 400;
  transition: transform .3s;
  color: var(--accent-primary-color);
}

.faq-item[open] > summary::after {
  transform: rotate(45deg);
}

.faq-answer {
  padding: 0 20px 30px 20px;
  color: var(--text-secondary);
}

.faq-answer p {
  margin: 0;
}

/* ==========================================================================
   Keyboard Finder / Selector
   ========================================================================== */

#keyboard-selector .finder-question-title,
.keyboard-finder-page #keyboard-finder .finder-question-title {
  font-family: var(--font-heading);
  font-size: 1.3em;
  color: var(--text-heading);
  margin: 25px 0 15px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
  border-left: 5px solid #777;
  padding-left: 10px;
}

.keyboard-finder-page #keyboard-finder .finder-question-title:first-of-type {
  margin-top: 0;
}

#keyboard-selector .finder-options,
.keyboard-finder-page #keyboard-finder .finder-options {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

#keyboard-selector .finder-option,
.keyboard-finder-page #keyboard-finder .finder-option {
  padding: 10px 18px;
  border: 1px solid var(--border-color);
  border-radius: 50px;
  background-color: var(--bg);
  cursor: pointer;
  transition: all .2s ease-in-out;
  font-weight: 500;
  user-select: none;
}

#keyboard-selector .finder-option:hover,
.keyboard-finder-page #keyboard-finder .finder-option:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
  border-color: var(--accent-primary-color);
}

#keyboard-selector .finder-option.selected,
.keyboard-finder-page #keyboard-finder .finder-option.selected {
  background: var(--accent-primary);
  border-color: transparent;
  color: white;
  font-weight: 700;
  box-shadow: var(--shadow-md);
}

.keyboard-finder-page #keyboard-finder .finder-option.selected b {
  color: white;
}

/* --- .keyboard-finder-page (Full page finder) --- */
.keyboard-finder-page #keyboard-finder {
  background-color: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 20px 30px 30px 30px;
  margin-bottom: 40px;
  box-shadow: var(--shadow-sm);
}

.keyboard-finder-page #keyboard-finder .finder-option code {
  display: none;
}

.keyboard-finder-page #keyboard-results table tbody tr {
  display: none;
}

.keyboard-finder-page #keyboard-results.no-results::after {
  content: "条件に合うキーボードが見つかりません。";
  display: block;
  text-align: center;
  padding: 40px;
  font-family: var(--font-body);
  color: var(--text-secondary);
  background-color: var(--surface);
  border: 1px dashed var(--border-color);
  border-radius: var(--border-radius);
}

/* --- #keyboard-selector (Sidebar widget finder) --- */
#keyboard-selector .choice-number {
  display: none;
}

#keyboard-selector .result-section {
  display: none;
  margin-top: 50px;
  padding: 20px;
  border-top: 2px solid #eee;
}

#keyboard-selector .keyboard-result {
  display: none; 
}

#keyboard-selector .finder-option.disabled {
  opacity: .5;
  background: var(--border-color);
  color: var(--text-secondary);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

#keyboard-selector .finder-option.disabled b {
  color: var(--text-secondary);
}

#keyboard-selector .finder-option.selected.disabled {
  background: var(--border-color);
}

#keyboard-selector .finder-note {
  font-size: .9em;
  padding: 15px;
  background-color: var(--bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  color: var(--text-secondary);
  margin: 1em 0 .8em 0;
}

#keyboard-selector .finder-note i {
  margin-right: 10px;
  color: var(--accent-primary-color);
}

.keyboard-finder-page .product-specs,
#keyboard-selector .product-specs {
  padding: 0 10px 10px;
  background-color: var(--surface);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  border-radius: var(--border-radius);
  margin: 2em 0; 
}

.keyboard-finder-page .product-specs table,
#keyboard-selector .product-specs table {
  width: 100%;
  border-collapse: collapse;
  border: none;
}

.keyboard-finder-page .product-specs th,
#keyboard-selector .product-specs th {
  text-align: left;
  padding: 15px;
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--text-heading);
  border-bottom: 2px solid var(--border-color);
  font-size: .9em;
}

.keyboard-finder-page .product-specs td,
#keyboard-selector .product-specs td {
  padding: 18px 15px;
  border-top: 1px solid var(--border-color);
  vertical-align: middle;
  font-size: .95em;
}

.keyboard-finder-page .product-specs tbody tr:first-child td,
#keyboard-selector .product-specs tbody tr:first-child td {
  border-top: none;
}

.keyboard-finder-page .product-specs td a,
#keyboard-selector .product-specs td a {
  color: var(--text-primary);
  font-weight: 700;
  text-decoration: none;
  transition: color .2s ease;
}

.keyboard-finder-page .product-specs td a:hover,
#keyboard-selector .product-specs td a:hover {
  color: var(--accent-primary-color);
  text-decoration: underline;
}

.review-link-cell {
  text-align: left;
}

.keyboard-finder-page .product-specs .review-link-cell .button-link-small,
#keyboard-selector .product-specs .review-link-cell .button-link-small {
  margin-left: -10px;
}

/* --- Article-Specific & Misc Styles --- */

/* --- Latency Article --- */
#keyboard-latency-article h3,
#keyboard-latency-article h4 {
  font-family: var(--font-heading);
  color: var(--text-heading);
}

#keyboard-latency-article h3 {
  font-size: 1.6em;
  padding-bottom: .5em;
  border-bottom: 1px solid var(--border-color);
  margin-top: 40px;
  margin-bottom: 25px;
}

#keyboard-latency-article h4 {
  font-size: 1.3em;
  margin-top: 30px;
  margin-bottom: 15px;
  border-left: 4px solid var(--accent-primary-color);
  padding: 4px 15px;
}

#keyboard-latency-article h3:first-of-type {
  margin-top: 10px;
}

#keyboard-latency-article p,
#keyboard-latency-article ul li {
  font-family: var(--font-body);
  color: var(--text-primary);
  line-height: 1.8;
}

#keyboard-latency-article hr {
  border: none;
  border-top: 1px solid var(--border-color);
  background: none;
  margin: 60px 0;
}

/* --- Sort Controls --- */
.sort-controls {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.sort-btn {
  background-color: var(--surface);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  border-radius: 8px;
  font-family: var(--font-body);
  padding: 10px 15px;
  cursor: pointer;
  font-size: .95rem;
  font-weight: bold;
  transition: all .2s ease;
}

.sort-btn:hover {
  background-color: var(--bg);
  color: var(--text-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.sort-btn.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary-color);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

/* --- TOC Accordion (JS-Powered) --- */
.toc-toggle {
  display: inline-block;
  font-weight: 700;
  margin-right: 8px;
  cursor: pointer;
  user-select: none;
  color: var(--text-secondary);
  transition: transform 0.3s ease, color 0.3s ease;
}

.toc-sub-list {
  display: none;
}

.article-sidebar .table-of-contents li.is-open > .toc-sub-list {
  display: block;
}

.article-sidebar .table-of-contents li.is-open > .toc-toggle {
  transform: rotate(90deg);
  color: var(--accent-primary-color);
}

.article-sidebar .table-of-contents li.has-submenu:hover > .toc-toggle {
  color: var(--text-primary);
}

.article-sidebar .table-of-contents li.has-submenu > a {
  display: inline;
  padding-left: 0;
  border-left: 2px solid transparent; 
}

.article-sidebar .table-of-contents li.has-submenu > a:hover {
  color: var(--text-primary);
  border-left-color: var(--border-color);
  transform: translateX(5px);
}

.article-sidebar .table-of-contents li.has-submenu > a.active {
  color: var(--accent-primary-color);
  font-weight: 700;
  border-left-color: var(--accent-primary-color);
  transform: translateX(5px);
}


/* --- Content Accordion (JS-Powered) --- */
.content-accordion {
  margin: 2.5em 0;
  border-radius: var(--border-radius);
  transition: box-shadow 0.3s ease;
  overflow: hidden;
}

.content-accordion > summary {
  padding: 18px 25px 18px 55px;
  cursor: pointer;
  outline: none;
  background-color: transparent;
  border-bottom: 1px solid var(--border-color);
  transition: background-color 0.2s ease;
  position: relative;
  list-style: none;
}

.content-accordion > summary::-webkit-details-marker,
.content-accordion > summary::marker {
  display: none;
  content: "";
}

.content-accordion > summary.article-sub-title {
  font-family: var(--font-heading);
  font-size: 1.6em;
  color: var(--text-heading);
  font-weight: 700;
  margin: 0;
  border-left: none;
  border-image: none;
  line-height: 1.4;
  position: relative;
  z-index: 1;
}

.content-accordion[open] > summary.article-sub-title {
  border-bottom-color: transparent;
}

.content-accordion > summary::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 2px;
  background-color: var(--accent-primary-color);
  transition: transform 0.3s ease;
  z-index: 1;
}

.content-accordion > summary::after {
  content: '';
  position: absolute;
  left: 26px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  width: 2px;
  height: 14px;
  background-color: var(--accent-primary-color);
  transition: transform 0.3s ease, opacity 0.3s ease;
  z-index: 1;
  opacity: 1;
}

.content-accordion[open] > summary::after {
  transform: translateY(-50%) rotate(90deg);
  opacity: 0;
}

.content-accordion > summary:hover {
  background-color: var(--bg);
}

.content-accordion-body {
  padding: 0 25px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  background-color: var(--surface);
  transition: max-height 0.4s ease-out, padding 0.4s ease-out, opacity 0.3s 0.1s ease-in;
}

.content-accordion[open] > .content-accordion-body {
  max-height: 2000px; 
  opacity: 1;
  padding-top: 25px;
  padding-bottom: 15px;
  transition: max-height 0.4s ease-out, padding 0.4s ease-out, opacity 0.2s ease-out;
}

.content-accordion-body ul {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 20px;
  list-style: disc;
}

.content-accordion-body ul li {
  display: list-item;
  padding: 8px 0;
  border: none;
  align-items: initial;
  color: var(--text-primary);
  font-family: var(--font-body);
}

.content-accordion-body ul li i {
  display: none; 
}

.content-accordion-body ul li p {
  margin-bottom: 0;
  display: inline;
  line-height: 1.8;
}

.content-accordion > summary span.ripple {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.1);
  transform: scale(0);
  animation: ripple-anim 0.6s ease-out; 
  pointer-events: none;
  z-index: 2;
}

body.dark-mode .content-accordion > summary span.ripple {
  background-color: rgba(255, 255, 255, 0.1);
}

/* ========================================================================== */
/*  Organized CSS – Part 3                                                   */
/*                                                                           */
/*  This file concludes the organized stylesheet.  It includes all media     */
/*  queries, remaining non-media styles, marker highlights, mobile summary   */
/*  cards, special sections, and final adjustments for dark, horror and      */
/*  other themes.  Include this file after parts 1 and 2 to assemble the     */
/*  complete CSS.                                                           */
/* ========================================================================== */

/* ==========================================================================
   Media Queries (Consolidated & Cleaned)
   ========================================================================== */

@media (max-width: 992px) {
  /* --- Layout Changes (PC to Tablet) --- */
  .article-layout {
    grid-template-columns: 1fr;
    padding: 0 15px;
    margin-top: 20px;
  }
  .article-sidebar {
    order: -1;
    margin-bottom: 0px;
  }
  .article-sidebar .sidebar-sticky-content {
    position: static;
  }

  /* --- TOC Styling (Tablet) --- */
  .article-sidebar .table-of-contents {
    background-color: var(--surface);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    padding: 25px 35px;
    border-radius: var(--border-radius);
  }
  .article-sidebar .toc-title {
    border-bottom: 2px solid var(--border-color);
  }
  .article-sidebar .table-of-contents ul {
    columns: 2;
  }
  .article-sidebar .table-of-contents a,
  .article-sidebar .table-of-contents li.has-submenu > a {
    border-left: none;
    padding-left: 0;
  }
  .article-sidebar .table-of-contents a:hover,
  .article-sidebar .table-of-contents a.active,
  .article-sidebar .table-of-contents li.has-submenu > a:hover,
  .article-sidebar .table-of-contents li.has-submenu > a.active {
    transform: translateX(0);
    border-left: none;
    color: var(--accent-primary-color);
  }

  /* --- Related Container (from 989px) --- */
  .sidebar-related-container {
    margin-top: 0 !important;
    border-radius: 0 !important;
  }

  /* --- Typography & Spacing (Tablet) --- */
  body {
    -webkit-text-size-adjust: 100%;
  }
  p {
    font-size: 16px;
    line-height: 1.8;
  }
  .article-section {
    margin-bottom: 60px;
  }
  .parallax-header {
    height: 40vh;
    min-height: 280px;
    margin-bottom: 40px;
  }
  .article-main-title {
    font-size: 1.9em;
    line-height: 1.4;
  }
  .article-sub-title {
    font-size: 1.5em;
  }

  /* --- Component Adjustments (Tablet) --- */
  .pros-cons-wrapper {
    grid-template-columns: 1fr;
  }
  .pros-cons-column {
    padding: 20px;
  }
  .spec-list {
    grid-template-columns: 1fr;
  }
  .spec-list dt {
    border-bottom: none;
    padding-bottom: 5px;
  }
  .spec-list dd {
    border-bottom: 1px dashed var(--border-color);
    padding-top: 0;
  }
  .sim-main-area {
    grid-template-columns: 1fr;
  }
  .sim-key-area {
    margin-bottom: 20px;
  }
  .control-btn {
    width: 45px;
    height: 45px;
    font-size: 1.3em;
  }
  .control-btn:hover {
    transform: none;
  }
  .spec-chart-container {
    margin-left: 10px;
    margin-right: 10px;
    gap: 5px;
    height: auto;
  }
  .spec-chart-section .section-title {
    margin-bottom: 0.5em;
  }
  #radar-chart {
    max-height: 280px;
  }

  /* --- Table Adjustments (Tablet) --- */
  .stylish-table th,
  .stylish-table td {
    padding: 10px 8px;
    font-size: .9em;
  }
  .td-link-cell {
    text-align: left;
  }
  .table-button-link {
    white-space: normal;
  }

  /* --- TOC Expand Button (Tablet/Mobile) --- */
  .table-of-contents {
    position: relative;
    max-height: 300px;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    padding-bottom: 25px;
  }
  .table-of-contents.is-expanded {
    max-height: 2000px;
    overflow: visible;
  }
  .table-of-contents > ul {
    list-style: none;
    padding-left: 10px;
    padding-bottom: 100px;
  }
  .table-of-contents.is-expanded > ul {
    padding-bottom: 0;
  }
  .article-sidebar .sidebar-sticky-content a.toc-expand-button {
    position: absolute;
    top: 250px;
    z-index: 2;
    left: 0;
    right: 0;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
    padding: 10px 30px;
    padding-left: 30px !important;
    border: 1px solid var(--border-color);
    border-radius: 50px;
    background-color: var(--surface);
    box-shadow: var(--shadow-sm);
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9em;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
  }
  .article-sidebar .sidebar-sticky-content a.toc-expand-button:hover,
  .article-sidebar .sidebar-sticky-content a.toc-expand-button:focus {
    color: var(--text-heading);
    background-color: var(--bg);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
  .article-sidebar .table-of-contents::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70px;
    background: linear-gradient(to bottom, transparent 0%, var(--surface) 50%);
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
  }
  .table-of-contents.is-expanded::after,
  .table-of-contents.is-expanded + a.toc-expand-button {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .article-sidebar .table-of-contents li.is-open > .toc-sub-list,
  .article-sidebar .table-of-contents .toc-sub-list {
    display: block !important;
  }
  .article-sidebar .table-of-contents .toc-toggle {
    display: none !important;
  }
  .article-sidebar .table-of-contents a {
    padding-left: 0 !important;
    border-left: none !important;
    display: inline-block;
  }
  .table-of-contents > ul > li {
    margin-bottom: 0.4em;
  }
  .table-of-contents > ul > li > a {
    text-decoration: none;
    color: inherit;
  }
  .table-of-contents > ul > li > a::before {
    content: none !important;
  }
  .article-sidebar .table-of-contents .toc-sub-list,
  .table-of-contents > ul > li > ul {
    padding-left: 15px !important;
    list-style-type: '› ' !important;
    margin-top: 0.5em;
  }
  .table-of-contents > ul > li > ul > li {
    margin-bottom: 0.3em;
  }
  .table-of-contents > ul > li > ul > li > a {
    text-decoration: none;
    color: inherit;
  }
  .article-sidebar .table-of-contents .toc-sub-list,
  .table-of-contents > ul > li > ul {
    display: block !important;
  }
}

@media (max-width: 768px) {
  /* --- Show Mobile Summary --- */
  .mobile-summary-card {
    display: block;
  }

  /* --- Component 1-Column (Mobile) --- */
  .switch-spec-list,
  .performance-card .list-subheader-item dl {
    grid-template-columns: 1fr;
  }
  .switch-spec-list dt,
  .performance-card .list-subheader-item dt {
    border-bottom: none;
    padding-bottom: 5px;
  }
  .switch-spec-list dd,
  .performance-card .list-subheader-item dd {
    padding-top: 0;
  }
  .performance-card .list-subheader-item dd {
    border-bottom: 1px dotted var(--border-color);
  }

  /* --- Padding Adjustments (Mobile) --- */
  .interactive-showcase,
  .performance-card,
  .spec-chart-section,
  .software-feature-block,
  .verdict-card,
  .recommend-card,
  .parts-showcase-card {
    padding: 20px;
  }

  /* --- TOC 1-Column (Mobile) --- */
  .article-sidebar .table-of-contents ul {
    columns: 1;
  }

  /* --- Finder Table Vertical Layout (Mobile) --- */
  .keyboard-finder-page .product-specs thead,
  #keyboard-selector .product-specs thead {
    display: none;
  }
  .keyboard-finder-page .product-specs table,
  .keyboard-finder-page .product-specs tbody,
  .keyboard-finder-page .product-specs tr,
  .keyboard-finder-page .product-specs td,
  #keyboard-selector .product-specs table,
  #keyboard-selector .product-specs tbody,
  #keyboard-selector .product-specs tr,
  #keyboard-selector .product-specs td {
    display: block;
    width: 100%;
  }
  .keyboard-finder-page .product-specs td,
  #keyboard-selector .product-specs td {
    padding: 12px 18px;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    color: var(--text-primary);
    font-family: var(--font-body);
  }
  .keyboard-finder-page .product-specs tr td:last-child,
  #keyboard-selector .product-specs tr td:last-child {
    border-bottom: none;
  }
  .keyboard-finder-page .product-specs td::before,
  #keyboard-selector .product-specs td::before {
    display: block;
    font-weight: 700;
    font-size: .8em;
    color: var(--text-secondary);
    margin-bottom: 5px;
    font-family: var(--font-body);
  }
  .keyboard-finder-page .product-specs td:first-of-type,
  #keyboard-selector .product-specs td:first-of-type {
    background-color: var(--bg);
    color: var(--text-heading);
    font-family: var(--font-heading);
    font-size: 1.5em;
    text-align: center;
    padding: 18px 15px;
  }
  .keyboard-finder-page .product-specs td:first-of-type::before,
  #keyboard-selector .product-specs td:first-of-type::before {
    display: none;
  }
  .keyboard-finder-page .product-specs td:first-of-type a,
  #keyboard-selector .product-specs td:first-of-type a {
    color: var(--text-heading);
    text-decoration: none;
  }
  .keyboard-finder-page .product-specs td:nth-of-type(2)::before,
  #keyboard-selector .product-specs td:nth-of-type(2)::before {
    content: "RT性能";
  }
  .keyboard-finder-page .product-specs td:nth-of-type(3)::before,
  #keyboard-selector .product-specs td:nth-of-type(3)::before {
    content: "価格帯";
  }
  .keyboard-finder-page .product-specs td:nth-of-type(4)::before,
  #keyboard-selector .product-specs td:nth-of-type(4)::before {
    content: "ケース";
  }
  .keyboard-finder-page .product-specs td:nth-of-type(5)::before,
  #keyboard-selector .product-specs td:nth-of-type(5)::before {
    content: "レビュー記事";
  }
  .keyboard-finder-page .product-specs .review-link-cell,
  #keyboard-selector .product-specs .review-link-cell {
    padding-top: 15px;
    padding-bottom: 15px;
  }
  .keyboard-finder-page .product-specs .review-link-cell .button-link-small,
  #keyboard-selector .product-specs .review-link-cell .button-link-small {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: .85em;
    background-color: var(--bg);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    white-space: nowrap;
    margin: 0;
  }
  .keyboard-finder-page .product-specs .review-link-cell .button-link-small:hover,
  #keyboard-selector .product-specs .review-link-cell .button-link-small:hover {
    background: var(--accent-primary);
    color: white !important;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
  }
  /* --- Swiper Nav Hide (Mobile) (from 767px) --- */
  .product-slider .swiper-button-prev,
  .product-slider .swiper-button-next {
    display: none;
  }
}

@media (min-width: 769px) {
  /* --- Finder Table Row (Desktop/Tablet) --- */
  #keyboard-selector .product-specs .keyboard-result {
    display: table-row;
  }
}

@media (min-width: 993px) {
  /* --- TOC Desktop Styling --- */
  .article-sidebar .table-of-contents .toc-toggle {
    display: none !important;
  }
  .table-of-contents > ul {
    list-style: none;
    padding-left: 0;
  }
  .table-of-contents > ul > li {
    margin-bottom: 0.4em;
    padding-left: 0;
  }
  .table-of-contents > ul > li > a {
    display: inline-block;
    text-decoration: none;
    color: inherit;
    font-weight: 400;
    padding-left: 0 !important;
    border-left: none !important;
  }
  .table-of-contents > ul > li > a::before {
    content: none !important;
  }
  .table-of-contents > ul > li > ul {
    list-style-type: '› ' !important;
    margin-left: 0 !important;
    padding-left: 2.5em !important;
    margin-top: 0.5em;
  }
  .table-of-contents > ul > li > ul > li {
    margin-bottom: 0.3em;
  }
  .table-of-contents > ul > li > ul > li > a {
    text-decoration: none;
    color: inherit;
    font-weight: normal;
  }
  .article-sidebar .table-of-contents {
    max-height: 70vh; 
    overflow-y: auto;
    scrollbar-width: thin;
    position: relative;
    scroll-behavior: smooth;
  }

  .article-sidebar .table-of-contents::-webkit-scrollbar {
    width: 6px;
  }

  .article-sidebar .table-of-contents::-webkit-scrollbar-track {
    background: transparent;
  }

  .article-sidebar .table-of-contents::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 3px;
  }

  .article-sidebar .table-of-contents a.active {
    background: linear-gradient(90deg, rgba(var(--accent-primary-color-rgb, 212, 163, 115), 0.1), transparent);
  }
}

/* ==========================================================================
   Non-Media Query Styles (Remaining)
   ========================================================================== */

.article-layout {
  padding-bottom: 40px;
}

body.horror-theme .article-sidebar {
  animation: sidebar-shake 0.4s linear infinite;
  position: relative;
  z-index: 1;
}

body.horror-theme .article-sidebar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
  z-index: 10;
  pointer-events: none;
  animation-name: fast-flicker-blackout;
  animation-duration: 4s;
  animation-delay: 2s;
  animation-fill-mode: none;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}

body.horror-theme a:hover {
  animation: linkGlitch 0.4s ease-in-out infinite;
}

/* ==========================================================================
   Text Markers (Main, Positive, Warning)
   ========================================================================== */

.mark-main,
.mark-pos,
.mark-warn {
  display: inline;
  line-height: 1.8;
  background-repeat: no-repeat;
  background-position: 0 95%;
  background-size: 100% 0.4em;
  padding-bottom: 0.1em;
  transition: background-color .4s ease, background-size .3s ease, background-position .3s ease, background-image .4s ease;
}

.mark-main:hover,
.mark-pos:hover,
.mark-warn:hover {
  background-size: 100% 100%;
  background-position: 0 100%;
}

/* --- 1. Main Emphasis --- */
.mark-main {
  background-image: linear-gradient(to top, rgba(255, 229, 100, 0.7) 0%, rgba(255, 229, 100, 0.7) 100%);
}
body.dark-mode .mark-main {
  background-image: linear-gradient(to top, rgba(212, 163, 115, 0.6) 0%, rgba(212, 163, 115, 0.6) 100%);
}
body.horror-theme .mark-main {
  background-image: linear-gradient(to top, rgba(159, 29, 29, 0.6) 0%, rgba(159, 29, 29, 0.6) 100%);
}

/* --- 2. Positive Emphasis --- */
.mark-pos {
  background-image: linear-gradient(to top, rgba(102, 187, 106, 0.6) 0%, rgba(102, 187, 106, 0.6) 100%);
}
body.dark-mode .mark-pos {
  background-image: linear-gradient(to top, rgba(129, 199, 132, 0.5) 0%, rgba(129, 199, 132, 0.5) 100%);
}
body.horror-theme .mark-pos {
  background-image: linear-gradient(to top, rgba(160, 160, 160, 0.5) 0%, rgba(160, 160, 160, 0.5) 100%);
}

/* --- 3. Warning Emphasis --- */
.mark-warn {
  background-image: linear-gradient(to top, rgba(239, 83, 80, 0.6) 0%, rgba(239, 83, 80, 0.6) 100%);
}
body.dark-mode .mark-warn {
  background-image: linear-gradient(to top, rgba(229, 115, 115, 0.5) 0%, rgba(229, 115, 115, 0.5) 100%);
}
body.horror-theme .mark-warn {
  background-image: linear-gradient(to top, rgba(255, 0, 0, 0.7) 0%, rgba(255, 0, 0, 0.7) 100%);
}

/* ==========================================================================
   Mobile Summary Card (Controlled by 768px query)
   ========================================================================== */

.mobile-summary-card {
  display: none;
  margin: 40px 0 60px 0;
  padding: 30px 25px 25px 25px;
  background-color: var(--surface);
  border: 1px solid var(--border-color);
  border-left: 5px solid var(--accent-primary-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
}

.mobile-summary-card .summary-title {
  font-family: var(--font-heading);
  font-size: 1.5em;
  color: var(--text-heading);
  margin: 0 0 15px 0;
  text-align: center;
}

.mobile-summary-card .summary-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-summary-card .summary-list li {
  display: flex;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px dashed var(--border-color);
  line-height: 1.7;
}

.mobile-summary-card .summary-list li:last-child {
  border-bottom: none;
}

.mobile-summary-card .summary-list li i {
  margin-right: 12px;
  color: var(--accent-primary-color);
  margin-top: 6px;
}

#section-evolution .pros-cons-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

#section-evolution .pros-cons-column {
  background-color: var(--card-bg-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
}

#section-evolution .cons-title {
  background-color: #6A7C89; 
  color: #ffffff;
  padding: 0.75rem 1rem;
  margin: 0;
  font-size: 1.1rem;
}

#section-evolution .pros-title {
  background-color: #C0A062; 
  color: #ffffff;
  padding: 0.75rem 1rem;
  margin: 0;
  font-size: 1.1rem;
}

#section-evolution .styled-list {
  padding: 1rem 1rem 1rem 2rem;
  margin: 0;
  list-style-type: disc;
}

.coverflow-gallery-slider {
 width: 100%;
 padding-top: 50px;
 padding-bottom: 50px;
}

.coverflow-gallery-slider .swiper-slide {
 background-position: center;
 background-size: cover;
 width: 300px;
 height: 300px;
 border-radius: var(--border-radius);
 box-shadow: var(--shadow-md);
 border: 1px solid var(--border-color);
 opacity: 0.5;
 transition: opacity .3s ease;
}

.coverflow-gallery-slider .swiper-slide-active {
 opacity: 1;
}

#gallery-build-details {
 margin-top: 2rem;
}

@media (min-width: 993px) {
  .article-sidebar .table-of-contents {
    max-height: 70vh; 
    overflow-y: auto;
    scrollbar-width: thin;
    position: relative;
    scroll-behavior: smooth;
  }

  .article-sidebar .table-of-contents::-webkit-scrollbar {
    width: 6px;
  }

  .article-sidebar .table-of-contents::-webkit-scrollbar-track {
    background: transparent;
  }

  .article-sidebar .table-of-contents::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 3px;
  }

  .article-sidebar .table-of-contents a.active {
    background: linear-gradient(90deg, rgba(var(--accent-primary-color-rgb, 212, 163, 115), 0.1), transparent);
  }
}

body {
    cursor: url('/cdn/shop/files/BackgroundEraser_20251122_191703799.png?v=1763806695'), auto;
}

a,
button,
summary,
.pointer-cursor,
.swiper-button-prev,
.swiper-button-next,
.sort-btn,
.slide-to-btn,
.toc-expand-button,
.finder-option,
.control-btn,
.table-button-link {
    cursor: url('/cdn/shop/files/BackgroundEraser_20251122_191254950.png?v=1763806693'), pointer;
}

.carousel-nav-btn {
    cursor: url('/cdn/shop/files/BackgroundEraser_20251122_191254950.png?v=1763806693'), pointer !important;
}

body.neo-retro-mode .article-sidebar .table-of-contents a.active {
    border-left-color: var(--accent-vermilion) !important;
    color: var(--ink-black) !important; 
    background: linear-gradient(90deg, rgba(230, 57, 70, 0.15), transparent) !important; 
}

body.neo-retro-mode footer,
body.neo-retro-mode .site-footer,
body.neo-retro-mode .footer-section,
body.neo-retro-mode .section-footer {
    background-color: #FFFFFF !important;
    background-image: none !important;
    color: #111111 !important;
    border-top: 3px solid #111111 !important;
}

body.neo-retro-mode footer h2,
body.neo-retro-mode footer h3,
body.neo-retro-mode footer h4,
body.neo-retro-mode footer p,
body.neo-retro-mode footer span,
body.neo-retro-mode footer a,
body.neo-retro-mode footer .footer-block__heading,
body.neo-retro-mode footer .copyright__content {
    color: #111111 !important;
    text-shadow: none !important;
}

body.neo-retro-mode footer a:hover {
    color: #E63946 !important;
    text-decoration: underline !important;
}

body.neo-retro-mode footer input,
body.neo-retro-mode footer textarea {
    background-color: #FFFFFF !important;
    border: 2px solid #111111 !important;
    color: #111111 !important;
    border-radius: 0 !important;
}

body.neo-retro-mode footer button {
    background-color: #111111 !important;
    color: #FFFFFF !important;
    border: 2px solid #111111 !important;
    border-radius: 0 !important;
}

body.neo-retro-mode footer button:hover {
    background-color: #E63946 !important;
    border-color: #111111 !important;
    color: #FFFFFF !important;
}

body.neo-retro-mode footer hr {
    border-color: #111111 !important;
    background-color: #111111 !important;
}

body.neo-retro-mode .announcement-bar,
body.neo-retro-mode .utility-bar,
body.neo-retro-mode #shopify-section-announcement-bar {
    background-color: #FFFFFF !important;
    background-image: none !important;
    border-bottom: 3px solid #111111 !important;
    color: #111111 !important;
}

body.neo-retro-mode .announcement-bar p,
body.neo-retro-mode .announcement-bar a,
body.neo-retro-mode .utility-bar p,
body.neo-retro-mode .utility-bar a,
body.neo-retro-mode .announcement-bar__message {
    color: #111111 !important;
}

body.neo-retro-mode .announcement-bar .icon,
body.neo-retro-mode .announcement-bar svg,
body.neo-retro-mode .utility-bar .icon,
body.neo-retro-mode .utility-bar svg {
    color: #111111 !important;
    fill: #111111 !important;
}

a,
button,
summary,
select, 
label[for], 
input[type="submit"], 
input[type="button"],
input[type="reset"], 
[role="button"],
.pointer-cursor,
.swiper-button-prev,
.swiper-button-next,
.sort-btn,
.slide-to-btn,
.toc-expand-button,
.finder-option,
.control-btn,
.table-button-link,
.carousel-nav-btn,
header a,
footer a,
.announcement-bar a,
.utility-bar a,
.header__menu-item,
.header__submenu .header__menu-item,
.menu-drawer__menu-item,
.header__icon,
.icon,
.social-list__link,
details summary,
.facets__button {
    cursor: url('/cdn/shop/files/BackgroundEraser_20251122_191254950.png?v=1763806693'), pointer !important;
}

body.neo-retro-mode header a:hover,
body.neo-retro-mode .header__menu-item:hover,
body.neo-retro-mode footer a:hover,
body.neo-retro-mode .header__icon:hover,
body.neo-retro-mode .icon:hover {
    color: inherit !important;
    fill: currentColor !important;
    text-decoration: none !important;
    transform: none !important;
}

body.neo-retro-mode .header__submenu,
body.neo-retro-mode .header__dropdown-menu,
body.neo-retro-mode .list-menu--disclosure,
body.neo-retro-mode .menu-drawer,
body.neo-retro-mode .menu-drawer__inner-container,
body.neo-retro-mode .header__dropdown {
    background-color: #FFFFFF !important; 
    border: 2px solid #111111 !important; 
    color: #111111 !important; 
    box-shadow: 4px 4px 0 rgba(0,0,0,0.1) !important; 
    border-radius: 0 !important; 
}

body.neo-retro-mode .header__submenu .header__menu-item,
body.neo-retro-mode .list-menu__item,
body.neo-retro-mode .menu-drawer__menu-item {
    color: #111111 !important;
    background: transparent !important;
}

body.neo-retro-mode .header__menu-item:hover,
body.neo-retro-mode .header__submenu .header__menu-item:hover,
body.neo-retro-mode .list-menu__item:hover,
body.neo-retro-mode .menu-drawer__menu-item:hover,
body.neo-retro-mode a:hover {
    color: #111111 !important; 
    background-color: rgba(17, 17, 17, 0.05) !important; 
    text-decoration: underline !important; 
}

body.neo-retro-mode .header__icon:hover .icon,
body.neo-retro-mode a:hover .icon {
    fill: #111111 !important;
    color: #111111 !important;
    transform: scale(1.1); 
}

figure.article-image.full-width,
figure.article-image.full-width img,
.swiper-slide img,
.product-slider img,
.product__modal-opener,
.product__media-toggle,
.product__media-icon,
.product-popup-modal__toggle,
.pswp__button--zoom,
.lightbox-opener,
button[aria-label*="Zoom"],
button[aria-label*="拡大"] {
  cursor: url('/cdn/shop/files/BackgroundEraser_20251123_134430327.png?v=1763873323'), zoom-in !important;
}

figure.article-image.full-width:hover,
figure.article-image.full-width img:hover,
.swiper-slide img:hover,
.product__modal-opener:hover,
.product__media-icon:hover {
  cursor: url('/cdn/shop/files/BackgroundEraser_20251123_134430327.png?v=1763873323'), zoom-in !important;
}

body.neo-retro-mode .article-content img {
    border: 2px solid #111111 !important;
    box-shadow: 6px 6px 0 #111111 !important;
    background-color: #FFFFFF !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 30px auto !important;
    border-radius: 0 !important;
}

/* 2. スライダー内画像の枠をリセット */
body.neo-retro-mode .article-content .article-slider-wrapper img,
body.neo-retro-mode .article-content .product-slider img,
body.neo-retro-mode .article-content .swiper-slide img {
    border: 1px solid #cccccc !important;
    box-shadow: none !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* 3. サムネイル・アイコンの枠を削除 */
body.neo-retro-mode .article-content .card-thumbnail img,
body.neo-retro-mode .article-content .icon img,
body.neo-retro-mode .article-content a.button-link img {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    background: transparent !important;
    margin: 0 !important;
}

body.neo-retro-mode #radar-chart,
body.neo-retro-mode canvas {
    border-radius: 0 !important;
    background-color: #FFFFFF !important;
}

body.neo-retro-mode .spec-chart-section {
    padding: 20px 40px !important;
    overflow: visible !important;
}

body.neo-retro-mode .performance-image {
    background-color: #FFFFFF !important;
    border: 2px solid #111111 !important;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.1) !important;
    border-radius: 0 !important;
}

body.dark-mode article.cafe-review-theme .button-link.primary-button,
body.dark-mode article.cafe-review-theme .button-link.primary-button span,
body.dark-mode article.cafe-review-theme .button-link.primary-button i {
    color: #252221 !important;
}

#focus-mode-toggle.active {
    color: var(--accent-primary-color, #d4a373);
}
body.neo-retro-mode #focus-mode-toggle.active {
    color: #E63946 !important;
}

/* PC View Logic (Width > 993px) */
@media (min-width: 993px) {

    /* 1. Hide Sidebar completely */
    body.focus-mode .article-sidebar {
        display: none !important;
        visibility: hidden !important;
    }

    /* 2. Expand Main Layout Wrapper to 1200px */
    body.focus-mode .article-layout {
        /* Gridを1カラムにしてサイドバーの空間を削除 */
        grid-template-columns: 1fr !important;
        display: block !important; /* または block にして強制的に広げる */
        max-width: 1200px !important;
        width: 95% !important; /* 画面端の余白確保 */
        
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* 3. Expand Article Content to fill the wrapper */
    body.focus-mode .article-content {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important; 
    }
    
    body.focus-mode .container-wrapper,
    body.focus-mode .article-section {
        max-width: 100% !important;
    }
}

body.neo-retro-mode .announcement-bar,
body.neo-retro-mode #announcement-bar,
body.neo-retro-mode .shopify-section-announcement-bar,
body.neo-retro-mode #shopify-section-announcement-bar {
    background-color: #FFFFFF !important;
    background-image: none !important;
    border-bottom: 3px solid #111111 !important;
    color: #111111 !important;
}

body.neo-retro-mode .announcement-bar a,
body.neo-retro-mode .announcement-bar p,
body.neo-retro-mode .announcement-bar__message,
body.neo-retro-mode .announcement-bar__link {
    color: #111111 !important;
    font-family: var(--font-body) !important;
    font-weight: bold !important;
    text-decoration: none !important;
}

body.neo-retro-mode .announcement-bar a:hover,
body.neo-retro-mode .announcement-bar__link:hover {
    color: #E63946 !important;
    text-decoration: underline !important;
    background-color: transparent !important;
}

/* Popups & Modals */
body.neo-retro-mode .newsletter-popup,
body.neo-retro-mode .popup-content,
body.neo-retro-mode .modal-content,
body.neo-retro-mode .modal__content,
body.neo-retro-mode #NewsletterPopup-newsletter,
body.neo-retro-mode div[class*="popup"],
body.neo-retro-mode div[class*="modal"] {
    background-color: #FFFFFF !important;
    border: 3px solid #111111 !important;
    box-shadow: 8px 8px 0 rgba(0,0,0,0.2) !important;
    border-radius: 0 !important;
    color: #111111 !important;
}

body.neo-retro-mode .newsletter-popup h2,
body.neo-retro-mode .newsletter-popup h3,
body.neo-retro-mode div[class*="popup"] h2,
body.neo-retro-mode div[class*="popup"] h3 {
    color: #111111 !important;
    font-family: var(--font-heading) !important;
    border-bottom: 2px solid #111111 !important;
    padding-bottom: 10px !important;
}

body.neo-retro-mode .newsletter-popup input,
body.neo-retro-mode div[class*="popup"] input {
    background-color: #F4F1EA !important;
    border: 2px solid #111111 !important;
    color: #111111 !important;
    border-radius: 0 !important;
}

body.neo-retro-mode .newsletter-popup button,
body.neo-retro-mode div[class*="popup"] button {
    background-color: #111111 !important;
    color: #FFFFFF !important;
    border: 2px solid #111111 !important;
    border-radius: 0 !important;
    font-weight: bold !important;
}

body.neo-retro-mode .newsletter-popup button:hover,
body.neo-retro-mode div[class*="popup"] button:hover {
    background-color: #E63946 !important;
    border-color: #111111 !important;
    transform: translate(-2px, -2px) !important;
    box-shadow: 4px 4px 0 #111111 !important;
}

body.neo-retro-mode .newsletter-popup__close,
body.neo-retro-mode .modal__close-button,
body.neo-retro-mode button.close {
    color: #111111 !important;
}
body.neo-retro-mode .newsletter-popup__close:hover,
body.neo-retro-mode .modal__close-button:hover {
    color: #E63946 !important;
    transform: scale(1.2);
}

.site-controls {
    overflow: visible !important; /* ツールチップが切れないように */
    z-index: 2147483647 !important; /* ★ここを修正：Web上で設定できる最大値にして最前面へ強制 */
    position: fixed !important; /* 念のため固定位置を強制 */
}

/* 2. ボタン自体の設定 */
.site-controls .control-btn {
    position: relative; /* ツールチップの基準点 */
    overflow: visible !important;
    opacity: 1 !important; /* 透明になっていないか確認 */
    visibility: visible !important; /* 非表示になっていないか確認 */
    z-index: auto;
}

/* 3. ツールチップ（吹き出し） */
.site-controls .control-btn:hover::after {
    /* HTMLのaria-labelの内容を表示 */
    content: attr(aria-label);
    
    /* 位置：ボタンの真上 */
    position: absolute;
    bottom: 110%;       
    right: 0;           /* ボタンの右端揃え */
    left: auto !important;
    margin-bottom: 5px; 
    
    /* デザイン */
    background-color: #333;
    color: #fff;
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 4px;
    white-space: nowrap;  
    pointer-events: none; 
    z-index: 99999 !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    
    /* アニメーション */
    opacity: 0;
    animation: tooltipSlideUp 0.2s forwards ease-out;
}

@keyframes tooltipSlideUp {
    0% { opacity: 0; transform: translateY(5px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 4. フォーカスモードON時のボタン色 */
#focus-mode-toggle.active {
    background-color: #E63946 !important;
    color: #FFFFFF !important;
    border-color: #111111 !important;
    box-shadow: inset 2px 2px 0 rgba(0,0,0,0.2) !important;
}

/* 5. ネオレトロモード時のツールチップ */
body.neo-retro-mode .site-controls .control-btn:hover::after {
    background-color: #FFFFFF !important;
    color: #111111 !important;
    border: 2px solid #111111 !important;
    border-radius: 0 !important;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.1) !important;
    font-weight: bold;
    font-family: var(--font-body);
}

.masking-tape {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%); /* JSで回転角度を上書きします */
    width: 120px;
    height: 35px;
    background-color: rgba(245, 245, 220, 0.85); /* 透けたベージュ */
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    z-index: 10;
    pointer-events: none;
    opacity: 0.9;
    /* テープの切れ目をギザギザにする */
    mask-image: radial-gradient(circle at 2px, transparent 2px, black 2.5px);
    mask-size: 10px 100%;
    mask-position: left;
    mask-repeat: repeat-y;
    border-left: 2px solid rgba(255,255,255,0.4);
    border-right: 2px solid rgba(255,255,255,0.4);
}

/* 見出しの手書き線 (SVG) */
.hand-drawn-line {
    display: block;
    width: 100%;
    height: 15px;
    margin-top: -10px;
    margin-bottom: 20px;
    pointer-events: none;
}

.hand-drawn-line path {
    fill: none;
    stroke: var(--accent-primary-color, #d4a373);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawLine 1.5s ease-out forwards;
}

@keyframes drawLine {
    to { stroke-dashoffset: 0; }
}

.spotlight-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* クリックを邪魔しない */
    z-index: 9999;
    /* カーソル位置を中心に光らせる (JSで座標更新) */
    background: radial-gradient(
        600px circle at var(--cursor-x, 50%) var(--cursor-y, 50%), 
        rgba(255, 255, 255, 0.03) 0%, 
        transparent 40%
    );
    opacity: 0;
    transition: opacity 0.5s ease;
}

body.dark-mode .spotlight-overlay {
    opacity: 1;
}

/* タイピングカーソル */
.typing-cursor {
    display: inline-block;
    width: 10px;
    height: 1em;
    background-color: var(--accent-primary-color, #d4a373);
    margin-left: 5px;
    animation: blinkCursor 0.8s steps(2) infinite;
    vertical-align: text-bottom;
}

@keyframes blinkCursor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

body:not(.neo-retro-mode):not(.dark-mode):not(.horror-theme):not(.terminal-mode) {
    background-image: url("https://www.transparenttextures.com/patterns/cream-paper.png") !important;
    background-repeat: repeat !important;
    background-color: #fdfbf5 !important;
}

body:not(.neo-retro-mode):not(.dark-mode):not(.horror-theme):not(.terminal-mode) .sidebar-related-posts,
body:not(.neo-retro-mode):not(.dark-mode):not(.horror-theme):not(.terminal-mode) .performance-card,
body:not(.neo-retro-mode):not(.dark-mode):not(.horror-theme):not(.terminal-mode) .software-feature-block,
body:not(.neo-retro-mode):not(.dark-mode):not(.horror-theme):not(.terminal-mode) .spec-chart-section,
body:not(.neo-retro-mode):not(.dark-mode):not(.horror-theme):not(.terminal-mode) .parts-showcase-card,
body:not(.neo-retro-mode):not(.dark-mode):not(.horror-theme):not(.terminal-mode) .verdict-card,
body:not(.neo-retro-mode):not(.dark-mode):not(.horror-theme):not(.terminal-mode) .recommend-card {
    border: none !important;
    box-shadow: 
        0 2px 5px rgba(0,0,0,0.03),
        0 10px 20px rgba(0,0,0,0.04),
        0 1px 0 rgba(255,255,255,0.8) inset !important;
    border-radius: 16px !important;
    background-color: #fff !important; /* カードの中は白く */
}

/* 記事本文のエリアは背景を透明に戻して馴染ませる */
body:not(.neo-retro-mode):not(.dark-mode):not(.horror-theme):not(.terminal-mode) .article-section {
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
}

/* 文字詰め（カーニング）を美しく */
body:not(.neo-retro-mode):not(.dark-mode):not(.horror-theme):not(.terminal-mode) {
    font-feature-settings: "palt";
    letter-spacing: 0.02em;
}

body.dark-mode .article-sidebar .table-of-contents,
body.dark-mode .performance-card,
body.dark-mode .software-feature-block,
body.dark-mode .spec-chart-section,
body.dark-mode .parts-showcase-card,
body.dark-mode .verdict-card,
body.dark-mode .recommend-card,
body.dark-mode .sidebar-related-posts, /* 関連記事も追加 */
body.dark-mode .product-specs,         /* スペック表も追加 */
body.dark-mode .switch-spec-card {     /* スイッチ詳細も追加 */
    background-color: rgba(30, 30, 30, 0.65) !important; /* 半透明の黒 */
    backdrop-filter: blur(12px) saturate(180%) !important; /* 背景をぼかす */
    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important; /* 極細の光る枠線 */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important; /* 深い影 */
    border-radius: 12px !important;
}

body.dark-mode .article-section {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.dark-mode h2,
body.dark-mode h3,
body.dark-mode .article-main-title span,
body.dark-mode a {
    text-shadow: 0 0 8px rgba(212, 163, 115, 0.4); 
}

body.dark-mode .button-link.primary-button,
body.dark-mode .slide-to-btn.active {
    box-shadow: 0 0 15px rgba(212, 163, 115, 0.5) !important; 
    border: 1px solid rgba(255,255,255,0.2) !important;
}

body.dark-mode .parallax-header::after {
    background: linear-gradient(to bottom, rgba(17,17,17,0.3), rgba(17,17,17,1)) !important;
}

#dark-mode-particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* 最背面 */
    pointer-events: none;
    opacity: 0;
    transition: opacity 1s ease;
}
body.dark-mode #dark-mode-particles {
    opacity: 1;
}

body.neo-retro-mode .hand-drawn-line,
body.neo-retro-mode .masking-tape {
    display: none !important;
}

body:not(.neo-retro-mode):not(.dark-mode):not(.horror-theme):not(.terminal-mode) :is(
    .gradient,         
    main, 
    .main-content, 
    .page-container, 
    .shopify-section,   
    footer, 
    .site-footer        
) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

html:not(.neo-retro-mode):not(.dark-mode):not(.horror-theme):not(.terminal-mode) {
    background-image: url("https://www.transparenttextures.com/patterns/cream-paper.png") !important;
    background-repeat: repeat !important;
    background-color: #fdfbf5 !important;
}

body:not(.neo-retro-mode):not(.dark-mode):not(.horror-theme):not(.terminal-mode) footer,
body:not(.neo-retro-mode):not(.dark-mode):not(.horror-theme):not(.terminal-mode) .site-footer,
body:not(.neo-retro-mode):not(.dark-mode):not(.horror-theme):not(.terminal-mode) footer p,
body:not(.neo-retro-mode):not(.dark-mode):not(.horror-theme):not(.terminal-mode) footer a {
    color: #5d4037 !important; /* カフェモードの文字色（こげ茶） */
}

body.dark-mode :is(
    .announcement-bar,
    .utility-bar,
    .header-wrapper,
    .sticky-header,
    header,
    footer,
    .site-footer
) {
    background-color: rgba(20, 20, 20, 0.75) !important;
    background-image: none !important;
    backdrop-filter: blur(10px) saturate(100%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    
    color: #d7ccc8 !important;
    z-index: 100 !important; 
}

body.dark-mode .announcement-bar p,
body.dark-mode .announcement-bar a {
    color: #d7ccc8 !important;
}
body:not(.neo-retro-mode) #focus-mode-toggle.active {
    background-color: transparent !important; /* 一旦リセット */
    color: inherit !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

body.neo-retro-mode #focus-mode-toggle.active {
    background-color: #E63946 !important;
    color: #FFFFFF !important;
    border: 2px solid #111111 !important;
    box-shadow: inset 2px 2px 0 rgba(0,0,0,0.2) !important;
}

body:not(.neo-retro-mode):not(.dark-mode):not(.horror-theme):not(.terminal-mode) .control-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #fdfbf5 !important; /* 紙色 */
    color: #8d6e63 !important; /* 茶色 */
    border: 2px solid #8d6e63 !important;
    box-shadow: 0 4px 0 #8d6e63, 0 6px 10px rgba(0,0,0,0.1) !important;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

body:not(.neo-retro-mode):not(.dark-mode):not(.horror-theme):not(.terminal-mode) .control-btn:hover {
    transform: translateY(-2px);
    background-color: #fff !important;
    color: #d4a373 !important; 
    border-color: #d4a373 !important;
    box-shadow: 0 6px 0 #d4a373, 0 8px 15px rgba(212, 163, 115, 0.3) !important;
}

body:not(.neo-retro-mode):not(.dark-mode):not(.horror-theme):not(.terminal-mode) .control-btn.active {
    background-color: #8d6e63 !important; 
    color: #fff !important;
    border-color: #8d6e63 !important;
    box-shadow: 0 2px 0 #5d4037, inset 0 2px 5px rgba(0,0,0,0.2) !important; 
    transform: translateY(2px) !important;
}

body.dark-mode .control-btn {
    width: 50px;
    height: 50px;
    border-radius: 12px !important; 
    background-color: rgba(30, 30, 30, 0.6) !important; 
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 0 10px rgba(0,0,0,0.5), inset 0 0 20px rgba(0,0,0,0.8) !important; 
    transition: all 0.3s ease !important;
}

body.dark-mode .control-btn:hover {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
    background-color: rgba(50, 50, 50, 0.8) !important;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.2) !important;
    transform: scale(1.05);
}

body.dark-mode .control-btn.active {
    background-color: rgba(212, 163, 115, 0.2) !important; 
    color: #d4a373 !important;
    border-color: #d4a373 !important;
    box-shadow: 0 0 20px rgba(212, 163, 115, 0.6), inset 0 0 10px rgba(212, 163, 115, 0.2) !important;
    transform: scale(1.0) !important;
}

body:not(.neo-retro-mode):not(.dark-mode):not(.horror-theme):not(.terminal-mode) #focus-mode-toggle.active {
    background-color: #8d6e63 !important;
    color: #FFFFFF !important;
    border: 2px solid #8d6e63 !important;
    box-shadow: 0 2px 0 #5d4037, inset 0 2px 5px rgba(0,0,0,0.2) !important;
    opacity: 1 !important;
}

body.dark-mode #focus-mode-toggle.active {
    background-color: rgba(212, 163, 115, 0.2) !important;
    color: #d4a373 !important;
    border: 1px solid #d4a373 !important;
    box-shadow: 0 0 20px rgba(212, 163, 115, 0.6), inset 0 0 10px rgba(212, 163, 115, 0.2) !important;
    opacity: 1 !important;
}

body.dark-mode .parallax-header::after {
    background: linear-gradient(to bottom, rgba(17,17,17,0.1), rgba(17,17,17,0.85)) !important;
    z-index: 1 !important; 
}

body.dark-mode .parallax-title-bg {
    color: rgba(255, 255, 255, 0.05) !important; 
    z-index: 0 !important;
}

body.dark-mode .parallax-content,
body.dark-mode .article-header {
    background-color: transparent !important;
    background: none !important;
    box-shadow: none !important;
    border: none !important;
    z-index: 2 !important; 
}

body.dark-mode .parallax-title-bg {
    color: rgba(255, 255, 255, 0.15) !important; 
    z-index: 0 !important;
}

body.dark-mode .parallax-header::after {
    background: linear-gradient(to bottom, rgba(17,17,17,0.1), rgba(17,17,17,0.6)) !important;
    z-index: 1 !important;
}

.faq-keyboard-section {
    margin-bottom: 15px;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}
.faq-keyboard-section > summary.keyboard-header {
    padding: 15px 20px;
    background-color: var(--bg);
    border-bottom: none;
    font-size: 1.1em;
}
.faq-keyboard-section[open] > summary.keyboard-header {
    border-bottom: 1px solid var(--border-color);
}
.faq-keyboard-section .keyboard-header h3 {
    margin: 0;
    font-size: 1em;
    display: inline;
}

.faq-brand-heading {
    margin-top: 40px;
    margin-bottom: 15px;
    padding-left: 10px;
    border-left: 5px solid var(--accent-primary-color);
    font-family: var(--font-heading);
    color: var(--text-heading);
}
.faq-brand-heading[style*="display: none"] + .faq-keyboard-section {
}

body.neo-retro-mode .aside-note {
    background-color: var(--surface) !important;
    border: 2px solid var(--ink-black) !important;
    box-shadow: 6px 6px 0 var(--ink-black) !important;
    color: var(--ink-black) !important;
    border-radius: 0 !important;
}

body.neo-retro-mode .aside-note .button-link {
    border-radius: 0 !important;
    box-shadow: 4px 4px 0 var(--ink-black) !important;
}

body.neo-retro-mode .aside-note .button-link:hover {
    transform: translate(2px, 2px) !important;
    box-shadow: 2px 2px 0 var(--ink-black) !important;
}

@media (max-width: 992px) {
  .site-controls #focus-mode-toggle {
    display: none !important;
  }
}

.warning-alert-box {
  background-color: #fff3cd;
  border: 1px solid #ffeeba;
  border-left: 5px solid #ffc107;
  color: #856404;
  padding: 20px;
  border-radius: var(--border-radius);
  margin: 30px 0;
  box-shadow: var(--shadow-sm);
}

.warning-alert-box h4 {
  margin-top: 0;
  color: #856404;
  font-family: var(--font-heading);
  display: flex;
  align-items: center;
  gap: 10px;
}

.special-pickup-section {
  background: linear-gradient(135deg, #fdfbf5 0%, #f4efff 100%); 
  border: 2px solid #9575cd; 
  border-radius: var(--border-radius);
  padding: 40px;
  margin: 60px 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(149, 117, 205, 0.15);
}

.special-pickup-label {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #9575cd;
  color: #fff;
  padding: 5px 20px;
  font-weight: bold;
  font-size: 0.9em;
  border-bottom-left-radius: 12px;
}

.ufo-content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
  margin-top: 20px;
}

@media (max-width: 768px) {
  .ufo-content-grid {
    grid-template-columns: 1fr;
  }
}

body:not(.neo-retro-mode):not(.dark-mode):not(.horror-theme):not(.terminal-mode) .warning-alert-box {
    background-color: rgba(255, 243, 205, 0.95) !important; 
    border-color: #ffeeba !important;
    color: #5d4037 !important; 
    border-left: 5px solid #ffc107 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

body:not(.neo-retro-mode):not(.dark-mode):not(.horror-theme):not(.terminal-mode) .warning-alert-box h4,
body:not(.neo-retro-mode):not(.dark-mode):not(.horror-theme):not(.terminal-mode) .warning-alert-box h3 {
    color: #3e2723 !important; 
}

body.dark-mode .warning-alert-box {
    background-color: rgba(66, 45, 10, 0.6) !important; 
    border: 1px solid #b88e25 !important;
    color: #ffecb3 !important; 
    border-left: 5px solid #ffca28 !important;
}

body.dark-mode .warning-alert-box h4 {
    color: #ffca28 !important; 
}

.parallax-title-bg h1 {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
}