/* ==========================================================================
   NCHS Culture & Origins — Chinese Almanac
   Final unified visual system — 2026-08-29
   Reference: ceremonial red-gold concept composition.
   EN and ZH share the same geometry and interaction system.
   ========================================================================== */

.co-almanac-section{
  --co-red-deep:#520705;
  --co-red:#70100c;
  --co-red-mid:#861a14;
  --co-red-light:#9a251c;
  --co-gold:#d7ae59;
  --co-gold-soft:#e5c578;
  --co-gold-pale:#f4dda6;
  --co-cream:#fff0d1;
  --co-cream-dim:rgba(255,240,209,.68);
  --co-line:rgba(224,182,94,.24);
  --co-line-strong:rgba(229,188,98,.48);
  --co-night:#122837;
  --co-night-deep:#0f2230;
  position:relative!important;
  width:100vw!important;
  max-width:none!important;
  margin-left:calc(50% - 50vw)!important;
  margin-right:calc(50% - 50vw)!important;
  overflow:hidden!important;
  isolation:isolate!important;
  color:var(--co-cream)!important;
  background:transparent!important;
}

.co-almanac-section,
.co-almanac-section *{box-sizing:border-box;min-width:0}

.co-almanac-frame{
  position:relative!important;
  width:100%!important;
  min-height:620px!important;
  margin:0!important;
  overflow:hidden!important;
  border:0!important;
  border-top:1px solid rgba(229,188,103,.52)!important;
  border-bottom:1px solid rgba(229,188,103,.52)!important;
  border-radius:0!important;
  background:
    radial-gradient(ellipse at 17% 42%,rgba(255,211,128,.055),transparent 29%),
    radial-gradient(ellipse at 82% 25%,rgba(255,221,146,.042),transparent 31%),
    radial-gradient(circle at 55% 50%,rgba(188,52,39,.16),transparent 47%),
    linear-gradient(104deg,#570806 0%,#6e0e0b 23%,#871a14 53%,#74100d 78%,#580806 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,233,184,.075),
    inset 0 -1px 0 rgba(255,233,184,.065),
    inset 0 0 96px rgba(32,0,0,.14)!important;
}

/* One ceremonial outer field, not three dashboard cards. */
.co-almanac-frame::before{
  content:"";
  position:absolute;
  inset:12px;
  z-index:0;
  pointer-events:none;
  border:1px solid rgba(226,181,91,.35);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1800' height='720' viewBox='0 0 1800 720'%3E%3Cg fill='none' stroke='%23d8ad59' stroke-opacity='.14' stroke-width='1.25' stroke-linecap='round'%3E%3Cpath d='M-20 126c64-44 113 14 157-19 34-26 78-17 95 15 22-19 58-14 72 12'/%3E%3Cpath d='M1440 76c47-31 91 20 127-8 36-27 85-10 98 26 22-15 58-6 71 15'/%3E%3Cpath d='M62 626c55-36 105 21 148-10 34-25 82-11 96 20'/%3E%3Cpath d='M1505 592c46-31 92 19 128-7 31-22 70-10 86 17'/%3E%3Ccircle cx='1616' cy='574' r='76' stroke-opacity='.075'/%3E%3Ccircle cx='1616' cy='574' r='52' stroke-opacity='.075'/%3E%3C/g%3E%3C/svg%3E") center/cover no-repeat;
}

/* Sparse gold sky points in the red field. */
.co-almanac-frame::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.42;
  background:
    radial-gradient(circle at 6% 20%,rgba(243,199,94,.74) 0 1px,transparent 1.7px),
    radial-gradient(circle at 14% 79%,rgba(243,199,94,.52) 0 .9px,transparent 1.6px),
    radial-gradient(circle at 28% 11%,rgba(243,199,94,.40) 0 .8px,transparent 1.5px),
    radial-gradient(circle at 43% 86%,rgba(243,199,94,.56) 0 1px,transparent 1.7px),
    radial-gradient(circle at 62% 13%,rgba(243,199,94,.44) 0 .8px,transparent 1.5px),
    radial-gradient(circle at 72% 77%,rgba(243,199,94,.48) 0 1px,transparent 1.7px),
    radial-gradient(circle at 83% 20%,rgba(243,199,94,.68) 0 1px,transparent 1.7px),
    radial-gradient(circle at 94% 46%,rgba(243,199,94,.72) 0 1px,transparent 1.8px),
    radial-gradient(circle at 91% 82%,rgba(243,199,94,.42) 0 .8px,transparent 1.5px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.005) 0 1px,transparent 1px 4px);
  animation:coFieldBreathe 8.5s ease-in-out infinite;
}

@keyframes coFieldBreathe{
  0%,66%,100%{opacity:.32}
  78%{opacity:.50}
  88%{opacity:.38}
}

/* Reference proportion ≈ 26 / 42 / 32, with the dial occupying most of its column. */
.co-almanac-grid,
.culture-origin-root-only .co-almanac-section .co-almanac-grid{
  position:relative!important;
  z-index:2!important;
  display:grid!important;
  width:min(calc(100% - 88px),1760px)!important;
  min-height:620px!important;
  margin:0 auto!important;
  padding:34px 0 36px!important;
  grid-template-columns:minmax(310px,.88fr) minmax(560px,1.42fr) minmax(420px,1.04fr)!important;
  gap:28px!important;
  align-items:center!important;
}

.co-almanac-grid>.co-today-panel,
.co-almanac-grid>.co-calendar-panel,
.co-almanac-grid>.co-celestial-panel{
  position:relative!important;
  inset:auto!important;
  width:auto!important;
  max-width:none!important;
  margin:0!important;
  grid-column:auto!important;
  grid-row:auto!important;
  float:none!important;
  transform:none!important;
  color:var(--co-cream)!important;
  box-shadow:none!important;
}

/* LEFT — quiet, framed annotation. */
.co-today-panel{
  align-self:center!important;
  padding:34px 32px 30px!important;
  border:1px solid rgba(228,186,98,.34)!important;
  background:
    linear-gradient(180deg,rgba(95,8,6,.17),rgba(61,0,0,.06))!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,231,175,.018),
    inset 0 0 42px rgba(32,0,0,.08)!important;
}

.co-today-panel::before,
.co-calendar-panel::before{
  content:"";
  position:absolute;
  inset:8px;
  pointer-events:none;
  border:1px solid rgba(226,183,94,.11);
}

.co-kicker{
  margin:0 0 9px!important;
  color:rgba(229,194,121,.80)!important;
  font-size:9px!important;
  line-height:1.2!important;
  letter-spacing:.17em!important;
  text-transform:uppercase!important;
}

.co-today-panel h2{
  margin:0 0 18px!important;
  color:#efd18b!important;
  font-family:Georgia,"Times New Roman","Noto Serif TC","Songti SC",serif!important;
  font-size:clamp(38px,2.6vw,49px)!important;
  line-height:1.02!important;
  font-weight:400!important;
  letter-spacing:-.025em!important;
  text-shadow:0 1px 12px rgba(82,0,0,.08)!important;
}

html[lang^="zh"] .co-today-panel h2{
  letter-spacing:.025em!important;
}

.co-intro{
  max-width:25em!important;
  margin:0 0 20px!important;
  color:rgba(255,240,209,.66)!important;
  font-size:12px!important;
  line-height:1.62!important;
}

.co-data-list{margin:0!important;padding:0!important}

.co-data-list>div{
  position:relative!important;
  min-height:56px!important;
  padding:9px 0 9px 47px!important;
  border-top:1px solid rgba(231,198,136,.12)!important;
}

.co-data-list>div::before{
  position:absolute!important;
  left:1px!important;
  top:50%!important;
  width:32px!important;
  height:32px!important;
  display:grid!important;
  place-items:center!important;
  transform:translateY(-50%)!important;
  border:1px solid rgba(223,181,94,.38)!important;
  border-radius:50%!important;
  color:rgba(236,201,124,.88)!important;
  background:rgba(71,2,2,.11)!important;
  font:400 14px/1 Georgia,"Times New Roman",serif!important;
}

.co-data-list>div:nth-child(1)::before{content:"☉"!important}
.co-data-list>div:nth-child(2)::before{content:"☾"!important}
.co-data-list>div:nth-child(3)::before{content:"✣"!important}
.co-data-list>div:nth-child(4)::before{content:"◐"!important}
.co-data-list>div:nth-child(5)::before{content:"◎"!important}

.co-data-list dt{
  margin:0 0 3px!important;
  color:rgba(229,191,111,.78)!important;
  font-size:8.7px!important;
  line-height:1.2!important;
  letter-spacing:.11em!important;
  text-transform:uppercase!important;
}

.co-data-list dd{
  margin:0!important;
  color:rgba(255,241,216,.94)!important;
  font-family:Georgia,"Times New Roman","Noto Serif TC","Songti SC",serif!important;
  font-size:14.5px!important;
  line-height:1.30!important;
}

.co-data-list dd small{
  display:block!important;
  margin-top:2px!important;
  color:rgba(255,241,216,.50)!important;
  font-size:9.5px!important;
  line-height:1.25!important;
}

.co-mode{
  display:inline-flex!important;
  width:max-content!important;
  margin:19px 0 0 46px!important;
  padding:2px!important;
  overflow:hidden!important;
  border:1px solid rgba(225,182,93,.34)!important;
  border-radius:999px!important;
  background:rgba(50,0,0,.15)!important;
}

.co-mode button{
  appearance:none!important;
  min-width:55px!important;
  min-height:28px!important;
  padding:5px 11px!important;
  border:0!important;
  border-radius:999px!important;
  background:transparent!important;
  color:rgba(255,241,216,.64)!important;
  font:inherit!important;
  font-size:9.5px!important;
  line-height:1!important;
  cursor:pointer!important;
  transition:background .25s ease,color .25s ease,box-shadow .25s ease!important;
}

.co-mode button[aria-pressed="true"]{
  color:#64110d!important;
  background:linear-gradient(180deg,#f0dca8,#d9b568)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28)!important;
}

/* CENTER — primary calendrical object. */
.co-calendar-panel{
  padding:32px 34px 28px!important;
  border:1px solid rgba(228,186,98,.36)!important;
  background:
    linear-gradient(180deg,rgba(89,5,4,.15),rgba(56,0,0,.045))!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,231,175,.018),
    inset 0 0 46px rgba(32,0,0,.07)!important;
}

.co-calendar-head{
  display:grid!important;
  grid-template-columns:36px minmax(0,1fr) 36px!important;
  align-items:center!important;
  margin:0 0 13px!important;
  padding:0 0 13px!important;
  border-bottom:1px solid rgba(224,181,92,.22)!important;
}

.co-calendar-head h3{
  margin:0!important;
  text-align:center!important;
  color:#f0d38d!important;
  font-family:Georgia,"Times New Roman","Noto Serif TC","Songti SC",serif!important;
  font-size:clamp(31px,2.2vw,40px)!important;
  font-weight:400!important;
  line-height:1.04!important;
  letter-spacing:.01em!important;
}

.co-calendar-head button{
  appearance:none!important;
  width:34px!important;
  height:34px!important;
  padding:0!important;
  border:1px solid rgba(224,181,92,.34)!important;
  border-radius:50%!important;
  background:rgba(75,0,0,.06)!important;
  color:rgba(240,210,145,.88)!important;
  font-size:22px!important;
  line-height:1!important;
  cursor:pointer!important;
  transition:background .18s ease,border-color .18s ease,transform .18s ease!important;
}
.co-calendar-head button:hover{
  background:rgba(255,225,164,.055)!important;
  border-color:rgba(223,180,92,.54)!important;
  transform:translateY(-1px)!important;
}

.co-weekdays,
.co-calendar-grid{
  display:grid!important;
  width:100%!important;
  grid-template-columns:repeat(7,minmax(0,1fr))!important;
  gap:0!important;
}

.co-weekdays{
  border-bottom:1px solid rgba(224,181,92,.14)!important;
}

.co-weekdays span{
  padding:6px 0 9px!important;
  text-align:center!important;
  color:rgba(226,192,120,.68)!important;
  font-family:Georgia,"Times New Roman","Noto Serif TC","Songti SC",serif!important;
  font-size:10px!important;
  line-height:1!important;
  letter-spacing:.035em!important;
}

.co-calendar-grid{
  border-left:1px solid rgba(224,181,92,.082)!important;
  border-top:1px solid rgba(224,181,92,.082)!important;
}

.co-day{
  position:relative!important;
  appearance:none!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  aspect-ratio:1.62!important;
  padding:0!important;
  border:0!important;
  border-right:1px solid rgba(224,181,92,.082)!important;
  border-bottom:1px solid rgba(224,181,92,.082)!important;
  border-radius:0!important;
  background:transparent!important;
  color:rgba(255,241,216,.90)!important;
  font:inherit!important;
  cursor:pointer!important;
  transition:background .18s ease,color .18s ease!important;
}

.co-day:hover:not(.is-muted){background:rgba(236,193,105,.04)!important}
.co-day.is-muted{opacity:.14!important;cursor:default!important}

.co-day .solar{
  font-family:Georgia,"Times New Roman","Noto Serif TC","Songti SC",serif!important;
  font-size:clamp(14px,1.0vw,18px)!important;
  line-height:1!important;
}

.co-day .lunar{
  max-width:88%!important;
  margin-top:2px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:inherit!important;
  font-size:6.5px!important;
  line-height:1.05!important;
  opacity:.48!important;
}

.co-day .event-dot{
  position:absolute!important;
  left:50%!important;
  bottom:7%!important;
  width:3px!important;
  height:3px!important;
  margin-left:-1.5px!important;
  border-radius:50%!important;
  background:rgba(237,198,109,.76)!important;
  box-shadow:0 0 5px rgba(237,198,109,.16)!important;
}

.co-day.is-today:not(.is-selected){
  box-shadow:inset 0 0 0 1px rgba(229,194,121,.24)!important;
}

.co-day.is-selected{
  width:min(50px,70%)!important;
  aspect-ratio:1!important;
  justify-self:center!important;
  align-self:center!important;
  border:1px solid rgba(255,229,170,.70)!important;
  border-radius:50%!important;
  background:linear-gradient(145deg,#efd796,#cfa34c)!important;
  color:#61100d!important;
  box-shadow:
    0 0 0 3px rgba(224,174,73,.05),
    0 0 14px rgba(235,188,89,.16),
    inset 0 0 0 1px rgba(255,248,219,.28)!important;
}

.co-phase-strip{
  position:relative!important;
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr)!important;
  align-items:center!important;
  gap:16px!important;
  margin:17px 0 0!important;
  padding:12px 14px!important;
  border:1px solid rgba(224,181,92,.26)!important;
  background:rgba(56,0,0,.075)!important;
}

.co-phase-label{
  color:rgba(229,192,113,.74)!important;
  font-family:Georgia,"Times New Roman","Noto Serif TC","Songti SC",serif!important;
  font-size:10px!important;
  letter-spacing:.06em!important;
}

.co-phase-icons{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:9px!important;
}

.co-phase-icons i{
  position:relative!important;
  display:block!important;
  flex:0 1 auto!important;
  width:clamp(21px,1.8vw,29px)!important;
  min-width:18px!important;
  aspect-ratio:1!important;
  opacity:.72!important;
}
.co-phase-icons i.is-current{transform:scale(1.08)!important;opacity:1!important}

/* RIGHT — the dial is a visual equal, not an undersized widget. */
.co-celestial-panel{
  padding:8px 4px 8px!important;
  border:0!important;
  background:transparent!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:center!important;
}

.co-dial{
  --co-sun-x:0px;
  --co-sun-y:0px;
  --co-moon-x:0px;
  --co-moon-y:0px;
  position:relative!important;
  width:clamp(390px,27vw,460px)!important;
  max-width:100%!important;
  aspect-ratio:1!important;
  margin:0 auto!important;
  overflow:visible!important;
  border:1px solid rgba(231,193,109,.70)!important;
  border-radius:50%!important;
  background:
    linear-gradient(90deg,rgba(250,222,162,.96) 0 49.78%,var(--co-night) 50.22% 100%)!important;
  box-shadow:
    0 0 0 4px rgba(103,22,15,.30),
    0 0 0 5px rgba(229,186,95,.24),
    0 0 0 12px rgba(80,12,9,.17),
    0 0 0 13px rgba(227,181,88,.13),
    0 17px 36px rgba(40,0,0,.15),
    inset 0 0 0 7px rgba(105,27,18,.07),
    inset 0 0 0 8px rgba(222,178,89,.22)!important;
  filter:brightness(1.07) saturate(1.02)!important;
  transition:
    filter .62s cubic-bezier(.22,.61,.36,1),
    box-shadow .62s cubic-bezier(.22,.61,.36,1)!important;
}

.co-dial::before{
  content:"";
  position:absolute!important;
  inset:7.5%!important;
  z-index:1!important;
  pointer-events:none!important;
  border:1px solid rgba(113,72,35,.19)!important;
  border-radius:50%!important;
}

/* Lighting layer: Day = luminous left / quiet night; Night = suppressed left / luminous blue right. */
.co-dial::after{
  content:"";
  position:absolute!important;
  inset:0!important;
  z-index:3!important;
  pointer-events:none!important;
  border-radius:50%!important;
  opacity:0!important;
  background:
    linear-gradient(90deg,
      rgba(67,12,8,.66) 0%,
      rgba(51,7,7,.50) 49.5%,
      rgba(67,125,168,.075) 50.5%,
      rgba(124,184,220,.18) 100%)!important;
  box-shadow:
    inset 86px 0 110px -68px rgba(34,0,0,.44),
    inset -88px 0 114px -68px rgba(145,200,236,.19)!important;
  transition:opacity .62s cubic-bezier(.22,.61,.36,1)!important;
}

.co-dial.is-night{
  filter:brightness(.91) saturate(1.04)!important;
  box-shadow:
    0 0 0 4px rgba(91,18,13,.30),
    0 0 0 5px rgba(222,181,94,.21),
    0 0 0 12px rgba(67,9,8,.18),
    0 0 0 13px rgba(220,176,88,.11),
    0 17px 38px rgba(28,0,0,.19),
    inset 0 0 0 7px rgba(105,27,18,.07),
    inset 0 0 0 8px rgba(222,178,89,.20),
    inset -68px 0 100px -70px rgba(139,196,232,.28)!important;
}

.co-dial.is-night::after{opacity:1!important}

.co-orbit{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  z-index:2!important;
  transform:translate(-50%,-50%)!important;
  border:1px solid rgba(112,72,42,.17)!important;
  border-radius:50%!important;
  pointer-events:none!important;
}
.orbit-one{width:46%!important;height:46%!important}
.orbit-two{width:69%!important;height:69%!important}

.co-sun,
.co-moon{
  position:absolute!important;
  z-index:4!important;
  width:14.8%!important;
  aspect-ratio:1!important;
  background:none!important;
  box-shadow:none!important;
  overflow:visible!important;
  will-change:transform!important;
  transition:opacity .62s ease,filter .62s ease!important;
}
.co-sun{
  left:19%!important;
  top:24%!important;
  transform:translate3d(var(--co-sun-x),var(--co-sun-y),0)!important;
}
.co-moon{
  right:19%!important;
  top:23.5%!important;
  transform:translate3d(var(--co-moon-x),var(--co-moon-y),0)!important;
}

.co-dial:not(.is-night) .co-sun{
  opacity:1!important;
  filter:brightness(1.18) saturate(1.06) drop-shadow(0 0 9px rgba(241,191,79,.32))!important;
}
.co-dial:not(.is-night) .co-moon{
  opacity:.66!important;
  filter:brightness(.82) saturate(.84)!important;
}
.co-dial.is-night .co-sun{
  opacity:.34!important;
  filter:brightness(.49) saturate(.68)!important;
}
.co-dial.is-night .co-moon{
  opacity:1!important;
  filter:brightness(1.18) saturate(.95) drop-shadow(0 0 10px rgba(220,239,252,.42))!important;
}

.co-sun::before,.co-sun::after,.co-moon::before,.co-moon::after{display:none!important}
.co-celestial-svg{display:block!important;width:100%!important;height:100%!important;overflow:visible!important}

.co-hub,.co-sky-center{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  z-index:6!important;
  width:7px!important;
  height:7px!important;
  transform:translate(-50%,-50%)!important;
  border:1px solid rgba(224,186,110,.58)!important;
  border-radius:50%!important;
  background:rgba(138,90,43,.78)!important;
}

.co-hour{
  position:absolute!important;
  z-index:6!important;
  color:rgba(104,66,31,.58)!important;
  font-family:"Noto Serif TC","Songti SC",Georgia,serif!important;
  font-size:10px!important;
  line-height:1!important;
}
.h1{left:49%!important;top:5.6%!important}
.h2{right:5.6%!important;top:49%!important}
.h3{left:49%!important;bottom:5.6%!important}
.h4{left:5.6%!important;top:49%!important}

/* Six existing moving points + two night-only moving points in the same original system. */
.co-stars{
  position:absolute!important;
  inset:0!important;
  z-index:5!important;
  pointer-events:none!important;
}
.co-stars i{
  position:absolute!important;
  display:block!important;
  width:3px!important;
  height:3px!important;
  border-radius:50%!important;
  background:#f2d17e!important;
  opacity:.34!important;
  box-shadow:0 0 6px rgba(244,210,126,.52)!important;
  transition:opacity .5s ease,filter .5s ease!important;
}
.co-stars i:nth-child(1){left:62%!important;top:18%!important}
.co-stars i:nth-child(2){left:72%!important;top:31%!important;width:2px!important;height:2px!important}
.co-stars i:nth-child(3){left:61%!important;top:58%!important;width:2px!important;height:2px!important}
.co-stars i:nth-child(4){left:77%!important;top:70%!important}
.co-stars i:nth-child(5){left:85%!important;top:49%!important;width:2px!important;height:2px!important}
.co-stars i:nth-child(6){left:56%!important;top:11%!important;width:2px!important;height:2px!important}
.co-stars i:nth-child(7){left:69%!important;top:12%!important;width:2px!important;height:2px!important}
.co-stars i:nth-child(8){left:86%!important;top:64%!important;width:3px!important;height:3px!important}
.co-stars i.is-night-star{opacity:.025!important}
.co-dial.is-night .co-stars i{opacity:.78!important;filter:brightness(1.08)!important}
.co-dial.is-night .co-stars i.is-night-star{
  opacity:1!important;
  box-shadow:0 0 8px rgba(247,220,152,.70)!important;
}

/* Pointer remains a faint cloud glyph, echoing the concept design. */
.co-cloud-pointer{
  display:none!important;
  position:absolute!important;
  z-index:30!important;
  width:38px!important;
  height:24px!important;
  pointer-events:none!important;
  transform:translate(-50%,-50%)!important;
  opacity:.84!important;
  filter:drop-shadow(0 1px 2px rgba(51,0,0,.12))!important;
  background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 82 52'%3E%3Cg fill='none' stroke='%23ddb15c' stroke-width='3.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 33c5-8 12-10 20-5 2-12 19-16 27-5 9-6 20 0 22 10H7Z'/%3E%3Cpath d='M17 39h43c8 0 11 4 6 8-5 4-12 1-14-2'/%3E%3Cpath d='M27 30c6-7 14-8 21-1'/%3E%3C/g%3E%3C/svg%3E")!important;
}
@media (hover:hover) and (pointer:fine){
  .co-dial{cursor:none!important}
  .co-dial.is-hovering .co-cloud-pointer{display:block!important}
}

/* Dial caption + actions: quiet and ceremonial, not app-like. */
.co-dial-meta{
  width:min(100%,460px)!important;
  margin:27px auto 0!important;
  text-align:center!important;
}

.co-dial-instruction{
  margin:0!important;
  color:rgba(237,204,132,.88)!important;
  font-family:Georgia,"Times New Roman","Noto Serif TC","Songti SC",serif!important;
  font-size:14px!important;
  line-height:1.45!important;
  letter-spacing:.035em!important;
}

.co-dial-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:26px!important;
  margin:13px 0 0!important;
}

.co-action{
  appearance:none!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
  padding:5px 2px!important;
  border:0!important;
  border-bottom:1px solid transparent!important;
  background:transparent!important;
  color:rgba(240,210,144,.72)!important;
  font:inherit!important;
  font-size:10px!important;
  line-height:1!important;
  letter-spacing:.065em!important;
  cursor:pointer!important;
  transition:color .18s ease,border-color .18s ease,transform .18s ease!important;
}
.co-action:hover,
.co-action:focus-visible{
  color:#f2d68f!important;
  border-bottom-color:rgba(230,191,111,.42)!important;
  transform:translateY(-1px)!important;
}
.co-action[aria-pressed="true"]{color:#f3d997!important}
.co-action-icon{
  display:inline-block!important;
  width:16px!important;
  color:inherit!important;
  font-size:16px!important;
  line-height:1!important;
}

.co-disclaimer{
  max-width:430px!important;
  margin:15px auto 0!important;
  padding:13px 12px 0!important;
  border-top:1px solid rgba(225,181,92,.17)!important;
  color:rgba(242,214,157,.58)!important;
  font-family:Georgia,"Times New Roman","Noto Serif TC","Songti SC",serif!important;
  font-size:10.5px!important;
  line-height:1.55!important;
  letter-spacing:.015em!important;
}

.co-action-toast{
  display:block!important;
  min-height:1.2em!important;
  margin:8px auto 0!important;
  color:rgba(242,216,162,.66)!important;
  font-size:9px!important;
  line-height:1.25!important;
  opacity:0!important;
  transition:opacity .2s ease!important;
}
.co-action-toast.is-visible{opacity:1!important}

.co-decor,.co-weather-mist,.co-dial-land,.co-dial-note,[data-co-source],.co-source{display:none!important}
.co-phase-strip::before,.co-phase-strip::after{content:none!important;display:none!important}
button:focus-visible{outline:1px solid rgba(244,218,159,.84)!important;outline-offset:2px!important}

/* Normal laptop: same composition, only proportionally tightened. */
@media(max-width:1480px) and (min-width:1121px){
  .co-almanac-grid,
  .culture-origin-root-only .co-almanac-section .co-almanac-grid{
    width:min(calc(100% - 58px),1380px)!important;
    min-height:580px!important;
    padding:28px 0 30px!important;
    grid-template-columns:minmax(270px,.86fr) minmax(500px,1.40fr) minmax(350px,1.00fr)!important;
    gap:24px!important;
  }
  .co-almanac-frame{min-height:580px!important}
  .co-today-panel{padding:29px 27px 26px!important}
  .co-calendar-panel{padding:27px 28px 24px!important}
  .co-dial{width:clamp(350px,27vw,410px)!important}
  .co-dial-meta{margin-top:24px!important}
  .co-data-list>div{min-height:51px!important}
}

/* Compact desktop / large tablet: dial moves under, preserving legibility rather than shrinking into a token. */
@media(max-width:1120px) and (min-width:821px){
  .co-almanac-frame{min-height:0!important}
  .co-almanac-grid,
  .culture-origin-root-only .co-almanac-section .co-almanac-grid{
    width:min(calc(100% - 48px),980px)!important;
    min-height:0!important;
    padding:28px 0 34px!important;
    grid-template-columns:minmax(270px,.78fr) minmax(460px,1.28fr)!important;
    gap:24px!important;
    align-items:stretch!important;
  }
  .co-celestial-panel{
    grid-column:1/-1!important;
    padding:32px 0 8px!important;
    border-top:1px solid rgba(225,181,92,.12)!important;
  }
  .co-dial{width:min(52vw,420px)!important}
}

/* Mobile: a calm vertical reading order. */
@media(max-width:820px){
  .co-almanac-frame{min-height:0!important}
  .co-almanac-frame::before{inset:8px!important}
  .co-almanac-grid,
  .culture-origin-root-only .co-almanac-section .co-almanac-grid{
    display:block!important;
    width:100%!important;
    min-height:0!important;
    padding:14px 16px 22px!important;
  }
  .co-today-panel,
  .co-calendar-panel,
  .co-celestial-panel{
    width:100%!important;
    margin:0 0 14px!important;
  }
  .co-today-panel{padding:28px 22px 24px!important}
  .co-calendar-panel{padding:26px 18px 24px!important}
  .co-celestial-panel{padding:28px 10px 30px!important}
  .co-today-panel h2{font-size:38px!important}
  .co-dial{width:min(82vw,390px)!important}
  .co-dial-meta{width:min(92%,420px)!important}
}

@media(max-width:480px){
  .co-almanac-grid,
  .culture-origin-root-only .co-almanac-section .co-almanac-grid{padding:10px 10px 18px!important}
  .co-today-panel{padding:24px 16px 21px!important}
  .co-calendar-panel{padding:23px 9px 20px!important}
  .co-celestial-panel{padding:24px 8px 27px!important}
  .co-today-panel h2{font-size:34px!important}
  .co-calendar-head{
    grid-template-columns:30px minmax(0,1fr) 30px!important;
    margin-bottom:10px!important;
  }
  .co-calendar-head button{width:30px!important;height:30px!important;font-size:20px!important}
  .co-calendar-head h3{font-size:27px!important}
  .co-weekdays span{font-size:8.5px!important;letter-spacing:0!important}
  .co-day .solar{font-size:13px!important}
  .co-day .lunar{font-size:6px!important}
  .co-day.is-selected{width:min(42px,72%)!important}
  .co-phase-strip{grid-template-columns:1fr!important;gap:8px!important;padding:10px 8px!important}
  .co-phase-label{text-align:center!important}
  .co-phase-icons{gap:4px!important}
  .co-phase-icons i{width:clamp(16px,6vw,23px)!important;min-width:14px!important}
  .co-dial{width:min(84vw,340px)!important}
  .co-dial-actions{gap:22px!important}
  .co-disclaimer{font-size:10px!important}
}

@media(prefers-reduced-motion:reduce){
  .co-almanac-frame::after{animation:none!important;opacity:.38!important}
  .co-day,.co-sun,.co-moon,.co-mode button,.co-dial,.co-dial::after,.co-stars i{transition:none!important}
}

/* 2026-08-29 visual polish:
   Left and center framed objects share one baseline and one height.
   The right dial remains free-standing. */
@media(min-width:1481px){
  .co-today-panel,
  .co-calendar-panel{
    height:604px!important;
    min-height:604px!important;
    align-self:center!important;
  }
}

@media(max-width:1480px) and (min-width:1121px){
  .co-today-panel,
  .co-calendar-panel{
    height:520px!important;
    min-height:520px!important;
    align-self:center!important;
  }
}

/* Once the layout reflows, content determines height again. */
@media(max-width:1120px){
  .co-today-panel,
  .co-calendar-panel{
    height:auto!important;
    min-height:0!important;
  }
}


/* Dial support text now reads as one quiet footer:
   disclaimer first, actions below. */
.co-dial-meta{
  margin-top:25px!important;
}

.co-dial-instruction{
  display:none!important;
}

.co-disclaimer{
  max-width:430px!important;
  margin:0 auto!important;
  padding:13px 12px 0!important;
  border-top:1px solid rgba(225,181,92,.17)!important;
}

.co-dial-actions{
  gap:28px!important;
  margin:14px 0 0!important;
}

.co-action{
  gap:8px!important;
}

.co-action-icon{
  display:inline-grid!important;
  place-items:center!important;
  width:17px!important;
  height:14px!important;
  font-size:15px!important;
  line-height:1!important;
}

.co-action-share .co-action-icon{
  width:28px!important;
}

.co-share-wave{
  display:block!important;
  width:28px!important;
  height:12px!important;
  overflow:visible!important;
}

.co-share-wave path{
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.15!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  vector-effect:non-scaling-stroke!important;
}

.co-action-toast{
  margin-top:7px!important;
}