:root {
    --ink: #f7f5ff;
    --ink-soft: rgba(247, 245, 255, .72);
    --ink-faint: rgba(247, 245, 255, .5);
    --glass: rgba(28, 32, 64, .34);
    --glass-strong: rgba(28, 32, 64, .55);
    --line: rgba(255, 255, 255, .22);
    --accent: #ffd9a0;
    --ok: #b9e3a6;
    --serif: "Noto Serif TC", "Songti TC", serif;
    --sans: "Noto Sans TC", -apple-system, "PingFang TC", sans-serif;
    --gutter: clamp(16px, 4vw, 48px);
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; height: 100%; overflow: hidden; background: #2d3366; color: var(--ink); font-family: var(--sans); }
  canvas#scene { position: fixed; inset: 0; display: block; touch-action: none; }
  button { font: inherit; color: inherit; cursor: pointer; }
  .glass { background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2); }
  .ui { position: fixed; z-index: 2; text-shadow: 0 1px 8px rgba(10, 12, 40, .35); }
  .ui, .ui * { pointer-events: auto; }

  /* 明亮天空沿用 0.1 的深色文字，卡片仍保留原有玻璃配色。 */
  .top .brand, .hero, .hint, .foot {
    --ink-soft: var(--sky-soft, rgba(247, 245, 255, .72));
    --ink-faint: var(--sky-faint, rgba(247, 245, 255, .5));
    color: var(--sky-ink, #f7f5ff); text-shadow: none;
  }

  /* 上方品牌列 */
  .top { top: 0; left: 0; right: 0; padding: var(--gutter); display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
  .brand { display: flex; gap: 12px; align-items: center; }
  .brand svg { width: 34px; height: 26px; }
  .brand b { display: block; font-family: var(--serif); font-size: 20px; letter-spacing: .18em; }
  .pill { border-radius: 999px; padding: 9px 16px; font-size: 13px; letter-spacing: .08em; display: inline-flex; gap: 10px; align-items: center; }
  .pill:hover { background: var(--glass-strong); }

  /* 主標 */
  .hero { left: var(--gutter); top: clamp(96px, 14vh, 150px); max-width: 420px; pointer-events: none; }
  .hero h1 { font-family: var(--serif); font-weight: 700; font-size: clamp(26px, min(4.6vw, 5.4vh), 52px); line-height: 1.32; letter-spacing: .14em; margin: 16px 0 14px; }
  .hero p { font-size: 13px; line-height: 2; letter-spacing: .1em; color: var(--ink-soft); margin: 0; }

  /* 縮放控制 */
  .zoom { right: var(--gutter); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; }
  .zoom button { width: 48px; height: 48px; background: none; border: 0; display: grid; place-items: center; }
  .zoom button:hover { background: rgba(255, 255, 255, .12); }
  .zoom hr { width: 60%; margin: 0 auto; border: 0; border-top: 1px solid var(--line); }
  .zoom svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; }

  /* 下方卡片 */
  .dock { left: 50%; transform: translateX(-50%); bottom: calc(var(--gutter) + 28px); width: min(980px, calc(100% - 2 * var(--gutter)));
    display: grid; grid-template-columns: minmax(320px, 1.07fr) minmax(0, 1fr); gap: 14px; }
  .card { border-radius: 22px; padding: 18px 22px; }
  .time-card { padding-inline: 30px; min-width: 0; container-type: inline-size; }
  .time-head .faint { letter-spacing: .3em; }

  .time-footer { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 14px; }
  .time-footer .astro { justify-content: center; margin-top: 0; }
  .time-footer .actions { justify-content: center; width: 100%; }
  .hint { position: absolute; left: 0; right: 0; top: -34px; text-align: center; font-size: 11px; letter-spacing: .14em; color: var(--ink-faint); pointer-events: none; }
  .hint span + span::before { content: "｜"; margin: 0 10px; opacity: .5; }
  .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .muted { color: var(--ink-soft); font-size: 12px; letter-spacing: .06em; }
  .faint { color: var(--ink-faint); font-size: 10px; letter-spacing: .06em; }

  .weather-card { display: grid; grid-template-columns: 35% 65%; align-items: center; min-width: 0; container-type: inline-size; }
  .wx-reading { --weather-icon-size: clamp(28px, 11cqi, 52px); --weather-icon-rendered: calc(var(--weather-icon-size) * .8); --weather-condition-height: 16px; --weather-condition-font: 12px; --weather-reading-height: calc(var(--weather-icon-rendered) + 3px + var(--weather-condition-height)); display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: stretch; gap: 12px; padding-right: 10px; border-right: 1px solid var(--line); min-width: 0; }
  .wx-observation { display: grid; grid-template-columns: auto auto; grid-template-rows: var(--weather-icon-rendered) var(--weather-condition-height); align-items: center; column-gap: 6px; row-gap: 3px; min-width: 0; }
  .wx-observation #wxIcon { grid-column: 1; grid-row: 1; }
  .wx-observation #wxTemp { grid-column: 2; grid-row: 1 / span 2; height: var(--weather-reading-height); }
  .wx-observation #wxText { grid-column: 1; grid-row: 2; width: var(--weather-icon-rendered); height: var(--weather-condition-height); line-height: var(--weather-condition-height); font-size: var(--weather-condition-font); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wx-location { width: 100%; text-align: center; font-size: clamp(10.5px, 3cqi, 13.5px); line-height: 1.65; text-wrap: balance; color: var(--ink-soft); }
  .wx-location small { display: block; margin-top: 3px; font-size: clamp(5.5px, 1.7cqi, 7px); line-height: 1.6; letter-spacing: .2px; color: var(--ink-faint); }
  .wx-reading .temp { font-size: var(--weather-reading-height); line-height: 1; }
  .wx-reading .temp sup { font-size: .37em; }
  .wx-reading #wxIcon { display: inline-flex; flex: 0 0 auto; width: var(--weather-icon-rendered); height: var(--weather-icon-rendered); justify-content: center; }
  .wx-reading svg { width: 100%; height: auto; aspect-ratio: 1; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
  .temp { font-family: var(--serif); white-space: nowrap; flex: 0 0 auto; }
  .temp sup { vertical-align: top; margin-left: 1px; }
  .wx-information { display: flex; flex-direction: column; justify-content: center; gap: 15px; padding-inline: 18px 16px; min-width: 0; }
  .wx-main { display: flex; align-items: center; justify-content: center; width: 100%; gap: 7px; min-width: 0; }
  #wxSeg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; flex: 1; }
  #wxSeg button { min-width: 0; padding-inline: 0; }
  #wxText { font-size: 14px; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .seg { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px; gap: 1px; background: rgba(255, 255, 255, .08); flex: 0 0 auto; }
  .seg button { border: 0; background: none; border-radius: 999px; padding: 5px; font-size: 12px; line-height: 1.4; letter-spacing: 0; color: var(--ink-soft); white-space: nowrap; }
  .seg button[aria-pressed="true"] { background: rgba(255, 255, 255, .22); color: var(--ink); }
  .wx-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center; font-size: 13px; color: var(--ink-soft); }
  .wx-meta > div { display: flex; flex-direction: column; align-items: center; gap: 4px; white-space: nowrap; }
  .wx-meta b { color: var(--ink); font-weight: 500; font-size: 18px; }
  .wx-meta b small { font-size: .72em; font-weight: 400; }
  .wx-meta > div:first-child { align-items: flex-start; text-align: left; }
  .wx-meta > div:last-child { align-items: flex-end; text-align: right; }
  .wx-source { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--ink-faint); font-size: 11px; white-space: nowrap; }
  @container (max-width: 380px) {
    .wx-reading { --weather-icon-size: clamp(26px, 10cqi, 38px); --weather-condition-height: 15px; --weather-condition-font: 11px; gap: 5px; padding-right: 8px; }
    .wx-observation { column-gap: 4px; }
    .wx-information { padding-inline: 12px; gap: 14px; }
    .wx-main { gap: 5px; }
    #wxText { font-size: 12px; }
    .seg { padding: 2px; }
    .seg button { padding: 5px 4px; font-size: 11px; }
    .wx-meta { font-size: 12px; gap: 5px; }
    .wx-meta b { font-size: 16px; }
    .wx-source { font-size: 10px; gap: 6px; }
  }
  @container (max-width: 300px) {
    .wx-reading { --weather-icon-size: 26px; --weather-condition-height: 14px; --weather-condition-font: 10px; gap: 4px; padding-right: 6px; }
    .wx-observation { column-gap: 3px; }
    .wx-information { padding-inline: 8px; }
    #wxText { font-size: 11px; }
    .wx-main { gap: 4px; }
    .seg button { padding: 5px 3px; font-size: 10px; }
    .wx-meta { font-size: 11px; gap: 4px; }
    .wx-meta b { font-size: 14px; }
    .wx-source { font-size: 10px; gap: 4px; letter-spacing: -.3px; }
  }

  .time-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
  .time-head h2 { font-family: var(--serif); font-weight: 500; font-size: 18px; letter-spacing: .16em; margin: 6px 0 0; }
  .clock { display: flex; align-items: center; gap: 14px; }
  .clock b { font-family: var(--serif); font-size: 34px; font-weight: 500; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
  .clock span { border-left: 1px solid var(--line); padding-left: 14px; font-size: 12px; letter-spacing: .12em; color: var(--ink-soft); min-width: 64px; }
  @container (max-width: 360px) {
    .time-head { flex-direction: column; align-items: stretch; gap: 8px; }
    .time-head h2 { white-space: nowrap; }
    .time-head .faint { font-size: 8px; letter-spacing: .2em; }
    .time-head .clock { justify-content: space-between; }
  }
  .slider { position: relative; margin: 30px 4px 6px; height: 34px; }
  .track { position: absolute; left: 0; right: 0; top: 10px; height: 4px; border-radius: 4px; }
  .slider input { position: absolute; inset: 0 -4px; width: calc(100% + 8px); margin: 0; height: 24px; background: none; -webkit-appearance: none; appearance: none; }
  .slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff;
    border: 4px solid rgba(160, 200, 220, .85); box-shadow: 0 0 0 6px rgba(255, 255, 255, .15); cursor: grab; }
  .slider input::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 4px solid rgba(160, 200, 220, .85); cursor: grab; }
  .slider input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgba(255, 217, 160, .5); }
  .marks { position: absolute; left: 0; right: 0; top: 24px; height: 14px; font-size: 10px; color: var(--ink-soft); pointer-events: none; }
  .marks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
  .marks span.moon { top: -40px; color: #c9d4ff; font-size: 10px; }
  .marks span.moon::after { content: ""; position: absolute; left: 50%; top: 14px; width: 1px; height: 8px; background: rgba(201, 212, 255, .6); }
  .astro { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 11px; color: var(--ink-soft); }
  .astro b { color: var(--ink); font-weight: 500; margin-left: 4px; font-variant-numeric: tabular-nums; }
  .actions { display: flex; gap: 8px; flex-shrink: 0; }
  .btn { white-space: nowrap; }
  .btn { border: 1px solid var(--line); background: rgba(255, 255, 255, .1); border-radius: 999px; padding: 7px 14px; font-size: 12px; letter-spacing: .08em; display: inline-flex; gap: 8px; align-items: center; }
  .btn:hover { background: rgba(255, 255, 255, .2); }
  .btn[aria-pressed="true"] { background: rgba(255, 217, 160, .28); border-color: rgba(255, 217, 160, .6); }

  .foot { left: var(--gutter); right: var(--gutter); bottom: 12px; display: flex; justify-content: space-between; align-items: center; font-size: 11px; letter-spacing: .12em; color: var(--ink-faint); pointer-events: none; }
  .foot button { background: none; border: 0; color: var(--ink-soft); font-size: 11px; letter-spacing: .12em; padding: 4px 0; }

  dialog { border: 0; border-radius: 24px; padding: 28px; max-width: min(520px, calc(100% - 32px)); color: var(--ink); background: rgba(30, 34, 70, .82);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); line-height: 1.9; font-size: 14px; }
  dialog::backdrop { background: rgba(10, 12, 30, .4); }
  dialog h3 { font-family: var(--serif); letter-spacing: .14em; margin: 0 0 10px; font-size: 20px; }
  dialog ul { padding-left: 1.2em; margin: 8px 0; color: var(--ink-soft); }
  #loading { position: fixed; inset: 0; display: grid; place-items: center; z-index: 5; font-family: var(--serif); letter-spacing: .3em;
    background: linear-gradient(#3a3f78, #8a6e9e); transition: opacity .8s; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  @media (max-width: 760px) {
    .dock { grid-template-columns: 1fr; bottom: calc(var(--gutter) + 22px); gap: 10px; }
    .card { padding: 14px 16px; border-radius: 18px; }
    .time-card { padding-inline: 24px; }
    .hero { top: 84px; max-width: 70%; }
    .hero h1 { font-size: 26px; margin: 10px 0 8px; }
    .hero p { font-size: 10.5px; line-height: 1.8; letter-spacing: .02em; }
    .zoom { top: 42%; }
    .zoom button { width: 42px; height: 42px; }
    .temp { font-size: 30px; }
    .clock b { font-size: 28px; }
    .astro { display: none; }
    .hint { display: none; }
    .brand b { font-size: 17px; }
  }
  @media (max-height: 700px) and (max-width: 760px) {
    .hero { display: none; }
  }

.brand { color: inherit; text-decoration: none; }
.top-actions { display:flex; align-items:center; gap:10px; }
.home-link { color:var(--sky-ink,#f7f5ff);text-decoration:none;font-size:12px;white-space:nowrap; }
@media(max-width:480px){.top-actions{gap:8px}.home-link{font-size:10px}.pill{font-size:11px;padding:9px 11px}.brand{gap:7px}.brand svg{width:27px}.brand b{letter-spacing:.1em}}

@media(max-width:360px){.top-actions{gap:6px}.home-link{font-size:9px}.pill{font-size:10px;padding:8px 9px}.brand b{font-size:15px}.brand svg{width:22px}.brand{gap:5px}}