/* ============================================================
   07 扁平化 / Flat Design · 2013—2018
   纯色块 / 无阴影 / 大无衬线 / Material 配色
   ============================================================ */
:root[data-theme="flat"] {
  --paper: #fbfbfb;
  --butter: #f4f6f8;
  --sky: #ffffff;
  --ink: #212121;
  --rose: #00abd3;
  --pink: #ff6352;
  --wine: #37474f;
  --fl-blue: #0090b8;
  --fl-red: #ff6352;
  --fl-orange: #ff7c44;
  --fl-green: #45a151;
  --fl-yellow: #ffbc08;
  --fl-violet: #7e5cfe;
  --fl-grey: #eceff1;
  --sans: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
}

:root[data-theme="flat"] body { background: #fbfbfb; }

/* 大标题：粗、紧、纯黑，走 Metro / Material 的 type scale */
:root[data-theme="flat"] .display,
:root[data-theme="flat"] .hero__title {
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: .94;
}
:root[data-theme="flat"] .display em,
:root[data-theme="flat"] .hero__title em {
  color: var(--fl-blue);
  text-shadow: none;
  -webkit-text-stroke: 0;
  background: none;
  -webkit-text-fill-color: currentColor;
}
:root[data-theme="flat"] .display--light { color: #fff; }
:root[data-theme="flat"] .display--light em { color: var(--fl-yellow); }

/* 全部去掉装饰：直角、无阴影、无倾斜 */
:root[data-theme="flat"] .btn,
:root[data-theme="flat"] .chips li,
:root[data-theme="flat"] .copybtn,
:root[data-theme="flat"] .brand,
:root[data-theme="flat"] .menu__link--cta,
:root[data-theme="flat"] .art__tag,
:root[data-theme="flat"] .cursor span {
  border-radius: 2px;
  box-shadow: none;
  transform: none;
  border: 0;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: .02em;
}
:root[data-theme="flat"] .btn > *,
:root[data-theme="flat"] .chips li > * { transform: none; }
:root[data-theme="flat"] .btn {
  background: var(--fl-blue);
  color: #fff;
  padding: 14px 26px;
}
:root[data-theme="flat"] .btn:hover { background: #007a9c; transform: none; }
:root[data-theme="flat"] .btn:hover i { transform: translateY(2px); }
:root[data-theme="flat"] .ghostlink { color: var(--fl-blue); text-decoration: underline; text-underline-offset: 4px; }
:root[data-theme="flat"] .brand { background: var(--ink); color: #fff; }
:root[data-theme="flat"] .menu__link { color: #455a64; }
:root[data-theme="flat"] .menu__link[aria-current="true"] { color: var(--fl-blue); }
:root[data-theme="flat"] .menu__link--cta { background: var(--fl-blue); color: #fff; }
:root[data-theme="flat"] .menu__link--cta[aria-current="true"] { background: var(--fl-red); color: #fff; }
:root[data-theme="flat"] .chips li { background: var(--fl-grey); color: #37474f; }
:root[data-theme="flat"] .chips li:nth-child(1) { background: #e1f5fe; color: #0277bd; }
:root[data-theme="flat"] .chips li:nth-child(2) { background: #fff3e0; color: #ef6c00; }
:root[data-theme="flat"] .chips li:nth-child(3) { background: #e8f5e9; color: #2e7d32; }
:root[data-theme="flat"] .chips li:nth-child(4) { background: #f3e5f5; color: #6a1b9a; }

:root[data-theme="flat"] .kicker { color: var(--fl-blue); font-family: var(--sans); font-weight: 600; letter-spacing: .16em; }
:root[data-theme="flat"] .kicker b { color: var(--fl-red); font-weight: 700; }
:root[data-theme="flat"] .kicker--light { color: rgba(255, 255, 255, .78); }
:root[data-theme="flat"] .kicker--light b { color: var(--fl-yellow); }

/* 首屏：Material 色的四格马赛克 + 白色圆环 */
:root[data-theme="flat"] .art__slab {
  left: 2%;
  top: 6%;
  width: 96%;
  padding-bottom: 96%;
  border-radius: 0;
  background:
    linear-gradient(135deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, 0) 46%),
    conic-gradient(from 45deg at 50% 50%, var(--fl-blue) 0 25%, var(--fl-red) 25% 50%, var(--fl-yellow) 50% 75%, var(--fl-green) 75% 100%);
  transform: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}
:root[data-theme="flat"] .art__ring {
  width: 30%;
  height: 30%;
  aspect-ratio: 1;
  border: 16px solid #fff;
  border-radius: 50%;
  background: transparent;
  transform: none;
  opacity: 1;
  left: 50%;
  top: 50%;
  margin: -15% 0 0 -15%;
}
:root[data-theme="flat"] .art__cube {
  width: 18%;
  border-radius: 0;
  background: var(--fl-violet);
  --rest: rotate(0deg);
}
:root[data-theme="flat"] .art__pip {
  width: clamp(30px, 8%, 48px);
  border-radius: 50%;
  background: var(--fl-orange);
}
:root[data-theme="flat"] .art__frame {
  border: 6px solid #fff;
  border-radius: 0;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
  --rest: rotate(0deg);
}
:root[data-theme="flat"] .art__frame img { border-radius: 0; }
:root[data-theme="flat"] .art__tag { background: #fff; color: #37474f; border-left: 3px solid var(--fl-red); padding-left: 10px; }
:root[data-theme="flat"] .art__tag span { color: #37474f; }
:root[data-theme="flat"] .art__badge { display: none; }
:root[data-theme="flat"] .hero__stamp { color: #607d8b; }

:root[data-theme="flat"] .topbar { border-bottom: 1px solid #e0e0e0; background: #fff; }
:root[data-theme="flat"] .topbar.is-stuck { background: #fff; backdrop-filter: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .06); }
:root[data-theme="flat"] .hero { background: #fbfbfb; }
:root[data-theme="flat"] .about { background: #fff; }
:root[data-theme="flat"] .about::before { background: var(--fl-blue); border-radius: 0; transform: translate(50%, -50%) rotate(45deg); }
:root[data-theme="flat"] .services { background: #f4f6f8; }
:root[data-theme="flat"] .skills { background: #fff; }

/* 卡片：2px 线 + 无阴影，hover 只换底色 */
:root[data-theme="flat"] .rows { border-top: 1px solid #cfd8dc; }
:root[data-theme="flat"] .rows__item { border-bottom: 1px solid #cfd8dc; }
:root[data-theme="flat"] .row::before { background: #e1f5fe; }
:root[data-theme="flat"] .row:hover, :root[data-theme="flat"] .row:focus-visible { color: var(--ink); }
:root[data-theme="flat"] .row__idx { color: var(--fl-red); }
:root[data-theme="flat"] .row__name { color: #212121; }
:root[data-theme="flat"] .row__desc { color: #607d8b; }
:root[data-theme="flat"] .row__type { color: #607d8b; }
:root[data-theme="flat"] .row__go { color: var(--fl-blue); }

:root[data-theme="flat"] .acc { border-top: 1px solid #cfd8dc; }
:root[data-theme="flat"] .acc__item { border-bottom: 1px solid #cfd8dc; }
:root[data-theme="flat"] .acc__btn:hover { background: #f5f5f5; }
:root[data-theme="flat"] .acc__plus { background: #eceff1; color: #37474f; border-radius: 50%; width: 28px; height: 28px; }
:root[data-theme="flat"] .acc__item.is-open .acc__plus { background: var(--fl-blue); color: #fff; }
:root[data-theme="flat"] .acc__idx { color: var(--fl-red); opacity: 1; }
:root[data-theme="flat"] .acc__title { color: #212121; }
:root[data-theme="flat"] .acc__inner p { color: #455a64; }

:root[data-theme="flat"] .facts > div { border-top: 1px solid #eceff1; }
:root[data-theme="flat"] .facts dt { color: #607d8b; }
:root[data-theme="flat"] .facts dd { color: #212121; }
:root[data-theme="flat"] .copy { color: #455a64; }
:root[data-theme="flat"] .note { color: #78909c; }

:root[data-theme="flat"] .ticker { background: var(--fl-blue); }
:root[data-theme="flat"] .ticker__run { color: #fff; }
:root[data-theme="flat"] .ticker__run i { color: #fff; opacity: .8; }
:root[data-theme="flat"] .flow { background: #37474f; }
:root[data-theme="flat"] .flow__step h3 { color: #fff; }
:root[data-theme="flat"] .flow__step p { color: rgba(255, 255, 255, .72); }
:root[data-theme="flat"] .flow__list::before { background: rgba(255, 255, 255, .25); }
:root[data-theme="flat"] .flow__list li::before { background: var(--fl-yellow); }
:root[data-theme="flat"] .flow__no { color: rgba(255, 255, 255, .55); }

:root[data-theme="flat"] .contact { background: #37474f; }
:root[data-theme="flat"] .contact::after {
  content: "○";
  color: var(--fl-blue);
  opacity: .22;
  font-size: clamp(8rem, 20vw, 17rem);
  text-shadow: none;
}
:root[data-theme="flat"] .mail { color: #fff; background-image: linear-gradient(var(--fl-yellow), var(--fl-yellow)); }
:root[data-theme="flat"] .mail:hover { color: var(--fl-yellow); }
:root[data-theme="flat"] .copybtn { background: var(--fl-yellow); color: #212121; }
:root[data-theme="flat"] .copybtn:hover { background: #ffd54f; }
:root[data-theme="flat"] .tel { color: #fff; border-color: rgba(255, 255, 255, .4); }
:root[data-theme="flat"] .note--light { color: rgba(255, 255, 255, .7); }
:root[data-theme="flat"] .foot { background: #263238; color: rgba(255, 255, 255, .7); }
:root[data-theme="flat"] .ruler i { background: var(--fl-blue); }
:root[data-theme="flat"] .curtain { background: #fbfbfb; }
:root[data-theme="flat"] .curtain__star { color: var(--fl-blue); }
:root[data-theme="flat"] .curtain__sky { background: var(--fl-red); }
:root[data-theme="flat"] .curtain__title { color: #212121; }
:root[data-theme="flat"] .curtain__title span { color: #fff; text-shadow: none; background: var(--fl-blue); padding: 0 .08em; }
:root[data-theme="flat"] .cursor span { background: var(--fl-blue); color: #fff; }

/* --- 字体 --- */
:root[data-theme="flat"] {
  --sans: "Roboto", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  --display: "Roboto", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
}