.brand-mark {
  display: inline-flex;
  flex-direction: column;
  gap: .1rem;
  line-height: 1;
  text-decoration: none;
}
.brand-mark__zip { font-size: 1.65rem; font-weight: 900; }
.brand-mark__running { font-size: .55rem; letter-spacing: .34em; color: currentColor; opacity: .72; }
.line-cta {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  width: min(100%, 432px);
  min-height: 68px;
  gap: 1rem;
  padding: .75rem 1.875rem .75rem .8125rem;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-line-green);
  color: #fff;
  text-decoration: none;
  transition: filter var(--transition-fast), transform var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}
.line-cta[aria-disabled="true"] { cursor: not-allowed; }
.line-cta__icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  background: #fff;
  color: var(--color-line-green);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .02em;
}
.line-cta__copy { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.line-cta__eyebrow { font-size: .75rem; opacity: .93; }
.line-cta__main { white-space: nowrap; font-size: 1rem; font-weight: 700; }
@media (hover: hover) and (pointer: fine) {
  .line-cta:hover { filter: brightness(1.05); transform: translateY(-1px); }
}
.line-cta:active { filter: brightness(.94); transform: scale(.99); transition-duration: 120ms; }
.line-cta:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.cta-note { margin: 0; color: var(--color-muted); font-size: .72rem; line-height: 1.7; }
.floating-cta {
  position: fixed;
  z-index: 50;
  right: max(1.25rem, env(safe-area-inset-right));
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px);
  transition: opacity var(--transition-standard), transform var(--transition-standard);
}
.floating-cta.is-visible { opacity: 1; pointer-events: auto; transform: none; }

.floating-line-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 65px;
  height: 65px;
  background-color: transparent;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.floating-line-btn:hover { transform: scale(1.1); }
.floating-line-btn:active { transform: scale(0.95); }
.floating-line-btn img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
  animation: floatIcon 3s ease-in-out infinite;
}
@keyframes floatIcon {
  0% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}
.floating-line-btn__tooltip {
  position: absolute;
  top: -10px;
  right: -5px;
  background: var(--color-line-green, #00b900);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.15rem 0.45rem;
  border-radius: 12px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 2;
  pointer-events: none;
}
@media (max-width: 768px) {
  .floating-line-btn {
    width: 55px;
    height: 55px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .floating-line-btn img { animation: none; }
}
.asset-placeholder {
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: .75rem;
  padding: 2rem;
  border: 1px solid #deded8;
  background: repeating-linear-gradient(45deg,#f5f5f3 0 16px,#efefeb 16px 32px);
  color: #8d8d86;
  text-align: center;
}
.asset-placeholder--dark {
  border-color: #45453f;
  background: repeating-linear-gradient(45deg,#262625 0 16px,#212120 16px 32px);
  color: #aaa99f;
}
.asset-placeholder__badge { padding: .22rem .65rem; border: 1px solid currentColor; font-size: .65rem; letter-spacing: .14em; }
.asset-placeholder strong { font-size: .95rem; line-height: 1.6; }
.asset-placeholder--compact { min-height: 120px; }
.loaded-asset { display:block; width:100%; height:100%; overflow:hidden; }
.loaded-asset img, .loaded-asset video { width:100%; height:100%; object-fit:cover; }
body:not(.show-placeholders) .asset-placeholder { display: none; }
.week-rhythm { display: flex; align-items: center; gap: clamp(1rem, 2.8vw, 2.5rem); }
.week-dot { width: 13px; height: 13px; border: 1.5px solid #aaa; border-radius: 50%; }
.week-dot--selected { position: relative; width: 20px; height: 20px; background: #111; border-color: #111; }
.week-dot--selected::after { content: "あなたの走る日"; position: absolute; top: 50%; left: calc(100% + 1rem); width: max-content; font-size: .75rem; color: var(--color-muted); transform: translateY(-50%); }
.reduce-bars { display: grid; gap: 1.55rem; }
.reduce-bar { display: grid; grid-template-columns: 72px 1fr; gap: 1.5rem; align-items: center; color: var(--color-ink-soft); }
.reduce-bar__line { height: 3px; background: #111; }
.reduce-bar:nth-child(2) .reduce-bar__line { width: 70%; background: #85857f; }
.reduce-bar:nth-child(3) .reduce-bar__line { width: 42%; background: #c2c2bc; }
.timeline { display: grid; grid-template-columns: auto minmax(48px, 1fr) auto minmax(48px, 1fr) auto; align-items: center; gap: 1rem; }
.timeline__step { display:flex; align-items:center; gap:.8rem; min-width:max-content; }
.timeline__node { width: 14px; height: 14px; flex:0 0 auto; border-radius: 50%; background: #8a8a84; }
.timeline__node--run { width: 18px; height: 18px; background: #111; }
.timeline__line { height: 1px; background: #c2c2bc; }
.timeline__label { display: flex; flex-direction: column; gap: .3rem; }
.timeline__label strong { font-size: .85rem; letter-spacing: .12em; }
.timeline__label span { font-size: .75rem; color: var(--color-muted); }
.live-fallback { display: none; position: fixed; inset: 0; z-index: 999; place-items: center; padding: 2rem; background: rgba(17,17,17,.92); color: #fff; }
.live-fallback.is-visible { display: grid; }
.live-fallback__panel { max-width: 520px; text-align: center; }
.live-fallback__panel a { display: inline-flex; margin-top: 1.5rem; padding: .85rem 1.25rem; border: 1px solid #fff; text-decoration: none; }