/* 178tw 應用平台 — Base · AI 宇宙風格 */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: 1.75;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}

/* ---------- 宇宙背景層（靜態星場：不做位移／閃爍動畫，
   避免與內容層的轉場動畫互相干擾造成首次繪製閃爍） ---------- */
.cosmos {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image: var(--neb-1), var(--neb-2), var(--neb-3);
  background-color: var(--bg);
}
/* 深空底部的銀河帶 */
.cosmos::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 60% at 50% 120%, rgba(79,107,216,.20), transparent 70%);
}

.stars, .stars i {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: var(--star-op);
  transition: opacity .4s var(--ease);
}
.stars i { position: absolute; display: block; }

.stars .s1 {
  background-image:
    radial-gradient(1px 1px at 190px 284px, rgba(255,255,255,0.71), transparent),
    radial-gradient(1px 1px at 705px 463px, rgba(255,255,255,0.46), transparent),
    radial-gradient(1px 1px at 205px 111px, rgba(255,255,255,0.77), transparent),
    radial-gradient(1px 1px at 604px 440px, rgba(255,255,255,0.71), transparent),
    radial-gradient(1px 1px at 191px 647px, rgba(255,255,255,0.76), transparent),
    radial-gradient(1px 1px at 318px 120px, rgba(255,255,255,0.71), transparent),
    radial-gradient(1px 1px at 808px 110px, rgba(255,255,255,0.62), transparent),
    radial-gradient(1px 1px at 705px 409px, rgba(255,255,255,0.56), transparent),
    radial-gradient(1px 1px at 41px 317px, rgba(255,255,255,0.91), transparent),
    radial-gradient(1px 1px at 678px 455px, rgba(255,255,255,0.51), transparent),
    radial-gradient(1px 1px at 424px 316px, rgba(255,255,255,0.66), transparent),
    radial-gradient(1px 1px at 386px 790px, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 493px 146px, rgba(255,255,255,0.86), transparent),
    radial-gradient(1px 1px at 726px 49px, rgba(255,255,255,0.91), transparent),
    radial-gradient(1px 1px at 607px 372px, rgba(255,255,255,0.59), transparent),
    radial-gradient(1px 1px at 71px 237px, rgba(255,255,255,0.56), transparent),
    radial-gradient(1px 1px at 551px 376px, rgba(255,255,255,0.44), transparent),
    radial-gradient(1px 1px at 146px 378px, rgba(255,255,255,0.79), transparent),
    radial-gradient(1px 1px at 144px 519px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 13px 319px, rgba(255,255,255,0.58), transparent),
    radial-gradient(1px 1px at 857px 176px, rgba(255,255,255,0.68), transparent),
    radial-gradient(1px 1px at 652px 78px, rgba(255,255,255,0.54), transparent),
    radial-gradient(1px 1px at 457px 11px, rgba(255,255,255,0.89), transparent),
    radial-gradient(1px 1px at 377px 404px, rgba(255,255,255,0.64), transparent),
    radial-gradient(1px 1px at 830px 859px, rgba(255,255,255,0.48), transparent),
    radial-gradient(1px 1px at 602px 276px, rgba(255,255,255,0.54), transparent),
    radial-gradient(1px 1px at 227px 60px, rgba(255,255,255,0.53), transparent),
    radial-gradient(1px 1px at 550px 608px, rgba(255,255,255,0.78), transparent),
    radial-gradient(1px 1px at 282px 251px, rgba(255,255,255,0.61), transparent),
    radial-gradient(1px 1px at 673px 863px, rgba(255,255,255,0.68), transparent),
    radial-gradient(1px 1px at 528px 889px, rgba(255,255,255,0.51), transparent),
    radial-gradient(1px 1px at 402px 294px, rgba(255,255,255,0.71), transparent),
    radial-gradient(1px 1px at 542px 505px, rgba(255,255,255,0.47), transparent),
    radial-gradient(1px 1px at 827px 378px, rgba(255,255,255,0.44), transparent),
    radial-gradient(1px 1px at 850px 815px, rgba(255,255,255,0.51), transparent),
    radial-gradient(1px 1px at 634px 35px, rgba(255,255,255,0.78), transparent),
    radial-gradient(1px 1px at 59px 502px, rgba(255,255,255,0.9), transparent),
    radial-gradient(1px 1px at 460px 282px, rgba(255,255,255,0.94), transparent),
    radial-gradient(1px 1px at 193px 69px, rgba(255,255,255,0.94), transparent),
    radial-gradient(1px 1px at 887px 484px, rgba(255,255,255,0.83), transparent),
    radial-gradient(1px 1px at 672px 414px, rgba(255,255,255,0.95), transparent),
    radial-gradient(1px 1px at 705px 833px, rgba(255,255,255,0.56), transparent),
    radial-gradient(1px 1px at 48px 599px, rgba(255,255,255,0.9), transparent),
    radial-gradient(1px 1px at 471px 163px, rgba(255,255,255,0.94), transparent),
    radial-gradient(1px 1px at 642px 81px, rgba(255,255,255,0.85), transparent),
    radial-gradient(1px 1px at 176px 19px, rgba(255,255,255,0.83), transparent);
  background-size: 900px 900px;
}
.stars .s2 {
  background-image:
    radial-gradient(2px 2px at 29px 460px, rgba(255,255,255,0.55), transparent),
    radial-gradient(2px 2px at 445px 537px, rgba(255,255,255,0.56), transparent),
    radial-gradient(2px 2px at 133px 108px, rgba(255,255,255,0.53), transparent),
    radial-gradient(2px 2px at 381px 340px, rgba(255,255,255,0.34), transparent),
    radial-gradient(2px 2px at 630px 294px, rgba(255,255,255,0.64), transparent),
    radial-gradient(2px 2px at 459px 604px, rgba(255,255,255,0.37), transparent),
    radial-gradient(2px 2px at 74px 204px, rgba(255,255,255,0.42), transparent),
    radial-gradient(2px 2px at 698px 228px, rgba(255,255,255,0.66), transparent),
    radial-gradient(2px 2px at 683px 596px, rgba(255,255,255,0.52), transparent),
    radial-gradient(2px 2px at 123px 487px, rgba(255,255,255,0.37), transparent),
    radial-gradient(2px 2px at 655px 676px, rgba(255,255,255,0.57), transparent),
    radial-gradient(2px 2px at 274px 608px, rgba(255,255,255,0.51), transparent),
    radial-gradient(2px 2px at 121px 71px, rgba(255,255,255,0.4), transparent),
    radial-gradient(2px 2px at 657px 514px, rgba(255,255,255,0.34), transparent),
    radial-gradient(2px 2px at 680px 290px, rgba(255,255,255,0.48), transparent),
    radial-gradient(2px 2px at 315px 394px, rgba(255,255,255,0.75), transparent),
    radial-gradient(2px 2px at 142px 623px, rgba(255,255,255,0.6), transparent),
    radial-gradient(2px 2px at 383px 180px, rgba(255,255,255,0.72), transparent),
    radial-gradient(2px 2px at 5px 409px, rgba(255,255,255,0.35), transparent),
    radial-gradient(2px 2px at 461px 141px, rgba(255,255,255,0.64), transparent),
    radial-gradient(2px 2px at 522px 481px, rgba(255,255,255,0.7), transparent),
    radial-gradient(2px 2px at 335px 650px, rgba(255,255,255,0.68), transparent),
    radial-gradient(2px 2px at 363px 267px, rgba(255,255,255,0.61), transparent),
    radial-gradient(2px 2px at 536px 120px, rgba(255,255,255,0.67), transparent),
    radial-gradient(2px 2px at 33px 206px, rgba(255,255,255,0.38), transparent),
    radial-gradient(2px 2px at 476px 98px, rgba(255,255,255,0.61), transparent);
  background-size: 700px 700px;
}
.stars .s3 {
  background-image:
    radial-gradient(2px 2px at 564px 375px, rgba(255,255,255,0.49), transparent),
    radial-gradient(2px 2px at 47px 861px, rgba(255,255,255,0.83), transparent),
    radial-gradient(2px 2px at 972px 779px, rgba(255,255,255,0.96), transparent),
    radial-gradient(2px 2px at 509px 13px, rgba(255,255,255,0.82), transparent),
    radial-gradient(2px 2px at 666px 799px, rgba(255,255,255,0.99), transparent),
    radial-gradient(2px 2px at 167px 817px, rgba(255,255,255,0.66), transparent),
    radial-gradient(2px 2px at 165px 879px, rgba(255,255,255,0.7), transparent),
    radial-gradient(2px 2px at 1060px 292px, rgba(255,255,255,0.67), transparent),
    radial-gradient(2px 2px at 192px 1006px, rgba(255,255,255,0.97), transparent),
    radial-gradient(2px 2px at 370px 249px, rgba(255,255,255,0.62), transparent),
    radial-gradient(2px 2px at 279px 436px, rgba(255,255,255,0.53), transparent),
    radial-gradient(2px 2px at 429px 1040px, rgba(255,255,255,0.85), transparent),
    radial-gradient(2px 2px at 202px 484px, rgba(255,255,255,0.78), transparent),
    radial-gradient(2px 2px at 1031px 345px, rgba(255,255,255,0.77), transparent),
    radial-gradient(2px 2px at 101px 330px, rgba(255,255,255,0.6), transparent),
    radial-gradient(2px 2px at 956px 68px, rgba(255,255,255,0.8), transparent),
    radial-gradient(2px 2px at 900px 894px, rgba(255,255,255,0.93), transparent),
    radial-gradient(2px 2px at 681px 313px, rgba(255,255,255,0.89), transparent);
  background-size: 1100px 1100px;
  animation: twinkle 7s ease-in-out infinite alternate;
}


@keyframes twinkle { from { opacity: .32; } to { opacity: .95; } }

h1, h2, h3, h4 { margin: 0; line-height: 1.28; font-weight: 800; letter-spacing: -.01em; font-family: var(--font-display); }
p { margin: 0 0 var(--s2); }
a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s3); position: relative; }

.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.xs    { font-size: var(--fs-xs); }
.center { text-align: center; }
.hidden { display: none !important; }

.grad-text {
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}

.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-size: var(--fs-xs); letter-spacing: .3em; text-transform: uppercase;
  color: var(--cyan); font-weight: 700;
}
.kicker::before {
  content: ""; width: 26px; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan));
}

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 8px; }
::selection { background: rgba(124, 92, 255, .45); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(150,165,255,.22); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(150,165,255,.38); }
::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  *, .stars i { animation: none !important; transition: none !important; }
}

main { padding-bottom: var(--s5); min-height: 60vh; }

.view { display: none; }
.view.active { display: block; }

/* 區段標題 */
.sec-head { margin: var(--s5) 0 var(--s3); }
.sec-head h2 { font-size: var(--fs-xl); display: flex; align-items: center; gap: 12px; }
.sec-head h2::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: var(--grad-plasma); box-shadow: var(--glow-c);
}
.sec-head p { margin: 8px 0 0 22px; color: var(--muted); font-size: var(--fs-sm); }

/* 分隔星軌 */
.rule {
  height: 1px; border: 0; margin: var(--s4) 0;
  background: linear-gradient(90deg, transparent, var(--line-2), transparent);
}

@media (max-width: 640px) {
  .wrap { padding: 0 var(--s2); }
  .sec-head { margin: var(--s4) 0 var(--s2); }
}

@media print {
  .cosmos, .stars, .topbar, .mobilebar, .cta-banner, .btn { display: none !important; }
  body { background: #fff; color: #000; }
}