:root {
    --tool-ink: #17251e;
    --tool-muted: #647168;
    --tool-paper: #f7f2e7;
    --tool-jade: #255f49;
    --tool-jade-dark: #163e31;
    --tool-red: #ab4332;
    --tool-gold: #bd9147;
    --tool-border: #ddd3c0;
}

.tcm-tool-page { margin: 0; color: var(--tool-ink); background: #fbfaf6; font-family: "Noto Serif SC", "Songti SC", SimSun, serif; }
.tool-container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.tool-header { position: sticky; top: 0; z-index: 50; background: rgba(251,250,246,.94); border-bottom: 1px solid rgba(37,95,73,.14); backdrop-filter: blur(14px); }
.tool-nav { height: 76px; display: flex; align-items: center; justify-content: space-between; }
.tool-brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.tool-brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 8px 8px 14px 8px; color: #fff; background: var(--tool-red); font: 700 22px/1 KaiTi, serif; }
.tool-brand strong, .tool-brand small { display: block; }
.tool-brand small { color: var(--tool-muted); font-size: 12px; letter-spacing: .18em; }
.tool-links { display: flex; gap: 27px; align-items: center; }
.tool-links a { color: #34463c; text-decoration: none; font-weight: 700; }
.tool-links a.active { color: var(--tool-red); }
.tool-menu { display: none; padding: 8px 12px; border: 1px solid var(--tool-border); border-radius: 7px; background: #fff; font: inherit; }
.tool-eyebrow { margin: 0 0 12px; color: var(--tool-red); font-size: 13px; font-weight: 800; letter-spacing: .22em; }
.tool-hero { padding: 80px 0 70px; background: linear-gradient(135deg, #fbfaf6 0 58%, var(--tool-paper) 58%); }
.tool-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.tool-hero h1 { margin: 0; font: 700 clamp(42px, 6vw, 70px)/1.16 KaiTi, serif; }
.tool-hero-copy > p:not(.tool-eyebrow) { max-width: 650px; color: var(--tool-muted); font-size: 18px; line-height: 1.9; }
.tool-disclaimer { padding: 15px 18px; border-left: 4px solid var(--tool-gold); color: #5f5749; background: #fff8e9; font-size: 13px; line-height: 1.7; }

.ziwu-clock-wrap { display: grid; place-items: center; position: relative; padding: 28px 0 8px; }
.ziwu-clock { --active-angle: 0deg; --active-color: var(--tool-red); position: relative; width: min(500px, 88vw); aspect-ratio: 1; border-radius: 50%; isolation: isolate; background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.98) 0 37%, rgba(248,244,234,.96) 37.5% 58%, rgba(255,255,255,.98) 58.5% 100%);
    border: 9px solid #e8dcc5;
    box-shadow: 0 34px 80px rgba(40,56,47,.16), 0 6px 16px rgba(100,75,40,.08), inset 0 0 0 1px #cdbd9e, inset 0 0 0 7px rgba(255,255,255,.82); }
.ziwu-clock::before { content: ""; position: absolute; z-index: 0; inset: 3.2%; border-radius: 50%; border: 1px solid rgba(189,145,71,.32); background: repeating-conic-gradient(from -15deg, rgba(37,95,73,.028) 0 29.6deg, rgba(189,145,71,.20) 29.6deg 30deg); }
.ziwu-clock::after { content: "十二时辰"; position: absolute; z-index: 2; left: 50%; top: 19.2%; transform: translateX(-50%); color: rgba(171,67,50,.72); font: 700 10px/1 "Noto Serif SC", serif; letter-spacing: .28em; white-space: nowrap; }
.clock-active-arc { position: absolute; z-index: 1; inset: 2%; border-radius: 50%; transform: rotate(var(--active-angle)); background: conic-gradient(from -15deg, color-mix(in srgb, var(--active-color) 24%, transparent) 0 30deg, transparent 30deg 360deg); -webkit-mask: radial-gradient(circle, transparent 0 71%, #000 71.5% 100%); mask: radial-gradient(circle, transparent 0 71%, #000 71.5% 100%); transition: transform .45s ease, background .3s ease; }
.clock-inner-ring { position: absolute; z-index: 1; inset: 29%; border-radius: 50%; border: 1px solid rgba(189,145,71,.42); box-shadow: 0 0 0 7px rgba(189,145,71,.055), inset 0 0 24px rgba(37,95,73,.045); }
.clock-tick { position: absolute; z-index: 2; left: calc(50% - .5px); top: 50%; width: 1px; height: 46%; transform-origin: 50% 0; background: linear-gradient(to bottom, transparent 0 calc(100% - 4px), rgba(110,101,83,.42) calc(100% - 4px) 100%); }
.clock-tick.major { left: calc(50% - 1px); width: 2px; background: linear-gradient(to bottom, transparent 0 calc(100% - 9px), var(--tool-gold) calc(100% - 9px) 100%); }
.clock-label { position: absolute; z-index: 4; width: 68px; min-height: 43px; text-align: center; transform: translate(-50%, -50%); }
.clock-label { padding: 0; border: 0; color: inherit; background: transparent; font-family: inherit; cursor: pointer; }
.clock-label strong { display: flex; align-items: center; justify-content: center; gap: 5px; font: 700 18px/1.05 KaiTi, serif; white-space: nowrap; }
.clock-label strong b, .clock-label strong em { font: inherit; }
.clock-label strong b { font-size: 21px; }
.clock-label strong i { width: 3px; height: 3px; border-radius: 50%; background: var(--tool-gold); }
.clock-label small { display: block; margin-top: 3px; color: #7b817c; font: 10px/1.1 Georgia, serif; letter-spacing: .02em; }
.clock-label.active { color: #fff; }
.clock-label.active::before { content: ""; position: absolute; z-index: -1; inset: -9px -4px -8px; border-radius: 999px; background: var(--active-color, var(--tool-red)); box-shadow: 0 7px 20px color-mix(in srgb, var(--active-color) 35%, transparent), inset 0 0 0 1px rgba(255,255,255,.24); }
.clock-label.active strong i { background: rgba(255,255,255,.75); }
.clock-label.active small { color: rgba(255,255,255,.84); }
.clock-hand { position: absolute; z-index: 6; left: calc(50% - 2px); bottom: 50%; width: 4px; border-radius: 8px 8px 3px 3px; transform-origin: 50% 100%; box-shadow: 0 2px 5px rgba(23,37,30,.18); }
.clock-hour { height: 23%; width: 6px; left: calc(50% - 3px); background: linear-gradient(to top, #244839, var(--tool-ink)); }
.clock-minute { height: 31%; width: 4px; background: linear-gradient(to top, #c75b46, var(--tool-red)); }
.clock-second { z-index: 7; height: 35%; width: 1px; left: 50%; background: var(--tool-gold); box-shadow: none; }
.clock-pin { position: absolute; z-index: 8; left: 50%; top: 50%; width: 13px; height: 13px; border-radius: 50%; background: var(--tool-red); transform: translate(-50%,-50%); box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--tool-gold), 0 4px 12px rgba(0,0,0,.2); }
.clock-center { position: absolute; z-index: 5; left: 50%; top: 61.5%; min-width: 112px; padding: 8px 13px 9px; transform: translateX(-50%); text-align: center; border: 1px solid rgba(189,145,71,.32); border-radius: 10px; background: rgba(255,255,255,.78); box-shadow: 0 8px 24px rgba(36,59,47,.07); backdrop-filter: blur(4px); }
.clock-center .clock-center-kicker { display: block; margin-bottom: 2px; color: var(--tool-red); font: 700 9px/1.2 "Noto Serif SC", serif; letter-spacing: .16em; }
.clock-center strong { display: block; font: 700 21px/1.15 KaiTi, serif; }
.clock-center > span:last-child { color: var(--tool-muted); font: 12px/1.4 Georgia, serif; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.clock-caption { display: flex; align-items: center; gap: 8px; margin: 22px 0 0; color: #737d76; font-size: 12px; }
.clock-caption span { width: 22px; height: 1px; background: var(--tool-gold); }

.current-period { padding: 40px 0; color: #fff; background: var(--tool-jade-dark); }
.current-period-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 50px; align-items: center; }
.current-time-box { padding-right: 40px; border-right: 1px solid rgba(255,255,255,.18); }
.current-time-box span { color: #c5d4cc; font-size: 13px; letter-spacing: .14em; }
.current-time-box strong { display: block; margin: 5px 0; color: #f3cc78; font: 700 48px/1.1 Georgia, serif; }
.current-time-box em { color: #dce7e1; font-style: normal; }
.current-meridian h2 { margin: 0 0 8px; font: 700 34px/1.25 KaiTi, serif; }
.current-meridian p { margin: 0; color: #c7d4cd; line-height: 1.8; }
.period-table-section { padding: 90px 0; }
.tool-section-heading { display: flex; justify-content: space-between; gap: 40px; align-items: end; margin-bottom: 30px; }
.tool-section-heading h2 { margin: 0; font: 700 clamp(32px, 4vw, 45px)/1.2 KaiTi, serif; }
.tool-section-heading p { max-width: 540px; margin: 0; color: var(--tool-muted); line-height: 1.8; }
.period-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.period-card { position: relative; padding: 23px; border: 1px solid var(--tool-border); border-radius: 11px; background: #fff; overflow: hidden; }
.period-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--period-color); }
.period-card.active { box-shadow: 0 14px 36px rgba(29,54,41,.12); border-color: var(--period-color); }
.period-card-head { display: flex; justify-content: space-between; align-items: start; }
.period-card-head strong { font: 700 26px/1.2 KaiTi, serif; }
.period-card-head span { color: var(--period-color); font-weight: 700; }
.period-card h3 { margin: 15px 0 7px; font: 700 23px/1.3 KaiTi, serif; }
.period-card p { margin: 0; color: var(--tool-muted); font-size: 14px; line-height: 1.75; }
.period-tags { display: flex; gap: 7px; margin-top: 14px; }
.period-tags span { padding: 4px 8px; border-radius: 4px; color: var(--period-color); background: #f5f1e8; font-size: 11px; }

.model-page-main { min-height: 100vh; background: radial-gradient(circle at 50% 20%, rgba(54,104,79,.08), transparent 35%), #f6f2e8; }
.model-intro { padding: 54px 0 24px; text-align: center; }
.model-intro h1 { margin: 0 0 10px; font: 700 clamp(38px, 6vw, 62px)/1.2 KaiTi, serif; }
.model-intro > p { max-width: 770px; margin: auto; color: var(--tool-muted); line-height: 1.8; }
.model-workspace { display: grid; grid-template-columns: 240px minmax(360px, 1fr) 290px; gap: 18px; padding: 22px 0 70px; }
.model-panel { border: 1px solid var(--tool-border); border-radius: 13px; background: rgba(255,255,255,.9); box-shadow: 0 12px 36px rgba(28,45,36,.07); }
.meridian-panel, .point-panel { padding: 22px; }
.model-panel h2 { margin: 0 0 16px; font: 700 24px/1.2 KaiTi, serif; }
.meridian-list { display: grid; gap: 7px; max-height: 665px; overflow: auto; }
.meridian-filter { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px 11px; border: 0; border-radius: 7px; background: transparent; color: #405047; text-align: left; font: 14px/1.2 inherit; cursor: pointer; }
.meridian-filter i { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: var(--line-color); }
.meridian-filter:hover, .meridian-filter.active { color: #fff; background: var(--tool-jade); }
.canvas-panel { position: relative; min-height: 720px; overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(239,235,224,.9)); touch-action: none; cursor: grab; }
.canvas-panel.dragging { cursor: grabbing; }
#meridianCanvas { display: block; width: 100%; height: 720px; }
.view-badge { position: absolute; left: 18px; top: 17px; padding: 7px 11px; border-radius: 999px; color: #fff; background: rgba(22,62,49,.85); font-size: 12px; }
.model-instruction { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); padding: 8px 13px; border-radius: 7px; color: #5a655f; background: rgba(255,255,255,.85); box-shadow: 0 5px 16px rgba(0,0,0,.08); font-size: 12px; white-space: nowrap; }
.model-controls { position: absolute; right: 15px; top: 15px; display: flex; gap: 7px; }
.model-controls button { width: 37px; height: 37px; border: 1px solid #d3cab9; border-radius: 7px; background: #fff; color: var(--tool-jade); font: 700 17px/1 sans-serif; cursor: pointer; }
.point-empty { color: var(--tool-muted); line-height: 1.8; }
.point-detail[hidden], .point-empty[hidden] { display: none; }
.point-detail .point-code { display: inline-block; padding: 4px 8px; border-radius: 4px; color: #fff; background: var(--point-color, var(--tool-red)); font-size: 12px; }
.point-detail h3 { margin: 14px 0 5px; font: 700 31px/1.2 KaiTi, serif; }
.point-detail .point-meridian { margin: 0 0 17px; color: var(--tool-red); font-weight: 700; }
.point-detail dl { margin: 0; }
.point-detail dt { margin-top: 15px; color: #7a827d; font-size: 12px; }
.point-detail dd { margin: 4px 0 0; color: #435249; line-height: 1.75; }
.model-legend { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--tool-border); color: var(--tool-muted); font-size: 12px; line-height: 1.7; }
.tool-footer { padding: 35px 0; color: #c6d3cc; background: var(--tool-jade-dark); text-align: center; }
.tool-footer a { color: #f1d18d; }

@media (max-width: 980px) {
    .period-grid { grid-template-columns: repeat(2, 1fr); }
    .model-workspace { grid-template-columns: 200px 1fr; }
    .point-panel { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
    .tool-container { width: min(100% - 28px, 1180px); }
    .tool-nav { height: 68px; }
    .tool-menu { display: block; }
    .tool-links { position: absolute; display: none; top: 68px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 12px 20px 22px; background: #fbfaf6; border-bottom: 1px solid var(--tool-border); }
    .tool-links.open { display: flex; }
    .tool-links a { padding: 11px 0; }
    .tool-hero { padding: 55px 0 38px; background: linear-gradient(180deg, #fbfaf6 0 56%, var(--tool-paper) 56%); }
    .tool-hero-grid, .current-period-grid { grid-template-columns: 1fr; gap: 35px; }
    .current-time-box { padding: 0 0 25px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.18); }
    .period-grid { grid-template-columns: 1fr; }
    .tool-section-heading { display: block; }
    .tool-section-heading p { margin-top: 12px; }
    .model-workspace { grid-template-columns: 1fr; }
    .meridian-list { grid-template-columns: repeat(2, 1fr); max-height: none; }
    .canvas-panel { min-height: 600px; }
    #meridianCanvas { height: 600px; }
    .model-instruction { white-space: normal; width: calc(100% - 28px); text-align: center; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }