/* towow.net 首页：实验室的账。纸、墨、左边一条脊，按月记，每条有日期，指向一份文件。
   桌上一盏灯是 ToWow 网络的实时画面。色与 towow.ai 首页的纸同一套：纸 #EDE6DA、墨 #0A0E14、钠灯只给灯和"现在"。 */
:root {
  --paper: #EDE6DA; --paper-2: #E4DCCE; --ink: #0A0E14; --ink-2: #4A5058; --ink-3: #8A9098;
  --line: rgba(10, 14, 20, 0.18); --line-2: rgba(10, 14, 20, 0.1);
  --sea: #05080C; --sodium: #FFB35C; --sodium-hi: #FFE2B0; --text: #EDE6DA; --dim: rgba(237, 230, 218, 0.62);
  --m: 64px;
  --sans: "Familjen Grotesk", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
html { line-break: strict; hanging-punctuation: allow-end; scroll-behavior: smooth; }
body { font: 17px/1.65 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3 { font-weight: 400; margin: 0; letter-spacing: 0; text-wrap: balance; }
p, dd, li { text-wrap: pretty; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.num, .d, .facts dt, .count { font-variant-numeric: tabular-nums; }

/* 顶栏 */
.top { position: absolute; z-index: 6; top: 22px; left: var(--m); right: var(--m); display: flex; align-items: baseline; gap: 22px; font-size: 14px; }
.top .mark { font-size: 18px; font-weight: 500; letter-spacing: 0.02em; margin-right: auto; }
.top .mark span { font-weight: 400; letter-spacing: 0; color: var(--ink-2); margin-left: 10px; font-size: 15px; }
.top nav { display: flex; gap: 22px; }
.top nav a { color: var(--ink-2); transition: color 0.25s; }
.top nav a:hover { color: var(--ink); }

main { padding: 0 var(--m); }

/* 第一屏：话在左，灯在右 */
.head { min-height: 92vh; display: grid; grid-template-columns: minmax(0, 560px) minmax(320px, 560px); gap: 48px 96px; align-items: center; justify-content: space-between; padding: 14vh 0 8vh; }
.head h1 { font-size: 44px; line-height: 1.16; }
.head .intro { margin-top: 24px; color: var(--ink-2); max-width: 30em; }
.facts { display: flex; flex-wrap: wrap; gap: 10px 36px; margin: 32px 0 0; }
.facts div { display: flex; gap: 8px; align-items: baseline; }
.facts dt { font-size: 26px; font-weight: 500; line-height: 1; }
.facts dd { margin: 0; font-size: 14px; color: var(--ink-2); }

.picks { margin-top: 40px; }
.picks h2 { font-size: 13px; color: var(--ink-2); margin-bottom: 10px; }
.picks ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-width: 30em; }
.picks li { display: grid; grid-template-columns: 4.2em minmax(0, 1fr); gap: 12px; align-items: baseline; font-size: 16px; line-height: 1.45; }
.picks .c { font-size: 13px; color: var(--ink-2); }
.picks a { border-bottom: 1px solid var(--line); transition: border-color 0.25s; }
.picks a:hover { border-color: var(--ink); }
.lamp { display: block; position: relative; aspect-ratio: 16 / 10; background: var(--sea); overflow: hidden; box-shadow: 0 30px 80px -30px rgba(10, 14, 20, 0.5); }
.lamp iframe { width: 100%; height: 100%; border: 0; display: block; pointer-events: none; opacity: 0; transition: opacity 1.2s; }
.lamp.ready iframe { opacity: 1; }
.lamp::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--sodium-hi); box-shadow: 0 0 24px 8px rgba(255, 179, 92, 0.45); animation: breathe 4s ease-in-out infinite; }
.lamp.ready::before { display: none; }
@keyframes breathe { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.desk .note { margin-top: 14px; font-size: 14px; color: var(--ink-2); max-width: 36em; }
.desk .note a, .desk .note b { font-weight: 400; color: var(--ink); }

/* 筛选：一行字，当前的那个墨色加下划线 */
.pick { display: flex; flex-wrap: wrap; gap: 6px 26px; font-size: 15px; padding: 0 0 18px; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; background: var(--paper); padding-top: 18px; }
.pick button { color: var(--ink-2); display: flex; gap: 6px; align-items: baseline; border-bottom: 1px solid transparent; padding-bottom: 1px; transition: color 0.25s, border-color 0.25s; }
.pick button .count { font-size: 12px; color: var(--ink-3); }
.pick button:hover { color: var(--ink); }
.pick button.on { color: var(--ink); border-color: var(--ink); }

/* 账：每个月一组，左边巨大的月份数字，右边一条条记录 */
.months { padding-top: 8vh; }
.month { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0 56px; padding: 0 0 10vh; }
.month.hide { display: none; }
.num { position: sticky; top: 72px; align-self: start; line-height: 1; color: var(--ink); transition: opacity 0.5s; opacity: 0.28; }
.month.now .num { opacity: 1; }
.num b { display: block; font-weight: 400; font-size: 168px; line-height: 0.86; letter-spacing: -0.04em; margin-left: -0.05em; }
.num .y { display: block; font-size: 14px; color: var(--ink-2); margin-bottom: 14px; }
.num .mo { display: block; font-size: 14px; color: var(--ink-2); margin-top: 12px; }

.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); position: relative; }
.rows::before { content: ""; position: absolute; left: -22px; top: 0; bottom: 0; width: 1px; background: var(--line-2); }
.row { display: grid; grid-template-columns: 5.2em 6.2em minmax(0, 1fr); gap: 0 20px; padding: 18px 0 20px; border-bottom: 1px solid var(--line-2); align-items: baseline; position: relative; }
.row.hide { display: none; }
.row .d { font-size: 15px; color: var(--ink-2); }
.row .d.ditto { color: transparent; }
.row .d.ditto::before { content: "〃"; font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", sans-serif; color: var(--ink-3); position: absolute; left: 0.9em; }
.row .c { font-size: 13px; color: var(--ink-2); }
.row .title { font-size: 19px; line-height: 1.4; display: inline; border-bottom: 1px solid transparent; transition: border-color 0.25s; }
.row:hover .title { border-color: var(--ink); }
.row p { margin-top: 6px; font-size: 15px; color: var(--ink-2); max-width: 40em; }
.row .en { font-size: 13px; color: var(--ink-3); margin-left: 10px; white-space: nowrap; }
.row .en:hover { color: var(--ink); }
.row .host { font-size: 13px; color: var(--ink-3); margin-top: 4px; font-family: var(--mono); }

/* 进入视野时轻轻浮起 */
.row { opacity: 0; transform: translateY(8px); transition: opacity 0.6s, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.row.in { opacity: 1; transform: none; }
.row:hover .d:not(.ditto) { color: var(--ink); }

/* 账的脊：当前月的那一条旁边一点钠灯色，是"读到这里" */
.row.cur::before { content: ""; position: absolute; left: -25px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--sodium); box-shadow: 0 0 10px 2px rgba(255, 179, 92, 0.5); }

/* 人 */
.nature { padding: 10vh 0 12vh; border-top: 1px solid var(--line); }
.nature h2 { font-size: 14px; color: var(--ink-2); margin-bottom: 18px; }
.nature p { max-width: 32em; }
.links { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 22px; font-size: 15px; }
.links a { border-bottom: 1px solid var(--line); padding-bottom: 1px; transition: border-color 0.25s; }
.links a:hover { border-color: var(--ink); }

footer { display: flex; gap: 22px; align-items: baseline; font-size: 13px; color: var(--ink-2); padding: 0 0 36px; border-top: 1px solid var(--line); padding-top: 22px; }
footer nav { display: flex; gap: 22px; margin: 0 auto; }
footer a:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .row { opacity: 1; transform: none; transition: none; }
  .lamp::before { animation: none; }
}

@media (max-width: 1100px) {
  .head { grid-template-columns: minmax(0, 1fr) minmax(300px, 46%); gap: 40px 56px; }
  .month { grid-template-columns: 150px minmax(0, 1fr); gap: 0 36px; }
  .num b { font-size: 120px; }
}
@media (max-width: 860px) {
  :root { --m: 20px; }
  body { font-size: 16px; }
  .top { top: 16px; gap: 14px; font-size: 13px; }
  .top .mark span { display: none; }
  .top nav { gap: 14px; }
  .head { min-height: 0; grid-template-columns: 1fr; gap: 36px; padding: 96px 0 56px; }
  .head h1 { font-size: 32px; }
  .facts { gap: 8px 24px; }
  .facts dt { font-size: 22px; }
  .lamp { box-shadow: none; }
  .rows::before { display: none; }
  .pick { gap: 4px 18px; font-size: 14px; }
  .months { padding-top: 32px; }
  .month { grid-template-columns: 1fr; gap: 14px; padding-bottom: 56px; }
  .num { position: static; display: flex; align-items: baseline; gap: 10px; }
  .num b { font-size: 64px; line-height: 1; margin: 0; }
  .num .y, .num .mo { margin: 0; }
  .num .y { order: 2; }
  .num .mo { order: 1; }
  .row { grid-template-columns: 4.6em minmax(0, 1fr); gap: 2px 14px; padding: 16px 0; }
  .row .c { grid-column: 2; order: -1; }
  .row .d { grid-row: 1 / span 2; }
  .row .d.ditto::before { left: 0.6em; }
  .row .title { font-size: 17px; }
  .row p { font-size: 14px; }
  .row.cur::before { left: -14px; }
  .rows::before { display: block; left: -12px; }
  .nature { padding: 56px 0 64px; }
  footer { flex-wrap: wrap; gap: 12px 18px; }
  footer nav { margin: 0; width: 100%; order: 3; }
}

@media (scripting: none) { .row { opacity: 1; transform: none; } }