:root{
  --paper:#f5f2e9;
  --surface:#fffdf7;
  --ink:#183b35;
  --text:#263c36;
  --muted:#68766e;
  --line:#dadfd3;
  --accent:#aa6049;
  --accent-soft:#f3e5da;
  --green-soft:#e9eee4;
  --radius:18px;
  --shadow:0 18px 44px #203c3312;
}
body{background:radial-gradient(circle at 88% 2%,#e6ece0 0,transparent 30%),var(--paper)}
main{max-width:1440px;padding-inline:clamp(20px,4vw,62px)}
.site-header{background:#f9f7f0ed;backdrop-filter:blur(16px);border-bottom-color:#dce1d6}
.nav-wrap{max-width:1440px;padding-inline:clamp(20px,4vw,62px)}
.brand-name{letter-spacing:.12em}
.nav-wrap nav a{font-weight:600;letter-spacing:.04em}
.nav-cta{border-radius:30px;background:var(--surface);border-color:#cbd6c8}
.page-heading{padding:48px 0 26px}
.page-heading h1{font-size:clamp(34px,3vw,46px);margin:10px 0 9px}
.page-heading p{max-width:660px}
.work-tabs{gap:9px;border-bottom-color:#d7ded3;padding-bottom:9px;margin-bottom:30px}
.work-tabs a{border:1px solid transparent;border-bottom:0;border-radius:30px;padding:9px 19px;font-weight:600}
.work-tabs a.active{border-color:#c7d5c4;background:#e5ece2;color:var(--ink)}
.workspace{grid-template-columns:minmax(255px,290px) minmax(0,1fr);gap:30px;align-items:start}
.result-column{min-width:0}
.panel{border-color:#dce1d6;background:var(--surface);box-shadow:0 6px 24px #203c3308}
.input-panel{padding:28px}
.input-panel h2{font-size:22px}
.button.primary{border-radius:9px;background:#173d35}
.button.primary:hover{background:#28574b}

.result-head{margin:2px 0 25px;align-items:end;border-bottom:1px solid #d8dfd4;padding-bottom:19px}
.result-eyebrow,.section-index{display:block;color:#9a654e;font-size:10px;font-weight:800;letter-spacing:.19em;line-height:1.4}
.result-head h2{font-size:clamp(27px,2.5vw,36px);margin:7px 0 0;line-height:1.2}
.result-method{display:inline-flex;align-items:center;gap:9px;padding:8px 12px;border:1px solid #cedacc;border-radius:30px;background:#edf2e9;color:#405f51;font-size:12px;white-space:nowrap}
.result-method i{display:block;width:3px;height:3px;background:#799786;border-radius:50%}
.reading-section{margin-bottom:36px}
.reading-section-heading{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:15px}
.reading-section-heading h3{font:600 clamp(23px,2vw,29px)/1.3 var(--serif);letter-spacing:.04em;margin:5px 0 4px}
.reading-section-heading p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}
.reading-section-mark{font:20px var(--serif);color:#9dac9e;white-space:nowrap}
.core-pair{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.core-arrow{position:absolute;top:46%;left:50%;z-index:2;transform:translate(-50%,-50%);display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#244b40;color:white;box-shadow:0 5px 15px #183b3530;font-size:20px;pointer-events:none}
.extension-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.reading-card{display:flex;flex-direction:column;min-width:0;padding:23px;border:1px solid #d9dfd3;border-radius:17px;background:#fffdf8;color:var(--text);text-align:left;box-shadow:0 5px 18px #203c3307;cursor:pointer;transition:transform .18s,border-color .18s,box-shadow .18s}
.reading-card:hover,.reading-card:focus-visible{transform:translateY(-3px);border-color:#97b09d;box-shadow:var(--shadow)}
.reading-card.primary-card{background:linear-gradient(155deg,#e9efe6 0%,#f8f9f2 48%,#fffdf8 100%);border-color:#b9ccba}
.featured-card:nth-child(2){background:linear-gradient(155deg,#f9eee6 0%,#fff9f2 42%,#fffdf8 100%);border-color:#e7d6c8}
.reading-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:13px;border-bottom:1px solid #dce3d7}
.reading-kind{font:700 13px var(--sans);letter-spacing:.12em;color:#315e4b}
.reading-role{font-size:11px;letter-spacing:.06em;color:#85918a}
.reading-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:18px 0 8px}
.reading-title .hex-number{display:block;font-size:10px;letter-spacing:.1em;color:#8a998c}
.reading-title .hex-name{font:600 30px/1.3 var(--serif);letter-spacing:.06em;margin:3px 0 0}
.reading-symbol{font:29px/.8 var(--serif);color:#829788;letter-spacing:0}
.annotated-hex{display:grid;grid-template-columns:minmax(116px,1fr) minmax(104px,118px);gap:12px;max-width:none;width:100%;margin:10px 0 18px;text-align:left;align-items:stretch}
.visual-lines{display:grid;grid-template-rows:repeat(6,29px);gap:4px;align-content:center;min-width:0}
.visual-line{display:flex;align-items:center;gap:9px;min-width:0;line-height:1}
.visual-line:nth-child(3){margin-bottom:7px}
.visual-line.is-moving{background:#e9efe5;border-radius:5px;padding:2px 3px}
.visual-yao,.visual-yao .yao{display:block;position:relative;width:90px;flex:0 0 90px}
.visual-yao .yao{display:flex;height:8px;gap:12px}
.visual-move-dot{right:-4px;top:-16px;font-size:14px}
.visual-line-status{display:flex;align-items:center;gap:4px;flex-wrap:wrap;font-size:10px;line-height:1.3}
.visual-line-status b{font-weight:700;color:#a2543d;white-space:nowrap}
.visual-line-status span{padding:1px 3px}
.visual-context{display:grid;grid-template-rows:1fr auto 1fr;gap:4px;min-width:0;border-left:1px solid #d8dfd2;padding-left:11px}
.visual-trigram{display:flex;align-content:center;align-items:center;gap:2px 4px;flex-wrap:wrap;padding:4px 0;border:0;border-radius:0;background:transparent}
.visual-trigram strong{font:600 16px var(--serif)}
.visual-side{font-size:11px;color:#809086}
.visual-trigram .element{font-size:11px;padding:0 4px}
.visual-proper{width:100%;font-size:10px;font-weight:700;letter-spacing:.03em}
.visual-proper.yes{color:#3e7853}
.visual-proper.no{color:#929a92}
.visual-relation{display:block;text-align:left;font-size:10px;font-weight:700;color:#986852;line-height:1.3;padding:4px 0;border-top:1px solid #e3e6dc;border-bottom:1px solid #e3e6dc}
.reading-analysis{margin-top:auto;padding-top:14px;border-top:1px solid #e1e5dc}
.reading-analysis p{font-size:12px;line-height:1.7;color:#5e6b62;margin:0 0 8px}
.reading-analysis strong{font-weight:600;color:#3d5747}
.reading-quote{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:13px/1.7 var(--serif);color:#7e725e}
.reading-open{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:17px;padding-top:10px;border-top:1px solid #e7e9e0;font-size:11px;font-weight:700;color:#587864;letter-spacing:.04em}
.reading-open span{font-size:17px;line-height:1}
.extension-card{padding:18px}
.extension-card .reading-title{margin:14px 0 6px}
.extension-card .reading-title .hex-name{font-size:23px}
.extension-card .reading-symbol{font-size:23px}
.extension-card .annotated-hex{grid-template-columns:minmax(90px,1fr) minmax(90px,103px);gap:7px;margin:6px 0 13px}
.extension-card .visual-context{padding-left:7px}
.extension-card .visual-lines{grid-template-rows:repeat(6,23px);gap:2px}
.extension-card .visual-yao,.extension-card .visual-yao .yao{width:70px;flex-basis:70px}
.extension-card .visual-yao .yao{height:6px;gap:8px}
.extension-card .visual-trigram strong{font-size:14px}
.extension-card .visual-relation{font-size:10px}
.extension-card .reading-analysis p{font-size:11px}
.extension-card .reading-quote{font-size:12px}
.result-legend{margin:0 0 26px;padding:11px 16px;border-left:3px solid #a9bda9;background:#edf1e9;border-radius:0 8px 8px 0}
.reading-deep-dive{margin:0 0 18px;padding:26px 30px;scroll-margin-top:115px}
.reading-deep-dive .reading-section-heading{margin-bottom:18px}
.reading-deep-dive .details-tabs{gap:22px;margin-bottom:24px}
.reading-deep-dive .details-tabs button{font-size:13px;font-weight:700;padding:9px 0}
.reading-detail-head{display:flex;justify-content:space-between;align-items:end;gap:12px}
.reading-detail-head h4{font:600 25px var(--serif);margin:3px 0 0}
.reading-detail-head>span{font-size:12px;color:var(--muted)}
.detail-hex-graphic{margin:14px 0 22px}
.detail-hex-graphic .annotated-hex{max-width:380px;margin:0}
.reading-deep-dive .judgment{padding:18px 20px;border-left:3px solid #b7c9b6;background:#f4f7ef;border-radius:0 8px 8px 0;margin:17px 0 25px}
.reading-rules{margin-bottom:42px}
.reading-rules summary{font-weight:700;color:#496f59}

@media(max-width:1190px){
 .workspace{grid-template-columns:minmax(0,1fr)}
 .input-panel{max-width:none}
 .input-panel #casting-form{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;align-items:end}
 .input-panel #cast-fields{grid-row:1/3}
 .input-panel .button.full{grid-column:2;grid-row:1;width:auto;min-width:180px}
 .input-panel .form-error{grid-column:2;grid-row:2}
}
@media(max-width:850px){
 .extension-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .extension-card:last-child{grid-column:1/-1}
}
@media(max-width:650px){
 .nav-wrap{padding-inline:20px}
 .page-heading{padding:26px 0 18px}
 .work-tabs{margin-bottom:20px}
 .work-tabs a{white-space:nowrap;font-size:13px;padding:8px 14px}
 .workspace{gap:25px}
 .input-panel{padding:20px}
 .input-panel #casting-form{display:block}
 .input-panel .button.full{width:100%}
 .result-head{align-items:start;gap:10px}
 .result-head h2{font-size:27px}
 .result-method{font-size:10px;padding:6px 8px;white-space:normal}
 .reading-section-heading{align-items:start}
 .reading-section-mark{font-size:14px}
 .core-pair,.extension-grid{grid-template-columns:minmax(0,1fr);gap:12px}
 .extension-card:last-child{grid-column:1}
 .core-arrow{top:50%;transform:translate(-50%,-50%) rotate(90deg);width:29px;height:29px;font-size:16px}
 .reading-card,.extension-card{padding:19px}
 .featured-card .reading-title .hex-name{font-size:28px}
 .extension-card .reading-title .hex-name{font-size:25px}
 .annotated-hex,.extension-card .annotated-hex{grid-template-columns:minmax(130px,1fr) minmax(110px,135px);gap:10px}
 .extension-card .visual-lines{grid-template-rows:repeat(6,27px);gap:4px}
 .extension-card .visual-yao,.extension-card .visual-yao .yao{width:90px;flex-basis:90px}
 .extension-card .visual-yao .yao{height:8px;gap:12px}
 .extension-card .visual-context{padding-left:11px}
 .reading-deep-dive{padding:19px;scroll-margin-top:22px}
 .reading-detail-head{align-items:start;flex-direction:column;gap:1px}
 .result-legend{font-size:12px}
}
@media(max-width:390px){
 .annotated-hex,.extension-card .annotated-hex{grid-template-columns:minmax(113px,1fr) minmax(100px,116px);gap:6px}
 .visual-yao,.visual-yao .yao,.extension-card .visual-yao,.extension-card .visual-yao .yao{width:76px;flex-basis:76px}
 .visual-yao .yao,.extension-card .visual-yao .yao{gap:9px}
 .visual-context,.extension-card .visual-context{padding-left:7px}
 .visual-trigram strong{font-size:14px}
}