:root{
--paper:#f2ede2;
--paper-2:#f8f4eb;
--body:#fbf8f1;
--ink:#2e2924;
--ink-2:#5f564c;
--ink-3:#8f8475;
--line:#d6ccba;
--red:#a8322a;
--red-soft:#e6c9c1;
--qing:#2f5d62;
--serif:"Songti SC","STSong","Noto Serif SC","Source Han Serif SC","SimSun",serif;
--kai:"Kaiti SC","STKaiti","KaiTi","BiauKai","Songti SC",serif}

*{
box-sizing:border-box}
[hidden]{
display:none!important}
html{
background:var(--paper)}
body{
margin:0;
min-height:100vh;
background:var(--paper);
color:var(--ink);
font-family:var(--serif);
overflow-x:hidden}
button,select{
font:inherit;
color:inherit}
button{
min-height:44px;
min-width:44px;
cursor:pointer}
header{
display:flex;
align-items:flex-end;
justify-content:space-between;
padding:14px 28px 10px;
border-bottom:1px solid var(--ink);
box-shadow:0 3px 0 -2px var(--ink)}
.title{
display:flex;
align-items:baseline;
gap:14px}
.title h1{
font-family:var(--kai);
font-weight:400;
font-size:30px;
letter-spacing:6px;
margin:0}
.title p{
margin:0;
color:var(--ink-2);
font-size:14px}
.now{
font-size:14px;
color:var(--ink-2);
text-align:right}
.now b{
color:var(--red);
font-family:var(--kai);
font-size:18px;
font-weight:400}

.entry-tabs{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
max-width:760px;
margin:12px auto 8px;
padding:0 16px;
width:100%}
.entry-tabs button,.segmented button{
border:1px solid var(--line);
background:var(--paper-2);
padding:8px 14px}
.entry-tabs button+button,.segmented button+button{
border-left:0}
.entry-tabs button.on,.segmented button.on{
background:var(--red);
border-color:var(--red);
color:var(--paper-2)}
.atlas-toolbar{
display:flex;
align-items:center;
justify-content:center;
gap:12px;
padding:4px 20px 12px;
border-bottom:1px solid var(--line);
flex-wrap:wrap}
.meridian-picker{
display:flex;
align-items:center;
gap:8px;
color:var(--ink-3)}
.meridian-picker select{
height:44px;
min-width:220px;
border:1px solid var(--ink-3);
background:var(--paper-2);
padding:0 36px 0 12px}
.segmented{
display:flex}
.segmented button{
white-space:nowrap}
.segmented button:disabled{
opacity:.6;
cursor:not-allowed}

main{
display:grid;
grid-template-columns:minmax(0,1fr) 400px;
height:calc(100vh - 224px);
min-height:620px}
.stage-panel{
min-width:0;
min-height:0;
display:flex;
flex-direction:column;
padding:8px 12px 0 20px}
.diagram-wrap{
flex:1;
min-height:0;
display:flex;
align-items:stretch;
justify-content:center;
overflow:hidden}
#stage{
width:100%;
height:100%;
display:block}
.handoff{
min-height:54px;
padding:10px 14px;
border-top:1px solid var(--line);
font-size:15px;
color:var(--ink-2);
line-height:1.55}
.handoff .k{
color:var(--red);
font-family:var(--kai);
font-size:17px;
margin-right:8px}
.atlas-image{
flex:1;
overflow:auto;
text-align:center;
padding:8px}
.atlas-image figure{
margin:0 auto;
max-width:640px}
.atlas-image img{
display:block;
width:100%;
height:auto;
border:1px solid var(--line);
background:var(--paper-2);
cursor:zoom-in}
.atlas-zoom{
display:block;
width:100%;
min-height:44px;
padding:0;
border:0;
background:transparent}
.atlas-zoom:focus-visible{
outline:2px solid var(--red);
outline-offset:3px}
.atlas-image figcaption{
font-size:13px;
color:var(--ink-2);
line-height:1.7;
padding:8px}
.atlas-placeholder{
display:grid;
place-content:center;
min-height:320px;
border:1px dashed var(--line);
color:var(--ink-2);
line-height:1.8;
padding:24px}
.atlas-placeholder a,.sources a{
color:var(--qing)}

aside{
border-left:1px solid var(--line);
padding:12px 18px 20px;
overflow-y:auto;
display:flex;
flex-direction:column;
gap:12px}
.card{
background:var(--paper-2);
border:1px solid var(--line);
padding:12px 14px}
.dial-card{
display:flex;
justify-content:center}
#dial{
width:218px;
height:218px}
.primary-actions{
display:grid;
grid-template-columns:1fr 1.3fr 1fr;
gap:7px}
.btn{
background:transparent;
border:1px solid var(--ink-3);
padding:6px 10px}
.btn:hover{
border-color:var(--ink)}
.btn.on{
border-color:var(--red);
color:var(--red)}
.btn.main{
background:var(--ink);
color:var(--paper-2);
border-color:var(--ink)}
.ctrl-row{
display:flex;
gap:6px;
align-items:center;
flex-wrap:wrap;
margin-top:8px}
.lbl{
font-size:13px;
color:var(--ink-3);
margin-right:2px}
.p-top{
display:flex;
justify-content:space-between;
font-size:13px;
color:var(--ink-3)}
.p-name{
font-family:var(--kai);
font-size:36px;
color:var(--red);
letter-spacing:5px;
margin-top:3px}
.p-pinyin{
font-size:14px;
color:var(--ink-2)}
.p-tags{
display:flex;
flex-wrap:wrap;
gap:6px;
margin-top:8px}
.p-tags span{
border:1px solid var(--red);
color:var(--red);
font-size:12px;
padding:3px 7px}
.p-loc,.p-note{
font-size:14px;
line-height:1.75;
margin:10px 0 0}
.p-loc::before{
content:"定位　";
color:var(--ink-3);
font-size:13px}
.p-note{
color:var(--qing)}
.p-note:empty{
display:none}
.text-link,.representatives button{
border:0;
background:transparent;
color:var(--qing);
text-decoration:underline;
padding:4px 0;
text-align:left}
.representatives button{
min-width:44px;
min-height:44px;
padding:8px}
.info-card summary,.list-card summary{
display:flex;
align-items:center;
gap:12px;
cursor:pointer;
list-style:none;
min-height:44px}
.info-card summary::-webkit-details-marker,.list-card summary::-webkit-details-marker{
display:none}
.info-card summary::after,.list-card summary::after{
content:"＋";
margin-left:auto;
color:var(--red)}
.info-card[open] summary::after,.list-card[open] summary::after{
content:"－"}
.seal{
width:46px;
height:46px;
background:var(--red);
color:var(--paper-2);
display:grid;
place-content:center;
font-family:var(--kai);
font-size:18px;
flex:none}
.info-card summary b{
display:block;
font-family:var(--kai);
font-size:22px;
font-weight:400}
.info-card summary small{
display:block;
margin-top:3px;
color:var(--ink-3)}
.learning-copy{
border-top:1px solid var(--line);
margin-top:10px;
padding-top:4px}
.learning-copy h3{
margin:12px 0 4px;
font-size:13px;
color:var(--ink-3);
font-weight:400;
letter-spacing:2px}
.learning-copy p{
margin:0;
line-height:1.75;
font-size:14px}
.representatives{
display:flex;
gap:8px;
flex-wrap:wrap}
.sources{
margin:5px 0 0;
padding-left:19px;
font-size:13px;
line-height:1.7}
.plist{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:4px;
margin-top:8px;
max-height:300px;
overflow-y:auto}
.plist button{
border:0;
background:transparent;
text-align:left;
padding:7px 3px;
color:var(--ink-3);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
min-height:44px}
.plist button i{
font-style:normal;
font-size:11px;
display:inline-block;
min-width:22px}
.plist button.cur{
color:var(--red)}
.plist button.seen{
color:var(--ink)}

footer{
border-top:1px solid var(--line);
padding:10px 28px 14px;
display:flex;
justify-content:space-between;
gap:20px;
font-size:12px;
line-height:1.6;
color:var(--ink-3)}
dialog{
width:min(94vw,900px);
height:94vh;
border:1px solid var(--ink);
background:var(--paper);
padding:54px 12px 12px}
dialog::backdrop{
background:rgba(30,25,20,.72)}
dialog button{
position:absolute;
top:8px;
right:12px;
background:var(--paper-2);
border:1px solid var(--ink);
padding:7px 18px}
dialog img{
display:block;
max-width:100%;
height:auto;
margin:auto}

.b{
fill:var(--body);
stroke:var(--ink-2);
stroke-width:1.2;
stroke-linejoin:round}
.b-line{
fill:none;
stroke:var(--ink-2);
stroke-width:1;
stroke-linecap:round}
.b-detail{
fill:none;
stroke:var(--ink-3);
stroke-width:.9}
.b-faint{
fill:none;
stroke:var(--line);
stroke-width:.9}
.b-ink{
fill:var(--ink-2)}
.b-ink-faint{
fill:var(--ink-3)}
.b-faint-fill{
fill:var(--line)}
.b-cap-ink{
stroke:var(--ink-2);
stroke-linecap:round}
.b-cap-fill{
stroke:var(--body);
stroke-linecap:round}
.b-spine{
font-size:7px;
fill:var(--ink-3)}
.b-caption{
font-size:11px;
fill:var(--ink-3)}
.view-label{
font-family:var(--kai);
font-size:17px;
fill:var(--ink-2);
letter-spacing:6px}
.m-faint{
fill:none;
stroke:#c4b59b;
stroke-width:.9;
stroke-linecap:round;
stroke-linejoin:round}
.m-faint.dash{
stroke-dasharray:3 4}
.m-base{
fill:none;
stroke:var(--red-soft);
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round}
.m-base.dash,.m-prog.dash{
stroke-dasharray:4 4}
.m-prog{
fill:none;
stroke:var(--red);
stroke-width:2.5;
stroke-linecap:round;
stroke-linejoin:round}
.m-hand{
fill:none;
stroke:var(--qing);
stroke-width:1.7;
stroke-dasharray:4 4}
.pt{
fill:var(--paper-2);
stroke:var(--red);
stroke-width:1.2;
cursor:pointer}
.pt.seen,.pt.cur{
fill:var(--red)}
.pt.cur{
stroke:var(--paper-2);
stroke-width:1.5}
.lb{
font-size:11px;
fill:var(--ink-3);
paint-order:stroke;
stroke:var(--paper);
stroke-width:3px;
stroke-linejoin:round;
pointer-events:none}
.lb.cur{
font-family:var(--kai);
font-size:17px;
fill:var(--red);
stroke-width:5px}
.halo{
fill:var(--red);
opacity:.16}
.dot{
fill:var(--red);
stroke:var(--paper-2);
stroke-width:1.5}
.sector{
cursor:pointer}
.sector path{
fill:var(--paper-2);
stroke:var(--line)}
.sector.on path{
fill:var(--red);
stroke:var(--red)}
.sector text{
fill:var(--ink);
pointer-events:none}
.sector.on text{
fill:var(--paper-2)}
.sector .zhi{
font-family:var(--kai);
font-size:17px}
.sector .org{
font-size:10px}

@media(max-width:820px){
header{
padding:10px 14px 8px;
align-items:center}
.title h1{
font-size:25px;
letter-spacing:4px}
.title p{
display:none}
.now{
font-size:12px;
max-width:48%}
.now b{
font-size:16px}
.entry-tabs{
margin:8px auto 4px;
padding:0 10px}
.entry-tabs button{
padding:6px 4px}
.atlas-toolbar{
display:grid;
grid-template-columns:1fr;
padding:5px 10px 9px;
gap:7px}
.meridian-picker{
display:grid;
grid-template-columns:42px 1fr}
.meridian-picker select{
width:100%;
min-width:0}
.segmented{
display:grid;
grid-template-columns:repeat(4,1fr)}
.type-switch{
grid-template-columns:1fr 1fr}
.segmented button{
padding:7px 3px}
main{
display:flex;
flex-direction:column;
height:auto;
min-height:0}
.stage-panel{
padding:5px 0 0;
order:1}
.diagram-wrap{
height:min(68vh,620px);
min-height:410px}
.atlas-image{
min-height:410px;
max-height:68vh}
.handoff{
margin:0 10px;
min-height:52px;
padding:8px 4px}
aside{
order:2;
border:0;
padding:10px;
overflow:visible;
display:contents}
.dial-card{
display:none}
.action-card{
order:2;
margin:0 10px 10px}
.current-card{
order:3;
margin:0 10px 10px}
.info-card{
order:4;
margin:0 10px 10px}
.list-card{
order:5;
margin:0 10px 10px}
.primary-actions .btn{
min-height:48px}
.ctrl-row .btn{
flex:1}
.plist{
grid-template-columns:repeat(2,minmax(0,1fr));
max-height:none}
.plist button{
min-height:44px}
.p-name{
font-size:34px}
.info-card summary,.list-card summary{
min-height:50px}
footer{
padding:12px 14px;
display:block}
footer span{
display:block;
margin-bottom:8px}
}

.dial-card{
display:block;
text-align:center}
.dial-card summary{
display:none;
list-style:none;
min-height:44px;
align-items:center;
justify-content:space-between}
.dial-card summary::after{
content:"＋";
color:var(--red)}
.dial-card[open] summary::after{
content:"－"}
.dialog-tools{
position:sticky;
z-index:2;
top:-52px;
height:44px;
display:flex;
justify-content:flex-end;
gap:8px}
.dialog-tools button{
position:static;
background:var(--paper-2);
border:1px solid var(--ink);
padding:7px 18px}
dialog{
overflow:auto}
dialog img{
max-width:none;
width:100%}

@media(max-width:820px){
.diagram-wrap{
flex:none;
height:clamp(440px,58vh,540px);
min-height:0;
max-height:540px}
.dial-card{
display:block;
order:6;
margin:0 10px 10px}
.dial-card summary{
display:flex}
}

@media(prefers-reduced-motion:reduce){
*{
scroll-behavior:auto!important;
transition:none!important;
animation:none!important}
}