/* ==========================================================================
   GRIT · Grit Dock + Hero 3D（grit-float.css）v4
   --------------------------------------------------------------------------
   结构：
     .gf-dockbox
       .gf-launch            ① 大启动按钮（收起 300px / 展开 64px）
       .gf-body              ②③
         .gf-tag--today      今日清单（主）
         .gf-detail--today   今日详情（内联插在今日与音乐之间）
         .gf-tag--music      音乐（副）
         .gf-detail--music   音乐详情（插在音乐下方）

   开关：删掉 index.html 里的 <link href="./grit-float.css"> 即可关闭。
   ========================================================================== */

/* ================= 左侧 Dock 容器 ================= */
.gf-dockbox {
  position: fixed;
  top: 62px;
  /* 按需求放大：长边 ×1.5（320→480）、宽边 ×3（300→900） */
  width: 480px;
  z-index: 60;
  display: none;
  flex-direction: column;
  gap: 0;
  pointer-events: none;
  font-family: var(--font-body, system-ui);
  /* 注意：这里刻意不加 3D 透视旋转。
     之前给整个 Dock 加了随鼠标的 rotateX/rotateY，结果按下鼠标后标签会随着
     视差缓动移出光标，导致 pointerdown 与 mouseup 落在不同元素上、click 丢失
     （表现为「点不动」）。所以 Dock 只保留标签自身的 hover 反馈。 */
}
.gf-dockbox.is-visible { display: flex; }
.gf-dockbox > * { pointer-events: auto; }

/* ================= ① 启动按钮（大块） ================= */
.gf-launch {
  position: relative;
  width: 100%;
  height: 900px;                 /* 宽边 ×3：300 → 900 */
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: none;
  border-radius: 24px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: #faf9f6;
  overflow: hidden;
  /* 按需求：改用「今日清单」主标签那套红色渐变 */
  background:
    radial-gradient(circle at 84% 10%, rgba(255, 255, 255, 0.22), transparent 55%),
    linear-gradient(135deg, #B00D27 0%, #E0324C 55%, #FF5A6E 100%);
  box-shadow:
    0 20px 52px rgba(200, 16, 46, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
  transition:
    height 0.5s cubic-bezier(0.34, 1.25, 0.64, 1),
    padding 0.4s ease,
    box-shadow 0.3s ease;
}
.gf-launch:hover {
  box-shadow:
    0 26px 64px rgba(200, 16, 46, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* 启动按钮里的细网格，呼应球场面线 */
.gf-launch::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 32px 32px;
  mask-image: radial-gradient(circle at 70% 20%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at 70% 20%, #000 0%, transparent 75%);
}

.gf-launch-top {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.gf-launch-mark {
  font-family: var(--font-display, inherit);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  font-style: italic;
}
.gf-launch-mark span { color: #C8102E; }
.gf-launch-badge {
  font-family: var(--font-mono, monospace);
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(200, 16, 46, 0.9);
  color: #fff;
}

.gf-launch-mid {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 9px;
  transition: opacity 0.3s ease, max-height 0.4s ease;
  max-height: 120px;
  overflow: hidden;
}
.gf-launch-big {
  font-family: var(--font-mono, monospace);
  font-size: 3.1rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}
.gf-launch-big i { font-style: normal; font-size: 1.1rem; opacity: 0.45; }
.gf-launch-cap {
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: rgba(250, 249, 246, 0.55);
}

.gf-launch-now {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.72rem;
  color: rgba(250, 249, 246, 0.82);
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(250, 249, 246, 0.06);
  transition: opacity 0.3s ease, max-height 0.4s ease;
  max-height: 60px;
  overflow: hidden;
}
.gf-launch-now span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gf-live {
  flex: 0 0 auto;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #C8102E;
  box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.2);
  animation: gf-breathe 2.4s ease-in-out infinite;
}
@keyframes gf-breathe {
  0%, 100% { box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.2); }
  50%      { box-shadow: 0 0 0 6px rgba(200, 16, 46, 0.06); }
}

.gf-launch-hint {
  position: relative;
  font-family: var(--font-mono, monospace);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  color: rgba(250, 249, 246, 0.34);
  transition: opacity 0.3s ease;
}

/* —— 展开态：启动按钮收成一条标题栏 —— */
.gf-dockbox.is-open .gf-launch {
  height: 64px;
  padding: 0 20px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  border-radius: 18px;
  /* 与第一个标签之间留出明确间距，避免视觉上贴在一起 */
  margin-bottom: 22px;
}
.gf-dockbox.is-open .gf-launch-top { align-items: center; }
.gf-dockbox.is-open .gf-launch-mark { font-size: 1.05rem; }
.gf-dockbox.is-open .gf-launch-mid,
.gf-dockbox.is-open .gf-launch-now,
.gf-dockbox.is-open .gf-launch-hint {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
  pointer-events: none;
}

/* ================= ②③ 标签 + 内联详情 ================= */
.gf-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.55s cubic-bezier(0.34, 1.25, 0.64, 1),
    opacity 0.3s ease;
}
.gf-dockbox.is-open .gf-body { max-height: 84vh; opacity: 1; }

/* ---- 标签（内边距加大，不再拥挤） ---- */
.gf-tag {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  border: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: #fff;
  overflow: hidden;
  transition:
    transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1),
    box-shadow 0.3s ease,
    filter 0.3s ease,
    margin 0.4s ease;
}
.gf-tag:hover { filter: saturate(1.1) brightness(1.05); }
.gf-tag:active { transform: scale(0.99); }

/* 主：今日清单 */
.gf-tag--today {
  min-height: 84px;
  padding: 18px 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, #B00D27 0%, #E0324C 55%, #FF5A6E 100%);
  box-shadow: 0 10px 26px rgba(200, 16, 46, 0.32);
}
.gf-tag--today.is-active {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5), 0 14px 34px rgba(200, 16, 46, 0.44);
}
/* 副：音乐 */
.gf-tag--music {
  min-height: 68px;
  padding: 14px 20px;
  border-radius: 16px;
  margin-top: 10px;
  background: linear-gradient(135deg, #3D33A8 0%, #6A5AE0 52%, #9C8CFF 100%);
  box-shadow: 0 10px 26px rgba(90, 74, 214, 0.30);
}
.gf-tag--music.is-active {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5), 0 14px 34px rgba(90, 74, 214, 0.46);
}

.gf-tag-ico {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.18);
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.gf-tag-txt {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;                       /* 标题与副文字之间留白 */
}
.gf-tag-txt b { font-size: 0.94rem; font-weight: 800; letter-spacing: 0.01em; }
.gf-tag-txt em {
  font-style: normal;
  font-family: var(--font-mono, monospace);
  font-size: 0.66rem;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gf-tag-chev {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.75);
  transition: transform 0.34s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.gf-tag.is-active .gf-tag-chev { transform: rotate(180deg); }

/* 标签上的小声波 */
.gf-waves {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 22px;
  margin-right: 4px;
}
.gf-waves i {
  display: block;
  width: 3px;
  height: 30%;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.8);
  transition: height 0.08s linear;
}

/* ---- 详情：内联插入 ---- */
.gf-detail {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  border-radius: 16px;
  pointer-events: none;
  transform: translateY(-8px);
  transition:
    max-height 0.55s cubic-bezier(0.34, 1.25, 0.64, 1),
    opacity 0.28s ease,
    transform 0.4s cubic-bezier(0.34, 1.25, 0.64, 1),
    margin 0.4s ease;
}
.gf-detail.is-open {
  max-height: 74vh;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  margin-top: 10px;
  padding: 16px 18px 15px;
}
/* 详情与下一个标签之间的间距 */
.gf-detail.is-open + .gf-tag { margin-top: 10px; }

.gf-detail--today {
  background: var(--glass-fill-strong, rgba(255, 255, 255, 0.86));
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.16), inset 0 0 0 1px rgba(200, 16, 46, 0.20);
  color: var(--color-text, #0a0a0a);
}
.gf-detail--music {
  background: var(--glass-fill-strong, rgba(255, 255, 255, 0.86));
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.16), inset 0 0 0 1px rgba(90, 74, 214, 0.24);
  color: var(--color-text, #0a0a0a);
}

/* ================= 通用内部 ================= */
.gf-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.gf-title { font-family: var(--font-display, inherit); font-size: 0.94rem; font-weight: 800; }
.gf-sub {
  font-family: var(--font-mono, monospace);
  font-size: 0.6rem;
  color: var(--color-muted-text, #6b6b6b);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.gf-note { margin: 14px 0 0; font-size: 0.7rem; color: var(--color-muted-text, #6b6b6b); }

/* 进度环 */
.gf-ring {
  --p: 0;
  width: 44px; height: 44px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: conic-gradient(#C8102E calc(var(--p) * 1%), rgba(10, 10, 10, 0.10) 0);
  display: grid;
  place-items: center;
  position: relative;
}
.gf-ring::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--glass-fill-strong, #fff);
}
.gf-ring b { position: relative; font-family: var(--font-mono, monospace); font-size: 0.68rem; font-weight: 800; }

/* 今日清单 */
.gf-timeline {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 40vh;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: thin;
}
.gf-item {
  display: grid;
  grid-template-columns: 40px 1fr 15px;
  align-items: start;
  gap: 8px;
  padding: 7px 6px;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}
.gf-item:hover { background: rgba(10, 10, 10, 0.045); transform: translateX(2px); }
.gf-item time {
  font-family: var(--font-mono, monospace);
  font-size: 0.63rem;
  color: var(--color-muted-text, #6b6b6b);
  padding-top: 2px;
}
.gf-item .gf-txt { font-size: 0.72rem; line-height: 1.45; }
.gf-item .gf-txt small {
  display: block;
  font-size: 0.6rem;
  color: var(--color-muted-text, #6b6b6b);
  margin-top: 2px;
}
.gf-tick {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid rgba(10, 10, 10, 0.22);
  margin-top: 2px;
  display: grid;
  place-items: center;
  transition: all 0.18s ease;
}
.gf-item.is-done .gf-tick { background: #C8102E; border-color: #C8102E; }
.gf-item.is-done .gf-tick::after {
  content: "";
  width: 6px; height: 3px;
  border-left: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(-45deg) translate(0.5px, -1px);
}
.gf-item.is-done .gf-txt { opacity: 0.48; text-decoration: line-through; }
.gf-item.is-now { background: rgba(200, 16, 46, 0.07); box-shadow: inset 2px 0 0 #C8102E; }
.gf-item.is-now time { color: #C8102E; font-weight: 700; }

/* 周/月入口 */
.gf-planentry {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(10, 10, 10, 0.08);
}
.gf-planbtn {
  border: 1px solid rgba(10, 10, 10, 0.12);
  background: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: all 0.2s ease;
}
.gf-planbtn:hover {
  background: #fff;
  border-color: rgba(200, 16, 46, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10);
}
.gf-planbtn strong { display: block; font-size: 0.74rem; }
.gf-planbtn span {
  display: block;
  font-family: var(--font-mono, monospace);
  font-size: 0.58rem;
  color: var(--color-muted-text, #6b6b6b);
  margin-top: 3px;
}

/* 音乐 */
.gf-disc { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.gf-cover {
  width: 52px; height: 52px;
  flex: 0 0 auto;
  border-radius: 11px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.55), transparent 55%),
    linear-gradient(135deg, #1a1a2e 0%, #6A5AE0 100%);
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(90, 74, 214, 0.34);
}
.gf-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg, transparent 0 6px, rgba(255,255,255,0.06) 6px 7px);
}
.gf-cover.is-playing { animation: gf-spin 7s linear infinite; }
@keyframes gf-spin { to { transform: rotate(360deg); } }

.gf-track { min-width: 0; flex: 1; }
.gf-track b { display: block; font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gf-track span {
  display: block;
  font-size: 0.63rem;
  color: var(--color-muted-text, #6b6b6b);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gf-spectrum {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 44px;
  padding: 0 2px 4px;
  margin-bottom: 10px;
  border-radius: 8px;
  background: linear-gradient(to top, rgba(90, 74, 214, 0.06), transparent);
}
.gf-spectrum i {
  flex: 1 1 auto;
  min-width: 2px;
  height: 8%;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(to top, rgba(106, 90, 224, 0.35), #9C8CFF);
  transition: height 0.09s linear;
}

/* 动态条纹可视化（能量驱动） */
.gf-stripes {
  display: block;
  width: 100%;
  height: 46px;
  margin-bottom: 10px;
  border-radius: 8px;
  background: rgba(106, 90, 224, 0.05);
  box-shadow: inset 0 0 0 1px rgba(106, 90, 224, 0.10);
}

.gf-progress {
  height: 3px;
  border-radius: 3px;
  background: rgba(10, 10, 10, 0.12);
  overflow: hidden;
  cursor: pointer;
  margin-bottom: 10px;
}
.gf-progress i {
  display: block;
  height: 100%;
  width: 0%;
  background: #6A5AE0;
  border-radius: 3px;
  transition: width 0.3s linear;
}

.gf-controls { display: flex; align-items: center; justify-content: center; gap: 8px; }
.gf-btn {
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: all 0.18s ease;
  font: inherit;
}
.gf-btn.sm { width: 30px; height: 30px; opacity: 0.62; }
.gf-btn.sm:hover { opacity: 1; background: rgba(10, 10, 10, 0.06); }
.gf-btn.play {
  width: 38px; height: 38px;
  background: #1a1a2e;
  color: #fff;
  box-shadow: 0 6px 16px rgba(90, 74, 214, 0.4);
}
.gf-btn.play:hover { background: #6A5AE0; transform: scale(1.06); }
.gf-btn.play:active { transform: scale(0.96); }
.gf-btn svg { display: block; }

.gf-musictip {
  margin-top: 11px;
  font-size: 0.58rem;
  line-height: 1.5;
  color: var(--color-muted-text, #6b6b6b);
  text-align: center;
}

/* ================= 右侧常驻小工具条 ================= */
.gf-rail-col {
  position: fixed;
  top: 62px;
  width: 300px;
  z-index: 60;
  display: none;
  pointer-events: none;
}
.gf-rail-col.is-visible { display: block; }
.gf-rail-col > * { pointer-events: auto; }

.gf-panel {
  position: relative;
  background: var(--glass-fill-strong, rgba(255, 255, 255, 0.72));
  border: var(--glass-border, 1px solid rgba(255, 255, 255, 0.65));
  border-radius: var(--radius-lg, 1.25rem);
  box-shadow: var(--glass-shadow, 0 8px 32px rgba(0, 0, 0, 0.12));
  color: var(--color-text, #0a0a0a);
  overflow: hidden;
  transform: perspective(900px) rotateX(var(--gf-rx, 0deg)) rotateY(var(--gf-ry, 0deg));
}
.gf-rail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 10px 12px;
}
.gf-railbtn {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--color-muted-text, #6b6b6b);
  cursor: pointer;
  padding: 7px 0;
  border-radius: 8px;
  font: inherit;
  font-size: 0.63rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: all 0.18s ease;
}
.gf-railbtn:hover { color: #C8102E; background: rgba(200, 16, 46, 0.06); }

/* ================= 周/月弹层 ================= */
.gf-modal {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.gf-modal.is-open { opacity: 1; pointer-events: auto; }
.gf-modal-box {
  width: min(92vw, 980px);
  max-height: 86vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--color-background, #faf9f6);
  color: var(--color-text, #0a0a0a);
  border-radius: 18px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.45);
  transform: translateY(16px) scale(0.98);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.gf-modal.is-open .gf-modal-box { transform: translateY(0) scale(1); }
.gf-modal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(10, 10, 10, 0.08);
}
.gf-modal-head h3 { margin: 0; font-size: 1.05rem; font-family: var(--font-display); }
.gf-modal-close {
  margin-left: auto;
  width: 32px; height: 32px;
  border: none;
  background: rgba(10, 10, 10, 0.06);
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  color: inherit;
  transition: all 0.18s ease;
}
.gf-modal-close:hover { background: #C8102E; color: #fff; }
.gf-modal-body { padding: 20px 22px 24px; overflow-y: auto; }

.gf-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.gf-day {
  border: 1px solid rgba(10, 10, 10, 0.09);
  border-radius: 12px;
  padding: 10px;
  min-height: 132px;
  background: rgba(255, 255, 255, 0.5);
  transition: all 0.2s ease;
}
.gf-day:hover { border-color: rgba(200, 16, 46, 0.3); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.07); }
.gf-day.is-today { border-color: #C8102E; box-shadow: 0 0 0 1px #C8102E inset; }
.gf-day h4 {
  margin: 0 0 7px;
  font-size: 0.72rem;
  font-family: var(--font-mono, monospace);
  color: var(--color-muted-text, #6b6b6b);
}
.gf-day.is-today h4 { color: #C8102E; }
.gf-day p { margin: 0 0 5px; font-size: 0.67rem; line-height: 1.45; padding-left: 8px; position: relative; }
.gf-day p::before {
  content: "";
  position: absolute;
  left: 0; top: 5px;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.28);
}

.gf-mwd { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
.gf-mwd span {
  text-align: center;
  font-family: var(--font-mono, monospace);
  font-size: 0.62rem;
  color: var(--color-muted-text, #6b6b6b);
}
.gf-month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.gf-mcell {
  border: 1px solid rgba(10, 10, 10, 0.07);
  border-radius: 9px;
  min-height: 66px;
  padding: 7px 8px;
  font-size: 0.65rem;
  background: rgba(255, 255, 255, 0.45);
  transition: all 0.18s ease;
}
.gf-mcell:hover { border-color: rgba(200, 16, 46, 0.28); }
.gf-mcell b { display: block; font-family: var(--font-mono, monospace); margin-bottom: 3px; opacity: 0.6; }
.gf-mcell.is-today { border-color: #C8102E; box-shadow: 0 0 0 1px #C8102E inset; }
.gf-mcell.is-today b { color: #C8102E; opacity: 1; font-weight: 800; }
.gf-mcell .dot {
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #C8102E;
  margin-right: 3px;
  vertical-align: middle;
}

/* ================= 窄屏抽屉 ================= */
.gf-dock {
  position: fixed;
  top: 42%;
  z-index: 60;
  display: none;
  flex-direction: column;
  gap: 8px;
}
.gf-dock.is-visible { display: flex; }
.gf-dock.left { left: 0; }
.gf-dockbtn {
  width: 40px; height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(10, 10, 10, 0.72);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  border-radius: 0 10px 10px 0;
  display: grid;
  place-items: center;
  backdrop-filter: blur(10px);
  transition: all 0.2s ease;
}
.gf-dockbtn:hover { background: #C8102E; }
.gf-dockbox.is-drawer {
  display: flex;
  left: 12px;
  width: min(340px, 88vw);
  z-index: 1500;
}
.gf-dockbox.is-drawer .gf-launch { height: 64px; }
.gf-dockbox.is-drawer .gf-body { max-height: 84vh; opacity: 1; overflow: visible; }

/* ==========================================================================
   Hero 右侧 3D 舞台
   ========================================================================== */
#gf-hero-stage {
  position: absolute;
  top: 0;
  right: 0;
  width: 46%;
  height: 100%;
  z-index: 0;
  cursor: pointer;
  touch-action: none;
  pointer-events: auto;
}
#gf-hero-stage canvas { display: block; width: 100%; height: 100%; }
@media (max-width: 900px) { #gf-hero-stage { display: none; } }

/* ================= 降级 ================= */
@media (prefers-reduced-motion: reduce) {
  .gf-launch, .gf-body, .gf-detail, .gf-tag, .gf-panel { transform: none !important; }
  .gf-launch, .gf-body, .gf-detail { transition: none !important; }
  .gf-cover.is-playing, .gf-live { animation: none; }
  .gf-modal, .gf-modal-box, .gf-item, .gf-planbtn { transition: none !important; }
}

/* 全局动效关闭开关（齿轮设置里控制） */
html.gf-no-motion .gf-launch,
html.gf-no-motion .gf-body,
html.gf-no-motion .gf-detail,
html.gf-no-motion .gf-tag { transition: none !important; }
html.gf-no-motion .gf-live,
html.gf-no-motion .gf-cover.is-playing { animation: none !important; }

/* ==========================================================================
   v6 · Grit Dock 三层结构（L0 小按钮 / L1 三主标题 / L2 内联详情）
   —— 追加样式，覆盖上一版的大启动按钮
   ========================================================================== */

/* 容器：固定左侧黑带内 */
.gf-dockbox {
  position: fixed;
  left: 80px;                  /* JS 会按黑带居中覆盖 */
  top: 62px;                   /* JS 按状态覆盖 */
  width: 480px;
  z-index: 60;
  display: none;
  flex-direction: column;
  pointer-events: none;
  font-family: var(--font-body, system-ui);
}
.gf-dockbox.is-visible { display: flex; }
.gf-dockbox > * { pointer-events: auto; }

/* ---------- L0：方形小按钮（两行） ---------- */
.gf-mini {
  width: 80px;
  height: 80px;
  flex: 0 0 auto;
  margin: 0 auto;              /* 在黑带内水平居中 */
  border: none;
  border-radius: 18px;
  cursor: pointer;
  font: inherit;
  color: #faf9f6;
  display: grid;
  place-content: center;
  gap: 1px;
  line-height: 1.15;
  background:
    radial-gradient(circle at 78% 18%, rgba(255, 120, 40, 0.55), transparent 62%),
    linear-gradient(160deg, #2a1114 0%, #14100f 58%, #0a0a0c 100%);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.10);
  transition: transform .3s cubic-bezier(.34,1.4,.64,1), box-shadow .25s ease, opacity .25s ease;
}
.gf-mini:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 18px 42px rgba(200, 16, 46, 0.4), inset 0 0 0 1px rgba(255, 140, 60, 0.45);
}
.gf-mini b {
  display: block;
  font-family: var(--font-display, inherit);
  font-size: .78rem;
  font-weight: 800;
  font-style: italic;
  letter-spacing: .02em;
  text-align: center;
}
.gf-mini b:last-child {
  font-family: var(--font-mono, monospace);
  font-size: .58rem;
  font-style: normal;
  letter-spacing: .22em;
  color: #FF7A3C;
}
.gf-dockbox.is-open .gf-mini { display: none; }

/* ---------- L1/L2：堆叠区 ---------- */
.gf-stack {
  display: flex;
  flex-direction: column;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  /* 轻度透视：整组朝页内后退 */
  perspective: 1200px;
  transform-style: preserve-3d;
  transition: max-height .55s cubic-bezier(.34,1.25,.64,1), opacity .3s ease;
}
.gf-dockbox.is-open .gf-stack {
  max-height: 86vh;
  opacity: 1;
}
.gf-stack-inner {
  display: flex;
  flex-direction: column;
  transform: rotateX(8deg);
  transform-origin: top center;
}

/* ---------- 三个主标题 ---------- */
.gf-title {
  position: relative;
  width: 100%;
  border: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: #faf9f6;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-radius: 16px;
  transition: filter .2s ease, box-shadow .25s ease, transform .2s ease;
}
.gf-title:hover { filter: brightness(1.08); }
.gf-title:active { transform: scale(.995); }
.gf-title b {
  flex: 1 1 auto;
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .01em;
}
.gf-title em {
  font-style: normal;
  font-family: var(--font-mono, monospace);
  font-size: .64rem;
  opacity: .82;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.gf-title .gf-tchev {
  flex: 0 0 auto;
  opacity: .75;
  transition: transform .34s cubic-bezier(.34,1.4,.64,1);
}
.gf-title.is-active .gf-tchev { transform: rotate(180deg); }

/* GRIT DOCK：红/橙/黑渐变 */
.gf-title--dock {
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 130, 50, 0.6), transparent 58%),
    linear-gradient(150deg, #7a1420 0%, #C8102E 42%, #2a1214 100%);
  box-shadow: 0 12px 30px rgba(200, 16, 46, 0.34), inset 0 0 0 1px rgba(255, 160, 90, 0.28);
}
.gf-title--dock.is-active {
  box-shadow: 0 0 0 2px rgba(255, 170, 110, 0.6), 0 16px 38px rgba(200, 16, 46, 0.44);
}
/* 今日清单：红 */
.gf-title--today {
  background: linear-gradient(135deg, #B00D27 0%, #E0324C 55%, #FF5A6E 100%);
  box-shadow: 0 12px 30px rgba(200, 16, 46, 0.3);
}
.gf-title--today.is-active {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .5), 0 16px 38px rgba(200, 16, 46, 0.42);
}
/* 音乐：靛紫 */
.gf-title--music {
  background: linear-gradient(135deg, #3D33A8 0%, #6A5AE0 52%, #9C8CFF 100%);
  box-shadow: 0 12px 30px rgba(90, 74, 214, 0.3);
}
.gf-title--music.is-active {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .5), 0 16px 38px rgba(90, 74, 214, 0.44);
}

/* 标题之间的间距 */
.gf-title + .gf-title { margin-top: 10px; }
.gf-detail + .gf-title { margin-top: 10px; }

/* ---------- 详情（插在标题之间） ---------- */
.gf-detail {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  border-radius: 16px;
  pointer-events: none;
  transform: translateY(-8px);
  transition: max-height .55s cubic-bezier(.34,1.25,.64,1), opacity .28s ease,
              transform .4s cubic-bezier(.34,1.25,.64,1), margin .35s ease, padding .35s ease;
  padding: 0;
}
.gf-detail.is-open {
  max-height: 70vh;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  margin-top: 10px;
  padding: 16px 18px 15px;
}
.gf-detail { box-sizing: border-box; }
.gf-detail--dock {
  background: var(--glass-fill-strong, rgba(255,255,255,.86));
  box-shadow: 0 16px 44px rgba(0,0,0,.16), inset 0 0 0 1px rgba(255,140,60,.28);
  color: var(--color-text, #0a0a0a);
}
.gf-detail--today {
  background: var(--glass-fill-strong, rgba(255,255,255,.86));
  box-shadow: 0 16px 44px rgba(0,0,0,.16), inset 0 0 0 1px rgba(200,16,46,.20);
  color: var(--color-text, #0a0a0a);
}
.gf-detail--music {
  background: var(--glass-fill-strong, rgba(255,255,255,.86));
  box-shadow: 0 16px 44px rgba(0,0,0,.16), inset 0 0 0 1px rgba(90,74,214,.24);
  color: var(--color-text, #0a0a0a);
}

/* ---------- DOCK 总览（进度环 + 四项） ---------- */
.gf-ov {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
}
.gf-ov-ring {
  --p: 0;
  width: 76px; height: 76px;
  border-radius: 50%;
  background: conic-gradient(#C8102E calc(var(--p) * 1%), rgba(10,10,10,.10) 0);
  display: grid; place-items: center; position: relative;
}
.gf-ov-ring::after {
  content: ""; position: absolute; inset: 7px; border-radius: 50%;
  background: var(--glass-fill-strong, #fff);
}
.gf-ov-ring b {
  position: relative; font-family: var(--font-mono, monospace);
  font-size: .82rem; font-weight: 800;
}
.gf-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.gf-kpi {
  border: 1px solid rgba(10,10,10,.08);
  border-radius: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,.55);
}
.gf-kpi b {
  display: block;
  font-family: var(--font-mono, monospace);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
}
.gf-kpi span {
  display: block;
  margin-top: 4px;
  font-size: .6rem;
  color: var(--color-muted-text, #6b6b6b);
}

/* ==========================================================================
   v6 · 收窄中间主内容，给两侧倾斜卡片让出空间
   2560 屏：内容 1280 → 两侧各 640，480 宽的 Dock 卡片有余量
   ========================================================================== */
@media (min-width: 1600px) {
  main#main-content {
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ==========================================================================
   v6 · 3D 环绕倾斜（配合 grit-tilt3d.js）
   --gf-base 由 JS 按左右侧写入（左 +8deg / 右 -8deg）
   ========================================================================== */
.gf-title, .gf-detail, .gf-panel {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 150ms ease-out, filter .2s ease, box-shadow .25s ease;
  transform:
    perspective(1000px)
    rotateX(var(--gf-tx, 0deg))
    rotateY(calc(var(--gf-base, 0deg) + var(--gf-ty, 0deg)))
    scale3d(1.01, 1.01, 1.01);
}
/* 鼠标光斑 */
.gf-title::after,
.gf-detail::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease-out;
  background: radial-gradient(circle at var(--gf-mx, 50%) var(--gf-my, 50%),
              rgba(255, 255, 255, 0.16), transparent 62%);
}
.gf-title:hover::after { opacity: 1; }
.gf-title, .gf-detail { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .gf-title, .gf-detail, .gf-panel {
    transform: none !important;
    transition: none !important;
  }
  .gf-title::after, .gf-detail::after { display: none; }
}


/* ==========================================================================
   v7 · 默认倾斜 + 红橙黑金 + 卡片收窄 + 右侧镜像
   （v9 起：倾斜 40°、perspective 1400 → 1600、卡片 420 → 400）
   ========================================================================== */
.gf-title, .gf-detail, .gf-panel {
  transform:
    perspective(1600px)
    rotateX(var(--gf-tx, 0deg))
    rotateY(calc(var(--gf-base, 0deg) + var(--gf-ty, 0deg)));
}
/* 右侧镜像：倾斜方向反转 */
.gf-dockbox--right .gf-title,
.gf-dockbox--right .gf-detail {
  transform:
    perspective(1600px)
    rotateX(var(--gf-tx, 0deg))
    rotateY(calc(var(--gf-base, 0deg) + var(--gf-ty, 0deg)));
}
.gf-dockbox--right { left: auto; }
.gf-mini--right {
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 190, 60, 0.55), transparent 62%),
    linear-gradient(160deg, #2a1a08 0%, #14100a 58%, #0a0a0c 100%);
}

/* —— GRIT DOCK：红 / 橙 / 黑 + 亮金 —— */
.gf-title--dock {
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 196, 64, 0.55), transparent 46%),
    linear-gradient(100deg, #4a0d12 0%, #B00D27 26%, #E8621E 58%, #160c0c 100%);
  box-shadow:
    0 12px 30px rgba(200, 16, 46, 0.4),
    inset 0 0 0 1px rgba(255, 199, 92, 0.75),
    inset 0 1px 0 rgba(255, 230, 160, 0.5);
}
.gf-title--dock b {
  color: #FFE9B0;
  text-shadow: 0 0 14px rgba(255, 190, 60, 0.75), 0 1px 0 rgba(0, 0, 0, 0.6);
  letter-spacing: .06em;
}
.gf-title--dock.is-active {
  box-shadow:
    0 0 0 2px rgba(255, 210, 110, 0.85),
    0 16px 38px rgba(200, 16, 46, 0.5),
    inset 0 1px 0 rgba(255, 230, 160, 0.6);
}
/* 金色小徽标感：左侧竖条 */
.gf-title--dock::before {
  content: "";
  position: absolute;
  left: 0; top: 12%; bottom: 12%;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #FFD76A, #E8A020);
  box-shadow: 0 0 12px rgba(255, 200, 80, 0.9);
}
/* 小方标同样加金边 */
.gf-mini {
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(255, 199, 92, 0.7),
    inset 0 1px 0 rgba(255, 230, 160, 0.45);
}
.gf-mini b:last-child { color: #FFC94A; }

/* ==========================================================================
   v8 · 堆叠 + 小按钮延迟淡入 + 右侧镜像
   ========================================================================== */

/* —— 三张标签：宽高完全一致，相邻重叠 10px（仅当中间详情收起时） —— */
.gf-stack-inner > .gf-title {
  width: 400px;              /* v9：420 → 400（40° 倾斜时保证不越出 640px 黑带） */
  height: 68px;
  box-sizing: border-box;
}
/* 第2、3张：中间详情收起时上移，压住上一张下沿 */
.gf-title + .gf-detail:not(.is-open) + .gf-title {
  margin-top: -10px;
}
/* 详情展开时恢复正常间距，避免被压 */
.gf-title + .gf-detail.is-open + .gf-title {
  margin-top: 10px;
}
/* 层级：靠上的压住靠下的 */
.gf-stack-inner > .gf-title:nth-of-type(1) { z-index: 30; }
.gf-stack-inner > .gf-title:nth-of-type(2) { z-index: 20; }
.gf-stack-inner > .gf-title:nth-of-type(3) { z-index: 10; }
.gf-title { position: relative; }

/* —— Bug1：小按钮延迟淡入，避免关闭时与收缩中的卡片同时出现 —— */
.gf-mini {
  display: grid;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, transform .3s cubic-bezier(.34,1.4,.64,1), visibility 0s linear .5s;
}
.gf-dockbox:not(.is-open) .gf-mini {
  opacity: 1;
  visibility: visible;
  transition: opacity .2s ease .5s, transform .3s cubic-bezier(.34,1.4,.64,1), visibility 0s linear .5s;
}
/* 取消原来的 display:none 切换 */
.gf-dockbox.is-open .gf-mini { display: grid; opacity: 0; visibility: hidden; }

/* —— Bug2：右侧镜像 —— */
.gf-dockbox--right .gf-title--dock::before {
  left: auto;
  right: 0;
}
.gf-dockbox--right .gf-title::after,
.gf-dockbox--right .gf-detail::after {
  background: radial-gradient(circle at var(--gf-mx, 50%) var(--gf-my, 50%),
              rgba(255, 255, 255, 0.16), transparent 62%);
}
.gf-dockbox--right .gf-title--dock {
  background:
    radial-gradient(circle at 12% 12%, rgba(255, 196, 64, 0.55), transparent 46%),
    linear-gradient(260deg, #4a0d12 0%, #B00D27 26%, #E8621E 58%, #160c0c 100%);
}
.gf-dockbox--right .gf-title--today {
  background: linear-gradient(225deg, #B00D27 0%, #E0324C 55%, #FF5A6E 100%);
}
.gf-dockbox--right .gf-title--music {
  background: linear-gradient(225deg, #3D33A8 0%, #6A5AE0 52%, #9C8CFF 100%);
}


/* ==========================================================================
   v9 · 交接文档 2026-10-22「十、下一步行动清单」第 1~6 项
     · Bug1：关闭 Dock 时下方闪小方块
     · Bug2：右侧镜像容器宽度停在 80px
     · 倾斜 30° → 40°
     · 卡片宽 420 → 400、perspective 1400 → 1600
     · 三张卡片加投影（压叠物理厚度）
     · 白块融入球场（85% 半透明 + 边缘羽化）
   ========================================================================== */

/* --------------------------------------------------------------------------
   v9-1 · 容器宽度恒定 400 + 小方标脱离文档流   【Bug1 修复】
   旧写法：收起瞬间容器 420→80、top 62→316，而堆叠区还在 max-height 过渡里，
   400 宽的卡片被 80 宽容器横向裁切、并整体跳到 22% 位置 →
   「下方闪几个小方块」。现在宽度/位置恒定，小方标绝对定位。
   --gf-mini-top 由 grit-float.js 的 positionLayers() 写入（视口 22% - 容器 top）。
   -------------------------------------------------------------------------- */
.gf-dockbox {
  width: 400px;
  --gf-mini-top: 254px;
}
.gf-mini {
  position: absolute;
  top: var(--gf-mini-top, 254px);
  left: calc(50% - 40px);      /* 80px 小方标水平居中；不用 transform，避免和 hover 冲突 */
  margin: 0;
  z-index: 5;
}
/* 收起态：堆叠区不再吃点击，折叠残影不会挡住「点空白」 */
.gf-dockbox:not(.is-open) .gf-stack { pointer-events: none; }

/* --------------------------------------------------------------------------
   v9-2 · 堆叠区开合：改由 JS 写显式 height 过渡   【Bug1 修复】
   旧写法 max-height: 86vh(1238px) → 0，内容只有 184px，前 ~300ms 毫无视觉收缩。
   现在高度由 grit-float.js 的 makeStackAnimator 从真实内容高度开始收。
   -------------------------------------------------------------------------- */
.gf-stack {
  height: 0;
  max-height: none;
  overflow: hidden;
  opacity: 0;
  transition: height 340ms cubic-bezier(0.34, 1.05, 0.64, 1), opacity 200ms ease;
}
.gf-dockbox.is-open .gf-stack {
  max-height: none;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   v9-3 · 小方标显隐：收起动画播完才出现   【Bug1 修复】
   取代 v8 的「CSS 延迟 0.5s」——现在由 JS 在 height 过渡结束后摘掉 .is-closing。
   -------------------------------------------------------------------------- */
.gf-dockbox.is-open .gf-mini,
.gf-dockbox.is-closing .gf-mini {
  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms ease, transform 300ms cubic-bezier(0.34, 1.4, 0.64, 1), visibility 0s linear 120ms;
}
.gf-dockbox:not(.is-open):not(.is-closing) .gf-mini {
  opacity: 1;
  visibility: visible;
  transition: opacity 220ms ease 60ms, transform 300ms cubic-bezier(0.34, 1.4, 0.64, 1), visibility 0s linear 0s;
}

/* --------------------------------------------------------------------------
   v9-4 · 三张卡片投影：压叠出物理厚度
   深色投影层（压在下一张卡上才看得见）+ 底部暗边（纸张厚度）+ 各卡本色 --gf-glow。
   放在这条通用规则里，各变体的 box-shadow 不再各自覆盖成单层光晕。
   -------------------------------------------------------------------------- */
.gf-stack-inner > .gf-title {
  box-shadow:
    0 34px 62px rgba(0, 0, 0, 0.50),
    0 16px 26px rgba(0, 0, 0, 0.38),
    0 6px 12px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -2px 0 rgba(0, 0, 0, 0.20),
    var(--gf-glow, 0 0 0 rgba(0, 0, 0, 0));
}
.gf-title--dock { --gf-glow: 0 18px 38px rgba(200, 16, 46, 0.34); }
.gf-title--today { --gf-glow: 0 18px 38px rgba(200, 16, 46, 0.30); }
.gf-title--music { --gf-glow: 0 18px 38px rgba(90, 74, 214, 0.30); }
.gf-title--dock.is-active {
  --gf-glow: 0 0 0 2px rgba(255, 210, 110, 0.85), 0 22px 46px rgba(200, 16, 46, 0.50);
}
.gf-title--today.is-active {
  --gf-glow: 0 0 0 2px rgba(255, 255, 255, 0.50), 0 22px 46px rgba(200, 16, 46, 0.45);
}
.gf-title--music.is-active {
  --gf-glow: 0 0 0 2px rgba(255, 255, 255, 0.50), 0 22px 46px rgba(90, 74, 214, 0.46);
}

/* --------------------------------------------------------------------------
   v9-5 · 右侧小工具条：右侧镜像 Dock 展开时淡出
   （400px 镜像容器与小工具条同处右侧黑带，不淡出会两层文字叠在一起）
   -------------------------------------------------------------------------- */
.gf-rail-col {
  transition: opacity 240ms ease;
}
.gf-rail-col.is-dock-open {
  opacity: 0;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   v9-6 · 白块融入球场：内容承托面 85% 半透明 + 左右边缘羽化
   只作用于 main#main-content 自己的背景与遮罩：
     · 大屏（≥1600px，球场完整可见）才生效，窄屏保持原样
     · main 内部卡片、Dock、悬浮球、3D 层都在羽化区之外 / 是 main 之外的浮动层，不受影响
     · 内容左右内边距正好 64px，羽化 64px 只吃掉留白，不碰任何文字
   -------------------------------------------------------------------------- */
@media (min-width: 1600px) {
  main#main-content {
    background: color-mix(in srgb, var(--color-background) 85%, transparent);
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 64px,
      #000 calc(100% - 64px),
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 64px,
      #000 calc(100% - 64px),
      transparent 100%
    );
  }
}