@charset "UTF-8";

body {
  margin: 0;
}

html {
  background: #eef0f4;
}

html[data-design=dark] {
  color-scheme: dark;
  background: #050b18;
}

html:not([data-design=dark]) .design_dark,
html[data-design=dark] .design_light {
  display: none;
}

/* ---------- 切り替えスイッチ（左下に固定）：昼と夜の面を持つ立方体 ----------
   ・立方体は等角図（上・左・手前の3面が見える向き）。横の4面のうち、左と手前が昼、奥と右が夜
   ・押すと跳ねて半回転（--spin を JS が 180deg ずつ足す）→ 着地してからブラインドの塗り替えが始まる
   ・上の面はライトで太陽、ダークで三日月。ホバーで浮いて少し回る
   ・ライト：白い板＋硬い影、方眼のタイルの台座／ダーク：ガラスの板、光る輪の台座のまわりを星が回る */
.design_switch {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: 64px;
  padding: 0 18px 0 12px;
  border: 1px solid rgba(29, 34, 48, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: #1d2230;
  font-family: "IBM Plex Mono", Consolas, "Courier New", monospace;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.95) inset, 4px 5px 0 rgba(43, 49, 64, 0.08), 14px 18px 36px rgba(29, 34, 48, 0.12);
  -webkit-appearance: none;
  appearance: none;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.4s, border-color 0.4s, color 0.4s;
}
.design_switch:hover {
  transform: translate(-2px, -2px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.95) inset, 6px 7px 0 rgba(43, 49, 64, 0.1), 18px 24px 40px rgba(29, 34, 48, 0.14);
}
@media (max-width: 640px) {
  .design_switch {
    bottom: 8px;
    left: 8px;
    height: 54px;
    padding: 0 8px;
    opacity: 0.9;
    transform: scale(0.78);
    transform-origin: 0 100%;
  }
  .design_switch:hover {
    transform: scale(0.78);
  }
}

.ds_sw_stage {
  position: relative;
  flex-shrink: 0;
  display: block;
  width: 44px;
  height: 52px;
}

.ds_sw_base {
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 30px;
  height: 30px;
  margin-left: -15px;
  border: 1.5px solid #2b3140;
  background-color: #ffffff;
  background-image: linear-gradient(rgba(43, 49, 64, 0.14) 1px, transparent 1px), linear-gradient(90deg, rgba(43, 49, 64, 0.14) 1px, transparent 1px);
  background-size: 6px 6px;
  box-shadow: 4px 4px 0 rgba(43, 49, 64, 0.22);
  transform: scaleY(0.58) rotate(45deg);
  transition: border-color 0.4s, background-color 0.4s, box-shadow 0.4s, border-radius 0.4s;
}

.ds_sw_orbit {
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 42px;
  height: 42px;
  margin-left: -21px;
  border-radius: 50%;
  opacity: 0;
  transform: scaleY(0.42);
  transition: opacity 0.4s;
}
.ds_sw_orbit::before {
  position: absolute;
  top: -3px;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  content: "";
  background: #ffd27a;
  box-shadow: 0 0 8px 2px rgba(255, 190, 90, 0.8);
}

.ds_sw_shadow {
  position: absolute;
  bottom: 9px;
  left: 50%;
  width: 26px;
  height: 10px;
  margin-left: -13px;
  border-radius: 50%;
  background: rgba(29, 34, 48, 0.28);
  filter: blur(2px);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s;
}

.ds_sw_hop {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 26px;
  height: 26px;
  margin-left: -13px;
  transform: translateY(var(--lift, 0px));
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ds_sw_cube {
  position: relative;
  display: block;
  width: 26px;
  height: 26px;
  transform-style: preserve-3d;
  transform: rotateX(-35.26deg) rotateY(calc(45deg + var(--spin, 0deg) + var(--peek, 0deg)));
  transition: transform 0.7s cubic-bezier(0.3, 1.45, 0.5, 1);
}

.ds_sw_face {
  position: absolute;
  inset: 0;
  display: block;
  border: 1.5px solid #2b3140;
  backface-visibility: hidden;
  transition: background-color 0.4s, border-color 0.4s;
}

.ds_sw_left {
  background: #f2f4f8;
  transform: rotateY(-90deg) translateZ(13px);
}

.ds_sw_front {
  background: #cbd1db;
  transform: translateZ(13px);
}

.ds_sw_back,
.ds_sw_right {
  border-color: #5aa9ff;
  background-color: #102446;
  background-image: radial-gradient(circle at 24% 30%, #ffffff 0 1px, transparent 1.5px), radial-gradient(circle at 70% 22%, #9fd4ff 0 1px, transparent 1.5px), radial-gradient(circle at 58% 68%, #ffffff 0 0.8px, transparent 1.3px), radial-gradient(circle at 30% 78%, #9fd4ff 0 0.8px, transparent 1.3px);
  box-shadow: inset 0 0 8px rgba(90, 169, 255, 0.45);
  animation: ds_twinkle 2.4s ease-in-out infinite alternate;
}

.ds_sw_back {
  transform: rotateY(180deg) translateZ(13px);
}

.ds_sw_right {
  background-color: #0b1730;
  transform: rotateY(90deg) translateZ(13px);
  animation-delay: -1.2s;
}

@keyframes ds_twinkle {
  from {
    filter: brightness(0.8);
  }
  to {
    filter: brightness(1.35);
  }
}
.ds_sw_top {
  overflow: hidden;
  background: #ffffff;
  transform: rotateX(90deg) translateZ(13px);
}
.ds_sw_top::before {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  content: "";
  background: repeating-conic-gradient(#3b68b5 0 8deg, transparent 8deg 30deg);
  -webkit-mask-image: radial-gradient(circle, transparent 0 5px, #000 5.5px);
  mask-image: radial-gradient(circle, transparent 0 5px, #000 5.5px);
  animation: ds_sun 8s linear infinite;
  transition: opacity 0.4s;
}
.ds_sw_top::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  content: "";
  background: #3b68b5;
  transition: background 0.4s, box-shadow 0.4s, transform 0.5s cubic-bezier(0.3, 1.45, 0.5, 1);
}

@keyframes ds_sun {
  to {
    transform: rotate(360deg);
  }
}
.ds_sw_bottom {
  background: #2b3140;
  transform: rotateX(-90deg) translateZ(13px);
}

.ds_sw_text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
@media (max-width: 640px) {
  .ds_sw_text {
    display: none;
  }
}

.ds_sw_now {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
}

.ds_sw_next {
  color: #8c93a3;
  font-size: 10px;
  letter-spacing: 0.08em;
  transition: color 0.3s, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ds_sw_next::before {
  content: "▸ ";
  color: #3b68b5;
}

.ds_sw_mode_dark {
  display: none;
}

.design_switch:hover {
  --lift: -5px;
  --peek: -18deg;
}
.design_switch:hover .ds_sw_shadow {
  opacity: 0.6;
  transform: scale(0.8);
}
.design_switch:hover .ds_sw_next {
  color: #1d2230;
  transform: translateX(3px);
}

.design_switch.is_rolling .ds_sw_hop {
  animation: ds_hop 0.62s cubic-bezier(0.3, 0, 0.3, 1);
}
.design_switch.is_rolling .ds_sw_shadow {
  animation: ds_hop_shadow 0.62s cubic-bezier(0.3, 0, 0.3, 1);
}
.design_switch.is_rolling .ds_sw_base {
  animation: ds_base_hit 0.62s ease-out;
}

@keyframes ds_hop {
  0% {
    transform: translateY(var(--lift, 0px));
  }
  14% {
    transform: translateY(3px) scale(1.12, 0.86);
  }
  48% {
    transform: translateY(-22px) scale(0.94, 1.08);
  }
  82% {
    transform: translateY(1px) scale(1.1, 0.9);
  }
  100% {
    transform: translateY(var(--lift, 0px));
  }
}
@keyframes ds_hop_shadow {
  48% {
    opacity: 0.25;
    transform: scale(0.45);
  }
}
@keyframes ds_base_hit {
  82% {
    filter: brightness(1);
  }
  88% {
    filter: brightness(1.6);
  }
}
html[data-design=dark] .design_switch {
  border-color: rgba(130, 175, 255, 0.28);
  background: rgba(12, 24, 46, 0.82);
  color: #e8eef9;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 0 0 1px rgba(90, 169, 255, 0.08), 0 18px 44px rgba(0, 0, 0, 0.5), 0 0 26px rgba(90, 169, 255, 0.12);
}
html[data-design=dark] .design_switch:hover {
  border-color: rgba(140, 200, 255, 0.55);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 0 0 1px rgba(90, 169, 255, 0.2), 0 22px 50px rgba(0, 0, 0, 0.55), 0 0 34px rgba(90, 169, 255, 0.3);
}
html[data-design=dark] .ds_sw_base {
  border-color: rgba(90, 169, 255, 0.85);
  border-radius: 50%;
  background-color: rgba(10, 22, 44, 0.9);
  background-image: none;
  box-shadow: 0 0 10px rgba(90, 169, 255, 0.7), inset 0 0 8px rgba(90, 169, 255, 0.5);
}
html[data-design=dark] .ds_sw_orbit {
  opacity: 1;
  animation: ds_orbit 3.2s linear infinite;
}
html[data-design=dark] .ds_sw_shadow {
  background: rgba(90, 169, 255, 0.35);
  filter: blur(4px);
}
html[data-design=dark] .ds_sw_top {
  border-color: #5aa9ff;
  background: #0b1730;
}
html[data-design=dark] .ds_sw_top::before {
  opacity: 0;
}
html[data-design=dark] .ds_sw_top::after {
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  background: transparent;
  box-shadow: inset -4px 3px 0 0 #ffd27a, 0 0 6px rgba(255, 210, 122, 0.35);
  transform: rotate(-20deg);
}
html[data-design=dark] .ds_sw_bottom {
  background: #050b18;
}
html[data-design=dark] .ds_sw_next {
  color: #9db0cb;
}
html[data-design=dark] .ds_sw_next::before {
  color: #ffa45c;
}
html[data-design=dark] .design_switch:hover .ds_sw_next {
  color: #e8eef9;
}
html[data-design=dark] .ds_sw_mode_light {
  display: none;
}
html[data-design=dark] .ds_sw_mode_dark {
  display: inline;
}

@keyframes ds_orbit {
  from {
    transform: scaleY(0.42) rotate(0deg);
  }
  to {
    transform: scaleY(0.42) rotate(360deg);
  }
}
/* ---------- 切り替えの演出：斜めのブラインド ---------- */
@property --ds_slat {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --ds_sweep {
  syntax: "<percentage>";
  inherits: false;
  initial-value: -40%;
}
::view-transition-old(root) {
  animation: ds_old 0.95s cubic-bezier(0.65, 0, 0.25, 1) both;
}

::view-transition-new(root) {
  -webkit-mask-image: repeating-linear-gradient(-55deg, #000 0 var(--ds_slat), transparent var(--ds_slat) 56px), linear-gradient(35deg, #000 var(--ds_sweep), transparent calc(var(--ds_sweep) + 40%));
  mask-image: repeating-linear-gradient(-55deg, #000 0 var(--ds_slat), transparent var(--ds_slat) 56px), linear-gradient(35deg, #000 var(--ds_sweep), transparent calc(var(--ds_sweep) + 40%));
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  animation: ds_slat 0.95s cubic-bezier(0.55, 0, 0.3, 1) both, ds_sweep 0.8s cubic-bezier(0.45, 0, 0.25, 1) both;
}

@keyframes ds_slat {
  from {
    --ds_slat: 0px;
  }
  to {
    --ds_slat: 56px;
  }
}
@keyframes ds_sweep {
  from {
    --ds_sweep: -40%;
  }
  to {
    --ds_sweep: 100%;
  }
}
@keyframes ds_old {
  to {
    transform: scale(0.965);
    filter: brightness(0.75);
  }
}
/* ---------- ページ内リンク：右端の階数表示 ---------- */
.ds_lift {
  position: fixed;
  top: 50%;
  right: 18px;
  z-index: 950;
  padding: 12px 12px 12px 22px;
  border: 2px solid #2b3140;
  border-radius: 6px;
  background: #ffffff;
  color: #2b3140;
  font-family: "IBM Plex Mono", Consolas, "Courier New", monospace;
  font-size: 11px;
  box-shadow: 4px 4px 0 #2b3140;
  pointer-events: none;
  opacity: 0;
  transform: translate(24px, -50%);
  transition: opacity 0.25s, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (max-width: 640px) {
  .ds_lift {
    right: 10px;
    padding: 8px 8px 8px 18px;
    font-size: 10px;
  }
}

html.is_lift_on .ds_lift {
  opacity: 1;
  transform: translate(0, -50%);
}

.ds_lift_list {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ds_lift_list::before {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: -12px;
  width: 2px;
  content: "";
  background: currentColor;
  opacity: 0.18;
}

.ds_lift_item {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 22px;
  white-space: nowrap;
  opacity: 0.45;
  transition: opacity 0.2s;
}
.ds_lift_item b {
  font-weight: 500;
  opacity: 0.6;
}
.ds_lift_item.is_target {
  opacity: 1;
  font-weight: 700;
}

.ds_lift_dot {
  position: absolute;
  top: 0;
  left: -16px;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: #3b68b5;
  transform: translateY(var(--y, 0px));
}

.ds_lift_item.is_target::after {
  content: "◀";
  margin-left: 2px;
  font-size: 9px;
  animation: ds_blink 0.5s steps(2, jump-none) infinite;
}

@keyframes ds_blink {
  50% {
    opacity: 0;
  }
}
html[data-design=dark] .ds_lift {
  border-color: #5aa9ff;
  background: #0b1730;
  color: #e8eef9;
  box-shadow: 4px 4px 0 #5aa9ff;
}
html[data-design=dark] .ds_lift_dot {
  background: #ffa45c;
}

/* ---------- 着いたセクションの見出し：蛍光ペン ---------- */
.ds_mark {
  background-image: linear-gradient(transparent 58%, rgba(59, 104, 181, 0.24) 58%, rgba(59, 104, 181, 0.24) 92%, transparent 92%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.ds_mark.is_marked {
  animation: ds_mark 1.6s cubic-bezier(0.3, 0.7, 0.2, 1) both;
}

@keyframes ds_mark {
  0% {
    background-size: 0% 100%;
  }
  35% {
    background-size: 100% 100%;
  }
  80% {
    background-size: 100% 100%;
    opacity: 1;
  }
  100% {
    background-size: 100% 100%;
  }
}
html[data-design=dark] .ds_mark {
  background-image: linear-gradient(transparent 58%, rgba(255, 164, 92, 0.32) 58%, rgba(255, 164, 92, 0.32) 92%, transparent 92%);
}