@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Nunito:wght@700;900&display=swap');

/* === ウィンドウ開くアニメーション === */
@keyframes sat-win-open {
  from { opacity: 0; transform: scale(0.94) translateY(10px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}
@keyframes sat-win-close {
  from { opacity: 1; transform: scale(1)    translateY(0);    }
  to   { opacity: 0; transform: scale(0.94) translateY(10px); }
}
.win-opening {
  animation: sat-win-open 0.2s cubic-bezier(0.2, 0.8, 0.35, 1) both !important;
}
.win-closing {
  animation: sat-win-close 0.15s cubic-bezier(0.4, 0, 1, 1) both !important;
  pointer-events: none !important;
}

/* === 変数 === */
:root {
  --desktop-bg:   #2BAADC;
  --surface-bg:   #fff;
  --header-bg:    #1A8FC0;
  --cream-bg:     #EAEAD9;
  --border-sub:   #c0ccd5;
  --border-grid:  #fff;
  --accent-green: #5ab870;
  --accent-amber: #FFE033;
  --accent-red:   #FF4455;
  --text-dim:     #4a6080;
  --text-mid:     #2a3a5c;
  --font-mono:    'Share Tech Mono', monospace;
  --font-display: 'Nunito', sans-serif;
}

/* === 非表示 === */
#header, .header-container, #h-top,
#footer, .footer-container,
.pagination, .paging-navigation,
.nav-links, .page-numbers,
.panel-header,
.pagination-next-link {
  display: none !important;
}

/* === ベース === */
html, body {
  height: 100% !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--font-mono) !important;
}

#wrapper, .wrap,
#container, .container,
#content, .content {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  overflow: hidden !important;
  height: 100% !important;
}

/* === デスクトップ === */
#desktop {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  background: url('/wp-content/uploads/2026/06/Firefly_Photorealistic-vast-open-landscape-_dramatic-rolling-green-hills-with-bold-steep-slo-48042-scaled.jpg') center center / cover no-repeat !important;
}

/* 丘 */
.desktop-hill,
.desktop-hill2 {
  display: none !important;
}
.desktop-hill {
  position: absolute !important;
  bottom: 32px !important;
  left: 0 !important; right: 0 !important;
  height: 150px !important;
  background: radial-gradient(ellipse 120% 80% at 40% 100%, #7DC268, #5DAA46 40%, #4a9435) !important;
  pointer-events: none !important;
}
.desktop-hill2 {
  position: absolute !important;
  bottom: 32px !important;
  right: -30px !important;
  width: 45% !important;
  height: 120px !important;
  background: radial-gradient(ellipse 100% 70% at 60% 100%, #8BD073, #6AB855 60%, #5aa045) !important;
  border-radius: 50% 50% 0 0 !important;
  pointer-events: none !important;
}

/* 雲 */
.desktop-cloud {
  position: absolute !important;
  background: rgba(255,255,255,0.88) !important;
  border-radius: 40px !important;
  pointer-events: none !important;
  display: none !important;
}

/* === タスクバー === */
#taskbar {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important; right: 0 !important;
  height: 33px !important;
  background: linear-gradient(180deg, #6ab8f0 0%, #4a9ee0 8%, #2a72c8 30%, #1a5bb8 100%) !important;
  border-top: 1px solid #9ad4f8 !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 10px !important;
  gap: 8px !important;
  z-index: 50 !important;
}

#start-btn {
  background: linear-gradient(180deg, #6ecb45 0%, #3ea51c 45%, #2d8a0e 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 0 18px 0 14px !important;
  font-size: 13px !important;
  font-family: var(--font-ui) !important;
  font-style: italic !important;
  font-weight: bold !important;
  cursor: pointer !important;
  letter-spacing: 0.5px !important;
  height: 26px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 1px 0 4px rgba(0,0,0,0.3) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4) !important;
}
#start-btn:hover { background: linear-gradient(180deg, #80d855 0%, #4dbf28 45%, #3a9e18 100%) !important; }
#start-btn.active { background: linear-gradient(180deg, #3a9e18 0%, #2d8a0e 100%) !important; }

/* === スタートメニュー === */
#start-menu {
  position: absolute !important;
  bottom: 48px !important;
  left: 0 !important;
  width: 220px !important;
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(180,210,240,0.7) !important;
  border-radius: 8px 8px 0 0 !important;
  box-shadow: 2px -2px 16px rgba(20,80,160,0.18) !important;
  overflow: hidden !important;
  z-index: 51 !important;
}
.sm-header {
  background: linear-gradient(135deg, #1A8FC0 0%, #2BAADC 100%) !important;
  padding: 12px 14px !important;
}
.sm-site-name {
  color: #fff !important;
  font-size: 13px !important;
  font-family: var(--font-display) !important;
  font-weight: bold !important;
  letter-spacing: 1px !important;
}
.sm-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 4px 0 !important;
}
.sm-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 14px !important;
  font-size: 12px !important;
  color: var(--text-mid) !important;
  cursor: pointer !important;
  transition: background 0.1s !important;
}
.sm-item:hover {
  background: rgba(43,170,220,0.12) !important;
  color: var(--header-bg) !important;
}
.sm-icon {
  font-size: 16px !important;
  width: 22px !important;
  text-align: center !important;
}

.taskbar-divider {
  width: 1px !important;
  height: 26px !important;
  background: #8a7e6a !important;
  opacity: 0.4 !important;
}

.taskbar-task {
  background: linear-gradient(180deg, #4a8fd6 0%, #2d6dbf 60%, #1e5aad 100%) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  border-bottom-color: rgba(0,0,0,0.2) !important;
  border-radius: 3px !important;
  padding: 0 10px !important;
  font-size: 13px !important;
  color: #fff !important;
  font-style: normal !important;
  font-weight: normal !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  cursor: pointer !important;
  letter-spacing: 0.5px !important;
  font-family: var(--font-ui) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3) !important;
  min-width: 100px !important;
}
.taskbar-task.active { background: linear-gradient(180deg, #1e5aad 0%, #2d6dbf 100%) !important; box-shadow: inset 0 2px 3px rgba(0,0,0,0.3) !important; border-color: rgba(0,0,0,0.2) !important; }
.taskbar-task.tb-minimized { opacity: 0.55 !important; border-style: dashed !important; }
.win-btn-group { display: flex !important; align-items: center !important; gap: 3px !important; }
.win-minimize-btn { margin-right: 0 !important; }

#taskbar-wins {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex: 1 !important;
  overflow: hidden !important;
}

#taskbar-right {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 12px !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}

#t-weather {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  letter-spacing: 1px !important;
}
/* === デスクトップアイコン列 === */
#desktop-icons {
  position: absolute !important;
  top: 16px !important;
  left: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  z-index: 10 !important;
}
.desktop-icon {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 64px !important;
  padding: 6px 4px !important;
  cursor: pointer !important;
  border-radius: 4px !important;
  border: 1px solid transparent !important;
  transition: background 0.15s, border-color 0.15s !important;
  user-select: none !important;
}
.desktop-icon:hover {
  background: rgba(255,255,255,0.2) !important;
  border-color: rgba(255,255,255,0.35) !important;
}
.desktop-icon.active {
  background: rgba(42,58,92,0.35) !important;
  border-color: rgba(255,255,255,0.3) !important;
}
.desktop-icon-img { font-size: 28px !important; margin-bottom: 4px !important; }
.desktop-icon-label {
  font-size: 9px !important;
  color: #fff !important;
  text-align: center !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7) !important;
  font-family: var(--font-mono) !important;
  letter-spacing: 0.5px !important;
  line-height: 1.3 !important;
}

/* === 左ウィジェット列 === */
#widget-col {
  position: absolute !important;
  top: 12px !important;
  left: 84px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 168px !important;
  z-index: 10 !important;
}

/* ウィジェット小窓 共通 */
.widget-win {
  background: rgba(255,255,255,0.72) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1.5px solid rgba(255,255,255,0.65) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(20,100,180,0.15), inset 0 1px 0 rgba(255,255,255,0.9) !important;
}
.widget-win-title {
  background: linear-gradient(180deg, #D4EEFA 0%, #B8DFF5 50%, #9FCEED 100%) !important;
  color: #2a3a5c !important;
  font-size: 9px !important;
  letter-spacing: 2px !important;
  padding: 3px 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.widget-win-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #2a3a5c !important;
  flex-shrink: 0 !important;
}
.widget-win-body {
  padding: 8px 10px !important;
}

#weather-widget {
  display: none !important;
}

/* 天気 */
.weather-main {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 3px !important;
}
.weather-emoji { font-size: 22px !important; }
.weather-temp  { font-size: 20px !important; color: var(--text-mid) !important; font-weight: bold !important; }
.weather-sub   { font-size: 9px !important; color: var(--text-dim) !important; letter-spacing: 1px !important; }

/* WEEKLY MUSIC */
#np-widget { width: 230px !important; }
#np-widget .widget-win-body {
  background: linear-gradient(180deg, rgba(255,255,255,0.75) 0%, rgba(235,248,255,0.85) 100%) !important;
  padding: 10px !important;
}
#np-layout {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  margin-bottom: 7px !important;
}
#np-art {
  width: 54px !important;
  height: 54px !important;
  flex-shrink: 0 !important;
  background: linear-gradient(135deg, #3BAFE8 0%, #1578A8 100%) !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 24px !important;
  box-shadow: 0 2px 8px rgba(43,130,200,0.35), inset 0 1px 0 rgba(255,255,255,0.25) !important;
  color: rgba(255,255,255,0.9) !important;
  overflow: hidden !important;
}
#np-art-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 6px !important;
}
#np-info {
  flex: 1 !important;
  min-width: 0 !important;
}
.np-title {
  font-size: 11px !important;
  color: var(--text-mid) !important;
  margin-bottom: 3px !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.np-artist {
  font-size: 10px !important;
  color: var(--text-dim) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* プログレスバー */
.np-bar {
  height: 4px !important;
  background: rgba(43,130,200,0.15) !important;
  border-radius: 2px !important;
  overflow: hidden !important;
}
.np-progress {
  height: 100% !important;
  width: 35% !important;
  background: linear-gradient(90deg, #3BAFE8, #1FA0D0) !important;
  border-radius: 2px !important;
}
/* コントロールボタン */
#np-controls {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 7px !important;
}
.np-ctrl-btn {
  background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(215,237,252,0.88) 50%, rgba(185,220,248,0.8) 100%) !important;
  border: 1px solid rgba(140,190,225,0.55) !important;
  border-radius: 50% !important;
  width: 26px !important;
  height: 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 9px !important;
  cursor: pointer !important;
  box-shadow: 0 2px 5px rgba(43,130,200,0.18), inset 0 1px 0 rgba(255,255,255,0.9) !important;
  transition: all 0.15s !important;
  padding: 0 !important;
  line-height: 1 !important;
  color: #1578A8 !important;
}
.np-ctrl-btn:hover {
  background: linear-gradient(180deg, #fff 0%, rgba(205,232,252,0.95) 100%) !important;
  box-shadow: 0 3px 8px rgba(43,130,200,0.3), inset 0 1px 0 #fff !important;
}
.np-ctrl-play {
  background: linear-gradient(180deg, #7DD5F5 0%, #3DB8E8 45%, #1FA0D0 100%) !important;
  border: 1px solid rgba(20,140,190,0.4) !important;
  color: #fff !important;
  width: 32px !important;
  height: 32px !important;
  font-size: 11px !important;
  box-shadow: 0 3px 8px rgba(43,130,200,0.38), inset 0 1px 0 rgba(255,255,255,0.5) !important;
}
.np-ctrl-play:hover {
  background: linear-gradient(180deg, #90DFFB 0%, #52C6EF 45%, #28AEDE 100%) !important;
  box-shadow: 0 4px 10px rgba(43,130,200,0.45), inset 0 1px 0 rgba(255,255,255,0.6) !important;
}

/* === ブラウザウィンドウ === */
#browser-window {
  position: absolute !important;
  top: 50px !important;
  right: 200px !important;
  bottom: 150px !important;
  width: calc(100% - 500px) !important;
  background: rgba(255,255,255,0.88) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-radius: 8px !important;
  border: 1.5px solid rgba(255,255,255,0.7) !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 8px 32px rgba(20,100,180,0.22), inset 0 1px 0 rgba(255,255,255,0.8) !important;
  z-index: 20 !important;
  overflow: hidden !important;
}

/* Chrome風タブバー */
#browser-chrome {
  background: linear-gradient(180deg, #BFE3F8 0%, #9FCEED 50%, #84BDE6 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.75) !important;
  height: 35px !important;
  display: flex !important;
  align-items: flex-end !important;
  flex-shrink: 0 !important;
  cursor: move !important;
  user-select: none !important;
  padding-left: 6px !important;
}
#browser-tabs {
  display: flex !important;
  align-items: flex-end !important;
  flex: 1 !important;
  height: 100% !important;
  padding-top: 7px !important;
  overflow: hidden !important;
}
#browser-tab-active {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: linear-gradient(180deg, #fff 0%, #EDF7FF 100%) !important;
  border-radius: 8px 8px 0 0 !important;
  height: 33px !important;
  padding: 0 6px 0 10px !important;
  min-width: 150px !important;
  max-width: 240px !important;
  box-shadow: -2px -2px 5px rgba(43,130,200,0.1), 2px -2px 5px rgba(43,130,200,0.08), inset 0 1px 0 #fff !important;
}
#browser-tab-favicon { font-size: 12px !important; flex-shrink: 0 !important; line-height: 1 !important; }
#browser-tab-title {
  flex: 1 !important;
  font-size: 13px !important;
  color: #2a3a5c !important;
  font-family: var(--font-mono) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  letter-spacing: 0.3px !important;
}
.tab-close-btn {
  background: none !important;
  border: none !important;
  border-radius: 50% !important;
  width: 18px !important;
  height: 18px !important;
  font-size: 9px !important;
  color: #888 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: background 0.1s !important;
}
.tab-close-btn:hover { background: rgba(0,0,0,0.1) !important; color: #333 !important; }
#tab-new-btn {
  background: none !important;
  border: none !important;
  color: rgba(42,58,92,0.5) !important;
  font-size: 17px !important;
  cursor: pointer !important;
  border-radius: 50% !important;
  width: 26px !important;
  height: 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  margin-left: 4px !important;
  margin-bottom: 3px !important;
  transition: background 0.1s !important;
}
#tab-new-btn:hover { background: rgba(255,255,255,0.35) !important; }
#browser-winctrl {
  display: flex !important;
  align-items: stretch !important;
  flex-shrink: 0 !important;
  align-self: stretch !important;
}
.winctrl-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 100% !important;
  font-size: 10px !important;
  color: #2a3a5c !important;
  cursor: pointer !important;
  transition: background 0.1s !important;
  user-select: none !important;
}
.winctrl-btn:hover { background: rgba(0,0,0,0.1) !important; }
.winctrl-close:hover { background: #e81123 !important; color: #fff !important; }
.win-close {
  background: var(--desktop-bg) !important;
  border: none !important;
  border-radius: 3px !important;
  width: 18px !important;
  height: 18px !important;
  font-size: 10px !important;
  color: #fff !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.win-close:hover { background: var(--header-bg) !important; }
.win-close:not(.win-minimize-btn):hover { background: #e81123 !important; }

#browser-toolbar {
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(232,246,255,0.94) 100%) !important;
  padding: 2px 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  border-bottom: 1px solid rgba(140,195,230,0.35) !important;
  flex-shrink: 0 !important;
  box-shadow: 0 1px 3px rgba(43,130,200,0.08) !important;
}
.browser-nav-btn {
  background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(215,235,252,0.85) 100%) !important;
  border: 1px solid rgba(140,190,225,0.5) !important;
  border-radius: 50% !important;
  width: 24px !important;
  height: 24px !important;
  cursor: pointer !important;
  font-size: 11px !important;
  color: rgba(42,58,92,0.65) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 1px 4px rgba(43,130,200,0.15), inset 0 1px 0 rgba(255,255,255,0.9) !important;
  transition: all 0.15s !important;
  flex-shrink: 0 !important;
}
.browser-nav-btn:hover {
  background: linear-gradient(180deg, #fff 0%, rgba(200,228,248,0.95) 100%) !important;
  box-shadow: 0 2px 6px rgba(43,130,200,0.25), inset 0 1px 0 #fff !important;
}
#browser-url {
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(240,250,255,0.95) 100%) !important;
  border: 1px solid rgba(140,190,225,0.55) !important;
  border-radius: 12px !important;
  padding: 3px 12px !important;
  font-size: 12px !important;
  color: #4a6080 !important;
  flex: 1 !important;
  font-family: var(--font-mono) !important;
  letter-spacing: 1px !important;
  box-shadow: inset 0 1px 3px rgba(43,130,200,0.1) !important;
}

/* ブラウザ内サイトヘッダー */
#browser-site-header {
  background: linear-gradient(135deg, #3BAFE8 0%, #1A8FC0 60%, #1578A8 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 2px 8px rgba(20,80,160,0.2) !important;
  padding: 5px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-shrink: 0 !important;
}
#browser-site-title {
  font-size: 17px !important;
  color: #fff !important;
  letter-spacing: 4px !important;
  font-family: var(--font-mono) !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  display: block !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
}
#browser-site-title span { color: var(--accent-amber) !important; }
#browser-site-title::after {
  content: 'SATELLITE MISC. JOURNAL' !important;
  display: block !important;
  font-size: 10px !important;
  color: rgba(255,255,255,0.4) !important;
  letter-spacing: 3px !important;
  margin-top: 2px !important;
}

#browser-cat-nav {
  display: flex !important;
  gap: 2px !important;
  align-items: center !important;
}

.sat-cat-btn {
  background: none !important;
  border: none !important;
  border-radius: 12px !important;
  outline: none !important;
  color: rgba(255,255,255,0.65) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  padding: 5px 12px !important;
  cursor: pointer !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  transition: all 0.15s !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  text-align: center !important;
  vertical-align: middle !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
#desktop #browser-cat-nav *::after,
#desktop #browser-cat-nav *::before {
  content: '' !important;
  display: none !important;
  font-size: 0 !important;
  width: 0 !important;
  height: 0 !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.sat-cat-btn:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.15) !important;
}
.sat-cat-btn.active {
  color: #fff !important;
  background: rgba(255,255,255,0.22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 1px 3px rgba(0,0,0,0.15) !important;
}

/* サブナビバー */
#browser-subnav {
  background: linear-gradient(135deg, rgba(21,120,168,0.9) 0%, rgba(26,143,192,0.88) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15) !important;
  display: flex !important;
  align-items: center !important;
	justify-content: flex-end !important;
  gap: 4px !important;
  padding: 0 16px !important;
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.25s ease, padding 0.25s ease !important;
  flex-shrink: 0 !important;
}
#browser-subnav.open {
  max-height: 36px !important;
  padding: 5px 16px !important;
}
#browser-subnav-label {
  font-size: 10px !important;
  color: rgba(255,255,255,0.3) !important;
  letter-spacing: 2px !important;
  margin-right: 6px !important;
  white-space: nowrap !important;
}
.browser-sub-btn {
  background: none !important;
  border: none !important;
  border-radius: 12px !important;
  color: rgba(255,255,255,0.6) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  padding: 4px 12px !important;
  cursor: pointer !important;
  letter-spacing: 0 !important;
  transition: all 0.15s !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
.browser-sub-btn:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.15) !important;
}
.browser-sub-btn.active {
  color: #fff !important;
  background: rgba(255,255,255,0.22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 1px 3px rgba(0,0,0,0.15) !important;
}

/* ボタン間のセパレーター */
#browser-cat-nav .sat-cat-btn:not(:last-child)::after {
  content: '' !important;
  display: inline-block !important;
  width: 1px !important;
  height: 12px !important;
  background: rgba(255,255,255,0.15) !important;
  margin-left: 10px !important;
  vertical-align: middle !important;
}

/* ホーム画面 */
#browser-home {
  position: relative !important;
  z-index: 1 !important;
  max-width: 800px !important;
  margin: 0 auto !important;
}

.home-welcome {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  margin-bottom: 18px !important;
  height: 160px !important;
  background: linear-gradient(135deg, rgba(43,170,220,0.22) 0%, rgba(120,210,250,0.14) 60%, rgba(200,235,255,0.10) 100%) !important;
  border: 1px solid rgba(100,190,230,0.35) !important;
  box-shadow: 0 2px 16px rgba(43,170,220,0.12), inset 0 1px 0 rgba(255,255,255,0.5) !important;
}
#home-welcome-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}
.home-welcome-content {
  position: relative !important;
  z-index: 1 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 22px !important;
  text-align: center !important;
}
.home-welcome-title {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  font-size: 24px !important;
  color: var(--text-mid) !important;
  letter-spacing: 2px !important;
  margin-bottom: 8px !important;
  text-shadow: 0 1px 8px rgba(255,255,255,0.8) !important;
}
.home-welcome-title span { color: var(--accent-amber) !important; }
.home-welcome-desc {
  font-size: 12px !important;
  color: var(--text-dim) !important;
  line-height: 1.8 !important;
  letter-spacing: 1px !important;
  text-shadow: 0 1px 4px rgba(255,255,255,0.7) !important;
}
/* モバイル専用改行：デスクトップでは非表示 */
br.mob-br { display: none !important; }

.home-section-label {
  font-size: 11px !important;
  color: rgba(42,58,92,0.6) !important;
  letter-spacing: 2px !important;
  margin-bottom: 8px !important;
}

.home-tiles {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  margin-bottom: 18px !important;
}
.home-tile {
  background: linear-gradient(180deg, rgba(255,255,255,0.97) 0%, rgba(228,244,255,0.9) 100%) !important;
  border-radius: 10px !important;
  padding: 16px 8px !important;
  text-align: center !important;
  border: 1px solid rgba(140,190,225,0.45) !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  box-shadow: 0 2px 8px rgba(43,130,200,0.1), inset 0 1px 0 rgba(255,255,255,0.95) !important;
}
.home-tile:hover {
  background: linear-gradient(180deg, #fff 0%, rgba(210,238,255,0.95) 100%) !important;
  border-color: rgba(43,170,220,0.5) !important;
  box-shadow: 0 4px 14px rgba(43,130,200,0.2), inset 0 1px 0 #fff !important;
  transform: translateY(-2px) !important;
}
.home-tile-icon { font-size: 22px !important; margin-bottom: 6px !important; }
.home-tile-label { font-size: 13px !important; color: var(--text-mid) !important; font-weight: bold !important; font-family: var(--font-display) !important; }

#home-latest-list {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 14px !important;
  margin-top: 8px !important;
}
.home-latest {
  background: rgba(255,255,255,0.93) !important;
  border-radius: 8px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  border: 1.5px solid rgba(200,220,230,0.8) !important;
  cursor: pointer !important;
  overflow: hidden !important;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s, background 0.2s !important;
  text-decoration: none !important;
}
.home-latest:hover {
  border-color: var(--header-bg) !important;
  background: rgba(43,170,220,0.04) !important;
  box-shadow: 0 6px 20px rgba(20,100,180,0.12) !important;
  transform: translateY(-3px) !important;
}
.home-latest-thumb {
  width: 100% !important;
  height: 140px !important;
  background: #e0e0e0 !important;
  border-radius: 0 !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}
.home-latest-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.3s ease !important;
}
.home-latest:hover .home-latest-thumb img { transform: scale(1.06) !important; }
.home-latest-body { padding: 10px 12px 12px !important; }
.home-latest-title { font-size: 14px !important; color: var(--text-mid) !important; font-weight: bold !important; font-family: var(--font-display) !important; margin-bottom: 6px !important; line-height: 1.4 !important; }
.home-latest-date { font-size: 12px !important; color: #888 !important; margin-top: 4px !important; font-family: var(--font-mono) !important; }

/* 記事一覧エリア */
#browser-body {
  flex: 1 !important;
  background: #fff !important;
  overflow-y: auto !important;
  position: relative !important;
  padding: 10px !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--accent-green) #e8e8e8 !important;
}
#browser-body-grid {
  display: none !important;
}
#browser-cards {
  position: relative !important;
  z-index: 1 !important;
  display: grid;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 14px !important;
  max-width: 800px !important;
  margin: 0 auto !important;
  padding: 4px 0 !important;
}

/* 記事カード */
.browser-card {
  background: rgba(255,255,255,0.93) !important;
  border-radius: 8px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  border: 1.5px solid rgba(200,220,230,0.8) !important;
  cursor: pointer !important;
  overflow: hidden !important;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s, background 0.2s !important;
  text-decoration: none !important;
}
.browser-card:hover {
  border-color: var(--header-bg) !important;
  background: rgba(43,170,220,0.04) !important;
  box-shadow: 0 6px 20px rgba(20,100,180,0.12) !important;
  transform: translateY(-3px) !important;
}
.browser-card-thumb > *:not(img),
.home-latest-thumb > *:not(img) { display: none !important; }
.browser-card-thumb {
  width: 100% !important;
  height: 160px !important;
  border-radius: 0 !important;
  flex-shrink: 0 !important;
  background: #e0e0e0 !important;
  overflow: hidden !important;
}
.browser-card-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.3s ease !important;
}
.browser-card:hover .browser-card-thumb img { transform: scale(1.06) !important; }
.browser-card-body { flex: 1 !important; padding: 12px 14px 14px !important; }
.browser-card-title {
  font-size: 15px !important;
  color: var(--text-mid) !important;
  font-weight: bold !important;
  margin-bottom: 7px !important;
  line-height: 1.45 !important;
  font-family: var(--font-display) !important;
}
.browser-card-tag {
  display: inline-block !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(220,240,255,0.85) 100%) !important;
  color: #1578A8 !important;
  font-size: 10px !important;
  padding: 2px 9px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(43,170,220,0.35) !important;
  margin-bottom: 5px !important;
  font-family: var(--font-mono) !important;
  box-shadow: 0 1px 4px rgba(43,130,200,0.12), inset 0 1px 0 rgba(255,255,255,0.9) !important;
  letter-spacing: 0.5px !important;
}
.browser-card-date { font-size: 12px !important; color: #888 !important; font-family: var(--font-mono) !important; }

/* === カテゴリーヒーロー === */
#cat-hero {
  position: relative !important;
  margin: -10px -10px 18px -10px !important;
  height: 140px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}
#cat-hero-bg {
  position: absolute !important;
  inset: -10% !important;
  background-size: cover !important;
  background-position: center !important;
  filter: blur(8px) brightness(0.75) !important;
  transform: scale(1.08) !important;
  transition: background-image 0.4s !important;
}
#cat-hero-glass {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(180,225,255,0.12) 100%) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}
#cat-hero-icon {
  font-size: 36px !important;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3)) !important;
  line-height: 1 !important;
}
#cat-hero-name {
  font-size: 22px !important;
  font-weight: bold !important;
  font-family: var(--font-display) !important;
  color: #fff !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.4) !important;
  letter-spacing: 2px !important;
}

#browser-loading {
  text-align: center !important;
  padding: 24px !important;
  font-size: 12px !important;
  color: var(--text-dim) !important;
  letter-spacing: 2px !important;
}

/* ページネーション */
#browser-pagination {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 0 !important;
  position: relative !important;
  z-index: 1 !important;
}
.page-btn {
  background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(225,242,255,0.9) 100%) !important;
  border: 1px solid rgba(140,190,225,0.5) !important;
  border-radius: 12px !important;
  padding: 5px 14px !important;
  font-size: 12px !important;
  color: var(--text-mid) !important;
  cursor: pointer !important;
  font-family: var(--font-mono) !important;
  transition: all 0.15s !important;
  box-shadow: 0 2px 5px rgba(43,130,200,0.15), inset 0 1px 0 rgba(255,255,255,0.9) !important;
}
.page-btn:hover {
  background: linear-gradient(180deg, #fff 0%, rgba(205,232,252,0.95) 100%) !important;
  border-color: rgba(43,170,220,0.5) !important;
  color: var(--header-bg) !important;
  box-shadow: 0 3px 8px rgba(43,130,200,0.25), inset 0 1px 0 #fff !important;
}
.page-btn.disabled { opacity: 0.35 !important; pointer-events: none !important; }
.page-info { font-size: 12px !important; color: var(--text-mid) !important; letter-spacing: 1px !important; }

/* スキャンライン */
body::after {
  content: '' !important;
  position: fixed !important;
  top: 0; left: 0; right: 0; bottom: 0 !important;
  background: repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(0,80,120,0.012) 3px, rgba(0,80,120,0.012) 4px) !important;
  pointer-events: none !important;
  z-index: 9999 !important;
}

/* 記事詳細ページ（single.php用） */
body.single #desktop { display: none !important; }

/* === リサイズハンドル === */
.rh {
  position: absolute !important;
  z-index: 100 !important;
  background: transparent !important;
}
.rh-n  { top: 0 !important; left: 10px !important; right: 10px !important; height: 5px !important; cursor: n-resize !important; }
.rh-s  { bottom: 0 !important; left: 10px !important; right: 10px !important; height: 5px !important; cursor: s-resize !important; }
.rh-e  { top: 10px !important; right: 0 !important; bottom: 10px !important; width: 5px !important; cursor: e-resize !important; }
.rh-w  { top: 10px !important; left: 0 !important; bottom: 10px !important; width: 5px !important; cursor: w-resize !important; }
.rh-ne { top: 0 !important; right: 0 !important; width: 12px !important; height: 12px !important; cursor: ne-resize !important; }
.rh-se { bottom: 0 !important; right: 0 !important; width: 12px !important; height: 12px !important; cursor: se-resize !important; }
.rh-sw { bottom: 0 !important; left: 0 !important; width: 12px !important; height: 12px !important; cursor: sw-resize !important; }
.rh-nw { top: 0 !important; left: 0 !important; width: 12px !important; height: 12px !important; cursor: nw-resize !important; }

/* === 記事ビュー（SPA） === */
#browser-article {
  position: relative !important;
  z-index: 1 !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--accent-green) var(--desktop-bg) !important;
}
.ba-inner {
  max-width: min(920px, calc(100% - 48px)) !important;
  margin: 20px auto !important;
  padding: 0 24px 40px !important;
}
.ba-topbar {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}
.ba-back {
  display: inline-flex !important;
  align-items: center !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(215,235,252,0.85) 100%) !important;
  border: 1px solid rgba(140,190,225,0.55) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 5px rgba(43,130,200,0.15), inset 0 1px 0 rgba(255,255,255,0.9) !important;
  color: var(--text-dim) !important;
  font-size: 11px !important;
  padding: 3px 10px !important;
  cursor: pointer !important;
  font-family: var(--font-mono) !important;
  letter-spacing: 1px !important;
  flex-shrink: 0 !important;
  transition: border-color 0.15s !important;
}
.ba-back:hover {
  background: linear-gradient(180deg, #fff 0%, rgba(200,228,248,0.95) 100%) !important;
  border-color: rgba(43,170,220,0.5) !important;
  color: var(--header-bg) !important;
  box-shadow: 0 3px 8px rgba(43,130,200,0.25), inset 0 1px 0 #fff !important;
}
.ba-cat {
  display: inline-block !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(220,240,255,0.85) 100%) !important;
  color: #1578A8 !important;
  font-size: 11px !important;
  padding: 3px 12px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(43,170,220,0.35) !important;
  letter-spacing: 1px !important;
  margin-bottom: 10px !important;
  font-family: var(--font-mono) !important;
  box-shadow: 0 1px 4px rgba(43,130,200,0.12), inset 0 1px 0 rgba(255,255,255,0.9) !important;
  transition: all 0.15s !important;
}
.ba-cat:hover {
  background: linear-gradient(180deg, #fff 0%, rgba(200,235,255,0.95) 100%) !important;
  border-color: rgba(43,170,220,0.6) !important;
  box-shadow: 0 2px 8px rgba(43,130,200,0.22), inset 0 1px 0 #fff !important;
  transform: translateY(-1px) !important;
}
/* 前後ナビ */
.ba-pager {
  display: flex !important;
  gap: 12px !important;
  margin-top: 40px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(42,58,92,0.12) !important;
}
.ba-pager-btn {
  flex: 1 !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(230,244,255,0.9) 100%) !important;
  border: 1px solid rgba(140,190,225,0.5) !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 6px rgba(43,130,200,0.12), inset 0 1px 0 rgba(255,255,255,0.95) !important;
  padding: 12px 16px !important;
  cursor: pointer !important;
  font-family: var(--font-mono) !important;
  text-align: left !important;
  transition: border-color 0.15s, background 0.15s !important;
}
.ba-pager-btn:hover {
  background: linear-gradient(180deg, #fff 0%, rgba(210,238,255,0.95) 100%) !important;
  border-color: rgba(43,170,220,0.55) !important;
  box-shadow: 0 3px 10px rgba(43,130,200,0.2), inset 0 1px 0 #fff !important;
}
.ba-pager-next { text-align: right !important; }
.ba-pager-label {
  font-size: 10px !important;
  color: var(--text-dim) !important;
  letter-spacing: 1px !important;
  display: block !important;
  margin-bottom: 5px !important;
}
.ba-pager-ttl {
  font-size: 13px !important;
  color: var(--text-mid) !important;
  font-family: var(--font-display) !important;
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.ba-pager-empty { flex: 1 !important; }

.ba-title {
  font-family: var(--font-display) !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  color: var(--text-mid) !important;
  line-height: 1.4 !important;
  margin-bottom: 10px !important;
}
.ba-meta {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  font-size: 11px !important;
  color: var(--text-dim) !important;
  letter-spacing: 1px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid var(--border-sub) !important;
  margin-bottom: 20px !important;
  font-family: var(--font-mono) !important;
}
.ba-thumb {
  width: 100% !important;
  height: auto !important;
  border-radius: 5px !important;
  margin-bottom: 20px !important;
  display: block !important;
}
.ba-content {
  font-size: 16px !important;
  line-height: 1.9 !important;
  color: var(--text-mid) !important;
  font-family: var(--font-display) !important;
  background: rgba(255,255,255,0.88) !important;
  border-radius: 5px !important;
  padding: 24px 28px !important;
}
.ba-content p { margin-bottom: 16px !important; }
.ba-content h2 {
  font-size: 20px !important; font-weight: 900 !important;
  color: var(--text-mid) !important;
  margin: 24px 0 12px !important;
  padding-left: 10px !important;
  border-left: 4px solid var(--accent-amber) !important;
}
.ba-content h3 { font-size: 17px !important; font-weight: 700 !important; color: var(--text-mid) !important; margin: 20px 0 10px !important; }
.ba-content img { max-width: 100% !important; border-radius: 4px !important; margin: 10px 0 !important; }
.ba-content a { color: var(--accent-green) !important; }
.ba-content ul, .ba-content ol { padding-left: 22px !important; margin-bottom: 16px !important; }
.ba-content li { margin-bottom: 5px !important; }
.ba-content blockquote { border-left: 3px solid var(--border-sub) !important; padding-left: 14px !important; color: var(--text-dim) !important; margin: 16px 0 !important; }
.ba-content .wp-block-embed__wrapper,
.ba-content .wp-block-embed { position: relative !important; padding-bottom: 56.25% !important; height: 0 !important; overflow: hidden !important; }
.ba-content .wp-block-embed__wrapper iframe,
.ba-content .wp-block-embed iframe { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; }

/* === CDプレイヤーウィンドウ === */
#cd-player-window {
  position: absolute !important;
  top: 12px !important;
  left: 264px !important;
  width: 230px !important;
  background: rgba(255,255,255,0.88) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-radius: 8px !important;
  border: 1.5px solid rgba(255,255,255,0.7) !important;
  box-shadow: 0 8px 32px rgba(20,100,180,0.22), inset 0 1px 0 rgba(255,255,255,0.8) !important;
  z-index: 20 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  user-select: none !important;
}
#cdp-titlebar {
  background: linear-gradient(180deg, #D4EEFA 0%, #B8DFF5 50%, #9FCEED 100%) !important;
  height: 26px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 8px !important;
  border-bottom: 1px solid #ccb800 !important;
  cursor: move !important;
  flex-shrink: 0 !important;
}
#cdp-title-bar-text {
  font-size: 9px !important;
  color: #2a3a5c !important;
  flex: 1 !important;
  text-align: center !important;
  letter-spacing: 1px !important;
  font-family: var(--font-mono) !important;
}

/* CDディスク */
#cdp-disc-area {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 20px 0 12px !important;
}
#cdp-disc {
  width: 96px !important;
  height: 96px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 50% 50%,
    #3BAFE8 0%, #3BAFE8 10%,
    #FFE033 10%, #FFE033 16%,
    #ccd0e0 17%, #eeeef8 24%,
    #b8bcd0 32%, #d8dcea 47%,
    #acacc4 56%, #ccd0e0 70%,
    #b8bcd0 85%, #a0a4bc 100%) !important;
  box-shadow: 0 2px 16px rgba(20,100,180,0.3), inset 0 1px 4px rgba(255,255,255,0.5) !important;
  position: relative !important;
}
#cdp-disc::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important; left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 12px !important; height: 12px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.9) !important;
  border: 2px solid rgba(42,58,92,0.2) !important;
}
#cdp-disc.playing {
  animation: cdp-spin 4s linear infinite !important;
}
@keyframes cdp-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* トラック情報 */
#cdp-track-info {
  text-align: center !important;
  padding: 6px 16px 2px !important;
}
#cdp-track-no {
  font-size: 8px !important;
  color: rgba(42,58,92,0.38) !important;
  letter-spacing: 3px !important;
  font-family: var(--font-mono) !important;
  margin-bottom: 4px !important;
}
#cdp-track-title {
  font-size: 14px !important;
  font-weight: 900 !important;
  color: #2a3a5c !important;
  font-family: var(--font-display) !important;
  line-height: 1.35 !important;
  margin-bottom: 3px !important;
}
#cdp-track-artist {
  font-size: 9px !important;
  color: rgba(42,58,92,0.5) !important;
  font-family: var(--font-mono) !important;
  letter-spacing: 1px !important;
}

/* プログレスバー */
#cdp-progress-area {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 14px 4px !important;
}
#cdp-current, #cdp-duration {
  font-size: 8px !important;
  color: rgba(42,58,92,0.45) !important;
  font-family: var(--font-mono) !important;
  min-width: 26px !important;
}
#cdp-duration { text-align: right !important; }
#cdp-progress-bar {
  flex: 1 !important;
  height: 3px !important;
  background: rgba(42,58,92,0.12) !important;
  border-radius: 2px !important;
  cursor: pointer !important;
}
#cdp-progress-fill {
  height: 3px !important;
  background: var(--accent-amber) !important;
  border-radius: 2px !important;
  width: 0% !important;
}

/* コントロールボタン */
#cdp-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 10px 0 14px !important;
}
#cdp-controls button {
  background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(215,235,250,0.85) 50%, rgba(185,215,242,0.9) 100%) !important;
  border: 1px solid rgba(140,190,225,0.55) !important;
  border-radius: 50% !important;
  width: 30px !important; height: 30px !important;
  color: rgba(42,58,92,0.7) !important;
  cursor: pointer !important;
  font-size: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s !important;
  font-family: var(--font-mono) !important;
  box-shadow: 0 2px 5px rgba(43,130,200,0.18), inset 0 1px 0 rgba(255,255,255,0.9) !important;
}
#cdp-controls button:hover {
  background: linear-gradient(180deg, #fff 0%, rgba(200,228,248,0.95) 50%, rgba(165,205,238,0.95) 100%) !important;
  box-shadow: 0 3px 8px rgba(43,130,200,0.28), inset 0 1px 0 #fff !important;
}
#cdp-play {
  background: linear-gradient(180deg, #7DD5F5 0%, #3DB8E8 45%, #1FA0D0 100%) !important;
  color: #fff !important;
  width: 38px !important; height: 38px !important;
  font-size: 14px !important;
  border: 1px solid rgba(20,140,190,0.4) !important;
  box-shadow: 0 3px 8px rgba(43,130,200,0.35), inset 0 1px 0 rgba(255,255,255,0.5) !important;
}
#cdp-play:hover {
  background: linear-gradient(180deg, #9DE0FA 0%, #55C8F0 45%, #2BAADC 100%) !important;
  box-shadow: 0 4px 10px rgba(43,130,200,0.45), inset 0 1px 0 rgba(255,255,255,0.6) !important;
}

/* ボリューム */
#cdp-volume-area {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 16px 8px !important;
}
.cdp-vol-icon { font-size: 13px !important; }
#cdp-volume {
  flex: 1 !important;
  height: 4px !important;
  accent-color: #2BAADC !important;
  cursor: pointer !important;
}

/* プレイリスト */
#cdp-playlist {
  background: rgba(42,58,92,0.04) !important;
  border-top: 1px solid rgba(42,58,92,0.1) !important;
  max-height: 112px !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--accent-amber) transparent !important;
}
.cdp-track-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 12px !important;
  cursor: pointer !important;
  font-size: 10px !important;
  color: rgba(42,58,92,0.55) !important;
  font-family: var(--font-mono) !important;
  border-bottom: 1px solid rgba(42,58,92,0.06) !important;
  transition: background 0.1s !important;
}
.cdp-track-item:hover { background: rgba(42,58,92,0.05) !important; }
.cdp-track-item.active {
  background: rgba(255,224,51,0.22) !important;
  color: #2a3a5c !important;
}
.cdp-track-num {
  font-size: 8px !important;
  min-width: 16px !important;
  color: rgba(42,58,92,0.28) !important;
}
.cdp-track-item.active .cdp-track-num { color: #2a3a5c !important; }
.cdp-track-name { flex: 1 !important; }
.cdp-track-item.active .cdp-track-name::before { content: '♪ ' !important; }

/* === マスコット === */
#mascot {
  position: absolute !important;
  bottom: 33px !important;
  left: 200px !important;
  z-index: 49 !important;
  cursor: grab !important;
  user-select: none !important;
  text-align: center !important;
  width: 105px !important;
}
#mascot-char {
  display: block !important;
  width: 120px !important;
  height: 60px !important;
  image-rendering: pixelated !important;
  image-rendering: crisp-edges !important;
}
#mascot-reset-btn {
  background: none !important;
  border: none !important;
  font-size: 18px !important;
  cursor: pointer !important;
  padding: 0 6px !important;
  opacity: 0.8 !important;
  transition: opacity 0.15s !important;
  line-height: 1 !important;
}
#mascot-reset-btn:hover { opacity: 1 !important; }
#mascot-bubble {
  position: absolute !important;
  bottom: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: rgba(255,255,255,0.96) !important;
  border: 1.5px solid #c0ccd5 !important;
  border-radius: 8px !important;
  padding: 3px 9px !important;
  font-size: 10px !important;
  white-space: nowrap !important;
  display: none !important;
  color: #2a3a5c !important;
  font-family: var(--font-mono) !important;
  margin-bottom: 6px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
  pointer-events: none !important;
}
#mascot-bubble::after {
  content: '' !important;
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  border: 5px solid transparent !important;
  border-top-color: rgba(255,255,255,0.96) !important;
}
#mascot-bubble.show { display: block !important; }

/* === ターミナルウィンドウ === */
#terminal-window {
  position: absolute !important;
  top: 80px !important;
  left: 300px !important;
  width: 540px !important;
  height: 340px !important;
  background: #0a1428 !important;
  border-radius: 8px !important;
  border: 1.5px solid rgba(255,255,255,0.15) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05) !important;
  overflow: hidden !important;
  z-index: 20 !important;
  display: flex !important;
  flex-direction: column !important;
  user-select: none !important;
}
#term-titlebar {
  background: linear-gradient(180deg, #D4EEFA 0%, #B8DFF5 50%, #9FCEED 100%) !important;
  height: 26px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 8px !important;
  border-bottom: 1px solid #ccb800 !important;
  cursor: move !important;
  flex-shrink: 0 !important;
  font-size: 9px !important;
  color: #2a3a5c !important;
  letter-spacing: 1px !important;
  font-family: var(--font-mono) !important;
  justify-content: space-between !important;
}
#term-body {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  cursor: text !important;
  padding: 8px !important;
}
#term-output {
  flex: 1 !important;
  overflow-y: auto !important;
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: #c8d8e8 !important;
  scrollbar-width: thin !important;
  scrollbar-color: #2a3a5c transparent !important;
}
.term-line { white-space: pre-wrap !important; word-break: break-all !important; }
.tc-green  { color: #5ab870 !important; }
.tc-dim    { color: rgba(200,216,232,0.4) !important; }
.tc-error  { color: #e8873a !important; }
.tc-input  { color: rgba(200,216,232,0.55) !important; }
#term-input-line {
  display: flex !important;
  align-items: center !important;
  padding-top: 4px !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  margin-top: 4px !important;
  flex-shrink: 0 !important;
}
.term-prompt {
  color: #5ab870 !important;
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  flex-shrink: 0 !important;
}
#term-input {
  flex: 1 !important;
  background: none !important;
  border: none !important;
  outline: none !important;
  color: #c8d8e8 !important;
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  caret-color: #5ab870 !important;
}

/* === スネークゲームウィンドウ === */
#game-window {
  position: absolute !important;
  top: 80px !important;
  left: 640px !important;
  width: 308px !important;
  background: rgba(255,255,255,0.88) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-radius: 8px !important;
  border: 1.5px solid rgba(255,255,255,0.7) !important;
  box-shadow: 0 8px 32px rgba(20,100,180,0.22), inset 0 1px 0 rgba(255,255,255,0.8) !important;
  overflow: hidden !important;
  z-index: 20 !important;
  display: flex !important;
  flex-direction: column !important;
  user-select: none !important;
}
#game-titlebar {
  background: linear-gradient(180deg, #D4EEFA 0%, #B8DFF5 50%, #9FCEED 100%) !important;
  height: 26px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 8px !important;
  border-bottom: 1px solid #ccb800 !important;
  cursor: move !important;
  flex-shrink: 0 !important;
  font-size: 9px !important;
  color: #2a3a5c !important;
  letter-spacing: 1px !important;
  font-family: var(--font-mono) !important;
  justify-content: space-between !important;
}
#game-body {
  padding: 10px 14px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
}
#game-score {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  color: #2a3a5c !important;
  letter-spacing: 2px !important;
  width: 100% !important;
}
#game-canvas { display: block !important; border: 1px solid rgba(42,58,92,0.15) !important; border-radius: 4px !important; }
#game-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  border-radius: 0 0 6px 6px !important;
}
#game-msg {
  font-family: var(--font-mono) !important;
  font-size: 18px !important;
  color: #2a3a5c !important;
  letter-spacing: 4px !important;
  text-align: center !important;
  white-space: pre !important;
}
#game-start {
  background: linear-gradient(180deg, #FFF8AA 0%, #FFE866 45%, #F5D020 100%) !important;
  border: 1px solid rgba(180,140,0,0.2) !important;
  border-radius: 6px !important;
  box-shadow: 0 3px 8px rgba(200,160,0,0.3), inset 0 1px 0 rgba(255,255,255,0.6) !important;
  color: #2a3a5c !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  padding: 6px 20px !important;
  cursor: pointer !important;
  letter-spacing: 2px !important;
  font-weight: bold !important;
}
#game-start:hover {
  background: linear-gradient(180deg, #FFFBC0 0%, #FFED80 45%, #F5D530 100%) !important;
  box-shadow: 0 4px 12px rgba(200,160,0,0.4), inset 0 1px 0 rgba(255,255,255,0.7) !important;
}
#game-dpad {
  display: grid !important;
  grid-template-columns: 38px 38px 38px !important;
  grid-template-rows: 34px 34px !important;
  gap: 3px !important;
  margin-top: 8px !important;
}
#gd-up    { grid-column: 2 !important; grid-row: 1 !important; }
#gd-left  { grid-column: 1 !important; grid-row: 2 !important; }
#gd-down  { grid-column: 2 !important; grid-row: 2 !important; }
#gd-right { grid-column: 3 !important; grid-row: 2 !important; }
.gd-btn {
  background: rgba(42,58,92,0.06) !important;
  border: 1px solid rgba(42,58,92,0.2) !important;
  border-radius: 4px !important;
  color: #2a3a5c !important;
  cursor: pointer !important;
  font-size: 12px !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.1s !important;
}
.gd-btn:hover  { background: rgba(255,224,51,0.35) !important; border-color: var(--accent-amber) !important; color: #2a3a5c !important; }
.gd-btn:active { background: rgba(255,224,51,0.6) !important; }
#game-hint {
  font-size: 8px !important;
  color: rgba(42,58,92,0.35) !important;
  font-family: var(--font-mono) !important;
  letter-spacing: 1px !important;
  margin-top: 6px !important;
  text-align: center !important;
}

/* === カレンダーウィンドウ === */
#calendar-window {
  position: absolute !important;
  top: 80px !important;
  right: 60px !important;
  width: 400px !important;
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-radius: 8px !important;
  border: 1.5px solid rgba(255,255,255,0.7) !important;
  box-shadow: 0 4px 20px rgba(20,100,180,0.18), inset 0 1px 0 rgba(255,255,255,0.9) !important;
  z-index: 20 !important;
  display: flex !important;
  flex-direction: column !important;
  user-select: none !important;
  overflow: hidden !important;
}
#cal-titlebar {
  background: linear-gradient(180deg, #D4EEFA 0%, #B8DFF5 50%, #9FCEED 100%) !important;
  height: 26px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 8px !important;
  cursor: move !important;
  flex-shrink: 0 !important;
  font-size: 12px !important;
  color: #2a3a5c !important;
  letter-spacing: 2px !important;
  font-family: var(--font-mono) !important;
  justify-content: space-between !important;
}
#cal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 7px 10px !important;
  background: rgba(42,58,92,0.07) !important;
  border-bottom: 1px solid rgba(42,58,92,0.12) !important;
  flex-shrink: 0 !important;
}
#cal-month-label {
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  color: #2a3a5c !important;
  letter-spacing: 1px !important;
}
.cal-nav {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  font-size: 13px !important;
  color: #2a3a5c !important;
  padding: 1px 4px !important;
  line-height: 1 !important;
}
.cal-nav:hover { color: var(--accent-amber) !important; }
#cal-body { padding: 8px !important; }

/* ==========================================
   管理人ボタン
   ========================================== */
.sat-about-btn {
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 12px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: bold !important;
  color: var(--text-mid) !important;
  background: rgba(255,255,255,0.55) !important;
  border: 1px solid rgba(180,210,240,0.6) !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
  white-space: nowrap !important;
  user-select: none !important;
}
.sat-about-btn:hover { background: rgba(255,255,255,0.82) !important; }
.sat-about-btn.active {
  background: rgba(255,255,255,0.92) !important;
  color: var(--header-bg) !important;
  border-color: var(--header-bg) !important;
}

/* ==========================================
   管理人ページ
   ========================================== */
#browser-about { padding: 0 !important; }
.about-wrap { padding: 20px 22px 40px !important; max-width: 620px !important; margin: 0 auto !important; }

.about-header {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 18px !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.7) 0%, rgba(210,235,255,0.5) 100%) !important;
  border: 1px solid rgba(180,210,240,0.7) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(4px) !important;
  margin-bottom: 22px !important;
}
.about-avatar img {
  width: 88px !important;
  height: 88px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid rgba(180,210,240,0.8) !important;
  display: block !important;
}
.about-adminname { font-size: 13px !important; color: var(--text-dim) !important; margin-bottom: 2px !important; }
.about-sitename { font-size: 20px !important; font-weight: bold !important; color: var(--text-mid) !important; line-height: 1.3 !important; }
.about-sub { font-size: 10px !important; color: var(--text-dim) !important; letter-spacing: 0.06em !important; margin-bottom: 8px !important; font-family: var(--font-mono) !important; }
.about-twitter {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 13px !important;
  font-weight: bold !important;
  color: var(--header-bg) !important;
  text-decoration: none !important;
  padding: 3px 10px !important;
  background: rgba(26,143,192,0.1) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(26,143,192,0.25) !important;
  transition: background 0.15s !important;
}
.about-twitter:hover { background: rgba(26,143,192,0.2) !important; }
.about-twitter-icon { width: 14px !important; height: 14px !important; flex-shrink: 0 !important; }

.about-section { margin-bottom: 22px !important; }
.about-section-title {
  font-size: 11px !important;
  font-weight: bold !important;
  letter-spacing: 0.12em !important;
  color: var(--header-bg) !important;
  font-family: var(--font-mono) !important;
  border-bottom: 1px solid rgba(26,143,192,0.25) !important;
  padding-bottom: 4px !important;
  margin-bottom: 10px !important;
  text-transform: uppercase !important;
}
.about-section p { font-size: 13px !important; color: var(--text-mid) !important; line-height: 1.75 !important; margin: 0 0 6px !important; }
.about-en { color: var(--text-dim) !important; font-size: 11px !important; font-style: italic !important; }
.about-table { width: 100% !important; border-collapse: collapse !important; font-size: 13px !important; }
.about-table th {
  text-align: left !important;
  width: 110px !important;
  padding: 5px 8px 5px 0 !important;
  color: var(--text-dim) !important;
  font-weight: normal !important;
  vertical-align: top !important;
  white-space: nowrap !important;
}
.about-table td { padding: 5px 0 !important; color: var(--text-mid) !important; vertical-align: top !important; }
.about-table tr { border-bottom: 1px solid rgba(180,210,240,0.3) !important; }
.about-link { color: var(--header-bg) !important; text-decoration: none !important; }
.about-link:hover { text-decoration: underline !important; }

/* ==========================================
   レスポンシブ (タブレット・スマホ)
   ========================================== */

/* Cocoonモバイルフッターナビ 常に非表示 */
.mobile-footer-menu-buttons,
.mobile-menu-buttons { display: none !important; }

/* タブレット以下共通 (≤1024px) */
@media (max-width: 1024px) {
  /* ウィジェット・アイコン・マスコット非表示 */
  #desktop-icons { display: none !important; }
  #widget-col    { display: none !important; }
  #mascot        { display: none !important; }
  /* ブラウザ以外のウィンドウ非表示 (JS inline より !important が優先) */
  #terminal-window,
  #cd-player-window,
  #game-window,
  #calendar-window { display: none !important; }
  /* リサイズハンドル・タスクバー非表示 */
  .rh      { display: none !important; }
  #taskbar { display: none !important; }
  /* ブラウザウィンドウを完全フルスクリーン化 */
  #browser-window {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    border-radius: 0 !important;
    min-width: unset !important;
    min-height: unset !important;
    box-shadow: none !important;
  }
  /* カテゴリーナビ: 折り返し許可 */
  #browser-cat-nav {
    flex-wrap: wrap !important;
    gap: 4px 6px !important;
    padding: 5px 10px !important;
  }
}

/* スマホ (≤768px) */
@media (max-width: 768px) {
  /* ブラウザ chrome コンパクト化 */
  #browser-chrome { padding: 3px 6px 0 !important; gap: 3px !important; }
  #browser-tab-active { padding: 3px 10px !important; }
  #browser-tab-title  { font-size: 10px !important; }
  #browser-toolbar { padding: 3px 8px !important; gap: 4px !important; }
  .browser-nav-btn { width: 20px !important; height: 20px !important; font-size: 8px !important; }
  #browser-url { font-size: 9px !important; padding: 2px 8px !important; }

  /* サイトヘッダー コンパクト化 */
  #browser-site-header { padding: 10px 14px !important; gap: 8px !important; }
  .browser-site-title  { font-size: 20px !important; }
  .browser-site-sub    { font-size: 9px !important; }

  /* カテゴリーナビ */
  .sat-cat-btn { font-size: 11px !important; padding: 3px 10px !important; }

  /* ホーム: 最新記事グリッド サムネイル高さ調整 */
  .home-latest-thumb { height: 180px !important; }

  /* カード一覧グリッド サムネイル高さ調整 */
  .browser-card-thumb { height: 180px !important; }

  /* 記事ビュー */
  .ba-inner { padding: 12px 14px 24px !important; }
  .ba-title  { font-size: 20px !important; }
  .ba-content { font-size: 15px !important; }
  .ba-pager   { flex-direction: column !important; gap: 8px !important; }
  .ba-pager-btn { width: 100% !important; }
}

/* スマホ (≤600px): グリッド2列 */
@media (max-width: 600px) {
  /* モバイル専用改行を表示 */
  br.mob-br { display: inline !important; }

  /* ウェルカムエリア：行が増えるので高さを拡張 */
  .home-welcome { height: 220px !important; }
  .home-welcome-title { font-size: 18px !important; margin-bottom: 6px !important; }
  .home-welcome-desc { font-size: 11px !important; line-height: 1.65 !important; }
  #home-latest-list {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  #browser-cards {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    max-width: 100% !important;
  }
  .home-latest-thumb { height: 110px !important; }
  .browser-card-thumb { height: 110px !important; }
  .browser-card-body { padding: 6px 8px 8px !important; }
  .browser-card-title { font-size: 12px !important; }
  .browser-card-tag { font-size: 10px !important; padding: 1px 7px !important; }
  .browser-card-date { font-size: 10px !important; }
  .home-latest-title { font-size: 12px !important; }
  .home-latest-meta { font-size: 10px !important; }
}
#cal-weekdays {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  margin-bottom: 4px !important;
}
#cal-weekdays span {
  text-align: center !important;
  font-size: 12px !important;
  color: rgba(42,58,92,0.5) !important;
  font-family: var(--font-mono) !important;
  padding: 2px 0 !important;
}
#cal-days { display: grid !important; grid-template-columns: repeat(7, 1fr) !important; gap: 2px !important; }
.cal-day, .cal-blank {
  text-align: center !important;
  font-size: 13px !important;
  font-family: var(--font-mono) !important;
  color: #2a3a5c !important;
  padding: 6px 2px !important;
  border-radius: 3px !important;
  cursor: default !important;
  line-height: 1.4 !important;
}
.cal-day.has-post {
  background: rgba(90,184,112,0.18) !important;
  color: #3a8a50 !important;
  cursor: pointer !important;
  font-weight: bold !important;
}
.cal-day.has-post:hover { background: rgba(90,184,112,0.38) !important; }
.cal-day.today { background: var(--accent-red) !important; color: #fff !important; }
.cal-day.today.has-post { background: var(--accent-red) !important; }

/* === スクリーンセーバー === */
#screensaver {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9997 !important;
  background: url('/wp-content/uploads/2026/06/Firefly_Photorealistic-vast-open-landscape-_dramatic-rolling-green-hills-with-bold-steep-slo-48042-scaled.jpg') center center / cover no-repeat !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: none !important;
  overflow: hidden !important;
}
#ss-bg {
  position: absolute !important;
  inset: -5% !important;
  background: inherit !important;
  background-size: cover !important;
  animation: ss-kenburns 30s ease-in-out infinite alternate !important;
}
@keyframes ss-kenburns {
  0%   { transform: scale(1)    translate(0%,    0%);    }
  25%  { transform: scale(1.08) translate(-1.5%, -1%);  }
  50%  { transform: scale(1.05) translate(1%,    -2%);  }
  75%  { transform: scale(1.1)  translate(-1%,   1%);   }
  100% { transform: scale(1.06) translate(2%,    -0.5%); }
}
#ss-canvas { position: absolute !important; inset: 0 !important; z-index: 1 !important; }
#ss-text {
  position: relative !important;
  z-index: 2 !important;
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  color: rgba(255,255,255,0.9) !important;
  letter-spacing: 8px !important;
  pointer-events: none !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4) !important;
  animation: ss-pulse 6s ease-in-out infinite !important;
}
@keyframes ss-pulse {
  0%, 100% { opacity: 0.4; transform: translateY(0px); }
  50%       { opacity: 0.9; transform: translateY(-4px); }
}