:root{--red:#ae1020;--red-dark:#7f0714;--gold:#ffc72d;--ink:#241414;--cream:#fff9ed;--paper:#ffffff;--green:#0c7657;--muted:#695c56;--line:#eadbc8;font-family:"Noto Serif SC","Source Han Serif SC","Microsoft YaHei",serif;color:var(--ink);background:var(--cream);font-size:18px}*{box-sizing:border-box}body{margin:0;min-width:320px;background:radial-gradient(circle at 20% 0,#ffe6a0 0,transparent 30rem),var(--cream);line-height:1.65}.site-header{min-height:92px;display:flex;align-items:center;gap:13px;padding:14px max(20px,calc((100% - 760px)/2));background:var(--red);color:#fff;box-shadow:0 3px 12px #4d000033}.brand-mark{font-size:2.65rem;line-height:1;color:var(--gold)}h1,h2,p{margin-top:0}.site-header h1{font-size:1.5rem;margin:0;font-weight:800;letter-spacing:.09em}.site-header p{margin:0;font-size:.88rem;opacity:.9}.site-actions{margin-left:auto;display:flex;align-items:center;gap:8px}.site-header .text-button{color:#fff;border-color:#ffffff88;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}main{width:min(760px,100%);padding:25px 18px 54px;margin:auto}.hero{padding:22px 8px 18px}.eyebrow{font-size:.85rem;display:inline-block;background:var(--gold);color:#5a1800;font-weight:800;border-radius:999px;padding:5px 12px}.hero h2{font-size:clamp(1.75rem,7vw,2.45rem);line-height:1.3;margin:13px 0 10px;color:var(--red-dark)}.hero p{color:var(--muted);font-size:1rem}.card{background:var(--paper);border:1px solid var(--line);border-radius:18px;margin:16px 0;padding:23px 18px;box-shadow:0 6px 20px #5c39110c}.section-title{display:flex;gap:11px;align-items:center;margin-bottom:13px}.section-title span{display:grid;place-items:center;background:var(--red);color:#fff;width:34px;height:34px;border-radius:50%;font-weight:800}.section-title h2{margin:0;font-size:1.36rem;line-height:1.3}label{display:block;font-weight:700;margin-bottom:7px}textarea,input,select{width:100%;border:2px solid #d9c4ab;border-radius:12px;padding:12px;font:inherit;font-size:1rem;color:var(--ink);background:#fff}textarea{min-height:94px;resize:vertical}textarea:focus,select:focus,input:focus{outline:4px solid #ffc72d88;border-color:var(--red)}.assist{font-size:.86rem;color:var(--muted);margin:8px 0}.method-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:13px 0}.method,.text-button{font:inherit;font-weight:700;border:2px solid var(--red);border-radius:11px;background:#fff;color:var(--red);min-height:50px;padding:8px 13px}.method.active{background:var(--red);color:#fff}.primary-button{width:100%;border:0;border-radius:13px;background:linear-gradient(135deg,#d8162a,#9a0817);box-shadow:0 4px 0 #68030d;color:#fff;font:inherit;font-size:1.23rem;font-weight:800;padding:14px 20px;min-height:58px;margin-top:13px}.primary-button:active{transform:translateY(3px);box-shadow:0 1px 0 #68030d}.line-inputs,.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.line-inputs label{font-size:.88rem}.line-inputs select{padding:8px;border-radius:9px}.check-label{display:flex;align-items:center;gap:9px;margin:15px 0}.check-label input{width:24px;height:24px;padding:0;accent-color:var(--red)}.result{margin:22px 0}.result-card{background:linear-gradient(145deg,#fffdf7,#fff0c2);border:2px solid var(--gold);border-radius:20px;padding:24px 18px;box-shadow:0 8px 24px #9e690d24}.result-card h2{font-size:1.8rem;color:var(--red-dark);margin-bottom:5px}.result-card h3{font-size:1.15rem;margin:22px 0 9px}.result-head{display:flex;gap:17px;align-items:center}.hexagram{width:112px;min-width:112px;display:flex;flex-direction:column-reverse;gap:7px;padding:6px 0}.yao{height:9px;background:var(--ink);border-radius:99px}.yao.yin{background:linear-gradient(90deg,var(--ink) 0 41%,transparent 41% 59%,var(--ink) 59%)}.yao.moving{outline:3px solid var(--red);outline-offset:3px}.badge{display:inline-block;border-radius:999px;padding:4px 10px;background:var(--green);color:#fff;font-size:.82rem;font-weight:700}.interpretation{background:#fff8e4;border-left:5px solid var(--red);padding:13px 14px;margin:20px 0}.interpretation p:last-child{margin-bottom:0}.relation-grid,.pillar-grid,.element-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.relation,.pillar{background:#fff;border:1px solid #ecdcbc;border-radius:12px;padding:12px}.relation strong,.pillar strong{display:block;font-size:1.07rem;color:var(--red-dark)}.pillar strong{font-size:1.65rem;letter-spacing:.12em;line-height:1.35}.pillar span{display:block;font-size:.85rem;color:var(--muted)}.element{background:#fff;border:1px solid #ecdcbc;border-radius:12px;padding:10px;text-align:center}.element strong{display:block;color:var(--red-dark);font-size:1.2rem}.element span{font-size:.9rem}.trace{background:#fff;border-left:5px solid var(--green);padding:12px;font-size:.95rem}.trigram-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.trigram{border-radius:13px;background:#fff3d2;border:1px solid #f1cf71;padding:13px}.trigram .symbol{font-size:2rem;color:var(--red)}.trigram strong{display:block;font-size:1.06rem}.text-button{background:transparent;min-height:40px;font-size:.9rem}.text-button:focus,.method:focus,.primary-button:focus{outline:4px solid var(--gold);outline-offset:2px}dialog{width:min(680px,calc(100% - 24px));border:0;border-radius:18px;padding:20px;box-shadow:0 14px 50px #0006}dialog::backdrop{background:#2b101080}.dialog-head{display:flex;justify-content:space-between;gap:10px;align-items:center}.dialog-head h2{margin:0;font-size:1.4rem}.history-item{padding:14px 0;border-bottom:1px solid var(--line)}.history-item h3{margin:0;font-size:1.1rem}.history-item p{margin:4px 0;color:var(--muted);font-size:.9rem}.history-actions{display:flex;justify-content:space-between;align-items:center;gap:9px}footer{text-align:center;background:var(--red-dark);color:#fff;padding:20px;font-size:.84rem}@media (min-width:650px){.trigram-grid{grid-template-columns:repeat(4,1fr)}.line-inputs{grid-template-columns:repeat(3,1fr)}.field-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width:480px){.site-header{align-items:flex-start}.site-actions{flex-direction:column;align-items:stretch;gap:4px}.site-actions .text-button{min-height:34px;padding:4px 8px;font-size:.78rem}.brand-mark{font-size:2.2rem}}