/* DetoxNews 共通スタイル — digitaldetox.jp のトンマナを参考（白基調×ゴシック×黄マーカー×黒帯） */
:root{
  --ink:#262626; --ink2:#333232; --sub:#7a7a7a;
  --bg:#ffffff; --bg-gray:#f4f4f4; --line:#dcdcdc;
  --accent:#fb8902; --marker:#ffe600;
  --card:#ffffff; --on-ink:#ffffff; --cta-bg:#e3e9f2;
  --pill-night:#fb8902; --pill-rhythm:#4a90c4; --pill-type:#6ab04c; --pill-brain:#8e5bb8;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:"游ゴシック","Yu Gothic Medium","游ゴシック体",YuGothic,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  line-height:2;letter-spacing:.06em;font-size:15.5px;
}
a{color:var(--ink);text-decoration:none}
a:hover{opacity:.75}
img{max-width:100%}

/* ヘッダー */
.site-header{
  background:var(--card);border-bottom:1px solid var(--line);
  padding:18px 24px;display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:10;
}
.site-logo{font-size:22px;font-weight:700;letter-spacing:.08em;color:var(--ink)}
.site-logo .accent{color:var(--accent)}
.site-logo .sub{display:block;font-size:10px;font-weight:400;letter-spacing:.3em;color:var(--sub)}
.header-cta{
  border:1px solid var(--ink);border-radius:999px;background:var(--card);
  color:var(--ink);font-size:13px;font-weight:700;padding:9px 20px;letter-spacing:.06em;
}
.header-cta:hover{background:var(--ink);color:var(--on-ink);opacity:1}

/* パンくず */
.breadcrumb{
  background:var(--bg-gray);color:var(--sub);font-size:12px;
  padding:10px 24px;letter-spacing:.08em;
}
.breadcrumb a{color:var(--sub);text-decoration:underline}

.wrap{max-width:860px;margin:0 auto;padding:0 24px}

/* ヒーロー（トップ） */
.hero{padding:64px 0 48px;text-align:center}
.hero h1{font-size:30px;font-weight:700;letter-spacing:.1em;line-height:1.8;color:var(--ink2)}
.hero h1 .mk{background:linear-gradient(transparent 62%,var(--marker) 62%)}
.hero p.lead{color:var(--sub);margin-top:16px;font-size:14px;letter-spacing:.08em}

/* セクション見出し: 黄マーカー下線型 */
h2.sec{
  display:inline-block;font-size:21px;font-weight:700;letter-spacing:.12em;color:var(--ink2);
  background:linear-gradient(transparent 68%,var(--marker) 68%);
  padding:0 6px 2px;margin-bottom:28px;
}
section{padding:44px 0}
section.gray{
  background:var(--bg-gray);
  clip-path:polygon(0 3%,100% 0,100% 97%,0 100%);
  padding:72px 0;
}

/* 記事カード */
.card-list{display:grid;gap:18px}
.card{
  background:var(--card);border:1px solid var(--line);
  padding:24px 26px;display:block;color:var(--ink);transition:box-shadow .15s;
}
.card:hover{box-shadow:0 4px 14px rgba(0,0,0,.08);opacity:1}
.pill{
  display:inline-block;color:#fff;font-size:11px;font-weight:700;letter-spacing:.1em;
  padding:3px 12px;border-radius:999px;margin-bottom:10px;
}
.pill.night{background:var(--pill-night)}
.pill.rhythm{background:var(--pill-rhythm)}
.pill.type{background:var(--pill-type)}
.pill.brain{background:var(--pill-brain)}
.pill.ai{background:#2b7a78}
.pill.science{background:#3d5a80}
.pill.goods{background:#c0563a}
.pill.gadget{background:#6b7a3a}

/* 参考リンク */
.refs{border-top:1px solid var(--line);margin-top:32px;padding-top:14px;font-size:12.5px;color:var(--sub)}
.refs .t{font-weight:700;letter-spacing:.1em;margin-bottom:6px}
.refs a{color:var(--sub);text-decoration:underline;word-break:break-all}
.pill.soon{background:#b5b5b5}

/* 記事内画像 */
.article-hero{margin:26px 0}
.article-hero img{display:block;width:100%;border:1px solid var(--line)}
figure.illust{margin:26px 0}
figure.illust img{display:block;width:100%;border:1px solid var(--line)}
figure.illust figcaption{color:var(--sub);font-size:12px;margin-top:8px;text-align:center;letter-spacing:.08em}
.hero-visual{max-width:860px;margin:0 auto 8px;padding:0 24px}
.hero-visual img{display:block;width:100%}
.card h3{font-size:16.5px;line-height:1.8;font-weight:700;color:var(--ink2)}
.card p{color:var(--sub);font-size:13px;margin-top:8px;line-height:1.8}
.card.soon{opacity:.55;pointer-events:none}

/* 9領域グリッド */
.dom-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.dom{
  background:var(--card);border:1px solid var(--line);
  padding:18px 12px;text-align:center;font-size:13px;line-height:1.7;font-weight:700;color:var(--ink2);
}
.dom .num{display:block;color:var(--accent);font-size:11px;letter-spacing:.2em;font-weight:700;margin-bottom:4px}
/* モバイル改行制御: .br-sp=スマホのみ改行 / .br-pc=PCのみ改行 */
.br-sp{display:none}
@media(max-width:560px){
  .dom-grid{grid-template-columns:repeat(2,1fr)}
  .hero h1{font-size:21px;letter-spacing:.05em;line-height:1.9}
  .hero p.lead{font-size:13px;letter-spacing:.04em}
  .br-sp{display:inline}
  .br-pc{display:none}
  .site-header{padding:14px 16px}
  .site-logo{font-size:19px}
  .header-cta{white-space:nowrap;font-size:11.5px;padding:8px 13px;letter-spacing:.02em}
  .dom{font-size:12px;letter-spacing:.02em;padding:15px 8px}
}

/* 診断CTA: 淡色横長バナー型 */
.cta-block{
  background:var(--cta-bg);padding:36px 30px;text-align:center;margin:8px 0;
}
.cta-block .small{color:var(--ink2);font-size:13px;font-weight:700;letter-spacing:.1em}
.cta-block h3{font-size:20px;font-weight:700;margin:10px 0 8px;letter-spacing:.1em;color:var(--ink2)}
.cta-block p{color:var(--ink);font-size:13.5px;margin-bottom:22px}
.cta-btn{
  display:inline-block;background:var(--ink);color:var(--on-ink);font-weight:700;
  font-size:14.5px;padding:14px 44px;border-radius:6px;letter-spacing:.1em;
}
.cta-btn::after{content:"　▶";font-size:10px}
.cta-btn:hover{background:#000;opacity:1}
.cta-note{color:var(--sub);font-size:11.5px;margin-top:12px}

/* 記事本文 */
.article-head{padding:48px 0 8px}
.article-head h1{font-size:24px;line-height:1.9;font-weight:700;margin-top:12px;color:var(--ink2)}
.article-head .meta{color:var(--sub);font-size:12.5px;margin-top:12px}
article{padding-bottom:20px}
article h2{
  display:table;font-size:19px;font-weight:700;letter-spacing:.08em;line-height:1.7;
  background:var(--ink);color:var(--on-ink);padding:8px 18px;margin:48px 0 22px;
}
article h3{
  display:inline-block;font-size:16.5px;font-weight:700;margin:32px 0 14px;color:var(--ink2);
  background:linear-gradient(transparent 68%,var(--marker) 68%);padding:0 4px 2px;
}
article p{margin-bottom:20px}
article ul,article ol{margin:0 0 20px 26px}
article li{margin-bottom:8px}
article b{background:linear-gradient(transparent 68%,var(--marker) 68%);font-weight:700;padding:0 2px}

/* 囲みボックス（細枠＋角ライン風） */
.point{
  position:relative;border:1px solid var(--line);
  padding:22px 24px;margin:26px 0;font-size:14.5px;background:var(--card);line-height:1.9;
}
.point::before{
  content:"";position:absolute;top:-1px;left:24px;right:24px;height:1px;background:var(--card);
}
.point .pt{
  position:absolute;top:-12px;left:36px;background:var(--card);padding:0 10px;
  color:var(--ink2);font-size:12px;font-weight:700;letter-spacing:.2em;
}

/* フッター */
.site-footer{
  background:var(--ink);color:var(--on-ink);
  padding:36px 24px;text-align:center;font-size:12px;letter-spacing:.08em;margin-top:56px;
}
.site-footer .links{margin-bottom:14px}
.site-footer .links a{margin:0 12px;color:var(--on-ink);text-decoration:underline}
.site-footer .copy{color:#aaa}

/* カテゴリナビ */
.cat-nav{background:var(--card);border-bottom:1px solid var(--line);overflow-x:auto;-webkit-overflow-scrolling:touch}
.cat-nav-in{display:flex;gap:4px;max-width:860px;margin:0 auto;padding:8px 16px;white-space:nowrap}
.cat-nav a{font-size:12px;color:var(--ink2);padding:4px 12px;border-radius:999px;letter-spacing:.06em;flex:0 0 auto}
.cat-nav a:hover{background:var(--bg-gray);opacity:1}
.cat-nav a.on{background:var(--ink);color:var(--on-ink)}

/* カード日付 */
.card-date{color:var(--sub);font-size:11.5px;letter-spacing:.08em;margin-left:10px}

/* 月別アーカイブ */
.arch-month{margin-bottom:14px}
.arch-list{list-style:none;margin:0 0 8px;padding:0}
.arch-list li{border-bottom:1px solid var(--line);padding:14px 2px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.arch-list .d{color:var(--sub);font-size:12px;letter-spacing:.08em;flex:0 0 auto}
.arch-list .pill{margin-bottom:0}
.arch-list a{font-weight:700;font-size:14.5px;line-height:1.8}

/* 新着ページャー */
.pager{display:flex;flex-direction:column;align-items:center;gap:10px;margin:26px 0 6px}
.pager-row{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:nowrap}
.pager a,.pager .cur{min-width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:8px;font-size:14px;padding:0 10px}
.pager .cur{background:var(--ink);color:var(--on-ink);border-color:var(--ink);font-weight:700}
.pager a:hover{background:var(--bg-gray);opacity:1}
.pager .pn{border:none;letter-spacing:.04em;white-space:nowrap}
.pager .gap{color:var(--sub);padding:0 2px}
.pager .pos{font-size:11.5px;color:var(--sub);letter-spacing:.06em}

/* 比較表（スマホではカード型に組み替え） */
.cmp-wrap{overflow-x:auto;margin:18px 0}
.cmp-table{width:100%;border-collapse:collapse;font-size:13.5px;line-height:1.7}
.cmp-table th{text-align:left;padding:8px 6px;border-bottom:2px solid var(--ink);white-space:nowrap}
.cmp-table td{padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:top}
@media (max-width:640px){
  .cmp-table thead{display:none}
  .cmp-table,.cmp-table tbody,.cmp-table tr,.cmp-table td{display:block;width:100%}
  .cmp-table tr{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:12px;background:var(--card);box-sizing:border-box}
  .cmp-table td{border-bottom:none;padding:3px 0 3px 6em;display:block;position:relative;box-sizing:border-box}
  .cmp-table td::before{content:attr(data-label);position:absolute;left:0;top:5px;width:5.2em;color:var(--sub);font-size:12px;line-height:1.5}
  .cmp-table td:first-child{font-size:15px;padding:0 0 8px;border-bottom:1px solid var(--line);margin-bottom:6px}
  .cmp-table td:first-child::before{display:none}
}
/* 表の中はマーカーを使わず素の太字（カード表示での行またぎバー浮き対策） */
article .cmp-table b{background:none;padding:0}

/* アフィリエイト商品カード */
.aff-note{color:var(--sub);font-size:11.5px;margin-top:6px}
/* 本文中の注釈段落（価格の但し書きなど） */
article p.note{color:var(--sub);font-size:12.5px;line-height:1.8;margin:-8px 0 20px}
.aff-card{display:flex;gap:16px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:14px 0;background:var(--card)}
.aff-card .aff-img{flex:0 0 auto}
.aff-card .aff-img img{width:120px;height:120px;object-fit:contain;border-radius:6px;display:block}
.aff-body{min-width:0}
.aff-name{font-weight:700;font-size:13.5px;line-height:1.6;margin-bottom:6px}
.aff-price{color:var(--sub);font-size:12.5px;margin-bottom:10px}
.aff-btn{display:inline-block;background:#bf0000;color:#fff;font-size:12.5px;font-weight:700;padding:7px 16px;border-radius:999px;letter-spacing:.04em;margin-right:8px}
.aff-btn:hover{opacity:.85}
.aff-btn-amazon,.aff-btn[href*="amazon.co.jp"]{background:#ff9900;color:#111}
/* 画像を使えないAmazon単独商品用のカード（SiteStripeに画像リンクが無いため） */
.aff-card-noimg{gap:0}
.aff-card-noimg .aff-body{width:100%}
.aff-card-noimg .aff-name{font-size:14px}
.aff-meta{color:var(--sub);font-size:12px;margin:-4px 0 10px}
@media (max-width:480px){.aff-btn{padding:7px 11px;font-size:12px;margin:0 6px 6px 0}}
@media (max-width:480px){.aff-card{align-items:flex-start}.aff-card .aff-img img{width:88px;height:88px}}

/* 記事タイトルの主題＋副題 */
.article-head h1 .tsub{display:block;font-size:16px;font-weight:700;line-height:1.8;margin-top:10px;color:var(--ink)}
@media (max-width:640px){
  .article-head h1{font-size:19px;line-height:1.8;letter-spacing:.02em}
  .article-head h1 .tsub{font-size:13.5px;margin-top:8px}
}

/* よくある質問 */
details.faq{border:1px solid var(--line);border-radius:10px;margin:10px 0;background:var(--card)}
details.faq summary{padding:13px 16px;font-weight:700;font-size:14px;line-height:1.7;cursor:pointer;list-style:none;position:relative;padding-right:38px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"＋";position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--sub)}
details.faq[open] summary::after{content:"−"}
details.faq .a{padding:0 16px 14px;font-size:14px;line-height:2;color:var(--ink)}

/* 特集ガイド */
.guide-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.guide{display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 22px 26px;position:relative}
.guide:hover{opacity:1;border-color:var(--ink)}
.guide .g-label{display:inline-block;font-size:11px;color:var(--sub);letter-spacing:.08em;border:1px solid var(--line);border-radius:999px;padding:2px 10px;margin-bottom:10px}
.guide h3{font-size:15.5px;font-weight:700;line-height:1.7;margin-bottom:6px;color:var(--ink2)}
.guide p{font-size:12.5px;line-height:1.9;color:var(--ink)}
.guide::after{content:"→";position:absolute;right:18px;bottom:12px;color:var(--sub)}
@media (max-width:640px){.guide-list{grid-template-columns:1fr}}

/* ダークモード */
.header-right{display:flex;align-items:center}
.theme-toggle{background:none;border:1px solid var(--line);border-radius:999px;padding:8px 14px;cursor:pointer;font-size:12px;font-weight:700;letter-spacing:.06em;line-height:1;color:var(--ink);margin-right:10px;flex:0 0 auto;font-family:inherit;white-space:nowrap}
.theme-toggle:hover{border-color:var(--ink)}
@media(max-width:560px){.theme-toggle{padding:7px 9px;font-size:10.5px;letter-spacing:.02em;margin-right:6px}}
html[data-theme="dark"]{
  --ink:#e2e0dc; --ink2:#d4d2ce; --sub:#96948e;
  --bg:#141519; --bg-gray:#0f1013; --line:#34363c;
  --card:#1d1f24; --on-ink:#141519; --marker:#7a6a00; --cta-bg:#20262f;
}
html[data-theme="dark"] .article-hero img,
html[data-theme="dark"] figure.illust img,
html[data-theme="dark"] .hero-visual img{filter:brightness(.7);border-radius:8px}
html[data-theme="dark"] .aff-card .aff-img img{filter:brightness(.85)}
html[data-theme="dark"] .card:hover{box-shadow:0 4px 14px rgba(0,0,0,.5)}
html[data-theme="dark"] .cta-btn:hover{background:var(--ink2)}

html[data-theme="dark"] article h2{background:#262a31;color:var(--ink);border-left:4px solid var(--accent)}
html[data-theme="dark"] .site-footer{background:#0f1013;color:var(--ink)}
html[data-theme="dark"] .site-footer .links a{color:var(--ink)}
html[data-theme="dark"] .site-footer .copy{color:var(--sub)}
/* スマホ: 見出しマーカーを折り返し行ごとに引く（蛍光ペン方式） */
@media (max-width:640px){
  article h3{
    display:inline;
    -webkit-box-decoration-break:clone;
    box-decoration-break:clone;
  }
  article h3 + *{margin-top:12px}
  h2.sec{
    display:inline;
    -webkit-box-decoration-break:clone;
    box-decoration-break:clone;
  }
  h2.sec + *{margin-top:22px}
  article b{-webkit-box-decoration-break:clone;box-decoration-break:clone}
  /* .cmp-table はスマホでカード型になるので、素のtable由来のゼブラを消す */
  article table.cmp-table tr:nth-child(even) td{background:transparent}
}
/* 冒頭の結論ブロック（answer-first）。検索結果や生成AIに要点だけ抜かれても
   記事の答えが成立するよう、本文の先頭に置く。 */
.answer{
  border:1px solid var(--line);border-left:4px solid var(--accent);
  background:var(--bg-gray);padding:20px 22px;margin:0 0 26px;
  font-size:15px;line-height:1.95;
}
.answer .ans-label{
  display:block;color:var(--accent);font-size:11px;font-weight:700;
  letter-spacing:.2em;margin-bottom:8px;
}
.answer p{margin:0}
.answer p + p{margin-top:10px}
.answer ul{margin:10px 0 0;padding-left:1.2em}
.answer li{margin:4px 0}

/* 人気記事カードの順位表示（背景なしのテキストのみ） */
.card-rank{
  display:inline-block;color:var(--accent);font-size:12px;font-weight:700;
  margin-right:6px;letter-spacing:.1em;
}

/* 記事内の素の<table>（比較表）。PCは横罫線＋ゼブラの読みやすい表、スマホは横スクロール */
article table{border-collapse:collapse;width:100%;margin:20px 0;font-size:14px;line-height:1.8}
article table th,article table td{border:none;border-bottom:1px solid var(--line);padding:10px 14px;text-align:left;vertical-align:top}
article table tr:first-child th{border-bottom:2px solid var(--ink);background:var(--bg-gray)}
article table tr:nth-child(even) td{background:var(--bg-gray)}
article table td:first-child,article table th:first-child{white-space:nowrap}
@media (max-width:640px){
  article table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  article table th,article table td{min-width:8.5em}
  article table th:first-child,article table td:first-child{
    position:sticky;left:0;background:var(--card);box-shadow:1px 0 0 var(--line);min-width:6em;
  }
  article table th:first-child{background:var(--bg-gray)}
}


/* ===== indexカテゴリナビ：ワード群 cat-cloud（2026-08-30） ===== */
:root{
  --cnav-glow1:#ffe600;--cnav-glow2:#fb8902;
  --cnav-new:#fdf6d4;--cnav-ai:#e4f1f0;--cnav-science:#e8edf4;--cnav-goods:#f9e9e3;
  --cnav-gadget:#eef0e0;--cnav-brain:#f2eaf9;--cnav-rhythm:#e6f1f9;--cnav-night:#fef0dc;--cnav-arch:#f1f1f1;
}
html[data-theme="dark"]{
  --cnav-glow1:#ffe97a;--cnav-glow2:#ff9d2e;
  --cnav-new:#302c17;--cnav-ai:#1b2d2c;--cnav-science:#1e2632;--cnav-goods:#312219;
  --cnav-gadget:#262a1a;--cnav-brain:#2a2132;--cnav-rhythm:#1c2934;--cnav-night:#322616;--cnav-arch:#25262a;
}
@property --cnavAng{syntax:"<angle>";initial-value:0deg;inherits:false}
.cat-cloud{background:var(--card);border:1px solid var(--line);border-radius:34px;padding:10px 18px;position:relative}
.cat-cloud::before{content:"";position:absolute;inset:-1px;border-radius:34px;padding:2px;pointer-events:none;
  background:conic-gradient(from var(--cnavAng),transparent 0 78%,var(--cnav-glow1) 88%,var(--cnav-glow2) 96%,transparent 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:cnavSpin 5s linear infinite}
@keyframes cnavSpin{to{--cnavAng:360deg}}
.cat-cloud-in{display:flex;flex-wrap:wrap;gap:18px 16px;justify-content:center;align-items:center;padding:28px 0 20px;position:relative;z-index:1}
.cat-cloud a{color:var(--ink2);border-radius:999px;letter-spacing:.06em;display:inline-block;font-weight:700;
  transform:rotate(var(--r,0deg)) translateY(var(--y,0px));animation:cnavFloat var(--d,5s) ease-in-out infinite alternate}
.cat-cloud .s1{font-size:13.5px;padding:20px 28px}
.cat-cloud .s2{font-size:15.5px;padding:25px 35px}
.cat-cloud .s3{font-size:17.5px;padding:31px 43px}
.cat-cloud .mk{background-image:linear-gradient(transparent 60%,var(--marker) 60%);background-repeat:no-repeat;background-size:0% 100%;transition:background-size .25s ease}
.cat-cloud a:hover{animation:none;transform:rotate(0) translateY(0);transition:transform .25s ease;opacity:1}
.cat-cloud a:hover .mk{background-size:100% 100%}
@keyframes cnavFloat{
  from{transform:rotate(var(--r,0deg)) translateY(calc(var(--y,0px) - 5px))}
  to{transform:rotate(var(--r,0deg)) translateY(calc(var(--y,0px) + 5px))}
}
.cat-cloud a:nth-child(1){--r:-1.5deg;--y:2px;--d:4.6s}
.cat-cloud a:nth-child(2){--r:1deg;--y:-3px;--d:5.6s;animation-delay:-2s}
.cat-cloud a:nth-child(3){--r:2deg;--y:3px;--d:5.1s;animation-delay:-4s}
.cat-cloud a:nth-child(4){--r:-1deg;--y:-2px;--d:5.9s;animation-delay:-1s}
.cat-cloud a:nth-child(5){--r:1.5deg;--y:2px;--d:4.9s;animation-delay:-3s}
.cat-cloud a:nth-child(6){--r:-2deg;--y:-3px;--d:5.4s;animation-delay:-5s}
.cat-cloud a:nth-child(7){--r:1deg;--y:3px;--d:5.2s;animation-delay:-2.5s}
.cat-cloud a:nth-child(8){--r:-1.5deg;--y:-2px;--d:5.7s;animation-delay:-.5s}
.cat-cloud a:nth-child(9){--r:2deg;--y:2px;--d:4.8s;animation-delay:-3.5s}
.cat-cloud a{border:1.5px solid transparent}
.c-new{background:linear-gradient(var(--cnav-new),var(--cnav-new)) padding-box,linear-gradient(135deg,#e8c400,#fff3a0) border-box;box-shadow:0 0 10px rgba(232,196,0,.30)}
.c-ai{background:linear-gradient(var(--cnav-ai),var(--cnav-ai)) padding-box,linear-gradient(135deg,#2b7a78,#8fd6d2) border-box;box-shadow:0 0 10px rgba(43,122,120,.30)}
.c-science{background:linear-gradient(var(--cnav-science),var(--cnav-science)) padding-box,linear-gradient(135deg,#3d5a80,#9db8dd) border-box;box-shadow:0 0 10px rgba(61,90,128,.30)}
.c-goods{background:linear-gradient(var(--cnav-goods),var(--cnav-goods)) padding-box,linear-gradient(135deg,#c0563a,#f0a68e) border-box;box-shadow:0 0 10px rgba(192,86,58,.30)}
.c-gadget{background:linear-gradient(var(--cnav-gadget),var(--cnav-gadget)) padding-box,linear-gradient(135deg,#6b7a3a,#c0cf8a) border-box;box-shadow:0 0 10px rgba(107,122,58,.30)}
.c-brain{background:linear-gradient(var(--cnav-brain),var(--cnav-brain)) padding-box,linear-gradient(135deg,#8e5bb8,#d3b3f0) border-box;box-shadow:0 0 10px rgba(142,91,184,.30)}
.c-rhythm{background:linear-gradient(var(--cnav-rhythm),var(--cnav-rhythm)) padding-box,linear-gradient(135deg,#4a90c4,#a8d2ef) border-box;box-shadow:0 0 10px rgba(74,144,196,.30)}
.c-night{background:linear-gradient(var(--cnav-night),var(--cnav-night)) padding-box,linear-gradient(135deg,#fb8902,#ffd08a) border-box;box-shadow:0 0 10px rgba(251,137,2,.30)}
.c-arch{background:linear-gradient(var(--cnav-arch),var(--cnav-arch)) padding-box,linear-gradient(135deg,#9a9a9a,#d8d8d8) border-box;box-shadow:0 0 10px rgba(120,120,120,.25)}

html[data-theme="dark"] .c-new{box-shadow:0 0 10px rgba(255,214,0,.32)}
html[data-theme="dark"] .c-ai{box-shadow:0 0 10px rgba(80,200,196,.30)}
html[data-theme="dark"] .c-science{box-shadow:0 0 10px rgba(120,160,215,.30)}
html[data-theme="dark"] .c-goods{box-shadow:0 0 10px rgba(240,140,105,.30)}
html[data-theme="dark"] .c-gadget{box-shadow:0 0 10px rgba(170,190,110,.30)}
html[data-theme="dark"] .c-brain{box-shadow:0 0 10px rgba(190,140,240,.30)}
html[data-theme="dark"] .c-rhythm{box-shadow:0 0 10px rgba(120,185,240,.30)}
html[data-theme="dark"] .c-night{box-shadow:0 0 10px rgba(255,160,50,.32)}
html[data-theme="dark"] .c-arch{box-shadow:0 0 10px rgba(190,190,190,.25)}
@media (prefers-reduced-motion:reduce){.cat-cloud a{animation:none!important}.cat-cloud .mk{transition:none!important}.cat-cloud::before{animation:none!important}}
@media (max-width:480px){
  .cat-cloud-in{gap:14px 12px;padding:20px 4px 16px}
  .cat-cloud .s1{font-size:12px;padding:15px 22px}
  .cat-cloud .s2{font-size:13.5px;padding:19px 26px}
  .cat-cloud .s3{font-size:15px;padding:23px 31px}
}