@font-face { font-family: "Poppins"; src: url("../../../assets/fonts/Poppins-Regular.ttf") format("truetype"); font-weight: 400; }
@font-face { font-family: "Poppins"; src: url("../../../assets/fonts/Poppins-SemiBold.ttf") format("truetype"); font-weight: 600; }
@font-face { font-family: "Noto Sans SC"; src: url("../../../assets/fonts/NotoSansSC-Regular.ttf") format("truetype"); font-weight: 400; }
@font-face { font-family: "Noto Sans SC"; src: url("../../../assets/fonts/NotoSansSC-SemiBold.ttf") format("truetype"); font-weight: 600; }

:root {
  --ink: #0d3552;
  --ink-soft: #527185;
  --cyan: #4be0dc;
  --cyan-deep: #0aa8ad;
  --shadow: 0 18px 52px rgba(42, 114, 124, 0.1);
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ink);
  font-family: "Noto Sans SC", sans-serif;
  background:
    radial-gradient(circle at 8% 6%, rgba(183, 244, 213, 0.58), transparent 27%),
    radial-gradient(circle at 91% 12%, rgba(162, 221, 255, 0.46), transparent 28%),
    radial-gradient(circle at 50% 52%, rgba(230, 210, 255, 0.31), transparent 37%),
    linear-gradient(145deg, #f4fff9 0%, #eefbff 43%, #f6f2ff 72%, #edfff9 100%);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  opacity: 0.34;
  background-image: linear-gradient(rgba(48,142,156,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(48,142,156,.055) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: radial-gradient(circle at center, #000, transparent 78%);
}
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }

.bubble-canvas, .ambient-layer { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.bubble-canvas { z-index: 0; }
.ambient-layer { z-index: 0; overflow: hidden; }
.ambient-glow { position: absolute; border-radius: 50%; filter: blur(30px); opacity: .5; animation: drift 15s ease-in-out infinite alternate; }
.glow-one { width: 30vw; height: 30vw; left: -12vw; top: 18vh; background: rgba(64,222,188,.22); }
.glow-two { width: 34vw; height: 34vw; right: -14vw; top: 38vh; background: rgba(84,185,255,.18); animation-delay: -5s; }
.glow-three { width: 27vw; height: 27vw; left: 38vw; bottom: -13vw; background: rgba(174,124,242,.13); animation-delay: -9s; }

.page-header, .log-shell { position: relative; z-index: 2; width: min(1240px, calc(100% - 40px)); margin-inline: auto; }
.page-header { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 22px; min-height: 156px; padding: 26px 0 20px; }
.back-link {
  display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px;
  border: 1px solid rgba(64,171,158,.26); border-radius: 999px; color: var(--ink);
  background: rgba(255,255,255,.62); box-shadow: 0 9px 24px rgba(45,116,127,.08);
  text-decoration: none; white-space: nowrap; backdrop-filter: blur(12px);
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
}
.back-link:hover, .back-link:focus-visible { transform: translateY(-2px); border-color: rgba(10,168,173,.5); background: rgba(214,252,239,.9); }
.header-mark {
  display: grid; place-items: center; width: 74px; height: 74px; border: 1px solid rgba(49,187,173,.28); border-radius: 24px;
  background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(199,244,225,.66));
  box-shadow: 0 16px 38px rgba(36,145,139,.13), inset 0 0 20px rgba(255,255,255,.85); transform: rotate(-4deg);
}
.header-mark img { width: 39px; height: 39px; filter: hue-rotate(75deg) saturate(.85); }
.header-copy { min-width: 0; }
.eyebrow, .section-kicker, .log-track, .archive-footer span { font-family: "Poppins", "Noto Sans SC", sans-serif; }
.eyebrow { margin: 0 0 4px; color: var(--cyan-deep); font-size: .74rem; letter-spacing: .18em; }
.header-copy h1 { margin: 0; font-size: clamp(2rem, 4vw, 3.35rem); line-height: 1.12; letter-spacing: .08em; }
.header-copy > p:last-child { margin: 8px 0 0; color: var(--ink-soft); font-size: .95rem; }
.version-seal { display: grid; justify-items: end; padding: 14px 18px; border-right: 3px solid var(--cyan-deep); }
.version-seal span { color: var(--ink-soft); font: .65rem "Poppins", sans-serif; letter-spacing: .2em; }
.version-seal strong { font: 600 1.7rem/1.1 "Poppins", sans-serif; }

.archive-intro {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 34px; align-items: end; padding: clamp(26px,4vw,46px);
  border: 1px solid rgba(63,161,157,.19); border-radius: 30px;
  background: linear-gradient(130deg, rgba(255,255,255,.82), rgba(224,249,238,.72)); box-shadow: var(--shadow); backdrop-filter: blur(18px);
}
.section-kicker { color: var(--cyan-deep); font-size: .7rem; letter-spacing: .2em; }
.archive-intro h2 { max-width: 760px; margin: 8px 0 12px; font-size: clamp(1.55rem,3vw,2.55rem); line-height: 1.28; }
.archive-intro p { max-width: 780px; margin: 0; color: var(--ink-soft); line-height: 1.85; }
.archive-stats { display: flex; gap: 12px; margin: 0; }
.archive-stats div { min-width: 96px; padding: 17px 14px; border: 1px solid rgba(57,164,156,.18); border-radius: 18px; background: rgba(255,255,255,.56); text-align: center; }
.archive-stats dt { font: 600 1.45rem "Poppins", sans-serif; }
.archive-stats dd { margin: 3px 0 0; color: var(--ink-soft); font-size: .72rem; }

.log-filters {
  position: sticky; top: 12px; z-index: 10; display: flex; flex-wrap: wrap; justify-content: center; gap: 9px;
  width: max-content; max-width: calc(100% - 24px); margin: 24px auto 30px; padding: 9px;
  border: 1px solid rgba(73,161,159,.18); border-radius: 999px; background: rgba(250,255,253,.72);
  box-shadow: 0 12px 32px rgba(44,113,124,.09); backdrop-filter: blur(16px);
}
.filter-button { padding: 9px 15px; border: 0; border-radius: 999px; color: var(--ink-soft); background: transparent; cursor: pointer; transition: color 220ms ease, background 220ms ease, box-shadow 220ms ease; }
.filter-button:hover, .filter-button:focus-visible { color: var(--ink); background: rgba(205,246,228,.72); }
.filter-button.is-active { color: #073f4b; background: linear-gradient(135deg,#c7f1d9,#79e6df); box-shadow: 0 7px 18px rgba(27,163,157,.18); }

.timeline { position: relative; display: grid; gap: 18px; padding-bottom: 18px; }
.timeline::before { content: ""; position: absolute; top: 24px; bottom: 24px; left: 37px; width: 2px; background: linear-gradient(#a3dfc0,#4bded9 50%,#adc9ff); box-shadow: 0 0 14px rgba(47,199,193,.3); }
.log-card {
  position: relative; display: grid; grid-template-columns: 74px 190px minmax(0,1fr); gap: 24px; width: 100%; min-height: 208px;
  padding: clamp(24px,3vw,38px); overflow: hidden; border: 1px solid rgba(66,158,137,.2); border-radius: 26px;
  background: radial-gradient(circle at 96% 2%, rgba(255,255,255,.92), transparent 23%), linear-gradient(135deg,rgba(240,253,245,.92),rgba(220,247,231,.78));
  box-shadow: var(--shadow); opacity: 0; transform: translateY(26px);
  transition: opacity 560ms ease, transform 560ms cubic-bezier(.2,.78,.25,1), border-color 330ms ease, box-shadow 330ms ease, background 330ms ease;
}
.log-card::before, .log-card::after { content: ""; position: absolute; pointer-events: none; opacity: 0; transition: opacity 320ms ease, transform 500ms ease; }
.log-card::before { inset: 0; background: radial-gradient(circle at 82% 18%,rgba(255,255,255,.92) 0 2px,transparent 3px), radial-gradient(circle at 88% 36%,rgba(24,189,190,.4) 0 3px,transparent 4px), radial-gradient(circle at 94% 22%,rgba(255,255,255,.8) 0 5px,transparent 6px), linear-gradient(125deg,rgba(205,249,226,.2),rgba(71,224,218,.7)); }
.log-card::after { width: 210px; height: 210px; right: -72px; top: -84px; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; box-shadow: 0 0 0 18px rgba(255,255,255,.08),0 0 50px rgba(10,168,173,.24); transform: scale(.7); }
.log-card.is-visible { opacity: 1; transform: translateY(0); }
.log-card.is-filtered { display: none; }
.log-card:hover { transform: translateY(-5px); border-color: rgba(7,173,175,.52); background: linear-gradient(125deg,rgba(223,255,239,.97),rgba(91,226,220,.82)); box-shadow: 0 25px 68px rgba(18,147,149,.2), inset 0 0 40px rgba(255,255,255,.35); }
.log-card:hover::before, .log-card:hover::after { opacity: 1; }
.log-card:hover::after { transform: scale(1); }

.log-sequence { position: relative; z-index: 2; display: grid; place-items: center; align-self: start; width: 52px; height: 52px; border: 1px solid rgba(37,161,147,.3); border-radius: 17px; color: #087f86; background: rgba(255,255,255,.74); box-shadow: 0 8px 22px rgba(39,137,133,.12); font: 600 1rem "Poppins",sans-serif; }
.log-meta, .log-content { position: relative; z-index: 2; }
.log-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 5px; }
.log-meta time { color: #176d73; font: 600 .84rem/1.5 "Poppins","Noto Sans SC",sans-serif; }
.status { display: inline-flex; padding: 5px 10px; border: 1px solid transparent; border-radius: 999px; font-size: .7rem; white-space: nowrap; }
.status.done { color: #14704f; border-color: rgba(23,148,99,.18); background: rgba(200,245,219,.7); }
.status.experiment { color: #9a6200; border-color: rgba(214,153,34,.2); background: rgba(255,237,185,.72); }
.status.paused { color: #68549a; border-color: rgba(131,99,194,.2); background: rgba(235,225,255,.72); }
.status.current { color: #075f79; border-color: rgba(22,156,190,.22); background: rgba(194,240,248,.78); }
.log-track { margin: 0 0 7px; color: var(--cyan-deep); font-size: .72rem; letter-spacing: .13em; }
.log-content h3 { margin: 0 0 11px; font-size: clamp(1.18rem,2vw,1.56rem); line-height: 1.4; }
.log-content > p:not(.log-track) { margin: 0; color: #3f6470; font-size: .94rem; line-height: 1.9; }
.log-card:hover .log-content > p:not(.log-track) { color: #174f5a; }
.log-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 17px 0 0; padding: 0; list-style: none; }
.log-tags li { padding: 5px 9px; border: 1px solid rgba(41,144,143,.15); border-radius: 9px; color: #49727b; background: rgba(255,255,255,.54); font-size: .68rem; }

.archive-footer { display: grid; justify-items: center; margin: 38px 0 70px; padding: 42px 24px; border-top: 1px solid rgba(65,163,157,.22); text-align: center; }
.archive-footer span { color: var(--cyan-deep); font-size: .7rem; letter-spacing: .2em; }
.archive-footer p { margin: 8px 0 18px; color: var(--ink-soft); }
.archive-footer a { color: var(--ink); text-underline-offset: 5px; }
.to-top { position: fixed; right: 22px; bottom: 22px; z-index: 12; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(37,167,160,.28); border-radius: 15px; color: var(--ink); background: rgba(239,255,249,.82); box-shadow: 0 12px 28px rgba(39,130,137,.15); backdrop-filter: blur(12px); cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity 220ms ease,transform 220ms ease,background 220ms ease; }
.to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.to-top:hover { background: var(--cyan); }

@keyframes drift { from { transform: translate3d(-2%,-2%,0) scale(.96); } to { transform: translate3d(4%,4%,0) scale(1.08); } }
@media (max-width: 900px) {
  .page-header { grid-template-columns: auto 1fr auto; gap: 14px; }
  .header-mark { display: none; }
  .archive-intro { grid-template-columns: 1fr; }
  .archive-stats { width: 100%; }
  .archive-stats div { flex: 1; }
  .log-card { grid-template-columns: 58px minmax(0,1fr); gap: 16px; }
  .log-meta { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 0; }
  .log-content { grid-column: 2; }
  .timeline::before { left: 29px; }
}
@media (max-width: 640px) {
  .page-header, .log-shell { width: min(100% - 24px,1240px); }
  .page-header { grid-template-columns: 1fr auto; padding-top: 16px; }
  .back-link { grid-column: 1/-1; width: max-content; padding: 9px 13px; font-size: .82rem; }
  .header-copy > p:last-child { font-size: .82rem; line-height: 1.6; }
  .version-seal { padding: 10px 0 10px 12px; }
  .version-seal strong { font-size: 1.3rem; }
  .archive-intro { padding: 24px 20px; border-radius: 24px; }
  .archive-stats { gap: 6px; }
  .archive-stats div { min-width: 0; padding: 12px 5px; }
  .archive-stats dt { font-size: 1.08rem; }
  .log-filters { position: relative; top: auto; width: 100%; max-width: none; border-radius: 22px; }
  .filter-button { flex: 1 1 42%; padding: 8px 7px; font-size: .76rem; }
  .log-card { grid-template-columns: 44px minmax(0,1fr); min-height: 0; padding: 22px 17px; border-radius: 22px; }
  .timeline::before { left: 22px; }
  .log-sequence { width: 40px; height: 40px; border-radius: 13px; font-size: .78rem; }
  .log-meta, .log-content { grid-column: 2; }
  .log-meta { gap: 7px; }
  .log-meta time { font-size: .73rem; }
  .log-content > p:not(.log-track) { font-size: .86rem; line-height: 1.82; }
  .to-top { right: 13px; bottom: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .log-card { opacity: 1; transform: none; }
}