:root{--bg:#f4f1e9;--paper:#fffcf5;--ink:#30362f;--muted:#7d8174;--green:#3f5148;--accent:#a84232;--yang:#ab392c;--yin:#2f302d;--line:#e0ddd3}body{background:radial-gradient(ellipse at 90% 0,#e2e7da66,transparent 48%),var(--bg)}body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.3;background-image:repeating-linear-gradient(17deg,transparent 0 6px,#bcb6a509 7px 8px),repeating-linear-gradient(93deg,transparent 0 4px,#bcb6a506 5px 6px)}header{padding:15px 5%;max-height:80px}.seal{border-radius:3px;transform:rotate(-3deg);border-color:#aa5442;background:#f5eee1}.brand{font-size:25px}.brand small{letter-spacing:2px;font-size:9px}.intro{position:relative;padding:21px 0 17px;min-height:105px;isolation:isolate}.intro:after{content:"";position:absolute;right:110px;bottom:0;width:440px;height:130px;background:url('ink-landscape.svg') right bottom/contain no-repeat;z-index:-1;pointer-events:none}.intro h1{font-size:32px;letter-spacing:3px;margin:4px 0}.intro p{font-size:13px;margin:3px 0}.eyebrow{font-size:9px;letter-spacing:2px}.workspace{grid-template-columns:320px minmax(0,1fr);gap:26px}.input-column{gap:12px}.panel{border-radius:10px;box-shadow:0 3px 15px #4f534704}.question-panel{padding:15px 17px}.question-panel .section-title{margin:0 0 7px;font-size:10px}.question-panel label{font-size:11px;margin-bottom:5px}.question-panel textarea{height:58px;min-height:58px;padding:9px;font-size:13px;resize:vertical}.input-panel{padding:15px 17px 0;overflow:visible}.input-panel>.section-title{margin-bottom:11px;font-size:11px}.method-tabs{gap:7px;margin-bottom:12px}.method-tabs button{min-height:52px;font-size:15px;border-radius:6px}.method-tabs small{font-size:9px}.method-body{height:225px;padding-right:3px;scrollbar-gutter:stable}.method-placeholder h3{font-size:20px;margin:8px 0}.method-placeholder .choice-symbol{font-size:45px;line-height:1}.method-placeholder p{font-size:11px;line-height:1.8;margin:7px 0}.method-body h3{font-size:21px;margin:4px 0 8px}.numbers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.numbers label{display:block;font-size:11px}.numbers input{width:100%;font-size:22px;text-align:center;height:48px;margin-top:5px;padding:8px 3px}.numbers input::placeholder{font-size:13px}#number-form>.hint{font-size:11px;line-height:1.5;margin:7px 0 11px}#number-rule-details{margin-top:11px;padding-top:0;border:none;font-size:11px}#number-rule-details summary{min-height:35px;padding:7px 0}.cast-action{grid-template-rows:48px 46px;gap:6px;padding:9px 0 14px;position:relative;background:var(--paper)}.cast-action .wide{height:46px;min-height:46px;border-radius:6px;font-size:14px}.cast-status{position:relative}.cast-status #input-error,.cast-status #cast-readiness{font-size:11px;line-height:1.5}.cast-status #input-error{padding-right:0}.cast-status:has(#recover-number:not([hidden])){padding-right:75px}.cast-status #recover-number{position:absolute;right:-3px;top:0;max-width:73px;padding:4px;font-size:10px;line-height:1.5;border:1px solid #ddc8aa;border-radius:4px;min-height:42px}.cast-action .primary{background:#414e42;box-shadow:0 3px 10px #333c2820}.cast-action .primary:disabled{opacity:.4;box-shadow:none}.coin-header{position:static;margin-bottom:9px;padding:0}.coin-header h3{display:none}.coin-header>.hint{font-size:10px;line-height:1.4;margin:3px 0}.coin-source{margin:5px 0!important;gap:6px}.coin-source button{font-size:11px;padding:4px;min-height:38px}.coin-progress-caption{font-size:10px;margin:5px 0!important}.coin-overview{grid-template-columns:repeat(3,1fr);gap:3px}.coin-overview>span{padding:3px 5px}.coin-overview b{font-size:9px}.coin-overview small{font-size:9px}.coin-round{padding:10px;min-height:82px}.coin-controls{background:var(--paper);padding:6px 0;bottom:0}.coin-controls .primary{font-size:12px;min-height:40px}.round-symbol.yang{color:var(--yang)}.round-symbol.yin{color:var(--yin)}.round-symbol.moving{outline:1px solid #897b5f;outline-offset:3px;border-radius:2px}.mini-row i{background:var(--yin)}.mini-row i.yang{background:var(--yang)}.mini-row i.yin{background:var(--yin)}.hexagrams{grid-template-columns:minmax(0,1fr) minmax(150px,.62fr) minmax(0,1fr);gap:18px}.hex-card{padding:18px;border-radius:9px;background:#f7f4ea;position:relative;border-color:#d7d6cb}.base-card{background:linear-gradient(135deg,#edeedc,#f5f3e9);border-color:#cbd0bc}.changed-card{background:linear-gradient(135deg,#f5f1e7,#eeefe3)}.hex-card:before{content:"";position:absolute;left:12px;right:12px;top:0;height:2px;background:linear-gradient(90deg,transparent,#6374573b,transparent)}.hex-kind{font-size:10px;letter-spacing:1px}.hex-title h2{font-size:29px}.mutual-card{background:transparent;border-color:#e3dfd3;box-shadow:none;margin-top:15px;padding:12px 9px}.mutual-card:before{display:none}.mutual-heading{width:100%;display:flex;align-items:center;justify-content:space-between;gap:7px}.mutual-heading>span{font-size:23px}.mutual-heading small{font-size:10px}.mutual-actions{display:flex;gap:3px;justify-content:space-between;border-top:1px solid var(--line);margin-top:8px}.mutual-actions button{padding:5px;font-size:10px;min-height:38px}.mutual-expand{display:none}.mutual-card .mutual-content{display:block}.mutual-card .lines{max-width:125px}.line{min-height:44px;padding:7px 24px 7px 10px;margin:0!important;border:none!important;border-radius:4px!important;transition:transform .14s,background .14s,box-shadow .14s}.line[data-line="4"]{margin-bottom:13px!important}.line .bar,.hex-card .line.moving .bar,.mutual-card .bar{height:6px;background:var(--yin)}.line[data-polarity="yang"] .bar,.hex-card .line.moving[data-polarity="yang"] .bar,.mutual-card .line[data-polarity="yang"] .bar{background:var(--yang)}.line[data-polarity="yin"] .bar,.hex-card .line.moving[data-polarity="yin"] .bar{background:var(--yin)}.line .index,.line.moving .index{font-size:10px;font-weight:400;color:#7d8174}.line.moving:after{content:"";position:absolute;left:5px;right:20px;top:50%;height:24px;transform:translateY(-50%);border:1px solid #938367;border-radius:3px;pointer-events:none}.line.selected{background:#fff9e9;box-shadow:0 0 0 2px #9a806644}.line:focus-visible{outline:2px solid #ac8066;outline-offset:3px}.line:active{transform:scale(1.04);background:#e6dfc8;box-shadow:0 0 0 2px #96846355}.line.source-line{background:#e9d899;box-shadow:0 0 0 1px #b59a49}.polarity-legend{display:flex;gap:18px;font-size:10px;color:var(--muted);margin:3px 0 13px}.polarity-legend .yang{color:var(--yang)}.polarity-legend .yin{color:var(--yin)}.casting-controls{display:grid;grid-template-columns:1fr auto auto;gap:7px;font-size:11px;min-height:48px;margin:0 0 10px}.casting-controls button{min-height:40px;padding:6px;font-size:11px;border:1px solid var(--line);background:#faf6ee}.map-glyph.yang{color:var(--yang)}.map-glyph.yin{color:var(--yin)}.teaching-panel{position:relative;margin:14px 0 20px;padding:18px;background:linear-gradient(145deg,#fffdf5,#f0f0e2)}.lesson-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.lesson-head strong{font-family:'Songti SC',serif;font-size:22px;font-weight:500}.lesson-head button{font-size:11px;padding:5px;min-height:40px}.lesson-note{font-size:13px;min-height:42px;color:#736650;margin:7px 0 10px;line-height:1.7}.lesson-board{display:grid;grid-template-columns:minmax(0,1fr) 50px minmax(0,1fr);gap:10px;position:relative;max-width:520px;margin:0 auto}.lesson-diagram{padding:12px 18px;border:1px solid #d4d8c8;border-radius:8px;background:#fffdf58c}.lesson-title{font-size:11px;text-align:center;color:var(--muted);margin-bottom:7px}.lesson-arrow{display:flex;align-items:center;justify-content:center;font-size:22px;color:#a59b7a}.lesson-line{height:39px;display:flex;gap:10px;align-items:center;justify-content:space-between;border-radius:4px;padding:5px 7px;position:relative;font-size:11px;color:var(--muted)}.lesson-line[data-source="4"],.lesson-line[data-target="4"]{margin-bottom:25px}.lesson-line .map-glyph{font-size:23px;line-height:1;letter-spacing:-1px}.lesson-line .slot-placeholder{height:5px;border-top:1px dashed #b5b8ab;width:80px}.lesson-line.active{background:#e9d89988;outline:1px solid #b39d5855}.lesson-line.repeated:after{content:"再取";position:absolute;right:-7px;top:-6px;font-size:9px;color:#9b6b3a}.lesson-copy{position:absolute;z-index:4;pointer-events:none;display:flex;align-items:center;justify-content:center;gap:8px;height:37px;border-radius:4px;background:#fff9dd;border:1px solid #c1ae6b99;font-size:10px;color:#796943}.lesson-group-label{position:absolute;left:10px;right:10px;top:137px;font-size:9px;text-align:center;color:#898d7d;pointer-events:none}.lesson-caption{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;font-size:10px;margin-top:13px;color:var(--muted)}.lesson-timeline{display:flex;gap:5px;margin-bottom:12px}.lesson-timeline span{flex:1;padding:7px 4px;text-align:center;background:#eeeede;border-radius:5px;font-size:10px;color:var(--muted)}.lesson-timeline span.active{background:#e9dcc2;color:#715c36}.lesson-timeline span.done{background:#e3e9d8;color:#687663}.base-copy{position:absolute;z-index:4;pointer-events:none;background:#f5f0dfdd;border:1px solid #b9b6a6;border-radius:7px;padding:10px}.base-copy .map-glyph{height:39px;display:flex;align-items:center;justify-content:center;font-size:25px}.base-copy small{display:block;text-align:center;font-size:10px;color:var(--muted)}.moving-comparison{border-top:2px solid #cabda2;padding:19px}.comparison-label{color:#7f735a;font-size:10px}.pair-position{color:#8e7251;font-size:11px}.comparison-pair{border-color:#e3ddd0}.comparison-cell h3{font-size:22px}.comparison-cell .original{font-size:22px}.reader{border-top:2px solid #b7c0a8;height:450px}.source-panel{display:none!important}.derivation{font-size:11px;margin:0 0 6px}.derivation summary{min-height:35px}.section-title{margin-bottom:13px}.stage-pending{opacity:0}.teaching-panel [data-state="pending"]{opacity:.65}@media(hover:hover) and (pointer:fine){.line:hover{transform:scale(1.055);background:#ece7d6;box-shadow:0 1px 8px #67614f0e}.line.selected:hover{background:#fff4da}}@media(max-width:1100px){.workspace{grid-template-columns:295px minmax(0,1fr);gap:18px}.hexagrams{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.base-card{grid-column:1;grid-row:1}.changed-card{grid-column:2;grid-row:1}.mutual-card{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:1fr auto;margin:0;padding:8px 14px;align-items:center}.mutual-card>.hex-kind{display:none}.mutual-card .hex-title{margin:0}.mutual-card .mutual-heading{max-width:200px;justify-content:flex-start}.mutual-card .mutual-content{display:none;grid-column:1/-1;max-width:230px;width:100%;justify-self:center;padding:10px 0}.mutual-card.expanded .mutual-content{display:block}.mutual-actions{margin:0;border:none;gap:8px}.mutual-actions button{font-size:11px;min-height:40px}.mutual-expand{display:block}.mutual-card .hex-title>small{font-size:10px}.mutual-heading>span{font-size:21px}.mutual-card .mutual-heading small{display:none}.reading-layout{grid-template-columns:1fr}.intro:after{right:80px;width:300px;opacity:.7}}@media(max-width:850px){header{padding:10px 5%;max-height:none;gap:7px}.brand{font-size:23px}.seal{width:35px;height:39px;font-size:27px}.local{font-size:10px}.brand small{font-size:8px}nav{gap:5px}nav button{min-height:38px;padding:5px 15px;font-size:13px}.intro{padding:13px 0 10px;min-height:75px;flex-direction:row;align-items:center;gap:8px}.intro:after{right:0;bottom:0;width:220px;height:80px;opacity:.65}.intro h1{font-size:26px;letter-spacing:1px;margin:2px 0}.intro p{display:none}.intro .eyebrow{font-size:8px;letter-spacing:1px}.intro>.quiet{font-size:10px;max-width:82px;padding:4px;text-align:right}.workspace{grid-template-columns:1fr;gap:20px}.input-column{gap:9px}.question-panel{padding:11px 13px}.question-panel .section-title{font-size:9px;margin-bottom:3px}.question-panel label{font-size:10px;margin-bottom:3px}.question-panel textarea{height:49px;min-height:49px;font-size:12px;padding:7px}.input-panel{padding:11px 13px 0}.input-panel>.section-title{font-size:10px;margin-bottom:7px}.method-tabs{margin-bottom:9px;gap:7px}.method-tabs button{min-height:44px;padding:5px;font-size:14px}.method-tabs small{font-size:9px;margin-top:0}.method-body{height:155px;padding-bottom:4px;scrollbar-gutter:stable}.method-body h3{display:none}#number-form>.hint{font-size:10px;margin:1px 0 6px}.numbers input{height:46px;font-size:22px}.numbers label{font-size:10px}#number-rule-details{margin-top:5px}#number-rule-details summary{min-height:33px;font-size:10px}.cast-action{grid-template-rows:43px 44px;padding:7px 0 11px;gap:3px}.cast-action .wide{min-height:44px;height:44px;font-size:14px}.cast-status #input-error,.cast-status #cast-readiness{font-size:10px;line-height:1.4}.cast-status:has(#recover-number:not([hidden])){padding-right:70px}.cast-status #recover-number{max-width:65px;font-size:9px;min-height:40px}.method-placeholder .choice-symbol{font-size:32px}.method-placeholder h3{display:block;font-size:17px;margin:4px 0}.method-placeholder p{font-size:10px;margin:3px 0;line-height:1.6}.coin-header>.hint{display:none}.coin-overview{grid-template-columns:repeat(6,minmax(0,1fr))}.coin-overview>span{padding:3px 2px;text-align:center}.coin-overview b,.coin-overview small{font-size:8px;white-space:nowrap}.coin-source button{min-height:34px;font-size:10px}.coin-controls .primary{font-size:10px;min-height:36px}.coin-controls .quiet{font-size:9px}.coin-controls{padding:3px 0}.coin-progress-caption{font-size:9px}.coin-round{min-height:79px}.hexagrams{gap:10px}.hex-card{padding:14px 12px}.hex-card .hex-kind{font-size:10px}.hex-title h2{font-size:27px}.line{min-height:44px}.mutual-card{padding:6px 10px;gap:8px}.mutual-card .hex-title{display:flex;align-items:center;gap:7px}.mutual-actions{gap:3px}.mutual-actions button{font-size:10px;padding:3px}.casting-controls{font-size:10px;gap:5px;min-height:45px;grid-template-columns:1fr auto auto}.casting-controls button{font-size:10px;padding:5px;min-height:38px}.teaching-panel{padding:13px}.lesson-head strong{font-size:19px}.lesson-note{font-size:11px;min-height:44px}.lesson-board{grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr);gap:4px}.lesson-diagram{padding:10px 7px}.lesson-line{height:39px;padding:4px 2px;gap:4px;font-size:10px}.lesson-line .map-glyph{font-size:21px}.lesson-line .slot-placeholder{width:60px}.lesson-title{font-size:10px}.lesson-caption{gap:8px;font-size:9px}.lesson-copy{font-size:9px;gap:3px}.lesson-timeline span{font-size:9px;padding:6px 3px}.comparison-cell .original{font-size:20px}.moving-comparison{padding:15px}.reader{height:435px}.polarity-legend{font-size:9px;gap:12px}.lesson-head button{font-size:10px;padding:4px}}@media(max-height:740px) and (max-width:850px){header{padding-top:7px;padding-bottom:7px}.intro{min-height:60px;padding-top:8px;padding-bottom:7px}.intro h1{font-size:24px}.question-panel label{display:none}.question-panel textarea{height:42px;min-height:42px}.method-body{height:145px}.cast-action{grid-template-rows:39px 44px;padding:5px 0 9px}.question-panel{padding-top:9px;padding-bottom:9px}}@media(max-width:360px){.mutual-card{grid-template-columns:1fr}.mutual-actions{justify-content:flex-end}.coin-overview b,.coin-overview small{font-size:7px}.lesson-line .map-glyph{font-size:18px}.lesson-diagram{padding-left:5px;padding-right:5px}.intro h1{font-size:23px}}@media(prefers-reduced-motion:reduce){.line:hover,.line:active{transform:none}}body.reduced .line:hover,body.reduced .line:active{transform:none}
.lesson-diagram .lesson-line{height:44px;min-height:44px;background:transparent;border:0;box-shadow:none;border-radius:4px;font-size:10px;width:100%;padding:4px}.lesson-diagram .lesson-line.active{background:#e7dba788;outline:1px solid #b39d5855}.lesson-mini-heading{font-size:9px;line-height:1.5;text-align:center;color:var(--muted);margin:5px 0 2px}.lesson-line[data-source="4"],.lesson-line[data-target="4"]{margin-bottom:0}.lesson-line[data-target] small{font-size:9px}.lesson-line[data-target] .map-glyph{order:0}.lesson-line[data-target]>span:first-child{order:-1}.lesson-line[data-state="pending"]{pointer-events:none}.lesson-source .lesson-line{justify-content:space-between}
.intro .eyebrow{display:block;line-height:1.2}.intro h1{line-height:1.35}.intro p{line-height:1.5}.intro{padding-top:15px;padding-bottom:15px}.method-body{height:200px}.method-tabs button{padding:4px 5px;min-height:52px;line-height:1.4}.question-panel{padding-top:12px;padding-bottom:12px}
@media(max-width:850px){.intro{flex-direction:row;align-items:center;padding:12px 0;min-height:85px;gap:8px}.intro .eyebrow{font-size:8px;letter-spacing:1px}.intro h1{font-size:26px;line-height:1.25;margin:5px 0}.intro p{font-size:10px;max-width:220px}.intro>.quiet{max-width:84px;min-width:72px;padding:3px;font-size:10px;min-height:36px}.intro:after{right:30px;width:220px;height:90px}.method-body{height:155px}.question-panel{padding:11px 14px}.method-tabs button{min-height:44px;padding:3px;line-height:1.3}.method-tabs small{margin-top:1px}}
@media(max-height:740px) and (max-width:850px){.intro{min-height:70px;padding:8px 0}.intro h1{font-size:24px}.method-body{height:145px}}
header{padding-top:10px;padding-bottom:10px}.seal{height:43px;width:41px}.method-body{height:185px}.method-body h3{font-size:19px;line-height:1.4;margin:3px 0 5px}#number-form>.hint{margin:4px 0 7px}#number-rule-details{margin-top:5px}#number-rule-details summary{min-height:30px;padding:4px 0}.lesson-line.moving{outline:1px solid #948365;outline-offset:-5px}.lesson-board .base-copy{width:100%;z-index:5;display:flex;flex-direction:column;gap:10px;padding:30px 15px 10px;background:#f0e8d099;border:1px solid #b19e71;border-radius:8px}.lesson-board .base-copy .map-glyph{font-size:25px;text-align:center}.teaching-panel{scroll-margin-top:8px}
@media(max-width:850px){header{padding-top:8px;padding-bottom:8px}.method-body{height:155px}#number-form>.hint{margin:4px 0 7px}.lesson-note{min-height:58px}.lesson-board .base-copy{padding:25px 5px 10px}.lesson-board .base-copy .map-glyph{font-size:21px}}
@media(max-height:740px) and (max-width:850px){.method-body{height:145px}}
.coin-next{position:sticky;top:0;z-index:2;background:var(--paper);padding:2px 0 7px}.coin-next button{width:100%;min-height:40px;padding:6px;font-size:12px}.coin-controls{position:static;margin-top:7px}.coin-controls .quiet{width:100%;min-height:40px;border:1px solid var(--line)}
@media(max-width:850px){.coin-header{margin-bottom:2px}.coin-source button{min-height:34px}.coin-overview{margin-bottom:3px}.coin-next{padding-bottom:5px}.coin-next button{min-height:36px}.coin-progress-caption{margin:3px 0!important}}
.coin-header>.hint{display:none}@media(max-width:850px){.method-body{height:165px}}@media(max-height:740px) and (max-width:850px){.method-body{height:155px}}
.casting-controls button,.lesson-head button{min-height:44px}.polarity-legend{margin-bottom:7px}.choice-symbol{font-family:'Songti SC',serif}
@media(max-width:1100px){.mutual-actions button{min-height:44px}}
@media(max-width:850px){.method-body{height:185px}.coin-source button,.coin-next button{min-height:44px}.coin-next{padding-bottom:5px}}
@media(max-height:740px) and (max-width:850px){.method-body{height:175px}}