:root{--ink:#1d201e;--soft-ink:#4d514d;--mist:#ecebe6;--paper:#f7f5ee;--paper-deep:#e7e3d7;--vermillion:#9b3028;--line:#c8c4b9;--wash:rgba(35,40,37,.09)}
*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--ink);font-family:"Noto Serif SC","Songti SC","STSong",serif;background:linear-gradient(110deg,rgba(255,255,255,.6),transparent 38%),radial-gradient(ellipse at 75% 9%,rgba(47,52,48,.13),transparent 28%),radial-gradient(ellipse at 6% 70%,rgba(47,52,48,.08),transparent 26%),var(--paper);background-attachment:fixed}body:before,body:after{content:"";position:fixed;z-index:-1;pointer-events:none;filter:blur(3px);opacity:.5}body:before{width:370px;height:230px;right:-80px;top:115px;border-radius:53% 44% 62% 42%;background:radial-gradient(ellipse at center,rgba(24,28,25,.18),rgba(24,28,25,.04) 45%,transparent 69%);transform:rotate(-18deg)}body:after{width:310px;height:180px;left:-105px;bottom:42px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(24,28,25,.14),transparent 68%);transform:rotate(16deg)}
.shell{max-width:1000px;margin:auto;padding:46px 24px 76px}header{text-align:center;margin-bottom:30px}.header-rule{display:flex;align-items:center;justify-content:center;gap:15px;margin-bottom:12px}.header-rule span{height:1px;width:70px;background:linear-gradient(90deg,transparent,var(--ink),transparent)}.header-rule i{font-style:normal;font-size:1.05rem;border:1px solid var(--ink);height:28px;width:28px;line-height:26px;border-radius:50%;color:var(--ink)}.eyebrow{font-size:.74rem;letter-spacing:.35em;color:var(--soft-ink);margin:0 0 11px}h1{font-size:clamp(2.6rem,7vw,4.6rem);letter-spacing:.22em;text-indent:.22em;margin:0 0 10px;font-weight:500;line-height:1.08}.intro{font-size:.94rem;margin:0;color:var(--soft-ink);letter-spacing:.04em}.intro,.hint,.note,.empty{line-height:1.8}
.card{position:relative;background:rgba(250,249,244,.72);border:1px solid rgba(49,53,49,.35);padding:28px 32px;margin:20px 0;box-shadow:8px 10px 0 rgba(33,37,34,.035),0 18px 45px rgba(31,35,32,.05)}.card:before{content:"";position:absolute;inset:5px;border:1px solid rgba(50,53,49,.12);pointer-events:none}.section-heading{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);padding:0 0 14px;margin-bottom:12px}.section-heading span{font:600 .7rem ui-monospace,monospace;color:var(--vermillion);letter-spacing:.08em}.section-heading h2,.history h2{font-size:1.12rem;margin:0;font-weight:600;letter-spacing:.08em}.hint{font-size:.88rem;color:var(--soft-ink);margin:14px 0 18px}.line-inputs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 22px}.line-row{display:flex;align-items:center;gap:10px;color:var(--soft-ink);font-size:.9rem}.ordinal{width:5.2em}.line-row select{flex:1;min-width:0;padding:9px 8px;border:0;border-bottom:1px solid #a9aaa3;background:transparent;color:var(--ink);font:inherit;outline:none}.line-row select:focus{border-bottom:2px solid var(--ink)}.preview{width:30px;color:var(--ink);font-weight:bold;text-align:center}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}button{font:inherit;letter-spacing:.05em;cursor:pointer;padding:10px 18px;border-radius:0}.primary{background:var(--ink);color:var(--paper);border:1px solid var(--ink)}.primary:hover{background:#000}.secondary{background:transparent;border:1px solid #777b75;color:var(--ink)}.secondary:hover{background:rgba(30,33,30,.06)}
.calendar-controls{display:flex;align-items:center;gap:12px;margin:15px 0}.calendar-controls label{display:flex;align-items:center;gap:10px;font-size:.88rem;color:var(--soft-ink)}.calendar-controls input{padding:8px;border:0;border-bottom:1px solid #a9aaa3;background:transparent;font:inherit;color:var(--ink)}.calendar-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}.calendar-grid div{padding:12px 15px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;gap:5px}.calendar-grid span{font-size:.76rem;color:var(--soft-ink);letter-spacing:.12em}.calendar-grid strong{font-size:.97rem;font-weight:600}.calendar-grid div:nth-child(3) strong,.calendar-grid div:nth-child(4) strong{color:var(--vermillion)}
.gua-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;text-align:center;gap:20px;padding:8px 0}.gua-panel{min-width:0}.label{font-size:.76rem;letter-spacing:.22em;color:var(--vermillion);margin:0 0 12px}.diagram{min-height:166px;display:flex;flex-direction:column;justify-content:center;gap:7px;width:130px;margin:auto}.yao{height:10px;display:flex;gap:9px;position:relative}.yao i{display:block;height:100%;background:var(--ink)}.yao.yang i{width:100%}.yao.yin i{width:calc(50% - 4.5px)}.yao.moving:after{content:"○";position:absolute;right:-22px;top:-9px;color:var(--vermillion);font-size:1.1rem}.yao.moving.yin:after{content:"×";top:-5px}h3{margin:11px 0 4px;font-size:1.3rem;font-weight:600;letter-spacing:.05em}.trigrams{font-size:.84rem;color:var(--soft-ink);margin:0}.transform{font-size:1.65rem;color:var(--ink);display:flex;flex-direction:column;align-items:center;padding-top:78px}.transform small{font-size:.68rem;white-space:nowrap;color:var(--soft-ink);margin-top:5px}.details{display:flex;justify-content:center;gap:60px;border-top:1px solid var(--line);margin-top:20px;padding-top:16px}.details div{display:grid;gap:4px;text-align:center}.details span{font-size:.76rem;color:var(--soft-ink);letter-spacing:.15em}.details strong{font-size:.92rem;font-weight:600}.note{text-align:center;color:var(--soft-ink);font-size:.8rem;margin:20px 0 0}.empty{color:var(--soft-ink);padding:24px 0;text-align:center}
.history{margin-top:34px}.history-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.text-button{padding:4px 0;border:0;background:transparent;color:var(--soft-ink);font-size:.84rem}.history-list{display:grid;gap:8px}.history-item{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border:1px solid rgba(49,53,49,.28);background:rgba(250,249,244,.58)}.history-item strong{font-weight:600}.history-item small{color:var(--soft-ink)}
@media(max-width:680px){.shell{padding:38px 16px}.card{padding:22px 18px}.line-inputs{grid-template-columns:1fr}.calendar-grid{grid-template-columns:repeat(2,1fr)}.calendar-controls{align-items:flex-start;flex-direction:column}.gua-grid{grid-template-columns:1fr;gap:12px}.transform{font-size:1.25rem;transform:rotate(90deg);padding:0}.transform small{display:none}.diagram{width:112px}.details{gap:25px}.history-item{align-items:flex-start;flex-direction:column;gap:4px}}